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

2025.04.16

Logging

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

著者名  @taoka_toshiaki

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

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

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

タグ

ソースコード, テキストファイル, デモページ, ファイル, ブラウザ, ボックス, 下記, 側, 嘘, 実際, 実際生成, 感じ, 拡張子, 指示, 旧, 最低限, 生成, 知識, 箱, 自動回転は,

Photo by Suzy Hazelwood on Pexels.com

「so」は「shared object（シェアード・オブジェクト）」の略です.古い環境をWEB構築する方法.

2025.03.09

Logging

おはようございます.以前の職場でPHPのソースコードをビルドしてPHPのバージョン何パターンか作っていましたが、今でもテスト環境というものはあるのでしょうか？アンサー無いでしょうね、きっと.今ではDockerという便利な物がありますから.

さて古い環境をWEB構築する手順を箇条書きに記載していきます.まず古いPHPを動かすには古いOpenSSLが必要になってきます.まずはOpenSSLのソースコードが必要になりそれをビルドします.OpenSSLがPHPで必要になってくると書きましたが、必要になるパターンはphp-opensslを使用する場合です.例えばphpのフレームワークなどを導入している環境では必ずと言って良いほど、php-opensslを使用しているので古いOpenSSLも必要になってきます.

sudo yum groupinstall -y "Development Tools"
sudo yum install -y perl gcc make
wget https://www.openssl.org/source/openssl-1.1.1.tar.gz
tar xvf openssl-1.1.1.tar.gz
cd openssl-1.1.1
./config --prefix=/usr/local/openssl1.1.1 --openssldir=/usr/local/openssl1.1.1 shared zlib
make
make install

上記のような感じでOpenSSLのソースコードをダウンロード＝＞解凍＝＞ビルドします.ここでミソなのがso（拡張子：shared object（シェアード・オブジェクト））を作って上げることです.ここで自分は躓きました.soを作らずにphp-opensslをビルドしていたのでビルド時にエラーが出力されました.

phpのビルドは下記のような感じです.他にも拡張モジュールが必要な場合はそれに合わして追記記載が必要になってきます.

sudo yum groupinstall -y "Development Tools"
sudo yum install -y autoconf bison re2c libxml2-devel sqlite-devel \
    libcurl-devel openssl-devel git gcc make
git clone https://github.com/php/php-src.git
cd php-src
git checkout PHP-7.0.0
./buildconf
./configure --prefix=/usr/local/php7.0 --with-openssl=/usr/local/openssl1.1.1
make
make install

こうするとPHPの古いフレームワークなどが使用できるようになります.尚、フレームワークなどを使用する場合は他の拡張モジュールがもう少し必要になってきますが原理原則を理解すると出来ると思います.Apacheで動かすには「–with-apxs2=/usr/sbin/apxs」の記載も必要になってきます.尚、php-fpmを使用したい場合は「–enable-fpm」を追記してFirstCGIで動かすということで良いと思います.両者ともApacheの設定は必要となります.

明日へ続く

著者名  @taoka_toshiaki

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

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

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

タグ

アンサー, エラー, シェアード・オブジェクト, ソースコード, パターン, ビルド, ビルド時, フレームワーク, ミゾ, 両者, 原理原則, 古い, 古いフレームワーク, 手順, 拡張モジュール, 拡張子, 箇条書き, 職場, 解凍, 追記記載,

イラストレーターとミッドジャーニーを天秤にかける。

2023.01.19

Logging

おはようございます、木曜日の朝ですね、これを書いているのは木曜日ではありません。

もうすぐイラストレーターの１年契約が切れます、そんな時にミッドジャーニーというAIで画像生成が出来るサービスを触ってしまったので大変悩んでいます。悩ましいすぎる…。

自分でデザインしたものよりも断然、ミッドジャーニーで生成したものが良い感じのものになります。先日ツイートしたようなデザインが数分（１～２分）で出来てしまうの罪ですね。

ミッドジャーニーがイラレの拡張子で出力されるので有れば、断然、ミッドジャーニーに軍配が上がるのですが、そういう機能は無いみたいです。

イラストレーターもこの頃、使用していないのでもしかしたら、ミッドジャーニーに鞍替えする可能性ありですけど、今まで蓄積したイラレファイルがあるので、そうもいかないのが現状。

やはり、今年もイラストレーター契約します🙄。

ミッドジャーニー集団訴訟になっているからね・・・。

著者名  @taoka_toshiaki

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

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

投稿日時 2023年01月19 06:00日

タグ

１年契約, AI, イラストレーター, イラレ, イラレファイル, サービス, デザイン, ミッドジャーニー, ミッドジャーニー集団訴訟, 可能性, 拡張子, 数分, 朝, 木曜日, 機能, 現状, 画像生成, 自分, 良い感じ, 軍配,

動画を無音声に変換するバッチ

2019.09.28

Logging

こらからプログラムしている所のVlogを撮ろうと
月曜日に、WEBカメラを新調しました。
いざ撮影してみると部屋の雑音などが入ってしまうので
音声カットする方法は無いのかなと
フリー編集ソフトをググっていたのだけど
フリーの動画編集ソフトは動画の最初に開発会社のロゴが
表示されるものが多くて何だかやだなーと思い
断念、よくよく考えると自分プログラマーじゃないかということを
思い出しffmpegの存在を思い出して、、、。
ffmpegで無音声で検索すると音の切り離しができる事を知り
バッチを作る事が出来たのでその方法をおすそ分け。
Windows用のffmpeg（解凍したフォルダffmpeg）がC:の直下に入っているとした場合の
バッチです、尚、解凍したフォルダはffmpegに名前変更済とします。
下記のコードをテキストファイルにコピーしてその後、拡張子をbatと変更し
お使いください。動かない場合、下記のプログラムを正しく理解するか
知り合いのIT関係者にヘルプしたら大体の方はわかると思います。
※環境変数には登録していないのでexeにパラメータを渡します。

@echo off
set /P INMP4="動画ファイル名（絶対パス）を入力ください"
set /P OUTMP4="出力動画ファイル名（絶対パス）を入力ください"
cd C:ffmpegbin & ffmpeg.exe -i "%INMP4%" -vcodec copy -an "%OUTMP4%"
echo "complete"

 
無事、無音声の動画に音楽をYOUTUBEで付与することが出来ました。
https://www.youtube.com/watch?v=0-0FH3iaEP4

著者名  @taoka_toshiaki

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

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

投稿日時 2019年09月28 06:05日

タグ

Bat, ffmpeg, Vlog, web, Windows, おすそ分け, お使い, カット, カメラ, コード, こと, コピー, ソフト, だなー, テキスト, バッチ, プ, ファイル, フォルダ, フリー, プログラマー, プログラム, もの, ロゴ, 下記, 事, 動画, 名前, 場合, 変換, 変更, 存在, 後, 所, 拡張子, 撮影, 断念, 新調, 方法, 最初, 月曜日, 検索, 用, 直下, 編集, 自分, 表示, 解凍, 部屋, 開発, 雑音, 音, 音声,

Tera Termで自動ログインする方法：秘密鍵有り無し対応

2019.09.14

Logging

秘密鍵有り自動ログイン

connect 'ホスト名:22 /ssh /2 /auth=publickey /user=ユーザー名 /passwd=パスワード /keyfile=秘密鍵'
wait '#'
sendln 'ls'
sendln 'cd /var/www/html'

 
秘密鍵無し自動ログイン

connect 'ホスト名:22 /ssh /2 /auth=password /user=ユーザー名 /passwd=パスワード'
wait '#'
sendln 'ls'
sendln 'cd /var/www/html'
上記の内容をテキストファイルにコピペしてホスト名、ユーザー名、パスワード、

秘密鍵（場所）をそれぞれ変更し任意の名前で保存。
保存後、拡張子をTTLへ変更。
Tera TermでTTLを呼び出すようにする方法に
ついては割愛します（ググってください）。
ちなみにこの記事、過去に書いています。
（過去記事は別のブログに移転しています）
 

著者名  @taoka_toshiaki

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

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

投稿日時 2019年09月14 12:09日

タグ

2, 22, auth, cd, connect, html, keyfile, ls, nbsp, passwd, password, publickey, sendln, SSH, Tera, Term, TTL, user, var, wait, くだ, コピペ, それぞれ, テキスト, パスワード, ファイル, ホスト, ユーザー, ログイン, 上記, 任意, 保存, 内容, 割愛, 名前, 場所, 変更, 対応, 拡張子, 方法, 有り無し, 秘密, 自動, 鍵,

node-sassをインストールしてコンパイルするときに「あぁうっかり」

2019.07.06

Logging

npm install node-sass

上記の記述でインストールします。Node.jsはインストール済みだという
前提で！
コンパイルの仕方はこんな感じです。

node-sass test.scss test.css  --output-style expanded

ここでうっかりミスを犯さないで！！SCSSとSASSは記述が違います。
自分はSCSSで記述していたのに、拡張子がSASSになってまして
意味不明の一行目でエラーですとはじかれていた・・・。
ちなみにオプション値を付けずにコンパイルすると
インデントが崩れて美しくないのでオプション値を付けるように
しています。

著者名  @taoka_toshiaki

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

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

投稿日時 2019年07月06 12:00日

タグ

--output-style, css, expanded, install, JS, node, node-sass, npm, SASS, scss, test, インストール, インデント, エラー, オプション, ここ, コンパイル, とき, ミス, 一行, 上記, 不明, 仕方, 前提, 意味, 感じ, 拡張子, 自分, 記述,