Logo
Logo
CTRLK

共有コンポーネント

フローエディター

備考

このページでは、新しいフローエディタについて説明します。

Momentsのフローエディターは、フローをデザインできる視覚的なコード不要のドラッグアンドドロップインターフェイスです。

フロー要素の追加と構成、詳細設定の構成、およびフローの管理を行うことができます。

フローエディターの使用を開始する [#flow-editor-get-started]

このセクションでは、エディターの構造とアクセス方法について説明します。

エディターで行ったすべての変更は、自動的に保存されます。

エディタへのアクセス方法 [#flow-editor-get-started-access-editor]

既存のフロー: 既存のフローの場合は、すべてのフロー ページに移動し、フローを選択します。フローがエディター ページで開きます。

新しいフロー: フローを作成すると、エディター ページで自動的に開きます。

エディタの構造 [#flow-editor-get-started-structure]

エディタには、次のセクションがあります。

  • キャンバス(左):フローの設計に使用されます。
  • ビルドサイドパネル(右):選択した項目を構成できる動的パネルです。
    • 要素構成: キャンバス上のエレメントを選択すると、このパネルにそのエレメントのフィールドと設定が表示されます。
    • タグ: フッターから タグ を選択すると、このパネルには使用可能なタグの一覧が表示されます。
    • フロー 設定: フッターから フロー設定 が選択されている場合、このパネルにはフローの設定が表示されます。
  • フッター(下):フローコントロールとメタデータ(フローの名前、フロー内のキャンペーンタグの数、フロー設定など)が含まれます。

次の図は、フロー エレメントの [ビルド] サイド パネルを示しています。

Image that shows the flow editor

要素の作成と管理 [#flow-editor-create-manage-elements]

拡張キャンバスコントロールを有効にする [#flow-editor-enhanced-controls]

拡張されたキャンバスコントロールにより、フローエディタとの対話が改善されました。これらを使用すると、次のことができます。

  • ナビゲーション: スクロールするか、マウスの右ボタンまたは中ボタンでドラッグするか、Space キーを押しながらドラッグして、キャンバス内を移動します
  • ズーム: タッチパッドをピンチするか、マウスで Cmd/Ctrl + スクロールを使用して、ズーム レベルを調整します。
  • エレメントの選択: エレメントを選択し、ドラッグして移動します。
  • 要素を複数選択: 複数の要素を選択し、ドラッグして移動します。

拡張キャンバス コントロールを有効にするには、[設定] アイコンを選択し、[拡張コントロール] を選択します。

従来のコントロールを使用するには、このオプションを無効にします。

Image that shows how to enable enhanced controls

フローにエレメントを追加する [#flow-editor-add-element]

  1. 既存のエレメントの横にある矢印を選択します。

    エレメントに分岐がある場合は、分岐の横にある矢印を選択して次のエレメントを追加します。

    Image that shows Image that shows how to add an element to the flow editor
  2. 使用可能なエレメントのリストから選択します。必要なエレメントを検索することもできます。

    エレメントがキャンバスに追加されます。

    Image that shows how to select an element

エレメントの編集または構成 [#flow-editor-edit-configure-element]

エレメントを選択して [ビルド] サイド パネルを開きます。このパネルでエレメントを設定できます。

Image that shows how to configure an element

要素の移動 [#flow-editor-move-element]

1 つのエレメントを移動する

  1. エレメントを選択します。
  2. キャンバス上のエレメントをドラッグして移動します。

複数の要素を移動する

  1. 拡張コントロールを有効にします。
  2. 必要な要素を選択します。
  3. キャンバス上の要素をドラッグして移動します。
Image that shows how to move an element

エレメントを複製する [#flow-editor-duplicate-element]

必要なエレメントを選択し、その上の 複製 アイコンを選択します。

Image that shows how to duplicate an element

要素の削除 [#flow-editor-delete-element]

1 つのエレメントを削除する

  1. エレメントを選択します。
  2. エレメントの上にある「削除」アイコンを選択します。

複数の要素を削除する

  1. 拡張コントロールを有効にします。
  2. 必要な要素を選択します。
  3. 要素の上にある [削除] アイコンを選択します。
Image that shows how to delete an element

新しいエントリーポイントを追加する [#flow-editor-add-entry-point]

既定では、フローには、フローの作成時に選択したエントリーポイントが含まれます。エントリ ポイントをさらに追加する場合は、[エントリーポイントの追加] を選択し、必要なオプションを選択します。

Image that shows how to add an entry point

検証とトラブルシューティング [#flow-editor-validate-troubleshoot]

フロー内のエラーを検証して特定します。

フローを検証する [#flow-editor-validate-flow]

検証を選択して、フローを検証します。

Image that shows how to validate the flow

フロー内のエラーのリストを表示する [#flow-editor-view-errors]

エラー を選択して、フロー内のすべてのエラーのリストを表示します。

エラーは、次のタブに分類されます。

  • フロー要素: フロー要素に固有のエラー。例: 次の図は、SMS(Short Message Service エレメントにエラーがあることを示しています。
  • キャンペーン: キャンペーンの失敗の原因となる可能性のあるエラー
  • フロー構造: フロー構造のエラー。例: 次の図に示すフローには、終了 エレメントがありません。

次の図は、フロー要素とフロー構造にエラーがあることを示しています。

Image that shows how to validate the flow

フローエレメントのエラーを表示する [#flow-editor-view-list-of-errors]

キャンバス上のエレメントのエラーアイコンは、エレメントに解決が必要なエラーがあることを示します。エレメントを選択して、そのエラーを [ビルド] サイド パネルに表示します。

次の図は、SMS エレメントにエラーがあることを示しています。

Image that shows an error message for the SMS element

エレメント ID を表示するためのデバッグ [#flow-editor-debug-id]

フッターの デバッグ を選択します。エレメント ID は、各エレメントの上に表示されます。

IDを選択してコピーできます。

Image that shows the error ID

フローのナビゲーションとレイアウト [#flow-editor-navigation-layout]

ミニマップを使用してナビゲートする [#flow-editor-mini-map]

ミニマップを使用して、キャンバス内を移動します。ミニマップをドラッグして、特定のセクションまたは要素に移動します。

Image that shows the mini map

エントリーポイントに移動する [#flow-editor-go-to-entry-point]

フロー内の特定のエントリーポイントに移動するには、アイコンを選択し、必要なエントリーポイントを選択します。

Image that shows the mini map

ズームコントロールを使用する [#flow-editor-zoom-controls]

ズーム コントロールを使用して、視認性を高めます。ズームインおよびズームアウト、ズームのリセット、またはビューをキャンバスに合わせることができます。

Image that shows zoom controls

接続線の外観を変更する [#flow-editor-connector-lines-appearance]

接続線(要素間の線分)の外観をカスタマイズします。

次のオプションを使用できます。

  • ベジェ:滑らかな曲線
  • 階段状: 角張った直角線

これらのオプションにアクセスするには、[設定] アイコンを選択し、オプションを選択します。

Image that shows how to change the appearance of connector lines

フロー要素の自動配置 (自動レイアウト) [#flow-editor-auto-layout]

自動レイアウトを使用して、フロー内のすべての要素を自動的に整理します。これにより、読みやすさが向上し、一貫した間隔が確保されます。

備考

自動レイアウトでは、以前に適用した手動配置が削除されます。

自動レイアウトを使用した後でも、要素を手動で配置し続けることができます。

自動レイアウトは視覚的な配置にのみ影響し、フローのロジックは変更されません。

自動レイアウトを適用するには、自動レイアウトアイコンを選択します。

エディターは自動的に再配置し、すべてのフロー要素を均等に配置します。

Image that shows the Auto layout option

古いエディタを使用する [#flow-editor-use-old-editor]

フッターで [古いエディターを使用** を選択して、以前のバージョンのフロー エディターを使用します。

Image that shows the mini map

フロー構成 [#flow-editor-flow-configuration]

フローに名前を付ける [#flow-editor-flow-name]

フローを識別する一意の名前を指定します。

Image that shows how to name the flow

キャンペーンタグを管理する [#flow-editor-manage-campaign-tags]

フロー内の キャンペーンタグを表示、追加、または削除します。

Image that shows how to manage campaign tags

目標を設定する [#flow-editor-flow-goal]

フローの 目標 を設定します。

Image that shows how to add a goal

フロー設定を構成する [#flow-editor-flow-settings]

フロー設定を設定します。

Image that shows how to configure flow settings

フローを管理する [#flow-editor-manage-flow]

フローをテンプレートとして保存する [#flow-editor-save-flow-as-template]

フローを template として保存するには、フッターの 3 つのドットを選択し、テンプレートとして保存 を選択します。

Image that shows how to save a flow as a template

フローを複製する [#flow-editor-duplicate-flow]

フローを複製 するには、フッターの 3 つのドットを選択し、複製 を選択します。

Image that shows how to duplicate a flow

フローを削除する [#flow-editor-delete-flow]

フローを 削除 するには、フッターの 3 つのドットを選択し、削除 を選択します。

Image that shows how to delete a flow