Google Apps ScriptでVuetify3を検証する【GAS】

前回、Vue3の検証を行いました。軽く触った感じではとりあえずは何とかなりそう。しかし、Vue.jsだけではウェブアプリは作れません。GUIフレームワークが必要です。2022年11月1日、Vue3に遅れてVuetify3がリリースされました。

ただし、Vuetify2よりもGUIコンポーネントはまだまだ少ないのと知見が全然足りない状況である点、ウェブを見た限りでは大きな変更も多い印象で、Vue.jsのように簡単に移行出来るのかどうか?見ていきたいと思います。

Google Apps ScriptでVuetify v2を使ってUIを作る【GAS】

目次

今回利用するスプレッドシート

現時点でホームページに日本語の翻訳資料が掲載されておらず(v2は日本語が用意されてるのに)、いくつかの重要なコンポーネントが存在していないという有様なのと、Vue3の破壊的変更についてこれずに他のライブラリも移行が進まずという現状が垣間見れます。Vue3に関しては以下の記事を参考にしてみてください。

Google Apps ScriptでVue3を検証してみた【GAS】

Vuetify3の利用上の注意点

利用するCDNのファイル

リリースされたとは言え、現状ではコンポーネントの数が半分程度しか揃っておらず、BetaリリースのLabsで提供されてるものが一部ある状態で、正直な所メインで利用できるか?といったらかなり疑問符がつく状況。これもVue3移行が怪しいと言われてしまってる理由の1つで、故に足踏みせざるを得ない状況です。

Labsのコードはテスト目的利用のみとし、本番環境では使わないようにと注釈がある状態です。しかし、今回Vuetify2との比較という事もあるため、そこを踏まえた上で記述する事になります。今回は以下のライブラリを参照で使います。また、MaterialDesignIconも必要となるので、以下のライブラリをVue3のライブラリの後に読み込みます。

破壊的変更

Vue3同様にというか、Vue3よりもかなり大規模に破壊的変更が入っています。また準備中のコンポーネントもある為、これまでのものをそっくり移植するといった事は難しいでしょう。こちらに移行ガイドがありますが、1個ずつ確認しながらの作業になると思います。

基本スタイルの変更

これまでは、Vueを定義した中にVuetifyがいるといった状態で記述してきました。しかし、Vuetify3からはVue3の変更に伴って以下のような大きな変更になっています。

これまでの書き方は以下の通り

しかし、Vuetify3ではVue3同様にまずは冒頭で初期化してから、useにて読み込む形になります(Vue2時代のプラグインの読み込みと同じ方式)

Vue3でcreateAppで変数に格納後、それに対してuseにて別途用意しておいたvuetify変数を格納し、最期にmountにて反映するというフローです。useとmountはcreateAppにチェーンメソッドで繋げて

としても動作します。

スタイルの指定方法の変更

各コンポーネントのスタイルを指定するpropですが、これまでは例えば、smallだとかoutlinedだとか、いきなりタグの中で書いていたかと思いますが、他のプロパティ同様に「項目名=xxxx」といった指定方法に統一されました(一部はなぜか残ってるけど)。

例えばボタンに対するプロパティ指定の事例で言えば以下の通りになります。

図:sizeやvariantでデザイン指定する

ヘルパークラスが変更されてる

前述のスタイル関係のプロパティ以外にも、classで指定してレスポンシブにサイズを変更するなどでよく使ってる「ヘルパークラス」に関しても変更が入っています。例えば、v-card-titleなどはこれまでflexboxとして描画されていましたが、Vuetify3からはdisplay:blockとして描画されているので、センタリングする為に「justify-center」を使っているのであれば、「d-flex」も追加が必要になっています。

但しスペーシングのヘルパークラス(paddingやmarginを設定するもの。pa-6といったクラス名)は変更が無いようです。但し、変更が無いだけで挙動が変更されてる場合も大いにあり得るので微調整は必要かと思います。

ES6コードでimport

GASではimport文といったES6での書き方はできませんが、HTML側では特殊な書き方をする事でES6スタイルでVue3およびVuetify3をImport文とES6の書き方で導入することが可能です。まだ、ES6の書き方はChrome等一部のブラウザのみでしか対応していないので、別途ES Module Shimsを導入して使えるようにします。利用するCDNのライブラリはesmと記述のあるライブラリになります(Vuetifyのesmモジュールはこちら)

上記の状態で既にimportで取り込みが完了してるので、後はVueやVuetifyのページで書かれてるようなES6での構文でも記述が可能になります。あとは、vueとvuetifyを初期化してES6でコードを記述することが可能です。

  • type="module"でES6での構文を利用することが可能です。
  • import文でVueおよびVuetifyをロードします。

Vuetify3の実装例

Vuetify2と異なり、コンポーネントが少ない上に、かなり大幅に変更が随所に入ってる為、既存のv2のコンポーネントのタグをそのまま動かすことは出来ません。よって、1個ずつ確認しながら実装する事になります。特に前述のプロパティの指定方法やヘルパークラスなどが変わっている為、苦労する事になります。

今回は自分がよく使ってるコンポーネントについて検証をしてみます。

Appbar

アプリケーション上部のナビゲーションバーです。これまでは色々とプロパティやらクラスやら指定して、v-mainが被らないようにしたりといった小細工が必要だった部分が随分と素直になっています。v-mainおよびv-sheetを併用するのは変わらないですが、これまでよりは扱いやすくなっています。

HTML側コード

  • shrink-on-scrollの代わりにscroll-behaviorとscroll-thresholdの2つを指定して、どれくらいスクロールしたらバーを縮小するかを指定可能になりました。
  • デフォルトで特にヘルパークラスを使わなくても、v-mainで括っておけばスクロール時にコンテンツ部分がバーとバッティングすることがなくなりました。
  • v-btnのiconプロパティにMaterialDesignIconを指定して、ツールバーのボタンを表示可能です
  • それ以外はこれまでとほとんど変わっていません。
  • 今回のケースではJS側で特に何もやることがありません。

図:ツールバーは結構素直に実装出来た

Navigation drawers

前述のアプリケーションのツールバーと併用するであろう「サイドバーことナビゲーションドロワー」。v-app-bar-nav-iconにアクションを割り当てて、ドロワーのオンオフを行います。v2の際には結構小技を加えていました(項目をクリックしたらドロワーをsetTimeoutで自動で閉じるなど)。v-listなどと併用して構築することになります。

JS側コード

  • ドロワーのリストはitems変数に今回は二次元配列で格納しています(アイコン等を表示したい為)
  • 基本的な項目はVuetify2の時とほとんど変わりません。
  • v-list-itemをクリックしても、drawerは閉じないので、setTimeoutにて自動的に閉じるようにonListChange関数に追記しています。

HTML側コード

  • Drawerは結構随所に変更と修正が入ってる感じです。
  • これまでDrawerの背景画像はsrcで指定していましたが、Vuetify3ではimageにて指定するようになりました。
  • Drawerのフォント色はv-list-itemではなくv-navigation-drawer側に指定します。
  • これまではアイコン表示の為に別にv-list-item-iconで定義していたものは、v-list-itemの中のprepend-iconで指定するように統合されました。
  • v-forで回す場合動的にプロパティに変数値を入れるので、:prepend-iconという形で指定してv-forの値を格納するとリストが生成されます。
  • 以前はCSSのz-indexでnavigation drawerがv-app-barよりも手前に表示するように調整していましたが、Vuetify3ではDrawerを先に書いてからv-app-barを後に書くだけで、サイドバーが最前面表示になります。

図:無事に理想のサイドバーが出来上がった

Snackbar

いちいちアラートメッセージをダイアログや通知を表示して、ユーザに何か作業をさせようとするのは具合が悪い。ということで使う一般的にToastと呼ばれる小さなメッセージボックスがSnackbarで、Vuetify3でも健在です。自分もアプリで頻繁に使いますが仕組みがとっても単純です。

但し、Vuetify2ではfullscreen Dialog表示中にSnackbarの閉じるをクリックすると、Dialogまで閉じるという不可解な挙動があったりして、回避策が必要でした。

JS側コード

  • 殆ど、Vuetify2の時代と変わらず。
  • snackman関数で文字と表示のオンを指定しています。

HTML側コード

  • v-btnをクリックすると、snackman関数を動作させて、snackbarを表示するようにしています。
  • :timeoutで自動で表示が消えるミリセカンドの秒数のプロパティを指定します。snackbar変数のtrue,falseでオンオフ切り替え
  • 殆ど修正する内容が無く、動作させることが出来ました。

図:変わらず利用できました。

Dialog

Vuetify3に於いてもダイアログ関係は健在ですが、多少機能拡張されてる面があったり、Vuetify2では存在した謎の不具合などが解消されています。基本的なスタイルは変わらないです。以前あった、ダイアログ表示時にテキストボックスに文字を入れてボタンを押し、Alertを出した後に再度テキストボックスを触ろうとすると、入力が出来なくなるといった問題が修正されています。

JS側コード

  • 基本的には大きな変更はなし。これまでのスタイルで記述が可能です。

HTML側コード

  • persistentのプロパティはそのまま(ダイアログの外部をクリックしても閉じさせない為のプロパティ)
  • activatorにて#menu-popupを指定するとポップアップダイアログとなる。
  • v-btnの内側にdialogタグを追加できるようになっており、その場合、activatorはparentを指定する。するとコマンド無でdialogがtrueとなる
  • 但し、FullscreenなDialog表示後にsnackbarを表示=>閉じるをクリックするとDialogまで閉じてしまうバグは健在。(persistent追加で回避できる)
  • Fullscreenなダイアログの場合はactivatorは付与しない。
  • v-card-actionsは必ずダイアログの下部に追加されるようになります。

図:ダイアログ関係は本当によく使う

selectbox

前述までに出ていたv-btnなどのフォームコンポーネントの1つであるドロップダウンリストであるv-select。JSON形式でラベル・値・表示名等を指定しつつ、選択時の返り値をどうするか?など結構嵌りポイントも多い部品です。

JS側コード

  • JS側はこれまでとあまり変わり無し。readpropは今回はreturn-objectとしてるのでJSONオブジェクトが返ってくる

HTML側コード

  • v-modelで連結先はfuninsakiとしてある
  • 値の塊は:itemsとしてitemsを指定。この値は配列ではなくJSONオブジェクトの配列を指定してある
  • item-textではなくitem-titleに変更されてる(これが選択リストの一覧に出てくる)
  • item-valueで選択時に選ぶ項目をJSONオブジェクトのid項目に指定
  • return-objectとしてるのでitem-valueではなく選択されたJSONオブジェクトが返る(無い場合はitem-valueが返却される)
  • 選択時にイベント発火はこれまで、v-on:changeでしたが、これが@update:model-valueに変更。GASで使う場合はウェブ上で書かれてるような@update:modelValueではないので注意(この辺の説明がほとんどされていないのがVue3の問題点)
  • 他の注意点はこれまでと同じ

図:表示はname, 値はidが選択される

Validation

form内容の値のチェックをする為のvalidation機能。送信前に内容をチェックするのに正規表現等を用いてチェックをし、入力ルールに従っていない場合には送信を阻止するために重要な仕組みです。

JS側コード

  • 変更点は、v-formのrefのチェックを行うsaverecordのコードに於いて、async/awaitで同期的に処理が必要になった点。
  • resetやresetValidationは依然として利用可能です。
  • ruleの作成方法に特に変更点はありません。

HTML側コード

  • 2つのテキストボックスに:rulesで必要なルールをセットします。
  • @clickにてそれぞれのボタンに対して関数をセット。validationチェック自体は関数側で行う
  • v-formにてrefを設定し、関数側でthis.$refs.formman.validateにて一括で入力内容のチェックを行わせます。

図:入力内容チェックが働きました

まだ正式版じゃないコンポーネント

Vuetifyで当たり前のように使っていたコンポーネントのうち、いくつかがまだ正式版としてリリースされていない状態にあります。その中で最もよく使われていたものについて現状の対応状況を調査してみました。

ロードするライブラリ

公式サイトや数々のブログで、Labsのライブラリのロードに関して、その殆どがimport構文でローカルのライブラリを導入する事しか記述がなく、こういった点が衰退を招くポイントになっていたりします。調べてみたところ、LabsのコードをCDNのライブラリからロードして使う場合には、標準のCDNライブラリではなく、以下のlabsの文字が入ったライブラリに差し替えて利用する必要があります。

GASでは通常CDNからの利用しか出来ませんので、上記の点は大きな嵌りポイントになってるので要注意です。

Table

概要

Vuetify3でスプレッドシートのデータをレコードとして列挙する「v-data-table」ですが、2023年7月現在実はこの非常に重要な機能がまだ正式版ではなくLabsという項目に属しており、一応使えるもののベータ版?ともいえる状態であるため、プロダクトには使えない状態です。V-tableという簡易的なものはあるのですが、非常に低機能であるので、これまでのものを移植しようとすると躓くVuetify3の大きな問題点の1つです。

※VueプラグインのCheetah GridについてはVue3対応はしていない様子(もともとVue.js対応が弱かったので今後は自分は使わないかも)。ag-grid-vue3がvue3に対応してるので、高速な表示はこっちを推奨です。

※旧Vuetify2のv-data-tableに似た構造のvue3-easy-data-tableというコンポーネントもリリースされています。

※現在最新版はレスポンシブ対応ができていない状況のようで。3.3.9でも正式にリリースできていないのが・・・・

標準的な使い方

JS側コード

  • headerのtextはtitleに、valueはkeyに変更されているので要注意。
  • これまで数値の右揃えは非常に手間だったのが、alignのendで右揃えになるように追加されています。
  • 値を格納する変数に関しては特に大きな変更点は標準的な利用では見当たらず
HTML側コード

  • 表示件数を指定するitem-per-pageがv-modelでの指定に変更されています。-1を指定すれば常に全件表示になります。

図:参照するCDNが異なるので注意

これまで装備してきたものを検証

ヘッダの固定と高さ指定

全件表示して、v-data-tableの高さを固定化し、スクロールで見ていくスタイルの場合、オプションのプロパティや変数をこれまでも用意してきましたが、これらはVuetify3でも変わらず利用が可能になっています。

  • :heightで高さの数値を入れてある変数を指定する(リサイズ時はここを適正にすれば良い)
  • fix-headerプロパティを入れればスクロールしても、ヘッダーはスクロールせず固定化が出来る
アクションを追加

各レコードに対するアクションボタンを追加するのも非常によく利用します。こちらはiconのプロパティの指定の仕方が変わっている点を除けば、そこまで大きな変更はありません。

  • iconプロパティ内でmdiの値を指定すればmaterialiconが表示される。
  • sizeプロパティでsmallとすればこれまでと同じような表示になります。

図:これまでのようなアクションボタンも追加可能

特定の値に対してハイパーリンクを貼る

v-data-tableの特定の列の値に対してハイパーリンクを張る場合、元データの値を使って自動的に実現したいです。しかし、Vuetify2とは若干異なる点があり、ちょっと苦労しましたが、調べてみたところ、以下のようなコードでハイパーリンクを貼れるようになります。dessertsデータにはurlとして各レコードにURLを入れています。

  • 前述のアクションボタンのようにv-slot:item.urlにてまずはitemを取得させる
  • itemに直接レコードが入っているのではなく、selectable項目内にいるので、その値を取得させる。:hrefでバインディング

同じようなテクニックを応用すれば、関数を使っての文字数制限表示やclassを使った特定文字の場合のフォントカラー変更なども可能だと思われます。

図:ハイパーリンクも設定できました

多数のレコードを表示用の新機能

ただ単純にこれまでのVuetify2を踏襲してるだけでなく、これまで多くのデータをv-data-tableで表示させた場合、激重になるケースに対する対応策として、新機能である「Virtual Tables」という機能も追加されています。ページネーションは無いですが、並び替えとフィルタをサポートしており、ごく一部のレコードだけレンダリングするようにすることで、大規模データであっても、表示が重くならないという話です。

まだ試していないのですが、いずれ大規模データで実験をしてみたいと思います。

Date Picker

概要

これまた非常によく利用するであろう日付ピッカーのモジュールも驚くべきことにまだ正式対応していないコンポーネントです。見切り発車感が強い感じがこういった点から感じられます。そのため、一般利用となるとVueのプラグインであるVue3 Date Pickerを使うケースで対応してる人が多いようです。とはいえ、もともとVuetifyの日付ピッカー他タイムピッカーも含めてこの手のコンポーネントとっても弱くて、サードパーティのモジュール使う機会が多かったように思えます。

CSS

  • 日付の土曜日と日曜日だけ色を青と赤に変えたい場合のCSSです。

HTML側コード

  • localeはv-locale-providerでjpを指定すると日本語化が出来るけれど、相変わらず「日」が付いてくる
  • しかもこれまでの「日」を削りとるdate-formatオプションが無いので、関数で削ることが出来ないという・・・
  • ok-textやcancel-text, titleを設定すると日本語化出来る

図:完成度がちょっとよろしくない

Vueプラグインで対応する

前述の未完成コンポーネントではプロダクトを作るのはちょっとアレな状態なので、VuetifyではなくVue3のプラグインモジュールを使って実装をするパターンです。これまでだと、vue.use(コンポーネント名)といったような形でロードしてから使っていたと思いますが、Vue3からは少々異なってるので注意が必要。

以下の事例はVue3DatePickerを使って日付ピッカーを装備する事例になります。

Vue3DatePicker

CDNライブラリをロードする

Vuetifyではなくサードパーティのライブラリで且つ、Vue3のプラグインとなるので、まずはそれらをロードする必要があります。

JSライブラリはvue3の次に読み込むようにし、CSSはHead内でロードしておきます。

コンポーネント登録

Vueにロードしておいたコンポーネントを登録します。以下のようにcreateAppでcomponentとして登録します。date変数だけdataに追加しておきます。

HTML側コード

HTML側にDatePickerを表示するのはとっても簡単。以下のタグを追加するだけです。

  • 選択時の日付の形式をformat関数にて修正しています
  • localeにてjaを選択すれば日本語表記になり、また余計な日などは付きません。
  • 他にもいろいろ機能が備わってるので、これ一本で日付や時間関係はカバーできます。
  • week-startが0で日曜日からの開始になります。
  • 但し、土日だけフォント色を変えるのが出来なかった・・・

図:Veutify3のモジュールより出来が良い

ag-grid-vue3

CDNライブラリをロードする

v-data-tableの代わりとして、高機能で高速なAgGridのVue3対応版を使ってみることにしました。但しこのコンポーネントは単一コンポーネントで使われることが前提且つimportでモジュールを追加する必要があり、単純にライブラリを参照で追加しても動作しません。またいくつかの別のモジュールも必要です。公式リファレンスはこちら。過去にノーマルのag-gridを使ったケースは以下のエントリーで記述しています。

Google Apps Scriptでag-gridを使ってみる【GAS】

さらにag-grid-community.min.jsとag-grid-vue3のバージョンも合わせる必要があるため、今回は30.0.5のCDN版を利用しました。

vue.jsより下にて、前述のES6のimportmapを利用する仕組みを使ってimportを行います。

コンポーネント登録

今回はVueとVuetifyはそれぞれ通常法方法でロードしていますが、ag-grid-vue3がimportで取り込んでる為、type="module"にてコンポーネントの登録を行う必要があります。

  • import文にてAgGridVueを取り込みます。
  • createApp内のcomponentsに於いて、取り込んだAgGridVueを登録します。

HTML側コード

また、GASのウェブアプリで利用する場合、公式サイトやブログなどに記述されてるような書き方(キャメルケース)では、データやヘッダの入ったcolumnDefsやrowDataをカスタムタグに割り当てても読み込むことが出来ません。必ず、ケバブケースの書き方でプロパティを書く必要があるため要注意です。

  • カスタムタグはag-grid-vueを利用し:rowDataは:row-data、:columnDefsは:column-defsとケバブケースでプロパティをセットします。
  • ここで使っていないプロパティに関してもキャメルケースで書かれてる資料がほとんどなので、ケバブケースでの書き方にするようにしましょう。イベント等に於いても同様です。

図:なんとか利用できました

6万件データ表示

前回のag-gridの記事でも利用した6万件データをスプレッドシート側から引っ張ってきて、ag-grid-vue3に突っ込んで表示してみました。7列6万件のデータで、おおよそスクリプト実行から10秒で表示され、表示後のスクロールやソートなども非常に高速でモタつくことがありません。従来のVuetify2のv-data-tableだとスクロールのたびに重たくなっていたのですが、今回はVue3対応でこの出来ですので、大量のデータを取り扱う場合には、ag-grid-vue3は非常に最適な選択肢と言えます。

今回は、2列目まで固定し、他の列はリサイズ可、ソートも可という設定値を施してあります。サンプルページはこちらになります。

図:ビッグデータ表示も難なく可能

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。