履歴とテンプレートが残る無料電卓Webアプリ「にゃるっく」を作った話|登録不要・ブラウザだけ・データは端末内

概要

今回は計算が自動で履歴に残り、よく使う式は「テンプレート」でワンタップ計算できる無料の電卓Webアプリ「にゃるっく」を作ったので紹介していきます。

このアプリの一番の特徴はふつうの電卓に「履歴」と「計算式テンプレート」を足したハイブリッドな電卓であることです。

電卓で出した答えって、画面を切り替えたり次の計算を始めた瞬間にスッと消えてしまいますよね。
「さっきいくらだったっけ…」ともう一度打ち直す、あの地味なストレス、わかると思います(- -;

そこで、その地味なストレスをまるごとなくせる電卓を、自分で作ってしまいました。

それが「にゃるっく🐾」です。

公開URLはこちら → nyacal.shinpinoshi.comhttps://nyacal.shinpinoshi.com

登録もインストールも要らず、ブラウザで開けばその瞬間から使えます(完全無料)。

この記事では、どんなアプリなのか・どう使うのか・なぜ作ったのかを紹介していきます(^^

それではやっていきましょう!

目次

こんな悩み、ありませんか?

ふだん電卓を使っていると、こんな場面が出てきますよね。

  • 計算結果がすぐ消えて、もう一度打ち直す
    • 画面を切り替えたら答えが消えていて、「さっきの数字なんだっけ」と最初から入力し直す
  • 消費税や割勘の式を毎回ゼロから打つ
    • 価格 × 1.1合計 ÷ 人数 を、買い物や飲み会のたびに手で組み立てている
  • 計算の途中経過をメモし忘れる
    • 複数の計算を続けてやると、前の答えを覚えていられずに混乱する
  • スマホの標準電卓は履歴が弱い
    • 直前の計算しか追えず、ちょっと前の結果を見返せないことが多い

「にゃるっく」は、この「電卓あるある」を、履歴とテンプレートの2つでまとめて解決することを狙って作ったアプリです。

にゃるっくとは

「毎日の計算を、ちゃんと残せる電卓」がコンセプトのにゃるっくのトップ画面
にゃるっくのトップ画面。「毎日の計算を、ちゃんと残せる電卓にゃ。」のキャッチコピーと白猫マスコット、電卓のイメージ

「にゃるっく🐾」は、シンプルな電卓に、計算履歴の自動保存と計算式テンプレートを足した無料のWebアプリです。

ざっくり3行でまとめると、こんなアプリです。

  • 登録不要・完全無料
    • アカウント作成もログインも不要。ブラウザで開いた瞬間から全機能を使える
  • 計算が自動で履歴に残る ×「テンプレート」で一発計算
    • 出した答えは勝手に履歴へ保存。消費税や割勘などよく使う式はワンタップで呼び出せる
  • データは端末内だけに保存
    • 入力した内容はブラウザの中だけに残り、外部サーバーには送られない

ナビゲートしてくれるのは白猫の「にゃるっく」で、ヒントを出したり画面のすみにちょこんと顔を出してくれます。
クリーム色のやさしい配色で、見ていてほっとするデザインにしました(^^

主な機能

計算結果が自動で履歴に残る

電卓画面。計算するたび、右側の「計算履歴」に結果が自動で積み上がっていく
にゃるっくの電卓画面。中央に計算結果、右側に自動保存された計算履歴が時系列で並んでいる

にゃるっくでは、計算するたびに結果が自動で履歴へ記録されていきます。
「保存ボタンを押し忘れて結果が消えた」ということが起きません。

履歴のカードからは、いろいろな操作ができます。

計算履歴パネル。過去の計算が時系列で並び、再計算・ブックマーク・テンプレ化・コピーができる
にゃるっくの計算履歴パネル。各計算カードに再計算・ブックマーク・フォルダ追加・削除のボタンが並ぶ
  • 履歴から再計算・編集できる
    • 過去の式を呼び戻して、数字を少し変えてもう一度計算できる
  • よく使う計算はブックマーク
    • お気に入りに入れておけば、いつでもすぐ見返せる
  • 履歴からそのままテンプレ化
    • 「この式、毎回使うな」と思ったら、ワンタップでテンプレートに昇格できる

履歴を「ただの記録」で終わらせず、再利用やテンプレ化につなげられるのがにゃるっくの工夫したところです。

よく使う式を「テンプレート」で一発計算

テンプレート一覧。消費税・割勘・BMIなどのプリセットがフォルダで分類されている
にゃるっくのテンプレート一覧画面。消費税10%・消費税8%・割勘・BMI計算・単利・複利などのプリセットがカードで並ぶ

ここがにゃるっくのメイン機能です。
よく使う計算式に {価格} のような名前付きの空欄を作っておけば、数字を入れるだけで一発で答えが出ます。

最初から、生活でよく使う8種類のプリセットテンプレートを用意しています。

  • 消費税10% / 消費税8%(軽減税率)
    • {価格} * 1.1{価格} * 1.08。税込価格を毎回計算しなくていい
  • 割勘(チップ込み)
    • ({合計金額} + {チップ}) / {人数}。飲み会の精算が一瞬で終わる
  • BMI計算 / 単利・複利
    • {体重} / ({身長} * {身長}){元本} * (1 + {年利})^{年} など、健康・お金の定番計算
  • km→mile / パーセント
    • {km} * 0.6214{a} / {b} * 100。単位変換や割合の計算もワンタップ

実際に消費税10%のテンプレートを実行すると、こんな感じです。

消費税10%テンプレートの実行画面。価格を入れるだけで税込価格が計算され、結果はワンタップでコピーできる
消費税10%テンプレートの実行ダイアログ。価格に1980を入力すると結果2,178が表示されている

価格に 1980 と入れるだけで、税込の 2,178 がすぐ出ます。
結果はワンタップでコピーできるので、フリマの値付けやレシートの確認にも便利です(^^b

プリセットだけでなく、自分専用のテンプレートを作って保存・編集・削除もできます。
「うちの家計でいつも使う式」みたいなものを登録しておくと一気に楽になります。

フォルダ&タグで整理(Obsidian風)

テンプレートが増えてきても迷子にならないよう、整理する仕組みも入れています。

  • フォルダで階層分類
    • 「税金」「健康」「お金」みたいに、Obsidianのようなフォルダ構造で仕分けできる
  • 8色のタグで横断ラベリング
    • フォルダとは別軸でタグを付けて、色やラベルで絞り込める
  • ドラッグ&ドロップで並べ替え
    • 並び順の入れ替えや移動が直感的。スマホのタッチ操作にも対応

データは端末内だけ・登録不要・オフライン対応

にゃるっくは計算データ・履歴・テンプレートを、すべてブラウザの中(端末内のIndexedDB)に保存します。
これらの内容が外部サーバーに送られることはありません。

アカウント登録もログインも不要なので、「自分の計算内容をどこかに預けたくない」という方でも気軽に使えます。

利用状況の把握のためにアクセス解析(Google Analytics)は利用しています。
ただし、これは「どのページが見られたか」を測るためのもので、あなたが入力した計算式や履歴の中身が送信されるわけではありません。

ただし、端末内保存ならではの注意点もあります。

データは端末のブラウザにだけ保存されます。
ブラウザのキャッシュ/サイトデータを削除したり、シークレットモードで使うと、保存した履歴やテンプレートも一緒に消えてしまいます。

その対策として、設定からJSONで全データをバックアップ・復元できる機能を用意しています。
機種変更や別ブラウザへの引っ越しのときも、書き出して読み込むだけで持っていけます。

さらにPWAに対応しているので、ホーム画面に追加すればネイティブアプリのように起動でき、電波がなくてもオフラインで使えます(インストールは任意で、ブラウザのままでも問題なく使えます)。

ダークモードもスマホもOK

ダークモード表示。目にやさしい暗色テーマで、Light / Dark / システム追従から選べる
にゃるっくのダークモード表示。暗い背景にテンプレート一覧が並んでいる

テーマはライト/ダーク/システム追従の3つから選べます。
夜に布団の中で使うときはダークモードがやさしくておすすめです(^^

スマホ表示の電卓画面。レスポンシブ対応で片手でも操作しやすい
スマートフォンで表示したにゃるっくの電卓画面。15×8=120の計算結果と数字キーが縦に収まっている

スマホ・タブレット・PCのどのブラウザでも動きます。
スマホでは上部のアイコンで電卓・テンプレート・設定をサッと行き来でき、片手でも押しやすいボタン配置にしています。

使い方は3ステップ

使い方はとてもシンプルで、基本は3ステップです。

  • ① にゃるっくを開く
  • ② 計算する or テンプレートを選ぶ
    • ふつうに電卓を叩くか、「テンプレート」から消費税・割勘などを選ぶ
  • ③ 数字を入れる
    • テンプレートなら空欄に数字を入れるだけで答えが出る。結果はそのままコピーできる

計算した結果は勝手に履歴へ残るので、「保存しなきゃ」と意識する必要すらありません。

なぜ作ったのか

自分はふだんから、買い物の税込価格や、副業まわりの利益計算で電卓をよく叩きます。
そのたびに「さっきの答えが消えてもう一回打ち直す」「消費税の式を毎回組み立てる」のがずっと小さなストレスでした(- -;

メモアプリや表計算を開けば解決はするんですが、電卓を叩くだけの作業にそこまで立ち上げるのは大げさなんですよね。

それなら、電卓そのものに「履歴」と「テンプレート」を最初から組み込んでしまえばいい——という発想で作ったのがにゃるっくです。

特にテンプレート機能は、自分が「毎回これ計算してるな」と思っていた式をそのまま形にできたので、作っていて一番楽しい部分でした(^^b

技術的なこと(興味がある方向けに少しだけ)

使う分には関係ないので、技術好きの方向けに軽くだけ書いておきます(^^

  • フロントエンド: React + TypeScript + Vite で構築したシングルページアプリ
  • 計算エンジン: mathjs を使って、累乗や階乗などもまとめて評価
  • データ保存: IndexedDB(Dexie)に完結。端末から外へデータが出ない設計
  • PWA: Service Workerでオフライン動作&ホーム画面インストールに対応
  • ホスティング: Cloudflare Pages(静的配信)

このあたりの実装の細かい話は、別記事で深掘りしたいと思っています。

まとめ

「にゃるっく」は、計算が自動で履歴に残り、よく使う式はテンプレートで一発計算できる無料の電卓Webアプリです。

こんな人に向いています。

  • 買い物の税込価格や割引計算を、サッと出したい方
  • 飲み会の割勘やBMI・利息など、決まった式をよく使う方
  • 計算結果が消えるたびに打ち直すのが地味にストレスな方
  • 計算データを外部に預けず、端末内だけで完結させたい方

登録もインストールも要らず、開いた瞬間から使えるので、まずは気軽に触ってみてください。
マニュアルなしでも直感的に使えるようにしたつもりです(^^

公開URLはこちら
nyacal.shinpinoshi.comhttps://nyacal.shinpinoshi.com

以上となります!
履歴とテンプレートの組み合わせは自分でも気に入っているので、ぜひ使ってもらえると嬉しいです(^^b
それでは、お疲れさまでした!!