クロスプラットフォーム开発入门
- 6. クロスプラットフォーム开発入门 クロスプラットフォーム開発 クロスプラットフォーム（英: cross-platform）とは、 異なるプラットフォーム（例えばPC/AT互換機と Macintosh、あるいはWindows?Mac OS X? FreeBSD?Linuxなどのように、仕様が全く異なる機 械（ハードウェア）またはオペレーティングシステ ム）上で、同じ仕様のものを動かすことが出来るプロ グラム（ソフトウェア）のことを言う。 6 「クロスプラットフォーム」(2014年2月15日 (土) 08:35 UTC版)『ウィキペディア日本語版』より引用 簡単にいうと、複数のプラットフォームで動作 するアプリケーションを開発することです。
- 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 ブラウザが標準でサポートしな い技術が衰退していくのは、ある意味正常な進化とい えるかも知れません。
- 11. クロスプラットフォーム开発入门 ? スマートデバイスの機能?スペックの向上、画面の 大型化により、本格的な業務アプリケーションの開 発が可能に ? 時代の変化に伴う IT 利用シーンの拡大 ? 低価格化による IT 投資効果への期待 ? 企業のイメージアップ戦略の一環としての活用 ? 機会損失の減少、業務プロセス改善、ペーパレス化 領域の拡大を目的とした活用 ? スマートデバイスの企業導入率は年々増加傾向にあ り、今後も企業のスマートデバイス活用は進む 企業のスマートデバイス活用 11
- 13. クロスプラットフォーム开発入门 Smartphone Tablet PC プラットフォームの種類 13 MAC Android Phone Android Tablet iPhone iPad Windows Tablet Windows Phone Windows Desktop PC Windows Note PC
- 16. クロスプラットフォーム开発入门 クロスプラットフォーム開発の 主要 3 パターン 16 Native Hybrid Web HTML5+CSS3 OS JavaScript OS Native Code OS Native Code Web View Browser HTML5+CSS JavaScript
- 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 コンポーネントはネイティ ブのものと抽象化されたものの ２種類が使用可能。 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 コンポーネントはネイティブのものと抽象化されたものの ２種類が使用可能 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
- 30. クロスプラットフォーム开発入门 Mobile First 30 ? これまでは、デスクトップ環境での利用をメインとしたアプリ ケーションを作成し、後付けでモバイル対応を行うことが多 かった (Desktop First) ? Mobile First では、モバイル環境での利用をメインして考える ことにより、UI?UX やコンテンツ、使用リソースをスマート デバイスに最適化 ? スマートデバイスの特性を考慮し、GPSやカメラなどの各種セ ンサーの利用を視野に入れると共に、タッチ操作、ソフトウェ アキーボードによる入力、画面サイズ、画面解像度の多様性な どにも考慮 ? 小さな画面サイズでの利用や通信速度、通信量を考慮し、コン テンツを可能な限り削減し、本当に必要な情報だけを適切に ユーザへ提供 (Content First)
- 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 種類の手法が存在します。
- 33. クロスプラットフォーム开発入门 Polyfill 33 ? 最新の機能が利用できない古いブラウザにモダンブラウザと同様 の機能を提供するための手段 ? 古いブラウザが持つ独自実装や JavaScript を利用して実現 ? html5shim や Modernizr、ie9.js、CSS3 pie などが有名 ? HTML5 で導入された新しいタグによるレイアウト崩れなどを防止 できたり、CSS3 の角丸、ボックスシャドウ、グラデーションな どが使用できるようになる ? 基本的には使用しないほうが良い ? 最近は Graceful Degradation (グレースフルデグラデーション) を採用する傾向にあるらしい ? Graceful Degradation とは、モダンブラウザを基準として開発し、 古いブラウザへは必要最低限の機能を提供するという考え方 ? Polymer などの Web components 用の polyfill も存在する
- 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 ルーティングを実現 ? アプリケーションの処理の大半をクライアント側で実行可能 ? 頑張ればオフライン稼働させることも可能 ? 多数のフレームワークやライブラリが存在し現在も進化中 ? 大規模なアプリケーションでは、ダウンロードサイズやメモリ リーク、パフォーマンスが問題になりやすい ? バックエンドとは異なる開発環境が必要
- 37. クロスプラットフォーム开発入门 開発コスト 37 当然ですが、サポートするプラットフォーム (デバイ ス?OS?ブラウザ) が増えれば、その分、開発や保守 に掛かるコストは増加します。その為、ターゲットプ ラットフォームの選定が非常に重要になります。 1 2 3 4 5 コスト プラットフォーム
- 38. クロスプラットフォーム开発入门 フロントエンド開発 38 Mobile First や SPA のアプリケーション開発では、フ ロントエンンド側のコード量は増加し、 より複雑な アーキテクチャとなります。 バックエンド開発とは異なるスキルセットが必要にな り、日々新しい技術が登場し進化し続けているため、 より技術力の高いプログラマの確保が重要となります。 また、バックエンド開発との掛け持ちは、今後ますま す困難になっていくものと思われます。
- 39. クロスプラットフォーム开発入门 バックエンド開発 39 Mobile First や SPA のアプリケーション開発では、 バックエンンド側のコード量は減少し、 JSON を用い た REST API 中心のアーキテクチャとなります。 バックエンドに求められる機能は、ユーザ認証やプッ シュ通知、データの永続化、帳票作成、バッチ処理な どに限定され、これまで以上に API の設計が重要にな ります。 REST API Back-end Server DB 帳票 認証 Batch
- 40. クロスプラットフォーム开発入门 テスト自動化 40 クロスプラットフォーム開発では、アプリケーションがサポー トするプラットフォーム数の増加に伴ってテストに掛かる工数 も増加します。その為、テストの一部を自動化し、より効率的 により短時間でテストを実施する必要があります。 但し、画面遷移や画面構成が複雑な業務アプリケーションでは、 テストコードの作成や保守に掛かる工数をペイするためには、 ある程度長期の保守期間が必要になります。その為、必要最低 限のテストシナリオから開始するなどの工夫が必要になります。 Web アプリケーションのテスト自動化では Selenium が有名ですが、 Hybrid アプリケーションや Native アプリケーションのテストを自動化 するための Appium などのフレームワークも存在します。
- 41. クロスプラットフォーム开発入门 オフライン稼働 41 ? 業務アプリでも通信の不安定さを懸念して、オフライン稼働さ せたいという要件は意外と多い ? Native アプリの場合は、オフラインに全ての機能を寄せて、 本当に必要な部分だけオンラインで処理する方針で実現可能 ? Web アプリの場合は、HTML5 の File API や Web Storage、 Application Cache などを使用してオフラインブラウジングを 可能にする必要があるが、実装の難易度は高い ? ローカルストレージに機密性の高いデータを保存する場合は、 データの暗号化が必要 ? オンライン復帰時にデータの同期処理が必要になるが、データ によっては仕様で割り切らないと難易度が高くなることがある ? 開発途中でのオフライン稼働対応は、非常に困難で多大なコス トが掛かる可能性があるため極力避ける
- 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
- 47. クロスプラットフォーム开発入门 ソリューションの移り変わり 47 RIA HTML5+CSS3+JavaScript Desktop First Mobile First Progressive Enhancement Graceful Degradation Reset CSS Normalize CSS HTML (DOM) generated by the back-end HTML (DOM) generated by the front-end
- 48. クロスプラットフォーム开発入门 スキルセットの分断 48 クロスプラットフォーム開発や最近の Web アプリケーション開 発では、フロントエンド (クライアント) 側とバックエンド (サー バ) 側の開発に要求されるスキルセットが大きく異なります。 クラサバ時代や一昔前のWebアプリ時代とは異なり、それぞれに 多数の開発言語やフレームワーク、テスティングフレームワー ク、ライブラリなどが存在しその進化スピードも非常に早いた め、両方のスキルセットを高いレベルで維持するのは非常に困難 と言わざるを得ません。 プログラマ個人としてのキャリアパス形成や、組織としての人材 育成や人材の割合についても再考する必要があるかも知れませ ん。 Back-endFront-end