« むーん | トップページ | Silverlight実習 その2 »

2008.03.04

Silverlight実習

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

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

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

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」の準備編その2のようなhtmlをメモ帳でこしらえてもいいんですが、かっこつけてMicrosoft Visual Web Developer 2008 Express Editionをさっそく使ってみましょう。

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

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

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

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

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

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

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

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

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

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

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

次にSilverlight.jsですが「はじめてのSilverlight」の準備編その2にあるように『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」に変更すればOKです。

Gw20080224084633

Gw20080224084641

Gw20080224084703 

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

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

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

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

Gw20080224084808

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

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

Gw20080224085227

Gw20080224085255

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

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

Gw20080224085012

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

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

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

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

|

« むーん | トップページ | Silverlight実習 その2 »

プログラミング」カテゴリの記事

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: Silverlight実習:

« むーん | トップページ | Silverlight実習 その2 »