それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

DataURI Shemeを作るスクリプト欲しいね。(作った。

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 

クリップボードに送る

OSX の場合はpbcopy が使えます。

takuya@air:~/Desktop$  ruby base64_embed.rb |pbcopy

以上を使ってサクッと生成

DataURIはとっても便利なので、サクッと作ってサクッと貼り付けちゃいましょう。

base64_embed.rb




#!/usr/bin/env ruby

require 'base64'
require 'rubygems'
require 'mime/types'
require 'optparse'

##初期化
with=false
####引数処理
opt = OptionParser.new
opt.on(
"--tag=[TAG]",
"タグに埋め込んだ状態で出力する.デフォルト<img>(MIME判別) "){|arg|
case arg
when nil
with = "img"
when false
with = false
else
with = arg
end
}

opt.on("--css", "CSS埋め込み用に展開する .url(\"data:image/png;base64,XXXX\") "){ |arg| with = "css"|| arg }
opt.parse!(ARGV)

###メイン処理
data_type = MIME::Types.type_for(ARGF.path).first.to_s
if with != false then
with = "script" if data_type =~/script/i
with = "img" if data_type =~/image/i and not with=="css"
#with = "embed" if data_type =~/flash/i # no browser support swf in data uri scheme
with = "svg" if data_type =~/svg/i
end

data_str = Base64.encode64(ARGF.read).gsub /\n/,""
src_str = "data:#{data_type};base64,#{data_str}"

##出力処理
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

*1:今時FTPも無いと思うんですけど・・・昔覚えた知識のまま進歩しないんだ。でも彼らの無精のお陰でWEB受託屋が潤ってるらしいです。