Más contenido relacionado
La actualidad más candente (20)
Similar a [関東Firefox OS 勉強会10th 講演資料] リクルートにおけるFirefox osアプリへの取り組み (20)
Más de Recruit Technologies (20)
[関東Firefox OS 勉強会10th 講演資料] リクルートにおけるFirefox osアプリへの取り組み
- 4. 4(C) Recruit Technologies Co.,Ltd. All rights reserved.
本日話すこと
リクルートがFirefox OSアプリを
作成した背景/目的と、
アプリ作成時の工夫・苦労
したポイントについて
0.8人月でアプリが作れるとは??
- 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
- 24. 24(C) Recruit Technologies Co.,Ltd. All rights reserved.
2013年10月
国内でのFirefox OS端末発売の噂あり
この時期に初めてMozilla浅井さん
(@dynamitter)と
お会いさせていただきました
- 27. 27(C) Recruit Technologies Co.,Ltd. All rights reserved.
いち早くcameranアプリを
グローバルマーケットへ導入
2015/3/27時点で
平均評価4点を獲得
当時写真を加工できる
WEBアプリは珍しく、
ご好評をいただきました。
- 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にリンク
- 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の処理に移動
問 題 解 決