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

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Jan 29, 2016
Satoshi Takano
EC事業本部サービス開発事業部 
プロダクトデザイングループ 
DeNA Co., Ltd.
チラシルiOSでの 
広告枠開発
1

自己紹介
• EC事業本部サービス開発事業部 
プロダクトデザイングループ
• フロントエンドエンジニア 
（iOS / Web）
• 2013 DeNA入社
• 2013/10 ~ 旅行系 Web メディアの
サーバーサイド
• 2014/10 ~ チラシルのiOS
2
Satoshi Takano

今日お話しすること
3
1. チラシルとは
チラシルを題材とした iOS ネイティブアプリでの動画広告枠開発

4
2. JSON-RPC 2.0 の活用

5
3. 動画広告の開発

6
4. ユーザーの声と改善への取り組み

Agenda
7
1. チラシルとは 👈

チラシルとは
8
• スマフォでチラシが見られるアプリ
• Android / iOS 対応
• 2013/12 リリース
• チラシ情報は人力で打ち込み

システムの大まかなアーキテクチャ
9

10

11

12

チラシル iOS アプリ技術概要
• iOS 7.0 ~ サポート
• 言語 : Objective-C・Swift
• 新しく書くコードは Swift に寄せつつ、 
変更頻度の高いレガシーコードを適宜 Swift に置き換え
• DB : CoreData
• View : 機能単位で分割した Storyboard
• API Client : AFNetworkingベースのJSON-RPC 2.0クライアント
13

Agenda
14
2. JSON-RPC 2.0 の活用 👈

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"}

• 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"}
]

もし Batch request ができなかったら…
• 例えばある画面でカテゴリ一覧・商品一覧・ユーザー情報等複数のデー
タが必要なケース
→ API Call をまとめるために画面専用の API を作る？
17

もし Batch request ができなかったら…
• 例えばある画面でカテゴリ一覧・商品一覧・ユーザー情報等複数のデー
タが必要なケース
→ API Call をまとめるために画面専用の API を作る？
18
サーバーサイドエンジニアが画面毎に最適化された API を作ることになる😨
→ 工数もかかるし再利用性もない

Batch request なら
• クライアントが自由に Request を組み合わせられる
• 柔軟性を保ったまま API Call の回数を削減でき、 
通信コストを下げることができる 😌
• 既存のプロトコルを採用すれば再利用性も⭕️
19

Web API におけるその他の工夫
チラシルの Web API は大きく２種類
• エンティティ毎のAPI ( get_advertising 等)
• 特定エンティティのデータを全て取得する
• 複数エンティティの横断的な更新データ取得 API ( get_updates )
• API 呼び出しに最終更新時刻を付与し、更新差分データのみを取得
• Payload のサイズを抑えられて効率的
20

Agenda
21
3. 動画広告の開発 👈
4. ユーザーから見る動画広告

チラシルの動画広告
22
• チラシ画面は UICollectionView
• 動画広告枠は UICollectionViewCell の
サブクラス
1. 前述の Web API 経由でデータ取得
2. 表示
3. 広告の KPI ログを送信
 
という流れで動作する

チラシルの動画広告
23
• チラシ画面は UICollectionView
• 動画広告枠は UICollectionViewCell の
サブクラス
1. 前述の Web API 経由でデータ取得
2. 表示
3. 広告の KPI ログを送信
 
という流れで動作する

広告の KPI ?
• 広告の KPI = 主に IMP・CTR・CV
• 動画だと視聴秒数も有ったりする
24

おさらい
• IMP = 広告の露出回数
• CTR = クリック率
• CV = 目標の達成回数
• 広告の場合バナーのタップ等による送客である場合が多い
25

おさらい
これらを計測するためにはログ収集が必要
26

ログ送信における工夫
チラシルでのロギング
• ログも JSON-RPC で送信する (method: send_hadoop_logs)
• CoreData で一定数バッファしてから送信することで 
通信のオーバーヘッドを軽減
• 送信のリトライにも応用しやすい
• ちょっと前に Cookpad さんが OSS 化した Puree と近い内製機能がある
27

ログ送信における工夫
ちなみに
• ログはに蓄積され、主にで分析を行う
• Web インターフェースから分析用のクエリを書けるため、エンジニア以外の
メンバーも自由に分析することができる
• DAU、RR等のKPIに関わるログやユーザーの操作ログの取得も同様の
仕組みで行う
• ユーザーの操作ログは、チラシルがどう使われているか、という分析や、デ
バッグにも活用
28

動画広告における IMP 計測の難しさ
• IMP = 広告の露出回数
• CTR = クリック率
• CV = 目標の達成回数 
29
このいずれか or 組み合わせで課金することが基本なので、プラット
フォーム・OS・デバイス間で 
カウントアップされる基準に差があるのは NG ❌

動画広告は IMP の扱いが難しい…
• 広告がユーザーの目に触れる = IMP++
• と一言で言っても、実際の要件はもっと細かく考える必用がある
• 再生途中の動画が画面遷移により複数回表示されても IMP 加算したくない
• ただし日を跨いだ後に再度表示されたら IMP 加算したい
• さらにアプリの状態がバックグラウンド → フォアグラウンドを経て再度広
告が表示されたら IMP 加算したい
• ついでに視聴秒数のログも取得したい
• etc…
30

• 要件が煩雑化しすぎて OS 間で挙動をえるのが困難に… 😫
• 実際チラシルでも IMP 取得タイミングがズレていて 
分析側でカバーしたことも・・・
• 特に View はプラットフォーム・OS間での差が大きいため 
View の仕様に引きずられる実装は NG
→ 両OSの開発者が共有できるシンプルな設計が必要
31

どう解決したか
チラシルでは…
動画の１再生に対してセッションを定義
32

動画広告のセッション？
• セッション = 1 IMP の有効時間
• セッションの開始と終了をそれぞれ定義
• 開始
• ある動画が再生を開始するとき
• 終了
• アプリの状態が Background に遷移した時
• 日付をまたいだ時
• etc…
33

イメージ
34

どう解決したか
• セッションという概念をメンバー間で共有することで
• 煩雑だった要件を比較的シンプルな形で想像できるようになった
• 本質的な複雑さは残るものの…
• 要件の認識齟齬が軽減
• 開発の際の指針になり、OS 間での IMP 計測ズレが解消した 😌
35

動画広告特有の難しさ ~ 視聴秒数 ~
• 動画広告の場合、視聴秒数も重要な指標
→ スクロールによって、動画が画面外に移動
した状態で再生し続けると正しい視聴秒数が
取れない ❌
36

• スクロールによる可視 / 不可視の変化に応じ再生 / 停止したい
• パッと思いつくのは UICollectionViewDelegate の
- collectionView:willDisplayCell:forItemAtIndexPath: 
- collectionView:didEndDisplayCell:forItemAtIndexPath:
しかしこれは数 pt ずれて呼ばれるため精度的に NG ❌
37

• UICollectionViewLayout の
- layoutAttributesForElementsInRect:
内で動画の位置チェックすれば 1pt 単位以上の精度が得られる 😌
38

動画広告特有の難しさ ~ エンコーディング~
• 幅広いデバイスで動画広告を表示するには H.264 の Proﬁle と Level を
適切に設定する必用がある
• Proﬁle = 動画のデコードに必用な機能集合の定義
• Level = デコーダに求めるパフォーマンスの定義 
（最大解像度、フレームレート、ビットレート）
39

• OS 毎のサポートデバイスから決定するのが望ましいが、多数ある
Android 端末全てで対応 Proﬁle を確認するのは困難
• 指定した Proﬁle と Level に対応していない環境では再生出来なかった
り、警告ダイアログが表示されたり 😨
40

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
• 動画広告の IMP 計測は難しい
• 画面遷移の度に動画を再読込して IMP++ してしまえば楽ですが…
• IMP 定義は広告枠を売った後では変えにくいので慎重に
• トライアル期間で安く（or 無償）提供して検証できると安心
• 他にもバナー広告にはない難しさがある
• 動画のエンコードはうっかりすると障害に繋がる
• 障害に備えサーバー側で動画配信停止できるようにしておくと安心

Agenda
43
4. ユーザーの声と改善への取り組み 👈

ユーザーの声と改善への取り組み
チラシルではいろいろな方法でユーザーの声を聞いています
• アプリ内のお問い合わせ 📨
• Twitter でエゴサーチ 👀
• Store のレビュー 🌟
• チラシ入力の主婦の方にヒアリング 👂
44

アプリ内のお問い合わせ
• どのアプリにもあるお問い合わせ機能
• お問い合わせはチームの ML に流れる
• 機能追加・改善に活かしたり
• チラシ入力ミスや機能不具合発生に迅速
に対応したり
• 広く活用できる
45

Twitter でエゴサーチ・Storeレビュー
• Twitter でチラシル関連ワードがツ
イートされたら bot が Slack にポスト
• Store のレビューを定期的に Slack に
ポストしてくれる
46

改善への取り組み
これらの声をどう改善につなげているか
• プロダクトバックログに記入 
※ プロダクトバックログ = サービスの要件リスト
• 毎週リファインメントで仕様の明確化・優先度を決める 
※ リファインメント = 要件リスト項目のレビュー・見直し
ことで、ユーザーの声がスルーされることを防げている
47

おわり
ご静聴ありがとうございました
48
チラシル公式キャラクターのチラ子

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (14)

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

Ähnlich wie チラシルiOSでの広告枠開発 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

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