Google Appsheet（アップシート）の使い方の超基本【Data、UX、Behaviorタブ】Webカタログ②
今日はGoogle AppSheet（アップシート）の使い方をGoogleシートから始めて、AppSheetの基本であるData、UX、Behaviorタブの使い方を分かり易く実演と共にお見せします。
（動画時間：10:03）
アプリで使うデータベースをGoogleシートで作成する。
こんにちは、リーンシグマ、ブラックベルトのマイク根上です。
業務改善コンサルをしています。
今日は、携帯アプリや業務システムが無料で作れる
Googleアップシートによるアプリの作成の話で、
前回の動画でお見せしたWebカタログシステムの
⇒「無料でWebカタログの作成／管理をする方法【Googleデータポータル／アップシート】Webカタログ①」
商品情報や画像データを準備したり管理するアプリを
アップシートで作るやり方をお見せします。
まずはこのシステムのデータベースの設計からやりましょう。
それをやるコツは作るシステムの業務フローの
最後のステップから見ていき、
どの様なデータが必要かを書き出していく事です。
今回ですと、Webカタログでどの様な情報を出したいかを見ると分かります。
上図は前回の動画でお見せしたデータポータルのWebカタログです。
これは後で作るのですが、最初にこのイメージを考えて、
手書きで紙に書いていきます。
今回データベースで必要なのは
「カテゴリ」、「商品画像」、「商品コード」、「名前」、「説明」、「価格」のデータとなります。これらをそのままGoogleシートで、列名とします。
それを下のが下図です。
これがそのままアプリのデータベースのテーブルとなるのです。
このテーブルの名前をシート名にすると良いので、
ここでは「商品DB」とします。
（「DB」はデータベースの略です。）
今回はデータベースのテーブルが一つだけですが、
通常複数必要ですので、その時はシートを増やしていきます。
最後に右上に適当なファイル名を入れて（WebカタログDB）
データベースの完成です。
アップシートはGoogleシートからアプリを作り始める。
それではアップシートでアプリを作りましょう。
なんとこのGoogleシートから始められるのです。
このメニューバーの「拡張機能」から、
「AppSheet」、「アプリを作成」で簡単に始められるのです。
ブラウザの新しいタブが開いて、
英語で「アプリの準備ができました。」と出てきました。
「Customize your app」をクリックします。
次の画面がもうアップシートの作業画面になのです。
この手軽さはすごいですよね。
しかもさっきのシート名「商品DB」が出ています。
とても簡単に始められるのですが、
現在のアップシートの最大の問題は
作業画面がまだ英語だという事です。
しかし、今後日本でもユーザーが増え、
日本語仕様になると思いますし、
今でもエンドユーザーが使うアプリは
ちゃんと日本語にできますので、
今から使える様になるのをお勧めします。
データベースとなるテーブルの設定をする：「Data」タブ
アップシートの作業画面左の「Data」、「UX」、「Behavior」
タブを操作するのが基本になります。
まずは「Data」タブで、
ここで、作成したデータベースを一覧し、
各種設定をしていきます。
アップシートではテーブルと呼びます。
テーブルの一つの「商品DB」をクリックして、
「View Columns」をクリックすると（上図参照）、
Googleシートの列名が取り込まれているのが分かります。
ここでやる事は各列のデータ型「TYPE」を指定する事です。
「商品画像」列が「Text」型になってますが、
これは画像なので変更します。
それをクリックすると他の選択肢が沢山あります。（下図参照）
しかし、全部を覚える必要はありません。
これは画像なので「Image」にします。
「説明」列は長い文章を入れられるように
「LongText」型にします。
データ型「TYPE」の隣に「KEY?」とありますね。
これはこのテーブルの「プライマリキー」になる列を指定します。
テーブルにデータがたまるっていきますが、
重複のないデータを持つ列を必ず一つ持つ必要があるのです。
このテーブルでは「商品コード」列がそれに該当しますので
それにチェックを入れます。
更に右にスクロールすると、
他にもいろんな設定ができますが、
今回はそれらの説明は割愛します。
ユーザーの各アプリ画面を作成する：「UX」タブ
ひとまずテーブルはこれで完成で次に進みましょう。
次は「UX」タブで、「UX」とは英語で「User Experience」の事で、
アプリの画面を作っていくのです。
アップシートでは画面をビューと呼びます。
実はもう、「商品DB」と言うビューが一つ自動でできていています。
それをクリックして、各種設定ができるのです。
そこに「View type」とありますが、
画面のテンプレートがいくつか用意されていて、
アプリ画面を色んな見せ方にできるのです。
この設定画面の右側にプレビュー画面があり、
今の設定でどんな画面になるかを確認しながら作成作業ができます。
ここでは「View type」を「table」にします。
今はデータがなくて何も出ないですが、
これで商品情報をテーブルの表にして、見せられます。
「View name」ももっと意味のある「商品一覧」に変えます。
プレビュー内の右下に「＋（プラス）」の追加ボタンがあります。
それをクリックすると、追加用の画面が出てきて
情報を入れ、データの追加ができます。（下図参照）
さっきデータ型を「Image」にした「商品画像」列では
カメラアイコンがあり、それをクリックしたら、
画像の取り込みができます。
これをスマホでやったらスマホのカメラで
撮影した画像も使えます。
ここで商品データを入れて、
最後に下の「Save」でGoogleシートに保存できます。
そして、さっきのテーブルにもデータが入ります。（下図参照）
そして、その行を選ぶと、その詳細が見えて、
その画面の右下の鉛筆の編集ボタンを押すと、
データの変更ができるのです。
この様に必要な付随機能を自分で作る必要がないので、
アップシートでは短期間でアプリが作れてしまうのです。
タブレットやPCでアプリを使う時は
複数のビューを並べると使い勝手が良くなります。
それには、「New View」をクリックして新しいビューを追加し、
「View Type」で、「Dashboard」を選びます。
すると「View entries」で今まで作ったビューを選んで、
下図の様に一つの画面に複数のビューの配置ができるのです。
他にもユーザーの使い勝手を良くするテクニックは沢山ありますが、
今後ご紹介していきます。
機能を加えるアクションボタンの作成：「Behavior」タブ
最後にアプリに機能を加える
アクションボタンの作り方をお見せします。
ここではこのアプリのデータベースの
Googleシートを開くボタンを作ります。
画面左の「Behavior」タブから
アクションボタンを作成できます。
「New Action」から、
「Action name」でこのボタンの名前（Googleシートへ）を入力して、
「Do this」で、選択肢で沢山の機能を付けられますが、
今回は「External: go to a website」にします。
その下の「Target」で、開きたいページのURLを入れるので、
Googleシートのリンクが必要です。 （下図参照）
そのGoogleシートへの簡単な行き方があります。
左のタブの「Data」から、
テーブルの「View Source」をクリックします。
するとこのアプリのデータベースのGoogleシートが開きます。
右上の「共有」からリンクのURLを取得します。
そしてアップシートに戻って、
「Target」内にこのリンクをペーストします。
これは文字列なので、
前後に半角のダブルクォーテーションを入れます。（上図参照）
ここで一度画面右上の「Save」をクリックします。
残念ながら作ったボタンを好きな場所に配置できず、
データの詳細画面に表示されます。
（上図「GOOGLEシートへ」ボタン参照）
そして、それをクリックしましょう。
予定通りにGoogleシートに行けました。
アップシートでいかなる業務にもアプリの作成が可能
これで業務アプリの基本の新規のデータを追加し、
既存のデータの編集をする機能ができたのです。
列のデータ型を変えるだけで、
カメラ機能やバーコードを読込む機能もできてしまうのです。
一方、ノーコードですので、
やりたい事を用意された機能から選ぶ形で、
特に見かけのデザインはほとんど融通が利きません。
しかし、社内で使う業務アプリなら
必要な事はほとんど実現できますし、
それ以上に短期間でアプリができてしまいます。
それにどういう意味があるかと言うと、
今まで高いコストを掛けてまでIT化ができなかった業務に
アプリが作れて飛躍的な改善ができるという事です。
まさにこれによって社内のDX化を進められるので、
ぜひ皆さん挑戦してみて下さい。
「こちらの記事も読まれてます｡」
