2006/11/30
中垣 茂

連載目次へ >>

　今回から複数回に分けてFlex2のコンポーネント紹介やFlex Framework 2の解説をしたいと思います。詳細解説ではなく，「こういうコンポーネントがあって，こんな動きをします」程度なのでエンジニアでない方でも読むことができると思います。

　本記事の中には単純なサンプルをいくつか表示していますので，こちらから最新のFlashPlayer9をインストールしてください＊1。また，インストール後はブラウザの再起動が必要です。インストールされているFlashPlayerのバージョンを確認するにはこちらを利用してください。

「MXML」と「ActionScript 3」

　MXML（Macromedia Flex Markup Language）は，XMLを拡張した“タグ言語”です。ML＝マークアップ言語なのでHTMLとも似ていますが，近年最も身近なRSSのソースを思い浮かべていただくと非常にわかりやすいと思います。

　重要なこととして，MXMLの実体は簡単に言ってしまうとActionScript 3です。MXMLで書かれたコードをコンパイルすると，まずActionScript 3に変換され，そしてswf形式（バイナリコード）にコンパイルされます。

　より細かな内容は必要に応じてそのつど説明するとして，とにかく「どんなコンポーネントがあって，どんなことができるのか」をサンプルとそのソースを使用して説明していきたいと思います。

文字を表示する「Label」と「Text」

　Flash Player上で文字を単純に表示するだけのコンポーネントとしてLabelコンポーネント＊2とTextコンポーネント＊3があります。TextはLabelを拡張したコポーネントで，機能的には大きく以下の点が異なっています。

• Textは複数行表示できるが,Labelはできない
• Textはマウスで選択することができるが,Labelはできない

　では，実際にサンプルを見てみましょう（図1）。

図1：LabelコンポーネントとTextコンポーネント（クリックすると別ウィンドウで表示します。ソースはこちら）

　上から順に
1-1. ノーマル表示
1-2. Styleを適用して表示
1-3. HTMLタグを適用して表示
1-4. 複数行表示
1-5. ワードラップ
1-6. Textの選択不可設定
のようになります。

　1-1. は各コンポーネントの「text」属性＊4に表示する文字列をセットしているだけです。見た目は全く同じですがTextは選択することができます（以下で説明するソースコードはこちらからダウンロードできます）。

　1-2. ではコンポーネント自体にStyleをいくつか適用しています。HTMLのCSSと非常に似ていることがわかると思います。「fontWeight」属性は太字，「fontStyle」属性はイタリック体，「color」属性は色，「fontSize」属性は大きさになります。

　ここでちょっと注意が必要なのはHTMLの場合はブラウザの表示設定で文字サイズを変更するとフォントサイズを指定していても文字が相対的に大きくなりますが，Flash Player内で表示されている文字は大きくならないということです。これを考慮したうえで誰でも"見やすい"文字サイズを設定する必要があります。LabelとTextの設定可能なStyleは同じです。一覧はこちらを参照してください。

　1-3. では「htmlText」属性にHTMLタグを設定して1-2と同じ見た目にしています。Flash Playerで使用可能なHTMLタグはこちらを参照していただくとして，ここで2点ほどMXMLの構文について説明したいと思います。

　1点目は「mx:htmlText」タグ。これはコンポーネントの属性をインラインではなくタグとして記述し，タグに囲まれた内容が属性の値として使用されています。MXMLではこのような記述をすることが可能です。注意点として，「mx:」の次の文字は小文字になります。MXML・ActionScriptともにコンポーネント＝クラス名の先頭は大文字で，属性名＝プロパティ名や関数名は小文字で始まります。

　2点目は「CDATA」です。これはXMLの構文で「CDATAセクション」＊5と呼ばれており，「<>」（ブラケット）などのXML制御文字として認識される文字をそのまま使用できます。

　MXMLでHTMLタグをオンコーディングする場合はインライン（例：<mx:Label htmlText="xxx">）では記述することができません。必ず子タグとして「mx:htmlText」を記述し，その中身は「CDATA」セクションで囲む必要があります。とはいえ，実開発でHTMLタグをオンコーディングすることがあるのかどうかはちょっと疑問です。

　1-4. ではTextは複数行を表示することができますが，Labelは複数行を表示できないことを示しています。ただし，Labelの「text」属性にセットした2行目以降の文字列は切り捨てられたわけではありません。単に2行目以降が表示されていないだけで「text」属性にはセットされたすべての文字が格納されています＊6。

　ここでは，コーディングで複数行を実現するためのコード例として3パターン用意しました。ただし，どの方法もデザインビューでは1行で，実行時にのみ複数行表示を確認できます。実開発において複数行をオンコーディングすることもあるので，そのときはちょっと不便かもしれません。

　一つめの方法では，通常のインラインでの記述方法で改行を「&#13;」で表しています。これはHTMLでUTF-8コードを使用して特殊文字を表示する方法と全く同じです。

　二つめの方法は，特殊文字でインラインということでは一つめの方法と同じなのですが，属性値の中が中括弧で囲まれています。MXMLではこうすることで中括弧の中身をActionScript的に「\n」を改行として表現してくれます。実際，ActionScript3で文字列を操作する場合に改行を挿入したい場合は「\n」を使用します。

　三つめの方法は1-3. で説明したCDATAセクションを使用しています。

　1-5. は「width」属性をセットすることで指定した幅よりも文字列が長い場合の挙動の違いを表しています。Textの場合は自動的にワードラップしますが，Labelは複数行表示ができないので，「...」で超過分を省略表記します。

　逆にTextはこの省略表記ができず，「height」属性を指定しない場合は全体が表示できるように際限なく高さが自動調整されます。高さを指定した場合は文字列の表示がその高さで切れるだけ，スクロールも表示されません。省略表記されたLabelの上にマウスカーソルを合わせると「text」属性にセットされた値がツールティップ（ToolTip）として表示されます。

　1-6. ではTextの「selectable」属性値に「false」をセットすることで文字列の選択をできなくしています。Labelは元から選択できません。

文字を入力できる「TextInput」と「TextArea」

　FlashPlayer上で単純な文字列を入力するためのコンポーネントとしてTextInputコンポーネント＊7とTextAreaコンポーネント＊8があります。これらはHTMLでも非常になじみのあるUIだと思います。TextInputとTextAreaの違いは複数行を入力できるか否かです。

　前項のLabelとTextの関係に似ていますが，TextがLabelを拡張していたのに対し，TextAreaはTextInputを拡張していません。TextAreaはScrollControlBaseクラス＊9を拡張しています。

　では，実際にサンプルを見てみましょう（図2）。

図2：TextInputコンポーネントとTextAreaコンポーネント（クリックすると別ウィンドウで表示します。ソースはこちら）

　上から順に
2-1. ノーマル
2-2. Styleを適用して表示
2-3. HTMLタグを適用して表示
2-4. 入力内容を「*」でマスクして表示
2-5. 入力モードを自動的に変更
2-6. 入力可能文字数を指定
2-7. 入力可能文字種を指定
2-8. 複数行表示
2-9. ワードラップ
2-10. 入力不可設定
2-11. 無効状態
となります。

　2-1. は「text」属性に文字列をセットしただけのノーマル状態です。TextAreaでは「Enter」キーを押下すると改行します（以下で説明するソースコードはこちらからダウンロードできます）。

　2-2. は入力された内容にStyleを適用して表示しています。TextInputが適用可能なStyleの一覧はこちらを参照してください。

　TextAreaの適用可能なStyleは拡張元のScrollControlBaseクラスと全く同じですし，TextInputで適用可能なStyleとほとんど同じです。“ほとんど”というのはTextAreaにはスクロールバーに関するStyleがあるからです。ただし，入力された文字列に関してのみ言えば同じです。なぜなら，どちらも「textField」（protected 変数，UITextFieldクラス＊10を使用して文字列を表示しているからです。

　2-3. はLabelやTextと同じくHTMLタグを適用して表示してくれるのですが，HTMLタグが入力可能なわけではありません。つまり，「<b>」といったHTMLタグを入力してもそのまま文字列として表示されます。

　2-4. は「displayAsPassword」属性を「true」に設定することでHTMLの「input type="password"」と同じ機能を実現しており，入力された値を「*」（アスタリスク）に置き換えて表示します。

　2-5. は「imeMode」属性にIMEの入力モードを設定することで自動的に入力モードを変更してくれます。その挙動はフォーカスが入力フィールドに移ったときに指定された入力モードに変更され，フォーカスが別のコンポーネントに移ったときに元のモードに戻ります。なかなか便利な機能ではないでしょうか。設定する値はIMEConversionModeクラスのパブリック定数＊11から選びます。

　2-6. は入力可能な文字数を指定できることを示しています。バイト数ではなく文字数なので半角全角の区別はありません。

　2-7. は「restrict」属性を指定することで入力可能な文字種を指定できることを示しています。指定可能な特殊記号は文字範囲の「-」（ハイフン）と“以外”を意味する「^」（キャレット）だけです。つまり，「a-z」は「小文字のa〜zまで文字だけが入力可能」であることを意味し，「^a-z」は「小文字のa〜zまでの文字以外が入力可能」であることを意味します。

　2-8. ではTextAreaは複数行を表示することができますが，TextInputは複数行を表示できないことを示しています。これもLabelと同じで表示できないだけで「text」属性には複数行文の文字列が格納されています。また，TextAreaでは縦方向のスクロールバーが表示されています。デフォルトでは行数×文字の高さがTextAreaの高さを超えた場合に縦スクロールが表示されるようになっているからです。

　常に縦スクロールバーを表示しておきたい場合は「verticalScrollPolicy」属性に「on」をセットします。逆に常に縦スクロールバーを表示したくない場合は「off」をセットします。デフォルトの設定は「auto」（＝自動表示）です。

　2-9. はTextAreaのワードラップについて示したものです（TextInputはワードラップできません）。Textは常に自動的にワードラップします。TextAreaも同様にデフォルトでは自動的にワードラップしますが，「wordWrap」属性に「false」をセットすることでワードラップしないようにすることもできます。「wordWrap」属性が「false」，かつ，文字列がTextAreaの横幅を超えた場合，デフォルトでは自動的に横スクロールが表示されます。

　常に横スクロールを表示したい場合は「horizontalScrollPolicy」属性に「on」をセットします。常に横スクロールバーを表示したくない場合は「off」をセットします。デフォルトの設定は「auto」（＝自動表示）です。

　2-10. は「editable」属性に「false」をセットすることで入力を受け付けなくした状態です。入力を受け付けないだけで文字列の選択やスクロールはすることは可能です。この状態のTextAreaはTextと似ていますが背景色やスクロールバーがあるなどの違いがあります。ユーザーに文章を読ませたいけどコンポーネントのサイズは固定にしたい場合などは「editable」属性に「false」にしたTextAreaのほうが向いているかもしれません。

　2-11. は「enabled」属性に「false」をセットした状態です。この状態では入力を受け付けないだけでなく，文字列の選択も，スクロールもすることができません。また，文字列の色はStyleの「disabledColor」に設定された色で表示されます（デフォルト値は「#AAB3B3」）。指定した条件が満たされない限り入力を受け付けないなどの用途で使用することができると思います。