Chap2

2.7 STEP4 Webアプリケーションとの連携

 DataSpiderのHTML作成機能では、HTMLファイルを作成や生成されたHTMLをブラウザに動的に返す処理を作ることができます。このステップではHTML作成機能を使ってWebアプリケーションと連携する方法を紹介します。このステップを通じて、DataSpiderのスクリプトをWebアプリケーションと容易に連携できることを体験できます。

2.7.1DataSpiderのWeb連携機能

 Webアプリケーション連携機能として、DataSpiderには2種類のツールと3種類のトリガーが用意されています。

● ツール
  • HTMLファイル生成 ⇒ HTML形式のファイルを作成する
  • HTMLデータ生成 ⇒ HTMLデータを生成し呼び出し元に返す
● トリガー
  • HTTPトリガー ⇒ ブラウザからURLをクリックしてDataSpiderの処理を起動し、戻り値を受けとる機能(図2.4)
  • Webサービストリガー ⇒ DataSpiderの処理をWebサービスから呼び出すことができる。DataSpiderがWebサービスプロバイダとなる機能
  • ScriptRunnerProxy ⇒ DataSpiderの処理をJavaプログラムから呼び出すためのAPI

図2.4:HTMLデータ生成処理とHTTPトリガーを組み合わせた利用例

2.7.2売り上げ情報をHTMLファイルに出力してみよう!

 生産者別売り上げ情報をHTMLファイルに表形式で出力する処理を作成してみましょう。

使う機能

  • Accessテーブル読み取り処理
  • HTMLファイル生成

完成図

実行イメージ

手順1Accessから生産者別売り上げランキングを抽出

 ここでは、生産者別の売り上げランキングデータをHTML形式のファイルに出力します。まずはじめに、Accessの「生産者別売り上げクエリ」からデータを抽出する処理を作成します。

操作1

 このステップ用にフォルダ「STEP4」を作成し、その中にスクリプト「生産者別売り上げHTML生成」を新規に作成します。

操作2

 ツールパレットの[データベース]→[Access]→[テーブル読み取り]をキャンパスにドラッグ&ドロップします。

操作3

 [新規テーブル読み取り処理]の[名前]を「生産者別売り上げ抽出」、接続を「Access2000 接続設定(dss_learning)」、テーブル名を「生産者別売り上げクエリ」にそれぞれ指定します。

確認 「生産者別売り上げ抽出」アイコンがキャンパスに貼り付いていることを確認しましょう。

NOTE

「生産者別売り上げクエリ」は、「生産農家マスタ」と「注文明細」と「野菜マスタ」を結合して作成したクエリです。このクエリでは、生産者ごと、野菜の種類ごとに売上金額がサマリーされています。売り上げ金額の合計が生産者ごと野菜ごとにソートされて抽出されるため、このクエリを抽出することで売り上げランキング表を作成することができます。

手順2抽出したデータをHTMLに変換する処理の作成

 Accessから抽出したデータをHTMLファイルに出力する設定を作成します。この設定は、[HTMLファイル生成]機能を使って作成します。

操作1

 ツールパレットの[ファイル]→[HTML]→[HTMLファイル生成]をキャンパスにドラッグ&ドロップします。

操作2

 [新規HTMLファイル生成処理]画面で処理の[名前][ファイルパス]をそれぞれ指定します。

操作3

 「売り上げHTML生成」アイコンが貼り付きます。
 次に、抽出した売り上げデータをどのようなデザインで表示するかを指定します。「売り上げHTML生成」アイコンをダブルクリックしてください。

操作4

 HTMLビルダー画面が表示されます。HTMLビルダーは、出力するHTMLのデザインを指定するツールです。ここでは抽出したAccessの売り上げデータの表示レイアウトを指定します。はじめにツールパレットの[基本]→[入力データ]→[入力データの追加]を、「テンプレートエリア」にドラッグ&ドロップします。

操作5

 [入力データの追加]画面が表示されます。この画面で、HTML表示したい[入力元]データを抽出しているアイコン名を選択します。ここでは「生産者別売り上げ抽出」を選択します。選択後、[完了]ボタンをクリックします。

操作6

 キャンパスには「$component.生産者別売り上げ抽出」が青字で表示されます。入力元が指定されたので、[入力元]の[入力データ]→[生産者別売り上げ抽出]の[+]をクリックするとAccessから抽出した項目のツリーが現われます。

NOTE

HTMLファイル生成キャンパスにはHTML言語とVelocity言語を記述することができます。ウィザードを使うとVelocity言語とHTML言語が自動的に生成されます。Velocity言語は青字と赤字で表示されます。

操作7

 操作6で指定した入力データのレコード(row)の数分、全件出力する処理を作成します。[入力元]の[入力データ]→[生産者別売り上げ抽出]→[table]→[row]をキャンパスにドラッグ&ドロップすると、2種類の挿入パターンを選択するためのウィザードが表示されるので、全件出力を意味する[繰り返し処理の挿入]を選択します。

操作8

 [繰り返し処理の展開形式の選択]画面が表示されます。この画面では3パターンの挿入形式を選択することができます。ここでは[テーブル形式に展開して挿入]を選択して[完了]ボタンをクリックしてください。

  • 展開せずに挿入 ⇒ データを羅列して出力(レイアウトなしでデータのみ返したいときに使用)
  • テーブル形式に展開して挿入 ⇒ 表形式で出力
  • 単票形式に展開して挿入 ⇒ 1件ずつ伝票形式で出力

操作9

 自動的に貼り付いた先頭行の青い文字「$component.生産者別売り上げ抽出」は不要なので削除します。

確認 以下の内容でHTMLが記述されていることを確認しましょう。

完成したHTML(「$component.生産者別売り上げ抽出」削除後のキャンパス画面)

操作10

 これで「売り上げHTML生成」は完成です。スクリプト[生産者別売り上げHTML生成]に戻ります。

手順3HTMLファイルの出力先を設定

 HTMLファイル生成処理を完成させましょう

操作1

 「Start」→「生産者別売り上げ抽出」→「売り上げHTML生成」→「End」の順にプロセスフローを引き、デバッグ実行してみましょう。

操作2

 実行するとHTMLファイルが作成されます。出力されたファイルを開いてみましょう。

  • ファイル出力先 ⇒ ${dataspider.home}¥server¥data¥dss_learning¥out¥uriage.html

確認 以下のように「生産売り上げ」が表示されていたら成功です。

出力されたHTMLファイルイメージ

2.7.3ちょっぴりレポートをデザイン

 2.7.2で作成したスクリプト「生産者別売り上げHTML生成」を少し変更し、色や罫線をレポートにつけてみましょう。

変更するスクリプト

  • 生産者別売り上げHTML生成

スクリプトの変更点

  • ヘッダをつける
  • 罫線をつける
  • 背景色をつける

完成図

実行イメージ

手順HTMLにデザインを加える

 まず、2.7.2で作成したスクリプト「生産者別売り上げHTML生成」を開きます。

操作1

 「売り上げHTML生成」をダブルクリックしてHTMLビルダーを開きます。

操作2

 HTMLビルダーのVelocity「テンプレートエリア」にレイアウトの指定を追加します。まず以下のように1行目から4行目まで入力しましょう。

操作3

 5行目、6行目、8行目は既存の行に指定を追加変更します。

操作4

 変更後のHTMLは、次のとおりです。
 完成しましたので、デバッグ実行(をクリック)してみてください。

確認 「uriage.html」を開いてみましょう。以下の画面が表示されていたら成功です。

出力されたHTMLファイル

2.7.4Webブラウザから動的にデータを参照

 2.7.2では抽出したデータをHTMLファイルに出力しましたが、ブラウザからスクリプトを実行し、結果をリアルタイムにブラウザで参照するWeb検索システムを作成することもできます。ここではHTMLデータ生成処理とHTTPトリガーを使ってブラウザから動的にデータベースの値を参照する処理を作成してみましょう。

使う機能

  • Accessテーブル読み取り処理
  • HTMLデータ生成
  • 変数代入
  • スクリプト変数
  • HTTPトリガー

完成図

実行イメージ

手順1Accessから生産者別売り上げランキングを抽出

「生産者別売り上げクエリ」からデータを抽出する処理を作ります。ここでは2.7.2(P.196)で作成したスクリプト「生産者別売り上げHTML生成」と共通の処理はコピーして再利用します。

操作1

 新規にスクリプト「生産者別売り上げWeb参照」を作成します。

操作2

 Accessの「生産者別売り上げクエリ」からデータを抽出する処理は、2.7.2「手順1」の「生産者別売り上げ抽出」と同じ指定ですので、アイコンをコピーして利用しましょう。

NOTE

2.7.2を実行されていない方は、2.7.2「手順1」を参照して「生産者別売り上げ抽出」を新規作成してください。

手順2抽出したデータをHTMLデータに変換する処理の作成

「HTMLデータ生成」機能を使ってWebブラウザに返すデータを作成します。手順は「HTMLファイル生成」と同じです。

操作1

 ツールパレットの[ファイル]→[HTML]→[HTMLデータ生成]をキャンパスにドラッグ&ドロップします。

操作2

 HTMLデータ生成処理の[名前]に「売り上げWeb参照用生成」と入力します。

操作3

 スクリプトに「売り上げWeb参照用生成」アイコンが貼り付きますので、「売り上げWeb参照用生成」アイコンをダブルクリックしてHTMLビルダーを表示します。

操作4

 今回出力したいHTMLのデザインは、2.7.3で作成したテンプレートと同じデザインです。そこでHTMLビルダーのVelocity「テンプレート」には、2.7.3で作成したテンプレートをコピー&ペーストしましょう。

「生産者別売り上げHTML生成」スクリプトの「売り上げHTML生成」アイコンのテンプレートの内容をコピー

「生産者別売り上げWeb参照」スクリプトの「売り上げWeb参照用生成」のテンプレートへペースト

完成したHTML

NOTE

2.7.2および2.7.3を実行されていない方は、2.7.2「手順2」および2.7.3「手順」を参照して「生産者別売り上げ抽出」と「生産者別売り上げHTML生成」を新規作成してください。

操作5

 これでHTMLデータ生成処理は完成です。スクリプト[売り上げWeb参照用生成]タブに戻ります。

手順3生成されたHTMLデータをスクリプト出力変数にセット

 生成されたHTMLデータをブラウザに返すために変数に値を代入する指定を作成します。

操作1

 スクリプト「生産者別売り上げWeb参照」を右クリックして[新規作成]-[スクリプト変数]を選択します。HTMLデータ生成処理で作成したデータを代入するための変数です。

操作2

 スクリプト[変数名]に「HTMLOUT」、[変数型]は「文字列型」を指定します。また、変数に代入された値はブラウザ(外部)に出力したいので、[スクリプト出力変数として使用する]をチェックします。

確認 スクリプト変数「HTMLOUT」が作成されたことを確認します。

操作3

 この変数にHTMLデータ生成処理「売り上げWeb参照用生成」で生成されたデータをセットするため、ツールパレットの[基本]→[処理]→[変数代入]をキャンパスにドラッグ&ドロップします。

操作4

 貼り付いた変数代入アイコンをダブルクリックして変数Mapper画面を開きます。[入力元]→[コンポーネント変数]→[売り上げWeb参照用生成]→[html_data]を、[出力先]の「スクリプト変数」→「HTMLOUT」にマッピングします。

操作5

 スクリプトに戻り、「Start」→「生産者別売り上げ抽出」→「売り上げWeb参照用生成」→「variable」→「End」の順に線を引いたら完成です。念のためデバッグ実行してエラーが発生しないか確認しましょう。ここでは結果を変数へセットしているため、実行が成功しても結果データは確認できません。

手順4HTTPトリガーでスクリプトを起動

 最後に、作成した処理をブラウザから呼び出す指定をHTTPトリガーで設定します。

操作1

 HTTPトリガーからスクリプト「生産者別売り上げWeb参照」を実行するために、プロジェクトをサーバに登録します。プロジェクト「dss_learning」を右クリックして[プロジェクトをサーバに登録]を選択します。

 「プロジェクトをサーバに登録しました」というメッセージが表示されたら、正常に登録されています。

操作2

 HTTPトリガーでスクリプト「生産者別売り上げWeb参照」を実行する設定を行ないます。[Studio]メニューから[マイトリガー]を選択して起動します。

操作3

 [マイトリガーのタスク]が表示されますので、[新しいHTTPトリガーを作成する]をクリックします。

操作4

 [HTTPトリガーの設定]画面から[トリガー名]と[実行パス]を設定します。

操作5

 [HTTPトリガーの設定]画面の下部には、[上記設定の説明]が表示されます。ここには、[実行パス]に指定した文字列を含むURLが表示されています。

 このURLにブラウザからアクセスすると、この後に指定するスクリプトが実行されますので、コピーしておくと便利です。URL部分を選択し、[Ctrl]+[E]でコピーできます。[トリガー名]と[実行パス]の設定が完了したら[次へ]ボタンをクリックします。

操作6

 [実行内容の設定]画面が表示されますので、[プロジェクト]に「root@dss-learning」、[スクリプト]に「step4/生産者別売り上げWeb参照」を指定します。

操作7

 [実行内容の設定]画面の下部に表示されている[スクリプト出力]の[値]欄をクリックして[►]の[高度な操作]から[HTML出力]を選択します。この操作で、変数「HTMLOUT」に代入されたHTMLデータが[HTML出力]にセットされます。「HTML出力」にセットされた値は、このHTTPトリガーが呼び出されたタイミングでブラウザ側に返されます。

[値]に「${trigger.outputHtml}」がセットされたら[Enter]キーで確定させて[完了]ボタンをクリックします。

操作8

 [トリガー有効の確認]が表示されたら、[はい]を選択します。

確認 以下のようにトリガーが登録されていることを確認します。

手順5実行結果の確認

 ブラウザから処理を呼び出して、結果が表示されるか確認してみましょう。ブラウザに以下のURLを入力して実行します。

 http://127.0.0.1:7700/dataspider/trigger/uriage

  • DataSpider起動サーバのIPアドレス ⇒ 127.0.0.1
  • DataSpider起動ポート番号 ⇒ 7700
  • URL ⇒ /dataspider/trigger/HTTPトリガーの実行パスで指定した文字

 以下のHTMLがブラウザに返ってきたら成功です。データベースから抽出された結果がきちんと返ってきたことを確認しましょう。

2.7.5Webアプリケーションとの連携1~スクリプトの起動

 WebアプリケーションからDataSpiderのスクリプトを実行したり、Webブラウザから条件値を入力してヒットした結果だけをWebブラウザに返す処理を作成することができます。まずはWebアプリケーションからスクリプトを呼び出して結果をHTMLで返す処理を作成してみましょう。

使う機能

  • Webサーバ
  • HTTPトリガー

実行イメージ

手順1環境設定

 まず最初に、ApacheやIISなどのHTTPリクエスト(POSTメソッド)を発行できるWebアプリケーションサーバを準備します。すでにWebアプリケーションサーバを導入済みの場合は、この手順をとばし、手順2から開始してください。

操作1

 ここではApache HTTPサーバを利用した操作手順を紹介します。はじめに次のサイトからApache HTTPサーバをダウンロードし、インストールしましょう。

※Apache HTTP Server 2.2.4 is the best available versionのWin32 Binary (MSI Installer): apache_2.2.4-win32-x86-no_ssl.msiを指定すると、インストーラ付きでダウンロードできます。

操作2

 Webアプリケーションサーバにサンプルアプリケーション用のドキュメントディレクトリを作成します。

 Apache HTTPサーバ2.2をインストールしたディレクトリにDataSpider用の「dsbook」ディレクトリを作成しましょう。

操作3

 操作2のディレクトリにサンプルデータをコピーします。サンプルデータは、本書付録CD-ROMのdss_learning¥dsbookフォルダに収録されています。このフォルダ内のすべてのファイルを、ドキュメントディレクトリ(dsbook)にコピーします。

  • コピー元 ⇒ 付録CD-ROM¥dss_learning¥dsbook内のすべてのファイル
  • コピー先 ⇒ 操作2で作成したドキュメントディレクトリ直下

操作4

 Webアプリケーションサーバが起動していることを確認します。以下の画面が表示されていれば正しく準備ができています。

http://localhost/dsbook/index.htmlに接続した例

NOTE

表示されない場合はWebアプリケーションサーバが起動しているか、また、正しいドキュメントディレクトリを指定しているかを確認してください。

手順2Webアプリケーションからの実行

 WebアプリケーションからリンクするURLを、DataSpiderのHTTPトリガーの実行パスに変更します。この指定により、WebブラウザからリンクをクリックしたらDataSpiderのスクリプトが実行されて結果がブラウザに戻ります。

操作

 HTMLを編集します。2.7.4(P.215)で作成したHTTPトリガーの実行パスを含むURLを指定します。

  • 編集するHTML ⇒ ¥Apache2.2¥htdocs¥dsbook¥menu.html

 13行目のURLを編集します。

確認 Webブラウザの画面左側のリンク「生産者別売り上げリスト」をクリックします。P.218の実行イメージと同じ結果のレポートが画面右側に表示されたら成功です。

2.7.6Webアプリケーションとの連携2~引数を渡して条件検索

 Webブラウザで入力した値にマッチする結果をブラウザに戻す検索系処理を作成することもできます。ここではWebブラウザから入力した生産者の名前にマッチした売り上げを表示する処理を作成してみましょう。

使う機能

  • Access(検索系SQL実行)
  • HTTPトリガー
  • スクリプト変数

実行イメージ

手順1Webから呼び出すスクリプトの作成

 条件値を受け取ってマッチするデータだけをHTMLで返すスクリプトを作成します。条件となる値はWebブラウザから受け取るため、スクリプト入力変数を作ります。

操作1

 スクリプト「/STEP4/生産者別売り上げWeb参照」をコピー&ペーストして「/STEP4/生産者に条件指定」にリネームしてください。

  • コピー元スクリプト ⇒ /STEP4/生産者別売り上げWeb参照
  • コピー先スクリプト ⇒ /STEP4/生産者に条件指定

操作2

 作成したスクリプト「生産者に条件指定」に文字列型の変数「COND」を作成します。変数「COND」は、初期値に「佐藤 一郎」と指定します(「佐藤」と「一郎」の間には半角スペースを入力してください)。Webブラウザより値を取得するので、[スクリプト入力変数として利用]にチェックを入れます。

操作3

 スクリプトを開いてAccessから全件データを抽出する指定を行なっている「生産者別売り上げ抽出」アイコンを削除します。

操作4

 条件にマッチするデータをSQLで抽出するため、ツールパレットの[データベース]→[Access]→[検索系SQL実行]アイコンをキャンパスにドラッグ&ドロップします。

操作5

 スクリプト変数「COND」に該当するデータを抽出するSQL文を作成します。SQL文の設定は、SQLウィザードを使うと便利です。また、抽出した項目を設定するため、[SQL文を実行してスキーマを設定]をクリックします。この設定を忘れると次の操作6の入力元に項目が出力されないので注意しましょう。

操作6

 Accessアイコンの名称が変更になったため、「売り上げHTML生成」アイコンの入力データの名称を「生産者条件指定」に変更しましょう。

  • 変更前 ⇒ 生産者別売り上げ抽出
  • 変更後 ⇒ 生産者条件指定

操作7

 デザイナ画面に戻り、「生産者条件指定」から「売り上げWeb参照用生成」へプロセスフローを引きます。

操作8

 いったん処理が正しく実行されることを確認したら、プロジェクトをサーバに登録します。

手順2HTTPトリガーの設定

 スクリプトをHTTPトリガーに設定します。

操作1

 HTTPトリガーを新規に登録します。

操作2

 [プロジェクト名][スクリプト名][スクリプト出力変数]を指定します。

手順3条件検索Webアプリケーションの作成

 Webアプリケーションからの呼び出し処理を作成します。

操作

 HTTPトリガーの呼び出しと変数の受け渡しを作成します。HTMLを編集します。

  • 編集するHTML ⇒ ¥Apache2.2¥htdocs¥dsbook¥menu.html

 次のように、16行目のURLと、22行目と27行目の「name=」で指定された値が変数名CONDと一致していることを確認しましょう。
 DataSpiderではHTMLのNAME属性の名称とDataSpiderのスクリプト変数の名称を一致させることにより、値の受け渡しを行なうことができます。

確認 Webブラウザから[検索]ボタンをクリックして画面右側に指定した担当者にヒットした結果が表示されることを確認します。指定した生産者名に一致するデータが返っていたら成功です。

▲ページの先頭へ戻る