2018/01/31開催「fun-tech meetup #6 IT技術ではじめての○○○ビアバッシュLT大会」用のLT資料です。

1. はじめてのOFFICE アドイン
MICROSOFT MVP
きぬあさ
20180131 fun-tech meetup #6 LT 1

2. 自己紹介
1. 名前：きぬあさ（Twitter：@kinuasa）
2. ブログ：
3. 職業：中小企業総務担当
4. Microsoft MVP(Office Development)
20180131 fun-tech meetup #6 LT 2

3. MICROSOFT MVPとは？
“マイクロソフト製品やテクノロジーに関する豊富な知識と経験を持
ち、コミュニティやメディアを通じて、幅広いユーザーと共有して
いる個人を表彰する支援プログラム”
http://ascii.jp/elem/000/001/168/1168432/ より
20180131 fun-tech meetup #6 LT 3

4. https://mvp.microsoft.com/en-us/Pages/mvp-award-update より
4

5. OFFICE DEVELOPMENTの活動領域
1. Office アドイン開発
2. Office 365 API(を使ったシステム)開発
3. SharePoint アドイン開発
4. iOS, Android向けOffice開発
5. PHP/Node.js/AngularJSを使ったOffice開発
6. Microsoft Teams開発
5
⇒これまで(VBA,VSTO)とは異なる
新しいOffice開発

6. OFFICE アドインとは？
1. Office アドイン：Office 2013で追加された新しい機能
2. Officeアプリケーション(Word,Excel,PowerPoint,Outlookなど)上で動
作する
3. HTML + JavaScriptで開発
4. Officeストア(Microsoft AppSource)からもアドインを追加可能
20180131 fun-tech meetup #6 LT 6

7. 7

8. 8

9. OFFICE アドインの構成
Office アドインはマニフェスト(XML)とWebページによって構成
a. マニフェスト：アドイン名や本体の場所などを記載。
b. Webページ：アドイン本体。JavaScript API for Office(Office.js
ライブラリ)によって、Officeアプリケーションに読み書きを
行う。
20180131 fun-tech meetup #6 LT 9

10. https://dev.office.com/getting-started/addins より
10

11. OFFICE アドインのメリット
1. Web標準技術で開発可能
2. クロスプラットフォーム
20180131 fun-tech meetup #6 LT 11

12. OFFICE アドインのデメリット
1. 圧倒的知名度の低さ
2. 圧倒的情報量の少なさ
20180131 fun-tech meetup #6 LT 12

13. OFFICE アドインの開発方法
1. Visual Studio
2. 任意のエディター
※メモ帳だけでも作ろうと思えば作れる。
20180131 fun-tech meetup #6 LT 13

14. SCRIPT LABによるOFFICE アドイン開発体験
1. Script Lab：Microsoft Garageによって開発・公開されたOffice アド
イン。
2. 最低限必要なもの：
a. Webブラウザー(Office Online)
b. Microsoft アカウント
c. (JavaScriptの知識)
20180131 fun-tech meetup #6 LT 14

15. 15

16. １．Office Onlineにサインインします。 16

17. ２．挿入タブ→Office アドインボタン→「Script Lab」で検索します。17

18. ３．「Script Lab」タブが表示されます。 18

19. ４．「Code」ボタンをクリックすると、作業ウィンドウにサンプルコー
ドが表示されます。
19

20. ５．Basics→Insert formatted text を選択します。 20

21. ６．コードが表示されるので、「Run in this pane」ボタンをク
リックします。
21

22. ７．「Run code」ボタンをクリックすると、コードが実行され、装
飾されたテキストが本文に挿入されます。
22

23. ８．Code画面に戻って、一部コード(挿入する文字列、フォント、
文字サイズ)を変更します。 23

24. ９．再度「Run code」を実行すると、手順８．で書き換えた文字列が本
文に挿入されます。
24

25. SCRIPT LABの特長
1. Office Onlineでも実行可能(※インストール版Officeの方が軽快)
2. 書いたコードをすぐに試せる。
3. サンプルコードが豊富。
4. IntelliSenseが効く。
5. オープンソース(https://github.com/OfficeDev/script-lab)
20180131 fun-tech meetup #6 LT 25

26. ツールを使って楽々OFFICE アドイン開発
1. ひな型作成：YO OFFICE(Yeoman)
a. https://github.com/officedev/generator-office
b. YO OFFICE(Yeoman)を使ってOffice アドインのひな型を作成する方法
20180131 fun-tech meetup #6 LT 26

27. ツールを使って楽々OFFICE アドイン開発
2. ひな型作成～アドインのテスト：office-toolbox
a. https://github.com/OfficeDev/office-toolbox
b. office-toolboxを使って簡単にOffice アドインを作成する方法
20180131 fun-tech meetup #6 LT 27

28. まとめ
1. Office アドインはクロスプラットフォームなWebアプリ。
2. ストア経由で世界中に配信可能。
3. Visual Studioが無くても開発できる。
28

29. 参考資料
1. Office Dev Center
 https://dev.office.com/docs/add-ins/overview/office-add-ins
2. Twitter(@OfficeDev)
 https://twitter.com/officedev
3. GitHub
 https://github.com/OfficeDev
 https://github.com/OfficeDev/office-js-docs.ja-JP/tree/live
4. 私のブログ
 https://www.ka-net.org/blog/?cat=130 29

30. 30