SIPB

平成

22

年度 卒業論文

Web

掲示板

SIPB

の開発に関する研究

山口大学 教育学部

表現情報処理コース 情報工学研究室

平成

19

年度入学

宗 友理子

指導教員 中田 充

目次

第1章 序論 3 1.1 研究の背景と目的 . . . 3 第2章 SIPBの構成 4 2.1 システム構成 . . . 4 2.2 ディレクトリの構成について . . . 5 2.2.1 表示する位置をディレクトリで指定する . . . 5 2.2.2 ディレクトリの詳細について . . . 5 2.3 HTMLファイルの構成 . . . 6 2.4 画像変換について . . . 7 2.4.1 概要 . . . 7 2.4.2 jodconverterについて . . . 9 第3章 マニュアル 11 3.1 管理者用マニュアル . . . 11 3.1.1 SIPBにアップロードする方法 . . . 11 3.1.2 注意点 . . . 11 3.2 ユーザ用マニュアル . . . 12 3.2.1 SIPBの使い方 . . . 12 3.2.2 注意点 . . . 14 第4章 まとめ 15 参考文献 17

3

第

1

章

序論

1.1

研究の背景と目的

近年の情報化に伴って，様々なフォーマットのファイルが流通している．その中で，見ず知らずの人が 提供したファイル(HPなどにアップロードされたファイル)を自由に閲覧するだけでなく，ダウンロード することも可能になった．しかし，このようにファイルをダウンロードする従来のWeb掲示板では，日 付・ファイル名・ファイル形式が示されたアイコンが表示され，ユーザが欲しい情報のファイルをクリッ クし，中身を確認してからダウンロードするという手間のかかる作業が必要である．また，新しい情報の 追加や，古い情報の削除などにより，前回閲覧した時とは，画面における情報の位置が異なっている可能 性も高い．つまり，Web掲示板のユーザ(以後，情報の受信者)は，必要なファイルを探すのに手間がか かる．また，情報の受信者だけでなく，ファイルをアップロードする管理者(以後，情報の発信者)も，従 来のweb掲示板のアップロード方法では，作業が面倒という問題点がある．  一方で，普段私達が学部の情報伝達として活用しているボード型の掲示板の利点について説明する． ボード型掲示板では，情報の受信者が，一度に掲示板の全画面を閲覧することが出来，情報の中身も見る 事が可能である．また，基本的に表示する位置は変わらないため，時間が経ってもだいたいの位置で情報 を探す事が出来る．情報の発信者も，伝えたい情報を紙面にして貼りだすだけなので作業が簡単である．  本研究では，こういったボード型の掲示板の利点を継承したWeb掲示板SIPB*1_{の開発を目的として} おり，これは，情報の受信者・発信者，双方にとってよりよいWeb掲示板の実現を目指している． 以降，第2章では，SIPBの構成について説明し，第3章では，管理者とユーザの使い方のマニュアル を述べ，第4章では本研究のまとめと今後の課題を示す．

第

2

章

SIPB

_の構成

2.1

システム構成

今回，SIPBを作成するにあたって，PHP[1]とJavaScript[2]という2つのプログラミング言語を利用 した．OSは，Ubuntu[3]を利用する． 1. PHPについてPHPとは，HTML埋め込み型のサーバサイド・スクリプト言語である．以下の2 点で広く利用されているため，この言語を利用している． • Webページを記述することに特化した言語である． • Web上で動く掲示板やチャットなどを作成するのに使われる標準的な言語である．

2. JavaScriptについてSun Microsystems社*1_{とNetscape Communications社が開発した，Web}

ブラウザ等での利用に適したオブジェクト指向スクリプト言語．この言語を利用して，画像を拡 大・縮小など，オプションボタン機能の実現に利用している．

アップロードから変換・表示までのシステム構成の画面は以下の通りである．

図2.1 システム構成の画面

2.2 ディレクトリの構成について 5

2.2

ディレクトリの構成について

2.2.1

表示する位置をディレクトリで指定する

SIPBにファイル画像を表示するために，位置指定をしなければならない．SIPBでは，その位置指定 をディレクトリ名で設定する．このディレクトリ名(以後，ディレクトリFとする)は，数字をハイフン でつないだもの(例：1-1，10-6等)で，表示するファイルデータが入っている．また，表示位置は，以 下の表のようにハイフン前後の数字で指定する．ただし，表では3×3の表を想定しているが，実際の SIPBの画面では表示するディレクトリFの数に制限はない． 1-1 1-2 1-3 2-1 2-2 2-3 3-1 3-2 3-3 表2.1 位置指定した表 ※1-1というディレクトリFは，1行1列目に表示するという意味．

2.2.2

ディレクトリの詳細について

SIPBで利用するディレクトリは，4つある．それぞれのディレクトリについて簡単な説明を図と共に 示す．また，ディレクトリを説明する中で，画像変換という言葉が出てくるが，これについての詳細は後 ほど説明する． • SIPBに表示するファイルデータが入っているディレクトリF • ディレクトリF全てが入っているディレクトリdata ※本研究では，dataというディレクトリ名にしている(図2.2)． • ディレクトリFに入っているファイルを変換した後，そのファイルを保存するディレクトリT ※ディレクトリTはディレクトリFに対応して作成される． • ディレクトリT全てが入っているディレクトリimg tmp ※本研究では，img tmpというディレクトリ名にしている(図2.2)．

図2.2 ディレクトリの構造

2.3

HTML

ファイルの構成

ここでは，SIPBを作成するにあたって，HTMLファイルがどのように構成されているかを述べる． ユーザが閲覧するSIPBの画面で，動的に変化しない部分と変化する部分でフレーム化して分割する．[4] • 動的に変化しない部分 SIPBのタイトル表示とバナー設置． • 動的に変化する部分 アップロードするファイルの位置． SIPBの画面のHTMLファイルがどのようになっているのかは，以下の図のとおりである．(図2.3)

2.4 画像変換について 7 図2.3 HTMLファイルの構成

2.4

画像変換について

2.4.1

概要

ファイル画像をユーザが閲覧するSIPB上に表示するためには，アップロードした様々な形式のファ イルをjpg形式に変換しなければならない．本研究でアップロードの対象となるファイル形式は，word，

excel，PowerPoint，txt，PDF，JPEG形式である．本章では，画像変換の流れを説明した後，変換に必 要な環境のインストール方法やプログラムの説明をする．

ファイル変換の流れは以下の通りである．

1. ディレクトリimg tmp中のディレクトリを削除．

ディレクトリimg tmp中には，SIPBの画面上に表示するために変換した画像(PDF・JPEGファ

イル)が保存されている．そのため，新しいファイルをアップロードした際，それまで保存されて

いたデータが変更されている可能性がある．そこで，ディレクトリdata中の情報は，変更した部

分だけ，ディレクトリimg tmp中の情報は，更新する度，全て消去して，新しいディレクトリ情

報を保存する．

img tmp中のディレクトリ情報を消するプログラム   1 $cmd = ’rm -rf ./img_tmp/*’; 2 my_exec($cmd);   2. 表示したいファイルをディレクトリFに保存． 3. ディレクトリFをopendir関数で開いて，readdir関数で読み込む[5]． ここで，ディレクトリFがディレクトリかどうか，また，ディレクトリFに入っているデータが ファイルかどうかを判断する． 4. ファイル名が日本語の場合，tmpというディレクトリを一時的に作成して保存する． これは，PHPからJavaScriptのプログラムを呼び出すと，日本語のファイル名を正しく扱えない ために，JODConverterと呼ばれる変換システムが正しく動作しないため． ※JODConverterについては，後ほど説明する． 5. JODConverterを使って,word,excel,PowerPoint，txtファイルをPDFファイルに変換. PDFに 変換するプログラムは以下の通りである． 対象となるファイルから，PDFファイルに変換するプログラム  

1 $cmd = ’/usr/bin/java -jar ./jodconverter-2.2.2/lib                 /jodconverter-cli-2.2.2.jar /tmp/’.$eigo_fname.’            /tmp/’.$eigo_pdf_fname; 2 my_exec($cmd);   6. 変換したPDFファイルを保存するため，ディレクトリTの中に，ディレクトリFと同じ名前の ディレクトリを作成．ディレクトリ作成方法は，以下の通りである． img tmpにディレクトリTを作成するプログラム   1 $dir_path=’./img_tmp’.$org_dname; 2 if(!mkdir($dir_path)){ 3    echo".$dir_path"; 4    exit; 5 }  

7. 変換したPDFファイルを,convertコマンドでJPEGファイルに変換. jodconverterでPDFファ イルに変換した後，JPEGファイルに変換し保存する．そのために，ImageMagicという画像を操 作したり，表示するためのソフトウェアを利用する．

2.4 画像変換について 9 は，以下の通りである． PDF→JPEGファイルに変換するプログラム   1 $cmd=’/user/bin/convert ./data/’.$org_dname.’/"’.$org_fname.’"[0]            ./img_tmp/’.$org_dname.’/"’.$img_fname.’"’; 2 my_exec($cmd);   8. ディレクトリFに保存した時，既にPDFファイルのものは，JPEGファイルに変換し，ディレク トリimg tmp中にディレクトリFに対応するディレクトリTを作成し，ファイルを保存する． 9. JPEGファイルは，ディレクトリimg tmp中にディレクトリFに対応するディレクトリTを作 成して，ファイルを保存する． 10. 変換終了画面の表示．

2.4.2

jodconverter

について

jodconverterとは，Webアプリケーション内部でPDFに変換する機能である．この機能を利用する にあたって，いくつかの環境を設定しなければならない． 1. OpenOfficeのインストール Openofficeをダウンロードしてインストールする．参照[6] 今回はバージョン3.0.1のLinux用(JRE*2_{無し)を使用．} 2. OpenOfficeの起動 変換準備として,OpenOfficeをサーバとして起動する.参照[7] ※電源をONする毎に1回入力する. 起動するためには，コマンドプロンプトから以下のコマンドを実行します． OpenOfficeをサーバとして起動するコマンド  

soffice -headless -accept = ”soket,host = 127.0.0.1, port = 8100 ; urp” -nofirststartwizard

 

3. jocconverterのインストール

JODConverter2.2.2をダウンロードして展開する．参照[8]コマンドラインから展開したフォルダ に移動して，以下のコマンドを実行する．

PDF形式に変換するコマンド

 

1 $cmd=’/user/bin/java -jar ./jodconverter-2.2.2/lib              /jodconverter-cli-2.2.2.jar /tmp/’.$eigo_fname.’             /tmp/’.$eigo_pdf_fname;

2 my_exec($cmd);

11

第

3

章

マニュアル

本章では，Web掲示板SIPBを使用するにあたって情報の発信者である「管理者」と，情報の受信者で ある「ユーザ」のマニュアルについて述べる．

3.1

管理者用マニュアル

3.1.1

SIPB

にアップロードする方法

1. アップロードしたいファイルを準備する． • ディレクトリ1を作成．(本研究では，ディレクトリdata) このディレクトリは，位置表示を示すディレクトリをまとめるディレクトリ． 2. アップロードするファイルを格納するために，表示したい位置のディレクトリ2(例：1-1のように ハイフンで表示位置の数字を現す)のフォルダ作成しなければならない．これは，ディレクトリ1 の中に作成． 3. 作成したディレクトリにアップロードするファイルを挿入． 4. SIPB Conv.phpをブラウザ上で実行して，アップロードしたファイルを変換する．ファイル変換 終了と画面表示されたらよい． 5. SIPB.html画面で確認する．

3.1.2

注意点

1. 1つのディレクトリに入れることが出来るファイル数は1つ． もし，1つ以上のファイルが入っていた場合，同じ位置に重なって表示される． ※画像が重なるのではなく，1つのファイルだけ画像表示され，あとはリンクとしてファイル名が 重なって表示される． 2. ディレクトリFで作成するディレクトリ名には，ハイフンは1つしか使えない． ※OK:1-1  NG:1-1-1

3.2

ユーザ用マニュアル

ユーザ用マニュアルでは，SIPBを実際に使用するにあたっての見方や，オプションコマンドの説明， 注意点について述べる．

3.2.1

SIPB

の使い方

1. まずSIPBのURLにアクセスする． 2. 表示されている画像をダブルクリックすると，対応するファイルフォーマットが起動し，表示され る(図3.1)． このとき，ファイルの枠の色を未読の時は黄色，既読の時は水色，クリックした時は赤色に設定． 図3.1 ファイルの枠色の説明画面 3. ファイルの右下にある「拡大ボタン」を押すと，ファイルの拡大画像が表示される(図3.2)．

3.2 ユーザ用マニュアル 13 図3.2 画像を拡大した画面 オプションボタン 拡大されたファイル画像にカーソルを持っていくと，オプションボタン(図3.3)が表示される． • 拡大した画像の左上にある矢印ボタンを押すと，さらに拡大できる．(※OPコマンド1) • 拡大した画像の右上にある×印ボタンで拡大された画像消去．(※OPコマンド2) • 矢印ボタンは，ファイルを拡大した状態で次の画像を表示する．(※OPコマンド3) 図3.3 オプションボタン説明画面

図3.4 バナー設置画像 4. タイトルの右横にある表現情報処理コースの生徒に関係するバナーを設置．クリックすると，各々 のHPにアクセスすることが出来る(図3.4)． 5. 基本的に表示される画像は，A4 サイズをイメージして縦長に表示されるようにしているが， PowerPointのファイル画像だけ，横長に表示する．

3.2.2

注意点

1. ファイル画像をクリックして閲覧するためには，対応するファイルを閲覧するための環境が必要． 閲覧できるファイルフォーマットは以下の通りである． • doc・docx(Word) • xls・xlsx(Excel) • ppt・pptx(PowerPoint) • txt(Text) • pdf(PDF) • jpg(JPEG) 2. 見えているページが全てではなく，ファイル数・表示位置に応じて，右や下にスクロール可能で ある．

15

第

4

章

まとめ

本研究は，情報の受信者・発信者双方にとって，従来のWeb掲示板とボード型の掲示板の利点を併せ 持つ，今までにないWeb掲示板SIPBの開発を行った． 今後の課題として，現段階でのSIPBの対象者は，山口大学教育学部の表現情報処理コースの先生と生 徒であるので，より多く人が活用できる掲示板にしたい．また，ファイル数が増加するにつれて，ファイ ルを変換する時間が長くなる事や，対応していないファイル形式についての表示などを行う必要がある．

謝辞

本研究に取り組むにあたり，プログラムに限らず，様々な事を日々熱心にご指導して頂きました山口大 学教育学部 中田 充 准教授に深く感謝いたします．また，講義などでお世話になりました古賀 和利 教授， 葛 崎偉 教授，池上 敏 教授，熊谷 武洋 准教授並びに，四年間お世話になった表現情報処理コースの皆様 に深く感謝の意を表します．

17

参考文献

[1] 小島まさご， 実践マスター(PHP4/PHP5対応)PHP+MySQL対応， ソーテック社，2007 . [2] 田村正隆，ホームページ活用サンプルデータ集JavaScript&CGI，株式会社ナツメ社，2002 . [3] ubuntu，http://www.ubuntulinux.jp/ . [4] HTMLクイックリファレンス http://www.htmq.com/index.htm . [5] 堀田倫英，桑村潤，PHP5徹底攻略，ソフトバンククリエイティブ社，pp232-234，2004 . [6] OpenOffice.Org http://www.ja.openoffice.org/openoffice.org . [7] artofsolving http://www.artofsolving.com/node/10 .