インフラエンジニアが新技術習得制度を利用してローコードアプリ開発に挑んでみた話


## はじめに
私自身はインフラよりのエンジニアで、過去にアプリケーション開発にかかわった事は一度もありませんでした。

AppSheet はノーコードツールのためアプリケーション開発への敷居が低そうだと思ったことと、弊社（株式会社ＤＮＰデジタルソリューションズ）には新技術習得制度という新技術に興味がある人が集まって一緒に活動できる仕組みがあったので思い切って参加しました。

私が AppSheet にふれた内容について共有することで、これから AppSheet やノーコードツールを試して見ようと思っている方の一助になれば幸いです。


## AppSheet とは？
Google が提供するノーコードツールで Google（Gmail などの）アカウントなどを既にお持ちの方は無料で使うことが可能です。

アプリケーション開発の際にプログラム言語でコーディングを行うことなく、アプリケーションを作成するため必要な情報を用意し手順を踏むことでアプリケーション開発が簡単に出来てしまいます。

簡単にアプリケーションができたことにとても驚いた記憶があります。

[AppSheet](https://cloud.google.com/appsheet?hl=ja)  のサイト

## アプリケーションのつくりかた

AppSheet をつかったアプリケーション開発はいくつかの手順（方法）があります。

    １．基となるデータベースを使ってアプリケーションを作成する  
    ２．AppSheet 上から作成する


今回は１．の手順で作成する内容についてお伝えします。

基となるデータベース と聞くとちょっと身構えてしまうかもしれませんが、どのようにデータを扱うか分かるものを用意できればいいので、表計算ツール（スプレッドシートやエクセル など）のデータがあれば（一番簡単な）アプリケーションが作成可能です。


### アプリ作成例）基となるデータを使って QA 管理アプリケーションを作成する  

#### １．スプレッドシートを新規作成し、サンプルデータを入力する  
スプレッドシートを新規作成し、下記のサンプルデータをコピー＆ペーストしてください。

| ID     | 質問概要          | 質問詳細          | 質問者               | 質問日時                | 回答内容                                                                                                                                                                                                                            | 回答者 | 回答日時                |
|--------|---------------|---------------|-------------------|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----|---------------------|
| 123123 | AppSheet について | どのような特徴がありますか | QAUser1@gmail.com | 2023/03/28 18:00:03 | Google が提供するノーコードツールで Google（Gmail などの）アカウントなどを既にお持ちの方は無料で使うことが可能です。<br/><br/>アプリケーション開発の際にプログラム言語でコーディングを行うことなく、アプリケーションを作成するため必要な情報を用意し手順を踏むことでアプリケーション開発が簡単に出来ます。<br/><br/>AppSheet（https://cloud.google.com/appsheet?hl=ja） | 回答者 | 2023/03/28 18:01:24 |

![AppSheet_SS_upload-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/7bb2ae33-6689-13c8-a8d8-df3e95b6a2e0.png)



#### ２．名前を QAシートに変更する
![AppSheet_SS_upload-1.2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/a2debadd-6dc5-bf2c-cb10-17575ef367d5.png)


![AppSheet_SS_upload-1.3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/9d47b5b4-41ba-140d-4668-2fc629ba733f.png)



#### ３．スプレッドシートの情報を基にアプリを作成する  
　[拡張機能] → [AppSheet] → [アプリを作成]

![AppSheet_SS_upload-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/0fae6032-a703-bf1f-ab80-8adc690bfbdb.png)


![AppSheet_SS_upload-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/23a66de3-7937-b83c-ab08-25c509fb3c1b.png)


以上です。

従来の開発手法でいうところの、

- 機器の手配・購入
- 動作環境の設計・構築（サーバ：web,ap,db ネットワーク：FW,LB,SW ミドルウェア：DB,Mail .etc）
- コーディング・デバッグ
- プロトタイプ作成

といったあたりまで完成するイメージでしょうか。

びっくりするくらい簡単にアプリケーションの作成ができます。

また、画面右側にアプリケーションの画面イメージが表示されており、変更をおこなった際に内容をすぐに視覚的に確認することができます。

アプリ操作の一例として、画面イメージ右下にあるプラスボタンをクリックすることで新しい行を追加することが可能です。  
アプリで追加作業をおこなった後にスプレッドシート側でも行が追加されていることを確認できるはずです。  
※ データ項目の初期設定を見直したり、ユーザ毎のアクセス制御などを実装していくことでアプリケーションの完成に近づいていきます。


私が AppSheet よくできているなぁ と思ったポイントがいくつかありましたので共有させていただきます。

一つ目が、アプリケーション作成時点で既に3つの端末での動作をエミュレートできる点です。

#### ① Mobile（携帯電話用の画面）

![AppSheet_SS_create-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/5d5c2b11-5dba-4734-f445-3245fc3ce49e.png)



#### ② Tablet（タブレット端末用の画面）

![AppSheet_SS_create-pad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/6b75890a-d487-cf85-a927-170c65438dbc.png)



#### ③ Desktop（ブラウザ用の画面）

![AppSheet_SS_create-desktop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/5a5f21fb-eaf0-7951-b501-f16c5e05623d.png)



意識せずに複数の端末で動作をエミュレートできるアプリケーションが作成できるなんてすごいと思いませんか？


二つ目が、格納されたデータの項目と内容をもとにデータのタイプが選択されている点です。

![](AppSheet_SS_data-view.png)
![AppSheet_SS_data-view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/a53f77c3-58c3-7fd2-265d-9ddc50994350.png)


アプリケーションを作成するために使用したＤＢ（スプレッドシート）の内容から自動的に判断して各項目の TYPE が選択されています。  
項目とその値がそろっていると TYPE の選択精度が高いように感じました。

AppSheet ではＤＢ（スプレッドシート）で扱いたいデータの項目と値をいくつかサンプルとして用意することで、それらの内容をもとに5～6割くらいの完成度でアプリケーションを自動で作成してくれます。　※ 個人の感想です


三つ目が、複数のビューが用意されていて簡単に変更することができる点です。

![AppSheet_SS_view-type.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/88c442db-a246-0cfb-eb37-0e1ffa3ace0c.png)



View type 部分に記載されているとおりで、Google でおなじみ（？）のカレンダーや地図といった機能をつかったアプリ画面を追加することが可能です。



とはいえ、この手順で作成できるアプリケーションは

- アプリケーションの最小限 UI
- アプリケーションと DB との紐づけ

となります。

本当に最低限の機能しか備えていないアプリケーションとなるため、皆さんが追加したいデータ項目やビュー、機能などについては必要に応じて追加していただく必要があります。

まずはどういった手順を踏めば AppSheet でアプリケーションを作成できるのかについてのご紹介となります。


## 参考事例
弊社の新技術習得支援制度を利用する中でいくつかアプリケーションを作成しているので、その中から一つをご紹介しようと思います。

### 登園管理アプリ
デジタル技術を使って、保育士の業務を減らしながら安全性を実現できないか？ といったテーマをもとに AppSheet を用いたアプリケーションの検討・開発をおこないました。

### 全体イメージ
アプリケーションの全体イメージになります。  
赤枠で囲っている部分が機能として実装した部分です。

![touen-1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1167802/1b8b4b1a-a3b6-568c-52c2-a1f22afd732c.jpeg)


### 実装概要
AppSheet はノーコードツールで GUI 操作ベースの内容が多く、それらを全て載せてしまうととてもボリュームがあるため、今回は機能をどのように実装したかの概要についてご紹介させていただきます。

- 欠席時は事前に欠席連絡

    Google Forms 上に入力フォームを用意し、保護者が入力した内容をＤＢ（スプレッドシート）へ反映することで、登園管理アプリのステータスが更新されます。

- ＱＲ読取で簡単に登園登録

    園児毎に用意したＱＲコードを登園時にバーコードリーダーで読取した内容をＤＢ（スプレッドシート）へ反映することで、登園管理アプリのステータスが更新されます。  
    ※ ＱＲ読取は、Data → 項目の SCAN? にチェックを入れることで利用可能になります

- 登園状況を自動集計いつでもすぐに確認

    保育士が登園管理アプリから確認時点の事前連絡有無や園児の登園状況を確認が可能になっています。

- 無断欠席の保護者に自動でメール通知

    10時になったタイミングで、欠席連絡がなく登園のステータスになっていない園児の保護者へメール通知します。  
    ※ AppSheet の Automation 機能を使って指定した条件にそって処理を自動実行することが可能です


## AppSheet を触ってみた所感
AppSheet はとても短時間で感覚的にアプリケーションを作成できるツールだと個人的に強く感じました。
一緒に活動をおこなった開発部門の参加者も、「従来型開発と比べて ”開発作業時間” だけを比較すると 1/10 以下の時間で同等の機能開発ができそうです」 とおっしゃっていました。

AppSheet は、アプリ単位の複製は容易だが、機能単位の個別開発はできない（得意ではない）ように見受けられるため、従来型のような複数人で開発を進めていくというよりは、個人での開発が基本になるような気がします。

今回の取り組みを通じて AppSheet でアイデアがスピーディーに具現化できること、既存のアプリケーションの置き換えが条件次第では出来そうなことが分かりました。

また、ノーコードツールを使っていくにあたっては、従来開発手法からの発想の転換が必要になっていくと感じました。
参加者の一人がはなった 「粘土とレゴブロックの関係」 というの一言が全員によくささったので、是非さわってみてそういうことかと実感いただければと思います。（笑）

> ※ 粘土とレゴブロックのたとえについての補足  
> 従来開発ではコーディングを行うことで自由度が高くアプリケーション開発をおこなえる（粘土みたいに好きな形に作れる）が、開発をおこなうための知識や経験が必要となり大変である。  
> それに対して Appsheet での開発は用意されている機能を組み合わせてアプリケーション開発をおこなえる（レゴブロックのように決まった形のパーツを使って形を作れる）ため知識や経験が少なくても簡単に作れるが、その分従来開発に比べて自由度は低くなる。

それぞれの開発方法で良し悪しがあると思いますので、みなさまの開発シーンに合わせて選択していただければと思います。


最後まで記事を読んでいただきありがとうございます。  
記事を読まれた皆さまの AppSheet ちょっと気になった、さわってみようかな という第一歩目を踏み出す助けになれば幸いです。