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