HTML による WWW ページの作成、ファイルのモード、ビット演算、ネットマスク、通信速度

					2018年05月15日
情報科学類 コンピュータリテラシ

                                       筑波大学 システム情報系
                                       新城 靖
                                       <yas@cs.tsukuba.ac.jp>

このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2018/2018-05-15
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/

■連絡事項

■ハイパーテキスト・ハイパーメディアと World Wide Web

ハイパーテキスト(hypertext)とは、内部に他のテキストへの「参照 (reference)」が埋め込まれているテキスト(文書、文字だけから構成される データ)である。ハイパーテキストという仕組みを使えば、テキストのある部 分から、関連している情報を含んでいるテキストのある部分を引き出すことが 簡単になる。

ハイパーテキストを拡張し、テキスト・データだけでなく、音声や画像などの データを扱えるようにしたものを、ハイパーメディア(hypermedia)という。 World Wide Web は、ハイパーメディアに基づいて 作られている情報提示のための仕組みである。

インターネットの雲、資源、リンク、ブラウザ

インターネット上の資源とハイパーメディア

ハイパーメディアやハイパーテキストのデータを作成するためには、次の2つ の事が必要になる。

  1. 差されるデータに印(mark,label)を付ける。
  2. 差すデータに、参照を埋め込む。
文書(テキスト)に、「ここは表題」、「ここは箇条書」といった、文書の構 造を示す目印(マーク)を付けることをを付けることを、マークアップすると いう。 ハイパーメディアを記述するためには、上の2つのことを支援した、人工の言 語を使う。このような言語を、マークアップ言語(markup language)という。

WWW では、マークアップ言語として HTML (HyperText Markup Language)と呼 ばれている言語が使われている。

◆URL

HTML では、他のデータへの参照を実現するためにURL (Uniform Resource Locator) という形式を使う。次に、URL の例を示す。

http://www.tsukuba.ac.jp/education/college.html

http
HyperText Transfer Protocol。WWWのデータを保持しているプログラム と、WWWを表示するプログラムの間でデータをやり取りするときの形式を定め た約束。
www.tsukuba.ac.jp
そのデータを持っているコンピュータの名前。
/education/college.html
そのコンピュータの中での資源の名前(ファイルの名前)。最後の .html は、その資源がHTML で書かれている事を表わしている。

◆HTMLでの表示

WWW ブラウザは、整形された HTML ではなく、整形前の元の HTML (source) を表示する機能がある。

◆絶対形式と相対形式

URL には、絶対形式と相対形式がある。 絶対形式(absolute form) とは、にhttp:,host,dir/filename がそろっているものである。 相対形式(relative form) とは、このうち http:host が省略されたものである。 絶対形式と相対形式は、それぞれ、完全形と短縮形と呼ばれることもある。

ある HTML で記述されたデータの URL:

http://host1:port1/dir1/file1.html
データの中の相対形式の URL:
file2.html
絶対形式での意味:
http://host1:port1/dir1/file2.html

◆ホーム・ページ

WWWで ホーム・ページ(home page) とは、本来は、ある一連の情報にアクセスするために、最初にアクセスされる ことが想定されて作られているページを意味する。

「本来は」、ホーム・ページではない WWW ページも存在する。現実には、「ホー ム・ページ==WWWページ」という使い方をする人が多い。 情報科学類 生は、 この2つを区 別したい。この講義のページでは、区別している。

「ホームページ」さまざまな用例集 ver. 2005.9.2 by Kuno。 ネットワーク・ニュース fj.net.words に時々投稿される。

◆情報科学類での個人のホーム・ページ

筑波大学情報学類コンピューティング環境では、個人の WWW ページは、次のよ うな URL で参照される。 ここで「ユーザ名」を、ログインの時に打つ自分のユーザ名 で置き換える。たとえば、学籍番号が 201854321 の人は、次のような URL で 参照される。 この URL は、次のディレクトリに対応する。 このディレクトリは、mkdir コマンドで作成できる。
$ mkdir ~/public_html [←]
$ mkdir ~/public_html/htdocs [←]
練習問題 WWWページ用のディレクトリ作成 参照。

このディレクトリに index.html というファイルを作成すれば、 それが情報科学類での個人のホーム・ページの内容となる。

■HTML

HTML(the HyperText Markup Language) は、WWW で ハイパーメディア データを定義するための マークアップ言語。 HTML は、「本来は」、文書の構造を記述する。

HTML で記述できる文書の構造:

HTML では、文書の構造を記述することができるが、「表示の方法」 を記述することは、本来はでない。

表示の方法:

ワードプロセッサ(Word processor, ワープロ)は、紙に印刷した時の、このよ うな表示の方法を設定するためのプログラムである。これに対し て、HTML では、もともとの思想では、少数の 物理スタイルタグ という例外を除いて、表示の方法は、それを表示す るプログラム(ブラウザ)が決める。

スタイルシートとは、 表示の方法(スタイル)に名前を付けて、ドキュメント単位やパラグラフ単位で どのスタイルを使うかを指定できるようにしたもの。 新しいタグを追加することなく、表示の方法を記述することができる。

WWWページを作る目的は、多くの人にメッセージを伝えることである。そうい う意味では、特定のブラウザでしか使えないような機能は、使わないようにす るべきである。表示の方法よりも内容が大事。

◆HTMLの文法とタグ

HTML による文書は、「<>」で括られたキーワード ( タグ(tag) ) が埋め込まれたテキスト・ファイルである。テキスト・ファイルとは、文字デー タだけが並んでいるファイルで、 Emacs 等の テキスト・エディタ で修正できるものである。

HTMLのタグの形式:

<TAGNAME>タグの対象テキスト</TAGNAME>

タグには 開始タグ (/がついていない)と 終了タグ (/がついている)がある。

開始タグと終了タグの間にタグ付けの対象となるテキストが書かれる。

基本的に開始タグは、見出し、箇条書などの機能を「オン」にし、終了タグは 機能を「オフ」にする働きがある。ただし、<IMG> の ように組になっていないタグもある。

TAGNAMEには、アルファベット(大文字でも小文字でも よい)と数字が使われる。

タグには、オプションを設定できるものがある。

<TAGNAME ATTR1=VALUE1 ATTR2=VALUE2>タグの対象テキスト</TAGNAME>

オプションは、開始タグの括弧「<>」の中に、 「属性名=属性値」の形式で記述される。

◆HTML文書の構造

HTMLの文書の大まかな構造

<HTML>
<HEAD>
<TITLE>
タイトル
</TITLE>
</HEAD>

<BODY>
本体
</BODY>
</HTML>

<HTML>で始まり </HTML>で終る。 おおきく2つの部分、 <HEAD>,</HEAD> で囲まれた ヘッダ(header) と、<BODY>,</BODY> で囲ま れた 本体(body) から構成される。 ヘッダの <TITLE>,</TITLE>で囲まれた部 分は、 タイトル で、タイトルバーなどに表示される。 ヘッダでは、見出し、文字飾り、ハイパーリンクを使うことができない。

◆見出し(heading)

HTMLで記述された文書の本体の構造

<H1>第1章</H1>
        1章の冒頭
        <H2>第1節</H2>
        1章1節の冒頭
                <H3>第1項</H3>
                1章1節1項のパラグラフの並び
                <H3>第2項</H3>
                1章1節2項のパラグラフの並び
        <H2>第2節</H2>
        1章2節の冒頭
                <H3>第1項</H3>
                1章2節1項のパラグラフの並び
        <H2>第3節</H2>
        1章3節の冒頭
                <H3>第1項</H3>
                1章3節1項のパラグラフの並び
<H1>第2章</H1>

HTML の文書は、 見出し(heading)パラグラフ(paragraph) ( 段落 ) の並びから構成されている。 HTML では、見出しとして <H1> から <H6> までが 定義されいる。見出しを使うことで、章の構成を表現することができる。

段付け(indentation) ( 字下げ ) は、説明のために付けたものである。HTMLでは、空白やタブは、単語の区切り として扱われるため、空白やタブによる段付けは無視される。つまり、書き手 が自由に読みやすいように段付けをしてよい。

<H1> から <H3> までの見出しは、 Firefox などのブラウザでは、標準で普通の文字よ り大きな文字で表示さる。しかし、大きな文字で表示させたるために、見 出しの機能を使うのは、本来は、誤りである。 見出しがどのように表示されるかは、ブラウザの種類や設定に依存している。 見出しは、あくまでも章の構成を表わす目的で使う。

◆パラグラフ

見出しと見出しの間には、いくつかのパラグラフを記述する。パラグラフは、 <P>で始まり、</P>で終わる。 ただし、終りの </P>は、HTML ではオプション(付け ても付けなくてもよい)なので、書かない人も多い。

◆リスト(箇条書)

HTML で リスト(list,並び) とは、 箇条書(item) を作るための機能である。

HTML で扱える箇条書の種類:

例:

HTML記述:

<UL>
<LI>日本料理
<LI>中華料理
<LI>韓国料理
<LI>フランス料理
<LI>イタリア料理
</UL>

表示例:

HTML記述:

<OL>
<LI>メールリーダを実行する
<LI>新着メールを取り込む
<LI>新しいメールを書く
<LI>新しいメールを送る
<LI>メールリーダを終了する
</OL>
表示例:

  1. メールリーダを実行する
  2. 新着メールを取り込む
  3. 新しいメールを書く
  4. 新しいメールを送る
  5. メールリーダを終了する

リストは、 入れ子構造(nest) にすることがでる。リストの中でまたリストを使うことができる。

HTML記述:

料理
<UL>
<LI>日本料理
<UL>
    <LI> すし
    <LI> さしみ
    <LI> そば
    <LI> 天ぷら
    </UL>
<LI>韓国料理
    <UL>
    <LI> 海鮮ナベ
    <LI> 焼肉
    <LI> ジャプチェ
    </UL>
</UL>

表示例:

料理

HTML で、<A></A> で囲まれ ている部分を、 アンカ(anchor) とう。

船の錨(いかり)の矢印を連想

アンカは、ハイパーリンクの始点と終点を表現している。ハイパーリンクの始 点は、リンクの頭(head)、終点は、リンクの尾(tail)ともいうこともある。 HTMLの解説書の中には、始点をリンク、終点をアンカと呼んでいるものもある。

例: HTML記述:

<A HREF="http://www.tsukuba.ac.jp/index.html">Univ. of Tsukuba </A>
表示例:
Univ. of Tsukuba
Univ. of Tsukuba」というテキストが、ハイパー リンクの始点で、 http://www.tsukuba.ac.jp/index.htmlで表わされた資源(ファイル) が終点。 終点、<A>タグ中のHREF (Hyper REFerence) という属性によって指定される。

リンクの URL は、 相対形式でもよい。

<A HREF="english.html">[English]</A>

[English]」というテキストが、ハイパーリ ンクの始点。この記述が URL http://www.tsukuba.ac.jp/dir/index.htmlの中で使わ れたとすると、"english.html" という相対形 式の URL は、絶対形式では http://www.tsukuba.ac.jp/dir/english.htmlとなる。

ハイパーリンクの終点は、同じファイル内、あるいは、別のファイルにあるテ キストのある一部分を差し示すこともできる。そのためには、id属性 (identifier 属性)付のアンカと 断片識別子(破片識別子、fragment identifier) を使う。

<H2 id="boston">Boston</H2>

ハイパーリンクの終点は、普通、見出しが使われるが、見出しでなくてもよい。 <H2>タグのid属性の値 "boston" は、ファイルの中で重複しないように決める。

このハイパーリンクの終点を差し示すためには、同じ文書内の場合、次のよう に HREF属性として、「#」で 始まる文字列を指定する。

This is New York. That is <A HREF="#boston">Boston </A>.
別のファイルの例:
This is Tsukuba. That is <A HREF="usa.html#boston">Boston</A>.
"usa.html" というファイルの中にある <TAGNAME id="boston"></TAGNAME>で作られたアンカへのハイパー リンク。

◆イメージへのリンクとインライン・イメージ

WWW でイメージを扱う方法

記述例:
<IMG SRC="images/client-server-service.png"
     ALT="サーバがサービスをクライアントに提供している。">
表示例

サーバがサービスをクライアントに提供している。

タグ <IMG> がインライン・イメージを張り付 けるという意味である。<IMG> には、終了のタグ </IMG> はない。

SRC属性では、テキストの途中で展開して表示するイメー ジの URL を指定する。

ALT属性は、イメージの代わりに表示されるテキストを 指定する。これは、Firefox などのブラウザのオプションとして、 「画像の読み込み(Load Images)」がオフに なっている時にイメージに代わって表示れる。 ALT属性は、w3m や lynx などのように、イメージが表示できないブラウザにより使われたり、目 の不自由な人がイメージの内容を知る時に使われる。

IMGタグのSRC属性では、絶対形 式のURL使うこともでる。

<IMG SRC="http://www.tsukuba.ac.jp/icons/penguin.png" ALT="[ペンギンのアイコン]">

インライン・イメージとしてよく使われる画像の形式

PNG (Portable Network Graphics)
普通の圧縮方法(可逆圧縮方法)を使っている。 普通の圧縮方法(可逆圧縮方法)を使っている。コンピュータで作成したアイコ ンや図形、いわいる「アニメのセルのようなベタぬり」に適している。1ピク セルは、赤、緑、青でそれぞれ16ビット、全体で48ビット(248 == 281474976710656色)まで。
GIF (CompuServe Graphic Image Format)形式(ジフ)(.gif)
256色まで。圧縮アルゴリズムとして、LZ77 という 方法が使われており、一部の国で特許が有効なためライセンス料が必要になる。 アメリカや日本では特許は特許は切れている。
JPEG (Joint Photographic Experts Group) 形式(ジェイペグ)(.jpeg,.jpg)
劣化式圧縮方法を使っている。イメージ・スキャナやディジタル・カメ ラで取り込んだ写真に適している。約1670万色(224)まで。
SVG (Scalable Vector Graphics)
ベクトル形式。

◆アドレス

HTML文書の最後には、普通、 <ADDRESS>,</ADDRESS>タグを使っ て、その文書の著者の電子メール・アドレスや著者のホーム・ページへのリン クを書く。これは、このページの内容にきちんと責任を持つことを示している。

HTML記述:

<ADDRESS>
who at coins.tsukuba.ac.jp
</ADDRESS>
表示例:

who at coins.tsukuba.ac.jp

「who at coins.tsukuba.ac.jp」という表記は、 「who@coins.tsukuba.ac.jp」の意味で、 spam対策 の一種。spamを送信する人は、Web ページに含まれている電子メールのアドレ スを収集することがある。電子メールのアドレスを、自動収集プログラムには 分からないが人間には分かるようにするために変形する。変形の方法は、いろ いろ工夫している人がいる。

◆文字飾り

文書内の単語を太字にしたり斜体にしたりする機能を文字飾りとう。

文字飾りで使う2種類のタグ

論理スタイルタグ
「強調 <EM> <STRONG>」、 「定義 DFN」、 「引用 CITE」、 「コード(コンピュータ) <CODE>」、 「変数 <VAR>」、 「キーボード (KBD」など、文書の論理的な構造を表わ す。表示されるかは、ブラウザに任される。
物理スタイルタグ
「太字 <B>」、「イタリック <I>」、 「タイプライタ・フォント <TT>」、 「フォント指定 <FONT> <BIG> <SMALL> <BASEFONT>」 とった具体的な 表示方法を表わす。
「肩付き <SUP>」と「下付 <SUB>」は、論理的に使 うならば、論理スタイルタグに入れてもよい。

◆整形済みテキスト

整形済みテキストとは、文字端末(iTerm や sshでログインした時)に表示されたコンピュー タの出力である。たとえば、 「コマンドプロンプト」やシェルとの対話の画面の様子をHTMLの文書に張り付 る時に使う。 <PRE></PRE> で該当部分を囲ん だ中では、空白やタブや改行がそのまま有効になる。

HTML記述:

<PRE>
      May 2018
Su Mo Tu We Th Fr Sa
       1  2  3  4  5
 6  7  8  9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
</PRE>
      May 2018
Su Mo Tu We Th Fr Sa
       1  2  3  4  5
 6  7  8  9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
表示例:

      May 2018
Su Mo Tu We Th Fr Sa
       1  2  3  4  5
 6  7  8  9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
May 2018 Su Mo Tu We Th Fr Sa 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

◆HTMLで使えない文字

次の3つの文字は、HTML の中では特別の意味を持つ。 これらの文字を画面に表示させたい時には、次のように記述する。

表示 HTML中の記述 元の英単語
< &lt; less-than
> &gt; greater-than
& &amp; ampersand
注意: <PRE></PRE>の中でも、 「<」,「>」, 「&」という文字は、解釈される。

◆デバッグ

コンピュータのプログラムに含まれている誤りをバグ(bug、虫)という。バグ を取ることをデバッグという。

デバッグ中のものは、サーバに置く必要はない。 HTML で何か書いたページは、サーバに置かなくてもWWW ブラウザで直接開い て見ることができる。 ファイル(File)メニューで ブラウザでファイルを開く(Open file) を選ぶ。 ファイルを書き換えたら、エディタで保存して、再読込(Reload) ボタンを押す。

書いた文書が画面に現われない時には、<タグ>の 「>」を書き忘れていないかをチェックする。 漢字の「>」ではなく、 ASCII ( 英字、直接入力 ) の 「> 」である。

終了タグをよく書き忘れる。 </H1> </H2> </H3> を下記忘れると、 ブラウザに画面に大きな字が並ぶ。 </UL> </OL> </DL> を書き下記忘れると、その場所で段づけがおかしくなる。

インライン・イメージがうまく表示できない時には、 <IMG>SRC属性で指定している ファイル名をチェックする。

同様にリンクがうまく開かない時には、<A>HREF属性を調べる。既存のページを差す時には、 まず WWW ブラウザで表示して、そこに現われたものを コピー&ペースト(Copy and Paste) でエディタにもってくる。

◆サンプルの利用

WWW ページを作る時には、0 から HTML によりファイルを作成することもでき るが、気に入ったページを真似して書くことからはじめることもできる。ただ し、著作権には注意する。

コンピュータリテラシの授業で利用できるサンプルを用意している。 練習問題参照。

◆ページの内容

WWWページに期待される内容

  1. 独自性(originality)の高い内容、世界中に他に類似のものがないようなもの。
  2. 有益な使えるもの。自分自信でも、他の人のページにあるといい なあと思うようなもの。

個人のWWWページの場合には、次のような内容のものが期待される。

  1. 自分の名前(漢字がある人は漢字、読み方(平仮名かローマ字))
  2. 電子メール・アドレス
  3. 写真
  4. 関連情報へのリンク

ページの末尾に付ける電子メール・アドレスは、重要である。

WWWページに含めないほうがよい情報

  1. 自宅の住所、生年月日、電話番号。
  2. 法律(特に著作権法)を犯しているもの。
  3. 他人の名誉・プライバシを侵害しているもの。

◆漢字コード

漢字コード については、選択可能なら、電子メールと同じく JIS にするとよい。 EUC と Shift-JIS では、Web ブラウザによる漢字コードの 自動判定に失敗することがある。

Web ブラウザの自動判定に頼らず、 HTML の <HEAD></HEAD> の中に、 <META>タグを使って漢字コードを明示的に示す方法もある。

JIS
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp">
</HEAD>
EUC (日本語)
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=EUC-JP">
</HEAD>
Shift JIS
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=Shift_JIS">
</HEAD>
UTF-8
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=UTF-8">
</HEAD>

ワードプロセッサによるテキストでの出力、macOS やWindows のテキスト・エ ディタの多くは、Shift JIS を出力することが多い。

■HTML簡易リファレンス・マニュアル

■ファイルの属性(2018年4月24日)

Unixのファイルとディレクトリは、内容(ビット列を保存する)の他に、 所有者、更新された日付などの 属性attributes ) を持つ。

ls -l コマンドを実行するとカレントディレクトリのファイルや ディレクトリの属性が表示される。

$ ls -l [←]
total 99
drwx------   4 yas  prof   3072  4 10 17:37 Desktop
drwx------   3 yas  prof   1024  3 11 13:52 Documents
drwx------@ 34 yas  wheel  2048  4 18 10:05 Library
drwx------  20 yas  prof   2048  4 18 10:57 Maildir
drwx------   2 yas  prof   1024  4 21 16:03 Music
-rw-r--r--   1 yas  prof   3178  4 15 15:56 file100.txt
-rw-r--r--   1 yas  prof     25  4 15 15:58 file30
-rw-r--r--   1 yas  prof   2550  4 15 15:59 literacy-a2.txt
-rw-r--r--   1 yas  prof   2550  4 15 15:57 literacy-a2.txt~
...
$ []
行単位に次のようなファイルやディレクトリの属性が表示さる。

■ファイルの属性(2)

The Unix Super Text 9.5.5項 モード 参照The Unix Super Text 21.5節 マスクとモード 参照

◆モード(mode)

ファイルの型とファイルへのアクセス(読み書き)の可否を決めるための属性

ファイルの型

モードの一番左1文字は、ファイルの型(type)を表わす。
-
ファイル
d
ディレクトリ

許可されたアクセス方法

モードからファイルの型を除いた部分はアクセスの可否を決めるための 情報。9文字ある。左から3文字の固まりが3組ある。

ファイルのモードの例、所有者、グループ、その他、110,100,100、rw-r--r--

ファイルのモードの例

各3文字はアクセス毎にその許可・拒否を表す。

r	読込み可
w	書込み可
x	実行可(ディレクトリの場合は探索可)
モードで該当する部分が「-」の場合は、その種類のアクセスが許可さ れてないことを意味する。

「読込み可」とは、その内容を参照できること意味する。たとえば、cp コマン ドでコピーできる。読出し可能なディレクトリなら、ls コマンドでそのディレ クトリ中のファイル名の一覧を表示できる。

「書込み可」とは、その内容を変更することができることを意味する。たとえ ば、テキスト・ファイルなら、エディタで修正したものを書き込むことができ る。書込み可能なディレクトリなら、mv コマンドでそのディレクトリのなかに あるファイル名前を変更できる。

「実行可」というのは、ファイルの内容がプログラムの場合は、 そのプログラムを実行することができる。

ディレクトリに対する 「検索可」というのは、その下にあるファイルやディレクトリを たどっていける(ファイルを開く(読み書きのため)、cd (change directory)できる)という意味である。

ディレクトリが「読込み可」でも、「検索可」でないと、 ディレクトリに「読込み可」のファイルがあっても、 ディレクトリに入ってファイルを読むことができない。 逆に、「検索可」でも、ディレクトリが「読込み可」でないと、 ディレクトリにあるファイル名やディレクトリ名を表示させることが できない。

そのディレクトリにあるファイル名を知っていて、そのファイルが「読み込み 可」なら読むことがでる。

アクセスするユーザによって異なったアクセスの許可・拒否がしたいことがあ る。そのために、rwxの指定は、ファイルの所有者、ファイルの属すグループ、 それ以外の人用に3セット用意されている。

例:モードが「rw-r--r--」のファイル

まとめると、「誰でも読めるが所有者しか書けない」。

■ビット演算

◆ビットに対するAND、OR、NOT

◆ビットに対するAND、OR、NOT(複数ビット)

2進数、8進数、16進数で書くのが普通。各桁毎に考える。例。
    0101
AND 1100
--------
    0100
    0101
OR  1100
--------
    1101
NOT 0101
--------
    1010

◆0とANDを取ると0になる。1とANDを取ると元の値が残る。

    0x829e5601
AND 0xffff0000
--------------
    0x829e0000

◆筑波大学のIPv4のIPアドレスの範囲(1)

◆筑波大学のIPv4のIPアドレスの範囲(2)

「/16」、IPアドレスのうち、上位16ビット、 が一致するものを意味する。

◆筑波大学のIPv4のIPアドレスの範囲(3)

10進数255 は、16進数で 0xff、2進数で、11111111。
    130.158. 86.  1
AND 255.255.  0.  0
-------------------
    130.158.  0.  0

◆ネットマスク

IPアドレスと AND を取るための数をネットマスクと言う。 上位は、1だけ並び、下位は 0 だけ並ぶ。 ネットマスクは、次のようになる。

IPv4 のネットマスクの例

IPv6 のネットマスクの例

■通信速度の感覚

次のものと合わせて考えたい。

◆通信速度の単位

毎秒何ビット、bps、bit per second、bit/second
1秒間に何ビット送れるか
Byte/second、毎秒何バイト
1秒間に何バイトビット送れるか。 1 Byte/sec == 8 bps。
ややこしいことに、データ量はバイトで言うことが多く、通信速度は、「ビッ ト/秒」が使われることが多い。(1本の線で1ビットずつ送る感覚。)

情報量の単位と同様に、通信速度にも次のような係数がことがある。

k (キロ、ケイ)
1024 か 1000
M (メガ)
k の 1024 倍か 1000 倍。1,000,000 くらい。
G (ギガ)
M の 1024 倍か 1000 倍。1,000,000,000 くらい。
T (テラ)
G の 1024 倍か 1000 倍。1,000,000,000,000 くらい。

◆通信速度の感覚

10 k bps
よく普及している携帯電話で得られる速度
32 k bps - 56 k bps
電話回線経由で接続した時に得られる速度。
32 k bps または 64 k bps
PHS (Personal Handy Phone) で得られる速度
64 k bps
ISDN (電話回線と同じ電線で直接ディジタル信号を流す時)
100 k bps
MP3 などで圧縮した音楽を流す時に必要な速度。
128 k bps
ISDN で2回線同時に使った時。
1500 k bps (1.5 M bps)
ISDN (光ファイバでディジタル信号を流す時)
1500 k bps (1.5 M bps)
音楽用 CD を圧縮しないでまま流す時に必要な速度。 (1倍速のCDの速度。)
1500 k bps (1.5 M bps)
ケーブルテレビや ADSL という方式でインターネット接続を した時に得られる速度。
5000 k bps (5 M bps)
DVD-Video を再生している時にディスクから読み出されている データの速度。
10 M bps, 100 M bps, 1000 M bps (1 G bps), 10 G bps, 40 G bps, 100 G bps
イーサネット(LANでよく使われている)
11 M bps, 54 M bps, 54 M bps, 72.2-600 M bps, 80-6933 M bps
無線LAN (802.11b, 11a, 11g, 11n, 11ac)
10 M bps - 150 M bps
携帯電話、スマートフォンの規格上の最大速度 (3G, LTE, 4G)
200 k bps -- 12M bps
動画配信のビットレート(画質によって、大きく異なる。)

実習室のパソコンは、1G bps で学内LANに接続されている。

学内LANの基幹部分は、1G bps - 16G bps で接続されている。

筑波大学学内LANは、 SINET5 (2016年-)へ 100Gbps、 で繋がっている。 ただし、 coins、宿舎、無線LAN等の一般的な所から利用する時には、 全体で 30G bps という制約がある。 また、 防火壁(ファイアウォール(firewall)) という、セキュリティを高める仕組みが働くため、速度が低下することもある。

■実習

実習時間中には、 以下の課題をできるだけ多く行いなさい。全部を行う必要はない。

★練習問題(901) WebブラウザーでのHTMLの観察

この課題の前に、 マウスの設定 がなされており、 「副ボタン」(右ボタン)が設定されていることを確認しなさい。

Firefoxブラウザを操作して、 元の HTML (ソース)を表示 しなさい。

  1. HTML を表示したいページを Firefox で普通に表示する
  2. 表示されたページで、何も表示されていない部分(白い部分)にマウスの ポインタを移動して、マウスの主ボタン(左ボタン)でクリックする。(何か選 択している状態だったらこれで解除される。)
  3. マウスの副ボタン(右ボタン)でコンテキスト・メニューを表示する。 Mac では、マウスの右ボタンの代わりに、コントロール・キーを押しながらボ タンを押すことでもよい。
  4. コンテキスト・メニューから「ページのソースを表示」を選ぶ。
コンテキスト・メニューを使うかわりに、「Command+u」 (Command+u)を押す方法もある。

Firefoxのコンテキスト・メニュー、ページのソースを表示。 (クリックで拡大)

★練習問題(902) lsコマンドによるディレクトリとファイルの属性の表示

ls -l により、ディレクトリとファイルの属性を表示しなさい。 必要に応じて lsの-dオプションによるディレクトリそのものの表示 を行いなさい。 (ls コマンドに -ld (-dl, -l -dでも可)オプションを付けなさい。)
$ ls -l literacy-a2.txt [←]
(1つのファイルの属性の表示)
$ ls -l literacy-a*.txt [←]
(複数のファイルの属性の表示)
$ ls -ld ~ [←]
(ホーム・ディレクトリの属性の表示)
$ cd [←]
(ホーム・ディレクトリへ移動)
$ ls -ld  [←]
(カレントワーキングディレクトリ==ホーム・ディレクトの属性の表示)

ファイルの属性 を参考にして、ls -l の結果を、解釈しなさい。今日の実習では特に 次の属性について着目しなさい。

r	読込み可
w	書込み可
x	実行可(ディレクトリの場合は探索可)

★練習問題(903) WWWページ用のディレクトリ作成

筑波大学情報学類コンピューティング環境では、個人の WWW ページは、次のよ うな URL で参照される。

ここで「ユーザ名」を、ログインの時に打つ自分のユーザ名 で置き換える。たとえば、学籍番号が 201854321 の人は、次のような URL で 参照される。 この URL は、次のディレクトリに対応する。 このディレクトリを、mkdir コマンドで作成しなさい。
$ mkdir ~/public_html [←]
$ mkdir ~/public_html/htdocs [←]
作成したディレクトリのその他(others)に対するアクセス許可で x ビットが立っ ていることを確認しなさい。
$ ls -ld ~/public_html [←]
drwxr-xr-x  5 yas  prof  4096  4 10 13:46 /home/prof/yas/public_html
         ^ここ

$ ls -ld ~/public_html/htdocs [←]
drwxr-xr-x  35 yas  prof  5120  4 10 13:49 /home/prof/yas/public_html/htdocs
         ^ここ
さらに、ホーム・ディレクトリにもその他(others)に対するアクセス許可で x ビットが立っていることを確認しなさい。
$ ls -ld ~ [←]
drwxr-xr-x  53 yas  prof  7168  5 15 15:25 /home/prof/yas
$ []
         ^ここ

x ビットがたっていない場合には、TA に相談して chmod コマンドで変更して もらいなさい。chmodコマンドの使い方は、この授業の後半で行う。

★練習問題(904) 単純なテキスト・ファイルの公開

注意:この練習問題は、練習問題 (903)WWW ページ用のディレクトリ作成の後に行いなさい。

ディレクトリ ~/public_html/htdocs/ の下に、単純なテキスト・ファイル (HTMLではない)を Emacs 等で作成して置きなさい。ファイル名の拡張子は、 「.text」または「.txt」としなさい。

作成したファイルのモードを調べなさい。file1.textという 名前のテキスト・ファイルを作成した場合、次のようにその他(others)に対す るアクセス許可で r ビットが立っていることを確認しなさい。

$ cd ~/public_html/htdocs [←]
$ emacs file1.text [←]
(何か簡単な内容を打ち込み、保存して終了する。)
$ ls -l file1.text [←]
-rw-r--r--   1 yas  prof  2 May 22 22:09 file1.text
$ []
       ^ここ
作成したファイルを Web ブラウザで表示しなさい。たとえば、 file1.textという名前のテキスト・ファイルを作成した場合、 次のような URL で参照する。

ユーザ名」を、ログインの時に打つ自分のユーザ名で置き 換えなさい。たとえば、学籍番号が 201854321 の人は、次のような URL を開 きなさい。

HTTP で始まる URL には、public_html/htdocs は含まれないことに注 意しなさい。

★練習問題(905) サンプルのコピー

注意:この練習問題は、練習問題 (903)WWW ページ用のディレクトリ作成の後に行いなさい。

次の HTML ファイルを、ディレクトリ ~/public_html/htdocs の下にコピー し、それを Web ブラウザ表示しなさい。

$ cd ~/public_html/htdocs [←]
$ ls [←]
(sample1.htmlが存在しないことを確認する。)
$ cp ~yas/public_html/htdocs/coins/literacy-2018/samples/sample1.html . [←]
$ ls -l sample1.html [←]
-rw-r--r--  1 yas  prof  525  5 14 16:19 sample1.html
$ []
最後のカレント・ワーキング・ディレクトリの意味の「.」を忘れないこと。 ls -l の結果、その他(others)に対するアクセス許可で r ビットが立っている ことを確認しなさい。

コピーした後、Web ブラウザで次の URL を開きなさい。

ユーザ名」を、ログインの時に打つ自分のユーザ名で置き 換えなさい。たとえば、学籍番号が 201854321 の人は、次のような URL を開 きなさい。

HTTP で始まる URL には、public_html/htdocs は含まれないことに注 意しなさい。

★練習問題(906) 個人のホーム・ページの作成

個人のホーム・ページを作成しなさい)。 各自のホーム・ページは、次の HTML ファイルに対応する。

作成したホーム・ページを、Web ブラウザで開きなさい。 Web ブラウザで次の URL を開きなさい。

★練習問題(907) ディレクトリを指定した時のWebページの内容

URL でディレクトリを指定すると、自動的にそのディレクトリにある 「index.html」という名前のファイルが使われる。この機能を使うと、 各自のホーム・ページは、次のように短く表示できる。

この事を確認しなさい。また、ホーム・ページ以外のディレクトリについても、 この機能が有効なことを確認しなさい。

★練習問題(908) Emacs HTMLモード

Emacs で拡張子が .html のファイルを開くと、「HTML モード」と呼ばれるモー ドになり、HTML の編集に有用な機能が働くようになる。 たとえば、タグに色をつけたり、タグ付けされているテキストに下線を 引いて表示する機能がある。

次のようにして、どのような機能が利用可能か調べなさい。

この結果、ウインドウが開かれ、説明が表示される。説明を消すには、 C-x 1 (Control+x の後に数字の1) と打つ。一度 Emacs を終了して、 もう一度実行してもよい。

★練習問題(909) Emacsの復習

Emacs で、ファイルを作成する方法を復習しなさい。

方法1: 引数にファイル名を与える方法。

方法2: 実行後にファイル名を与える方法

★練習問題(910) Emacs emacs、タブキーによる補完機能

練習問題 emacs、タブキーによる補完機能 を行いなさい。

★練習問題(911) Emacs 他のファイルへの保存

Emacs で別のファイルへ保存する機能を練習しなさい。

★練習問題(912) Emacs、カットの復習

Emacsの カット&ペースト、コピー&ペースト の機能を用いて、カット機能を使って大量のテキストを削除してみなさい。 この機能は、次のような時に有用である。 カットの練習をする時には、まずファイルをコピーする必要がある。 ファイルをコピーするには、次のような方法がある。 Emacs でカットを行うには、次のようにする。
  1. 削除したいテキストの先頭にカーソルを移動させる。
  2. C-SPC、または、C-@ でマークを設定する。
  3. 削除したいテキストの末尾にカーソルを移動させる。
  4. C-wでカットする。
C-SPC でマークを設定できない場合には、 Spotlight のショートカット・キーの解除 を試しなさい。

★練習問題(913) ifconfigコマンドによるIPアドレスの調査(macOS,Unix系)

次の練習問題を行いなさい。

★練習問題(914) ifconfigコマンドによるネットマスクの調査(macOS,Unix系)

ifconfig コマンドは、Unix 系のオペレーティング・システムでネットワーク・ インタフェース(interface)の設定を行う(configure)を行うコマンドである。 ifconfig コマンドを利用すると、そのインタフェースのネットマスクを表示す ることができる。

ifconfig コマンドを使って実習室の自分が利用している iMac の ネットマスク を調べなさい。

$ ifconfig -a [←]
$ ifconfig en0 [←]
macOS の場合、en0 や en1 の項目の inet の行に IPv4 の IP アドレスと ネットマスクが表示される。 ネットマスクは、netmask というキーワードの次に表示される。 IPv6 の場合、inet6 の次に、IPアドレスとネットマスク(prefixlen) が 表示される。

次の例では、IPv4 の IP アドレスは、130.158.86.202 である。 (実行するコンピュータによって、異なる。) ネットマスクは、0xfffffe00 (16進数で fffffe00)である。 IPv6 の IP アドレスは、fe80::6a5b:35ff:fe99:fcfe, 2001:2f8:3a:1701:6a5b:35ff:fe99:fcfe, および、2001:2f8:3a:1701:1801:aa48:c7e0:ddb3 である。 実行するコンピュータや時間によって異なる。 IPv6 の prefixlen は 64 ビットである。

$ ifconfig en0
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
     options=10b<RXCSUM,TXCSUM,VLAN_HWTAGGING,AV>
     ether 68:5b:35:99:fc:fe
     inet6 fe80::6a5b:35ff:fe99:fcfe%en0 prefixlen 64 scopeid 0x4
     inet6 2001:2f8:3a:1701:6a5b:35ff:fe99:fcfe prefixlen 64 autoconf
     inet6 2001:2f8:3a:1701:1801:aa48:c7e0:ddb3 prefixlen 64 autoconf temporary
     inet 130.158.86.202 netmask 0xfffffe00 broadcast 130.158.87.255
     nd6 options=1<PERFORMNUD>
     media: autoselect (1000baseT <full-duplex,flow-control,energy-efficient-ethernet>)
     status: active
$ 

ifconfig コマンドは、macOS だけでなく、Linux を含む Unix 系のオペレー ティング・システムで利用できる。コマンドが見つからない時には、次の ようにコマンドを絶対パス名で打ってみなさい。

$ /sbin/ifconfig -a [←]
あるいは、man ifconfig でマニュアルを表示して、探しなさい。

★練習問題(915) IPアドレスの調査

次の練習問題を行いなさい。

★練習問題(916) FirefoxによるWebページの保存

Firefox で保存したい Web ページを表示しなさい。 そして、その内容をファイル保存しなさい。

保存の方法には、次のような方法がある。
Web ページ,完全
HTML と中に含まれている画像を保存する
Web ページ,HTMLのみ
HTML だけを保存する。
テキストファイル
HTML の中からテキストだけを抜き出して保存する。 空白で字下げなどを行う。
これらの違いを調べなさい。

★練習問題(918) Safariの実行

Web ブラウザとして Safari を使ってみなさい。

★練習問題(919) Google Chromeの実行

Web ブラウザとして Google Chrome を使ってみなさい。

★練習問題(920) macOS 「デフォルトWebブラウザ」

「デフォルト」とは、特に明示的に指定しない時に使われることを意味する。 macOS では、次のような場合に 「デフォルトWebブラウザ」として登録されているWebブラウザが実行される。
$ open http://www.coins.tsukuba.ac.jp/ [←]
$ open file1.html [←]
この結果、「デフォルトWebブラウザ」として登録されているブラウザが実行さ れ、その URL で示されたWeb ページやファイルが表示される。この機能を確認 しなさい。

★練習問題(921) macOS 「デフォルトWebブラウザ」の設定

Safari.app を使えば、「デフォルトWebブラウザ」を好みのものに変更するこ とができる。この機能を確認しなさい。

★練習問題(922) wgetコマンド

wget は、引数として与えられたURLで指定された資源を取得し、ファイルに保 存するコマンドである。コマンドラインから実行できる。次の例は、資源 http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html を取得し、ディレクトリ ~/dir 以下の sample1.html という名前のファイルに 保存している。

$ cd ~/dir [←]
$ wget http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html [←]
簡単な使い方は、次のようにすれば表示できる。
$ wget --help [←]
または
$ wget --help | lv [←]
wget コマンドは、標準出力に使い方を出力する これを lv で表示するには、パイプ機能 | を用いる。

詳しくは、man wget を見なさい。

★練習問題(923) curlコマンド

curl コマンドは、wget コマンドと同様に、指定されたURL のページを取得す るコマンドである。curl は、wget とは異なり、結果を標準出力に出力する。 ファイルに保存したい場合には、 標準入出力の切り替え(redirection リダイレクション)-o オプションを使う。

$ cd ~/dir [←]
$ curl http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html [←]
(画面に表示)
$ curl http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html | lv [←]
(画面に表示)
$ curl http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html > sample1.html [←]
$ curl -o sample1.html http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html [←]
$ curl -O http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2017/samples/sample1.html [←]

curl コマンドを利用してみなさい。詳しくは、man curl を見なさい。

★練習問題(924) Web ブラウザ w3m

w3mは、 iTerm などの文字端末で動作する Web ブラウザである。 w3m を使ってみなさい。

$ w3m http://www.coins.tsukuba.ac.jp/ [←]
$ w3m ~/public_html/htdocs/index.html [←]
次のように打つと、詳しい説明が表示される。
$ w3m --help 2>&1 | lv [←]
w3mコマンドは、標準エラー出力に使い方を表示する。 これを lv で表示するには、2>&1 | を用いる。

詳しくは、man w3m や次の Web ページを見なさい。 http://w3m.sourceforge.net/。 coins では、次のように man コマンドで英語のマニュアルを読みなさい。

$ LANG=C man w3m [←]

★練習問題(925) Web ブラウザ lynx

iTerm などの文字端末で動作する Web ブラウザ lynx を使ってみなさい。

$ lynx -display_charset=utf-8  [←]
$ lynx -display_charset=utf-8 http://www.coins.tsukuba.ac.jp/ [←]
自分が作成した Web ページについては、次のようにして利用できる。
$ cd ~/public_html/htdocs/ [←]
$ lynx -display_charset=utf-8 sample1.html [←]
$ lynx -display_charset=utf-8 https://www.coins.tsukuba.ac.jp/~s18xxxxx/sample1.html [←]
The Unix Super Text 28.3節 参照http://lynx.invisible-island.net/ 参照。

★練習問題(926) Emacs font-lock-mode

font-lock-mode とは、編集しているテキストに含まれるキーワード等を強調し て(色をつけて)表示するモードである。 次のようにすると、font-lock-mode を on にしたり off にしたりできる。こ の機能を確認しなさい。
M-x font-lock-mode[←]

★練習問題(927) HTMLの検査

Another HTML-lint gateway (ミラーサイト) を使って、作成したページの検査を行いなさい。 また、その解説を読みなさい。どの HTML の文法に従うのがよいかを考えなさ い。厳密な HTML の文法に従うことの意義について考えなさい。

★練習問題(928) Firefoxの言語選択

Web ページの中には、1つの URL に対して複数の言語で資源が用意されている ことがある。Firefox は、Web サーバに対して表示可能な言語を送信している。 Web サーバは、受け取った言語のリストの中から、資源を選択して返す。

Firefox の言語選択機能で、どの言語が選択されているか調べなさい。

  1. 「Firefox」メニューから「環境設定」を選ぶ。
  2. 左側のメニューから「一般」を選ぶ。
  3. 「言語と概観」の下の「言語」の所にある「言語設定」ボタンを押す。
言語のリストを編集したり、言語の優先順位を変更することができる。

この機能を利用してみなさい。複数の言語で記述されているページを探して、 表示が切り替わることを確認しなさい。

■課題9 HTML による WWW ページの作成、ファイルのモード、ビット演算、ネットマスク、通信速度

(1) 練習問題(901) から 練習問題(905) を 行いなさい。その後、HTML で次のような条件を満たす WWW ページを作成しな さい(注意: ホーム・ページでなくともよい)。

  1. 次のいずれかの内容を含む。
  2. HTML のソースが、全体で(ヘッダ、タグを含めて) 15 行以上。
  3. <HTML>、<HEAD>、<TITLE> <BODY>タグを含む。
  4. 自分の名前を含む。 漢字の名前がある人は漢字と読み方(平仮名かローマ字))を含む。
  5. 電子メールのアドレスを含む。 (spam対策を行うことが望ましい。)
  6. <TITLE> にタイトルを含む。
  7. 見出しタグ(<H1>、<H2>、<H3>な ど) による見出しを 2 個以上含む。見出しは、木構造に基づいて、親子関係が あることが望ましい。(適切な見出しを付ける練習をすると良い。練習しない と上達しない。)
  8. <P>タグによるパラグラフがある。
  9. <A href="..."></A>によるハイパーリンクを 2 つ以上含む。
  10. <IMG>タグによる画像を1つ以上含む。画像の形式は、PNG、 JPEG、または SVG。IMG タグには、ALT属性を付ける。
  11. 画像が表示されないブラウザで表示しても、すべてのハイパーリンクをた どることができる。
  12. 物理スタイルタグ含まない
  13. 整形のための <PRE>タグを 含まない
  14. 他人の著作物を含まないか、または、含む場合には、全世界からアクセス されても、著作権法上、問題ない。
注意1: 作成した WWW ページの URL (http:// から始まるもの)をレポートに含 めなさい。レポート提出後も WWW ページを修正しても良いが、採点が済むまで は、上の条件を満たし続けること。

注意2: 作成する WWW ページがホーム・ページ ならば、~/public_html/htdocs/index.htmlというファイルを用いても 良い。ホーム・ページではないならば、 ~/public_html/htdocs/index.html とは別のファイル名を用いなさい。

注意3: IMG タグの ALT 属性の確認には、 練習問題 Web ブラウザ lynx が使える。

(2) Web ページには、ある条件の元で他人の著作物を含めることができる。(1) で作成した WWW ページに、他人の著作物がある場合には、その出所をレポー トに記述しなさい。また、その著作物を WWW ページに利用してもよいことを 示す根拠を説明しなさい。他人の著作物を含めてはない場合には、「他人の著 作物は含まれていない」とレポートに記述しなさい。

(3) (1) で作成した WWW ページがホーム・ペー ジかどうか記述しなさい。ホーム・ページの場合、「ホーム・ページである」 と記述しなさい。そうでない場合、「ホーム・ページではない」と記述しなさ い。 ここで、どういう意味で「ホーム・ページ」という言葉を使っているのかを簡 単に説明しなさい。

(4) ビットレートが 1M bps の動画像がある。これを何秒間(何分間、何時間) 感視聴すると、1G バイト (8 G bit)に達するか。計算過程も含めて示しなさい。 ただし、動画再生以外の通信は一切行われないものとする。動画像と共に送ら れる付加的なデータ(パケットのヘッダ等)は無視するものとする。通信の過程 でデータ圧縮は行われないものとする。

(5) 1GB の動画像を含むファイルが Web サーバに置かれている。このファイル を、通信速度が10M bps (bit / s)のネットワークで転送すると、何秒(何分、 何時間)かかるか。計算過程も含めて示しなさい。 ただし、ネットワークの通信速度でデータが転送可能であるものとする。通信 の過程でデータ圧縮は行われないものとする。

(6) 情報科学類の実習室の iMac やサーバが接続されているネットワークでは、 IPv4 のネットマスクとして 255.255.254.0 (16進数で fffffe00) が使われて いる。この値と次の値の AND 演算を行い、その結果を、10進数(130.150.X.Yの 形式)、または、16進数(8桁)で示しなさい。

練習問題 IPアドレスの調査練習問題 ifconfigコマンドによるIPアドレスの調査(macOS,Unix系) 参照。

(7) [加点] ハイパーリンクで、 破片識別子(fragment identifier) を利用したページを作成しなさい。 id属性で、HTML の内部にハイパーリンクの先となる マークをつけなさい。そして、 <A>のhref属性では、# を使って、id属性でマークした部分を指し示しなさい。

レポートには、ページ全体の URL と破片識別子で用いた id 属性の値を含め なさい。

(8) [加点] 次の課題を1つ以上行いなさい。

(8a) [加点] (1) のページが英語以外の言語の場合、英語、英語の場合、日本語 で同一内容のページを作成しなさい。それらのページの間で相互にリンクを貼 りなさい。

(8b) [加点] WWW サーバ Apache には コンテントネゴシエーション 機能の機能がある。この機能を使うと、同じ URL でも、ブラウザの設定により (異なる言語による)異なる内容のページが返される。この機能を用いた WWW ページを作成しなさい。また、Firefox やその他のブラウザの機能を用いて、 そのことを確認しなさい。


Last updated: 2018/05/22 18:18:20
Yasushi Shinjo / <yas@cs.tsukuba.ac.jp>