こんにちは。吉積情報(株)アプリケーション開発部のイイズナです。
今回は、AppSheet における開発の基本機能の一つである Form（フォーム）についてご説明いたします。
アプリユーザーからの「見え方」も意識して Form のメリットを活用していきましょう。
その他、 AppSheet の基本的な使い方等についてお知りになりたい場合は、以下の記事もご覧ください。
▶吉積情報 AppSheet コラム一覧◀
Form とは？
Form の概要
Form とは、簡単に言うと AppSheet で作ったアプリの機能の中で「データを収集する」役割を果たすものの一つです。
Form は Views メニューより画面を作成・設定します。
同じ Google のクラウドサービスに似たような名前の「 Google フォーム（ Forms ） 」が存在します。
こちらとの違いは、AppSheet の「Form」がアプリへのデータ入力のための”ユーザーインターフェース”であるのに対し、「Google フォーム」はアンケート回答などの集計に使われる”入力フォーマット”的なツールであるということです。
また、AppSheet のアプリの利用には開発者ユーザーだけでなく、アプリユーザーも Google アカウントが必要である点においても異なります。
Form でデータ入力をするメリット
◆ 表記ゆれを防ぐ
データ入力時にプルダウンやボタンを用いた選択肢や入力したいデータの検索・サジェストにより、データ表記の整合性を保ちます。
◆ 選択肢データのカスタム追加
表記ゆれを防ぎつつプルダウンやボタンに用いる選択肢データのカスタム追加を「 Allow other values 」によりユーザーに許可することで、より柔軟なデータ入力も実現できます。
◆ ユーザーにやさしいインターフェース
シンプルでわかりやすい入力画面で、操作に慣れていないユーザーでも簡単に扱うことができます。
◆ 様々なデータの特性に合わせて入力ができる
例えば画像なら Image 、数値なら Number など、それぞれのデータに合った”型”を入力フォームに予め設定しておくことで、データの入力ミスや表記ゆれの防止、入力したデータをデータベースとして扱う際にもより「綺麗なデータ」を利用することが可能になります。
◆ レスポンシブデザイン
PCブラウザ以外にも、スマートフォンやタブレットなどの端末を自動的判断し、最適なアプリ表示を行います。PCブラウザでは広々とした表示、スマートフォンでは自動でタブ切り替えの表示となるなど、それぞれのデバイスに合わせて見やすさ・入力のしやすさが調整され、業務効率を向上させます。
Form の基本
AppSheet 機能の中の「 Form 」
ここでは Form が開発画面から見た場合とアプリ画面から見た場合のそれぞれについて、 AppSheet の機能全体から見てどのような立ち位置にあるのかをご説明いたします。
【開発画面】
AppSheet 開発画面における「 Form 」は、アプリの画面 UI の設定を主に行う「 Views 」メニューのオブジェクトとして存在します。
基本的に AppSheet で「 Form 」という場合はこの Views メニュー画面のうちの左下に存在する、自動生成 View である「 SYSTEM GENERATED 」の中の各 View における Form のことを指します。
例外的には Form 画面を開発者が手動生成することもありますが、今回は割愛します。
【アプリ画面】
アプリ画面においては、各画面においてデータを追加する際に表示される、データ更新（新規追加・編集）のための入力画面のことを指します。
Form の仕組み
Form についての AppSheet における役割はご理解いただけたと思いますので、他の機能との関係性も見てみましょう。
データソース（スプレッドシートなど）との関係
スプレッドシートユーザーも多いと思いますので、データソースをスプレッドシートとした場合を想定してご説明いたします。
字面から想像がつくかとは思いますが書いて字のごとく、Form（フォーム）はデータを入力するためのもので、入力されたデータはデータソース（ここではスプレッドシート）に格納されます。
Form から入力するデータは「どの項目をユーザーに入力させるか」「どのユーザーに入力を許可するか」という入力制御もできます。
単純にユーザーが手入力したデータだけではなくタイムスタンプを関数で設定して入力日時が自動で記録されるようにする、データ入力時にユニークID を自動作成して記録する、ということも可能です。
この入力制御は、主に Table の Column（カラム） で設定します。
※Column はスプレッドシートの”列”に対応します。
Enum タイプを Column に設定した入力制御の例。プルダウンやボタン選択で値を入力する。
「Allow other values」に☑を入れればその他の値も入力可能。
Detail （詳細画面）との関係
上記のとおり、Detail は入力したデータを表示するための画面です。
ここで注目してほしいのが、単に Form 入力した内容をそのまま確認画面のように表示するのではなく、ユーザーにとって必要なデータだけを・見やすく表示することが可能ということです。
例えば社員の個人情報として「氏名」「性別」「部署」「住所」などが存在するデータソースがあるとします。
このアプリを使うユーザーは主に「部署」を確認したいと仮定します。
「性別」も確認することがありますが、「住所」は個人情報保護のためにユーザーには見せたくありません。
そのような場合には、「部署」を「性別」より目立つ位置に配置し、「住所」は Column そのものを非表示にしてしまう、ということもできるのです。
言い換えればユーザーに必要な情報だけを、Form のデータ項目の並び順に関係なく重要度の高いデータ項目を上から並べることが可能なのです。ただの Form の確認画面、ではないのです。
この特性は、とりわけスマホなどの画面サイズが小さく表示できる情報の限られる媒体を利用する際にとても重宝します。
▼スマホでアプリを開いた場合の例
Data の Table との関係
Table はデータソースを読み込んだものですので当然、Column の存在自体はデータソース（≒スプレッドシート）との関係と似ています。
一方、データソースとの関係性と異なるのは、Form における入力 Column に関する設定はこの Table でも行うということです。
設定内容は、Column のデータ型・入力方法（TYPE）、関数（FORMULA）、表示可否（SHOW?）、編集可否・編集権限（EDIT?）、必須要否（REQUIRE?）、デフォルト値（INITIAL VALUE）、Column 名（NAME）、Column の説明（DESCRIPTION）を設定する、などがあります。
View（アプリ画面）との関係
基本は Views の中の「SYSTEM GENERATED」に「Form」があります。
これは View を作成するときに Detail や Inlineと 共に自動生成される画面です。
デフォルトでは AppSheet がそのデータに合わせたタイプ（型）で、全 Column が Form 上に表示されるようになっています。
おわりに
Form は意外と奥が深く、工夫をして実装をすればユーザーもどんどん使いやすくなりシンプルに業務効率が上がります。
発展的な内容も別の記事でご紹介予定なので、ぜひご覧になってください。
以上、Form の説明・解説でした。
AppSheet に関して弊社では、疑問点・不明点を直接エンジニアに質問できる AppSheet 活用サポートをはじめ、AppSheet の利用方法を貴社向けに講師がレクチャーするトレーニング、AppSheet の活用の幅が広がる無料Webセミナー、AppSheet 受託開発などを承っております。
弊社Webサイトのお問い合わせより、お気軽にご連絡くださいませ。
それでは、また次回の記事でお会いしましょう。
AppSheet についての詳しい記事・ご相談などはこちら ※いただいたコメントは全て拝見させていただきますが、ご質問には全てにお答えすることができかねることがございますので、あらかじめご了承くださいませ。
Discussion