第４回「ブラウザー勉強会」 新しいOfficeはJavaScriptで動くんです！

新しいOfficeは

JavaScriptで動くんです！

第４回「ブラウザー勉強会」

2013年4月27日

勉強会予約サイト http://www.zusaar.com/event/622003

Who Am I.

• 野呂 清二 (のろ せいじ）– 株式会社エクシード・ワン

– http://www.facebook.com/seiji.noro

– @seinoro

– [email protected]

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

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

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

本日の内容

1. OfficeでJavaSciprtってなに～？

2. どんなかんじ～？（デモします）

3. どうやって開発するの～？ （デモします）

4. 参考資料

Office(Ｗｅｂ版でもできる)にHTML+JＳ(Webアプリ)を埋め込めます！

OfficeにWebアプリを

追加！

仕組みは～

WebとOfficeをJavaScriptで連携します！

このブラウザーはGoogle Chromeです!

アプリ3

HTTP通信

Apps for Office(HTML+JS)

アプリ2

アプリ1

アプリとOfficeはJavaScriptで連携します。

Web標準技術HTML+JavaScriptの採用がポイントね！

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

クラウド

オンプレミスアプリ

ＯｆｆｉｃｅとJavaScriptとの連携！

• 標準のHTML+JavaScriptで開発！

• Webサービスにもアクセス可能！–例) SalesForce, SharePoint, twitter

• Web版Officeによりどんな端末にも対応!–例) iPad, Android, Windows

時間がないのでExcelだけデモします！！

Google Ｃｈromeでも動く

この画面はChrome+SkyDriveです！

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

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

デモします！！

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

検索アプリ

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

イベント

連動アプリ

条件設定アプリ

計算アプリ

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

見積/請求アプリ！

[Ｅｘｃｅｌ]

ユーザが自由に編集

クラウド

[Excel]

フォーマットを固定

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

請求アプリBook

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

Excelなのでユーザが自由にフォーマットを

変更可能！

デモします！！

時間がないのでVS+Excelだけデモします！！

開発言語は～

Web標準技術を採用！

どんなブラウザー

どんな端末でも

動くようにするために

HTMLとJavaScriptにしたよ！

iPadでも、Androidでも動くよ！

ＨＴＭＬ＋JSなので、なんでも開発できます

ちなみに、Web(サーバサイド)の

開発は、ノートパッドでもなんでもOKですよ！

Office JSライブラリ

• <script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js" type="text/javascript"></script>

Office.js

例）Excelにデータ貼り付け

• Office.select("bindings#myHeader").setDataAsync([["株式会社○○○○○"]]

SetDataAsync

例）Excelにデータ貼り付け

デモします！！

初めての方は一読したらいいよ！

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/

この資料と私ブログの場所

• この資料(SlideShare)

–http://www.slideshare.net/seijinoro/browser-seminar-4stofficejavascript

• 技術情報サイト(エクシード・ワン)

–http://tech.exceedone.co.jp/apps-for-office/

• Apps for Officeサイト(エクシード・ワン)

• http://www.appsforoffice.net

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