Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

チラシルiOSでの広告枠開発

2,475 views

Published on

DeNA TechCon 2016 での登壇資料
https://techcon.dena.com/

Published in: Technology
  • Be the first to comment

チラシルiOSでの広告枠開発

  1. 1. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Jan 29, 2016 Satoshi Takano EC事業本部サービス開発事業部
 プロダクトデザイングループ
 DeNA Co., Ltd. チラシルiOSでの
 広告枠開発 1
  2. 2. 自己紹介 • EC事業本部サービス開発事業部
 プロダクトデザイングループ • フロントエンドエンジニア
 (iOS / Web) • 2013 DeNA入社 • 2013/10 ~ 旅行系 Web メディアの サーバーサイド • 2014/10 ~ チラシルのiOS 2 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Satoshi Takano
  3. 3. 今日お話しすること 3 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 1. チラシルとは チラシルを題材とした iOS ネイティブアプリでの動画広告枠開発
  4. 4. 今日お話しすること 4 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 1. チラシルとは 2. JSON-RPC 2.0 の活用 チラシルを題材とした iOS ネイティブアプリでの動画広告枠開発
  5. 5. 今日お話しすること 5 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 1. チラシルとは 2. JSON-RPC 2.0 の活用 3. 動画広告の開発 チラシルを題材とした iOS ネイティブアプリでの動画広告枠開発
  6. 6. 今日お話しすること 6 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 1. チラシルとは 2. JSON-RPC 2.0 の活用 3. 動画広告の開発 4. ユーザーの声と改善への取り組み チラシルを題材とした iOS ネイティブアプリでの動画広告枠開発
  7. 7. Agenda 7 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 1. チラシルとは 👈 2. JSON-RPC 2.0 の活用 3. 動画広告の開発 4. ユーザーの声と改善への取り組み
  8. 8. チラシルとは 8 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. • スマフォでチラシが見られるアプリ • Android / iOS 対応 • 2013/12 リリース • チラシ情報は人力で打ち込み
  9. 9. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. システムの大まかなアーキテクチャ 9
  10. 10. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. システムの大まかなアーキテクチャ 10
  11. 11. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. システムの大まかなアーキテクチャ 11
  12. 12. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. システムの大まかなアーキテクチャ 12
  13. 13. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. チラシル iOS アプリ技術概要 • iOS 7.0 ~ サポート • 言語 : Objective-C・Swift • 新しく書くコードは Swift に寄せつつ、
 変更頻度の高いレガシーコードを適宜 Swift に置き換え • DB : CoreData • View : 機能単位で分割した Storyboard • API Client : AFNetworkingベースのJSON-RPC 2.0クライアント 13
  14. 14. Agenda 14 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 1. チラシルとは 2. JSON-RPC 2.0 の活用 👈 3. 動画広告の開発 4. ユーザーの声と改善への取り組み
  15. 15. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. JSON-RPC 2.0 の活用 • Web API のクライアントとして、内製の JSON-RPC 2.0 クライアント を利用(AFNetworking ベース) • JSON-RPC 2.0 • Request・Response の Data Format に JSON を用いる RPC プロトコル Example 15 --> {"jsonrpc": "2.0", "method": "sum", "params": [1,2,4], "id": "1"} <-- {"jsonrpc": "2.0", "result": 7, "id": "1"}
  16. 16. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. JSON-RPC 2.0 の活用 • Batch request できるところがポイント • 複数のリクエストを配列で渡すと、それぞれのレスポンスが配列で帰ってく る Example 16 --> [ {"jsonrpc": "2.0", "method": "sum", "params": [1,2,4], "id": "1"}, {"jsonrpc": "2.0", "method": "subtract", "params": [42,23], "id": "2"} ] <-- [ {"jsonrpc": "2.0", "result": 7, "id": "1"}, {"jsonrpc": "2.0", "result": 19, "id": "2"} ]
  17. 17. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. JSON-RPC 2.0 の活用 もし Batch request ができなかったら… • 例えばある画面でカテゴリ一覧・商品一覧・ユーザー情報等複数のデー タが必要なケース  → API Call をまとめるために画面専用の API を作る? 17
  18. 18. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. JSON-RPC 2.0 の活用 もし Batch request ができなかったら… • 例えばある画面でカテゴリ一覧・商品一覧・ユーザー情報等複数のデー タが必要なケース  → API Call をまとめるために画面専用の API を作る? 18 サーバーサイドエンジニアが画面毎に最適化された API を作ることになる😨 → 工数もかかるし再利用性もない
  19. 19. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. JSON-RPC 2.0 の活用 Batch request なら • クライアントが自由に Request を組み合わせられる • 柔軟性を保ったまま API Call の回数を削減でき、
 通信コストを下げることができる 😌 • 既存のプロトコルを採用すれば再利用性も⭕️ 19
  20. 20. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Web API におけるその他の工夫 チラシルの Web API は大きく2種類 • エンティティ毎のAPI ( get_advertising 等) • 特定エンティティのデータを全て取得する • 複数エンティティの横断的な更新データ取得 API ( get_updates ) • API 呼び出しに最終更新時刻を付与し、更新差分データのみを取得 • Payload のサイズを抑えられて効率的 20
  21. 21. Agenda 21 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 1. チラシルとは 2. JSON-RPC 2.0 の活用 3. 動画広告の開発 👈 4. ユーザーから見る動画広告
  22. 22. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. チラシルの動画広告 22 • チラシ画面は UICollectionView • 動画広告枠は UICollectionViewCell の サブクラス 1. 前述の Web API 経由でデータ取得 2. 表示 3. 広告の KPI ログを送信 
 という流れで動作する
  23. 23. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. チラシルの動画広告 23 • チラシ画面は UICollectionView • 動画広告枠は UICollectionViewCell の サブクラス 1. 前述の Web API 経由でデータ取得 2. 表示 3. 広告の KPI ログを送信 
 という流れで動作する
  24. 24. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 広告の KPI ? • 広告の KPI = 主に IMP・CTR・CV • 動画だと視聴秒数も有ったりする 24
  25. 25. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. おさらい • IMP = 広告の露出回数 • CTR = クリック率 • CV = 目標の達成回数 • 広告の場合バナーのタップ等による送客である場合が多い 25
  26. 26. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. おさらい これらを計測するためにはログ収集が必要 26
  27. 27. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ログ送信における工夫 チラシルでのロギング • ログも JSON-RPC で送信する (method: send_hadoop_logs) • CoreData で一定数バッファしてから送信することで
 通信のオーバーヘッドを軽減 • 送信のリトライにも応用しやすい • ちょっと前に Cookpad さんが OSS 化した Puree と近い内製機能がある 27
  28. 28. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ログ送信における工夫 ちなみに • ログは に蓄積され、主に で分析を行う • Web インターフェースから分析用のクエリを書けるため、エンジニア以外の メンバーも自由に分析することができる • DAU、RR等のKPIに関わるログやユーザーの操作ログの取得も同様の 仕組みで行う • ユーザーの操作ログは、チラシルがどう使われているか、という分析や、デ バッグにも活用 28
  29. 29. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 動画広告における IMP 計測の難しさ • IMP = 広告の露出回数 • CTR = クリック率 • CV = 目標の達成回数
 29 このいずれか or 組み合わせで課金することが基本なので、プラット フォーム・OS・デバイス間で
 カウントアップされる基準に差があるのは NG ❌
  30. 30. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 動画広告における IMP 計測の難しさ 動画広告は IMP の扱いが難しい… • 広告がユーザーの目に触れる = IMP++ • と一言で言っても、実際の要件はもっと細かく考える必用がある • 再生途中の動画が画面遷移により複数回表示されても IMP 加算したくない • ただし日を跨いだ後に再度表示されたら IMP 加算したい • さらにアプリの状態がバックグラウンド → フォアグラウンドを経て再度広 告が表示されたら IMP 加算したい • ついでに視聴秒数のログも取得したい • etc… 30
  31. 31. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 動画広告における IMP 計測の難しさ • 要件が煩雑化しすぎて OS 間で挙動を えるのが困難に… 😫 • 実際チラシルでも IMP 取得タイミングがズレていて
 分析側でカバーしたことも・・・ • 特に View はプラットフォーム・OS間での差が大きいため
 View の仕様に引きずられる実装は NG → 両OSの開発者が共有できるシンプルな設計が必要 31
  32. 32. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. どう解決したか チラシルでは… 動画の1再生に対してセッションを定義 32
  33. 33. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 動画広告のセッション? • セッション = 1 IMP の有効時間 • セッションの開始と終了をそれぞれ定義 • 開始 • ある動画が再生を開始するとき • 終了 • アプリの状態が Background に遷移した時 • 日付をまたいだ時 • etc… 33
  34. 34. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. イメージ 34
  35. 35. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. どう解決したか • セッションという概念をメンバー間で共有することで • 煩雑だった要件を比較的シンプルな形で想像できるようになった • 本質的な複雑さは残るものの… • 要件の認識齟齬が軽減 • 開発の際の指針になり、OS 間での IMP 計測ズレが解消した 😌 35
  36. 36. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 動画広告特有の難しさ ~ 視聴秒数 ~ • 動画広告の場合、視聴秒数も重要な指標 → スクロールによって、動画が画面外に移動 した状態で再生し続けると正しい視聴秒数が 取れない ❌ 36
  37. 37. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 動画広告特有の難しさ ~ 視聴秒数 ~ • スクロールによる可視 / 不可視の変化に応じ再生 / 停止したい • パッと思いつくのは UICollectionViewDelegate の - collectionView:willDisplayCell:forItemAtIndexPath:
 - collectionView:didEndDisplayCell:forItemAtIndexPath:  しかしこれは数 pt ずれて呼ばれるため精度的に NG ❌ 37
  38. 38. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 動画広告特有の難しさ ~ 視聴秒数 ~ • UICollectionViewLayout の - layoutAttributesForElementsInRect:  内で動画の位置チェックすれば 1pt 単位以上の精度が得られる 😌 38
  39. 39. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 動画広告特有の難しさ ~ エンコーディング~ • 幅広いデバイスで動画広告を表示するには H.264 の Profile と Level を 適切に設定する必用がある • Profile = 動画のデコードに必用な機能集合の定義 • Level = デコーダに求めるパフォーマンスの定義
 (最大解像度、フレームレート、ビットレート) 39
  40. 40. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 動画広告特有の難しさ ~ エンコーディング~ • OS 毎のサポートデバイスから決定するのが望ましいが、多数ある Android 端末全てで対応 Profile を確認するのは困難 • 指定した Profile と Level に対応していない環境では再生出来なかった り、警告ダイアログが表示されたり 😨 40
  41. 41. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 動画広告特有の難しさ ~ エンコーディング~ 41 • チラシルでは、なるべく多くのデバイスをサポートするために iPhone3G でも再生可能な Baseline Profile Level 3.0 を選択 • Google は Baseline Profile を公式にサポートしているが、多数のメーカーが デバイスを製造する都合からか、動作が保証される Level は明示していない 様子
 http://developer.android.com/guide/appendix/media- formats.html#recommendations • 入稿する側でこのレギュレーションに沿ってもらうのは難しい場合も あるため、アプリの運営側でも都度確認(場合によっては変換)した • Profile・Level の確認・変換 • 確認には ffprobe • 変換には ffmpeg
  42. 42. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ここまでのまとめ 42 • 動画広告の IMP 計測は難しい • 画面遷移の度に動画を再読込して IMP++ してしまえば楽ですが… • IMP 定義は広告枠を売った後では変えにくいので慎重に • トライアル期間で安く(or 無償)提供して検証できると安心 • 他にもバナー広告にはない難しさがある • 動画のエンコードはうっかりすると障害に繋がる • 障害に備えサーバー側で動画配信停止できるようにしておくと安心
  43. 43. Agenda 43 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 1. チラシルとは 2. JSON-RPC 2.0 の活用 3. 動画広告の開発 4. ユーザーの声と改善への取り組み 👈
  44. 44. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ユーザーの声と改善への取り組み チラシルではいろいろな方法でユーザーの声を聞いています • アプリ内のお問い合わせ 📨 • Twitter でエゴサーチ 👀 • Store のレビュー 🌟 • チラシ入力の主婦の方にヒアリング 👂 44
  45. 45. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. アプリ内のお問い合わせ • どのアプリにもあるお問い合わせ機能 • お問い合わせはチームの ML に流れる • 機能追加・改善に活かしたり • チラシ入力ミスや機能不具合発生に迅速 に対応したり • 広く活用できる 45
  46. 46. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Twitter でエゴサーチ・Storeレビュー • Twitter でチラシル関連ワードがツ イートされたら bot が Slack にポスト • Store のレビューを定期的に Slack に ポストしてくれる 46
  47. 47. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 改善への取り組み これらの声をどう改善につなげているか • プロダクトバックログに記入
 ※ プロダクトバックログ = サービスの要件リスト • 毎週リファインメントで仕様の明確化・優先度を決める
 ※ リファインメント = 要件リスト項目のレビュー・見直し ことで、ユーザーの声がスルーされることを防げている 47
  48. 48. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. おわり ご静聴ありがとうございました 48 チラシル公式キャラクターのチラ子

×