ほにゃらら123テストほげほげほにゃらら保存したファイルをブラウザで開いてみなさい。通常はダブルクリックでブラウザが開きます。Safariが開く場合は、Firefoxのメニューの【Firefox】→【環境設定...】→【詳細】でFirefoxをデフォルトWebブラウザに設定してください。miが開く場合は、ファイルのアイコンをドラッグしてFirefoxのウィンドウの中にドロップします。ファイルを右クリックしてメニューを出し【このアプリケーションで開く】の中から【Firefox.app】を選ぶ方法もあります。ファイルの内容がブラウザで表示されますが、同じ大きさでひとつながりに表示されてメリハリがありません。「テスト」の部分は見出しなので他と区別して表示するように指示してみましょう。ファイルを次のように書き換えます。ほにゃらら123<h1>テスト</h1>ほげほげほにゃららエディタでファイルに保存し、ブラウザで再読み込みしなさい。「ほげほげ」と「ほにゃらら」は箇条書きにしてみましょう。ファイルを次のように書き換えます。</ol>12345<h1>テスト</h1><ol><li>ほげほげ</li><li>ほにゃらら</li></ol>エディタでファイルに保存し、ブラウザで再読み込みしなさい。HTMLにはいろいろな規則や約束があります。上のように書いてもたいていのブラウザで問題なく表示されますが、正しいお作法に則って書くと次のようになります。charset="utf-8"><title>練習問題02-2</title></head><body><h1>テスト</h1><ol><li>ほげほげ</li><li>ほにゃらら</li></ol></body></html>エディタでまず上のように書き換え、次に「テスト」と「ほげほげ」と「ほにゃらら」の部分を好きな言葉で置き換えてから保存し、ブラウザで再読み込みしなさい。同じファイルをブラウザで開くのとテキストエディタで開くのでは、見えるものが全然違います。ブラウザで開くのは舞台を観客席から見るようなものなのに対して、テキストエディタで開くのは舞台裏を見るようなもので、舞台を作り上げる仕掛けが全部見えています。マークアップ言語HTMLはマークアップ言語の一種です。マークアップとは、文章に対して構造や体裁などの情報を付け加えることです。ワードプロセッサとの違いは、ワードプロセッサが見た目をそのまま編集するのに対して、マークアップ言語は指示を文章の中に埋め込んでおき、後で完成形にします。上の練習問題では、「テスト」というのは画面に表示される文字ですが、<h1>と</h1>は画面に表示されるわけではなく、ここからここまでが見出しであるという指示です。ブラウザはこの指示を読み取って、「テスト」という文字を大きめに表示します。要素とタグHTMLのマークアップ指示は文章の構造を示すものです。文章を構造に従って分解したそれぞれの部分を「要素」と呼びます。見出しや段落や表が要素になります。ある要素の中に別の要素が含まれることもあります。箇条書き(ol)要素の中には項目(li)要素があります。ページ全体は必ずhtml要素になり、他の要素はその中に入っています。要素はタグによって区切られます。<ol>や<li>のように、要素名を<>で囲んだものがタグです。タグには開始タグと終了タグがあり、必ず対にして要素の最初と最後に置きます。見出し(h1)要素は<h1>という開始タグから始まります。それに対する終了タグは</h1>のように要素名の前にスラッシュを付けます。要素によっては終了タグがなく、開始タグだけで要素になるものがあります。charset="utf-8">はこれだけでmeta要素になります。開始タグには付加的な情報として属性を書くことができます。属性は、「属性名=値」という形で、複数個ある場合は空白で区切って書きます。charset="utf-8">の場合は、metaが要素名でcharsetが属性名、"utf-8"がcharset属性の値です。どのような属性があるかは要素ごとに決まっています。02-3(☆☆)練習問題02-2で作ったHTMLファイルにはどんな要素があるでしょうか?それぞれの要素の範囲を箱で囲んで示しなさい。html>は要素ではなくて「宣言」です。これは、ファイルの内容がHTML5の文法に従って書かれていることを示しています。ブラウザは、まず先頭の宣言を見てファイルの内容を解釈します。HTMLの違うバージョンやXHTMLで書く場合は違う宣言になります。HTMLクイックリファレンス改行とコメントHTMLで書いた文章をブラウザで表示する時、ひとつながりの文章は詰めて表示されます。HTMLを書く時に改行や空行を入れても、ブラウザには無視されます。ブラウザで見た時に改行して欲しい場合は、段落(p)要素や改行(br)要素で指示する必要があります。ウェブページを作る時、ソースにはメモとして書いておきたいけれど、ブラウザでは表示してほしくない場合があります。そのような時は、HTMLのコメントとして書きます。コメントは<!--と-->に挟まれた部分で、この部分はブラウザでは表示されません。いろいろな要素HTMLの要素はたくさんありますから、それを全部覚えるのは大変です。それよりも必要に応じてリファレンスを調べられるようになりましょう。02-4(☆☆☆)参考資料(HTML5リファレンス)を見て、次の要素の書き方を調べなさい。見出し番号無しの箇条書き(順序のないリストと、リストの項目)番号付きの箇条書き(順序のあるリストと、リストの項目)定義・説明リスト表テキストエディタで新しいファイルを作り、次の内容を書きなさい。いう名前にしましょう。charset="utf-8"><title>自己紹介</title></head><body>ここに自分の自己紹介を書きこむ</body></html>10行目の「ここに自分の自己紹介を書きこむ」をコメントにし、ブラウザでは見えなくなることを確認しなさい。上のファイルのbody要素の中に次のことを書き、ブラウザで見てみなさい。「慶應太郎の自己紹介」というような感じで。自分の好きな本や音楽の説明を、定義・説明リストで書く。自分の時間割を表で書く。練習問題02-5(☆☆☆☆)参考資料を調べ、次のように表示されるHTMLを書きなさい。x2+y2=z2この授業は情報基礎1で、眠くなる大変興味深い内容です。昔の日本語は右から左に書いていました。HTMLにはいくつかバージョンがありますが、最新はHTML5です。ウェブでHTMLの書き方を検索すると、古いバージョンのHTML用のタグも見つかります。古いタグを使っても、今のところは問題ないことが多いですが、将来的には表示されなくなりますから、HTML5用のタグを使いましょう。HTMLクイックリファレンスinput要素ウェブページは文章を表示するだけでなく、データを入力して何かの処理をすることもできます。文字を入力する欄や、マウスでクリックするボタンをウェブページ内に表示するにはinput要素を使います。input要素はもともとform要素の一部分として使うためのものですが、input要素だけでも使うことができます。02-6(☆☆☆)ウェブページにはいろいろな入力の種類がありますが、多くはinput要素を使います。入力の種類はtype属性の値によって区別します。新しいファイルex02-6.htmlを次の内容で作り、ブラウザでどのような表示になるか確認しなさい。type="text"></p></body></html>テキスト入力欄の場合はsize属性の値によって横幅が決まります。ファイルを修正してinput要素にsize属性を書き、横幅を50文字分にしなさい。参考資料(HTML5リファレンス)を調べて、パスワードの入力欄、数値の入力欄、チェックボックス、汎用ボタンを追加しなさい。汎用ボタンは、そのままでは白い四角いボタンです。何か文字を表示したい場合はvalue属性を使います。上の練習問題でブラウザに表示された入力欄に何か書き込んだり、ボタンをクリックしたりしても、何も起きません。データが入力された後で何をするかは、HTMLではなく別の言語で書く必要があります。「情報基礎1」の後半ではJavaScriptを使ってデータを処理する方法を、「情報基礎2」ではデータをサーバに送信して処理する方法を勉強します。HTMLクイックリファレンスインスペクタの使い方(HTMLを調べる)ウェブページの構造が複雑になってくると、どうしてそういう表示になっているか、パッと見ただけでは分からなくなります。そのため、Firefoxでは、メニューの【ツール】→【Web開発】→【インスペクタ】を選択すると、ウインドウの下半分にHTMLを表示して画面との対応を確認することができます。インスペクタが表示されている状態でマウスを動かすと、マウスが何の要素を指しているかが吹き出しで表示され、インスペクタには対応するHTMLの部分が表示されます。オリエンテーションこの授業について「使う」だけでなく「創る」人になろうこの授業では情報技術について勉強しますが、「スマホもウェブも毎日使っているし、今さら勉強しなくていいよ」とか、「私はIT系企業に就職するつもりはないから、関係ないわ」とか思っていませんか?SFCでは、どのような専門分野においても情報技術を活用できる人、また、他人の作ったサービスを使うだけでなく、自分で新しいサービスを創りだせる人を育てようとしています。「でも、お金さえ出せば便利な機器もサービスも手に入るんだから、わざわざ自分で作らなくてもいいんじゃない?」と思う人もいるかもしれませんが、既にあるものを使っているのでは、その枠から出ることはできません。新しいアイデアを形にするためには、それを実現するためのシステムを作る必要があります。状況の変化により今までのシステムでは対応できなくなる場合があります。その一つの例が災害などの非常事態です。東日本大震災の時にGoogleが提供したパーソンファインダーは、元になるシステムはその前のハイチ地震の時にできていましたが、被災地の状況に合わせて改造され、次々と新しい機能が追加されました。名簿写真のテキスト化は多くのボランティアが人力で行い、それを集約するシステムも構築されました(下記参考資料参照)。クライシスレスポンス練習問題01-1(☆)自分が興味を持つ分野と情報技術の関係(例えば「介護と情報技術」とか「政治と情報技術」とか)について調べ、どのような事例があるかまとめなさい。高校までの「学習」と大学の「学問」の違いの一つに、自分の考えと他人の考えをはっきり区別するということがあります。参照)に従って明記しなければなりません。引用であると明記せずに文章をコピーしたレポートを提出すると、不正行為(試験のカンニングと同じ)になりますので注意してください。この授業で勉強すること情報技術は、原子力発電所からゲーム機まで、ありとあらゆるところで使われています。それを一度に勉強するのは無理ですから、この授業ではウェブに絞って勉強します。ウェブと言ってもいろんな技術が使われていますが、その中でもプログラミングに重点を置きます。ウェブが紙に印刷された情報と違うのは、マウスやキーボードで操作すると動いたり新しい情報が表示されたりするところです。このような動きを作り出すには、プログラミングという技術を使います。Amazonでポチッとすると買い物ができるのも、プログラミングのおかげです。半年勉強しただけでいきなりYouTubeやTwitterのようなウェブサイトが作れるわけではありませんが、例えば、次のような作品なら作れるようになります。桃太郎(過去の履修者の作品を教材用に再構成したものです)この教材について基本的な知識を暗記することも必要ですが、知識が必要になった時に自分で調べる能力も重要です。ウェブで公開されている資料を見ればわかることは細かく説明せず、外部資料へのリンクだけを載せてありますので、積極的にリンクをたどって自分で調べる学習を心がけてください。一部、スライド形式の教材を埋め込んでいるところがあります。PDF形式でスクロールして表示するようになっていますが、右上のアイコンをクリックするとGoogleDriveを使用して拡大表示やダウンロードができます。PPT形式のファイルをダウンロードすることもできます。練習問題には難易度によって星が付いています。星3個までは必ずやってください。「成績評価について」のページを見てください。学期の途中で変更される可能性もあります。FAQ(よくある質問)が載っています。それでも解決しなければ、CNSコンサルタントに相談してください。CNSコンサルタントは、CNSの一般的な使い方を相談するところです。「情報基礎1」の課題の解き方がわからない時は、CNSコンサルタントでなく担当の教員・TA・SAに相談してください。オペレーティングシステムオペレーティングシステムとは何かということは第10回で詳しく説明しますが、とりあえずコンピュータの電源を入れると最初に動き出すソフトだと思っていてください。特別教室のiMacでは、MacOSという種類のオペレーティングシステムが動いています。基本的な使い方は下の参考資料を見てください。Stocker.jpブラウザ特別教室のiMacでは次の二種類のブラウザが使えます。どちらを使っても差し支えありませんが、表示のしかたや機能に若干の違いがあります。この授業ではFirefoxを使って説明します。Firefoxモジラ財団が開発している、Netscapeの流れを汲む由緒あるブラウザです。Safariアップルが開発しているMacOS付属のブラウザです。これは、ディスプレイに表示されたアイコンやメニューをマウスを使って操作します。これは、すべての操作を、文字で書き表した命令によって行います。GUIは直感的で、初心者でもすぐに操作できますが、CUIは命令(コマンド)を勉強しないと使えません。その代わり、CUIの方が効率が良く、大量の操作の繰り返しも素早くできます。MacでCUI方式のコマンド操作を行うためには、「ターミナル」というアプリケーションを使います。正確には「ターミナル」はキーボード入力と画面表示を受け持っているプログラムで、コマンドの起動を行うのは「シェル」という別のプログラムです。図にすると次のような構造になっています。それでは、実際にターミナルを使ってみましょう。Dockにターミナルのアイコンがあれば、それをクリックします。無い場合は、Applicationsフォルダの中のUtilitiesフォルダを探してください。ターミナルのウィンドウの左端に「%」(他の記号のこともあります)が表示されているのは、コマンドの入力を待っている印(「プロンプト」と呼びます)です。この状態でキーボードからコマンドを打ち込みます。「%」が表示されていない状態では、次のコマンドを実行することはできません。いうコマンドを実行しなさい。Shelldate1datedateと打った後にリターンキーを押します。いうコマンドを実行しなさい。Shellcal1calMacの計算機アプリを起動しなさい。コマンドは次のようになります。空白より後の部分を引数と呼びます。始まるファイルが他にない場合)。ディスクの中のファイル名をすべて表示しなさい。コマンドは次のようになります。コマンドの動作のしかたを指定するもので、オプションと呼びます。終了するまでにずいぶん時間がかかります。途中で中断するにはコントロールキーを押しながらCを押します。コマンドを実行しなさい。Shelllogout1logoutターミナルの設定によってウィンドウが自動的に閉じる場合と閉じない場合があります。TechAcademyマガジンターミナルでのコマンドの使い方。ライフハッカーテキストエディタ文章を書くのには、「Word」や「Pages」のようなワードプロセッサを使うことが多いです。プログラムを書く時には、文字の大きさやフォントを変えたり、罫線を引いたりする機能が邪魔になります。いうと、保存したファイルの中にプログラムと、フォントなどの修飾情報が混ざって記録されるのですが、修飾情報はワードプロセッサによって違うので、他のアプリがプログラムを処理する時に混乱するからです。プログラムを書く時はワードプロセッサではなくテキストエディタを使います。テキストエディタは、余分な情報を付けずに文字だけを記録します。高機能のテキストエディタは、プログラムを書く時に見やすいように色分けをしてくれますが、この色の情報はファイルに保存されるわけではありません。編集中にプログラムの構造を解析し、自動的に色を付けて表示する仕組みになっています。特別教室のiMacでは、次の三種類のテキストエディタが使えます。用に開発された軽快なエディタです。元は「ミミカキエディット」という名前でした。Emacs大昔から使われてきた史上最強のエディタです。GUIなど無かった時代にできたので、すべてキーボードで操作するのが基本になっていて、初心者には若干とっつきにくいです。viとの宗教戦争が有名です。AtomGitHub社が開発した新しいエディタです。将来有望と言われています。練習問題01-3(☆)テキストエディタで新しくファイルを作り、適当な内容の文章を入力して保存しなさい。場所については第3回で詳しく説明します。拡張子と言って、このファイルの中身がテキストであることを表します。ターミナルを起動し、次のコマンドで今作ったファイルの中身を表示しなさい。~/Desktopcdコマンドは、作業する場所を変更します。場所の指定方法は第3回と第10回で詳しく説明します。~(チルダ)は自分のファイルの置き場所を示します。CNSにはたくさんのユーザがいますので、単にDesktopでは、誰のDesktopなのか分かりません。aaa.txtcatコマンドは、ファイルの中身をターミナルに表示します。Wordなど)で同じ文章を入力し、Desktopに新しいファイルとして保存しなさい。します(ただし、docxの部分はワードプロセッサによって違います)。さっきと同じようにターミナルで中身を表示しなさい。aaa.docx今作ったファイルはもう要らないので削除しましょう。マウスでゴミ箱に入れ、Finderメニューの「ゴミ箱を空にする...」を実行することもできますし、ターミナルで次のコマンドを実行しても削除できます。aaa*rmコマンドは、一旦ゴミ箱に入れることはせず、実行するとすぐに削除します。「aaaで始まる名前のファイル全部」という意味です。今の場合は、aaa.txtとaaa.docxが一度に削除されます。aaaで始まる名前のファイルが他にもあれば、それも削除されてしまいますので注意してください。いうファイルを作って、次の一行を書いておくとよいです。“/pub/sfc/ipl/elisp/init.el”)これで次のように設定されます。メタキーをoptionに変更し、command-X,C,Vでコピーペーストできるようにする。日本語メニューにする(ただし一部のみ)。電子メールの使い方(PPT版ダウンロード)自分のPCやスマホでCNSのメールを読み書きするには、二つの方法があります。バスワードはIMAP/SMTP用のものなので間違えないようにしてください。メールソフトでCNSのメールサーバにアクセスするよう設定する。GUIDEの42ページ〜55ページに載っています。(Keynote版ダウンロード)(pptx版ダウンロード)携帯のメールアドレスに転送する場合、迷惑メールフィルタの設定によっては大学からのメールが受信できないので、設定を確認して下さい。教員へのメールの書き方ガイドタッチタイピング日本経済新聞2017年12月16日S11面「くらし物語」よりタイピング練習(PPT版ダウンロード)いきなり試験問題をやっても上達しません。練習ソフトを使って段階的に練習してください。スポーツでいきなり試合をやらず、基本動作の反復練習から始めるのと同じです。キーボードを見ずに打つ練習をすることが大切です。次のことに気をつけてください。手首を机に付け、指を軽く曲げた自然な状態でホームポジションのキーに指が乗るようにします。ホームポジションを基準にして、他のキーの相対的な位置関係を覚えます。ホームポジション以外のキーを打った後、すぐに指をホームポジションに戻せるように練習してください。指がずれてしまうと、その後のキーは全部間違ってしまいます。ホームポジションに戻れたかどうかは、fキーとjキーに突起が付いているので、触ればわかります。練習用ソフトTUTTT上のスライド資料で紹介しているソフトです。最初はこれを使って指とキーの対応を覚えるのがお勧めです。MacではAppStoreからインストールできます。Linuxの場合:TUTTTをダウンロードします。起動した時にJavaランタイムをインストールするダイアログが出る場合は、そこでインストールしてください。Javaランタイムは次のページからダウンロードすることもできます。無料Javaのダウンロードブラウザで動くソフトSFCで作ったタイピング試験用システムには練習用の問題文もあります。やさしい問題文をクリアすると、試験と同じ問題文で練習できます。https://itclass.sfc.keio.ac.jp/typingtest/他にもいろいろなタイプ練習サイトがあります。ごんタイピング:練習のやり方をていねいに説明してあります。keybr.com:画面にキーボードと次に打つキーを表示してくれます。Ztype:シューティングゲームtyperacer.com:他のユーザと競争します。原則として毎週タイピング試験を行います(時間が足りない週は行わない場合もあります)。合格すればそれ以降は試験をうける必要はありませんので、先生の指示に従って他のことをしてください。試験のやり方は、「タイピング試験について」のページを見てください。