Tensorflow.jsの画像認識って

2024.03.11

Logging

おはようございます、Tensorflow.jsの画像認識ってドキュメント通り書いて上手く画像認識できますか?自分が試してみたら、どうも下記のエラーがでて上手く動作してくれなかったのでもしかしたらと思いバージョンをアップしたら動作してくれました。

Uncaught (in promise) Error: Tensorflow Op is not supported: _FusedConv2D
<!-- Load TensorFlow.js. This is required to use MobileNet. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0"> </script>
<!-- Load the MobileNet model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1"> </script>

<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" src="cat.jpg"></img>

<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
  // Notice there is no 'import' statement. 'mobilenet' and 'tf' is
  // available on the index-page because of the script tag above.

  const img = document.getElementById('img');

  // Load the model.
  mobilenet.load().then(model => {
    // Classify the image.
    model.classify(img).then(predictions => {
      console.log('Predictions: ');
      console.log(predictions);
    });
  });
</script>

因みに自分は画像投稿系のサイトで使用するために今回のTensorflow.jsを使用するのですが、よくよく調べているとファインチューニングが出来るようです。ファインチューニングとは一度学習したものに再学習を埋め込む手法といえば良いのかな?要するにカスタマイズしてある分類に特化させる手法のことを指します。今のところ学習済みのモデルで全然判定されるのでOKだと思うのですが、ユーザーさんから認識できないという不満の声が上がれば対応しないといけなくなりそうです。

明日へ続く。

タグ

'src', below, const img, Error, getElementById, gt, img, img&quot, Load TensorFlow.js, lt, MobileNet, mobilenet.load, model, predictions, quot, statement, then, Uncaught, ファインチューニング,

Laravelがまぁまぁ身についてきいる。

2024.01.10

Logging

おはようございます、Laravelがまぁまぁ身についてきいるのですが今年はもっと磨きをかけたいなって思っています。非同期処理とかキューとかは一通り理解できた感じですが、DDDが未だまだ感が強いのでそこを慣れていきたいなって思っています。

スケジュールでJobを実行する場合、withoutOverlappingをお忘れなく。無いと重い処理とかでコケちゃう部分が出てくるのでこれは必須だと思います。Qiitaに有ると無いとでの処理の時系列を解説されている方がいるので、そちらを参考にしてみてください。

$schedule->command($command)->everyMinute()->withoutOverlapping();

明日へ続く。

タグ

-Command, $schedule-&gt, DDD, everyMinute, gt, job, Laravel, qiita, withoutOverlapping, キュー, コケちゃう部分, スケジュール, 一通り, 処理, 参考, 必須, 時系列, , 非同期処理,

オーバーライドとは何なのか。それは。

2023.11.27

Logging

おはよう御座います、もう20年前になるのかな駆け出しのエンジニアだった頃の話。そのころ、オブジェクト指向が何なのかなんてことも知らないのに粋がっていました。その事を思い出すと恥ずかしいばかりです。その駆け出しのエンジニアの頃にオブジェクト指向のことをどうしても勉強しないといけなくて参考書を買ったのは良いのだけど専門用語が多くてついて行けなかった、そんな記憶があります。今ではchatGPTという何でも適当にだいたい正しそうな回答してくれる優しくてひねくれ者のツールがあるので、本当に良いなって思います。

さて、オーバーライドとは何なのかという事ですがchatGPTよりもっと要約した回答を書くと継承クラスの上書きです。これでもチンプンカンプンな人に例文を書いてみました。これで分からない方は何かを諦めた方が良いかも知れません。

<?php
//testClass.php
trait testClass {
    public function Hello(){
        return 'Hello';
    }
}
<?php
//test.php
require './testClass.php';
class test1{
    use testClass;
    public function run (){
        print $this->Hello().PHP_EOL;
    }
}
class test2{
    use testClass;
    protected function Hello(){
        return 'Good night';
    }
    public function run (){
        print $this->Hello().PHP_EOL;
    }
}

(new test1)->run();
(new test2)->run();

この2つのファイル(コード)を保存してtest.php実行してみてください。そうするとよく分かると思います。ちなみに実行結果はこの様になります。
https://zip358.com/tool/demo79/

明日へ続く。

タグ

ChatGPT, gt, gt;Hello, lt, php, PHP_EOL, print, return, run, test.php require, testClass, testClass.php trait, this, use testClass, オーバーライド, オブジェクト指向, チンプンカンプン, ひねくれ者, 上書き, 例文,

アイキャッチ画像を表示するように変更。PHPコード

2023.11.25

Logging

おはよう御座います、先日アイキャッチ画像を表示するように変更しました、PHPコードはこんな感じです。Bootstrapでレスポンシブ画像に対応しています。アイキャッチ画像を表示するようにした訳はデザインも変えたのでアイキャッチいれても変じゃないかなって思ったことです。そういう訳で先日の休みに対応しましたというのが経緯(いきさつ)です。

            <div>
              <?php
              print get_the_post_thumbnail_url() ? '<img src="' . get_the_post_thumbnail_url() . '" class="img-fluid">' : '';
              ?>
            </div>

そんな休みの日にこんなタイムラインが流れてきました、こんなのが浸透したら商売が破綻すると思う人がいると思うけれども、たぶん今の生成AIで凄いことが出来るのに殆んどの人が使えていない。これが浸透するのにかなり月日がかかると思います。一般の人に浸透するにはラグが存在するので、それまでにどうすれば良いか対処出来ると思います。ちなみにポストが消えてしまった時のために上のポストの内容を解説しておくと、画像(デザイン)からフロントエンドエンジニアやデザインナーが行うHTML作成作業を生成AIが変わって行ってくれる。今の所、完璧なコードが生成される訳ではないので手直しが必要ですが、いずれは必要なくなることは時間の問題という話なんだけど、実際ひとが思っている未来の斜め上を行くのが未来かと思います。なので落胆はせずに上手く取り入れていく方が賢明かなって自分は思います。

明日へ続く。

タグ

Bootstrap, class, div&gt, get_the_post_thumbnail_url, gt, img src, img-fluid&quot, lt, php, print get_the_post_thumbnail_url, quot, アイキャッチ, デザインナー, ラク, レスポンシブ画像, 商売, 手直し, 生成AI, 経緯, 落胆,

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

タグ

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

よさこい祭り動画検索を久しぶりにバージョンアップ

2023.08.24

Logging

おはようございます、よさこい祭り動画検索を久しぶりにバージョンアップしました。バージョンアップした理由はGさんがAndroid12に対応していないアプリは駄目だよと警告⚠を頂きまして、その対応のため、アプリを更新しました。このアプリはサイトを読み込んで表示しているだけのアプリなのでそのうち改修しようと思っているのだけどなかなか、手直ししていないアプリです。

Androidアプリでリリースしているものは、これだけでこのアプリがGさんに出禁になっても別に良いやというアプリですが、それでもなんだか知らない間にアプリのインストールも増えていて、びっくりしています。更新したのですが、実機で確認するとなんだかエラーが出てたりして何度か手直しを行いました。原因はマニフェストの書き方が駄目だったみたいです。

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.yosakoi_app">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

こんな感じに書かないとお叱りを受けるようです、皆さまも気おつけてください🙇。

タグ

Androidアプリ, example.yosakoi_app&quot, gt, lt, manifest xmlns, Package, quot, quot;android.permission.ACCESS_NETWORK_STATE&quot, quot;android.permission.INTERNET&quot, uses-permission android, インストール, うち, エラー, お叱り, バージョン, マニフェスト, 何度か手直し, 出禁, 皆さま, 警告,

Laravelでユニットテストをする中Factoryは欠かせない。

2023.08.11

Logging

おはようございます、Laravelでユニットテストをする中Factoryは欠かせない存在だと思っています。毎回、データを初期化していると処理が重くなってしまいます。ユニットテストが多くなるに連れて時間がかかるのは仕方がないのかなって思いますが、極力時間短縮したいと思うのは普通のことだと思います(github上にpull requestしphpstan(静的解析ツール)やphpunit(ユニットテスト)を行っていく中で結構時間がかかるのはユニットテストだと思います。)。

恐らくユニットテストでデーターベースの初期化をしない事が良いだろうと思うようになってきました。そんな中で役に立つのがFactoryです。これを使用することで次のテストに影響を与えないみたいなんですね。なので、この頃はFactoryを使用しています。

Factoryは下記のCommandで生成することが出来ます。

php artisan make:factory filename

仕様の仕方はこんな感じになります💁

<?php
$user = User::factory()->make([
 'username'=>'test',
 'password'=>'testpass',
]);
print $user->username;

タグ

-Command, Factory, factory filename, github上, gt, gt;username, Laravel, lt, php, php artisan make, phpunit, print, pull requestしphpstan, user, この頃, データーベース, ユニットテスト, 中Factory,

Laravelにてnpmが使えないサーバにてログイン画面の構築。

2023.08.06

Logging

おはようございます、Laravelにてnpmが使えないサーバにてログイン画面の構築のお話です。お話というより動画を作りました。この動画を全画面表示でみると大体のことが分かると思います。この動画は画面ができるまですので、この後、Commandを使用して下記のCommandを打ち完成となります。

php artisan migrate
laravelのログイン機能と日本語化とバリデーション日本語化

前提条件として.envファイルの設定は済ましていることとします。因みにさくらレンタルサーバーでは初期のドメインより.envファイルが見える仕様になっているので、.htaccessファイルを使用して隠しファイルは見えないように設定してあげてください🗿。さくらレンタルサーバーの公式ブログではこの事に一切触れていないのだけど大丈夫なのか?気になるところです。

<Files ~ "^(\.en|\.edi|\.git|\.dat|\.sql|composer\.|artisan)">
deny from all
</Files>
{
    "Login": "ログイン",
    "Register": "新規登録",
    "Forgot Your Password?": "パスワードを忘れた場合",
    "Reset Password": "パスワード再設定",
    "Send Password Reset Link":  "パスワード再設定URLを送信",
    
    "Name": "お名前",
    "Email Address": "メールアドレス",
    "Password": "パスワード",
    "Confirm Password": "パスワード(確認用)",
    "Remember Me": "ログイン状態を保存",
    
    "Hello!": "ご利用ありがとうございます。",
    "Reset Password Notification":  "パスワード再設定のお知らせ",
    "You are receiving this email because we received a password reset request for your account.": "あなたのアカウントでパスワード再発行のリクエストがありました。",
    "This password reset link will expire in :count minutes.": "再設定URLの有効期限は :count 分です。",
    "If you did not request a password reset, no further action is required.": "もしパスワード再発行をリクエストしていない場合、操作は不要です。",
    "If you’re having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser: [:actionURL](:actionURL)": "\":actionText\"ボタンを押しても何も起きない場合、以下URLをコピーしてWebブラウザに貼り付けてください。\n[:actionURL](:actionURL)",
    "Regards": "よろしくお願いいたします"
    }

タグ

-Command, actionText, actionURL, artisan, count, dat, edi, en, envファイル, git, gt, Laravel, lt, npm, quot, quot;Login&quot, quot;Regards&quot, quot;Register&quot, sql|composer, will expire,

Laravelのappとresolveでインスタンス。

2023.07.29

Logging

おはようございます、この頃、技術的な記事を書いていなかったのでLaravelのことについて語ります。Laravelのappとresolveでインスタンスしてくれる便利な機能があります。使い方は下記を参照してください。

$result = resolve('App\SomeClass')->someMethod();
$result = app('App\SomeClass')->someMethod();

では、これは何をするでしょうか。Factory(ファクトリー)はどんな機能なのかをBardに説明してもらいました。

LaravelのFactoryは、テストでデータベースを使う代わりに、データの生成方法を定義して、そのデータをテストで使うことができる機能です。
例えば、ユーザーモデルのテストをするときに、Factoryを使ってユーザーを生成することができます。そうすることで、データベースを使う必要がなくなり、テストが高速化されます。
また、Factoryを使うことで、テストで使用するデータの作成を自動化することができます。これにより、テストの保守性が向上します。
Factoryは、Laravelのテストを書くときに、非常に便利な機能です。
// 1つのデータを生成
$user = factory(App\Models\User::class)->create();

// 複数のデータを生成
$users = factory(App\Models\User::class, 5)->create();

appとresolveを知っていた人は恐らくFactoryも知っているかも知れません。Laravelのドキュメントを隅から隅まで読めば参考書は要らない気がします。英語がスラスラと読めるようになりたいなってこういう時に思います。

タグ

App, AppModelsUser, AppSomeClass&#39, Bard, class, create, Factory, gt, Laravel, resolve, result, someMethod, user, users, データベース, ドキュメント, ファクトリー, 生成, ,

I mutter using laravel’s schedule.

2023.06.23

Logging


Good morning! These days, I’ve been working on migrating the parts that used the twitteroauth library to Laravel. I think it was a good decision to migrate because it made it easier to incorporate new features. I wish I had initially started with Laravel for this.

Here are some technical hints, but you should be able to find more detailed methods by searching online:

  1. Install twitteroauth in Laravel’s vendor directory.
  2. Create a job using the command php artisan make:job YourPreferredName (e.g., ProcessPodcast).
  3. Register the job in the scheduler.
  4. Configure cron (in my case, * * * * * php /path/to/artisan schedule:run >> /dev/null 2>&1).

With this setup, it will tweet at the specified time. I used to be able to retweet, but it seems my Twitter bot has been flagged, and now I can only tweet. So I’m doing my best with just tweeting.

Concerns about Twitter: I can’t help but think that it’s only a matter of time before either Jack Dorsey leaves or Twitter gets acquired and disappears. Even with a new CEO, I don’t expect things to improve immediately, and as long as Jack Dorsey remains, I believe it will continue to be problematic. Twitter has lost some of its appeal for individual developers who can no longer enjoy developing on the platform. The various services that were created using Twitter’s API in the past were possible because Twitter was developer-friendly.

タグ

artisan schedule, CEO, Configure cron, created using Twitter, dev, gt, hints, I've been working, Install twitteroauth, job YourPreferredName, library to Laravel, past were possible because Twitter was developer-friendly, path, php, Platform, run, setup, that were, These days, vendor directory,

windows11を初期化した話。バックアップ失敗?

2023.06.17

Logging

おはようございます。前々から初期化しようと思っていた、メインのパソコンを初期化しました。これは先日の話になります。

初期化は比較的にすんなりと出来たのですが、Dockerのimageデータが読み込めないという問題が発生しました。バックアップを取る際にMacなどのOS用のコマンドを使用してバックアップを取っていたのが問題でした。

docker save ubuntu -o ubuntuv.tar
docker load -i ubuntuv.tar
docker save ubuntu > ubuntuv.tar
docker load < ubuntuv.tar

上記のことを知らずにリナックス用のバックアップコマンドで行い、load確認をせずに初期化を強行してしまったのが間違いでした。結果、データは残っていたので再度、DockerComposeからコンテナを立ち上げ直し、なんとか対応出来ましたが心臓に悪いなって感じましたね。

タグ

docker, docker save ubuntu, DockerCompose, gt, i ubuntuv, imageデータ, load確認, lt, Mac, tar, ubuntuv.tar, ubuntuv.tar docker load, コマンド, こんてな, バックアップ, バックアップコマンド, リナックス用, 再度, 前々, 心臓,

非同期処理で並列処理。お腹いっぱい #jscode

2023.06.10

Logging

おはようございます。18時でも明るくていつカーテンを閉めればよいのか分からないです。さて、非同期処理で並列処理のコードを一週間前にTwitterで呟いたので、ソースコードをこちらにUPします。非同期処理で並列処理を行うのは、こういう感じだということを理解できると思います、あまり非同期処理で並列処理を行う機会なんて無いかもしれないですが、こういう事が出来るんだということを頭の片隅に置いとくと良いかもです😌。

がっちり覚えとくのも良いですけど、曖昧に覚えているのも悪くないと思います。因みに自分はこういう事は出来るだろうと自分は思っているタイプです。自分が考えていることぐらい頭の良い人は考えているはずなので、出来るだろうという事から始まって大体、ググったりChatGPTに聞くと最適解を教えてくれます。そういう訳でサンプルコードとサンプルサイトのリンクを貼っときます。

https://zip358.com/tool/demo76

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test1");
        resolve(1);
    }, 15);
});
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test2");
        resolve(2);
    }, 11);
});
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test3");
        resolve(3);
    }, 16);
});
let p4 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test4");
        resolve(4);
    }, 1);
});
let p5 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test5");
        resolve(5);
    }, 9);
});
(async()=>{
    let a = await Promise.all([p1, p2, p3, p4, p5]);
    console.log(a);
})()
 

タグ

A`, async, await Promise.all, ChatGPT, console.log, gt, new Promise, quot;test1&quot, quot;test2&quot, quot;test3&quot, quot;test4&quot, quot;test5&quot, reject, resolve, setTimeout, Twitter, いつカーテン, 並列処理, 最適解, 片隅,

php:トレイトって言うよりclassの中でuseを使用。

2023.05.19

Logging

おはようございます、php:トレイトって言うよりclassの中でuseを使用する方法って言った方がわかり易いのかも知れません。詳しい説明は公式を参照して下さい。コード例とtraitの説明を書いときます。

トレイトは、PHPのようなプログラミング言語でコードを再利用するための仕組みのひとつです。通常、プログラムではクラスを使ってコードを組み立てますが、トレイトを使うことで、異なるクラスに属するメソッドのグループを独立したクラスとして再利用することができます。これにより、単一継承という制限を緩和することができます。トレイトを使うことで、多重継承やMixinといった問題を回避することもできます。

トレイトはクラスと似ていますが、トレイトは単に機能をまとめるためのものです。トレイト自体のインスタンスを作成することはできません。トレイトを使うことで、従来の継承に機能を追加するだけでなく、クラスのメンバーを水平方向に追加することもできます。つまり、継承しなくてもクラスに新しい機能を追加することができるようになります。

実行サンプル=>https://zip358.com/tool/demo75/

<?php
require_once "hello/hello_class.php";

use hello\Hello;

class Test
{
    use Hello;
    public function main()
    {
        print("-goodbye");
    }
}

(new Test())->main();
<?php

namespace hello;

trait Hello
{
    public function __construct()
    {
        print("Hello");
    }
}

タグ

class, construct, goodbye&quot, gt, lt, Mixin, namespace hello, php, php require_once, print, quot, quot;hello, quot;Hello&quot, trait, trait Hello, use, use helloHello, トレイト, トレイト自体, 単一継承,

404の画像をno-imageにする#jscode

2023.05.16

Logging

おはようございます、404の画像をno-imageにするコードです。案外簡単なコードですが、これでノーイメージに変換できます。因みに参照した404ページが404のステータスを吐き出していなかったら、このJSコードは機能しません。

if(document.querySelectorAll("img")){
     [...document.querySelectorAll("img")].forEach(elm=>{
        fetch(elm.src).then(response=>{
            if(!response.ok){
                elm.src = "no_image1.gif";
            }
        });
     });
}

因みに自分のブログサイトもこんな感じのコードを埋め込んでいます。これをphp言語で対応すると処理がサーバーサイドになるので重たくなります。こういうのはJSコードで対応するのが個人的には良いと思っています。尚、JSコードとPHPを連動させて表示の有無を行うのも良いかも知れません。

画像URLを参照してレスポンスデータが返ってきます、このレスポンスの変数をconsole.log(response);で表示するとstatusなども返ってきていることが分かると思います。404ステータスだけ何かしたい場合はresponse.statusで判断するともっと厳密になって良いかも知れません。

タグ

'src', console.log, document.querySelectorAll, elm, fetch, foreach, gt, if, img&quot, no-image, quot, response, response.ok, response.status, status, then, サーバーサイド, ブログサイト, レスポンス, 変数,

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

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の切り替えが難しいでしょうという人もいると思いますが、息を吸うようにいつもコードを書いているので正直な所、難しい事ではないです。仕事の場合、注意をはらっているのですが…まだまだ抜けがあるのが現状です。それが嫌だなって思います。そこを直したいなって日々思っています。

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

タグ

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,

laravelのスコープとリゾルブを知った日。 #phpcode

2023.03.21

Logging

おはようございます、Laravel技術を2つ手に入れました。有り難いことです😭。

他にもいろいろあるだろうけど、スコープとリザーブという技術を知りました。スコープも便利そうだ、リザーブも使い方が分かりましたのでchatGPTにサンプルコードを書いていただき解説もお願いしました。

class User extends Model
{
    public function scopePopular($query)
    {
        return $query->where('votes', '>', 100);
    }

    public function scopeActive($query)
    {
        return $query->where('active', 1);
    }
}

$users = User::popular()->active()->orderBy('created_at')->get();

Laravelのスコープとは、モデルクエリに対する再利用可能なクエリ制約のことです。スコープを定義することで、特定のクエリ制約を複数の場所で簡単に再利用することができます。

use App\Services\SomeService;

$someService = resolve(SomeService::class);

Laravelのresolveメソッドは、サービスコンテナからサービスを解決するために使用されます。サービスコンテナとは、依存性注入を実現するための強力なツールです。

依存性注入とは、クラスが他のクラスに依存している場合、その依存関係を外部から注入することです。これにより、クラス間の結合度が低くなり、テストや再利用が容易になります。

Laravelでは、サービスコンテナを使用して依存性注入を実現します。resolveメソッドは、サービスコンテナから特定のサービスを取得するために使用されます。

タグ

$query-&gt, ChatGPT, class, GET, gt, gt;active, Laravel, popular, query, resolve, resolveメソッド, return, SomeService, use AppServicesSomeService, user, where, クエリ制約, スコープ, リザーブ,

MastodonAPIに先週の日曜日に鞍替え。#脱TwitterAPI有料化

2023.02.10

Logging

おはようございます、TwitterAPIの有料化始まりましたね😖。

企業ではどういう対応を取るのでしょうか。個人で作っていたサービスはサービス閉鎖する人達が増えてきましたね。自分もBotで高知県の企業を応援するサービスを作っていたのだけど、2月5日にサービスを停止しました。

このブログは予約投稿なので、これが配信された時にはTwitterから具体的なAPIの値段などが発表されていると思います。その発表次第ですがBotを再稼働するという選択も残っているのですが、どうなるかは分からないです。

そんな中でPHP言語を使用しMastodonのAPIを使って「投稿だけ」する。コードを書きましたのでお裾分けです。

https://qiita.com/taoka-toshiaki/items/483340a28c03a1828400

php Mastodon.php 'テスト投稿です'
<?php
require "config.php";
class Mastodon{
    const method = "POST";
    const host = "mstdn.jp";
    const endpoint  = "/api/v1/statuses";
    public static function toot($postdata = null)
    {
        if(!is_null($postdata)){
            $data = http_build_query($postdata);
            exec('curl -X POST -d "'.$data.'" --header "Authorization: Bearer '.ACCESSTOKEN.'" -sS https://'.self::host . self::endpoint.'; echo $?',$output);
            var_dump($output);
        }
    }
}
//    「未収載」    -> 'unlisted'
//    「公開」      -> 'public'
//    「非公開」    -> 'private'
//    「ダイレクト」 -> 'direct'
if($argv[1]){
    $postdata = [
        "visibility"=>"public",
        "status"=>strip_tags($argv[1]),
    ];
    Mastodon::toot($postdata);
}
<?php
define('ACCESSTOKEN','xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');

タグ

ACCESSTOKEN, API, argv, Authorization, Bearer, BOT, echo, endpoint, exec, gt, header, lt, mastodon, null, php define, php require, quot, toot, Twitter, TwitterAPI,

Bladeのinjectという物を使えば独自関数を呼び出せる。#laravel

2023.02.01

Logging

おはようございます、週に一個は技術ネタを入れようかなと思っている中の人です。

今回はタイトル通りのお話になります。bladeで独自関数を使用したいなと思ったことはありませんか。そういう時に重宝するのはinjectだというお話になります。使い方は下記の方法で可能です。

@inject('代入される任意の変数名', 'namespaceを含むクラス名')
{{ $代入される任意の変数名->呼び出すメソッド名() }}

これを知ったのは次のサイトになります。因みにbladeとはLaravelで使用できるテンプレートエンジンになります。いうなれば昔、流行ったSmartyという物と同じ位置づけですね。

因みに、この記事はあまりSEOを意識していませんので検索にヒットしないかも知れませんので、是非ともシェアして頂けると有難いです😄。

余談なんですかもう一つ、bladeでHTMLを含む文字を変数に代入するとそのまま表示されてしまいますよね、それをHTMLコードとして認識させたい場合は下記のようにすることでHTMLコードとして認識されます。

{!! 任意の変数名 !!}

タグ

$代, blade, gt, html, HTMLコード, inject, Laravel, namespace, SEO, Smarty, クラス名, タイトル通り, テンプレートエンジン, メソッド名, 余談, 変数, 変数名, , 関数,

laravel入門書コンプリートしたけどなんか😅。 #laravel

2022.12.27

Logging

おはようございます、クリスマス・イブは普段と変わりない日常でした。彼女は引き続き募集しています😧(冗談w)。

さて、Laravel入門書は一通り走らせてみました。すべての機能を覚えた訳でもないけどこういう事が出来るだということは頭の片隅に残っています。後半のデータベースの内容になってデータベースの設計も大事なんだな。特に名前付けが大事になるとはある程度知っていたけど、ここまで尾を引く感じになっているものとは驚きでしたね。

今まで独自フレームワークで開発していたので、こういう所が緩かった気がします。Laravelの良さを引き出すにはこういう所(テーブル名の命名やフィールド名の命名)も大事になるだろうな。

ただ、先日呟いたhasOneとhasManyに関しては使用しづらいって感じがあります。そもそもメソッドを使用してSQL文を発行するのが、非情にやりづらさを感じるので出来れば、DB::row(…)->setBindings(※1)でなんとかしたいなという気持ちがあります。もしくはDB::table(…)->get()とかで・・・。

※(※1)を使用する場合は疑問符プレースホルダーで使用しましょう。名前付きプレースホルダーは使用できないみたい_(:3」∠)_。

タグ

db, GET, gt, hasMany, hasOne, Laravel, Laravel入門書, row, setBindings, SQL文, TABLE, イブ, データベース, フレームワーク, メソッド, 一通り, 名前付きプレースホルダー, 命名, 片隅, 疑問符プレースホルダー,

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

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

タグ

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, 朝飯前,

ワードプレスの自動タグ生成するプラグイン再開発。 #wp #tag

2022.12.12

Logging

おはようございます、今年もあと半分とちょっとですね、月曜日のたわわ☕。

さて、今日はワードプレスの自動タグ生成するプラグイン再開発しましたってお話です、この自動タグを生成するツールは以前、作っていたのですがYahoo!APIのバージョンアップに伴い使用出来なくなっていました。その為、プラグインを更新しV2対応をこの度、行ったって話です。もともと日本語記事のタグ自動生成するものは存在していたのですが、それがエラーで使用出来なくなり自分で開発したのが今に至っています。

プラグインをダウンロードして使いたい方は、zipファイルを解凍し解凍したフォルダをサーバーのプラグイン置き場にアップロードすることにより使用出来るようになります。尚、前手順としてYahoo!APIのアプリケーションIDの取得を行う必要があります。

プラグインをダウンロードしたくないという方のためにソースコードを一部貼っときます。

        if (isset($appid)) {
            $endpoint = "https://jlp.yahooapis.jp/KeyphraseService/V2/extract";
            $headers = [
                "Content-Type: application/json",
                "User-Agent: Yahoo AppID: ".$appid,
            ]; 
            $param = [
                "id"=> time(),
                "jsonrpc" => "2.0",
                "method" => "jlp.keyphraseservice.extract",
                "params" => [
                    "q"=>preg_replace("/https?:([a-zA-Z0-9|\/|_|\-|%|@|\*|\.|\?|&|=]){0,}/m","",$content)
                    ]
                ];

                $curl=curl_init($endpoint);
                curl_setopt($curl,CURLOPT_POST, TRUE);
                curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
                curl_setopt($curl,CURLOPT_POSTFIELDS, json_encode($param));
                curl_setopt($curl,CURLOPT_SSL_VERIFYPEER, FALSE);
                curl_setopt($curl,CURLOPT_SSL_VERIFYHOST, FALSE);
                curl_setopt($curl,CURLOPT_RETURNTRANSFER, TRUE);
                
                $response =  json_decode(curl_exec($curl));


            if (isset($response->result->phrases)) {
                foreach ($response->result->phrases as $keys=>$word) {
                    if ($word->text) {
                        $tags[] = $word->text;
                    }
                    if (is_array($tags)) {
                        wp_set_post_tags($post_id, implode(",", array_unique($tags)), false);
                    }
                }
            }
        }

タグ

application, false, foreach, gt, headers, implode, isset, jlp, json_decode, json_encode, keys, PARAM, phrases, quot, quot;User-Agent, response, result, Text, true, VERIFYHOST,

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

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のキャッシュは強力なので、クロスブラウザーテストするのをお勧めします。

タグ

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, 一苦労, 挙動,

全国各地の漁港データを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, お話, コード, こちら, コピペ, これだけ, ツイート, データ, ファイル, 中身, 仕様, 全国, 分割, 加工, 参照, 各地, 名前, 問題, 国土交通省, 天気, 対応, 座標, 座標軸, 必要, 感じ, , 昨日, 構造, 漁港, 空間, 細工, 自分, 記事, 追加,

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, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, , 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,

htmlとcssとphp-初学非同期処理とおまけ-No.3

2022.11.14

Logging

おはようございます。月曜日の朝ですね‥お仕事探しは続いています。

さて、非同期処理とは何かと問われると詰まりますが・・・。いつ結果を返してくれない処理といえば良いのでしょうか。じゃ同期処理はといえば仕事が終わるまで次の仕事を進めない事といえば良いのかな🤔、教えるのが下手なのでぐぐってみてください。

document.querySelector(".btn").addEventListener("click", () => {
    let p = [document.querySelector("[name='name']").value, document.querySelector("[name='text']").value];
    [...document.querySelectorAll(".put")].forEach((elm, index) => {
        elm.innerText = p[index];
    });
    document.querySelector("#box2").style.display = "none";
    document.querySelector("#data").insertAdjacentHTML("beforeend", `<button class="btn2" type="button">非同期送信</button>`);
    document.querySelector(".btn2").addEventListener("click", async () => {
        //submit code
        let url = "./submit.php";
        let data = (() => {
            return ([...document.querySelectorAll(".put")].map((elm, index) => {
                return "test" + index + "=" + elm.innerText;
            })).join("&");
        })();
        const options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                "Content-Length": data.length,
                'Accept': 'application/json'
            },
            body: data //JSON.stringify(data)
        };
        await fetch(url, options).then(response =>
            response.json()
        ).then(resultdata => {
            document.getElementById("view").insertAdjacentHTML("beforeend", resultdata.test0 + "," + resultdata.test1);
        }).catch(error => {
            console.log(error);
        });
    });
});


function imgchg(imagename){
    document.body.setAttribute("style","background-image: url(./assets/images/" + imagename + ".jpg");
}

ぐぐると自分言っていた意味がなんとなく分かるかと思います。ちなみに非同期動画(youtube)のおまけとして、背景画像を変える処理のソースコードを書いています。プログラムコードとしては3行ですが、初学者の方はこの3行のソースコードの方が面白いのかもしれません。自分が書いたソースコードを所々、変更して動かしてみてください。そうすることで、徐々にコードの意味が理解してくると思います。

追伸:サンプルサイトの動画は少しお休みします()?

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

タグ

, 39, addEventListener, btn, click, css, document, gt, html, let, name, no, php, querySelector, querySelectorAl, quot, Text, value, いつ, おまけ, お仕事, , 仕事, , 処理, 初学, 同期, 月曜日, , , 結果,