作ったもの
みんなで飾り付けよう！クリスマスツリー
ios,android,その他のアクセス数に、それぞれ10人毎にクリスマスツリーの飾りが増えていきます
ひとりひとりのアクセス数は背景の星に反映されます
はじめに
せっかくのアドベントカレンダーなのでクリスマスを楽しめるような内容にしたいと思いました。
技術的なレベルとしては特に高くないものですが、技術的に優れてる内容でなくても楽しんで開発することも大切なので今回のアドベントカレンダーの成果物としました。
今回は、アイディア出しからリリースまでどのようなことを考えて、どんな物や人に頼りながら開発しているかのお話をします。
アイディア出しのプロセス
作るもの
今まで見てきたサイトで面白かったもの、印象に残っているサイトを参考にしました。
-
みんながアクセスすると劣化する記事
アクセス数に応じて劣化していきます -
一生に一度しか開けないサイト(FlashPlayer)
調べたところIPアドレスやローカルストレージにデータを保存して二度と接続できないようにしていたようです
上記から、アクセス数に応じて、クリスマスツリーに飾りつけを行うサイトを作ろうと思いました。
このアイディアもすぐ思いついたわけではなく、1~2日考えました。
ほかにもアプリゲームのクリスマスイベントなどを参考にしました。特に、クリスマスが近づくと飾り付けが豪華になるなどのイベントが参考になりました。
仕組み
更新を行ったり何度も訪れた人をカウントしたくないと思ったので、同じ人をカウントしないようにする仕組みを導入しようと思いました
技術選定のポイント
どんなものを作るか決まった時点でこんな構成にしようというのは頭に浮かんでいます(これは年の功)
上記から、以下を何で作ろうか決めます。
- 画面
- バックエンド
- DB
- 上記を置くサーバー
また、今回の技術選定のポイントとして時間がなかったので
- 新しく学習しなくてもよい、または学習コストが低い
- 設定に時間がとられない
- webに落ちてる情報コピペで実装できる
を条件にしました
画面
画面はJavaScriptとVueが選択肢にありましたが、使い慣れてるVueを使うことにしました
バックエンド
Java(SpringBoot)を使うつもりでしたが、大規模なアプリケーションを作るつもりはなかったので、Pythonにしました
Pythonはそこまで得意ではないですが、簡易的なAPIサーバーを立てたりは業務内で行っているので学習コストはそこまで高くないと判断しました
DB
最初はRDBを使うつもりでしたが、今回はカウントアップとその結果を取得するだけなのでRedisを選択しました。
これは自分の選択に自信がなかったので、ChatGPTに相談した上で決定しました。
アプリを配置するサーバー
自身のサーバーに置くか、会社で自由に使えるAzureサーバに置くかの選択肢がありましたが、Azureのサーバにしました。
これは学習コストも高いですし、うまくいくかわかりませんでしたが、そろそろ使い方覚えないとな…ということで選択しました。
また、使えるメンバーがいるので最悪おんぶにだっこで介護してもらうつもりで選びました。
実装の流れ
情報収集
画面はあまり作り慣れてないので、既存のコードを参考に改編して使ってます
- クリスマスツリーに飾りつけを行うつもりでしたが、想定される訪問者数がわからなかったのであまり大きくない飾りで考えました
また、クリスマスのキラキラ的な意味で調べても出てこないと思ったので星空(starry)で検索して出てきたいい感じのものを使いました
See the Pen Sass Starry Night by Sean Dempsey (@seanseansean) on CodePen.
- クリスマスツリーは候補がたくさんありましたが、難しすぎるものはコード読んでも自分の好みに改修できるとは思えなかったので、理解できる範囲のシンプルなものを選びました
See the Pen tiny christmas tree by Gurprit Sahota (@gurprit) on CodePen.
- 同じ人がカウントされないようにするため、cookieを使いました
Vue.jsで高校の文化祭投票システムを作った話:不正投票対策
こちらの記事で行ってるIPアドレスの制限も併せて行いたかったですが、今回は時間がなく断念しました。いつかリベンジしたいです。
実装
全体的に特別な実装などはしていないので割愛
リリースまでの流れ
Azureにリリースを行いましたが間に合わなさそうだったのでわかる方にお願いしました。
自分でもう一回リリースして覚えます…
最後に
すごい技術を使ったすごいアプリケーションなどを作らなくても、アイディア次第で面白いサイトは作れます
(上で紹介したサイトのほかにも、マウスポインターを置いた位置に指さした写真を表示してくれるpointer pointerなど)
アドベントカレンダーなどの季節感のあるものはアイディア出しやすいと思うので、皆さんなにかしら作ってみてください。
また、できないことわからないことは、できる人わかる人に聞けばいいですし、最悪丸投げしても大丈夫です(感謝はしましょう)。
聞かれる立場の人は邪険にしないで優しく答えてあげてください。