Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
297
Help us understand the problem. What is going on with this article?
@ryo2132

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

流行りのノーコードツールのGlideでアプリを作ってみたのでその所感を書きます。

🍱作ったもの

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

Takeout-Hitachinaka · 店舗一覧

スクリーンショット 2020-05-12 6.55.20.png

機能

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

🔧なぜ作った?

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

新型ウイルスに負けないぞ! テイクアウト&デリバリー応援キャンペーンサイト

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

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

📱Glideとは?

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

Create an app from a Google Sheet in five minutes, for free • Glide

May-14-2020 05-28-00.gif

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

実装が圧倒的に早い

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

スクリーンショット 2020-05-12 7.22.39.png

コンポーネントが豊富

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

🧰 Components - Glide Library

スクリーンショット 2020-05-12 7.22.58.png

ドキュメントがわかりやすい

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

Learn to Glide • Glide

スクリーンショット 2020-05-12 6.37.32.png

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

Mapboxの住所ピンのズレ

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

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

【Glide】マップ表示にMapBoxが使われるようになったので位置が不正確です。住所から緯度経度を調べる

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非常に良かったです。
今回のようなスピード感の求められるアプリや、小規模のコミュニティ内で用途の決まったアプリ等はこれで良いのではと思います。
今後も、自分でプログラミングの技術を磨きつつ、こういうノーコードプラットフォームも有効に使っていきたいです。

297
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ryo2132
Frontend engineer / フルリモートワーク / 元消防士🚒 / 一児の父 / Ruby / Typescript / Vue.js / Firebase
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
297
Help us understand the problem. What is going on with this article?