asuto.dev
☀

ローカルでOGPを確認するためのTUIツールを作った。 - 20241214

経緯

Home - Asuto

Home - Asuto

asutoのホームページ - おもしろそうなお仕事を現在募集しています。 About Contacts Blogs

https://asuto.dev
最初の記事を書いてから数日後、このサイトに上のような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)とは任意のWebページを他のサイト上でリッチオブジェクトとして扱えるようにするための技術であり、具体的にはHTML上のheadタグ内にあるmetaタグの情報を用いてWebページのタイトル、説明、画像、URLなどを取得して、その情報をカードとして表示する。
例えば、このサイトではNext.jsを用いてHTMLをレンダリングしているが、その出力には以下のようなタイトルや説明以外にもOGPやTwitter Cardに対応するためのメタデータが含まれている。
<head>
  // 略
  <meta name="next-size-adjust" />
  <title>Home - Asuto</title>
  <meta name="description" content="asutoのホームページ" />
  <meta property="og:title" content="Home - Asuto" />
  <meta property="og:description" content="asutoのホームページ" />
  <meta property="og:url" content="https://asuto.dev" />
  <meta property="og:site_name" content="asuto.dev" />
  <meta property="og:image" content="https://image.asuto.dev/ogp-card.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="実家の犬のあんとれんの写真" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Home - Asuto" />
  <meta name="twitter:description" content="asutoのホームページ" />
  <meta name="twitter:image" content="https://image.asuto.dev/ogp-card.png" />
  <meta name="twitter:image:type" content="image/png" />
  <meta name="twitter:image:width" content="1200" />
  <meta name="twitter:image:height" content="630" />
  <meta name="twitter:image:alt" content="実家の犬のあんとれんの写真" />
  // 略
</head>

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拡張機能がある。
Localhost OGP チェッカー - Chrome ウェブストア

Localhost OGP チェッカー - Chrome ウェブストア

localhostやBasic認証下などインターネットからリーチできない環境のHTMLファイルのOGPタグの動作確認を行うためのブラウザ拡張です。該当ファイルのheadタグを一時的にホスティングします。

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を公開することにした。