Bootstrap3のダミー画像作成JS『holder.js』

Bootstrap3に使われてるダミー画像をリアルタイムに作成する『holder.js』について。今回、短時間でモバイルファーストのページを作りたくてBootstrap3を使うことに。

そのページはiPhoneアプリを公開する時に必ず必要なサポートページ。最初はアクセス規模が分からないので、専用サイトではなくブログ記事として簡易的に作りました。しかし、いざアプリを公開すると思ったよりずっとアクセスが多いことが判明。しかも殆ど海外からのアクセスで、ベースが日本語の当サイトでは恐らく文字化けして見えているハズです。

そんなわけでiPhoneからのアクセスも多いのでモバイルファーストのBootstrap3で作り直し。カルーセルのサンプルをベースにしたので1日で作れました。

リアルタイムにダミー画像を作成

HTMLを見るとダミー画像にはこんな記述が。

<img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#fff/text:First slide" alt="First slide">

なんじゃこりゃって訳ですが、srcに指定されているのはdataスキーム、data-srcはholder.jsへのオプション値です。ブラウザのウィンドウ幅を変えると動的に画像内の文字が変化します。リサイズ毎に画像が再作成されます。

作成される画像はPNGフォーマットですが、ファイルではなく直接データとしてsrc属性に代入されます。実はsrc属性にはファイル以外に直接画像データを記述できるdataスキームを指定できます。

dataスキーム

試しに、このpngファイルのデータを指定すると、こんな感じになります。64x64pxで1.73kbです。

<img src="data:image/png;base64,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" alt="PlusBlog Logo" />

base64変換はPHPならこんな感じで。

<img src="data:image/png;base64,<?php echo base64_encode(file_get_contents('logo.png')); ?>" alt="PlusBlog Logo" />

dataスキームはIE8からの対応で、画像のHTTPリクエストを減らせるメリット、キャッシュが効かなくなるデメリットなど、使い所が難しいのですが、HTML5のcanvasで動的に作成した画像を表示するのに使えます。holder.jsもcanvasでダミー画像を作成後にtoDataURL()メソッドでpngを出力しています。