前回に引き続き、Yammer API ネタです。
今回は、実際に JavaScript から利用する際のアプローチの解説です。
- アプリケーション登録
- Yammer ログイン処理
JavaScript にて認証した上で REST API を利用するためには、必ずアプリケーション登録が必要になります。
また、クロスサイトスクリプティングの問題を解決する CORS (Cross-Origin Resource Sharing) を利用するためにもアプリケーション登録は不可欠です。
アプリケーション登録については、以下のリソースが参考になります。
・yammer App の Programming
http://blogs.msdn.com/b/tsmatsuz/archive/2014/03/27/yammer-app-sdk-and-rest-api-javascript-programming.aspx
・Authentication
https://developer.yammer.com/authentication/
⇒ Generate a test access token のトピック
ポイントは、まずはアプリケーション登録を行ってクライアント IDを発行して貰います。
それから、CORS の設定となる JavaScript のアクセス元 URL を設定します。
JavaScript にて、REST API をリクエストするには、Yammer に予めログインしている必要があります。
また、そもそも Yammer にログインしているかどうかを確認する必要があります。
この辺りは、JavaScript SDK に用意されているので、こちらを使うのが楽々です。
Yammer のログイン状況の確認には、yam.platform.getLoginStatus を利用します。
ログインしていない場合は、ログインを行うために、yam.platform.login を利用します。
yam.platform.getLoginStatus (
function (response) {
if (response.authResponse) {
// ログイン済み
yammerSetAuthToken (response.access_token.token);
} else {
// ログイン処理
yam.platform.login (
function (response) {
if (response.authResponse) {
// ログイン済み
}
}
);
}
}
);
ちなみに、yam.platform.login を呼ぶと、別ウィンドウで Yammer ログインページが表示され、ログイン処理が完了するとウィンドウが閉じられます。
JavaScript にて、REST API をリクエストするには、セキュリティトークンを受け渡す必要があります。
これには、yam.platform.setAuthToken を利用します。
yam.platform.login にしても、yam.platform.getLoginStatus にしても、レスポンス結果に、セキュリティトークンが含まれているので、それを設定すれば良いだけです。
yam.platform.setAuthToken (
strToken,
function (response) {
if (response.authResponse) {
// セキュリティトークン設定完了
} else {
// セキュリティトークン設定失敗
}
}
);
これで、REST API をリクエストする準備が完了します。
JavaScript にて、REST API をリクエストする際には、yam.platform.request を利用します。
なお、REST API の URL については、ブラウザ上で直接リクエストする場合と異なり、www.yammer.com ではなく、api.yammer.com になります。
yam.platform.request({
url: "https://api.yammer.com/api/v1/networks/current.json?inbox_supported_client=true",
method: "GET",
success: function (response) {
// リクエスト成功
},
error: function (response) {
// リクエスト失敗
}
});
どうでしょうか？
JavaScript SDK が用意されているので、記述する必要のあるスクリプトは少ないですよね。
それぞれの関数を使って、受信箱および通知件数を取得するサンプルを作成してみます。
今回は、SharePoint 2013 (SharePoint Online 含む) で簡易的に組み込めるように、「スクリプト エディター」Web パーツを利用することを想定しています。
また、今更、JavaScript をバリバリ書くのも何なんで、jQuery を利用します。
最初に、jQuery のスクリプトファイルと JavaScript SDK のスクリプトファイルをインクルードします。
jQuery については、手元にあった 1.9.1 を利用していますが、必要に応じて、最新バージョンに置き換えて利用することも出来るはずです。
・jQuery Core 1.9.1
http://code.jquery.com/jquery-1.9.1.min.js
JavaScript SDK をインクルードする際に、data-app-id の所に、アプリケーション登録した際のクライアント ID を設定します。
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" data-app-id="<クライアント ID>"
src="https://c64.assets-yammer.com/assets/platform_js_sdk.js"></script>
SharePoint のページ上に組み込む際には、ページのロードが完了してからスクリプトを実行させるために、_spBodyOnLoadFunctionNames.push 関数を利用します。
_spBodyOnLoadFunctionNames.push("yammerInit");
後は、それぞれの処理について、成功したら、次の処理を呼び出すという形で、以下のような処理の流れを繋げると出来上がります。
- 最初に、ログイン状況の確認、ログインしていなければログインの実行
- 次にセキュリティトークンの設定
- そして、REST API リクエストの実行
- 最後に、リクエストの結果処理
今回は、受信箱および通知件数を取得するために、現在のユーザーのネットワーク情報を取得していますが、複数のネットワークに参加している場合もありますので、自分の所属するホーム ネットワークを特定する処理が必要になります。
これは、is_primary の値を見れば分かるので、以下のようなフィルター処理を入れておきます。
success: function (response) {
var primary = response.filter (function (item, index) {
if (item.is_primary == true) return item;
});
displayYammerCount (primary[0]);
},
完結したサンプルスクリプトについては、こちらに置きましたのでお試し下さい。
displayYammerCount.txt
ファイル内の <クライアント ID> の所に、アプリケーション登録した際のクライアント ID で置き換えて下さい。
後は、任意の「サイトのページ」に jquery-1.9.1.min.js をアップロードして、ページの任意の場所に「スクリプト エディター」Web パーツを追加して、サンプルスクリプトを埋め込めば動作するはずです。
特に問題無ければ、以下のように表示されると思います。
また、今回のサンプルを元に、更に応用すると、以下のようなグループ毎の未読件数を表示させることも出来ます。
今回は簡単なサンプルの実装まででしたが、次回は、もう少し応用例を解説するかも知れません。
Kokuho Hi (Sonorite / SharePoint Technology Center)
