- 「距離」・「時間」・「ペース」 のいずれか2項目を入力することで、残りの1つの値を自動的に計算するという、とてもシンプルなブラウザアプリです。
- 無料の静的サイトホスティングサービス 「Netlify」 を利用してブラウザに公開し、GitHubと連動させています。
🔗 ランニング・カリキュレーターを使ってみる
以前、コールセンターでとあるランニング計測アプリのテクニカルサポート業務を行なっていました。
そこでよくお客様から頂戴した問い合わせのひとつに、 「ランニング記録の保存に失敗した」 という内容があります。
中には10件以上の失敗をまとめて報告される方もおられ、オペレーターは可能な範囲で走行時間や距離、ペース、日時といったヒントを聴取し自力で計算の上、お客様アカウントに反映させるタスクをこなしていました。
当時、HTMLとCSS、JavaScriptを学びかけていた私は、この大変かつ間違えやすい計算をプログラミングの力で解決できるのではないかと思いつき、人生で初めて作成してみたのが ランニング・カリキュレーター です。
- シンプルな操作性：ヘルプデスクの電話対応には時間の節約が求められるため、迷わず最短ステップで欲しい値を取得できるように設計しました。
- 「Copy」ボタンの実装：別の業務ツールに値を貼り付ける手間を考慮し、ワンクリックで値をコピーできる機能を追加しました。
- コピー確認のアニメーション：「コピー済み」を目立つアニメーションで一瞬表示し、コピーに失敗して過去の値をペーストするミスを防ぎました。
- マラソン距離のボタン入力：お客様の中には、走行距離を数字ではなく、「マラソン」や「ハーフマラソン」と表現される方がいるため、ボタン入力に対応しました。
- インクリメント・デクリメント操作：数値はキーボード入力だけでなく、マウスを使って上下ボタンで変更できます。
- 自動フォーカス移動：キーボードで値を入力後、フォーカスが自動で次の入力フィールドに移動するようにしました。
- 分・秒の繰り上げ：たとえば「70秒」と入力された場合、自動的に60秒分を繰り上げて「1分10秒」に変換するように処理しています。
- 「Clear」ボタンの実装：連続計算時の値のリフレッシュや、冒頭フィールドへの自動カーソル移動を可能にしました。
- 色情報の渋滞回避：ただでさえ数値情報が多く、電話中に混乱しそうになるため、ツールの色は最小限に留めました。強調すべき文字列のみに色をつけています。
非常にシンプルながら、業務内容に合った機能性を備えていたため、職場でも十分に活用できました。
同僚やお客様のQOLが少しでも上がっていたら嬉しいです。
プログラミング学習の最初期に挑戦したコーディングですが、当時の私にとっては難しすぎず簡単すぎず、程よいチャレンジでした。実生活にもメリットが生じたため、コスパが良いアイデアだったと思います。プログラミングの可能性 を改めて実感し、学習意欲が湧きました！