どうも、まさとらん（@0310lan）です！
今回は、Webサービスの初回チュートリアルなどでよく使われる、ステップ・バイ・ステップのガイド付きチュートリアルが手軽に開発できるJavaScriptライブラリをご紹介します！
使い方は非常にシンプルで扱いやすいので、すぐにツアーガイドを起動して動かすことができるはずです。また、中・上級者向けに多彩なカスタマイズができるように設計されているのも魅力でしょう。
個人利用から商用目的まで、いずれも無料で活用できるのでご興味ある方はぜひ参考にしてください！
【 TourGuide JS 】
■「TourGuide JS」の使い方
それでは、「TourGuide JS」をどのように使えばよいか詳しく見ていきましょう！
最初にライブラリのインストールをしておきます。「TourGuide JS」では、npmかCDNを利用したインストールが可能です。
npmの場合
$ npm i @sjmc11/tourguidejs
CDNの場合
以下のCSSファイル、JavaScriptファイルをHTMLから読み込んでください。
https://unpkg.com/@sjmc11/tourguidejs/dist/css/tour.min.css https://unpkg.com/@sjmc11/tourguidejs/dist/tour.js
ライブラリのインストールは、これで完了です。（※本記事ではCDNを利用しています）
簡単に動作確認をしてみましょう。
まずは、単純なh1タグを作ってみてください。
<h1>Hello TourGuide JS</h1>
このh1タグを対象に「TourGuide JS」を起動させるには、「data-tg-tour属性」を次のように付与します。
<h1 data-tg-tour="最初のステップ">Hello TourGuide JS</h1>
設定する属性の値は、好きな文字列で構いません。ここで設定した文字が、ダイアログに表示される仕組みです。
あとは、JavaScriptで「TourGuideClient」を作成したのち、start()メソッドを実行するだけです。
const tg = new tourguide.TourGuideClient(); tg.start();
ブラウザで確認すると、「TourGuide JS」が動作していることが分かります。
基本的な確認ができたので、もう少し詳しい使い方について見ていきましょう！
ここまでのサンプルコードは、以下のリンクから閲覧できますのでぜひ参考にしてください。
＜参考リンク＞
■ツアーガイドのチュートリアルを作ってみよう！
さきほどは、「TourGuide JS」の基本的な使い方として、対象の要素に「data-tg-tour属性」を付与しました。これは対象の要素が増えたとしても、同じように機能します。
たとえば、以下のようなシンプルなWebページがあるとします。
ここで、いくつか複数の要素に「data-tg-tour属性」を付与してみましょう。
ブラウザで確認すると、1つずつステップ・バイ・ステップでガイドが進んでいくのが分かります。
この方法は簡単でよいのですが、ステップの順番を意図的に指定したい場合もあります。そのときに備えて、いくつか状況に応じた属性も提供されています。
実際に、新しく次の属性を2つ追加してみましょう！
- data-tg-title：ダイアログにタイトルを付ける
- data-tg-order：ガイドの順番を指定する
特に、ステップの順番を決められる属性は覚えておくと便利でしょう。数値を指定すれば、番号順にガイドが進んでいくようになります。
上記の場合、navタグの「data-tg-order属性値」に「1」が指定されているので、ガイドの一番最初に表示されるという意味になります。
今回は、「data-tg-title属性」も付与しているので、ダイアログの上部にタイトルが一緒に表示されているのも分かります。
このように、ガイドの対象となる要素へ「属性」を付与していくだけで、基本的なツアーガイドが完成します。
■JavaScriptでツアーガイドを制御しよう！
ここまでは、HTMLに属性を付与するという形式で「TourGuide JS」を利用してきました。実は利用方法として、もう1つの手段が提供されています。
それは、「オブジェクト形式」でツアーガイドを定義するという方法です。
使い方は簡単です。
これまで、各HTML要素に付与していた属性を、オブジェクトにまとめるイメージです。
たとえば、以下のケースを見てください。
{ title: "最初のステップ", content: "これはタイトルです", target: "#one", order: 1, }
これは、ツアーガイドのダイアログに表示される「タイトル（title）」と「内容（content）」であり、対象となる「HTML要素（target）」と「順番（order）」がオブジェクトにまとめられています。
これをJavaScriptから実行するだけで、HTML要素に属性を付与しなくても、ツアーガイドが表示されるというわけです。
ちなみに「target」プロパティの値は、idやclassの属性値をそのまま利用できます。
また、このオブジェクトを複数用意すれば、いくつかのステップが登録されたツアーガイドも簡単に作れます。
const steps = [ { title: "最初のステップ", content: "これはタイトルです", target: "#one", order: 1, },{ title: "ステップ2", content: "これはナビゲーションです", target: "#two", order: 2 } ]
上記の例では、2つのオブジェクトを配列に格納しています。これにより、2つのステップが登録されたツアーガイドになります。
あとは、このオブジェクトを「TourGuideClient」のオプションに設定すればOKです。
const tg = new tourguide.TourGuideClient({ steps: steps });
ブラウザで確認すると、しっかり動作しているのが分かります。
さらに、「addSteps()」メソッドを利用すれば、プログラムから動的にステップを作成して追加することも可能です。
tg.addSteps([ { title: "追加のステップ", content: "これは動的に追加されたテキストです" } ])
このようにJavaScriptから制御する方法は、自由にカスタマイズができるので、さまざまなケースで応用できる利便性があります。
補足ですが、「target」プロパティを省略したり、存在しない要素を指定したりすると、自動的にダイアログは画面中央に表示される仕組みとなっています。
■多彩なオプションを使ってみよう！
「TourGuide JS」は独自のCSSを作って、見た目のデザインなどを自由にカスタマイズできるのですが、あらかじめ用意されているオプションを変更するだけでも、多彩な調整ができます。
標準で提供されているオプションはたくさんあるので、ここではいくつかピックアップして、その機能をご紹介します。
まずオプションの使い方ですが、基本的には、設定用のオブジェクトを1つ用意するといいでしょう。
const options = { // オプションの設定を記述する };
そして、「TourGuideClient」を作成するときに、「options」を引数に設定しておけば適用されます。
const tg = new tourguide.TourGuideClient(options);
例として、以下の設定項目を使って、ツアーガイドの「カラー」を変更してみましょう。
- backdropColor：全体の背景色を設定
- dialogClass：ダイアログのCSSクラスを設定
「backdropColor」は、ツアーガイドが起動して、画面全体が暗転する際の背景色を、RGBA形式で設定できます。
「dialogClass」は、CSSのクラス名を指定するだけで、自作したスタイルを適用させることができます。
実際のコードとしては以下のようになります。
const options = { backdropColor: "rgba(51,102,255,0.84)", dialogClass: "sampleStyle" }
「dialogClass」には、あらかじめ作成しておいた「sampleStyle」というCSSのクラス名を指定しました。今回は、背景色と文字色を変更しています。
ブラウザで確認してみると、カラーが変更されているのが分かります。
同じ要領で、今度は以下のようなオプションを設定してみます。
{ // ダイアログの幅 dialogWidth: 400, // 閉じるボタン（×）を非表示にする closeButton: false, // 「Next」ボタンの表示テキストを変更 nextLabel: "次へ", // 「Back」ボタンの表示テキストを変更 prevLabel: "戻る" }
ブラウザで確認すると反映されていますね。
特にボタンのラベル変更は、日本語対応する際によく使うので、覚えておきましょう。
また、ステップ・バイ・ステップのチュートリアルにおいて、現在の進捗を意味するドットアイコンの表示位置や、進捗状況を可視化するバーを追加するオプションなども用意されています。
{ // ドットアイコンの表示位置 stepDotsPlacement: "body", // 進捗バーを追加 progressBar: string = "#333" }
確認してみると、デフォルトのデザインが変更されているのが分かりますね。
他にも、多数の細かいオプションが提供されているので、これらをうまく組み合わせるだけでも、自由度の高いカスタマイズができます。
また、ステップごとに任意の関数を実行したり、ツアーガイド終了前後に独自関数を処理したりする制御系のメソッドも、いくつか提供されています。
このように、JavaScriptを活用することで、「TourGuide JS」をベースにした独自のツアーガイドを、Webサービスやアプリに組み込むことができるわけです。
■エンジニア騎士とクエリの魔女公開中
paizaでは「エンジニア騎士とクエリの魔女」を公開しています。
異世界に勇者パーティーとして召喚された新人ITエンジニアの男女。
目覚めるとそこは、剣（コード）と魔法（SQL）が支配する世界だった。
騎士と魔法使いの冒険が、今始まる――
Python、PHP、JavaScript、C言語、Javaなど28言語で遊べるプログラミングゲームです。
あなたのプログラミング&SQLのスキルを解き放って異世界に平和をもたらしてください！！
■まとめ
今回は、ガイド付きのチュートリアルを手軽に開発できるJavaScriptライブラリをご紹介しました！
今回の記事で解説した内容だけでも、いろいろなチュートリアルを作って公開できるはずです。ほとんど学習コストがかからないのが特徴的で、プログラミング初心者でも、すぐに使い始めることができるでしょう。
ぜひみなさんも、独自のチュートリアルを作ってシェアしてみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
