北國FHDにおける Flutter活用事例 - FlutterKaigi mini @Ishikawa - 

### Contents
01 自己紹介
02 (株)デジタルバリューのご紹介
03 プロダクトのご紹介
04 これまでの取り組み
05 今後の課題とやりたいこと

---------------------------------------

### 自己紹介
氏名
・草野 慶人

所属
・株式会社デジタルバリュー

役職
・テクノロジー部 シニアディベロッパー（主にAndroid/Flutter担当）

趣味
・スポーツ観戦（野球と海外サッカーが大好きです！）

---------------------------------------

### (株)デジタルバリューのご紹介
##### 会社情報
- (株)デジタルバリューは、北國銀行のグループ会社です
- ITの力で北陸地域をより便利で住みやすい地域にすることを目的に、2019年11月22日に設立されました

##### グループ会社全体像
- 北國フィナンシャルホールディングスは「世のため人のために存在し活動する、人々の生活をより良いものにする」をブランド理念として活動する「地域総合会社」です
- デジタルバリューは、北國銀行とともにグループの理念を「デジタルの力」で支える役割を担っています

<img width="1000" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2810912/d27efd9c-7ea6-c7ee-dc5d-7080dc3cf4ac.png">

---------------------------------------

### (株)デジタルバリューのご紹介
##### データで見るデジタルバリュー
- 従業員数：120名（うち、元銀行員は48%）
- 育児休業取得率：90%
- 有給取得率：100%
- 月平均残業時間：5時間

##### 参考
- [リンク:データで見るデジタルバリュー](https://www.digitalvalue.co.jp/recruit/data/)
- 上記のQRコード
- <img width="240" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2810912/382df6aa-772a-5463-d5e1-46c05dc1222a.png">

---------------------------------------

### プロダクトのご紹介
アプリに応じて、ネイティブで作ったり、Flutter/MAUIなどのクロスプラットフォームで作っております
- 北國クラウドバンキングは、MAUI で作成
- 北國デビットアプリは、Flutter で作成
- 北國デジタルバンキングは、ネイティブ で作成
- その他にも「北國つながりアプリ」「三田会つながりアプリ」「北國銀行HoneyBeeアプリ」などは Flutter で作成

| 北國クラウドバンキング | 北國デビットアプリ | 北國デジタルバンキング |
|:-:|:-:|:-:|
| <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2810912/8108dac9-d19d-5ba0-4cde-f6be38a912db.png"> | <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2810912/d1204aa1-f6ed-fe33-4c80-9a357e2a0416.png"> | <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2810912/340bb30f-e06c-12b2-d1b4-8e0d5ca81b4a.png"> |

---------------------------------------

### これまでの取り組み - 課題と対応
##### 我々の課題(社内リソース、採用、案件etc...）
- iOSシニアエンジニア2人、Androidシニアエンジニア1人
- 取っつきやすさから、Flutterエンジニアはちょこちょこいる
- ネイティブ経験のあるモバイルエンジニアの採用が難しい（※後で深堀り）
- 作りたいモバイルアプリは多い

##### どうする？（採用活動は常に実施する前提で...）
- 開発工数削減のため、Googleお墨付きのFlutterを使おう！
- シニアエンジニアは各案件でネイティブ知識が必要になったときのお助けマンになろう！

---------------------------------------

### これまでの取り組み - 課題と対応（採用面）

#### 前提
* 北國FHDデジタルバリューは複数の採用媒体を利用
* 力の掛け具合で言うとネイティブ：クロス＝７：３程度（中心媒体ではFlutterは募集せず）

#### 現状
ここ一年ほどの実績としては

応募数：38名（モバイルエンジニアのみ）  
一次面談：25名  
二次面接：12名  
最終合格～入社：4名 ※うちFlutterエンジニアとしては2名

#### 所感
* まずはそもそもモバイルエンジニアの獲得は難しいという事
* また若い言語であることは言わずもがなではあるが、実際にFlutter経験が3年以上の経験者にはまず出会わない
* こういった状況も加味し、弊社では経験年数の目安として、ネイティブ採用の場合は4年以上、Flutter採用の場合は一定のネイティブの経験と併せて、Flutter1年以上のもしくはそれに準ずる学習実績を重視し選考中

---------------------------------------

### これまでの取り組み - その後
##### どうなったか？
- 北國つながりアプリ/三田会アプリ
    - ネイティブで作り始め、半年掛かって完成しなかったところを Flutter を採用し、3ヶ月でMVP作成までこぎつけた
- 北國銀行HoneyBeeアプリ
    - Flutter x Firebase で作成し、わずか1ヶ月でローンチ
- 北國デビットアプリ
    - 開発はおよそ5人で行い、運用保守は4人で行っている（※後で深堀り）

##### もしFlutterを採用してなかったら？
- ネイティブエンジニアが足りず、これほどアプリを作ってリリース出来ていなかった
- 運用保守の人材を育てるに苦労し、改善活動が出来なかった
- 各案件によって画面UIに用いる技術が異なる場合、知見を共有できてなかった（Androidだと「Anroid View」と「Jetpack Compose」。iOSだと「Storyboard」と「SwiftUI」とか。）

---------------------------------------

### これまでの取り組み - その後（WebサービスのFlutter移行）

#### 背景

* 北國デビットアプリ管理画面をVueで作成
* Vueを使える人が少なく、保守・運用コストが高かった
* フロントエンドの共通言語としてDart１本化を目指すことに

#### どうなったか？

* 一人のエンジニアが3ヶ月でFlutter Webに移行
* 開発チームの学習・保守・運用コストが大幅に下がった

#### 苦労した点

* Google Mapsの埋め込みや認証周りでのMSAL利用による学習に苦労した
* Dart側からjsの関数呼び出しているので技術的に難しく、調査コストが掛かった

#### Flutter Webの課題
* レンダリングによって日本語の表示が崩れたりなど、日本語対応で弱い所がある
* Flutter Webは発展途中の感触

---------------------------------------

### 今後の課題とやりたいこと
##### テンプレートの作成
- YUMEMIさんみたいにFlutterを使ってアプリ作るときのテンプレートを作りたい
- アーキテクチャ検討に多くの時間が掛かっているので、そこの効率をあげたい

##### 個人とチーム力の底上げ
- 一部のメンバーに負荷が偏るシーンが多々あるので、社内勉強会などを通じて底上げを実施したい
- Flutterは勿論だが、iOSやAndroidのネイティブエンジニアを増やしたい

---------------------------------------

### ご清聴ありがとうございました