投稿

『倉子ちゃん』制作ノート

イメージ
 プログラムばかり作っていて最近ブログを書いてないので、最近作ったプログラムについて記してみる。 昨日一般公開した『 早押し百人一首 十連‼ 』についてはおいておいて、1月末に公開した『 倉子ちゃん 』について記しておく。 倉子ちゃんはプログラムの練習用に作ったシンプルなパズルゲーム。 昨年から行っているプログラムの再学習を今年も引き続き行うという方針の元に作成している。 ゲームの内容はずばり往年の名作『倉庫番』を元にしたもので、非公開の初期版では『倉庫番』との相違点は殆どなかった。 ゲームのルールに著作権は存在しないとはいえ一般公開するにあたって『倉庫番』との差別化は必要だろうと思った。 そこで、いくつかの案を考えたのだが、基本的なゲームシステムが変わると手間がかかるので、荷物そっくりのダミー荷物を作り、ダミー荷物は触ると消えるというシステムを採用した。 これが最も手間がかからないアイデアだったし、ダミーを見極めて消してしまった後は普通の『倉庫番』と同じ感覚で遊べる。 この『倉子ちゃん』に限らないが、公開しているウェブアプリは全て素のJavascript(Vanilla JS)で作成している。 昨年の初め、ゲームを作ろうとして初めに選んだのはUnityというゲーム開発環境だった。 実に簡単にゲームを作れることがわかったが、肝心のモバイル向けウェブアプリに対応していなかったので、早々に使用をやめた。 その後は、Webアプリに特化したPlaycanvasの練習を行っていたのだが、各種チュートリアルや解説記事がPlaycanvasのバージョンによって動いたり動かなかったりして、Playcanvasのルールに振り回されるのが嫌になった。 そうして、結局Javascriptを基礎からやり直すことにして開発環境やライブラリの類は一切使わない方針へと転換した。 その後は毎週なんらかのプログラムを作り、公開する価値があるかもと思ったものは公開してきた。 『倉子ちゃん』もそうした多少は公開する価値のあるプログラムの一つで、必要以上に手間を掛けていない。 例えば右に動かした時に右向きに、左に動かした時に左向きになるとか、歩くアニメーションを実装するとか、そういう事はしていない。 そういうのはゲーム開発環境なら簡単に実装できるのだろうけど、一つずつ自分でプログラムを組むと結構時間のかか

スターフルーツと画像生成AI

イメージ
 ブログに記していないが、スクリプトの開発、公開は続けている。 最近では神経衰弱のような絵合わせゲーム「 ペアカード(飲み物) 」を公開した。 これもJavascriptの練習を目的とした単純なプログラムであるが、飲み物の画像を付け、ベトナム語の単語を表示するようにすることで遊びながら単語を覚えるというコンセプトにした。 当初はベトナム語のみであったが、日本語を学習している人にも役に立つように日本語表示も追加した。 カードの画像は昨年からのテーマである画像生成AIを用いている。 ベトナム語変換スクリプトの画像では最近DALL-E3を用いて生成した画像もあるが、ペアカードでは裏面のみDALL-E3で表面の飲み物画像は全てNijiJourneyによって生成している。 画像とテキストを入れ替えれば他の単語の学習にもなるので、次は果物編を作ろうと思い、ベトナムらしい果物5つと世界的に食べられている果物5つを選んで生成を開始した。 いちご、リンゴ、マンゴー、ドリアン、この辺りはなんの問題もなく生成される。 2番めに苦労したのはパパイヤ、カットしていないを指定してもカットされた画像ばかり生成されてしまう。たしかにGoogleでパパイヤを検索して画像を見るとカットした画像ばかりが表示されるので、こうした画像を学習データにしていたらカットした画像ばかり生成されるだろう。 それでも何度か繰り返しているうちにカットしてない画像も生成されたので、それで良しとした。 1番苦労したのはなんといってもスターフルーツだった。 NijiJourneyではこんな女の子の画像が生成されてしまうし Mid Journey(v5.2)ではこの様にカットした画像が生成されてしまう DALL-E3ではこんな星型の謎植物が生成されてしまう これ、1回、2回ではなくて、それぞれに10回以上生成を試みてもまともな画像は生成されなかった。 唯一スターフルーツっぽいのはMid Journeyの V6[ALPHA]であった。 質感的に微妙ではあったが、他と比べれば明らかにマシなので、これで手を打つことにした。 ーーーーー2024/01/07追記 この画像はスターフルーツに見えないので結局ほとんど手描きした画像に変更した。どの様に描き換えたかは ペアカード第2弾 果物編 で確認 まとめ 昨今、画像生成AIを用いた画像をよく

iPad ProをChromebookのサブディスプレイにしてみた

イメージ
 iPad OSが17になって、USBのキャプチャーユニットに対応したというニュースが入ってきたので、以前からiPadをサブディスプレイに出来たら便利だろうなぁと思っていたので試してみることにした。(iPad OS17からUVC(USB Video Class)に対応したとのこと) ディスプレイ化する為に必要なもの USBキャプチャーユニット HDMIケーブル(キャプチャーユニットと出力元のPCによっては違うケーブル) キャプチャー用のアプリ USB A→C変換アダプター(キャプチャーユニットがTypeCなら不要) キャプチャー用のアプリはAppStoreでuvc viewerで検索すると色々と出てくる。 私はEasyC@Mというアプリを選んだ。 USBのキャプチャーユニットは高いのも安いのもあるが、とりあえず試すだけだからやすいので良いだろうと思い、ヨドバシでこちらを購入 ヨドバシ.com - アイ・オー・データ機器 I-O DATA GV-HUVC/4K [4K対応 UVC対応 HDMI-USB変換アダプター] 通販【全品無料配達】  希望小売価格: ¥23,980 価格: ¥8,310(税込)ポイント:831ポイント(10%還元) コネクタがUSB Aだったので手元にあったA→C変換アダプターを使用して接続。 なんか認識に少し手こずったが無事表示されるようになった。 けど、変換アダプターがこのタイプだと重さで斜めになり接触が悪く、動作が怪しい。もちろん見た目も悪い。 なので短いケーブル付きの変換アダプターを購入 これだと問題ない。 無事安定して使えるようになったので長時間利用してみる ・・・iPadのバッテリーの減りが早い。 ちょっとカフェで1時間くらい使うなら問題ないけど、数時間連続使用は厳しそう。 なので、充電しながら使う方法として給電機能のあるUSBハブを購入した。 ヨドバシ.com - バッファロー BUFFALO BSH4U500C1PWH [PD対応 Type-C USB3.2(Gen2) 4ポート バスパワー USBハブ ホワイト] 通販【全品無料配達】   iPad Pro標準添付の充電器からUSBハブの給電端子に接続。 無事充電されている事を確認。 HDMIでChromebookから映像出力。 問題なく充電とキャプチャーを同時に行えて

Niji Journey Mid Journeyの進化 部分訂正機能 Vary(Region)

イメージ
  前回の記事 ではLamaCleanerを用いて不要な箇所を削除する事でNiji Journeyの欠点を補う方法を記した。 単に削除するだけではなく、削除した画像をソースにして再生成する事でバランスが調整されることも確認した。 あの記事を公開したのは2023年9月2日 実は、この時点で既にNiji Journey、Mid Journeyは大きな進化を遂げていた。 部分訂正を行う機能が実装されていたのである。 私がそれに気が付かなかったのはブラウザ版のDiscordを使っていたからだったようで、ブラウザからDiscordを表示していると新機能Vary(Region)が表示されないのである。 Vary(Strong)やVary(Subtle)は表示されているのでVary(Region)だけが表示されないというような自体は想像できなかった。 しかし、その機能が追加されたことを知ってから色々試して、何故か自分のところには表示されないので、もしやと思いLinux環境にDiscordをインストールしたらVary(Region)が表示されたのであった。 そこで色々試してみたが、これはかなり使える機能で、慣れればかなり有効活用できそうである。 ここでは例として前回の記事に掲載した6本指の少女をVary(Region)で改善してみる。 この画像にVary(Region)を適用 訂正したい箇所をマークして、その部分に何を描いてほしいかを指定する。 "girl high five"の部分を"high five"のみにして実行 以下の画像が生成された。 無事5本指に訂正された画像が生成された!(ちょっと不思議な画像もあるけど) 前回の記事では髪の色や服など大きく異なる画像が生成されたが、Vary(Region)では指定した箇所のみが生成されるので、仕上げとしての部分訂正が行える。 今まではちょっとだけ問題があるという理由で全体を再生成して、どれも微妙にちょっとだめだなぁという状況になりがちだったが、これからは問題のある箇所だけ再生成させることで大幅に時間の短縮が可能になった。 前回頑張って導入したLamaCleanerはさして必要なくなってしまった。 部分的な削除目的ではLamaCleanerを使ったほうが効率的な場面はまだあるとは思うが、Niji

LamaCleanerをChromebookのLinux環境にインストールして使ってみた

イメージ
 Niji JourneyやMidjourneyのような画像生成AIを利用していると、手が3本とか指が6本というような不自然な画像が頻繁に生成される。 何度生成しても納得のいく画像にならない事が多い。 それで以前の記事ではApplePencilを使って手で描き変えてしまえばすぐに解決することを記した。 手で描き変えるのは細かな調整も出来るし良いのだけど、もっとお手軽な方法はないものかと調べていたらLamaCleanerというプログラムが存在していることを知った。 画像生成技術をベースにした画像補正ツールLama Cleanerのインストール こちらの記事にはLinuxだと簡単にインストールできること、pythonの実例が載っている。 先にUbuntu(linux)で試すと簡単に起動して動作を確認できた。 Chromebookの場合、直接インストールするよりクラウド上の環境にインストールしてアクセスするほうがOSの思想に合っているとは思うのだけど、まぁせっかくストレージとCPUに余裕のある機種を使っているのでChromebookのLinux環境にインストールしてみることにした。 注意点としてはChromebookのLinux環境ではpythonはpython3と打つ必要があることくらい。 インストールは  pip install lama-cleaner で、あっけなく完了した。 ヘルプの表示などは問題ないが、例のとおりに lama-cleaner --model=lama --device=cpu --port=8080 とするとエラーになる $ lama-cleaner --model=lama --device=cpu --port=8080 - Platform: Linux-5.15.112-19404-g55fe7e355056-x86_64-with-glibc2.35 - Python version: 3.11.2 - torch: 2.0.1 - torchvision: 0.15.2 - Pillow: 10.0.0 - diffusers: 0.16.1 - transformers: 4.27.4 - opencv-python: 4.8.0.76 - xformers: N/A - accelerate: N/A - lama-cle

ベトナム語文法変換11〜15

イメージ
 さて、プログラムの改善をしつつ、ベトナム語文法変換は追加し続けており既に15まで公開している。 ブログに記していない11〜15について記しておくことにする。 ベトナム語 文法変換11・ Mặc dù Mặc dù  + 主語 + 動詞 + 目的語 +  nhưng  +主語 + 動詞 + 目的語 .〜にかかわらずも、〜だけれども 当初は似た感じの表現 Bất cứを含んだ形でスクリプト化していた。そのため、「〜だけれども」のところも選択式になっていた。 項目が多いと操作に戸惑う人が多いので選択項目は5つくらいの方が良いと感じる 生成イラストは背景を白にすることで不自然な背景に悩まされることをなくし、短時間に終わらせた。ちょっと不自然な指は直す作業せずに吹き出しで隠した。 ベトナム語 文法変換12・疑問詞 (ra) sao?/thì sao? ~ (ra) sao? 〜はどう?  (ra) sao rồi? 〜はどうだった? ~thì sao?  〜のほうはどう?  ~thì sao rồi?  〜のほうはどうだった? これは昨年8月の初めてのBeba先生とのレッスン時に教えてもらった文法、〜のほうはどう? をスクリプトにしてみた。 教えてもらったのに使いこなせていない文法が多いので、最近習った文法と並行して過去に教えてもらった文法をどんどんスクリプト化していく方針。 選択項目は最少の3、しかもデフォルトの文は1つ目を「無し」にしているので2項目しか選択していない。 これは〜のほうはどう? の〜の部分が多岐にわたっており、「あなたの母の病気」や「そのマウンテンバイク」といった構造の違う文を複数項目を組み合わせて表現しようとすると項目数がとても多くなってしまい、08の時みたいに項目が多すぎてどう操作していいかわからないという苦情を受けそうに思えたので、まとめて一つにしてしまったのである。 結果として利用者が工夫する部分が殆どない、面白くないスクリプトになってしまったかもしれない。 やはり変な組み合わせをする事が出来て、失敗を体験できる方が面白い。 かといってこのスクリプトを再度細分化して作り直すかと言うと、そこまではしたいと思っていない。 ベトナム語 文法変換13・ thì 〜のほうは〜です。 主語 + thì + 動詞 +目的語  thì 〜のほうは〜です 12の質

CSS animationをChatGPTとGoogle Bardに作らせてみる

イメージ
ベトナム語文法変換スクリプトに生成イラストを付与するようになってから、自分の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_