Mais conteúdo relacionado Semelhante a クロスプラットフォーム開発入門 (20) クロスプラットフォーム開発入門9. クロスプラットフォーム開発入門
• 2007年に iPhone、2010年に iPad が販売開始、2008年に
世界初の Android 搭載スマートフォンが販売開始
• 2014年に「Windows 8.1 with Bing」を搭載した低価格な
Windows タブレットが販売開始
• 全世界での年間出荷台数が10億台を突破!
• 日本国内のタブレット端末の年間出荷台数が700万台を突
破!2015年にはタブレット端末の年間出荷台数がノート
PC を超える!?
• スマートデバイスの急速な低価格化が現在も進行中
• 各デバイスや各 OS がそれぞれある程度のシェアを獲得し
ており、今後も競争が激化
スマートデバイスの台頭
9
10. クロスプラットフォーム開発入門
From RIA to HTML5
10
Adobe Flash・Adobe Flex・ Adobe AIR、Microsoft
Silverlight などの RIA (Rich Internet Application)
関連の技術は、HTML5 や iOS プラットフォームの台
頭によりその役目を終えようとしています。
各種デバイスや Web ブラウザが標準でサポートしな
い技術が衰退していくのは、ある意味正常な進化とい
えるかも知れません。
17. クロスプラットフォーム開発入門
主要 3 パターンの特徴
17
Architecture Features
Native
• 一般公開にはアプリストアによる配信が必要
• Web アプリに比べてパフォーマンスに優れている
• デバイスが提供する機能は全て利用できる
• コードの共通化が困難
• プラットフォーム毎の開発言語による開発が必要
Hybrid
• 一般公開にはアプリストアによる配信が必要
• Web View 上の機能は Native に比べてパフォーマンスが劣る
• デバイスが提供する機能の一部が利用できない可能性がある
• コードの部分的な共通化が可能
• Native 部分に関しては複数の開発言語による開発が必要
Web
• アプリストアによる配信が不要
• Native アプリに比べてパフォーマンスが劣る
• デバイスが提供する機能は一切使用できない
• コードの共通化が容易
• プラットフォーム毎の開発言語による開発は不要
19. クロスプラットフォーム開発入門
Native Application の開発環境
19
開発環境 iOS Android Windows
開発ツール
• Xcode IDE
• Interface Builder
• iOS SDK
• Macが必要
• Android Studio IDE
• Eclipse with ADT
• Android SDK
• Visual Studio
• Windows SDK
• Windows Phone SDK
開発言語
• Objective-C
• Swift
• Java SEのサブセット
+Android拡張
• Visual C++
• Visual C# .NET
• Visual Basic .NET
端末
• iPhone
• iPad
• Android Phone
• Android Tablet
• Desktop PC
• Note PC
• Ultrabook
• Tablet
• Windows Phone
20. クロスプラットフォーム開発入門
Native Application の配布環境
20
配布方法 iOS Android Windows
Public
• App Store
• 年間費用 $99
• 審査あり (重)
• Google Play
• 登録料 $25
• 審査あり (軽)
• Windows Store
• 登録料 9,800円
• 審査あり (重)
Private
• iOS Developer
Enterprise
Program (iDEP)
• 年間費用 $299
• 台数無制限
• 審査なし
• Google Play Private
Channel (Google
Appsアカウント必須)
• 1ユーザー月額500円
• 自社サイトでの独自配
布も可能
• 3rdベンダーのデバイス
管理ソリューション
• 審査なし
• SCCM
• Windows Intune に
よる Store アプリの
サイドローディング
展開
• 1ユーザー月額650円
(ユーザー毎に最大5
台のデバイスを管理
可能)
• 審査なし
21. クロスプラットフォーム開発入門 21
Native Application Solutions
RAD Studio Xamarin RoboVM
販売元
エンバカデロ・テクノロジーズ Xamarin OSS
(Apache License v2.0)
開発環境
RAD Studio Xamarin Studio
(Visual Studio Add-in も存在)
Xcode
Eclipse plugin
開発言語
Delphi/C++ C# Java
ランタイム
iOS アプリ:不要
Android アプリ:不要
Windows アプリ:不要
iOS アプリ:不要
Android アプリ:Mono
Windows アプリ:Mono/.NET
iOS アプリ:不要
Android アプリ:Dalvik/ART
Windows アプリ:JVM
特徴
UI を抽象化する FireMonkey
フレームワークを提供し、コン
ポーネントの部品化が可能。
Xamarin 社と Microsoft 社は
パートナーシップ関係にある。
UI コンポーネントはネイティ
ブのものと抽象化されたものの
2種類が使用可能。
Objective-C bridge により、
Java 言語から UIKit などの
Objective-C オブジェクトを直
接扱うことが可能。
参考価格
(1ライセンス)
Professional
¥213,408(税込)
BUSINESS $999 / year
ENTERPRISE ($1899 / year)
無料
(有償サポート開始予定)
22. クロスプラットフォーム開発入門
• エンバカデロ・テクノロジーズ社が開発・販売するラピッド
アプリケーション開発 (RAD) 向けのオブジェクト指向ビジュ
アルプログラミング環境
• 単一のソースコードで、iOS、Android、Windows、Mac に
対応したネイティブなアプリケーションの開発が可能
• ランタイム不要のネイティブコンパイルにより高速なパフォー
マンスを実現
• RAD Studio はデスクトップファースト開発をターゲットとし
た買い切り型のライセンス方式で Delphi または C++ で開発
• Appmethod はモバイルファースト開発をターゲットとした年
間ライセンス方式で Object Pascal または C++ で開発
• UI を抽象化する FireMonkey フレームワークを提供し、コン
ポーネントの部品化も可能
RAD Studio & Appmethod
22
23. クロスプラットフォーム開発入門
• 「Mono プロジェクト」を開発してきた米国の Xamarin 社が
開発・販売する統合開発環境を含むソフトウェア群
• Xamarin Studio という Mac でも開発可能な独自の IDE で開
発 (Visual Studio Add-in として組み込むことも可能)
• C# などの単一のソースコードで、iOS、Android、Mac に対
応したネイティブなアプリケーションの開発が可能
• Windows 用の .NET アプリの開発には Visual Studio が必要
• iOS アプリのビルド・デバッグには Mac が必要
• iOS アプリは、ipa 作成時にネイティブコードにコンパイル
• Android アプリは、apk に Mono ランタイムを同梱
• UI コンポーネントはネイティブのものと抽象化されたものの
2種類が使用可能
Xamarin(ザマリン)
23
24. クロスプラットフォーム開発入門
• RoboVM は Java の bytecode を ARM または x86 のネイ
ティブコードに変換するためのコンパイラ
• コンパイラと開発ツールは GPLv2、Runtime ライブラリや
Objective-C のブリッジは Apache License v2.0
• Xcode で開発 (Eclipse の plugin も提供されている)
• Maven Plugin や Gradle plugin も提供されている
• Java 言語だけで、iOS、Android、Mac、Windows に対応し
たアプリケーションの開発が可能
• iOS アプリのビルド・デバッグには Mac が必要
• Objective-C bridge により、Java 言語から UIKit などの
Objective-C オブジェクトを直接扱うことが可能
• 現時点 (2015年2月5日) の最新版は 1.0.0-beta-03
RoboVM
24
26. クロスプラットフォーム開発入門
Hybrid Application Solutions
26
PhoneGap
(Cordova)
Titanium Mobile Corona Monaca
対応端末
iOS
Android
Windows Phone
iOS
Android
iOS
Android
Windows Phone
iOS
Android
Windows Phone
開発環境
Xcode
Eclipse (ADT)
Node.js・Git
Titanium Studio
(Eclipse-based)
Composer GUI
Corona Editor
(Sublime Text plugin)
Monaca Cloud IDE
Monaca Debugger
Visual Studio
開発言語
HTML
CSS
JavaScript
JavaScript Lua HTML
CSS
JavaScript
動作環境
Web View JavaScript Engine
(JavaScriptCore,
V8, Rhino)
Corona Engine
(Lua VM)
Web View
その他
PhoneGap Buildの利
用にはAdobe
Creative Cloud のア
カウントが必要(有料)
Apache License 2.0
解析機能の利用やサ
ポートには有料プラン
が必要
OpenGL / OpenAL
ゲーム関連機能が豊富
Pro $49
Native 機能へのアクセス
に PhoneGap を使用
Enterprise 月額16万2千
円+追加ライセンス料
※PhoneGap は Adobe 社が提供する Apache Cordova (Apache License, Version 2.0) のディストリビューションの1つです。
27. クロスプラットフォーム開発入門
Apache Cordova-based Solutions
27
Vendor Solution 概要
Adobe PhoneGap Build クラウド上でモバイルアプリをビルドできるサービス。
Adobe PhoneGap Developer App 署名やコンパイル、アプリの再インストールが不要なテストツール。
Adobe PhoneGap Enterprise アプリケーション管理機能やサポート、トレーニングを提供。
IBM IBM Worklight アプリケーションのビルド、デプロイ、実行、管理など、開発ライフ
サイクルのあらゆるフェーズをサポートする支援ツール群を提供。
Oracle Oracle Mobile Application
Framework (Oracle MAF)
Eclipse 拡張 IDE で開発が可能。ロジックを Java で記述可能で、
パッケージングされた各プラットフォーム向けの軽量な JVM 上で動
作。MVC アーキテクチャを採用。80 を超えるコンポーネント、セ
キュリティ機能、オフラインモード、SQLite をサポート。
SAP SAP Mobile Platform
UI 開発ツールの SAP AppBuilder やアプリ更新、暗号化ストレージ
などの7機能を Cordova プラグインとして提供。オープンな標準技
術を採用し、B2E、B2B、B2C に対応。SQLite をサポート。
Microsoft Visual Studio Tools for
Apache Cordova
iOS のビルドには Mac が必要。Cordova で動作するフレームワーク
(AngularJS、WinJS、Backbone) を使用可能。SQLite をサポート。
Apache Cordova をベースとした MEAP (Mobile Enterprise
Application Platform) を複数の企業が開発・販売しています。
28. クロスプラットフォーム開発入門
• 端末・OS のサポート範囲
• Native API のサポート範囲
• UI コンポーネントの提供方法 (Native / 抽象化)
• UI コンポーネントの個数やカスタマイズの可否
• プラットフォーム固有コードの範囲
• Web View or ランタイム
• セキュリティ関連機能の提供範囲
• IDE や UI ツールの提供の有無
• 開発ライフサイクルのサポート範囲
(開発、テスト・配備・管理)
• コスト
開発
テスト
配備
管理
MEAP 選定時の考慮点
28
31. クロスプラットフォーム開発入門
Responsive Web Design(RWD)
31
• 端末の種類や画面解像度に応じて、コンテンツが各端末に最適
な状態で表示されるように単一の HTML や CSS でデザイン
する手法
• HTML の meta 要素に Viewport を指定し、ブラウザの表示
領域のサイズや倍率、ズームの可否を設定
• CSS3 の新しい要素である Media Queries を使用し、端末の
画面解像度や端末の向きなどに基づいて適用するスタイルを容
易に変更可能
• Internet Explorer 8 以下に対応する場合は別途考慮が必要
<!-- viewport を設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- メディアクエリを link タグで指定 -->
<link rel="stylesheet" media="mediatype and (min-width: 768px)" href="768.css">
<!-- メディアクエリを CSS で指定 -->
@media screen and (min-width:768px){}
32. クロスプラットフォーム開発入門
リセット CSS とノーマライズ CSS
32
リセット CSS ノーマライズ CSS
概要
各ブラウザが独自に定義してい
るデフォルトスタイルシートの
スタイルをリセットするための
CSS
デフォルトスタイルシートの有
用なスタイルを維持しつつ、ブ
ラウザ間の差異を補正するため
の CSS
有名
ライブラリ
• YUI Library の reset.css
• Eric Meyer の Reset CSS
• Normalize.css
備考
本来のデフォルトスタイルをす
べて無効にしてしまうため、必
要な要素のスタイルを全て再指
定しなければならなくなり、メ
ンテナンスが困難になる可能性
がある。
HTML エレメントのスタイル正
常化やブラウザのバグ補正など
もおこなってくれる。スマート
フォン用ブラウザや HTML5 も
サポートしており、Bootstrap
でも使用されている。
クロスブラウザ対応で問題となるブラウザ間のスタイルの差
をなくす方法として、下記の 2 種類の手法が存在します。
34. クロスプラットフォーム開発入門
Modernizr
34
• ブラウザの実装機能を判定するための JavaScript ライブラリ
• User Agent によるブラウザ判定や IE の条件付きコメントではメ
ンテナンスに掛かるコストが大きいため、機能単位での判定が可
能なライブラリが誕生
• HTML5 と CSS3 をサポート
• 検証が必要な機能に絞ったカスタマイズされたスクリプトをダウ
ンロードサイトで生成可能 (チェックボックスで選択)
<!– htmlタグのclass属性に各機能が使えるかどうかのリストが追加されます -->
<html class="js boxshadow cssanimations rgba no-indexeddb no-svg">
// JavaScriptで判定
if (Modernizr.svg) {window.alert('Support');} else {window.alert('Unsupported');}
/* CSSで判定 */
.rgba div {color: rgba(0,0,255,0.5);}
.no-rgba div {color: #7878F3;}
35. クロスプラットフォーム開発入門
Single Page Application(SPA)
35
• 単一ページ (HTML) で作成された Web アプリケーション
• JavaScript と AJAX を活用し、動的にページ内のコンテンツを
生成・削除することにより、優れた応答性と UX を実現可能
• HTML5 の History API (pushState や popState など) や
URL の hash 操作で URL ルーティングを実現
• アプリケーションの処理の大半をクライアント側で実行可能
• 頑張ればオフライン稼働させることも可能
• 多数のフレームワークやライブラリが存在し現在も進化中
• 大規模なアプリケーションでは、ダウンロードサイズやメモリ
リーク、パフォーマンスが問題になりやすい
• バックエンドとは異なる開発環境が必要
38. クロスプラットフォーム開発入門
フロントエンド開発
38
Mobile First や SPA のアプリケーション開発では、フ
ロントエンンド側のコード量は増加し、 より複雑な
アーキテクチャとなります。
バックエンド開発とは異なるスキルセットが必要にな
り、日々新しい技術が登場し進化し続けているため、
より技術力の高いプログラマの確保が重要となります。
また、バックエンド開発との掛け持ちは、今後ますま
す困難になっていくものと思われます。
39. クロスプラットフォーム開発入門
バックエンド開発
39
Mobile First や SPA のアプリケーション開発では、
バックエンンド側のコード量は減少し、 JSON を用い
た REST API 中心のアーキテクチャとなります。
バックエンドに求められる機能は、ユーザ認証やプッ
シュ通知、データの永続化、帳票作成、バッチ処理な
どに限定され、これまで以上に API の設計が重要にな
ります。
REST API
Back-end
Server
DB
帳票
認証
Batch
42. クロスプラットフォーム開発入門
Mobile Device Management(MDM)
42
1. 紛失・盗難時の情報漏えい対策
パスワードロックの強制化やリモートロック・ワイプ (データ消去)
2. 端末の不正利用の防止
アプリケーションやカメラなどのデバイス機能の利用制限
3. 端末情報の収集とポリシー適用
OS のバージョンやアプリケーション、セキュリティポリシーの一元管理
MDM は、スマートデバイスを安全に効果的に管理する
ためのソリューションです。各社から様々な製品が販売
されており、主に以下の 3 つの機能を提供しています。
43. クロスプラットフォーム開発入門
Bring Your Own Device (BYOD)
43
BYOD を簡単に説明すると、従業員の私物端末を企業
内に持ち込んで業務に活用することです。日本でも数年
前から一部の企業が取り入れ始めています。
BYOD には、個人所有の端末を自宅や外出先で活用す
ることで業務効率が向上したり、企業の端末支給のコス
トを削減できるなどのメリットがあります。
その一方で、情報漏洩などのセキュリティリスクは高く
なるため、BYOD を導入する企業は、適切なルールの
策定を行ったり、セキュリティブラウザや MDM を導
入する必要があります。
44. クロスプラットフォーム開発入門
主要機種のスペック
44
Device 画面 Size 解像度 縦横比 初期 OS 販売時期
iPhone6 4.7 1,334 x 750 16 : 9 iOS 8 2014年9月
iPhone6Plus 5.5 1,920 x 1,080 16 : 9 iOS 8 2014年9月
iPhone5・5S 4 1136×640 16 : 9 iOS 6/7 2012年9月/2013年9月
iPhone4・4S 3.5 960×640 3 : 2 iOS 4/5 2010年6月/2011年10月
iPad Air 2 9.7 2048×1536 4 : 3 iOS 8.1 2014年10月
iPad mini 3 7.9 2048×1536 4 : 3 iOS 8.1 2014年10月
iPad Air 9.7 2048×1536 4 : 3 iOS 7 2013年11月
iPad mini 2 7.9 2048×1536 4 : 3 iOS 7 2013年11月
Nexus 9 9 2,048×1,536 4 : 3 Android 5.0 L 2014年11月
Nexus 6 6 2,560×1,440 16 : 9 Android 5.0 L 2014年12月
Nexus 7 (2013) 7 1,920 x 1,200 16 : 10 Android 4.3 2013年8月
Nexus 5 5 1,920×1,080 16 : 9 Android 4.4 2013年11月
Surface Pro 3 12 2,160×1,440 3 : 2 Windows 8.1 2014年6月
Surface Pro 2 10.6 1,920×1,080 16 : 9 Windows 8.1 2013年10月
46. クロスプラットフォーム開発入門
主要 3 パターンの比較
46
Native Hybrid Web
HTML5+CSS3
OS
JavaScript
OS
Native Code
OS
Native Code
Web View
Browser
HTML5+CSS
JavaScript
機能・実行速度・オフライン稼働
配布コスト・開発コスト・要員確保
• ゲームなどでパフォーマンスや最適化を重視するなら Native
• 配布容易性やコストを重視するなら Web
• コストを重視したいけど端末機能を利用したいなら Hybrid