@kyanny's blog

My thoughts, my life. Views/opinions are my own.

pjax を利用したサイト向けの Chrome Extension の書き方

Chrome Extension の Content Scripts を使うと Greasemonkey のようにウェブサイトを加工できて便利だが、 Content Scripts はページのロード後に一度だけ実行されるので、 github.com のように pjax を利用しているサイトではページ遷移後に期待通り実行されないことがある。

pjax は pjax:success などの独自イベントを発火するが、 Content Scripts はサンドボックス環境で実行されるので pjax が発火するイベントを Listen することができない。しかし DOM の変更時に発生するイベントを Listen することはできる。

DOM の変更を検知するためには DOMSubtreeModified が利用できるが、このイベントは DOM Level 3 で deprecated になってしまった。 Mutation events も同様なので、 MutationObserver を使うのがよい。 WIP Pull Request Unhighlignter for GitHub では MutationObserver を利用した。

https://github.com/kyanny/chrome-ext-wip-pull-request-unhighlighter-for-github/blob/134fea5c17ba261c5354ec86c50108261a77ca7c/app.js#L29-L47

MutationObserver はどの要素からのイベントを受け取るかをオプションで細かく制御できるが、設定を誤ると期待するイベントが発火されないので注意。先のスクリプトでは childList: true, subtree: true というオプションを指定して body 以下の全ての子要素（孫要素も含む）からのイベントを受け取り、イベントハンドラ内で mutation.type をチェックして childList のときのみ DOM を変更するスクリプトを実行している。

Book: 1日で読めてわかるTCP/IPのエッセンス

TCP/IP ちゃんと勉強したことがなかったので勉強になった（過去に「マスタリングTCP/IP」を二度挫折した）

解説が平易で図も多く、わかりやすかった。価格が安く、電子書籍なので暇なときにスマートフォンで気軽に読めるのもよかった。

1日で読めてわかるTCP/IPのエッセンス

1日で読めてわかるTCP/IPのエッセンス

  • 榊正憲
  • ネットワーク
  • ¥1,100

JavaScript で if 文を書くとき必ず波括弧を書くべきと主張しているスタイルガイド

新人さんの JavaScript のコードレビューをしていて、 if 文の本体部分を波括弧で囲っていないコードを見つけた。

おれは本体が一行しかなくても必ず波括弧で囲うようにしており（そのほうがわかりやすいと思っているから）、できればそうして欲しいけど個人の好みを押し付けるのはよくないので、広く支持されているコーディングスタイルガイドの類いで同様の主張をしているものが無いか探した。

Google とか Mozilla とか GitHub あたりのドキュメントを眺めてみたが if 文の波括弧についてはっきり言及している箇所を見つけられずにいたら、該当するドキュメントをいくつか教えてもらった。

追記: あと https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style にも載っていた。

Always brace controlled statements, even a single-line consequent of an if else else. This is redundant typically, but it avoids dangling else bugs, so it's safer at scale than fine-tuning.

Chromecast SDK で画像を一枚表示する最小限のサンプル

Chromecast を買ったので SDK で遊んでみた。

Happy casting! https://dl.dropboxusercontent.com/u/4289117/cast/sender.html

ソースコードはこちら https://github.com/kyanny/chromecast-demo/tree/master

Google Cast 拡張をインストール済みの Chrome ブラウザで上記のページを開くと、キャストするデバイスを選ぶウィンドウがポップアップする。デバイスを選ぶと我が家の猫の写真が表示されます :)

f:id:a666666:20140531204240p:plain

デモ動画その1: Sender アプリケーション側。右側にあるのは Chrome DevTools のコンソールで、デバッグ用に仕込んだ console.log が流れている（なんか映像がボケてて見づらいけど...）

デモ動画その2: 上記の操作をしたときテレビに写真が表示される様子。 Receiver アプリケーションは Default Receiver を使っているので実装ゼロ。奥さんに協力してもらって撮影したが、テレビ画面の明るさにあわせたら MacBook のディスプレイが光りすぎてしまった。

参考にしたもの: 公式のドキュメントとサンプルアプリケーション。 https://developers.google.com/cast/docs/chrome_sender https://github.com/googlecast/CastHelloVideo-chrome

公式の Developer's Guide は順を追っているもののやや断片的で、全体像が見づらい。何も考えずにコピペしてたらいろいろ動かなくて悩んだ。

一方で GitHub 上にあるサンプルアプリケーションは包括的なぶん盛りだくさんすぎて、必須の実装がどこまでなのかわからず悩んだ。 HTML 側もそれなりに凝った作りになっているので、 JavaScript をコピペするだけですんなり動くものでもなく、苦労した。

あと、 Default Receiver にmedia として画像の URL を渡すときは MIME TYPE も正しく渡してあげないと画面に表示されないので注意。

Play with Capybara from interactive shell

Interactive shell like irb or pry is best friend to learn how to write code in programming language. Playing with Capybara from interactive shell session also very good to get used to Capybara's powerful API.

You can load Capybara from irb/pry console, but it requires some additional setup. Instead of it, just put a prepared executable script and run it from the shell.

$ capybara example.com
including Capybara::DSL in the global scope is not recommended!
Visit to http://example.com

Frame number: 0/2
[1] pry(main)> page.title
=> "Example Domain"
[2] pry(main)> page.has_css?('h1', text: 'Example Domain')
=> true
[3] pry(main)> find(:xpath, '//p[1]').text
=> "This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission."

This tiny script is build on pry and poltergeist (phantomjs driver of capybara).

Capybara console