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

2025.04.20

Logging

おはようございます.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

明日へ続く

著者名  @taoka_toshiaki

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

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

投稿日時 2025年04月20 06:00日

タグ

コピー, さくらレンタルサーバー, セット, ソースコード, トイウコトデ, ところ, パスワード, パスワード生成, ビルド後, フォルダ, ランダム, レンタルサーバー, 初期化, 形, 数字, 文字, 普通, 生成, 紐, 記号,

Photo by Brett Sayles on Pexels.com

たぶんだけど人型ロボットとは別のロボットがブルーカラーの仕事を奪う.

2024.12.10

Logging

おはようございます．たぶんだけど人型ロボットとは別のロボットがブルーカラーの仕事を奪う.いまの技術で倉庫内作業や工場内の作業をロボットで全自動化出来る.

いまの倉庫内や工場内は人が働く環境に合わせた働けるように設計されたものです.わざわざそれを人型ロボットを導入して自動化しようと思うのは大企業ぐらいのものかも.

MagicBot at Work: Multi-Robot Collaboration in Action

これから倉庫内作業や工場内作業を自動化しようと思っているスタートアップは全自動化に力を入れたほうが賢明なのかもしれない.たぶん今の既存の技術をしようすればそれが出来てしまう.

ブルーカラーもホワイトカラー同様に数十年後には仕事が奪われると自分は思っている.ホワイトカラーの仕事が奪われた人材がブルーカラーの仕事を奪いブルーカラーは新たな仕事を探さなくてはならなくなるという図式が数年後に起こりそうな気がする.

物流倉庫の仕分け作業　国内初の“全自動化”へ　人手不足に対応(2023年12月8日)

今までと違うのは新たな仕事が生まれそうにない所だ、ロボットが壊れてもロボットがロボットを修理するようになると思っていて最終的には人は仕事をしなくても良くなるじゃないかな.

仕事とお金は結びついているし社会経済も紐付いている.上手くシフトしないと社会が崩壊しかねないと思っていて国はなかなか難しい舵取りを迫られる気がする.

過去に馬鹿みたいに言っていたことが徐々に現実的になってきている今日此の頃.シンギュラリティという本に書かれた人2.0はあり得る話なのかもしれない.

明日へ続く

著者名  @taoka_toshiaki

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

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

投稿日時 2024年12月10 06:00日

タグ

シンギュラリティ, ブルーカラー, ホワイトカラー, ロボット, わざわざそれ, 人型ロボット, 人材, 作業, 倉庫内, 倉庫内作業, 図式, 工場内作業, 技術, 既存, 本, 社会, 社会経済, 紐, 舵取り, 過去,

Photo by Magda Ehlers on Pexels.com

英語を勉強すると決めた日。何回目なんだろうか？

2023.02.07

Logging

おはようございます、英語を勉強すると決めた日。何回目なんだろうか？

英語は全然ダメな自分です、単語を覚えていたら読みはできるので、まずはカタカナで英語を覚えようと思っています。読みと意味を紐づけて覚えるという事で単語の正確性は二の次に覚えるのが、自分は手っ取り早いかなって思っています。

やっぱり英語は重要だと思います。なので、勉強をしようと思います、、、何としても記憶に定着させたい。NHKでバズった海外に出稼ぎに行くために英語を覚えようと思っているわけではありません。仕事としてこの業界で生きていくにはやはり英語は重要です。

著者名  @taoka_toshiaki

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

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

投稿日時 2023年02月07 06:00日

タグ

NHK, カタカナ, バズ, 二の次, 仕事, 何回目, 出稼ぎ, 勉強, 単語, 意味, 業界, 正確性, 海外, 紐, 自分, 英語, 記憶,

さくらサーバと別会社のサーバを使う場合。

2020.10.21

Logging

さくらサーバでメインドメインを使って、サブドメインを別サーバと紐付けて使用する場合は、ネームサーバで設定せずにAレコードで設定するに限る。この話はドメインをお名前.comなどのドメイン販売をメインで取り扱っている会社の話になると思います。レンタルサーバーでドメイン取得してサブドメインを別サーバで使用する場合もおなじですが、WEBの制作会社などは大体、ドメインをメインとして発売されている会社で取得して、サーバは別会社で取り扱っていることがセオリーなのかなぁ・・・。

何故ってサーバを別会社に移行する場合、サーバとドメインを同じところで取得しているとサーバ移行時に、無駄なお金が発生するからです。ドメインを移管しようものなら、高額なドメイン移管代を支払うハメになったり、サーバ移行したけどドメインはサーバのまま保持しないといけなくなったりして、新サーバ代と旧サーバ代の両方を毎月支払うハメになったりとサーバを移行するのに無駄なお金が発生するので、ドメインとサーバは別々にしていることが多いです。

話を戻して別会社のサーバを扱いたい場合はAレコードで設定してvalueにそれぞれのサーバのIP情報を入力すると良いです。さくらサーバのサーバIP情報はコントロールパネルのサーバ情報に記載されています。その情報をAレコードに入力してあげれば良いです?

著者名  @taoka_toshiaki

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

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

投稿日時 2020年10月21 03:40日

タグ

com, web, お金, こと, サーバ, サーバー, さくら, サブ, セオリー, ところ, ドメイン, ネーム, はめ, まま, メイン, もの, レコード, レンタル, 両方, 会社, 何故, 使用, 保持, 別会社, 制作, 取得, 名前, 場合, 大体, 無駄, 発売, 発生, 移管, 移行, 紐, 設定, 話, 販売, 高額,

jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。

2020.03.10

Logging

jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。記述は下記になります。ぐぐると出てくるので知っている人の方が多いかもしれませんが…。ちなみに自分はこの記述方法、ごくまれにしか使わないため、忘れてしまいます。event.dataに紐づけてくれるのはとても良いかなと自分は思っていますが、皆さんはいかがでしょうか？もうjqueryなんか使わないよという方もいると思うのですが、自分が思うにゴリゴリ書くよりか、jqueryで済ませれるところは使ったほうがコードは短くて済むと思っています。WEB業界は技術の移り変わりが早いですよね。逆にソフトのほうはWEBよりはスパンが長い気がします。

https://zip358.com/tool/demo9/

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="common.js"></script>
    <title>Document</title>
</head>
<body>
    <p id="pen">お腹空いた(´；ω；｀)お腹空いたと＞φ(..)</p>
</body>
</html>
$(function(){
    $("#pen").click({sword:"The pen is mightier than the sword"},function(e){
        $(this).text(e.data.sword);
    });
    // $("#pen").on("click",{sword:"The pen is mightier than the sword"},function(e){
    //     $(this).text(e.data.sword);
    // });
});

著者名  @taoka_toshiaki

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

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

投稿日時 2020年03月10 05:20日

タグ

charset, data, DOCTYPE, EVENT, gt, head, html, ja, jquery, lang, lt, meta, quot, web, いかが, イベント, かな, コード, スパン, ソフト, ため, ところ, 下記, 人, 処理, 引数, 技術, 方, 方法, 業界, 気, 皆さん, 紐, 自分, 記述, 逆,