🏠️Top Page

🖊️おもしろき こともなき世をおもしろく 住みなすものは 心なりけり.

⏩️404画像をそのまま残しておくとSEOに影響があるのでどうするか？#php

おはようございます.404画像をそのまま残しておくとSEOに影響があるのでどうするか？php の場合、下記のコードで404ページに飛んでいるかどうかの確認は出来る.でも毎回、確認しているとページを表示している時に遅延が発生してとても良い処理とは言えないなのでDBに画像あるなしが確認できるテーブルを作ります.

<?php
class HttpCodeChecker
{

    public function getHttpStatusCode(string $url): int|false
    {
        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_NOBODY, true);
        curl_exec($ch);

        if (curl_errno($ch)) {
            curl_close($ch);
            return false; // エラーがあった場合
        }

        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        curl_close($ch);

        return $httpCode;
    }
}

画像のステータス確認できるコードで定期的にページをクロールしてステータスをテーブルに保存（更新）することにより404画像によってSEOに影響を与えない作りになります.

他にも方法はあるけど、レンタルサーバーではこの方法がベストプラクティスな解なのかもしれない.クロールするのが出来ない場合は一度、画像URLをJsonデータで出力してフロントエンド側で画像有無を判断し存在するものだけを表示するという案もあるのだけども、今のSEO的にはあまりオススメはしない.

明日へ続く

⏩️Reactでパスワード生成にバグがあって数値、記号が確実に入らなかったので.

おはようございます.Reactでパスワード生成にバグがあって数値、記号が確実に入らなかったのでその修正を先日行いました.そういやそうだなってソースコードを見返して思った次第です...

修正したコードはこちらになります.その話とは別にVScodeにもAI補助が付いてから自分も生成AIと言う物を個人開発するときに使用するようになっただけど...

import RingLoader from "react-spinners/RingLoader";
import { useState } from "react";
import "./App.css";

function PasswordTmp() {
  const [passwordLength, setPasswordLength] = useState(8);
  const [password, setPassword] = useState("");
  const [includeSymbols, setIncludeSymbols] = useState(false);
  const [includeNumbers, setIncludeNumbers] = useState(false);

  function makePassword(passwordLength, includeSymbols, includeNumbers) {
    const lowercase = "abcdefghijklmnopqrstuvwxyz";
    const uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    const numbers = "0123456789";
    const symbols = "!@#$%^&*()_+[]{}|;:,.<>?";
    let characters = lowercase + uppercase; // 文字のセットを初期化
    if (includeNumbers) {
      characters += numbers; // 数字を追加
    }
    if (includeSymbols) {
      characters += symbols; // 記号を追加
    }
    let result = remakePassword(characters,includeNumbers,includeSymbols);
    setPassword(result);
  }

  function remakePassword(characters,includeNumbers,includeSymbols){
    let passwords = "";
    let NumbersChecking = true;
    let SymbolsChecking = true;
    for (let i = 0; i < passwordLength; i++) {
      const randomIndex = Math.floor(Math.random() * characters.length);
      passwords += characters[randomIndex]; // ランダムな文字を選択
    }
    if (includeNumbers) {
      NumbersChecking = passwords.match(/[0-9]/g) ? true : false;
    }
    if (includeSymbols) {
      SymbolsChecking = passwords.match(/[\!@#\$%\^&\*\(\)_\+\[\]\{\}\|;:\,\.<>\?]/g) ? true :false;
    }
    return NumbersChecking && SymbolsChecking?passwords:remakePassword(characters,includeNumbers,includeSymbols);
  }


  return (
    <>
      <div>
        <h1>パスワード生成</h1>
        <p>
          <input
            type="number"
            value={passwordLength}
            placeholder="パスワードの長さ"
            max={99}
            min={3}
            onChange={(e) => setPasswordLength(e.target.value)}
          />
        </p>
        <p>
          <input id={'Symbols'}
            type="checkbox"
            value={1}
            checked={includeSymbols}
            onChange={(e) => setIncludeSymbols(e.target.checked)}
          />
          <label for={'Symbols'}>記号を含める</label>
        </p>
        <p>
          <input id={'Numbers'}
            type="checkbox"
            value={1}
            checked={includeNumbers}
            onChange={(e) => setIncludeNumbers(e.target.checked)}
          />
          <label for={'Numbers'}>数字を含める</label>
        </p>
        <button
          className="btn"
          onClick={() =>
            makePassword(passwordLength, includeSymbols, includeNumbers)
          }
        >
          パスワードを生成
        </button>
        <button
          className="btn"
          onClick={() => navigator.clipboard.writeText(password)}
        >
          パスワードをコピー
        </button>
        <p>生成されたパスワード: {password}</p>
        <p>パスワードの長さ: {passwordLength}</p>
        <p>記号を含める: {includeSymbols ? "はい" : "いいえ"}</p>
        <p>数字を含める: {includeNumbers ? "はい" : "いいえ"}</p>
      </div>
    </>
  );
}

export default PasswordTmp;

この頃、補完機能がとても「うざったく」思う時と「ありがとう」と思うときが存在していてなんとも言えない.特にウザって思うときは自分が望んでいないコードが出てきた時は正直困る.コードを直打ちしないといけないので今までの補完機能がやはり良いなと思います.

自分としては生成AIの補完機能をOFFに出来る機能がほしいところ、それがあればとてもコードを書くのは快適ですねー.あるのかなぁー🤔調べてみます.

明日へ続く

⏩️右にしようか左にしようか、はたまた上にしようか.GW一人小旅

おはようございます.右にしようか左にしようか、はたまた上にしようか悩んでいる話を書いていきます.ゴールデンウィークが近づいてきましたので小旅でもしようかなと考えています.

まず、このブログでは恒例となったTシャツアート展に行く案、とくに気を使う必要もないのとどんな所か分かっているので行くには問題ないものの刺激が少ない.

次に土佐久礼にカツオを食べに行くという案、どうもそこに行くと元専門学校の教師に会えるかもというなんとも言えないオプションが付いてくる土佐久礼の案.こちらはそれなりに刺激もありそうですが気を使いそうな予感があり、尚且つ客引きにメンタル使いそうなので疲れそうな気がしています.

最後に直島や男島などに行くという案、これは県外なのだけども一度、一人旅で行ったことがあるちょっとした旅.今からでもそんなに混みそうではないのだけども電車で行くとなるとまぁまぁ旅費がかかる案.

番外編として旅には行かずGWはボケーっと天を仰いで過ごすという案があります.

さて、今年のGWはどうしようか迷っている🤔

明日へ続く

⏩️Reactの簡単なものなら今でも作れるのだけども.#簡単止まり.

おはようございます.Reactの簡単なものなら今でも作れるのだけども簡単止まりなところを1UPしたいなと思っています.Xにもポストしたんだけどパスワード生成出来るものをReactで作ったのでソースコードを公開しますね.

Reactは基本そのままだとさくらレンタルサーバーなどでは動かないだけど、viteというモノを使用してビルドするとJavascriptに変換されたソースコードが出力されるので、それをレンタルサーバーにファイルアップロードする事によりレンタルサーバーでも動くようになります.

Reactにviteというモノを導入するに当たってDockerにUbuntuかcentOSなどを構築してその中にNodeJsとApache2を入れて自分はビルドしたモノを確認しています.

普通はNodeJsでサーバー立ててそちらで確認するのが普通なんだと思うのだけど、それだとレンタルサーバーで動いているかどうかが分からないので自分はビルド後のdistフォルダを中をApacheと紐づけて確認している形です.

トイウコトデ、ソースコードとサイトのリンクを貼っときます.

import RingLoader from "react-spinners/RingLoader";
import { useState } from "react";
import "./App.css";

function PasswordTmp() {
  const [passwordLength, setPasswordLength] = useState(8);
  const [password, setPassword] = useState("");
  const [includeSymbols, setIncludeSymbols] = useState(false);
  const [includeNumbers, setIncludeNumbers] = useState(false);

  function makePassword(passwordLength, includeSymbols, includeNumbers) {
    const lowercase = "abcdefghijklmnopqrstuvwxyz";
    const uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    const numbers = "0123456789";
    const symbols = "!@#$%^&*()_+[]{}|;:,.<>?";
    let characters = lowercase + uppercase; // 文字のセットを初期化
    if (includeNumbers) {
      characters += numbers; // 数字を追加
    }
    if (includeSymbols) {
      characters += symbols; // 記号を追加
    }
    let passwords = "";
    for (let i = 0; i < passwordLength; i++) {
      const randomIndex = Math.floor(Math.random() * characters.length);
      passwords += characters[randomIndex]; // ランダムな文字を選択
    }
    setPassword(passwords); // パスワードを更新
  }

  return (
    <>
      <div>
        <h1>パスワード生成</h1>
        <p>
          <input
            type="number"
            value={passwordLength}
            placeholder="パスワードの長さ"
            max={99}
            min={3}
            onChange={(e) => setPasswordLength(e.target.value)}
          />
        </p>
        <p>
          <input id={'Symbols'}
            type="checkbox"
            value={1}
            checked={includeSymbols}
            onChange={(e) => setIncludeSymbols(e.target.checked)}
          />
          <label for={'Symbols'}>記号を含める</label>
        </p>
        <p>
          <input id={'Numbers'}
            type="checkbox"
            value={1}
            checked={includeNumbers}
            onChange={(e) => setIncludeNumbers(e.target.checked)}
          />
          <label for={'Numbers'}>数字を含める</label>
        </p>
        <button
          className="btn"
          onClick={() =>
            makePassword(passwordLength, includeSymbols, includeNumbers)
          }
        >
          パスワードを生成
        </button>
        <button
          className="btn"
          onClick={() => navigator.clipboard.writeText(password)}
        >
          パスワードをコピー
        </button>
        <p>生成されたパスワード: {password}</p>
        <p>パスワードの長さ: {passwordLength}</p>
        <p>記号を含める: {includeSymbols ? "はい" : "いいえ"}</p>
        <p>数字を含める: {includeNumbers ? "はい" : "いいえ"}</p>
      </div>
    </>
  );
}

export default PasswordTmp;

https://zxz.sakura.ne.jp

明日へ続く

⏩️動画を見て時代だなって思った瞬間.自分、時代って言葉を使いすぎw.

おはようございます.以前、少し書いたのですが教育の場ではデジタル機器を使用してきていますよね.もうこんな田舎でもノートパソコンやタブレットを小学校から使用しています.そんな子供達が大人になったとき、社会はどう変わるのだろうかとこの頃おもうことがあります.

あと20年後といえば自分は仕事を退職して年金暮らしているような年代になるのかと思うですが、その想像が全くというほど想像できない.20年になるまえに恐らく南海トラフ巨大地震も起きていて大きく日本も変わった社会になっているのではないだろうかと思っています.

多分だけど自分はあと20年後も働いているような気がします.その頃にはプログラマーという職ではなくAIの書いたコードを手直しする職として働いている可能性が高いですね.

10年後は何となく今の延長線上にある気がするのだけど、20年後は今の延長線上では予測できない社会になっていそうです.

100年時代と言われている今日（こんにち）ですが、自分たちが老人と言われる時代は老化を止められる時代にもなってくるのだというのが自分の見解です.もしかするとブレイクスルーが起こり老化を止めるどころか、細胞を若返ることが出来るかも知れない.

そういう時代を目にすることが出来ると思うとワクワクしかないですね.

明日へ続く

⏩️感覚的に伸びると思うひとは伸びてきたので多分.感覚を大事にしよう.

おはようございます.人材発掘にもAIを使用する時代になってきたけど感覚的にこの人は伸びそうだというのは未だに人間のほうが勝っていそうだと思います.AIに感情が生まれればそういうのも分かるようになるかもですが、まだまだ先の話だと思っています.

まず先日ポストした171はもうすでに伸びているだけども、今の段階でメジャーで活躍出来そうなレベルだと思います.このままインディーでは勿体ないなって言う感覚もあるだろうしコアな推しファンはメジャーで活躍してほしいという気持ちを持っている人はいると思います.自分はたまたま聞いてこれは伸びそうだと思いました.

次にkatawareの春よはとても良いリズム感であるなって思います.こういうのは当にセンスなんだと思う、また歌詞（詩）も良いですね.

最後にカイシューマッハーさん、YOUTUBEのおすすめでポッチとクリックした瞬間、この人のピアノ演奏は素晴らしいと思いました.やっぱ一流は素晴らしいなって只々思った瞬間でした.こういうのはロボットやAIにはまだまだ到達出来ない領域だと思います.

素人でも凄い人はいるけれどもやっぱ一流と言われる人とは差があると思います.こういうのをYOUTUBEで見つけれて世界に触れられるというのは、とても良い時代だなって思います.

明日へ続く

⏩️大阪・関西万博へ行こうかどうしようか迷っている.一人旅.

おはようございます.大阪・関西万博へ行こうかどうしようか迷っている話を書いていきます.行くとなると行ってくれるお友もいそうにない感じなので一人旅になりそうな気がしています.気持ち的には行きたい気持ちが強いだけども、ソロでこういう所を行くのはちょっとメンタル的に辛いものもあるので万博のチケットを購入するのに勇気が必要なもやしメンタルになってます.

ソロで行くと行列で待つ時のなんとも言えない感覚があまり耐えれないですよね.でも行きたいという気持ちが強いのも確か.なぜ、行きたいかと言えば多分一生に一度のイベントみたいなものだから勿体なという気持ちが強いのと、見たい物があるので行く価値は自分にとってあるということ.

行くとしたら夏頃になりそうです、ゴールデンウィークは間違いなく混みそうなので普通の休日か平日休みの日に行こうと思っています.

東京大学理学新卒引篭のたむらかえさんのようなメンタルがあれば良いのですけど、未だにそういう所はメンタルあまり強くないですよね（笑）.

トイウコトデ、今の段階で万博へ行くのかどうかは分からないけど気持ちは行きたいという話でした.

明日へ続く

⏩️CSSだけで3Dボックス（箱）が作れるようにいつの間にかなっていた.自動回転！？

おはようございます.CSSだけで3Dボックス（箱）が作れるようにいつの間にかなっていた話を書いていきます.生成AIにCSSだけで3Dボックス（箱）を作ってと指示を行ったら自動回転してくれるものを出力してくれて驚愕している.

CSSだけで3Dボックスが作れることは知っていたのだけど、自動回転はJSを使用しないと無理だろうと思っていたので、実際生成AIが出力されたのを見て驚きでした.こんな感じで旧の知識を生成AIはアップデートしてくれるのには、凄く良いと思っています.

ただ、質問して実際動かないものも出力されるので要は使う側もそれなりに知識を持っていないと嘘を信じてしまうことにもなるので、生成AIを使う側も最低限の知識は必要になると思っています.

因みにソースコードは下記になります.これをテキストファイルに保存して拡張子をhtmlに変えた後に、そのファイルをブラウザにドロップすると表示されます.

明日へ続く

デモページ：https://zip358.com/tool/demo96/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>3D Box</title>
  <style>
    body {
      margin: 0;
      background: #111;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1000px;
    }

    .scene {
      width: 200px;
      height: 200px;
      position: relative;
      transform-style: preserve-3d;
      animation: rotate 10s infinite linear;
    }

    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(0, 150, 255, 0.7);
      border: 2px solid #fff;
    }

    .front  { transform: translateZ(100px); }
    .back   { transform: rotateY(180deg) translateZ(100px); }
    .right  { transform: rotateY(90deg) translateZ(100px); }
    .left   { transform: rotateY(-90deg) translateZ(100px); }
    .top    { transform: rotateX(90deg) translateZ(100px); }
    .bottom { transform: rotateX(-90deg) translateZ(100px); }

    @keyframes rotate {
      from { transform: rotateX(0deg) rotateY(0deg); }
      to   { transform: rotateX(360deg) rotateY(360deg); }
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
</body>
</html>

⏩️独り語り出来るのかも知れない自分.出来るかも出来るかも.

おはようございます.YOUTUBEで独り語り出来るのかも知れないと自信もないのに唐突に思ったのでその話を書いていきます.

出来るかも出来るかもと思いながらかなり撮り直しが人よりも必要な気がしています.まず、上がり性なのでライブは無理だけども声だけだったら独り語り出来るのかも（以前頓挫したのですがまた再加熱気味です）.

毎日、記事を書いているような事を声に起こすような感じで喋れば独り語り出来るのかもと、いま思っていますが、本当にそうするかはまだ決まっていません.YOUTUBEで動画配信しているひとは一発撮りしているのかな、それともSAGIRIXさんのように台本を作ってやっているのかな.

恐らく後者のほうがチャンネル登録数は増えそうな気がしています.

YOUTUBEで生計を立てようとか考えているわけではないのだけど、自分としては記事で読むのと違った熱量を伝えれるようになるのではないかなと思っています.

記事にはあまり感情というのは乗らないような気がしています.そういう事もあり音声ボイスを使用しているのですね.

そして少しでも毎月の収入が増える取り組みを行いたいなって思っています...単発副業やれば良いじゃないと思う方もいるかもですが、一つの案件に何人も応募があり案件を取るのは結構難しくなっています.

前以上に案件を取るのが難しい.そういう理由もあり少しでも収益化が出来ているものに対して油を注いでいこうかなと思っている訳です.

因みにお金のために記事を毎日投稿しているわけでもないですよ.ただ単に好きで毎日投稿しているわけです.好きなことで収益化が出来ればこの上ない幸せと思っています（10年選手ですが未だに花咲かないなぁ花がない植物なのかも（笑））が、それが難しいのも重々承知のうえです.

明日へ続く

⏩️高額スマホなので頑張らなくて綺麗に撮れるけど、高いなぁ（笑？

おはようございます.先日、iphone16のPro高額スマホを購入しました.関税問題がなかったら買わなかったようなスマホです.なぜ、高いスマホを購入するかといえばそちらの方が最終的に長持ちするからです.昔は毎年のようにiphoneを買い替えていましたがある時から、スマホの進化を感じなくなり買い替えを辞めて今回8年ぐらい使っていたiphone XproMaxから買い替えた感じです.

結果、生成AIが動くiphone16にしたのだけど、本当だったらiphone17か18にしたかったというのが本音です、理由はiphone16は生成AIを搭載された最初の端末なので、これから生成AIが進化していく中で新しい生成AIはそのうち乗らなくなると思っているので.

でも生成AIが進化する事によって逆に最小の性能でも動くようになるのかも知れないという淡い期待も持ってもいます.

https://youtube.com/shorts/y-x-mRmtojs

因みに、動画、写真はこのiphone16Proにしてとても綺麗に撮れるようになりました.頑張らなくても鮮明に撮れるのが良いですね.特にズームでも綺麗に撮れているのが高評価ですが、生成AIは今のところ使用していません.チャットGPTのアプリは入れているのでそれで今のところ十分な気がしています.

明日へ続く