3 年間にわたる iOS Widgets の開発と、その旨み/#nikkei_tech_talk

2023/06/15開催、NIKKEI Tech Talk #8登壇資料です #nikkei_tech_talk
タイトルは「3 年間にわたる iOS Widgets の開発と、その旨み」です
https://nikkei.connpass.com/event/284090/

Transcript

1. ハッシュタグ #nikkei_tech_talk 2023年 6⽉ 15⽇ ⽇本経済新聞社 iOS チーム ⾼橋 碧 / 永⼭ 瑞⽣ NIKKEI TECH TALK #8 3 年間にわたる iOS Widgets の 開発と、その旨み
2. ハッシュタグ #nikkei_tech_talk Profile 2 ⾼橋 碧（たかはし あおい） • iOS エンジニア • 新卒 4 年⽬ • Unity でゲームの製作もしてます • サッカーが好きです！
3. ハッシュタグ #nikkei_tech_talk Profile 3 永⼭ 瑞⽣（ながやま みずお） • iOS エンジニア • 新卒 3 年⽬ • ニックネーム「おずみん」 • データを⾒るのも好きで、社内の データサイエンス勉強会にも参加
4. ハッシュタグ #nikkei_tech_talk (ところで) WWDC 23 は⾒ましたか！ 4
5. ハッシュタグ #nikkei_tech_talk iOS Widgets が更に進化する！ • よりインタラクティブに ◦ 今まではアプリ内への遷移のみ可能 ◦ ボタンタップ時の処理などが可能に！ • より広範囲に ◦ iPhone の StandBy mode ◦ iPad の Lock screen ◦ Mac の Desktop ◦ Apple Watch の Smart Stack 5 https://www.apple.com/ios/ios-17-preview/
6. ハッシュタグ #nikkei_tech_talk iOS Widgets を開発しよう！ 6
7. ハッシュタグ #nikkei_tech_talk 本発表の⽬的 1. iOS Widgets (以降 Widgets) を開発して得られた旨み を紹介 2. Widgets の開発に魅⼒ を感じてもらう 7
8. ハッシュタグ #nikkei_tech_talk アジェンダ 1. ⽇経電⼦版 iOS における Widgets 2. Widgets を開発して得られた旨み 3. データから⾒る Widgets 8
9. ハッシュタグ #nikkei_tech_talk アジェンダ 1. ⽇経電⼦版 iOS における Widgets 2. Widgets を開発して得られた旨み 3. データから⾒る Widgets 9
10. ハッシュタグ #nikkei_tech_talk ⽇経電⼦版 iOS を使ったことある⼈！ 10
11. ハッシュタグ #nikkei_tech_talk ⽇経電⼦版 • 2010/03 に創刊 • 有料会員数 80 万⼈ 以上 • 毎⽇ 900 本 以上の記事を配信 • 媒体 ◦ Web ◦ iOS アプリ ◦ Android アプリ 11
12. ハッシュタグ #nikkei_tech_talk Widgets を知っていますか？ 12
13. ハッシュタグ #nikkei_tech_talk Widgets iOS 14 で発表され、毎年進化 している OS の機能 • ホーム画⾯やロック画⾯に 配置できるミニアプリ • アプリ外でのコンテンツ提供と アプリ内への導線の役割 • 複数の Widgets を重ねられる Smart Stack が存在する 13 https://support.apple.com/ja-jp/HT207122
14. ハッシュタグ #nikkei_tech_talk Widgets for ⽇経電⼦版 iOS iOS 14 ~ 16 で、記事を表⽰する Widgets に対応 14 iOS 14： • iPhone ホーム画⾯⽤の Small / Medium / Large Widgets iOS 15： • iPad 専⽤の Extra Large Widgets iOS 16： • iPhone ロック画⾯⽤の AccessoryRectangular Widgets
15. ハッシュタグ #nikkei_tech_talk Widgets for ⽇経電⼦版 iOS • WWDC や HIG を⾒てデザインから作成 ※ HIG (Human Interface Guidelines)： Apple が出しているデザインのガイドライン • 記事のカテゴリを設定できるように ブログも書きました： • ⽇経電⼦版を Widget で読む [プロダクト編] • ⽇経電⼦版iOSのロック画⾯ウィジェット対応 15
16. ハッシュタグ #nikkei_tech_talk アジェンダ 1. ⽇経電⼦版における Widgets 2. Widgets を開発して得られた旨み 3. データから⾒る Widgets 16
17. ハッシュタグ #nikkei_tech_talk 旨み 1：アプリ外の接点を増やせた • ホーム画⾯‧ロック画⾯から ◦ 記事の概要を知れる ◦ ワンタップで記事を開ける • Smart Stack を使っていると Siri が Widgets を提案してくれる ◦ Stack に無い Widgets が提案される ◦ ⽇経 Widgets を配置していない⼈にも 使ってもらえる 17
18. ハッシュタグ #nikkei_tech_talk 旨み 1：アプリ外の接点を増やせた Q. 実際 Widgets を配置している⼈は、どれくらい？ A. (30⽇間で) Widgets を配置していた⼈の割合は 17.6 % 18
19. ハッシュタグ #nikkei_tech_talk Q. 実際 Widgets からアプリへの遷移は、どれくらい？ A. (30⽇間で) アプリに⼀度でも遷移した⼈の割合は 29.9 % (※ Widgets を配置していた⼈が分⺟) 19 旨み 1：アプリ外の接点を増やせた
20. ハッシュタグ #nikkei_tech_talk Q. アプリ外の接点と⾔えば、Push 通知があるよね？ A. Push 通知は制限が増えている • iOS15 ◦ 通知の時間指定要約などが追加され、通知が⾒られにくくなる⽅向に • iOS16 ◦ ロック画⾯のアップデートに伴い、通知の表⽰領域が狭まった 20 旨み 1：アプリ外の接点を増やせた
21. ハッシュタグ #nikkei_tech_talk • 特定の OS で実装した Widgets が 他の OS でも利⽤可能になっていった ◦ WWDC 23 でも、その流れが継続 • ロック画⾯ Widgets は Apple Watch の Complications でも使い回せる ブログ：⽇経電⼦版のwatchOS対応について Apple Doc：Creating accessory widgets and watch complications 旨み 2：複数 OS で再利⽤できた 21
22. ハッシュタグ #nikkei_tech_talk 旨み 3：検証の場として使えた 22 • Widgets は本体アプリとライフサイクルが異なる ◦ 更新も即座には出来ない ◦ 本体アプリと切り離して考えないといけないことが多い
23. ハッシュタグ #nikkei_tech_talk 23 • 本体アプリと独⽴に開発する必要があった 旨み 3：検証の場として使えた
24. ハッシュタグ #nikkei_tech_talk 旨み 3：検証の場として使えた 24 • 本体アプリと独⽴に開発する必要があった ◦ 新しい技術や設計の検証もできた ▪ SwiftUI が必須になる ▪ Swift Concurrency ▪ …
25. ハッシュタグ #nikkei_tech_talk 旨み 3：検証の場として使えた 25 • 本体アプリと独⽴に開発する必要があった ◦ 新しい技術や設計の検証もできた ▪ SwiftUI が必須になる ▪ Swift Concurrency ▪ … コアとなるコード （API とのやりとり、モデルの定義、…） 本体アプリ （UIKit, RxSwift, …） Widgets （SwiftUI, Concurrency, …）
26. ハッシュタグ #nikkei_tech_talk 旨み 3：検証の場として使えた 26 • 本体アプリと独⽴に開発する必要があった ◦ 新しい技術や設計の検証もできた ▪ SwiftUI が必須になる ▪ Swift Concurrency ▪ … ◦ コードベースが⼩さいので、新規メンバーも開発しやすかった ▪ iOS 14：(当時) 新卒 1 年⽬の「⾼橋」が担当 ▪ iOS 15：(当時) 新卒 1 年⽬の「永⼭」が担当 ▪ iOS 16：(当時) 中途⼊社 1 年⽬の iOS メンバーが担当
27. ハッシュタグ #nikkei_tech_talk • 実際は、コアコードは依存先が多く、使い回しづらかった ◦ そもそも、本体アプリから利⽤される想定しかなかった ◦ 将来的な変更容易性なども⾒越して、改善したい！ 旨み 4：コアコード改善のきっかけになった 27 コアコード 本体アプリ Widgets ???
28. ハッシュタグ #nikkei_tech_talk 本体アプリ Widgets • 本体アプリを巻き込んで、修正すると影響範囲が⼤きい ◦ 修正量も⼤きくなるし、不測のバグも⽣みやすい 28 どう改善していった？ 改善したコアコード ⼤丈夫かな...
29. ハッシュタグ #nikkei_tech_talk • まずは Widgets で利⽤するコアコードを改善する ◦ 修正量も⼩さく、不測のバグも⽣まれづらい 29 どう改善していった？ コアコード 本体アプリ 改善したコアコード Widgets
30. ハッシュタグ #nikkei_tech_talk 本体アプリ • 改善したコアコードを本体アプリでも利⽤する ◦ Widgets で動作が保証されているので、安全に進められる 30 どう改善していった？ 改善したコアコード Widgets
31. ハッシュタグ #nikkei_tech_talk 1. ⽇経電⼦版における Widgets 2. Widgets を開発して得られた旨み 3. データから⾒る Widgets アジェンダ 31
32. ハッシュタグ #nikkei_tech_talk 質問です！ 32 Small Medium Large みなさんは どれを置きたく なりますか？
33. ハッシュタグ #nikkei_tech_talk Data 1：Medium Widgets が⼈気 Widgets の種類別配置数を⾒ると Medium が 70 % → 最初に開発するのは Medium がおすすめ (※ アプリや Widgets の特性によると思います) 33
34. ハッシュタグ #nikkei_tech_talk Widgets は表⽰するコンテンツを編集できる • トップ • AI推薦 • 速報 • オピニオン • … どのカテゴリが⼀番⼈気だと思いますか？ 34 質問です！
35. ハッシュタグ #nikkei_tech_talk →カテゴリを変更する機能のオンボーディング‧訴求が⼤事 35 Widgets に設定されているカテゴリの割合 Data 2：デフォルトのカテゴリ以外が少ない デフォルトのカテゴリは「トップ」 「速報」 Extra Large Accessory Rectangular Small Medium Large
36. ハッシュタグ #nikkei_tech_talk 36 ※ ウィジェットを⻑押しすることで、 カテゴリを選択できます • 追加画⾯で編集できることをアピール • よく読むカテゴリの Widgets が Smart Stack に出てくるように OS に通知 • ⽇経の Widgets を紹介する記事を 書いてもらい、その中で⾔及 紹介記事 カテゴリが変更ができることを伝える努⼒
37. ハッシュタグ #nikkei_tech_talk Data 3：Widgets の更新頻度は OS が決める よく⾒られる Widgets の 1 ⽇の 更新頻度は 40 ~ 70 回 (ドキュメント) → 適切に更新する⼯夫が必要 • 更新頻度の設定 ◦ 例）朝だけ頻度あげる • アプリから更新処理を呼ぶ ◦ この場合必ず更新される 37 ある 1 ⽇の Widgets の更新回数の分布 （外れ値は除外） 中央値：9 第一四分位数：4 第三四分位数：28 最大値：64
38. ハッシュタグ #nikkei_tech_talk 本発表の⽬的 1. iOS Widgets (以降 Widgets) を開発して得られた旨み を紹介 2. Widgets の開発に魅⼒ を感じてもらう 38
39. ハッシュタグ #nikkei_tech_talk まとめ 39 • Widgets を開発して得られた旨みが多かった ◦ アプリ外の接点を増やせた ◦ 複数 OS で再利⽤できた ◦ 検証の場として使えた ◦ コアコードの改善のきっかけになった • WWDC 23 でも Widgets の強化が発表されている ⼀緒に⽇経電⼦版の開発をしませんか 😉