OGP画像表示を Firebase Cloud Functions を使って実装する方法

4130 ワード
Twitter Firebase OGP cloudfunctions Twitter テキストリンク

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