手動で毎日アクセスするのが面倒な全ての人へ

## はじめに
通知機能が搭載されていないWebページについて、毎日手動でアクセスして情報を取得するのが面倒なので自動化してみました。

## スクレイピング（Webスクレイピング）について
Webスクレイピングとは主にWebサイト上に掲載されている情報を取得したのち、必要な部分のみ抽出（+保存）する作業を指します。例えば任意のページのとある情報（商品情報・天気予報・Web記事）の特定部分を抽出したい場合に利用できます。
また、似た言葉にクローリングというものがありますがこちらはWebサイト全体を網羅的に巡回しデータを収集することを指します。例えばこのクローリングという技術はGoogleの検索インデックスの構築に利用されていますね。

### Webスクレイピング実施時の注意点
ここまで聞くと「便利やん、使い倒したろ」となるかも知れませんが、チョット待って！！！
賢い方ならお気づきかもしれませんが、この技術、Webサイト運営者の立場としては少々厄介モノだったりするんですわ。個人情報に関わる情報は抽出禁止はもちろんのこと、著作権侵害の恐れもあり、短時間で大量のリクエストを実施することになるのでサーバーへ多少なりとも負荷をかけることになります。そのため、Webスクレイピングを実施する前には必ず事前に当該Webサイトを確認してください。robots.txtの内容や利用規約ページの確認が必要ですが、利用規約内には「スクレイピング」と限定した書き方ではなく、「ロボット等によるデータ抽出・収集」といった書き方がされていることが多いです。スクレイピングはもちろんそれに含まれるため、このような記載がある場合にはスクレイピングはしないように注意してください。本ブログの利用に起因するいかなる損害についても、当方は一切の責任を負いかねます。なお本ブログにおいても[利用規約](https://techblog.futosh1.com/terms)内に同様の記載をしておりますので、スクレイピングはくれぐれもお控えください。とはいえ大変便利な技術ですので早速使い方を紹介しますね。今回は私のブログでWebスクレイピングを実施してみました。自分自身のページにおけるWebスクレイピングであれば誰が文句を言えようか（以下略）。

## Pythonのスクレイピングライブラリ比較
Webスクレイピングについての概要は前述の通りですが、どうやって実施をしましょうか？まあお決まりの話ですが、Pythonなので便利なライブラリがいくつもあるんですよね。まずはいくつか代表的なものを紹介します。

### Requests & BeautifulSoup
BeautifulSoup、美味しそうですよね。こちらはHTML・XMLの解析と特定の情報の抽出に特化しており、通常Requestsライブラリと一緒に使われます。DOMツリー構造を使って操作が可能なので静的ページにはもってこいのライブラリです。初学者向けで最も学習コストが低いとも言われていますが、標準のhtml.parserだけでなくC言語で書かれたlxmlパーサーと組み合わせることもできるため、比較的高速な処理が可能で、簡単な処理には重宝されています。一方でHTMLをそのまま解析するだけなので、ブラウザ側(=JavaScript)でレンダリングされるSPAのようなWebサイトや、lazy laodが組み込まれた動的ページの解析には不向きです。

### Scrapy
こちらは膨大なデータの処理に向いており、スクレイピングとクローリングの両方が利用可能なフレームワークです。ライブラリではなくフレームワークであることがポイントで、他のライブラリと比較して幅広く機能が提供されています。また並行処理も可能であるため非常に高速な処理が期待できます。一方で、BeautifulSoupと同様に動的ページの解析には不向きです。

### Selenium
Seleniumは既出の2ライブラリとは少し毛色の違うライブラリです。一番の特徴はブラウザをどのように操作するかを指示できることにより、静的ページだけでなく動的ページからの抽出が可能であることです。これにより、例えばJavaScriptによるページの読み込みが完了してから操作を実行できたり、入力フォームへのテキスト入力・ボタン押下・スクロール動作ができたりと、さながら実際にページを手動で操作するような感覚です。RPAっぽいとも言えるかもしれませんね。ここまで褒めちぎりましたが、反対に一番のネックは処理速度です。クライアント上でブラウザを実際に起動しているので、手動よりは格段に速いですがそれはもう時間がかかります。

### 比較表
ここまでの情報を以下の通りまとめてみました。
|  | BeautifulSoup | Scrapy | Selenium |
| :-- | :--: | :--: | :--: |
| HP | [URL](https://www.crummy.com/software/BeautifulSoup/) | [URL](https://scrapy.org/) | [URL](https://www.selenium.dev/ja/documentation/) |
| 特徴 | 簡単！速い！ | 大規模な処理が得意 | 動的ページの処理が可能 |
| 静的コンテンツの処理 | ✔︎ | ✔︎ | ✔︎ |
| 動的コンテンツの処理 | - | - (一部可能) | ✔︎ |
| 処理スピード | ◯ | ◎ | ▲ |
| 学習コスト | ◎ | ▲ | ◯ |

## Webスクレイピング、実際にやってみた。
### RequestsとBeautifulSoupを使ったWebスクレイピング
まずは一番簡単なこちらから。解析するページは以前執筆した[PythonでGoogle Driveにファイルをアップロード・ダウンロードする。](https://techblog.futosh1.com/blogs/python-gdrive-updownload)という記事にします。ここから`meta`タグと`h2`タグを取得してみましょう。
まずは`beautifulsoup4`タグと`requests`をインストールします。
```
pip install beautifulsoup4 requests
```
続いて以下の通りコードを書いていきましょう。
<script src="https://gitlab.com/-/snippets/4777841.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1-2) ライブラリをインポートします。</li>
<li>(l.4) 対象のWebページのURLを用意します。</li>
<li>(l.6) <code>requests.get()</code>メソッドを使って4行目のURLに対してHTTP GETリクエストを送信し、HTMLデータを取得します。結果を<code>response</code>に格納します。</li>
<li>(l.7) 6行目の<code>response</code>を解析するためにDOMツリー構造に変換します。そのために第一引数には<code>responsex.text</code>を、第二引数には<code>html.parser</code>をセットして<code>BeautifulSoup()</code>メソッドを実行します。<code>response</code>について<code>.text</code>という属性をつけたのは、BeautifulSoupが解析可能なテキスト形式に変換する必要があるからです。また、第二引数に<code>html.parser</code>をセットしたのは、あくまでもBeautifulSoupに自体にはパース済みのHTML・XMLを操作する機能しかなく、パース自体はパーサーの役割となるからです。なお、<code>response</code>については、テキスト属性の他にも、ステータスコードを取得できる<code>.status_code</code>属性やJSONデータを取得できる<code>.json</code>属性があります。</li>
<li>(l.9) DOMツリー構造への変換が完了したので、ここからは<code>BeautifulSoup()</code>メソッド内のメソッドを使って抽出したい要素を探索します。まずは<code>find()</code>メソッドを使用して、HTML内の特定の<code>meta</code>タグを検索します。ここで第二引数に<code>{'name': 'description'}</code>を設定することで、<code>name</code>属性が<code>description</code>となっているページ名が登録されている<code>meta</code>タグのみに限定することができます。これを<code>meta_description</code>に格納します。</li>
<li>(l.10) 9行目の<code>meta_description</code>に格納された<code>meta</code>タグについて、<code>'content'</code>属性の値を<code>.get()</code>メソッドで抽出します。この<code>'content'</code>属性内の値こそが今回欲しかった値です。</li>
<li>(l.12) 続いて9行目と同様に、今度はブログ記事内の各章の見出しである<code>h2</code>タグを取得します。こちらは複数存在するため、<code>.find_all()</code>メソッドで該当する<code>h2</code>タグをすべて検索します。</li>
<li>(l.13-14) <code>h2</code>タグについて、そのまま出力するとタグごと出力されてしまうので、今回も<code>.text</code>属性を利用してテキスト部分のみ抽出し出力します。</li>
</details>
こんな具合にで簡単に取得できることが分かりましたね。処理時間も一瞬でしたね。

ちなみにこちらのブログでは記事の検索もちょっとだけ可能なのですが、検索の実行+結果からの抽出はBeautifulSoupでは難しいんですよね。。これを実現するのが、そう、Seleniumなんです。

### Seleniumを使ったWebスクレイピング実施
ということでSeleniumを使ったスクレイピングについては、検索キーワード入力→検索の実施→検索結果の出力という手順を踏みたいと思います。まずはライブラリをインストールします。
```
pip install selenium
```
続いて以下の通りコードを書いていきましょう。
<script src="https://gitlab.com/-/snippets/4777853.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1-3) Seleniumとして利用するコンポーネントをインストールしていきます。<code>webdriver</code>とはブラウザを操作するために必要なコンポーネントです。<code>selenium.webdriver.common.keys.Keys</code>はキーボード操作を受け付けるためのモジュール、<code>selenium.webdriver.common.by.By</code>はHTMLの要素を検索する際に方法を指定するためのモジュールです。</li>
<li>(l.4) クライアントの処理に時間がかかることを想定して、<code>time</code>もインポートします。</li>
<li>(l.6-8) <code>webdriver.Chrome()</code>メソッドを利用してSeleniumのChrome WebDriverを起動します。その後URLを指定して<code>.get()</code>メソッドでページを開きます。</li>
<li>(l.10) Seleniumはクライアントでブラウザを利用して実行されるのでエラー発生を想定した処理を記述するためエラーハンドリングを記述します。</li>
<li>(l.11) 続いて検索キーワードを入力するためのフィールドを検索します。第一引数には<code>By.CSS_SELECTOR</code>とすることでCSSセレクタを使うことを指定、第二引数には<code>input</code>タグの<code>type</code>属性が<code>text</code>であることを指定して、<code>find_element()</code>メソッドでフィールドを検索します。今回はCSSセレクタを指定する方法を取りましたが、<code>TAG_NAME</code>や<code>ID</code>も利用できます。</li>
<li>(l.12-14) 検索キーワードを指定します。今回は<code>Google</code>としました。それを<code>send_keys()</code>メソッドに渡すことでフィールドへの入力を実行し、<code>send_keys(Keys.RETURN)</code>とすることでEnterキーを押下しました。これにより検索の実行が完了しました。</li>
<li>(l.17) <code>time.sleep(3)</code>として、検索結果表示までの時間を確保します。</li>
<li>(l.19-20) 続いて、検索結果の要素数をカウントします。このブログでは検索結果は長方形の<code>div</code>タグの箱で表示されるようにしていますが、クラス名はいずれも<code>ArticleItem_eachArticle</code>を含むことがわかっています。そのため、部分一致を表す<code>*=</code>でクラス名を指定して<code>find_element()</code>メソッドの第二引数に設定します。検索結果は<code>elements</code>内にリスト形式で入っているので<code>len()</code>メソッドで個数を確認します。</li>
<li>(l.23) エラーハンドリングの例外処理として<code>Except</code>を記述します。</li>
<li>(l.26) 処理が完了したら、<code>.quit()</code>でブラウザを切ります。</li>
</details>
というわけで検索キーワード入力→検索の実施→検索結果の出力が完了しました。このような動作はBeautifulSoupでは実施できないため、Seleniumの活用によりWebスクレイピングの幅を広げることができたのではないでしょうか？ただ、この程度の処理にもかかわらず約10秒要したため、使い所の見極めは大事そうです。

## まとめ
スクレイピングについて解説してきましたが、どのライブラリを使うにしろ一番のネックはWebページの構造・デザイン自体が変更されるリスクです。海外の有名なSaaSアプリ等は単なる機能追加だけでなくデザインのアップデートも頻繁になされるため、その度にコードを修正するのは骨が折れると思います。提供されているのであればWebAPI経由の方が、抜け漏れの少ない構造的な情報を取得可能なのでそちらをおすすめしたいです。

Webページの情報を自動取得する。

Next.jsで作ったWebサイトがGoogle検索で出てこないので、いろいろと試しました。

## はじめに
これまでWebサイト作成についていろいろとまとめてきました。[Next.jsでWebサイト作成のための環境構築](https://techblog.futosh1.com/blogs/nextjs-tailwindcss-setup)をして、[アクセス解析のためにGA4設定](https://techblog.futosh1.com/blogs/ga4-nextjs)をして、[Vercelにデプロイして、サブドメイン設定して](https://techblog.futosh1.com/blogs/vercel-subdomain-webapp)。。。ただ、Google検索しても出てこないんです！！！これは大ごとです。せっかく作っても流入経路がTwitterしかないなんてふざけ倒しています。。。まあ、これはGoogleにインデックス登録されていないからなんですがね。
ということで、Google検索結果に出てくることを目指して、そして自然検索からの流入爆増を目指して対処しました。

## Google検索結果に表示されるまで・・・
### インデックスへの登録
そもそもここから学ぶべきなのです。Googleにおけるインデックスとは、「Googleが持つ検索エンジンの大規模なデータベース」です。（参考：[Google の検索エンジンの仕組み、検索結果と掲載順位について](https://developers.google.com/search/docs/fundamentals/how-search-works?hl=ja)）このインデックスに登録されないと、誰かがGoogle検索を実施した際、検索結果に表示されません。つまり誰にも見られないのです。ではどのような仕組みでインデックスに登録されるのでしょうか？

### ウェブクローラーによるインデックス登録
[Google の検索エンジンの仕組み、検索結果と掲載順位について](https://developers.google.com/search/docs/fundamentals/how-search-works?hl=ja)によると、Googleが持つウェブクローラーというソフトウェアが定期的にWebを探索することで、基本的には自動で見つけたページをインデックス登録されているとのことです。このウェブクローラーをGooglebotと言います。私のWebサイトは見つかっていないのですね。。。では、このGooglebotとやらにはなぜ見つけてもらえていないのでしょうか？

## インデックス登録されるには？
### インデックス登録されないワケ
いくつかあるのですが、多くの原因は下の通りです。
1. ドメインが新しいため・・・これはそういうもんだと覚えておいた方が良いかもしれません。新しいドメインはクロールの優先順位が下がるようです。
2. Googleガイドライン違反により、ペナルティを受けているため・・・Google検索には、Webサイト・アプリ制作者向けに[ガイドライン](https://developers.google.com/search/docs/essentials?hl=ja)が存在します。これに違反するとせっかく作っても掲載順位が上がらなかったり、場合によってはGoogle検索から除外されたりする可能性があるようです。詳しくは[Google ウェブ検索のスパムに関するポリシー](https://developers.google.com/search/docs/essentials/spam-policies?hl=ja)をご確認ください。要するにしょうもないことすなと書いてあります。
3. プログラムでnoindexを指定しているため・・・<head>内で`noindex`を指定してしまうと、インデックス登録がされなくなってしまいます。
4. robots.txtでクロールを禁止にしているため・・・robots.txtとは、収集されたくないコンテンツがある場合に、Googlebotに対してクロールを拒否するためのファイルです。

### インデックス登録されるための対処法
上記の通り原因をいくつか並べましたが、開発側で技術的に対処が可能な3と4の原因に対してそれぞれ対処していきましょう。
#### 3.プログラムでnoindexを指定しているため
文字通りですが、noindexを指定しなければ良いのです。<head>タグを利用している場合は、その中に以下の記述がないか確認してみてください。
<script src="https://gitlab.com/-/snippets/2581833.js"></script>
`<meta>`という記述があれば、これを消すだけで大丈夫です。

#### 4.robots.txtでクロールを禁止にしているため
robots.txtにおいて、以下の通り`Disallow`の記述をしている場合、`Disallow`の中身が空の場合は問題ありませんが、下のようにディレクトリ（もしくはディレクトリ+ページ）が記述されている場合、そのディレクトリ（今回の場合はpages以下のコンテンツ）が表示されなくなります。表示させたくないコンテンツがない場合には、`Disallow`の中身は空に保っておきましょう。
```
Disallow:/pages/
```

## Googleにインデックス登録されやすくするためには？
ここまでインデックス登録されない原因についてまとめてきましたが、全部対応したからといってすぐにインデックス登録されるわけではありません。だからと言って、ほな指咥えて待っとき！という話でもなく、インデックス登録されやすくするための工夫はできるんです。

### サイトマップ（sitemap.xml）の生成、Google Search Console（サーチコンソール）への送信
インデックスへの登録のためにGoogleはGooglebotを利用してクロールしている、しかし新しいドメインの場合はインデックス登録に時間がかかるというのは前述の通りです。というわけで、GooglebotにWebサイトの内容・構造を理解してもらうために（=クロールしてもらいやすくするために）、サイトマップを作ってあげましょう。

#### next-sitemapの利用
Next.jsのWebサイト・アプリでサイトマップを作成するためには、`next-sitemap`というパッケージを利用します。対象のGitHubリポジトリは[こちら](https://github.com/iamvishnusankar/next-sitemap)です。それではまず下の通りインストールします。
```
npm i --save next-sitemap

```

#### next-sitemap.config.jsファイルの設定
インストールできたら、プロジェクト直下に`next-sitemap.config.js`ファイルを新規作成します。ファイルの中身には以下の通り記述します。
<script src="https://gitlab.com/-/snippets/2581789.js"></script>
* 3行目にはWebサイト・アプリのURLを記述します。ここはベースとなるURLを入力してください。
* 4行目で、オプションですが`robots.txt`ファイルを生成します。デフォルトでは`false`なので、`true`の場合のみ記載しましょう。
* 5行目で、こちらもオプションですが`sitemapSize`を指定します。ここでは`7,000`という値を指定していますが、サイト内のURLが7,000を超過すると自動的にサイトマップが分割され、index（e.g. sitemap.xml）ファイルと詳細サイトマップファイル（e.g. sitemap-0.xml, sitemap-1.xml）ができるという設定です。
* 6行目で、こちらもオプションですが`exclude`を指定して、サイトマップから除外したいページ・サブディレクトリを配列形式で指定します。

#### package.jsonファイルの設定
続いて、`package.json`ファイルに必要事項を追記して、ビルド時に`public`ディレクトリの下に`sitemap.xml`ファイルを作成するようにします。
<script src="https://gitlab.com/-/snippets/2581796.js"></script>
* 3行目には`build`の記述をします。こちらはすでに記述があるかもしれません。
* 4行目には新しく`postbuild`を追加し、`next-sitemap.config.js`を実行するよう記述をします。

#### buildの実行
`npm run build`を実行します。すると、ビルドする度に、`postbuild`で記述したようにビルド後に`next-sitemap.config.js`が実行されます。
<script src="https://gitlab.com/-/snippets/2581797.js"></script>
また`postbuild`完了後には、`public`ディレクトリの下に、`sitemap.xml`ファイルと`robots.txt`ファイルが新しく生成されていると思います。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/next-googleindex1_xna4sl">

#### 生成されたsitemap.xmlファイル
`sitemap.xml`ファイルは以下の通りになっていると思います。
<script src="https://gitlab.com/-/snippets/2581801.js"></script>
* 3行目はWebサイト・アプリのURL（ベース）が表示されています。
* 5行目はWebサイト・アプリ内に存在する、別ページのURLが表示されています。今回は、`about`というページをWebサイト内に作成したため、このような表記になっているはずです。また、この下にも同Webサイト・アプリ内に存在する全てのURLが書き出されていると思います。

#### 生成されたrobotx.txtファイル
`robots.txt`ファイルは以下の通りになっていると思います。
<script src="https://gitlab.com/-/snippets/2581802.js"></script>
* 3行目は`Allow`となっていると思います。これは、今回Disallowを設定していないためです。
* 6行目にはWebサイト・アプリのURL（ベース）が表示されています。
* 9行目には今回生成されたサイトマップのURLが表示されています。これでURLとしてサイトマップにアクセスできるようになりました。

#### Vercelへのデプロイ
通常通りVercelへデプロイします。これで"https://~（Webサイト・アプリのURL（ベース））/sitemap.xml"にアクセスできるようになります。

#### Google Search Console（サーチコンソール）への登録
最後に、[Google Search Console（サーチコンソール）](https://search.google.com/search-console/welcome)にサイトマップを登録していきましょう。
何も登録されていない場合、サーチコンソールを開くと下のような画面が表示されます。「URLプレフィックス」の方に、"https://~（Webサイト・アプリのURL（ベース））/"を入力しましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/next-googleindex2_jdezaz">
すると、下のような「所有権の確認」というモーダルが表示されます。「おすすめの確認方法」という表示とともに「HTMLファイル」のダウンロードが可能となっていますがこちらは利用せず、今回は「その他の確認方法」から「HTMLタグ」を選択しましょう。ここでは指示通り`<head>`タグ内に表示されているメタタグを追加します。※メタタグ追加後反映に時間がかかる可能性があります。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/next-googleindex3_do8dqq">
<script src="https://gitlab.com/-/snippets/2581834.js"></script>
少し時間を空けてから上の画面で「確認」を押すと所有権の確認が完了し、下のような管理画面に移動できます。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/next-googleindex4_zr9k1y">
管理画面に移動したら、画面左側のナビゲーションから「サイトマップ」をクリックすると「新しいサイトマップの追加」というセクションが表示されるので、ここで`sitemap.xml`と入力し、「送信」ボタンを押してください。「サイトマップを送信しました」というダイアログが表示されたらサイトマップ送信の作業完了です。ダイアログで隠れて見えませんが、「送信されたサイトマップ」のセクションが表示され、ステータスが「成功しました」となっていることが確認できます。


## まとめ
なお、作業完了後すぐにインデックス登録されているわけではないため、この時点でGoogle検索をしても検索結果には表示されないかもしれませんが、気長に待ちましょう。
### 参考
* [Google検索セントラル - Google の検索エンジンの仕組み、検索結果と掲載順位について](https://developers.google.com/search/docs/fundamentals/how-search-works?hl=ja)
* [Google検索セントラル - Google 検索の基本事項](https://developers.google.com/search/docs/essentials?hl=ja)
* [Google検索セントラル - Googleウェブ検索のスパムに関するポリシー](https://developers.google.com/search/docs/essentials/spam-policies?hl=ja)
* [GitHub - next-sitemap](https://github.com/iamvishnusankar/next-sitemap)