Flash コンテンツを表示する

事前準備

Mobageオープンプラットフォームでは Flash コンテンツを表示するのに便利な API が提供されています。この API を使うためにはアプリケーションの Gadget XML を以下のようにして Feature を使えるようにする必要があります。

なお、後述のmbga.utilを用いてFlashの非表示/表示のハンドリングを行う場合は、<Require feature="mbga" />も指定する必要があります。

Flash コンテンツの表示

以下のコードは、Flash コンテンツをアプリケーション上で表示するための例です。

  • gadgets.flash.embededFlash() を呼び出すことにより、Flash コンテンツを埋め込む HTML を生成・表示します。
  • 引数は以下になります。
    • Flash コンテンツのURL
    • Flash コンテンツを埋め込む先の DOM 要素
    • 表示する Flash コンテンツが必要とする Flash Player の最低バージョン
    • Flash コンテンツに指定したいパラメータ

パラメータの Value は文字列型で指定してください。また、JavaScriptからFlashオブジェクトにアクセスしたい場合は、パラメータで上記の例のようにidを指定した上で、指定したidを用いて document.getElementById("flash_object") のようにしてFlashオブジェクトを取得して下さい。

注意事項

Mobageオープンプラットフォームには友達招待(requestShareApp)、日記作成(requestCreateDiary)、アイテム購入(requestPayment)などオーバレイ表示を必要とするAPIがあります。これらのAPIを呼び出した際に、Flash コンテンツがこれらのポップアップより優先されて手前に表示されてしまい、オーバレイされたウィンドウの操作ができなくなる問題が発生する場合があります。

この問題を回避するためには、gadgets.flash.embedFlashの第四引数に指定するパラメータの"wmode"の値を、上記の例のように"opaque"、または "transparent"に指定します。 特に指定を行わなかった場合、wmode="opaque" がデフォルト値として用いられます。

ただし、ブラウザの種別やFlashのバージョンなどの環境によっては、この対応では解消しなかったり、Flashコンテンツ上で全角文字が入力できないなどの問題が発生する場合があります。

このような現象を避けるために、オーバレイ表示前に一時的にFlash コンテンツを非表示にしてオーバレイが閉じた時に呼ばれるコールバック関数の中でFlash コンテンツを再度表示する、などの処理を入れることをお勧めします。

Flashコンテンツ表示/非表示の例

以下に、Flashコンテンツの表示/非表示を行う例を示します。

gadgets.flash.embedFlashにおけるid指定

後にFlashオブジェクトをgetElementById()で取得するため、gadgets.flash.embedFlashの第四引数のパラメータで"id"を指定します。ここでは、idとして"swfElement"を指定しています。gadgets.flash.embedFlashではIEとその他のブラウザでFlashのDOMへの埋め込み方法が異なりますが、この方法でidを指定することでどちらの埋め込み方法でもidを指定することでFlashオブジェクトをJavaScript側から取得できるようになります。

Flashの非表示/表示を行うための方法

オーバレイのopen/closeに合わせてFlashを非表示/表示状態にする方法はいくつか考えられますが、ここでは操作が簡単なためJavaScriptからElementのstyleのvisibilityプロパティを変更することで非表示/表示を行ないます。

例として、以下のような関数が考えられます。

hideFlashでvisibilityを"hidden"にすることでFlashを非表示状態にし、
showFlashでvisibilityを"visible"にすることでFlashを表示状態に戻すことができます。

オーバレイのOpen/CloseにFlashの非表示/表示を同期させる方法

以下に、mbga.util以下のAPIを用いてrequestPaymentなどで表示されるオーバレイのOpen/Closeに合わせてFlashの非表示/表示を行う方法を示します。
なお、mbga.util APIを使う場合は他のmbga APIと同様にGadget XMLに<Require feature="mbga" />を指定してください。

mbga.util.registerOpenOverlayHandlerを用いることでrequestShareApp, requestPayment等オーバレイを表示するAPIコールをフックし、その前に毎回行う処理を指定することができます。また、mbga.util.registerCloseOverlayHandlerを用いることで、表示されたオーバレイの右上に表示された「×(閉じる)」ボタンをユーザが押した場合に毎回行う処理を指定することができます。なお、registerCloseOverlayHandlerで指定した処理は、オーバレイが表示された状態のままユーザが画面全体を更新した場合には実行されないことに注意してください。(「×」ボタンを押したイベントをキャッチできないため。)
mbga.util以下のAPIについては、それら自体のドキュメントもご覧ください。

更新履歴

  • 2010/10/29
    • Flashの非表示/表示の切り替えについて追記
  • 2010/10/07
    • 注意事項を追記

PREVIOUS

外部サーバーを呼び出す

NEXT

表示領域を設定する