ゼロからわかるOffice 用アプリ(Apps for Office)技術ひろば .net 2013 年 9 月 勉強会　 2013 年 9 月 21 日

この資料の場所 http://www.slideshare.net/seijinoro/20130921

勉強会サイト　　 http://hiroba-tech.net

1

自己紹介• 株式会社エクシード・ワン

http://www.facebook.com/seiji.noro snoro@exceedone.co.jp

• 宝塚歌劇団の近く [ 兵庫県伊丹市 ] 生まれ

• 松阪牛の [ 三重県松阪市 ] 育ち

• [ ふなっしー ] で有名な船橋の隣の [ 松戸市 ] 在住

2

目次• まずはイメージ• メリット• 主な特徴• 開発についての概要• 開発デモ• アプリの課金

3

まずはイメージまずはイメージをみせます！！

4

いくつか動かしてみよう！！

5

メリットApps for Office が”利用ユーザ”と”開発者”にどのようなメリットがあるのかがわかります。

6

最初に歴史的背景

7

1979 年　ＰＣ（世界初）のキラーアプリ VisiCalc 登場！

これで AppleII も売れまくる。 8

1982 年Microsoft Multiplan 発売

Lotus1-2-3 と激戦を繰り広げる（ AppleII 、 MS-DOS で動作） 9

1985 年Microsoft Excel 1.0 発売

ビジネスの標準ツールになる！(Windows 対応 !) 10

1994 年Excel5.0 VBA リリース

Excel でプログラムできるようになり開発ツールでも使用されるようになる！ 11

結果、業務の約 90 ％はExcel になってしまった !?

メリット自由に編集複雑な計算入力が簡単印刷が強い

デメリットデータが共有しにくい

12

そして１ 9 年が過ぎネットの時代に

13

クラウド業者

万能ローカルツール

情報共有システム

クラウドの繁栄業者は Excel 撲滅を合言葉に！

14

Excel 依存だと意思決定が遅れる！

SAP 社 (ERP 大手 )

15

サイボウズ社 ( グループウェア大手 )

Excel だと情報共有不便、困る 16

エクセルが生み出す痛み！

MakeLeaps( 請求書クラウド )

17

Excel は便利だが、

情報共有に弱い！開発はＷｅｂの時代に !

18

もうちょっと整理すると

Excel(1982 ～ )

コスト高い！なんでも作れるスーパーアプリ！

Web(1989 ～ ) 、クラウド (2005 ～ )

ローカルアプリ (1960 ～ )

リーズナブル！ユーザが自由に表現！情報共有弱い！印刷が強い

コスト安い！ユーザがどこでも使える！情報共有強い！ 19

そして 2013 年Office が Web と融合！

Excel自由に

編集可能

Webどこでも情報共有

20

メリットについて説明

21

エンドユーザのメリット• 現在使用している Office のフォーマットを

活用して、データ共有するアプリを作れます。

22

開発者のメリット• Excel のフォーマットを利用することによっ

て少ないプログラミングでリッチな UI のアプリを作成できます。

• 作成したアプリを Office ストアから世界に販売することができます。

23

技術的メリット• 情報共有可能！

• Web サービスにもアクセス可能！

• どんな端末にも対応 !

24

主な特徴いままでの Office にない主な特徴を知ることができます。

25

Office 用アプリとＶＢＡの違い• 言語の違い

Web 標準言語 HTML+JavaScript+CSS3でプログラミングします。

VBA はなんでもできるが、Office 用アプリはデータの取得、設定、イベント処理しか現在は、機能がない。

• 配布方法 アプリは Web サーバに配置されるため、

プログラムの再配布が不要です。

26

アプリをストアで販売

27

Office Web Apps でも動作

この画面は Chrome+SkyDrive です！

Bing マップアプリ計算機アプリ 検索アプリ

ほとんどのブラウザーから動くよ！

28

どんなアプリが作れるのか？どのようなアプリを実際に作成することができるのかがわかります。

29

App for Excel

30

セルを選択すると辞書検索

検索アプリ

アクティブセルのキーワードを自動で取得し Web で検索

31

連動アプリ

条件設定アプリ

計算アプリ

２つのアプリのハーモニー！

32

App for Word

33

Apps for Word

検索アプリ

App for Excel とほとんど同じ～

34

App for PowerPoint

35

App for PowerPoint

バーコードアプリ

App for Excel とほとんど同じ～

36

App for Outlook

37

App for Outook

Bing マップアプリ

メールの文章の内容によって最適なアプリが自動で選択されるよ

♪住所なら BingMap 表示！

URL なら HTML 表示！

38

作ったら便利そうな業務アプリ( 例 )

39

複雑なローン計算ができるアプリ！

[Excel]

複雑計算も短時間で作成

クラウド

[ アプリ ]

クラウド接続アプリ

Excel なので複雑な計算も簡単！

40

可視性のよい勤務表アプリ！

[Excel]

簡単に作成可能

きれいなレポートだって簡単

オフラインでも OK

クラウド

[ アプリ ]

クラウド接続アプリ

Excel なので可視性がよく入力も簡単！

41

見積 / 請求アプリ！

[ Ｅｘｃｅｌ ]

ユーザが自由に編集

クラウド

[Excel]

フォーマットを固定

ユーザ用予備項目を用意しておく

請求アプリ Book

印刷用シート 入力用シート アプリ

Excel なのでユーザが

自由にフォーマットを

変更可能！

42

開発についての概要開発をどのようにすればよいのかわかります。

43

開発言語は～

44

Web 標準技術を採用！

どんなブラウザー

どんな端末でも

動くようにするために

HTML と JavaScript にしたよ！

iPad でも、 Android でも動くよ！

45

開発ツールNapa

46

ちょ～簡単 Napa 1/3

SharePoint2013 のSharePoint アプリ

の” Napa” で開発できるよ！

47

サンプルソースを自動生成してくれて

すぐ実行できる！

ちょ～簡単 Napa 2/3

48

ちょ～簡単 Napa 3/3

Office Web Appsで

実行されたよ！

49

開発ツールVisual Studio 2012

50

強力な Visual Studio 1/3

Visual Studio のProject テンプレートが

あるよ！

51

コードが自動生成された！

そのまま、デバック実行！

強力な Visual Studio 2/3

52

強力な Visual Studio 3/3

JavaScript, ASPX もデバックができて

ちょー便利！

53

開発ツールその他

54

ちなみに、Web( サーバサイド ) の開発は、ノートパッド

でもなんでも OK ですよ！

オープン系で大人気の Eclipse

55

Web サーバの実行環境

56

Web サーバはなんでも OK(例 )

アプリ

57

クライアント端末の実行環境

58

端末はなんでも OK

59

アプリの配置

60

アプリの位置関係

61

Web サーバ アプリカタログ

Office 用アプリ

Office

https Request Manifest ファイル• Web サーバの場

所• セキュリティ情報

アプリのインストールとは、Office に Manifest ファイルをインポートすることです。

配置するアプリの Manifest ファイル

アプリの URLアプリの作成者、バージョンアプリのセキュリティなどの情報です！

62

Manifest ファイルの置き場所

注意 ) Outlook は Exchange に配置します。

Office ストア SharePoint2013 共有フォルダー

Manifest ファイル

Manifest ファイル

Manifest ファイル

63

Office Store(オフィスストア )

マイクロソフトが用意したアプリ購入サイトに

アプリの Manifest ファイルを

配置できます。

64

Office365

Office365 のアプリカタログに

アプリの Manifest ファイルを

配置できます。

65

オンプレミス SharePoint2013

オンプレミスSharePoint2013 のアプリカタログに

アプリの Manifest ファイルを

配置できます。

66

共有フォルダー

共有フォルダーにアプリの Manifest ファイ

ルを配置できます。

67

Office に Manifest参照先設定

68

Office に Manifest参照先設定 1/2

Office にアプリの Manifest ファイルの

場所を設定します。( アプリカタログや共有フォルダー )

69

Office に Manifest参照先設定 2/2

個人用アプリ (Office ストア )自分の所属組織 ( アプリカタログ )共有フォルダー ( 共有フォルダー )

アプリの Manifest ファイルを参照できるようになりました。 70

開発デモ初めての方でも Visaul Studio2012 を用いた開発方法がわかります。

71

Visual Studio 2012 でデモします。

• VS2012 でプロジェクト新規作成• Excel, Word にてローカルデバック動作さ

せます。

72

http://www.slideshare.net/seijinoro/apps-foroffice-seminar-20130617-handson?ref=http://www.appsforoffice.net/study-meeting/study-meeting-2st/

前回MS様にてハンズオンしたときの資料になります (Azure+Office365)

新規作成

73

起動：各種Office, 独自 Tmplate

74

Manifest ファイル

75

Home.html (コアは office.js)

76

Home.js データ取得プログラム

77

アプリの課金アプリの課金について初めての方でもわかります。

78

セラーダッシュボード

79

https://sellerdashboard.microsoft.com

アプリ登録

80

アプリ統計情報

81

会社登録

82

いくつか動かしてみよう！！

83

ご清聴ありがとうございました！84

ビバ Offi ce！

85

参考資料• 初心者備忘録（きぬあささん）

http://www.ka-net.org/blog/?page_id=2760

• Office365 情報 ( エクシード・ワン ) http://www.office365room.com/

• 技術情報サイト ( エクシード・ワン ) http://tech.exceedone.co.jp

• Apps for Office サイト ( エクシード・ワン ) http://www.appsforoffice.net

• Appli-a( エクシード・ワンのアプリ ) http://www.appli-a.com/quotation-and-bill/