おはようございます。バクラク申請・経費精算 アプリエンジニアのyoheiです。
アプリを開発してるエンジニアとしてZ世代のアプリを触らねばということで、BeRealを始めました。日常をひっそりとアップしています。
昨年リリースした バクラク申請・経費精算 アプリですが、使いやすいとのお声を多くいただくことが増えており、非常に嬉しいです。 さらなるアプリの利用者を増やすため英語対応を進めています。既にある日本語をすべて英語対応するとなると、膨大な時間と手間がかかるタスクです。 そこで当社では、Flutterアプリの日英対応において、AI Editor「Cursor」を駆使した効率的なワークフローを確立し、大幅な工数削減を行っています。本記事では、その取り組みをご紹介します！
LayerX全体としてこれまで以上に AIに投資しており、モバイルアプリチームでもCursor, Cline, Devinなどをフル活用して開発を行っています。（開発組織全体でCursor利用している人がほとんどです） Bet AIについてはこちらの記事を参照してください。
技術スタックとアプローチ
バクラク申請・経費精算 アプリはFlutter製であり、多言語対応のためにslangライブラリを採用しています。
slangは型安全なキーアクセス、柔軟なフォーマット指定、Named parameterなど他ライブラリに比べ高機能で型安全なところが気に入っています。
当社では日本語、英語をJSONファイルで管理を行っており、build_runnerを使用し、JSON→Dartへの変換を行っています。
そしてAI Editor「Cursor」と組み合わせることで翻訳プロセス全体を改革しました。
Cursorを活用した翻訳ワークフロー
Cursor Rulesでi18n-guideline.mdcというファイル名でワークフローを作成し、Cursor上で翻訳を行っています。
CursorのAgentモードでguidelineを与えて翻訳したいFeatureやファイルを指定するだけですべての翻訳フローが完了します。（たまに全部やってくれないことあります😅ワークフローの改善の部分で改善方法を書いてます）
@i18n-guideline feature HOGE を翻訳したい
このプロンプトを実行するだけで以下の内容が自動的に行われます。
- 翻訳対象の特定: Cursorが翻訳が必要な箇所を自動検出
- 既存翻訳の確認: 重複を防ぐため、既存の翻訳リソースを確認
- 翻訳キーの設計と実装: 階層化された構造で管理
- AIによる翻訳生成: Webアプリの翻訳資産を参照しながら一貫性のある翻訳を実施
- JSON→Dartへの変換:
build_runnerを自動実行 - コード適用と自動コメント: CursorがコードにAIが提案した翻訳キーを適用し、適切なコメントを追加
実際の実行例を見てみましょう。以下の内容をプロンプト1つで全部やってくれます！
（Cursor AIにハリソン山中の人格を与えているため読みにくい部分があるかもしれません…）
プロンプトで依頼を出すと翻訳対象のファイルを探し、JSONファイルに追記してくれます。
追加後、自動で make br (内容は dart run build_runner build --delete-conflicting-outputs )を実行します。
そして生成された翻訳キーを置き換えたコードに適用してくれます。
Tipsですが、最低限の確認として日本語が置き換わっているかをレビューしやすくするために、置き換えた翻訳キーの上に翻訳キーの日本語の値をコメントとして追加しています。
Cursor Rulesによるワークフロー定義
翻訳プロセスの核となっているのが「Cursor Rules」です。この機能を活用し、翻訳に関するワークフローを定義しています。
- ルールベースのガイダンス: 翻訳プロセスの各ステップをルールとして明文化
- 一貫性の担保: チーム全体で同じアプローチを取るための基盤を提供
- 自動化トリガー: 特定のコマンドやキーワードで翻訳関連のワークフローを自動起動
Cursor Rulesによって、新しいメンバーでもチャットに依頼を投げるだけ翻訳プロセスを実行でき、品質の一貫性を保つことが可能になりました🎉
ワークフローの改善 - Agentによる継続的改善
翻訳ワークフローの特徴は、常に改善し続ける点にあります。Cursorの強力なAgent機能を活用し、以下のような継続的改善を実施できるようになっています。
- エラーパターンの学習: 翻訳時に発生したエラーや問題、改善点をAgentに変更依頼
- ワークフローの自己更新: 頻出する問題やより効率的な方法を見つけると、Agent自らがワークフローを改善
- フィードバックループ: 開発者からのフィードバックをAgentが取り込み、Cursor Rulesを更新
例えば、特定の翻訳パターンで一貫性の問題が頻発した場合、Agentが自動的にそのチェックロジックの改善を提案し、approveしたらCursor Ruleに反映します。これにより、ワークフローは継続的に改善され、チームの生産性は継続的に向上していきます 🔼
実際にこのワークフローを作る過程では、ログとして出力する文字列も翻訳対象として処理してしまう問題がありました。
コメントやログ出力する文字列は対象外のため、Agentに依頼をしてコメント、ログを翻訳対象外とするようにワークフロー自体を修正してもらいました。このように誤ったアウトプットを検出した場合に自分たちでルールをすぐ修正できることもこのフローの強みです。
AIによる翻訳メンテナンス自動化
従来、翻訳の追加や更新はエンジニアの大きな負担となっていましたが、Cursorを活用することで以下のような作業が自動化されています。
- 未翻訳テキストの検出: ハードコードされた文字列を自動検出
- 一貫性チェック: 同じ日本語に対して異なる英語訳が使われていないか確認
- 翻訳コメントの自動追加: 翻訳キーごとに適切な参照コメントを追加
- フォーマットチェック: JSONファイルの構造や翻訳キーの命名規則を検証
Webの翻訳資産を活用した効率化
AIに翻訳させるいい点は、既存のWebアプリケーションの翻訳資産を最大限に活用している点です。 プロジェクト内に既にWebアプリで翻訳してあるJSONファイルを取り込み、翻訳時にそのファイルを参照させることで、翻訳結果がWebアプリとできる限り一貫するようにしています。 これによりWebアプリとの差分が少なくなり、翻訳品質の向上と共に、Webで反映された内容をアプリにもすぐに取り込むことができるようになりました。
Cursor活用による開発者体験の向上
Cursorを活用した翻訳フローは単なる効率化だけでなく、開発者体験も大幅に向上させています：
- コンテキストの理解: AIはコードの文脈を理解し、適切な翻訳を提案
- クイックフィックス: コマンド一つで翻訳関連の問題を修正
- レビュー支援: 翻訳の品質や漏れを自動的にチェック
- ドキュメント生成: 翻訳に関するドキュメントやガイドラインの自動生成
結果と効果
この取り組みにより、以下のような効果が得られています：
- 翻訳関連タスクの工数が大幅削減
- 翻訳の一貫性とクオリティの向上
- エンジニアがより創造的な作業に集中できる環境の実現
- 多言語対応のメンテナンスコストの大幅削減
- ドキュメント不要で誰でも実施できる
- ワークフローの継続的な改善による長期的な生産性向上
まとめと今後の展望
Cursorを活用した多言語対応は、単なる作業の自動化を超え、開発プロセス自体を変革する可能性を秘めています。
特にCursor RulesとAgent機能による自己進化するワークフローは、チームの知識を集約し継続的に洗練されていくという点で、従来のツールとは一線を画します。
当社はこれからもAIを活用した開発手法を探求し、より良いプロダクトをより効率的に提供していきます。
AIを活用した開発手法は、翻訳対応に限らず今後のエンジニア業務において重要な武器となります。当社のモバイルチームでは、Cursorを活用したコードレビュー、バグ修正、ドキュメント生成など様々な領域でAIを活用し、開発サイクル全体の効率化を進めています。
このようなAIを駆使した開発環境で一緒に働きたいエンジニアの方を募集しています。新しい技術と方法論に興味があり、AIと共に効率的な開発を実現したい方は、ぜひ採用ページをご覧ください。
モバイル開発でAIをどう活用しているのか気になる方は色々とお話しましょう！
ハタラクをバクラクにするプロダクトを一緒に開発していきたい人を大募集中です！もしご興味ありましたら、ぜひカジュアル面談からお話させてください！LayerXオフィスでカジュアルにドリンクを飲む会を企画しました。こちらも是非ご覧ください！
アプリ以外のプロダクト開発においてAIをどのように活用しているのか、AIをプロダクトにどのように実装しているのかなどお話ができるともいます！
