Slide 1
Slide 1 text
ヘイ株式会社
「アプリをつ る仕組み」の構築
STORES株式会社
iOSエンジニア
長谷川 将司（@marcy731）
2022/10/13 STORES x MGRe 「最近チャレンジしたことをまとめてみた」
Slide 2
Slide 2 text
アジェンダ
2
1. STORES ブランドアプリ の概要
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
4. STORES ブランドアプリ のシステムアーキテクチャ（未来編）
5. まとめ
Slide 3
Slide 3 text
1. STORES ブランドアプリ の概要
Slide 4
Slide 4 text
1. STORES ブランドアプリ の概要
4
2022年12月、ショップフォース株式会社がヘイ株式会社にジョイン。
2022年7月7日、既存サービスを「STORES ブランドアプリ」としてリブランディングしリリース。
Slide 5
Slide 5 text
1. STORES ブランドアプリ の概要
5
- 複数の 店のスタンプカードをまとめて管理
- ロイヤリティプログラムの提供
- スタンプやポイントに応じた
- クーポンの発行
- 特別な 知らせ など
- CRM機能
- DB: Database
- 顧客情報の管理
- BI: Business Intelligence
- 顧客情報と購買情報等を紐付け、分析
- MA: Marketing Automation
- クーポン発行や 知らせの自動化など
Slide 6
Slide 6 text
1. STORES ブランドアプリ の概要
6
一方で、 客様のニーズとして「 店独自のアプリを作ってブランドを表現したい！」
Stampsの基本機能をベースに、 客様独自のアプリを提供（= STORES ブランドアプリ）
Slide 7
Slide 7 text
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
Slide 8
Slide 8 text
App
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
9
Server
・ブランドアプリ事業の立ち上げ期に ける、GitHubのリポジトリ構成の遷移
Slide 9
Slide 9 text
Original Apps
Original Apps
App
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
10
Server
・ブランドアプリ事業の立ち上げ期に ける、GitHubのリポジトリ構成の遷移
Server
Appmaker
Data layer
StampsのData層を切り離し、API資産を最大限活用
Slide 10
Slide 10 text
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層を抽象化
Slide 11
Slide 11 text
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
12
Server
Original Apps
Original Apps
Appmaker
Data layer
Appmaker Template
UI layer
・ブランドアプリ事業の立ち上げ期に ける、GitHubのリポジトリ構成の遷移
Slide 12
Slide 12 text
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
13
Server
Original Apps
Original Apps
Appmaker
Data layer
Appmaker Template
UI layer
・ブランドアプリ事業の立ち上げ期に ける、GitHubのリポジトリ構成の遷移
リポジトリ 多す て色々大変…
⇨ メンテナンスコスト 大
⇨ 新規アプリ作成 よび更新・リリースコスト 大
⇨ スケーラビリティ なし
Slide 13
Slide 13 text
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
14
・ブランドアプリ作成〜機能追加〜ストアへのアップロードの流れ
Slide 14
Slide 14 text
アプリ新規作成
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
15
・ブランドアプリ作成〜機能追加〜ストアへのアップロードの流れ
App Store
App Store
Original Apps
Original Apps App Store
ビルド
＆
アップロード
・リポジトリ作成
・プロジェクト作成
・ライブラリのインポート
・必要な設定やリソースを追加
アプリ機能追加
・ライブラリの更新
Slide 15
Slide 15 text
アプリ新規作成
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
16
・ブランドアプリ作成〜機能追加〜ストアへのアップロードの流れ
App Store
App Store
Original Apps
Original Apps App Store
ビルド
＆
アップロード
・リポジトリ作成
・プロジェクト作成
・ライブラリのインポート
・必要な設定やリソースを追加
アプリ機能追加
・ライブラリの更新
これら全てをアプリごとに手動で行う必要あり
⇨ メンテナンスコスト大
⇨ 新規アプリ作成 よび更新・リリースコスト大
⇨ スケーラビリティなし
Slide 16
Slide 16 text
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
17
聞 だけで大変そうですよね…
> 課題はあるのはわ ってる 、
> エンジニアリソースもな 自動化にも手 回らないし…
> まだクライアント様の数もそこまで多 ない…
> 今はギリギリなんと なっている…
という状況でした
Slide 17
Slide 17 text
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
18
聞 だけで大変そうですよね…
> 課題はあるのはわ ってる 、
> エンジニアリソースもな 自動化にも手 回らないし…
> まだクライアント様の数もそこまで多 ない…
> 今はギリギリなんと なっている…
という状況でした
当時のモバイルエンジニアは
iOS/Android兼任で1名(業務委託)
Slide 18
Slide 18 text
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
19
そんな中、状況に変化あり
1. STORESとの合流
2. モバイルエンジニアリソース増
a. iOS/Android兼任1名(業務委託) -> iOS/Androidそれぞれ1名(共に正社員）
Slide 19
Slide 19 text
2. STORES ブランドアプリ のシステムアーキテクチャ（過去編）
20
そんな中、状況に変化あり
1. STORESとの合流
2. モバイルエンジニアリソース増
a. iOS/Android兼任1名(業務委託) -> iOS/Androidそれぞれ1名(共に正社員）
⇨ 将来を見据え、
「より拡張性の高いシステムアーキテクチャにしてい ぞ！」
という機運 高まった！！
Slide 20
Slide 20 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
Slide 21
Slide 21 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
22
<課題>
1. リポジトリ多す 問題
2. 手作業多す 問題
Slide 22
Slide 22 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
23
<施策>
1. リポジトリ多す 問題 → ブランドアプリのリポジトリを一つに統合
2. 手作業多す 問題 → CI/CDを導入して可能な限り自動化
Slide 23
Slide 23 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
24
<施策>
1. リポジトリ多す 問題 → ブランドアプリのリポジトリを一つに統合
2. 手作業多す 問題 → CI/CDを導入して可能な限り自動化
「やるべ 」ことを「当たり前」にやる
Slide 24
Slide 24 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
25
a. CI/CDを用いた自動化
Slide 25
Slide 25 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
26
a. CI/CDを用いた自動化
×
Slide 26
Slide 26 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
27
a. CI/CDを用いた自動化
アプリ新規作成
App Store
App Store
Original Apps
Original Apps App Store
ビルド
＆
アップロード
アプリ機能追加
・ライブラリの更新
・リポジトリ作成
・プロジェクト作成
・ライブラリのインポート
・必要な設定やリソースを追加
Slide 27
Slide 27 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
28
a. CI/CDを用いた自動化
アプリ新規作成
App Store
App Store
Original Apps
Original Apps App Store
ビルド
＆
アップロード
・リポジトリ作成
・プロジェクト作成
・ライブラリのインポート
・必要な設定やリソースを追加
・fastlane + bitriseの設定
アプリ機能追加
・ライブラリの更新
自動化
マージをトリガーにCI 動作し、アップロードまで自動で行う
一部のみ
Slide 28
Slide 28 text
・リポジトリ作成
・プロジェクト作成
・ライブラリのインポート
・必要な設定やリソースを追加
・fastlane + bitriseの設定
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
29
a. CI/CDを用いた自動化
アプリ新規作成
App Store
App Store
Original Apps
Original Apps App Store
ビルド
＆
アップロード
アプリ機能追加
・ライブラリの更新
自動化
手作業のまま → リポジトリ統合に期待…！
マージをトリガーにCI 動作し、アップロードまで自動で行う
一部のみ
Slide 29
Slide 29 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
30
b. リポジトリ統合
Slide 30
Slide 30 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
31
b. リポジトリ統合
Server
Original Apps
Original Apps
Appmaker
Date layer
Appmaker Template
UI layer
Slide 31
Slide 31 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
32
b. リポジトリ統合
Server
Original Apps
Original Apps
Appmaker
Data layer
Appmaker Template
UI layer
Server
Appmaker
Data layer
Appmaker Template
UI layer
Slide 32
Slide 32 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
33
b. リポジトリ統合
Original Apps
Original Apps
リポジトリ統合
Slide 33
Slide 33 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
34
b. リポジトリ統合
Original Apps
Original Apps
リポジトリ統合
＝
「複数のアプリを動的に生成する仕組みを構築する」
Slide 34
Slide 34 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
35
b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築（iOS）
iOSアプリ
⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
Slide 35
Slide 35 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
36
b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築（iOS）
iOSアプリ
⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
⇨ .xcodeprojをアプリごとに動的に変更もし は生成したい
Slide 36
Slide 36 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
37
b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築（iOS）
iOSアプリ
⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
⇨ .xcodeprojをアプリごとに動的に変更もし は生成したい
XcodeGenを利用
プロジェクトファイル(.xcodeproj)を定義ファイル(project.yml) ら生成するツール
Slide 37
Slide 37 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
38
b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築（iOS）
iOSアプリ
⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
⇨ .xcodeprojをアプリごとに動的に変更もし は生成したい
XcodeGenを利用
プロジェクトファイル(.xcodeproj)を定義ファイル(project.yml) ら生成するツール
⇨ yamlのような簡易なテキストファイル ら.xcodeproj 生成で る
Slide 38
Slide 38 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
39
b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築（iOS）
iOSアプリ
⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
⇨ .xcodeprojをアプリごとに動的に変更もし は生成したい
XcodeGenを利用
プロジェクトファイル(.xcodeproj)を定義ファイル(project.yml) ら生成するツール
⇨ yamlのような簡易なテキストファイル ら.xcodeproj 生成で る
⇨ project.ymlに環境変数を用いることで動的に変更
Slide 39
Slide 39 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
40
b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築（iOS）
iOSアプリ
⇨ 専用のプロジェクトファイル(.xcodeproj)をXcodeでビルドすることで生成
⇨ .xcodeprojをアプリごとに動的に変更もし は生成したい
XcodeGenを利用
プロジェクトファイル(.xcodeproj)を定義ファイル(project.yml) ら生成するツール
⇨ yamlのような簡易なテキストファイル ら.xcodeproj 生成で る
⇨ project.ymlに環境変数を用いることで動的に変更
⇨ アプリごとの.xcodeproj 生成で る！
Slide 40
Slide 40 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
41
b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築（iOS）
XcodeGen
環境変数
env.yml App.xcodeproj
project.yml
ビルド
Script
iOS
App
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
43
b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築（iOS）
XcodeGen
環境変数
env.yml App.xcodeproj
project.yml
ビルド
Script
iOS
App
Slide 43
Slide 43 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
44
b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築（iOS）
XcodeGen
環境変数
env.yml App.xcodeproj
project.yml
ビルド
Script
iOS
App
Assets.xcassets
Slide 44
Slide 44 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
45
b. リポジトリ統合 = 複数のアプリを動的に生成する仕組みの構築（iOS）
XcodeGen
環境変数
env.yml App.xcodeproj
project.yml
ビルド
Script
iOS
App
＋
common_env.yml
Assets.xcassets
Source Code
Slide 45
Slide 45 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
46
c. 自動化とリポジトリ統合を組み合わせると
Slide 46
Slide 46 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
47
c. 自動化とリポジトリ統合を組み合わせると
env.yml App.xcodeproj
project.yml ビルド
Script
iOS
App
App Store
App Store
App Store
アップロード
env.yml Assets.xcassets
マージをトリガーにCI 動作し、アップロードまで自動で行う
新規アプリ追加時
追加
Slide 47
Slide 47 text
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 動作し、アップロードまで自動で行う
新規アプリ追加時 アプリ更新時（ライブラリ更新など）
追加 編集
Slide 48
Slide 48 text
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 動作し、アップロードまで自動で行う
Slide 49
Slide 49 text
3. STORES ブランドアプリ のシステムアーキテクチャ（現在編）
50
c. 自動化とリポジトリ統合を組み合わせると
＜結果＞
・メンテナンスコスト ↓
・新規アプリ作成 よび更新・リリースコスト ↓
・スケーラビリティ ↑
何より、新機能開発に集中で るようになった！！！
Slide 50
Slide 50 text
4. STORES ブランドアプリ のシステムアーキテクチャ（未来編）
Slide 51
Slide 51 text
52
将来的な理想は
1. 設定値をサーバー側に持たる
- 「受注 -> 管理画面で必要な設定を行う -> 設定値を動的に取得しアプリを作成 -> ストアへアッ
プロード」といった感じで、アプリエンジニアへ依頼することな 、アプリ作成 クライアント
もし はCSの稼働のみで完結で る状況をつ る
4. STORES ブランドアプリ のシステムアーキテクチャ（未来編）
Slide 52
Slide 52 text
5. まとめ
Slide 53
Slide 53 text
5. まとめ
54
・ 歴史的経緯によりシステムアーキテクチャに拡張性 な った
・ 「アプリをつ る仕組み」 を構築することでビジネススケールに対応した
・ モバイルエンジニアとして、
- 通常のアプリ開発だけではな 、「アプリをつ る仕組み」=「自動化を駆使した
ビルドシステムの構築」という一般的なモバイルエンジニア 経験しないことを経
験で た！！(している最中)
- やり い ある！！！楽しい！！！
Slide 54
Slide 54 text
最後に
55
STORES ブランドアプリ は iOS / Android 各1名で通常の機能開発に加え、
「アプリをつ る仕組み」作りまで開発しています
一般的なアプリ開発以上の挑戦をして、課題解決をしてい たい方！
ぜひ一緒に改善してい ましょう！
絶賛エンジニア募集中ですー！！！！
Slide 55
Slide 55 text
56