pg13

テーマネットワークとプログラムクライアント編

概要：

前回の内容： Webサーバのドキュメントルート（htdocs）にフォルダやコンテンツ関連ファイル（html, js, jsonなど）を作成することでWebコンテンツを作成した。

今回の内容： Webページに画像を埋め込みアニメーション制御する。アニメーション制御はCSSのアニメーション機能とJavaScriptによる画像切り替えによるアニメーションを扱う。

クライアントサイドのプログラムについて：

JavaScriptのプログラムファイルはWebサーバのドキュメントルート以下に配置する。

しかし、JavaScriptプログラムはWebサーバでは実行されていない。

WebブラウザがWebサーバからJavaScriptを含むファイルをダウンロードして読みこんだ後、Webブラウザ自身がJavaScriptを実行する。

JavaScriptにバグやセキュリティ上の問題があれば、Webブラウザやパソコンに意図しない影響（フリーズなど）が起きる可能性がある。

ローカルのパソコン側やスマフォ側で動作するプログラムを、クライアントサイドプログラムと呼ぶ。

サーバサイドは次回の演習で扱う。

演習１～４の参考サイト：

演習１ Webとアニメーション（SVG ＋ CSS）

Webの画像などのコンテンツにCSSやプログラムでアニメーションを設定する方法について

http://coliss.com/articles/build-websites/operation/css/how-to-use-css-animations-by-ibrahim.html

https://blog.codecamp.jp/svg_animation_intro

https://qiita.com/igara/items/1c614473e86460715ff9

http://maxwellito.github.io/vivus/

演習２静止画像ファイルでアニメーション（JavaScript ＋ CSS）

静止画像をプログラムで連続的に切り替えて表示し、アニメーションにする。

演習３コンテンツの埋め込み（GoogleMap や youtube の動画など）

scriptタグやiframeタグを利用した外部コンテンツの埋め込みについて

http://web-manabu.com/html-css57/

演習４ Web APIの利用

アカウント登録なしで利用できる外部サービスの利用

https://ferret-plus.com/2481

https://itpropartners.com/blog/8546/#Web_API

面倒な手続き不要！「Web_API」の超お手軽活用術をJavaScript

2017頃からAI系のWeb APIの提供が増えてきています。

アカウント登録制

素人だってパーソナルアシスタントを作れる！人工知能APIまとめ【2017年版】

【保存版】8企業のAIを“使ってみた記事”13個まとめ！画像認識・音声認識・自然言語処理まで網羅

リクルートがAIをまさかの無料公開。さっそくすべてのAPIを試しまくってみた

演習１の準備：

グラフィックス編集ソフト Inkscape の設定をします。

Inkscapeで画像フォーマット SVG(Scalable Vector Graphics)を編集します。

SVGに対応したブラウザで表示可能な画像やアニメーションを作成できます。

SVGはXMLというテキストファイルで記述されており、プログラムからの生成・加工もできます。

■ステップ１

Inkscapeの起動：

Windowsロゴ → Inkscape をクリック

※実習室では初回起動には1分～2分以上の時間がかかります。

※移動プロファイルの影響と推測

■ステップ２

Inkscapeの設定を調整：

編集 → Inkscapeの設定

入出力 → SVG出力

無用な style プロパティの扱い

styleのプロパティを除去する

チェックを入れて有効にする

属性と style プロパティのチェック

保存時

チェックを入れて有効にする

演習１

内容 Inkscape でタイトルロゴを作成する。

■ステップ３

Inkscapeの基本操作の練習

Inkscapeでアニメロゴ作成(1/4) オブジェクト操作編: youtu.be/qZlEGnNU0c8

Inkscapeでアニメロゴ作成(2/4) ペンツール編: youtu.be/bFHBDakaqfw

Inkscapeでアニメロゴ作成(3/4) オブジェクトをパスに変換・パスの編集・テキストをパスに変換編: youtu.be/t5UY7Hdftts

■ステップ４

ロゴを作成

手順概要：

・テキストツールでロゴの元となる文字をテキストオブジェクトに入力する

・位置やサイズを調整する

・メニュー

パス → オブジェクトをパスへ

でテキストオブジェクトをパスに変換する

・フィル（塗）を除去（× を選択）する

・ストローク（線）の色を設定する（シフト＋クリックで色を選択）

・画面左下隅のストロークをクリックして、フィル/ストロークメニューを表示する。

幅を調整する（マウスホイール回転）

余力があれば：

・オブジェクトツールで一文字ずつ選んで位置を移動する

・ノードツールでパスを編集する。

■ステップ５

・Web用データに設定を変更

設定変更の内容

ファイル → ドキュメントのプロパティ

ページサイズをコンテンツに合わせて変更 → ページサイズを画面全体または選択オブジェクトに合わせる

■ステップ６

・ファイル名を logo.svg にして保存

■ステップ７

アニメーションを以下の手順で設定する

・Inkscapeでアニメロゴ作成(4/4) テキストのストロークにVIVUSでアニメーション追加編 youtu.be/NYkyTMIZWUU

ロゴのSVGファイルにCSSのアニメーション設定を追加する作業を行う。

作業で利用するサイト：VIVUS http://maxwellito.github.io/vivus/

手順概要：

・VIVUSのサイトを開く。http://maxwellito.github.io/vivus/

※VIVUSはGoogle Chromeから開いてください※

・TOPページ下部にある、Vivus Instant のリンクを開く。

・先に作成して保存した logo.svg SVGファイルをドラッグ＆ドロップする。

・左サイドメニューを適当に調整する

Loop の On/Off

時間 Durationの設定（アニメーション開始から終了までの時間、ループ開始までの時間など）

・Download する。

■ステップ７a

・DownloadしたアニメーションロゴのSVGファイルのファイル名を

logo.svg

に変更する。

作業結果の例）

準備：

■ステップ８

XAMPPで Apache を起動

起動方法： Windowsロゴ → XAMPP → XAMPP Control Panel

■ステップ８a

Apache を start

■ステップ８b

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

自分の学籍番号が見つからない場合について：

前回出席していて同じPCを使用している受講生はフォルダーが設定済み。そのまま自分の学籍番号フォルダを開く

前回と違うPCを使用している受講生は自分の学籍番号でフォルダを新規作成して開く

前回欠席している受講生はファイル → フォルダーを開くから、

ボリューム（D:）の XAMPPフォルダ内の htdocs をフォルダーを設定する。

演習３

２０１９年度は演習３を先にやります。

■ステップ９

ロゴのファイル（SVGファイル）をHTMLファイルに埋め込む。

コンテンツの埋め込み（SVG画像や、youtube の動画や、GoogleMapの地図など）

scriptタグやiframeタグを利用した外部コンテンツの埋め込みについて

https://qiita.com/ka215/items/f9834dca40bb3d7e9c8b

フォルダ htdocs の下の 学籍番号フォルダ をクリックして以下を作成する。

フォルダ名 js03

■ステップ９a

フォルダ js03 をクリックして以下を作成する。

ファイル名 index.html

index.htmlの内容

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

※ファイル名と画像の表示範囲、幅width と高さheight は適当に調節してもＯＫ

■ステップ１０

ステップ７でDownloadしたアニメーションロゴのSVGファイルlogo.svgを js03フォルダにドラッグ＆ドロップでコピーする。

■ステップ１１

グーグルで名古屋文理大学を検索して埋め込み用のコードをindex.htmlにコピーする。

コピーする場所： </body>タグの上。<body>と</body>の間

例１）

地図を検索 → 共有 → 地図を埋め込む → HTMLをコピー

<iframe src="https://www.google.com/maps/embed?pb=!1m23!1m12!1m3!1d11611.524542302512!2d136.79242055451206!3d35.246946513640324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m8!3e6!4m0!4m5!1s0x6003a035fe08c113%3A0xd547ddc07a557d48!2z5ZCN5Y-k5bGL5paH55CG5aSn5a2m!3m2!1d35.248324!2d136.79141199999998!5e0!3m2!1sja!2sjp!4v1512668290787" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

youtubeで名古屋文理大学を検索して埋め込み用のコードをindex.htmlにコピーする。

例２）

動画を検索 → 共有 → 埋め込み → コピー

<iframe width="560" height="315" src="https://www.youtube.com/embed/VQy19Mx5lNU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

■ステップ１２

動作確認用する。 URL http://localhost/学籍番号/js03

余力があれば：

その他、WebサービスでコンテンツをHTMLで埋め込んで利用可能なものを探して利用してみよう。

例）

Twitter のツイート埋め込み機能

演習２

演習２の１

■ステップ１３

テキストの入力と表示

解説動画

フォルダ htdocs の下の 学籍番号フォルダ をクリックして以下を作成する。

フォルダ名 js01

■ステップ１３a

フォルダ js01 をクリックして以下を作成する。

ファイル名 index.html

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

<!DOCTYPE html>

<html>

<head>

</head>

<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>メッセージ<br>

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

</textarea>

</p>

</form>

</body>

</html>

解説ポイント：

・HTMLのFORMタグ

・FORMのinputタグの初期値ペンリンゴ

・BODYタグの onload属性

・INPUTタグの onkeydown促成

・JavaScriptとHTMLのDOM

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

・変数の値の保存先

■ステップ１４

動作確認用 URL http://localhost/学籍番号/js01

演習２の２

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

解説動画

■ステップ１５

さいころの画像をすべてダウンロードする

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

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

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

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

■ステップ１６

フォルダ htdocs の下の 学籍番号フォルダ をクリックして以下を作成する。

フォルダ名 js02

■ステップ１７

サイコロの画像を js02のフォルダに移動

■ステップ１８

フォルダ js02 をクリックして以下を作成する。

ファイル名 index.html

<!DOCTYPE html>

<html>

<head>

</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 の構成

■ステップ１９

動作確認用 URL http://localhost/学籍番号/js02

課題提出

解説動画

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

※今回は内容が多い。出来たとこまでで、アップロードしてＯＫ。

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

※ZIPファイルに第１２回の内容が入っていなくてもよい（第１２回の課題はスクショをWebclassにアップロード済み）

今回の作業フォルダを表示する：

ファイルエクスプローラー → PC → ローカルディスク（D:) → xampp → htdocs

ZIP圧縮ファイルの作成方法：

圧縮するフォルダ（学籍番号）を右クリック → 送る → 圧縮（zip形式）フォルダー

WebClassにアップロードする：

ファイル名学籍番号.zip

発展課題（チャレンジャー用）

演習２の３

CSSによるアニメーション設定の演習。

画像をマウスでクリック中（ボタンを押したままの状態）は画像をアニメーションさせる。

解説動画

作業１：

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

例） Vertical（垂直）で Wait Time の設定を 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 の部分を削除する。

作業２：

VS Codeで index.htmlに以下のように <head>タグの部分に <style>タグを追加する。

<style>と</style>の間に、作業１で作成したCSSのアニメーションコードを張り付ける

例）

<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コードではうまくアニメーション表示されない場合がある。

※※※ ランダム表示に挑戦したい受講生はページ末尾の内容を参照。

※※※※ クリック中ではなく、画像がクリックされたらにアニメーション開始にするには、さらに工夫が必要。

参照記事： https://www.ipentec.com/document/javascript-css-click-trigger-animation

動作確認用 URL http://localhost/学籍番号/js02

演習４

Web APIの利用

アカウント登録なしで利用できる外部サービスの利用

郵便番号検索ＡＰＩ http://zipcloud.ibsnet.co.jp/doc/api 利用規約（ライセンス）について確認する。

JSON とは？ Javascript Simple Object Notationの略で、プログラム言語Javascriptでデータをテキストで表現する形式のこと。

郵便番号検索ＡＰＩで郵便番号を検索し受け取った JSON データから住所を取り込んでＷｅｂに表示するコードを作成する。

方法1）

http://www.mit-support.com/service/zipcloud こちらのサイトを参考に、コードを借用。

演習3で作成した index.html に埋め込む。

<form> タグで囲われた部分に、ボタン生成用の javascriptのコード（<script>タグを含んだ全範囲）を埋め込む。

方法2）

http://program-memo.com/archives/41 上記リンク先のコードの代わりに、こちらのコードを使用してもＯＫ。

jQuery の読み込みコードは、 <head> タグの範囲に埋め込む。

入力フォーム用のコードは <body> タグの範囲に埋め込む。

$(funcion から始まる、jQuery用のコードは <script> タグで囲んでから埋め込む。

と

</script>

を追記し、この間に挿入。

作業例）

課題２の発展系

解説動画

・スライドショー

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

</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）画像をクリックで、画像変更のスタート・ストップを切り替えるコード

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

以下を追加する。追加する位置は、 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 が処理されずにループが止まらなくなる場合がある。

pg13

テーマ ネットワークとプログラム クライアント編

概要：

演習１の準備：

演習１

準備：

演習３

演習２

演習２の１

演習２の２

課題提出

演習２の３

演習４

テーマネットワークとプログラムクライアント編