🔥

FlutterFire UIにプルリク出してみた話(翻訳)

2022/05/17に公開

Firebase

Flutter

tech

はじめに

僕がお話しするのはタイトルにある通り、firebase の公式パッケージである flutter_fire_ui にプルリクを出してみたという経験についてです。
flutter_fire_ui は flutter3 のアナウンスの中にも含まれているパッケージです！

github

pub.dev
https://pub.dev/packages/flutterfire_ui

動機

flutter_fire_ui を知ったのはFirestoreListViewの存在を知った時です。
ページングを簡単に実装できて最高じゃないかと思って、速攻導入しました。

そして何より驚いたのが、ほんの数行で、SignInScreenやProfileScreenの実装ができてしまうことです。

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutterfire_ui/auth.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const providerConfigs = [EmailProviderConfiguration()];

    return MaterialApp(
      initialRoute: FirebaseAuth.instance.currentUser == null ? '/sign-in' : '/profile',
      routes: {
        '/sign-in': (context) {
          return SignInScreen(
            providerConfigs: providerConfigs,
            actions: [
              AuthStateChangeAction<SignedIn>((context, state) {
                Navigator.pushReplacementNamed(context, '/profile');
              }),
            ],
          );
        },
        '/profile': (context) {
          return ProfileScreen(
            providerConfigs: providerConfigs,
            actions: [
              SignedOutAction((context) {
                Navigator.pushReplacementNamed(context, '/sign-in');
              }),
            ],
          );
        },
      },
    );
  }
}

flutter_fire_ui の READMEより引用

しかし、僕が最初に触った頃は実装後の画面の文字は全て英語でした。
「日本人が本格的に使えるようになるのはもうちょい先か...」
と思っていました。

そんな時に、他の言語の翻訳のプルリクを発見しました。

オープンソースにコミットするという経験はなかったので、怖かったのですが、
「よし、日本語も行こう。」
と思い、プルリクを作ってみようと思いました。

プルリクを作るまでの大まかな流れ

プルリクを作るまでの手順は以下の通りです。

flutterfire のリポジトリを自分のリポジトリにフォークする
フォークしてきた自分のリポジトリで変更
変更分のプルリクを作成(参考)
プルリク時にデフォルトで用意されているDescriptionの記載やCheckListのチェック

という流れでした。
最後の CheckList を埋める作業が自分的には難しかったです。

実際に作ったプルリクはこちらです。

プルリク完成までの具体的な説明

流れはざっくりと掴めたと思うので、もうちょっと詰まったところを具体的に説明していこうかなと思います。
基本は用意されているチェックリストに沿って作業していくだけです。

プルリクの作り方もContributor Guideにきちんと載っています。

melos の導入

flutterfire のパッケージはモノレポで作られているので、melosを使って、テスト・解析・フォーマット化などを行うようです。
Contributor Guide 内のEnvironment Setupを参考に melos のセットアップをします。

melos でのチェック

セットアップした melos を使って、解析・フォーマット化を行います。

Once you have made your changes, ensure that it passes the internal analyzer & formatting checks. The following commands can be run locally to highlight any issues before committing your code:

# Run the analyze check
melos run analyze

# Format code
melos run format

僕はフォーマット化が漏れていたので、きっちり指摘されています..

CLA(Contributor License Agreements)に同意

プルリクのチェックリストにあるように、Contributor License Agreements に同意する必要があるようです。
https://cla.developers.google.com/

翻訳の場合はダブルチェックが必要

翻訳の場合はダブルチェックが必要なようです。
firebase のチームに日本人が居れば話は別だったかもしれませんが^^;
以下のように「日本語がわかる仲間にダブルチェックをお願いしてくれ」と言われました。

今回は、僕をプログラミングに誘ってくださったosm-yさんに協力していただきました！
岐阜で可茂 IT 塾というコミュニティを作っている方です。
ちなみに僕もそこのメンバーです^^

https://www.kamo-it.org/member/

リリースされました

バージョン 0.4.0 で反映されていると思います。

感想

さすがに有名どころである firebase のパッケージなので、チェックも厳重ですね。
しかも、オープンソースにコミットをしたこともなかったので、余計にハードルが高く感じました。
プルリク自体は2022/2/18に作ったのですが、マージされたのは2022/3/22と 1 ヶ月以上かかりました。　　
正直なところ、
「永遠にマージされないかもしれない..」
と思い、プルリクを取り下げようか迷っていました^^;

最終的にはマージしていただけたので、勇気を持ってプルリクを作ってみてよかったなと感じています。

注意点

もちろんオープンソースへのコミットは「コミットしたコードへの責任が発生する」ということです。
以下のように追加の翻訳をお願いされることもあります。

一度コミットして終了！という訳にはいかないと思います。

最後に

一般的にオープンソースへのコミットはハードルが高いものと思われます。
特に 1 度も経験がなければ、尚更です。
この記事を通じて、
「大体のイメージはついたかな。」
という状態になっていただけたなら幸いです。
日本も負けじとがんばりましょう！

Twitter では Flutter を中心とする技術関連の情報を発信しています！
https://twitter.com/marksaito4

お仕事の依頼は以下のメールアドレスまでご連絡をよろしくお願いします。
mark.saito@jp-gx.com