荒々しくない荒のブログ

日記・技術ブログ

【Flutter】Amplify UIのカスタマイズ

 

はじめに

  • 登録フォームとタブを削除をする
  • 日本語化をする

※前回の続き

 

内容

 

登録フォームとタブを削除をする

参考:Customization | Amplify UI for Flutter

イメージは、「SignInFormだけ使用する。 = 他のFormやTabは読みこまない。」

 

main.dart

Authenticatior(

...

authenticatorBuilder: (...){

  return CustomLoginForm().getLoginForm(context, signInForm);

}

 

customLoginForm.dartでsignInFormを含んだWidgetを返すメソッド(上記だとgetLoginForm)を準備してあげる。

 

日本語化をする

参考:Customization | Amplify UI for Flutter

 

main.dartでAuthStringResolverを用意する。

AuthStringResolverには、ButtonやInput用のResolverを継承しカスタマイズしてインスタンス化して渡す。

具体的には、ButtonResolverやInputResolverなど。

 

ButtonResolverから辿ると定義元が確認できるので、対応するメソッドをoverrideするだけ。

「signIn」メソッドが「signin」メソッドになっているのは罠。

amplify mock function で起動して、読み込んだevent.json内の日本語が文字化けする

 

環境

  • Lambda ( Python 3.11 )
  • Amplify 12.14.0
  • Node.js 20.9.0
  • OS Windows11

 

問題

amplify mock function

を使用してLambdaを起動した際に、event.jsonに記載している日本語が文字化けしてしまう。

「あ」が「縺\udc82」に変換されてしまう。

 

調査

そもそもコマンドの起動で何が起きているのかの把握から始める。

Amplify CLIにて、コマンドの該当ファイルはこちら。

amplify-cli/packages/amplify-util-mock/src/commands/mock/function.ts at dev · aws-amplify/amplify-cli · GitHub

辿っていくと#resolveEventで処理をしている。

amplify-cli/packages/amplify-util-mock/src/func/index.ts at dev · aws-amplify/amplify-cli · GitHub


#readJsonで読みこんでいるようだ。

#readFileSyncでUTF-8で読みこんでいることまで確認。

amplify-cli/packages/amplify-cli-core/src/jsonUtilities.ts at dev · aws-amplify/amplify-cli · GitHub

 

even.jsonUTF-8エンコーディングされている。(VSCodeで確認済)

Node.jsもv18以降であれば問題がない

以上より、event.jsonの読み込みまでは正常。

Lambda起動もInvoker周りで読みこんでいるらしい。

なぜだー!

ご存じの方いらしたら教えてください...

 

2025年1月9日追記

AWS上では問題なく。

ローカルのWindows11の設定の問題かと思われる。

 

 

【備忘録】FlutterでAmplify UIの日本語化対応を試みた_2024_10_20

下記条件だと、公式のLocalizationsで日本語化対応できなかったため、備忘録として切り分けを記録する。

Flutterについてはまだ知らないため、今後、良い実装があれば取り入れたい。

 

【条件】

 

【対応】

結果としては、AmplifyUIのデフォルトの値を書き換えることで対応した。

amplify_authentication.dartを見ると設定方法について次のコメントがある。

## Localization
///
/// The Authenticator also supports localization by integrating with Flutter's
/// built-in localization system. See the Flutter [docs](https://docs.flutter.
dev/development/accessibility-and-localization/internationalization)
/// for an overview of how to get started, and check out a full [example](https
://github.com/aws-amplify/amplify-flutter/tree/main/packages/authenticator/ampli
fy_authenticator/example)
/// on our Github repo.
///
/// You can also use the localization mechanism to simply override the default
/// strings used for the form fields and other widgets.
///
/// {@template amplify_authenticator.custom_auth_string_resolver}
/// ```dart
/// class CustomButtonResolver extends ButtonResolver {
///   const CustomButtonResolver();
///
///   @override
///   String signout(BuildContext context) => 'Exit App';
/// }
///
/// Authenticator(
///   stringResolver: const AuthStringResolver(
///     buttons: CustomButtonResolver(),
///   ),
///   child: const LoggedInScreen(),
/// )
/// ```
/// {@endtemplate}
///

 

【どうでもいい話】

家電等のUI作られたりされているデザイナーの方や海外で仕事をされていたことのあるWebエンジニアの方等と話をした。

会社経由でFigmaの公式イベントにも参加されているそうで、AIによるソースコードへの落とし込みをする機能の話などを聞いた。

AIに仕事を奪われていってしまっている実情があるらしく、記事で読むよりも危機感がとても伝わった。

 

その後は、ダーツとカラオケで気づいたら朝でとても楽しかった。

禁酒をしていたものの、片想いの話を聞かれて、勢いで話そうとテキーラを一気に2ショット呑んで酔った。

すごい落ち込んでいたので、とても救われた一日だった。

日記 2024/08/18

夏のテニスコートは15年前くらいに部活に励んでいた頃を思い出させて良いなと思うこの頃。硬式テニスもしたい。

 

最近は、新宿の紀伊國屋で技術書を買う楽しみができた。

地下のお寿司屋やカレー屋さんも美味しい。

ルピシアでお茶も嗜むようになった。

 

目白庭園を散歩して、う月でランチ、夕方は五色湯で気持ちが晴れ晴れする。

 

仕事のストレスで夜眠れない日々が続いていたので、だいぶ楽になった。

友人らは私より一回り歳上だからか、上記のような落ち着きのある遊びを教えてくださる。

 

生まれて初めてボドゲサバゲーも体験して楽しかった。

諸事情で「ガスト行ったことない」って話をするとイジられるけど、新宿の美味しい居酒屋やレストランをだいぶ教えてくださる。

 

仕事は最近不調。

私の悪い立ち回りと案件・チーム特有の問題が相まって、そこそこ髪が抜けるくらい苦しい思いをした。

先輩や上司は熱心に教えてくださるので、頑張って付いていきたいと思うこの頃。

充実している。

 

また、通りすがらに社内であまり良くない話を聞くことがある。

組織と人の裏表は難しいと感じる。

私は一人称での仕事をできるようになるのが優先なので、今は何事も見てない・聞こえてないふりをしていようと思う。

 

ムエタイは、食生活変えただけで体力がかなりついた。

昨年は大会前も鮭1枚で試合開始時からフラフラだったが、今は起きないと思う。

ワイズマートの惣菜と魚でバランス良く食べている。

脂漏性皮膚炎も運動すると改善している気がする。

財布には悪く、食費がバグる。

昼の外食も辞めたいが飯を作る余裕がない。

 

プライベートも大切にしたいが、今のところ良いバランスが取れている。

仕事の勉強は2~4時間/週。

ムエタイ1時間/週。

IELTS対策は500単語/週と文法(正確さ重視)で、通勤時間、昼休みと寝る前で詰め込んでいる。

統計2級対策は今のところ自由で2時間/週。

休日のみFlutterでいろいろ作っている。

 

英語は諸事情で必要。

統計はいつかデータ活用したハッカソンに出たい。

勉強の鉄則としては一つに集中するのがベストだけど、一つだけだと気持ちが仕事に引っ張られてしまう弱いところがある。

Flutter環境構築 in Windows --android編--

前提

環境構築

参考: Install | Flutter

flutter doctorで出る各エラーについては、次の記事が参考になる。

WindowsにFlutterの環境構築してみた | DevelopersIO

起動

VS Codeで行う

  1. select deviceと入力すると出てくる「Flutter: Select Device」を押下

  2. 「Start (作成したAndroidエミュレーター名) API 34 mobile emulator」が表示されるのでエミュレーターを起動

  3. VSCodeのRun And Debugにて、起動したいプロジェクトを左上のタブで選択し、起動すると、エミュレーターに反映される

※起動時の問題 gl error 0x502が発生し表示できない問題が発生。 エミュレーター側の設定をいじる記事が多かったが、私はprofile modeでの起動で正常に動作した。

参考: Flutter's build modes | Flutter

まだエラー文があるから良いが、レンダリングが中途半端にされるせいで、表示されない原因の特定が難しそうだと思った。 正直、今の環境では開発したくない...

日記 2024/06/23

 

一部の焼酎・テキーララム酒なら大丈夫という事に気づいたこの頃。

東京に来て、二回目の宅飲み。

キューバリブレとテキーラをショットで飲んでライムをかじるという作法?の組み合わせが最高においしかった。

 

プライベートは、わりと20代から40代までの人たちと幅広く遊んでいる。

歳、性別関わりなく、他人の芝生が青く見えるというもので困った。

 

そんなくだらないことで頭抱えて、居酒屋で焼酎の魔王を飲みながら、他のお客がかけたジュークボックスの「いとしのエリー」を聴いてる時間は、昭和感あってよかった。

私もお金入れて「上を向いて歩こう」流した。

 

そして、在宅の機会があったのだが、プライベートが特に忙しい身になった今としては、なんとQOLが上がる素晴らしいものなんだろうと気付いた。

業後もムエタイ・買い物・掃除する時間もある…

 

学習はプラクティショナー、Cognito、API Gateway、Lambdaを攻めている。

今週は、木曜日の業後から帰省するので、ノートPCに環境構築と必要なアプリケーション落さなくてはいけなかったり、少し忙しい。

月・水は勉強会、火曜日はムエタイ...時間ない…

 

日曜日は味噌の天地返しを行い、いつも仲良くしてくださるエンジニアさんと少し話をした。

私の味噌はあまりカビもなく、良い状態とのことでよかった。

エンジニアの方に「個人開発はReact-Native使おうと思うんですよね」と話したら、技術選定の話をしてくださって勉強になった。Flutterのが良いかな…

後は池袋で知人達と呑み。楽しかった。

帰りは、魔王(焼酎)を飲んで、居酒屋にいらした格闘技雑誌の元ライター?の方から山本KID須藤元気等の当時の人柄的な話もたくさん聞いて、すごい満足で帰宅した。

日記 2024/06/16

鉄は熱いうちになんとやらで日記。(別に技術ブログではないので。)

 

土曜日は、お仕事に備えた勉強しつつ、いつもの美容院へ。

先月の母の日の贈り物の話題と同様に、今月は父の日の話に。お茶を贈ると言う話で落ち着いて、「私もそれにしようかな」と思った。少し和んだ。

そして、贈り物の話題から、私が誕生日プレゼントで会社の人に贈ったジャコウネココーヒーが「うんちコーヒー」と呼ばれていたという何とも悲しい話をしたら、笑ってくださった。

その後はエンジニアの方々とお話。全員シニアエンジニアで、技術についてや営業兼務の人からは求められる人材についての話を伺う。

私は新米なので、すぐすぐは業務に活かせないけど、長い目で見ると大切だと思う話の数々だった。

その後は少しだけ顔見知りのエンジニアの方々と呑んで帰る。

 

日曜日は、仲良くしてくださるエンジニアの方と四川の方と三人で東京の街を歩き、最後は四川の中華へ。

水が炭酸みたいな味のする麻痺するレベルの辛さ。

豚か牛か覚えてないが、喉・胃・腸とおいしかった。

 

平日は業後に勉強会かムエタイとしっかりとした体制でしてるので、バランス良く生きられている。

今週は、金曜日に父が宮城から出張で、親戚やら家族のお話をする予定なので、平日は実質埋まる具合の忙しさ。

と、楽しく仕事とプライベートを生きてる。