Google Apps Scriptは、HTML ServiceでウェブアプリケーションやスプレッドシートのダイアログのUIを構築可能です。しかし、標準ではUIを構築する為のライブラリやフレームワークを備えていないので、ユーザ自身が好きなフレームワークを導入して、HTML上に構築する必要があります。
自分は過去に、Google Apps Scriptのアプリをスマフォ向けとしては、framework7を使ってUIを構築しました。いずれ、framework7のまとめも作ってみたいと思います。今回はPC向けサイトとしてVuetifyを使って構築してみたいと思います。随時、自分がパーツを使うシーンがあれば、ここに追記していきたい。
図：現在作成中のElectronアプリでも使ってます
難易度：
リンク
目次
今回使用するライブラリ等
VuetifyはVue.jsのUIフレームワークになるので（ちょうど、jQueryとjQuery UIの関係になる）、Vue.jsも利用する必要があります。
事前準備
ウェブ上で公開されてる事前準備では、vueファイルの作成であったり、vue-cliを使うためにnpmでインストールといったような説明書きをよく見かけますが、そもそもjQuery同様にvue.jsやvuetifyは単独で利用出来るようになっているので、あの手順にしたがってプロジェクトを作る必要性はありません。また、Google Apps Scriptでは当然vueファイルやらnpmでインストールなんてできません。
Google Apps ScriptではいくつかのCDNで公開されてるライブラリをロードすることで、コード内で利用できるようになります。こちらのページのUsage with CDNがそれに該当します。
Headerタグ内でCSSをロード
|
1 2 3 4 5 |
<head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> </head> |
- Header部分ではCSSを読み込みます。
- 他にもGoogle FontsやViewportの設定も指定が必要になります。
Bodyタグ内の一番下でJSをロード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body> ・・・・前略・・・・ <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <!-- Vuetifyを初期化する --> <script> new Vue({ el: '#app', vuetify: new Vuetify(), }) </script> </body> |
- Vue.jsやVuetify.jsといったライブラリのJSファイルは、Header内で読み込ませても、エラーになります
- Bodyの一番最後で読み込ませ、また初期化の為のスクリプトも同じ場所で記述する必要があります。
- new Vue内にて初期化する際に、vuetifyを指定し、そこでnew Vuetifyを呼び出すことで、Vuetifyを初期化しています
viewportの指定
今回はPC向けということなのですが、モバイル向けとしてviewportの指定が必要な場合があります。しかし、通常通りHTML内に記述しても、Google Apps Scriptの場合それらのタグは無視されてしまいます。これらは、HTML Serviceの引数として、addMetaTagでの指定が必要です。faviconなども同様です。
※faviconを指定するとウェブアプリのアイコンが指定のアイコンになります（サンプル）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function doGet(e){ //パラメータを取得する var param = e.parameter.param1; //paramを元にHTMLをレンダリング var html = HtmlService.createHtmlOutputFromFile(param) .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) .setFaviconUrl('https://drive.google.com/uc?id=1rPShWER6M-z0IxcVSFa6Cx1MLPE-6MCf&.png') .addMetaTag('viewport', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui'); return html; } |
色々なコントロールを使ってみる
Vuetifyのサイトには様々なUIコントロールのサンプルが掲載されています。しかし、これらのコードをそのままGoogle Apps ScriptのHTML Serviceで動かそうとした場合、動かないケースがままあります。今回はいくつかのコントロールをテストしてみて、実際にこれなら動くという形で、ちょっとだけ変えてあります。
非常に沢山のコントロールと、それぞれにオプションやテクニック、APIが用意されているので、表現力豊かなアプリケーションが構築可能です。
以下のコードはHeaderやBody下部の共通部分については省略しています。
Appbar
アプリケーションの顔とも言える、アプリ上部にあるヘッダに該当するナビゲーションバーです。この他にもファイルやヘルプなどのツールバーなどもあったりします（もちろん、モバイル向けの下部ナビゲーションも）。ただし、サンプルのままで動作しようとすると、このナビゲーションバーにコンテンツ部分が被ったりと色々と面倒な部分もありましたが、以下のコードで動作させることが可能です。
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div id="app"> <v-app> <v-app-bar color="light-blue lighten-5" app color="#fcb69f" shrink-on-scroll scroll-target="#main_content"> <v-app-bar-nav-icon></v-app-bar-nav-icon> <v-toolbar-title class="ml-2"> 南国フルーツ図鑑 </v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-btn icon> <v-icon>mdi-heart</v-icon> </v-btn> <v-btn icon> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </v-app-bar> <v-sheet id="main_content" class="overflow-y-auto" max-height="600"> <v-main class="text-center ma-6" style="height: 1500px;"> ここにコンテンツを記述する </v-main> </v-sheet> </v-app> </div> |
- v-app-barにおいて、absoluteの指定があると下のコンテンツ部分に被ってしまうので省略
- shrink-on-scrollの指定がある場合、スクロールするとバーが自動的に半分くらいのサイズにミニマムになる
- scroll-targetの指定がある場合、スクロールするエリアは指定したID（今回だとmain_content を持つv-sheet）が対象
- v-btnがナビゲーションのボタンの部分を担当する
- v-app-bar-nav-iconは左サイドのハンバーガーメニューです
サンプル表示
Bottom Sheet
スマフォなどではおなじみのボタンをクリックすると、下からメッセージがせり上がってくるアレです。アプリで使うシーンとなると、普通のalertの代わりという、承認時のメッセージであったりといったダイアログよりも目立たせたいのが、使うポイントになるかと思います。
ソースコード
JS側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ sheet: false, }), methods:{ onApprove(){ alert("承認しました"); this.sheet = false; //BottomSheetを閉じる }, onReject(){ alert("却下しました"); this.sheet = false; //BottomSheetを閉じる }, } }) </script> |
- dataの中のsheetをフラグとし、falseで閉じます
- 承認と却下用のコマンドをmethodsに加えて起きます。
HTML側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<v-app id="app"> <v-container> <v-row class="text-center"> <v-col col="12"> <div class="text-center"> <v-main class="text-center ma-6"> ここにコンテンツを記述する </v-main> <v-bottom-sheet v-model="sheet" inset> <!-- ボタンを表示する --> <template v-slot:activator="{ on, attrs }"> <v-btn color="blue" dark v-bind="attrs" v-on="on">ボトムを開く</v-btn> </template> <!-- ボトムシートの中身 --> <v-sheet class="text-center" height="200px"> <v-btn class="mt-6" text color="error" @Click="onApprove">承認</v-btn> <v-btn class="mt-6" text color="error" @Click="onReject">却下</v-btn> <div class="my-3">この申請を処理してください。</div> </v-sheet> </v-bottom-sheet> </div> </v-col> </v-row> </v-container> </v-app> |
- ボトムを開くをクリックすると、ボトムシートが開かれます
- 承認、却下はそれぞれがmethodsに規定したコマンドを@Clickにて実行し、this.sheet=falseで閉じるようになっています。
サンプル表示
Dialog
アプリケーションで非常によく使う要素の１つがダイアログでしょう。jQueryなどを使わずにオシャレなダイアログを構築する事が可能です。その表現の数も非常に充実しており、よくあるYES/NO、フルサイズの設定用ダイアログ、ダイアログのネスト、プログレス表示用などなど、ユーザの要求を適切に受け取ることが可能です。
ソースコード
JS側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { dialog: false, } }, methods:{ onApprove(){ alert("承認しました"); this.dialog = false; //dialogを閉じる }, onReject(){ alert("却下しました"); this.dialog = false; //dialogを閉じる }, } }) |
- コード自体はBottom Sheetとほとんど同じものになります。
- dataの中のdialogをフラグにして、falseの時に閉じます。
HTML側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<v-app id="app"> <v-row class="text-center"> <v-dialog v-model="dialog" persistent max-width="290"> <!-- 承認ボタン --> <template v-slot:activator="{ on, attrs }"> <v-btn color="primary" dark v-bind="attrs" v-on="on"> 承認実行 </v-btn> </template> <!-- カードで整形する --> <v-card> <v-card-title class="headline"> この申請を承認しますか？ </v-card-title> <v-card-text>承認を実行すると、本人にもメールで結果が通知され、申請書が発行されます</v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue darken-1" text @click="onApprove"> 実行 </v-btn> <v-btn color="red darken-1" text @click="onReject"> キャンセル </v-btn> </v-card-actions> </v-card> </v-dialog> </v-row> </v-app> |
- 承認実行ボタンを押すとダイアログが表示されます。
- ダイアログの２つのボタンにそれぞれ@Clickで実行するmethodを指定しておきます。
サンプル表示
Carousel
ブログパーツであったり、スマフォのアプリであったり、最近は様々なシーンで使われるようになったUIコントロールが「カルーセルスライダー」。主に写真であったり、プレゼンのスライドのようなものであったりに使われていますが、いざ自前で実装すると、結構大変です。このカルーセルをVuetifyは簡単に実装できるだけでなく、配列に値をpushするだけで自動で追加項目が反映するVue.jsのBindの特性が活かせるコントロールでもあります。
ソースコード
JS側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
var calitem = [ { src: 'https://drive.google.com/uc?id=1pAuuo3qeFilFciiF6dCYP7_hrbxU8avZ&.jpg' }, { src: 'https://drive.google.com/uc?id=1lUdAgnko7q0gMmMqWghrI3xIh1xrOP4T&.jpg' }, { src: 'https://drive.google.com/uc?id=1SrJo8FmqM32TlVIuXwsJENqa2DLu2_Tv&.jpg' }, { src: 'https://drive.google.com/uc?id=15EOT__Zj7od8inQKLMk-5vixcOa_SgWz&.jpg' }, { src: 'https://drive.google.com/uc?id=13IifvE4R8Wnwc_OmCfoJ9lJWfbysZ_cy&.jpg' } ]; new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { items: calitem } }, methods:{ addPicture(){ calitem.push({src:'https://drive.google.com/uc?id=1cBWBxtb3pXat_4zDI5vbBQOsU5U3llj1&.jpg'}) console.log(calitem); } } }) |
- calitemという配列を格納してる変数に、連想配列でsrcを指定したデータを格納しておく
- Vue.jsにてdataのitemsにcalitemを指定するとカルーセルスライダー用のデータとして利用される
- addPictureメソッドにて、この配列に新たな画像データを動的に１個追加する
HTML側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<v-app id="app"> <template> <v-btn block @Click="addPicture"> 画像追加 </v-btn> </template> <v-carousel> <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src" reverse-transition="fade" transition="fade"> </v-carousel-item> </v-carousel> </v-app> |
- v-carouselにて、itemsの中身をv-forでループ、バインドされたデータをカルーセルで表示するようになっています。
- 画像が追加されると自動的にVue.jsにてそれらは動的に取り込まれすぐ反映してくれる。jQueryのようにリロードといったコードは不要となる。
- サンプルでは、クリックすると、一番最後にハイビスカスの画像がカルーセルに追加されます。
サンプル表示
いわゆる、サイドバーのこと。例えば、ハンバーガーメニューをクリックすると左側から選択用のメニューが出てくるようなアレです。現代のアプリケーションを構築し、ナビゲーションをするには必須の項目ですね。MenusやLists、TreeViewを組み合わせてれば、リッチなUIを実現出来ます。
ソースコード
JS側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
new Vue({ el: '#app', vuetify: new Vuetify(), data:()=> ({ drawer: false, group: null, items: [ ['mdi-email', 'Mail','メール開くよ'], ['mdi-account-supervisor-circle', 'Member', 'メンバー一覧'], ['mdi-clock-start', 'Task', '予定タスク'], ], }), watch: { group () { this.drawer = false }, }, methods: { onListChange(event){ targetId = event.currentTarget.id; alert(targetId); } } }) |
- Drawerの開閉フラグは変数drawerが担当しています。
- サイドバーの中身用のリストは、itemsの値から生成しています。
- リストをクリックしたら発火する関数として、onListChangeを定義していて、そのタグ内のIDの値をalertで表示
- onListChangeで引数で受けるIDはitemsで生成時にv-bindで動的に割り当てたものを利用しています。
HTML側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<v-app id="app"> <v-card class="mx-auto overflow-hidden" height="500" width="100%"> <v-system-bar color="deep-purple darken-3"></v-system-bar> <!-- アプリのタイトル --> <v-app-bar color="deep-purple accent-4" dark prominent> <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> <v-toolbar-title>タスク管理 山猫さん</v-toolbar-title> </v-app-bar> <!-- Drawer部分 --> <v-navigation-drawer v-model="drawer" dark absolute temporary src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"> <v-list nav dense> <v-list-item-group v-model="group" active-class="deep-purple--text text--accent-4"> <v-list-item v-for="([icon, text,args], i) in items" :key="i" link v-on:click="onListChange($event)" v-bind:id="args"> <v-list-item-icon> <v-icon>{{ icon }}</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title>{{ text }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-navigation-drawer> <v-card-text> ここにコンテンツを記述する </v-card-text> </v-card> </v-app> |
- v-navigation-drawerにbottomを指定すると、サイドバーではなくアンダーバーになります。
- v-list-itemではv-forにてitemsから値を取得し、v-list-itemを生成しています。
- v-on:clickにてリストアイテムクリック時にonListChangeを実行しています。引数に$eventを指定すると、他の属性値（例えばidなど）を関数側で取得できます。
- v-bindにて、itemsのargsをIDとして割り当ててます。
- itemsのiconはMaterial iconの文字列を指定、textはリストのタイトル。それぞれをVue.jsで割当
サンプル表示
組み合わせの妙技
テキストボックスとカレンダー連動+α
非常に便利でリッチなUIを提供してくれるVuetifyですが、公式ドキュメントだけでは実務では困るケースが結構あります。特に今回社内向けアプリを作ってて困ったのが、テキストボックスとカレンダーの連携。困った点は以下の通り
- テキストボックスクリックでカレンダー表示だと手修正時に面倒（ボタンを別途用意する必要性）
- カレンダーを要するものが１個ならばVue.js内に用意した変数と連動で良いが、たくさんある場合にはこの手は非常に面倒（カレンダーの数だけ用意が必要）
- Vuetifyのカレンダーは、yyyy-mm-ddの形式でなければならないが、テキストボックス内に表示されるのはyyyy/mm/dd（このまま渡すとエラーになる）
- 値を読み書きする対象は、単一の値ではなくJSONの塊であるため、ロジックが必要（テキストボックスへの連結はv-modelで連結で良いのだが・・・）
これらを解消するにはちょっと複雑な仕組みが必要です。
ソースコード
HTML側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> /* DatePickerの土日の色 */ .v-date-picker-table.v-date-picker-table--date > table > tbody tr td:nth-child(7) .v-btn__content { color:blue } .v-date-picker-table.v-date-picker-table--date > table > tbody tr td:nth-child(1) .v-btn__content { color:red } </style> <v-form ref="form"> ・・・前略・・・ <v-menu :close-on-content-click="false" :nudge-right="40" transition="scale-transition" offset-y min-width="290px"> <template v-slot:activator="{ on, attrs }"> <v-text-field v-model="selerec.joindate" label="入社日付" type="text" hint="入社した日付を選択" persistent-hint required> <template v-slot:append-outer> <v-btn icon color="primary" dark elevation="0" @click="onBindName('joindate')" v-on="on"> <v-icon>mdi-calendar</v-icon> </v-btn> </template> </v-text-field> </template> <v-date-picker v-model="picker" @click="menu = false" locale="ja-jp" :day-format="date => new Date(date).getDate()" ></v-date-picker> </v-menu> ・・・後略・・・ </v-form> |
- 入社日付テキストボックスとはv-modelにてJSONデータであるselerecのjsondateに連結
- テキストボックス、ボタン、カレンダーであるv-date-pickerはv-menuで囲っておく（これ全体が一つの塊になる）
- ボタンクリック時には、カレンダーを呼び出すonBindName関数をイベントとして割り当てておく（v-on＝’on’も必要です）
- v-date-pickerはv-modelにてpickerという後述のComputedのget, setの変数を割り当てておく（これが日付データの受け渡しを担当）
- v-date-pickerはlocale=”ja-jp”で日本語化。しかし、日がくっついてくるので、:day-format=”date => new Date(date).getDate()”にて、綺麗にフォーマットする
- CSSにてカレンダーの土日の文字色は変更可能です。
- onBindName関数の引数には対象となるJSONのkey名を入れておき、読み書き対象の場所を特定できるように指定しておく。
JS側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
//グローバル変数 var binder = ""; //ダイアログを初期化する vm3 = new Vue({ el: '#app3', vuetify: new Vuetify(), data() { return { selerec: {}, date: null, } }, methods: { onBindName(args){ //対象の日付テキストのバインド先を格納する binder = args; //バインド先データの日付を取得し、dateに格納しておく try{ var dateman = this.selerec[binder]; this.date = dateman.replace(/\//g, '-'); }catch(e){ } }, }, computed: { picker: { get() { //変数dateから取得変換済みの日付をカレンダーに対して返す return this.date; }, set(val) { //カレンダーの選択日付をセットする this.date = val; var dateman = val.replace(/-/g, '/') this.selerec[binder] = dateman; } } } }) |
- グローバル変数binderにはonBindNameが取得した引数を格納。読み書き先のJSONのkey名を格納しておく（これにより、たくさんのカレンダー用の変数を用意する必要がなくなる）
- onBindNameにエラートラップをしてる理由は、値が空である場合にエラーとなるので、これを回避する為。
- onBindName関数にて、特定のJSONの日付データを取得。ただし、replaceを使って正規表現にて「スラッシュ」を「ハイフン」に変更して、dateに格納しておく
- v-onにてカレンダーが開かれると、v-date-pickerが表示される。すると、v-modelで連結してるcomputedのPickerにあるgetが発火。dateに格納されてる日付データを取得し、カレンダーに反映する
- カレンダー側で日付を選択すると、computedのpickerにあるsetが発火。日付データはvalに入ってるので、これを今度は「ハイフン」を「スラッシュ」に変更して、dateおよびJSONの対象のkeyの値に直接格納する
- カレンダー外をクリックすると、カレンダーは自動的に閉じる。カレンダーの表示非表示用の変数もこれで省略しているので、たくさんの変数を用意する必要がない
ちなみに、selerecには、1レコード分の様々なデータがkeyと値のペアでたくさん格納されている。
図：この手は非常によく使うテクニック
タブとツールバーの連携技
自分のアプリでは、レコードをクリックすると、その詳細な内容を編集するダイアログを表示させ、その中ではジャンル毎に「タブ」でわけています。このタブをツールバーの中に配置しており、保存ボタンを別途用意しており、編集後に保存ボタンを押すことで、MySQL側へとデータを投げる仕組みになっています。
タブをクリックする事でジャンル毎の中身を切り替えて表示するのですが、各コンテンツ内容がダイアログの大きさよりも大きい場合、スクロールバーが表示されますが、ツールバーまでスクロールしてしまい、具合が悪いです。コンテンツ部分だけをスクロール出来るように細工が必要です。
ソースコード
ツールバーを固定化する為のCSS
|
1 2 3 4 5 6 7 |
/* DialogのToolbarを上部に固定化 */ .fixed-bar { position: sticky; position: -webkit-sticky; /* for Safari */ top: 0em; z-index: 9; } |
- ツールバー部分はposition:stickyにて上部に固定化する
HTML側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<v-app> <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition"> <v-card> <v-toolbar dark color="primary" class="fixed-bar"> <v-btn icon dark @click="dialog = false"> <v-icon>mdi-close</v-icon> </v-btn> <v-toolbar-title v-text="selerec.emp_name+'の情報詳細'"></v-toolbar-title> <v-spacer></v-spacer> <v-toolbar-items> <v-btn dark text @click="dialog = false"> 保存 </v-btn> </v-toolbar-items> <template v-slot:extension> <v-tabs v-model="model"> <v-tabs-slider color="yellow"></v-tabs-slider> <v-tab href="#tab-1"> 共通項目 </v-tab> <v-tab href="#tab-2"> 人事 </v-tab> <v-tab href="#tab-3"> 通勤費 </v-tab> <v-tab href="#tab-4"> 厚生 </v-tab> <v-tab href="#tab-5"> 勤怠 </v-tab> </v-tabs> </template> </v-toolbar> <!-- 各タブ内のコンテンツ --> <v-form ref="form"> <v-tabs-items v-model="model"> <v-tab-item value="tab-1"> ここにコンテンツを記述 </v-tab-item> <v-tab-item value="tab-2"> 人事U </v-tab-item> <v-tab-item value="tab-3"> 通勤費関係 </v-tab-item> <v-tab-item value="tab-4"> 福利厚生 </v-tab-item> <v-tab-item value="tab-5"> 勤怠の入力欄 </v-tab-item> </v-tabs-items> </v-form> </v-dialog> </v-app> |
- v-toolbarの中にv-tabsや各種ボタンを配置する
- v-tab-sliderにてタブ下部のスライダーの色を指定する事が可能です。
- 各タブのhrefには下部のコンテンツ部分のv-tab-itemの各valueの項目に切り替わる仕組みです。
- v-toolbarにはCSSで固定化するためにclass=”fixed-bar”を指定しています。
- <v-app-bar app dense fixed>をtoolbarにくくり、コンテンツ部分をv-contentでくくることで、似たようがことが実現はできますが、レイアウトが崩れたりするので、自分はCSSでの調整を利用しています。こちらのほうがスッキリ決まります。
図：標準のタグよりもCSS調整のほうが綺麗に決まることもある
Vue.jsのプラグイン
Cheetah Grid
業務用アプリケーションを構築する上で、特にPC向けで構築する場合にほぼ必須にあるコンポーネントが「Grid」。VuetifyにもGridはあるのですが、欲しいのはこういうものじゃない・・・これまでは、w2ui-gridやSlickGridなどを使ってましたが、前者は以前は高速だったのですが、現在は重く切り替えも非常にもたつく、後者は高速なのですが既にメンテされていないし、構築が結構面倒。
ということで見つけたのが、Cheetah Grid。Vuetifyじゃなく、Vue.jsのプラグインとして実装されているものになりますが、マテリアルデザインで表現されます。
列の固定やマルチプルカラム（複数列にまたがるカラムタイトルを作れる）などが可能で、非常に高速に表示が出来るというので、手を出してみました。デモページはこちらになります。Vue.jsとの相性も良いみたいです。表示する為のGridのデータの仕様はこちらになります。Vue.jsで使う場合のドキュメントはこちら。
ソースコード
Vue.jsの拡張プラグインとして、CDN配布されているので、vue.jsの読み込み後に以下のコードで追加で読み込むようにします。
|
1 2 |
<script src="https://unpkg.com/cheetah-grid@0.22.9/dist/cheetahGrid.es5.min.js"></script> <script src="https://unpkg.com/vue-cheetah-grid@0.22.3/dist/vueCheetahGrid.js"></script> |
GAS側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//シートからGrid用のデータを生成する function geneperson(){ //スプレッドシートのデータを取得 var rows = SpreadsheetApp.openById(sheetid).getSheetByName("grid").getRange("A1:D").getValues(); //1行目をJSONのkeyとして設定 var keys = rows.splice(0, 1)[0]; //keyに対応するデータを元にJSONを構築 return rows.map(function(row) { var obj = {}; row.map(function(item, index) { obj[String(keys[index])] = String(item); }); //JSONを返す console.log(obj) return obj; }); } |
- スプレッドシートのデータをタイトル列をkeyに、連想配列データにして返す関数です
- このデータをCheetah Gridのrecordsにそのまま、当て込みます
JS側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//cheetah Gridプラグインを読み込む Vue.use(vueCheetahGrid) //スプレッドシートからグリッドデータを生成する google.script.run.withSuccessHandler(onSuccess).geneperson(); //Vue.jsを初期化する function onSuccess(data){ records = data; new Vue({ el: '#app', vuetify: new Vuetify(), data:()=> ({ records:data }), methods: { //ボタンクリック時に呼び出されてレコード内容を表示する onClickRecord(rec) { alert(JSON.stringify(rec)); } } }); } |
- Vue.useで今回の拡張プラグインを読み込まないとエラーになります
- google.script.run.withSuccessHandlerにてGAS側からデータを受け取る
- 受け取ったデータを元にnew Vueでrecordsに当て込みます。
- 今回はボタンをクリックするとレコード内容をalertで表示するメソッドを追加
HTML側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div id="app" style="width:100%; height: 500px; border: solid 1px #ddd;"> <!-- 2列目まで固定 --> <c-grid :data="records" :frozen-col-count="2"> <!-- チェックボックス表示 --> <c-grid-check-column field="check" width="50"> 終了フラグ </c-grid-check-column> <!-- ID列を表示 --> <c-grid-column field="personid" width= "85"> ID </c-grid-column> <!-- マルチプルカラムで表示 --> <c-grid-column-group caption="Name"> <c-grid-input-column field="fname" width="20%" min-width="150"> 名前 </c-grid-input-column> <c-grid-input-column field="lname" width= "20%" min-width="150"> 名字 </c-grid-input-column> </c-grid-column-group> <!-- Mail列を表示 --> <c-grid-column field="email" width= "85"> Mail </c-grid-column> <!-- 編集ボタン --> <c-grid-button-column caption="編集" width="120" @click="onClickRecord"> 編集 </c-grid-button-column> </c-grid> </div> |
- frozen-col-countにて固定する列の列数を指定します。2で初めの2列を固定化
- データと連結するにはfieldプロパティを使ってrecordsのkeyと一致させる。personidならrecordsデータのpersonidのkeyの値がここに入ってきます。
- 2段表示のタイトル列を作る場合は、c-grid-column-groupにて1段目を定義し、その中に2段目を個別に定義する形になります。
- onClickRecordにて定義した関数が呼び出されますが、特に引数を指定せずともrecにレコードの全ての値が入ってくるので、これを元にデータを加工します。
Grid用データ
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var records = [ {'personid': 1, 'fname': 'Sophia', 'lname': 'Hill', 'email': 'sophia_hill@example.com'}, {'personid': 2, 'fname': 'Aubrey', 'lname': 'Martin', 'email': 'aubrey_martin@example.com'}, {'personid': 3, 'fname': 'Avery', 'lname': 'Jones', 'email': 'avery_jones@example.com'}, {'personid': 4, 'fname': 'Joseph', 'lname': 'Rodriguez', 'email': 'joseph_rodriguez@example.com'}, {'personid': 5, 'fname': 'Samuel', 'lname': 'Campbell', 'email': 'samuel_campbell@example.com'}, {'personid': 6, 'fname': 'Joshua', 'lname': 'Ortiz', 'email': 'joshua_ortiz@example.com'}, {'personid': 7, 'fname': 'Mia', 'lname': 'Foster', 'email': 'mia_foster@example.com'}, {'personid': 8, 'fname': 'Landon', 'lname': 'Lopez', 'email': 'landon_lopez@example.com'}, {'personid': 9, 'fname': 'Audrey', 'lname': 'Cox', 'email': 'audrey_cox@example.com'}, {'personid': 10, 'fname': 'Anna', 'lname': 'Ramirez', 'email': 'anna_ramirez@example.com'} ]; |
- カラム名：値という形でのシンプルな連想配列になっています。
- データ入れ替えを考えるならば、これをJSファイルとして切り出し、動的に入れ替えるようにすれば、あとはVue.jsが良しなにやってくれます。
サンプル表示
サンプル用データは疑似個人情報生成サービスを利用しています
こういうプラグインが豊富にあるのも、Vue.jsの良いところ
関連リンク
- 2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント
- GAS + Vue.js + Vuetify でスプレッドシートの編集履歴を表示する
- 【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】
- GASでWEBアプリケーションを作るときはちゃんと考えよう
- Vuetifyを高速で学ぶための32本の無料動画講座を紹介します
- Vuetify.js を使ってマテリアルデザインに挑戦しよう！
- 【入門】Vuetifyで手軽に綺麗なWebページを作る
- VuetifyのDate Pickerを日本語化したら”日”ってついてくる、やだキモい
- Vuetifyで画面デザインをサボってみた
- 【vue.js】Vuefityをマスターする(1)
- Vue.jsのUIフレームワーク「Vuetify」の使い方
- Vuetify.js のスニペット集Vuetify.js のスニペット集
- [Vuetify] Unable to locate target [data-app]
- Event fired when bottom sheet is active or hidden – Vuetify
- Vuetify.js を使ってマテリアルデザインに挑戦しよう！
- Material Design Icons
- CSS/jQueryでoverflow-y:auto/scrollなエリアのスクロールバーを非表示にする
- Vue.jsメモ：属性、ループ内呼び出し、など
- vue.js reference div id on v-on:click
- Vue.jsで最速に始めるCheetah Grid
- 【JavaScript】最速のOSS Data Table/Grid/SpreadSheetを探して、
- Show 1,000,000 records without stress
- vue-cheetah-grid example
- Vue.js おすすめライブラリ 21選（おまけ+1）
コメントを残す