Alternative

この記事を作った動機 2025/12/11 から、2025/12/18 に至るまでの間で OneNote 代替に関して、実装をするなど研究を進めているうちにわかったことなどを簡易的に記録する。 動作の様子 TODOs TODOs 2025/12/4 になる間やる項目たち。やりきれなかった分は次に持ち越し。 メイン（持ち越し、新規混合） バックエンドの実装 ターゲット層を明確にする ネットワーク監視について実装を思いついた案に基づいて進める バックエンドの設定についてフロントエンドにUIを設けたい 全体的なページやノートブックのメタデータなどにおける時間の扱いを全部 UnixTime の秒単位に置き換える フロントエンドのネットワーク周り useDatabaseStoreをuseNetworkStoreに名前を変更する。 send関数をuseDatabaseStore（useNetworkStore）内にあるものに置き換え、旧来のsend関数の実装を廃止する。 createPage.tsxの実装で、ページタイプを取得するとネットワーク周りがバグってリクエストした履歴が消えない結果、未接続の状態として判定されてしまうというバグを何とかする。 free ページの実装 フロントエンド 共通のUIについて、使い方の説明について、ドキュメントを書いた。 overlayWindow messagebox toolsbar page 実際に変更があったら、変更内容をリアルタイムで保存するようにする。 別のページを開いたときとかに、バグって変なタイミングでデータを保存しようとするのを止める セーブする際に、ページのUUIDが一致するか確かめてからセーブする。 書式設定に関する edit toggleable を作る。文章をどこに寄せるかとか、フォントサイズとか、フォントカラーとかそういう細かい設定ができるようにする。 アイテムが何もないページにおいて、アイテムの追加時に、どんなアイテムタイプが利用可能か取得するのに失敗するのをどうにかする。 リアルタイムセーブがバグることについて調査する。別のページを開いたとき、Freeページコンポーネント自体やその変数の中身が、どういう状態になっているのかを調べる。 Metadata を表示できるようにする Free ページの要素について、基本要素の項目にアイテムの色をRGBAで設定できるようにする。 とりあえず、まだ色を変更するUIがないが、RGBAとしてCSSスタイルを設定してアイテムごとの色を反映するようにFreeページの実装を更新はした。 色を設定するUIや項目へのアクセスボタンを実装する。 -> すべてのアイテム共通の設定項目であるため、汎用に設定項目を表示できるpropertiesとは独立して、commonsの一部として実装する。 設定UIで色の一部が正しく表示できていないバグをなおす。 -> padStart commonsが正しく色を更新できないバグを何とかする。 z-index をちゃんと更新するようにする useFreePageItemsStore の items や activeItems の配列をページごとに分離して管理するようにする。 どうしてもzustandを使ったグローバルなアイテム管理が暴走する場合は、Freeコンポーネント内部でアイテムを管理するように実装を変更する。 -> とりあえず zustand を使った実装で続行。 範囲選択の実装 -> activeItemsを操作する 編集機能、データセーブ（更新）の実装 free ページにおいて、保存が成功するまでは、変更があってから保存されるまでの間に、バッファーを保持するようにする。 バックエンド割り込みの実装 updatePageの割り込みがあった時に、どのページがセーブされたかIDをUUIDをデータとして含める updatePageがあったら差分を扱えるように、先にセーブされたデータをバッファーにためるようにして、diffをマージできるようにする データサーバに接続されているかどうかなどの、ステータスインジゲーターを作る データサーバのupdatePageコマンドのUUID検証ロジックについて正しく機能しているか調べる。 データサーバの実装 addTag deleteTag コマンドの実装 queryTag コマンドの実装 前回からの持ち越し 持ち越し分 内部構造を説明する図とかドキュメントを作る ...

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 2025/12/25 から、2025/1/8 に至るまでの間で OneNote 代替に関して、実装をするなど研究を進めているうちにわかったことなどを簡易的に記録する。 動作の様子（まだ） TODOs TODOs 2025/12/4 になる間やる項目たち。やりきれなかった分は次に持ち越し。 メイン（持ち越し、新規混合） バックエンドの実装 ターゲット層を明確にする ネットワーク監視について実装を思いついた案に基づいて進める バックエンドの設定についてフロントエンドにUIを設けたい 全体的なページやノートブックのメタデータなどにおける時間の扱いを全部 UnixTime の秒単位に置き換える フロントエンドのネットワーク周り useDatabaseStoreをuseNetworkStoreに名前を変更する。 send関数をuseDatabaseStore（useNetworkStore）内にあるものに置き換え、旧来のsend関数の実装を廃止する。 createPage.tsxの実装で、ページタイプを取得するとネットワーク周りがバグってリクエストした履歴が消えない結果、未接続の状態として判定されてしまうというバグを何とかする。 free ページの実装 フロントエンド 共通のUIについて、使い方の説明について、ドキュメントを書いた。 overlayWindow messagebox toolsbar page 実際に変更があったら、変更内容をリアルタイムで保存するようにする。 別のページを開いたときとかに、バグって変なタイミングでデータを保存しようとするのを止める セーブする際に、ページのUUIDが一致するか確かめてからセーブする。 書式設定に関する edit toggleable を作る。文章をどこに寄せるかとか、フォントサイズとか、フォントカラーとかそういう細かい設定ができるようにする。 アイテムが何もないページにおいて、アイテムの追加時に、どんなアイテムタイプが利用可能か取得するのに失敗するのをどうにかする。 リアルタイムセーブがバグることについて調査する。別のページを開いたとき、Freeページコンポーネント自体やその変数の中身が、どういう状態になっているのかを調べる。 Metadata を表示できるようにする Free ページの要素について、基本要素の項目にアイテムの色をRGBAで設定できるようにする。 とりあえず、まだ色を変更するUIがないが、RGBAとしてCSSスタイルを設定してアイテムごとの色を反映するようにFreeページの実装を更新はした。 色を設定するUIや項目へのアクセスボタンを実装する。 -> すべてのアイテム共通の設定項目であるため、汎用に設定項目を表示できるpropertiesとは独立して、commonsの一部として実装する。 設定UIで色の一部が正しく表示できていないバグをなおす。 -> padStart commonsが正しく色を更新できないバグを何とかする。 z-index をちゃんと更新するようにする useFreePageItemsStore の items や activeItems の配列をページごとに分離して管理するようにする。 どうしてもzustandを使ったグローバルなアイテム管理が暴走する場合は、Freeコンポーネント内部でアイテムを管理するように実装を変更する。 -> とりあえず zustand を使った実装で続行。 範囲選択の実装 -> activeItemsを操作する 編集機能、データセーブ（更新）の実装 free ページにおいて、保存が成功するまでは、変更があってから保存されるまでの間に、バッファーを保持するようにする。 バックエンド割り込みの実装 updatePageの割り込みがあった時に、どのページがセーブされたかIDをUUIDをデータとして含める updatePageがあったら差分を扱えるように、先にセーブされたデータをバッファーにためるようにして、diffをマージできるようにする データサーバに接続されているかどうかなどの、ステータスインジゲーターを作る データサーバのupdatePageコマンドのUUID検証ロジックについて正しく機能しているか調べる。 データサーバの実装 addTag deleteTag コマンドの実装 queryTag コマンドの実装 前回からの持ち越し 持ち越し分 内部構造を説明する図とかドキュメントを作る ...

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 どういう使い方が考えられるか、私が考えている理想や他にも考えられる用途などの視点から、書いてみるとなんかいいことあるかもしれないと思って、とりあえずまずは記事を作った。 考えられる使い方 私の理想としての視点 他の考えられる用途 参考にしたサイトとか 今のところ特になし。

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 ある程度調査が終わった時に、出てきた不満点についてまとめるためのページで、現時点では調査が終わってないので、何も書かれていません。 方針をとにかくまずは実装してみるということに変えたので、ここは中途半端になるかもしれません。（2025/9/8) いろいろ比較 onenote googlekeep obsidian 見えてきた理想 UI/UX（フロントエンド） バックエンド データ管理 API処理 アーキテクチャ 拡張機能の構成 参考にしたサイトとか

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 主に問題点というか不満点のまとめがまとめ終わった後に具体的にどうしていくか記録するために作ったページです。 状況に応じてまだ問題点というか不満点のまとめの記事がある程度出来上がってない段階でも、思ったことがあればここにいろいろ書いていこうとは思っています。 リポジトリ TODOs main (firstprototype) フロントエンド 接続が途切れたことを検出しネットワーク再接続機能 free ページを実装する ノートブック、ページの追加、削除ボタンの実装 ページ view の実装 ページを編集可能にする実装 メッセージボックスの実装 markdown 表示、編集できる既存のライブラリをフロントエンド向けに探す-> marked バックエンド データサーバからフロントエンドへの通信を実装 コマンドを実装 設定画面をつくる (settings.json tkinter) 記録 typescript における type と interface の違いについて書く。 休止 TODOs 調査 OneNote について調査する Obsidian について調査する Google Keep について調査する Notion について調査する ink API の各ブラウザ間の動作の調査 指針を立てるためのまとめ 取り入れたいことについて、調査をもとにまとめる 不満点について、調査をもとにまとめる 大まかに何をするのか決めていく 最小のデモの要件を作る どんなUI? どんなアーキテクチャ? 何をして、何をしないか？ Proof of Concept を作る どんなデモを作るか決める 参考にしたサイトとか markedjs/marked: A markdown parser and compiler. Built for speed. https://github.com/markedjs/marked (2025年9月26日)

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 研究の過程における ChatGPT の利用記録も、Onenote代替品の作成（旧記事）の方においていたので一応専用に記事を分けて作った感じです。 ChatGPT Open as a page Open as a page 参考にしたサイトとか ChatGPT https://chatgpt.com/ (2025年6月23日)

このページは、古いです。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） 動機 onenoteがプロプライエタリで不自由なので、自分中心の無料の代替品を適当にwebベースで作りたい。 リポジトリ 現時点でのわかることリスト OneNote OneNote は Office 365などに含まれていて、有償版とMS store からダウンロードできる無償版の2種類がある。無償版はしつこく MS 365 に課金するように催促される。 windows 環境であればローカルにデスクトップ版をインストールし、今までのOffice 2021とか、Office 2007みたいに使うこともでき、OneNote も同じ感じである。クラウド機能もあるらしいが、私は大抵のクラウドサービスには否定的で明るくないので、使ったことはない。 私がOneNoteを使っていたときは、半期ごとにノートを分けて、その中に授業ごとのセクションを作り、ページで細かい授業単位のデータ管理をするという感じであった。 階層構造の利用例 OneNote利用例 様々な入力やメディアを扱える例 既存の代替っぽいもの(全てはリストアップしていない) Google keep 数カ月ほど使ったことはあるが、使っていくうちに古いメモが下の方に行き、しかも、せっかくメモの付箋を書いたのに、あとから見返さないという問題があった。 一応メモを色やピン留め、リマインドという形で分類したりできるという機能はある。情報が少ないうちはいいかもしれないが、あまり大規模なことはできないという印象がある。 逆に言えば、Google keep 的な付箋スタイルUIや機能は、プロジェクト単位での軽いタスクの管理としては、一つありかもしれないあり方ではあった。 今回のソフトウェア？では、Google keep みたいなUIや機能をもたせた特別な”ページ”をテンプレとして選べて作れ、タスク管理の一助として使えるようにするのはありかもしれない。 実装としては、ページを拡張できるように色々インタフェースを定義したりAPIを定義したりとかになる気もする。 Evernote 聞いたことはあるが、使ったことはない。私の印象としては、使うとロックダウンされてしまいそうなので使いたくないという印象だった。 Notion 一ヶ月ほど使ったことはあるが、AI機能が、意思にかかわらずに有効になっていたり、記録した内容にいちいち”良くする”というスタンスで干渉してくるところが嫌であった。 かつ、クラウドベースで、オフラインやローカル、LAN内だけで完結するインターネットのない環境で、プライベートに完結することを許さない感じが、どこか監視されているようで閉塞的でかなり息苦しいと感じられる。 既存の代替品の候補としてよく挙げられるツールの共通点 商業ベース クラウド ローカルで動かすことを前提としてない クラウドベースだとAIモデルの学習にデータが使われてしまう可能性 最初は無料としつつも、あとからしつこく課金させるビジネスモデルへの誘導がある可能性 クラウド系だとサービスが潰れたとき、データ消失、非互換の恐れ ある程度包括的にOneNoteの機能を持っているものはなく、いくつかの独自の設計や思想に基づいたものが乱立している印象 OneNote の機能 階層的な管理 Office 系列と似たような書式フォーマットや操作 自由なオブジェクトの配置 ポイント サーバクライアントモデル ...

この記事を作った動機 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日)

この記事を作った動機 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代替品の作成でコードを書いているときに起こったエラーについて、記録してみる。 ...