Webアプリにマニュアルを！（後編）

さて、前回はシェパードナビの使い方を説明しました。

今回はその後編。

前回のままでは、サイトにアクセスするたびにチュートリアルが実行される

もしくはどこかをクリックしないと表示されない状態となってます。

個人的な理想は、

初回アクセス時は自動で表示。チュートリアルを最後まで見れば、次回以降は自動表示されなくなる。

です。

と、なると最後のボタンを押したタイミングでDBのユーザーテーブルに「チュートリアル完了」的なフラグを立てる。

ユーザテーブル等ない場合、クッキーに記録する。

の2択になりそうです。

WebRez+はユーザ登録して使用するタイプのシステムなので、ユーザーテーブルにフラグを持たせることにしました。

さて、実装です。

チュートリアルが終わったタイミングでユーザテーブルを更新するためのPG（仮でupdate.php）を「ajax」（仮関数名：TourFinish()）をからキックする事にしました。

で、記載したコードが以下の通りです。

<script>
	tour.start();
	TourFinish();
</script>

見たまんまですが、
　
　tour.start()が終了したら
　TourFinish()でDB更新に行く

事を期待したコードです。

試験的に、TourFinish()が呼ばれたらalertを出すようにしておきました。

これで実行すると、なんと先にTourFinish()内のalertが先に表示されてしまいました。

どうやらtour.start();は非同期処理になっていて、終了を待たずに次の関数を処理しているという事になります。

さて、どうしたものかといろいろ調べてやってみたものの、tour.start() の終了後に TourFinish() を動かす方法は見つかりませんでした。
（ただの私の知識不足だと思います！方法が分かる方、教えてください！！）

で、今回私はどうしたかというと、

『シェパードの方を改造してしまえ！！！』

という結論になりました。

なので、まずは前回cdn経由で呼び出していたシェパードjsをローカルホストにセットし、参照するように変更しました。

さて、ここからシェパードjsを解体・・・まずは・・・といろいろ見た結論。

コールバック関数を使うことにしました。

<script>
	tour.start(TourFinish);
</script>

こんな感じで使えるようにします。

ここからはシェパードjsの改造です。

まずはシェパードjs内を見ると「class Ec」の中に「start()」メソッドがあります。

ここがトリガーとなり、同クラス内の「next()」メソッドが呼ばれてモーダルを表示。
以降、addStepで定義したボタン「○○.Next」や「○○.Back」に応じて
「Next()」メソッドや「Back()」メソッドが実行され、最後のStepまでいったら「complete()」メソッドが実行される。

completeメソッドは明示的に「addStep」のボタンactionに指定する事もできるし、action:Nextでも、次のStepが無かったら自動的にcompleteがコールされるようになってます。

complete()メソッド内では「_done(a)」メソッドが呼ばれており、引数aには”complete”がセット。
この「_done(a)」メソッドで処理が終了しているようでした。

なので、最終的には「_done(a)」メソッド内の最後の処理として、引数が”complete”の場合にTourFinish()を実行できればよいという事になります。

さて、ゴールが見えたので後は実装です。

Class Ec 内のconstructor(a) にコールバック関数を格納する箱を追記します。

    constructor(a) {
    	let callback = '';    //tour.start()の第1引数にセットする関数名を入れる箱
		
		……
		
	}

次に「start()」メソッドに引数を定義

	start(callback_func){
		this.callback = callback_func; //ajaxのtourFinish()がセットされる想定
		
		……
		
	}

最後に「_done(a) 」で　this.callback　が実行されるように

	_done(a){
		let status = a; //引数aは最後の方で上書きされる処理が入っているので、別変数に退避
		
		……
		
		//このメソッドの最後に以下を追記
		if(status==="complete"){
			this.callback();  //TourStepが最後まで来たら、callback関数を実行する。
		}
	}

以上の改造を加えると、チュートリアルが最後まで終わって初めて、DBのユーザテーブルを更新しに行く処理が可能となります。

後は余談となりますが、addStepで設定するボタンの種類を増やす事も出来ます。

例えば、チュートリアルが長い場合、途中まで見たことを記録したい事があると思います。
そんなときはClass Ec 内の　next()メソッドをコピーして 「nextAndSave()」みたいなのを作成します。
その中で

	nextAndSave() {
		this.callback();
		//以降はnext()メソッドのまま
		...
	}

あとは「addStep」のボタン設定のとこで

    ○○.addStep({

		...

        buttons: [
            {
                text: '次へ(進捗を保存)',
                action: ○○.nextAndSave　//途中まで来た事を保存し、次回はこのステップから再開できるようにする。
            }
        ]
    });

とかしてあげると、進捗の保存が可能となります。
（ほか、コールバックで呼ぶ関数やサーバーサイドの処理にも手を加える必要はありますが、そこら辺は割愛します。）

こんな感じで色々と手を加えていけると、より便利に使えるようになります。