フレックスエディタ編集画面の全体像と、各エリアの機能について説明します。
画面上のどこで何ができるのかを網羅的に解説しており、操作に迷った際のリファレンスとして利用できます。

編集画面の構成

フレックスエディタの編集画面は以下の要素で構成されています。

1. ヘッダー

左側

以下ができます。

• 接客一覧画面に戻る

• ブランドスタイル設定をする

  • ブランドスタイル設定については「フレックスエディタのブランドスタイル設定」をご確認ください。

• 使用テンプレートを確認する

中央

アクション名を変更できます。

右側

以下ができます。

• 一つ前に戻す・一つ後に戻す

• プレビュー：実際にサイト上でテスト表示します

  ※使い方については「アクションを実サイト上でプレビューする」をご確認ください。

• 保存する

  • 以下3種類の保存方法があります ※保存方法については「フレックスエディタで作成したアクションを保存する」をご確認ください。

    • 保存

    • コメントして保存

    • テンプレートとして保存

      • こちらを利用することでテンプレートとしてすぐに呼び出すことができるようになります
        

2. ステート/表示設定

以下ができます。

• ステートの作成・編集

• アクションの表示設定

詳しい操作手順は「フレックスエディタのステートの設定方法」をご確認ください。

アクションの表示設定

アクションの表示・非表示設定ができます。
例：50%スクロールされたら表示する、10秒後に非表示にする
※詳細は「アクションを設定する > 表示設定をする」をご確認ください。

3. レイヤー

エレメント（要素）の追加・編集・削除ができます。
このレイヤー構造に基づいてアクションが作られます。
レイヤー構造で、要素感の余白や要素の並びを管理することで規則性が保たれ、綺麗な見た目のUIを実現します。
※詳細については「フレックスエディタのレイヤー構造とレイアウト化」をご確認ください。

4. 共通コード設定とユーザー情報変数

共通コード設定

フレックスエディタの「共通コード設定」を使用して、接客アクション全体にカスタムCSSを適用したり、JavaScriptで動作を制御できます。
※設定方法は「フレックスエディタの共通コード設定によるCSS・JavaScriptでのカスタマイズ 」をご確認ください。

ユーザー情報変数

接客が表示される人ごとに、その人が持つ情報を表示できます。
※設定方法は「フレックスエディタでユーザー情報変数を利用する」をご確認ください。

5. ツールバー

画面モードを切り替えられます。

• 各種モード

  • 編集モード（鉛筆アイコン）：アクションを編集できます

  • 操作モード（指指しアイコン）：クリック時などの挙動を確認できます

  • ブラウザで確認する（地球儀アイコン）：サイト上でどう見えるか確認できます

• デバイス変更

  • モバイル・タブレット・PCそれぞれの画面での見え方を見ながら各種モードに切り替えが可能です。
    ※使い方は「フレックスエディタで作成したアクションを確認する」をご確認ください。

6. プレビューエリア

画面上で直感的にデザインをカスタマイズできます。
変更を加えると変更内容が即時に反映されます。
※詳細は「フレックスエディタのエレメント基本操作」をご確認ください。

7. プロパティエディタ

各要素の設定を変更できます。
フレックスエディタでは3つのレイヤーがあります。

• モーダル：レイアウトやエレメント全体を管理しています

• レイアウト：複数のエレメントをグループ化して管理しています

• エレメント：ボタンやテキストなどの要素一つ一つを指します

それぞれのレイヤーで設定できるもの

◯モーダル

• 表示設定

  • 画面の表示位置や背景動作（閉じる、ステート変更など）や背景色（透過）、表示エフェクトを設定できます

• スタイル

  • 横幅やz-indexを設定できます

◯レイアウト

• 基本情報

  • 並び方向や並べ方、子要素の間隔、横幅、高さ、余白を設定できます

• スタイル

  • 背景色や背景画像、角丸、枠線、シャドウ、領域外の表示を設定できます

• クリック時の動作

  • 動作やカスタムイベントを設定できます

  • リンク遷移：指定したURLへ遷移します

    • 新しいタブで開く:リンクを開く際に、同じタブに開くか、新しいタブで開くか指定します

    • URLをデコード:URLをデコードして遷移します

  • スライド遷移：スライダー内の表示を切り替えます

  • ネイティブ機能呼び出し：アプリ側のネイティブ機能を呼び出す設定です。

  • 閉じる：表示中の接客を閉じます

  • イベントハンドラー：クリック時に、特定の動作を呼び出して実行（発火）させます

  • カスタムイベント：クリック時に次を満たすように指定した名前のカスタムイベントを発生させます

    • 英小文字またはアンダースコア(_)から始まる

    • 英小文字・数字・アンダースコア(_)のいずれか合計2文字以上

• 絶対配置

  • ポジションや上側からの距離、右側からの距離を設定できます

• 属性カスタマイズ

  • CSSで特定の要素にスタイルを適用するため、対象のエレメントやレイアウトにIDまたはclass属性を付与できます。

• CSSカスタマイズ

  • 直接CSSを記述してカスタマイズできます

◯エレメント
フォントや画像のサイズ、カラーなどの基本設定、属性カスタマイズ、CSSカスタマイズができます。
以下はテキストの例です。

※各エレメントの編集可能な項目については「フレックスエディタの各エレメントのプロパティ項目」をご確認ください。