はじまり

 キモオタ的には、生活の中でInstagramにアップされている画像をちょっと手に入れたいと言う場面に遭遇します。 ところがオシャレSNSであるところのInstagramは右クリックでは画像を保存させてくれません。 いちいちChromeの開発者ツールでたどっていくのもスマートではないので、先日読んだ「JS+Node.jsによるWebクローラー/ネットエージェント開発技法」という本に触発されて、JavaScriptでクロールを試みることにしました。

結論

 JS+Node.jsなんちゅうツールを使いこなすことができず、結果的にログイン&閲覧している状態から画像を取得するだけのブックマークレットに着地しました。無念。

cssセレクタをdocument.querySelectorAllで追いかける作戦です。 最新の画像が新しいタブで10件分開かれるブラクラ紛いの仕様なので、使い方に併せて変えたりする必要があると思います。 しかしながら手軽に画像本体にアクセスするという目的は曲がりなりにも果たされました。

挫折までの経緯

 当初の構想としてはimgタグで埋め込まれている画像本体のURLを何らかの方法でスクレイピングし、localhostなどでそれらのアドレスを一覧表示するようなものがあれば面白いと思っていました。それらを実現するものとして考えていたのは、JSから利用できるライブラリであるPhantomJSというヘッドレスな(GUIを持たない)webブラウザとそれを扱うためのCasperJSというもの(+Node.js)です。formへの入力と送信ができるのでログインの必要なサービスをクロールできます。 ところが、いざInstagramへログインを試みると、うんともすんとも言いません。

 そんなときに見つけたのは こちらのページ(StackOverflow) でした。 これによれば、Instagramのフォームがデータの変更を反映するのは、キーボードによる入力というイベントがあった時のみである、ということらしいです。このページの質問者がGitHubにPhamtomJSでのコードを公開しているので、それを利用してみましたがうまくいきませんでした。 もっと勉強が必要だと思いました、というメモ。