2011年12月05日

Silverlightアプリをブログ上で動かす

   このエントリーをはてなブックマークに追加 Clip to Evernote
このエントリは、Silverlight Advent Calendar 2011への参加記事です。

ウェブサイトでは、比較的簡単にSilverlightアプリをホストすることが可能ですが、
ブログだと、画像以外をアップロードできなかったりして、Silverlightアプリをホストすることができない場合が
多いと思います。

しかし、せっかくだから、ブログでSilverlightアプリをホストしたいわけです。
僕はブログとウェブサイトの両方を運営していますが、圧倒的にブログの方が訪れる人の数が
多いですから余計にそう思います。
せっかく作ったSilverlightアプリを、以下のようにブログのページ上でも動かすことができれば、
それだけ、多くの人に見てもらえるというわけです。

Startボタンを押せば、プログラムが動き出します。



このプログラムは、以前「凸多角形の完全グラフ(一筆書き) 」で紹介したものです。
以前にも、このブログで載せています。


僕がやっている方法は、Webサイトにアップしたxapファイルを
ブログサイトから参照することで、ブログのページ上でSilverlightアプリを動かすというものです。

他の人に役に立つ情報かどうかはわかりませんが、 その方法を簡単にに示します。


まず、ウェブサイトにSilverlightアプリを配置します。
実際に配置するのは、
htmlファイル、silverlight.jsファイル、そして、ClientBinフォルダの下にあるxapファイルの3つです。
htmlファイルは、Visual StudioがSilverlightのプロジェクトを作成する時に、自動的に生成するホスト用のhtml ファイルです。

なお、このhtmlファイルの先頭近くにある body { } のスタイル指定は、以下のように、overflow指定を
追加しておきます。こうすることで、Silverlightをホストした部分でスクロールバーが出なくなります。



xapファイルは、デフォルトのまま、ClientBinフォルダの配下に配置します。
こんな感じです。


ちなみに、僕は、忍者ホームページというサービスを利用しています。
無料プランと有料プランがありますが、無料プランでも500MBのディスク容量がありますから、通常の利用なら
ばまったく問題ないと思います。

次にやることは、このSampleApp.html をウェブサイトの別のページからリンクを貼り辿れるようにすることです。
これは省略します。

最後に、ブログページに上記のSampleApp.html を埋め込みます。
記述するhtmlは、以下のような感じです。


もちろん、Webサイトの方でも、Topページから、リンクをたどっていくことで、
そのSilverlightアプリのページにたどり着けるようにしています。
大抵のWebサイトのサービスでは、そういった約束事があるので、どこからもリンクされていない
ファイルを、他のドメインのページからリンクさせることはやらないほうが良いと思われます。
ただ、結構面倒なので、最近はこの手法は使わないで、単にブログからウェブページへのリンクを
貼るだけのこともあります。



 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52211789