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


Mini Calendar
Bing Maps and Date Picker 6


Office用アプリの種類
• 作業ウィンドウアプリ
• コンテンツアプリ
• メールアプリ

種類 Word Excel PowerPoint Outlook Project

作業ウィンドウ ○ ○ ○ ○

コンテンツ ○

メール ○
7

・作業ウィンドウアプリ

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

・コンテンツアプリ

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


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

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


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

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


アプリ公開方法
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. 入力・提出した情報に問題が無い場合、アカウントの承認終了。

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

26


27


日本語OK

日本語OK

28


29


30


アプリをOfficeストアに提出する方法
1. Microsoft Seller Dashboardにサインインする。
2. 画面の指示に従ってアプリの情報を入力する。
3. マニフェストファイル(xml)をアップロードする。
4. すべての情報を入力後submitすると、Microsoft側でアプリの審査・
検証が行われる。
5. 提出したアプリに問題が無い場合、Officeストアでアプリが公開され
る。

31


32


33


日本語OK

34


日本語OK

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

35


36


37


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


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

APPLICATION VALIDATION CHANGES REQUIRED

Report Generated: 2013/02/14 02:42:38.435
Partner 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: **********.xml
We’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＞
40


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


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


アプリ審査を通過するためのポイント
1. アプリの検証ポリシー(http://msdn.microsoft.com/ja-
jp/library/jj220035.aspx)を遵守する。
2. 英語対応必須。
3. 実体となるWebページはHTTPSサーバーに置く。
4. Office用アプリの場合は提出するのはマニフェストファイルだけで
OK。

• [Office用アプリ]Seller Dashboardの販売者アカウントを作成する。
• http://www.ka-net.org/blog/?p=2723
• [Office用アプリ]アプリをOffice ストアに提出する。
• [Office用アプリ]アプリ審査を通過するためのポイント
43


小ネタ集
• アプリをGoogle Driveに配置
• アプリのコードは基本ダダ漏れ
• アプリのデモはWebページに埋め込みで例
• Excel Services ECMAScriptとOffice用アプリの連携

44


参考資料

45


• Office 用アプリによるソリューションの開発と展開(XPS/PDF/Word)
• http://technet.microsoft.com/ja-jp/office/jj149945

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

46


• JavaScript API for Office (wall poster)
• http://www.microsoft.com/en-
us/download/details.aspx?id=36850

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

47


基本的な資料
• 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 設計ガイドライン
• Office 用アプリ開発の中心となる概念
• Office 用アプリを発行する

48


マニフェストファイル関連
• Office 用アプリの XML マニフェストの概要
• Office 用アプリのマニフェスト向けのスキーマリファレンス
• スキーママップ (Office 用アプリ)
• 要素 (Office 用アプリ)
• 型 (Office 用アプリ)

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


MSDN マガジン
• Office 用アプリの開発 (機械翻訳)
• http://msdn.microsoft.com/ja-jp/magazine/jj991970.aspx
• 新しい JavaScript API for Office について調べる (機械翻訳)
• JavaScript API for Office の調査: データアクセスとイベント

51


サンプルコード
• Office 用アプリのコードサンプル
• 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


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


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.ka-net.org/blog/

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

55


最後に・・・

56


Office用アプリは、

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

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

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

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

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

Apps For Offcie 勉強会 #1

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Apps For Offcie 勉強会 #1

Semelhante a Apps For Offcie 勉強会 #1 (20)

Mais de kinuasa

Mais de kinuasa (14)

Apps For Offcie 勉強会 #1