catch-img

天気API | 無料トライアルでも機能充実!天気APIで天気予報を取得してみた

本記事ではLifesocketの無料トライアルの流れと、実際にAPIで天気予報を取得する流れをご紹介いたします。Lifesocketでは1カ月の無料トライアル期間を設けておりますので、どのようなことができるのかお試ししたい方は、是非ご利用ください。

目次[非表示]

  1. 1.Lifesocket無料トライアルとは?
    1. 1.1.Lifesocketについて
    2. 1.2.無料トライアルについて
  2. 2.無料トライアルの登録手順をご紹介
    1. 2.1.無料トライアルの登録方法
    2. 2.2.サポートページについて
    3. 2.3.APIキーの取得方法
  3. 3.無料トライアルを使って実際に天気予報を取得してみた
    1. 3.1.APIをたたく/レスポンス内容の確認
    2. 3.2.実装イメージ/イメージのサンプルコード
  4. 4.まとめ・終わりに

Lifesocket無料トライアルとは?

Lifesocketについて

Lifesocketでは天気予報や生活指数情報(花粉、紫外線など)をセットにしたAPIをパッケージにしてご提供しています。さらに月単位で利用ができ、利用期間に応じて開始・終了することが可能です。安価でご利用いただくことができ、簡単に実装することができます。ラインナップはこちらからご覧いただけます。

無料トライアルについて

Lifesocketでは商用利用できる天気予報APIの無料トライアルプランを2つご用意しています。
※Amazonサイトにてご提供中。こちらから> (アマゾンサイトに遷移します。)
また、Amazonサイトでは提供していない他のAPIのトライアルも可能でございます。希望の方はこちらからお問い合わせください。

■無料トライアル期間のあるプラン(天気予報・生活指数取得API)
・スタンダートプラン:300回/分
・プレミアムプラン:3,000回/分

■Amazonサイトより無料で利用できるAPIの項目は下記の通りです。

  • 天気予報取得API(地点もしくは緯度経度指定)
    • 日別天気予報
    • 1時間毎天気予報
  • 生活指数取得API(地点もしくは緯度経度指定)
    • スギヒノキ花粉飛散指数
    • 傘指数
    • 洗濯指数
    • 体感ストレス指数
    • ビール指数
    • 熱帯夜指数
    • お肌指数
    • 熱中症指数
    • 紫外線指数

■また下記のAPIの無料トライアルも可能です。お問い合わせください。こちらから>

  • 熱中症指数1時間毎API(地点もしくは緯度経度指定)
    • 1時間毎熱中症指数
  • 気象観測データAPI
    • 過去1週間分の気象観測データが取得できるAPIです。
  • 高解像度降水予測API
    • 高解像度雨レーダーから取得した1時間先までの降水強度(mm/h)を取得できるAPIです。
  • 雨レーダーjavascriptマップサービス
    • 高解像度雨レーダーをWebサービスに表示するためのJavascriptと雨情報を提供します。

※いずれも30日間無料でお使いいただけます。API詳細はこちらから>

無料トライアルの登録手順をご紹介

無料トライアルの登録方法

今回は『天気予報・生活指数取得API』のプレミアムプランをAmazonサイトから購入し、無料トライアルをする方法をご紹介いたします。AmazonサイトよりトライアルをすることができるAPIは天気予報・生活指数取得API(スタンダードプラン/プレミアムプラン)になります。他のAPIのトライアルも可能ですので、ご希望の方はこちらからお問い合わせください。

1.商品の購入
「カートに入れる」ボタンをクリックします。


2.注文の確定
利用規約、キャンセル・返品ポリシーを確認し、「注文を確定する」ボタンをクリックします。


3.ライブラリへ移動
注文確定後に表示される画面の下記赤枠「ゲーム&PCソフトダウンロードライブラリ」のリンクをクリックします。もしくは、アカウントサービス「ゲーム&PCソフトダウンロードライブラリ」ない「定期購入(サブスクリプション)」をクリックします。


4.ライセンス割り当て
購入した商品の行右端にある「ライセンス管理」ボタンをクリックします。
「自分に割り当てる」または、Eメールアドレスを入力して指定のアドレスに「ライセンスを割り当てる」ボタンをクリックします。


5.Lifesocketアカウントとのリンク
アカウントをお持ちでない場合は「新しいアカウントを作成してリンク」ボタンをクリックします。登録情報を入力する画面が表示されます。必要事項を記入してください。登録が完了すると登録完了画面が表示されます。登録完了後、入力したメールアドレス宛に登録完了の通知が届きます。


また、アカウントをお持ちの場合は「アカウントを選択」、または「別のアカウントとリンクする」をクリックし、リンクするアカウントを決定します。

6.Lifesocketの利用を開始
「商品を利用開始」ボタンをクリックします。

7.Lifesocketにログイン
ID、パスワードを入力してログインしてください。

サポートページについて

サポートページの活用方法についてご紹介いたします。サポートページログイン後下記の情報をサポートページより確認していただくことが可能になります。

  • アクセスキー
  • お知らせ
  • サービスの利用情報
  • API利用概要
  • 各種APIのコード情報や仕様詳細
  • 各種APIリクエスト

APIキーの取得方法

次に、実装にあたって必要なAPIキーの取得方法について説明いたします。サポートページにログイン後、画面右上にアカウント情報が表示されております。アカウント情報をクリックすると『登録情報』を選択できるので、クリックしてください。

クリック後、画面が切り替わります。こちらのページでアクセスキー①、②を確認していただくことが可能です。万が一アクセスキーが漏れてしまった場合は、『再発行』ボタンからアクセスキーを再発行してください。

無料トライアルを使って実際に天気予報を取得してみた

APIをたたく/レスポンス内容の確認

では実際にJavascriptでの実装方法をお見せします。『天気予報取得API(日別/緯度経度)』を使います。各種条件は下記とします。

  • 場所:東京都新宿区
    • 緯度:35.6895014
    • 経度:139.6917337
  • 項目:天気、天気アイコン、最高気温、最低気温、降水確率、風向、風速
  • 言語:日本語


まず3つのファイルを作成します。

<> index.html
JS main.js
#  style.css


次にAPIのクエリ文字列を作りました。

  • src/index.html
<!DOCTYPE html> 
<htmllang="en"> 

<head> 
    <title>Display weather information</title> 
    <metacharset="utf-8"> 
    <metaname="viewport"content="width=device-width, initial-scale=1"> 
    <scriptsrc="libs/jquery-3.6.0.min.js"></script> 
    <scriptsrc="libs/moment.js"></script> 
    <scriptsrc="libs/moment-with-locales.js"></script> 
    <scriptsrc="main.js"></script> 
    <linkrel="stylesheet"href="style.css"> 
</head> 

<body> 
    <!--Display weather information here--> 
    <divid="weatherInfoId"></div> 
</body> 

</html> 
  • src/main.js 
$(function() { 
    const apiUrl = https://www.life-socket.jp/api/v1/weather/location/35.6895014/139.6917337?days=7'; 

    // Call Lifesocket API to get weather information 
    // To call api, you need to add x-access-key to header 
    $.ajax({ 
        url: apiUrl, 
        headers: { 'x-access-key': 'XXXXXXXXXXXXXX' }, 
        success: function(response) { 
            displayWeatherInfo(response); 
        }, 
        error: function(xhr) {} 
    }); 

    displayWeatherInfo = function(data) { 
        const hasData = data !== null && data.Daily !== null && data.Daily.length > 0; 
        if (!hasData) { 
            return; 
        } 

        let dateHeader = '<div class="item header-bg">日付</div>'; 
        let rain = '<div class="item header-bg">天気</div>'; 
        let temp = '<div class="item header-bg">気温(℃)</div>'; 
        let rainPercent = '<div class="item header-bg">降水確率(%)</div>'; 
        let wind = '<div class="item header-bg">風向風速</div>'; 
        $.each(data.Daily, function(index, item) { 
            moment.locale('ja'); 
            const date = moment(item.DateTime); 
            const weekDayName = date.format('ddd'); 

            dateHeader += ` 
                <div class="item date-bg"> 
                    <div class="info"> 
                        <div>${date.format('MM/DD')}</div> 
                        <div>(${weekDayName})</div> 
                    </div> 
                </div>`; 
            // To display weather icon, you need to download weather icon from Lifesocket 
            rain += ` 
                <div class="item"> 
                    <div class="info"> 
                        <div class="weather-icon"> 
                            <img src="./images/weather-icons/${item.Icon}"> 
                        </div> 
                        <div>${item.WeatherName}</div> 
                    </div> 
                </div>`; 
            temp += `<div class="item"><span class="max-temp">${item.TemperatureMax}</span>/<span class="min-temp">${item.TemperatureMin}</span></div>`; 
            rainPercent += `<div class="item">${item.RainPercentage}</div>`; 
            wind += `<div class="item">${item.WindDirectionName}${item.WindSpeed}m/s </div>`; 
        }); 

        const table = ` 
        <div class="c-weather"> 
            <div class="row">${dateHeader}</div> 
            <div class="row">${rain}</div> 
            <div class="row">${temp}</div> 
            <div class="row">${rainPercent}</div> 
            <div class="row">${wind}</div> 
        </div> 
        `; 

        $("#weatherInfoId").append(table); 
    } 
}); 

参考までに・・・
ピンポイントコードで指定、もしくは緯度経度を指定してリクエストすることが可能です。

  • ピンポイントコード指定のパラメーター
    • PinpointCode:ピンポイントのコード
    • days:取得する日数(1:当日分-10:10日分)
    • lang:langパラメーターについて。"ja"か"en"に設定することは任意です。

      GET : https://www.life-socket.jp/api/v1/weather/{PinpointCode}

  • 緯度経度指定のパラメーター
    • lat - 緯度:パラメータlatは-90~90の範囲で指定してください。
    • lon - 経度:パラメータlonは-180~180の範囲で指定してください。
    • hours:最小1、最大52
    • lang:langパラメーターについて。"ja"か"en"に設定することは任意です。

      GET : https://www.life-socket.jp/api/v1/weather/location/{lat}/{lon}


上記クエリ文で、『Datetime(予報日付)』『Weathercode(天気コード)』『Weathername(天気名)』『TemperatureMin(最低気温)』『TemperatureMax(最高気温)』『rainPercentage(降水率)』『WindDirection(風向)』『WindSpeed(風速)』『icon(天気アイコン)』のデータを正しく取得できているのが分かります。


また、天気アイコンの準備もございますので、アイコンをご自身で準備していただく必要はございません。

  • レスポンス項目のご紹介
    • DateTime:予報日付
    • WeatherCode:天気コード
    • WeatherName:天気名
    • TemperatureMin:最低気温(℃)
    • TemperatureMax:最高気温(℃)
    • RainPercentage:降水率(%)
    • RainQuantity:降水量(mm/h)
    • WindDirection:風向の数字情報
    • WindDirectionName:風向名
    • WindSpeed:風速
    • Icon:天気コード番号

実装イメージ/イメージのサンプルコード

実際に新宿区の週間予報をサービスに実装したデザインがこちらになります。

サンプルコードは下記です。こちらのサンプルコードをご利用いただければ、簡単に上記画像のような週間予報を実装することが可能です。

html, 
body, 
div, 
p { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
 
#weatherInfoId { 
    padding: 5px; 
    display: flex; 
    justify-content: center; 
} 

.c-weather { 
    display: flex; 
    font-size: 12px; 
    width: 100%; 
    line-height: 1.2; 
} 

.row { 
    display: flex; 
    flex-direction: column; 
    width: 20%; 
} 

.header-bg { 
    background-color: #fcecde; 
} 

.date-bg { 
    background-color: #fcf4ed; 
}  

.item { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 5px; 
    border-top: 1px solid #c7c4be; 
    border-left: 1px solid #c7c4be; 
    box-sizing: border-box; 
    height: 60px; 
    max-height: 60px; 
    text-align: center; 
} 

.item:last-child { 
    border-bottom: 1px solid #c7c4be; 
} 

.row:last-child { 
    border-right: 1px solid #c7c4be; 
} 

.info { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
} 

.weather-icon { 
    width: 40px; 
} 

.weather-iconimg { 
    width: 100%; 
    max-width: 100%; 
} 

.max-temp { 
    color: #fe284e; 
} 

.min-temp { 
    color: #42abe1; 
} 

@media (min-width: 425px) { 
    .c-weather { 
        font-size: 13px; 
    } 
    .row { 
        width: 100%; 
    } 
} 

@media (min-width: 768px) { 
    .c-weather { 
        font-size: 14px; 
        flex-direction: column; 
    } 
    .row { 
        flex-direction: row; 
        width: 100%; 
    } 
    .row:nth-child(2).item { 
        height: 80px; 
        max-height: 80px; 
    } 
    .item { 
        width: 12.5%; 
        height: 45px; 
        max-height: 45px; 
    } 
    .item:last-child { 
        border-bottom: none; 
        border-right: 1px solid #c7c4be; 
    } 
    .row:last-child { 
        border-right: none; 
        border-bottom: 1px solid #c7c4be; 
    } 
    .weather-icon { 
        width: 50px; 
    } 
} 

@media (min-width: 992px) { 
    .c-weather { 
        font-size: 16px; 
        width: 900px; 
    } 
} 

まとめ・終わりに

本記事では、無料トライアルの登録から実装まで、実際のコードをお見せしながら紹介しました。
今回は天気予報取得APIを使いましたが、他にも生活指数取得APIや、気象観測データAPI、高解像度降水予測API、雨レーダーjavascriptマップサービスなど様々なラインナップを取り揃えております。ぜひ一度試してみて、その簡単さと便利さを実感してみましょう。



  天気予報・生活指数API 天気API【Lifesocet】をご紹介しています。商用利用ができる天気情報・生活指数情報を安価に提供します。気象業務許可を受けており、品質担保された情報を配信します。JSON形式で取得できるAPIなので、WEBサイト作成、アプリ開発など幅広く利用できます。 ソケラボ


  資料ダウンロード Lifesocketは商用利用ができる天気情報・生活指数情報を安価に提供します。Lifesocketに関する紹介資料をダウンロードできます。 ソケラボ



資料ダウンロードフォーム

Lifesocketの概要に関する資料をご用意しています。ダウンロードフォームからお申し込みください。
アップロードしています。少々お待ちください。

お問い合わせ

サービスに関するご質問、導入や費用のご相談など、お気軽にご連絡ください。