dials.style開発日記の3回目です。この記事ではdials.styleを実現するために利用している技術の解説します。少し開発技術寄りな内容になります。

Vue.jsによる シングルページアプリ (SPA) と プログレッシブウェブアプリ (PWA) の実現

Vue.js Webサイト
Vue.jsはこちら（外部サイト）

dials.styleは有名なJavaScriptフレームワークのVue.jsで構築しています。選定理由は非常に貧弱で、「自分が使えるのがVue.jsだけだったから」です。。

SPAとPWA

ご存知だと思いますが、PWAとはスマホ等のネイティブアプリのように動くWebアプリのことです。SPAは元々iOSをはじめとするモバイルデバイスのネイティブアプリと似た構造もち、最近のSPAフレームワークではPWA構築をサポートしているものが多々あります。

Vue.jsもPWA構築に欠かせないService Workerをサポートしているので、PWA化の手間はほぼかかりませんでした。なんて便利な時代…！

dials.styleはスマホのホーム画面に追加してネイティブアプリのように使えるので、ぜひ試してみてください。iPhoneであれば、dials.styleを開いて、共有ボタンから「ホーム画面へ追加」を選ぶだけ。

p5.jsで文字盤表現

p5.js Webサイト
p5.jsはこちら（外部サイト）

dials.styleでは刻一刻と変化する文字盤をp5.jsで表現しています。

p5.jsは、Processingというグラフィクス表現に特化したプログラミング環境をブラウザ上で実行できるようJavaScriptライブラリ化されたものです。マイフレーム毎に出力するグラフィクス表現をJavaScriptで定義できるので、文字盤表現に適していました。

Processingは非常にシンプルに始めることができ、処理結果がグラフィクスで出力されるので、プログラミング学習にも非常に適していると思います。

Processingを用いてコンピューテーショナルデザインを学べる、「ジェネラティブ・アート―Processingによる実践ガイド」という書籍は非常にオススメです。是非お手に取ってみてください。

LocalStorageへデータ保存

バックエンドにDBを用意すると、途端にアプリの運用コストが跳ね上がります。dials.styleははじめから大量のデータ保存をする気がなかったので、クライアント側DBとも呼べるLocalStorageへデータ保存することにしました。

開いていた文字盤をアプリ終了後も引き継ぐためようデータ保存しています。いつデータが消されてしまっても大して支障ありません。

Netlifyで サイト配信 (ホスティング)

Netlify トップページ
Netlifyはこちら（外部サイト）

dials.styleはHTML・CSS・JavaScriptとブラウザのAPIのみで動く静的サイトです。Netlifyは単純なホスティングであれば無料で簡単なので、勉強も兼ねて利用してみました。

GitHubとデプロイ連携もできるので、開発者はコミット&プッシュするだけ。自動でアプリが更新されます。ぜひ皆さんも使ってみてください！感動しますよ。

余談ですが、このMaRRoNサイトのホスティングにはGitHub Pagesを使っています。

dials.style トップ画面
dials.styleはこちら（外部サイト）

参考文献

この記事の 最終更新：2022.6.20