1
0
hugo/content/blog/2022-02-09-vue.md

170 lines
4.3 KiB
Markdown
Raw Permalink Normal View History

2024-04-23 13:21:26 +00:00
+++
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);
}
}
}
```