SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

Flex 2でアウトラインエディタを製作してみる

WindowsアプリをWebアプリとしてリメイク


  • X ポスト
  • このエントリーをはてなブックマークに追加

Flexの長所

 では、完成したFlex版のアウトラインエディタを使ってみて、Windowsアプリケーションと比較した際に、改めて気づいた点などをまとめてみます。

いろいろなOSのWebブラウザで動くこと

 まず、Flex 2の強みは、いろいろなOSのWebブラウザで動くことでしょうか。

 Flash Playerをベースにして作られているので、Flashがインストールされていれば、Windows、Mac OS X、Linuxと多くの環境で動作させることができます。

以下は、Mac OS X+Safariで動かしてみたところ
以下は、Mac OS X+Safariで動かしてみたところ

 先ほどのキャプチャ画像(Windows+Firefox)と比べてもまったく同じように動いていることが分かります。

 また、多くの環境で同じようにプログラムを動かすという点から考えると、HTML+JavaScriptを利用するのも選択肢の1つですが、FlexがHTML+JavaScriptに勝る点として、初めから高度なコンポーネントが備わっている点、そして、OSやブラウザごとの差異をそれほど気にしなくて良い点などが挙げられます。

高度なコンポーネントが魅力

 そして、Flexの大きな魅力の1つに、高度なコンポーネントが初めから豊富に用意されていることが挙げられます。HTML+JavaScriptだと作るのが大変なプログラムでも、用意されているコンポーネントを使うことで、手軽に実装できます。

 ボタンやリストは当然のこと、データグリッドや、ツリー、メニュー、画像付きリストなど、Windowsのフォームアプリケーションに用意されているような主要なコンポーネントは大体揃っています。

MXMLタグでさくさくレイアウト作成

 また、Webブラウザ内で動作することを考慮されていますから、コントロールの配置も、座標や幅など実際の値を指定する以外にパーセントでも指定できるようになっています。これは、HTMLで画面レイアウトしていく感覚に似ています。

 コンポーネントの配置は、MXMLというXMLベースのマークアップ言語で記述していきます。例えば、ボタンを水平方向に3つ並べるならば、次のように記述できます。

ボタンを3つ水平方向に配置
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:HBox>
        <mx:Button label="OK"/>
        <mx:Button label="NG"/>
        <mx:Button label="CANCEL"/>
    </mx:HBox>
</mx:Application>
 

 水平方向に配置するのが<mx:HBox>タグで、垂直方向に配置するのが<mx:VBox>タグです。他にも、タイル状に並べる<mx:Tile>タグなど、これらを組み合わていくことでレイアウトを作っていきます。

ドラッグ&ドロップが簡単

 Flex 2のフレームワークは、実際よく考えられて作られています。中でも、ドラッグ&ドロップの処理は非常に簡単に実装できます。なんと言っても、ドラッグを行いたいコントロールのdragEnabledをtrueに設定し、ドロップを行いたいdropEnabledをtrueに設定するだけです。これだけで、リスト間でアイテムをコピーするようなドラッグ&ドロップの実装が完了してしまうのです。

 今回作った、アウトラインエディタでも、アイデアカードの位置の移動を、ドラッグ&ドロップで行うことができますが、実装にかかった手間は、ほんの数秒です。次のようにdragEnabledropEnabledragMoveEnabled、3つのプロパティをtrueに設定するだけでした。

<mx:Tree id="index_tree"
width="100%" height="100%"
labelField="@label"
dataProvider="{index_data}"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"/>

ウィンドウのポップアップ

 また、Windowsのフォームアプリケーションでは、作業に応じて複数のウィンドウを開いたり閉じたりしますが、Flexでも同様に手軽に実現できます。

 動作はWebブラウザの中に限られてしまいますが、複数のウィンドウのポップアップすることができます。また、メッセージボックスやファイルダイアログで使われる、1つのウィンドウだけしか操作できないようにするモーダルダイアログも利用することができます。

Flexの弱点

 では、Flexで作れば、Windowsのクライアントアプリケーションよりも良いものができるのかと言えば、そんなことはありません。Flashベースであるが故の不便さ不自由さもあります。

日本語テキストの入力に不満あり

 まず、今回完成したアウトラインエディタを使っていてストレスを感じたのが、テキスト入力に関する部分です。テキストの入力には、主にFlexのTextAreaコンポーネントを使っているのですが、Windows版でも日本語入力にもたつきがあります。Mac OS Xでは、入力・変換候補が画面の一番下に出てしまい、入力に不自由を感じます。加えて、標準ではエディタにアンドゥの機能が備わっていないので、アンドゥの処理を自前で実装する必要があります。

 このように、Flex 2のエディタコントロールは、長文の入力には向いていないことが分かります。文章入力は基本的な部分ですので、今後のバージョンアップに期待したいです。

クリップボードが取得できない

 それから、セキュリティの関係でクリップボードの内容を取得できないという欠点もあります。そのため、クリップボードの内容を加工するような機能を作ることができません。これは、うっかり暗証番号や個人情報などをコピーしたまま、悪意のあるサイトにアクセスした場合に、これらの情報を盗まれるのを防ぐためです。

 ただし、エディタコントロール上では、ショートカットキーの[Ctrl]+[C]でのテキストのコピー、[Ctrl]+[V]でのペーストなどの操作を行えるようになっているので、大きな問題はないかもしれません。

使えないショートカットキーが多い

 他には、WebブラウザのショートカットキーとFlexのアプリケーションで使いたいショートカットキーがぶつかってしまうことがあるため、利用できるショートカットキーが制限されます。たとえば、IEで誤って[Ctrl]+[W]を押してしまうと、ウィンドウが閉じてしまいます。複雑な操作を行うツールを作る場合には、ショートカットキーが多く必要だと思いますので、その割り当てに苦労するかもしれません。

AIRという選択肢も!?

 このように欠点もいくつかありますが、そのほとんどがWebブラウザ上で動くことによる短所とも言えます。そのため、Flexを利用してクライアントアプリケーションを開発できる、Adobeの新技術AIRという選択肢もあります。AIRであれば、Webブラウザの制約、セキュリティの問題などを気にすることなく動作させることができます。

次のページ
アウトラインエディタの製作

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

クジラ飛行机(クジラヒコウヅクエ)

ソフト企画「くじらはんど」にて、多数のフリーソフトを公開しています。日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」、日本語Wiki記法が特徴の「KonaWiki」などを公開しています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1764 2009/10/20 17:03

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング