情報技術演習Ⅰ 人文学研究のための情報技術入門 2014/05/29 担当：林晋 TA:橋本雄太課題５について • 提出した人は、全員正解でした。ただし、詳しさは色々でした。 • また、アドバンスドをやった人は1名のみでした。 • まだ、ファイルを見せてない人は、林に声をかけて見せてください。 • こういう作業をするときのコツとして、オリジナルのファイルを残しておいて、混乱してきたら、作業中のファイルは諦めて、もう一度最初からやりなおすという手法があります。また、途中経過をコピーしてとっておくのも有効です。今回のテーマ • 情報を発信する – 今までの演習で次のことを学習しました． • • • • – アーカイブなどのＷＥＢ上の情報を集める方法デジカメなどで原資料から画像情報を作る方法それをテキストに変換する方法出来た電子情報を整理する方法情報を集め，そして，加工することの粗筋を学習したので，次に情報をＷＥＢ上で発信する方法を学びます． – そのためにＨＴＭＬ超簡単入門とブログの作り方を学びます．ＨＴＭＬ超簡単入門 • WEBページは原理的に言うとHTML(Hyper Text Markup Language)というマークアップ言語というもので書かれています．今では，HTMLで書かれている部分はおまけ程度で，Javascript, Flash などが中心的な役割をしているページも少なくありませんが，一応，基本は HTML です． • このHTMLファイルは，別にWEB用だけでなく，PowerPoint ファイルの代替物としても使えます．これは基本的には，WEB 以前からある技術のハイパーテキスト用の言語の一つです．ですからネットと関係なくHTMLファイルを自分のノートＰＣ上に置き，IE や FireFox などのWEBブラウザで PowerPoint ファイルを見るように見ることができます．PowerPoint の代わりに，これで研究発表をするというような人も実際にかなりいます． • そこで，まず，インターネット（ＷＥＢ）と関係なくローカルにHTMLファイルを作って，ＩＥでそれを眺めてみましょう． – 課題（提出不要）： (a) インターネットと Web の関係を調べましょう．(b) 「ローカルに」の意味は？ HTMLファイルを作る (1) • メモ帳などのエディタを使って次のような内容のテキストファイル test.txt をつくりましょう．課題（提出不要）：エディタとは．ワープロとの違いは？ＨＴＭＬ超簡単入門フォント普通斜体太字下線カラー赤青黄リストＡＡＡＢＢＢＣＣＣ <h1>ＨＴＭＬ超簡単入門</h1> <h2>フォント</h2> 普通 <i>斜体</i> <b>太字</b> <u>下線</u> <h2>カラー</h2> <font color="red">赤</font> <font color="blue">青</font> <font color="yellow">黄</font> <h2>リスト</h2> <ol><li>ＡＡＡ</li> <li>ＢＢＢ</li> <li>ＣＣＣ</li></ol> HTMLファイルを作る (2) • • • • • • • • test.txt を保存してダブルクリックしてみましょう．．．特別なにも何もおきません．では，extension の txt を html に書き換えてから，ダブルクリックしましょう．何が起きたか分かりますね？ <b>, <i> などはタグと呼ばれるもので，<b> … </b> のように対で使い，<b> が「左カッコ開く」，</b> が「右カッコ閉じる」だと理解すれば良いでしょう． <b>, <i>, <u> はそれぞれ bold, italic, underline をあらわしています． <h1>, <h2>,… は，見出し (header)のことで，1, 2,.. がレベルをあらわします． <ol> は番号つきのリストですが，<ul>にすると黒丸付きのリストになります．<li>はリストの各項目を指定するのに使います．リンクもこのようにして作れます．次の行を test.html に追加してみてください． – <a href="http://www.shayashi.jp">林のサイト</a> – ダブルクリックするとブラウザーが起動されますので，メモ帳を起動して，そのウィンドウにドラッグします． HTMLファイルを作る (3) • • • • 画像の追加も次でできます． <img src=“画像のファイルのパス>．．．</img> パラグラムは <p>…</p>で囲みます．強制的に改行するには <br>と書きます．最近では, これら以外のタグが多く使われたページが増えていますが，文章の配置とか，背景色などを気にしなければ，簡単なＨＴＭＬのホームページは，今までに出てきたタグだけで大体書けてしまいます． – – 比較的基本的なタグしか使ってないページの例 http://www.shayashi.jp/PALCM/ http://www.shayashi.jp/HistoryOfFOM/HilbertNotebookProjectHomepage/index.html これらのページに行き右クリックして「ページのソースを表示」を選ぶと，そのHTMLの中身をみることができます． • さらに詳しいタグの説明は，次のページなどを参考にしてください．本も沢山でています． – 参考ページ：１２３課題６ • 提出期限： 5月29日(本日) 18:00 • 提出方法：[email protected] にメールで． – 件名を“情報技術演習課題6”とする． – 提出すべきファイル kadai.html は添付ファイルとして送る． • 今まで出てきたタグを使って，自己紹介をするHTMLファイル kadai.html を作ってください． – このスライドでは説明してないタグなどを使っても構いません．自分のブログを作る • こういうHTMLファイルを作っても，そのままでは公開できません．公開するには自分のサイト，ページ，ブログなどを持つ必要があります． • ブログはHTMLサイト（ページ）の特殊なものといえますが，標準のHTMLより作りやすい，ブログを，それも無料で使えるものを使ってみましょう． – ブログも公開されるときは，HTMLに変換されていますが，書くときには別の形式のタグを使います． – しかし，別途作ったHTMLを貼り付けて公開することができます．ただし，ブログのサービスごとに使えるタグが制限されているのが普通です．たとえば，Ameba ブログでは Google Book の埋め込みがうまく使えない場合があります．これらの制限はブログごとに違うので自分で確認しながら使いましょう．ブログサービスを選ぶ • 無料で使えるブログは沢山あります．先に説明したように，それぞれのサービスで出来ること，出来ないことが違います． • Google Web Search で，「無料ブログ」などのキーワードで探してみてください． • よく分からないという人は，アメーバブログにしましょう．http://ameblo.jp/ 特に理由はありません・・・ • また，すでに自分のブログやＷＥＢページがある人は，それで構いません．自分のドメインを持つ • • • • • 林のWEBサイトは，www.shayashi.jp という自分専用のドメイン名を使っています． shayashi (s. hayashi) がドメイン名です．自分専用のドメイン名がついたブログやWEBページを持つことは難しくありません例えば：http://www.onamae.com/ http://muumuu-domain.com/ しかし，ドメインだけ取得しても，それを使うには，別途，貸しサーバ（レンタル・サーバ，ホスティング・サーバ）を借りるなどしなくてはなりません. 米国では，かなり前からホスティング業界で価格競争が起きていて，月額4-5ドルほどで，容量無制限のサーバを借りることも可能です．また，ついでにドメイン取得も代行してくれたり，凄く簡単に高性能のブログが作れたり，という会社がたくさんあります．そして、日本でも漸く２，３年前から安いサービスが使えるようになっています． – – • http://www.server-navi.com/ http://www.cheap-server.net/ 興味がある人は挑戦してみましょう．ただし，この1年ほどの傾向として，独自ドメインのメールアドレスはスパムキラーに捕捉されて相手に届かないことが多くなっています．課題７ • 提出期限： 5月29日(本日) 18:00 • 提出方法：[email protected] にメールで． – 件名を“情報技術演習課題7”とする． • 自分のブログかWebページを開設してください．すでにある人は、それでかまいません． • 課題６で提出した kadai.html を，そのブログか Webページで掲示してください． • そして、そのkadai.htmlのURLをメールで提出してください。 • 注意点：自分や他人の個人情報を不必要に書かないようにしましょう。たとえ、住所、電話番号、生年月日などは書かないほうが賢明です。