ブログ

IT初心者が解説します!Platio機能紹介:シーンの設定~一覧画面のカスタマイズ編~

初心者でも簡単!Platio機能紹介

みなさん、こんにちは。プロダクトマーケティング部のタクミンです。

著者画像 工

Platioの便利な機能や新しくリリースした機能などをIT初心者であるタクミンが簡単に分かりやすく紹介していきます。

前回までは、フィールドと呼ばれるPlatioで作成したアプリに情報を入力する形式の種類を簡単に解説しました。メディア地図選択などの主要なカテゴリーのフィールドを紹介しているので、まだご覧になっていない方は、そちらも参照してPlatioでアプリ作成してみてくださいね。さて、今回はアプリの見た目を分かりやすく、使いやすくするために非常に重要な「シーンの設定」、特に「一覧シーン」の設定方法について解説していきます!

1.シーンの設定とは

「シーン」とはPlatioで作成したアプリにおいて、情報を登録したレコードをどのように表示するか、アプリ画面の見た目のことを指しています。シーンの設定は、Platio Studioのミニアプリのフィールド詳細ページの下部にあります。アプリ画面の右上にある設定アイコンをクリックしてシーンの詳細設定が可能です。

以下は、写真日報アプリのテンプレートの「シーンの設定」の表示です。

シーンの設定

写真日報アプリでは「新規」「一覧」「表示」「編集」の4種類のシーンが表示されていますが、今回はシーンの中でも「一覧シーン」について紹介していきます。

「新規」「表示」「編集」のシーンはレコードを入力・編集したり、登録したレコードの詳細を表示したりする際のアプリ画面を示しています。その他のシーンについての詳細は、こちらのガイドを参照ください。

1-1. 「一覧シーン」について

一覧シーンはレコードをリスト表示する画面で、写真日報アプリのテンプレートでは、あらかじめ以下のように設定されています。

登録したレコードの内容に則して、左側には画像、右側は上から日時、タイトル、備考のテキストが表示され、一覧シーンでレコードを開かなくても登録されている情報を確認できるようになっています。

1-2. 表示フォーマットの解説

この表示されているレコードのレイアウトは自由にカスタマイズすることが可能です。一覧シーンの右上にある設定アイコンをクリックすると、以下のプロパティが表示され、詳細を設定できます。

表示フォーマット

表示フォーマットのプルダウンからは一覧シーンのレイアウトを変更できます。以下の図のように「基本」「アイテム」「画像」「詳細」「値」「カスタム」の6種類のレイアウトが用意されています。今回は自由にレイアウトの配置ができる「カスタム」について解説します。

表示フォーマット:基本、アイテム、画像、詳細、値、カスタム

カスタムを選択すると初期設定では「画像・タイトル・サブタイトル・概要」が配置されているのが確認できます。

「カスタム」は「レイアウトを編集」をクリックして好みの配置に自由に設定できます。

「レイアウトを編集」では以下のようにレコード内のそれぞれのフィールドの位置を設定します。

レイアウトの編集

「レイアウト」タブでは表示フォーマットの行数と列数を指定できます。「行数」と「可変幅列数」でフォーマット内を等分することができます。上の図では「行数」が「4」に設定されていますが、「行数」を「5」にすると、フォーマットの表示が1行増えます。

5行に行数が増えました!

このようにしてフォーマット自体の調整も簡単に行えますが、それぞれのフィールドの表示フォーマット内でのレイアウトも変更することができます。まず、配置を変えたいフィールドを選択します。選択すると以下の図のように枠線が青に変わります。

選択すると以下の図のように枠線が青に変わります

「フィールド」タブでは表示される名前の変更、位置やサイズを調整することができます。位置・サイズはそれぞれフォーマット内の行数と列数で指定できます。

上の図の「フィールド」タブに表示のある「型:テキスト」はタブ内で変更することはできません。その代わりに左下の「フィールドを追加」をクリックし、型を選択して追加することができます。フィールドを追加:テキスト、画像、ラベル

「スタイル」タブでは、文字サイズ、太さ、位置、色、背景色といったさらに細かい設定が可能です。

レイアウトの編集:概要

この表示フォーマット内の位置やサイズの設定ですが、実際の動きを見た方が理解しやすいかと思いますので、以下の動画を参照ください!

【操作動画】

1-3. 割り当て

続いて、ここまでで設定した表示フォーマットの「タイトル」や「サブタイトル」「概要」にアプリのどの情報を表示させるかという「割り当て」の設定について解説していきます。

「割り当て」の設定は、一覧シーンの右上にある設定アイコンをクリックすると、右側に表示フォーマットで設定している項目が表示されます。それぞれの項目に対して表示させたいフィールドをプルダウンリストから選択して割り当てます。例えば、写真日報アプリでは、以下の図のように割り当て可能なフィールド一覧がプルダウンで表示されます。

割り当て

表示フォーマット「カスタム」ではフィールドの型が適当でなければ選択できません。例えば、型を「画像」に設定した場合、「テキスト」型であるタイトルや備考は選択できないので、注意が必要です。

割り当てを設定して、レコード登録内容の中でも特に重要なものだけを一覧で表示するようにカスタマイズできます。

1-4. 絞り込み・定義済み検索条件

次に、シーンの設定において共通のプロパティである「絞り込み」と「定義済み検索条件」について簡単に紹介します。

絞り込み・定義済み検索条件

絞り込み・定義済み検索条件の設定は一覧シーンの右上にある設定アイコンをクリックし、中央を下にスクロールすると表示されます。

絞り込みでは、「レコード検索書式」を利用することで、設定した条件を満たすレコードだけが一覧に表示されるようになります。詳しい「レコード検索書式」の設定方法はこちらのガイドを参照してください。

定義済み検索条件では、Platioアプリ画面の検索アイコンをタップしてレコードを検索するときの条件を設定できます。例えば、報告日が「今日」や「今週」のレコードや、指定の報告ユーザーのレコードのみ表示したい場合に利用します。

写真日報レコード一覧:検索

上の図のように、写真日報アプリのテンプレートでは、あらかじめ「報告日時・報告者・タイトル・備考」で検索できる定義済み検索条件が設定されています。一覧シーンの設定からこれらも変更できます。

1-5. 事例の紹介

最後に、レコード一覧画面の表示を工夫し、アプリを活用している事例を紹介します。

newtrace株式会社 様

3DCGコンテンツの企画・制作を行っているnewtrace株式会社様はオフライン展示会でのヒアリング内容を記録する展示会ヒアリング管理アプリを作成しました。一覧画面の表示を情報登録時に入力した優先度順で案件を表示する工夫がされています。

一覧画面
newtrace株式会社 写真

詳しくはこちらをご覧ください。

展示会対応アプリで迅速な顧客フォローと商談の円滑化を実現

株式会社ルネサンス 様

スポーツクラブを展開する株式会社ルネサンス様では、忘れ物管理アプリを作成し、全国の店舗で導入・活用されています。一覧画面で「引き渡し済み」などのステータスを把握できるように色分けする工夫をしています。

一覧画面
株式会社ルネサンス 写真

詳しくはこちらをご覧ください。

ルネサンス、忘れ物管理アプリを3日で内製、毎月最大550時間の管理業務を効率化

2. おわりに

ここまで、使いやすいアプリ作成に欠かせないシーンの設定、特に一覧画面の設定方法について解説しました。

Platioでアプリを作成する際はレコードを一覧で直感的に、確認できる見た目になっているかも重要なポイントとなります。アプリにどんな情報を登録するかだけでなく、登録した情報やレコードをどのように一覧で見せるか、といった設定も簡単にできますので、ブログヘルプセンターのガイドを参考に、よりよいアプリ作りに挑戦してみてはいかがでしょうか?

このブログが皆さんのアプリ作成のヒントになれば幸いです。次回もお楽しみに!

この記事の著者:工実香

著者画像 工実香

アステリアの製品に関するコンテンツ制作を行っています。新卒で入社し、日々奮闘中です。新しいことを学ぶのは楽しいです!

関連キーワードから探す

           

Platio体験セミナー

モバイルアプリ作成体験セミナー

クリック操作で
簡単アプリ作成!

気軽に無料お試し!まずは実際に触ってみよう

サービス詳細や効率化課題など
お気軽に相談できます

オンライン相談