Skip to content

p2hacks2024/pre-03

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 

Repository files navigation

P2HACKS2024 アピールシート

別リポジトリで開発を進めています.
フロントエンド:TweetAvalanche/picol-swift
バックエンド :TweetAvalanche/picol-flask

プロダクト名

ぴこるー

image image

コンセプト

日々の負ラッシュをフラッシュに!

対象ユーザ

日々の負ラッシュに悩んでいる10-20代を中心とする人々.

負フラッシュとは…

  • 次々と湧き出る課題に疲れた
  • 心を休めたい
  • ちょっとかなしい話にあった
    (例えば、1限に間に合うバスを逃した人)

利用の流れ

  1. アプリを開いて写真を撮影する.
  2. 写真が解析され,色や輝度などに応じて写真からキャラクターが生成される.
  3. 友達のスマホと光(フラッシュ)で通信して,互いのキャラクターを交流させて楽しむ.
  4. キャラクターの生成や交流を繰り返し、キャラクターのコンプリートやアチーブメントの達成を目指す.

推しポイント

  • バックエンドに今回のお題であるFlashなFlaskが使われている.
  • スマホで撮った写真を解析してキャラクターを生成.
  • 友達のスマホと光(フラッシュ)で通信して,互いのキャラクターを交流させて楽しむことができる.

スクリーンショット

image image image image

開発体制

役割分担

  • デザイン
    • のん
    • もち
  • フロントエンド
    • こはぜ
    • もち
    • uiro
  • バックエンド
    • uiro
    • wisteria
    • のん
  • インフラ
    • uiro

開発における工夫した点

コミュニケーション面

  • Notion タイムラインで各分担のタスクや依存関係を厳密に管理した.
  • Discord で各部門や話題ごとにチャンネルやスレッドを作成し、まめに連絡を取り合うことで、スムーズな開発を目指した.
  • Figma で思いつくものを可視化することで相互理解や優先順位付けなどができるようにした.

プロジェクトマネジメント面

  • GitHub でなるべく意味の伝わるコミットメッセージやブランチ名をつけるよう意識した.
  • GitHub で作業ごとにブランチを切り、Pull Requestを作成してレビューをするようにした.
  • 仕事が終わった人には技術力に合わせて仕事を割り振った.

技術面

  • 光(フラッシュ)による通信で用いるプロトコルを独自で定義し、誤り訂正機能を実装することで、精度の高い通信を実現した.
  • 光(フラッシュ)通信の際に使われる文字列に、使用回数や使用期限を設け、不正な通信を防止する工夫を施した.
  • GitHub Actions による CI/CD 環境を作り、バックエンドに誰がPushをしても、インフラ担当が作業することなく本番環境に展開されるように設計した.
  • フロントエンドでは、ロジックやコンポーネントに応じて適切にディレクトリを分けることでスムーズな開発を行えるようにした.

デザイン面

  • 魅力的なアニメーションや差分を増やすために、作画コストが比較的少ないドット絵を採用した.
  • 既存の他のアプリから、ユーザー体験が良くなるような画面設計を心がけた.
  • 見やすさや使っている色の多さのバランスが良くなるように配色に気を付けた.
  • フレッシュ通信の実際の光と画面の光を合わせるようにした.

開発技術

利用したプログラミング言語

  • Swift
  • Python
  • SQL

利用したフレームワーク・ライブラリ

  • SwiftUI
  • Flask
  • MySQL
  • phpMyAdmin
  • Docker

その他開発に使用したツール・サービス

コミュニケーション・タスク管理

  • Figma
  • Notion
  • Discord

その他ツール・サービス

  • dotpict
  • GitHub
  • GitHub Actions
  • Cloudflare ZeroTrust (Tunnel)
  • Tailscale