よしの投稿 - Crieit

ハッカソンイベントで、「2」に近い式をあてるゲームを作ってみた

2020-09-20T19:25:58+09:00

こんにちは、最近「個人開発ガリガリやって実力つけたいなー」と思っているよしです。
先日、web1week に参加してきました。
色々とてんやわんやしながらも、なんとか投稿までいけたので、レポートを残しておきますー。

はじめに

web1week の概要

「1週間でお題に沿った Web サービスを作ってみよう」というハッカソン的なイベントです。

9/7～9/13の1週間でWebサービスを作るイベントです！　Hello worldレベルのサービスでもOKですのでぜひご参加をお願いします！ #駆け出しエンジニア仲間が多い方は是非シェアもお願いします～お題は「2」です。https://t.co/cl4XbPFici
— だら🎄いろいろつくってる (@dala00) September 6, 2020

参加したきっかけ

前回も参加して楽しかったので。

前回参加の時は割と使える時間が多かった一方、今回は仕事が終わった後か休日に開発することになりました。
なので、最初はどうしようかとも思いましたが、他の参加者の皆さんの多くは同じ状況下で開発されているはずなので、まぁどうにかなるだろう...くらいの気持ちで参加してました。

※前回参加時のレポート記事
- ハッカソンイベントで、React Konva 製のジグソーパズルっぽいパズルを作ってみた

自分が作ったもの

Close to 2

今回のお題は「2」ということで、
計算結果が一番「2」に近い式をあてるゲームを作りました。
一応、スマホでも遊べます。

イベントボードへの投稿から引用。

初級、中級、上級で遊べて、難易度が高いほど長い式になり、30秒で何問正答できるかな？というゲームです。
自分で作っておいてなんですが、暗算得意じゃないと無理ゲーじゃねーかと思いました。

なんでこれを作ろうとしたのか

こちらもボードへの投稿に書いていたので引用。

元々は「２」に関するクロスワードを作ろうとしていたのですが、「２」縛りで問題を考えるのがしんどいの極みだったので変えました（しかも土曜...）
その時点ですでに投稿されていた方（特に、きらぷかさんとDE-TEIUさん）の作品を見て、シンプルなゲームでも十分面白いものが作れるんだなぁと思い、今回の作品に至りました。
（他の方の作品を参考にさせていただきましたが、丸パクリレベルになってしまわないよう気を付けたつもりです）

技術構成

最初は前回同様、Docker の Node.js コンテナを使おうとしてました。
ただ、yarn コマンドやアプリ自体の動作速度、VSCode で開発する上での環境など色々考えたらめんどくさくなったので、WSL の Node.js を使いました。
（フロント開発でわざわざDocker使う意味ある？という議論も見かけたことがあったので...）

本番は GitHub Pages でホスティングしています（gh-pages でデプロイ）

使用した主なライブラリはこちら
- React：言わずと知れたUI構築ライブラリ（create-react-app で導入）
- Material UI：UI コンポーネント集
- React Share：各種 SNS のシェアボタン集
- React Snap：SPA の OGP設定
- PropTypes：props のバリデーション
- ESLint：静的解析
- Prettier：コードフォーマッター

前回同様、基本的な UI は Material UI で構築。
一部、前回作ったコンポーネントを流用したものもあります。

どんな感じで開発してたのか

大体こんなでしたが、「8日目」があるところからわかるように、1日遅刻投稿です（苦笑）

1日目：9/7(月)

「2」というお題を目にして、何を作るか悩みました。
前回、React Konva というライブラリを使用したので、今回も何かライブラリを使おうかと Reactのライブラリを調べてました。

そこで GitHub - React Crossword という、クロスワードを作れるライブラリを見つけ、これで何かやろうかな？となりました。

2日目：9/8(火)

クロスワードで何かするのであれば問題を考える必要があります。
とりあえず環境構築だけしておこうと、この日はリポジトリ作って環境構築まで。

3日目：9/9(水)

技術構成のところで書いた通り、わざわざ Docker 環境を使うの微妙だなと思ったので WSL を使う方向へ移行。
React Crossword を試してみたかったので試してみてました。

おおー、ライブラリでホントにクロスワードできたー。（公式のサンプルコード）#web1week pic.twitter.com/4dA2snPpzC
— よし (@yoshi44_lion) September 9, 2020

4日目：9/10(木)

「2」をいろんな言語の読み方にして成立するような問題を考えてました。

5日目：9/11(金)

この日も問題を考えるも、あまり進まず...。

6日目：9/12(土)

さすがに問題をどうにかしないと...と焦り出しました（遅い）

「2」をいろんな言語の読み方にして成立するような問題を考えていたものの、思いのほか難しい
↓
これ無理じゃね？
↓
読み方でなく「2」が含まれるものに関する問題（例：2月の和風月名 → キサラギ）に移行してみる
↓
縦読み、横読みを成立させるのが難しい
↓
これ無理じゃね？

みたいな感じになった結果、クロスワードは諦めることに...。

じゃあ、何を作ろうか？というところで、すでに投稿されていた他の参加者の方の作品を見て、シンプル路線にすることにしました。
ここからやっと当作品を作り始めます。

元々、2に関するクロスワード作ろうとしてたけど、問題考えるのがしんどすぎて、他のものに切り替え中。明日、とりあえず公開できる程度になればいいなぁ。#web1week
— よし (@yoshi44_lion) September 12, 2020

7日目：9/13(日)

何とか実装が進み、一旦デプロイしてみようとなりました。
前回は Firebase Hosting を使用しましたが、今回は使うまでもないかなということで GitHub Pages にホスティングすることに。

GitHub Actions でデプロイする記事を見かけたので、それでやろうと試みるもビルドで失敗。
どうも ESLint の react-hooks/exhaustive-deps ルールに引っ掛かっていたようです（.eslintrc 設定に含まれていなくても、ビルド時にチェックされる？）

対応方法を調べて試すも、なかなか解決しなかったので、一旦は無効化で対応（あまりよくないことでしょうが...）
ビルドはパスするようになり、デプロイ自体は成功しているものの、なぜか真っ白なページしか表示されず...。

この時点でもうヘロヘロで瀕死だったので、この日は諦めて終わりました。

ゲームとしてはできてるんだけど、ESLint の新ルールにビルドを阻まれ、GitHub Pages にデプロイできる GitHub Actions 試そうとしたら、デプロイ自体は成功してるっぽいのに、URL にアクセスしても何も表示されないし。やり方悪いんかな...。もう疲れた...。一旦終わろう。 #web1week
— よし (@yoshi44_lion) September 13, 2020

8日目：9/14(月)

gh-pages を使用して手動デプロイしてみても真っ白ページに。
試しに S3 にデプロイしたら普通に動作したので、GitHub Pages の問題と切り分け。

真っ白ページの原因を特定。
GitHub Pages 特有の注意点を見落としていただけだったようです。
こちらの記事にまさしくなことが書いてありました。
- create-react-appとTypeScriptでサラッと作ったSPAをgh-pagesにスルッとデプロイすっぞ！

ただ、これでもなぜか GitHub Actions でのデプロイは真っ白
ページのままだったので、以降は手動デプロイでやるように。

GitHub Pages のデプロイで動いたー。どうも package.json に homepage キーで URL を指定する必要があったらしい。そういえば Jekyll をデプロイするうえでの注意点とかで、前に見たことあったような…。なんか URL がずれておかしくなる的な。#web1week
— よし (@yoshi44_lion) September 14, 2020

無事動作確認できたし投稿するかと思いましたが、こういうのはやはり OGP 設定や Twitter シェア機能を付けた方がいいよなぁ...ということで対応することに。
この時点でもヘロヘロ気味だったので、やっつけで対応して、日が変わる直前に何とか投稿しました。

なんとか形にできたー。計算結果が一番「２」に近い式をあてるゲームを作りました。よろしければ遊んでやってください🙏Close to 2 - （9/7～9/13）１週間でWebサービスを作るイベント - お題「2」 - Boards - Crieit https://t.co/HDSKmfCsWo #Crieit #web1week
— よし (@yoshi44_lion) September 14, 2020

おおよそどんなことをやっているのか

特に変わったことはしてないと思いますので、ソースコード見てもらった方が早いかとー。
- GitHub - close-to-2

参考にさせていただいた記事はこちらなど
- JavaScriptで要素がオブジェクトの配列を日付や数値でソートする方法
- JavaScriptで重複排除を自分で実装してはいけない（Setを使う）

課題

React Hooks のこととか、もうちょっとわかったら、全体的にもっとスマートに書けるんでしょうかね...。なんかごちゃついてる感。

OGP はやっつけで5分くらいで作りました(笑)

Twitter シェアボタンは、公式のものを SPA で使うには少し工夫がいるということで、なんかうまくいきませんでした...。
なので今回は React Share を頼りました。
本当は Twitter アイコンとともにツイートと書かれたボタンにしたかったのですが、React Share だとできないっぽい？ということで妥協することに。

今回参加してどうだったか

楽しかったですが、前回以上にてんやわんやしてたなぁと(笑)
特に最後の方。まぁ、自分が前半悠長にやってたせいなんですが。

Twitter シェアボタンを導入したおかげて、遊んでくださってる方の存在を確認することができました。
確認できるとやはり嬉しいですね！

他の方の投稿を見るのも楽しい + 勉強になりますし、こういったイベントに参加するのはいい経験になりますね。
web1week はほどよくゆるい感じの雰囲気があるので、敷居が低くて参加しやすいなと。
また開催されることがありましたら、余程忙しくない限りはなるべく参加していきたいなーと思います。

ありがとうございました！

参考リンクまとめ

ハッカソンイベントで、React Konva製のジグソーパズルっぽいパズルを作ってみた

2020-05-29T13:19:06+09:00

個人開発って何作るか悩んだり、モチベを保つのが難しかったりしますよね。
そんな自分が、先日web1weekというイベントで個人開発にチャレンジしました。
何とかリリースまでできたので、使用した技術やどんなことをやったのかといった内容を残しておきます。

はじめに

web1weekって？

簡単に言うと「1週間でお題に沿ったWebサービスを作ってみよう」というイベントです。
当コミュニティ Crieit の運営者である、だらさん主催で行われました。

5/18～5/24の1週間でWebサービスを作るイベントです！　Hello worldレベルのサービスでもOKですのでぜひご参加をお願いします！ #駆け出しエンジニア仲間が多い方は是非シェアもお願いします～お題は「Like」です。 https://t.co/ORZQGb6Yu2 #Crieit #web1week #StayHome
— だら🎄サービスづくりひたすら (@dala00) May 17, 2020

参加しようと思ったきっかけ

主な背景としては
- 個人開発に使える時間があった
- 前回の開催時も面白そうと気になっていた（今回は2回目の開催）
- 個人開発をやってみたかった（+こういったイベントならモチベも保てるかなと思った）
といった感じです。

個人開発は以前からやりたいと思うことはありつつ、結局モチベが続かなくて止めてしまったりということが多かったのです...。
もし何か作ることができたら、1つの実績にできて自分の財産になるかなーと思いました。

これは...やるしかない。

ということで参加。

自分が作ったもの

Jigsaw Like Puzzle

ちょっとしたパズルを作りました。
PC向け。スマホ対応は現状してません。

なんでパズル？

イベント記事への投稿にも書いていたので引用します。

「Like」ということで
好きなもの → 趣味とかかな？ → 絵を描くこと（最近全然描いてないけど） → Canvasでお絵描き実装ができるらしい → でも、ただ絵を描くだけじゃつまらない → もしかしてジグソーパズル作れそう？といった感じで行きつきました。

ジグソーパズル特有の形は再現できてないので、あくまで「ジグソーパズルっぽいもの」ですね。
完全に後付け理由ですが、Like って「～ようなもの」って意味もありますし、意図せずテーマに沿ったものになりました（笑）
こんなことあるんですねー。

構成

構成図描こうかなとも思ったんですが、大した構成でもないのでざっくり文面で書きます。

開発はDockerのNode.jsコンテナで。
本番はFirebase Hostingでホスティングしています。

使用した主なライブラリはこちら（正確には他にもあります）
- React：言わずと知れたUI構築ライブラリ（create-react-appで導入）
- React Konva：Canvasを扱うライブラリであるKonva.jsのReact版
- React Router：ルーティング
- Material UI：UIコンポーネント集
- PropTypes：propsのバリデーション
- ESLint：静的解析
- Prettier：コードフォーマッター

基本的なUIはMaterial UIで構築しました。
Boxコンポーネントがすごい便利でしたね。おかげであまりCSSを書かずにすみました。divがその分増えましたが。
パズル部分はReact Konvaで構築しています。

React KonvaとFirebaseについては初めて使ったので、まだまだちゃんとわかってないことも多いです。

どんな感じで開発してたのか

ざっくりこんな感じでした。

1日目：5/18(月)

お題に沿って何を作るか案がなかなか出てこなかったです。
React Konvaに行きついてからドキュメントをひたすら読んで、夕方くらいにやっとパズルいけるかも？ってなりました。

2日目：5/19(火)

午後からやっと手元の環境で動かしてみました。
色々試してみて、なんとなくいけそうかな？という手ごたえがありました。

パズルっぽいものを作成チャレンジ。 #web1week pic.twitter.com/JL4D2noURE
— よし (@yoshi44_lion) May 19, 2020

ただ、そこからパズルの元となる画像の適切なサイズ割り出しに時間かかりました...。3パターンできれいに割れて、適度な大きさのサイズがいいよねってなりまして。

3日目：5/20(水)

ようやく画像サイズを決定。

720 * 480
初級：120 * 120 → 6 * 4 = 24
中級：80 * 80 → 9 * 6 = 54
上級：60 * 60 → 12 * 8 = 96

その後、ストップウォッチの実装をどうやるかめっちゃ悩みました...。
記事を参考にしながら試すも、うまくいかずドはまり。
時間かかりつつも一応実装できました。

この時点でいまだにリポジトリを作っていなかったので、とりあえず作成だけ。

4日目：5/21(木)

ルーティングやOGP、画像の取り扱いをどうしようか悩みました。
結果的には、最低限遊べるレベルのリリースができればいいやということで、一旦は妥協することにしました。

午後からやっとプロジェクトのセットアップ。
Issueやプルリクのテンプレ、Dockerで開発環境構築ともろもろ必要な準備を整えました。

ピース位置チェック（正解位置に置かれたらはまる）のやり方がなんとなくわかって、よーし作っていくぞーという流れへ。

5日目：5/22(金)

パズル画面に背景テクスチャをいれようとしましたが、迷ったので結局止めました。

黙々と進めて、ぼんやりとしたイメージで作っていった画面のモックがおおよそできました。

やっとモック的なものができた #web1week pic.twitter.com/r9GK4fwEuM
— よし (@yoshi44_lion) May 22, 2020

モックに続いて、難易度選択モーダル、ピース生成ロジックを作成。

6日目：5/23(土)

ポーズモーダル、クリアモーダルを作成。

ここまでで、とりあえず最低限遊べることは確認できたのでリリースすることに。
コンポーネントを多少分けてはいましたが、ファイル分割とか全然できてなかったので、そこまでリファクタやってからリリースするかとも考えたのですが、もうやっちゃえとなりました。

ホスティングに関しては、多少慣れてるNetlifyでやる手もあるなと思いました。
ただ、今後機能拡張していくとしたらFirebaseの方が色々やれてよさそうと思い、こちらにすることにしました。

リリース（v0.1.0）して投稿。
リリースと言いつつ、色々と足りてないものがまだあるのでプレリリースみたいなものですね。

パズルリリースしましたー。 https://t.co/028WAbS7W9 よかったら遊んでみてください。 PC向け。簡易的なものなので、クオリティはご容赦ください🙏（5/18～5/24）１週間でWebサービスを作るイベント - お題「Like」 - Boards の投稿 - Crieit https://t.co/FldwX4odRN #Crieit #web1week #StayHome
— よし (@yoshi44_lion) May 23, 2020

おおよそどんなことをやっているのか

ソースコードはリファクタやったりして変わる可能性があるので、リポジトリ見ていただいた方が確実かもしれません（あまりきれいなコードではないですが...）
一応、Issue書いたりしながら進めました。
- GitHub - jigsaw-like-puzzle

以下の内容は執筆時点（v0.1.4）での実装のものとなります。
有識者の方からすると、この実装イケてないとかあると思いますがご容赦ください。

ストップウォッチ

概要

setInterval()とclearInterval()を使って実装。
恥ずかしながら自分はこの関数を使用したことがなかったこともあり、最初はストップウォッチってどうやって実装したらいいんだろう？という状態でした。

実装のやり方についてはこちらの記事をとても参考にさせていただきました。
- 【1から始めるReact】ストップウォッチを作る

1秒ごとに秒数カウントを+1して、その秒数カウントをもとに時、分、秒を計算して更新していくというものです。

問題点

同画面で開始と停止を行う上では問題なかったのですが、今回の場合は
- パズル画面の「一時停止」ボタンを押す → ストップウォッチを停止してポーズモーダルを開く
- ポーズモーダルの「復帰」ボタンを押す → ポーズモーダルを閉じて、ストップウォッチ再開

という仕様だったので、再開時に時間が最初からになってしまう問題が起きました。

秒数カウントはstateで管理してない変数だったので、再レンダリング時に値がリセットされていたんだろうなと。
そのため、秒数カウントの値をバックアップを取っておく感じでstateでも保持するようにしました。
1秒ごとの更新処理の際に、秒数カウント（変数）が0 だったらstateを確認して、バックアップがあればそこから復元するイメージです。

秒数カウントを最初からstateで管理すればいいのでは？となるかもしれませんが、stateでやるとうまく動いてくれなかったので、こういった形をとりました。

パズル

概要

React Konvaで実装していますが、その実体はCanvasです。
Canvasを扱うKonva.jsというライブラリがあり、そのReact版だそうです。

Canvasを扱うにはKonva.jsが便利らしいみたいな記事は複数見かけたんですが、自分はCanvas自体を使ったことがなかったため、いまいちピンとこず...。
なので、最初はひたすらドキュメントを読んで、おおよそどんなことができるものなのかを見ていきました。
その結果、パズルいけそうだなという目途がついたので使ってみたという背景があります。

Konva.jsの構造としては、以下のようになっています（公式より引用）

Shapeは複数種類があり
- Rect（長方形）
- Circle（円）
- Ellipse（楕円）
- Line（線）
- Image（画像）
- Text（テキスト）
- Star（星）

などがあてはまります。

これらは上位の要素を基準とした x、y座標であったり、横幅、縦幅、色、影などを指定することで、Canvasに描画をしていけるようになっています。

パズルの元画像

Imageコンポーネントを使用。
普通に画像パスを渡すのではダメらしく、use-imageライブラリのuseImageフックを使って生成した、DOM画像を渡すようにしています。
- GitHub - use-image

ちなみにピース数の計算との兼ね合いで、画像サイズおよびこのImageコンポーネントのサイズは 720 * 480 で固定しています。

パズルの額縁

Lineコンポーネントを使用。
4つの点の座標を指定して繋ぐことで図形を描画。これを上下左右で4つ作成しています。
ただの塗りつぶしだと安っぽくなるので、グラデーション指定にしてみました。

パズルのピース

Imageコンポーネントを使用。
useImageフックによる DOM 画像を渡しているのは同様ですが、cropを指定することで画像の切り抜きをしています。

例として初級の場合であれば、ピースサイズは 120 * 120 なので
1行目
- {x:0 y:0 width:120 height:120}
- {x:120 y:0 width:120 height:120}
- {x:240 y:0 width:120 height:120}
.
.
.

2行目
- {x:0 y:120 width:120 height:120}
- {x:120 y:120 width:120 height:120}
- {x:240 y:120 width:120 height:120}
.
.
.

みたいな感じです。
合わせてコンポーネント自体のサイズも 120 * 120 を指定になります。

draggableを有効化してドラッグアンドドロップができるように。
そのうえ、onDragStartとonDragEndでイベント処理を実装しています。

ピースドラッグ時の挙動

scaleを変えて、少しだけピースが大きくなるようになっています。
（公式デモのコードそのまま持ってきた感じです）

それに加えて、ドラッグしているピースが必ず最前面に来るような処理をしています。
Canvas要素は、あとに定義したものが前面に来るようになっているようです。
そのため、この処理をやらないと場合によっては、はめ込まれたピースの背面にドラッグ中のピースが隠れてしまい操作不能になってしまうことがあります。
そんなことなったら一気に萎えちゃいますよね。

ピースドロップ時の挙動

scaleを元に戻します。durationも設定してるので、ポヨンと大きさが戻るような見た目になってます。
（これも公式デモのコードをそのまま持ってきた感じです）

加えて、ドロップされた座標と正解位置の座標を比較。
誤差の範囲内であれば、draggableを無効 + ピースの座標を正解位置の座標に更新することで、ピースがはめこまれるような挙動を実現しています。
この処理はこちらの公式デモを参考にしました。
- Konva.js - Animals on the Beach Game

ゲームの流れ

これまでの内容を踏まえて、ゲームの流れとしてはおおまかにこんな感じです。
（並列で処理しているところもあります）

難易度選択
↓
難易度に応じたピース数（縦、横）、ピースサイズの値をセット
↓
この3つの値の変更を検知して、初期化ロジック実行
ピースの情報を持ったオブジェクトの配列を生成後、その順番をシャッフル
↓
ピースの情報を持ったオブジェクトの配列をもとにピースのコンポーネントが描画される
↓
ゲーム開始（ストップウォッチ開始）
↓
ピースのドラッグアンドドロップ
ドロップ座標が正解位置の座標の誤差範囲であればはめこまれ、正解ピース数が+1される
（これを全てのピースがはめ込まれるまで繰り返す）
↓
正解ピース数の値の変更を検知して、総ピース数と一致すればクリア（ストップウォッチ停止）

今回参加してみてどうだったか

楽しかったです！ただ、疲れました（笑）
お題があったとはいえ、ほぼ一から自分で考えて作る必要があったので、普段よりもいっぱい頭使ったからかなと思います。

とはいえ、個人開発として無事にリリースまでできたのはこれが初めてなので素直に嬉しいですね。
他の方の投稿を見るのも楽しいですし、学ばせていただく機会にもなりました。
こういった機会を設けてくださり、ありがとうございました！

ちょっとしたレポート記事を書くつもりがすっかり長くなってしまいました...。
ここまで読んでくださった方、ありがとうございます！

パズルの方は今後も合間を見つけて改修していこうかなと思ってます。
ちなみに最初に導入したGoogle Analyticsがちゃんと動いておらず、投稿時のアクセス数を見られなかったというヘマをやらかしていましたが、修正して現在は無事に動いてます（冷や汗）

もしお暇な時があれば、パズル部屋を覗いてみてください。