170 lines
4.3 KiB
Markdown
170 lines
4.3 KiB
Markdown
+++
|
|
date = "2022-02-09"
|
|
tags = ["vue"]
|
|
title = "tarot-cardを追加した"
|
|
slug = "vue"
|
|
+++
|
|
|
|
この前、イラストを描いたやつをtarot-cardに追加したいなって思って、現在の仕組は、以下のようなscriptでcardを生成し、その情報を記述したjsonをvueでimportしてたんですが、毎回buildするのが面倒だと思ったので、jsonの更新のみで対応することにしました。
|
|
|
|
この程度のことはブログに書こうか迷いましたが、どんな些細なことでも、できる限り書いてく方針なので。
|
|
|
|
```sh:convert.zsh
|
|
#!/bin/zsh
|
|
d=${0:a:h}
|
|
dd=${0:a:h:h}
|
|
|
|
n=`cat $d/static/json/tarot.json|jq "length"`
|
|
n=`expr $n - 1`
|
|
bg=$dd/static/img/tarot_bg.png
|
|
br=$dd/static/img/tarot_br.png
|
|
font="/System/Library/Font/ToppanBunkyuGothicPr6N.ttc"
|
|
for ((i=0;i<=$n;i++))
|
|
do
|
|
p=`cat $d/static/json/tarot.json|jq -r ".[$i].p"`
|
|
h=`cat $d/static/json/tarot.json|jq -r ".[$i].h"`
|
|
s=`cat $d/static/json/tarot.json|jq -r ".[$i].src"`
|
|
s=$dd/static/img/yui_$s.png
|
|
o=$dd/content`cat $d/static/json/tarot.json|jq -r ".[$i].file"`.png
|
|
echo "$s -> $o"
|
|
composite -gravity north -geometry +0+160 -compose over $s $bg $o.back
|
|
composite -gravity north -geometry +0+0 -compose over $br $o.back $o
|
|
rm $o.back
|
|
if [ `echo $h|wc -m` -eq 2 ];then
|
|
mogrify -font "$font" -fill white -pointsize 200 -annotate +930+2570 "$h" $o
|
|
else
|
|
mogrify -font "$font" -fill white -pointsize 200 -annotate +830+2570 "$h" $o
|
|
fi
|
|
squoosh-cli --webp '{"quality":100}' -d $dd/content/ai/tarot/ --resize '{width:400,height:550}' $o
|
|
done
|
|
|
|
s=$dd/static/img/tarot.png
|
|
o=$dd/content/ai/tarot/tarot_00.webp
|
|
composite -gravity north -geometry +0+160 -compose over $s $bg $o
|
|
```
|
|
|
|
```json:static/json/tarot.json
|
|
[
|
|
{
|
|
"id": "1",
|
|
"h": "title",
|
|
"file": "/ai/tarot/tarot_01",
|
|
"src": "100",
|
|
"p": "text"
|
|
}
|
|
]
|
|
```
|
|
|
|
```html:src/App.vue
|
|
<template>
|
|
<div id="app">
|
|
<div class="tarot-card-list">
|
|
<Loading v-show="loading">
|
|
<vue-loading type="barsCylon" color="#99892b" :size="{ width: '50px', height: '50px' }"></vue-loading>
|
|
</Loading>
|
|
<button @click="picker" ><i class="far fa-play-circle"></i> START</button>
|
|
|
|
<p v-if="cName.file">
|
|
<img v-show="!loading" :src="cName.file + '.webp'" /> <img :src="cnt.file + '.webp'" />
|
|
</p>
|
|
<p v-else><img :src="tarotz" /></p>
|
|
|
|
<blockquote>
|
|
<p v-if="cName.p">{{ cName.p }}</p>
|
|
<p v-else><strong>タロットカード</strong></p>
|
|
<p>{{ cnt.p }}</p>
|
|
</blockquote>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
//import items from '/static/json/tarot.json';
|
|
import axios from 'axios'
|
|
import { VueLoading } from 'vue-loading-template';
|
|
export default {
|
|
data() {
|
|
return {
|
|
items: null,
|
|
cName: "",
|
|
cnt: "",
|
|
loading: false,
|
|
tarotz:"/ai/tarot/tarot_00.webp"
|
|
}
|
|
},
|
|
mounted() {
|
|
axios
|
|
.get('/json/tarot.json')
|
|
.then(response => (this.items = response.data))
|
|
},
|
|
components: {
|
|
VueLoading
|
|
},
|
|
methods: {
|
|
picker: function(){
|
|
this.loading = true;
|
|
setTimeout(() => {
|
|
var cNumber = Math.floor(Math.random() * this.items.length);
|
|
var cn = Math.floor(Math.random() * this.items.length);
|
|
this.cName = this.items[cNumber];
|
|
while (cNumber === cn) {
|
|
var cn = Math.floor(Math.random() * this.items.length);
|
|
};
|
|
this.cnt = this.items[cn];
|
|
var list_element = document.querySelector("button");
|
|
list_element.remove();
|
|
this.loading = false;
|
|
}, 1200);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
img {
|
|
width:400px;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
axiosでpreviewする際は、`public/json`に同ファイルをおいてやるとできると思います。
|
|
|
|
変更前はこんな感じで直接読み込んでました。
|
|
|
|
```js:src/App.vue
|
|
import items from '/static/json/tarot.json';
|
|
import { VueLoading } from 'vue-loading-template';
|
|
export default {
|
|
data() {
|
|
return {
|
|
items,
|
|
cName: "",
|
|
cnt: "",
|
|
loading: false,
|
|
tarotz:"/ai/tarot/tarot_00.webp"
|
|
}
|
|
},
|
|
components: {
|
|
VueLoading
|
|
},
|
|
methods: {
|
|
picker: function(){
|
|
this.loading = true;
|
|
setTimeout(() => {
|
|
var cNumber = Math.floor(Math.random() * items.length);
|
|
var cn = Math.floor(Math.random() * items.length);
|
|
this.cName = items[cNumber];
|
|
while (cNumber === cn) {
|
|
var cn = Math.floor(Math.random() * items.length);
|
|
};
|
|
this.cnt = items[cn];
|
|
var list_element = document.querySelector("button");
|
|
list_element.remove();
|
|
this.loading = false;
|
|
}, 1200);
|
|
}
|
|
}
|
|
}
|
|
```
|