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

## はじめに
通知機能が搭載されていない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ページの情報を自動取得する。

PythonからLINE Messaging APIを叩いて何かしらの情報を通知する仕組みを作ってみました。

## はじめに
物事を極めるために「継続は力なり」よく言われますが、慣れないこと・得意でないことだとつい逃避行動に走ってしまうのが人の性。でも上手く仕組み化さえできれば用を足すかの如く案外習慣化するものです。私の場合、「今年こそは資産運用に力を入れたい」と年初の抱負で毎年語るのですが、結局1年経っても資産は微増です。そこでまずは簡単なことから習慣化してみようということで「注目している銘柄の株価を毎日確認すること」だけやってみたいと思います。それを実現するために、毎日確実に利用するSNSであるLINEで通知されるようにすれば、アプリアイコン上の「通知バッジ」は消さないと気が済まない自らの性に合うと思ったのでその仕組みのベースをまずは作ってみます。※株価情報取得との組み合わせはまた別途まとめます。

## ステップ
今回は下の2つのステップで仕組みを作りたいと思います。
1. LINE Messaging API側の準備
2. Pythonで実装

## 1. LINE Messaging APIの設定
[<strong>「LINE Messaging API」</strong>](https://developers.line.biz/ja/services/messaging-api/)とはLINEが提供するAPIで、メッセージ送付の自動化等ができるものです。これの利用にあたっては<strong>「LINE Developers」</strong>への登録が必要となります。

### LINE Developersへの登録
[LINE Developers](https://developers.line.biz/ja/)登録には既存のLINEアカウント・ビジネスアカウントからも作成可能でメールアドレスさえあれば新規作成も可能なようです。ただし、ビジネスアカウントで作成すると後ほど出てきますが"あなたのユーザーID"が非表示となり今回やりたいことができなくなってしまうため、今回は既存のLINEアカウントで作成しましょう。諸々情報入力して登録が完了したら、[ここ](https://developers.line.biz/ja/services/messaging-api/)から"今すぐはじめよう"でMessaging APIを利用するためのチャネルを作成します。

### チャネル作成
チャネル作成についても基本的には利用情報を入力するだけですが、以下2点については一応仕組みを理解しておきましょう。
* プロバイダー・・・チャネルを束ねる開発者の管理情報です。既に作成済みであればそれを選択すれば良いですが今回は初めてなので、「新規プロバイダー作成」を選択してプロバイダー名を入力し、新しく作成しましょう。
* チャネル・・・プロバイダーによって作成されるサービスのことを指します。1プロバイダーに対して、チャネルは複数作成し紐付け可能です。

詳しくは[公式ドキュメント](https://developers.line.biz/ja/docs/line-developers-console/overview/#channel)にも記載があります。

### アクセストークン発行
続いてAPIを利用するためのアクセストークンを発行します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/line-api-python1_ajfxad">
上のセクションでチャネル作成は完了したと思いますが、そのチャネル内に"Messaging API設定"タブがあるのでこれをクリックし、画面最下部までスクロールします。すると（上の画像では隠れていますが）"チャネルアクセストークン"の"発行"というボタンがあるのでこれをクリックするとアクセストークンが発行できるので、安全な場所に一度保管しておいてください。

続いて、同チャネル内"Messaging API設定"タブの横に"チャネル基本設定"というタブがあるので同様に画面最下部までスクロールすると、下から3番目あたりに"あなたのユーザーID"という項目があります。こちらもコピーだけして安全な場所に保管しておいてください。

### チャネルの友だち登録
この時点でLINEアカウント（チャネル）は既に作成されていますが、Python側からメッセージを送付するには既存のLINEアプリ側からLINEアカウント（チャネル）を友だち登録する必要があります。再度"Messaging API設定"タブ側に戻るとQRコードがあるのでこれをスマホで読み取って友だち登録しておきます。

これでLINE Messaging API側の準備が完了しました。続いてPython側で実装していきます。

## 2. Pythonで実装
実装にあたり、[公式ライブラリ](https://github.com/line/line-bot-sdk-python)が公開されているので、以下の通りインストールして効率よく実装していきましょう。
```
pip install line-bot-sdk
```
※なお[Python以外の言語](https://developers.line.biz/ja/docs/messaging-api/line-bot-sdk/#official-sdks)でも同様にライブラリが用意されているようです。

インストールが完了したら、以下の通りコードを書いていきます。

<script src="https://gitlab.com/-/snippets/3611182.js"></script>

### .envファイル
アクセストークン発行時に控えておいた、"チャネルアクセストークン"と"あなたのユーザーID"を環境変数として設定しPythonファイルから呼び出せるようにしておきます。
### line_api_sample.pyファイル
特別難しいことはしていませんが、<strong><code>linebot</code></strong>モジュールから<strong><code>LineBotApi</code></strong>をインポート、<strong><code>linebot.models</code></strong>から<strong><code>TextSendMessage</code></strong>をインポートします。それぞれ環境変数から値を呼び出して、メッセージをプッシュしてあげることでスマホの既存のLINEアプリ側にメッセージが送信されます。

## まとめ
これでPython側からメッセージを送付する仕組みを作ることができました。"Messaging API"タブを確認すると他にも"応答メッセージ"や"あいさつメッセージ"があるのでこれらを設定することでより双方向性の高いコミュニケーションが取れるようになると思います。また、このコードをHeroku等にアップロードすると、Cron設定も簡単にできるため定期的にメッセージ送付が可能になります。いずれも今後まとめようと思います。

PythonからLINEに通知する仕組みを作ってみた。

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)

Next.jsで作ったWebサイトがGoogleの検索結果に出てこない！？

Twitter API v2に登録して自動でツイートしてくれるbotをPythonで作ってみました。

## はじめに
個人開発で作成したアプリを手っ取り早く無料で認知拡大させるには、やっぱりTwitterですよね。とはいえ毎日ツイートを考えて投稿するのはなかなか骨が折れると思います。ということで、投稿の自動化をすべく今回はbotを作ってみました。
※本記事で利用するツールは一部利用料金がかかる可能性があります。次章で公式へのURL付きで簡単に説明しています。

## bot作成・公開の前に
今回はTwitter API v2とHerokuを使った方法をご紹介しますが、残念ながらTwitter API v2では以前利用できた機能が一部有料版の機能となったり、Herokuについては月額利用料金がかかってしまったりで、そのまま使えないかもしれませんが詳しくは公式情報参考にしつつその点だけご留意いただいた上でご覧ください。
### Twitter APIの有料化（Freeプランあり）
以前は無料版で多くの機能が使えましたが、現行の無料版では基本的には<strong>投稿・削除機能のみ</strong>が利用可能で、投稿上限は1,500ツイート/月となっています。詳しくは[公式](https://developer.twitter.com/en)でご確認ください。
### Herokuの有料化（Freeプラン撤廃）
Herokuも無料で使えることから個人開発者の間で重宝されてきましたが、現在ではローエンドのプランも有料となってしまいました。こちらも詳しくは[公式](https://jp.heroku.com/pricing)をご確認ください。
### bot公開手順
ということで幸先が良いスタートではありませんが、botを公開するまでの手順については大きく以下の通りです。

* Twitter API v2への登録（１／３）
* Pythonでbotを作成（２／３）
* Herokuに公開（３／３）

今回はPythonでbotを作成しますが、Rust、PHP、JavaScript等でも作成可能です。

## bot作成
### Twitter API v2への登録（１／３）
#### Twitter APIとは
そもそも[Twitter API](https://developer.twitter.com)とは、ですが「Twitterアプリケーションを使うことなく、ツイート・いいね・リツイート等の情報を取得・投稿できるサービス」です。なお、API利用にともないv1とv2の2種類がありますが、v1は[非推奨](https://twittercommunity.com/t/deprecating-the-premium-v1-1-api/191092)となりました。また、v2についても、これまでEssential, Elevated, Academic Reseachの3種類がありましたが、こちらも非推奨となりましたのでこの記事は無料で利用可能なv2（Free）の利用について解説します。ちなみに、Freeの他にはBasicとEnterpriseがいずれも有料です。

#### アカウント作成
* 前置きが長くなりましたが、アカウント作成後は<strong><i>CONSUMER_KEY</i></strong>, <strong><i>CONSUMER_API_SECRET</i></strong>, <strong><i>ACCESS_TOKEN</i></strong>, <strong><i>ACCESS_TOKEN_SECRET</i></strong>, <strong><i>BEARER_TOKEN</i></strong>が発行できるのでこれらは別途控えておいてください。
* なお、<strong><i>ACCESS_TOKEN</i></strong>については"[<strong><i>Read and Write</i></strong>](https://developer.twitter.com/en/docs/apps/app-permissions) permissions"となっていることを確認しておいてください。※これが"Read only"だとツイート投稿ができません。~前述の通りプランが変わったので、こちらの設定は不要になりました。投稿しかできないんだからそりゃそうですよね。~

### Pythonでbotを作成（２／３）
* 今回は試しにSOUL'd OUTのDiggy-moさんのアレを1日1回ツイートしてくれるbotを作ります。Pythonを使ってコードを書いていきますが、ちょうど[Tweepy](https://docs.tweepy.org/en/stable/)というライブラリがあったのでこちらを使わせてもらいましょう。楽なので。まずはライブラリインストールです。
```
pip install tweepy
```
* 続いて下の通りコードを書いていきます。一行解説始めます。
<script src="https://gitlab.com/-/snippets/2567492.js"></script>
1. (l.1)tweepyをインポートします。
2. (l.3~7)Twitter APIで発行されたキーを用意します。サンプルなので直接入力していますが、`.env`ファイル等用意しておいた方が良いと思います。
3. (l.9~15)`tweepy.Client()`にキーを入れ、`client`変数に格納します。これで認証させる感じです。
4. (l.17-19)`tweet`関数を作ります。`create_tweet`メソッドの引数に投稿したい文字列を入力します。

それでは実行してみましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/twitterapi-bot1_beroig">
鳴きましたね。

### Herokuに公開（３／３）
最後に作成したPythonファイルをHerokuにデプロイします。上のようにPythonファイルを作っただけではローカルからしか投稿ないので、Herokuが提供している[Heroku Scheduler](https://elements.heroku.com/addons/scheduler)というAdd-on機能を利用して定期的にPythonファイルを実行（自動投稿）する仕組みを作りましょう。
* まずはHerokuアカウントから[Heroku Scheduler](https://elements.heroku.com/addons/scheduler)（無償）をインストールします。
* Heroku Schedulerから定期実行（Job）を設定します。下の画像中央部より<strong><i>Create job</i></strong>ボタンをクリックすると画面右側にモーダルが表示されるので、ここで繰り返し時間（1/10min, 1/1h or 1/day）と実行コマンドを設定します。1日1度とした場合、UTC設定となるため日本国内での実行の場合には、-9時間で調整する必要があります。
* コマンド部分にはPythonファイルの実行コマンドを入力しますが、この時点で先ほど作った`tweet_sample.py`ファイルがアクセスできる状態にしておく必要があります。そのために、HerokuとGitHubが同期されている必要がありますがその設定方法は[こちらの記事](/blogs/django-heroku-deploy)でまとめていますので別途確認ください。実行コマンドまで入力が完了したらこれで「Job」の設定は完了です。v2 Freeの投稿上限は1,500ツイート/月のため、1時間毎のツイートであれば上限値に引っかからなそうですね。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/twitterapi-bot2_jx1rfc">
* また、Twitter API利用には<strong><i>CONSUMER_KEY</i></strong>等必要であることは2.の通りですが、Herokuへのデプロイ後は、環境変数の入力を忘れないようにしましょう。HerokuのDashboardから、[Settings]タブ > [<strong><i>Reveal Config Vars</i></strong>]ボタンで環境変数は入力可能です。

## まとめ・参考
Tweepyを使えばとても簡単にbotを作ることができますね。ただし、短いスパンで同じ内容を繰り返し投稿しようとすると、Twitter側にはねられる可能性があるようです。無料枠の範囲内でプログラム側でランダムにorユニークな投稿をする仕組みを工夫して作ってみてください。
### 参考
* [Twitter Developer Platform - Home](https://developer.twitter.com/en)
* [Heroku - Herokuの価格](https://jp.heroku.com/pricing)
* [Twitter Developer Community - Deprecating the Premium v1.1 API](https://twittercommunity.com/t/deprecating-the-premium-v1-1-api/191092)

Twitter API v2に登録して自動投稿するbotを作ってみた

Next.js+Tailwind CSSの環境でGoogleフォントを設定してみました。

## はじめに
フォントってけっこう気になりません？私はとても気になります。ちょうど作成中のプロジェクトでデフォルトのフォントがあまり気に入らなかったのでGoogleフォントから好みのフォントを適用してみました。

## Googleフォント（Google Fonts）とは
Google社が提供するWeb上で利用できる無料（商用利用可）のフォントサービスです。[Wikipedia](https://en.wikipedia.org/wiki/Google_Fonts)によると、2010にサービスが開始され、2023年6月時点では1,527種類のフォントが提供されているようです。

## 利用方法
基本的には、1.使用したいフォントの選択、2.フォントの調整、3.プロジェクトへの反映の3ステップで利用できるので簡単です。
### 使用したいフォントの選択（1/3）
* まず[Googleフォント](https://fonts.google.com/)にアクセスして好きなフォントを選択しましょう。
* 今回は"Roboto"というフォントを選んでみます。選んだポイントは、、、何となくです。

### フォントの調整（2/3）
* 続いて選択したフォントを調整します。ここではフォントの重み（font-weight）、大きさ（font-size）、イタリックorNotの調整をします。
* 今回は"Light 300"というものを使ってみましょうかね。下画像の小さい赤枠の<strong><i>Select Light 300 +</i></strong>ボタンを押すと（現在選択済みなので`Remove~`と出てしまっていいますが）、画面右側の`Selected family`に、大きい赤枠の通り選択中のフォントが表示されます。※もし右側の`Selected Family`のモーダルが出てこない場合は、画面右上の四角形3つと十字のアイコンを選択すれば出てきます。この中の情報をNext.jsプロジェクト側で設定します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/googlefonts-nextjs-tailwindcss1_qvw2h4" />

 
### Next.jsプロジェクトへの反映（3/3）
#### pages/_app.jsの作成
* Googleフォントで選んだフォントをプロジェクト全体で利用するためには、まず`pages`ディレクトリ内に新しく`_app.js`というファイルを作成します。Next.jsの[documentation](https://nextjs.org/docs/basic-features/font-optimization#usage)内にもフォント追加ための同ファイル作成方法の記載があります。
<script src="https://gitlab.com/-/snippets/2567483.js"></script>
1. (l.1)Googleフォントで探し出した、使用したいフォントをインポートします。
2. (l.4)フォントの重みを決めます。今回は`font-weight`を300に指定します。
3. (l.5)フォントの変数を決めます。こちらは次に設定する`tailwind.config.js`から参照するために設定が必要な項目になります。

#### tailwind.config.jsへの追記
* 続いて`tailwind.config.js`を修正していきます。
<script src="https://gitlab.com/-/snippets/2567484.js"></script>
1. (l.8~l.11)`extend`内に`fontFamily`を用意し、その中で`pages/_app.js`で設定したフォントの変数を設定します。これでGoogleフォントを使うための設定は完了しました。

あとは下のようにクラス内に記述するだけで設定したフォントを適用できます。
```
<div className="font-roboto">こんにちは地元</div>;

```

## 注意
最後にこんなこと書くのもですが、2022年ドイツ、ミュンヘンの地裁でGoogleフォントがGDPR違反であるという判決を受けました。[The Hacker News](https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html)によると、ユーザーのIPアドレスが許可なくGoogleに送信されているからという理由のようです。GDPRというのは四方八方から横槍入れてくれますよね〜。司法だけに。

## まとめ・参考
<strong>絶対に</strong>日本国内からしかアクセスできない情報であれば現状問題はないと思いますが、GDPR絡みのこともあるので、ローカルでホストする方法を模索する必要もありそうです。
* [Next.js - Font Optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts)
* [Wikipedia - Google Fonts](https://en.wikipedia.org/wiki/Google_Fonts)
* [The Hacker News - German Court Rules Websites Embedding Google Fonts Violates GDPR](https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html)