Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

More Decks by 日本経済新聞社 エンジニア採用事務局

Other Decks in Technology

Transcript

  1. ハッシュタグ #nikkei_tech_talk
    2023年 6⽉ 15⽇
    ⽇本経済新聞社 iOS チーム
    ⾼橋 碧 / 永⼭ 瑞⽣ NIKKEI TECH TALK #8
    3 年間にわたる iOS Widgets の
    開発と、その旨み

    View Slide

  2. ハッシュタグ #nikkei_tech_talk
    Profile 2
    ⾼橋 碧(たかはし あおい)
    ● iOS エンジニア
    ● 新卒 4 年⽬
    ● Unity でゲームの製作もしてます
    ● サッカーが好きです!

    View Slide

  3. ハッシュタグ #nikkei_tech_talk
    Profile 3
    永⼭ 瑞⽣(ながやま みずお)
    ● iOS エンジニア
    ● 新卒 3 年⽬
    ● ニックネーム「おずみん」
    ● データを⾒るのも好きで、社内の
    データサイエンス勉強会にも参加

    View Slide

  4. ハッシュタグ #nikkei_tech_talk
    (ところで) WWDC 23 は⾒ましたか!
    4

    View Slide

  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/

    View Slide

  6. ハッシュタグ #nikkei_tech_talk
    iOS Widgets を開発しよう!
    6

    View Slide

  7. ハッシュタグ #nikkei_tech_talk
    本発表の⽬的
    1. iOS Widgets (以降 Widgets) を開発して得られた旨み を紹介
    2. Widgets の開発に魅⼒ を感じてもらう
    7

    View Slide

  8. ハッシュタグ #nikkei_tech_talk
    アジェンダ
    1. ⽇経電⼦版 iOS における Widgets
    2. Widgets を開発して得られた旨み
    3. データから⾒る Widgets
    8

    View Slide

  9. ハッシュタグ #nikkei_tech_talk
    アジェンダ
    1. ⽇経電⼦版 iOS における Widgets
    2. Widgets を開発して得られた旨み
    3. データから⾒る Widgets
    9

    View Slide

  10. ハッシュタグ #nikkei_tech_talk
    ⽇経電⼦版 iOS を使ったことある⼈!
    10

    View Slide

  11. ハッシュタグ #nikkei_tech_talk
    ⽇経電⼦版
    ● 2010/03 に創刊
    ● 有料会員数 80 万⼈ 以上
    ● 毎⽇ 900 本 以上の記事を配信
    ● 媒体
    ○ Web
    ○ iOS アプリ
    ○ Android アプリ
    11

    View Slide

  12. ハッシュタグ #nikkei_tech_talk
    Widgets を知っていますか?
    12

    View Slide

  13. ハッシュタグ #nikkei_tech_talk
    Widgets
    iOS 14 で発表され、毎年進化
    している OS の機能
    ● ホーム画⾯やロック画⾯に
    配置できるミニアプリ
    ● アプリ外でのコンテンツ提供と
    アプリ内への導線の役割
    ● 複数の Widgets を重ねられる
    Smart Stack が存在する
    13
    https://support.apple.com/ja-jp/HT207122

    View Slide

  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

    View Slide

  15. ハッシュタグ #nikkei_tech_talk
    Widgets for ⽇経電⼦版 iOS
    ● WWDC や HIG を⾒てデザインから作成
    ※ HIG (Human Interface Guidelines):
    Apple が出しているデザインのガイドライン
    ● 記事のカテゴリを設定できるように
    ブログも書きました:
    ● ⽇経電⼦版を Widget で読む [プロダクト編]
    ● ⽇経電⼦版iOSのロック画⾯ウィジェット対応
    15

    View Slide

  16. ハッシュタグ #nikkei_tech_talk
    アジェンダ
    1. ⽇経電⼦版における Widgets
    2. Widgets を開発して得られた旨み
    3. データから⾒る Widgets
    16

    View Slide

  17. ハッシュタグ #nikkei_tech_talk
    旨み 1:アプリ外の接点を増やせた
    ● ホーム画⾯‧ロック画⾯から
    ○ 記事の概要を知れる
    ○ ワンタップで記事を開ける
    ● Smart Stack を使っていると
    Siri が Widgets を提案してくれる
    ○ Stack に無い Widgets が提案される
    ○ ⽇経 Widgets を配置していない⼈にも
    使ってもらえる
    17

    View Slide

  18. ハッシュタグ #nikkei_tech_talk
    旨み 1:アプリ外の接点を増やせた
    Q. 実際 Widgets を配置している⼈は、どれくらい?
    A. (30⽇間で) Widgets を配置していた⼈の割合は 17.6 %
    18

    View Slide

  19. ハッシュタグ #nikkei_tech_talk
    Q. 実際 Widgets からアプリへの遷移は、どれくらい?
    A. (30⽇間で) アプリに⼀度でも遷移した⼈の割合は 29.9 %
    (※ Widgets を配置していた⼈が分⺟)
    19
    旨み 1:アプリ外の接点を増やせた

    View Slide

  20. ハッシュタグ #nikkei_tech_talk
    Q. アプリ外の接点と⾔えば、Push 通知があるよね?
    A. Push 通知は制限が増えている
    ● iOS15
    ○ 通知の時間指定要約などが追加され、通知が⾒られにくくなる⽅向に
    ● iOS16
    ○ ロック画⾯のアップデートに伴い、通知の表⽰領域が狭まった
    20
    旨み 1:アプリ外の接点を増やせた

    View Slide

  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

    View Slide

  22. ハッシュタグ #nikkei_tech_talk
    旨み 3:検証の場として使えた 22
    ● Widgets は本体アプリとライフサイクルが異なる
    ○ 更新も即座には出来ない
    ○ 本体アプリと切り離して考えないといけないことが多い

    View Slide

  23. ハッシュタグ #nikkei_tech_talk
    23
    ● 本体アプリと独⽴に開発する必要があった
    旨み 3:検証の場として使えた

    View Slide

  24. ハッシュタグ #nikkei_tech_talk
    旨み 3:検証の場として使えた 24
    ● 本体アプリと独⽴に開発する必要があった
    ○ 新しい技術や設計の検証もできた
    ■ SwiftUI が必須になる
    ■ Swift Concurrency
    ■ …

    View Slide

  25. ハッシュタグ #nikkei_tech_talk
    旨み 3:検証の場として使えた 25
    ● 本体アプリと独⽴に開発する必要があった
    ○ 新しい技術や設計の検証もできた
    ■ SwiftUI が必須になる
    ■ Swift Concurrency
    ■ …
    コアとなるコード
    (API とのやりとり、モデルの定義、…)
    本体アプリ
    (UIKit, RxSwift, …)
    Widgets
    (SwiftUI, Concurrency, …)

    View Slide

  26. ハッシュタグ #nikkei_tech_talk
    旨み 3:検証の場として使えた 26
    ● 本体アプリと独⽴に開発する必要があった
    ○ 新しい技術や設計の検証もできた
    ■ SwiftUI が必須になる
    ■ Swift Concurrency
    ■ …
    ○ コードベースが⼩さいので、新規メンバーも開発しやすかった
    ■ iOS 14:(当時) 新卒 1 年⽬の「⾼橋」が担当
    ■ iOS 15:(当時) 新卒 1 年⽬の「永⼭」が担当
    ■ iOS 16:(当時) 中途⼊社 1 年⽬の iOS メンバーが担当

    View Slide

  27. ハッシュタグ #nikkei_tech_talk
    ● 実際は、コアコードは依存先が多く、使い回しづらかった
    ○ そもそも、本体アプリから利⽤される想定しかなかった
    ○ 将来的な変更容易性なども⾒越して、改善したい!
    旨み 4:コアコード改善のきっかけになった 27
    コアコード
    本体アプリ
    Widgets
    ???

    View Slide

  28. ハッシュタグ #nikkei_tech_talk
    本体アプリ
    Widgets
    ● 本体アプリを巻き込んで、修正すると影響範囲が⼤きい
    ○ 修正量も⼤きくなるし、不測のバグも⽣みやすい
    28
    どう改善していった?
    改善したコアコード
    ⼤丈夫かな...

    View Slide

  29. ハッシュタグ #nikkei_tech_talk
    ● まずは Widgets で利⽤するコアコードを改善する
    ○ 修正量も⼩さく、不測のバグも⽣まれづらい
    29
    どう改善していった?
    コアコード
    本体アプリ
    改善したコアコード
    Widgets

    View Slide

  30. ハッシュタグ #nikkei_tech_talk
    本体アプリ
    ● 改善したコアコードを本体アプリでも利⽤する
    ○ Widgets で動作が保証されているので、安全に進められる
    30
    どう改善していった?
    改善したコアコード
    Widgets

    View Slide

  31. ハッシュタグ #nikkei_tech_talk
    1. ⽇経電⼦版における Widgets
    2. Widgets を開発して得られた旨み
    3. データから⾒る Widgets
    アジェンダ 31

    View Slide

  32. ハッシュタグ #nikkei_tech_talk
    質問です! 32
    Small Medium Large
    みなさんは
    どれを置きたく
    なりますか?

    View Slide

  33. ハッシュタグ #nikkei_tech_talk
    Data 1:Medium Widgets が⼈気
    Widgets の種類別配置数を⾒ると
    Medium が 70 %
    → 最初に開発するのは Medium
    がおすすめ
    (※ アプリや Widgets の特性によると思います)
    33

    View Slide

  34. ハッシュタグ #nikkei_tech_talk
    Widgets は表⽰するコンテンツを編集できる
    ● トップ
    ● AI推薦
    ● 速報
    ● オピニオン
    ● …
    どのカテゴリが⼀番⼈気だと思いますか?
    34
    質問です!

    View Slide

  35. ハッシュタグ #nikkei_tech_talk
    →カテゴリを変更する機能のオンボーディング‧訴求が⼤事
    35
    Widgets に設定されているカテゴリの割合
    Data 2:デフォルトのカテゴリ以外が少ない
    デフォルトのカテゴリは「トップ」 「速報」
    Extra Large
    Accessory
    Rectangular
    Small Medium Large

    View Slide

  36. ハッシュタグ #nikkei_tech_talk
    36
    ※ ウィジェットを⻑押しすることで、
    カテゴリを選択できます
    ● 追加画⾯で編集できることをアピール
    ● よく読むカテゴリの Widgets が Smart
    Stack に出てくるように OS に通知
    ● ⽇経の Widgets を紹介する記事を
    書いてもらい、その中で⾔及
    紹介記事
    カテゴリが変更ができることを伝える努⼒

    View Slide

  37. ハッシュタグ #nikkei_tech_talk
    Data 3:Widgets の更新頻度は OS が決める
    よく⾒られる Widgets の 1 ⽇の
    更新頻度は 40 ~ 70 回 (ドキュメント)
    → 適切に更新する⼯夫が必要
    ● 更新頻度の設定
    ○ 例)朝だけ頻度あげる
    ● アプリから更新処理を呼ぶ
    ○ この場合必ず更新される
    37
    ある 1 ⽇の Widgets の更新回数の分布
    (外れ値は除外)
    中央値:9
    第一四分位数:4
    第三四分位数:28
    最大値:64

    View Slide

  38. ハッシュタグ #nikkei_tech_talk
    本発表の⽬的
    1. iOS Widgets (以降 Widgets) を開発して得られた旨み を紹介
    2. Widgets の開発に魅⼒ を感じてもらう
    38

    View Slide

  39. ハッシュタグ #nikkei_tech_talk
    まとめ 39
    ● Widgets を開発して得られた旨みが多かった
    ○ アプリ外の接点を増やせた
    ○ 複数 OS で再利⽤できた
    ○ 検証の場として使えた
    ○ コアコードの改善のきっかけになった
    ● WWDC 23 でも Widgets の強化が発表されている
    ⼀緒に⽇経電⼦版の開発をしませんか 😉

    View Slide