miauのブログ

はてなダイアリー「miauの避難所」をはてなブログに移行しました

Google Code Jam の解法をページ内に表示する bookmarklet

JavaScript Algorithm

Google Code Jam 2011 の予選も近くなってきた（※日本時間の 2011-05-07 8:00 から）なので、その前に GCJ ネタをいくつか消化しておこうかと。一昨年の反省のつづき＆去年の反省もあるんですが、まずは表題の bookmarklet について。

2011-06-23 追記

GAE でソースを閲覧するアプリケーションを作っている方が！

今のところマイナー言語の解法を探すのには向きませんが、Small/Large のソースコードが同じだったらまとめてくれたり、親切な感じです。

GCJ の解法ダウンロードについて

GCJ では

の「solutions」から他の参加者の解法がダウンロードできるようになっており、上位陣がどういう解き方をしたか見たいような場合に便利です。

また、自分が使っている／気になっている言語でどういう解き方があるんだろう？と気になった場合は、言語ごとの統計ページが

にあるので、ここの「Language popularity」または「Find solutions」から気になる言語で解いている人を探して、参加者別ページから解法をダウンロードできます。（デフォルトでは最新のコンテストのデータが表示されるので、過去ぶんを見たい場合は右上から年度を選んでください。）

ただ、どちらもいちいち .zip をダウンロード→展開しないと内容を見られないのがすごく不便で。少しでも楽に解法を見られるようにするために、ページ内に .zip ファイルの内容を表示する bookmarklet を作ってみました。

完成品

使い方

Google Code Jam 公式ページのスコアボード、Code Jam Language Stats の参加者別ページのどちらかを表示した状態で bookmarklet を実行すると、ダウンロードリンクの横に「Show」というリンクが表示されます。（ついでに画面下部にファイル表示用の領域を作成し、スクリプトの読み込みを行います。）

「Show」を押下すると、画面下部に .zip の内容が表示されるはずです。.zip 内にさらに .zip があった場合は、それも展開しています。

スコアボードページでは順位の切り替えを行うと「Show」のリンクが消えてしまいますので、切り替え後に再度 bookmarklet を実行してください。

テストに使ったページ

実装について

.zip の解凍について

.zip を一度解凍する必要があるのでブラウザのエクステンションで作るしかないかなーと思っていたんですが、

の zip.js というのを発見して、bookmarklet で実現できてしまいました。JavaScript だけでここまでできるものなんですね・・・。

ちなみに「bookmarklet から zip.js を直接読み込んでいいですか？」的な質問をしたのですが、質問後すぐに github に上げてくださいましたので、zip.js は github の master のものを利用しています。

あとここのサンプルコードを結構流用していたりして・・・今回の bookmarklet はほとんどこの zip.js のおかげです。

クロスドメインの問題

.zip ファイルのコンテンツは XHR で取得しています。.zip ファイルは code.google.com にアップロードされているので Google Code Jam の公式ページからは問題なく取得できますが、統計ページは別ドメインなので Same origin policy により素直にダウンロードできません。

ちょっと調べてみると、

とのことで、「Access-Control-Allow-Origin: *」を付加する proxy を介して取得すればいいみたいです。

ここで紹介されている proxy をそのまま利用させてもらうのもなんだし、GAE とかで proxy 書こうかなと思っていたんですが、すでに作っている方がいて。

今回はこちら（ http://allow-any-origin.appspot.com/ ）を利用させていただいています。

コードの表示

最近だと SyntaxHighlighter のほうが評判がいいのですが、言語に応じて自分でハイライト指定しないといけないのが嫌だったので、このあたりを自動でやってくれる google-code-prettify を使っています。

zip.js のサンプルページでは

  • 画像の場合は img で表示
  • それ以外の場合は iframe で表示

されていたのですが、Piet とかで書かれていない限りは画像の表示は不要ですし、iframe だとコードが長いときにスクロールするのが面倒なのですべて pre で埋め込むようにしています。

iframe であれば文字コードの自動判別等もやってくれそうですが、pre ではやってくれませんので、ソースコードに日本語等が含まれていると文字化けしてしまいます。（例: http://www.go-hero.net/jam/09/name/LayCurse の最後のやつとか）。ここは要改善かもしれません。

あと統計ページで横幅いっぱいになったときにスクロールが不要なよう、CSS に

pre { word-wrap: break-word; }

を追加していたりします。

（追記）決まり文句

書くの忘れてましたが、もっと簡単に .zip を簡単に閲覧できる方法があったら教えて下さいませ。