GASでオンラインじゃんけんゲームを作成してみました。
GASでHTML CSS JavaScriptの基本もわかりやすく説明しています。
さらに、Google DriveにあるイメージファイルをWEBサイトで利用する方法についても説明していますので、ご覧ください。
初めに
GASでHTML CSS JavaScriptを使って簡単なゲームを作成してみました。
画像は、rock.png、paper.png、scissors.pngとしてGoogle Driveに保存してください。
それぞれの絵をクリックすると、コンピューターが選んだ絵と比べてじゃんけんの結果を示します。
ファイルの作成
コード.gs
コードは下記の通りになります。
doGet関数:
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}この関数は、Google Apps Script でウェブアプリケーションを作る際の入り口となる関数です。
ウェブアプリがリクエストを受け取ったときに実行され、HTMLを返します。
具体的な処理:
HtmlService.createTemplateFromFile('index'):テンプレートを使用することで、スクリプトでデータを埋め込んだり動的にHTMLを生成することが可能になります。index.htmlという名前のHTMLファイルをテンプレートとして読み込む。
.evaluate():読み込んだテンプレートを実際のHTMLに変換します。
.addMetaTag('viewport', 'width=device-width, initial-scale=1'):生成されたHTMLに、<meta>タグを追加します。ここでは、モバイル画面での表示を適切にするための設定（viewport）を行っています。
include関数:
この関数は、他のHTMLファイルを部分的に読み込むために使われます。例えば、ヘッダーやフッターの共通部分を別ファイルに分けて、再利用するときに便利です。
具体的な処理:
HtmlService.createHtmlOutputFromFile(filename):指定されたファイル（filename）をHTMLとして読み込みます。
.getContent():ファイルの中身を文字列として取得します。この文字列はテンプレートやメインのHTMLに組み込むことができます。
ポイント
doGet関数は、Google Apps Script でウェブアプリケーションを作る際に必ず必要です。
include関数は、HTMLのコードを再利用可能にする便利な方法です。
モバイル対応を考慮したviewportの設定が含まれているため、スマホやタブレットでも見やすいデザインに役立ちます。
HTML
index.htmlとして保存してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?!= include('style'); ?>
<title>Rock Paper Scissors Game</title>
</head>
<body>
<h1>Rock Paper Scissors</h1>
<div id="choices">
<img src="https://lh3.googleusercontent.com/d/｛画像ファイルのID｝" alt="Rock" onclick="userChoice('rock')">
<img src="https://lh3.googleusercontent.com/d/｛画像ファイルのID｝" alt="Paper" onclick="userChoice('paper')">
<img src="https://lh3.googleusercontent.com/d/｛画像ファイルのID｝" alt="Scissors" onclick="userChoice('scissors')">
</div>
<div id="result">Choose your move!</div>
<?!= include('java') ?>
</body>
</html>
CSS
CSSについてはstyle.htmlとして保存してください。
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
}
#result {
font-size: 24px;
margin-top: 20px;
}
#choices img {
width: 100px;
margin: 10px;
cursor: pointer;
}
</style>このCSSコードは、HTMLページの見た目をデザインするためのスタイル設定をしています。
bodyセレクタ
ページ全体に適用されるスタイルを設定しています。
font-family: ‘Arial’, sans-serif;
ページ全体のフォントを「Arial」に設定します。
「Arial」がない場合は「sans-serif」フォントが使用されます。
これにより、読みやすいスッキリとした文字が表示されます。
text-align: center;
ページ内のすべてのテキストやコンテンツを中央揃えにします。
#resultセレクタ
結果を表示する部分のスタイルを設定しています。
font-size: 24px;
文字のサイズを24ピクセルに設定します。
視認性が高まり、重要な情報（ゲームの結果）が目立つようになります。
margin-top: 20px;
上部に20ピクセル分の余白を設定します。
他のコンテンツとの間隔を調整して、見た目を整えます。
#choices imgセレクタ
グー、チョキ、パーの画像部分のスタイルを設定しています。
width: 100px;
各画像の幅を100ピクセルに統一します。
画像サイズが異なる場合でも、一貫した見た目を維持します。
margin: 10px;
各画像の周りに10ピクセルの余白を設定します。
画像同士の間隔が空き、レイアウトが整います。
cursor: pointer;
画像にマウスを重ねるとポインタ（手の形のカーソル）が表示されます。
画像がクリック可能であることをユーザーに示します。
JavaScript
JavaScriptはjava.htmlとして保存してください。
<script>
function userChoice(choice) {
var choices = ['rock', 'paper', 'scissors'];
var computerChoice = choices[Math.floor(Math.random() * 3)];
document.getElementById('result').innerText = "You chose: " + choice + ", Computer chose: " + computerChoice;
if (choice === computerChoice) {
document.getElementById('result').innerText += "\nIt's a tie!";
} else if (
(choice === 'rock' && computerChoice === 'scissors') ||
(choice === 'paper' && computerChoice === 'rock') ||
(choice === 'scissors' && computerChoice === 'paper')
) {
document.getElementById('result').innerText += "\nYou win!";
} else {
document.getElementById('result').innerText += "\nYou lose!";
}
}
</script>このようにファイルを作成してください。
画像ファイルの挿入
画像ファイルの挿入は下記の通りとなっています。
Google Driveの画像ファイルを共有からリンクをコピーしてURLを取得して、画像ファイルのIDを入力してください。
<img src="https://lh3.googleusercontent.com/d/{画像のファイルID}" />こちらを参考にしています。
仕組み
- ユーザーは画像（rock、paper、scissors）をクリックして選択します。
userChoice関数が呼び出され、コンピュータがランダムに選んだものと比較して勝敗を判定します。- 判定結果が
#result要素に表示されます。
