2019/11/28はじめてのVuetify(ログインページ作成で使い方学ぶ)Vuetifyがどのようなものなのか確認するために、Vuefity公式ホームページにリンクされている動画を参考に動作確認を行なってみたいと思います。Vuetifyはマテリアルデザインを元に作られているので、デザイン性の優れたページを簡単に作成することができます。簡単かどうかは個人差があるので実際にログインページを作成して、Vuetifyがどのようなものか確認してみましょう。vue-cliでプロジェクトを作成するので、事前にvue-cliをインストールしておく必要があります。本文書ではvuetifyを使用して以下のログイン画面を作成します。作成後のログイン画面プロジェクトの作成vueコマンドを使ってプロジェクトの作成を行います。名前は任意なのでここではvuetify-firstとしています。createコマンドを実行するとプリセットを聞かれるので、dafaultを選択します。addコマンドを使ってvuetifyのインストールを行います。vuetifyでもプリセットを聞かれるのでDefaultを選択します。them.インストールを行うとインストールメッセージにあるようにsrc/assets/log.svgを含む8つのファイルが更新されます。serveコマンドを実行します。build.実行後、コンパイルが行われ、成功するとhttp://localhost:8080/にブラウザでアクセスすると下記の画面が表示されます。vuetifyの初期ページインストールディレクトリの中にあるmain.jsファイルを確認するとvuetifyのモジュールが読み込まれていることがわかります。前準備Welcomeページで表示されている内容は、src¥App.vueに記述されているので中身を確認してみてください。v-spacerタグなどVuefityに関連するタグが多数記述されていることがわかります。今回はスクラッチから作成するのでv-appタグを残してすべて削除します。Vuefityではv-XXXとXXXの名前のついたUIコンポーネント単位で設定を行ないます。ボタンもinput要素も個別のコンポーネントが準備されておりv-btnやv-text-field等の名前がつけられています。これらのUIコンポーネントの情報はすべて公式ホームページのマニュアルに掲載されています。実際にVuetifyでデザインを行う際はマニュアルを見ながら使用方法を確認することになります。v-ifなどv-ディレクティブはvue.js、v-appやa-spacerはvuetifyによって使用されるコンポーネントです。ログインページの作成はApp.vueファイルが下記の状態から行っていきます。id=”app”>と同様にページに必ず一つ必要なvuetifyコンポーネントです。}),};</script>上記内容でApp.vueファイルを保存するとtemplateタグにv-appタグ以外何も設定されていないので、http:://localhost:8080にアクセスしても何も表示されません。ログインページの作成ログインページを作成するためにv-cardコンポーネントを追加します。v-cardコンポーネントを利用すれば下記のような汎用的なデザインを作成することができます。v-card-textとv-card-actionsの3つの基本コンポーネントがあるのでそれらを利用します。v-card、v-card-titleコンポーネントを追加して、h1タグの中に文字列ログインを入力します。h1に設定されているclassのdisplay-1は文字の大きさを設定するclassです。この他にもdisplay-2,3,4があり大きくなるほど、文字も拡大されます。VuetifyではコンポーネントだけではなくCSSのクラスもインストールされています。</v-card></v-app>ブラウザでどのように表示されるか確認しておきましょう。次にv-card-textコンポーネントの中にv-formとv-text-fieldコンポーネントを追加します。追加するとinput要素が表示されます。</v-card></v-app>ここまでの設定で下記のようにユーザ名とパスワードを入力する欄を作成することができます。入力欄にカーソルが入ると色が代わり、ユーザ名というラベル文字も小さくなります。上記のようにパスワードを入力すると文字が表示されてしますので、type属性を追加します。/>入力したパスワードの入力文字がテキストのまま表示されなくなりました。パスワードテキスト非表示v-card-actionsコンポーネントの中にv-btnコンポーネントを追加し、ログインボタンを作成します。</v-card-actions></v-form>ログインボタンを追加UIを良くするためにアイコンを追加します。v-text-fieldにprepend-iconを追加し、アイコンの名前を入力します。Iconsを利用しており、iライブラリがインストールされているのでそのまま使用することができます。パスワードにはmdi-lockアイコンを設定します。/>;アイコン設定prepend-iconで先頭にアイコンを設定しましたが、後ろ側に設定する場合はappend-iconを利用します。パスワードが見えないアイコン(eye-off-icon)を追加します。/>パスワードeye-offアイコンボタンのカラーも下記のようにcolorを使って変更することができます。infoの他にsuccess,dangerなどを設定することが可能で設定するとボタンの色が変わります。class="info">ログイン</v-btn>ログイン画面が全体に広がっていますが、widthとclassを利用して幅やマージンを設定することができます。mx-autoやmt-5のクラスもvuetifyと一緒にインストールされています。以上の設定によってログイン画面を作成することができました。Vuetifyを使うとUIの優れた画面を効率的に作成できることがわかります。vue.jsによる制御ここまでの設定はすべてvuefityの設定でした。今後はvue.jsを使ってパスワードのeye-offアイコンを制御して、アイコンをクリックすることでパスワードに入れたテキストを確認できるようにしましょう。オン、オフを切り替えるためにshowPasswordプロパティを追加します。falseに切り替わることでパスワードの入力文字がテキスト表示になるか切り替えます。showPasswordプロパティを追加します。})};showPasswordプロパティによって属性typeがtextとpasswordに切り替わるようにtypeにv-bind設定します。falseに交互に切り替えられるようにclickイベントを追加します。入力したパスワードがテキストで見えるようになりますが、右にあるアイコンはeye-offアイコンのままでアイコンではパスワードが見えないことになっています。eye-offアイコンをクリックするパスワードが見えるeye-offアイコンも切り替わるようにv-bindの設定を行います。mdi-eye-offとmdi-eyeがアイコンをクリックすると交互に切り替わります。/>eyeアイコンも連動Vuetifyだけではなくvue.jsも連携させてログイン画面を作成することができました。