Idea

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 一応ここには現時点で考えている発想について適当にまとめているだけである。新しくわかったこととか調査結果をもとに、後からまとめなおする必要がある。 ポイント サーバクライアントモデル UI 処理をするクライアント（クライアント側） OS依存のAPIや実装のためのバックエンド（クライアント側） データ関連のバックエンド（サーバー側） P2P オープンなデータ構造 JSON や XML などをサポートしたい human readable な仕様にしたい 大きなバイナリデータとかはどうするかが課題 それについては、Unityみたいに各ファイルにメタ情報付きでディレクトリ構造を形成して管理してみてもいいかもしれない。 拡張可能 テキストや画像、インクオブジェクトだけでなく、独自のバイナリ構造を持つファイルや、独自のガジェットやオブジェクト的なものも扱えるように、機能を追加できる仕様にしたい。 バージョン管理にgitを使う？ 基本的なアーキテクチャ x11みたいなサーバークライアントモデルな構造にしたい。 フロントエンド chromeやfirefoxなどのブラウザ、Electornなどを使う。vite,react,typescriptとかだと比較的モダンに仕上がると思う。 バックエンド 適当にpythonとかphpでもいいので、データ処理とOS固有のAPIの抽象化と呼び出しを担う 基本的なデータ構造 ノート構造 Notebooks Section Pages1 Pages2 … ページ構造 基本的には、汎用の位置情報などを保持するオブジェクトが定義され、それを継承することで、テキストや画像、動画、PDF、インク、3D view(include pmx and blender ext files -> three.js) バイナリデータなどをそれぞれ専用のクラスを用意し、扱う。 基本的なUI機能や入力など ファイルのドラックアンドドロップ 貼り付け、コピー InkAPI マウス、キーボード、タッチ 複数ウィンドウ 長時間の処理時間がかかるものは進捗表示と非同期処理 -> ユーザーに不快感を与えない、心配させない UI/UX 機能の在り方について いろいろ気になる機能があるが、詰め込め過ぎても仕方ないという印象。人はいろいろ選択肢があると、選べなくなるということを考慮すると、ある程度制約のある仕組みや、あえて実装しない機能を決めたり、使い方を制限するところも必要であると考えられる。 労力的な問題について 正直 OneNote の代替を一から作るみたいなのより、Obsidian のプラグインを不満点を反映してガンガン作っていったほうがいいんじゃないか説ある。 Obsidian は少なくとも、プログラム本体自体のソースコードなどは公開されていない、closed source なようなので、アーキテクチャ的にも新しく作ったほうが都合がいいかもしれないということになり、現在作業中（2025/9/8) ...

この記事を作った動機 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ファイルでも設置しようかと悩んだ。 ...

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 既存の代替っぽいもの(全てはリストアップしていない) Google keep 数カ月ほど使ったことはあるが、使っていくうちに古いメモが下の方に行き、しかも、せっかくメモの付箋を書いたのに、あとから見返さないという問題があった。 一応メモを色やピン留め、リマインドという形で分類したりできるという機能はある。情報が少ないうちはいいかもしれないが、あまり大規模なことはできないという印象がある。 逆に言えば、Google keep 的な付箋スタイルUIや機能は、プロジェクト単位での軽いタスクの管理としては、一つありかもしれないあり方ではあった。 今回のソフトウェア？では、Google keep みたいなUIや機能をもたせた特別な”ページ”をテンプレとして選べて作れ、タスク管理の一助として使えるようにするのはありかもしれない。 実装としては、ページを拡張できるように色々インタフェースを定義したりAPIを定義したりとかになる気もする。 Evernote 聞いたことはあるが、使ったことはない。私の印象としては、使うとロックダウンされてしまいそうなので使いたくないという印象だった。 Notion 一ヶ月ほど使ったことはあるが、AI機能が、意思にかかわらずに有効になっていたり、記録した内容にいちいち”良くする”というスタンスで干渉してくるところが嫌であった。 かつ、クラウドベースで、オフラインやローカル、LAN内だけで完結するインターネットのない環境で、プライベートに完結することを許さない感じが、どこか監視されているようで閉塞的でかなり息苦しいと感じられる。 Obsidian これはあまり深く使い込んだことはないが、研究に際して調べている過程で見つけたので、試してみた。そのことについては、Obsidianについてに記録した。 気になるもの 大体になるかは置いといて、気になるサービスなどについても挙げておく。 Basecamp なんか、google docs や Notion など、ありとあらゆる既存のサービスについての代替を主張していて、サービスが機能として内包しているプロジェクト管理などについて気になるところがある。 Basecamp: Project management software, online collaboration https://basecamp.com/ (2025年8月1日) 既存の代替品の候補としてよく挙げられるツールの共通点 商業ベース クラウド ローカルで動かすことを前提としてない クラウドベースだとAIモデルの学習にデータが使われてしまう可能性 最初は無料としつつも、あとからしつこく課金させるビジネスモデルへの誘導がある可能性 クラウド系だとサービスが潰れたとき、データ消失、非互換の恐れ ある程度包括的にOneNoteの機能を持っているものはなく、いくつかの独自の設計や思想に基づいたものが乱立している印象 参考にしたサイトとか Download - Obsidian https://obsidian.md/download (2025年7月19日) Best Microsoft OneNote Alternatives in 2025 | Nuclino https://www.nuclino.com/alternatives/onenote-alternative (2025年7月19日) Best 6 OneNote Alternatives In 2025 | 100+ Personally Tested Tools https://thebusinessdive.com/onenote-alternatives (2025年7月19日) 最高のノートアプリ - Evernoteでノートを整理しましょう https://evernote.com/ja-jp (2025年7月19日) Basecamp: Project management software, online collaboration https://basecamp.com/ (2025年8月1日)

この記事を作った動機 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) が発生している。 ...

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 OneNoteの代替として考えられるものとして、Obsidian というソフトウェアがあることが、研究について調べたり考えたりしている段階で分かった。 そこで実際にインストールし、ちょっと触ってみたところ、参考になりそうなポイントがありそうだったので、専用にまとめる記事を作った次第である。 今わかること vault とは? Obsidian でいうところの vault とは、OneNoteでいうノートブック相当であると思われる ページの種類 OneNoteとは異なり、ページのテンプレートにバリエーションがある。デフォルトだと以下の二つが確認できた。 markdown “note"として、マークダウン形式のコンテンツを追加可能である。drag and drop もでき、以下のように様々なコンテンツが扱える。 画像と動画の埋め込みコンテンツの例 添付ファイルと3Dモデルとテキストの例 canvas 画像や動画、obsidian 内で書いた markdown コンテンツなど、様々な形式のファイルを配置したり添付することができる。ファイルに対して obsidian がデフォルトで対応していたり、プラグインなりが入っていてプレビューできる場合はその内容を見ることもできる。 以下の項目について、実際に試した例も今回はここに置いておくことにした。 画像 動画 json拡張子を持ったテキストファイル markdown ファイル obsidian 内の markdown コンテンツ テキスト canvasの例 タグ機能 タグでコンテンツが管理可能である。markdown と canvas の両方のタイプのページで利用可能なようである。 タグ検索機能の例 手書き機能 (プラグイン) Obsidian デフォルトでは、手書き機能がついていないが、プラグインとしては存在していることが分かった。ほかにもあるかもしれないが、試したのは今のところこれだけ。 ...

この記事を作った動機 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 秒後に再試行する仕組みにした。 ...

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 OneNoteの代替を作りたいというところから出発したので、OneNote自体について調べる必要があると思ったため。 私のOneNoteの利用例 OneNote は Office 365などに含まれていて、有償版とMS store からダウンロードできる無償版の2種類がある。無償版はしつこく MS 365 に課金するように催促される。 windows 環境であればローカルにデスクトップ版をインストールし、今までのOffice 2021とか、Office 2007みたいに使うこともでき、OneNote も同じ感じである。クラウド機能もあるらしいが、私は大抵のクラウドサービスには否定的で明るくないので、使ったことはない。 私がOneNoteを使っていたときは、半期ごとにノートを分けて、その中に授業ごとのセクションを作り、ページで細かい授業単位のデータ管理をするという感じであった。 階層構造の利用例 OneNote利用例 様々な入力やメディアを扱える例 気になる機能 階層的なコンテンツ管理 ノートブック セクション ページ … 階層構造の利用例 Office 系列と似たような書式フォーマットや操作 インク機能のインターフェイス（全体表示のとき） インク機能のインターフェイス-全体表示の時 自由なオブジェクトの配置 以下は、ある授業のレポートでネットワークの設定や構成について、与えられた課題にどう取り組んだのか説明する必要があった時の例である。画像をいろんなところに自由に配置し、インク機能を使って書き込み、一枚の絵として説明を完成させた。 自由なオブジェクト配置の例 書き込み可 今回はPDF資料の上に、インク機能で書き込む例をいかに示す。このようにして自由にいろんなものを重ね合わせて扱うことができる。 インクと画像-書き込める例 マルチメディアサポート ペンタブレット 画像、動画、テキスト バイナリファイル添付 様々な入力やメディアを扱える例 ストローク消しゴム ink 機能では、ただ部分的にペイントソフトと同じように線とか描いたものを消せるだけじゃなくて、ストローク単位で一気に消したりできるのは、正直大きい。 ...

この記事を作った動機 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を作った。まだボタンがあるだけで、ファイルのプレビューを開いたり、タグの追加や削除、タグに付随するページをリスティングする機能は付いていないが、一応形は作ってみた。 ...

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 これについては一旦なしとする。 参考にしたサイトとか 今のところ特になし。

この記事を作った動機 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 ページの実装 ...