リクルートはどうやって0.8人月で3つのFirefox OSアプリを開発したか

リクルートのスマートデバイス向けアプリ開発体制

樋口勝彦氏（以下、樋口）：私から本日お話させていただくのは、リクルートとして、いくつかアプリをFx0ローンチ時に出していますので、どうやってアプリを作ったかというよりかは、どんな目的・背景で取り組んだのか、工夫した、苦労した点を中心にお話できればと思っております。どうぞよろしくお願いいたします。

まずは簡単に自己紹介させてください。私、樋口勝彦と申しまして、リクルートテクノロジーズのスマートデバイスグループというところに所属しております。私自身は、2013年、約2年前の5月にリクルートテクノロジーズに中途入社しております。

入社してどんな仕事をしているかというと、新OSと呼ばれているTizen、Windows8、Firefox OSの開発・ディレクションの担当ですとか、全社共通基盤ツールリーダー、具体的にはプッシュ通知基盤や、アプリがクラッシュした時のログを解析する仕組みを内部で持っておりまして、それらのリーダーをしております。

このプッシュ通知基盤（Pusna-RS）につきましては、デブサミ2015で発表させていただきましたので、もしご興味のある方はSlideShareにて資料を公開しておりますので、ご確認ください。あとはiOS、Androidの基盤リーダーも担当しております。

もう少し、私の所属しているスマートデバイスグループについて簡単に説明させてください。

リクルートは、2012年10月に分社化していまして、サービスといいますか、事業ごとに会社が分かれております。3年ぐらい前まではリクナビとかTOWNWORKとか、これらのサービスは完全に会社が別なんですけど、別々にアプリの開発をやっていました。

そこでどういう問題が起こったかというと、プラットフォーマーさんから来る情報ですとか、アプリを作る上での品質管理ですとか、そもそも作り方みたいなところで動き方がバラバラになっていました。

結果として、品質が安定しないアプリができたり、情報を横串で密に連携できないゆえに効率が上がらないといったことがあったので、我々リクルートテクノロジーズでスマートデバイス専門の組織を作って、横断的にアプリを管理することにしました。

また、FirefoxOSのアプリをローンチするにあたって、Mozilla様とも連携をさせていただきました。

iOS、Androidへの対応の遅れを教訓に

リクルートがFirefox OSアプリを作成した背景、目的と、あとは実際に作った時の工夫や、苦労したポイントについて、サブタイトルで付けている「0.8人月でアプリが作れるとは？？」をポイントに話したいなと思っています。

本日は4章立てでお話しさせていただきます。まずはリクルートにおける新OSの取り組み目的についてですが、話は遡ること2008年。実はリクルートはiOSとAndroidアプリのマーケットがローンチした時、競合サービスと比べると遅れを取っている状態でした。アプリを展開できていなかったり、アプリの品質が悪かったりという状況が発生していました。

ここで出てきた課題感ですが、競合に先行されてしまったという事実と、今後新しいプラットフォームが出てきた時にも、同様に先行されてしまうのではないかという懸念がありました。よって、このときの出遅れを教訓に、Windows8が登場した際には、我々はいち早く対応することにこだわりました。

取り組みの目的は「対競合に先んじて対応を実施することでマーケットを押さえにいく！」と書いてありますが、とにかくアプリの流通機会を最優先とする方針に切り替えました。やはりプラットフォームが流行ってから対応するのでは遅いなと。

で、Windows8の対応時の結果ですが、ローンチ時に9アプリ、合計で13アプリをWindows8向けに出しています。これは競合他社に大きく差をつけた成果になっています。ここまでが取り組み目的で、マーケットを押さえに行くんだよというところを意識してやっておりました。

第3OSの開発言語に着目

続いて第3OS対応ですね。Windows8の対応が終わった頃に、第3OSというワードを耳にするようになりました。

第3OSとは、みたいなことを改めて説明する必要もないかなと思うんですが、先行していたiOS、Androidに対抗して、よりオープンな考え方のモバイルOSに位置づけられるプラットフォームとして、TIZEN、Firefox OS、ubuntuがあります。

各OSの比較表ですが、新OSを赤い枠でで括っています。ここで注目すべきは開発言語のところかなと思ってまして、新OSと呼ばれるものは、全てHTMLとJavaScriptの技術で作れるところに我々は注目していました。

そんな中、2013年の夏ぐらいに、Tizenの端末がdocomoから発売されるよというアナウンスがありました。「よっしゃ！」ということで、我々もいち早くマーケットを押さえにいく目的で取り組むことを決定しました。

で、先ほどもちょっとお話ししましたが、今後はTizenだけでなく、FirefoxOSとかubuntuみたいなものも出てくるだろうということで、どういった方針で対応してくのかを考えまして、開発言語に注目しました。全て同じ言語で作れます、と。

第3OSはWeb技術が使えて、ワンリソースを使いまわせるのが利点

結果的にこのような方針になっていまして、ワンリソースを複数OSで使いまわせている状態を実現しようと考えました。共通ロジックというのが、HTMLとJavaScriptで作るところです。

新規投資範囲というのは、結局そのプロジェクト構成が各OSで違っていたりですとか、あとはOS個別のAPIが存在するところに関しては、毎回作っていきましょうねという考え方に基づいています。

この狙いは3つありまして、まず1つめは、今後新しいWebOSが出てきた時にも同じようにソースを使いまわせるので、プラットフォーム数増加に強いアプリ開発方式の確立を狙っています。

2つめは、エンジニアの確保の観点で言うと、今は市場に対してiOS、Androidのエンジニアが足りていない状況かと思っています。

それに対して、Webの技術でアプリが作れるということは、今まで二十数年Web業界の歴史がある中で、エンジニア確保が容易なんですね。そこの面で採用しています。

3つ目。「新しいOSが出てきても、本当に流行るの？」という懸念もある中で、それでもここの新規投資範囲の最低限の投資でアプリを作ることが出来るよねという、この3つの狙いで戦略を立てて、Tizenの対応を行いました。

すみません、本日はFirefox OSの話なのにTizenの開発についてとかちょっと話がそれてしまっているのですが（笑）、Tizenの開発時には、4つのアプリを対応しました。

体制はエンジニア7名、デザイナー2名、テスター3名で、基本的に各アプリにエンジニアが2人ほどついて開発して、それを2ヶ月ほどで作りました。

合計で18人月ほどと書いてますが、大体開発だけで言いますと、1アプリ3.5人月くらいで作ってしまいました。作ってしまいました、というよりは作れてしまいましたという感じですかね。

アプリの要件としては、当時のAndroid版のアプリの画面構成と同じで作りましょうと決めてまして、機能に関しても、検索、一覧、詳細のような最小限の対応で行いました。とはいえ、1アプリ、だいたい17画面ぐらい作っています。

開発に当たって採用した技術

採用技術についてです。これらは2013年の6月時点のもので、本日は技術的な話をしようかなと思ったんですけど、less使ってますよとか、テンプレートはHandlebars使ってますとか、MVCフレームワークでBackbone使ってますとか、その他ライブラリも色々使ってたりとか、あとCUIはGrunt使ってますとか、今ではもう当たり前みたいな話なので、今日はこれらの技術的な話はしません。。

ソース管理についてはSVNのexternalsを使って、Tizenのソースフォルダに紐付けしました。ここについてちょっとお話しします。

先ほどお話しした、共通開発範囲のところで、これはじゃらんの構成なのですが、JalanSpWebの下にまずWebリソースを作ります。その後じゃらんTizenという、Tizenのアプリの雛形をまず作って、そこに対して、JalanSpWebで作ったものをexternalsでリンクさせます。というのがソース管理の仕方です。ここはポイントになるので、あとでもう1回出てきます。

で、Tizen開発の時に様々な問題がありましたが、本日はスキップということで。ご存知の方もいらっしゃるとおり、結局端末が日本で発売されずに、この時は作っただけでおじゃんになってしまったという、非常に苦い思い出でございます。

僕が中途入社してすぐの仕事がこのアプリの開発で、出なかったので、何かこう、この先この会社でやってけるのかなみたいな、そんな思いもありました（笑）。で、Firefox OSの対応です。

Firefox OSへの対応

2013年の10月ぐらいに、国内でFirefox OSの端末発売の噂あり、ということで、この時期に初めて浅井さんとお会いさせていただきました。もちろん、リクルートとしても取り組むことを決定していまして、実はリクルートとMozillaさんは、普及に向けて協働みたいなことを開始しています。

さらに、いち早くCameranというアプリをグローバルマーケットへ導入しています。すみません、Cameranをご存知の方、どのくらいいらっしゃいますか？　2割くらいですね。ありがとうございます。

撮影した写真の上にフィルターを重ねて、お洒落な感じにできるアプリで、フィルターのデザインを結構有名な方がデザインされています。

これをグローバルマーケットに出したところ、評価が先月末時点で平均評価4点を獲得してまして、レビューもたくさんいただいています。たくさんコメントでいただいているんですけれども、何せスペイン語とか良くわからない言語で書かれているので読めません（笑）。ちょっと残念な感じですね。

さらに、これを出したのが2014年2月くらいだったと思いますが、その当時、そもそも写真を加工できるWebアプリがほぼ存在していなくて、かなりご好評をいただきました。

2カ月後のローンチに間に合わせる！

そうこうしているうちに、2014年10月にKDDIの田中社長より「クリスマスシーズンで国内に端末出します！」という発表がありました。皆さん知ってると思うんですけど、このとき端末にモザイクがかかってたんですよね。これはちょっとびっくりしました。「わかんないじゃん！」みたいな（笑）。で「よし！　国内サービスも対応だ！」ということで、3アプリを対応させることにしました。

なんですけど、端末発売までこの時点でもう2ヶ月弱しかなくて、間に合うのか？　という話ですね。ここで登場するのが、先ほどご紹介したソース管理のところです。

同じように、今度はFirefox OSのプロジェクトの雛形を作って、そこにTizenの時に作ってあったソースをリンクさせるだけです。出来ました。

ということで、工夫点としましては、共通リソースの管理の仕組みによって、Firefox OSアプリの対応は3アプリを開発工数0.6人月、テスト工数0.2人月でやっちゃいましたと。エンジニア2人、テスター1人、開発期間が約2週間くらいです。

Firefox OS対応として何をしたんですかっていう話なんですが、まずFlame端末を使用してデザインの崩れの対応を行なってます。Tizenの時にもやってるんですが、全ての機能を万遍なくスルーテストしました。そのテストで検出された不具合を対応しただけでございます。Tizenの対応の時にも動作を担保していたので、本当に最小限の工数でFirefox OSアプリが出来てしまいました。

基本的にHTMLとJavaScriptなので、我々はChromeで開発を行なっていました。詳細なデザインチェックなどは、どうしても実機でやろうということで、Flame端末を用意してWebIDEを経由して転送して確認をしました。なので、我々はこのWebIDEに付いているエミュレーターは使ってないです。

Firefox OS対応で苦労した2つのこと

ここまでが工夫点で、次が苦労点なんですが、じゃらんアプリにおいて、CSPの対応が発生しました。ちなみにこの中でCSPご存知の方ってどのくらいいらっしゃいますか？　ああ……、やっぱそんな感じですよね。2割、3割ぐらいですかね。ありがとうございます。

簡単に言うと、XSSとかデータインジェクションみたいな攻撃を守ってくれるセキュリティ追加レイヤーのことです。多分詳細はまた次回の勉強会でお話されるんでしょうかね。

このCSPはどんな事象なのかというと、アプリに対して制限がかかってしまうもので、今回2つ挙げてます。

1つは、リモートスクリプトの禁止です。じゃらんですと、宿の詳細から、宿がどこにあるのかをGoogleMAPで表示させる機能があります。その機能としては、HTMLの中でGoogleMapをリモートスクリプトしている処理があったんですけど、CSPがかかってしまうとリモートスクリプトが読み込めないので出来ませんでした。

2つめはインラインスクリプトの禁止で、HTMLの要素の中にonclickとかonloadとかを記述できませんという問題が発生しました。この実装のままアプリを申請するとマーケット上でエラーになって、申請ができない状態になります。

じゃあ何でCSPかかっちゃったんだっていう話なんですが、じゃらんのAPIのレスポンスが実はXML形式になってまして、XMLHttpRequestを使う必要があり、アプリのパーミッションとしてsystemXHRが必要になってきます。

そのsystemXHRを適用すると、”type”のところを特権アプリにしないと駄目ですと。しかし特権アプリの扱いにすると、CSPの制限がかかってしまいますよ、というからくりになってます。

なので、セキュリティ観点ではもちろん必要なこととして我々も認識していまして、どうやって解決したかというと、非常に苦しかったんですが……。

結局、リモートスクリプトを読み込めないので、Window.openを使ってブラウザを起動してGoogleMapを表示させましたと。あとはインラインスクリプトの禁止に関しましても、onclick処理を全てBackboneのViewの処理に移動させてます。

というかですね、インラインスクリプトについては正直ちょっと我々がイケてなかった部分もあったので、きちんと全部BackboneのViewの処理に移動させました。これで問題解決です。最後にまとめに入ります。

リクルートがFirefox OS対応で上げた3つの成果

リクルートとしての成果を3つ挙げてます。まず、国内端末発売日に3アプリを公開しました。2つめは、KDDIさんのオススメアプリにフィーチャーされました。これ当日のおすすめページなんですが、Fx0で見たところなんですかね。上位3つ全部リクルートが占めました。Webから見ても、ここに3つ占めてます。

あとは現時点で、国内企業で対応アプリ数トップ。5アプリとありますが、今は1アプリクローズしたので、4アプリの状態になっています。実際作った画面がこんな感じなんですけど……。

普通にアプリっぽくなってます。この辺のスイッチとかも全部CSSで表現していて、透明感も全部CSSで表現しています。Webアプリの可能性を感じました。

おさらいですが、0.8人月のからくりとは、共通ロジックという戦略に基づいてソースを作ったことによって、新しいOSが次に登場した際にも爆速で対応が可能であるということです。

ということで、皆さんもFirefoxOSアプリを作りませんか？

すいません、聞くの忘れました！　この中でFirefoxOSのアプリ、もう作ってますよという方はどのくらいいらっしゃいますか？　2割、3割くらいですかね。ありがとうございます。

最後に会社の宣伝です（笑）。我々、リクルートテクノロジーズはいろんな新しい技術の研究開発からビジネス実装まで扱っていますので、興味のある方はぜひ一緒に働きませんか？

ということで、どうもご清聴ありがとうございました。