2022年8月23日読了時間: 5分

Storyline 360でテキストをすべてスクロールしたら次のアクションができるようにする！

お客様から同じようなお問い合わせいただきましたので、ブログとしてご紹介いたします。

皆さん、使用許諾などの長い文章を最後まで読んだら（スクロールしたら）、すぐ下のチェックボックスが有効になり、次のアクションができるようになるWebページをご覧になったことはありませんか？

同じようなことをeラーニングコンテンツでも実現したいというお問合せをいただきましたが、残念ながら2022年8月現在ではStoryline360にはスクロールパネルに対してのトリガーはありませんので、Storylineだけの機能では実現できません。

今回ご紹介するのはかなりマニアック😁な方法、JavaScriptを活用する方法です。まず下記サンプルコンテンツをご覧ください。

サンプルコンテンツを見る

２スライド目のスクロールパネル内のテキストをすべて読み終わると下部のボタンがアクティブになるようにしています。このような動作を実現する方法をご紹介いたします。

下準備

まずはサンプルコンテンツのようにスライドを作成してください。上記サンプルコンテンツの２枚目のようにスクロールパネル内に長いテキストを配置する訳ですが、スクロールパネルは少し操作に慣れが必要かもしれません。

今回のメインとなる２枚目のスライドの追加作業

まずスクロールパネルの下部にあるボタンですが、初期状態はクリックできないDisabledにします。また分かりやすいようにボタンの色もグレーにしておきます。

そしてメニューからスライド遷移はさせたくないのでメニューなどはオフにします。

また２枚目のスライドでは「Next（次）」「Previous（前）」ボタンも表示したくないのでオフにしておきます。

ではいよいよ根幹の作業に入っていきましょう。私が参考にしたページはChris Hodgson氏のブログ記事です。

Hodgson氏が記載してくれた下記のJavaScriptをスライドに適用していきます。

var x = document.getElementsByClassName("scrollarea-area");

$(window).resize(function(){
var newHeight = x[0].scrollHeight - x[0].offsetHeight;
var player = GetPlayer();
var height = newHeight;
player.SetVar("height",newHeight);
});

x[0].onscroll = function(){
var height = x[0].scrollHeight - x[0].offsetHeight;
var player = GetPlayer();
player.SetVar("num",x[0].scrollTop/height*100);
player.SetVar("height",height);
};

まずは下記のようにスライドトリガーを作成します。

トリガーイベントとして「timeline starts on this slide」を選択し、アクションとして「Excecute JavaScript」を選択します。そして赤字になっているJavaScriptをクリックします。このウィンドウに先ほどのJavaScriptを貼り付けます。

次に、このJavaScript内で参照している２つの変数（height, num）をStoryline上でも設定していきます。トリガーパネルの右上にある変数を管理するための[x]ボタンをクリックします。

二つの変数ともに、Number型で作成します。初期値は0です。

一応、確認用にスライド上に変数が確認できるテキストボックスを作成します。まずテキストボックスを作成し、テキスト内にカーソルが点滅している状態で、[INSERT]の[Reference]をクリックします。参照したい変数を選択し、[OK]をクリックします。

TIPS：テキストボックス内に「%変数名%」というように半角％で変数名を挟んでも変数を参照できます。

もう一つの変数用に同じようにテキストを作成し、変数を参照します。

ではここで確認したいと思います。プレビューだとJavaScriptなどの機能は確認できませんので、パブリッシュする必要があります。今回はとりあえずWeb用としてローカルにパブリッシュします。

パブリッシュされたコンテンツを確認しても、変数は動作しません。なぜならば、先ほどのJavaScriptではjQueryの関数を使用しているからです。（jQueryとはWEBサイトやWEBサービスを作成するうえで必要となるJavaScriptのライブラリです。）

そこでHodgson氏が記載してくれているように次のスクリプトをパブリッシュされた[story.html]内に追記し、保存します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

では改めて[story.html]を開いてみましょう。スクロールパネルをスクロールしてみると、デバッグ用に作成したテキストが二つの変数を参照して、動作していることが分かります。

後は仕上げです。スクロールパネルを一番下までスクロールすると[num]変数が100になる、もしくは限りなく100に近い数値になる（スクロールパネルの作りの状況による）ようが分かります。変数が100に近くなったら下部のボタンをクリックできる[Normal]状態にすればいいのです。ではトリガーを追加しましょう。追加するトリガーは下記のようになります。

トリガーイベントとして「variable changes num」を選択し、アクションとして「Change state of Button 1 set state to Normal」を選択します。そして重要なのがConditionsです。Conditionsを設定しないとnum変数が変化した時にボタンが常にNormalになってしまいます。「num ≧ 97」というようにnumが限りなく100に近づいたらという条件を追加してあげましょう。

ではもう一度パブリッシュします。しかし再パブリッシュすると当然ながら先ほどパブリッシュしたファイルを上書きします。つまり[story.html]にもう一度先ほどのJavaScriptを追記してあげる必要があります。

では改めて[story.html]を開いてみましょう。

これでうまくいきましたね！！

このままでも良いのですが、パブリッシュする度に[story.html]にJavaScriptを追記してあげるのは非常に面倒くさいですよね？そこでArticulateが公開しているページが参考になりました。

var myCode = function() {
	// Add your custom code with `$` or `jQuery` here.
	// この部分にコードを入れます
}
if (window.$ != null) { // If jQuery has already loaded, run myCode.

	myCode();

} else { // Else, load jQuery and then run myCode.

	var jQueryLoader = document.createElement("script");

	jQueryLoader.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";

	jQueryLoader.onload = function() {

		jQueryLoader.onload = null;

		myCode();

	}

	document.head.appendChild(jQueryLoader);

}

このJavaScriptと先ほどのJavaScriptを組み合わせることで、パブリッシュする度に[story.html]にJavaScriptを追記してあげる必要はなくなります。次のような感じですね。

var myCode = function() {
	// Add your custom code with `$` or `jQuery` here.
	// この部分にコードを入れます
	
	var x = document.getElementsByClassName("scrollarea-area");

	$(window).resize(function(){
	var newHeight = x[0].scrollHeight - x[0].offsetHeight;
	var player = GetPlayer();
	var height = newHeight;
	player.SetVar("height",newHeight);
	});

	x[0].onscroll = function(){
	var height = x[0].scrollHeight - x[0].offsetHeight;
	var player = GetPlayer();
	player.SetVar("num",x[0].scrollTop/height*100);
	player.SetVar("height",height);
	};

}
if (window.$ != null) { // If jQuery has already loaded, run myCode.

	myCode();

} else { // Else, load jQuery and then run myCode.

	var jQueryLoader = document.createElement("script");

	jQueryLoader.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";

	jQueryLoader.onload = function() {

		jQueryLoader.onload = null;

		myCode();

	}

	document.head.appendChild(jQueryLoader);

}

ではパブリッシュしてみましょう。[story.html]にJavaScriptを追記してあげることなく、jQuery関数も動作しているのが分かりますね！これで完成です！

今回ご紹介したJavaScriptを使った方法は、コンテンツ制作の幅を大きく広げることができます。JavaScriptでできることは限りなく実現できるからです。反面、Storylineの機能というよりもJavaScript自体の知識や経験が必要になり、トラブルシューティングも複雑になっていきます。しかし、これを機会にぜひJavaScriptの扉も開いてみてはいかがでしょうか？

YouTube動画としても説明しています。