生産性向上に終わりなし。Office add-ins、 SharePoint Framework でマルチデバイス対応拡張開発！！

1. Session ID: APP008
本情報の内容（添付文書、リンク先などを含む）は、Microsoft Tech Summit 開催日（2016年11月1－2日）時点のものであり、予告なく変更される場合があります。

2. マルチデバイス対応の開発が今すぐできる

6. Microsoft Tech Summit

8.    
   
   
   Coming Soon
Coming Soon
 Coming Soon Coming Soon
http://dev.office.com/add-in-availability

9. Session ID:

10. WHAT's PIXTA？
投稿 買う
2000万点以上の写真・イラスト・動画を保有する
国内最大級の
デジタル素材マーケットプレイス
販売額の
22％〜58％
収入

11. PowerPointのアドイン上で
写真・イラスト素材を検索！！
テストデータを挿入して
レイアウトの確認が可能！！
イメージ通りならそのまま写真素材を
ダウンロード & 挿入！！
リリース日： 2017年1月 (予定)
※写真データをDLするには弊社の会員登録及び
定額制のライセンスを購入する必要があります。
WHAT‘s PIXTA for Office？

14. Microsoft Tech Summit

16. Add-in の構成情報を記載するファイル
<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance" xsi:type="TaskPaneApp">
<Id>c6890c26-5bbb-40ed-a321-37f07909a2f0</Id>
<Version>1.0</Version>
<ProviderName>Contoso, Ltd</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="Northwind Traders Excel" />
<Description DefaultValue="Search Northwind Traders data from Excel"/>
<AppDomains>
<AppDomain>https://www.northwindtraders.com</AppDomain>
</AppDomains>
<DefaultSettings>
<SourceLocation DefaultValue="https://www.contoso.com/search_app/Default.aspx" />
</DefaultSettings>
<Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

17. Office Store or
O365 Tenant
Developer
Web App
Users
Manifest
Web Server

20. Microsoft Tech Summit

21. getSelectedDataAsync
https://dev.office.com/docs/add-ins/develop/understanding-the-javascript-api-for-office

22. 1. 新規プロジェクト作成方法
2. 簡単なデバッグ方法
3. office.js によるデータの操作方法

23. https://dev.office.com/
https://github.com/OfficeDev

24. Session ID: APP008

26. Microsoft Tech Summit

27. 情報共有 情報発信 業務フロー
オフィス ワーカーの生産性向上

28. Microsoft Tech Summit

29. SharePoint Framework とは？
SharePoint Framework
新しい開発手法

30. SharePoint Framework とは？
JavaScript 開発者 が
SharePoint Framework で
SharePoint に出会う
生産性が向上した未来

31. SharePoint Framework のメリット
運用上のメリット
 開発用サーバー運用 不要
 開発用ライセンス管理 不要
 オンプレミスに展開予定

32. SharePoint Framework のメリット
開発上のメリット
 フロントエンドで開発可能
 マルチデバイスに一括対応
 Linux, Mac で開発可能

33. まとめ
低コストの開発で
業務に合わせた成果物
オフィスワーカーの
生産性が向上した未来の実現

34. Microsoft Tech Summit

35. 開発環境構築
すべて オープン ソース ソフトウェア
1. NodeJS のインストール
2. NPM コマンドでパッケージのインストール
3. TypeScript 対応開発環境のインストール

36. メリット
 静的型付けによる可読性向上
 開発環境のコード補完による恩恵向上
 コンパイル時エラーでコードミスの発見
開発環境構築: TypeScript について
TypeScript コードはコンパイルすると
JavaScript コードに変換される

37. Demo: REST API でリスト一覧を取得
今回のデモは以下の項目を実施:
1. ローカル マシンで開発&テスト
2. SharePoint のデータを利用したテスト
ソリューションの展開は下記 URL をご覧ください
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-
started/deploy-web-part-to-cdn

38. Microsoft Tech Summit
Demo:
REST API でリスト一覧を取得

39. Demo: REST API でリスト一覧を取得
workbench.aspx ダウンロード先:
https://github.com/SharePoint/sp-dev-
docs/blob/master/workbench.aspx
workbench ダウンロード先:
https://github.com/SharePoint/sp-dev-
docs/blob/master/workbench.aspx

40. Microsoft Tech Summit

41. Demo: REST API でリスト一覧を取得
workbench.aspx ダウンロード先:
https://github.com/SharePoint/sp-dev-
docs/blob/master/workbench.aspx
workbench ダウンロード先:
https://github.com/SharePoint/sp-dev-
docs/blob/master/workbench.aspx

42. Microsoft Tech Summit

43. SharePoint workbench ページ
開発/検証を加速させる作業台 (Workbench)
SharePoint へ展開せずに 検証可能
コンテキスト (環境情報) を利用できる
マルチ デバイス対応開発
コンパイル操作なしで変更箇所が即時反映

44. Microsoft Tech Summit

45. Demo: REST API でリスト一覧を取得

46. Demo: REST API でリスト一覧を取得
workbench.aspx ダウンロード先:
https://github.com/SharePoint/sp-dev-
docs/blob/master/workbench.aspx
workbench ダウンロード先:
https://github.com/SharePoint/sp-dev-
docs/blob/master/workbench.aspx

47. Microsoft Tech Summit

48. Demo: REST API でリスト一覧を取得

50. Demo のまとめ
SharePoint Framework 一連作業
 ローカル Web サーバー利用
 TypeScript でコーディング
 workbench で開発の加速
 展開前に SharePoint でテスト

51. SharePoint Framework のまとめ
新しい開発手法 (低コスト開発実現)
 開発のためのコスト 無し
 マルチ デバイスに一括対応
 JavaScript 開発による恩恵
オフィス ワーカーの
生産性が向上した未来の実現

52. http://github.com/SharePoint
http://dev.office.com/SharePoint
http://aka.ms/JPSPSupport