はじめに
Firebaseを使うと気軽にSNSアプリを作ることが出来ます。
SNSは作りたいけどサーバー構築とかはやりたくない、、、その時出会ったのがFirebaseでした。
サーバーの知識がなくてもサクッと使えるので便利ですね。
今回の問題
SNSなら当然シェア機能が必要になってきます。
シェア機能を作ろうと思って調べたらFirebaseにFirebase Dynamic Links(FDL)というシェアの時使えるリンクを作ってくれるサービスがありました！
FDLを使うとアプリをインストールしてない端末ではアプリストアに飛んでアプリを持ってる端末ではアプリを直接開くことができて、OGPっぽく写真とタイトル、内容を設定することができます。
しかし、投稿の写真と内容が一緒に表示される動的なOGPを作ることはできませんでした。
（一応長いダイナミックリンクを利用してイメージのurlとタイトルと内容を全部入れたリンクを使うとできますがリンクが長すぎるので気に入らない、、）
Firebaseのアプリでも動的なOGPを表示させる
結果から言うとFirebase Cloud Functions + Firebase Hosting + Firebase Dynamic Linksを組み合わせることで動的なOGPを表示させることができました。
もし同じことで悩んでる方がいたら参考になれば嬉しいです。
やり方としては
Firebase Cloud Functions + Firebase Hostingで動的にOGPを設定してFirebase Dynamic LinksのディープリンクにFirebase Hostingのリンクを入れて動的にOGPを表示するFDLを作ります。複雑！！
一つ一つクリアしていきましょう。
Firebase Hosting
まずFirebase Hostingから設定していきます。
1.元々あるFirebaseプロジェクトにウェブアプリを追加します。
2."このアプリにFirebase Hostingも設定します"にチェックします。
3.表示される手順で設定を行ってください。
4.deployまで終わったら最後にターミナルに表示されたURLを開いてみる。
5.問題なく表示されたら設定完了です！
上の手順でHostingを使用できるようになりました。
index.htmlの部分は今回表示することないので修正しなくても大丈夫です。
修正するのはfirebase.jsonのみです。
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/story/*",
"function": "storyDetail"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
}
rewritesのところにsourceとfunctionを追加します。
sourceに指定したpathのurlの場合functionに指定したCloud Functionsのメソッドが呼ばれるという仕組みです。
まだCloud Functionsは用意してないのでこの時つけたメソッド名を覚えておいてください。
これでFirebase Hostingは終わりです。
私の場合https://ani-release.firebaseapp.com/このURLがデフォルトで追加したsourceをくっ付けたhttps://ani-release.firebaseapp.com/story/[ID]このURLを使用することになります。
Cloud Functions
次にCloud Functionsの設定です。
1.Firebase ConsoleでFunctionsタブをクリックします。
2.使ってみるをクリックします。
3.表示される手順で設定を行ってください。
https://firebase.google.com/docs/functions/get-started?authuser=3
設定がうまくいかない場合スタートガイドを参考にしてください。
Cloud Functionsが使えるようになったらさっき決めたメソッド名でメソッドを作ります。
exports.storyDetail = functions.https.onRequest(function(req, res) {
const path = req.path.split('/')
const storyID = path[2]
firestore.collection('stories').doc(storyID).get().then(doc => {
if (!doc.exists) {
console.log('No such document!');
} else {
const htmlString = buildStoryHtmlWithPost(doc.data());
res.set('Cache-Control', 'public, max-age=600, s-maxage=600')
res.status(200).end(htmlString);
return
}
})
.catch(err => {
res.status(500).end(err);
});
})
const buildStoryHtmlWithPost = (story) => {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>MYAU</title>
<meta property="og:title" content="${story.story}">
<meta property="og:description" content="MYAU-猫と猫好きのためのコミュニティー">
<meta property="og:image" content="${story.storyImageUrls[0]}">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
</head>
<body>
<script>window.location="https://myaurelease.page.link/story?id=${story.id}";</script>
</body>
</html>`
}
私も場合こういったコードになります。
Firebase Hostingでsourceの部分で指定した/story/*がURLに含まれるとstoryDetailメソッドが呼ばれ/story/*の*部分に入っているIDを取得してFirebase Storeで投稿を取得してbuildStoryHtmlWithPostメソッドに投稿を渡し、投稿の写真と内容を入れたOGP用のhtmlを返しています。
<script>window.location="https://myaurelease.page.link/story?id=${story.id}";</script>でデスクトップのユーザーを
Firebase Dynamic Linksにリダイレクトし、Firebase Dynamic Links設定画面で設定するリンク先のwebサイトに飛ばします。直接リダイレクトさせたいURLを入れても構わないです。
ここまでで動的OGP対応は完了です！
twitterなどでリンクを入れてちゃんと動的なOGPが表示されているか確認してみてください。
ちゃんとtwitterカードが表示されればOKです！
あと少しです。
Firebase Dynamic Links
最後にFirebase Dynamic Linksです。
1.Firebase ConsoleでDynamic Linksタブをクリックします。
2.始めるをクリックします。
3.表示される手順で設定を行ってください。
4.https://[設定したリンク名].page.linkみたいなリンクが出来ます。
5.新しいダイナミックリンクをクリックします。
6.短縮URL、ダイナミックリンク、iOSとAndroid用の設定を行います。
7.キャンペーン トラッキング、ソーシャルタグ、詳細オプションの部分は何も設定しないで完了します。
これでFirebase Dynamic Links設定完了です。
このURLをシェアすることで端末に合ったリンク先に飛ぶようになります。
しかし、このURLをシェアするだけだとOGPは表示されません。この時使うために作ったのがFirebase Hosting + Cloud Functionsです！
Firebase Hosting + Cloud Functions + Firebase Dynamic Links
では最後に今回作った三つを合体します。
1.Firebase Dynamic Linksの画面にさっき作ったリンクが表示されている。
2.そのリンクの右に表示される点点点をクリックします。
3.リンクの詳細をクリックします。
4.長いダイナミック リンクの部分が表示されるのでコピーします。
5.linkパラメタのところをFirebase Hostingで作ったURLに変える。
私の場合https://myaurelease.page.link/?link=https://ani-release.firebaseapp.com/story/[ID]&isi=*****&ibi=*****
こういうURLになりました。
アプリでシェアする時IDの部分だけシェアする投稿のIDを入れてシェアすることで動的OGPを表示するリンクをシェアすることが出来ました。👏👏👏
最後に
説明が下手で申し訳ないです。
少しでも参考になれてら嬉しいです。
お疲れ様でした！！