Nuxt.jsを使ったPWAを個人開発してリリースした（概要編）

バーコードをスマホ画面に手軽に表示できるPWA「disp barcode」をリリースしました

経緯

バーコードをスマホ画面にさくっと表示できるアプリがほしい（仕事で必要）
・パソコン用のバーコード作成ソフトはあるけど印刷が面倒
・Web用もあるけど、スマホ表示に特化されておらず、使いにくい
・スマホのネイティブアプリは意外にない（バーコードリーダーばかり）

...よし、作ろう！

要件

• スマホ画面にバーコードを表示できる
• 最低限、以下の種類のバーコードへ対応する
• JAN（8桁、13桁）
• CODE128
• NW-7
• 作ったバーコードを保存しておき、後から手軽に呼び出せる

技術

ネイティブアプリ開発はしたことないし、審査も面倒だし、iOS向けは費用もかかる、、、

そうだ、PWAにしよう。
PWAなら、公開するのも使ってもらうのも敷居が低いので。

あとは、自分が使える技術で、なおかつイマドキのものということで、以下を選択。

• Vue.js
• HTMLとCSSの部分を宣言的に書けるのが好きです。
• Nuxt.js
• Vue.jsでPWAを作るならこれでしょう。
• Vuetify
• Vue.jsとの親和性が一番良いように思えます。
• Netlify
• 静的ホスティングならこれかなと。
• GitHub
• ド定番。¹

GitHubにpushしたらNetlifyが自動で拾ってdeployしてくれるので超便利です。

現時点ではPWAとしてフロントエンドだけで動作しています。

概要

Nuxt.jsのPWAで開発開始。
バーコード表示にはvue-barcodeというライブラリ²を活用。

v-inputとbarcodeをバインディングしてあげるだけでコアの部分は完成³。

あとは、localStorageを使って、アプリを終了させてもしばらくの間は⁴データを保存できるように工夫。

作業

細部は後日更新または別記事で書こうと思います。

• Nuxtで雛形を作る
• Githubに初期コミット
• ざっくりと動くところまで作り込む
• Netlifyに上げて、スマホ実機で動作確認できるようにする
• スマホのブラウザ（iPhone版Safari）で使えることを確認
• 「ホーム画面に追加」して、オフラインでも使えることを確認（機内モードで起動）
• ブラッシュアップ（localStorageを使った保存とか、一覧からの削除機能とか）
• 独自ドメイン取得
• 独自ドメインをNetlifyに設定（DNSはNetlifyのものを使用）
• PWAのURLを変更⁵
• 公式Twitter作成
• Vuetifyを2.0にアップデート⁶
• OGP画像を設定（Twitter用）
• リリース告知

#記事
dispbarcodeを実装している間に実験した部分的なスタディは、先行してQiitaの記事にしていたものもあります。関連記事としてご紹介します。⁷

• v-listの要素をCRUDするサンプルコード
• https://qiita.com/shozzy/items/059326ab1fd2a89f02f0
• タイトルバー付きでスクロールできるv-menu
• https://qiita.com/shozzy/items/290154a72a2662213935

これらの記事を書きながら学んだ内容は、dispbarcodeの「保存したバーコードの一覧表示部分」に活かされています！

#感想
初めての個人開発でのリリースでしたが、どのタイミングで、どこまで作った時点でリリースするかは非常に迷いました。

「完璧を目指すよりも、まずは終わらせろ」というザッカーバーグの名言や、「Minimum Viable Product」の考え方から、今回は最低限必要な「バーコードを作成、表示、保存、削除できる」機能を実装したことで当初の要件は達成できたので、リリースする覚悟を決めました。

まだ改良したい点はいくつもあるので、少しずつバージョンアップしていこうと考えています。

1. GitHub Flowを参考にしてfeatureブランチを切って作業しつつも、自分しかいないのでプルリクは使っていません。featureブランチでローカルで動作確認→stagingに入れて実機確認→masterへマージして本番環境へ。 ↩

2. JsBarcodeをVue.jsで使いやすくするためのラッパー ↩

3. データの桁数が増えたときに全体のレイアウトが崩れる問題が発生し、それを回避するのに結構手間取りました。$refを使って子要素を取得し、そのwidthを見てリサイズするなどして対応。 ↩

4. localStorageの内容は削除されてしまう可能性があります。履歴を削除した時とか。これを回避するにはサーバサイドへの保存も必要になりますが、それにはユーザか端末の識別が必要になるので、現時点では手を付けていません。 ↩

5. ドメインの直下はアプリではなく説明用のサイトにしたかったので。nuxt.config.js で base を設定すればOK（/app/とか）、、、と思いきや、うまく動かず。とりあえず、Nuxtの中でpages/app/index.vue にアプリ本体を移動し、pages/index.vue をランディングページにしました。（もっと良い解決策がありそう） ↩

6. 1.5系のv-layoutではなく、2.0系のv-rowを使わないとうまく表示できない場所がありました。 ↩

7. この記事にはコードが全く載っていませんが、紹介した記事にはちゃんとコードも入っています。 ↩