この表示フォーマット内の位置やサイズの設定ですが、実際の動きを見た方が理解しやすいかと思いますので、以下の動画を参照ください！
みなさん、こんにちは。プロダクトマーケティング部のタクミンです。
Platioの便利な機能や新しくリリースした機能などをIT初心者であるタクミンが簡単に分かりやすく紹介していきます。
前回までは、フィールドと呼ばれるPlatioで作成したアプリに情報を入力する形式の種類を簡単に解説しました。メディアや地図、選択などの主要なカテゴリーのフィールドを紹介しているので、まだご覧になっていない方は、そちらも参照してPlatioでアプリ作成してみてくださいね。さて、今回はアプリの見た目を分かりやすく、使いやすくするために非常に重要な「シーンの設定」、特に「一覧シーン」の設定方法について解説していきます！
「シーン」とはPlatioで作成したアプリにおいて、情報を登録したレコードをどのように表示するか、アプリ画面の見た目のことを指しています。シーンの設定は、Platio Studioのミニアプリのフィールド詳細ページの下部にあります。アプリ画面の右上にある設定アイコンをクリックしてシーンの詳細設定が可能です。
以下は、写真日報アプリのテンプレートの「シーンの設定」の表示です。
写真日報アプリでは「新規」「一覧」「表示」「編集」の4種類のシーンが表示されていますが、今回はシーンの中でも「一覧シーン」について紹介していきます。
「新規」「表示」「編集」のシーンはレコードを入力・編集したり、登録したレコードの詳細を表示したりする際のアプリ画面を示しています。その他のシーンについての詳細は、こちらのガイドを参照ください。
一覧シーンはレコードをリスト表示する画面で、写真日報アプリのテンプレートでは、あらかじめ以下のように設定されています。
この表示されているレコードのレイアウトは自由にカスタマイズすることが可能です。一覧シーンの右上にある設定アイコンをクリックすると、以下のプロパティが表示され、詳細を設定できます。
表示フォーマットのプルダウンからは一覧シーンのレイアウトを変更できます。以下の図のように「基本」「アイテム」「画像」「詳細」「値」「カスタム」の6種類のレイアウトが用意されています。今回は自由にレイアウトの配置ができる「カスタム」について解説します。
カスタムを選択すると初期設定では「画像・タイトル・サブタイトル・概要」が配置されているのが確認できます。
「レイアウトを編集」では以下のようにレコード内のそれぞれのフィールドの位置を設定します。
「レイアウト」タブでは表示フォーマットの行数と列数を指定できます。「行数」と「可変幅列数」でフォーマット内を等分することができます。上の図では「行数」が「4」に設定されていますが、「行数」を「5」にすると、フォーマットの表示が1行増えます。
このようにしてフォーマット自体の調整も簡単に行えますが、それぞれのフィールドの表示フォーマット内でのレイアウトも変更することができます。まず、配置を変えたいフィールドを選択します。選択すると以下の図のように枠線が青に変わります。
「フィールド」タブでは表示される名前の変更、位置やサイズを調整することができます。位置・サイズはそれぞれフォーマット内の行数と列数で指定できます。
上の図の「フィールド」タブに表示のある「型：テキスト」はタブ内で変更することはできません。その代わりに左下の「フィールドを追加」をクリックし、型を選択して追加することができます。
「スタイル」タブでは、文字サイズ、太さ、位置、色、背景色といったさらに細かい設定が可能です。
この表示フォーマット内の位置やサイズの設定ですが、実際の動きを見た方が理解しやすいかと思いますので、以下の動画を参照ください！
続いて、ここまでで設定した表示フォーマットの「タイトル」や「サブタイトル」「概要」にアプリのどの情報を表示させるかという「割り当て」の設定について解説していきます。
「割り当て」の設定は、一覧シーンの右上にある設定アイコンをクリックすると、右側に表示フォーマットで設定している項目が表示されます。それぞれの項目に対して表示させたいフィールドをプルダウンリストから選択して割り当てます。例えば、写真日報アプリでは、以下の図のように割り当て可能なフィールド一覧がプルダウンで表示されます。
表示フォーマット「カスタム」ではフィールドの型が適当でなければ選択できません。例えば、型を「画像」に設定した場合、「テキスト」型であるタイトルや備考は選択できないので、注意が必要です。
割り当てを設定して、レコード登録内容の中でも特に重要なものだけを一覧で表示するようにカスタマイズできます。
次に、シーンの設定において共通のプロパティである「絞り込み」と「定義済み検索条件」について簡単に紹介します。
絞り込み・定義済み検索条件の設定は一覧シーンの右上にある設定アイコンをクリックし、中央を下にスクロールすると表示されます。
絞り込みでは、「レコード検索書式」を利用することで、設定した条件を満たすレコードだけが一覧に表示されるようになります。詳しい「レコード検索書式」の設定方法はこちらのガイドを参照してください。
定義済み検索条件では、Platioアプリ画面の検索アイコンをタップしてレコードを検索するときの条件を設定できます。例えば、報告日が「今日」や「今週」のレコードや、指定の報告ユーザーのレコードのみ表示したい場合に利用します。
上の図のように、写真日報アプリのテンプレートでは、あらかじめ「報告日時・報告者・タイトル・備考」で検索できる定義済み検索条件が設定されています。一覧シーンの設定からこれらも変更できます。
最後に、レコード一覧画面の表示を工夫し、アプリを活用している事例を紹介します。
３DCGコンテンツの企画・制作を行っているnewtrace株式会社様はオフライン展示会でのヒアリング内容を記録する展示会ヒアリング管理アプリを作成しました。一覧画面の表示を情報登録時に入力した優先度順で案件を表示する工夫がされています。
詳しくはこちらをご覧ください。
スポーツクラブを展開する株式会社ルネサンス様では、忘れ物管理アプリを作成し、全国の店舗で導入・活用されています。一覧画面で「引き渡し済み」などのステータスを把握できるように色分けする工夫をしています。
詳しくはこちらをご覧ください。
ここまで、使いやすいアプリ作成に欠かせないシーンの設定、特に一覧画面の設定方法について解説しました。
Platioでアプリを作成する際はレコードを一覧で直感的に、確認できる見た目になっているかも重要なポイントとなります。アプリにどんな情報を登録するかだけでなく、登録した情報やレコードをどのように一覧で見せるか、といった設定も簡単にできますので、ブログやヘルプセンターのガイドを参考に、よりよいアプリ作りに挑戦してみてはいかがでしょうか？
このブログが皆さんのアプリ作成のヒントになれば幸いです。次回もお楽しみに！
時間のかかる現場の管理業務。 モバイルアプリの活用による【現場のDX】推進をマンガでわかりやすく解説します。
