チュートリアルが簡単に作成できるEyeletのβ版を使ってみた！

Webサイトのチュートリアルを簡単に作れるEyeletのβ版[^1]を使ってみました。

以下のようなチュートリアルがほぼクリックのみで作成できます。
![](https://media.giphy.com/media/ZaWwHRPRsVrwYBEOD8/giphy.gif)
![](https://media.giphy.com/media/QBFk0R39M4wOIw3eG6/giphy.gif)

##事前準備

[公式サイト](https://eyelet.io/)からサインアップしてください。
サインアップに成功するとコンソール画面に移りますのでプロジェクトを作成しましょう。
<img width="331" alt="スクリーンショット 2019-06-11 8.01.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/f22a59e2-9f3d-9c3b-d270-b61f22e9a304.png">

プロジェクト名とチュートリアルを使用したいWebサイトのURLを指定します。
この時点ではまだチュートリアルは有効化されていません。
<img width="700" alt="スクリーンショット 2019-06-11 8.03.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/19f82e82-3c28-0bc9-9e80-9e3a21527fbc.png">

プロジェクトの作成に成功すると、次はセットアップへと案内されます。
<img width="294" alt="スクリーンショット 2019-06-11 8.08.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/67056910-6398-b1c0-a49c-ad217a08e614.png">

1. GoogleChromeの拡張機能をダウンロードし、指定したWebサイト上で拡張機能をクリック。
初回クリック時はプロジェクトIDを貼り付けし、有効化する必要があります。
有効化した後は、クリックで指定したWebサイト上のチュートリアルの再生と停止ができます。
![スクリーンショット_2019-06-11_16_19_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/27f8b6d2-801b-7c00-db39-1caabffd04db.png)
![スクリーンショット 2019-06-11 16.16.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/fa5b2332-2554-f283-8674-1b48b3bddea0.png)


2. チュートリアルを自動で開始するために必要なコードを`</body>`以下に埋め込む。

```javascript
<script type="text/javascript">
  var eyelet_wdgt = { 'id':'ProjectId'};
  (function(d) {
    var n = d.getElementsByTagName('script')[0],
    s = d.createElement('script');
    s.async = true;
    s.src = '//widget.eyelet.io/code.js';
    n.parentNode.insertBefore(s, n);
  })(document);
</script>
```

これでWebサイトにアクセスするとチュートリアルが自動的に動き出すようになります。

##チュートリアル作成

画面に表示されている案内に従って
Product tours → ADD ONE とクリックしていきましょう。
すると自分が指定したWebサイトに遷移すると編集用のウィジットが表示されます。
※ 表示されないときは一度拡張機能をクリックしリロードしましょう。
<img width="361" alt="スクリーンショット 2019-06-11 11.10.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/0e1df41b-9825-1474-4a73-76c4e1bcdc21.png">

---------------------------------------

ここからはクリックで簡単に作れますので、
読みながらよりも
ゴリゴリ動かしたほうが理解が早いかもしれません…😲

1.Choose new itemで新たに配置するものを選びます。

 - Splash screen  
目立たせい情報があるときに使うと良いでしょう。
例えば、どんなWebサイトなのか説明したりなど…
<img width="1174" alt="スクリーンショット 2019-06-11 12.31.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/3745eb02-a75c-6007-b775-1b5938a74040.png">
 - Annotation  
説明したい箇所に設置しましょう！
 <img width="524" alt="スクリーンショット 2019-06-11 12.38.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/b40e745e-9465-a403-0b94-0095e4ee52b0.png">

 - Pointer
クリックしてほしい箇所を強調できます。
  ![Jun-11-2019 12-43-40.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/03ca12d2-280c-5f3b-3a80-5e7876edf00c.gif)

 - Maker
Pointerと同じような気がする…。
クリックしてほしい箇所
  <img width="103" alt="スクリーンショット 2019-06-11 12.45.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/f9cc62ad-2b5e-60cd-2239-2e0b54fdb0ae.png">

 - Bot survey
Botによる対話形式のヒアリングができます。
Botの対話内容を設定したい場合は、後述するBotsページで行います。
![Jun-11-2019 12-49-03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/dc7ad659-b33b-d0da-04ef-4d5e97e440da.gif)

2.一通り終わったらFinal detailsをクリック。  
全体的なデザイン(背景色やボタンの色)とチュートリアルの開始タイミングを調整できます。  
SAVE AND GO BACKをクリックで保存完了です。

<img width="320" alt="スクリーンショット 2019-06-11 12.54.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/c49528f6-e98d-59f2-6939-260405c3dfe3.png">

以上でチュートリアルの作成は終わりです。


##Bot surveyで使用するBot作成
コンソール画面のBots → + をクリックで作成画面へ遷移ができます。
回答別に返事をし、内容によってはテキストベースで理由の入力を促せます。
<img width="1152" alt="スクリーンショット 2019-06-11 14.22.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/aab7c23a-e295-953d-5cd4-a0f6a1539cb3.png">
アクションとアクションをつなげる設定だけわかりづらかったため手順を説明します。
任意のアクションをクリックして、
ADD NEW ACTION → BUTTONS　でアクションの一覧が表示されます。
そこで繋げたいアクションをクリックすれば完了です。
<img width="877" alt="スクリーンショット 2019-06-11 14.30.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/36fa1b95-f703-5658-5fe8-67aa966f3b2a.png">



##チェックリスト作成
Webサイト内でユーザーにしてほしいToDoをリストで示したいときに使用すると良いでしょう。
表示位置や表示させるページなども設定できます。
<img width="573" alt="スクリーンショット 2019-06-10 8.23.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/388a446d-7aee-6ee0-ef78-9ec5622f15ab.png">

##集計結果をみる
 - アクセスしたユーザーの情報
![スクリーンショット 2019-06-11 14.53.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/d99e2997-4a96-1d96-ff50-2728eb726a66.png)
 - Botへのユーザー回答率
![スクリーンショット 2019-06-11 14.53.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/f5f26dbd-1f20-dc63-e4ce-c222e5dae068.png)
 - 回答別のグラフ
![スクリーンショット 2019-06-11 14.52.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/47cb7466-65f8-a585-4005-fdbf6e7c5e49.png)
 - チュートリアル完遂率、内訳
![スクリーンショット 2019-06-11 14.53.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/26c515c4-0680-100a-e94d-d39b96c1ba21.png)


##最後に
まだβ版のため使いづらい部分もありますが、
サクサクとチュートリアルやBotが作成できるのはとても楽しいです。
この記事を書いてる最中にチュートリアルを作成できるIntro.jsを知りました。
https://introjs.com/
https://github.com/usablica/intro.js/
チュートリアルを作成するのに一般的な方法って何だろう？っていう疑問が生まれました🤔

以上！

[^1]: β版のため8/1まで制限なしで使用できます。