ローカルでOGPを確認するためのTUIツールを作った
Date: 2024-12-14
## 経緯
このとき、OGPの設定をしてVercelにデプロイした後に、Discordにステージング環境のURLを貼り付けたり、OGPを確認してくれる適当なWebサービスを使ったりして挙動を確認していたのだが、この方法だと変更をデプロイするまで実際の挙動がわからないという欠点がある。
これはつまり挙動が不明な状態でインターネット上にステージング環境のURLを流さなければいけないということであり、このサイトはまだ個人サイトだからよいが、誰かと一緒に所有していたり業務で扱っているものであれば、可能な限りこのような手段はとりたくないと考えた。
そこで今回、ローカルでOGPを確認できるツールとして、ターミナル上で画像を表示しメタデータを確認するためのTUIツールをRustで作成した。
## OGPとは
The Open Graph protocol enables any web page to become a rich object in a social graph. (出典: https://ogp.me/#intro)
まず、OGP(Open Graph Protocol)とは任意のWebページを他のサイト上でリッチオブジェクトとして扱えるようにするための技術であり、具体的にはHTML上の
headタグ内にあるmetaタグの情報を用いてWebページのタイトル、説明、画像、URLなどを取得して、その情報をカードとして表示する。例えば、このサイトではNext.jsを用いてHTMLをレンダリングしているが、その出力には以下のようなタイトルや説明以外にもOGPやTwitter Cardに対応するためのメタデータが含まれている。
```html:asuto.dev
// 略
Home - Asuto
// 略
```
## ogp-checkerについて
作ったもののURLはこちら
https://github.com/asuto15/ogp-checker
詳しくはリポジトリの
README.mdに書いたが、これは通常のドメインを指定する以外に、localhostやIPアドレス直打ち、ポート番号やスキーム(http or https)の指定などに対応しており、インターネット環境だけでなくローカル環境で開発中のサイトに対しても使えるという特徴がある。
使用しているクレートはreqwest, scraper, image, tokio, ratatui, crosstermの6つであり、以下のような用途に使用している。- -
reqwest- - 任意のWebサイトに向けてHTTP, HTTPSリクエストを投げる
- -
- -
scraper- -
reqwestで得られたHTMLを解析しメタデータの部分を取得する
- -
- -
image- - 取得したメタデータの画像を表示するために色情報を抜き出す
- -
- -
tokio- - ユーザの入力に対して非同期でデータを取得する
- -
- -
ratatui- - TUIでURLを入力し、得られたOGPの情報を表示する
- -
- -
crossterm- - 今回は
ratatuiのバックエンドとしてのみ使用している
- -
このソフトウェアと同じ用途のために作られたものとして、以下のようなChrome拡張機能がある。
この拡張機能は
ogp checker localなどで調べたら出てきたのだが、リンク先を見たもののソースコードは公開されておらず、この拡張機能がロガーを仕込んでいたり悪意のある機能が存在する可能性を否定できないため(もちろん実際にそうである可能性は限りなく低いだろうが)、これを業務に用いたりするのは厳しいだろう。そういうときにソースコードが公開されているツールが一つはあってもいいだろうと思ったため、このasuto15/ogp-checkerを公開することにした。