はじめての App for Office 2013(Officeアプリ)で開発してみる。
はじめに
[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 サイトに発行する
参考URL
Office 2013 用アプリの概要
JavaScriptで誰でも簡単に作って稼げる「Officeアプリ」とは？
Filed Under: Office Add-ins
