jQueryライブラリで、注釈を使用したチュートリアルページの簡単実装

こんにちは、樋口です。

今回は、注釈を使用したチュートリアルページを簡単に実装できる、jQueryライブラリ「Chardin.js」についてご紹介します。
このライブラリを使用すれば、各要素に対する説明が簡単に表示することができます。

今回は下記ライブラリを使用して説明をしていきます。

jQuery

1.10.2

Chardin.js

1.6.2

BootStrap(CSS使用)

3.2.0

ライブラリの入手

chardinは下記公式サイトよりダウンロードできます。
Chardin.jsダウンロード(GitHab)
ページ遷移後、下記ファイルをダウンロードしてきます。

1. chardinjs.css
2. chardinjs.min.js

ライブラリ使用方法

本ライブラリでは、注釈として表示したい要素に下記項目を設定します。

data-intro

説明本文

data-position

「top」「left」「right」「bottom」(注釈表示向き)

HTMLファイル

まずは、HTMLファイルを作成します。

– index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,  initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Chardin.jsサンプル</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="chardinjs.css" rel="stylesheet">
  </head>
  <body>  
    <div id="wrap">
      <div class="container">
        <div class="col-lg-12">
          <div class="form-group" style="margin-top: 40px;">
            <label style="font-size: 20px;">Chardin.jsサンプル</label>
          </div>
          <form class="form-signin" id="commentForm">
            <div class="col-lg-12">
              <div class="form-group" style="margin-top: 10px;">
                <label class="control-label col-lg-2" style="font-size: 20px;">名前</label>
                <div class="col-lg-4">
                  <input class="form-control" id="cname" name="name" type="text" data-intro="名前入力項目です。" data-position="top">
                </div>
              </div>
            </div>
            <div class="col-lg-12" style="margin-top: 10px;">
              <div class="form-group">
                <label class="control-label col-lg-2" style="font-size: 20px;">セレクトボックス</label>
                <div class="col-lg-4">
                  <select class="form-control" data-intro="セレクトボックスです。" data-position="right">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-lg-12" style="margin-top: 10px;">
              <div class="form-group">
                <label class="control-label col-lg-2"></label>
                <div class="col-lg-4">
                  <img src="image.jpg" class="img-responsive" data-intro="自作画像です。" data-position="left">
                </div>
              </div>
            </div>
            <div class="col-lg-12" style="margin-top: 10px;">
              <div class="form-group">
                <label class="control-label col-lg-4"></label>
                <div class="col-lg-4">
                  <button type="button" style="width: 150px;" class="btn btn-info" id="info-on" data-intro="チュートリアルを表示。" data-position="bottom"> チュートリアルON </button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="chardinjs.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>

24行目：
　「data-position=”top”」を指定しています。
　これで、チュートリアルで「data-intro」に指定した値が、項目の上に表示されます。

32～38行目：
　「data-position=”right”」を指定しています。
　これで、チュートリアルで「data-intro」に指定した値が、項目の右に表示されます。

46行目：
　「data-position=”left”」を指定しています。
　これで、チュートリアルで「data-intro」に指定した値が、項目の左に表示されます。

54行目：
　「data-position=”bottom”」を指定しています。
　これで、チュートリアルで「data-intro」に指定した値が、項目の下に表示されます。

62～63行目：
　「jQuery」と「chardinjs」のライブラリを読み込んでいます。

以上で、HTMLは完成です。
サンプルを見てわかるように、さまざまなHTML要素に対して、設定を行うことが可能です。
次に、チュートリアル機能をONにするための、javaScriptについて説明します。

javaScriptファイル

次に、ライブラリ実行用のjavaScriptファイルを作成します。

– test.js

(function(){
    $('#info-on').click(function(){
        $('body').chardinJs('start');
    });
})();

3行目：
　「$(‘body’).chardinJs(‘start’)」を呼び出すことによりチュートリアルがONとなります。

実行結果

最後に、実行イメージを下記に載せます。

– 起動時

– 「チュートリアルON」ボタン押下時

最後に

今回紹介したライブラリを使用すれば、チュートリアルや説明ページを簡単に作成できます。
ぜひ使用してみてください！

今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。

それではまた。

《関連記事》
jQueryライブラリを使用して、簡単Form項目の入力チェック実装