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

Size: px

Start display at page:

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

たつやおまた
4 years ago
Views:

1 中村研究室ゼミ Web API / 取り込んで利用する中村聡史 1

2 PHP + MySQL どうでした? データを集めるのが大変データベースを構築するのが大変データを入力してくのが大変 2

3 3 API Web API とは? Application Program Interface( 何らかの機能をプログラミングするための仕組み ) メソッド名 + 引数で何らかの動作を実現する! Web API Web 上でアクセス可能な API 様々な情報にアクセスすることが可能何かの緯度経度, キーワード検索結果, 画像検索結果, 商品検索, 書籍検索, ブックマーク数, 地図, 形態素解析アニメ検索,R18 コンテンツ検索,Facebook,Twitter, メールなどなど

4 例えばこんな感じ Web API 4

5 何ができるか? 一般的な API はメソッドとして用意されており, そこに引数を渡すことで何かの動作を実現する ellipse( 200, 200, 50, 50 ); dist( mousex, mousey, 200, 200 ); Web API は GET リクエストである URL に必要な情報を渡すことで何らかの結果を得る 5

6 メソッドの内部処理入力 ( 引数 ) に応じて何かの結果を返す x 50 posx なんか処理機 if( NankaSyori( x ) ==??? ){ } if( NankaSyori( 50 ) ==??? ){ } int NankaShori( int posx ){ posxを利用して処理 return なにか返す ; } 6 posx を利用して処理する return return で指定されたものが出力される

7 メソッドの内部処理複数の引数を受け取ることが可能 7 x 5 y 3 posx posy if( NankaSyori( x, y ) ==??? ){ } if( NankaSyori( 5, 3 ) ==??? ){ } int NankaShori( int posx, int posy ){ posxとposyを利用して処理 return なにか返す ; } posx, posy を利用して処理するなんか処理機 return return で指定されたものが出力される

Web API の内部処理入力 ( 引数 ) に応じて何かの結果を返す $x x 50 http://example.jp/api?

8 Web API の内部処理入力 ( 引数 ) に応じて何かの結果を返す $x x x を利用して何かの処理を行うなんか処理機 XML/JSON 形式で結果が取得できる XML/JSON 8

9 メソッドの内部処理複数の引数を受け取ることが可能 $x 5 $y 3 x y x, y を利用して処理するなんか処理機 XML/JSON 形式で結果が取得できる XML/JSON 9

10 例えば SUNTORY BAR-NAVI Web API を使ってみる! バーのナビに関するAPI 10

11 11

12 12

13 13

14 API キーとは Web API を利用するための認証鍵 14

15 API の仕様 ey={api キー }&pattern=0&pref=26&url={ 呼び出し元サービス URL} ey=95315b1507e3a1ee615bebdf97fb73f7121b4 1d9b504011e7570e282dc4389c3&pattern=0&p ref=07&url= 15

16 こんなタグだらけの結果が... 16

17 例えば中野区で検索 ey=95315b1507e3a1ee615bebdf97fb73f7121b4 1d9b504011e7570e282dc4389c3&pattern=0&p ref=13&address= 中野区 &url= ey=95315b1507e3a1ee615bebdf97fb73f7121b4 1d9b504011e7570e282dc4389c3&pattern=0&p ref=13&address=%e4%b8%ad%e9%87%8e%e5 %8C%BA&url=

18 18

19 19

20 XML の読み方タグで囲まれている部分が, そのタグに関する情報となる <shops> ~ </shops> が shops( 店リスト ) 一番親の階層となっている (HTML と同じでコンテンツはツリー上になっている ) <shop> ~ </shop> が shop( ある 1 つの店 ) <address> ~ </address> が住所 <name> ~ </name> が店の名前などなど 20

21 パラメータとレスポンス 21

22 パラメータとレスポンス 22

23 つまり Web API を使って色々なパラメータ ( クエリ ) を送りつけると, それに応じてレスポンス ( 結果 ) を得ることができる! 23

24 PHP で取得してみよう file_get_contents( ファイルパス ); ある URL にあるファイルを取得する simpexml_load_file( ファイルパス ); ある URL にある XML を取得する 24

25 試しに下記を実行しよう! <html> <body> 近くのバーの情報を取得してみよう! <?php $url = " e3a1ee615bebdf97fb73f7121b41d9b504011e7570e282dc4389c3 &pattern=0&pref=01&url= $html = file_get_contents( $url ); echo $html;?> </body> </html> 25

26 XML で取得してみよう <html> <body> 近くのバーの情報を取得してみよう! <?php $url = " e3a1ee615bebdf97fb73f7121b41d9b504011e7570e282dc4389c3 &pattern=0&pref=01&url= $xml = simplexml_load_file( $url ); echo $xml;?> </body> </html> 表示できない! 26

27 XML はそのまま出力できない $xml = simplexml_load_file( $url ); で取得された値は, ツリー型のオブジェクトになっているので, そのままでは表示することができない var_dump( $xml ); という値をダンプする ( デバッグ用に構造も含めて内容を表示すること ) ことで構造を取得することが可能! 27

28 XML で取得してみよう <html> <body> 近くのバーの情報を取得してみよう! <?php $url = " e3a1ee615bebdf97fb73f7121b41d9b504011e7570e282dc4389c3 &pattern=0&pref=01&url= $xml = simplexml_load_file( $url ); var_dump( $xml );?> </body> </html> なんか表示される! 28

29 29

30 XML の結果をちょっと見てみる api_version が2? results_available が 191 件? results_returned が 10 件? などのような結果になっていることがわかるじゃあ, この結果を表示するにはどうする? 30

31 -> でつないで表示! root ( 一番の親 ) からどのようにたどるかを -> で表現する : $xml = simplexml_load_file( $url ); echo $xml->api_version. ", "; echo $xml->results_returned. "/"; echo $xml->results_available; : 31

32 root お店情報は? 32

33 shop 情報を表示 echo $xml->shop; ではお店の情報を表示できない (shop もツリー構造のオブジェクトのため ) 表示するのであれば var_dump( $xml->shop ); お店の名前を表示するには? echo $xml->shop->name; 10 件あるはずなのに 1 件しか表示されない 33

34 配列の値を取得するには? 1~10 番目の値は... echo $xml->shop[0]->name; echo $xml->shop[1]->name; : echo $xml->shop[7]->name; echo $xml->shop[8]->name; echo $xml->shop[9]->name; という配列の値として取得することが可能つまり, 繰り返しですべての結果を取得可能! 34

35 35 <html> <body> 北海道のバーの情報を取得してみよう! <?php $url = " e3a1ee615bebdf97fb73f7121b41d9b504011e7570e282dc4389c3 &pattern=0&pref=01&url= $xml = simplexml_load_file( $url ); for( $i=0; $i<count($xml->shop); $i++ ){ echo $xml->shop[$i]->name. "<br>"; }?> count( 配列 ) で </body> </html> 配列の大きさを取得

36 演習現在北海道の 10 件を表示しているが,100 件表示してみよう東京のバーを取得し, さらに値段の絞り込みを行おう (3000~5000 円 ) 取得した結果をテーブルの形で表示しよう! 36

37 取得した緯度経度を表示! 次は Yahoo! 地図 API を利用してみよう! 37

38 まず Yahoo! Japan ID でログイン必要に応じてアカウントを取得しよう! 38

39 新しいアプリケーションを開発 39

40 適当に必要な情報を入力! 40

41 41

42 アプリケーション ID を取得 42

43 地図を表示するには? 43

44 たったこれだけ!! 44

45 じゃあ, これをプログラムから緯度経度は $xml->shop[?? ]->lat_tokyo; $xml->shop[?? ]->lng_tokyo; で取得できるっぽい!( 東京測地系と, ワールド測地系があり, どちらかは API に依存する ) じゃあ, その取得した緯度経度を適用して画像を表示してみよう! 45

46 46 <html><body> 東京中野区のバーの情報を取得してみよう! <?php $url = " e3a1ee615bebdf97fb73f7121b41d9b504011e7570e282dc4389c3 &pattern=0&address= 中野区 &pref=01&url= $xml = simplexml_load_file( $url ); for( $i=0; $i<count($xml->shop); $i++ ){ echo $xml->shop[$i]->name. "<br>"; $img_url = " pid=xxxxxxxxxx&lat=".$xml->shop[$i]->lat_tokyo."&"...; echo "<img width=300 height=200 src= "$img_url ">"; echo "<br>"; }?> </body></html>

47 違いがわからん! 拡大しよう! 縮尺レベルは z 47

48 チョットわかりやすくなった! 48

49 XML と JSON レスポンスを返す仕組みの違い XMLの方が可読性が高い JSONの方がJavaScriptで処理するとき高速 JSON はまた次の機会に扱います 49

50 宿題ぐるなび API を利用し, 住所の一部を入力すると周辺のお店を表示するプログラムを作成せよトップページなどからリンクを貼ること何か面白そうな API を探してみよう! 50

51 宿題 3 つ以上の API を組み合わせたサービスを開発せよ. ただし, キーワードで検索できる仕組みは最低限入れること作成したサービスを自身の Web ページからリンクせよ自身のウェブサイトの見栄えをあげよテンプレートを使って良い 51

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

情報システム設計論II ユーザインタフェース(1) CMP 実習 2 DB+PHP+XML/JSON+JavaScript 中村, 宮下, 斉藤, 菊池 1 PHP と JavaScript 連携サーバとクライアントをどうやって繋げるか? PHP と JavaScript 間の情報のやりとりを行う JavaScript JSON/XML PHP DB 簡易的な Web API を作ろう! PHP に GET で情報を送り込むことで XML または