2025 | zip358.com【無名箱】

小中大

■ ■ ■ ■ ■ ■ ■

Home > 2025年

生成AIでポートフォリオサイトを作ってでどれぐらい物（単純な指示で）が生成されるのか？

2025年01月09日

おはようございます.生成AIでポートフォリオサイトを作ってでどれぐらい物（単純な指示で）が生成されるのか？を試してみた結果、ダークモードにも対応出来ていたけどもやっぱ微妙かなと思いました.確かにまずまずの物は作れるようになっているけど、凝ったものを作るのは知識が必要になる.

生成AIでポートフォリオサイトを作ってでどれぐらい物（単純な指示で）が生成されるのか？

ひろゆき氏の切り抜きの動画をたまたま見たけど、ひろゆき氏の生成AIに対しての考え方は今のところ間違っていない感じがします.生成AIは平均的なものが生成されます、そして生成AIで生成されたコードを直せない人は生成AIを使えない.それはソースコードも絵や音楽でも同じでそれなりものは出来るけど、その調整を出来るのはそれを専門にしている人だけです.

そして生成AIが作ったものが正しいものなのかが判断する人がいないと難しい.生成AIの提供会社が100％保証してくれるわけでもなく、生成AIで生成されるものは間違いがあることを認めている現状ではやはり普及はしないし専門家の仕事は奪われないというのがひろゆき氏の見解です.AGI（汎用人工知能）やASI（人工超知能）というのは幻想かもしれない.

シンギュラリティは当分来ない、早くても10年、20年後になるじゃないだろうかと.

ただAIはこれからも徐々に進化していくとは思っています.それに伴って医療などの進展は今まで以上に加速すると思っています.そういう訳でエヌビディアの株も今年が天井なのかもしれません.

最後に今回、生成AIが生成したhtmlファイルを添付致します.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }
    .hero {
      background: url('https://picsum.photos/1200/600') no-repeat center center/cover;
      height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }
    .project img {
      border-radius: 8px;
    }
    footer {
      background: #343a40;
      color: white;
      padding: 1.5rem 0;
      text-align: center;
    }
    .dark-mode {
      background-color: #121212;
      color: #e0e0e0;
    }
    .dark-mode .hero {
      text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7);
    }
    .dark-mode footer {
      background: #1f1f1f;
    }
  </style>
</head>
<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">My Portfolio</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
            <li class="nav-item">
              <button class="btn btn-outline-light ms-3" id="darkModeToggle">Toggle Dark Mode</button>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <section class="hero text-center">
    <div>
      <h1>Welcome to My Portfolio</h1>
      <p>Showcasing my work and projects</p>
    </div>
  </section>

  <section id="about" class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <img src="https://picsum.photos/500/400" alt="About Me" class="img-fluid rounded">
        </div>
        <div class="col-md-6">
          <h2>About Me</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquam magna in odio malesuada, vitae vulputate libero sodales. Nulla facilisi.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="projects" class="py-5 bg-light">
    <div class="container">
      <h2 class="text-center mb-4">Projects</h2>
      <div class="row">
        <div class="col-md-4 project mb-4">
          <img src="https://picsum.photos/400/300" alt="Project 1" class="img-fluid">
          <h4 class="mt-2">Project 1</h4>
          <p>Short description of the project goes here.</p>
        </div>
        <div class="col-md-4 project mb-4">
          <img src="https://picsum.photos/400/300" alt="Project 2" class="img-fluid">
          <h4 class="mt-2">Project 2</h4>
          <p>Short description of the project goes here.</p>
        </div>
        <div class="col-md-4 project mb-4">
          <img src="https://picsum.photos/400/300" alt="Project 3" class="img-fluid">
          <h4 class="mt-2">Project 3</h4>
          <p>Short description of the project goes here.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="contact" class="py-5">
    <div class="container">
      <h2 class="text-center mb-4">Contact Me</h2>
      <form>
        <div class="mb-3">
          <label for="name" class="form-label">Name</label>
          <input type="text" class="form-control" id="name" placeholder="Your Name">
        </div>
        <div class="mb-3">
          <label for="email" class="form-label">Email</label>
          <input type="email" class="form-control" id="email" placeholder="Your Email">
        </div>
        <div class="mb-3">
          <label for="message" class="form-label">Message</label>
          <textarea class="form-control" id="message" rows="4" placeholder="Your Message"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Send Message</button>
      </form>
    </div>
  </section>

  <footer>
    <p>© 2025 My Portfolio. All Rights Reserved.</p>
  </footer>

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const darkModeToggle = document.getElementById('darkModeToggle');
    darkModeToggle.addEventListener('click', () => {
      document.body.classList.toggle('dark-mode');
    });
  </script>
</body>
</html>

明日へ続く

著者名 @taoka_toshiaki

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

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

OFUSEで応援を送る

投稿日時 2025年01月09 06:00日

タグ

エヌビディア, シンギュラリティ, ソースコード, それなりもの, ダークモード, ひろゆき氏, ポートフォリオサイト, 人工超知能, 天井, 幻想, 指示, 普及, 最後, 株, 汎用人工知能, 現状, 生成, 見解, 進展, 難しい生成,

Home > 2025年

グーグルカレンダーの予定を一部表示させたい時のPHPコード.

2025年01月08日

Logging

おはようございます.グーグルカレンダーの予定を一部表示させたい時のPHPコードは下記になります、参考にしたサイトはこちらですが参考にしただけでコードは違うものになります.APIを毎日叩いていると課金しなくてはならないかもなのでデータベースに保存する形にしました.これも良い方法かと言えばどうだろうと言う思いもあります.

<?php
ini_set('display_errors', 0);
require_once './vendor/autoload.php';
require_once './config.php';

use Carbon\Carbon;
use Google\Client;
use Google\Service\Calendar;
use Illuminate\Database\Capsule\Manager as DB;

class openSchedule
{
    public $DB = null;
    public function __construct()
    {
        $database = new DB();
        $database->addConnection([
            'driver' => 'mysql',
            'host' => DB_HOST,
            'port' => PORT,
            'database' => DB_DATABASENAME,
            'username' =>  DB_USER,
            'password' => DB_PASSWORD,
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_general_ci',
        ]);

        $database->setAsGlobal();
        $database->bootEloquent();
        $this->DB = $database;
    }

    public function saveSchedule($dateTimeString):void
    {
        //$this->DB::table('schedules')->delete();
        try {
            $client = new Client();
            $client->useApplicationDefaultCredentials();
            $client->addScope(Calendar::CALENDAR_READONLY);
            $client->setAuthConfig(JSONPATH);
            $service = new Calendar($client);
           // カレンダーID
            $calendarId = GOOGLECALENDARID;

            // 取得時の詳細設定
            $optParams = [
                'maxResults' => 10,
                'orderBy' => 'startTime',
                'singleEvents' => TRUE,
                'timeMin' => (new \DateTime($dateTimeString))->format(DATE_RFC3339),
                'timeZone' => 'Asia/Tokyo',
            ];
            $results = $service->events->listEvents($calendarId, $optParams);
            if (empty($results->getItems())) {
                echo "イベントが見つかりませんでした。";
            } else {
                foreach ($results->getItems() as $event) {
                    $this->DB::table('schedules')->insert([
                        'start' => Carbon::parse($event->getStart()->dateTime)->format('Y-m-d H:i:s'),
                        'end' => Carbon::parse($event->getEnd()->dateTime)->format('Y-m-d H:i:s'),
                        'title' => $event->getSummary(),
                        'detail'=>$event->getDescription()
                    ]);
                }
            }

        } catch (Google\Service\Exception $e) {
            echo 'Google Service Exception: ' . $e->getMessage();
        } catch (Exception $e) {
            echo 'General Exception: ' . $e->getMessage();
        }
    }

    public function getWeekDays($dateTimeString):string
    {
        // Carbonインスタンスに変換してフォーマット
        $carbon = Carbon::parse($dateTimeString);

        // 日本語の曜日名配列
        $japaneseWeekdays = ['日', '月', '火', '水', '木', '金', '土'];

        // 曜日の数値を取得し、日本語の曜日名に変換
        $weekdayNum = $carbon->dayOfWeek;
        $japaneseWeekday = $japaneseWeekdays[$weekdayNum];
        return $japaneseWeekday;
    }

    public function getSchedule($dateTimeString):string
    {   
        $str = '';
        $events = $this->DB::table('schedules')->select(['*'])->where('start','>=',$dateTimeString)->limit(1)->get();
        foreach($events as $event){
            
            $str.= sprintf("%s <br>",$event->title);
            $str.= sprintf("%s %s曜日 <br>",Carbon::parse($event->start)->format('Y年m月d日 H時i分'),$this->getWeekDays($event->start));
            $str.= sprintf("%s<br>",Carbon::parse($event->end)->format('Y年m月d日 H時i分'));
        }
        return $str;
    }

    public function getLastDate():string|null
    {
        $lastRecord = $this->DB::table('schedules')
                   ->orderBy('id', 'desc')
                   ->first();
        return $lastRecord?$lastRecord->start:null;
    }
}

//print (new openSchedule)->getSchedule((new \DateTime())->format('Y-m-d 00:00:00'));

if(isset($argv) && $argv[0]){
    $openSchedule = new openSchedule();
    $dateTimeString = $openSchedule->getLastDate();
    if($dateTimeString){
        $date = new DateTime($dateTimeString);
        $date->modify('+1 day');
        $openSchedule->saveSchedule($date->format('Y-m-d 00:00:00'));
    }else{
        $openSchedule->saveSchedule((new \DateTime())->format('Y-m-d H:i:s'));
    }   
}

因みに近日中にブログに仕事の予定などを記載するようにします.近日中なのでいつになるかは未定です.

そうそうCalendarIDという物がグーグルデベロッパサイトにあると思い込んでいて馬鹿な事をしていました.皆さんは間違わないように（笑）.CalendarIDはグーグルカレンダーの設定の中にあります.

明日へ続く

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2025年01月08 06:00日

タグ

```, インスタンス, カレンダー, グーグルカレンダー, グーグルデベロッパサイト, コード, データベース, フォーマット, 参考, 変換, 年月日, 数値, 時分, 曜日, 曜日名, 曜日名配列, 火, 皆さん, 近日中,

Home > 2025年

Radikoに再度課金しました.また解約するかも知れないけれども.

2025年01月07日

Logging

おはようございます.Radikoに再度課金しました.また解約するかも知れないけれども今のところ契約中.去年、仕事をしているときは会議以外はラジコを聞き流して仕事をしていました.無音だといろいろと将来の的なことなどを考えだして集中力がかける時があるのでラジコを聞き流しています.

簡単に言えばある程度の雑音のなかで仕事をするほうが自分は効率的に仕事をこなすことが出来る感じです（ラジコが雑音っていう訳ではないですが…）.無音も悪くないけどね.超集中したいときは無音にします、そして速くプルリクエストしないといけないときは無音にしています.そういう訳でケースバイケースです.

何故、有料にしたのかと言えば地元のラジオでは飽きがきてしまってと言うのもある少しあるのだけど、その他の地方のラジオに興味を持ったのとあと都市のラジオを聞きたいと思ったのが有料に切り替えた理由かな.ラジオの良いところは知らない曲を聞けるとか知らないことを知れるということかなと思います.それもたまたま感がラジオは強い.たまたま聞いていたらというのがまた良い所です.

そういう訳でラジコでお仕事はオススメですよー.

明日へ続く

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2025年01月07 06:00日

タグ

ケースバイケース, なか, プルリクエスト, ラジオ, ラジコ, 会議以外, 再度, 地元, 地方, 将来, 強いたまたま, 曲, 有料, 無音, 程度, 興味, 訳, 都市, 集中力, 雑音,

Home > 2025年

blueskyAPIが処理されなくなったので、対応を行った話.

2025年01月06日

Logging

おはようございます．今日から仕事始めの方も多いはず自分もそんな感じです.さてblueskyAPIが処理されなくなったので対応を行った話を書いていきます.ブルースカイの独自処理が上手く処理されなくなったのでその対応を行っていました.今まで公式に落ちているPHP言語のライブラリーを使用していたんだけど、レンタルサーバーの環境が変わった関係により処理がされなくなったので、自前のAPI処理を他のエンジニアが公開されているコードを参考にしてカード板自動投稿を作りました.

ソースコードは下記になります.

    public function cardPost($text, $imagePath = null, $link = null)
    {
        $imageUri = $imagePath ? $this->uploadImage($imagePath) : null;

        $record = [
            "\$type" => "app.bsky.feed.post",
            "text" => $text,
            "createdAt" => Carbon::now()->format('c'),
        ];

        if ($imageUri && $link) {
            $record['embed'] = [
                "\$type" => "app.bsky.embed.external",
                "external" => [
                    "uri" => $link,
                    "title" => $text,
                    "description" => $text,
                    "thumb" => $imageUri
                ]
            ];
        }

        $ch = curl_init("https://bsky.social/xrpc/com.atproto.repo.createRecord");
        curl_setopt_array($ch, [
            CURLOPT_CONNECTTIMEOUT => 10,
            CURLOPT_SSL_VERIFYPEER => false,
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_POST => true,
            CURLOPT_HTTPHEADER => [
                "Content-Type: application/json",
                "Authorization: Bearer {$this->jwt}",
            ],
            CURLOPT_POSTFIELDS => json_encode([
                "repo" => $this->handle,
                "collection" => "app.bsky.feed.post",
                "record" => $record,
            ]),
        ]);

        $response = curl_exec($ch);
        curl_close($ch);

        return json_decode($response, true);
    }

これでカード型のポストが出来ます.参考にしたサイトはこちらの@ma7ma7pipipiさんのソースコードになります.そのコードにカード型のコードを追加した形になります.

https://qiita.com/ma7ma7pipipi/items/bf7fda65ee71c873c70a

一からコードを書かないで良かったのでとても助かりました.感謝ですね😌、ありがとうございます.

明日へ続く

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2025年01月06 06:00日

タグ

```, エンジニア, カード型, カード板自動投稿, コード, ソースコード, ライブラリー, レンタルサーバー, 下記, 仕事始め, 公式, 処理, 参考, 多いはず自分, 形, 感謝, 環境, 自前, 言語,

Home > 2025年

ブログ通知を付けました.4時間置きに通知が飛びます.#サービスワーカー

2025年01月05日

Logging

おはようございます.去年の暮にブログ通知を付けました.4時間置きに通知が飛びます.ソースコードは以前に書いたコードをベースとして再構築した形になります.平たく言うとLaravelを使用しないでWEB通知を行うものになります.一度作ってしまえば使いましが出来るようにコードを今回は書いたので使いまわそうと考えています.

webpushを導入しました.よろしくですm(_ _)m pic.twitter.com/oYEdFcIHwv
— 田岡寿章(taoka_toshiaki) (@taoka_toshiaki) December 30, 2024

以前、Laravelで作っていたので考え方は苦労せずに出来たのですが…

今まで知らないことが出てきてしまってそこでロスしてしまいました.知らなかったこととはjavascriptのfetchです.使用する機会は結構多めなんだけど知らないことがありました.それはurlのパラムに/exampleと書くか/example/index.phpと書くかでphp言語のグローバル変数$_SERVER[‘REQUEST_METHOD’]の値がPOSTで送っているのにも関わらずGETになるのです.

fetchを書く場合は/example/index.phpと書くことでPOST送信と判断されます.これをデバックもせずに悩んでいました（笑）.デバック大事.

明日へ続く

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2025年01月05 06:00日

タグ

グローバル変数, コード, ソースコード, デバッグ, デバック大事, パラム, ブログ通知, ベース, 一度, 値, 去年, 形, 時間置き, 暮, 機会, 笑, 考え方, 言語, 送信, 通知,

Home > 2025年

地声ベースのAI音声合成モデルを再度構築しました話.たぶん似てる.

2025年01月04日

Logging

おはようございます.地声ベースのAI音声合成モデルを再度構築しました話を書いていきます.まず地声ベースモデルを作る場合.自分の音声を録音しwavなどファイルにします.それが出来ない環境では音声モデルを作ることは難しいです.それが出来たらstyle-bert-vits2をGitHubから落としてきて、ブランチをdevに切り替えておきます.Windowsの場合、app.batを起動します.前提条件としてPythonがインストールされていることとgitがインストールされた環境であることです.

app.batを起動するとターミナルがターミナル立ち上がり次に任意のブラウザが開くことでしょう.ターミナルは閉じずにブラウザ画面のTOPにタブがあるので左から右へタスクをこなしていくと地声ベースの音声合成モデルが生成されます.

こんにちは作った地声です.音声合成ってやつです.ではでは👋 pic.twitter.com/3FnB6BIZ5I
— 田岡寿章(taoka_toshiaki) (@taoka_toshiaki) December 28, 2024

音声合成モデルが生成された後にstyle-bert-vits2内でターミナルを開き下記のコマンドを叩きます.

python convert_onnx.py --model model_assets\モデル名

叩く処理が実行されonnxファイルがモデルフォルダに作られます.

作られたファイルをaivm-generator.aivis-project.comサイトにてコンバートします.コンバートするとAIVM / AIVMX ファイルがダウンロードされます.最後にダウンロードされたファイルをAivisSpeechアプリに取り込めば完了です.

で、こちらが地声ベースの音声合成モデルで今回の記事を読み上げている音源になります.

明日へ続く

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

コマンド, ターミナル, ターミナル立ち上がり次, タブ, ファイル, ブラウザ, ブラウザ画面, モデルフォルダ, 内, 再度, 前提条件, 右, 地声ベース, 地声ベースモデル, 左, 最後, 音声, 音声モデル, 音声合成モデル, 音源,

Home > 2025年

ネトフリで映画65 シックスティ・ファイブを中盤まで観てラストまで飛ばし観した話.

2025年01月03日

Logging

おはようございます．ネトフリで映画65 シックスティ・ファイブを中盤まで観てラストまで飛ばし観した話を書いています.まずこの映画、大スクリーンかVRで観ないと楽しめない作りになっています.

ストーリー的には地球が舞台になっています.ストーリー展開はこんな感じです、恐竜が存在していた白亜紀後期に不慮の事故で地球に墜落した1基の母船.生存者は2人、果たして地球から脱出することは出来るのか？というストーリーなのですが、ストーリー展開がベタベタ過ぎる.

映画『65／シックスティ・ファイブ』予告１　5月26日（金）全国の映画館で公開

中盤まで観てヒヤヒヤドキドキがこのままずっと最後まで続くのかと思って中盤まで観て脱出ポッドが見つかったあたりからラストまで観た感じです.自分としては珍しい見方です.

基本、映画は飛ばし飛ばしで観ないのですがこの映画は例外です.この映画を小さな画面で観ていたことが一番の問題だと思いますが、ラストまで観て再度観たいとは思えなかったので….

全然悪いわけではないけど何かが足りない気がしました.映画の評価も3と微妙な評価でしたが今回は映画評論が正しかった形になります.尚、映画は字幕で見ています.

明日へ続く

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2025年01月03 06:00日

タグ

あたり, シックスティ・ファイブ, ストーリー, ストーリー展開, ネトフリ, ヒヤヒヤドキドキ, ラスト, 不慮, 中盤, 再度, 地球, 基, 字幕, 恐竜, 映画評論, 母船生存者, 珍しい見方, 白亜紀後期, 脱出ポット, 舞台,

Home > 2025年

LaravelのViteが使用できない環境でログイン画面などを表示させたい対処法.

2025年01月02日

Logging

おはようございます．さて正月、2日目の記事はLaravelのViteが使用できない環境でログイン画面などを表示させたい対処法です.レンタルサーバーではnpmコマンドが使えないのでローカルでビルドしてサーバーにビルド後のファイルをUPしている方が殆どだと思いますが、npmをビルドするのも面倒、ビルドが出来ない方はソースコードを読んで何のコードが使われているかを判断して使用されているライブラリーのcdnを貼り付けるだけで大体の解決します.

LaravelのViteが使用できない環境でログイン画面などを表示させたい対処法.

尚、viteで参照しているところは削除してください（viteと差し替える形になります.）.

viteでエラーが出る話はこれで終わりです.ここから余談です今年から無料になったGitHub Copilotを個人開発では使用するようにしました、この事によって今までより開発効率が上がるということならば有料プランも検討したいなと思っています.今のところ、無料プランで使っていくというスタンスです.

因みに自分は正月そうそうからコードを書いています.