ILOG Elixir

IBM ILOG Elixir:マッシュアップに使える時計ウィジェットを作成する--ステップ2:JS/ExternalInterfaceを使って統合

2009-07-16 08:00:00

 では、前回作った時計を、NetvibesのUWA(Universal API Widget)を使ってNetvibesiGoogleのウィジェットに変えることにしよう。

 UWAとは、次のようなものだ。

 「Universal API Widgetは、あらゆるウィジェットプラットフォームやブログシステムでウィジェットが使えるようにする手段として、Netvibesによって開発された。UWAはNetvibesはもちろん、iGoogle、Apple Dashboard、Opera、Windows Vista、Live.comなどでも使用できる」

 この記事のゴールは、時計のスタイルをコントロールする簡単なプロパティシートを作ることだ。このプロパティシートは、NetvibesやiGoogleのサーバで使用できるよう、UWAで定義される必要がある。

 ここでは3つのプロパティを定義する。

  1. 時計の背景をカスタマイズするための画像のURL
  2. 時計の透過度を制御するためのパーセンテージの値
  3. ウィジェットの大きさを設定するのに使用されるアスペクト比

 最初に、われわれのFlexアプリケーションを修正して、このアプリケーションを呼び出すJavaScriptから設定を行うことができるようにする。これは、init()メソッドに次の4行を追加することで実現できる。

Security.allowDomain("*");
ExternalInterface.addCallback("setBackAlpha", function(v:Number):void{ back.alpha = v/100;});
ExternalInterface.addCallback("setBackImageURL", function(v:String):void{ backImageURL = v; });
ExternalInterface.call("configure");

 1行目は、クロスドメインスクリプティングを可能にするものだ。2行目では、時計の透過度を変更する関数を定義している。3行目は、アプリケーションの背景画像を定義する関数を定義するもの。そして最後の行では、JavaScriptのconfigure関数によって、Flexアプリケーションにユーザーが定義したプロパティを設定している。

 UWAのドキュメントを見ていると、「How to display a Flash app within a widget?」というトピックを見つけることができる。この中のswfへの参照の部分を、われわれのswfへの参照で置き換えれば、このウィジェットをNetvibesやiGoogleで使えるようにする準備は完了だ。

 この時点では、JavaScriptのプロパティシートはまだない。UWAの基本的な構造のサンプルのページに、簡単なUWAウィジェットが説明されている。その中で一番興味深い部分は次の部分だ。

<widget:preferences>

  <preference name="url" type="text" label="URL"
    defaultValue="http://feeds.feedburner.com/NetvibesDevBlog" />
  <preference name="limit" type="range" label="Number of items to display"
    defaultValue="10" step="1" min="1" max="25" />
  <preference name="search" type="hidden" defaultValue="" />
</widget:preferences>

 これは、プロパティシートの作り方を説明している部分だ。ここでは、これを私たちのニーズに合わせて修正する。

<widget:preferences>
  <preference name="url" type="text" label="Background Image URL"
    defaultValue="" />

  <preference name="alpha" type="range" label="Clock Transparency (%)"
    defaultValue="10" step="1" min="0" max="100" />
  <preference name="search" type="hidden" defaultValue="" />
  <preference name="aspect" type="text" label="Aspect Ratio (default 2.0)"
    defaultValue="2.0" />
</widget:preferences>

 次に、ウィジェットの更新イベントの際にflashから呼び出されるメソッドを定義する必要がある。

function configure() {
	var flash = widget.body.getElementById("clockObj");
  if (flash) {
	  var alpha = widget.getValue('alpha');
	  var image = widget.getValue('url');
    flash.setBackAlpha(alpha);
    flash.setBackImageURL(image);
  }
}

 最後に、ウィジェットのonResize関数の中のアスペクト比プロパティについても考慮する必要がある。

widget.onResize = function() {
	var flash = widget.body.getElementById("clockObj");
	var aspect = widget.getValue('aspect');
	if (flash) {
	  flash.width = 1;
		flash.width = widget.body.getDimensions().width - 10;
		flash.height = Math.round(flash.width / aspect);
	}
}

 以下に、このウィジェットの完全なコードを示す。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:widget="http://www.netvibes.com/ns/">
  <head>
    <meta name="author" content="Damien Mandrioli" />

    <meta name="description" content="A clock widget" />
    <meta name="apiVersion" content="1.0" />
    <meta name="autoRefresh" content="20" />
    <meta name="debugMode" content="true" />

    <link rel="stylesheet" type="text/css"
      href="http://www.netvibes.com/themes/uwa/style.css" />

    <script type="text/javascript"
      src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>

    <title>ILOG Elixir Clock</title>
    <link rel="icon" type="image/png"
      href="http://www.netvibes.com/favicon.ico" />

    <widget:preferences>

      <preference name="url" type="text" label="Background Image URL"
        defaultValue="" />
      <preference name="alpha" type="range" label="Clock Transparency (%)"
        defaultValue="10" step="1" min="0" max="100" />
      <preference name="search" type="hidden" defaultValue="" />
      <preference name="aspect" type="text" label="Aspect Ratio (default 2.0)"
        defaultValue="2.0" />
    </widget:preferences>

    <style type="text/css">

     /* your CSS rules */
    </style>

    <script type="text/javascript">
      var ElixirClock = {};

      widget.onLoad = function() {
      	var contentHtml = '';
      	contentHtml += '<div style="margin: 0 auto;text-align:center;">';
      	contentHtml += '<object id="clockObj" type="application/x-shockwave-flash" data="http://blogs.ilog.com/elixir/wp-content/uploads/2008/02/clock.swf" width="320" height="240" class="flash">';
      	contentHtml += '<param name="movie" value="http://blogs.ilog.com/elixir/wp-content/uploads/2008/02/clock.swf" />';
      	contentHtml += '<param name="wmode" value="transparent" />';
      	contentHtml += '<param name="allowScriptAccess" value="always" />';
      	contentHtml += '<embed src="http://blogs.ilog.com/elixir/wp-content/uploads/2008/02/clock.swf" type="application/x-shockwave-flash" width="320" height="240"></embed>';
      	contentHtml += '</object>';
      	contentHtml += '</div>';

      	widget.setBody(contentHtml);
      	widget.onResize();
      }

      function configure() {
      	var flash = widget.body.getElementById("clockObj");
        if (flash) {
      	  var alpha = widget.getValue('alpha');
      	  var image = widget.getValue('url');
          flash.setBackAlpha(alpha);
          flash.setBackImageURL(image);
        }
      }

      widget.onRefresh = function() {
        configure();
        widget.onResize();
      }

      widget.onResize = function() {
      	var flash = widget.body.getElementById("clockObj");
      	var aspect = widget.getValue('aspect');
      	if (flash) {
      	  flash.width = 1;
      		flash.width = widget.body.getDimensions().width - 10;
      		flash.height = Math.round(flash.width / aspect);
      	}
      }
    </script>

  </head>
  <body>
    <p>Loading...</p>
  </body>
</html>

 以下のボタンをクリックすれば、このウィジェットを自分のNetvibesやiGoogleに追加することができる。

 このアプリケーションのFlex Builderプロジェクトは、ここからダウンロードすることができる。これを実行するには、IBM ILOG Elixirもダウンロードする必要がある。

IBM ILOG Elixirについての詳細は、http://www.ilog.co.jp/product/visu/ilogelixir/をご覧ください。

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ