Apps for Office (Office用アプリ) seminar document

1. Apps for Office
初心者向けハンズオン
Visual Studio 2012～Azureの一
連の開発からリリースまで
2013/06/17 野呂清二
1http://www.appsforoffice.net/study-meeting/study-meeting-2st/

2. 本日の目的
初めての方でも、Office用アプリを開発して、
アプリをユーザへ提供できるようになります。
※Officeストアへの登録はきぬあささんのセッションで行います。
①アプリを開発 ③ユーザへ提供
マニュフェストファイル
Officeファイル(Excel等）
②アプリを配置
Webサイト(html, aspx. PHP等)
2

3. 本日の内容
３０分
アプリ作成の手順を説明します。
ご気軽に質問・疑問お願いします。
６０分
ハンズオンでアプリを開発します。
ご気軽に質問・疑問お願いします。
3

4. 4

5. 使用する環境について 1/2
• この資料の場所(以下のURLの一番下)
– http://www.appsforoffice.net/study-
meeting/study-meeting-2st/
• ネット環境
– MS様と弊社のE-mobileを準備しました。
5

6. 使用する環境について 2/2
• 開発ツール
– (#1) Visual Studio 2012 Pro以上（試用版）
– (#2) Office Developerツール(無料)
• クラウド環境
– (#3) Windows Azure（試用版）
– (#4) Office365 Developer （試用版）
– (#5) Microsoft Office2013 Pro（試用版）
6

7. (#1) VS 2012 Pro以上
• http://msdn.microsoft.com/ja-
jp/office/apps/fp123627
7

8. (#2)Office Developerツール
• http://www.microsoft.com/web/download
s/platform.aspx
• Microsoft Office Developer Tool for
Visual Studio 2012
Officeと入力してください。
インストールに20分ぐらい
かかります。
8

9. (#3) Windows Azure
• http://aka.ms/officejp
9

10. (#4) Office365 Developer
• http://msdn.microsoft.com/ja-
jp/library/office/apps/fp179924(v=off
ice.15)
10

11. (#5)MS Office2013Pro
• Office365 Developerからインストールす
る。
11

12. IE10でデバックする際には以下の設定をする。
[ツール][インターネットオプション]
12

13. ①アプリを開発
Visual Studio 2012 でOffice用アプリを作ろう！
13

14. どのように役立つのか！
• Visual Studio 2012でOffice用アプリ開
発ができるようになります。
14

15. 15

16. アプリを新規作成します
[ファイル][新規作成][プロジェクト]
16
[Office2013用アプ
リ]
を選択する。

17. [完了]ボタンを押す
[完了]を
選択する。
17

18. 以下のようにOffice用アプリのプロジェク
トが作成されます。
２つプロジェクトがで
きる。
１）マニュフェスト
2 ）アプリ(web)
Home.html
18

19. デバック実行します
[デバック][デバック開始]
セルを選択して、
[ボタン]を押します。
19

20. 20

21. 各ページに Office.js との取り込みと
app.initialize(Home.js内)が必要です。
Home.html
21

22. Home.html
• 各Webページで[Office.js] をインクルー
ドして、[app.initialize]関数をCALLす
る必要があります。
ない場合は、Webページがエラーになりま
す。
• 標準のHTML+JavaScript技術を採用してい
ますので、サーバサイドが、どのような
言語でも動作します。 (PHP, ASPX, Java
Servlet, Node.js等)
22

23. Office.js
• Office用アプリの関数のライブラリです。
• 関数のリファレンス
– http://msdn.microsoft.com/ja-
jp/library/fp142185.aspx
• Excel, Wordは共通な関数が多く
• Outlookは単独な関数が多いです。
23

24. App.js (app.initialize 関数)
マイクロソフト社が用意したアプリ初期化関数
24

25. Home.js (app.initialize 関数)
アプリ初期化サンプル関数
このサンプルでは、
Webページ独自の
初期化をここに
書いている。
25

26. 26

27. Document 系関数
• セルの値の設定・取得
• セルの選択範囲変更時のイベント
27

28. Document.getSelectedDataAsync
• http://msdn.microsoft.com/ja-
jp/library/fp142294.aspx
現在選択されている。
セルの値を取得する。
28

29. Document.setSelectedDataAsync
• http://msdn.microsoft.com/ja-
jp/library/fp142145.aspx
現在選択されている。
セルの値を設定する。
29

30. Document.SelectionChanged
• http://msdn.microsoft.com/ja-
jp/library/fp161062.aspx
現在選択されている。
セルが変更されたとき
に
イベントが取得できま
す。 30

31. Binding 系関数
• Range, Tableの値の設定・取得
• Range, Tableの選択範囲変更時のイベン
ト
• Range, Tableの値変更時のイベント
31

32. Binding.getDataAsync
• http://msdn.microsoft.com/ja-
jp/library/fp161073.aspx
“TEST” Rangeから
セルの値を取得する。
32

33. Binding.setDataAsync
• http://msdn.microsoft.com/ja-
jp/library/fp161120.aspx
“TEST” Rangeへ
セルの値を設定する。
33

34. Binding.bindingSelectionChanged
• http://msdn.microsoft.com/ja-
jp/library/fp161088.aspx
“TEST” Rangeの
選択さている
セルが変更されたとき
に
イベントが取得できま
す。 34

35. Binding.bindingDataChanged
• http://msdn.microsoft.com/ja-
jp/library/fp161149.aspx
“TEST” Rangeの
セルの値が
変更されたときに
イベントが取得できま
す。 35

36. ②アプリを配置
Windows Azure WebサイトにOffice用アプリを配置します。
36

37. どのように役立つのか！
• AzureへOffice用アプリを配置する方法が
わかります。
37

38. 38

39. Webサイトを作成します。
https://manage.windowsazure.com/
39

40. [Webサイト][簡易作成]
40

41. 発行プロファイルのダウンロード
41

42. 42

43. Webプロジェクトを選択
43

44. [ビルド][OfficeApp1Web の発行]
44

45. [発行プロファイル]の[インポート]
※Azureの[発行プロファイル]をインポートします。
45

46. Azureへ[発行]する。
46

47. 発行後、http, https でWeb表示できます。
47

48. Home.html の表示
48

49. 49

50. ~remoteAppUrl/App/Home/Home.html
~remoteAppUrl＝デバック用のローカルasp.netサーバのこと。
50

51. Azure のサイトに変更する。
https://hand-on.azurewebsites.net/App/Home/Home.html
https にしてください。
Office Web App等が SSL
なので。セキュリティレベルを
合わせる。
51

52. デバック実行してみる。
52

53. ③ユーザへ提供
Office365 にOffice用アプリカタログを配置します。
Office Web Apps でテストを行います。
53

54. どのように役立つのか！
Office365へアプリの配置方法がわかります。
54

55. メモ
• Office Storeにマニュフェストファイル
を配置すれば、 SkyDriveの
OfficeWebAppsでも動作します。
• 今回はOffice Storeのアプリカタログで
はなく、Office365のアプリカタログへマ
ニュフェストファイルを配置します。
※Office Storeへの配置はMS社の審査が
あります。
55

56. 56

57. Office365 Developer
[管理者][SharePoint]
57

58. [アプリ]を選択する。
58

59. [アプリカタログ]を選択する。
59

60. [新しいアプリカタログサイトを作成する]
を選択する。
60

61. タイトル等、入力する。
61

62. 以下の用にアプリカタログが作成されます。
62

63. 63

64. アプリカタログをクリックする。
64

65. [Office用アプリ]をクリックする。
65

66. Office用アプリのカタログが表示されます。
66

67. マニュフェストファイルが、AzureのHttps
であることを確認する。
右クリックで
[エクスプローラでフォルダーを開
く]する。
67

68. [OfficeApp1.xml] をアプリカタログに追加
する。
68

69. 以下のようにアプリが配置されます。
69

70. 70

71. Excel ブック を新規作成する。
71

72. [ファイル][アカウント]でOffice365 にロ
グインする。
72

73. [ファイル][オプション]を選択する。
73

74. [セキュリティセンター][セキュリティセン
ターの設定]を選択する。
74

75. Office365のアプリカタログのURLを設定して
[メニューに表示する]にチェックをいれる。
75
変更後Excelの再起動が必要です。

76. [挿入][アプリの挿入]
[自分の所属組織]で自分のアプリを選択して挿入
76

77. 以下のようにアプリが表示されますので
[ファイル][上書き保存]します。
77

78. ドキュメントライブラリーを選択します。
78

79. [ドキュメント]にExcel をアップロードし
ます。
79

80. さきほどのExcelをクリックすると、Excel
Web Appが起動します。[開始]を押します。
80

81. Excel Web App で動作確認します。
81

82. メモ マニュフェストファイル削除
[ファイル][ブックの検査][ドキュメントの検
査][検査]マニュフェストファイルを更新してもアプリのURL等が変更されない場合は
この方法で一度マニュフェストファイルを削除してください。
82

83. • 以上で説明は終了します。
• 野呂と上野でフォローしますので、
ハンズオンの方を、お願いします。
• 環境等を含めて、質問がありましたら、
お気軽に聞いてください。
• VIVA Office用アプリ!!
83