> ## Documentation Index
> Fetch the complete documentation index at: https://dripart-docs-recommend-jobs-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# ComfyUI APP モードガイド

> ComfyUI で APP モードを構築し使用する方法を学び、カスタム入出力インターフェースを定義することでワークフローの相互作用を簡素化します。

APP モードは、カスタム入出力インターフェースを定義できるようにすることでワークフローの相互作用を簡素化し、ノードを編集せずにワークフローを共有・使用しやすくします。

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/MR6CmStFoWA" title="ComfyUI APP Mode Guide" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

<Note>
  APP モードは、ComfyUI フロントエンドバージョン 1.41.13 から正式にサポートされています。それ以前のバージョンは早期テスト段階です。
</Note>

## APP モードに入る

APP モードに入るには 2 つの方法があります。左上のアイコン（**1**）をクリックしてドロップダウンから **Enter app mode** を選択するか、インターフェース上部のパンくずリストナビゲーションドロップダウン（**2**）を使用します。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_1.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=7467f837ec7b2506119a8cd2c821109b" alt="左上メニューから APP モードに入る" width="2400" height="1446" data-path="images/interface/app_mode/app_mode_1.png" />

1. 左上のアイコン（**1**）をクリックしてドロップダウンメニューを開き、**Enter app mode** を選択します。
2. または、上部のパンくずリストナビゲーションドロップダウン（**2**）を使用して APP モードに入ります。

## APP モードワークフローの構築

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/tqLY-vjY-3I" title="How to Create APP Mode Workflows" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

ワークフローが APP モード用に設定されたことがない場合、APP モードに入ると自動的に APP モードビルダーが開きます。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_2.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=c679c18f6319e6f3dd3a4cb55955bd46" alt="APP モードビルダーエントリー画面" width="2404" height="1450" data-path="images/interface/app_mode/app_mode_2.png" />

1. ワークフローに既存の APP モード設定がない場合、デフォルトで APP モードビルダーが開きます。
2. **Build app** をクリックして APP ビルダーに入り、設定を開始します。

### ステップ 1：入力の選択

ビルダーインターフェースの上部には 4 つのガイドステップ（**1**、**2**、**3**、**4**）が表示されます。下部のバーでは、ビルダーを終了するかステップ間を移動できます。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_3.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=e12d49fc1198421103b3290a47a4781a" alt="APP ビルダーインターフェースの概要" width="2398" height="1448" data-path="images/interface/app_mode/app_mode_3.png" />

1. 上部の数字 **1 2 3 4** は、4 つの構築ステップ（入力選択、出力選択、プレビュー、デフォルトビューの設定）に対応しています。
2. 下部のボタンでビルダーを終了したり、ステップ間を移動したりできます。
3. キャンバス内にマークされた領域は、選択可能な入出力パラメータです。
4. 右パネルには、現在の設定のライブプレビューが表示されます。

上部の **Inputs** ステップをクリックします。キャンバス内で選択可能な入力ノードがハイライト表示されます。ノードをクリックして入力パラメータとして選択します。オプションには、画像アップロード、テキストプロンプト入力、モデル選択などがあります。選択されたパラメータは右サイドバーに表示されます。

### ステップ 2：出力の選択

**Outputs** ステップをクリックします。Preview ノードや Save Image ノードなど、APP に表示する出力ノードを選択します。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_4.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=9fe3eb7c65efe2c73cde0c1c88d763b7" alt="右パネルプレビューで出力ノードを選択" width="2402" height="1448" data-path="images/interface/app_mode/app_mode_4.png" />

1. APP に表示する出力ノードを選択します。
2. 入力と同様に、右サイドバーには選択された出力ノードのライブプレビューが表示されます。

### ステップ 3：プレビュー

**Preview** ステップをクリックして、最終的な APP レイアウトを確認します。選択された入力は右パネルに表示され、出力エリアはキャンバスに表示されます。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_5.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=8ab9fa996bf12ecc4525340448ef6c79" alt="入出力レイアウトを示すプレビューモード" width="2464" height="1434" data-path="images/interface/app_mode/app_mode_5.png" />

1. これはプレビューモードです。すべての入出力設定が预期通りに表示されているか確認します。
2. 調整が必要な場合は、**Back** をクリックして前のステップに戻ります。

### ステップ 4：デフォルトビューの設定

**Set a default view** ステップをクリックします。ワークフローをデフォルトで **App** モードで開くか、**Node Graph** モードで開くかを選択します。**Apply** をクリックして確定します。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_6.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=cfc0416a47844a9630bf145eeda320a4" alt="App/Node Graph オプション付きのデフォルトビュー設定ステップ" width="2464" height="1432" data-path="images/interface/app_mode/app_mode_6.png" />

1. ワークフローを開いた際に、デフォルトで **App** モードにするか **Node Graph** モードにするかを選択します。
2. **App** を選択し、**Apply** をクリックして確定します。ワークフローはその後、デフォルトで APP モードで開きます。

適用後、確認プロンプトが表示されます。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_7.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=53253544fd628564d061e2ec52080d34" alt="View app ボタン付きの確認プロンプト" width="2462" height="1436" data-path="images/interface/app_mode/app_mode_7.png" />

**View app** をクリックして APP モードに入り、ワークフローの使用を開始します。

## APP モードの使用

APP モードでは、右パネルに設定されたすべての入力オプションが表示されます。必要に応じて入力を調整し、**Run** をクリックしてワークフローを実行します。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_8.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=5beada40d1c2964268e1f2911c675c8a" alt="入力パネルと Run ボタン付きの APP モードインターフェース" width="2491" height="1438" data-path="images/interface/app_mode/app_mode_8.png" />

1. 右側の **Input** パネルで、実行前に入力パラメータを調整できます。
2. **Run** をクリックしてワークフローを実行します。
3. 左サイドバーでは、APP の再構築、アセットの表示、ワークフローパネルの開くなどの追加制御を提供します。

APP モードはモバイルおよび狭い画面レイアウトにも最適化されています。インターフェースはタブベースのビューに適応し、入力パネル、出力ビュー、メディアアセットパネル之间を切り替えることができます。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_15.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=05bf4aafc532e4b341fb21f7a3d3a7dd" alt="入力、出力、アセットタブ付きの APP モードモバイルレイアウト" width="2494" height="1545" data-path="images/interface/app_mode/app_mode_15.png" />

実行中、上部に **Cancel this run** ボタンが表示され、現在の実行を停止できます。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_9.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=8a5c108df3dd34f8a361c343066e2380" alt="キャンセルオプションと結果パネル付きの実行状態" width="2490" height="1438" data-path="images/interface/app_mode/app_mode_9.png" />

1. 上部の **Cancel this run** をクリックして、現在の実行を停止します。
2. 下部パネルでキュービューと結果ビューを切り替えます。
3. 関連するエリアをクリックしてアセットパネルを開きます。

## ワークフローの保存と共有

### ワークフローの保存

`Ctrl + S`（Mac の場合は `Cmd + S`）を使用して、将来の使用のためにワークフローを保存します。

左サイドバーのボタンをクリックして、保存されたワークフローパネルを開きます。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_11.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=3a5e5f18fb92ab9599b0a04a69346a8e" alt="保存された APP ワークフローを示す左サイドバー" width="2495" height="1441" data-path="images/interface/app_mode/app_mode_11.png" />

1. 左サイドバーのボタンをクリックしてパネルを開き、保存されたすべての APP ワークフローを表示します。
2. このパネルから保存された APP ワークフロー之间を切り替えます。

### ワークフローの共有

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/-JEDHJktsr0" title="How to Share Workflows" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

APP モードで、左サイドバーの **Share** ボタンをクリックします。ワークフローがまだ保存されていない場合、リンクを作成する前にまず保存するよう促すダイアログが表示されます。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_12.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=dfaa473f533db8ff14d94a3921a311e0" alt="ワークフローの保存を促す共有ダイアログ" width="2494" height="1436" data-path="images/interface/app_mode/app_mode_12.png" />

1. 左サイドバーの Share ボタンをクリックして、共有ダイアログを開きます。
2. ワークフローが未保存の場合、ワークフロー名を入力し、**Save workflow** をクリックして続行します。

保存されると、共有ダイアログにリンクを生成するオプションが表示されます。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_13.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=2c50ad4320e0e62e8e48da4cd3b1f61c" alt="Create a link ボタン付きの共有ダイアログ" width="2494" height="1436" data-path="images/interface/app_mode/app_mode_13.png" />

**Create a link** をクリックして、共有可能なワークフローの URL を生成します。

<img src="https://mintcdn.com/dripart-docs-recommend-jobs-api/VyVhqoYUv8HG2HGL/images/interface/app_mode/app_mode_14.png?fit=max&auto=format&n=VyVhqoYUv8HG2HGL&q=85&s=bc7948526aa716321b397744fdbf2c0b" alt="コピーボタン付きの生成されたリンクを示す共有ダイアログ" width="2494" height="1438" data-path="images/interface/app_mode/app_mode_14.png" />

**Copy** をクリックしてリンクをコピーします。受信者はリンクを開いてワークフローを直接実行できます。完全なワークフロー設定がリンクに含まれています。

<Note>
  共有リンクは Comfy Cloud でのみサポートされています。
</Note>
