ノーコード！ Glideで飲食店検索アプリを爆速で作ってみた

流行りのノーコードツールの[Glide](https://www.glideapps.com/)でアプリを作ってみたのでその所感を書きます。

# 🍱作ったもの
テイクアウトを提供している地元飲食店の検索アプリです。
店名・住所・メニューでの検索やマップ表示などが出来ます。
製作時間は8時間程（8割の時間は情報元サイトからのデータ取得・整形）。

[Takeout-Hitachinaka · 店舗一覧](https://takeout-hitachinaka.glideapp.io/)

<a href="https://takeout-hitachinaka.glideapp.io/"><img width="1231" alt="スクリーンショット 2020-05-12 6.55.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/21dd3020-dd9a-c1d4-22c4-7083b2694e0a.png"></a>

機能

```
- 店名・メニュー・地名などでの検索機能
- 詳細情報の表示
- マップ情報の表示、マップ画面での現在位置取得
- コメント機能
- お問い合わせフォーム
```


# 🔧なぜ作った？
地元の商工会議所が提供しているテイクアウト飲食店のまとめページが、かなり味のあるデザインで気になったのがきっかけです。
せっかくの良いキャンペーンが上手く伝わらず勿体ないなと思いました。

[新型ウイルスに負けないぞ! テイクアウト&デリバリー応援キャンペーンサイト](http://www.hcci.jp/corona/takeout/index.htm)

特に以下点が気になりました。

```
- 夜のお店を彷彿とさせる配色
- 検索機能がない、掲載順も統一性なくお店を探すことが困難
- 欲しい情報にかなりスクロールしないと到達しない導線
```

# 📱Glideとは？

今回アプリ開発に使ったのはGlideというノーコードでPWAアプリを作成するツールです。
Googleスプレッドシートをデータソースとして利用し、以下公式サイトのイメージのように数クリックでアプリが作れてしまいます。

[Create an app from a Google Sheet in five minutes, for free • Glide](https://www.glideapps.com/)

![May-14-2020 05-28-00.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/aceb8946-8b6e-2f85-04d1-3e79c465eabb.gif)

# 😆Glideを使って良かったところ

### 実装が圧倒的に早い
一行もコード書かずにアプリが作れるので圧倒的に早いです。
またダッシュボードのUIも直感的で使いやすく、今回初めてGlideを触ったのですが操作方法をすぐ理解出来ました。
ほぼ自動でスプレッドシートからコンテンツ作ってくれるのでアプリ側の機能実装自体は2時間程でした。

<img width="1343" alt="スクリーンショット 2020-05-12 7.22.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/c109b6e2-c1fe-15ed-7e0e-e7ad7e41bfd4.png">


### コンポーネントが豊富
想像以上に、配置できるコンポーネのが豊富なのも良かったです。
特にFormや、メディアボタンなどが使いやすいですね。

[🧰 Components - Glide Library](https://docs.glideapps.com/all/reference/components)

<img width="1329" alt="スクリーンショット 2020-05-12 7.22.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/5dfe7e25-29cd-ea88-bf42-e11eceb89f62.png">


### ドキュメントがわかりやすい
ドキュメントページの情報が豊富で分かりやすいと思いました。
また、Glideの使い方についてのYouTube動画も公式サイトでまとめられていて、エンジニアではない方でも容易に理解出来そうです。

[Learn to Glide • Glide](https://www.glideapps.com/learn-to-glide)

<img width="1518" alt="スクリーンショット 2020-05-12 6.37.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/99e9ec4c-9f53-753d-a79f-848531e9456d.png">


# 🤔Glideを使って気になったところ

### Mapboxの住所ピンのズレ
Glideは住所から簡単にMapboxのマップコンテンツを作れるのですが、その住所ピンがズレまくります。
上手く行く場所もあるのですが、住所に建物名などが入ると100％とんでもない場所にピンがおかれてしまいます。

結局、住所からピンを置くのは諦めて以下の記事を参考に緯度、経度をAPI経由で取得して、そちらの情報を元にピンを置くように修正しました。サンプルのスプレッドシートまで提供していくれているので大変助かりました。

[【Glide】マップ表示にMapBoxが使われるようになったので位置が不正確です。住所から緯度経度を調べる](https://tom2rd.sakura.ne.jp/hanakotech/2019/08/17/post-12245/)

### SNSシェアボタンのコンポーネントがない
例えば今回のアプリだと、お気に入りのテイクアウト飲食店のページをさくっと共有できるようにしたかったのですが、現代のアプリには必須と思われるSNSのshareボタンコンポーネントが見つからず共有機能を実装できませんでした。
また、Glideのページは全体で1つのURLなので気軽にURLをコピーして該当ページを共有というのもで出来なさそうです。
（もしやり方ご存知の方いれば教えてくださいー）

**2020/05/15 5:03 追記**
アプリページへのリンクのシェアではないですが、代替の方法を @haraday さんがコメントしてくれました。
記事下コメント蘭も確認お願いします!

### Formコンポーネントが使いづらそう
今回お問い合わせ機能を実装するために、Form用のコンポーネントを使ったのですが、ちょっと使いづらいフォームだなと思いました。
特に送信ボタンが右上に小さく配置されていて、慣れていないユーザーだと分かりづらそうです。
ここら辺もカスタマイズできると良いですね。

### 無料枠のMapピンは最大10件
今回のアプリでは店舗ごとの位置情報を表示したかったのでMapページを作り店舗の位置にピンをおきました
すぐに無料枠の10件を超えてしまい、ピンが表示されず、有料枠に更新することとなりました。
今回のような位置情報を表示するアプリでは、その件も考えておいた方が良さそうです。
~~ただ、10件以上表示されるタイミングもあったのでいまいち条件定かではない~~

**2020/05/13 20:52 追記**
緯度・経度のソースからMapを表示する場合は、無料枠でも無制限にピンを置けるそうです..!!


# 終わりに
以上、「ノーコード！ Glideで飲食店検索アプリを爆速で作ってみた」でした。
総括として、Glide非常に良かったです。
今回のようなスピード感の求められるアプリや、小規模のコミュニティ内で用途の決まったアプリ等はこれで良いのではと思います。
今後も、自分でプログラミングの技術を磨きつつ、こういうノーコードプラットフォームも有効に使っていきたいです。