【自作Webツール紹介】ことばルーレットちゃん

はじめに

本ページでは、私が作成したWebツール「ことばルーレットちゃん」について紹介します。

「ことばルーレットちゃん」は入力した「ことば」の中からランダムに1つを選んで表示するシンプルなルーレットです。
ゲームのお題決めなどで活用できると思います。

抽選したい任意の「ことば」を入力します。

入力した「ことば」は追加ボタン、もしくはEnterで下に一覧として表示されます。
ルーレットボタン押下で抽選が始まります。

抽選時間を指定できるようになってるので、アニメーションが長いと感じたら演出を短くできます。

まとめて入力モードを使えば、改行区切りで一気に「ことば」を追加することもできます。

開発時に工夫したことはいくつかあります。

本ツールはHTML、CSS、JavaScriptの三つで構成したシンプルな実装でできています。
動作や読み込みが速いというメリットがありますからね。（建前）
そのほうが簡単に実装できるし、保守が楽だからね！！（本音）

.
└── wordroulette-chan
　   ├── index.html¹
　   ├── script.js
　   └── style.css

ユーザー体験（UX）を向上させるための工夫も行いました。
具体的には以下を工夫しています。

抽選結果がただ出るだけではなく、アニメーションで「ワクワク感」を演出しているつもりです。

アニメーションは初めて触ったので自信がないですが、、、

人によってはアニメーションが煩わしいと感じるかと思い、抽選時の演出時間を調整できるようにしました。
1秒 / 3秒 / 5秒 / 10秒とユーザーが自由にコントロールできるようにしています。

また、演出をなしにすることもできます。

抽選中は一時的にボタンを非活性化し、文字を変えることで誤操作を防ぐ工夫をしています。

制御はJavaScriptで行っています。

// ルーレットボタン
const spinBtn = document.getElementById("spinBtn");

// ボタンを非活性、ボタン文言を「抽選中…」に変更
spinBtn.disabled    = true;
spinBtn.textContent = "抽選中…";

デザイン面での工夫も少しだけ。
具体的には以下を工夫しています。

昨今はWebツールを使用するデバイスが多様化しています。
スマホ、PC、タブレットetc.

なので、デバイスの画面サイズに合わせてレイアウトを自動で最適化してあげる必要があるんですね。
それをレスポンシブ対応といいます。

当然、「ことばルーレットちゃん」でもレスポンシブ対応しています。
まあ、レイアウトが崩れないようフォントサイズを変更しているだけなのですが、、、

全体的にグレーやクリーム色ベースの柔らかい雰囲気で作成したので、かわいらしい仕上がりになっているのではないでしょうか。（デザインの勉強はしていないので、筆者個人の感想です）

「ことばルーレットちゃん」というツール名もかわいいよね！！

本ページでは、自作Webツール「ことばルーレットちゃん」について、ツールの使い方、開発の工夫ポイントの紹介をさせていただきました。

気軽にご利用いただけると嬉しいです。
→ ことばルーレットちゃん