1. SPEAKの使用

チュートリアル: 検索ページの作成

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Select Mediaダイアログは、基本的な検索機能と、より高度な機能が多数ある検索ページの一例です。

ユーザーはさまざまな方法でダイアログを操作します。

  • 検索テキスト ボックスにテキスト ("Android" など) を入力すると、SearchDataSourceはこの検索語が表示される項目を取得します。この機能を作成するには、テキスト ボックスをSearchDatasourceにバインドし、データ ソースが取得するアイテムを表示するListControlを使用します。これは、SPEAK検索ページの基本機能です。

  • Mediaメニューのリンクを使用して、「すべての画像ファイル」、「すべての動画ファイル」、「マイ画像」、「最近アップロードした画像」、「最近更新した動画」、「最近更新した動画」のいずれかを選択します。この機能は、構成アイテムとHyperlinkButtonsGroupコントロールを使用して作成します。

  • 「巨大」なファイルのみを表示したり、「画像」のメディアタイプのみを表示したりするようにアイテムをフィルタリングします。これは、しばしば「ファセット分類」と呼ばれます。この機能は、FilterControlを使用して作成します。

このチュートリアルでは、次の方法について説明します。

基本的な検索機能を作成する

すべての検索ページには、項目を取得できるコンポーネントと項目を表示できるコントロールの2つのSPEAKコンポーネントが必要です。これはさまざまな方法で行うことができます。この例では、SearchDataSourceコンポーネントとListControlを使用します。

  1. SearchDataSourceコンポーネントをページレイアウトに追加し、次のように設定します。

    • RootItemIdプロパティを、取得するアイテムのルート フォルダーのSitecore IDに設定します。

      Select Mediaダイアログでは、このルートフォルダはmasterデータベース内のMedia Libraryフォルダです。Sitecore Rocksの現在のバージョンでは、RootItemIdプロパティ シート フィールドからこのフォルダーを参照することはできません (ダイアログ自体はrootデータベースにあります)。Sitecore Explorer (Sitecore Rocksの一部) でフォルダーのSitecore IDを見つけてコピーする必要があります。

    • Databaseプロパティを $context_contentdatabaseに設定します。

  2. ページにListControlを追加し、次のように構成します。

    • ViewModeプロパティをIconListに設定します。

    • ItemsプロパティをSearchDataSourceのItemsプロパティにバインドします : {Binding DataSource.Items}.

これは、SPEAKの検索ページの最小構成です。アイテムにThumbnailフィールドがある場合はサムネイルとして表示され、ない場合はアイコンとして表示されます。

考慮すべきこと

翻訳が必要な項目については、テキスト プロパティを個別の構成項目に移動することをお勧めします。

ListControlは、アイテムをアイコンリストとしてのみ表示できます。ただし、ListControlをカスタマイズして、他のビュー モードを指定できます。

検索テキストボックスを追加する

ユーザーは、Select Mediaダイアログのテキストボックスに検索語を入力し、Enterキーを押すか、検索アイコンをクリックして検索できます。

この機能は、次のように実装します。

  1. SearchPanelコンポーネントをページレイアウトに追加する。このコンポーネントは、ページを正しくレイアウトし、スタイルを設定するプレースホルダーを追加します。

  2. SearchPanelコンポーネントで、SearchesプレースホルダーにButtonTextBoxコントロールを追加します。

  3. Watermarkプロパティのテキストを指定します(例: 「検索条件を入力してください」)。ButtonTextBoxコントロールは、Textプロパティが空のときにこのテキストを表示します。

    • このテキストを翻訳する必要がない場合は、プロパティ シートのWatermarkプロパティの値として入力します。

    • このテキストを翻訳する必要がある場合は、ButtonTextBox Parametersテンプレートに基づいて構成アイテムを作成します。ButtonTextBoxコントロールのDataSourceプロパティでこの項目をポイントし、構成項目のWatermarkフィールドにテキストを入力します。

  4. ButtonImageUrlプロパティの値として /sitecore/shell/client/Speak/Assets/img/Speak/Common/16x16/dark_gray/search.pngを入力します。この画像は、テキスト ボックス自体の右側にある検索アイコンです。

  5. ButtonTextBoxコントロールのClickプロパティの値として、JavaScriptにjavascript:app.DataSource.refresh() を入力します。

    これにより、ユーザーがボタンをクリックするとSearchDataSourceが更新されるように指示されます。

  6. SearchDataSourceのTextプロパティをButtonTextBoxのTextプロパティにバインドするには、次のようにします。 {Binding ButtonTextBoxId.Text}。

メモ

Enterでデータ ソースの更新をトリガーするために、特別な操作を行う必要はありません。SPEAKは、これを実現するために必要なイベントの配線を提供します。この場合、SPEAKは配線について仮定を行わないため、Clickイベントの更新を手動でトリガーする必要があります。

メディアファイルのみを表示

SearchDataSourceは、既定で すべての 項目を取得します。ただし、SearchDataSourceが特定のテンプレートに基づいてのみアイテムを取得するように指定できます。

  1. SearchPanel Configテンプレートに基づいて構成アイテムを作成します。

  2. 構成項目で、Base Templatesフィールドを編集します。Sitecore Rocksの現在のバージョンでは、これを行うことはできません。コンテンツ エディターを使用して構成アイテムを見つけ、開きます。

  3. 「 Edit」をクリックし、必要なテンプレートを選択します。 Fileテンプレートを指定すると、SearchDataSourceはファイル項目を取得します。これにより、フォルダとサブフォルダの項目がフィルタリングされます。

    手記

    前の例では、Fileという2つのテンプレートがあります。1つはバージョン管理され、もう1つはバージョン管理されていません。これは、これらのテンプレートの両方を使用するアイテムがあるためです。

  4. Sitecore Rocksで、SearchDataSourceのEdit Rendering Propertiesダイアログを開きます。SearchConfigItemIdプロパティを手順1で作成した構成アイテムにポイントします。

FilterControlを使用する

このFilterControlを使用すると、ユーザーはファセットでアイテムをフィルタリングできます。 Select Mediaダイアログには、折りたたまれた状態のFilterControlが最初に表示されます。

FiltersToggleButtonをクリックすると、FilterControlが展開されます。

「ディメンション」、「メディアタイプ」、「アップロード日」は ファセットです。たとえば、ディメンション ファセットは、アイテムを "Medium" と "Small" の2つのセットにグループ化します。

ユーザーが 中 を選択すると、SearchDataSourceこのセット内のアイテムのみが取得されます。ユーザーが 今日 も選択した場合、SearchDataSourceは 中 セットと 今日 セットの両方にあるファイルを取得します。

ユーザーがどのファセットでもグループを選択していない場合、SearchDataSourceはすべてのアイテムを取得します。

レイアウトにSearchDataSourceコンポーネントがある場合は、次の方法でファセット機能を作成できます。

  1. ファセットのPage Settings項目の下に、フォルダーを追加します。このフォルダで必要な各ファセットのFacetテンプレートに基づいてアイテムを作成します。

  2. FieldNameフィールドで、アイテムの基になっているテンプレート内のフィールドの名前を指定します。Sitecoreは、このフィールドの値を使用してアイテムをグループ化します。

    手記

    注意点 – 指定したフィールドにアイテム間で多くの異なる値がある場合、ファセットはあまり役に立ちません。値が比較的小さなセットに属するフィールドを使用するのが最適です。たとえば、Select Mediaダイアログでは、Media TypeファセットはTemplateNameフィールドを使用してアイテムをグループ化します。

  3. SearchDataSourceコンポーネントのFacetsRootItemIdプロパティを、Facet項目を作成したフォルダにポイントします。

  4. レイアウトにFilterControlコントロールを追加し、このコントロールのFacetsプロパティをSearchDataSourceコンポーネントのFacetsプロパティにバインドします。

  5. SearchDataSourceコンポーネントのSelectedFacetsプロパティをFilterControlコントロールのSelectedFacetsプロパティにバインドします。

ToggleButtonを追加して、FilterControlを開いたり閉じたりします

Facetsは常に開いたままにしておくことができます。ただし、Select Mediaダイアログには、ユーザーがFacetsを開いたり折りたたんだりできるToggleButtonコントロールがあります。トグルボタンを追加するには:

  1. レイアウトにToggleButtonコントロールを追加します。

    このボタンには、SearchPanelコントロールのFiltersプレースホルダーを使用します。

  2. ToggleButtonコントロールを構成します。

    • ButtonTypeプロパティをDefaultに設定します。

    • IsEnabledプロパティをSearchDataSourceコントロールのhasItemsメンバーにバインドします。

      つまり、SPEAKは、SearchDataSourceに0個のアイテム>場合にのみToggleButtonを表示します。

    • ShowArrowプロパティを1に設定します。

      ToggleButtonには、ボタンのトグル状態を示す矢印が表示されます。

    • 次のJavaScriptをToggleButtonコントロールのClickプロパティに追加します。

      javascript:app.FilterControl.toggle()

      ユーザーがTogleButtonコントロールをクリックすると、JavaScriptによって折りたたまれた状態と展開された状態の間でFilterControlが切り替わります。

HyperlinkButtonsGroupを作成する

Select Mediaダイアログには、「メディア」というメニューがあります。このメニューには、「すべての画像ファイル」、「すべてのビデオファイル」などの一連のビューへのリンクがあります。リンクはHyperlinkButtonGroupコントロールのHyperlinkButton項目として作成し、ビューは検索構成項目として作成します。

  1. ビューごとに検索設定項目を作成します。

  2. PageSettingsの下にフォルダーを作成し、このフォルダー内のビューごとにHyperlinkButtonアイテムを作成します。

  3. HyperlinkButton項目を次のように構成します。

    • Textフィールドにリンクのテキストを指定します (例: 「すべてのビデオ ファイル」)。

    • SearchDataSourceコンポーネントのSearchConfigItemIdプロパティを変更するJavaScriptをClickフィールドに指定します。例えば：set:DataSource({"searchConfig": "{378D67C9-279A-4FBB-AB43-52EC07034FE8}"})

  4. HyperlinksButtonGroupコンポーネントをページレイアウトに追加し、このコンポーネントのDataSourceプロパティで、HyperlinkButtonアイテムを作成したフォルダを指定します。

この記事を改善するための提案がある場合は、 お知らせください!