search
LoginSignup
11
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

【Laravel】よくあるOGP画像を生成するサービスを作ってみた-tabego-

tabego

はじめに

  • 質問箱などでよくある「OGP画像を生成してtwitterのTLでデカデカと表示させる系サービス」を作ってみたまとめです
  • ただ、入力した内容を画像にテキスト張り付けるだけなのもありがちになってしまうので、今回はGoogle Maps APIを使って飲食店を検索し、店舗名を画像に貼り付けて「自分が行きたいお店をSNSでシェアして一緒に行く人を募集できるサービス」を作りました
  • この記事ではチュートリアルではありませんが、開発の中でポイントになった箇所をまとめていきます
  • リリースしたものはこちらです→tabego(現在停止中)

使用した技術

  • Laravel
    • Socialite (ソーシャルログイン用ライブラリ)
    • Intervention Image (画像編集ライブラリ)
  • Vue.js
    • vuetify (マテリアルデザイン用ライブラリ)
  • AWS
    • EC2 (AmazonLinux, Nginx)
    • RDS (MySQL)
  • Google Maps API

店舗検索

ログイン後のホーム画面から店舗検索できるようになっています

API選定

まず店舗検索をどのAPIを使って実現させようかを考えたのですが

  • 食べログ→API廃止済み
  • ぐるなび→商用利用禁止、将来的に広告貼ろうとすると厳しい
  • ホットペッパーグルメ→ちょっと登録店舗数が少ない(特に地方)

色々考えましたが、掲載店舗数の多さと商用利用OKを考慮した結果、最終的にGoogleMapsAPIにしました。
ただGoogleMapsAPIも無料枠を過ぎると有料になってしまうので、早めに広告貼ったりしてマネタイズしないと赤字に苦しんじゃうなぁと思ってるとこはあります。

「飲食店」の取得

こちらの公式ドキュメントにあるTextSearchRequestsを使用していくのですが、「飲食店」というカテゴリで分かれておらず、「レストラン」、「カフェ」、「バー」などと細分化されたジャンルでしか取得できないようです。なかなかこの仕様が厄介でしたが、

https://maps.googleapis.com/maps/api/place/textsearch/json?types=restaurant&query=...
https://maps.googleapis.com/maps/api/place/textsearch/json?types=cafe&query=...

と、2回に分けてAPIを呼ぶことにして一旦fixしました

画像編集

選択した店舗名を画像に表示させます。あらかじめベースとなる画像を作っておきます(GIMPで作成しました)
ogp_base.jpg

この画像にInterventionImageを使ってテキストを挿入します。InterventionImageの詳しい操作はググってください。

private function createOgpImage($placeId, $shopName){
    //ベースとなる画像
    $path = public_path('images/ogp_base.jpg');
    $img = \Image::make($path);

    //画像にテキスト挿入
    $img->text($shopName, 520, 250, function($font){
        $font->file(public_path('fonts/03SmartFontUI.ttf'));
        $font->size(62);
        $font->color('#272A2C');
        $font->align('center');
        $font->valign('top');
    });
    $img->text('に食べ行こ!', 520, 340, function($font){
        $font->file(public_path('fonts/03SmartFontUI.ttf'));
        $font->size(32);
        $font->color('#272A2C');
        $font->align('center');
        $font->valign('top');
    });

    //編集した画像をストレージに保存
    $save_path = storage_path('app/public/ogp_images/' . $placeId . '.jpg');
    $img->save($save_path);
}

上記の処理を通した結果がこちら。
ChIJSbP0HsKPVTUR8Zguq7pHn_8.jpg

あとは「meta property="og:image"」と「meta name="twitter:image:src"」の部分で画像を指定して、ページにも表示させるだけですね。

おわりに

かなりざっくりで、あまり実用的な記事ではないと思いますが、雰囲気がなんとなく伝わればいいなぁと思います
そこまで難しいものでもないと思うのでLaravelの青本を一通り写経した方はぜひOGP画像生成サービスにぜひ挑戦してみてください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
11
Help us understand the problem. What are the problem?