それ、Flexで！（左から右へ受け流すサンプル付き）

2007年11月12日プログラミングTIPS

空前のAjaxブームもあってか、ものすごいテクニックを駆使したJavaScriptアプリケーションが存在します。むりやりJS技術だけで頑張ってる姿を見ると…「それ、Flexで！」と思ってしまいます。

JavaScriptで凝ったUIを作れることは素晴らしいのですが、世の中には「適材適所」という言葉があります。そろそろJSだけではなく、違う方法も模索した方が良いような気がします。
Webアプリケーションがデスクトップアプリケーションに負けているところは、デスクトップで当たり前のようにできていた動作がWebでは簡単に実現できないことです。

わかりやすい例が「ドラッグアンドドロップ」。
Webアプリケーションで全てのブラウザ向けに「ドラッグアンドドロップ」機能を搭載しようとすると、なかなか骨が折れます。

Flexで道具を左から右へ受け流すサンプル

というわけで、今回はFlexで「ドラッグアンドドロップ」のサンプルを紹介します。
左側に「道具一覧」が表示され、右側には「黒いスペース」があります。この右側のスペースに左側の道具をドラッグアンドドロップしてみてください。

道具を左から右へ受け流すことができたでしょうか？
Webアプリケーションで難しかった「ドラッグアンドドロップ」が実現されていますね。

驚くのはこれからで、このようなドラッグアンドドロップのWebアプリケーションであれば、
Flexなら5分で作れます！
全ソースコードも掲載しておきます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="https://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();"
     width="220" height="200" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:List id="list1" x="5" y="5" width="100" height="150" dragEnabled="true" dataProvider="{buki}" labelField="name"></mx:List>
    <mx:List id="list2" x="115" y="5" width="100" height="150" dropEnabled="true" labelField="name" dragEnter="dragItem();"></mx:List>
    <mx:Text x="5" y="163" text="{list1.selectedItem.name}" width="210" id="text1" color="#FFFFFF"/>
    <mx:Style>
        List{
            background-color:#000000;
            color:#FFFFFF;
        }
    </mx:Style>
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var buki:Array = new Array(
            {name:"ひのきのぼう", data:"5G"}, 
            {name:"はやぶさのけん", data:"25000G"}, 
            {name:"どうのつるぎ", data:"100G"}, 
            {name:"あまぐものつえ", data:"非売品"}, 
            {name:"けんじゃのつえ", data:"15000G"}, 
            {name:"ガイアのつるぎ", data:"非売品"}
        );
        public function initApp():void{
            text1.text = "左から右へ（受け流す）ドラッグアンドドロップ";
        }
        public function dragItem():void{
            text1.text = list1.selectedItem.name + "は" + list1.selectedItem.data +"です";
        }
    ]]>
    </mx:Script>
</mx:Application>

たったこれだけです。
Flexならたいしたテクニックも使わずに「ドラッグアンドドロップ」が実現できます。
FlexBuilder3を使えば、用意されたコンポーネントを配置するだけで自動的にMXMLが記述され、細かいロジックはActionScriptで記述できます。

これからWebとデスクトップをシームレスにつなぐ「Adobe AIR」の正式版が公開されると、よりFlexの技術が浸透していきます。
「Flex2,ActionScript3.0が優れている9の理由とAjaxとの差」にも書いたように、動作速度の面も解消され、これからはWebにFlashアプリケーションが増えていくことは確実です。
Yahoo!のアプリにもFlex製が続々登場しています。→Yahoo! Mapsなど。
凝ったUIを作るならFlex、およびActionScriptで作られたFlashも選択肢の一つだと思います。

JavaScriptとFlashの流れ

実はJavaScriptとFlashの流れは似ています。
最初はHTMLを彩る技術として鳴り物入りで登場し、今まで興味の無かった人にまで技術が行き渡り、だんだんウザくて重くなってきて、離れていって、少し改良して大ブレーク！しています。
AjaxはGoogleのおかげで広まり、FlashもYouTubeやニコニコ動画で使われて日常的に利用されるようになってきました。
Flash系コンテンツは、ActionScript3で10倍速くなったこともあり、これからはFlex、AIRを含めて、インターネット、デスクトップアプリケーションともにAdobeの時代が来ます。

表にまとめるとこんな感じになります。

第一期		第二期		第三期		第四期
JavaScriptすげー	→	JSで遊ぼう	→	JS重い、JSウザい	→	Ajaxすげー
Flashすげー	→	Flashでアニメーション	→	Flash重い、Flashウザい	→	Flash、AIRすげー

どちらかが優れていて、どちらかがダメだというわけではありませんが、適材適所というものがあるので、JSでは難しいUIをFlexで簡単に実現してしまうのも一つの手だと思います。
AdobeがFirefoxにECMAScript4エンジンを寄贈したことにより、次期FirefoxはJavaScriptが大幅に高速化されるため、JavaScriptとActionScriptの組み合わせも面白いのではないかと思います。

ZAPAブログ2.0