Data URI scheme: okayama-js-2
0 likes948 views
Data URIスキームについてさわりを紹介します。 第2回okayama-js
Data URI scheme: okayama-js-2
- 1. Data URI スキーム 第二回 okayama-js勉強会 西本圭佑 (NISHIMOTO Keisuke) keisuken@cappuccino.ne.jp
- 2. 大都会から来ました 岡山駅東口からの眺め 2012.01.28 第2回okayama-js 2
- 3. また Scala組かよ!!w LT, Scala組多杉だろwww 2012.01.28 第2回okayama-js 3
- 4. 自己紹介 ➔ 緒言 ➔ 西本 圭佑 ➔ Twitter: keisuke_n ➔ mailto: keisuken@cappuccino.ne.jp ➔ 仕事 ➔ Webアプリ開発と支援(主なもの) ➔ 趣味 ➔ 宇宙・航空開発・鉄道情報ウォッチ ➔ 電子工作 2012.01.28 第2回okayama-js 4
- 5. 前回 変態変態 言われ続けたので 今回はまじめな話します！！ 2012.01.28 第2回okayama-js 5
- 6. 今日は Data URI スキーム の話をします 2012.01.28 第2回okayama-js 6
- 7. Data URI スキームとは ➔ RFC 2397 ➔ http://tools.ietf.org/html/rfc2397 ➔ http://en.wikipedia.org/wiki/Data_URI_scheme ➔ Data URI スキーム(Uniform Resource Identifier scheme)はWebページのインラインデータを外部リソー スのように取り込む方法を提供する ➔ 例 ➔ <img src="data:image/png;base64,iVBORw..."> ➔ 画像、音声、ビデオなどで使用できる 2012.01.28 第2回okayama-js 7
- 8. Data URI スキームフォーマット ➔ data:image/png;base64,iVBORw... ➔ data: データスキーム ➔ image/png: MIMEタイプ ➔ base64: Base64でエンコード ➔ iVBORw...: Base64でエンコードされたデータ 2012.01.28 第2回okayama-js 8
- 9. デモ ➔ 画像表示 ➔ <img src="data:image/png;base64,iVBORw0KGgoAAAA NSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHEl EQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TX L0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"> ➔ HTML表示 ➔ <iframe src="data:text/html;base64,PGgxPkhlbGxvLCB3b3J sZCE8L2gxPg=="></iframe> 2012.01.28 第2回okayama-js 9
- 10. デモ ➔ JavaScriptで音声ファイルを動的に生成して音声 発声 ➔ 間に合わなかった＞＜ 2012.01.28 第2回okayama-js 10
- 11. まとめ ➔ 応用 ➔ HTMLの難読化にも使え、る? ➔ サーバを介さない様々なサービスを展開できる ➔ ビデオから音声を抽出する ➔ 英文から動的に音声合成／発声をする ➔ ビデオファイルをデコードしながら表示する ➔ 以上は実際に存在している ➔ HTML5 + JavaScriptベースの可能性 ➔ ビデオ／オーディオストリーミングクライアントの可能性 ➔ 画像処理の可能性... 2012.01.28 第2回okayama-js 11
- 12. まとめ ➔ 利点 ➔ HTML内に内部リソースを挿入できる ➔ JavaScriptなどで動的に生成すればサーバに依存せず にローカルでなんでもできてしまう！ ➔ 欠点 ➔ ブラウザによって対応状況が異なる ➔ あまり大きなリソースを作るとブラウザごと落ちてしまう かも ➔ なんでも生成できるのでセキュリティ上の懸念も... 2012.01.28 第2回okayama-js 12
- 13. 最後に まだまだ旬じゃないけど、 そろそろ使ってみてもいいかな Data URI スキーム 2012.01.28 第2回okayama-js 13
- 14. おわり ご清聴ありがとうございました 2012.01.28 第2回okayama-js 14
- 15. 質疑応答 Any Questions? 2012.01.28 第2回okayama-js 15