［Flex裏技集］クッキー保存、SWF通信、JavaScript連携：現場で使えるFlex実践テクニック（6）（2/2 ページ）

[成瀬勉，クラスメソッド株式会社]

JavaScriptとの連携を行うExtarnalInterFace

　ExternalInterFaceを用いると、FlexをラップしているHTMLに記述したJavaScriptとの相互の呼び出しが可能になります。

■ FlexからJavaScriptを呼び出す

　以下は、FlexからJavaScriptを呼び出すサンプルです。テキストボックスに何か入力し、ボタンを押してください（注意：JavaScriptを使用しているため、Webブラウザによってはうまく動作しない場合があります）。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　ExternalInterfaceの静的メソッドのcall()の、第1引数に実行したいJavaScript上で定義した関数名を、第2引数にJavaScriptに渡す引数を配列で指定します。

　ラップするHTMLに以下のコードを記述します。関数内でreturnを使えば、さらにFlexに値を返すこともできます。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

■ JavaScriptからFlexの関数を実行

　次に、JavaScriptからFlexの関数を実行するサンプルです。テキストボックスに何か入力し、ボタンを押してください（注意：JavaScriptを使用しているため、Webブラウザによってはうまく動作しない場合があります）。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　ExternalInterfaceのaddCallback()というメソッドを呼びます。第1引数には、JavaScript側から呼び出すための関数名、第2引数には実際に実行される関数を指定します。

　ラップするHTML側に以下のようなコードを挿入します。HTML上に埋め込まれるSWFのIDに対して、Flex側で定義した関数名を関数として呼び出します。引数を渡すこともできます。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

「Flexでこんなこともできるんだ！」

　全6回にわたってFlexの特徴的な機能について解説を行ってきましたが、いかがだったでしょうか？

　サンプルは比較的シンプルなものしか紹介できませんでしたが、どの内容もFlexアプリケーションの実開発で必ず必要になるはずです。「Flexでこんなこともできるんだ！」「Flexを使えばこんなことが可能かもしれない……！」といった驚きやひらめきを得るための助けになれば幸いです。

プロフィール

成瀬　勉（なるせ つとむ）
クラスメソッド株式会社　エンタープライズサービス部門アーキテクト

Macromedia FLASH MX 2004 Developer認定技術者
FlashエンジニアとしてWeb製作を経たのちWebアプリケーション開発に携わる。FlexやWPFなどのRIA開発および技術調査を日々行っている。クラスメソッド株式会社での主な開発実績は、旭化成の電子ファイリングシステム、ひまわり証券のオンライントレードシステム、ベルシステム24の営業支援システムなど。
ブログ（C:\narun）も更新中。
FlexやAIRの開発依頼や転職希望の方はコチラ。最近は会社説明会やセミナーもやっています。

「現場で使えるFlex実践テクニック」バックナンバー

• ［Flex裏技集］クッキー保存、SWF通信、JavaScript連携
• バリデータとフォーマッタで“使える”Flexアプリを作ろう
• Flexでリストの中にチェックボックスや画像を表示!?
• Flexアプリの直感的なドラッグ＆ドロップを体験しよう
• FlexアプリにFlashの視覚効果を取り入れるには？
• Flexのリッチな画面遷移テクニック集