ふとしたきっかけでノーコードツールを触り始め、開発経験・知識ともゼロでしたが、あっという間にWebアプリを開発できました。本当に簡単ですので一人でもノーコードに興味を持っていただける方が増えると嬉しいです。

きっかけ

きっかけはNewsPicksの特集記事。プログラミング未経験にも関わらず、短期間で美麗なWebサービスを次々に開発していく姿に圧倒されました。こんなに簡単なら自分にもできそう！と軽い気持ちで始めました。

作ったもの

愛知県産地直売所の一覧を見れるWebアプリをGlideで作ってみました。最近は野菜が高騰しているので安く買える直売所は重宝します。直売所は店舗として営業していない所もありGoogleマップで見つけづらいので、愛知県のオープンデータを活用して一覧で見れるようにしました。

https://ambiguous-marble-7126.glideapp.io/

※愛知県＝製造業のイメージ強いですが、実は農業産出額は全国第7位でもあります。だから直売所が多いのですね。

必要なもの

ツール：Glide、Googleスプレッドシート
知識：Excelを触った経験があればOK

今回作った程度の規模であればGlideの無料プランで対応できます。コードは書かないのでプログラミングの経験は不要です。自分もWebアプリの知識・経験ゼロでスタートしました。

アプリのイメージを考える

Glideのテンプレート一覧から、どんなアプリにするかイメージを考えます。今回はCity Guideというテンプレートが近いかなと思いました。参考までにテンプレートの中身も見ておくといいと思います。地図で直売所の一覧が見れて、リストでも表示できるといいな、というぐらいのふわっとしたイメージを考えました。

いきなり作る

要件定義とか面倒な作業はすっ飛ばして、いきなり作ります。愛知県のオープンデータから入手したCSVファイルをスプレッドシートに入力します。

データの内容を見てみると”形状(WKT)”という列がどうやら経度・緯度を表しているようです。これをGlideの地図に表示するには、以下のサイトを参考にすると「緯度，スペース経度」というデータにする必要があるとのことなのでデータを加工します。このあたりの作業はExcelの経験があればそれほど迷わずできるかと。

Glideでアプリに仕立てる

作ったスプレッドシートをもとにGlideでアプリを作ります。

STYLEをMapにして以下のように設定すれば・・・

たったこれだけで地図アプリが完成！爆速です。

もう一個タブを追加してSTYLEをListにします。さらに少しデザインを改良すると・・・

こんな感じにリストができました。これで骨格部分は完成です。たぶんここまでで３時間ほどで出来たと思います。

体裁を整える

ここまで独力で作りました。実は自分用としてはこれで満足していたのですが、この後ふとしたきっかけでノーコードのオンラインサロンNoCodeCampに参加し、参加者の皆様からフィードバックをいただく機会があり、いくつか改善を施しました。

（改善1）Google検索リンク追加：直売所の情報をGoogle検索できると便利なので追加。スプレッドシートに「https://www.google.co.jp/search?q=直売所の名前」となる列を追加してGlideに反映させます。

（改善2）リスト表示修正：オープンデータには画像のURLがありましたがリンク先が存在しないので画像を表示しないように変更。

（改善3）リストを現在地からの距離順に並び替え：Glideの公式ドキュメントDistance to LocationとSortを参考に実装。

この作業まででさらに３時間ほどかかったと思います。

完成！

で、完成です。足掛け３日かかりましたが、トータル作業時間はたぶん６時間ぐらいかと。爆速です。Webアプリの開発経験・知識ゼロでここまで出来るとは驚きです。

Glideはとても簡単なツールなので、今回のようにイメージ先行でとりあえず形にして、あとでブラシュアップしていくというスタイルが向いているかなと思いました。

ノーコード革命に乗り遅れるな

このスピード感は一種の革命だと感じました。SNSにより誰もが情報発信できる時代になったように、ノーコードにより誰もが気軽にサービスを立ち上げられる時代になりそうな予感があります。自分はもういいお歳なので新しいことを覚えるのは正直しんどいですが、ノーコード革命に乗り遅れないようにしたいと思います。

逆にここまで簡単になるとITスキルよりも課題発見や構想をまとめる力のほうが重要になってくると思われ、社会経験豊富なミドルのアドバンテージが活かせる時代になったとも考えられるかと思います。

本当に知識ゼロで出来ますので、ノーコードにチャレンジしてみようと思い立つミドルが一人でも増えると嬉しいです。頑張りましょう。

ご紹介したアプリは、以下の著作物を改変して利用しています。
【愛知県オープンデータ：産地直売所】、愛知県、クリエイティブ・コモンズ・ライセンス表示２.１日本（http://creativecommons.org/licenses/by/2.1/jp/）