Colab ~ スクレイピングした結果を html で可視化する方法 ~ プログラミング入門 –

6 min

本記事では、Google Colaboratory からスクレイピングをして、その結果を可視化する方法を紹介します。具体的には、下記処理を実行する関数を紹介します。
① 検索条件の指定
② スクレイピング関数の実行・DataFrameの取得
③ DataFrameの可視化
④ 可視化結果をhtmlファイルとして保存

※ 下記記事も合わせて参照ください。

広告_零号機

こんなお困りごとないですか?

大学生

大学生

プログラミングの始め方が解らない。というか、プログラミングを学んで何が得するのかが解らないからモチベーションが上がらないんだよね。

大学院性

大学院性

レポート用にグラフで可視化したいけど、Excelのグラフはダサいのよね。

若手社会人

若手社会人

Pythonを使って遊んでみたいけどネタが足りなくて困っている。
何か面白そうなネタが無いかな。

解決方法は?

あるよ。

忠犬SE

忠犬SE

Googleアカウントさえあれば、Google Colaboratoryというサービスを使って初期セットアップ不要でPythonというプログラミングが使えるんだよ。

忠犬SE

忠犬SE

プログラミングを上手く使えば、煩わしい作業が効率化できるよ。

例えば、下記のように検索条件毎の検索結果を自動でグラフ出力するような処理はコンピューターが得意なことなんだ。

ちなみに、ここではPlotlyというPythonのフレームワークを使っているんだけど、見た目がかっこよくてお気に入りなんだよね。

忠犬SE

忠犬SE

キーワード毎の検索件数の推移(横:年、縦:件数(対数))

本記事の難易度はかなり高いから、後ほど、 本記事だけでは説明しきれないので、後ほど解説を投稿するね。

忠犬SE

忠犬SE

スクレイピングして取得したデータをグラフで可視化する

  1. STEP

    【準備】Google Colaboratoryを始める

    下記記事などを参考に、Google Colaboratory(略称:Colab)で新しいノートブックを作成します。

    もしくは、githubにソースを公開しておりますので下記リンクをクリックしてください。

    githubで開く

  2. STEP

    【準備】全体処理概要理解

    今回の処理は3つに分かれています。

    1. スクレイピング関数の定義
      • 入力:キーワードリスト、検索開始年、検索終了年
      • 出力:キーワード、検索年、検索ヒット件数のDataFrame
    2. Googleドライブのマウント
      • Colab特有の処理です。
      • Googleドライブをマウントすることで、Googleドライブにアクセス可能になり、ファイルへの保存が可能になります。また、Googleドライブ上のファイルの読み込みも可能になります。
      • ファイルを扱えるようになることで、実行結果をデータとして蓄積していくことが可能なります。
    3. メイン処理
      1. スクレイピング関数の実行・DataFrameの取得
      2. DataFrameの可視化
      3. 可視化結果をhtmlファイルとして保存
  3. STEP

    【実行1】スクレイピング関数の定義

    下記リンクより Colab を起動し、「スクレイピング関数の定義」のセルをコピーします。
    もしくは、そのまますべてのセルを実行してしまってもかまいません。
    ※コードが長くなるので本記事には直接記載しておりません。

    Open In Colab
  4. STEP

    【実行2】 Googleドライブのマウント

    目的

    Colabのツールバーにて[ファイル]_[ドライブで探す]をクリックします。
    Colab上で実行しているファイル(.ipynb)がGoogleドライブのColab Notebooksというディレクトリに格納されていることが解ります。
    Google ドライブをマウントしてColabからこのディレクトリへのアクセスを可能にします。

    Google ドライブ

    実行

    Colabにてコードセルを追加して、下記コードをコピーして実行します。

    # Googleドライブのマウント
    from google.colab import drive
    drive.mount('/content/drive')
    
    import os
    # Colab Notebooksへの相対パスを定義
    _colab_dir = "./drive/MyDrive/Colab Notebooks"
    # カレントディレクトリの確認
    print(os.getcwd())
    # Colab Notebooksのファイル一覧を取得。Colab Notebooksにアクセス出来ていることを確認
    print(os.listdir(_colab_dir))

    下記が出力されます。

    “https://accounts.google.com/・・・”のリンクをクリックします。Googleアカウントでログインして進めていくと、「このコードをコピーし、アプリケーションに切り替えて貼り付けてください。」という画面が表示されるので、コードをコピーしてColabの出力セルの”Enter your authorization code:”のテキストボックスにてペーストしてEnterキーを押下します。「Mounted at /content/drive」が出力されたらマウント成功です。

    Google ドライブ上のColab Notebooksフォルダに格納されているファイル一覧も出力されます。
    Colab Notebooksにアクセス出来ていることを確認してください。

  5. STEP

    【実行3】 メイン処理

    Colabにてコードセルを追加して、下記コードをコピーします。(まだ実行しません)
    必要に応じて、検索条件を編集した後、コードを実行します。

    検索条件にもよりますが、処理が終了するまで~60分程度は要しますので、別のことをして時間を有意義に使ってください。

    Colabでは一定時間アクセスが無いとセッションが切れてしまいますが、実行結果をhtmlとして保存しておりますので後から実行結果を確認することが可能ですのでご安心下さい。
    (実はこのような時間の有効活用がプログラミングの醍醐味だったりします)

    # ===============
    # 検索条件の指定
    # ===============
    # 検索キーワードリスト
    p_keyword_list = [
        "AI",
        "ビッグデータ",
        "ディープラーニング",
        "gpgpu",
        "cuDNN"
    ]
    # 検索開始年
    p_from = 2015
    # 検索終了年
    p_to = 2020
    
    # ===============
    # スクレイピング関数の実行・DataFrameの取得
    # ===============
    df = get_search_hit_countlist(p_keyword_list, p_from, p_to)
    
    # ===============
    # DataFrameの可視化
    # ===============
    from plotly.offline import iplot, plot, download_plotlyjs, init_notebook_mode
    import plotly.graph_objs as go
    
    fig = px.line(df, x="year", y="hit_count", color='keyword',log_y=True)
    fig.show()
    
    # ===============
    # 可視化結果をhtmlファイルとして保存
    # ===============
    import datetime
    time = datetime.datetime.now()
    _filename = time.strftime('%Y%m%d%H%M%S')
    plot(fig, filename=_colab_dir + "/" + _filename + ".html", auto_open=False)

    処理が終了すると出力セルに下記のようなグラフが出力されます。

    また、Google ドライブのColab Notebooksフォルダにhtmlファイルが作成されます。
    自身のPCにダウンロードしてダブルクリックするとブラウザでグラフが表示可能です。

最後に

本日は、Google Colaboratory を使用してPythonプログラミングを実行してみました。 Google Colaboratory を使用することで直ぐにプログラミングに取り組めたと思います。ご参考になりましたらtwitterをフォローしてSNSでシェアして頂ければ幸いです

プログラミング初学者の場合、従来はここまでたどり着くのに平気で 1~2日はかかっていと思います。多くの人は実際にコードを書いて実行する前に挫折していたと思います。世に出ている便利なサービスを使わない手はありません。

忠犬SE

忠犬SE

また、プログラミングの醍醐味も解ったと思います。

ただ、今回は少々難易度が高く、結局どういうこと??って感じだと思うのでこれからすこしずつ解説を入れていきたいと思います。

忠犬SE

忠犬SE

【付録】さらに理解を深めたい方たちへ

  • プログラミングへの理解を深めたい方たちには以下をおすすめします。
    スキルの習得には手を動かすことが一番だとは思いますが、概念を知ったうえで手を動かすのと知らないうえで動かすのとでは長い目見ると雲泥の差が出てきます。概念を知っていれば新しい言語やフレームワークでも特に苦労せずに習得できます。

プログラムはなぜ動くのか 第3版 知っておきたいプログラミングの基礎知識 [ 矢沢 久雄 ]

価格:2,640円
(2021/9/12 17:55時点)
感想(0件)

オブジェクト指向でなぜつくるのか 第3版 知っておきたいOOP、設計、アジャイル開発の基礎知識 [ 平澤 章 ]

価格:2,640円
(2021/9/12 17:57時点)
感想(0件)

  • コーディングに関し、最初は第三者から見た解りやすさを意識するのは難しいと思いますが、わかりやすいコードというのはかなり奥が深いです。こればかりは、普段から意識し続けるしか上達の方法は無いと思います。基本的な考え方については下記をおすすめします。多くの凄いプログラマーの方たちがおすすめしている本です。

リーダブルコード より良いコードを書くためのシンプルで実践的なテクニ (Theory in practice) [ ダスティン・ボズウェル ]

価格:2,640円
(2021/9/12 17:59時点)
感想(5件)

  • 今回使用したPlotlyについてもう少し詳しく知りたい方には以下をおすすめします。使い方について網羅的に記載されてます。また、この本ではDashというPlotlyが使えるSPAのレームワークについて記載さており、インタラクティブなwebアプリの構築方法について書かれております。後ほどDashにつても投稿していきたいと思ってます。

Python インタラクティブ・データビジュアライゼーション入門 Plotly/Dashによるデータ可視化とWebアプリ構築 [ @driller ]

価格:4,400円
(2021/9/12 17:56時点)
感想(0件)

ご参考

ちなみに今回は下記 Chromebook を使用しました。
14.0型フルHD × Core i3 × メモリ8GB を満たす数少ない端末です。
軽くて持ち運びしやすく開発に耐えうるスペックなのでおすすめです。

富士通|FUJITSU ノートパソコン FMV Chromebook 14F(タッチパネル) ダーククロム FCB143FB [14.0型 /Chrome OS /intel Core i3 /メモリ:8GB /SSD:128GB /タッチパネル対応 /2021年12月モデル]【point_rb】

価格:70,510円
(2022/2/23 18:35時点)
感想(1件)

Chromebook でプログラミングを始める方法については下記記事をご参考下さい。

広告_零号機-エリア2
kewton

kewton

大学院卒業後、某大手SIerで10年以上SEとして従事。
社会人3年目までに基本情報・応用情報技術者、データベーススペシャリスト、簿記3級・2級を取得。
基幹系システム・IoTシステム開発のプロジェクト経験多数。AI活用システムの企画・プロト開発経験あり。
強みは、プロマネだけでなく自身で開発も実施してきたこと。
【扱える言語】
C#、java、python、javascript、Excel VBA
【扱えるDB】
oracle、sql server、postgreSQL、mongoDB

FOLLOW

関連記事

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA