2020-11-19

JavaによるWebアプリの開発環境の構築

Java

（ブログ記事の一覧は「こちら」）

Javaを用いたWebアプリの作成の方法について説明していきます。
JavaScriptはクライアント側で実行するWebアプリに対して、今回の内容はサーバー側で実行するWebアプリです。サーバー上で動作するプログラムとして他にはPHPがあります。

一般的なJavaには含まれない、新たに学ぶ文法が多くあります。最も基本的な項目として「サーブレット」「JSP」というWebサーバー上で動作するプログラムがあります。

サーブレット　【 Controller（MVCのC）】
JSP（JavaServer Pages）【 View（MVCのV）】
JavaBeans　【 Model（MVCのM）】
データベースとの連携（JDBC）

また、それらを組み合わせて使用する仕組みについても学ぶ必要があります。

フォワード（サーブレット、JSPの連携）
リクエストスコープ（サーブレット、JSP、JavaBeansの連携）
セッションスコープ

ここでは、Webアプリのプロジェクトの作成と、サーブレットファイルの作成、Eclipseでのサーバーの起動、サーブレットの実行の手順を説明します。

準備（パースペクティブの設定）

Eclipseを起動します。「パースペクティブを開く」をクリックして、「Java EE」を選択します。

パースペクティブに「Java EE」が追加され、選択されていることを確認してください。

プロジェクトの作成

「ファイル」メニューから「新規」-「動的Webプロジェクト」を選択します。

「プロジェクト名」を記入します。（自身で決めてもらって大丈夫です）
次に「ターゲット・ランタイム」を選択します。（図では「Tomcat 8」を選択しています）
「次へ」ボタンをクリックします。

実行するURLを別に設定したい場合は「コンテキスト・ルート」を変更します。（今回はそのままでOKです）
「完了」ボタンをクリックします。

プロジェクトが作成されたことを確認してください。

サーブレットファイルの作成

「プロジェクト名」を右クリックして、「新規」-「サーブレット」を選択します。

「Javaパッケージ」「クラス名」を記入します。（自身で決めてもらって大丈夫です）
「次へ」ボタンをクリックします。

実行するURLを別に設定したい場合は「URLマッピング」を変更します。（今回はそのままでOKです）
「次へ」ボタンをクリックします。

図のように「メソッド・スタブ」が選択されていることを確認してください。
「完了」ボタンをクリックします。

サーブレットファイルが作成されていることを確認してください。

今回はクラス名を「MainServlet」としたので、「MainServlet.java」が作成されます。
後ほど、こちらのJavaファイルのプログラムを編集していきます。

サーバーの起動

下部の「サーバー」タブを選択します。
サーバーを設定するため、リンクをクリックします。

使用するサーバー（ここでは「Tomcat v8.0 サーバー」）を選択します。
「次へ」ボタンをクリックします。

プロジェクト名を選択して「追加」ボタンをクリックします。

今回作成したプロジェクトが右側に表示されたことを確認して、「完了」ボタンをクリックします。

今回作成したプロジェクトがサーバーに追加されたことを確認してください。

赤枠の部分を右クリックして、「開始」を選択します。

サーバーが開始されたことを確認してください。

サーブレットの実行

「プロジェクト」メニューにて、以下の手順を行います。

「自動的にビルド」を選択して、チェックを外します。
「クリーン」を選択します。（以前作成したビルド結果を消去します）
「プロジェクトのビルド」を選択します。

（プログラムの更新後は、まず「クリーン」を選択することをお勧めします）

サーブレットファイル（赤枠の部分）を右クリックして、「サーバーで実行」を選択します。

「完了」ボタンをクリックします。

成功した場合、以下のように実行結果が表示されます。

エラー（404, 500）になった場合、以下をそれぞれ実行し直してみてください。

「プロジェクト」－「クリーン」
「プロジェクト」－「プロジェクトのビルド」
サーバーを再起動
実行したブラウザ表示を更新する（更新ボタンをクリック）

2020-10-18

Firebaseを用いたチャットアプリの作成

アプリ制作 2020

（ブログ記事の一覧は「こちら」）

前回の Firebaseの概要の続きです。

FirebaseのRealtime Databaseを用いて、Web上で動作する、簡単なチャットアプリを作成してみます。

Realtime Database の作成、設定

左側のフレームから「Realtime Database」を選択して、画面から「データベースを作成」をクリックします。

「Realtime Databaseのセキュリティルール」ダイアログで、赤枠の「テストモードで開始」を選択して、「有効にする」をクリックします。

これでRealtime Databaseが作成されました。

チャットアプリの作成

ドキュメント

公式ドキュメント

Firebase Realtime Database
https://firebase.google.com/docs/database

JavaScript でのインストールと設定
https://firebase.google.com/docs/database/web/start
データベースの構造化
https://firebase.google.com/docs/database/web/structure-data
ウェブでのデータの読み取りと書き込み
https://firebase.google.com/docs/database/web/read-and-write
ウェブ上でデータリストを操作する
https://firebase.google.com/docs/database/web/lists-of-data

参考ブログ

Firebaseを使ってリアルタイムチャットを作成してみた

FirebaseのRealtime Databaseでチャットアプリを作成

サンプルプログラム

簡単なサンプルとして、「名前」と「メッセージ」の送信とリアルタイムの表示更新を行うWebページを作成してみましょう。

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />

   <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-auth.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-database.js"></script>

   <script src="main.js"></script>
</head>

<body>
<div>
    <div>
        <p>
        <input type="text" id="name">
        </p>
    </div>
    <div>
        <p>
         <textarea id="message" row="10"></textarea>
        </p>
        <p>
         <button id="send">send</button>
        </p>
    </div>
    <div id="output"></div>
</div>

</body>
</html>

main.js

window.onload = function() {

    // Your web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "AIzaxxxxxxxxxxx-xxxxxxxx_xxxxxxxxxxxxxx",
        authDomain: "xxxx-xxxx.firebaseapp.com",
        databaseURL: "https://xxxx-xxxx.firebaseio.com",
        projectId: "xxxx-xxxx",
        storageBucket: "xxxx-xxxx.appspot.com",
        messagingSenderId: "xxxxxxxxxxx",
        appId: "x:xxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxxxx"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);


    var database = firebase.database();

    let room = "chat_room";
    const send = document.getElementById("send");
    const name = document.getElementById("name");
    const message = document.getElementById("message");
    const output = document.getElementById("output");

    // write
    send.addEventListener('click', function() {
        database.ref(room).push({
            name:name.value,
            message:message.value
        });
        message.value = "";
        name.value = "";
    });

    // read
    database.ref(room).on("child_added", function(data) {
        const v = data.val();
        const k = data.key;
        let str = "";
        str += '<div class="name">名前：' + v.name + '</div>';
        str += '<div class="text">メッセージ：' + v.message + '</div>';
        output.innerHTML += str;
    });

};

冒頭の変数 firebaseConfig 内のパラメータの値は、あなたのアカウントで得られる値に置き換えてください。

firebase の database() と ref() から、書き込みには push() メソッド、読み取りには on() メソッドを使用します。
また、読み取りには"child_added"イベントを使用します。このイベントは子ごとに１回トリガーされ、新しい子が追加されるとそのたびに再度トリガーされます。

実行

作成したサンプルプログラム index.html をブラウザにて2画面で起動します。
「名前」と「メッセージ」を入力して送信すると、もう一方のブラウザにも送信結果が反映されることが確認できます。

また、Firebaseコンソールでもデータが登録されたことがリアルタイムで反映されることが確認できます。

2020-10-18

Firebaseの概要

アプリ制作 2020

（ブログ記事の一覧は「こちら」）

Firebaseは、Google が提供している、モバイルアプリやWebアプリの制作で便利なバックエンドの機能を用意しているクラウドサービスです。

https://firebase.google.com/

Firebaseを利用するには、Googleのアカウント（Gmail）が必要になりますので、用意をしておいてください。

主な機能

Firebaseのサイトを見てもらうとわかりますが、多くのサービスが用意されています。ここではよくつかわれる代表的なサービスを紹介します。

認証（Authentication）

簡単に認証システムを作成する仕組みが用意されています。

データベース（Realtime Database, Cloud Firestore）

リアルタイムのデータ同期が可能なデータベースのシステムです。

従来から用意されている「Realtime Database」と、新たに用意された「Cloud Firestore」の2種類の仕組みが用意されています。

ストレージ（Storage）

写真や動画などファイルを保管するストレージの仕組みが用意されています。

機械学習（ML Kit）

Googleの機械学習の機能をアプリに使用できるSDKが用意されています。

テキスト認識
画像のラベル付け
オブジェクトの検出と追跡
顔検出と輪郭追跡
バーコードスキャン
言語識別
翻訳

Firebaseプロジェクトの設定

まず準備として、Firebaseのプロジェクトの作成と設定を行います。

あらかじめ、Googleのアカウント（Gmail）にログインしておきます。

以下の、Firebaseコンソールを開きます。

https://console.firebase.google.com/

「プロジェクトを作成」をクリックします。

「プロジェクト名」を入力して「続行」をクリックします。（ここでは「ChatApp」としています。）

今回はGoogleアナリティクスは使用しないので、赤枠の部分のスイッチはオフにします。
「プロジェクトを作成」をクリックします。

これでプロジェクトが作成されました。

今回はWebアプリを作成します。赤枠の部分をクリックします。

アプリのニックネームについても「ChatApp」としました。
Firebase Hostingは使用しないため、チェックは外してください。
「アプリを登録」をクリックします。

以下のJavaScriptのプログラムは後で使用するので、コピーして保存しておいてください。（後で別の画面からも取得することはできます）

以上で準備は完了です。

2020-10-04

Web API（OpenWeatherMap）の呼び出し方法【JavaScript 】

アプリ制作 2020

（ブログ記事の一覧は「こちら」）

Webブラウザ上でWeb APIを実行することも可能です。方法はいろいろありますが、ここではJavaScriptによるHTTP通信を行う方法について説明します。

Webブラウザ上でHTTP通信を行うには、非同期通信（Ajax）でHTTP通信を行う必要があります。（別のHTMLに移動することのない、同一のHTMLにて処理が行われます。具体例として、Google Mapなど。）

非同期通信（Ajax）を行うには、JavaScriptの XMLHttpRequest オブジェクトを使用します。

サンプルプログラム

以下は、「東京」の現在の天気を取得するサンプルになります。

index.html

文字コードは「UTF-8」に指定してください。

<html>
<head>
   <meta charset="UTF-8">
   <script src="main.js"></script>
</head>

<body>
    <h1>OpenWeatherMap API</h1>

    <p>場所：<span id="place"></span></p>

    <p>天気：<span id="weather"></span></p>
    <p><img id="icon"></p>

    <p>気温：<span id="temp"></span>℃</p>
</body>
</html>

main.js

「東京」の現在の天気を取得するJavaScriptのプログラムです。

var strUrl = "https://api.openweathermap.org/data/2.5/weather?q=Tokyo&units=metric&lang=ja&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    // 非同期通信（Ajax）
    // readyState 4: リクエスト終了, status 200:通信成功
    if (this.readyState == 4 && this.status == 200) {
        var data = this.response;

        // 場所
        document.getElementById('place').innerHTML = data.name;

        // 天気（画像）
        var img = document.getElementById('icon');
        img.src = "https://openweathermap.org/img/wn/" + data.weather[0].icon + "@2x.png";
        img.alt = data.weather[0].main;

        // 天気
        document.getElementById('weather').innerHTML = data.weather[0].main + "（" + data.weather[0].description + "）";

        // 気温
        document.getElementById('temp').innerHTML = data.main.temp;
    }
}
xmlhttp.open("GET", strUrl, true);  // 第３引数の意味（非同期通信：true、同期通信：false）
xmlhttp.responseType = 'json'; // JSONを取得するために必要
xmlhttp.send();

練習課題

サンプルプログラムに「湿度」「気圧」の情報を追加してください。

課題1

index.htmlにボタンを3個追加して、クリックすると「Tokyo」「Osaka」「XXX（あなたの生まれた場所）」に天気情報の表示が切り替わるような仕組みになるように改造してください。

以下を参考にしてください。

   ...

    <p><input type="button" value="Tokyo" onclick="callOpenWeatherMap('Tokyo')"></p>

    ...

main.jsは、関数化する必要があります。

function callOpenWeatherMap(place) {
    var strUrl = "https://api.openweathermap.org/data/2.5/weather?q=" + place + "&units=metric&lang=ja&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

    // 以下、カスタマイズ

}

課題2

「東京」の「天気予報」の情報を受け取るWebページを作成してください。

https://api.openweathermap.org/data/2.5/forecast?q=Tokyo&units=metric&lang=ja&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

得られた結果のJSONデータを分析して、見やすい天気予報のWebページを作成してください。
また、東京以外の複数の場所を選択して表示を切り替えることができるようにしてください。

2020-09-25

Web API 続き（OpenWeatherMap 天気予報）

アプリ制作 2020

（ブログ記事の一覧は「こちら」）

前回はOpenWeatherMap APIを使用して「現在の天気（Current Weather Data）」の情報を取得するプログラムを作成しました。

今回は「天気予報」の情報を取得するプログラムを作成します。

5 Day / 3 Hour Forecast（3時間ごとの5日間の天気予報）

https://api.openweathermap.org/data/2.5/forecast?q=tokyo&appid=xxxxxxxxxxxxxxxxxxxxxxxx

今回も以下のオプションを追加することが可能です。

units=metric　（普段使っている温度の単位で表示させる）
lang=ja　（結果の一部が日本語で取得できる）

天気予報の出力結果の例

OpenWeatherMap APIによる、「東京」の天気予報の出力結果の例です。

{
    "cod": "200",
    "message": 0,
    "cnt": 40,
    "list": [
        {
            "dt": 1600084800,
            "main": {
                "temp": 24.81,
                "feels_like": 24.46,
                "temp_min": 24.62,
                "temp_max": 24.81,
                "pressure": 1011,
                "sea_level": 1011,
                "grnd_level": 1008,
                "humidity": 76,
                "temp_kf": 0.19
            },
            "weather": [
                {
                    "id": 501,
                    "main": "Rain",
                    "description": "moderate rain",
                    "icon": "10n"
                }
            ],
            "clouds": {
                "all": 82
            },
            "wind": {
                "speed": 5.97,
                "deg": 81
            },
            "visibility": 10000,
            "pop": 0.97,
            "rain": {
                "3h": 4.57
            },
            "sys": {
                "pod": "n"
            },
            "dt_txt": "2020-09-14 12:00:00"
        },

...（略）

        {
            "dt": 1600506000,
            "main": {
                "temp": 27.16,
                "feels_like": 27.39,
                "temp_min": 27.16,
                "temp_max": 27.16,
                "pressure": 1012,
                "sea_level": 1012,
                "grnd_level": 1008,
                "humidity": 61,
                "temp_kf": 0
            },
            "weather": [
                {
                    "id": 500,
                    "main": "Rain",
                    "description": "light rain",
                    "icon": "10n"
                }
            ],
            "clouds": {
                "all": 92
            },
            "wind": {
                "speed": 4.28,
                "deg": 104
            },
            "visibility": 10000,
            "pop": 0.26,
            "rain": {
                "3h": 0.18
            },
            "sys": {
                "pod": "n"
            },
            "dt_txt": "2020-09-19 09:00:00"
        }
    ],
    "city": {
        "id": 1850144,
        "name": "Tokyo",
        "coord": {
            "lat": 35.6895,
            "lon": 139.6917
        },
        "country": "JP",
        "population": 12445327,
        "timezone": 32400,
        "sunrise": 1600028587,
        "sunset": 1600073448
    }
}

JSONデータのパース（解析）

以下は、天気予報の結果について、全ての時間（3時間ごとの5日間）の「日時」を出力するサンプルです。

   // JSONオブジェクトのインスタンス作成
    JSONObject jsonObj = new JSONObject(sbSentence.toString());

    JSONArray jsonArray = jsonObj.getJSONArray("list");

    for (int i = 0; i < jsonArray.length(); i++) {
        JSONObject jsonObjList = jsonArray.getJSONObject(i);
        // 日時
        System.out.println(jsonObjList.getString("dt_txt"));
    }

練習課題1

「東京」の天気予報の結果について、全ての時間（3時間ごとの5日間）の「日時」「天気」「気温」を出力するプログラムを作成しなさい。

練習課題2

「あなたの国の都市」の、午前9時の5日間の「日時」「天気」「気温」を出力する天気予報のプログラムを作成しなさい。

課題

為替レートを取得することができるAPI「exchangeratesapi.io」を利用して、最新の為替レートの一覧を表示するプログラムを作成しなさい。

https://api.exchangeratesapi.io/latest

出力結果の例です。

{
    "rates": {
        "CAD": 1.5493,
        "HKD": 9.1443,
        "ISK": 163.2,
        "PHP": 57.268,
        "DKK": 7.443,
        "HUF": 356.83,
        "CZK": 27.177,
        "AUD": 1.6357,
        "RON": 4.8727,
        "SEK": 10.3933,
        "IDR": 17378.69,
        "INR": 86.476,
        "BRL": 6.5268,
        "RUB": 90.765,
        "HRK": 7.5713,
        "JPY": 124.41,
        "THB": 36.754,
        "CHF": 1.0742,
        "SGD": 1.6011,
        "PLN": 4.481,
        "BGN": 1.9558,
        "TRY": 9.282,
        "CNY": 7.9578,
        "NOK": 10.7925,
        "NZD": 1.7744,
        "ZAR": 19.481,
        "USD": 1.1799,
        "MXN": 25.073,
        "ILS": 3.9933,
        "GBP": 0.90598,
        "KRW": 1355.3,
        "MYR": 4.893
    },
    "base": "EUR",
    "date": "2020-10-12"
}

参考

上記の例は、EUR（ユーロ）を基準とした場合です。日本円を基準とする場合は、以下で実行します。

https://api.exchangeratesapi.io/latest?base=JPY

2020-09-14

Web API の例（OpenWeatherMap）と呼び出し方法

アプリ制作 2020

（ブログ記事の一覧は「こちら」）

HTTP通信（Java）の応用として、Web APIを実行するサンプルプログラムを作成してみましょう。

API とは、Application Programming Interface (アプリケーション・プログラミング・インタフェース) の略で、他のアプリケーションにアクセスすることのできる公開されたプログラム（関数）のことです。

最近では、Web APIの実行結果でよく使われるフォーマットとしては、JSONが多く見られます。ここでは、JSONフォーマットを出力するWeb APIの例として、天気情報を取得するWeb APIである「OpenWeatherMap API」を試してみます。

準備

まずはOpenWeatherMap のサイトにアクセスして、右上の「Sign Up」からユーザー登録を行ってください。（無料）
登録が完了すると、APIを利用するための「App ID」が作成されます。

OpenWeatherMap APIは、無料で使用することができますが、条件や制限されているものもあります。詳しくはOpenWeatherMapのサイトを確認してみてください。

OpenWeatherMap APIの種類

API一覧のうち、無料で利用できるAPIは以下になります。

Current Weather Data　：　現在の天気情報
5 Day / 3 Hour Forecast　：　3時間ごとの5日間の天気予報

それぞれ、「東京」の現在の天気と天気予報の情報を受け取るOpenWeatherMap APIのURLは以下になります。（最後の xxxx ... の部分は、登録時に取得した「App ID」を入力します。）

Current Weather Data（現在の天気情報）

https://api.openweathermap.org/data/2.5/weather?q=tokyo&appid=xxxxxxxxxxxxxxxxxxxxxxxx

5 Day / 3 Hour Forecast（3時間ごとの5日間の天気予報）

https://api.openweathermap.org/data/2.5/forecast?q=tokyo&appid=xxxxxxxxxxxxxxxxxxxxxxxx

それぞれのURLにアクセスして成功すると、天気に関する情報のJSONデータが取得されることがわかります。

例題（現在の天気情報）

まず、「Current Weather Data」のURLを作成します。URLに指定した地域と取得した「App ID」を入力して、完成したURLをブラウザでアクセスして、正しい結果が得られることを確認してください。

現在の天気情報の出力結果の例

OpenWeatherMap APIによる、「東京」の現在の天気情報の、出力結果の例です。

{
    "coord": {
        "lon": 139.76,
        "lat": 35.68
    },
    "weather": [
        {
            "id": 801,
            "main": "Clouds",
            "description": "few clouds",
            "icon": "02d"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 283.95,
        "feels_like": 278.39,
        "temp_min": 282.04,
        "temp_max": 287.04,
        "pressure": 1025,
        "humidity": 39
    },
    "visibility": 10000,
    "wind": {
        "speed": 4.6,
        "deg": 360
    },
    "clouds": {
        "all": 20
    },
    "dt": 1578278882,
    "sys": {
        "type": 1,
        "id": 8074,
        "country": "JP",
        "sunrise": 1578261066,
        "sunset": 1578296472
    },
    "timezone": 32400,
    "id": 1850147,
    "name": "Tokyo",
    "cod": 200
}

「JSON 整形」などで検索すると、上記のような見やすい表記に修正してくれるサイトが見つかります。データの構造を素早く理解するのに有効ですので、利用をお勧めします。

HTTP通信プログラムの作成

次に、HTTP通信（Java）の方法を用いて、「Current Weather Data」のURLにアクセスして、（指定した地域の）現在の天気情報を取得するJavaのプログラムを作成します。

JSONデータのパース（解析）

次に、JSONデータのパースを行い、取得したい情報のみを出力するプログラムを作成します。

以下は、「場所」「気温」「現在の天気」の情報を抜き出して取得した例です。

   // JSONオブジェクトのインスタンス作成
    JSONObject jsonObj = new JSONObject(sbSentence.toString());

    // 場所
    System.out.println(jsonObj.get("name"));

    // 気温
    JSONObject jsonObjMain = jsonObj.getJSONObject("main");
    float fTempK = jsonObjMain.getFloat("temp");
    System.out.println(fTempK);

    // 現在の天気
    JSONArray jsonArray = jsonObj.getJSONArray("weather");
    JSONObject jsonObjWeather = jsonArray.getJSONObject(0);
    String strWeather = jsonObjWeather.getString("main");
    System.out.println(strWeather);

パラメータの追加

オプションのパラメータを追加することで、取得する結果が変化します。以下のパラメータを追加すると結果もわかりやすくなるので便利です。

オプション「units=metric」

上記の例を出力すると、気温の値が通常と異なることがわかります。これは指定している単位が異なるようです。オプション「units=metric」を追加することで、普段使っている温度の単位で表示させることができます。

https://api.openweathermap.org/data/2.5/weather?q=tokyo&units=metric&appid=xxxxxxxxxxxxxxxxxxxxxxxx

オプション「lang=ja」

結果の一部が日本語で取得することができます。

https://api.openweathermap.org/data/2.5/weather?q=tokyo&lang=ja&appid=xxxxxxxxxxxxxxxxxxxxxxxx

もちろん、両方のパラメータを追加することも可能です。

https://api.openweathermap.org/data/2.5/weather?q=tokyo&units=metric&lang=ja&appid=xxxxxxxxxxxxxxxxxxxxxxxx

参考

OpenWeatherMapでは天気の画像が用意されています。以下のリンクを参照してください。

https://openweathermap.org/weather-conditions

「快晴（clear sky）」を取得する場合は、以下のURLになります。

https://openweathermap.org/img/wn/01d@2x.png

練習課題1

地域について、例題の「東京」から、あなたの国の都市に変更して、正しい結果が得られることを確認してください。

練習課題2

上記の例の他に、以下の追加の情報を出力するようにプログラムを修正してください。

description（詳細の天気）
temp_max（最高気温）
pressure（気圧）
humidity（湿度）

課題（天気予報）

例題の方法を用いて、東京の天気予報の情報を取得するプログラムを作成してください。

https://api.openweathermap.org/data/2.5/forecast?q=tokyo&appid=xxxxxxxxxxxxxxxxxxxxxxxx

3時間ごとの5日間の天気予報の情報が取得することができます。

1日あたり8の情報（24時間 ÷ 3時間＝ 8）が得られるので、合計40（8 x 5日間＝ 40）の天気予報の情報が得られることになります。そのことから、得られるJSONデータ量も多いものになります。

プログラムで出力するする情報は、各自で提案してもらえれば良いと思いますが、例えば「日時」「天気」「気温」の組み合わせを各時刻分（40の情報）だけ出力することができれば十分かと思います。

2020-07-20

HTTP通信（Java）

アプリ制作 2020

（ブログ記事の一覧は「こちら」）

HTTP通信は、主にWebブラウザでアクセスする、httpで始まるURLでインターネットにアクセスすることです。
JavaではHttpURLConnectionクラスというHTTP通信を簡単に行うことのできるクラスが用意されています。

ここでは、JavaでHTTP通信する方法と、HTTP通信で受け取ったJSONデータをパースする方法を学びましょう。

HTTP通信

下のURLにアクセスすると、以下のJSONデータが得られることを確認してください。 http://mjey.php.xdomain.jp/sa2/sample/json/sample1.php

{"user":{"id":"A1234567","name":"Taro Yamada"}}

上のURLを用いて、HTTP通信で受け取ったデータをコンソールに出力するサンプルプログラムを以下に示します。実際に実行させて動作を確認してください。

   String strUrl = "http://mjey.php.xdomain.jp/sa2/sample/json/sample1.php";

    HttpURLConnection connection = null;
    InputStream in = null;
    InputStreamReader inReader = null;
    BufferedReader br = null;

    try {
        URL url = new URL(strUrl);

        // Connectionを取得
        connection = (HttpURLConnection) url.openConnection();
        // リクエストのメソッドを指定
        connection.setRequestMethod("GET");
        // 通信開始
        connection.connect();

        // レスポンスコードを取得（200:成功）
        int iStatus = connection.getResponseCode();
        if (iStatus == HttpURLConnection.HTTP_OK) {
            // データを取得（バイト型）
            in = connection.getInputStream();

            // テキスト形式の取得
            inReader = new InputStreamReader(in);
            br = new BufferedReader(inReader);

            // テキストを取得
            String strLine;
            StringBuilder sbSentence = new StringBuilder();
            // 1行ずつテキストを読み込む
            while ((strLine = br.readLine()) != null) {
                sbSentence.append(strLine);
            }

            // JSONデータ（後で、この部分を修正する）
            System.out.println(sbSentence.toString());
        }

    } catch (IOException e) {
        e.printStackTrace();
    } finally {
        try {
            if (br != null) {
                br.close();
            }
            if (inReader != null) {
                inReader.close();
            }
            if (in != null) {
                in.close();
            }
            if (connection != null) {
                connection.disconnect();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

JSON データ形式を含む全ての文字列が取得できたことを確認してください。
次に、JSONデータをパースするプログラムに書き換える方法について確認しましょう。

JSONライブラリの登録

（前回の JSONデータの読み取りと同じ手順を行います。）

以下のリンクからJSONライブラリを取得します。
https://mvnrepository.com/artifact/org.json/json
リストの「Version」欄から最新のものをクリックします。移動したページで、表の「Files」にある「bundle」をクリックすると、「json-xxxxxxxx.jar」がダウンロードされます。

次に、下図のように、プロジェクト名を右クリックして、「ビルド・パス」→「外部アーカイブの追加」を選択して、「json-xxxxxxxx.jar」を登録します。

JSONデータの読み込み

例1

先ほどのサンプルプログラムのJSONデータについて、各キーの値を取得するためのプログラムです。先ほどのテキストファイルの読み込みのサンプルに追記します。

   // JSONオブジェクトのインスタンス作成
    JSONObject jsonObj = new JSONObject(sbSentence.toString());
    // キー"user"の値（JSONオブジェクト）をパース
    JSONObject item = jsonObj.getJSONObject("user");
    // 各キーの値を出力
    System.out.println(item.get("id"));
    System.out.println(item.get("name"));

例2

配列を含むJSONデータについても試してみます。

下のURLにアクセスすると、以下のJSONデータが得られることを確認してください。 http://mjey.php.xdomain.jp/sa2/sample/json/sample2.php

{"users":[{"id":"A1234567","name":"Taro Yamada"},{"id":"B1234567","name":"Jiro Tanaka"},{"id":"C1234567","name":"Ichiro Suzuki"}]}

各キーの値を取得するためのプログラムです。例1の部分から書き換えます。

   // JSONオブジェクトのインスタンス作成
    JSONObject jsonObj = new JSONObject(sbSentence.toString());
    // キー"users"の値（JSON配列オブジェクト）をパース
    JSONArray items = jsonObj.getJSONArray("users");
    for (int i = 0; i < items.length(); i++) {
        // JSONオブジェクトをパース
        JSONObject item = items.getJSONObject(i);
        // 各キーの値を出力
        System.out.println(item.get("id"));
        System.out.println(item.get("name"));
    }

課題

下のURLにアクセスして得られるJSONデータについて、キー"id", "name"の各値を出力するプログラムを作成してください。 http://mjey.php.xdomain.jp/sa2/sample/json/sample3.php

参考

今回のサンプルと課題で使用したURLについて、それぞれ以下のPHPプログラムを実行しています。

http://mjey.php.xdomain.jp/sa2/sample/json/sample1.php

<?php
    $id = "A1234567";
    $name = "Taro Yamada";

    $user = array("id" => $id, "name" => $name);

    $response = array("user" => $user);

    echo json_encode($response, JSON_UNESCAPED_UNICODE);
?>

http://mjey.php.xdomain.jp/sa2/sample/json/sample2.php

<?php
    $id = array("A1234567", "B1234567", "C1234567");
    $name = array("Taro Yamada", "Jiro Tanaka", "Ichiro Suzuki");

    $user0 = array("id" => $id[0], "name" => $name[0]);
    $user1 = array("id" => $id[1], "name" => $name[1]);
    $user2 = array("id" => $id[2], "name" => $name[2]);

    $users = array(0 => $user0, 1 => $user1, 2 => $user2);

    $response = array("users" => $users);

    echo json_encode($response, JSON_UNESCAPED_UNICODE);
?>

http://mjey.php.xdomain.jp/sa2/sample/json/sample3.php

<?php
    $id = "A1234567";
    $name = "Taro Yamada";

    $info = array("id" => $id, "name" => $name);

    $user = array("info" => $info);

    $response = array("user" => $user);

    echo json_encode($response, JSON_UNESCAPED_UNICODE);
?>