Flutterで翻訳アプリ作ってみた

こんにちは！

アドベントカレンダー18日目を担当させていただくモバイルコースのyoです。

「Flutterで翻訳アプリ作ってみた」というテーマで記事を書かせていただきました。

作成した翻訳アプリ

Flutterの勉強のためにシンプルな翻訳アプリを作ってみました。

このアプリの主な機能は以下の3つです。

翻訳機能（日⇄英）
テキストをクリップボードにコピー
音声読み上げ

今回はこれら3つの機能をFlutterで実装する方法について紹介していきます。

コードの詳細はこちらのリポジトリをご覧ください。https://github.com/KobayashiYoh/mobile_translation_app

使用した主な技術

1. 翻訳機能

まず、初めに紹介させていただくのは翻訳機能です。

片方のTextFieldにテキストを入力すると、そのテキストの翻訳結果をもう片方のTextFieldに表示するという仕様となっております。

翻訳には、translatorというpackageを使用しました。

それでは実際にコードを見ていきましょう。

void _translate({
    required String sourceText, // TextFieldに入力されたテキスト
    required String to, // 翻訳後の言語を指定（英語: en, 日本語: ja）
    required bool isTopField, // 上側のTextFieldか下側のTextFieldか判別
  }) async {
    if (sourceText.isEmpty) {
      return;
    }
    final translator = GoogleTranslator();
    // sourceTextを言語toに翻訳
    final translation = await translator.translate(
      sourceText,
      to: to,
    );
    // 翻訳結果をUIに反映
    if (isTopField) {
      _bottomController.text = translation.text;
    } else {
      _topController.text = translation.text;
    }
    setState(() {});
  }

GoogleTranslatorクラスで定義されているtranslateメソッドを利用することにより、翻訳することが可能となっています。

今回の場合、inputTextにはTextFieldに入力されたテキストが入ります。

また、toには翻訳後の言語（日本語で入力した場合は英語、英語で入力した場合は日本語）が入ります。

翻訳前の言語はtranslatorが自動検出してくれるので指定しなくても大丈夫です。

2.テキストをクリップボードにコピー

続いて、テキストをクリップボードにコピーする方法を紹介させていただきます。

意外と簡単に実装できちゃいます。

以下のような処理を記述するだけでテキストをクリップボードにコピーすることが可能です。

Clipboard.setData(
  ClipboardData(
    text: 'コピーしたいテキスト',
  ),
);

この方法を利用してテキストをクリップボードにコピーする機能を以下のように実装しました。

void _copyClipBoard(TextEditingController controller) {
  if (controller.text.isEmpty) {
    return;
  }
  // textをクリップボードにコピー
  Clipboard.setData(
    ClipboardData(
      text: controller.text,
    ),
  );
  // トーストを表示
  Fluttertoast.showToast(msg: 'コピーしました');
}

テキストをクリップボードにコピーしたということをユーザーへ伝えるために、「コピーしました」というトーストも表示させてみました。

fluttertoastというpackageを利用すると、トーストを簡単に表示することができます。

3.音声読み上げ

最後に、音声読み上げ機能について紹介させていただきます。

音声の読み上げはflutter_tts（ttsはtext to speechの略）というpackageを使って実装しました。

setLanguageでは読み上げの言語を、setSpeechRateでは音声読み上げのスピードを設定しています。

そして、speakで文字列を読み上げてくれます。

void _speak({required String language, required String speakText}) async {
  if (speakText.isEmpty) {
    return;
  }
  FlutterTts flutterTts = FlutterTts();
  // 読み上げる言語を設定（英語: en-US, 日本語: ja-JP）
  await flutterTts.setLanguage(language);
  // 読み上げる速度を設定（0.0〜1.0）
  await flutterTts.setSpeechRate(1.5);
  // speakTextを読み上げ
  await flutterTts.speak(speakText);
}

おわりに

ここまで読んでくださりありがとうございました。

翻訳や音声読み上げなど今まであまり触れてこなかった技術に触れることができたため、とても良い経験になりました。

アドベントカレンダー明日はバックエンドコースのTatsuroくんです！