[Google Apps Script]Microsoft Graph APIを使ってMicrosoftのサービスと連携する方法

ホーム
Microsoft Graph, Google関連
[Google Apps Script]Microsoft Graph APIを使ってMicrosoftのサービスと連携する方法

Microsoft Graph

2018.10.17

[Google Apps Script]Microsoft Graph APIを使ってMicrosoftのサービスと連携する方法

Microsoft Graph APIを使って、OneDriveにあるExcelファイルからグラフを画像として取得し、Google スライドに挿入するスクリプトを書いてみました。

「【エンジニア交流会】Google Apps Script 活用ミートアップ #3」のLT向けに考えた内容です。

Microsoft Graphとは？

当ブログでは、これまでMicrosoft Graph関連の様々な記事を書いてきました。

Microsoft Graph(以下Graph)とは、一言で言ってしまうと、“Office 365などのMicrosoftのクラウドサービス上で管理される様々なデータにアクセス可能なAPI”です。

Graphを使うことで、外部のアプリケーションやサービスから、ExchangeやSharePoint、OneDriveやExcelといった、製品をまたがった参照や操作を簡単に実行できるようになります。

しかもエンドポイントはただ一つ。
『https://graph.microsoft.com』のみです。

公式サイトを見ると、具体的に何ができるのかが掴めると思います。

OAuth2 for Apps Scriptライブラリ

GraphはOAuth 2.0認証＆RESTで呼び出せますが、Google Apps Scriptには外部APIを実行するのに非常に役立つライブラリ「OAuth2 for Apps Script」があります。

GoogleのエンジニアであるEric Koleda氏が作成した(らしい)ライブラリで、このライブラリが認証含めた面倒な処理を担ってくれるので、短いコードで簡潔に、APIを利用したコードを書くことができるようになります。

下準備

実際にコードを書く前に、上記ライブラリの設定やクライアントID、クライアントシークレットの取得といった、下準備をする必要があります。

Google スライドを新規作成し、スクリプトエディタを開きます。

リソースメニューから「ライブラリ」をクリックします。

ライブラリを追加欄に下記スクリプトIDを入力して、「追加」ボタンをクリックします。

1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF

「OAuth2」が追加されたらバージョンを選択(2018年10月時点では30が最新)し、識別子がデフォルトの「OAuth2」になっていることを確認後、「保存」ボタンをクリックします。

ファイルメニューから「プロジェクトのプロパティ」をクリックします。

プロジェクトのプロパティダイアログが表示されたら、「情報」タブから「スクリプト ID」をコピーして、メモ帳などのテキストエディタに貼り付けておきます。

手順6.で取得したスクリプトIDを含めた、下記URLがリダイレクトURLとなります。

https://script.google.com/macros/d/（スクリプトID）/usercallback

下記記事を参考に、Application Registration Portalからアプリの登録を行います。アプリケーション ID(クライアントID)とアプリケーションシークレット(クライアントシークレット)は後で必要になるので、メモ帳などのテキストエディタにコピーしておきます。

2017.05.24

Microsoft Graph SDK for PHPを使ったAPIの呼び出しサンプル

知らない間に(恐らくBuild 2017のタイミングに合わせて)Microsoft Graph・PHP用SDKの安定版がリリースされていたので、さっそく試してみました。テスト環境 Windows 7 Professional SP1 64-b...

プラットフォーム：Web
リダイレクト URL：上記リダイレクトURL
Microsoft Graph のアクセス許可：User.Read、Files.ReadWrite

以上で下準備作業は終了です。

OneDriveにあるExcelファイルからグラフを画像として取得するスクリプト

準備ができたので、下記コードを貼り付けて実行します。
クライアントIDとクライアントシークレット、OneDriveのルートフォルダーにあるExcelファイル名は適宜変更してください。

var CLIENT_ID = "(クライアントID)";
var CLIENT_SECRET = "(クライアントシークレット)";
var scopes = "User.Read Files.ReadWrite";
var endpointUrl = "https://graph.microsoft.com/v1.0"; //Microsoft Graphのエンドポイント
var fileName = "ChartSample.xlsx"; //OneDriveのルートフォルダーにあるExcelファイル名決め打ち

function onOpen() {
  var ui = SlidesApp.getUi();
  ui.createMenu("API Menu")
    .addItem("認証", "authorize")
    .addItem("ユーザー名取得", "getUserName")
    .addItem("Excel API呼び出し", "insertChartImage")
    .addItem("ログアウト", "reset")
    .addToUi();
}

//認証
function authorize() {
  var service = getService();
  if (!service.hasAccess()) {
    var authorizationUrl = service.getAuthorizationUrl();
    var template = HtmlService.createTemplate('<a href="<?= authorizationUrl ?>" target="_blank">認証ページを開きます</a>');
    template.authorizationUrl = authorizationUrl;
    var page = template.evaluate();
    SlidesApp.getUi().showModalDialog(page, "Authorize");
  } else {
    SlidesApp.getUi().alert("すでに認証済みです。");
  }
}

//OAuth2サービス設定
function getService() {
  return OAuth2.createService("Microsoft Graph")
    .setAuthorizationBaseUrl("https://login.microsoftonline.com/common/oauth2/v2.0/authorize")
    .setTokenUrl("https://login.microsoftonline.com/common/oauth2/v2.0/token")
    .setClientId(CLIENT_ID)
    .setClientSecret(CLIENT_SECRET)
    .setScope(scopes)
    .setCallbackFunction("authCallback")
    .setPropertyStore(PropertiesService.getUserProperties())
    .setParam("response_type", "code");
}

//認証コールバック
function authCallback(request) {
  var service = getService();
  var isAuthorized = service.handleCallback(request);
  if (isAuthorized) {
    return HtmlService.createHtmlOutput("認証に成功しました。ページを閉じてください。");
  } else {
    return HtmlService.createHtmlOutput("認証に失敗しました。");
  }
}

//ログアウト
function reset() {
  getService().reset();
}

//ユーザー名取得
function getUserName() {
  var service = getService();
  if (service.hasAccess()) {
    var url = "https://graph.microsoft.com/v1.0/me";
    var response = UrlFetchApp.fetch(url, {
      headers: {
        Authorization: "Bearer " + service.getAccessToken()
      },
      method: "GET",
      contentType: "application/json"
    });
    var results = JSON.parse(response.getContentText());
    SlidesApp.getUi().alert("ユーザー名：" + results["displayName"]);
  } else {
    SlidesApp.getUi().alert("認証されていません。");
  }
}

//Excelファイルからグラフを取得→スライドに画像として挿入
function insertChartImage() {
  var slide = SlidesApp.getActivePresentation().getSlides()[0];
  var service = getService();
  if (service.hasAccess()) {
    //OneDriveのルートフォルダーにある対象ファイルのID取得
    var fileUrl = endpointUrl + "/me/drive/root/children/" + encodeURIComponent(fileName);
    var file = callGraphApi("GET", fileUrl);
    var fileId = file["id"];
    //ワークシートオブジェクトのコレクション取得
    var sheetsUrl = endpointUrl + "/me/drive/items/" + fileId + "/workbook/worksheets";
    var sheets = callGraphApi("GET", sheetsUrl);
    sheets["value"].forEach(function(sheet) {
      //グラフオブジェクトのコレクション取得
      var chartsUrl = sheetsUrl + "/" + sheet["name"] + "/" + "charts";
      var charts = callGraphApi("GET", chartsUrl);
      if (charts["value"].length > 0) {
        charts["value"].forEach(function(chart) {
          //グラフの画像を取得
          var imageUrl = chartsUrl + "('" + encodeURIComponent(chart["id"]) + "')/Image";
          var image = callGraphApi("GET", imageUrl);
          insertImageFromBase64(slide, image["value"]);
        });
      }
    });
  } else {
    SlidesApp.getUi().alert("認証されていません。");
  }
}

//Microsoft Graph APIの呼び出し
function callGraphApi(httpMethod, url) {
  var service = getService();
  if (service.hasAccess()) {
    var response = UrlFetchApp.fetch(url, {
      headers: {
        Authorization: "Bearer " + service.getAccessToken()
      },
      method: httpMethod,
      contentType: "application/json"
    });
    return JSON.parse(response.getContentText());
  }
}

//画像(Base64形式)の挿入
function insertImageFromBase64(slide, b64) {
  var blob = Utilities.newBlob(Utilities.base64Decode(b64), MimeType.PNG);
  slide.insertImage(blob);
}

まずは、スクリプトの許可を行う為、「authorize」関数を実行します。
「承認が必要です」ダイアログが表示されたら、「許可を確認」ボタンをクリックします。

アカウントの選択画面が表示されたら、使用するアカウントを選択します。

「このアプリは確認されていません」画面が表示されたら、詳細から「（安全ではないページ）に移動」をクリックします。

アクセスのリクエスト画面が表示されたら、「許可」ボタンをクリックします。

スライドを表示すると、「authorize」関数により作成されたダイアログが表示されていることが確認できるので、「認証ページを開きます」リンクをクリックします。

別タブでサインイン画面が表示されるので、Microsoft アカウントでサインインします。

アプリの許可画面が表示されたら「はい」ボタンをクリックします。

「認証に成功しました。ページを閉じてください。」画面が表示されたら認証成功です。

「API Menu」(このメニューはonOpen関数を実行すると追加されます)から「ユーザー名取得」を実行すると、Microsoft アカウントのユーザー名が表示され、無事にGraph APIを呼び出せることが確認できます。

API Menuから「Excel API呼び出し」を実行すると、OneDriveにあるExcelファイルからグラフを画像として取得し、スライドに挿入する処理が行われます。

無事に処理が行われることが確認できたら、最後はAPI Menuから「ログアウト」を実行して、サービスを切断します。

コードの解説

主要な部分だけ、簡単にコードの解説をしていきます。

//OAuth2サービス設定
function getService() {
  return OAuth2.createService("Microsoft Graph")
    .setAuthorizationBaseUrl("https://login.microsoftonline.com/common/oauth2/v2.0/authorize")
    .setTokenUrl("https://login.microsoftonline.com/common/oauth2/v2.0/token")
    .setClientId(CLIENT_ID)
    .setClientSecret(CLIENT_SECRET)
    .setScope(scopes)
    .setCallbackFunction("authCallback")
    .setPropertyStore(PropertiesService.getUserProperties())
    .setParam("response_type", "code");
}

スクリプトのメイン。
認証用のURLやトークン取得用のURL、クライアントIDやクライアントシークレットを設定することで、面倒くさい認証・トークン取得処理を行ってくれます(OAuth2 for Apps Scriptライブラリ)。

//認証
function authorize() {
  var service = getService();
  if (!service.hasAccess()) {
    var authorizationUrl = service.getAuthorizationUrl();
    var template = HtmlService.createTemplate('<a href="<?= authorizationUrl ?>" target="_blank">認証ページを開きます</a>');
    template.authorizationUrl = authorizationUrl;
    var page = template.evaluate();
    SlidesApp.getUi().showModalDialog(page, "Authorize");
  } else {
    SlidesApp.getUi().alert("すでに認証済みです。");
  }
}

トークンが取得できていない状態では、まず認証を行う必要があるため、認証用URLのリンクを表示させます。

//認証コールバック
function authCallback(request) {
  var service = getService();
  var isAuthorized = service.handleCallback(request);
  if (isAuthorized) {
    return HtmlService.createHtmlOutput("認証に成功しました。ページを閉じてください。");
  } else {
    return HtmlService.createHtmlOutput("認証に失敗しました。");
  }
}

認証が終わったときに呼び出されるコールバックです。

//ユーザー名取得
function getUserName() {
  var service = getService();
  if (service.hasAccess()) {
    var url = "https://graph.microsoft.com/v1.0/me";
    var response = UrlFetchApp.fetch(url, {
      headers: {
        Authorization: "Bearer " + service.getAccessToken()
      },
      method: "GET",
      contentType: "application/json"
    });
    var results = JSON.parse(response.getContentText());
    SlidesApp.getUi().alert("ユーザー名：" + results["displayName"]);
  } else {
    SlidesApp.getUi().alert("認証されていません。");
  }
}

実際にGraph APIの呼び出しを行うコードです。
ユーザーの取得処理を行って、自分のユーザー名をメッセージボックスで表示します。

Excelファイルからグラフを画像として取得→スライドに挿入を行う「insertChartImage」関数では下記のような流れで処理を行っています。

OneDriveのルートフォルダーにある対象ファイルのID取得

https://graph.microsoft.com/v1.0/me/drive/root/children/{ファイル名}

ワークシートオブジェクトのコレクション取得

https://graph.microsoft.com/v1.0/me/drive/items/{ファイルID}/workbook/worksheets

グラフオブジェクトのコレクション取得

https://graph.microsoft.com/v1.0/me/drive/items/{ファイルID}/workbook/worksheets/{シート名}/charts

グラフの画像をBase64形式で取得

https://graph.microsoft.com/v1.0/me/drive/items/{ファイルID}/workbook/worksheets/{シート名}/charts/({グラフID})/Image

Base64形式のデータからBlobオブジェクトを作成し、画像としてスライドに挿入

//画像(Base64形式)の挿入
function insertImageFromBase64(slide, b64) {
  var blob = Utilities.newBlob(Utilities.base64Decode(b64), MimeType.PNG);
  slide.insertImage(blob);
}