拙作ツールのアップデートを検討しているのですがUI部分の調整に時間を費やすことが多かったりします。
CSSのライブラリやフレームワークを使うのも良いですがメジャーなjsライブラリ・フレームワークと一緒に使えるエコシステムとして組み込まれているものが良いかな、と調べてみるとvuetifyがなかなか良さげだったので使ってみることにしました。
といっても、取り敢えずお試し程度に使いたいのでまずはローカルのHTMLファイルでサンプルを動かす程度をやってみようということで vuetify をCDNから読み込んで動かしてみようということです。ローカルファイルで構築済することでどこでもスキマ時間にいじることができます。
UIの方から入ったのでVue.js自体やBabelを分かってないですがなんとか動いております。
Babel7とvuetifyをCDNから読み込んで動かしてみる
vuetifyのQuick Startのページを見るとCDN Installという項目があるのでコレを参考にDefault application markupのコードをサンプルの起点としました。IEサポートも考えてIE11 & Safari 9 support を読むとBabelを組み込めば良いらしいのでBabelのCDN経由で使用するやりかたをしらべてみました。
2019/03現在だと Babel はバージョン7.xが最新とのこと。バージョン7を使ってCDN経由で動かす方法を調べてみましたが出てくるのはバージョン6を使った例ばかり。おそらく使い回せるだろう、とバージョン6のサンプルを真似て実行してみるがエラーが出てしまいます。
原因は大きく2つでした。@babel/standaloneを読み込むとCDN経由でもBabelを動かせるのですが@babel/standaloneがモダンブラウザでの動作を想定しているのかIEだとサポートしていない機能を使っていて動きません。Babel でPolifillしたコードが動いてほしかったのですがそのBabelを動かすためにPolifillした環境が必要になってしまいました。もう一つはpresetのstage指定。バージョン6では使えたのですがバージョン7では廃止になったのでコレが含まれていると動きませんでした。
この２つをクリアしたらほぼ思い通りに動いたのでプロトタイプで作ったコードを貼っておきます。
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.15/vuetify.min.css" integrity="sha256-pDcK9eD3CHRmrOhlHdlr87HvMWbmpvtjNsVyhCjlU38=" crossorigin="anonymous" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta charset="utf-8"/>
</head>
<body>
<div id="app">
<v-app>
<v-navigation-drawer app>aaaa</v-navigation-drawer>
<v-toolbar app>bbb</v-toolbar>
<v-content>
<v-container fluid>
<v-layout column >
<v-flex xs2 pa-2 ma-2 >
<router-view>{{ message }}</router-view>
</v-flex >
<v-form
v-on:submit.prevent="changeMsg"
>
<v-layout row wrap >
<v-flex
pa-2 ma-2
grow
>
<v-text-field
label="Input keyword"
prepend-inner-icon="place"
placeholder="something related images"
box
v-model="message"
clearable
></v-text-field>
</v-flex >
<v-flex
pa-2 ma-2
shrink
>
<v-btn
round
dark
v-on:click="changeMsg"
>Search!</v-btn>
</v-flex >
</v-layout>
</v-form>
<v-layout align-start justify-start row wrap >
<v-flex
xs6 sm4 md3 lg2
pa-1 ma-1
v-for="item in images"
>
<v-card
width="220"
>
<v-img
v-bind:src="item.url"
max-width="200"
max-height="200"
contain
></v-img>
<v-card-title primary-title>
{{ item.title }}
</v-card-title>
<v-card-text>
{{ item.tags }}
</v-card-text>
</v-card>
</v-flex >
</v-layout>
<v-form
v-on:submit.prevent="changeMsg"
>
<v-layout row wrap >
<v-flex
pa-2 ma-2
grow
>
<v-text-field
label="Input keyword"
prepend-inner-icon="place"
placeholder="something related images"
box
v-model="message"
clearable
></v-text-field>
</v-flex >
<v-flex
pa-2 ma-2
shrink
>
<v-btn
round
dark
v-on:click="changeMsg"
>Search!</v-btn>
</v-flex >
</v-layout>
</v-form>
<v-form>
<v-flex xs12 pa-2 ma-2>
<v-textarea
box
name="results"
label="Tags"
placeholder="Generated Tags will be here"
value=""
></v-textarea>
</v-flex >
</v-form>
</v-layout>
</v-container>
</v-content>
<v-footer app>ddd</v-footer>
</v-app>
</div>
<script type="text/babel" data-presets="es2015,es2016,es2017">
const app = new Vue({
el: '#app',
// vuetify: new Vuetify(), // v2.0以降はこの設定が必要
data: {
message: '',
images: []
},
methods: {
changeMsg: function () {
const min = 50 ;
const max = 1500 ;
const n = Math.floor( Math.random() * 10 ) + 1 ;
[...Array(n)].map(() => {
const title = 'cat'
const imgw = Math.floor( Math.random() * (max + 1 - min) ) + min
const imgh = Math.floor( Math.random() * (max + 1 - min) ) + min
const url = 'http://placekitten.com/' + imgw + '/' + imgh
const tags = 'kitten, 猫'
this.images.push({ url: url, tags: tags, title: title})
})
// console.log(this.images)
this.message = 'submit'
}}
})
</script>
</body>
<!-- @babel/standaloneを動かすためにpolyfill -->
<script crossorigin="anonymous" src="https://cdn.polyfill.io/v3/polyfill.min.js?flags=gated&features=es5,es6,es7"></script>
<!-- <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js" integrity="sha256-Pa4ukKE/8OYeUTJ26hTs2kSoUJk2YPPjoDZUXcpqYbk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/dist/polyfill.min.js" integrity="sha256-5MaPCzSnmBMXH0Z0wdF0ETeJh9zN+psdZ641gqe4AQo=" crossorigin="anonymous"></script>
<!-- polyfill.min.jsでなくこちらでも動いた -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/browser.js" integrity="sha256-5MaPCzSnmBMXH0Z0wdF0ETeJh9zN+psdZ641gqe4AQo=" crossorigin="anonymous"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" integrity="sha256-wjeNXh/Gd38adX82/m9I1JR9pAOIBo7rK0Rxogq4FQg=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js" integrity="sha256-JKMIbIbZD5/wrlXXmlTLXX9pMUFuhwraY8m+FFj0N/o=" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.15/vuetify.min.js" integrity="sha256-zGlKlXaHi/4rUyceAzYi4ZdTL7WYF03FIybeWk/UUbk=" crossorigin="anonymous"></script> -->
</html>polyfill.ioを使っているのですが@babel/polyfillも使わないとIEで動きませんでした。
Babelバージョン6だと polyfill.io を使わずに済むので少し軽くなってこちらのほうが便利でした。関連部分だけ貼っておきます。
<!-- <script crossorigin="anonymous" src="https://cdn.polyfill.io/v3/polyfill.min.js?flags=gated&features=es5,es6,es7"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/babel.min.js" integrity="sha256-FiZMk1zgTeujzf/+vomWZGZ9r00+xnGvOgXoj0Jo1jA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/polyfill.min.js" integrity="sha256-WRc/eG3R84AverJv0zmqxAmdwQxstUpqkiE+avJ3WSo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" integrity="sha256-wjeNXh/Gd38adX82/m9I1JR9pAOIBo7rK0Rxogq4FQg=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js" integrity="sha256-JKMIbIbZD5/wrlXXmlTLXX9pMUFuhwraY8m+FFj0N/o=" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.15/vuetify.min.js" integrity="sha256-zGlKlXaHi/4rUyceAzYi4ZdTL7WYF03FIybeWk/UUbk=" crossorigin="anonymous"></script> -->
</html>
IE上での挙動
一応サポートしているということで、Vuetify のサンプルを見ながらv-text-fieldで画面を作ったのですがIE11上だとどうしても崩れてしまいます。悩んだ挙げ句にv-formで囲って上げる（単に form でも良いかも）とFirefoxと同じルックスになりました。若干動きがおかしなところはありますが概ね他ブラウザと同じように動いています。IE11との互換性を維持していく場合、他にも嵌まるポイントが有るのかもしれません。
ちょっと面倒臭くなってきたのと開発元も推奨していないのでIEサポートはなしの方向でやっていこうと思います。
