読者です 読者をやめる 読者になる 読者になる

銀の光と碧い空

クラウドなインフラとC#なアプリ開発の狭間にいるエンジニアの日々

VSTS 拡張を作ってみる (2) : VSTS Rest APIを実行する

VSTS

Visual Studio Advent Calendar 20日目です。

qiita.com

昨日作ったVSTS拡張の中でVSTS APIを叩いてその結果を表示してみることにしましょう。

VSTS 拡張を作ってみる (1) - 銀の光と碧い空

VSTS拡張の中でVSTSのAPIを呼ぶ場合、manifestファイルにscopesを記述しないといけません。これは昨日の記事で紹介したページにも書いていない*1ので注意が必要です。これを忘れると、APIが401 Unauthorizedになります。manifestファイルのcontribution やfilesと同レベルに記述します。

{
...
    "scopes": [
        "vso.build"
    ],
    "contributions": [...],
    "files": [...],
...
}

指定する値の一覧はここにあります。呼び出すAPIに必要な権限に応じて指定します。今回はビルドに関する情報の取得を行うため、vso.buildを指定しています。

Extension Manifest Reference| Extensions for Visual Studio Team Services

scopesを変更した場合、いったん公開しているパッケージを取り下げて公開しなおす必要があります。

次にJavaScriptの中でAPIを呼び出します。API呼び出すのに認証が必要では?と思われるかもしれませんが、VSS SDK を使うと認証も面倒を見てくれます。先にコードをお見せします*2

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>Hello World</title>
     <script src="sdk/scripts/VSS.SDK.js"></script>
 </head>
 <body>
     <script type="text/javascript">
 // Sets up the initial handshake with the host frame
 VSS.init({
     explicitNotifyLoaded: true,
     usePlatformScripts: true,
     usePlatformStyles: true       
 });
     </script>
     <div id="grid-container"></div>
     <script type="text/javascript">
// Load VSTS controls
 VSS.require(["VSS/Controls", "VSS/Controls/Grids",
            "VSS/Service", "TFS/Build/RestClient"],
     function (Controls, Grids, VSS_Service, TFS_Build_WebApi) {
        //現在のプロジェクト名を取得する。
        var webContext = VSS.getWebContext();
        var buildClient = VSS_Service.getCollectionClient(TFS_Build_WebApi.BuildHttpClient);
       //プロジェクト名を指定してビルド定義一覧を取得する
        buildClient.getDefinitions(webContext.project.name).then(function(buildDefinitions) {
            Controls.create(Grids.Grid, $("#grid-container"), {
                height: "1000px",
                columns: [
                    { text: "ID", index: "id", width: 150 },
                    { text: "Name", index: "name", width: 150 },
                    { text: "URL", index: "url", width: 600 }
                ],
                source: buildDefinitions
            });
        }, function(e) { // APIエラー時の処理を追加する
            VSS.notifyLoadFailed(e);
        });     
     VSS.notifyLoadSucceeded();
 });
     </script>
 </body>
 </html>

サンプルと変えているのは、ビルド定義一覧取得APIの場合、プロジェクト名を指定する必要があるのですが、現在表示されているプロジェクト名を取得するには、VSS.WebContextメソッドを使います。また、API失敗時にエラー情報を表示する処理を入れています。 失敗時はこんな画面になります。 f:id:tanaka733:20151219231328p:plain

正しく動くとこんな感じです。ビルド定義がまだ1個しかない状態ですが。 f:id:tanaka733:20151219231404p:plain

なお、今回使うようなAPIの一覧はここにドキュメントがあります。

Core Client SDK | Extensions for Visual Studio Team Services

が、過信は禁物です。例えば今回使ったgetDefinitionsメソッド、すべての引数が任意となっていますが、実際にはプロジェクト名を指定しないと401エラーです。クライアント側では任意だよ、でもサーバはエラー返すかもしれんけどな!って話かもしれないのですが、いろいろ試行錯誤する必要があります。

TFS/Build/RestClient BuildHttpClient2_2 API | Extensions for Visual Studio Team Services

デバッグについては、F12デバッグが公式から案内されてます... コードにデバッグ出力を追加しては公開してチェックして、の繰り返しでがんばるしかなさそうです。

Extension Debugging in a Browser | Extensions for Visual Studio Team Services

明日以降も引き続きVSTS拡張のUIコントロールやデータの保存などについて紹介していきたいと思います。

*1:うまく動かないのでAPIのページにある開発チームのアドレスにメールしたら解決しました

*2:基本的にはOverViewページののサンプルを呼び出すAPIを変えただけです