Development

この記事を作った動機 単に自分用に、zustand の使い方を今 (2025/9/9) わかっている範囲で、書き出してみるだけ。 環境 Vite React TypeScript Tailwind CSS zustand 概要 まだ全然わかっていないが、私の今 (2025/9/9) イメージとしては、「zustand とは、react で言う状態変数の管理に関するライブラリの一つで、親 -> 子 コンポーネントという流れで状態変数を渡していく以外で、コンポーネント間の状態変数を共有、管理することができるもの。」という感じである。　TODO 参照が変わらないと、再描画が起こらないことを書く。例えば、setter 内で、get()したものを直接変更し、set()のところに使うと、参照が同じのため、問題が起こる。 使い方 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") // 何かしらのコード } 躓いたこと イミュータブルの原則 zustand を使っているときに、どうやっても値を更新しているにも関わらず、再描画が正しくかからないという問題が起こった。これは、同じ参照を持つ変数を変更するという、“ミュータブル"な扱いをしたときに起こるようである。一度宣言された、作られた変数は原則変更しない(できない)というのが、React や zustand といった状態変数の概念の前提にはあるっぽいと私は最終的に考えた。 ...

この記事を作った動機 全然まだ私は使い方とか概念をわかってないと思うが、とにかくよく使う 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日)

この記事を作った動機 アクティビティの遷移方法をたんに記録するだけ。今回は二つの実装について書く。一つは単に、前のアクティビティに戻るだけで、もう一つは何か処理をしてから戻る方法について書く。 ただ戻るだけの時 具体的な処理をしない場合については以下のように実装できる。AndroidManifest.xml に親アクティビティ(android:parentActivityName)を設定する。コードは不要な模様。 ... <activity android:name=".loginActivity" android:exported="false" android:label="@string/login_activity" android:parentActivityName=".shareFolderListActivity1"/> ... 何か処理をしてから戻りたいとき 今回の場合でいえば、登録ボタンを押したら、フォームに打たれた情報をもとに何かしら処理を施してから元のアクティビティに戻りたい時は、以下のように finish() を呼び出す。 ... // 呼び出されたアクティビティの onCreate 関数内にて val registerButton = findViewById<Button>(R.id.Register) registerButton.setOnClickListener{ // 何かしらの処理 finish() } ... 参考にしたサイトとか How to Go Back to Previous Activity in Android? - GeeksforGeeks https://www.geeksforgeeks.org/how-to-go-back-to-previous-activity-in-android/ (2025年6月24日) Go Back to Previous Activity in Android https://www.tutorialspoint.com/how-to-go-back-to-previous-activity-in-android (2025年6月24日)

この記事を作った動機 ちょっと自分のために、アクティビティの呼び出し方をまとめるだけ。今回はボタンが押されたら、特定のアクティビティを呼び出すという動作について、例を載せておく。 アクティビティの呼び出し方(onCreate 関数内) val loginUIcall = findViewById<FloatingActionButton>(R.id.loginUIcall) loginUIcall.setOnClickListener { val activity = Intent(this,loginActivity::class.java) startActivity(activity) } 参考にしたサイトとか インテントとインテント フィルタ | App architecture | Android Developers https://developer.android.com/guide/components/intents-filters?hl=ja (2025年6月22日)

この記事を作った動機 Android アプリでネットワーク接続に対応する の続きの記事です。前の記事でやっていたことに関して、進展があったので、とりあえず忘れないうちに記録しようというわけです。 まあ、理解より先に動くことを試していたので、間違ったこととかも書いていること大いにあり得ます。これはあくまで自分の理解を深めるために記事として書いてしまおうという感じです。ご注意ください。（それは他の記事でも言えることですが。。。） コード 専用クラス(ViewModel)にて ... class smbOperation1 : ViewModel(){ private val userLiveData = MutableLiveData<String>() val user: LiveData<String> get() = userLiveData init { // trigger user load. } fun doAction() { viewModelScope.launch { val test = withContext (Dispatchers.IO) { testSMB() } userLiveData.value = test } } ... } アクティビティ内にて ... class shareFolderListActivity1 : AppCompatActivity() { // https://github.com/hierynomus/smbj private val smb by viewModels<smbOperation1>() override fun onCreate(savedInstanceState: Bundle?) { ... val debugTestStart = findViewById<Button>(R.id.debugTestStart) val debugText = findViewById<TextView>(R.id.resultAndDebugConsole) smb.user.observe (this){ message: String -> debugLog(message) debugText.setText(message) } debugTestStart.setOnClickListener{ smb.doAction() } } ... } わかったこと（現時点での理解） LiveData というのを使う方仕組みの方が新しいっぽい AsyncTask クラスとは異なる、kotlin 側で用意されたスレッド管理の仕組みを使う方が簡単そう LiveData UI と ViewModel クラス間におけるデータの橋渡し的なやり取りを行う。UIスレッド側で監視される変数的なものである。ViewModel クラスのインスタンスのうち、 LiveData に変更があり次第オブザーバー内に登録された処理が実行され、UIが更新される。 ...