[Library] 入力繰り返しの多いシステムで再入力が楽になる「Input-cache」

2019年12月24日

テクノロジー プログラミング

t f B! P L
昔仕事で一緒になった先輩で、同じことを2回聞いたら激怒していた人がいましたが、自分も後輩を持ったら、似たような感情が湧いてきました。 怒るというアンガーマネジメントを、いかがなものかと考えている、ユゲタです。 そして、他人ではなく自分が行っている作業で同じような作業を繰り返す時に、回数を減らすことができたら便利だし、自動化することができたら、神レベルと考えられます。 そして、会社の会計業務を毎月行っている時に、自分で作ったWEBシステムに登録をしているんですが、毎月同じ入力が発生することがメチャクチャたくさんあったので、 それを減らすべく、一度入力した項目をブラウザが覚えておいてくれるシステムを組んでみました。 ライブラリにしたので、他のシステムでも使えるかと思って、Githubにアップしておきました。

Github

https://github.com/yugeta/input_cache READMEを読んでもらうとだいたいの事がわかると思いますが、設置は以下のように行います。

使い方

ページ内に、"src/input_cache.js"をscriptタグで設置 その直後にインスタンスの起動をオプション付きで記述 <script src="input_cache/src/input_cache.js"></script> <script> new $$input_cache({ inputs : [ { name : "店舗", selector : "form[name='form1'] input[data-name='shop_name']" }, { name : "費目", selector : "form[name='form1'] input[data-name='kamoku_name']" }, { name : "内容", selector : "form[name='form1'] input[data-name='comment']" }, { name : "備考", selector : "form[name='form1'] textarea[data-name='memo']" } ], max_cache : 20, history_count : 10 }); </script>

設定説明

inputs : 記憶させたい入力フォームのselector情報を記述します。 ※動的フォームにより、ページ内で追加、削除される項目には現在のver1.0では対応していません。以後の対応予定にはなっています。 max_cache : ブラウザに記憶させる最大個数。これを超えると、古い順に消されていきます。(デフォルト値は100です) history_count : 入力記憶の直前履歴を表示するモードの記憶数(デフォルト値は10です)

こんなページで便利に使える(はず)

僕の会社の経理システムでの入力フォームページで使用しましたが、家計簿システムや会社のERPなどの、毎日繰り返し入力を行う場合などのレコメンド入力として、利用できます。 もちろん、情報セキュリティの観点からすると、ブラウザにキャッシュされては困るものもあるので、そうしたものはinputsの設定に含めないようにしてください。 また、初回バージョンでは、ブラウザキャッシュするlocalStorage部分には平文で書き込んでいるため、セキュリティ面でのバージョンアップは以後に対応していく予定にしています。 このシステムは、データベースなどとの連携を行わないので、WEBシステムであれば、簡易に設置することができるというメリットがあるので、毎日の作業を少しでも減らしたいと考えている人がいたら、是非使ってみてください。

操作サンプル

入力をしてページが切り替わるタイミングで、データがブラウザにキャッシュされます。 次回ページを開くと、前回まで直近で登録された件数が画面右上に表示されます。 この状態で、「○件」の数字部分をクリックすると、件数分の一覧が展開されます。 また、項目に入力すると、その項目と同じ値を含む件数が画面右上に表示されます。 そのリストをクリックすると、項目にデータが反映されます。 非常にシンプルなので使ってみて便利さが伝わってもらえると幸いです。 スマホなどでのシステムで使うと、時短は間違いないでしょうね。 リクエストなどあれば、コメントやプルリクもらえると嬉しいです。

このブログを検索

プロフィール

自分の写真
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出で、出来高は無限大です。

ブログ アーカイブ

QooQ