雑誌名 技術部活動報告集

工学部等の公式HP管理・運用システムのためのイン タラクティブなWebページ作成技術の習得

著者 水野 広治, 篠 競, 白井 治彦

雑誌名 技術部活動報告集

巻 13 (2007年度)

ページ 13‑18

発行年 2008‑03‑31

URL http://hdl.handle.net/10098/7221

1 はじめに

工学部等の公式 HP 管理・運用システムのための インタラクティブな Web ページ作成技術の習得

第 三 技 術 室 水 野 広 治 ， 篠 競 ， 白 井 治 彦

本研修の研修者は，プロジェクト派遣として工学部ホームページ

( H P )

等の維持・管理に関わる業 務に携わっている.関係する複数の公式サイトにおける

Web

ベージの作成や更新を継続的に遂行す るためにグ、ループ(管理・運用グループ)を作り，各部局・センターからの依頼に対応しているーそ のため，作成や更新など維持するために必要な管理・運用に関する知識や構築技術が不可欠である.

1 8

年度に行った専門研修「工学部等の公式

HP

管理・運用のためのシステム構築技術の習得jでは，

HP

構築ソフトウェアなどを用いた学習を通して工学部等

Web

ペーシの運用に必要なシステムの構築 技術を習得した これにより，管理・運用のためのシステムが構築された訳であるが，対象である

Webページ自体の作成技術に関しては，既存技術の応用程度で見栄えのよい表現を行うまでには至

っていない

そこで，本研修では，高機能な

Web

オーサリングツーノレを用いた

Web

ベージの作成を習得するこ とに加え，クライアントサイドスクリプトやフラッシュムービーなどのインタラクテイブで動的な ベージの作成に必要な技術の習得を目的に学習を行った.スタイルシートやクライアントサイドス クリプトである

]avaScriptを用いた基本的な作成に関しては Adobeの Dreamweaver

を利用し，フラ ッシュムービーなどのインタラクティブな

Web

ページには同じく

Adobe

の

Flash

を用いて学習した 尚，

]avaScript

は主要なブラウザに対応しており，

Flash

もまた，利用(再生)環境の制限が少なく 多くの

Web

サイトに採用されている.特に

Flash

は，画像(動画)を中心にマウス操作をスクリプト で制御することで動的でリッチなコンテンツの作成が可能であるこれらの機能を学習することで，

既 存

Web

ページの見栄えを良くすることや，新規作成などに対する高機能な要望に対応することが できる.

2 スタイルシート

HTMLで記述されている Web

ページの表示を自由に修飾し制御するのがスタイルシート

(SS:Style

Sheet)

である.

HTML

文書だけでもある程度の表現は可能であるが，

SSを使うことにより，より柔軟

で 複 雑 な 表 示 が 可 能 と な る こ の お は ，

WWW

に お け る 技 術 の 標 準 化 を 行 う 非 営 利 団 体 で あ る

W3C(World Wide Web Consortium)

により提唱されたもので，

HTML

文書などの構造と体裁を分離する ことが目的となっている 通常，

HTML

文 書 に は お と し て

CSS(CascadingStyle Sheets 

カスケー ディング・スタイノレ・シート)が利用されている.

"イ 岬 酷 屯}褒示 日 お 拡λη岨 チ .

  ， .

。 酷 ‑

D  I ! H 司会 . 

_" 

リ'"守

これはテストです.

4量ベータ糟 ^{. イントネ併}

図1

H T I I L

による表示

<

s t y l

e 

t

y

p

e=・

t e x t

/

c s

s

"

)

h 1  

{ 

f o n t

‑s

i z e :   m e d i u

園。

f o n t ‑

s

t y l e

: 

i  t a l i

c 

. . i d t h

: 

2 0 0 p x   p a d d i n g :   I O p

災.

c o l o r

得ffffff;

b a c k g r o u n d

‑c

o l o r :   # f f O O O O ;  

} 

<

/s

t y l

e> 

< h l

>これはテストです り

h

I>

図2

C S S

の記述

"イ岬 畠 '" .町田 酬 乙入醐 小 野 It

。 臨 ^{‑ 0}

13~~ ³

・

_'J:.r今

. 開 珂 関 岡 田 ・ ・

tlペー3畑農 .インター.，ト

図

3 C S S

による表示

CSS

により

Web

ページのデザインを変えるには，

HTML

文書に専用の記述方法で必要な設定を適用 させる必要がある.具体的には，セレクタのプロパティに対し値を設定するこ とであるが，このセ レクタとは，

HTML

のタグや独自に指定できる

ID

，クラスなどである.そのセレクタの属性などを示 すプロパティに必要な値を指定することで，

HTML文書に記述したセレクタの要素が指定された

値 (内容)で表示されることになる. 例えば，

HTML

の見出しタグである r

hl Jの場合ブラウザでは図 l

のような表示となる.この r

h l

Jタグであるセレクタの属性を

CSS

により図

2

の記述で設定を適用 させると図 3の表示と変化する.

3  JavaScript

と

Flash

]avaScriptは，クライアント側で処理されるクライアントサイドスクリプトのスクリプト言語で，

W eb

ページを動的に変化させたり

CGI ( C o mm on

Gatcway 

Interface)

に近い処理を行うことができる. 元は

Netscape

干上が開発したものを後に

Sun

社と共同で

]avaScriptとし

たもので，他には，これを ベースにして標準規絡として言語仕様を規定した

ECMASc ript(European Co mpu ter Manufacturers  A s

s

ociation Scri p t )

と，互換スクリプト言語として

Microso f t

社が開発した

]scriptがある.尚，

]avaScript

は

Javaと構文が似ているが基本的に別であるー

JavaScript

の記述は，

HTML

文書内に

JavaScript

のためのタグを指定することで行う.例えば，

ディスプレイの幅と甫iさを表示させるための

JavaScr i p tを HTML

文書内に図 4のように記述すると ブラウザで図

5

のように表示させることができる.このように

JavaS

c

ript

や

CSS

などの様々な 機能を使うことによりインタラクティブで動きのある

Web

ベージが作成できる.そして，このよう

な

Web

ベージを

DHTML

(ダイナミック

HTM

L)と呼んでいる.

また，動画(アニメーションなど)や音声などのリッチコンテンツやインタラクティブ性の高いコ ンテンツの作成には

Flash

が利用されている

Flash

とは，ベクター画像とスクリプト言語の

ActionScriptを組み合わせたコンテンツを作成するためのアプリケーションである

この

Flash

で 作成されたコンテンツは，実行形式での再生が可能であるが，ブラウザのプラグインでも再生する

ことができるため一一般的には

Web

用のリッチコンテンツの作成として利用されている

Fla

s

h

を用いたリッチコンテンツの作成は，基本的にタイ

ムラインを使った映像編集と同じで，レイヤーとフレームに

<sc

r

i

p

t type~'text/javas(ニ ript')

<!‑‑

d o

印 刷

n t

.

w r i t e C

ディスプレイの幅 ， ，口

e e n

川

d t h

，

' "

<

b r

)勺。

d

oc

u m e n t

.

w r i t e ( "

ディスプレイの高さ '"， sc

r e e n .  h e

ight

) :  

11‑‑) 

</

s c r

i

p t >  

図

4 ] a v a S c r i p t

の記述

ファイル@ 寝藁(正〉 葺示

t

^珍 書官

窃震 る . 0   ^{. ，}

^{リン担  ，.}

'巴

ディスプレイの幅;

1  2 8

日 ディスプレイ町高さ;

1 0 2 4  

ザ

@インターネット _ー詑

図

5 ] a v a S c r i p t

実行結果

ベクター画像などの動きを指定し，マウスやキ一入力で制御するためのスクリプトを記述すること で，タイムラインなどに対する変化を指示する.このタイムラインのフレームに配置する要素とし てシンボノレがあるが， 画像，図形，テキストなど動きに関係する要素はシンボル化することで， 再 利用が可能な要素となる.シンボルには，ムーピークリップ，グラフィック，ボタンの種類がある. 中でも特にムーピークリップが多く使われている.アニメーションとしての利用や，ムーピークリ ップ自体をさらにタイムラインとして階層化することも可能である. また，ボタンは，ボタンを作 るためのシンボノレで，カーソノレやクリックの状態に必要なフレームが予め用意されている.さらに，

フレーム問での動きを自動的に生成するための機能としてトウィーンがある そのひとつモーショ ントウィーンは，移動，変形，回転など動きのある変化や，色などのプロパティ属性の変化を始点、

と終点間で自動変化させることができる.また，シンボノレ化していない異なる図形の始点と終点をつ なぎモーフィングのように変形させるシェイプトクイーンがある.そして，これらのタイムライン や ム ー ピ ー ク リ ッ プ に イ ン タ ラ ク テ ィ ブ 性 を 持 た せ る た め の Flash独 自 の ス ク リ プ ト 言語が ActionScriptである 例えば，フレームに記述することでフレームが処理された時に実行するフレ ームアクションや，マウスによるクリックなどで実行するボタンインスタンス(ボタンシンボルでは ない)へのボタンアクション，フレームの進行やロード時に実行するようにムーピークリップに記述 するムーピークリップアクションがある.これらを組み合わせることによりインタラクティプで複 雑なコンテンツ(Webベージ)が作成できる

4

研修の成果

研修では， CSS， ]avaScript， Flashの学習を行うと共に，実際に DreamweaverやFlashの作成ツ ーノレを用いて Webページを作成し，学習内容をブラウザの表示で確認、しながら進めた

4. 1 CSSとJavaScriptを用いたWebページの作成

CSSと]avaScriptの学習を確認のためにいくつかのWebページを作成した.試 行Webページのコ ンテンツとしては，工学部の既存コンテンツの一部を用いている.先ず，基本の HTML文のみで作成

したWebページが図6である 最低限の基本的なタグを用いたデザインとするため複雑な構成でな くシンプルなものとした.図 7，8， 9は図 6の HTML文に CSS

を用いてタグや ID，クラスを対象に装飾を施した時の表示であ る 3図とも表示内容は異なるが基本の HTML文は図6と同じ内 容を使っている また， 図

8

，

9

では左側にナピゲーション用の メニューを配置しているが，これは HTMLのフレームによるベー ジの分割ではなく， CSSのフローティングによる 2段組で行っ ている 更に図 8では，ページ

t

の自由な位置に配置が可能な レイヤーを使い上部パナーにテキストを表示させている.図 9 は， CSSだけでなく ]avaScriptを利用することで動的な表示や イメージの切り替えを行っている.左側メニュー上部に配置し た

5

つの選択ボタンでは， マウスカーソノレが重なるタイミング で個々の選択ボタンに合わせて下部のイメージが切り替わって 表示するスワップイメージを実現しているその下のボタンは，

川 島旬 即日 向 .~~場開 7ii  Qu-;f:l点 A 設，胴合・胤M Q!~ 込 d 締，，~

以-~~-旦E担竺旦盟担割目盟三皐旦とる

町 ヱ 帽 ヱ 時 間之 刷

ItMl字文字

3

・

⁷州 市 川 ， ， ， 刊r，γ.，...

附W検鋤穆専門院.

工学部・工学研実科由理章と目的

‑理2

エー………

湾訪

2 5 1 t

溶怨諸制定

Z J

目 ? 車 耐 開 明曹 田 町A

‑目的

震装鶴撃事懇器露 Z 2 2

5器綜脳聖EFg』占虫色~~..I:..Il..，T. 叫町田 +'Ii:~"-る叩……

零事壊事房

温雌盤

E2虫色『

2 2

忠告

f

れ

R F

品額百蕊

1 f

総務ヰザtJtiF

=a:""，n.~t~. …R判明白肌叫刊をIIfCTý^

岡 山 町

図6 HTML文書による表示

明 白 山 一 河 叫

。

^".0

_{‑ ‑ 申}

^..

_『

^)..

_司

^.弘

_{』 帽}

^綱

_{崎 占}

^同

_{‑ 同 嗣}

^e

_{‑ ・ ‑}

^~

_{・ 咽・}

^C 3 

_・

l h a ^{」 園周}

司

巴... 車道臨

一一一一

… ー ー

…一

Z血 一 山

・司瞬

一…ー . 間 .

一一一 . . 一 一 一 一 一 一 一 一 時 一一一 一 一 一 " 一 一 … 一 一

22LtZE出

zg

苫百三訟おE

，    ; ‑ ^{ミ慾宗訟誌苧警}

志有面協 定

固

7 C S S

による表示

1

固 8

C S S

による表示2

包

囲 9

C S S / J a v a S c r i p t

による表示

クリックすることでドロップメニュー形式のメニューを表示するジャンプメニューである 吏に，

その下のボタンは，マウスカーソルを重ねると図のようにメニューがポップアップ表示するポップ アップメニューであるこれらは，

D r e a m w e a v e r

のピヘイピア機能を使うことで自動的に

J a v a S c r i p t

のコードが記述されるので，複雑なスクリプ卜を直接作りこむ必要がない 但

L

，メニュー最下部 の折りたたみメニューに関しては，ピヘイピア機能では実現できないため，今回のベージ内容に合 わせて

J a v a S c r i p t

コードを直接入力して作成している

4.2 Flash

を用いた

Web

ベージの作成

F l a s h

を用いたリッチで動的なコンテンツを確認するために

W e b

ベージの作成を行った内容は，

既存の工学部サイトにあるコンテンツの一部を利用している 図 10は1 作成した

F l a s h

を

F l a s h P l a y e r

で再生したものである 作成したページでは，出来るだけ動きのある表示にするために，フ

レーム

I I l

jに指定した画像とテキストからなるムーピークリップにそーンヨントウィーンで移動 変 形の処理を設定している また，

A c t i o n S c r i p t

のボタンアクンヨンを用いて，マウスでクリックす ることでテキス卜が動的に表示する簡単なスクりプト処理を行っている図

1 1

は

F l a s h

の出カ形式 である

S W F

ファイルを貼り付けた

H T M L

文によるブラウザでの表示である 尚，

F l a s h P l a y e r

やブラ ウザを利用することなく単独で再生(表示)可能な実行形式であるプロジェクタで出力することも できる

電 気竃平

. . . . n u  

伺 .. 

. ・ ・ 阿 @ ・ ・ ' ・

‘...，，~..'.静‘ ...u..._.. ，

  . .

・ ・ ・ ・ ・

^r

・ ・ ・ ・ 吋 リ 省

^ou...

・ . . . ・( . . ; : . " t . ・

a釦E

・ ・ ・ 開 " ・ ・ ・ ・

^r

・・ で ・ . . . . . .

A..tl";:."f'時

"・ _{. '  . . .} " _{.   ・} 的 ・ _い 電 _噂 吋 _{れ 奪} . _男 ・ ・ . _. ， . _{" .}

z

_' ・ _" ・ . . . . ・ ・. . . . 刷   .

^{/t......，...;:."f.時}

"  .  . . . . . . ・ . . . . . . . . . . 札 . ‑ " . . ・  ， . . 断 . " . .

^u

・ ・ ・ . ・ . ・ . ・ ・・

，，，・ e・...~

・ ・ ・ ・ . ・・ "

N

. . . ・ t

4

租 陶 . ; .

4""

， 広 . ' 併 .

1"

.

'時

t u u . . " ' t  

. . .

. . . . ' i ‑ " 

^z."f "" 

岡 山

F l a s hP l a y c r

での表示

山 田町一『 叩

;l' 

o . . ^{. ，}

^{o.，・岨 凪}

^{. .} e.>;" . ̲ c

込

… < . .   . 

図11 プラウザでの表示

4

・

・ 風 ， . . . ， . . ，

^.'1時

出 品

.

.

.

 

留学生センタ

‑Web

ページに対する入力データの取り込み

日本語教育の自習教材としていくつかの Flashで作成された 練習問題の一部には音声が使われておりクライアントのブラウザからキー 4.3 

留学生センターの Webサイトには，

練習問題ページがある.

レッスン毎に一覧表示され印刷も可能である.しかし，

入力で解答することができる解答結果は，

そこ サイト側では知ることができない どの程度利用されどのように解答がなされているのかは，

で，この既成のFlashによる解答内容をサイト側に記録するシステムの構築に取り組んだこれは，

留学生センターからの将来の利用を考慮した依頼でもある.

入力情報を取り込むには，対象の Flashページである図 12のカタカナ問題の Flash構造を理解す ActionScript Iこはデーク渡しとして CGrにデータを送る機能(メソッ また，

ることカミらま台まっ

f

こ.

当然使われている ActionScriptの記述の中に，入力された一連のデータ ド)が存在する.そこで，

更に，Webサーバ側では，

と結果が確定した時点で，送り出しのための処理を追加することにした.

送られて来るデータを受けるための CGrをPerlで作成し，データに日時情報を追加して書き出して いる.この受け渡しのデータは，表計算やデータベースでの集計処理に利用可能な汎用性のある CSV

ブラウザで確認することが この CSV形式で書き出した記録ファイルへのアクセスは，

形式とした

全て確認用 Webサーパにて行っている

一 一 一 一 一‑‑‑.

0・

. a

.

̲

:>

‑

!I.!l

‑

t:.;

‑

...

‑

嵐祖 @

‑

心.

・ .

^{l'̲t.l.1S  ~幽.}

4盈"‑ ・垣... 

必駒山 ~.n "'‑刑制

̲

_{r i}

.

_W

.

_̲

咽

₌  ^H銅.

Iー..・一

‑ d

晶 ̲ .

t

1 i 5 ! ‑ I

^占

...kIL w • vw " ，凶......旬"....。n Tτ，，.， . 瓜"-

】"ンワ Tラ，ヤ tマ'パ，バ"ハ、 1ナ"タ"ザ ψ ，ガ~11 7'. 

"  ‑ リ ミピピt:: ，テ~'f γ.:，ユ，ギキ，aイ， 

'量 mルLユ4ふ.7ブフヨヅツ:ズ正:ヌ"タ7ヲウυ z  レ ， 'ペ屯ベ，ヘ、ネデテぜ¹芭Eザ ヲ r .

"  ヲロ"壬Eポa蔀席本Jド ト ゾνゴコz看g

。

日目~=

Wヌ I"‑"醐

後負・w a~ 垣卵胸.

. ， 

山町田眠~...~...叫

0‑。 弓植を"・一山 G(." f，j・，

今回は試用であるため，

，). "j ， 1:.1l 

一一一一一一‑‑‑'凪旦旦

4踊"'‑幽... 

•

尚， 可能である(図 13). 

叫 町 田 一 司 叫

o e .!I.HO!JJ"草作風^'"

司 一 一

Katakana Dictationかいてみよう

﹂

四尋司る

占崎健色ム .... 血J.必""" J.鋪.，..

同 国 間F町田仁三二二二二コ

同Z石函函亘

Z竺主主亘.‑ヱ

問題と解答，解答結果一覧表示)

盈M川川lI!I'Il九附川帥m… 町 吋山 川 川e u刷，.'.. の伽'-l~山山山削川山'"ω“..川目旧川 y

トップページ，

カタカナ自習問題(左から，

図 12

‑ J  

》イル匂 鍾集@ 察当医'" .気にληf(Y ツール<D_....1~1ω

。臨・ 。 B 鴎~jJ輔 和拠品。 ~ S・尋問 υ 11.3

"。叫山

1 .

Ti..  ' 

2 0 0

肘

1 ‑ 1 0 " '

， ，時市

5 : 0

制

' : 1

市'.Ruoto.d"怜en' .刷‑隠1.

. 0

以，.Tod..' 

2 

目叩

0

1/

1 / 0 1 5

^，N...' .iz剖ω仏.働

t

ロ

z

出ロ悶幻

l U :

!

! = 2 = :

昨じ拡:目似

l

目昨拡;仁:

l 口 t 1

叫幻

: 1 1 l 日 μ

^山

; u ; 2 ; 山 : k

川

;

ば

f !

虫

: E l

:

2

幻以::悶出

z

^{詑幻，"じ:じ:}

^冨罰毘冨 E:  l

悶:=に以:=出:目

l : 1 21Mil l i  l : : :  :    1 : 2  2 : : : : 1 2 1  1  :    : : i   1  : 1 t : : :   1  : : 1  1 2 2  1    l  : : !  ! 

，む

: l  t z : l i i : : : i l t i t i ; !

日

i ; t l : : 2 : l Z : : : : :

摺 膿

l i t ; ; ? : ?

な

J J i l l { J 1 i J l i M U Y I : m: ; : : ? ? L i ! γ

，

MJ12 日 : : : L 1 ; ! 1 a z : : l u r: 

t z : l i l : : = i 1 1 1 1 1 : l i l i 2 2 1 : : 2 : 1 2 : = : : i E 思 E l i 1 1 : : : 1 2 2 1 1 J i l l 1 1 1 1 : : : : ; : :

川

: : ! ; 1 2 1 1 ; :

却

: : ; l t : : : 2 1 1 1 : : i

以上!

l : : :  

.インタ』拘ト

プラウザによる記録ファイノレの内容確認

岨 ぺ →岬 日 之 時出

 

一

_{図 13}

まとめ

本研修では，

5 

CSSや JavaScriptに加えインタラクティブで動的な Webサイトの作成に不可欠な 学習内容を確認するための Webベ AdobeのFlashを習得することを主な目的として学習を行った

ージ作成には，高機能な Webオーサリングツーノレである AdobeのDreamweaverを用いた.特に Flash クライアントから Flashの ActionScriptを利用して，サーバの Perlによる CGrへのデータ では，

また， Webベージのデザインを自由にかつ柔軟に構成することがで クライアントサイドスクリプトである ]avaScript，そしてリッチコンテ 送りを確認するととができた.

きる CSSでの作り込みや，

ンツ作成のFlashなどの機能を用いたインタラクティブで動的なWebページを作成する技術を学習 したことにより，研修者のプロジェクト派遣業務である工学部等HPの運用に必要な作成技術や，既 存 Webページの見栄えを良くすることなどへの高機能な要望に対応で、きる技術が習得できた 尚， Webページやスクリプト等は，より実践的な内容での作成を心掛けたが， ]avaScriptや Flash，特 にActionScriptなどのスクリプト関連では，機能が豊富なこともあり完全に内容を把握するには更 なる学習が必要である

6

研修日誌

本研修の実施日程を表 1に示寸.

表I 研修日誌

日時 場 所 研修内容

日/3(金)15;OO~16;30 総合棟8F0810室 研修内容の打ち合わせ

自/27(月 )14;OO~15;OO 総合棟8F0810室 Flash/CSS/ ]avaScript関連の学習 8/29 (水)14;OO~16;OO 総合棟8F0810室 Flash/CSS/ ]avaScript関連の学習 9/12(水)10;OO~ll;30 技術部研修室 Dreamweaver/Flash/CSS関連の学習 9/21(金)10;OO~ 1l :30 総合棟8F0810室 Flash ActionScript関連の学習 10/12 (金)15;OO~17;OO 技術部研修室 Flash ActionScript/CGI関連の学習

10/19(金 )15;OO~16;30 技術部研修室 Flash ActionScript/CGI関連の学習と Webベージ作成 11/30 (金 )15;OO~16;30 技術部研修室 Flash関連の学習と Webベージ作成

12/17(金)10;OO~II;30 技術部研修室 Flash関連の学習と Webベージ作成/確認 1/18 (金) 15;OO~16;30 技術部研修室 Flash関連の学習と Webベージ作成/確認 2/21(木 )15;OO~16;30 技術部研修室 Flash/CSS/]avaScriptまとめ

3/14 (金)15;OO~16;30 技術部研修室 研修内容のまとめと確認

参考文献

[)白井治彦篠競水野広治，技術部活動報告集，福井大学工学部技術部， pp.1l‑14， 2007  2)留学生センター自習用教材， http://ryugaku.isc.fukui‑u.ac.jp/kyoiku/jishu.html  3)八 木 崇 晶 佐 藤 智 弘 栗 原 圭 吾 関 洋 輔 ， Flash Creative Workshop，ソフトパンク， 2007  4)金城俊哉， Dreamweaver8パーフェクトマスター，秀和Iシステム， 2006 

5)  ITフロンティア， Flash ActionScript逆 引 き 大 全 550の極意，秀和システム， 2006  6)大 藤 幹 半 場 方 人 ， 詳 細HTML晶CSS&]avaScript辞典，秀和システム， 2007