Voicepic Slides presented at Fukui Mashup Seminar 2013

1. Voicepic – Project Manager
Manabu Shimobe
@Manabu_GT
http://voicepic.me

2. 簡単に自己紹介
下邊 学 → しもべ まなぶ
※“しもなべ”ではありません！！
• 2009年5月にジョージア工科大学を卒業
• 2009年に新卒で日本マイクロソフトにエンジニアとして入社
• 2010年7月にUIEvolution K.K.に転職、現在に至る
• Voicepicではサービスの企画、プロジェクト全体のマネジメント、
サーバーサイド以外の開発全般を担当(主にiOS、Flash)
2

3. Agenda-1
1. Voicepicの簡単な紹介
2. システム構成
3. 開発体制＆開発ワークフロー
4. Crashlyticsなど、クライアントで使っている外
部サービスやライブラリの紹介
3

4. Agenda-2
5. 開発において苦労した点
1. 他SNSサイトでのVoicepicの見え方
1. Facebook – OGP Custom Action and Object
2. Twitter – Twitter Player Card
2. ２重アップロード問題
6. ブラッシュアップ、PV作成の際のエピソード、海外
のサイトへのレビュー依頼の話など
7. Q&A
4

5. Voicepic
写真+音声=
写真と音声を撮る（録る）
共有する 送る
※対応したい ※準備中
5

6. とりあえず見せます
 シンプルでわかりやすいUXデザイン
 サーバ、アプリで最適化された快適なパフォーマンス
6

7. システム構成
(DNS) – Route53
CloudFront
(Load Balancer) - ELB
(Storage)
S3 (Front)
…….. EC2
Nginx, Node
----------------------------------------------------------------------------------
Parse.com
Push Notifications
Cache RDS - MySQL
ElastiCache Node
7

8. 開発体制（ピーク時）
• PM
• 1名（自分）
• iOS
• 2名（自分＋1名）
• Website
• 1名
• Server
• 1名
• Design
• 1名 合計５人！
8

9. 開発ワークフロー
For iOS
Build
Git push & run unit test Distribute
&
Pull request
for code review Test Result
Developer/Designer
Jenkins CI
Assign
Complete/Reject Deploy
Project Management Tool
9

10. 使用しているライブラリなど
Ｃｒａｓｙｌｙｔｉｃｓ – リアルタイムバグトラッキング
10

11. 使用しているライブラリなど
iRate – レビュー依頼のダイアログを表示してくれる
評価の数は
ソーシャルプルーフ
として
サイト上に表示
ウェブサイト
表示のタイミングをカスタマイズ可能
Voicepicだと20回以上コンテンツを再生すると表示される
11

12. 使用しているライブラリなど
JSONKit – 高速なJsonParser
12

13. 使用しているライブラリなど
• ASIHttpRequest – 通信系
• 2011/5以降、更新が止まっている
• ARC非対応
• なので、今ならAFNetworking等を使うことを検討すべし
• EGOTableViewPullRefresh – よくある引っ張って更新を実現
• iOS6だと標準でUIRefreshControl使って実現可能
• SVProgressHUD – 読み込み中表示
13

14. Voicepic on Facebook
Facebookでの表示
モバイルアプリ
Web
14

15. Custom Action and Custom Object - 1
• 申請前に一度投稿する必要あり
• アクションの詳細手順が必要
15

16. Custom Action and Custom Object - 2
16

17. Voicepic on Twitter
モバイルTwitter公式アプリ
PC – Twitterウェブサイト
17

18. Twitter Player Card
• Twitter指定のMetaタグをHTMLページに埋め込む。
• 実際に使うにはTwitterのApproveが必要
• Photo Cardに比べ、Player Cardは審査に通りにくい
• Voicepicの場合、色々ありSubmitからApproveまで約2ヶ月弱かかった
実際にサイトで使われているもの
をお見せします。
18

19. ２重アップロード問題
画像＋音声アップロード
× 保存成功
アプリ サーバー
• アプリ側は失敗と判定し、失敗ダイアログを表示する
• ユーザーは失敗したと認識するので、投稿をリトライする
• 同じコンテンツが再びサーバーにアップロードされる
• 投稿一覧を見ると同じ投稿が２個表示されてしまう
19

20. 解決策
画像、音声のバイト列からMD5
チェックサムを生成し、サーバーに送付
画像＋音声アップロード
× 保存成功
サーバー
アプリ
Memcacheにユーザーの過去30分の投稿のチェックサムを保存。
既に同一のがある場合は新規にレコードを作成せずに上書きする
20

21. ログイン率問題
Facebookログインのみ＆認証ダイアログが2枚のとき
→半分以上の人がログインしてくれず ｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡
１．ログイン画面 ２．認証ダイアログ１枚目 ３．認証ダイアログ２枚目
Facebookのみという時点であきらめる人も
メールやレビューでFacebook以外のオプション ここで離脱する率 → 52%
を追加して欲しいというリクエストが届く 半分以上の人がログインしてくれない 21

22. ログイン率問題-改善１
ログインしなくてもコンテンツを体験でき、
どんなサービスなのか理解できるように
22

23. ログイン率問題-改善２
Twitter, Emailでのログインにも対応 リクエストするPermissionは最低限に！
ユーザーのログイン方法の割合
離脱率が約３５％に低下。
Facebook – 43%
（約１５％の改善）
Email – 33%
Twitter – 24% 23

24. PVの話
まずは見てください
24

25. PVの話
• PathっぽいPVを作ってみたいというデザイナの発言から
始まり、自分も乗り気にｗ
• Mashup Awardで○回優勝しないと回収できない制作費
○百万円だと？
来年は個人で出場
して回収してこい
By 社長
25

26. PVの話
• 外国人子役タレント、母親役のオーディションにも参加
• ５、６人の候補から面接で決定
• 日本人より１．５～２倍のギャラ
• ビデオの中の英語はNativeの友人にも相談して決定
• 喋りは制作会社に頼むと高いので、職場の同僚が
通っている英会話スクールの先生達にお願いした
26

27. 海外のメディアで取り上げられるには？
Voicepicの掲載実績
• AppAdvice
http://appadvice.com/appnn/tag/voicepic
“Instagram with Sound”
• GeekWire
http://www.geekwire.com/2012/add-audio-favorite-photos-voicepic-app/
• Mashable
http://mashable.com/2012/06/13/kid-friendly-road-trip-apps/?sf4657559=1&replytocom=18192655
• Tech in Asia
http://www.techinasia.com/voicepic-iphone-app/
• Theiphoneappreviewとか
載った日にはダウンロード数が１００以上増えた！
流入効果は一日程度。
27

28. どうやったか？
• レビューサイトが用意しているレビュー依頼用の
フォームからコンタクト
• 記者や特定のレビューアーに直接コンタクト
全部で１０人くらいに送りました
28

29. ちょっとしたアドバイスなど－１
• 間違った英語を書いて送るくらいなら、gengo.comに
依頼して翻訳してもらおう
• 記者に直接送る場合は、その人が過去にどんなジャンルの
アプリの記事を書いているかなど確認しよう
• 明確な理由がないならHTMLでなくテキストメールにしよう
• 本文にまだ公になっていない今後の展開についてとかを
記載しとくとプラス
29

30. ちょっとしたアドバイスなど－２
• AppStoreでFeaturedされたとか、賞をとったとかは
アピール材料になる
• 記者がアプリをダウンロードしなくてもアプリの魅力を
伝えられる動画のリンクを含めよう（操作ビデオとか）
• 記事に使えそうなアセット類（ロゴ、スクリーンショット）は
zipにでもまとめてそれのリンクも含めよう
• 最初の１、２センテンスでアプリの概要を伝えよう
• 何が面白い・ユニークなのか、なぜユーザーはこのアプリを
使おうと思うのかなど、簡潔にポイントを書く
30

31. ちょっとしたアドバイスなど－３
当たり前だけど、絶対にやってはいけないこと
• 同じ内容のものを繰り返し送る
• 単にコピペしたものをそのまま別の記者に送る
• メールの先頭で記者の名前をスペルミス
• AppStoreのリンクを記載しない（記者はわざわざ検索してくれない）
31

32. ちょっとしたアドバイスなど－４
日本在住の記者
• Serkan Toto (TechCrunch)
• Rick Martin (Tech in Asia, The Japan Times)
アジア/日本のスタートアップに興味があるTechCrunchの記者
• John Biggs (US)
• Kim Mai Cutler (US)
• Victoria Ho (Asia)
• Catherine Shu (Asia)
32

33. “音で彩る、特別な一枚を”
33