情報技術演習Ⅰ 人文学研究のための情報技術入門

情報技術演習Ⅰ
人文学研究のための情報技術入門
2012/11/29
担当：林晋
TA:秋田慧
今回のテーマ
• 情報を発信する
– 今までの演習で次のことを学習しました．
•
•
•
•
アーカイブなどのＷＥＢ上の情報を集める方法
デジカメなどで原資料から画像情報を作る方法
それをテキストに変換する方法
出来た電子情報を整理する方法
– 情報を集め，そして，加工することの粗筋を学習したので，次に情報をＷＥＢ
上で発信する方法を学びます．
– そのためにＨＴＭＬ超簡単入門とブログの作り方を学びます．
2015/10/1
2
ＨＴＭＬ超簡単入門
• WEBページは原理的に言うとHTML(Hyper Text Markup Language)というマ
ークアップ言語というもので書かれています．今では，HTMLで書かれて
いる部分はおまけ程度で，Javascript, Flash などが中心的な役割をしてい
るページも少なくありませんが，一応，基本は HTML です．
• このHTMLファイルは，別にWEB用だけでなく，PowerPoint ファイルの代替
物としても使えます．これは基本的には，WEB 以前からある技術のハイ
パーテキスト用の言語の一つです．ですからネットと関係なくHTMLファイ
ルを自分のノートＰＣ上に置き，IE や FireFox などのWEBブラウザで
PowerPoint ファイルを見るように見ることができます．PowerPoint の代わ
りに，これで研究発表をするというような人も実際にかなりいます．
• そこで，まず，インターネット（ＷＥＢ）と関係なくローカルにHTMLファイル
を作って，ＩＥでそれを眺めてみましょう．
– 課題： (a) インターネットと Web の関係を調べましょう．(b) 「ローカルに」の意味は？
2015/10/1
3
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>
2015/10/1
4
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>
– ダブルクリックするとブラウザーが起動されますので，メモ帳を起動して，そのウィンド
ウにドラッグします．
2015/10/1
5
HTMLファイルを作る (3)
•
•
•
•
画像の追加も次でできます．
<img src=“画像のファイルのパス>．．．</img>
パラグラムは <p>…</p>で囲みます．
強制的に改行するには <br>と書きます．
最近では, これら以外のタグが多く使われたページが増えていますが，文章の配
置とか，背景色などを気にしなければ，簡単なＨＴＭＬのホームページは，今まで
に出てきたタグだけで大体書けてしまいます．
–
–
比較的基本的なタグしか使ってないページの例
http://www.shayashi.jp/PALCM/
http://www.shayashi.jp/HistoryOfFOM/HilbertNotebookProjectHomepage/index.html
これらのページに行き右クリックして「ページのソースを表示」を選ぶと，そのHTMLの中身をみることができ
ます．
•
さらに詳しいタグの説明は，次のページなどを参考にしてください．本も沢山でて
います．
– 参考ページ：１２３
2015/10/1
6
課題６
• 提出期限： 11月29日(本日) 18:00
• 提出方法：[email protected] にメールで．
– 件名を“情報技術演習課題6”とする．
– 提出すべきファイル kadai.html は添付ファイルとして送る．
• 今まで出てきたタグを使って，自己紹介をするHTMLファイル kadai.html
を作ってください．
– このスライドでは説明してないタグなどを使っても構いません．
2015/10/1
7
自分のブログを作る
• こういうHTMLファイルを作っても，そのままでは公開できませ
ん．公開するには自分のサイト，ページ，ブログなどを持つ
必要があります．
• ブログはHTMLサイト（ページ）の特殊なものといえますが，標
準のHTMLより作りやすい，ブログを，それも無料で使えるも
のを使ってみましょう．
– ブログも公開されるときは，HTMLに変換されていますが，書くときに
は別の形式のタグを使います．
– しかし，別途作ったHTMLを貼り付けて公開することができます．ただ
し，ブログのサービスごとに使えるタグが制限されているのが普通で
す．たとえば，Ameba ブログでは Google Book の埋め込みがうまく使
えない場合があります．これらの制限はブログごとに違うので自分で
確認しながら使いましょう．
2015/10/1
8
ブログサービスを選ぶ
• 無料で使えるブログは沢山あります．先に説明した
ように，それぞれのサービスで出来ること，出来ない
ことが違います．
• Google Web Search で，「無料ブログ」などのキー
ワードで探してみてください．
• よく分からないという人は，アメーバブログにしましょ
う．http://ameblo.jp/ 特に理由はありません・・・
• また，すでに自分のブログやＷＥＢページがある人
は，それで構いません．
2015/10/1
9
自分のドメインを持つ
•
•
•
林のWEBサイトは，www.shayashi.jp という自分専用のドメイン名を使っています．
shayashi (s. hayashi) がドメイン名です．
自分専用のドメイン名がついたブログやWEBページを持つことは難しくありません
例えば：http://www.onamae.com/ http://muumuu-domain.com/
しかし，ドメインだけ取得しても，それを使うには，別途，貸しサーバ（レンタル・サ
ーバ，ホスティング・サーバ）を借りるなどしなくてはなりませんし国内のサービス
の場合，それなりの出費を覚悟する必要があります．
•
ところが米国では，数年前からホスティング業界で価格競争が起きていて，月額
4-5ドルほどで，容量無制限のサーバを借りることが可能です．また，ついでにドメ
イン取得も代行してくれたり，凄く簡単に高性能のブログが作れたり，という会社
がたくさんあります．
•
必要なのは少しの英語力と，クレジットカードです．興味がある人は挑戦してみま
しょう．
2015/10/1
10
課題７
• 提出期限： 11月29日(本日) 18:00
• 提出方法：[email protected] にメールで．
– 件名を“情報技術演習課題7”とする．
• 自分のブログかWebページを開設してください．
• また，課題６で提出した kadai.html を，そのブログか Webページで掲示し
てください．
• そして、作ったブログのURLをメールで提出してください。
• 注意点：自分や他人の個人情報を不必要に書かないようにしましょう。た
とえ、住所、電話番号、生年月日などは書かないほうが賢明です。
2015/10/1
11

Download Report