Vue.jsとFirebaseで作るミニWebサービス 2回目

えー前回のVue .js云々の記事からの続きです。
今回はFirebaseを使ってWebページを公開するところまでやってみたいと思います。

Firebaseのアカウント作成

まずはFirebaseのアカウントを作りましょう。
firebase.google.com
↑のリンクからアクセスしてログインしてアカウントを作成しよう。

プロジェクトの作成

下記の画面からお好きなプロジェクト名つけ、プルジェクトを作成する。
f:id:kyamisama:20190203101728p:plain

プロジェクト作成が完了すれば以下のような画面が表示されます。
f:id:kyamisama:20190203102525p:plain

クリックするとscriptタグで囲まれた数行のコードが表示されますのでコピーします。
f:id:kyamisama:20190203103008p:plain

コピーした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にログイン

firebase login

実行後、ブラウザが開きFreibase CLIにアクセスを許可しますか?と聞かれるので「許可」します。

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の画面が表示されました。

f:id:kyamisama:20190203112553p:plain

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サービス】です。

簡単に本書の紹介から

はじめにこの本の目的とターゲット

本書のターゲットとしては次のように明記されています。

・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)で事前準備

macbrewをインストールする

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の画面が表示されます。

f:id:kyamisama:20190105153730p:plain
Vue.js起動画面

ひとまず今日はここままで。
頑張って2回目の更新ができるように努力します!
ではでは〜

Seleniumを使ったスクレイピング

えー以前からUdemyと呼ばれるオンライン学習プログラムで勉強する為に色々と教材を買っていましたが、買ってそのままというのが常態化してきたので最近消化し始めました今日この頃です。

なので今回はUdemyで学習したことを書こうと思います!

Seleniumを使ってスクレイピングします!

と言うことで、タイトル通りスクレイピングします。
しかも今回はJupyter Notebookを使ってみました!
以前にJupyter Notebookをインストールしてそのまま放置してたやつですね。。。

ではでは早速Jupyter Notebookを起動してみます。

Jupyter Notebookの起動

以下のコマンドで起動してみる。

$ jupyter notebook

するとブラウザが立ち上がり以下の様な画面が表示される。
これで起動は完了。

f:id:kyamisama:20181201223353p:plain
Jupyter Notebook起動画面

Jupyter Notebookのワークディレクトリの作成

デフォルトで”Untitled Folder”ってフォルダ名がありますが、今回は別途作業フォルダを作成します。
作成方法はとても簡単で下記図の通り、左端の”NEW”と言うタブから”Folder”をクリックする事で新規でフォルダを作成できます。

f:id:kyamisama:20181201223932p:plain
New Create Folder

作成するとこんな感じ↓
”Untitled Folder 1”ってのが新しくできると思います。

f:id:kyamisama:20181201224207p:plain
New Create Folder2

フォルダの名前を変更したければ、ゴミ箱マークの横に”Rename”ってあるのでそこから変更できます。

Seleniumを使ったスクレイピング

作業フォルダも出来たので次に実際にPythonのコマンドを書いていく作業ファイルを準備します。
作業フォルダを作成した方法と同様に”New”→”Python [Root]”をクリックします。

f:id:kyamisama:20181201224717p:plain
New Create Work File

すると新しくブラウザタブが追加されます。基本的にはこの新しく追加されたページで作業を行います。
今回は練習みたいなものなので比較的スクレイピングがやり易いページから情報を取得したいと思います。
よくあるランキングサイトからのスクレイピングをやってみたいと思います。

ランキングサイトからの情報を取得する

今回はスクレイピングさせて頂く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

f:id:kyamisama:20181201230422p:plain
Ranking

そして、商品名の取得。

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

f:id:kyamisama:20181201230526p:plain
Product 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

f:id:kyamisama:20181201230817p:plain
Ranking2

これで3つの情報を取得できました。
ただ取得した情報がバラバラだと味気ないのでこの情報を合体させたいと思います。

最後に取得した情報をCSVに纏めて保存

それぞれ取得した情報をPandasを使って綺麗に整理して保存してみます。

import pandas as pd
df = pd.DataFrame()
df['ランキング'] = all_rank
df['商品名'] = all_name
df['投票数'] = all_point
df

f:id:kyamisama:20181201231221p:plain
Export to CSV

以上でSeleniumを使ったスクレイピング終了です!
思ってたより上手にスクレイピング出来たんじゃないかと思います。
実はスクレイピングで取得してみたい情報があるので完成した際にはここでお披露目出来ればと思っています。
またUdemyも素晴らしいWeb教材です。
たまに90%OFFセールをやっているのでその時はお買い得ですので、興味のある方は是非やってみてください。