Data URI scheme: okayama-js-2

Data URI Data URI スキームスキーム

西本圭佑 (NISHIMOTO Keisuke)keisukencappuccinonejp

第二回 okayama-js勉強会

20120128 第2回okayama-js 2

大都会から来ました大都会から来ました

岡山駅東口からの眺め


またまた

Scala組かよw

LT Scala組多杉だろwww


自己紹介自己紹介

緒言西本圭佑 Twitter keisuke_n mailto keisukencappuccinonejp

仕事 Webアプリ開発と支援(主なもの)

趣味宇宙航空開発鉄道情報ウォッチ電子工作


前回前回

変態変態

言われ続けたので

今回はまじめな話します


今日は今日は

Data URI スキーム

の話をします


Data URI Data URI スキームとはスキームとは

RFC 2397 httptoolsietforghtmlrfc2397

httpenwikipediaorgwikiData_URI_scheme Data URI スキーム(Uniform Resource Identifier

scheme)はWebページのインラインデータを外部リソースのように取り込む方法を提供する

例 ltimg src=dataimagepngbase64iVBORwgt

画像音声ビデオなどで使用できる


Data URI Data URI スキームフォーマットスキームフォーマット

dataimagepngbase64iVBORw data データスキーム

imagepng MIMEタイプ

base64 Base64でエンコード

iVBORw Base64でエンコードされたデータ


デモデモ

画像表示 ltimg

src=dataimagepngbase64iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P48w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg== alt=Red dotgt

HTML表示 ltiframe

src=datatexthtmlbase64PGgxPkhlbGxvLCB3b3JsZCE8L2gxPg==gtltiframegt


デモデモ

JavaScriptで音声ファイルを動的に生成して音声発声間に合わなかった＞＜


まとめまとめ

応用 HTMLの難読化にも使えるサーバを介さない様々なサービスを展開できる

ビデオから音声を抽出する英文から動的に音声合成発声をするビデオファイルをデコードしながら表示する以上は実際に存在している

HTML5 + JavaScriptベースの可能性

ビデオオーディオストリーミングクライアントの可能性画像処理の可能性


まとめまとめ

利点 HTML内に内部リソースを挿入できる

JavaScriptなどで動的に生成すればサーバに依存せずにローカルでなんでもできてしまう

欠点ブラウザによって対応状況が異なるあまり大きなリソースを作るとブラウザごと落ちてしまう

かもなんでも生成できるのでセキュリティ上の懸念も


最後に最後に

まだまだ旬じゃないけど

そろそろ使ってみてもいいかな



おわりおわり

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


質疑応答質疑応答

Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15


大都会から来ました大都会から来ました

岡山駅東口からの眺め


またまた

Scala組かよw








前回前回

変態変態




今日は今日は


の話をします















デモデモ

画像表示 ltimg


HTML表示 ltiframe



デモデモ



まとめまとめ






まとめまとめ






最後に最後に





おわりおわり




Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15


またまた

Scala組かよw








前回前回

変態変態




今日は今日は


の話をします















デモデモ

画像表示 ltimg


HTML表示 ltiframe



デモデモ



まとめまとめ






まとめまとめ






最後に最後に





おわりおわり




Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15







前回前回

変態変態




今日は今日は


の話をします















デモデモ

画像表示 ltimg


HTML表示 ltiframe



デモデモ



まとめまとめ






まとめまとめ






最後に最後に





おわりおわり




Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15


今日は今日は


の話をします















デモデモ

画像表示 ltimg


HTML表示 ltiframe



デモデモ



まとめまとめ






まとめまとめ






最後に最後に





おわりおわり




Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15















デモデモ

画像表示 ltimg


HTML表示 ltiframe



デモデモ



まとめまとめ






まとめまとめ






最後に最後に





おわりおわり




Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15


デモデモ



まとめまとめ






まとめまとめ






最後に最後に





おわりおわり




Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15


まとめまとめ






まとめまとめ






最後に最後に





おわりおわり




Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15


まとめまとめ






最後に最後に





おわりおわり




Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15


最後に最後に





おわりおわり




Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15


おわりおわり




Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15



Any Questions

ページ 1

ページ 2

ページ 3

ページ 4

ページ 5

ページ 6

ページ 7

ページ 8

ページ 9

ページ 10

ページ 11

ページ 12

ページ 13

ページ 14

ページ 15

Data URI scheme: okayama-js-2

Technology

Transcript of Data URI scheme: okayama-js-2