ノーコードアプリ開発ツールAppSheetを使ってゴルフスコア管理アプリを作ってみるシリーズ、今回は全６回の第６回、プレー履歴のスコアを折れ線グラフで表示します。前回の第５回は、コースやスコアのデータをアプリ画面に表示させるようにカスタマイズしました。データを数値で表示するだけでなく、視覚的にも分かりやすいグラフでも表示してみます。
【AppSheetでゴルフスコア管理】５：アプリの表示データをカスタマイズ
ノーコードアプリ開発ツールAppSheetを使ってゴルフスコア管理アプリを作ってみるシリーズ、アプリの表示画面をカスタマイズしてインラインビューの設定をします。
AppSheetのUIが変更になりました
2022年10月よりAppSheetのUIが新しくなっていますが、このブログ記事のUIは更新前のものになっています。AppSheetではUIを新旧切り替えすることが可能です。記事の画像のUIと実際のUIが異なる場合はUIの切り替えを試してみてください。切り替えは以下のボタンを押すとできます。
何をカスタマイズする？
ここでは、アプリにグラフを表示させるための、次のようなカスタマイズをしていきます。
- スライス（Slice）を使ってテーブルのデータを複製する
- グラフのビューを作成する
- インラインでグラフをアプリ画面に表示する
スライス（Slice）を使ってテーブルのデータを複製する
まず、最初にスライスを使って「スコアデータ」のデータを複製します。なぜ複製しなければいけないのか。それは、スコアデータが既にプレー履歴として参照されてしまっているからです。アプリ画面でプレー履歴リストを表示していますので、グラフ用データとして参照すると、プレー履歴リストもグラフに変わってしまいます。そこで、スライスを使ってデータを複製し、プレー履歴リストとグラフの元データを区別するようにしています。
スライスとは？
ところで、スライスとはどのようなものでしょうか？スライスは、あるテーブルのデータを抽出したもので、それ自身をテーブルのように取り扱うことができます。つまりテーブルのより抜き版といったところです。
テーブルのデータ全てを必要としない時、一部の項目やデータだけでデータ処理や表示したいときにスライスを使うことで、簡単にデータを取り扱うことができます。
スライスについては、こちらの記事もご覧ください。
【AppSheetで在庫管理】数式と関数のフィルターでスライスを作ってデータを抽出する
AppSheetで食料品の在庫管理アプリを作る。数式と関数を使い、データにフィルターをかけて賞味期限間近のアイテムを抽出（スライスを使用）、表示させてみます。
スライスを使ってテーブルのデータを複製する
ここでは、スコアデータを丸ごと複製するスライスを作成します。データを抽出しなくても、グラフを作成するときにデータを指定しますので、スライスを細かく設定する必要はありません。スライスの使い方としては少しラフかもしれません。
スライスはDataメニューのSliceタブで管理します。
「New Slice」ボタンを押して、新しいスライスを作成します。ボタンを押すだけでスライス自体は作成されますので、適当な名前をつけます。
スライスの詳細設定をすることもできますが、ここでは何もしないことで、「スコアデータ」と同じデータを持つスライスが作成されました。
グラフのビューを作成する
続いて、グラフのビューを作成します。
グラフ用の仮想列を作成する
まず、「コースデータ」テーブルにグラフ作成用のデータを保持する仮想列を作成し、スライスを参照する数式を設定します。仮想列の設定は、インラインビューの作成・設定と同じです。Dataメニューから「コースデータ」テーブルの詳細設定画面を表示し、「Add virtual column」ボタンを押して新しい仮想列を作成します。
仮想列には、「スコア履歴グラフ」と名前をつけました。スライスを参照する数式を「App formula」欄に入力します。
=REF_ROWS ("プレー履歴グラフ用","ゴルフ場ID")
これにより、「コースデータ」テーブルの「ゴルフ場ID」のデータと一致する「プレー履歴グラフ用」テーブル（スライス）の行データが「スコア履歴グラフ」で参照されます。なお、この仮想列のデータ型は「List」にしておきます。
仮想列設定画面の下に移り、Referenced table name欄で。仮想列が参照するテーブルを指定します。ここでは、作成したスライスを指定します。
「コースデータ」テーブルの一番下に仮想列「スコア履歴グラフ」が作成されました。
グラフ表示のビューを作成する
続いて、作成した仮想列を使って、グラフを表示するビューを作成します。
ビューの設定を行います。まずはビューに名前をつけます。さらに参照データに作成したスライスを指定します。
次に、View typeを「chart」にします。これでアプリでの表示をグラフ形式にすることができます。そして、Positionを「ref」にします。これにより、ビューのボタンはアプリ画面下部のメニューには表示されなくなります。このビューはインラインビューとして使いますので、ref型で良いことになります。
続けて、表示形式の設定を行います。まず、グラフの形式としてChart type欄で「折れ線グラフ（col series [line]）」を選択します。そして、表示するデータとして、Chart column欄で「スコア合計」を選択します。
これで、スコアの履歴を表示するビューが完成しました。
なお、表示できるグラフ形式は、折れ線グラフの他にヒストグラム、棒グラフ、パイチャート、ドーナツチャート、積み上げグラフ、 散布図となります。
グラフをインラインビューで表示する
最後に、作成したグラフビューをコースデータの詳細画面に表示させる設定をします。プレー履歴リストの下に表示させるイメージです。
UXメニューより、コースデータ詳細表示のビュー設定画面を表示させます。Column order欄で、リスト化された仮想列の表示を指定します。
これで全ての設定とカスタマイズが完了しました。アプリでコースデータを見ると、そのコースでのプレー履歴をリストとグラフで確認することができます。
完成したらアプリをデプロイする
アプリが完成したら、実際にスマートフォンなどにアプリをデプロイ（配置）しましょう。
AppSheetでは、デプロイの手続きをしなくても、プロトタイプの状態でアプリを利用することはできます。特に個人でアプリを利用するような場合は、プロトタイプでも十分の場合がほとんどです。
AppSheetは作成したアプリを単体で稼働させることもできます（White label version）が、もっと簡単な方法として、AppSheetホストアプリが用意されています。スマートフォンなどの端末にこのアプリをインストールすることで、AppSheetで開発したアプリをホストアプリ上で実行させることができます。プロトタイプのアプリもホストアプリ上で実行することができますので、デプロイしなくても作ったアプリを端末で使うことができるようになります。AppSheetの機能によっては、アプリ上では有料プランのみ利用可となるものもありますので、デプロイチェックで確認することができます。
AppSheetでのデプロイについては、こちらの記事もご覧ください。
AppSheetで食料品の在庫管理アプリを作る。AppSheet導入・表示をカスタマイズ・バーコード読み取り機能を盛り込み、いよいよデプロイします。
おわりに
AppSheetでゴルフスコア管理アプリを作成する全６回、お疲れ様でした。お付き合いいただいた方、ありがとうございます。
ここでは最低限の基本機能のカスタマイズをご紹介しましたが、それぞれのニーズに応じて機能を追加したりすることもできます。例えばクラブ設定データを記録・活用したりメンバーのコースに特化したものにしたりなどが考えられます。また、アプリ画面のデザインについては全く触れていませんが、背景や色の組み合わせを変えたり、アイコンを設定することもできます。
このようなアプリをベースに、自分用にカスタマイズしたアプリを作ることができるのもAppSheetの魅力でしょう。さらなるカスタマイズもいかがでしょうか。
AppSheetを使ったアプリ開発、ゴルフスコアだけでなく家庭の食料品や雑貨の在庫管理や、旅の思い出記録にもいかがでしょうか？以下記事もぜひご覧ください。
【AppSheetで在庫管理】ノーコードで食料在庫管理アプリを作る（はじめに）
素人がノーコードで在庫管理アプリを簡単に作る・・・実際に作ってみるとどうなるのか？AppSheetを使って食料品の在庫管理アプリを作ってみました。実際の開発時間は、夕食後の時間を使って一週間程度です。
【自分で作るAppSheet】アプリのイメージとAppSheetへのサインアップ（旅行のホテルと思い出写真を一緒に管理するアプリを作る（１））
AppSheetで旅の思い出を残すアプリを作ります。旅行で泊まったホテルを写真と一緒に管理するアプリ、まずは作成開始でアプリのイメージ作りとAppSheetへのログインを行います。
スポンサーリンク
スコア管理のためにも、まずはスコアカウンターからいかがですか？
0 件のコメント:
コメントを投稿