カテゴリー別アーカイブ: JavaScript

スクレイピング-CasperJS編-


目的

CasperJSを使ってスクレイピングしてみます。

CasperJS公式

CasperJSは、PhantomJSを使いやすくラッピングしたJavaScriptです。
最初は、node.jsのライブラリと思ってましたが、使ってみたらそうではなく、
casperjsというコマンドで実行します。
そのためnode.jsの他のライブラリを使うことはできませんでした。

CasperJS、PhantomJSのインストール

最初はPhantomJSからインストールします。

PhantomJSのダウンロードページ

各OS毎にバイナリが用意されています。
今回はMac OS X版をダウンロードし、zipを展開します。
展開するとバイナリが出てきますので、適当にパスが通ったところに置きます。
例)
mv ~/Download/phantomjs-2.1.1-macosx /usr/local/

次にCasperJSをインストールします。npmで簡単にインストールできます。

npm install casperjs

CasperJSでスクレイピングする処理を書く

CasperJSの実行

casperjsコマンドで実行します。

$ casperjs casperjs_sample.js

下記のようにログ出力されました。

/url?q=https://ja.wikipedia.org/wiki/%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AC%25E3%2582%25A4%25E3%2583%2594%25E3%2583%25B3%25E3%2582%25B0&sa=U&ved=0ahUKEwjH7s223I3SAhUMbbwKHWkWAroQFggYMAE&usg=AFQjCNHZAORThLyskf3nDxY9SlIMZY3Mvg
/url?q=https://ja.wikipedia.org/wiki/%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AC%25E3%2582%25A4%25E3%2583%2594%25E3%2583%25B3%25E3%2582%25B0&sa=U&ved=0ahUKEwjH7s223I3SAhUMbbwKHWkWAroQFggcMAI&usg=AFQjCNHZAORThLyskf3nDxY9SlIMZY3Mvg

期待するものは、httpsから始まるURLですが、最初に”/url?q=”という文字がついています。
どうもユーザエージェントの指定で結果が変わるようです。
CasperJSのデフォルトのユーザエージェントは下記のものでした。

Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/538.1 (KHTML, like Gecko) CasperJS/1.1.3+PhantomJS/2.1.1 Safari/538.1

ユーザエージェントをChromeのものに変えると期待するURLを得ることができました。

casper.userAgent(“Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36”);

スクレピングするならbotらしいユーザエージェントが良いのだと思います。

以上です。


ES2015の環境作成(Babel、watchify)


ES2015でJavaScriptを書こうと思い環境構築を始めましたが、
新旧情報があり何をすれば良いのかいまいちわからなかったので、
手順を残します。

2016/06/15時点の情報です。

npmはすでにインストール済みの状態で始めます。

1. workディレクトリを作成する。

$ mkdir work
$ cd work

2. npmで初期化する。

$ npm init
全部エンターで作成してみる。
変更したい所があれば随時変更する。
package.jsonが作成されます。

3. 必要なライブラリをインストールする。

$ npm install –save-dev watchify
$ npm install –save-dev babelify
$ npm install –save-dev exorcist
$ npm install –save-dev babel-preset-es2015

4. .babelrcを作成する。

$ vi .babelrc
下記の設定を記述する。
{
“presets”: [“es2015″]
}

5. watchifyを起動する設定を記述する。

毎回watchifyコマンドで起動してもよいのですが、
npmコマンドで簡単に起動できるように設定ファイルに記述します。

$ vi package.json
以下のwatchの記述を追加する。
scripts: {
test: echo \”Error: no test specified\” && exit 1,
“watch”: “watchify -t babelify ./index.js -o ‘exorcist ./build.js.map > ./dist/index.js’ -d”
}

出力用のディレクトリも作成しておきます。
$ mkdir dist

入力用のファイルを作成しておきます。中はからでもOKです。
$ touch index.js

入出力用のファイル、ディレクトリが無いとwatchify起動時にエラーになります。

6. watchifyを起動する

$ npm run watch

これでindex.jsを保存するたびにトランスパイルされたJavaScriptが生成されます。

以上です。


Safariでdivのdatasetを249回ループすると値がundefinedになる。


今回はAndroidではなくJavaScriptです。

divのdatasetをループで値を参照した時の挙動がChromeとSafariで異なっていました。

やったこと

divを配列で249個用意し、最後のdivだけdatasetにデータを入れておきます。
(あんまりやることはないと思いますが、、、)
そしてfor文で全divに対してdatasetの値を出力しました。

結果

期待値としては、248回undefined、最後1回が値が出るはずです。
Chrome(49.0.2623.108)・・・248回undefined、最後にデータ(期待通り)
Safari(9.0.3)・・・249回undefined

サンプル

配列の最後だけデータを入れると動作がおかしいですが、
最後より前にデータを入れると期待通り出力されました。

サンプル2

結果2

Safari(9.0.3)で動かすと
246回undefined
123
undefined
123
と出力されました。

原因は分かりませんが、このような動作をしていました。

Safari 9.0 の JS で「同じ関数を繰り返し実行しただけで返り値が変わる」という強烈なバグが発見されてる

Qiitaに投稿されている現象も報告されていますが、関係あるかは調べられていません。。