１．ノーコードってなに？

普段Webアプリやモバイルアプリを作成する際は、JavaやPython、Swiftを使用しコードを書いてアプリを開発すると思います。
ただ、上記のようなアプリは作成や公開に時間がかかり大変です。

ノーコードでは名前の通り、コードが一切ないです。
コードを書かないで、Webアプリやモバイルアプリを作成できます。
素早く、視覚的にアプリを作成でき、すぐに公開できることがノーコードのメリットですが、コードを書いて作成するアプリと違って細かい設定はあまり得意ではないのがデメリットです。

２．代表的なノーコードサービス

  • Bubble
    色々な用途のアプリを開発することができる
    用意されているパーツをドラッグ&ドロップして、直感的にアプリを作成できる
    また、UIの細かい設定が可能で、Bubbleで欲しい機能がない場合プラグインで補完可能
  • STUDIO
    豊富なテンプレートから自分好みのWebサイトを作成可能
    また、作業画面が直観的でわかりやすく作業がしやすい
    ドメイン取得や公開もほばワンクリックでできる
  • Glide
    Googleスプレッドシートをデータベースに見立て、アプリ作成や公開を行えるサービス
    Googleのアカウントを持っていれば簡単に開発可能

他にも多くのノーコード開発サービスがありますが、今回は省略します。
※一部無料

３．Glideを使ってアプリを作成してみた

今回はGlideでアプリを作成してみました。

(１)　Glideとは?

　Googleスプレッドシートを用いて、アプリを作成できるサービスです。
スプレッドシートにデータを用意して、画面を操作することで簡単にPWAアプリが作成できます。
PWAに関しては下記サイトが参考になりました。

PWA（Progressive Web Apps）とは？

https://www.seohacks.net/basic/terms/pwa/
(２)　連絡先アプリを作成してみた
１．データ作成

１．作成するアプリのデータをGoogleスプレッドシートで作成します。
　　GoogleDriveを開き、右クリックでスプレッドシートを選択

２．シート1を連絡先用のシート名に変更し、テストデータを作成しておきます。
　　一列目がデータ名になります。
　　GoogleDriveの画像共有設定は下記を参考にしてください。

画像共有のやりかた

https://hep.eiz.jp/google-drive-share/#i-4
２．アプリ作成

１．Glideにログインし、Create appを選択。
　　From Google Sheetを選択。

　　　作成したスプレッドシートを選択する。

２．アプリが自動で作成されます。
　　今回はリスト形式で連絡先データを表示したいので、LayoutのComponetsからリストを選択します。

　　リスト選択後は下記の状態になります。

３．リスト一覧時表示する項目を、名前と電話番号にする。
　　上記の状態でPropertiesのDataからDetailsをphoneに変更する。
　　これだけで住所表示から電話番号表示に変わります。

４．デフォルトではアプリ側からデータを追加できない設定になっているため追加できる設定をする。
　　Layout画面のPropertiesからAddを選択し、チェック項目にチェックする。
　　追加画面が作成される。

５．画像をカメラとカメラロールから追加できるようにする。
　　COMPONENTSにある、imgの構成を削除する。

　　Propertiesの隣にある+を選択する

　　Components and valuesからImagePockerを選択する。
　　設定値はデフォルト設定にする。

　　これで、画像ファイルから画像をアップロードできるようになります。

６．連絡先選択時の表示内容を変更する。
　　連絡先をタップするとシンプルな詳細画面が表示されるので、設定されている画像が表示されるようにします。
　　詳細画面を表示したら、COMPONENTSのTitleを選択

　　Imageを選択し、imgを選択するとスプレッドシートのimg列に設定されている画像データを表示することができる。

　　次に電話番号をタップした際に電話をかけられるように設定する。
　　COMPONENTSの上から2番目を選択。

　　FEATURESのACTIONからDial phone numberを選択すると、電話番号タップ時に電話をかけられるように設定される。

　　まだ詳細画面が寂しいので、一番下に住所に紐づくマップを表示するようにする。
　　Componentsの隣にある+を選択し、MEDIAのMapを選択。

　　デフォルト設定のまま利用すると、下図のようにMapが表示される。

以上でアプリの完成です。

３．アプリの公開

アプリが完成したので、実際に自分のスマホに入れてみます。

１．画面右上のSHAREをクリック

２．Publisg appをクリック

３．QRコードを読込か、URLをコピーするか、SMS送信する。

４．QRで読み取ると、ブラウザが立ち上がりアプリが表示される。

５．Add Home Screen をタップし、アプリをホーム画面に追加する。

６．アプリを起動する。

４．まとめ

いかがでしたか？
スプレッドシートでデータを管理をしているけど、他の人に見やすい形式で提供したい、という時には今回のGlideでアプリ作成が役立ちそうな気がします。
しかもおよそ20分くらいでアプリの作成から公開までできました。

もちろん、時と場合を考えてツールやサービスを選択することが大事ですが、ノーコードアプリ開発という選択肢が皆さんの引き出しに加わればいいな、と思います。