1. プロジェクトの作成と環境変数の設定

空のプロジェクトを作成する

はじめにFlutterのプロジェクトを新規作成します。

以下のコマンドを打つことで空のプロジェクトを作成できます。

flutter create -e [プロジェクト名]

APIトークンの設定

ChatworkのAPIを利用する際はAPIトークンを発行する必要があります。

APIトークンはChatworkを開いて「サービス連携」→「APIトークン」から確認することができます。

トークンを環境変数に登録する

次にAPIトークンをアプリ内で使用するために、トークンを環境変数に設定します。

環境変数を利用するためにはflutter_dotenvパッケージを使用します。

flutter pub add flutter_dotenv

パッケージを追加したら、プロジェクトのルートディレクトリに.envファイルを作成します。

作成したら以下のようにトークンを記載します。

.env

CW_API_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

またpubspec.yamlに作成した.envファイルをassetsとして登録します。

pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - .env # 追加

.envファイルの設定が完了したら、main.dartで.envファイルを読み込ませます。

main.dart

// main関数をFutureに変更
Future<void> main() async {
  await dotenv.load(fileName: '.env'); // .envファイルを読み込み
  runApp(const MainApp());
}

2. APIを呼び出すメソッドを作成

次に main.dart にAPIを呼び出すメソッドを処理を実装します。

今回は自分の情報を取得するAPIエンドポイントを呼び出します。

このAPIを呼び出す FetchMe メソッドを main.dart に記載します。

main.dart

Future<void> fetchMe() async {
  final apiToken = dotenv.env['CW_API_TOKEN'];

  if (apiToken == null || apiToken.isEmpty) {
    debugPrint('CW_API_TOKEN が取得できていません');
    return;
  }

  final uri = Uri.parse('https://api.chatwork.com/v2/me');

  try {
    final res = await http
        .get(
          uri,
          headers: {'X-ChatWorkToken': apiToken, 'Accept': 'application/json'},
        )
        .timeout(const Duration(seconds: 15));

    debugPrint('status: ${res.statusCode}');
    debugPrint('body: ${res.body}');
  } catch (e) {
    debugPrint('ERROR: $e');
  }
}

このメソッドを呼び出すボタンウィジェットを画面に追加します。

main.dart

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Chatwork API Demo')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              await fetchMe();
            },
            child: const Text('自分の情報を取得'),
          ),
        ),
      ),
    );
  }
}

この状態でアプリを実行しボタンを押すと、コンソールにAPIのレスポンスが表示されます。

まとめ

このように、flutter_dotenvとhttpパッケージを用いてChatwork APIを呼び出し自分のプロフィールを取得することができました。

ですが、この状態ではレスポンスの内容がまだ画面上に表示されていません。

次回はこのレスポンス内容を画面に表示できるように修正していきます！