フローエディター
このページでは、新しいフローエディタについて説明します。
Momentsのフローエディターは、フローをデザインできる視覚的なコード不要のドラッグアンドドロップインターフェイスです。
フロー要素の追加と構成、詳細設定の構成、およびフローの管理を行うことができます。
フローエディターの使用を開始する [#flow-editor-get-started]
このセクションでは、エディターの構造とアクセス方法について説明します。
エディターで行ったすべての変更は、自動的に保存されます。
エディタへのアクセス方法 [#flow-editor-get-started-access-editor]
既存のフロー: 既存のフローの場合は、すべてのフロー ページに移動し、フローを選択します。フローがエディター ページで開きます。
新しいフロー: フローを作成すると、エディター ページで自動的に開きます。
エディタの構造 [#flow-editor-get-started-structure]
エディタには、次のセクションがあります。
- キャンバス(左):フローの設計に使用されます。
- ビルドサイドパネル(右):選択した項目を構成できる動的パネルです。
- 要素構成: キャンバス上のエレメントを選択すると、このパネルにそのエレメントのフィールドと設定が表示されます。
- タグ: フッターから タグ を選択すると、このパネルには使用可能なタグの一覧が表示されます。
- フロー 設定: フッターから フロー設定 が選択されている場合、このパネルにはフローの設定が表示されます。
- フッター(下):フローコントロールとメタデータ(フローの名前、フロー内のキャンペーンタグの数、フロー設定など)が含まれます。
次の図は、フロー エレメントの [ビルド] サイド パネルを示しています。
要素の作成と管理 [#flow-editor-create-manage-elements]
拡張キャンバスコントロールを有効にする [#flow-editor-enhanced-controls]
拡張されたキャンバスコントロールにより、フローエディタとの対話が改善されました。これらを使用すると、次のことができます。
- ナビゲーション: スクロールするか、マウスの右ボタンまたは中ボタンでドラッグするか、Space キーを押しながらドラッグして、キャンバス内を移動します
- ズーム: タッチパッドをピンチするか、マウスで Cmd/Ctrl + スクロールを使用して、ズーム レベルを調整します。
- エレメントの選択: エレメントを選択し、ドラッグして移動します。
- 要素を複数選択: 複数の要素を選択し、ドラッグして移動します。
拡張キャンバス コントロールを有効にするには、[設定] アイコンを選択し、[拡張コントロール] を選択します。
従来のコントロールを使用するには、このオプションを無効にします。
フローにエレメントを追加する [#flow-editor-add-element]
-
既存のエレメントの横にある矢印を選択します。
エレメントに分岐がある場合は、分岐の横にある矢印を選択して次のエレメントを追加します。
-
使用可能なエレメントのリストから選択します。必要なエレメントを検索することもできます。
エレメントがキャンバスに追加されます。
エレメントの編集または構成 [#flow-editor-edit-configure-element]
エレメントを選択して [ビルド] サイド パネルを開きます。このパネルでエレメントを設定できます。
要素の移動 [#flow-editor-move-element]
1 つのエレメントを移動する
- エレメントを選択します。
- キャンバス上のエレメントをドラッグして移動します。
複数の要素を移動する
- 拡張コントロールを有効にします。
- 必要な要素を選択します。
- キャンバス上の要素をドラッグして移動します。
エレメントを複製する [#flow-editor-duplicate-element]
必要なエレメントを選択し、その上の 複製 アイコンを選択します。
要素の削除 [#flow-editor-delete-element]
1 つのエレメントを削除する
- エレメントを選択します。
- エレメントの上にある「削除」アイコンを選択します。
複数の要素を削除する
- 拡張コントロールを有効にします。
- 必要な要素を選択します。
- 要素の上にある [削除] アイコンを選択します。
新しいエントリーポイントを追加する [#flow-editor-add-entry-point]
既定では、フローには、フローの作成時に選択したエントリーポイントが含まれます。エントリ ポイントをさらに追加する場合は、[エントリーポイントの追加] を選択し、必要なオプションを選択します。
検証とトラブルシューティング [#flow-editor-validate-troubleshoot]
フロー内のエラーを検証して特定します。
フローを検証する [#flow-editor-validate-flow]
検証を選択して、フローを検証します。
フロー内のエラーのリストを表示する [#flow-editor-view-errors]
エラー を選択して、フロー内のすべてのエラーのリストを表示します。
エラーは、次のタブに分類されます。
- フロー要素: フロー要素に固有のエラー。例: 次の図は、SMS(Short Message Service エレメントにエラーがあることを示しています。
- キャンペーン: キャンペーンの失敗の原因となる可能性のあるエラー
- フロー構造: フロー構造のエラー。例: 次の図に示すフローには、終了 エレメントがありません。
次の図は、フロー要素とフロー構造にエラーがあることを示しています。
フローエレメントのエラーを表示する [#flow-editor-view-list-of-errors]
キャンバス上のエレメントのエラーアイコンは、エレメントに解決が必要なエラーがあることを示します。エレメントを選択して、そのエラーを [ビルド] サイド パネルに表示します。
次の図は、SMS エレメントにエラーがあることを示しています。
エレメント ID を表示するためのデバッグ [#flow-editor-debug-id]
フッターの デバッグ を選択します。エレメント ID は、各エレメントの上に表示されます。
IDを選択してコピーできます。
フローのナビゲーションとレイアウト [#flow-editor-navigation-layout]
ミニマップを使用してナビゲートする [#flow-editor-mini-map]
ミニマップを使用して、キャンバス内を移動します。ミニマップをドラッグして、特定のセクションまたは要素に移動します。
エントリーポイントに移動する [#flow-editor-go-to-entry-point]
フロー内の特定のエントリーポイントに移動するには、アイコンを選択し、必要なエントリーポイントを選択します。
ズームコントロールを使用する [#flow-editor-zoom-controls]
ズーム コントロールを使用して、視認性を高めます。ズームインおよびズームアウト、ズームのリセット、またはビューをキャンバスに合わせることができます。
接続線の外観を変更する [#flow-editor-connector-lines-appearance]
接続線(要素間の線分)の外観をカスタマイズします。
次のオプションを使用できます。
- ベジェ:滑らかな曲線
- 階段状: 角張った直角線
これらのオプションにアクセスするには、[設定] アイコンを選択し、オプションを選択します。
フロー要素の自動配置 (自動レイアウト) [#flow-editor-auto-layout]
自動レイアウトを使用して、フロー内のすべての要素を自動的に整理します。これにより、読みやすさが向上し、一貫した間隔が確保されます。
自動レイアウトでは、以前に適用した手動配置が削除されます。
自動レイアウトを使用した後でも、要素を手動で配置し続けることができます。
自動レイアウトは視覚的な配置にのみ影響し、フローのロジックは変更されません。
自動レイアウトを適用するには、自動レイアウトアイコンを選択します。
エディターは自動的に再配置し、すべてのフロー要素を均等に配置します。
古いエディタを使用する [#flow-editor-use-old-editor]
フッターで [古いエディターを使用** を選択して、以前のバージョンのフロー エディターを使用します。
フロー構成 [#flow-editor-flow-configuration]
フローに名前を付ける [#flow-editor-flow-name]
フローを識別する一意の名前を指定します。
キャンペーンタグを管理する [#flow-editor-manage-campaign-tags]
フロー内の キャンペーンタグを表示、追加、または削除します。
目標を設定する [#flow-editor-flow-goal]
フローの 目標 を設定します。
フロー設定を構成する [#flow-editor-flow-settings]
フロー設定を設定します。
フローを管理する [#flow-editor-manage-flow]
フローをテンプレートとして保存する [#flow-editor-save-flow-as-template]
フローを template として保存するには、フッターの 3 つのドットを選択し、テンプレートとして保存 を選択します。
フローを複製する [#flow-editor-duplicate-flow]
フローを複製 するには、フッターの 3 つのドットを選択し、複製 を選択します。
フローを削除する [#flow-editor-delete-flow]
フローを 削除 するには、フッターの 3 つのドットを選択し、削除 を選択します。