twoというWebアプリをリリースした

twoというシンプルなWebサービスをリリースした。

ソースコードはshuymn/twoにある。

これはSlackやTeamsのようなチャットツールでTwitterのURLを共有したときにOGPが展開されなくて困っていたので、それを解決するのを目的としている。 （SlackはTwitterのbotアプリケーションがあり、ツイートのURLは展開してくれるのでどちらかというとTeamsをターゲットとしている。さらには、SlackやTeams以外のサービスでも、OGPを展開しようとするサービスなら何にでも使えるはず）

というのも最近Teamsを使う機会が増えたのだが、ツイートのURLを全く展開してくれないため流れてきたURLを見ても内容がわからず、クリックしてブラウザという別のアプリケーションに飛んでやっと自分に関係があるかわかるという状態で、情報共有の敷居が高くなってしまったと感じていた。なので休みを使って一気に作った。

実装的には、TwitterのURLを受け取ると動的にそのページのOGPを取得して、OGP（metaタグ）を含んだHTMLかつアクセスした瞬間JavaScriptで元のTwitterのURLにリダイレクトするようなページを動的に生成してURLを発行している。

https://twitter.com/shuymn というページの場合は https://two.shuymn.me/shuymn というURLでアクセスできるように、ドメインを書き換えるだけで動作するようになっている。（ちなみに、ユーザーのプロフィールページは元からOGPがないので変換後のURLでもOGPは表示されない）

いちいちTwitterのURLをコピーしてから https://two.shuymn.me にアクセスするのは面倒なので、Twitterのページ上で右クリックすると変換後のURLをコピーしてくれるメニューを追加するChrome拡張Copy as Twoも作った。なんならこれを作りたいからWebサービスを作ったと言っても過言ではない。

ちなみにフロントエンドは門外漢なので（という言い訳をしていて）かなり素朴な実装で正直良くないが、技術スタックとしてはこのブログと同じくNext.jsを使っている。逆に言えばこのブログを構築した経験が生きたとも言える。

TwitterのOGPは存在していないのか？

結論から言うと、TwitterのページをChromeなどのWebブラウザで開き、HTMLを確認するとOGPは設定されている。

ではなぜOGPが展開されないのかというと、TwitterのページはアクセスするときにUser Agentを付与しないと『This browser is not supported.』のような文字を含んだHTMLが返ってくる様になっていて、これにはOGPは設定されていない。 （curlコマンドとか使うとわかりやすい）
そしておそらくOGPの取得時のアクセスはUser Agentが設定されていないので、OGPを含んでいないレスポンスを受け取ってしまい、OGPが表示されないのではないかと推測している。（OGP取得の仕組みを全く知らないので想像になってしまうが）

既知の問題

これはどうしようもないが、OGPを展開しているだけなので長文のツイートなどはOGPで描画できる文字数を超えてしまい全部を見ることはできない。

そういった問題をちゃんと解決し、SlackのTwitterアプリみたいな動作をさせたいのであれば（Teamsの場合は）Outgoing Webhookというものがありこれを使うと解決しそうな雰囲気がある。しかし、チャンネルごとにOutgoing Webhookを作成する必要があったり、それを乗り越えたとしてもチャンネルの会話がすべてOutgoing Webhookの処理先に流れてしまうというった問題もあり、会社によっては情報セキュリティの要件を満たせないのではないかと思っている。

なので、これですべて解決だとは思っていないが一番コスパの良い方法だとは思っている。

今後

特に機能を追加する余地はないので、フロントエンドを整えるぐらいしかやることはないかなーと思っている。

あとは two.shuymn.me というドメインが個人サイト感満載な気もしていて、ここを変えてもいいかもしれないと思っている。が、もちろん変わったとしても今のアドレスでアクセスできない状態になるというのはないようにする。

技術面の詳細な解説はQiitaかZennにまとめたいなと思っている。