Visual Studio Advent Calendar 20日目です。
昨日作ったVSTS拡張の中でVSTS APIを叩いてその結果を表示してみることにしましょう。
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失敗時にエラー情報を表示する処理を入れています。
失敗時はこんな画面になります。
正しく動くとこんな感じです。ビルド定義がまだ1個しかない状態ですが。
なお、今回使うような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コントロールやデータの保存などについて紹介していきたいと思います。
