Intro.jsの使い方

オンライン実験・調査の教示は文章または画像で行うことが多いと思いますが,もう少しインタラクティブな教示を行いたいという場合はintro.jsというライブラリを利用することができます。

Intro.js - Lightweight, user-friendly onboarding tour library

具体的なintro.jsを使った例は↑のサイトの「Live demo」ボタンをクリックすると見ることができます。1.ページ内の任意の要素の強調(強調したい部分以外を暗くする),2.強調した要素に対する文章の表示の2つを行うことができます。

lab.jsで教示を表示した際に同じように強調と説明を行うことができれば,単純に文章や画像で教示するよりもわかりやすいかもしれません。では,実際に実装してみます。

今回はintro.jsはCDNで読み込んで利用します。intro.jsを使うには,intro.jsだけでなく,専用のcssファイル(intro.js.css)も必要なので2つを読み込みます(CDNはインターネット接続が前提なので,オフライン環境で使う場合にはダウンロードしたファイルをstaticにアップロードしてもOKです)。

CDNで読み込む場合はlab.jsの起動用HTMLに <!-- load introJS and introJS css-->以下の2行を追加してください。

<head>
  <meta charset="utf-8">
  <title>Experiment</title>
  <!-- viewport setup -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- lab.js library and experiment code -->
  <!-- load introJS and introJS css-->
  <script src="<https://cdn.jsdelivr.net/npm/[email protected]/intro.min.js>"></script>
  <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/introjs.min.css>">
  ${ header }
</head>

これでライブラリを読み込めるので,あとはintro.jsのドキュメントに従って設定していきます。色々な設定がありますが,HTMLの任意の要素を強調し,そこに文章を表示するというデモを作ってみます。HTMLタグの中にdata-intro="xxxx"と記述するとその要素が強調され,文字列("xxxx")が表示されます。文字だけの説明だと少々わかりにくいので以下の画像をご覧ください。周りがグレーになっている部分は実際は白い背景なのですが,intro.jsの機能で暗く表示されています。そして,「はじめに」という文章が強調されています。

HTMLとして以下が書いてあります。↑の画像との対応を確認してみてください。

<span data-intro='ご参加ありがとうございます😃'>はじめに</span>

このように強調と文章を表示したいHTML要素にdata-introを記述した上で,introJs().start()を実行すると強調と文章表示が可能です。具体的には,intro.jsを利用したいコンポーネントのScriptで「run」のタイミングで以下のコードを記述してください。

//set run 
//start introJS
introJs().start();

intro.jsにはdata-intro以外にも様々な要素があるので,intro.jsのドキュメントを参考に利用してみてください。

画面移動時に終了したい場合

intro.jsのウィンドウを最後まで進まずに画面を移動すると,intro.jsのウィンドウは画面に残ってしまいます。例えば,「スペースを押すと次に進みます」とintro.jsで教示を出した際に,intro.jsのウィンドウの終了ボタンをクリックせずにスペースキーを押すと,次の画面でも「スペースを押すと次に進みます」が残ります。このような状況を防ぎたい場合はScriptsの「end」のタイミング(画面を移動する際のタイミング)でintro.jsを終了させる必要があります。ただ,「run」と「end」でスコープが異なるため,「end」のタイミングでintroJs.exit()を実行しても「run」で動かしているintroJsは終了できません。そのため,「run」のグローバル変数(windowなど)に置いておく必要があります。

// run
// intro.jsをwindowに置いておく
window.intro = introJs()
window.intro.setOptions({
  nextLabel: '次へ',
  prevLabel: '戻る',
  doneLabel: 'OK',
  steps: [
    {
      intro: "教示"
    },
    {
      intro: "スペースキーを押すと次に進みます。"
    },
  ]
});
window.intro.start();
// end
window.intro.exit(); 

デモ