見出し画像

レモンサワーのみの新たな世界をつくるべく製作開始!vol.5

こんばんは、レモンサワー大好き人間のひろきです🍋

10月よりプログラミングを習い始めたことをきっかけに、レモンサワー大好き人間が習ったプログラミングを活かして、レモンサワー好きが新たなレモンサワーを探せる・出逢えるプロダクトを製作中です。
1月19日からクラウドファンディングに挑戦します!

①お気に入りのレモンサワーを投稿する機能 → vol.1にて
②投稿されたレモンサワーを見つける機能 → vol.1にて
 :投稿されたレモンサワーのお店を一覧表示
 :投稿されたレモンサワーのお店をMap表示 → vol.3でピン位置の修正
③見つけたレモンサワーを提供するお店を深く知る機能 → 今回!
④実際体験した後に共有する機能 → vol.2にて

🍋↓マガジンにまとめましたので開発進捗を是非ご覧ください↓🍋


今回のアップデート情報4つ

①見つけたレモンサワーを提供するお店を深く知る機能

HPAPIイメージ

投稿店舗一覧から店舗をタップすると、店舗詳細ページへ遷移します。
店舗詳細ページのコンテンツにホットペッパーの店舗ページを組み込みました。
これで、お店のメニュー確認や電話・ネット予約へ繋げることが出来ます。

当初はLINE Bot上で店名を送るとホットペッパーAPIを叩いて、店舗ページのURLを返してくれるものを想定していましたが、GoogleスプレッドシートにあるデータをGlide上で表現しているシステムなので、GASを使ってGoogleスプレッドシートにある「店名」をキーワードとしてホットペッパーの店舗ページURLを取り出すことが出来れば、Glide上で完結するのでは?と考え、早速実装しました。

実装の様子は下記Zennスクラップに記載してあります。
ご興味のある方は是非ご覧ください。


②Glide上に投稿機能を設置

投稿機能

投稿するタブにフォームボタンを設置。フォームボタン内にある項目を埋めて送信すると、即時に投稿店舗一覧とMAPに反映されます。
仕組みとしては、投稿するとGoogleスプレッドシートに反映され、反映されたGoogleスプレッドシートの情報を元にして投稿店舗一覧やMAPに反映させる、といったものです。

上記①を実装させながらひとつの疑問が浮かんできました。
このプロダクトはLINE Botを使う必要があるのか?ということです。
レモンサワー情報を投稿するにあたり、Googleフォームを使用してきましたが、そうなると何かしらGoogleフォームを設置する場所が必要でした。それがLINE Botでした。
Glide内で投稿することが可能であれば、LINE Botは不要となり、プロダクト的にもアプリ内でスッキリ完結させることが出来ます。

調べてみると、フォームボタン機能があるとのこと。(よっしゃ!)

こちらを参考にしながら改善を図り、無事実装させることが出来ました。

③レモンサワー画像の反映が可能に
スマホからGlideを操作すると、オーナーの私以外はレモンサワーの画像がうまく反映されないことがわかりました。
原因は私のGoogleアカウント。。。会社のアカウントを使用していたことが理由でセキュリティの関係で難しかったようです。
が、Googleフォームを介さずにGlideから投稿出来る仕様にしたことで解決しました!Googleアカウントを個人で新しく作らないとなと考えていたところでしたので、狙ったものではありませんでしたが、結果オーライです!


④TOPページを設置
タブから機能切り替えはできますがボタンからも遷移出来るように改修、またようこそ感を出したかったので、仮ではありますが設置しました。

画像3

タブが5つになり、見た目はだんだんアプリっぽくなってきました。
(う、うれしい、、、正月返上して進めた甲斐がありました。。。)
・TOPページ
・投稿店舗一覧
・MAPから探す
・投稿する
・チャット


次のステップ

細かな改修はしながらも、
・プロダクト動画を作り直す
・クラウドファンディング下書きページを更新
・ホットペッパーAPIに該当しない(契約していない)飲食店をどうするか

開発進捗は随時Twitterで発信しますので、是非Twitterフォローお願いします🍋

この記事が気に入ったらサポートをしてみませんか?