第3回　ウェブの仕組み

リンク

ハイパーテキスト

HTMLはHyperText Markup Languageの略ですが、ハイパーテキストとは何でしょうか？これは、文章を最初から順に読んでいくだけではなくて、文章の中に「リンク」（「ハイパーリンク」と言う場合もあります）があり、それをたどると関連するところへジャンプできるようにしたものです。

練習問題 03-1（☆☆☆）
  1. 参考資料でリンクの書き方を調べなさい。
  2. 自分の小学校、中学校、高校のホームページを検索し、練習問題02-4で書いた自己紹介からリンクしなさい。
    • ホームページが見つからない場合は、箇条書きに慶應大学を追加して、SFCのホームページにリンクしなさい。

他の人のサイトに無断でリンクを張るのは構わないのでしょうか？著作権法に関しては問題無いと解釈されています（下記参考資料を参照）。ただし、そのサイトにリンクに関する条件や指示が書かれている場合は、道義的にそれを尊重すべきでしょう。

参考資料

URLの指定

リンクする先はURLによって指定しますが、これはUniform Resource Locatorの略で、ウェブページの住所のようなものです。例えばSFCのホームページのURLは http://www.sfc.keio.ac.jp/ です。

典型的なURLは次の形をしています。

  • スキーム(プロトコル)は、ブラウザがどうやってページのソースを取ってくるかという方法を表しています。普通は http: ですが、ネットバンキングなど通信を暗号化する場合は https: を使います。ファイルをダブルクリックして開いた時は file: ですが、これはネットワークを使わずに自分のコンピュータに保存されているファイルを使うという意味です。
  • ホスト名は、それぞれのコンピュータに付けられた名前で、どのコンピュータからソースを取ってくるかを示しています。プロトコルが file: の場合は、自分のコンピュータからに決まっているので、ホスト名は書きません。
  • パス名は、コンピュータの中でどのファイルを取ってくるかを示しています。

スキーム(プロトコル)とホスト名については、「情報基礎２」で詳しく勉強します。

絶対URLと相対URL

URLは住所のようなものなので、世界中のウェブページの中から目的のページを探し出せるようになっていますが、その分どうしても長くなってしまいます。しかし、近所の家について話す時には「うちの２軒右の家」と言って、いちいち「神奈川県藤沢市…」と言わないように、今表示しているページのURLを基準にして「近所」のウェブページを簡単に指定できる書き方もあります。

練習問題 03-2（☆☆）
  1. ブラウザで http://itclass.sfc.keio.ac.jp/guide/index.html をアクセスしなさい。
  2. インスペクタでこのページのHTMLを表示し、「総合政策・環境情報2014年度以降入学者」のリンク先がどのように指定されているか見なさい。
  3. 「総合政策・環境情報2014年度以降入学者」のリンクをクリックし、そのページがどのようなURLなのか見なさい。

http://itclass.sfc.keio.ac.jp/guide/index.htmlのように、どこにあっても常に同じページを指すURLを「絶対URL」、new.htmlのように現在のページを基準にして他のページを指すURLを「相対URL」と呼びます。

絶対URLの利点
全世界のどのウェブページでも指し示すことができる。
リンクを書く場所によらず、同じURLになる。
相対URLの利点
短く書くことができる。
複数ページから成るウェブサイト全体を他の場所に移動する時、リンクを書き直す必要がない。

URLの書き方の規則は、次の「ファイルシステム」を勉強すればわかります。

http://itclass.sfc.keio.ac.jp/guide/index.htmlは、http://itclass.sfc.keio.ac.jp/や http://itclass.sfc.keio.ac.jp/guide/でも同じページが表示されますが、転送や省略の機能を使っているので、http://itclass.sfc.keio.ac.jp/guide/index.htmlが正式なURLです。

ファイルシステム

URLのパス名の書き方を知るには、コンピュータがファイルをどうやって管理しているかを知らないといけません。ディスクの中でファイルがどのように格納されているかということを「ファイルシステム」と呼びます。

ファイルとディレクトリ

(PPT版ダウンロード)

ファイル名には日本語の文字も使えますが、トラブルの原因になる（例えばWindowsとMacの間でファイル転送した時に正しく表示されない）ことがあります。また、ファイル名の中に空白文字が入っていると操作を間違いやすくなります。この授業では、ファイル名にはアルファベットと数字だけを使うようにしてください。

アクセス権

自分のファイルを他の人が勝手に読み書きすると困りますが、複数人で共有したい場合もあるので、ファイルごとにアクセス権を設定できます。

(PPT版ダウンロード)

普通はユーザごとに別のディレクトリを使い、他のユーザは勝手に書き込んだりできないようになっています。しかし、設定を変えれば他のユーザも書き込めるようにできます。共用領域を使って練習してみましょう。

練習問題 03-3（☆☆☆☆）
  1. エディタで適当な内容を書き、ex03-3.txtという名前で保存しなさい。
  2. Finderのメニューで【移動】→【フォルダへ移動…】を実行し、/pub/sfc/ipl/info1-freeの中身を表示しなさい。これは、共用領域の中にあるディレクトリで、誰でもファイルを作れるように設定してあります。
  3. ex03-3.txtを/pub/sfc/ipl/info1-freeに移動してみなさい。
  4. 他の人が作った同じ名前のファイルがあると移動できません（他の人のファイルに上書きする権限は無いため）。何か別の名前に変えてから移動しなさい。
  5. 隣の人からファイル名を教えてもらい、隣の人が作ったファイルをエディタで開けるかどうかやってみなさい。また、そこに何か書き足して保存しようとするとどうなるでしょうか？
  6. ファイルを右クリックして【情報を見る】を実行しなさい。
  7. ファイルの情報の一番下に「共有とアクセス権」があります。「everyone」のところが他のユーザからのアクセスを許可・禁止するところです。アクセス権は何になっているでしょうか？
  8. 隣の人に、ファイルの「everyone」のアクセス権を「読み／書き」に変更してもらい、隣の人のファイルを変更して保存できるかやってみなさい。

ファイルシステムとURLの対応

  • プロトコルが file: の場合、ファイルシステムの絶対パス名の前に file:// を付けたものが絶対URLになります。例えば /xxx/yyy.html の絶対URLは file:///xxx/yyy.html です。ホスト名を書かないのでスラッシュが3個並ぶことに注意してください。
  • プロトコルが http: の場合、ファイルシステムの絶対パス名がそのまま絶対URLのパス名部分になるとは限りません。じゃあどうなるのかと言うと、ウェブサーバの設定によるので一概には言えません。SFC-CNSの場合にどうなるかは後で説明します。
  • 相対URLは、プロトコルもホスト名も書きません。ファイルシステムの相対パス名がそのまま相対URLになります。
練習問題 03-4（☆☆☆）
  1. 練習問題02-4で書いた自己紹介introduction.htmlと同じディレクトリにlink.htmlという名前で次の内容のファイルを作りなさい。
    [html]



    リンクの練習




    [/html]

  2. body要素の中に相対URLで自己紹介へのリンクを書きなさい。
  3. ブラウザでlink.htmlを開き、リンクをクリックして自己紹介へ飛べることを確認しなさい。
  4. 同じディレクトリに、dirAという名前で新しいディレクトリを作りなさい。
  5. link.htmlをdirAの中に移動しなさい。
  6. link.htmlの相対URLを修正して、正しく飛べるようにしなさい。
  7. 自己紹介とdirAがあるディレクトリに、dirBと言う名前で新しいディレクトリを作りなさい。
  8. 自己紹介をdirBの中に移動しなさい。
  9. link.htmlの相対URLを修正して、正しく飛べるようにしなさい。
  10. introduction.htmlは元の場所に戻しておきましょう。

インターネットへの公開

今まで作ったページは自分しか見ることができませんでした。アクセス権の設定によっては他の人も見ることができますが、それもCNSにログインしている人に限られます。

今度は、作ったページをインターネットに公開し、世界中の誰でもそのページを見ることができるようにします。詳しい仕組みは「情報基礎２」で勉強しますので、ここでは公開する方法だけ練習します。

SFC-CNSでは、ユーザごとに特定のディレクトリにファイルを置けば、自動的にインターネットに公開されます。そのディレクトリの場所は次の通りです。

  • 絶対パス名は/home/ログイン名/public_htmlです。
  • 特別教室のiMacでは、デスクトップにpublic_htmlというディレクトリがあります。（無い場合はCNS_HOMEDIR→public_htmlを使ってください。下の説明動画はこちらの方法を使っています。）

他の人がブラウザで見る時は、http://web.sfc.keio.ac.jp/~ログイン名/ファイル名というURLでアクセスします。ログイン名の前に ~（チルダ）が付くことに注意しなさい。

練習問題 03-5（☆☆）
  1. ファイルex03-5.htmlを次のように書きなさい。
    [html]



    練習問題03-5

    インターネットに公開してみるテスト

    ほげほげ


    [/html]

  2. 「ほげほげ」を何か好きな言葉に置き換えなさい。
  3. このファイルをpublic_htmlディレクトリに移動しなさい。
  4. ブラウザでhttp://web.sfc.keio.ac.jp/~自分のログイン名/ex03-5.htmlにアクセスしてみなさい。
  5. 隣の人のログイン名を聞き、ブラウザでhttp://web.sfc.keio.ac.jp/~隣の人のログイン名/ex03-5.htmlにアクセスしてみなさい。
  6. スマホを持っている人は、スマホのブラウザで自分のex03-5.htmlと、隣の人のex03-5.htmlをアクセスしてみなさい。

自分のパソコンで作ったファイルをインターネットで公開したい場合は、CNSのpublic_htmlにファイルを転送します。詳しくは CNS GUIDE の「６CNSサーバ」の章を見てください。

公開するファイルのアクセス権は、誰でも読めるようにしておく必要があります。CNSでは普通にエディタでファイルを作るとそのようになります。ファイル転送ソフトや圧縮ソフトによって作ったファイルは自分しか読めない設定になることがありますので注意してください。

public_htmlの中にディレクトリを作る場合は、URLのファイル名の部分はpublic_htmlからの相対パス名になります。例えば、public_htmlの中にhobbyというディレクトリを作り、その中にmusic.htmlを置いた場合のURLはhttp://web.sfc.keio.ac.jp/~自分のログイン名/hobby/music.htmlになります。

練習問題 03-6（☆☆）
  1. public_htmlディレクトリの中に、新しくinfo1という名前のディレクトリを作りなさい。
  2. ex03-5.htmlをinfo1ディレクトリの中に移動しなさい。
  3. ex03-5.htmlのURLはどう変化するでしょうか？ブラウザでアクセスして確認しなさい。隣の人のex03-5.htmlもアクセスしてみなさい。

ウェブページを公開する際は、著作権法などの法律を守ることはもちろんですが、SFC-CNS利用内規で「慶應義塾大学の品位を落とすような行為」も禁止されていますので、注意してください。
また、introduction.htmlのような個人情報を含むファイルを不用意に公開しないようにしてください。

著作権

ウェブページを公開するときには著作権について注意しなければいけません。

(PPT版ダウンロード)

練習問題 03-7（☆）

特別教室iMacのデスクトップ→Share_zmac→index.htmlを開くと「情報倫理デジタルビデオ小品集３」を見ることができます。次の項目を見て、どのような内容か簡単にまとめなさい。

  • 12. アップしたビデオが著作権侵害！
  • 27. Web貼りつけレポートはNG
  • 29. ブログでメール紹介したらダメ？
  • 30. Webカメラは肖像権を侵害？
注意：
  • ライセンスにより、特別教室のiMacでしか再生を許可されていません
  • OSのバージョンアップが原因で、Firefoxでは再生できなくなりました。また、Safariで再生するときは次のように設定してください。
    メニューの「Safari」 → 環境設定 → Webサイト → プラグイン → QuickTime → 「これ以外のWebサイトでのデフォルト設定」を「確認」か「オン」に変更
練習問題 03-8（☆☆）

無料で写真・イラスト・BGMなどウェブページ制作用の素材を公開しているサイトがあります。そのようなサイトをいくつか探し、利用規約がどのようになっているか調べなさい。

無料ダウンロードサイトには、ウイルスやスパイウェアなど悪意のあるソフトをばらまくサイトもあります。あんまり怪しげなサイトからはダウンロードしないことと、常にセキュリティソフトを最新の状態で作動させておくことを心がけてください。

参考資料

チェックポイント
  • ハイパーテキストと普通のテキストの違いは何でしょうか？
  • 絶対URLと相対URLの違いは何でしょうか？
  • ファイルとディレクトリの構造がツリー構造（木構造）と言われるのはどうしてでしょうか？
  • 相対パス名で .. はどういう意味でしょうか？
  • SFC-CNSでインターネットに公開されるディレクトリはどこでしょうか？
  • 著作権とはどのような権利でしょうか？
  • 著作権の例外にはどのようなものがあるのでしょうか？