チーム分けWebツール~グループ分けや組み分けをランダム生成!

業務効率化
 0名入力中

使い方と機能

  • 名前は1行に1名ずつ入力してください(エクセルのセルを張り付けると早いです)
  • 入力した名前の人数をリアルタイムで表示します
  • 出力したテーブルはエクセル用にCSVダウンロード可能です ※ダウンロードしたCSVファイルをそのままエクセルで開けます
  • 出力したテーブルのデータをCSV形式でクリップボードにコピー可能です
  • 出力したテーブルをPNG画像としてダウンロード可能です
  • チーム数を入力してください
  • 入力したら「チーム分け」ボタンを押してください(効率化重視のため画面遷移はしません)
  • グループ分けされる人数は各組均等です。余りが出た場合は1名ずつ配置されるので、最大誤差は1名になります
  • チーム分けの結果に不満がある時はもう一度ボタンを押すと再生成します
  • 出力された表の見出しをクリックするとその列がハイライトされます
  • 入力欄にフォーカスしても画面が拡大されないようにしています
  • テーブル(表)が書き出されるので、選択してエクセルにコピペ出来ます
  • XSS対策あり
  • このツールは自信を持ってお送りしています

組を2つ、3つ、またはそれ以上に分けるのって意外と大変ですよね。一番いいのはエクセルにまとめた名前をマクロでポチる、のが主流かなと思います。ただそれだとExcelが開けない環境だと煩わしいですね。そこて、Webという便利なら技術を経由して使える組み分けツールをつくりました。

もちろんサーバーにはデータは送信しませんのでご安心ください。

小さいお子さんの遊びにも使えますし。簡単なゲームの時にチーム戦でとても重宝します。会社のディスカッションイベントとかにもオススメですです。

難しい入力無くして、効率よく使いやすいツールを極めたいという一心で作ってありますので、効率の悪いエフェクト等は一切省いています。

是非効率愛好家に使ってとさ欲しいなあと思います。改善点やバグなどあればおきがるにご連絡ください。使い勝手良かった的な応援メッセージを嬉しく思います。メールが苦手でもTwitter(X)でシェアしてコメントしてくれると大助かりです。エゴサしてますんで陰ながらフフって喜びます。

今後ですが、チーム分けした履歴など取得するようにしたいかなぁ考えています。ご希望でしたらお手数ですがメールでお願いいたします。(常に見ているのがメールなため。お問い合わせはこちらのページからお願いします。)

JavaScriptのソースコードの一部を以下に示しておきます。エスケープ処理やエクセルダウンロード等は含まれておりません。

function splitTeams() {
    const namesText = document.getElementById("names").value.trim();
    const teamCount = parseInt(document.getElementById("teamCount").value, 10);
    if (!namesText) {
        return;
    }
    const names = namesText.split('\n').map(name => name.trim()).filter(name => name !== '');
    updateNameCount();
    const teams = [];
    for (let i = 0; i < teamCount; i++) {
        teams[i] = [];
    }
    while (names.length > 0) {
        for (let i = 0; i < teamCount; i++) {
            if (names.length === 0) break;
            const randomIndex = Math.floor(Math.random() * names.length);
            teams[i].push(names[randomIndex]);
            names.splice(randomIndex, 1);
        }
    }
    displayResult(teams);
}

function updateNameCount() {
    const namesText = document.getElementById("names").value.trim();
    const names = namesText.split('\n').map(name => name.trim()).filter(name => name !== '');
    document.getElementById("nameCount").innerHTML = `<span style="color: red;">${names.length}名</span>入力中`;
}

function displayResult(teams) {
    const tableContainer = document.getElementById("tableContainer");
    tableContainer.innerHTML = '';
    const table = document.createElement("table");
    const thead = document.createElement("thead");
    const trHead = document.createElement("tr");
    for (let i = 0; i < teams.length; i++) {
        const th = document.createElement("th");
        th.innerText = `チーム ${i + 1}`;
        th.addEventListener('click', highlightColumn);
        trHead.appendChild(th);
    }
    thead.appendChild(trHead);
    table.appendChild(thead);
    const maxTeamSize = Math.max(...teams.map(team => team.length));
    for (let i = 0; i < maxTeamSize; i++) {
        const tr = document.createElement("tr");
        for (let j = 0; j < teams.length; j++) {
            const td = document.createElement("td");
            td.innerText = teams[j][i] || "";
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }

    tableContainer.appendChild(table);

}
function highlightColumn(event) {
    const th = event.target;
    const index = Array.from(th.parentNode.children).indexOf(th);
    const table = th.closest('table');
    const rows = table.querySelectorAll('tr');
    table.querySelectorAll('.highlighted').forEach(cell => cell.classList.remove('highlighted'));
    rows.forEach(row => {
        const cell = row.children[index];
        if (cell) cell.classList.add('highlighted');
    });
}

このまま使えなくもないですが、ご自分にあったやり方に修正することをオススメします。

【更新履歴】
・2023/11/13 出力テーブルのPNGダウンロード対応
・2023/11/01 CSVデータのクリップボードコピー対応
・2023/11/01 エクセル用のCSVダウンロード機能追加
・2023/10/31 チーム分けツール公開

タイトルとURLをコピーしました