エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

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

タグ : Windows, アプリ開発, ジャムロジック 公開

 

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

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

windows-store-apps-ver01

■『@type』のストアアプリ(画像左)のDLはコチラから 
■『女の転職@type』のストアアプリ(画像右)のDLはコチラから

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

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

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

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

winapps-dev-team

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

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

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

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

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

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

snapview-image

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

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

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

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

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

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

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

[エバンジェリスト渡辺氏の一言アドバイス]

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

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

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

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

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

dev-scene-1

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

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

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

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




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア Web プログラマー スキルアップ ソーシャル アプリ シリコンバレー 起業 プログラミング キャリア スマートフォン Android SIer 技術者 えふしん クラウド UI btrax スペシャリスト Webサービス アプリ開発 Twitter ギーク Facebook CTO デザイン Apple IoT Brandon K. Hill Google ツイキャス SNS 英語 モイめし 世良耕太 IT 30代 赤松洋介 採用 コーディング 20代 村上福之 勉強会 プロジェクトマネジメント UX Ruby 法林浩之 ITイベント Webエンジニア モノづくり 受託開発 ひがやすを 五十嵐悠紀 LINE ビッグデータ 中島聡 ウエアラブル IT業界 ドワンゴ MAKERS コミュニケーション ロボット ハードウエア SI Webアプリ 女性 ゲーム インフラ iPhone 女性技術者 高須正和 ソーシャルゲーム マイクロソフト トヨタ イノベーション 研究者 ノウハウ tips 息抜き システム プラットフォーム イベント 和田卓人 チームラボ 自動車 メイカームーブメント ソニー エンジン 教育 UI/UX 開発者 iOS オープンソース グローバル Java サイバーエージェント 女子会 メーカー 家入一真 ソフトウェア 増井雄一郎 スーパーギーク コミュニティ IPA ニュース 40代 GitHub 日産 TDD テスト駆動開発 グーグル 音楽 モバイル PHP ソフトウエア TechLION

タグ一覧を見る