クロスプラットフォーム開発入門

クロスプラットフォーム開発入門

February 2015

@minazou67


はじめに

本スライドは、クロスプラットフォー

ム開発の概要について広く浅く解説し、

短時間でクロスプラットフォーム開発

に関する知識を網羅的に学習すること

を目的としています。

2

• 本スライドでは、各ソリューションに関する詳細な技術情報については取り扱いません。

• 本スライドに掲載されている会社名、製品名、サービス名、ロゴは、各社・各団体の商標または登録商標です。


Target

• クロスプラットフォーム開発って

何？という人

• クロスプラットフォーム開発には

興味があるけど実際に開発した経

験はないという人

3


Goal

クロスプラットフォーム開発を実現

するための様々なソリューションの

特徴、メリット・デメリットを学び、

要求に応じて最適なソリューション

を提案できるスキルを身に付けま

しょう。

4


Cross-platform

development

5


クロスプラットフォーム開発

クロスプラットフォーム（英: cross-platform）とは、

異なるプラットフォーム（例えばPC/AT互換機と

Macintosh、あるいはWindows・Mac OS X・

FreeBSD・Linuxなどのように、仕様が全く異なる機

械（ハードウェア）またはオペレーティングシステ

ム）上で、同じ仕様のものを動かすことが出来るプロ

グラム（ソフトウェア）のことを言う。

6

「クロスプラットフォーム」(2014年2月15日 (土) 08:35 UTC版)『ウィキペディア日本語版』より引用

簡単にいうと、複数のプラットフォームで動作するアプリケーションを開発することです。


マルチプラットフォーム？

7

本スライドではクロスプラットフォームという用語を

用いていますが、マルチプラットフォームという同様

の用語も存在します。両者には明確な違いはないよう

ですが、マルチプラットフォームというとより多くの

プラットフォームに対応しているというイメージであ

り、2 種類のプラットフォームにのみ対応している場

合などは、クロスプラットフォームというのが相応し

いと思われる。

マルチ？クロス？


Background

8


• 2007年に iPhone、2010年に iPad が販売開始、2008年に世界初の Android 搭載スマートフォンが販売開始

• 2014年に「Windows 8.1 with Bing」を搭載した低価格なWindows タブレットが販売開始

• 全世界での年間出荷台数が10億台を突破！

• 日本国内のタブレット端末の年間出荷台数が700万台を突破！2015年にはタブレット端末の年間出荷台数がノートPC を超える！？

• スマートデバイスの急速な低価格化が現在も進行中

• 各デバイスや各 OS がそれぞれある程度のシェアを獲得しており、今後も競争が激化

スマートデバイスの台頭

9


From RIA to HTML5

10

Adobe Flash・Adobe Flex・ Adobe AIR、Microsoft

Silverlight などの RIA (Rich Internet Application)

関連の技術は、HTML5 や iOS プラットフォームの台

頭によりその役目を終えようとしています。

各種デバイスや Web ブラウザが標準でサポートしな

い技術が衰退していくのは、ある意味正常な進化とい

えるかも知れません。


• スマートデバイスの機能・スペックの向上、画面の大型化により、本格的な業務アプリケーションの開発が可能に

• 時代の変化に伴う IT 利用シーンの拡大

• 低価格化による IT 投資効果への期待

• 企業のイメージアップ戦略の一環としての活用

• 機会損失の減少、業務プロセス改善、ペーパレス化領域の拡大を目的とした活用

• スマートデバイスの企業導入率は年々増加傾向にあり、今後も企業のスマートデバイス活用は進む

企業のスマートデバイス活用

11


Platform

12


Smartphone

Tablet

PC

プラットフォームの種類

13

MAC

Android Phone

Android Tablet

iPhone

iPad Windows Tablet

Windows Phone

WindowsDesktop PC

WindowsNote PC


プラットフォームの構成要素

14

画面解像度

CPU

タッチパネル

アプリ配信基盤

OS ブラウザ

画面サイズ

開発環境端末固有機能


Solutions

15


クロスプラットフォーム開発の主要 3 パターン

16

Native Hybrid Web

HTML5+CSS3

OS

JavaScript

OS

Native Code

OS

Native Code

Web View

Browser

HTML5+CSS

JavaScript


主要 3 パターンの特徴

17

Architecture Features

Native

• 一般公開にはアプリストアによる配信が必要• Web アプリに比べてパフォーマンスに優れている• デバイスが提供する機能は全て利用できる• コードの共通化が困難• プラットフォーム毎の開発言語による開発が必要

Hybrid

• 一般公開にはアプリストアによる配信が必要• Web View 上の機能は Native に比べてパフォーマンスが劣る• デバイスが提供する機能の一部が利用できない可能性がある• コードの部分的な共通化が可能• Native 部分に関しては複数の開発言語による開発が必要

Web

• アプリストアによる配信が不要• Native アプリに比べてパフォーマンスが劣る• デバイスが提供する機能は一切使用できない• コードの共通化が容易• プラットフォーム毎の開発言語による開発は不要


Native Application

18


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


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

Native Application Solutions

RAD Studio Xamarin RoboVM

販売元エンバカデロ・テクノロジーズ Xamarin OSS

(Apache License v2.0)

開発環境RAD Studio Xamarin Studio

(Visual Studio Add-in も存在)XcodeEclipse plugin

開発言語Delphi／C++ C# Java

ランタイム

iOS アプリ：不要Android アプリ：不要Windows アプリ：不要

iOS アプリ：不要Android アプリ：MonoWindows アプリ：Mono/.NET

iOS アプリ：不要Android アプリ：Dalvik/ARTWindows アプリ：JVM

特徴

UI を抽象化する FireMonkey フレームワークを提供し、コンポーネントの部品化が可能。

Xamarin 社と Microsoft 社はパートナーシップ関係にある。UI コンポーネントはネイティブのものと抽象化されたものの２種類が使用可能。

Objective-C bridge により、Java 言語から UIKit などのObjective-C オブジェクトを直接扱うことが可能。

参考価格(1ライセンス)

Professional￥213,408（税込）

BUSINESS $999 / yearENTERPRISE ($1899 / year)

無料(有償サポート開始予定)


• エンバカデロ・テクノロジーズ社が開発・販売するラピッドアプリケーション開発 (RAD) 向けのオブジェクト指向ビジュアルプログラミング環境

• 単一のソースコードで、iOS、Android、Windows、Mac に対応したネイティブなアプリケーションの開発が可能

• ランタイム不要のネイティブコンパイルにより高速なパフォーマンスを実現

• RAD Studio はデスクトップファースト開発をターゲットとした買い切り型のライセンス方式で Delphi または C++ で開発

• Appmethod はモバイルファースト開発をターゲットとした年間ライセンス方式で Object Pascal または C++ で開発

• UI を抽象化する FireMonkey フレームワークを提供し、コンポーネントの部品化も可能

RAD Studio & Appmethod

22


• 「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 コンポーネントはネイティブのものと抽象化されたものの２種類が使用可能

Xamarin(ザマリン)

23


• 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


Hybrid Application

25


Hybrid Application Solutions

26

PhoneGap(Cordova)

Titanium Mobile Corona Monaca

対応端末iOSAndroidWindows Phone

iOSAndroid

iOSAndroidWindows Phone

iOSAndroidWindows Phone

開発環境XcodeEclipse (ADT)Node.js・Git

Titanium Studio(Eclipse-based)

Composer GUICorona Editor(Sublime Text plugin)

Monaca Cloud IDEMonaca DebuggerVisual Studio

開発言語HTMLCSSJavaScript

JavaScript Lua HTMLCSSJavaScript

動作環境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つです。


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 PlatformUI 開発ツールの 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) を複数の企業が開発・販売しています。


• 端末・OS のサポート範囲

• Native API のサポート範囲

• UI コンポーネントの提供方法 (Native / 抽象化)

• UI コンポーネントの個数やカスタマイズの可否

• プラットフォーム固有コードの範囲

• Web View or ランタイム

• セキュリティ関連機能の提供範囲

• IDE や UI ツールの提供の有無

• 開発ライフサイクルのサポート範囲

(開発、テスト・配備・管理)

• コスト

開発

テスト

配備

管理

MEAP 選定時の考慮点

28


Web Application

29


Mobile First

30

• これまでは、デスクトップ環境での利用をメインとしたアプリケーションを作成し、後付けでモバイル対応を行うことが多かった (Desktop First)

• Mobile First では、モバイル環境での利用をメインして考えることにより、UI・UX やコンテンツ、使用リソースをスマートデバイスに最適化

• スマートデバイスの特性を考慮し、GPSやカメラなどの各種センサーの利用を視野に入れると共に、タッチ操作、ソフトウェアキーボードによる入力、画面サイズ、画面解像度の多様性などにも考慮

• 小さな画面サイズでの利用や通信速度、通信量を考慮し、コンテンツを可能な限り削減し、本当に必要な情報だけを適切にユーザへ提供 (Content First)


Responsive Web Design(RWD)

31

• 端末の種類や画面解像度に応じて、コンテンツが各端末に最適な状態で表示されるように単一の HTML や CSS でデザインする手法

• HTML の meta 要素に Viewport を指定し、ブラウザの表示領域のサイズや倍率、ズームの可否を設定

• CSS3 の新しい要素である Media Queries を使用し、端末の画面解像度や端末の向きなどに基づいて適用するスタイルを容易に変更可能

• Internet Explorer 8 以下に対応する場合は別途考慮が必要

<meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" media="mediatype and (min-width: 768px)" href="768.css">@media screen and (min-width:768px){}


リセット CSS とノーマライズ CSS

32

リセット CSS ノーマライズ CSS

概要

各ブラウザが独自に定義しているデフォルトスタイルシートのスタイルをリセットするためのCSS

デフォルトスタイルシートの有用なスタイルを維持しつつ、ブラウザ間の差異を補正するための CSS

有名ライブラリ

• YUI Library の reset.css• Eric Meyer の Reset CSS

• Normalize.css

備考

本来のデフォルトスタイルをすべて無効にしてしまうため、必要な要素のスタイルを全て再指定しなければならなくなり、メンテナンスが困難になる可能性がある。

HTML エレメントのスタイル正常化やブラウザのバグ補正などもおこなってくれる。スマートフォン用ブラウザや HTML5 もサポートしており、Bootstrap でも使用されている。

クロスブラウザ対応で問題となるブラウザ間のスタイルの差をなくす方法として、下記の 2 種類の手法が存在します。


Polyfill

33

• 最新の機能が利用できない古いブラウザにモダンブラウザと同様の機能を提供するための手段

• 古いブラウザが持つ独自実装や JavaScript を利用して実現

• html5shim や Modernizr、ie9.js、CSS3 pie などが有名

• HTML5 で導入された新しいタグによるレイアウト崩れなどを防止できたり、CSS3 の角丸、ボックスシャドウ、グラデーションなどが使用できるようになる

• 基本的には使用しないほうが良い

• 最近は Graceful Degradation (グレースフルデグラデーション) を採用する傾向にあるらしい

• Graceful Degradation とは、モダンブラウザを基準として開発し、古いブラウザへは必要最低限の機能を提供するという考え方

• Polymer などの Web components 用の polyfill も存在する


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;}


Single Page Application(SPA)

35

• 単一ページ (HTML) で作成された Web アプリケーション

• JavaScript と AJAX を活用し、動的にページ内のコンテンツを生成・削除することにより、優れた応答性と UX を実現可能

• HTML5 の History API (pushState や popState など) やURL の hash 操作で URL ルーティングを実現

• アプリケーションの処理の大半をクライアント側で実行可能

• 頑張ればオフライン稼働させることも可能

• 多数のフレームワークやライブラリが存在し現在も進化中

• 大規模なアプリケーションでは、ダウンロードサイズやメモリリーク、パフォーマンスが問題になりやすい

• バックエンドとは異なる開発環境が必要


おまけ

36


開発コスト

37

当然ですが、サポートするプラットフォーム (デバイ

ス・OS・ブラウザ) が増えれば、その分、開発や保守

に掛かるコストは増加します。その為、ターゲットプ

ラットフォームの選定が非常に重要になります。

1 2 3 4 5

コスト

プラットフォーム


フロントエンド開発

38

Mobile First や SPA のアプリケーション開発では、フ

ロントエンンド側のコード量は増加し、より複雑な

アーキテクチャとなります。

バックエンド開発とは異なるスキルセットが必要にな

り、日々新しい技術が登場し進化し続けているため、

より技術力の高いプログラマの確保が重要となります。

また、バックエンド開発との掛け持ちは、今後ますま

す困難になっていくものと思われます。


バックエンド開発

39

Mobile First や SPA のアプリケーション開発では、

バックエンンド側のコード量は減少し、 JSON を用い

た REST API 中心のアーキテクチャとなります。

バックエンドに求められる機能は、ユーザ認証やプッ

シュ通知、データの永続化、帳票作成、バッチ処理な

どに限定され、これまで以上に API の設計が重要にな

ります。

REST API

Back-endServer

DB

帳票

認証

Batch


テスト自動化

40

クロスプラットフォーム開発では、アプリケーションがサポー

トするプラットフォーム数の増加に伴ってテストに掛かる工数

も増加します。その為、テストの一部を自動化し、より効率的

により短時間でテストを実施する必要があります。

但し、画面遷移や画面構成が複雑な業務アプリケーションでは、

テストコードの作成や保守に掛かる工数をペイするためには、

ある程度長期の保守期間が必要になります。その為、必要最低

限のテストシナリオから開始するなどの工夫が必要になります。

Web アプリケーションのテスト自動化では Selenium が有名ですが、

Hybrid アプリケーションや Native アプリケーションのテストを自動化

するための Appium などのフレームワークも存在します。


オフライン稼働

41

• 業務アプリでも通信の不安定さを懸念して、オフライン稼働させたいという要件は意外と多い

• Native アプリの場合は、オフラインに全ての機能を寄せて、本当に必要な部分だけオンラインで処理する方針で実現可能

• Web アプリの場合は、HTML5 の File API や Web Storage、Application Cache などを使用してオフラインブラウジングを可能にする必要があるが、実装の難易度は高い

• ローカルストレージに機密性の高いデータを保存する場合は、データの暗号化が必要

• オンライン復帰時にデータの同期処理が必要になるが、データによっては仕様で割り切らないと難易度が高くなることがある

• 開発途中でのオフライン稼働対応は、非常に困難で多大なコストが掛かる可能性があるため極力避ける


Mobile Device Management(MDM)

42

1. 紛失・盗難時の情報漏えい対策

パスワードロックの強制化やリモートロック・ワイプ (データ消去)

2. 端末の不正利用の防止

アプリケーションやカメラなどのデバイス機能の利用制限

3. 端末情報の収集とポリシー適用

OS のバージョンやアプリケーション、セキュリティポリシーの一元管理

MDM は、スマートデバイスを安全に効果的に管理するためのソリューションです。各社から様々な製品が販売されており、主に以下の 3 つの機能を提供しています。


Bring Your Own Device (BYOD)

43

BYOD を簡単に説明すると、従業員の私物端末を企業内に持ち込んで業務に活用することです。日本でも数年前から一部の企業が取り入れ始めています。

BYOD には、個人所有の端末を自宅や外出先で活用することで業務効率が向上したり、企業の端末支給のコストを削減できるなどのメリットがあります。

その一方で、情報漏洩などのセキュリティリスクは高くなるため、BYOD を導入する企業は、適切なルールの策定を行ったり、セキュリティブラウザや MDM を導入する必要があります。


主要機種のスペック

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月


まとめ

45


主要 3 パターンの比較

46

Native Hybrid Web

HTML5+CSS3

OS

JavaScript

OS

Native Code

OS

Native Code

Web View

Browser

HTML5+CSS

JavaScript

機能・実行速度・オフライン稼働

配布コスト・開発コスト・要員確保

• ゲームなどでパフォーマンスや最適化を重視するなら Native• 配布容易性やコストを重視するなら Web• コストを重視したいけど端末機能を利用したいなら Hybrid


ソリューションの移り変わり

47

RIA HTML5+CSS3+JavaScript

Desktop First Mobile First

Progressive Enhancement

Graceful Degradation

Reset CSS Normalize CSS

HTML (DOM) generatedby the back-end

HTML (DOM) generatedby the front-end


スキルセットの分断

48

クロスプラットフォーム開発や最近の Web アプリケーション開

発では、フロントエンド (クライアント) 側とバックエンド (サー

バ) 側の開発に要求されるスキルセットが大きく異なります。

クラサバ時代や一昔前のWebアプリ時代とは異なり、それぞれに

多数の開発言語やフレームワーク、テスティングフレームワー

ク、ライブラリなどが存在しその進化スピードも非常に早いた

め、両方のスキルセットを高いレベルで維持するのは非常に困難

と言わざるを得ません。

プログラマ個人としてのキャリアパス形成や、組織としての人材

育成や人材の割合についても再考する必要があるかも知れませ

ん。

Back-endFront-end


最後に

49

クロスプラットフォーム開発には、3 つの主要

なアーキテクチャが存在し、それぞれのアーキ

テクチャに対しても複数のソリューションが存

在し、日々急速に進化しています。

システム特性や開発規模、開発期間、メンバー

構成、製品のライフサイクルなどにより最適な

アーキテクチャは異なりますが、よりベターな

ソリューションを提案できるよう事前に準備し

ておきましょう。


おわり

50

Technology

クロスプラットフォーム開発入門