Livefyre との統合

Livefyre の業界最高レベルのキュレーション機能を AEM 6.4 と統合する方法を説明します。これにより、ソーシャルネットワークからの有用なユーザー生成コンテンツ（UGC）をサイトに数分で公開できます。

はじめに

AEM 用 Livefyre パッケージのインストール

AEM 6.4 には、Livefyre 機能パッケージ 1.2.6 がプリインストールされています。このパッケージには Livefyre の AEM Sites との統合のみが含まれているので、更新パッケージをインストールする前に、まずアンインストールする必要があります。最新のパッケージでは、Sites、Assets および Commerce を含む、Livefyre と AEM の完全な統合を利用できます。

1. AEMのホームページから、左側のレールの​ツール​アイコンをクリックします。

2. 展開/パッケージ​に移動します。

3. パッケージマネージャーで、プリインストールされたLivefyre機能パッケージが表示されるまでスクロールし、パッケージタイトル​cq-social-livefyre-pkg-1.2.6.zip​をクリックしてオプションを展開します。

4. その他/​のアンインストールをクリックします。

   

5. ソフトウェア配布からLivefyreパッケージをダウンロードします。

6. パッケージマネージャーから、ダウンロードしたパッケージをインストールします。 AEMでのソフトウェア配布とパッケージの使用方法については、パッケージの使い方を参照してください。

   

   Livefyre-AEM パッケージがインストールされます。統合機能を使い始める前に、Livefyre を使用するように AEM を設定する必要があります。

   機能パックの詳細およびリリースノートについては、「機能パック」を参照してください。

Livefyreを使用するようにAEMを設定します。構成フォルダーの作成

1. AEMのホームページから、左のナビゲーションバーの​ツール​アイコンをクリックし、一般/設定ブラウザー​に移動します。

   • 詳しくは、設定ブラウザーのドキュメントを参照してください。

2. 「作成」をクリックして、設定を作成ダイアログを開きます。

3. 設定に名前を付け、「クラウド設定」チェックボックスをオンにします。

   これにより、ツール/デプロイメント/Livefyre設定​の下に、指定した名前のフォルダーが作成されます。

   

Livefyre を使用するための AEM の設定：Livefyre 設定 の作成

組織の Livefyre ライセンス資格情報を使用するように AEM を設定して、Livefyre と AEM の間で通信できるようにします。

1. AEMのホームページから、左のナビゲーションバーの​ツール​アイコンをクリックし、デプロイメント/Livefyre設定​に移動します。

2. 新しい Livefyre 設定を作成する設定フォルダーを選択して、「作成」をクリックします。

   

   メモ

   Livefyreの設定をフォルダーに追加する前に、フォルダーのプロパティでクラウド設定を有効にする必要があります。 設定フォルダーが作成され、設定ブラウザーで管理されます。

   設定の名前は作成できません。フォルダーのパスによって参照されます。設定はフォルダーごとに 1 つのみです。

   詳しくは、設定ブラウザーのドキュメントを参照してください。

3. 新しく作成した Livefyre 設定カードを選択して、「プロパティ」をクリックします。

   

4. 組織のLivefyre資格情報を入力し、OK​をクリックします。

   

   この情報にアクセスするには、Livefyre studioを開き、設定/統合設定/秘密鍵証明書​に移動します。

   Livefyre を使用するように AEM インスタンスが設定され、統合機能を使用できます。

シングルサインオン統合のカスタマイズ

AEM 用 Livefyre パッケージには、AEM Communities プロファイルと Livefyre の SSO サービス間の標準の統合が含まれています。

ユーザーは、AEM サイトにログインすることで、Livefyre ソーシャルコンポーネントにもログインします。ログアウトしたユーザーが、写真のアップロードなど、認証が必要な Livefyre コンポーネント機能を使用しようとすると、Livefyre コンポーネントがユーザー認証を開始します。

デフォルトの認証統合は、すべてのサイトに対して完璧なわけではありません。サイトテンプレートの認証フローに完全に合致させるために、ニーズに合わせてデフォルトの Livefyre Authentication Delegate を上書きすることができます。次の手順を実行します。

1. CRXDE Liteを使用して、/libs/social/integrations/livefyre/components/authorizablecomponent/authclientlib​を​/apps/social/integrations/livefyre/components/authorizablecomponent/authclientlib​にコピーします。

2. /apps/social/integrations/livefyre/components/authorizablecomponent/authclientlib/auth.js​を編集して保存し、ニーズに合ったLivefyre認証委任を実装します。

   認証委任のカスタマイズの詳細については、ID統合を参照してください。

   AEM Clientlibsの詳細については、クライアント側ライブラリの使用を参照してください。

AEM Sites での Livefyre の使用

Livefyre コンポーネントのページへの追加

Livefyre コンポーネントを Sites 内のページに追加する前に、Livefyre クラウド設定を親ページから継承するか、設定をページに直接追加することで、ページ用の Livefyre を有効にする必要があります。サイトのクラウドサービスの追加方法について、実装を参照します。

ページ用に Livefyre が有効になったら、Livefyre コンポーネントを許可するようにコンテナを設定する必要があります。様々なコンポーネントを有効にする方法については、デザインモードでのコンポーネントの設定を参照してください。

1. デザインモードの​コンポーネント​サイドパネルから、メニューから​Livefyre​を選択して、使用可能なLivefyreコンポーネントにリストを制限します。

   

2. Livefyre コンポーネントを選択して、ページ上の位置にドラッグします。

3. 新しい Livefyre アプリを作成するか、既存のアプリを埋め込むかを選択します。

   既存のアプリを埋め込む場合、アプリを選択するように促されます。新しいアプリを作成する場合、アプリは、コンテンツが表示される前に設定しておく必要があります。アプリは、Livefyre サイト、およびページ用に Livefyre クラウド設定を有効にした際に選択したネットワークに作成されます。

   コンポーネントの挿入について詳しくは、「ページコンテンツの編集」を参照してください。

AEMページ用のLivefyreコンポーネントの編集を参照してください。

Livefyre コンポーネントは、Livefyre Studio でのみ設定および編集できます。AEM で次の手順を実行します。

1. 設定する Livefyre コンポーネントをクリックします。
2. 設定​アイコン（レンチ）をクリックして、設定ダイアログを開きます。
3. このコンポーネントを編集するには、Livefyre Studio​に移動します。
4. Livefyre Studio でアプリを編集します。

AEM Assets での Livefyre の使用

権限のリクエストと AEM Assets への UGC の読み込み

UGC Importer を使用して、Twitter および Instagram ユーザー生成コンテンツ（UGC）を Livefyre Studio から AEM Assets に読み込むことができます。読み込むコンテンツを選択したら、読み込みを完了する前に、コンテンツに対する権限をリクエストする必要があります。

UGC を AEM Assets に読み込むには：

1. AEMのホームページから、アセット/ファイル​に移動します。

2. 「作成」をクリックし、「UGCを読み込み」をクリックします。

   

3. 次の方法でコンテンツを見つけます。

   • Livefyre からコンテンツを見つけるには、「UGC ライブラリ」タブをクリックします。フィルターおよび検索を使用して UGC ライブラリからコンテンツを見つけます。
   • Twitter および Instagram からコンテンツを見つけるには、「Twitter」または「Instagram」タブをクリックします。検索またはフィルターを使用してコンテンツを見つけます。

4. 読み込むアセットを選択します。選択したアセットは自動的にカウントされ、選択済み​タブに保存されます。

5. オプション:「 ​​選択済み」タブをクリックし、読み込むUGCコンテンツを確認します。

6. 「次へ」をクリックします。

   

7. 権限リクエストについて、各アセットに対して次のいずれかのオプションを選択します。

   Instagram の場合：

   • 手動要求 権を使用して、コピー&ペーストできるメッセージを取得し、Instagram経由でコンテンツ所有者に手動で送信できます。
   • 手動でコンテンツ 権限を属性付けして、個々のアセットの権限を上書きします。
   メモ

   非ビジネスユーザーアカウントからのコンテンツの集計に影響する更新により、お客様に代わってコメントを投稿したり、作成者からの返信を自動的に確認したりすることはできません。 詳しくは、ここをクリックしてください。

   

   Twitter の場合

   • 作成者へメッセージ：コンテンツ所有者に、アセットに対する権限をリクエストするメッセージを送信します。
   • 手動でコンテンツ 権限を属性付けして、個々のアセットの権限を上書きします。

8. 「読み込み」をクリックします。

   Twitter の権限リクエストを送信する場合、コンテンツ所有者には、自身のアカウント上に権限リクエストメッセージが表示されます。

   

   メモ

   Twitter には、同じアカウントから来る同じリクエストに対して制限があります。2 つ以上のアセットを読み込む場合、メッセージを個別に変更して、フラグが設定されるのを避けます。

9. 右上隅の「完了」をクリックして、権限要求ワークフローを終了します。

   Livefyre Studio で、アセットに対する保留中の権限リクエストのステータスを確認できます。コンテンツが権限リクエストを保留している場合、権限が付与されるまで、AEM Assets でアセットが表示されません。権限リクエストが許可されると、AEM Assets にアセットが自動的に表示されます。

   Instagram の場合は、コンテンツ所有者の応答を追跡し、コンテンツへの権限が与えられている場合は手動で権限を付与する必要があります。

AEM Commerce での Livefyre の使用

AEM Commerce を使用した製品カタログの Livefyre への読み込み

AEM Commerce ユーザーは、既存の製品カタログを Livefyre にシームレスに統合して、Livefyre のビジュアライゼーションアプリのユーザーエンゲージメントを推進できます。

製品カタログを読み込んだら、製品がリアルタイムに Livefyre インスタンスに表示されます。AEM Commerce 製品カタログの項目を編集または削除する場合、変更は Livefrye で自動的に更新されます。

1. AEMインスタンスに最新のLivefyre for AEMパッケージがインストールされていることを確認します。

2. AEMのホームページから、AEMコマース​に移動します。

3. 新しいコレクションを作成するか、既存のコレクションを使用します。

4. コレクションの上にカーソルを置き、「コレクションのプロパティ」（鉛筆アイコン）をクリックします。

5. 「Livefyre​と同期」をチェックします。

6. Livefyreページのプレフィックス​に入力し、このコレクションをAEMの特定のページにリンクします。

   ページのプレフィックスは、環境のルートパスを定義します（そこから製品ページの検索が開始されます）。Livefyre で、関連付けられた対応する製品を含む最初のページが選択されます。別の製品のための別のページを取得するには、複数のコレクションが必要です。

Livefyre アプリの AEM サポート一覧