コンピュータネットワーク基礎
2003.6.13

Back to index page

1年生のときに使用した　木村　広　著　「Linuxによる情報リテラシー」を持っ てくることをお薦めします．

  1. 本日の作業内容



  2. HTML

    1年生のときにHTMLの基本については学習しました．一番ベー シックな構成は次のようなものです．

    ページの内容補足説明
    <html>HTMLファイル開始の宣言
    <head>ヘッダ部分開始の宣言
    <title>Test page</title>上部枠に現れるペー ジタイトル
    </head>ヘッダ部分終了の宣言
    <body>本文の開始宣言
    Test index page ページの内容
    </body>本文の終了宣言
    </html>HTMLファイルの終了宣言

    本文である<body></body>で囲まれた範囲に様々なタグを用意する ことにより，表や箇条書き，行揃えなどが利用でき，画像を含むページも作った りすることが可能になります．教科書の11.5にも多少の説明がありますが，それらタグについて，もう一度学習するには何週かの作業が必要になりますので，今回はヘッダ部分 に置くJavaScriptやボディに置くJavaScriptで遊んでみることにしましょう．自分で修正を加えて行くと， 面白い効果が得られます．JavaScriptはHTMLファイルに埋め込んでおけば動作し ますが，教科書の13.4節に簡単に紹介されているJavaAppletは別に実行ファイル が用意してあり，それをブラウザがクライアントにダウンロードして実行する点 が異なっています．

    なお，この授業で紹介するスクリプトは，古籏一浩， 三津原敏著，「決定版！ホームページサンプルスクリプト大全集」技術評論社， 1999，ISBN4-7741-0853-7から引用しています．作者の方々に有意義なスクリプ トの公開と再利用を可能にしていただき大変感謝しております．

    スクリプトを動作させる元のHTMLファイルは前回用意した public_html ディレクトリに置きます．これにより，自分で作成したスクリプトを含む HTMLファイルへ http://localhost/~b01**/hoge.html のようにして アクセスします．

    • ステータスバーへの表示

      ブラウザの外枠のうち，下辺を「ステータスバー」と言います．ここには，種々 の情報が表示されていますが，JavaScriptにより，自分の好きな情報を表示させ ることもできます．次の例を試してみてください．また，ソースをコピーするか， 右クリックでダウンロードして自分で修正を加えて試してみてください．

      マウスポインタが文字上に行くとメッセージを表示

      任意の文字をステータスバーにスクロール表示

      HTMLファイルに修正を加えるには，リンクを右クリックして出てくるメニューで 適当な場所 (public_html ディレクトリ) に保存して，エディ タにより修正を加えて保存します．ブラウザで見れば修正が反映しているはずで す．修正を加えるたびに，ブラウザで「再読み込み」することを忘れないで下さ い．

    • 背景色

      色の名前やRGB16進コードにより，ページの文字や背景を変更することはHTMLの 基本です．ここで紹介されている例は，マウス操作により動的に背景色を変える 例です．

      マウスが重なると背景色を変更

      色の名前が英語で指定してあるものと，16進で指定してあるものの両方がありま す．色の名前はなかなか英語では覚えていないものなので，自分でRGB指定する 方が楽です．

      RGBとはRed，Green，Blueの光の三原色のことで，それぞれの色の強度を256階調で 制御することにより，256×256×256で約1677万色の色を表現することが可能です．256階調を二 桁の数で表せるように16進数が使われます．表１のような感じで分かるでしょう か．

      表1　RGBコードの16進数と10進数の関係

      16進10進
      000
      011
      0F15
      1016
      1117
      7F127
      80128
      FE254
      FF255

      実際の色は二桁の16進数を3色，すなわち3回記述して全部で6桁になります．ま た，できる色は，絵の具を混ぜて色を作った経験があれば分かるように，おおよ そ表2のようになります．

      表2　中間色の構成

      元の色1元の色2できる色
      赤緑黄
      赤青紫
      緑青青緑

    • へこむボタン

      ただのテキストのみのページでは遊び心が無いために，多くの人に見てもらえな かったり，繰り返し見てもらえないのではないかと言う不安に駆られる人が結構 いるようです．そのため，リンクを画像にし，さらにマウスにより動的に変化さ せて中位を引く例が多いようです．ページの表示に時間がかかるので私は好きで はありませんが，これは次のような例で実現されています．

      マウスが重なるとボタンがへこむ

    • 買いもの金額

      オンラインショップで良くあるのが，リストの中から購入希望商品にチェックを 入れて，合計金額を提示するものです．ここで紹介されている例は，その基本形 です．

      買いもの金額計算

    • 棒グラフを表示

      入力欄に数字を入れると，別のウィンドウに棒グラフを表示します．

      棒グラフ表示

    • スカッシュ(ゲーム)

      ここからはゲーム編です．授業の中でゲームができるなんて素晴しい大学ですね． さて，ゲームではスクリプトの量も増えますし，画像なども使用するのでwebサー バ上には置きません．共有ディレクトリに置いておきますので，以前に学習した コピーコマンドで自分の環境に移してから試してみてください．このスカッシュ はスピードを変える位なら自分で簡単に修正できますので，試してみてください． また，遊び方については付属のテキストファイルを参照してください．

      $ less /virtual/home/tmp/6-13/scash/scash.txt

      のようにすると，ダウンロードの前に遊び方や必要なファイルを確認できます． 以後のゲームについても，ディレクトリの名前とファイル名が違うだけで同じ様 に説明ファイルを参照できます．

      コピーについては「ファイルマネージャー」を使う方式と，コマンドでオプショ ンを活用する方法と2種類ありますが，好きな方を利用してください．

      置き場所

      /virtual/home/tmp/6-13/scash/

    • ブロック崩し(ゲーム)

      置き場所

      /virtual/home/tmp/6-13/block/

    • インベーダー(ゲーム)

      置き場所

      /virtual/home/tmp/6-13/mad/

    • シューティング(ゲーム)

      置き場所

      /virtual/home/tmp/6-13/xshoot/

  3. 小テスト

    授業の終了20分前くらいにAクラスと Bクラス別の小テストを実施します．アナウ ンスに注意してください．また，提出は電子メールにより行いますので，メール の送信準備は忘れないでいて下さい．

  4. 宿題

    授業の終りに宿題(AクラスとBクラス)の説明をしますので，アナウンスに注意してください．

目次ページへ戻る