Web　酒　肴

途中まで読んで、ようやくプロジェクトの作り方からの説明があった。 どうやらここからがチュートリアルのようだ。 ということで、先ほどインポートしたプロジェクトは無視して進めていくことにする。なんという無計画。

プロジェクトの作成

• [ファイル]→[新規]→［Flexプロジェクト］を選択
• プロジェクト名に「FlickrRIA」と入力してOK
• アプリケーションの種類は「Webアプリケーション（Flash Playerで実行）」を選択
• サーバテクノロジは「なし」を選択

そして終了をクリックすると作成される。

画面フォーマット

プロジェクトを作成するとFlickr.mxmlが開かれる。 左上に「ソース」タブと「デザイン」タブがあるが、まずは「ソース」タブを選択肢、修正する。

修正前

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:Application>

修正後

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
 horizontalAlign="left"
 verticalGap="15" horizontalGap="15" >
</mx:Application>

恐らくデザインの修正なので、仮に失敗しても何とかなるだろう、との気軽な感じで次に進めばいいだろう。

デザインモードで検索フォーム作成

そろそろ面白くなってきた。 左上の「デザイン」タブを押して、検索フォームをグラフィカルに作成していく。

左下の「コンポーネント」というビューには、恐らくあらかじめ準備されているFlashの数々のコンポーネントが列挙されている。 その中のレイアウトの下のHBoxをドラッグ＆ドロップで画面上に持っていくと、ポップアップが現れて表示サイズを聞いてくるので、そのままOKボタン。

たったこれだけ。 まあ、そうだろうなと予測はしていたけど、なんと嬉しいことか。 正直言ってアプリケーション作る時は、大抵頭の中には作りたいものが具体的にあって、その作り方もかなり細かいレベルでイメージしている。 後は手を動かすだけなんだけど、その手を動かす時間が煩わしくてしかたがないわけだ。 思考のスピードに手のスピードがついてくるはずなどないのだけど、こういうGUIビルダーというのは考えうる現実の解の中ではやはり最適だと思う。 ブラウザアプリケーションの世界にももっと普及すべきだ。 僕が知らないだけで普及しているのだろうか？

次はコントロールの下のLabelを先ほど作成したHBoxの領域にドラッグ＆ドロップ。 そのラベルの中をダブルクリックしてラベルの文字列を編集する。 Adobeのチュートリアルではラベルの文字列も英語なので、なんとなくオレ日本語に翻訳してみよう。

同じくコントロールの下のTextInputをHBoxの領域内にドラッグ＆ドロップ。 ラベルの右側に配置する。 さらにその右側に同じくコントロール下のButtonを配置し、ボタンの文字列を「検索」というオレ日本語に変更する。 以下のようになったはずだ。

一度「ソース」タブを選択してどうなったか見てみよう。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
     horizontalAlign="left"
     verticalGap="15" horizontalGap="15" >
    <mx:HBox width="100%">
        <mx:Label text="Flickrタグ もしくは検索ワード"/>
        <mx:TextInput/>
        <mx:Button label="検索"/>
    </mx:HBox>
</mx:Application>

mx:HBoxという領域内にmx:Label、mx:TextInput、mx:Buttonが配置されているのがわかるはずだ。デザインのほうでサイズなどを変更すればソース上でwidthなどの属性として反映されるようになっている。適宜画面を見ながら好きなように変更してもよい。

では次回はFlickrに接続する部分の処理を実装していく。

もうそろそろFlashに手を出しておかなければいけないだろうと感じ、Flex Builder 3のデモ版を入手した。

インストールはごく普通。ここでも参考にすればいいでしょう。 ちなみに今は日本語版があるのでそちらをダウンロードすることをお勧めします。

Flex／AIRの開発環境Flex Builder 3を使ってみよう

こちらのチュートリアルを参考にすることにした。英語なのが辛いところ。

Creating a Simple RIA

前置きが続くので２ページほど飛ばすと、突然コードが出てきた。 どこにどのように入力するのかは全く説明されていない。 ベースはEclipseなので、ある程度の使い方はわかるのだが、いくらなんでもこれじゃどうしていいのかわからない。

ということで、このチュートリアルのソースコードをダウンロードすることにした。 ダウンロードはこちら。 「Building a simple RIA」というリンクからzipファイルをダウンロードできる。

Download preconfigured Flex Builder projects

以下のように[ファイル]→[インポート]→［Flexプロジェクト］でファイル選択画面へ。

アーカイブファイルにダウンロードしたzipファイルを指定すると、そのままインポートできた。

プロジェクト直下にある２つのmxmlファイル（FlickrRIA.mxml、FlickrThumbnail.mxml）がこのプロジェクトの主要な部分みたいだ。 とりあえず走らせてみる。 [実行]→［FlickrRIAを実行］でブラウザが起動し、このアプリケーションが表示される。

検索窓に適当なキーワードを入れて検索するとFlickrから検索してくる。 （海外ユーザのタグを検索するようなので、英語で入力しましょう。）

※豆知識
マキシマムザホルモンは海外でCDを発売していないにも関わらず、海外にコアなファンやコピーバンドがたくさんいるのです。

ではコード内容の解析は#2で。