この記事は最終更新日から5年以上経過しているため正確ではないかもしれません

単位変換ウェブアプリ「LsC !」をリリースしました

日常生活で「あれ？これっていくつだっけ？」そう思うことがあるはず。
そんな時のためのツールとして「LsC !」をリリースしました。

これは日常で使うであろう単位を変換するサービスになります。
これだけならいくつもアプリやサービスがありますが、計算式も知りたいですよね？
なので計算式も見れるようにしました。

また、オフラインでも使用ができます。

使い方

計算したいCATEGORYとUNITを選択し、デスクトップの場合はINPUTエリアに入力、モバイルの場合は計算機のような入力エリアで数値を入力するとRESULTエリアにリアルタイムで計算結果が反映されます。

計算は入力を行うたびに自動で計算を行います。

計算結果をコピーすることができます。
RESULTエリアの青枠が選択した単位になりますので、好きな単位をにスクロールしてCOPYボタンクリックでコピーできます。

選択したUNITとRESULTに対応する計算式を自動で入力エリアの下に自動で表示します。

要望やバグの報告はGitHubで報告待ってます。

ここからは興味がある人のために技術的なことを少し紹介します。
サイト全体のフレームワークはVue.jsを使用しています。
状態管理は当然のごとくVuexを利用。

ウェブアプリとしてホームスクリーンに登録できるようmanifest.jsonやservice workerを利用。
service workerの生成はGoogle謹製のWorkboxを利用。
いやー、手軽でいいね！簡単にオフラインに対応できますよ。

カテゴリを変更した場合はRESULTは2番目が自動選択されるようになります。
それ以外のUNITを変更した場合は最初の要素が選択されます。

これには2つ理由があります。
例えばアクセス時はTIMEのμsが初期選択状態になります。
UNITがμsでRESULTの選択もμsだと計算式の表示が「Not Require.」になります(式が不要なので)。
それでは計算式のエリアが無意味になるので2番目が表示されます。

もう一つは、このエリアがスクロール可能だということを知らせるTipsとしてです。
はじめに少し動けば、このエリア内は動かせるということを説明不要で知らせることができます。

一気に複数の計算を行うため、場合によっては画面がフリーズしたようになる可能性があるのでWeb Worker APIを利用して別スレッドで計算と計算式の表示処理を行うようにしています。
なので、メインのレンダリングには影響がないようになっています。

現在は都度別スレッドのインスタンスを立ち上げてますが、一つのインスタンスにしてself.postMessageで都度呼び出すほうがいいのだろうか？
現在はself系のイベントはonceで一回きりの運用。

この辺、詳しい人がいればそっと教えてもらえれば助かります。

これは独自に実装しています。
元々スクロール系のjQueryライブラリも過去に作っていたことがあるので、ベースはこれを元にjQueryからバニラな方法に変更。
(ちなみに当ブログのモバイルメニューのスクロールも独自実装です)

吸着部分はファジィ理論の三角形型メンバーシップを使って、スクロール終了後の各リストで一番中心に近い要素の上部を青枠に収まるように調整してます。