Download as PDF, PPTX
Uploaded byアシアル株式会社
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
2015/8/7 日本マイクロソフト・エクセルソフト・アシアル合同で開催されたクロスプラットフォームセミナーの資料です。
More Related Content
Similar to iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
- 1. 1URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Cordovaを使ったHTML5ハイブリッド 型モバイルアプリの活用ポイント アシアル株式会社 生形 可奈子
- 2. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. アシアル株式会社のご紹介 アシアルは、「エンジニアリングでインターネットの成長を牽 引する」という事業コンセプトのもと、HTML5、JavaScriptを 中心としたWeb技術をベースにした、デベロッパー支援事業を 行っております。 モバイルアプリ開発環境 UI/UX設計 システム構築・コンサル セミナー・スクール
- 3. 3URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. ハイブリッドアプリとは
- 4. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. モバイルOSシェア
- 5. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. モバイルアプリ開発に関する課題 開発言語がOS毎に異なるため、 1. 開発工数がかかる 2. ソースコード管理の複雑化 3. エンジニアの確保が困難
- 6. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. HTML5という選択肢
- 7. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. ハイブリッドアプリの登場 ネイティブアプリとWebアプリ、２つのアプリの特徴をいいとこ どりしたアプリを「ハイブリッドアプリ」と呼びます。 ハイブリッドアプリは、Webの技術を使って開発しますが、生成 されるアプリはネイティブアプリとほぼ同等のものになります。 ×ネイティブアプリ Webアプリ
- 8. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. 従来の開発手法とハイブリッドアプリの比較 特徴・性能 ネイティブ アプリ Webアプリ ハイブリッド アプリ クロスプラットフォーム対応 × ○ ○ 端末へのインストール ○ × ○ マーケットでの配布 ○ × ○ オフラインでの利用 ○ × ○ 端末固有の機能の利用 ○ △ ○ アプリ実行速度 ○ △ △
- 9. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. ハイブリッドアプリの仕組み ハイブリッドアプリは、Cordova（PhoneGap）というOSSライ ブラリを利用して開発します。 CordovaはHTMLで作成された コードをネイティブコードでパッケージングします。 ネイティブコード WebView
- 10. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. ネイティブコード ネイティブ機能呼び出しの仕組み カメラなどの端末固有の機能を呼び出す場合、開発者は JavaScriptで命令を記述します。するとCordovaがネイティブ コードによって対応する機能を実行します。 HTML・CSS・JavaScript 連絡帳GPSカメラ Cordova標準API
- 11. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Cordovaを利用しているAndroidアプリ
- 12. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. 様々なソリューションで採用
- 13. 13URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Monacaのご紹介
- 14. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. ハイブリッドアプリ開発環境：Monaca • iOS, Android, Windows 8, Chrome Apps対応 • クラウドベースのハイブリッドアプリ開発環境 • 日本語サポート・ドキュメント • Windowsマシンでも開発OK
- 15. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Monacaのユーザー 祝！100,000ユーザー達成
- 16. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Monacaによるアプリ開発 ① ② コンパイル処理やUSB経由での実機転送などは不要。デバッグ 専用アプリがネットワーク経由で変更箇所を取得するため、リ アルタイムに動作検証できます。
- 17. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Monacaの仕組み IDE デバッガー ビルドシステム クラウド ソースコードは クラウド上に ターゲットOSに 合わせた環境で アプリをビルド
- 18. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. 選べるIDE ブラウザーベースのフル機能IDE 既存の開発環境がそのまま利用可能 拡張機能としてMonacaの機能を提供 コマンドラインからの実行
- 19. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Visual StudioによるCordovaアプリ開発 Visual Studio Tools for Apache Cordova Monaca for Visual Studio 開発ベンダー マイクロソフト アシアル デバッガー Visual Studioに統合されたエミュ レータ 実機 ビルド機能 ビルド環境のセットアップ（iOSアプ リの場合はMacとXcodeも）が必要 クラウドビルド （iOSアプリも可） Visual Studioに標準搭載されているツールと、拡張機能とし て提供されているMonaca for Visual Studioがあります。
- 20. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. バックエンドサービスとの連携 ・クラウドデータベース ・ユーザー認証 ・プッシュ通知 Azure Mobile Apps Azureのモバイル用バックエンドサービスや、オンプレミス環境 のサーバーとの連携が可能です。 JavaScriptによる データの送受信
- 21. 21URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. デモ
- 22. 22URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. 開発事例紹介
- 23. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. • 株式会社テレビ朝日 • YouTube上の公式動画閲覧アプリ • SNS連携、お気に入り登録など 事例１：テレ朝動画アプリ
- 24. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Android iPhone iPad ワンソースでマルチデバイス対応 HTMLは共通 CSS切替 style.css style2.css
- 25. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. 事例２：ASICS SHOE FINDER • 株式会社アシックス • 足形計測サービスと連携して、 おすすめシューズを検索 • マーケット公開しない店頭アプリ • 開発期間は約2週間（iPadのみ）
- 26. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. 事例３：Health Planet • 株式会社タニタヘルスリンク • 既存の同名Webサービスとの連携 • 体重計の計測データをBluetoothで アプリに送信 • 歩数計のデータをNFCで読み込み
- 27. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Health Planetの仕組み Bluetooth NFC (Android) HTTP Webサービス 体重計 歩数計 REST API Cordova API
- 28. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. 事例4：ジャパンネット銀行残高確認アプリ • ジャパンネット銀行 • 機能は残高確認のみ • パターン認証による１秒 ログイン
- 29. 29URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. ハイブリッドアプリが抱える課題
- 30. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. ハイブリッドアプリの３つの課題 1. パフォーマンスチューニング 2. Androidの断片化問題 3. セキュリティ対策
- 31. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. パフォーマンス対策：Onsen UI • モバイルライクなフラットデザイン • ネイティブと遜色ないアニメーション • 豊富なUIパーツ • SPAの構築が容易 • UIガイドラインに準拠 HTML5のカスタムタグを記述することでUIを簡単に構築するこ とができる、モバイルアプリのためのUIフレームワークです。
- 32. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Onsen UIの使い方 <ons-toolbar></ons-toolbar> <ons-list-item></ons-list-item> <ons-tabbar></ons-tabbar>
- 33. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. 断片化対策：Crosswalk 通常のハイブリッドアプリでは、OSに付属しているWebView を利用していますが、MonacaではIntelのCrosswalkという WebViewをアプリに内包してビルドすることができます。 Androidアプリ
- 34. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. セキュリティ対策：ソースコード暗号化 復号化 端末には暗号化されたファイルが保存され、アプリ実行時に データを複合化します。複合化データは一時的にメモリ上に 展開されるだけなので、外部から読み取られる心配はありません。
- 35. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Monacaによるアプリ開発まとめ Web標準技術のみを使って開発ができる 多くの端末やOSに、ワンソースで対応できる リモートデバッグ・リモートビルド機能で手軽に 開発・検証できる ハイブリッドアプリの弱点を補う暗号化プラグイ ンやUIフレームワークなどを提供
- 36. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. 価格は無料～ プラン名 価格 Basic 無料 Personal 980円/月 Gold 5,000円/月 Platinum 8,000円/月 プロジェクト数 3 10 100 無制限 ビルド回数 3回/24時間 無制限 無制限 無制限 Visual Studio連携 Community Editionのみ Community Editionのみ ○ ○ 外部のCordovaプ ラグイン組み込み × × ○ ○ ローカル開発 × × ○ ○
- 37. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. Monacaエンタープライズ エンタープライズ向けの上位プランです。業務アプリ開発をセ キュアかつ効率的に行うための各種機能を提供します。 ・ソースコードの暗号化 ・アプリの自動更新機能 ・SAP等の外部システムとの連携 ・完全なローカル環境での開発 ・その他カスタマイズ対応
- 38. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. 様々な開発支援サービス 専門のサポートチームが 技術的課題を解決します。 ご要望に応じてコードレ ビューも行います。 Monacaによるアプリ開 発講座の他、JavaScript 等のプログラミング教育 も実施しています。
- 39. URL : http://ja.monaca.io/Copyright © Asial Corporation. All Right Reserved. https://ja.monaca.io/