Apps for Office Excelアプリ開発の事例で見るバッドノウハウと回避策
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オブジェクトを通じて、 ◯データ取得 ◯データ編集
実際の開発現場から ありがちなハマるポイントと
対策をご紹介
ケース1: アプリから
任意のセルを選択したい時
例えば・・・
◯アプリからレイアウトを指定したい
◯アプリからバインド領域を指定したい
◯アプリから特定のセルの値を書き換えたい
できません
◯「A1:C3」のように、特定のセルを指定することは出来ない。
◯あくまでユーザーが選択したセル、セルの範囲に対して、アプリが干渉できる。
◯「選択」「選択解除」という機能は無い
E2D3の場合
ユーザーに特定のセルを選択するよう案内を出すことで対応したり、
欲しいデータ範囲(例えば「A1:H7」)分の2次元配列を作成して、データを流し込んだりしている。
空白セルやデータ削除は空文字で埋めることで、 データ書き換えやレイアウト生成を実装している。
テスト
array = [ [“”,””,””,””,””,””], [“”,””,””,””,””,””], [“”,””,””,””,”テスト”,””], [“”,””,””,””,””,””]
]
こんな感じ
注意!
ユーザーが任意のセルを選択中に、その範囲以上のデータを挿入しようとするとエラー
array = [ [“”,””,””,””,””,””], [“”,””,””,””,””,””], [“”,””,””,””,”テスト”,””], [“”,””,””,””,””,””]
]
データ範囲が違うと怒られます
適切な案内をしましょう。
ケース2: バインド領域を動的に
変更したい
例えば・・・
◯外部連携アプリから取得したデータをインタラクティブに反映する ◯動的にレイアウトを変更する
でき、、、なくはない
E2D3の場合、グラフ毎に異なるサンプルデータがある
最初のバインド領域分の データを削除
バインド領域を破棄
新しいバインド領域分の 配列を挿入
新規にバインド領域(オブジェクト)を生成
注意!
同じBind-IDで再度作り替えた場合
Bind-ID:1 Bind-ID:1
Bind-ID:1 Bind-ID:1’
適切にBindオブジェクトを破棄しないと、内部的にBindオブジェクトが残る
ケース3: バインド領域の変更を監視したい
出来ます!
addHandlerAsyncメソッド
注意!
◯使わなくなったイベント監視は必ず削除する ◯同じBind-IDであっても、複数回同じイベント処理を登録しない(イベント処理は上書きされない)
イベント処理1
イベント処理2
イベント処理を変更 するために再登録
イベント処理1
イベント処理2
両方実行される
今後のアプリ動向
App for Office
Have fun!!