私達の制作したプログラムのはたらきについて

私達は（）を目的として（）のプログラムを作り上げたわけだが、
それぞれのプログラムが利用者に対してどのような効果をもたらしていくのかを説明していきたい。

・（紙芝居のプログラム）
このプログラムは、利用者に学習を楽しいと感じさせることを目的としたプログラムである。
背景・セリフ・キャラクターの表情が利用者の操作で移り変わっていき、まるでゲームのようにストーリーが展開していく。
ストーリー仕立てで利用者を物語に引き込むことで、あたかも自らがこのゲームの主人公であると利用者自身に錯覚させ、
ゲーム内の主人公の目的を達成させるように仕向けることで、利用者の行動に明確な理由付を行うことが出来る。
これにより本やネットの情報を流し読みするよりも、楽しみのある学習をすることが可能になる。



１，ロード画面
・「jQuery」を使用して作られている。
「jQuery」とは、「JavaScriptライブラリ」と呼ばれるものの１つである。
「JavaScriptライブラリ」とは、JavaScriptの動きを予め大量に記述してある、誰かが制作してくれたJavaScriptファイルのことである。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
という記述をHTMLに追加することで、ネットから「jQuery」と名付けられたJavaScriptファイルを読み込み、「jQuery」が使用できるようになる。



ここからはソースの解説に入る。
ソースコードーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
//$(function(){...})=HTMLの読み込みが全て完了した後に中身を実行
    $(function() {
//var h = $(window).height(); =jQueryで、ウィンドウの高さを取得する？
	var h = $(window).height();

	$('#loader-bg ,#loader').height(h).css('display','block');
});

    $(window).load(function () { //すべての読み込みが完了したら実行
	//delay(1000)で1秒間動作の停止。
	//HTML要素.fadeOut( 時間(ミリ秒) )でHTML要素を少しずつアニメーションさせながら非表示にすることができるメソッド
	$('#loader-bg').delay(900).fadeOut(800);
	$('#loader').delay(600).fadeOut(300);
});

//5秒たったら強制的にロード画面を非表示
    $(function(){
//setTimeout…一定時間後に特定の処理をおこなう（繰り返さずに一度だけ）
	setTimeout('stopload()',5000);
});

function stopload(){
	$('#loader-bg').delay(900).fadeOut(800);
	$('#loader').delay(600).fadeOut(300);
}
ここまでがソースコードーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


・それぞれの働きの説明
(function(){...})と記述すると{...}の中に書かれた動きをHTMLの読み込みが全て完了した後に実行してくれる。
	var h = $(window).height();でhという変数の中にウィンドウの高さを代入している。
  $('#loader-bg ,#loader').height(h).css('display','block');により、ウィンドウの高さに合わせて新たな画面を仮面のように貼り付けている。
  $('#loader-bg').delay(900).fadeOut(800);
  $('#loader').delay(600).fadeOut(300);　
  delay(1000)で1秒間動作の停止。
  HTML要素.fadeOut( 時間(ミリ秒) )でHTML要素を少しずつアニメーションさせながら非表示にすることができるメソッド
  setTimeout('stopload()',5000);
  setTimeout…一定時間後に特定の処理をおこなう（繰り返さずに一度だけ）。これにより５秒たつと強制的にロード画面を非表示にすることが出来る。


・どのような記述で実装しているか
   <div id="loader-bg">
    <div id="loader">
      <img src="aiu.gif" width="80" height="80" alt="Now Loading..." />
      <p>Now Loading...</p>
    </div>
  </div>
  という形で実装している。２枚の絵を合体させたgifとNow Loading...の文字をHTML内で追加することで本当のロード画面のように見栄えを良くしている。



２，操作説明の画面（モーダウィンドウ）
ウィンドウが暗くなり、その上に表示される小さなウィンドウをモーダウィンドウという。
この小さなウィンドウはHTMLと同じように中身を記述することが出来る。
今回はそれを使って操作説明の画面を表示している。
ここからはソースの解説に入る。


ソースコードーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
$(function(){
    $('.js-modal-open').on('click',function(){
        $('.js-modal').fadeIn();
        return false;
    });
    $('.js-modal-close').on('click',function(){
        $('.js-modal').fadeOut();
        return false;
    });
  });


	<div class="content">
  <a class="js-modal-open" href="">クリックで操作のヘルプ画面を表示</a>
</div>


<div class="modal js-modal">
  <div class="modal__bg js-modal-close"></div>
  <div class="modal__content">
ここまでがソースコードーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


・それぞれの働きの説明
  $(function(){
    $('.js-modal-open').on('click',function(){
        $('.js-modal').fadeIn();
        return false;
    });
    $('.js-modal-close').on('click',function(){
        $('.js-modal').fadeOut();
        return false;
    });
  });
  クリックすることで新たな画面をフェードインさせる、
	クリックすることで画面をフェードアウトさせる、この２つを実装している。


<div class="content">
  <a class="js-modal-open" href="">クリックで操作のヘルプ画面を表示</a>
</div>
この記述で「クリックで操作のヘルプ画面を表示」という文字を表示させ、
その文字をクリックするとJSで記述してあるモーダルウィンドウをフェードインさせる動きを読み込み起動する。

<div class="modal js-modal">
  <div class="modal__bg js-modal-close"></div>
  <div class="modal__content">
	モーダルウィンドウをクリックするとフェードアウトさせる記述。





・どのような記述で実装しているか
<div class="content">
  <a class="js-modal-open" href="">クリックで操作のヘルプ画面を表示</a>
</div>
<div class="modal js-modal">
  <div class="modal__bg js-modal-close"></div>
  <div class="modal__content">
	ここからモーダルウィンドウの中に記述される内容
    <header>
      <img src="title.PNG" alt="Silk Re:road" class="title">
    </header>
    <p class="center"></P>
    <div class="inner" id="text">
      シナリオが表示されます。
    </div>
    <div class="box">場面に応じてキャラクターの立ち絵と背景画像が表示されます。</div>

  <p class="migisita">次へ進みます。</p>
  <p class="hidarisita">前に戻ります。</p>


  <!-- 再生ボタン -->
  <p id="btn-play">音のON/OFF</p>
      <a class="js-modal-close" href="">ヘルプ画面を閉じる(外の黒い画面をクリックしても閉じれます)</a>
  </div><!--modal__inner-->
		ここまでがモーダルウィンドウの中に記述される内容
という形で実装している。



３，音楽の再生ボタン
クリックすることで設定した音楽のON・OFFを切り替えられるようにしたボタンのこと。


ソースコードーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<audio id="bgm1" preload loop>
  <source src="bgm_maoudamashii_healing15.mp3" type="audio/mp3">
</audio>

<button id="btn-play" type="button"><i class="fas fa-play"></i></button


<script>
  const bgm1 = document.querySelector("#bgm1");       // <audio>
  const btn  = document.querySelector("#btn-play");   // <button>

  btn.addEventListener("click", ()=>{
    // pausedがtrue=>停止, false=>再生中
    if( ! bgm1.paused ){
      btn.innerHTML = '<i class="fas fa-play"></i>';  // 「再生ボタン」に切り替え
      bgm1.pause();
    }
    else{
      btn.innerHTML = '<i class="fas fa-pause"></i>';  // 「一時停止ボタン」に切り替え
      bgm1.play();
    }
  });

  /**
   * [event] 再生終了時に実行
   */
   bgm1.addEventListener("ended", ()=>{
    bgm1.currentTime = 0;  // 再生位置を先頭に移動(こいつはなくても大丈夫です)
    btn.innerHTML = '<i class="fas fa-play"></i>';  // 「再生ボタン」に変更
  });
</script>
ここまでがソースコードーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


・それぞれの働きの説明
<audio id="bgm1" preload loop>
  <source src="bgm_maoudamashii_healing15.mp3" type="audio/mp3">
</audio>
これで音楽ファイルを指定して、その音楽がループして流れるように設定している。


<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
再生ボタンを設定している。


<script>
  const bgm1 = document.querySelector("#bgm1");       // <audio>
  const btn  = document.querySelector("#btn-play");   // <button>


  btn.addEventListener("click", ()=>{
    // pausedがtrue=>停止, false=>再生中
    if( ! bgm1.paused ){
      btn.innerHTML = '<i class="fas fa-play"></i>';  // 「再生ボタン」に切り替え
      bgm1.pause();
    }
再生ボタンをクリックしたときに音楽が流れていなかったらボタンの画像を「再生」の画像に切り替え、音楽を再生する。


    else{
      btn.innerHTML = '<i class="fas fa-pause"></i>';  // 「一時停止ボタン」に切り替え
      bgm1.play();
    }
  });
	再生ボタンをクリックしたときに音楽が流れていたらボタンの画像を「一時停止ボタン」の画像に切り替え、音楽を停止する。


  /**
   * [event] 再生終了時に実行
   */
   bgm1.addEventListener("ended", ()=>{
    bgm1.currentTime = 0;  // 再生位置を先頭に移動(こいつはなくても大丈夫です)
    btn.innerHTML = '<i class="fas fa-play"></i>';  // 「再生ボタン」に変更
  });
</script>
音楽の再生が終わったあとに音楽の再生位置を先頭に戻し、ボタンの画像を「再生」の画像に切り替る


・どのような記述で実装しているか
すべてのソースコードをHTML内に記述している。




・（クイズのプログラム）
このプログラムは、利用者に知識を定着させること・意欲的に学習をさせることを目的としたプログラムである。
（４つ）の選択肢から１つを選んでいく形式であり、似たような単語・似たような数字を織り交ぜることで、
ストーリーやゲームの部分を軽視しての学習では回答が難しい問題を採用している。
そのため、真剣に学習に取り組まなければ高得点を取ることは困難である。
さらに、全問題の回答後にランキングを表示させることで、利用者に競争意識をもたせ高得点を意識させている。
これにより利用者に効率的で主体的な学習をもたらすことが可能になっている。







検証
・紙芝居のプログラムは、PCとスマホどちらでも丁度よい画面の比率になっていた。
　ロード画面もフェードアウトフェードインがしっかり動作しているので、少しの待ち時間があまり気にならない、待たされている感じが薄い
　テキストや背景画像、立ち絵の切り替えはスムーズに行われている。
　音楽の再生はOFFの状態から始まり、１曲しか流せないがON・OFFはしっかり動作し、音楽も聞こえた
　クイズのページは、ラジオボタンで選択肢は１つしか選べないようにしっかり出来ている。
　テキストの差し替えの様子もスムーズである。

・VRインタラクションは背景画像の３６０度画像が視点カーソルに合わせ、全体を見回せた。
　配置してあるオブジェクトは、しっかり動作していた
　オブジェクトに埋め込まれているURLにスムーズに飛ぶことが出来た。
　視点カーソルはアクティブに動いていた。
　VRの臨場感があった。

集めた情報
・テキストの差し替え方法（innerHTML）
・音楽の再生方法（audio）
・ロード画面の制作方法（jQuery）
・モーダルウィンドウの実装方法（jQuery）
・視点カーソルの実装（）



結論
・プログラムの触りの部分を書くのはスムーズに行けたが、完成させるのは遅い。
・ソースコードが長くなってしまう
・