BaaSとUXガイドラインの活用によるiOS/Androidからの移植の実際：「Windowsタブレット向けアプリ開発」先駆けインタビュー（4）

ハウス食品のアプリ「スパイスレシピ」について、移植時のガイドライン活用やAzureを用いた独自機能実装などを担当者から聞いた。

[吉村哲樹，＠IT]

ハウス食品のレシピアプリ「スパイスレシピ」のWindowsストア版を

　「スパイスレシピ」は、2014年4月17日にWindowsストアで公開されたばかりの料理レシピアプリだ。ハウス食品が販売するスパイス商品を使ったさまざまな料理のレシピを紹介している。また、単に文字や写真でレシピを紹介するだけではなく、調理手順を紹介する動画まで閲覧できるようになっている。

Windowsストアの「スパイスレシピ」

　これらのレシピ情報はもともと、ハウス食品が運営するWebサイト「スパイスオブライフ」において紹介されているもので、さらにいえば今回登場したWindowsストアアプリの前にも、すでにiOS／Android版の「スパイスレシピ」が公開されている。特にiOS版は、iPhoneが日本で初めてお目見えして間もなく登場した「レシピアプリの草分け」ともいえる存在だ。

　このアプリの開発やメンテナンスを担当しているのが、株式会社ラソナ（以下、ラソナ）だ。同社はインターネットビジネスに関するコンサルティングやプランニング、Webサイト構築、コンテンツ制作、アプリケーション開発などに強みを持つ企業で、最近では特に顧客企業のWebビジネス支援の一環としてスマートフォンやタブレット端末向けアプリケーションの企画・開発も広く手掛けている。

ラソナ テクニカルグループ リーダー 茶屋孝典氏

　スパイスレシピもそうしたアプリの1つだが、その開発に携わるようになった経緯について、同社 テクニカルグループ リーダー 茶屋孝典氏は次のように説明する。

　「もともと別の会社がハウス食品から請け負っていたスパイスオブライフの運用やスパイスレシピの開発・メンテナンス業務を、弊社が一括して引き継ぎました。その後2013年末ごろに、たまたま日本マイクロソフトのエバンジェリストの方からWindowsストアアプリについての話を伺う機会があったのですが、非常に大きな可能性を感じました。そこでスパイスレシピのWindowsストア版の開発を、ハウス食品に提案したのです」

　すでにiOS／Android向けレシピアプリとして確固たる地位を築いていたスパイスレシピだったが、ハウス食品のスパイス商品をより広く知ってもらうためには、さらに多くのユーザーにアプリをダウンロードし、使ってもらいたい意向があった。その点、Windowsストアはまだ立ち上がったばかりで、本格的なレシピアプリの数もまだ少ないため、ユーザーに強くアピールできるかもしれない。こうしたハウス食品側の思惑もあり、Windowsストア版スパイスレシピの開発プロジェクトが立ち上がることとなった。

「UXガイドライン」に沿って初のWindowsストアアプリの設計に着手

　ちなみに今回のプロジェクトは、ラソナにとって初めてのWindowsストアアプリ開発となった。そのため、まずはWindowsストアアプリについての調査や、開発技法の学習などに時間が充てられた。特に、Windowsストアアプリのユーザーエクスペリエンスガイドライン（以下、UXガイドライン）は徹底的に読み込んだという。

　「ガイドラインは、個人的に非常に納得できる内容でした。特に、ユーザーに提供する価値をきちんと特定した上で、それを実現するためのユーザーインターフェース（以下、UI）や機能の提供に時間やリソースを集中するという開発コンセプトは、とても共感できるものでした。

　どうしても、検討の段階では『あれもこれも』と多くの機能を盛り込みたくなるものですが、それを押し止めてUIや機能をシンプルに仕上げるためにも、ガイドラインは良い説得材料になりました」（茶屋氏）

　なお、アプリの全体的な仕様は、すでにあったiOS／Android版をベースにして組み立てられた。既存アプリの中から、今回実装する機能をピックアップし、個々の画面と全体構成のワイヤーフレームをモックアップ作成ツール「Balsamiq Mockups」（バルサミコ・モックアップ）を使って作成した。このワイヤーフレームをベースにレビューを重ね、全体の仕様を詰めていった。

ラソナ デザイングループ 李在鎬氏

　こうしてワイヤーフレームがある程度固まった後は、それをベースに実際の画面のデザインと開発が行われた。この作業を担当したラソナ デザイングループ 李在鎬氏によれば、ここでもUXガイドラインには大いに助けられたという。

　「あらゆるUI要素が明確かつ詳細に定義されていますから、『これに沿って作れば絶対に間違いないだろう』という確信が持てました。実際、ガイドラインの内容に忠実に従うだけで一通りのデザインはできるので、作業自体は極めてスムーズに運びました」（李氏）

　ちなみに、iOS／AndroidアプリのUIデザイン経験は豊富な李氏だが、今回初となったWindowsストアアプリで何か戸惑うことはなかったのだろうか？ 同氏は、Windowsストアアプリ特有のUI仕様である「横スクロール」には、恐らく多くのiOS／Androidアプリ開発者にとっては慣れが必要だろうと指摘する。

　「当初は、iOS／Android版アプリの縦スクロールを90度回転させて横スクロールにすれば何とかなるだろうと考えていたのですが、そう簡単にはいきませんでした（笑）。その方法だと、実際にはユーザーが欲しい情報にたどり着くまでにかなりのスクロール操作をしなくてはならないこともあったので、それを回避するためにUIのデザインや仕様にかなり工夫を凝らしました」

　また、Windowsストアアプリ特有の「フラットデザイン」らしさを出すために、なるべくシンプルな見た目になるよう心掛けたという。

　「一般的なWebサイトやアプリでは、ボタンなどの部品がかなりのスペースを占めていますが、今回のWindowsストアアプリではフラットデザインならではのシンプルさを強調するために、なるべくUI部品を隠すようにしました。例えば、ボタンやメニューなどを極力表示しない代わりに、それらに相当する機能をアプリバーに配置したり、セマンティックズームを活用したりするといった工夫を凝らしました」（李氏）

「スパイスレシピ」のセマンティックズーム画面

「Microsoft Azure モバイル サービス」を使ったアクセス解析機能を実現

　なお、UIの実装技術としては、XAMLが使われた。李氏がUIをデザインし、そしてXAMLで実装した後、今度はそれを基にラソナのベトナム拠点にいる開発者が、C#で内部ロジックを実装していった。

　画面上に表示するレシピ情報や各種画像・動画データは、スパイスオブライフ（Webサイト）で使われているのと同じものをサーバーから取得する。この仕様自体は、すでにあったiOS／Android版と基本的に共通だったが、今回開発したWindowsストア版ではiOS／Android版にはない「アクセス解析機能」が新たに加えられた。

　これは、ユーザーのアプリ操作履歴を記録したログデータをサーバー上に収集し、その内容を解析できる機能だ（個人情報は取得されない）。「ユーザーがどんな画面にアクセスしているのか、その傾向を分析し、ユーザーの好みをより広く知ることで、効果的な商品開発やマーケティングにつなげていく」という狙いがあった。

　この仕組みを実装するに当たっては、マイクロソフトが提供するBaaS「Microsoft Azure モバイル サービス」が活用されている。このサービスは、モバイルアプリを実装する上で必要となるストレージ領域やユーザー認証、プッシュ通知などといったバックエンド処理の機能を、「Microsoft Azure」（以下、Azure）のクラウドサービスとして提供するというもの。Windowsストアアプリ、Windows Phoneアプリはもちろんのこと、iOSやAndroid用のアプリからも利用できる。

Microsoft Azure モバイル サービス

　Windowsストア版スパイスレシピでは、ログのデータを保管するストレージ領域として、この「Azure モバイル サービス」が提供する「Azure SQLデータベース」が使われている。ログデータは、アプリによって自動的にAzure SQLデータベースにアップロード・格納され、同じくAzure環境上に実装された解析プログラムによって、各種分析やレポーティング処理が行われる。

　「このアクセス解析機能は一から新たに作り込みましたが、実にあっけないほど簡単に開発できました。Azure モバイル サービスを使うのはまったく初めてだったのですが、Azureの開発経験がある技術者がプロジェクトにいたこともあり、何の問題もなくスムーズに開発できました。また自分たちでデータベースの構築や保守を行う必要が一切なかった点も、スムーズに開発を進められた要因の1つでした」（茶屋氏）

今回の経験を生かしてビジネスユーザー向けWindowsストアアプリの開発にも

　今回、この「Azure モバイル サービス」を使った新機能の実装が、思ったよりはるかに簡単にできたため、現在スパイスレシピの他の機能での活用も検討しているところだという。

　「サーバーからのレシピ情報の取得は、独自開発のインターフェースを介して行っていますが、これも『Azure モバイル サービス』を使って行うというアイデアもあります。もしAzure上にコンテンツデータを置くことができれば、「Azure モバイル サービス」のAPIを通じてiOS版・Android版・Windowsストア版全てに対して効率的にコンテンツを配信できるようになります」（茶屋氏）

　まだ公開されて間もないWindowsストア版スパイスレシピだが、茶屋氏は早くも手応えをつかむとともに、今回の開発によって「将来的にも新たな展望が開けてきた」と力強く述べる。

　「今回の開発で得たノウハウを生かして、他の既存iOS／AndroidアプリのWindowsストア対応にも積極的に取り組んでいきたいです。またWindowsストアアプリは、スマートデバイスだけではなくPC上でも動くため、将来的にはビジネスユーザーに広く使われることになる可能性が高いです。そこで今後は、ビジネスユーザー向けのWindowsストアアプリの企画・開発にもぜひ取り組んでみたいと考えています」（茶屋氏）

発注者側ユーザー企業からのコメント

ハウス食品グループ本社 広告統括部 魚野結氏

開発途中で最初にWindowsストア版スパイスレシピを見た感想、（iOS／Android版などとの違いもあれば）

魚野氏　新しいWindowsのUIを生かしたものになっていて、中身は同じデータベースを使用しているにもかかわらず、iOS／Android版よりもスタイリッシュで新鮮な印象を受けました。

Windowsストアアプリプラットフォーム全体の印象（UI的に、マーケット的に）

魚野氏　UIについては直感的に操作でき、使いやすく、普及が進むのではないかと思います。

今後Windowsストア版スパイスレシピに期待すること

魚野氏　現iOS／Androidとは違うユーザー層に使っていただきたいと思っていると同時に、WindowsストアアプリのPCとタブレットがハイブリットされている特徴を生かした機能や新たな利用シーンに期待しています。

Windowsストア版スパイスレシピ開発のきっかけがハウス食品にもあれば

魚野氏　ハウス食品は、スパイスをより多くの方々にご利用いただくために、スパイスレシピアプリを重要なコンタクトポイントとして考えており、常に新たなプラットフォームでの開発を検討しています。

　今回はWindowsアプリへの移植の検討を始めた段階で、タイミング良くラソナさんからご提案いただき、開発をスタートしました。