環境
Rails 5.2.4.1
Intro.jsとは
Javascriptのライブラリです。
アプリなどを起動したときに出てくるチュートリアルを実装するためのものです。
このような動きをします。
公式HP:https://introjs.com/
手順
1．必要ファイルをダウンロード・配置
2．チュートリアルを表示させたい画面でファイルの読み込み
3．チュートリアル番号とメッセージの挿入
4．チュートリアルをスタートするための関数呼び出し
順に見ていきます。
1.必要ファイルをダウンロード・配置
こちらにアクセスし、更新日時の最も新しい「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>