請求書アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第4回）はSELECT関数とSUM関数を使用して、明細から請求金額の合計値を計算する式を作成しました。
今回はViewを設定してアプリの見た目を整えます。
今回は、2022年8月にプレビュー版がリリースされた「Desktop mode」に合わせた設定をしてみましょう。
【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて（汗）、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。
目次
1. 「請求書」のViewを設定する
AppSheetアプリの見た目（画面レイアウト）はViewという機能で設定します。
AppSheetに用意されている「View type」というテンプレートを選んで設定するだけなので、短時間で簡単にアプリの画面レイアウトを作成することができます。
はじめに、「請求書」テーブルに関連するViewを設定しましょう。
AppSheetエディタの左側メニューにある「App」（旧エディタでは、UX）をクリック、「Views」に移動します。
「請求書」View
Primary Views には「請求書」というViewが既に作成されていると思います。
「請求書」をクリックして、View設定パネルを開きます。
ここでは「請求書」Viewを以下のように設定しました。
| 設定項目 | 値 |
|---|---|
| View name | 「請求書」 |
| For this data | 「請求書」 |
| View type | 「table」 |
| Position | 「middle」 |
| View Options | |
| Sort by | 「Add」→「請求日」, Descending |
| Group by | 「Add」→「取引先」, Ascending |
| Column order | 下の画像を参照 |
| Display | |
| Icon | 「file-invoice」 |
表示する列と並び順は、Column orderに以下のように追加しました。
「請求書_Detail」View
では、プレビュー画面で請求書を1件表示してみましょう。
画面の下の方にある「View: 請求書_Detail」をクリックして、「請求書_Detail」Viewの設定をします。
「請求書_Detail」Viewは、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。
「請求書_Form」View
続けて、「請求書_Detail」の画面右下にある編集アイコンをクリックしてみましょう。
請求書を作成したり編集したりするフォームが表示されます。
画面の下の方にある「View: 請求書_Form」をクリックして、「請求書_Form」Viewの設定をします。
「請求書_Form」Viewでは、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。
「明細_Form」View
続けて、「明細_Form」Viewを設定します。
AppSheetエディタ左側メニュー「App」をクリック、「Views」タブに移動して「Ref Views」から「明細_Form」を探してクリックしてください。
「明細_Form」Viewも、View Optionsで「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。
2. 「取引先」のViewを設定する
「取引先」View
続けて、「取引先」テーブルに関連するViewを設定します。
AppSheetエディタの左側メニュー「App」（旧エディタでは、UX）をクリック、「Views」に移動します。
「New View」をクリックして、新しいViewを追加します。
「取引先」Viewは以下のように設定しました。
| 設定項目 | 値 |
|---|---|
| View name | 「取引先」 |
| For this data | 「取引先」 |
| View type | 「table」 |
| Position | 「first」 |
| View Options | |
| Column order | 下の画像を参照 |
| Display | |
| Icon | 「building」 |
表示する列と並び順は、Column orderに以下のように追加しました。
このような感じになりました。
「取引先_Detail」View
では、取引先を1件表示してみましょう。
画面下のタブニュー「取引先」をクリック、取引先を1件選択します。
画面の下の方にある「View: 取引先_Detail」をクリックして、「取引先_Detail」Viewの設定をします。
「取引先_Detail」Viewでは、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。
3. 「商品」のViewを設定する
「商品」View
最後に、「商品」テーブルに関連するViewを設定します。
AppSheetエディタの左側メニュー「App」（旧エディタでは、UX）をクリック、「Views」に移動します。
「取引先」Viewを追加した時と同様に、「New View」をクリックして新しいViewを追加します。
「商品」Viewは以下のように設定しました。
| 設定項目 | 値 |
|---|---|
| View name | 「商品」 |
| For this data | 「商品」 |
| View type | 「table」 |
| Position | 「next」 |
| View Options | |
| Column order | 下の画像を参照 |
| Display | |
| Icon | 「boxes」 |
表示する列と並び順は、Column orderに以下のように追加しました。
このような感じになりました。
「商品_Detail」View
では、商品を1件表示してみましょう。
画面下のタブニュー「商品」をクリック、商品を1件選択します。
画面の下の方にある「View: 商品_Detail」をクリックして、「商品_Detail」Viewの設定をします。
「商品_Detail」Viewも、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。
4. AppSheet新機能「Desktop mode」で表示してみる
AppSheet画面は、モバイルデバイスでの使用に最適化されたものとして開発されてきました。
なので、PC上でブラウザ環境で使用する際には、横に間延びしたような感じとなりスタイリッシュではありませんでした。
請求書アプリの場合は、このような感じになります。
2022年8月にプレビュー版がリリースされたAppSheetの新機能「Desktop mode」を試してみましょう。
AppSheetエディタ左側メニュー「Settings」をクリック、「Views」の「General」に移動します。
「General」設定パネル内に、「Desktop mode ( Preview )」というトグルボタンがあるので、ONにして有効にします。
プレビュー画面右上にある「Open in tab」のアイコンをクリックします。
「Desktop mode」が表示されます。
うまく表示されない時は、画面右上の更新アイコンを1〜2回クリックしてみてください。
Viewについては、「Primary Views」「Menu Views」の表示が改善されています。
- メニューアイコンが下部のタブバーから左側に移動した
- 画面右下にあった追加、編集アイコンが右上に移動してボタンになった
- 「Group by」の設定がツリー型のように表示される。Groupを2つ以上設定すると、ネストされて階層化できる
ことが見て分かると思います。
「Desktop mode」の使用を前提とする場合は、Viewの「View type」は「table」がオススメです。
請求書レコードをひとつクリックして開いてみましょう。
右側にペインが現れて、「請求書_Detail」Viewが表示されます。
右上の「Edit」ボタンをクリックすると、請求書を編集できます。
従来の編集画面は「Form View」（請求書_Form）でしたが、「Desktop mode」では「Detail View」（請求書_Detail）のまま編集するようになっているので注意が必要です。
列によっては表示のみ可で、追加後の編集は不可にしたい列があると思います。
「Desktop mode」では「Editable」が無効でない限り、「Detail View」に「Column order」で列を追加しておくと、「Edit」で編集可能な状態になります。
「Edit」ボタンをクリックした時に「Form View」が表示されればよいのですが、現状（2022年11月現在）では「Detail View」が採用されているので注意してください。
バグはAppSheetの改修に期待するしかない
現時点（2022年11月現在）で「Desktop mode」はプレビュー版です。
通常モード（モバイルデバイス）との整合性がとれておらず、想定した動きにならないことがあります。
例えば、請求書に明細を追加する場合は注意が必要です。
「明細」の「ADD」をクリックして、明細を追加してみましょう。
「明細_Form」が表示されます。
この時、「請求書」に初期値（請求書ID）が入力された状態で表示されます。
第2回で、「請求書」テーブルのLABELに「請求書番号」を指定しているので、請求書番号（20221105-01）が表示されていることが分かります。
同じ明細の追加を「VIEW」からやってみましょう。
右上の「ADD」ボタンをクリックして明細を追加してみましょう。
「明細_Form」が表示されますが、見て分かるように「請求書」に初期値が入力されておらず空白になっています。
「請求書」に請求書IDを入力することで、「請求書」レコードと「明細」レコードの紐付け（リレーションシップ）をしているので、ここが空白ではいけません。
もちろん選択することはできますが、間違う可能性があるためインターフェースとしてはよろしくありません。
通常モード（モバイルデバイス）では「VIEW」→「+」で追加しても問題なく動きます。
よって「Desktop mode」のバグです。このバグは現時点（2022年11月現在）は改修されていません。
このように通常モード（モバイルデバイス）とは異なる動きをすることがありますので、注意してください。
明細行を追加する際は、「ADD」から追加するようにしましょう。
以上、請求書アプリの見た目（画面レイアウト）は整いました。
これで、AppSheetで請求書データを作成するところまではできるようになりました。
あとは、請求書を発行するだけです。
AppSheetでは、AppSheet Automationという機能でPDFファイルを作成できます。
請求書アプリではAutomationを使用して請求書のPDFを発行しますが、請求書のひな形をGoogleドキュメントで作成できる便利な機能があります。
次回（第6回）は、Googleドキュメントで請求書のひな形を作成してみましょう。
