Flashを使ってみよう << mixi Developer Center (ミクシィデベロッパーセンター)

mixiアプリでは、Gadgets Feature-Specific JavaScript APIにて提供されるFlash関連機能を利用することで、mixiアプリ内にFlashコンテンツを手軽に埋めることができます。Flashに対応するためには、Gadgets XMLファイル内で以下のリストのように記述しておくことが必要となります。

<ModulePrefs>
  <Require feature="flash" />
</ModulePrefs>

基本的な埋め込み方法

下のリストは、Flashコンテンツをmixiアプリに埋め込むためのコード例です。

gadgets.flash.embedFlash(
      "http://your.server.host/flash/content.swf",
      document.getElementById("target"),
      6);

Flashコンテンツの埋め込みは、gadgets.flash.embedFlash()関数を使用して行います。この関数の引数は、

swfファイルのURL
Flashコンテンツを埋め込む先となるDOM要素またはそのID文字列
対象Flashコンテンツが必要とするFlash Playerの最小バージョン
Flashコンテンツが埋め込まれる際に指定したいパラメータを持つオブジェクト

となっています。第2引数としてDOM要素を指定することになるため、予めContent要素のCDATAセクション内に任意のdiv要素を記述しておくか、動的に要素を生成しておくことが求められます。第3引数に指定した数値よりも古いFlash PlayerがWebブラウザにインストールされている場合は、Flashコンテンツの埋め込みは行われません。

パラメータの指定方法

mixiアプリによっては、埋め込まれるFlashコンテンツの大きさなどを調整する必要が出てきます。 gadgets.flash.embedFlash()関数では、第4引数において、指定したいパラメータを持つオブジェクトを渡すことで、埋め込まれる Flashコンテンツに反映することが可能です。例えば下記のリストでは、横幅と縦幅をそれぞれ300, 150とするために、paramsオブジェクトにてプロパティを作成しています。

var params = {
    width: 300,
    height: 150
};
gadgets.flash.embedFlash(
      "http://your.server.host/flash/content.swf",
      document.getElementById("target"),
      6,
      params);

その結果、Flashコンテンツが埋め込まれる際には、

<div id="target">
  <embed width="300" height="150" src="http://your.server.host/flash/content.swf"
      type="application/x-shockwave-flash" wmode="opaque"
      base="http://your.server.host/flash/"/>
</div>

というembed要素が生成されます。paramsオブジェクトに定義したプロパティは、このようにembed要素の属性として反映されることになりますので、活用すると良いでしょう。

招待機能とFlashに関して

mixiアプリ内でFlashコンポーネントを使用する際に、他の友人にmixiアプリの利用を勧めるための招待機能を利用すると、表示上の問題が発生する場合があります。

[友人を招待しよう]
http://developer.mixi.co.jp/appli/spec/pc/invite_appli

Flashコンポーネントは、他のDOM要素に比べて手前に表示されるという性質があります。これが原因となり、mixiアプリ内でFlashコンポーネントを使っていた場合に、招待機能により表示されるポップアップ画面が、Flashコンポーネントよりも奥に描画され、その一部が隠れてしまいます。

この現象を回避するためには、Flashコンポーネントを埋め込む際に使用するembedタグについて、wmode属性を指定します。wmode属性値として、”transparent”もしくは”opaque”を記述します。

<embed ... wmode="opaque" ... />

上記の対応により、招待機能のポップアップ画面がFlashコンポーネントよりも手前に表示されるようになります。

ただし、残念ながらWebブラウザとFlashのバージョンの組み合わせにより、

wmode属性を指定しても効果が現れない
全角文字がFlash上で入力できなくなる
マウスホイールイベントをFlash上で拾うことができない
入力のためのフォーカスを得られない、フォーカス位置がずれる

といった現象が確認されています。このような現象を避けるために、招待機能を利用する際は一時的にFlashコンポーネントを非表示にする、などの対策を講じるよう、お願いいたします。

このページの上部へ

mixi Developer Center (ミクシィ デベロッパーセンター)

mixiアプリ