1-5. ポップアップのボタンを作成しよう

「1-4. ポップアップの見え方をプレビューしよう」でポップアップのテキストや画像が設定できたら、最後にポップアップに表示されるボタンの設定を行います。

ボタンをクリックしたときに指定のページに移動するだけではなく、そのままポップアップを閉じたり、選択したボタンによって次のステップに分岐したりと幅広い設定ができるのがSprocketの特徴です。

目次

• 1. ステップを追加する
• 2. 追加したステップの編集画面を表示する
• 3. 追加したステップを終了ステップに指定する
• 4. ステップを保存する
• 5. リンクエディターでステップ同士をつなげる
• 6. ポップアップのボタンを設定する
• 7. シナリオを保存する
• 8. ボタンの動作をプレビューで確認する

1. ステップを追加する

ボタンの設定は、シナリオの編集画面にある「リンクエディター」と呼ばれるエリアで行います。パターンの内容を表示して、右側にある［ステップを追加する］をクリックします。

［ステップを追加する］をクリックする

新たにステップが追加されて、オレンジ色の枠で囲まれます。見やすいように、ステップをドラッグして右側に移動しましょう。

ここでは1つのポップアップだけのシンプルなパターンを扱いますが、ゲームブックのように複数パターンへ分岐するツアー型のシナリオを作成するときは、［拡大］や［縮小］をクリックして全体を確認しながらシナリオの流れを設計します。

追加したステップを右側にドラッグする

2. 追加したステップの編集画面を表示する

追加したステップを見やすい位置に移動できたら、ステップの中にある鉛筆マークをクリックします。

追加したステップの鉛筆マークをクリックする

［保存されていないデータがあります］というメッセージが表示されたら［はい］をクリックします。これは「新しいステップを追加した」という変更を保存するという意味です。

保存のメッセージが表示されたら［はい］をクリックする

3. 追加したステップを終了ステップに指定する

［ステップ編集］画面が表示されたら、ステップを「終了ステップ」に指定します。終了ステップとは「ここでシナリオを終了する」という意味を持つ専用のステップのことです。今回はポップアップのボタンを1回クリックしたら終了するシナリオを作成しますので、終了ステップも1つとなります。

まずは［ステップID］を入力しましょう。最初から付けられているステップIDのままでも構いませんが、終了（terminate）を表す「ter_01」など、わかりやすい名前にしておくのがおすすめです。

［ステップID］を入力する

［終了ステップ設定］にある［このステップを、終了ステップに指定する］をオンにします。終了ステップにすると、各種のステップの設定項目が非表示になります。

［このステップを、終了ステップに指定する］をオンにする

4. ステップを保存する

終了ステップに指定したら、画面右下の［保存］をクリックします。［保存されました］と表示されたら、［シナリオ編集画面へ戻る］をクリックしてシナリオの編集画面に戻りましょう。

［保存］をクリックする

［保存されました］と表示された

5. リンクエディターでステップ同士をつなげる

シナリオの編集画面に戻ると、ステップが「終了ステップ」に変更されています。1つ目のステップの右辺にある丸マークにマウスポインターを合わせて、マウスポインターの形が手のひらマークになる位置から、2つ目のステップの左辺にある丸マークまでドラッグします。

1つ目のステップの丸マークから2つ目のステップの丸マークまでドラッグする

2つ目のステップの左辺で、マウスポインターの形が十字の矢印になる位置でマウスのボタンを離します。すると2つのステップが矢印でつながった状態になります。

つなげる位置を間違えてしまった場合は、矢印の先端をドラッグし直せば何度でも修正できます。

マウスポインターの形が十字の矢印になったらマウスのボタンを離す

6. ポップアップのボタンを設定する

2つのステップをつなげられたら、1つ目のステップにある鉛筆マークをクリックして、ステップの編集画面を表示します。保存のメッセージが表示されたら［はい］をクリックしてください。

1つ目のステップの鉛筆マークをクリックする

保存のメッセージが表示されたら［はい］をクリックする

ステップの編集画面を下にスクロールすると、2つのステップがつなげられたことで［ボタンリンク］の設定項目が追加されています。ここで、ボタンに表示したいテキストと、ボタンをクリックしたときに表示したいページのURLを入力します。

ここでは「詳しく見る」と書かれたボタンをクリックすると、専用のページに移動するように設定しています。

［ボタンリンク］の項目で［ボタンテキスト］と［リンクURL］を入力する

7. ステップを保存する

ボタンの設定ができたら、動作をプレビューで確認する前にステップを保存します。ポップアップ内容をプレビューするときは、保存しないとプレビューを正しく表示できないので注意しましょう。

［保存］をクリックする

8. ボタンの動作をプレビューで確認する

ステップの変更を保存したら、画面下部にある［プレビュー］をクリックします。プレビューの手順は「1-4. ポップアップの見え方をプレビューしよう」と同様です。

［プレビュー］をクリックする

表示されたメニューから［プレビューを確認する］をクリックします。

［プレビューを確認する］をクリックする

ブラウザーのタブが新しく開きますので、［プレビューを開始する］をクリックします。

［プレビューを確認する］をクリックする

ポップアップのプレビューに、設定したボタンが追加されていることを確認します。ボタンを押したときに正しくリンクが機能するか、実際にクリックして確認してみましょう。

ボタンのリンクをクリックする

ボタンをクリックして、設定したURLが表示されればボタンの設定は完了です。これで「ユーザーにキャンペーンを案内するポップアップを表示して、ボタンをクリックしたらキャンペーンページを表示する」というポップアップが完成しました。

設定したリンク先のページが表示された

確認できたら、プレビューが表示されているタブを閉じておきましょう。

次は、作成したポップアップを「いつ表示するか」という条件を設定し、実際にシナリオを公開します。

【次の記事】
2-1. シナリオを公開する流れを知ろう