【Rails】チュートリアル機能の実装

# 目標
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/944d3629-7cec-fa42-55f0-6ef950a62621.gif)
# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)
・[投稿機能実装](https://qiita.com/matsubishi5/items/1a5aeab651b5822d1f2c)

# 実装

## 1.Githubから必要ファイルをダウンロード

### ① 下記リンクへアクセスする。

[intro.js Github](https://github.com/usablica/intro.js)

### ② `Code`をクリックする。
![スクリーンショット 2020-07-16 10.21.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/66e15cbf-8922-b7ea-2270-81c913383fb3.png)

### ③ URLをコピーする。
![スクリーンショット 2020-07-16 10.21.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/37301da3-2db5-2d07-b8a2-1abdaf3b6563.png)

### ④ リポジトリをクローンする。

```terminal:ターミナル
$ git clone git@github.com:usablica/intro.js.git
```

### ⑤ クローンしたディレクトリ内の`intro.js`と`introjs.css`をアプリケーション内へ移動する。
![スクリーンショット 2020-07-16 10.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/712a3f40-d3f0-3242-908d-1d7bf0564abf.png)

## 2.Gemを導入

```ruby:Gemfile
# 追記
gem 'jquery-rails'
```

```terminal:ターミナル
$ bundle
```

## 3.`application.js`を編集

```js:application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery // 追記
//= require_tree .
```

## 3.JavaScriptファイルを作成・編集

```terminal:ターミナル
touch app/assets/javascripts/tutorial.js
```

```js:tutorial.js
$(function() {
  $('#tutorial').click(function() {
    introJs()
      .setOptions({
        nextLabel: '次 →',
        prevLabel: '← 前',
        skipLabel: 'スキップ',
        doneLabel: '終了',
        exitOnOverlayClick: false,
        showStepNumbers: false,

        steps: [
          {
            intro:
              '<b>Bookersへようこそ！</b><br>簡単にBookersの使い方をご紹介します！',
          },
          {
            element: '#introjs-step1',
            intro: 'タイトルを入力してください',
          },
          {
            element: '#introjs-step2',
            intro: '本文を入力してください',
          },
          {
            element: '#introjs-step3',
            intro: '「投稿」ボタンを押すと本を投稿することが出来ます',
          },
        ],
      })
      .start();
  });
});
```

### 【解説】

#### ① `tutorial`というIDを持ったボタンを押す事でチュートリアルが開始する。

```js
$('#tutorial').click(function() {}
```

#### ② チュートリアルの設定を行う為の関数を定義する。

```js
.setOptions({})
```

#### ③ メニューの設定を行う。

```js
nextLabel: '次 →',
prevLabel: '← 前',
skipLabel: 'スキップ',
doneLabel: '終了',
exitOnOverlayClick: false,
showStepNumbers: false,
```

#### ④ チュートリアルの設定を行う。

```js
steps: []
```

#### ⑤ 各モーダルの設定を行う。

**◎ `element`を設定しない場合**

```js
{
  intro: 'チュートリアルです。',
}
```

画面中央に表示される。
![スクリーンショット 2020-07-16 10.52.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/5cd94bd1-f1bc-fe6e-98ee-896ff7306db0.png)

**◎ elementを設定した場合**

```js
{
  element: '#introjs-step1',
  intro: 'タイトルを入力してください。',
}
```

設定したIDに対応するHTMLに焦点を当てて表示される。
![スクリーンショット 2020-07-16 10.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/f3cc3592-493f-2d9b-9f08-3e4b129be66f.png)

## 4.ビューを編集

### ① ボタンを設置する。

```slim:~html.slim
button id='tutorial'
  | チュートリアル開始
```

### ② IDを付与する。

```slim:~html.slim
= f.text_field :title, class:'form-control', id: 'introjs-step1'
```

## 他の動きで実装したい場合

### ① 下記リンクへアクセスする。

[intro.js 公式ページ](https://introjs.com/)

### ② ページ下部へスクロールすると下記のような画面になるので、動きを見たい場合は`DEMO`をクリックし、実装する場合は`SOURCE`を押す事でサンプルコードを見ることが出来る。
![スクリーンショット 2020-07-16 11.11.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/1b794df5-5d21-0168-71e9-b10cbb304d22.png)