きっかけ
ちょっとしたゲームを作ってスマホでいつでもどこでも触れたらいいな、と思い立ちました。
個人利用目的なので、サーバーサイドで処理が必要になるようなものだと自前でサーバーを立てたりが面倒そうだなと感じました。そこでjavascriptで完結する簡単なwebページ1つくらいなら無料で公開できるサービスがあるんじゃないか、と探したところgithub actionsというものを見つけました。
今回はこれの使い方を説明します。
ゲームを作る
まずは何より動くゲームが必要です。
作りたいゲームも簡単なものでしたし、javascript力を上げたいわけでもなかったので、chatGPTに適当に作ってもらいました。
サンプルソース
htmlにべた書きです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>クイズゲーム</title>
<style>
body { font-family: sans-serif; text-align: center; }
.question { font-size: 1.2em; margin-top: 20px; }
.btn { margin: 10px; padding: 10px 20px; font-size: 1em; }
.result { font-weight: bold; margin-top: 20px; }
</style>
</head>
<body>
<h1>クイズゲーム</h1>
<div id="quiz-container">
<div class="question" id="question"></div>
<div id="choices"></div>
<div class="result" id="result"></div>
<button class="btn" id="next-btn" style="display: none;">次の問題へ</button>
</div>
<script>
const quizData = [
{
question: "日本の首都は？",
choices: ["大阪", "東京", "京都"],
answer: 1
},
{
question: "1 + 1 は？",
choices: ["2", "3", "1"],
answer: 0
},
{
question: "地球は何番目の惑星？",
choices: ["3番目", "2番目", "4番目"],
answer: 0
}
];
let currentQuestion = 0;
let score = 0;
const questionEl = document.getElementById("question");
const choicesEl = document.getElementById("choices");
const resultEl = document.getElementById("result");
const nextBtn = document.getElementById("next-btn");
function showQuestion() {
const q = quizData[currentQuestion];
questionEl.textContent = q.question;
choicesEl.innerHTML = "";
resultEl.textContent = "";
nextBtn.style.display = "none";
q.choices.forEach((choice, index) => {
const btn = document.createElement("button");
btn.textContent = choice;
btn.className = "btn";
btn.onclick = () => selectAnswer(index);
choicesEl.appendChild(btn);
});
}
function selectAnswer(choiceIndex) {
const q = quizData[currentQuestion];
const correct = q.answer === choiceIndex;
resultEl.textContent = correct ? "正解！" : "不正解…";
if (correct) score++;
nextBtn.style.display = "inline-block";
}
nextBtn.onclick = () => {
currentQuestion++;
if (currentQuestion < quizData.length) {
showQuestion();
} else {
showResult();
}
};
function showResult() {
questionEl.textContent = "ゲーム終了！";
choicesEl.innerHTML = "";
resultEl.textContent = `あなたのスコア：${score} / ${quizData.length}`;
nextBtn.style.display = "none";
}
showQuestion();
</script>
</body>
</html>
Githubにアップロード
Githubといえば様々なOSSプロジェクトが管理されている一大サイトですが、私はいままでgit cloneでソースコードなどを落としてくるという使い方しかしたことがありませんでした。(それも、ビルドガイドの通りに)
github actionsを使うにはgithubへのアップロードが必要なので
1. リポジトリを作る
無料版の場合、visibilityはpublicじゃないとダメです。後から変更できます。
2. htmlをアップロード
リポジトリを作り終えると、このようなコマンドラインが出てきます。
これはreadme.mdをアップロードするコマンドですが、これを先ほどのhtmlに変えればいいです。
htmlを置いたフォルダを用意します。
何もないところで右クリックしてpowershellで開きます。
先ほどでてきたスクリプトを実行します。
git init
git add ./index.html
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/***.git
git push -u origin main
3.公開設定をする
ブラウザを更新すると、次のようなページになっているはずです。赤丸したsettingsを開きます。
左側の欄から、pagesを選びます。
branchを選んでsaveを押してから数分待つとページが公開されています。
わかっていないこと
- githubのサーバー側ではどういう処理をしているのか