つくったもの:TeX2OGP

OGP がうまく表示されない場合のために、 Twitter Card Validator のスクショも置いておく
  • OGP を利用しているので、わざわざ画像を作って Twitter に貼る必要がない
  • シェアされたリンクから TeX のソースが見れるので、複製したり微修正したりしやすい

作り方

ソースコードはこちらです。

編集画面と共有画面

ここに VueRouter の設定があり、 /c/ が Compose つまり数式を入力して画像を作る画面です。画像を作成すると、/s/uuid に飛ぶのでここで Tweet ボタンを押すと Share できます。これらは Vue.js で作っています。

routes: [
{
path: '/c/',
name: 'Compose',
component: Compose
},
{
path: '/s/:id',
name: 'Share',
component: Share
},

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);
}
});
});

--

--

Podcast はじめました http://interaxion-podcast.github.io/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store