こんにちは。うまいちです。
今回は、MoneyTreeをPCのブラウザで使う際の入力スピードを数段アップさせる設定方法についてです。
2022年2月現在は、Oshidoriというアプリを使用して家計の管理をしています。
1つのアカウントを共有するのではなく、パートナーのアカウントとペア(紐づけ)で利用できる上、それぞれの口座やカードをプライベートに管理できるため便利です。
ブラウザ版MoneyTreeの入力フォームを、格段に使いやすくする！
MoneyTreeはアプリだけでなくPCでも使えます。
私は、PCでMoneyTreeのサイトにアクセスし、ブラウザで使うことが多いです。
ただ、不満に思うことがひとつ…それは、入力フォームが使いづらいということです。
文章で伝えるのが難しいのですが、一応流れを説明してみると…
- 日付欄をクリックして、カレンダーからレシートの日付を選択
- 金額欄に、レシートから金額を入力(半角英数入力に切り替え)
- 内容欄に、買い物をしたお店や品物の中身などのメモを入力(大抵は日本語入力なので切り替え)
- カテゴリ欄をクリックして、カテゴリを選択
- 保存をクリックして登録
これがレシート1枚登録する流れです。ここまではまぁ、問題ありません。ですが、続けて次のレシートを登録しようとすると…
- 日付欄をクリックして、カレンダーからレシートの日付を選択
- 金額欄に、レシートから金額を入力。日本語入力になっているので、そのまま入力すると、確定しても受け付けずに消える。がっくりした後、半角英数入力に切り替えて入力。
- 内容欄に入力しようとすると、今度は半角英数入力になっているのだけど、気付かず途中まで入力してしまうことがしょっちゅう起こる。またがっくり。打ち直す。
- ～以下繰り返し～
こんな感じになります。
このIMEモード切替がちょっと面倒。また、日本語入力のまま数字を入れて半角数字に変換しても確定したら消えるという、金額欄の仕様も不便です。
解決方法は？
しばらくはそのまま使っていましたが、どうにかならないかなーと考えました。
思いついたのは、標準のIMEモードが面倒なら、cssでIMEモードを制御すればいいんじゃないか？と言うこと。
ただ、当然ながらMoneyTreeのサーバーにあるcssファイルを書き換えることはできません。
ならば自分のブラウザ上だけで書き換えればOK。ブラウザのアドオンを使えば、それを実現することができます。
探してみたら、「Stylish」が使いやすそうでしたので、早速導入、設定しました。
1.Stylishをインストール
ブラウザアドオン Stylishは結構有名らしく、複数のブラウザに対応しています。Firefox、Chrome、Operaなど。残念ながら、EdgeやIEにはないみたいです。
以降の説明は、Firefoxでの操作になります。ブラウザごとに読み替えが必要かもしれませんが、ご了承ください。
2.スタイルを作る
インストールすると、ツールバーにStylishのアイコンが出てくるかと思います。
そちらをクリックして、メニューから「スタイルを作る」を選びます。
すると、スタイルを追加する画面が出てきます。
スタイルの名前を入力する部分は、自分が分かるような名前を入れておけばOK。
私はとにかくimeモードを切り替えたかったので、「imeSwitch」と付けておきました。
3.CSSを書く
金額欄、内容欄のIMEモードを自動で変えたいので、それぞれにime-modeスタイルを指定します。
.input-amount {
ime-mode: disabled;
}
.cash-transaction-section-body input {
ime-mode: active;
}
これで、金額欄は日本語入力無効、内容欄は日本語入力が初期設定になります。
4.適用先を指定
標準では適用先がすべてとなっています。
このスタイルが他のサイトで適用されないように、念のため適用先を指定しておきます。
すべての横にある個別指定ボタンを押して、セレクトボックスはドメイン上のURLを選択、テキストボックスにはapp.getmoneytree.comと入力しておきます。
これで、ブラウザ版moneytreeのページでだけ、このスタイルが適用されます。
まとめ
今回紹介した方法は、MoneyTreeだけでなく、ブラウザで利用する様々なWebアプリで使えます。
是非、試してみてくださいね。
ちょっとした工夫で、随分と快適に入力できるようになりました。
他にも、MoneyTreeを使う際に工夫していることがありますので、よければ見てみてください。
