2012年12月16日日曜日

色んなデータをデータURIスキームで埋め込んでみる

色んなデータをデータURIスキームで埋め込んでみました。 データURIスキームというのは「htmlやcssでuriの変わりにデータを埋め込む」というアレです。

データURIスキームの書式は、

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

<a href="uri">説明</a>や<img src="uri"/>などのuriの代わりにコレを書きます。 <data>に書ける文字は通常のuriと同じです。 uriで使用できない文字を書くときにはエンコードが必要になります。 ファイルの種類に合ったMIME-typeを指定して、バイナリファイルならcharsetなしでbase64エンコードで記述。 テキストファイルならcharsetを指定して、必要に応じてURLエンコードまたはbase64エンコードをして記述します。

ここで試したデータのエンコードにはこちらのプログラムを使用しています。

以下、埋め込むデータについて。 bloggerに負荷をかけても仕方がないので出来るだけ小さなデータを載せています。 データURIスキームではurlの代わりにデータを直書きするのでファイル名が指定できません。 ファイル名はブラウザが用意した文字列(chromeなら「ダウンロード」、Operaなら「default」、firefoxならよくわからない文字列)になります。 試しにダウンロードする人は、保存時に適当な名前を付けてください。 セキュリティ的な様子見のためにアレなものも混入。 中身はハローワールドです。 uriの中身はhtmlソースを見てください。 なお、こちらでデータの有効無効を確認するときは全プラグインを有効にしています。

埋め込みデータ一覧です。 「種別、表示」欄の文字(物によっては対応ブラウザの記号)でマウスオーバーをしたら簡単な説明が表示されます。 この投稿に色んなデータを埋め込んでみて表示を確認 → 結果を元にこの投稿を修正という方向でやります。 (確認日 : 2012/12/16)

種別、表示対応ブラウザ
firefox17opera12chrome23ie9
zipアーカイブ ×
7zアーカイブ ×
cppソースコード(日本語を含んだtext) ×
svg画像ファイル(text)
*○*△
ods(OpenOffice Calc) ×
midi
mp4
? ?
javascript
javaアプレット
× × × ×
swf(flash)
×
exe(windows実行ファイル) *○ *○ *○ ×
bat(windowsバッチファイル) *○ *○ *○ ×

確認してみて、javascriptが試した全ブラウザで有効ってのは予想外でしたね。 画像しか対応していないと思っていたie9でも動作しました。 まぁ、scriptタグが書けるページでしか意味の無いことではありますが、データURIスキームはマイナーなので、管理者の気付かない穴になってしまう可能性とかもあるかもしれませんね。

videoも試した全ブラウザで有効な可能性はありますね。 動画自体データが大きい物ですし、base64でさらに大きくなることを考えると全く実用的ではないので本気でチェックしようとは思ってませんでしたが、もしWebMなどのフォーマットが通るなら全ブラウザで有効ということになってしまいます。 とはいえyoutubeでok。

javaについては、ブラウザにclass名を伝える方法が分かりませんでした。 appletタグのcode属性にデータを書いたんですが、「データURIスキームではファイル名が指定できない」という特性のため、データを渡せてもどれがエントリポイントなのかは伝えられません。 というか、そもそもcode属性にデータを書いて意味があるのかも不明。 code属性に書かれたクラス名からjavaフレームワークがアレコレっていう動作ならお手上げです。 というわけで、根本的な部分が分かってない状態ではありますが、需要もないのでこれ以上調べないつもりです。

色々書いたけど、アーカイブとテキストと画像さえ通ればいいかな? 私の用途では、ie以外は有効でした。 確認しての雑感はこんな感じで。

なんでこんな事をチェックしたかというと、bloggerに投稿できるファイル形式が限られてるからなんですよね。 普通なら当然、普通のファイルでアップロードした方がいいんですが、bloggerではそれが出来ないんです。 現状、投稿できるのは普及している形式の画像ファイルのみと思っていいでしょう。 しかし、今のブラウザはデータURIスキームに対応しています。 もしそれが有効なら、制限はありますが色々投稿できます。

制限とは、この3つです。

  • bloggerでの1投稿あたりのサイズ制限。(2012/12/17注:投稿サイズの制限をbloggerのヘルプで発見)
  • 主要なブラウザであるie9で画像ファイルしか扱えない。(ie10のプレビュー版では対応したはず?)
  • bloggerの一存でデータURIスキームの使用が禁止され、過去の投稿からuriに書かれたデータが削除される可能性がある。

デメリットがあるとはいえ、使い方次第では役に立ちそうですね。 例えば、このブログでは小さなソースコード(とはいえ1画面では収まらない)を載せることがよくあります。 今は見に来る人に「全部コピペしろ」と言っている状態です。 それはそれで不親切だと思っていたので、本文の他にデータURIスキームで配布できるなら多少は改善できるかなと。

セキュリティ的な理由や容量的な理由でbloggerに禁止される可能性があるのは、まぁ仕方がないことかもしれません。 禁止されることを見越した用途で使った方がいいでしょう。 ↑のソースコード配布なら、もし今データURIスキームが有効で、後に仕様変更で無効にされたとしても本文にコードが残ってます。 補助としてのコード配布手段ならよさそうです。

まぁ普通のものを配布するなら専用サービスを使った方が良いんで、「小物配布のために節度を持って」ってとこですかね? ie10で使えるんなら普及率的にもそれなりの手段になりそうです。