簡単リッチWebアプリ作成！Biz/Browser入門：元祖リッチクライアント、Biz/Browser開発入門（後編）（2/2 ページ）

» 2011年09月05日 00時00分公開

[奥田健一郎，株式会社エヌデーデー]

Excelデータをインポート

　各ボタンの処理は OnTouch イベントハンドラに記述します。まず、Excelデータ取込用ボタンの処理を作成してみます。SSpreadにはExcelファイルを読み込んでその内容をインポートする機能があり、これを使います。

※ただしこれは、対応しているのがExcel 2003までの形式となるため、Excel 2007以降のファイル形式を取り込みたい場合は、Excel 2003までのxls形式で保存し直す必要があります（2011年9月1日時点）。

　以下、ソースの説明です。

Button btnImport {/* 【1】 */
  X = 281;
  Y = 256;
  Width = 120;
  Height = 29;
  Title = "Excelデータ取込";
  　
  function OnTouch(e){/* 【2】 */
    SSpreadSample.importExcel();
  }
}
　
～中略～
　
function importExcel(){
  if(//.MessageBox("表示中のデータは破棄されます。\r\nよろしいですか？",
                   "確認",
                   $OKCANCEL + $ICONQUESTION) != OkSelected){
    return;
  }
  /* Excelシートからデータを取得し、SSpreadに表示 */
  var fs = New FileSystem();/* 【3】 */
  var f;
  Try{
    f = fs.OpenDialog("ファイルを開く", "*.xls", "xls", "ImportSample.xls");  /* 【4】 */
  }Catch(exp){
    if(exp.Code == 21){/* 【5】 */
      return;
    }else{
      throw exp;
    }
  }
  ssSample{/* 【7】 */
    ImportExcelSheet(f, 0);/* 【6】 */
    
    /* 列タイトル・プロパティの再設定 *//* 【7】 */
    SSpreadSample.setColTitle();/* 【7】 */
    MaxRows = DataRowCnt;/* 【7】 */
    MaxCols = 8;/* 【7】 */
    AllowDragDrop = $FALSE;/* 【7】 */
  }
}

【1】“Excelデータ取込”ボタンの定義
【2】ボタンが押された時のOnTouchイベントハンドラを定義。処理本体を記述した関数を呼び出すだけ
【3】Excelファイルを操作する為のFileSystemオブジェクトを定義
【4】ローカルPC内のファイルを選択する為のダイアログボックスをポップアップしExcelファイルをFileオブジェクトに格納
【5】ダイアログによるファイルの選択が中止された場合の例外処理
【6】Excelファイルのシート（インデックス０）からデータを取り込む
【7】SSpreadオブジェクトの各種再設定処理

　スプレッドの見た目を整える処理なども記述されていて複雑に見えますが、Excelデータを取り込んで表示する処理そのものはSSpreadに用意されているImportExcelSheetメソッドを呼び出すだけとなります。

　なお、今回のサンプルでイベントハンドラ内の記述は、関数を呼び出すだけのシンプルな記述としています。

　特にイベントハンドラ内に複雑な処理を記述しても問題はありませんが、筆者が実際の業務アプリケーションを構築する際には、ソースの可読性を意識して、画面オブジェクトの定義部分は極力シンプルにして、煩雑な処理は分けて書くようにしています。

　これ以外のボタンの処理も説明していきます。

行追加用ボタンのイベントハンドラから呼ばれる処理

/* 行追加 */
function insertRow(rowCount){/* 【1】 */
  ssSample{
    MaxRows = MaxRows + rowCount;/* 【2】 */
  }
}

【1】追加したい行数を引数に設定
【2】MaxRowsプロパティの値を変更することで行数を変更する

行削除用ボタンのイベントハンドラから呼ばれる処理

/* 選択された行の削除 */
function deleteRow(){
  var deleteRowCount = 0;
  ssSample{
    /* 1行以上の行が選択されたときのみ動作 *//* 【1】 */
    if(SelBlockCol == -1 && SelBlockCol2 == -1){
      deleteRowCount = SelBlockRow2 - SelBlockRow + 1;
      DeleteRows(SelBlockRow, deleteRowCount);/* 【2】 */
      /* 削除行分だけ全体行数を詰める */
      MaxRows = MaxRows - deleteRowCount;
    }
  }
}

【1】SelBlockCol、SelBlockCol2は、選択中のセルの左端と右端の列番号を取得するプロパティ。行選択がされている場合は-1が返る
【2】DeleteRowsメソッドで行を削除

Excelファイル出力用ボタンのイベントハンドラから呼ばれる処理

/* Excelにエクスポート */
function exportExcel(){
  var fs = New FileSystem(FileSystem.PUBLIC_ROOT);
  var f;
  Try{
    f = fs.SaveDialog("ファイルに保存", "*.xls", "xls", "ExportSample.xls");
  }Catch(exp){
    if(exp.Code == 21){
      return;
    }else{
      throw exp;
    }
  }
  ssSample.ExportExcelBook(f);/* 【1】 */
}

【1】ExportExcelBookメソッドでファイル出力

サーバ通信処理

　ここまでの説明でExcelファイルから読み込んだデータをスプレッドシート上で編集し、またExcelファイルへ出力する処理は記述できました。

　しかし、実際の業務アプリケーションではBiz/BrowserからWebサーバへアクセスしデータの取得、更新を行うことになると思います。

　少しSSpreadの説明から離れますが、サーバ通信処理の説明をしておきます。

　今回はサーバとの通信処理を1つの関数にまとめました。その通信処理用関数は、引数に1.サーバのURL（ルートからの絶対アドレス）、2.サーバへ送信するCSV文字列、3.サーバへのリクエスト形式（GETまたはPOST）、を指定します。

　戻り値はサーバとの通信結果に当たるCSV文字列です。

サーバ通信処理用関数

/* サーバ通信 */
function communicateHttpResponse(requestUrl, csvString, methodName){
  var session = findHttpSession("http://localhost");/* 【1】 */
  var request = session.CreateRequest(Str(requestUrl), "UTF-8");/* 【2】 */
  if(csvString != null){
    request.addBody(csvString);/* 【3】 */
  }
  var response;
  switch (methodName) {
case "GET":
    response = session.get(request);/* 【4】 */
    break;
  case "POST":
    response = session.post(request);/* 【5】 */
    break;
  }
  return response.read();
}

【1】セッションオブジェクトを取得
【2】リクエストを生成
【3】リクエストのメッセージボディにCSVを追加
【4】GETメソッドでリクエストを送信
【5】POSTメソッドでリクエストを送信

　この関数を使って、サーバデータ取得用ボタンとサーバ更新用ボタンの処理を実装します。

サーバデータ取得用ボタンイベントハンドラ

function OnTouch(e){
  /* データ送受信 */
  var csvData = SSpreadSample.communicateHttpResponse("CustomerList.csv", null, "GET");/* 【1】 */
  /* SSpreadに反映 */
  SSpreadSample.putCSVStringDataToSSpread(csvData);/* 【2】 */
}

【1】サーバからCSVデータを取得する
【2】サーバから取得したCSV文字列をスプレッドに反映させる処理（後述）

サーバ更新用ボタンイベントハンドラ

function OnTouch(e){
  /* CSVデータ取得 */
  var csvString = SSpreadSample.getCSVFromSSpread();/* 【1】 */
  /* データ送受信 */
  var returnString = SSpreadSample.communicateHttpResponse("update.csv", csvString, "POST");/* 【2】 */
  /* 受信メッセージを表示 */
  //.MessageBox(returnString);
}

【1】サーバから取得したCSV文字列をスプレッドに反映させる処理（後述）
【2】サーバへCSV文字列を送信し、結果を取得する

　続いて、この処理の中で行っている、スプレッドの処理を説明します。

CSV文字列をスプレッドに設定する処理

function putCSVStringDataToSSpread(csvString){
  /* データ件数をカウント */
  var csvDoc = new CSVDocument();
  csvDoc.parse(csvString);
  var rowCount = csvDoc.rows;
  
  /* SSpreadに反映 */
  ssSample{
    SSpreadSample.insertRow(rowCount);/* 【1】 */
    Row = DataRowCnt + 1;/* 【1】 */
    Col = 1;/* 【1】 */
    Row2 = Row + rowCount;/* 【1】 */
    Col2 = 8;/* 【1】 */
    Clip = csvString.replace(",", "\t");/* 【2】 */
  }
}

【1】Row,Col,Row2,Col2プロパティでデータを設定するセルブロック（範囲）を指定
【2】CSV文字列をタブ区切り文字列に変換した後、Clipプロパティを使用して、指定したセルブロックのデータを一括で設定

スプレッドからCSV文字列を取得する処理

function getCSVFromSSpread(){
  var clipData;
  /* データ部をTSVテキストで取得 */
  ssSample{
    Row = 1;
    Col = 1;
    Row2 = DataRowCnt;
    Col2 = DataColCnt;
    clipData = Clip;/* 【1】 */
  }
  /* タブをカンマに変換 */
  var csvString = clipData.replace("\t", ",");/* 【2】 */
  return csvString;
}

【1】Clipプロパティを使用して、指定したセルブロックのデータを一括で取得
【2】タブ区切り文字列をCSV文字列に変換

　以上がサンプルアプリケーションの機能の説明となります。早速アプリケーションを実行して、エクセルやサーバと連携しているのを確認してみてください。

サンプルアプリ「Sample.zip」

メモ
　ローカル上でIISを使用してサンプルを実行する場合、更新ボタンをクリックするとHTTP405エラーが発生することがあります。これはIIS側でPOSTメソッドが許可されていないために発生している可能性があります。その場合は、コンピュータの管理画面からWebサイトのプロパティを選択して、[ホームディレクトリ]⇒[構成]⇒[マッピング]⇒[追加]をクリックして、拡張子に「.csv」、実行ファイルのパスにIISのシステムディレクトリにある「ssinc.dll」、動詞に「POST」を追加します。もしOKボタンがグレーアウトされて押せない場合は、一度、実行ファイルの部分をクリックすると押せるようになります（古いIISのバグの様です）。

　今回SSpreadを使ってみた感想としては、今までのSpreadやFlexViewのように、CSV形式との連携を意識した作りになっていないのは少し不便に感じました。

　とはいえ、SSpreadは豊富な機能をそろえており、今回説明した機能はほんの一部で、それ以外も見渡してみたところ、業務アプリケーションに必要となりそうなものは一通り装備されているといってよさそうです。

　当時、業務用VBアプリケーション開発でスタンダードのように使われていたグレープシティのSPREAD（当時のバージョン）と同等レベルの機能を持っていると言ってよさそうです。

　これを標準機能として持っているのはBiz/Browser にとって強みといえます。

Biz/Browserの中にブラウザを表示

　さて、今回のサンプルの中では紹介できませんでしたが、Biz/Browser Vから搭載された機能で、筆者の興味を引いた機能を紹介しておきます。

　その1つにHtmlViewクラスがあります。HtmlViewによりBiz/Browserの内部でInternet Explorerを起動することができるようになります。

　今まではInternet Explorerの中でBiz/Browserを起動できたのですが、なかなか制御が難しくあまり使いたい機能ではありませんでした。ですので、今回の逆転の発想は、あまり意味がないように思えるかもしれませんが、実際には結構使い勝手が良く、うれしい機能の1つです。

　これによりインターネットをBiz/Browserアプリケーションから閲覧できるのはもちろんのこと、サーバ側にあるPDFファイルを表示し印刷することなども容易になります。

画面イメージ

　この他にも、.NETクラスライブラリの呼び出し機能や圧縮通信、非同期通信機能など柔軟なアプリケーション開発を可能とする、いろいろな機能が追加されています。

　以前、Biz/Browserの導入を検討して断念した人も、あらためて今回のVに触れてみるといいように思います。

最後に

　さて、前後編にわたりいろいろとBiz/Browserについて説明してきましたが、このBiz/Browserの最大の特徴は、ある意味、日本製であることといえるかもしれません。

　機能的に海外製のRIA／リッチクライアント・プラットフォームに負けているとは思いません。

　Biz/Browserはあくまでもエンタープライズ向けに特化したプラットフォームですから、守備範囲は狭いものの、その範疇（はんちゅう）の中では海外製のプラットフォームよりも優位な点は多々あります。

　また、はやり廃りの早い海外製品に対して、アクシスソフト（現オープンストリーム）はBiz/Browserの恒久的なサポートを宣言しています。

　このような背景も踏まえ、Microsoft系かオープンソース系かという議論の中に、日本製は？　という判断要素を取り入れてはいかがでしょうか。

「元祖リッチクライアント、Biz/Browser開発入門」バックナンバー

前のページへ 1|2 　　　　　　

SpecialPR

スポンサーからのお知らせPR

SpecialPR

＠IT eBook

システム開発ノウハウ【発注ナビ】PR

あなたにおすすめの記事PR

@ITについて

RSSについて

＠ITのRSS一覧

アイティメディアIDについて

アイティメディアIDとは

メールマガジン登録

＠ITのメールマガジンは、もちろん、すべて無料です。ぜひメールマガジンをご購読ください。

申し込みページへ

ITmediaはアイティメディア株式会社の登録商標です。

簡単リッチWebアプリ作成！Biz/Browser入門：元祖リッチクライアント、Biz/Browser開発入門（後編）（2/2 ページ）

Excelデータをインポート

行追加用ボタンのイベントハンドラから呼ばれる処理

行削除用ボタンのイベントハンドラから呼ばれる処理

Excelファイル出力用ボタンのイベントハンドラから呼ばれる処理

サーバ通信処理

サーバ通信処理用関数

サーバデータ取得用ボタンイベントハンドラ

サーバ更新用ボタンイベントハンドラ

CSV文字列をスプレッドに設定する処理

スプレッドからCSV文字列を取得する処理

Biz/Browserの中にブラウザを表示

画面イメージ

最後に

＠IT eBook

終わらせましょう。複雑過ぎるKubernetes／クラウドネイティブが生む心理的安全性の低下を――無料でクラウドセキュリティの勘所が分かる130ページの電子書籍

日本の半導体産業は復活できるのか？　半導体産業のいまと未来を見る

ユーザーの「無知」は罪なのか？――IT訴訟解説ベンダーvs.ユーザー企業死闘編

Pythonで日付を扱う際の「はて？」を解決する無料の電子書籍『解決！Python　日付データ編』

簡単リッチWebアプリ作成！Biz/Browser入門：元祖リッチクライアント、Biz/Browser開発入門（後編）（2/2 ページ）

Excelデータをインポート

行追加用ボタンのイベントハンドラから呼ばれる処理

行削除用ボタンのイベントハンドラから呼ばれる処理

Excelファイル出力用ボタンのイベントハンドラから呼ばれる処理

サーバ通信処理

サーバ通信処理用関数

サーバデータ取得用ボタンイベントハンドラ

サーバ更新用ボタンイベントハンドラ

CSV文字列をスプレッドに設定する処理

スプレッドからCSV文字列を取得する処理

Biz/Browserの中にブラウザを表示

画面イメージ

最後に

＠IT eBook

終わらせましょう。複雑過ぎるKubernetes／クラウドネイティブが生む心理的安全性の低下を――無料でクラウドセキュリティの勘所が分かる130ページの電子書籍

日本の半導体産業は復活できるのか？ 半導体産業のいまと未来を見る

ユーザーの「無知」は罪なのか？――IT訴訟解説 ベンダーvs.ユーザー企業 死闘編

Pythonで日付を扱う際の「はて？」を解決する無料の電子書籍『解決！Python 日付データ編』

日本の半導体産業は復活できるのか？　半導体産業のいまと未来を見る

ユーザーの「無知」は罪なのか？――IT訴訟解説ベンダーvs.ユーザー企業死闘編

Pythonで日付を扱う際の「はて？」を解決する無料の電子書籍『解決！Python　日付データ編』