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

https://dispbarcode.com/

経緯

バーコードをスマホ画面にさくっと表示できるアプリがほしい（仕事で必要）
・パソコン用のバーコード作成ソフトはあるけど印刷が面倒
・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」の考え方から、今回は最低限必要な「バーコードを作成、表示、保存、削除できる」機能を実装したことで当初の要件は達成できたので、リリースする覚悟を決めました。

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