Contents
リンク
ハイパーテキスト
HTMLはHyperText Markup Languageの略ですが、ハイパーテキストとは何でしょうか？これは、文章を最初から順に読んでいくだけではなくて、文章の中に「リンク」（「ハイパーリンク」と言う場合もあります）があり、それをたどると関連するところへジャンプできるようにしたものです。
他の人のサイトに無断でリンクを張るのは構わないのでしょうか？著作権法に関しては問題無いと解釈されています（下記参考資料を参照）。ただし、そのサイトにリンクに関する条件や指示が書かれている場合は、道義的にそれを尊重すべきでしょう。
URLの指定
リンクする先はURLによって指定しますが、これはUniform Resource Locatorの略で、ウェブページの住所のようなものです。例えばSFCのホームページのURLは http://www.sfc.keio.ac.jp/ です。
典型的なURLは次の形をしています。
- スキーム(プロトコル)は、ブラウザがどうやってページのソースを取ってくるかという方法を表しています。普通は
http:ですが、ネットバンキングなど通信を暗号化する場合はhttps:を使います。ファイルをダブルクリックして開いた時はfile:ですが、これはネットワークを使わずに自分のコンピュータに保存されているファイルを使うという意味です。 - ホスト名は、それぞれのコンピュータに付けられた名前で、どのコンピュータからソースを取ってくるかを示しています。プロトコルが
file:の場合は、自分のコンピュータからに決まっているので、ホスト名は書きません。 - パス名は、コンピュータの中でどのファイルを取ってくるかを示しています。
スキーム(プロトコル)とホスト名については、「情報基礎２」で詳しく勉強します。
絶対URLと相対URL
URLは住所のようなものなので、世界中のウェブページの中から目的のページを探し出せるようになっていますが、その分どうしても長くなってしまいます。しかし、近所の家について話す時には「うちの２軒右の家」と言って、いちいち「神奈川県藤沢市…」と言わないように、今表示しているページのURLを基準にして「近所」のウェブページを簡単に指定できる書き方もあります。
- ブラウザで
http://itclass.sfc.keio.ac.jp/guide/index.htmlをアクセスしなさい。 - インスペクタでこのページのHTMLを表示し、「総合政策・環境情報2014年度以降入学者」のリンク先がどのように指定されているか見なさい。
- 「総合政策・環境情報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のパス名の書き方を知るには、コンピュータがファイルをどうやって管理しているかを知らないといけません。ディスクの中でファイルがどのように格納されているかということを「ファイルシステム」と呼びます。
ファイルとディレクトリ
アクセス権
自分のファイルを他の人が勝手に読み書きすると困りますが、複数人で共有したい場合もあるので、ファイルごとにアクセス権を設定できます。
普通はユーザごとに別のディレクトリを使い、他のユーザは勝手に書き込んだりできないようになっています。しかし、設定を変えれば他のユーザも書き込めるようにできます。共用領域を使って練習してみましょう。
- エディタで適当な内容を書き、
ex03-3.txtという名前で保存しなさい。 - Finderのメニューで【移動】→【フォルダへ移動…】を実行し、
/pub/sfc/ipl/info1-freeの中身を表示しなさい。これは、共用領域の中にあるディレクトリで、誰でもファイルを作れるように設定してあります。 ex03-3.txtを/pub/sfc/ipl/info1-freeに移動してみなさい。- 他の人が作った同じ名前のファイルがあると移動できません（他の人のファイルに上書きする権限は無いため）。何か別の名前に変えてから移動しなさい。
- 隣の人からファイル名を教えてもらい、隣の人が作ったファイルをエディタで開けるかどうかやってみなさい。また、そこに何か書き足して保存しようとするとどうなるでしょうか？
- ファイルを右クリックして【情報を見る】を実行しなさい。
- ファイルの情報の一番下に「共有とアクセス権」があります。「everyone」のところが他のユーザからのアクセスを許可・禁止するところです。アクセス権は何になっているでしょうか？
- 隣の人に、ファイルの「everyone」のアクセス権を「読み／書き」に変更してもらい、隣の人のファイルを変更して保存できるかやってみなさい。
ファイルシステムとURLの対応
- プロトコルが
file:の場合、ファイルシステムの絶対パス名の前にfile://を付けたものが絶対URLになります。例えば/xxx/yyy.htmlの絶対URLはfile:///xxx/yyy.htmlです。ホスト名を書かないのでスラッシュが3個並ぶことに注意してください。 - プロトコルが
http:の場合、ファイルシステムの絶対パス名がそのまま絶対URLのパス名部分になるとは限りません。じゃあどうなるのかと言うと、ウェブサーバの設定によるので一概には言えません。SFC-CNSの場合にどうなるかは後で説明します。 - 相対URLは、プロトコルもホスト名も書きません。ファイルシステムの相対パス名がそのまま相対URLになります。
- 練習問題02-4で書いた自己紹介
introduction.htmlと同じディレクトリにlink.htmlという名前で次の内容のファイルを作りなさい。
12345678910111213<!DOCTYPE html><html><head><meta charset="utf-8"><title>リンクの練習</title></head><body><!-- ここに自己紹介へのリンクを書く --></body></html> - body要素の中に相対URLで自己紹介へのリンクを書きなさい。
- ブラウザで
link.htmlを開き、リンクをクリックして自己紹介へ飛べることを確認しなさい。 - 同じディレクトリに、
dirAという名前で新しいディレクトリを作りなさい。 link.htmlをdirAの中に移動しなさい。
link.htmlの相対URLを修正して、正しく飛べるようにしなさい。
- 自己紹介と
dirAがあるディレクトリに、dirBと言う名前で新しいディレクトリを作りなさい。 - 自己紹介を
dirBの中に移動しなさい。
link.htmlの相対URLを修正して、正しく飛べるようにしなさい。
introduction.htmlは元の場所に戻しておきましょう。
インターネットへの公開
今まで作ったページは自分しか見ることができませんでした。アクセス権の設定によっては他の人も見ることができますが、それもCNSにログインしている人に限られます。
今度は、作ったページをインターネットに公開し、世界中の誰でもそのページを見ることができるようにします。詳しい仕組みは「情報基礎２」で勉強しますので、ここでは公開する方法だけ練習します。
SFC-CNSでは、ユーザごとに特定のディレクトリにファイルを置けば、自動的にインターネットに公開されます。そのディレクトリの場所は次の通りです。
- 絶対パス名は
/home/ログイン名/public_htmlです。 - 特別教室のiMacでは、デスクトップに
public_htmlというディレクトリがあります。（無い場合はCNS_HOMEDIR→public_htmlを使ってください。下の説明動画はこちらの方法を使っています。）
他の人がブラウザで見る時は、http://web.sfc.keio.ac.jp/~ログイン名/ファイル名というURLでアクセスします。ログイン名の前に ~（チルダ）が付くことに注意しなさい。
- ファイル
ex03-5.htmlを次のように書きなさい。
1234567891011121314<!DOCTYPE html><html><head><meta charset="utf-8"><title>練習問題03-5</title></head><body><h1>インターネットに公開してみるテスト</h1><p>ほげほげ</p></body></html> - 「ほげほげ」を何か好きな言葉に置き換えなさい。
- このファイルを
public_htmlディレクトリに移動しなさい。 - ブラウザで
http://web.sfc.keio.ac.jp/~自分のログイン名/ex03-5.htmlにアクセスしてみなさい。 - 隣の人のログイン名を聞き、ブラウザで
http://web.sfc.keio.ac.jp/~隣の人のログイン名/ex03-5.htmlにアクセスしてみなさい。 - スマホを持っている人は、スマホのブラウザで自分の
ex03-5.htmlと、隣の人のex03-5.htmlをアクセスしてみなさい。
public_htmlにファイルを転送します。詳しくは CNS GUIDE の「６CNSサーバ」の章を見てください。
public_htmlの中にディレクトリを作る場合は、URLのファイル名の部分はpublic_htmlからの相対パス名になります。例えば、public_htmlの中にhobbyというディレクトリを作り、その中にmusic.htmlを置いた場合のURLはhttp://web.sfc.keio.ac.jp/~自分のログイン名/hobby/music.htmlになります。
public_htmlディレクトリの中に、新しくinfo1という名前のディレクトリを作りなさい。ex03-5.htmlをinfo1ディレクトリの中に移動しなさい。ex03-5.htmlのURLはどう変化するでしょうか？ブラウザでアクセスして確認しなさい。隣の人のex03-5.htmlもアクセスしてみなさい。
また、
introduction.htmlのような個人情報を含むファイルを不用意に公開しないようにしてください。著作権
ウェブページを公開するときには著作権について注意しなければいけません。
特別教室iMacのデスクトップ→Share_zmac→index.htmlを開くと「情報倫理デジタルビデオ小品集３」を見ることができます。次の項目を見て、どのような内容か簡単にまとめなさい。
- 12. アップしたビデオが著作権侵害！
- 27. Web貼りつけレポートはNG
- 29. ブログでメール紹介したらダメ？
- 30. Webカメラは肖像権を侵害？
- 注意：
-
- ライセンスにより、特別教室のiMacでしか再生を許可されていません
- OSのバージョンアップが原因で、Firefoxでは再生できなくなりました。また、Safariで再生するときは次のように設定してください。
メニューの「Safari」 → 環境設定 → Webサイト → プラグイン → QuickTime → 「これ以外のWebサイトでのデフォルト設定」を「確認」か「オン」に変更
無料で写真・イラスト・BGMなどウェブページ制作用の素材を公開しているサイトがあります。そのようなサイトをいくつか探し、利用規約がどのようになっているか調べなさい。
- ハイパーテキストと普通のテキストの違いは何でしょうか？
- 絶対URLと相対URLの違いは何でしょうか？
- ファイルとディレクトリの構造がツリー構造（木構造）と言われるのはどうしてでしょうか？
- 相対パス名で
..はどういう意味でしょうか？ - SFC-CNSでインターネットに公開されるディレクトリはどこでしょうか？
- 著作権とはどのような権利でしょうか？
- 著作権の例外にはどのようなものがあるのでしょうか？