作成者別アーカイブ: hattori

第3回 ウェブの仕組み

リンク

ハイパーテキスト

HTMLはHyperText Markup Languageの略ですが、ハイパーテキストとは何でしょうか?これは、文章を最初から順に読んでいくだけではなくて、文章の中に「リンク」(「ハイパーリンク」と言う場合もあります)があり、それをたどると関連するところへジャンプできるようにしたものです。

練習問題 03-1(☆☆☆)
  1. 参考資料でリンクの書き方を調べなさい。
  2. 自分の小学校、中学校、高校のホームページを検索し、練習問題02-4で書いた自己紹介からリンクしなさい。
    • ホームページが見つからない場合は、箇条書きに慶應大学を追加して、SFCのホームページにリンクしなさい。

他の人のサイトに無断でリンクを張るのは構わないのでしょうか?著作権法に関しては問題無いと解釈されています(下記参考資料を参照)。ただし、そのサイトにリンクに関する条件や指示が書かれている場合は、道義的にそれを尊重すべきでしょう。

URLの指定

リンクする先はURLによって指定しますが、これはUniform Resource Locatorの略で、ウェブページの住所のようなものです。例えばSFCのホームページのURLは http://www.sfc.keio.ac.jp/ です。

典型的なURLは次の形をしています。

  • スキーム(プロトコル)は、ブラウザがどうやってページのソースを取ってくるかという方法を表しています。普通は http: ですが、ネットバンキングなど通信を暗号化する場合は https: を使います。ファイルをダブルクリックして開いた時は file: ですが、これはネットワークを使わずに自分のコンピュータに保存されているファイルを使うという意味です。
  • ホスト名は、それぞれのコンピュータに付けられた名前で、どのコンピュータからソースを取ってくるかを示しています。プロトコルが file: の場合は、自分のコンピュータからに決まっているので、ホスト名は書きません。
  • パス名は、コンピュータの中でどのファイルを取ってくるかを示しています。

スキーム(プロトコル)とホスト名については、「情報基礎2」で詳しく勉強します。

絶対URLと相対URL

URLは住所のようなものなので、世界中のウェブページの中から目的のページを探し出せるようになっていますが、その分どうしても長くなってしまいます。しかし、近所の家について話す時には「うちの2軒右の家」と言って、いちいち「神奈川県藤沢市…」と言わないように、今表示しているページのURLを基準にして「近所」のウェブページを簡単に指定できる書き方もあります。

練習問題 03-2(☆☆)
  1. ブラウザで http://itclass.sfc.keio.ac.jp/guide/index.html をアクセスしなさい。
  2. インスペクタでこのページのHTMLを表示し、「総合政策・環境情報2014年度以降入学者」のリンク先がどのように指定されているか見なさい。
  3. 「総合政策・環境情報2014年度以降入学者」のリンクをクリックし、そのページがどのようなURLなのか見なさい。

http://itclass.sfc.keio.ac.jp/guide/index.htmlのように、どこにあっても常に同じページを指すURLを「絶対URL」、new.htmlのように現在のページを基準にして他のページを指すURLを「相対URL」と呼びます。

絶対URLの利点
全世界のどのウェブページでも指し示すことができる。
リンクを書く場所によらず、同じURLになる。
相対URLの利点
短く書くことができる。
複数ページから成るウェブサイト全体を他の場所に移動する時、リンクを書き直す必要がない。

URLの書き方の規則は、次の「ファイルシステム」を勉強すればわかります。

http://itclass.sfc.keio.ac.jp/guide/index.htmlは、http://itclass.sfc.keio.ac.jp/http://itclass.sfc.keio.ac.jp/guide/でも同じページが表示されますが、転送や省略の機能を使っているので、http://itclass.sfc.keio.ac.jp/guide/index.htmlが正式なURLです。

ファイルシステム

URLのパス名の書き方を知るには、コンピュータがファイルをどうやって管理しているかを知らないといけません。ディスクの中でファイルがどのように格納されているかということを「ファイルシステム」と呼びます。

ファイルとディレクトリ

(PPT版ダウンロード)

ファイル名には日本語の文字も使えますが、トラブルの原因になる(例えばWindowsとMacの間でファイル転送した時に正しく表示されない)ことがあります。また、ファイル名の中に空白文字が入っていると操作を間違いやすくなります。この授業では、ファイル名にはアルファベットと数字だけを使うようにしてください。

アクセス権

自分のファイルを他の人が勝手に読み書きすると困りますが、複数人で共有したい場合もあるので、ファイルごとにアクセス権を設定できます。

(PPT版ダウンロード)

普通はユーザごとに別のディレクトリを使い、他のユーザは勝手に書き込んだりできないようになっています。しかし、設定を変えれば他のユーザも書き込めるようにできます。共用領域を使って練習してみましょう。

練習問題 03-3(☆☆☆☆)
  1. エディタで適当な内容を書き、ex03-3.txtという名前で保存しなさい。
  2. Finderのメニューで【移動】→【フォルダへ移動…】を実行し、/pub/sfc/ipl/info1-freeの中身を表示しなさい。これは、共用領域の中にあるディレクトリで、誰でもファイルを作れるように設定してあります。
  3. ex03-3.txt/pub/sfc/ipl/info1-freeに移動してみなさい。
  4. 他の人が作った同じ名前のファイルがあると移動できません(他の人のファイルに上書きする権限は無いため)。何か別の名前に変えてから移動しなさい。
  5. 隣の人からファイル名を教えてもらい、隣の人が作ったファイルをエディタで開けるかどうかやってみなさい。また、そこに何か書き足して保存しようとするとどうなるでしょうか?
  6. ファイルを右クリックして【情報を見る】を実行しなさい。
  7. ファイルの情報の一番下に「共有とアクセス権」があります。「everyone」のところが他のユーザからのアクセスを許可・禁止するところです。アクセス権は何になっているでしょうか?
  8. 隣の人に、ファイルの「everyone」のアクセス権を「読み/書き」に変更してもらい、隣の人のファイルを変更して保存できるかやってみなさい。

ファイルシステムとURLの対応

  • プロトコルが file: の場合、ファイルシステムの絶対パス名の前に file:// を付けたものが絶対URLになります。例えば /xxx/yyy.html の絶対URLは file:///xxx/yyy.html です。ホスト名を書かないのでスラッシュが3個並ぶことに注意してください。
  • プロトコルが http: の場合、ファイルシステムの絶対パス名がそのまま絶対URLのパス名部分になるとは限りません。じゃあどうなるのかと言うと、ウェブサーバの設定によるので一概には言えません。SFC-CNSの場合にどうなるかは後で説明します。
  • 相対URLは、プロトコルもホスト名も書きません。ファイルシステムの相対パス名がそのまま相対URLになります。
練習問題 03-4(☆☆☆)
  1. 練習問題02-4で書いた自己紹介introduction.htmlと同じディレクトリにlink.htmlという名前で次の内容のファイルを作りなさい。
  2. body要素の中に相対URLで自己紹介へのリンクを書きなさい。
  3. ブラウザでlink.htmlを開き、リンクをクリックして自己紹介へ飛べることを確認しなさい。
  4. 同じディレクトリに、dirAという名前で新しいディレクトリを作りなさい。
  5. link.htmldirAの中に移動しなさい。
  6. link.htmlの相対URLを修正して、正しく飛べるようにしなさい。
  7. 自己紹介とdirAがあるディレクトリに、dirBと言う名前で新しいディレクトリを作りなさい。
  8. 自己紹介をdirBの中に移動しなさい。
  9. link.htmlの相対URLを修正して、正しく飛べるようにしなさい。
  10. introduction.htmlは元の場所に戻しておきましょう。

インターネットへの公開

今まで作ったページは自分しか見ることができませんでした。アクセス権の設定によっては他の人も見ることができますが、それもCNSにログインしている人に限られます。

今度は、作ったページをインターネットに公開し、世界中の誰でもそのページを見ることができるようにします。詳しい仕組みは「情報基礎2」で勉強しますので、ここでは公開する方法だけ練習します。

SFC-CNSでは、ユーザごとに特定のディレクトリにファイルを置けば、自動的にインターネットに公開されます。そのディレクトリの場所は次の通りです。

  • 絶対パス名は/home/ログイン名/public_htmlです。
  • 特別教室のiMacでは、デスクトップにpublic_htmlというディレクトリがあります。(無い場合はCNS_HOMEDIRpublic_htmlを使ってください。下の説明動画はこちらの方法を使っています。)

他の人がブラウザで見る時は、http://web.sfc.keio.ac.jp/~ログイン名/ファイル名というURLでアクセスします。ログイン名の前に ~(チルダ)が付くことに注意しなさい。

練習問題 03-5(☆☆)
  1. ファイルex03-5.htmlを次のように書きなさい。
  2. 「ほげほげ」を何か好きな言葉に置き換えなさい。
  3. このファイルをpublic_htmlディレクトリに移動しなさい。
  4. ブラウザでhttp://web.sfc.keio.ac.jp/~自分のログイン名/ex03-5.htmlにアクセスしてみなさい。
  5. 隣の人のログイン名を聞き、ブラウザでhttp://web.sfc.keio.ac.jp/~隣の人のログイン名/ex03-5.htmlにアクセスしてみなさい。
  6. スマホを持っている人は、スマホのブラウザで自分のex03-5.htmlと、隣の人のex03-5.htmlをアクセスしてみなさい。

自分のパソコンで作ったファイルをインターネットで公開したい場合は、CNSのpublic_htmlにファイルを転送します。詳しくは CNS GUIDE の「6CNSサーバ」の章を見てください。

公開するファイルのアクセス権は、誰でも読めるようにしておく必要があります。CNSでは普通にエディタでファイルを作るとそのようになります。ファイル転送ソフトや圧縮ソフトによって作ったファイルは自分しか読めない設定になることがありますので注意してください。

public_htmlの中にディレクトリを作る場合は、URLのファイル名の部分はpublic_htmlからの相対パス名になります。例えば、public_htmlの中にhobbyというディレクトリを作り、その中にmusic.htmlを置いた場合のURLはhttp://web.sfc.keio.ac.jp/~自分のログイン名/hobby/music.htmlになります。

練習問題 03-6(☆☆)
  1. public_htmlディレクトリの中に、新しくinfo1という名前のディレクトリを作りなさい。
  2. ex03-5.htmlinfo1ディレクトリの中に移動しなさい。
  3. ex03-5.htmlのURLはどう変化するでしょうか?ブラウザでアクセスして確認しなさい。隣の人のex03-5.htmlもアクセスしてみなさい。

ウェブページを公開する際は、著作権法などの法律を守ることはもちろんですが、SFC-CNS利用内規で「慶應義塾大学の品位を落とすような行為」も禁止されていますので、注意してください。
また、introduction.htmlのような個人情報を含むファイルを不用意に公開しないようにしてください。

著作権

ウェブページを公開するときには著作権について注意しなければいけません。

(PPT版ダウンロード)

練習問題 03-7(☆)

特別教室iMacのデスクトップ→Share_zmacindex.htmlを開くと「情報倫理デジタルビデオ小品集3」を見ることができます。次の項目を見て、どのような内容か簡単にまとめなさい。

  • 12. アップしたビデオが著作権侵害!
  • 27. Web貼りつけレポートはNG
  • 29. ブログでメール紹介したらダメ?
  • 30. Webカメラは肖像権を侵害?
注意:
  • ライセンスにより、特別教室のiMacでしか再生を許可されていません
  • OSのバージョンアップが原因で、Firefoxでは再生できなくなりました。また、Safariで再生するときは次のように設定してください。
    メニューの「Safari」 → 環境設定 → Webサイト → プラグイン → QuickTime → 「これ以外のWebサイトでのデフォルト設定」を「確認」か「オン」に変更
練習問題 03-8(☆☆)

無料で写真・イラスト・BGMなどウェブページ制作用の素材を公開しているサイトがあります。そのようなサイトをいくつか探し、利用規約がどのようになっているか調べなさい。

無料ダウンロードサイトには、ウイルスやスパイウェアなど悪意のあるソフトをばらまくサイトもあります。あんまり怪しげなサイトからはダウンロードしないことと、常にセキュリティソフトを最新の状態で作動させておくことを心がけてください。

チェックポイント
  • ハイパーテキストと普通のテキストの違いは何でしょうか?
  • 絶対URLと相対URLの違いは何でしょうか?
  • ファイルとディレクトリの構造がツリー構造(木構造)と言われるのはどうしてでしょうか?
  • 相対パス名で .. はどういう意味でしょうか?
  • SFC-CNSでインターネットに公開されるディレクトリはどこでしょうか?
  • 著作権とはどのような権利でしょうか?
  • 著作権の例外にはどのようなものがあるのでしょうか?

第2回 HTML

HTMLとは

ページのソース

前回、ワードプロセッサで作ったファイルをターミナルで表示してみると、画面に見える文章とはぜんぜん違うということをやりました。ウェブページでも同じようなことがあります。

練習問題 02-1(☆)
  1. Firefoxで適当なページを表示し、メニューの【ツール】→【Web開発】→【ページのソース】を選択しなさい。
  2. 通常の表示とソースの間の対応関係は見当がつくでしょうか?

ウェブページとしてコンピュータの中に保存されているのは、ソースの方です。通常目にする画面は、ソースに書かれている内容を元にして、ブラウザが人間に見やすいように表示してくれたものです。

なお、ウェブページに限らず、コンピュータの中で何か処理をする時に元になるものは、ソースと呼びます。ソース(source)は「源」という意味です。sauceではありません。

ウェブページの場合、ソースは HTML (HyperText Markup Language) という言語で書きます。試しに簡単なウェブページを作ってみましょう。

練習問題 02-2(☆)
  1. テキストエディタで次の内容を書き、ファイルに保存しなさい。ファイル名は何でもいいですが、必ず最後に .html を付けます。ここでは ex02-2.html にしましょう。
  2. 保存したファイルをブラウザで開いてみなさい。
    • 通常はダブルクリックでブラウザが開きます。
    • Safariが開く場合は、Firefoxのメニューの【Firefox】→【環境設定…】→【詳細】でFirefoxをデフォルトWebブラウザに設定してください。
    • miが開く場合は、ファイルのアイコンをドラッグしてFirefoxのウィンドウの中にドロップします。ファイルを右クリックしてメニューを出し【このアプリケーションで開く】の中から【Firefox.app】を選ぶ方法もあります。
    • 何も開かない場合はファイル名の最後(拡張子)が .html か確認して下さい。
  3. ファイルの内容がブラウザで表示されますが、同じ大きさでひとつながりに表示されてメリハリがありません。「テスト」の部分は見出しなので他と区別して表示するように指示してみましょう。ファイルを次のように書き換えます。
  4. エディタでファイルに保存し、ブラウザで再読み込みしなさい。
  5. 「ほげほげ」と「ほにゃらら」は箇条書きにしてみましょう。ファイルを次のように書き換えます。
  6. エディタでファイルに保存し、ブラウザで再読み込みしなさい。
  7. HTMLにはいろいろな規則や約束があります。上のように書いてもたいていのブラウザで問題なく表示されますが、正しいお作法に則って書くと次のようになります。
  8. エディタでまず上のように書き換え、次に「テスト」と「ほげほげ」と「ほにゃらら」の部分を好きな言葉で置き換えてから保存し、ブラウザで再読み込みしなさい。

同じファイルをブラウザで開くのとテキストエディタで開くのでは、見えるものが全然違います。ブラウザで開くのは舞台を観客席から見るようなものなのに対して、テキストエディタで開くのは舞台裏を見るようなもので、舞台を作り上げる仕掛けが全部見えています。

マークアップ言語

HTMLはマークアップ言語の一種です。マークアップとは、文章に対して構造や体裁などの情報を付け加えることです。ワードプロセッサとの違いは、ワードプロセッサが見た目をそのまま編集するのに対して、マークアップ言語は指示を文章の中に埋め込んでおき、後で完成形にします。

  • 上の練習問題では、「テスト」というのは画面に表示される文字ですが、<h1></h1>は画面に表示されるわけではなく、ここからここまでが見出しであるという指示です。
  • ブラウザはこの指示を読み取って、「テスト」という文字を大きめに表示します。

HTMLの文法

要素とタグ

HTMLのマークアップ指示は文章の構造を示すものです。文章を構造に従って分解したそれぞれの部分を「要素」と呼びます。例えば、見出しや段落や表が要素になります。

ある要素の中に別の要素が含まれることもあります。例えば、箇条書き(ol)要素の中には項目(li)要素があります。ページ全体は必ずhtml要素になり、他の要素はその中に入っています。

要素はタグによって区切られます。例えば、<ol><li>のように、要素名を<>で囲んだものがタグです。

タグには開始タグと終了タグがあり、必ず対にして要素の最初と最後に置きます。例えば、見出し(h1)要素は<h1>という開始タグから始まります。それに対する終了タグは</h1>のように要素名の前にスラッシュを付けます。

要素によっては終了タグがなく、開始タグだけで要素になるものがあります。例えば、<meta charset="utf-8">はこれだけでmeta要素になります。

開始タグには付加的な情報として属性を書くことができます。属性は、「属性名=値」という形で、複数個ある場合は空白で区切って書きます。例えば、<meta charset="utf-8">の場合は、metaが要素名でcharsetが属性名、"utf-8"がcharset属性の値です。どのような属性があるかは要素ごとに決まっています。

練習問題 02-3(☆☆)
  • 練習問題02-2で作ったHTMLファイルにはどんな要素があるでしょうか?それぞれの要素の範囲を箱で囲んで示しなさい。

正確に言うと、1行目の<!DOCTYPE html>は要素ではなくて「宣言」です。これは、ファイルの内容がHTML5の文法に従って書かれていることを示しています。ブラウザは、まず先頭の宣言を見てファイルの内容を解釈します。HTMLの違うバージョンやXHTMLで書く場合は違う宣言になります。

改行とコメント

HTMLで書いた文章をブラウザで表示する時、ひとつながりの文章は詰めて表示されます。つまり、HTMLを書く時に改行や空行を入れても、ブラウザには無視されます。ブラウザで見た時に改行して欲しい場合は、段落(p)要素や改行(br)要素で指示する必要があります。

ウェブページを作る時、ソースにはメモとして書いておきたいけれど、ブラウザでは表示してほしくない場合があります。そのような時は、HTMLのコメントとして書きます。コメントは<!---->に挟まれた部分で、この部分はブラウザでは表示されません。

いろいろな要素

HTMLの要素はたくさんありますから、それを全部覚えるのは大変です。それよりも必要に応じてリファレンスを調べられるようになりましょう。

練習問題 02-4(☆☆☆)
  1. 参考資料(HTML5リファレンス)を見て、次の要素の書き方を調べなさい。
    • 段落
    • 見出し
    • 番号無しの箇条書き(順序のないリストと、リストの項目)
    • 番号付きの箇条書き(順序のあるリストと、リストの項目)
    • 定義・説明リスト
  2. テキストエディタで新しいファイルを作り、次の内容を書きなさい。このファイルは後でも使いますから introduction.html という名前にしましょう。
  3. 10行目の「ここに自分の自己紹介を書きこむ」をコメントにし、ブラウザでは見えなくなることを確認しなさい。
  4. 上のファイルのbody要素の中に次のことを書き、ブラウザで見てみなさい。
    • ページの見出し。「慶應太郎の自己紹介」というような感じで。
    • 出身の小学校、中学校、高校を、箇条書きで書く。
    • 自分の好きな本や音楽の説明を、定義・説明リストで書く。
    • 自分の時間割を表で書く。
練習問題02-5(☆☆☆☆)
  • 参考資料を調べ、次のように表示されるHTMLを書きなさい。

    x2+y2=z2
    この授業は情報基礎1で、眠くなる大変興味深い内容です。
    昔の日本語は右から左に書いていました。

HTMLにはいくつかバージョンがありますが、最新はHTML5です。ウェブでHTMLの書き方を検索すると、古いバージョンのHTML用のタグも見つかります。古いタグを使っても、今のところは問題ないことが多いですが、将来的には表示されなくなりますから、HTML5用のタグを使いましょう。

input要素

ウェブページは文章を表示するだけでなく、データを入力して何かの処理をすることもできます。文字を入力する欄や、マウスでクリックするボタンをウェブページ内に表示するにはinput要素を使います。

input要素はもともとform要素の一部分として使うためのものですが、input要素だけでも使うことができます。

練習問題 02-6(☆☆☆)
  1. ウェブページにはいろいろな入力の種類がありますが、多くはinput要素を使います。入力の種類はtype属性の値によって区別します。新しいファイルex02-6.htmlを次の内容で作り、ブラウザでどのような表示になるか確認しなさい。
  2. テキスト入力欄の場合はsize属性の値によって横幅が決まります。ファイルを修正してinput要素にsize属性を書き、横幅を50文字分にしなさい。
  3. 参考資料(HTML5リファレンス)を調べて、パスワードの入力欄、数値の入力欄、チェックボックス、汎用ボタンを追加しなさい。
    • 汎用ボタンは、そのままでは白い四角いボタンです。何か文字を表示したい場合はvalue属性を使います。

上の練習問題でブラウザに表示された入力欄に何か書き込んだり、ボタンをクリックしたりしても、何も起きません。データが入力された後で何をするかは、HTMLではなく別の言語で書く必要があります。「情報基礎1」の後半ではJavaScriptを使ってデータを処理する方法を、「情報基礎2」ではデータをサーバに送信して処理する方法を勉強します。

インスペクタの使い方(HTMLを調べる)

ウェブページの構造が複雑になってくると、どうしてそういう表示になっているか、パッと見ただけでは分からなくなります。そのため、Firefoxでは、メニューの【ツール】→【Web開発】→【インスペクタ】を選択すると、ウインドウの下半分にHTMLを表示して画面との対応を確認することができます。

  • インスペクタが表示されている状態でマウスを動かすと、マウスが何の要素を指しているかが吹き出しで表示され、インスペクタには対応するHTMLの部分が表示されます。

チェックポイント
  • HTMLは何をするための言語でしょうか?
  • ワードプロセッサとマークアップ言語の違いは何でしょうか?
  • HTMLの要素とタグの関係はどうなっているでしょうか?
  • HTMLで番号付きの箇条書きはどのように書くでしょうか?
  • HTMLで汎用ボタンはどのように書くでしょうか?

第1回 オリエンテーション

この授業について

「使う」だけでなく「創る」人になろう

この授業では情報技術について勉強しますが、「スマホもウェブも毎日使っているし、今さら勉強しなくていいよ」とか、「私はIT系企業に就職するつもりはないから、関係ないわ」とか思っていませんか?SFCでは、どのような専門分野においても情報技術を活用できる人、また、他人の作ったサービスを使うだけでなく、自分で新しいサービスを創りだせる人を育てようとしています。

「でも、お金さえ出せば便利な機器もサービスも手に入るんだから、わざわざ自分で作らなくてもいいんじゃない?」と思う人もいるかもしれませんが、既にあるものを使っているのでは、その枠から出ることはできません。新しいアイデアを形にするためには、それを実現するためのシステムを作る必要があります。また、状況の変化により今までのシステムでは対応できなくなる場合があります。その一つの例が災害などの非常事態です。

東日本大震災の時にGoogleが提供したパーソンファインダーは、元になるシステムはその前のハイチ地震の時にできていましたが、被災地の状況に合わせて改造され、次々と新しい機能が追加されました。また、名簿写真のテキスト化は多くのボランティアが人力で行い、それを集約するシステムも構築されました(下記参考資料参照)。

練習問題01-1(☆)
  • 自分が興味を持つ分野と情報技術の関係(例えば「介護と情報技術」とか「政治と情報技術」とか)について調べ、どのような事例があるかまとめなさい。

高校までの「学習」と大学の「学問」の違いの一つに、自分の考えと他人の考えをはっきり区別するということがあります。上の練習問題の解答は、おそらく書籍やインターネットに掲載された文章を参考に書くことになると思いますが、何を参考にして書いたか、文章をコピーした場合はどの部分がコピーなのか、を引用のルール(SFC GUIDE Vol.2 p.33〜34 参照)に従って明記しなければなりません。引用であると明記せずに文章をコピーしたレポートを提出すると、不正行為(試験のカンニングと同じ)になりますので注意してください。

この授業で勉強すること

情報技術は、原子力発電所からゲーム機まで、ありとあらゆるところで使われています。それを一度に勉強するのは無理ですから、この授業ではウェブに絞って勉強します。ウェブと言ってもいろんな技術が使われていますが、その中でもプログラミングに重点を置きます。

ウェブが紙に印刷された情報と違うのは、マウスやキーボードで操作すると動いたり新しい情報が表示されたりするところです。このような動きを作り出すには、プログラミングという技術を使います。Amazonでポチッとすると買い物ができるのも、プログラミングのおかげです。ただし、半年勉強しただけでいきなりYouTubeやTwitterのようなウェブサイトが作れるわけではありませんが、例えば、次のような作品なら作れるようになります。

  • 桃太郎(過去の履修者の作品を教材用に再構成したものです)

この教材について

  • 基本的な知識を暗記することも必要ですが、知識が必要になった時に自分で調べる能力も重要です。ウェブで公開されている資料を見ればわかることは細かく説明せず、外部資料へのリンクだけを載せてありますので、積極的にリンクをたどって自分で調べる学習を心がけてください。
  • 一部、スライド形式の教材を埋め込んでいるところがあります。PDF形式でスクロールして表示するようになっていますが、右上のアイコンをクリックするとGoogleDriveを使用して拡大表示やダウンロードができます。また、PPT形式のファイルをダウンロードすることもできます。
  • 練習問題には難易度によって星が付いています。星3個までは必ずやってください。星4個以上は余裕がある人向けです。

成績評価

評価基準は「成績評価について」のページを見てください。なお、学期の途中で変更される可能性もあります。

授業で使うソフト

困ったときは

  • SFC CNS GUIDE にFAQ(よくある質問)が載っています。
  • それでも解決しなければ、CNSコンサルタントに相談してください。

CNSコンサルタントは、CNSの一般的な使い方を相談するところです。「情報基礎1」の課題の解き方がわからない時は、CNSコンサルタントでなく担当の教員・TA・SAに相談してください。

オペレーティングシステム

オペレーティングシステムとは何かということは第10回で詳しく説明しますが、とりあえずコンピュータの電源を入れると最初に動き出すソフトだと思っていてください。

特別教室のiMacでは、MacOSという種類のオペレーティングシステムが動いています。基本的な使い方は下の参考資料を見てください。

ブラウザ

特別教室のiMacでは次の二種類のブラウザが使えます。どちらを使っても差し支えありませんが、表示のしかたや機能に若干の違いがあります。この授業ではFirefoxを使って説明します。

Firefox
モジラ財団が開発している、Netscapeの流れを汲む由緒あるブラウザです。
Safari
アップルが開発しているMacOS付属のブラウザです。

ターミナル

MacやWindowsの操作は、主に GUI (Graphical User Interface) という方式です。これは、ディスプレイに表示されたアイコンやメニューをマウスを使って操作します。

それに対して、 CUI (Character User Interface) という方式もあります。これは、すべての操作を、文字で書き表した命令によって行います。

GUIは直感的で、初心者でもすぐに操作できますが、CUIは命令(コマンド)を勉強しないと使えません。その代わり、CUIの方が効率が良く、大量の操作の繰り返しも素早くできます。

MacでCUI方式のコマンド操作を行うためには、「ターミナル」というアプリケーションを使います。

正確には「ターミナル」はキーボード入力と画面表示を受け持っているプログラムで、コマンドの起動を行うのは「シェル」という別のプログラムです。図にすると次のような構造になっています。

それでは、実際にターミナルを使ってみましょう。

  • Dockにターミナルのアイコンがあれば、それをクリックします。無い場合は、Applicationsフォルダの中のUtilitiesフォルダを探してください。
  • ターミナルのウィンドウの左端に「%」(他の記号のこともあります)が表示されているのは、コマンドの入力を待っている印(「プロンプト」と呼びます)です。この状態でキーボードからコマンドを打ち込みます。「%」が表示されていない状態では、次のコマンドを実行することはできません。
練習問題01-2(☆)
  1. 現在時刻を表示する date というコマンドを実行しなさい。

    • dateと打った後にリターンキーを押します。
  2. 今月のカレンダーを表示する cal というコマンドを実行しなさい。
  3. Macの計算機アプリを起動しなさい。コマンドは次のようになります。

    • open の後に空白が必要です。空白より後の部分を引数と呼びます。
    • /App まで打ってTABキーを打つと、/Applications と補完されます(/App で始まるファイルが他にない場合)。
  4. ディスクの中のファイル名をすべて表示しなさい。コマンドは次のようになります。

    • -Rls コマンドの動作のしかたを指定するもので、オプションと呼びます。
    • 終了するまでにずいぶん時間がかかります。途中で中断するにはコントロールキーを押しながらCを押します。
  5. シェルを終了する logout コマンドを実行しなさい。

    • ターミナルの設定によってウィンドウが自動的に閉じる場合と閉じない場合があります。

テキストエディタ

文章を書くのには、「Word」や「Pages」のようなワードプロセッサを使うことが多いです。しかし、プログラムを書く時には、文字の大きさやフォントを変えたり、罫線を引いたりする機能が邪魔になります。なぜかというと、保存したファイルの中にプログラムと、フォントなどの修飾情報が混ざって記録されるのですが、修飾情報はワードプロセッサによって違うので、他のアプリがプログラムを処理する時に混乱するからです。

ですから、プログラムを書く時はワードプロセッサではなくテキストエディタを使います。テキストエディタは、余分な情報を付けずに文字だけを記録します。

高機能のテキストエディタは、プログラムを書く時に見やすいように色分けをしてくれますが、この色の情報はファイルに保存されるわけではありません。編集中にプログラムの構造を解析し、自動的に色を付けて表示する仕組みになっています。

特別教室のiMacでは、次の三種類のテキストエディタが使えます。

mi
MacOS X 用に開発された軽快なエディタです。元は「ミミカキエディット」という名前でした。
Emacs
大昔から使われてきた史上最強のエディタです。GUIなど無かった時代にできたので、すべてキーボードで操作するのが基本になっていて、初心者には若干とっつきにくいです。viとの宗教戦争が有名です。
Atom
GitHub社が開発した新しいエディタです。将来有望と言われています。
練習問題01-3(☆)
  1. テキストエディタで新しくファイルを作り、適当な内容の文章を入力して保存しなさい。
    • ファイルを保存する場所は デスクトップ にします。場所については第3回で詳しく説明します。
    • ファイル名は aaa.txt にします。最後の .txt は、拡張子と言って、このファイルの中身がテキストであることを表します。

  2. ターミナルを起動し、次のコマンドで今作ったファイルの中身を表示しなさい。

    • cdコマンドは、作業する場所を変更します。
    • 場所の指定方法は第3回と第10回で詳しく説明します。~(チルダ)は自分のファイルの置き場所を示します。CNSにはたくさんのユーザがいますので、単にDesktopでは、誰のDesktopなのか分かりません。

    • catコマンドは、ファイルの中身をターミナルに表示します。
  3. ワードプロセッサ(Microsoft Wordなど)で同じ文章を入力し、Desktopに新しいファイルとして保存しなさい。ファイル名は aaa.docx にします(ただし、docxの部分はワードプロセッサによって違います)。
  4. さっきと同じようにターミナルで中身を表示しなさい。aaa.txtと違うのはなぜでしょうか?
  5. 今作ったファイルはもう要らないので削除しましょう。マウスでゴミ箱に入れ、Finderメニューの「ゴミ箱を空にする…」を実行することもできますし、ターミナルで次のコマンドを実行しても削除できます。

    • rmコマンドは、一旦ゴミ箱に入れることはせず、実行するとすぐに削除します。
    • aaa* は「aaaで始まる名前のファイル全部」という意味です。今の場合は、aaa.txtaaa.docxが一度に削除されます。aaaで始まる名前のファイルが他にもあれば、それも削除されてしまいますので注意してください。

特別教室のiMacにインストールされているEmacsは、そのままではちょっと使いにくいので、~/.emacs というファイルを作って、次の一行を書いておくとよいです。

  • (load-file “/pub/sfc/ipl/elisp/init.el”)

これで次のように設定されます。

  • メタキーをoptionに変更し、command-X,C,Vでコピーペーストできるようにする。
  • 日本語メニューにする(ただし一部のみ)。
  • auto-complete, physical-line などの設定。


電子メールの使い方

(PPT版ダウンロード)

自分のPCやスマホでCNSのメールを読み書きするには、二つの方法があります。

  • ウェブブラウザで https://rcube.sfc.keio.ac.jp にアクセスする。バスワードはIMAP/SMTP用のものなので間違えないようにしてください。
  • メールソフトでCNSのメールサーバにアクセスするよう設定する。設定方法はSFC CNS GUIDEの42ページ〜55ページに載っています。

(Keynote版ダウンロード)(pptx版ダウンロード)

携帯のメールアドレスに転送する場合、迷惑メールフィルタの設定によっては大学からのメールが受信できないので、設定を確認して下さい。

タッチタイピング

日経新聞の記事によると、社会に出てタイピングが必要と感じる若者が多い。

日本経済新聞2017年12月16日S11面「くらし物語」より

タイピング練習

(PPT版ダウンロード)

いきなり試験問題をやっても上達しません。練習ソフトを使って段階的に練習してください。スポーツでいきなり試合をやらず、基本動作の反復練習から始めるのと同じです。

キーボードを見ずに打つ練習をすることが大切です。特に次のことに気をつけてください。

  • 手首を机に付け、指を軽く曲げた自然な状態でホームポジションのキーに指が乗るようにします。
  • ホームポジションを基準にして、他のキーの相対的な位置関係を覚えます。
  • ホームポジション以外のキーを打った後、すぐに指をホームポジションに戻せるように練習してください。指がずれてしまうと、その後のキーは全部間違ってしまいます。
  • 正しくホームポジションに戻れたかどうかは、fキーとjキーに突起が付いているので、触ればわかります。

練習用ソフト

TUTTT

上のスライド資料で紹介しているソフトです。最初はこれを使って指とキーの対応を覚えるのがお勧めです。

ブラウザで動くソフト

SFCで作ったタイピング試験用システムには練習用の問題文もあります。やさしい問題文をクリアすると、試験と同じ問題文で練習できます。

他にもいろいろなタイプ練習サイトがあります。

タイピング試験

原則として毎週タイピング試験を行います(時間が足りない週は行わない場合もあります)。合格すればそれ以降は試験をうける必要はありませんので、先生の指示に従って他のことをしてください。

試験のやり方は、「タイピング試験について」のページを見てください。

チェックポイント
  • この授業ではどんなことを勉強するでしょうか?
  • 先生にメールで質問する時に気をつけることは何でしょうか?
  • テキストエディタとワードプロセッサの違いは何でしょうか?
  • なぜタッチタイピングを練習するのでしょうか?