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



この記事は、プロ生ちゃん 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);

実行手順

では、実行手順です。

【事前】 ブックマークレットを仕込んでおく

f:id:takemaruhirai:20151223051113p:plain:w500

機内モードにする

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

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

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

数秒、時間がかかる ので、このスキにブックマークレットをクリック

f:id:takemaruhirai:20151223051129p:plain:w500

④ オフラインモードになる(プロ生ちゃんが表示される)

f:id:takemaruhirai:20151223062411p:plain:w500

さあ、何かキーを押してください。プロ生ちゃんゲームの始まりです!

f:id:takemaruhirai:20151222225338p:plain:w500

f:id:takemaruhirai:20151222225345p:plain:w500

f:id:takemaruhirai:20151222225349p:plain:w500

デモ動画

こちらからどうぞ

さいごに

この動作確認は、Windows 10 にアップデートされてしまった PC で、機内モード使用という、とても狭い範囲でしか行っていません。 普通にオフラインで行おうとしても、タイムラグがなく難しいです。**LANケーブルを抜き、Wi-Fiを無効にした環境ではダメでした。

なお、私のPCでは機内モードにするとネットワークに不具合が出ることが多く、再起動を頻繁にせねばならず面倒です。誰か、機内モード以外でこれを実行できる方法をご存知でしたら教えてください。

ではでは。

広告を非表示にする