Biz/Browser AI 開発用
スタートアップガイド

株式会社オープンストリーム

目次
1.

事前準備 .......................................................................................... 3

2.

Biz/Browser AI のインストール ............................................................ 4

3.

プロジェクトの作成

4.

Biz/Designer Mobile でリモートデバッグ設定をする ................................ 13

5.

Biz/Browser AI の設定 ...................................................................... 14

6.

リモートデバッグ .............................................................................. 16

7.

リモートデバッグがうまく行えない場合 ................................................. 19

8.

リモートデバッグで使用するポート番号の変更 ........................................ 21–Hello World- ...................................................... 52

BISG141222

1. 事前準備
本スタートアップガイドは既に Biz/Designer Mobile をインストール済みの状態を前提に説明しております。
まだ、Biz/Designer Mobile をインストールされていない場合は、弊社 HP よりダウンロードし、インストールを行って下さい。
ご用意頂くもの① iPadまたは Android 端末② Biz/Designer Mobile がインストールされた Windows PC③ 無線 LAN 環境 (インターネットに接続が出来ること)

3

BISG141222

2. Biz/Browser AI のインストール
iPad の場合
Biz/Browser AI は「App Store」で公開されていますので、iPad で「App Store」
を開き、インストールして下さい。

「bizbrowser ai」で検索して下さい。
「bizbrowser」で検索すると別のアプリが Hit しま
すので、ご注意下さい。

Android 端末の場合
apk ファイルを利用してインストールしてください。
インストール方法は、インストールガイドをご覧ください。
インストール後、Biz/Browser アイコンをタップし、Biz/Browser を起動して下さい。

「デモアプリ一覧を更新する」を押すと、デモの一覧がダウンロードされます。

4

BISG141222

プロジェクトの作成–Hello World-① Biz/Designer Mobile の起動
スタートメニュー（ Windows 8 の場合は「全てのアプリ」画面 ）から「Biz/Designer Mobile」を起動します。
② 新規プロジェクトの作成「新規プロジェクト(N)」を選択し「空のプロジェクト」を作成して下さい。

5

BISG141222

プロジェクト名を「startup」（任意）と入力し、プロジェクトを作成して下さい。

③ プロジェクトの設定
メニューバーの「プロジェクト(P)」から「設定(S)」を選択して下さい。

6

BISG141222

「基本設定」タブの「対象 Biz/Browser バージョン(E)」でご利用になる
Biz/Browser AI のバージョンを選択し、「OK」を押して下さい。

7

BISG141222

④ 新規 Form の作成
次に Form を作成します。

新規 Form の作成後、ファイルを「Form1.crs」のまま保存して下さい。

8

BISG141222

⑤ ボタンの配置
右部のクラスセレクタから「Button」をクリックし、Form 画面でドラッグ＆ドロップすることにより、ボタンを作成できます。

9

BISG141222

作成したボタンを右クリックし、「直接編集(E)」を押して、タイトルに「Hello World」と入力してください。

直接編集の方法について
ショートカットキーが割り振られております。
ボタンを選択後、F2 で同様の操作が行えます。

10

BISG141222

⑥ Touch イベントの作成
作成したボタンを選択し、右部の「プロパティビュー」の「イベントタブ」を選択して下さい。
イベント名「Touch」をダブルクリックし、スクリプトビューへ移動します。

11

BISG141222

イベント関数が自動的に生成されていることをご確認下さい。
「OnTouch イベントハンドラ内」に print 関数を作成します。
引数に文字列 Hello World と入れ、Biz/Designer Mobile の下部の実行結果ビ
ューに Hello World と出力するサンプルが作成出来ました。
サンプルコード：
Function OnTouch( e ) {/* OnTouch イベントハンドラ *//* ここにイベント処理を記述してください */print("Hello World.\n");}12

BISG141222

3. Biz/Designer Mobile でリモートデバッグ設定をする
リモートデバッグを行うために準備を行います。
メニューバーの「ツール」より、「オプション(O)」を選択して下さい。

下部の「リモートデバッグを使用する(R)」にチェックを入れ、「OK」を押して下さい。

13

BISG141222

4. Biz/Browser AI の設定
iPad の場合
iPad の設定画面にある Biz/Browser の項目を選択して下さい。
「Biz/Browser」起動画面の種類を選択することが出来ます「ホーム画面の種類」をタップして、起動画面を変更します。

リモートデバッグを行うため、ホーム画面の種類を「デベロッパ」に変更して下さい。

14

BISG141222

iPad の場合、ホーム画面の種類は４種類ございます。
標準：
Biz/Browser AI のデモをダウンロードしてご体験できます。
デベロッパ：
開発者用のリモートデバッグに 特化したメニューが実行されます。
ブランク：
何もしません。
外部からのカスタム URL スキームからのみ、実行されます。
カスタム：「カスタム ホーム URL」に指定された URL にログインします。

Android 端末の場合
Biz/Browser AI のホーム画面で「開発者画面への切り替え」をクリックしてく
ださい。

15

BISG141222

リモートデバッグ
実際にリモートデバッグを行うために、PC の IP アドレスを取得する必要がございます。
コマンドプロンプトを利用して IP アドレスを取得して下さい。

IP アドレスの取得の仕方
Windows キーと R キーを同時に押して、ファイル名を指定して実行を出し、「cmd」と入力して下さい。
または、スタートメニューより、「プログラムとファイルの検索」から、「cmd」と入力して下さい。
黒い画面が表示後、「ipconfig」と入力すると、ネットワークの状態が取得できます。
「IPv4 Address」の値が IP アドレスとなります。

取得した IP アドレスを仮に「10.0.0.1」として説明いたします。
IP アドレス取得後、iPad から Biz/Browser を起動して下さい。
起動時のホーム画面が標準モードだった場合は、アプリケーションを再起動して下さい。

iPad でのアプリケーションの強制終了の仕方
iPad のホームボタンを素早く２連射することのより、起動中のアプリケーション一覧が表示されます。
Biz/Browser のアイコンを下から上にフリックすることにより、アプリケーションが強制終了されます。

Biz/Browser を起動し、「デバッグモードを開始」ボタンを押すと、デバッグモード設定ダイアログが表示されます。
先ほど取得した IP アドレスを「ホスト」へ入力し、「開始」ボタンを押して下さい。

16

BISG141222

ポートについてiPad または Android と PC との接続時のポート番号は、標準が 44080 となっております。
既にこのポート番号をお使いの場合は、Biz/Designer Mobile の設定より変更出来ます。
ポート番号の変更は、８章をご参考下さい。

17

BISG141222

接続先ホストの変更について
接続先ホストは最後に接続された IP アドレスが記憶され、タップすると即座にデバッグ接続を行います。
接続先ホストを変更した場合は、「デバッグモードを開始する」ボタンを長押し、「デバッ
グモード設定」ダイアログを表示して、ホストの変更を行って下さい。

「開始」ボタンを押すと、Biz/Designer Mobile 側で接続が確立したメッセージが出力されます。

「OK」を押すと、テスト実行が行えるようになります。
先ほど作成した「Form1.crs」を開き、赤い三角の「編集中のファイルからテスト実行」を行って下さい。
iPad または Android 上で、Button が配置された Form が表示されます。

ボタンを押す度に、Biz/Designer Mobile の実行結果ビューに「Hello World」を文字が表示されます。

編集中のファイルからテスト実行について
ショートカットキーが割り振られております。
Ctrl+F5 で同様の操作が行えます。

ステップ実行によるデバッグについて
Biz/Designer では、crs プログラム上にブレークポイントを設置し、ステップ実行することが出来ます。イベントが発生した時や、一時停止を行った時に変数の値や、オブジェク
トのプロパティを参照することが出来ます。

18

BISG141222

5. リモートデバッグがうまく行えない場合
リモートデバッグ機能では、通信環境によってうまく接続が出来ない場合があります。出来ない場合の解決方法を以下に示します。
① ファイアーウォールによる障害
ファイアーウォールが設定されている場合、ポートの開放がうまく行えない場
合がございます。
まず、Windows のコントロールパネルより、ファイアーウォールを一旦無効にし、接続できるかをご確認下さい。
接続が行えた場合、ファイアーウォールの設定を戻して下さい。
その後、ファイアーウォールの詳細設定を開き、受信の規則に「新しい規則」
を設定して下さい。
例）[ポート]→[TCP/特定のローカルポート(44080)]→[接続を許可する]→[必要に応じてチェックを入れる]→[名前(Biz/Designer)]
接続が行えない場合、そのまま②へ進んで下さい。
② セキュリティソフトによる障害
セキュリティソフトの設定により指定のポートが利用できない場合がございます。
①と同様に、一度セキュリティソフトを停止の上、接続確認を行って下さい。
接続が行えた場合、各種セキュリティソフトの設定より、指定ポートの受信を許可して下さい。
③ 「①②」を試したが、接続が行えない場合
同じネットワーク内に端末が存在するかをご確認下さい。
iPad や Android 側の IP アドレスを確認します。
「設定」→「Wi-Fi」→接続中のアクセスポイントを選択して下さい。
IP アドレスの欄(仮に 10.0.0.2 とします)を覚えていただき、PC から接続確認を行います。
コマンドプロンプトを開き、以下のように入力して下さい。
ping 10.0.0.2

19

BISG141222

結果が「Request timed out.」と表示された場合、同一ネットワーク内に存在してないか、ネットワーク設定が不正です。
ネットワークの設定を再度ご確認下さい。
結果が「Reply from 10.0.0.2: bytes=32 time<1ms TTL=128」と表示された場合、同一ネットワークには存在しておりますので、その他の原因が考えられます。
Proxy や、アクセスポイントの設定をご確認の上、ネットワーク担当者へご相談下さい。

Ping コマンドの使い方
Windows キーと R キーを同時に押して、ファイル名を指定して実行を出し、「cmd」と入力して下さい。
または、スタートメニューより、「プログラムとファイルの検索」から、「cmd」と入力して下さい。
黒い画面が表示後、「ping [IP アドレス]」と入力すると、接続先の端末へパケットの送受
信状況を確認することが出来ます。

ネットワーク環境が不安定な場合、リモートデバッグ中に動作が止まってしまうことがあります。その際に、片方の接続ステータスが接続中になり、Biz/Browser、Biz/Designer の操作が行えなくなることがあります。
その場合は、PC と iPad 共に一度アプリケーションを終了し、再度リモートデバッ
グを行って下さい。

20

BISG141222

6. リモートデバッグで使用するポート番号の変更
リモートデバッグでは、iPad から PC に接続する際に特定のポートを開放する必要があります。
標準では 44080 番ポートを使用しますが、メニューバーの「実行」の「ネットワークの設定」から「デバッグポート番号(D)」を変更することが出来ます。

21

BISG141222

Biz/Browser AI 開発用 スタートアップガイド

株式会社オープンストリーム

22

BISG141222