Masquerade Panel

0. チーム紹介

• チーム名 : OverHack 由来 : ご飯好き x ゲーム好き +hack → overcook
• 目的 : 全員が新しい分野に飛び込み、手を動かしながら学んでいく！
• ビジョン: うっちーの地元力、しましまの技術実現力、くどーの安定感をまっさんがまとめ上げる！

1. アイデアの発端（背景）

• 着想を得たきっかけ:
  • 地元民うっちーのひとこと「若いやつがこねえ。」
  • 世の中のまちおこしに倣って、SNSでうまくバズらせられねえかね？？
  • まっさん「SNS投稿する感覚で、案内板出来たら楽しくね？？」
  • SNS投稿での課題ってなんだろう→しましま「SNS投稿、顔隠すのとかめんどくね？」
  • くどー「ゲームのガチャっぽく、顔隠す画像もレア演出があれば面白くね？？」
• ものづくりの方向性 / 解決したい課題:
  • 豊能の知られざる写真スポットを、外からの観光客に見つけてもらう！！！

2. 「2度見度」へのこだわり

顔を守るAI機能でプライバシーも安心！

• これまでのSNSは、写真をそのまま投稿していました。ステッカー(スタンプや画像)を上から貼って、顔を隠すことをした人もいると思います。
• マスカレードパネルはAIが顔を自動で守ってくれます！つまり、投稿前にステッカーを自分で貼る必要がなくなるのです！

  投稿されるまで、どんなステッカーが貼られるかわからない！

• 実際に投稿された際のステッカーがランダム！レアなステッカーが見られるかも！
• (プレビュー画面では仮のステッカーが貼られています。顔が検出されているか不安だもんね。)

3. 豊能度／地域貢献へのこだわり

ステッカーの画像が豊能っぽい！:

• レアステッカーには町指定文化財の古面を採用。
  • 詳しくはこちら
• その他、イノシシをはじめとした豊能にまつわるステッカーがいっぱい！

4. 技術力のごだわり

AIによる顔推定、ステッカーの追加

• YOLOを用いて画像から顔を検出！推定位置にステッカーを載せる点を自動化！

5. 完成度（UI／UX・ProtoPediaの出来栄え）

シンプルなUI

• 投稿がめんどくさくならないために、手間を最小限に！
• 写真載せる、名前書く、コメント書く！おしまい！

  温かみのあるデザイン

• 舞踏会をイメージした温かみのある配色に！
• 背景画面では、ポップな仮面の人たちがお出迎えしてくれます。

HTMLを組み込んだ強調

• protopediaはmdだけじゃない！HTMLも駆使してでかい文字を入れよう！

6. 今回の学びやチームでの感想

• 苦労した点・克服方法:

  • 各々が新しい領域に挑戦しました！

    • まっさん : 初めてのインフラ、遊撃部隊、マネジメント
    • しましま : 初めてのバックエンド、FastAPIやYOLOを使った顔検出まで！
    • くどー : 初めてのフロントエンド。トラウマだったVueを克服！
    • うっちー : 初めての技術開発。アイディアからどうやって実現していくかを肌で感じました！

  • アイディア。どうやって豊能らしさを出していくか。

• 今後の発展アイデア:

7. 最後に

• うっちー「豊能で暮らしましょう。」
  • 超シンプル。現地民の言葉の重みはちげえや。

8. Member

メンバー1: まっさん

• 役割: マネジメント駆け出しエンジニア
• 得意な技術/スキル: アイスブレイク、ファシリテートスキル。フロントからバックまでフルスタック！今回は初めて環境の整備から行いました！
• 興味・情熱: ものが出来上がっていく様を見るのは最高ですな。。。
• 連絡先: https://www.instagram.com/massan120917/

メンバー2: しましま

• 役割: バックエンド初めてエンジニア
• 得意な技術/スキル: とりあえず動くものを作る！！！
• 興味・情熱: 創る そして 壊す

メンバー3: くどー

• 役割: フロントエンド初めてエンジニア
• 得意な技術/スキル: AWS EC2でサーバ構築、CD構築（今回使用していないが）
• 興味・情熱: 自分のスキルアップになりそうな開発、お金が生まれそうな開発が好き
• 連絡先：🍆

メンバー4: うっちー

• 役割: デザイン、発表者
• 得意な技術/スキル: 豊能町民として豊能町の魅力を伝えること。
• 興味・情熱: 未知の世界へがむしゃらに突っ込む。挑戦して、また挑戦！

1. システム全体図

フロントエンド

• フロントエンドはVue.jsを採用。
  • デザインにはTailwindCSSを用いてモダンな設計に。

バックエンド

• バックエンドはFastAPIを採用。
  • Pythonと顔検出モデルの利用が相性抜群！
  • データベースもsqliteを用いた王道設計！

インフラ

• プラットフォームにはDockerを採用。
  • フロントとバックを分離させた設計を実現。
• 公開にはNgrokを採用。
  • プロトタイプレベルの公開にバッチリ！
• フロントのパッケージマネージャにはyarnを採用。
  • 初めての採用。いい経験になりました！

2. 使用技術・ツール・デバイス

• 開発環境：
  • Docker, VScode, Vim, Ngrok

    - Dockerで環境を揃え、エディタはそれぞれ。
        - チームマネジメントのまっさんは初めてVimに挑戦！

• ソフトウェア / フレームワーク：
  • Vue.js, FastAPI (Python), TailwindCSS , YOLO
• その他：
  • デザインツール：Canva
  • コミュニケーションツール：Discord
  • 開発アシスタントツール：ChatGPT

    - うっちーのチャレンジ精神により、Canvaによるデザイン作成を採用！なれない中頑張ってくれました！

3. 具体的な処理・機能フロー

3.1 ユーザが写真を投稿！

• 写真を掲示板に投稿しよう！
• あなたの名前と写真へのコメントをつけちゃおう！

3.2 投稿を確認！

• 写真から顔にステッカーが載せられるよ！
• 実際に載せられるステッカーとは違うのがポイント！

3.3 掲示板に反映！

投稿が行われるまでは何が顔を守るかわからない！！ レアな仮面を目指してたくさん投稿してみよう！

4. 仕様書も作ったよ！

仕様書を作りました！ みんなの理解度を揃えるために仕様書を作りました！

• 画面遷移図
• 画面設計図
• DB設計図
• API設計表