はじめに
[App for Office 2013](Officeアプリ)を試してみる。
Webサービスと完全に一体化した、いろんな業務アプリが作れるんじゃない。またOfficeストアに配置できるので、ビジネス展開も簡単にすることができそう。
完成すると以下のようなアプリが作れる。
従来のように、左側が、Excelのスプレッド領域、右側が、[App for Office 2013]で重要なWeb Client領域だ(呼び方が正しいか不明) このWeb Client領域に [HTML+JavaScript]でプログラムを作り、WebサービスやExcelオブジェクトを操作してプログラムが作れる。この右側の[HTML+JavaScript]のコンテンツはWebサーバに置かれるのが肝だ!!!
それではサンプルを作ってみよう。
開発環境は以下を参考にしてください。
Visual Studio2012にて新規プロジュクトを作成する。
1) 「Office/SharePoint/アプリ/Office 2013用アプリOffice 2013用アプリ」 を選択。
2) Office アプリのタイプを選べるようです。
最初なので、「作業ウィンドウのアプリ」 を選択してみます。
3) 初期画面です。
JavaScriptファイル と Htmlファイル ができていることが分かる。
何か、このまま動くんじゃね?
【OfficeApp2.js】※Default
// この関数は、アプリがホスト アプリケーションとの対話を開始する準備が完了したときに実行されます // これにより、ボタンにクリック ハンドラーを追加する前に DOM の準備が完了します Office.initialize = function (reason) { $(document).ready(function () { $('#getDataBtn').click(function () { getData('#selectedDataTxt'); }); // setSelectedDataAsync メソッドがホスト アプリケーションでサポートされている場合、 // setDatabtn はメソッドを呼び出すためにフックされ、それ以外の場合は削除されます if (Office.context.document.setSelectedDataAsync) { $('#setDataBtn').click(function () { setData('#selectedDataTxt'); }); } else { $('#setDataBtn').remove(); } }); }; // テキスト ボックスのデータをドキュメントの現在の選択範囲に書き込みます function setData(elementId) { Office.context.document.setSelectedDataAsync($(elementId).val()); } // ドキュメントの現在の選択範囲からデータを読み取り、テキスト ボックスに表示します function getData(elementId) { Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, function (result) { if (result.status === 'succeeded') { $(elementId).val(result.value); } }); }
【OfficeApp2.html】※Default
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <title>OfficeApp2</title> <link rel="stylesheet" type="text/css" href="../Content/Office.css" /> <!-- 次のファイルに CSS スタイルを追加します --> <link rel="stylesheet" type="text/css" href="../Content/App.css" /> <script src="../Scripts/jquery-1.7.1.js"></script> <!-- アプリを配置する際に Office.js への CDN 参照を使用します --> <!--<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>--> <!-- Office.js のローカル スクリプト参照を使用してオフラインのデバッグを有効にします --> <script src="../Scripts/Office/1.0/MicrosoftAjax.js"></script> <script src="../Scripts/Office/1.0/office.js"></script> <!-- 次のファイルに JavaScript を追加します --> <script src="../Scripts/OfficeApp2.js"></script> </head> <body> <!-- 以下をコンテンツに置き換えてください --> <div id="Content"> <input type="button" value="Set data" id="setDataBtn" style="margin-right: 10px; padding: 0px; width: 100px;" /> <input type="button" value="Get data" id="getDataBtn" style="padding: 0px; width: 100px;" /> <input type="text" value="Sample Data" id="selectedDataTxt" style="margin-top: 10px; width: 210px" /> </div> </body> </html>
4) 動作確認してみたいので、F5実行。
ビルドが終わると、Excelが自動で起動して右側に作業ウィンドウが表示されて、「OfficeApp2」 が表示された。
[HTML+JavaScript]部分は、実行時にサーバーに配置される。
次は、VisualStudio2012 なしのAppの配布方法を調査します。
続きはこちら
オフィスアプリ(App for Office 2013) を Windows Azure Web サイトに発行する
コメントを残す