コンテンツフラグメントのオーサリング

前の章次の 5 つのコンテンツフラグメントモデルを作成しました。担当者、チーム、場所、住所、連絡先情報。 この章では、これらのモデルに基づいてコンテンツフラグメントを作成する手順について説明します。 また、フォルダーポリシーを作成して、フォルダーで使用できるコンテンツフラグメントモデルを制限する方法についても説明します。

前提条件

このドキュメントは、マルチパートチュートリアルの一部です。 次の項目を 前の章 は、この章の前に完了しています。

目的

この章では、以下の方法について説明します。

  • フォルダーポリシーを使用したフォルダーの作成と制限の設定
  • コンテンツフラグメントエディターからフラグメント参照を直接作成する
  • タブ、日付、JSON オブジェクトのデータ型を使用する
  • 複数行テキストエディターにコンテンツおよびフラグメント参照を挿入する
  • 複数のフラグメント参照を追加
  • コンテンツフラグメントをネスト

サンプルコンテンツをインストール

チュートリアルを高速化するために使用する、いくつかのフォルダーとサンプル画像を含むAEMパッケージをインストールします。

  1. ダウンロード Advanced-GraphQL-Tutorial-Starter-Package-1.1.zip

  2. AEMで、に移動します。 ツール > 導入 > パッケージ アクセスする パッケージマネージャー.

  3. 前の手順でダウンロードしたパッケージ(zip ファイル)をアップロードしてインストールします。

    パッケージマネージャーを介してアップロードされたパッケージ

フォルダーポリシーを使用したフォルダーの作成と制限の設定

AEMホームページで、「 」を選択します。 Assets > ファイル > WKND 共有 > 英語. ここでは、Adventures や Contributors など、様々なコンテンツフラグメントカテゴリを確認できます。

フォルダーの作成

次に移動: 冒険 フォルダー。 チームとロケーションのフォルダが、チームとロケーションのコンテンツフラグメントを格納するために既に作成されていることを確認できます。

ユーザーコンテンツフラグメントモデルに基づいて、インストラクターコンテンツフラグメント用のフォルダーを作成します。

  1. 「アドベンチャー」ページで、「 作成 > フォルダー をクリックします。

    フォルダーを作成

  2. 表示されるフォルダーを作成モーダルに、 タイトル フィールドに入力します。 最後の「s」に注意してください。 多数のフラグメントを含むフォルダーのタイトルは複数にする必要があります。 「作成」を選択します。

    フォルダーモーダルを作成

    これで、アドベンチャーインストラクターを格納するフォルダーが作成されました。

フォルダーポリシーを使用した制限の設定

AEMでは、コンテンツフラグメントフォルダーの権限とポリシーを定義できます。 権限を使用すると、特定のユーザー(作成者)または作成者のグループに対してのみ、特定のフォルダーへのアクセスを許可できます。 フォルダーポリシーを使用すると、作成者がそれらのフォルダーで使用できるコンテンツフラグメントモデルを制限できます。 この例では、フォルダーを「Person」モデルと「Contact Info」モデルに制限します。 フォルダーポリシーを設定するには:

  1. を選択します。 講師 作成したフォルダーを選択し、「 プロパティ 上部ナビゲーションバーから。

    プロパティ

  2. を選択します。 ポリシー 「 」タブをクリックし、選択を解除します。 /content/dam/wknd-shared から継承. 内 許可されているコンテンツフラグメントモデル(パス別) 「 」フィールドで、フォルダーアイコンを選択します。

    フォルダーアイコン

  3. 開いたパスを選択ダイアログで、パスに従います。 conf > WKND 共有. 前の章で作成した人物コンテンツフラグメントモデルには、連絡先情報コンテンツフラグメントモデルへの参照が含まれています。 Instructor コンテンツフラグメントを作成するには、Instructors フォルダーで Person モデルと Contact Info モデルの両方を許可する必要があります。 選択 人物 および 連絡先情報​をクリックし、 選択 をクリックしてダイアログを閉じます。

    パスを選択

  4. 選択 保存して閉じる を選択し、 OK が表示される成功ダイアログ。

  5. これで、Instructors フォルダのフォルダポリシーが設定されました。 次に移動: 講師 フォルダーと選択 作成 > コンテンツフラグメント. 選択できるモデルは次のとおりです。 人物 および 連絡先情報.

    フォルダーポリシー

講師向けコンテンツフラグメントの作成

次に移動: 講師 フォルダー。 ここから、講師の連絡先情報を格納するネストされたフォルダを作成します。

次の項で説明されている手順に従います: フォルダの作成 をクリックして、「Contact Info」という名前のフォルダを作成します。 ネストされたフォルダーは、親フォルダーのフォルダーポリシーを継承します。 より具体的なポリシーを設定し、新しく作成したフォルダーでは連絡先情報モデルのみを使用できます。

インストラクターコンテンツフラグメントの作成

アドベンチャーインストラクターのチームに追加できる 4 人の人を作成します。

  1. Instructors フォルダーから、Person コンテンツフラグメントモデルに基づいてコンテンツフラグメントを作成し、「Jacob Wester」というタイトルを付けます。

    新しく作成されたコンテンツフラグメントは次のようになります。

    担当者コンテンツフラグメント

  2. 次のコンテンツをフィールドに入力します。

    • 氏名:ジェイコブウェスター
    • 伝記:ジェイコブ・ウェスターは 10 年間ハイキング講師を務め、1 分 1 秒 1 秒を愛してきました! ヤコブはロッククライミングとバックパッキングの才能を持つ冒険を求める人です。 ジャコブは、湾の巨石競争の戦いを含む登山競技の勝者です。 ジェイコブは現在カリフォルニアに住んでいます。
    • 講師の経験レベル:エキスパート
    • スキル:ロッククライミング、サーフィン、バックパッキン
    • 管理者の詳細:ジェイコブ・ウェスターは、3 年間、バックパッキングの冒険を調整してきました。
  3. プロファイル画像 フィールドで、画像にコンテンツ参照を追加します。 参照先 WKND 共有 > 英語 > 寄稿者 > jacob_wester.jpg をクリックして、画像へのパスを作成します。

コンテンツフラグメントエディターからフラグメント参照を作成する

AEMでは、コンテンツフラグメントエディターから直接フラグメント参照を作成できます。 Jacob の連絡先情報への参照を作成します。

  1. 選択 新しいコンテンツフラグメント 以下 連絡先情報 フィールドに入力します。

    新しいコンテンツフラグメント

  2. 「新規コンテンツフラグメント」モーダルが開きます。 「宛先を選択」タブで、パスに従います。 冒険 > 講師 をクリックし、 連絡先情報 フォルダー。 選択 次へ をクリックして「プロパティ」タブに進みます。

    新しいコンテンツフラグメントモーダル

  3. [ プロパティ ] タブで、[ タイトル フィールドに入力します。 選択 作成​をクリックし、 開く が表示される成功ダイアログ。

    「プロパティ」タブ

    連絡先情報コンテンツフラグメントを編集できる新しいフィールドが表示されます。

    連絡先情報コンテンツフラグメント

  4. 次のコンテンツをフィールドに入力します。

    • 電話:209-888-0000
    • 電子メール:jwester@wknd.com

    完了したら、「 」を選択します。 保存. これで、連絡先情報コンテンツフラグメントが作成されました。

  5. インストラクターコンテンツフラグメントに戻るには、「 」を選択します。 ジェイコブウェスター をクリックします。

    元のコンテンツフラグメントに戻る

    この 連絡先情報 フィールドに、参照される連絡先情報フラグメントへのパスが含まれるようになりました。 これはネストされたフラグメント参照です。 完成したインストラクターコンテンツフラグメントは、次のようになります。

    Jacob Wester コンテンツフラグメント

  6. 選択 保存して閉じる をクリックして、コンテンツフラグメントを保存します。 これで、新しいインストラクターコンテンツフラグメントが作成されました。

追加のフラグメントを作成する

手順は、 前のセクション これらのインストラクター用に、さらに 3 つのインストラクターコンテンツフラグメントと 3 つの連絡先情報コンテンツフラグメントを作成します。 以下のコンテンツを Instructors フラグメントに追加します。

ステイシーロズウェルズ

フィールド
コンテンツフラグメントのタイトル ステイシーロズウェルズ
フルネーム ステイシーロズウェルズ
Contact Info /content/dam/wknd-shared/en/adventures/instructors/contact-info/stacey-roswells-contact-info
プロファイル画像 /content/dam/wknd-shared/en/contributors/stacey-roswells.jpg
伝記 ステイシー・ロズウェルズは、ロッククライマーと高山の冒険家です。 メリーランド州ボルチモア生まれのステイシーは 6 人の子供の末っ子です。 ステイシーの父は米国海軍の中佐で、母は現代のダンス・インストラクターでした。 ステイシーの家族は父親の職務を頻繁に引き受け、父がタイに駐留していた時に最初の写真を撮りました。 ここでは、ステイシーが岩登りを学びました。
講師の経験レベル 詳細
スキル ロッククライミング

クマールセルバラジ

フィールド
コンテンツフラグメントのタイトル クマールセルバラジ
フルネーム クマールセルバラジ
連絡先情報 /content/dam/wknd-shared/en/adventures/instructors/contact-info/kumar-selvaraj-contact-info
プロファイル画像 /content/dam/wknd-shared/en/contributors/kumar-selvaraj.jpg
伝記 Kumar Selvaraj は、経験豊富な AMGA 認定プロの講師で、学生の登山やハイキングのスキルを向上させることを主な目的としています。
講師の経験レベル 詳細
スキル ロッククライミング

小郡西伝

フィールド
コンテンツフラグメントのタイトル 小郡西伝
フルネーム 小郡西伝
連絡先情報 /content/dam/wknd-shared/en/adventures/instructors/contact-info/ayo-ogunseinde-contact-info
プロファイル画像 /content/dam/wknd-shared/en/contributors/ayo-ogunseinde-237739.jpg
伝記 小楠亜代さんは、中部カリフォルニア州フレズノに住むプロの登山家で、バックパッキング講師です。 アヨの目標は、ハイカーたちを最も壮大な国立公園の冒険に導くことです。
講師の経験レベル 詳細
スキル ロッククライミング

追加情報 フィールドが空です。

連絡先情報フラグメントに次の情報を追加します。

コンテンツフラグメントのタイトル 電話 電子メール
Stacey Roswells 連絡先情報 209-888-0011 sroswells@wknd.com
Kumar Selvaraj 連絡先情報 209-888-0002 kselvaraj@wknd.com
小郡西院亜代連絡先情報 209-888-0304 aogunseinde@wknd.com

これで、チームを作成する準備が整いました。

場所のコンテンツフラグメントのオーサリング

次に移動: 場所 フォルダー。 ここには、既に作成済みのネストされた 2 つのフォルダーが表示されます。ヨセミテ国立公園とヨセミテバレーロッジ

場所フォルダー

今のところ、Yosemite Valley Lodge フォルダーは無視してください。 このセクションの後半で、講師チームのホームベースとして機能するロケーションを作成する際に、このセクションに戻ります。

次に移動: ヨセミテ国立公園 フォルダー。 現在はヨセミテ国立公園の写真のみ。 場所コンテンツフラグメントモデルを使用してコンテンツフラグメントを作成し、「Yosemite National Park」というタイトルを付けてみましょう。

タブプレースホルダー

AEMでは、タブプレースホルダーを使用して、様々な種類のコンテンツをグループ化し、コンテンツフラグメントを読みやすく管理しやすくすることができます。 前の章では、[ 位置 ] モデルにタブのプレースホルダを追加しました。 その結果、場所コンテンツフラグメントには次の 2 つのタブセクションが追加されました。 場所の詳細 および 場所の住所.

タブのプレースホルダー

この 場所の詳細 タブには、 名前, 説明, 連絡先情報, 場所の画像、および シーズン別の天気 フィールド 場所の住所 タブには、アドレスコンテンツフラグメントへの参照が含まれています。 タブを使用すると、入力する必要のあるコンテンツの種類が明確になるので、コンテンツの作成が管理しやすくなります。

JSON オブジェクトのデータ型

この シーズン別の天気 フィールドは JSON オブジェクトのデータ型です。つまり、JSON 形式のデータを受け入れます。 このデータ型は柔軟で、コンテンツに含める任意のデータに使用できます。

前の章で作成したフィールドの説明を表示するには、フィールドの右側の情報アイコンにマウスポインターを置きます。

JSON オブジェクト情報アイコン

この場合、ロケーションの平均天気を指定する必要があります。 次のデータを入力します。

{
    "summer": "81 / 89°F",
    "fall": "56 / 83°F",
    "winter": "46 / 51°F",
    "spring": "57 / 71°F"
}

この シーズン別の天気 フィールドは次のようになります。

JSON オブジェクト

コンテンツを追加

次の章では、GraphQL で情報を照会するために、残りのコンテンツを場所のコンテンツフラグメントに追加します。

  1. 場所の詳細 「 」タブで、次の情報をフィールドに入力します。

    • 名前:ヨセミテ国立公園
    • 説明:ヨセミテ国立公園はカリフォルニアのシエラネバダ山脈にあります。 豪華な滝や巨大なセコイアの木、エルキャピタンとハーフドームの崖の象徴的な景色で有名です。 ハイキングとキャンプはヨセミテを体験する最良の方法です。 多くのトレイルは、冒険や探検の無限の機会を提供します。
  2. 次の 連絡先情報 「 」フィールドで、連絡先情報モデルに基づいてコンテンツフラグメントを作成し、「Yosemite National Park Contact Info」というタイトルを付けます。 前の節で説明した手順と同じ手順に従います。 エディターからのフラグメント参照の作成 次のデータをフィールドに入力します。

    • 電話:209-999-0000
    • 電子メール:yosemite@wknd.com
  3. 次の 場所の画像 フィールド、参照先 冒険 > 場所 > ヨセミテ国立公園 > yosemite-national-park.jpeg をクリックして、画像へのパスを作成します。

    前の章では、画像の検証を設定し、場所画像のサイズは 2560 x 1800 未満、ファイルサイズは 3 MB 未満にする必要があります。

  4. すべての情報が追加された状態で、 場所の詳細 タブは次のように表示されます。

    「場所の詳細」タブが完了しました

  5. 次に移動: 場所の住所 タブをクリックします。 次の 住所 「 」フィールドで、前の章で作成したアドレスコンテンツフラグメントモデルを使用して、「Yosemite National Park Address」というタイトルのコンテンツフラグメントを作成します。 次のセクションで説明した手順と同じです。 エディターからのフラグメント参照の作成 次のデータをフィールドに入力します。

    • 住所:9010 カレービレッジドライブ
    • 市区町村:ヨセミテバレー
    • 都道府県:CA
    • 郵便番号:95389
    • :米国
  6. 完了 場所の住所 ヨセミテ国立公園フラグメントのタブは、次のようになります。

    「場所の住所」タブが完了しました

  7. 保存して閉じる」を選択します。

フラグメントをさらに 1 つ作成

  1. 次に移動: ヨセミテバレーロッジ フォルダー。 場所コンテンツフラグメントモデルを使用してコンテンツフラグメントを作成し、「Yosemite Valley Lodge」というタイトルを付けます。

  2. 場所の詳細 「 」タブで、次の情報をフィールドに入力します。

    • 名前:ヨセミテバレーロッジ
    • 説明:ヨセミテバレーロッジは、グループミーティングや、ショッピング、食事、釣り、ハイキングなど、様々なアクティビティのハブです。
  3. 次の 連絡先情報 「 」フィールドで、連絡先情報モデルに基づいてコンテンツフラグメントを作成し、「Yosemite Valley Lodge Contact Info」というタイトルを付けます。 次のセクションで説明した手順と同じです。 エディターからのフラグメント参照の作成 新しいコンテンツフラグメントのフィールドに次のデータを入力します。

    • 電話:209-992-0000
    • 電子メール:yosemitelodge@wknd.com

    新しく作成したコンテンツフラグメントを保存します。

  4. に戻ります。 ヨセミテバレーロッジ そして、 場所の住所 タブをクリックします。 次の 住所 「 」フィールドで、前の章で作成したアドレスコンテンツフラグメントモデルを使用して、「Yosemite Valley Lodge Address」というタイトルのコンテンツフラグメントを作成します。 次のセクションで説明した手順と同じです。 エディターからのフラグメント参照の作成 次のデータをフィールドに入力します。

    • 住所:9006 ヨセミテロッジドライブ
    • 市区町村:ヨセミテ国立公園
    • 都道府県:CA
    • 郵便番号:95389
    • :米国

    新しく作成したコンテンツフラグメントを保存します。

  5. に戻ります。 ヨセミテバレーロッジ​を選択し、「 保存して閉じる. この ヨセミテバレーロッジ フォルダーに 3 つのコンテンツフラグメントが含まれるようになりました。ヨセミテバレーロッジ、ヨセミテバレーロッジ連絡先情報、ヨセミテバレーロッジロッジアドレス。

    ヨセミテバレーロッジフォルダー

チームコンテンツフラグメントを作成する

フォルダーの参照先 チーム > ヨセミテチーム. 現在、Yosemite チームフォルダにはチームロゴのみが含まれています。

Yosemite チームフォルダー

チームコンテンツフラグメントモデルを使用してコンテンツフラグメントを作成し、「Yosemite Team」というタイトルを付けてみましょう。

複数行テキストエディターでのコンテンツとフラグメントの参照

AEMでは、コンテンツとフラグメント参照を複数行テキストエディターに直接追加し、GraphQL クエリを使用して後で取得することができます。 コンテンツとフラグメントの参照を 説明 フィールドに入力します。

  1. まず、次のテキストを 説明 フィールド:「ヨセミテ国立公園で働くプロの冒険者やハイキング講師のチーム」

  2. コンテンツ参照を追加するには、 アセットを挿入 複数行テキストエディターのツールバーにあるアイコン。

    アセット挿入アイコン

  3. 表示されるモーダルで、「 」を選択します。 team-yosemite-logo.png を押します。 選択.

    画像を選択

    コンテンツ参照が 説明 フィールドに入力します。

前の章では、フラグメント参照を 説明 フィールドに入力します。 ここに 1 つ追加しましょう。

  1. を選択します。 コンテンツフラグメントを挿入 複数行テキストエディターのツールバーにあるアイコン。

    コンテンツフラグメントを挿入アイコン

  2. 参照先 WKND 共有 > 英語 > 冒険 > 場所 > ヨセミテバレーロッジ > ヨセミテバレーロッジ. 押す 選択 をクリックして、コンテンツフラグメントを挿入します。

    コンテンツフラグメントを挿入モーダル

    この 説明 フィールドは次のようになります。

    説明フィールド

これで、コンテンツとフラグメントの参照を複数行テキストエディターに直接追加しました。

日付と時刻のデータタイプ

日付と時刻のデータタイプを見てみましょう。 を選択します。 カレンダー アイコン チームの創設日 フィールドを使用して、カレンダービューを開きます。

日付のカレンダー表示

月の両側にある進む矢印と戻る矢印を使用して、過去または将来の日付を設定できます。 例えば、ヨセミテチームが 2016 年 5 月 24 日に設立されたので、その日を設定します。

複数のフラグメント参照を追加

「チームメンバー」フラグメント参照にインストラクターを追加します。

  1. 選択 追加チームメンバー フィールドに入力します。

    追加ボタン

  2. 表示される新しいフィールドで、フォルダーアイコンを選択して、「パスを選択」モーダルを開きます。 フォルダーを参照して次を実行 WKND 共有 > 英語 > 冒険 > 講師​を選択し、次にの横にあるチェックボックスを選択します。 ヤコブウェスター. 押す 選択 パスを保存します。

    フラグメント参照パス

  3. を選択します。 追加 ボタンを 3 回追加します。 新しいフィールドを使用して、残りの 3 人のインストラクターをチームに追加します。 この チームメンバー フィールドは次のようになります。

    チームメンバーフィールド

  4. 選択 保存して閉じる をクリックして、チームコンテンツフラグメントを保存します。

アドベンチャーコンテンツフラグメントにフラグメント参照を追加する

最後に、新しく作成したコンテンツフラグメントをアドベンチャーに追加します。

  1. に移動します。 冒険 > ヨセミテバックパッキン Yosemite Backpacking Content Fragment を開きます。 フォームの下部に、前の章で作成した 3 つのフィールドが表示されます。 場所, 講師チーム、および 管理者.

  2. フラグメント参照を 場所 フィールドに入力します。 場所のパスは、作成した Yosemite National Park コンテンツフラグメントを参照する必要があります。 /content/dam/wknd-shared/en/adventures/locations/yosemite-national-park/yosemite-national-park.

  3. フラグメント参照を 講師チーム フィールドに入力します。 チームパスは、作成した Yosemite チームコンテンツフラグメントを参照する必要があります。 /content/dam/wknd-shared/en/adventures/teams/yosemite-team/yosemite-team. これはネストされたフラグメント参照です。 チームコンテンツフラグメントには、連絡先情報モデルと住所モデルを参照する人物モデルへの参照が含まれています。 したがって、コンテンツフラグメントは 3 レベル下にネストされます。

  4. フラグメント参照を 管理者 フィールドに入力します。 Jacob Wester が Yosemite Backpacking Adventure の管理者だとします。 このパスは、Jacob Wester コンテンツフラグメントに続き、次のように表示されます。 /content/dam/wknd-shared/en/adventures/instructors/jacob-wester.

  5. アドベンチャーコンテンツフラグメントに 3 つのフラグメント参照を追加しました。 フィールドは次のようになります。

    アドベンチャーフラグメントリファレンス

  6. 選択 保存して閉じる コンテンツを保存します。

おめでとうございます。

おめでとうございます。これで、前の章で作成した高度なコンテンツフラグメントモデルに基づいて、コンテンツフラグメントを作成しました。 また、フォルダー内で選択できるコンテンツフラグメントモデルを制限するフォルダーポリシーを作成しました。

次の手順

次の章では、GraphiQL 統合開発環境 (IDE) を使用して高度な GraphQL クエリを送信する方法について説明します。 これらのクエリを使用すると、この章で作成したデータを表示し、最終的にこれらのクエリを WKND アプリに追加できます。

このページ