#Data URI Scheme#
data:text/html,<html>hoge</html>
ちょっと上の文字列をアドレスバーにコピペして移動してみて下さい、大丈夫です怪しいものではありません。
URIスキームは一見ただの文字列ですが、ページに画像やhtmlを埋め込めるすごいやつです。
実はChrome等のブラウザではアドレスバーに入力するだけでそのデータを閲覧することができます、即ちブラウザのブックマークにhtmlファイルを保存できるということです。
容量に制限がありますが、オフラインでも使用できますしブックマークの同期ができているならスマホからでも開くことができます。
CSSもJavaScriptもhtmlに埋め込めばしっかり動作します。
#URIスキームの作り方#
data:text/html,のあとにhtmlの中身をくっつければURIスキームとして扱われます。
例えば以下の文字列をアドレスバーに入力し移動すると、簡単なメモ帳が開きます。
data:text/html,<html contenteditable>
ただしCSS等で使われる#はコメントとして扱われるようなのでBase64に変換するほうが良いでしょう。
URIスキームでBase64を扱う場合、data:text/html;base64,のあとにBase64に変換したhtmlをくっつけます。
上のメモ帳をBase64版にした場合、次のようになります。
data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPg==
#Base64への変換の仕方#
ではBase64へはどうしたら変換できるでしょう?
JavaScriptの場合、次の関数で可能です。
const encode = text => {
return btoa(unescape(encodeURIComponent(text)))
}
逆にBase64から普通の文字列に戻す場合は次の関数でできます。
const decode = base64 => {
return decodeURIComponent(escape(atob(base64)))
}
#Base64エン/デコードサイト#
しかしJavaScriptをブラウザ上で実行できるとは言え、いちいちコピペするのも大変なのでWebページとして公開します。
・Base64 En/Decoder
これもひとつのhtmlとして出来てるのでURIスキーム化してブックマークに保存できます。
是非ご利用ください。