みなさん、はじめまして。LeadHACKといいます。
LeadHACKは創価大学を拠点として、大学内のプログラミング力向上を目的に活動してます。
今回はアンバサダー提携を結んでいるTechBowlさんのハッカソンに参加してWEBアプリを作ったので、その紹介をしたいと思います。
TechTrainオンラインハッカソン 〜10万円をかっさらえ〜
テーマ
朝弱いエンジニアのための「何か」を創れ。
概要
- 朝早く起きれる企画であり、何を作ってもOK
- 開発期間：3/19(木)-3/29(日) 10:00
- プレゼンテーション日時：3/29(日) 13:00
- 優勝賞金：10万円
- TechBowlさんの報告記事はこちら
参加メンバー
今回はM1の2名とB3の2名の計4名で参加しました。
今回開発したもの
背景
早く起きるために
朝起きるために何が大事か。それは早く寝ることである。
しかし、「早く寝れないんだよー」という方もいるかと思いますが、それは早く起きれば解消します。
「鶏が先か、卵が先か…」
つまり、課題に対するアプローチとしては**「習慣を作ること」が重要と考えました。
そこで、今回開発するアプリケーションの目的は「いつも早く起きるモチベーションを作る！」**ということになります。
工夫点
今回はあえてユーザにリスクを与えて心理的に追い込むようなことはしませんでした。
それは、リスクはストレスになる可能性が高いからです。
そうなると、
- アプリが使われなくなる原因となる
- ストレスに慣れると効果がなくなる
といったことに繋がるからです。
なので、あくまで
- 朝起きる楽しさを提供する！
- 朝起きたい欲を強化する！
といったことに重点を置きました。
機能紹介
今回、対象となるユーザはエンジニア。
エンジニアは収集欲が強いのでは？ということで、今回はガチャをベースにしました。
アプリ名は「集めろ、早起きの民」、略して「あつたみ」！
某ゲームを連想させますが、今回はガチャでカードを集めるアプリとなっています。
ユースケース
ユーザのサイクルを次のように想定しました。
結果をSNSへ投稿し自慢することで、エンジニアの欲望を満たすという仕様になっています。
- 寝る
- 起きる
- アプリでガチャを引く
- SNSへ結果を投稿
※以後サイクル
ガチャ
ガチャで得られるのは「有名人」のカード。
Twitterのフォロワー数が多いほど、朝早い時間に確率UP！
しかも、複数枚集めることで、カードと自分のレベルアップが上がっていきます。
システム構成
今回は、起きてすぐ使えるということでスマートフォンを利用することを想定し、Webアプリとして開発しました。
フロントエンドには Vue.jsとNuxt.jsを採用し、PWA化することでネイティブアプリのような見た目になりました！
PWA（Progressive Web Apps）はグーグルがモバイルユーザーのユーザー体験向上を目的とし、今までのWebアプリ（サービス）にWebとアプリの両方の利点を兼ね備えた仕組みのことです
Googleが取り組むWebのアプリ化プロジェクト「PWA」とは？- WPJ
認証やデータの格納などバックエンドの処理はGoogleのFirebaseを利用しました。
今回はGoogleアカウントでログインができるようになっています。
その他、Firebase関連の機能として
- Firestore(データベース): データの保管
- Hosting(デプロイサーバ): Webアプリを置く場所
を利用したため、今回はSPAかつサーバレスで動作しています。
構成イメージは以下のようになっています。
成果物デモ
- ログイン後に表示されるマイページ（ガチャ取得履歴）
- 複数枚集めるとレベルアップ（AtCoderの色で変化）
- ユーザメニュー
- ログイン・ログアウト
- 時刻設定
- 起床時刻の設定
- 起床時の画面
- 問題を解く
- ブルースクリーンで覚醒
- ガチャ結果
今後の展望
- 有名人をグループ分けしてユーザに合ったカードを排出
- SNSへの投稿機能（API申請の都合上、実装できず）
- 有名人の起床時刻をSNSから参照して動的に
- ランキング機能の搭載（最強の朝活エンジニア決定戦！）
- カードを編成してカードゲームのような対戦機能
スライド共有
当日はこういった資料で発表しました。
所感
気づき・学び
- Vue.js/Nuxt.jsに触れることができた
- グループ開発におけるGitHubの使い方を経験できた
- issueやプルリクのワークフロー
- Tech系イベントの雰囲気を知ることができた
- みなさんが注目している技術ワードも知ることができた
- Nuxt.jsとFirebaseを使ったアプリが多かった印象
- Googleハングアウトを使いオンラインで開発したが、比較的密な連携が取れた
- メンターを積極的に活用すべきだった
まとめ
今回は、オンラインハッカソンとして「朝に弱いエンジニアのために」Nuxt.jsとFirebaseを用いて、ガチャ機能を搭載したWebアプリを開発しました。
入賞こそできませんでしたが、オンラインにも関わらず刺激を多く受けることができました！
次回もメンバーを巻き込んで、積極的に参加し、自らのスキルアップに繋げていければと思います！