JavaServletでAPIを作成してajaxで画面構築する方法

ヘッダー広告
スポンサードリンク

今回の記事はJava Servletを利用して、APIを作成する方法と、ajaxを利用してAPIを呼び出し画面を構築する方法をご紹介したいと思います。

そもそもAPIとは

アプリケーションプログラミングインタフェース(API、英: Application Programming Interface)とは、広義の意味ではソフトウェアコンポーネントが互いにやりとりするのに使用するインタフェースの仕様である。

wiki アプリケーションプログラミングインタフェース引用

例えば、Javaの最初から用意されている関数(DateやListなど)もAPIと呼ばれるものになります。
その中でもWebアプリケーションにおいて、APIといえばWEB APIと呼ばれていて、今回ご紹介するJava SerlvetのAPIもWEB APIを表すものです。

つまりWEB APIというのは、HTTPでのリクエスト・レスポンスのやり取りを、外部インターフェースファイルを扱うように、必要な機能を必要なタイミングで利用者が自由に利用出来るようにWebアプリケーション開発者が用意をすることを言います。

ちなみに近年FinTechという言葉が流行っていますが、その一部として、銀行が現在利用しているAPIをFinTech企業に開放して(オープンにして)、残高照会機能や入出金の明細照会、振込機能などを活用したテクノロジーを開発出来るための環境整備が進んできました。
このことをオープンAPIと呼んでいます。

この機会にAPIの作成方法を身に付けて、APIを提供したり、もしくは様々なAPIを利用できるようになりましょう。

JavaServletでのAPI開発方法

APIの提供方法の検討

APIを開発する際に、考えなくてはいけないのは、APIの提供方法です。

まずRESTとSOAPというプロトコルのどちらを利用するか選ぶのですが、一般的にSOAPを使うことはあまり多くはないので今回の説明からは除外します。
※使わないということではなく、私も職場では使う機会があるので、理解はしておいたほうがいいと思います。

他にはレスポンスの内容を、JSON形式にするのかXML形式にするのかを選びます。
ここで一番説明したい部分になります。

それぞれの形式の違いをご説明致します。

まずXMLというのは、HTMLのようにデータが階層化された形式のテキストになります。
各データは<>で囲まれたタグで表現します。<>のの中は項目名をになります。
そして、で囲まれた同じ名前のタグの部分までがそのタグの中のデータになります。

分かりにくいのでサンプルのXMLファイルを

<?xml version="1.0" encoding="UTF-8"?>
<ekidata version="ekidata.jp line api 1.0">
<line>
<line_cd>11302</line_cd>
<line_name>JR山手線</line_name>
<line_lon>139.73522275686264</line_lon>
<line_lat>35.69302730762992</line_lat>
<line_zoom>12</line_zoom>
</line>
<station>
<station_cd>1130201</station_cd>
<station_g_cd>1130201</station_g_cd>
<station_name>大崎</station_name>
<lon>139.728439</lon>
<lat>35.619772</lat>
</station>

・・・中略・・・

<station>
<station_cd>1130229</station_cd>
<station_g_cd>1130103</station_g_cd>
<station_name>品川</station_name>
<lon>139.738999</lon>
<lat>35.62876</lat>
</station>
</ekidata>

引用: 駅データ.jp 路線API 山手線 XML形式

例えば上記XMLファイルの13行目の以下の内容は、station_nameというタグ(項目名)内のデータは、大崎 という内容だということがこのXMLからは判断できます。
<station_name>大崎</station_name>

※参考記事
VBAでXMLファイルの全タグ名と値を出力する方法

続いてJSON形式ですが、こちらは「項目名:データ」というシンプルな形式で表現されます。
※JSONの仕様はRFC4627で規定されています。

こちらもJSONのサンプルを

{“line_cd”:11302,”line_name”:”JR山手線”,”line_lon”:139.73522275686264,”line_lat”:35.69302730762992,”line_zoom”:12,”station_l”:
[{“station_cd”:1130201,”station_g_cd”:1130201,”station_name”:”大崎”,”lon”:139.728439,”lat”:35.619772},

・・・中略・・・

{“station_cd”:1130229,”station_g_cd”:1130103,”station_name”:”品川”,”lon”:139.738999,”lat”:35.62876}]}

引用: 駅データ.jp 路線API 山手線 JSON形式

例えば上記JSONファイルの2行目の以下の内容は、XML形式の場合と同様に station_nameというタグ(項目名)内のデータは、大崎 という内容だということがこのJSONからは判断できます。
“station_name”:”大崎”

JSONの場合は、各項目はカンマで区切られていて、またデータ行は{}で囲まれています。

JSON形式の特徴としては、
XML形式と比較してjavascript等のプログラムから操作しやすいかつ見た目でも理解しやすいので、最近のAPIはJSONの方が多く利用されています。
なので今回のAPI作成方法もJSONでご紹介させていただきます。

JavaでのAPI作成方法

JavaでJSON形式のAPIを作成する場合には、jsonicというライブラリが存在しているのでそれを利用すると簡単にjsonを作成できます。
今回は記事作成時点で最新のバージョンである jsonic 1.3 1.3.10 (日付: 2015-11-02) を利用します。

jsonicダウンロード
https://ja.osdn.net/projects/jsonic/

使い方は単純で「net.arnx.jsonic.JSON」クラスのencodeメソッドにリストを渡した結果をレスポンスで返却するだけです。

早速実際のコードを記載します。

Getメソッド:SelectJsonData.java

package webapp;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import Beans.UserInfoBean;
import dao.SelectUser;
import net.arnx.jsonic.JSON;

public class SelectJsonData extends HttpServlet {
  @Override

    protected void doGet( HttpServletRequest req, HttpServletResponse res ) throws ServletException, IOException{

	    System.out.println("スタート");

        String UserName = req.getParameter("userName");

        try {
        	List<UserInfoBean> list = SelectUser.getInstance().select001(UserName);

        	String json = JSON.encode(list,true);
        	res.setContentType("application/json;charset=UTF-8");
    		PrintWriter out = res.getWriter();

        	out.println(json);

        } catch (SQLException e) {
            throw new ServletException(e);
        }

    }
}

27行目の
String json = JSON.encode(list,true);

のコードでlistをJSON形式に変換し、json変数に挿入しています。
第二引数にtrueをセットすることで、見やすいjson形式になります。

DB操作:SelectUser.java

package dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

import Beans.UserInfoBean;

public class SelectUser  {

    private ResultSetBeanMapping<UserInfoBean> allMapping=
            new ResultSetBeanMapping<UserInfoBean>(){

        public UserInfoBean createFromResultSet(ResultSet rs)
            throws SQLException {

        	UserInfoBean page = new UserInfoBean();
            page.setUserName(rs.getString("username"));
            page.setAddress(rs.getString("address"));
            page.setTel(rs.getString("tel"));

            return page;
        }

    };

    public static SelectUser getInstance(){
        return new SelectUser();
    }

	private static final String select001 = ""
			+ "select "
			+ "  username,address,tel "
			+ "from "
			+ "  userinfo "
			+ "where "
			+ "  username = 'USER_NAME';";

    public List<UserInfoBean> select001(String UserName) throws SQLException {

	    String sql = select001;
	    sql = sql.replaceAll("USER_NAME",UserName);

	    System.out.println(sql);

	    return DBManager.simpleFind(sql, allMapping);

    }

}

こちらがAPIの作成方法になります。

このAPIを直接ブラウザで閲覧した場合の結果は以下のようになります。

・SelectJsonData.json

[
        {
                “address”: “東京都江東区豊洲3-3-3-3-3”,
                “tel”: “03-0000-0000”,
                “userName”: “TaroSato”
        }
]

ちなみに先ほどの以下の構文の
String json = JSON.encode(list,true);

第二引数を削除して以下コードにした場合の結果はこのようになります。
String json = JSON.encode(list);

・SelectJsonData.json

[{“address”:”東京都江東区豊洲3-3-3-3-3″,”tel”:”03-0000-0000″,”userName”:”TaroSato”}]

このようにやはりtrueを付けるだけで大分理解しやすくなることがわかりますので、第二引数にはtrueをセットするようにしましょう。

ajaxで画面構築

続いてajaxで画面構築を行う方法になります。

ajaxというのは、Asynchronous JavaScript + XML の略称で、javascriptを利用して非同期でXMLを読み込んでいくという処理の方法になります。
ajax登場前は、画面を変更させる度にHTMLを0から再作成していたので、画面が表示させるために時間がかかってしまっていました。
しかしajaxによって非同期にリクエストを行って画面の構築が出来るようになったことで、見た目をなめらかな画面遷移で処理させることが出来るようになりました。

特に最近はスマホでPCと同様にサイトを閲覧することが増えたのですが、スマホの場合だと通信速度が遅いので、何回もHTMLを読み込んで画面を更新していると時間がかかってしまいユーザビリティが悪いため、ajaxを使ったSPA(single-page application)という構成でスマホサイトを提供しているものも多くあります。

今回はjQueryを利用してajaxを行います。

早速HTMLコードを

●GetJson.jsp

<%@ page language="java" contentType="text/html;charset=Windows-31J" %>
<%@ page pageEncoding="Windows-31J" %>

<HTML>

<HEAD>

<TITLE>GetJson</TITLE>

<script src="jquery.js"></script>

<style type="text/css">
    .block1 {
	display: inline-block;
	width: 8em
    }
</style>

<script type="text/javascript">
$(function() {

    $("[type=button]").on("click", function() {

        $.ajax( {
            url: 'SelectJsonData',
            data: { userName: $("[name=userName]").val() },
            dataType : 'json'
        }).done(function( data ) {
            var message = jsonParser(data);
            $( '#sample-result' ).html( message );
        }).fail(function( data ) {
            $( '#sample-result' ).html( '<font color="red">読み込みNG(ChromeではNG)</font>' );
        })

        function jsonParser(data) {
            var message = "";
            var count = 0;
            $.each(data, function(i, item) {
                message = message + '<span class="block1">名前:</span>' + item.userName;
                message = message + '<br/>';
                message = message + '<span class="block1">住所:</span>' + item.address;
                message = message + '<br/>';
                message = message + '<span class="block1">電話番号:</span>' + item.tel;
                message = message + '<br/>';
            });
            return message;
        }
    });

});
</script>

</HEAD>

<BODY>

<h1>GetJson</h1>

<form Name="PostForm">
    <span class="block1">取得する名前:</span><input type="text" name ="userName" /><br>
    <input type="button" id="btt" onclick="FirstCheck()" value="GET送信" />
</form>

<h2>結果出力</h2>

<div id="sample-result"></div>

</BODY>

</HTML>

行目の以下コードでhttpリクエストを行っています。
リクエストするurlには、先ほどのAPI作成の際にご紹介した「SelectJsonData」を呼び出します。
dataには、リクエストパラメータを指定します。
今回の場合は、userNameのパラメータに画面上から入力したユーザー名を挿入します。
dataTypeはjsonを指定。

$.ajax( {<br>
            url: 'SelectJsonData',
            data: { userName: $("[name=userName]").val() },
            dataType : 'json'
        }).done(function( data ) {
            var message = jsonParser(data);
            $( '#sample-result' ).html( message );
        }).fail(function( data ) {
            $( '#sample-result' ).html( '<font color="red">読み込みNG(ChromeではNG)</font>' );
        })

.doneの分岐には成功した際の処理を記述します。
今回の場合は、jsonParserにて出力されたjsonを操作して結果をmessage変数に返しています。
その後message変数を sample-resultに格納し画面の構築は完了となります。

では画面の挙動を確認してみます。

1.ボタンをクリックする前の初期表示画面になります。


ここで取得する名前に取得したい人の名前を入力しGET送信をクリックする。

2.GET送信ボタンクリック後画面


すると先ほどのSelectJsonDataを呼び出してjsonを取得し、取得したjsonをjavascriptで操作した結果が結果出力欄に表示されます。

このようにjavascript(jQuery)でjsonを操作するのは簡単に実施できます。

本日は以上です!

フッター広告

スポンサードリンク



シェアする

  • このエントリーをはてなブックマークに追加

フォローする