モバイルアプリケーション開発のトレンド ネイティブアプリケー...

31
モバイルアプリケーション開発のトレンド ネイティブアプリケーションの潮流と Windows 8.1 日本マイクロソフト株式会社 デベロッパー&プラットフォーム統括本部 エバンジェリスト 高橋 忍 ROOM A

Transcript of モバイルアプリケーション開発のトレンド ネイティブアプリケー...

Page 1: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

モバイルアプリケーション開発のトレンドネイティブアプリケーションの潮流と

Windows 8.1

日本マイクロソフト株式会社デベロッパー&プラットフォーム統括本部エバンジェリスト

高橋 忍

ROOM

A

Page 2: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

本セッションの目的Native Application for Mobile Devices.

Webアプリとネイティブアプリを比較してネイティブアプリを作る心構えを考えてもらうこと

Windows 8.1 が提供するアプリの環境を知っていただくこと

Page 3: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

今日の内容Agenda

モバイルファーストのアプリケーション

Windows 8.1 で作る高品質アプリケーション

ユーザーとアプリを結ぶWindows ストア

Page 4: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

モバイルファーストのためのアプリケーション

Page 5: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

あなたのモバイルデバイスは?

週に3回以上持ち帰る / 週に1回以上外で使う(客先/職場/自宅等を除く)

Page 6: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

モバイル = スマフォ & タブレットそれとWebブラウザとアプリがセット

Page 7: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

Web

Application

Web アプリケーションの言い分デスクトップアプリからWebアプリにした理由

配布・更新の容易さ

検索/発見

デバイス非依存

Web デザイナー

開発の容易性

Native

Application

Page 8: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

Web

Application

Native

Application

Native アプリケーションネイティブアプリは欠点をどのように克服したのか?

高品質

配布・更新の容易さ

検索/発見

デバイス非依存

デザイナー

開発の容易性

Store

Page 9: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

高品質を実現するテクノロジ

Native

WebHTML5 / CSS

パフォーマンス

WebGLWebkit Native

デバイス連携

Flash

オフライン入力デバイス

フルスクリーンGPU/Native Graphics

DRM

アプリ間連携

Page 10: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

どちらを使うべきか?

Native

WebHTML5 / CSS

パフォーマンス

WebGLWebkit Native

デバイス連携

Flash

オフライン入力デバイス

フルスクリーンGPU/Native Graphics

DRM

アプリ間連携

やりたいことができて 手間がかからないなら

どちらでもよし!

Page 11: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

高品質を実現するカード

Native

WebHTML5 / CSS

パフォーマンス

WebGLWebkit Native

デバイス連携

Flash

オフライン

入力デバイスフルスクリーン

GPU/Native Graphics

DRM

アプリ間連携

Page 12: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

Facebook

Native

Web

開発の負担軽減のためHTML5で1本化部分改修の難しさパフォーマンスと安定性の低下リリース毎に全ブラウザでチェック

ネイティブ化へ新規開発の負担

パフォーマンス向上機能の追加

Page 13: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

ネイティブアプリを作るならそのメリットを生かしたアプリケーションを

より高品質なアプリを

作りこみ

UX の強化

Native ならではの機能を利用する

デバイス連携、入力デバイス対応

アプリケーション間連携の利用

DRMコンテンツの表示

Page 14: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

Windows 8.1ならプラットフォームを生かしたネイティブ アプリ開発を

圧倒的にネイティブアプリのメリットが大きい

作りこめる

よりリッチな表現が可能

ユーザーのニーズに合わせた細かい対応ができる

Windows 8.1 アプリならでは

オフラインでも利用できる

他のアプリと連携してみる

PCに備わったデバイス・センサーの利用

Webが必須な時以外は

ネイティブアプリ開発推奨

Page 15: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

Windows 8.1 で作る高品質アプリケーション

Page 16: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

開発プラットフォーム特異な言語で効率よく開発を

利用可能な開発言語

XAML + C#/VB

XAML + C/C++

HTML5/CSS + JavaScript

Direct 3D

UIとロジックの完全な分離

Page 17: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

デザイナーとの連携を効率よくデザイとデザインスキルを生かすプラットフォーム

Blend によるデザイン

Windows ストアアプリのデザインパターン

スタイル & テンプレート & リソース

パスオブジェクトと 結合

キーフレームアニメーション

Photoshop / Illustrator Import

Shortcut

Page 18: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

アプリケーション間連携全てを作る必要はない

タイル

スタート画面に情報表示

共有チャーム

他の登録アプリと連携

ランチャー

ファイルやリンクで連携

スタート

Launcher

Page 19: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

タブレットへの最適化スマートフォンアプリをタブレットで実現する

拡大並列 配置OSによる自動拡大とViewBox を利用した拡大 ハブコントロールで実現可能

パネルコントロールで画面にあった再配置を

Page 20: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

新しいタブレットアプリスタイル脇役としてのアプリケーションの提供

Desktop

&

Your Application

Open Browser

from

Your Application

Communication

with

Other Application

Page 21: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

ユーザーとアプリを結ぶWindows ストア

Page 22: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

Windows ストアWebのメリットをアプリの世界へ

Page 23: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

Windows ストアWebのメリットをアプリの世界へ

Page 24: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス
Page 25: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

Windows ストアWebのメリットをアプリの世界へ

審査本社専門担当員による自動審査と手動審査が

実施されるため、アプリケーションの品質維持と法的な問題を回避できます。

ユーザーからのフィードバックと評価

一元管理多言語アプリの管理多数のバージョン管理など複数のアプリを同じエントリーとして管理

Page 26: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

Windows ストアWebのメリットをアプリの世界へ

$19/年一般の場合。企業アカウントは $99/年

Windows Phone のストアにも登録可能です

Free!独自の課金システムを使った場合なら

70%

80%有償アプリの収益は70%ですが

売上が$25kを超えると80%になります。

Page 27: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス
Page 28: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

まとめ

Page 29: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

Windows 8.1のアプリ環境高い品質のアプリケーションを作ることができる環境

Windows ストアはアプリの配布, 更新, そして審査を通じてアプリの品質を提供

開発者を支援するVisual Studio と Blend

デザイナーのスキルを高いレベルで発揮できる高いデザイン機能

アプリから利用できるOSの様々な機能

Page 30: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

まずは作ってみてください作るための情報は

Windows ストアアプリデザイン

http://aka.ms/8designjp

Windows ストアアプリへの道(ポータル)

http://aka.ms/8store

Windows 8 Clinic(サポート)

http://aka.ms/8clinic

Page 31: モバイルアプリケーション開発のトレンド ネイティブアプリケー …download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E-A45… · Web HTML5 / CSS パフォーマンス

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the

part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.