第4回「ブラウザー勉強会」 新しいofficeはjavascriptで動くんです!
DESCRIPTION
Browser seminar 4st office Javascript Apps for OfficeTRANSCRIPT
![Page 1: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/1.jpg)
新しいOfficeは
JavaScriptで動くんです!
第4回「ブラウザー勉強会」
2013年4月27日
勉強会予約サイト http://www.zusaar.com/event/622003
![Page 2: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/2.jpg)
Who Am I.
• 野呂 清二 (のろ せいじ)– 株式会社エクシード・ワン
– http://www.facebook.com/seiji.noro
– @seinoro
• 宝塚歌劇団の近く[兵庫県伊丹市]生まれ
• 松阪牛の[三重県松阪市]育ち
• [ふなっしー]で有名な船橋の隣の[松戸市]在住
![Page 3: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/3.jpg)
本日の内容
1. OfficeでJavaSciprtってなに~?
2. どんなかんじ~?(デモします)
3. どうやって開発するの~? (デモします)
4. 参考資料
![Page 4: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/4.jpg)
![Page 5: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/5.jpg)
Office(Web版でもできる)にHTML+JS(Webアプリ)を埋め込めます!
OfficeにWebアプリを
追加!
![Page 6: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/6.jpg)
仕組みは~
![Page 7: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/7.jpg)
WebとOfficeをJavaScriptで連携します!
このブラウザーはGoogle Chromeです!
アプリ3
HTTP通信
Apps for Office(HTML+JS)
アプリ2
アプリ1
アプリとOfficeはJavaScriptで連携します。
Web標準技術HTML+JavaScriptの採用がポイントね!
![Page 8: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/8.jpg)
WebサーバはなんでもOK(例)
クラウド
オンプレミスアプリ
![Page 9: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/9.jpg)
OfficeとJavaScriptとの連携!
• 標準のHTML+JavaScriptで開発!
• Webサービスにもアクセス可能!–例) SalesForce, SharePoint, twitter
• Web版Officeによりどんな端末にも対応!–例) iPad, Android, Windows
![Page 10: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/10.jpg)
時間がないのでExcelだけデモします!!
![Page 11: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/11.jpg)
Google Chromeでも動く
この画面はChrome+SkyDriveです!
Bingマップアプリ計算機アプリ 検索アプリ
ほとんどのブラウザーから動くよ!
デモします!!
![Page 12: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/12.jpg)
セルを選択すると辞書検索
検索アプリ
アクティブセルのキーワードを自動で取得しWebで検索
イベント
![Page 13: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/13.jpg)
連動アプリ
条件設定アプリ
計算アプリ
2つのアプリのハーモニー!
![Page 14: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/14.jpg)
見積/請求アプリ!
[Excel]
ユーザが自由に編集
クラウド
[Excel]
フォーマットを固定
ユーザ用予備項目を用意しておく
請求アプリBook
印刷用シート 入力用シート アプリ
Excelなのでユーザが自由にフォーマットを
変更可能!
デモします!!
![Page 15: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/15.jpg)
時間がないのでVS+Excelだけデモします!!
![Page 16: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/16.jpg)
開発言語は~
![Page 17: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/17.jpg)
Web標準技術を採用!
どんなブラウザー
どんな端末でも
動くようにするために
HTMLとJavaScriptにしたよ!
iPadでも、Androidでも動くよ!
![Page 18: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/18.jpg)
HTML+JSなので、なんでも開発できます
ちなみに、Web(サーバサイド)の
開発は、ノートパッドでもなんでもOKですよ!
![Page 19: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/19.jpg)
Office JSライブラリ
• <script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js" type="text/javascript"></script>
Office.js
![Page 20: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/20.jpg)
例)Excelにデータ貼り付け
• Office.select("bindings#myHeader").setDataAsync([["株式会社○○○○○"]]
SetDataAsync
![Page 21: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/21.jpg)
例)Excelにデータ貼り付け
デモします!!
![Page 22: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/22.jpg)
初めての方は一読したらいいよ!
![Page 23: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/23.jpg)
Office用アプリ関連サイト• Microsoft 松崎さんの資料
–http://blogs.msdn.com/b/tsmatsuz/
• きぬあさ さんの資料(初心者備忘録)
–http://www.ka-net.org/blog/?cat=77
• 渡辺さんのブログ
• http://origin809.wordpress.com/2013/04/21/apps-for-office%E5%8B%89%E5%BC%B7%E4%BC%9A%E3%81%A7%E7%99%BB%E5%A3%87%E3%81%97%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F/
![Page 24: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/24.jpg)
この資料と私ブログの場所
• この資料(SlideShare)
–http://www.slideshare.net/seijinoro/browser-seminar-4stofficejavascript
• 技術情報サイト(エクシード・ワン)
–http://tech.exceedone.co.jp/apps-for-office/
• Apps for Officeサイト(エクシード・ワン)
• http://www.appsforoffice.net
![Page 25: 第4回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです!](https://reader034.vdocuments.site/reader034/viewer/2022042700/559aec261a28ab6e0b8b4637/html5/thumbnails/25.jpg)
ご清聴ありがとうございました!!