角田 雄一
通信ネットワーク演習
演習
最終成果物
とっとと決め太郎
サイトリンク: https://katsudon-tabetai.github.io/kimetaro/ ←こちらをクリック！
ソースコード: https://github.com/katsudon-tabetai/kimetaro
サイトの趣旨
このサイトは、入力された複数の選択肢の中からランダムに1つを選び出すツールである。抽選や意思決定、日常のちょっとした選択をサポートする用途で使え、公平で便利な選択を簡単に行うことができる。誰でも直感的に利用できるように、シンプルでスッキリとしたレイアウトにした。
このサイトと同様のランダム選択のサイトはかなり多く存在するが、その殆どにWeb広告が表示され、ユーザー体験が損なわれていることがある。このサイトはGithubのサーバーを使っているため、広告なしで利用することができる。
- 仕様・機能は以下の通りである
- 選択肢の追加・削除
- 抽選倍率の調整機能
- SweetAlert2ライブラリを用いた、抽選結果のポップアップ表示
- スマホ画面での利用にも対応
技法・技術情報
- getElementById
テキストボックスやボタン、<ul>要素への参照。
- Array
選択肢の項目を、{ name: "項目名", weight: 数字 }というオブジェクトを要素としたarrayで管理。（weightは確率の重み）
- 項目追加処理
「追加」ボタンを押すと、アロー関数が実行され、入力欄の文字列を取得し、arrayに追加。
- リスト表示の更新
arrayの情報をもとにリストを書き換えるupdateItemList()関数を作成。倍率調整ボタンを押すと、arrayの対応する要素のweightが増減し、それにあわせて表示される重みを表す数字も更新される。削除ボタンを押すと、その項目をarrayから削除し、再度updateItemList()関数を呼んで表示を更新する。
- ランダム選択処理
選択肢の確率を調整するため、arrayのweightプロパティに基づいて、項目名を複数回含む重み付き配列を作成し、この配列からランダムに1つの項目が選ばれる仕組みになっている。
- 結果表示
結果はポップアップとして画面に表示される。ポップアップの表示にはSweetAlert2ライブラリを使用しており、Nyan CatのGif画像も用いて華やかな画面になるようにしている。
- DOM操作
createElementやappendChildを使用して、HTML要素（リストアイテムやボタンなど）を生成し、リストの内容を更新している。
- 条件分岐
例えば、「抽選」ボタンを押した際に選択肢がない場合は、alertを表示して処理を中断するなど、適切な条件分岐によってエラーを防いでいる。
先行事例・参考情報
リンク
公開リポジトリ
