株式会社リクルートテクノロジーズITマネジメント統括部

ITマネジメント2部スマートデバイスグループ

樋口 勝彦

リクルートにおけるFirefox OSアプリへの取り組み

～0.8人月で出来るアプリ!?～

2015/4/14

関東 Firefox OS 勉強会 10th

2

樋口 勝彦（ひぐち かつひこ）

株式会社リクルートテクノロジーズITマネジメント統括部ITマネジメント2部スマートデバイスグループ

自己紹介

(C) Recruit Technologies Co.,Ltd. All rights reserved.

Pusna-RSについてはデブサミ2015にてお話ししました

2013年5月リクルートテクノロジーズに中途入社- 新OS系（Tizen,Windows8,Firefox OS）の開発・ディレクションを担当- 全社共通基盤ツールリーダーを担当（プッシュ通知基盤Pusna-RS, クラッシュログ収集基盤）

- iOS,Android基盤リーダーを担当

職歴

リクルートテクノロジーズ スマートデバイスGはリクルートグループのネイティブアプリ・新OS領域

における開発/ビジネスを牽引する横断組織

プラットフォーマーとの密なリレーション構築・情報収集

アプリ戦略の実現

3(C) Recruit Technologies Co.,Ltd. All rights reserved.

スマートデバイスグループとは？

R-techスマートデバイスG

もちろん、Mozilla様とも！

4(C) Recruit Technologies Co.,Ltd. All rights reserved.

本日話すこと

リクルートがFirefox OSアプリを作成した背景/目的と、

アプリ作成時の工夫・苦労したポイントについて

0.8人月でアプリが作れるとは？？

5(C) Recruit Technologies Co.,Ltd. All rights reserved.

目次

1. リクルートにおける新OSへの取り組み目的

2. 第3OS対応

3. Firefox OS対応

4. まとめ

6(C) Recruit Technologies Co.,Ltd. All rights reserved.

目次

1. リクルートにおける新OSへの取り組み目的

2. 第3OS対応

3. Firefox OS対応

4. まとめ

7

話は遡ること2008年リクルートはiOS/Androidアプリの

対応で競合に対して遅れをとっていました

(C) Recruit Technologies Co.,Ltd. All rights reserved.

8

この出遅れを教訓に、Windows 8が登場した際にはいち早く対応を行いました。

(C) Recruit Technologies Co.,Ltd. All rights reserved.

事実：iOS/Androidでは全社的に競合に先行された

懸念：新プラットフォームが出ても同様に先行されてしまうのでは

課題感

9

アプリの流通機会を最優先とする方針

(C) Recruit Technologies Co.,Ltd. All rights reserved.

対競合に先んじて対応を実施することで

マーケットを押さえにいく！

取組目的

プラットフォームが流行ってから対応するのでは遅い！

10(C) Recruit Technologies Co.,Ltd. All rights reserved.

13アプリ（ロンチ時9アプリ）を開発！

Windows 8対応の結果

11(C) Recruit Technologies Co.,Ltd. All rights reserved.

13アプリ（ロンチ時9アプリ）を開発！

Windows 8対応の結果

12(C) Recruit Technologies Co.,Ltd. All rights reserved.

目次

1. リクルートにおける新OSへの取り組み目的

2. 第3OS対応

3. FirefoxOS対応

4. まとめ

13(C) Recruit Technologies Co.,Ltd. All rights reserved.

Windows 8対応が終わったころ、「第3OS」というワードを耳にするように！

14

iOS,Androidに続くモバイルOSに位置付けられるプラットフォーム

(C) Recruit Technologies Co.,Ltd. All rights reserved.

第3OSとは？

既存のモバイルOS HTML5準拠の新OS

15(C) Recruit Technologies Co.,Ltd. All rights reserved.

アプリはHTML5 + javascriptによる開発が前提

AndroidiOS Tizen Firefox OS ubuntu

開発言語

対応（キャリア・メーカー）

※2013年当時

• Objective-C • JAVA • HTML5+javascript

• HTML5+javascript

• HTML5+javascript

• Apple • Sumsung、LG、Huawei、Sony、ZTE etc….

• 6キャリア• 6メーカー• Intel

• 18キャリア• 6メーカー• Qualcom

• 未定

App Market • AppStore • Google Play • TizenStore• Firefox

MarketPlace• 独自マーケットも可能

• UbuntuSoftware Centre

主導企業 Apple Google Samsung Mozilla Canonical

国内：国内： 国内：

未定

・C++

各OS比較表

16(C) Recruit Technologies Co.,Ltd. All rights reserved.

2013年夏、Tizen端末がdocomoから発売されるとアナウンスあり！

Windows8の対応時と同様の目的でいち早く取り組むことを決定！

マーケットを押さえに行く！

17(C) Recruit Technologies Co.,Ltd. All rights reserved.

新OS対応方針

Tizen Firefox OS ubuntu

開発言語

対応（キャリア・メーカー）

※2013年当時

• HTML5+javascript

• HTML5+javascript

• HTML5+javascript

• 6キャリア• 6メーカー• Intel

• 18キャリア• 6メーカー• Qualcom

• 未定

App Market • TizenStore• Firefox

MarketPlace• 独自マーケットも可能

• UbuntuSoftware Centre

主導企業Samsung Mozilla Canonical

国内：国内： 国内：

未定

・C++

ここに注目

18(C) Recruit Technologies Co.,Ltd. All rights reserved.

※「新規投資範囲」とは各OSのプロジェクト雛形が異なっていたり、各OS個別のAPIを使用する部分のこと

Web技術（HTML5/JavaScript等）でアプリ開発を実施し、ワンリソースを複数OSで使い回せている状態を実現。

共通ロジック

新規投資範囲 新規投資範囲 新規投資範囲

ワンリソース開発範囲

iOS Android Firefox OSTIZEN Ubuntu

既存OS系 新OS系

OS名

OS分類

1. プラットフォーム数増加に強いアプリ開発方式の確立

【狙い】

既存投資範囲 既存投資範囲

2. WEB技術を採用することで容易にエンジニア確保ができる

3. 新OSのシェア動向が未知数の状況下でも最低限の投資でアプリを作成可能

19(C) Recruit Technologies Co.,Ltd. All rights reserved.

Tizen開発について

対応アプリ

体制

要件

エンジニア7人、デザイナ2人、テスター3人※エンジニアはポンパレ1人、その他2人体制で開発

当時のAndroid版アプリと同じ画面構成機能は検索・一覧・詳細＋αの最小限対応※平均1アプリ17画面

開発期間 2013年6月-7月の約2か月※合計で18人月ほど

20(C) Recruit Technologies Co.,Ltd. All rights reserved.

採用技術

CSSメタ言語より柔軟に、分かりやすく書けるためデザイナーの工数削減ができる

※2013年6月時点のもの

テンプレートエンジン

MVCフレームワーク

CUI

ライブラリ

less

Handlebars v1.0.0

Backbone v1.0.0

RequireJS v2.1.8jQuery v2.0.0

underscore v1.4.4Backbone.localStorage v1.1.0

Grunt

社内実績があったため採用

MVCフレームワークのデファクトスタンダード

それぞれ代表的なjsライブラリを使用データの保存にはlocalStorageを使用

less・handlebars・RequireJSのコンパイル、javascript構文チェック(jshint)を実施

21(C) Recruit Technologies Co.,Ltd. All rights reserved.

ソース管理

SVNのexternalsを利用し、Tizenのソースフォルダへ紐づけ

../JalanSpWeb/src/main/webapp/css css

../JalanSpWeb/src/main/webapp/images images

../JalanSpWeb/src/main/webapp/js js

../JalanSpWeb/src/main/webapp/less less

../JalanSpWeb/src/main/webapp/page page

22(C) Recruit Technologies Co.,Ltd. All rights reserved.

Tizenアプリ開発時は様々な問題がありましたが本日はスキップ！

結局端末が日本で発売されず。。

23(C) Recruit Technologies Co.,Ltd. All rights reserved.

目次

1. リクルートにおける新OSへの取り組み目的

2. 第3OS対応

3. Firefox OS対応

4. まとめ

24(C) Recruit Technologies Co.,Ltd. All rights reserved.

2013年10月国内でのFirefox OS端末発売の噂あり

この時期に初めてMozilla浅井さん(@dynamitter)と

お会いさせていただきました

25(C) Recruit Technologies Co.,Ltd. All rights reserved.

もちろんリクルートとしても取り組むことに

26(C) Recruit Technologies Co.,Ltd. All rights reserved.

MozillaとFirefox OSの普及に向けて協働を開始

2014/2/24

27(C) Recruit Technologies Co.,Ltd. All rights reserved.

いち早くcameranアプリをグローバルマーケットへ導入

2015/3/27時点で平均評価4点を獲得

当時写真を加工できるWEBアプリは珍しく、

ご好評をいただきました。

28(C) Recruit Technologies Co.,Ltd. All rights reserved.

そうこうしている内に

29(C) Recruit Technologies Co.,Ltd. All rights reserved.

2014年10月KDDIよりクリスマスシーズンでの

端末発売を発表

30(C) Recruit Technologies Co.,Ltd. All rights reserved.

よし！国内サービスも対応だ！

31(C) Recruit Technologies Co.,Ltd. All rights reserved.

しかし端末発売まで2か月弱！間に合うのか？

32(C) Recruit Technologies Co.,Ltd. All rights reserved.

ソース管理（再掲）

SVNのexternalsを利用し、Firefox OS用のソースフォルダへ紐づけ

../JalanSpWeb/src/main/webapp/css css

../JalanSpWeb/src/main/webapp/images images

../JalanSpWeb/src/main/webapp/js js

../JalanSpWeb/src/main/webapp/less less

../JalanSpWeb/src/main/webapp/page page

JalanSpWeb配下で開発したリソースをJalanTizen, JalanFirefoxOSにリンク

33(C) Recruit Technologies Co.,Ltd. All rights reserved.

出来ました！

34(C) Recruit Technologies Co.,Ltd. All rights reserved.

共通リソース管理の仕組みにより開発工数0.6人月、テスト工数0.2人月で

3アプリの対応が完了！

体制 エンジニア2人、テスター1人

開発期間 2014年11月下旬から12月頭の約2週間

工夫点

35(C) Recruit Technologies Co.,Ltd. All rights reserved.

Firefox OS対応として何をしたか

・Flame端末を使用してのデザイン崩れ対応・すべての機能をスルーテスト・テストで検出された不具合対応

Tizen対応の時にも動作は担保していたため最小限の工数で対応可能に！

36(C) Recruit Technologies Co.,Ltd. All rights reserved.

普段の開発はWEBブラウザ経由で、詳細なデザインチェックはFlame端末にて実施

※アプリ転送はWEB IDEを使用して。

アプリの動作確認はWEBブラウザ経由で確認を行うことで高速開発

（ビルドは常にGruntが行う）

実機がなくともシミュレータにて確認可能

37(C) Recruit Technologies Co.,Ltd. All rights reserved.

じゃらんアプリにおいてCSP対応が発生！

苦労点

CSP(Content Security Policy)とは？

XSSやデータインジェクションなどの攻撃を検出して軽減するセキュリティ追加レイヤーのこと。

詳細：https://developer.mozilla.org/ja/docs/Security/CSP

38(C) Recruit Technologies Co.,Ltd. All rights reserved.

具体的にアプリに対して以下の制限がかかった

CSPの事象

・リモートスクリプトの禁止└リモートスクリプト(Google Mapなど)の読み込みができない

・インラインスクリプトの禁止└html要素にonclickやonloadなど記述できない

制限がかかった実装のままアプリは申請できない

39(C) Recruit Technologies Co.,Ltd. All rights reserved.

じゃらんのAPIレスポンスがXML形式となっておりsystemXHRを使った結果、特権アプリ扱いになったため

Why CSP?

特権アプリではCSPの適用が強制される！※セキュリティ観点でもちろん必要なこと

40(C) Recruit Technologies Co.,Ltd. All rights reserved.

対応策

・リモートスクリプトの禁止└GoogleMapの表示処理をブラウザ表示へ(window.open使用)

・インラインスクリプトの禁止└onclick処理を全てBackboneのViewの処理に移動

問 題 解 決

41(C) Recruit Technologies Co.,Ltd. All rights reserved.

目次

1. リクルートにおける新OSへの取り組み目的

2. 第3OS対応

3. Firefox OS対応

4. まとめ

42

1. 国内端末発売時に3アプリ公開

2. KDDIのオススメアプリにフィーチャーされる

3. 国内企業での対応アプリ数TOP（5アプリ）

(C) Recruit Technologies Co.,Ltd. All rights reserved.

成果

端末発売当日のKDDIおすすめページ

43(C) Recruit Technologies Co.,Ltd. All rights reserved.

44(C) Recruit Technologies Co.,Ltd. All rights reserved.

WEBアプリに可能性を感じた！

45

ワンリソースを複数OSで使いまわすことによって新OSが登場した際にも爆速対応可能！

(C) Recruit Technologies Co.,Ltd. All rights reserved.

0.8人月のからくり

共通ロジック

新規投資範囲 新規投資範囲 新規投資範囲

Firefox OSTIZEN Ubuntu

新OS系

46(C) Recruit Technologies Co.,Ltd. All rights reserved.

みなさんもFirefox OSアプリ作りませんか？

47(C) Recruit Technologies Co.,Ltd. All rights reserved.

48

ご清聴ありがとうございました！

(C) Recruit Technologies Co.,Ltd. All rights reserved.