Firebase を使って作成中のサービス #オオエン に OGPイメージを表示したくなったので 調べて実装ししてみたのでそのメモ。
Firebase 料金プラン 変更
料金プラン を 従量制
に変更する。 外部サーバとの通信が必要になるので 従量制
プランにする必要があります。
Functions を利用するプロジェクトを作る
firebase cli
で 初期化時に functions
を有効にする
firebase init
〜
◉ Functions: Configure and deploy Cloud Functions
OGP内容を取得するコード
https.onCall のプロトコル で 実装してみたコード
必要モジュールのインストール
npm i --save request
npm i --save request-promise
OGP 取得をしてみるコード
import * as rp from 'request-promise';
class Api {
private constructor() {
}
public static async getSiteMeta(u: string) {
const now = (new Date()).getTime();
const result = {title: 'リンク', url: u, ogp: '', err: null, createDate: now};
return rp(u)
.then( (body: string) => {
const t = body.match(/<title.*?>(.*?)<\/title>/);
if (t !== null) {
// console.log('t', t[1]);
result.title = t[1];
}
const o = body.match(/<meta property="og:image" content="(.*?)"/);
if (o !== null) {
result.ogp = o[1];
}
return Promise.resolve(result);
})
.catch((err: any) => {
// console.log( 'err', err );
result.err = err.message;
return Promise.resolve(result);
});
}
};
exports.getSiteMeta = functions.https.onCall( async (data, context) => {
return await Api.getSiteMeta(data.url);
});
OGP内容を シェルで試す
firebase functions:shell
で ローカルで実行できるので試す。
functions init 時に TypeScript を選んだ場合は npm run shell
で実行できる。
cd functions
npm run shell
> getSiteMeta({url: 'http://dev.ooen.me/r/WbOHbEeX'})
〜
RESPONSE RECEIVED FROM FUNCTION: 200, {
"result": {
"title": "コンビニプリンおすすめ4種",
"url": "http://dev.ooen.me/r/WbOHbEeX",
"ogp": "https://firebasestorage.googleapis.com/v0/b/ooen-dev.appspot.com/o/OfRBD4q3KpMxcBiLLAwN8a7bEav1%2Ft_furu-1585796845061.jpg?alt=media&token=e63dde4d-1530-4d64-a0d8-0ce7c8d15e76",
"err": null,
"createDate": 1585803379441
}
}
ホスティング で 実行するコードサンプル
public static getSiteMeta(u: string, callback: (data: any) => void) {
const siteMeta = firebase.functions().httpsCallable('getSiteMeta');
siteMeta({url: u}).then((result: any) => {
// console.log('result', result);
callback(result.data);
});
}
作成中サービス オオエン
経験や行動した事をリストにして公開しとくと、誰かが試したよとか行動したよ!が届くのでちょっと嬉しくなるサービス。試したり行動した人を気軽に楽しく応援できます。興味ある方、 どんなリスト作りたいかなど事前登録で教えて貰えると嬉しいです!
こんな感じの画像をTwitterにシェアする事でリプライが届いたりします。
# 在宅勤務 のお供に コンビニ #プリン を食べ比べ。 #ミチプー #イタリアンプリン
# コンビニプリンおすすめ4種
# オオエン by @t_furu
http://dev.ooen.me/r/WbOHbEeX