一発だけ簡単なタスクをこなす動的コンテンツを data URL の形にしてブックマークに入れておくと便利なことがあります。

簡単なページ遷移 HTML + JavaScript を data URL にする

例えば以下の HTML + JavaScript は、アクセスすると今日の日付（例えば「12月6日」など）の Wikipedia ページへ遷移するものです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var now = new Date();
var url = "https://ja.wikipedia.org/wiki/"+(now.getMonth()+1)+"%E6%9C%88"+now.getDate()+"%E6%97%A5";
location.href = url;
</script>
</head>
<body></body>

このスクリプトを data URL にしてみましょう。

data:text/html, <!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var now = new Date();var url = "https://ja.wikipedia.org/wiki/" + (now.getMonth()+1)+"%E6%9C%88"+now.getDate()+"%E6%97%A5";location.href = url;</script></head><body></body>

画像などを data URL で表現するときには Base64 形式がよく使われますが、今回は単純なテキストのみなので、そのまま記載してあります。

この data URL をブラウザの URL 欄に入力すると、すぐさま Wikipedia の「MM月DD日」のページに遷移することでしょう。

ブックマークレットとの違い

ブックマークレットとの違いが気になった方もいるかもしれません。

ブックマークレットは現在表示しているページへの JavaScript コードの埋め込みなので、HTML以外の（DOM構造がない）画像ファイルなどを現在のブラウザ上で開いていた場合の動作や、そのブックマークレットを「新規ウィンドウで表示」といった操作はできない（ブラウザによってはできる場合もあり）
上記の例は描画にフォーカスを当てなかったものの、data URL であればボタンなどの描画も可能

画面を描画する例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>今日のWikipedia</title>
<style type="text/css">
button { width: 100%; font-size: 2em; }
</style>
</head><body>
<button id="go_to_today">今日の記事</button>
<button id="go_to_yesterday">昨日の記事</button>
<script type="text/javascript">
var now = new Date();
var today_url = "https://ja.wikipedia.org/wiki/" + (now.getMonth()+1)+"%E6%9C%88"+now.getDate()+"%E6%97%A5";

var yesterday = new Date( now.getTime() - 86400 * 1000 );
var yesterday_url = "https://ja.wikipedia.org/wiki/" + (yesterday.getMonth()+1)+"%E6%9C%88"+yesterday.getDate()+"%E6%97%A5";

document.getElementById("go_to_today").addEventListener("click", ()=>{location.href=today_url;});
document.getElementById("go_to_yesterday").addEventListener("click", ()=>{location.href=yesterday_url;});
</script>
</body><html>

「今日の記事」「昨日の記事」という2つのボタンを表示して、どちらの記事を表示するか選ぶことができます。

data:text/html, <!DOCTYPE html><html><head><meta charset="UTF-8"><title>今日のWikipedia</title><style type="text/css">button { width: 100%; font-size: 2em; }</style></head><body><button id="go_to_today">今日の記事</button><button id="go_to_yesterday">昨日の記事</button><script type="text/javascript">var now = new Date();var today_url = "https://ja.wikipedia.org/wiki/" + (now.getMonth()+1)+"%E6%9C%88"+now.getDate()+"%E6%97%A5";var yesterday = new Date( now.getTime() - 86400 * 1000 );var yesterday_url = "https://ja.wikipedia.org/wiki/" + (yesterday.getMonth()+1)+"%E6%9C%88"+yesterday.getDate()+"%E6%97%A5";document.getElementById("go_to_today").addEventListener("click", ()=>{location.href=today_url;});document.getElementById("go_to_yesterday").addEventListener("click", ()=>{location.href=yesterday_url;});</script></body><html>

今回の例は遷移前は完全にローカルのみで完結させましたが、http や https の URL を使って外部から画像や JavaScript ライブラリを取ってくることもできます。

簡単な動的コンテンツを data URL にしてブックマークに入れて使う

簡単なページ遷移 HTML + JavaScript を data URL にする

ブックマークレットとの違い