Silverlight実習

さて、せっかくですのでSilverlight体験記（実習）を公開いたしましょう。

とりあえず今回はこのページ
http://www.microsoft.com/japan/academic/kyozai/hajimete_silverlight/chapter00_1.mspx
の右側にあるリンクの第一章を私なりにやってみることとします。

事前に他の章（準備編）を読んで予習しておいたり準備したりすることをオススメします。
とくに準備編の第２章では開発環境の準備について話ていますので、準備をお願いいたします。

Silverlight 1.0 プラグイン（無償）
Silverlight 1.0 SDK（無償）

それと私なりの実習ということで極力無償のツールを使ってみようと思います。
今回は以下のツールを使用しました。

Microsoft Visual Web Developer 2008 Express Edition
Microsoft Expression Blend 2 December Preview

それとどうも私はSilverlightと関わってからIEが固まる現象に悩まされています。
…ということでこれから書くことはすべてみなさんの自己責任でお願いいたします。

それでは長文になりますので…

※画像はクリックすれば大きな画像が見ることが出来ます。

まずは土台です。
所詮Silverlightとカッコイイ名前がついていてもFlushと同じくホームページにはられたコンテンツでしかありません。
ということでhtmlが必要です。

もちろん「はじめてのSilverlight」の準備編その２のようなhtmlをメモ帳でこしらえてもいいんですが、かっこつけてMicrosoft Visual Web Developer 2008 Express Editionをさっそく使ってみましょう。

ファイルから「新しいWebサイト」を選択して…

テンプレートは「空のWebサイト」を選択します。
このとき場所は自分の環境に合わせて下さい。
直接ホームページの素材やhtmlが置いてある場所へftpやhttpでアクセスできるならそこを選択しても多分大丈夫だと思います。
私の場合は「test」というフォルダをftpに送ればアクセスできる…といった環境を想定しています。
言語はなんでもいいとは思うのですが、気分的にVisual C#を選択しています。

するとソリューションエクスプローラー（画面右上）にtestというフォルダを基点としたソリューション（プロジェクト）ができあがります。
ここにリソースやいろいろなファイルを追加していくわけです。
ではさっそく土台となるhtmlファイルを作成します。

ソリューションエクスプローラーのtestプロジェクトを選択して右クリックします。
「新しい項目の追加」を選択して…

テンプレートは「HTMLページ」を選択します。
名前は何でもいいですが、私の場合はindex.htmとしておきます。
言語も例によってなんでも良いです。
設定が完了したら「追加」ボタンを押します。

すると基本的なことがすでに書かれたhtmlファイルが出来上がります。
このhtmlファイルを「はじめてのSilverlight」第１章にあるサンプルhtmlのように書き換えます。
私の場合はこのようになりました。

コードの途中Silverlight.jsという部分とcreateSilverlight.jsという部分の下に波線が出てしまいます。
このようにhtml文に問題があるとVisual Web Developerは教えてくれる親切設計です。
原因もマウスを並千部分に重ねれば教えてくれます。
今回の原因はいわゆる「そんなファイルねー」ということですね。
そこでこれらのファイルをさっそく用意します。

「はじめてのSilverlight」の準備編その３と第１章ではcreateSilverlight.jsは自前で用意してくれとのことですので１から作成します。
先ほどのhtmlを用意した要領で同じように作成できます。

ソリューションエクスプローラーのtestプロジェクトを選択して右クリックして「新しい項目の追加」を選択します。

createSilverlight.jsはJScriptファイルですので、テンプレートもそれを選択します。
名前のところにはcreateSilverlight.js
言語も例によってなんでも良いです。
設定ができましたら「追加」ボタンを押して下さい。

これで何にもないcreateSilverlight.jsファイルが出来上がるので、あとは「はじめてのSilverlight」第１章からコードをコピーして張り付ければＯＫです。

次にSilverlight.jsですが「はじめてのSilverlight」の準備編その２にあるように『C:\Program Files\Microsoft Silverlight 1.0 SDK\Tools\Silverlight.js\localized\』にSilverlight.ja-jp.jsというファイルがあるのでこれをプロジェクトフォルダにコピーします。
その後、ソリューションエクスプローラーのプロジェクトフォルダ名を右クリックして「フォルダの更新」を選択するとSilverlight.ja-jp.jsファイルがプロジェクトに追加されているのが確認できるようになります。

そしたらソリューションエクスプローラー上のSilverlight.ja-jp.jsを右クリックして「名前の変更」を選び「Silverlight.js」に変更すればＯＫです。

 

もうちょっとＧＵＩにたよった追加の仕方が良い方は

コピー元ファイルをドラッグして…

ソリューションエクスプローラーのプロジェクト名の上へドロップすればプロジェクトに登録されます。
あとは同じように名前を変更しておいて下さい。

さて、この状態でindex.htmを見てみるとおそらく波線が消えているはずです。
もし消えていない場合はコード画面が更新されていないか、ファイル名等が間違っているなどが考えられるのでチェックしてみて下さい。

さて、これでブラウザで見ればなんらかが画面にでるくらいにはなっています。
Visual Web DeveloperはこのツールからWebのデバックをしながら実行することが可能となっています。
せっかくなのでデバック実行ができる環境にして実行してみましょう。

まず私のIE7の場合、Javaスクリプトのデバック実行が有効にはなっていませんので、IE7のツール->インターネットオプション->詳細設定タブのブラウズ項目にある「スクリプトのデバックをしない（Internet Explorer）の項目のチェックをはずします。
※固まるようになった原因はこれか？未確認

つぎにVisual Web Developerのプロジェクトにどのhtmlがスタートページか設定してあげます。
私の場合はindex.htmをスタートページに設定すればいいのでソリューションエクスプローラーからindex.htmを選択して「スタートページに設定」を選択すればＯＫです。

それでは画面上部にある再生ボタン（デバック開始）を押してみましょう。

するとこんなダイアログが出てきます。

ここは上の方が選択されていることを確認してＯＫを押しましょう。
ダイアログにあるとおり、完成したhtml等をネットにアップするときにWeb.configファイルを編集してデバックを無効にすることを忘れないでおきましょう。

これでIEが勝手に立ち上がって「はじめてのSilverlight」準備編その３の最後の方にあるような画面が出ていれば成功です。
デバックを終了する場合は■アイコンを押せば止まります。
※オーディオデッキのマークとたいして変わりはないですね。

デバック無しで実行することも可能です。
その場合はCtrl+F5で実行するのが簡単でしょう。

次の記事で「はじめてのSilverlight」第１章にあるようなグラフィカルな画面を出してみます。