目次
- 概要
- Visualizerでアプリケーションを作ろう -画面編-
- Visualizerでアプリケーションを作ろう -コーディング編-
- まとめ
概要
Kony PlatformでYahoo!JAPANデベロッパーネットワークの気象情報APIを使った各県の降水の有無をお知らせしてくれるWebアプリケーションを作っていきたいと思います。
まずVisualizerで画面を作成し、必要なパラメータを考慮しIntegration ServiceとObject Serviceを作成していきます。本記事ではKony VisualizerにてアプリケーションのUIとフロントエンドのロジックを作っていきます。
Visualizerでアプリケーションを作ろう -画面編-
ここではまず作成しているアプリケーションのUIを作成していきます。Kony Visualizerでのアプリケーションの作成については下記の記事を参考にしてみてください。
・基本的なプロパティの説明
・Widgetの説明 Part1
・Widgetの説明 Part2
・Widgetの説明 Part3
・Widgetの説明 Part4
・Exercise -Widget編-
・Exercise -Segment編-
作成するアプリのUIはセグメントウィジェットの各行に都道府県の名前が入っており、その都道府県名をクリックするとポップアップが表示され降水の強さを表示するようなものです。今回作成するアプリはYahoo!JAPANデベロッパーネットワークの気象情報APIを使用しているので、各都道府県の緯度経度をあらかじめセグメントのマスターデータとして保持しておく必要があります。
下図はVisualizerのEdit画面と完成したWebアプリケーションのスクリーンショットです。
しかしこちらはあくまでサンプルなので、上記の記事と併せて参考にしていただき自分なりのUIを作ってみましょう。
※今回利用するAPIでは緯度経度の情報をリクエストパラメータとして送信する必要があるため、各都道府県の県庁所在地の緯度経度をセグメントのマスターデータに入力して値を保持しています。
Visualizerでアプリケーションを作ろう -コーディング編-
メインとなる画面のコントローラーにコーディングしていきます。functionの名前はあくまで一例であるので、自分のわかりやすいもの、プロジェクトの命名規則に則ったものを使用しましょう。
・function「preShow」
preShow : function(){
this.view.flxPopup.isVisible = false;
}
このファンクションにより画面に出ているポップアップを画面遷移時に隠すことができます。
・function「onRowClick」
onRowClick : function(){
var self = this;
var segInfo = this.view.segWeatherContent.selectedRowItems[0];
var name = segInfo.lblContent;
var location = segInfo.lblLocation;
var date = this.getCurrentDate();//後述
const headers = {};
const params = {
date : date,
appid : this.APPID,
coordinates : location,
past : "0",
output : "json"
};
//オブジェクトサービスの呼び出し
CmnUtilObjService.invokeCustom(
'Weather','getWeather',
headers,
params,
function(results){
var Rainfall = results.Weather[0].Rainfall;
kony.print("___"+Rainfall);
self.weatherCheck(Rainfall);//後述
self.view.flxPopup.isVisible = true;//ポップアップの表示
},
function(err){
kony.print("____error");
});
}
「var segInfo」には各都道府県の名前や緯度経度の情報が入っています。
このファンクションによりセグメントの行をクリックした際にObject Serviceを呼び出しています。Object Serviceを呼び出し、疎通が成功すると「function(results)」がコールバックとして呼び出され、疎通が失敗すると「function(err)」が呼び出されます。
また同時にポップアップを表示する処理も行なっています。
・function「getCurrentDate」
//現在の時刻を取得
getCurrentDate : function(){
//YYYYMMDDHHMMに変換
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = ("00" + (nowDate.getMonth()+1)).slice(-2);
var day = ("00" + nowDate.getDate()).slice(-2);
var hour = ("00" + nowDate.getHours()).slice(-2);
var minutes = ("00" + nowDate.getMinutes()).slice(-2);
var result = year + month + day + hour + minutes;
return result;
}
このファンクションにより現在の時刻を取得し、またその表示方法を変換しています。
今回利用するAPIのリクエストパラメータの指定が「yyyy/mm/dd/hh/mm」のためです。
・function「weatherCheck」
//降水量に応じて文言変更
weatherCheck : function(res){
if(res >= 0.1){
this.view.lblPopupWeather.text="今は小雨が降っています。";
kony.print("___rain1");
}else if(res >= 1.0){
this.view.lblPopupWeather.text="今は雨が降っています。";
kony.print("___rain2");
}else{
this.view.lblPopupWeather.text="今は雨は降っていません。";
kony.print("___rain3");
}
}
このファンクションにより気象情報APIから受け取ったレスポンス値によって、降水量ごとに文言を変更して表示させます。
・fuction「onClickClose」
onClickClose : function(){
this.view.flxPopup.isVisible = false;
}
このファンクションによりポップアップの閉じるボタンをクリックした時にポップアップを閉じます。
これらのファンクションを記載後、動作を行うウィジェットについてアクションを設定する必要があります。
またこれだけではObject Serviceを呼び出すことはできません。function「onRowClick」にあるようにObject Serviceにはそれを呼び出すための専用のモジュール(今回は「CmnUtilObjService」という名前とします)を追加する必要があります。
下図にあるようにVisualizerの左側にあるProjectタブのModulesの右クリックメニューから「New JS module」を選択しObject Serviceを呼び出すモジュールを作成しましょう。
・module「CmnUtilObjService」
const CmnUtilObjService = function () {
const SERVICE_NAME = "WeatherReport";
const invokeCustom = function(objectName, verbName, headers, params, onSuccess, onFailure) {
var serviceType = "online";
var objSvc = kony.sdk.getCurrentInstance().getObjectService(SERVICE_NAME, {"access": serviceType});
var dataObject = new kony.sdk.dto.DataObject(objectName);
// params を dataObjectに追加
Object.keys(params).forEach(function(key) {
var val = this[key];
dataObject.addField(key, val);
},params);
var options = {
"dataObject": dataObject
};
objSvc.customVerb(
verbName,
options,
function(results) {
kony.print("____ customVerb suc : " + JSON.stringify(results));
execSuccess(onSuccess, onFailure, results);
},
function(err) {
kony.print("____ customVerb err : " + JSON.stringify(err));
execFailure(onFailure, err);
}
);
};
const setCommonParams = function(params) {
if (!params) {
params = {};
}
// common parameter add
return params;
};
const execSuccess = function(onSuccess, onFailure, results) {
if (!results) {
execFailure(onFailure);
}
// 成功時コールバック
if(onSuccess) onSuccess(results);
};
const execFailure = function(onFailure, err) {
// TODO: 共通エラー処理
// 失敗時コールバック
if(onFailure) onFailure(err);
};
return {
invokeCustom : invokeCustom,
setCommonParams : setCommonParams
};
}();
このモジュールの「const SERVICE_NAME」は自分が作成したObject Serviceの名前を入力します。
では実際にビルドして動作するのかを確かめて見ましょう。
ビルド時の注意点として、まずはVisualizerの環境設定、下図の「Project Settings」をクリックしKony Fabricタブでの環境選択、下図の「Kony Fabric」で自分が作成したFabric Appsの選択を行うことです。
ビルド後、好きな都道府県を選択し、得られた降水の結果と気象情報を調べて得られた結果が同じならば成功です。
※Chromeの場合検証モードを開き、Consoleタブからアプリをクリックした際にAPIとの通信が正常かどうか確認できるので、レスポンスパラメータがどうなっているのか確認を推奨します。
まとめ
今回は気象情報APIを使用した簡単なサンプルアプリの作成を行いました。
このアプリ作成でKony公式ドキュメントだけではわかりにくかった部分や、落とし穴となり得る部分も見つかりました。しかし通常のWebアプリケーションの作成では画面の構成などもソースコードで書かなければならない上に、複数のプログラミング言語を駆使しなければいけない場面もあると思いますが、Kony PlatformではそれらをGUIベースで設定・作成することができ、使用するプログラミング言語もJavaScriptだけと非常に手軽にアプリ作成ができるツールです。アプリ作成が初めてという方なら尚更Kony Platformでアプリ作成を行う方が楽だと思います。
本記事が皆さんのKony Platformでのアプリ作成の手助けになれば幸いです。
本アプリの完成例はこちらとなります。
気象情報アプリ pic.twitter.com/BmiVWKR5WJ
— Kony (@Kony12763790) March 30, 2020