コンピュータセミナー
2002.5.31


  1. 本日の作業内容

  2. 出席確認

    最初の説明が終わったら出席確認です．パソコンの時計が合っているかを確認したら出席のメールを出してください．今 回の件名は

    seminar 5-31 attend s0240**

    です．それ以外は前回と同じです．

    なお，入力ミスがあると出席として認 められないことになりますので，慎重に行ってください．文 字はすべて1バイト文字 (半角英数字) です．途中に入るスペースは一度に一個だけと してください．スペースは全部で3個です．また，**の部分は自分の学生番号の下二桁 です．他学科の人はそれなりに修正して下さい．

  3. XEmacs (その2)

    前回の授業でXEmacsを使い始めました．このエディタは基本的には「キーバイン ド」や「キーボードショートカット」と呼ばれるキーボード操作により各種の機 能を利用することが前提になっています．便利そうなメニューやボタンアイコン が並んでいますが，文字入力中に一度キーボードから手を離してマウスをつかむ， という思考が中断されるような操作を好まない，プロ向けの使用となっています． そのため，一度これになじむと他の環境に戻れなくなったりするケースがあるよ うです．Windows用のEmacsも利用可能ですので，幅広い「濃い」ユーザが多いの が特徴です．

    • 基本的な操作に対するキーバインド

      ここでは，キーバインドのうち，初めに必要ないくつかについて紹介しておきま すので，自分で試してみてください．なお，ここで利用している表記方法におい て，C - x のようなものは，Ctrlキーを押したままxキーを押す操作で あり，M - x はAltキーを押したままxを押すかもしくは，Escキーを押 したあと一度指を離してxキーを押す操作を意味します．

      表1 XEmacsキー操作対応表

      C - g操作取り消し
      C - _実行取り消し
      C - x C - fファイルを開く
      C - x C - s保存
      C - x C - w別名保存
      C - \日本語入力切り替え
      C - s検索
      C - r上に向かって検索
      C - x bバッファ切り替え
      C - x 1ウィンドウ統合
      C - x 2ウィンドウ分割
      C - x C - c終了
      M - <ファイルの先頭へ
      M - >ファイルの最後尾へ

      これらの操作を行うときには，ウィンドウ下のミニバッファの表示に注意してく ださい．重要な情報はすべてミニバッファに表示されます．何がどうなったか良 く分からなくなったときには，一番上の C - g をやって操作を解除し てください．また，ファイルを新規に編集するときなども，C - x C - f として，ミニバッファに自分でファイル名を入 力して起動する癖をつけてください．拡張子により 編集モードを切り替えるので，初めからファイル名 がきっちりしている方が操作効率が良くなります．

    • カーソル移動に関するキーバインド

      次に挙げるカーソル移動の操作はXEmacs特有のキーバインドではなく，シェル (ターミナル) にお いて，コマンドライン編集にも使用できるものです．また，Sylpheedのメール編 集画面でも利用可能ですし，gEditでも利用可能です．いわば，UNIXの標準的な キー操作と思ってください．また，日本語入力モードでは変換に関する操作に割 り当てられているものもありますので，モードにも注意してください．

      表2 入力画面における編集機能キーバインド

      キーバインドカーソル操作日本語入力時の動作
      C - a行頭へ
      C - e行末へ
      C - f一文字進む
      C - b一文字戻る
      C - n次行へ次候補
      C - p前行へ前候補
      M - a段落先頭へ
      M - e段落末尾へ
      M - f一単語進む
      M - b一単語戻る
      C - kカーソル以降文末まで消去

      行頭や行末への移動，カーソル以降の文字消去などは覚えておくと，コマンドラ インで重宝します．

    • チュートリアル

      XEmacsには操作になれるための「チュートリアル」が用意されています．時間の あるときに是非試してみてください．一通りやってみると，かなりなれてきます． 方法は，「ヘルプ」メニューから「基本」→「Tutorials」→「日本語」を選択 して起動します．ロールプレイングゲームとまでは言いませんが，少しずつ操作 をクリアして先に進む形式になっています．

  4. HTML (その2)

    前回の実習でHTMLファイルの基本構成と代表的なタグについて学習しました．今 回はHTMLの中では最もやっかいな表組みといくつかの特殊な応用について練習し ます．

    • 表の基本

      表は<table></table>により行います．表は英語でtable ですので，そのままです．また，行のことをrow，列のことをcolumnと言います ので，それにちなんだ属性の名前がでてきます．行を制御するタグは <tr></tr>で，個々のセルは <td></td>で記述します．セル独自の属性変更は <td>で行い，行に関するものは<tr>に 加えます．<table>に記述すると表全体に反映します．加えられる属性は背景色や文字色，行揃えなどほとんどのも のが可能になります．

      枠線についても細かい指定が可能です．しかし，今は枠線の有無と太さだけ説明 しておきます．また，全体にわたる属性指定の場合に限定しておきます．枠線は <table>タグの属性として border としておく と表示されます．また，border=5 のようにすると，枠線の太 さを指定できます．次に挙げるのは最も基本的な表組みの例です．

      
<table border>
<tr><td>a11</td><td>a12</td><td>a13</td></tr>
<tr><td>a21</td><td>a22</td><td>a23</td></tr>
<tr><td>a31</td><td>a32</td><td>a33</td></tr>
<tr><td>a41</td><td>a42</td><td>a43</td></tr>
</table>

      表示結果は自分で確かめてみてください．

    • 表における終了タグの省略

      表に関連するタグでは終了タグを省略できるものもあります．たとえば， <td>タグは終了タグを省略しても通常の場合は動作しま す．また，特殊な例では，<tr>タグを省略して， </tr>タグの代わりに<tr>タグを利用す ることも可能です．終了タグを省略するとソースが短くなり，編集中に 見やすくなりますが，論理構成をしっかり確認しないと間違いの元にな りますので注意してください．

    • 様々な表の例

      以下に少し構成の変った表の例を示します．タグの組み方については自分でソー スを表示させて確認してください．

      複数の表を組み合わせて視角効果を持たせる

      罫線を入れた場合には罫線の太さを変えることにより印象が異なります．擬似的 にボタンのように見せることも可能です．<table border=10></tabel>のようにすると枠が太くなります が，組み合わせると以下のような例も可能です．

      Pyramid?

      複数行にわたるデータがある場合

      a11b11c11
      c12
      b12c13
      a21b21c21

      複数列にわたるデータがある場合

      a11b11c11
      a21b21b22c21
      a31b31b32b33c31

      行単位で文字を中央揃えする場合

      a11b11c11
      a21b21b22c21
      a31b31b32b33c31

      特定のセルの背景色を変更する（table属性を指定すると全体の色の指定も可能）

      a11b11c11
      a21b21b22c21
      a31b31b32b33c31

      セルの横幅を指定する場合

      a11b11c11
      c12
      b12c13
      a21b21c21

    • 市販のワープロのHTML書出し機能を使用した表の例

      上記のように、複雑な表のタグを自分で組むのは結構面倒な作業になります．最 近はワープロの機能の一つとしてHTML形式に変換して出力することが可能になっ てきました．ただし，ワープロというものはフォントや文字揃えなど様々な整形 機能を有しているので、それが知らない間にタグに反映されてソースが膨大な量 になっていることもあります．次のページのような実に単純な例でも、ソースを 表示させてみると恐ろしい事態になっているのが分かります．自分で作成すると きにも、見る人の立場になってデータ量の少ないページを作成するように心掛け ましょう．そのためには、このように自分でタグを組むのが一番です．

    • ページ間リンク

      これまで実習してきたページはindex.htmlという名前で保存してきま した．すべてのデータが一つのファイルにあるのでは不便ですし、実際のページ 運用としてはページのデータ量が多くなり過ぎて表示に時間がかかることになっ てしまいます．そこで，内容ごとにページを別に用意して互いにリンクを張って おけばすっきりします．このようなページ間のリンクは「相対パス」による指定 が便利ですし、自分でサーバ上と同じ構成のページをローカルにおいておけば、 修正や編集がローカルで出来るので楽になります．

      実際に次の例で試してみましょう．これまで使用していた index.html のどこかに、次のようなリンクを用意します． 

      
<a href="test.html">Go to link test page</a>

      そして，上のリンク先であるtest.htmlというファイルを用意します． 内容は別になんでも構いませんが、次のリンクだけは作成しておきましょう． 

      
<a href="index.html">Go back to Top page</a>

      これで，二つのページ間の行き来がリンクにより簡単にできるようになります． 相対パスによるリンク先指定なので、ディレクトリ構成などを考えてリンクする 必要があります．この授業の目次ページがまさにそういった構成なので、ソース を参照してみてください．

    • ページ内リンク

      このテキストは最初の本日の作業内容のところの見出し項目をクリックするとそ こに移動するようになっています．このようにページ内の指定した場所に移動す るリンクも可能です．その際は、移動先となる場所 (これをアンカー，錨と言い ます) をまず特定します．そしてその場所に以下のようなタグを置いておきます． 

      
<a name=test_point>Come to this point</a>

      そして，リンクとしては次のようなタグを用意します．

      
<a href=#test_point>Go to anchor point</a>

      これについては，まさにこのページのソースを表示させるのが一番だと思います． また，自分で試すときには，リンクとアンカーの場所までの長さが画面表示ウィンドウの数倍無いとな かなか移動の実感がわかないでしょう．

    • テキストベースで可能な特殊効果

      これはおまけの項目です．特別な画像も言語も使わないで一見動的なページをつ くることも可能ではあります．次のページを参照してください．

  5. GMOME Midnight Commander

    「デスクトップツール」教科書 p.66

    作成したはずのファイルがどうしても見つからない，とか，ディレクトリの階層 構造がごちゃごちゃしてきて良く分からなくなった，と言うときに利用してくだ さい．GNOMEメニューの「ファイルマネージャ」を起動することにより，ディレ クトリ構造をWindowsのExplorer形式で表示してくれます．以下のページも多少 参考になります．

    http://www.ecs.shimane-u.ac.jp/~nawate/lecture/format/node13.html

    http://www.ecs.shimane-u.ac.jp/~nawate/linux/gmc.html

  6. 本日の実習

    HTMLの表組みに関して実習してください．

  7. 宿題

    授業の終りに宿題の案内を出しますので，アナウンスがあれば指示に従ってくだ さい．

目次ページへ戻る