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

山本　優ピタリ株式会社

簡単だから活用できるクラウド販売管理「セールスノート」を提供しています。

ロープライス 基幹システム利用 カスタムがお得

ユーザー単位でなく会社単位課金 システム製作～倉庫管理まで 細かなセミオーダーに対応

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

今日の内容

• Apps for Office開発の重要なポイント

• ハマるポイント5選

• 今後のアプリの可能性

Apps for Officeの 重要なポイント（Excelアプリ編）

• 開発環境の選択

• マニフェストファイルの注意点

• アプリで最も重要な要素「Bind（バインド）」

開発環境

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

開発環境

• アプリ上のエラーコンソールを見る唯一のツール

• ブレークポイントの設定

• Visual Studio Community（無料）

これまでのExpressでは出来なかったオフィスアプリの開発が可能に

マニフェストファイル

ドキュメントサイトの サンプル

Visual Studioで 作成された

デフォルトサンプル

マニフェストファイルの 注意点IDやバージョンの桁数は正しく

※間違っていると起動しません ※そもそも不要な項目もあります

アプリ申請時にどの サンプルにも無い項目を求められる

※リジェクト理由に書かれますので、 よく読みましょう。

バインドとは

任意の領域とそのデータの オブジェクトセット

Bindオブジェクト （固有のID（Bind ID）があります）

Bindオブジェクトを通じて、 ◯データ取得 ◯データ編集

実際の開発現場から ありがちなハマるポイントと

対策をご紹介

ケース１： アプリから

任意のセルを選択したい時

例えば・・・

◯アプリからレイアウトを指定したい

◯アプリからバインド領域を指定したい

◯アプリから特定のセルの値を書き換えたい

できません

◯「A1:C3」のように、特定のセルを指定することは出来ない。

◯あくまでユーザーが選択したセル、セルの範囲に対して、アプリが干渉できる。

◯「選択」「選択解除」という機能は無い

E2D3の場合

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

欲しいデータ範囲（例えば「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 Office

Have fun!!