情報処理概論 第15回 1/26

Introduction to the Information Systems

はじめに

授業アンケート

• 協力お願いします。 （皆さんの後輩達のために（たぶん））

前回の要約

• この科目の狙いと意義について、あらためて振り返ってみた。
• markdown をHTMLに変換する方法として、
  • SLIMの内蔵エンジンとしてkramdown を間接的に起動する（前々回に扱った）方法以外に、
  • kramdownコマンドを使う方法を紹介した。
• jQueryの関連ライブラリの応用例を２つ紹介した。
  1. アニメーション
  2. jQuery-uiを使う

期末に向けて

試験について

• パソコン持参下さい
• すべて持込可（ネットでの検索も含めて可）ですが、
  　 他人と相談すること（オンラインオフラインとも）は禁止ですので、
  　　1. メッセンジャー メール SNS BBS等での
  　　 パーソナルなコミュニケーションは禁止となります。
  　　2. 時間中のメールは解答を提出する用途に限定します。
• 成績評価について:
  　 試験の結果と日常のリアクション（レポート提出も含めて）
  　 を加算して評価します。

５ Web API と jQuery応用（つづき）

3. Web API と RSS

• 広義の Web API（URLパラメータによる）

  • 例： google サーチに

    http://www.google.co.jp/search? にパラメータ
        q=___
        tbm=isch
    

    などを渡す

  • URLパラメータは図のような文法でURLの末尾に埋め込まれる。
  • これについての詳細は 検索してみること
• 一般的に Web APIという用語は、プログラムやWebページの中で 使用する前提のものを言う。
  • このとき渡されるデータの形式としては、下図の２種類 （XML,JSON のうちのいずれか）が使われることが多い。
• いくつかの例
  • 郵便番号検索API - zipcloud
  • yahoo天気→RSSを出力できる
  • google マップ

• 有料もののや、アプリケーション登録を行って使う必要のあるものもある。

• RSSとは
  • フィードの一種
    （最新の情報が常に表示される仕組み）
  • フィードとして他に ATOM などがよく使われる
  • RSSビューワを使って表示する
  • ブログ・パーツとしても多数作られている

補足 C/S 間でのデータ授受

• Webサイト/Webページとして静的コンテンツが表示させる時は、サーバ（機）上でWebサーバ（ソフトウェア）が動作するが、
  動的コンテンツ（Web上でのアプリケーション）においては、サーバ上で （Webサーバソフトウェアが仲介した上で）サーバ側（サーバサイド）プログラムが動作する。
  • サーバサイドプログラムは図のように（仲介の方式によって）別の名で呼ばれることもある。

• HTTPを使った通信で、レスポンス本文（要求に対する応答）以外に、クライアントとサーバの間でデータのやりとりをする方法として、以下のようなものがある。
  1. URLパラメータ（前述）：GETメソッド（リクエストはヘッダーのみ送信される）で重要
  2. リクエストのBODY部: 送信されるデータ量が大きい時、POSTメソッドで活用される
  3. ヘッダ：特に重要なものが Cookieと呼ばれるデータ。

4 実習

ローカルHTMLページにペタペタ貼り付けてみよう

1. twitterのタイムライン
   （使ってる人は試してみよう）
   • twitterにログイン
   • 設定 -> ウィジェット で ここ にくるだろう
   • 新規作成 -> プロフィール
   • 試しに自分のタイムラインのURLを入れてみて、
   • 生成完了直前に、サイズを調整し、
   • 提示されたコードをHTMLに貼る
   • と、こんな感じ(実施例)
2. livedoorのお天気プラグイン
   • 上記サイトにある、天気プラグインのコード、または
   • 県を指定して生成したものを、HTMLに貼る
   • と、こんな感じ(実施例)
3. RSSビューで、
   • たとえばyahoo天気予報を貼ってみよう。
   • リンク「提供RSS」(http://weather.yahoo.co.jp/weather/rss/)から、
   • RSSへの適当なリンク（アドレスの末尾が …xml）をみつけ、
   • そのアドレス（URL)をコピーし、
   • RSSビューの「Feed URL」欄に貼り、
   • 「Create Widget」
   • ただし、1/23から、アカウント登録しないとCreateできなくなった
   • 代わりに、ブログパーツを貼ってもいい （ただしブラウザによって動作しないこともあるようだ）
   • 実施例
4. Yahoo! JavaScriptマップAPI（アプリケーションIDが必要）
   • このページの指示に従って、HTMLを作ってみる
   • アプリケーションIDを取得して、（今日はこのステップは略）
   • HTMLの当該部分を書き換える必要がある。
   • 今日は、平岡が取得したID(今だけ見えてます)を使っておいて下さい.
   • 実施例

5. Ajax

• Ajaxとは何か
  • HTMLでリンクをクリックしてもページ遷移をせずに
  • 通信を行い、その結果がページの内容に反映される技術
  • 昨今はクリック以外のタイミングでも通信が発生する。
• 動作の概要
  1. クリック
     （HREFパラメータのない、または値として”#”などが設定されたAタグ、や
     actionパラメータのついたform に含まれない INPUT要素、 あるいは BUTTON要素など）
  2. それらの onClick属性（またはイベントリスナー）で、 JSのコードが呼ばれる。そのコードの中で、
  3. 後述の方法で通信が発生する。
  4. 通信が完了した時点でコールバック関数が呼ばれ、その中で、
  5. 何らかのDOM操作が行われ、画面に変化が現れる。
• ネイティブJSの場合：
  • 関数（オブジェクトでもある）XMLHttpRequestがすべてのモダンブラウザに実装されている。
• jQueryの関数:
  • jQueryのドキュメントにajaxの章があり、
  • jQuery.ajax($.ajaxという呼び方が一般的)と、
    それを（HTTPのメソッドごとに用意された）簡略に呼ぶAPIが用意されている。
• クロスドメイン制約とその回避
  • JSONP と コールバック
  • $.getJSON 関数（jQueryの新しい機能）

• 実例：郵便番号検索

    doctype html
    script src=src="https://code.jquery.com/jquery-3.1.1.min.js"
    p 
      span zip:
      input value="386-1298"
      button go
    #result
    javascript:
      function go() {
        var zip=$('input').val()
        console.log(`zip=${zip}`)
        $.get(`http://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}`,(data)=>{
          $('#result').textContent=data
        })
      }
      $('button').click(go)
  

  =>SLIMソース、HTML版

• ただし、上記のコードは、クロスオリジン制約により、 殆どのブラウザで動作しないだろう。

  • 回避策として、$.get でなく $.getJSON を使うよう変更してみる。

        $.getJSON(`http://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}&callback=?`,(data)=>{
        	var rslt=""
            $.each(data.results, (i, item)=>{
              var r=item.address1+item.address2+item.address3
              rslt+=`<p>${r}</p>`
              console.log(rslt)
              $('#result').append(rslt) 
            })
          })
    

  =>SLIMソース、HTML版