AppSheetを使っていると、ビューの中に説明文を挿入したいときがあります。
ここではその方法について解説しています。
また、表示するビューを指定することでビューによって説明文を出し分けたり、ビューのフォームの入力内容によって動的に変化させる方法や、ビューに表示する文字色や文字サイズなどの書式を変更する方法も紹介しています。
Descriptionはいまいち使えない
最初に補足的な内容ですが、カラムの設定には「Display name」と「Description」があります。
![](https://prograshi.com/wp-content/uploads/2024/05/image-168-1024x399.png)
Display name
「Display name」はビュー上で表示するカラム名を指定する項目です。大本のカラム名を変更せずに表示する名前だけを変更することができます。
Display nameに説明文をくっつけることもできますが見にくくなります。
例えば、以下のようにカラム名の後ろに説明文をくっつけたとします。
![](https://prograshi.com/wp-content/uploads/2024/05/image-170-1024x382.png)
すると、ビュー上で非常に見にくい状態で表示されます。
Description
「Description」も指定した内容を説明文として表示するものです。ここで問題なのは「Description」を記述すると「Display name」が上書きされてしまうということです。
例えば、「Display name」に「大カテゴリー」、「Description」に「項目がない場合は支出先一覧で紐づけしてください」と指定したとします。
![](https://prograshi.com/wp-content/uploads/2024/05/image-169-1024x373.png)
すると、ビュー上では「Display name」が表示されず、「Description」だけになってしまいます。
![](https://prograshi.com/wp-content/uploads/2024/05/image-171.png)
説明用のカラムを挿入する方法
結論的には、バーチャルカラムを作成しタイプに「Show」を設定することで解決します。
ポイントをざっくりまとめると以下になります。
- バーチャルカラムを作成する
- App formulaを「””」にする
- Typeを「Show」にする
- Categoryを「Text」にする
- Contentに表示したい説明文を入力する
![](https://prograshi.com/wp-content/uploads/2024/05/image-172.png)
こうすることで、ビュー上に以下のように表示されます。
![](https://prograshi.com/wp-content/uploads/2024/05/image-173.png)
実例:説明用のカラムを挿入する方法
バーチャルカラムの追加
まずはバーチャルカラムを作成します。
バーチャルとは何かについては下記をご参考ください。
Dataの中で説明文を追加したいテーブルを選択し、右上の+アイコンをクリックします。
![](https://prograshi.com/wp-content/uploads/2024/05/image-174-1024x154.png)
![](https://prograshi.com/wp-content/uploads/2024/05/image-175.png)
バーチャルカラム名を入力し、App formulaを「””」とします。
![](https://prograshi.com/wp-content/uploads/2024/05/image-176-1024x306.png)
TpyeをShowにする
次に一番重要なのがTypeをShowにすることです。
Showにすると、Type Detailsという項目が表示されるので、Categoryを「Text」、Contentに表示したい内容を記載します。
![](https://prograshi.com/wp-content/uploads/2024/05/image-182.png)
これで、右上の「Done」をクリックしSAVEで保存すれば完了です。
テーブルの一番下に追加したバーチャルカラムが表示されます。
![](https://prograshi.com/wp-content/uploads/2024/05/image-183-1024x248.png)
また、ビューに指定した内容が表示されます。
![](https://prograshi.com/wp-content/uploads/2024/05/image-184.png)
表示位置を変更する
バーチャルカラムはテーブルの一番下に表示されます。このためデフォルトの設定のままだとビューの一番下に表示されます。
ビューの設定で、追加した説明用のバーチャルカラムの表示位置を指定する必要があります。
対象のビューを表示して、「Column order」の「Add」を連打します。
![](https://prograshi.com/wp-content/uploads/2024/05/image-185.png)
すると、テーブルのカラムが1つずつ追加されていきます。
「All other columns」などの不要なカラムを削除して、説明文のカラムを表示したい場所にドラッグします。
![](https://prograshi.com/wp-content/uploads/2024/05/image-186.png)
こうすることで、指定した場所に説明文が表示されます。
![](https://prograshi.com/wp-content/uploads/2024/05/image-187.png)
指定したビューでのみ表示する方法|Show ifの設定とcontext関数
デフォルトのShow?にチェックが入っている状態では対象のカラムに関連する全てのビュー(FormやDeteilsなど)でこの説明文が表示されます。
![](https://prograshi.com/wp-content/uploads/2024/05/image-188.png)
Show ifの設定
説明文を表示するのはフォーム(Form)のみとしたいといった状況があると思います。
そんなときは、Show ifを使います。
Show?の右側のフォーミュラアイコンをクリックします。
![](https://prograshi.com/wp-content/uploads/2024/05/image-189.png)
数式を入力する欄が表示されます。ここに記述した数式がtrueになったときのみこのカラムを表示します。
![](https://prograshi.com/wp-content/uploads/2024/05/image-190-1024x290.png)
context関数を使う
表示するビューを指定するにはcontext関数を使います。
context関数で引数に「”View”」を指定すると、現在のビュー名を取得することができます。
例えば、「取引履歴_Form」というビュー名のみこのカラムを表示したい場合は以下の数式を入力します。
context("View")="取引履歴_Form"
![](https://prograshi.com/wp-content/uploads/2024/05/image-191-1024x520.png)
これで、指定したビューのみで対象のカラムが表示されるようになります。
表示内容を動的に変更する方法
Contentに文字列を入力した場合は、どの条件でも入力内容が表示されます。
![](https://prograshi.com/wp-content/uploads/2024/05/image-192-1024x325.png)
Contentを数式を使って記述することで、内容を動的に出し分けることができます。
例えば、現在のビューで指定された「支出or収入」カラムの値によって以下のように出し分けるとします。
・「支出」:項目がない場合は支出先一覧で紐づけしてください
・「収入」:項目がない場合は収入先一覧で紐づけしてください
この場合、数式は以下のようになります。
if([_thisrow].[支出or収入]="支出","項目がない場合は支出先一覧で紐づけしてください","項目がない場合は収入先一覧で紐づけしてください")
![](https://prograshi.com/wp-content/uploads/2024/05/image-193-1024x349.png)
こうすることで、ビューの入力値に合わせて表示を自動で切り替えることができます。
▼「支出」を選択した場合
![](https://prograshi.com/wp-content/uploads/2024/05/image-194.png)
▼「収入」を選択した場合
![](https://prograshi.com/wp-content/uploads/2024/05/image-195.png)
文字の色を変更する方法|Format rulesの設定
現状では他のカラム名と説明文の文字色が同じのため情報の重みづけができていません。
![](https://prograshi.com/wp-content/uploads/2024/05/image-195.png)
文字色をグレーにして説明であることがわかりやすいようにします。
Format rulesの基本設定
「View」メニューにカーソルを合わせ「Format rules」を選択します。
![](https://prograshi.com/wp-content/uploads/2024/05/image-196.png)
設定は以下のようにします。
- Rule name: 書式設定のルール名
- For this data:対象のテーブル
- If this condition is true: 書式設定を適用するための条件式
- Format these columns and actions:書式設定を適用するカラム名 または アクション名
今回の場合、特定のカラムの値によらず説明用のバーチャルカラムに適用するため「If this condition is true」は指定不要です。
![](https://prograshi.com/wp-content/uploads/2024/05/image-197.png)
アイコンと色の指定|Visual Format
続いて、Visual Formatでアイコンと文字色を指定します。
![](https://prograshi.com/wp-content/uploads/2024/05/image-206-1024x553.png)
これで、ビュー上で指定したアイコンが表示され、文字色がグレーアウトします。
![](https://prograshi.com/wp-content/uploads/2024/05/image-207.png)
アイコンを非表示にした場合は下記をご参考ください。
フォントサイズの変更|Text size
最後に、Text FormatのText sizeを調整してフォントサイズを少し小さくします。
![](https://prograshi.com/wp-content/uploads/2024/05/image-208.png)
ビューの文字サイズも小さくなります。
![](https://prograshi.com/wp-content/uploads/2024/05/image-209.png)
以上で設定は完了です。
お疲れさまでした^^