🛰️ MokuHub（モクハブ）

概要：

エンジニアたちが“もくもく作業”を共有し、応援し合える 「 Discord アクティビティ ✖︎ Web/モバイル App 」 によるコラボレーションサービス🌱

😯 何ができるの？：

Discord上で行われる過疎化しがちな、もくもく会をもっと盛り上げます。

🌱 Discord でもくもく会！

• Discord アクティビティで、仲間との「もくもく会」へ参加可能！
• メンバーの頑張り（Contribution）がタイムラインで可視化！
• 「 一緒に作業している 」感が増してやる気アップ！
• 休憩リマインダー（カスタマイズ可能）も搭載。

🌍 モバイル・webアプリで記録を確認

• GitHub草の状態をスマホでいつでも確認。

もくもく会が行われる場所で、MokuHubアクティビティを起動し、Githubにアクションをすると、作業内容が全員に保存されます！

サポートするアクションの種類はこちら：

• push
• issues
• issue_comment
• pull_request
• pull_request_review
• pull_request_review_comment

🤔 どう作ったの？仕組みは？：

🛠️ 使用した技術

認証の仕組み（世界初ポイント

Discordのembededappsでは、CSPの規制によりproxyを通さない通信は全て、拒否されます。Supabaseではログイン時、ログインページに遷移するのが通常ですが、制限により使えません。

そのため、私たちは、Disocrd側から送られてくるUserIdとSupabaseのdiscord連携で取れるDiscordのUserIdを検証することで、アカウントの所有を確認し、SupabaseのJWT Sercretを元にJWT発行＝＞認証するという方針を取りました。

Client SDKには、DiscordProxyを通したSupaBaseへのリンクと、帰ってきたJWTを渡すことで、ユーザー認証をスキップし、安全なSupaBaseアクセスを実現しています。

Github連携の仕組み

RealTime DBの仕組み

💙 技術的こだわり

• アプリ用APIサーバーを作らず、UI / UX 向上に注力
  • 特に、ユーザーが認証を行いやすい環境づくりにこだわった
• 継続的に利用するため、維持費が　¥ 0 になるような技術選定にこだわった（Vercel, Supabaseなど）
• 自動デプロイ完備！mainとDevelopを分けるなどGitの基礎を徹底し安定稼働を目指しました。

🤖 AI 活用

• PR周り
  • pr_body.txtを使ってCursorからPRを作成
  • Copilotにレビューさせることで、AI VS AIのPR対決を実現
• デザイン
  • モック画像を読み込ませて大まかな画面実装
  • design.txtに配色をメモして、別画面を作る際は適宜読み込ませた
• 細かな設定
  • サービス概要をメモした mokuhub.txを用意し、Cursor側からの提案もしてもらうようにした
  • GPTにメインビジュアルやキャラクターの三面図を作らせた & 世界観についてのイメージを固めたことで、ユニークなアプリにできた & 開発のモチベが上がった
  • 無料なので毎日5枚ずつ、満足のいくメインビジュアルができるまでコツコツ生成させた

💭 その他、技術に関係ない細かな設定

オリジナルキャラクター、モクピィ（Mokupy）がユーザーをナビゲート＆応援。

☁️ モクピィ（Mokupy）

草（GitHubのContributions）がエネルギー源の小さなスピリット。 惑星 『グラスター（Glasstar）』の住人で、世界中のエンジニアたちの努力や成長の記録（草）を見守り、応援する存在。

🌏 グラスター（Glasstar）

宇宙にポツンと浮かぶ、小さな「貢献エネルギー」の惑星。 世界中のエンジニアの貢献（Contribution）によって緑が生い茂る。

• GitHubの草が伸びるたびに、モクピィが反応 & 応援
• 宇宙空間で集中と楽しさを融合した体験ができる。
• 作業の結果はGlasstarに還元され、星の活力になる。