AppSheetのサンプルアプリを使って爆速で在庫管理アプリをスマホで動かしてみる。

# はじめに
巷ではローコード開発/ノーコード開発が流行りだそうな。
実際どんなものができるのか、AppSheetの在庫管理サンプルアプリをスマホで動かしてみる。

# そもそも AppSheet とは
- コーディング不要で在庫管理やプロジェクト管理などのビジネスアプリを作ることができる
- iOS用アプリ、Android用アプリ、ブラウザ用アプリを同時に作ることができる

# 試してみる
## 環境
- Chrome 79
- Windows 10 1909

## 必要な物
- Googleアカウント（他のでもいいけどとりあえず）
- iOSデバイスかAndroidデバイス

## 費用
無料

## かかる時間
ゆっくり15分

## 手順
おおまかな手順は以下
1. サンプルアプリをコピー
2. スマホからインストール用URLにアクセスする

### AppSheetにアクセスする
[AppSheet](https://www.appsheet.com/)

### 「Start for free」をクリック
![コメント 2020-02-16 002608.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/5e34c9a8-7121-3075-1f7c-505fcb33a9e2.png)

### 「Google Sheets and Froms」をクリック。
ここではアプリに使うデータソースが保存されているサービスを指定している。
![コメント 2020-02-16 002639.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/64c5324c-b431-68c9-9e7a-23a211613ac0.png)

### 内容を確認して「許可」をクリック。
![Inkedコメント 2020-02-16 002824_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/dfe4b1b1-d579-9c53-66a0-28358f261a37.jpeg)

### 「Sampleapps」をクリック。
MyApps画面が表示される。ここに作成したアプリが並んでいく。新しくアプリを作る場合は右上の「Newapp」だが、今回はサンプルアプリを使用するので、「Sampleapps」をクリック。
![Inkedコメント 2020-02-16 002901_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/fe285995-dbff-269c-4b75-01f5a218c5a1.jpeg)

### 「Stock Management App」をクリック。
サンプルアプリが表示される。色々なアプリがあるが、今回は在庫管理アプリの「Stock Management App」をクリック。
![Inkedコメント 2020-02-16 002929_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/828984dd-97b3-9984-6493-194981b1001f.jpeg)

### 「Copy」クリック。
「Explorer」をクリックするとアプリの詳細が表示される。
![Inkedコメント 2020-02-16 002944_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/3db952a5-d41c-5474-32a2-86c34bec9c4a.jpeg)

### 「Category」を適当に選択し、「Copy app」をクリック。
![コメント 2020-02-16 003016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/3d10afd2-3aba-7144-ee8d-19ed9d27f4fe.png)

### しばし待つ
![コメント 2020-02-16 003037.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/2d38e550-b7a6-3c08-f946-7bd275cf1ad1.png)

### 「InstallLink」のURLをスマホに送る。
アプリ作成画面が表示される。右側のピンク囲みの部分が実際の表示画面。この時点でアプリは完成しており操作も可能。
![InkedInkedコメント 2020-02-16 003814_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/cbee70b5-0785-b382-4bcc-bdb6ccbd8827.jpeg)


### 送る際はQRコード作成サービスで、URLをQRコードにしてスマホでスキャンすると楽。
[QRコード[二次元バーコード]作成 【無料】](https://www.cman.jp/QRcode/)

### URLを開くとAppSheet自体のインストールが促されるためインストールする。
AppSheetで作成したアプリは、AppSheetアプリの上で動くようになっています。
（画像を取り忘れたため、かわいい猫の画像をお楽しみください）
![publicdomainq-0017929ewjjwy.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/1f3f0017-f518-0996-6311-cc4757a3f020.jpeg)

### 今回作った在庫管理アプリをインストール
![InkedScreenshot_20200216-004042_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/9c6b6fa7-3633-31ab-0341-db31bc6237e0.jpeg)

### アプリが起動。「OK」をクリック
![Screenshot_20200216-004056.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/8465e6e9-b800-0d5d-5ded-1d6a803ab668.jpeg)

### はいできた！
![Screenshot_20200216-004104.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/a61d4108-9566-c420-fdad-b0479e51eff6.jpeg)

機能としては
- 在庫リストの作成
- カメラから商品のバーコードをスキャンして入出庫
- カメラから商品のバーコードをスキャンして在庫リストに追加
- 在庫ごとの入出庫履歴の確認
など…

### デモ動画
![ezgif-2-d64a405f33c6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/e91b2b4a-80d7-5738-543e-26aa1d31020e.gif)


## 終わりに
とりあえずいきなりサンプルアプリを動かしてみた。
まず驚いたのは、AppSheetログイン→サンプルアプリ選択→スマホで動かすまでの速さ。
コードはもちろん書いてないしデプロイもしてない。そもそものクリックだって数回だ。手軽、圧倒的に手軽。
サンプルアプリも豊富にあり、これをベースにカスタムしていくのは全然ありだと思う。

今まで金銭的、スキル的にシステム導入が難しかった部分へのアプローチとしては相当いい感じがしている。
他にもいろいろな活用方法がありそうだ。もう少しいじってみようと思う。

次回
AppSheetで作った在庫管理アプリを修正してみる
https://qiita.com/Gerbera/items/09a889ffcb4ade005ee9

## ノーコード開発もくもく会のおしらせ
毎月1回ぐらい、「Play (No) Codes!」というグループ名でノーコード開発もくもく会をしています。
基本オンライン＋オフラインで実施しているので、よければ参加ください！
https://playnocodes.connpass.com/