オフラインで現れる恐竜をプロ生ちゃんにする

この記事は、プロ生ちゃん Advent Calendar 2015　の 22日めです。

qiita.com

オフラインで現れるアイツ

「オフラインで現れる恐竜ゲーム」をご存知でしょうか。Google Chrome を、ネットワークに接続できない状態でページを開くと、恐竜が表示され、キーボードを押すとゲームが始まる、という隠し機能のことです。

f:id:takemaruhirai:20151222222338p:plain

これはこれで楽しいのですが、実は、PCを機内モードにすると、オフラインと判定される際にちょっとしたタイムラグがあることを発見してしまいました。つまり、

① 機内モードにする

f:id:takemaruhirai:20151222224437p:plain:w500

② どこかページを開く（アクセスできない、と出る）

f:id:takemaruhirai:20151223050934p:plain:w500

③ 数秒、時間がかかる

④ オフラインモードになる（恐竜が表示される）

f:id:takemaruhirai:20151223050905p:plain:w500

これはチャンスです！

このスキに、恐竜をプロ生ちゃんに変えてしまいましょう！

f:id:takemaruhirai:20151223063042p:plain

プロ生ちゃんスプライトを用意する

恐竜モードの画面を調べると、恐竜ゲームのスプライトが base64 にエンコードされた画像として埋め込まれていることが分かります。

f:id:takemaruhirai:20151222223025p:plain

画像のソースが src="data:image/png;base64,iVBOR..." となっていますね。

実際にこの画像データを取り出してみると、下のようなPNG画像になります。

f:id:takemaruhirai:20151222223217p:plain

この画像をベースに、プロ生ちゃんのドット絵を使って同じような画像を作ってみましょう。

こんなかんじ。

f:id:takemaruhirai:20151223063115p:plain

それを、base64 方式でエンコードします。 Ubuntu では、とくになにもインストールせず、base64 コマンドが使えます。

$ base64 probamachan-offline.png > base64.txt

テキストファイルの中身に、エンコードされた画像が文字列として入ってきますので、これを IMG タグの src属性に、

<img src="data:image/png;base64,(エンコードされた文字列)">

と入れてやればOKです。

あとは、JavaScript で DOM を操作し、恐竜のスプライトを指定している IMG タグを消して、同じID のプロ生ちゃんスプライトのIMGタグを挿入してやりましょう。これを、ブックマークレットにします。ブックマークレットの中身は、以下のとおりです。

javascript:var p=document.getElementById('offline-resources');var d=p.children[0];p.removeChild(d);var a=document.createElement('img');a.class='added';a.id='offline-resources-1x';a.jstcache='0';a.src='data:image/png;base64,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';p.appendChild(a);