TeX で数式の画像を作って SNS でシェアできるものを (だいぶ前に) 作った。
サイトはこれ。
Medium でシェアするとこんな感じ↓
Twitter ではこのようになる。
特徴としては、
- OGP を利用しているので、わざわざ画像を作って Twitter に貼る必要がない
- シェアされたリンクから TeX のソースが見れるので、複製したり微修正したりしやすい
なおリリースしてから8ヶ月ほど経ちましたが、現在までのユーザーは作者の私と知り合いの2人のみです。
ありがとうかかーたさん。私自身も全然使っていないので、リリース時以外の MAU は0人です。作ったら誰かが面白い使い方を思いついてくれるんじゃないかと期待したけどそんなことはなさそう。
作り方
ソースコードはこちらです。
OGP を表示する部分など基本的な仕組みは以下の2つの記事の通りになっています（特に後者）。
これらをもとに、MathJax による TeX 数式のレンダリングを加えたものが TeX2OGP です。なので苦労したのは MathJax が生成する画像の調整や、MathJax と Vue で同期を取るところだった気がします。
編集画面と共有画面
ここに VueRouter の設定があり、 /c/ が Compose つまり数式を入力して画像を作る画面です。画像を作成すると、/s/uuid に飛ぶのでここで Tweet ボタンを押すと Share できます。これらは Vue.js で作っています。
routes: [
{
path: '/c/',
name: 'Compose',
component: Compose
},
{
path: '/s/:id',
name: 'Share',
component: Share
},MathJax で数式をSVGでレンダリングし、それを PNG に変換するところまではクライアント側（ブラウザ上）でやっています。作られた PNG は Firebase の Cloud Firestore に送られます。この辺りのソースコードは謎のコメントアウトだらけで苦労した跡が見えます。
OGPの表示
さっきの /s/uuid のリンクを SNS にそのまま貼っても OGP 表示されません。 Twitter などにシェアする、OGP が表示されるリンクは /ogp/uuid になっていますが、これのリンク先は Firebase Cloud Function (AWS Lambda みたいなやつ) になっていて、動的に生成した HTML (OGP メタタグや画像へのリンクを含む) を返すようになっています。人間がブラウザでアクセスした場合には、 /s/uuid に飛ばされます。
functions/index.js
app.get('/ogp/:id', (req, res) => {
db.collection('cards')
.doc(req.params.id)
.get()
.then(result => {
if (!result.exists) {
res.status(404).send('404 Not Exist');
} else {
const data = result.data();
const html = genHtml(data.url, req.params.id);
res.set('cache-control', 'public, max-age=3600');
res.send(html);
}
});
});この OGP ですが、表示されたりされなかったりする気がします。また、時間が経つと Twitter で以前表示されていた OGP が消えてしまうようです。 消えた場合、 tex2og.web.app/ogp/xxxx のリンクを踏むと表示されるようになるようです。この辺は何が原因でそうなるのか分かりません。
という感じで、だいぶ以前に作ったものについて思い出しながら書きました。Vue.js に興味を持たれた方は以下の記事のアフィリエイトリンクから本を買ってください。
