2015/04/14 関東Firefox OS勉強会 10thでの、樋口の発表資料になります

1. 株式会社リクルートテクノロジーズ
ITマネジメント統括部
ITマネジメント2部
スマートデバイスグループ
樋口 勝彦
リクルートにおけるFirefox OS
アプリへの取り組み
～0.8人月で出来るアプリ!?～
2015/4/14
関東 Firefox OS 勉強会 10th

2. 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
職歴

3. リクルートテクノロジーズ スマートデバイスGは
リクルートグループのネイティブアプリ・新OS領域
における開発/ビジネスを牽引する横断組織
プラットフォーマーとの密な
リレーション構築・情報収集
アプリ戦略の
実現
3(C) Recruit Technologies Co.,Ltd. All rights reserved.
スマートデバイスグループとは？
R-tech
スマートデバイスG
もちろん、
Mozilla様とも！

4. 4(C) Recruit Technologies Co.,Ltd. All rights reserved.
本日話すこと
リクルートがFirefox OSアプリを
作成した背景/目的と、
アプリ作成時の工夫・苦労
したポイントについて
0.8人月でアプリが作れるとは？？

5. 5(C) Recruit Technologies Co.,Ltd. All rights reserved.
目次
1. リクルートにおける新OSへの取り組み目的
2. 第3OS対応
3. Firefox OS対応
4. まとめ

6. 6(C) Recruit Technologies Co.,Ltd. All rights reserved.
目次
1. リクルートにおける新OSへの取り組み目的
2. 第3OS対応
3. Firefox OS対応
4. まとめ

7. 7
話は遡ること2008年
リクルートはiOS/Androidアプリの
対応で競合に対して遅れをとっていました
(C) Recruit Technologies Co.,Ltd. All rights reserved.

8. 8
この出遅れを教訓に、
Windows 8が登場した際には
いち早く対応を行いました。
(C) Recruit Technologies Co.,Ltd. All rights reserved.
事実：iOS/Androidでは全社的に競合に先行された
懸念：新プラットフォームが出ても同様に先行されてしまうのでは
課題感

9. 9
アプリの流通機会を最優先とする方針
(C) Recruit Technologies Co.,Ltd. All rights reserved.
対競合に先んじて対応を実施することで
マーケットを押さえにいく！
取組目的
プラットフォームが流行ってから
対応するのでは遅い！

10. 10(C) Recruit Technologies Co.,Ltd. All rights reserved.
13アプリ（ロンチ時9アプリ）を開発！
Windows 8対応の結果

11. 11(C) Recruit Technologies Co.,Ltd. All rights reserved.
13アプリ（ロンチ時9アプリ）を開発！
Windows 8対応の結果

12. 12(C) Recruit Technologies Co.,Ltd. All rights reserved.
目次
1. リクルートにおける新OSへの取り組み目的
2. 第3OS対応
3. FirefoxOS対応
4. まとめ

13. 13(C) Recruit Technologies Co.,Ltd. All rights reserved.
Windows 8対応が終わったころ、
「第3OS」というワードを耳にするように！

14. 14
iOS,Androidに続くモバイルOSに位置付けられるプラットフォーム
(C) Recruit Technologies Co.,Ltd. All rights reserved.
第3OSとは？
既存のモバイルOS HTML5準拠の新OS

15. 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
• 独自マーケットも可能
• Ubuntu
Software Centre
主導企業 Apple Google Samsung Mozilla Canonical
国内：国内： 国内：
未定
・C++
各OS比較表

16. 16(C) Recruit Technologies Co.,Ltd. All rights reserved.
2013年夏、Tizen端末がdocomoから
発売されるとアナウンスあり！
Windows8の対応時と同様の目的で
いち早く取り組むことを決定！
マーケットを押さえに行く！

17. 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
• 独自マーケットも可能
• Ubuntu
Software Centre
主導企業
Samsung Mozilla Canonical
国内：国内： 国内：
未定
・C++
ここに注目

18. 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. 19(C) Recruit Technologies Co.,Ltd. All rights reserved.
Tizen開発について
対応アプリ
体制
要件
エンジニア7人、デザイナ2人、テスター3人
※エンジニアはポンパレ1人、その他2人体制で開発
当時のAndroid版アプリと同じ画面構成
機能は検索・一覧・詳細＋αの最小限対応
※平均1アプリ17画面
開発期間 2013年6月-7月の約2か月
※合計で18人月ほど

20. 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.8
jQuery v2.0.0
underscore v1.4.4
Backbone.localStorage v1.1.0
Grunt
社内実績があったため採用
MVCフレームワークのデファクトスタンダード
それぞれ代表的なjsライブラリを使用
データの保存にはlocalStorageを使用
less・handlebars・RequireJSのコンパイル、
javascript構文チェック(jshint)を実施

21. 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. 22(C) Recruit Technologies Co.,Ltd. All rights reserved.
Tizenアプリ開発時は様々な
問題がありましたが本日はスキップ！
結局端末が日本で発売されず。。

23. 23(C) Recruit Technologies Co.,Ltd. All rights reserved.
目次
1. リクルートにおける新OSへの取り組み目的
2. 第3OS対応
3. Firefox OS対応
4. まとめ

24. 24(C) Recruit Technologies Co.,Ltd. All rights reserved.
2013年10月
国内でのFirefox OS端末発売の噂あり
この時期に初めてMozilla浅井さん
(@dynamitter)と
お会いさせていただきました

25. 25(C) Recruit Technologies Co.,Ltd. All rights reserved.
もちろん
リクルートとしても取り組むことに

26. 26(C) Recruit Technologies Co.,Ltd. All rights reserved.
MozillaとFirefox OSの
普及に向けて協働を開始
2014/2/24

27. 27(C) Recruit Technologies Co.,Ltd. All rights reserved.
いち早くcameranアプリを
グローバルマーケットへ導入
2015/3/27時点で
平均評価4点を獲得
当時写真を加工できる
WEBアプリは珍しく、
ご好評をいただきました。

28. 28(C) Recruit Technologies Co.,Ltd. All rights reserved.
そうこうしている内に

29. 29(C) Recruit Technologies Co.,Ltd. All rights reserved.
2014年10月
KDDIよりクリスマスシーズンでの
端末発売を発表

30. 30(C) Recruit Technologies Co.,Ltd. All rights reserved.
よし！国内サービスも対応だ！

31. 31(C) Recruit Technologies Co.,Ltd. All rights reserved.
しかし端末発売まで2か月弱！
間に合うのか？

32. 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. 33(C) Recruit Technologies Co.,Ltd. All rights reserved.
出来ました！

34. 34(C) Recruit Technologies Co.,Ltd. All rights reserved.
共通リソース管理の仕組みにより
開発工数0.6人月、テスト工数0.2人月で
3アプリの対応が完了！
体制 エンジニア2人、テスター1人
開発期間 2014年11月下旬から12月頭の約2週間
工夫点

35. 35(C) Recruit Technologies Co.,Ltd. All rights reserved.
Firefox OS対応として何をしたか
・Flame端末を使用してのデザイン崩れ対応
・すべての機能をスルーテスト
・テストで検出された不具合対応
Tizen対応の時にも動作は担保していたため
最小限の工数で対応可能に！

36. 36(C) Recruit Technologies Co.,Ltd. All rights reserved.
普段の開発はWEBブラウザ経由で、
詳細なデザインチェックはFlame端末にて実施
※アプリ転送はWEB IDEを使用して。
アプリの動作確認はWEBブラウザ経由で
確認を行うことで高速開発
（ビルドは常にGruntが行う）
実機がなくとも
シミュレータにて確認可能

37. 37(C) Recruit Technologies Co.,Ltd. All rights reserved.
じゃらんアプリにおいてCSP対応が発生！
苦労点
CSP(Content Security Policy)とは？
XSSやデータインジェクションなどの攻撃を
検出して軽減するセキュリティ追加レイヤーのこと。
詳細：https://developer.mozilla.org/ja/docs/Security/CSP

38. 38(C) Recruit Technologies Co.,Ltd. All rights reserved.
具体的にアプリに対して以下の制限がかかった
CSPの事象
・リモートスクリプトの禁止
└リモートスクリプト(Google Mapなど)の読み込みができない
・インラインスクリプトの禁止
└html要素にonclickやonloadなど記述できない
制限がかかった実装のままアプリは申請できない

39. 39(C) Recruit Technologies Co.,Ltd. All rights reserved.
じゃらんのAPIレスポンスがXML形式となっており
systemXHRを使った結果、特権アプリ扱いになったため
Why CSP?
特権アプリではCSPの適用が強制される！
※セキュリティ観点でもちろん必要なこと

40. 40(C) Recruit Technologies Co.,Ltd. All rights reserved.
対応策
・リモートスクリプトの禁止
└GoogleMapの表示処理をブラウザ表示へ(window.open使用)
・インラインスクリプトの禁止
└onclick処理を全てBackboneのViewの処理に移動
問 題 解 決

41. 41(C) Recruit Technologies Co.,Ltd. All rights reserved.
目次
1. リクルートにおける新OSへの取り組み目的
2. 第3OS対応
3. Firefox OS対応
4. まとめ

42. 42
1. 国内端末発売時に3アプリ公開
2. KDDIのオススメアプリにフィーチャーされる
3. 国内企業での対応アプリ数TOP（5アプリ）
(C) Recruit Technologies Co.,Ltd. All rights reserved.
成果
端末発売当日の
KDDIおすすめページ

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

44. 44(C) Recruit Technologies Co.,Ltd. All rights reserved.
WEBアプリに可能性を感じた！

45. 45
ワンリソースを複数OSで使いまわすことによって
新OSが登場した際にも爆速対応可能！
(C) Recruit Technologies Co.,Ltd. All rights reserved.
0.8人月のからくり
共通ロジック
新規投資範囲 新規投資範囲 新規投資範囲
Firefox OSTIZEN Ubuntu
新OS系

46. 46(C) Recruit Technologies Co.,Ltd. All rights reserved.
みなさんもFirefox OSアプリ
作りませんか？

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

48. 48
ご清聴ありがとうございました！
(C) Recruit Technologies Co.,Ltd. All rights reserved.