掲示板お問い合わせランダムジャンプ

Navigation
FM安曇78.75MHz内で検索

エントリーナビ

2019年01月05日
Quasar導入
Vue.jsでUIをきれいに見せるためにはQuasarを使うといいらしい。
他にもいろいろあるだろうが、showcaseを見てこれだと思った。
Vue.jsでプロジェクト作ってから後付けでQuasarをつける方法もあるらしいのだが、今回PWAも後付けにしてmanifest.jsonをdistにコピーしたりしてたし1から作り直すことにした。
quasar-cliを入れてvue initの代わりにquasar initで作る。ここでpwaと指定したらpwaというフォルダができてしまった。ドイツ語サイトだから正しいとは限らない。PWA化はビルド時に-m pwaで指定するのだそうだ。
quasar devでとりあえずサンプルが立ち上がる。いきなりFirebaseと合わせるのは怖いしまずはQuasarで慣れることから始める。
Vue.jsでメインだったcomponentsは使わずlayoutとpagesを使う。
MyLayout.vueはサイドメニュー、pagesの下はメインページになるようだ。
routerもroutesのpathは/だけでchildrenの下に他のページを指定するらしい。まずは公式のチャットを入れてみる。
componentsに足りないものも多いのでquasar.conf.jsを都度編集することになる。manifestの内容もここに書くらしい。
まずはQChatMessageを追加。
一通り動かしてみて既に作っているメッセージに追加する項目などを押さえておく。textにはArrayを指定しないとうまくいかない。
基本を押さえたところでまたquasar initから始める。後からfirebase initをしてpackage.jsonなど設定が消えてないか確認。既にあるプロジェクトを指定したのでdatabase.rules.jsonは引き継がれていた。
サンプルではMyLayout.vueから外部に飛んでいたのでわからなかったが、画面遷移は$router.pushを指定する。
今回は画面を増やし、ログイン画面、メイン画面、ビデオ通話画面、テキストチャット画面、ユーザー登録情報表示画面、アプリ紹介画面とした。全部routes.jsのchildrenに指定するのだが、デフォルトでついてこないnameを指定するといいと思う。
ログイン画面はJumbotronを使用。背景画像が使えればよかったが、どこかから持ってこなくてはならないらしい。githubのzipに入ってるの使っていいのか迷った。
メイン画面はログイン中のユーザー一覧と最新メッセージ5件のみにした。全部取ってきてorderByChild、limitToLastでフィルタリング。
手持ちのものではこれで画面いっぱいでちょうどよかったが他の人の環境だとどうだかわからない。
あとログアウトボタン。
ビデオ通話画面。メイン画面からpeerオブジェクトもらってこの画面に移動したvideoのstreamを表示させるのだが、タイミングを間違えそうになった。getUserMediaのthenの後でないとstreamが取れない。
簡単なアプリなのでVuexを使わずパラメータ渡しにしたのだが、route.paramsで取れない。this.$route.paramsとしなくてはならないらしい。thisを忘れるとエラーで落ちる。
カードレイアウトにして、相手の画像の下に名前、自分の画像は小さめにした。通話終了ボタンもつける。
通話が終わればメイン画面へ。this.$router.pushで移動するが、thisは必須。
チャット画面。そのまま作るとメッセージ入力が消えるので固定したいのだが、q-page-stickyだと小さすぎる。
ここで躓きたくないのでとりあえずposition:fixedのdivにしておく。
最後のメッセージと被るので隙間用のdivも追加。
ページの先頭にスクロールさせるボタンもつけたが、メッセージを入力したら一番下に移動したい。こちらも今後の課題にしよう。できたはずだが忘れた。
ユーザー登録画面。本来ならアバターアイコンとかGoogleの表示名以外のハンドル名を設定したかった。時間がないのでログイン時に登録した内容を表示。
アプリ紹介画面もCardレイアウト使った。
これで大体完成かな。
[ 投稿者:りっく at 15:57 | りっくの日記 | コメント(0) | トラックバック(0) ]