$30 off During Our Annual Pro Sale. View Details »

「アプリをつくる仕組み」の構築 / build-system-for-STORES-Branded-Apps

marcy731
November 02, 2022

「アプリをつくる仕組み」の構築 / build-system-for-STORES-Branded-Apps

2022/10/13に行われたSTORESとMGReの共同勉強会で登壇した時の資料です。
https://hey.connpass.com/event/261576/

marcy731

November 02, 2022
Tweet

More Decks by marcy731

Other Decks in Programming

Transcript

  1. ヘイ株式会社
    「アプリをつ る仕組み」の構築
    STORES株式会社
    iOSエンジニア
    長谷川 将司(@marcy731)
    2022/10/13 STORES x MGRe 「最近チャレンジしたことをまとめてみた」

    View Slide

  2. アジェンダ
    2
    1. STORES ブランドアプリ の概要
    2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    4. STORES ブランドアプリ のシステムアーキテクチャ(未来編)
    5. まとめ

    View Slide

  3. 1. STORES ブランドアプリ の概要

    View Slide

  4. 1. STORES ブランドアプリ の概要
    4
    2022年12月、ショップフォース株式会社がヘイ株式会社にジョイン。
    2022年7月7日、既存サービスを「STORES ブランドアプリ」としてリブランディングしリリース。

    View Slide

  5. 1. STORES ブランドアプリ の概要
    5
    - 複数の 店のスタンプカードをまとめて管理
    - ロイヤリティプログラムの提供
    - スタンプやポイントに応じた
    - クーポンの発行
    - 特別な 知らせ など
    - CRM機能
    - DB: Database
    - 顧客情報の管理
    - BI: Business Intelligence
    - 顧客情報と購買情報等を紐付け、分析
    - MA: Marketing Automation
    - クーポン発行や 知らせの自動化など

    View Slide

  6. 1. STORES ブランドアプリ の概要
    6
    一方で、 客様のニーズとして「 店独自のアプリを作ってブランドを表現したい!」
    Stampsの基本機能をベースに、 客様独自のアプリを提供(= STORES ブランドアプリ)

    View Slide

  7. 2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)

    View Slide

  8. App
    2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    9
    Server
    ・ブランドアプリ事業の立ち上げ期に ける、GitHubのリポジトリ構成の遷移

    View Slide

  9. Original Apps
    Original Apps
    App
    2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    10
    Server
    ・ブランドアプリ事業の立ち上げ期に ける、GitHubのリポジトリ構成の遷移
    Server
    Appmaker
    Data layer
    StampsのData層を切り離し、API資産を最大限活用

    View Slide

  10. Original Apps
    Original Apps
    App
    2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    11
    Server
    ・ブランドアプリ事業の立ち上げ期に ける、GitHubのリポジトリ構成の遷移
    Server
    Appmaker
    Data layer
    Server
    Original Apps
    Original Apps
    Appmaker
    Data layer
    Appmaker Template
    UI layer
    ブランドアプリのUI層を抽象化

    View Slide

  11. 2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    12
    Server
    Original Apps
    Original Apps
    Appmaker
    Data layer
    Appmaker Template
    UI layer
    ・ブランドアプリ事業の立ち上げ期に ける、GitHubのリポジトリ構成の遷移

    View Slide

  12. 2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    13
    Server
    Original Apps
    Original Apps
    Appmaker
    Data layer
    Appmaker Template
    UI layer
    ・ブランドアプリ事業の立ち上げ期に ける、GitHubのリポジトリ構成の遷移
    リポジトリ 多す て色々大変…
      ⇨ メンテナンスコスト 大
    ⇨ 新規アプリ作成 よび更新・リリースコスト 大
    ⇨ スケーラビリティ なし

    View Slide

  13. 2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    14
    ・ブランドアプリ作成〜機能追加〜ストアへのアップロードの流れ     

    View Slide

  14. アプリ新規作成
    2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    15
    ・ブランドアプリ作成〜機能追加〜ストアへのアップロードの流れ     
    App Store
    App Store
    Original Apps
    Original Apps App Store
    ビルド

    アップロード
    ・リポジトリ作成
    ・プロジェクト作成
    ・ライブラリのインポート
    ・必要な設定やリソースを追加
    アプリ機能追加
    ・ライブラリの更新

    View Slide

  15. アプリ新規作成
    2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    16
    ・ブランドアプリ作成〜機能追加〜ストアへのアップロードの流れ     
    App Store
    App Store
    Original Apps
    Original Apps App Store
    ビルド

    アップロード
    ・リポジトリ作成
    ・プロジェクト作成
    ・ライブラリのインポート
    ・必要な設定やリソースを追加
    アプリ機能追加
    ・ライブラリの更新
    これら全てをアプリごとに手動で行う必要あり
      ⇨ メンテナンスコスト大
    ⇨ 新規アプリ作成 よび更新・リリースコスト大
    ⇨ スケーラビリティなし

    View Slide

  16. 2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    17
    聞 だけで大変そうですよね…
    > 課題はあるのはわ ってる 、
    > エンジニアリソースもな 自動化にも手 回らないし…
    > まだクライアント様の数もそこまで多 ない…
    > 今はギリギリなんと なっている…
    という状況でした

    View Slide

  17. 2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    18
    聞 だけで大変そうですよね…
    > 課題はあるのはわ ってる 、
    > エンジニアリソースもな 自動化にも手 回らないし…
    > まだクライアント様の数もそこまで多 ない…
    > 今はギリギリなんと なっている…
    という状況でした
    当時のモバイルエンジニアは
    iOS/Android兼任で1名(業務委託)

    View Slide

  18. 2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    19
    そんな中、状況に変化あり
    1. STORESとの合流
    2. モバイルエンジニアリソース増
    a. iOS/Android兼任1名(業務委託) -> iOS/Androidそれぞれ1名(共に正社員)

    View Slide

  19. 2. STORES ブランドアプリ のシステムアーキテクチャ(過去編)
    20
    そんな中、状況に変化あり
    1. STORESとの合流
    2. モバイルエンジニアリソース増
    a. iOS/Android兼任1名(業務委託) -> iOS/Androidそれぞれ1名(共に正社員)
    ⇨ 将来を見据え、
    「より拡張性の高いシステムアーキテクチャにしてい ぞ!」
    という機運 高まった!!

    View Slide

  20. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)

    View Slide

  21. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    22
    <課題>
    1. リポジトリ多す 問題
    2. 手作業多す 問題

    View Slide

  22. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    23
    <施策>
    1. リポジトリ多す 問題 → ブランドアプリのリポジトリを一つに統合
    2. 手作業多す 問題   → CI/CDを導入して可能な限り自動化

    View Slide

  23. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    24
    <施策>
    1. リポジトリ多す 問題 → ブランドアプリのリポジトリを一つに統合
    2. 手作業多す 問題   → CI/CDを導入して可能な限り自動化
    「やるべ 」ことを「当たり前」にやる

    View Slide

  24. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    25
    a. CI/CDを用いた自動化

    View Slide

  25. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    26
    a. CI/CDを用いた自動化
    ×

    View Slide

  26. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    27
    a. CI/CDを用いた自動化
    アプリ新規作成
    App Store
    App Store
    Original Apps
    Original Apps App Store
    ビルド

    アップロード
    アプリ機能追加
    ・ライブラリの更新
    ・リポジトリ作成
    ・プロジェクト作成
    ・ライブラリのインポート
    ・必要な設定やリソースを追加

    View Slide

  27. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    28
    a. CI/CDを用いた自動化
    アプリ新規作成
    App Store
    App Store
    Original Apps
    Original Apps App Store
    ビルド

    アップロード
    ・リポジトリ作成
    ・プロジェクト作成
    ・ライブラリのインポート
    ・必要な設定やリソースを追加
    ・fastlane + bitriseの設定
    アプリ機能追加
    ・ライブラリの更新
    自動化
    マージをトリガーにCI 動作し、アップロードまで自動で行う
    一部のみ

    View Slide

  28. ・リポジトリ作成
    ・プロジェクト作成
    ・ライブラリのインポート
    ・必要な設定やリソースを追加
    ・fastlane + bitriseの設定
    3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    29
    a. CI/CDを用いた自動化
    アプリ新規作成
    App Store
    App Store
    Original Apps
    Original Apps App Store
    ビルド

    アップロード
    アプリ機能追加
    ・ライブラリの更新
    自動化
    手作業のまま → リポジトリ統合に期待…!
    マージをトリガーにCI 動作し、アップロードまで自動で行う
    一部のみ

    View Slide

  29. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    30
    b. リポジトリ統合

    View Slide

  30. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    31
    b. リポジトリ統合
    Server
    Original Apps
    Original Apps
    Appmaker
    Date layer
    Appmaker Template
    UI layer

    View Slide

  31. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    32
    b. リポジトリ統合
    Server
    Original Apps
    Original Apps
    Appmaker
    Data layer
    Appmaker Template
    UI layer
    Server
    Appmaker
    Data layer
    Appmaker Template
    UI layer

    View Slide

  32. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    33
    b. リポジトリ統合
    Original Apps
    Original Apps
    リポジトリ統合

    View Slide

  33. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    34
    b. リポジトリ統合
    Original Apps
    Original Apps
    リポジトリ統合

    「複数のアプリを動的に生成する仕組みを構築する」

    View Slide

  34. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    35
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    iOSアプリ
     ⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成

    View Slide

  35. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    36
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    iOSアプリ
     ⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
     ⇨ .xcodeprojをアプリごとに動的に変更もし は生成したい

    View Slide

  36. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    37
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    iOSアプリ
     ⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
     ⇨ .xcodeprojをアプリごとに動的に変更もし は生成したい
    XcodeGenを利用
    プロジェクトファイル(.xcodeproj)を定義ファイル(project.yml) ら生成するツール

    View Slide

  37. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    38
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    iOSアプリ
     ⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
     ⇨ .xcodeprojをアプリごとに動的に変更もし は生成したい
    XcodeGenを利用
    プロジェクトファイル(.xcodeproj)を定義ファイル(project.yml) ら生成するツール
    ⇨ yamlのような簡易なテキストファイル ら.xcodeproj 生成で る

    View Slide

  38. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    39
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    iOSアプリ
     ⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
     ⇨ .xcodeprojをアプリごとに動的に変更もし は生成したい
    XcodeGenを利用
    プロジェクトファイル(.xcodeproj)を定義ファイル(project.yml) ら生成するツール
    ⇨ yamlのような簡易なテキストファイル ら.xcodeproj 生成で る
    ⇨ project.ymlに環境変数を用いることで動的に変更

    View Slide

  39. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    40
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    iOSアプリ
     ⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
     ⇨ .xcodeprojをアプリごとに動的に変更もし は生成したい
    XcodeGenを利用
    プロジェクトファイル(.xcodeproj)を定義ファイル(project.yml) ら生成するツール
    ⇨ yamlのような簡易なテキストファイル ら.xcodeproj 生成で る
    ⇨ project.ymlに環境変数を用いることで動的に変更
    ⇨ アプリごとの.xcodeproj 生成で る!

    View Slide

  40. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    41
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    XcodeGen
    環境変数
    env.yml App.xcodeproj
    project.yml
    ビルド
    Script
    iOS
    App

    View Slide

  41. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    42
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    <Point>
    ・アプリ毎の設定値をenv.ymlに記述
    ・env.ymlを元に環境変数を生成し、XcodeGenを用いて動的に.xcodeprojを生成
    ・ビルドまでの一連の流れをScript化し、1コマンドに
    (例えば APP_NAME="demo” のように任意のアプリを指定して実行)
    XcodeGen
    環境変数
    env.yml App.xcodeproj
    project.yml
    ビルド
    Script
    iOS
    App

    View Slide

  42. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    43
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    XcodeGen
    環境変数
    env.yml App.xcodeproj
    project.yml
    ビルド
    Script
    iOS
    App

    View Slide

  43. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    44
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    XcodeGen
    環境変数
    env.yml App.xcodeproj
    project.yml
    ビルド
    Script
    iOS
    App
    Assets.xcassets

    View Slide

  44. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    45
    b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築(iOS)
    XcodeGen
    環境変数
    env.yml App.xcodeproj
    project.yml
    ビルド
    Script
    iOS
    App

    common_env.yml
    Assets.xcassets
    Source Code

    View Slide

  45. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    46
    c. 自動化とリポジトリ統合を組み合わせると

    View Slide

  46. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    47
    c. 自動化とリポジトリ統合を組み合わせると
    env.yml App.xcodeproj
    project.yml ビルド
    Script
    iOS
    App
    App Store
    App Store
    App Store
    アップロード
    env.yml Assets.xcassets
    マージをトリガーにCI 動作し、アップロードまで自動で行う
    新規アプリ追加時
    追加

    View Slide

  47. common_env.yml
    3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    48
    c. 自動化とリポジトリ統合を組み合わせると
    env.yml App.xcodeproj
    project.yml ビルド
    Script
    iOS
    App
    App Store
    App Store
    App Store
    アップロード
    env.yml Assets.xcassets
    マージをトリガーにCI 動作し、アップロードまで自動で行う
    新規アプリ追加時 アプリ更新時(ライブラリ更新など)
    追加 編集

    View Slide

  48. common_env.yml
    3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    49
    c. 自動化とリポジトリ統合を組み合わせると
    env.yml App.xcodeproj
    project.yml ビルド
    Script
    iOS
    App
    App Store
    App Store
    App Store
    アップロード
    env.yml Assets.xcassets
    新規アプリ追加時 アプリ更新時(ライブラリ更新など)
    追加 編集
    Build Pipelinesという仕組みを用い、
    アプリごとのビルドを並列で実行
    ⇨ 1アプリ分の時間で完了!!
    マージをトリガーにCI 動作し、アップロードまで自動で行う

    View Slide

  49. 3. STORES ブランドアプリ のシステムアーキテクチャ(現在編)
    50
    c. 自動化とリポジトリ統合を組み合わせると
    <結果>
     ・メンテナンスコスト ↓
     ・新規アプリ作成 よび更新・リリースコスト ↓
     ・スケーラビリティ ↑
    何より、新機能開発に集中で るようになった!!!

    View Slide

  50. 4. STORES ブランドアプリ のシステムアーキテクチャ(未来編)

    View Slide

  51. 52
    将来的な理想は
    1. 設定値をサーバー側に持たる
    - 「受注 -> 管理画面で必要な設定を行う -> 設定値を動的に取得しアプリを作成 -> ストアへアッ
    プロード」といった感じで、アプリエンジニアへ依頼することな 、アプリ作成 クライアント
    もし はCSの稼働のみで完結で る状況をつ る
    4. STORES ブランドアプリ のシステムアーキテクチャ(未来編)

    View Slide

  52. 5. まとめ

    View Slide

  53. 5. まとめ
    54
    ・ 歴史的経緯によりシステムアーキテクチャに拡張性 な った
    ・ 「アプリをつ る仕組み」 を構築することでビジネススケールに対応した
    ・ モバイルエンジニアとして、
    - 通常のアプリ開発だけではな 、「アプリをつ る仕組み」=「自動化を駆使した
    ビルドシステムの構築」という一般的なモバイルエンジニア 経験しないことを経
    験で た!!(している最中)
    - やり い ある!!!楽しい!!!

    View Slide

  54. 最後に
    55
    STORES ブランドアプリ は iOS / Android 各1名で通常の機能開発に加え、
    「アプリをつ る仕組み」作りまで開発しています
    一般的なアプリ開発以上の挑戦をして、課題解決をしてい たい方!
    ぜひ一緒に改善してい ましょう!
    絶賛エンジニア募集中ですー!!!!

    View Slide

  55. 56

    View Slide