Stride Clash

https://github.com/aoi0120/58hack

TypeScript

React

Figma

JavaScript

Node.js

エンジニアは体が資本!歩けば歩くだけいいことがあるアプリです!!

Neon

ふわいと

あおぽん

Yuki Masuda

hal

推しアイデア

運動とゲームの融合で継続しやすい工夫!

作った背景

運動して痩せたいから

推し技術

Bluetoothですれ違いします

プロジェクト詳細

概要

歩くという行為に対して、どんなイメージを持っていますか?

時間と体力を浪費する、人生における無駄ですか?

それとも、ふとアイデアに目覚めたり、友人と話したりする、大切な時間ですか?

実は、健康をはじめとして様々な良いことがあるそうですよ?

今回は、そんな歩きに少しばかりのエッセンスとなるアプリを用意しました。


このゲームについて

このゲームは日常の「歩く」がそのまま強さになる、バトルゲームです。

Bluetoothを用いて、すれ違った人と歩数バトルをすることでレベルを上げていきます!


ゲームの仕様

1.歩数データ 当日の歩数を大きく表示、推定カロリー、カロリーに相当する食べものを表示します。毎日の運動の手助けとなるでしょう! 当日の歩数によって靴の周りのエフェクトを強化し、どんどん映えある見た目に。 image

2.レベルアップ 歩けば歩くほどレベルが上がっていきます!日々のモチベーションに!後述するバトル機能でもレベルアップが狙えます。 image

3.バトル Bluetoothを用いてすれ違ったプレイヤーと歩数勝負‼︎前日の歩数を元に決着をつけます。レベルアップのチャンス! image

4.ランキング 日々の歩数、バトルでの勝率で全国のプレイヤーと競います! image


使用技術

フロントエンド

バックエンド


必死で向き合った所


Bluetooth通信の制御

開発に用いていたExpoでは直接Bluetoothが使用不可。 環境設定など安定した通信の提供の苦労。 「すれ違いバトル」という核となる機能がOS依存になってしまう。


データ取得の複雑さ

歩数を取得するためには各OSのヘルスシステムとの連携が不可欠→連携に少しの手間

アプリの中心機能であり、バグると全てが終わる!


APIによる値の取得

歩数や戦闘履歴などをサーバーに保存し、適宜APIを用いて取得する。

データベース動いてるのに値が返ってこない! →どこでエラーが起きているか、発見しずらい...


テストの難しさ

ユーザーIDと様々なデータを紐づけて動かすアプリのため、歩数記録や対戦履歴のデータが少ない状況で開発を進めると、挙動が分かりずらい!

特にBluetooth通信、歩数同期はリアルタイムで見ないと分からないため検証も困難。


UI

数字を主に扱うため、下手すると簡単に飽きが来る! 何とか感情を揺さぶるために視覚に訴えかけます!

余裕があればサウンドとかも入れたかった...


AIともに


アイデア成形

#copilot 最初のAI活用はアイデア出しから。 原案は人間が考えるとして、他サービスとの差別化として用いた。すれ違い機能を考案したのもcopilotだった気がする。 AIのアイデアも侮れない。


基盤の形成

#Gemini figmaでだいたいの画面構成が出来たとはいえ、実装するにはデザインとしての詰めが必要です。今回はgeminiを使って、デザインの細かい装飾など具体的な構図を詰められたのはGeminiのおかげです。 また、その画面を元にHtml+TailwindCssのコードももらえるので、それをReactに変換して画面をスムーズに構築できた。効率が良い!


新しい技術

#copilot バックエンド開発において、DB設計からAPIの構築などなじみのない技術でもcopilotに手伝ってもらいながら進めることが出来た。 copilotに任せてしまうと、エラー時のステータスコードが淡泊になってしまい、デバッグが困難なため、自力で修正を加えました。


賢いコード監査役

#coderabbitai プルリクエスト時(いつでも可能)にコードを審査してくれます。審査では、かなり詳細なレビューをもらえます。動きはするが危険性のあるものやより綺麗な体裁の提案など、コードの質を向上することに役立ちました。


愛すべきポンコツ

#copilot 複雑な連携やそもそもリポジトリ状況をあまり把握してないAIは沼る事も多い。だいたい難しい所で詰まるとcopilotも分からない。その代わり分からないところはメンターにしっかり聞くという習慣がついた事を考えるとちょうど良かった。 賢すぎると、誰も理解できずに自己完結してしまうことも考えられる。


あとがき


概要部分で様々な良いことがあると記述致しましたが、このリンク先にあるpdfの情報量があまりにも多い..... そんなあなたにNotebookLM! というわけで下記にNotebookLMに内容をまとめてもらったものを貼っておきます。興味のある方はどうぞ

「歩く」行為が生むもの(効果・効用) 健康・身体面 • 生活習慣病予防・改善効果 ◦ メタボリックシンドローム予防・改善 • 心肺・血管機能強化 • 持久力向上 • 骨太効果(骨密度向上) • 免疫力増強(NK細胞強化) • 快調快眠快通効果(自律神経バランス、生体リズム調整) • 貯筋・正姿勢効果(体力、正しい姿勢) • 平均寿命延長 • 医療費削減 精神・脳面 • 脳の活性化 • 優れたひらめき・直感 • リラックス効果(ストレス、うつの緩和) • 否定的な感情の低下(緊張、抑うつ、疲労、混乱など) • 肯定的な感情(活力)の上昇 社会・教育面 • 地域コミュニケーションの熟成 • 五感体験の拡大(自然、まちの風景) • 地域の再形成(自主防犯活動) ◦ 犯罪抑止力強化(例:パトロール活動) • まちづくり(歴史、文化、景観の活用)• 青少年期の持久力・粘り強い心身の涵養 環境面 • 省エネルギーと環境負荷の軽減 • CO2削減 • エコウォーク運動(自然保護、環境学習)

Neon

@Neon_straySheep