content.jsとbackground.htmlのやり取りの追跡方法

extension開発でXHRを使いたかったんだけど、
めちゃめちゃハマったのでまとめてみる。
content.jsからbackground.htmlにデータを送って
background.htmlでXHRを使うってのは前情報で知ってたんだけど、
実際にそのデータをやり取りする経路の追い方がわからなくて
かなりハマりました。


結論から言うと、

content.jsとbackground.htmlのログ出力場所は別だった！

ΩΩΩ＜な、なんだってー！

ということですね。
じゃあどこなんだよ！って事で以下SSを交えて簡単に説明。

<---- 前提 ---->
以下で語る事の前提として、
ログの出力とはconsole.logで吐き出す文字列の事を指します。
<- 前提ここまで->

content.jsのログが出る場所は説明するまでもなく、
manifest.jsonでextensionの挙動を許可しているURLのページですね。

extensionを許可しているページ上で右クリックして「要素を検証」を選択

自分はベータ版のChrome5を使ってるので画面上部に
Consoleのタブがありますが、安定版の4を使ってる人は
左下の左から2番目のボタンを押せばコンソールが出てきます。

content.jsでログを出力すればここにログが出ます。
まぁこれはみなさん周知の事実かと思われます。
問題は次ですね。
background.htmlでログを出力したときにどこにでるか！
それはここでした！

拡張機能のextensionのアイコンが出ているちょっと右下に
「 動作中のページを調査：」って書いてあって、
その下にbackgroundページに指定しているhtmlのファイル名がありますね？
そこをクリックすると！

ジャジャーン！

Web Inspectorが起動します！
ここでコンソールを表示すると

background.htmlで動いてるscriptのログが出力されます！！
画像だとsyntax errorでてますけど・・・ｗ

という感じで、content.jsとbackground.htmlそれぞれでログを出力すると
上記の二つの場所でログが出るので、
それがわかればcontent.jsとbackground.htmlとの
データのやり取りは制覇したも同然です！

「ファイル名を指定して実行」って使ってる？

自分は最近使うようになりました。
と言っても、せいぜいブラウザを立ち上げる時位なんですけど。

んで、結構コイツが便利なので、
自分が起動したいアプリやらフォルダも
起動できるようにならないかなーと考えたので
ググってみたら、答えはありました。

「ファイル名を指定して実行」をランチャー化するカスタマイズ方法と起動コマンド一覧

詳細は紹介した記事に書いてあるので割愛しますが流れとしてはこんな感じ。

①任意のフォルダを作成

②作ったフォルダに対して起動したいアプリやフォルダのショートカットを突っ込む

③作ったフォルダを環境変数の設定でPath設定する。
（かなりぶっきらぼうに書いたのでよくわからない人は
上記リンク先を読んでください。ここより具体的に書いてあります。）

まだ、自分も使い始めてないのですが多分コレかなり良いです。
何が良いかというと、「ファイル名を指定して実行」の時に
②で作ったファイル名を指定すれば、起動したいものが
起動出来るようになるんですが、ショートカットを作成したあとに
そのショートカットの名前を変更してやれば、
好きな単語で好きなアプリが起動できる訳です。
例えばDropBoxのフォルダのショートカットに対して
「db」と名前を付けてやれば、「db」でフォルダを開くことが出来るわけです。
これってすごくないですか？

注意点としては、Windowsのシステム上先に登録されている文字列を
ショートカット名にしても、自分が指定したショートカットではなくて
先にシステムで割り当てられてるモノが起動するってことですね。
ちなみにシステムで割り当てられてるコマンド一覧は下記リンクに書いてあります。

ファイル名を指定して実行 まとめ


と、オレスゲー事に気づいちゃった！みたいな勢いで書いてますけど、
かなり既出の情報ですね。ググれば情報がザクザク出てきます。
でもここまで書いて記事削除ってのもアレなんでアップしちゃいます！


家でゆっくりやれるときとかは余り使う必要ないかもしれませんが、
電車の中でノートパソコンやネットブックをイジる時には使い勝手がいいはず！

SELECTして検索したの結果のX行目からY件取得する方法

SQLがスゴイ！
っていうか自分がSQLについてしらなすぎなだけなんですけど。

今回すごいって思ったのはLIMIT と OFFSET

この二つを以下のように使うと、

SELECT *
    FROM TABLE名
        LIMIT Y OFFSET X;
       
タイトルで書いた
SELECTして検索した結果のX行目からY件の結果を取得することが出来る。
ちなみにこれはPostgreSQLでのお話（自分が触ったのはVersion8.3.7）

Oracleだと結構面倒くさいみたいですね。
参考記事
Oracleでlimit offsetもどき - よねのはてな


そんな訳でSQLを勉強しようと思いました。
最近は@sikusimaさんフォローされてつぶやきを見たりしてるだけですけど・・・
Togetter - まとめ「@sikushima 氏のDB語り:適材適所/ストアドプロシージャ/ORM編」


@sikusimaさんが以前つぶやいてた
現場で使えるSQLを会社から拝借してきたので勉強しよう。




トリガーを使って更新日時を自動で挿入するとかそんな感じのも
汎用性が高そうだから今度調べよう

Mapに格納されてる中身を全部みたい！

というわけでググってみたら素敵な情報がありました。
中身まんま転載ですがご紹介。

for (Map.Entry entry : userInfoMap.entrySet()) {
System.out.println("key:" + entry.getKey() + " value:"
+ entry.getValue());
}





元記事はこちらです。

 Mapの中身を一気に出力 - メモ

書評：「結果を出す人」はノートに何を書いているのか

書評というほど大げさなものでもないけど、
今後ちょこちょこ書く予定なのでタイトル統一の意味を込めて。

見た目どおり？ものすごく軽く読める本だった。
ノートに関連するtipsや著者の方法論等を並べてある本。
通勤時間に読むにはちょうど良いかも。
デジタル　対　アナログ（アナログTUEEEEEEE!!
の構図をやたら強調しようとして必要以上にデジタルをディスってるように見えて、ちょっとモニョった。
モニョりつつも以下気になった点とか。試してみようと思った事。


■母艦ノート・メモノート・スケジュールノートにノートを分ける。
    ・自分の場合は人と会ったり、外出したりするケースは少ないので、
       スケジュールノートはなし。
    ・今使っているノートはモレスキンなので、メモノートを付箋で代用してみる。
    ・現在運用中だが、定番のモレスキンだと若干サイズが小さいので、
    ・書き込める余白が少ないのが難点。
    ・もうちょっと大きい母艦ノートを検討してもいいかもしれない。
       余白が大きくなると1ページ1項目の原則を破ってしまいそうだけど・・・

■気になった文具用品
    ・デートスタンプ
    ・紙用マッキー極細
    ・シャーピー
    ・ドットライナー
    ・マルチワークケース

Eclipseのプロジェクトの分け方

今関わっている案件で非常に困っていたのでつぶやいてみたら、
いろんな人が反応してくれたのでまとめてみる。
ちなみに以下の話は基本的にWebアプリの話です。



@alpha_pzさん
・ウチだとWAR単位で分けてます（ω・ WAR複数作るか判定打ち合わせなんてのもたまにやります。


・１システム=1WARもありますが、機能数が多くなりそうだと最初に分解することにしてます。一番わかりやすいのは業務本体と、マスターメンテを分けるとか（ω・


@michio009さん
Eclipseでプロジェクトを複数に分割するのは、他のプロジェクトで利用できるであろう共通部分を分離して部品化しつつ、その部品自体も使いながら改良していく場合が多いと思います。自分はそうして共通部分をいろいろ使いまわしながら進化させていってます。


リアルタイムで返信を下さったのはお二方でした！
これらを参考にしながら実際の業務でのプロジェクトの分け方を決めました。


またリアルタイムではないのですが、メールで反応してくれた方も。
ちょっと長文ですが非常にわかりやすい説明でした。

@mon104さん
★システム(サブシステム)
   ☆1つのWebシステムとして纏めれるもの 
     → プロジェクトからWARファイルが作成できる
     例えば、1つのシステムに対して各チームがサブシステムを作ってて
     1つのプロジェクトにコミットしてたら・・・わやだわね。
     各サブシステム単位でWARファイルにしたら、各々デプロイできるし、
     EARファイルに纏めることもできるしねぇ！
     (バージョンアップや拡張はブランチ・タグで)

★Utility
 ☆1つのJarファイルとして纏めれるもの
   微妙かもしれないけど、システムが大きくなればなるほどソースは膨大になるので、
   ユーティリティ系はJarにしちゃえ！ってときとか。
   あとソースを触られたくないもの。独自のFrameworkとか。
   ん？微妙？

★スタブ(モック)
 ☆テスト時で必要なスタブ(モック)
    テストが終わったらいらないよねぇってなるものとか・・・。
    仮にXMLから動きを読込むのであれば、各システムに
    XMLを配置すればいいしねぇ！微妙か・・・？

★サーバの設定
 ☆各設定ファイル
    server.xmlや必要なJarファイルとかを管理。
    そのプロジェクトに中にantでローカルのサーバに
　必要なものをコピーするようにしておくとか。
   (JBossの時に使ったよ！サーバが動かないとか色々でて面倒だったから
    チェックアウトしてant叩いて設定完了みたいな！)
    でも・・・　EclipseでWTPとかの場合は必要ないか・・・。
   これも微妙か・・・。


皆さんありがとうございました！




明日こそソフトバンクショップ行こう・・・

localStorage勉強中

先日のHTML5とか勉強会に刺激を受けて、
サボってたChrome extensionの開発を再開。

というわけで最近はタイトルにあるlocalStorage周りをイジってます。

今やりたいことが、

①オプションページで設定保存

②コンテントスクリプトで設定読み込み

③ページ上で保存された設定で機能発動

って流れなんですけど、軽く調べたところ
コンテントスクリプト上からだと、
localStorageに素直にアクセスできないことが発覚。

localStorageをつかってエクステンションの設定を管理する

上のサイトさんにサンプルが置いてあって見事に解決法も載っちゃってたりするので、
こりゃラッキー！・・・と思ったのですが上手くいかず。

どうもlocalStorageへ値をセットするコードが上手く動いてないらしい。
上記サイトで
localStorage["userId"] = document.getElementById("userId").value;
としているところを
window.localStorage.userId = doument.getElementById("userId");
に変更したら無事にスクリプトが走るようになりました。

と書いてて改めて自宅で確認してみたところ修正しないでも動きました。
コピペミスですね。ごめんなさい。
なんせiPhoneからPCに手打ちでコピペしたもので＞＜

localStorageは値のセット方法が複数あるのが若干わかりずらいですね。
削除方法も
delete localStorage.hoge;
なんてやり方もできたりしてもうなにがなんだか。

というわけで、今はlocalStorageの値をコンテントスクリプトに渡してやる方法を勉強中です。
これの実装が終われば、あとは最大の難関設定変更のUIを
やって自分が作ろうとしてるextensionが公開できるかなー・・・と思ってますが、

UIは今以上にドハマりしそうなので頑張ります。

Pocket Wifi欲しいなぁ・・・