Apps For Offcie 勉強会 #1

Office用アプリの紹介

Office System MVP

@kinuasa

初めてでもわかるアプリ開発、ストア公開、注意点について

1

※今日お話しする内容は

「Office用アプリ」に関するものです。

「SharePoint 用アプリ」については取

り扱いませんので、その点はどうぞ

ご了承ください。2

※今日お話しする内容は

2013/04/19時点での情報です。

今後日本向けストアのオープン等

で状況が変わる場合があります。

3

2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps

本日の内容

• Office用アプリの概要

• テキストエディターと共有フォルダーを使ったアプリの開発方法

• Officeストアでのアプリの公開方法と注意点

4


Office用アプリってなに？

• WordやExcelの「挿入」タブにある「Office 用アプリ」から利用可能

•全く新しい形のアドイン(のようなもの)

5


Bing MapsMini Calendar and Date Picker6


Office用アプリの種類

•作業ウィンドウアプリ

• コンテンツアプリ

• メールアプリ

種類 Word Excel PowerPoint Outlook Project

作業ウィンドウ ○ ○ ○ ○

コンテンツ ○

メール ○

7


http://technet.microsoft.com/ja-jp/library/jj219429.aspxより

・作業ウィンドウアプリ

8

http://technet.microsoft.com/ja-jp/library/jj219429.aspx



・コンテンツアプリ

9




・メールアプリ

10



Office用アプリの正体

• ドキュメント内で動くWebページ

• JavaScriptライブラリ(Office.js)を通してドキュメントの読み書き等を行う。

JavaScript

11


アプリの情報が書かれている

マニフェストファイル(XML)＋

実体となる

Webページ＝Office用アプリ

12


(例)マニフェストファイルアプリの種類

対象アプリケーション

実体となるWebページの場所13


(例)Webページ

14


開発環境

• Visual Studio 2012 + Office Developer Tools for Visual Studio 2012要Ultimate or Premium or Professional

Office Developer Tools をExpressにインストールしようとすると・・・

You must install Microsoft Visual Studio 2012 Professional Edition (or above) before you can install the Microsoft Office Developer Tools for Visual Studio 2012.

• "Napa" Office 365 開発ツール要Office 365 開発者向けサイトへのアクセス権

• テキストエディターお手軽

15


配布・展開方法

•共有フォルダー• ファイルサーバーを利用する最も簡単な方法。

•内部ディレクトリ• SharePoint、SharePoint Onlineを利用する組織向けの方法。

• Officeストア• Microsoft提供のストアを利用する方法。

お手軽

16


17

Officeストア(US)http://office.microsoft.com/en-us/store/

Officeストア(JP)http://office.microsoft.com/ja-jp/store/

http://office.microsoft.com/en-us/store/

http://office.microsoft.com/ja-jp/store/


アプリ作成方法共有フォルダー編

18


必要なもの

•共有フォルダー

• Webサーバー• IIS, Apache, 04WebServer, BlackJumboDog等

• テキストエディター

• Web関連の知識• HTML,CSS,JavaScript等

19


作成・利用手順

1. 共有フォルダーを準備する。

2. 「信頼できるアプリカタログ」に共有フォルダーを登録する。

3. マニフェストファイルを作成して共有フォルダーにコピーする。

4. 実体となるWebページを作成する。

5. マニフェストファイルで指定した場所にWebページをコピーする。

6. Officeアプリケーションを起動してアプリを挿入する。

20


Demo

21


下準備をもっと簡単に・・・

共有フォルダーの作成、「信頼できるアプリカタログ」への登録があっという間にできる。

SetAfoTrustedCatalogs.vbs

http://j.mp/YZe8tX

22

http://j.mp/YZe8tX


アプリ公開方法Officeストア編

23


必要なもの

• Microsoft アカウント(旧Windows Live ID)

• Webサーバー(https)

• (銀行口座 or PayPalアカウント) ※有料アプリを公開する場合

24


公開手順

1. Microsoft Seller Dashboard(Microsoft 販売者ダッシュボード)で販売者としてアカウントを作成する。※要Microsoft アカウント

2. 審査に通過するとアカウントが承認される。

3. Seller Dashboardを通して作成したアプリをOffice ストアに提出する。

4. 審査に通過するとOffice ストアでアプリが公開される。

25


Seller Dashboardアカウント作成方法

1. Microsoft Seller DashboardにアクセスしてMicrosoftアカウントでサインインする。http://sellerdashboard.microsoft.com/

2. 画面の指示に従ってアカウント情報を入力する。

3. すべての情報を入力後submitすると、Microsoft側でアカウントの審査・検証が行われる。

4. 入力・提出した情報に問題が無い場合、アカウントの承認終了。

26

※ Seller Dashboardのアカウント作成は無料。

http://sellerdashboard.microsoft.com/


27


28

日本語OK

日本語OK


29


30


アプリをOfficeストアに提出する方法

1. Microsoft Seller Dashboardにサインインする。

2. 画面の指示に従ってアプリの情報を入力する。

3. マニフェストファイル(xml)をアップロードする。

4. すべての情報を入力後submitすると、Microsoft側でアプリの審査・検証が行われる。

5. 提出したアプリに問題が無い場合、Officeストアでアプリが公開される。

31


32


33


34

日本語OK


35

日本語OK

英語表記必須日本語併記OK


36


37


＜提出した内容に問題がある場合＞38


39

＜問題内容のレポート＞


40

APPLICATION VALIDATION CHANGES REQUIRED

Report Generated: 2013/02/14 02:42:38.435Partner Name: きぬあさPartner Id: ***********Application Name: カレンダーから日付入力Application Id:***********Application Submission Date and Time: 2013/02/12 00:06:48.757

Thank you for submitting your app for approval in the Microsoft Seller Dashboard. We were unable to validate your app. Please make the following changes and submit your app for approval again:

1. File Name: **********.xmlWe’re sorry, but an internal error occurred while processing this file. Please edit your app, upload the file, and then submit your app again.

＜問題内容のレポート2＞


＜審査にパスした場合＞41


＜Officeストアで公開されたアプリ＞42


アプリ審査を通過するためのポイント1. アプリの検証ポリシー(http://msdn.microsoft.com/ja-

jp/library/jj220035.aspx)を遵守する。

2. 英語対応必須。

3. 実体となるWebページはHTTPSサーバーに置く。

4. Office用アプリの場合は提出するのはマニフェストファイルだけでOK。

43

• [Office用アプリ]Seller Dashboardの販売者アカウントを作成する。• http://www.ka-net.org/blog/?p=2723

• [Office用アプリ]アプリをOffice ストアに提出する。• http://www.ka-net.org/blog/?p=2733

• [Office用アプリ]アプリ審査を通過するためのポイント• http://www.ka-net.org/blog/?p=2749

http://msdn.microsoft.com/ja-jp/library/jj220035.aspx

http://www.ka-net.org/blog/?p=2723




小ネタ集

• アプリをGoogle Driveに配置

• アプリのコードは基本ダダ漏れ

• アプリのデモはWebページに埋め込みで例

• Excel Services ECMAScriptとOffice用アプリの連携

44



参考資料

45


46

• Office 用アプリによるソリューションの開発と展開(XPS/PDF/Word)

•http://technet.microsoft.com/ja-jp/office/jj149945

※ これ1つでOffice用アプリの概要～開発方法まで一通り把握できる。

http://technet.microsoft.com/ja-jp/office/jj149945


• JavaScript API for Office (wall poster)

•http://www.microsoft.com/en-us/download/details.aspx?id=36850

※ JavaScript API for Officeのオブジェクト、メソッド、プロパティ、イベントが一目でわかる。

47

http://www.microsoft.com/en-us/download/details.aspx?id=36850


基本的な資料

• Office 用アプリの概要• http://msdn.microsoft.com/ja-jp/library/jj220082.aspx

• JavaScript API for Office リファレンス• http://msdn.microsoft.com/ja-jp/library/fp142185.aspx

• Office 用アプリの UX 設計ガイドライン• http://msdn.microsoft.com/ja-jp/library/fp161012.aspx

• Office 用アプリ開発の中心となる概念• http://msdn.microsoft.com/ja-jp/library/fp161053.aspx

• Office 用アプリを発行する• http://msdn.microsoft.com/ja-jp/library/jj220068.aspx

48


http://msdn.microsoft.com/ja-jp/library/fp142185.aspx





マニフェストファイル関連

• Office 用アプリの XML マニフェストの概要• http://msdn.microsoft.com/ja-jp/library/fp161044.aspx

• Office 用アプリのマニフェスト向けのスキーマリファレンス• http://msdn.microsoft.com/ja-jp/library/fp123693.aspx

• スキーママップ (Office 用アプリ)• http://msdn.microsoft.com/ja-jp/library/fp123711.aspx

•要素 (Office 用アプリ)• http://msdn.microsoft.com/ja-jp/library/fp123651.aspx

•型 (Office 用アプリ)• http://msdn.microsoft.com/ja-jp/library/fp123676.aspx

49







公式ブログ＆フォーラム他• Apps for Office and SharePoint Dev Center (英語) ※ポータルサイト

• http://dev.office.com/

• Apps for Office and SharePoint Blog (英語)• http://blogs.msdn.com/b/officeapps/

• Developing Apps for Office 2013(英語)• http://social.msdn.microsoft.com/Forums/en-US/appsforoffice/threads

• Developing Apps for SharePoint 2013 (英語)• http://social.msdn.microsoft.com/Forums/en-US/appsforsharepoint/threads

• Publishing Apps for the Office Store (英語)• http://social.msdn.microsoft.com/Forums/en-US/officestore/threads

• 松崎剛 Blog• http://blogs.msdn.com/b/tsmatsuz/

• VS100 - 016 Office 2013 用アプリ (Apps for Office 2013) を使った最新の Office プログラミング by 松崎剛• http://www.youtube.com/watch?v=TGQvdvwQBxM

• 次期Office製品群の新しい開発モデルの解説• http://www.slideshare.net/kumo2010/pt-025-tsmatsuz

50

http://dev.office.com/

http://blogs.msdn.com/b/officeapps/

http://social.msdn.microsoft.com/Forums/en-US/appsforoffice/threads

http://social.msdn.microsoft.com/Forums/en-US/appsforsharepoint/threads

http://social.msdn.microsoft.com/Forums/en-US/officestore/threads

http://blogs.msdn.com/b/tsmatsuz/

http://www.youtube.com/watch?v=TGQvdvwQBxM

http://www.slideshare.net/kumo2010/pt-025-tsmatsuz


MSDN マガジン

• Office 用アプリの開発 (機械翻訳)• http://msdn.microsoft.com/ja-jp/magazine/jj991970.aspx

•新しい JavaScript API for Office について調べる (機械翻訳)• http://msdn.microsoft.com/ja-jp/magazine/jj891051.aspx

• JavaScript API for Office の調査: データアクセスとイベント• http://msdn.microsoft.com/ja-jp/magazine/jj991976.aspx

51

http://msdn.microsoft.com/ja-jp/magazine/jj991970.aspx




サンプルコード

• Office 用アプリのコードサンプル• http://msdn.microsoft.com/ja-jp/library/jj220075.aspx

• Apps for Office code samples(C#, JavaScript)• http://code.msdn.microsoft.com/officeapps/Apps-for-Office-code-d04762b7

• Apps for SharePoint sample pack(C#,VB.NET)• http://code.msdn.microsoft.com/office/Apps-for-SharePoint-sample-64c80184

• Office & Office 365 Development Sample (Cloud 開発サンプル)• http://blogs.msdn.com/b/tsmatsuz/archive/2011/06/29/office-365-develop-sample-

application-sharepoint-online-exchange-online-lync-online.aspx

• Creating Your First Real-World App for Word 2013• http://blogs.msdn.com/b/dream_in_code/archive/2012/08/07/creating-your-first-

app-in-word-2013.aspx

52


http://code.msdn.microsoft.com/officeapps/Apps-for-Office-code-d04762b7

http://code.msdn.microsoft.com/office/Apps-for-SharePoint-sample-64c80184

http://blogs.msdn.com/b/tsmatsuz/archive/2011/06/29/office-365-develop-sample-application-sharepoint-online-exchange-online-lync-online.aspx

http://blogs.msdn.com/b/dream_in_code/archive/2012/08/07/creating-your-first-app-in-word-2013.aspx


Microsoft以外の資料

• Office 2013用アプリ配信サイト“Officeストア”ってなに？• http://weekly.ascii.jp/elem/000/000/127/127463/

• JavaScriptで誰でも簡単に作って稼げる「Officeアプリ」とは？• http://www.atmarkit.co.jp/ait/articles/1301/25/news063.html

• 「Officeアプリ」の作り方と、できること／できないこと• http://www.atmarkit.co.jp/ait/articles/1303/04/news091.html

• Net&Web国分すばるの IT 月記• http://netweblog.wordpress.com/

• Exceedone Technical Knowledge• http://tech.exceedone.co.jp/

• 空談録 Tag Archive 'Office 2013' (幻想ツバメ(@f_swallow)さんのブログ)• http://fantasticswallow.mo4ca.net/tag/office-2013/

53

http://weekly.ascii.jp/elem/000/000/127/127463/

http://www.atmarkit.co.jp/ait/articles/1301/25/news063.html

http://www.atmarkit.co.jp/ait/articles/1303/04/news091.html

http://netweblog.wordpress.com/

http://tech.exceedone.co.jp/

https://twitter.com/f_swallow

http://fantasticswallow.mo4ca.net/tag/office-2013/


Microsoft以外の資料(2)

• Add-in Express Blogs(Posts Tagged ‘Apps for Office’)• http://www.add-in-express.com/creating-addins-blog/tag/apps-for-office/

• Office 2013 loves web developers slide• http://www.slideshare.net/FabioFranzini/office-2013-loves-web-developers-

slide

• How we wrote our app for MS Office 2013• https://www.lucidchart.com/techblog/2013/03/22/how-to-write-an-app-for-

microsoft-office-2013/

54

http://www.add-in-express.com/creating-addins-blog/tag/apps-for-office/

http://www.slideshare.net/FabioFranzini/office-2013-loves-web-developers-slide

https://www.lucidchart.com/techblog/2013/03/22/how-to-write-an-app-for-microsoft-office-2013/


私のブログ(初心者備忘録)

55

http://www.ka-net.org/blog/

Office用アプリ以外にもリボンのカスタマイズ等IT Pro向けのOffice開発情報を中心に取り扱っています。

http://www.ka-net.org/blog/


最後に・・・

56


57

Office用アプリは、

PCでもスマートフォンでもWebブラウザーでも使えます。

一つアプリを作るだけで、

WordでもExcelでもPowerPointでも使えるようになります。

しかもマーケットはグローバルです。

テキストエディターがあればすぐに開発が始められるOffice用アプリ、皆様も是非作ってみてください。

Documents

Apps For Offcie 勉強会 #1