WebアプリケーションのチュートリアルをJavascriptで表現したい
- 業務でとあるWebアプリの使い方をより簡単に理解してもらえる様に、実際の画面に操作ガイドや設定項目の説明をチュートリアルの様に表示したい要件があり、巷にあるJavascriptライブラリで使えるライブラリが無いかちょっと探してみた。
intro.js
概要
既存のHTMLタグにプロパティを追記することで、
操作説明や案内が表示できる。
メリット
- ライブラリ本体と、関連するCSSを夫々1ファイルづつインポートするだけで 基本的な設定が済んでしまう為、既存のコードに様々なJavascriptをインポートしていても、 影響が限定的。
- 説明パネル、対象項目のハイライト等がデフォルトで表示される。細かい設定をしなくても それっぽく動作する為、初期導入コストが低めで済みそう。
デメリット
- 特筆すべきデメリットはなし
サンプル
参考URL
https://introjs.com/
http://www.atmarkit.co.jp/ait/articles/1402/03/news080.html
Bootstro.js
概要
既存のHTMLタグにBootstro用のCSSクラスを設定して利用する。
説明パネルの内容も同様にクラス以降に説明パネル用のプロパティとして、利用するタグそれぞれに設定する。
メリット
- 説明パネル、対象項目のハイライト等がデフォルトで表示される。細かい設定をしなくてもそれっぽく動作する為、初期導入コストが低めで済みそう。
- CSSクラスで動作を割り当てるので、説明内容を共通化したい時等は、共通化したぶんだけ導入コストを抑える事はできそう。
デメリット
- $(document).ready メソッドに開始用のメソッド実行を入れたりする分、既存の画面動作に何らかの依存関係が発生する可能性が否定できない。
- 説明パネル用に入れる設定も実装箇所毎にひとつひとつ設定しなければならない為、導入時の実装量はintro.jsに比べて多くなりがち
サンプル
参考URL
http://clu3.github.io/bootstro.js/
http://design-develop.net/web-design/bootstro-js.html
Chardin.js
概要
既存のHTMLタグにChardin用のプロパティを設定して利用する。
説明パネルの内容も同様にクラス以降に説明パネル用のプロパティとして、利用するタグそれぞれに設定する。
メリット
- 他2種と比べた時に大きく違うのが、1ページ内の全要素のチュートリアルを一度に表示するものなので、全体の操作の流れを説明する時はわかりやすいかもしれない。
- 表示開始が独自のjavascript Functionになっている為、表示のタイミングを自由に決める事ができる。
デメリット
- 1項目づつ説明していく仕組みでない為、操作手順が伝わりづらい可能性がある。
サンプル
参考URL
http://notsleeeping.com/archives/2584
http://heelhook.github.io/chardin.js/