Webブラウザのブックマークをストレージとして使ってみた

はじめに

Data URIやBase64に関するメモ。

Data URIスキーム

世の中には『Data URI』なるものが存在するらしい。

データURIスキーム(英語: data URI scheme)とは、あたかも外部リソースを読み込むのと同じように、ウェブページにインラインにデータを埋めこむ手段を提供するURIスキームである。
Data URI scheme - Wikipediaより

data: スキームが先頭についた URL であるデータ URL を使うと、コンテンツ制作者は小さなファイルをインラインで文書に埋め込むことができます。
データ URL | MDNより

技術 役割
URL データの場所を示す
URI データ本体を示す

インラインイメージで使われるもの、と言ったほうがわかりやすいかも。

data:[<mediatype>][;base64][;charset=hoge],<data>

というように構成され、HTML内で以下のように用いられます。

<script src="data:text/javascript;base64;charset=utf-8,YWxlcnQoIkhlbGxvLCBXb3JsZCEiKQo="></script>

ちなみに上記は、alert("Hello, World!")するもの。

また、Data URIもURLと同じようにWebブラウザでアクセスすることもできます。

data:text/html,<html contenteditable=true>

ちなみに上記は、Webブラウザをメモ帳にする、といわれるもの。

データの中で『#』を使う場合などはエスケープが必要になるらしいです。

data:text/html,<p>hoge#huga  
// うまくいかない  
data:text/html,%3Cp%3Ehoge%23huga  
// うまくいく(しかし見づらい)

HTMLを例に出しましたが、画像・音声・動画などもURIに埋め込むことができます。
ただその場合は、Base64というものを用いてエンコードする必要があります。

Base64

Base64は、データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式である。
Base64 - Wikipediaより

画像などのデータは文字ではないので、Base64エンコードして文字だけにすることで、URIとして使えるようにします。

JavaScriptだけでもエンコードできなくもないらしいですが、面倒なのでターミナル上で行います。

base64 hoge.jpg  
# または  
cat hoge.jpg | base64  

# ちなみにデコードは-Dを使う  
echo "Hello" | base64  
# SGVsbG8K  
echo "Hello" | base64 | base64 -D  
# Hello

(この余白は実際のデータを書くには狭すぎる)。

実践

画像などのData URIもWebブラウザのアドレスバーに入力することで、閲覧することができます。
そのページをブックマークすればOK。

また、ブックマークマネージャから保存するのもよし。
HTMLファイルを作成し、それをブックマークマネージャでインポートする、という方法でもよし。

あとは必要なときにそのブックマークを開くだけ!

問題点

データ量が増える

Base64エンコードするとデータ量が増えます(約138%)。

Webブラウザが落ちる

いい気になって数MBのData URIをアドレスバーに貼り付けたが最後、Webブラウザが落ちます。

読み込みが遅い

運良くWebブラウザが落ちなかったとしても、読み込みが遅いです。

HTMLでは一部のJavaScriptが使えない

localStorageを使おうとしたらSecurityError: The operation is insecure.と怒られてしまいました。

ブックマークの名前が唯一の判別方法

画像データをいくつかブックマークしたとしても、プレビュー機能がないため、ブックマークの名前が唯一の判別方法になります。

おわりに

ブックマークが自動同期されるストレージになるかも!と思ったが、全然そんなことはありませんでした。

ローカルにHTMLファイルを置いておくのが面倒なときなどは役立つかもしれませんが。

長いURIで、Google Chromeでは応答しなくなったのに対し、Firefoxは落ちずに耐えました。
「Firefoxは5MB以上の長いURIにも対応!」「みんなでFirefoxを使おう!」
なんの自慢にもならですよね…。