Web パーツのデザインを開始するには、Office UI Fabric をよく理解することが必要です。 Fabric Core から、すべてのスタイル (アイコン、文字体裁、色遣い、アニメーション、応答性の高いグリッドを含む) が既定で読み込まれており、Web パーツで使用することができます。
グローバル コピーと競合する可能性があるため、Web パーツのファブリックのコピーをインポートしないでください。 これらのクラスは、Web パーツのスタイルの基盤となりますが、会社のブランドに一致するようにさまざまな視覚効果が必要な場合には、いつでも設定を変えることができます。
Office UI Fabric React コンポーネント
Office UI Fabric と併せて、Office UI Fabric React コンポーネントを使用し、Web パーツを構築することができます。 Fabric React は、すぐに簡単にできるようデザインされた応答性の高いモバイル ファーストのコンポーネントのコレクションであり、Office のデザイン言語を使用して Web エクスペリエンスを作り出すことができます。
次の To Do リストの例では、ページの作成者が Web パーツを構成するプロパティ ウィンドウでファブリック コンポーネントを使用します。
Office UI Fabric スタイルで、Office UI Fabric スタイル、文字体裁、色遣い、アイコン、およびアニメーションの完全なリストを見つけることができます。
応答性の高い動作
新しい SharePoint の作成環境内のページでは、Office UI Fabric の応答性の高いグリッドを使用して、各ページを見栄えよくすることができます。
最大幅
再フローしてどのページでも適切に機能するよう、すべての Web パーツに 100% の最大幅を使うことをお勧めします。 ページと列の幅は、ページ テンプレートによって定義されますが、作成者は変更することができます。 最大ピクセル値が Web パーツで設定されている場合、ページが異なる幅で表示されていると、機能およびレイアウトの両方で予期しない結果となる可能性があります。
最小幅
ページと列の幅が最小幅 320 ピクセルまで小さくなると、すべての Web パーツが再フローを行うよう設計される必要があります。
Web パーツの編集モード
新しい SharePoint のページ作成環境には、次の 2 つのモードがあります。
- 公開モード ‐ チームまたは対象ユーザーがコンテンツを見て、Web パーツを操作することができます。
- 編集モード ‐ ページの作成者が Web パーツを追加し構成して、コンテンツをページに追加することができます。
次のセクションでは、編集モードについて説明します。
ヒントとツールボックスの追加
[追加ヒント] は、プラス記号のアイコンがついた水平線です。Web パーツが選択されているときに表示され、マウスオーバーでページ作成者が新しい Web パーツをページに追加する場所を示すことができます。 ユーザーがプラス アイコンを選択すると、ツール ボックスが開きます。 ツールボックスには、ページに追加できるすべての Web パーツが含まれています。
ツールバー
縦方向ツールバーと境界ボックスは、各 Web パーツのフレームワークの一部で、ページによって提供されます。 各 Web パーツのツールバーには編集操作と削除操作があります。
コンテキスト編集
WYSIWYG エクスペリエンスは、Web パーツが情報を埋めて、公開時にユーザーに表示されるコンテンツを追加できるようデザインする必要があります。 ビューアーにコンテンツがどのように表示されるかをユーザーが理解できるように、このコンテンツ入力はページ内で行う必要があります。 たとえば、タイトルと説明はテキストの表示場所に入力する必要があり、新しいタスクの追加や変更はページのコンテキスト内で行う必要があります。
項目レベルの編集
UI は、Web パーツ内で変更できます。たとえば、リンクの入力や UI の表示の際にテキストをテキスト フィールドに変えて、項目の順序を変えたり、Web パーツのタスクを確認したりすることができます。
プロパティ ウィンドウ
プロパティ ウィンドウは、ツールバーの編集アクション アイコンを使用して呼び出されます。 ウィンドウは主に、ページに表示する機能、もしくはコンテンツを表示するサービスへの呼び出しを行う機能を有効または無効にする、構成設定を含む必要があります。
3 種類のプロパティ ウィンドウがあり、お客様のビジネスや顧客のニーズを満たす Web パーツをデザインし開発できるようにします。
単一ウィンドウ
単一ウィンドウは、構成用に少ない数のプロパティしか持っていない単純な Web パーツに使用されます。
アコーディオン ウィンドウ
アコーディオン ウィンドウは、グループ、または多数のオプションがあるプロパティのグループを含み、グループがオプションの長いスクロール リストになってしまうときに使用します。 たとえば、プロパティ、外観、レイアウトという 3 つのグループがあり、それぞれに 10 個のコンポーネントがあるときなどです。
アコーディオン - 1 つのグループが開く
アコーディオン - 2 つのグループが開いてスクロール
プロパティ ウィンドウの手順とページ
手順ウィンドウは、Web パーツを順番に作成する必要があるときや、最初の手順での選択が 2 番目の手順で表示されるオプションに影響するときに、複数の手順やページでプロパティをグループ化するために使用されます。
手順 1/3
手順 2/3
手順 3/3
反応性 Web パーツと非反応性 Web パーツ
反応性 Web パーツは、完全なクライアント側の Web パーツになるよう設計されています。すなわち、変更がページ上の Web パーツ内で行われると、プロパティ ウィンドウに構成される各コンポーネントに反映されます。 タスク一覧 Web パーツの場合は、[完了したタスク] をオフにすると、このビューが Web パーツ内で非表示になります。
非反応性 Web パーツは、完全にはクライアント側ではなく、通常 1 つまたは複数のプロパティが呼び出しを行い、サーバー上でデータの設定、引き出し、保存を行う必要があります。 この場合、プロパティ ウィンドウの下部にある [適用] ボタンと [キャンセル] ボタンを有効にする必要があります。
タスク一覧のプロパティ ウィンドウの構築
ここでのタスク一覧は、反応性 Web パーツの例になり、単一ウィンドウを使用します。 ファブリック React の各コンポーネントとその結果のデザインを次のダイアグラムに示します。
タスク一覧の説明の追加
ドロップダウン – 既存のリストからタスクを選択する
チェックボックス – 作成者はさまざまなビューの表示または非表示が可能
スライダー – 表示されるタスクの数を設定する
ドロップダウンからリストを選択した後、Web パーツに、ページに読み込むアイテムのインジケーターが示されます
新しいタスクが読み込まれると、Office UI Fabric のアニメーション スタイルを使用して、そのタスクがビューにフェードインします。
