アプリ開発作業の効率改善

>アプリ開発作業の効率改善

2015/07/09

2015/07/09

日経電子版 ×Sansan アプリ開発プロジェクト成功への道〜アプリ開発者勉強会 Vol.3

Sansan 株式会社　辰濱健一

Copyright © 2014 Sansan, Inc. All rights reserved.

>Agenda

2

• 自己紹介

• テスト自動化

• テスト以外の作業の自動化

• デザイナとの連携

• iOS / Android で同じ仕様のアプリを効率良く作るための工夫

>自己紹介

2015/07/09


>自己紹介

4

• 辰濱健一（　　 kenichi.tatsuhama ）

• Sansan 株式会社 Sansan 開発部

• 神山ラボ勤務（徳島現地採用）

• Android 版 Sansan アプリ実装担当＆アプリチームリーダ

• 通勤電車を避け、 3 社連続徳島勤務中

• 趣味

• 音楽

• エレクトーン、トランペット、篠笛（阿波踊り）

• 旅行

• 黒部立山アルペンルートや伊豆諸島がお気に入りスポット

• 次は小笠原諸島に行きたい


>Sansan 株式会社

5

モバイルアプリエンジニアは、 2 つの事業部で 6 人のメンバー

・ Sansan … 2 名

・ Eight … 4 名


>神山ラボ

6

• 築 70 年の木造古民家（ 3 棟）

• 略歴

• 2010 年設置

• 〜 2013/11: 合宿所

• 2013/11 〜 : 常駐メンバーのいる開発拠点に

• 家具家電、畑付き、風呂トイレセパレート

• 家賃：数万円 / 月

• インターネット接続：光回線

• 最寄り駅まで徒歩 15 分

• 改装 OK 物件


>神山での仕事（良いこと）

7

• 通勤が楽、静かで広々していて、高いパフォーマンスの状態で仕事に集中できる

• 業務上必要なコミュニケーションは、 Github,

Skype, Slack 等のツールで意外となんとでもなる


>神山での仕事（難点）

8

• ネットワーク状態にコミュニケーションが左右される

• 開発チーム外の人に直接話しかけられない

• 視察・取材などの業務も伴う

• 自然環境との戦い（虫、カビ、寒さ…）

>テストの自動化

2015/07/09


>テスト自動化との関わり

10

• 前々職時代

• 正確さと性能が求められるプロダクト（ 25 名チーム）において、高速化担当にアサインされる誰の箇所であれ、とにかく遅い箇所は改修して、高速化することがミッション

• 但し、品質面でも性能面でもデグレードは許されない

• QA チームはあったが、細かい部分まで手は回らない…

• なのにテスト環境・パフォーマンス観測環境がない。。。

　→　 UWSC を用いて、 UI 自動テストを導入


>テスト自動化との関わり

11

• Sansan 株式会社にて

• iOS 担当： 1 名、 Android 担当： 1 名

• 法人向け Sansan サービスには Web 版があるものの、アプリの利用促進がなされている

• 海外展開においては、開発のスピード感が求められている

• 毎年新しい OS 、新しい機種での動作確認が必要

• なのに QA チームはない…→　スマホアプリでも UI 自動テストの導入を！


>スマホアプリの自動テストライブラリ

12

Android 専用

Robotium

monkeyrunner

Espresso

など…

iOS 専用

KIF

Kiwi

など…

ハイブリッド

Appium

Calabash

MonkeyTALK

など…


>選定したライブラリ

13

• Android 版 … Robotium

• Android 実装と同じ Java 言語で記述

• アプリケーション内部のオブジェクトを参照できる

• UI に見えない内部の値のチェックもできる

• DB にもアクセスできるのでテストケースを動的生成できる→　サーバ DB 状態の変更にも強い

• ただし、リリースビルドでは使えない…※リリースビルドでも使える appium などのライブラリもある

• iOS 版 … KIF

• 社内他チームでも先行調査をしており、ノウハウ共有のためにライブラリを合わせた


>テスト項目

14

• まずは「広く浅く」のリグレッションテストを自動化

• 主要画面の主要機能のみ自動化

• 例）

• ログイン画面

• ログインできること　←　これだけ

• パスワードが空の時にエラーが表示されること　←　しない

• 未登録ユーザの時エラーが表示されること　←　しない

• ユーザ一覧画面

• ユーザタップで名刺一覧画面に遷移すること

• 名刺一覧画面

• 名刺タップで名刺詳細画面に遷移すること

• バックキー押下でユーザ一覧画面に戻ること


>テストコードの例

15

ログイン処理

メールアドレス入力欄を取得

パスワード入力欄を取得

メールアドレスを入力

パスワードを入力

ログインボタンを押す

テストライブラリをラップして可読性確保！


>デモ動画

16

• 2014/11 時点の動画です

• http://youtu.be/scY_RPgfxeY

• 4 分ぐらいありますが、発表時間の都合上ちょっとだけ…

http://youtu.be/scY_RPgfxeY


>自動テスト導入の効果

17

• デグレードの早期発見・防止につながった

• 実際に開発中のミスを検出し、デグレードを未然に防いだ

• 開発サーバのデグレードを検出した

• 大規模な修正も行いやすくなった

• 何度でもテストを簡単に実行できる

• 作業効率 UP

• 離席中・昼食中・ミーティング中にでもテストができる

• テストに割く時間を開発に充てることができる

• 新しい OS が出てもテスト工数を割かなくて良い


>アドバイス

18

• UI テストは仕様変更に弱いので、書きすぎない

• SLEEP じゃなくて WAIT で

• 「通信が終わったら」「ぐるぐるが消えたら」…

• 操作の限界はあるので、適度にあきらめること• 届いたメールの URL をクリックしてブラウザに…！？

• アプリを終了させて再起動した時に…？

• テストの目的で分割する• スモークテスト … 広く浅く、最低限の確認

• 機能テスト … その機能の本格的な確認

• スクリーンショット収集

• パフォーマンス計測


>さらなるテストに向けて…

19

• 操作中に取っている各種ログの活用

• テスト専用使い捨て環境の用意


>推移時間（イメージ）

20

• パフォーマンス改善の結果確認、性能デグレの検出ができる（かも？）

• 通信状態やサーバ状態に大きく左右される気がする…


>通信回数の分析

21

呼び出し毎に API 名と実行時間を csv ファイルに出力

Excel のピボットテーブルで集計

iOS / Android で同じ仕組みを入れれば、同じ操作で API 呼び出しの違いがわかる！

そんなに呼び出す必要あるの…？

サーバ負荷削減のためのボトルネック分析が容易になる

Excel マクロ


>通信回数の分析（推移）

22

さっきのデータを実行毎に集計する呼び出し回数削減施策導入


>テスト用の使い捨て環境

23

• 誰もが触る開発環境で自動テストを行っており、他者によるデータの追加・削除が行われる

• そのデータの存在を前提としているテストコードのデータが削除されていて失敗したり、件数が増えて同じ環境でのパフォーマンス計測が行えない

• →　 Docker を用いて、テスト用に毎回同じ環境を作れる仕組みを導入

• 特殊なデータや条件による過去の不具合が再現しないテストも確認可能に！

>テスト以外の作業の自動化

2015/07/09


>テスト以外の作業の自動化

25

• 本番ビルド（は、もちろんなので省略）

• スクリーンショット収集ツール

• イベントトラッキング仕様書と実装のギャップの洗い出しツール

• iOS の未使用文言洗い出しツール

• デザインパーツ向けツール


>スクリーンショット収集ツール

26

• 自動テストライブラリを使って、各画面に遷移しスクリーンショットを保存するだけのテストを実行

• 言語環境（日本語 / 英語）を切り替えてキャプチャ

• 色んな端末で実行して結果を集約


>スクショ一覧

27

画面名→

画面名→

画面名→

Nexus4 Nexus5 デザイン指示画像（期待値）

※元サイズが違うけど、　今は同じサイズで　表示されている

目で比較する！

デザイナのチェックや意図しないレイアウト崩れの確認が楽になりました


>イベント仕様が実装されているかのチェック

28

• Google Spread Sheet にイベントトラッキング用のイベント名一覧の仕様書がある

• その 1 つ 1 つのトラッキングイベント名を、ソースコード内全検索してヒットするかチェック

• 仕様にあるが実装にないイベントの検出が容易になり、実装漏れの検出が可能に！

• Android / iOS 両方に適用可能

※ Ruby でツールを自作Android iOS


>iOS 未使用文言洗い出しツール

29

• 基本的には、前述と同じ仕組み。

• Localizable.string のキー部分を抜き出して、ソースコード全行検索

（ Android の Lint みたいなのがあればいいのに…）


>デザインパーツ向けツール１

30

「 PNG や JPEG 画像を一括最適化するツール」

• 最適化をかけると、

• アプリサイズの削減

• Web ページの場合、通信量の削減＆高速化

• Git リポジトリの不可削減などのメリットがある

• 一括最適化ツールはあるが、 TinyPNG が圧縮率で勝っているので、 TinyPNG の API にフォルダ以下全部渡すツールを Ruby で作成


>デザインパーツ向けツール２（製作途中…）

31

「サイズチェックツール」

• Android では、 xh, xxh などフォルダに分けて、それぞれの画像をデザイナから受け取っている

• 「 xh フォルダにあるけど、 xxh フォルダにない」

• 「 xh/icon.png と、 xxh/icon.png のサイズに矛盾がある」

• これらを検出するツールを作成中…

（まぁ、 Lint がやってくれますけどね…）

>デザイナとの連携

2015/07/09


>読み合わせ会

33

• 各種ガイドラインの読み合わせ会を実施

• Android は「マテリアルデザインガイドライン」

• iOS は「ヒューマンインターフェイスガイドライン」

• 参加者は、開発者＆デザイナ

• ただ読み合わすだけではなく、実機を持って参加

• 「このアプリのこの動きがそれだ！」

• 「このアプリのこの動きはガイドラインに反してるね」など開発者＆デザイナでライトにに話をしながら進める

• デザイナの作業の中で自動化できる箇所はサポート

• 前述の一括最適化など…

>iOS / Android で同じ仕様のアプリを効率良く作るための工夫

2015/07/09


>先行実装と移植

35

• 例） iOS で先行実装して、 Android は移植する

• 効果• 移植する側の OS 担当者は、試行錯誤の必要がない

• 設計が似ることによる、コードレビューや調査のコストダウン

• でも、スケジュールによっては難しい…• 規模が大きいけど、同時リリースしたいときとか

• 可能なら、機能担当制• この機能は A さん担当、 iOS も Android も作る

• iOS & Android 両方のスキルが必要…


>UI 先行とロジック先行

36

• 対応工数が 1ヶ月＆同時リリースしたい改修で実施中

• iOS では、 UI モックを先行作成

• Android では、 API との通信部分やエラーチェックなどのロジックを先行実装

• 後の実装は双方を参考に

• 効果• モックにより、 UI/UX の手戻りは最小限に

• 仕様考慮漏れの早期洗いだしに


>ログの活用

37

• iOS / Android とも、開発版のみで共通のログを出力する

• 例）

• 通信（パラメータも含む）

• イベントトラッキング

• これらを突き合わせることで、相互の動作確認・実装差異の確認ができる

各種ログ

突き合わせ


>同じ操作を iOS / Android で行う

38

• 基本的に同じ仕様なので同じ結果になるはず…

同じ検索文字列で、同じ順番で検索結果が得られているかどうか（左： Android 、右： iOS ）

>最後に…

2015/07/09

Copyright © 2014 Sansan, Inc. All rights reserved. 40

人数が少ないので、作業効率化が必要でした。

逆に、人数が少なかったから、効率化について色々と取り組み、開発作業の効率化について取り組むことができました。

さらに開発スピードを上げるためには…

>最後に…


41

Sansan は一緒に新しい価値を作っていく仲間をさがしています。

Ruby, Ruby on Rails（ Web アプリケーション）

C#， ASP.NET MVC（ Web アプリケーション）

iOS / Android アプリ

- 個人向け名刺管理アプリ「 Eight」

- 名刺データ化分散処理システム

- 法人向け名刺管理サービス「 Sansan」

- 法人向け名刺管理サービス「 Sansan」

- 個人向け名刺管理アプリ「 Eight」

エンジニア募集中

Sansan 採用検索

[email protected] まで

お気軽にご連絡ください。

興味のある方は


>関連資料

42

• 「 Robotium を使った UI テストとレイアウト確認の効率化」http://www.slideshare.net/kenichitatsuhama/robotium-ui

もう少しだけ詳しい、自動化の話

• 「 Ruby を使ったスマホアプリの UI テスト」http://www.slideshare.net/kenichitatsuhama/rubyui

リリースビルドでも使える自動テストライブラリを調べた話

http://www.slideshare.net/kenichitatsuhama/robotium-ui

http://www.slideshare.net/kenichitatsuhama/robotium-ui

http://www.slideshare.net/kenichitatsuhama/rubyui

Software

アプリ開発作業の効率改善