2012年1月21日に行われた「わんくま勉強会東京#67」で行ったセッションの資料になります。

1. XNAライブラリを使って音楽プレイヤー
を作ってみよう！
大黒 健司
わんくま同盟 東京勉強会 #67

2. まずは自己紹介
• 大黒健司（だいこく・けんじ）
• 細々とフリーランサーしてます。
現在C#メインで頑張ってます。
• 昔はアセンブラとかで仕事してました。
• Twitter ID：daikoku1976
• ブログ書いてます。
http://daidev1976.wordpress.com/
http://daiwp.blogspot.com/
わんくま同盟 東京勉強会 #67

3. アジェンダ
• SilverlightでXNAライブラリを使ったWindows
Phoneアプリを作成してみよう。
• SilverlightアプリケーションでXNAライブラリを
使用するまでの手順を把握する。
• メディアライブラリやハブ機能を使用する場合
のデバッグの注意事項を把握する。
わんくま同盟 東京勉強会 #67

4. Windows PhoneでのXNAライブラリの用途
• ゲーム開発用のライブラリ
• 画像、音楽、効果音等のゲーム開発に必要な
コンテンツにアクセスできます。
• 簡単なメディアプレイヤーは、このライブラリで
作成できます。
わんくま同盟 東京勉強会 #67

5. XNAライブラリ利用のメリット・デメリット
メリット
• PCのZuneと同期中でもWindows Phone内
のメディアライブラリにアクセスできます。
デメリット(出来ないこと)
• プレイリストが保存できない。
わんくま同盟 東京勉強会 #67

6. 今回ライブラリを利用して作るアプリケーション
条件
• 初心者や経験者でもそれなりに作ったと実感
できそうなもの。
• “Hello World”以外。
• 簡単な音楽プレイヤーなら多少なりに満足？
• Twitterで今聴いてる曲とかも呟いちゃおうか。
わんくま同盟 東京勉強会 #67

7. ということで……
• こんな画面のアプリを作ろうと思います。
再生画面 曲一覧画面
わんくま同盟 東京勉強会 #67

8. 必要な機能の整理
再生画面
• ボタン
再生、一時停止、次の曲、前の曲
ランダム、リピート、ツイート
• 表示
再生している曲名、アーティスト名
再生時間、曲の時間、アルバムイメージ
曲リスト画面
• 曲一覧リスト
わんくま同盟 東京勉強会 #67

9. 再生画面の作成
使うコントロール
• TextBlock×4
• Button×6
• StackPanel×2
• Image×1
• ApplicationBar有効
わんくま同盟 東京勉強会 #67

10. XNAライブラリをSilverlightで利用する手順
• ソリューションエクスプローラーで[参照設定]を
右クリックし、「参照の追加」を選択。
• .NETのコンポーネント名一覧から
「Microsoft.Xna.Framework」を選択。
わんくま同盟 東京勉強会 #67

11. 使用するXNAライブラリの名前空間とクラス
• Microsoft.Xna.Framework.Media名前空間
• MediaLibraryクラス
メディアライブラリにアクセスするためのクラス。
ゲームだとBGMに当たります。
• MediaPlayerクラス
メディアプレイヤーの操作をするためのクラス。
ゲームだとBGMの再生などはこちらで制御。
わんくま同盟 東京勉強会 #67

12. MediaLibraryクラス
• 主に使用するプロパティ
プロパティ名 用途
Songs メディアライブラリ内にある全曲一覧情報
Albums メディアライブラリ内にあるアルバム別一覧情報
Artists メディアライブラリ内にあるアーティスト別一覧情報
Genres メディアライブラリ内にあるジャンル別一覧情報
Playlists メディアライブラリ内にあるプレイリスト別一覧情報
わんくま同盟 東京勉強会 #67

13. MediaPlayerクラス(1/2)
• 主に使用するメソッド、プロパティ
メソッド名 用途
Play 再生する曲を指定して再生開始する。
Pause 一時停止する。
Resume 一時停止状態から再生を再開する。
MovePrevious 前の曲を再生する。
MoveNext 次の曲を再生する。
IsRepeating リピート設定。
IsShuffled ランダム設定。
わんくま同盟 東京勉強会 #67

14. MediaPlayerクラス(2/2)
• 主に使用するプロパティ、イベント
プロパティ名 用途
イベント名
State メディアプレイヤーの状態。
MediaState.Playing : 再生中
MediaState.Paused : 一時停止中
MediaState.Stopped : 停止中
Queue.ActiveSong 再生中の曲情報。
PlayPosition 再生中の曲の再生位置(時間)。
ActiveSongChanged 再生中の曲が切り替わったときに発生するイベン
イベント ト。
MediaStateChanged メディアプレイヤーの状態が変化したときに発生す
イベント るイベント。
わんくま同盟 東京勉強会 #67

15. MediaPlayerの状態管理
• MediaPlayerはイベント管理や状態管理が必
要です。
• 状態管理はDispacherTimerを使用して定期
的にMediaPlayerの状態を更新します。
☆XNAライブラリ利用するときのお約束☆
• 状態を更新するためのメソッドは、
FrameworkDispacher.Updateメソッド。
(Microsoft.Xna.Framework名前空間)
わんくま同盟 東京勉強会 #67

16. Tweet機能を実装する方法
• 自力でTwitterAPI使ってやる方法
→実装だけで時間がかかる。
• Windows Phoneで用意されているAPIを利用
→SharestatusTask
• 今回は楽をするためにSharestatusTaskを使
用します。
わんくま同盟 東京勉強会 #67

17. SharestatusTaskクラス
• 使用するプロパティ、メソッド
プロパティ、メソッド名 用途
Status 投稿する内容。
Show Meハブを表示する。
• 使用方法
Statusプロパティに表示したい内容を設定し、
ShowメソッドでMeハブを表示させる。
→投稿するかどうかはユーザーに委ねる。
わんくま同盟 東京勉強会 #67

18. 今までのことを踏まえて……
• 再生画面と機能を実装してみましょう。
わんくま同盟 東京勉強会 #67

19. 曲一覧画面の作成
追加するページ
• Pivotページ
使用するコントロール
• ListBox×2
わんくま同盟 東京勉強会 #67

20. 曲一覧画面での処理
• ListboxにMediaLibraryの曲名一覧をアイテ
ムとして追加する。
• Listboxで選択が行われたときに曲の再生を
行う。
• 曲の再生が開始されたら再生画面に戻る。
わんくま同盟 東京勉強会 #67

21. 曲一覧のリストは……
• 思っているよりも全然難しくないので、早速画
面と機能を実装します。
わんくま同盟 東京勉強会 #67

22. デバッグ時の注意点
• メディアライブラリやMeハブなどのハブ機能を
利用する場合は、実機で確認します。
• 再生画面のデバッグは、エミュレーター上でも
可能ですが、サンプル曲での確認になるので
注意が必要です。
※アルバムアートなどがありません。
わんくま同盟 東京勉強会 #67

23. 小技
• Musicハブから自分のアプリを起動させたい。
→[Properties]-[WMAppManifest.xml]を編集
4行目<App ～>に HubType=“1” を追加する。
わんくま同盟 東京勉強会 #67

24. まとめ
• XNAライブラリは、元々はゲーム開発向けだ
がメディア系の操作を簡単に行えるので、そ
の手のアプリケーション開発にもオススメ。
• Windows Phoneでは、Windows Phoneの機
能を簡単に利用できるライブラリが揃っている
ので、有効利用しましょう。
• メディア系アプリの確認は是非実機で！
• Windows Phoneアプリ作るのは楽しいので、
是非挑戦してみてください。
わんくま同盟 東京勉強会 #67

25. 参考
• MSDNライブラリ(Windows Phone 用の
Silverlight および XNA Framework)
http://msdn.microsoft.com/ja-
jp/library/ff402528(v=vs.92).aspx
• 日経ソフトウエア 2011年12月号
メトロちゃんが目印！
• 日経BPベストムック
iOS/Android/Windows Phone
プログラミング
わんくま同盟 東京勉強会 #67

26. ありがとうございました！
わんくま同盟 東京勉強会 #67