こんにちは、 @mugi_uno です。
娘が保育園で私の似顔絵を描いてくれました。
黒いメガネがオシャレで、とてもよく描けていました。
ちなみに私はメガネはかけてません。誰の顔を描いたの。
電卓機能
先日Misocaに電卓機能を実装しました。
この機能は、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
となるようにしています。
💪使いやすさを追求する
機能追加するなら、せっかくなら使いやすい便利なものにしたいですよね。 内部の多くの人に触ってもらい、さまざまな感想をもらいつつ動作を調整していきました。
⌨️キーボード入力対応
最初はマウスなどで電卓をポチポチクリックして操作するのみのイメージだったのですが、 以下の感想をもらいました。
確かにそのとおりだな〜と思い、キーボード入力でも動作するように拡張しました。 しかし、軽い気持ちで始めたら色々とハマって大変で..
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 といった多数の組み合わせで確認しつつ、 どの環境でも自然に動かせる最適解を見つけるためにひたすら試行錯誤を繰り返していました。
最終的にはこんな感じで動作するように仕上がりました。
🔧細かな動作調整
ほかにも様々な動作調整を行いました。
- 電卓の開閉のショートカットキーは何が良い?
- すでに入力されている状態で電卓を開いたら?
- 文字選択状態で電卓を開いたらどうする?
100 / 3 * 3
の結果は何になるべき?- などなど..
あまり華やかではありませんが、頻繁に使うことになる可能性も高い部分なので、 ストレスを感じない使いやすいものを目指し、コツコツと地道な修正・改善を繰り返します。
🎉リリース
そんなこんなで、先日無事に機能リリースできました!
令和に電卓を作る男、それが俺だ
— mugi (@mugi_uno) 2019年7月17日
文書の作成時に電卓機能が使えるようになりました | 請求書作成サービス「Misoca(ミソカ)」 https://t.co/ytse0JQKQe
昨年に引き続き*3、 今年も合宿の成果をプロダクションへのリリースに繋げることができたので、個人的にはとても満足なプロジェクトでした。
合宿の価値が証明されつつあるので、来年あたりはハワイでの開発合宿に期待したいと思います。
採用
Misocaでは使いやすさを追い求めるエンジニアを募集しています
*1:Precious Wing(開発合宿2019 3日目) - Misoca開発者ブログ
*2:そもそもkeyCode自体、極力利用を避けたほうが良さそうです