情報システム設計論II ユーザインタフェース(1)

Size: px

Start display at page:

Download "情報システム設計論II ユーザインタフェース(1)"

ときありたけ
5 years ago
Views:

1 中村研究室ゼミ Web 関係色々中村聡史 1

2 Web でユーザの操作を取得テキスト入力していないのに送信ボタンを押さないで! ユーザが入力する前には入力例を示しておいて, 入力開始しようとしたら消したい! リアルタイムに値を取得して表示したい! ユーザが地図上で操作をしたら, 表示内容を変更したい! 2

3 基本的に JavaScript はなにかイベントが発生した時に, どうするのかということを記述する言語もちろんそれだけではありませんが, そういうのに適している言語 3

4 JavaScript 例えばテキストボックスに文字が入力されるまでや, チェックボックスが入力されるまで送信ボタンを押させたくない 4

5 JavaScript Netscape Communications が開発した言語ユーザの操作にあわせて処理を変える <script type="text/javascript">  </script> 5

} println( " 約数の数は "+count ); 6 <script type="text/javascript"> var i = 1; var } alert( " 約数の数は "+count );

6 Processing と JavaScript 同じ所 : プログラミング言語なので変数, 計算, 条件分岐, 繰返し, メソッド, クラスなど同じ 12345の約数の数を数えるプログラム int i = 1; int count = 0; while( i <= ){ if( (12345 % i) == 0 ){ // を i で割った余りが // 0 だったら count を増やす count++; } i++; } println( " 約数の数は "+count ); 6 <script type="text/javascript"> var i = 1; var count = 0; while( i <= ){ if( (12345 % i) == 0 ){ // を i で割った余りが // 0 だったら count を増やす count++; } i++; } alert( " 約数の数は "+count ); </script>

7 7 JavaScript 超入門スクリプトタグで囲う変数の定義は var 変数名 int とか float とかの型はない行の最後にはセミコロン関数の定義は function 関数名 ( 引数 ); 引数の定義にはvarは不要返り値は return で!( 一緒 ) 変数とか文字列をくっつける際は + ifとかforとかwhileとかは一緒

8 8 もし ~ だったら if( 条件 A ){ 条件 Aのときの動作 } else if( 条件 B ){ 条件 Bのときの動作 } else { どの条件にもあわなかったときの動作 } 等しい == より大きい > より小さい < など

9 JavaScript 超入門 JavaScript は単体でも動作するけれど,HTML 内部で何かのユーザ操作が行われた時に, リロードせずにページ上で動作するためのものクリックされた! じゃあ... 文字入力された! じゃあ... マウスカーソルが上に来た! じゃあ... マウスカーソルがどこかに行った! じゃあ... などなど 9

10 alert( ' ほげほげ ' ); ほげほげと表示 JavaScript 超入門 onclick: クリックされた時に発生 <input type=button onclick="alert(' こんにちは ');"> onfocus: フォーカスがあったときに発生 onblur: フォーカスが離れた時点で発生 10

11 11 関数を呼び出す <script type="text/javascript"> function kansu() { } </script> alert("ok! "); <input type="button" value= OK" onclick="kansu()"> OK ボタンが押された時に kansu() が呼ばれる

12 重要なこと : DOM ツリー DOM とは Document Object Model HTML や XML をアプリケーションから利用するための API のこと HTML や XML の任意のタグの情報を取得したり, 差し替えたりすることができる DOM ツリーとは,HTML や XML の木構造情報木構造の情報 12

13 DOM の情報を取得するほげほげと表示されている. このほげほげをクリックすると, ひげひげという文字に変更したい!(onclick はクリックされた時という意味 ) 13 <script type="text/javascript"> function change(){ var node = document.getelementbyid("hoge"); node.innerhtml = " ひげひげ "; } </script> <div id="hoge" onclick="change()"> ほげほげ </div>

14 14 ツリー情報へのアクセス document.???? document は HTML や XML の文書自体 document.getelementbyid("hoge"); document から,id が hoge の Element( 要素 :DOM ツリーのノード ) を取得 var node = document.getelementbyid("hoge"); 変数 node に取得した Element( ツリーのノード ) を代入 node.innerhtml = ' ひげひげ '; node の内部 HTML をひげひげに変更 node.style.backgroundcolor = '#f00'; 背景を赤色に設定する

15 15 DOM の情報を取得する他の実装方法引数として this( 自分自身 ) を渡すここで this はそのタグ ( ノード ) 自体になるので node.innerhtml = " ひげひげ "; とできる <script type="text/javascript"> function change( node ){ node.innerhtml = " ひげひげ "; } </script> <div id="hoge" onclick="change( this )"> ほげほげ </div>

16 演習テキスト入力ボックスと送信ボタンを用意し, 入力ボックスに focus が入った時, 外れた時に入力内容をチェックして何も入力されていなければ送信ボックスを押せないような状態にし, 何か入力されていたら送信ボックスを押せるようにせよ! また, 入力ボックスに nakamura と入力されていたら, 送信ボックスのボタンをイイネと変更するようにせよ 16

17 手順フォームタグやテキストボックス, 送信ボックスを用意し, それぞれに ID を付与する送信ボックスを最初利用不可にする disabled テキストボックスのフォーカス / アンフォーカスの時に, 何か入力されていたら送信ボックスの disabled を false にし, 何も入力されていなかったら disabled を true に設定するテキストボックスのフォーカス / アンフォーカスは onblur や onfocus で取得できるので, テキストボックス内で onblur, onfocus 時の処理を書く! 17

18 JavaScript は別ファイルへ HTML と JavaScript が混在しているとぐちゃぐちゃになってしまう (PHP と JavaScript が混在すると恐ろしいことに ) 可能な限り JavaScript ファイルは別ファイルへ main.js などに保存し script タグで呼び出し <script src="main.js"></script> 18

19 おまけ ( ランダムな占い ) <script language="javascript"> uranai = new Array( " 大吉 ", " 大凶 ", " 小吉 " ); uranainum = 3; num = Math.floor(Math.random()*uranaiNum); document.write(uranai[num]); </script> 19

20 JavaScript の開発 Google Chrome を使おう! ツールのデベロッパーツールを利用する! エラーが赤文字で表示される! 20

21 Ajax: Rich User Experiences Web 上での豊かな体験 (Ajax などによる )

22 Ajax のインパクトサーバとやり取りしながら動的に変化 22 Fuyuko Ito

23 これまでと Ajax 以降 23 Fuyuko Ito

24 Ajax Asynchronous JavaScript + XML XMLHttpRequest という JavaScript のクラスを利用動的にページを変更することが出来るため, ストレス無くユーザは使うことが出来るように! 開発がチト面倒 24

25 JavaScript めんどいそもそも JavaScript は色々と面倒くさいもっと楽したいアプリケーションフレームワーク! 25

26 アプリケーションフレームワーク Prototype.js jquery Google Web Toolkit などなど 26

27 jquery を導入しようにアクセスして最新版のファイルをダウンロード public_html に直接おいても良いが, できれば機能で整理した方が良いため, 新たに lib というフォルダ ( 他のフォルダ名でも良い ) を作成し, そこに入れたほうが良い lib はライブラリの意味 <script src="lib/jquery min.js"></script> 27

28 jquery + main.js + HTML <html> <head> <script src="lib/jquery min.js"></script> <script src="main.js"></script> </head> <body> <div id="hoge" class="text"> ほげほげ </div> <form action="test.html" method="get" id="input_form"> <input type=text name="msg" id="msgbox"> <input type=submit name="send" id="sendbutton" disabled> </form> </body> </html> 28

29 main.js というファイルを作成 main.js というファイルの中に下記のプログラムを書いてみよう $(function(){ プログラム }); で jquery に関するプログラムを書く ( そういうものだと思って下さい ) $('# クラス名 ').on( ' イベント名 ', function(){ イベント時の処理 }); 29 $(function(){ $('#hoge').on('click', function(){ $('#hoge').css('background','#f00'); }); }); クリックされた時に色を変更する

30 main.js というファイルを作成以下だけだとちゃんと動作しない $('#hoge').on('click', function(){ $('#hoge').css('background','#f00'); }); コードが読み込まれた時点では,id=hoge の div タグを読み込んでいないため $(function(){ プログラム }); は, とりあえずコードを全部読み込んでから ~ という意味になる 30

31 Element(Node) の指定方法 element を選択するには id : $("#idname") class : $(".classname") tag : $("tagname") name: $("[name=target]") 31

32 32 イベント一覧 mouseover: 要素にマウスが乗った時 mouseout: 要素からマウスが離れた時 mousedown: 要素上でクリックボタンが押された時 mouseup: 要素上でクリックボタンが離れた時 mousemove: 要素上でマウスが動かされた時 click: 要素がクリックされた時 dblclick: 要素がダブルクリックされた時 keydown: 要素にフォーカスした状態で, キーボードのキーが押された時 keyup: 要素にフォーカスした状態で, キーボードのキーが離された時 focus: 要素にフォーカスがあたった時 blur: 要素からフォーカスが外れた時 change: 入力内容が変更された時 resize: 要素がリサイズされた時 scroll: 要素がスクロールされた時

33 Element(Node) の操作 $( 指定 ). css( ' プロパティ名 ', ' 変更後の値 ' ); スタイルシートを変更する $( 指定 ). attr( ' 属性名 ', ' 変更後の値 ' ); 属性値を変更する $( 指定 ). on( ' イベント名 ', その時の動作 ); その時の動作は function(){... } で書かれる $( 指定 ). animate( アニメーションの指定 ); アニメーションの指定では最初に {} で CSS の内容を指定し, カンマでミリ秒を指定する 33

34 main.js を編集 $(function(){ $('#hoge').on('click', function(){ $('#hoge').css('background','#f00'); }); $('#msgbox').on('keyup', function(){ if( $('#msgbox').val() == ""){ $("#sendbutton").attr("disabled", "disabled"); } else { $('#sendbutton').removeattr("disabled"); if( $('#msgbox').val() == 'nakamura' ){ $('#sendbutton').attr( 'value', " いいね " ); } } }); }); 34

35 name や class でも指定できるよ $(function(){ $('.text').on('click', function(){ $('.text').css('background','#f00'); }); $('[name=msg]').on('keyup', function(){ if( $('[name=msg]').val() == ""){ $("[name=send]").attr("disabled", "disabled"); } else { $('[name=send]').removeattr("disabled"); if( $('[name=msg]').val() == 'nakamura' ){ $(' [name=send]').attr( 'value', " いいね " ); } } }); }); 35

36 アニメーションさせてみようクリックされたらほげほげという文字を大きくしてみる! $(function(){ $('#hoge').on('click', function(){ $('#hoge').animate( { color: '#f00', fontsize: '100px' }, 1500 ); }); }); 36

37 もう一つアニメーション $(function(){ $('#msgbox').on('keyup', function(){ if( $('#msgbox').val() == ""){ $("#sendbutton").attr("disabled", "disabled"); } else { $('#sendbutton').removeattr("disabled"); if( $('#msgbox').val() == 'nakamura' ){ $('#sendbutton').attr( 'value', " いいね " ); $('#sendbutton').animate( { opacity: 0, fontsize: '0px' }, 3000 ); } } }); }); 37

38 jquery で WebAPI から情報取得 38 ボタンを押されたらウェブから情報を取得して表示してみよう! $.ajax を利用することで Web から情報取得 $.ajax({ url: ' 取得する Web API の URL', type: 'get か post', datatype: 'xml か json', timeout: タイムアウトするまでのミリ秒, success: 成功した時にどうするか? });

39 jquery で WebAPI から情報取得 39 ボタンを押されたらウェブから情報を取得して表示してみよう! $(function(){ $("#send").on("click",function(){ $.ajax({ url:' 15bebdf97fb73f7121b41d9b504011e7570e282dc4389c3&pattern=0&pref=13&a ddress= 中野区 &url= type:'get', datatype:'xml', timeout:1000, success:parse_xml }); } });

40 parse_xml と show_result function parse_xml(xml,status){ $(xml).find('shop').each( show_result ); } function show_result(){ // 各要素を変数に格納 this は each で var $name = $(this).find('name').text(); 見つかった shop var $address = $(this).find('address').text(); //HTMLを生成 $('<p>'+$name+'<br>'+ $address+'</p>').appendto('#hoge'); } 40.text() で内容取得 find はノードを探すためのメソッド each は 1 つずつという意味取得結果を 1 つずつ処理.appendTo() で埋め込み

41 jquery で WebAPI から情報取得 $.ajax で目標とする XML や JSON を取得取得し終わったら, 指定のメソッド A へジャンプ指定のメソッド A で取得した XML のノードを,find で指定し each で順次取得 each で取得された結果を指定メソッド B へ指定のメソッド B で取得したノードから, 目的とするノードを find で指定し値を取得取得した結果を appendto で Web ページに挿入 41

42 何にせよ jquery 色々使ってみてください 42

43 jquery + Google Maps gmaps.js をダウンロードして lib にでも放り込む <script src="lib/jquery min.js"></script> <script src=" <script src="lib/gmaps.js"></script> <script src="main.js"></script> 地図用の HTML 要素を用意 ( サイズは適当 ) <div id="map" style="width:400px;height:300px"></div> 43

44 jquery + Google Maps main.js に下記のコードを書いてみましょう! $(document).ready(function(){ map = new GMaps({ div: '#map', zoom: 15, lat: , lng: , }); }); 44

地図上にパスも描けるよ! $(document).ready(function(){ map = new GMaps({ div: '#map', zoom: 15, lat: 35.7066, lng: 139.6633, }); 45 var path = [ [35.706821, 139.

45 地図上にパスも描けるよ! $(document).ready(function(){ map = new GMaps({ div: '#map', zoom: 15, lat: , lng: , }); 45 var path = [ [ , ], [ , ], [ , ] ] map.drawpolyline({ path: path, strokecolor: '#f00', strokeopacity: 0.6, strokeweight: 6, }); });

46 他にも色々マーカーを立てる適当な画像を表示するポリゴンで囲うなどなど詳しくは下記サイトへ

47 Web API を作るデータを追加, 削除するような API を作成することで, 他から情報を取得したり, 登録したりすることが可能に!XML という形式出出力する 47 <?xml version="1.0" encoding="utf-8"?> <monsters> <monster> <name> ピカチュウ </name> <weight>6</weight> <height>40</height> </monster> <monster> <name> フシギダネ </name> <weight>6.9</weight> <height>70</height> </monster> </monsters> GET のオプションで条件を受け取り結果を XML のコードを PHP で出力する

48 宿題 48 2~3 人でグループを組み, システム開発発表会は6 月 27 日, 発表 8 分, 質問 2 分それぞれのウェブページからリンクを貼ることデータベース,Web API,JavaScript,PHPは使う事グループ分け情報三輪 & 菅澤佐藤 & 土屋 & 上出室 & 工藤 & 田村豊崎 & 力石 & 川村黒川 & 渡邉 & 和田

情報システム設計論II ユーザインタフェース(1)

情報システム設計論II ユーザインタフェース(1) コンテンツメディアプログラミング実習 Ⅱ JavaScript と各種ライブラリ中村, 宮下, 斉藤, 菊池 1 1 コマ目 Nitrous.io の使い方 JavaScript について DOMについて本日の内容 2 2 コマ目ライブラリを使ってみる Google Charts Google Maps jquery についてノンプログラマのための JavaScript はじめの一歩 (WEB+DB