SharePoint Web パーツのデザインDesigning a SharePoint web part

SharePoint Web パーツをデザインする前に、SharePoint サイトのページを作成する方法について理解しておく必要があります。Before you design a SharePoint web part, you should understand how to author pages in a SharePoint site. これまでに実行したことがない場合は、ページの作成と複数の種類の Web パーツの追加に時間を割いてください。If you haven't already, take some time to create a page and add multiple types of web parts. Office Fabric のコンポーネントとスタイルを活用して Web パーツの準備と実行を簡単にする方法を知っていることが重要です。It is important to know how to leverage Office Fabric components and styles to make it easier and quicker to get your new web part up and running.

Web パーツをデザインするときには、次に示す概念についての詳しい知識が重要になります。When you design web parts, it's important to be familiar with the following concepts:

プロパティ ウィンドウの種類Property pane types

ビジネスや顧客のニーズに適った Web パーツをデザインおよび開発する際に、3 種類のプロパティ ウィンドウを使用できます。You can use three types of property panes to design and develop web parts that fit your business or customer needs.

Web パーツの設定を構成するウィンドウを開くには、[編集] を選択します。To open a pane to configure settings for a web part, select Edit. このウィンドウを使用して、機能の有効化と無効化、ソースの選択、レイアウトの選択、およびオプションの設定を実行します。Use the pane to enable and disable features, select a source, choose a layout, and set options. Web パーツのコンテンツを、プロパティ ウィンドウではなく、Web パーツ内で編集します。Edit web part content within the web part rather than in the property pane.

プロパティ ウィンドウは 320 px です。このウィンドウを開くと、ページはレスポンシブにリフローされます。The property pane is 320 px and when opened, the page responsively reflows.

単一ウィンドウSingle pane

単一ウィンドウは、構成するプロパティの数が少ない単純な Web パーツに使用します。Use a single pane for simple web parts that have only a small number of properties to configure.


アコーディオン ウィンドウAccordion pane

アコーディオン ウィンドウは、プロパティのグループに多数のオプションがあり、グループのオプションが長いスクロール リストになる場合に、1 つまたは複数のグループを含めるために使用します。Use an accordion pane to contain a group or groups of properties with many options, and where the groups result in a long scrolling list of options. たとえば、プロパティ、外観、およびレイアウトという 3 つのグループがあり、それぞれに 10 個のコンポーネントがあるときなどです。For example, you might have three groups named Properties, Appearance, and Layout, each with ten components.

アコーディオン ウィンドウは、複雑な Web パーツに分類を適用する必要がある場合に使用します。Use accordion panes when you need to apply categorization for a complex web part.

アコーディオン ウィンドウ

最後のウィンドウが開いた状態のアコーディオン グループの例Accordian groups example with last pane open

最後のウィンドウが開いていることを示すアコーディオン ウィンドウ

2 つのグループが開いている状態のアコーディオン グループの例Accordion groups example with two groups open

2 つのグループが開いていることを示すアコーディオン ウィンドウ

手順ウィンドウSteps pane

手順ウィンドウは、Web パーツを順番に構成する必要があるときや、最初の手順で選択した内容が 2 番目や 3 番目の手順に表示されるオプションに影響するときに、複数の手順やページのプロパティをグループ化するために使用します。Use a steps pane to group properties in multiple steps or pages when you need the web part to be configured in a linear order, or when choices in the first step affect the options that display in the second or third step.

手順 1 の手順ウィンドウStep 1 of the steps pane

手順 1 では、[戻る] ボタンは無効ですが、[次へ] ボタンは有効になっています。In step 1, the back button is disabled and the next button is enabled.

[次へ] ボタンが有効な状態の手順ウィンドウ

手順 2 の手順ウィンドウStep 2 of the steps pane

手順 2 では、[戻る] と [次へ] のボタンが有効になっています。In step 2, the back and next buttons are enabled.

[戻る] ボタンと [次へ] ボタンが有効な状態の手順ウィンドウ

手順 3 の手順ウィンドウStep 3 of the steps pane

手順 3 では、[次へ] ボタンは無効ですが、[戻る] ボタンは有効になっています。In step 3, the next button is disabled and the back button is enabled.

[戻る] ボタンが有効な状態の手順ウィンドウ

関連項目See also