複数の項目を同時にカウントできるWebアプリ「マルチカウンター」を作りました。
単純なカウンターですが、
- 複数カウンターの管理
- 最大50個まで追加
- PC・スマートフォン対応
- LocalStorageへの保存
- URLによる複数端末での共有
- 閲覧専用URL
- 変更履歴
- CSVエクスポート
- 直近7日間のグラフ
- タイマー連動
など、実際に使うことを考えて機能を追加しています。
この記事ではアプリの紹介だけでなく、Webアプリとしてどのような考え方で作ったのかも簡単に紹介します。
作ったもの
今回作ったのは、ブラウザだけで使えるシンプルなマルチカウンターです。
例えば、
商品A 12
商品B 8
商品C 25
のように複数の項目を1画面で管理できます。
それぞれの項目には「＋」「−」ボタンがあり、クリック・タップするだけで数値を変更できます。
スマートフォンでも利用できるため、PCの前で使うだけでなく、現場で数をカウントするといった用途も想定しています。
なぜ作ったのか
カウンター自体は非常に単純なアプリです。
JavaScriptなら、
let count = 0;
function increment() {
count++;
}
function decrement() {
count--;
}
だけでも基本的なものは作れます。
ただ、実際に使おうとすると、
複数の項目を管理したい
ブラウザを閉じても値を残したい
スマートフォンからも使いたい
他の人と同じカウンターを共有したい
後から履歴を確認したい
といった要求が出てきます。
そこで「単純なカウンターを、実際に使えるツールにする」という方向で機能を追加していきました。
通常モードはLocalStorageに保存
設計上ひとつ意識したのが、
共有する必要がないデータまでサーバーに保存しない
ということです。
通常利用ではブラウザのLocalStorageを利用します。
イメージとしては、
const counters = [
{
id: 1,
name: "商品A",
count: 12
},
{
id: 2,
name: "商品B",
count: 8
}
];
localStorage.setItem(
"multiCounters",
JSON.stringify(counters)
);
読み込むときは、
const data = localStorage.getItem("multiCounters");
const counters = data
? JSON.parse(data)
: [];
というシンプルな構成です。
これによって通常モードでは、
ブラウザ
↓
LocalStorage
だけで完結します。
サーバーとの通信が必要ないため、ちょっとしたカウンターとしてすぐに利用できます。
LocalStorageだけでは共有できない
一方でLocalStorageには当然ながら、
別のPCやスマートフォンから同じデータを見ることができない
という問題があります。
例えば、
PC
└─ LocalStorage A
スマートフォン
└─ LocalStorage B
は完全に別のデータです。
そこでマルチカウンターでは、
通常モード
↓
LocalStorage
共有モード
↓
Server
と保存先を分けています。
URLを使った共有モード
共有機能を有効にすると、共有用のURLを発行します。
イメージとしては、
PC
│
│ HTTPS
▼
Server
▲
│ HTTPS
│
Smartphone
という構成です。
これによって、PCで変更したカウントをスマートフォン側から確認するといった使い方ができます。
イベントなどで複数人が同じ数字を確認・更新したいケースを想定しています。
編集URLと閲覧専用URLを分ける
共有機能ではもうひとつ、
編集できる人と見るだけの人を分けたい
という問題があります。
そこで、
編集用URL
↓
カウント変更可能
閲覧専用URL
↓
表示のみ
という形でURLを分けています。
例えばイベントであれば、
スタッフ
↓
編集URL
管理者・確認担当
↓
閲覧専用URL
といった運用ができます。
単純な機能ですが、共有ツールとして使う場合には意外と重要な部分です。
カウンターは最大50個
カウンターは最大50個まで追加できるようにしています。
無制限でも実装できますが、ブラウザ上で扱うツールなので、現実的な利用範囲を考えて上限を設定しました。
例えば、
商品A
商品B
商品C
商品D
...
のような在庫チェックにも使えます。
カウンターごとにタイトルを変更できるので、用途自体は限定していません。
CSVエクスポート
ブラウザ上だけで完結すると便利ですが、
「最終的にはExcelなどで使いたい」
というケースもあります。
そのためCSVエクスポートにも対応しました。
Webアプリの場合、CSVデータをBlobとして生成すればブラウザからダウンロードできます。
例えば、
const csv = [
["name", "count"],
["商品A", 12],
["商品B", 8]
]
.map(row => row.join(","))
.join("\n");
const blob = new Blob(
[csv],
{ type: "text/csv;charset=utf-8;" }
);
const url = URL.createObjectURL(blob);
といった方法です。
小さな機能ですが、
Webアプリで記録
↓
CSV
↓
Excel等で集計
という流れを作れます。
変更履歴も保存
カウンターは現在値だけを見ると、
商品A：25
しか分かりません。
しかし実際には、
10 → 11
11 → 12
12 → 11
...
25
という操作があります。
そこで変更履歴を確認できるようにしました。
「現在いくつなのか」だけでなく、
いつ、どのように数字が変化したのか
を後から確認できます。
直近7日間をグラフ表示
履歴データを利用して、直近7日間の合計もグラフで確認できるようにしました。
例えば、
月 █████ 5
火 ████████ 8
水 ███ 3
木 █████████ 10
のように、単純な現在値だけでは分からない変化を見ることができます。
カウンターと履歴を組み合わせると、
「ただ数字を増減するツール」
から、
「簡単な記録ツール」
としても利用できるようになります。
タイマーとカウンターを連動
個人的に少し面白いと思っているのがタイマー機能です。
タイマー終了時に指定したカウンターへ自動的に加算できます。
例えば、
30分タイマー開始
↓
30分経過
↓
勉強回数 +1
という使い方ができます。
単純なカウンターとタイマーを組み合わせることで、Pomodoro的な使い方にも応用できます。
レスポンシブ対応
Webアプリとして作った理由のひとつが、端末を限定したくなかったことです。
Windows PC
Mac
iPhone
Android
Tablet
など、ブラウザがあれば基本的に利用できます。
特にカウンターは現場でスマートフォンから使うケースも考えられるので、PCだけではなくスマートフォンでの操作性も意識しています。
Webアプリにしたメリット
この程度のツールであれば、ネイティブアプリとして作る方法もあります。
ただ今回はWebアプリにしたことで、
インストール不要
会員登録不要
OSへの依存が少ない
URLを送るだけで使える
アップデート配布が不要
というメリットがありました。
特に小さなツールの場合、
「インストールしてもらう」という行為自体が利用開始のハードルになる
と感じています。
URLを開けばすぐ使えるというのは、Webアプリの大きなメリットです。
シンプルなツールでも作ってみると意外と考えることが多い
最初は単純なカウンターでしたが、実際に使えるようにしていくと、
データをどこに保存するか
↓
別端末とどう共有するか
↓
編集権限をどうするか
↓
履歴をどう扱うか
↓
データをどう外部に出すか
↓
スマートフォンでどう操作するか
など、いろいろな設計が必要になりました。
特に今回面白かったのは、
LocalStorageで完結するモードと、サーバーを利用する共有モードを分けたこと
です。
すべてをサーバー保存にするのではなく、必要な場合だけサーバーを使う構成にしています。
小さなWebアプリですが、LocalStorage、データ共有、権限、履歴、CSV、レスポンシブUIなど、Web開発のいろいろな要素を試すことができました。
実際に公開しています
マルチカウンターは無料で公開しています。
アカウント登録やインストールは必要ありません。
ブラウザからそのまま利用できます。
在庫管理、イベント人数、作業件数、勉強、筋トレなど、何かを数える場面があれば試してみてください。