x.pg07

テーマネットワークとプログラム

準備

XAMPPで Apache を起動

Visual Studio Code でフォルダ htdocs の下の学籍番号フォルダを開く

演習１テキストの入力と表示

解説動画

フォルダ js01

ファイル名 index.html

フォルダの構成：

テキストボックスに入力したメッセージをテンプレートに埋め込んで表示するJavaScriptのコードの例）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body onload="test()">

    <script type="text/javascript">

        function test(){

            var word1 = document.myForm.word1.value;

            var word2 = document.myForm.word2.value;

            var temp =

わたしは${word1}を持っています。

わたしは${word2}を持っています。

わたしは${word2}${word1}を持っています。

`;

            document.myForm.message.value= temp;

    </script>

    <p>テキストボックスに入力したメッセージをテンプレートに埋め込んで表示する</p>

    <form action="#" name="myForm">

        <p>単語１：<input type="text" name="word1" value="ペン" onkeydown="test()" size="40" /></p>

        <p>単語２：<input type="text" name="word2" value="リンゴ" onkeydown="test()" size="40" /></p>

        <p>メッセージ<br>

        <textarea name="message" rows=11 cols=80 readonly="readonly">

        </textarea>

        </p>

    </form>

</body>

</html>

確認：

・HTMLのFORMタグ

・FORMの初期値

・BODYタグの onload属性

・JavaScriptとHTMLのDOM

・JavaScriptのテンプレートリテラルと変数

・変数の値の保存先

演習２

JavaScriptで、画面タッチで画像が切り替わるWebページを作成。

解説動画

動作確認用 GIF画像（６個）

各自で用意した適当な画像を使用してもOK。

↑の画像を利用する場合は、右クリックからダウンロードするか、ブラウザからドラッグアンドドロップでPCのデスクトップに保存する。

※ダウンロードする画像のファイル名と拡張子を確認して、プログラムから利用するために覚えておく。

フォルダ js02

画像を↑のフォルダに移動

ファイル名 index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

    <img name="imagebox" onclick="test()" src="1.gif" width="320" height="320">

    <script>

var files = [

    "1.gif",

    "2.gif",

    "3.gif",

    "4.gif",

    "5.gif",

    "6.gif",

];

var cnt=0;

var element = document.imagebox;

function test(){

  cnt++;

  document.body.removeChild(element);

  document.body.appendChild(element);

  document.imagebox.src=files[cnt % files.length];

</script>

</body>

</html>

※↑動画で使用していたコードを一部修正したバージョン。クリック時にアニメーションを再開するようにコードを修正。

解説：

img タグの属性 src onclick width height

DOM の構成

演習３

CSSによるアニメーション設定

解説動画

CSSのアニメーション用のコードを設定するサイト WAIT! Animate で適当なアニメーションのコードを作成する。

例） Vertical（垂直）で 2s（待ち時間２秒）の場合

.vertical {

  animation: vertical_3599 2.44s ease infinite;

  transform-origin: 50% 50%;

@keyframes vertical_3599 {

  0% { transform:translate(0,-3px) }

  3.27869% { transform:translate(0,3px) }

  6.55738% { transform:translate(0,-3px) }

  9.83606% { transform:translate(0,3px) }

  13.11475% { transform:translate(0,-3px) }

  16.39344% { transform:translate(0,3px) }

  18.03279% { transform:translate(0,0) }

  100% { transform:translate(0,0) }

↑

赤色の部分（先頭のピリオドを含む .vertical を削除し、img:active に変更する。また、アニメーションの無限ループを無しにする場合は、水色の infinite の部分を削除する。

index.htmlに <style>タグを追加し、以下のように、 <head>タグの部分にコピー＆ペーストする。

例）

<head>

    <meta charset="utf-8">

<style>

img:active {

  animation: vertical_4956 0.44s ease;

  transform-origin: 50% 50%;

@keyframes vertical_4956 {

  0% { transform:translate(0,-3px) }

  18.18182% { transform:translate(0,3px) }

  36.36364% { transform:translate(0,-3px) }

  54.54545% { transform:translate(0,3px) }

  72.72727% { transform:translate(0,-3px) }

  90.90909% { transform:translate(0,3px) }

  100% { transform:translate(0,0) }

</style>

</head>

※ ループアニメーションの場合は、 img だけでもOK. img:active では、クリックしたときにアニメーションが開始する。また、img:hover では、マウスが画像に重なったときにアニメーションが開始する（ただし、最初から重なっている場合は、一度マウスを移動し重ねなおしたとき）

※※ 画像のサイズが大きい場合、上記のサイトで作成したCSSコードではうまくアニメーション表示されない場合がある。

応用例を考える

解説動画

・スライドショー

クリックしなくても、一定時間で自動的に次の画像に進ませる

</script>タグの直前に以下のコードを追加する。

1000ms(１０００ミリ秒＝１秒）で繰り返し、クリックしたときの処理 test を呼び出すプログラムの例）

function loop() {

    test();

    setTimeout(loop,1000);

loop();

</script>

※ setTimeoutの設定値を 200ms など小さな値にすると、高速で画像を切り替えることになる。

※ コマドリアニメ表示などに利用してみよう。

・おみくじ・占い・ガチャ

最初に表示される画像を用意する

クリックの際、ランダムに画像が現れるようにする

あたり、ハズレで確率を変えるように工夫する（カードの枚数に差をつける、ハズレカードは同じ画像で多数登録しておく、など）

例1）ランダムに画像を選択させるコード

元は、 cnt++ で、変数の値を１増加させ、次の画像を表示させている分を修正（青色の部分）する。

以下のコードでは、

現在のカード番号に、０から（カード枚数－１）までのランダムな数値を加える。

計算結果がカード枚数を超えた場合は、先頭の番号に巡回して番号を決めている。

function test(){

  cnt+= Math.floor(Math.random()*files.length);

document.imagebox.src=files[cnt % files.length];

例2）画像をクリックで、画像変更のスタート・ストップを切り替えるコード

画像をクリックしたときに処理されるプログラムを変更する。

    <img name="imagebox" onclick="toggle()" src="1.gif" width="320" height="320">

以下を追加する。追加する位置は、 function loop() 前。

var startflag = 0;

function toggle() {

    if(startflag == 0) {

        startflag = 1;

    } else {

        startflag = 0;

function test() に一行加える。

function test(){

    if(startflag == 0) return;

上の例2 の動作をするように index.html を修正した結果のファイルをこのページの末尾に添付してある。ダウンロードして参考にしてよい。

※ 例2のコードをブラウザで実行した際、画像をクリックしても画像変更がストップしない場合がある。画像がアニメーションしている最中には、クリックイベントに反応しないと推測する。

※※ setTimeoutの設定値を 200ms 以下など小さな値にした場合、ブラウザのイベント監視のタイミングの関係で、onclick が処理されずにループがとまらなくなる場合がある。

課題提出

解説動画

htdocs の学籍番号フォルダを zip にアーカイブして、Webclass にアップロードする。

※第6回の内容と今回の内容が混ざった状態のフォルダをZIPして提出してもよい。

※ZIPファイルに第6回の内容が入っていなくてもよい（第6回にWebclassにアップロード済みの受講生）

x.pg07

テーマ ネットワークとプログラム

課題提出

テーマネットワークとプログラム