2. HTML

2-a. HTMLファイルって？

　HTML(Hyper Text Mark-up Language)ファイルは、 ホームページを作るために欠かせないものです。 ここでは、その作り方を簡単に解説します。

  1. 作業用フォルダを準備します。
    ↓フォルダの例
    これからゲームを作るために、新しいフォルダを作って下さい。 ウインドウズなら、好きなフォルダの所で 「右クリック → 新規作成 → フォルダ」 で作ることができます。そして好きな名前(gameとか)をつけて下さい。 　

  2. テキストエディタを起動します。
    ウインドウズなら、マウスで順次
    スタート → プログラム → アクセサリ → メモ帳
    と選べば起動できます。

    　もしこれでメモ帳が見つからない場合は、 「スタート → 検索 → ファイルやフォルダ」で、”ﾒﾓ帳”を探してみてください。

  3. ファイルの中身を書きます。 テキストエディタが起動されている状態で
    < H T M L > Enter < / H T M L >
    と順にキーを押して書いてみましょう。これでテキストエディタ(画面)に

    <html> </html>

    と表示されていればＯＫです。
    ↓メモ帳に書き込んだ例
    　あっと、色や空白は違っているかも知れませんが気にしないで下さい(^_^) ただし、「html」 じゃなくて「ｈｔｍｌ」 だったら問題ですね。 何が違うかわかりますでしょうか？ 「html」は半角文字で書かれたもの、 「ｈｔｍｌ」は全角文字で書かれたものです。 プログラムやファイル名には、 特にhtmlなどコンピューターにとって意味のあるキーワードは半角文字ですので、 今後プログラムを作成する場合は半角で入力をお願いします。 おそらくほとんどの方のキーボードには「半角/全角」キーがあるかと思いますが、 それを押すと入力文字の半角と全角を切り替えることができますので、 試してみてください。
    　一応右手にはWindowsのメモ帳で編集した例を一部切り取って貼り付けておきますネ。 もちろん他のテキストエディターを使っても大丈夫です。

  4. ファイルを保存します。
    「ファイル」 → 「名前を付けて保存」を選び、 先程 1 で作ったフォルダを選んだ後、 「好きな名前＋.html」という形式で保存して下さい。 名前はここでは game.html としてみましょう。
    ↓ファイルの例
    　これで HTML ファイルは完成です！
    ファイル名が なんとか.html になっていて、 中身が<html>～</html>で囲まれているファイルが HTML ファイルなのです。

    ヒント：メモ帳をご使用の方へ
    保存する際のファイルの種類が「テキスト文書(txt)」になってしまっていたら、 「すべてのファイル」にしておいた方が良いでしょう。 テキストファイル(txt)にしておくと、 game.html と入力しても game.html.txt に勝手に変更されてしまう場合があるようです。 普通はこれ(txt)でよいのですが、 htmlファイルを作るという高度(?)な事をするので、少し注意が必要です

2-b. 「こんにちは」と表示してみましょう

  1. 「こんにちは」の準備
    　ここでテキストエディタを閉じてしまっていた人は、 もう一度テキストエディタを起動して、 「ファイル」→「開く」を選んで、 先程の game.html を読み込んで下さい。
    　game.html を開いたら（あるいは何もしていなかったら）、 矢印のキーでカーソルを動かしてから、

    <html> こんにちは </html>

    としてみましょう。 日本語の入力の方法は、 掲示板とかチャットへの書き込みとたぶん同じです。 もしここで何か失敗してもマシンが壊れることは絶対ありませんので、 とにかく試してみて下さい。
    　あ、そうそう。大切なことを忘れてました。
    　上の様に書きおわったら「ファイル」～「上書き保存」を選んで下さい。 これでファイルが更新されます。

  2. 「こんにちは」の表示
    　一度テキストエディタを最小化するなどしておきます。
    　そして、それとはまったく別に、 game.html のあるフォルダを開いて下さい。 例えばデスクトップ上にgameというフォルダを作ったのなら、 gameをダブルクリックすると開けます。 そこにgame.htmlというファイル(のアイコン)がある事を確認してください。
    ↓こんな感じ
    ↓ネットスケープの場合
    　そして、その game.html のアイコンをダブルクリックしてみて下さい。 すると、インターネットエクスプローラーが立ち上がって、 そこに「こんにちは」とでていませんか？表示されればここはクリアです。 ここまでがまず第一の関門だったんですよ。上手く行った方、お疲れさまでした！
ヒント：テキストエディタが立ち上がってしまう
　ダブルクリックしてもテキストエディタが立ち上がってしまったら、 ファイル名が「game.txt」など「～.txt」になっていると思われます。 この「txt」「html」の部分を「拡張子(かくちょうし)」と呼びます。 ホームページ用のファイルは拡張子が「html」でなければなりません。 拡張子が正しくhtmlになっているか、 つまりファイル名が正しく「game.html」になっているかを確認してください。
ヒント：拡張子の確認方法
画面に拡張子が表示されていなければ、 ファイルを右クリックして「名前の変更」を選ぶのが良いと思います。 ただし毎回これでは面倒ですので、 以下の処理をして拡張子を画面に表示するのをお勧めします。
[Windows Vista]
(1)左下の「スタート」をクリック
(2)「ドキュメント」をクリック
(3)上の方にある「整理」をクリック
(4)「フォルダと検索のオプション」を選択
(5)「表示」を選択
(6)「登録されている拡張子は表示しない」のチェックを外す
[Windows XP]
(1)左下の「スタート」をクリック
(2)「マイドキュメント」をクリック
(3)上の方にある「ツール」をクリック
(4)「フォルダオプション」を選択
(5)「表示」を選択
(6)「登録されている拡張子は表示しない」のチェックを外す
[Windows 2000]
(1)デスクトップの「マイドキュメント」をダブルクリック
(2)上の方にある「ツール」をクリック
(3)「フォルダオプション」を選択
(4)「表示」を選択
(5)「登録されている拡張子は表示しない」のチェックを外す
[Windows Me/98]
(1)デスクトップの「マイドキュメント」をダブルクリック
(2)上の方にある「表示」をクリック
(3)「フォルダオプション」を選択
(4)「表示」を選択
(5)「登録されている拡張子は表示しない」のチェックを外す
[その他]
ごめんなさい詳細に説明はできません。 他に拡張子を隠すOSがあり解消する方法がわかったら教えて下さい。
ヒント：拡張子がhtmlなのにWebブラウザーが立ち上がらない
　もし拡張子がhtmlなのにアプリケーション選択画面になってしまったら、 その中からインターネットエクスプローラ(Internet explorer)を選んで下さい。 あるいはネットスケープ(Netscape)やモジラ(Mozilla)、オペラ(Opera)などを 持っていたらそれでもOKですが、 このサイトではインターネットエクスプローラーかネットスケープに 対応したものしか解説していないので、どちらかを選んでください。 ちなみに私のパソコンではダブルクリックでネットスケープが立ち上がります。
　ちなみにWindowsには「エクスプローラー」という機能がありますが、 これと「インターネットエクスプローラー」は全く別物です。 ややこしいですケド、混乱しないように頑張って下さい。

2-c. ここまでできれば「今晩は」もカンタン！

　ここまでできたら、ちょっと応用してみましょう。 さっきのファイルを

<html> 今晩は </html>

　としてみて下さい。ファイルを上書き保存した後、 今度はウェブブラウザの更新(再読み込み)ボタンを押してみて下さい。
　どうでしょう？ 「こんにちは」と表示されていたのが 「今晩は」に変わりましたよね？
　こういう風に思い通りの文字が表示できるのって、 すごい嬉しいですよね(^_^) これはつまり、コンピュータは私達の命令の通りに動くってコトなんです。 動くゲームにしても、コンピュータは命令した通りに動きます。 つまり、これができれば動くゲームは作れるって事ですね。

　ところで、上に出てきた上書き保存と更新ですが、 これはこれからいっぱいやることになります。 しかももっと先の方では、 『「上書き保存」と「更新」をして下さい』なんて いちいち書かなくなりますので、 とりあえずこの方法は覚えて下さい。 わからなくなったらここへ戻ってきて下さいね。

2-d. タイトルを付けちゃいましょう。

　次は、さっきのファイルを

<html> <head> <title>新作ゲームタイトル</title> </head> <body> 新作ゲーム本体 </body> </html>

　としてみて下さい。どうですか？ （テキストエディタでの上書き保存とウェブブラウザでの更新を忘れずにして下さいね） 「新作ゲーム本体」だけが表示されましたね？
↓ちと違うけどこんな感じ
　でも良く見て下さい。 ウェブブラウザの上の所に「新作ゲームタイトル」と出ていませんか？ これが <title>～</title>の意味なんです。

2-e. ちょっとだけタグを解説

<html> <head> <title>新作ゲームタイトル</title> </head> <body> 新作ゲーム本体 </body> </html>

  1. タグ
    タグは<???>で始まり</???>で終るものです。 ???タグなどと呼んでいます。???それぞれに意味があります。

  2. <html>～</html>
    これで囲まれた中が HTMLファイルの中身ですよって意味です。

  3. <head>～</head>
    この中は準備部分ですよという意味になります。 titleタグはここに置きます。

  4. <title>～</title>
    この中にタイトル名を書きます。

  5. <body>～</body>
    これが本体になります。
　ここまでで１行の文章はhtmlファイルで表現できるようになりました。 まだゲーム作りの準備段階ですが、少なくともこれができないと何も始まりません。 タイトル(title)と本文(body)は自由自在に変えられるようにしておいてください。 なおここに登場していない他のタグは知らなくても大丈夫です。 徐々に解説していきます。

ヒント：その他のタグ
　HTMLは必要最低限にしておかないとゲーム作りの本題から外れていくのでこれくらいで止めますが、 まだまだ奥は深いです。もしこれで興味が沸いたら HTML関連書籍 も参考にしてみてください。

2-f. Coffee Break 2

　私がプログラムを覚えた当時はhtmlなんてものはありませんでした。 私が格闘していたのはマシン語と呼ばれる、 CPUに直接命令を出すものでした。 CPUというのはコンピュータの頭脳部分です。 実はCPUはhtmlを直接理解することはできません。 htmlを解釈するマシン語プログラムがあって、 それを通して処理されます。 でもホームページでゲームを作るだけなら、 私たちがマシン語の仕組みを知る必要はありません (仕事でゲームプログラマーになるなら必要かも)。 こういう風にマシン語を意識しないで書ける便利なプログラミング言語を「高級言語」と呼びます。
　当時は既にマシン語以外にもいくつか高級言語がありました。 私はその中のBASICというものを触っていました。 BASICは今でも残っています。VBAもその流れの一つですね。 その中には print や goto という命令がありましたが、 まあhtmlで言うところのheadとかbodyとかだと思ってください、 その print とかをどうやって打つのか理解できませんでした。 キーボードを見ても print なんていうキーはありませんから。 …というのが当時の私の理解だったんですね。 これはしばらくして、
P R I N T
と一文字ずつ打てばよい事がわかりました。 これに気付くまで結構時間が必要でした。 だからこの章の「2-a.HTMLファイルって？」では、 一文字ずつ入力することを説明したつもりです。
　こんな感じで私がひっかかったところは丁寧に書いているのですが、 今はパソコンも便利にはなりましたが複雑になりましたし、 皆さんそれぞれひっかかるところが違うと思います。 他にも貴方と同じところでひっかかる方がいると思うんですよね。 なのでよく読んでもわからない場合は、その方のためにも 掲示板 に書きこんでもらえると嬉しいです。

2-g. アンケート

　ここまでで一区切りついた方にお願いです(必須ではありません)。 よろしければ、本章「2.HTML」、 すなわち「2-a.HTMLファイルって？」～「2-e.ちょっとだけタグを解説」について、 最もあてはまるものを選んでいただいて 「アンケートを送信する」を押してください。
既に知っていました
１週間以内でだいたい理解できました
１ヶ月以内でだいたい理解できました
１年以内でだいたい理解できました
１年以上かかりましたがだいたい理解できました
理解できそうに無いのですぐあきらめました
１週間やってみましたがあきらめました
１ヶ月やってみましたがあきらめました
１年やってみましたがあきらめました
１年以上やってみましたがあきらめました
コメント欄：
※コメント欄にはご意見やわかり辛かった部分の指摘等がありましたらお願いします。 (なお質問についてはは掲示板までお願いします)
　ご協力ありがとうございます。
目次へ戻る