次のページへAIRウィジェット作成の準備をしようそれでは早速、サンプル・ウィジェットを作っていきましょう。FlexをベースにしたAIR開発AIRの開発で重要なポイントに「AIRはFlexで開発することが可能」という点があります。FlexベースでのAIR開発は、従来のFlex開発のノウハウを100%を流用でき、既存Flexアプリケーションをほとんど修正することなくAIR化できるという特徴があります(さきほどのオンラインFlexサンプルのように、その逆も容易です。詳しい方法は後述します)。本連載では「Flex(ActionScript&MXML)をベースにしたAIRウィジェット作成の基礎から応用まで」をお届けしていきます(ActionScriptとMXMLについては後述します)。開発環境を整えることにします。3)を用意する必要があります。編集部注:Aptanaを使ったAIRアプリの作り方について詳しく知りたい読者は、「AptanaでAjax・AIR・iPhone用ページの開発を行う」の「AIRアプリケーションの作成手順は?」をご覧ください。邦訳Wiki」はJavaScriptでAIRを開発する際に手助けとなるポケットガイドです。APIは古いもので動かないかもしれませんが、JavaScriptでのAIR開発の流れを知ることはできると思います。筆者も翻訳に参加していました。3のインストールに関して述べます。3をダウンロードします。2008年1月の記事執筆時点ではベータ3が最新です。Adobeメンバーシップにユーザー登録しておく必要があります。4」に名称変更しています。3を起動し、アプリケーションを作成する際の基本となる「プロジェクト」を新規作成します。3を起動して、[メニュー]の[ファイル]→[新規]→[Flexプロジェクト]を選択します。今回はプロジェクト名を「SimpleTimer」にし、アプリケーションの種類から「デスクトップアプリケーション」を選択します。AIRプロジェクトの新規作成[終了]ボタンをクリックすると、空のプロジェクトが作成されました。新規プロジェクト作成で作られたもの自動的に作成されたファイルをここで確認しておきます。MacromediaのXML?」ここでMXMLファイルというものが出てきました。Languageの略で、タグで記述され、主にアプリケーションの「見た目」(UI、ユーザーインターフェイス)を担当するファイルです。今回のサンプルではスクリプト(ActionScript)もこのMXMLに書いてしまいます。(※MacromediaMacromedia:アドビ・システムズ社に買収された米ソフトウェア会社です。FlashやFlex、DreamweaverやFireworksなどを開発していました。それらの製品群はAdobeで引き続き開発が続けられています。ソースコードで書くの?プロジェクトが新規作成されたので、まずはウィジェットの「見た目」を作っていきます。手順【1】[デザイン]ビューに切り替えるプロジェクト新規作成時にはSimpleTimer.mxmlが自動的に開かれており、画面上部の[ソース]タブが選択された状態になっています。ソースコードを表示するこの[ソース]ビューから見た目を表示する[デザイン]ビューにタブを切り替えることにします。3の[デザイン]ビュー(画像をクリックすると拡大します)画面左上にあるのは[Flexナビゲーター]。プロジェクトの構成要素を一覧できる画面左下にあるのは[コンポーネント]ビュー。ボタンやテキスト入力などの「コンポーネント」を一覧できる画面の真ん中にあるのは[デザイン]ビュー。ここにコンポーネントを張り付けて大まかな画面のデザインができる画面右下にあるのが[Flexプロパティ]ビュー。各コンポーネントの設定(幅や高さ、フォントサイズなど)を変更できる手順【3】ApplicationControlBarを上の方に張り付ける[コンポーネント]ビューの[レイアウト]を開き、「ApplicationControlBar」を中央の[デザイン]ビューにドラッグ&ドロップします。この際に、コンポーネントの整列を手助けしてくれる青色のガイドが表示されます。画面の左上端にぴったりくっつくように張り付けます。「ApplicationControlBar」とは、アプリケーションをコントロールするボタンやメニューなどを配置するレイアウト担当のコンポーネントです。ApplicationControlBarの張り付け手順【4】[プロパティ]ビューでApplicationControlBarのドックをtrueに設定これにより、ApplicationControlBarが画面上部に「ドッキング」するようになります。ApplicationControlBarのドッキング(画像をクリックすると拡大します)手順【5】ボタンを3個ApplicationControlBarに張り付ける[コンポーネント]ビューでボタンを選択し、ApplicationControlBarに3個張り付けましょう。ボタンを選択して、ApplicationControlBarにマウスを近づけると、レイアウトをガイドする青色の線とは違う色の線が表示され、確実に配置できるようになっています。ここで利用したボタン・コンポーネントはポピュラーなコンポーネントの1つですね。いわゆる「ボタン」です。次に、張り付けた3個のボタンのプロパティを以下のように設定してください。ボタンのプロパティここでの「ID」とは、各コントロールを識別するIDです。このIDを指定することにより、プログラムと各コンポーネントをやりとりできます。幅はボタンの見た目を統一するために同じ数値を指定します(スタイルシートによる幅の指定は次回以降の連載を参照してください)。プロパティを設定すると、以下のような画面イメージになります。上記でプロパティを設定していたプロパティはそれぞれ図11の場所にあります。[Flexプロパティ]ビューラベルとは、シンプルな文字列コンポーネントです。ApplicationControlBarの下の適当な場所に1個張り付けます。プロパティは以下のように設定します。ラベルのプロパティ[プロパティ]ビューのフォントサイズの指定場所が分かりにくいかもしれませんが、図12の場所にあります。フォントサイズコンボボックスのゲージでは100は設定できないので、キーボードで入力して設定してください。ラベルのプロパティこの段階で下記のような画面イメージになります。ボタンとラベルを張り付けた結果ここまでのソースコードをいったん保存しておきましょう。Ctrl+Sキーまたは、[メニュー]の[ファイル]→[保管]で保存します。次ページでは、ソースコードを修正してみましょう。AIRウィジェットにイベントやタイマーを付ける方法についても解説します。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。