Office アドイン

Office 365でVisio JavaScript APIsを試してみました。

昨年末にVisio Onlineの機能をJavaScriptで拡張する方法について記事を書きました。

Office Dev Center – Visio JavaScript APIs Preview」によると、ついに新しいVisio JavaScript APIsが使えるようになったみたいなので、さっそく試してみました。

※ 下記手順はOffice 365 Enterprise E3環境で確認を行っています。

  1. Office 365の開発者向けサイトを開きます。
  2. ドキュメント」にvsdxファイルをアップロードします。
  3. Visio Onlineでアップロードしたvsdxファイルを開き、URL(https://*****.sharepoint.com/sites/dev/_layouts/15/WopiFrame.aspx?sourcedoc={********-****-****-****-************}&action=interactivepreview)をコピーしておきます。
  4. サイト コンテンツ」から「サイトのページ」を開きます。
  5. 新規」から「Web パーツ ページ」を選択します。
  6. 「新しい Web パーツ ページ」画面が表示されたら、名前、レイアウト、保存場所を選択し、「作成」ボタンをクリックします。(私は「ページ全体, 縦型」レイアウトを選択しました。)
  7. ページの編集画面が表示されたら「Web パーツの追加」を選択します。
  8. メディアおよびコンテンツ」から「スクリプト エディター」を選択し、「追加」ボタンをクリックします。
  9. スニペットを編集」から下記コードを貼り付け、「挿入」ボタンをクリックします。
  10. <script src='https://visioonlineapi.azurewebsites.net/visio.js' type='text/javascript'></script>
    
    Enter Visio File Url:<br/>
    <script language="javascript">
    document.write("<input type='text' id='fileUrl' size='120'/>");
    document.write("<input type='button' value='InitEmbeddedFrame' onclick='initEmbeddedFrame()' />");
    document.write("<br />");
    document.write("<input type='button' value='SelectedShapeText' onclick='getSelectedShapeText()' />");
    document.write("<textarea id='ResultOutput' style='width:350px;height:60px'> </textarea>");
    document.write("<div id='iframeHost' />");
    
    var textArea;
    // Loads the Visio application and Initializes communication between devloper frame and Visio online frame
    function initEmbeddedFrame() {
            textArea = document.getElementById('ResultOutput');
        var url = document.getElementById('fileUrl').value;
        if (!url) {
            window.alert("File URL should not be empty");
        }
        // APIs are enabled for EmbedView action only.   
        url = url.replace("action=view","action=embedview");
        url = url.replace("action=interactivepreview","action=embedview");
    
           var session = new OfficeExtension.EmbeddedSession(url, { id: "embed-iframe",container: document.getElementById("iframeHost") });
           return session.init().then(function () {
            // Initilization is successful 
            textArea.value  = "Initilization is successful";
            OfficeExtension.ClientRequestContext._overrideSession = session;
        });
         }
    
    // Code for getting selected Shape Text using the shapes collection object
    function getSelectedShapeText() {
        Visio.run(function (ctx) {  
           var page = ctx.document.getActivePage();
           var shapes = page.shapes;
           shapes.load();
               return ctx.sync().then(function () {
                   textArea.value = "Please select a Shape in the Diagram";
                   for(var i=0; i<shapes.items.length;i++)
                {
                  var shape = shapes.items[i];
                      if ( shape.select == true)
                   {
                    textArea.value = shape.text;
                        return;
                       }
                }
          });
         }).catch(function(error) {
            textArea.value = "Error: ";
            if (error instanceof OfficeExtension.Error) {
                textArea.value += "Debug info: " + JSON.stringify(error.debugInfo);
            }
        });
    }
    </script>

    Visio JavaScript APIs reference より

  11. 編集の終了」ボタンをクリックして、ページの編集を終了します。
  12. Enter Visio File Url」ボックスに手順3.でコピーしたvsdxファイルのURLを貼り付け、「InitEmbeddedFrame」ボタンをクリックします。
  13. Initilization is successful」とのメッセージが表示されたら読み込み成功です。
  14. 埋め込まれたVisioのフレーム上でシェイプを選択し、「SelectedShapeText」ボタンをクリックすると、テキストエリアにシェイプの文字列が表示されます。

以上の手順で、Visio JavaScript APIsの動作確認をすることができました。


2017/2/13 追記:
ウィンドウのズームやシェイプの列挙、ハイパーリンク情報の取得するコードを書いてみました。

7-Zipで圧縮・解凍を行うVBAマクロ前のページ

Visio JavaScript APIで遊んでみました。次のページ

関連記事

  1. Office関連

    インストールされているアプリケーション一覧を取得するVBAマクロ

    端末にインストールされているアプリケーション名を調べる必要があったので…

  2. Office アドイン

    [Office用アプリ]アプリ審査を通過するためのポイント

    前回の記事で、Seller Dashboard(販売者ダッシュボード)…

  3. Office関連

    UIAutomationClient参照時にDLL読み込みエラーが発生した時の対処法

    マクロでダイアログやボタンの操作を行う時に便利なUI Automati…

  4. Office関連

    ヘッドレス ChromeとSeleniumBasicでWebページ全体のスクリーンショットを撮る方法…

    先日、ヘッドレス ChromeでWebページ全体のスクリーンショットを…

コメント

  • コメント (0)

  • トラックバックは利用できません。

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

Time limit is exhausted. Please reload CAPTCHA.

※本ページはプロモーションが含まれています。

Translate

最近の記事

アーカイブ

PAGE TOP