スタイルシート、検索、全学計算機システム

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

                                       筑波大学 システム情報工学研究科 
                                       コンピュータサイエンス専攻, 電子・情報工学系
                                       新城 靖
                                       <yas@is.tsukuba.ac.jp>

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

■連絡事項

■スタイルシート

HTML は、「本来は」、文書の構造を記述する。

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

HTML では、文書の構造を記述することができるが、「表示の方法」 を記述することは、本来はでない。 ワープロは、紙に印刷した時の、このような表示の方法を設定す るためのプログラムである。

表示の方法:

表示の方法を記述するには、スタイルシートを用いる。

◆XML (eXtendible Markup Language)

XML は、タグが定義できるマークアップ言語（＜−＞HTMLはタグが固定）。プ ログラム間でデータの交換に用いる。

■カスケーディング・スタイルシート

◆例

見出しを青くする。 
H1 { color: blue; }

◆カスケーディング・スタイルシートで記述できること

段落書式 文字書式 箇条書き イメージ その他:

◆スタイルシートを書く場所

HTML のヘッダに書く。 
<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>
別ファイルに書いて読み込む。 スタイルシートのURLは、filename.css のようなファイル名が多い。 
<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<LINK rel="stylesheet" type="text/css" href="スタイルシートのURL">
</HEAD>

<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
@import url(スタイルシートのURL);
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>

複数 @import することもできる。 複数のスタイルは、混ぜられる（カスケード）。 対立する定義は、後から出てきた方が有効になる。

HTML のタグの属性として書く。宣言部分だけ。 

<P STYLE="color:#444444">文。文。文。</P>

◆コメント

コメントとは、ある コンピュータ言語の中に記述する、人間が読むために書かれた部分。 CSS では、/* と */ で括った部分がコメントとなる。 この表記法法は、Ｃ言語やＪａｖａ言語と似ている。 （他の言語では、この表記法は使えないことがある。） コメントは、デバッグ時など一時的に コンピュータ言語の機能を無効にしたい時にも使える。

◆基本的な文法

次のような規則の並び 
セレクタ  { 宣言;  }
セレクタ, セレクタ, ..., セレクタ { 宣言;宣言;宣言;  }
１つひとつの宣言は、次の形式。 
プロパティ:式
「式」には、数、文字列、%、単位つきの長さ、URL などが書ける。

◆書式の有効範囲(セレクタ)

普通の HTML の要素(タグ) とは独立にスタイルシートを設定したい時には、次 のタグで範囲を指定する。どのスタイル・シートを適用すべきかは、classや idで指定する。

例 

H1	{ color:blue; } /* <H1></H1> だけ */
UL LI   { color:blue; } /* <UL></UL>の中の <LI> だけ*/
OL > LI { color:blue; } /* <OL></OL>の直接の子供の <LI> だけ*/
H1 + P  { color:blue; } /* <H1></H1>に隣接する <P> だけ*/
 *      { color:blue; } /* 全ての要素 */

.important    { color:blue; }  /* class="important" と指定したものだけ */
P.important   { color:blue; }  /* <P class="important"></P> と指定したものだけ */
#n10          { color:blue; }  /* id="n10" と指定したものだけ */

P:first-line   { color:blue; } /* <P></P> の中の最初の行だけ */
P:first-letter { color:blue; } /* <P></P> の中の最初の１文字だけ */
A:link    { color:blue; } /* 未訪問のリンク */
A:visited { color:blue; } /* 訪問済みのリンク */
A:active  { color:blue; } /* アクセス中 */
A:hover   { color:blue; } /* カーソルを重ねた時 */

◆書式設定の考え方

余白、境界、パディング（詰め物）がある四角い箱。 
　　┌──────────────────────┐
　　│　　　　　　　余白　　　　　　　　　　　　　│
　　│　┌──────────────────┐　│
　　│　│　　　　　境界　　　　　　　　　　　│　│
　　│　│　┌──────────────┐　│　│
　　│　│　│　　　パディング　　　　　　│　│　│
　　│　│　│　┌──────────┐　│　│　│
　　│　│　│　│　内容　　　　　　　│　│　│　│
　　│　│　│　└──────────┘　│　│　│
　　│　│　└──────────────┘　│　│
　　│　└──────────────────┘　│
　　└──────────────────────┘

　　　　　　　　│　エレメントの幅　　│
　　│　　　　　　ボックスの幅　　　　　　　　　　│

◆WWWページデザインの手順

  1. HTML で全部の表示したい内容を記述する。
  2. スタイルシートを埋め込み、見栄えを調整する。
スタイルシートをうまく活用すると、見た目を一度に調整できる。 いちいち <font> で指定すると、変更したくなった時には、 全部変えなければならない。 <span class="classname">のように、クラスを使ってマークして おけば、１個所クラスの設定を変更するだけで全部統一的に変る。 (同様に、ワード・プロセッサでも、スタイルをうまく活用したい。)

注意点

複数のブラウザ（違うバージョンも含む）で表示を確認したい。

◆CSSの利用例

その他、次のページが参考になる。

◆テーブル・レイアウト

スタイルシートを使わずに、 <TABLE> タグ を使って配置する方法がある。

■検索エンジン

The Unix Super Text 28.5節,34章 参照。

インターネット上にある膨大な情報から、必要な情報を見つけ出すためには、 次のような方法がある。

リンク集 とは、他のページへのリンクを集めたWWWページ。 なにかＷＷＷページを探したい時には、すぐに「キーワード検索」を思い浮か べるかもしれないが、実際には、 FAQ FAQやリンク集の方が速いことがある。

◆検索に必要な考え方

ヒット率と選択率

ヒット率
欲しかった情報のうち、どのくらい見つかったか。
選択率
見つかった情報のうち、どのくらいが本当に欲しかったものか。

図? ヒット率と選択率

図? ヒット率と選択率

 あちらを立てればこちらが立たず。 トレードオフ。

３つの論理演算

外枠は、全体（インターネット上の膨大な数のＷＷＷページ）を表す。 色が付いている所が、見つかったデータを表す。

「keyword1」で検索。

図? キーワードを１つ与えた時

図? キーワードを１つ与えた時

 keyword1 AND keyword2 AND keyword3

図? キーワードを３つ与えた時(AND)

図? キーワードを３つ与えた時(AND)

 keyword1 OR keyword2 OR keyword3

図? キーワードを３つ与えた時(OR)

図? キーワードを３つ与えた時(OR)

 NOT keyword1

図? キーワードを１つ与えた時(NOT)

図? キーワードを１つ与えた時(NOT)

 キーワードを１つ与えた時の NOT は使えない。

NOT keyword1 AND keyword2 AND keyword3

図? キーワードを３つ与えた時(AND,NOT)

図? キーワードを３つ与えた時(AND,NOT)

 NOT は、AND といっしょにつかう。 NOT 単独では、使えない。

◆絞込検索

絞込検索（しぼりこみけんさく）のイメージ

図? キーワードを１つ与えた時

図? キーワードを１つ与えた時

図? キーワードを２つ与えた時

図? キーワードを２つ与えた時

図? キーワードを３つ与えた時

図? キーワードを３つ与えた時

絞込検索は、実は、AND と同じ。

keyword1 AND keyword2 AND keyword3

図? キーワードを３つ与えた時 図? キーワードを３つ与えた時(AND)

図? キーワードを３つ与えた時(AND)

◆検索エンジンとWWWロボット

検索エンジン(サーチエンジン)
WWWで検索機能を使う時、実際に検索を行うプログラム。 インターネット上のあるWWWサーバで動いていてる。
検索結果は、手元のWWWブラウザの画面に表示される。

検索対象のデータにキーワードを与える方法

自動抽出したものは、ヒット率はよいが選択率が悪い。 人間が整理したものは、選択率はよいがヒット率が悪い。
WWWロボット。
WWWページからプログラムでキーワードを自動抽出するプログラム。
WWWロボットの動き
  1. ロボットは、あるURLが与えられると、そのページ を訪れる（ページの内容を得る）。
  2. 得たページの内容を解析して、キーワードを抽出する。
  3. そのページにリンクが含まれていたら、1 に戻って繰り返す。
このような繰り返しの方法を、コンピュータ・サイエンスの用語では 再帰(recursion) とう。ロボットは、世界中の WWWページを歩き回り、キーワードを抽出する。 ただし、一度訪れたことがあるページは記録しておいて、２度訪れないようす る。

◆FAQ

インターネット上の重要な情報源に FAQ がある。 FAQ は、もともとは、 Frequently Asked Questions の略で、「よくある質問」という意味である。 実際には質問だけでなく て答えもいっしょに書かれている。しかも、実用的で非常に品質がよい情報 が集まっていることが多いので、質問したいことがなくても、自分の興味がある 分野の FAQ を探して読むことはよい勉強になる。

FAQ を作る活動は、ネットワーク・ニュースでよく行なわれている。というの も、繰り返しなされる質問をまとめて定期的に投稿することで、記事の質を高 めることができる。インターネットで流通するようなフリー・ソフトウェアで も、マニュアルとは別に FAQ が作られることもよくある。

■筑波大学全学計算機システム

情報科学類、社会工学類などは、学類独自で教育用コンピュータを持っている。 その他の独自のコンピュータを持っていない所は、 筑波大学全学計算機システム (通 称: icho )を使う。（2008年までは、筑波大学教育用計算機システムという 名前だった。） このコンピュータは、主に、共通科目「情報処理」の実習（全学必修）を受講 する時に使う。情報科学類生は、「コンピュータリテラシ」で代替している。

情報科学類生も筑波大学全学計算 機システム を利用することができる。

◆利用可能なコンピュータ

「デュアルブート」とは、電源を入れた時にどのオペレーティング・システム を実行するか（ブートするか）を、２つの中から選択できるもの。両方同時に は使えない。

◆ドキュメント

次の場所にドキュメントがある

筑波大学全学計算機システムホーム・ページ
http://www.u.tsukuba.ac.jp/
情報処理実習用手引き
http://www.u.tsukuba.ac.jp/tebiki/tebiki20090509.pdf。 上のホーム・ページから、左側のメニューの「共通科目情報処理」グループの中から「情報処理手引き」を選ぶ。
筑波大学統一認証システム
https://account.tsukuba.ac.jp/index.html

◆筑波大学統一認証システム

筑波大学内の 複数のコンピュータ アカウントで、共通のパスワードを使えるようにしたもの。

重要なアカウント

パスワードは、特別のページで変更する。すると、全部の提携しているシステ ムで変更される。ただし、共通なのは、パスワードだけで、 ユーザ名は異なる ことに注意しなさい。

例:

筑波大学全学計算機システム
s学籍番号下7桁
アクセスポイント(無線LAN)
学生証のバーコードに記載された13桁のID
2009年入学の学生については、「初期パスワード」は、Twins の初期パスワードと 同じである。

パスワードを忘れた時には、所定の場所に学生証を持って行き、再発行手続きを行う。

■実習

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

★練習問題(1201) CSSの観察

自分がよく見る WWW ページについて、スタイルシートが使われているかを観察 しなさい。 Firefoxブラウザを操作して、元の HTML (ソース)を表示させなさい。
  1. 「表示」メニューから「ページのソース」を選ぶ。
スタイル・シートが別のファイルに含まれている時には、 その URL をコピーする。 相対形式で 書かれている時には、絶対形式に変換して、 その URL を Web ブラウザに与える。

★練習問題(1202) Wikiが利用している観察

学類コンピューティング環境 のページ で利用されているスタイルシートを表示しなさい。そして、どのよ うな機能が利用されているかを調べなさい。

★練習問題(1203) WWW検索エンジンの利用

WWW検索エンジンで次の演算を実行してみなさい。

★練習問題(1204) 図書検索

http://www.tulips.tsukuba.ac.jp/,筑波大学付属図書館 で図 書の検索を行いなさい。３つの演算(AND, OR, NOT)をどのようにして利用する かを調べなさい。

★練習問題(1205) よいキーワード

検索エンジンに与えるべきよいキーワードについて考えなさい。 たとえば、次のようなものが考えられる。 これらの点を評価しなさい。また、他にどのようなキーワード、または、その 組み合わせ方法をよいか考えなさい。

★練習問題(1206) orchid-calc

ssh コマンドで次のコンピュータに遠隔ログインしてみなさい。

ユーザ名とパスワードは、coins のものを使う。 (iMac と共通である。)

練習問題(1104) 遠隔ログインによるコマンドの実行 に記述されているコマンドを実行してみなさい。 そして、遠隔ログインを行っていない時（ローカルでの実行結果）と比較しなさい。

ホーム・ディレクトリの内容を比較しなさい。

★練習問題(1207) 筑波大学全学計算機システム／ichoへの遠隔ログイン

筑波大学全学計算機システムのログイン・サーバ icho にssh でログインし なさい。 
% ssh icho.u.tsukuba.ac.jp -l s09xxxxx [←]
または 
% ssh s09xxxxx@icho.u.tsukuba.ac.jp [←]
coins からでは、次の方法でもよい。 
% ssh icho.u.tsukuba.ac.jp [←]
情報科学類生で、s から始まるログイン名の場合、 coins と icho でユーザ名同じである。 この場合、-l オプションや @ によるユーザ名の指定は不要である。

パスワードは、coins と icho で独立に管理されている。 icho は、筑波大学統一認証システムで管理されている。

練習問題(1104) 遠隔ログインによるコマンドの実行 に記述されているコマンドを実行してみなさい。 そして、遠隔ログインを行っていない時（ローカルでの実行結果）と比較しなさい。

ホーム・ディレクトリの内容を比較しなさい。 coins にあり icho にはないファイルやディレクトリには何があるか。 逆に、icho にはあり、coins にはないファイルやディレクトリには何があるか。

★練習問題(1208) 筑波大学全学計算機システム／手引きの表示

情報処理実習用手引きを表示しなさい。

★練習問題(1209) 筑波大学全学計算機システム／Webメールの利用

(全学計算機)情報処理実習用手引き 3.2節 参照。 全学計算機システムに届いているメールを、Web メールの機能を使って読みなさい。 ここで、次のようなことを行いなさい。

★練習問題(1210) 筑波大学全学計算機システム／メールをThunderbirdで読む

(全学計算機)情報処理実習用手引き 3.3節 参照。 (coinsの) Thunderbird で、全学計算機のメールを読めるように設定しなさい。 注意。送信と受信は、独立に設定できる。送信には、SMTP、受信には、IMAP、または、POPが用いられる。

★練習問題(1211) 筑波大学全学計算機システム／メールをThunderbirdで書く

全学計算機では、電子メールを発信する時に次の方法を用いている。 送信の設定をするには、次の段階を踏む。 この方法で人士メールを発信しようとした場合、パスワードの入力が求められる。

★練習問題(1212) 筑波大学全学計算機システム／「利用者システム」の利用

全学計算機システムには、「利用者システム」と呼ばれる、個人の設定や初期化を行うWebアプリケーションがある。 このWebアプリケーションで提供している機能を調べなさい。

★練習問題(1213) 筑波大学全学計算機システム／電子メールの転送機能の利用

全学メールの転送状態を確認しなさい。 全学計算機のメールを毎日読むようにしなさい。 毎日読まない人は、他の毎日読むメールのアカウントへ転送しなさい。 転送の設定をしたら、それが動作していることを確認しなさい。

★練習問題(1214) 筑波大学統一認証システムの利用

次の手順で、筑波大学統一認証システムの Web ページを開きなさい。 登録情報確認で、自分の ID が登録されていることを確認しなさい。

★練習問題(1215) 筑波大学統一認証システムによるパスワードの変更

筑波大学統一認証システムで、パスワードを変更しなさい。 パスワードを変更する時には、次の点に注意しなさい。 パスワードを変更した場合、 それが有効になるまで時間がかかる(約5分)ことがある。 たとえば、パスワードを変更した直後に、ssh で icho に接続した直後には、古いパスワードが 有効なことがある。

■課題12 CSSによるWWWページの作成、検索、全学計算機システム

以下の問題、および、回答をテキスト・ファイルに記述し、 レポート提出ページから提出しなさい。

(1) HTML と CSS で次のような条件を満たす WWW ページを作成しなさい。

  1. 課題10の条件を すべて満たす。（同じページを、提出してもよい。）
  2. ２つ以上のタグのスタイルを変更する。そのうち１つ以上は、class を使う。
  3. 同じ class のスタイルを、２個所以上で利用する。 ２カ所としては、１つのHTML文書の内部でもよく、また複数の HTML 文書に またがっていてもよい。
作成した WWW ページの URL をレポートに含めなさい。 なお、この提出する WWW ページは、 ホーム・ページでな くともよい。

(2) 内部的にWWWロボットが利用されていると思われる検索エンジンを利用しな さい。10件以下の Web ページがヒットするような、キーワード(できるだけ少 なく)の組み合わせを探しなさい。この時、AND演算、OR演算、NOT演算を利用し てよい。レポートには、利用した検索エンジンの URL、および、キーワードと 演算子による式を書きなさい。

(3) 全学計算機のメールについて、次のことを行いなさい。

届いたメールの「一部」をレポートに含めて、上記のことがきちんと行えたこ とを示しなさい。全学計算機のメールを読んだ方法を報告しなさい。なお、全 学計算機で「~/.forward」による転送を設定した人は、転送先で返事を書いて もよい。

(4) 全学計算機のメールを毎日読むためにどのような行動を行うかを書きなさい。

(5) 手引きの次の部分を読みなさい。

そして次の次の項目について簡単に説明しなさい。

(6) [加点] (1) で、講義の範囲を超えたスタイルシートの機能を利用しなさい。 そして、その機能の説明、どこに利用しているか、および、その機能の有用性 を書きなさい。

(7) [加点] （全学計算機）「情報処理情報処理実習用手引き」を読みなさい。 次の言葉について、調べなさい。

筑波大学図書館の本を検索しなさい。どのような本をどのような方法で検索したかを書きなさい。 筑波大学図書館にあるコンピュータ関連の電子ジャーナルを２つ上げなさい。

Last updated: 2009/06/04 15:50:42
Yasushi Shinjo / <yas@is.tsukuba.ac.jp>