13~~ t y p e ~ 'text / javas(ニ ript' )

(1)

1 はじめに

工学部等の公式

HP

管理・運用システムのための

インタラクティブな

Web

ページ作成技術の習得

第三技術室水野広治，篠

競，白井治彦

本研修の研修者は，プロジェクト派遣として工学部ホームページ (HP)等の維持・管理に関わる業務に携わっている.関係する複数の公式サイトにおける Webベージの作成や更新を継続的に遂行するためにグ、ループ(管理・運用グループ)を作り，各部局・センターからの依頼に対応しているーそのため，作成や更新など維持するために必要な管理・運用に関する知識や構築技術が不可欠である. 18年度に行った専門研修「工学部等の公式 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 カスケーディング・スタイノレ・シート)が利用されている.

(2)

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

，

.

。酷 -

D

I

!

H

司会

.

リ'"守 " これはテストです. 4量ベータ糟 . イントネ併図1HTIILによる表示 <style type=・text/css") h1{ font-size: mediu園。 font-style: i talic ..idth: 200px padding:IOp災. color得ffffff; background-color:#ffOOOO; } </style> <hl>これはテストですりhI> 図2 CSSの記述 "イ岬畠 '" .町田酬乙入醐小野 It

。

臨

-

0

13~~ 3

・

_'_J_:_._r 今 . 開珂関岡田・・ tlペー3畑農 .インター.，ト図 3 CSSによる表示 CSSにより Webページのデザインを変えるには， HTML文書に専用の記述方法で必要な設定を適用させる必要がある.具体的には，セレクタのプロパティに対し値を設定することであるが，このセレクタとは， HTMLのタグや独自に指定できる ID，クラスなどである.そのセレクタの属性などを示すプロパティに必要な値を指定することで， HTML文書に記述したセレクタの要素が指定された値 (内容)で表示されることになる. 例えば， HTMLの見出しタグである rhlJの場合ブラウザでは図 l のような表示となる.この rhlJタグであるセレクタの属性を CSSにより図 2の記述で設定を適用させると図 3の表示と変化する.

3

JavaScript

と

Flash ]avaScriptは，クライアント側で処理されるクライアントサイドスクリプトのスクリプト言語で， Webページを動的に変化させたり CGI(CommonGatcway Interface)に近い処理を行うことができる.

元は Netscape干上が開発したものを後に Sun社と共同で]avaScriptとしたもので，他には，これを

ベースにして標準規絡として言語仕様を規定した ECMAScript(EuropeanComputer Manufacturers Association Script)と，互換スクリプト言語として Microsoft社が開発した ]scriptがある.尚，

]avaScriptは Javaと構文が似ているが基本的に別であるー JavaScriptの記述は， HTML文書内に JavaScriptのためのタグを指定することで行う.例えば，ディスプレイの幅と甫iさを表示させるための JavaScriptをHTML文書内に図 4のように記述するとブラウザで図 5のように表示させることができる.このように JavaScriptや CSSなどの様々な機能を使うことによりインタラクティブで動きのある Webベージが作成できる.そして，このような Webベージを DHTML(ダイナミック HTML)と呼んでいる. また，動画(アニメーションなど)や音声などのリッチコンテンツやインタラクティブ性の高いコンテンツの作成には Flashが利用されている Flashとは，ベクター画像とスクリプト言語の ActionScriptを組み合わせたコンテンツを作成するためのアプリケーションであるこの Flashで作成されたコンテンツは，実行形式での再生が可能であるが，ブラウザのプラグインでも再生することができるため一一般的には Web用のリッチコンテンツの作成として利用されている Flashを用いたリッチコンテンツの作成は，基本的にタイムラインを使った映像編集と同じで，レイヤーとフレームに

<!- -do印刷nt.writeCディスプレイの幅，，口een川dth，'"<br)勺。 document.write("ディスプレイの高さ '"， screen. height): 11--) </script> 図 4 ]avaScriptの記述ファイル@ 寝藁(正〉葺示t珍書官

窃

る

震

.

0 .

，

リン担

，

.

'巴ディスプレイの幅;1 28日ディスプレイ町高さ;1024 ザ @インターネットー詑図5 ]avaScript実行結果

(3)

ベクター画像などの動きを指定し，マウスやキ一入力で制御するためのスクリプトを記述することで，タイムラインなどに対する変化を指示する.このタイムラインのフレームに配置する要素としてシンボノレがあるが，画像，図形，テキストなど動きに関係する要素はシンボル化することで，再利用が可能な要素となる.シンボルには，ムーピークリップ，グラフィック，ボタンの種類がある. 中でも特にムーピークリップが多く使われている.アニメーションとしての利用や，ムーピークリップ自体をさらにタイムラインとして階層化することも可能である. また，ボタンは，ボタンを作るためのシンボノレで，カーソノレやクリックの状態に必要なフレームが予め用意されている.さらに，フレーム問での動きを自動的に生成するための機能としてトウィーンがあるそのひとつモーショントウィーンは，移動，変形，回転など動きのある変化や，色などのプロパティ属性の変化を始点、と終点間で自動変化させることができる.また，シンボノレ化していない異なる図形の始点と終点をつなぎモーフィングのように変形させるシェイプトクイーンがある.そして，これらのタイムラインやムーピークリップにインタラクティブ性を持たせるための 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

・

7州市川，，，刊r，γ.，... 附W検鋤穆専門院. 工学部・工学研実科由理章と目的 -理2

エー………

湾訪251t溶怨諸制定ZJ目 ? 車耐開明曹田町A -目的

震装鶴撃事懇器露

Z

2

5器綜脳聖EFg』占虫色~~..I:..Il..，T. 叫町田 +'Ii:~"-る叩…… 零事壊事房温雌盤 E2虫色『22忠告fれRF品額百蕊1f総務ヰザtJtiF =a:""，n.~t~. …R判明白肌叫刊をIIfCTý^ 岡山町図6 HTML文書による表示

(4)

明

白

山

一

河

叫

。

".0 ..)...弘綱同 e ~ C 3

-

申

『

司

』

帽

崎

占

-

同

嗣

-

・

-

・

咽

・

l

h

a

」

園周

司巴... 車道臨

一一一一

… ーー

…一

Z血一山・司瞬

一…ー

.

間

.

一一一

.

一

時

一一一

一

…

一

"

一

22LtZE出zg苫百三訟おE

，

;

-

ミ慾宗訟誌苧警

志有面協定固7 CSSによる表示1 固 8 CSSによる表示2 包囲 9 CSS/JavaScriptによる表示クリックすることでドロップメニュー形式のメニューを表示するジャンプメニューである吏に，その下のボタンは，マウスカーソルを重ねると図のようにメニューがポップアップ表示するポップアップメニューであるこれらは，Dreamweaverのピヘイピア機能を使うことで自動的に JavaScript のコードが記述されるので，複雑なスクリプ卜を直接作りこむ必要がない但L，メニュー最下部の折りたたみメニューに関しては，ピヘイピア機能では実現できないため，今回のベージ内容に合わせてJavaScriptコードを直接入力して作成している 4.2 Flashを用いたWebベージの作成 Flashを用いたリッチで動的なコンテンツを確認するためにWebベージの作成を行った内容は，既存の工学部サイトにあるコンテンツの一部を利用している図 10は1 作成した Flashを Flash Playerで再生したものである作成したページでは，出来るだけ動きのある表示にするために，フレーム

I

Iljに指定した画像とテキストからなるムーピークリップにそーンヨントウィーンで移動変形の処理を設定しているまた，ActionScriptのボタンアクンヨンを用いて，マウスでクリックすることでテキス卜が動的に表示する簡単なスクりプト処理を行っている図 11はFlashの出カ形式である SWFファイルを貼り付けた

H

T

M

L

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

.

平

.

n

u

伺 ..

.

・

阿

@

・

‘ '

・

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

.

・

r

・

吋

リ

省

ou...

・

.

・

.

(

;

:

.

"

t

.

・

a釦E

・

開

"

・

r

・

“

・

で

・

.

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

"

_._'

“

_.

・

_._.

"

_._・

的

・

_い

電

_噂

吋

_れ

.

_奪_男

・

.

_.

，

.

_"_.z_'

・

_"

・

.

・

.

・

.

刷

.

_/_t_._._._._._._，_._._._;_:_._"_f_._時

"

.

・

.

札

.

"

.

・

，

.

“

u

・

.

・

.

・

.

・

.

・

"

・

租

.

，，，・ e・...~ N

・

4

陶

.

，

広

'

併

.

-

.

断

"

.

t

;

4""1"'時 tuu.."'t

.

'

‘

i

-

"

z."f "" 岡山 FlashPlaycrでの表示山田町一『叩 ‘;l'

o

.

，

o.，・岨凪..e.>;"._c込

…

<

.

図11 プラウザでの表示 4

・

風，

.

，

.

，

.'1時出品

.

(5)

留学生センタ-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 "'-刑制

_

.

咽

H銅. r iW_ = Iー..・一 - d

晶

_

.

t1i5!- I 占 ...kIL w • vw " ，凶...旬"....。n Tτ，，.， . 瓜 "-】"ンワ Tラ，ヤ tマ'パ，バ"ハ、 1ナ"タ"ザ ψ ，ガ~117'. " - リミピピt::，テ~'fγ.:，ユ，ギキ，aイ， '量 mルLユ4ふ.7ブフヨヅツ:ズ正:ヌ"タ7ヲウυ z レ， 'ペ屯ベ，ヘ、ネデテぜ1芭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

肘

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

2

1 l

:

!

，む

:

l

t

z

:

l

i

:

i

l

t

i

t

i

;

!

日

i

;

t

l

:

2 :

l

Z

:

摺膿

l

i

t

;

?

:

?

な

J

i

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 :

l

i

l

i

2

1 :

:

2 :

1

2 :

=

:

i

E

思

E

l

i

1

1 :

:

1

2

1

1 J

i

l

1

1 :

:

;

:

川

:

!

;

1

2

1

1 ;

:

却

:

;

l

t

:

2

1

1 :

:

i

以上!

l

:

.インタ』拘トプラウザによる記録ファイノレの内容確認

‘

岨ぺ →岬日之時出

一

_図 ₁₃

まとめ

本研修では，

5

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

ージ作成には，高機能な Webオーサリングツーノレである AdobeのDreamweaverを用いた.特に Flash

クライアントから Flashの ActionScriptを利用して，サーバの Perlによる CGrへのデータでは，

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

(6)

ンツ作成の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