[JavaScript] スマホで使えるJavaScriptの電卓作った

2015/05/28

こんにちは。きんくまです。
おかげさまで、ようやく2月から進めてきた案件が落ち着き、平常運転になりました。

それなりの規模のWebサービスで、SPA(Single Page Application)だったのですが、フロント側は私一人だったので、なかなか大変でした。でもまあ、エンドユーザーにも、クライアントにもそこそこ好評だったみたいなんで、良かったのではないかと。

さてさて、そんな話は置いておいて、半年ぐらい前に作ったものがあるので、それをアップしたのでご紹介です。

おもにスマホで使えるように作った電卓です。

>> Rapid Calc

rapid_calc_snapshot

半年ほど前に必要があって作ったのですが、特に必要なくなったので公開。
(下に書いたのですが、iPhoneアプリが出たら削除予定)

使い方

数字キーを押して = を押せば計算結果が出ます。

計算結果をタップすると、その計算結果が最新のものに追加されます。

c は現在の入力欄のみクリア

AC は全てクリア

コンセプト

「計算式を残しながらサクサク計算したい!」

です。1年ぐらい前にこんな記事を書きました。

>> [日記] ブラウザを電卓にする方法

この方式で今でも開発者のコンソールを使って計算をしたりするんですが、これをなんとかアプリに落とし込みたいと思っていました。

すでにこれを実現しているアプリもいくつか存在しています。(作者の方々がこういうコンセプトだったのかはわかりませんが、、。)
ただ、自分の考えるサクサク感をもっと実現したいなーと思い、作りました。
なので、難しい数式などは計算できません。

実装ポイント

いくつか実装する上でポイントとなったところがあります。

1. カーソルのアニメーション

数式を入力しているときに、文字の横にカラーでチカチカと入力の棒が表示されます。
最初これをどうやって実装しようかと思ったのですが、最終的にcssで実現しました。
border-left, border-rightのアニメーションです。

2. 浮動小数点の計算

小数点が入るとJavaScriptだと計算がおかしなことになる場合がありました。
実際にJSでそのままやってみると

1.24 / 0.4 = 3.0999999999999996

とかって出ると思います。でこれをなんとか正解の 3.1 にしないといけません。

・整数に全てしてから、もとの数に戻す
・0.5を足したり引いたり

みたいな方法をやってみたのですが、うまくいかないことがわかりました。
なので、ライブラリを使うことにしました。

>> big.js

このライブラリは、数値ではなく文字列を渡すと文字列を返してくれるというものです。
それでうまいこといくようになりました。

3. 計算式の解析 – 逆ポーランド記法 – 操車場アルゴリズム

電卓アプリの中では、 x ボタンや = ボタンを押した瞬間にそこまでの計算をしているような動作をしているものがあります。

ただ、今回のアプリは、計算式を全て書いたあとにその文字列をパースして結果を出したいと考えました。

調べてみると計算式を評価する方法に逆ポーランド記法というものがあることがわかりました。

>> 逆ポーランド記法 – Wikipedia

これ、すごい昔に買ったアルゴリズムの本の最後の方にも載っていることがその時わかって読み返しました。いまは第二版になっているみたいですが、初版の方をもってマス。

結構面白い考え方で、どうしてこれで計算できるのかわからないんだけど、コンピューターには合っているみたいです。

で、実際にこれを実装する方法も探したところ、操車場アルゴリズムが見つかりました

>> 操車場アルゴリズム – Wikipedia

wikiの右側の図をみると、なるほどよくこんなこと思いついたなー!と感動。

で、ようやく実装できたというわけです。

宣伝というか予告というか

なんで、このJSの実装を期間限定でアップしたかといいますと、これをiPhoneアプリにしたいなと思ったのです。
JSのままアップすることも可能なのですが、やっぱりネイティブアプリにしたい!と思いまして。
それで、実は年明けからSwiftで作って途中まで書いていたのですが、受託案件が忙しくなって止まっていました。

これをなんとか完成させてストアに出したいなと思い、モチベーション維持のために公開しました。
広告付きの無料アプリの予定です。

ストアに出したら、上のjsバージョンは降ろそうと思っています。
よろしくお願いします。


自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る