TOP＞システム開発＞ 付箋っぽいウィンドウを作ろう




Ruby on RailsとAdobe AIRでデスクトップアプリを作る
Ruby on RailsとAdobe AIRでデスクトップアプリを作る

第５回：どこでも付箋紙にアクセス！
著者：ワイズノット  増井 雄一郎   2007/9/27
1   2  3  次のページ
付箋っぽいウィンドウを作ろう

   これまで、Ruby on Rails（以下、RoR）のscaffold_resourceを使ってRESTfulな付箋紙サーバを作り、XMLで付箋のデータを取り出せるようにしました。続いてAdobe AIRを使って、付箋紙クライアントを作りました。

   今回は「第4回：AIRでメニューウィンドウ作成！」に引き続き、付箋紙クライアントを作成していきます。そして自宅のPCで付箋紙にメモをしても、ノートPCや会社のPCから同じ付箋にアクセスできるようにします。

   まずは、前回作成した図1の空ウィンドウを付箋風のユーザインターフェースにしていきましょう。付箋のウィンドウはタイトルバーも枠線も表示せず、黄色い入力欄だけを持ったウィンドウにします。
空ウィンドウ
図1：空ウィンドウ
（画像をクリックすると別ウィンドウに拡大図を表示します）

   通常、ウィンドウは1つのクラスに納めます。今回はStickyクラスを作り、そこで1枚の付箋ウィンドウを管理しましょう。

   はじめにmenu.mxmlを変更します。いままでウィンドウの生成などをcreate関数の中でやっていましたが、今度はStickyクラスで行うようにします。create関数では、Stickyクラスのオブジェクト生成と表示を行います。

memu.mxml
memu.mxml
（画像をクリックすると別ウィンドウに拡大図を表示します）

   次にStickyクラスを定義します。「クラス名.as」というファイルを作り、そこで定義すると、そのクラスを呼び出されるときに自動的に読み込まれます。

Sticky.as
Sticky.as
（画像をクリックすると別ウィンドウに拡大図を表示します）

   2〜6行目は、ここで使われるライブラリを読み込んでいます。8行目でStickyクラスを定義し、9〜12行目でメンバ変数を定義しています。

   ActionScriptでは、クラス名のメソッドを定義するとコンストラクタになります。これはRubyのinitializeに相当します。14行目でStickyメソッドを定義しているので、これがコンストラクタになります。

   16〜22行目では、ウィンドウを開いています。17行目でクロームと呼ばれるウィンドウのスタイルを選択しています。今回はウィンドウにタイトルバーなどの装飾を何もつけないので、「NONE」にしています。

   次にウィンドウに入力欄を追加します。今回は入力欄にTextFieldコンポーネントだけを使います。24〜33行目でeditorメンバ変数に入力欄のTextFieldコンポーネントを代入し、それを34行目でウィンドウに追加します。これで入力欄がウィンドウに追加されました。

   37〜38行目は、ウィンドウの初期サイズを指定します。ウィンドウ一杯に入力欄が広がっているので、「ウィンドウのサイズ＝入力欄のサイズ」になるようにします。

   ここでウィンドウのサイズと入力欄のサイズを同じにしましたが、ウィンドウをリサイズすると、入力欄との大きさに差違がでます。そこで入力欄が常にウィンドウ一杯になるように、ウィンドウのリサイズが行われると入力欄のサイズを合わせるようにします。

   41〜43行目では、ウィンドウのリサイズが行われると、resizedメソッドが呼び出されるように定義しています。このメソッドは66〜69行目で定義され、入力欄のwidthとheightをウィンドウと同じにしています。これによって、ウィンドウをリサイズしても常にウィンドウ一杯に入力欄が広がるようになります。

   リサイズの処理を追加しましたが、ウィンドウのクロームを「NONE」にして、タイトルバーや枠線を非表示にした場合には、ウィンドウの移動やリサイズを行う方法がありません。

   そこで、独自にウィンドウのイベントを処理し、ウィンドウをドラッグして移動するのと同じように、右下をドラッグするとリサイズされるようにしましょう。46〜58行目がそのコードに当たります。ウィンドウの右下から20ピクセル以内をクリックすると、リサイズを開始し、それ以外をクリックすると、ウィンドウの移動が開始されます。

   ここまでをコンストラクタが処理します。19行目のNativeWindowコンストラクタの第1引数でfalseを指定すると、ウィンドウオブジェクトを生成しますが表示しません。

   ウィンドウを表示するには、showメソッドで行います。61〜63行目で定義している、window.visibleで表示します。これで実際にウィンドウが表示されます。

   これが、付箋っぽいUIを持ったウィンドウのクラスになります。さて、これを実行してみましょう。

> adl stickies-app.xml

   図2のようなウィンドウが表示されました。

付箋紙ウィンドウ
図2：付箋紙ウィンドウ

   黄色い四角をドラッグすると移動でき、右下の辺りをドラッグすると自由にサイズを変更することもできます。付箋ですから、もちろん文字を入力することができますが、残念ながら現在のβ1はMac OS X上で日本語が正しく入力されないというバグがあり、次期以降の改善が望まれます。

   さて、これでAIRを使って付箋っぽいUIを持ったアプリケーションを作ることができました。次に、このAIRのアプリケーションとRoRを繋げ、どこでも同じデータで使える付箋紙アプリケーションを完成させます。
1   2  3  次のページ

株式会社ワイズノット 増井 雄一郎
 著者プロフィール
株式会社ワイズノット  増井 雄一郎
PukiWikiなどのオープンソース活動を経て、2005年からRuby on Railsに的を絞り、2006年はRubyに関する仕事のみで生計をたてる。これまでのフリー活動から転身し、アメリカ行きを目指して2007年4月に(株)ワイズノットに入社。クロスメディア事業部でSaaSプラットフォームの構築に従事。現在の興味はテキストマイニング。
この記事の評価をお聞かせください
 ボタンをクリックしますとウインドウが開きます。
 ご意見、ご要望にお応えします！ インプレスIT INSIDE
INDEX
第5回：どこでも付箋紙にアクセス！
付箋っぽいウィンドウを作ろう
  AIRとRuby on Railsを繋ぐ！
  RoR側で登録した付箋の表示
Ruby on RailsとAdobe AIRでデスクトップアプリを作る
第1回 付箋紙アプリケーションを作ろう！
第2回 新機能「scaffold_resource」とは？
第3回 Adobe AIRで付箋風クライアントを作ろう
第4回 AIRでメニューウィンドウ作成！
第5回 どこでも付箋紙にアクセス！
関連記事
Ruby on Rails入門
徹底比較!!Ruby on Rails vs Javaフレームワーク
新着記事

Think IT 過去人気記事

Think IT
注目おすすめ情報
cript type='text/javascript'>

Think IT人気ライター BEST 5

People
IT製品/サービス資料ダウンロード
    おすすめのホワイトペーパー情報を準備中です