はじめに
友人８人でのクリスマスパーティーで、事前に相手を指定したプレゼント交換をすることになりました。
各自「自分がプレゼントを渡す相手のみを知っている」状態にしたかったのですが、
条件に合うシンプルなシャッフルツールが見つからなかったため、簡単なWebアプリを自作しました。
今回は
- フロント技術のみ
- 最低限の機能
- 装飾ほぼなし
という方針で作成しています。
アプリの概要
本アプリは幹事が使用することを想定しています。
chromeなどのブラウザでHTMLファイルを開くと、参加者の名前を入力するテキストボックスが表示されます。
名前を入力して「シャッフル」ボタンを押すと、参加者ごとにurlが発行されます。
幹事がそのurlを参加者にlineやメールで送付し、
参加者がurlを開くと自分がプレゼントを渡す相手が表示されます。
成果物url
-アプリ動作確認用
https://desuharudesu.github.io/presentExchangeApp/index.html
-コード確認用(GitHub)
https://github.com/desuharudesu/presentExchangeApp
使用技術
フロント技術
- HTML
- Javascript
- CSS
※サーバサイド・DBは使用していません。
画面の表示切り替え
①HTMLファイルを開くと表示される画面(初期表示)
②参加者の名前を一行ずつ記入し「シャッフル」ボタンを押す
※テキストエリアはドラッグでサイズ変更可能
③参加者全員分のurlが発行される
④各参加者がURLを開くと、プレゼントを渡す相手が表示される
ポイント
-
HTMLは1画面構成
CSSで表示・非表示を切り替えることで、画面遷移しているように見せています。 - プレゼント相手のシャッフル処理およびURL生成は JavaScriptのみで実装
- シャッフル結果はURLパラメータに埋め込み、サーバーを使わずに状態を保持
アプリの仕組み
コードの詳細は、成果物URLに記載のGitHubリポジトリをご確認ください。
以下は全体の流れを示した疑似コードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- head要素 -->
</head>
<body>
<!-- タイトル・説明 -->
<!-- 参加者入力用テキストエリア -->
<!-- シャッフルボタン -->
<!-- 結果表示エリア（初期は非表示） -->
<script>
// DOM要素の取得
// 現在のURLを取得
/*
* シャッフルボタンがクリックされた際の処理
* ① 入力された参加者名を配列に格納
* ② 入力チェック（人数不足・重複など）
* ③ 受け取る側の配列をシャッフル
* ④ 自分自身に当たらないよう調整（※1）
* ⑤ 渡す人・受け取る人のペアを作成
* ⑥ JSONに変換し、Base64エンコード
* ⑦ URLパラメータとして参加者全員分のURLを生成
* ⑧ 結果表示エリアを表示
*/
// 参加者ごとの結果を表示
</script>
</body>
</html>
プレゼントを渡す相手が自分以外になるようにする方法(※1)
参加者名の配列と、シャッフル後の「受け取る側」配列を
同じインデックス同士で比較し、一致した場合に要素を入れ替えています。
- 途中の要素が一致した場合：次の要素と入れ替え
- 最後の要素が一致した場合：先頭の要素と入れ替え
function 調整関数(参加者配列, 受取側配列) {
for (let i = 0; i < 要素数 - 1; i++) {
if (参加者配列[i] === 受取側配列[i]) {
const temp = 受取側配列[i];
受取側配列[i] = 受取側配列[i + 1];
受取側配列[i + 1] = temp;
}
}
if (参加者配列[要素数 - 1] === 受取側配列[要素数 - 1]) {
const temp = 受取側配列[要素数 - 1];
受取側配列[要素数 - 1] = 受取側配列[0];
受取側配列[0] = temp;
}
}
最後に
今回は作成期間が限られていたためフロント技術のみで実装しました。
参加者の人数が増えると幹事がurlを送付する手間が増えてしまうため、
今後はデータベースを導入し、各参加者が自分で確認できる仕組みに改善したいと考えています。