先日、以前から知り合いで最近交流が活発になった後輩の yamaken 君がワードウルフのiOSアプリを公開しました。
非常にめでたい。ぜひ、DLして遊んであげて下さい。
で、ノリと雰囲気でそのアプリのデザインレビューをやってたんですが、その後輩からふと、
yamaken「あれ？先輩はアプリとか作らないんですか？」
と言われてしまいまして。
スマートフォン用のネイティブアプリ（いわゆる普通のアプリ）に関してはデザインはやったことがあるけど実装はしたこと無いし、やってみるとしたらWebアプリかなあとか考えながら調べていたところ PWA というえげつないしくみの存在を知ってしまいました。
PWA(Progressive Web Application)
いきなりアルファベットばっかり出てきてもアレなので、普通のWebアプリ/Webサイトとの違いをざっくり並べてしまいます。
- オフラインでも動作する
- スマートフォンのブラウザアプリで「ホームに追加」すると単体のアプリのように動作できる
- でも、実際はブラウザ機能を利用するので容量は非常に軽い
- プッシュ通知などの通知、電話の発信など、これまでネイティブアプリ”ならでは”だった機能が実装できる
すごくない？すごい！ということで勉強してみました。
ものすごく単純化して言うと、従来のキャッシュに当たるローカルストレージを発達したJavaScriptとブラウザAPIを駆使して厳密に管理し Webサイト,アプリをまるごとキャッシュ すると同時に、ネイティブアプリぽい動作をブラウザAPIで担えるようにしてしまえ、と言うものです。
最近は作りたいものがあったのでWebのバックエンドを裏でコツコツ作ってましたが、その影響で長い間目に見える成果物のアウトプットがなかったため 短期間で簡単なアウトプットを出す には良い機会で、かつ作りたいものリストの中にちょうどいい題材があったため、2018年4月9日に 思い至って作ってみました。
寝るまでに完成させることが自分に与える規約でしたね（何でこの時期に一人ハッカソンみたいなことしてんのみたいなツッコミは無しで）。
作ったもの「TOKT」
Two Options Keep Track
（タイトル命名が酷く雑だ）
今までいろんな家計簿アプリを使ってきましたが、システムがガッチガチ 過ぎて１日でも抜けてしまうとやめちゃいたくなる現象が起きていました。
1日抜けてしまうとスタンプボードみたいなのに抜けが発生して嫌になり、嫌になって放置してから帰ってきても以前のデータが残っていて億劫になる……。
経験ありませんか？
この 「TOKT」 は「機能・入力に必要な情報をシンプル(Two Options)にし、かつ柔軟な使い方ができるようにすることで 入力の手間 による離脱を抑え 離脱からの復帰 がしやすくなり、家計簿をつけ続けられる」という流れを意識して機能を考えた家計簿アプリです。
記事タイトルにもなっているとおり、一度アクセスして表示してしまえば、たとえ機内モードにしても動作します。
もし使って頂ける方がいれば 「ホームに追加」 もしてみて下さい。
少なくともアンドロイドならiOSでも新しめのバージョンならネイティブアプリっぽく動く…はずです。
アプリ紹介とこだわり
ユーザーが「必要な出費」か「不要な出費(=無駄遣い)」かを判断 しながら出費を入力すると それぞれの値段と割合が可視化 されます。
また、ユーザーは任意のタイミングでリセット することも出来ます。
さらに、 入力画面ではテキストボックスに数式を入力できます 。
複数のレシートを別々に入力することは時間の浪費と考え、直接計算できるようにしました。
……改めて見るとUIデザインが酷いですね。
特に入力画面は時間あれば修正します。
実はTOKTを通してちょっとでも多くの人にPWAを知ってもらえたら満足だったりします。
まだあまり流行ってませんが、いつ爆発してもおかしくない技術 だと勝手に思ってますよ。
まあ、みんな使い始めると今度はローカルストレージの容量に問題が生まれそうで怖いですけど。
開発環境
プルリクにまともに文字を書いてなかったりとか、焦りがハッキリ見えたりします。
使ったライブラリはこんな感じです。全部npmライブラリです。
- Nuxt: Vueのフレームワーク。滑らかなページ遷移はこいつのおかげ。
- Vue: 変数の内容を表示内容に対応させるライブラリ。計算結果やグラフ表示に乱用。
- Vuex: ページ遷移しながらデータを保持するためのVue用ライブラリ。
- @nuxtjs/pwa NuxtでPWAを作るためのライブラリ。”厳密なキャッシュ管理”のほとんどをやってくれた。
- Bulma: CSSフレームワーク。使ってみようと思ったけど結局ボタンくらいしか使っていない。
- localForage: ローカルストレージに仮想的なDBを構築する。閉じたりリロードしたりしてもデータを保持できる。
嵌ったポイント
Vuexを用いたページ間のデータ保持とか滑らかなページ遷移とか、データバインディングとかは、経験したことがあったためそれなりにサラサラ書けました。
が、ローカルストレージに意図的にデータを格納し、それを呼び出すような処理 は使う技術の発見からガッツリ嵌ってました。
具体的には、@nuxtjs/pwaで利用している Cache API を一部直書きして使おうとしてもよく分からず、頭を抱えながらCache APIよりも確実なデータ保持ができるという IndexedDB に結構な時間をかけて到達しました。
でも書き方がややこしくて頭を抱え、最終的にIndexedDBを簡単に書くための localForage に行き着いた、という感じになります。
普段はWebページを作ることはあってもアプリケーションは滅多に作らないので、VuexとlocalForageのデータのやり取り やJavaScriptの処理順の入れ替わりなどに苦しめられました。
しかし、JavaScriptに慣れてきた影響で今抱えているWebサイト制作案件ではそれなりに柔軟にいろんな挑戦が出来ているので、技術を身につけるのも悪くない なと思っております。
最後に
なんかこう、最近は技術的なものづくりは頻繁にやってるのにデザイン、アート的なことはスランプ気味になっていてちょっとつらいです。
久しぶりにガッツリ音楽に時間を割きたい…と思ったら学校始まってるし、どうしたものか。時間が足りない！
といいつつ、4/22にちょっとアート的に大暴れする予定がある ので、無理にでも作曲に時間を割こうと思っています。
今の自分の環境は本当に恵まれてるので、出来る限りのことをやるとします。ではまた！
追伸
流石に、そろそろこのブログのテンプレートを真面目に弄ったほうが良いなって思いました。
（研究には関係のない）作りたいものとやりたいことが無限に増える日々、悪くないです。