Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
+ Customer Portal
DelphiRAD Studio

Delphiのローコードで天気予報アプリを作成してみる!

著者：
2021年07月20日
pexels-mikhail-nilov-7988087

この記事は、Victory Fernandes氏のブログの抄訳です

リアルタイムおよび過去の世界の気象データ情報を使用してアプリケーションを強化しませんか？ 世界中のあらゆる場所の正確な天気情報を軽量のJSON形式で取得するAPIがあれば素晴らしいと思いませんか？ さらに重要なことは、できるだけ少ないコード量でこれらのことを実現し、しかも理解しやすく、完全にメンテナンス可能な状態を維持したいと思いませんか？

このブログでは、WeatherStack APIを利用し、Current Weather、Historical Weather、Time-Series、Forecastなどの各APIエンドポイントのJSON形式のレスポンスを取得するためのRESTクライアントライブラリに加え、RAD Studio LowCode Wizardを使用して、RAD Studio/DelphiでFireMonkeyのマルチデバイス・アプリケーションがどれくらい迅速かつ簡単に作成できるかを解説いたします。

WeatherStack APIは、RAD Studioで簡単に使用可能

WeatherStack APIは、堅実なデータソースを利用し、リアルタイムで更新される世界中の何百万ものロケーションの現在の気象データ瞬時にアクセスできます。このAPIは無償でサインアップ可能（最初の250回/月まで、クレジットカードは不要)で、非常に手頃な価格で始めることができ、料金プランに応じてさらに多くのサービスが利用できます。このデータは、世界最大級の気象観測所や気象データプロバイダーから提供されており、そのすべてが24時間体制で一貫性とデータの正確性を厳密に監視されています。

RAD StudioおよびDelphiアプリケーションでは、APIを呼び出して、指定した都市の名前に基づいて情報を要求することができます。

WeatherStack APIを設定するには？

WeatherStackAPIは、（https://weatherstack.com/）のWebサイトから、無償でサインアップできます。アカウントを作成してログインすると、クイックスタートガイドのダッシュボードに移動し、APIアクセスキーが提供されます。アクセスキーは一意で個人的なものであり、APIで認証するために必要ですので安全にご利用ください。

WeatherStack APIのエンドポイントを呼び出すには？

WeatherStackAPIを利用するためには、HTTP POSTメソッドでAPIベースのURL（http://api.weatherstack.com/）を呼び出す必要があります。JSONリクエストの本文は不要で、呼び出すエンドポイントに応じてURLアドレスにリクエストパラメータを追加します。WeatherStackAPIは、PHP、Python、Nodejs、jQueryなどのプログラミング言語からRESTベースでアクセスが可能です。Delphiの場合は、RESTクライアントライブラリを利用すると簡単にアクセスできます。

WeatherStackは、以下のようないくつかのAPIエンドポイントを提供しています。

  • Current Weather: 現在の気象データを取得
  • Historical Weather: 過去の気象データを取得
  • Historical Time-Series: 過去の時系列の気象データを取得
  • Weather Forecast: 最大14日分の天気予報を取得
  • Location Lookup: 1つまたは複数のロケーションを調査

このブログでは、Current Weatherエンドポイントに焦点を当てますが、利用するエンドポイントに応じて渡されるパラメータは異なります。エンドポイントとそのパラメータの完全かつ詳細なリストについては、WeatherStack Quickstart Guide（https://weatherstack.com/quickstart）を参照してください。

// Current Weather API Endpoint
<a href="http://api.weatherstack.com/current">http://api.weatherstack.com/current</a>
? access_key = YOUR_ACCESS_KEY
& query = New York
 
// optional parameters:
& units = m
& language = en
& callback = MY_CALLBACK

WeatherStack APIのエンドポイントは何を返すのですか？

APIを呼び出した後に取得できる主な結果は、気温、風、気圧、湿度、視界、さらにはテキストの天気予報を表すアイコンのリンクなど、アプリでユーザーに現在の天気を伝えるために必要なあらゆる種類の情報を含む非常に完全なリストになります。

{"request":{
"type":"City",
"query":"New York, United States of America",
"language":"en","unit":"m"},
"location":{"name":"New York",
"country":"United States of America",
"region":"New York",
"lat":"40.714",
"lon":"-74.006",
"timezone_id":"America/New_York",
"localtime":"2021-07-14 17:04",
"localtime_epoch":1626282240,
"utc_offset":"-4.0"},
"current":{"observation_time":"09:04 PM",
"temperature":30,
"weather_code":116,
"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"],
"weather_descriptions":["Partly cloudy"],
"wind_speed":0,
"wind_degree":0,
"wind_dir":"N",
"pressure":1020,
"precip":0,
"humidity":59,
"cloudcover":50,
"feelslike":34,
"uv_index":7,
"visibility":16,
"is_day":"yes"}}

アプリケーションからWeatherStackAPIへアクセスするには？

WeatherStack APIを設定するための基本的な手順が完了したら、コードを書き始める前に、WeatherStack APIにアクセスできることを確認する必要があります。

RAD Studio(Delphi/C++Builder)では、RESTデバッガを使ってRESTコンポーネントを自動的に作成し、アプリに貼り付けることができるので、APIへの接続が非常に簡単です。

またRAD Studio (Delphi/C++Builder)では、すべての作業は3つのコンポーネントを使用して行われ、API呼び出しが行われます。 それらは、TRESTClient、TRESTRequest、およびTRESTResponseです。 RESTデバッガを利用して正常に接続できたら、コンポーネントをコピーして貼り付けると、TRESTClientのBaseURLにAPIのURLが設定されます。 TRESTRequestコンポーネントで、リクエストタイプがrmPOST、ContentTypeがctAPPLICATION_JSONがそれぞれ設定され、そしてPOSTのリクエスト本文が1つ設定されます。

RESTデバッガの実行 – APIを操作するための貴重なツール

RAD Studio (Delphi/C++Builder)を起動し、IDEのメイン メニューから [ツール] > [RESTデバッガ] をクリックします。REST デバッガを以下のように設定します。 content-typeを application/jsonに設定して、POST URL、JSON リクエスト本文、API アクセスキーを追加します。 最後に「要求の送信」ボタンをクリックすると、下図のようなJSONレスポンスが表示されます。下図は、パラメータとしてWeatherStack APIのダッシュボードからコピーしたアクセスキーを使用し、東京(Tokyo)の現在の天気を照会しています。

1-2893012

Delphiのローコードとは?

近年、ローコードアプリケーション開発のアプローチが広く企業に普及してきていますが、それには正当な理由があります。つまり、ソフトウェアの需要需要の増加と、相対して高まる開発の難しさです。開発スピードを高め、技術の複雑性を軽減するというローコードのアプローチにおいては、ビジュアルデザイナでコンポーネントを接続してソフトウェアを構築するRAD手法を導入したDelphiが、その先陣を切っていると言えます（ブログ記事「DelphiとRAD Studio – ローコード開発の原点」を参照）。

多くのローコードソリューションで重要なのは、拡張性です。ローコードソリューションの中には、拡張を行う際に従来のコーディング手法に基づくアプリケーションへと拡張できないものが多く、これらは機能面で著しい制限が存在すると言えます。もしあなたが技術アドバイザーであれば、顧客や企業を制限するようなことは勧めたくはないでしょう。ローコードを見据えた最適な開発ソリューションは、成長と拡張への道を提供できるものでなければなりません。Delphiは、こうした観点においても秀でています。

一方、これまでのバージョンのDelphiでは、常に、新規プロジェクトを作成し、フォームや画面を作成することから始めるという手順が必要でした。わずかなコードしか記述しない場合でも、複雑な機能を実装しようとする場合でも、そのアプローチに違いはありません。こうした煩雑性を解消する第一歩として、10.4.2向けに新しいアドオンを提供しています。

RAD Studio / Delphi 10.4.2でGetItパッケージマネージャを開き、FireMonkey App Low Code Wizardを選択し、インストールできます。

2-1777627

FireMonkey向けのLow Code App Wizard のインストールが完了し、RESTデバッガで 上記で行ったAPI 呼び出しの設定とテストを完了した後、REST デバッガの[コンポーネントのコピー]ボタンをクリックします。RAD Studio(Delphi)を起動し、IDEのメインメニューから「ファイル」→「新規作成」→「マルチデバイスアプリケーション(Delphi)」をクリックし、下図のように Firemonkey のテンプレートアプリを選択し、ウィザードの簡単な手順に従ってローコードアプリを作成できます。

3-4093735

このウィザードには、完全に機能するクロスプラットフォームのアプリケーションで、すべてのモバイルアプリケーションに必要な基本的な機能がすでに含まれており、そのまま実行して使用することができます。さらに、アプリケーション開発のベストプラクティスが示された非常にクリーンで拡張可能なデザインにより、少ないコードで画面を追加することができ、これにはカスタマイズ時に高品質なアプリを維持するためのテストコードのセットも含まれます。

Delphiのローコードアプリウィザードを使用してアプリを構築する

選択できる任意のセットは、以下の通りです。

  • ユーザー アカウント: サインアップ、サインイン、および独自の認証用のフックを備えたプロファイル画面 
  • アプリのテーマ（ライトまたはダーク）やタイムゾーンの変更など、いくつかの設定を行う画面
  • 連絡先(アドレス帳)の画面
  • 利用規約、会社概要、プライバシーポリシーなどの画面は、独自のデータ用に簡単にカスタマイズ可能
  • データベースレイヤー：InterBaseを使用して、アプリにデータを保存
  • 新しい機能を追加するためのテンプレートまたは例として使用可能な新しい画面例

ローコードウィザードは、コードを実装するための多くのフォームを備えた完全なプロジェクトを作成するので、時間を大幅に節約することができます。ローコードウィザードが完了すると、プロジェクトが作成されます。

ウィザードによって作成されたプロジェクトは、そのまますぐに実行できる便利なアプリケーションのフレームワークで、DelphiのRAD（またはローコード）のビジュアルアプリケーションデザインを使用してカスタマイズや拡張を施すことができます。

ここでは、ウィザードによって作成された既存のフォーム(NewForm)を下図のようににデザイナで開きます。

4-8806992

このフォーム上でCtrl+Vを押して、RESTデバッガからコピーしたコンポーネントを貼り付けます。この操作により、RESTClient1、RESTRequest1、RESTResponse1 というフォームに 3 つのコンポーネントが追加されます。

5-2389837

天気予報アプリを作るための最後のステップ

ここでは、以下のような非常にシンプルなコードをTButtonのOnClickイベントハンドラに、WeatherStack APIのCurrent Weatherエンドポイントにアクセスし、必要な都市のJSONレスポンスを受け取る処理を実装します。

procedure TNewFormFrame.Button1Click(Sender: TObject);
begin
inherited;
 
memo1.Lines.text := '';
 
RESTClient1.ResetToDefaults;
RESTClient1.Accept := 'application/json, text/plain; q=0.9, text/html;q=0.8,';
RESTClient1.AcceptCharset := 'UTF-8, *;q=0.8';
RESTClient1.BaseURL := 'http://api.weatherstack.com/current';
RESTClient1.HandleRedirects := True;
RESTClient1.RaiseExceptionOn500 := False;
 
//here is were we pass the access_key and city as parameters
RESTRequest1.Resource := Format('?access_key=%s&query=%s', [edit1.Text, edit2.Text]);
 
RESTRequest1.Client := RESTClient1;
RESTRequest1.Response := RESTResponse1;
RESTRequest1.SynchronizedEvents := False;
RESTResponse1.ContentType := 'application/json';
 
RESTRequest1.Execute;
 
memo1.Lines.text := RESTResponse1.Content;
end;

このサンプルアプリケーションでは、アクセスキーを貼り付けるためのTEditと、Cityパラメータを貼り付けるための別のTEdit、REST APIコールのJSON結果を表示するためのTMemoが用意されています。これでレスポンスデータを操作して、アプリケーションで情報を処理し、ニーズに合った方法で視覚的に表示するために必要なすべてのものが揃いました。

下図では、パラメータとしてWeatherStack APIのダッシュボードからコピーしたアクセスキーを使用し、東京(Tokyo)の現在の天気を問い合わせています。

6-4367572

このブログでは、WeatherStack APIにサインアップする方法、さらにRAD Studio RESTデバッガを使用して現在の気象データの取得するエンドポイントに接続し、そのコードを実際のアプリケーションにコピー、そしてDelphi と FireMonkey の Low Code App Wizard を使用して、WeatherStack APIにアクセスし、JSONデータを取得する方法を見てきました。

今回 Low Code App Wizardで作成されたデモアプリケーションでは、Windows上で実行していますが、同様なプロジェクトコードで、macOSデスクトップ、Android/iOSなどのモバイルデバイス上でWeatherStack APIにアクセスし、JSONデータを取得するアプリケーションを実行することができます。

このブログで紹介したデモアプリケーションの全ソースコードは、以下のURLからダウンロードできます。

https://github.com/checkdigits/WeatherApp_WeatherStackAPI

RAD Studio 13.2 Florence Now Available! Kai 1.1.1 Now Available! What's Coming in RAD Studio 13.2 Florence

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.

Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition
0
4372
Share:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES