Logical Thinking and Programming in 2013 Autumn
Minohara Class

Home >> Lecture 1

第1回 HTMLの復習とさまざまなセットアップ

HTMLの復習

情報基礎では、HTML+CSSの基礎について学習しました。

人間が紙に印刷された文章を読む時は，文字の大きさや色，配置などで，見出しや本文を何気なく認識することができます。しかしコンピュータにとっては、このように曖昧な基準で見出しや本文を解釈することがとても難しのです。

そこで、コンピュータが解釈しやすいように文章の構造を明示的に記述したものが、HTML（Hyper Text Markup Language）です。また、文字の大きさや配置、色など、文章の見栄えに関する点は、CSS（Cascading Style Sheets）という言語で記述することとなっています。

HTMLとCSSで記述されたWebページは、FirefoxやSafariなどのWebブラウザというプログラムでまず解釈されます。Webブラウザは、解釈した結果を人間が見やすい形に整形して表示してくれます。Webブラウザは、URLで指定されたHTMLファイルをまず最初に取得します。その後、取得したHTMLファイルを解析し、Webページの表示に必要なファイルがあれば、追加でファイルを取得して表示します。

Webページとブラウザの関係

HTMLでは、タグで文章の構造を明確にしていくことで、ページを構成しました。下記に示すのは基本的なHTMLの文書です。


<!DOCTYPE html>

<html>

<head>

  <title>タイトル</title>

</head>

<body>本文</body>

</html>

このように、HTMLのタグは開始タグと終了タグで文章を囲むことによって挿入されます。開始タグは<html>のようにタグ名を<>で囲んだもので表現されます。一方終了タグには、</html>のように「/」が入ります。タグで囲むべき文字列が存在しない場合は、<br />のように開始タグと終了タグを合わせて記述することもできます。

また、タグには属性を指定することができます。属性を指定するためには、開始タグのタグ名の後に半角スペースを入れた後ろに「属性名=”値”」と記述します。たとえば、例えば、pタグにクラス「important」を指定する場合は、以下のように記述します。


<p class="important">この要素はimportantクラスが適用される</p>

<p>この要素には適用されない</p>

属性の指定がよく使われるのはリンクを張る場面などです。下記の例では、教材のトップページに対してリンクを作成しています。


<a href="http://ipl.sfc.keio.ac.jp/text/pro-2013-9/">共通教材トップ</a>

下記は実際に上記のようにして作ったリンクです。

共通教材トップ

表をテーブルタグを利用して作成します。tableタグは全体をtrタグは行の指定を、 tdとthは、セル（特定の行の特定の列）の指定を行なうことができます。 tdとthの違いは、tdは通常のセル用で、thは見出しのセル用です。 thの場合は、通常では、中央揃えのボールド体で表示されます。

タグ	属性	値の指定
table	width	%で横幅の比率を指定
	border	枠の幅をピクセル単位で指定（0で枠無し）
	cellpadding	セルの余白の大きさをピクセル単位で指定
	cellspacing	セル間の間隔をピクセル単位で指定
tr	cellhalign	その行のすべてのセルに指定される横方向の揃え
tr	cellvalign	その行のすべてのセルに指定される縦方向の揃え
th/td	align	そのセル内の横方向の揃え
	valign	そのセル内の縦方向の揃え
	rowspan	縦方向に何行そのセルが跨がるかの指定
	colspan	横方向に何列そのセルが跨がるかの指定

rowspanやcolspanで複数の行や列に跨がる指定をした場合、その分のセルの指定はしなくても良いことになります。

valignあるいはcellvalignで使えるのは、top（上端）、middle（上下中央）、bottom（下端）、baselineのいずれかです。 alignおよびcellhalignで使えるのはleft（左端）、center（中央）、right（右端）、justify（両端）、char（特定の文字）のいずれかです。


<table border="1"  cellpadding="5" >
	<caption>結合したコマがある表の見本</caption>
	<tr><th rowspan="2"><th colspan="2">平均</th>
		<th rowspan="2">赤<BR>目</th></tr>
	<tr></th><th>体長</th><th>体重</th></tr>
	<tr><th>オス</th><td align="right">1.9<td align="char.">0.003<td>40%</tr>
	<tr><th>メス</th><td align="right">1.7<td align="char.">0.0022<td>43%</tr>
</table>

上記のような記述は以下のように表示されます。この本文では、CSSでtableの表示属性を規定してありますので、ちょっと色が着いたりしています。この例のように、tr、tdやthは、/tr、/tdと/thがなくても表示されますが、なるべく、終了のタグを入れてください。

結合したコマがある表の見本
	平均		赤目
	体長	体重	赤目
オス	1.9	0.003	40%
メス	1.7	0.0022	43%

Finderと環境のセットアップ

FinderでFinderメニューの「環境設定」から、「詳細」のパネルで、「すべてのファイル名拡張子を表示」にチェックマークを入れてください。

デスクトップで、Finderで「表示」メニューから、「表示オプションを表示」を選んで表示されるパネルで、「並び順序」を「グリッドに添う」を選んでおいてください。Finderの「表示」メニューの「整頓」を選ぶと、デスクトップのアイコンがグリッドに添って整頓されます。

アップル（）メニューの「システム環境設定」あるいは、Dockにある「システム環境設定」を立ち上げます。

「Dock」のアイコンを選ぶと、Dock関係の設定ができます。

設定が終わったときに、再び、すべての環境設定のアイコンを表示させたいときは、上部のタイトルバーにある「すべてを表示」を選んでください。

「ExposéとSpaces」のアイコンを選んで、Spacesのタブで、「Spacesを有効にする」を選ぶと４つ（標準で）の画面を切り替えることができます。「メニューバーに操作スペースを表示」にチェックマークを入れると、メニューバーで画面を切り替えることができます。Mac OS X 10.7以降は、Mission Controlになっています。 Mission Controlの中でSpacesの設定ができます。

「ユニバーサルアクセス」から、ズーム機能をONにして下さい。マウスホイールをControlキーを押しながら回すと画面の拡大・縮小ができます。いかないときは、「オプション」ボタンを押して、「スクロールホイールと修飾キーを使ってズーム」にチェックを入れて下さい。修飾キーは、以下のように表されます。

⌘ はコマンド（command）キー
⌃ はコントロール（control）キー
⇧ はシフト（shift）キー
⌥ はオプション（option）キー

Mac OS X 10.6以下の場合は、「アプリケーション」フォルダの中にある「ユーティリティ」フォルダの中の「Spaces.app」をDockに持っていき、登録します（アイコンをドラッグしてDock上で離すと登録されます）。このアプリケーションを使うと、ウィンドウ単位でどの画面に表示するかを動かして設定することができます。

「アプリケーション」フォルダの中にある「辞書.app」をDockに登録します。起動してみてください。「辞書」メニューの環境設定から、辞書を追加することができます。スクロールさせて、「Wikipedia」や「New Oxford American Dictionary」、「Oxford American Writer's Thesaurus」にもチェックマークを入れてみてください。検索の幅が広がります。Mac OS X 10.7以降は、ドイツ語やフランス語の辞書なども登録されています。

「ターミナル」というアプリケーションをDockから起動し、%のプロンプトの後に、typingtestというコマンドでタイピングのテストのアプリケーションを起動することができます。また、中央サーバ（名前は授業で教えます）に入った場合は、yumikoという萩野先生が作られた優れたタイピング練習ソフトがあります。

miとフォルダのセットアップ

「アプリケーション」フォルダの中から、「mi.app」アイコンを選び、それをDockに持っていき、登録します（ドラッグしてDock上で離すと登録されます）。

CNS HomeDirのフォルダの中のpublic_htmlフォルダの中に、Finderの「ファイル」メニューの「新規フォルダ」から、新しいフォルダを作り、フォルダ名をproject2013にします。

project2013のアイコンをCommand+Optionキーを押しながら、デスクトップにドラッグして、エイリアスを作ります。エイリアスとは実体のないファイルで、参照だけをするものです。

Dockからmiを起動し、miのメニューから「モード設定」を選び、ダイアログを表示します。

最上部のモードのポップアップメニューで「HTML」を選びます。フォントのサイズを24ptにしましょう。

ツールのタブを選び、左側に出ている項目から、「ブラウズ（Safari）」を選び、コマンドショートカットの「R」を消します。

左側に出ている項目から、「ブラウズ（Firefox）」がなかったら、その下側の「新規ツール」のボタンをクリックし、名前の項目に「ブラウズ（Firefox）」を入力し、挿入文字列の欄に「<<<BROWSE(Firefox)」と入力します。

「ブラウズ（Firefox）」において、コマンドショートカットの欄に「R」を入力します。これで、Command+RでFirefoxが起動されるようになります。

設定ができたら赤ボタンで消しましょう。

miで「ファイル」メニューから、「新規」の項目のサブメニューの中から「HTML」を選んで、HTML形式のテキストファイルを作成します。

テキストの保存は、デスクトップのproject2013フォルダの中に行ないます。ファイル名の最後は、.htmlという拡張子をつけてください。

ハングル文字とディーバナーガリー文字を使いましょう

「アプリケーション」フォルダの中から、「テキストエディット.app」アイコンを選び、それをDockに持っていき、登録します（ドラッグしてDock上で離すと登録されます）。

スクリプトメニューから「言語とテキストを開く」を開き、「入力ソース」から「Devanagari - QWERTY」と「Hangul」にチェックマークを入れます。「Hangul」は、「HNC Romaja」だけにチェックマークを入れましょう。

Command+Spaceでスクリプトの切り替えができます。また長押しするとメニューが出ますので、そこで、また、Command+Spaceで切り替えができます。

その１：テキストエディットを起動して、配られたハングル文字の表を元に、自分の名前をローマ字入力の方式と同様にして入力してみます。

「あ」から「お」までは、Shiftキーで出します。
あるいは、「あいうえお」は、「xa」、「xi」、「xu」、「xe」、「xo」と入力します。
「やゆよ」は、「xya」、「xyu」、「xyo」と入力します。
「す」はsとwで打ちます(HNCモードのとき)。
「つ」はSとwで打ちます(HNCモードのとき)。
「ち」はjとiで出せます。
「わ」は、「xwa」と入力します。スペースキーで確定し、Deleteキーで入力した空白文字を一字消してください。
「かん」、「さん」など、「ん」で終わる場合は、パッチム「ᆫ」を用います。「kan」、「san」とローマ字入力すればOKです。「あん」や「いん」などの場合は、「xan」や「xin」と入力します。

その２：テキストエディットを起動して、配られたディーバナーガリーの文字の表を元に、自分の名前をローマ字入力の方式と同様にして入力してみます。各音節の特殊な入力方法は、以下のようになっています。

「あいうえお」は、Optionキーを押しながら、「aiueo」を押します。
「ち」はiとcで打ちます。
「し」はiとS(大文字のエス）で出せます。
「つ」はtとsとuで出せます。
「ふ」はPとuで出せます。
「わ」はvとaで出せます。

練習問題01-1

miでハングル文字の５０音表をtableタグを用いて作ってみましょう。hangul.htmlで保存します。
miでディーバナーガリー文字の５０音表をtableタグを用いて作ってみましょう。devanagari.htmlで保存します。

valign, align, border, colspan, rowspanなどの指定も使ってみましょう。

その他の有用なソフトウェアの使い方

ターミナル

「アプリケーション」フォルダの下の「ユーティリティ」フォルダの下にある「ターミナル.app」を立ち上げます。画面のサイズが、横80文字×縦24行にして下さい。また、「環境設定」の「設定」タブを選んで下さい。更に、この中にタブが幾つか並んでいるのですが、「テキスト」のタブを選んで、フォントを24pt以上（Menlo Regular 24pt）にして下さい。それから、「詳細」のタブで、文字エンコーディングを「Unicode（UTF-8）」にしておいて下さい。

ターミナルで使えるコマンド（最後はReturn/Enterの改行コードを入れて入力します）は、いろいろとあるのですが、以下の記事などを参考にしてみて下さい。

Macのコマンドラインで使える便利なツール10選

ホストコンピュータへのログインとタイピングソフトウェア

sshというコマンドを利用して、ホストコンピュータにログインしてみます。 %は、シェルが表示するプロンプト（入力を促す文字）だと思って下さい。以下のホストコンピュータ名は、授業で指示します。

% ssh ホストコンピュータ名

これで、ホストコンピュータに入ります。なお、ターミナルの設定がホストコンピュータ側でされていません。そこで、以下のコマンドを入力して下さい。 vt100というのは、Unixの初期で使われた文字端末（ターミナル）です。画像検索してみて下さい。DECという会社が作っていました。

% set term=vt100

あまり知られていませんが、「yumiko」というのが萩野先生が作られて、 SFCでは長く使われてきたタイピング練習のためのソフトウェアです。ただし、文字コードがJISコードになっています。ターミナルの設定に拠るのですが、多くはUnicodeで日本語を表示する設定、あるいはEUCコードか、 Shift-JISコードで日本語を表示する設定になっています。そのため、yumikoをそのまま起動してしまうと、日本語がうまく表示されません。日本語変換ソフトウェアである「nkf」を利用して次のようにして起動します。

% yumiko | nkf -uw 　　　これはyumikoをUnicodeで表示します
% yumiko | nkf -ue 　　　これはyumikoをEUCで表示します
% yumiko | nkf -us 　　　これはyumikoをShift JISで表示します

ターミナルにあわせて、上手く表示できる方法を上記の中から選んでください。最初の設定で、Unicodeにしてあれば、「yumiko | nkf -uw」で起動すれば文字化けがしません。文字がうまく表示されない場合は、「ｑ」または「９」のキーを押せば終了することができます。なお、ホストコンピュータから抜けるときは、次のようなコマンドを入力してください。

% exit

辞書

アプリケーションフォルダの下にある「辞書.app」をクリックして起動してみて下さい。辞書を見ることができます。環境設定において、辞書を追加することができます。ドラッグすることで、優先順位を変えることができます。また、Wikipediaにチェックを入れると、どの言語のWikipediaを参照するかのパネルが現れます。

Mac OS X 10.8からは、ドイツ語、フランス語、Oxfordの辞書・シソーラスのイギリス語版、中国語の辞書が追加されました。もし、Mac OS X 10.6までを使っていた人は、10.6までの小学館の「大辞泉（国語辞典）」、「類語例解辞典」、「プログレッシブ英和・和英中辞典」などを「ライブラリ」フォルダの「Dictionaries」にコピーしてくれば再び使えるようになります。

Grapher

新規のグラフ画面を開いて、「y=」のところで、「y=x²」を入力してみて下さい。上付きにするには、「^」のキーを入力します（日本語キーボードの「へ」の位置にあります）。上付き状態から戻したいときには、再び、右のところをマウスでクリックします。キャレットが大きく戻る筈です。Return（Enter）キーを押すと、グラフを描画してくれます。

区間積分をしたいときは、「方程式」のメニューのところで、「積分...」を選びます。でてきたダイアログでxの下限値と上限値を設定すると、グラフの下側とx軸の間の面積を求めてくれます。また、方程式自体を微分形や積分形に直したいときは、「微分」「積分」のメニューを選びます。

テキストエディット

アプリケーションメニューの「環境設定」の「新規書類」のタブで、フォーマットをリッチテキストにしておきます。 RTF形式のファイルを作れます。また、Microsoft Wordのdoc形式やdocx形式にもある程度対応しています。フォントも少し大きめのサイズにしておいた方が良いでしょう。「開く／保存」のタブところで、Unicode（UTF-8）を標準にした方が良いでしょう。 Mac OS X 10.8からは、「フォーマット」メニューで「ページサイズで表示」を選択した方が、通常のワードプロセッサっぽく使えます。また、「編集」メニューの「スピーチ」のサブメニューの「読み上げを開始」で、システム環境設定で設定してある声で読み上げてくれます。 Mac OS X 10.8からは、日本語の読み上げもできるようになりました。ただし、日本語の音声をインストールするためには管理者権限が必要になります。

計算機

「表示」メニューで「科学計算」モードと「プログラマ」モードに変えることができます。また、「換算」メニューで単位を換算することができます。

アクティビティモニタ

「ウィンドウ」メニューから、「アクティビティモニタ」を選択しましょう。現在、稼働しているプロセスの一覧を出してくれます。

Logical Thinking and Programming in 2013 Autumn Minohara Class