2014 年度 卒業論文 WEB による NOAA 気象衛星観測画像公開システムの構築 指導教員村中崇信准教授 中京大学情報理工学部情報システム工学科 学籍番号 H 氏名渡邉翔太 (2015 年 1 月 )

2014 年度

卒 業 論 文

WEB による NOAA 気象衛星観測画像公開システムの構築

指導教員 村中崇信

准教授

中京大学 情報理工学部

情報システム工学科

学籍番号 H111127

氏 名 渡邉翔太

（

2015 年 1 月）

卒

業 論 文 要 旨

題 目

WEB による NOAA 気象衛星観測画像公開システムの構築

学籍番号 H111127 氏名 渡邉翔太 指導教員 村中崇信 准教授 本研究室では、低軌道衛星との通信設備の構築を行い、将来的には超小型低軌道衛星と の交信を目指している。現段階では、NOAA 気象衛星との交信とその自動化を進めており、 将来継続的に、膨大な量が蓄積されることが予想される。よって、本開発では、研究室で 取得した気象画像をデータベースとして構築し、WEB により外部に公開するシステムを目的 とし、開発を行った。 そのために、システムに求められた仕様は、「画像データの検索が行える」「自動的にデ ータが増え続けることに耐えられる」「検索、閲覧時の利便性」「WEB 上で公開できる」こと であった。これを達成するために、CGI プログラムを Perl でプログラミングし、ユーザー の入力した、「日付」「受信した衛星名」のデータに一致する画像を検索し、表示するシス テムを WEB サーバー上に実装した。また、気象画像に関するメタデータとして Exif を利用 した。CGI で Exif データの閲覧等ができるように、モジュールである「Exif::tool」を導 入、利用した。その画像の詳細データ、「衛星が通過した際の最高高度」「受信周波数」「画 像を撮ったセンサー名」などを閲覧できるようにした。また、これの CGI プログラムを動 作させるために、WEB サーバーソフトウェアである「Apache」を OS X Server で実行できる ように設定を行った。

1

目次

1.序章 ... 2 1-1.研究の背景と目的 ... 2 2.開発するシステム ... 3 2-1.システムの仕様要件 ... 3 2-2.開発環境 ... 3 2-2-1.CGI について... 5 2-2-2.Perl について ... 5 3.開発の手法 ... 6 3-1.Database-WXtoImg について ... 6 3-2.CGI の開発 ... 8 3-2-1.フォームデータの取得 ... 8 3-2-2.画像の検索と表示 ... 9 3-3.User Interface ...10 3-3-1.検索設定画面 ...10 3-3-2.画像検索結果画面 ... 11 3-4.Data と Database ...13 3-4-1.Exif::Tool ...13 3-4-2.Apache、OSX server の設定 ...14 4.まとめ ...17 5.謝辞 ...18 6.引用・参考文献 ...19 7.付録(マニュアル、ドキュメント) ...20

2

1.序章

1-1.研究の背景と目的

本研究室では、低軌道衛星との通信設備の構築を行っている。将来的には、超小型低 軌 道衛星 との 交信を 目標に してお り 、 現段階 では NOAA(National Oceanic and Atmospheric Administration)[1]が運用している気象衛星と交信し、観測画像を受信す るシステムの構築を行っている。NOAA 気象衛星からは、衛星によって観測された地 表面の画像を信号で取得することができ、それらの信号は「WXtoImg」[4]と呼ばれる ソフトフェアで復号され、ローカルPC 上に保存することができる。将来、これによる 画像データが継続的に蓄積されることが予想されている。保存されるデータは、画像フ ァイルは約3MB が 1 日に 8 枚。画像に変換する前の衛星から送られた音声データが１ ファイル約15MB が同じく 1 日に 8 ファイル保存されるため、約 25GB/年の速度でデ ータが蓄積される。そのため、これらの画像データのデータベース化とその公開方法の 検討が必要になる。 先行例を挙げると、東京大学生産研究所では、NOAA 気象衛星を含む複数の衛星と、 日本を含む世界の複数の受信局で交信し、取得した画像データをWEB アーカイブとし て公開している[2]。また神奈川県水産技術センターでは、同じく NOAA 気象衛星から 受信した「カラー水温分布図」と「白黒等水温線図」が閲覧できるシステムを公開して いる[3]。 このように、画像データのアーカイブ化にWEB を用いることは、検索条件の設定や データの表示の仕方など、WEB 上で動作するユーザーインターフェースの選択肢や発 展性が見込め、また、インターネット環境によって外部からの利用が簡便となるメリッ トがある。 以 上 か ら 、 研 究 室 で は 、 取 得 し た NOAA 気象衛星の観測画像アーカイ ブを WEB により公開するシステム の開発を行う。 図 1.本研究室で NOAA より受信した画像

3

2.開発するシステム

2-1.システムの仕様要件 背景で述べたように、本研究室では取得したNOAA 気象衛星の観測画像アーカイブを WEB により公開するシステムを開発することを目的とする。 システムを作るにあたって、目標とする仕様要件を以下に記す。 1. ファイル検索が可能であること データの取得した日時、取得した衛星を条件にして検索を行えるようにす る。 2. 自動的にデータが増え続けることに耐えられる WXtoImg を常時稼働させ、自動的に追加される衛星の画像をシステムに 自動的に反映させる。 3. 全体的な利便性の考慮 特性上だれでも利用できることを考え、分かりやすい UI を採用する。ス タイルシートの活用なども考える。 4. WEB 上で公開できる。 セキュリティやシステムの運用のり弁背を考え、Web サーバーの構築を行 う。 とする。 2-2.開発環境 上記の仕様を満たすために、CGI(後述)を利用して WEB ページを開発することとし た。CGI を記述するために、プログラミング言語 Perl[5]を用いた。主な開発は WindowsOS のノートパソコンを利用するため、Perl を windows 環境下で動作させる ための環境、Active Perl[7]を用意した。また CGI を動作させるために WEB サーバー ソフトウェア、Apache HTTP Server[6]を用いた。

開発PC Lenovo G570 [OS:windows7 64bit] Perl インタプリタ Active Perl

プログラミングエディタ Terapad 受信信号デコードソフト WXtoImg 運用サーバー機 Mac OS X Server Web サーバーソフトウェ ア Apache HTTP Server ブラウザ Google Chrome

4

以下にシステムの概観図を示す。

5 2-2-1.CGI について

CGI(Common Gateway Interface)とはブラウザなどからの要求に応じてプログラム を実行する仕組みである。この仕組みを通して、実行されるプログラム本体は CGI プ ログラムと呼ばれる。クライアントがブラウザで CGI にアクセスすると、サーバーが プログラムを実行し、表示用データが作成される。この時、クライアント側からデータ を送ることで、それを反映した表示用データを作成することもできる。通常、WEB サ ーバーは蓄積された文書を静的に送出するだけだが、CGI を利用することで動的にデ ータを生成、送出することが可能になる。 この仕組みを利用し、当システムでは「ブラウザ上でユーザーが入力した条件に一致 するデータ検索を行い、当てはまる画像をHTML で表示する CGI プログラム」を開発 する。 2-2-2.Perl について 当システムでは、CGI プログラムの作成を、Perl を用いて行った。 Perl は、ラリー・ウォール氏によって開発されたプログラミング言語であり、ウェブ・ アプリケーション、システム管理、テキスト処理などのプログラムを書くのに広く用い られている。また、Perl はランタイムコンパイル方式を採用しており、プログラム実 行時に自動的にコンパイルが行われる仕組みになっている。

Perl は、Linux、Apache、MySQL と並んで「LAMP」と呼ばれるように、動的な WEB コンテンツを含むウェブサイトの構築に適した、オープンソースのコンポーネン トとして標準的な言語の一つである。Perl 以外には、PHP、Python、ruby などの言語 があるが、今回はほとんどの Linux 系環境のデフォルトで動作することが期待できる Perl を利用することにした。 また、Perl には、有志が開発したサブルーチンを誰でも利用できるようにした、モ ジュールと呼ばれるシステムがある。たとえば、他のプログラムやネットワークとの通 信、各種ファイル形式の取り扱い、数学的な計算などを行えるなど、数多くのモジュー ルが存在する。インターネットに接続しているならば、CPAN と言うモジュールを体系 的に管理するシステムにアクセスして、モジュールをダウンロード利用することが可能 である。 今回は、開発時の利便性等の理由により、Perl のプログラミングに Windows7 のノー トパソコンを使用した。Perl は Windows 環境で動作しないので、ActiveState 社が提 供しているディストリビューション「ActivePerl」(Windows 版)を利用する。Windows 版ActivePerl は Windows で Perl を利用できるようにする PerlScript が同梱されてい る。これを導入することでWindows 環境でも Perl を動作させることができるようにな る。

6

3.開発の手法

開発にあたって、WEB アプリケーション開発の原則に基づいて、以下の四点について 重点して開発する。 ・Database Database は公開する画像のデータベースになる。画像検索に利用する為、保存時にフ ラグになるものをつける作業を行う。

・Common Gateway Interface

CGI は、公開、検索システムの基幹となるプログラムである。 ・User Interface

UI は検索システムの利用者のためのインターフェースとなる。見やすさ、使いやすさ を考慮してデザインする。

・Webserver の構築(OSX)

OSX server を通して Apache HTTP server を管理する。

3-1.Database-WXtoImg について アーカイブ化する衛星観測画像は、WXtoImg と言うソフトウェアによって作成され保 存される。 WXtoImg は、無線受信機からの音声信号を画像に復号する機能を備えており、更にそ の画像をPC 上に png、jpg ファイルとして保存することが可能になっている。 図 3 WXtoImg の Filenames 設定画面 WXtoImg は、画像を保存する時のファイル名の形式を設定することができる。

7 図3 の赤線部、Filename Template を書き換えることで、「受信時の現地時間」「飛行 方向」「最高仰角」「衛星名」などをファイル名にするように設定することができる。 File Template で出力できる内容を以下の表１に記す。 表1 WXtoImg のファイル名設定で利用できる変数と数値 変数 内容 変数 内容 %@(Local Time Zone) 現地時間 %r 送 信 周 波 数 %s 小文字衛星 %k 年月日 %N 大・小文字衛星 %K 日月年 %g 小文字種類名 %L 月日年 %D 飛行方向 %d 日 %p 略飛行方向 %m 月 (01-12) %E 最大仰角 %y 2 桁 年 (14) %^ 方角 %Y 4 桁 年 (2014) %z 略方角 %T 月日時分 %f Audio 名 %t 時分 %F atp,wefax %H 24 時 間 制 %C WEFAX はスペクトル バンド名。APT はチャン ネル名 %P AM/PM %e 増強処理 %M 分 %l セクター名(WEFAX の み) %Z 時刻帯 %n シーケンス番号 %% % %8,9,10,11% 第 9、第 10、第 11、第 12 番目の WEFAX ディ ジタル・ヘッダ名 図３のように、「%k-%N-%E」とすることで、「受信時の日本の現地時間-衛星名-最大 仰角.jpg」と言った形でファイル名が付けられるようになる。 ここでファイル名に「衛星名」と「受信した日付」を入力しておくことで、後述の検索 時のフラグとして利用することができる。

8 3-2.CGI の開発 CGI プログラム全体の動作フローチャート 図を右に示す。まず、ユーザーは検索条件を入 力するWEB ページで、「画像を取得した日付」 「画像を受信した衛星名」検索条件を入力し、 検索を実行する。同時にCGI が起動し、プロ グラムが実行される。「入力されたデータの取 得、整理」、「画像データの検索、表示」につい ては後述する。 3-2-1.フォームデータの取得 ユーザーが検索画面で検索ボタンを押すこ とで、ブラウザがCGI にアクセスし、プログ ラムが実行される。 画像検索画面でユーザーの入力したデータ は「&」で接続されて WEB サーバーへ送信さ れる。例えば、「日付(date)」を「20140123」 とし、「受信した衛星名(number)」を「18」と 入力するとWEB サーバーに送信されるデー タは「date=20140123&number=18」と言う 一列のデータ形式となる。その為、「&」でデ ータを分割し、それぞれの変数に格納する作業 を行う必要がある。 図 4 CGI プログラム全体のフロー チャート

9 3-2-2.画像の検索と表示 上記の処理を終え、整理した形で検索条件を取得した後、観測画像データの保存されて いるフォルダ内のファイル名を取得する。これを@img の配列変数へ格納する。 次に、検索条件とファイル名が一致するかどうかを判定し、一致するのならばHTML で出力、一致しないのであれば何もしない、という判定を、すべてのファイルに行うま で続ける。これは、フォーム入力時に、「日付」と「受信衛星名」どちらかが欠けてい た場合、条件分けを行って実行している。 図 5 CGI プログラムの検索アルゴリズムのフローチャート

10 3-3.User Interface UI は、主に検索設定画面、検索結果画面の二点に注目して開発を行う。どちらもと もに直感的に利便性のあるUI を考慮して開発する必要がある。 3-3-1.検索設定画面 検索設定画面は、ユーザーが求める画像の条件を設定する画面である。 検索条件として、「受信した日付」と「受信した衛星名」の２つの要素を用意した。最 初期は、両要素ともキーボードでテキストを直接入力するタイプの入力フォームを用意 していた。ただこれでは利便性に欠けると考え、のちに「プルダウンボックス方式」と 呼ばれる、ユーザーが日付、衛星名ともにマウスカーソルで選択するタイプのフォーム を用意した。 図 6 検索条件設定画面 プルダウンボックス方式フォーム

11 3-3-2.画像検索結果画面 画像検索結果画面は、ユーザーが入力した画像検索条件を元に、CGI プログラムが 検索を実施した結果を表示する画面である。 検索結果一覧の画面では、WXtoImg が用意したサムネイル画像を図 7 のように一覧 で表示している。画像の並びはHTML のスタイルシートを利用している。 サムネイル画像をクリックすることで、その画像の詳細なデータを表示するページへ移 動する。詳細なデータは後述するExif から抽出することが可能である。 図 7 検索結果画面

12 図 8 画像詳細表示画面 図8 が個別の画像の詳細表示画面となる。 衛星名、日付、受信時間の三要素を基本として表示し、折りたたみリンクをクリックす ることで、更に詳細な「衛星の最大仰角」、「方位角」、「進行方向」、「チャンネルA、B の種 別」、「増強補正」、「受信地点とその経緯」、「受信地点の海抜高度」、「受信周波数」、「受信 解析ソフトウェア」のデータを表示するようになっている。 また、衛星から受信した、画像データに解析する前の音声データそのものもダウンロー ドが可能なようになっている。これをダウンロードすることで、ユーザーのPC に WXtoImg などの画像解析環境があれば、自身で解析が可能なようになっている。

13 3-4.Data と Database

気象衛星観測画像に関するメタデータの保管方法として、WXtoImg は Exif[9]と呼ば れる規格を利用している。Exif は Exchangeable image file format の略称であり、富 士フィルムが開発した、写真用のメタデータを含む画像ファイルフォーマットである。 本来は、写真用のメタデータを記録するフォーマットなので、「撮影機器のモデル名」 「絞り値」「焦点距離」「シャッタースピード」などのデータが記録される。 WXtoImg は、図 9 の赤枠部のように、取得した画像の Exif の「フォーマットのコメ ント」欄に、「受信した衛星名」「受信した日付」「受信した衛星の最大仰角」「受信時の 周波数」などと言った諸情報を一列のデータとして記録している。これを利用すること で、衛星から受信した画像の「受信した衛星名」「受信した日付」「受信した衛星の最大 仰角」「受信時の周波数」と言った詳細なデータを取得することができる。 3-4-1.Exif::Tool Perl の項で述べたように、Perl にはモジュールと呼ばれる、機能を付加する仕組み が存在する。それらモジュールをまとめたアーカイブ、「CPAN」には、Exif::tool と呼 ばれるモジュールが公開されている[10]。開発は Phil Harvey 氏。 これを導入することで、Perl で Exif に記憶されているデータを閲覧したり、編集す ることが可能になる。 図 9 Exif に書き込まれているデータの一部

ActivePerl 環境下では、同梱の Perl Package Manager、PPM を利用することで、モ ジュールをダウンロードし、インストール・アンインストールを行うことができる。

14 3-4-2.Apache、OSX server の設定

CGI を動作させるために、Apache ソフトウェア財団の開発している Web サーバアプリケ ーション、Apache HTTP Server(以降 Apache)を利用する。今回は、Macintosh OSX server を利用するので、標準でインストールされているOSX server アプリケーションを利用して、 Apache の管理を行う。

図 10 OSX server の Web サイトサービス起動画面

OS X server では、ドメイン名、IP アドレス、サイトファイルの保存場所等を GUI で設定 する。今回の設定は以下の通り。

15 図 11 OSX server の設定

この段階では、Apache は CGI を動作させることができないので、Apache の設定ファイル であるhttpd.conf を編集する必要がある。 httpd.conf で編集する点は以下の三点 1. Script Alias の設定 CGI プログラムのあるディレクトリを指定する。 2. AddHandler の追加 拡張子「.cgi」のファイルを CGI プログラムとして認識する。 3. オプションの設定 １で指定したディレクトリに対して、ExecCGI の設定を行う。これによって CGI プロ グラムの実行を許可する。

16 具体的には、httpd.conf ファイルを以下のように編集する。

#

# ScriptAlias: This controls which directories contain server scripts. # ScriptAliases are essentially the same as Aliases, except that # documents in the target directory are treated as applications and # run by the server when requested rather than as documents sent to the # client. The same rules about trailing "/" apply to ScriptAlias

# directives as to Alias. # ScriptAliasMatch ^/cgi-bin/((?!(?i:webobjects)).*$) "/Library/Server/Web/Data/CGI-Executables/$1" <Directory "/Library/Server/Web/Data/CGI-Executables/CGI"> AllowOverride None

Options FollowSymLinks ExecCGI Order allow,deny

Allow from all

</Directory>

# AddHandler allows you to map certain file extensions to "handlers": # actions unrelated to filetype. These can be either built into the server # or added with the Action directive (see below)

#

# To use CGI scripts outside of ScriptAliased directories:

# (You will also need to add "ExecCGI" to the "Options" directive.) #

AddHandler cgi-script .cgi

17

4.まとめ

本研究では、人工衛星観測画像を公開、検索する基本的システムの基礎を開発した。 CGI と WXtoImg を利用することで、データ量がリアルタイムで増大しても、検索シ ステムに自動的に反映されることが可能になった。 また、Exif を利用することで、画像の詳細データを表示することが可能になった。 Exif を更に有効活用すれば、検索条件の増加など、検索システムの利便性向上に繋が ると考えている。 システム全体を通して、UI にもこだわり、サムネイル式の検索結果表示や、プルダ ウン式検索フォームなどの導入を行った。UI に関しては、利用者の意見を重点するこ とで、さらなる向上と改善が行えると考えている。

18

5.謝辞

本論文の作成にあたり、終始熱心かつご丁寧に指導して頂いた中京大学工学部電子工 学科の村中崇信准教授、上林真司教授に感謝の意を表します。 また、本研究においてお互いに励まし合い、多くの協力をして頂いた村中研究室の五 十嵐勇真君、帷子勝也君、豊田和貴君には心から感謝の意を表します。

19

6.引用・参考文献

[1]NATIONAL OCEANIC AND ATMOSPHERIC ADMINISTRATION http://www.noaa.gov/

[2]Satellite Imagery Archive at Institute of Industrial Science, The University of Tokyo http://siaiis.tkl.iis.u-tokyo.ac.jp/sat-info.php [3]神奈川県水産技術センター海況図データベース NOAA 人工衛星画像 データベース http://www.agri-kanagawa.jp/suisoken/noaa2/noaa2.asp [4]WXtoImg http://www.wxtoimg.com/

[5]The Perl Programming Language https://www.perl.org/

[6]Apache HTTP SERVER PROJECT http://httpd.apache.org/ [7]Active Perl http://www.activestate.com/activeperl [8]WXtoImg manual http://www.wxtoimg.com/support/ja_wxgui.html [9]一般社団法人電子情報技術産業協会-JEITA 規格 http://www.jeita.or.jp/cgi-bin/standard/list.cgi?cateid=1&subcateid=4 [10]CPAN Image::ExifTool http://search.cpan.org/~exiftool/Image-ExifTool-9.70/

20 7.付録(マニュアル、ドキュメント) 画像公開システムの運用マニュアル １．OS X server の設定… 「＋」をクリックし、web サイトの設定画面に入る。ドメイン名は「espel.chukyo-u.ac.jp」。 (ローカルで動かす場合は特に必要なし)IP アドレスは、サーバー機に割り当てられているも のを使用。Mac Air Extreme のユーティリティから IP アドレスを確認。サイトファイルの 保存場所は、実際にCGI などのファイルのあるディレクトリを選択しておく。(この場合は /library/server/web…./CGI)

21 図 13 詳細設定画面

図 14 AirMac ユーティリティの設定画面

22 ２．Apache 設定ファイル

OSX server で WEB サ イ ト を 管 理 す る 場 合 、 Apache の 設 定 フ ァ イ ル で あ る httpd_server_app.conf ファイルを編集する必要がある。Windows や OSX にデフォルトで 導入されているApache の httpd.conf ファイルではないことに注意が必要である。 httpd.conf で編集する点は以下の三点 4. Script Alias の設定 CGI プログラムのあるディレクトリを指定する。 5. AddHandler の追加 拡張子「.cgi」のファイルを CGI プログラムとして認識する。 6. オプションの設定 １で指定したディレクトリに対して、ExecCGI の設定を行う。これによって CGI プロ グラムの実行を許可する。 #

# ScriptAlias: This controls which directories contain server scripts. # ScriptAliases are essentially the same as Aliases, except that # documents in the target directory are treated as applications and # run by the server when requested rather than as documents sent to the # client. The same rules about trailing "/" apply to ScriptAlias

# directives as to Alias. # ScriptAliasMatch ^/cgi-bin/((?!(?i:webobjects)).*$) "/Library/Server/Web/Data/CGI-Executables/$1" <Directory "/Library/Server/Web/Data/CGI-Executables/CGI"> AllowOverride None

Options FollowSymLinks ExecCGI Order allow,deny

Allow from all </Directory>

# AddHandler allows you to map certain file extensions to "handlers": # actions unrelated to filetype. These can be either built into the server

23 # or added with the Action directive (see below)

#

# To use CGI scripts outside of ScriptAliased directories:

# (You will also need to add "ExecCGI" to the "Options" directive.) #

AddHandler cgi-script .cgi

３．ファイルのパーミッション変更 CGI のあるディレクトリ、ファイル、使用される画像ファイルのパーミッション (権限 設定、属性) の設定がサーバーと適合していない場合、エラーが発生するので、以下の表の 通りにディレクトリやファイルのパーミッションを変更する必要がある。変更はターミナ ルからコマンドを入力することで行う。 ４．WXtoIMG の設定 WXtoIMG で画像をデータベースに保存する際、主にデータの格納場所、ファイルの名前 について設定を行う必要がある。

24 ファイル名の設定… WXtoImg は、画像を保存する時のファイル名の形式を設定することができる。 図４の赤線部、Filename Template を書き換えることで、「受信時の現地時間」「飛行 方向」「最高仰角」「衛星名」などをファイル名にするように設定することができる。 File Template で出力できる内容を以下に記す。 変数 内容 変数 内容 %@(Local Time Zone) 現地時間 %r 送 信 周 波 数 %s 小文字衛星 %k 年月日 %N 大・小文字衛星 %K 日月年 %g 小文字種類名 %L 月日年 %D 飛行方向 %d 日 %p 略飛行方向 %m 月 (01-12) %E 最高高度 %y 2 桁 年 (14) %^ 方角 %Y 4 桁 年 (2014) %z 略方角 %T 月日時分 %f Audio 名 %t 時分 %F atp,wefax %H 24 時 間 制 %C WEFAX はスペクトル バンド名。APT はチャン ネル名 %P AM/PM %e 増強処理 %M 分 %l セクター名(WEFAX の み) %Z 時刻帯 %n シーケンス番号 %% % %8,9,10,11% 第 9、第 10、第 11、第 12 番目の WEFAX ディ ジタル・ヘッダ名

25 ファイルの保存場所 図 4 のファイルの保存場所入力欄に、それぞれ音声ファイル、編集済み画像ファイル、未 編集画像ファイル、位置情報ファイル、サムネイル画像ファイルの保存場所を指定する。 このシステムでは、セキュリティ等を考慮して、WXtoIMG を実行している PC と、画像 のデータを格納しているデータベースとするPC を別にする。その為、二台の PC をネット ワークで接続し、WXtoIMG を実行している PC からデータベース PC 上のディレクトリに 画像を保存させる。

26 ### 検索システムの CGI プログラム

#! C:/Perl64/bin/perl

use Image::ExifTool; # モジュールの使用の宣言。ExifTool を宣言。

$IMGPATH = './digit/thumbnails'; # 画像のあるフォルダ。画像の保存先が変わった場 合はここを変更するだけでよし。

# フォームデータ取得

if($ENV{'REQUEST_METHOD'} eq 'POST') {

read(STDIN, $query, $ENV{'CONTENT_LENGTH'}); }

else {

$query = $ENV{'QUERY_STRING'}; }

# フォームデータを整理

foreach $pair (split(/&/, $query)) { ($key, $value) = split(/=/, $pair); # 文字のデコード $value =~ tr/+/ /; $value =~ s/%([0-9a-fA-F][0-9a-fA-F])/chr(hex($1))/eg; $FORM{$key} = $value; } #年月日の結合 $FORM{data}=$FORM{year}.$FORM{month}.$FORM{day};

27

# ファイル名取得

opendir $dh, $IMGPATH or die "$IMGPATH:$!";

@imglist = readdir $dh; #配列に画像ファイル名を格納する closedir $dh;

# サーバー出力 print <<END;

Content-type: text/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>試製画像検索フォーム・リザルト</title> <style type="text/css"> /* --- リストエリア --- */ ul.thumbnail { width: 100%; /* リストエリアの幅 */ margin: 0; padding: 30px 0 0; /* リストエリアのパディング（上、左右、下） */ list-style-type: none; } /* --- リスト項目 --- */ ul.thumbnail li { width: 160px; /* 項目の幅 */ /* height: 110px; */ /* 項目の高さ（li 要素の高さを指定する場合） */ float: left; margin-bottom: 30px; /* 項目の下マージン */ text-align: center; } /* --- clearfix --- */ .clearFix:after {

28 content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearFix { min-height: 1px; } </style> </head> <body> <h1>◆入力されたデータ◆</h1> END

print "<table border='1'>";

print "<tr><th>要素名</th><th>データ</th></tr>"; # 入力されたデータをテーブルの形にして表示 foreach $key (keys %FORM) {

print "<tr><th>$key</th><td>$FORM{$key}</td></tr>¥n"; }

print "</table>";

print "<ul class='thumbnail clearFix'>";

if (length($FORM{number}) == 0){ #NOAA が空白なら

print "$FORM{data}に受信できた画像の検索結果：<br>¥n"; foreach $img (@imglist){

if($img =~ /$FORM{data}/){ # 日付と一致するファイル名の画像があ った場合

# 検索結果の画像を表示

print "<li><a href='imgpage.cgi?title=$img'><img src=¥"$IMGPATH/$img¥" alt=¥"$img¥" width=¥"140¥"

height=¥"100¥"></li>¥n";

29 print "↑NOAA-$1 から受信した画像です↑ <br>¥n"; } } } }elsif(length($FORM{data}) == 0){ #日付が空白なら print "NOAA-$FORM{number}から受信できた画像の検索結果：<br>¥n"; foreach $img (@imglist){

if($img =~ /NOAA$FORM{number}/){ # 衛星名と一致するファイル 名の画像があった場合

# 検索結果の画像を表示

print "<li><a href='imgpage.cgi?title=$img'><img

src=¥"$IMGPATH/$img¥" alt=¥"$img¥" width=¥"140¥" height=¥"100¥"></li>¥n"; if ($img =~ /(¥d+)-NOAA$FORM{number}/){ print "↑$1 に受信した画像です↑<br>¥n"; } } } }else{ # 要素が両方共入力されていたら

print "$FORM{data}に NOAA-$FORM{number}から受信できた画像の検索結 果：<br>¥n";

foreach $img (@imglist){

if(($img =~ /$FORM{data}/) && ($img =~ /$FORM{number}/)){ # 検索結果の画像を表示

print "<li><a href='imgpage.cgi?title=$img'><img

src=¥"$IMGPATH/$img¥" alt=¥"img¥" width=¥"140¥" height=¥"100¥"></li>¥n"; } } } print <<END; </ul> </body> </html> END