CONTENT
ここから
この節では、Flutterで作る「ポケモン図鑑アプリ」の完成イメージを確認します。
今回の授業では、Flutterアプリから外部APIにアクセスし、ポケモンの情報を取得して画面に表示します。
最初に覚えることは、これだけです。
Flutterアプリ
↓
APIにアクセス
↓
ポケモンのデータを取得
↓
画面に表示
難しく考えなくて大丈夫です。
今回は、ポケモン番号を入力すると、そのポケモンの名前・画像・高さ・重さが表示されるアプリを作ります。
この節で学ぶこと
この節では、次の内容を学びます。
完成するアプリのイメージ
APIで取得するデータ
画面に表示する情報
アプリ全体の流れ
実装に入る前に、まず「何を作るのか」をはっきりさせます。
アプリ開発では、いきなりコードを書くよりも、完成イメージを先に決めることが大切です。
今回作るアプリ
今回作るのは、Flutterで作るシンプルなポケモン図鑑アプリです。
アプリの機能は、次の通りです。
ポケモン番号を入力する
検索ボタンを押す
APIからポケモンデータを取得する
名前・画像・高さ・重さを表示する
完成イメージは、このような流れです。
ポケモン番号を入力
例：25
↓ 検索ボタンを押す
APIからデータを取得
↓ 画面に表示
名前：pikachu
高さ：4
重さ：60
画像：ポケモン画像
画面の完成イメージ
画面は、まずシンプルな構成にします。
--------------------------------
ポケモン図鑑アプリ
[ ポケモン番号を入力 ]
[ 検索する ]
-------------------------------
名前：pikachu
画像
高さ：4
重さ：60
-------------------------------
最初から複雑なデザインにする必要はありません。
まずは、次の4つが表示できれば成功です。
名前
画像
高さ
重さ
アプリの基本操作
ユーザーが行う操作は、とてもシンプルです。
1. ポケモン番号を入力する
2. 検索ボタンを押す
3. 結果が表示される
例えば、番号に 25 を入力すると、ポケモンの情報を取得します。
入力：25
↓
検索
↓
ピカチュウの情報を取得
↓
画面に表示
番号を変えると、別のポケモン情報を取得できます。
1 → bulbasaur
4 → charmander
7 → squirtle
25 → pikachu
このように、APIを使うと、アプリの中に最初からデータを持っていなくても、外部から情報を取得できます。
APIで取得するデータ
今回使うAPIからは、ポケモンに関するさまざまなデータを取得できます。
この授業では、初心者向けに必要なデータだけを使います。
| 表示する内容 | データの意味 | 例 |
|---|---|---|
| 名前 | ポケモンの名前 | pikachu |
| 画像 | ポケモンの画像URL | front_default |
| 高さ | ポケモンの高さ | 4 |
| 重さ | ポケモンの重さ | 60 |
最初からすべてのデータを使う必要はありません。
APIから返ってくるデータは多いですが、画面に表示するのは必要なものだけで大丈夫です。
FlutterとAPIの関係
今回のアプリでは、FlutterとAPIの役割を分けて考えます。
Flutter
↓
画面を作る
API
↓
ポケモンのデータを返す
Flutterは、ユーザーが見る画面を担当します。
例えば、次のような部分です。
入力欄
検索ボタン
画像表示
名前表示
高さ表示
重さ表示
APIは、ポケモンのデータを返す役割です。
ポケモン番号を受け取る
↓
対応するポケモン情報を返す
データ取得の流れ
ポケモン図鑑アプリの全体の流れは、次の通りです。
1. ユーザーが番号を入力する
2. 検索ボタンを押す
3. FlutterがAPIにアクセスする
4. APIがJSONデータを返す
5. Flutterが必要なデータを取り出す
6. 画面に名前・画像・高さ・重さを表示する
図で表すと、このようになります。
ユーザー
↓
番号を入力する
↓
Flutterアプリ
↓
APIへリクエスト
↓
API
↓
JSONデータを返す
↓
Flutterアプリ
↓
画面に表示
この流れが、API連携アプリの基本です。
JSONとは何か
APIから返ってくるデータは、多くの場合JSONという形になっています。
JSONは、データを整理して渡すための形式です。
例えば、次のような形です。
{
"name": "pikachu",
"height": 4,
"weight": 60
}
この中から、Flutterで必要なデータを取り出します。
name → 名前
height → 高さ
weight → 重さ
画像は、sprites というデータの中に入っていることが多いです。
sprites
↓
front_default
↓
画像URL
この節では、まだ細かいJSONの読み方を完璧に覚えなくて大丈夫です。
まずは、APIからデータが返ってきて、その中から必要な情報を取り出すというイメージを持ちましょう。
このアプリでできるようになること
このポケモン図鑑アプリを作ると、次のことができるようになります。
Flutterで入力フォームを作る
ボタンを押して処理を実行する
APIからデータを取得する
JSONデータを読み取る
画像URLから画像を表示する
取得したデータをカードUIで表示する
通信中やエラー時の表示を作る
これは、ポケモン図鑑アプリだけでなく、他のアプリにも応用できます。
例えば、次のようなアプリにもつながります。
天気アプリ
ニュースアプリ
映画検索アプリ
商品検索アプリ
翻訳アプリ
AIチャットアプリ
つまり、今回の授業は「ポケモン図鑑を作る授業」でありながら、実際にはAPI連携アプリの基本を学ぶ授業です。
最初に作る画面の構成
最初の画面は、次の部品で作ります。
| 画面部品 | 役割 |
|---|---|
| タイトル | アプリ名を表示する |
| TextField | ポケモン番号を入力する |
| 検索ボタン | API取得処理を実行する |
| 画像表示 | ポケモン画像を表示する |
| Text | 名前・高さ・重さを表示する |
| カードUI | 情報を見やすくまとめる |
最初は、デザインよりも動くことを優先します。
入力できる
検索できる
表示できる
この3つができれば、最初の目標は達成です。
完成後のイメージ
完成すると、次のような操作ができるようになります。
ポケモン番号を入力する
↓
検索する
↓
ポケモン画像が表示される
↓
名前・高さ・重さが表示される
例えば、25 を入力すると、次のような情報が表示されます。
名前：pikachu
高さ：4
重さ：60
画像もAPIから取得したURLを使って表示します。
初心者が意識するポイント
この授業で大事なのは、コードを丸暗記することではありません。
大事なのは、流れを理解することです。
入力
↓
APIアクセス
↓
データ取得
↓
JSON変換
↓
画面表示
この流れを理解できれば、他のAPIにも応用できます。
APIのURLが変わっても、基本の考え方は同じです。
よくある勘違い
APIのデータはFlutterアプリの中に最初から入っているわけではない
APIのデータは、アプリの外にあります。
Flutterアプリは、必要なときにAPIへアクセスしてデータを取得します。
アプリの中にデータがある
のではなく、
外部APIからデータを取りに行く
と考えます。
画像そのものを保存しているわけではない
APIから取得する画像は、画像URLであることが多いです。
Flutterでは、そのURLを使って画像を表示します。
画像URL
↓
Image.network
↓
画面に画像表示
最初から全部のデータを表示しなくてよい
APIからはたくさんのデータが返ってきます。
でも、初心者のうちは必要なものだけ使えば大丈夫です。
今回使うのは、主に次の4つです。
名前
画像
高さ
重さ
この節のゴール
この節のゴールは、完成イメージを理解することです。
まだコードを完璧に書けなくても大丈夫です。
まずは、次のことが分かればOKです。
どんなアプリを作るのか
どんな操作をするのか
APIから何を取得するのか
画面に何を表示するのか
まとめ
この節では、Flutterで作るポケモン図鑑アプリの完成イメージを確認しました。
今回作るアプリは、ポケモン番号を入力して、APIからデータを取得し、名前・画像・高さ・重さを表示するアプリです。
基本の流れは、次の通りです。
ポケモン番号を入力
↓
検索ボタンを押す
↓
APIからデータを取得
↓
JSONから必要な情報を取り出す
↓
Flutterの画面に表示する
この流れは、API連携アプリの基本です。
ポケモン図鑑アプリを作りながら、FlutterでAPIを使う考え方を身につけていきましょう。