はじめに
極めてシンプルな機能しか持たない簡単に作れそうなWebアプリのアイディアをそこそこ持っていたので、それらをいくつか同時開発してしまおうという企画のようなものです。
マルチタスク力を鍛えるつもりで取り組みました。
ノリで言えば一人合作みたいな感じです。
三つのカウント系アプリ
どうせだからコンセプトを統一しようということで
テーマを「カウント」にしてみました。
TDNカウンター
タイトル通りのただのカウンターです。
野球選手には関係ありません。
何かを数える時に使ってください。
カウントした数をコピーできます
PCよりスマホで使った方が使いやすいと思います。
こちらからどうぞ→TDNカウンター
使い方
- ＋ボタンで加算、ーボタンで減算されます
カウントは上部に表示されます。
- コピーボタンを押せばカウントした数がクリップボードに保存され
リセットボタンを押せばでカウントをリセットできます。
- シークレットブラウザ等で開いていない限り、ウィンドウを閉じたときに数えていた数が再度開いたときに維持されます。
ワードカウンター
MicrosoftのWordやgoogleドキュメントなどに付いている文字数を数える機能だけを持ったアプリです。
入力した文章を削除できるボタンとコピーした文章をペーストできるボタンが付いてます(ペーストの際は許可するかどうか聞かれるので許可してください)。
こちらからどうぞ→ワードカウンター
使い方
- テキストボックス(大きい空欄)に文字を入力またはペーストすると文字数が表示されます。
- ペーストのボタンを押すとクリップボードに保存されている文が入力フォーム内にペーストされて文字数が表示されます。
- クリアボタンでフォーム内の文と文字数がリセットされます。
カウントダウナー
名前の通りカウントダウンタイマーです。
入力された秒数でカウントダウン(秒読み)してくれます。
クリック音と終了音をそれぞれ任意で鳴らせます。
クリック音がウザイと思う方は終了音のみとかできます。
※スマホで音が上手く鳴らないことがあります。
こちらからどうぞ→カウントダウナー
使い方
- スタートボタンを押すとカウントがスタートし、カウントが終わるとタイムアップの文字が出てきます。
- カウント中にストップボタンを押せばカウントが止まり
スタートボタンを押せば再びカウント再開
リセットボタンを押せばカウントがリセットされて初期状態に戻ります。
- クリック音と終了音のボタンを押せば音が出るかどうかを選択できます(出る→ピンク、出ない→黒)。
- カウントする秒数を変えたいときは+と-のボタンをそれぞれ押してください。
使用した技術
React, styled-components
トータルで三日ほどで完成させることが出来たのはこの二つのおかげです。
まとめ
それぞれのアプリは単純な機能だったので簡単に作れましたが、
同時進行だと普段は一つに向ける注意力が三つに分散してしまうので
いつもより完成度に悔いが残りました。
あと早く公開したいという焦りもあって頭が混乱して簡単なエラーに長時間翻弄されたりなど踏んだり蹴ったりでした。
次回はテキスト生成系のミニWebアプリを紹介します。
投稿
