data uri scheme を愛しています。
DataURI Schemeは、巷でパフォーマンス・アップのためにチヤホヤされています。私は別の理由で愛しています(後述
DataURI Scheme とはなにか?
今更感あるけど、一応おさらい。img を直接HTMLに埋め込む方法です。
<img src="data:XXXXXXX" />
data: プロトコルハンドラなんて呼ぶ人も居ますね。
画像をData URIに変換するスクリプト作りました。
画像をdatauriに変換をもっと簡単にして、DataURISchemaをもっと使い込もうと思いました。rubyスクリプト作りました。
base64_embed.rb
takuya@air:~/Desktop$ ruby base64_embed.rb profile.gif data:image/gif;base64,R0lGODlhQABAAPcAAFtRTd1ZO0JZZUBBRVFYX1RXTlSGpVaSumBRS4VwUF
使い方
次のようにして使います。
ruby base64_embed.rb --help Usage: base64_embed [options] --tag=[TAG] タグに埋め込んだ状態で出力する.デフォルト<img>(MIME判別) --css CSS埋め込み用に展開する .url("data:image/png;base64,XXXX")
img タグを出力する
takuya@air:~/Desktop$ ruby base64_embed.rb --tag profile.gif <img src="data:image/gif;base64,R0lGODlhQABAAPcAAFtRTd1ZO0JZZUBBRVF....
objectタグを出力する
takuya@air:~/Desktop$ ruby base64_embed.rb --tag=object profile.gif <object data='data:image/gif;base64,R0lGODlhQABAAPcAAFtRTd1ZO0JZZUBBRVFYX....
CSS埋め込み用に url()で出力する
takuya@air:~/Desktop$ruby base64_embed.rb --css profile.gif url("data:image/gif;base64,R0lGODlhQABAAPcAAFtRTd1ZO...
ネットワーク上のファイルをエンコードする
takuya@air:~/Desktop$ curl http://www.st-hatena.com/users/ta/takuya_1st/profile.gif | ruby base64_embed.rb
以上を使ってサクッと生成
DataURIはとっても便利なので、サクッと作ってサクッと貼り付けちゃいましょう。
base64_embed.rb
#!/usr/bin/env ruby
require 'base64'require 'rubygems'require 'mime/types'require 'optparse'
##初期化with=false####引数処理opt = OptionParser.newopt.on( "--tag=[TAG]", case arg when nil with = "img" when false with = false else with = arg end }
opt.parse!(ARGV)
###メイン処理if with != false then with = "script" if data_type =~/script/iend
##出力処理case with when "img" puts "<img src=\"#{src_str}\" />" when "script" puts "<script src=\"#{src_str}\"></script>" when "css" puts "url(\"#{src_str}\"" when "object" puts "<object data='#{src_str}' type='#{data_type}'> </object>" when "embed" puts "<embed src='#{src_str}' type='#{data_type}' />" when false puts src_str else puts "<#{with} src=\"#{src_str}\" />"end
DataURIについて
DataURIはパフォーマンス・UPに活用されます。しかし私はもっともっと活用をしたいと思っています。というのも、HTML利点が外部ファイルの埋め込みであるのに、欠点も外部ファイルの埋め込みだからです。
外部ファイルの埋め込みがHTMLで特長なのですが、HTMLファイルの受け渡しや管理がとても不便なのです。背景やスライスされた画像は単体ではもはや何が何だか分からないファイルになっています。そこで、DataURIを使って一つにまとめ、管理を簡単にしたいのです。
つまり、私にとってDataURIはパフォーマンスより、管理コストの軽減が魅力です。
できる限り埋め込んじゃえ
script だって CSSだってとりあえず埋め込んじゃえばいいんです。
js を埋め込む
Scriptタグだって、ちゃんとdata プロトコルで扱える。
<script src="data:;base64,ZG9jdW1lbnQud3JpdGU......5cbjxcL2Rpdj5cbicpCg=="></script>
これは先程のRubyスクリプトで以下のようにして作ることが出来る。
curl https://gist.github.com/3381695.js | ruby base64_embed.rb --tag=script | pbcopy
こうやってHTMLファイルが依存するファイルを減らす。
昔のページとか、サンプル、作りおきのスクリプトをこうやって一枚にまとめておくと、とっても管理が便利。
受託のWEB屋さんなど、ページを納品することが多い人にもオススメですよ。
MHTML形式とDataURIでファイルを減らしましょう。
ファイルが多いとどうしてもバックアップや管理コストが増える。しかも、なんちゃって管理者やFTPだけは使える発注元が profile.png.bakやらprofile.png.2012-08-18.bak, profile.png-1 みたいなクソファイルをアホほど作りFTPサーバーを溢れさせてたりするので、もうね、初めからファイルを触らせなければいいんだよ。*1
完全にアーカイブでいいんだって時は
MHTML形式でオレオレ魚拓を作るのがオススメ。コッチもちゃんと作ってある。
MHT(mhtml)ファイルを作るrubyパッケージ作った - ブックマクロ開発に
data uri形式についての参考資料
DataURI Schemeは文字数制限があるってことになってるんだけど、そう簡単にはエラーにならない。最大値をそのうち調べないといけない。
IEは9以上で使える。ただしIE9では一部制限掛かってる。
http://tools.ietf.org/html/rfc2397
http://en.wikipedia.org/wiki/Data_URI_scheme
https://developer.mozilla.org/en-US/docs/data_URIs?redirectlocale=en-US&redirectslug=The_data_URL_scheme
http://www-archive.mozilla.org/quality/networking/testing/datatests.html