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関連

    文書が互換モードかどうかを判定するWordマクロ

    古いバージョンのWordで作成された文書を開くと、タイトル バーに「互…

  2. Office関連

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

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

  3. Office関連

    アクティブなIEのタブを閉じるVBAマクロ

    「VBA アクティブ IE タブ 閉じる」といったキーワード検索でのア…

  4. Office関連

    「DQNネーム辞書」を更新しました。

    前のブログで公開していたIME 2010用の「DQNネーム辞書」を更新…

  5. Office アドイン

    Global Microsoft 365 Developer Bootcamp 2019 Tokyo…

    先週土曜日23日、品川の日本マイクロソフトで「Global Micro…

  6. Office関連

    Office 2013をインストールしてみました。

    CNET Japanの記事「マイクロソフト、「Office 2013」…

コメント

  • コメント (0)

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

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

Time limit is exhausted. Please reload CAPTCHA.

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

Translate

最近の記事

アーカイブ

PAGE TOP