スポンサーリンク

日替わりランチアプリ紹介 ~Webアプリ編~

スポンサーリンク

前回の記事の続きで今回はWebアプリ編になります。
https://routecompass.net/dailylunch-server/

使用している技術

沢山使用していますが、大きなものは以下になります。

  • SPA
  • SSR
  • PWA

はい。最近流行りの技術を使っています。流行っていたので、使ってみました(ネイティブアプリを作りたくなかったのが大きいですが)。

Vue(Nuxt.js)でSSRは実装しています。最初とても難しいと思い込んでいましたが、実装することは大して難しくなかったです。Nuxt.jsさまさまです。

Lighthouseで開発中のスコア測ってみましたが、そこそこいいスコアでてます。私は特にスコアあげようと書いていないので、言語側でいい感じにやってくれてるんだなーと感動してます(AppEngineのinstance classがF2です)。

レイアウト

基本的にマテリアルデザインに任せています。

最初Onsen UIというCSS フレームワークを使っていましたが、大規模になっていくにつれて、使いにくさがいなめなかったので、Vuetifyというフレームワークに変更しました。

VuetifyはVue.js用のフレームワークということもあり、非常に使いやすいです。

Onsen UIで作っていた頑張りをここに残しておきます(お金の関係でなくなるかも)。

lunch-app
My posh Nuxt.js project

Onsen UIはもうちょい使う人増えて、機能も増えれば戻るかも。

モバイルアプリっぽく作れるし。扱いづらい以外は好きですね。

課題点

PWA使用することによって、Push通知機能を実装しているのですが、iOSが対応してなくて......

現状、PC, AndroidしかPush通知機能が実装されてません。

iOS対応するとなると、基本ネィティブで書き直すことになるので、いやだなぁと。

 

また、僕がWeb苦手というか、専門でないので、実装する時間が結構かかることですね。一緒に作る人募集してます。

 

The following two tabs change content below.

オーカワ

GCPばっか触ってるにゃーんエンジニア。 こちらのブログも書いてた。

←Twitterやってるよ。フォロバ率97%

コメント