レンダリングのちらつきを無くしました、あとはアップロード際に.

2025.07.20

Logging

おはようございます.レンダリングのちらつきを無くしました、あとはアップロード際に画質劣化するワードプレスの対応を行えばひとまず、このサイトは改善しないつもりでいます.因みにレンダリングのちらつきがどのような時に発生するかと言えば、背景色の切り替えを行っているところです.

ベースは黄緑色の背景色にしているのですがJSで背景色の切り替えが出来るようにしています.切り替えると切り替えた色をローカルで持つって再度訪問された時に切り替えた色にJSでレンダリングしていたのですが、その時にちらつきが発生していました.

理由は分かっていたけど今の今まで放置していました.切り替えて使っているユーザーがどれぐらいいるのか把握していなかっただけど、自分は背景色を黒にしているのでやっぱ気になるという事で先日の休みを使用して切り替えました.

フロントエンドな作り例えばヘッドレスCMS等で作っていたら色の切り替わりを行っても何らちらつきとは無縁ですがね.今回はかなりベターな対応をしたのだけど、もっと良い方法はないかと思っています.

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

アップ, あと, エンド, サイト, つもり, ところ, どれ, プレス, フロント, ベース, ベター, ヘッド, ユーザー, よう, レス, レンダリング, ローカル, ロード, ワード, 今回, 休み, 作り, 使用, 先日, 切り, 切り替え, 劣化, 対応, 把握, 改善, 放置, 方法, 明日, 替わり, 無縁, 理由, 画質, 発生, 緑色, 背景, 自分, 訪問,

SEOにとってサイトの表示速度は命なのかも.#内容よりレンダリングの速さSEO

2025.02.17

Logging

おはようございます.SEOにとってサイトの表示速度は命なのかも、レンタルサーバーからVPSサーバーに移行して数日経ちますが収益は若干改善してきたように思えます.変わったのはレンダリングの速さだけです.レンダリングと言ってもレンダリングは変わっていないのでサーバーの伝送速度がレンタルサーバーより改善されただけです、それだけでやっぱ違います.

VPSサーバー側にWordPressの表示速度が改善されるというKUSANAGIという物があるのですが、それを導入するとかなり改善されます.因みにSEOの改善のためにCDNを使用するのは良いことらしいです.

検索にヒットしても最終的には人が読むものなので読みづらい共感できない調べていることと違ったなどの思った瞬間、離脱していきます.これから検索するより生成AIに質問を投げることが多くなると思います.そうなると技術で検索サイトを利用することも減っていくだろうと思う反面.

最新の情報はネットに落ちているので従来通りの検索でしか見つけるのは難しいと思います.chatGPTのディープリサーチ(Deep Research)というものを使用すれば検索を生成AIがしてくれたり、商品を購入してくれたりしてくれますが、それでも難しいと思います.最終的に人が確認しないといけないという作業が残っているからです.

そして生成AIを使用しているのは主に大手企業やIT界隈ぐらいのものです、その他の企業などでは生成AIの使用を禁止する企業もあるとか.業界変われば何とやらで普及にはやはり10年単位は必要になりそうです.

これから先はSEOよりひとに伝わる内容がますます大事になりそうです(イライラさせないためにも速さも大事ですね(笑)).

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

サーバー, サーバー側, ディープリサーチ, レンダリング, レンタルサーバー, 伝送速度, 作業, 反面, 収益, , 大手企業, 年単位, 従来通り, 改善, 普及, 生成, 界隈, 瞬間, 若干, 表示速度,

Vue.jsでコードを書き直してみたけどバニラJSが良い時もある技術的な話といえばそんな感じ.

2025.02.09

Logging

おはようございます.何もしていないわけではないけど毎日小銭が入ってきた頃を思うといまは前に戻った感じがあります、やっぱり無いよりある方が良いですね.さて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');

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

```, コード, サブスク, ソースコード, テンション, トホホ, バニラコード, ボツ, ももあまり, レンダリング, 下記, 中止, 何せ審査, , 処理, 名前付け, 小銭, 業務, 現状, ,