1. Apps for Office
Excelアプリ開発の事例で見るバッドノウハウと回避策

2. 山本 優
ピタリ株式会社
簡単だから活用できるクラウド販売管理
「セールスノート」
を提供しています。
ロープライス 基幹システム利用 カスタムがお得
ユーザー単位でなく会社単位課金 システム製作∼倉庫管理まで 細かなセミオーダーに対応

3. 「E2D3」というExcelアプリの開発に
関わっています。

4. 今日の内容
• Apps for Office開発の重要なポイント
• ハマるポイント5選
• 今後のアプリの可能性

5. Apps for Officeの
重要なポイント（Excelアプリ編）
• 開発環境の選択
• マニフェストファイルの注意点
• アプリで最も重要な要素「Bind（バインド）」

6. 開発環境
JavaScriptアプリケーションなので、
なんでも良さそうですが。。。

7. 開発環境

8. • アプリ上のエラーコンソールを見る唯一のツール
• ブレークポイントの設定
• Visual Studio Community（無料）
これまでのExpressでは出来なかったオフィスアプリの開発が可能に

9. マニフェストファイル

10. ドキュメントサイトの
サンプル
Visual Studioで
作成された
デフォルトサンプル

11. マニフェストファイルの
注意点
IDやバージョンの桁数は正しく
※間違っていると起動しません
※そもそも不要な項目もあります
アプリ申請時にどの
サンプルにも無い項目
を求められる
※リジェクト理由に書かれますので、
よく読みましょう。

12. バインドとは
任意の領域とそのデータの
オブジェクトセット

13. Bindオブジェクト
（固有のID（Bind ID）があります）
Bindオブジェクトを通じて、
⃝データ取得
⃝データ編集

14. 実際の開発現場から
ありがちなハマるポイントと
対策をご紹介

15. ケース１：
アプリから
任意のセルを選択したい時

16. 例えば・・・
⃝アプリからレイアウトを指定したい
⃝アプリからバインド領域を指定したい
⃝アプリから特定のセルの値を書き換えたい

17. できません

18. ⃝「A1:C3」のように、特定のセルを指定することは出来ない。
⃝あくまでユーザーが選択したセル、セルの範囲に対して、アプ
リが干渉できる。
⃝「選択」「選択解除」という機能は無い

19. E2D3の場合

20. ユーザーに特定のセルを選択するよう案内
を出すことで対応したり、

21. 欲しいデータ範囲（例えば「A1:H7」）分
の２次元配列を作成して、データを流し込
んだりしている。

22. 空白セルやデータ削除は空文字で埋めることで、
データ書き換えやレイアウト生成を実装している。
テスト
array = [
[ , , , , , ],
[ , , , , , ],
[ , , , , テスト , ],
[ , , , , , ]
]
こんな感じ

23. 注意！
ユーザーが任意のセルを選択中に、その範囲以
上のデータを挿入しようとするとエラー
array = [
[ , , , , , ],
[ , , , , , ],
[ , , , , テスト , ],
[ , , , , , ]
]
データ範囲が違うと怒られます

24. 適切な案内をしましょう。

25. ケース２：
バインド領域を動的に
変更したい

26. 例えば・・・
⃝外部連携アプリから取得したデータをイ
ンタラクティブに反映する
⃝動的にレイアウトを変更する

27. でき、、、なくはない

28. E2D3の場合、グラフ毎に異なるサンプルデータがある

29. 最初のバインド領域分の
データを削除
バインド領域を破棄
新しいバインド領域分の
配列を挿入
新規にバインド領域（オブジェ
クト）を生成

30. 注意！
同じBind-IDで再度作り替えた場合
Bind-ID:1 Bind-ID:1
Bind-ID:1 Bind-ID:1
適切にBindオブジェクトを破棄しないと、内部的にBindオブジェクトが残る

31. ケース３：
バインド領域の変更を監視したい

32. 出来ます！
addHandlerAsyncメソッド

33. 注意！
⃝使わなくなったイベント監視は必ず削除する
⃝同じBind-IDであっても、複数回同じイベン
ト処理を登録しない（イベント処理は上書きさ
れない）

34. イベント処理1
イベント処理2
イベント処理を変更
するために再登録
イベント処理1
イベント処理2
両方実行される

35. 今後のアプリ動向
App for Office

36. Have fun!!