Slide 1
Slide 1 text
デバッグメニューの
メンテナンスが大変だったので、
専用アプリを作りました。
iOSDC Japan 2020
2020/09/20 13:20〜 Track B
pixiv.inc
@FromAtom
Slide 2
Slide 2 text
• pixiv Sketch / pixiv Sketch LIVE
• アプリ分野テックリードしています
• 好きなSwiftは guard
@FromAtom
Slide 3
Slide 3 text
原稿も出しました。
Slide 4
Slide 4 text
原稿も出しました。
（なぜか2本も）
Slide 5
Slide 5 text
めちゃ大変だったので読んで♡
Slide 6
Slide 6 text
アジェンダ
• デバッグメニューとは
• 背景
• 仕組み
• 実装方法
• デバッグメニューアプリ作りのコツ
• CI時のコツ
• メリットとデメリット
Slide 7
Slide 7 text
アジェンダ
• デバッグメニューとは
• 背景
• 仕組み
• 実装方法
• デバッグメニューアプリ作りのコツ
• CI時のコツ
• メリットとデメリット
Slide 8
Slide 8 text
デバッグメニューとは？
一般ユーザには提供されず、
開発者のみが利用できる機能群
Slide 9
Slide 9 text
デバッグメニューのメリット
ビルドせずアプリ内部の状態を確認・変更できる
Slide 10
Slide 10 text
• 接続するAPIを切り替える
• Feature Flagを切り替える
• アカウントの状態を切り替える
• キャッシュやDBを空にする
デバッグメニューの機能
Slide 11
Slide 11 text
デバッグメニューの用途
• デバッグ
• 社内テスト
• ベータテスト
Slide 12
Slide 12 text
デバッグメニュー
開発・デバッグの効率化
Slide 13
Slide 13 text
アジェンダ
• デバッグメニューとは
• 背景
• 仕組み
• 実装方法
• デバッグメニューアプリ作りのコツ
• CI時のコツ
• メリットとデメリット
Slide 14
Slide 14 text
弊社の背景
• 7つのiOSアプリを開発・提供
• アプリによって下記が異なる
‣ メニューの有無
‣ アクセス方法
‣ UI
‣ 実装方法
独自デバッグメニュー
なし
なし
独自デバッグメニュー
独自デバッグメニュー
なし
なし
Slide 15
Slide 15 text
問題点
• 社内テストの準備が手間
• 学習コストが高い
• 新規導入のコストが高い
• 開発優先度が低くメンテナンスされにくい
• 散在する #if DEBUG による事故リスク
Slide 16
Slide 16 text
解決案 独自デバッグメニュー
なし
なし
独自デバッグメニュー
独自デバッグメニュー
なし
なし
Slide 17
Slide 17 text
解決案
全アプリのデバッグメニューを
1つのアプリにする
Slide 18
Slide 18 text
[ DEMO ]
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
アジェンダ
• デバッグメニューとは
• 背景
• 仕組み
• 実装方法
• デバッグメニューアプリ作りのコツ
• CI時のコツ
• メリットとデメリット
Slide 21
Slide 21 text
仕組み
App Groups + UserDefaults
Slide 22
Slide 22 text
App Groups
同一デベロッパーのアプリ間でデータを共有
Slide 23
Slide 23 text
仕組み
Slide 24
Slide 24 text
UserDefaults
仕組み
Slide 25
Slide 25 text
UserDefaults
UserDefaults
仕組み
Slide 26
Slide 26 text
UserDefaults
UserDefaults
仕組み
Slide 27
Slide 27 text
UserDefaults
UserDefaults
仕組み
Slide 28
Slide 28 text
App Groups
UserDefaults
UserDefaults
仕組み
Slide 29
Slide 29 text
UserDefaults
UserDefaults
共用 UserDefaults
App Groups
仕組み
Slide 30
Slide 30 text
App Groups
UserDefaults
UserDefaults
共用 UserDefaults
仕組み
Slide 31
Slide 31 text
App Groups
共用 UserDefaults
仕組み
Slide 32
Slide 32 text
共用 UserDefaults
isDebug: false
仕組み
Slide 33
Slide 33 text
共用 UserDefaults
isDebug: true
isDebug: false
仕組み
Slide 34
Slide 34 text
共用 UserDefaults
isDebug: true
isDebug: true
仕組み
Slide 35
Slide 35 text
共用 UserDefaults
isDebug: true
isDebug: true
仕組み
Slide 36
Slide 36 text
共用 UserDefaults
デバッグモードやな
isDebug: true
isDebug: true
仕組み
Slide 37
Slide 37 text
共用 UserDefaults
isDebug: true
api: "sample.com/api"
newFeature: false
仕組み
Slide 38
Slide 38 text
アジェンダ
• デバッグメニューとは
• 背景
• 仕組み
• 実装方法
• デバッグメニューアプリ作りのコツ
• CI時のコツ
• メリットとデメリット
Slide 39
Slide 39 text
App Groupsの設定
Slide 40
Slide 40 text
App Groupsの設定
Slide 41
Slide 41 text
App Groupsの設定
Slide 42
Slide 42 text
App Groupsの設定
Slide 43
Slide 43 text
App Groupsの設定
Slide 44
Slide 44 text
App Groupsの設定
Slide 45
Slide 45 text
App Groupsの設定
group.com.fromatom.sample.iosdc
Slide 46
Slide 46 text
App Groupsの設定｜Xcode
Slide 47
Slide 47 text
App Groupsの設定｜Xcode
Slide 48
Slide 48 text
App Groupsの設定｜Xcode
Slide 49
Slide 49 text
App Groupsの設定｜Xcode
Slide 50
Slide 50 text
App Groupsの設定｜Xcode
Slide 51
Slide 51 text
App Groupsの設定｜Xcode
Slide 52
Slide 52 text
App Groupsの設定｜Code
let suiteName = "group.com.fromatom.sample.iosdc"
let userDefaults = UserDefaults(suiteName: suiteName)
userDefaults?.set(true, forKey: "isDebug")
Slide 53
Slide 53 text
これで実装可能
Slide 54
Slide 54 text
アジェンダ
• デバッグメニューとは
• 背景
• 仕組み
• 実装方法
• デバッグメニューアプリ作りのコツ
• CI時のコツ
• メリットとデメリット
Slide 55
Slide 55 text
このアプリのつくりかた
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
UI実装したくない！
Slide 58
Slide 58 text
宣言的にUIが生成されるように
Slide 59
Slide 59 text
App
import Foundation
final class App {
let name: String
let bundleID: String
var groups: [Group] = []
init(name: String, bundleID: String) {
self.name = name
self.bundleID = bundleID
}
func add(group: Group) {
groups.append(group)
}
}
Slide 60
Slide 60 text
App(
name: "iOSDC Japan 2020",
bundleID: "com.example.iosdc"
)
App
Slide 61
Slide 61 text
let apps = [
App(name: "iOSDC Japan 2020", bundleID: "com.example.iosdc")
App(name: "pixiv Sketch", bundleID: "com.example.sketch"),
App(name: "BOOTH", bundleID: "com.example.booth"),
App(name: "pixiv", bundleID: "com.example.pixiv"),
App(name: "pixivコミック", bundleID: "com.example.comic")
]
App
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Selector
Slide 64
Slide 64 text
BoolSelector(
key: Keys.changeAPI.rawValue,
title: "接続先APIを差し替える"
)
Selector(Bool)
Slide 65
Slide 65 text
StringSelector(
key: Keys.apiEndpoint.rawValue,
title: "接続先API",
values: [
"https://example.com/api",
"https://example.com/sandbox-api",
"https://example.com/staging-api",
]
)
Selector(String)
Slide 66
Slide 66 text
let apiGroup = Group(title: "API", selectors: [
BoolSelector(key: Keys.changeAPI.rawValue, title: "接続先APIを差し替える"),
StringSelector(key: Keys.apiEndpoint.rawValue, title: "接続先API", values: [
"https://example.com/api",
"https://example.com/sandbox-api",
"https://example.com/staging-api",
])
])
Group
Slide 67
Slide 67 text
let apiGroup = Group(title: "API", selectors: [
BoolSelector(key: Keys.changeAPI.rawValue, title: "接続先APIを差し替える"),
StringSelector(key: Keys.apiEndpoint.rawValue, title: "接続先API", values: [
"https://example.com/api",
"https://example.com/sandbox-api",
"https://example.com/staging-api",
])
])
let debugModeGroup = Group(title: "DEBUG", selectors: [
BoolSelector(key: Keys.isDebugMode.rawValue, title: "デバッグモード")
])
let featureGroup = Group(title: "FEATURE", selectors: [
BoolSelector(key: Keys.featureFlagA.rawValue, title: "新機能Aを有効化"),
BoolSelector(key: Keys.featureFlagB.rawValue, title: "新機能Bを有効化"),
BoolSelector(key: Keys.featureFlagC.rawValue, title: "新機能Cを有効化"),
])
Group
Slide 68
Slide 68 text
let app = App(name: "iOSDC Japan 2020", bundleID: "com.example.iosdc")
let debugModeGroup = Group(title: "DEBUG", selectors: [
BoolSelector(key: Keys.isDebugMode.rawValue, title: "デバッグモード")
])
app.add(group: debugModeGroup)
let apiGroup = Group(title: "API", selectors: [
BoolSelector(key: Keys.changeAPI.rawValue, title: "接続先APIを差し替える"),
StringSelector(key: Keys.apiEndpoint.rawValue, title: "接続先API", values: [
"https://example.com/api",
"https://example.com/sandbox-api",
"https://example.com/staging-api",
])
])
app.add(group: apiGroup)
let featureGroup = Group(title: "FEATURE", selectors: [
BoolSelector(key: Keys.featureFlagA.rawValue, title: "新機能Aを有効化"),
BoolSelector(key: Keys.featureFlagB.rawValue, title: "新機能Bを有効化"),
BoolSelector(key: Keys.featureFlagC.rawValue, title: "新機能Cを有効化"),
])
app.add(group: featureGroup)
Slide 69
Slide 69 text
let app = App(name: "iOSDC Japan 2020", bundleID: "com.example.iosdc")
let debugModeGroup = Group(title: "DEBUG", selectors: [
BoolSelector(key: Keys.isDebugMode.rawValue, title: "デバッグモード")
])
app.add(group: debugModeGroup)
let apiGroup = Group(title: "API", selectors: [
BoolSelector(key: Keys.changeAPI.rawValue, title: "接続先APIを差し替える"),
StringSelector(key: Keys.apiEndpoint.rawValue, title: "接続先API", values: [
"https://example.com/api",
"https://example.com/sandbox-api",
"https://example.com/staging-api",
])
])
app.add(group: apiGroup)
let featureGroup = Group(title: "FEATURE", selectors: [
BoolSelector(key: Keys.featureFlagA.rawValue, title: "新機能Aを有効化"),
BoolSelector(key: Keys.featureFlagB.rawValue, title: "新機能Bを有効化"),
BoolSelector(key: Keys.featureFlagC.rawValue, title: "新機能Cを有効化"),
])
app.add(group: featureGroup)
Slide 70
Slide 70 text
let app = App(name: "iOSDC Japan 2020", bundleID: "com.example.iosdc")
let debugModeGroup = Group(title: "DEBUG", selectors: [
BoolSelector(key: Keys.isDebugMode.rawValue, title: "デバッグモード")
])
app.add(group: debugModeGroup)
let apiGroup = Group(title: "API", selectors: [
BoolSelector(key: Keys.changeAPI.rawValue, title: "接続先APIを差し替える"),
StringSelector(key: Keys.apiEndpoint.rawValue, title: "接続先API", values: [
"https://example.com/api",
"https://example.com/sandbox-api",
"https://example.com/staging-api",
])
])
app.add(group: apiGroup)
let featureGroup = Group(title: "FEATURE", selectors: [
BoolSelector(key: Keys.featureFlagA.rawValue, title: "新機能Aを有効化"),
BoolSelector(key: Keys.featureFlagB.rawValue, title: "新機能Bを有効化"),
BoolSelector(key: Keys.featureFlagC.rawValue, title: "新機能Cを有効化"),
])
app.add(group: featureGroup)
Slide 71
Slide 71 text
let app = App(name: "iOSDC Japan 2020", bundleID: "com.example.iosdc")
let debugModeGroup = Group(title: "DEBUG", selectors: [
BoolSelector(key: Keys.isDebugMode.rawValue, title: "デバッグモード")
])
app.add(group: debugModeGroup)
let apiGroup = Group(title: "API", selectors: [
BoolSelector(key: Keys.changeAPI.rawValue, title: "接続先APIを差し替える"),
StringSelector(key: Keys.apiEndpoint.rawValue, title: "接続先API", values: [
"https://example.com/api",
"https://example.com/sandbox-api",
"https://example.com/staging-api",
])
])
app.add(group: apiGroup)
let featureGroup = Group(title: "FEATURE", selectors: [
BoolSelector(key: Keys.featureFlagA.rawValue, title: "新機能Aを有効化"),
BoolSelector(key: Keys.featureFlagB.rawValue, title: "新機能Bを有効化"),
BoolSelector(key: Keys.featureFlagC.rawValue, title: "新機能Cを有効化"),
])
app.add(group: featureGroup)
Slide 72
Slide 72 text
参考実装
https://github.com/FromAtom/iosdc-2020-sample
Slide 73
Slide 73 text
YAMLやTOMLを使ったら？
Slide 74
Slide 74 text
YAMLやTOMLを使わない理由
• 正しいデータ形式か確認する機構の実装が必須
‣ YAML, TOMLとしての正しさ
‣ Chushaが扱う形として正しさ
• Swiftで書けばコンパイラが正しいか見てくれる
• [個人の感想] 読み書きするのキツくない？
Slide 75
Slide 75 text
アジェンダ
• デバッグメニューとは
• 背景
• 仕組み
• 実装方法
• デバッグメニューアプリ作りのコツ
• CI時のコツ
• メリットとデメリット
Slide 76
Slide 76 text
CIで生成するもの
• 実機用の ".ipa"
• シミュレーター用の ".app"
Slide 77
Slide 77 text
CIで生成するもの
• 実機用の ".ipa"
• シミュレーター用の ".app"
Slide 78
Slide 78 text
".app" の作り方
ビルド方法
lane :build_app_file do
xcodebuild(
scheme: 'Chusha',
build: true,
sdk: 'iphonesimulator',
derivedDataPath: 'build'
)
end
Fastfile Bitrise
OR
Slide 79
Slide 79 text
".app" の作り方
GitHub Releasesにuploadする
set -eu
go get -u github.com/tcnksm/ghr
version=0.0.1
name=chusha-${version}.tar.gz
mkdir -p releases
cp -r build/Build/Products/Debug-iphonesimulator/Chusha.app releases/Chucha.app
tar zcvf $name releases
body="ADHOC: ${ADHOC_INSTALL_PAGE_URL}
INHOUSE: ${INHOUSE_INSTALL_PAGE_URL}" echo $ADHOC_INSTALL_PAGE_URL echo $body ghr -delete -n $version -b "${body}" $version $name
INHOUSE: ${INHOUSE_INSTALL_PAGE_URL}" echo $ADHOC_INSTALL_PAGE_URL echo $body ghr -delete -n $version -b "${body}" $version $name
Slide 80
Slide 80 text
".app" の作り方
GitHub Releasesにuploadする
set -eu
go get -u github.com/tcnksm/ghr
version=0.0.1
name=chusha-${version}.tar.gz
mkdir -p releases
cp -r build/Build/Products/Debug-iphonesimulator/Chusha.app releases/Chucha.app
tar zcvf $name releases
body="ADHOC: ${ADHOC_INSTALL_PAGE_URL}
INHOUSE: ${INHOUSE_INSTALL_PAGE_URL}" echo $ADHOC_INSTALL_PAGE_URL echo $body ghr -delete -n $version -b "${body}" $version $name
INHOUSE: ${INHOUSE_INSTALL_PAGE_URL}" echo $ADHOC_INSTALL_PAGE_URL echo $body ghr -delete -n $version -b "${body}" $version $name
Slide 81
Slide 81 text
".app" の作り方
GitHub Releasesにuploadする
set -eu
go get -u github.com/tcnksm/ghr
version=0.0.1
name=chusha-${version}.tar.gz
mkdir -p releases
cp -r build/Build/Products/Debug-iphonesimulator/Chusha.app releases/Chucha.app
tar zcvf $name releases
body="ADHOC: ${ADHOC_INSTALL_PAGE_URL}
INHOUSE: ${INHOUSE_INSTALL_PAGE_URL}" echo $ADHOC_INSTALL_PAGE_URL echo $body ghr -delete -n $version -b "${body}" $version $name
INHOUSE: ${INHOUSE_INSTALL_PAGE_URL}" echo $ADHOC_INSTALL_PAGE_URL echo $body ghr -delete -n $version -b "${body}" $version $name
Slide 82
Slide 82 text
".app" の作り方
Slide 83
Slide 83 text
".app" の作り方
Slide 84
Slide 84 text
".app" の作り方
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
アジェンダ
• デバッグメニューとは
• 背景
• 仕組み
• 実装方法
• デバッグメニューアプリ作りのコツ
• CI時のコツ
• メリットとデメリット
Slide 87
Slide 87 text
メリット
• 1つのアプリで複数のアプリにデバッグ情報を注入できる
• 起動した時点でデバッグ情報が注入されている
‣ 初回起動時になにかしたい時に便利
• App Storeに公開されているアプリでも使える
• #if DEBUG の利用が減らせる
※登壇後追記：収録後の2020年9月11日にレビューガイドラインが更新され、下記の通りガイドラインの明確化されました。
2.3.1: Don’t include any hidden, dormant, or undocumented features in your app; your app’s functionality should be clear to end users and App Review.
このため、App Storeに公開されるバージョンでもChushaが利用できると、リジェクトされる可能性があります。あらかじめご了承ください。
Slide 88
Slide 88 text
デメリット
• Chushaのインストールが必要になる
• 別アプリに移動しないといけない
• 即時反映系の機能が作りにくい
‣ DBクリア、キャッシュクリア
Slide 89
Slide 89 text
まとめ
• AppGroupsとUserDefaultsでデバッグメニューをアプリ化
• デバッグメニューアプリは宣言的にUIを実装
• ".app" を生成しておけばシミュレータでも使える