HTML と JavaScript で簡単な文字数カウントプログラムとか作ったりするのですが、保存場所に時々困ったりします。
昨今のブラウザは複数マシンでブックマークが同期されるわけですが、ローカルに HTML ファイルを保存していると他のマシンで使えないので外部サーバに置くことになるものの、極々私的なものだと色々面倒だったりもします。
ならブックマーク自体に HTML ファイルを入れちゃえばいいかと思って、data スキームの URL を作ればいいかと思ったんですが、そういうツールって意外に無かったりするんですよね。検索すると習作ウェブアプリみたいなのがひっかかったりするんですが、極々私的なものだと不明な相手にデータを送信するのも気が引けるというか。業務上だとなおさらですよね。
というわけで mkdataurl という小さな Perl プログラムを書いてみました。
# !/usr/bin/perl
# data:[<MIME-type>][;charset=<encoding>][;base64],<data>
use strict;
use warnings;
use MIME::Base64;
use Getopt::Long qw(:config posix_default no_ignore_case bundling auto_help);;
use Pod::Usage qw(pod2usage);
GetOptions(
\ my %options => (
"mime=s",
"charset=s",
"single",
"clipboard"
)
);
if ( !@ARGV ) {
pod2usage(0);
}
my $file = shift;
if ( !-f $file ) {
die "file is not found\n";
}
my $mime_type = $options{mime} || "text/plain";
my $charset = $options{charset} || '';
my $base64_string = encode_base64(slurp($file));
if ( $options{single} ) {
$base64_string =~ s/\n//g;
}
my $url = "data:$mime_type;" . ($charset ? "charset=$charset;" : "") . ";base64,$base64_string";
if ( $options{clipboard} ) {
system qq{pbcopy <<<"$url"};
} else {
print "$url\n";
}
sub slurp {
my $file = shift;
open my $fh, '<', $file;
my $buffer = do { local $/; <$fh>; };
close $fh;
return $buffer;
}
=pod
=head1 NAME
mkdataurl - make data scheme url
=head1 SYNOPSIS
mkdataurl [--mime=MIME_TYPE] [--charset=CHARSET] [--single] [--clipboard] \
FILENAME
=cut
Perl 5.8 以上の標準モジュールのみに依存しているので、Perl がある環境であればどこでも動くと思います。
たいていは作ったあとすぐにクリップボードにコピーするので、Mac でそれが一気にできる --clipboard オプションも加えてみました。Linux X.org であれば xsel、Windows であれば clip の各コマンドで似たようなことができるでしょう。
HTML ファイルの img 要素の src 属性などに載せる場合は改行が入った Base64 文字列のほうが好まれますが、ブックマークに入れるときは一行じゃなければならないらしいので一行強制オプション --single を入れてあります。これを指定しなければ行分割されます。
JavaScript は HTML ファイルの script 要素内に書けばいいし、モダンなライブラリは CDN から取ってこれるのでこれもまた問題はないでしょう（完全オフラインで使いたいという場合は別途考えましょう）。
ブックマーク用だけでなく、HTTP リクエスト削減用に画像を HTML ファイルや CSS ファイルに埋め込んだりといった用途に活用できます。CSS 界隈だとスプライトという手法もありますが、data スキームのほうが使い勝手がいいかなぁと思ったりも。
MIMEタイプの類推は深く考えると面倒なので、ここでは自分で指定することにしてあります。
Wikipedia によると正式名称は「Data URI Scheme」らしいですが、私は言葉にするときは「データスキームのURL」といつも言っています。Location ではないとして Name なのかとか、考えだすと夜も眠れないのが URI …なのかな。