#モバイルレイアウト

NocoBase のモバイルレイアウトでは、モバイル端末向けの独立したナビゲーションとページを構築できます。デフォルトでは /mobile からアクセスし、下部タブバーを第 1 階層のナビゲーションとして使用します。スマートフォンでのデータ入力、検索、承認、タスク処理に適したレイアウトです。

モバイルレイアウトとデスクトップレイアウトは、同じデータソースと業務データを使用します。ただし、メニュー、ルート、ページコンテンツは個別に設定します。そのため、デスクトップページの構造に制約されず、モバイルでの使い方に合わせてページを構成できます。

#モバイルレイアウトを開いてプレビューする

デフォルトでは、設定画面の「モバイル」から開くことができます。/mobile に直接アクセスすることもできます。

ページの構築は、パソコンのブラウザーで行うことをおすすめします。パソコンでは、モバイルプレビューエリアと上部ツールバーが表示されます。

• 「UI Editor」— UI ビルダーモードをオンまたはオフにします。
• 「タブレットプレビュー」— 幅の広いモバイルデバイスでの表示を確認します。
• 「モバイルプレビュー」— プレビューエリアをスマートフォンのサイズに戻します。
• 「QR コード」— 現在のモバイル URL をスマートフォンで開きます。

パソコンでの構築が終わったら、QR コードから実機で開いて確認します。ナビゲーション、スクロール、フォーム入力、ポップアップページ、セーフエリアが想定どおりか確認してください。

#モバイルナビゲーションを構築する

モバイルレイアウトでは、下部タブバーを第 1 階層のナビゲーションとして使用します。現在、第 1 階層のナビゲーションでは、主にページとリンクを使用できます。

#ページを追加する

1. 「UI Editor」を開きます。
2. 下部タブバーの右側にある追加ボタンをクリックします。
3. 「ページ」を選択します。
4. ページタイトルを入力し、アイコンを選択します。
5. 保存すると新しいページが開くので、ページコンテンツを追加します。

#リンクを追加する

NocoBase 内の URL または外部 URL を開く場合は、「リンク」を選択し、タイトル、アイコン、URL を設定します。

リンクは、設定に応じて現在のウィンドウまたは新しいウィンドウで開きます。

#ナビゲーションを調整する

UI ビルダーモードでは、下部タブをドラッグして順序を変更できます。各タブでは、タイトルとアイコンの編集、連携ルールの設定、UID のコピー、削除も行えます。

モバイルルートの確認、表示、非表示、削除をまとめて行う場合は、「設定 / ルート / モバイルルート」を開きます。

#モバイルページを構築する

先にモバイルページを作成して開いてから、ページにブロックを追加します。ページコンテンツの構築方法はデスクトップと基本的に同じで、ブロック、フィールド、アクションを使って業務コンテンツを構成します。ただし、モバイルのナビゲーションと一部のコンポーネント操作は、狭い画面に合わせて調整されます。

#ページコンテンツを追加する

1. 構築するモバイルページを開きます。
2. 「UI Editor」が有効になっていることを確認します。
3. ページ内の「ブロックを追加」をクリックします。
4. テーブル、フォーム、詳細、フィルターなどのブロックを選択します。
5. フィールド、アクション、ブロックの設定を続けます。

#ページタブを使う

モバイルページでもタブを有効にできます。同じナビゲーション項目の下に置きたい、比較的独立したコンテンツが複数ある場合は、別々のタブに配置します。

1. ページ設定を開き、「ページタブを有効にする」をオンにします。「設定 / ルート / モバイルルート」でページを編集し、「ページタブを有効にする」にチェックを入れることもできます。
2. 「UI Editor」を開きます。
3. ページタブバーの右側にある「タブを追加」をクリックします。
4. タブを追加し、名前とページコンテンツを設定します。

モバイルページのコンテンツが少ない場合は、1 つのページをそのまま使用します。タブを有効にする必要はありません。

#よく使うコンポーネントのモバイル操作

よく使うコンポーネントは、モバイルレイアウトに合わせて配置と操作方法が調整されます。たとえば、複数列のコンテンツは縦方向に閲覧しやすい 1 列へ自動的に変わり、選択フィールドと日時フィールドではモバイル向けの選択画面が使われます。フィルター、関連レコードの選択、サブページも、タッチ操作に適した画面で表示されます。

モバイルでもテーブルはテーブルのまま表示され、画面外の列は横スクロールで確認できます。追加のモバイル動作に対応するかどうかは、各ブロックの実装によって異なります。

#ページとサブページ

表示、編集、関連レコードの選択などのアクションから開いたコンテンツは、モバイルのサブページとして表示されます。サブページには戻るボタンがあり、前のページに戻ることができます。

深い階層のサブページを開くと、現在のコンテンツを広く表示するために下部タブバーが非表示になります。サブページを閉じるか上の階層に戻ると、下部タブバーが再び表示されます。

下部タブを切り替えても、開いていたページの状態は保持されます。複数のモバイルタスクを切り替えながら進められます。

#ルートと権限を管理する

モバイルルートは、ルートマネージャーでまとめて管理できます。「設定 / ルート / モバイルルート」を開くと、ページやリンクの追加、編集、削除、表示、非表示や、ページタブの設定を行えます。

モバイルルートのアクセス権限は、デスクトップとは別に設定します。ロールの権限設定で「モバイルルート」を開き、現在のロールがアクセスできるページを選択します。詳細は権限設定を参照してください。

#デスクトップレイアウトとの関係

同じデータテーブルをもとに、デスクトップとモバイルで別々のページを構築できます。たとえば、デスクトップでは多くのフィールドを含むテーブルでデータを処理し、モバイルではシンプルなリストやフォームで現場のデータを入力できます。

2 つのレイアウトのページは自動で同期されません。デスクトップのページ、メニュー、ルートを変更してもモバイルの設定は変わらず、モバイルの変更もデスクトップには影響しません。

#関連リンク

• UI レイアウトの概要 — デスクトップレイアウトとモバイルレイアウトの利用シーンを確認する
• デスクトップレイアウト — デフォルトのデスクトップレイアウトと狭い画面でのレスポンシブ表示を使用する
• ブロック — モバイルページに業務コンテンツを追加する
• フィールド — モバイルフォームとデータ表示のフィールドを設定する
• アクション — モバイルページのアクションを設定する
• ルートマネージャー — モバイルページ、リンク、タブを管理する
• 権限設定 — ロールがアクセスできるモバイルルートを設定する