仕事で培った知識を日常でも活かしてみたい、という思いからサイトを作ってみました。
Grape Board（グレープボード）って名前で作ってみました！
grape-board.sakura.ne.jp

今回はこのサイトを作るのに必要となったものをざっくりご紹介したいと思います。

このサイト作成の経緯

このサイトを作ろうと思い至った経緯ですが、最近私の周りでボードゲームをする人が増えてきて私の友人間でもボードゲームをよくやります。
ボードゲームをやるにあたって必ず一番最初にやることがそのゲームのルール説明ですね

何度もやってると説明って結構疲れる
それに「なんか面白いゲームある？」とかいうざっくりした質問に対して、
「ボードゲームよくやる？推理系が好き？みんなで協力したい？スピーディなやつが好きなの？」と質問攻めをしたうえで
じゃあここらへんかな、って複数個の概要説明して、選ばれた１つのゲームに対し詳細な説明をしていく…

うーん。かなりめんどくさい、せめて○○ってゲームやりたいってとこまでスキップできんものか。。。
といった問題の解決のために作成し始めました。

サイトに使った技術

技術というほど大したものではないのですが、構成は
- HTML
- JavaScript
- jQuery(npm), gulp(npm), browserify(npm)
- json
こんなかんじで構成されています。

今回はサーバサイドのコードが置けない(そういうサーバを借りたため)ので、
ゲームのリストをDBから持ってくることができません。
このため、Excelにボードゲームのリストを作成し、jsonにすることでDBの代わりとして機能しています。
なので、ボードゲームの説明は全てjsonに格納されており、その値を参照しています。

npmではjQueryとgulp, browserifyをインストールしてバージョン管理してもらっています。
gulp, browserifyは
browserifyとgulpでフロントエンド開発 - arc tech blog
ここで紹介したものを導入しました。

サイトのプロトタイプ完成後

ボードゲームの説明ということもあり、結構な量の画像がを添付しなければいけません。
そうなると、どうしても遅くなる、
しかも「好きそうなゲームはこのサイトをスマホで見て決めて」
みたいな出先での閲覧が想定されました。
GoogleのPageSpeed Insightsは画像が重くてもちろん点数はボロボロ、
画像の圧縮でなんとかPageSpeed Insightsでも高得点が出せるようになってきましたが、結構画像が荒くなってしまっています。

これから

とりあえずひとまずサイトが落ち着いたのでversion1.0としては完成でいいかなと思っています。
でも、ボードゲームのなんとなくの雰囲気がわかってもまだうまく伝わらない説明しか乗せられていないというのが現状。
これから、ひとつひとつ専用ページでもう少し詳しい説明書きを書いていって、なんとなくのルールまで把握してもらえるようにできたらいいなと考えています。

あとはレイアウトも結構ひどいし、検索画面だけでなくホーム画面もこれから追加していきたいなぁと思っています。

まとめ

仕事で身についたもので生活が豊かにできるのはとても良い環境だなと思います。
もうちょっと仕事も頑張ってみて、その結果をこのサイトに反映させていけたらなーと思っております。
HTMLなんてほとんど触ったことがなかった社会人2年目にしてはよくできたなぁと自画自賛してたりしますｗ

最後に、サイトを見てくれたり広告押してくれたらモチベがぐんぐん上がるのでよかったらお願いしますー。
grape-board.sakura.ne.jp