沼田/専門ゼミ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
#topicpath
----
#contents
----
~
*&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で構成されているか...
ブラウザで
ctrl＋U
実際のニュースページに書かれている内容が書かれているか文...
検索のやり方
ctrl＋F
Javascriptの場合=>[[具体的な手順(Javascriptあり)へ>#u318a...
~
Javascriptがないサイトとして、今回は[[技術評論社の電子書...
このサイトは、本の一覧が表示されていて、気になる本をクリ...
スクレイピングするのは、すべての本の遷移先URLと本のタイト...
~
スクレイピングするのにあたってのおおまかな手順としては、...
そしてそれぞれのURLにアクセスしてその本に関する情報をスク...
+本の一覧ページからすべての本のURLの取得&aname(detanojs);
#ref(crawl.png,nolink,left,nowrap,添付ファイルの画像)
~
request.getでメインのURLのレスポンスをもらい、&color(#DCD...
~
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文でレスポンスをもらい&co...
また、複数のページをクロールするのでリクエストする際はses...
**&size(14){具体的な手順(Javascriptあり)}; [#u318a5fc]
次に、Javascriptを使う場合について説明する。
Javascriptをがある場合、seleniumと%%phantomJS%%を追加でイ...
~
-seleniumのインストール
pip3 install selenium
-chromdriverのインストール
wget https://chromedriver.storage.googleapis.com/2.37/ch...
unzip chromedriver_linux64.zip
pip3 install chromedriver
~
Javascriptがあるサイトとして、今回はBloombergという金融関...
スクレイピングするのは、すべてのニュースの遷移先URLとニュ...
~
今回も大まかな手順としてニュースのURLの一覧を取得する。そ...
+ニュースの一覧ページからすべてのニュースのURLの取得
#ref(detail.png,nolink,left,nowrap,添付ファイルの画像)
今回はHeadless Chromeを用いているので、レスポンスをもらう...
また、今回のページでは沙録、詳細文が一文づつタグ分けされ...
さらに、出力するときに文字コードが変わって改行が\u3000と...
実行するとリクエストを使った場合と比べて、Headless Chrome...
~
+それぞれのURL先のデータを取得
#ref(integ.png,nolink,left,nowrap,添付ファイルの画像)
URLの一覧取得後、Headless Chromeを立ち上げてfor文で情報を...
**&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文を使っ...
>>> list = ['a', 'b', 'c']
配列をこのようにつなげたい→ abc
>>> ','.join(a)
'a,b,c'
>>> ','.join(list).replace(',','')
'abc'
*&color(#32cd32,){&size(20){スマホ加速度センサー};}; [#va...
** Node.jsのインストール [#h0d59ce9]
+Node.jsインストーラーを以下のリンクよりダウンロードする。~
https://nodejs.org/en/download/~
Windows(64-bit)の場合は、以下の画像の赤線で囲んだものをク...
#ref(node_example1.png,nolink,,80%)
+インストーラーを展開し、インストールを行う。~
途中でライセンスに同意し、Nextをクリックしていくと、Node....
+インストール出来ているか確認する。~
コマンドプロンプトからインストールされた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をエディタで開き...
#ref(node_example5.png,nolink,,80%)
ここで、またサーバーを立ち上げる。~
そして、自分のスマートフォンにて、先ほど変更したリンクに...
また、パソコンで同じリンクに接続すると、加速度が確認でき...
そのままのプログラムでは、コマンドプロンプトに、スマホの...
であるから、コマンドプロンプトにて、
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...
#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.h...
照度センサー
近接センサー このAPIはブラウザによって無効化された
https://www.fxsitecompat.com/ja/docs/2018/ambient-light-a...
ジャイロセンサー（傾き）もとからあった
ジャイロセンサー（方角）方角を追加
加速度センサー（慣性）重力を含む加速度の追加
重力なし加速度や回転速度は、追加したものと似ているため追...
server.jsでコマンドプロンプトに表示させるallとgallを並べ...
とり続けるのに対してdeviceorientationイベントは値が変化し...
サーバー側でコンパスの値は取得しているのに、コンパスの向...
グラフも同様で値の通信はできているのに、PC側だと変化しない
通信の流れ http://jxck.hatenablog.com/entry/20110730/131...
#ref(sumahosens.jpg,nolink,,80%)
参考:http://blog.infosign.co.jp/blog/member/akazawa/616/
終了行:
#topicpath
----
#contents
----
~
*&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で構成されているか...
ブラウザで
ctrl＋U
実際のニュースページに書かれている内容が書かれているか文...
検索のやり方
ctrl＋F
Javascriptの場合=>[[具体的な手順(Javascriptあり)へ>#u318a...
~
Javascriptがないサイトとして、今回は[[技術評論社の電子書...
このサイトは、本の一覧が表示されていて、気になる本をクリ...
スクレイピングするのは、すべての本の遷移先URLと本のタイト...
~
スクレイピングするのにあたってのおおまかな手順としては、...
そしてそれぞれのURLにアクセスしてその本に関する情報をスク...
+本の一覧ページからすべての本のURLの取得&aname(detanojs);
#ref(crawl.png,nolink,left,nowrap,添付ファイルの画像)
~
request.getでメインのURLのレスポンスをもらい、&color(#DCD...
~
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文でレスポンスをもらい&co...
また、複数のページをクロールするのでリクエストする際はses...
**&size(14){具体的な手順(Javascriptあり)}; [#u318a5fc]
次に、Javascriptを使う場合について説明する。
Javascriptをがある場合、seleniumと%%phantomJS%%を追加でイ...
~
-seleniumのインストール
pip3 install selenium
-chromdriverのインストール
wget https://chromedriver.storage.googleapis.com/2.37/ch...
unzip chromedriver_linux64.zip
pip3 install chromedriver
~
Javascriptがあるサイトとして、今回はBloombergという金融関...
スクレイピングするのは、すべてのニュースの遷移先URLとニュ...
~
今回も大まかな手順としてニュースのURLの一覧を取得する。そ...
+ニュースの一覧ページからすべてのニュースのURLの取得
#ref(detail.png,nolink,left,nowrap,添付ファイルの画像)
今回はHeadless Chromeを用いているので、レスポンスをもらう...
また、今回のページでは沙録、詳細文が一文づつタグ分けされ...
さらに、出力するときに文字コードが変わって改行が\u3000と...
実行するとリクエストを使った場合と比べて、Headless Chrome...
~
+それぞれのURL先のデータを取得
#ref(integ.png,nolink,left,nowrap,添付ファイルの画像)
URLの一覧取得後、Headless Chromeを立ち上げてfor文で情報を...
**&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文を使っ...
>>> list = ['a', 'b', 'c']
配列をこのようにつなげたい→ abc
>>> ','.join(a)
'a,b,c'
>>> ','.join(list).replace(',','')
'abc'
*&color(#32cd32,){&size(20){スマホ加速度センサー};}; [#va...
** Node.jsのインストール [#h0d59ce9]
+Node.jsインストーラーを以下のリンクよりダウンロードする。~
https://nodejs.org/en/download/~
Windows(64-bit)の場合は、以下の画像の赤線で囲んだものをク...
#ref(node_example1.png,nolink,,80%)
+インストーラーを展開し、インストールを行う。~
途中でライセンスに同意し、Nextをクリックしていくと、Node....
+インストール出来ているか確認する。~
コマンドプロンプトからインストールされた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をエディタで開き...
#ref(node_example5.png,nolink,,80%)
ここで、またサーバーを立ち上げる。~
そして、自分のスマートフォンにて、先ほど変更したリンクに...
また、パソコンで同じリンクに接続すると、加速度が確認でき...
そのままのプログラムでは、コマンドプロンプトに、スマホの...
であるから、コマンドプロンプトにて、
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...
#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.h...
照度センサー
近接センサー このAPIはブラウザによって無効化された
https://www.fxsitecompat.com/ja/docs/2018/ambient-light-a...
ジャイロセンサー（傾き）もとからあった
ジャイロセンサー（方角）方角を追加
加速度センサー（慣性）重力を含む加速度の追加
重力なし加速度や回転速度は、追加したものと似ているため追...
server.jsでコマンドプロンプトに表示させるallとgallを並べ...
とり続けるのに対してdeviceorientationイベントは値が変化し...
サーバー側でコンパスの値は取得しているのに、コンパスの向...
グラフも同様で値の通信はできているのに、PC側だと変化しない
通信の流れ http://jxck.hatenablog.com/entry/20110730/131...
#ref(sumahosens.jpg,nolink,,80%)
参考:http://blog.infosign.co.jp/blog/member/akazawa/616/
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
