NoCode（ノーコード）Glideで初めてのアプリ開発

#はじめに
エンジニアとして転職してはや5カ月。
これまで全く自分でアプリ開発してこなかったことに焦り、ノーコードに目を付けました。
ノーコードとは、システム開発のためにプログラムを書く必要がないシステム開発手法のことで、非エンジニアでも開発できるのが特徴です。
今回は、初めてのサービス開発の手順と、そこで得た知見について共有します。
所要時間は、ノーコード部分の1時間（勉強30分含む）＋データ収集5時間の計6時間です。

##Glideとは
ノーコードにはたくさんの種類があり、各ツールごとに得手不得手、出来ることと出来ないことがはっきりしています。
ECサイトのShopifyやBASEもノーコードの一つです。
スマホ用アプリを開発したかったため、PWA開発ができるGlideをツールとして選びました。
PWAとは、Webサイト上でネイティブアプリのような振る舞いをユーザーに提供することができる仕組みのことです。
Glideは数あるツールの中でも学習コストが低く、さらにデータベースとして普段慣れ親しんでいるスプレッドシートを活用できる点がメリットです。
学習コストとしてはBubble>Adalo>Glideの順なので、まずはとっつきやすいGlideから触るのをお勧めします。

##今回作るアプリ
美味しいお店をめぐるのが好きなので、飲食店検索アプリを作ります。
データとして[GoToEatポイント利用可能店舗](https://tabelog.com/go-to-eat/)を利用しました。
スクレイピングについては後半で簡単に紹介します。

##Glideでアプリを作る流れ
###スプレッドシートを準備する

まずスプレッドシートでデータを準備します。
今回は飲食店のリストから、各飲食店の詳細情報を表示するアプリを作成するため、下記のように飲食店の情報をスプレッドシートに準備します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631893/1f7a5720-5883-8c2b-9e6f-20038e43e5ff.png)
1行目は項目名を記述し、2行目からデータを記述します。

###Glideで新規アプリを作成する
データができたら（後で変更もできます）、Glideで新規アプリを作成します。
[Glideトップ](https://www.glideapps.com/)の画面を開き、ヘッダの「Sign up」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631893/3b57c84b-96f7-152b-12d6-be6707098b91.png)

手順に沿って登録を完了すると、以下の画面が表示されるので、「Apps」の「Create app…」から「From Google Sheet…」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631893/1f5eae8c-ba9e-e3e7-e304-80830e7a0f28.png)

ファイルを選択する画面になるので、先ほど作成したスプレッドシートを選択し、「Select」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631893/d009cfd8-23aa-9c66-008d-6a75dd4f5fb4.png)

スプレッドシートの中身が自動的に解析され、以下のようにアプリ作成画面が表示されます。
デフォルトではデータが一覧形式で表示され、ここからカスタマイズしていくことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631893/725dedcb-f6ca-c753-277a-9f97a49041b6.png)

あとは、レイアウトをStyle（テンプレート）から選んで変更したり、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631893/c91b8694-664b-4bd8-85c1-428398a71333.png)

表示項目をプルダウンで選んだりすることでアプリ開発できちゃいます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631893/2249f2bc-ae66-f4db-2d43-7c3fe2de8247.png)

###アプリの公開
作成したアプリを公開するのは簡単です。
アプリ表示部分の右上（右サイドメニューの左隣）の「SHARE」をクリックします。
新しいウインドウが表示されるので、「Publish app」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631893/002d8090-fbee-c154-c335-c52ac8e5e765.png)

表示されるQRコードや、URLからアプリを利用できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631893/903e1732-0bbb-2549-5032-f21a79cf1fa3.png)

今回私が作成した[アプリ](https://deranged-cent-1397.glideapp.io/)もぜひ参考にしてみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631893/bf4f3ff0-219c-9404-3e1a-b8599a0f6fda.png)

機能：
店舗の一覧
詳細情報の表示
MAP上で店舗を表示
お気に入り、コメント投稿機能
ジャンル、ランクで絞り込み
ジャンルでグループ化

##Glideのいいなと思った点
簡単なレイアウトなら、アプリ公開まで10分かからずでき、難しい知識もいらないのが一番いいなと思いました。
開発コストやスピードを劇的に向上させるノーコード開発ツールは、慢性的なIT人材不足を課題する画期的なサービスです。
また、開発スピードが早ければ早いほど、競合他社に差をつけることができます。

##Glideのイマイチだと思った点
カスタマイズ性が低く、レイアウトの自由が少ないです。
学習コストと自由度はトレードオフの関係がありますね。
次はAdaloやBubbleも使ってみようと思います。
また、無料版だと500行までしか扱えないなどの制約があるため、必要に応じてデータを削減するか、課金する必要があります。

##スクレイピングについて
スプレッドシートに流し込むデータとして、[GoToEatポイント利用可能店舗](https://tabelog.com/go-to-eat/)から取得した情報を使っています。
普段、お店選びで非常にお世話になっている食べログを選びました。
普段の業務はクローラー開発がメインのため、練習を兼ねてスクレイピングしました。
コーディングに3時間＋クロール待ち2時間の計5時間くらいと、ノーコード部分より時間がかかっています。
ノーコードの紹介記事なので、スクレイピングについての詳しい説明は省きます。
コードを置いておきますので、使い方などの詳細は[Github](https://github.com/kobayashi-masayuki/gotoeat)のREADMEをご参照ください。

#まとめ
サービスを個人レベルで、しかも短期間で手軽に作れる時代になりました。
まだまだ制約は多いし、プログラミングした方が柔軟ですが、今後はより一層、ノーコードのできる領域が広がっていくことと思います。
一エンジニアとして、ノーコードに仕事を奪われるのではなく、うまく使っていけるようになりたいです。