【ぷよプロ】ぷよぷよプログラミングを始めよう（開発編②）- index.htmlを用意しよう

みなさんこんにちは！

本記事は以下記事の続きです。

2021年6月26日【ぷよプロ】ぷよぷよプログラミングを始めよう（開発編①）

本日は「ぷよプロ」シリーズの第４回、アプリ開発編②をやっていきましょう！

はじめに

前回までの内容で、今回開発するアプリの全体構成はわかりました！

じゃあ次は何から学習していけばよいのでしょうか？？

ともとも

まずは、アプリが起動できる段階まで開発していこう！次に、機能ごとに順に開発していこうと考えているよ。

実際の現場でも開発は画面単位 or 機能単位で開発していくことが多いから、いい経験になると思うよ！

もともと、開発編は３回構成で説明する想定でしたが、わかりやすさの観点から、次の順番で記事を分けて説明していこうと思います。（前回含め５回構成に変更します。）

index.htmlを用意しよう（本記事）
initializeを実装して初期表示をできるようにしよう
アプリの機能を開発していこう①
1. 「ぷよぷよ」が落ちてくる
2. 「ぷよ」を左右に動かす
アプリの機能を開発していこう②
1. 「ぷよ」を回してみよう
2. 「ぷよ」を消してみよう
3. 「ぷよ」を変えてみよう

index.htmlを書いていこう

前回説明したように、まずブラウザから呼び出されるのが、index.htmlです。index.htmlからまずは見ていきましょう。

コードは次の通りです。

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <title>ぷよぷよの制作を体験してみよう！</title>
    <script src="components/loader.js"></script>
    <script src="src/config.js"></script>
    <script src="src/stage.js"></script>
    <script src="src/score.js"></script>
    <script src="src/puyoimage.js"></script>
    <script src="src/player.js"></script>
    <script src="src/game.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
    </script>
</head>
    <body style="margin:0;">
        <!-- <div id="stage" style="position:absolute; left: 0; top: 0; overflow: hidden;"></div> -->
        <div id="stage" style="position:relative; margin: 0 auto; overflow: hidden;background: url(img/puyo_2bg.png)"></div>
        <!-- <div id="score" style="position:absolute; left: 0; top: 0; overflow: hidden; text-align: right;"></div> -->
        <div id="score" style="margin: 0 auto; overflow: hidden; text-align: right;"></div>
        <div style="display:none">
            <img src="img/puyo_1.png" id="puyo_1">
            <img src="img/puyo_2.png" id="puyo_2">
            <img src="img/puyo_3.png" id="puyo_3">
            <img src="img/puyo_4.png" id="puyo_4">
            <img src="img/puyo_5.png" id="puyo_5">
            <img src="img/batankyu.png" id="batankyu">
            <img src="img/zenkeshi.png" id="zenkeshi">
            <img src="img/0.png" id="font0">
            <img src="img/1.png" id="font1">
            <img src="img/2.png" id="font2">
            <img src="img/3.png" id="font3">
            <img src="img/4.png" id="font4">
            <img src="img/5.png" id="font5">
            <img src="img/6.png" id="font6">
            <img src="img/7.png" id="font7">
            <img src="img/8.png" id="font8">
            <img src="img/9.png" id="font9">
        </div>
    </body>
</html>

順に内容を追ってみましょう。HTMLは基本的に大きく次のタグで構成されています。

HTML

<!DOCTYPE HTML>
<html>
    <head>（必要なファイルなどを読み込む）</head>
    <body>（Webページに表示する内容）</body>
</html>

<!DOCTYPE HTML>は今から作成するファイルがHTMLであることを宣言するものです。（なので、あまり深く考える必要はないです。

そして、htmlタグで囲まれた内容がHTMLファイルの対象です。ここでは、headタグとbodyタグが囲まれていることがわかると思います。headタグは、HTMLファイルのタイトルやほかのCSSファイルやJavaScriptファイルの読み込みを行います。そして、bodyタグにはブラウザに実際に表示する内容を書いていきます。

headタグ

まずは、headタグの内容を見ていきましょう。

headタグには次のタグが含まれています。

metaタグ
★titleタグ
★scriptタグ
★linkタグ

★がついているタグがheadタグで知っておきたい内容です。１つづつ見ていきましょう。

titleタグ

ページタイトルを定義するタグです。

<title>ぷよぷよの制作を体験してみよう！</title>

上記のように書くと、Chromeでは次のように表示されます。

scriptタグ

scriptタグはJavaScriptファイルを読み込む際に利用するタグです。使い方は次の通りです。

<script src="（javascriptファイルのindex.htmlからの相対パス）" type="text/javascript"></script>
※type属性を指定しない場合、javascriptファイルだと自動で認識されます。

linkタグ

linkタグはcssファイルを読み込む際に利用するタグです。使い方は次の通りです。

<link rel="stylesheet" href="（cssファイルのindex.htmlからの相対パス）" ></link>

また、補足ですがよくfaviconを指定する際にもこのlinkタグが用いられます。faviconを指定する際には次のように記載します。

<link rel="icon" href="（faviconのindex.htmlからの相対パス）"></link>

faviconとは？

favicon(ファビコン)とは、ウェブサイトを象徴するアイコンのことです。

例えば当サイトだと、次の画像がfaviconに設定されています。

このfaviconはChromeだとタイトルの横に表示されたり、お気に入り登録した際に表示されたりするので、意外と見える場面が多く、できれば設定しておきたいですね。

bodyタグ

次にbodyタグの中を見ていきましょう。

bodyタグには次のタグが含まれていました。

divタグ
imgタグ

どちらも重要なタグなので、見ていきましょう

divタグ

divタグは一言でいうと「横幅いっぱいの領域」を表します。

divタグ自体には特に何も表示するものはないのですが、divタグで囲った内容を領域内に収めるような動きをします。なので、例えば次のように書いたとしましょう。

<div style="background-color:red;color:white;">divタグ１つ目</div>
<div style="background-color:blue;color:white;">divタグ２つ目</div>

すると次のようにブラウザに表示されます。

このように横幅いっぱいに領域をとる要素のことをブロック要素といいます。

また、逆に中に入っている要素だけ領域をとるもののことをインライン要素といいます。

インライン要素で代表的なのはspanタグです。例えば、次のコードを書いたとしましょう。

<span style="background-color:red;color:white;">spanタグ１つ目</span>
<span style="background-color:blue;color:white;">spanタグ２つ目</span>

すると次のように表示されます。

このブロック要素とインライン要素をうまく意識することがまず、どのように画面表示をさせたいのかを理解するコツになるので、覚えておきましょう！

imgタグ

imgタグは画像を表示する際に利用するタグです。使い方は次の通りです。

<img src="画像ファイルのindex.htmlからの相対パス" id="画像を識別するためのid">

起動してみよう

この状態で、Visual Studio Codeのターミナルを開いて次のコマンドを入力してみましょう。

npm run dev

するとブラウザが自動で立ち上がり次のような画面が表示されると思います。

まっしろ！ですね（笑）ですが、問題ありません。これは、読み込んでいるJavaScriptに何も書いていないため、このように表示されています。

このnpm run devを実行中は、コードを修正して保存するとリアルタイムでブラウザに反映されます。（リロード不要）試しに次のようにコード変えてみましょう。

28行目：<div style="display:none">を<div style="display:block">に変更して、保存してください。

すると次の画像が表示されるはずです。

このように、修正がすぐに反映されて確認できるので、以降は常にnpm run devを起動していることを前提として説明します。（この修正箇所は戻しておいてください。）

終わりに

お疲れさまでした。いかがでしたでしょうか？

今回は、アプリの入口であるindex.htmlを開発をしました。次回からはJavaScriptを中心に解説していくので、頑張っていきましょう！