NCMBのFlutter SDKを使って翻訳アプリを作る（その1：画面の仕様とSDKの初期化） #Flutter

NCMBでは公式SDKとしてSwift/Objective-C/Kotlin/Java/Unity/JavaScript SDKを用意しています。また、それ以外にもコミュニティSDKとして、非公式ながらFlutter/React Native/Google Apps Script/C#/Ruby/Python/PHPなど幅広い言語向けにSDKが開発されています。

今回はコミュニティSDKの一つ、Flutter SDKとDeepL APIを使って翻訳アプリを作ってみます。まず画面の仕様とSDKの初期化について解説します。

ncmb | Dart Package

完成版のコード

作成したデモアプリのコードはNCMBMania/flutter_translation_app: Flutter SDKとDeepL APIを組み合わせた翻訳アプリですにアップロードしてあります。

ベースを作成する

flutter create コマンドでベースを生成します。

flutter create translate

lib/main.dartについて

今回のコードはすべて main.dart に記述しています。クラスは次の6つです。

MyApp
MainPage
TranslationPage
_TranslationPageState
HistoryPage
_HistoryPageState

MyApp

アプリ全体の準備をします。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Translation App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: MainPage(),
    );
  }
}

MainPage

タブを準備して、翻訳画面と履歴画面を読み込みます。

TranslationPageと_TranslationPageState

翻訳画面です。翻訳実行と、翻訳結果のNCMBへの保存を行います。

HistoryPageと_HistoryPageState

履歴画面です。翻訳結果の一覧表示を行います。

NCMB SDKのインストール

NCMB SDKは flutter pub add ncmb でインストールできます。

flutter pub add ncmb

記事執筆時点での最新版は 2.4.0 です。

その他必要なライブラリ

今回はDeepL APIを呼び出すのに便利なdeepl_dartと環境変数用のflutter_dotenvを利用しています。

flutter pub add deepl_dart
flutter pub add flutter_dotenv

.envの用意

必要なキーはプロジェクトルートにある .env 内に記述しています。

.env の内容は以下の通りです。各キーはニフクラ mobile backendとDeepLのWebサイトにて取得してください。

APPLICATION_KEY=YOUR_APPLICATION_KEY
CLIENT_KEY=YOUR_CLIENT_KEY
DEEPL_AUTH_KEY=YOUR_DEEPL_AUTH_KEY

pubspec.yaml にて.envを追加します。

flutter:
  # 以下を追加
  assets:
    - .env

NCMB SDKの初期化

まず main.dart にてNCMB SDKをインポートします。

import 'package:ncmb/ncmb.dart';

main.dart のmain関数でNCMBの初期化をします。

void main() async {
  // .envファイルを読み込み
  await dotenv.load(fileName: ".env");
  // NCMBを初期化
  NCMB(dotenv.env['APPLICATION_KEY']!, dotenv.env['CLIENT_KEY']!);
  runApp(const MyApp());
}

これでNCMB SDKの利用準備が整います。

まとめ

今回は各画面の説明とNCMB SDKの初期化までを行いました。次回は日本語を入力してDeepLを使って翻訳するまでを解説します。。