★この記事は10分で読み終わります。
ノーコードサービス「Glide」を使って近所の商店街の地図が表示できるWebアプリを作りました。


そんな人に向けた記事です。
実際に筆者が地図アプリを作った方法や必要なスキルをまとめて紹介していきます。
ノーコードとは
ノーコードとはコーディングを全く必要とせずアプリやWebサイトや作成できるサービスです。
現在では「ノーコード」「ローコード」「プロコード」といった種類でコーディングは分別されています。

開発スピードのメリット・デメリットと作られるプロダクトの自由度や拡張性などがよく比較に挙げられます。

今回は代表的サービス「Glide」を使ってみたいと思います。
Webアプリの作成手順
データの作成
Webアプリを簡単に作れるといってもデータがないと表示するものがありません。
具体的には、地図をマッピングするためには「住所」もしくは「緯度・経度」のデータが必要となりますよね。
今回は、Pythonを使ってWebスクレイピングをしています。
Webスクレイピングする対象は、近くの商店街が「天神橋筋商店街」です!日本一長いことで有名何ですよ!!笑

Webスクレイピングの詳しい方法は下の記事を読んでみてください。
-
-
Pythonで商店街のサイトをWebスクレイピングしてみる【サンプルコードあり】
目次PythonでWebスクレイピング必要なライブラリをインストール店名データをHTMLで確認店名データの取得ライブラリをインポート店名データの取得まとめ ★本記事はサンプルコード付きでコード一つ一つ ...
続きを見る



Glideを使ってみる
Glideにアクセスして、私はGoogleアカウントで登録をしました。
登録が簡単すぎる。。。
登録をすると、下のような画面が出てきます。
地図アプリは「City Guide」を使います。

City Guideを選択すると、地図が表示されたアプリが出てきます。
下の画像のように[Edit Sheet]を選択すると、アプリに利用するデータの編集画面へと移動します。

データはGoogleスプレッドシートで表示されます!とても見やすい!
そして、Webスクレイピングで取得したデータをコピペします。
(注意:無料で地図にマッピングできるのが10件までなので今回は5件だけコピペしてます笑)

前のアプリの画面に戻り、画面右側の表示するデータをぽちぽちと選択してあげると、、、
自分で取得した店がマッピングされました!!!すごい早い笑

実際に作ったアプリのリンクを貼っておくので是非!
https://enigmatic-watch-3738.glideapp.io/
また、現役エンジニアである筆者が、「未経験からWebアプリを作るためのロードマップ」も書きました。
ぜひアプリ開発に興味がある方は読んでみてください。
-
-
【2021年最新】ホームページを作成できるノーコードサービス4選
目次ホームページを作成できるノーコードサービス4選ペライチSTUDIOWixWebflowまとめ ★本記事は5分で読むことができます。 現役エンジニアである筆者がホームページを作成できるノーコードを紹 ...
続きを見る
まとめ
ノーコードを利用すると社内用や個人用に使うアプリを爆速で作ることができてしまいます。
なぜ社内用なのかというと、商業用向けとしてはやはりテンプレートすぎることが言えます。
やはり差別化が大事になる実際のサービスアプリとしては厳しいですが、「アプリの作成体験を得る」や「データを取得して見てみたい」といった目的にはとてもノーコードは適していると思いました。