WWW (World Wide Web)ページの作成 その2

著作権やプライバシー保護について(再掲)

WWWページに載せる内容(文章や写真など)は,その著作権に関して十分に理解し,他者の権利を侵害しないように努め(詳細はコンピュータガイド6.1節の6.3項と7項を熟読すること),他者の作成した著作物を模倣剽窃(盗作すること)することが絶対に無いようにすること.要点としては次のようにまとめられる.

  1. 本学が運営しているWebページに掲載可能な内容は,自分自身で考えて書き上げた文章・小説・詞や自分自身で撮影した写真など,著作権が確実に自分自身にあるものだけに限られる.
  2. 写真などの場合,たとえ自分自身で撮影したものであっても,被写体が芸能人などである場合は「肖像権」を侵害することになるので利用できない(一般の人であっても肖像権,さらには個人情報の保護の観点からも無承諾で公開することは避けるべきである).また,各種の商用音楽の歌詞なども許されない.
  3. 他者が合法的に作成しているWebサイトのデータをリンクして,あたかも自分のページの一部であるかの如く取り込んで利用するのは,一般に非合法である.
  4. 本学のWebページは,「教育・研究」のための範囲で利用することが許されている.従って,金銭の獲得を目的とした商用利用は認められない.

その他の詳細はコンピュータガイドを十分に読んで理解しておかなければならないし,また,Webページを作成するにあたっては,各種法律はもとより,本学の規定する規定も了解しているものとして扱われる.従って,それらに抵触する行為があった場合は,退学を含む懲罰処置の対象になるから,くれぐれも注意されたい.著作権関連事項で何か疑問があれば,本学教員や情報センターに必ず問い合わせて合法性を確認すること.

また,各自のプライバシーに関わる内容(電話番号や住所など)は,第三者に悪用される危険性があるため,Webページに記載すべきではない.連絡先として電子メールアドレスを書く場合,迷惑メール配信業者に収集される可能性がある.これに対しては,メールアドレスの文字列を「画像データ」に変換することで,自動収集できなくする対策手段を情報センターにて提供している.学内Webサイトの「情報サービス」→「ネットワークサービス」→「メールアドレスの画像化ツール」のページにて,各自のメールアドレスを表示できる画像データを作成できる.

メールアドレスを掲載する場合には,このツールを用いて画像データ化したものを掲載するようにしよう.

画像取り込みについて

Macbookに標準装備のカメラを使って写真を撮るにはアプリケーションフォルダの中にあるPhoto Boothというアプリケーションを使うとよい.使い方は簡単なのでここでの説明は省略する.ヘルプを読むなり試行錯誤して使ってみるとよい.Photo Boothを使って撮影された写真は「ファイル」メニューの「書き出す...」を使って保存できる.Webページで使用するためにファイル名には「安全な文字」のみを使うこと.

また,最近の携帯電話の多くはカメラ機能を有しているし,デジタルカメラも普及しているので,そういった機器を使って撮影した画像をコンピュータに転送して使ってもよい.転送の仕方は機器のマニュアルを参照のこと.メモリカードを使っている機器ならばUSBアダプタを使ってファイルコピーすることができる.

紙などの印刷物の画像を取り込むにはイメージスキャナを使う.オープンパソコンルームなどに設置されたイメージスキャナ装置の使い方は情報センターのスキャナ利用マニュアルを参照のこと.

WWWページ作成練習その3

index-j.htmlに自分の顔写真画像を貼り付けてブラウザ画面上に表示されるようにしてみよ.画像の張り込みにはimgタグを用いればよい(ヒント:下記の画像素材例のページのソースを見よ).尚,写真に限らず,Webページに載せる素材は著作権に十分に留意すること.自由に利用してよい素材として,例えば画像素材例のページを用意してあるので利用してよい.またインターネット上には好意に基づいて各種の素材を提供していただいているWebサイトも存在する.例えば,こちらのサイト(写真素材 足成)など.但し,「必ず利用条件などを良く読み,その条件に従った上」で,著作権者の権利を侵害しない範囲において利用させてもらうこと.そのようなサービスを行っているページはGoogle等のサーチエンジンで検索すれば色々と探しだせる.但し,あくまでも著作権者による好意による提供に過ぎないから,その好意を裏切らないよう感謝と敬意を忘れないこと.他者の権利を尊重する事と自分の権利を守る事は表裏一体であり,即ち,他者の権利を大事にすることは自分の権利を大事にすることに繋がるのである.

注:最近ではクリエイティブ・コモンズという利用ルールに基づくコンテンツの提供形態が広まりつつある.提供する側と利用する側の双方で,ライセンス形態が明確で簡便となる.

尚,Safariで画面表示されている画像をファイルとして保存するには,画像の上にマウスポインタを合わせ,右クリックで表示されるメニューから「イメージを別名で保存…」を選択する.保存のためのダイアログが表示されるから,保存したいディレクトリを選択してから保存ボタンをクリックすると,そのディレクトリに画像ファイルとして保存される.

Webページにおけるハイパーリンクの利用

Webページの任意の部分には,マウスクリックすると他のページを開く部分(アンカー, Anchorと呼ぶ)を設定することが出来る.このアンカーを設定するには<a>・・・</a> という具合にaタグで囲む.このaタグにより,ブラウザの画面上でクリックすると指示されたページが表示される.このページ間の結びつきを「ハイパーリンク」又は単に「リンク」と呼ぶ.

リンクURIの書き方

aタグの簡単な書式は次の通り:

<a href="URI">......</a>

HTMLファイル中に上記のタグを書き込んでやると,ブラウザでHTMLページを表示させて当該箇所をクリックした時にURIで示されたWebページがブラウザに読み込まれて表示される.

このURIの書き方には,色々な省略記法が使える(ファイルシステムにおける絶対パスと相対パスの概念を思い出してみよう).URIはスキーム部分(プロトコルを表す.例:http)とドメイン名部分(サーバを表す.例:www.kyoto-su.ac.jp)とパス名部分(サーバ上に保存されているファイルを表す)とに別れているが,これらを適当に省略することも可能である.

例えば,自分のホームディレクトリに存在するpublic_htmlディレクトリにあるsampleディレクトリにhello.htmlからハイパーリンクを設定したい場合を仮定する.このページのURIは

となる.このページから別のページへリンクを設定する(ページからハイパーリンクを設定することを「リンクを張る」などと呼ぶ.)場合,aタグ中のhref属性に指示するURIの部分は次のように書ける.

尚,これらのリンク設定の方法は何れを用いても効果は同じだが,可能なかぎり相対パスを用いた表現にしておくことが良い.その理由は次の通りである.例えば,後日,ディレクトリ名やファイル名を付け替えたり,HTMLファイルのディレクトリ配置を変更する場合,相対パスを用いてあればURI部分を書き直す作業が確実に少なくて済む.これにより,例えば,卒業時に自分の作成したページ群を商用プロバイダに移転する場合にも変更が少なくて済む(完全URIを使っているとサーバ名部分を全部書き換える必要がある!).

補足

URI表現において,幾つかの特別な名前のHTMLファイルを指すURIはファイル名部分を省略することができる場合がある(これは,そのファイルが置かれたWebサーバの設定によって異なる).例えば,コンピュータ理工学部のWebサーバの場合,index-j.html及びindex.htmlは,その特別な名前として扱われる.

例えば,各個人用ホームページを表すURI

と省略することが許されている.但し,index.htmlとindex-j.htmlという名前のHTMLファイルが両方とも同じディレクトリに存在した場合,コンピュータ理工学部のサーバ www.cse.kyoto-su.ac.jp ではindex-j.htmlが優先される.index.htmlファイルは,世界的に読める人がより多い英文で作成し,index-j.htmlは日本語で作成するようにすると良い.

WWWページ作成練習その4

ファイルを作成せよ.内容は適当に書き込んだ上でindex-j.htmlからハイパーリンクを張って辿れるようにせよ.また,sample.htmlファイルからindex-j.htmlファイルへ戻れるリンクも設定すること.

WWWページ作成練習その5

ファイルを作成せよ.内容は適当に書き込んだ上でファイルとの間で相互にリンクされるようにしてみよ.

アプリケーションソフトを使ったWebページ作成

簡単なWebページを作成するだけならテキストエディタでもよいが,凝ったWebページを作成したり,沢山のページから構成されるWebサイトを構築するならば専用のアプリケーションを使うと便利である.

例えば,MacにはiWebというアプリケーションが付属している.奇麗なデザインテンプレートが用意されており,文章や写真を入れ替えるだけでよい.但し,iWebを使った他のサイトと似たようになってしまいがちなので,本格的に作るならそれなりに手を入れていった方がよいかもしれない.詳しい使い方はヘルプに書いてある(Macはとにかく印刷物のマニュアルが少なく,ヘルプやオンラインマニュアルを読む必要がある)が,使い方を紹介しているWebサイトもあるので参照するとよい(例えば「lbl everyのiWebの使い方」).

注: iWebは廃版になりましたので,もはや入手不可能です.

LibreOfficeを使ってもWebページを作ることができる.LibreOffice Writerのメニューで,ファイル → 新規作成 → HTML形式ドキュメント を選ぶと新しいWebページの編集ウィンドウが表示される.編集のやり方はWriterと似ているので取り付きやすいと思う.

他にも市販のものや無料で使えるものもあるので探してみるとよいだろう.

なお,Webページ作成アプリケーションを使うと複雑なレイアウトや背景画像をふんだんに使った,凝ったページを作ってしまいがちだが,閲覧環境によっては非常に重かったり(表示が遅い),正常に表示されなかったりすることもあることに留意すべきである.

追記:CSE環境のEmacsにはyahtmlというHTMLの作成支援機能が設定されている.ソースを自分で書く際に入力を簡便化してくれる.詳しい使い方はhttp://www.yatex.org/を参照のこと.

提出課題

各自,自分のページを自由に作成して公開すること.その際,以下のような事項に留意すること.

提出要領:

各自の「ホームページ」を作成し,URI  を用いてWebブラウザで閲覧できるようにせよ.

提出期限:

教員の指示する〆切日までに,それなりに中身のあるページ群を作成せよ(作成練習1〜5で作成した内容より充実させること).もちろん,それ以降も継続して変更や修正を行うことは差し支えない.

注意!!:ちゃんと上記URI,およびそこから設定されているリンク先が参照できることを確認すること.ファイル名誤りやリンクミスによってたどれないページは無いものと同じである.

ローカル環境で作成したファイルのNetBoot環境への転送方法

自宅等,ローカル環境で作成したWebページをCSE環境に転送するには次のようにする.

NetBoot環境で起動してローカルディスクからコピーする場合

「ソフトウェアのインストール,ソフトウェアアップデートの適用,リムーバブルメディアの取り扱い」のページの「ローカルディスクへのアクセス」の項を参照.

  1. 自宅でローカルブートした状態にて,HTMLファイルを編集して保存する.
  2. 出来たHTMLファイルをFinder上でダブルクリックするとSafariが起動して表示してくれるので,出来栄えを確認する.再表示させるには,Safariの「表示」メニューから「ページを再読み込み」を選ぶ.
  3. 出来栄えを確認したら,さらに編集を続行して上記2へ戻る.
  4. 満足出来るHTMLファイルが完成したら,大学へMacBookを持ってきて NetBoot起動させてログインする.
  5. LocalDiskアイコンを開いてMacBook内蔵ディスクのフォルダを開き,自宅で作ってきたファイルをCSE環境のpublic_htmlフォルダにコピーして配置する.
  6. ブラウザでCSEのWebサーバのURIにアクセスしてみる.
    例:

自宅などからインターネット経由でファイルを転送する場合

「CSE環境上に保存されたファイルへの遠隔アクセス」のページを参照.

  1. 自宅でローカルブートした状態にて,HTMLファイルを編集して保存する.
  2. 出来たHTMLファイルをFinder上でダブルクリックするとSafariが起動して表示してくれるので,出来栄えを確認する.再表示させるには,Safariの「表示」メニューから「ページを再読み込み」を選ぶ.
  3. 出来栄えを確認したら,さらに編集を続行して上記2へ戻る.
  4. 満足出来るHTMLファイルが完成したら,Fetchというアプリケーションを使ってCSE環境サーバに接続する.
  5. ローカルディスクにある作成したファイルをCSE環境のしかるべき場所にアップロードする.
  6. ブラウザでCSEのWebサーバのURIにアクセスしてみる.
    例:

Webページのチェック

Webページに,タグが正しく書かれていないなどの文法エラーが含まれていても,ブラウザで表示させてみるとなんとか表示されてしまう.しかし,意図したとおりに表示されるとは限らないし,別のブラウザで表示させるとちゃんと表示されないことも多い.

そこで,HTMLの文法が正しく守られているかチェックしてくれるサイト(例えばAnother HTML-lint 5)を利用するとよい.チェック結果をすべて理解するにはHTMLに関する高度な知識が要求されるが,タグの閉じ忘れなどの簡単なエラーを見つけるだけでも役に立つので使ってみてほしい.

基礎プログラミング演習Iの表紙ページへ戻る