アプリ開発・ウェブ開発

[前編] Slackから一歩も外に出ないで、ニュース、勉強会情報、エロ動画を収集する。(Google Spreadsheetでのスクレイピング)

こんにちは。駆け出しWEBエンジニアの山口です。(通称フロントエンドゴリラ)

駆け出しといっても、今月で僕もエンジニア7ヶ月目です。
あっという間でしたねー。

振り返ってみると前職と比べて大分QOL上がったなと感じてます。

最近、「子供は、とりあえずプログラミングと英語学んどけ」とか「ブラック企業やめてエンジニア転職しろ」という風潮がありますよね。

「男子中学生が将来なりたい職業」のベスト3に、youtuberと一緒にエンジニアが選ばれたってニュースも先日聞きました。

エンジニアはもはやステータスなんですね。

でもエンジニアって何がそんなにいいんでしょう?

年収?
スキルアップできる環境?
柔軟な労働時間?

いやちげー!!

フロントエンドゴリラ
一日中ポテチ食って、鼻くそほじくりながら仕事できること

僕はこれに尽きる思ってます。
フランス料理屋で働いていたことがあったんですが、1日2万歩とかよくありました!笑

そしてつい最近まで勤務してた英会話教室でも、ポテチ鼻くそはNGでしたね。WHY!?

毎日、かたかた、もぐもぐ。

最高なんです。

。。。

。。

でも最近は、その生活にさえ煩わしさを感じるようになりました。

机の上にいても、ツイッター、ニュース、スラック、エディター、ターミナル。。。

気づいてしまったんですよね。

画面上でたくさん移動しなきゃいけないということ。
もう画面上でもできたらあんまり動きたくない!!
(デブかよ!!)

しかし思いつきました。

チャットアプリで全部済ませされたら、最高じゃね?
(最高かよ!!)

ということで、今回はチャットアプリSlackのみを使ってどこまで横着に、なれるかにチャレンジしていきます。

実装の流れ

①Google Spreadsheetで興味のあるウェブサイトをひたすらスクレイピング
②スラックのAPIを使って、簡単なボットを作ってみる
③スプレッドシートで取得した情報をスラックAPI経由で閲覧する

長くなりそうなので、とりあえずこのブログでは①の部分だけチャレンジします。

なんちゃって技術ブログなので、実際のコードとかはほぼ載せません。
(そもそも、本当にできるかもわかっていない。。。)

もし上手くいったら、後日qiitaかnoteにまとめます。

この記事では、「どんだけこいつ横着なんだよ!」っていうのと「spreadsheetでこんなこともできんの?」といった雰囲気だけ伝われば幸いです。

そもそもスクレイピングって何!

スクレイピングとは、ウェブページを解析して、必要な情報を抽出する行為のことです。
あのグーグルがネット上の情報を整理できているのも、この技術があってこそです。
クローラーというウェブサイトを巡回するプログラムと協力して、ページを分析することでインデックス化を実現しています。

スクレイピングってしていいの?

ウェブサイトによっては、しちゃいけない場合もあります。robots.txtを確認したり、サイト規約をみるのがいいでしょう。
できたとしても、あまりサーバーに負荷をかけ過ぎずに、スクレイピングを行うのがお行儀のよいスクレイピングらしいです。

どうやってスクレイピングってするの?

スクレイピングの方法は、いろんな方法があります。その中でも、pythonやrubyで書いたプログラムを実行するのが定番ですね。
しかし、最近は便利なことにGoogleが無料で提供しているspreadsheetというexcelのようなサービスを使うだけでスクレイピングができます。必要なものは、google アカウントだけです。あとはspreadsheetに、スクレイピングしたいウェブサイトのURLと簡単な関数を埋め込めば、勝手にspreadsheetがやってくれます。

そもそもこのアイデアにたどり着いたのも、僕がいつもtwitterでお世話になっているDaiさんのおかげです。

実際に、Daiさんが、Newspicksのスクレイピングを行った記事がこちら。

https://review-of-my-life.blogspot.com/2017/07/google-spreadsheet-information.html

Spreadsheetを使うメリット

・無料、貧乏でも使える
・簡単、非エンジニアでもできる

Spreadsheetを使うデメリット

・大量のデータは処理できない
・javascriptをベースにしたWEBSITEはスクレイピングできない(SPAなど)

今回スクレイピングするウェブサイトはここ!!

1:NewsPicks
2:Qiita(エンジニアの記事共有サービス)
3:HatenaBookmark
4:connpass(エンジニアの勉強会情報プラットフォーム)
5:pornhub(えっちな動画サイト。。。むふふ)

では、参る!!!

もくもく。。。

NewsPicksスクレイピング作業イメージ
後ろで寝ているのは、インターンのT君

もくもくもく。。。

hatena bookmarkスクレイピング作業イメージ

もくもくもくもくもく。。。

connpassスクレイピング作業イメージ

むふふふふふふふふ。。。

Pornhubスクレイピング作業イメージ

結果発表

肝心なスクレイピング作業の詳細はすっ飛ばします!!笑

スクリーンショットはこんな感じです。(Qiitaは断念m(_ _)m)

newspicks

左からトップページの全てのリンク、個別ニュース記事のリンク(トップページのリンクの中で「/news/」が含まれているもの)、個別ニュース記事のリンク重複無し、記事タイトル、PICK数

いきなり苦戦しました。

何故かトップページから全部情報が取得できなかったので、
①トップページでリンク一覧を取得する、②それぞれの個別ページにアクセスして解析する、という二つのステップを踏んでクローラーぽいことをやってみました。

Hatena Bookmark

左からブックマーク数、タイトル、投稿日時、URL

HTMLの構造がかなり明確だったので、簡単でした。

connpass

左からイベント予定日、ロケーション、イベントタイトル、URL

普通。。。

pornhub

左からエロ画像、タイトル、URL

ファンキーなコンテンツが多かったので、厳重にモザイクをかけさせて頂きました。
期待していたみんなごめん。

僕がはまった部分

①Javascriptで構成されてるページは、spreadsheetでスクレイピングできないときがある(qiitaが無理だった理由はそれ?)。
②xpathの指定は、よく記事で検証ツール→右クリック→コピペでできるよ!みたいに書いてるけど、動かない時があるので、ひたすらいろんなパターンを試し続けるのがよい。個人的には、多めに要素を取得して(//aとか//h2とかで)、他の関数を使って情報を絞っていくのがいい。
③量が多すぎると、動作がとまる。なのでリンク一覧を入手して、それぞれにアクセスしてまたスクレイピングとかする(自作クローラー的な動き)と、凍ってしまう。ちょっと待つと動くけど、やっぱり遅い。

④ビデオのサムネイルなどは、gifのケースも多く、gifはspreadsheetでうまく表示できないこともあるので、data-属性にも注意して取得する情報を探索するといい。

参考になるウェブサイト

SpreadSheetでスクレイピング。Importxml他、便利な関数9+1
https://qiita.com/ktmg/items/d53440c913e20f8bb34c

とりあえずここにある、関数を網羅すればspreadsheetでのスクレイピングは朝飯前である。
pornhub見放題、共有し放題。

importxmlとxpathをわかっていれば簡単なスクレイピングができる!!

すげー!

でも、まだまだ画面上での操作が多い印象。
早く横着ライフを極めたい。。。(切実)

皆さんも、是非スプレッドシートでスクレイピングライフ挑戦して見てください。

では、次回はslackAPIをつかってボットをつくってみる!!です。

うほ!!

僕のツイッターアカウントでーす。

問い合わせフォームへ