GDDの詳細はこちら：http://www.google.co.jp/intl/ja/events/developerday/2011/tokyo/index.html

どっかにスライドまとまってないかな・・・

基調講演

Webの歴史からGoogleの色んな製品紹介的な感じ。個人的に面白かったのは下記。

・アンドロイド
　　-アンドロイドビーム：NFCで簡単に情報共有
　　-顔認識アンロック：パスワード不要。便利
・Chrome Dev Tool
　　-後述。
・Chrome frame
　　→IEでもクロームの機能が使えるプラグイン。IEユーザを切り捨てずにHTML5の機能をゴリゴリ使える。使う時はIEの人はこのプラグイン入れてね的な表示を出すんやろなあ。

HTML5最前線

HTML5でこんなことできます的な。知らんのが多くて面白かった。

・アニメーション（参考サイト）
・ページがアクティブかどうかのリスナー？（参考サイト）
・プリレンダー（参考サイト）
・オンラインかどうかの判定、リスナー
　　→navigato.onLineで判定できて、window.addEventLister("online", hoge)とかもできるらしい
・Web Intent
　　→よくわからんかったけどサービスをまたいで画像を共有できる的な
・オーディオ＆ビデオ
　　→window.navigator.getUserMedia
・フルスクリーン
　　→特定のDivをフルスクリーンにするとか。リスナーもあったかな
・Web RTC（Real Time Communication）
　　→なんとHTMLでビデオ会議ができます
・HTML5Rocksというサイトにいっぱい情報が載ってるらしい

Chrome Developer Tool

ChromeのDev Toolでこんなことできます的な。これも知らんのがいっぱいあった。

・実はウェブアプリ
　　→Dev Toolの中身をDev Toolで見られる
・CSSのパラメータを上下キーでいじれる＆Shift+上下キーで10ずついじれる
・Styles横の+ボタンで選択中のクラスにスタイルをつけられる
・その右のボタンでホバー状態とかを作れる
・右下の歯車アイコンで細かい設定ができる
・consoleコマンドはFirebug Commandline APIがほぼ全部使える
　　→dir()とか$0とか地味に便利そう
・リロードなしでCSSはもちろんjsもいじって実行できる
・その場でいじったjsやcssをそのまま保存できる

Googleのクライシスレスポンス

3月11日の後、何をしたか。これから何をすべきか。一番気持ちがこもってた。Hack for Japanに入りたくなった。

・何が起きてるかを知る、それを知らせる。一括りに被災地と言っても車で３０分も走れば全く状況が変わる。
・スキルを活かす。でもスキルありきではない。キレイなシステムを作るより中古PCのセットアップが喜ばれるところもある。
・汎用性はいらない。ミニマルに作る。
・速く出してオープンにする。２週間で必要なものは変わるし、オープンにすれば誰かが改善してくれるかもしれない。
・やったこと、考えたことを記録する。明日役立つかもしれないし、３００年後に役立つかもしれない。伝えることが大事。

クラウドコンパイラ

Chromiumのコンパイル時間を大幅削減するために、クライド上でコンパイル。細かいとこはよくわからんかった。

・ビルドにめっちゃ時間かかってビルドしてる間にどんどん新しいコミットがやってくる。
　　→並列処理をしたらある程度速くなるけど限界がある。
　　→PCを増やしたらある程度速くなるけどセットアップ大変。
　　→じゃあクラウドでやっちゃえ！
・クラウドにすると、
　　-無限にPCが使える
　　-他人のキャッシュを使える
　　→速い！
・ネットワークの問題。タイムアウトどうする？
　　-短すぎるとちゃんとやってんのにまた投げちゃう。
　　-長すぎると一瞬で終わるはずのやつを待ち続けちゃう。
　　→ローカルとリモート同時に走らせて速く終わった方を使う！

グーグルエンジニアの日常

今年の３月にGoogleに転職したYuguiさんのGoogle生活。

・入社して半年
　　-最初の一ヶ月はひたすら慣れることに専念
　　-３ヶ月目にアメリカ本社で研修
　　-半年位で一人前のGoogle社員
・全てのコードが一つのリポジトリに入っていて、どのコードでも読める
・１つのビルドシステムを使っているので環境作るのに苦労することもあんまりない
・オープンソース界で普通のことがこの規模で普通にできているのはGoogleの凄さ

HTML5 vs Flash

Youtube高速化の事例に見る、HTML5 vs Flashの話。

・Flash
　　-Content Protectionに優れてる
　　-ベンチマーク上は、実際に再生するまでの時間が短い
・HTML5
　　-タブキーで再生ボタンなどを選択できる
　　　　→アクセシビリティが高い
　　-ベンチマーク上は、表示時間が短い
・Preload
　　→imgエレメントのsrcに動画のURLを貼っておく
・Player API
・速くするために・・・
　　-キャッシュ重要
　　-lazy load

感想

実際に業務ですぐ使えるかどうかは置いといて、なんかこうトレンドに色々触れられた印象でした。

おまけ

Bar Android

基調講演

休憩スペース

スタッフの皆様

みなとみらい

YAPCについて詳しく知りたい方は本家にどうぞ。
YAPC::Asia Tokyo 2011

タイムテーブルはこちら。ほとんどのセッションのスライドも見れます。

あくまで個人的な所感であって正確なまとめではないことを予めご了承ください。Perl特有の話はよくわからんからだいぶ一般化してます。

Webアプリケーション高速化の話

スライド：http://ma.la/files/yapcasia2011

livedoor Readerの中の人が、いかにして高速化してるかの話。

・プロファイリング
　　→プロファイラでボトルネックを探す
・キャッシュ、バッチ
　　-バッチ処理で作るか、動的に作ってキャシュするか
　　-適切なレイヤーで適切なストレージを使う
　　　　-オブジェクトならmemcachedとか
　　　　-HTTPレスポンスならNginxとか
　　　　-静的コンテンツはフロントで処理する（Nginxとか）
　　-キャッシュのウォームアップ
　　　　-よく使われるデータをキャッシュに載せる
　　　　　例：RSSリーダーの未読フィード
・まとめて取得、まとめて更新
　　→ループで毎回SQLを叩くのではなく、最後に一回で叩く
・Bloom Filter
　　-trueが返ってきてもあるかないかわからないが、falseが返ってきたら絶対ない
　　-ないかもしれない大量のデータを問い合わせる前にこれを使って絶対ないやつを間引く
　　　例：リンクを全てスキャンしてRSSフィードを吐いてるページを探す

高速化っていう括りで体系的にまとめつつ色んなTipsが散りばめられてて、今回見た中で一番面白かった気がします。

新はてなダイアリーの裏側

スライド：http://www.slideshare.net/onishi/ss-9726535

はてなダイアリー大幅リニューアルの話。

・名前がはてなダイアリーからはてなブログに
・クロスドメインでiframe内のコンテンツと通信が可能
　　⇒window.postMessageを使う

技術的な話はいっぱいあったんですが、そんなんできたんや！ってなったのがクロスドメインの話でした。Chrome Extensionでやろうとして挫折した気がする。気が向いたらもっかいちゃんと調べてみよう。

Webアプリでパスワード保護はどこまでやればいいか

スライド：http://www.slideshare.net/ockeghem/how-to-guard-your-password

徳丸本の人のセキュリティの話。Perlは一切関係なかった。

・クラック手法
　　-総当り攻撃
　　-辞書攻撃
　　-ジョーアカウント探索
　　-逆走あたり攻撃⇒一番危ない
・ハッシュだからといって安全なわけではない
　　⇒saltとストレッチングは最低限やるべき

ハッシュを平文に復元する方法はいくらでもあるからできる限りのことはやっときましょうねっていうお話。なるほど。

Perlで構築された中規模サイトのDC引っ越し記録

スライド：http://dl.dropbox.com/u/224433/YAPC2011/index.html

カヤックの中規模サービス「こえ部」DC引越しのお話。

・単一障害点をなくす
・段階的に移行する
・DC間にVPNを貼る。DBのレプリケーションも可能
・音声ファイル等はNFSを利用
・ユーザはメンテに「今まで不満だった部分が解消される」ことを期待する

サーバ台数とか使ってるミドルウェアも結構な数があるサービスをいかに止めずに移行させるか。実際の移行手順はなかなか面白かった。DBも新DCに旧DCのslaveをいくつか立てて、完全移行する時に新DCのslaveの1つをmasterにしちゃうとか。音声とか画像とかのファイルの処理とか。

Mobage オープンプラットフォームの事件簿

スライド：http://www.slideshare.net/zigorou/yapc-asia-2011zigorou

モバゲーの内のケーススタディ集。失敗学。

・失敗を次に活かすために
　　-原因究明
　　-失敗防止
　　-知識配布

トラブルが起こった時にいかに再発防止するか。ぶっちゃけ中身は全然理解できひんかった。

Mobageソーシャルゲームにおける大規模サーバ運用 with Perl

スライド：http://www.slideshare.net/zigorou/yapc-asia-2011zigorou

モバゲーのインフラ周りのお話。

・インフラチューニングの話
・インフラエンジニアもアプリエンジニアや事業部との協業、情報共有が大事

短期間で急激に成長したサービスをいかにスケールしてきたか。これも具体的な内容はあんまよくわからんかった。あとセクショナリズムはよくないっていう話。うちにも当てはまりまくる。

感想

Perlに特化した話を避けてたらなんかインフラ系の話が多くなってしまいましたが、色々といい気づきは得られました。こういうベストプラクティスとか考え方って普段コード書いてて身につくもんじゃないし、1日だけやけど参加してよかったです。

var XHR = new XMLHttpRequest();

query = "http://www.muratayusuke.com/";
XHR.open("GET",query,true);
XHR.onreadystatechange = function(){
	if (XHR.readyState == 4 && XHR.status == 200){
		alert("hoge");
	}
};
XHR.send(null);

上記のコードなんかよく見るXMLHttpRequestのコードだと思いますが、最近のChromeでこいつがエラーを吐くようになりました。そう、
"XMLHttpRequest cannot load http://www.muratayusuke.com/. Origin http://muratest is not allowed by Access-Control-Allow-Origin."
ってやつです。要は、ドメインが違うサイトのデータを勝手に取れなくなってしまったのです。Same Origin Policyというらしいです。
これを回避するには、取られる側のサイトにAccess-Control-Allow-Origin ヘッダーというのを足してやらんとだめみたいで、これを設定してないサイトのデータはXMLHttpRequestで取れないのです。

最近作ってるChrome拡張とかまんなかSearchとかはAjaxしまくりで影響受けまくりだったので、なんとか回避策を練らないといけませんでした。

そこで、やや強引ですが、Access-Control-Allow-Origin ヘッダーをつけた自前のPHPを一枚噛ますことにしました。こんな感じ。

var XHR = new XMLHttpRequest();

query = "./getmurata.php?url=http://www.muratayusuke.com/";
XHR.open("GET",query,true);
XHR.onreadystatechange = function(){
	if (XHR.readyState == 4 && XHR.status == 200){
		console.log(XHR.responseText);
	}
};
XHR.send(null);

/*getmurata.php*/

require_once("dataget.php");
$data = data_get($GET['url']);

header("Access-Control-Allow-Origin: *");
print $data;

dataget.phpの中身はこちら。PHPでソケット通信して丸々結果を取ってくるfunctionが入ってます。それがdata_get()。HTTP通信が一回増えるので単純に考えて約二倍の時間がかかりますが、とりあえずこれでどんなサイトでもAjaxで取ってこれます。

あと最近知ったjQueryの$.getを使うともっとjavascriptの部分がすっきりします。

query = "./getmurata.php?url=http://www.muratayusuke.com/";
$.get(query,function(data){
	console.log(data);
});

お試しあれ。

使い方

まずは飲み会や食事のアポを取ります。もしくは、飲みたい人を想定します。
次に、下記URLをクリックしてページを開きます。
http://www.muratayusuke.com/mannaka/
すると、下記のような画面が開きます。

ページが開いたらとりあえず何も考えずに「いいね！」ボタンを押してください。
そして自分の最寄り駅と、飲み相手の最寄り駅を入力します。３人以上入力したい場合は「＋」のボタンを押してください。

入力が完了したら「まんなかを調べる」ボタンを押します。

すると地図上に、入力した地点が赤いピンで、そのまんなかが黄色いピンで表示されます。
さらにそれぞれの地点からまんなかまでのルートや所要時間が左上に、まんなか付近のお食事処がその下に表示されます。マッシュアップ。

まんなかが不満な場合は、黄色いピンを動かすことができます。動かした瞬間にそこまでのルート情報とお店情報が更新されます。

また、左上のルート内の駅名をクリックするとそこがまんなかになり、同じくルート情報とお店情報が更新されます。

まだバグもいろいろありますが、おいおい直していきます。何かあればご報告ください。
今後追加したい機能としては、

・いくつかの候補のうち、お店の数が多いところをおすすめする
・iPhone対応

・・・とりあえずそんなもんかな？入力値によっていろいろおかしくなることもあるので、その辺を洗い出したりおかしくなった時のエラーメッセージ的なやつもちゃんと出したい。
そんな感じで、ぜひぜひご利用ください。

まんなかSearch

正解は、manifest.jsonに書いちゃう、でした。

{
	・・・
	"content_scripts": [
		{
			"matches": [
				"http://*/*",
				"https://*/*"
			],
			"js": ["jquery.js","script.js"],
			"run_at": "document_end"
		}
	],
	・・・
}

この"js"のところが順番に読み込まれるらしく、逆にすると動きませんでした。

そんだけ。

今後やりたいこととして色々書いてますが、色んな人にフィードバックをもらって今後やりたいことがさらに増えました。まとめると、こんな感じです。

1.は、楽天ブックス総合検索APIにはなかったんですが書籍検索にあったので、これに切り替えたいと思います。タイトル検索かからん時もあったりするし。
ただまあ3.の市場対応をするならCDとかDVD対応もしたいし、一旦書籍専用でISBN検索しつつ、どのAPIを使うかっていう判断をして全部対応できるような処理もどっかで足したいですね。
2.は勉強会に来てた学生のアイデアでそれはいい！ってなったので、実装しようと思います。
4.のFirefox版は今も作成中ですが、むずい。

そんな感じで、随時実装していくぜい。

必要な情報

まず、実際の楽天ブックスの商品ページの買い物かごボタンを見て、どんなデータをPOSTしてやればいいのかを調べます。

<form method="post" action="https://books.step.rakuten.co.jp/rms/mall/book/bs/Cart">
	<div>
		<span class="unit">個数&nbsp; </span>
		<input value="1" type="text" size="4" name="units" id="units">
		<input value="買い物かごに入れる" type="submit">
		<input type="hidden" value="213310" name="shop_bid">
		<input type="hidden" value="14034556" name="item_id" id="ScItemGet">
		<input type="hidden" value="1" name="inventory_flag">
	</div>
</form>

見た感じ、いじる必要がありそうなとこは、

の２点。楽天ブックスは楽天市場の１店舗なので、"shop_bid"は全部一緒のはず。"inventory_flag"は、まあようわからんけどこのままでいいっしょ。

実装

ということで、実質コードを書く必要があるのは"item_id"だけ。ところが厄介なことに、"item_id"はなんとAPIに入っていないので、もっかいXMLHttpRequestを叩いて無理矢理取ってくることに。http通信２回分なんて待ってられないので、一回目のAPI通信で取得したデータはすぐ表示しつつ、続けてitem_idが取得出来次第ボタンを表示っていう仕様にしました。

chrome.extension.onConnect.addListener(function(port) {
  console.assert(port.name == "AtoR");
  port.onMessage.addListener(function(msg) {
		if(msg.status == "start"){
			//ページアクションのアイコンを表示
			chrome.pageAction.show(port.sender.tab.id);
			
			//楽天APIから商品を検索
			query = "http://api.rakuten.co.jp/rws/3.0/json?" +
					"developerId=" + devId +
					"&affiliateId=" + afiId +
					"&operation=" + opr +
					"&version=" + ver+
					"&keyword=" + encodeURI(msg.title);
					
			api.open("GET",query,true);
			api.onreadystatechange = sourceGet(port);
			api.send(null);
		}
		else if(msg.status == "null"){
			content = "このページでは使用できません。";
		}
		else{
			sourceGet(port);
		}
  });
});


//タブが変更された時の処理
chrome.tabs.onSelectionChanged.addListener(function(tabid){
	chrome.tabs.getSelected(null, function(tab) {
		・・・
	});
});


function sourceGet(port){
	if (api.readyState == 4 && api.status == 200){
		response = eval('[' + api.responseText + ']')[0];
		
		if(response['Header']['Status'] == 'Success'){
			items = response['Body']['BooksTotalSearch']['Items']['Item'];
			
			//商品データを１つずつhtmlに出力
			content = '<table width="300">';
			for(i=0;i<items.length;i++){			
				content = content+'<tr><td><a href="'+items[i]['affiliateUrl']+'"><img src="'+items[i]['mediumImageUrl']+'" /></a></td><td style="width:200px;vertical-align:top;">タイトル：<a href="'+items[i]['affiliateUrl']+'" target="_blank">'+items[i]['title']+'</a><br />著者：'+items[i]['author']+'<br />価格（税込）：'+setComma(items[i]['itemPrice'])+'円<br />ポイント：'+Math.floor(items[i]['itemPrice']/1.05/100)+'ポイント<br /><img src="img/star_';
				if(items[i]['reviewAverage'] == 0) content = content + '0';
				else if(items[i]['reviewAverage'] > 0 && items[i]['reviewAverage'] < 1) content = content + '0.5';
				else if(items[i]['reviewAverage'] == 1) content = content + '1';
				else if(items[i]['reviewAverage'] > 1 && items[i]['reviewAverage'] < 2) content = content + '1.5';
				else if(items[i]['reviewAverage'] == 2) content = content + '2';
				else if(items[i]['reviewAverage'] > 2 && items[i]['reviewAverage'] < 3) content = content + '2.5';
				else if(items[i]['reviewAverage'] == 3) content = content + '3';
				else if(items[i]['reviewAverage'] > 3 && items[i]['reviewAverage'] < 4) content = content + '3.5';
				else if(items[i]['reviewAverage'] == 4) content = content + '4';
				else if(items[i]['reviewAverage'] > 4 && items[i]['reviewAverage'] < 5) content = content + '4.5';
				else if(items[i]['reviewAverage'] == 5) content = content + '5';
				content = content + '.png" />('+items[i]['reviewCount']+')<br />買い物かごに入れる</td></tr>';
				
				rakuten.open("GET",items[i]["itemUrl"],true);
				rakuten.onreadystatechange = function(){
					if (rakuten.readyState == 4 && rakuten.status == 200){
						rr = rakuten.responseText;
						rr.match(/value="([^"]*)"[^>]*id="ScItemGet"/);
						rr = RegExp.$1;
						
						//買い物かご
						cart = '<form method="post" action="https://books.step.rakuten.co.jp/rms/mall/book/bs/Cart" target="_blank">';
						cart = cart + '<div>';
						cart = cart + '<input value="1" type="hidden" name="units" id="units">';
						cart = cart + '<input value="買い物かごに入れる" type="submit">';
						cart = cart + '<input type="hidden" value="213310" name="shop_bid">';
						cart = cart + '<input type="hidden" value="'+rr+'" name="item_id" id="ScItemGet">';
						cart = cart + '<input type="hidden" value="1" name="inventory_flag">'
						cart = cart + '</div>'
						cart = cart + '</form>'
						
						content = content.replace("買い物かごに入れる", cart);
						viewContent();
					}
				};
				rakuten.send(null);
			}
			content = content+'</table>';
			viewContent();
		}
		・・・
	}
	・・・
}

61行目で、まずベタ文字で「買い物かごに入れる」って表示しつつ、63行目以下で２度目の通信を行ってます。item_idは67行目の正規表現で強引にゲット。正規表現が一発で決まると気持ちいい。
無事にitem_idが取れたらベタ文字をformタグで置換。めでたしめでたし。

/* json形式 */

{
	"Body":{
		"BooksTotalSearch":{
			"Items":{
				"Item":[
					{
						"hardware":"",
						"limitedFlag":0,
						"author":"ガー・レイノルズ",
						"booksGenreID":"001006004006/001006018002/001006009001",
						"title":"プレゼンテーションZenデザイン",
						"listPrice":"",
						"itemCaption":"プレゼン・デザインの原則とテクニック。ビジュアル・コミュニケーション成功の秘訣。",
						"publisherName":"ピアソン桐原",
						"isbn":"9784894713994",
						"largeImageUrl":"http://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/8947/89471399.jpg?_ex=200x200",
						"jan":"",
						"mediumImageUrl":"http://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/8947/89471399.jpg?_ex=120x120",
						"availability":"1",
						"os":"","postageFlag":1,
						"salesDate":"2010-07-01",
						"smallImageUrl":"http://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/8947/89471399.jpg?_ex=64x64",
						"label":"",
						"itemPrice":2520,
						"affiliateUrl":"http://hb.afl.rakuten.co.jp/hgc/0cec7c34.60401a8a.0cec7c35.b91eba24/_RTwebs10000001?pc=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F6527030%2F",
						"reviewCount":2,
						"artistName":"",
						"discountRate":0,
						"reviewAverage":5,
						"itemUrl":"http://books.rakuten.co.jp/rb/6527030/"
					}
				]
			},
			"pageCount":1,
			"hits":1,
			"last":1,
			"count":1,
			"page":1,
			"carrier":0,
			"first":1
		}
	},
	"Header":{
		"Status":"Success",
		"Args":{
			"Arg":{
				"apiVersion":{
					"content":true,
					"value":"30"
				},
				"operation":{
					"content":true,
					"value":"BooksTotalSearch"
				},
				"developerId":{
					"content":true,
					"value":""//自分のデベロッパーIDが入る
				},
				"keyword":{
					"content":true,
					"value":"プレゼンテーションzenデザイン "
				},
				"User-Agent":{
					"content":true,
					"value":"Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit/534.10 (KHTML, like Gecko) Chrome/8.0.552.11 Safari/534.10"
				},
				"affiliateId":{
					"content":true,
					"value":""//自分のアフィリエイトIDが入る
				},
				"version":{
					"content":true,
					"value":"2010-03-18"
				}
			}
		},
		"StatusMsg":""
	}
}

最初から公式のドキュメントに載せといてくれたらいいのに。
ちなみに、検索に失敗するとBodyがnullになってHeaderのStatusにNotFoundやらServerErrorやらが入ります。

を、ようやく実装できました。

Amazon to Rakuten

Chrome拡張「Amazon to Rakuten」は当初下記の流れで作っていました。

が、この1.と2.の部分が無駄なのとbackgroundPageを使ってみたかったのとで、次のような流れにしました。

こうすることで、amazonの商品ページを表示した瞬間に裏側でDOM解析＆API検索を行い、アイコンをクリックしたらその処理結果を表示するだけになるので、アイコンクリック後の待ち時間がほぼなくなります。今回も色んなところで詰まりまくった。

1.Content Scriptで商品タイトルを引っ張ってくる

/* manifest.json */

{
  ・・・
	"background_page": "background.html",
	"content_scripts": [
		{
			"matches": [
				"http://www.amazon.co.jp/*",
				"http://www.amazon.com/*"
			],
			"js": ["script.js"],
			"run_at": "document_end"
		}
	],
	"browser_action": {
		"default_icon": "icon.png",
		"popup": "popup.html"
	},
  ・・・
}

まずはここから。Content Scriptを使うには、manifest.jsonに上記のように記述する必要があります。
"matches"はContent Scriptを動かすサイトの条件を設定する項目。
"js"は動かしたいJavaScriptファイルのファイル名。
"run_at"はどのタイミングでスクリプトを実行するかを決める項目。今回はDOM構築完了時にスクリプトを動かす"document_end"にしてます。
他にも何個かオプションがあります。詳細はこちら。

/* script.js */

title = document.getElementById('btAsinTitle').firstChild.nodeValue;
title.match(/([^\(]*)/);
title = RegExp.$1;

こうすると、amazonの詳細ページでDOM構築が終わった瞬間script.jsが実行されて、titleの中に商品タイトルが入るって寸法です。
これをそのままAPIに投げたいところですが、Content ScriptではXMLHttpRequestが使えないそうなので、background.htmlに商品タイトルを送ってやる必要があります。

2.Content Scriptからbackground.htmlにメッセージを送信

/* script.js */

title = document.getElementById('btAsinTitle').firstChild.nodeValue;
title.match(/([^\(]*)/);
title = RegExp.$1;

var port = chrome.extension.connect({name: "AtoR"});
port.postMessage({title: title,status:"start"});
port.onMessage.addListener(function(msg) {
	if (msg.status == "loading"){
		port.postMessage({status: "loading"});
	}
});

/* background.html */

chrome.extension.onConnect.addListener(function(port) {
  console.assert(port.name == "AtoR");
  port.onMessage.addListener(function(msg) {
		if(msg.status == "start"){
			//楽天APIから商品を検索
			query = "http://api.rakuten.co.jp/rws/3.0/json?" +
					"developerId=" + devId +
					"&affiliateId=" + afiId +
					"&operation=" + opr +
					"&version=" + ver+
					"&keyword=" + encodeURI(msg.title);
					
			api.open("GET",query,true);
			api.onreadystatechange = sourceGet(port);
			api.send(null);
		}
		else{
			sourceGet(port);
		}
  });
});

function sourceGet(port){
	console.log("sourceGet");
	if (api.readyState == 4 && api.status == 200){
		//APIからのレスポンスがきちんと返ってきた時の処理
		・・・
	}
	else{
		if (loading === false){
			loading = true;
			content = '<img src="loading.gif" />';
		}
		port.postMessage({status: "loading"});
	}
}

例によって詳細はChromeAPIのメッセージのページを見てください。
今回はXMLHttpRequestを使うせいか単発通信ではうまくいかなかったので、永続通信で下記の流れでやり取りさせてます。

ってな具合です。

3.popup.htmlに表示したい内容を変数に格納

/* background.html */

function sourceGet(port){
	console.log("sourceGet");
	if (api.readyState == 4 && api.status == 200){
		response = eval('[' + api.responseText + ']')[0];
		
		if(response['Header']['Status'] == 'Success'){
			items = response['Body']['BooksTotalSearch']['Items']['Item'];
			
			//商品データを１つずつhtmlに出力
			content = '<table width="300">';
			for(i=0;i<items.length;i++){
				content = content+'<tr><td><a href="'+items[i]['affiliateUrl']+'"><img src="'+items[i]['mediumImageUrl']+'" /></a></td><td style="width:200px;vertical-align:top;">タイトル：<a href="'+items[i]['affiliateUrl']+'" target="_blank">'+items[i]['title']+'</a><br />著者：'+items[i]['author']+'<br />価格（税込）：'+setComma(items[i]['itemPrice'])+'円<br />ポイント：'+Math.floor(items[i]['itemPrice']/1.05/100)+'ポイント</td></tr>';
			}
			content = content+'</table>';
		}
		else if(response['Header']['Status'] == 'NotFound'){
			content = '見つかりませんでした。';
		}
		else{
			content = 'エラーが発生しました。';
		}
	}
	else if (api.readyState == 4){
		content = "接続に失敗しました。";
	}
	else{
		if (loading === false){
			//ロード中画像を表示
			loading = true;
			content = '<img src="loading.gif" />';
		}
		port.postMessage({status: "loading"});
	}
}

実際のsourceGetはこんな感じです。汚い。
ポップアップに表示したいものは全部変数contentに格納して、後から引っ張ってきます。

4.background.htmlのcontentに格納した内容をpopup.htmlに表示

/* popup.html */

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="content"></div>
<script>
bg = chrome.extension.getBackgroundPage();
document.getElementById('content').innerHTML = bg.content;
</script>
</body>
</html>

なんと、たったの２行で、backgound.html上の変数をpopup.htmlでも使うことができてしまいます。
逆だとちょっとめんどいです。詳細はこちら。
ちなみに、script.jsは外から呼べなかったです。なぜ。

思わぬ落とし穴

これでようやく思ったとおりの挙動になって万々歳！と思った矢先、思わぬ落とし穴が。
このbackground.htmlはタブを何個開いてても共通で使われるので、例えば次のような場合。

というわけで、タブを切り替える度にタイトルを取得してAPIを叩き直さんとあかんことに気づく。
ですが予想通りタブ切り替えイベントは用意されていたので、ささっと対応しました。

/* background.html */

・・・

//タブが変更された時の処理
chrome.tabs.onSelectionChanged.addListener(function(tabid){
	chrome.tabs.getSelected(null, function(tab) {
		chrome.tabs.sendRequest(tab.id, {status: "changed"}, function(response) {});
	});
});

・・・

/* script.js */

AtoR();

chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {
    AtoR();
  }
);

function AtoR(){
	title = document.getElementById('btAsinTitle').firstChild.nodeValue;
	title.match(/([^\(]*)/);
	title = RegExp.$1;
	
	var port = chrome.extension.connect({name: "AtoR"});
	port.postMessage({title: title,status:"start"});
	port.onMessage.addListener(function(msg) {
		if (msg.status == "loading"){
			port.postMessage({status: "loading"});
		}
	});
}

chrome.tabs.onSelectionChangedがscript.js側で使えればよかったんですが、ContentScript上では使えませんって怒られたのでbackground.htmlに記述して例によってメッセージで送信。
chrome.extension.onRequest.addListenerの中がメッセージ受信時、つまりタブが切り替わった時に実行されるアクションです。

そんなこんなで

あれやこれやと試行錯誤を繰り返し、なんとかやりたいことを１つ実装できました。今後もちょくちょくアップデートしていく予定です。
Chrome拡張はインストールしたらソースコード全部見られるので、興味ある方はぜひ。

Amazon to Rakuten

大枠

実はこれだいぶ前に作ろうとしたんですが、全然やり方がわからず放置してました。
ところが先日うちのインターン生でChrome Extensionを作るという女の子が。色々聞いてみて「これならできそう！」ってなってやってみたらできたっていう感じです。

流れはこんな感じ。

1.chrome.tabs.getSelectedで今開いてるamazonのページのURLを取得
2.XMLHttpRequestで取得したURLのHTMLを取ってきて、本のタイトルを正規表現で取得
3.楽天ブックス総合検索APIに取得したタイトルを投げる
4.検索結果をPopupに表示。表示されたやつをクリックすると無事楽天ブックスの商品詳細ページにジャンプ

まあ正直4.はPopup使わずに一番上の検索結果に自動的に飛ばそうかと思ったんですが、運悪く違うページに飛んじゃったらどうしようもないので1クッション挟みました。

この流れを見て、「なんでContent Script使わへんの？」と思った方、鋭い。実はほぼ完成してからぼーっとAPI見てたらContent Scriptの存在に気づいて、ちょっとやってみたけどメッセージの送受信がうまくいかずとりあえず上の流れで公開したっていう感じです。そのうち修正したい。

というわけで、以下具体的に。

1.今開いているページのURLを取得

/* manifest.json */

{
  ・・・
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },
  "permissions": [
		"tabs",
		・・・
  ],
	・・・
}

まずはmanifest.jsonにchrome.tabsの使用を宣言しなければなりません。permissionsの中にtabsを足します。

/* popup.html */

chrome.tabs.getSelected(null, function(tab) {
	var url = tab.url;
	・・・
});

すると、上記のようにchrome.tabs.getSelectedでタブ情報を取ってこれます。tabの中に各種情報が入っていて、tab.urlで現在開いているタブのURLが取れるという具合です。

2.取得したURLのHTMLデータを取得

/* popup.html */

var req = new XMLHttpRequest();
var loading = false;

chrome.tabs.getSelected(null, function(tab) {
  var url = tab.url;
	req.open("GET",url,true);
	req.onreadystatechange = sorceget;
	req.send(null);
});

function sorceget(){
	if (req.readyState == 4 && req.status == 200){
		//読み込みが成功した時の処理
		・・・
	}
	else{
		//読み込み中、もしくは読み込みに失敗した時の処理
		
		if(loading == false){
			//ロード中画像を表示
			loadingImg = document.createElement('img');
			loadingImg.id = "loading";
			loadingImg.src = "loading.gif";
				
			var objBody = document.getElementsByTagName("body").item(0);
  	  objBody.appendChild(loadingImg);
			
			loading = true;
		}
	}
}

今度は先程取得したURLの中身をXMLHttpRequestで引っ張ってきます。
req.openの第一引数は取得のmethod、第二引数は対象のURL、第三引数はとりあえず省略orTRUEでOK。
req.onreadystatechangeは、読み込みのステータスが変わる度に呼ばれるfunctionです。if (req.readyState == 4 && req.status == 200)で読み込み完了かつ読み込み成功の時の処理を書きます。elseにロード中の画像を表示するスクリプトを書いとくといい感じな気がします。
req.sendはURLにGETかPOSTで値を渡すのに使うらしい。渡さなくてもnullでsendしとかんとあかんらしい。
その他詳細はこちら。

あとはこれで持ってきたHTMLデータから正規表現でタイトルを抜き取れば第一段階完了。ただamazonがちょっとタイトル部分のソースを変えたらアウト。

3.楽天ブックス総合検索APIに取得したタイトルを投げる

まあ、ここはいいでしょう。XMLHttpRequestで別オブジェクトを作ってクエリを投げれば結果が返ってきます。
APIの詳細はこちら。

/* popup.html */

items = eval('[' + api.responseText + ']')[0]['Body']['BooksTotalSearch']['Items']['Item'];

ただ、返ってきたJSONをオブジェクトに変換する方法を知らなかったのでメモ。
ちなみにこのコードでapi.responseTextに入ってた検索結果の商品がitemsに配列で入るので、forしてitems[i]['title']でタイトルが取れたり、そんな感じです。
これを一行で済ませてしまわずに検索結果が空やった時の分岐とかを本来は作らないといけないとは思う。まあそのうち。

4.楽天APIの検索結果を表示

今回は、popup.htmlにdocument.writeでガリガリHTML書いてその中にitemsのデータをいちいち埋め込んでってやりました。
スマートじゃないけど、とりあえず表示できればOK。
中にtarget="_blank"のリンクを埋め込んだら普通に新規タブで開いてくれました。
現在のタブに表示させようとするとちょっとめんどいっぽい？

これからやりたいこと

そんな感じで、なんとか動くものができました。やるかどうかはわからんけどこれからやりたいことを。

1.やっぱりContent ScriptとMessageを使いこなしたい。
2.検索結果が無かった時の分岐。
3.2の結果が空やった時、もしくは違う商品しか表示されなかった時のために「お探しの商品が見つかりませんか？」的なメッセージと共に検索ワードを手で変えて検索し直せるようにしたい。
4.ブラウザアクションじゃなくページアクションで。
5.商品ジャンルも取ってきてAPIを使い分ければ本やCD以外の商品も楽天市場APIとかで取ってこれるかも。
6.デザインを綺麗に。

とりあえずこんな感じかなあ。
1.は言わずもがな。HTML通信を一回減らせるのは大きい。今回はbackground_pageを使ってないので、amazonのページが表示された瞬間に裏側でContent ScriptがDOM解析でタイトルを取ってきて、裏側で検索かけつつ、アイコンをクリックしたら一瞬でpopupに表示されるとかできたら素敵。できるんかな。
2.は、今ロード中画像がぐるぐる出続けるだけやし。バグと言っていいぐらい。
3.は実際取ってこれへん商品もちょこちょこあるし、余計な文言を省いて検索し直せたらもっと便利。
4.はよくわからずにブラウザアクション（右側にアイコンがずっと出てるやつ）で作ったけど、amazonの詳細ページでしか使えないのでページアクション（特定のサイトを見てる時だけアドレスバーの中の右端にアイコンが出るやつ）の方がいいかも。
5.は、今はブックスのAPIしか使ってませんがamazonも色んな商品置いてるので、使える幅が増えたらいいなあ。
6.は、誰かデザインして・・・

はじめてのChrome拡張ということでまだまだ基本機能ができただけですが、ちまちまアップデートしていくかもしれないのでよかったら使ってみてください。

Amazon to Rakuten