5. サイトツアーの利用方法¶

5.1. 利用できる属性¶

No	属性名	省略時の値	説明
1	data-intro	必須項目	ヘルプとして実際に表示される説明文です。
2	data-escape	true	data-intro に指定した文字列をエスケープするかどうかを指定します。 エスケープをしない場合は HTML を埋め込むことができます。
3	data-position	bottom	ヘルプを表示する対象の要素から、どこの位置に説明文を表示するか指定します。 省略すると対象の要素の下に説明文が表示されます。 right,left,top,bottom の指定が可能です。
4	data-align	center	data-position に top,bottom のどちらかを指定した場合のみ有効になります 説明文の横方向の表示位置を指定します。 left（左寄せ）,center（中央寄せ）,right（右寄せ） の指定が可能です。
5	data-verticalAlign	top	data-position に left,right のどちらかを指定した場合のみ有効になります。 説明文の縦方向の揃え位置を指定します。 top（上揃え）,middle（中央揃え）,bottom（下揃え） の指定が可能です。
6	data-width	200px	説明文を表示する要素の横幅を指定します。 未指定の場合は200px になりますが、ヘルプを表示する対象の要素が200px 未満の場合は、対象の要素の長さの横幅になります。
7	data-lineType	middle	ヘルプを表示する対象の要素と説明文表を結んでいる支持線の長さの種類を指定します。 short,middle,long の指定が可能です。 position に指定した値が top,bottom の場合は short（25px）,middle（75px）,long(150px)の長さになります。 position に指定した値が left,right の場合は short（50px）,middle（100px）,long (200px)の長さになります。
8	data-menu-position	right	ステップメニューの表示位置を指定します。 right,left の指定が可能です。 同じステップ内で別々の指定をした場合は、最初に指定した値が有効になります。
9	data-step	全表示	説明を表示する順番を数値で指定します。 同じ数値を指定した場合は、複数個の説明が同時に表示されるのでグループ化としても利用できます。 未指定の要素は最後に表示されます。

5.2. ヘルプドロップダウンからサイトツアーを利用する方法¶

intra-mart Accel Platform 上に新たに画面を作成し、そこにヘルプを埋め込む場合、テーマを適用している画面であれば、特定の属性を記述するだけでヘルプドロップダウンからサイトツアーを利用することができます。

5.2.1. サンプルプログラム（全表示）¶

上記の属性一覧から data-intro 属性のみの指定でヘルプを呼び出すことができます。

<div class="imui-operation-parts">
  <button data-intro="help1">削除ボタン</button>
  <button data-intro="help2">更新ボタン</button>
</div>

以下のようにヘルプが表示されます。

5.2.2. サンプルプログラム（ステップ機能）¶

上記の属性一覧から data-step 属性を追加で指定することでステップ機能付きのヘルプを呼び出すことができます。

<div class="imui-operation-parts">
  <button data-intro="help1" data-step="1">削除ボタン</button>
  <button data-intro="help2" data-step="2">更新ボタン</button>
</div>

以下のようにヘルプが表示されます。

5.3. テーマを使わずにサイトツアーを呼び出す方法¶

コラム

サイトツアーの呼び出しは クライアントサイド JavaScript を実行します。

クライアントサイド JavaScript の詳細は、 imuiSiteTour を参照してください。

注意

ここでの「テーマが適用されていない画面」とはヘッダーが表示されていない画面を指しています。

テーマが出力する head は必ず読み込んでください。

PageBuilder で実装可能な画面レイアウトの種類 を参考に、 head タグが出力される PageBuilder を利用してください。

<!-- このボタンをクリックするとサイトツアーを呼び出します -->
<button id="start_help">start</button>
<div class="imui-operation-parts">
  <button data-intro="help1">削除ボタン</button>
  <button data-intro="help2">更新ボタン</button>
</div>
<a data-intro="ここのヘルプは表示されません">sample_a</a>

<script>
  $(function(){
    $('#start_help').on('click',function(){
      // class="imui-operation-parts" 内の data-intro 属性を持つ要素のみヘルプ対象になります。
      $('.imui-operation-parts').imuiSiteTour();
    })
  })
</script>

5.4. ダイアログ内でサイトツアーを利用する¶

imuiDialog に useHelp 属性を指定することで、サイトツアーを呼び出すアイコンが表示されます。

上記の画像の赤枠の「？」アイコンをクリックすることでサイトツアーの呼び出しが行えます。