20150314 appforofficestudy

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

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

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

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

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

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

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

マニフェストファイル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

でき、、、なくはない

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

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

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

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

出来ます！
addHandlerAsyncメソッド

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

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

今後のアプリ動向
App for Oﬃce

Recommended