見出し画像

今話題のノーコードツールGlideを用いて江戸川区テイクアウト店舗アプリを作ってみた!

ノーコードツール『Glide』を用いて、江戸川区のテイクアウト店舗をまとめたアプリを作ってみたので、その作り方について紹介します。
また、Glideを用いてアプリを作ってみて良かった点、気になったことをまとめています。
これからノーコードアプリを作ってみようと思っている人、Glideを使ってアプリ制作をしようと思っている人向けに分かりやすく解説したので是非ご覧ください。

1.はじめに

まずはじめに、この記事のポイントと、どのような人に読んで欲しいかを記載します。

この記事のポイント
この記事では、実際にノーコードツールglideを用いて、江戸川区のテイクアウト店舗アプリを作成していく流れについて解説していきます。
実際にアプリを作成する流れを説明していくため、Glideを用いてどのようにアプリを作成していけるのかについて、その流れを確認することができ、作成イメージが沸きやすくなると思います。
また、Glideを用いて実際にアプリを作ってみた経験から、Glideを用いてアプリを作ってみて良かった点、気になったことをまとめているので、是非最後までお付き合いください。

この記事を読んで欲しい人
続いて、以下のいずれかに当てはまる人には特にこちらの記事を読んで欲しいです。

・ノーコードアプリを作成してみたいという人
・Glideを用いてアプリを作成してみたいという人

2.Glideとは

次に、今回扱うノーコードツールであるGlideについて、簡単に解説していきます。

簡単にアプリを作れるノーコードツール

NoCodeアプリGlideとは

Glideを一言でまとめると、『スプレッドシートを読み込むだけで簡単に作成できるノーコードツール』です。Glideは他のノーコードツールと比べて、より手軽にアプリを作成することができるツールになります。詳細は以下記事にまとめたのでご覧ください。

3.作ったもの

続いて、早速ですが、今回作ったアプリを紹介します。
こちらの江戸川区のテイクアウト店舗アプリは、江戸川区の公式サイトに記載のあるテイクアウト店舗一覧をアプリ化したものです。
制作時間は約2時間程度で、こちら課金はしていないので無料で作成することができます。
是非以下リンクから、ご覧ください。

4.作り方

次に、上記で紹介したアプリの作り方について解説していきます。

Step.1 公式サイトより店舗一覧を抽出

上記URLリンクに記載のあるPDFファイルをダウンロードします。

続いて、上記サイトにて、PDFをエクセルに変換し、少し形を整えます。

テイクアウトアプリ スプレッドシート

そのエクセルファイルをスプレッドシートに落とし込みます。

Step.2 Glideにインプット

続いてこちらのファイルをGlideにインプットしていきます。

テイクアウトアプリ インプット

上記、Create app..から先ほどのスプレッドシートを読み込みます。

テイクアウトアプリ 編集画面

そうすると、上記アプリが完成しました。こちらでも一定アプリとしては機能をしますが、よりアプリとして使いやすさを高めるためにデザインの変更をしていきます。

Step.3 アプリのデザインの変更

続いて、Glideの管理画面でアプリの編集をしていきます。以下にて機能の概要について説明していきます。

テイクアウトアプリ 編集詳細画面

①Glideの各機能一覧
こちらではGlideの各機能を選択することができます。以下上から順番に解説をしていきます。

Layout
こちらは今スクリーンショットで記載している部分となり、画面のレイアウト設計をまとめて管理することができる機能です。一覧形式かチェックリストを記載する形式かなどを選択することでどのような形式のアプリを作成することができるかをこの機能では選択することが可能です。
この機能が一番活用することになる部分であると思います。

Tabs
こちらはアプリ下部にあるタブを編集、追加することができる機能です。タブのフォーマットやアイコンを変更することができます。

Data
こちらは、読み込んだスプレッドシートのデータをGlide上で確認することができる機能です。カラムの追加もすることができます。

Preview as
こちらは、ユーザーごとにどのような形式(iOSかAndroid)を選択し、表示させることができる機能です。プレビューとして画面を確認したいときに活用できます。

Settings
こちらは、アプリの色やアプリ概要の説明を変更できるレイアウト以外の設定を変更できる機能です。レイアウトと異なり、見た目のフォントや色などを編集できるため、アプリのデザインや仕様を変更したいときに主に活用します。
Layout機能に続き、活用することが多い機能です。

Edit sheet
こちらは、読み込んだスプレッドシートを直接編集することができる機能です。Data機能と異なり、スプレッドシートを直接編集することができます。

Reload sheet
こちらは、スプレッドシートを編集した場合、リロードをかけることができる機能です。主に、スプレッドシートを編集し、最新版のものをGlideで読み込みたい場合活用します。

②各機能ごとにおける編集画面
上記それぞれの機能を選択した際の編集をこちらで行っていきます。今回は詳細な説明は割愛しますが、今回私は以下設定でアプリを作成しました。こちらを変更するとアプリ画面上でどのようになるかを確認しながら編集できるため、まずはいろいろ試してみて、イメージに近しいものを選択していくといいと思います。

テイクアウトアプリ レイアウト編集画面

5.Glideでアプリを使ってみて良かったこと

続いて、Glideでアプリを使ってみて良かったことをまとめていきます。

視覚的に確認できるため作りやすい

Glide画面動作

はじめにあげられるのが、視覚的にアプリを確認することができるので確認がしやすいことです。
Glideでは中央に完成イメージの画面があるので、編集を行っていっても、視覚的に確認がしやすく、作成が非常に楽でした。アプリを作成したことない初心者の人にも使いやすいツールであると思います。

データのインプットが楽
実際にアプリを作成する際、元となるデータの読み込みやそれをどのように表記すればいいかについて悩むことが多いと思いますが、Glideではスプレッドシートを読み込むだけで作成できるため、より簡単にアプリを作成することが可能です。
そのため、データのインプットを簡単に行うことができ、アプリ制作がより簡単にできるツールであると思います。

6.Glideでアプリを作ってみて気になったこと

続いて、Glideでアプリを作ってみて気になったことを記載していきます。

地図の精度が悪い
Glideの地図の精度はあまり良くないです。住所を読み込んでいるのにも関わらず、異なる場所を示したりする場合もあり、あまり精度が良くありません。緯度と経度を読み込めば、改善するとのことですが、今回はそのまま住所を読み込んで作成をしています。

カスタマイズ性に限界がある
利便性は高いものの、少しこだわったUIでの作成などはやはり限界が一定あると思います。
今回はシンプルな構成で作成しましたが、もう少しこだわった仕様にしたい場合は限界があると思います。
一方で、シンプルな構成で簡単にアプリを作成したいという人にとっては非常にいいツールであると思うので、是非活用してみてください。

7.まとめ

ここまで、今話題のノーコードアプリであるGlideを用いてアプリをどのように作成するかについて、解説してきました。
上記で解説した通り、Glideは視覚性に優れているので、是非まずは手にとって触ってみて自分自身で作りたいものを作ってみるのがいいかと思います。是非以下リンクから登録していただけると嬉しいです。

また、今後こちらのノートで、ノーコードに関する情報を分かりやすく発信していくのでフォローといいねをしていただけると嬉しいです!

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