Data URI scheme: okayama-js-2

Data URI スキーム第二回 okayama-js勉強会西本圭佑 (NISHIMOTO Keisuke) keisuken@cappuccino.ne.jp

大都会から来ました岡山駅東口からの眺め2012.01.28 第2回okayama-js 2

また Scala組かよ!!w LT, Scala組多杉だろwww2012.01.28 第2回okayama-js 3

自己紹介 ➔ 緒言 ➔ 西本圭佑 ➔ Twitter: keisuke_n ➔ mailto: keisuken@cappuccino.ne.jp ➔ 仕事 ➔ Webアプリ開発と支援(主なもの) ➔ 趣味 ➔ 宇宙・航空開発・鉄道情報ウォッチ ➔ 電子工作2012.01.28 第2回okayama-js 4

前回変態変態言われ続けたので今回はまじめな話します！！2012.01.28 第2回okayama-js 5

今日は Data URI スキームの話をします2012.01.28 第2回okayama-js 6

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

Data URI スキームフォーマット ➔ data:image/png;base64,iVBORw... ➔ data: データスキーム ➔ image/png: MIMEタイプ ➔ base64: Base64でエンコード ➔ iVBORw...: Base64でエンコードされたデータ2012.01.28 第2回okayama-js 8

デモ ➔ 画像表示 ➔ <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

デモ ➔ JavaScriptで音声ファイルを動的に生成して音声発声 ➔ 間に合わなかった＞＜2012.01.28 第2回okayama-js 10

まとめ ➔ 応用 ➔ HTMLの難読化にも使え、る? ➔ サーバを介さない様々なサービスを展開できる ➔ ビデオから音声を抽出する ➔ 英文から動的に音声合成／発声をする ➔ ビデオファイルをデコードしながら表示する ➔ 以上は実際に存在している ➔ HTML5 + JavaScriptベースの可能性 ➔ ビデオ／オーディオストリーミングクライアントの可能性 ➔ 画像処理の可能性...2012.01.28 第2回okayama-js 11

まとめ ➔ 利点 ➔ HTML内に内部リソースを挿入できる ➔ JavaScriptなどで動的に生成すればサーバに依存せずにローカルでなんでもできてしまう！ ➔ 欠点 ➔ ブラウザによって対応状況が異なる ➔ あまり大きなリソースを作るとブラウザごと落ちてしまうかも ➔ なんでも生成できるのでセキュリティ上の懸念も...2012.01.28 第2回okayama-js 12

最後にまだまだ旬じゃないけど、そろそろ使ってみてもいいかな Data URI スキーム2012.01.28 第2回okayama-js 13

おわりご清聴ありがとうございました2012.01.28 第2回okayama-js 14

質疑応答 Any Questions?2012.01.28 第2回okayama-js 15

Data URI scheme: okayama-js-2

by NISHIMOTO Keisuke on Jan 28, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Data URI scheme: okayama-js-2 — Presentation Transcript