1. SPEAKの利用

攻略

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

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

このトピックでは、SPEAKで簡単なページを作成する方法について説明します。結果としては基本的な「Hello World」ページになりますが、ここで説明する手順は、あらゆるSPEAKページやアプリケーションを作成するための基礎となります。

!注SPEAKでページを作成するには、Visual Studio用のSitecore Rocksをインストールする必要があります。

SPEAKはcoreデータベースに記載されていることを忘れないでください。

既存のページをコピーして新しいSPEAKページを作成すべきではありません。非常にシンプルなページにはうまくいきますが、より高度なページでは、更新すべきすべての設定を特定するのが難しいです。

ウォークスルーでは以下の方法が説明されています:

  • 定義項目を作成する
  • ページのレイアウトをセットアップします
  • ブラウザでページを見る

ウォークスルーでは分岐テンプレートの使い方がわかります。これが定義項目を作成する最も速い方法です。

定義項目を作成する

Sitecore Rocksでは以下の手順に従ってください:

  1. 新しい定義項目の親項目にしたい項目を選択します:

    7592336BFCFD46558A8EEAE0A9CC4001.png
  2. 親アイテムを右クリックしてメニューで 「追加、新しいアイテム 」をクリック(または

    ctrl-A

    キーボードショートカット)

    4DD235F5D52B41C7B2E53FE359893304.png
  3. 「 新しいアイテムを追加 」ダイアログで、/sitecore/client/Business Component LIbarary/Templates/Branches/Applicationsフォルダ内のページテンプレートのブランチのいずれかを選択します:

    406C7AC025CB461EB12B566EF1B27739.png
  4. 新しい商品の名前を入力し、OKをクリックします。

アイテムが作成され、開封されます:

B539D23D20B9456C97809D84F6D62A4B.png
5BF3BA1B9CE14BA3BBF3B7E44DC886DB.png

今、ブランチテンプレートからページを作成しました。次の作業は、このページのレイアウトにコンポーネントを追加することです。

ページのレイアウトをセットアップします

Sitecore Rocksでは、レイアウトにコンポーネントを追加するには以下の手順に従ってください:

  1. Sitecore Explorerで、関連する定義項目を探します。

  2. アイテムを右クリックしてメニューから 「タスク」「デザインレイアウト 」をクリック(または

    Ctrl-U

    キーボードショートカット)。

    D980831FFC2743F9818C73555E131177.png
  3. 定義項目のレイアウトで「 レンダリングを追加」をクリックします。

    B8D3B59AF5F1403BB297ABDEB7B21BDD.png

    ブランチテンプレートから始めたため、レイアウトにはすでにいくつかのコンポーネントが存在します。レイアウトには機能的なSPEAKページに必要なすべての要素が含まれています。

  4. レンダリング を選択する ダイアログで「 テキスト」を選択し、その後クリックします

    7C112A7D6106415689A1E368D3095D60.png

    テキストレンダリングは今、あなたのレイアウトに「Text1」という名前で表示されています。

  5. レイアウト内のText1レンダリングをダブルクリックし、レンダリング用のプロパティシートのTextプロパティに「Hello world」を入力してください。

  6. プロパティシートで 「閉じる」 をクリックしてすべて保存します。

これで「Hello world」というテキストが表示されるSPEAKページができた。

ブラウザでページを見る

ブラウザでページをプレビューするには:

  1. ウェブサイトをブラウザで開いてください。

  2. Sitecore RocksのSitecoreエクスプローラーで定義項目を右クリックし、「 クリップボード、アイテムパスをコピー」をクリックしてください:

    EB16F04305F548E88A8DB60C3216E859.png
  3. クリップボードの内容をブラウザのアドレス欄に貼り付けます。

    C218447872DB487AAF003C4BB161DF22.png

    更新されたページはブラウザに表示されます。

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