@Blog{zip358.com}

meta（旧Facebook）、凄いなこれ無料かよ．いろいろと広告で叩かれている

2024.10.29

Logging

おはようございます．休みの日にPythonを勉強している．勉強しているというか機械学習のサンプルを動かしてちょっとでも理解しようと奮闘しています．自分は馬◯なので、数学的な観点から書かれた本ではなく、一切そういうことを書かれていない．手を動かして理解する本で理解しようと奮闘しています．

本のタイトルは「Python3年生 機械学習のしくみ 体験してわかる！会話でまなべる！」です．表紙もまるで低学年向けに書かれた本の様で中身もかなり噛み砕いた内容、なのでこんな自分にも理解しやすい．これを読んだ後に「実務で役立つPython機械学習入門」を読もうとしている（先日買いました）．

Pythonとは別にReactとVue.jsを並行して業務で対応を行っているだけども、慣れない言語はベストが分からないのでやっぱ大変ですね．もっと良いコードが書けるのではないかなどプルリクエストを行った後に思うわけですが．．．

ともあれ、Pythonは趣味で触っているのでそういう意味では気兼ねなく楽しめている気がします．

最後にタイトルへ釣られたひとにLlama 3.2モバイル（ローカル）でも動くもののリンクを貼っときます．RaspberryPi4や5なら動くと思います、手持ちのRaspberryPi3B+では駄目でした．

明日へ続く

タグ

Python, RaspberryPi3B, RaspberryPi4, react, vue.js, サンプル, しくみ, ひと, プルリクエスト, 中身, 会話, 低学年向け, 実務, 役立つPython機械学習入門, 手持ち, 最後, 機械学習, 表紙, 観点, 言語,

文字数カウントは奥が深いよ。日本語より𓅇エジプト😇 #javascript #code #プログラミング #unicode

2022.10.05

Logging

おはようございます、先日（日曜日のこと）は久しぶりに本屋さん巡りしていました😋。本屋📖は良いですね落ち着きます。

さて、文字コードのカウントは奥が深いなって話を記載していきます。人目線からすれば文字をカウントするという至って簡単な話にですが、PC（コンピューター）にとっては奥が深いです・・・日本語漢字も面倒だけどエジプト系の象形文字系(unicode)は本当に面倒そうです。まだ、作りかけですがツイッターの用な文字コードのカウントするjavascriptコードを書きましたのでサンプルコードとしてご使用ください。

※WindowsOSの環境下でChromeブラウザ動作させ検証しました。コピペ文字には対応していません😇。UTF-8 ではない違う文字コードを貼り付けてみてください、変なことになると思います😂。例えばEUC文字コードだとか・・・。

動作サイトはこちらです。

        function moji(o) {
            let m = o.nextElementSibling;
            //ads
            let h = ((o) => {
                let l = o.value.match(/(https?:\/\/[a-z|A-Z|0-9|\-|_|%|\.|\/]{0,})/giu);
                let ml = l ? ((l) => {
                    return sum = l.reduce((s, e) => {
                        return s + e.length;
                    }, 0);
                })(l) : 0;
                return l ? {
                    len: (l.length * 23),
                    mlen: ml
                } : {
                    len: 0,
                    mlen: ml
                };
            })(o);
            //zenkaku            
            let k = ((o) => {
                let l = o.value.match(/[^\x20-\x7e]/giu);
                let ml = l ? ((l) => {
                    return sum = l.reduce((s, e) => {
                        return s + e.length;
                    }, 0);
                })(l) : 0;
                return l ? {
                    len: (l.length * 2),
                    mlen: l.length
                } : {
                    len: 0,
                    mlen: ml
                };
            })(o);
            m.innerHTML = "【 " + (o.value.length + h.len - h.mlen + k.len - k.mlen) + "文字{半角/280} 】";
            if ((o.value.length + h.len - h.mlen + k.len - k.mlen) >= 280) {
                m.innerHTML = "<span class='text-danger'>【 " + (o.value.length + h.len - h.mlen + k.len - k.mlen) + "文字{半角/280} 】</span>";
            }
        }

                    <label for="my-textarea" class="h3">文字を入力してください。</label>
                    <textarea id="my-textarea" class="form-control" oninput="moji(this);" name="" rows="3"></textarea>
                    <span class="h3"></span>

尚、サンプルコードは１バイトを一文字としてカウントしていきます、そしてURL文字はどんなに長くても２３文字にカウントされます、これはTwitter社の仕様と合わしています。URL文字はURL短縮が行われ23文字の短縮URLが生成されるからその様にカウントしているのですが、なんか本物と違うですよね挙動が・・・🙇‍♂。因みに絵文字がどのようにカウントされるかは確認していません。

※UTF8では絵文字(unicode)を３バイトで表記させているそうです。昔、UTF-8は2バイトで表現しているとか習っていたのですが、それはカナリ古い知識だったみたいです😇。

タグ

8, Chrome, Code, EUC, javascript, PC, Unicode, UTF-, WindowsOS, エジプト, カウント, コード, こと, コピペ, コンピューター, サンプル, ツイッター, ブラウザ, プログラミング, 久しぶり, 人目, 使用, 先日, 動作, 変, 奥, 対応, 数, 文字, 日曜日, 日本語, 本屋, 本当, 検証, 漢字, 環境, 用, 簡単, 記載, 話, 象形, 面倒,

submit(サブミット)：送信させない４つの方法です🙄。#javascript #サブミットキャンセル

2022.09.07

Logging

おはようございます、台風一過が去りましたね😌。

さて、今日はsubmit(サブミット)：送信させない４つの方法を記載します、方法は大きく分けて２つの方法があり、それを細分化して４つの方法になります。まず、一番目は“送信する際（form側）”にてキャンセルする方法です。この場合、addEventListener（アッドイベントリスナー）でキャンセル処理する場合とonsubmitを使用してキャンセルする方法があります。

サンプルコード例１と例３にあたるコードが上記のコードになります。

次に”ボタンをクリック”した際にサブミット（送信）処理をキャンセルする方法です、この方法でも送信を阻止する事ができます。

サンプルコード例２と例４にあたります、自分としてはフォームで処理した方が良いかなと思いますが、こちらでも送信をキャンセルする事ができます。

尚、ソースコードは下記になります。また、参考にしたサイトのリンクを貼っときます。MDNのリンクです。

    <form id="frm" method="post" action="./example/">
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary">Submit1</button>
    </form>
    <form method="post" action="./example/">
        <input type="hidden" name="example" value="data">
        <button id="btn" type="submit" class="btn btn-primary">Submit2</button>
    </form>    
    <form method="post" action="./example/" onsubmit="return func1()" >
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary">Submit3</button>
    </form>
    <form method="post" action="./example/"  >
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary" onclick="return func2()" >Submit4</button>
    </form>

//例１
document.getElementById("frm").addEventListener("submit",function(event){
    event.preventDefault();
});
//例２
document.getElementById("btn").addEventListener("click",function(event){
    event.preventDefault();
    event.stopPropagation();//インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。 
});
//例３
function func1(){
    return false;
}
//例４
function func2(){
    return false;
}

タグ

１, 2, ３, 4, addEventListener, Form, javascript, onsubmit, submit, アッド, イベント, キャンセル, クリック, コード, こちら, サブミット, サンプル, それ, フォーム, ボタン, リスナー, 一, 上記, 事, 今日, 使用, 例, 側, 処理, 台風一過, 場合, 方, 方法, 次, 細分化, 自分, 記載, 送信, 阻止, 際,

機械学習は学習するのにどれぐらいのデータが必要？

2022.09.06

Logging

今日は大荒れ☔との事です、おはようございます。

８月の半ばにとある事情で機械学習で人の顔かどうかを判別させるモデルをTensorFlowで作ってみたのですが、結果、学習のデータが少なかったのが原因なのか分からないけども・・・。人工無能と言いたくなるほど無能な機械学習が出来上がりました。犬の画像を見せてもこれは人ですと判定してくれるので正直、ホントげんなりでした。

画像分類の作り方は簡単です、学習したいディレクトリとテスト用のディレクトリを作り、それぞれの階層に分類ディレクトリを設置し、その中に学習の画像データとテスト用の画像データを入れてサンプルコードをちょちょっと修正してテンソル（Pythonを実行）で学習してもらうだけです。

尚、自分のテストデータは100枚ほどしかなかったので、全然駄目な結果になりましたが３０００枚以上の画像データがあればちゃんとした判別が出来たのかも知れません。

スマホの顔認証は動画データを画像データー変換して学習させているのでしょうね。そうすれば数千枚の画像は生成出来ると思います。

例えばopencv-pythonなんかで画像変換するのが良さそうですよ。

pip install opencv-python

タグ

100, 3000, 4, 8, Python, tensorflow, コード, これ, サンプル, ゼーロ, それぞれ, ちょ, データ, ディレクトリ, テスト, テンソル, どれぐらい, ヒーロー, ホント, モデル, 中, 事, 事情, 人, 人工, 今日, 作り方, 修正, 分類, 判別, 判定, 半ば, 原因, 器, 大荒れ, 学習, 実行, 必要, 機械, 正直, 無能, 犬, 画像, 簡単, 結果, 自分, 設置, 階層, 顔, 駄目,

Chrome拡張の作り方という本は読む人を選ぶ本かも？

2022.07.27

Logging

おはようございます。今日は途轍（とてつ）もなく眠いですが、早朝ウォーキングしてきました😂。

さて、Chrome拡張の作り方という本のコードと解説をささっと流し読みしたので、感想を少しだけ書いていきます。まず、この本（電子書籍）はProが書いた本ではなく、書くことに関してはおそらく素人が書いた本だと思います（今では誰もが本を出版出来る時代ですから）。

ですが、ある一定の知識とプログラミング言語の知識がある人が読むと勘所を抑えていて良質な本だと思います、レビューではリンク先がないなどの意見もあるのですがそういうのは自分は気にしないし、Chrome拡張開発の勘所とManifest V3対応版にいち早く対応した本として良いなと感じました。

ググってもManifest V2対応のコードばかり出てくるので最新のManifest V3対応のサンプルコードが無いのでとても助かります。英語が分かる人ならChrome拡張開発の公式ドキュメントを読めば理解できると思うのですが、自分は英語が読めないに等しいのでとてもChrome拡張の作り方という本は役立ちました。

尚、自分が開発しているChrome拡張は来週にはリリース出来るかと思います、審査が通らなければ少し遅くなるかもですけどね。

タグ

2, ３, Chrome, Manifest, Pro, ウォーキング, コード, こと, サンプル, とき, とてつ, プログラミング, リンク, レビュー, 一定, 人, 今, 今日, 作り方, 公式, 出版, 勘所, 対応, 少し, 意見, 感想, 拡張, 早朝, 時代, 書籍, 最新, 本, 気, 知識, 素人, 自分, 良質, 英語, 解説, 言語, 誰, 途轍, 開発, 電子,

一見似ていて全然違うコードですよ、初心者のどつぼの壺。

2022.04.02

Logging

おはよう御座います。土曜日の朝です😪。

下記のコードは一見似ていて全然違うコードですよ、初心者のどつぼの壺と言いますか・・・。初心者がハマりやすい、thisの領域です。特にメンターのいない独学で勉強をしている人はハマりやすいかなと思ったので今回、サンプルコードを記載しました。昔、自分が何故と思ったのですが今ではfunctionがねぇと気づく内容のコードです。

document.getElementById("example").addEventListener("input",function(){
    main()
})
document.getElementById("example").addEventListener("input",main);

function main(){
    if(this.value){
        console.log(this);
    }
}

最初はみんな初心者です、間違いながら覚えていけばよいのです、失敗しながら覚えていけばバグ取り🐤が上手になります。そのうち、動作するバグ🐞になっていきます。動作するバグが一番厄介です、動作するのでエラーコードを出力しないのでバグを取るにはトレースか当たりをつけてトレースするしか無いのです。

そういうことなので、初心者の皆様気おつけてくださいませ😌。

タグ

addEventListener, document, example, function, getElementById, if, input, main, quot, this, value, コード, サンプル, ドツボ, メンター, 一見, 下記, 人, 今, 今回, 内容, 初心者, 勉強, 土曜日, 壺, 昔, 朝, 独学, 自分, 記載, 領域,

WebAPIの作り方、考え方です?。サンプルコードもありますよ。

2021.12.24

Logging

昨日から風邪を引いてしまいました…。今日も体調が優れない状態ですが、昨日よりはマシになっています、因みに風邪というよりも腸と胃に菌がはいってしまって、それによる発熱です?。

さて、今回はPHP言語でWebAPIの作りましたので、ご報告致します、どんなAPIかというと生年月日とカウントしたい歳をPOSTすると、現在の年齢、今まで生きてきた日数、カウント日数がレスポンス（返却）されます。

PHPコードは下記の通りになります。適当に作ったので間違っている箇所があるかもしれませんが、そこはご愛嬌でお願いできますでしょうか?、また、WebAPIの叩き方はご自身でお考えくださいませ。
サーバーに負荷が増したらWEBAPIは閉じます。

尚、WEBAPIのURLはこちらになります。

https://zip358.com/api/age/v1/type1/

<?php
header('Access-Control-Allow-Origin: *');
date_default_timezone_set('Asia/Tokyo');
$birth_date = (string)$_POST["birth_date"];
$max_age = (int)$_POST["point_age"];

/**
 * @param string $birth_date
 * @return string|false
 */
function check1($birth_date = ""): bool
{
    $flg = false;
    $str_date = explode("/", $birth_date);
    if (count($str_date) === 3) {
        $flg = true;
        if (!((int)$str_date[0] >= 1000)) {
            $flg = false;
        }
        if(((int)$str_date[0] > (int)date("Y"))){
            $flg = false;
        }
        if (!((int)$str_date[1] >= 1 && (int)$str_date[1] <= 12)) {
            $flg = false;
        }
        if ($flg) {
            if ((int)$str_date[1] === 2) {
                if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 28)) {
                    $flg = false;
                }
                if ((int)$str_date[0] % 4 === 0) {
                    $flg = true;
                    if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 29)) {
                        $flg = false;
                    }
                    if ((int)$str_date[0] % 100 === 0) {
                        $flg = true;
                        if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 28)) {
                            $flg = false;
                        }
                        if ((int)$str_date[0] % 400 === 0) {
                            $flg = true;
                            if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 29)) {
                                $flg = false;
                            }
                        }
                    }
                }
            } else {
                $last_day = [4, 6, 9, 11];
                if (array_search((int)$str_date[1], $last_day, false)!== false) {
                    if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 30)) {
                        $flg = false;
                    }
                } else {
                    if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 31)) {
                        $flg = false;
                    }
                }
            }
        }
    }
    return $flg;
}

/**
 * @param int $age
 * @return string|false
 */
function check2($age = 0): bool
{
    $flg = true;
    if ($age < 0) {
        $flg = false;
    }
    return $flg;
}


/**
 * @param string $birth_date
 * @param string $maxage
 * @return string $reslut
 */
function sumup($birth_date, $maxage)
{
    $reslut = [];
    $birth_date_array = explode("/", $birth_date);
    $birth_date = sprintf("%04d%02d%02d", $birth_date_array[0], $birth_date_array[1], $birth_date_array[2]);
    $today = date('Ymd');
    $age = floor(($today - $birth_date) / 10000);
    $day1 = new DateTime("{$birth_date_array[0]}-{$birth_date_array[1]}-{$birth_date_array[2]}");
    $day2 = new DateTime();    
    $interval1 = $day1->diff($day2, true);
    $baseday =  (int)($interval1->format('%a'));
    if ((int)$maxage <= (int)$age) {
        $pointday = 0;
    } else {
        $maxage--;
        $day3 = new DateTime((date('Y') + ($maxage - $age)) . "-{$birth_date_array[1]}-{$birth_date_array[2]}");
        $interval2 = $day2->diff($day3, true);
        $pointday = (int)($interval2->format('%a'))+1;
    }


    $reslut = [
        [
            "result" => "success",
            "age"=>$age ."歳",
            "baseday" => $baseday . "日(生きてきた日数)",
            "pointday" => $pointday . "日(" .($maxage +1). "歳まであと)"
        ]
    ];
    return json_encode($reslut);
}

if (!check1($birth_date)) {
    print json_encode([
        [
            "result" => "error",
            "error" => "string is invalid1"
        ]
    ]);
} elseif (!check2($max_age)) {
    print json_encode([
        [
            "result" => "error",
            "error" => "string is invalid2"
        ]
    ]);
} else {
    print sumup($birth_date, $max_age);
}

タグ

39, Access-Control-Allow-Origin, API, header, lt, php, POST, url, WebApi, お願い, カウント, コード, こちら, ご報告, ご愛嬌, ご自身, サーバー, サンプル, そこ, それ, まし, レスポンス, 下記, 今回, 今日, 体調, 作り方, 叩き, 年齢, 日数, 昨日, 歳, 状態, 現在, 生年月日, 発熱, 箇所, 考え方, 胃, 腸, 菌, 言語, 負荷, 返却, 通り, 適当, 風邪,

JavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)

2021.11.17

Logging

謎の訪問者さんが検索窓を使用して何度かググっているので要望にお応えJavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)というものを作りました。以前、csvを元にテーブルを作成するものを作っていました、ソースコードはそれを応用して作っています。実際、数万行に渡るファイルを自動計算するには、かなり爆速のパソコンが必要になります。このプログラムで耐えれるのは精々、1,000行あたりだと思います。

過去のコードと今回のサンプルデモのリンクを貼っときます。

どうぞご自由にお使いください。

https://zip358.com/tool/demo47/

"use strict";
var csv = {
	load:async function(filename,id){
		const responseFile = await fetch(filename);
        const result = await responseFile.text()
		let separate1 = /\r\n/;
		let separate2 = ",";
		let data = (result.split(separate1)).map(function(value){
			return (value.split(separate2)).map(function(value1){
				return value1;
			});
		});
		let sum =[];
		for (const usedata of data) {
            (usedata).map(function(val,index,array){
                sum[index] = (isNaN(parseInt(sum[index]))?0:parseInt(sum[index])) + parseInt(array[index]);
            });
		}
        console.log(sum);
		document.getElementById(id).innerHTML = sum.join(",");
		return "OK";
	}
};
csv.load("math.csv?", "sum");

タグ

000, １, async, await, const, CSV, fetch, filename, function, ID, javascript, JS, load, quot, res, responseFile, strict, sum, use, var, お応え, かなり, コード, ご自由, サンプル, ソース, それ, テーブル, デモ, パソコン, ファイル, プログラム, もの, リンク, 今回, 以前, 何度か, 作成, 使用, 元, 合計, 実際, 必要, 応用, 数万, 検索窓, 爆速, 精々, 自動, 要望, 計算, 訪問者, 謎, 過去,

このサイトの背景色を勝色に変えました。縁起の良い色ということで。

2021.10.31

Logging

今日はブログ投稿お休みの日だけど、報告ということで書いています。このサイトの背景色を勝色に変えました。縁起の良い色ということで、その色にしました?

前々から背景色を黒に近い色に変えようと思っていたのですが、なかなか踏ん切りがつかなくてやっとこさ、本日変えました。これでちょっとアンダーワールドなサイトに見えるかもしれませんが、それはそれで良いです。飽きたらまた白に変えるかもしれませんが今の所、この勝色で置いておこうと思います。

あと、サンプルコードの動画はもうネタ切れなので、これからは自分が作ったコードをサラッと見せるとかDEMOコードをサラッと見せるようにします。

トイウコトデ、今日は10月最後の日曜日でハロウィーンらしいですが高知のひろめ市場に行くこともなく、皆が騒いで終電で帰る頃には自分は夢の中だと思います。まだ仕事も決まらず悔しい思いの中、年を越しそうですね。ちょっと悔しいですが、結果は結果なので坦々と日々頑張るしかないかなと思います。

タグ

10, demo, あと, アンダーワールド, お休み, コード, こと, これ, サイト, サンプル, それ, トイウコトデ, ネタ切れ, ハロウィーン, ひろめ, ブログ, 中, 今, 今日, 仕事, 前々, 動画, 勝色, 坦, 報告, 夢, 市場, 年, 所, 投稿, 日, 日曜日, 最後, 本日, 白, 皆, 終電, 結果, 縁起, 背景色, 自分, 色, 頃, 高知, 黒,

プログラム言語レッスン動画じゃない緩いやつ始めます。いやハジメマシタ！！

2021.10.25

Logging

プログラム言語レッスン動画じゃない緩いやつ始めます。YOUTUBEでむかし、ズブズブなPHP言語レッスン動画をUPしていました、今回は音声説明も何もないダダ、コードを書いている緩い動画を日々UPしていきます。動画に音楽を添えたスタイルにしようと思いますが、その他の解説や何やら動画に組み込みません。解説は概要に書くか、難しくなってきたらブログ記事にしようと思います。書いたコードサンプルはGithubにでもUPしていきます。

ネタが尽きたら動画UPの頻度が落ちると思います。タイトルは『T2がコードを10年書いている』です、今のYOUTUBEチャンネルを使ってUPしていきます。

トイウコトデ早速UPしました。

初回はIF文で動作するプログラムになります。ソースコードは下記に置いていますのでご自由に使用くださいませ。

https://github.com/zip358/T2_pg

追記：音声での解説を検討中。

タグ

10, 2, com, github, https, if, php, Qq-ctgcMRWQ, UP, watch, www, youtube, コード, サンプル, スタイル, ズブズブ, ソース, その他, タイトル, だだ, チャンネル, トイウコトデ, ネタ, ハジメマシタ, ブログ, プログラム, むかし, やつ, レッスン, 下記, 今, 今回, 何, 使用, 初回, 動作, 動画, 文, 日々, 概要, 解説, 言語, 記事, 説明, 音声, 音楽, 頻度,

PHPのこれは知っているでしょ。知らない人でもエンジニアしている人はいるけどね。#駆け出し

2021.10.14

Logging

今日から書く時間、正確には記事のUPする時間を変更しました、変更した理由はソーシャルメディアからの流入を増やそうという事から時間帯を変更しました。PS.この頃、ダイエットの一環で自転車に乗って小一時間運動しています。

さて、PHP言語をこの頃、触っていなかったので、久々にサンプルコードを書きました。前々の会社ではクラスの概念を知らない人がいてその人にオブジェクト指向を丁寧に教えてたのですが、何だか覚えたら何か自分で覚えたみたいに言っていて、やるせない気持ちになった事を覚えています。

今回書いたサンプルコードは?と?は同じコード動きをするものだという事は理解できると思います、プログラムって、最終的に正確な動作していれば問題ないのです。最初からシンプルなコードを書こうとはせず、今の自分のベストコードを書けば良いです。大体、過去のコードを見るともっとシンプルに書けるなと思います、それは自分の技術が成長している証です。そういう事ですので日々努力していれば道がひらけます。

自分みたいにダラダラと生活していると中々、道がひらけないので注意してくださいな。

https://zip358.com/tool/demo45/

以上、現場からでした。

<?php
//?
function foo1 (){
    return new class {
        public static function hoge(){
            print "foo1->class->hoge".PHP_EOL;
        }
    };
}
foo1()->hoge();

//?
function foo2(){
    //return array("hoge"=>"foo2->hoge");
    return ["hoge"=>"foo2->hoge"];
}

print foo2()["hoge"].PHP_EOL;

//?
function foo3(){
    $obj = new class{
        public static function hoge(){
            print "foo3->class->hoge".PHP_EOL;
        }
    };
    return $obj;
}

foo3()->hoge();

タグ

php, PS, UP, エンジニア, オブジェクト, クラス, コード, これ, サンプル, シンプル, ソーシャル, ダイエット, プログラム, ベスト, メディア, もの, 一, 一環, 丁寧, 久々, 事, 人, 今, 今回, 今日, 会社, 前々, 動作, 変更, 大体, 帯, 指向, 時間, 最初, 概念, 正確, 気持ち, 流入, 理由, 理解, 自分, 自転車, 言語, 記事, 運動, 過去, 頃, 駆け出し,

C#でwebview2を使用して情報を収集するためのサンプルコード。

2021.08.22

Logging

今日は日曜日ですね。先日は久しぶりにお天気になったので外へ出ていっておりました。これを投稿する日は晴れているでしょうか。

さてjavaを勉強している合間にC#も勉強しております。javaを勉強しているとC#に応用が効くのでとてもやりやすいですね。webview2というオブジェクトをインストールして使用しました、VC#2019で開発しているのですが既存のwebBrowserというオブジェクトは全然というほど役に立ちません。例えばYahooのトップページを開いたらjavascriptエラーのアラートが表示されたりして動作してくれません。おそらくwebBrowserというオブジェクトを使用して何か開発している人はあまりいないじゃないかなと思います。

今回、作成したサンプルコードはYahoo!ニュースのITニュースのタイトルとリンクを収集するものですが、この方法を応用してブラウザの作業を自動化することはそれ程難しくないと思っています。

サンプルコードの一部を記載します＝ボタンをクリックする場所に埋め込んだソースコードになります。因みにawaitを使用しているのでボタンクリックにはasyncしてあげる必要があります。

※注意事項としてYahoo!ニュースのソースコードが変わればそれに対応したコードを記載する必要があります。

PM> Install-Package Microsoft.Web.WebView2 -Version 1.0.902.49

        async private void button1_Click(object sender, EventArgs e)
        {

         var result = await webView21.ExecuteScriptAsync(
                "(()=>{let obj = document.querySelectorAll(\"#uamods-topics > div > div > div > ul > li > a\");" +
                "let str = \"\";" +
                "for (let i = 0; i < obj.length; i++)" +
                "{" +
                "str += obj[i].innerText + \"[\" + obj[i].href + \"],\";" +
                "}" +
                "return str;" +
                "})();"
             );
            richTextBox1.Text = result.Replace(",","\n").Replace("\"","");
        }

タグ

2, 2019, IT, java, javascript, VC++, webBrowser, webview, Yahoo, アラート, インストール, エラー, オブジェクト, コード, こと, これ, サンプル, タイトル, ため, ドップ, ニュース, ブラウザ, ページ, もの, リンク, 久しぶり, 人, 今回, 今日, 作成, 作業, 使用, 先日, 勉強, 動作, 収集, 合間, 外, 天気, 役, 応用, 情報, 投稿, 方法, 既存, 日, 日曜日, 自動, 表示, 開発,

彼のVue.jsの入門解説動画が分かりやすいかも。超入門は理解しました。

2021.07.12

Logging

vue.jsを勉強したい方はよしぴーのYouTubeプログラミングスクールの超Vue.jsの入門解説動画が分かりやすいかも。自分は入門版は理解しました。尚、bodyにID付けて試すのは辞めとけよ。bodyにIDを付けて動かないなぁとかしないように！！ドキュメントにもbodyにIDを付けるのは推奨しないと記載しております。動画を見て背景の色を動的に変えるvue.jsの簡単なサンプルプログラム作りました。コード書いていてjavascriptで書くよりもvue.jsなどのライブラリ？を使用して書くほうが短いコードで書けるので良いなと実感。

htmlコードとvue.jsのコードは下記になります、最終的にはvue.jsでアプリ作りたいな（時間がない？^^;）。SPAに関して難しいという意識がある人も触っていくうちに慣れると思います。因みに学習能力が高い人はこんなの作れちゃうみたいですね、学習してまだ二週間しか経過していなくてゴニョゴニョ作れている所がへぷさん（@HEP1147）、凄いところ！！ですね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<style>
    #el{
        width: 100vw;
        height: 100vh;
    }
</style>
<title>背景の色を変える</title>
</head>
<body>
<div id="el" v-on:mousemove="mouseXY($event)">
    <span v-on:click="colorclick('#000')"style="color:#000">■</span>
    <span v-on:click="colorclick('#fff')"style="color:#fff">■</span>
    <span v-on:click="colorclick('#4eaeec')"style="color:#4eaeec">■</span>
    <span v-on:click="colorclick('#4eeccc')"style="color:#4eeccc">■</span>
    ---{{ color }}---
    X={{x}},Y={{y}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="./main.js?<?=time()?>"></script>
</body>
</html>

var vm = new Vue({
    el:"#el",
    data:{
        color:"#fff",
        x:0,
        y:0
    },
    methods:{
        colorclick:function(c){
            this.color = c;
            document.body.style.backgroundColor = c;
            return true;
        },
        mouseXY:function(event){
            this.x = event.clientX;
            this.y = event.clientY;
        }
    }    
});
  

タグ

body, html, ID, javascript, JS, SPA, vue, youtube, アプリ, うち, コード, サンプル, スクール, ドキュメント, プログラミング, プログラム, よし, ライブラリ, 下記, 人, 使用, 入門, 勉強, 動画, 学習, 実感, 彼, 意識, 推奨, 方, 時間, 理解, 簡単, 背景, 能力, 自分, 色, 解説, 記載, 超,

つかみに滑った感があるけど、中身はスベってない機械学習の数学講座。

2021.03.14

Logging

つかみに滑った感があるけど、中身はスベってない機械学習の数学講座。二時間というボリュームはあるものの、これ無料でUPされている所が凄いなと思います。機械学習やっていく中で数学は必要です、人工知能のサンプルを動かすだけだったり、少し応用ぐらいなら数学は必要はないのですがやっぱ応用したいなという時はヨビノリたくみさんの数学講座のこの動画は必要な話になります。

人工知能の茂木健一郎さんの東大講座も面白いですよ。人工知能の歴史から入っていて触りも良い感じです。あれですよね、昔は良質な動画なんてなかったので高校や大学が必要だったと思いますが、いまやネット環境があれば探せば良質な情報に行き当たるので、本当に言い訳が出来なくなった世の中だと思います。ネットで探せば出来ることばかりだと自分は思いますので、本当に言い訳が出来なくなった・・・。

タグ

UP, あれ, こと, これ, サンプル, たくみ, ネット, ボリューム, ヨビノリ, 世, 中, 中身, 二, 人工, 動画, 大学, 学習, 少し, 必要, 応用, 情報, 感, 感じ, 所, 数学, 昔, 時, 本当, 東大, 機械, 歴史, 無料, 環境, 知能, 自分, 良質, 茂木健一郎, 言い訳, 話, 講座, 高校,

手前味噌な機械学習！？。

2020.09.01

Logging

分類分けで機械学習教師ありのモデルを作り、新たなデータで推測するという一連の過程をやってみたよーーー?
ちなみに分類分けとしてはあまり機能していないだけどね・・・。
何が難しかったか・・・Pythonをサーバで動かすようにするところと・・・何故かすんなり動いてくれなかった。そして機械学習させるデータを作るのがやはり面倒だった、途中から分類分けって感じじゃなく１分類という感覚で重み付けしました。

尚、サンプルとして表示しているのは、機械学習させてモデルを保存させるやつです。この他にもいろいろなファイルがあるのだけど、例えばデータを生成させたりする処理ファイルや保存したモデルから推測させる処理ファイルなどいろいろなファイルがあるのだけど、全て解説するのはちょっと面倒なので今回はこれだけです。

あと質問箱と連携するのは今後の質問によって決めようと思います。いちおう、ほぼその部分も完成しています。コードを手直してそれぞれをファイル連携してゴニョゴニョするという作業が残っています。

追記：きっちり分類分けしてそのデータをansの中に正解解答としていれてあげて学習させるとまぁまぁ良い感じです。

from sklearn.linear_model import LinearRegression
model = LinearRegression()

import pandas as pd
from sklearn.tree import DecisionTreeClassifier
import pickle
X = pd.read_csv("Question.csv", header=None).values.tolist()
ans = []
val = 0
for num1 in range(len(X)):
	for num2 in range(len(X[num1])):
		if float(X[num1][num2])>=0.5:
			val = val + 1
	val = float(float(val) / float(len(X)) * 100)
	ans.append(str(val))
	val = 0
model = DecisionTreeClassifier(max_depth=999)
model.fit(X,ans)
print(ans,"<==>",model.predict(X))
# モデルを保存する
filename = 'Q_model.sav'
pickle.dump(model, open(filename, 'wb'))

タグ

１, Python, あと, いろいろ, コード, これだけ, サーバ, サンプル, それぞれ, データ, ところ, ファイル, モデル, やつ, 一連, 今回, 今後, 他, 何, 保存, 全て, 処理, 分け, 分類, 学習, 完成, 感覚, 手前味噌, 手直, 推測, 教師, 機械, 機能, 生成, 表示, 解説, 質問, 途中, 連携, 過程, 部分, 重み, 面倒,

WEBお問い合わせフォームのお値段はいったい幾ら？

2020.01.17

Logging

WEBお問い合わせフォームのお値段はいったい幾らなのか？
堀江貴文氏はデジタルの値段は限りなくゼロに近くなると言っていたけど、無料のWEB申し込みフォームやお問い合わせフォームはある。自分もお問い合わせフォームの簡易的な物を作ってみましたのでファイルをアップしますね。

テンプレートエンジンとしてtwig3.0を使用しています、そのため動作環境はPHP7.2以上になります。ソースコードの可変は行って構いません、またこのソースコードの動作保証などは致しません。WEB担当者様が確認を行いバグ等があれば修正を行ってください。

尚、Composerでtwigをインストール済みという事が前提となります。また送信部分やエラー処理についてはご自身で機能の追加が必要となります。

サンプルページ
https://zip358.com/tool/request/

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>お問い合わせ</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <script src="js/common.js"></script>
    <style>
        .jumbotron {
            background-color: #2bd4d0;
            color: #fff;
        }

        .btn-primary {
            color: #fff;
            background-color: #2bd4d0 !important;
            border-color: #2bd4d0 !important;
        }

        .input-group-text {
            background-color: #2bd4d0;
            border: 1px solid #2bd4d0;
        }
    </style>
</head>

<body>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">お問い合わせ</h1>
            <p class="lead">必須項目を入力し送信ボタンを押してください。<br>DEMOのため送信はできません</p>
        </div>
        <div class="alert alert-warning" id="error_sendmail" role="alert">
        </div>
    </div>
    <form action="index.php" method="POST">
        <div class="container">
            <div class="row">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">お名前[必須]</span>
                    </div>
                    <input type="text" name="name" class="form-control" id="name" placeholder="name" value="{{name}}">
                </div>
                <div class="alert alert-warning" id="error_name" role="alert">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">メールアドレス[必須]</span>
                    </div>
                    <input type="email" name="email" class="form-control" id="email" placeholder="name@example.com"
                        value="{{email}}">
                </div>
                <div class="alert alert-warning" id="error_email" role="alert">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">@</span>
                    </div>
                    <input type="text" name="twitter_account" class="form-control" placeholder="twitter account"
                        aria-label="twitter account" aria-describedby="basic-addon1" value="{{twitter_account}}">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">お問い合わせ内容[必須]</span>
                    </div>
                    <select name="meun" class="form-control" id="exampleFormControlSelect1">
                        {% for selectop in meun_option %}
                        <option value="{{selectop.value}}" {{ selectop.value == selectoped ? " selected":"" }}>
                            {{selectop.name}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="alert alert-warning" id="error_meun" role="alert">
                </div>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">コメント[必須]</span>
                    </div>
                    <textarea name="comment" rows="10" class="form-control" aria-label="コメント">{{comment}}</textarea>
                </div>
            </div>
            <div class="row">
                <footer class="blockquote-footer">
                    <small class="text-muted">
                        ご自由に記入ください。
                    </small>
                </footer>
            </div>
            <div class="alert alert-warning" id="error_comment" role="alert">
            </div>
            <button type="submit" class="mt-2 btn btn-primary btn-lg btn-block">送信する</button>
        </div>
    </form>
</body>

</html>

<?php
session_start();
require __DIR__ . '/vendor/autoload.php';
use Twig\Environment;
use Twig\Loader\FilesystemLoader;

$loader = new FilesystemLoader(__DIR__.'/templates');
$twig = new Environment($loader);
$meun_option = json_decode(file_get_contents("js/select.json"));

$form = ["name","email","twitter_account","meun","comment"];
$data = [];

if($_POST){
	foreach($_POST as $key=>$val){
		$_SESSION[$key] = strip_tags($val);
	}
}
if($_SESSION){
	foreach($_SESSION as $key=>$val){
		$_SESSION[$key] = strip_tags($val);
	}
}

foreach($form as $key => $val){
	$data[$val] = $_SESSION[$val]?$_SESSION[$val]:"";
}

extract($data);

print $twig->render('index.html.twig',["name"=>$name,"email"=>$email,"twitter_account"=>$twitter_account,"selectoped"=>$meun,"comment" => $comment,"meun_option"=>$meun_option]);

タグ

3.0, 358, 7.2, com, Composer, DOCTYPE, gt, html, https, lt, php, request, tool, Twig, web, www, zip, アップ, インストール, エラー, エンジン, お問い合わせ, コード, ご自身, サンプル, ゼロ, ソース, ため, デジタル, テンプレート, バグ, ファイル, フォーム, ページ, 事, 使用, 保証, 修正, 値段, 処理, 前提, 動作, 堀江貴文, 幾ら, 必要, 担当者, 機能, 無料, 物, 環境, 確認, 簡易的, 自分, 追加, 送信, 部分,

QuartzJapan[クオーツジャパン]を知ってる？

2020.01.15

Logging

QuartzJapanを知ってる方はこの記事をスルーして大丈夫です。自分は今日知ったばかりです。クオーツジャパンとは簡単に言えば、これから先、世界で起こるHOTなサービスやテクノロジーなどの情報をメールとアプリで配信してくれるサービスです。

月額1000円で最新の情報が手に入るというのは良いかなと感じます。ただ自分、現在安定した収入がないので、契約を結びませんでしたがニューズピックスよりも情報が良さげかなと感じました。ニューズピックスは動画配信などに力を入れている為か肝心の記事は殆ど外部からのニュースでサイトを埋めている気がします。

実際、契約を結んでいないので評価し難いのですが朝と夕方に記事が毎日配信されるということです、サンプルを読む限り良い感じがします。ビジネスマンや最新の情報が読みたい人は下記より購買が可能になります。
なお、自分には一銭も収益は入りません…。

https://qz.com/japan/subscribe/payment/

タグ

1000, HOT, QuartzJapan, アプリ, クオーツ, こと, これ, サービス, サイト, サンプル, ジャパン, スルー, テクノロジー, ニュース, ビジネスマン, ピックス, メール, 一銭, 下記, 世界, 人, 今日, 先, 力, 動画, 収入, 収益, 可能, 夕方, 外部, 契約, 安定, 実際, 情報, 感じ, 手, 方, 最新, 月額, 朝, 殆ど, 毎日, 気, 為, 現在, 簡単, 肝心, 自分, 記事, 評価, 購買, 配信,

面白くないような内容が実は人生を楽にするじゃないかな？

2019.12.16

Logging

たぶん、普通の人は娯楽番組などをみるのが楽しいじゃないかなと
思います。自分は娯楽番組は全然見ない、見なくなった理由は
面白くあまり感じないから、
それよりテクノロジーなどの番組を見るほうが面白く感じます。

人工知能に興味のある方は上記の動画をみると初心者でも
ある程度、プログラムのことが分かっている方なら
サンプルコードなどを実行できたりします。

話戻しまして、何故、、、娯楽番組が面白くないのか
よくわからないのですが・・・そういう性なのかなと思います。

自分が作ったものが動くというのは結構面白いですよ。
これからプログラムを学ぶ方は自分が作りたいものが掲載している本などや
YOUTUBE動画などの解説しているものを探し出して
トライしてみると良いかもしれません。

タグ

youtube, コード, こと, これ, サンプル, それ, テクノロジー, トライ, プログラム, もの, 上記, 人, 人工, 人生, 内容, 初心者, 動画, 娯楽, 実行, 性, 掲載, 方, 普通, 本, 理由, 番組, 知能, 自分, 興味, 解説,

PHP非同期の考え方サンプル。

2019.11.12

Logging

非同期の考え方サンプルです。
さて非同期ってなんでしょうか？
非同期とは次から次へと仕事をお願いする状態。
仕事量が重いと結果が返るまで時間がかかります。
なので、Aという仕事が重く、B、Cという仕事が楽な場合は
A、B、Cという仕事を順番に頼んでもAの結果はBの後やCの後に
結果が返ってきます。

逆に同期処理とは何か？
A、B、C の順に仕事を頼むと、Aの仕事が終えた後にB、Cと仕事を
行います。

非同期＝並列処理と考えると良いかも。
同期処理＝逐次処理と考えると良いかも。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Document</title>
    <script>
        $(function(){
            $("#btn").on("click",function(){
                test();
                return false;
            })
        });
        function test(){
            var data = $("#frm").serialize();
            $.ajax({
                type: "post",
                url: "url.php",
                data: data,
                dataType: "json",
                success: function (response) {
                    console.log(response);
                }
            });
        }
    </script>
</head>
<body>
    <a href="#" id="btn">クリック</a>
    <form id="frm">
        <input type="text" name="test1">
        <input type="text" name="test2">
        <input type="text" name="test3">
    </form>
</body>
</html>

<?php
//url.php
$data = [];
if(!is_null($_POST)){
    foreach($_POST as $key=>$val){
        $data[$key] = $val;
    }
    print(json_encode($data));
}else{
    print(0);
}

タグ

65, 8, charset, com, DOCTYPE, en, gt, head, html, lang, lt, meta, name, php, quot, UTF-, VHlW, WPUDY, youtube, お願い, サンプル, 並列, 仕事, 何, 処理, 同期, 場合, 後, 時間, 次, 状態, 結果, 考え方, 逆, 順, 順番,

phpばっかり触っていた人がPython触ってみて！？

2019.11.02

Logging

phpばっかり触っていた人がPython触って
実際コードを書いてみて思ったことは、括弧（かっこ）が無いことで
コードが見ずらい、なれるまで時間がかかりそうです。
片っ端からサンプルコードを見ていてやっとなれてきたかなってところですね。
Functionなんかが入るとまだまだ怪奇です。
PythonのコードはPHPとは真逆で、感覚的にはnode.jsなんかと同じかなと。
web上での動作的な考え方もnode.jsに似てますね。
特にPythonは学術的なコードで計算式からグラフなどを表示するなどは
いろいろなライブラリーが存在していますし、ご存知かと思いますが
AI（人工知能：機械学習）には欠かせない言語の一つかなと思います。
ちなみに音声をグラフ化するのも簡単でした。下記のような感じで表示可能です。

タグ

AI, function, JS, node, php, Python, web, いろいろ, かっこ, グラフ, コード, こと, ご存知, サンプル, ところ, なんか, らい, ライブラリー, 一つ, 上, 下記, 人, 人工, 動作, 可能, 存在, 学習, 実際, 怪奇, 感じ, 括弧, 時間, 機械, 片っ端, 知能, 簡単, 考え方, 表示, 言語, 計算, 音声,

高知県のダム貯水率をグラフ化してみた。

2019.09.21

Logging

高知県のダム貯水率をグラフ化してみた。
親戚にダムに勤めている人がいるのがきっかけで貯水率って
HPで表示させているのかなという事で調べてみました。
結果、かなり古いデザインサイトが現れた。
何とも懐かしい気持ちになりました。
そこでこの表からグラフ化してみたいなとか思って
ゴニョゴニョ作ってみた。
ちなみにソースコードが変わると
抜き取り出来なくなります。
追記：やはり変更されていました2へ続く
ソースコードを貼っときます。
ajaxとPHPを使用してます、XPathで貯水率だけ抜き取ってます。
サンプルサイト
https://zip358.com/tool/demo6/index.html

<?php
$html = file_get_contents("高知県のダム情報のURL");
$html = mb_convert_encoding($html,"UTF-8","SJIS");
$dom = new DOMDocument();
$html = mb_convert_encoding($html, "HTML-ENTITIES", 'UTF-8');
@$dom->loadHTML($html,LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
$ary=array(
    "nagase",
    "kamaidani",
    "kagami",
    "sameura",
    "kirimi",
    "sakamoto",
    "oodo",
    "nakasugawa",
    "iburigawa"
);
for($i=3;$i<=11;$i++){
    foreach ($xpath->query("/html/body/form/div[2]/table/tr/td/table/tr[$i]/td[7]") as $node) {
        $r[] = preg_replace("/x{00a0}/u","",$node->textContent);
    }
}
foreach ($r as $key => $value) {
    $obj[$ary[$key]] = $value;
}
print json_encode($obj);

$(function(){
    dam();
    //setInterval(dam,9999)
});
function dam(){
    $.ajax({
        url　: './dam.php',
        dataType : 'json',
        success　: function(obj){
            $("#nagase").attr( "style","width:"+ parseInt(obj.nagase) +"%");
            $("#kamaidani").attr( "style","width:"+ parseInt(obj.kamaidani) +"%");
            $("#kagami").attr( "style","width:"+ parseInt(obj.kagami) +"%");
            $("#sameura").attr( "style","width:"+ parseInt(obj.sameura) +"%");
            $("#kirimi").attr( "style","width:"+ parseInt(obj.kirimi) +"%");
            $("#sakamoto").attr( "style","width:"+ parseInt(obj.sakamoto) +"%");
            $("#oodo").attr( "style","width:"+ parseInt(obj.oodo) +"%");
            $("#nakasugawa").attr( "style","width:"+ parseInt(obj.nakasugawa) +"%");
            $("#iburigawa").attr( "style","width:"+ parseInt(obj.iburigawa) +"%");
            $("#nagase").attr( "aria-valuenow",parseInt(obj.nagase));
            $("#kamaidani").attr( "aria-valuenow",parseInt(obj.kamaidani));
            $("#kagami").attr( "aria-valuenow",parseInt(obj.kagami));
            $("#sameura").attr( "aria-valuenow",parseInt(obj.sameura));
            $("#kirimi").attr( "aria-valuenow",parseInt(obj.kirimi));
            $("#sakamoto").attr( "aria-valuenow",parseInt(obj.sakamoto));
            $("#oodo").attr( "aria-valuenow",parseInt(obj.oodo));
            $("#nakasugawa").attr( "aria-valuenow",parseInt(obj.nakasugawa));
            $("#iburigawa").attr( "aria-valuenow",parseInt(obj.iburigawa));
            $("#nagase").text(obj.nagase + "%");
            $("#kamaidani").text(obj.kamaidani + "%");
            $("#kagami").text(obj.kagami + "%");
            $("#sameura").text(obj.sameura + "%");
            $("#kirimi").text(obj.kirimi + "%");
            $("#sakamoto").text(obj.sakamoto + "%");
            $("#oodo").text(obj.oodo + "%");
            $("#nakasugawa").text(obj.nakasugawa + "%");
            $("#iburigawa").text(obj.iburigawa + "%");
        },
        error: function(obj){
            alert("error");
        }
    });
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高知県のダム貯水率</title>
    <script src="../jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <script src="./js/dam.js"></script>
    <style>
        body{
            background-color: #3e4654;
            color: aliceblue;
        }
    </style>
</head>
<body class="d-flex flex-column h-100">
    <main role="main" class="flex-shrink-0">
        <div class="container">
            <table class="table table-dark">
                <tr>
                    <td style="width:15%">
                        <p>永瀬ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress"  style="width:100%">
                            <div id="nagase" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>鎌井谷ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kamaidani" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>鏡ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kagami" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>早明浦ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="sameura" class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>桐見ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kirimi" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>坂本ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="sakamoto" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>大渡ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="oodo" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>中筋川ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="nakasugawa" class="progress-bar progress-bar-striped progress-bar-animated bg-dark" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>以布利川ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="iburigawa" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </main>
    <footer class="footer mt-auto py-3">
        <div class="container">
            <span class="text-muted">©zip358.com</span>
        </div>
    </footer>
</body>
</html>

タグ

2, 358, 6, 8, ajax, com, contents, convert, demo, encoding, file, GET, HP, html, https, index, lt, mb, php, SJIS, tool, url, UTF-, XPath, zip, かなり, きっかけ, グラフ, コード, ゴニョゴニョ, サイト, サンプル, ソース, そこ, ダム, デザイン, 事, 人, 何, 使用, 変更, 情報, 気持ち, 結果, 表, 表示, 親戚, 貯水, 追記, 高知県,

変なコードを書いてしまった。それはいつものこと（笑）

2019.08.10

Logging

変なコードを書いてしまった。
PHPにstr_repeatという関数が存在しているのだけど
何のために使用するのか全然わからない。関数の内容は任意の文字を
指定回数、繰り返した文字列として返してくれるというものです。
試しにその関数を使用し変なコードを書きました。
茶目っ気ですので…。これがPCに負担がかかるとか
無限ループとかの処理にすると御縄なんでしょうけど・・・。
サンプルコードはこちらから
https://zip358.com/tool/demo5/index-11.php

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="../jquery.tubular.1.0.1/js/jquery.tubular.1.0.js"></script>
        <link rel="stylesheet" type="text/css" href="../jquery.tubular.1.0.1/css/screen.css">
        <script>
            $('document').ready(function() {
            var options = {
                videoId: '760lRwLKFF0',
                mute: true,
            };
            $('#bgmovie').tubular(options);
            });
        </script>
        <style>
            body{
                background-color: #000;
                color: #fff;
                font-size: 80px;
                line-height: 80px;
            }
            p{
                color: #38a9c5;
            }
        </style>
    </head>
    <body>
    <div id="bgmovie">
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
<?php
$str = str_repeat("高知 よさこい 踊る,",7);
var_dump(str_getcsv($str));
?>
<p class="oshite" data-oshite="<?=$str?>"style="text-decoration: underline">▼おして知るべし</p>
※おして知るべしをクリックすると7ウィンドウ開きますよ！！
<?php
    foreach(str_getcsv($str) as $val){
?>
<?php
    }
?>
</div>
        <script>
            $(function(){
                $(".oshite").on("click",function(){
                    let oshite = $(this).attr("data-oshite").split(",");
                    for(var i = 0 ; i < oshite.length ; i++){
                        if(oshite[i]!==""){
                            window.open("https://twitter.com/search?src=typed_query&q=" + encodeURIComponent(oshite[i]));
                        }
                    }
                });
            });
        </script>
        <script src='https://vjs.zencdn.net/7.6.0/video.js'></script>
    </body>
</html>

タグ

--, 11, 358, 5, 7, 8, ９, class, com, demo, DOCTYPE, endif, gt, html, IE, if, index, lt, lt-ie, no-js, PC, php, repeat, STR, tool, zip, いつも, コード, こちら, こと, これ, サンプル, それ, ため, もの, ループ, 任意, 何, 使用, 内容, 処理, 回数, 変, 存在, 指定, 文字, 文字列, 無限, 縄, 茶目っ気, 負担, 関数,

TinyMCE 5.0でwindowManager.openUrl使用してコードの送受信。

2019.08.03

Logging

TinyMCE 5.0の記事が好評だったので前回に続き、windowManager.openUrl使用してコードの送受信の内容を記載します。あくまでもサンプルコードです。プログラムなので他にもやり方はあると思います。前回の記事に勘どころは記載していますので割愛します。尚、自分は英語がダメダメですが幸いコードを読む力はある程度あるので何とかなりました。サンプルコードを記載しますので解析してみてください。

PHP＆HTMLコード

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/tool/bootstrap/css/bootstrap.css">
        <script src="/tool/jquery/jquery-3.4.1.js"></script>
    </head>
    <body>
        <form method="post">
        <textarea name="htmlcode1" class="form-control">
<?php
    echo urldecode($_GET["sdata"]);
?>
        </textarea>
        <input type="button" name="submitbtn" value="htmlcode-submit"class="btn btn-primary">
        </form>
        <script>
            var chageJson = function(data) {
            console.log(data);
            var JsonData = [];
            for (i = 0; i < data.length; i++) {
                if(/htmlcode/.test(data[i].name)){
                    data[i].value = encodeURIComponent(data[i].value);
                }
                JsonData[data[i].name] = data[i].value
            }
            //console.log(JSON.stringify(data));
            return JsonData;
            }
            $("[name=submitbtn]").on("click",function(){
                data = chageJson($("form").serializeArray());
                window.parent.postMessage({ mceAction: 'customAction',data:data});
                window.parent.postMessage({ mceAction: 'close' });
            });
        </script>
    </body>
</html>

jsコード

(function() {
    tinymce.create('tinymce.plugins.btxt', {
        init : function( ed,  url) {
            //console.log(ed);
            act = function(e)
            {
                    //console.log("e=",encodeURIComponent(e.selection.editor.getContent()));
                ed.windowManager.openUrl(
                    {
                    type: 'panel',
                    title: 'HTMLCODE',
                    url:url + "/btxt.php?sdata=" + encodeURIComponent(e.selection.editor.getContent()) ,
                    onMessage:function(api, details){
                      console.log(e);
                      //console.log('htmlcode1',decodeURIComponent(details.data.htmlcode1));
//                      var editorInstance = tinymce.editors[0];
                      e.selection.editor.setContent(decodeURIComponent(details.data.htmlcode1));
                   }
                }
                );
            };
              ed.ui.registry.addButton('btxt',{
                title : 'htmlcode',
                text: 'htmlcode',
                onAction:function(){act(ed)}
            });
        },
    getInfo : function() {
        return {
            longname : 'tinymce.plugins.btxt',
            author : 'taoka',
            authorurl : 'https://zip358.com',
            infourl : 'https://zip358.com',
            version : '1.0'
        };
    }
});
        tinymce.PluginManager.add('btxt', tinymce.plugins.btxt);
})();

タグ

--, 5.0, 7, 8, ９, class, DOCTYPE, endif, gt, html, IE, if, lt, lt-ie, no-js, openUrl, php, quot, TinyMCE, windowManager, コード, サンプル, ダメダメ, プログラム, やり方, 他, 使用, 内容, 前回, 割愛, 力, 勘どころ, 好評, 自分, 英語, 解析, 記事, 記載, 送受信,

jQuery独自プラグイン基本サンプル2

2019.01.19

Logging

忘れやすい自分のためにメモとして残しときます。

(function($){
    $.fn.smp = function (options) {
        var config = {
            text:"おいら"
        };
        var cfg = $.extend({}, config, options);
        cfg.text = cfg.text + "のお金";
        return $(this).html(cfg.text);
    };
})(jQuery);
$("#hoge1").smp({text:"ぼく"});
$("#hoge2").smp();

タグ

１, 2, cfg, config, extend, fn, function, hoge, html, jquery, options, return, smp, Text, this, var, おいら, お金, サンプル, ため, プラグイン, ぼく, メモ, 基本, 自分,

VBAオブジェクトを自動生成しイベントを付与する。

2019.01.12

Logging

VBAオブジェクトを自動生成しイベントを付与する。
サンプルコードです。
ダウンロードはこちら
https://zip358.com/tool/sample.zip

Dim chg_class(0 To 5) As chg
Public Sub objset()
Dim obj_ctl As Control
Dim i As Integer
For i = LBound(chg_class) To UBound(chg_class)
    Set obj_ctl = UserForm1.Controls.Add("Forms.TextBox.1", "Box" & i)
    obj_ctl.Top = 10 + 20 * i
    obj_ctl.Width = 200
    obj_ctl.Height = 20
    obj_ctl.Text = "ここを変更してみて、またはダブルクリック（" & i & "番）"
    Set chg_class(i) = New chg
    chg_class(i).set_evn obj_ctl, i
    Set obj_ctl = Nothing
Next i
End Sub

Private WithEvents TextB As MSForms.TextBox
Private index_no As Integer
Public Sub set_evn(hoge_obj As MSForms.TextBox, hoge As Integer)
    Set TextB = hoge_obj
    index_no = hoge
End Sub
Private Sub TextB_Change()
    MsgBox TextB.Text 'UserForm1("Box" & index_no)
End Sub
Private Sub TextB_DblClick(ByVal Cancel As MSForms.ReturnBoolean)
    MsgBox TextB.Text 'UserForm1("Box" & index_no)
End Sub

Private Sub TextBox1_Change()
MsgBox TextBox1
End Sub
Private Sub CommandButton1_Click()
End Sub
Private Sub UserForm_Click()
End Sub

タグ

0, １, 10, 20, 200, 358, 5, Add, amp, as, Box, chg, class, com, Control, Controls, ctl, Dim, For, Forms, Height, Integer, LBound, obj, objset, public, sample, set, Sub, Text, TextBox, To, tool, TOP, UBound, UserForm, VBA, Width, zip, イベント, オブジェクト, コード, ここ, こちら, サンプル, ダウンロード, 付与, 変更, 自動生成,