More Related Content Similar to Apps For Offcie 勉強会 #1 (20) Apps For Offcie 勉強会 #14. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
本日の内容
• Office用アプリの概要
• テキストエディターと共有フォルダーを使ったアプリの開発方法
• Officeストアでのアプリの公開方法と注意点
4
5. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
Office用アプリってなに?
• WordやExcelの「挿入」タブにある「Office 用アプリ」から利用可能
• 全く新しい形のアドイン(のようなもの)
5
7. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
Office用アプリの種類
• 作業ウィンドウアプリ
• コンテンツアプリ
• メールアプリ
種類 Word Excel PowerPoint Outlook Project
作業ウィンドウ ○ ○ ○ ○
コンテンツ ○
メール ○
7
8. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
・作業ウィンドウアプリ
http://technet.microsoft.com/ja-jp/library/jj219429.aspx より
8
9. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
・コンテンツアプリ
http://technet.microsoft.com/ja-jp/library/jj219429.aspx より
9
10. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
・メールアプリ
http://technet.microsoft.com/ja-jp/library/jj219429.aspx より
10
11. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
Office用アプリの正体
• ドキュメント内で動くWebページ
• JavaScriptライブラリ(Office.js)を通してドキュメントの読み書き等を行う。
JavaScript
11
12. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
アプリの情報が書かれている
マニフェストファイル(XML)
+
実体となる
Webページ
=
Office用アプリ 12
15. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
開発環境
• 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
16. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
配布・展開方法
• 共有フォルダー お手軽
• ファイルサーバーを利用する最も簡単な方法。
• 内部ディレクトリ
• SharePoint、SharePoint Onlineを利用する組織向けの方法。
• Officeストア
• Microsoft提供のストアを利用する方法。
16
17. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
Officeストア(US)
http://office.microsoft.com/en-us/store/
Officeストア(JP)
http://office.microsoft.com/ja-jp/store/ 17
19. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
必要なもの
• 共有フォルダー
• Webサーバー
• IIS, Apache, 04WebServer, BlackJumboDog等
• テキストエディター
• Web関連の知識
• HTML,CSS,JavaScript等
19
20. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
作成・利用手順
1. 共有フォルダーを準備する。
2. 「信頼できるアプリ カタログ」に共有フォルダーを登録する。
3. マニフェストファイルを作成して共有フォルダーにコピーする。
4. 実体となるWebページを作成する。
5. マニフェストファイルで指定した場所にWebページをコピーする。
6. Officeアプリケーションを起動してアプリを挿入する。
20
22. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
下準備をもっと簡単に・・・
SetAfoTrustedCatalogs.vbs
http://j.mp/YZe8tX
共有フォルダーの作成、「信頼できるアプリ カタログ」への登録が
あっという間にできる。
22
24. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
必要なもの
• Microsoft アカウント(旧Windows Live ID)
• Webサーバー(https)
• (銀行口座 or PayPalアカウント) ※ 有料アプリを公開する場合
24
25. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
公開手順
1. Microsoft Seller Dashboard(Microsoft 販売者ダッシュボード)で販
売者としてアカウントを作成する。 ※ 要Microsoft アカウント
2. 審査に通過するとアカウントが承認される。
3. Seller Dashboardを通して作成したアプリをOffice ストアに提出する。
4. 審査に通過するとOffice ストアでアプリが公開される。
25
26. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
Seller Dashboardアカウント作成方法
1. Microsoft Seller DashboardにアクセスしてMicrosoftアカウントでサ
インインする。
http://sellerdashboard.microsoft.com/
2. 画面の指示に従ってアカウント情報を入力する。
3. すべての情報を入力後submitすると、Microsoft側でアカウントの
審査・検証が行われる。
4. 入力・提出した情報に問題が無い場合、アカウントの承認終了。
※ Seller Dashboardのアカウント作成は無料。
26
31. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
アプリをOfficeストアに提出する方法
1. Microsoft Seller Dashboardにサインインする。
2. 画面の指示に従ってアプリの情報を入力する。
3. マニフェストファイル(xml)をアップロードする。
4. すべての情報を入力後submitすると、Microsoft側でアプリの審査・
検証が行われる。
5. 提出したアプリに問題が無い場合、Officeストアでアプリが公開され
る。
31
40. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
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
43. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
アプリ審査を通過するためのポイント
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 ストアに提出する。
• http://www.ka-net.org/blog/?p=2733
• [Office用アプリ]アプリ審査を通過するためのポイント
• http://www.ka-net.org/blog/?p=2749
43
44. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
小ネタ集
• アプリをGoogle Driveに配置
• アプリのコードは基本ダダ漏れ
• アプリのデモはWebページに埋め込みで 例
• Excel Services ECMAScriptとOffice用アプリの連携
44
46. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
• Office 用アプリによるソリューションの開発と展開(XPS/PDF/Word)
• http://technet.microsoft.com/ja-jp/office/jj149945
※ これ1つでOffice用アプリの概要 ~ 開発方法まで一通り把握できる。
46
47. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
• JavaScript API for Office (wall poster)
• http://www.microsoft.com/en-
us/download/details.aspx?id=36850
※ JavaScript API for Officeのオブジェクト、メソッド、プロパティ、イベントが
一目でわかる。
47
48. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
基本的な資料
• 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
49. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
マニフェストファイル関連
• 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
50. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
公式ブログ&フォーラム他
• 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
51. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
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
52. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
サンプルコード
• 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
53. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
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
54. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
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
55. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
私のブログ(初心者備忘録)
http://www.ka-net.org/blog/
Office用アプリ以外にもリボンのカスタマイズ等IT Pro
向けのOffice開発情報を中心に取り扱っています。
55
57. 2013/04/19(金) [apps for Office勉強会 #1] ハッシュタグ: #officeapps
Office用アプリは、
PCでもスマートフォンでもWebブラウザーでも使えます。
一つアプリを作るだけで、
WordでもExcelでもPowerPointでも使えるようになります。
しかもマーケットはグローバルです。
テキストエディターがあればすぐに開発が始められるOffice用アプリ、
皆様も是非作ってみてください。
57