Office アドインハンズオン

#OfficeDev
“Office アドイン” ハンズオン
Microsoft MVP for Office Development
@kinuasa
2019.11.23(Sat) 1Global Microsoft 365 Developer Bootcamp 2019 Tokyo

#OfficeDev
自己紹介
1. HN：きぬあさ / @kinuasa
2. ブログ：初心者備忘録(https://www.ka-net.org/blog/)
• Office アドイン
• VBA
• Google Apps Scriptなど
2019.11.23(Sat) Global Microsoft 365 Developer Bootcamp 2019 Tokyo 2

#OfficeDev
自己紹介
3. 職業：中小企業(従業員数100名規模)の情シス的な総務係
4. Microsoft MVP
a. 2010年～ Office System
b. 2015年～ Outlook
c. 2016年～ Office Development
コードを書くのはVBSかPowerShellくらいです

#OfficeDev
Microsoft MVPとは？
1. Microsoft MVPアワード：Microsoftが「個人」の過去12か月間の技術
コミュニティへの貢献に、感謝の意を表して授与する特別な賞
2. @chomado さんの資料： https://chomado.github.io/MS-MVP/
3. @Rie_Moriguchi さんの資料：
https://www.slideshare.net/RieMoriguchi/microsoft-mvp-x-
devrel

#OfficeDev
ハンズオンの目的
本ハンズオンは、「Office アドイン」の概要と開発方法の
学習を目的としています。
実際にアドインを動かして仕組みを理解し、Script Labで
遊んで “Office アドインでどんなことができるのか” を体
験してみましょう！

#OfficeDev
ハンズオン内容

時間(分) 内容資料
20 Office アドインの概要説明・アドイン紹介第1章
40 メモ帳とXAMPPを使ったOffice アドイン開発第2章
5 休憩ー
50
Node.js環境構築第4章
VS Codeを使ったOffice アドイン開発第8章
5 休憩ー
20 Script Lab 第5章
20 まとめ(参考書籍紹介他) ー

#OfficeDev
注意事項など

#OfficeDev
注意事項
1. 資料はGitHub：
https://github.com/kinuasa/OfficeAddInsHandsOn
2. 動作確認は基本的にOffice Online
3. まったり進行
4. 進められる人はどんどん進めちゃってください！
5. 「もっとハンズオン！」にもチャレンジ

#OfficeDev
ハンズオン環境
OS Windows 10 Pro x64
Office Office Online (Office on the web), Office 365 ProPlus
Server XAMPP Portable
Editor メモ帳, Visual Studio Code
Browser Microsoft Edge(非Chromium版), Internet Explorer

#OfficeDev
XAMPPの証明書について
1. 2019年11月時点で公開されているXAMPPの最新バージョン
「7.3.11」ではサーバーの証明書の有効期間が2019年11月9日となっ
ており、そのままでは証明書をインポートしても期限切れで使用できま
せん。
2. (XAMPPのインストールフォルダ)apacheconfssl.crt にある
「server.crt」ファイルをGitHubのものに置き換えてから、証明書のイ
ンポート作業を行ってください(ハンズオン資料・2.1.2参照)。

#OfficeDev
Office アドインの概要

#OfficeDev
Office アドインとは？
1. Office 2013で追加されたWeb連携機能の一つ。
2. HTMLやCSS、JavaScriptといったWeb標準技術を使って、
WordやExcel、PowerPoint等のOfficeアプリケーションの機
能を拡張することができる。
3. “Officeアプリケーション上で動作するWebアプリ”

• Wikipedia機能

• 翻訳機能

• 図形挿入アドイン
https://appsource.microsoft.com/ja-jp/product/office/WA104379944 より

• 地図記号挿入アドイン
https://appsource.microsoft.com/ja-jp/product/office/WA104380284 より

#OfficeDev
Office アドインの構成
1. 本体となるWebアプリと、アプリの各種情報が記載されたマ
ニフェストファイル(XML)の2つで構成される。
2. Webアプリ：専用のJavaScriptライブラリ(JavaScript API
for Officeライブラリ)読み込み。
3. マニフェストファイル：Webアプリの場所やID、説明やバー
ジョンといった、アドインの動作に必要な情報が記載。

XML
マニフェスト
HTML JS
Webアプリ
Office アドイン
• AppSource
• 共有フォルダ
• SharePoint など
カタログ
• Azure(IIS)
• Apache など
サーバー
• Word
• Excel
• PowerPoint など
Officeアプリプリケーション
• Office アドインの構成

#OfficeDev
Office アドインの強み
1. 実体がWebアプリ：Web標準技術で開発可能、Webサービス
やAPIとの連携が取りやすい。
2. クロスプラットフォーム：Windows用、Mac用、Office
Online、様々なOffice環境実行可能。
3. 配布：VBAマクロのように一台一台配布する必要がない。

#OfficeDev
Office アドインの種類
1. 作業ウィンドウアドイン：Officeアプリケーションの右側のウィンドウ
(作業ウィンドウ)で動作するアドイン。
2. コンテンツアドイン：Office文書に直接埋め込む形で動作するアドイン。
3. Outlook アドイン(メールアドイン)：OutlookやOutlook.com上で動作
するアドイン。
※今回のハンズオンでは取り扱いません。

• 作業ウィンドウアドイン

• コンテンツアドイン

#OfficeDev
Office アドインの活かし方
1. VBA/VSTOとのすみ分け
a. 自分しか使わない、単発、小規模 → VBA
b. 組織で使用、.Netの力を使いたい → VSTO
c. Office Onlineでも使いたい、要Web連携機能 → Office アドイン
2. 強みはやはり「Webアプリ」＆「クロスプラットフォーム」
a. 自社製Webアプリ, kintone, Salesforce, G Suite × Excel・Wordなど
b. Office混在環境：Windows＆Mac＆タブレット

#OfficeDev
メモ帳とXAMPPを使った
Office アドイン開発

#OfficeDev
1. XAMPP Portableのインストール(インストール先：C:xampp) 2.1.1
2. GitHub(https://github.com/kinuasa/OfficeAddInsHandsOn)から資料一式DL
3. DLした資料を展開：C:xampphtdocsOfficeAddInsHandsOn
4. 証明書差し替え：
(XAMPPのインストールフォルダ)apacheconfssl.crtserver.crt
5. 証明書のインポート 2.1.2
6. マニフェストファイル作成 2.3
7. アドイン本体となるWebページの作成 2.4
8. Edgeの設定 7.4
CheckNetIsolation LoopbackExempt -a -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe“
about:flags → localhost ループバックを許可するオプションを有効化
9. アドインの動作確認(Office Online) 7.2
10. アドインのデバッグ方法の確認 7.3

#OfficeDev
Node.js環境構築

#OfficeDev
1. Node.js(https://nodejs.org/ja/)のインストール 4.1
• node -v , npm -v
2. YO OFFICE!のインストール 4.2
• npm install -g yo generator-office

#OfficeDev
VS Codeを使った
Office アドイン開発

#OfficeDev
1. Visual Studio Codeのインストール 8.1
2. Visual Studio Codeの日本語化(Japanese Language Pack for Visual
Studio Code) 8.2
3. VS Code＆YO OFFICE!＆Office OnlineによるOffice アドイン開発 8.5
• 開発用フォルダ：C:apps
• yo office → Office Add-in Task Pane project, JavaScript, My Office Add-in,
Excel → フォルダが作成されるのでCDコマンドで移動
• npm run start:web

#OfficeDev
Script Lab

#OfficeDev
1. Office Online(https://www.office.com/)にアクセス
2. 「挿入」タブ → 「Office アドイン」
3. ストア → 「script」で検索 → 「Script Lab」を追加
4. 「Script Lab」タブ → 「Code」ボタン
5. 「Samples」から様々なサンプル実行

#OfficeDev
まとめ

#OfficeDev
参考書籍
1. Building Office Add-ins using Office.js
• Michael Zlatkovsky [著] ※MSの中の人
• 価格：$15.99 ～ $19.99 (クレジットカード/PayPal)
• URL： https://buildingofficeaddins.com/

#OfficeDev
https://www.microsoft.com/en-us/garage/profiles/script-lab/ より

#OfficeDev
参考書籍
2. マイクロソフト Office 用アプリ開発スタートアップガイド
• 富士ソフト [著]
• 価格：￥3,168
• URL： https://book.mynavi.jp/manatee/books/detail/id=56193
古い！

#OfficeDev
Office Scripts
1. Ignite 2019で発表された新機能
2. 「マクロの記録」機能のように、Excel Online上での操作を記録
3. 開発者向けではなくエンドユーザー向けの立ち位置
4. Office アドインと同じExcel JavaScript APIsでスクリプトを拡張可能
5. 2019年末までにプレビュー版が公開予定

https://techcommunity.microsoft.com/t5/Excel-Blog/Excel-Announcements-Ignite-
2019/ba-p/964482 より

#OfficeDev
1. Office アドインは『Officeアプリケーション上で動くWebアプリ』
2. kintoneやSalesforce、G SuiteなどのWebサービスとの連携に強い！
3. Web標準技術＋クロスプラットフォーム
4. 何ができるか知りたいときは『Script Lab』
まとめ

Office アドインハンズオン

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Office アドインハンズオン

Similar to Office アドインハンズオン (20)

More from kinuasa

More from kinuasa (17)

Recently uploaded

Recently uploaded (8)