自サイトのバニラJS（javascript）をvue.jsへ書き換えた話．

2024.09.22

Logging

おはようございます．先日、友が東京から帰ってきてたみたいでお見上げを貰いました．いつも頂いているばかりでお返ししないといけないなって思うのですが、いつ帰って来るのかがさっぱり分からないのでお返しできないでいる．

さて、今日は自サイトのバニラJS（javascript）をvue.jsへ書き換えた話を書きます．少し前からバニラJSからvue.jsへ変更しようと思っていたのだけど、変更する意味が見いだせずにいた.

先日からReactを仕事で触りだしてなるほど、ちょっと便利かもって思い出したので勉強がてらに自サイトをvue.jsに編集しました．

自サイトの全部を置き換えていないけれど、置き換えたほうが良さげな部分は置き換えた形になります．尚、vue.jsをモジュール呼び出しで使用したい場合は呼び出す参照ファイルに下記のタグを追加すると呼び出せます．またモジュールファイルのインポートの書き方も記載しときます．参考にしてみてください．

<script src="./js/example.js" type="module"></script>

import { ref, createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

明日へ続く．

タグ

createApp, from, gt, import, javascript, JS, js&quot, lt, module&quot, react, ref, script src, script&gt, type, vue.js, インポート, お見上げ, バニラJs, モジュールファイル, モジュール呼び出し,

もうすぐ10月です。華金は技術ネタ。

2023.09.29

Logging

おはようございます、ドメインの引っ越しをしていてネームサーバーの確認とかしたい場合があると思います、そういう時はターミナルかPowerShellを開いてこんな感じにCommandを打つといま、どちらのネームサーバーに偏っているかが分かります。

nslookup -type=ns example.com

ちょっとしたことですが、知っていると便利にサーバー移行出来ますよ。あとサーバー移行時にサーバーとサーバーを繋いで、データを転送する方法などもあります。

scp -r user@remoteHost:/remote1/dir /remote2/dir

これで転送する時の要注意は、隠しファイルを転送できたかどうかです。オプションでファイル時刻やパーテーションなどもそのまま引き継いで転送することが可能です。昔、このブログでも取り上げた事がある話なので、知っている人は知っている話かと思いますが、一応、今回、久しぶりにサーバー移行をしたので、その時の技術的な話でした。

オマケ：この頃思うのですが、SSLが当たり前になって無料SSLで運営しているひとが多くなったと思いますが、VPSからVPSなら比較的にサーバー移行は楽ですが、それ以外、VPSからレンタルサーバーへとかの場合は一旦、SSLを無効にして移行するしか出来ないかなと思っているのですが、どうすればスムーズに移行することが可能なのかな？

明日へつづく😌。

タグ

-Command, DIR, example.com, ns, nslookup, r user@remoteHost, remote1, remote2, SCP, type, VPS, オマケ, サーバー, ターミナルかPowerShell, ネームサーバー, パーテーション, ひと, レンタルサーバー, 一旦, 要注意,

chart.jsでデモを試してみました。📈 #javascriptcode

2022.11.18

Logging

おはようございます、朝が早いですねと言われますが、夜が早いだけです😅。

さて、今日はchart.jsのデモを試してみました。売上のグラフとかコレで作るのが一番じゃないかなと思うライブラリですね。動画で編集してみせたのは二箇所ですが、実際、業務で使用する場合は３箇所ほど変更して使用しないといけないのかなって。

そういう訳で、こちらのブログにソース・コードを貼り付けておきます。

        const ctx = document.getElementById('myChart');
        let data = [12, 19, 3, 19, 2, 3];
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['demo1', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6'],
                datasets: [{
                    label: '# of Votes',
                    data: data,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true
                    }
                }
            }
        });

業務で変更しないといけない最低限３箇所はこちらです～😆。

• ラベル
• データーセットの中のラベル
• データーセットの中のデータ

上記の３箇所を売上のデータや何やらに使用することで活用できるかと思います。

タグ

12, 19, 2, ３, 39, bar, chart, const, ctx, data, document, getElementById, javascriptcode, JS, let, myChart, new, type, グラフ, コード, こちら, コレ, ソース, デモ, ブログ, ライブラリ, 一, 二, 今日, 使用, 動画, 場合, 変更, 夜, 実際, 朝, 業務, 編集, 訳,

Anglesharpというライブラリの話。

2021.03.13

Logging

久しぶりに技術的なお話の記事を書きます。AnglesharpというのはC#などでスクレイピングするときにスクレイピングを補助してくれるライブラリで結構人気のあるライブラリなるようです。スクレイピングするコードは下記のようになります。この書き方が至ってシンプルで書きやすいのではないかなと思っています。

http://anglesharp.github.io/

var Url = $"https://zip358.com/";
var querySelector = $"#index_post_list > li.clearfix.num1.type1 > div > h3";
var document = BrowsingContext.New(Configuration.Default.WithDefaultLoader()).OpenAsync(Url).Result;
var element = document.QuerySelector(querySelector);
Console.WriteLine($"blogtitle is {element.InnerHtml}");

このライブラリはとても良いのですが、一つ問題があります。スクレイピングするのですが・・・これjavascriptがOFFの状態でスクレイピングされるのですね。どうもこのコードではJSがONにはならないようですね。因みに自分はそのことを知っていなかったのでどハマリしました。大手の検索サイトなどはjavascriptがOFFの状態でも閲覧できるようになっている事を知りました、試しにブラウザをOFFの状態にしてみるとソースコードがかなり違っていてJSのONの状態とは情報が差異がある事が理解できると思います。

Anglesharpのコンフィグ設定（init）でエージェントなどを設定してあげると上手くJSがONの状態をスクレイピングすることが可能なのかもしれません。動画を見る限りではまだかもしれません・・・。

タグ

１, ３, 358, anglesharp, BrowsingContext, clearfix, com, Configuration, default, div, document, element, gt, https, index, li, LIST, new, num, OpenAsync, POST, QueryS, querySelector, quot, result, type, url, var, WithDefaultLoader, zip, お話, コード, シンプル, スク, とき, ピング, ライブラリ, レイ, 下記, 久しぶり, 人気, 書き方, 補助, 記事, 話,

文字の置き換えはよく使うjavascript「吾輩は猫である。」

2020.12.06

Logging

文字の置き換えはよく使う。いろいろな参考書にも文字の置き換えは出てくる基本中の基本だ、そしてコレは結構使うことがある、とくに商品名を整理するときなど、連番に命名を置き換えるなどに使用することがある。EC系のシステム開発ではデーターベースへ製品名（product name）を登録するときなどによく使うのである?が、製品名や商品番号が整っていないのは、よくあることだ、だがしかしコレが中小企業の現実なのである。

この頃、再帰処理を使うことが少なくなってきて、何でも良いから再帰処理に当てはまる題材をじぶんに課すべきだと思う今日このごろです?

<p>吾輩は猫である、名前はまだない。</p>
<p>吾輩は猫である、名前はまだない。</p>
<button class="btn btn-primary" id="btn" type="button">名前はまだない？</button>

<script>
	document.getElementById("btn").addEventListener("click",(e)=>{
		var object= document.querySelectorAll("p");
		for (const key in object) {
			
			if (object.hasOwnProperty(key)) {
				const element = object[key];
				(element).innerText = (element).innerText.replace("名前はまだない。","名前は猫はちだ。");
			}
		}
	});
</script>

タグ

btn, btn-primary, button, class, EC, gt, ID, javascript, lt, name, product, quot, type, いろいろ, こと, コレ, システム, じぶん, データー, とき, ベース, 中小企業, 今日このごろ, 使用, 再帰, 処理, 参考書, 名前, 吾輩は猫である, 命名, 商品, 基本, 整理, 文字, 現実, 番号, 登録, 系, 製品, 連番, 開発, 頃, 題材,

ファンです。Yoojung Lee：）

2020.10.22

Logging

I am a fan of Yoojung Lee. Her dance moves are sharp and beautiful.
And I like her coolness.
I’m sharing her dance moves with you.
If you’ve been following my Twitter timeline, you’ll have an idea of what I’m talking about.
It’s the type of person I like quite a bit.
These days, I’ve been thinking that the women I like are very similar to each other.
There are about three patterns, though.

She is as unattainable as the stars, so I’m a fan of hers.

I just want to watch her.

https://www.youtube.com/channel/UCw8ZhLPdQ0u_Y-TLKd61hGA

タグ

about, AM, an, and, are, as, beautiful, been, bit, coolness, dance, days, each, fan, following, have, her, I'm, I've, idea, if, is, It's, Lee, like, moves, My, of, other, patterns, person, quite, sharing, sharp, She, similar, STAR, talking, that, The, There, These, thinking, though, three, timeline, To, Twitter, type, unattainable, very, what, with, women, Yoojung, You, you'll, you've, ファン,

42Tokyo:フォーティツー東京に入れたらラッキー！？

2020.02.25

Logging

プログラマーってカッコいい職種ですよね（・(ｪ)・）というイメージが動画で表現されているのですが、果たしてそうなのか？、一昔前はオタク的な職業でかつ異質な職種と知られていた職種がこんなカッコいい職業みたいになるなんて思ってもいなかったです。

ちなみに地方のsier（エスアイヤー） 企業にはくれぐれも入らないようにという事だけは伝えたい。特に考え方が一昔前だとアウト。自分もいろいろ求職活動していて何かここ発展しそうだなと感じる職場が少ないなと感じます。それは県外から高知へ進出してきた会社も中にも少しだけ有るなと感じます。
【 https://type.jp/et/feature/8390 ←エスアイヤーに関してはひろゆき氏が語ってます。】

古い考え方だとIT業界は駄目な理由は、この業界だけに言えることなのかどうかは？（はてな）としても。IT技術は日進月歩です、そんな中で「私達の開発した技術は古い技術なので古いOSで動かしてください」とか言っていたら、それはもう、沈みゆく船に乗っているのと同じことなので、この業界に関しては新しい技術に挑み続けなければいけないのではないかと思っています。

なので、やはり考え方が古いと感じたら辞退したほうが良いと思います。これから先、世の中どうなるかわからないけれど、一つだけ言えることはどんな不況下でもスキルが高い人材は生きていけます。そしてそれがニッチだったら尚良しです、高確率で仕事にありつけるでしょう。

ちなみに42Tokyoは、門は開いているけれど試験通過しないといけないらしいので、誰でも無料で学べるわけではないという事です。結構、試験通過するのが厳しいみたいですね。ただ入学出来ればスキルは身につけれそうな気がします。

やってみたい方はこちらにリンクを貼っときます。
https://42tokyo.jp/

タグ

42, 8390, et, feature, https, IT, jp, sier, Tokyo, type, アウト, イメージ, いろいろ, エス, オタク, くれぐれ, ここ, こと, それ, ツー, はてな, ひろゆき, フォーティ, プログラマー, ラッキー, 一, 中, 事, 企業, 会社, 動画, 地方, 少し, 技術, 日進月歩, 昔, 東京, 業界, 求職, 活動, 理由, 異質, 発展, 県外, 私, 考え方, 職場, 職業, 職種, 自分, 表現, 進出, 開発, 駄目, 高知,

画像ファイル系一覧のパスを列挙するバッチ

2019.08.17

Logging

setlocal enabledelayedexpansion
type nul >imglist.txt
set BEFORE_STRING=
set AFTER_STRING=/
set BEFORE_STRING2=F:/
set OUTPUT_FILE=imglist.txt
for /f %%a in ('dir /a-d /s /b *.jpg.webp *.gif') do (
set line=%%a
set RES=!line:%BEFORE_STRING%=%AFTER_STRING%!
echo !RES:%BEFORE_STRING2%=!>>%OUTPUT_FILE%!
)
endlocal

画像ファイル系一覧のパスを列挙するバッチです。
ググりながら作ってみました。
ちなみに勘所はsetlocal enabledelayedexpansion（endlocal）と！です。
どうもforの中の変数をセットするタイミングが関係しているので
上記の文言を使用しないとうまく取り出す事が
できないようです。
遅延環境変数とかいうそうですね。。。
あまり理解していないけれどもorz

タグ

2, a-d, AFTER, BEFORE, DIR, do, echo, enabledelayedexpansion, endlocal, file, For, gif', gt, imglist, in, jpg, line, nul, OUTPUT, res, set, setlocal, string, txt, type, パス, バッチ, ファイル, 一覧, 列挙, 勘所, 画像,

Javascript? EVENT処理の際に引数を渡す。

2019.04.26

Logging

Javascript? EVENT処理の際に引数を渡す方法。
ちなみにもっと簡略化できます。

//NG
$(function(){
    let hoge = "test";
    $("input[type='text']").on("change",(function(hoge){
        console.log(hoge);
    })(hoge));
});
//OK!
//js
function hoge(a){
    return function(){
        console.log(a +  this.value);
    };
};
document.querySelector('input[type="text"]').addEventListener("click",hoge("aaaaaaa~"),false);
//jq
$(function(){
    let hoge = function(a){
        return function(){
            console.log(a + $(this).val());
        };
    };
    $("input[type='text']").on("change",hoge("test="));
});

タグ

aaaaaaa, addEventListener, change, click, console, document, EVENT, false, fu, function, hoge, input, javascript, jq, JS, let, log, NG, OK, ON, querySelector, return, test, Text, this, type, value, 処理, 引数, 方法, 簡略, 際,

javascriptでEVENT処理レベル1

2019.03.09

Logging

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
    <input type="text" class="zyezyezye">
    <script>
            "use strict";
            let zyezyezye = document.querySelector(".zyezyezye");
            zyezyezye.addEventListener("input",()=>{
                console.log(">おいら>>" + zyezyezye.value);
                if(zyezyezye.value=="じぇじぇじぇ")
                {
                    console.log("おいら>>ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!nおいら>>じぇじぇじぇn<<ストーカーかよ!!");
                }
            });
        </script>
</body>
</html>

jqueryばかり書いているとこういう書き方、書かなくなる。
jqueryから世の中はjavascriptやvue.jsなどへシフトしているそうだけど、未だにjqueryばかり書いている自分です。なれないといけないと思いつつ！？
別のことに力を注いでいる毎日です。
ちなみに「じぇじぇじぇ」は方言で驚きを指す言葉だとか。

タグ

１, addEventListener, body, class, console, DOCTYPE, document, EVENT, gt, head, html, if, input, javascript, let, log, lt, querySelector, script, strict, Text, type, use, value, zyezyezye, おいら, レベル, 処理,

PHPの連想配列追加作成方法。んっ

2017.02.11

Logging

PHPの連想配列追加作成方法。
こちらの下記のコードで連想配列が追加可能です。

<form action="rensou.php" method="POST">
    <input name="name" type="text"><br>
    <input name="name2" type="text"><br>
    <input name="name3" type="text"><br>
    <input name="name4" type="text"><br>
    <input name="name5" type="text"><br>
    <input name="name6" type="text"><br>
    <input name="name7" type="text"><br>
    <input type="submit"><br>
</form>
<?php
$_POST = xss_d($_POST);
$array = [];
if(is_array($_POST)){
    foreach ($_POST as $key => $value) {
        if($value<>""){
            $array[$key] = $value;
        }
    }
}
?>
連想配列表示<br>
<textarea style="width: 500px;height: 500px;">
<?php
print_r (count($array)>0)?($array):["値無し"];
?>
</textarea>

<?php
function xss_d($val){
    if(is_array($val)){
        foreach ($val as $key => $value) {
            # code...
            $val[$key] = strip_tags($value);
            $val[$key] = htmlentities($val[$key],ENT_QUOTES);
        }
    }else{

        $val = strip_tags($val);
        $val = htmlentities($val,ENT_QUOTES);        
    }
    return $val;
}

サンプル
https://zip358.com/tool/rensou.php
余談：連想配列よく使います。。。。
そして便利です。こういう追加方法を知らない人も
いると思います。最初に連想配列を設定して終わり・・・。
じぶんもちょっと昔までは追加方法なんて知らなかったです。
知っていると便利です。
あと、ブログですが、こんな感じで
たまに書き込みするようにします。ブログを書かなくなった理由は
ネタがないのではなく。ダラダラ書くより
これは皆さんに伝えたいと思うのだけで良いじゃないかなと
思ったからです。
ぷらす書く時間を他のことにシフトしただけです。
なので、気分が乗る日は書きます・・・よ。

タグ

2, ３, 4, 5, Action, br, Form, gt, input, lt, METHOD, name, php, POST, quot, rensou, Text, type, コード, こちら, 下記, 作成, 可能, 方法, 追加, 連想, 配列,