実験１６　マルチメディア

目的

計算機通信網（インターネット等）を用いて，画像や文字等が混在したマルチメディアデータを世界中の人々と共有できるようになっている．現在，そのような目的で多く使われているWWW（World Wide Web）について実験する．その仕組みを理解するために，WWWの通信規約（プロトコル）であるＨＴＴＰに基づいたデータ取得と，その記述言語ＨＴＭＬ(Hyper Text Markup Language)を用いたホームページ作成を行う．また，Webページのインタラクティブ性，ユーザビリティを向上できる（逆効果になる場合もあり．）スクリプト言語JavaScriptに触れてみる．

註：この手引きを読んでいて，知らない単語を見つけた場合は用語集で調べよう．

■e-Words　http://e-words.jp/

■アスキーデジタル用語辞典　http://yougo.ascii24.com/

■Wikipedia　http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8

なお，この手引きには，HTMLやJavaScriptの書き方などは書かれていない．参考となるWebページや検索エンジンなどを使って，各自，自力でHTMLおよびJavaScriptの書き方を習得すること．

手順

Webデータの取得

ホームページはどのようなデータフォーマットになっているのだろう？

このことを確認するために，まず，現在のこのページのソースを見てみよう．Internet Explorerを使用している場合は，プルダウンメニューの[表示]→[ソース]で，このページのソースファイル（HyperText Markup Language (HTML)ファイル）を見ることができる．<>で囲まれたタグと呼ばれる修飾子を用いて文章を構造化していることがわかる．

テキストエディタによるWebページの作成

テキストエディタ「サクラエディタ」（[スタート]→[すべてのプログラム]→[ツール]）を使用して，先ほど見たようなHTMLを直接用いたWebページの記述を行う．

HTMLとタグ

Webページが内部的にどうなっているのかを理解するために，テキストエディタ（ここでは，SpaceEditor）で直接HTML記述を行いWebページ作成を行う．HTMLドキュメント内では，かぎ括弧<>で囲まれたプレーンASCIIテキストの命令タグを利用して，書式設定が行われる．書式設定には，通常，始まりのタグ<...>と終りのタグ</...>が対で使われる．例えば，ある行を見出しとして指定する場合は，見出しの文字列を，その書式の始まりを示すタグと終りを示すタグで囲む．

<H3>Hello World Wide Web!</H3>

上の例の<H3>タグは，レベル3の見出し(見出し3)として扱われる文字列の始まりを示し，</H3>タグは，見出し3として扱われる文字列の終りを示している．

実際に，SpaceEditorを立ち上げ，以下のHTMLを打ち込んで，Zドライブの"www"というフォルダの中に保存してみよう． "www"フォルダが存在しない場合には作成すること．また，ファイルの保存名は"index.html"とすること．

<html>
　<head>
　　<title> ページのタイトルを書く．. </title>
　</head>
　<body>
　　ここに内容を書く．
　</body>
</html>

正しく保存されていれば，以下のURLでホームページを参照できる．”~"の後ろにはアカウント名を入力する．

http://www.edu.ics.kagoshima-u.ac.jp/~sc10xxxx

修正を行ったはずなのに，Webブラウザで見ても正しく修正されていない場合には，ブラウザの[表示]→[最新の情報に更新]というメニューを実行してみる．

以下の情報工学科にあるWebページや，参考サイトを参照して，Webページを作成してみよう．

http://www.ics.kagoshima-u.ac.jp/edu/katuyoukiso/www/

作成するWebページは，このページの最後の「課題」の欄に書かれている情報を必ず含むようにすること．記入の順序，方法，形式，レイアウトは自由であるが，日本語と英語で書くこと．また，テキストエディタを用い，ホームページオーサリングソフト（FrontPageやWordなど）は用いないこと．複数の画像やアニメーションを追加したり，複数のHTMLファイルで構成しても構わない．独創的なホームページほど高得点となる．

顔画像の取得

顔写真画像を作成するには， [スタート]→[マイコンピュータ]→[USB-CCD30S]をダブルクリックしてカメラを起動する．保存するデータの拡張子は，[ .jpg ]を使うこと．画像を表示するタグは<img src="... >である(詳細は参考サイトを参照)．

HTMLチェッカ

下記のWebページを利用して，作成したWebページを採点してみよう．URLの指定では採点できないので，ソースのカットアンドペースト（DATA）またはファイルの送信（FILE）を試してみること．採点結果を参考に，修正できる箇所を修正してみよう．FrontPageやWordなどのソフトで作成したWebページを採点するとどのような結果になるだろうか？

http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html

参考

インターネットには，HTML記述の参考になるサイトが無数に存在する．その一部を以下に示すので，参考にしてみよう．

■ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/htminfo.html

■とほほのWWW入門
http://tohoho.wakusei.ne.jp/wwwbeg.htm

■やさしいホームページ入門
http://www.ink.or.jp/~bigblock/index.html 

また，Internet ExplorerなどのWebブラウザには，HTMLファイルのソースを表示する機能を持つ([表示]メニュー→[ソース])．この機能を使って，他人のWebサイトのソースも参考にしてみよう．ソースのカットアンドペーストもできるが，ページ全体の丸写しは避けること．

記号，背景などで画像ファイルを利用したい場合，ペイントなどのプログラムで作成するか，無償で提供されている素材集を利用してもよい（googleなどで「フリー」「素材集」を検索）．

JavaScript

JavaScript とは，Netscape社 と Sun社 が共同開発したオブジェクト指向スクリプト言語で，Microsoft製品内では JScript とか アクティブスクリプトと呼ばれることもある．スクリプト言語とは，機械語への変換作業（コンパイル）を省略して簡単に実行できるプログラミング言語であり，手軽に実行できるため小規模プログラムの作成に向いている．JavaScriptは，静的な表現を主体とするWebページに，動きや対話性を付加することを目的として開発された．JavaScriptとJava言語とは，名称と記述こそ似ているものの，全く異なる言語である．最近では，JavaScriptのブラウザ固有の部分を除いた言語仕様が，ECMAScriptとして標準化され，Internet Explorer 6やNetscape Navigator 6などのブラウザがECMAScript準拠となっている．

以下のJavaScriptを，上記の実験で作成したWebページの<body>と</body>の間に埋め込んでみよう．

<script type="text/javascript">
<!--
mabilis = 160; //速さの設定（数が小さいほど早い）
bilang = 87; //表示回数（表示される文字の総数）
numero = 0;
lugar = 0;
ano = 0;
      
function magsalita(){
        message = "．．．はじめてのJavaScript．．．★";
        kahaba = message.length+1;
        if( numero<=bilang ){
                status = message.substring(0,lugar);
      	        lugar = ( lugar>kahaba )?0:lugar+1;
                numero++;
                clearTimeout(ano);
                ano = setTimeout('magsalita()',mabilis);
        }
        else if( numero>bilang )defaultstatus=" ";
}
window.onload = magsalita;
// -->
</script>

以下のWebページなどを参考に，JavaScriptのプログラムを作成し，自分のホームページに埋め込んでみよう．

■初心者に分かりやすい JavaScript サンプル
http://external-file.com/ja/beginner_javascript.html

■Java Script
http://www.scollabo.com/banban/java/index.html

■独学JavaScript
http://www.ueda.info.waseda.ac.jp/~gaku/js/

■一撃必殺JavaScript日本語リファレンス
http://www.openspc2.org/JavaScript/

■JavaScript例文辞典
http://www.openspc2.org/reibun/javascript/

課題　- Exercises

上記の実験手順に従って，以下の条件を満たす各自のホームページを日本語と英語で作成せよ．　作成したホームページが レポートとなる．なお，評価が終了する（テスト期間開始日に評価予定）まで，ホームページを消さないこと．

Make your own homepage satisfying following conditions. Web pages you made become your report. Don't delete them until the end of examination week in order to be evaluated.

レポート採点基準

全体の構成・体裁 30
英語 10
JavaScript 20
自己紹介 10
リンク・構成 10
画像 10
次世代Webについての考察 10
合計 100