【初心者でもわかる】API連携とは？利用するメリット・API連携方法を具体例付きで紹介

2021-09-27 11:08（更新：2022-04-19 07:22）Lifesocketメディア編集部

APIについてご存じでしょうか。API連携で具体的に何ができるかわからない方も多いかと思います。APIとは、ソフトウェアやプログラムなどお互いをつなぐインターフェイスのことで、身の回りの多くのサービスがAPI連携をしています。

今回は、APIで何ができるか、APIの特徴とメリットについてご紹介します。最後に、Lifesocketサービスの天気APIを使ってどのように実装するかご紹介いたしますので、是非API連携をお試しください。

1.ダウンロード：天気APIサービス概要資料
2.API連携とは？
3.APIとWebAPIの違いは？
4.API連携の特徴：WebAPIを実装することで出来ること　
5.実は身近にあるAPI連携サービスの紹介　
6.API連携は利用すべきか？メリットとデメリット　
7.API連携方法、実装手順の説明　
8.Lifesocketの天気APIをつかって週間天気予報を表示してみた　
9.Q&A：API連携方法でよくある質問　
10.まとめ・終わりに

ダウンロード：天気APIサービス概要資料

Lifesockeは全国約2,000地点の天気予報をはじめとするさまざまな情報を提供するAPIプラットフォームです。Lifesocketを使うと天気予報だけでなく、花粉飛散指数や紫外線指数といったバリエーションの豊富なAPIをコールできるようになります。1か月間の無料トライアル期間を設けておりますので、ぜひ一度試してみて、その簡単さと便利さを実感してみましょう。

天気API資料画像

サービス概況資料はこちら

API連携とは？

APIとは「Application Programming Interface」という言葉の頭文字で、ソフトウェアやプログラムなどお互いをつなぐインターフェイスのことをいいます。

また、インターフェイスは、異なるものを繋ぐ、という意味があります。

例えば、USB端子など、異なる機器をつなぐコネクターは「ハードウェアインターフェイス」と呼ばれます。他にも、プログラム同士の間でのデータのやり取りをする形は「ソフトウェアインターフェイス」と呼び、コンピューターとそれを使用する人間をつなぐものは「ユーザーインターフェイス」と言います。

そして、APIはソフトウェアやアプリケーション、プログラム同士をつないでいるインターフェイスです。ソフトウェアやアプリケーション、プログラムなどの一部を外部に公開することによって他のアプリケーションと機能を共有したり拡張したりすることが可能となります。

APIとWebAPIの違いは？

では、よく耳にする「WebAPI」は「API」と何が異なるのでしょうか。

WebAPIとは、APIのやり取りをWeb上で可能にしたものです。APIの提供側と、APIの利用者とのやりとりをHTTPプロトコルを用いて実現するAPIをWebAPIといいます。異なるプログラミン言語で開発されたアプリケーション間の連携をする際に、APIでは通常APIの利用者側が使用しているプログラミング言語と同じ言語を使用するため連携が限られますが、Web APIはHTTPプロトコルを用いてネットワーク越しに呼び出すため連携が容易になります。

WebAPIの代表的な種類として、「SOAP(Simple Object Access Protocol)」と、「REST(Representational State Transfer)」が挙げられます。

API連携の特徴：WebAPIを実装することで出来ること　

多くのサービスがWeb APIに対応していて、ショッピングサイト、検索サイト、SNSなど、ほかにも旅行サイト、グルメサイト、天気予報サイト、ニュースサイトなどが挙げられます。Web APIを活用することで、多くの機能を自由に組み合わせることができるので、サービスの拡張が可能になります。例えば、

宿の宿泊料金/空室情報を取得して、比較表示する。
ショッピングサイトから最新商品情報を取得し、自分のWebサイトに掲載する。
特定のキーワードやフィルタ条件に合致する動画の情報を一括で取得し、
まとめサイトを作成する。
自分のWebサービスの更新情報を複数のSNSに自動投稿する。

上記はあくまで一例ですが、WebAPIを利用すれば様々な機能が実現可能になります。

実は身近にあるAPI連携サービスの紹介　

実際に私たちの身近にあるAPI連携を行ったサービスの活用事例をご紹介いたします。

カレンダーの予定を引っ張ってきたり、他にもメール、連絡先や地図など様々なクラウドサービスを提供しており、他サービスと連携できるようにAPIを提供しています。
チャット、チーム、カレンダー、ファイル、ボード等のクラウドサービスとの連携が可能です。
明細の取得、請求書の閲覧、検索、取引先の閲覧などクラウド会計ソフトで提供している機能の一部を他のシステムでも利用することが可能です。
POSレジや、スプレッドシート、帳票作成システム等の機能を、他システムと連携することが可能です。
名刺管理サービス内で管理している顧客データを他のアプリで連携することが可能です。

API連携は利用すべきか？メリットとデメリット　

APIを利用してアプリケーションが作られることで、大きく次の３つのメリットが生まれます。

①開発効率アップ

APIを呼び出すことだけで機能が使えるため、自分で1からプログラムを組む必要がなく、
開発時間を短縮することができます。

また、利用するAPIによって金額は様々ですが、無料・低額で提供しているAPIも多く存在するため、連携にかかる費用も抑えることができます。

②利便性の統一

基本的な動きや見た目が共通化されるため、操作に迷うことがなくなり、ユーザーの利便性が向上します。また、APIをうまく活用することで多彩なサービスを実現することも可能になります。

③セキュリティの向上

すでにあるセキュリティレベルの高いシステムを利用することで、SNS認証などを実現することができ、ユーザーの満足度が向上します。

ただし、APIを利用するにあたって注意しなければいけない点もあります。サービス停止による不具合で影響が出てしまう可能性があることです。万が一提供元がサービス停止した場合、自社のサービスも同様に不具合が発生する可能性があります。更に、サーバーダウンによる障害でも影響が出てしまいます。提供元のサーバーがダウンすることで、連携が不可能になり、同様に障害が発生してしまう恐れがあります。

そのため、万が一のサービス停止を想定して、対応策を検討しておく必要があります。

API連携方法、実装手順の説明　

APIの大まかな実装手順を解説します。必ずしも全て同じではないので、一例として参考にしてください。

①ユーザー情報の登録

まず初めに、提供元の会社と連携を行うために、自社の情報を登録する必要があります。
以下のような項目を登録する必要があります。

ソフトウェア名称
ソフトウェア概要
利用目的
国

②APIキー、シークレットキーの取得

次に、APIキー、シークレットキーを取得し、このキーを組み込むことで、APIの利用が可能となります。取得したキーは厳重に管理する必要があり、万が一漏れてしまったときに、再発行ができる場合もあります。

③実装

最後に実装に取り掛かりますが、それぞれの仕様書に沿って実装をする必要があります。

APIを利用するまでには上記3つのステップで完了となります。

Lifesocketの天気APIをつかって週間天気予報を表示してみた　

では実際に実装方法をお見せします。
今回はLifesocketで提供している『天気予報取得API(日ごと）』を使います。各種条件は下記とします。

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

これらをもとにAPIのクエリ文字列を作りました。
まず3つのファイルを作成します。

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

src/index.html

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title>Display weather information</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="libs/jquery-3.6.0.min.js"></script> 
    <script src="libs/moment.js"></script> 
    <script src="libs/moment-with-locales.js"></script> 
    <script src="main.js"></script> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body> 
    <!--Display weather information here--> 
    <div id="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':'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'}, 
        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); 
    } 
});

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

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

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

src/style.css

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-icon img { 
    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; 
    } 
}

こちらの記事で無料トライアルから実装までの一連の流れをご紹介しております。

Q&A：API連携方法でよくある質問　

Q：Web APIを使う前提条件は何ですか？
A：Web APIを利用するには「PHP」や「Perl」、「JavaScript」などのプログラミング言語にある程度精通していることが前提となります。取得したデータを見やすい形式に変換する必要があり、その際にPHPやJavaScriptなどのプログラミング言語が用いられます。

Q：サービスに合うAPIをどうやって見つければいいですか？
A：Web検索で、サービスに合うAPIを探しだすことも可能ですが、さまざまなAPIを集めたマーケットプレイスというものが存在します。APIマーケットプレイスでは、カテゴリー、キーワード検索からAPIを探し出すことが可能です。

まとめ・終わりに

本記事ではAPIについて詳しくお話ししました。APIは自分で1からプログラムを組む必要がなく、さらにセキュリティの高いシステムを利用できることから、多くのサービスで連携が行われています。

また、実装例で利用したLifesocketは、全国約2,000地点の天気予報をはじめとするさまざまな情報を提供するAPIプラットフォームです。Lifesocketを使うと天気予報だけでなく、花粉飛散指数や紫外線指数といったバリエーションの豊富なAPIをコールできるようになります。1か月間の無料トライアル期間を設けておりますので、ぜひ一度試してみて、その簡単さと便利さを実感してみましょう。ご希望の方はこちらよりお問い合わせください。

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

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

Lifesocketメディア編集部

当ブログは、天気予報や気象情報に関するブログメディアです。当社は予報業務許可（許可第206号）を取得、現役の気象予報士も在籍。また、航空気象システム「ARVI」、天気総合情報サイト「ライフレンジャー天気」など、多数の気象データの取り扱いがあります。これからも、天気・気象に関するお役立ち情報をお届けします。

【初心者でもわかる】API連携とは？利用するメリット・API連携方法を具体例付きで紹介

ダウンロード：天気APIサービス概要資料

API連携とは？

APIとWebAPIの違いは？

API連携の特徴：WebAPIを実装することで出来ること

実は身近にあるAPI連携サービスの紹介

API連携は利用すべきか？メリットとデメリット

API連携方法、実装手順の説明

Lifesocketの天気APIをつかって週間天気予報を表示してみた

Q&A：API連携方法でよくある質問

まとめ・終わりに

前の記事

次の記事

サービス紹介資料（無料）

天気API：Lifesocket

天気予報APIに関するお問い合わせ