SNSシェアを想定してOGPを設定しました。

## はじめに
「OGP」とは(Open Graph Protcol)の略で、SNSでページがシェアされる際に、シェアしたコンテンツの視認性を向上させるものです。例えばネットで検索した記事をSNSでシェアしようとすると、画像と説明付きのリンクとなって投稿画面下部に出てきますよね？アレです。ではそのアレをNext.jsプロジェクトで設定してみましょう。

## Next.jsプロジェクトで設定
### next/headを利用
OGP設定を施すには`<head>`タグ内に`<meta>`タグを作成し記述していきますが、Next.jsにおいては`<Head>`コンポーネントを使用します。通常の`<head>`タグでは静的な値しか扱えない一方で、`<Head>`コンポーネントを使うことで動的に値を設定可能なためページ別に設定する情報（URL、ページタイトル）を変更することができます。この`<Head>`コンポーネントですが、より再利用しやすい形にするために、Next.jsプロジェクト内の`components`ディレクトリで設定していきましょう。今回は`components`ディレクトリ内で`SEO.js`というファイルを作成し、ここに`<Head>`コンポーネントを記述していきます。

<script src="https://gitlab.com/-/snippets/3602059.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1) <code>&lt;Head&gt;</code>コンポーネントはNext.jsで標準で提供されているものですので、(l.1) の通りインポートしておきます。</li>
<li>(l.3) URL、ページのタイトル、ページの説明の3つをページ毎に動的に変更して設定させたいので、この<code>&lt;SEO&gt;</code>コンポーネントを呼び出した先でurl, title, descriptionというプロパティを受け取れるようにします。</li>
<li>(l.5) <code>&lt;Head&gt;</code>コンポーネントで全体を囲います。この中で (l.6) 以降で<code>&lt;meta&gt;</code>タグを設定していきます。<code>&lt;meta&gt;</code>タグはWebページにおけるメタ情報を記載するもので、Webページ上には表示されませんがChromeでは「検証ツール」から確認できます。</li>
<li>(l.6-8) <code>&lt;meta&gt;</code>タグの中でも<code>property</code>を持つものを設定していきます。<code>property</code>はFacebookやLINE等のソーシャルメディア共通で使用できるOGP情報です。※ただし、X（旧：Twitter）は通常<code>name</code>で設定されます。
<ul>
 <li>(l.6) <code>og:site_name</code>：Webサイトの名前を設定。</li>
 <li>(l.7) <code>og:url</code>：WebサイトのURLを設定。</li>
 <li>(l.8) <code>og:image</code>：Webサイトの画像を設定。</li>
</ul></li>
<li>(l.9-12) <code>&lt;meta&gt;</code>タグの中でも<code>name</code>を持つものを設定していきます。<code>name</code>は（X（旧：Twitter）情報を除いて）通常はページ間で共通の情報が設定されます。ここではX（旧：Twitter）向けの設定をしていきましょう。
<ul>
 <li>(l.9) <code>twitter:title</code>：X（旧：Twitter）表示用のタイトルを設定。</li>
 <li>(l.10) <code>twitter:site</code>：X（旧：Twitter）表示用のアカウント名を設定。</li>
 <li>(l.11) <code>twitter:card</code>：X（旧：Twitter）表示用のカードの種類を設定。※ここではX（旧：Twitter）で投稿される際の画像掲載形式を選択できます。通常<code>summary</code>もしくは<code>summary_large_image</code>を使用します。</li>
 <li>(l.12) <code>twitter:description</code>：X（旧：Twitter）表示用の説明文を設定。</li>
</ul></li>
</ol>
</details>

これで`<Head>`コンポーネントの基本設定が完了しました。しかしこれを作っただけではシェアされる時に表示されないので、実際のページ側で呼び出してあげる必要があります。

### ページ側設定（index.js）
前述の`<Head>`コンポーネントをページ側で呼び出しましょう。

<script src="https://gitlab.com/-/snippets/3602063.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1) 上で作ったSEOコンポーネント内に<code>&lt;Head&gt;</code>コンポーネントがあるので、最初に呼び出します。</li>
<li>(l.3) （※省略してありますが）APIサーバを呼び出して<code>n</code>という<code>props</code>を持つ<code>Sample</code>というページコンポーネントを作ります。<code>n</code>には<code>title</code>, <code>url</code>, <code>description</code>があるものとします。</li>
<li>(l.5-9) return内で<code>SEO</code>という名の<code>&lt;Head&gt;</code>コンポーネントを呼び出します。<code>&lt;Head&gt;</code>コンポーネントでは<code>title</code>, <code>url</code>, <code>description</code>の3つのプロパティを動的に受け取れるようにしているため、<code>{n.~}</code>の形式でそれぞれ値を取得して、各プロパティに入れていきます。</li>
<li>(l.10-16) 通常のページ部分が下に続きますが、ここは省略します。</li>
</ol>
</details>

これで、設定は完了です。

## 実装結果確認
ここまで完了したら実際に設定できているか確認してみましょう。ここでは2つの方法を紹介します。

### 1.Chromeの「検証ツール」を確認
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/ogp-settings1_souphe"/>

Chromeを使っている場合、「検証ツール」を開いてみましょう。上の画像のように`Elements`を覗いてみると、`<head>`タグがあることが分かると思います。この中に、上で設定したように<meta>タグがあることが分かると思いますが、問題なく実装できていれば、動的に変化する3つのプロパティである`title`, `url`, `description`に、ページ固有の値が入っているはずです。

### 2.確認ツール
今回はX（旧：Twitter）についても設定しました。実際にX（旧：Twitter）に何かURLを貼り付け投稿してみても良いですが、もし本番環境にホスティングできている場合は公式の[Card Validator](https://cards-dev.twitter.com/validator)があるのでこちらを使っても良いと思います。またFacebookで確認したい場合は[シェアデバッガー](https://developers.facebook.com/tools/debug/)というツールも同様に利用できます。いずれも作成したページのURLを貼り付けるだけで、OGPのプレビューが表示されるはずです。

## まとめ
今回はOGPについて設定しました。Next.jsであれば`<Head>`コンポーネントを使うと簡単に実装できるので、SEO対策のためにも試してみると良いかもですね。

もっと見てもらうためのOGP設定forSEO対策

Django REST Frameworkをバックエンドに、Next.js+MUIをフロントエンドにして、Markdown形式で記事を投稿するブログを作成しました。【Part 3】

ブログ作成についてまとめました。

Django REST Framework + Next.js (MUI) + Markdownでブログを作る【Part 3】

TwitterのタイムラインをNext.jsのWebアプリに埋め込んでみた。

## はじめに
良いものを作れば売れる（使ってもらえる）時代はとうの昔に終わりました。何においても作る前に「誰に」どのような「目的」で使ってもらいたいか検討し、その上で作るそしてプロモーションという流れが必要です。そしてそのプロモーションにおいて有力なツールがTwitterです。とかゆうといて本能の趣くまま思いついた順で作ってしまう、単細胞の私です。、、、まあいずれにせよチャネル検討・流入施策がない製品開発は意味がないので、今回は手始めにTwitterとWebアプリの連携による流入施策の第一歩として（~手か足かどっちやねん~）、TwitterのフォローボタンとタイムラインをWebアプリに埋め込む方法を調べたのでその方法をまとめました。

## Webアプリへのタイムライン埋め込み
Webアプリにタイムラインを表示させるためには、1.埋め込みコードの生成、Webアプリへの埋め込みの大きく2ステップの実施が必要です。
### 埋め込みコードの生成（Twitter Publish）（1/2）
Webアプリに埋め込むにはTwitterが公式にリリースしている[Twitter Publish](https://publish.twitter.com/#)を利用します。これにより簡単に埋め込みコードが生成できます。埋め込み形式としては以下の3種類です。
* Embedded Tweet：ツイートの埋め込み
* Embedded Timeline：タイムラインの埋め込み
* Twitter Button：各種ボタンの生成
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/twitter-timeline-emb1_tlvgoh" />

今回は試しに[@TwitterDev](https://twitter.com/TwitterDev)のタイムラインを埋め込むこととします。
* "What would you like to embed?"の部分に、埋め込みたいTwitterアカウントのIDを入力します。
* IDを入力すると"Here are your display options"の欄にあるように、入力内容に応じてWebアプリに埋め込み可能なコンポーネントが表示されますが、今回はアカウントIDを入力したので"Embedded Tweet"は非表示になっています。今回はタイムラインを選択します。
* さて"Embedded Timeline"を選択するとその直下に埋め込みコードが出てくるので、"Developer Agreement"と"Developer Policy"を読んでからこれを生成されたスクリプト（aタグ）をコピーしましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/twitter-timeline-emb2_ieznur">
* ちなみにボタンの方はというと、上の画像の中から選べます。こちらもツイートを入力するのかIDを入力するのかで表示・非表示が切り替わります。以前は"Like Button（いいね）"も埋め込み可能だったとのことですが、現在は利用できません。
 * Share Button：記事等をシェアボタン
 * Follow Button：アカウントフォローのボタン
 * Mention Button：メンションするボタン
 * Hashtag Button：ハッシュタグのボタン
 * Message Button：メッセージのボタン

### Webアプリへの埋め込み（Next.js）（2/2）
次に上でコピーしたスクリプトをNext.js上に貼り付けます。ただし以下2点修正が必要です。
1. scriptタグの記載部分の変更：Reactにおいてはそのまま埋め込みコードを貼り付けてもscriptは実行されません。したがって、マウント後に`widgets.js`を読み込ませるようにするために、貼り付け時にはscriptタグは削除した上で一部書き換えます。今回は`useEffect`を使ってscriptに追加しました。
2. class→classNameへの変更：こちらはReactを利用する場合、（当たり前ですが）修正が必要になる部分です。書き換えるだけなので楽です。

なお1点目の注意点については、こちらの[記事1](https://zenn.dev/catnose99/articles/329d7d61968efb)、[記事2](https://blog.narumium.net/2020/04/06/react%E3%81%A7twitter%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AA%E3%81%A9%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80/)を大いに参考にさせていただきました。ありがとうございました。

## まとめ・参考
自作Webアプリでも、Twitterタイムラインがあるだけでなんとなく「できてきているな」という実感が得られますよね。埋め込みだけが正解ではありませんが、検討してみはいかがでしょうか。ちなみに、先日Twitter APIのプランが大幅に変わって無償版でできることがかなり減ってしまいましたが、こちらはTwitter APIとは関係ないため気軽に始められます。そう言った意味でも（？）とりあえず試してみるのがオススメです。

### 参考
* [Home - Twitter Publish](https://publish.twitter.com/#)
* [JSでツイートを埋め込むときのベストプラクティス - Zenn](https://zenn.dev/catnose99/articles/329d7d61968efb)
* [ReactでTwitterのタイムラインなどを埋め込む - Narumium Blog](https://blog.narumium.net/2020/04/06/react%E3%81%A7twitter%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AA%E3%81%A9%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80/)

TwitterのタイムラインをWebアプリに埋め込む

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

## はじめに
個人開発で作成したアプリを手っ取り早く無料で認知拡大させるには、やっぱりTwitterですよね。とはいえ毎日ツイートを考えて投稿するのはなかなか骨が折れると思います。ということで、投稿の自動化をすべく今回はbotを作ってみました。
※本記事で利用するツールは一部利用料金がかかる可能性があります。次章で公式へのURL付きで簡単に説明しています。

## bot作成・公開の前に
今回はTwitter API v2とHerokuを使った方法をご紹介しますが、残念ながらTwitter API v2では以前利用できた機能が一部有料版の機能となったり、Herokuについては月額利用料金がかかってしまったりで、そのまま使えないかもしれませんが詳しくは公式情報参考にしつつその点だけご留意いただいた上でご覧ください。
### Twitter APIの有料化（Freeプランあり）
以前は無料版で多くの機能が使えましたが、現行の無料版では基本的には投稿・削除機能のみが利用可能で、投稿上限は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がいずれも有料です。

#### アカウント作成
* 前置きが長くなりましたが、アカウント作成後はCONSUMER_KEY, CONSUMER_API_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET, BEARER_TOKENが発行できるのでこれらは別途控えておいてください。
* なお、ACCESS_TOKENについては"[Read and Write](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）を設定します。下の画像中央部よりCreate jobボタンをクリックすると画面右側にモーダルが表示されるので、ここで繰り返し時間（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利用にはCONSUMER_KEY等必要であることは2.の通りですが、Herokuへのデプロイ後は、環境変数の入力を忘れないようにしましょう。HerokuのDashboardから、[Settings]タブ > [Reveal Config Vars]ボタンで環境変数は入力可能です。

## まとめ・参考
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)