第8回：アプリ開発：通信処理（オープンAPIとの連携）

第8回の講義では、MOCHAのAPI（Application Programing Interface）を用いて簡単なアプリケーションを実装します。

第8回の目標

第8回の講義の目標は、APIの利用方法について学び、それらを用いた簡単アプリケーションを実装できるようになることです。

APIとはApplication Programing Interfaceの略です。 APIは、アプリケーションを繋げるための窓口のようなモノで、この窓口を通してアプリケーションとやりとりを行うことで、 APIを提供するアプリケーション側のサービスを利用することができます。

基本的にAPIは非公開なアプリケーションがほとんどですが、一部のアプリケーションは、APIを一般に公開しています。開発者や一般ユーザは、これらの公開APIを利用してアプリケーションやサービスを作ることができます。

皆さんが使っている多くのサービスも実は既に多くのAPIを公開しており、それらを利用できます。（APIの利用前に、利用規約やプライバシーポリシーなど十分に確認した上で利用するようにしてください。）いくつか良く使われているAPIの例を示します。

今回は、この中でも MOCHA のAPIを利用します。時間的に例示した全てのAPIを解説することは叶いませんが、興味がある方は他のAPIを是非使ってみてください。

では早速MOCHAの公開APIを使ってみましょう。今回の操作は、DartPad上でも実現できます。

MOCHAの公開API はこちらのリンクから確認できます。

MOCHA API

MOCHAで提供している学部と学科の情報がJSON形式のテキストで表示されます。 APIを利用した情報の取得は、人が読みやすい形式ではなく、機械が読みやすい形式で提供されます。

APIから返信されるJSON形式のテキストは、数値、文字列、日時などの意味を持つデータを構造化したものです。例えば「学部・学科の一覧を取得する」APIの返信は、以下のような構造となります。

MOCHA API JSON

プログラムでこの返信を読み込むことで、構造化されたデータの意味を解釈して利用できるようになります。

MOCHAでは以下のAPIを利用できます：

今回はMOCHA APIを使った練習として 「スペースの混雑度を取得する」 を利用します。 APIを利用して取得した混雑情報をアプリ上にリスト形式で表示します。

APIにから取得できるデータを確認してみましょう。 https://api.mocha-dev.net/resource/channel/utokyo_all/congestion

Flutterで実装する前に、DartPadで簡単な操作の練習をします。

APIの利用は以下の手順で行えます：

上記の手順をまとめると、以下のようになります。実行ボタンを押して動作を確認してください。

APIを通してリスト形式のBluetoothビーコンが設置された部屋の混雑情報が分かるので、それらを「部屋名:(滞在者数/最大容量)[コンセント数]」の順に表示しています。この方法を応用することで、アプリ場に混雑情報の一覧を表示できます。

Flutterへの組み込みは、TODOリストアプリで学んだこと（リストの動的な生成）の応用で実現できます。

具体的には、FloatingActionボタンを「更新ボタン」に変更します。このボタンが押されたタイミングでMOCHA APIにアクセスし、最新の混雑情報を取得します。取得した混雑情報からカードを生成し、カードリストに追加します。

このようの機能を実現する方法は以下の通りです。

JSONViewerを使うと、APIが返すJSON形式の値を自動的に形式化してくれるので、可読性が向上します。

Date: October 7, 2021

Tags: