■Office用アプリとは
「Office用アプリ」は、Office 2013で追加された新機能の一つです。Webと連携することで、Officeに役立つさまざまな機能を作成したり利用することができます。
Office 2013では、クラウドサービスとの連携が強化されました。Office用アプリは、Office 2013で追加されたWeb連携機能の一つです。Word、Excel、Power Point、Outlookなどで、Webページを利用したアプリとして動作させることができます。
Webページの中で、JavaScriptライブラリを読み込むことにより、ドキュメントの文字列を読み込んだり、書き込んだりすることが可能になります。
また、Office用アプリの本体はWebページなので、HTMLやCSS、Java ScriptといったWebの標準技術を知っていれば、誰でも開発できるというメリットを持っています。このように、開発が比較的容易なのも、Office用アプリの特徴の一つといえるでしょう。
なお、Office用アプリはドキュメントやワークブックなどの“ファイル”に登録されます。WordやExcelなどのアプリケーション本体に、機能として登録されるのではないところに注意が必要です。追加したOffice用アプリを使用できるのは、アプリを追加したファイルのみになります。
Office用アプリは、XML形式のマニフェストファイルと、アプリ本体であるWebページの2つで構成されています。この2つのファイルは、一般的なテキストエディタを使用して作成することができます。特段、専用の開発環境やツールを用意する必要はありません。
ここでは、私が作成した「サムネイル作成アプリ」をサンプルに、解説を行います。このアプリは、2014年に開催された、日経ソフトウエア主催の「Office用アプリ開発コンテスト」で特別賞を受賞しました。
このアプリは、学習用サンプルとして自由にダウンロードすることができます。
サンプルファイル （OfficeAppSmp.zip
2.4KB）
使用の際には、画像API提供元の「HeartRails」様の利用規約を順守してください。また使用に関するトラブルに対して、作者は一切責任を負いません。
HeartRails利用規約
■マニフェストファイルの作成
マニフェストファイルには、アプリの種類やアプリ本体となるWebページのURL、開発者名、対応するOffice製品などの、アプリに関する設定情報を記述します。
［ダウンロードファイルのcreatethumbnail.xml］
<?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
<Id>7ED6A03E-23C1-4E4D-8CB0-C004A9B94C31</Id>
<Version>1.0</Version>
<ProviderName>Negotum</ProviderName>
<DefaultLocale>ja-jp</DefaultLocale>
<DisplayName DefaultValue="サムネイル作成アプリ" />
<Description DefaultValue="Word、Excel、PowerPoint向けのサムネイル作成作業ウィンドウアプリ"/>
<Capabilities>
<Capability Name="Document" />
<Capability Name="Workbook" />
<Capability Name="Presentation" />
</Capabilities>
<DefaultSettings>
<SourceLocation DefaultValue="http://localhost/app/createthumbnail.html" />
</DefaultSettings>
<Permissions>ReadWriteDocument</Permissions>
</OfficeApp> |
OfficeAppで、Office用アプリの種類を指定します。「xsi:type="TaskPaneApp"」と記述すると、作業ウィンドウに表示される「作業ウィンドウアプリ」として動作させることができます。
Idは、アプリを識別するための固有のIDです。GUIDと呼ばれる文字列を指定します。GUIDは、VBAで簡単に生成することができます。イミディエイトウィンドウに次のコードを記述、［Enter］キーを押します。GUIDが生成されるので、コピーしてお使いください。
?Mid(CreateObject("Scriptlet.TypeLib").GUID, 2, 36)
Version、ProviderName、DefaultLocale、DisplayName、Description、には、アプリのバージョンや提供者、地域、アプリ名などを記述します。
Capabilitiesは、どのOfficeアプリケーションで利用できるかを指定します。Wordなら「Document」、Excelなら「Workbook」、Power Pointなら「Presentation」と指定します。
SourceLocationは、アプリ本体であるWebページのURLを指定します。お使いの環境に応じて、URLを書き換えてください。
Permissionsは、アプリのアクセス権を指定します。
このマニフェストファイルの置き場所を、「カタログサーバー」と呼びます。
Office用アプリを実行するとき、
| (1).カタログサーバーからマニフェストファイルを読み取る |
| (2).マニフェストファイルに記載されたURLから、本体のWebページを読み込む |
| (3).Officeアプリケーション上でアプリを実行する |
これらの手順にしたがって実行されます。
ここでは、カタログサーバーを共有フォルダーに設定し、そこにマニフェストファイルを保存します。
Cドライブの直下に「Apps」というフォルダーを作り、共有フォルダーの設定をします。「ファイルの共有」画面より「Everyone」のユーザーを追加、「アクセス許可のレベル」より「読み取り/書き込み」を選択、「共有」ボタンを押します。
このフォルダに、先ほどのマニフェストファイルを保存します。ここでは「createthumbnail.xml」という名前で保存します。皆さんがテキストエディタで作成したマニフェストファイルを保存するときは、文字コードに「UTF-8」を指定するのを忘れないでください。
次に、マニフェストファイルを保存した共有フォルダーを、カタログサーバーとして登録します。
Excel 2013を起動して、「ファイル」タブ＞「オプション」を選択します。オプション画面より「セキュリティセンター」を選択、「セキュリティセンターの設定」ボタンをクリックします。
セキュリティセンターの「信頼できるアプリカタログ」を選択。「カタログのURL」欄に、共有フォルダーのパスを「\\コンピュータ名\Apps」と入力して「カタログの追加」ボタンをクリックします。（コンピュータ名には、共有フォルダを作成したPCのコンピュータ名を記述します）
追加したカタログの「メニューに表示する」チェックをオンにし、「OK」ボタンをクリックします。メッセージが表示されるので、Excelを再起動します。
■アプリ本体（Webページ）の作成
次に、アプリ本体の作成を行います。
［ダウンロードファイルのcreatethumbnail.html］
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>サムネイル作成アプリ</title>
<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>
<script>
Office.initialize = function(reason) {}
window.onload = function() {
var btn1 = document.getElementById('btnOK1');
btn1.onclick = function() {
Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
{ valueFormat: "unformatted", filterType: "all" },
function (asyncResult) {
var error = asyncResult.error;
if (asyncResult.status === Office.AsyncResultStatus.Failed) {
write(error.name + ": " + error.message);
}
else {
// Get selected data.
var dataValue = asyncResult.value;
var divthumb = document.getElementById("thumb");
divthumb.innerHTML = "<img src='http://capture.heartrails.com/free?" + dataValue + "'>";
}
});
}
var btn2 = document.getElementById('btnOK2');
btn2.onclick = function() {
var divthumb = document.getElementById("thumb");
Office.context.document.setSelectedDataAsync(
divthumb.innerHTML, {coercionType:Office.CoercionType.Html});
}
}
</script>
</head>
<body>
<h1>サムネイル作成</h1>
<h3>選択したURLのサムネイルを作成します</h3>
<form name="f1" action="#">
<button id="btnOK1" type="button">選択したURLのサムネイル画像を取得する</button><br><br>
<button id="btnOK2" type="button">サムネイル画像を挿入する （Wordのみ）</button><br><br>
<div id="thumb"></div><br>
<h6>Powerd by <a href="http://capture.heartrails.com/">
HeartRails Capture | サムネイル画像／PDF ファイル作成サービス</a></h6>
</form>
</body>
</html> |
「src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"」が、JavaScript API for Officeライブラリをコンテンツ配信ネットワークから読み込む部分です。scriptタグの中に、Office用アプリを動作させるのに必要なコードを記述します。
bodyタグの中には、作業ウィンドウに表示させるフォームやコントロール、キャプションなどを設定します。
次は、アプリを配置するためのWebサーバーを用意します。ローカル環境で動作するWebサーバーの「Apache」や、ホームページを持っている人ならFTTPサーバーに、フォルダを用意し、そこにアプリ本体のhtmlファイルを保存します。
ここで保存したファイルのURLに、マニフェストファイルのSourceLocationのURLを書き換えます。テキストエディタで作成したhtmlファイルを保存するときは、文字コードに「UTF-8」を指定するのを忘れないでください。
最後に、サンプルのOffice用アプリを動かしてみましょう。Excel 2013を起動して、「挿入」タブにある「Office用アプリ」ボタンをクリックします。開いた「Office用アプリ」画面で「共有フォルダー」を選択すると、「サムネイル作成アプリ」というアプリが表示されます。これを選択して「挿入」ボタンを押すと、作業ウィンドウにアプリが表示されます。
サムネイル作成アプリは、Word、Excel、PowerPoint向けのサムネイル作成、作業ウィンドウアプリです。指定されたURLのWebページのサムネイル画像を取得、ドキュメントに挿入します。（ドキュメントへの挿入はWordのみの機能になります）
サムネイル作成アプリの使用方法は次の通りです。
| (1).ドキュメントのURL部分を選択する（ExcelではURLの入力されたセルを選択する） |
| (2).［選択したURLのサムネイル画像を取得する］ボタンをクリックすると、サムネイル画像を取得、作業ウィンドウ内に表示する |
| (3).［サムネイル画像を挿入する］ボタンをクリックすると、表示したサムネイル画像を、ドキュメント内のカーソル位置に挿入する（Wordのみ） |
以上、Office用アプリ作成のテクニックを紹介しました。
Office用アプリは、Webと連携することで、Officeに役立つさまざまな機能を作成して利用できる新機能です。
Officeの新機能「Office用アプリ」、皆さんの業務で、ぜひご活用ください。
|
