バリューコマースアフィリエイトも。

2024.01.22

Logging

おはようございます、楽天続きバリューコマースアフィリエイトの広告も追加しました。これで収益も右肩上がりになれば良いって思っていますが、そんなにうまく行かないのが現実だと思っています。

body of water wave
Photo by Matthew Barra on Pexels.com

ちなみにソースコードは楽天とバリューコマースとも似たようなコード体系です、それはjavascriptのコードを見ていただいてもらえば分かるかと思っています。ajaxで渡すときにパラメーターを楽天とバリューコマースでは差異があるだけでPHP側の処理はAPIサーバーへ投げて返却データをキャチするだけですので同じような感じになっています。

追伸:辞めました。

明日へ続く。

タグ

ajax, APIサーバー, javascript, Photo by Matthew Barra on Pexels.com, PHP側, コード, コード体系, ソースコード, パラメーター, バリューコマース, 処理, 収益, 右肩, 差異, 広告, 楽天, 楽天続きバリューコマースアフィリエイト, 現実, 返却データ, 追伸,

キャッチコピーを考える、昨日の記事続き。

2023.12.05

Logging

おはようございます、メルカリで売るキャッチコピーを考えるために売れるキャッチコピーをみんなが使っているchatGPTさんとBardさんに考えてもらいました。それをXに自動でポストするようにここは人の手でコードを書きました。無料の生成AIは完璧なコードを書けないので?手直しが必要になります。

chatGPT4Turboとかなら、コードの生成も凄いらしいだけども有料で月3000円ぐらいの支払いを行わないといけないので、それだったらそのお金を別のことに使用したいというのが本音。

お金に余裕のある人は試せているのだろうけど、基本的にあまり自分はお金に余裕はないのでポチれないのが本音ですかねぇ。本当は試したいのだけども・・・・。

話し戻しまして無料版でも十分、キャッチコピーを考えてくれるので有り難い。

ちなみにBardさんはこんな感じです。chatGPTに軍配が上がる・・・。

というわけで、メルカリ店よろしくお願いします🙇

https://jp.mercari.com/user/profile/808093563

明日へ続く。

タグ

Bardさん, ChatGPT, chatGPT4Turbo, chatGPTさん, X, キャッチコピー, コード, みんな, メルカリ, メルカリ店, 余裕, , 手直し, 有料, 本音, 無料版, 生成, 生成AI, 自分, 軍配,

生成AIの良いところと悪いところコード編

2023.11.23

Logging

おはよう御座います、生成AIの良いところと悪いところコード編を書いてみます、良いところは新しい技術を知るきっかけになる、理解しやすい。参考書よりも無料で使用できるchatGPTの方がかゆいところに手が届く感じがします。悪いところは、そのままのコードでは上手く動かないや間違っている事がある、同じ解を示さないなどなど…。

無料なので仕方がないかもしれないですが、そういう所があります。そんなコードの難点を解決してくれるコードエディタを見つけました。これ凄いみたいです、ちなみに自分が勤めている会社のミーティング(会議)でも取り上げれました。

エディタの名前はCursorというものです。これ無料で使用できるみたいなんです。業界では有名なのかも知れないです。みんなアンテナ立てているだなって思った日でした😌。

明日へ続く。

タグ

ChatGPT, Cursor, エディタ, かゆいところ, きっかけ, コード, コードエディタ, ミーティング, みんなアンテナ, 会議, 参考書, 名前, 悪いところ, 悪いところコード編, 感じ, 新しい技術, 業界, 生成AI, , 難点,

メルカリ、メルカリ。売れたけど。

2023.11.18

Logging

おはようございます、メルカリ、メルカリ。売れたけど完売まで遠いなぁ・・・。売れないので、SNSの自動宣伝を早朝にコードを書き換えてました。具体的に商品名も記述するようにコードを書き換え。

そして発送方法を郵便とクロネコヤマトに本の重さとかで振り分けたりしていました。そして値段も再調整しています。これで様子見を行います、今年中にあと3冊ぐらい売れてほしいもの。

ちなみに14商品を出品して今のところ3商品売れた感じです。

あと、カテゴリーもなんだか人工知能で仕分けすると健康のカテゴリに振り分けられていた商品があったので、ITカテゴリーに再振り分けを行いました。

値段の調整ですが、値引きした商品もあれば適正価格にした商品もあります、値引きすれば売れるとは限らないですからねぇ。あまりにも安くすると裏があるじゃないかと思う人もいると思うので、値引きもなかなか難しいですね。

明日へ続く。

タグ

3冊, ITカテゴリー, SNS, カテゴリ, カテゴリー, クロネコヤマト, コード, メルカリ, 人工知能, 値段, 完売, 早朝, , 様子見, 発送方法, 自動宣伝, , 調整, 適正価格, 郵便,

息するコード個展に行きたかったのだけど

2023.11.06

Logging

おはようございます、息するコード個展に行きたかったのだけど、知るのが少し遅すぎた残念!!。Xのタイムラインに流れきたのが少し遅すぎた。頑張れば格安で神戸まで高知から飛んでいるのだけど、スケジュール的にちょっと無理ぽっかたのと格安でもまぁまぁな料金設定だったので今回は見送りました😢。深夜高速バスや高速バスとか神戸まで出ていればその便で行くことも可能なんですけどねぇ。東京と大阪行きしか知らないのであるかもしれないけど…。

高尾俊介氏、グネグネと絵の具のようにコードを思いのまま書ける人なんだろうな、すごいなぁ~って思います。自分も絵の具を使うようにコードが思いのまま書ければもっとコードを書くのが楽しいだろうなって思います。コードを書くのは苦ではないもののもっと良いコードをと思うことは今でも思います。リリースしたあとに、もっと丁寧な感じに書けばよかったや命名があまりにもだなって思うと恥ずかしくなりますね。

明日へ続く。

タグ

X, コード, コード個展, タイムライン, 便, 命名, 大阪行き, 少し, 感じ, 料金設定, 東京, 深夜高速バス, 無理ぽっかた, 神戸, 絵の具, 良いコード, , 高尾俊介氏, 高知, 高速バス,

機械学習でオススメ記事を作ってみる。

2023.10.24

Logging

おはようございます、機械学習でオススメ記事を作ってみる。仕組みはこんな感じです😄。

  • 記事から同じ傾向の記事を取得する。
  • 記事のMeCabを使用して分割。分離したものを機械学習に投入。
  • 出来上がったモデルから似ている傾向の記事を抽出。
  • 新規記事を投稿した場合、再学習させモデルに追加。

上記の流れをCHATGPTに投げ込んでコードを生成してもらい、そのコードを再修正してAPI化したものを仕事終わりに週末作ろうと思っています。出来ればそれを元に自分だけしか使えないプラグインにしてWordPressに取り組むつもりでいます。

これでどれぐらいの精度がでるのかは、やってみないと分かりませんが試す価値はあるかなって思っています。あと、作りたいのはクリックしたものを機械学習させて何か出来たら良いなって思っています、また、記事学習モデルから、チャット形式でこんな記事はどうですかってオススメする物を作りたいですね。

明日へ続く。

タグ

API化, ChatGPT, Mecab, WordPress, コード, チャット形式, プラグイン, モデル, 仕事終わり, 価値, 傾向, , 分割, 投入, 抽出, 機械, 機械学習, 精度, 記事学習モデル, 週末,

laravelの技術ネタ。こういうのを有ることを。

2023.10.03

Logging

おはようございます、laravelの技術ネタです。Laravelにはこういうメソッドが用意されています。下記のリンクを参照ください。

https://readouble.com/laravel/8.x/ja/collections.html

こんな機能が有ることを覚えて置くと良いです。なので、わざわざ自分でコードを書かなくても便利な機能があります。覚えて置くと良いです。

この頃の学びはPHPに文字の置き換えする事。いやいや文字の置き換えなんて初歩の初歩でしょって思うかも知れません。自分もそう思っていましたけど、PHPにはいろいろな文字の置き換えができるメソッドがあります。その中でこれは便利だなっていう文字の置き換えはこれ!!

文字の位置を指定して、その部分だけを文字を置き換えることが出来るメソッドです。

substr_replace

明日へつづく

タグ

Laravel, php, substr_replace, いやいや文字, コード, メソッド, リンク, わざわざ自分, 下記, 位置, 初歩, 技術ネタ, 文字, 機能, 自分, 部分,

知らなかった機能ですね。知らないというのは。

2023.09.14

Logging

おはようございます、知らなかった機能ですね。知らないというのは何ともだなって・・・。今回知らなかった機能はWordPressの表示オプションという機能。存在は知っていたけどどんな機能なのか知らなかった機能です。

あぁーそういう事が出来るですね。わざわざコード書かなくても標準機能として搭載されていて知った時は悶絶(気絶)ものですね(・・;)。因みに表示オプションにはいろいろな機能がありますので、一度クリックしてリロードしてみてください。素敵な機能が使用出来るようになります。

これを知ったのは仕事でWordPress開発を行うことになった為、前々の会社でもWordPressを使って裏の部分を作ったりしていたのですが、ほぼ忘れていたのでイチから出直しみたいな感じでした。WordPressのカテゴリを参照する関数があまり使えない事なども知りましたね。親から子の並びで参照してくれないみたいで・・・困りものです。

今回の件で知識が蓄積されましたが、慣れないことは疲れますね。

タグ

WordPress, WordPress開発, いち, カテゴリ, コード, 仕事, , 前々, , 存在, 悶絶, 標準機能, 機能, 気絶, 知識, 表示オプション, , , 部分, 関数,

GASを使ってGメールを転送する方法が書いていた。

2023.09.02

Logging

おはようございます、GASを使ってGメールを転送する方法が書いていた。このひとが書いてあるとおりすれば転送することができます。そしてトリガーの設定することで未読のメールをチェックして送信することが可能になります。じぶんはこの方法を使ってXXX請求書メールを親と共有するのに使用させて頂きました。一応、ソースコードを自分なりにチェックして不正行為のないコードということは確認済みです。

Gmailで条件に合ったメールを転送するGAS(Google Apps Script)の紹介 #shorts

公開されているソースコードを使用する場合、全部をまるまるコピーして使うってことはあまりしないですが、今回のソースコードはシンプルなコードだったのでまるまるコピーして使用した感じです。無駄がないコードでした。

複数のメール転送にも対応していて良い感じですし、トリガーする場合、フィルターも複数登録できるように配列化すると、処理自体が重たくなると思うのでこれで良い感じがします。ただ、転送するメールアドレスが増えてしまうとおそらく重たくなると思うので精誠、20件が限度かなと思います。

タグ

GAS, Gメール, XXX請求書メール, コード, ソースコード, トリガー, ひと, フィルター, メール転送, 不正行為, 全部, 処理自体, 未読, 確認済み, 精誠, 良い感じ, 複数, , 配列化, 限度,

二度目の挑戦🔥。英字配列キーボードに置き換え。

2023.07.21

Logging

おはようございます、先日、英字配列キーボードに置き換えました、これは二度目の挑戦になります。まえ挑戦を行ったときは数週間で元のキーボードに戻りましたけど今回は頑張ってなれるまで使用してみようと思っています。英字配列のキーボードで何が一番困るのかといえば日本語と英字の切り替えだと思います。この英字と日本語を切り替えるために日本語キーボードには切り替え専用のキーが存在するのだけど、英字配列の場合は`とALTを同時に押して切り替えるようになります。

他に簡単に切り替えることが出来る方法があれば、記事の下にあるご意見等からご連絡頂ければ凄く助かります。さて、なぜ英字配列のキーボードを購入したのかといえば仕事でコードを書くときやはり英字配列の方が効率的が良いです。特に『[ ] ; : ‘ ” 』など打ちやすい場所に配置されていることにあります。そのキー配置を覚えれば効率よくコードを書くことが出来るはずです👨。

close up photo of gaming keyboard
Photo by John Petalcurin on Pexels.com

因みにまだ英字配列に慣れていません、特に日本語と英字の切り替えでミスタッチを繰り返してしまいます。慣れるまでかなり時間がかかりそうな気がしますが、何とか元を取りたいな💰。

タグ

ALT, Photo by John Petalcurin on Pexels.com, かなり時間, キー, キーボード, キー配置, コード, ご意見, まえ挑戦, ミスタッチ, 仕事, , 場所, 専用, 挑戦, 日本語, 日本語キーボード, 英字, 英字配列, 英字配列キーボード,

Laravelでユニットテストしている。大事ですね。

2023.06.04

Logging

おはようございます、今日は仕事が終わったら映画を見に行く予定にしているのだけど、台風2号とかの影響でどうなるか、これを書いている時は分からない。

さて、Laravelでユニットテストしています、テスト大事な仕事だと思います。自分で書いたコードを自分でUnit Testしています。Laravelでユニットテストやフィーチャーテストをしたい場合はまず、artisanコマンドを使用して雛形のテストファイルを生成するのが、一般的だと思います。

php artisan make:test unitTest --unit
php artisan make:test

テストファイルの書き方などは、ここでは割愛します、公式のドキュメントやQiitaなどを参照して下さい。ここではサンプルコードなどは書きません。

タグ

artisanコマンド, Laravel, php artisan make, qiita, test, test unitTest, unit, Unit Test, コード, サンプルコード, テストファイル, ドキュメント, フィーチャーテスト, ユニットテスト, 公式, 台風2号, 影響, 映画, 書き方, 雛形,

chatGPTを使用していますか。”YesOrNo”

2023.02.28

Logging

おはようございます、chatGPTをお仕事でも活用しています。

例えば「Bootstrapで下記の情報(単語一覧)を使用してフォームを構築して」と指示すると、コーディングしたBootstrapの雛形を生成してくれます。なので、大量の項目数を必要とする場合などは間違いなく力を発揮してくれます。

因みにchatGPTはコーディングを途中で辞めてしまう場合がありますので、その場合は続きを書いてという指示を出せば、続きのコードを書いてくれますが、ここで注意点があり先ほどと同じスタイルのコードで書いてくれればよいのですが、たまにコーディングスタイルを変えてしまう場合があります。そう言う時は先ほどの続きを書いてと指示を出すか、最初からやり直してもらうのが良いです。

その他の方法として一度に渡すタスク量を少なくして小出しに指示を出すとでも良い結果が得られます。

コーディングしてくれた物が完璧なものをchatGPTに要求するより、後は人の手で直す方が効率が良いのです、ですので自分はこれで全てが現段階で出来るとは思っていませんし、そういう使い方は難しいとも思っています。

タグ

Bootstrap, ChatGPT, コーディング, コーディングスタイル, コード, スタイル, その他, タスク量, フォーム, 一度, 下記, 効率, 単語一覧, 小出し, 指示, 最初, 現段階, 途中, 雛形, 項目数,

chatGPTのようなサービスに速やかに変えるべき。ググらない。

2023.02.06

Logging

おはようございます。月曜日の朝、サイト検索は衰退するのかなぁ???個人でサイトを運営している人にとっては悲しいですよね。

Gさんは、chatGPTのような検索に速やかに変えるべきだと思っている。自分はchatGPTをやっているのだけど、答えはだいたい返ってくるし、指示の出し方によってはソースコードも生成も正確なコードを書いてくれる。

ソースコードだけの事に焦点を置いて書くと、複雑な計算式を用いたもののアルゴリズムや複雑なソースコードは書けない。また、スパゲティプログラムみたいな長文のコードなどは恐らく解読出来ないだろう。やった事はないので「だろう」なんですが。

機能追加により、コードが膨大になった物は理解出来ないなので、プログラマーはまだ大丈夫です。ですが、これからプログラマーを職にしたい方は辞めといた方が良いです。

一から新たなサービスを創るときにメソッド単位で命令をchatGPTに指示を出せば、大体作ってくれる。

話を戻して、何故、速やかに検索サービスを変えるべきなのか、それは検索よりも正確、そして短時間で答えが見つかるところです。そのうち気づくよ・・・一般人もchatGPTの優秀で時間短縮になるという事を。

だからYou.comは驚異の検索サービスですよ。

タグ

ChatGPT, YOU.com, アルゴリズム, コード, スパゲティプログラム, ソースコード, プログラマー, メソッド単位, 命令, 指示, 時間短縮, 月曜日, , 焦点, 短時間, 答え, , 計算式, 長文, 驚異,

漁港マップや潮汐APIで何を作っているか分かるだろうけど実は。 #api #釣り人的な。

2022.12.13

Logging

おはようございます、釣りは中学生と二十代に少しだけしただけです😱。

この頃Twitterに漁港マップや潮汐APIが取得できたよとかツイートしているので何を作ろうとしているか、徐々にわかってきた人もいると思うのですが、実はまだ着手はしていない。部分的に創れるかどうか調査しているところです。

難題だと思っていた潮汐ですが、APIを見つけたので何とかなりそうな気がしています。これが無かったら難しい計算式を理解して、コードに落とさないといけない作業が発生するところでしたが、そこがカバー出来たのは大きいです。どんなサービスを作ろうとしているかと言えば、釣り情報を共有する釣りマップというサイトです。この釣りマップを作ろうと構想して数年は経過しています。

創りたいけど、自分はズブの素人なのでどういうサイトにすれば良いのかが分かっていないのが痛い。手探りで作ろうとはしているもののまだ先の話。この釣りマップというサイトは、使い勝手良いものにしたいし、釣りしている人はスマホがメインだと思うとUIがしっかりしたものでは駄目だなって思います。

誰かアドバイスしてくれる人がいれば良いのだけども…。

タグ

API, UI, コード, この頃Twitter, ズブ, , マップ, メイン, 中学生, 二十代, 作業, 手探り, , 漁港マップ, 潮汐, 潮汐API, 着手, 素人, 難しい計算式, 難題,

全国各地の漁港データをJSONデータ化したお話🦾。#php #map

2022.12.07

Logging

おはようございます、昨日は晴れていましたね☼。

そんなお天気な日に漁港座標データXMLをJSONデータ化しておりました。国土交通省のデータを加工しJSONデータに加工するのはそんな難しい問題じゃないかなって思っていたのですが、データが重たい、中身のXMLデータは名前空間使っているなどという面倒くさい仕様になっておりました。名前空間の対応は、こちらのQiitaの記事を参照してほぼコピペで自分のコードに追加しました。

だた追加しただけでは、あんなツイートしたJSON構造にならないので細工しています。自分が必要なのは漁港名と座標軸だけなので、これだけで良い感じです。

preg_grep("/".$val->{"@attributes"}->id."/",$name);

因みにXMLファイルが重いので自分はデータを分割しました(エラーが出力されるので)。php.iniの設定は変えたくなかったので分割と加工をしたわけです。座標データと漁港名に分割して上記のコード等を使用しJSONファイルを出力。このJSONコードを元にオープンストリートマップ(OpenStreetMap)とかでサービスを作ることが出来ますが、このデータは非商用なので使い物にならないかな…🤔。データの販売等や二次配布は禁止だけど、データ活用は禁止していないように取れるので詳しく調べてみます🙄。

追記:都道府県を追加してみました

タグ

attributes, grep, gt, ID, json, map, name, php, preg, qiita, quot, val, xml, お話, コード, こちら, コピペ, これだけ, ツイート, データ, ファイル, 中身, 仕様, 全国, 分割, 加工, 参照, 各地, 名前, 問題, 国土交通省, 天気, 対応, 座標, 座標軸, 必要, 感じ, , 昨日, 構造, 漁港, 空間, 細工, 自分, 記事, 追加,

JavaScriptでWebstorage使ってますか?🤔 #webstorage #javascript #cookie

2022.12.04

Logging

おはようございます。二日酔いです、遅めの更新🍃。

今日は今までフロントエンド側で使用していたcookieの処理コードをwebstorageに置き換えた理由と使い方のコードを記載します、JSでCookieを取り出すコードを書く場合、バニラコードで書くかライブラリを使用して書くかだと思います。自分は前者で、とにかくCookieで保存したものを取り出すのに無駄にコードを書いていましたので、そろそろコードを直そうと思ってwebstorageを採用しました。

webstorageを採用した理由は自分が保管するデータはそれ程、容量を食わないしローカル保存(ブラウザ側保存)で十分な情報だったのでwebstorageを採用しました。そして何より、もう殆どのブラウザで使用できるようになっただろうという考えの元、コードを改修しました。

今まで情報の呼び出しするのに数行書いていたものが、1行のコードで参照できるというのは本当に素晴らしいことです💯。

呼び出すコードはこちら

localStorage.getItem("bgcolor_code")

値を保存するコードはこちら

localStorage.setItem("bgcolor_code",color)

その他に削除やクリアするコードやSessionで保存するコード等も存在します、もし詳しく知りたい場合は上記のTwitterのリンクを辿ると情報にたどり着くはずです。

タグ

COOKIE, javascript, JS, webstorage, エンド, コード, データ, バニラ, ブラウザ, フロント, もの, ライブラリ, ローカル, 二日酔い, 今日, 使い方, 使用, 保存, 保管, , 処理, 前者, 場合, 容量, 情報, 採用, 改修, 更新, 殆ど, 無駄, 理由, 自分, 記載,

CSSファイルの設定を読み込んで一括背景色変更するコード。 #cssfile #javascript #coding #colors

2022.11.30

Logging

おはようございます、先日の日曜日は原因不明の体調不良で寝込んでおりました(¦3[▓▓]。

今日は何とか体調が回復したので、CSSファイルの設定コード読み込んで一括背景色変更するプログラムコードを作成しました。※実際、自分のブログ・サイトで動いているコードになります。

<link rel="stylesheet" href="examplestyle.css">

導入方法はまずヘッダーに変更したいCSSファイルを記述します。次にbody内に下記のコードを記述します。

<span id="site_description"></span>

最後にJSコードを挿入します。JSコードはファイルで読み込むでもベタ書きでも良いのですが、上記のHTMLタグより下に記述してください。そうしないと動作しません😗。

let htmlcode = ["#efefef", "#181B39", "#262a2e", "#192734", "#1c483b", "#bf7800", "#83094f"].map(elm => `<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");

const basecolor = "#262a2e";
let cookiefn = function (CodeColor) {
    let r = document.cookie.split(';');
    return r.length ? ((r) => {
        let changecolor = "";
        for (let ii = 0; ii < r.length; ii++) {
            let content = r[ii].split('=');
            for (let i = 0; i < content.length; i++) {
                if (content[i].replaceAll(" ", "") === "bgcolor_code") {
                    changecolor = content[i + 1];
                }
            }
        }
        return changecolor?changecolor:CodeColor;
    })(r) : CodeColor;
};

let old_color = cookiefn(basecolor);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
[...document.querySelectorAll(".color_code")].forEach(elm => {
    elm.addEventListener("click", function (e) {
        color_set(elm.getAttribute("data-color-code"));
    });
});

color_set(old_color);

function color_set(color) {
    for (let ii = 0; ii < document.styleSheets.length; ii++) {
        if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
            for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
                let element_css_code = document.styleSheets[ii].cssRules[i];
                try {
                    element_css_code.style.backgroundColor = color;
                    if (color === "#efefef") {
                        element_css_code.style.color = "#000000";
                        
                    } else {
                        element_css_code.style.color = "#FFFFFF";
                    }
//いらないかも領域🤔👇
                    document.querySelectorAll("#wp-calendar > tbody > tr > td > a").forEach(elm=>{
                        elm.style.backgroundColor = "#909091";
                    });
                    document.getElementById("searchsubmit").style.backgroundColor = "#000";
                    document.querySelector("#s").style.backgroundColor = "#909091";
                    [...document.querySelectorAll("code")].forEach(elm=>{
                        [...elm.querySelectorAll("span")].forEach(childen_elm=>{
                            childen_elm.style.backgroundColor = "#565656";
                        });
                    });
//いらないかも領域🤔👆                    
                } catch (error) {
                }
            }

            document.cookie = "bgcolor_code=" + color;
        }
    }
}

注意事項:背景色を変更するCSSファイルをJSコードでチェックしています。そのチェックしている部分を外すと全てのCSSファイルの背景色を変えることが可能です。

タグ

, body, coding, colors, css, cssfile, description, examplestyle, gt, href, ID, javascript, JS, link, lt, quot, rel, site, span, stylesheet, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, , 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,

超簡単なコード🦋マウス追従をする。 #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にアップしているので参照してみてくださいな(音楽は軽やかなんですけど…😅)。

タグ

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

Chromeブラウザの拡張機能を新たに作ったお話。 #拡張機能

2022.11.22

Logging

おはようございます、転職活動はあまりしていません😯。

本当なら就職出来ている頃だと思います。なぜならハローワークだけで活動しているので、他のスカウトは無視しているという変な転職活動をしています。今年欲しいという求人は人手不足な会社かなと思いますし、年末押し迫って転職できるとはとても思い難いです。頑張っている事は確かですが、今は難しいという思いもあります。

そんな中でChromeブラウザの拡張機能を新たに作ったお話です、一応、皆さんが使えるようにGさんに申請しました。どんな拡張機能を作ったのかと言えば、サイト内検索が出来る拡張機能です、特に難しいコードなどは使用していませんが、人様の拡張機能は少し不安なので自分で自作した訳です。どんな時に使用するかは人によって違うかも知れませんが、例えばITエンジニアならサイト内のドキュメント検索に使用できるかなって思います。今のリファレンスサイトなどはサイト内検索が出来るようになっているモノのそれでも抜け落ちている部分があるので、それを拡張機能の力で補えるかなと思います。

Chrome拡張サイト内検索機能の動作手順。
サイト内、検索のChrome拡張機能の動作手順。

因みに中のmainコードはこれだけです。コレでサイト内検索を行っています。

document.getElementsByName("txt")[0].addEventListener("keydown", (elm) => {
    if (elm.key === "Enter") {
        chrome.tabs.query({ 'active': true,'lastFocusedWindow': true }, function (tabs) {
            var site = String(tabs[0].url).match(/https?\:\/\/[a-zA-Z0-9|\.|\-]*\/?/)[0].replace(/https?:\/\//,"").replace(/\//,"");
            chrome.tabs.create({
                url:"https://www.google.com/search?q=site" + encodeURI(":"+ site + " " + document.getElementsByName("txt")[0].value)
            });
        });
    }
});

追伸:公開されました。拡張機能はこちら👉

https://chrome.google.com/webstore/detail/site-search/ipemphkmnkbnfonlpmgacnmhnhfimmll/related?hl=ja&authuser=0

タグ

Chrome, IT, エンジニア, お話, コード, サイト, スカウト, ドキュメント, ハローワーク, ブラウザ, リファレンス, 不安, , , , 人手, 人様, , 今年, , 会社, 使用, , 少し, 就職, 年末, 拡張, , 本当, 検索, 機能, 求人, 活動, 無視, 申請, 皆さん, 自作, 自分, , 転職, ,

お天気APIを試してみました。#超簡単コード

2022.11.21

Logging

おはようございます、今日は天気APIの話なので天気のお話はしませんが…。

さて、超簡単コードを記載しています。下記のソースコードとオープンウェザーマップのAPIKEYがあれば、誰でもプログラマーです。という事を言えば後ろから蹴られそうですが…。先ずは簡単なコードを見て勉強するのが大事かなって思います。

お天気APIを試してみました。#超簡単コード
API

いきなり難しいことを身に着けようと思っても、三日坊主になって先に進まないのが世の常ですw。なので、簡単なコードで楽しんで勉強するほうが大事かなって。

<?php
require "./assets/config.php";
$lat = "33.55972";
$lon = "133.53111";
$lang = "ja";
$url = "https://api.openweathermap.org/data/2.5/weather?units=metric&lang={$lang}&lat={$lat}&lon={$lon}&appid=".APIKEY;
$hasWeatherdata = json_decode(@file_get_contents($url));
print($hasWeatherdata->weather[0]->description);
print("<img src='./assets/images/". $hasWeatherdata->weather[0]->icon .".png'>");
print((int)($hasWeatherdata->main->temp) . "℃");

タグ

0, 133.53111, 33.55972, API, APIKEY, assets, com, config, ea, https, ja, lang, lat, lon, lt, php, quot, require, url, , watch, www, Xn-VCyGQ, youtube, ウェザー, お話, コード, こと, ソース, プログラマー, マップ, 三日坊主, 下記, 世の常, , 今日, 勉強, 大事, 天気, 後ろ, 簡単, 記載, , , 超簡単,

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

2022.11.18

Logging

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

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

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

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

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

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

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

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

タグ

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

cssとjsを動的に読み込むソースコード2。#jscode

2022.11.11

Logging

おはようございます、すずめの戸締まりを本日、観に行きますという事で本日はお休み。感想は帰ったら別途書きます。

以前、ファイルを動的に再読み込みする方法という記事を書きまして、この記事がまぁまぁプレビュー数を取ってくれているので、ソースコードを書き直しました。以前と違うのは正規表現を見てくれればわかるかと思いますが、パラメータを初期からもっているJSファイルやCSSファイルは対象外にしている所です。

メンターがいない中、コードを見直したりするのはやっぱ時間がかかるものですね。いつも自分に必要なのはメンターだと思ったりしますが、なんだかそういう人が見当たらないですよね。やはり東京や大阪にいかないと見つけられないのかな?、今ではSNSがあるから見つけやすくなっているものの、自分よりも50%ぐらい技術力がある人がいないですよね。凄い技術力が上の人は知っているのだけども、そういう人の話を聞いてもさっぱりなので・・・。

近くにいないものなのかな、よく灯台下暗しという言葉もあるからいそうな気がするですけどね🫠。

ソースコードはこちらです。

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

タグ

2, 50, css, JS, jscode, SNS, お休み, コード, すすめ, ソース, パラメータ, ファイル, プレビュー, メンター, もの, , , , , , 以前, 初期, 別途, 大阪, 対象, 必要, 感想, 戸締まり, , 技術力, 方法, 時間, 本日, 東京, 正規, 自分, 表現, , 記事, ,

データからページネーションが出来る。 #jscode

2022.11.10

Logging

おはようございます、昨日は朝が寒く昼間は暑い日でしたね😗。

さて、データからページネーションが出来るライブラリがある事を知りましたのでそちらの紹介と使い方です。今回、使用したのはPagination.jsというライブラリです。使い方は簡単、下記のようなデータがあった場合、このようなソースコードを書いて使用します😮。

[
  {
    "id": 1,
    "name": "白川 正人",
    "hiragana": "しらかわ まさと",
    "age": "45",
    "bday": "1977年04月10日"
  },
  {
    "id": 2,
    "name": "大村 麻衣子",
    "hiragana": "おおむら まいこ",
    "age": "42",
    "bday": "1979年12月11日"
  },
  {
    "id": 3,
    "name": "大原 静香",
    "hiragana": "おおはら しずか",
    "age": "53",
    "bday": "1969年06月20日"
  },
  {
    "id": 4,
    "name": "吉田 佐代子",
    "hiragana": "よしだ さよこ",
    "age": "40",
    "bday": "1982年05月24日"
  },
  {
    "id": 5,
    "name": "宮原 和弘",
    "hiragana": "みやはら かずひろ",
    "age": "22",
    "bday": "2000年04月29日"
  },
  {
    "id": 6,
    "name": "伊藤 二郎",
    "hiragana": "いとう じろう",
    "age": "27",
    "bday": "1995年02月18日"
  },
  {
    "id": 7,
    "name": "井上 明子",
    "hiragana": "いのうえ あきこ",
    "age": "55",
    "bday": "1967年06月26日"
  },
  {
    "id": 8,
    "name": "恩田 雄",
    "hiragana": "おんだ ゆう",
    "age": "37",
    "bday": "1985年09月25日"
  },
  {
    "id": 9,
    "name": "山崎 幸志",
    "hiragana": "やまざき こうじ",
    "age": "29",
    "bday": "1993年03月24日"
  }
]
        $.extend($.fn.pagination.defaults, {
            className: 'paginationjs-theme-blue',
            pageSize: 3
        });
        let url = "json data のurl";
        (async () => {
            await fetch(url).then((result) => result.json()).then(
                (data) => {
                    data.reverse();
                    $('#demo').pagination({
                        dataSource: data,
                        callback: function (data, pagination) {
                            var html = table_make(data);
                            document.querySelector("#tbl").innerHTML = html;
                        }
                    })
                }
            )
        })();

        function table_make(data) {
            return (data.map((element) => {
                let str = "";
                str += "<tr>";
                str += ((Object.keys(element).map(el => "<td>" + element[el] + "</td>")).join(""));
                str += "</tr>";
                return str;
            })).join("\n");
        }
            <div class="col-12" id="demo">
                <table class="table table-dark" id="tbl"></table>
            </div>

コードを抜粋して書きましたが、このコードを書く事とjsのライブラリとcssファイルもダウンロードするようにして下さいね🫠。

因みに自分はこのライブラリを初めて使用しましたが、結構使いやすいですね。今まで開発ではLaravelなんかのページネーションを使用していた事はありますが、フロント側で出来る事を知り驚きを隠せませんというのは大袈裟ですけど使い道は有るなって思います。

タグ

04, , 10, 1977, 2, 45, age, bday, hiragana, ID, JS, jscode, name, Pagination, qu, quot, コード, しらかわ, ソース, そちら, データ, ネーション, ページ, まさと, ライブラリ, 下記, , 今回, 使い方, 使用, 場合, , 昨日, 昼間, , 正人, 白川, 簡単, 紹介,

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|\.jpg)$/.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);
      }
    }
  });
}

タグ

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

htmlとcssとjavascript-初学フロント側-No.1#code

2022.11.07

Logging

おはようございます。今年もあと2ヶ月もないわけですよね早いものですね😮

htmlとcssとjavascript-初学フロント側-No.1という動画をYOUTUBEにUPしたのが昨日の9時のこと。これで理解出来るか、どうか分からない。解説もない教えもない、唯コードを書いているところを見せてるだけです。ソースコードは下記のサイトから参照できますが、次の動画作成のためにデザインや処理が変わっていたり、動作しなくなってたりするので注意が必要です。

https://358tool.com/sample-site/

自分はHtmlやcssはあまり覚えていないのですが、分かるのはそれなりに基本ベースがあるからだと思ってます。今からHtmlやcssを学ぶ人は全部を覚えようとはせずに、手を動かしてコードを書くことから始めて下さい。そのうち基本ベースは身につくことになると思います。

因みに自分が書いているclassの名前付けなどの書き方は駄目な書き方ですので、そういう所、お仕事として書く場合は会社によってキマりなんかが有りますので、そういう事まで知りたい人はこちらの動画を参照ください。

実戦マークアップ

タグ

, 2, 358, , cl, Code, com, css, html, https, javascript, no, sample-site, tool, UP, youtube, うち, コード, こと, これ, サイト, ソース, それなり, ため, デザイン, ところ, フロント, ベース, もの, 下記, , , 今年, 作成, 全部, 処理, 初学, 動作, 動画, 参照, 基本, 必要, , 昨日, , 注意, 理解, 自分, 解説, ,