ZAPAnet総合情報局 > [Z]ZAPAブロ〜グ2.0 > プログラミングTIPS > それ、Flexで!(左から右へ受け流すサンプル付き)

それ、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="http://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の組み合わせも面白いのではないかと思います。

関連リンク

はじめてのActionScript3.0プログラミング
ActionScript3.0の速さを体感してみよう!
Flex2,ActionScript3.0が優れている9の理由とAjaxとの差
Flashの内容を画像に変換する方法
はじめてのAIRプログラミング
Adobe Flex 2プロフェッショナルガイド Windows & Macintosh対応
クジラ飛行机
毎日コミュニケーションズ
2007-09-27

by [Z]ZAPAnetサーチ2.0
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD付)
大重美幸
ソーテック社
2007-08-13

by [Z]ZAPAnetサーチ2.0