Silverlight 1.0とVirual Earthの連携、基礎編: SilverlightとHTML画面を重ね合わる方法

Article
10/04/2007

まずは、この図をご覧ください。

VE-SL integration

プロジェクトの名前が表示されている部分を白い矩形でマスクしていますが、意図的なものです。

さて、このような画面はどうやってつくったらいいでしょうか。

ここで紹介する方法は、Silverlight 1.0および1.1とHTMLページの重ね合わせに利用できるので、新たなマッシュアップに応用できると思います。

もったいぶっても意味がありませんので、簡潔にからくりを説明します。

（１）Silverlight.createObject()を呼び出す際に、IsWindowlessプロパティをtrueに設定し、背景色を無色にする

[createSilverlight.js]
function createMySilverlightPlugin()
{
    Silverlight.createObject(
        "Page.xaml",                  // Source property value.
        parentElement,                  // DOM reference to hosting DIV tag.
        "mySilverlightPlugin",         // Unique plugin ID value.
        {                               // Per-instance properties.
            width:'960',                // Width of rectangular region of
                                        // plugin area in pixels.
            height:'540',               // Height of rectangular region of
                                        // plugin area in pixels.
            inplaceInstallPrompt:false, // Determines whether to display
                                        // in-place install prompt if
                                        // invalid version detected.
            background:'#00000000',       // Background color of plugin.
            isWindowless:'true',       // Determines whether to display plugin
                                        // in Windowless mode.
            framerate:'15',             // MaxFrameRate property value.
            version:'1.0'               // Silverlight version to use.
        },
        {
            onError:null,               // OnError property value --
                                        // event handler function name.
            onLoad: null
                                        // event handler function name.
        },
        null);                          // Context value -- event handler function name.
}

（２）DIV要素を使い、Virtual Earthの配置位置を決め、z-indexを0とする
（３）DIV要素を使い、Silverlightプラグインの配置位置を決め、z-indexを1とする

この二つの要件をまとめると、次のようなHTMLを用意すればできあがります。ここでは、（２）と（３）に対して、同じ配置位置を指定して重ね合わせを実現します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" >
<head>

function GetMap()
{
    map = new VEMap('myMap');
    map.LoadMap(new VELatLong(37.419369, 145.421603), defaultZoomLevel, 'h', true, VEMapMode.Mode2D, false);
    currentZoomLevel = defaultZoomLevel;
}

</script>
<style type="text/css">
  .VEHost {
   height: 540px;
   width: 960px;
   top:0px; left:0px;
   position: absolute;
   z-index: 0
  }

  .silverlightHost {
   height: 540px;
   width: 960px;
   top:0px; left:0px;
   position: absolute;
   z-index: 1
  }

</style>

</head>

</body>
</html>

（４）雲が流れるビデオを再生するためにMediaElementを使い、Opacityプロパティで透過性をもった映像にする

Page.xaml

（５）ビデオの繰り返し再生が必要な場合は、下記のエントリーを参考にしてください。

Silverlight 1.0 : 試行錯誤を減らすための参考情報 : ビデオと画像の取り扱い

・・・

非常に単純なからくりですが、いろんな応用を考えることができます。まずは、既存のWebアプリケーションとSilverlightを重ね合わせることからスタートするのも面白いと思います。

Silverlight 1.0とVirual Earthの連携、基礎編: SilverlightとHTML画面を重ね合わる方法

Additional resources