You are on page 1of 76

WP7のメディアを使い倒す

株式会社システムフレンド
西村誠

Agenda
・自己紹介
・画像ファイルを使い倒す
・音声ファイルを使い倒す
・動画ファイルを使い倒す

自己紹介
・西村誠
パティシエ歴5年
プログラマー歴5年
ケーキを作るのと同じぐらいプログラミン
グができる!!

自己紹介
・twitter coelacanth
・ブログ
「眠るシーラカンスと水底のプログラマー」
・facebook 西村 誠
主にwindows phone 7について発信してます

自己紹介

近況:IS12Tを予約して購入!!

自己紹介
開発用端末をいただきました!!

自己紹介
開発用端末をいただきました!!

ぁ、被った・・・・

今日の目的
・色々なメディアを使ったアプリを作れるよ
うになる
・メディアを使ったアプリのアイデアのヒン
トを与える

・Windows Phone 7を好きになる!!

画像ファイルを使い倒す

画像ファイルを使い倒す
さっとカメラで撮影して、
Webに画像をアップ!!

モバイルの楽しみの一つですよね!!
画像を使ったアプリで
楽しい体験を提供しましょう

画像ファイルを使い倒す
DEMO.1
Calorine

食べたものを記録するライフログアプリ

画像ファイルを使い倒す
カメラで撮影した画像を利用する

画像ファイルを使い倒す
登場人物
CameraCaptureTask

カメラを起動する
カメラを起動すると、撮影が終わるまで
アプリの制御を外れる
タスク=OSの機能を呼び出す
例:Emailを送信
Meでtwitter,facebookで発言

画像ファイルを使い倒す
登場人物
PhotoResult
撮影結果を取得できる
撮影データはBitmapImageクラスに
セットして表示できる

画像ファイルを使い倒す

var cam = new CameraCaptureTask();
// カメラ撮影終了時に呼び出すイベントハンドラー
cam.Completed += new
EventHandler<PhotoResult>(this._cameraCaptured);
// カメラ起動(本当はtry/catchしてね)
cam.Show();

画像ファイルを使い倒す

画像ファイルを使い倒す
void _cameraCaptured(object sender, PhotoResult e) {
// 写真を撮影したかどうか
if (e.TaskResult == TaskResult.OK)
{
var bitmapImage = new BitmapImage();

// Imageコントロールにセット
bitmapImage.SetSource(e.ChosenPhoto);
imageCntroll.Source = bitmapImage;

画像ファイルを使い倒す
保存した画像を利用する

画像ファイルを使い倒す
登場人物
PhotoChooserTask

PictureHubから画像を選択する

画像ファイルを使い倒す
【保存してある画像を使う】
// タスクを生成

PhotoChooserTask pix = new PhotoChooserTask();

// PhotoResultは先ほど見ましたね!!
pix.Completed += new
EventHandler<PhotoResult>(_choosePhotoCompleted);
// trueだとやっぱカメラで撮るわ―ってできる
pix.ShowCamera = true;
pix.Show();

画像ファイルを使い倒す
PhotoChooserタスクも選択した後は
PhotoResultクラスを受け取るので、その後の処理
は同じ
画像を選択し終わるまで制御が外れるのも同じ

画像ファイルを使い倒す
画像を保存する

画像ファイルを使い倒す
登場人物
MediaLibrary
画像を保存します。
(シークの位置に注意!!)

画像ファイルを使い倒す

Stream stream = e.ChosenPhoto;

String photo_name = “hoge_image";
MediaLibrary lib = new MediaLibrary();
// シークしてあげます。
stream.Seek(0, SeekOrigin.Begin);
lib.SavePicture(photo_name, stream );

画像ファイルを使い倒す
MediaLiblaryは
Microsoft.Xna.Frameworkを参照に追加する必要がある

画像ファイルを使い倒す
これまでカメラの映像を使うときは、

先ほども言ったようにアプリの制御を外れていた
のでARのようなアプリはできませんでした。
しかし、Windows Phone OS 7.1(Mango)からカメ
ラ映像を自由に利用できるようになりました!!

画像ファイルを使い倒す
DEMO.2
落書き

画像ファイルを使い倒す
わーい、
マーケットで3番目に表示されてる!!

と思って昨日確認したら

画像ファイルを使い倒す
DEMO.2
落書き

画像ファイルを使い倒す
登場人物
PhotoCamera
カメラ映像を扱うクラス
Canvasのブラシにセットすると
カメラ映像をはめ込んだように使用できる

画像ファイルを使い倒す
登場人物
VideoBrush
背景などに使えるブラシ
他にもSolidColorBrush(単色)などがある
Silverlight4ベースになった
MangoからはVideoBrushが使えるようになった!!

画像ファイルを使い倒す
【カメラ画像をブラシとして利用する】
<Canvas x:Name="cameraView“>
<Canvas.Background>
<VideoBrush x:Name=“videoBrush" />
</Canvas.Background>
</Canvas>

画像ファイルを使い倒す
【カメラ画像をブラシとして利用する】
var camera = new PhotoCamera();
camera.Initialized += new
EventHandler<CameraOperationCompletedEventA
rgs>(_camera_Initialized);
this.videoBrush.SetSource(this._camera);

音声ファイルを使い倒す

音声ファイルを使い倒す
音楽プレイヤー、マイクロフォンを利用したアプリ
アプリに埋め込んだ音声の再生
音声を利用したアプリも色々ネタが広がります
ね!!

音声ファイルを使い倒す
DEMO.3
そーしゃるぷれいやー

音声ファイルを使い倒す
登場人物
MediaPlayer
WindowsPhone7デフォルトの
「Music+Videos」
のようなプレイヤーを作成できる

音声ファイルを使い倒す
登場人物
MediaLibrary
登録された曲の一覧
を表すクラス

音声ファイルを使い倒す
var timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromMilliseconds(50);
timer.Tick += delegate
{
FrameworkDispatcher.Update();
// 定期に呼び出される処理を書く
};
timer.Start();

音声ファイルを使い倒す
MediaPlayerクラスのプロパティ
MediaPlayer.Queue.ActiveSong.Duration; // 曲の時間
MediaPlayer.PlayPosition; // 再生している位置
MediaPlayer.Queue.ActiveSong.Album.Name;
MediaPlayer.Queue.ActiveSong.Artist.Name;
MediaPlayer.Queue.ActiveSong.Name;

音声ファイルを使い倒す

MediaPlayerクラスのプロパティ2
MediaPlayer.IsShuffled // シャッフル再生
MediaPlayer.IsRepeating // リピート再生

音声ファイルを使い倒す

曲リストなどはMediaLibraryクラスから取得
Var library = new MediaLibrary();
this._song_collection = library.Songs;

音声ファイルを使い倒す
DEMO.4
クラウディアボイス
効果音

音声ファイルを使い倒す
For Android & For iPhone
私作ってないけど移植されてたw

音声ファイルを使い倒す
登場人物
MediaElement
音楽、動画なんでもござれ
のメディア開発者(?)御用達のクラス
一人芝居級です

音声ファイルを使い倒す
// MediaElementクラスを利用
mediaElement.Source = new
uri(“resources/40chui.wav”);
mediaElement.Play();
基本Web版Silverlightと同じ感覚

音声ファイルを使い倒す
DEMO.5
かんたん録音

音声ファイルを使い倒す
一つだけ音声が録音できる
シンプルな録音プレイヤー

決して
複数対応が面倒
だったわけではない!!

音声ファイルを使い倒す
登場人物
Microphone
マイクを利用するためのクラス
これで録音開始ー

音声ファイルを使い倒す
登場人物
DynamicSoundEffectInstance
録音した音を再生ー
他にもいろいろできそうだけど
また使いこなせていない

音声ファイルを使い倒す
登場人物
FrameworkDispatcher
監督がXNA系の場合に良く登場する俳優
色々重宝する・・・というか知らないと
うまく動かなくて悩む・・・・

音声ファイルを使い倒す
【録音開始】

// Microphoneクラスを利用(newしない)
mic = Microphone.Default;
// バッファーのデータ処理可能になったら呼び出すよー
mic.BufferReady += new
EventHandler<EventArgs>(_mic_BufferReady);
// 録音開始
mic.Start();

音声ファイルを使い倒す
// バッファーがたまる毎に分離ストレージに書き込

int sampleSize =
_mic.GetSampleSizeInBytes(mic.BufferDuration);

byte[] extraBuffer = new byte[sampleSize];
int extraBytes = mic.GetData(extraBuffer);
// この後分離ストレージに書き込む処理が続く

音声ファイルを使い倒す
【録音終了処理】
// 録音終了
mic.Stop();

音声ファイルを使い倒す
// Microphoneクラスを利用(newしない)
playback = new DynamicSoundEffectInstance(mic.SampleRate,
AudioChannels.Mono);
// 長いけど再生用のクラスに音声データを呼び出しているん
だー
using (IsolatedStorageFileStream stream =
storage.OpenFile("record", FileMode.OpenOrCreate,
FileAccess.Read))
{
byte[] buffer = new byte[stream.Length];
stream.Read(buffer, 0, buffer.Length);
playback.SubmitBuffer(buffer);

}

音声ファイルを使い倒す
// 再生
playback.Play();

// 終了
playback.Stop()

音声ファイルを使い倒す
timer = new DispatcherTimer();
// OnTimerTick内では
FrameworkDispatcher.Updateしている
timer.Interval = TimeSpan.FromTicks(333333);
timer.Tick += OnTimerTick;
FrameworkDispatcher.Update();

timer.Start();

音声ファイルを使い倒す
FrameworkDispatcherって何?
XNAはwhile文のように決められたメソッドが
定期的に呼び出される
その動作をSilverlightで再現するおまじない
クラス
1フレームに一回Update()を呼び出す

動画ファイルを使い倒す

動画ファイルを使い倒す
・Web上から動画を再生
・Smooth Streaming動画を再生

動画ファイルを使い倒す
DEMO.6
MoviePlayer

動画ファイルを使い倒す

Web上に置かれたwmvファイルを
再生するサンプル

音声ファイルを使い倒す
登場人物
MediaElement
またまた登場
音楽も動画も再生できる便利なクラス

動画ファイルを使い倒す
MediaElement media = new MediaElement();
// 動画の再生に失敗(これが無いと失敗した理由がわからない)
media.MediaFailed += new
EventHandler<ExceptionRoutedEventArgs>(MediaFailed);
// 再生終了時のイベント
media.MediaEnded += new RoutedEventHandler(MediaEnded);
media .Source = new
Uri("http://coelacanth.heteml.jp/sl7_video_bord/vb.wmv");
media.Play();

動画ファイルを使い倒す
MediaElement.Sourceには
リソースファイルの動画もセットできる
一家に一台の便利なクラス!!!

動画ファイルを使い倒す
DEMO.7
SmoothStreamingSample

動画ファイルを使い倒す

SmoothStreaming形式の動画を
再生する

動画ファイルを使い倒す
SmoothStreamingとは?

動画を何種類かのビットレートで配信し、
ユーザーの状態に合わせて切り替える配信
方式

動画ファイルを使い倒す
視聴者の帯域に合わせた動画配信が可能

シーク時にビットレートを下げることで高速
なシークを実現
一つのビットレートをモバイル用にすること
でモバイルでも同じ動画を再生できる

動画ファイルを使い倒す
つまりこういうこと!!

高画質 → 光回線ユーザー
中画質 → ADSLユーザー
低画質 → WP7ユーザー
全員が快適に適切な画質で
同じ動画が見れる!!

音声ファイルを使い倒す
登場人物
Smooth Streaming Client 1.5
SmoothStreaming再生するための
ライブラリ
http://www.microsoft.com/download/en/details.aspx?id=8227

音声ファイルを使い倒す
登場人物
MMP Player Framework 2.5
Microsoft Media Platform: Player Framework
http://smf.codeplex.com/releases/view/63434

音声ファイルを使い倒す
Mangoのβ2の頃は
うまく動きませんでしたが
今は大丈夫!!

音声ファイルを使い倒す
<core:SMFPlayer>
<core:SMFPlayer.Playlist>
<media:PlaylistItem
DeliveryMethod="AdaptiveStreaming"
MediaSource="http://ecn.channel9.msdn.com/o
9/content/smf/smoothcontent/bbbwp7/big buck
bunny.ism/manifest"/>
</core:SMFPlayer.Playlist>
</core:SMFPlayer>

まとめよう
以上、色々なファイルの触り方を
紹介しましたがいかがでしたか?

Windows phone 7
コードの書きやすさが伝われば光栄です

まとめよう

ご清聴ありがとうございました