今日の重ね着に新機能を追加して，一週間先までの重ね着を見られるようになりました．
週末に遊びに行くのに何を着ていけばよいか，というときなどに使えます．
キャッシュがあるので，PCのブラウザからは，一度開いてしばらくすると更新されたり，iPhoneではSafariを一度終了すると出たりします．
ついでに，クラブTで重ね着グッズを買えるようになりました．
そこらへんの店でもそろそろ春物が入荷したりしているので，よい頃合いだと思います．
盆のTシャツはここから買えます．
盆まであと半年くらいなのでよい頃合いだと思います．
YouTubeをだらだら見たいけど，3分とかごとに次の動画を選ぶのがめんどうだった．
プレイリストは毎回同じのが流れておもしろくない．
YouTubeをだらだら見るために，関連動画を自動的に再生するのを作った．
動画の下にUIがちょっと増える．
Skipボタンですぐ次の動画に飛ぶ．
Autoにチェック入ってると動画の再生が終わったらすぐに飛ぶ，チェック外すとSkip押したときだけ．
関連動画の上のほうが優先でなんとなくランダムに自動的に飛ぶ．ランダムサーファーみたいな感じ．
hitode909 Google Chrome拡張に入ってる．
これを入れるとおまけで色々入る．
最初は独立した拡張にしようと思ったけど，アイコン作ったりするのがめんどうだったから便利拡張にまとめて入れてしまった．
そのうちちゃんとしたい．
Google Chrome用だけど，コードは下のファイル1つだから，うまくやれば，他のブラウザでも動かせると思う．
youtube-auto-next.js at master from hitode909/google-chrome-hitode909 - GitHub
今日はこの動画の関連動画をずっと見てた．おもしろい動画が自動的に出てきていい感じだった．
はてなブログの購読しているブログの新着記事を読みまくるためのGoogle Chrome拡張を作りました．
インストールすると，ツールバーにはてなブログ新着ボタンが出ます．
新着記事があるとアイコンに未読件数が出て，アイコンをクリックすると記事がタブで開かれます．
「次の記事」ボタンを押すと次の記事が出るので，どんどん読んでいけます．
たとえば下のスクリーンショットだと，読んでない記事が11件あるということです．
はてなブログはユーザーが自由にJSを書けたりCSSを書いたりできて，開くと音が出るブログとか，縦書きのブログとか，凝ったのがいろいろあるので，RSSリーダーやダッシュボードで読むのではなくて，1個ずつ読みに行きたいと思って，こういうのを作りました．
年末に作って一人で便利に使っていたのをそろそろ出そうという気になったので今日公開しました．
一ヶ月半くらいずっと使っていて便利だったので便利だと思います．
Chrome Web Storeからインストールできます．
昨日ちょっとPhantom.JSの練習した．
PhantomJS: Headless WebKit with JavaScript API
PhantomJS is a headless WebKit with JavaScript API.
brew install phantomjs
Qt4が必要でインストールに時間かかる
phantomjs a.js とか phantomjs a.coffee で実行
CoffeeScript実行できる
ただし，コンパイルできないときにどこが悪いかとかは教えてくれない
グローバルにphantomというオブジェクトがある
phantom.exitとか phantom.argsとか
console.logでコンソールに出力できる
WebPage#openでページ開ける コールバックも書ける
page = new WebPage() page.open 'http://google.com', (status) -> console.log '通信しました' phantom.exit()
コールバックは指定したURLがロードされたときに実行されるのではなくて，WebPageのロードが完了したら毎回呼ばれる
インスタンスごとに設定するみたいなイメージ
いろいろ並列に取りたいときはWebPageのインスタンスを別にする
page1 = new WebPage()
page1.open 'http://google.com', (status) ->
href = page1.evaluate ->
location.href
console.log "通信しました(1) #{href}"
page2 = new WebPage()
page2.open 'http://bit.ly', (status) ->
href = page2.evaluate ->
location.href
console.log "通信しました(2) #{href}"
page3 = new WebPage()
page3.open 'http://hatenablog.com', (status) ->
href = page3.evaluate ->
location.href
console.log "通信しました(3) #{href}"
昨日見てると，phantom.state++とかして何回通信したかで処理を変えるのを見た
けっこうひどい感じがする，ほかに良い書き方ありそう，location.hrefを正規表現にマッチさせて処理を書くとかのほうがいい気がする
phantom.state = 0
page = new WebPage()
page.open url, (status) ->
try
phantom.state++
if status != 'success'
phantom.exit(1)
switch phantom.state
when 1
# 1回目
when 2
# 2回目
catch error
phantom.exit(1)
WebPage#evaluateでページのコンテキストでスクリプトを実行できる
page.evaluate ->
document.querySelector('textarea').value
documentとか取れるので何でもできる
ただし，functionを渡せるだけで，クロージャとかで外から変数渡したりできない
ということは，起動時にメッセージを書いてその内容を掲示板にポストとかはできない？(誰か知ってたら教えてほしい)
返り値は取れる
evaluateの中でconsole.logしても何もでてこない，ブラウザの中のconsole.logが呼ばれているため？
例外をcatchしないとスタックトレースとか出ずに処理が終了する場合がある
WebPage#render(ファイル名)でスクリーンショット取れる
スクリーンショットを見て，ちゃんとページが取れてるか確認してデバッグすると効率良い．
window.setTimeout -> page.render 'a.png' , 200
phantom.exit()しないと終了しないので終わりたいと思ったところに書いておく
検索するとWebPage#openではなくてphantom.openを使ってるのがあった．
手元のphantomにはphantom.openない．
APIが変わった？
ブラウザと同じように動くのは便利だけど書きにくい．
JSでDOM操作できれば慣れてるから他の慣れてるスクリプト言語で書くより速いかと思ったけど，通信するところが，コールバックが変な感じだったり，デバッグしにくかったりして，なかなか難しかった．
スクレイピングに使うには，ページ側のJSが動かないとどうしても書けないという場合以外には使わなくてよさそう．
昨日作ったのは以下で，診断メーカーをランダムに受診して結果を表示する，というもの．
ページのJSのテストとかで使うには良い気がする．
タブみたいな感じでリンクが並んでいて，選択中のタブは見た目を変えたい，みたいなとき，テンプレートでifとか書いてもいいけど，JSでやると簡単にできて，いろんなところで使い回せる．
リンク先が表示中のページと一致するか判定する．
$(function() { $('a').each(function() { if (this.href === location.href) { $(this).css({ 'font-weight': 'bold', 'font-size': '120%' }); } }); });