シャウトアウトを構築するための手順

シャウトアウトスケルトンの構築

以下の手順に従って、ShoutOutの基本的なスケルトンを構築します。

1. テンプレートギャラリーから既存のシャウトアウトテンプレートを選択するか、[Blank（空白）]のテンプレートを利用します。
2. Campaign Wizard（キャンペーンウィザード）を使用して、ShoutOutのUIをカスタマイズします。
   • レガシーWYSIWYG：ShoutOutのキャンバスが（キャンバスのエレメントの設定で）バックカバーを持つように設定されている場合、バックカバーをタップしてShoutOutを削除するとタイプMAYBEのCTAとして処理されます。
   • 新しいWYSIWYG：新しいWYSIWYGでは、バックカバーは[Screen Overlay（スクリーンオーバーレイ）]と呼ばれるようになりました。 ShoutOutのキャンバスにスクリーンオーバーレイが配置されている場合（Canvasオブジェクトの[SCREEN OVERLAY（スクリーンオーバーレイ）]タブで）、スクリーンオーバーレイをタップすることでShoutOutを削除すると、選択したタイプのアクションとして処理されます。

シャウトアウトにウェブビューオブジェクトを追加

シャウトアウトは、ウェブビューエレメントを利用するメインキャンペーンタイプです。 シャウトアウトのウェブビューは、ホストアプリのUIでウェブサーベイ、動画、その他のリソースを表示することができます。

[Web-View（ウェブビュー）]アイコンを、アプリ画面で表示したい場所に[OBJECTS（オブジェクト）]ディレクトリーからドラッグします。

ウェブビューを追加またはクリックすると、デフォルトタブが[書式]タブになり、以下のことを行うことができます。

• キャンペーンに表示したいウェブビューのURLを入力します。
• 解除URL（このURLに到達すると、エンドユーザーからのアクションを必要とせずにキャンペーンが自動的に解除/終了する）を入力します。

  

次に、サイズと位置タブをクリックして、ウェブビューレイヤーの順序（z-indexと同様）、サイズとユニット、およびCanvasオブジェクトとの相対的な位置を設定できます：

ウェブビューエレメントは、Googleフォームを使用したSurveysとストリーミングビデオをサポートしています。 インラインビデオのサポートは、S3スクリプトを使用して提供することができます（WalkMe Mobileチームまでお問い合わせください）。

シャウトアウトにCarousel（カルーセル）ウィジェットを追加

Carousels（カルーセル）は、ウィジェットまたは他のシンプルなオブジェクトで構成されている複雑なオブジェクトであり、それぞれ設定を行うことができます。 Carouselウィジェットはシャウトアウトでの使用に最も適していますが、他の場所と同様に使用することもできます（例：サーベイにおける複数の質問のUIを改善）

Carousel（カルーセル）アイコンを、OBJECTSディレクトリからアプリの画面上でCarouselを表示したい場所にドラッグします。

キャンバスごとに1つのCarouselオブジェクトのみ追加可能です。

Main（メイン、Carousel）ウィジェットの設定

[Carousel（カルーセル）]アイコンを追加またはクリックすると、デフォルトオブジェクトはメイン（Carousel）ウィジェットに、デフォルトタブは[FORMAT（フォーマット）]タブになり、以下のグローバル設定が可能になります。

• Carousel（カルーセル）に表示されるサブオブジェクト（スライド）の番号、
  • デフォルトの番号は3（最大10）です。
  • また、右クリックのメニューから、またはオブジェクトの右側にある青いタブをクリックして新しいスライドを追加することもできます。
    
    
• スライドインジケーター（各スライドの下部にあるドットで現在どのスライドなのか、そして合計で何枚スライドがあるのかを示す）を表示するかどうか、
  • これらのインジケーターをクリックすることで、コンテンツ作成中のスライド間の移動やアプリのエンドユーザーによるスライド間の移動が可能になります。
  • また、プレビューデバイス画面でスライドをマウスオーバーすると、スライドの左右に表示される青い翼をクリックしたり、OBJECTS（オブジェクト）ツリーでスライドオブジェクトをクリックするだけで、スライド間を移動することもできます。
• アプリ画面でスワイプアクションを使用してスライド間のナビゲーションを許可するかどうか：

  

次に、［SIZE ＆ POSITION（サイズと位置）］タブをクリックして、カルーセルのレイヤーの順序（z-indexと同様）、サイズとユニット、Canvasオブジェクトとの相対的な位置を設定することができます。

サブオブジェクト（スライド）の設定

グローバルのCarouselの設定が完了したら、サブオブジェクト（スライドアイコン）の1つをクリックし、個別のサブオブジェクトを設定します。

スライドのサイズと位置の設定はCarouselオブジェクトで設定されているため、[FORMAT（フォーマット）]タブのみと[Slide Background Style（スライド背景スタイル）]と呼ばれるセクションがあり、以下のように設定することができます。

• 個々のスライドのbackground color（背景色）、
• 個々のスライドの不透明度（可視性）レベル
• 個々のスライドのコーナーの半径（コーナーの半径が大きいほど、スライドの角は丸くなります）、そして
• 個々のスライドの周りに境界線があるかどうか、またその場合、境界線の色と半径

  

[OBJECTS]ディレクトリからスライドに他のオブジェクトを追加することができます。 試してみましょう

シャウトアウトにリストを追加

リストウィジェットは、シャウトアウトタイプのキャンペーンでのみ使用できます。

List（リスト）アイコンを、OBJECTSディレクトリからアプリの画面上でListを表示したい場所にドラッグします。

List（リスト）は、ウィジェットまたは他のシンプルなオブジェクトで構成されている複雑なオブジェクトであり、それぞれ設定することができます。

Main object（List）の設定

リストを追加またはクリックすると、デフォルトオブジェクトはメインオブジェクトとなり、デフォルトタブは［FORMAT（フォーマット）］タブになり、以下のグローバル設定を行うことができます。

• ［General Text Style（一般的なテキストスタイル）］セクションで、以下のように設定します。
  • グローバルテキストの一般的なフォント、
  • グローバルテキストのフォントサイズ、
  • グローバルテキストのフォントの色、
  • グローバルのテキスト配置、そして
  • スタイル。
• ［List Items Style（リストのアイテムスタイル）］セクションで、以下のように設定します。
  • グローバルな背景色、
  • 不透明度（可視性）、
  • リストのアイテムの高さ（リストのテキストを囲む各矩形の高さ。これはリストに追加のアイテムを加える場合、スクロールせずにこれらを表示させたい場合に重要です）、また
  • サブオブジェクト間の境界線があるかどうか。
• ［Icon（アイコン）］セクションで、以下のように設定します。
  • 各リストアイテムの次にアイコンを表示するかどうか、またその場合、どのアイコンにするかを決定します。

    

次に、［FORMAT SECTIONS（フォーマットセクション）］タブをクリックすると、リストに追加するセクションが適用されます。 ここでは、以下のグローバルな設定を行うことができます。

• セクションタイトルセクションでは、全体的なグローバルセクションテキストフォント、セクションテキストフォントサイズ、セクションテキストフォントカラー、セクションテキストの配置、スタイルを設定します。
• ［Background（バックグラウンド）］セクションでは、セクションの背景の色、不透明度（可視性）のレベル、高さを設定します。

  

最後に、［SIZE ＆ POSITION（サイズと位置）］タブをクリックします。ここで、リストの（z-indexと同様）レイヤーの順序とユニット、Canvasオブジェクトの相対的な位置とリストのアイテムのサイズを設定することができます。

サブオブジェクト（リストアイテム）の設定

リストのデフォルトは、3つのリストアイテムとゼロのセクションですが、右クリックのメニューから、またはリストの右側にある青いタブをクリックすることで、リストアイテムとセクションを追加することができます。

グローバルなリストの設定が完了したら、サブオブジェクト（List Itemアイコン）の1つをクリックし、個別のサブオブジェクトを設定します。

タブは[FORMAT（フォーマット）]タブ1つだけで、そこから以下のように設定できます。

• ［Action（アクション）］セクションでは、エンドユーザーがこの個別のサブオブジェクトをクリックすると発生するアクションを設定します。
  • 新しいWYSIWYGの記事で、ボタン、図形、リスト、オーバーレイに利用可能なアクションのセクションをご覧ください。
• ［Font（フォント）］セクションでは、個別のサブオブジェクトのフォント色を設定します。
• ［Background（背景）］セクションでは、個別のサブオブジェクトの背景色と不透明度（可視性）を設定します。
• ［Icon（アイコン）］セクションでは、各サブオブジェクトの隣にアイコンを表示するかどうか、またその場合、どのアイコン、サイズ、位置に表示するのかを決めます。

  

Onboardingリスト