#デスクトップレイアウト

NocoBase のデスクトップレイアウトは、デフォルトのアプリケーション画面です。パソコンでのデータ管理、フォーム入力、業務設定、日常操作に適しており、モバイル端末でも使用できます。

デスクトップレイアウトには、デフォルトで /admin からアクセスします。アプリケーションに独自のアクセスプレフィックスが設定されている場合、実際の URL にはそのプレフィックスが自動的に追加されます。

#ページを構築する

#ステップ 1：デスクトップレイアウトを開く

/admin にアクセスして、デスクトップレイアウトを開きます。通常、アプリケーションへのログイン後もこの画面が直接開きます。

#ステップ 2：UI Editor を開く

ページ右上の「UI Editor」をクリックして、UI ビルダーモードに切り替えます。メニュー、ページ、ブロック、フィールド、アクションの周辺に、それぞれの設定メニューが表示されます。

#ステップ 3：メニューとページを作成する

ナビゲーションエリアには、グループ、ページ、リンクを追加できます。ページではタブも有効にできます。ページを作成したら、そのページを開いて必要なブロックを追加します。

ページコンテンツは、ほかの画面と同じように構築します。まずブロックを追加し、業務に合わせてフィールドとアクションを設定します。

#ステップ 4：ページコンテンツを設定する

ページにテーブル、フォーム、詳細、フィルターなどのブロックを追加し、フィールド、アクション、ブロックの配置を調整します。変更した内容は現在のページにすぐ反映されます。

#ルートとメニューを管理する

ナビゲーションエリアでページやリンクを追加すると、ルートマネージャーにも表示されます。ルートマネージャーでルートを変更した場合も、メニューに反映されます。

デスクトップレイアウトでは、次のルートタイプを使用できます。

• グループ（Group） — 複数のページとリンクを同じナビゲーショングループにまとめます。
• ページ（Page） — ブロックを追加して構築できるページを開きます。
• リンク（Link） — NocoBase 内の URL または外部 URL を開きます。
• タブ（Tab） — 1 つのページ内で複数のコンテンツタブを構成します。

ルートマネージャーでは、ルートの追加、編集、削除、表示、非表示を操作できます。メニュー構造全体をまとめて整理するときは、ルートマネージャーを使うと便利です。

#狭い画面でのレスポンシブ表示

デスクトップレイアウトは、スマートフォンや幅の狭いブラウザーウィンドウでもそのまま使用できます。狭い画面で表示しても、元のデスクトップルートとページを使用します。モバイルレイアウトに自動で切り替わることはありません。

#レイアウトの変化

ナビゲーションメニューは折りたたまれ、上部のアクションはよりコンパクトなメニューにまとめられます。ページの余白とブロック間隔も小さくなり、コンテンツエリアの高さはモバイルブラウザーの表示領域に合わせて調整されます。

狭い画面では UI Editor を使用できません。メニューやページを変更するときは、パソコンのブラウザーに戻って設定する必要があります。

#ページコンテンツの調整

よく使うコンポーネントも、狭い画面で操作しやすいように調整されます。たとえば、複数列のブロックは 1 列に変わり、テーブルでは画面外の列を横スクロールで確認できます。ページネーションやアクションメニューはコンパクトになり、選択、日時、フィルター、サブページなどの操作もスマートフォンに適した表示になります。

#利用時のポイント

• 主にパソコンで行う業務では、デスクトップレイアウトを使用します。
• 広い画面でページの構築を終えてから、ウィンドウを狭くして表示を確認します。
• ページに多くのテーブル列や横並びのアクションがある場合は、必要な内容だけを残し、小さい画面での操作負担を減らします。
• パソコンとモバイルで操作フローが大きく異なる場合は、それぞれにページを構築するとわかりやすくなります。

#関連リンク

• UI レイアウトの概要 — デスクトップレイアウトとモバイルレイアウトの利用シーンを確認する
• モバイルレイアウト — 独立したモバイルナビゲーションとページを構築する
• ブロック — ページにブロックを追加して設定する
• フィールド — テーブル、フォーム、詳細のフィールドを設定する
• アクション — ページとブロックのアクションを設定する
• ルートマネージャー — デスクトップのメニューとルートをまとめて管理する
• 権限設定 — ロールがアクセスできるデスクトップルートを設定する