Development

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

この記事を作った動機 Chromium 系列のブラウザでは動いていた拡張機能が、Firefox では動かないということがあった。原因を調査してみたところ、ネットワーク周りに問題があり、manifest.json の修正で解決できそうなことが分かった。 問題が解決するまでに試したことを記録しておきたい。 前提 拡張機能はLANにあるサーバーにアクセスすることで動作する LANにあるサーバーにアクセスするときに Firefox の環境にてエラーが発生する LAN内へのサーバーへのアクセスは、HTTPsを用いた通信であり、Firefox側にすでに証明書が入っている LAN内へのサーバーへのアクセスは、直接ブラウザでURLを叩く分には正常に動作する LAN内へのサーバーアクセスは、直接のIP指定ではなく、専用にLAN内だけで通用するドメインをあてがっている 試したこと 実装をXMLHttpRequestからfetchに変更 -> 効果なし manifest.jsonのmatchesに拡張機能がアクセスするドメインの追加 -> 効果なし manifest.jsonのpermissionsに対象ドメインを追加 -> 効果あり fetchでsame-origin -> 効果なし let res = await window.fetch(url, { credentials: 'same-origin' }) 現状のmanifest.jsonの例 { "manifest_version": 2, "name": "ext name", "description": "test123", "version": "2.2", "permissions": [ "activeTab", "https://my.domain/*" ], "icons": { "128": "imgs/test.png" }, "browser_action": { "default_popup": "action/pop.html", "default_icon": { "128": "imgs/test.png" } }, "content_scripts": [ { "js": [ "scripts/dist/bundle.js" ], "matches": [ "https://www.target.com/*", "https://my.domain/*", "https://*.my.domain/*" ] } ], "background": { "scripts": ["scripts/background.js"], "persistent": false }, "browser_specific_settings": { "gecko": { "id": "omited" } } } 参考にしたサイトとか Firefox Won’t Open Local IP Addresses? Fix It https://browserhow.com/fix-firefox-blocking-access-to-local-ip-addresses/ (2026年11月4日) Firefox add-on local area network communication capabilities - Stack Overflow https://stackoverflow.com/questions/20060162/firefox-add-on-local-area-network-communication-capabilities (2026年11月4日) 1829925 - AV software Avira breaks websites https://bugzilla.mozilla.org/show_bug.cgi?id=1829925 (2026年11月4日) ローカルLLM (Qwen-3.8-27B) (2026年11月4日)

この記事を作った動機 React + Zustand + TypeScirpt の組み合わせで、Input タグにて躓いたことがあったので記録したい。具体的な症状としては、要素の内容を変更しようとしても、一切微動だにせず、値を変えることができないという症状がある。 問題の挙動 期待する挙動 問題が起こったコード 問題がない部分 // ... <LabelTextEntryItem name="IP / URL" callback={(resultString:string) => { setNetwork((prev) => ({ ...prev, IPorDomainName: resultString })) }} init={getNetwork().IPorDomainName} ></LabelTextEntryItem> // ... 問題がある部分 // ... export function LabelTextEntryItem({ name , init , callback}:{ name:string, init:string , callback:(result:string) => void }){ return <div className="flex flex row mb-4"> <div className="label text-xl noSelect">{name}:</div> <div className="ml-auto"> <HoverAnimation> // 問題の箇所 -------------------- // 問題の箇所 -------------------- <input className="ml-auto text-xl w-30" id="entry" value={init} type="text" onChange={(event:ChangeEvent<HTMLInputElement>) => { callback(event.target.value) }}></input> // 問題の箇所 -------------------- // 問題の箇所 -------------------- </HoverAnimation> </div> </div> } // ... 解決に至った方法 問題が再現する条件として、Zustandで定義したストアの内容をInputタグにて表示するときにvalueの引数としてそれを指定していることがある。解決のためには、defaultValueとしてZustand内の内容を表示するようにすることで解決された。なぜこれで症状が解決するのかは分かってない。コンソールでコールバックが呼ばれたときの内容を確認してみたところ、valueとして引数にZustandの内容を与えても、値自体は更新された値がコールバックに正しく伝達できていることが確認でき、コールバック内の値の更新処理が上手くいかない理由が不明である。defaultValueとvalueのinputタグにおける違いとは多分値の拘束力なのではないか？と思われる。valueに固定値を指定してしまうと、編集不能になるとかでもあるのだろうか？ ...

ツール本体 Keyboard Event Tester Key Value Key: null Code: null Bool Value alt: false ctrl: false meta: false shift: false このツールを作った動機 JavaScript におけるキーボードに関するイベントの戻り値がどうなるか確認できるツールが欲しかったので作っただけである。もともとは、CapsLock を ESC キーとして割り当てる (Keyd,Linux)においてキーボードの再割り当てがうまくいっているか確かめるためのツールとして作っただけである。 ...

この記事を作った動機 最近ちょっとした JavaScript のツールを作って使おうとしたところ、直接 HTML の文字列を innerHTML として渡すことができないことが分かった。 今の私の理解だと XSS(Cross Site Scripting) 対策のためにテキストデータとして紛れた悪意のある CSS や JavaScript コードなどを実行(反映)しないようにするために、追加された仕組みに引っかかったという認識である。“ポリシー"なるものを定義して、innerHTMLとかに設定されるテキストデータであったHTMLの文字列などを、事前に任意に定義した createHTML などの関数を通して、テキストデータの HTML化などを承認？するような動作を実装する必要があるというイメージである。 エラー内容 function setStyle(){ let style = document.createElement("style") style.innerHTML = ` .positive{ background: red; text-decoration: underline; } .negative{ background: blue; text-decoration: underline; } ` document.body.appendChild(style) } setStyle() // This document requires 'TrustedHTML' assignment. The action has been blocked. 暫定的な対処 以下はとにかく、自分で書いたスクリプトをすぐ動かしたい場合で、動作検証やプライベート目的で、理解したうえで利用することを想定したコード例であり、実用ではセキュリティの問題になるので真面目に悪意のあるコードが実行されないように createHTML などの定義を書く必要がある。 const policy = trustedTypes.createPolicy("my-policy", { createHTML: (s) => s, createScript: (s) => s, }); function setStyle(){ let style = document.createElement("style") style.innerHTML = policy.createHTML(` .positive{ background: red; text-decoration: underline; } .negative{ background: blue; text-decoration: underline; } `) document.body.appendChild(style) } setStyle() 参考にしたサイトとか This document requires ‘TrustedHTML’ assignment. · Issue #482 · killergerbah/asbplayer https://github.com/killergerbah/asbplayer/issues/482 (2026年2月18日) asbplayer/extension/src/pages/youtube-page.ts at dd5f49f3ab97cd5b1eefa2cde113704a125e69b5 · killergerbah/asbplayer https://github.com/killergerbah/asbplayer/blob/dd5f49f3ab97cd5b1eefa2cde113704a125e69b5/extension/src/pages/youtube-page.ts#L18 (2026年2月18日) TrustedTypePolicyFactory: createPolicy() method - Web APIs | MDN https://developer.mozilla.org/en-US/docs/Web/API/TrustedTypePolicyFactory/createPolicy (2026年2月18日) TrustedTypePolicy - Web APIs | MDN https://developer.mozilla.org/en-US/docs/Web/API/TrustedTypePolicy (2026年2月18日) Trusted Types API - Web APIs | MDN https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API (2026年2月18日)

この記事を作った動機 最近以下の組み合わせでフロントエンドを簡易的に書くということをしていた。 Vite React TypeScript Tailwind CSS zustand それでとりあえず機能的な意味では最低限適当にとりあえず動くという意味ではできたので、気軽に使えるようにしたいと思い、HTTPサーバとか一時的に立てずに、すぐに使えるようにしたかったので、一つのバイナリとしてまとまっていると良いと思った。 そこで色々試したところ、プロジェクト内にElectornプロジェクトを新規作成して、作ったコードをその中のRenderというフォルダ内にそのままコピーし、それをelectron-builderを使って各プラットフォーム向けに一つのバイナリとして作れそうだと調べてみて思った。それでいつものようにそれを実際にやって動くまでがめんどくさかったのでその記録を取る。 バイナリ完成までの試した手順 ※ コマンド実行における作業ディレクトリはViteプロジェクトのルートとする。 Vite プロジェクトを用意する プロジェクトの新規作成 npm create vite # Need to install the following packages: # create-vite@8.2.0 # Ok to proceed? (y) y # # # > npx # > "create-vite" # # │ # ◇ Project name: # │ createElectornAppTest # │ # ◇ Package name: # │ createelectornapptest # │ # ◇ Select a framework: # │ React # │ # ◇ Select a variant: # │ TypeScript # │ # ◇ Use rolldown-vite (Experimental)?: # │ No # │ # ◇ Install with npm and start now? # │ No # │ # ◇ Scaffolding project in /home/username/work/createElectornAppTest... # │ # └ Done. Now run: # # cd createElectornAppTest # npm install # npm run dev ライブラリのインストール npm install zustand npm install tailwindcss @tailwindcss/vite npm install # Command not found が出てきたとき Tailwind CSS の設定 以下を参考にして Tailwind CSS を機能するように設定する。 ...

この記事を作った動機 React で作った Web アプリを Android に移植しようとしたら超絶めんどくさかったので、記録するだけ。 自分の試した構成 Vite React TypeScript Android Studio (with SDK) npm create vite@latest 使った汎用コマンド集 すべての環境変数をリスト (Windows,PowerShell) gci env:* | sort-object name 環境変数を新規作成 (Windows,PowerShell) # 具体例 ANDROID_HOME にパスを設定する $env:ANDROID_HOME = "C:\Users\[userName]\AppData\Local\Android\Sdk" 特定の環境変数に対してパスを追加 (Windows,PowerShell) # 具体例 ANDROID_HOME にパスを追加設定する $env:ANDROID_HOME += ";C:\Users\[userName]\AppData\Local\Android\Sdk" 準備 Capacitor を使えるようにする 必要なパッケージのインストール npm i @capacitor/core npm i @capacitor/android 初期化する npx cap init android 向けに初期化する npx cap add android ANDROID_HOMEを設定する エラー例 Android SDK のパスが、ANDROID_HOMEとして環境変数に設定されていない場合は、以下のようなエラーが出てくる。 npx cap build android # × Running Gradle build - failed! # [error] # > Configure project :app # WARNING: Using flatDir should be avoided because it doesn't support any meta-data formats. # > Configure project :capacitor-cordova-android-plugins # WARNING: Using flatDir should be avoided because it doesn't support any meta-data formats. # FAILURE: Build failed with an exception. # * What went wrong: # Could not determine the dependencies of task ':app:bundleReleaseResources'. # > SDK location not found. Define a valid SDK location with an ANDROID_HOME environment variable or by setting # the sdk.dir path in your project's local properties file at 'C:\Users\userName\work\TODOListApp\TODO # List\android\local.properties'. # * Try: # > Run with --stacktrace option to get the stack trace. # > Run with --info or --debug option to get more log output. # > Run with --scan to get full insights. # > Get more help at https://help.gradle.org. # BUILD FAILED in 1s ...

この記事を作った動機 最近適当に自分で作って使っていたChrome拡張機能がyoutube上で動作していないことが分かった。それで、調べてみると、CORSに引っかかっていた。そのことについて、さらにどうしたらいいか探ると、思ってたのと違う原因だったのでそのことを記録したいと思ったところ。 最初は、バックエンドサーバ側のもともとCORSを通すようにしていた設定がいい加減すぎるのが良くないのかなと思っていたが、私の環境の場合、クライアント側(Google Chrome)に原因があった。 クライアントから許可を出す プライベートネットワークを介してのバックエンドへのアクセスは、Google Chrome の場合、明示的に許可を出さないと、以下のようなエラーで引っかかる。 Access to XMLHttpRequest at 'urlName' from origin 'https://www.youtube.com' has been blocked by CORS policy: Permission was denied for this request to access the `unknown` address space. 許可を出すには、以下のようにして設定項目を探す。すでにLocal network accessの項目がこの時点で見えている場合はそこから設定しても問題ない。 この時点で、Local network accessの項目が見えない場合は、Settingsに進み、以下のようになるよう設定する。 バックエンドの実装 簡易的な実装として PHP を使い以下のようにCORSに関する実装をしている。この実装と、上記の設定でとりあえず動くところまではできた。 // CORS setting header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, POST, OPTIONS'); header("Access-Control-Allow-Headers: X-Requested-With"); header("Access-Control-Allow-Private-Network: true"); header("Access-Control-Allow-Credentials: true"); if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { http_response_code(200); exit(); } 参考にしたサイトとか なんとなく CORS がわかる…はもう終わりにする。 #JavaScript - Qiita https://qiita.com/att55/items/2154a8aad8bf1409db2b (2025年11月4日) getting cors issue no matter what [433208907] - Chromium https://issues.chromium.org/issues/433208907 (2025年11月4日)

この記事を作った動機 Date クラスの仕様で、引っかかった部分があるのでそのことについて記録をする。具体的には、getMonthメンバ関数を使おうとしたとき、思っているのとは違う結果になったというのがある。 内容 Date クラスの getMonth関数は、MDNに書かれているように、ゼロからスタートする値である。1月は、この関数の戻り値として、0 と表現され、12月は 11 として表現される。 The return value of getMonth() is zero-based, which is useful for indexing into arrays of months, for example: 具体的に引っかかったところ createDateStringという関数を作っていて、文字列として"YYYY/MM/DD"のような形式で今いつかということを返すようにしようとしていた時、月の部分が一つ前になっていることに気づいた。 createDateStringを実行した日を2025/10/29として、問題のあるコードと、そうでないコードの違いを以下に示す。 問題のコード 帰ってくる戻り値は、2025/9/29。 export function createDateString(){ // yyyy/mm/dd const currentDate = new Date() let dateString = "" dateString += String(currentDate.getFullYear()) + "/" dateString += String(currentDate.getMonth()) + "/" dateString += String(currentDate.getDate()) return dateString } 修正したコード 帰ってくる戻り値は、2025/10/29。 export function createDateString(){ // yyyy/mm/dd const currentDate = new Date() let dateString = "" dateString += String(currentDate.getFullYear()) + "/" dateString += String(currentDate.getMonth() + 1) + "/" dateString += String(currentDate.getDate()) return dateString } 参考にしたサイトとか Date - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date (2025年10月29日)

この記事を作った動機 Websocket を使ったフロントエンドで、自動的に接続が途切れたら再接続するコードを書くときに躓いたので、その記録をする。 Websocket の接続に関するエラーハンドリング Websocket が接続失敗したときに、やらせたい処理がある場合は、try-catch は使えない。接続に関する問題に対処するには、コールバック関数として、“error"イベントが発火されたときに処理を登録する必要がある。 Websocket は、非同期で実行されるため try-catch では接続できなかったときのエラーを拾えないようである。 うまくいかない例 // この例だと、reconnect 関数が実行されることはない。この形だと、WebScoket クラスに渡したパラメータ異常しか拾えない。 const setWebsocket = useDatabaseStore.setState; try{ const websocket = new WebSocket("ws://localhost:50097") setWebsocket({ websocket: websocket }) }catch(e){ console.log(e) reconnect() } うまくいく例 const setWebsocket = useDatabaseStore.setState; const websocket = new WebSocket("ws://localhost:50097") websocket.onerror = () => { reconnect() } setWebsocket({ websocket: websocket }) const setWebsocket = useDatabaseStore.setState; const websocket = new WebSocket("ws://localhost:50097") websocket.addEventListener("error",reconnect) setWebsocket({ websocket: websocket }) 参考にしたサイトとか ChatGPT https://chatgpt.com/ (2025年9月29日) WebSocket: close イベント - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/WebSocket/close_event (2025年9月29日) WebSocket: error イベント - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/WebSocket/error_event (2025年9月29日) WebSocket: WebSocket() コンストラクター - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/WebSocket/WebSocket (2025年9月29日)