バクラクアプリ 半年（とちょっと）の歩み

2023/03/09のオンラインイベント『「体験が全て」のバクラクが「今」モバイルに賭けるワケ』 https://layerx.connpass.com/event/276638/ でお話させていただいた内容です。

バクラクアプリの開発背景、募集するエンジニア像についてお話しています。

動画 https://www.youtube.com/watch?v=6itSr6EWAzY

Transcript

1. バクラクアプリ
   半年（とちょっと）の歩み
   @kikuchy 菊池紘
   

   View Slide

2. © 2023 LayerX Inc.
   2
   自己紹介
   ● 菊池紘（@kikuchy）
   ● 株式会社LayerX バクラク事業部 申請・経費精算チーム
   ● 前職はto Cのマッチングアプリ開発
   ○ Android, iOS, Flutterが専門
   ● FlutterKaigiの運営
   ● そろそろ入社から1年経ちます
   

   View Slide

3. © 2023 LayerX Inc.
   3
   内容
   バクラクアプリ　これまでの歴史
   1
   2 どうして今作り変えようとしているのか
   3 こんなあなたに来て欲しい！
   

   View Slide

4. 1. バクラクアプリ　これまでの歴史
   

   View Slide

5. © 2023 LayerX Inc.
   5
   バクラク申請・経費精算アプリ
   2022年8月リリース
   Android
   iOS
   

   View Slide

6. © 2023 LayerX Inc.
   6
   （技術的な）アプリの特徴
   いわゆる「WebViewアプリ」
   iOS/Androidアプリを別個に開発
   ● 大きなWebViewが配置されており、アプリはwebページを表示するのみ
   ● JavaScriptによるブリッジでアプリが用意した機能を呼び出し
   ● クロスプラットフォームフレームワーク未使用
   ● 社内でメンテナを増やすための教育を実施
   

   View Slide

7. © 2023 LayerX Inc.
   7
   1年でアプリのエンジニアがやったこと
   1年前の状況
   実現したこと
   ● アプリはない
   ● スマホブラウザでは一部機能が使用不能
   1. スマホブラウザで主要機能をサポート
   2. WebViewでウェブページを表示するアプリのリリース
   

   View Slide

8. © 2023 LayerX Inc.
   8
   当初の意思決定
   状況
   直近の課題
   ● Webフロントエンド（Nuxt）のコードベースがそれなりのサイズ
   ● チームのエンジニアは3人、追加採用は未定
   ⇒メンテナンスコストを負担し続けるのは相当難しい
   ● 「アプリ」であれば使える、というユーザー属性多数
   ● アプリでなければ実装できない機能が導入阻害要因に
   ○ 交通系ICカードの読み取りなど
   ⇒最低限のアプリを用意するのが最適解
   

   View Slide

9. © 2023 LayerX Inc.
   9
   アプリのリリース
   モバイルWebの強化
   iOS/Androidアプリを別々に開発
   ● そもそも使えない状況は良くない
   ● レスポンシブUIのはずがそうなっていないだけ
   ● 今までのフローで機能開発すればPCもモバイルも作ることになる
   ● このままアプリの運用が長期間にわたることも想定
   ● 採用面でネガティブ要素が少ない
   ● X-Plat FWでWebViewの動作に問題があるケースがあった
   ● WebViewアプリならアプリのコードが少ない＆予定されているアプリならではの機能はX-Plat FWでも
   OSごとの機能を書く可能性が高かった
   

   View Slide

10. 2. どうして今作りかえようとしているのか
    

    View Slide

11. © 2023 LayerX Inc.
    11
    最初から見えていた限界、今だからできること
    「アプリ」としての体験の欠如
    タイミングは今！
    ● お客様は「アプリ」を起動している
    ● 中身はWebなので操作感が期待と異なる
    ⇒ストレス！！
    ● 大型の調達で採用の機運
    ● デザイン・体験強化プロジェクト
    ⇒アプリを作り変える大きな決定へ
    

    View Slide

12. © 2023 LayerX Inc.
    12
    ジェスチャーの違い
    ドロワーメニューのある画面の左端スワイプ
    Webにおいては「前のページに戻る」
    アプリにおいては「ドロワーメニューの表示」
    そしてアプリでは、「ドロワーメニューがある画面はナビ
    ゲーションの起点になる画面である」というコンテキスト
    がある
    

    View Slide

13. © 2023 LayerX Inc.
    13
    ナビゲーションの違い①
    タブによる機能の切り替え
    タブを切り替えればナビゲーションスタックも
    別物になる
    Webでもある程度は再現可能だが、 PCを含
    めた現在の画面構成と大きく違うため、メン
    テナンスが困難になる
    https://m3.material.io/components/navigation-bar
    

    View Slide

14. © 2023 LayerX Inc.
    14
    ナビゲーションの違い②
    OS共通のデザインコンテキストがあるもの
    戻る、キャンセルボタンの位置、
    ハーフモーダル、などなど
    Ionicなどを使えばよいが、 PCのUIとは別物になる
    ため、FEの大幅な作り変えが必要になる
    

    View Slide

15. 新しいアプリで
    真にバクラクな体験を届けたい！！
    

    View Slide

16. 3. こんなあなたに来て欲しい！
    

    View Slide

17. 技術選定から参画できる
    モバイルアプリエンジニア
    

    View Slide

18. © 2023 LayerX Inc.
    18
    山積した課題、ピカイチの環境
    問題はたくさんある
    LayerXという環境
    ● 体験やデザインの問題は、たくさんある問題の一つ
    ● 現在のメンバーが認識・言語化できていない問題も
    ● 問題点を積極的に収集する積極性、現状を自力で把握できる技術力が欲しい
    ● CTOやテックリード経験者が豊富、というハイレベルな相談や議論が可能な環境
    ● 経理や監査の専門家（ドメインエキスパート）に話を聞ける環境
    ● お客様にインタビューさせていただける
    

    View Slide

19. © 2023 LayerX Inc.
    19
    技術選定
    制約を解決するもの生じさせるのも技術選定
    課題を
    解決できる
    ユーザーが使いやすい
    素早く高品質に提供
    デザインシステムを組みやすい
    デザインガイドラインの把握
    開発イテレーションの高速さ
    将来に渡る影響の見通し
    もちろんモバイルの専門知識も必要
    

    View Slide

20. © 2023 LayerX Inc.
    20
    まとめ
    ● バクラクはアプリでもバクラクな体験を追求します
    ● アプリの専門家が必要です
    ● 体験の問題を含めて、まるっと問題を解決する方法を一緒に考えてくれる方を歓迎します
    「バクラクアプリこそビジネス SaaSのモバイルアプリのお手本」
    そう言われる未来を作りたい！
    ぜひ一緒にバクラクな未来を開発しましょう！
    

    View Slide

21. https://jobs.layerx.co.jp/df64ace6b0e2473f980b73e909452670
    

    View Slide