Three.js、MMD、甘雨とChromeの拡張機能

-

Three.jsにMMDモデルを読み込むモジュールがあるのですが、これをChromeの拡張機能で使えないかといじってみたら割と簡単に扱えました。

動いているキャラクターはゲーム「原神」の「甘雨」ですが、原神のキャラクターは開発元がMMDとして無料公開しているのでThree.jsのデモ内で踊らせてみました👆。

いずれMMDを動かす拡張機能か何かを作れないかと考えていますが、とりあえずは他に優先したい事があるのでいつの日にか。。。。


リンク

  1. Three.jsのデモをちょろっといじったらChromeブラウザ内で甘雨が踊りはじめた
  2. Three.jsのデモをちょろっといじったらChromeブラウザ内で刻晴が踊りはじめた: 刻晴バージョン


コメント

コメントを投稿

このブログの人気の投稿

[お知らせ] キャスポケットツールの不都合 (2026/Jul/22頃から [SOLVED ?]

-
イメージ
追記: 2026/Jul/30 に公開されたキャスポケットツール Ver.0.0.40でこの不都合が解消されているはずです。 2026年7月22日 頃からAndroid/iOSアプリの「 キャスポケットツール 」の一部の機能で不都合が多発している様です。。 症状としては、 指定したユーザーのプロファイル情報を取得する場合 指定したユーザーのコメント欄の内容の表示 以外の機能で、403: FORBIDDEN エラーがほぼ高い確率で発生している様です。 (何度か繰り返す事で稀に本来の情報が表示される事はあるみたいです) 現在 ( 2026年7月25日 ) 公開されているキャスポケットツール (v0.039)は、 2025年末 に公開されたもので最近になってアプリのコード変更は行っていないので、ツイキャス側でAPIの仕様や設定が変更されて現在の不都合が発生していると考えられます。 アプリのアップデートで対応出来ないか調査中ですが、ツイキャスのサポートにも今回の不都合を説明するメッセージを送ったのでその返信にも期待したいと思います。 キャスポケットツールをご利用の皆様に不便をおかけしておりますことをお詫び申しあげます🙇 2026/Jul/27 : ツイキャスのサポートからの返事を待っています。 2026/Jul/29 : ツイキャスのサポートとのメールのやりとりの末、APIサーバー上のシステム更新が起因でアプリからサーバーへの接続時に不都合が生じていた事が分かりました。 キャスポケットツールをアップデートして近日中に公開して対応したいと思います。 2026/Jul/30 : 修正を加えたキャスポケットツール Ver.0.0.40をストアにアップロードして、 現在、 審査準備中なので 審査に問題がなければ近日公開 になります。 2026/Jul/30 : 修正を加えたキャスポケットツール Ver.0.0.40が Appストア と Google Playストア にて公...
Read more »

『コメ欄』用カスタムCSS - L◯NE風 (ツイキャス) - OBSのブラウザでも使えます。

-
イメージ
関連サイトの「 kiiのメモ帳 」で公開している『 L◯NEの会話画面風のツイキャスコメ欄カスタムCSS (シンプル版) 』ですが、 『 コメ欄 』のアプリ内表示モードでカメラ機能を使う場合に、吹き出しの背景に映る部分の画像が吹き出しの色と似ていると、コントラストの関係で吹き出し部と背景が同一化してしまうので、吹き出し部に 囲いの線 又は 色付きの影 のどちらかを追加で表示出来る様に変更してみました。 因みに以前のカスタムCSSでは、吹き出しの根元部は「◣」を使って再現していましたが、今回はカール付きで弧を描いているので少し再現度が向上しています。 このページの後方にある 設定 の部分で囲い線と影の他に、文字の大きさや色などをクリックでCSSをカスタマイズする事が出来ます。 カスタマイズ後は カスタムCSS の下にある CSSをクリップボードにコピー をクリックするとカスタムCSSがクリップボードにコピーされます。 [目次] 囲いの枠線と影の例 カスタムCSS LINE風 (コメ欄用) 設定 (Part-1) サンプル 設定 (Part-2) スマホアプリ 『コメ欄』での使用例 影を吹き出しの下方向に表示する方法 更新履歴 L◯NEの会話画面風のツイキャスコメ欄カスタムCSS シンプル版 @ メモ帳 (別サイト) x４バージョン : アイコンサイズ変更可 @ メモ帳 (別サイト) 幅細めバージョン : 狭い幅で表示したい時用 @ メモ帳 (別サイト) 『コメ欄』用カスタムCSS : 吹き出しの周りに枠線又は影の表示が可能 (このページ) 囲いの枠線と影の例 次に吹き出しに囲い線/影を設定した場合のコメント欄のスクショを例のとして貼っておきます。 囲い線と影の色は設定で、違う色にする事が可能なのと、ユーザー名やユーザーI...
Read more »

[ツイキャス配信・閲覧支援ツール] キャスポケットツール: 初期設定

-
イメージ
ツイキャス配信・閲覧支援機能をいくつか搭載したアプリ、 『 キャスポケットツール 』 （ Android ｜ iOS ） を作ってみました。 ツイキャス のユーザーやライブ配信を検索する機能をはじめ、自分のサポート・サポーターを閲覧したり、気になるユーザーを登録してライブ配信の通知を有効にしたりする事が出来ます。 このアプリの機能を使うのには、 アプリを ツイキャスのアカウントに連携 する必要がある他、 Android 13とそれ以前 のAndroidでは、 バックグラウンド処理を有効 にすると、登録した「気になるユーザー」のライブ配信開始の通知を受け取れる確率が上がるので、 ここに『キャスポケットツール』を使うのに 最低限必要な初期設定 をメモしておきます。 [目次] キャスポケットツールの機能 初期設定 バックグラウンド処理の有効化 iOS Android 13とそれ以前のAndroid 備考 関連メモ #キャスポケットツール キャスポケットツール Android版 by kii_memo_jp iPhone/iPad版 by BIBO-HQ キャスポケットツールの機能 メイン画面 現時点では次の機能が搭載されていて、アプリのメイン画面から選択する事が出来ます。 ...
Read more »

[OBS] Twitchコメント欄向けCSSカスタマイザー (試作)

-
イメージ
( Twitch Chat Overlay CSS Customizer Prototype ) Chrome拡張機能の「 TwitchコメカスタムCSSテスター 」をChromeウェブストアで公開していますが、この拡張機能に読み込ませるテスト用のカスタムCSSも必要だと思ったので、Twichのコメント欄 (チャットオーバーレイ) 向けの簡単なCSSカスタマイザーをここに置いておきます。 このページでクリップボードにコピー出来るCSSを使うと、Twitchのチャット欄をポップアップして表示したコメント欄のURLを使って表示するオーバーレイを、マウス操作でカスタマイズする事が出来ます。 [目次] Twitchのコメント欄 (チャットオーバーレイ) カスタムCSS コメント欄サンプル 設定 更新履歴 TwitchコメカスタムCSSテスター サポートページ #Twitchコメカスタム   ( #ツイッチコメ欄カスタムCSS 、 #トイッチコメ欄カスタムCSS ) Twitchのコメント欄 (チャットオーバーレイ) Twitchのライブ配信をパソコンのブラウザで視聴する時にウインドウの右側に表示されるコメント欄を、「チャットをポップアウト」でポップアップすると https://www.twitch.tv/popout/ ユーザー名 /chat?popout= というURLでコメント欄が別のウインドウで表示されます。 配信ソフトの「OBS」のブラウザや、Chrome拡張機能の「 TwitchコメカスタムCSSテスター 」を使って、上記のURLにこのページのカスタムCSSを読み込ませて表示すると、標準のTwitchコメント欄とは違うレイアウトにカスタマイズして表示する事が出来ます...
Read more »

ツイキャスで他の人がサポートしている人って見えますか？ (キャスポケットツール)

-
イメージ
[目次] 知恵袋の質問 アンサー: キャスポケットツール 例: キャスくんのサポートリスト 関連メモ キャスポケットツール 機能説明 ツイキャス関連メモ 知恵袋の質問 Yahoo知恵袋に次の様な質問があったのですが: 自分がツイキャスで誰をサポートしているかって、他の人から見えちゃいますか？ 誰かは見えなくても、何人サポートしてるとか見えますか？ (2020/6/4) 0:29 ツイキャスで他人がサポートしてる人って見ることは出来ますか？ (2016/11/28) 11:18 ツイキャスについてです 自分のサポーターは周りから見られるのは知っています 自分がサポートしている人は周りから見れますか？（僕がサポートした人以外） また見れないとしても僕が何人サポートしているかは周りに分かりますか？ (2015/11/21) 17:40 ツイキャスの 公式アプリや公式サイト では、各ユーザーのサポートの一覧が「サポート欄」で確認出来る他、(ログインが必要になりますが) 自分がサポートしているユーザーの一覧も確認する事も可能です。 しかし、他のユーザーがサポートしているユーザーの一覧は、公式のサイトや公式アプリでは確認出来ない仕様になっています。 でも、「誰をサポートしているか」という情報が非公開になっている訳ではなく、公式サイトの情報から全てのユーザーの「サポート欄」をくまなく確認していけば、理論上は「誰が誰をサポートしている」かを調べる事は出来ますが、かなりの時間とデータ量が無駄になるでしょう。 でも、実際は、無料アプリで「誰が誰をサポートしている」の一覧を簡単に確認する事が出来ます。 アンサー 無料Android/iOSアプリの「 キャスポケットツール 」で、他のツイキャスユーザーが...
Read more »

『コメ欄』✚ (プラス) v0.2.x 初期設定

-
イメージ
ツイキャスのコメント欄をAndroidデバイス上で表示出来る『コメ欄』 ✚ ( プラス ) （v0.2.x）の初期設定に必要なステップをここにメモしておきます。 『コメ欄』✚ v0.3.x では初期設定の必要が無くなったので、このぺージで紹介している設定は必要ありません。 ただ、ツイキャスのコメント欄をオーバーレイとして表示する場合は、ステップ一１ 「コメントオーバーレイ表示用のURL」のURLが必要になります。 [目次] 初期設定 コメントオーバーレイ表示用のURL コメントオーバーレイURLの設定 『コメ欄』✚ 関連メモ 『コメ欄』✚ 関連 v.0.2.x サポートページ 📝 初期設定 (このメモ) kii_memo_jp プライバシーポリシー (個人情報保護方針) 『コメ欄』のセットアップ動画 コメントオーバーレイURLの設定のステップ④で「ツール・ゲームズ配信」ページを開いてURLをツイキャスのサイトからコピー&ペーストする場合の流れが収まっています。 ※ この動画は『コメ欄』Liteを使って収録されていますが、設定方法は、『コメ欄』✚ v0.2.xと『コメ欄』Liteでボタンの位置や見た目が少し違うだけで、同じ流れになっています。 初期設定 コ...
Read more »

Flutter備忘録: TextFieldに入力された文字列の一部のスタイルを変更する方法

-
イメージ
Googleのストアで公開しているAndoridアプリの 『コメ欄』 Lite ( ライト ) は、これまで Android SDK ベースの開発環境下でJava/Kotlin言語で開発していましたが、現在は、Googleの Flutter(フラッター) というアプリ開発環境下に移行しようと作業を進めています。 Java/Kotlin言語で開発した『コメ欄』Liteでは、URLの入力の際に、 TextField を使っていますが、入力された文字列の 正しくない部分だけを赤字で表示 するJava/Kotlin言語のコードが組み込まれています。 このコードをFlutter版のコードに変換する時に、一筋縄には行かなかったのでここに備忘録として記録しておきます。 キーワード : #TextField #TextEditingController #buildTextSpan #buildTextSpanをオーバーライド [目次] Android SDKからFlutterへ移植 マテリアルデザインのTextField 間違えている部分を赤色で表示: Android SDKでは比較的簡単に可能 Flutterでは? 例: TextFieldに入力された文字列の一部を赤字で表示する方法 (buildTextSpanをオーバーライド) 終わりに Android SDKからFlutterへ移植 Android SDK はその名の通り、Android専用のアプリを制作するソフト開発キット(SDK)で、Androidアプリしか制作する事しか出来ません ※ 。 iOS用のアプリを制作したい場合は別に iOS SDK を使ってSwift又はObject-C言語で直接開発するか、Swift/Object-Cに互換性のある開発環境を使う必要があります。 上記の Kotlin もAndroid SDKがKotlinに対応している上に、KotlinがiOS SDKのAPIを呼ぶ事も出来ます。 なので、Kotlin上で、Android特有の機能の場合はAndro...
Read more »

Flutter備忘録: SafeAreaとAppBarでiOSアプリのステータスバーの色が白くなるバグ？

-
イメージ
Flutterはマテリアルデザインをサポートしているので、マテリアルデザインのカラースキーム(色構成)を使うと無難な見た目のアプリを比較的簡単に作る事が出来ます。 Flutterの入門的な事を扱っているネット記事だったりすると、アプリデザインのプライマリカラーを既定値の青色 (MaterialColor.blue)から他の色に変更するのに、Flutterでマテリアルデザイン対応のアプリの基礎としてコード内で使う MaterialApp の theme プロパティに、使いたい色を指定したテーマデータ (ThemeData)を渡す方法だけが紹介されていたりする場合があったりします。 Status Bar と App Bar デバッグモードで開発中のアプリをいじっている時点だとそこまで気にならない事かもしれませんが、これだけだと、アプリのタイトルなどを表示する App bar の色が既定値の水色のままで表示されたり、時間やバッテリー残量が表示される Status bar の色がおかしかったりたりする場合があります。 アプリとして一般リリースする際にアプリの動作の再確認をしていると、こういった事は絶対NGなので、MaterialAppのthemeプロパティ以外にも必要な設定をここに備忘録としてまとめておきます。 [目次] 好みの色に変更する方法 (マテリアルデザイン) MaterialAppのプロパティ設定 SystemUIOverlayStyle設定 SafeArea + AppBarのバグ？ そもそもSafeAreaって? 07/2025 追記 Android 15 から、デフォルトでアプリが全画面 (Edge-to-Edge)で表示される使用になった為、アプリが「ステータスバー (Status Bar)」や「ナビゲーションバー (Navigation Bar)」に重ならない様にアプリのウイジェットの表示位置を調整する必要があります。 Andr...
Read more »