Webアプリにチュートリアルを追加する

こんにちは、なかにしです。

最近はスマホ（ネイティブ）アプリにチュートリアルが存在しているのが普通になってきましたが、Webアプリにチュートリアルってあまり見かけないなーと思ったので、作成してみたいと思います。

実装方法を調べてみる
Intro.jsで実装
さいごに

実装方法を調べてみる

とりあえずマジョリティに従え！ということで調べてみます。

やはり多いのは、JSライブラリを使用した実装ですね。
Intro.js や shepherdjs あたりが有力みたいです。

自作でされている方もいらっしゃるのでしょうが、
今回調べた限りではほとんどヒットしませんでした。

Intro.jsで実装

Intro.js と shepherdjs ともに、オープンソースではありますが、商用利用はお金がかかるとのこと。

とりあえず簡単と評判の Intro.js を試してみます。

Webアプリを用意

簡単なWebアプリ的なものを用意しました。

▼ソースコードはこちら

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="title">
      <h1>Webアプリ</h1>
      <p>サンプルのWebアプリです。</p>
    </div>
    <div class="process-list">
      <h2>手順一覧</h2>
      <ul>
        <li>手順1</li>
        <li>手順2</li>
        <li>手順3</li>
      </ul>
    </div>
    <div class="thoughts">
      <h2>チュートリアルを作成した感想</h2>
      <p>思ったより簡単でした。10分くらいで完成しました。</p>
    </div>
  </body>

</html>

これに、チュートリアルを付けていきます。

JS, CSSの読み込み

今回はCDNでインストールします。
公式に書いてある通り、cssとjsをインストールしてきます。

<link rel="stylesheet" href="https://unpkg.com/intro.js/introjs.css">
<script src="https://unpkg.com/intro.js/intro.js"></script>

チュートリアルの設定

チュートリアルは、以下の関数で呼び出しができます。

introJs().start();

チュートリアル中に強調したい場所に、data-intro データ属性を付与します。

<div data-intro="チュートリアルの手順です。">

今回は、ボタン押下時にチュートリアルが開始し、色分けした三カ所を回るようにしました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/intro.js/introjs.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/intro.js/intro.js"></script>
  </head>

  <body>
    <button onclick="startIntro()">チュートリアル開始</button>
    <div class="title" data-intro="タイトルです。">
      <h1>Webアプリ</h1>
      <p>サンプルのWebアプリです。</p>
    </div>
    <div class="process-list" data-intro="チュートリアルの手順です。">
      <h2>手順一覧</h2>
      <ul>
        <li>手順1</li>
        <li>手順2</li>
        <li>手順3</li>
      </ul>
    </div>
    <div class="thoughts" data-intro="感想です。">
      <h2>チュートリアルを作成した感想</h2>
      <p>思ったより簡単でした。10分くらいで完成しました。</p>
    </div>
    <script src="index.js"></script>
  </body>

</html>

const startIntro = () => {
  introJs().start();
};

完成

これにて完成です！

さいごに

今回は、CDNで用意されている CSS や JS を読み込み、デフォルトの挙動を使用するように実装しました。

ご覧いただいた通り、デフォルト挙動でも結構リッチですが、もっとオリジナリティを出したい！という方向けに、CSS や JS はカスタマイズ可能になっています。

ドキュメントのサンプルを見る限り、カスタマイズすればさらにリッチなものが出来そうです。
https://introjs.com/docs

npmにも対応しているので、Reactなどにも簡単に導入できそうですね。
自作アプリをリッチにする為の、いいアクセントになりそうです。

今回はここまで！
Enjoy Hacking!!