[Office用アプリ]Excel Services ECMAScriptとの連携

ホーム
Office アドイン, Office関連, Office 2013, Excel Services ECMAScript
[Office用アプリ]Excel Services ECMAScriptとの連携

2013.04.24

[Office用アプリ]Excel Services ECMAScriptとの連携

「[Office用アプリ]カレンダーから日付入力」でも使用していますが、コンテンツアプリを挿入したブックをWebページに埋め込むことで、ブラウザー上でOffice用アプリを利用することができます(Excel Web App経由)。

先日登壇した第一回 Apps for Office 勉強会の中で小ネタとした紹介したのですが、Webページに埋め込んだブックはExcel Services ECMAScript(Excel Services JavaScript API)で操作することができるので、

JavaScriptでセルに値を書き込み → 値を読み込んでOffice用アプリ動作

といったことができるようになります。

<!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-1.9.1.min.js"></script>
        <script src="http://excel.officeapps.live.com/x/_layouts/ExcelJs.ashx?v=1"></script>
        <script>
        var fileToken = "SD92A165759188B352!521/-7880906317294423214/";
        
        if (window.attachEvent) {
            window.attachEvent("onload", loadEwaOnPageLoad);
        } else {
            window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
        }
        
        function loadEwaOnPageLoad() {
            var props = {
                uiOptions: {
                    showDownloadButton: false,
                    showParametersTaskPane: false,
                    selectedCell: "'Sheet1'!C1"
                },
                interactivityOptions: {
                    allowTypingAndFormulaEntry: true,
                    allowParameterModification: false,
                    allowSorting: false,
                    allowFiltering: false,
                    allowPivotTableInteractivity: false
                }
            };
            Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);
        }

        function onEwaLoaded(result) {
             ewa = Ewa.EwaControl.getInstances().getItem(0);
        }
        
        function setRangeValue(asyncResult) {
            if (asyncResult.getCode() != 0) {
                alert("Err:" + asyncResult.getDescription());
            }
        }
        
        $(function() {
            $("#txtInput").change(function() {
                //alert($(this).val());
                var ary = new Array();
                ary[0] = new Array();
                ary[0][0] = $(this).val();
                ewa.getActiveWorkbook().getActiveCell().setValuesAsync(ary,setRangeValue,null);
            });
        });
        </script>
    </head>
    <body>
            <input id="txtInput" type="text" value="" style="font-size:24pt;"><br><br>
            <div id="myExcelDiv" style="width: 500px; height: 500px"></div>
    </body>
</html>

上記コードではインプットボックスに入力した値をブック上のセルに書き込み、それに合わせてアプリが動作するようになっています。Office用アプリとExcel Services ECMAScriptの連携は工夫次第で色々遊べますので、興味がある方は是非お試しください。

ブックの埋め込み方法やExcel Services ECMAScriptの処理については当ブログのExcel Services ECMAScriptカテゴリーで紹介していますので、そちらをご参照ください。