本日、HTML5プロフェッショナル認定試験 Level1に合格しました。
学習過程を振り返って良かったこと・次に活かしたいことをまとめておきます。

試験概要については既にまとめている方がいらっしゃったのでここでは割愛し、振り返りメインでお送りします。
HTML5プロフェッショナル認定資格Level1 合格記

受験の動機

もともとはJavaScriptを体系的に学ぶのに良さそうな試験を探していたときに、この試験を知りました。
ただ、JavaScriptはLevel2にしか出題されず、Level2を受けるにはLevel1に合格する必要があったため、Level1から受験した次第です。

受験してよかったこと

• より良い実装方法を考えられるようになった
• お試しの機会が得られた
• 仕様書を読まねばと気づいた

それぞれ説明します。

より良い実装方法を考えられるようになった

今までHTML,CSSはまとまった仕様書も参考書も読んだことがなかったため、場当たり的な実装しかできていませんでした。
今回HTML、CSSでできることを広く学ぶことで、実装の引き出しがぐっと増えました。
例えば、アルファベットを大文字にしたいとき、今まではJavaScriptで書いていましたが、CSSの text-transform で実装可能とわかりました。（しかもほとんどのブラウザで対応済み）
text-transform - Can I use...
逆に、前から使ってみたかった<datalist> (サジェスト用のリストを作る要素) を試してみたら、スタイルをCSSで上書きできないことが判明し、実利用は難しいと思いました。

このリストのスタイルを変えられない

入力値が長いと▼が潰れるのもいただけない

このように、より良い実装方法に気づけたり、知識止まりだった技術の使い所を想像するきっかけが持てたことは、大きな収穫でした。
当初はJavaScriptを勉強したいと思っていましたが、HTML,CSSでできることを先に知っておくことで、より適材適所を意識できるのではと思います。

お試しの機会が得られた

受験にあたって、書いたことのないもの・よく理解できていないものは片っ端からサンプルコードを書いてみました。
例えば、今までメディアクエリはなんとなく「難しそう」と敬遠してフレームワークに任せていましたが、実際にサンプルコードを書くと基本の書式は単純だったので、親しみが持てるようになりました。
サンプルだけでも実装しておくと、いざ業務で応用させる必要が出た時にもハードルが下がるはずです。

仕様書を読まねばと気づいた

サンプルコードを書いていくと、参考書を読んだ時には「わかったつもり」でも、疑問がたくさん出てきます。
例えば、CSSのメディアクエリで device-orientation を使うとスマホの向きによってレイアウトを変えることができますが、それを知った段階では「デバイスを横にしたら横用のスタイル、縦にしたら縦用のスタイルが当たるだろう」と思っていました。しかしそれが間違いでした。PCでサンプルコードを書いたとき、PCは横向きであっても、ブラウザの表示幅を狭くしていくと、「縦用」のスタイルに切り替わったのです。
この事象の詳細はこちらでわかりやすく説明してくださっています。
@mediaのorientationはviewportの縦横がどっちが長いかであって、デバイスが縦か横かじゃないですよ

言葉やイメージに囚われず仕様を確認することが大事だと気づくことができました。

次に活かしたいこと

試験勉強の中での経験から、次に活かしたいことをまとめます。

• 手を動かしながら覚える
• 日々仕様書を読む
• 時々体系的に学ぶ時間をつくる

手を動かしながら覚える

最初は参考書をひたすら読んで問題を説いていく「読書型」の勉強法でした。
ただ、参考書を1,2週したところで自分が過去に線を引いた内容をあまり覚えていないことに気づいたため、「暗記よりも手を動かして理解しよう」と方針を変えました。
そうすると、何度も本で間違えたところが、一度コードを書くことで、すっと理解できるようになりました。
疑問に思ったところは更に検索したり、開発者ツールや拡張機能を使って、自分の実装が「見た目以外も」意図通りになっているかを確認しました。
例えば、どのセクショニングがどうアウトラインに影響するか話は本で何度読んでも忘れたので、サンプルコードを書いて、下記のツールで意図通りの出力になっているかを確認しました。
headingsMap

他にも気になったところは「書く」→「調べる」を繰り返したおかげで理解力が上がりました。この方針転換をしていなければ、合格しても1週間で忘れてしまい、使える知識にならなかったと思います。
参考書の知識を自らの力とする上ではアウトプットは必須と心得ました。

日々仕様書を読む

正直、これまではChromeの開発者ツールやVSCodeが予測してくれる候補の中から「それっぽいもの」をブラウザ上で確認して問題なさそうなら使うことがありました。HTML、CSSはある程度雰囲気で書いても動いてくれるので、仕様を理解して使うのが義務と知りつつ調べずに使ってしまっていたのですが、今回仕様を頻繁に調べる中で、「思ったのと違う」ものが多いことに気づきました。それが今までの行為は他のブラウザでどう見えるかや、他の挙動を起こさないか等の点を考慮できておらず非常に良くなかったと反省し、今後は仕様を調べてから使っていこうと心を改めました。
それに加えて、今まで当たり前に使っていたものも、思い違いや理解していない部分がきっとあるので、時々仕様書をまとめて読み返そうと思います。

時々体系的に学ぶ時間をつくる

今回はHTML,CSSなどWebアプリ開発における基礎知識の大々的な見直しや補完をしたことによって、上記の益を得ることができました。他の技術についても同じことが言えるので、時々このような試験を受けるのはよい気づきの機会だと思いました。

まとめ

この試験に限らずですが、手を動かしながら知識を使って理解すること、それをどう活用できそうかイメージすることが生きた知識につながるのだと思いました。
次は本懐であるLevel2を受験する予定なので、そちらの勉強はじめから手を動かしてやっていこうと思います。

はじめに

初めまして、@kashiwagi_wataruと申します。

プログラミングを初めて間もない頃って成果物を誰かに使ってもらうことが少なくてモチベーションの意地が結構難しいと思うんですよね。
なんか初心者の人でも誰かに使ってもらえるようなアプリを開発できる記事をかけないかなぁと考えてみました！
そこで思いついたのがコピペでできる。テトリスを作って遊んでもらお！と言う開発から公開まで一連の流れを体験できる記事です。

追記：OUTPUTの鬼となるため、初めてqiitaの記事を書かせていただくことになりました。
乱文、乱コードは寒い日の夜中に子供にプレゼントを届けるサンタのような目でみていただければ幸いです

この記事の対象とする人

• プログラミングを初めてまもない人
• サーバーサイドが苦手な人
• 自分が作ったものを誰かに使ってみてもらいたい人
• 今この記事を見ている人

やりたいことメモ

大人気ゲームテトリスを作る
スマホでも操作可能。
ホーム画面に追加をするとオフラインでも使えようにする
消した行をカウントする。
デプロイとか難しいことはしたくない。AWSで間違ってお金がかかったりするから（うっかり課金経験者ですw）

（AWSでお金がうっかり課金されちゃいガチな人はこちらへ笑 https://qiita.com/Yuji-Ishibashi/items/bb1c0042fd16a9350c5a ）

目次

大きく分けて3つに分けることができます。

1. PWAの設定をする
2. テトリスを作る
3. githubで公開する

一応なぞってコピペしていくと完成するようになっていますが、
興味あるところまで飛ばしてくださっても全然大丈夫です！

PWAとは？

みなさん、PWAってご存知ですか。
Googleが言い出した、今注目されつつある仕組みで、
これを使えばwebサイトのUIUXをよりよくできるだろうと言われているものになります。

https://www.seohacks.net/basic/terms/pwa/

WAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。
PWAはそれ自体が何か特殊な一つの技術、というわけではありません。レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。
PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。

つまり、webアプリケーションをあたかもスマホアプリのように使えるようになるとのことです！
「ホーム画面に追加」をするとキャッシュさえ残っていればオフラインでもそのwebページが利用可能になるとのこと。。

PWAの導入

PWAの導入はすごく簡単です。

必要なファイルは下記の3つです。

• index.html
• service_worker.js
• manifest.json

圧倒的少なさ！
これだけでゲームが作れるなんて

では一つずつ紹介していきますね

index.html

このファイルは一番最初に表示されるページとなります。
スマホでもたくさん使って欲しいのでviewportの記述を忘れずに、
とりあえずは下記のような感じでいいでしょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="manifest.json">
    <title>Tetris_app</title>
  </head>
  <body>
　　<script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service_worker.js').then(function(registration) {
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(function(err) {
          console.log('ServiceWorker registration failed: ', err);
        });
      }
     </script>
   </body>
</html>

service_worker.js

PWAにとってこのファイルはとても大事です。
push通知とかアプリチックなことを実行するときに重要なservice_workerの登録をしてくれます。

service_worker.js

// キャッシュファイルの指定
var CACHE_NAME = 'TetrisApp-caches';
var urlsToCache = [
    '/kashiwagi-wataru.github.io/',
];

// service workerの記述 
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service_worker.js').then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
        console.log('ServiceWorker registration failed: ', err);
    });
    }
// インストール処理
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(function(cache) {
                return cache.addAll(urlsToCache);
            })
    );
});

// キャッシュロードの処理
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches
            .match(event.request)
            .then(function(response) {
                return response ? response : fetch(event.request);
            })
    );
});

manifest.json

これは、スマホでアプリみたいに利用できるようにするためのファイルです。
下記のような感じでいいでしょう
ポイントは"display": "standalone"です。
standaloneにすることでスマホでアプリのように使用することができます。
もっと拘りたい方は、
https://developer.mozilla.org/ja/docs/Web/Manifest
をみて改造してみてください
アイコンとかを指定できたりもします。

manifest.json

{
    "short_name": "Tetris",
    "name": "Tetris_App",
    "display": "standalone",
    "start_url": "index.html"
}

これで最低限必要なファイルは完成です！（簡単！）

テトリスを作る

今からテトリスを作っていきます。
テトリスといえば知らない人はいないあのゲームのことですよね。
ゲームをつくるといっても使うのは、HTML CSS Javascriptの3つしか使いません。
先ほど作った3つのファイル＋cssファイル,jsファイルを作りましょう。
下記のファイルは全て同じ階層に格納されます。

• index.html（このファイルに上書きしていきます）
• service_worker.js（これは触らない）
• manifest.json（これも触らない）

--下記2つを追加--

• style.css
• app.js

こんなのを作れればいいなぁと思ってます。

テトリスのコードはすごく長くなるのでザーッとみてコピペでいいですw
追々細かい説明を書いていきます笑(2020年になってから笑)

テトリスのコードは下記の通りです。

index.html

先ほど作ったindex.htmlに追記（上書き）していきましょう

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="manifest" href="manifest.json">
    <title>PWA Sample</title>
  </head>
  <body>
    <div class="title-wrap">
      <h1>テトリスで遊ぼう！</h1>
    </div>
    <div class="wrapper-container">
      <div class="tetris-container">
        <div class="tetris-main">
          <canvas id="stage" width="250px" height="500px" style="background-color:black;">
          </canvas>
        </div>
        <div class="tetris-option">
          <span class="tetris-panel-container">
            <p>Next</p>
              <canvas id="next" width="150px" height="150px" style="background-color:black;">
              </canvas>
            <p>LINES:<span id="lines">0</span></p>
            <p><span id="message"></span></p>
            <div class="tetris-panel-container-padding">
            <table class="tetris-button-panel">
              <tr>
                <td></td>
                <td id="tetris-rotate-button" class="tetris-button">↻</td>
                <td></td>
              </tr>
              <tr>
                <td id="tetris-move-left-button"class="tetris-button">←</td>
                <td id="tetris-fall-button"class="tetris-button">↓</td>
                <td id="tetris-move-right-button"class="tetris-button">→</td>
              </tr>
            </table>
            </div>
          </span>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
    <script>
      var tetris = new Tetris();
      tetris.startGame();
    </script>
  </body>
</html>

style.css

style.css

html {
    touch-action: manipulation;
}



h1 {
    margin:  0;                 
    position:  relative;        
    font-size: 40px;            
    text-align:  center;        
    margin:  20px 0;            
    display: inline-block;     
}

p {
    margin:  0;                 
    line-height: 2;             
}

 .title1-wrap {
    padding-bottom:  20px;      
    text-align:  center;        
}


.wrapper-container {
    display: inline-block;
}

.tetris-container {
    height:530px;
    display: flex;
    flex-direction: row;
    margin: 10px;
    background-color: #333333;
}

.tetris-panel-contaizner {
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    flex-direction: column;
    color: white;
    background-color: #333333;
}

.tetris-panel-container-padding {
    flex-grow: 1;
}

.tetris-panel-container p {

   margin-left:20px;
   padding: 10px 0;
   font-family: sans-serif;
   font-size: 20px;
   color: #ffffff;
}

.tetris-button-panel {
    border-style: none;
    width: 100%;
    padding-top:100px;
}

.tetris-button {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background: #444444;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, .15);
    border-radius: 4px;
}

.tetris-button:active {

    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

app.js

app.js

class Tetris {
    constructor() {
        this.stageWidth = 10;
        this.stageHeight = 20;
        this.stageCanvas = document.getElementById("stage");
        this.nextCanvas = document.getElementById("next");
        let cellWidth = this.stageCanvas.width / this.stageWidth;
        let cellHeight = this.stageCanvas.height / this.stageHeight;
        this.cellSize = cellWidth < cellHeight ? cellWidth : cellHeight;
        this.stageLeftPadding = (this.stageCanvas.width - this.cellSize * this.stageWidth) / 2;
        this.stageTopPadding = (this.stageCanvas.height - this.cellSize * this.stageHeight) ;
        this.blocks = this.createBlocks();
        this.deletedLines = 0;

        window.onkeydown = (e) => {
            if (e.keyCode === 37) {
                this.moveLeft();
            } else if (e.keyCode === 38) {
                this.rotate();
            } else if (e.keyCode === 39) {
                this.moveRight();
            } else if (e.keyCode === 40) {
                this.fall();
            }
        }

        document.getElementById("tetris-move-left-button").onmousedown = (e) => {
            this.moveLeft();
        }
        document.getElementById("tetris-rotate-button").onmousedown = (e) => {
            this.rotate();
        }
        document.getElementById("tetris-move-right-button").onmousedown = (e) => {
            this.moveRight();
        }
        document.getElementById("tetris-fall-button").onmousedown = (e) => {
            this.fall();
        }
    }

    createBlocks() {
        let blocks = [
            {
                shape: [[[-1, 0], [0, 0], [1, 0], [2, 0]],
                        [[0, -1], [0, 0], [0, 1], [0, 2]],
                        [[-1, 0], [0, 0], [1, 0], [2, 0]],
                        [[0, -1], [0, 0], [0, 1], [0, 2]]],
                color: "rgb(0, 255, 255)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 128, 128)"
            },
            {
                shape: [[[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]]],
                color: "rgb(255, 255, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 128, 0)"
            },
            {
                shape: [[[0, 0], [1, 0], [-1, 1], [0, 1]],
                        [[-1, -1], [-1, 0], [0, 0], [0, 1]],
                        [[0, 0], [1, 0], [-1, 1], [0, 1]],
                        [[-1, -1], [-1, 0], [0, 0], [0, 1]]],
                color: "rgb(0, 255, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 128, 0)"
            },
            {
                shape: [[[-1, 0], [0, 0], [0, 1], [1, 1]],
                        [[0, -1], [-1, 0], [0, 0], [-1, 1]],
                        [[-1, 0], [0, 0], [0, 1], [1, 1]],
                        [[0, -1], [-1, 0], [0, 0], [-1, 1]]],
                color: "rgb(255, 0, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 0, 0)"
            },
            {
                shape: [[[-1, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [1, -1], [0, 0], [0, 1]],
                        [[-1, 0], [0, 0], [1, 0], [1, 1]],
                        [[0, -1], [0, 0], [-1, 1], [0, 1]]],
                color: "rgb(0, 0, 255)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 0, 128)"
            },
            {
                shape: [[[1, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [0, 0], [0, 1], [1, 1]],
                        [[-1, 0], [0, 0], [1, 0], [-1, 1]],
                        [[-1, -1], [0, -1], [0, 0], [0, 1]]],
                color: "rgb(255, 165, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 82, 0)"
            },
            {
                shape: [[[0, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [0, 0], [1, 0], [0, 1]],
                        [[-1, 0], [0, 0], [1, 0], [0, 1]],
                        [[0, -1], [-1, 0], [0, 0], [0, 1]]],
                color: "rgb(255, 0, 255)",
                highlight: "rgb(255, 255, 255)",１１１１１１１１１１１１
                shadow: "rgb(128, 0, 128)"
            }
        ];
        return blocks;
    }

    drawBlock(x, y, type, angle, canvas) {
        let context = canvas.getContext("2d");
        let block = this.blocks[type];
        for (let i = 0; i < block.shape[angle].length; i++) {
            this.drawCell(context,
                     x + (block.shape[angle][i][0] * this.cellSize),
                     y + (block.shape[angle][i][1] * this.cellSize),
                     this.cellSize,
                     type);
        }
    }

    drawCell(context, cellX, cellY, cellSize, type) {
        let block = this.blocks[type];
        let adjustedX = cellX + 0.5;
        let adjustedY = cellY + 0.5;
        let adjustedSize = cellSize - 1;
        context.fillStyle = block.color;
        context.fillRect(adjustedX, adjustedY, adjustedSize, adjustedSize);
        context.strokeStyle = block.highlight;
        context.beginPath();
        context.moveTo(adjustedX, adjustedY + adjustedSize);
        context.lineTo(adjustedX, adjustedY);
        context.lineTo(adjustedX + adjustedSize, adjustedY);
        context.stroke();
        context.strokeStyle = block.shadow;
        context.beginPath();
        context.moveTo(adjustedX, adjustedY + adjustedSize);
        context.lineTo(adjustedX + adjustedSize, adjustedY + adjustedSize);
        context.lineTo(adjustedX + adjustedSize, adjustedY);
        context.stroke();
    }

    startGame() {
        let virtualStage = new Array(this.stageWidth);
        for (let i = 0; i < this.stageWidth; i++) {
            virtualStage[i] = new Array(this.stageHeight).fill(null);
        }
        this.virtualStage = virtualStage;
        this.currentBlock = null;
        this.nextBlock = this.getRandomBlock();
        this.mainLoop();
    }

    mainLoop() {
        if (this.currentBlock == null) {
            if (!this.createNewBlock()) {
                return;
            }
        } else {
            this.fallBlock();
        }
        this.drawStage();
        if (this.currentBlock != null) {
            this.drawBlock(this.stageLeftPadding + this.blockX * this.cellSize,
                this.stageTopPadding + this.blockY * this.cellSize,
                this.currentBlock, this.blockAngle, this.stageCanvas);
        }
        setTimeout(this.mainLoop.bind(this), 500);
    }

    createNewBlock() {
        this.currentBlock = this.nextBlock;
        this.nextBlock = this.getRandomBlock();
        this.blockX = Math.floor(this.stageWidth / 2 - 2);
        this.blockY = 0;
        this.blockAngle = 0;
        this.drawNextBlock();
        if (!this.checkBlockMove(this.blockX, this.blockY, this.currentBlock, this.blockAngle)) {
            let messageElem = document.getElementById("message");
            messageElem.innerText = "GAME OVER";
            return false;
        }
        return true;
    }

    drawNextBlock() {
        this.clear(this.nextCanvas);
        this.drawBlock(this.cellSize * 2, this.cellSize, this.nextBlock,
            0, this.nextCanvas);
    }

    getRandomBlock() {
        return  Math.floor(Math.random() * 7);
    }

    fallBlock() {
        if (this.checkBlockMove(this.blockX, this.blockY + 1, this.currentBlock, this.blockAngle)) {
            this.blockY++;
        } else {
            this.fixBlock(this.blockX, this.blockY, this.currentBlock, this.blockAngle);
            this.currentBlock = null;
        }
    }

    checkBlockMove(x, y, type, angle) {
        for (let i = 0; i < this.blocks[type].shape[angle].length; i++) {
            let cellX = x + this.blocks[type].shape[angle][i][0];
            let cellY = y + this.blocks[type].shape[angle][i][1];
            if (cellX < 0 || cellX > this.stageWidth - 1) {
                return false;
            }
            if (cellY > this.stageHeight - 1) {
                return false;
            }
            if (this.virtualStage[cellX][cellY] != null) {
                return false;
            }
        }
        return true;
    }

    fixBlock(x, y, type, angle) {
        for (let i = 0; i < this.blocks[type].shape[angle].length; i++) {
            let cellX = x + this.blocks[type].shape[angle][i][0];
            let cellY = y + this.blocks[type].shape[angle][i][1];
            if (cellY >= 0) {
                this.virtualStage[cellX][cellY] = type;
            }
        }
        for (let y = this.stageHeight - 1; y >= 0; ) {
            let filled = true;
            for (let x = 0; x < this.stageWidth; x++) {
                if (this.virtualStage[x][y] == null) {
                    filled = false;
                    break;
                }
            }
            if (filled) {
                for (let y2 = y; y2 > 0; y2--) {
                    for (let x = 0; x < this.stageWidth; x++) {
                        this.virtualStage[x][y2] = this.virtualStage[x][y2 - 1];
                    }
                }
                for (let x = 0; x < this.stageWidth; x++) {
                    this.virtualStage[x][0] = null;
                }
            let linesElem = document.getElementById("lines");
                this.deletedLines++;
                linesElem.innerText = "" + this.deletedLines;
            } else {
                y--;
            }
        }
    }

    drawStage() {
        this.clear(this.stageCanvas);

        let context = this.stageCanvas.getContext("2d");
        for (let x = 0; x < this.virtualStage.length; x++) {
            for (let y = 0; y < this.virtualStage[x].length; y++) {
                if (this.virtualStage[x][y] != null) {
                    this.drawCell(context,
                        this.stageLeftPadding + (x * this.cellSize),
                        this.stageTopPadding + (y * this.cellSize),
                        this.cellSize,
                        this.virtualStage[x][y]);
                }
            }
        }
    }

    moveLeft() {
        if (this.checkBlockMove(this.blockX - 1, this.blockY, this.currentBlock, this.blockAngle)) {
            this.blockX--;
            this.refreshStage();
        }
    }

    moveRight() {
        if (this.checkBlockMove(this.blockX + 1, this.blockY, this.currentBlock, this.blockAngle)) {
            this.blockX++;
            this.refreshStage();
        }
    }

    rotate() {
        let newAngle;
        if (this.blockAngle < 3) {
            newAngle = this.blockAngle + 1;
        } else {
            newAngle = 0;
        }
        if (this.checkBlockMove(this.blockX, this.blockY, this.currentBlock, newAngle)) {
            this.blockAngle = newAngle;
            this.refreshStage();
        }
    }

    fall() {
        while (this.checkBlockMove(this.blockX, this.blockY + 1, this.currentBlock, this.blockAngle)) {
            this.blockY++;
            this.refreshStage();
        }
    }

    refreshStage() {
      this.clear(this.stageCanvas);
      this.drawStage();
      this.drawBlock(this.stageLeftPadding + this.blockX * this.cellSize,
                this.stageTopPadding + this.blockY * this.cellSize,
                this.currentBlock, this.blockAngle, this.stageCanvas);
    }

    clear(canvas) {
        let context = canvas.getContext("2d");
        context.fillStyle = "rgb(0, 0, 0)";
        context.fillRect(0, 0, canvas.width, canvas.height);
    }
}

githubで公開する！！

では作成したファイルをサーバーに公開して終了となります。
サーバーはhttpsが利用できるAWSやherokuなどで頑張って公開しようかと思っていたところ、
githubだけで簡単にwebページを公開する方法があるそうです。

しかもgithubの公式さんが言うには、かなり簡単とのこと。
これはやるしかないですね

github公式が割とわかりやすいのでおいておきますね。
https://pages.github.com/

github.ioと言うものらしいです。

github.ioのメリットデメリット

メリット

• 簡単にwebページを公開できる
• 無料
• 更新したい場合はリポジトリにpushするだけ

デメリット

• ソースコードが公開される
• サーバー依存のjsとかは使えない

今回は...

• ただ自分で作ったwebページを公開するだけ（特にセキリュティを気にするものはない）
• jsはサーバーに依存しない

と言うことで最適な方法と言えるのではないのでしょうか。

方法

やり方は簡単で、
リポジトリ名を
username.github.io
にするだけでいいらしいです。すごい。

ではやってみましょう。(本当にほぼ公式のやり方をなぞっていくだけですw）

① まずはリポジトリを作ります。
命名規則はusername.github.io　だそうです。
僕の場合は下記のようになります。

② 次に下記のコマンドを実行します。デスクトップとかでね

クローンして

git clone https://github.com/username/username.github.io

移動してサンプルテキストを入れて(index.htmlを作って)

cd username.github.io

echo "Hello World" > index.html

git add --all

git commit -m "Initial commit"

git push -u origin master

そして https://username.github.io にアクセスすればHelloWorldと表示されるはず！

なぜか404と怒られてしまいました。。。

原因はよくわかりませんw
ですが作ったリポジトリのsettings にある

ここにリンクが載っていました。
リンクの構造がgithub公式の構造と少し違いますが、とりあえず踏んでみましょう。

表示されました！
（反映されるまで、少し時間が（３０秒くらい)かかるかもしれないので焦らずに待ちましょう）

これで作ったゲームを公開する準備はできました。

このリポジトリにテトリスのファイルをぶち込んで完成となります。

動作確認

最終的なファイルは
- index.html
- style.css
- app.js
- manifest.json
- service_worker.js

の５つになると思います。

githubのリポジトリに全てのファイルが揃ったらhttps://username.github.ioにアクセスしてみましょう。
PC、スマホ両方でアクセスすると良いと思います。

こんな感じでChromeとは別のタブで開けていたらOKです！
オフラインでの動作を確認したいので一度タブを閉じで機内モードにしてから開いてみてください
機内モードでもテトリスで遊べちゃうと思います！
恐るべしPWA。。。

こんな感じで、テトリスをスマホアプリのように扱えるようになりました。
リンクを友達に教えると友達のスマホでも遊べるようになるのでぜひ友達に送りつけてみてください。

参照記事

結構コピペしてますw
https://paiza.hatenablog.com/entry/2018/08/29/PWA%E5%85%A5%E9%96%80%EF%BC%81JavaScript%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E9%AB%98%E9%80%9F%E5%8C%96%EF%BC%86%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E5%AF%BE%E5%BF%9C%E3%81%AEWeb%E3%82%B5

http://kmaebashi.com/programmer/tetris/index.html

https://www.webprofessional.jp/what-is-the-attention-project-pwa-by-google/

https://www.seohacks.net/basic/terms/pwa/

はじめに

初めまして、@kashiwagi_wataruと申します。

プログラミングを初めて間もない頃って成果物を誰かに使ってもらうことが少なくてモチベーションの意地が結構難しいと思うんですよね。
なんか初心者の人でも誰かに使ってもらえるようなアプリを開発できる記事をかけないかなぁと考えてみました！
そこで思いついたのがコピペでできる。テトリスを作って遊んでもらお！と言う開発から公開まで一連の流れを体験できる記事です。

追記：OUTPUTの鬼となるため、初めてqiitaの記事を書かせていただくことになりました。
乱文、乱コードは寒い日の夜中に子供にプレゼントを届けるサンタのような目でみていただければ幸いです

この記事の対象とする人

• プログラミングを初めてまもない人
• サーバーサイドが苦手な人
• 自分が作ったものを誰かに使ってみてもらいたい人
• 今この記事を見ている人

やりたいことメモ

大人気ゲームテトリスを作る
スマホでも操作可能。
ホーム画面に追加をするとオフラインでも使えようにする
消した行をカウントする。
デプロイとか難しいことはしたくない。AWSで間違ってお金がかかったりするから（うっかり課金経験者ですw）

（AWSでお金がうっかり課金されちゃいガチな人はこちらへ笑 https://qiita.com/Yuji-Ishibashi/items/bb1c0042fd16a9350c5a ）

目次

大きく分けて3つに分けることができます。

1. PWAの設定をする
2. テトリスを作る
3. githubで公開する

一応なぞってコピペしていくと完成するようになっていますが、
興味あるところまで飛ばしてくださっても全然大丈夫です！

PWAとは？

みなさん、PWAってご存知ですか。
Googleが言い出した、今注目されつつある仕組みで、
これを使えばwebサイトのUIUXをよりよくできるだろうと言われているものになります。

https://www.seohacks.net/basic/terms/pwa/

WAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。
PWAはそれ自体が何か特殊な一つの技術、というわけではありません。レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。
PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。

つまり、webアプリケーションをあたかもスマホアプリのように使えるようになるとのことです！
「ホーム画面に追加」をするとキャッシュさえ残っていればオフラインでもそのwebページが利用可能になるとのこと。。

PWAの導入

PWAの導入はすごく簡単です。

必要なファイルは下記の3つです。

• index.html
• service_worker.js
• manifest.json

圧倒的少なさ！
これだけでゲームが作れるなんて

では一つずつ紹介していきますね

index.html

このファイルは一番最初に表示されるページとなります。
スマホでもたくさん使って欲しいのでviewportの記述を忘れずに、
とりあえずは下記のような感じでいいでしょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="manifest.json">
    <title>Tetris_app</title>
  </head>
  <body>
　　<script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service_worker.js').then(function(registration) {
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(function(err) {
          console.log('ServiceWorker registration failed: ', err);
        });
      }
     </script>
   </body>
</html>

service_worker.js

PWAにとってこのファイルはとても大事です。
push通知とかアプリチックなことを実行するときに重要なservice_workerの登録をしてくれます。

service_worker.js

// キャッシュファイルの指定
var CACHE_NAME = 'TetrisApp-caches';
var urlsToCache = [
    '/kashiwagi-wataru.github.io/',
];

// service workerの記述 
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service_worker.js').then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
        console.log('ServiceWorker registration failed: ', err);
    });
    }
// インストール処理
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(function(cache) {
                return cache.addAll(urlsToCache);
            })
    );
});

// キャッシュロードの処理
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches
            .match(event.request)
            .then(function(response) {
                return response ? response : fetch(event.request);
            })
    );
});

manifest.json

これは、スマホでアプリみたいに利用できるようにするためのファイルです。
下記のような感じでいいでしょう
ポイントは"display": "standalone"です。
standaloneにすることでスマホでアプリのように使用することができます。
もっと拘りたい方は、
https://developer.mozilla.org/ja/docs/Web/Manifest
をみて改造してみてください
アイコンとかを指定できたりもします。

manifest.json

{
    "short_name": "Tetris",
    "name": "Tetris_App",
    "display": "standalone",
    "start_url": "index.html"
}

これで最低限必要なファイルは完成です！（簡単！）

テトリスを作る

今からテトリスを作っていきます。
テトリスといえば知らない人はいないあのゲームのことですよね。
ゲームをつくるといっても使うのは、HTML CSS Javascriptの3つしか使いません。
先ほど作った3つのファイル＋cssファイル,jsファイルを作りましょう。
下記のファイルは全て同じ階層に格納されます。

• index.html（このファイルに上書きしていきます）
• service_worker.js（これは触らない）
• manifest.json（これも触らない）

--下記2つを追加--

• style.css
• app.js

こんなのを作れればいいなぁと思ってます。

テトリスのコードはすごく長くなるのでザーッとみてコピペでいいですw
追々細かい説明を書いていきます笑(2020年になってから笑)

テトリスのコードは下記の通りです。

index.html

先ほど作ったindex.htmlに追記（上書き）していきましょう

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="manifest" href="manifest.json">
    <title>PWA Sample</title>
  </head>
  <body>
    <div class="title-wrap">
      <h1>テトリスで遊ぼう！</h1>
    </div>
    <div class="wrapper-container">
      <div class="tetris-container">
        <div class="tetris-main">
          <canvas id="stage" width="250px" height="500px" style="background-color:black;">
          </canvas>
        </div>
        <div class="tetris-option">
          <span class="tetris-panel-container">
            <p>Next</p>
              <canvas id="next" width="150px" height="150px" style="background-color:black;">
              </canvas>
            <p>LINES:<span id="lines">0</span></p>
            <p><span id="message"></span></p>
            <div class="tetris-panel-container-padding">
            <table class="tetris-button-panel">
              <tr>
                <td></td>
                <td id="tetris-rotate-button" class="tetris-button">↻</td>
                <td></td>
              </tr>
              <tr>
                <td id="tetris-move-left-button"class="tetris-button">←</td>
                <td id="tetris-fall-button"class="tetris-button">↓</td>
                <td id="tetris-move-right-button"class="tetris-button">→</td>
              </tr>
            </table>
            </div>
          </span>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
    <script>
      var tetris = new Tetris();
      tetris.startGame();
    </script>
  </body>
</html>

style.css

style.css

html {
    touch-action: manipulation;
}



h1 {
    margin:  0;                 
    position:  relative;        
    font-size: 40px;            
    text-align:  center;        
    margin:  20px 0;            
    display: inline-block;     
}

p {
    margin:  0;                 
    line-height: 2;             
}

 .title1-wrap {
    padding-bottom:  20px;      
    text-align:  center;        
}


.wrapper-container {
    display: inline-block;
}

.tetris-container {
    height:530px;
    display: flex;
    flex-direction: row;
    margin: 10px;
    background-color: #333333;
}

.tetris-panel-contaizner {
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    flex-direction: column;
    color: white;
    background-color: #333333;
}

.tetris-panel-container-padding {
    flex-grow: 1;
}

.tetris-panel-container p {

   margin-left:20px;
   padding: 10px 0;
   font-family: sans-serif;
   font-size: 20px;
   color: #ffffff;
}

.tetris-button-panel {
    border-style: none;
    width: 100%;
    padding-top:100px;
}

.tetris-button {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background: #444444;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, .15);
    border-radius: 4px;
}

.tetris-button:active {

    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

app.js

app.js

class Tetris {
    constructor() {
        this.stageWidth = 10;
        this.stageHeight = 20;
        this.stageCanvas = document.getElementById("stage");
        this.nextCanvas = document.getElementById("next");
        let cellWidth = this.stageCanvas.width / this.stageWidth;
        let cellHeight = this.stageCanvas.height / this.stageHeight;
        this.cellSize = cellWidth < cellHeight ? cellWidth : cellHeight;
        this.stageLeftPadding = (this.stageCanvas.width - this.cellSize * this.stageWidth) / 2;
        this.stageTopPadding = (this.stageCanvas.height - this.cellSize * this.stageHeight) ;
        this.blocks = this.createBlocks();
        this.deletedLines = 0;

        window.onkeydown = (e) => {
            if (e.keyCode === 37) {
                this.moveLeft();
            } else if (e.keyCode === 38) {
                this.rotate();
            } else if (e.keyCode === 39) {
                this.moveRight();
            } else if (e.keyCode === 40) {
                this.fall();
            }
        }

        document.getElementById("tetris-move-left-button").onmousedown = (e) => {
            this.moveLeft();
        }
        document.getElementById("tetris-rotate-button").onmousedown = (e) => {
            this.rotate();
        }
        document.getElementById("tetris-move-right-button").onmousedown = (e) => {
            this.moveRight();
        }
        document.getElementById("tetris-fall-button").onmousedown = (e) => {
            this.fall();
        }
    }

    createBlocks() {
        let blocks = [
            {
                shape: [[[-1, 0], [0, 0], [1, 0], [2, 0]],
                        [[0, -1], [0, 0], [0, 1], [0, 2]],
                        [[-1, 0], [0, 0], [1, 0], [2, 0]],
                        [[0, -1], [0, 0], [0, 1], [0, 2]]],
                color: "rgb(0, 255, 255)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 128, 128)"
            },
            {
                shape: [[[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]]],
                color: "rgb(255, 255, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 128, 0)"
            },
            {
                shape: [[[0, 0], [1, 0], [-1, 1], [0, 1]],
                        [[-1, -1], [-1, 0], [0, 0], [0, 1]],
                        [[0, 0], [1, 0], [-1, 1], [0, 1]],
                        [[-1, -1], [-1, 0], [0, 0], [0, 1]]],
                color: "rgb(0, 255, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 128, 0)"
            },
            {
                shape: [[[-1, 0], [0, 0], [0, 1], [1, 1]],
                        [[0, -1], [-1, 0], [0, 0], [-1, 1]],
                        [[-1, 0], [0, 0], [0, 1], [1, 1]],
                        [[0, -1], [-1, 0], [0, 0], [-1, 1]]],
                color: "rgb(255, 0, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 0, 0)"
            },
            {
                shape: [[[-1, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [1, -1], [0, 0], [0, 1]],
                        [[-1, 0], [0, 0], [1, 0], [1, 1]],
                        [[0, -1], [0, 0], [-1, 1], [0, 1]]],
                color: "rgb(0, 0, 255)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 0, 128)"
            },
            {
                shape: [[[1, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [0, 0], [0, 1], [1, 1]],
                        [[-1, 0], [0, 0], [1, 0], [-1, 1]],
                        [[-1, -1], [0, -1], [0, 0], [0, 1]]],
                color: "rgb(255, 165, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 82, 0)"
            },
            {
                shape: [[[0, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [0, 0], [1, 0], [0, 1]],
                        [[-1, 0], [0, 0], [1, 0], [0, 1]],
                        [[0, -1], [-1, 0], [0, 0], [0, 1]]],
                color: "rgb(255, 0, 255)",
                highlight: "rgb(255, 255, 255)",１１１１１１１１１１１１
                shadow: "rgb(128, 0, 128)"
            }
        ];
        return blocks;
    }

    drawBlock(x, y, type, angle, canvas) {
        let context = canvas.getContext("2d");
        let block = this.blocks[type];
        for (let i = 0; i < block.shape[angle].length; i++) {
            this.drawCell(context,
                     x + (block.shape[angle][i][0] * this.cellSize),
                     y + (block.shape[angle][i][1] * this.cellSize),
                     this.cellSize,
                     type);
        }
    }

    drawCell(context, cellX, cellY, cellSize, type) {
        let block = this.blocks[type];
        let adjustedX = cellX + 0.5;
        let adjustedY = cellY + 0.5;
        let adjustedSize = cellSize - 1;
        context.fillStyle = block.color;
        context.fillRect(adjustedX, adjustedY, adjustedSize, adjustedSize);
        context.strokeStyle = block.highlight;
        context.beginPath();
        context.moveTo(adjustedX, adjustedY + adjustedSize);
        context.lineTo(adjustedX, adjustedY);
        context.lineTo(adjustedX + adjustedSize, adjustedY);
        context.stroke();
        context.strokeStyle = block.shadow;
        context.beginPath();
        context.moveTo(adjustedX, adjustedY + adjustedSize);
        context.lineTo(adjustedX + adjustedSize, adjustedY + adjustedSize);
        context.lineTo(adjustedX + adjustedSize, adjustedY);
        context.stroke();
    }

    startGame() {
        let virtualStage = new Array(this.stageWidth);
        for (let i = 0; i < this.stageWidth; i++) {
            virtualStage[i] = new Array(this.stageHeight).fill(null);
        }
        this.virtualStage = virtualStage;
        this.currentBlock = null;
        this.nextBlock = this.getRandomBlock();
        this.mainLoop();
    }

    mainLoop() {
        if (this.currentBlock == null) {
            if (!this.createNewBlock()) {
                return;
            }
        } else {
            this.fallBlock();
        }
        this.drawStage();
        if (this.currentBlock != null) {
            this.drawBlock(this.stageLeftPadding + this.blockX * this.cellSize,
                this.stageTopPadding + this.blockY * this.cellSize,
                this.currentBlock, this.blockAngle, this.stageCanvas);
        }
        setTimeout(this.mainLoop.bind(this), 500);
    }

    createNewBlock() {
        this.currentBlock = this.nextBlock;
        this.nextBlock = this.getRandomBlock();
        this.blockX = Math.floor(this.stageWidth / 2 - 2);
        this.blockY = 0;
        this.blockAngle = 0;
        this.drawNextBlock();
        if (!this.checkBlockMove(this.blockX, this.blockY, this.currentBlock, this.blockAngle)) {
            let messageElem = document.getElementById("message");
            messageElem.innerText = "GAME OVER";
            return false;
        }
        return true;
    }

    drawNextBlock() {
        this.clear(this.nextCanvas);
        this.drawBlock(this.cellSize * 2, this.cellSize, this.nextBlock,
            0, this.nextCanvas);
    }

    getRandomBlock() {
        return  Math.floor(Math.random() * 7);
    }

    fallBlock() {
        if (this.checkBlockMove(this.blockX, this.blockY + 1, this.currentBlock, this.blockAngle)) {
            this.blockY++;
        } else {
            this.fixBlock(this.blockX, this.blockY, this.currentBlock, this.blockAngle);
            this.currentBlock = null;
        }
    }

    checkBlockMove(x, y, type, angle) {
        for (let i = 0; i < this.blocks[type].shape[angle].length; i++) {
            let cellX = x + this.blocks[type].shape[angle][i][0];
            let cellY = y + this.blocks[type].shape[angle][i][1];
            if (cellX < 0 || cellX > this.stageWidth - 1) {
                return false;
            }
            if (cellY > this.stageHeight - 1) {
                return false;
            }
            if (this.virtualStage[cellX][cellY] != null) {
                return false;
            }
        }
        return true;
    }

    fixBlock(x, y, type, angle) {
        for (let i = 0; i < this.blocks[type].shape[angle].length; i++) {
            let cellX = x + this.blocks[type].shape[angle][i][0];
            let cellY = y + this.blocks[type].shape[angle][i][1];
            if (cellY >= 0) {
                this.virtualStage[cellX][cellY] = type;
            }
        }
        for (let y = this.stageHeight - 1; y >= 0; ) {
            let filled = true;
            for (let x = 0; x < this.stageWidth; x++) {
                if (this.virtualStage[x][y] == null) {
                    filled = false;
                    break;
                }
            }
            if (filled) {
                for (let y2 = y; y2 > 0; y2--) {
                    for (let x = 0; x < this.stageWidth; x++) {
                        this.virtualStage[x][y2] = this.virtualStage[x][y2 - 1];
                    }
                }
                for (let x = 0; x < this.stageWidth; x++) {
                    this.virtualStage[x][0] = null;
                }
            let linesElem = document.getElementById("lines");
                this.deletedLines++;
                linesElem.innerText = "" + this.deletedLines;
            } else {
                y--;
            }
        }
    }

    drawStage() {
        this.clear(this.stageCanvas);

        let context = this.stageCanvas.getContext("2d");
        for (let x = 0; x < this.virtualStage.length; x++) {
            for (let y = 0; y < this.virtualStage[x].length; y++) {
                if (this.virtualStage[x][y] != null) {
                    this.drawCell(context,
                        this.stageLeftPadding + (x * this.cellSize),
                        this.stageTopPadding + (y * this.cellSize),
                        this.cellSize,
                        this.virtualStage[x][y]);
                }
            }
        }
    }

    moveLeft() {
        if (this.checkBlockMove(this.blockX - 1, this.blockY, this.currentBlock, this.blockAngle)) {
            this.blockX--;
            this.refreshStage();
        }
    }

    moveRight() {
        if (this.checkBlockMove(this.blockX + 1, this.blockY, this.currentBlock, this.blockAngle)) {
            this.blockX++;
            this.refreshStage();
        }
    }

    rotate() {
        let newAngle;
        if (this.blockAngle < 3) {
            newAngle = this.blockAngle + 1;
        } else {
            newAngle = 0;
        }
        if (this.checkBlockMove(this.blockX, this.blockY, this.currentBlock, newAngle)) {
            this.blockAngle = newAngle;
            this.refreshStage();
        }
    }

    fall() {
        while (this.checkBlockMove(this.blockX, this.blockY + 1, this.currentBlock, this.blockAngle)) {
            this.blockY++;
            this.refreshStage();
        }
    }

    refreshStage() {
      this.clear(this.stageCanvas);
      this.drawStage();
      this.drawBlock(this.stageLeftPadding + this.blockX * this.cellSize,
                this.stageTopPadding + this.blockY * this.cellSize,
                this.currentBlock, this.blockAngle, this.stageCanvas);
    }

    clear(canvas) {
        let context = canvas.getContext("2d");
        context.fillStyle = "rgb(0, 0, 0)";
        context.fillRect(0, 0, canvas.width, canvas.height);
    }
}

githubで公開する！！

では作成したファイルをサーバーに公開して終了となります。
サーバーはhttpsが利用できるAWSやherokuなどで頑張って公開しようかと思っていたところ、
githubだけで簡単にwebページを公開する方法があるそうです。

しかもgithubの公式さんが言うには、かなり簡単とのこと。
これはやるしかないですね

github公式が割とわかりやすいのでおいておきますね。
https://pages.github.com/

github.ioと言うものらしいです。

github.ioのメリットデメリット

メリット

• 簡単にwebページを公開できる
• 無料
• 更新したい場合はリポジトリにpushするだけ

デメリット

• ソースコードが公開される
• サーバー依存のjsとかは使えない

今回は...

• ただ自分で作ったwebページを公開するだけ（特にセキリュティを気にするものはない）
• jsはサーバーに依存しない

と言うことで最適な方法と言えるのではないのでしょうか。

方法

やり方は簡単で、
リポジトリ名を
username.github.io
にするだけでいいらしいです。すごい。

ではやってみましょう。(本当にほぼ公式のやり方をなぞっていくだけですw）

① まずはリポジトリを作ります。
命名規則はusername.github.io　だそうです。
僕の場合は下記のようになります。

② 次に下記のコマンドを実行します。デスクトップとかでね

クローンして

git clone https://github.com/username/username.github.io

移動してサンプルテキストを入れて(index.htmlを作って)

cd username.github.io

echo "Hello World" > index.html

git add --all

git commit -m "Initial commit"

git push -u origin master

そして https://username.github.io にアクセスすればHelloWorldと表示されるはず！

なぜか404と怒られてしまいました。。。

原因はよくわかりませんw
ですが作ったリポジトリのsettings にある

ここにリンクが載っていました。
リンクの構造がgithub公式の構造と少し違いますが、とりあえず踏んでみましょう。

表示されました！
（反映されるまで、少し時間が（３０秒くらい)かかるかもしれないので焦らずに待ちましょう）

これで作ったゲームを公開する準備はできました。

このリポジトリにテトリスのファイルをぶち込んで完成となります。

動作確認

最終的なファイルは
- index.html
- style.css
- app.js
- manifest.json
- service_worker.js

の５つになると思います。

githubのリポジトリに全てのファイルが揃ったらhttps://username.github.ioにアクセスしてみましょう。
PC、スマホ両方でアクセスすると良いと思います。

こんな感じでChromeとは別のタブで開けていたらOKです！
オフラインでの動作を確認したいので一度タブを閉じで機内モードにしてから開いてみてください
機内モードでもテトリスで遊べちゃうと思います！
恐るべしPWA。。。

こんな感じで、テトリスをスマホアプリのように扱えるようになりました。
リンクを友達に教えると友達のスマホでも遊べるようになるのでぜひ友達に送りつけてみてください。

参照記事

結構コピペしてますw
https://paiza.hatenablog.com/entry/2018/08/29/PWA%E5%85%A5%E9%96%80%EF%BC%81JavaScript%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E9%AB%98%E9%80%9F%E5%8C%96%EF%BC%86%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E5%AF%BE%E5%BF%9C%E3%81%AEWeb%E3%82%B5

http://kmaebashi.com/programmer/tetris/index.html

https://www.webprofessional.jp/what-is-the-attention-project-pwa-by-google/

https://www.seohacks.net/basic/terms/pwa/

はじめに

初めまして、@kashiwagi_wataruと申します。

プログラミングを初めて間もない頃って成果物を誰かに使ってもらうことが少なくてモチベーションの意地が結構難しいと思うんですよね。
なんか初心者の人でも誰かに使ってもらえるようなアプリを開発できる記事をかけないかなぁと考えてみました！
そこで思いついたのがコピペでできる。テトリスを作って遊んでもらお！と言う開発から公開まで一連の流れを体験できる記事です。

追記：OUTPUTの鬼となるため、初めてqiitaの記事を書かせていただくことになりました。
乱文、乱コードは寒い日の夜中に子供にプレゼントを届けるサンタのような目でみていただければ幸いです

この記事の対象とする人

• プログラミングを初めてまもない人
• サーバーサイドが苦手な人
• 自分が作ったものを誰かに使ってみてもらいたい人
• 今この記事を見ている人

やりたいことメモ

大人気ゲームテトリスを作る
スマホでも操作可能。
ホーム画面に追加をするとオフラインでも使えようにする
消した行をカウントする。
デプロイとか難しいことはしたくない。AWSで間違ってお金がかかったりするから（経験者ですw）

（AWSでお金がうっかり課金されちゃいガチな人はこちらへ笑 https://qiita.com/Yuji-Ishibashi/items/bb1c0042fd16a9350c5a ）

目次

大きく分けて3つに分けることができます。

1. PWAの設定をする
2. テトリスを作る
3. githubで公開する

一応なぞってコピペしていくと完成するようになっていますが、
興味あるところまで飛ばしてくださっても全然大丈夫です！

PWAとは？

みなさん、PWAってご存知ですか。
Googleが言い出した、今注目されつつある仕組みで、
これを使えばwebサイトのUIUXをよりよくできるだろうと言われているものになります。

https://www.seohacks.net/basic/terms/pwa/

WAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。
PWAはそれ自体が何か特殊な一つの技術、というわけではありません。レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。
PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。

つまり、webアプリケーションをあたかもスマホアプリのように使えるようになるとのことです！
「ホーム画面に追加」をするとキャッシュさえ残っていればオフラインでもそのwebページが利用可能になるとのこと。。

PWAの導入

PWAの導入はすごく簡単です。

必要なファイルは下記の3つです。

• index.html
• service_worker.js
• manifest.json

圧倒的少なさ！
これだけでゲームが作れるなんて

では一つずつ紹介していきますね

index.html

このファイルは一番最初に表示されるページとなります。
スマホでもたくさん使って欲しいのでviewportの記述を忘れずに、
とりあえずは下記のような感じでいいでしょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="manifest.json">
    <title>Tetris_app</title>
  </head>
  <body>
　　<script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service_worker.js').then(function(registration) {
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(function(err) {
          console.log('ServiceWorker registration failed: ', err);
        });
      }
     </script>
   </body>
</html>

service_worker.js

PWAにとってこのファイルはとても大事です。
push通知とかアプリチックなことを実行するときに重要なservice_workerの登録をしてくれます。

service_worker.js

// キャッシュファイルの指定
var CACHE_NAME = 'TetrisApp-caches';
var urlsToCache = [
    '/kashiwagi-wataru.github.io/',
];

// service workerの記述 
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service_worker.js').then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
        console.log('ServiceWorker registration failed: ', err);
    });
    }
// インストール処理
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(function(cache) {
                return cache.addAll(urlsToCache);
            })
    );
});

// キャッシュロードの処理
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches
            .match(event.request)
            .then(function(response) {
                return response ? response : fetch(event.request);
            })
    );
});

manifest.json

これは、スマホでアプリみたいに利用できるようにするためのファイルです。
下記のような感じでいいでしょう
ポイントは"display": "standalone"です。
standaloneにすることでスマホでアプリのように使用することができます。
もっと拘りたい方は、
https://developer.mozilla.org/ja/docs/Web/Manifest
をみて改造してみてください
アイコンとかを指定できたりもします。

manifest.json

{
    "short_name": "Tetris",
    "name": "Tetris_App",
    "display": "standalone",
    "start_url": "index.html"
}

これで最低限必要なファイルは完成です！（簡単！）

テトリスを作る

今からテトリスを作っていきます。
テトリスといえば知らない人はいないあのゲームのことですよね。
ゲームをつくるといっても使うのは、HTML CSS Javascriptの3つしか使いません。
先ほど作った3つのファイル＋cssファイル,jsファイルを作りましょう。
下記のファイルは全て同じ階層に格納されます。

• index.html（このファイルに上書きしていきます）
• service_worker.js（これは触らない）
• manifest.json（これも触らない）

--下記2つを追加--

• style.css
• app.js

こんなのを作れればいいなぁと思ってます。

テトリスのコードはすごく長くなるのでザーッとみてコピペでいいですw
追々細かい説明を書いていきます笑(2020年になってから笑)

テトリスのコードは下記の通りです。

index.html

先ほど作ったindex.htmlに追記（上書き）していきましょう

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="manifest" href="manifest.json">
    <title>PWA Sample</title>
  </head>
  <body>
    <div class="title-wrap">
      <h1>テトリスで遊ぼう！</h1>
    </div>
    <div class="wrapper-container">
      <div class="tetris-container">
        <div class="tetris-main">
          <canvas id="stage" width="250px" height="500px" style="background-color:black;">
          </canvas>
        </div>
        <div class="tetris-option">
          <span class="tetris-panel-container">
            <p>Next</p>
              <canvas id="next" width="150px" height="150px" style="background-color:black;">
              </canvas>
            <p>LINES:<span id="lines">0</span></p>
            <p><span id="message"></span></p>
            <div class="tetris-panel-container-padding">
            <table class="tetris-button-panel">
              <tr>
                <td></td>
                <td id="tetris-rotate-button" class="tetris-button">↻</td>
                <td></td>
              </tr>
              <tr>
                <td id="tetris-move-left-button"class="tetris-button">←</td>
                <td id="tetris-fall-button"class="tetris-button">↓</td>
                <td id="tetris-move-right-button"class="tetris-button">→</td>
              </tr>
            </table>
            </div>
          </span>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
    <script>
      var tetris = new Tetris();
      tetris.startGame();
    </script>
  </body>
</html>

style.css

style.css

html {
    touch-action: manipulation;
}



h1 {
    margin:  0;                 
    position:  relative;        
    font-size: 40px;            
    text-align:  center;        
    margin:  20px 0;            
    display: inline-block;     
}

p {
    margin:  0;                 
    line-height: 2;             
}

 .title1-wrap {
    padding-bottom:  20px;      
    text-align:  center;        
}


.wrapper-container {
    display: inline-block;
}

.tetris-container {
    height:530px;
    display: flex;
    flex-direction: row;
    margin: 10px;
    background-color: #333333;
}

.tetris-panel-contaizner {
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    flex-direction: column;
    color: white;
    background-color: #333333;
}

.tetris-panel-container-padding {
    flex-grow: 1;
}

.tetris-panel-container p {

   margin-left:20px;
   padding: 10px 0;
   font-family: sans-serif;
   font-size: 20px;
   color: #ffffff;
}

.tetris-button-panel {
    border-style: none;
    width: 100%;
    padding-top:100px;
}

.tetris-button {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background: #444444;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, .15);
    border-radius: 4px;
}

.tetris-button:active {

    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

app.js

app.js

class Tetris {
    constructor() {
        this.stageWidth = 10;
        this.stageHeight = 20;
        this.stageCanvas = document.getElementById("stage");
        this.nextCanvas = document.getElementById("next");
        let cellWidth = this.stageCanvas.width / this.stageWidth;
        let cellHeight = this.stageCanvas.height / this.stageHeight;
        this.cellSize = cellWidth < cellHeight ? cellWidth : cellHeight;
        this.stageLeftPadding = (this.stageCanvas.width - this.cellSize * this.stageWidth) / 2;
        this.stageTopPadding = (this.stageCanvas.height - this.cellSize * this.stageHeight) ;
        this.blocks = this.createBlocks();
        this.deletedLines = 0;

        window.onkeydown = (e) => {
            if (e.keyCode === 37) {
                this.moveLeft();
            } else if (e.keyCode === 38) {
                this.rotate();
            } else if (e.keyCode === 39) {
                this.moveRight();
            } else if (e.keyCode === 40) {
                this.fall();
            }
        }

        document.getElementById("tetris-move-left-button").onmousedown = (e) => {
            this.moveLeft();
        }
        document.getElementById("tetris-rotate-button").onmousedown = (e) => {
            this.rotate();
        }
        document.getElementById("tetris-move-right-button").onmousedown = (e) => {
            this.moveRight();
        }
        document.getElementById("tetris-fall-button").onmousedown = (e) => {
            this.fall();
        }
    }

    createBlocks() {
        let blocks = [
            {
                shape: [[[-1, 0], [0, 0], [1, 0], [2, 0]],
                        [[0, -1], [0, 0], [0, 1], [0, 2]],
                        [[-1, 0], [0, 0], [1, 0], [2, 0]],
                        [[0, -1], [0, 0], [0, 1], [0, 2]]],
                color: "rgb(0, 255, 255)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 128, 128)"
            },
            {
                shape: [[[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]],
                        [[0, 0], [1, 0], [0, 1], [1, 1]]],
                color: "rgb(255, 255, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 128, 0)"
            },
            {
                shape: [[[0, 0], [1, 0], [-1, 1], [0, 1]],
                        [[-1, -1], [-1, 0], [0, 0], [0, 1]],
                        [[0, 0], [1, 0], [-1, 1], [0, 1]],
                        [[-1, -1], [-1, 0], [0, 0], [0, 1]]],
                color: "rgb(0, 255, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 128, 0)"
            },
            {
                shape: [[[-1, 0], [0, 0], [0, 1], [1, 1]],
                        [[0, -1], [-1, 0], [0, 0], [-1, 1]],
                        [[-1, 0], [0, 0], [0, 1], [1, 1]],
                        [[0, -1], [-1, 0], [0, 0], [-1, 1]]],
                color: "rgb(255, 0, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 0, 0)"
            },
            {
                shape: [[[-1, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [1, -1], [0, 0], [0, 1]],
                        [[-1, 0], [0, 0], [1, 0], [1, 1]],
                        [[0, -1], [0, 0], [-1, 1], [0, 1]]],
                color: "rgb(0, 0, 255)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(0, 0, 128)"
            },
            {
                shape: [[[1, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [0, 0], [0, 1], [1, 1]],
                        [[-1, 0], [0, 0], [1, 0], [-1, 1]],
                        [[-1, -1], [0, -1], [0, 0], [0, 1]]],
                color: "rgb(255, 165, 0)",
                highlight: "rgb(255, 255, 255)",
                shadow: "rgb(128, 82, 0)"
            },
            {
                shape: [[[0, -1], [-1, 0], [0, 0], [1, 0]],
                        [[0, -1], [0, 0], [1, 0], [0, 1]],
                        [[-1, 0], [0, 0], [1, 0], [0, 1]],
                        [[0, -1], [-1, 0], [0, 0], [0, 1]]],
                color: "rgb(255, 0, 255)",
                highlight: "rgb(255, 255, 255)",１１１１１１１１１１１１
                shadow: "rgb(128, 0, 128)"
            }
        ];
        return blocks;
    }

    drawBlock(x, y, type, angle, canvas) {
        let context = canvas.getContext("2d");
        let block = this.blocks[type];
        for (let i = 0; i < block.shape[angle].length; i++) {
            this.drawCell(context,
                     x + (block.shape[angle][i][0] * this.cellSize),
                     y + (block.shape[angle][i][1] * this.cellSize),
                     this.cellSize,
                     type);
        }
    }

    drawCell(context, cellX, cellY, cellSize, type) {
        let block = this.blocks[type];
        let adjustedX = cellX + 0.5;
        let adjustedY = cellY + 0.5;
        let adjustedSize = cellSize - 1;
        context.fillStyle = block.color;
        context.fillRect(adjustedX, adjustedY, adjustedSize, adjustedSize);
        context.strokeStyle = block.highlight;
        context.beginPath();
        context.moveTo(adjustedX, adjustedY + adjustedSize);
        context.lineTo(adjustedX, adjustedY);
        context.lineTo(adjustedX + adjustedSize, adjustedY);
        context.stroke();
        context.strokeStyle = block.shadow;
        context.beginPath();
        context.moveTo(adjustedX, adjustedY + adjustedSize);
        context.lineTo(adjustedX + adjustedSize, adjustedY + adjustedSize);
        context.lineTo(adjustedX + adjustedSize, adjustedY);
        context.stroke();
    }

    startGame() {
        let virtualStage = new Array(this.stageWidth);
        for (let i = 0; i < this.stageWidth; i++) {
            virtualStage[i] = new Array(this.stageHeight).fill(null);
        }
        this.virtualStage = virtualStage;
        this.currentBlock = null;
        this.nextBlock = this.getRandomBlock();
        this.mainLoop();
    }

    mainLoop() {
        if (this.currentBlock == null) {
            if (!this.createNewBlock()) {
                return;
            }
        } else {
            this.fallBlock();
        }
        this.drawStage();
        if (this.currentBlock != null) {
            this.drawBlock(this.stageLeftPadding + this.blockX * this.cellSize,
                this.stageTopPadding + this.blockY * this.cellSize,
                this.currentBlock, this.blockAngle, this.stageCanvas);
        }
        setTimeout(this.mainLoop.bind(this), 500);
    }

    createNewBlock() {
        this.currentBlock = this.nextBlock;
        this.nextBlock = this.getRandomBlock();
        this.blockX = Math.floor(this.stageWidth / 2 - 2);
        this.blockY = 0;
        this.blockAngle = 0;
        this.drawNextBlock();
        if (!this.checkBlockMove(this.blockX, this.blockY, this.currentBlock, this.blockAngle)) {
            let messageElem = document.getElementById("message");
            messageElem.innerText = "GAME OVER";
            return false;
        }
        return true;
    }

    drawNextBlock() {
        this.clear(this.nextCanvas);
        this.drawBlock(this.cellSize * 2, this.cellSize, this.nextBlock,
            0, this.nextCanvas);
    }

    getRandomBlock() {
        return  Math.floor(Math.random() * 7);
    }

    fallBlock() {
        if (this.checkBlockMove(this.blockX, this.blockY + 1, this.currentBlock, this.blockAngle)) {
            this.blockY++;
        } else {
            this.fixBlock(this.blockX, this.blockY, this.currentBlock, this.blockAngle);
            this.currentBlock = null;
        }
    }

    checkBlockMove(x, y, type, angle) {
        for (let i = 0; i < this.blocks[type].shape[angle].length; i++) {
            let cellX = x + this.blocks[type].shape[angle][i][0];
            let cellY = y + this.blocks[type].shape[angle][i][1];
            if (cellX < 0 || cellX > this.stageWidth - 1) {
                return false;
            }
            if (cellY > this.stageHeight - 1) {
                return false;
            }
            if (this.virtualStage[cellX][cellY] != null) {
                return false;
            }
        }
        return true;
    }

    fixBlock(x, y, type, angle) {
        for (let i = 0; i < this.blocks[type].shape[angle].length; i++) {
            let cellX = x + this.blocks[type].shape[angle][i][0];
            let cellY = y + this.blocks[type].shape[angle][i][1];
            if (cellY >= 0) {
                this.virtualStage[cellX][cellY] = type;
            }
        }
        for (let y = this.stageHeight - 1; y >= 0; ) {
            let filled = true;
            for (let x = 0; x < this.stageWidth; x++) {
                if (this.virtualStage[x][y] == null) {
                    filled = false;
                    break;
                }
            }
            if (filled) {
                for (let y2 = y; y2 > 0; y2--) {
                    for (let x = 0; x < this.stageWidth; x++) {
                        this.virtualStage[x][y2] = this.virtualStage[x][y2 - 1];
                    }
                }
                for (let x = 0; x < this.stageWidth; x++) {
                    this.virtualStage[x][0] = null;
                }
            let linesElem = document.getElementById("lines");
                this.deletedLines++;
                linesElem.innerText = "" + this.deletedLines;
            } else {
                y--;
            }
        }
    }

    drawStage() {
        this.clear(this.stageCanvas);

        let context = this.stageCanvas.getContext("2d");
        for (let x = 0; x < this.virtualStage.length; x++) {
            for (let y = 0; y < this.virtualStage[x].length; y++) {
                if (this.virtualStage[x][y] != null) {
                    this.drawCell(context,
                        this.stageLeftPadding + (x * this.cellSize),
                        this.stageTopPadding + (y * this.cellSize),
                        this.cellSize,
                        this.virtualStage[x][y]);
                }
            }
        }
    }

    moveLeft() {
        if (this.checkBlockMove(this.blockX - 1, this.blockY, this.currentBlock, this.blockAngle)) {
            this.blockX--;
            this.refreshStage();
        }
    }

    moveRight() {
        if (this.checkBlockMove(this.blockX + 1, this.blockY, this.currentBlock, this.blockAngle)) {
            this.blockX++;
            this.refreshStage();
        }
    }

    rotate() {
        let newAngle;
        if (this.blockAngle < 3) {
            newAngle = this.blockAngle + 1;
        } else {
            newAngle = 0;
        }
        if (this.checkBlockMove(this.blockX, this.blockY, this.currentBlock, newAngle)) {
            this.blockAngle = newAngle;
            this.refreshStage();
        }
    }

    fall() {
        while (this.checkBlockMove(this.blockX, this.blockY + 1, this.currentBlock, this.blockAngle)) {
            this.blockY++;
            this.refreshStage();
        }
    }

    refreshStage() {
      this.clear(this.stageCanvas);
      this.drawStage();
      this.drawBlock(this.stageLeftPadding + this.blockX * this.cellSize,
                this.stageTopPadding + this.blockY * this.cellSize,
                this.currentBlock, this.blockAngle, this.stageCanvas);
    }

    clear(canvas) {
        let context = canvas.getContext("2d");
        context.fillStyle = "rgb(0, 0, 0)";
        context.fillRect(0, 0, canvas.width, canvas.height);
    }
}

githubで公開する！！

では作成したファイルをサーバーに公開して終了となります。
サーバーはhttpsが利用できるAWSやherokuなどで頑張って公開しようかと思っていたところ、
githubだけで簡単にwebページを公開する方法があるそうです。

しかもgithubの公式さんが言うには、かなり簡単とのこと。
これはやるしかないですね

github公式が割とわかりやすいのでおいておきますね。
https://pages.github.com/

github.ioと言うものらしいです。

github.ioのメリットデメリット

メリット

• 簡単にwebページを公開できる
• 無料
• 更新したい場合はリポジトリにpushするだけ

デメリット

• ソースコードが公開される
• サーバー依存のjsとかは使えない

今回は...

• ただ自分で作ったwebページを公開するだけ（特にセキリュティを気にするものはない）
• jsはサーバーに依存しない

と言うことで最適な方法と言えるのではないのでしょうか。

方法

やり方は簡単で、
リポジトリ名を
username.github.io
にするだけでいいらしいです。すごい。

ではやってみましょう。(本当にほぼ公式のやり方をなぞっていくだけですw）

① まずはリポジトリを作ります。
命名規則はusername.github.io　だそうです。
僕の場合は下記のようになります。

② 次に下記のコマンドを実行します。デスクトップとかでね

クローンして

git clone https://github.com/username/username.github.io

移動してサンプルテキストを入れて(index.htmlを作って)

cd username.github.io

echo "Hello World" > index.html

git add --all

git commit -m "Initial commit"

git push -u origin master

そして https://username.github.io にアクセスすればHelloWorldと表示されるはず！

なぜか404と怒られてしまいました。。。

原因はよくわかりませんw
ですが作ったリポジトリのsettings にある

ここにリンクが載っていました。
リンクの構造がgithub公式の構造と少し違いますが、とりあえず踏んでみましょう。

表示されました！
（反映されるまで、少し時間が（３０秒くらい)かかるかもしれないので焦らずに待ちましょう）

これで作ったゲームを公開する準備はできました。

このリポジトリにテトリスのファイルをぶち込んで完成となります。

動作確認

最終的なファイルは
- index.html
- style.css
- app.js
- manifest.json
- service_worker.js

の５つになると思います。

githubのリポジトリに全てのファイルが揃ったらhttps://username.github.ioにアクセスしてみましょう。
PC、スマホ両方でアクセスすると良いと思います。

こんな感じでgooglechoromeとは別のタブで開けていたらOKです！
オフラインでの動作を確認したいので一度タブを閉じで機内モードにしてから開いてみてください
機内モードでもテトリスで遊べちゃうと思います！
恐るべしPWA。。。

こんな感じで、テトリスをスマホアプリのように扱えるようになりました。
リンクを友達に教えると友達のスマホでも遊べるようになるのでぜひ友達に送りつけてみてください。

参照記事（結構コピペしてますw）

https://paiza.hatenablog.com/entry/2018/08/29/PWA%E5%85%A5%E9%96%80%EF%BC%81JavaScript%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E9%AB%98%E9%80%9F%E5%8C%96%EF%BC%86%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E5%AF%BE%E5%BF%9C%E3%81%AEWeb%E3%82%B5

http://kmaebashi.com/programmer/tetris/index.html

https://www.webprofessional.jp/what-is-the-attention-project-pwa-by-google/

https://www.seohacks.net/basic/terms/pwa/