1. ホーム
  2. Blog
  3. Flash ブログパーツを Google ユニバーサルガジェットにする方法

Flash ブログパーツを Google ユニバーサルガジェットにする方法

寺井 周平

寺井 周平

デザイン,技術

Flash コンテンツを Google ガジェットに埋め込む作業は、とても簡単です。わずかな作業で一躍「ガジェットクリエイター」になれるのですから、Flash 使いの人にとっては嬉しい話ですね(笑)

Google ガジェットといっても、iGoogle 等の、ネットに接続された環境で動作する「ユニバーサルガジェット」と、デスクトップでオフラインでも動作する「デスクトップのガジェット」があります(iGoogle サイト内の解説記事)。今回は、Flash ブログパーツを Google ユニバーサルガジェットに埋め込む方法をご紹介します。

まず、貼付けサンプルとして、次のようなサンプル Flash ブログパーツを作りました。

サンプルとして作成したこのブログパーツですが、一応「Piccolee(ピッコリー)」という名前で、背景をクリックすると背景色変更、上に16進数/10進数表示。MTLロゴをクリックすると黒→白ループ。ロゴテキストクリックで MTL サイトに target="_blank" でジャンプする仕様です。これを Google ユニバーサルガジェット化していきます。

ウノウラボさんのエントリや、「iGoogleガジェットコンテスト|ガジェットを作ってみよう」にもある通り、Google ガジェットは、ガジェット用 xml ファイル内に設定を記述していきます。その xml ファイルのひな形は

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="(ブログパーツのタイトル)">
  </ModulePrefs>
  <Content type="html">
     <![CDATA[
     Content type ="html"なので、ここには html を記述できます。
     ということは、ここに Flash を埋め込めばいいわけですね。
     ]]>
  </Content>
</Module>

ということで、上の赤文字の部分に、Object タグや Embed タグ、あるいは SWFObject を使って Flash を埋め込めばいいのですが、さらに朗報です。Google ガジェット用の Flash 埋め込み用のライブラリが既に用意されており、"_IG_EmbedFlash" 関数を使えば、とても簡単に Flash を埋め込めます。この iGoogle 用の「flash ライブラリ」、国内ドキュメントにはまだ記載されていないのですが、きちんと動きます。この関数を組み込んだのが以下の xml です。尚、このサンプルでは、筆者の個人サーバー http://www.trick7.com/piccolee/ ディレクトリ内に「blogParts.swf」を置いているものとします。:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Piccolee(ピッコリー)" height="130">
     <Require feature="flash" />
  </ModulePrefs>
  <Content type="html">
     <![CDATA[
     <div id="flashcontainer" style="text-align: center;"></div>
     <script type="text/javascript">
     window.onload = function(){
          _IG_EmbedFlash("http://www.trick7.com/piccolee/blogParts.swf", 
          "flashcontainer", 
          {
          swf_version: 7,
          width: 160,
          height: 130
          })
          var div = document.getElementById("flashcontainer");
          div.style.width = div.style.height = "100%";
          div = div.parentNode;
          div.style.width = div.style.height = "100%";
          if(document.body.scroll != null){
               document.body.scroll = "no";
          }
     }
     </script>	 
     ]]>
  </Content>
</Module>

SWFObject 埋め込み方法と同様、この "_IG_EmbedFlash" 関数による埋め込み方法も、Windows & IE で起こる「Active Content Update 問題(Flashコンテンツを一度クリックしないとアクティブ化されない問題)」を、きちんと回避してくれるようです。

その他の箇所も見ておきます。
3行目の height 設定は、iGoogle 上でのガジェットの高さを確保するために必要になります。width(幅)は、iGoogle のレイアウトに依存しますが、高さはきちんと設定しておきましょう。

次に Flash ライブラリの使用法。Googleガジェット用のライブラリを使うには、4行目のように、「これから flash ライブラリの機能を使いますよ。」と宣言しておく必要があります。続いて CDATA の中身を見ていきます。まずは空の div タグを用意し、id で固有の名前(ここでは flashcontainer)を設定しておきます。この div タグの内容が swf に置換されるのです。続いて JavaScript を記述していきます。_IG_EmbedFlash 関数は:

_IG_EmbedFlash(swf_url, swf_container, opt_params)

という風に使います。swf_url は呼び出す swf の場所をストリングで指定し、swf_container で置換対象となる id をストリングで指定。今回は、先ほど定義した id="flashcontainer" という空 div に入れ込むので、"flashcontainer" と指定しています。第3パラメーターの opt_params はオプション扱いですが、ターゲットとなる FlashPlayer のバージョンや、swf の id、swf の幅や高さをオブジェクト形式("{ }"で挟んでいることに注意)で指定できます。(パラメーター詳細は記事末のリファレンスを参照してください。)

そして、コード中の緑テキストの部分、実はこの緑の部分を全てカットしても iGoogle ユニバーサルガジェットとしては正常に動きます。ただ、このガジェットを「はてなダイアリー」等の外部ブログに貼付ける「シンジケーション」と呼ばれる実装をする際に、Windows + IE で、スペースバーの幅分の余白が挿入されてしまう問題の回避策として必要になってきます。「おまじない」みたいなものだと思って、記述しておけばよいかと思います。尚、詳細はにとよん様のブログエントリーに詳しく書かれており、上記該当部分のコードもにとよん様のコードを使わせていただいています。

あとはこの xml ファイルを好きな名前で保存し、自分の公開サーバーにアップロード。iGoogle の「コンテンツを追加」ページ内の検索窓右側にある「URL を指定して追加」に、アップロードした xml までのパス(今回は http://www.trick7.com/piccolee/piccolee.xml)を入力し、追加作業を行えば、自分の iGoogle に あなたのガジェットが追加されると思います。

もちろん、皆さんの iGoogle で上記 xml にアクセスすれば Piccolee を追加できます。iGoogle は、追加・削除作業がすごく簡単なので、お気軽に試してみて下さい。


iGoogle に貼付け成功!


Google デスクトップガジェット(ユニバーサルガジェットとして)での表示もできました。
自分の Flash 作品が、簡単にガジェットになるので、楽しいですよ。

追記:
ここで制作したガジェットを、ブログパーツとして「はてなダイアリー」でいい感じに表示させる解説記事を書きましたので、そちらも併せてご覧ください。
iGoogle ガジェットを可能な限りシンプルに「はてなダイアリー」に貼る方法


Flash を Google ユニバーサルガジェット化するときの留意点

  • ユニバーサルガジェットは、特に指定しなければ iframe に展開されるので、SWF ファイル内からの外部リンクは、"target="_blank" にする等、ターゲットウィンドウに気をつけましょう。
  • 一覧性が重要な iGoogle 上や、GoogleDesktop 用ガジェットとしてデスクトップのサイドバーに表示させる(好きなガジェットが置けるのは現在 Windows のみ)ことを考えると、ガジェットの幅・高さは、可能な限り小さい方が良い。
  • CDATA の中には通常の html, JavaScript が記述&動作するので、Google Analytics も簡単に埋め込めることができます。
  • ガジェット内での、Flash - JavaScript の通信ももちろん可能。
  • iGoogle 上での Flash で実装した Web カメラやマイク機能の動作も確認しました。

AIR が ActionScript3.0 での開発を前提としている現状、「Google ガジェット」は、AS2 ユーザーがガジェットを作り、公開するための絶好の遊び場なのではないでしょうか?

補足1:iGoogle 上での動作検証は My Gadget で簡単検証

iGoogle へのガジェットの登録作業とキャッシュのクリアをスムーズに行うために、デベロッパー用ガジェットである「My Gadget」を追加しておくといいでしょう。(上の iGoogle キャプチャ画像の右側にあるのが My Gadget です。)

補足2:_IG_EmbedFlash について

_IG_EmbedFlash は、最近登場した機能なので、ブラウザごとの挙動等に関して、ユーザーからの検証報告がこれから挙がってくるかと思います。「_IG_EmbedFlash」で英語検索(日本語関連サイトは現状少ない)して、フォローしておきましょう。僕の方でも気付き次第フォローアップしていきます。
下に、_IG_EmbedFlash を含む、「flash ライブラリ」の海外リファレンスを日本語訳してみたものを掲載しておきます:

flash ライブラリについて

「flash ライブラリ」を使うためには、ガジェット設定ファイル内の <ModulePrefs> 内に、次の1行を追加しておく必要があります:

<Require feature="flash" /> 

flash ライブラリには、以下の関数が用意されています:

関数名 内容
_IG_EmbedFlash(swf_url, swf_container, opt_params) swf_url部分で指定した.swf ファイルをガジェットに埋め込み、そのガジェットを swf_container部分で指定した場所に表示させることができます。 opt_params パラメーターには、オプションとして以下のようなオブジェクトを設定できます:
  • .swf_version : numeric | string (default = 0) コンテンツ視聴に必要な Flash Player のバージョン
  • .swf_module_id : numeric (default = undefined) __MODULE_ID__ Flash ガジェットの ID です。 html-inline タイプのガジェットで、SWF ファイルからユーザー設定を取得する際に、このフィールドを使用します。
  • .width, .height : numeric | string (default = "100%"). 高さと幅。
  • その他、.quality.id といったフィールドを Flash ムービーに渡し、定義することもできます。

_IG_EmbedFlash() 埋め込み成功の場合 true を、失敗の場合 false を返します。

注意: もし、パフォーマンスの低下や、カーソル(ポインタ)が表示されないといった症状(Firefox 2.0 で起こりうる現象です)が起こる場合は、wmode"window" に設定してみてください:_IG_EmbedFlash("example.swf", "wrapper", {wmode: "window"});
_IG_GetFlashMajorVersion() Flash Player のメジャーバージョンを返します。 Flash Player が検出されない場合は 0 を返します。

トップへ戻る