AppSheetで自動作成されたアプリのデータ追加&編集機能を使ってみよう


みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」。本シリーズでは、超初心者向けのはじめてのアプリ作りについてお伝えしています。

前回の記事はこちらです。

AppSheetで自動作成されたアプリのデータ閲覧機能を眺めてみよう
Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」。超初心者向けのアプリ作りについてお伝えしています。今回は、AppSheetで自動作成されたアプリのデータ閲覧機能を見ていきましょう。

AppSheetでスプレッドシートのデータをもとに自動作成されたアプリの閲覧機能について確認してきました。

このプロトタイプアプリ、もちろんデータの閲覧だけでなく、データの追加やデータの編集の機能も追加されています。

ということで、今回はAppSheetで自動作成されたアプリのデータ追加&編集機能を見ていきましょう。

では、行ってみましょう!

これまでのおさらい

前々回ですが、以下のスプレッドシート「従業員データ」をもとに、AppSheetでプロトタイプアプリを自動作成しました。

スプレッドシート「従業員データ」

前回、このシートを元に、deck viewやcalendar viewの画面が生成されていて、そのデータの閲覧や検索ができること、また詳細情報をdetail viewで確認できることなどをお伝えしました。

今回は、プロトタイプアプリのデータの追加と編集の機能について見ていきましょう。

データの追加

AppSheetのアプリでデータを追加する

では、まずはデータの追加から。

「シート1」のdeck viewには、いかにもデータが追加できそうな「+」ボタンが既に用意されています。

これをクリックしてみましょう。

AppSheetで「+」ボタンをクリック

すると、以下のような「Form view」による入力画面に遷移して、各データの入力が可能です。

ちゃんと、NameやEmailならテキスト入力、HireDateなら日付入力、Activeなら「Y/N」ボタン入力と、データによって入力方法も別々の手法が採用されています。優秀。

では、各項目を適当に入力して「Save」をクリックしましょう。

AppSheetでForm viewによるデータ追加

ちなみに、HireDateですがクリックして入力しようとすると、以下のようにカレンダー入力が可能です。優秀。

AppSheetで日付をカレンダー入力

データ追加のスプレッドシートへの反映

「Save」ボタンをクリックすると、以下のように「シート1」のdeck viewに入力したデータが追加されます。

そして、右上の「更新」アイコンにバッジがつきます。

AppSheetでデータ追加の更新中

少し待つと「更新」アイコンのバッジが消えます。

どうやら、どこかのデータ保管先への更新を行っていた様子…

AppSheetのデータ追加の更新完了
それで、そのデータ保管先がどこか?といいますと、データソースとして使用したスプレッドシートになります。

「シート1」に入力したデータが追加されていることがわかります。

AppSheetからスプレッドシートにデータを追加

つまり、スプレッドシートから作成したAppSheetアプリのデータベースとして、そのスプレッドシートを使用するわけですね。

データの編集

AppSheetのアプリでデータを編集する

では、続いて既にあるデータを編集して変更してみましょう。

「Bob」さんのデータの詳細、つまりdetail viewを開いて、以下の「編集」ボタンをクリックします。

AppSheetで編集ボタンをクリック

すると、その情報が入っている状態で、Form viewが開きました。

この編集ボタンもAppSheetによって自動で追加されますし、deck viewの編集アイコンからもForm viewに入れるようになっています。まじ優秀。

この画面で各データを編集できますので、適当に変更して「Save」をします。

AppSheetでデータを編集

ちなみに、「Name」は変更できませんね。

このNameですが、カラムの設定で「KEY」とされているので編集不可になります。

KEYというのは、そのデータを一意に識別するために使いますよという意味で、これを変更すると識別できなくなっちゃうので変更できないのです。

このあたりは、またおいおい知る機会が出てきますので、その際にまた確認しましょう。

データ編集のスプレッドシートへの反映

さて、「Save」をしてからしばらくは以下のように更新アイコンにバッジが表示されます。

AppSheetでデータ編集の更新中

こちらもしばらくするとバッジが消え、変更処理が完了した様子。

AppSheetのデータ追加の編集完了

データソースとなっているスプレッドシートを見ると、「シート1」のデータがきちんと変更されています。

AppSheetからスプレッドシートにデータを編集

スプレッドシートのデータを直接変更する

さて、ではこのアプリのデータなのですが、スプレッドシートを直接変更したらどうなるでしょうか?

例えば、以下のようにEmail、HireDate、Activeを編集しちゃいましょう。

スプレッドシートからAppSheetのデータを変更

AppSheetのエディタに戻ります。

この時点では特に変更はないのですが、「更新」アイコンをクリックしてみましょう。

すると、以下のようにデータが変更されるのです。

スプレッドシートからAppSheetのデータを変更

つまり、AppSheetアプリのデータは、データソースのスプレッドシートからでも普通に変更が可能ということを表しています。

てことは、AppSheetの運用を想定した場合、なにか問題があったら、スプレッドシートの手運用もオプションとして使えるということなんですね。

この特性は、運用の柔軟性が確保されていいな~と思っています。

まとめ

以上、AppSheetで自動作成されたアプリのデータ追加&編集機能についてお伝えしてきました。

さてお気づきとは思いますが、前回と今回、データの閲覧、検索、詳細、追加、編集と見てきましたが、これらの機能はすべて自動で作られています。

まだ、何の手も加えていません…!

そしてさらに自動で追加されている機能があります。

次回は、そのひとつである「メニュー」関連の機能について見ていきましょう。

AppSheetで自動作成されたプロトタイプアプリのメニューを眺めてみよう
Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」による超初心者向けのはじめてのアプリ作りをお伝えしています。今回は自動で作成されたプロトタイプアプリのメニューについて見ていきます。

どうぞお楽しみに!

連載目次:超初心者向け!はじめてのApp Sheetでアプリ作り

Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」。コードを一切書かずにアプリが作れる…ノンプログラマー的にはそんな素晴らしい技術は使わない手はないでしょう!本シリーズでは、その第一歩として超初心者向けのチュートリアルということで、AppSheetによるアプリ開発を体験していきます!
  1. AppSheetとは何か?そしてそれを学ぶメリットと注意すべきポイントは?
  2. ノーコード開発プラットフォームAppSheetに無料でサインアップしよう
  3. AppSheetでスプレッドシートのデータから自動でプロトタイプアプリを作る手順
  4. AppSheetで自動作成されたアプリのデータ閲覧機能を眺めてみよう
  5. AppSheetで自動作成されたアプリのデータ追加&編集機能を使ってみよう
  6. AppSheetで自動作成されたプロトタイプアプリのメニューを眺めてみよう
  7. AppSheetで無料で作成したアプリを初めてデプロイする手順
  8. AppSheetで無料&自動で作成したアプリをスマホにシェアしよう!

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

タイトルとURLをコピーしました