TechトレンドVol.90

2週間でWindows ストアアプリを開発してみて分かった、7つのGood&Badプラクティス~『@type』アプリ開発の場合

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

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

@typeWindows

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

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

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

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

今回のアプリ開発プロジェクトにかかわった面々
今回のアプリ開発プロジェクトにかかわった面々

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

◎ モックアップを作る前に、ワイヤーフレームの詳細設計を行った

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

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

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

Win アプリには、アプリ画面を左右にスナップすると上画像のようにWebページと並列表示できるスナップビュー機能も
Win アプリには、アプリ画面を左右にスナップすると上画像のようにWebページと並列表示できるスナップビュー機能も

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

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

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

①[アプリTOP→仕事内容カテゴリ→求人一覧]の3階層に情報を整理
②上記3階層の情報はアプリで表示、その後の各社求人詳細はWebページで表示
③求人検索機能は捨てて、RSSから一括して求人情報を引っ張ってくる仕様に

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

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

【エバンジェリスト渡辺氏の一言アドバイス】
Windows 8/RTが新たに採用したモダンUIは、ほかのOS用アプリとは異なる部分が多いので、最初にワイヤーフレームを詳細に決めておくのは開発の効率化につながると思います。MSDN(開発者向けのポータルサイトでも、Windows ストアアプリ開発のファーストステップは「アプリの長所を決めるところから」と掲載しているほど、大事な点なんです。

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

○ やり慣れたHTML/CSS/JavaScriptで開発した
× 起動時に行う通信や処理を詰め込み過ぎた
△ Microsoftが提供するCSSテンプレートを採用した

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

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

UIデザインは用意された何案かを紙で出し、すべてのページの見え方をその場で確認し合った
UIデザインは用意された何案かを紙で出し、すべてのページの見え方をその場で確認し合った

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

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

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

今回のアプリ開発で中心的役割を担った、ジャムロジックの(左から)伊勢さん、立石氏、野村氏の3人
今回のアプリ開発で中心的役割を担った、ジャムロジックの(左から)伊勢さん、立石氏、野村氏の3人

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

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

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

■ ライブ・タイル対応
■ アプリバー&チャーム(画面右に出る「検索」「共有」「設定」などの統合BOX)表示
■ コントラクト機能(アプリが持つ機能を、ほかのアプリに提供するもの)の追加

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

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

【エバンジェリスト渡辺氏の一言アドバイス】
今回陥ったような起動速度の問題は、データ取得のタイミングを工夫することで解決することが多いです。Webの標準技術で開発できるとはいえ、ローカル環境で動作していますので、データの取得・出力を一度にすべて行わず、適宜非同期に行う必要があります。

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

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

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

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

× アプリ申請後、返事が来るまで「放置」していた
× 認定キットでのテストは高機能機種だけでやっていた
◎ 申請時のコメント欄で、リジェクトされる理由を細かく質問した

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

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

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

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

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

【エバンジェリスト渡辺氏の一言アドバイス】
Windows ストアアプリの申請ページでは、現在アプリ審査のどのステップにあるか、どこまで進んでいるかなど、ある程度リアルタイムで分かるようになっています。ほかのOSアプリの審査でよく聞く「審査プロセスとポイントがブラックBOX」という不安を解消するため、このような取り組みを行っているので、申請後もこまめにチェックしてもらいたいと思います。

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

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

順調だった開発プロジェクトが、最終段階で頓挫した時の「焦り」の心境を吐露し合う開発チーム
順調だった開発プロジェクトが、最終段階で頓挫した時の「焦り」の心境を吐露し合う開発チーム

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

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

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

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

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

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

【エバンジェリスト渡辺氏の一言アドバイス】
今回の例のように、アプリの申請時には担当者へのコメントを記入することができます。審査の結果について担当者からコメントがついて返ってくることも少なくないので、アプリの内容や使い方についての補足、再申請の際は修正の内容や説明をぜひ記入してみてください(日本語でも大丈夫です)。

取材・文/伊藤健吾(編集部) 撮影/小林 正

この記事が気に入ったらいいね!しよう

エンジニアtypeの最新情報をお届けします

RELATED POSTS関連記事

JOB BOARD編集部おすすめ求人

この記事に関連する求人・キャリア特集


記事検索

サイトマップ



株式会社富士通エフサス【ポジションマッチ登録】 オープンポジション

株式会社ローソンエンタテインメント データ解析・運用/業務未経験OK/人…

森永乳業株式会社 システム開発(web・オープン系・新規技術)◆ITを活…

株式会社コロプラ【ポジションマッチ登録】 オープンポジション

株式会社日進サイエンティア PM候補/設立以来、無借金経営/想定年収600…

旭化成株式会社 プラントエンジニア職

アクサス株式会社 システムインテグレーション事業部 エンジニアリンググ…

ゼネラルエンジニアリング株式会社【(株)マイナビの100%子会社】 モノ…

ソニーエンジニアリング株式会社 [電気設計] ~回路設計/デジタル回路、ア…

株式会社ZMP エレキエンジニア◆ロボット製品に携わる◆平均残業20時間…

SIerって本当にヤバいの? ひろゆきが語る、業界ごと沈まな...

4年後の「Badシナリオ」から考える、2020年代も重宝され...

シリコンバレーで働いて気付いた「技術力向上」だけに固執するエ...

英文メールでよく見る「略語」の意味は? 海外エンジニアに聞い...

「視点を変えればエンジニアのキャリアは激変する」LIFULL...

エンジニア転職フェア開催 IT&モノづくりエンジニアを求める優良企業が大集結!