osc@京都 2011-07-15
TRANSCRIPT
![Page 1: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/1.jpg)
日本Red5ユーザー会
文屋 宏
寄せ書きアプリを作ろう!
オープンソースカンファレンス
2011 Kansai@Kyoto
![Page 2: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/2.jpg)
アジェンダ
■はじめに
■ Red5 の概要
■ Flash Media Sever と Red5
■アプリ開発入門
■アプリを作ってみよう!!
■その他のデモ
![Page 3: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/3.jpg)
はじめに
![Page 4: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/4.jpg)
Red5 ユーザー会公式ハッシュタグ
#red5ug
ぜひ今日の感想をツイートしてください!!
![Page 5: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/5.jpg)
自己紹介
○氏名文屋 宏(ぶんや ひろし) Twitter @bun_hiroshi
○所属サーバホスティング会社
○業務プロジェクトマネージャっぽいこと
○興味あること分散データベース,クラウドコンピューティング,ウェブ系の技術
○活動日本 Red5 ユーザー会メンバー
![Page 6: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/6.jpg)
Red5 の概要
![Page 7: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/7.jpg)
Red5 とは
Adobe Flash Media Server互換のメディアサーバ
⇨ RTMP(Real-Time Messaging Protocol)に準拠
オープンソースソフトウェア
⇨ ライセンスは LGPL
開発言語は Java
⇨ Linux, Windows, Mac OSX上で動作可能
※ Red5本家サイト http://www.red5.org/
![Page 8: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/8.jpg)
Red5 標準デモ
デモを見てみよう↓
http://www.dog-lovers.jp:5080/demos/
![Page 9: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/9.jpg)
日本Red5ユーザー会
ユーザー会のサイト↓
http://www.red5.gr.jp/
![Page 10: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/10.jpg)
なぜ「Red5」という名に?
開発者がスターウォーズ好きだから!
Red5 は、ルーク・スカイウォーカーのコールサイン(スターウォーズ エピソードIV)
デス・スターに攻め込むシーン(レッド中隊とゴールド中隊がいたらしい)
(連隊を組みつつ)レッド中隊の隊長 "All wings report in."
最後に、“Red 5 standing by.”
他にも"This is Red 5. I'm going in."
"Red 6, can you see Red 5?"
"There's a heavy fire zone. Red 5, where are you?"
"There's too much interference. Red 5, can you see them?"
![Page 11: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/11.jpg)
Flash Media Sever と Red5
![Page 12: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/12.jpg)
Flash Media Sever とは?
Adobe製のサーバーソフトウェア
⇨ ビデオストリーミング
⇨ リアルタイムコミュニケーション
Flash Playerから接続可能
⇨ Flash Playerは全世界のPCで98%の普及率
開発言語
⇨ Action Scriptで開発
エディションは3つ
⇨ Flash Media Streaming Server (12万円程度)
⇨ Flash Media Interactive Server (62万円程度)
⇨ Flash Media Enterprise Server (オープン価格)
![Page 13: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/13.jpg)
Red5 で何ができるか
◆音声ファイルや動画ファイルのストリーミング配信
◆Web カメラなどからのストリーミング映像を録画
◆映像や音声などのライブ映像をリアルタイム配信
◆複数のクライアント間でオブジェクトを共有
◆いろんなライブラリを組み合わせて柔軟な開発
⇒実は FMS よりも自由度が高い!
![Page 14: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/14.jpg)
Adobe による言及
Adobeサイト『Flashの真実』
http://www.adobe.com/jp/choice/flash.html
![Page 15: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/15.jpg)
アプリ開発入門
![Page 16: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/16.jpg)
開発環境
◆クライアントサイド(ActionScript)・Adobe Flash
・Adobe Flex
・OpenLaszlo(http://laszlo.jp/)・FlashDevelop(http://flashdevelop.jp/)
◆サーバサイド(Java)・Eclipse
・NetBeans
![Page 17: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/17.jpg)
クライアントサイド入門
![Page 18: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/18.jpg)
FlashDevelopを動かしてみよう!
http://flashdevelop.jp/
⇒ActionScript3.0コンパイル入門
![Page 19: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/19.jpg)
サーバサイド入門
![Page 20: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/20.jpg)
Red5 の導入
◆Java のインストール[root@sv]# yum install -y java
◆Red5 のダウンロード[root@sv]# cd /opt
[root@sv opt]# wget http://wiki.red5.org/downloads/0_9/red5-0.9.1.tar.gz
[root@sv opt]# tar zxvf red5-0.9.1.tar.gz
◆Red5 の起動[root@sv opt]# cd red5-0.9.1
[root@sv red5-0.9.1]# ./red5.sh > log/console_20110715.log 2 >&1 &
◆Red5 の停止[root@sv red5-0.9.1]# ./red5-shutdown.sh
![Page 21: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/21.jpg)
アプリを作ってみよう!!
![Page 22: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/22.jpg)
寄せ書き(・・・というか落書き)アプリ
例えばこっちは京都の人 例えばこっちは東京の人
描いた絵がリアルタイムに共有される!
⇒共有!!
http://demos.red5.gr.jp/rakugaki/
![Page 23: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/23.jpg)
今回、クライアントサイドの開発は FlashDevelop
ソースコードを見てみよう
![Page 24: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/24.jpg)
ボタンの作成
座標の指定はちょっと注意!
開始ボタンを押されたときのイベント処理
![Page 25: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/25.jpg)
開始ボタンを押されたときのイベント処理
Red5 サーバに接続!
![Page 26: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/26.jpg)
Red5 に接続したら、マウスの座標を同期
![Page 27: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/27.jpg)
マウスをドラッグしたラインの描画
![Page 28: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/28.jpg)
よし、これでいけるはず!!
![Page 29: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/29.jpg)
失敗・・・?なんじゃこりゃー(>o<)
円を描こうとしたら、謎の線がいっぱい・・・
![Page 30: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/30.jpg)
う~ん、もしかして同期にタイムラグがある??
マウスをドラッグしてる間は同期しない設定にしてみようか
![Page 31: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/31.jpg)
マウスドラッグ中は同期しない設定
drawflagが立ってないときだけ共有!
![Page 32: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/32.jpg)
さて、うまくいったかな?FlashDevelop上でチェック
![Page 33: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/33.jpg)
大成功!!(*^o^*)∠※Pan!!。・:*:・
共有できたぁああああ!!!
![Page 34: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/34.jpg)
うまくいったら、サーバにアップ
![Page 35: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/35.jpg)
何をサーバにアップロードするか
bin の中身をアップ
![Page 36: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/36.jpg)
サーバのどこにアップロードするか
httpd.conf を見てみるDocumentRootの設定とか
![Page 37: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/37.jpg)
アップしたら、ブラウザで見てみよう⇒http://demos.red5.gr.jp/rakugaki/
![Page 38: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/38.jpg)
追加したい機能
■線の色やスタイルを選択する機能
■消しゴム機能
■お題を出す機能
■同時多発書き込み可能化
■書き終わった絵をアップして共有する機能
■ログイングループを分ける
⇒ソーシャルアプリ、スマホアプリ化
![Page 39: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/39.jpg)
参考文献
◆基本からしっかりわかるActionScript 3.0
http://www.amazon.co.jp/dp/4839930252/
◆ActionScript3.0開発のためのFlashDevelop完全ガイドhttp://www.amazon.co.jp/dp/4774143081/
◆ Think IT 連載記事(第3回はじめよう!Red5プログラミング)http://thinkit.co.jp/article/152/3
◆その他ウェブの情報
![Page 40: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/40.jpg)
最後に面白いデモの紹介
◆ユーザー会のサイトhttp://www.red5.gr.jp/demos
◆Face Changer
http://www.red5.gr.jp/event/19-osc2011-kansai-kobe
![Page 41: OSC@京都 2011-07-15](https://reader033.vdocuments.mx/reader033/viewer/2022060112/556f6d1ed8b42a9d338b4c5d/html5/thumbnails/41.jpg)
ご清聴ありがとうございました!