Vue.jsとFirebaseで作るミニWebサービス 2回目
えー前回のVue .js云々の記事からの続きです。
今回はFirebaseを使ってWebページを公開するところまでやってみたいと思います。
Firebaseのアカウント作成
まずはFirebaseのアカウントを作りましょう。
firebase.google.com
↑のリンクからアクセスしてログインしてアカウントを作成しよう。
プロジェクトの作成
下記の画面からお好きなプロジェクト名つけ、プルジェクトを作成する。
プロジェクト作成が完了すれば以下のような画面が表示されます。
クリックするとscriptタグで囲まれた数行のコードが表示されますのでコピーします。
コピーしたscriptをmymarkdown直下のindex.html内に貼り付けます。
貼り付け後のindex.htmlです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>test_markdown</title> </head> <body> <div id="app"></div> <script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "AIzaSyCUQ5gnAAi4TCXikx****************", authDomain: "mymarkdown-50743.firebaseapp.com", databaseURL: "https://mymarkdown-50743.firebaseio.com", projectId: "mymarkdown-50743", storageBucket: "", messagingSenderId: "908132487349" }; firebase.initializeApp(config); </script> <script src="./build.js"></script> </body> </html>
firebase-toolsのインストール
npm install -g firebase-tools
firebase initの実行
firebase init
init時には初めにどの機能を利用するか聞かれるので、カーソルをHostingに合わせスペースキーを押して選択状態にし、エンターをおす。
? What do you want to use as your public directory? dist
↑のように聞かれるのでdistと入力する。
? Configure as a single-page app (rewrite all urls to /index.html)? No
その後また↑のように聞かれるのでエンターを押す。そのままのエンターは「No」の意味である。
設定ファイルの修正(webpack.config.js)
下記3箇所を修正する。
1箇所目
module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/', #★ここのパスを変更 filename: 'build.js' },
2、3箇所目
devServer: { contentBase: 'dist', #★追加 historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: false, #★falseに変更 compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
設定ファイルの修正(dist.index.html)
まずはdist/index.htmlがfirebase_cliで自動生成されたので削除します。
rm dist/index.html
その後mymarkdown直下のindex.htmlをdistディレクトリに移動させる。
mv index.html dist/
移動後、index.htmlの修正
firebase.initializeApp(config); </script> <script src="./build.js"></script> #★このように変更する </body> </html>
設定ファイルの修正(gitignore)
index.htmlをgit管理する為に以下のように修正する。
.DS_Store node_modules/ dist/ !dist/index.html #★追加 npm-debug.log yarn-error.log # Editor directories and files .idea *.suo *.ntvs* *.njsproj *.sln
buildの実行
npm run build
特段エラーなど表示されなければOK
デプロイの実行
firebase deploy
私はここでエラーが表示されました。
Error: No project active. Run with --project <projectId> or define an alias by running firebase use --add
なのでエラーの指示通りに下記コマンドを実行
$ firebase use --add ? Which project do you want to add? mymarkdown-50743 ? What alias do you want to use for this project? (e.g. staging) mast Created alias mast for mymarkdown-50743. Now using alias mast (mymarkdown-50743)
その後再度デプロイすると「Deploy complete!」と表示され、公開用のURLが表示されましたのでブラウザでアクセスするとmacから実行していた「npm run dev」と同じようにブラウザ上でVue.jsの画面が表示されました。
HTTPサーバ構築メモ
やってきました!サーバ系構築シリーズ第2回!
前回はTFTPサーバの構築メモをやりましたが、今回はHTTPサーバです!
NW機器の検証業務でOSのインストール項目ってのがあって、まぁ簡単に言うとHTTPサーバからOSのイメージを取ってきて問題なくOSのインストールが可能かどうか調べるって感じです。
んで、その検証の為にHTTPサーバを拵えたのでその時の手順をメモしようというお話です。
では早速いってみよう!
httpdモジュールのインストール
[root@localhost ~]# yum -y install httpd 読み込んだプラグイン:fastestmirror Loading mirror speeds from cached hostfile base | 3.6 kB 00:00 centosplus | 3.4 kB 00:00 extras | 3.4 kB 00:00 updates | 3.4 kB 00:00 依存性の解決をしています --> トランザクションの確認を実行しています。 ---> パッケージ httpd.x86_64 0:2.4.6-88.el7.centos を インストール --> 依存性の処理をしています: httpd-tools = 2.4.6-88.el7.centos のパッケージ: httpd-2.4.6-88.el7.centos.x86_64 --> 依存性の処理をしています: /etc/mime.types のパッケージ: httpd-2.4.6-88.el7.centos.x86_64 --> トランザクションの確認を実行しています。 ---> パッケージ httpd-tools.x86_64 0:2.4.6-88.el7.centos を インストール ---> パッケージ mailcap.noarch 0:2.1.41-2.el7 を インストール --> 依存性解決を終了しました。 依存性を解決しました ================================================================================ Package アーキテクチャー バージョン リポジトリー 容量 ================================================================================ インストール中: httpd x86_64 2.4.6-88.el7.centos base 2.7 M 依存性関連でのインストールをします: httpd-tools x86_64 2.4.6-88.el7.centos base 90 k mailcap noarch 2.1.41-2.el7 base 31 k トランザクションの要約 ================================================================================ インストール 1 パッケージ (+2 個の依存関係のパッケージ) 総ダウンロード容量: 2.8 M インストール容量: 9.6 M Downloading packages: (1/3): httpd-tools-2.4.6-88.el7.centos.x86_64.rpm | 90 kB 00:00 (2/3): mailcap-2.1.41-2.el7.noarch.rpm | 31 kB 00:00 (3/3): httpd-2.4.6-88.el7.centos.x86_64.rpm | 2.7 MB 00:00 -------------------------------------------------------------------------------- 合計 3.3 MB/s | 2.8 MB 00:00 Running transaction check Running transaction test Transaction test succeeded Running transaction インストール中 : mailcap-2.1.41-2.el7.noarch 1/3 インストール中 : httpd-tools-2.4.6-88.el7.centos.x86_64 2/3 インストール中 : httpd-2.4.6-88.el7.centos.x86_64 3/3 検証中 : httpd-tools-2.4.6-88.el7.centos.x86_64 1/3 検証中 : mailcap-2.1.41-2.el7.noarch 2/3 検証中 : httpd-2.4.6-88.el7.centos.x86_64 3/3 インストール: httpd.x86_64 0:2.4.6-88.el7.centos 依存性関連をインストールしました: httpd-tools.x86_64 0:2.4.6-88.el7.centos mailcap.noarch 0:2.1.41-2.el7 完了しました! [root@localhost ~]#
テストページの作成
[root@localhost ~]# touch index.html /var/www/html/ [root@localhost html]# cat index.html <html> <body> hello world </body> </html> [root@localhost ~]#
httpアクセスを許可
[root@localhost ~]# firewall-cmd --add-service=http --zone=public --permanent success [root@localhost ~]# firewall-cmd --reload success
SElinuxをOFF
[root@localhost html]# setenforce 0
httpdの起動
[root@localhost ~]# systemctl start httpd
テストページにアクセスしページ情報を取得できるか確認
[root@localhost html]# wget http://192.168.151.2/index.html --2019-01-17 11:38:42-- http://192.168.151.2/index.html 192.168.151.2:80 に接続しています... 接続しました。 HTTP による接続要求を送信しました、応答を待っています... 200 OK 長さ: 45 [text/html] `index.html.1' に保存中 100%[======================================>] 45 --.-K/s 時間 0s 2019-01-17 11:38:42 (2.33 MB/s) - `index.html.1' へ保存完了 [45/45] [root@localhost html]# ls index.html index.html.1 [root@localhost html]# cat index.html.1 <html> <body> hello world </body> </html> [root@localhost html]#
以上!終わり!
本当に検証するだけに立てたサーバなので色々と設定を省略してますww
TFTPサーバ構築メモ
先日TFTPサーバを構築したのでその時の手順やらのメモ書きです。
TFTPサーバのモジュールインストール
[root@localhost ~]# yum install tftp tftp-server 読み込んだプラグイン:fastestmirror Determining fastest mirrors base | 3.6 kB 00:00 centosplus | 3.4 kB 00:00 extras | 3.4 kB 00:00 updates | 3.4 kB 00:00 updates/7/x86_64/primary_db | 1.3 MB 00:00 依存性の解決をしています --> トランザクションの確認を実行しています。 ---> パッケージ tftp.x86_64 0:5.2-22.el7 を インストール ---> パッケージ tftp-server.x86_64 0:5.2-22.el7 を インストール --> 依存性解決を終了しました。 依存性を解決しました ================================================================================ Package アーキテクチャー バージョン リポジトリー 容量 ================================================================================ インストール中: tftp x86_64 5.2-22.el7 base 38 k tftp-server x86_64 5.2-22.el7 base 47 k トランザクションの要約 ================================================================================ インストール 2 パッケージ 総ダウンロード容量: 85 k インストール容量: 117 k Is this ok [y/d/N]: y Downloading packages: (1/2): tftp-5.2-22.el7.x86_64.rpm | 38 kB 00:00 (2/2): tftp-server-5.2-22.el7.x86_64.rpm | 47 kB 00:00 -------------------------------------------------------------------------------- 合計 227 kB/s | 85 kB 00:00 Running transaction check Running transaction test Transaction test succeeded Running transaction インストール中 : tftp-5.2-22.el7.x86_64 1/2 インストール中 : tftp-server-5.2-22.el7.x86_64 2/2 検証中 : tftp-server-5.2-22.el7.x86_64 1/2 検証中 : tftp-5.2-22.el7.x86_64 2/2 インストール: tftp.x86_64 0:5.2-22.el7 tftp-server.x86_64 0:5.2-22.el7 完了しました! [root@localhost ~]#
xinetdのインストールも忘れずに
[root@localhost ~]# yum install xinetd 読み込んだプラグイン:fastestmirror Loading mirror speeds from cached hostfile 依存性の解決をしています --> トランザクションの確認を実行しています。 ---> パッケージ xinetd.x86_64 2:2.3.15-13.el7 を インストール --> 依存性解決を終了しました。 依存性を解決しました ================================================================================ Package アーキテクチャー バージョン リポジトリー 容量 ================================================================================ インストール中: xinetd x86_64 2:2.3.15-13.el7 base 128 k トランザクションの要約 ================================================================================ インストール 1 パッケージ 総ダウンロード容量: 128 k インストール容量: 261 k Is this ok [y/d/N]: y Downloading packages: xinetd-2.3.15-13.el7.x86_64.rpm | 128 kB 00:00 Running transaction check Running transaction test Transaction test succeeded Running transaction インストール中 : 2:xinetd-2.3.15-13.el7.x86_64 1/1 検証中 : 2:xinetd-2.3.15-13.el7.x86_64 1/1 インストール: xinetd.x86_64 2:2.3.15-13.el7 完了しました! [root@localhost ~]#
xinetdの設定変更
[root@localhost ~]# cat /etc/xinetd.d/tftp # default: off # description: The tftp server serves files using the trivial file transfer \ # protocol. The tftp protocol is often used to boot diskless \ # workstations, download configuration files to network-aware printers, \ # and to start the installation process for some operating systems. service tftp { socket_type = dgram protocol = udp wait = yes user = root server = /usr/sbin/in.tftpd server_args = -s /var/lib/tftpboot disable = no ←★デフォルトだとyesなのでnoに変更する per_source = 11 cps = 100 2 flags = IPv4 }
ファイアウォールの設定
[root@localhost ~]# firewall-cmd --zone=public --add-port=69/udp --permanent←ポートで指定する場合 [root@localhost ~]# firewall-cmd --add-service=tftp --zone=public --permanent←サービスで指定する場合 [root@localhost ~]# firewall-cmd --reload←ファイアウォールの再読み込み
xinetdサービスの起動
[root@localhost ~]# systemctl start xinetd
動作確認
TFTPサーバに向けてテキトーなファイルのアップロードを行う。
今回は192.168.2.161の別サーバからtest.cfgと言うファイルをアップロードしてみます。
192.168.2.161側の操作
[root@localhost ~]# tftp -v 192.168.151.2 -c put test.cfg Connected to 192.168.151.2 (192.168.151.2), port 69 putting test.cfg to 192.168.151.2:test.cfg [netascii] Sent 17618 bytes in 0.0 seconds [4469595 bit/s] [root@localhost ~]#
TFTPサーバ側の操作
[root@localhost tftpboot]# ll 合計 24 -rw-rw-rw-. 1 nobody nobody 17618 1月 16 13:53 test.cfg -rwxrwxrwx. 1 root root 5 1月 16 11:30 test.txt [root@localhost tftpboot]#
jinja2を使ってコンフィグの自動生成をやってみた
最近業務で似たような検証環境をいくつも構築する事が多くなり、構築するたびにコンフィグを用意するのは面倒になっていました。
なのでjinja2を使って自動でコンフィグを生成するようにしてみました。
実行環境
- Winodows7 64bit
- Python 3.7.0
- pip 18.1
- jinja2 2.10
jinja2のインストール
pip install jinja2
テンプレートファイルの準備
※一部のコンフィグのみ載せています。
★OSPF設定 set protocols ospf area {{area_number}} interface lo0.0 passive set protocols ospf area {{area_number}} interface lo0.0 metric 10 set protocols ospf area {{area_number}} interface ge-0/0/0.0 interface-type p2p set protocols ospf area {{area_number}} interface ge-0/0/0.0 metric 100 ★BGP設定 set routing-options router-id {{Loopback}} set routing-options autonomous-system {{AS_number}} set protocols bgp group VPN local-address {{Loopback}} set protocols bgp group VPN cluster {{Loopback}} set protocols bgp group VPN peer-as {{AS_number}} set protocols bgp group VPN neighbor {{Opp_address}} import passall set protocols bgp group VPN neighbor {{Opp_address}} export passall
jinja2で生成するスクリプトの準備
#! /usr/bin/env python # -*- coding: utf-8 -*- from jinja2 import Template, Environment, FileSystemLoader env = Environment(loader=FileSystemLoader('.')) template = env.get_template('template.txt') data = { "area_number": "0.0.0.0", "Loopback": "192.168.27.129", "AS_number": "65000", "Opp_address": "192.168.27.3", } rendered = template.render(data) print(str(rendered))a
実行結果
$ python config_generate.py ★OSPF設定 set protocols ospf area 0.0.0.0 interface lo0.0 passive set protocols ospf area 0.0.0.0 interface lo0.0 metric 10 set protocols ospf area 0.0.0.0 interface ge-0/0/0.0 interface-type p2p set protocols ospf area 0.0.0.0 interface ge-0/0/0.0 metric 100 ★BGP設定 set routing-options router-id 192.168.27.129 set routing-options autonomous-system 65000 set protocols bgp group VPN local-address 192.168.27.129 set protocols bgp group VPN cluster 192.168.27.129 set protocols bgp group VPN peer-as 65000} set protocols bgp group VPN neighbor 192.168.27.3 import passall set protocols bgp group VPN neighbor 192.168.27.3 export passall
以上です。
上手くコンフィグが生成されていますね。
本当はこのコンフィグを機器に流し込むところまでやりたいんですが、それはまたの機会と言う事で!
Juniper QFXでdel intを実行する際は注意しよう!
タイトル通りQFXでdelete interfaceを実行する際は注意しましょうって話です。
まぁQFXに限らず、deleteコマンドを実行する際は注意は必要なんですけどね。。。
私は業務中にdelete interface実行後、commitを実行してしまい見事にマネージメントインタフェースの設定を消してしまい、SSH接続を弾き出された経験があります。
その後はサーバ室まで走ってコンソールケーブルでマネージメントインタフェースの再設定を行い復旧しました。
もしdelete interfaceを実行するならコミット前に再度マネージメントインタフェースの設定を投入して、それからコミットの実行する事で今回の減少は回避できますので次回からはそうしましょう。
そもそも何故delete intefaceを実行する事になったかと言うと、QFXに設定を入れようとコンフィグを確認するとすでに別のコンフィグが設定されていて一度設定を消す必要があったからですね。
大量にインタフェースの設定がされていて個別に消すのが面倒で、delete intefaceで横着してしまったわけです。。
いやー反省ですね。
次からは十分注意したいと思います。
Vue.jsとFirebaseで作るミニWebサービス 1回目
2019年あけましておめでとうございます。
最近ブログ更新しなさ過ぎて、運営様からそろそろ記事を書けとメールをいただきました。
2019年はなるべく更新できるよう頑張りたいと思います。
そんなわけで、今日からVue.jsを使ってミニWebサービスを作ってみたいと思います。
今回参考にさせて頂く参考書はこちら
【Vue.jsとFirebaseで作るミニWebサービス】です。
改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ(NextPublishing))
- 作者: 渡邊達明
- 出版社/メーカー: インプレスR&D
- 発売日: 2018/10/05
- メディア: Kindle版
- この商品を含むブログを見る
簡単に本書の紹介から
はじめにこの本の目的とターゲット
本書のターゲットとしては次のように明記されています。
・HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人
・複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人
・普段デザイナーとしてマークアップしており、フロントエンドの新しめな環境でのサイト構築を経験してみたい人
・シングルページアプリーケーション、Vue.jsってものを触ってみたい、またはそれらの挫折経験がある人
・やったことないけどとにかくWebサービスを作ってみたい人
・FirebaseのWeb版を使ってみたい人、どんなことができるのか知りたい人
・普段サーバーサイドやネイティブアプリを作っていて、Webフロントエンドをさらっと触ってみたい人
私の場合は「やった事ないけどとにかくWebサービスを作ってみたい人」に当てはまります。
ターゲット層を見てわかる通り、初心者向けにも対応しています。
気になる方は是非お手にとってご覧になって下さい。
SPA(シングルページアプリケーション)について
そもそもシングルページアプリケーションってなんなの?
簡単に要約すると、Webページを遷移させずに情報を更新する事、今までのWebサイトの仕組みだとページのURLやセッションの情報に紐付き、サーバから出力するHTMLを変更する事でコンテンツ(情報)を切り替えていた。
SPAフレームワークを使うメリット
ページの再読み込みがなくてもサイトの内容を切り替える事ができるです。
そのためにURLやキャッシュにページの内容を記録しておくような機能、それらに応じて適切なデータを返すといった仕組みが必要になってきます。
そのあたりの機能を使いやすまとめたものがSPAフレームワークとなっています。
Firebaseで何ができるのか
今までWebサービスを作る上でサーバサイドプログラムが必要だった部分の一部が、コードを書かずに利用できる。
・Hosting:静的サイトのホスティング及びSSL対応
・Authentication:Googleアカウントを利用してログイン、アカウント情報の取得
・Realtime Database:NoSQLなデータベースの読み書き
これらの機能を利用する事で、Webサービスを公開まで開発することが非常に簡単に可能になっている。
作業用端末(Mac)で事前準備
macにbrewをインストールする
brew本家サイトにアクセスすると下記のようにコマンドが紹介されているのでそのままコピーしてmacのターミナルで実行する。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
実行後、以下コマンドで確認する。
$ which brew /usr/local/bin/brew
nodebrewのインストール
下記コマンドでnodebrewをインストールしよう。
$ brew install nodebrew
コマンド実行後、下記コマンドで確認
$ brew list nodebrew
nodebrewのセットアップ
下記コマンドでnodebrewをセットアップしよう
$ nodebrew setup
セットアップ実行時のターミナルログにPATHを追加するような指示が出るのでPATHの追加を行い.bash_profileの反映を行う。
$ export PATH=$HOME/.nodebrew/current/bin:$PATH $ source .bash_profile
Node.jsとnpmのインストール
現在の安定板をインストールするのでオプションは「stable」を使う。実行後「Installed Successfully」と出ればOK
$ nodebrew install-binary stable
問題なく任意のバージョンがインストールされていることを確認する。
$ nodebrew list v10.15.0 v11.6.0 current: none
私は安定版と最新版の2つを入れておきました。
今回は安定版を使用する。下記コマンドで安定版を有効にしよう。
$ nodebrew use v10.15.0
下記コマンドでNode.jsとnpmがインストールされている事を確認する。
$ node -v v10.15.0 $ npm -v 6.4.1
開発環境のセットアップ
ここから本書に沿って手順を進める。
vue-templateのダウンロードとセットアップ
下記コマンドで「vue-cli」をインストールする
$ npm install -g vue-cli
問題なくインストールできたか次のコマンドで確認する
vue -h
作業用ディレクトリに移動して、テンプレートダウンロードの準備を進める
$ cd 作業ディレクトリ名 $ vue init webpack-simple Test_Markdown
いくつか質問されますが、最後の「Use sass?」以外はそのままEnterでOK
ちなみに私の場合はこんな感じでした。
Project nameの箇所だけ小文字にしています。
最初大文字にしていたんですが、大文字は使えないみたいで怒られました・・・
$ vue init webpack-simple Test_Markdown ? Project name test_markdown ? Project description A Vue.js project ? Author ? License MIT ? Use sass? Yes
作成したプロジェクトディレクトリに移動し、npmのインストールを実行
$ cd Test_Markdown/ $ npm install
最後にnpmを起動させる
$ npm dev run
するとブラウザが立ち上がりVue.jsの画面が表示されます。
ひとまず今日はここままで。
頑張って2回目の更新ができるように努力します!
ではでは〜
Seleniumを使ったスクレイピング
えー以前からUdemyと呼ばれるオンライン学習プログラムで勉強する為に色々と教材を買っていましたが、買ってそのままというのが常態化してきたので最近消化し始めました今日この頃です。
なので今回はUdemyで学習したことを書こうと思います!
Seleniumを使ってスクレイピングします!
と言うことで、タイトル通りスクレイピングします。
しかも今回はJupyter Notebookを使ってみました!
以前にJupyter Notebookをインストールしてそのまま放置してたやつですね。。。
ではでは早速Jupyter Notebookを起動してみます。
Jupyter Notebookの起動
以下のコマンドで起動してみる。
$ jupyter notebook
するとブラウザが立ち上がり以下の様な画面が表示される。
これで起動は完了。
Jupyter Notebookのワークディレクトリの作成
デフォルトで”Untitled Folder”ってフォルダ名がありますが、今回は別途作業フォルダを作成します。
作成方法はとても簡単で下記図の通り、左端の”NEW”と言うタブから”Folder”をクリックする事で新規でフォルダを作成できます。
作成するとこんな感じ↓
”Untitled Folder 1”ってのが新しくできると思います。
フォルダの名前を変更したければ、ゴミ箱マークの横に”Rename”ってあるのでそこから変更できます。
Seleniumを使ったスクレイピング
作業フォルダも出来たので次に実際にPythonのコマンドを書いていく作業ファイルを準備します。
作業フォルダを作成した方法と同様に”New”→”Python [Root]”をクリックします。
すると新しくブラウザタブが追加されます。基本的にはこの新しく追加されたページで作業を行います。
今回は練習みたいなものなので比較的スクレイピングがやり易いページから情報を取得したいと思います。
よくあるランキングサイトからのスクレイピングをやってみたいと思います。
ランキングサイトからの情報を取得する
今回はスクレイピングさせて頂くWebサイトはこちら
[ランキング] 頂上決戦!一番うまいインスタント袋麺ランキング1位から10位|サッポロ一番,うまかっちゃん,チキンラーメン|他 - gooランキング
インスタントラーメンのランキングサイトから以下の3つの情報を取得してみます。
- 順位
- 商品名
- 投票数
まずは、Seleniumをインポートします。ちなみにこれを動作させるとGoogle Chromeが起動します。
from selenium import webdriver browser=webdriver.Chrome() browser.get('https://ranking.goo.ne.jp/column/5524/ranking/51628/')
次に、順位のみを取得します。
all_rank = [] elem_rank = browser.find_elements_by_class_name('ranking-number') for rank in elem_rank: elem_rank = rank.text all_rank.append(elem_rank) all_rank
そして、商品名の取得。
all_name = [] elem_name = browser.find_elements_by_class_name('hdg') for name in elem_name: elem_name = name.text all_name.append(elem_name) all_name
最後に投票数の取得。
points = browser.find_elements_by_class_name('article-meta') all_point = [] for _point in points: point = _point.text all_point.append(point) all_point
これで3つの情報を取得できました。
ただ取得した情報がバラバラだと味気ないのでこの情報を合体させたいと思います。
最後に取得した情報をCSVに纏めて保存
それぞれ取得した情報をPandasを使って綺麗に整理して保存してみます。
import pandas as pd df = pd.DataFrame() df['ランキング'] = all_rank df['商品名'] = all_name df['投票数'] = all_point df
以上でSeleniumを使ったスクレイピング終了です!
思ってたより上手にスクレイピング出来たんじゃないかと思います。
実はスクレイピングで取得してみたい情報があるので完成した際にはここでお披露目出来ればと思っています。
またUdemyも素晴らしいWeb教材です。
たまに90%OFFセールをやっているのでその時はお買い得ですので、興味のある方は是非やってみてください。