このサイトで JavaScript が必要です。

バージョン

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

igTileManager の構成

トピックの概要

目的

このトピックでは、igTileManager™ コントロールの機能およびビヘイビアーを構成する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

igTileManager の概要: このトピックでは、主要機能、最小要件およびユーザー機能性など、igTileManager コントロールについて概念的な情報を提供します。
igTileManager の追加: このトピックではコード例を使用して、JavaScript または ASP.NET MVC のいずれかで igTileManage コントロールを HTML ページに追加する方法を説明します。
igTileManager とデータのバインド: このトピックは、igTileManager コントロールをサポートされているデータソースにバインドする方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

igTileManager 構成の概要

igTileManager コントロールの構成可能な主な項目:

行数と列数
各列
項目の位置とスパン
タイルの状態
最小化されたタイルパネル
アニメーション化されたトランジションの期間
ユーザー操作

各要素については、igTileManager の構成で説明します。

igTileManager 構成の概要表

以下の表は、igTileManager コントロールを構成できる要素を示します。各要素の詳細は、この概要表の後のセクションを参照してください。

構成可能な項目		詳細	JavaScript プロパティ	ASP.NET MVC プロパティ
行数と列数	行数	タイルグリッドに描画する行数と列数を構成できます。	rows	Row()
行数と列数	列の数		cols	Coll()
各列	列の高さ	タイルグリッドの列の幅と高さを構成できます。	columnHeight	ColumnHeight()
	列の幅		columnWidth	ColumnWidth()
	タイルの左の余白	タイルグリッドの各タイルの上と左の余白を構成できます。	marginLeft	MarginLeft()
	タイルの上の余白		marginTop	MarginTop()
操作モード	最大化されたタイルのパネル数と配置	最大化されたタイルを最小化されたタイルと別のパネルに表示する、または同じパネルに同時に表示するか指定できます。後者の場合、最大化されたタイルの位置をパネル内に構成できます。	maximizedTileIndex	MaximizedTileIndex()
項目の位置とスパン	項目の位置	タイルグリッドでの項目の位置は、任意の位置の行とインデックスを指定して構成できます。	rowIndex colIndex	RowIndex() ColIndex()
項目の位置とスパン	項目のサイズ	長い項目が使用できるように、項目は複数の行と列にまたがって構成できます。	rowSpan colSpan	RowSpan() ColSpan()
タイルの状態	最小化された状態	タイルの状態は、各状態で個別に設定します。	minimizedState	MinimizedState()
タイルの状態	最大化された状態		maximizedState	MaximizedState()
タイルの余白	上の余白	最小化されたタイルの上と左の余白を構成し、タイル間のアウトセットを形成できます。	marginTop	MarginTop()
タイルの余白	左の余白		marginLeft	MarginLeft()
最小化されたタイルパネル	列の数	最小化されたタイルパネルに描画する列数を構成できます。	rightPanelCols	RightPanelCols()
	最小化されたタイルの幅	最小化されたタイルパネルのタイルの幅を構成できます。	rightPanelTilesWidth	RightPanelTilesWidth()
	最小化されたタイルの高さ	最小化されたタイルパネルのタイルの高さを構成できます。	rightPanelTilesHeight	RightPanelTilesHeight()
	スクロールバー	タイルがオーバーフローした場合に、最小化されたタイルパネルがスクロールバーで表示できるように指定できます。スクロールバーが無効の場合は、隠れたタイルを表示するためにスプリッターを移動する必要があります。	showRightPanelScroll	ShowRightPanelScroll()
	スプリッターバーの表示	スプリッターの表示を指定できます。デフォルトで、スプリッターは表示されます。	showSplitter	ShowSplitter()
アニメーション化されたトランジションの期間	コンテナーのサイズ変更時のトランジションの期間	コンテナーのサイズとタイル状態（最小化または最大化）の変更時のアニメーション化されたトランジションの期間は、`animationDuration` オプションで構成されるため、常に同じ期間です。	animationDuration	AnimationDuration()
アニメーション化されたトランジションの期間	最小化または最大化時のトランジションの期間
ユーザー操作	最大化トリガー	最大化をトリガーしない最小化されたタイルの要素を指定できます。デフォルトで、`<a>` タグと `<inputs>` タグをクリックしても最大化はトリガーされません。	preventMaximizingSelector	PreventMaximizingSelector()

行数と列数の構成

タイルグリッドに描画する行数と列数を構成できます。行と列の数が指定されていない場合、コンテナーのタイルが最も良い位置に収まるように計算されます。

操作モード (デュアルパネルまたはシングルパネル) にかかわらず、cols オプションと rows オプションは、コンテナー全体の行数と列数を設定します。

デュアルパネルモードの場合は、rightPanelCols オプションがコンテナー全体の列数から、最小化されたタイルに応じた最小化されたタイルパネルの一定の列数を確保します。これは、最小化されたタイルパネルと最大化されたタイルパネルの幅を事前に定義することになります。最大化されたタイルパネルは、columnWidth 設定と同じ最小幅を確保する必要があることに注意してください。rightPanelCols の値を cols-1 未満に設定し、最大化されたタイルパネルに 1 つ以上のグリット列を確保します。

rightPanelCols オプションは、デュアルパネルモードでのみ有効です。

関係するコード例:

特定の行数と列数の構成

各列の構成

タイルグリッドの列の幅と高さを構成できます。

デフォルトで、タイルマネージャーは利用可能なスペース全体を使用して、コンテナーに収まるように等しいサイズのタイルを描画します。columnWidth または columnHeight が設定されている場合、igTileManager は設定に従って構成を描画し、コンテナーにタイルが収まり、残るスペースを使用するようにオプションの残りを計算します。

タイルグリッドの各タイルの上と左の余白を構成できます。デフォルトの構成には、余白は含まれていません。

columnWidth オプションと columnHeight オプションは、ピクセル単位またはパーセンテージ単位で設定できます。ディメンションの選択は、列の描画ロジックに影響します。

ディメンションがパーセンテージで設定されている場合、項目の余白のサイズは列の幅と高さに含まれます。
ディメンションがピクセルで設定されている場合、項目の余白のサイズは列の幅と高さから除外されます。

cols/rows 両方のオプションと columnWidth/columnHeight 両方のオプションを、それぞれ同時に定義することができます。この場合、行のタイル数は cols オプション値に応じて設定され、各タイルのサイズは columnWidth オプション値に応じて定義されます。同じ行のすべてのタイルの幅の合計がコンテナーの幅より大きい場合、水平スクロールバーが描画されます。

注: 利便性の点から、columnWidth/columnHeight がパーセンテージで設定されている場合、その値は左と上の余白を含みます。たとえば、コンテナーの幅が 1000 ピクセルで、columnWidth が '50%' に設定されている場合、各タイルの幅は 500 ピクセルになります。ただし、marginLeft: 50px が追加されると、タイルの幅は 450 ピクセルになります。したがって、パーセンテージを使用してタイルの幅と高さを指定する方が作業が容易になります。

また、コンテナーに表示されたスクロールバーは、コンテナーの幅または高さの一部として計算されません。したがって、スクロールバーのある 1000 ピクセル幅の同じコンテナーの例では、columnWidth: '50%' で余白なしにすると、タイルの幅は 500 ピクセルより狭くなります。:

関係するコード例:

各列の構成

項目の位置とスパンの構成

タイルグリッドでの項目の位置は、任意の位置の行とインデックスを指定して構成できます。また、長い項目を使用できるように、項目は複数の行と列にまたがって構成できます。各タイルの位置とサイズは、items オプションによって個別に指定できます。items オプションは、各タイルの位置とサイズの設定によって配置します。

以下の表で、項目の位置とサイズを構成するためのオプションについて説明します。

プロパティ	説明
rowIndex	タイルの開始行の位置。
colIndex	タイルの開始列の位置。
rowSpan	タイルがまたがる行数。
colSpan	タイルがまたがる列数。

項目の位置とサイズの構成は列構成より優先順位が高いため、列構成をオーバーライドします。

最小化されたタイルパネルに配置された最小化されたタイルの外観も構成できます。最小化されたタイルを配置する列数 (rightPanelCols オプションを使用)、および最小化されたタイルパネルでのタイルの高さと幅 (rightPanelTilesHeight オプションと rightPanelTilesWidth オプションを使用) を定義できます。

関係するコード例:

タイルの任意の位置とスパンの構成

タイルの状態の構成

タイルの状態は、minimizedState オプションと maximizedState オプションによりそれぞれの状態を個別に構成できます。タイルの状態の構成方法は、igTileManager コントロールのインスタンスを作成する方法に応じて異なります。

データソースで igTileManager を初期化する場合は、minimizedState オプションと maximizedState オプションに対して igTemplating™ 文字列を提供します。提供されない場合は、コンテンツがタイルに描画されません。
HTML マークアップで igTileManager を初期化する場合は、minimizedState オプションと maximizedState オプションに対して jQuery セレクターを提供し、コンテンツが対応する状態で描画されるように指定します。いずれのオプションも指定されていない場合は、タイルのコンテンツ全体が状態に応じて表示されます。

関係するコード例:

カスタムタイルの構成

タイルの余白の構成

最小化されたタイルの余白は、グリッドの各タイルの周囲のスペースを定義します。最小化されたタイルの上と左の余白を構成し、タイル間のアウトセットを形成できます。タイルの余白は、marginTop オプションと marginLeft オプションで構成されます。

タイルの余白の値の構成方法は、タイルのサイズに影響します。タイルの幅は、コンテナーの幅から余白の合計を減算した残りの幅で計算されます。たとえば、800 ピクセルのコンテナーの各行に 4 つのタイルあり、タイルの左の余白に 10 ピクセル設定されている場合、タイル幅はコンテナーの幅に比例して設定され、各タイルの幅は 760 ピクセル (800 - (4 x 10) = 760) の 25 %になります。

最小化されたタイルパネルの構成

最小化されたタイルパネルでスクロールを無効にできます。最小化されたタイルパネルのスクロールバーを非表示にするには、showRightPanelScroll オプションを false に設定します。スクロールバーを非表示に設定した場合は、スプリッターを移動して、最小化されたタイルパネルの隠れたタイルを表示します。

パネルサイズが変更されないように、スプリッターバーも非表示にできます。スプリッターバーを非表示にするには、showSplitter オプションを false に設定します。

関係するコード例:

最小化されたタイルパネルの構成

アニメーション化されたトランジションの期間の構成

コンテナーのサイズとタイル状態（最小化または最大化）の変更時のアニメーション化されたトランジションの期間は、1 つのオプション - animationDuration - で設定できます。この設定は最小化および最大化の両方のアニメーションに適用されます。animationDuration は、ミリ秒単位で設定します。デフォルト値は 500 です。このオプションを 0 に設定すると、アニメーション化される期間を無効にできます。

関係するコード例:

アニメーション化されたトランジションの期間の構成

デフォルトの構成

デフォルト構成の概要

デフォルト設定では、igTileManager コントロールは、マークアップされた項目のタイルを左と上の余白なしで描画します。すべてのタイルは、タイルの数に応じて行数と列数が同じになるようにコンテナーに収められます。デフォルトの構成には、余白は含まれていません。

コード例の概要

コード例の概要表

以下の表は、このトピックで使用したコード例をまとめたものです。

例	説明
特定の行数と列数の構成	この例は、HTML マークアップから指定された列数、行数、余白を持つタイルグリッドを描画するために `igTileManager` コントロールを構成する方法を示します。
各列の構成	この例は、HTML マークアップから指定された列のディメンションと余白を持つタイルグリッドを描画するために `igTileManager` コントロールを構成する方法を示します。
タイルの任意の位置とスパンの構成	この例は、個別に位置指定された項目を持つタイルグリッドを描画するために `igTileManager` コントロールを構成する方法を示します。
カスタムタイルの構成	この例は、最小化されたタイル状態と最大化されたタイル状態を持つタイルグリッドを描画するために `igTileManager` コントロールを構成する方法を示します。
最小化されたタイルパネルの構成	この例は、カスタムレイアウトで最小化されたタイルパネルを構成する方法を示します。
アニメーション化されたトランジションの期間の構成	この例は、コンテナーのサイズを変更しタイルを最小化または最大化するために `igTileManager` のアニメーション化されたトランジションを構成する方法を示します。

コード例: 特定の行数と列数の構成

説明

この例は、HTML マークアップから指定された列数、行数、余白を持つタイルグリッドを描画するために igTileManager コントロールを構成する方法を示します。

例では、高さが 800 ピクセル、ウィンドウの幅全体 (100%) を使用する igTileManager コントロールを構成します。タイルは 5 列 4 行で配置されます。左と上のタイルの余白は 10 ピクセルです。各タイルは高さ 190 ピクセルで、互いに 10 ピクセルの余白でアウトセットされます。タイルの幅は、コンテナーのサイズに合わせて計算されます。

タイルは、コントロール描画時にすべて最小化された状態となるように構成します。つまり、最初はチームのロゴのみが表示されます。任意のタイルをクリックすると、そのタイルが展開され、チームに関するいくつかの統計情報が表示されます。

コード

以下のコードはこの例を実装します。

HTML の場合:

<style type="text/css">
        #dashboard {
            position: relative;
            width: 100%;
            height: 800px;
        }
</style> 
<div id="dashboard">
        <div>
           <figure class="minimized">               
               <img src="miami-logo.jpg" alt="error">
            </figure>
           <div class="maximized">
              <img src="miami-maximized.jpg" alt="error">
               <ul>
                  <li>Top scorer: LeBron James - 25,9 PPG</li>
                  <li>Most rebounds per game: LeBron James - 8.40 TOT</li>
                  <li>Highest three point percentage: James Jones - 0.750</li>
               </ul>
           </div>
         </div>
         <div>
            <figure class="minimized">
               <img src="San-Antonio-logo.jpg" alt="error">
            </figure>
           <div class="maximized">
              <img src="San-Antonio-maximized.jpg" alt="error">
               <ul>
                  <li>Top scorer: Tony Parker - 20,3 PPG</li>
                  <li>Most rebounds per game: Tim Duncan - 9.90 TOT</li>
                  <li>Highest three point percentage: Matt Bonner - 0.442</li>
               </ul>
           </div>
         </div>       
                ...
         <div>
            <figure class="minimized">               
               <img src="wizards-logo.jpg" alt="error">
            </figure>
            <div class="maximized">
              <img src="wizards-maximized.jpg" alt="error">
               <ul>
                  <li>Top scorer: John Wall - 18,5 PPG</li>
                  <li>Most rebounds per game: Emeka Okafor - 8,80 TOT</li>
                  <li>Highest three point percentage: Martell Webster - 0.422</li>
               </ul>
           </div>
         </div>
</div>

JavaScript の場合:

$("#dashboard").igTileManager({
   cols: 5, 
   rows: 4,
   marginLeft: 10,
   marginTop: 10,
   minimizedState: ".minimized",
   maximizedState: ".maximized"
});

コード例: 各列の構成

説明

この例は、HTML マークアップから指定された列のディメンションと余白を持つタイルグリッドを描画するために igTileManager コントロールを構成する方法を示します。

例では、高さが 800 ピクセル、ウィンドウの幅全体 (100%) を使用する igTileManager コントロールを構成します。タイルマネージャーの列は、それぞれ高さ 250 ピクセル、幅 250 ピクセルになります。グリッドの列と行の数は、コンテナーのサイズによって決定します。タイルの左と上の余白は 10 ピクセルに設定されます。

コード

以下のコードはこの例を実装します。

HTML の場合:

<style type="text/css">
        #dashboard {
            position: relative;
            width: 100%;
            height: 800px;
        }
</style> 
<div id="dashboard">
        <div>
           <figure class="minimized">
               <img src="miami-logo.jpg" alt="error">
            </figure>
           <div class="maximized">
              <img src="miami-maximized.jpg" alt="error">
               <ul>
                  <li>Top scorer: LeBron James - 25,9 PPG</li>
                  <li>Most rebounds per game: LeBron James - 8.40 TOT</li>
                  <li>Highest three point percentage: James Jones - 0.750</li>
               </ul>
           </div>
         </div>
         <div>
            <figure class="minimized">
               <img src="San-Antonio-logo.jpg" alt="error">
            </figure>
           <div class="maximized">
              <img src="San-Antonio-maximized.jpg" alt="error">
               <ul>
                  <li>Top scorer: Tony Parker - 20,3 PPG</li>
                  <li>Most rebounds per game: Tim Duncan - 9.90 TOT</li>
                  <li>Highest three point percentage: Matt Bonner - 0.442</li>
               </ul>
           </div>
         </div>       
                ...
         <div>
            <figure class="minimized">
               <img src="wizards-logo.jpg" alt="error">
            </figure>
            <div class="maximized">
              <img src="wizards-maximized.jpg" alt="error">
               <ul>
                  <li>Top scorer: John Wall - 18,5 PPG</li>
                  <li>Most rebounds per game: Emeka Okafor - 8,80 TOT</li>
                  <li>Highest three point percentage: Martell Webster - 0.422</li>
               </ul>
           </div>
         </div>
</div>

JavaScript の場合:

$("#dashboard").igTileManager({
   columnWidth: 250,
   columnHeight: 250,
   marginLeft: 10,
   marginTop: 10,
   minimizedState: ".minimized",
   maximizedState: ".maximized"
});

コード例: タイルの任意の位置とスパンの構成

説明

この例は、個別に位置指定された項目を持つタイルグリッドを描画するために igTileManager コントロールを構成する方法を示します。

コード

以下のコードはこの例を実装します。

HTML の場合:

<style type="text/css">
        #dashboard {
            position: relative;
            width: 100%;
            height: 800px;
        }
</style> 
<div id="dashboard">
        <div>
           <figure class="minimized">
               <img src="miami-logo.jpg" alt="error">
            </figure>
           <div class="maximized">
              <img src="miami-maximized.jpg" alt="error">
               <ul>
                  <li>Top scorer: LeBron James - 25,9 PPG</li>
                  <li>Most rebounds per game: LeBron James - 8.40 TOT</li>
                  <li>Highest three point percentage: James Jones - 0.750</li>
               </ul>
           </div>
         </div>         <div>
            <figure class="minimized">
               <img src="San-Antonio-logo.jpg" alt="error">
            </figure>
           <div class="maximized">
              <img src="San-Antonio-maximized.jpg" alt="error">
               <ul>
                  <li>Top scorer: Tony Parker - 20,3 PPG</li>
                  <li>Most rebounds per game: Tim Duncan - 9.90 TOT</li>
                  <li>Highest three point percentage: Matt Bonner - 0.442</li>
               </ul>
           </div>
         </div>  
         <div>
          <figure class="minimized">
            <img src="NY-logo.jpg" alt="error">
          </figure>
        <div class="maximized">
            <img src="ny-maximized.jpg" alt="error">
              <ul>
                 <li>Top scorer: Carmelo Anthony - 28.7 PPG</li>
                 <li>Most rebounds per game: Tyson Chandler - 10.70 TOT</li>
                 <li>Highest three point percentage: Steve Novak - 0.425</li>
              </ul>
         </div>
         </div>
         <div>
            <figure class="minimized">
               <img src="boston-logo.jpg" alt="error">
            </figure>
            <div class="maximized">
              <img src="boston-maximized.jpg" alt="error">
               <ul>
                  <li>Top scorer: Jeff Green - 20.3 PPG</li>
                  <li>Most rebounds per game: Kevin Garnett - 13.70 TOT</li>
                  <li>Highest three point percentage: Jeff Green - 0.455</li>  
               </ul>
           </div>
         </div>
</div>

JavaScript の場合:

$("#dashboard").igTileManager({
       items: [
          { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 2 },
         { rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
         { rowIndex: 1, colIndex: 1, rowSpan: 2, colSpan: 1 },
         { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 }
       ],
       minimizedState: ".minimized",
       maximizedState: ".maximized"
});

コード例: タイル状態の構成

説明

この例は、最小化されたタイル状態と最大化されたタイル状態を持つタイルグリッドを描画するために igTileManager コントロールを構成する方法を示します。コントロールのインスタンスをデータソースと HTML マークアップの 2 種類の方法で作成します。

コード

以下のコードは、タイルグリッドをデータソースで初期化するときに実装します。

JavaScript の場合:

$("#dashboard").igTileManager({
    dataSource: dataSource,
    minimizedState: '<h3>${name} - Minimized</h3>',
    maximizedState: '<h3>${name} - Maximized</h3>'
});

以下のコードは、タイルグリッドを HTML マークアップで初期化するときに実装します。

JavaScript の場合:

$("#dashboard").igTileManager({
    dataSource: ,
    minimizedState: '.minimized',
    maximizedState: '.maximized'
});

コード例: 最小化されたタイルパネルの構成

説明

この例は、カスタムレイアウトで最小化されたタイルパネルを構成する方法を示します。

例では、最初にタイルを選択し最大化します。次に最小化されたタイルパネルの 2 列に、最小化されたタイルを再グループ化します。スプリッターバーは無効に設定します。

コード

以下のコードはこの例を実装します。

HTML の場合:

<style type="text/css">

        #dashboard {

            position: relative;

            width: 100%;

            height: 800px;

        }

</style> 

<div id="dashboard">

        <div>

           <figure class="minimized">

               <figcaption>Miami Heat</figcaption>

               <img src="miami-logo.jpg" alt="error">

            </figure>

           <div class="maximized">

              <img src="miami-maximized.jpg" alt="error">

               <ul>

                  <li>Top scorer: LeBron James - 25,9 PPG</li>

                  <li>Most rebounds per game: LeBron James - 8.40 TOT</li>

                  <li>Highest three point percentage: James Jones - 0.750</li>

               </ul>

           </div>

         </div>

         <div>

            <figure class="minimized">

               <figcaption>San Antonio Spurs</figcaption>

               <img src="San-Antonio-logo.jpg" alt="error">

            </figure>

           <div class="maximized">

              <img src="San-Antonio-maximized.jpg" alt="error">

               <ul>

                  <li>Top scorer: Tony Parker - 20,3 PPG</li>

                  <li>Most rebounds per game: Tim Duncan - 9.90 TOT</li>

                  <li>Highest three point percentage: Matt Bonner - 0.442</li>

               </ul>

           </div>

         </div>       

         <div>

            <figure class="minimized">

               <figcaption>Boston Celtics</figcaption>

               <img src="boston-logo.jpg" alt="error">

            </figure>

            <div class="maximized">

              <img src="boston-maximized.jpg" alt="error">

               <ul>

                  <li>Top scorer: Jeff Green - 20.3 PPG</li>

                  <li>Most rebounds per game: Kevin Garnett - 13.70 TOT</li>

                  <li>Highest three point percentage: Jeff Green - 0.455</li>  

               </ul>

           </div>

         </div>

</div

JavaScript の場合:

$("#dashboard").igTileManager({
    rightPanelCols: 2,
    rightPanelTilesWidth: 100,
    rightPanelTilesHeight: 100,
    showSplitter: false    
});

コード例: アニメーション化されたトランジションの期間の構成

説明

この例は、コンテナーのサイズを変更しタイルを最小化または最大化するために igTileManager のアニメーション化されたトランジションを構成する方法を示します。

例では、2000 ミリ秒のアニメーション化されたトランジションを構成します。

コード

以下のコードはこの例を実装します。

JavaScript の場合:

$("#dashboard").igTileManager({
    animationDuration: 2000, 
    columnWidth: 250,
    columnHeight: 250
});

Ignite UI | ヘルプ トピック

igTileManager の構成

トピックの概要

目的

前提条件

このトピックの内容

igTileManager 構成の概要

igTileManager 構成の概要

igTileManager 構成の概要表

行数と列数の構成

関係するコード例:

各列の構成

関係するコード例:

項目の位置とスパンの構成

関係するコード例:

タイルの状態の構成

関係するコード例:

タイルの余白の構成

最小化されたタイル パネルの構成

関係するコード例:

アニメーション化されたトランジションの期間の構成

関係するコード例:

デフォルトの構成

コード例の概要

コード例の概要表

コード例: 特定の行数と列数の構成

説明

コード

コード例: 各列の構成

説明

コード

コード例: タイルの任意の位置とスパンの構成

説明

コード

コード例: タイル状態の構成

説明

コード

コード例: 最小化されたタイル パネルの構成

説明

コード

コード例: アニメーション化されたトランジションの期間の構成

説明

コード

関連コンテンツ

トピック

サンプル

Ignite UI | ヘルプトピック

最小化されたタイルパネルの構成

コード例: 最小化されたタイルパネルの構成