四海のほとり

ベトナム語文法変換スクリプトに生成イラストを付与するようになってから、自分のiPhone13 miniの縦画面だとセリフが小さくて読みづらいなと感じていた。 なので、タップすると画面いっぱいに拡大する機能を実装しようと思った。 それで検索して調べると色々な手法があるようだった。 普通、プログラムの世界では車輪の再発明はしないという原則があり、既に存在しているプログラムがあるなら一から作らずに使わせてもらい、手間を減らすのが一般的である。 しかし、JavascriptもCSSも再学習中の私にとっては練習の一環なので既存のスクリプトを流用はせず、ロジックを確認して自分で実装するのが良いと判断して実装。 CSSのclassで拡大時のclass、zoomを別途用意してJavascriptでclassを書き換える。 この方針として実装。ちょっと悩んだところもあったが無事実装完了。 タップして拡大するだけでなく、再度タップすると縮小する処理も実装完了。 ここまで来て、拡大、縮小時にアニメーションで徐々に拡大、徐々に縮小するようにしたいと思った。 またちょっと調べるとCSSのアニメーション処理にはtransitionとanimationがあるらしい事がわかる。 どちらで実装するのが良いかはちょっとわからなかった。 そこでふと思った。ChatGPTに聞いてみようと。      以下のCSS class right_sideからzoomにjavascriptで切り替えます その際にcss animationで50%から100%に1秒で変化させたいです css animationを追加してほしい      .right_side{ width:50%; float:right;       }       .zoom{ width:100%; float:right;       } するとChatGPTからは以下の返答 ChatGPT        .right_side{ width:50%; float:right;   transition: width 1s;       }       .zoom{ width:100%; float:right;       } このアニメーションは、.right_

 自作のスクリプトにイラストを付け加えてみると華やかでわかりやすいと感じたので過去のスクリプトにもイラストを付与してみることにした。 「ベトナム語文法変換09」は「〜しないで」なのでお母さんが男の子に「お菓子を食べないで」という感じの絵にする事にした。 Niji journeyに"お母さんが子供に命令している 子供はお菓子を食べようとしている --niji 5 --style cute" と命令文を与える するとだいぶ想定外の絵が出力された その後、似たような命令文をちょっとずつ変えながら5回出力させてみたが、どれも希望とだいぶ違う絵が出力されていた。 6回失敗したらさすがに命令文を変えなければならないなと思い変更 「お菓子」は抽象的すぎて結果にバラ付きが出ると思い「クッキー」と具体的な名称に変更、さらに食べようとしているも抽象的な感じなので「手を伸ばしている」に変更 命令文"男の子はクッキーに手を伸ばしている お母さんは食べないでと言っている" お、だいぶイメージに近づいてきた やはり具体的な命令が良いようだ 手を伸ばすで子供の描画が良くなってきた。 お母さんが微妙だったり居なかったりしているのでお母さんの部分をもっと具体的にしよう。 命令文"男の子クッキーに手を伸ばしている お母さん後ろに立って話しかけている" お、右上が狙ったイメージにかなり近い！　これで良いんじゃないかと思ったけど、男の子の指が4本だった 右上をベースにバリエーションを作成してみる ・・・どれも指が6本だったり4本だったり不自然 この後4回繰り返したのだけど、どれも駄目だった どうもNiji journeyもMidjourneyも指が苦手らしい。 正解に近づいているのに指がどうにも不自然である これだけ繰り返して駄目だとこれ以上繰り返しても駄目だろう。 と、言うことで私は生成を諦めた。 まぁ、私は絵を描けないわけではないので、自分の手で描き変えてしまう方向に方針転換した。 iPad proでMedibang Paintを起動し、まともそうだけど子供の左手が4本指の画像を読み込ませる 上位レイヤーを追加してApplePencilでちゃちゃっと指の位置をずらし指を5本に書き換えた。 するとこの様に子供の指は5本になりイラストとして掲載可