このところ、node.jsのコードリーディングや写経、Arduinoに3Dプリンターとウェブから遠ざかってしまっていた。
というわけでウェブのリハビリに自サイトsiond.comを作った。
とはいえ、以前やっていたようなHTMLとSASSかいてトランスパイル…だとつまらないので、Vue CLIを試してみることに。
タイトルは「Vue CliとFirebaseでサイトを作った」だけど、いろいろ試したいことを盛り込んだら激重なサイトになってしまった。
まあ、これはこれでよしとする。
この手のサイトをVueとFirebaseでやる例はあまりないので、ハマった部分もあり且つなかなか出てきにくい情報もあるので、ここにメモする。
尚、長くなりそうなので続きものの体裁で進める。
例によって、それぞれの技術は深く掘り下げない方針なので、各々の技術はググったほうが幸せになれます。
アイディアをまとめる
このサイトを作ろうとした発端は、メール用のドメインがウェブに紐づいておらず且つ名刺にドメインが載っている以上、なにもページがないというのはまずいと思ったから。
事業の概要や内容、問い合わせなどページ分けする意義はあまり感じられないので、シンプルに1ページ構成とし、後で拡張できれば尚可、と考えた。
そして、せっかくなので自分が提供できるものをトップページで伝わるようにしたい。メインビジュアルはインタラクティブ性があり、3D表現など自分が得意な分野をアピールしたい。
以上から、採用しようとした技術はVue CLI、Vuetify、Three.js、WebWorker、Firebaseなど。
WebWorkerは、Stable Fluidsでのフォースマップ生成に利用している。これはGPUでやったら速いんだけど、そこはあえてWebWorkerで。
最初はフォースマップにパーリンノイズを使おうと考えたんだけど、インタラクティブ性と相性が悪くて諦めた。
いずれにせよノイズ生成や物理演算などは重い処理になる。いまどきのほとんどの端末はマルチスレッドで処理できるので、WebWorkerを試すよい機会だと考えた。
制作期間はザクっと5日と設定。たぶんですが、マイプロダクツだとしても期間を区切って臨んだ方が後々の経験となります。
短い期間で可能な3D表現を考える…3Dモデリングなどが関わると、それだけで2日3日と期間が削られるので、ありものの素材を利用しつつプリミティブなモデルで表現しよう、
ということで、よくあるパーティクル表現とした。パーティクルは前述したStable Fluidsで動かし、mousemoveでフォースを加えられるようにしよう。