Manual Editor

ユーザーマニュアル

1.0

製品バージョンによりメニュー構成が異なる場合や、一部機能がサポートされない場合があります。

Copyright © 2026, Innodep Inc. All Rights Reserved

目次

01

Manual Editor の始め方

Manual Editorは、YAMLベースのマニュアルコンテンツを編集し、Sanity CMSに同期するツールです。

Manual Editor へのアクセス

Manual Editorへのアクセス方法をご案内します。

  1. ブラウザでManual Editor URLを開く
    開発環境: http://localhost:3010/admin/manual-editor 本番環境: https://your-domain.com/admin/manual-editor
  2. 製品を選択
    ヘッダーの製品ドロップダウンから編集するマニュアル製品を選択します。
  3. セクションを選択
    左側のサイドバーから編集するセクションファイルをクリックします。

編集モード (YAML / Form)

Manual Editorは2つの編集モードを提供します。

YAML モード
YAMLモードは元のYAMLファイルを直接編集します。
  • ファイル構造全体を一目で確認可能
  • 大量の編集に適している
  • YAML構文に慣れたユーザーに適している
  • _product.yamlファイルはYAMLモードでのみ編集可能
Form モード
Formモードは視覚的なフォームインターフェースで編集します。
  • 直感的なUIで編集可能
  • ドラッグアンドドロップで順序変更
  • 画像選択機能内蔵
  • リアルタイムプレビュー提供
  • セクションファイルのみサポート (_product.yaml を除く)

自動保存機能

Manual Editorは自動保存機能を提供します。

自動保存の動作
  • 2秒後に自動保存: 編集後、2秒間入力がない場合、自動的にファイルに保存されます。
  • セクション切り替え時に即座に保存: 別のセクションに移動すると、現在のセクションの変更が即座に保存されます。
  • 保存状態表示: サイドバーの黄色い点(🟡)で未デプロイのセクションを確認できます。
02

コンテンツの編集

Formモードでのセクション編集に加え、文書情報エリアとサブセクション目次の自動生成もご案内します。

新しいセクションの追加

新しいセクションファイルを作成する方法をご案内します。

  1. +ボタンをクリック
    サイドバー上部の「+」ボタンをクリックします。
  2. セクション情報を入力
    モーダルウィンドウで次の情報を入力します:
    • 順序: 数字のみ (例: "3" → 番号は03に自動生成)
    • 文書情報（番号なし）: リリースノート・法的通知などはチェック
    • Slug: 英小文字、数字、ハイフン(-)のみ (例: "new-feature")
    • タイトル: 多言語タイトルを入力
  3. 作成完了
    ✅ボタンをクリックすると、新しいセクションファイルが作成され、自動的に選択されます。

サブセクションの追加

セクション内にサブセクションを追加する方法をご案内します。

  1. +サブセクション追加ボタンをクリック
    Formモードで「+サブセクション追加」ボタンをクリックします。
  2. サブセクション情報を入力
    サブセクションの次の情報を入力します:
    • ID: 一意の識別子 (例: "feature-overview")
    • タイトル: 多言語タイトル
    • 説明: 多言語説明 (オプション)

コンテンツの追加

サブセクションにStep Guide、InfoBox、Screenshot、Tableを追加する方法をご案内します。

コンテンツタイプ
Manual Editorは次の4つのコンテンツタイプをサポートします: 1. Step Guide: ステップバイステップガイド (画像を含むことが可能) 2. InfoBox: 情報ボックス (info, warning, tip, danger) 3. Screenshot: スクリーンショット画像 4. Table: 表 (manualTable)
  1. サブセクションを展開
    コンテンツを追加するサブセクションをクリックして展開します。
  2. コンテンツタイプを選択
    「+コンテンツ追加」ボタンをクリックし、希望するコンテンツタイプを選択します。
  3. コンテンツを編集
    選択したコンテンツタイプに合わせてフィールドを入力します。

ドラッグアンドドロップで順序変更

サブセクションとコンテンツの順序をドラッグアンドドロップで変更できます。

  1. 項目をドラッグ
    移動したいサブセクションまたはコンテンツ項目をクリックしてドラッグします。
  2. 目標位置にドロップ
    希望する位置にドラッグした後、マウスを離すと順序が変更されます。

文書情報エリア

リリースノート、法的通知、オープンソースライセンスなどは文書情報エリアを使います。製品表紙の目次の下に、セクション番号なしで表示されます。

  1. セクションファイルを開く（_product.yamlではない）
    文書情報は _product.yaml では設定しません。 セクション YAML ファイルを作成または開きます（例: 90-release-notes.yaml、08-reference.yaml）。
  2. 文書情報（番号なし）を有効化
    Formモードで セクション情報 を開き、文書情報（番号なし） にチェックします。 またはYAMLモードで次を設定します: ``yaml section: number: "" slug: release-notes order: 90 unnumbered: true title: ko: 릴리즈 노트 en: Release Notes ``
  3. 製品表紙プレビューを確認
    保存してSanity同期後、製品表紙の 文書情報（目次の下）に番号なしで表示されます。 番号付き章は 目次 に残り、番号なしセクションは文書情報に移ります。
ヒント
  • サイドバーで _product.yaml を選ぶと表紙（目次＋文書情報）をプレビューできます。
  • 「参考・法的通知」などの既存セクションも、そのファイルで 文書情報（番号なし） を有効にすれば移動できます。
  • 並び順は order で制御され、番号表示のみ非表示になります。

サブセクション目次の自動生成

セクションにサブセクションが3つ以上あると、ページ上部にタイトルリンクの目次が自動生成されます。

動作の仕組み
動作
  • サブセクションが 3つ以上 のときだけ表示
  • サブセクションタイトルをページ内リンクとして一覧表示
  • クリックで該当サブセクション（#id）へ移動
  • 目次の手動編集は不要 — 各サブセクションのタイトルを使用
ヒント: 各サブセクションの ID（例: feature-overview）を入れてください。リンクのアンカーになります。
注意
サブセクションが3つ未満のときは目次を出さず、短いセクションをすっきり保ちます。
03

画像アップロードとデプロイ

画像をアップロードし、変更をサーバーにデプロイする方法をご案内します。

画像のアップロード

Manual Editorに画像をアップロードする方法をご案内します。

  1. 画像選択を開く
    Formモードで、画像フィールド横の「📷画像選択」ボタンをクリックします。
  2. 画像をアップロード
    画像選択モーダルで: 1. 「📤アップロード」ボタンをクリック 2. アップロードする画像ファイルを選択 3. アップロード完了後、画像リストから選択
  3. 多言語画像を設定
    画像選択で言語タブ(🇰🇷 韓国語、🇺🇸 English、🇯🇵 日本語、🇪🇸 Español)を選択して、各言語ごとに異なる画像を設定できます。

同期状態の確認

YAMLファイルとSanity CMS間の同期状態を確認する方法をご案内します。

同期状態アイコン
ヘッダーの同期状態アイコンで現在の状態を確認できます:
  • ✅ 同期済み: YAMLとSanityが一致
  • ⚠️ 差異あり: 一部のフィールドが異なる
  • ❌ 未デプロイ: Sanityに文書がない
  • 🔄 確認中: 状態確認中
サイドバー表示
サイドバーのセクションリストで:
  • 黄色い点 (🟡): サーバーにデプロイされていないセクション
  • なし: サーバーにデプロイされたセクション
黄色い点があるセクションは「サーバーデプロイ」ボタンをクリックしてデプロイする必要があります。

サーバーへのデプロイ

変更をSanity CMSに同期し、サーバーにデプロイする方法をご案内します。

  1. 変更を確認
    編集した内容が自動保存されたか確認します。(2秒待機またはセクション切り替え時に自動保存)
  2. サーバーデプロイボタンをクリック
    ヘッダーの「🚀サーバーデプロイ」ボタンをクリックします。
    • 全画面ローディングオーバーレイが表示されます
    • Sanity CMSへの同期が進行します
    • 完了するとトーストメッセージで結果が通知されます
  3. Git Commit (オプション)
    「🚀サーバーデプロイ」ボタン横の「▼」ボタンをクリックして「デプロイ + Commit」を選択できます。 Git Commitを実行するには: 1. Gitユーザー名とメールアドレスを入力 2. コミットメッセージを入力 3. 「🚀デプロイ + Commit」ボタンをクリック
注意事項
  • サーバーデプロイは現在開いているセクションに対してのみ実行されます。
  • Git Commitも現在のセクションファイルとその製品のすべての画像のみが含まれます。
  • デプロイ前に同期状態を確認して、差異がないことを確認することをお勧めします。
04

ヒントと高度な機能

Manual Editorをより効率的に使用するためのヒントと高度な機能をご案内します。

キーボードショートカット

Manual Editorで使用できるキーボードショートカットをご案内します。

단축키기능설명
Ctrl + S저장현재 파일 저장 (자동 저장과 동일)
Ctrl + Z실행 취소YAML 모드에서만 사용 가능
Ctrl + Y다시 실행YAML 모드에서만 사용 가능
Ctrl + F찾기YAML 모드에서 텍스트 검색

Markdown書式の使用

テキストフィールドでMarkdown構文を使用して書式を適用できます。

サポートされているMarkdown構文
  • 太字: **テキスト**
  • 斜体: *テキスト*
  • コード: ` コード `
  • 取り消し線: ~~テキスト~~
  • リンク: [テキスト](https://...)
  • キーボード: {{kbd:Ctrl+S}}
  • アイコン: {{icon:house}}

コンテンツの削除

セクション、サブセクション、コンテンツを削除する方法をご案内します。

削除確認
すべての削除操作で確認モーダルが表示されます。
  • セクション削除: サイドバーの🗑️ボタン
  • サブセクション削除: サブセクションヘッダーの🗑️ボタン
  • コンテンツ削除: コンテンツ項目の🗑️ボタン
  • Step削除: Step Guide内のStepの🗑️ボタン
削除は元に戻せないため、注意してください。

ベストプラクティス

Manual Editorを効率的に使用するためのベストプラクティスをご案内します。

推奨事項
1. 小さな単位で編集: 一度に多くの変更を行わず、セクションごとに分けて編集してください。 2. 自動保存を活用: 2秒後に自動保存されるため、保存ボタンを押す必要はありません。 3. プレビューを確認: Formモードの右側のプレビューを活用して、リアルタイムで結果を確認してください。 4. 同期状態を確認: デプロイ前に同期状態アイコンを確認して、差異がないことを確認してください。 5. 画像を最適化: アップロード前に画像を適切なサイズに最適化してください。 6. 多言語入力: ko、enは必須のため、必ず入力してください。 7. 文書情報を分離: リリースノート・法的通知・OSSライセンスは本文目次ではなく 文書情報（番号なし） セクションにします（_product.yamlではない）。 8. サブセクションID: サブセクションが3つ以上だと上部に自動目次が出るため、各IDを意味のある値にしてください。