[関東Firefox OS 勉強会10th 講演資料] リクルートにおけるFirefox osアプリへの取り組み

株式会社リクルートテクノロジーズ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様とも！


本日話すこと

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

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

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


目次

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

2. 第3OS対応

3. Firefox OS対応

4. まとめ


目次


2. 第3OS対応

3. Firefox OS対応

4. まとめ

7

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

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


8

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


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

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

課題感

9

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


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

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

取組目的

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


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

Windows 8対応の結果


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

Windows 8対応の結果


目次


2. 第3OS対応

3. FirefoxOS対応

4. まとめ


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

14

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


第3OSとは？

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


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

AndroidiOS Tizen Firefox OS ubuntu

開発言語

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

※2013年当時

• Objective-C • JAVA • 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比較表


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

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

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


新OS対応方針

Tizen Firefox OS ubuntu

開発言語

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

※2013年当時




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

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

• 未定

App Market • TizenStore• Firefox

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

• UbuntuSoftware Centre

主導企業Samsung Mozilla Canonical

国内：国内：国内：

未定

・C++

ここに注目


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

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

共通ロジック

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

ワンリソース開発範囲

iOS Android Firefox OSTIZEN Ubuntu

既存OS系新OS系

OS名

OS分類

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

【狙い】

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

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

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


Tizen開発について

対応アプリ

体制

要件

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

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

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


採用技術

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)を実施


ソース管理

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


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

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


目次


2. 第3OS対応

3. Firefox OS対応

4. まとめ


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

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

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

https://twitter.com/dynamitter


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


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

2014/2/24


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

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

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

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


そうこうしている内に


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

端末発売を発表


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


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


ソース管理（再掲）

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にリンク


出来ました！


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

3アプリの対応が完了！

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

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

工夫点


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

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

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


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

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

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

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

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


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

苦労点

CSP(Content Security Policy)とは？

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

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


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

CSPの事象

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

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

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


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

Why CSP?

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


対応策

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

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

問題解決


目次


2. 第3OS対応

3. Firefox OS対応

4. まとめ

42

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

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

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


成果

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



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

45

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


0.8人月のからくり

共通ロジック

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

Firefox OSTIZEN Ubuntu

新OS系


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


48

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


Technology

[関東Firefox OS 勉強会10th 講演資料] リクルートにおけるFirefox osアプリへの取り組み