はじめに
現在Googleに公開申請中なのですが、電卓拡張機能を作成しました。 便利な機能（結果を１クリックでコピーできる）を実装でき、 初めてのプロダクトとしては中々良い物ができたと思っています。 公開され次第、Twitterとブログで紹介したいと思います。
さて、今回は電卓拡張機能を作成するにあたって僕が学んだことをシェアしたいと思います。 主に以下の内容について書きます。
- 拡張機能を作る際の手順
- 基本的な電卓の実装方法
- 便利な機能（結果を１クリックでコピーできる）の実装方法
完成品
画像の様な見た目の電卓です。名称は「Answer Copy Calculator」です。 無料で公開しています。 小数計算も可能で、基本的な機能は網羅できていると思っています。
特徴としては「Copy Answer」ボタンで計算結果をコピーすることができることです。
計算結果をコピーすることって意外と多い気がしたのですが、 既存のストアに公開されている電卓拡張機能では、コピー機能を持っている物が 見当たらなかったので作成しました。
作成にかかった時間は大体5〜6時間位でした。 一度ほぼ作りかけたのですが、デザインが納得できずに作り直したので結構時間がかかりました。
使っている技術としては
- HTML/CSS
- JavaScript
- Bootstrap
です。特にChrome APIは使用しておらず、シンプルな構成です。
学んだこと
拡張機能を作る際の手順
何かを作る際には共通することですが、作る際の手順によって 効率が大きく変わります。
気をつけていたのは「行き当たりばったりにコーディングしない」こと。 きちんと作成する物のイメージを作ってから実際にコーディングする様に心がけました。
具体的には以下の様な感じで作業を進めました。
- 公開されている既存の電卓をチェックして、「どんな機能があれば付加価値を付けられるか」を考える
- 実装する機能を決める（基本的に最低限で良い） 3. デザインを決める（極力シンプルに）
- 実装する機能のロジックを決定する（可能であればフローチャートなどを作っても良いかも）
- デザインをまず完成させる（classとidは無闇に増やさない）
- JavaScriptで動的処理を実装する
- デバッグ
- 公開手続き←今ここ
JavaScriptを早くいじりたくなりますが、まずはデザインをしっかり固めてからにしました。 その方が作業の切り分け（デザインと機能）ができるので個人的な感覚としては効率がよかったです。 またデザインをまず作り上げちゃうことで、安心感も出るのでストレスも少ないです。
基本的な電卓の実装方法
電卓の主な機能
まず電卓の機能を考えます。ざっと以下の様な感じでしょうか。
- 数値ボタンを押すと、押した数値が表示される
- 小数点を使うことで小数が表現できる
- 四則演算ができる
- 「＝」を押して計算結果が求まる
- 計算結果を引き継げる
詳細は割愛しますが、それぞれ以下の様に実装しました。
数値ボタンを押すと、押した数値が表示される
これはボタンのElementにaddEventListenerで実行処理を渡すことで実現します。
// 0を入力した場合
document.getElementById("0").addEventListener("click", ()=>{
repeatFlag = false;
addInput("0");
});
そして入力された値をレンダリングします。
このレンダリングですが、僕はまず表示する文字列を格納する配列を用意し、
そこにpushしていき、レンダリングのタイミングで[文字列を格納する配列].join("");
を行い1つの文字列に変換して画面に表示しました。
こうすることで数値と演算子（+ - × ÷）や小数点などの切り分けが簡単になります。
表示はupdateFomula()という関数を用意し、画面更新処理を一元化することで
DRYなコードを目指しました。
// 画面更新
function updateFomula(){
document.getElementById("fomula-text").innerHTML = fomula_list.join("");
}
小数点を使うことで小数が表現できる
配列に格納した文字列を数値にする際には、parseFloat()を使用。
基本的に数値は浮動小数点で扱いました。
実は今回作成した電卓は1未満の小数を作成する際には以下の表記両方OKにしています。
- 0.5
- .5
parseFloatの仕様で、どちらの文字列を渡しても正しく読み取ってくれるので
この様な実装にしました。
ですので配列に小数点を追加する際には「一つの数値で小数点が2つ以上入力されない」
というバリデーションを実装すればOKです。
このバリデーションはフラグbanInputDotFlagで管理する様にしました。
小数点が入力されるとtrueになり、再度小数点は入力されない仕組みです。
（実際のコードではもっと細かいジャッジを入れていますが、長くなるので割愛）
// dot
document.getElementById("dot").addEventListener("click", ()=>{
repeatFlag = false;
if(!banInputDotFlag){
banInputDotFlag = true;
addInput(".");
}
});
四則演算ができる
四則演算の演算子も上記の配列に追加する形にしました。 配列をforEachでループさせて、演算子が現れたらそれ以前の文字列を数値にキャストして 計算を行っています。
配列を扱う際には、forよりもforEach()やmap()を使用した方が
シンプルに記述できる場合が多いです。
「＝」を押して計算結果が求まる
「＝」ボタンを押すことで計算結果を求めます。
実はこの処理の実装に一番時間がかかりました。判定する要素がかなり多いからです。 式は正しく入力されているか、再度「＝」を押された際の挙動はどの様にするか... など考慮すべき点がかなり多いです。
こういった複雑になりがちな処理は、極力実装する前にフローチャートなりで 処理を確認してからコーディングを行う方が良いと思います。泥沼になるので...。
計算結果を引き継げる
実は電卓には、以下の様な機能が実装されている場合があります。
例
- 「1 + 1」 と入力
- 「＝」を押す
- 「2」が表示される
- 再度「＝」を押す
- 2 + 1が内部的に行われ、「3」が表示される
上記例の機能を実装したかったので、計算結果を退避させ 連続で「＝」が押された場合に対応できる様にしました。 こういった細かい仕様が電卓には意外とあります。
便利な機能（結果を１クリックでコピーできる）の実装方法
本拡張機能の目玉である「１クリックコピー」機能です。 実は仕組みとしては単純でして、以下の記事に掲載されているロジックを使っています。
意外とコピーという処理は素直に実装できないので、若干の面倒臭さは感じましたが 先人の知恵を利用しました。
終わりに
今回はソースコードはあまり載せず、実装における僕の考えなどを書きました。 今後も便利な拡張機能を公開していきたいと思います。