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

タグ一覧を見る