--- title: "ローカルでOGPを確認するためのTUIツールを作った" date: "2024-12-14" tags: - "Tech" - "Rust" --- ## 経緯 https://asuto.dev [最初の記事](/blogs/20241205)を書いてから数日後、[このサイト](/)に上のようなOGPを設定し表示できるようにした。 このとき、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)](https://ogp.me/)とは任意のWebページを他のサイト上でリッチオブジェクトとして扱えるようにするための技術であり、具体的にはHTML上の`head`タグ内にある`meta`タグの情報を用いてWebページのタイトル、説明、画像、URLなどを取得して、その情報をカードとして表示する。 例えば、このサイトではNext.jsを用いてHTMLをレンダリングしているが、その出力には以下のようなタイトルや説明以外にもOGPやTwitter Cardに対応するためのメタデータが含まれている。 ```html:asuto.dev // 略 Home - Asuto // 略 ``` ## ogp-checkerについて ![ogp-checkerでasuto.devを調べたときのスクリーンショット](https://github.com/asuto15/ogp-checker/blob/main/docs/screenshot.png?raw=true) 作ったもののURLはこちら [https://github.com/asuto15/ogp-checker](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拡張機能がある。 https://chromewebstore.google.com/detail/localhost-ogp-%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/gcbnmkhkglonipggglncobhklaegphgn?hl=ja https://local-ogp.firebaseapp.com/ この拡張機能は`ogp checker local`などで調べたら出てきたのだが、リンク先を見たもののソースコードは公開されておらず、この拡張機能がロガーを仕込んでいたり悪意のある機能が存在する可能性を否定できないため(もちろん実際にそうである可能性は限りなく低いだろうが)、これを業務に用いたりするのは厳しいだろう。 そういうときにソースコードが公開されているツールが一つはあってもいいだろうと思ったため、この[asuto15/ogp-checker](https://github.com/asuto15/ogp-checker)を公開することにした。