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

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

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ハッシュタグ #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/

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ハッシュタグ #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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ハッシュタグ #nikkei_tech_talk ● 特定の OS で実装した Widgets が他の OS でも利⽤可能になっていった ○ WWDC 23 でも、その流れが継続 ● ロック画⾯ Widgets は Apple Watch の Complications でも使い回せるブログ：⽇経電⼦版のwatchOS対応について Apple Doc：Creating accessory widgets and watch complications 旨み 2：複数 OS で再利⽤できた 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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