おはようございます.何もしていないわけではないけど毎日小銭が入ってきた頃を思うといまは前に戻った感じがあります、やっぱり無いよりある方が良いですね.さてHxH-moji.comサービスのバニラJSコードをVue.jsへ置き換えてみたのだけどもレンダリングが遅くなってこれは駄目だなと思ったので元の状態に戻しました.
たまにバックのソースコードがどんな感じに動いているのかを調べている人がいるのだけど、そんなに大したソースコードが動いているわけではないのでお恥ずかしいですね.最近やっと名前付けを変更してソースコードを見たらわかる感じにしたつもりでいます.
因みに下記がレンダリングが遅くてボツにしたコードです.本当ならVue.jsでサクサクと動くコードを作りたいのですがVue.jsはまだまだ初心者さんレベルです..あまりVue.jsもReactもあまり分からないのが現状です、業務で使用することはあるものの一から作るとなるとあんまり上手く作れないです.
トホホ・・・.
この頃思うのは広告掲載だけで何とか回るものを作りたいなとサブスクは個人ではちょっと荷が重い.重いもありますが何せ審査が通りそうにないECサービスはまだ手を付けていないのはそんな理由です.自分のテンション上がるのを待って作りたいと思います.
const { createApp, ref, onMounted, nextTick } = Vue;
const app = createApp({
setup() {
const canvas = ref(null);
const languageInput = ref('');
const fontsize = ref(16);
const alertMessage = ref('');
const mobileText = ref('');
const isMobile = ref(window.innerWidth <= 768);
const fetchText = async (flg) => {
try {
const body = new FormData();
body.append('txt', languageInput.value);
const response = await fetch("/common/jpcvn", {
method: "POST",
headers: { "X-CSRF-TOKEN": document.querySelector("[name='token']").value },
body: body
});
const resultdata = await response.json();
drawCanvas(resultdata.txt);
mobileHxH(resultdata.txt);
canvas.value.toBlob((blob) => {
const formData = new FormData();
formData.append("upload_data", blob, "canvas_image.png");
formData.append("name", document.getElementsByName("name")[0].value);
formData.append("sns_name", document.getElementById("sns").value);
formData.append("text_data", resultdata.txt);
if (!flg) formSave(formData);
}, "image/png");
} catch (error) {
console.error(error);
}
};
const drawCanvas = async (text) => {
await nextTick();
if (!canvas.value) return; // canvasがnullの場合は処理を中止
const ctx = canvas.value.getContext("2d");
ctx.clearRect(0, 0, canvas.value.clientWidth, canvas.value.clientHeight);
const background = new Image();
background.src = "/images/paper_00107.jpg";
background.onload = () => {
ctx.drawImage(background, 0, 0, canvas.value.clientWidth, canvas.value.clientHeight);
ctx.fillStyle = "rgba(0, 0, 0)";
ctx.font = `${fontsize.value}px HUNTERxHUNTER`;
const lines = textChange(text, fontsize.value);
lines.forEach((line, i) => {
ctx.fillText(line, 3, 10 + fontsize.value * (1.1618 * i + 1));
});
};
};
const textChange = (t, f) => {
let n = parseInt(350 / f);
let s = t.split("");
let LLine = 0;
for (let i = 0; i < s.length; i++) {
if (LLine && (LLine + 1) % n === 0) {
if (s[i] !== "\n") s[i] += "\n";
LLine = 0;
} else {
LLine++;
if (s[i] === "\n") LLine = 0;
}
}
return s.join("").split("\n");
};
const formSave = async (formData) => {
alertMessage.value = '';
try {
const response = await fetch("/common/image_save", {
method: "POST",
headers: { "X-CSRF-TOKEN": document.querySelector("[name='token']").value },
body: formData,
});
const result = await response.json();
if (result.ret === "ok" && result.url) {
window.location.href = result.url;
} else {
alertMessage.value = result.txt;
}
} catch (error) {
console.error(error);
}
};
const mobileHxH = (tt) => {
if (isMobile.value) {
mobileText.value = tt;
}
};
const adjustTextareaRows = () => {
isMobile.value = window.innerWidth <= 768;
};
onMounted(() => {
adjustTextareaRows();
window.addEventListener("resize", adjustTextareaRows);
});
return {
canvas,
languageInput,
fetchText,
alertMessage,
mobileText,
isMobile,
fontsize
};
}
});
app.mount('#app');
