Vuetify

ぬるさく画面に再チャレンジ

以前Nuxt.js と Python でつくるぬるさく AI アプリ開発入門 途中で分からなくなってしまい中断していましたが、改めてやってみようと思います。 まずは、Vuetifyのスライダーでの入力画面と、amChartsのグラフ表示。 router-linkによるメニュー追加 現在、v-navigation-drawer > v-list > router-linkという階層で、メニューを作っており、、、が並んでいる状態で、ここに、を追加したいと思います。 そして、こんなものは、単にコピペーして、文字変えれば良いのではと思ったのですが、なかなか反応してくれません。 結構調べましたが、解消せず。最後の最後に、再起動(docker-compose down、 docker-compose up -d)を行ったら見事(?)反映されました。 Vuetify Slider コンポーネント 前回はスッキリ行きませんでしたが、今回はこれはあっさりできました。 components/FormCard.vue <template <v-card class=“ma-2 pa-1” <div class=“subheading” Heading </div <div class=“caption” 1/11 </div <v-slider class=“px-5 pt-5 pb-3” thumb-label=“always” height=“3” hide-details</v-slider </v-card </template <script lang=“ts” import Vue from ‘vue’ export default Vue.extend({ }) </script pages/wine/index.vue <template <v-layout column <form-card v-for=“i in 11” :key="'${i}'"</form-card <v-btn @click=“submit"診断結果を表示する</v-btn </v-layout </template <script lang=”

Firebase ユーザ認証機能を利用する

今回もこちらの続き。Vuetify の基本 今回も参考はこちら。 Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial – Part 5/5 – ユーザ認証の追加] https://note.mu/tkugimot/n/n80c2e4b33bbc で、ちょっと時間が空いてしまい、始める前に気づいたら、エラーが出ている。 This dependency was not found: nuxt_plugin_bootstrapvue_69bcb01f in ./.nuxt/index.js To install it, you can run: npm install –save nuxt_plugin_bootstrapvue_69bcb01f 書いてある通りnpm installしてもNot Foundと言われるだけ。 しかし、 docker-compose down docker-compose up -d で復旧。なんのこっちゃ。 Firebase Authentication機能の利用 手順としては、まず、package.jsonにfirebaseの記述を追加して、npm updateを実行するところから始まるのですが、ここで早速大量エラー。 概ねこんな感じ。 Can’t find Python executable “python”, you can set the PYTHON env variable. Failed at the grpc@1.20.0 install script. This is probably not a problem with npm.

Vuetify の基本

Nuxt.jsでTodoList機能を作りながら、Vuetifyの基本を学習。 こちらを参考に、進めています。 https://note.mu/tkugimot/n/n47218fd1eec5 なんとか自力で問題解決できたので、既存のアプリに機能追加する形で動かすことができました。 上記サイトでは、次に、デザインを整えることになります。で、そこではbulmaを使っているのですが、できればあれこれ手を広げたくないので、Vuetifyで作ってみることにします。 全体デザインについて、上記サイトでは、「ヒーロー」というパターンを使っています。「ヒーロー」なんていうデザインのパターンがあるのですね。 簡単にVuetifyでもそんな指定ができたら良いかと思いましたが、そういう名前のものがあるわけではなさそう、かつ、メニュー構造は必要なので、Vuetify公式サイトのレイアウトサンプルから選択することにし、一番基本的な「Baseline」を使ってみることにします。 https://vuetifyjs.com/ja/framework/pre-made-layouts 最初は、部分的に移植しようと思いましたが、それだとレイアウト崩れが発生してしまうため、逆に、いったん、layouts/default.vueを書き換えてしまってから、必要な部分を戻す、という形にしました。 また、Todoの一覧表示のところに関しても、bulmaを使用していると思われるため、そのままではなく、各詳細情報は、v-cardを使用するようにしました。これも、サンプルメージを参考にしてなんとかなったような、なってないようなです。(幅指定がよくわからない・・・) また、テキスト入力欄も、v-text-fieldを使用して、プレースホルダよりラベル表示の方が面白いと思い、それで作りました。 なお、入力位に自動でイベントを発生させる際に、このやり方だと日本語変換確定のEnterでも反応してしまって本当は良くありません。 下記のサイトに記載の通りですが、今はここは対応保留としておきます。 [Vue.js] 日本語変換の確定でkeyup.enterが発火してしまうのを防ぐhttps://qiita.com/h-orito/items/6d99e2256074132d7867 カードの並べ方等、もう少し綺麗にできたら良いのでしょうが、一旦これで、次に進みます。