Jibakure Advent Calendar 2025

index.htmlの設計とUI【MM2025 開発記 # 3】

Posted at 2025-12-19

はじめに

この記事は 「MM2025 開発記」 シリーズ第3回です。

前回の記事ではプロジェクトの環境構築について紹介しましたが、次は具体的な実装についてやっていきます。
今回の記事ではどのようにindex.htmlを設計したか紹介します。

HTML全体の構造

ゲームの処理部分は大部分をJavaScriptが担っているが、HTMLもゲームの基盤となる重要な役割を果たす部分である。今回の作品で作成したHTMLは以下のような構造となっている。

ページ設定
ローディング画面
ゲーム画面（Canvas + ボタン）
操作説明用モーダル
音楽再生用の audio 要素

ページ設定

ページ設定は、HTMLの<head>タグ内に記述する部分である。

`meta`タグ

<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

charset="utf-8"：文字化けを防ぎ、日本語を正しく表示するための文字コード指定
viewport：スマホやタブレットでも正しく表示するための設定

viewportのcontent部分では、

表示幅を「端末の画面幅」に合わせる
ページを開いたときの拡大率を100%にする
ユーザーがピンチ操作で拡大縮小できないようにする

などの設定をしている。

Googleフォントの読み込み

<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
</style>

Press Start 2P：レトロゲーム風フォント
DotGothic16：ドット感のある日本語フォント

レトロゲーム風というコンセプトでゲームを作成しているため、このようなフォントを使用している。

外部ライブラリ・CSS・JavaScriptの読み込み

<link rel="stylesheet" href="./src/index.css" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/textalive-app-api/dist/index.js"></script>
<script type="module" src="./src/index.js" defer></script>

index.css：見た目変更
axios：HTTP通信を簡単に書くためのライブラリ
TextAlive App API：楽曲・歌詞・タイミング情報を取得
index.js：ゲーム本体の処理

※moduleの場合は何もつけなくてもdefer扱いになるため、defer部分は削除してもよい。deferがついていてもエラーにはならない。

ローディング画面

ここからは<body>タグの中に書いていく。

<div id="loadingScreen">
  <img src="./src/Images/negi_black_border.png" class="spinner-img" alt="Loading" />
  <div>Loading...</div>
</div>

楽曲や画像の読み込み中に表示される画面
TextAliveは初期化に時間がかかるため、ローディング画面の存在は重要

JavaScript側で、準備完了後display = "none"にする。

ゲーム画面

<div id="gameContainer">

ゲームに関係する要素をまとめるための親要素。

Canvas

<img src="./src/Images/logo.png" alt="ゲームロゴ" id="gameLogo">
<canvas id="gameCanvas" width="800" height="600">canvas要素をサポートしていません。</canvas>

ゲームのキャラクターや地面などを描画
JavaScriptでgetContext("2d")を使って描画している

ボタン

<button id="startButton">PRESS START</button>
<button id="settingButton">HOW TO PLAY</button>

タイトル画面に表示されるボタン
ゲーム開始後非表示になる

<button id="backToTitleButton" style="display:none;">
BACK TO TITLE
</button>

ゲーム終了時に表示されるボタン
初期状態では非表示

操作説明用モーダル

<div id="howToPlayModal" class="modal">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <h1>HOW TO PLAY</h1>
    <p>
      ・走る初音ミクをタイミングに合わせてジャンプさせ、コインをゲットしましょう！<br>
      ・コインの取得状況によって、ゴールした時の演出が2種類に分かれます。<br>
      <br>
    </p>
    <h2>CONTROLS</h2>
    <p>
      ・SPACE: ジャンプ<br>
    </p>
  </div>
</div>

ゲームの操作説明を表示するポップアップ
CSSとJavaScriptで表示／非表示を制御

↑実際のポップアップ画面

音楽再生用の audio 要素

<audio id="media"></audio>

TextAlive App APIが制御する音楽再生用要素
JavaScriptから再生・停止・同期を管理

まとめ

今回の記事では、ゲームのHTMLファイル構成について紹介しました。

次回は、今回との関連性があるCSSファイルについて解説していきます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up