Biz/Browser(株式会社オープンストリーム)

フォローする

(著者:株式会社オープンストリーム 野田 伊佐夫)

はじめに

本Tipsでは、kintoneとBiz/Browserとの連携イメージ及び連携方法を紹介します。

Biz/Browserとは?

Biz/Browserは、1999年の初版リリースから長年にわたり、ユーザ企業のご要望とともに進化を続けてきた業務システム向けWebプラットフォームです。Webシステムを効率的に操作・運用するためのフロントエンドとして、操作性、レスポンスなどのさまざまな課題が解決できます。デスクトップPC向け「Biz/Browser」、ハンディターミナル向け「Biz/Browser Mobile」、iOS,Androidタブレット向け「Biz/Browser AI」をラインナップしています。専用の統合開発環境として「Biz/Designer」「Biz/Designer Mobile」を無償で提供しており、GUI環境での効率的な画面UIの作成が可能です。

連携イメージ

「Biz/Designer」の豊富な部品群、プロパティ設定により、GUI環境で画面UIを作成します。画面の定義情報はスクリプトファイル(CRS)に保存されます。一度ダウンロードしたCRSはローカルディスクにキャッシュされ、次回以降、CRSに変更がない限りキャッシュファイルを参照します。サーバサイドとはデータのみの疎結合な連携となり、kintoneとも、その他の既存のIT資産とも連携が可能です。通信による画面描画が必要ないため、モバイル回線でも高レスポンスが実現できます。また、キャッシュ機能とローカルリソース制御により、オフライン時の運用も可能となります。

豊富な部品群で入力生産性の高い画面UIを実現(FlexViewの例)

連携のシナリオ

Biz/BrowserはHTTPで通信を行うことを基本としているうえ、画面定義ファイルと項目データの通信が分離しており、kintoneとは非常に相性が良い製品です。

今回は、単票型入力画面のサンプルとして、Biz/Browserで作成した社員情報の管理画面とkintoneアプリ上の社員データを連携します。プログラムをシンプルに例示するため、1件のデータの取得と、新規に1件のデータを登録する処理のみの実装を行います。

Biz/Browserで画面を作成する場合、入力項目にプロパティを設定するだけでkintoneのみでは実現できない高度な入力制御を簡単に実現できます。例えば、テキストフォーマットの制限や、フリガナの自動入力、IMEの自動起動、入力完了時の次項目への移動など、業務効率を高めるための機能が多数用意されています。

社員情報入力画面の例

サンプルプログラム

  1. 社員番号を入力し、kintoneから社員番号に該当するデータを表示する
  2. 「登録」ボタンをクリックし、画面の項目のデータをkintoneへ追加する
  3. 「削除」ボタンをクリックし、指定の社員番号のデータをkintoneから削除する

kintone側の準備

連携プログラムを作成する前に、kintone側で以下のような社員データを保存するためのアプリを作成します。

フィールド名

フィールドタイプ

フィールドコード

社員番号

数値

syainno

氏名

文字列(1行)

name

氏名(カタカナ)

文字列(1行)

name_kana

性別

ラジオボタン

sex

電話番号

文字列(1行)

tel

生年月日

日付

birthday

年齢

数値

age

所属

数値

unit

郵便番号

数値

post

住所1

文字列(1行)

address1

住所2

文字列(1行)

address2

サンプルプログラム

1.社員番号を入力し、確定するとkintoneから社員番号に該当するデータを表示する

REST APIのGETを用い、入力された社員番号から社員データを取得します。
Biz/Browserでは入力値が変更された際、Changeというイベントが発生します。ChangeイベントはOnChangeというFunction(イベントハンドラ)で処理を行います。

findHttpSession関数でkintoneサーバへのHTTPセッションを取得します。指定するURLはkintoneアプリが存在するcybozu へのURLです。
queryとして入力された社員番号を指定するためsyainno=Value(フィールドへの入力値)というUnicode文字列を作成します。この文字列をencodeURL関数に入力するとUTF-8でURLエンコードされた文字列が返されます。

HttpSessionオブジェクトからCreateRequestメソッドを呼び出しAPIへのリクエストを生成します。
パラメータとしてアプリID(app)とこの際URLパラメータとして先程作成したquery文字列を付加しています(アプリIDは使用する環境に合わせ変更してください)。

認証のため、リクエストのHTTPヘッダとして”X-Cybozu-Authorization”を追加します。
サンプルでは************となっていますので「ログイン名:パスワード」をBASE64エンコードしたものに置き換えてください。
そしてHttpSessionオブジェクトのgetメソッドでサーバへ通信を行います。

結果はメソッドの戻り値としてHttpResponseオブジェクトが返されますので、次にデータを取得し各画面項目へ反映させます。

kintoneからの取得データはUTF-8でエンコードされたJSONデータです。
Biz/BrowserではUTF-8エンコーディングの文字列は直接扱うことができませんので、TextConverterを用い文字コードを変換します。

そして、JSONDocumentクラスのparseメソッドでJSONデータの解析を行うと、Arrayクラスへの展開が行われます。
後は、取得したArrayから”records”要素を取得し、さらに、各フィールドのデータを取得し、各画面項目へ代入すれば完了です。
一点テクニックとして$ID(レコードID)を内部変数に保存しています。

このレコードIDがあるか、ないかで新規登録なのか、データ更新なのかを判定すると同時に、更新や削除の際のレコードID指定に利用しています。

2.「登録」ボタンをクリックし、画面の項目のデータをkintoneへ追加する

次にREST APIのPOSTを用い、社員データを追加します。
サンプルでは既存のレコードを取得できたかどうかで追加と更新を切り替えています。

登録(更新)ボタンが押された際、Touchというイベントが発生しますので、OnTouchイベントハンドラに処理を記述します。

入力チェックの後、各項目の値をJSON形式のデータとして組み立てます。Biz/Browserの持つ、JSONDocumentクラスとArrayクラスを用いても、データ作成が可能ですが、今回のデータ量の場合、直接文字列で作成した方がシンプルです。

更新時はレコードIDが必要になりますので、更新モードの時は検索時に取得したIDを付加しています。

HTTPセッションの取得とリクエストの作成はデータ取得時と同様です。POSTやPUTでは、URLにパラメータは指定しません。
GET時と同様に認証のため、リクエストのHTTPヘッダとして”X-Cybozu-Authorization”を追加します。
JSONデータを送信するため、HTTPヘッダに”Content-Type”として”application/json”を追加します。

kintoneはJSONデータをUTF-8として解釈するため、文字列TextConverterでUTF-8に変換してリクエストボディにセット(AddBody)します。

HttpSessionオブジェクトのpostメソッド(追加)、またはputメソッド(更新)でサーバへ通信を行い、HTTPコードとして$HTTP_OK(200)が戻れば完了です。

3.「削除」ボタンをクリックし、指定の社員番号のデータをkintoneから削除する

次にREST APIのDELETEを用い、社員データを削除します。

削除ボタンが押された際、Touchというイベントが発生しますので、OnTouchイベントハンドラに処理を記述します。

HTTPセッションの取得とリクエストの作成はデータ取得時と同様です。
GETと同様にパラメータとしてアプリID(app)と削除レコードのレコードID(検索時に取得したレコードID)を付加しています(アプリIDは使用する環境に合わせ変更してください)。
認証のため、リクエストのHTTPヘッダとして”X-Cybozu-Authorization”を追加します。

HttpSessionオブジェクトのdeleメソッドでサーバへ通信を行い、HTTPコードとして$HTTP_OK(200)が戻れば完了です。


上記、サンプルでは詳細なエラー処理を省いていますが、実際にkintoneへ接続し通信を行う部分は僅か数行で記述できることが分かるかと思います。

動作チェック

  1. 社員番号を入力します
  2. 社員番号に該当するデータがある場合、データが表示され下部の「登録」ボタンが「更新」に変わります(変更モード)
  3. 社員番号に該当するデータがない場合、各欄はそのままです。下部のボタンは「登録」になっています(追加モード)
  4. 各項目を入力し、「登録」または「更新」ボタンを押すと、kintone上のデータが追加、更新されます
  5. 変更モード時、「削除」ボタンを押すと、kintone上のデータが削除されます。

試用環境の取得について

Biz/Browser V kintone試用限定版はこちらのページより、ダウンロードできます。

https://biz-browser.jp/download/kintone_trial/
ダウンロードされるもの Biz/Browser V , Biz/Designer , サンプルCRSプログラム

※Biz/Browser V kintone試用限定版について
ダウンロードされるBiz/Browser V (PC版)は、次期バージョン Biz/Browser V バージョン5.1 で正式に搭載されるJSON対応機能の先行プレビュー版となっております。
サンプルプログラムによる kintone 連携の動作検証、 Biz/Browser の機能確認等は問題なく行えますが、 実業務の運用につなげる場合には、ライセンス購入、バージョン5.1への移行をお願いいたします。
※試用限定版で作成したCRSは Biz/Browser V バージョン5.1でそのままご利用いただけます。

お問い合わせ: 株式会社オープンストリーム プロダクト事業部 営業部

product-info@opst.co.jp

【ご参考】連携イメージサンプル

2014 Japan IT Week 春 クラウド コンピューティング EXPO kintoneブース出展事例

2014 Japan IT Week 春 クラウド コンピューティング EXPO kintoneブース出展事例

多店舗横断で催事場の売れ行きを分析。キャンペーン後の商品投入計画を立案。タッチパネル、バーコード読取による商品選択、 ネットワークがつながらないオフライン環境でもPOSデータを蓄積。

迅速に柔軟にサービスをつくる

終わりに

kintoneを導入することで、業務改善に有効な組織横断型のコミュニケーション基盤が構築できます。
Biz/Browserと連携することで、下記が可能になります。

  • 高度な画面UIを簡単に実現
  • 既存のIT資産との連携
  • マルチデバイスの開発環境の統合
  • オフライン業務
  • 長く使い続けられるシステム基盤

kintone と Biz/Browser の連携により、業務改善型のハイブリッドクラウドが実現できます。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk