2012年のWindows 8リリースにともなって、新しく開設されたWindows ストア。Windows 8はリリースから2カ月超でライセンス販売数が6000万本となっており、今後、既存WebサービスのWindows ストアアプリ化や新規リリースを検討するサービス提供者は、より増えそうな気配だ。

『エンジニアtype』の姉妹サイトである転職サイトの『@type』と『女の転職@type』も、この「WebサービスのWindows ストアアプリ化」をWin 8リリース後に検討し始め、昨年12月末にアプリを公開している。

その開発期間は、企画・要件定義からカウントするとおよそ1カ月、実装～審査だけでいうと約2週間。既存Webサービスのアプリ化とはいえ、一般的なアプリ開発プロジェクトに比べて短期間でリリースまでこぎ着けた。

開発体制は、『@type』および『女の転職@type』を運営するキャリアデザインセンターの企画開発チームと、テクノロジーベンチャー・ジャムロジックの面々。

加えて、ジャムロジックのファウンダーである野村亮之氏と既知の仲だった日本マイクロソフトのエバンジェリスト渡辺友太氏が、相談役として開発事例を共有するなどのサポートを行っていた。

彼らの開発エピソードから、Windows ストアアプリを短期間でリリースするためのノウハウを探ってみよう。

1. アプリ企画フェーズのGood & Bad

サービス開発、アプリ開発では「当然」と思える話だが、すでにあるWebサイトをアプリ化する場合、先にモックアップを作ってから調整を加えていくやり方も少なくない。

しかし、今回のプロジェクトでディレクション業務を担当したジャムロジックのチーフディレクター伊勢香織さんは、「Windows ストアアプリの場合、詳細なフレームワークを書き出してから開発に入った方が効率的」だと話す。

理由は、Windows 8/RTが採用する独自のインターフェースでは横スクロールのアクションが基本で、かつ3階層程度で構成することが望ましいからだ。

「モダンUIという新しい概念の中で、転職サイトの求人情報をどう見せるか、そしてアプリでは何を重視してユーザーに届けるのか。情報と機能を改めて整理してから動いた方が、破綻が起きず、実装も早く終えることができると思います」（伊勢さん）

Windows ストアアプリは、入り口はネイティブでも、その後の詳細ページはWebとして見せることができる。UIに関していえば、スナップビュー（2分割表示）の画面での表示のさせ方を考えておくのも大切だ。

これらにどう対応するかを踏まえた上で、『@type』と『女の転職@type』では

という形で設計した。結果として、最も時間を割いたのはこのフェーズだったそうだ。

キャリアデザインセンターのエンジニア・波形孝は、「ここまで決めてしまえば、後は各求人情報をRSSから一つのタグで吐き出せるように設定し直すだけだったので、手間はさほどかからなかった」という。

2. デザイン＆実装フェーズのGood & Bad

Windows ストアアプリは、従来のWindowsアプリのようにC++やC#といった.NET言語で開発しなくても、Web標準の技術（＝HTML5＋CSS3、JavaScript）で開発することが可能だ。

また、Windows ストアアプリはJavaScriptで記述することができるため、jQueryなど人気のライブラリを使うこともできる。

つまり、「デザインも実装も、いわゆるWeb開発と同じ感覚で行えるし、サーバサイドをアプリ仕様に調整する必要もない」（野村氏）ため、それだけ期間短縮ができるというわけだ。

『@type』『女の転職@type』のアプリでも、このメリットを最大限に活かして開発を進めていったが、ジャムロジックのチーフアーキテクトの立石直敬氏は「今振り返ればもっと早く実装できたかもしれない」と打ち明ける。

これは実装後に知った事実だそうだが、Windows ストアアプリの審査時は、「起動の速さ」も重視されるからだ。

「最初はそれを理解していなかったので、スタート画面の表示のほかに、ライブ・タイル（モダンUIの特徴であるグリッドデザイン）の準備や、バックエンドで動く部分との連動などを全部起動時に行う仕様で作っていました」（立石氏）

これらを、アプリ側で処理するもの/ネイティブ・バックエンドで処理できるものに切り分けて整理し、アプリに搭載する機能の優先順位付けをしておくことが大事だったと話す。

かつ、Microsoftが提供するWindowsデバイスにアクセスするためのライブラリWin JSを利用すれば、

などといったWindows ストアアプリ独自の機能・スタイルを簡単に実装することが可能となる。MSDN内に、Windows Store appsのサンプルコードも用意されているので、コードを引っ張ってくるだけで実装できるのだ。

これらを念頭に置いた上で、どう機能のすみ分けを行うかも先に決めておくことが、開発の効率化につながるだろう。

ちなみにCSSについて、今回の開発ではMicrosoftが推奨するVisual Studioのテンプレートを利用しており、これも開発期間の短縮化につながったと立石氏は話す。

が、野村氏は「Windowsの推奨するスタイルでOKという場合は活用した方が得策だけれど、『もっとインタラクティブ性を出したい』などとオリジナルの仕様にこだわって開発したい人は、自分たちが使い慣れたテンプレートを利用しても良いかもしれない」と補足する。

理由は単純で、「MSのCSSテンプレートはいじるのが難しい」（野村氏）から。やりたいことの内容に応じて、jQueryなど日ごろのWeb開発で利用しているフレームワークをチョイスするのもアリかもしれない。

3. 審査～リリースフェーズのGood & Bad

企画～実装までは順調に進んでいた『@type』＆『女の転職@type』のアプリ開発だったが、リリースにおける“高い壁”となったのはこのフェーズだったという。

まず見逃していたのが、アプリリリース時のアカウント作成における少額課金の存在。Windows ストアアプリでは、アカウントの有用性を確認する意味で、有料アプリ・無料アプリを問わず「口座確認を目的とした少額課金」が課される場合がある。

この事実を知らなかったキャリアデザインセンター開発陣は、『@type』のアプリ申請を出した後、待ちの姿勢を取っていた。

「当初、アップ申請は初回であれば6～7日間、アップデート申請も1～2日くらいで通ると聞いていたので、ここから逆算した上でさらに若干の余裕を見て、リリース予定日の半月前くらいに申請を出していました。なのに、7日経っても何の連絡もなく、不安に思って申請ページにアクセスしてみたら、課金処理が必要なんだと初めて知り……。この時はかなり焦りました」（キャリアデザインセンター・小笠原晋也）

結果的に、この課金をすぐに済ませると、1日強で申請がおりたという。実はアプリ審査は終了していて、アカウントの有効性確認を待つのみ、という状態だったのだ。

もう一つ頭を悩ませたのは、リジェクトされる理由が分からなかった点。

『@type』の審査通過と同時期に、続いて『女の転職@type』のアプリ申請を行ったが、ほとんど同じ仕様で作っていたにもかかわらずリジェクトされたという。

「Microsoftさんからは『クラッシュする』とだけ通達があったのですが、こちらでもテストを繰り返し行っていたので、なぜリジェクトされるのか原因が分かりませんでした」（伊勢さん）

クラッシュと判断されるかもしれない部分を推察し、2度目の申請を出したものの、それも「NG」との返事が。そこで、申請のやりとりを行うページにて、「どこがダメなのか」、「どうクラッシュするのか」を片言の英語と日本語で質問した。

すると、Microsoftの審査担当者から丁寧なレスポンスが帰ってきて、徐々に原因が分かるようになったそうだ。

「結論から言えば、前述した起動速度の遅さが原因でした。申請前のテストはそこそこ高性能な端末で行っていたので、よりスペックの低い認定キットで試してみたら、確かに起動が遅く……。認定キット自体がハードウエア依存する部分まで気が回っていなかったんです」（立石氏）

こうして原因が判明した後は、コードリファクタリングを行いつつ、最初の起動をTOPページ表示のみの仕様に変更。「社内には低電力PCもあったので、申請前にそちらでもテストをしておいた方が良かった」（野村氏）という教訓が得られたという。

「最後は余談ですが、『@type』『女の転職@type』ともにクリスマス前にリリースすることを目標にしていたので、いよいよ12月25日が迫ってきたある日、担当者宛てに『わたしたちに良いクリスマスプレゼントをください！』とコメントしたんですね。そうしたら、その1日後に審査通過の連絡が来まして。Microsoftさんは、話の分かる会社だなぁと（笑）」（伊勢さん）

取材・文／伊藤健吾（編集部）　撮影／小林 正

※株式会社キャリアデザインセンターは、2019年１月８日よりサービス名称を以下の通り変更しました。
『@type』→『type』
『女の転職@type』→『女の転職type』