【Webサービスをリリースしました！】
— 新居陽太 (@yotaarai85) 2019年5月7日
SNSで行きたい飲食店をシェアできるサービスです。
全国すべての飲食店に対応している(はず)です。
ぜひSNSでつながっている友達をtabegoでご飯や飲みに誘ってみてください！https://t.co/LojeLZfg3U
#はじめに
- 質問箱などでよくある**「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で作成しました)
この画像に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);
}
上記の処理を通した結果がこちら。
あとは「meta property="og:image"」と「meta name="twitter:image:src"」の部分で画像を指定して、ページにも表示させるだけですね。
#おわりに
かなりざっくりで、あまり実用的な記事ではないと思いますが、雰囲気がなんとなく伝わればいいなぁと思います
そこまで難しいものでもないと思うのでLaravelの青本を一通り写経した方はぜひOGP画像生成サービスにぜひ挑戦してみてください。