SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight 3徹底入門

Silverlight 3で強化されたグラフィックとメディア機能

Silverlight 3徹底入門(6)

  • X ポスト
  • このエントリーをはてなブックマークに追加

 Silverlight 3では擬似的な3次元表現、ビットマップ描画APIの提供、画像に対して特殊加工を行うピクセルシェーダーのサポートといった機能を標準でサポートし、限定的ではありますが画像の描画にGPUを利用することで描画のパフォーマンスの向上も図られています。今回は、それらのメディア関連の新機能について説明します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Silverlightはもともとビデオ再生や画像の処理を得意としていましたが、Silverlight 3では擬似的な3次元表現、ビットマップ描画APIの提供、画像に対して特殊加工を行うピクセルシェーダーのサポートといった機能を標準でサポートし、限定的ではありますが画像の描画にGPUを利用することで描画のパフォーマンスの向上も図られています。

 今回はSilverlight 3で追加されたメディア関連の新機能について、概要を説明します。

Silverlightとメディア

 Silverlightは登場以来、「Silverlightと言えば高品質な動画配信、DRMを利用した動画の保護、コンテンツとメディアの統合」というようにメディアのサポートが大きく取り上げられてきました。

 Silverlight 3でも同様に高品質なメディアを扱うための拡張が行われています。

新しいコーデックのサポート

 Silverlight 3では、従来のコーデックに追加してMPEG4を再生するための高品質なコーデックであるH.264/AACがサポートされ、さらに高品質な動画の再生が行えるようになっています。Silverlight 3でサポートされる動画形式の詳しい説明は、MSDNがサポートしているメディア形式、プロトコル、およびログフィールドを参照ください。

ライブスムースストリーミングのサポート

 筆者はSilverlight 3の段階で、他のRIAプラットフォームと比べてもっとも違いが顕著なのがSilverlightのスムースストリーミングのサポートだと思っています。これはクライアントの帯域やCPUの状況に応じて動画のビットレートを調整して再生を行う技術です。世界的には、昨年のマイケル・ジャクソンのメモリアルライブやアメリカ大統領の就任挨拶などが、スムースストリーミングを利用して放映されたことが記憶に新しいでしょう。

 スムースストリーミングに関しては以下のIIS.NETのサイトでサンプルが公開されています。このサンプルでは、帯域の状況によってビットレートが変更になりながらも、高品質な動画がスムーズに再生できていることが確認できます。

 ライブスムースストリーミングは、この帯域幅の自動調整の機能をライブ中継に適応した技術です。ライブスムースストリーミングでライブ中継を行うことで、動画を見る側の環境に最適化された状態でライブ中継を観覧することができ、少し気になることがあれば動画を巻き戻して追っかけ再生できます。

 ライブスムースストリーミングの詳しい説明は、TechNetのLive Smooth Streamingを参照ください。

遠近法変換を利用した疑似3D効果の適用

 Silverlight 3では、遠近法変換(Projection)と呼ばれる変換をUI要素に適用することで、擬似的な3D効果をつけることが可能になりました。

これまでの変換

 Silverlight 2までもUI要素のTransformプロパティに変換方法を指定することで、回転(RotateTransform)、拡大縮小(ScaleTransform)、傾斜(SkewTransform)、平行移動(TranslateTransform)といった簡単な変換は行うことが可能でした。[リスト1]は画面に配置された四角形を回転(RotateTranform)で変換したものです。

[リスト1]RotateTransformを利用した要素の変換(Transform.xaml)
<StackPanel Margin="5">
    <Rectangle Width="50" Height="50" Fill="Red" />
    <TextBlock Text="変換なしの状態" />
</StackPanel>
<StackPanel Margin="5">
    <Rectangle Width="50" Height="50" Fill="Blue">
        <!-- 四角形を60度回転 -->
        <Rectangle.RenderTransform>
            <RotateTransform x:Name="transform" Angle="60" CenterX="25" CenterY="25" />
        </Rectangle.RenderTransform>
    </Rectangle>
    <Slider Minimum="0" Maximum="360" 
            Value="{Binding ElementName=transform, Mode=TwoWay, Path=Angle}"/>
    <TextBlock Text="回転での変換" />
</StackPanel>

 この例では、長さ50の四角形の中心(CenterX="25" CenterY="25")で、60度(Angle="60")回転(RotateTransform)させた例です。実行すると変換前の四角形と変換(回転)後の四角形を確認できると思います(図1)。また、青い四角形の下にあるスライダーにはスライダーの値とRotateTransformのAngleをバインドしています。スライダーを動かすと四角形のアングルを動的に変更できます。

図1:[リスト1]の実行結果
図1:[リスト1]の実行結果

次のページ
遠近法変換を利用した要素の変換

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Silverlight 3徹底入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4953 2010/03/24 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング