タイムロッキング・コンテナのアプリを作った

従来のタイムロッキングコンテナ

物理的なタイムロッキングコンテナは、特定の時間が経過するまで内容物にアクセスできないようにするためのロック機能を備えた収納ボックスのことです。

スマホ依存等を対策するために使われることもありますが、私は勉強にタブレット端末やパソコンも使うので、物理的にデバイスごと触れないようにしてしまうと逆に困ってしまいます。

そこで、webアプリ上で同様の挙動をするものを作成しました。
SNSやゲームのアカウントのパスワードや、スクリーンタイムアプリのパスワードを覚えられない長さに設定して、それをロックしておくことで、作業の妨げになるものを排除できます。

以下リンクで公開しています。

React App

データはローカルに保存しているので、セキュリティのリスクはないはずです。
ソースコードは以下に公開しています。

アプリの特徴

1. パスワードロック機能:
   このアプリでは、あらかじめ設定したパスワードを入力し、その後タイマーをセットすると、指定した時間が経過するまでパスワードが見えなくなります。

2. 時間設定の柔軟性:
   タイマーは秒単位だけでなく、分、時間、日単位で設定することができます。例えば、1時間だけパスワードをロックしたい場合や、1日中ロックしておきたい場合など、ニーズに合わせて柔軟に設定できます。

3. 再起動や再読み込み後もデータ保持:
   このアプリでは、ブラウザを再起動したりページを再読み込みした場合でも、設定したパスワードやタイマーの状態が保持されます。これにより、うっかりページを閉じてしまっても安心です。

※ブラウザデータを削除してしまうとデータが消えてしまうので注意してください。履歴の削除で消えてしまうこともあるので注意してください。その他には開発者ツールを使って意図的に削除しない限り大丈夫だと思います。

アプリの使い方

1. パスワードの入力:
   アプリの画面にアクセスすると、まずパスワードを入力するフィールドがあります。ここにあなたのパスワードを入力してください。

2. タイマーの設定:
   次に、ロックしたい時間を設定します。時間は秒、分、時間、日単位で設定可能です。例えば、「60分間ロックしたい場合」は、タイマーの値に「60」を入力し、単位を「分」に設定します。

3. タイマーの開始:
   タイマーの設定が終わったら、「タイマーをスタート」ボタンをクリックします。すると、確認ダイアログが表示され、設定したタイマーの終了時刻が表示されます。確認後、タイマーが開始され、設定時間が経過するまでパスワードが見えなくなります。

4. パスワードの表示:
   設定した時間が経過すると、パスワードが表示されます。再度パスワードを確認したい場合は、設定した時間が経過するまでお待ちください。

5. リセット機能:
   タイマーが0になった場合に限り、リセットボタンが有効になります。このボタンをクリックすると、タイマーやパスワードの設定を初期化することができます。