| プログラム / 2008/02/24 (Sun) / 編集 |
Silverlightを使って琉球大学の地図を作ってみた、ちなみに素材は各々の学部の公式ページからパクってきちゃったよすんません
事前に用意しとく必要があるのは必要なのはSilverlight SDK(SoftwereDevelopment Kit)だね、これはmsi（Windows用のインストーラ）なのでいったんWindowsでダウンロードして解凍しないといけないわけだが、、、、
でもって解凍できたら「Microsoft Silverlight 1.0 SDK/Tools/Silverlight/localized/Silverlight.ja-jp.js」というやつを「Silverlight.js」という名前でプログラムと同じディレクトリにいれるわけだ
それがおわったらプログラミングね
以下はMicrosoftのサンプルコードをもとに作成したSilverlightプログラム
事前に用意しとく必要があるのは必要なのはSilverlight SDK(SoftwereDevelopment Kit)だね、これはmsi（Windows用のインストーラ）なのでいったんWindowsでダウンロードして解凍しないといけないわけだが、、、、
でもって解凍できたら「Microsoft Silverlight 1.0 SDK/Tools/Silverlight/localized/Silverlight.ja-jp.js」というやつを「Silverlight.js」という名前でプログラムと同じディレクトリにいれるわけだ
それがおわったらプログラミングね
以下はMicrosoftのサンプルコードをもとに作成したSilverlightプログラム
というわけで解説（というかメモ書き）ですよ〜
まずはファイル
読む前に注意、色付きの文字は複数のファイルで出てくるので注意してみておこう
<html lang="ja">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<title>Silverlight 簡易アニメーションデモ</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body>
Silverlight START<br>
<!-- Silverlight プロジェクトを組み込む -->
<div id="testHost"></div>
Silverlight END<br>
<script type="text/javascript">
// Silverlight プロジェクトを生成する。
var parentElement = document.getElementById("testHost");
createMySilverlightPlugin();
</script>
</body>
</html>
とまぁJavaScriptを呼び出すだけだったりするが、色付きの部分は他のファイルとも関連があるので注意して見ておこう
今回は初期化とマウスが乗ったときの動作とマウスが降りたときの動作を定義している
function createMySilverlightPlugin()
{
Silverlight.createObjectEx({
source: "chapter1.xaml",
parentElement: document.getElementById("testHost"),
id: "test",
properties: {
width:'600',
height:'500',
inplaceInstallPrompt:false,
background:'#D6D6D6',
isWindowless:'false',
framerate:'24',
version:'1.0'//Silverlightのバージョン
},
events: {
onError:null,
onLoad:null
}
});
}
//マウスが載ったら呼び出される関数
function content_focus(sender, arg)
{
var test = document.getElementById("test");
var img = sender.Name + "_img";
test.content.findName(img).Opacity = 1.0;
}
function content_out(sender, arg)
{
var test = document.getElementById("test");
var img = sender.Name + "_img";
test.content.findName(img).Opacity = 0.0;
}
「sender.Name」はこの関数を呼び出したコンテンツの名前なので、たとえば chapter1.xamlで「x:Name="ie"」と指定されている丸印にマウスが乗ると「x:Name="ie_img"」という名前がついている画像の「Opacity（不透明度）」が１（不透明）になったり０（透明）になったりする
基本的に画像はもとから表示してあって、デフォルトが透明になっているのを上記createSilverlight.jsで一時的に見えるようにしているらしい。
なのでこのファイルでは画像ファイルの表示位置と丸印の表示位置を定義しておく
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<!--地図を表示-->
<Image Width="572" Height="477" Source="img/ryu_map.jpg"/>
<!--情報工学ようの丸印を表示-->
<Ellipse x:Name="ie" MouseEnter="content_focus"
MouseLeave="content_out"
Width="10" Height="10" Fill="#FFF61515" Canvas.Left="320"
Canvas.Top="25"
/>
<!--情報工学ようの写真を用意-->
<Image x:Name="ie_img" Width="316" Source="img/ie.jpg"
Canvas.Left="8" Canvas.Top="8" Opacity="0.0"
/>
<!--理学部ようの丸印を表示-->
<Ellipse x:Name="rigaku" MouseEnter="content_focus"
MouseLeave="content_out"
Width="10" Height="10" Fill="#FFF61515" Canvas.Left="350"
Canvas.Top="200"
/>
<!--理学部ようの写真を用意-->
<Image x:Name="rigaku_img" Width="316" Source="img/rigaku.jpg"
Canvas.Left="8" Canvas.Top="8" Opacity="0.0"
/>
<!--法文学部ようの丸印を表示-->
<Ellipse x:Name="hobun" MouseEnter="content_focus"
MouseLeave="content_out"
Width="10" Height="10" Fill="#FFF61515" Canvas.Left="330"
Canvas.Top="360"
/>
<!--法文学部ようの写真を用意-->
<Image x:Name="hobun_img" Width="316" Source="img/hobun.jpg"
Canvas.Left="8" Canvas.Top="8" Opacity="0.0"
/>
</Canvas>
よくわからないので一部を抜き出して解説
まずは丸印
<!--情報工学ようの丸印を表示-->
<Ellipse x:Name="ie" MouseEnter="content_focus"
MouseLeave="content_out"
Width="10" Height="10" Fill="#FFF61515" Canvas.Left="320"
Canvas.Top="25"
/>
MouseEnterはコンテンツ上（この場合は丸印の上）にマウスが載ったら呼び出される関数の名前を指定（この場合はcontent_focusが呼び出される）
MouseLeaveはコンテンツ上（この場合は丸印の上）にマウスが載ったら呼び出される関数の名前を指定（この場合はcontent_outが呼び出される）
Fillは指定した色で塗りつぶすという意味
Canvas.LeftとCanvas.Topは表示位置（ピクセルで指定）
つぎは画像ね
<!--情報工学ようの写真を用意-->
<Image x:Name="ie_img" Width="316" Source="img/ie.jpg"
Canvas.Left="8" Canvas.Top="8" Opacity="0.0"
/>
新しいのは「Opacity」、これは透明度を指定するもので０だから透明
「画像をコピペしたりしない」「なんか問題が起きても自己責任」これらが守れる人は ryudai_map(zip)をダウンロードして試してみよう！
あ、説明不足なとこがあったら指摘してくれれば直します、たぶん
まずはファイル
- Silverlight.js : Silverlight本体、SDK内からコピペ
- index.html : プログラムを呼び出すHTMLファイル
- createSilverlight.js : 自分で定義したプログラム
- chapter1.xaml : コンテンツを定義するファイル
読む前に注意、色付きの文字は複数のファイルで出てくるので注意してみておこう
index.html
これは呼び出し元のHTMLファイルね<html lang="ja">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<title>Silverlight 簡易アニメーションデモ</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body>
Silverlight START<br>
<!-- Silverlight プロジェクトを組み込む -->
<div id="testHost"></div>
Silverlight END<br>
<script type="text/javascript">
// Silverlight プロジェクトを生成する。
var parentElement = document.getElementById("testHost");
createMySilverlightPlugin();
</script>
</body>
</html>
とまぁJavaScriptを呼び出すだけだったりするが、色付きの部分は他のファイルとも関連があるので注意して見ておこう
createSilverlight.js
自作の関数を定義しておくファイル今回は初期化とマウスが乗ったときの動作とマウスが降りたときの動作を定義している
function createMySilverlightPlugin()
{
Silverlight.createObjectEx({
source: "chapter1.xaml",
parentElement: document.getElementById("testHost"),
id: "test",
properties: {
width:'600',
height:'500',
inplaceInstallPrompt:false,
background:'#D6D6D6',
isWindowless:'false',
framerate:'24',
version:'1.0'//Silverlightのバージョン
},
events: {
onError:null,
onLoad:null
}
});
}
//マウスが載ったら呼び出される関数
function content_focus(sender, arg)
{
var test = document.getElementById("test");
var img = sender.Name + "_img";
test.content.findName(img).Opacity = 1.0;
}
function content_out(sender, arg)
{
var test = document.getElementById("test");
var img = sender.Name + "_img";
test.content.findName(img).Opacity = 0.0;
}
「sender.Name」はこの関数を呼び出したコンテンツの名前なので、たとえば chapter1.xamlで「x:Name="ie"」と指定されている丸印にマウスが乗ると「x:Name="ie_img"」という名前がついている画像の「Opacity（不透明度）」が１（不透明）になったり０（透明）になったりする
chapter1.xaml
コンテンツを定義しておくファイル、XAML形式らしい（よくはわからない）基本的に画像はもとから表示してあって、デフォルトが透明になっているのを上記createSilverlight.jsで一時的に見えるようにしているらしい。
なのでこのファイルでは画像ファイルの表示位置と丸印の表示位置を定義しておく
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<!--地図を表示-->
<Image Width="572" Height="477" Source="img/ryu_map.jpg"/>
<!--情報工学ようの丸印を表示-->
<Ellipse x:Name="ie" MouseEnter="content_focus"
MouseLeave="content_out"
Width="10" Height="10" Fill="#FFF61515" Canvas.Left="320"
Canvas.Top="25"
/>
<!--情報工学ようの写真を用意-->
<Image x:Name="ie_img" Width="316" Source="img/ie.jpg"
Canvas.Left="8" Canvas.Top="8" Opacity="0.0"
/>
<!--理学部ようの丸印を表示-->
<Ellipse x:Name="rigaku" MouseEnter="content_focus"
MouseLeave="content_out"
Width="10" Height="10" Fill="#FFF61515" Canvas.Left="350"
Canvas.Top="200"
/>
<!--理学部ようの写真を用意-->
<Image x:Name="rigaku_img" Width="316" Source="img/rigaku.jpg"
Canvas.Left="8" Canvas.Top="8" Opacity="0.0"
/>
<!--法文学部ようの丸印を表示-->
<Ellipse x:Name="hobun" MouseEnter="content_focus"
MouseLeave="content_out"
Width="10" Height="10" Fill="#FFF61515" Canvas.Left="330"
Canvas.Top="360"
/>
<!--法文学部ようの写真を用意-->
<Image x:Name="hobun_img" Width="316" Source="img/hobun.jpg"
Canvas.Left="8" Canvas.Top="8" Opacity="0.0"
/>
</Canvas>
よくわからないので一部を抜き出して解説
まずは丸印
<!--情報工学ようの丸印を表示-->
<Ellipse x:Name="ie" MouseEnter="content_focus"
MouseLeave="content_out"
Width="10" Height="10" Fill="#FFF61515" Canvas.Left="320"
Canvas.Top="25"
/>
MouseEnterはコンテンツ上（この場合は丸印の上）にマウスが載ったら呼び出される関数の名前を指定（この場合はcontent_focusが呼び出される）
MouseLeaveはコンテンツ上（この場合は丸印の上）にマウスが載ったら呼び出される関数の名前を指定（この場合はcontent_outが呼び出される）
Fillは指定した色で塗りつぶすという意味
Canvas.LeftとCanvas.Topは表示位置（ピクセルで指定）
つぎは画像ね
<!--情報工学ようの写真を用意-->
<Image x:Name="ie_img" Width="316" Source="img/ie.jpg"
Canvas.Left="8" Canvas.Top="8" Opacity="0.0"
/>
新しいのは「Opacity」、これは透明度を指定するもので０だから透明
「画像をコピペしたりしない」「なんか問題が起きても自己責任」これらが守れる人は ryudai_map(zip)をダウンロードして試してみよう！
あ、説明不足なとこがあったら指摘してくれれば直します、たぶん
[0回]
PR
トラックバック
URL :
コメント