本仕様書は、yaNote の現行実装に基づき、ユーザーが実際に操作できる機能のみを記述しています。未実装や検討中の機能は含まず、各操作の手順と結果を統一した粒度でまとめています。
-
一貫性の保持
- 用語、表記、フォーマットは全体を通じて統一すること。
- 操作の記述は、具体的な手順と期待される結果を明確に記載する。
-
ユーザー視点の記述
- 技術的な実装詳細ではなく、ユーザーが実際に行う操作とその結果に焦点を当てる。
-
更新時の明確な差分管理
- 新バージョンでの変更点は明示的に記載し、旧仕様との違いを分かりやすくする。
-
詳細な操作説明
- 各操作について、発動方法、手順、結果、注意点を網羅的に記述する。
-
レビュープロセスの活用
- 仕様書作成後、フィードバックを取り入れ定期的に見直す。
-
バージョン管理
- 仕様書自体にもバージョン番号と更新日を明記し、変更履歴を管理する。
-
概要:
論理座標 10000×10000 ピクセルの作業領域。
初期表示時は、画面中央（論理座標 5000, 5000）に「中心ノード」が配置されます。 -
操作:
- パン:
右クリック＋ドラッグでキャンバス全体を移動します。
タッチ: シングルタッチ＋ドラッグでキャンバス全体を移動します。 - 表示位置のリセット:
コントロールパネルの「⊙」ボタンをクリックすると、中心ノードが画面中央に配置されるように表示位置が調整されます。
- パン:
-
概要:
ユーザーがテキスト情報を入力する情報ブロック。
生成後、編集、移動、削除が可能です。 -
種類:
現在、以下の5種類が実装されています.- standard（標準）
- text-only（テキストのみ）
- grey（グレー）
- red（赤）
- dotted（点線）
※ 新規生成時は「dotted」がデフォルトです。
-
概要:
ノード間の関連性を示すための線。
生成後は接続先の変更が可能です。 -
ハンドル:
接続線が選択された場合、線の両端に小さな円形ハンドルが表示されます。
※ ノード自体をクリックしてもハンドルは表示されません。
-
背景上での生成:
空白部分を ダブルクリック すると、その位置に新規ノードが生成され、即座に編集モードに入ります。
タッチ: 空白でダブルタップすると、その位置に新規ノードが生成され、即座に編集モードに入ります。 -
Ctrl/Cmd+Enter ショートカット:
選択中または編集中のノードの直下に新規ノードが追加されます。
※ 追加位置は、選択中ノードの高さに基づいたオフセット（例: ノード高さ＋10px）で自動算出されるため、改行等で高さが変わっても重なりません。
-
開始方法:
ノードを ダブルクリック するか、選択状態で「e」キーを押すと編集モードに入ります。
編集モード中は背景色が薄い黄色に変化します。
タッチ: ノードをダブルタップすると編集モードに入ります。 -
終了方法:
Enter キーを1回押すことで編集が確定し、入力内容が自動的にリンク形式へ変換されます。
※ Shift+Enter で改行を挿入できます。
※ 日本語入力（IME）変換中のEnterキーは無視されるため、変換操作に影響しません。
編集確定時、接続線も最新のノードサイズに合わせ再計算されます。
※ 入力内容が空の場合、該当ノードは削除されます。
タッチ: 編集中に空白をタップすると編集終了・選択解除されます。 -
ブランチ作成:
ノード上で ダブルクリック した後、2回目のクリック時にマウスボタンを押したまま、約10px以上ドラッグすると、そのノードから新規接続線（ブランチ）が生成されます。- ドラッグ先が既存ノードの場合:
ドラッグを離した位置が既存ノードに重なっていれば、そのノードとの接続が確定されます。 - ドラッグ先が空白の場合:
自由接続線として生成され、線の両端は初回クリック位置とマウスアップ時の位置となります。
- ドラッグ先が既存ノードの場合:
-
移動:
ノードを 左クリック＋ドラッグ すると移動できます。
複数選択している場合はグループ移動が実施され、各ノードの相対位置が保持されます。
タッチ: 長押し（約300ms）してからドラッグするとノードを移動できます。 -
削除:
選択中のノードは Backspace または Delete キーで削除され、接続している接続線も同時に削除されます。
-
Shift＋クリック:
ノードを選択中に Shift キーを押しながら別のノードをクリックすることで、複数ノードの選択・選択解除が可能です。 -
選択解除:
タッチ: 空白をタップすると選択が解除されます。 -
ラバーバンド選択:
空白部分で 左クリック＋ドラッグ すると、矩形（ラバーバンド）が描画され、矩形内または矩形と交差するすべてのノードおよび接続線が一括で選択されます。
- 操作:
コントロールパネルの「ノード種類変更」ボタンを押すと、現在選択中またはデフォルトのノードの種類が、実装済みの5種類（standard, text-only, grey, red, dotted）の間で切り替わります。 - 効果:
ノードの外観（背景、枠線、影、文字色）が即時更新されます。
- 操作:
ノードを選択した状態で、コントロールパネルの整列ボタンを押し、メニューから整列操作を選択します。 - 対応内容:
- 左寄せ / 右寄せ / 上寄せ / 下寄せ（2ノード以上で実行可能）
- 左右中央揃え / 上下中央揃え（2ノード以上で実行可能）
- 横等間隔 / 縦等間隔（3ノード以上で実行可能）
- 整列基準:
寄せ操作は選択範囲の端基準で位置合わせを行います。 - 等間隔基準:
等間隔調整はノード中心ではなく、ノード間の余白を等間隔にします。
並び順の先頭ノードと末尾ノードは固定し、中間ノードのみを再配置します。
-
発動方法:
対象ノード上で ダブルクリック した後、2回目のクリック時にマウスボタンを押し続け、一定距離（約10px以上）ドラッグすることで、接続線生成が開始されます。
タッチ: ノード上でダブルタップ後、約10px以上ドラッグすると接続線が生成されます。10px未満で離すと編集開始として扱われます。 -
動作詳細:
- ドラッグ開始:
- 対象ノード上でダブルクリック後、マウスボタンを押したままドラッグすると、初回クリック位置（対象ノードの基準点）が記録されます。
- 仮のライン表示:
- ドラッグ中は、一時的な点線が表示され、接続線生成中であることが視覚的に示されます。
- ドラッグ完了:
- 既存ノードがドロップ先の場合:
ドラッグを離した位置が既存ノードに重なっていれば、初回クリック位置からそのノードへの接続線が生成され、接続先が確定されます。 - 空白がドロップ先の場合:
自由接続線として生成され、線の両端は初回クリック位置とマウスアップ時の位置となります。
- 既存ノードがドロップ先の場合:
- ドラッグ開始:
-
注意点:
ノード間接続は、必ずダブルクリック後のドラッグ操作で発動します。単なる左クリック＋ドラッグでは接続線は生成されません。
-
発動方法:
空白部分で ダブルクリック または ダブルクリック＋ドラッグ を行うと、自由接続の生成が開始されます。
タッチ: 空白でダブルタップ後、約10px以上ドラッグすると自由接続線が生成されます。10px未満で離すと新規ノード生成として扱われ、即座に編集モードに入ります。 -
動作詳細:
- ドラッグ開始:
- 空白部分でダブルクリック後、2回目のクリック時にマウスボタンを押したままドラッグすると、初回クリック位置が記録されます。
- 仮のライン表示:
- ドラッグ中は、一時的な点線（ダッシュ）が表示され、自由接続生成中であることが示されます。
- ドラッグ完了:
- 既存ノードがドロップ先の場合:
マウスを離した位置が既存ノードに重なっていれば、初回クリック位置からそのノードへの接続線が生成されます。 - 空白がドロップ先の場合:
自由接続線として生成され、端点は初回クリック位置とマウスアップ時の位置となります。
- 既存ノードがドロップ先の場合:
- 短いドラッグの場合:
- ドラッグ距離が約10px未満の場合は、新規ノード生成として扱われ、即座に編集モードに入ります。
- ドラッグ開始:
-
注意点:
自由接続は、空白部分でのダブルクリック後のドラッグ操作でのみ発動します。
-
ハンドル操作:
接続線を左クリックで選択すると、両端に表示されたハンドルを用い、左クリック＋ドラッグすることで接続線の端点の接続先を変更できます。 -
自動更新:
ノードの移動、編集、またはキャンバスのパン操作に合わせ、接続線は自動的に再計算され、常に最新の状態で表示されます.
-
内部リンクの処理:
同じホスト名（同じサイト内）のリンクは同じタブで開かれるようになりました。
相対パス（./や/で始まるパス）も内部リンクとして同じタブで開かれます。 -
外部リンクの処理:
異なるホスト名のリンク（外部サイト）は新しいタブで開かれます。
これにより、yaNoteの作業を継続したまま外部サイトを参照できます。 -
グレーノードと赤ノード内のリンク表示:
暗い背景色のノード内でも視認しやすいよう、グレーノード内のリンクは明るい水色で、赤ノード内のリンクは明るいオレンジ色で表示されます。
-
Shift＋クリック:
複数のノードを選択する場合、Shift キーを押しながら各ノードをクリックすることで、個別に複数選択が可能です。
すでに選択されているノードを Shift＋クリックすると、そのノードの選択が解除されます. -
ラバーバンド選択:
空白部分で 左クリック＋ドラッグ すると、矩形（ラバーバンド）が描画され、矩形内または矩形と交差するすべてのノードおよび接続線が一括で選択されます. -
Cmd/Ctrl+A (全オブジェクト選択):
キーボードショートカット Cmd または Ctrl キーと A キーの同時押しにより、キャンバス上のすべてのノードおよび接続線が一括で選択されます。
ただし、ノードのテキスト編集中の場合は、ブラウザの標準全選択動作（テキスト全選択）が実行され、アプリ全体の全選択機能は適用されません.
-
パン:
右クリック＋ドラッグでキャンバス全体を移動します. -
表示位置のリセット:
コントロールパネルの「⊙」ボタンをクリックすると、中心ノード（または他の代表的なノード）が画面中央に配置されるように表示位置が調整されます。
中心ノードが見つからない場合は、最初のノードまたはID=1のノードを基準に配置します。 -
自動リセット:
以下の場合に自動的に表示位置がリセットされます：- 利用ガイド表示（「？」ボタン）を実行した場合
- 共有URLからノートを読み込んだ場合
- ※ 「開く」ボタンからJSONファイルを読み込んだ場合は、元のパン位置を維持します。
-
技術的な仕様:
- リセット処理は、指定されたノードの位置を計算し、そのノードが画面中央に来るようにキャンバスのパン位置を調整します。
- ノード自体の位置（座標）は変更されず、表示位置のみが調整されるため、ノートの構造には影響しません。
- ズーム（拡大縮小）の設定は変更されません。
-
注意点:
- リセット後もノードの選択状態は維持されます。
- ノートデータ自体には影響がなく、表示位置のみが変更されます。
- 後続の操作（パン、ノード移動など）や保存により、調整された表示位置が保存されます。
-
自動保存:
各操作（ノードや接続線の生成、編集、移動、削除）が完了するたびに、現在の状態が自動的に保存されます. -
Undo／Redo:
- Undo: Ctrl/Cmd+Z により直前の操作を取り消します.
- Redo: Ctrl/Cmd+Y により取り消された操作が再適用されます.
-
エクスポート／インポート:
- エクスポート: 現在の状態が JSON 形式でファイル出力され、ファイル名にはタイトルと日時が自動付与されます.
- インポート: 保存済みの JSON ファイルから状態が復元され、内部履歴に追加されます.
-
表示位置:
画面右上に常時表示され、ユーザーは各種操作をシンプルに実施できます. -
主な機能:
- 新規:
新規ボタンをクリックすると、現在の状態に未保存の変更がある場合、保存確認ダイアログが表示されます.
ユーザーが保存済みであることを確認すると、状態がクリアされ、初期状態（「中心ノード」のみ）が生成されます. - 保存（エクスポート）:
現在の状態を JSON ファイルとして出力します. - 開く（インポート）:
開くボタンをクリックすると、未保存の状態がある場合に保存確認ダイアログが表示されます.
ユーザーが保存済みであると確認した場合、JSON ファイルを選択し、状態が復元されます. - ノード種類変更:
選択中またはデフォルトのノードの種類を切り替えます. - 線種・線タイプ変更、太字切替:
接続線およびノードの表示スタイルを変更し、ツールチップで操作結果がフィードバックされます. - 整列:
選択中ノードに対して、左右上下寄せ、左右中央揃え、上下中央揃え、横等間隔、縦等間隔の調整を実行します。
※ 寄せは2ノード以上、等間隔は3ノード以上の選択が必要です。 - 表示位置のリセット:
「⊙」ボタンをクリックすると、中心ノードが画面中央に配置されるよう表示位置がリセットされます.
- 新規:
-
ツールチップ:
各ボタンにマウスカーソルを合わせると、機能の説明がツールチップとして表示されます。
画面端でもツールチップが適切に表示されるよう、表示位置は自動的に調整されます。 -
表示されるツールチップ情報:
- ノード種類変更ボタン: 選択中のノード種類または現在のデフォルトノード種類が表示されます。
- 線種変更ボタン: 選択中の線種または現在のデフォルト線種が表示されます。
- 線タイプ変更ボタン: 選択中の線タイプ（実線/点線）または現在のデフォルト線タイプが表示されます。
- 太字ボタン: 太字の設定状態が表示されます。
- 整列ボタン: 「ノード整列メニュー」が表示されます。
- その他のボタン:
- リセットビュー（⊙）: 「表示位置をリセット」
- 新規（新規）: 「新規ノートを作成」
- 開く（開く）: 「保存したノートを開く」
- 保存（保存）: 「現在のノートを保存」
- 共有（共有）: 「URLで共有」
- ヘルプ（？）: 「ヘルプを表示」
-
技術的な仕様:
- ツールチップは、マウスカーソルをボタン上に乗せた時に表示され、約2秒後または他の操作を行うと自動的に非表示になります。
- 右端のボタン（「？」や「共有」など）の場合、ツールチップが画面外にはみ出さないよう左寄りに表示されます。
-
概要:
yaNoteは、PWA（プログレッシブウェブアプリ）としての機能を備えており、オフライン環境でも基本的な動作が可能です. -
主な機能:
- Service Workerの登録:
ブラウザにService Workerが登録され、主要なリソース（HTML、CSS、JavaScript、アイコンなど）がキャッシュされます. - オフライン対応:
キャッシュされたリソースにより、インターネット接続が不安定またはオフラインの場合でも、yaNoteの基本機能を利用できます. - 迅速な更新:
バージョン管理されたService Workerにより、新しいバージョンがリリースされた際、skipWaiting()やclients.claim()が活用され、ユーザーのリロード操作のみで最新バージョンが反映されます.
- Service Workerの登録:
| 操作 | 対象 | 操作方法 | 結果 |
|---|---|---|---|
| シングルクリック | ノード | 左クリック | ノードが選択状態になりハイライトされる。ハンドルは表示されない. |
| シングルクリック | 接続線 | 左クリック | 接続線が選択され、両端にハンドルが表示される. |
| シングルクリック | 空白 | 左クリック | すべての選択が解除される. |
| ダブルクリック | ノード | 2回目のクリック時、マウスを動かさずに離す | ノードが編集モードに入り、背景色が薄い黄色に変化する. |
| ダブルクリック | 空白 | 2回目のクリック時、マウスを動かさずに離す | その位置に新規ノードが生成され、即座に編集モードに入る. |
| ダブルクリック＋ドラッグ | ノード | ノード上で2回目のクリック時、マウスボタンを押したまま約10px以上ドラッグ | ノードから新規接続線（ブランチ）が生成される. |
| ダブルクリック＋ドラッグ | 空白 | 空白上で2回目のクリック時、マウスボタンを押したまま約10px以上ドラッグ | 自由接続線が生成される. |
| 左クリック＋ドラッグ | ノード | 左クリック＋ドラッグ（一定距離以上） | ノードが移動し、接続線はリアルタイムで更新される. |
| 左クリック＋ドラッグ | 接続線のハンドル | 接続線選択時に表示されたハンドル上で左クリック＋ドラッグ | 接続線の端点が移動し、接続先が変更される. |
| 左クリック＋ドラッグ | 空白 | 左クリック＋ドラッグ | ラバーバンドが描画され、矩形内のノード・接続線が選択される. |
| Shift＋クリック | ノード | Shiftキーを押しながらノードをクリック | 複数ノードの選択・選択解除が行われる. |
| 右クリック＋ドラッグ | キャンバス | 右クリック＋ドラッグ | キャンバス全体が移動（パン）される. |
| Enter | ノード編集中 | Enter キーを押す | ノードの編集を確定し、リンク形式に変換 |
| Shift+Enter | ノード編集中 | Shift キーを押しながら Enter キーを押す | 改行を挿入 |
| キーボードショートカット | 全体の操作 | Ctrl/Cmd+Enter, Ctrl/Cmd+C, Ctrl/Cmd+X, Ctrl/Cmd+V, e, Ctrl/Cmd+Z, Ctrl/Cmd+Y, Delete | ノード・接続線の生成、コピー/カット/貼り付け、編集確定、Undo／Redo、削除などが実行される. |
| Cmd/Ctrl+A (全オブジェクト選択) | 全オブジェクト | キーボードショートカット Cmd/Ctrl+A | 全ノードおよび接続線が一括で選択される。ただし、ノードのテキスト編集中の場合はブラウザの全選択動作が優先される. |
| ボタンクリック | 整列 | ノード選択後に整列ボタンを押し、メニュー項目をクリック | 左右上下寄せ、左右/上下中央揃え、横/縦の余白等間隔調整を実行する. |
| ボタンクリック | 表示位置 | コントロールパネルの「⊙」ボタンをクリック | 中心ノードが画面中央に配置されるよう表示位置がリセットされる. |
- 機能説明:
JSONファイルのURLを共有用の短いリンクに変換し、他のユーザーとノートデータを共有できる機能です。
クライアントサイドの仕組みのみで実現され、サーバー処理を必要としません。
-
共有リンク生成:
- コントロールパネルの「共有」ボタンをクリックすると、共有モーダルが表示されます。
- JSONファイルのURLを入力し、「URL作成」ボタンをクリックすると共有リンクが生成されます。
- 「URLをコピー」ボタンで生成されたリンクをクリップボードにコピーできます。
-
共有リンクの利用:
- 共有リンクをブラウザで開くと、元のJSONファイルが自動的に読み込まれます。
- 読み込み完了後、URLパラメータは消去され、通常のURLに戻ります。これにより、ブックマーク時に余計なパラメータが残ることを防止します。
- 共有リンクから読み込んだノートは、自動的に中心ノードが画面中央に配置されます。
- 共有するJSONファイルは、インターネット上で直接アクセス可能なURLである必要があります。
- GitHub Gistなどを使用する場合は、「Raw」リンクを使用してください。
- 共有リンクにアクセスした誰もがデータを閲覧できるため、機密情報の共有には適していません。
-
概要:
URLパラメータnew=trueを使用して新規ノートを直接作成できるようになりました。 -
使用方法:
以下のようなURLにアクセスすると、ローカルストレージがクリアされ、「中心ノード」のみの新規状態が表示されます。
例:https://example.com/yaNote/?new=true -
動作詳細:
- 「新規」ボタンと同様に、ローカルストレージのデータを削除します。
- ガイド表示をスキップするフラグが設定されます。
- 「中心ノード」のみの新規状態が初期化されます。
- URLパラメータは処理後にクリアされるため、再読み込み後はパラメータが表示されません。
-
用途:
- ブックマークに登録して素早く新規ノートを作成できます。
- 他のアプリケーションから直接新規ノートを開くリンクを作成できます。
-
概要:
コントロールパネルに追加された「？」ボタンにより、利用ガイドを表示する機能です。 -
操作:
- 「？」ボタンをクリックすると、確認ダイアログが表示されます。
- 確認後、index.jsonから利用ガイドが読み込まれ表示されます。
- ガイド表示後は自動的に中心ノードが画面中央に配置されます。
- 現在の作業内容は失われますのでご注意ください。
-
概要:
初めてyaNoteを使用する場合（ローカルストレージに作業データがない場合）、自動的に利用ガイドが表示されます。 -
動作:
- ローカルストレージにデータがない場合、index.jsonからガイドを読み込みます。
- ガイドが存在しない場合は、通常の初期状態（「中心ノード」のみ）が表示されます。
- 「新規」ボタンを押した場合は、ガイドではなく通常の新規状態が表示されます。
- index.html と同じディレクトリに index.json を配置してください。
- ローカル環境では、ブラウザのセキュリティ制限によりガイド読み込みに失敗する場合があります。
本仕様書は、yaNote v1.4.2 の現行実装に基づき、ユーザーが実際に操作できる機能のみを記述しています。今後の改善や機能拡張においても、この仕様書を基準として操作性の向上を図ります。
© 2026 yaNote Project