SharePoint アドインモデルにおける Yammer の統合

[アーティクル]
04/08/2023

Summary

Yammer と SharePoint の統合方法は、完全信頼コードにおける新しい SharePoint アドインモデルの場合と同じです。

基本ガイドライン

Yammer と SharePoint の統合については、大まかに次のような基本ガイドラインが提供されています。

Yammer の統合はオンプレミスと Office 365 SharePoint 環境の両方で使用できます。
リモートプロビジョニングパターンを使用して、Yammer グループと Yammer OpenGraph オブジェクトを作成したり、新しい SharePoint サイトを作成するときのやり取りを容易にすることができます。
標準の埋め込み機能を使用して、Yammer と SharePoint を迅速かつ容易に統合することができます。
- 埋め込みを行うには、アプリケーションに 400 ピクセル以上の HTML コンテナーが必要です。
Yammer SDK および REST API を使用して、カスタマイズされた統合機能を作成できます。

Yammer と SharePoint を統合するオプション

Yammer と SharePoint を統合するには、いくつかのオプションがあります。

Yammer Web パーツ
埋め込み
- グループ、トピック、マイ、およびユーザーフィード
- OpenGraph のフィード
Yammer OpenGraph API および/または Yammer REST API と Yammer SDK

Yammer Web パーツ

Yammer の会話を SharePoint Web ページに統合するための 2 つの Web パーツが含まれています。最新のページに Web パーツを追加する場合は、検索語句「yammer」を入力して使用可能な Web パーツを表示します。

SharePoint に含まれている既定の Yammer Web パーツ

ページに Web パーツを追加したら、プロパティウィンドウを使用して、目的の Yammer の会話を含めるように構成します。

Yammer の会話の Web パーツ構成

埋め込み

このオプションでは、SharePoint Web ページに Yammer のフィードを埋め込みます。

このオプションは、迅速かつ簡単に実装されます。
このオプションを使用すると、フィードの限定的な側面とその表示方法を制御できます。

SharePoint ページに埋め込みを使用すると、次のような外観になります。

標準的な SharePoint チームサイトのページ。このページには、「会話の開始」というテキストが含まれたテキストボックスがあります。テキストボックスの下側には、Yammer の会話スレッドを表示しているリストボックスがあります。

次の表は、標準の埋め込みを使用してアクセス可能な Yammer のフィードの各種類について説明します。

フィード	説明	FeedType	使用例
マイフィード	マイフィードは、Yammer ユーザーに向けた会話が配信される場所です。	MyFeed	個人用サイトホームページまたはワークスペースサイト。
ユーザーフィード	特定のユーザーが Yammer に投稿したすべての会話。	User	システムディレクトリ内のユーザーのプロファイルページ。
トピックフィード	Yammer のトピックにタグが付けられている会話のフィード。	Topic	イントラネットのイベントページ。
グループのフィード	特定のグループに投稿されている会話のフィード。	Group	イントラネットのチームページ。

上記の表に記載されている標準の Yammer フィード以上の機能が必要な場合は、OpenGraph 埋め込みオプションを使用できます。このオプションでは、フィードをより正確に制御できます。次の表に、このような例を示します。

フィード	説明	FeedType	使用例
コメントフィード	Yammer の Open Graph API を使用して、アプリケーションオブジェクト周辺の会話を容易にします。	Custom	カスタム CRM アプリケーション、またはデジタル資産管理システム内のメディアの詳細ページの営業案件です。

適切な場合

Yammer フィードと SharePoint サイトを統合しようとしていて、埋め込みフィードの標準機能がニーズを満たしている場合。

作業の開始

次のサンプルでは、サイトの既定のニュースフィードの代わりに、そのサイトに関連付けられている Yammer フィードをプロビジョニングする方法について説明します。

Provisioning.Yammer (O365 PnP サンプル)

YammerUtility.cs クラスの CreateYammerGroupDiscussionPartXml メソッドは、OfficeDevPnP.Core サンプルのものです。このメソッドは、サイトをプロビジョニングするときに SharePoint ページに追加されるアドインパーツの定義の XML を作成します。コードの feedType: 'group' 部分に注意してください。 "); wp.Append(" "); wp.Append(" "); wp.Append("");

public static string CreateYammerGroupDiscussionPartXml(string yammerNetworkName, int yammerGroupId, bool showHeader, bool showFooter, bool useSSO = true)
{
    StringBuilder wp = new StringBuilder(100);
    wp.Append("<?xml version=\"1.0\" encoding=\"utf-8\" ?>");
    wp.Append("<webParts>");
    wp.Append("	<webPart xmlns='http://schemas.microsoft.com/WebPart/v3'>");
    wp.Append("		<metaData>");
    wp.Append("			<type name='Microsoft.SharePoint.WebPartPages.ScriptEditorWebPart, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c' />");
    wp.Append("			<importErrorMessage>Cannot import this web part.</importErrorMessage>");
    wp.Append("		</metaData>");
    wp.Append("		<data>");
    wp.Append("			<properties>");
    wp.Append("				<property name='Title' type='string'>$Resources:core,ScriptEditorWebPartTitle;</property>");
    wp.Append("				<property name='Description' type='string'>$Resources:core,ScriptEditorWebPartDescription;</property>");
    wp.Append("				<property name='ChromeType' type='chrometype'>None</property>");
    wp.Append("				<property name='Content' type='string'>");
    wp.Append("				<![CDATA[");
    wp.Append("				    <div id='embedded-feed' style='height: 500px;'></div>");
    wp.Append("				    <script type='text/javascript' src='https://assets.yammer.com/assets/platform_embed.js'></script>");
    wp.Append("				    <script type='text/javascript'>  
                yam.connect.embedFeed({ container: '#embedded-feed', network: '"
                + yammerNetworkName
                + @"', feedType: 'group', feedId: '" + yammerGroupId			
                + @"', config: { use_sso: " + useSSO.ToString().ToLower()			
                + @", header: " + showHeader.ToString().ToLower()
                + @", footer: " + showFooter.ToString().ToLower()
                + " }}); </script>");
    wp.Append("				]]>");
    wp.Append("				</property>");
    wp.Append("			</properties>");
    wp.Append("		</data>");
    wp.Append("	</webPart>");
    wp.Append("</webParts>");

    return wp.ToString();
}

public static string CreateYammerOpenGraphDiscussionPartXml(string yammerNetworkName, string url, bool showHeader, bool showFooter, string postTitle="", string postImageUrl="", bool useSso = true, string groupId = "") { StringBuilder wp = new StringBuilder(100); wp.Append(""); wp.Append(""); wp.Append(" "); wp.Append(" "); wp.Append(" "); wp.Append(" Cannot import this Web Part."); wp.Append(" "); wp.Append(" "); wp.Append(" このメソッドは、サイトをプロビジョニングするときに SharePoint ページに追加されるアドインパーツの定義の XML を作成します。

public static string CreateYammerOpenGraphDiscussionPartXml(string yammerNetworkName, string url, bool showHeader, 
                                                            bool showFooter, string postTitle="", string postImageUrl="", 
                                                            bool useSso = true, string groupId = "")
{
    StringBuilder wp = new StringBuilder(100);
    wp.Append("<?xml version=\"1.0\" encoding=\"utf-8\" ?>");
    wp.Append("<webParts>");
    wp.Append("	<webPart xmlns='http://schemas.microsoft.com/WebPart/v3'>");
    wp.Append("		<metaData>");
    wp.Append("			<type name='Microsoft.SharePoint.WebPartPages.ScriptEditorWebPart, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c' />");
    wp.Append("			<importErrorMessage>Cannot import this web part.</importErrorMessage>");
    wp.Append("		</metaData>");
    wp.Append("		<data>");
    wp.Append("			<properties>");
    wp.Append("				<property name='Title' type='string'>$Resources:core,ScriptEditorWebPartTitle;</property>");
    wp.Append("				<property name='Description' type='string'>$Resources:core,ScriptEditorWebPartDescription;</property>");
    wp.Append("				<property name='ChromeType' type='chrometype'>None</property>");
    wp.Append("				<property name='Content' type='string'>");
    wp.Append("				<![CDATA[");
    wp.Append("				    <div id='embedded-feed' style='height: 500px;'></div>");
    wp.Append("				    <script type='text/javascript' src='https://assets.yammer.com/assets/platform_embed.js'></script>");
    wp.Append("				    <script>");
    wp.Append("				        yam.connect.embedFeed({");
    wp.Append("				          container: '#embedded-feed'");
    wp.Append("				                , feedType: 'open-graph'");
    wp.Append("				                , feedId: ''");
    wp.Append("				                , config: {");
    wp.Append("				                     use_sso: " + useSso.ToString().ToLower());
    wp.Append("				                     , header: " + showHeader.ToString().ToLower());
    wp.Append("				                     , footer: " + showFooter.ToString().ToLower());
    wp.Append("				                     , showOpenGraphPreview: false");
    wp.Append("				                     , defaultToCanonical: false");
    wp.Append("				                     , hideNetworkName: false");
    wp.Append("				                     , promptText: 'Start a conversation'");
    if (!string.IsNullOrEmpty(groupId))
    {
        wp.Append("				                 , defaultGroupId: '" + groupId + "'"); 
    }
    wp.Append("				                }");
    wp.Append("				                , objectProperties: {"); 
    wp.Append("				                  url: '" + url + "'");
    wp.Append("				                  , type: 'page'");
    wp.Append("				                  , title: '" + postTitle + "'");
    wp.Append("				                  , image: '" + postImageUrl + "'");
    wp.Append("				                }");
    wp.Append("				            });");
    wp.Append("				        </script>");
    wp.Append("				]]>");
    wp.Append("				</property>");
    wp.Append("			</properties>");
    wp.Append("		</data>");
    wp.Append("	</webPart>");
    wp.Append("</webParts>");

    return wp.ToString();
}

Yammer の埋め込みの詳細については、「Yammer 埋め込みフィード (Yammer デベロッパーセンター)」の記事を参照してください。

Yammer OpenGraph の詳細については、「Open Graph の概要と形式 (Yammer デベロッパーセンター)」の記事を参照してください。

Yammer OpenGraph API と Yammer REST API と Yammer SDK

このオプションでは、Yammer OpenGraph API および/または Yammer REST API と Yammer SDK を使用して、Yammer と SharePoint を統合できます。また、これらの API を使用して、Web ページ以外のプロセスと Yammer を統合することもできます。このようなシナリオの例には、サービスや長い時間がかかる操作が含まれます。

このオプションは、実装に時間がかかります。
このオプションでは、フィードのすべての側面、表示方法、および操作方法を制御できます。

適切な場合

Yammer フィードと SharePoint サイトを統合しようとしていて、埋め込みフィードの標準機能がニーズを満たしていない場合。
Yammer フィードをサービスや長い時間のかかる操作に統合しようとする場合。

作業の開始

Yammer OpenGraph の詳細については、「Open Graph の概要と形式 (Yammer デベロッパーセンター)」の記事を参照してください。

Yammer SDK は、Yammer への認証機能を提供します。 Yammer SDK の詳細については、次の記事を参照してください。

Yammer SDK を使用して Yammer への認証を行った後、Yammer REST API を呼び出すことができます。

Yammer REST API の詳細については、記事「REST API とレート制限 (Yammer デベロッパーセンター)」を参照してください。

認証に関する注意事項

SharePoint へのサインインに使用する資格情報と異なる資格情報を使用して SharePoint にサインインするシナリオでは、ユーザーのシングルサインオン機能を開発する場合があります。このようなシナリオの例となるのは、LiveID を使用して SharePoint にサインインし、Microsoft 個人用アカウントまたは会社アカウントを使用して Yammer にサインインする必要がある場合です。

シングルサインオンシナリオを実装するため、カスタムのコンポーネントを使用した SharePoint ページにユーザーが初めてアクセスするとき、Yammer にサインインするようにユーザーをダイレクトすることができます。 Yammer SDK を使用して Yammer にユーザーにサインインした後、ユーザーの更新トークンをユーザープロファイルに保存できます。次回ページにアクセスしたときには、ユーザープロファイルから更新トークンを取得して、認証に使用することができます。この方法を使用すると、エンドユーザーは更新トークンの有効期限が切れたときにのみ Yammer にサインインする必要があります。

Yammer のフィードの SharePoint サイトへの統合 (O365 PnP ビデオ)
Yammer 埋め込みフィード (Yammer デベロッパーセンター)
Open Graph の紹介と形式 (Yammer デベロッパーセンター)
ガイダンス記事の https://aka.ms/OfficeDevPnPGuidance
MSDN の https://aka.ms/OfficeDevPnPMSDN
ビデオの https://aka.ms/OfficeDevPnPVideos

適用対象

Office 365 マルチテナント (MT)
Office 365 専用 (D)
SharePoint 2013 オンプレミス

次の方法で共有

SharePoint アドインモデルにおける Yammer の統合

Summary

基本ガイドライン

Yammer と SharePoint を統合するオプション

Yammer Web パーツ

埋め込み

Yammer OpenGraph API と Yammer REST API と Yammer SDK

適用対象

その他のリソース

次の方法で共有

SharePoint アドイン モデルにおける Yammer の統合

Summary

基本ガイドライン

Yammer と SharePoint を統合するオプション

Yammer Web パーツ

埋め込み

Yammer OpenGraph API と Yammer REST API と Yammer SDK

関連リンク

関連する PnP サンプル

適用対象

その他のリソース

SharePoint アドインモデルにおける Yammer の統合