mixi×Androidの深イイ話

株式会社ミクシィ システム本部技術部 たんぽぽグループ

藤﨑 友樹

agenda

• 自己紹介

• mixiとAndroid

• “mixi for Android”の紹介

• ネイティブアプリ開発のあれこれ

• mixi API SDK for Androidの紹介

• おわりに

自己紹介

藤﨑 友樹 (rai / @tnj)

• システム本部 技術部 たんぽぽグループ

– 2008年から新卒で入社

– 2010年4月からたんぽぽへ

– 前はモバイル開発チーム(mixiモバイル)

たんぽぽグループ

たんぽぽグループ

http://ansaikuropedia.org/wiki/ファイル:刺身の上にタンポポのせる仕事.jpg

たんぽぽグループ

• エンジニアの時間を無駄にしない– 単純な繰り返し作業、非効率的な作業の根絶

– 刺身の上にタンポポのせるとか機械化だろJK

• 具体的には– サービス全体のフレームワークや設計

– セキュリティ

– 事故発生時の原因究明や火消し

• NINJA– 表に姿を見せない

葉っぱに隠れてIRCの中で生息しています

http://alpha.mixi.co.jp/blog/?p=2693

入社以前

• Windows Mobileでツール作ったり– QuicToday

• 待受画面から即検索

– WMbiff• WILLCOMメール専用ツール

– お蔵入りのあれこれ

• その他Windows向けツール、アプリとか– Gyazowin (Gyazo for Windows)

– nazobmplay

俺とAndroid

• Google Developer Day 2009

– GDD Phone もらったので触り始めた

– Javaは、研究で使ったことある程度(SWTとか)

• 最初の印象

– すげー簡単※Win32 & C++比

mixiとAndroid

2010年末

• Android™向けアプリケーション『mixi』の提供を開始

経緯

そもそもの発端

• 連絡先連携のデモ作った

( ・ω・)ﾉAndroidの電話帳乗っ取ったー！

なかなか好評で

• すげー！

• おもすれー！

• ちょっとスクリーンショットくれよ！

2010/09/10mixi meetup 2010

リアル友人一覧

／(^o^)＼ ﾅﾝﾃｺｯﾀｲ

というわけで2010年10月

• Androidプロジェクトがスタート

• 何もないところから出発

– アプリケーション企画

– 開発、運用ノウハウ

• でも30営業日しかないよー！＼(^o^)／

– アジャイル開発もどきで乗り切る

mixi for Androidの開発

開発環境

• ごく一般的– MacBook Pro (Core i5 2.4GHz, 4GB)

– Eclipse• Android Development Tools Plugin

– Android SDK

– 実機

• Continuous Integration– Jenkins (Hudson)

• Android Emulator Plugin

Jenkins (旧Hudson)

• コミット→自動ビルド＆テスト→結果を残す

• テスト傾向の視覚化– モチベーションUp– (対外的に) 安心要素

• 思わぬ不具合を見つけてくれる

転びまくってるけど→

+ Android Emulator Plugin

• ビルド手順中に任意の設定のエミュレータを起動

– Android 2.2 (+Google API)

– WVGA / MDPI

– 日本語

– SDカード: 32MB

+ Matrix Build

• 複数の条件を組み合わせてテスト

– バージョン、言語、画面サイズ、密度

環境の違いによる問題を発見

• Android 2.3

– SecureRandom の生成する疑似乱数列に互換性がなくなってしまった

• Android 3.0

– Context#managedQuery() で例外

• 他

– 言語によってキーイベントが変わるとか(Screen Input Panel の表示有無で挙動違う)

開発要員

• これまで

– 2010年: 2人

– 2011年: ほぼ1人

– mixi API SDK for Android™ は別チームで開発

• これから

– １人増えた！→色々お願い中

– 複数人での効率的な開発手法を模索中

mixi for Androidの紹介

mixi for Android

• 2010/12/24 1.0リリース– 17回のアップデート– 2011/06/29 現在1.3.2

• つぶやき• 更新情報• メッセージ• チェックイン• QRコードでつながる• 写真付き日記投稿• フォト投稿• ウィジェット

Q: SoftBankのAndroid端末をお持ちの方

先行公開機能

連絡先連携

チェックイン地図

タッチでつながる(FeliCa)くるくるmixiフォト(ライブ壁紙)

まもなく皆様にご利用いただけます

SoftBank 007SH (2011/6/17発売)

• 見た目はガラケー

• 中身は Android 2.3

• 全部入り– 16.1M CCD

– FeliCa

– ワンセグ

– 赤外線

– 3D液晶

– 防水

– サブディスプレイ

ソフトキー最適化(長押しもサポート)

mixiセレクト(スマセレ)

フルキーボード端末とかありますよね

• 横レイアウトとかもきちんと対応

– あとキーボードでの操作も確認してます

地味

• 細かい気配り– 初回起動直後に操作説明のオーバーレイ

– 日記・メッセージの下書き自動保存

– 投稿系はすべてバックグラウンドで非同期

大事にしたこと

大事にしたこと

• 使いやすさ

– Androidらしい導線, UI, UX

– 人の最も近い位置に存在するデバイス

• ハードに合わせた最適化もある程度積極的にやる

• 機能の積極的な活用

– Not 「導線の最適化されたmixiブラウザ」

– ブラウザを超えた所にある体験を追求

ある程度

• ソフトキーは一見アレゲですが– android.view.KeyEvent

• 一端末に限られた機能、ではない

ちなみに実装としては

• public class MixiActivity extendsActivity– ソフトキーのハンドリング– 他に

• 共通メニュー• ヘルプの表示• アカウント削除時の処理• etc.

• ある程度– あちこち大変なことに！保守できねえ！…とならない範囲

ネイティブアプリ開発に求められること

スマートフォン向けWeb開発との違い

• フロントエンド ＋ ブラウザ自体の開発

• ネイティブだからこその機能を活用

ブラウザ自体、自分で作る

• 外から見えない部分– 書いたコードの性能が操作性に直結

• バックグラウンド処理の積極活用

• メモリ管理やライフサイクルを意識

• 例：画像キャッシュ

• 外に見える部分– UI/インタラクションの設計、最適化

• コンポーネントの積極的な共通化– 標準から離れる程ユーザーの学習を阻害する

• アニメーションも適度に必要

ちょっと突っ込んだ話

例：ネットワーク上の画像表示

• Web上の画像をダウンロードして表示

– <img>とかない

– 自分で作る

• やること

– URLから画像ダウンロード

– Viewにアサインする

ImageViewUrlLoader

• 欲しいものはこんなの：

loader.loadImage(targetView, “http://img.mixi.jp/img/hogefuga.jpg”);

– 対象の View と Uri を指定したらうまいことやってくれる

• View は ImageView や ImageButton

そうはいっても

• ネットワークからのダウンロード

– ダウンロードに時間が掛かる

– 完了までブロックする

どのぐらい？

引用元：http://www.slideshare.net/googledevjp/an1-tim

Android: 非同期処理は大前提

• メイン(UI)スレッドを止めない– 5秒止めると「応答していません」(ANR)

• High-Performance Android Apps by Tim Bray– 教訓

• ストレージの書き込みは遅い

• ネットワークの利用は遅い

• 常に最悪を想定する;悪いパフォーマンスは、マーケットの悪い評価＆レビューを生み出すことが保証されている

非同期処理を簡単にする道具

• AsyncTask– 「処理中」ダイアログ出す

– バックグラウンドで処理して返す

– 返ってきたものをUIに反映して「処理中」ダイアログ消す

のような処理を簡潔に記述できる

• IntentService– タスクを投げると、バックグラウンドでキューに溜めて一つ一つ処理する

– 全部終了したら自動的に破棄される

キャッシュも欲しい

• 毎回取得は困る

– 例えばListView

• 画面上に表示されるものだけインスタンスを生成

• 表示される段階で初めて必要なものをアサイン

• 一旦作ったViewはリサイクル

非同期ダウンロード？

キャッシュが欲しい？

自分で作れ

∧,,∧(；`・ω ・） ｡･ﾟ･⌒） とにかく作るよ！！/ ｏ━ヽニニフ))しー-Ｊ

作らなきゃいけないもの

• 画像をメモリ上のキャッシュから探す– あったら、即時セット

• キャッシュの最終参照日時を更新

– なければ、タスクをキューに積んで返る

• 非同期キューでの処理– ストレージにないかチェック、あれば返す

– ストレージになければ、ダウンロードキューに積む

作らなきゃいけないもの

• ダウンロードキュー処理– 画像を取得する– 完了したらコールバック

• ってのを 3 並列ぐらいで処理したい

• コールバックされたら– 画像をセット– メモリキャッシュに置く– ストレージに保存

• インデックスを書き込む• 容量が溢れそうだったら要らなそうなものから消す

ぼんやり画にしてみる

NetworkImageManager

ImageCache

TaskProcessor(Queued)

ImageCacheStorage(Queued)

ImageFetcher(Thread Pool)

FileSystem

ImageViewUrl

Loader

SQLite

Network

画像のダウンロード

• 並列でダウンロードしたい

– なんかの拍子に詰まることはよくあること

• でも AsyncTask とか Thread を際限なく作りまくるのは怖い

– キューに積んで、うまいこと振り分けたい

Executor! (or ExecutorService)

• java.util.concurrent

Executor ex = Executors.newCachedThreadPool(3);• スレッドプールを超簡単に作れる

• スレッドの再利用や破棄もうまくやってくれる

ex.execute(new Runnable() { … });

• タスクを投げると空いてるスレッドで処理される

• 空いてないときはキューに積まれる

設計のポイント

• 非同期化

– I/O発生箇所をスレッド分け

• ストレージ、ネットワーク境界

• Executor

– 処理ごとに

• SQLite/Storage Read: Single Thread

• Download: Fixed Thread Pool (3スレッド)

• SQLite Write: Single Thread

引用元：http://www.slideshare.net/googledevjp/an1-tim

I/O発生箇所

設計のポイント

• どこでも使える: 様々なケースを考慮– 複数の View に同じ画像をアサインした場合

• 1 つのリクエストと結果を共有

– View のリサイクルが発生した場合• View と Url の Map を持って不一致を抑止

• そこそこ高速に動作させることを意識– DB への Write (insert, touch, delete) は、ある程度トランザクションにまとめる

– setPriority()

でもなー

なんというか

• 車輪の再発明感がすごい– こういうのいちいち書いてられない感

• 一応、既存ライブラリもあります– Droid-Fu: WebImageViewhttps://github.com/kaeppler/droid-fu

• Open Source !– 今回のも、そのうち切り出して公開したい

ついでにちょっと困った話

• しばらく使い続けた後で

– いまいちキャッシュされてない気がする

– というか、すぐに容量が溢れている

• 調べてみた

– 原因： 嘘 Expires

嘘 Expires

Expires: Tue, 05 Jul 2028 14:19:28 GMT

– 遠い未来の Expires

– ワンタイムURLでこれだと最悪

何が起きるか

• キャッシュが溢れたときの破棄戦略

1. 既に Expires の日時を迎えた画像を破棄

2. 最近参照されていない画像を破棄

• もう二度と使われない画像によって、再利用される可能性のある画像が追い出されてしまっている

対処法

• Expires の値に上限を設定

– 消極的

閑話休題

開発者が考えなきゃいけないこと

• 画面構成や導線設計、コントローラーよりも下の層の開発を多分に含む

– フレームワークで吸収できるかもしれない層

• それよりも

ネイティブ機能の活用

• ブラウザの外でのインタラクション– プッシュ (通知だけじゃないよ！)

– ウィジェット、ライブ壁紙

– 各種イベントや他アプリをトリガとした導線の設計

• プラットフォーム内の連携– コンテンツ（テキスト、写真、動画）

– 人（連絡先）• ID Aggregation

ネイティブ機能の活用 (cont’d)

• 各種センサの活用

– GPS

– カメラ

– マイク、照度、地磁気、加速度、FeliCa/NFC、赤外線、電話、ネットワーク、など

– トリガにもなる

ネイティブクライアント≒ スタンドアロンアプリケーション

• 見せ方を変えるだけ、ではなく

– クラウド上の情報の見せ方以外にも影響

• サービスのモデル自体も変化 (プッシュなど)

• 環境の違い

– すべてをユーザーの手の上で動作させる

• 多岐にわたる環境に対応(ログ集めるの大変)

Webの延長、とは考えない

現状の「スマートフォン開発」

• 一緒くたにされがち

– iPhone

– Android

– Windows Phone

• 実際には、導線も設計思想も違う

例：写真のアップロード

iPhone

1. アプリ起動

2. アップロード画面を開く

3. 写真の追加

4. 一覧から写真を選択

5. アップロード

Android

1. ギャラリーで写真を表示

2. 「共有」

3. アプリを選択

4. アップロード

思想の違い

• 導線だけでなく– バックグラウンドで可能な処理

– ユーザーへのイベント通知手段

– コンテンツの共有手段

– etc.

• プラットフォーム毎にできることが違う– でもユーザーにとっては唯一の手段

– 「Android版＝iPhone版のサブセット」では、いい体験を提供できない

スマートフォン開発者に要求されること

書ける

• GUI プログラミング

– イベントドリブンなコード

– 最近は JS で書き慣れてる？

• マルチスレッド

– ばんばん活用します

念頭に置く

• ライフサイクル– いつ生まれて、休んで、戻って、死ぬか

– ゴミを残さない

• 空間効率(メモリ・ストレージ)– PCほどの余裕はない

• 時間効率(＆消費電力)– バッテリーが命

受け入れる

• 頻繁な状態変化– 電話が掛かってきてフォーカスを奪われる

– ネットワーク状態が悪くて通信できなくなる

– バッテリー減少して終了される

• 多様性– 様々なバージョンのプラットフォーム

– 様々な端末

– リフレクションやマトリックステストで対応

進化

• 成長中のプラットフォーム

– 頻繁に追加される新たな機能

– 追い続けながら、新しいサービスを創造

やってみないとわからないことだらけ

mixi API SDK for Android™

やってみましょう

mixi API SDK for Android™

• 何ができるの– Android ネイティブ版 mixi アプリが作れる

– Graph API を叩くのにも使える

• メリット– ユーザーのログイン手続きを省略

• ユーザーは同意ボタンを押すだけ

• 公式クライアントがサポートしています

– OAuth 周りをハンドリングしなくていい• トークンのリフレッシュも自動で行います

How To Use mixi Graph API on Android

1. http://developer.mixi.co.jp/

– mixi API SDK for Android™ ダウンロード

2. Eclipse でプロジェクトとして開く

3. 新規Androidプロジェクトを作成

4. ライブラリとして参照を追加

5. 1. のサンプルの認証認可コードをコピペ

6. 1. の利用方法のページから好きなコードスニペットをコピペ

まだ改善点はたくさんありますがご活用ください！

おわりに

まとめ

• mixi×Android はまだ半年ちょっと

• スマートフォン開発は色々できて楽しい

• mixi API SDK for Android使ってね！

考えているもの

現代人の常に30cm以内に存在するコミュニケーションデバイスとして

あるべきもの

「スマートフォン」にできること

• 生活を変える

– 「コミュニケーション」に新しい概念を提供

– 電話とメールとWebだけ、なわけない

• 概念を変える

– いつでもどこでも

– IP Reachableな多機能デバイスを

– 持ち歩く時代

We Are Hiring!

JOIN US!

mixiではエンジニアを募集しています

– Android大好きやで！って人

– 未来はiPhoneだ！って人

– いやWindows PhoneがTabletがWebOSが(ry

もちろんWebやインフラエンジニアも!

career.mixi.co.jp