Hackbase.ai

アイデア発想

何が面白いか

ハッカソンの成否を分けるのは、最初の1時間の混沌とした計画時間です。このツールは、その最も面倒な部分をAIで自動化する点に新規性があります。テーマを入力するだけで、アイデアの種、役割分担、タスクリストを盛り込んだ「作戦ボード」を一瞬で生成。単なるプロジェクト管理ツールと違い、創造的な「初動」を直接支援します。Geminiを用いたワークフロー生成技術により、漠然としたお題から具体的なアクションプランへと変換する体験を提供し、チームを即座に開発へと導きます。

今後改良したいところ

今後は、今は単一テーマの静的なデモですが、将来的には自由なテーマ入力に対応し、生成されたボードをチームでリアルタイムに共同編集・保存できる機能を追加したいです。そうなれば、単なるキックスターターから本格的なハッカソン協業ツールへと進化できると考えています。

使い方

この作品の使い方と、画面で確認するポイントをまとめて表示します。

ハッカソンの準備で何から手をつければ良いか迷った時に、具体的な作戦ボードを生成します。

「サンプル実行トレースを再生」ボタンを押してください

空だった作戦ボードのエリアに、AIが生成したアイデアや役割などのカードがレーンごとに整理されて表示されます。

作戦ボードに表示された「アイデア出し」や「役割分担」などのレーンと、その中のカードを確認してください

漠然としたテーマが、具体的なアクションプランとして可視化されていることがわかります。

制作メモ

この作品でAIが重視した制作方針を、公開向けに整理して表示します。

これは、一般的なプロジェクト管理ツールがタスク実行フェーズを支援するのに対し、テーマから「アイデアの種」まで引き出す初動のシミュレーションに近い役割ですね。ふわっとした企画段階から具体的な形が見えるのは、チームの方向性を合わせるのに役立ちそうです。

ソース

この作品で保存されているコードと確認用ファイルをまとめて表示します。

主要ファイル

README.md作品の説明と使い道

source/app/page.tsx画面の実装入口

validation/self-review.json検証・レビュー結果

source/core/gemini.ts画面の実装入口

コードプレビュー

source/app/page.tsx

/* eslint-disable @next/next/no-img-element */
'use client';

import { useState } from 'react';
import { sampleTrace } from '../data/sample-trace';

// NOTE: Core logic (source/core) is NOT imported to keep the demo self-contained and offline.
// Types are re-declared here for the UI.
type MissionCard = {
  id: string;
  type: 'idea' | 'tech' | 'role' | 'checklist';
  lane: 'アイデア出し' | '技術選定' | '役割分担' | '提出物';
  title: string;
  description: string;
};

type MissionBoard = {
  inputTheme: string;
  cards: MissionCard[];
};

const pipelineSteps = [
  { id: 'analyzeTheme', name: 'テーマ分析' },
  { id: 'generateMissionBoard', name: '作戦ボード生成' },
];

const cardColors = {
  idea: 'bg-blue-100 border-blue-300',
  tech: 'bg-green-100 border-green-300',
  role: 'bg-yellow-100 border-yellow-300',
  checklist: 'bg-purple-100 border-purple-300',
};

export default function HackathonOpsRoomPage() {
  const [board, setBoard] = useState<MissionBoard | null>(null);
  const [isRunning, setIsRunning] = useState(false);
  const [currentStep, setCurrentStep] = useState<string | null>(null);

  const handleReplayTrace = () => {
    if (isRunning) return;
    setIsRunning(true);
    setBoard(null);
    setCurrentStep(pipelineSteps[0].id);

    setTimeout(() => {
      setCurrentStep(pipelineSteps[1].id);
      setTimeout(() => {
        setBoard(sampleTrace.step_generateMissionBoard.output);
        setIsRunning(false);
        setCurrentStep(null);
      }, 800);
    }, 800);
  };

  const lanes: MissionCard['lane'][] = ['アイデア出し', '技術選定', '役割分担', '提出物'];

  return (
    <div style={{ fontFamily: 'sa
...

全文を別ページで見る →

ハッカソン作戦室

使い方