Office関連

Office 365 unified APIをJavaScriptだけで呼び出す

Microsoftの松崎さんのブログに下記の記事がありました。

・Office 365 API : CORS の使用 – 松崎 剛 Blog
http://blogs.msdn.com/b/tsmatsuz/archive/2015/05/13/office-365-api-cors.aspx

最近、Office 365 API の MyFiles (OneDrive for Business) と Site (SharePoint) で CORS 対応していましたが、BUILD のタイミングにあわせて Exchange (Mail / Calendar / Contact), Office 365 Unified API など、他の API でも対応しました。

Office 365 unified APIもクロスドメイン制約を超えて呼び出せるようになったわけですね!

Ajax通信を行っているとブチ当たるのが、このクロスドメイン制約の壁。
通常はPHP Proxyを立てたりして回避するわけですが、今回のアップデートによってそんな手間は不要となり、JavaScriptだけでAPIを呼び出すことができるわけです。

ならばやるしかない!!
・・・というわけで、早速試してみました。

下準備

・アプリケーションの設定

  • アプリケーションの種類:ネイティブ クライアント アプリケーション
  • 他のアプリケーションに対するアクセス許可:Office 365 unified API (preview)
  • デリゲートされたアクセス許可:Read and write access to user mail

※ 設定方法は「Office 365 unified APIをVBAから呼び出す」とほぼ同じになりますので、細かい点は左記記事をご参照ください。ただし、Azure ADは既定でImplicit Grant Flowが無効になっているので、下記手順で有効にする必要があります。

・Azure ADでImplicit Grant Flowを有効にする手順

  1. Azure ポータルにサインインし、「Active Directory」からアプリケーションを追加します。
  2. 1.で追加したアプリケーションのダッシュボード画面下部にある「マニフェストの管理」から「マニフェストのダウンロード」をクリックします。
  3. Office_365_unified_API_JS_01_01

  4. マニフェストのダウンロード画面が表示されたら「マニフェストのダウンロード」をクリックし、マニフェスト(json)ファイルをダウンロードします。
  5. Office_365_unified_API_JS_01_02

  6. 3.でダウンロードしたマニフェストファイルをテキストエディタで開き、oauth2AllowImplicitFlowプロパティを「true」に変更後、ファイルを上書き保存します。
  7. Office_365_unified_API_JS_01_03

  8. 再びAzure ポータルからアプリケーションのダッシュボード画面を開き、「マニフェストのアップロード」をクリックします。
  9. Office_365_unified_API_JS_01_04

  10. マニフェストのアップロード画面が表示されたら「ファイルの参照」から、4.で編集したマニフェストファイルをアップロードします。
  11. Office_365_unified_API_JS_01_05

以上で準備作業は終了です。
次はいよいよコードを動かしてみます。

JavaScriptコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
    <script>
      var access_token = "";
      var client_id = "(取得したクライアント ID)";
      var redirect_uri = "(設定したリダイレクト URI)";
      var resource_uri = "https://graph.microsoft.com/";
      var rest_uri = "https://graph.microsoft.com/beta/me/messages";
      
      $(function(){
        var q = location.href.split("#");
        if(q.length > 1){
          var prms = q[1].split("&");
          for(var i = 0;i < prms.length;i++){
            prm = prms[i].split("=");
            if(prm[0].toLowerCase() == "access_token"){
              access_token = prm[1]; //access token取得
              break;
            }
          }
          $("#btnSignin").attr("disabled", true);
          $("#btnCallApi").attr("disabled", false);
          $("#btnCallApi").removeAttr("disabled");
        }else{
          $("#btnSignin").attr("disabled", false);
          $("#btnSignin").removeAttr("disabled");
          $("#btnCallApi").attr("disabled", true);
        }
        
        $("#btnSignin").click(function(){
          var auth_uri = "https://login.windows.net/common/oauth2/authorize?response_type=token&redirect_uri=" + encodeURIComponent(redirect_uri) + "&client_id=" + client_id + "&resource=" + encodeURIComponent(resource_uri);
          window.location.href = auth_uri;
        });
        
        $("#btnCallApi").click(function(){
          $.ajax({
            url      : rest_uri, 
            type     : "GET", 
            async    : false, 
            dataType : "json", 
            headers  : {
              "Authorization" : "Bearer " + access_token
            }, 
            success  : function(data){
              var ret = "";
              var v = data.value;
              for(var j = 0;j < v.length;j++){
                ret += "Subject:" + v[j].Subject + " , BodyPreview:" + v[j].BodyPreview + "\n";
              }
              $("#txtResult").val(ret);
            }, 
            error: function(){
              alert("エラーが発生しました。");
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td><button id="btnSignin">Sign In</button></td>
        <td><button id="btnCallApi">Call API</button></td>
      </tr>
      <tr>
        <td colspan="2"><textarea id="txtResult" cols="60" rows="5"></textarea></td>
      </tr>
    </table>
  </body>
</html>

Office_365_unified_API_JS_01_06

Office_365_unified_API_JS_01_07

Office_365_unified_API_JS_01_08

Office_365_unified_API_JS_01_09

やっていることは「Office 365 unified APIをVBAから呼び出す」のコードをJavaScriptに置き換えただけですが、とりあえず無事に動作確認できました。

参考Webページ

関連記事

関連記事

  1. Office関連

    ディスプレイのサイズを取得するVBAマクロ

    「VBA ディスプレイ 幅 高さ」といったキーワード検索でのアクセスが…

  2. Office関連

    名前付きセル(範囲)にコメントを付けるVBAマクロ

    Excelでマニュアルを作成する際、名前付きセル範囲を明記する必要があ…

  3. Office関連

    [PowerPoint]図やスライドをSVGとして保存する機能が追加されました。

    ※ 下記情報はInsider版のOfficeを元にしています。バージョ…

  4. Office関連

    未読メッセージ数を取得するOutlookマクロ

    Outlook 2007で追加されたFolderオブジェクトのUnRe…

  5. Office関連

    テキストボックス等Shapeオブジェクトのテキストのみを置換するWordマクロ

    Word MVPの新田さんのブログで気になる記事がありました。…

  6. Office関連

    スライドマスターのフォントを一括変更するPowerPointマクロ

    PowerPointでスライドを作成中、マスターのフォントをまとめて変…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP