セレクトメニューの都道府県は毎回、作るよりストックしておくべし。

2021.12.13

Logging

駆け出しフロントエンドエンジニアさんや駆け出しコーダーさんの中にはお問い合わせなどで、都道府県を毎回、書いている人はいると思いますが、大体、同じことを何回もするのは無駄です。なので、自分専用の雛形を作っておくといいですよ。そうする事によって作業は結構、短縮されたりします。今回は自分がよく使う、セレクトメニューの都道府県をJSで都道府県リストを生成するように作りました。

都道府県生成

繰り返しになりますが、こんな感じに自分が使用するデータや独自の関数はストックしておくと作業効率は上がります、毎回調べてプログラミングやコードを書くのは仕事上では手間になるので辞めた方が良いです。

最後にJSコードとGitHubのリンクを貼っときますので、ご自由使用くださいませ。

https://github.com/zip358/select_jp_ken

let useKendata = [
    {'no':'01','name':'北海道'},
    {'no':'02','name':'青森県'},
    {'no':'03','name':'岩手県'},
    {'no':'04','name':'宮城県'},
    {'no':'05','name':'秋田県'},
    {'no':'06','name':'山形県'},
    {'no':'07','name':'福島県'},
    {'no':'08','name':'茨城県'},
    {'no':'09','name':'栃木県'},
    {'no':'10','name':'群馬県'},
    {'no':'11','name':'埼玉県'},
    {'no':'12','name':'千葉県'},
    {'no':'13','name':'東京都'},
    {'no':'14','name':'神奈川県'},
    {'no':'15','name':'新潟県'},
    {'no':'16','name':'富山県'},
    {'no':'17','name':'石川県'},
    {'no':'18','name':'福井県'},
    {'no':'19','name':'山梨県'},
    {'no':'20','name':'長野県'},
    {'no':'21','name':'岐阜県'},
    {'no':'22','name':'静岡県'},
    {'no':'23','name':'愛知県'},
    {'no':'24','name':'三重県'},
    {'no':'25','name':'滋賀県'},
    {'no':'26','name':'京都府'},
    {'no':'27','name':'大阪府'},
    {'no':'28','name':'兵庫県'},
    {'no':'29','name':'奈良県'},
    {'no':'30','name':'和歌山県'},
    {'no':'31','name':'鳥取県'},
    {'no':'32','name':'島根県'},
    {'no':'33','name':'岡山県'},
    {'no':'34','name':'広島県'},
    {'no':'35','name':'山口県'},
    {'no':'36','name':'徳島県'},
    {'no':'37','name':'香川県'},
    {'no':'38','name':'愛媛県'},
    {'no':'39','name':'高知県'},
    {'no':'40','name':'福岡県'},
    {'no':'41','name':'佐賀県'},
    {'no':'42','name':'長崎県'},
    {'no':'43','name':'熊本県'},
    {'no':'44','name':'大分県'},
    {'no':'45','name':'宮崎県'},
    {'no':'46','name':'鹿児島県'},
    {'no':'47','name':'沖縄県'},
];
document.getElementById("ken").insertAdjacentHTML('afterbegin',(function(ken){
    let str = '';
    for (const key in ken) {
        str+= '<option value=' + ken[key].no + '>' + ken[key].name +'</option>';
    }
    return str;
}(useKendata)));

タグ

01, 39, github, JS, let, name, no, useKendata, エンジニア, エンド, お問い合わせ, コーダー, コード, こと, ご自由, ストック, セレクト, データ, プログラミング, フロント, メニュー, リスト, リンク, , , , 今回, 仕事, 何回, 作業, 使用, 効率, 北海, 大体, 専用, 感じ, 手間, , 最後, 毎回, 無駄, 生成, 短縮, 自分, 都道府県, 関数, 雛形, 駆け出し,

結局、YOUTUBE Premium継続することにしました。過去記事を撤回。

2021.11.22

Logging

YOUTUBE Premium継続することにします。アマゾンミュージックを一週間ぐらい使用したのだけど、プライム会員のバージョンだと聞きたいなと思う音楽があまりにも少ない感じでした。なのでYOUTUBE広告が無くて音楽も結構な量があるYOUTUBE Premiumを継続することにしました。無収入の状態ではYOUTUBE Premiumのお金を支払い続けるのは贅沢なのかもしれませんが、音楽ない生活は自分はあまり考えられないです?。

特に本を読むやコードを書く時は音楽を聞いてするのとしないとでは、集中する時間が変わってきます?。

あとネットフリックスも再契約したいなと考えているのですが、これは自分が就職するまで我慢かなと思っています。仕事先が決まって仕事が始まると今度は観る時間がない問題になるのですが、特にIT系の仕事就くと結局休みもソースコードなどを書くことに時間を割いてしまってネットフリックスなんて見れない。今でも動画を見る時間は勿体なという気持ちになりますからね・・・でも見たいのです、矛盾してますね。

『新聞記者』 予告編 – Netflix

因みにネットフリックス以外にもサブスクリプションを再契約したいなと思うものはありますし、新たに始めたいサブスクリプションもあります。特に早急に復活させたいサブスクリプションはアドビのIllustratorですね。これはブログのアクセス数とも直結しているので、早々に復活させたいと思っています。

【1分でわかる】曲線と図形の組みあわせで似顔絵を描く方法 | Illustrator - アドビ公式

タグ

IT, Premium, youtube, アマゾン, お金, コード, こと, これ, ソース, ネットフリックス, バージョン, プライム, ミュージック, , 今度, 仕事, 休み, 会員, 使用, 収入, 問題, 契約, 就職, 広告, 感じ, 我慢, 撤回, , 時間, , 状態, 生活, , 結構, 継続, 自分, 記事, 過去, , 集中, 音楽,

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");
JSでCSVファイルの和

タグ

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

Kotlin言語をはじめて使用してアプリを作ろうとしています。

2021.11.09

Logging

Kotlin言語をはじめて使用してアプリを作ろうとしていますが、こちらでアプリのお披露目をする事は考えていません。自分の本名のドメインで紹介することになると思います。一度、桁読み漢字変換はfulluter言語で作ったことがあるのですが、リリースはしていません。今回は作ってリリースまで行いたいと思っています。それ程、難しいことはないと思っているので、リリースは数週間で出来ると思います(審査も含めて)。

kotlin言語をはじめて使用してアプリを作ろうとしています。

何故、Kotlin言語でアプリを開発しようと思ったか?、簡単に言えばiosにも移植出来るとのことなのでKotlin言語を選びました、そしてそれなりに勉強になるかなぁと思ったからです。動画を見てもらえれば分かる通り、いきなり動的な処理で制御しています。たぶん、いろいろな事を飛ばして勉強しています。参考書も持っていないのでサイトとYOUTUBEで調べつつ理解していこうと今、奮闘中です。今回書いた、ソースコードも調べたものです。

package com.example

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.Editable
import android.widget.EditText
import  android.text.TextWatcher
import android.util.Log
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        var editText = findViewById<EditText>(R.id.editTextTextN1)
        var textview = findViewById<TextView>(R.id.textView)
        editText.addTextChangedListener(object : TextWatcher {
            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {

            }

            override fun afterTextChanged(s: Editable?) {

            }

            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                Log.d("テキストが入力されました","$s")
                textview.text = s.toString()
            }
        }
        )
    }
}

タグ

fulluter, iOS, Kotlin, youtube, アプリ, いろいろ, お披露目, コード, こちら, こと, サイト, ソース, ドメイン, リリース, 一度, , , 今回, 何故, 使用, 処理, 制御, 勉強, 動画, 参考書, 変換, 奮闘, 審査, , 本名, , 漢字, 理解, 移植, 簡単, 紹介, 自分, 言語, 調べ, 通り, 開発,

らくてんのアフィリエイトを記事の下に取り付けるプラグインを作りました。

2021.11.02

Logging

らくてんの アフィリエイト を記事の下に取り付けるプラグインを作りました。Composerを使用して楽天のSDKを取ってきているので、そちらをプラグインの中にインストールする必要と アフィリエイト のAPIIDなども必要になりますのでそちらも御自身で構える必要がありますが、それ程難しいことはないプログラムコードだと思います。

あとCSSなどもご自身が使用するサイトのデザインに合わしてご使用ください。今回、WordPressのプラグインですがソースコードを見たいだければ分かる通り、AmzのSDKも取り入れようかなとか思ったのですが、処理が重たくなり表示速度が下がりそうだったので辞めました。因みにAmzのSDKはComposerに公開していないようです。公式サイトからzipでダウンロードするか、githubから入手する方法しかないようですね。

仕様として、タグのワードから商品を検索し表示する方法とショートカットを使用して商品を表示させる方法があります。例えばRakuten_Seller_param type=”search” word=”ひろゆきのシン・未来予測”このようにショートコード書くと下記のように表示されます。また記事の最後に自動で紹介商品も表示されます。

追記:リクエストが多くなるとバグるみたいな‥‥。いまいち下記が表示されていない原因がわからない

追記:記事の最後に自動で紹介する機能は、このサイトでは一旦停止しています。

[Rakuten_Seller_param type=”search” word=”ひろゆきのシン・未来予測”]

トイウコトデ、WordPressのソースコードになります。

<?php
/*
Plugin Name: Rakuten_Seller
Plugin URI: https://zip358.com/
Description: 楽天アフィリエイトを表示
Author: @zip358com
Version: 0.1
Author URI: https://zip358.com/
*/
require_once plugin_dir_path( __FILE__ ).'/vendor/autoload.php';
define("RAKUTEN_YOUR_APPLICATION_ID","xxxxxxxxxxxxxxx");
define("RAKUTEN_YOUR_AFFILIATE_ID","xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");

define("AMAZON_YOUR_ACCESS_KEY_ID","");
define("AMAZON_YOUR_SECRET_KEY","");
define("AMAZON_YOUR_ENDPOINT","");
define("AMAZON_YOUR_URL","");


function Rakuten_Seller_content_plus($content) {
    if(is_single()) {
       $content.='[Rakuten_Seller_param type="auto"]';
    }
    return $content;
}

function Rakuten_Seller($params = array()){
     $htmlcode = "";
    extract(shortcode_atts(array(
        'type'=>'',
        'word'=>''
    ), $params));
    $client = new RakutenRws_Client();
    // アプリID (デベロッパーID) をセットします
    $client->setApplicationId(RAKUTEN_YOUR_APPLICATION_ID);
     
    // アフィリエイトID をセットします(任意)
    $client->setAffiliateId(RAKUTEN_YOUR_AFFILIATE_ID);

    if($type==="auto"){
        $tags = get_the_tags();
        $htmlcode.= "<div class='rakuten_seller_div'>";
        foreach( $tags as $tag) { 
            $htmlcode.= Rakuten_code($client,$tag->name);
        }        
        $htmlcode.= "</div>";
        
    }elseif($type==="search"){
        $htmlcode.= "<div class='rakuten_seller_div'>";
        $htmlcode.= Rakuten_code($client,$word);
        $htmlcode.= "</div>";
    }

    return $htmlcode;
 }

function Rakuten_code($client,$word="JavaScript"){
    $htmlcode = "";
   
    // IchibaItem/Search API から、keyword=$word を検索します
    $response = $client->execute('IchibaItemSearch', array(
      'keyword' => $word,
      'genreInformationFlag' => 1
    ));
    // レスポンスが正しいかを isOk() で確認することができます
    $cnt = 0;
    if ($response->isOk()) {
        foreach ($response as $item) {
           $htmlcode.= "<div class='rakuten_seller_item'>".
           "<img src='".$item["mediumImageUrls"][0]["imageUrl"]."'>".
           "<p>".$item["itemName"]."</p>".
           "<a class='rakuten_btn' href='".$item["affiliateUrl"] . "' title='".$item["itemName"]."'><span>楽天で購入"."</span></a></div>";
           $htmlcode.= amazon_code($item["isbn"],$item["jan"]);
           if($cnt>0){
                break;
           }
           $cnt++;
        }

    } else {
        //echo 'Error:'.$response->getMessage();
    }
    return $htmlcode;
}

function amazon_code($isbn="",$jan=""){
    $htmlcode = "";

    return $htmlcode;
}


add_shortcode('Rakuten_Seller_param', 'Rakuten_Seller');
add_filter('the_content', 'Rakuten_Seller_content_plus');

タグ

Amz, APIID, Composer, css, github, SDK, WordPress, zip, あと, アフィリエイト, インストール, コード, こと, ご自身, サイト, ショート, ソース, そちら, ダウンロード, タグ, デザイン, プラグイン, プログラム, らくてん, ワード, , , 今回, 仕様, 使用, 入手, 公式, 公開, 処理, 商品, 必要, 方法, 検索, 楽天, 自身, 表示, 記事, 通り, 速度,

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

2021.10.31

Logging

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

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

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

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

タグ

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

T2がコードを10年書いている。Milliseconds-エラー対応編

2021.10.27

Logging

今回はエラー対応編です、ミリ秒を逐次表示するだけのコードだけどいろいろなひっかかる部分があるという事が動画を通して分かっていただければ幸いです。動画は高速なのでわかりにくいかもしれません、そんな人はgithubのヒストリーを閲覧ください。制作過程でどのような問題が現れたのかがわかると思います。

T2がコードを10年書いている。Milliseconds-エラー対応編part1

徐々に難しくなるかもしれませんが、一応、初心者が見て覚えると盗んで覚える、そして動画を見てプログラムって面白そうって思えるようなものを作っていきたいと思います。基本的に初心者がやってみたいなと思えるものを作っていければなと思っています。

思っていますが、それが出来るかは自分自身、分からないですけどね。なるべく心がけて作っていこうと思います。

https://github.com/zip358/T2_pg/commits/main/Milliseconds/assets/js/main.js

タグ

10, 2, github, Milliseconds-, いろいろ, エラー, コード, それ, ヒストリー, プログラム, ミリ, もの, , , 今回, 初心者, 制作, 動画, 問題, 対応, , 自分, 自身, 表示, 過程, 部分, 閲覧, 高速,

Twitterカードを確認するための公式チェックページが便利。

2021.10.26

Logging

先週は寒かったですが、今週からまた暖かくなると天気予報のキャスターが言っていたそうですが、どうなることやら。

Twitterカードを確認するための公式チェックページが便利です。そもそもTwitterカードって何と思った方もいると思いますので、簡単に説明するとTwitterでシェアする時にホームページ画面の画像やホームページの説明が表示されるアレです。因みにTwitterカードの設定をしていないとURLだけがタイムラインに流れていきます。

どうやればTwitterカードが設定することが出来るか?答えは結構かんたんです、HTMLタグのヘッダー部分に下記のmetaダグを記載してあげることでTwitterカードが表示されます。因みに今回はフェイスブックでシェアした時にも対応した形のソースコードです。フェイスブックの部分は良いよという方は、その部分は除いてください、また、ご自身のURLや表示したい説明に変更するようにしてくださいな。

<meta property="og:url" content="https://zip358.com/tool/tenji/">
<meta property="og:type" content="website">
<meta property="og:description" content="日本語を点字に変換します。α版です(日本語、英数字などを含むものを日本語点字に変換します)。">
<meta property="og:image:alt" content="tenji-image">
<meta property="og:image" content="https://zip358.com/tool/tenji/images/web-image.png">
<meta property="og:locale" content="ja">
<meta property="og:site_name" content="日本語を点字に変換する機械">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@zip358com" />
<meta name="twitter:domain" content="zip358.com" />
<meta name="twitter:title" content="日本語を点字に変換します。α版です(日本語、英数字などを含むものを日本語点字に変換します)。" />
<meta name="twitter:creator" content="@zip358com" />
<meta name="twitter:image" content="https://zip358.com/tool/tenji/images/web-image.png" /> 

最後に上記の設定した後、上手くTwitterカードが機能しているかを確認するためのTwitter公式のチェックページがあります、そちらにチェックしたいページのURLを記入することによりチェックが可能です。

https://cards-dev.twitter.com/validator

タグ

html, meta, Twitter, url, アレ, カード, かんたん, キャスター, コード, こと, ご自身, シェア, ソース, タイムライン, タグ, ため, チェック, フェイスブック, ページ, ヘッダー, ホームページ, 下記, 予報, 今回, 今週, 便利, 先週, 公式, 変更, 天気, 対応, , , , 画像, 画面, 確認, 答え, 簡単, 表示, 記載, 設定, 説明, 部分,

T2のお問い合わせフォームフロント側が緩く完成、続きは今の所なしかな。

2021.10.26

Logging

朝起きは三文の徳ですが・・・。本当なのでしょうか、朝方からお問い合わせフォームのちょこちょこと残りを制作しておりました。

T2のお問い合わせフォームフロント側が緩く完成しました、パチパチ?。この雛形を元に制作してくださいと業者へ持っていくと値引きはしてくれるとは思います。即興ですが一応、汎用性がある作りにしています。

NEOプログラマーがコードを10年書いているお問い合わせフォーム編-part1

フロント側は実はあまり得意ではないです、全然わからない訳ではないのですがこの頃、コードを書かなかったら抜け落ちている部分が結構あり反省しております?

NEOプログラマーがコードを10年書いている。お問い合わせフォーム編-part2

ソースコードはgithubに置いてありますのでご自由にご使用くださいませ。あまり労力とかかけていないのですが、pushしてもgithubのページに反映されないという事象が何度もありまして反映待ちで結構な時間を取られました。

https://github.com/zip358/T2_pg/tree/main/inquiry

タグ

2, am-BShXaVuI, com, github, https, push, watch, www, youtube, お問い合わせ, コード, ソース, フォーム, フロント, ページ, , 事象, , 何度, 作り, 使用, , 制作, 労力, 即興, 反映, 反省, 完成, 得意, , , 時間, 朝方, 朝起き, 本当, 業者, 汎用性, 結構, , 部分, 雛形, ,

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

2021.10.25

Logging

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

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

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

T2がコードを10年書いている。JS編-part1

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

https://github.com/zip358/T2_pg

T2がコードを10年書いている。JS編-part2

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

タグ

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

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

2021.10.14

Logging

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

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

php7

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

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

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

JS(javaScript)ファイルを動的に再読み込みする方法。

2021.10.13

Logging

今日は朝からメールで書類提出してクラウドワークスの仕事に何か良いものはないかなどを見ておりましたがありません?。

さて、JS(javaScript)ファイルを動的に再読み込みする方法のオリジナルコードを書きましたので、お裾分けします。前々の会社で JS(javaScript)ファイルを動的に再読み込みしないとJSが動作しないという何ともやるせない気持ちの仕様があり、その時は人様のコードを拝借して使っていましたが、今日はクラウドワークスなどの案件もないのでちゃちゃっと自分でコードを書きました?。同じように困っている方はご使用くださいな?

https://zip358.com/tool/demo67/

ちょっと愚痴?
そもそも前々の会社のオリジナルMVCはいろいろと欠陥だらけで且つ仕様書もない、何が正解なのかも教えてもらえない中、修正やらしていたので本当に大変でした。聞いても明確に答えてもらえないのは正直な所、大変です。後任にはちゃんと教えていたら良いのですがね。

"use strict";
document.querySelector("button").addEventListener("click",jsandcssreload);
function jsandcssreload(){
    let d = (new Date()).getTime();
    [...document.querySelectorAll("link")].forEach((elm)=>{
        elm.href = elm.href.replace(/(\.css)\??[0-9]{0,}$/,".css?" + d);
    });
    [...document.querySelectorAll("script")].forEach((elm)=>{
        elm.src = elm.src.replace(/(\.js)\??[0-9]{0,}$/,".js?" + d);
    });    
}

タグ

javascript, JS, MVC, いろいろ, オリジナル, お裾分け, クラウド, コード, チャット, ファイル, メール, もの, ワークス, , 人様, 今日, 仕事, 仕様, 仕様書, 会社, , 使用, 修正, 前々, 動作, 大変, 後任, 愚痴, , 拝借, 提出, , 方法, 明確, , 書類, , 本当, 案件, 欠陥, 正直, 正解, 気持ち, 自分,

ブラウザに画像をドロップして表示させる部分的な処理(javascript)。これを使って?

2021.10.07

Logging

本日はブログを更新するのがいつもよりかなり遅めです?、2000記事を超えてからネタが尽きているようにも思いますが、何とか毎日更新出来ています。ネタが尽きたら少し充電しようかなと思います。

ブラウザに画像をドロップして表示させる部分的な処理(javascript)

さて、ブラウザに画像をドロップして表示させる部分的な処理(javascript)を作りました。これらを使ってちょっとしたサービスを作っています。まだ完成はしていませんが完成できたらこちらで紹介しようと思っています。尚、部分的な処理なのでドロップしても画像をサーバーに保存させたりすることはないです。

ソースコードはこちらになります。

全体のソースコードはこちらにアクセスしてブラウザのデバッグ機能で見ることが出来ます。
https://zip358.com/tool/demo43/

        var obj_input = document.createElement("input");
        obj_input.type = "file";
        obj_input.accept = "image/png,image/jpeg";
        var element = document.getElementById("dropArea");
        element.addEventListener("dragover", function(e) {
            e.preventDefault();
            this.classList.add("dragover");
        });
        element.addEventListener("dragleave", function(e) {
            e.preventDefault();
            this.classList.remove("dragover");
        });
        element.addEventListener("drop", function(e) {
            e.preventDefault();
            element.classList.remove("dragover");
            if (/\.((png)|(jpeg)|(jpg))/i.test(e.dataTransfer.files[0].name) === true) {
                var obj = element;
                obj.innerHTML = e.dataTransfer.files[0].name;
                var imgfiles = e.dataTransfer.files;
                obj_input.files = imgfiles;
                var fr = new FileReader();
                fr.readAsDataURL(obj_input.files[0]);
                fr.onload = function() {
                    obj.style.backgroundImage = "url(" + fr.result + ")";
                    obj.style.backgroundSize = "cover";
                };
            }
        });

タグ

2000, createElement, document, inp, input, javascript, obj, quot, var, アクセス, かなり, コード, こちら, こと, これ, これら, サーバー, サービス, ソース, デバッグ, ドロップ, ネタ, ブラウザ, ブログ, 保存, 充電, 全体, 処理, 完成, 少し, 更新, 本日, 機能, 毎日, 画像, 紹介, 表示, 記事,

パスコードをランダムで生成するコードです。JavaScriptで書いてみました。

2021.08.27

Logging

今日は朝から蒸し暑さを感じます。あの一週間も続いた雨はどこに行ってしまったのでしょうか?東京では立て続けに悲惨な事件が起きています、報道することにより模倣犯を増やしているような気がします。

さて、今日はパスコード(パスワード)をランダムで生成するコードをJavaScriptで書いてみました。パスコードの強度はそれ程、高くないかもしれませんが一応、パスコードを生成する事が出来ます。ソースコードを書いていてうっかりミスをしてしまいまして、無限ループを発生させてバグ取りに5分ぐらい費やしました。ループした原因は違う変数を判断文で使っていたという初歩的なミスです。この頃はそういうミスは稀ですが・・・その結果、無限ループに陥っていました。

パスコードというものを作ってみて案外簡単に作れるものだと実感。これを作る前にパスコードメーカーを作成するという動画を見ました。githubにソースコードも記載していましたので考え方は参考にしましたがコードは違うと思います。たにぐちさんの動画はvue.jsを使用してパスコードを作っているのに対して、自分はネイティブjsでパスコードを生成しているという違いがあります。

https://zip358.com/tool/PassCode/

JavaScriptでパスコードを生成するコード。
document.getElementById("btn1").addEventListener("click", () => {
    const mode = {
        mode0: !document.getElementById("mode0").value ? 8 : document.getElementById("mode0").value,
        mode1: document.getElementById("mode1").checked ? true : false,
        mode2: document.getElementById("mode2").checked ? true : false,
        mode3: document.getElementById("mode3").checked ? true : false,
        mode4: document.getElementById("mode4").checked ? true : false
    };
    const data = {
        txt_cnt: mode.mode0,
        txt1: mode.mode1 ? "0123456789" : "",
        txt2: mode.mode2 ? "ABCDEFGHIJKLMNOPQRSTUVWXYZ" : "",
        txt3: mode.mode3 ? "abcdefghijklmnopqrstuvwxyz" : "",
        txt4: mode.mode4 ? "#$&*@+-" : "",
    };


    // console.log(mode,data);

    let str = "";

    if (mode.mode1 || mode.mode2 || mode.mode3 || mode.mode4) {
        let txt_str = data.txt1 + data.txt2 + data.txt3 + data.txt4;
        do {
            str = "";
            for (let i = 1; i <= data.txt_cnt; i++) {
                str = str + txt_str.substr((getRandomInt(txt_str.length) - 1), 1);
            }
        } while ((() => {
            let flg = [];
            flg[0] = mode.mode1 ? /[0-9]/.test(str) : true;
            flg[1] = mode.mode2 ? /[A-Z]/.test(str) : true;
            flg[2] = mode.mode3 ? /[a-z]/.test(str) : true;
            flg[3] = mode.mode4 ? /[#|$|&|*|@|+|\-]/.test(str) : true;
            
            return (() => {
                let f = true;
                for (const key in flg) {
                    if (!flg[key]) {
                        f = false;
                    }
                }
                return f;
            })();
            return false;
        })() === false);
        document.getElementById("view").value = str;
    } else {
        alert("どれかを選択してください");
    }

});
function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

タグ

5, github, javascript, コード, こと, これ, ソース, どこ, バグ, パスコード, パスワード, ミス, メーカー, もの, ランダム, ループ, , , 事件, 今日, 作成, 判断, , 動画, 原因, 報道, 変数, 実感, 強度, 悲惨, , , 東京, 模倣犯, , 無限, 生成, 発生, 立て続け, 簡単, 結果, 記載, , ,

クリックでON、OFFする表示だけど。無数の書き方があると思ふ?

2021.08.26

Logging

不要不急の町内アナウンスが流れる中、この記事を書いています。不要不急ってなんだろう、人によって解釈が違ってしまうし判断もかなり違うような気がします。

さて、今日は凄く単純なJS(javascript)のコードを書いてみました。とても簡単なコードですが素人が書くともっとコード数は増えると思いますし、玄人が書くともっとコードを短く書くことも可能かと思います、例えば自分はonoffという変数をスイッチ代わりに使用していますが、本当はこれもいらないです。そうなるともっとコード数は少なくなります。なぜ要らなくなるかと言えば、表示されている文字で判断することが可能だからです。

今回はそのコードは記載しませんので、ご自身で考えてみてください。

クリックでON、OFFする表示だけど。

プログラムコードは無数にあります、最初は短く書くという事が難しいかもしれませんが徐々に上達していくものだと思います。なので、手を動かしながら学ぶことは大切かと思います。駆け出しのエンジニアさんはいろいろなコードを見て先人の技を盗んでくださいませ。

このソースコードは美しいという考え方はわかります。数式が美しいと意味は似ているように思えてなりません。数式はわかりませんがね?。

https://zip358.com/tool/demo39/

onoff = 0;
document.getElementById("c").addEventListener("click",()=>{
    document.getElementById("view").innerHTML = (()=>{
        onoff = !onoff?1:0;
        return onoff?"on":"off";
    })();
});

タグ

javascript, JS, off, ON, onoff, アナウンス, かなり, クリック, コード, こと, これ, ご自身, スイッチ, プログラム, もの, 上達, 不要不急, , , , 今回, 今日, 使用, 判断, 単純, 可能, 変数, 大切, , 文字, 書き方, 最初, 本当, , 無数, 玄人, 町内, 簡単, 素人, 自分, 表示, 解釈, 記事, 記載,

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

2021.08.22

Logging

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

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

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

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

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

C# webview2でテスト
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, アラート, インストール, エラー, オブジェクト, コード, こと, これ, サンプル, タイトル, ため, ドップ, ニュース, ブラウザ, ページ, もの, リンク, 久しぶり, , 今回, 今日, 作成, 作業, 使用, 先日, 勉強, 動作, 収集, 合間, , 天気, , 応用, 情報, 投稿, 方法, 既存, , 日曜日, 自動, 表示, 開発,

継続は力なりっていう言葉と好きこそ物の上手なれが合致する人。

2021.08.20

Logging

派遣からお仕事の紹介電話がかかってくる事は有り難いことなのだけど、派遣からお仕事は何かダーク感があったりする気がしてどうも一歩前に進めないでいます。そして今の歳から数年間、派遣で働いていて派遣切りにあったときに次の職業は今よりももっと見つからないだろうなって思います。そんなでフリーランスなのか無職なのかわからない位置にいます。

さて、TAKUYAさんという人をITエンジニアなら聞いたことがある人もいると思います。自分のブログでもちらっと紹介した人です、そして自分が一方的に憧れている人でもあります。やっぱ違うなというのは動画を見ていただければわかると思いますが、殆どのコードディングを補完機能を使っていないところなんかを見ると「あぁー」只々、凄いなと思います。ここまで出来るようになるには毎日(昔)、コードを書いている(プログラミングしている)からと好きこそ物の上手なれという事につきますよね。そして継続を惜しまない人はさらに高度な技術を身につけていくのだなと感じます。

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

動画を見て個人開発者になりたいと感じる人も多いと思います、そして単なるラッキーで個人開発者になれたんじゃなくて努力と失敗などを繰り返して今があるだなと思います。自分もなにか秀でるぐらいの突起した技術や能力を身に着けたいと動画を見てそう思う人は少なからずいると思います。自分で頑張るしかないよね。

個人開発者で食うという生き方 〜 新卒エンジニアから独立・フリーランスになってアプリでマネタイズするまで

タグ

IT, TAKUYA, エンジニア, お仕事, コード, コードディング, ここ, こと, ダーク, とき, ところ, フリー, ブログ, プログラミング, ランス, , 上手, , , , 位置, , 動画, 合致, , , , 機能, , , 殆ど, 毎日, , 派遣, 無職, , 紹介, 継続, 職業, 自分, 補完, 言葉, 電話, ,

java言語を勉強していて結構つまずく。ゴリゴリとコードを書きたいな。

2021.08.19

Logging

家のクーラーの付いている環境にいると日中が寒いぐらいですね。洗濯物を干すのに自分の部屋が活躍しているのでクーラーが切れないのです。早くお天気の日にならないものか??

さて、java言語を今、勉強していると書きましたが本当にメチャクチャな勉強方法なので、基本的な順番をすっ飛ばしているような気がします。コマンドラインでoとxを入力出来るものを作りました。それ以外を入力すると再度、入力してもらうという単純なアルゴリズムですが、PHP言語のような文字判定をしていたので三項演算子で正しいデータを入力しているのに否定を返すように処理が動いてしまってつまずきました。

こんな感じで毎日、java言語に触れていたら「習うより慣れよ」という感じで日々、覚えていけるのではないかなと思います、今回躓きは初心者の初の字ぐらいの部分だと思いますが、こうやって覚えていくしかないなと思います。

あるアプリ会社を一年ぐらい前に受けたのですが二次面接で不採用になりました。その会社の紹介サイトを先日、拝見したら未経験の人を採用している紹介文を見て絶句しました。なんだろうか、この行き場のないやるせない気持ちは・・・と、そんなわけでjava言語のコードを記載します。

java勉強中
import java.util.Arrays;
import java.util.Scanner;
import java.util.function.BiFunction;
import java.util.function.Consumer;
public class Ox {
    public static void main(String[] args) {
        String [][] ox_list = new String[3][3];
        int x_max = 3,y_max = 3;
        BiFunction<Integer,Integer,Boolean> md = (x,y)->{
            Scanner kigo = new Scanner(System.in);
            System.out.printf("縦%d 横%d 番目の記号を入力してください{o,x}\n",y,x);
            ox_list[y][x] = kigo.next();
            return ((ox_list[y][x].equals("x") || ox_list[y][x].equals("o"))?true:false);
        };
        Consumer<String> Oxview = (s)->{
            System.out.println(s);
            String str = "";
            for (int i = 0; i < y_max; i++) {
                for (int ii = 0; ii < x_max; ii++) {
                    str+=  "|" + ox_list[i][ii] ;
                }
                str+= "|\n";
            }
            System.out.println(str);
        };
        for (int i = 0; i < y_max; i++) {
            for (int ii = 0; ii < x_max; ii++) {
                if(!md.apply(ii,i)){
                    System.out.println("入力が不正です");
                    ii = (ii-1)>=0?(ii-1):-1;
                }
                Oxview.accept("入力中");
            }
        }
        Oxview.accept("最終結果");
    }
}

タグ

java, php, アプリ, アルゴリズム, クーラー, コード, コマンド, それ, データ, めちゃくちゃ, もの, ライン, , , , 今回, 入力, 再度, 処理, , 初心者, 判定, , 勉強, 単純, 否定, 天気, , , 感じ, 文字, 方法, , 日々, 日中, 本当, 毎日, , 洗濯物, 活躍, 演算子, 環境, 自分, 言語, 部分, 部屋, 順番,

NASと書いてナスと呼ぶ、お茄子のナスではありません。

2021.08.11

Logging

台風9が通り過ぎてから、なんだか暑さの中に涼しさを感じるようになりました、朝方とか結構涼しいなと感じますが日中はまだまだ暑い日が続きます。

さてお休みの日にYOUTUBEのオススメに出てきた、「NASを取り付けてみたら快適になった」とかいう動画を二本ほど立て続けに見ました。これをエンジニア目線で見ると古くなったPCにリナックスを入れてNAS化するので良いじゃんとは思ったものの、外からアクセスしたいなと思った時はセキュリティーによほど、自信がないと駄目だなと感じます。

10TBのNASを構築して、自分専用の大容量クラウドストレージを作る|Synology DS 220+

そう思うと市販のNASが良さげに感じますよね。ただ自分はグーグルのバックアップで良いじゃないのと思っているし、ソースコードはgithubなので十分ですよねと思ってます。容量の多い動画を取り扱っているわけでもないので欲しいなという気持ちはあるものの、ここは心を鬼にしてポチるのを辞めました。

【NAS構築】グーグルクラウドの改悪がキツいので14TBのNASを構築&メモリ増設|QNAP TS-251D

いま、ポチりたいのはCドライブを取っ替えたいという事だけです、まだ不安定なSSDを使用しております。

因みにNASってなんだよってのは、動画を見て頂けたら分かると思いますが簡単に説明するとファイルなどの保管庫(バックアップ)です、もしもパソコンのHDDが壊れたりした時にバックアップとして機能するものです。クラウドにファイルなどを預けることがなかった時代は耐久性が今より悪かったので、RAID技術などを使って自宅のPCの守っていたものですが、今はそういう事をする人は少なくなっていると思います。

尚、サーバーやクラウドではRAID技術は今でも使用されております。特に金融機関はそういう技術は強固に作られています、データが消えたら大変なことになりますからね。

タグ

, com, github, https, NAS, PC, www, youtube, アクセス, エンジニア, おすすめ, お休み, グーグル, コード, ここ, これ, セキュリティー, ソース, ナス, バックアップ, ぽち, リナックス, わけ, , , 動画, 台風, , 容量, 市販, , 快適, , 日中, , 朝方, 気持ち, 目線, 立て続け, 自信, 自分, 茄子, 駄目, ,

案件9割完成して案件に申し込むみたいな事は非効率だけど。

2021.08.05

Logging

今日、先日にツイートした案件の締切日ですが・・・(*´ω`*)、未来の自分は案件取れたでしょうか?来月の支払いをペイ出来る額ですので取れると良いですね。さて、案件9割完成して案件に申し込むみたいな事は非効率だけどこの非効率で仕事に応募している理由は、やっぱ安価な仕事でも仕事は仕事ですよという気持ちで取り組んでいます。

とある案件

因みに今回はこういう案件を作りました。JSのコードの行数は約800行、PHPのコードは約200行で合計、1000行のコードを2日間で書きました・・・?。サイトを動的な処理で動かしているので結構、無駄にコードを書いています。いつもの通り設計はなし、頭の中でさっさと考えて作っております。

もし案件が取れなかったらコードなどを自分の名前のサイト、もしくはgithubに公開します?ので、その時はご利用ください、可能性としては50%ぐらいの確率で請け負う事が出来ると考えています。

タグ

1000, 2, 200, 50, 800, , github, JS, php, コード, ご利用, サイト, ツイート, ペイ, , , 今回, 今日, 仕事, 先日, 公開, 処理, 効率, 可能性, 合計, 名前, 安価, 完成, 応募, , , 未来, 来月, 案件, 気持ち, 無駄, 理由, 確率, 締切, 自分, 行数, 設計, 通り, , ,

アンフォローが多発しているのでアンフォローした人には自動でお礼コメントする。

2021.07.15

Logging

アンフォローが多発しているのでアンフォローした人には自動でお礼コメントするようにプログラミングコードを書いて五分間で処理を実行するようにcrontabに設定しました。ソースコードの一部を記載しますのでご自分の環境に合わしてご自由にお使いくださいませ。尚、TwitterOAuthライブラリを使用しておりますが、ライブラリの導入などに関しては割愛しております。

何故、こんなコードを書いたのか余談。フォロワーさんが外れるのはあまり嬉しいことではないですよね。離れていく人を食い止めようとは思いませんが、最後のお礼コメントぐらい言わせてくださいなという考えの元、今回のお礼コメントをするPHPのコードを書きました。相変わらずソースコードにコメントはありません、悪しからず?。

尚、一回目は一部コメントアウトして実行ください?

<?php
require_once("../vendor/autoload.php");

use Abraham\TwitterOAuth\TwitterOAuth;

if ($argv[0]) {
    require_once "./tw-config.php";
    $f_data = @file_get_contents("followers.dat");
    $f_data = $f_data?explode(PHP_EOL,$f_data):[];     

    date_default_timezone_set('Asia/Tokyo');
    $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);
    $response = $connection->get("followers/ids", array(
        'screen_name' => 'zip358com',
        'count'=>1000
    ));

    $unFolloewers = array_diff($f_data,$response->ids);
    $data = @implode(PHP_EOL,$response->ids);
    file_put_contents("followers.dat",$data);

    if($unFolloewers){
        foreach($unFolloewers as $key=>$val){
            $response = $connection->get("users/show", array(
                'user_id' =>$val
            ));
            $text = "@".$response->screen_name. " さん 今までフォローありがとうございました(¯―¯?)。{フォロー解除されました? ([atmark]zip358comより自動投稿)}";
            print $text;
            $connection->post("statuses/update", array("status" => $text . " \n"));
        }
    }
}

タグ

aut, crontab, lt, once, php, quot, require, TwitterOAuth, vendor, アウト, アン, お使い, お礼, コード, こと, コメント, ご自分, ソース, フォロー, フォロワー, プログラミング, ライブラリ, , 一部, , , 今回, 何故, 余談, 使用, , 処理, 割愛, 多発, 実行, 導入, 最後, 環境, 自動, 記載, 設定,

LINE messaging apiでブログの配信通知するプログラムコード。

2021.07.14

Logging

暑い日が続いています、夕立になった後のアスファルトの匂いを嗅ぐと夏だなぁって思うのは自分だけでしょうか?
さてLINE messaging apiでブログの配信通知するプログラムコードを書きましたのでお裾分けします?、コードはいつもの通りコメントなんてものはありません。この2つのコードは何をしているのかだけ、解説しますね。

1つ目のコードは私のLINEチャンネルを友だち追加してくれたら、データベースにuseridを登録するコードです。解除したらuseridの削除もちゃんとしています。

2つ目のコードは私のLINEチャンネルに登録してくれた方々に最新の記事を送信しています。自分は毎日、9時に最新の記事を送信するようにcron登録しました。

一部、defineを設定している部分がありますのでコードに追加してください、よろしくお願いします?
※LINEチャンネル登録よろしくお願いします。

<?php
    class line{
        function webhook($webhook_object=null){
            if(!$webhook_object)return false;
            $obj = json_decode($webhook_object);
            $type = $obj->events[0]->type;
            $userId = $obj->events[0]->source->userId;
            $replyToken = $obj->events[0]->replyToken;
            if($type==="follow"){
                $pdo = self::db();
                if($pdo){
                    $sql = "insert into user (userid)values(:userid)";
                    $sth = $pdo->prepare($sql);
                    $sth->bindValue(":userid",$userId,PDO::PARAM_STR);
                    $sth->execute();
                }
            }
            if($type==="unfollow"){
                $pdo = self::db();
                if($pdo){
                    $sql = "delete from user where userid = :userid";
                    $sth = $pdo->prepare($sql);
                    $sth->bindValue(":userid",$userId,PDO::PARAM_STR);
                    $sth->execute();
                }
            }
            if($type==="message"){

            }
        }

        function db(){
            try {
                $pdo = new PDO(DSN,USERNAME,PASSWORD);
                return $pdo;
            } catch (\Throwable $th) {
                //throw $th;
                return false;
            }
        }
    }


    if($data = file_get_contents('php://input')){
       print line::webhook($data);
    }
<?php
    class blog_post_msg_line{

        function db(){
            try {
                //code...
                return new PDO(DSN,USERNAME,PASSWORD);
            } catch (\Throwable $th) {
                //throw $th;
                return false;
            }
        }

        function rss(){
            $obj = simplexml_load_file("https://zip358.com/feed");
            $post_message[2] = $obj->channel->item[0]->title ."\n". $obj->channel->item[0]->link;
            $post_message[1] = $obj->channel->item[1]->title ."\n". $obj->channel->item[1]->link;
            $post_message[0] = $obj->channel->item[2]->title ."\n". $obj->channel->item[2]->link;
            return $post_message;
        }

        function main(){
            $pdo = self::db();
            if($pdo){
                $post_message = self::rss();
                $sql = "select userid from user;";
                $sth = $pdo->query($sql);
                $res = $sth->fetchAll(PDO::FETCH_ASSOC);
                if($res){
                    foreach($res as $key=>$val){
                        $user_id = $val["userid"];
                        self::line_post($user_id,$post_message);
                    }
                }
                
            }
            
        }

        function line_post($user_id ='',$post_message=null){
            $text = [
                [
                    'type' => 'text',
                    'text' =>"最新の記事をお届けします"
                ],
                [
                'type' => 'text',
                'text' =>$post_message[0]
                ],
                [
                    'type' => 'text',
                    'text' =>$post_message[1]
                ],
                [
                    'type' => 'text',
                    'text' =>$post_message[2]
                ]                                
            ];
            
            $message = [
                'to' => $user_id,
                'messages' => $text
            ];
            
            $message = json_encode($message);
            
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer ' . ACCESS_TOKEN, 'Content-Type: application/json'));
            curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/v2/bot/message/push');
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
            curl_setopt($ch, CURLOPT_POSTFIELDS, $message);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            $res = curl_exec($ch);
            curl_close($ch);      
        }
    }

    if($argv[0]){
        blog_post_msg_line::main();
    }  

タグ

, 2, , API, cron, define, line, Messaging, userid, アスファルト, いつも, お裾分け, お願い, コード, コメント, チャンネル, データベース, ブログ, プログラム, もの, 一部, , 削除, 匂い, 友だち, , 夕立, , 方々, , 最新, 毎日, 登録, , 自分, 解説, 解除, 記事, 設定, 追加, 送信, 通り, 通知, 部分, 配信,

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

2021.07.12

Logging


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

超Vue.js 2 入門 完全パック – Vueでアプリを作りたい方必見! (Vue Router, Vuex含む)

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

【LT】2週間でVue.jsを学び、SPA作った話。
<!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, アプリ, うち, コード, サンプル, スクール, ドキュメント, プログラミング, プログラム, よし, ライブラリ, 下記, , 使用, 入門, 勉強, 動画, 学習, 実感, , 意識, 推奨, , 時間, 理解, 簡単, 背景, 能力, 自分, , 解説, 記載, ,

Twitterプロフィールからスパムみたいなアカウントかを機械学習で判定してみた。

2021.06.28

Logging

Twitterプロフィールからスパムみたいなアカウントかを機械学習で判定してみました。

機械学習にしてもらう①。

何故、このような事を考えたかはスパムみたいなアカウントってぱっと見で人は区別できるよねって思ったのでLobeというソフトを使って画像解析(機械学習)してモデルをエクスポートし、そのモデルをテンソルフローで使用して動作確認してみました。

機械学習にしてもらう②

結果は、まぁまぁの精度だったのでモデルをお裾分けしますね。因みにTwitterのプロフィール画像のスクリーンショットを行った時のソースコードも提供します。

尚、機械学習に使用したプロフィール画像は400枚ほど(少ない?)です、ok-image(一般人)とng-image(スパムみたいなアカウント)というラベルを付けて学習させてます。

model::https://zip358.com/ai-model/tw-profile/saved_model.pb (?モデルの中身はtensorboardでご確認を!)

zip358com
zip358
# Generated by Selenium IDE
import time
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
from selenium.webdriver.support.ui import Select

class twss():
	def setup_method(self):
		self.driver = webdriver.Chrome(ChromeDriverManager().install())
		self.vars = {}

	def teardown_method(self):
		self.driver.quit()

	def screenshots(self):
		self.driver.get("https://twitter.com/")
		self.driver.set_window_size(945, 900)
		with open('twname.dat','r',encoding="utf-8") as f:
			for line in f:
				FILENAME = "X:\\var\\www\\html\\labo_ai\\twss\\image\\screen_" + line.replace('\n', '') +".png"
				self.driver.get("https://twitter.com/" + line.replace('\n', ''))
				time.sleep(2)
				self.driver.save_screenshot(FILENAME)
		f.close()
		self.driver.quit()
twss = twss()
twss.setup_method()
twss.screenshots()

タグ

358, 400, ai-model, com, https, lobe, model, ng-image, ok-image, SA, tw-profile, Twitter, zip, アカウント, エクスポート, お裾分け, コード, ショット, スクリーン, スパム, ソース, ソフト, テンソル, フロー, プロフィール, モデル, ラベル, 一般人, , , 何故, 使用, 判定, 動作, 区別, 学習, 提供, , 機械, 画像, 確認, 精度, 結果, 解析,

今はよく使う無名関数と即時関数というモノ?

2021.06.21

Logging

javascriptを例に無名関数即時関数をよく書いています。尚、PHPでも同じ要領で無名関数と即時関数がかけます。たぶんいろいろな言語に同じ要領で書けるようになっていると思います。但しPHPにアロー関数での無名関数と即時関数がどうか分かりません。因みにPHPの方に即時関数があることは結構、最近になって知りました。
自分は無名関数の存在は知っていましたが、あまり使うことがなく使い方もヘンテコな使い方をしていましたね。
無名関数や即時関数を使わない人もいると思います、駆け出しのエンジニアさんに配慮して書かないという職場もあるでしょうし、制約で書けない場合もあるかもしれません。

【JavaScript入門 #7】匿名関数、高階関数、コールバック関数を攻略せよ!【ヤフー出身エンジニアの入門プログラミング講座】

そんな感じで仕事をしているといろいろ制約の中でコードを書くことになるので、ちょっと窮屈感を感じる人も多いと思います。特に開発に新しい技術を取り入れるような実験が出来る職場は少ないです。大規模開発になればなるほど、実験的な事ができなくなる傾向にあると思います。それも仕事だと割り切るしか無いかなと思います。使いたい技術は私用で開発するときに使うようにしましょう。そういうITエンジニアは結構いますよ。

//functionで無名関数
var mumei1 = function(a){
	return a;
};
console.log(mumei1(123));
//アロー関数で無名関数
var mumei2 = (a)=>{
	return a;
};
console.log(mumei2(123));
//functionで即時関数
console.log((function(a){
	return a;
})(123));
//アロー関数で即時関数
console.log(
((a)=>{
	return a;
})(123));

タグ

javascript, php, アロー, いろいろ, エンジニア, コード, こと, ヘンテコ, もの, , , , , 仕事, 使い方, , 傾向, 制約, 即時, 場合, 大規模, 存在, 実験, , 感じ, 技術, , 最近, 無名, 窮屈, 職場, 自分, 要領, 言語, 配慮, 開発, 関数, 駆け出し,