MonacaとOnsen UIを活用し
実工数2週間でのアプリリリースを実現

株式会社ニジボックス

開発室マネジャー
藤原裕司氏

アプリの紹介

「レシポ！」は、ニジボックスが提供する消費者をコンビニ、スーパーなどのリアル店舗での自社商品の購入を保証するO2O型サンプリングサービスで、すでに毎月50万人以上が使う注目サービスです。
サービスの利用者は、「レシポ！」に掲載されている商品の商品名が記載されているレシートの画像を送るだけでポイントを貯めることができます。
「レシポ！」公式アプリを使うとレシート画像をより手軽に送信することができます。
レシポ公式サイト：https://recipo.jp/

Monaca採用の背景

2014年10月にPC向け及びスマホ向けのWebサイトとしてサービス開始をしたレシポ！は、当初よりレシートの画像アップの手間などから専用のスマホアプリが望まれていました。
Webサイトのリソースを有効活用するためアプリ開発においてもHTML5ハイブリッッド型での開発を行う方針で複数のツールを検討し、Monacaの採用にいたりました。Monacaの採用の決め手はMonacaデバッガーを使ったクイックな開発スタイルと、Web標準技術でアプリ開発ができるということでした。
実際に、Monacaでのアプリ開発は順調に進み、エンジニア1名の体制で、実工数わずか2週間でiOS、Androidのアプリをリリースすることができました。

Monacaの導入効果

エンジニア1名の体制で実工数2週間という短期間で開発を完了できた
Onsen UIを活用することでアプリっぽいUIを実現できた
Monacaデバッガーを使ったユーザーテストでUIが劇的に改善できた

Q&A

「レシポ！」公式アプリを開発したニジボックスの藤原裕司氏にインタビューをいたしました。

Q1.Monacaでの開発の第一印象を教えてください。

開発環境のセットアップをせずにアプリ開発が行えたのは良かったです。また、Monacaデバッガーを初めて使った時には、ソースコードを保存するだけですぐに実機で動作確認できることに衝撃を受けました。これがアプリ開発の新しいスタイルだと直感しました。

Q2.レシポ！公式アプリの開発にOnsen UIを採用された理由を教えてください。

GUIを効かせてスムーズなアニメーションをアプリのUIに採用したかったのでOnsen UIを採用しました。Onsen UIでは、HTMLファイルを分割してファイル管理できるのも便利でした。

Q3.レシポ！公式アプリでとくにこだわった点について教えてください。

トップページにはお得な商品情報をずらっと並べるため、どうしても画像の数が多くなります。それでも使い易いように工夫しました。また、様々な画面サイズの端末に対応するために画像の表示サイズなどはピクセル指定を使わずに全てパーセント指定を行いました。

Q4.開発中のエピソードがあれば教えてください。

アプリのリリース前に社内メンバーにアプリを触ってもらうお試し会を開催しました。メンバーにMonacaデバッガーを通じてプロジェクトを共有し、アプリを操作してもらい、その場で議論をして、その後すぐに修正版を再配布し評価してもらうというサイクルを数回繰り返しました。これで、アプリのUIが相当改善されたという実感があります。従来のやり方でいちいちアプリをビルドして再配布を行っていたら、1~2週間程度かかっていたと思います。

Q5.今後もアプリ開発にMonacaを活用したいですか？

軽めの要件のアプリ開発には絶対に使いたいと思いますし、他の開発メンバーにも広めていきたいと思っています。おおよそのアプリの機能はWeb技術やCordovaで対応ができます。そのような要件のアプリを開発するには開発効率の面でMonacaがベストチョイスだと思います。逆にARアプリなどには向いていないと思います。