上村 陽介(うえむら ようすけ)
株式会社 ディー・ディー・エフ
取締役兼Webグループ統括
上村 陽介 Webプロモーションを得意とし,インタラクティブコンテンツ制作を主軸にDrupal(オープンソースCMS)によるWebアプリ構築,最近は不動産事業など展開。

 前回はFlashバナーをSilverlight2に作り替えてみましたが,今回はフルFlashのスペシャルサイトの置き換えに挑戦します。

お手本となるFLASHコンテンツはこちら
※ 以前制作した某製紙会社の製品PRサイトのデザインを変更して,架空のサイトを作りました。

 実は以前,このコンテンツをSilverlight1で作り直したことがあります。ですから,問題はSilverlight1で作った機能をどこまでC#化していけばよいのか?です。

 もちろん,すべてC#で作り直すのがベストでしょうが,更新作業がラクになるように,JavaScriptで作った方が良い部分もあるでしょうし。第一,ワタクシのようなC#ビギナーにそこまでできるのか?という事もあるので,適宜JavaScriptでインタラクションに関するファンクションを作って,C#から呼び出す・・・。そんな形で進めていきたいと思います。

 コンテンツに必要な処理の流れをざっくりまとめると,こんな感じです(図1)。

図1●コンテンツに必要な処理の流れ
図1●コンテンツに必要な処理の流れ
[画像のクリックで拡大表示]

 現時点でわからない点は次のとおりです。

処理の連携処理
処理Aから処理Bへの伝達とか,xamlの指定の仕方とかC#の基本的なプログラミングスキルがない

アニメーション(モーションライブラリの活用)
※移動,表示・非表示,アルファ処理付きフェードインアウトなど細かい演出の設定
・かたくなストリーボードアニメで通す?
・Silverlight 1で使ったJSTweener(JavaScriptのモーションライブラリ)を使う?
・C#のトゥーインライブラリを使う?
・オリジナルのコードでモーションさせる?

ローディング
・Silverlight 2 でのローディングイベントの方法
・JavaScriptでも同じイベントの設定が可能なのかどうか

ボタン音
ボタンイベントは「FLASHバナーをSilverlight2で作ってみる」の時に学んだが,サウンドを割り当てる方法は?

 わからないことばかりではありますが,これらがクリアになれば多分できるでしょう。

Gridでレイアウト自由自在

 フルSilverlight2サイトを作るにあたり,最初にクリアしたい要件は以下の通りです。

  • ウィンドウをリサイズしてもコンテンツのメインエリアを中央に配置する
  • フッタの情報(コピーライト&リンクボタン)を常に下部左右に拡張する

 一般的なやり方としては,HTMLに対し,フルスクリーンにするJavaScriptをインクルードしておいて,ロードの瞬間にコール。そして,ブラウザのウィンドウがリサイズされたら,ウィンドウサイズを取得してレイアウトを調整。などとややこしいことを考えていたのですが・・・

Silverlight2から「Grid」が使えるではないかっ!!

 これはHTMLでいうところのリキッドレイアウトのようなもので,レイアウト領域に対し相対的にコンテンツの位置を決定するような作り方ができるという要素であります。XAMLで試みたレイアウト構造は以下の通りです(リスト1)。

リスト1●レイアウト構造(XAML)
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="leyoutTest.Page"
Width="Auto" Height="Auto" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="472">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="32" />
        </Grid.RowDefinitions>
        <Rectangle HorizontalAlignment="Stretch" Fill="#FF333333" Height="300" Width="400" />
        <Rectangle Grid.Row="1" Fill="#FF999999" />
    </Grid>
</UserControl>

 このXAMLではまず,UserControl全体をAutoに設定しつつ,次にGrid.RowDefinitionsで上下に2等分しています。さらに上は可変(Row Definitions Height=”*”),下を32px( Row Definitions Height=”32”)に設定してあります(図2)。

図2●レイアウト設定
図2●レイアウト設定
[画像のクリックで拡大表示]

 先ほど挙げた要件は無事にクリアできました。で,出来たのがコレ

 ん~ Silverlight1で作ったときより格段に便利です。