Development

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） 参考にしたサイトとか 使ったツール ChatGPT https://chatgpt.com/ (2025年3月2日)

この記事を作った動機 React で useState なり useEffect なり hooks と呼ばれている状態変数と関係があるものを使うときは厳し目の条件があるようで、それが原因で動かないということがあった。 そこでどこに気をつければ良さそうか、公式ドキュメントを見たり、調べてみたりして、自分なりの理解でとりあえず記録しようということになった。 環境 Vite React TypeScript Tailwind CSS zustand hooks とは use〇〇 という感じで定義されている React の API 群の事っぽい。現状の体感としては、状態変数に関係する React の API のことを包括的に hooks とよんでいるように見える。以下は hooks の例である。 useState useRef useEffect 状態変数管理ライブラリで使う関数の一部？ zustand の例 // 定義 --------------------------------------------- // 定義 --------------------------------------------- import { useEffect, useState } from "react" import { create } from "zustand"; type DatabaseState = { websocket: WebSocket | null; serverIP: string | null; changeServer: (ip: string) => void; closeConnection: () => void; getWebsocket: () => WebSocket | null; }; // hooks 相当の部分の定義 export const useDatabaseStore = create<DatabaseState>((set, get) => ({ websocket: null, serverIP: "ws://localhost:50097", changeServer: (ip: string) => { set({ serverIP: ip }); }, closeConnection: () => { const ws = get().websocket; ws?.close(); set({ websocket: null }); }, getWebsocket: () => get().websocket, })); // 定義 --------------------------------------------- // 定義 --------------------------------------------- export function Acompornent(){ // hooks 相当のコード const websocket = useDatabaseStore((s) => s.websocket); // 何かしらのコード } use〇〇 から始まる APIを組み合わせた関数 // 定義 --------------------------------------------- // 定義 --------------------------------------------- // 上記の ”zustand の例” と同じ // 定義 --------------------------------------------- // 定義 --------------------------------------------- // useEffect の React API としての hooks や // useDatabaseStore の zustand (状態変数管理ライブラリの関数) としての hooks // を組み合わせてた 任意の定義の hooks の例 export function useDatabaseEffects() { const serverIP = useDatabaseStore((s) => s.serverIP); const setWebsocket = useDatabaseStore.setState; useEffect(() => { if (!serverIP) return; const ws = new WebSocket(serverIP); setWebsocket({ websocket: ws }); // return () => { // ws.close(); // }; }, [serverIP, setWebsocket]); } 気にしたほうが良さそうなこと コンポーネント内に hooks は書く コンポーネント内のなるべく先頭に hooks は書く コンポーネントの関数内のスコープからハズレたところには hooks は定義、宣言はできない。以下の部分が基本的にポイントな気がする。 if 文の中 loop 内 コールバック関数など、コンポーネント関数のスコープから外れるところ レンダリング部分内部 hooks で定義された状態変数の操作などは、コンポーネント関数内とかに限らず、コールバック内で呼び出したり、書き込んだり比較的自由にできる模様である。 // 何かしらのコード export default function Selector() { const websocket = useDatabaseStore((s) => s.websocket); const [visible,setVisible] = useState(false) const init = useRef(true) const toolbarAddTool = useToggleableStore((s) => s.addToggleable) // zustand (状態変数管理ライブラリ) も関係ある const [index, setIndex] = useState<Info>({ status: "init", errorMessage: "nothing", data: null, }); useEffect(() => { if (!websocket) { setIndex({ status: "error", errorMessage: "No data server connected to.", data: null, }); return; } const handleMessage = (event: MessageEvent) => { const result = JSON.parse(String(event.data)); console.log(result) if (!result.status.includes("error")) { setIndex(result); } else { setIndex({ status: result.status, errorMessage: result.errorMessage, data: null, }); } }; const whenOpened = () => { const request = JSON.stringify({ command: "info", data: null }); websocket.send(request); } websocket.addEventListener("message", handleMessage); websocket.addEventListener("open",whenOpened) // cleanup return () => { websocket.removeEventListener("message", handleMessage); }; }, [websocket]); // 条件分岐やループ、レンダリングや何かしらのコールバック関数内などで、 // hooks を宣言したり、定義することはできないという感じの模様 // しかし、hooks の定義で出てくる set〇〇 などを使ったりして、状態変数を操作したりなどはできる模様 if(init.current){ const toggleable:toggleable = { name: "Selector", setVisibility: setVisible, visibility:visible } toolbarAddTool(toggleable) init.current = false } // 何かしらのコード } エラーの発生と修正例 実際に私がOnenote代替品の作成でコードを書いているときに起こったエラーについて、記録してみる。 ...

この記事を作った動機 React で addEventListener を使ったら、再描画される事に、addEventListener されまくって、例えばマウスボタンが押されたというイベントが発火したときに、無数の同じ処理が走りまくるという事態になった。 これは以下のように、react の要素の一部として書いたときには、起こらなかった。 export function OverlayWindow({ children, arg }:{ children:ReactNode, arg:OverlayWindowArgs }){ // 何かしらのコード if(visible){ return (<div className={OverlayWindowContaierClassName} style={windowPosStyle}> <div className="windowHeader move bg-yellow-600 w-full h-[2rem] justify-center place-items-center align-middle text-center" onMouseDown={windowHandlers.mousedown} // addEventListener 相当 onTouchStart={windowHandlers.touchstart} // addEventListener 相当 > <div className="title h-[1rem] absolute text-white">{arg.title}</div> <div className="close size-[2rem] bg-red-700 ml-auto" onClick={() => {setVisible(false)}}></div> </div> <div className="content bg-gray-900 min-h-[5rem] w-full flex justify-center place-items-center align-middle text-center items-center"> {children} </div> </div>) } } それでとりあえず、解決状態だと思われる、アプリ自体の動作を重くしないレベルの実装にもっていくまでについて、簡易的に記録を取ろうと思い、この記事を作った。 ...

この記事を作った動機 単に自分用に、zustand の使い方を今 (2025/9/9) わかっている範囲で、書き出してみるだけ。 環境 Vite React TypeScript Tailwind CSS zustand 概要 まだ全然わかっていないが、私の今 (2025/9/9) イメージとしては、「zustand とは、react で言う状態変数の管理に関するライブラリの一つで、親 -> 子 コンポーネントという流れで状態変数を渡していく以外で、コンポーネント間の状態変数を共有、管理することができるもの。」という感じである。　使い方 import import { create } from "zustand"; 宣言例 type DatabaseState = { websocket: WebSocket | null; serverIP: string | null; changeServer: (ip: string) => void; closeConnection: () => void; getWebsocket: () => WebSocket | null; }; export const useDatabaseStore = create<DatabaseState>((set, get) => ({ // 変数の初期化 websocket: null, serverIP: "ws://localhost:50097", // 変数を操作する関数群 changeServer: (ip: string) => { set({ serverIP: ip }); }, closeConnection: () => { const ws = get().websocket; ws?.close(); set({ websocket: null }); }, getWebsocket: () => get().websocket, })); データを呼び出し、利用する export function Acompornent(){ // 他の hooks と同様にコンポーネントのコードの先頭あたりに書く必要がある。 const websocket = useDatabaseStore((s) => s.websocket); console.log(websocket) // 何かしらのコード } 関数を呼び出す export function Acompornent(){ // 他の hooks と同様にコンポーネントのコードの先頭あたりに書く必要がある。 const changeServer = useDatabaseStore((s) => s.changeServer) changeServer("ws://localhost:88091") // 何かしらのコード } 関係ありそうな記事 Hooks の宣言、定義で躓いたこと 参考にしたサイトとか Introduction - Zustand https://zustand.docs.pmnd.rs/getting-started/introduction (2025年9月9日) ChatGPT https://chatgpt.com/ (2025年9月9日) Rules of Hooks – React https://react.dev/warnings/invalid-hook-call-warning (2025年9月10日) javascript - Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks - Stack Overflow https://stackoverflow.com/questions/53472795/uncaught-error-rendered-fewer-hooks-than-expected-this-may-be-caused-by-an-acc (2025年9月10日)

この記事を作った動機 全然まだ私は使い方とか概念をわかってないと思うが、とにかくよく使う hooks について記録を取りたいので、記事を書くだけ。思考の整理とかって感じで書いていて、普通に間違い混ざってると思うし、他の人に参考になるかは怪しい。 react とデータの関係性 React では、データが変更されると UI が連動して更新されたりするという仕組みになっているので、普通の変数ではなく、データのありように合わせて、状態変数と呼ばれるものを使い分ける必要がある。 環境 Vite React TypeScript Tailwind CSS zustand 普通の変数 概要 普通に TypeScript や JavaScript で宣言するような let や var などと書いて宣言する変数たちのことである。これら変数の内容は基本的に React が再描画をかけると内容が初期化されて元の再描画前のデータは消えてしまう。 これを防ぎ、UI 再描画をまたいで変数の値を保持するためには、状態変数を useState なり、 useRef なり宣言して利用する必要があると思われる。 export default function Acompornent(){ // 再描画時には、x:100 y:100 にいちいち初期化されて変更内容が失われる let windowPos = { x: 100, y: 100 } // こちらは再描画時には内容は失われない const [style,setStyle] = useState({ top:0, left:0 }) // このようなコードを書くと windowPos は setStyle されたあと再描画で内容が初期値に戻ってしまう addEventListener("mousemove",(event:MouseEvent) => { // 何かしらのコード windowPos.x = event.screenX windowPos.y = event.screenY // 何かしらのコード setStyle({ top: windowPos.x, left: windowPos.y }) }) return　<div style={style} className="fixed">This is styled text.</div> } useState 概要 オーソドックスな状態変数で、データが更新されたとき、UI を再描画させたいという場合に使う。 ...

この記事を作った動機 Vite + React + TypeScript の環境でコンポーネント"内部"になにか要素をネストする方法がわかんなかったので記録するだけ。ただ厳密のこのやり方で正しいかはわかっていないが、ChatGPT-5 が出したやり方がとりあえず動いたので記録することにした。今のところ公式ドキュメントとかで今回出すようなやりかたをしているのはまだ見つけられていない。 環境 Vite React TypeScript Tailwind CSS zustand ネストの仕方 ネストできる関数コンポーネントを単体で定義 import {type ReactNode} from "react" export default function Outside1({ children }:{ children:ReactNode }){ return <div className="flex flex-row bg-gray-700 h-[5rem] w-screen top-[5rem] left-0 fixed"> {children} </div> } ネストできる関数コンポーネントをコンポーネント内に定義 import {type ReactNode} from "react" export default function Acompornent(){ // ネストができる関数コンポーネントは必ずしも、このようにコンポーネント内に書いている必要はないと思う。 function Outside({ children }:{ children:ReactNode }){ return <div className="flex flex-row bg-gray-700 h-[5rem] w-screen top-0 left-0 fixed"> {children} </div> } return <div> <Outside> <p>This</p> <p>is</p> <p>children.</p> </Outside> <Outside1> <p>This</p> <p>is</p> <p>children.</p> </Outside1> </div> } 参考にしたサイトとか ChatGPT https://chatgpt.com/ (2025年9月8日) Quick Start – React https://react.dev/learn (2025年9月9日)

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） このツールを作りたい理由 wallpaper engine みたいなことを、Linux 環境の GNOME、wayland 上でやりたいと思った。githubにコードやコンパイル済みのバイナリは上げておいて、いろんなlinuxディストリビューションで無料で使えるものがあるといいなと思った。 どう実装したいか？ GJS を使って、GNOME 拡張機能として実装したい。そもそもできるのか、具体的にどうするのかは現時点ではまだ見通しが立っていない。 参考にしたサイトとか 現時点では特になし。

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） ツール本体 モデルとテクスチャをまとめて指定 モーションファイルを指定(vmd) UTF-8 Shift-JIS ...

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 正直、私は卒業研究の過程で、Onenote代替品の作成として、OneNoteのような UI/UX や利便性を持ち、そのほかの類似ソフトウェアと比較して、不満点をまとめ上げ、それについて新しいアーキテクチャやシステム、実装を考えて、ソフトウェアを実装するということを研究にしようとしていたが、研究になるのか不安になっている。 もちろん、OneNoteの代替品は欲しいし、作りたいし、情報を整理できる、吐き出せ、具現化しやすい補助ツールは大事だと思うし、それを基盤にほかに研究にしたいことをやりたいし、でも時間がかかって大変なことなので、ただ個人でやるより、研究などにしてそれを作る時間を稼ぎたいというのもある。 人によっては、「研究をなめているのか」とか、「君は研究というものを一つもわかっちゃいない」とか、「君には研究は絶対にできない」とか暗に遠回しに突っ返されるような、あまり理解されないような理想が私のやろうとしていることにはある気もする。 そもそも OneNote代替の研究案って、OneNote が基本課金を前提としていて、いろいろ技術的に閉じられたところに不満があることに加え、単に機能的に不便を感じたり、不足を感じていているところもあり、自分で好みのツールを作りたいという非常に個人的な動機からのスタートであり、そもそも卒業研究以前の学部生時代にずっと考えていて、コードを考えたりしてはとん挫したり、こうなんていうか目立って前進できない行き詰ったところがあった。 このような、個人的な動機で、かつ多くの卒業研究をやる人がやるような前例踏襲的な、何かしらの研究を引き継いで拡張するようなやり方とは外れるような、挑戦的な内容は果たしてどこまで研究として成り立つのかといった感じである。 まあ不安であることは変わりないので、今やろうとしていることをどうするか現状未定であるが、研究になりやすそうな案を吐き出したら、今回の案が浮かんだというだけの話。現状はあくまでただ案を置いているにすぎないが。。。 まあ、基本的にあまりに早い段階で投げ出してしまっても仕方ないし、不安ながらでも続けるくらいのスタンスはしばらくもっておきたいとは思っているので、Onenote代替品の作成について今のところあきらめる気はないけど。 リポジトリ なぜ思いついたのか すごく簡単に正直に言えば、ChatGPTのモデルの挙動がうざいというところがある。どう考えてもポジティブ過ぎるし、なんか何を言っても、”あなたは間違っていません”というメッセージ性のある返答が返ってきて、使っているうちにイライラしてくるということが多い。 だんだんと、ChatGPTなどのLLMは出力が偏っているとわかっていて、”根拠なきそれっぽい自信”をあえて得るみたいな使い方や、即興性を得たいとき、何か記事とか作った時の簡易的な文法ミスや誤字といった小さなミスの確認といった、くらいしか正直まともに使えないなと、感じてきていた。 それで、そのような AIモデルが偏った出力をすることに対し、可視化するツールを簡単に作ったらいいよねと思いついて、それって定量化し易そうだし、研究にしやすそうだなと思った次第。 具体的な考え 簡単な考えられる仕組みとしては、ChatGPTを含むLLMの出力を自然言語処理にかけて、単語ごとなどに分割し、事前に用意したポジティブワードリストとかネガティブワードリストとそれら単語を比較し、どれだけ出力が偏っているか分析することである。 ポジティブ、ネガティブな言葉の語数を計算したり、ポジティブ、ネガティブな言葉に対して、CSS とかで色を付けることで、視覚的にどれだけLLMの出力が偏っているか表示する chrome拡張機能 とか作ってみてもいいよねって思ったりしてた。 ほかにも、「絶対、完全、間違っていない」などの言い切りの言葉など、様々なユーザを引っ張り、感情的にあおるような言葉を可視化できると、LLMに興ざめることができる気がしている。過度な期待を破壊するというか。 追記 2025年8月11?日 プロンプト自体の偏りも考慮する必要がある。プロンプトの偏りと、LLMの出力の偏りの相関関係について調べるなどが、研究になりそうである。 2025年8月19日 LLMの出力の定性的な偏りを定量的にはかることには限界がある。また人や地域によって何を偏っているとするかは異なる。今回の案は、あくまで利用者に対して、AIモデルには偏りがあることを前提として、その偏りを可視化する助けとして、参照できるヒントがあるといいなくらいの立ち位置になるかも？厳密な偏りの検出や可視化ということにはならないことを留意する必要はあるし、その点自体について何か研究できることがあればいいかもしれない。 2025年8月20日 具体的に何を偏っているとするのが、研究する前に定義しておいて、なるべく明確にしておく必要がある。判別に使う辞書リストみたいなものはベースや研究で使う段階としては、市販されている辞書などを参考にするみたいになるかもしれない。最終的にはユーザが自由に任意のリストを分析に使えるようにしたいと思う。 参考にしたサイトとか 今のところ特に論文とか全然調査できてないし、特になし。強いて言えば、chatGPTを使っているうちに思い付いたという意味では、ChatGPTを参考にしたといえるかもしれない。 ChatGPT https://chatgpt.com/ (2025年8月5日)

この記事を作った動機 単に簡易的にメッセージボックス的なものを出す方法を記録するだけ。Toast とかいう名前の API で、win32 API とかの MessageBox と比べて、だいぶ非直感的な名前な気がする。まあ多用すれば慣れるってことなんでしょうけど。。。 メッセージを出す 今回は、ボタンを押したらメッセージが出てくるようにする例を置いてみる。 // 呼び出されたアクティビティの onCreate 関数内にて val registerButton = findViewById<Button>(R.id.Register) registerButton.setOnClickListener{ Toast.makeText(this, "test", Toast.LENGTH_SHORT).show() finish() } 参考にしたサイトとか Toasts overview | Android Developers https://developer.android.com/guide/topics/ui/notifiers/toasts (2025年6月24日) MessageBox function (winuser.h) - Win32 apps | Microsoft Learn https://learn.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-messagebox (2025年6月24日)