![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2020-02-19T06:08:39+00:00","","") #author("2020-02-19T06:09:01+00:00","","") #topicpath ---- #contents #hr ---- ~ *&color(#ee7800,){&size(20){スクレイピング};}; [#l5e8c5b0] **&size(14){目標}; [#z4871173] web上のサイトからURLの一覧を抜き出し、それぞれのURLにとんでデータを取得する。 **&size(14){実行環境}; [#rbb532e3] -python3~ -Visual Studio Code~ -スクレイピングしたページ ([[技術評論社の電子書籍サイト>https://gihyo.jp/dp]], [[Bloomberg>https://www.bloomberg.co.jp/]])~ **&size(14){インストール}; [#xbcae99a] -pipのインストール sudo apt install python3-pip -lxmlのインストール pip3 install lxml -requestsのインストール pip3 install requests -requestsのインストール pip3 install cssselect **&size(14){作業の流れ}; [#ha6e13e7] +作業フォルダにcdしてファイルを作る code ファイル名.py +作ったファイルの実行 python3 ファイル名.py **&size(14){具体的な手順(Javascriptなし)}; [#ufebe90f] スクレイピングしたいサイトがJavascriptで構成されているかレンダリングする前のソースを表示して確認する。(≠F12) ブラウザで ctrl＋U 実際のニュースページに書かれている内容が書かれているか文字列を検索する。 検索のやり方 ctrl＋F Javascriptの場合=>[[具体的な手順(Javascriptあり)へ>#u318a5fc]]~ ~ Javascriptがないサイトとして、今回は[[技術評論社の電子書籍サイト>https://gihyo.jp/dp]]を使ってスクレイピングしていく。 このサイトは、本の一覧が表示されていて、気になる本をクリックするとその本の価格と内容が表示されるようになっている。~ スクレイピングするのは、すべての本の遷移先URLと本のタイトル、価格、内容である。~ ~ スクレイピングするのにあたってのおおまかな手順としては、本の一覧ページからそれぞれの本の遷移先URLをすべて取得する。 そしてそれぞれのURLにアクセスしてその本に関する情報をスクレイピングする、という流れ。 +本の一覧ページからすべての本のURLの取得&aname(detanojs); #ref(crawl.png,nolink,left,nowrap,添付ファイルの画像) ~ request.getでメインのURLのレスポンスをもらい、&color(#DCDCAA,#1E1E1E){scrape_list_page};&color(white,#1E1E1E){(};&color(#9CDCFE,#1E1E1E){response};&color(white,#1E1E1E){)};関数を使って指定されたid内のURLを取得している。 ~ root.make_links_absolute(response.url)とすることで、すべてのリンクを絶対リンクに変換できる。 ~ ・セレクタの指定方法~ ○idを指定するとき~ cssselect('#id') ○classを指定するとき~ cssselect('.class') ○idまたはclass内のタグ指定するとき~ cssselect('#id(または.class) (タグ)') +それぞれのURL先のデータを取得 #ref(crawl2.png,nolink,left,nowrap,添付ファイルの画像) ~ ここでは、それぞれの得たURLをfor文でレスポンスをもらい&color(#DCDCAA,#1E1E1E){scrape_detail_page};&color(white,#1E1E1E){(};&color(#9CDCFE,#1E1E1E){response};&color(white,#1E1E1E){)};関数でレスポンスに対する処理を行っている。ebookは辞書(dict型オブジェクト)でurlやtitleなどの情報名(key)とそれに対する値(value)を１対で持ち合わせている。~ また、複数のページをクロールするのでリクエストする際はsessionを使う。 **&size(14){具体的な手順(Javascriptあり)}; [#u318a5fc] 次に、Javascriptを使う場合について説明する。 Javascriptをがある場合、seleniumと%%phantomJS%%を追加でインストールする。phantomJSのサポートが終了したのでHeadless Chromeを使う。~ ~ -seleniumのインストール pip3 install selenium -chromdriverのインストール wget https://chromedriver.storage.googleapis.com/2.37/chromedriver_linux64.zip unzip chromedriver_linux64.zip pip3 install chromedriver ~ Javascriptがあるサイトとして、今回はBloombergという金融関係のニュースサイトを使ってスクレイピングしていく。 このサイトは、ニュースの一覧が表示されていて、気になるニュースをクリックするとそのニュースの沙録と詳細が表示されるようになっている。~ スクレイピングするのは、すべてのニュースの遷移先URLとニュースのタイトル、沙録、詳細である。~ ~ 今回も大まかな手順としてニュースのURLの一覧を取得する。そして、それぞれのURLからニュースの情報を取得する流れ。なおリクエストによるURLの一覧の取得は、具体的な手順(Javascriptなし)の[[1>#detanojs]]で説明しているので、ここではHeadless Chromeを用いてURL一覧の取得を試している。また、その次の手順のURL先の情報を取得するコードの方では、リクエストでURL取得、Headless Chromeでニュース情報取得と組み合わせて使っている。 +ニュースの一覧ページからすべてのニュースのURLの取得 #ref(detail.png,nolink,left,nowrap,添付ファイルの画像) 今回はHeadless Chromeを用いているので、レスポンスをもらうときはrequest.getではなく、driver.getとする。~ また、今回のページでは沙録、詳細文が一文づつタグ分けされていたのでfor文を回してつなげている。~ さらに、出力するときに文字コードが変わって改行が\u3000と出力されてしまっていたのでそこを無白に置き換えている。 実行するとリクエストを使った場合と比べて、Headless Chromeは実行時間が長かった。そこで、URL取得部分はJavascriptが使われていなかったので、そこはリクエストを用いることにして次の手順を進める。 ~ +それぞれのURL先のデータを取得 #ref(integ.png,nolink,left,nowrap,添付ファイルの画像) URLの一覧取得後、Headless Chromeを立ち上げてfor文で情報を得ていく。出力時にurlの値がうまく渡せなかったのでurlをglobal変数としている。~ **&size(14){最後に}; [#n74f41d0] 出力結果をテキストとして残したい場合は python3 (ファイル名).py > (ファイル名).txt とすることでテキストファイルに実行結果を出力できる。~ 上のコードの実行結果~ [[技術評論社の電子書籍サイト>https://gihyo.jp/dp]] #ref(crawler4.txt)~ #ref(result.png,nolink,left,nowrap,添付ファイルの画像,40%) [[Bloomberg>https://www.bloomberg.co.jp/]] #ref(Integ.txt)~ ~ また詳細ページなどの文が別れている場合、今回はfor文を使って指定のタグを見つけ次第繋げているが、あらかじめ文のリスト作りjoinという変数を使ってそれらを繋げるという方法もある。以下例。 >>> list = ['a', 'b', 'c'] 配列をこのようにつなげたい→ abc >>> ','.join(a) 'a,b,c' >>> ','.join(list).replace(',','') 'abc' *&color(#32cd32,){&size(20){スマホ加速度センサー};}; [#va304249] ** Node.jsのインストール [#h0d59ce9] +Node.jsインストーラーを以下のリンクよりダウンロードする。~ https://nodejs.org/en/download/~ Windows(64-bit)の場合は、以下の画像の赤線で囲んだものをクリックする。~ #ref(node_example1.png,nolink,,80%) +インストーラーを展開し、インストールを行う。~ 途中でライセンスに同意し、Nextをクリックしていくと、Node.jsのインストールが完了する。~ +インストール出来ているか確認する。~ コマンドプロンプトからインストールされたNode.jsとnpmを確認する。~ 以下の画像のように、コマンドプロンプトを開く。~ #ref(node_example2.png,nolink,,80%) そして、以下のコマンドより、Node.jsが入っていることとバージョンを確認する。~ node --version #ref(node_example3.png,nolink,,50%) 同様に、以下のコマンドより、npmが入っていることとバージョンを確認する。~ npm --version これで、node.jsは使える。~ しかし、Javascriptを使ったことないと難しいかもしれない。~ ** サンプルプログラムの使い方 [#ycac37bb] #ref(socket.zip) 上記のzipを展開し、コマンドプロンプトで展開したディレクトリにて、以下のコマンドで、サーバーが立ち上がる。~ node server.js ここで一度終了しておく。終了するにはCtrl+Cを押す。~ ** スマートフォンから接続 [#k4a20361] まず、スマートフォンとパソコンが同じ回線につながっていることを確認する。~ 次に、パソコンのコマンドプロンプトにてパソコンのIPアドレスを調べる。~ windowsならば以下のコマンドで確認できる。~ ipconfig コマンドを入力し、以下の赤線のIPアドレスを覚えておく。 #ref(node_example4.png,nolink,,80%) 次に、サンプルプログラムの中のindex.htmlをエディタで開き、赤線で囲んだリンクを先ほどのIPアドレスに変更する。 #ref(node_example5.png,nolink,,80%) ここで、またサーバーを立ち上げる。~ そして、自分のスマートフォンにて、先ほど変更したリンクに接続すると、加速度が取得できる。~ また、パソコンで同じリンクに接続すると、加速度が確認できる。~ そのままのプログラムでは、コマンドプロンプトに、スマホの加速度がx軸、y軸、z軸の順に半角スペース1つ分あけて表示される。~ であるから、コマンドプロンプトにて、 node server.js > a.txt もしくは node server.js > a.csv などと入力すると、以下のようなテキストファイルが完成する。~ #ref(node_example6.png,nolink,,80%) これらのファイルを使用してgnuplot等で、グラフ化することもできる。 #ref(node_example7.png,nolink,,80%) また、他のセンサーを使いたい場合は、server.jsやindex.htmlを書き換えて使うことができる。今回動作させたのはすべてもともとjava scriptにあるdevicemotionイベントを用いたもののみを使っているが、ほかのWEB上のAPIを用いることでさらにセンサーを増やすことが可能。以下は、センサーを追加した最新のファイル #ref(newsocket.zip) 追加したセンサー https://ics.media/entry/4095#devicemotion グラフ化 https://github.com/misohena/js_deviceorientation バイブレーション https://davidwalsh.name/vibration-api 追加 GPSセンサー http接続からの取得が禁止されていた https://www.atmarkit.co.jp/ait/articles/1605/13/news038.html 照度センサー 近接センサー このAPIはブラウザによって無効化された https://www.fxsitecompat.com/ja/docs/2018/ambient-light-and-proximity-sensor-apis-have-been-disabled/ ジャイロセンサー（傾き）もとからあった ジャイロセンサー（方角）方角を追加 加速度センサー（慣性）重力を含む加速度の追加 重力なし加速度や回転速度は、追加したものと似ているため追加していない server.jsでコマンドプロンプトに表示させるallとgallを並べて表示させたかったが、devicemotionイベントは常に値を とり続けるのに対してdeviceorientationイベントは値が変化したら実行されるからそれぞれの値を並べて表示できていない サーバー側でコンパスの値は取得しているのに、コンパスの向きがPC側だと変化しない グラフも同様で値の通信はできているのに、PC側だと変化しない 通信の流れ http://jxck.hatenablog.com/entry/20110730/1312042603 #ref(sumahosens.jpg,nolink,,80%) 参考:http://blog.infosign.co.jp/blog/member/akazawa/616/
