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で応援を送る

タグ

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

Photo by Suzy Hazelwood on Pexels.com

超簡単なコード🦋マウス追従をする。 #javasriptcode

2022.11.28

Logging

おはようございます。先週、土曜日の朝は雨がしとしとと降っていましたね☔。

そんな中で一つのデモコードの動画撮影をしていたのですがボツにしました。理由は超簡単過ぎるコードなので、再生回数が狙えそうにないなという判断からです(尺も短いし…)。でも一応コードを書いたのでソースコードはリリースします。タイトル通り、マウス追従するコードです。マウスポインターを一定の距離間隔で追従します。ソースコードはjavasriptだけ貼っていますが、CSSやHTMLを使用して円を描いています。そちらはデモサイトを検証して頂けたらと思います。

let circle = document.getElementById("circle");
document.body.addEventListener("mousemove",function(e){
    let a = e.currentTarget.getBoundingClientRect();
    let x = e.clientX - a.left;
    let y = e.clientY - a.top; 
    circle.style.top = `${y}px`;
    circle.style.left = `${x}px`;
    circle.style.transform = `translate(50px,50px)`;
})

余談:
この頃、ブログがスランプ状態ですね、キーボードも弾みません、波に乗っているときは結構早く一つの記事を書くことが出来るのですが全然ですね。そんな弾まないブログ記事作成の一コマの風景を動画に撮りました。明日の記事かYOUTUBEにアップしているので参照してみてくださいな(音楽は軽やかなんですけど…😅)。

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

addEventListener, body, circle, css, currentTar, document, function, getElementById, html, javasript, javasriptcode, let, mousemove, quot, コード, サイト, ソース, そちら, タイトル, デモ, ポインター, ボツ, マウス, リリース, 一つ, 一定, , 使用, 先週, , 再生, 判断, 動画, 回数, 土曜日, , 撮影, , 検証, 理由, 超簡単, 距離, 追従, 間隔, ,

窪之内英策先生の原原画展in高知2018

2018.06.09

Logging


 


日曜日に行く予定をはやめて、土曜日に
窪之内英策先生の原原画展in高知2018を観に行きました。
早めた理由は単純で明日は雨らしいから。
高知のかるぽーとまで行ってよかったなと
本当に思いました、やっぱ上手いです、プロは違うなと
思いました。ちなみに窪之内英策先生、高知県出身なんだとか
だから、高知県で展示会が見れたわけです。
なんか凄いな高知県から
こんな凄い絵かきさん世に出ると思うと
嬉しい限りです、ボツとか描いている絵でも
全然、めちゃくちゃ上手いです、絵が上手い人って
良いなと思います。
本当に見に行ってよかったです。
本当はいっぱい写真撮りましたが、シェアしたのは
数点です、理由は実際、足を運んで見に行ってほしいから
是非!!絵好きにはお薦めします。
★7月1日まで展示しています。
かるぽーと5階:9:00?18:00
http://www.kutv.co.jp/EISAKUKUBONOUCHI/

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

4, No.45, SEIBUNDO Mook, イラストノート, お薦め, ボツ, メイキングマガジン, 上手い人, 凄い絵かき, 凄い絵かきさん世, 原原画展in高知2018, 土曜日, 嬉しい限り, 展示会, 理由, 窪之内英策先生, 高知県, 高知県出身,

Photo by Pixabay on Pexels.com

cronの設定数に制限があるさくらサーバーとかで制限以上に使う方法(´Д`)

2015.01.12

Logging

cronの設定数に制限があるさくらサーバーとかで制限数以上(cron設定を増やす方法
)に使う方法はないかなと考えた結果、自分はこうしました。
一つのPHPファイル(実行ファイル)から複数のファイルをキックすることに!(´Д`)
こうすれば、処理が遅くないファイルなら複数個でも実行できるのではないかと
思ったわけです。結果的に成功しているぽっいです。
※Shellで作れる人は作れるだろうけど自分には無理(´∀`*)ポッいのでPHPで制作しました。
ちなみにさくらレンタルサーバーの場合、php.iniにタイムゾーン設定を
加えてあげてください(date.timezone = Asia/Tokyo ←追加)。
そうしないと動かない恐れがあります。
作っていて思ったことですが、作る考え方はわかるものの、元々メソッドを覚えていない
人間なのでググってメソッド探しにまずヘタりました( ´Д`)=3。その後、完璧なハズとか
思ってソースを実行させるとエラーは出ないものの。思った通りうごかないという事象に
苦しめられること2時間、何でだろうとか思っていて検証してみた結果、メソッドの使い方が
間違っていたり、変数名が間違っていたりとなんとも言えない無情さに襲われましたが
何とか動作するようになったみたいなのでコードをうっぷします。
ソースコードを記載しときます。動作するとは
思いますが誤作動するかもしれないので保証はしません。なお、いつもながら
ソースにはコメントを記載しておりませんのでトレースしてください。
PHPファイルのDLはこちらから( ´Д`)=3?(最終更新日2015/01/12 11:07)
追記2
改良しました。{*改良版はこちら*}
※このPHPファイルを5分置きにキックしていますΣ(゚∀´(┗┐ヽ(・∀・ )ノ。

<?php
//5分刻みに対して有効な無限クローン 処理が負荷の場合どうなるかは知りません。
date_default_timezone_set('Asia/Tokyo');
class cron{

    public function d_m($obj)
    {
            if($obj->m==="*")return true;
            if(preg_match("/,/",$obj->m))return $this->comma($obj->m,date("m"));
            if((int)$obj->m === (int)date("m"))return true;

            return false;
    }

    public function d_d($obj)
    {
            if($obj->d==="*")return true;
            if(preg_match("/,/",$obj->d))return $this->comma($obj->d,date("d"));
            if((int)$obj->d === (int)date("d"))return true;

            return false;
    }

    public function d_H($obj)
    {
            if(preg_match("/\*\/[0-9]{1,2}/",$obj->H)){
                $H = explode("/",$obj->H);
                if((int)$H[1]>0 && ((int)date("H") % (int)$H[1])===0)return true;
            }else{
                if($obj->H==="*")return true;
                if(preg_match("/,/",$obj->H))return $this->comma($obj->H,date("H"));
                if((int)$obj->H === (int)date("H"))return true;

            }
            return false;
    }

    public function d_i($obj)
    {
            if(preg_match("/\*\/[0-9]{1,2}/",$obj->i)){
                $i = explode("/",$obj->i);
                if((int)$i[1]>0 && ((int)date("i") % (int)$i[1])===0)return true;
            }else{
                if($obj->i==="*")return true;
                if(preg_match("/,/",$obj->i))return $this->comma($obj->i,date("i"));
                if((int)$obj->i === (int)date("i"))return true;

            }
            return false;
    }

    //曜日 0=日曜日 6=土曜日
    public function d_w($obj)
    {
            if((int)$obj->w[date("w")]===1)return true;
            return false;
    }

    public  function comma($c="",$t=""){
        if($c==="")return false;
        if($t==="")return false;
        $flg = false;
        foreach(explode(",",$c) as $cc){
            if((int)$cc===(int)$t)$flg = true;
        }
        return $flg;
    }


    public function d_command($obj){
        if($obj->command){
            exec($obj->command . " > /dev/null &");
        }
        return true;
    }

}
if ($argv[1]) {
   $filename = $argv[1];
    if(is_file($filename)){
        $jsn = json_decode(file_get_contents($filename));
        $cron = new cron();
        try {
            foreach($jsn as $obj){
                if($cron->d_m($obj)){
                    if($cron->d_d($obj)){
                        if($cron->d_H($obj)){
                            if($cron->d_i($obj)){
                                if($cron->d_w($obj)){
                                    $cron->d_command($obj);//波動拳{{{{
                                }
                            }
                        }
                    }
                }
            }
        } catch (\Throwable $th) {
            print $th->getMessage();
        }
    }
}

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

, Asia, cron, date, ini, php, shell, timezone, Tokyo, いの, キック, こと, サーバー, さくら, ゾーン, タイム, パス, ファイル, ヘタ, ボツ, メソッド, レンタル, わけ, 一つ, , 人間, 処理, 制作, 制限, 場合, 完璧, 実行, , 成功, 方法, 無理, 結果, 考え方, 自分, 複数, 複数個, 設定, 追加,