【Flutter】Google_ML_Kitで遊んでみた

image

今回の成果物

少し小さくて見えずらいですが...

こちらのアプリが今回作成したものです。

画像を取得し画像から言語を識別し文字に起こしてくれます!

翻訳機能は今回GCPコンソールを活用しています。

結論

Google_ML_Kitすごい!!!!!

実際に1時間かからないくらいで作成できたのがびっくりです!

今回の開発環境について紹介

開発環境

  • VSCode 1.73.1
  • Flutter 3.3.9
  • Dart 2.18.5

使用したパッケージ

google_mlkit_text_recognition: ^0.5.0
image_picker: ^0.8.7
dio: ^5.0.2

早速作ってみる

アプリにfirebaseを追加しよう!

Firebaseのサイトはこちらです。 今回はfirebaseプロジェクト作成手順は省略します。

firebaseで追加して欲しい部分はこちらです!

こちらのMachine Learningを始めるをしておかないと文字認識をうまくしてくれないのでまずはここからです!

画像取得機能作成

画像を取得するにはimage_pickerを使います。

※ios&androidどちらも設定が必要なので忘れずに設定してください(今回は省略)

使いやすいように関数にしてまとめてしまいましょう!

  final ImagePicker picker = ImagePicker();
  Future<void> pickImageFromGallery() async {
    final image = await picker.pickImage(source: ImageSource.gallery);//カメラから取得したいときは.camera
    if (image != null) {
      await processPickedFile(image);
    }
  }

文字認識機能作成

次はメインとなる文字認識機能ですね! 文字認識を可能にするパッケージgoogle_mlkit_text_recognitionを追加してください

※こちらも同様に初期設定が入りますのでパッケージ内のReadmeを参照してください(今回は省略)

画像で取得したデータを受け渡しtextRecognizerで値を認識しています。

  final TextRecognizer textRecognizer = TextRecognizer();
  Future<void> processPickedFile(XFile image) async {
    final inputImage = InputImage.fromFile(File(image.path));
    final recognisedText = await textRecognizer.processImage(inputImage);
    englishText = recognisedText.text;
  }

思っていたよりも簡単に機能を実装できましたね!

翻訳機能作成

続いて翻訳機能を作成していきましょう!

GCPコンソールの設定

まずはGCPコンソールへ移動します

こちらのCloudTranslationAPIを有効にしましょう!

これでGCPコンソールの準備は完了しました!

コード作成

先ほどのAPIを使用して関数を作成していきます!

わかりやすいように違うファイルに作成するのをお勧めします!

ここで使用するのはdioになります

responseに入っているURLは上記に挙げた画像のチュートリアルを開始の部分に記載されています。

アプリのapikeyは管理を押すと確認することができます。

  import 'package:dio/dio.dart';

  class GoogleTranslateApi {
    static String apiKey = 'アプリのAPIKEYが入ります';

    static Future<String> translate(String text) async {
      final response = await Dio().post(
        'https://translation.googleapis.com/language/translate/v2?target=ja&key=$apiKey&q=$text');
      String translatedText =
        response.data['data']['translations'][0]['translatedText'];
      return translatedText;
    }
  }

先ほどの関数を用いて翻訳していきましょう!

Future<void> googleTranslate() async {
  final result = await GoogleTranslateApi.translate(widget.englishText);
  setState(() {
    japaneseText = result;
  });
}
// 新しいページに遷移したらgoogleTranslate()を実行する
  
  void initState() {
    super.initState();
    googleTranslate();
  }

  
  void dispose() {
    super.dispose();
  }

これで完成です!

今回はメインの機能部分を紹介しました!

最後に

GoogleMLKitを使うことで顔認証やバーコードの読み取りなどもできるので色々試してみてください!

参考にしたサイト

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (99)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (4)新卒 (4)就活 (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)デザイン (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)画像 (2)Figma (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)flutter (1)Image (1)File (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More