産技研におけるオープンシステム利用戦略
－産技研が語るシステム開発の苦労話－
第２回目 Ｗｅｂアプリケーションによる
業務システムの構築

情報電子部 制御情報系 情報通信分野

石島 悌（いしじま だい）

http://tri-osaka.jp/group/infoele/infocont/info/ishijima/

2004-12-10 @ 研修室４

本日の概要

オープンソースについて

定義、産技研における利用実態

ウェブアプリケーションについて

構成と要素技術

データベース、各種プログラム（スクリプト）

産技研の業務システムについて

システム概略

使われているプログラム（抜粋）

システムのデモ

オープンソースについて

オープンソースにおけるプレイヤー

利用者、配布者、開発者

三者のバランスをとったもの

自由に使いたい

制限なく配布したい

広く使って欲しい・自由に改変したい・ 完全性を保持したい

Open Source Initiativeによる Open Source Definition

ＯＳＤによる定義

定義の概要（The Open Source Definition）

http://opensource.jp/osd/osd-japanese.html

自由な再頒布

ソースコードによる頒布

派生の許可

作者によるソースコードの完全性を認める

個人やグループによる制限の禁止

利用分野による制限の禁止

再配布時における新たなライセンス追加の禁止

特定製品でのみ有効なライセンスの禁止

他のソフトウェアを制限するライセンスの禁止

特定のインターフェイスに依存するライセンスの禁止

産技研における利用

オープンソースやフリーウェアの活用なしに
現在の産技研のシステムは成立しえなかった

1996年にネットワーク導入

ワークステーション・ＰＣ、基本的に商用ベース

足りない部分をオープンソースなどで補う

1998年ごろからインターネット関連に
オープンソース・フリーウェアを本格利用

サーバのパソコン化、Linuxや*BSDの利用

bind, sendmail, qmail, Postfix, Apache, PostgreSQL...

2004年６月：業務システムにオープンソース

業務システムへの導入背景

オープンソースやフリーウェアの 安定性・信頼性

2000年ごろから、データベースやウェブアプリケーションに関する共同研究を行ってきた

PostgreSQL 6.5.3, PHP3など

「多言語同時処理によるアジア系言語の自然言語翻訳に関する基礎研究」

文部科学省科学研究費補助金（科研費）

基盤研究（Ｂ）課題番号14310220

オープンソースなら安心？

商用ソフトとオープンソースの上手な使い分けが重要

商用ソフトなら安心か？

必ずしもそうではない

サポートが役に立たないことも

囲い込みや束縛（ベンダーロックイン）

オープンソースなら安心か？

やはり、必ずしもそうではない

責任の所在

自分でなんとかできる（あるいは誰かが助けてくれる）状況なら

困ったことは産技研へご相談ください

ウェブアプリケーションとは

Webのしくみを利用し、イントラネット／インターネット上で提供されるアプリケーション・サービス

クライアント・サーバシステムにおいて、インターフェイスをHTML・HTTPに準拠させている

クライアント側に特別なソフト不要

クライアントへの依存度を下げることができる（うまく作ればクライアント環境に非依存）

オンラインショッピングやグループウェアなどさまざまなシステムが実際に広く使われている

ウェブアプリの構成要素

クライアント（ウェブブラウザ）

サーバ

ウェブサーバ

ロジック記述（CGIやスクリプト）

データベース

ウェブ

サーバ

・

ロジック

データ

ベース

ブラウザ

ユーザインターフェイス

画面表示・データ入力

表示データ生成

データ加工

データ保存

検索

HTTP

SQL

ウェブページいろいろ

静的なウェブページ

いつ見ても同じ内容が表示されているページ

動的なウェブページ

サーバ側で

SSI

CGI

JavaやPHP（サーバサイド・スクリプト）

クライアント側で（クライアントサイド・スクリプト）

JavaScript

JavaApplet

例：検索サイト、オンラインショッピング、など

静的なページのイメージ

動作概念図

ウェブ

サーバ

ブラウザ

HTTPプロトコル

<HTML>

<BODY>

いらっしゃいませ

</BODY>

</HTML>

HTMLドキュメント

いらっしゃいませ

画面表示

サーバ側で動的にページ生成

SSI (Server Side Include)

HTMLにコメントとして簡単なロジックを埋め込む

例：<!--#echo var=”LAST_MODIFIED” -->

ページの最終更新日表示など簡便な処理向き

CGI (Common Gateway Interface)

元々はWebサーバから、外部プログラムを呼び出す仕組みのこと

Perlなどで記述されたページなどを生成する仕組み

アクセスカウンタ、簡単な掲示板など

産技研インターネット技術相談

動的なページのイメージ（１）

SSIの動作概念図

ウェブ

サーバ

ブラウザ

<HTML>

<BODY>

最終更新日は

<!--#echo var=”LAST_MODIFIED” -->

です。

</BODY>

</HTML>

最終更新日は、

2004-12-10です。

処理は

サーバ

で行う

動的なページのイメージ（２）

CGIの動作概念図

ウェブ

サーバ

ブラウザ

検索結果は以下の

とおりです。

CGIプログラム

プロセス生成

処理結果

プログラムが動的に

ページを生成

サーバ側で動的にページ生成（２）

サーバサイド・スクリプト

PHPやMicrosoftのASP (Active Server Pages)

スクリプトの実行をウェブサーバ内で行う （CGIはウェブサーバとは別プロセス）

スクリプト起動時の処理が軽い

サーバプロセス自体は大きくなる

動的なページのイメージ（３）

サーバサイド・スクリプトの動作概念図

ブラウザ

実行結果は以下の

とおりです。

ウェブサーバ

スクリプト

実行部

HTML処理部

スクリプトを解釈して

動的にページを生成

クライアント側で動的ページ

JavaScript

Javaとは違う

HTMLにスクリプト（ちょっとしたプログラム）を記述

<SCRIPT LANGUAGE=”JavaScript”> ～ </SCRIPT>

「ボタンを押した」、「入力フォームにフォーカスがあたった」といったイベントに応じた処理を記述できる

ブラウザ側で処理が行われる

プログラミングとブラウザの機能を統合している

フォームを使ってサーバと連携することもできる

ブラウザ間の互換性が低い

動的なページのイメージ（４）

JavaScriptの動作概念図

ウェブ

サーバ

JavaScript対応

ブラウザ

<HTML>

<HEAD>

<SCRIPT Language=”JavaScript”>

処理手順

</SCRIPT>

</HEAD>

<BODY>

本文

</BODY>

</HTML>

本文と処理結果

が表示される

ブラウザが

スクリプトを

解釈して

処理を行う

フォームとJavaScript

フォーム

ブラウザからWebサーバに、ユーザが入力したデータを送るためのHTMLタグ

文字列入力欄、ラジオボタン、送信ボタン、など

フォームの状態は、JavaScriptの変数として
アクセスできる

サーバにデータを送信する前の事前チェック

ユーザの動作（イベント）を検知して、
処理を行うことができる

例：「検索ボタン」を押すと、検索ウィンドウが
ポップアップする

ウィンドウ・フレームとJavaScript

JavaScriptを使うと、サブウィンドウや
確認ダイアログなどを表示できる

別ウィンドウや別フレームに書かれた
フォームのデータを参照できる

隠しフレームを使って一時的にデータを保存

ウィンドウ呼び出し時にサーバに
アクセスできるので、
サーバ側（データベース）とも連携できる

試験・機器管理システムでは

産技研情報システムのうち、
依頼試験・開放機器管理では

クライアントはIEと所内携帯電話（PHS）

サーバには一応サーバ向けPC

Xeon, SCSI RAID-1, UPS,...

サーバOSにはFreeBSD 4.x

ウェブサーバはApache (1.3.x)

ロジック記述（サーバサイドスクリプト）には PHP (4.3.x)

データベースにはPostgreSQL (7.2.x)

ＯＳとウェブサーバ

OS: FreeBSD

Linuxとともに広く使われているPC-UNIX

特にサーバ向けでよく使われる

Yahoo! 、某大手プロバイダのレンタルサーバ

実はOSはUNIX系ならなんでもよかった

ウェブサーバ: Apache

インターネットで広く使われているウェブサーバ

シェアNo.1らしい

スクリプト（ロジック記述）

プログラミングはPHP

PHP: HyperText Processor

スクリプトである（コンパイル不要）－ お手軽

Ｃ言語に似た文法、Perlに似た機能

if, for, while,...

豊富な関数, 正規表現,..

Apacheの組み込みモジュールとして動作する

各種データベースとの連携ができる

HTMLへの埋め込み型言語

<?php ～ ?> の間にプログラムを記述

埋め込み型言語

プログラムをHTMLの中に記述できる

プログラムの中にHTMLを書くPerlなどと対照的

クライアントに表示するイメージを考えながらプログラムを作成できる

<HTML>

<BODY>

変数$iの値は

<?php print($i); ?>

です。

</BODY>

</HTML>

#! /usr/bin/perl

print(“<HTML>\n<BODY>\n”);

print('変数$iの');

printf(“値は%sです\n”, $i);

print(“</BODY>\n</HTML>\n”);

PHP

Perl

データベース連携

PHPで利用できるデータベース

オープンソース系RDBMS

PostgreSQL

MySQL

その他

商用RDBMS

Oracle

MS SQL

IBM DB2

その他

PostgreSQLの特徴

「ぽすぐれ」、「ぽすとぐれす」、
「ぽすとぐれすきゅーえる」と読む

もちろんオープンソース

UNIX系OSで動作する本格的データベース

早くから日本語対応

国際化対応（多言語対応）

C, Perl, PHP, Java, Rubyなどの
プログラミングインターフェイスを装備

ODBCドライバ経由でMS Accessを
フロントエンドにできる

データベースの使いこなし？

あまり凝ったことはしていない

ごくごく基本的なSQLしか知らないから

SELECTで情報を検索してくる

INSERTで情報を登録する

UPDATEで情報を更新する

DELETEで情報を削除する

要素技術の使い分け

永続的なデータの保管はデータベース (PostgreSQL)

データベースと直接連携した処理の記述は
サーバサイド・スクリプト (PHP)

クライアント（ブラウザ）側で完結する処理や
使い勝手向上の細かな処理はクライアントサイド・スクリプト (JavaScript)

一時的なデータの保管はJavaScript

産技研の業務システム

来所受付・顧客管理

研究計画・発表伺い

職員録

依頼試験・開放機器管理

歳入・歳出管理

危険物・薬品管理

産技研の業務システムを例に

依頼試験・開放機器管理と歳入管理をベースにシステムの内部を説明

業務の流れ

依頼試験や開放機器使用の予約

どのお客様が、何を、いつ、どれぐらい

担当職員は誰か

帳票の発行

予約情報に基づいて入金処理

会計処理、帳票発行

実際に使っていただく

試験報告書などの処理

１．試験や機器の予約

予約情報入力の流れ

使用者の認証

入力画面表示

利用者情報入力

利用者

検索

検索

確定

試験･機器

検索

検索

確定

利用者番号

番号や氏名の一部など

番号や名称の一部など

番号、名称、単価

入力完了

料金計算

利用日・件数

試験・機器

テーブル

利用者

テーブル

試験・機器

情報入力

予約入力メイン

（PHP）

料金計算

（JavaScript）

き

試験・機器検索（PHP）

利用者検索

（PHP）

次のページへ

１．試験や機器の予約（続き）

情報登録処理の流れ

入力情報検証

登録画面表示

利用情報登録

入力完了

整理番号

シーケンス

利用状況

テーブル

料金情報登録

情報登録メイン

（PHP）

き

誰が、いつ、どれを

整理番号発行

歳入執行

テーブル

帳票表示

２．入金処理

会計に関する部分は、実は外注

帳票出力に関する部分も外注

誤りの許されない部分を研究員が作るのは
リスクが大きすぎる（おおげさ）

きちんとしたソフトメーカーに入念に
テストしてもらうため

システム自体はPostgreSQL+PHP+JavaScript

３．実際に使っていただく

利用料金は前納です

「大阪府立産業開発研究所及び大阪府立産業技術総合研究所条例」第４条

料金は、依頼試験、施設・設備使用を行う前に支払っていただく

詳しくは産技研総務課のページを

http://www.tri.pref.osaka.jp/group/soumu/siharai.htm

お支払いが済んだら、 依頼試験や開放機器の利用を

４．試験報告書などの処理

試験報告書作成手順

使用者の認証

報告書雛型画面

検索条件入力

ダウンロード

利用状況

テーブル

差込情報作成

報告書雛型作成

（PHP）

き

誰が、いつ、どれを

利用情報検索

CSV

ファイル

ワープロで

差込編集

PHPスクリプトの全体構造

スクリプトの構造は、どれも似た形式にした

<HTML>

<HEAD>

<TITLE>ページタイトル</TITLE>

<?php

// PHPを使ったDBアクセスなど

?>

// 外注スクリプト、共通スクリプトの指定

<SCRIPT LANGUAGE=”JavaScript” SRC=”xxx.js”></SCRIPT>

<SCRIPT LANGUAGE=”JavaScript”>

// イベント定義

</SCRIPT>

</HEAD>

<BODY>

フォーム記述、PHPも併用

</BODY>

<SCRIPT LANGUAGE=”JavaScript”>

// ページ初期化処理

</SCRIPT>

</HTML>

入力画面例

実際のスクリプト例

開放機器予約の機器情報入力

<TR WIDTH="100%">

<TD COLSPAN="2" ALIGN="CENTER" BGCOLOR="#80fff0">

依頼試験機器情報

<INPUT TYPE="hidden" NAME="kiki_search_mode"

VALUE="<?php print($kiki_search_mode); ?>">

</TD>

</TR>

実際のスクリプトの例（続き）

<TR>

<TD ALIGN="RIGHT" NOWRAP BGCOLOR="#80fff0">

機器番号

</TD>

<TD ALIGN="LEFT" WIDTH="100%" BGCOLOR="#ffffff">

<INPUT TYPE="button" VALUE="検索"

onClick="search_kiki_by_no(this.form);">

<INPUT TYPE="TEXT" NAME="kiki_no" SIZE="8" MAXLENGTH="6"

VALUE="<?php printf("%s", $kiki_no); ?>"

STYLE="ime-mode: 'inactive';"

onFocus="next_focus('kiki_nm');"

onChange="next_focus('button_start_date');

search_kiki_by_no(this.form);"

>

<!-- Zenkaku SP --> &nbsp; <!-- Zenkaku SP -->

<INPUT TYPE="BUTTON" VALUE="管理機器一覧"

onClick="search_kiki_by_kanri(this.form);"

>

<!-- Zenkaku SP --> &nbsp; <!-- Zenkaku SP -->

<INPUT TYPE="BUTTON" VALUE="機器情報クリア"

onClick="clear_kiki(this.form);"

>

</TD>

</TR>

検索画面を呼び出すJavaScript

フォームから呼び出されるスクリプト

// 機器検索（主要部）

function search_kiki(f) {

var search_page = "search_kiki.php";

var search_url = search_page

+ '?onclose=close_search_kiki'

+ '&mode=' + f.kiki_search_mode.value

+ '&kiki_no=' + f.kiki_no.value

+ '&kiki_nm=' + escape(f.kiki_nm.value)

+ '&shokuin_no=' + f.shokuin_no.value;

var newwin = window.open(search_url, "search_kiki_no",

winstyle());

newwin.focus();

}

function search_kiki_by_no(f) {

f.kiki_search_mode.value = 'kiki_no';

search_kiki(f);

}

function search_kiki_by_nm(f) {

f.kiki_search_mode.value = 'kiki_nm';

search_kiki(f);

}

検索画面のPHP

元画面から呼び出される検索画面のスクリプト

<HTML>

<HEAD>

<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=EUC-JP">

<TITLE>依頼試験機器（開放設備機器）の検索</TITLE>

<?php

//中略

if (strlen($kiki_no) > 0) { // デフォルトは番号で

$kiki_number = strtoupper($kiki_no);

$sql = "select * from tm_iraishikenkikijoho "

. "where kiki_no ~ '$kiki_number' "

. "order by kiki_no "

. ";";

}

if (($mode == 'kiki_nm') && (strlen($kiki_nm) > 0)) {

// 機器名称モードなら名称で検索

$sql = "select * from tm_iraishikenkikijoho "

. "where ( kikikanji_nm ~ '$kiki_nm' ) or "

. " ( kikikana_nm ~ '$kiki_kana' ) "

. "order by kikikana_nm "

. ";";

}

試験・機器管理のポイント

日々使われるシステムである

対外的なシステムである

外注部分との協調運用

データベースのテーブル

外注部分の呼び出し

帳票出力（PHP）、料金計算（JavaScript）

顧客管理・職員録との連動

テーブルのインポート

SOAPによる問い合わせ

作成したプログラム

ここまでに説明したパーツなどを組み合わせてプログラムを作成

６サブシステム

開放機器（依頼試験機器）予約システム

依頼試験登録システム

施設予約システム

共同利用機器予約システム

技術研修生登録システム

情報検索登録システム

所内携帯電話もクライアントに

ブラウザ内蔵のPHSからもアクセス可

どこでも仕事を…

現在はシステムの一部のみ

クライアントで

凝ったことはできない

外注したシステムについて

歳入管理システム

帳票出力

試験・機器管理の情報から受付票などを出力

歳入執行

試験・機器利用の料金を精算する

歳出予算管理システム

書籍管理システム

データ移行ツール

旧情報システム（Oracle）のデータをPostgreSQLへ

帳票出力

試験・機器の利用情報を紙に出力する

<TABLE>タグを駆使したHTML

PDFではない

デザインにはオーサリングツール（GoLive）？

帳票は「ビジュアル」が大切

レイアウト作成後に、必要な情報をPHPで埋め込む

試験・機器管理システムからは、受付番号をキーにして呼び出す

帳票の例

プログラムの量

ファイルの数

依頼試験・開放機器関連でおよそ250

外注部分でおよそ200

容量

依頼試験・開放機器関連でおよそ1.7Mバイト

外注部分でおよそ1.8Mバイト

動かしてからは

2004年６月に運用開始

大きなトラブルは発生していない

小さなトラブルはあった

プログラムのミス、想定外の操作

おおむね好評…？

修正のリクエストは多かった

操作性向上に関するリクエスト

プログラム作成者の知らない事象

外注部分に関する修正要請

どうしてうまく動いたか

システムやユーザの規模が大きすぎない

旧システムの存在

好評（？）なのは、前よりは使いやすいから

ユーザがオンライン処理に慣れている

資産活用

データベース構造

基本的デザイン

開発者もユーザだから

システム化すべき内容をある程度知っている

システム稼動後のサーバ運用

基本的には放置

システム管理の自動化

データベースのバックアップ

１日に３回

ファイルシステムのバックアップ

その他自動化できる部分は自動化

これまでのサーバ運用での経験

プログラムの修正・追加は随時

これからの課題

現在のシステムは、まだ未完成

年度途中からの日々の運用のみ

年度末処理

プログラムの整理と改良

作成時期によって使っているワザが違う

後になるほど洗練されてくる

プログラムの公開に向けた作業

所内ネットワークの整備に連動

IPv6化

研究テーマのネタ

本日のまとめ

ウェブアプリ構築に必要な要素技術を紹介した

動的なページ作成

サーバサイド、クライアントサイド・スクリプト

データベース

産技研情報システムでの構築例を紹介した

試験・機器管理の流れ

画面と帳票

スクリプトの実例

不明な点などあれば、ご相談ください

時間があればシステムのデモを

ノートパソコン１台でシステムが動く

Windows XP

クライアント環境

FreeBSD on Virtual PC

サーバ環境

実はサーバに要求されるスペックはさほど高くない

参考文献

石井達夫：改訂３版 PC UNIXユーザのためのPostgreSQL完全攻略ガイド，（技術評論社，2001），ISBN4-7741-1226-7．（シーラカンス）

堀田倫英，石井達夫，廣川類：PHP4徹底攻略 改訂版，（ソフトバンク，2002），ISBN4-7973-2097-4.（マンモス）

David Flangan 著，安藤進 訳：JavaScriptプログラミング，（オライリー，1997），ISBN4-900900-36-2. （ジャワサイ）

参考文献（その２）

杜甫々：とほほのWWW入門，http://www2e.biglobe.ne.jp/~s-hasei/www.htm, http://tohoho.wakusei.ne.jp/www.htm

宮坂雅輝：JavaScript Handbook 3rd edition，（ソフトバンク，2001），ISBN4-7973-1819-8.

朝井淳：SQLポケットリファレンス，（技術評論社，1999），ISBN4-7741-0907-X.

研太郎 産技

2004-12-06T15:54:54

研太郎 産技