目次
カスタムレイアウトとは
カスタムレイアウトでは、新規シーン・編集シーン・表示シーンのフィールド系シーンで、フィールドを1列ではなくグリッド(行と列で区切られたマス目)に自由に配置できます。カスタムレイアウトを使用しない場合、フィールドは上から順に1列で表示されます。カスタムレイアウトを使用すると、関連するフィールドを横に並べたり、入力内容が多いフィールドを大きく表示したりして、画面の広いタブレットやパソコンで見やすく入力しやすいシーンを作成できます。
カスタムレイアウトを有効にした場合、環境によって以下のように表示されます。
| 環境 | 表示 |
| iPad、AndroidタブレットのPlatioアプリ | カスタムレイアウト(グリッド)で表示 |
| Webアプリ | カスタムレイアウト(グリッド)で表示 |
| iPhone、AndroidスマートフォンのPlatioアプリ | カスタムレイアウトは適用されず、1列で表示 |
※一覧シーンでレコード情報のレイアウトをカスタマイズする方法は「一覧シーンの表示フォーマット」を参照してください。
カスタムレイアウトを使用した画面例
下図はテンプレートミニアプリ「建設現場ヒヤリハット記録」の「ヒヤリハット体験調査票」データポケットの編集シーンです。
カスタムレイアウトを有効にする
カスタムレイアウトは初期設定では無効です。レイアウトを設定したいシーン(入力シーン・編集シーン・表示シーン)のプロパティで設定します。
Platio Studioでミニアプリを開き、レイアウトを設定したいシーン(入力シーン・編集シーン・表示シーン)を選択します。
下図では新規シーンを選択しています。
シーンのプロパティで「フィールド」タブをクリックし、「カスタムレイアウト」をオンにします。
オンにすると「レイアウトを編集」ボタンが表示されます。「レイアウトを編集」をクリックすると、レイアウトの編集画面が表示されます。
※「フィールド」タブでは、カスタムレイアウトのスイッチの下に、各フィールドの扱い(なし/入力/計算/表示)が表示されます。レイアウトの編集画面に表示されるのは、「なし」以外に設定されているフィールドです。
レイアウトの編集画面
レイアウトの編集画面では、フィールドがグリッドのセルに配置されて表示されます。カスタムレイアウトを初めてオンにしたときは、2列のグリッドに各フィールドが1行ずつ、横幅いっぱい(2列分)に配置されています。
下図は、データポケットの追加で作成される「名前」「画像」フィールドのみのデータポケットのレイアウト画面です。
画面の各部の名前と役割は以下のとおりです。
| 項目 | 説明 |
| 列番号 |
グリッドの列です。▼をクリックすると、列を操作するメニューが表示されます。 |
| 行番号 |
グリッドの行です。▼をクリックすると、行を操作するメニューが表示されます。 |
| +(右上) | 列を追加します。 |
| +(左下) | 行を追加します。 |
| フィールド | シーンのフィールドです。ドラッグして位置を移動したり、右下の角(青いマーク)をドラッグして大きさを変更したりできます。 |
| ≡(メニュー) |
レイアウトをインポート・エクスポートするメニューが表示されます。 |
| 他のシーンにも適用 | オンにして保存すると、このレイアウトを他のシーンにも適用します。既にカスタムレイアウトを設定している場合、上書きされます。 |
レイアウトを編集する
ここからは、テンプレートミニアプリ「建設現場ヒヤリハット記録」の「ヒヤリハット体験調査票」データポケットを例に、新規シーンのレイアウトを編集する手順を説明します。
このデータポケットには以下のフィールドがあります。
| フィールド名 | フィールドの種類 |
| 職種 | テキスト |
| 年齢 | テキスト選択 |
| 経験年数 | テキスト選択 |
| 体験した日時 | 日時 |
| どこで | テキスト |
| 作業項目・内容 | 複数行テキスト |
| ヒヤリ・ハットした状況 | 複数行テキスト |
| 再発防止・改善策 | 複数行テキスト |
| 略図 | 手描き画像 |
| 原因(その時の心身状態) | 複数テキスト選択 |
| 発生した場合の事故の型 | 複数テキスト選択 |
カスタムレイアウトを使用しない場合、これら11個のフィールドが上から順に1列で表示されます。
完成イメージ
以下のように、4列のグリッドにフィールドを配置します。作業者の情報、体験の日時と場所、状況と略図、原因と事故の型をそれぞれ横に並べることで、1画面で調査票全体を見渡せるようになります。
| 行 | 1列目 | 2列目 | 3列目 | 4列目 |
| 1 | 職種 | 年齢 | 経験年数 | |
| 2 | 体験した日時 | どこで | ||
| 3 | 作業項目・内容 | |||
| 4 | ヒヤリ・ハットした状況 | 略図 | ||
| 5 | ||||
| 6 | 再発防止・改善策 | |||
| 7 | 原因(その時の心身状態) | 発生した場合の事故の型 | ||
手順1:列と行を用意する
初期状態は2列なので、列を4列に増やします。
列番号の右にある「+」を2回クリックします。グリッドの右端に列が追加され、4列になります。
行は、初期状態でフィールドの数(11行)が用意されています。フィールドを横に並べると行が余るので、配置が終わった後に削除します。行が足りない場合は、行番号の下にある「+」をクリックして追加します。
手順2:フィールドを配置する
フィールドの位置を変更するには、フィールドを移動したいセルまでドラッグします。
フィールドの大きさを変更するには、フィールドの右下の角(青いマーク)をドラッグします。左右にドラッグすると横幅(列数)が、上下にドラッグすると高さ(行数)が変わります。
完成イメージのとおりに、上の行から順に配置します。
- 1行目:「職種」の右下の角を左にドラッグして2列分の幅にします。「年齢」を1列分の幅にして3列目に、「経験年数」を1列分の幅にして4列目に移動します。
- 2行目:「体験した日時」を2列分の幅にして1~2列目に、「どこで」を2列分の幅にして3~4列目に移動します。
- 3行目:「作業項目・内容」を4列分の幅にして配置します。
- 4~5行目:「ヒヤリ・ハットした状況」を2列分の幅にして1~2列目に配置し、右下の角を下にドラッグして2行分の高さにします。「略図」も同じように2列×2行分の大きさにして3~4列目に配置します。
- 6行目:「再発防止・改善策」を4列分の幅にして配置します。
- 7行目:「原因(その時の心身状態)」を2列分の幅にして1~2列目に、「発生した場合の事故の型」を2列分の幅にして3~4列目に移動します。
- 8行目以降の空いた行は、行番号の「▼」をクリックして「行の削除」を選択して削除します。
※レイアウトの白部分がフィールドの表示領域です。下図の「略図」下部のように青部分は、表示領域に使用されません。
手順3:レイアウトを保存する
配置が終わったら「保存」をクリックします。
データポケットを保存し、ミニアプリを配布します。
iPadまたはAndroidタブレットのPlatioアプリ、またはWebアプリで新規シーンを開き、レイアウトが反映されていることを確認します。
補足
- カスタムレイアウトをオンからオフにすると、以前のレイアウトは保持されて、シーンは1列の表示に戻ります。オンに戻したときに以前のレイアウトが復元されます。
- シーンにフィールドを追加した場合や、フィールドの扱いを「なし」から変更した場合は、レイアウトの編集画面で最下部に追加されます。フィールドの配置を確認してください。