環境

Rails 5.2.4.1

Intro.jsとは

Javascriptのライブラリです。
アプリなどを起動したときに出てくるチュートリアルを実装するためのものです。
このような動きをします。

公式HP:https://introjs.com/

手順

1．必要ファイルをダウンロード・配置
 2．チュートリアルを表示させたい画面でファイルの読み込み
 3．チュートリアル番号とメッセージの挿入
 4．チュートリアルをスタートするための関数呼び出し

順に見ていきます。

1.必要ファイルをダウンロード・配置

https://github.com/usablica/intro.js/tags

こちらにアクセスし、更新日時の最も新しい「Tags」の「zip」をクリック。PCにzipファイルをダウンロードします。

ダウンロードしたら、zipファイルを右クリックし「すべて展開」。

展開したフォルダの中から「intro.js」と「introjs.css」を探します。

「intro.js」は「/assets/javascripts/intro.js」

「introjs.css」は「/assets/stylesheets/introjs.css」

となるように各ファイルをコピペすると配置は完了です。

2．チュートリアルを表示させたい画面でファイルの読み込み

表示させたい画面のHTMLファイルを開きます。
head部分に下記を追記します。

×××.html.erb

<head>
...
...
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>

※この際、「src=""」および「href=""」内のパスについては編集の必要はありません。

以上でファイルの読み込みは完了です。

3.チュートリアル番号とメッセージの挿入

左上に出てくる赤丸の数字と、説明文を先ほどと同じファイルに記述します。

×××.html.erb

<div data-intro="説明のテキストを入力します" data-step="1">
<div data-intro="説明のテキストを入力します" data-step="2">

4.チュートリアルをスタートするための関数呼び出し

最後に設定した説明文を表示させましょう。

「body閉じタグ」の直前に以下を追記します。

×××.html.erb

...
   </div>
   <script>
    jQuery(function(){
        introJs().start();
    });
   </script>
   </body>
</html>

サンプル

実際に動作確認できたHTMLファイルです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <script src="js/intro.js"></script>
    <link rel="stylesheet" href="css/introjs.css" type="text/css">
  </head>
  <body>
   <div class="icons clearfix">
    <div class="box">
     <div class="col-xs-2 col-md-1 left icon">
      <img src="/assets/log.jpg" data-intro="過去の記録が見れます" data-step="1">
     </div>
     <div class="col-xs-2 col-md-1 right icon" data-intro="110番通報します" data-step="2">
      <img src="/assets/police.jpg">
     </div>
    </div>
    <div class="col-xs-4 col-md-2 center icon">
     <img src="/assets/microphone.jpg">
    </div>
    <div class="box">
     <div class="col-xs-2 col-md-1 left icon" data-intro="ボイス「録音を開始します」ON/OFF" data-step="3">
      <img src="/assets/sound.jpg">
     </div>
     <div class="col-xs-2 col-md-1 right icon" data-intro="N国党に通報します" data-step="4">
      <img src="/assets/nkoku.png">
     </div>
    </div>
   </div>
   <script>
    jQuery(function(){
        introJs().start();
    });
   </script>
   </body>
</html>