第12週: 動きのあるページ

先週はホームページに画像を入れましたが,さらに動きのある画像や音を入れ てみましょう.


12. 1 音声ファイル
12. 2 動画ファイル
12. 3 プラグイン
12. 4 SSI
12. 5 CGI
12. 6 アプレット
12. 7 宿題

12.1 音声ファイル

Web で主に使われる音声データのファイル形式は,AU 形式と呼ばれています. 特別教室のコンピュータでは,付属のマイクを使って,この形式の音声データ を作ることができます.

  1. 端末ウィンドウで次のように入力します.
    % audiotool &
    
    すると,次のようなウィンドウが現れます.
  2. 「音量」のところを右ボタンでドラッグし,「再生...」を選択すると,次の ようなウィンドウが現れます.
    同じように「音量」のところを右ボタンでドラッグし,「録音...」を選択す ると,次のようなウィンドウが現れます.
  3. 再生ウィンドウの「ヘッドホン」と,録音ウィンドウの「マイクロフォン」が 選択されている(少しへこんで見える)ことを確認してください.そうなってい なければ,クリックして選択します.
  4. 最初のウィンドウの「REC」をマウスでクリックすると,録音が始まり ます.もう一度クリックすると録音を終了します.
  5. 録音したデータは「PLAY」をクリックすると再生できます.
  6. データをファイルへ保存するには,「ファイル」を右ボタンでドラッグし, 「保存(指定)...」を選択します.
    すると,ファイル名を指定するウィンドウが現れるので,保存するファイル名 を入力します.
後で使いますので,「こんにちは」という声を録音したファイルを ~/public_html に作っておきましょう.

12.2 動画ファイル

動く絵を見せたい場合,原理的には,少しずつ変化する静止画を順に見せてい けば,動いているように見えます.しかし,静止画のファイルをつなげただけ では巨大なデータになってしまいます.そこで,「少しずつ変化する」という 性質を利用して圧縮を行います.圧縮方法によっていろいろなファイル形式が あります.

音声ファイルや動画ファイルを全部転送してから再生するやり方は,データ量 が多くなると,再生開始までの待ち時間が長くなってしまいます.そこで,デー タの転送と再生を同時に行うストリーミング (streaming)という方法もあります.Real Networks 社の Real Audio, Real Video などがそうです.

CNS で動画ファイルを作るには,Macintosh, Indy, O2 などを使 います.詳しくは CNS コンサルタントに相談してください.

12.3 プラグイン

Netscape などの web ブラウザは,URI で示されたデータを取り込んで表示し ます.データ形式は HTML,テキスト,GIF,JPEG など,いろいろあります. しかし,世の中のすべてのデータ形式を処理しようとすると,巨大なブラウザ になってしまいます.また,音声や動画のデータ形式は,次々と新しい規格が 発表されるため,それに対応するのも大変です.そこで,いくつかの web ブ ラウザでは,プラグイン(plug-in)というソフトウェ アを追加することによって,ブラウザの機能を拡張し,新しいデータ形式に対 応できるようになっています.

Netscape では,「ヘルプ」メニューの「About Plug-ins」をクリック すると,導入済みのプラグインの一覧が表示されます.特別教室の netscape には,Real Audio 用のプラグインが入っています.

12.4 SSI

通常の web ページは,用意した文章やデータをそのまま表示するだけです. それに対して,web ページを誰かが読むたびに違った内容を表示することもで きます.

Web サーバがページを送信するときに,何らかの情報を挿入する方式を SSI (Server Side Include)と呼びます.SSI を利用する ためには,ファイル名の最後が .shtml で終わるようにします.

SSI の例

12.5 CGI

ソフトウェアの一番重要な部分は,コンピュータがどのように動作するかの手 順を書いたプログラム(program)です.Web ページ の中に文章の代わりにプログラムを置いておくと,その動作結果を表示するの で,動作するたびに違った内容にすることができます.Web サーバでプログラ ムを実行し,その結果をブラウザに送信する方式をCGI(Common Gateway Interface)と呼びます.

注意: ここでは, あらかじめ用意されたプログラムを使って CGI の練習をします.不適切な CGI プログラムは,外部からの侵入口になったり,web サーバが停止する原因 になったりして大変危険ですので,自分で CGI プロ グラムを書くときは次のことを必ず守ってください.

CGI プログラムを呼び出すには,A 要素,IMG 要素,FORM 要素を使 う方法と,SSI を使う方法があります.ここでは,SSI を使って,そのページ が何回アクセスされたかを示す,アクセスカウンタを作ってみましょう.

  1. 何回アクセスされたかを覚えておくファイルを作ります.最初は0回なので, ファイルに 0 と書き込みます.
    % cd ~/public_html
    % echo 0 > number.txt
    %
    
    echo コマンドはその後に書いてある文字列をそ のまま結果として出力します.それをリダイレクションで number.txt というファイルに書き込みます.
    6.4 コマンドの結果をファイル に保存する
  2. このファイルのアクセス権を,誰でも書けるようにします.
    注意: これは CGI プログラムではなく,単なるデータですので,書き込みを許可してもかま いません.
    % chmod go+rw number.txt
    %
    
  3. Mule で ~/public_html/counter.cgi というファイルを作り,内容 は以下のように入力します.
    #!/usr/local/bin/perl -T
    
    print "Content-type: text/html\n\n";
    
    open(LOG, "number.txt");
    chop($number = <LOG>);
    close(LOG);
    
    $number++;
    print "$number";
    
    open(LOG, "> number.txt");
    print LOG "$number\n";
    close(LOG);
    
    これが何を意味しているかは,プログラムの勉強をしないと分かりません.プ ログラムの作り方は,情報処理 Ibc,II で習います.
    上のプログ ラムは Perl で書かれていますが,残念ながら現在 SFC で Perl の授業はあ りません.
  4. このファイルを誰でも実行できるようにします.
    注意: これは CGI プログラムですから,自分以外の書き込みを禁止しておかなくてはいけま せん.通常の設定では,ファイルを作ったときにそうなっています.
    % chmod a+x counter.cgi
    %
    
  5. アクセスカウンタを埋め込むページを作成します.このページのファイル名は .shtml で終わっていなくてはなりません.ページの中には次のよう に書きます.
    あなたは <!--#exec cgi="counter.cgi" --> 人目のお客様です.
    

12.6 アプレット

SSI や CGI は web サーバがプログラムを実行して,その結果をブラウザに送 信するので,表示された内容が変化することはありません.それに対して アプレット(applet)は,サーバからブラウザへプ ログラムを送信し,ブラウザ側でプログラムを実行するので,実行結果を次々 に表示したり,対話的に実行したりすることができます.

SFC の人が作ったアプレットの例をみてみましょう.

アプレットを作るにはプログラムの知識が必要ですが,URI を指定することに よって,他の人の作ったアプレットを使わせてもらうことができます.アプレッ トを表示するには APPLET 要素を使います.
HTML4.0 で は,APPLET 要素ではなく OBJECT 要素を使います.
<APPLET CODEBASE="http://www.sfc.keio.ac.jp/~hattori/ipl1a/common/applet" 
CODE="Dancing.class" WIDTH=300 HEIGHT=45>
<PARAM NAME="title" VALUE="Keio SFC">
</APPLET>
これは,坂本俊輔さんの作品を改造したものです.
これは,坂本俊輔さんの作品を改造したものです.
APPLET 要素の開始タグには次のような属性を書 きます.

APPLET 要素の内容には,PARAM 要素を書くことができます.これは,アプレット が動作するときに利用する情報を与えるものです.どのような情報を与えるか は,アプレットによって違います.PARAM 属性に は終了タグはなく,開始タグの中に次のような属性を書きます. 上の例のアプレットでは,title という種類の情報が与えられると, その文字を,位置を少しずつ変えながら表示します.Keio SFC のと ころを別の文字に変えてみましょう.

また,アプレットで音を出すこともできます.
<APPLET CODEBASE="http://www.sfc.keio.ac.jp/~hattori/ipl1a/common/applet" 
CODE="Sound.class" WIDTH=100 HEIGHT=80>
<PARAM NAME="uri" VALUE="file:/usr/demo/SOUND/sounds/computer.au">
</APPLET>
クリックすると音が出ます.(この URI は特別教室のコンピュータだけで有効です.)
クリックすると音が出ます.(この URI は特別教室のコンピュータだけで有効です.)
PARAM 要素の VALUE 属性のところをさっき作った「こんにちは」という声のファイルの URI に書 き換えてください.

12.7 宿題

自分のホームページを完成させましょう.
目次のページへ行く