Tweet

簡単リッチWebアプリ作成！Biz/Browser入門

株式会社エヌデーデー
奥田 健一郎
2011/9/5

出だし好調、Biz/Browser V

　アクシスソフトによるとBiz/Browser Vのリリース後、Biz/Browserのダウンロード件数が伸びているようです。やはりBiz/Designerの無償化が大きいのでしょうか。アクシスソフトのBiz/Browser Vプロモーションイベントにもかつて導入を検討されていた企業が再び戻ってくるなど、改めて期待も高まっているようです。

　今までも雑誌のRIA／リッチクライアントの特集などでは海外のプラットフォームに並んで紹介されてきたBiz/Browserですが、今後ますます注目されていくプラットフォームかもしれません。

Biz/Browserの得手不得手

　さて前回「Android対応も視野に入れる、Biz/Browserって何？」の説明で、Biz/Browserでは直感的なGUI操作で画面レイアウトが作成できることと、その内部処理はイベントドリブン方式であることが理解できたと思います。

　これらは非常にVBアプリケーションの開発と似ています。また、用意されている画面コントロールやイベントもVBと似ているため、VBで作成されたアプリケーションを再現することが比較的容易にできます。

　実際筆者も、Biz/Browserの適用を相談されるケースでは、既存のVBアプリケーションの画面レイアウトや操作性を維持したまま移行したいという要望が多いです。

　その際は、主に以下のようなメリット／デメリットがあることを伝えつつ、検討を促すようにしています。

【Biz/Browserのメリット・デメリット】

　メリット

• 一般的なWebアプリケーションより高速（AjaxによりBiz/Browserと同等のUIを作成した場合）
• 一般的なWebアプリケーションより通信量が少ない
• VBライクな画面の作成が容易（VBアプリケーションの再現が容易）
• 入力制御用コントロールが標準機能として豊富に用意されているクライアント側のローカルリソースにアクセスできる
• 外部デバイスとの連携ができる
• .NETクラス実行機能（今回のバージョンより追加）
  
• 日本のメーカーなので問い合わせがしやすい（今回のBiz/Browser Vのリリースに伴いさらに体制を強化したとのこと）

　デメリット

• VBより低速
• 一般的なWebアプリケーションよりクライアント側メモリを消費する
  
• 世の中に多く出回っている便利なJavaScriptライブラリやCSSを適用できない
  （デザイン的に今時のおしゃれなユーザーインターフェイスが苦手）
  
• .NETやJava等に比べてインターネットで取得できる技術情報が少ない
  
• .NETやJava等に比べてBiz/Browserの技術者が少ない
• Biz/Browserのインストールが必要
  
• Biz/Browserのライセンス料が掛かる

　筆者の私見として、もっとザックリといってしまえば、不特定多数のコンシューマ向けで、おしゃれなWebアプリケーションを作成したければHTML5やCSS、JavaScriptに対応した一般的な技術を、エンタープライズ向けで、見た目の派手さより操作性やパフォーマンスを重視するならBiz/Browserを、といったすみ分けで考えています。

　本当に高機能？ 新スプレッドシートコントロールを使ってみる

　Biz/Browserは業務画面で必要となりそうな入力制御用コントロールを標準機能として搭載しているのが一つの売りとなっています。

　表形式のコントロールに関してもSpreadやFlexViewといったコントロールが提供されています。

　しかし、これらは実はあまり高機能とはいえず、例えばグレープシティ製品のSPREADと同等の機能を実現しようとすると、前述のコントロールをかなり拡張する必要がありました。

　筆者もFlexViewを独自に拡張したライブラリを持っていますが、いろいろな機能を盛り込んだ結果、さすがにパフォーマンスに難が出て、大量データの処理には不向きなものとなっています。ですので、大量データの処理が必要な場合は、その拡張ライブラリは使用せず、あらためてFlexViewに、そのアプリケーションに必要な機能のみを実装するようにしています。

　そんな折、Biz/Browser Vは、今回Excelに匹敵する高機能スプレッドシートコントロールを標準搭載した、と大々的にアピールしています。

　これが本当であれば大変喜ばしいことなので、早速、新しく追加されたSSpreadコントロールを触ってみたいと思います。

　今回作成するサンプルアプリケーションは主に以下の処理を行います。

• 処理1　ExcelからSSpreadにデータをインポート
• 処理2　SSpread上でデータを編集（行の追加削除、サーバ送受信によるデータ取得）
• 処理3　処理2のデータをサーバへ送信、または、Excel出力

　今回は、前回説明できなかったサーバ通信処理も説明しようと思いますが、ここではサーバアプリケーションの開発方法までは説明できないため、サーバ側に以下のファイルを置き、それを取得してサーバ処理結果とすることとします。

　実際の開発でも、Biz/Browser側の単体テストでこのような手法をよく使います。

　Webサーバについては、今回も前編同様にIISサーバをローカルPC内に立てたと想定し説明します。

　以下のファイルを、IISのホーム仮想ディレクトリ「C:\Inetpub\wwwroot」に配置してください。

・customerList.csv

・update.csv

　また、アプリケーションから取り込むエクセルファイルもローカルPCのどこかに保存しておいてください。

・ImportSample.xls

　なお、サーバ処理結果をCSV形式で返すのは、CRSにはCSVDocumentクラスというCSV操作に特化したクラスがあり、それを利用することで比較的簡単に内部処理を実装できることから、Biz/Browserアプリケーションでは一般的となります。

　もちろん、Biz/BrowserはXMLにも対応しているので、通信内容がXMLでも構いません。

　画面作成

　まず、前編同様にGUI操作で画面イメージを作成します。

　この時点でSSpreadオブジェクトの宣言に位置情報と大きさが記述されています。

SSpread ssSample {
  X = 13;
  Y = 14;
  Width = 776;
  Height = 228;
}

　今回のサンプルではこれ以外のSSpread操作は、実行時の初期化処理と各ボタンが押されたときに行います。

　同様の処理をオブジェクト宣言部にあらかじめ記述しておくことは可能ですが、その内容が反映されるのは実行時のみのようです。

□実行時の初期化処理

if ( !$DESIGNTIME ) {
　/* 初期化 */
　initializeSpread();
}

/* SSpreadの初期化 */
function initializeSpread(){
　setColTitle();
　setWidthHeight();
　ssSample{
　　MaxRows = 0;
　　MaxCols = 8;
　　AllowDragDrop = $FALSE;
  }
}

/* 列のタイトル設定 */
function setColTitle(){
　ssSample{
　　SetText(1, 0, "顧客ID");
　　SetText(2, 0, "氏");
　　SetText(3, 0, "名");
　　SetText(4, 0, "フリガナ(氏)");
　　SetText(5, 0, "フリガナ(名)");
　　SetText(6, 0, "郵便番号");
　　SetText(7, 0, "住所");
　　SetText(8, 0, "電話番号");
  }
}

/* SSpreadの幅と高さを設定 */
function setWidthHeight(){
　ssSample{
　　ColWidth(1) = 60;
　　ColWidth(2) = 50;
　　ColWidth(3) = 30;
　　ColWidth(4) = 80;
　　ColWidth(5) = 80;
　　ColWidth(6) = 70;
　　ColWidth(7) = 150;
　　ColWidth(8) = 130;
　　RowHeight(-1) = 19;
  }
}

　【1】実行時のみSSpread初期化用関数を呼び出す
　【2】SSpread初期化用に用意した関数
　【3】ssSample{ } で囲むことで、そのオブジェクト配下のメンバに直接アクセスできる（ssSampleオブジェクトへのパスの記述が省略できる）
　【4】行インデックスに 0 を指定することでヘッダ部を操作できる
　【5】行インデックスに-1 を指定することですべての行を指定できる

1-2

INDEX
元祖リッチクライアント、Biz/Browser開発入門（後編） 簡単リッチWebアプリ作成！Biz/Browser入門
	Page1 開発ツールが無料になった「Biz/Browser」とは Biz/Browserの3つの大きな特徴
	Page2 Excelデータをインポート サーバ通信処理 Biz/Browserの中にブラウザを表示 最後に

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード