Japan Microsoft MVP Community Connection 2017 Autumn LT @kinuasa

1. 非開発者向け
OFFICE アドイン開発方法の紹介
きぬあさ
体験

2. 自己紹介
1. 名前：きぬあさ（Twitter：@kinuasa）
2. ブログ：
3. 職業：中小企業総務担当
4. 受賞歴：
a. Office System：2010年7月~
b. Outlook：2015年7月~

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

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

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

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

11. https://github.com/OfficeDev/office-js-docs.ja-JP/blob/live/images/DK2_AgaveOverview07.png より

12. OFFICE アドインの開発方法
1. Visual Studio
2. 任意のエディター(※メモ帳だけでも作ろうと思えば作れる)

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

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

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

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

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

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

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

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

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

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

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

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

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

28. １．「 」っていう機能があるよ。

29. ２．Officeアドインは だよ。

30. ３．「 」でコードを学べるよ。

31. ４．Visual StudioがなくてもOffice アドインを作れるよ。

32. エディターだけでマニフェスト～アドイン本体まで作ると、
仕組みがよく分かってオススメだよ。

33. 参考資料
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