IT Guy

IT、AI / Machine Learning、IoT、Project Management、プログラミング、ITIL等々

jQuery + BootstrapでRestful APIクライアント開発

HTML/CSS/JavaScript

やりたいこと

jQuery + BootstapでインターネットのRestful Web Serviceクライアントを開発する。

参考文献

利用ウェブサービス

まずはChrome(JSON Formmater Extension)から確認。 http://api.icndb.com/jokes/random　へ接続すると、以下のような値が返ってくるはず。

f:id:blog-guy:20171023164042p:plain

全体設計

  1. jokes_simple.html + jokes_logic.js
    • シンプルなhtml + jQuery
  2. jokes_responsive.html + jokes_logic.js
    • Bootstrapを使ったhtml + jQuery

f:id:blog-guy:20171023164105p:plain

開発環境

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をチェック

f:id:blog-guy:20171023164150p:plain

実行

問題なければ、以下のように画面に表示される。 f:id:blog-guy:20171023164201p:plain

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>&nbsp;ジョーク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>
実行

問題なければ、以下のように画面に表示される。

f:id:blog-guy:20171023164423p:plain

JSON Placehoder APIを使ったjQuery

http://jsonplaceholder.typicode.com/users を使うjQueryクライアント

Chromeから見ると、以下の通り。10人のユーザー情報が返ってくる。

f:id:blog-guy:20171023164347p:plain

完成したコード
<!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");
        }
    });
});
実行

実行イメージはこちら。

f:id:blog-guy:20171023164312p:plain