kanonymtさんのブログ -2ページ目

kanonymtさんのブログ

ブログの説明を入力します。



■3.2
そもそも、
https://www.yammer.com/oauth/request_token
にConsumerKey、ConsumerSecretを渡して、
tokenをリクエストをする流れ(のはず?)


またリクエストを行うための手段(書き方)を調べないといけなそう…



Mさんよりアドバイスを頂き【大感謝ですm(_ _)m】
進展がありました。


ひとまずoauthのことは置いておいて、


まず、画面表示で何も変化がないが、
エラーになっているのか(なっていれば何らかのエラーが吐かれているはず)、
処理自体は正常に行われていて、画面表示に変化がないだけなのかの切り分けをする。

yam.requestを行って、何が起こっているのかを確認する。


(あまり使い慣れていないが)firefox&firebugにて確認することに。


firebugのアドオン入手時の初回起動時に
コンソールパネルの画面表示が出るので有効化


partiea4のブログ-003_2Authentication01.png

コンソールタブの▼のプルダウンにて
・コマンドエディタ
にチェック

関係しそうな下記にもチェックを入れる
・Javascriptの警告を表示
・外部エラーを表示
・エラー時にスタックトレースを表示
・厳密な警告(性能を犠牲に)


partiea4のブログ-003_2Authentication02.png


今のフェーズで行いたい主目的は、
まずはこちらからのリクエストでYammerのMyFeedを見る(受け取る)こと。


Yammer REST API の該当箇所を確認
http://developer.yammer.com/api/#message-viewing


limit=number
Return only the specified number of messages. Works for threaded=true and threaded=extended.

limitで指定された件数の投稿を取ってこれる模様


・本家サイトのyam.requestのサンプルのdata:の部分にある、ダミーの "foo=bar"を "limit=10"に変更
・デバッグのため、alertをconsole.logに変更

・本家サンプルでは末尾のセミコロン(;)が抜けているので追加


yam.request(
{ url: "/api/v1/messages/following"
, method: "GET"
, data: "limit=10"
, success: function (msg) { console.log("Data Saved:" + msg); }
, error: function (msg) { console.log("Data Not Saved: " + msg); }
}
);


Yammerにログインした状態で、
firebugのコンソールにyam.requestを記述し、「実行」

partiea4のブログ-003_2Authentication03.png


コンソール画面には
yam.requestのsuccessに記述してある
Data Saved: [object Object]
が表示されている。


そして、
GET https://www.yammer.com/api/v1/messages/following?access_token=8g6D6rqBcpuuCkkxl86w&limit=10&_=1323400854688
の+を展開、
JSONタブを選択して
messagesを確認すると…


partiea4のブログ-003_2Authentication04.png

おお!ちゃんとMyFeedを取って来ている!(^o^)!


――ということは、
このJSON形式のデータを画面に表示させる方法がわかれば、
ブラウザ画面にも表示できるはず。

すぐにでも、調べて先に進みたいところだが…


partiea4のブログ-003_2Authentication05.png

コンソール画面の2つのエラーが気になるので、
まずはここを潰したい。
で、次の記事はデバッグ編
(本筋に進みたい方は飛ばしてください)


■3.1■Making Yammer API Requests


The JavaScript API allows calls to be made against the Yammer REST API directly from the user’s browser. By default requests are made against the user’s canonical network.
(ブラウザから直接APIを叩けるという意味でよいのかしら?)


さて、次はどうしたものか…


ひとまず<script>タグ内に記載の通り下記の部分を追加し、

yam.request(
{ url: "/api/v1/messages/following"
, method: "GET"
, data: "foo=bar"
, success: function (msg) { alert("Data Saved: " + msg); }
, error: function (msg) { alert("Data Not Saved: " + msg); }
}
)


getLoginStatusの部分で呼び出ししてみる

yam.getLoginStatus( function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
alert('status:logged in');
yam.request();
}
else{
// no user session available, someone you don’t know
alert('status:NOT logged in');
yam.login();

}
});


期待はしていなかったが、特になにも起こらず。。。



partiea4のブログ-003_1Authentication01.png


firefoxのWEBコンソールで確認すると
yam.request is not a function @yammer.html:47
と、yam.requestは関数でないと怒られる。


このJsのAPIページの下の方の書き込みに同様の問い合わせがある。
Sebpiqさんと同じように書いても同様。
回答もないので、どうしたらよいものか…


Sebpiq

Hi !
Weird error ... I am doing :
<script src="https://assets.yammer.com/platform/yam.js"></script >
<script>
$(function(){
yam.config({appId: "bbwkjbwkbswks"}); # I signed-in and put my key instead
console.log(yam); # this is to check what's in there
yam.request(
{ url: “/api/v1/messages/following”
, method: “GET”
, data: “foo=bar”
, success: function (msg) { alert(“Data Saved: ” + msg); }
, error: function (msg) { alert(“Data Not Saved: ” + msg); }
});
});
</script>

And I am getting "yam.request is not a function" error from my console. What could be the problem ? config failed ?




■2.3
ハマって、そちらは一旦保留にして、再度戻って…

2.2でそもそもyam.loginが呼ばれていないことに気づき、
2.1のloginしていないelse文の中で
yam.loginを呼び出す

yam.getLoginStatus( function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
alert('status:logged in');
}
else{
// no user session available, someone you don’t know
alert('status:NOT logged in');
yam.login();
}
});

するとやっとアプリ認証画面が表示(^^)

partiea4のブログ-002_3Authentication01.png


もちろんAllowで許可


※yammerにログインしていない場合は、

ログインのPOPUPも表示されるので、

yammerのメールとパスワードを入力



partiea4のブログ-002_3Authentication02.png

login状態でCtrl+F5で再読み込みすると、

loginのarert表示になることも確認


partiea4のブログ-002_3Authentication03.png



気付くとyammerからメールが届いている。

partiea4のブログ-002_3Authentication04.png

You've successfully logged into the '★★★' Yammer application!
You can revoke authorization to this app by clicking here.
If you did not take this action, please contact help@yammer.com immediately.
(ログイン成功。
hereをクリックするとアプリ認証の解除ができます。
この操作に覚えがない場合は、早急にyammerにメールを)



次はどんな手順を踏めばよいのか???

認証への道はまだまだ、格闘継続~~~

ひとまずここまでのhtmlを以下に


<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift-JIS;">
<title>yammerテスト</title>

<!--
<script type="text/javascript" src="./jquery.js"></script>
-->
<SCRIPT type="text/javascript" src="https://assets.yammer.com/platform/yam.js"></SCRIPT >

<SCRIPT>

yam.config({appId: "★★★"});

yam.getLoginStatus( function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
alert('status:logged in');
}
else{
// no user session available, someone you don’t know
alert('status:NOT logged in');
yam.login();
}
});

yam.login( function (response) {
if (response.authResponse) {
// user successfully logged in
alert('yam:logged in');
}
else {
// user cancelled login
alert('yam:NOT logged in');
}
});

/*
yam.request(
{ url: "/api/v1/messages/following"
, method: "GET"
, data: "foo=bar"
, success: function (msg) { alert("Data Saved: " + msg); }
, error: function (msg) { alert("Data Not Saved: " + msg); }
}
)
*/
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">
<!--
//更新日を表示する
function figures(src, len) {
for(var i = 0; i < len; i++)
src = "0" + src;
return src.substring(src.length - len, src.length);
}
function stringDate(date) {
var ld = date.getTime();
date = new Date(ld);
var year = date.getYear();
if(year < 2000) {year += 2000;}
var years = figures(year, 4);
var months = figures(date.getMonth() + 1, 2);
var dates = figures(date.getDate(), 2);
var hours = figures(date.getHours(), 2);
var minutes = figures(date.getMinutes(), 2);
var seconds = figures(date.getSeconds(), 2);

return years + "/" + months + "/" + dates + " " + hours + ":" + minutes + ":" + seconds;
}
//-->
</SCRIPT>
</head>
<body bgcolor="#ffffff">
<div align="center">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.writeln("更新日:" + stringDate(new Date(document.lastModified)));
//-->
</SCRIPT>
<p>yammerテスト</p>

<hr>

</div>
</body>
</html>