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

+++ date = "2022-02-09" tags = ["vue"] title = "tarot-cardを追加した" slug = "vue" +++

この前、イラストを描いたやつをtarot-cardに追加したいなって思って、現在の仕組は、以下のようなscriptでcardを生成し、その情報を記述したjsonをvueでimportしてたんですが、毎回buildするのが面倒だと思ったので、jsonの更新のみで対応することにしました。

この程度のことはブログに書こうか迷いましたが、どんな些細なことでも、できる限り書いてく方針なので。

#!/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

[
  {
    "id": "1",
    "h": "title",
    "file": "/ai/tarot/tarot_01",
    "src": "100",
    "p": "text"
  }
]

<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に同ファイルをおいてやるとできると思います。

変更前はこんな感じで直接読み込んでました。

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);
		}
	}
}