レコード追加画面にチュートリアルをつけてみた

Legacy_Account1740 · 2019 年 8 月 21 日午前 9:44

複雑なアプリになると、説明なしでは操作方法がわからないことがあるかと思います。 WEBページにチュートリアルを追加できる、Intro.jsとChardin.jsを試してみました。

サンプル

アプリ

おすすめアプリの「日報」アプリを利用します。 Intro.js用とChardin.js用に1つずつ用意します。

共通ファイル

jQueryを利用します。 Cybozu CDNから利用できます。また、下記「setting.js」を読み込みます。

・setting.js

intros = {
  日付: {
    intro: '今日の日付', //両方に必要
    step: 1, //Intro.js用
    position: 'top' //Chardin.js用
  },
  作成者: {
    intro: '自動入力',
    step: 2,
    position: 'top'
  },
  部署: {
    intro: 'あなたが所属する部署',
    step: 3,
    position: 'right'
  },
  目標達成度: {
    intro: '客観的に評価',
    step: 4,
    position: 'right'
  },
  業務内容: {
    intro: '今日行った業務',
    step: 5,
    position: 'right'
  },
  '所感、学び': {
    intro: 'できるだけ多く',
    step: 6,
    position: 'right'
  },
  添付ファイル: {
    intro: '必要があれば',
    step: 7,
    position: 'right'
  }
};

Intro.js

デモ

コード

JavaScriptファイルとして、上記共通ファイル、「intro.min.js」、下記「sample-introjs.js」を順に読み込みます。また、CSSファイルとして「intro.min.css」を読み込みます。

・sample-introjs.js

(function() {
  "use strict";
  kintone.events.on([
    'app.record.create.show',
  ], function(event){
    $('.control-gaia').each(function(index, element){
      var intro = intros[$(element).find('.control-label-text-gaia')[0].innerText];
      if(intro){
        $(element).attr('data-intro', intro.intro);
        $(element).attr('data-step', intro.step);
      }
    });
    introJs().start();
  });
})();

※DOMのclass名を利用しているため、kintoneの仕様変更により動作しなくなる可能性があります。

Chardin.js

デモ

コード

JavaScriptファイルとして、上記共通ファイル、「chardinjs.min.js」、下記「sample-chardinjs.js」を順に読み込みます。また、CSSファイルとして「chardinjs.css」を読み込みます。

・sample-chardinjs.js

(function() {
  "use strict";
  kintone.events.on([
    'app.record.create.show',
  ], function(event){
    $('.control-gaia').each(function(index, element){
      var intro = intros[$(element).find('.control-label-text-gaia')[0].innerText];
      if(intro){
        $(element).attr('data-intro', intro.intro);
        $(element).attr('data-position', intro.position);
      }
    });
    $('body').chardinJs('start');
  });
})();