- やりたいこと
- 参考文献
- 利用ウェブサービス
- 全体設計
- 開発環境
- I. jQueryでRestful Web Serviceクライアント(Consumer)作成
- II. BootstrapでResponsiveウェブ画面
- JSON Placehoder APIを使ったjQuery
やりたいこと
jQuery + BootstapでインターネットのRestful Web Serviceクライアントを開発する。
参考文献
- spring.io - Consuming a RESTful Web Service with jQuery
- Apress - Beginning jQuery
- IT Guy - JSON関連オンラインツールまとめ
利用ウェブサービス
- Internet Chuck Norris Database - ジョークを返すサイト
まずはChrome(JSON Formmater Extension)から確認。 http://api.icndb.com/jokes/random へ接続すると、以下のような値が返ってくるはず。
- JSON Placeholder - 適当なサンプルデータを返すサイト
全体設計
- jokes_simple.html + jokes_logic.js
- シンプルなhtml + jQuery
- jokes_responsive.html + jokes_logic.js
- Bootstrapを使ったhtml + jQuery
開発環境
jQueryは1.1、Bootstrapは3.3.1 全て以下のようにCDNを利用
<!-- Bootstrap CSS CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> <!-- jQuery / Bootstrap JS CDN --> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
I. jQueryでRestful Web Serviceクライアント(Consumer)作成
まずは機能面の実装
雛形作成
htmlファイル
<!DOCTYPE html> <html lang="utf-8"> <html> <head> <title>Daily Joke</title> <!-- jQuery --> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!-- Custom JavaScript --> <script src="jokes_logic.js"></script> </head> <body> <h1>ジョークAPI</h1> <p class="result-id">id : </p> <p class="result-joke">joke : </p> </body> </html>
JavaScriptファイル
$(document).ready(function() { $.ajax({ // Internet Chuck Norris DB dataType: 'json', url: "http://api.icndb.com/jokes/random", }).then(function(data) { // for debug console.log("data Object : "); console.log(data); console.log("data.value Object : "); console.log(data.value); console.log("data.value.id : " + data.value.id); console.log("data.value.joke : " + data.value.joke); // html append $('.result-id').append(data.value.id); $('.result-joke').append(data.value.joke); }); });
デバッグ
ChromeのDeveloper Toolからconsole.logをチェック
実行
問題なければ、以下のように画面に表示される。
II. BootstrapでResponsiveウェブ画面
後はBootstrapで飾るだけ。JavaScriptはそのまま使えるので、htmlファイルだけ変えればよい。
Bootstrapを使って飾り
<!DOCTYPE html> <html lang="utf-8"> <html> <head> <title>Daily Joke</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> <!-- jQuery / Bootstrap JS CDN --> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <!-- Custom JavaScript --> <script src="jokes_logic.js"></script> </head> <body> <div class="container"> <div class="page-header"><h1><span class="glyphicon glyphicon-user"></span> ジョークAPI</h1></div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="panel panel-info"> <div class="panel-heading"><p>ID Retrieved</p></div> <div class="panel-body"><p class="result-id"></p></div> <div class="panel-heading"><p>Joke Retrieved</p></div> <div class="panel-body"><p class="result-joke"></p></div> </div> </div> </body> </html>
実行
問題なければ、以下のように画面に表示される。
JSON Placehoder APIを使ったjQuery
http://jsonplaceholder.typicode.com/users を使うjQueryクライアント
Chromeから見ると、以下の通り。10人のユーザー情報が返ってくる。
完成したコード
<!DOCTYPE html> <html lang="utf-8"> <html> <head> <title>JSON Placeholder</title> <!-- jQuery --> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!-- Custom JavaScript --> <script src="json_placeholder_logic.js"></script> </head> <body> <h1>JSON Placeholder API</h1> <!-- ユーザーデータを以下に格納 --> <p class="users"></p> </body> </html>
今回は複数の値があるので、ループで値を取り出し、htmlへ出力。
$(document).ready(function() { $.ajax({ url: "http://jsonplaceholder.typicode.com/users" }).then(function(data) { // for debug console.log(data); for (var i = 0; i < data.length; i++) { console.log("id : " + data[i].id); console.log("name : " + data[i].name); console.log("username : " + data[i].username); // add rows $('.users').append(data[i].id + ", " + data[i].name + ", " + data[i].username + "<br>\n"); } }); });
実行
実行イメージはこちら。