Data URL Scheme

課題でウェブページを作れとな？
そんなの簡単っていうwwwwwwMarkdownで書いてHTML吐いてCSSで適当に飾っとけばいいっていうwwwwwwwww

しかし！以下の制約があるのだ！

• HTMLのソースコードはPDFファイルに貼付けなければいけない
• ウェブページは自分以外でも閲覧可能でなければいけない

この2つの制約を守る限り、画像をHTMLで貼るにはどこか別のサーバにアップロードしなければいけない。
<img src="image.jpg">と書いたってPDFには単一のHTMLしか貼り付けられない。

実はHTMLやCSSにはインラインで画像などのバイナリを書けるData URL Schemeという仕組みがある。
これを使えばbackground-imageも<img>も単一のHTMLファイルでいけるのだ。

とりあえず、使ってみることにしよう。
まずは、なんでもいいので適当な画像を用意する。

そして、その画像をbase64でエンコードする。
base64でエンコードするときはbase64コマンドが便利。
ただし、勝手に改行してしまうので、改行しないように-w0とオプションをつけないといけない。

base64コマンドは結果を標準出力に吐き出すので、それをリダイレクトしてファイルに保存している。

そして、base64化した画像ファイルをHTMLファイルに書く。

これで単一のHTMLファイルでもこうやって画像を貼ることができた。

ちなみにこの方法で複数の画像を扱うとソースコードの長さがすごいことになって、これをPDFファイルに貼り付けるとファイルサイズがとんでもないことになるので気をつけようね。