GDD11JP DevQuiz解答晒し祭り：WebGame用ChromeExtension 意味なく公開

GDD


巷で流行っているそうですので、わたくしも晒します。


分野別クイズはWebGameとGoをやりました。
スライドパズルは519個しか解けませんでした。幅優先検索をスタートとゴールから実施して、マンハッタン距離（壁無視）でコストを出して、コストが低いものから解くようにしたという感じです。60秒で解けないものはあきらめるという作戦で、一晩動かしてそんなスコアです。よってこれは晒さない。


TF枠で当選していたこともあり、スライドパズルはその辺でやめてしまいました。
TF枠なんで当選したのかは等の本人も首をかしげる状態です。何基準なのでしょうか。

GO!

GOははじめて書きましたが、こんなのでいいのでしょうかね。。

package main

import (
    "fmt"
    "io"
    "strings"
    "image"
    _ "image/png"
)

func CountColor(png io.Reader) int {
    img, _, _ := image.Decode(png)
    rect := img.Bounds() //Rectangle

    //Colorを記憶するMap
    colors := make(map[string] string)

    for x := 0; x < rect.Max.X ; x++ {
      for y := 0; y < rect.Max.Y; y++  {
        //fmt.Println(img.At(x, 3))
        r, g, b, _ := img.At(x, y).RGBA()
        srtRgb := string(r) + "," + string(g) + "," + string(b)
        colors[srtRgb] = srtRgb
      }
    }
    //fmt.Println(len(colors))
    return len(colors)
}


コンパイラのインポートエラーがよくわからなかった（_ "image/png"）のところ。今もちょっと良くわかってないｗ
あと、Try&Errするのに、以下が役に立ちました。特に環境がなくてもブラウザで動かせたので。
http://golang.org/doc/play/

Web Game

ChromeExtensionは以下に公開してみました
https://chrome.google.com/webstore/detail/hchabofhnbmpbeoocneocmlehpcflmbh?hl=ja

中身は結構かんたんです。
こんなの書きました。jqueryを使ってます。

solver.js

//[id1, id2]を格納していく。キーはcolorの値を使ったHash
var colors = {};

//カードを1枚ずつあけていく処理
var elements = $("div.card");
elements.each(function(){
	var self = $(this);
	self.click(function(){
		var _color = self.css("backgroundColor");
		var _id = self.attr("id");
		console.log("id=" + _id + ", color=" + _color);
		if (!colors[_color]) {
			colors[_color] = [];
		}
		colors[_color].push(_id);
	});
	clickEvByDom(this);
});

//console.log(colors);

//同じ色ごとにクリックしていく
for (var arr in colors) {
	console.log("arr:" + arr);
	elem0 = $("#" + colors[arr][0]).get(0);
	elem1 = $("#" + colors[arr][1]).get(0);
	clickEvByDom(elem0);
	clickEvByDom(elem0);
	clickEvByDom(elem1);
}

//jQueryのClickではNGなのでDOM経由でClickする
function clickEvByDom(elem) {
	var clickEv = document.createEvent("MouseEvents");
	clickEv.initEvent("click", false, true);
	elem.dispatchEvent(clickEv);	
}

とりあえず、1枚ずつあけていって色とIDを記憶して、同じ色同士をクリックしていくという単純な戦略です。この程度であっさりといけてしまった。


これをExtensionとして組み込むために、マニフェストを書きます。

{
  "name": "GDD11JP Web Game Solver",
  "version": "1.0",
  "description": "google developer day 2011 jp Web Game solver.",
  "content_scripts": [
    {
      "matches": [
        "http://gdd-2011-quiz-japan.appspot.com/webgame/problem*"
      ],
      "js": [
        "jquery-1.4.4.min.js",
        "solver.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}

JSON形式ですね。ポイントは

    • matchesのところに、実行したいURLを指定
    • jsのところに、jquery.js -> solver.js　の順番で指定（逆は駄目）

ぐらいですね。
マニフェスト書く上での注意点は、コメントアウトしては駄目とか、余分なカンマを打たないとかですね。

実際にローカルで作るときは、マニフェストとJSを同じフォルダに置いてchrome://extensions/ で、デベロッパーモードにして、そのフォルダ読み込めば動きます。Greasemonkeyと違って、Extensionを修正したら、chrome://extensions/再読み込みしないと駄目で、これをいちいち手でやるのが面倒ではありますが、結構手軽に作れますね。



それにしても、Chrome Web Storeに公開するときに、1280x800のスクリーンショットが必須とか、128x128のアイコンが必須とか、メンドクサイなと思います。デフォルトの何かを提供してくれたり、適当にリサイズしてくれればうれしいんですけれどね。こんなことぼやくとガイドラインに反するって怒られたりして。。。