第2回個人開発プロダクト供養~ogpkatex~

はじめに

この記事はLIGTHzアドベントカレンダー 2021の14日目の記事です。

個人開発プロダクト供養第２回です。第１回はこちら

OGPKaTeX <- GitHubにある残骸はこちら

私自身が、Twitter や Slack で、TeX使って数式を書きたいなという気持ちで作り始めたサービスです。
手元のローカルでMarkdownなどで数式書いて画像ペタリでもいいのですが、どうしても面倒臭いので、OGP使って、リンク画像で数式表示できればいいのでは？？と思って作っちゃいました。

結構なチカラをいれて開発したのですが、実際稼働しはじめると、自分自身でもあまり使い所がなく、サービス停止となりました。。うーん、もっと使えるはずなのですが、これも再度練り直したいサービスです。

構成と要素技術

• OGP
  • ニュース記事などのURLをSNSにはりつけると、タイトル画像やサムネイルが表示されるあの機能です。この画像部分をTeXで自動生成しちゃいます。
• KaTeX
  • WebページにTeXをさっくり導入できます。
• pageres
  • Headlessブラウザです。
  • コマンドでKaTeXで作成したWebページ上の数式を、これまた楽にスクリーンショットしてくれます。
• Next.js
  • Reactの勉強がてらNextでつくってみました。

処理フロー

1. Nextで表示されたWebページのテキストエリアに、ユーザさんがTeXで数式を書く
2. ユーザはSNSにリンクを貼る
3. OGPに動的に画像リンクが生成される
4. 画像は動的に生成され、読み込まれたタイミングでpageresがKaTeXの記載されたページを見て画像を生成する

動的OGPのすごい勉強になったので、その部分だけでも他のサービスに転用できる非常に勉強になった開発でした。