Atlassian ConnectのConnect cookbookをやってみる。

ということで。これ。
https://developer.atlassian.com/static/connect/docs/latest/guides/connect-cookbook.html

all.jsを読み込む方法

Getting startでは、直接描いたall.jsのScriptタグ

<script src="//localhost:1990/confluence/atlassian-connect/all.js" type="text/javascript"></script>

を動的に読み込む方法。ただし、サーバサイドで何かするとかいうのではない。

helloworld.htmlは、QueryString付きでコールされるので上記のScriptタグの代わりに

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function() {
  var getUrlParam = function (param) {
    var codedParam = (new RegExp(param + '=([^&]+)')).exec(window.location.search)[1];
    return decodeURIComponent(codedParam);
  };

  var baseUrl = getUrlParam('xdm_e') + getUrlParam('cp');
  $.getScript(baseUrl + '/atlassian-connect/all.js', function() {
    // your calls to AP here
    console.log("I can use AP now!");
  });
})();
</script>

でちゃんとall.jsを読み込めますよ。という。

Cookie APIを使ってみる

all.js読み込み完了のコールバックで詰め込んでみる。

  $.getScript(baseUrl + '/atlassian-connect/all.js', function() {
      // your calls to AP here
      AP.require('cookie', function(cookie) {
          // set a cookie
          cookie.save('my-cookie', 'nom nom nom', 100);
          // read the cookie value back
          cookie.read('my-cookie', function(data) {
              // what's in my cookie?
              console.log(data);
              // remove the cookie now that we've read it
              // cookie.erase('my-cookie');
          });
      });
  });

cookie.erase('my-cookie');をコメントアウトしてるので、ブラウザにCookieが残ってるのが確認できる。

ちなみに、このCookieAPIは本当のCookieとして「AJS.conglomerate.cookie」を使っている。ので、あんまりたくさんの情報を詰め込み過ぎると4kbの壁を破ってしまうので注意が必要だろう。

Cookie APIの詳しい仕様はこちら
https://developer.atlassian.com/static/connect/docs/latest/javascript/module-cookie.html

メッセージボックスを出す。

Cookie API同様にMessagesAPIを使って

AP.require('messages', function(messages) {
  messages.info('Message box', 'This message box has some content. Hi!'); 
});

ってやると、
f:id:tohokuaiki:20150831154123j:plain
って出る。

      AP.require('messages', function(messages) {
          var mid = messages.info('Message box', 'This message box has some content. Hi!'); 
          setTimeout(function(){
              messages.clear(mid);
          }, 2000);
      });

って感じで、2秒後に自動で消える。とかできる。

faceoutさせたい場合は、

messages.hint('Lookie here', 'I am fading away', { fadeout: true, delay: 5000, duration: 1000 });

と呼び出す。

オレオレAPIを作る

// これでmyObjectというAPIを登録
AP.define('myObject', function() { 
  return { 
    bonusFunction: function() { 
      return "+1"; 
    }
  } 
});

// myObjectが呼び出されたらcallbackを行う
AP.require('myObject', function(myObject) { 
  console.log(myObject.bonusFunction()); 
});

この辺り見てると、AP.requireのコールバックに色々と引っ掛けてきている感じ。callback地獄になるより、jQuery.defered を使った方が良いかもしれない。

REST APIを使って情報を取得する

そんなの、Ajaxでいっぱつじゃんとか思ってはいけない・・・・。開発環境だとそれはもちろん同じlocalhostのポート変えだからXHRは届くけど、実際はホストが違うサーバから送るのである。

ということで、普通のAjaxは使えないので、スペースの一覧を情報取得する際は

      AP.require('request', function(request) {
          request({
            url: '/rest/api/space',
            success: function(response) {
                // convert the string response to JSON
                response = JSON.parse(response);

                // dump out the response to the console
                console.log(response);
            },
            error: function() {
                console.log(arguments);
            }
          });
      });

というようにAP.requireでrequestモジュールを使う。

・・・のだけど、これがforbiddenでアクセスしてくれない。
http://localhost:1990/confluence/rest/api/space
にブラウザで直接アクセスすると問題なくJSONが返ってくる。

ん～～～～と思ってログを見ると

2015-08-31 21:11:57,467 WARN [http-1990-1] [connect.plugin.scopes.ApiScopingFilter] handleScopedRequest Request not in an authorized API scope from add-on 'com.example.myaddon.helloworld' as user '4028b8814f68d319014f68d3440d0003' on URL 'GET /confluence/restg/api/space'

というエラーが・・・。Responseにも

Request not in an authorized API scope

と出ている。

APIに対する権限移譲ができていないということで、これはfacebookアプリとかでよくあるアプリ毎にそれぞれの使用する権限を設定してやらないと・・・という事かな。。。

アドオンのスコープを決める

descriptorのスコープについてこちらを拝見。
https://developer.atlassian.com/static/connect/docs/latest/modules/
各REST APIを使うのに必要なスコープの一覧はこちら
https://developer.atlassian.com/static/connect/docs/latest/scopes/confluence-rest-scopes.html

ということで、descriptorの最後に

     },
	 "scopes": ["read"]
 }

という宣言を行って再度インストールし直して試すとちゃんとスペースの情報がREST APIから取得できた。

tohokuaikiのチラシの裏

技術的ネタとか。