Struggle

この記事を作った動機 2025/9/10 から、今日に至るまでの間で OneNote 代替に関して、実装をするなど研究を進めているうちにわかったことなどを簡易的に記録する。 Networking フロントエンドがレスポンスを識別できない可能性 作っている途中でわかったこととして、今回の websocket による実装だと、無数の React コンポーネントがデータサーバに対してリクエストを送った場合、どのコンポーネントがリクエストを送ったのかレスポンスが帰ってきたときにわからないという問題があった。 具体的には、リクエストに対して、”誰”がリクエストを送ったのかという識別子がないことと、バックエンドからメッセージが帰ってくると一斉に、addEventListener で onmessage イベントを待っているコンポーネント全体にメッセージが届いてしまい、結果としてレスポンスの受け取りで整合性が取れなくなるというものである。 そこで今回は、各リクエストに対し、UUIDを付与し、データサーバから返信するときはそのUUIDとリクエストしたコマンド名をレスポンスに含めるようにすることで、フロントエンドの各コンポーネントが自分が送ったリクエストかどうか識別できるようにした。 ちなみに今回のような問題は HTTP プロトコルで実装すると起こらなそうである。 パフォーマンスの懸念 フロントエンド側の websocket の addEventListener の onmessage イベントは現状の実装だと、コンポーネントの数次第でその数だけコールバック関数があり、処理が走ることになる。 そのため、その数だけ自分に対するリクエストのレスポンスかどうか識別することになり、パフォーマンスにおいて懸念がある。とりあえずは顕著になるまではこの問題はおいておこうと思う。 データサーバとフロントエンドが分離しているアーキテクチャについて 現状のアーキテクチャだと、例えばリモートのデータサーバにアクセスしていて、必ずしもネットワークが安定していなかったり、一時的にオフラインになる可能性がある環境において、安定しないことが考えられた。 そこで、ローカルでスタンドアロンで動かすときと、データサーバがVPN経由などで遠隔地にある場合の２つで異なる考え方をすることにしてみた。 スタンドアロンでデータサーバもローカルで動いているとき 単純にデータサーバが一つ起動し接続される。 データサーバがリモートにあるとき フロントエンドが動いているクライアント側にもcacheとしてデータサーバーがある。開いたページやインデックスを保持したりする。 フロントエンドは、リモートのデータサーバと直接通信せず、フロントエンド側にあるデータサーバからリダイレクトしてもらうように指示する。 cacheは通常のノートブックと同じようなデータ形式で保存する。 cacheには、notebook を保存する場所にしてされたフォルダ内に、サーバーごとに専用のフォルダが作られる。 serverName はホスト名やIPアドレスとする。 notebooksFolderRoot localNotebook1 localNotebook2 localNotebook3 … serverName-cache remoteNotebook1 remoteNotebook2 remoteNotebook3 … 各ページと各ファイルのメタデータ メタデータの扱いで悩んだこと。info と pageInfo コマンドを作っていて悩んだことがある。 各ページのメタデータ 今の仕組みだとpageとしては、markdown 形式と、独自に自由に定義できる json 形式のものがあり、json形式の物に関してはどんなファイルが添付されているかとか、どんなタグが付いているかとか、独自に定義して、容易に管理することが可能である。 { "pageType": "free", "tags": ["This","is","testpage"], "files": ["testfile.txt"], "pageData":{ /* page data */ } } しかし、markdown については、あんまり markdown に特殊なデータを埋め込みたくないことから、専用の.metadataファイルでも設置しようかと悩んだ。 ...

この記事を作った動機 2025/9/10 から、今日に至るまでの間で OneNote 代替に関して、実装をするなど研究を進めているうちにわかったことなどを簡易的に記録する。 nested dict (python) dict 型のデータ内部に、dict型のデータを単純にネストすることはできないようである。何かしらの方法でアクセスできないデータが dict型のデータの内部で発生すると、以下のようなエラーが出るようである。 <<<{"command":"info","UUID":"94035132-f796-4b75-bb16-6619d8bf7bc1","data":null} connection handler failed Traceback (most recent call last): File "/usr/lib/python3.13/site-packages/websockets/asyncio/server.py", line 376, in conn_handler await self.handler(connection) File "/home/username/work/OneNoteAlternative/firstPrototype/backend/dataServer/main.py", line 13, in mainLoop await receiveLoop(websocket,controller.controler) File "/home/username/work/OneNoteAlternative/firstPrototype/backend/dataServer/helper/netwrok.py", line 23, in receiveLoop await callback(message,websocket) File "/home/username/work/OneNoteAlternative/firstPrototype/backend/dataServer/controller.py", line 41, in controler await commands[requestedCommand](request,websocket) File "/home/username/work/OneNoteAlternative/firstPrototype/backend/dataServer/commands/info.py", line 88, in info "data": { ^ notebookJSONinfo ^^^^^^^^^^^^^^^^ } ^ TypeError: unhashable type: 'dict' notebookJSONinfo の中身 { 'test':{ 'name': 'test', 'createDate': '2025/09/13', 'updateDate': '2025/09/13', 'id': 'bb6f7d1c-c722-495c-923b-ab9e9574ef5b', 'pages': ['test.md', 'test.json'], 'files': ['testfile.txt'] } } 問題のコード 以下の状態だと、data key の中に、アクセスできないデータ (notebookJSONinfo) が発生している。 ...

この記事を作った動機 2025/9/24 から、今日に至るまでの間で OneNote 代替に関して、実装をするなど研究を進めているうちにわかったことなどを簡易的に記録する。 フロンエンド関連 動作の様子 ネットワーク関連 データの扱いを変更 websocket 経由でデータサーバとフロントエンドがやり取りする型をフロントエンド側に拡張する前提で汎用的に定義した。自分で data key の項目は書かなければならない。(database.tsx) // frontend -> dataserver export interface baseResponseTypesFromDataserver{ status: string; errorMessage: string; UUID: string | null; command: string | null; } // frontend -> datasever export interface baseRequestTypesFromFromtend{ command: string, UUID: string, } // dataserver -> frontend export interface baseInterruptRequestFromDataserver{ componentName: string, command: string, UUID: string } 以下は、(createNotebook.tsx) における baseResponseTypes の例 import { type baseResponseTypes } from "../network/database"; interface pageType extends baseResponseTypes{ data: [] } ネットワーク送信処理の共通化 database.tsx で共通の websocket でデータをバックエンドサーバに送るための専用のコードを書いた。接続中や切断されていてまだ再接続がされていないときは、 interval 秒後に再試行する仕組みにした。 ...

この記事を作った動機 2025/10/2 から、2025/10/9 に至るまでの間で OneNote 代替に関して、実装をするなど研究を進めているうちにわかったことなどを簡易的に記録する。 動作の様子 (フロントエンド) TODOs 2025/10/9 になる間やる項目たち。やりきれなかった分は次に持ち越し。 主な項目 ノートブック作成機能のバグチェックと修正 ノートブック、ページ関連における作成、削除、コピー名前の変更があった時、selector の情報やページviewを更新するようにする ページ作成機能の実装 フロントエンド バックエンド 新しい階層構造を指定できるようにする linux だけでなく windows 環境において、再帰的にフォルダを作成できるようにする。 ノートブック削除機能の実装 フロントエンド バックエンド ページ削除機能の実装 フロントエンド バックエンド markdown における編集機能、データセーブ（更新）の実装 フロントエンド (buggy) バックエンド Selector に未保存の表示を行う 別のページを開いても未保存のデータのバッファが管理されるようにする 内部構造を説明する図を作る フロントエンド バックエンド free ページの実装 フロントエンド バックエンド 他の事項 File API 周りの実装 マルチメディアの対応 messagebox の実装 やったことの詳細 ページ作成機能の実装 フォームを実装した。 とりあえずフロントエンド周りのネットワーク関連も実装して、あとはバックエンドのみ。 バックエンド、フロントエンド両方とも、とりあえず動くところまでできた。 ノートブック削除機能の実装 フォームを実装した。 とりあえずフロントエンド周りのネットワーク関連も実装して、あとはバックエンドのみ。 バックエンド、フロントエンド両方とも、とりあえず動くところまでできた。 ページ削除機能の実装 フォームを実装した。 とりあえずフロントエンド周りのネットワーク関連も実装して、あとはバックエンドのみ。 バックエンド、フロントエンド両方とも、とりあえず動くところまでできた。 編集機能、データセーブ（更新）の実装 全体 編集機能は、各ページで独自実装するようにした。 ToggleToolsBar に edit 項目を追加し、各ページの独自実装の機能を呼び出せるようにした。 page.tsx にて、新しいページを開いたときは、ToggleToolsBar の edit は新しいページが新たにツールを登録するために toggleable のクリーンアップだけするようにした。 -> 不具合の温床になっているっぽかったので、toggleable を設定したコンポーネントが自分で、コンポーネントが消されるときに toggleable を外すようにした。 データサーバー側は、単純にフロントエンドが送りつけた文字列をセーブデータとして扱う簡易的な仕様にすることにした。一応最低限のメタデータが存在するかはチェックするが、データ本体の整合性に関しては、フロントエンドに責任があることと現状ではしている。 とりあえず、markdown 形式のページについては動作するところまでupdatePageコマンドを実装し終えた。ただ、freeページに代表される、json 形式のページも実装はあるがまだ動くかテストできるほどフロントエンドが完成していないため、それについてはあとからテストする必要がある。 markdown ページ preview splitView editorView を選択できるようにした。 取得した markdown データは直接扱わず、markdownBuffer という状態変数によって中間的に管理することで、編集時に変更が反映できる仕組みにした。 highlight.js を使って、マークダウンをハイライトしようとした。 とりあえず、ctrl + S を押したり、セーブボタンを押せば、本当にページが保存されるところまではできた。 内部構造を説明する図を作る とりあえずバックエンドは、現状の範囲で書き出した。 ページの基本情報を表示 作成当時 ページに付いているタグやファイルなどを管理するUIを作った。まだボタンがあるだけで、ファイルのプレビューを開いたり、タグの追加や削除、タグに付随するページをリスティングする機能は付いていないが、一応形は作ってみた。 ...

この記事を作った動機 2025/10/9 から、2025/10/16 に至るまでの間で OneNote 代替に関して、実装をするなど研究を進めているうちにわかったことなどを簡易的に記録する。 動作の様子 (フロントエンド) TODOs 2025/10/16 になる間やる項目たち。やりきれなかった分は次に持ち越し。 主な項目 ページ作成機能の実装 linux だけでなく windows 環境において、再帰的にフォルダを作成できるようにする。 -> winpath = someFullAbsolutePath.replace("//","/").replace("/","\") mkdir helper 関数の実装 編集機能、データセーブ（更新）の実装 バッファーのデータストアを実装 別のページを開いても未保存のデータのバッファが管理されるようにする 内部構造を説明する図とかドキュメントを作る フロントエンド 共通のUIについて、使い方の説明について、ドキュメントを書いた。 overlayWindow messagebox toolsbar page drawio で説明する図を作る とりあえず図を書くための準備をした。 他人が構造の理解に必要な分を記録できたか z-index について、どのような割り当てになっているか記録 バックエンド(更新) 新たに追加した、task の仕組みについて、ドキュメントを整備する。 free ページの実装 ...

この記事を作った動機 2025/10/16 から、2025/10/23 に至るまでの間で OneNote 代替に関して、実装をするなど研究を進めているうちにわかったことなどを簡易的に記録する。 動作の様子 (フロントエンド) TODOs 2025/10/23 になる間やる項目たち。やりきれなかった分は次に持ち越し。 主な項目 編集機能、データセーブ（更新）の実装 別のページを開いても未保存のデータのバッファが管理されるように各ページタイプを実装する 内部構造を説明する図とかドキュメントを作る フロントエンド drawio で説明する図を作る 他人が構造の理解に必要な分を記録できたか バックエンド(更新) 新たに追加した、task の仕組みについて、ドキュメントを整備する。 free ページの実装 フロントエンド 共通のUIについて、使い方の説明について、ドキュメントを書いた。 overlayWindow messagebox toolsbar page オブジェクト変形用に汎用的なコンポーネントを定義する。カーソルがオブジェクトをホバーしているときに出現するようにする。タッチでは、一回タップで出現。（サイズ変更、移動） 移動について実装 リサイズ機能についての実装 右下について実装 (とりあえずこれだけにするかも) 下について実装 右について実装 左上について実装 （正しくitemを更新できないバグありで解消中） 左について実装 上について実装 左下について実装 右上について実装 編集モードを各アイテムの要素の種類ごとに実装。汎用的には、ダブルクリックされた場合に編集モードに移行するようにする。タッチではダブルタッチで移行する. フロントエンドを拡張するうえで重要そうな zustand のデータストアの仕様リストを作り、記録を行う。 バックエンド selector の改善 ...

この記事を作った動機 2025/10/23 から、2025/10/30 に至るまでの間で OneNote 代替に関して、実装をするなど研究を進めているうちにわかったことなどを簡易的に記録する。 動作の様子 TODOs 2025/10/30 になる間やる項目たち。やりきれなかった分は次に持ち越し。 メイン（持ち越し、新規混合） free ページの実装 フロントエンド 共通のUIについて、使い方の説明について、ドキュメントを書いた。 overlayWindow messagebox toolsbar page オブジェクト変形用に汎用的なコンポーネントを定義する。カーソルがオブジェクトをホバーしているときに出現するようにする。タッチでは、一回タップで出現。（サイズ変更、移動） 移動について実装 △ リサイズ機能についての実装 右下について実装 (とりあえずこれだけ) 編集モードを各アイテムの要素の種類ごとに実装。汎用的には、ダブルクリックされた場合に編集モードに移行するようにする。タッチではダブルタッチで移行する. 実際に変更があったら、変更内容をリアルタイムで保存するようにする。 別のページを開いたときとかに、バグって変なタイミングでデータを保存しようとするのを止める セーブする際に、ページのUUIDが一致するか確かめてからセーブする。 書式設定に関する edit toggleable を作る。文章をどこに寄せるかとか、フォントサイズとか、フォントカラーとかそういう細かい設定ができるようにする。 アイテムが何もないページにおいて、アイテムの追加時に、どんなアイテムタイプが利用可能か取得するのに失敗するのをどうにかする。 リアルタイムセーブがバグることについて調査する。別のページを開いたとき、Freeページコンポーネント自体やその変数の中身が、どういう状態になっているのかを調べる。 Metadata を表示できるようにする Free ページの要素について、基本要素の項目にアイテムの色をRGBAで設定できるようにする。 とりあえず、まだ色を変更するUIがないが、RGBAとしてCSSスタイルを設定してアイテムごとの色を反映するようにFreeページの実装を更新はした。 色を設定するUIや項目へのアクセスボタンを実装する。 編集機能、データセーブ（更新）の実装 ...

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 2025/10/30 から、2025/11/6 に至るまでの間で OneNote 代替に関して、実装をするなど研究を進めているうちにわかったことなどを簡易的に記録する。 動作の様子 (まだ) TODOs 2025/11/6 になる間やる項目たち。やりきれなかった分は次に持ち越し。 メイン（持ち越し、新規混合） free ページの実装 フロントエンド 共通のUIについて、使い方の説明について、ドキュメントを書いた。 overlayWindow messagebox toolsbar page 実際に変更があったら、変更内容をリアルタイムで保存するようにする。 別のページを開いたときとかに、バグって変なタイミングでデータを保存しようとするのを止める セーブする際に、ページのUUIDが一致するか確かめてからセーブする。 書式設定に関する edit toggleable を作る。文章をどこに寄せるかとか、フォントサイズとか、フォントカラーとかそういう細かい設定ができるようにする。 アイテムが何もないページにおいて、アイテムの追加時に、どんなアイテムタイプが利用可能か取得するのに失敗するのをどうにかする。 リアルタイムセーブがバグることについて調査する。別のページを開いたとき、Freeページコンポーネント自体やその変数の中身が、どういう状態になっているのかを調べる。 Metadata を表示できるようにする Free ページの要素について、基本要素の項目にアイテムの色をRGBAで設定できるようにする。 とりあえず、まだ色を変更するUIがないが、RGBAとしてCSSスタイルを設定してアイテムごとの色を反映するようにFreeページの実装を更新はした。 色を設定するUIや項目へのアクセスボタンを実装する。 z-index をちゃんと更新するようにする useFreePageItemsStore の items や activeItems の配列をページごとに分離して管理するようにする。 編集機能、データセーブ（更新）の実装 free ページにおいて、保存が成功するまでは、変更があってから保存されるまでの間に、バッファーを保持するようにする。 バックエンド割り込みの実装 ...

この記事を作った動機 単に、このブログの方針として、”自分が参照するノート”としてメインに掲げているところがある。それで、必ずしも “content/posts/idea/research/onenoteAlternativeCreation/” 配下に収まっているわけではなく、色んな所に関係のある記事が散らばっている。 それらをまとめるために、この記事にリンク集みたいな感じで、散らばってしまっている記事をまとめておこうと思った次第である。 記事リスト React コンポーネント内にネストができる関数コンポーネント 変数 Zustand 状態変数管理ライブラリ Hooks の宣言、定義で躓いたこと Websocket を自動で再接続したい TypeScript Date クラスで躓いたこと