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