電卓機能

先日Misocaに電卓機能を実装しました。

www.misoca.jp

f:id:mugi1:20190718175926p:plain

この機能は、2019年4月に行った開発合宿*1の成果物が元になっています。

「たかが電卓、されど電卓」ということで、リリースまでに様々な知見やハマりどころがあり、とても楽しかったです。今回はこの電卓機能がリリースされるまでのお話です。

🤔なぜ電卓？

「Webサービスなんだから小計とか合計は自動で計算されるのに、なんで電卓なんか必要なの？」と思うかもしれませんが、文書を作成するときには、意外と些細な計算が必要となることが多く、

10%引きにした単価にしたい
総額3万円からの差額を明細に含めたい

といったケースがよくある例です。

従来のMisocaでは、これらの計算はユーザ側で物理・あるいはアプリなどの電卓を用意する必要がありました。そしてそこから結果をまた画面上で入力する必要があり、とても面倒です。転記時に間違えるリスクも増えてしまいます。

請求書を作る体験の中にシームレスに電卓が組み込まれていることで、ストレス無く文書を作ることができるようになるというわけです。

...と、前々から考えていたものの、なかなか「おっしゃ気合い入れて電卓作るぞ！」とはならないものです。そんな中ちょうど開発合宿があり、ガッとプロトタイプを作ってみたところ社内でも評判が良く、ブラッシュアップしてリリースしよう！という運びとなりました。

📚電卓を知る

正直言うと「電卓なんて押された数字で四則演算できればいいだけでしょ〜」程度に軽く考えていましたが、実際作るために様々な電卓の仕様・挙動を調べていると、なかなかに奥が深くて面白かったです。

`％` ボタン

電卓に ％ ボタンがあるのをご存知でしょうか。私は存在自体に気付いていませんでした。これを利用すると、「特定の値のN%引きの値」などを簡単に算出できます。

2 0 0 ＋ 2 0 ％

と入力すると、240 が結果として得られるのです。便利ですね。

しかし、この挙動は電卓のメーカーによって違いがあり、たとえばCASIO製の電卓の場合には

2 0 0 × 2 0 % ＋

と入力する必要があります。 Misocaで機能実装するにあたって、どの挙動に揃えるかの検討が必要でした。

最終的には、多くの電卓の挙動である

2 0 0 ＋ 2 0 ％

で 240 が得られる方式を採用しています。

計算順序

次の順番でボタンを押したときの計算結果が、電卓によって異なります。

1 0 0 ＋ 5 × 2 ＝

ほとんどの一般的な物理電卓では、掛け算・割り算の順番は考慮されずに (100 ＋ 5) × 2 扱いとなり、結果は210 です。しかし、例えばiOSに搭載されているデフォルトの電卓アプリなどの場合は、式全体を考慮して 110 になります。

Misocaでは物理電卓側に寄せて、この場合は 210 となるようにしています。

💪使いやすさを追求する

機能追加するなら、せっかくなら使いやすい便利なものにしたいですよね。内部の多くの人に触ってもらい、さまざまな感想をもらいつつ動作を調整していきました。

⌨️キーボード入力対応

最初はマウスなどで電卓をポチポチクリックして操作するのみのイメージだったのですが、以下の感想をもらいました。

f:id:mugi1:20190719133151p:plain:w400

確かにそのとおりだな〜と思い、キーボード入力でも動作するように拡張しました。しかし、軽い気持ちで始めたら色々とハマって大変で..

`key` / `code` / `keyCode` が環境で色々と変わる

JavaScriptで入力されたキー情報はkeyDownやkeyUpといったイベントから KeyboardEvent.key / KeyboardEvent.code / KeyboardEvent.keyCode といった値を参照する方法がよく知られていますが、これらの値はブラウザによって一部に差異があり、個性の強いわんぱくブラウザではまったく違う値を返すこともあります。

また、たとえば keyCode はキーボードのJIS/US配列によって、期待値とズレる可能性があります。*2 US配列のHHKBを愛用している私だけ挙動が違っていて大変でした。

というわけで開発中は、Windows/MacOS × Chrome/Safari/FireFox/Edge/IE11 × JIS/US といった多数の組み合わせで確認しつつ、どの環境でも自然に動かせる最適解を見つけるためにひたすら試行錯誤を繰り返していました。

最終的にはこんな感じで動作するように仕上がりました。

f:id:mugi1:20190719141643g:plain:w500