PhantomJSはすごく便利なのですが、ちょろっと使いたいだけのときにスクリプトファイルを用意するのは若干面倒です。対話モード(REPL)も用意されていますが、対話的に使うだけならChromeの方が使いやすい場面が多いです。
今回の想定シーンは、「GitHubでStarしてくれた人の一覧が欲しい」というようなケース。時々、Issueで全員に連絡したいことがありますよね。↓ こういうやつ。
@user1, @user2, @user3, ...
GitHubだとJSONを返すAPIが用意されているので、それを使います。
コンソールを開く
新規タブを開いて、about:blankに移動します。まっさらな状態にするのがポイントです。
jQueryを仕込む
PhantomJSを使う場合もそうですが、素のJavaScriptだと面倒が多いので、jQueryを仕込みます。次の2行を実行すればOK。
> (script = document.createElement('script')).src = 'http://code.jquery.com/jquery-latest.min.js'
> document.getElementsByTagName('head')[0].appendChild(script)
APIからデータを取得
キーが必要なAPIの場合は一工夫要りますが、公開のものであれば次の3行でOK。JSONデータが入ります。
> result = {}
> url = 'https://api.github.com/repos/cognitom/symbols/stargazers'
> $.getJSON(url, function(data){ result = data })
データを加工
まずは取得できたかの確認。
> result
配列かオブジェクトが表示されればOK。続けて、必要な文字列に整形します。正規表現を使うまでもなかった!
> result.map(function(x){ return '@' + x.login }).join(', ')
無事、冒頭のような @user1, @user2, @user3,...という文字列を得られました。実行結果のスクリーンショットは、こんな感じになります。
最後に
上記の事例は、APIが用意されているので「クローリング」というほどのものでもないですが、HTMLページから取得する場合もコンソールが使えます。"about:blank"に行く代わりに対象ページを開いて、jQueryが導入済みならそれを、なければこのページの説明と同様に追加して、あとはDOMを参照してデータを取得すればOK。コンソールからはワンライナーの方が使いやすいので、map関数が活躍しますね。