PowerPoint プレゼンテーション

Transcription

1 Cordova を使った HTML5 ハイブリッド 型モバイルアプリの活用ポイント アシアル株式会社 生形 可奈子 1

2 アシアル株式会社のご紹介 アシアルは エンジニアリングでインターネットの成長を牽引する という事業コンセプトのもと HTML5 JavaScript を中心とした Web 技術をベースにした デベロッパー支援事業を行っております モバイルアプリ開発環境 UI/UX 設計システム構築 コンサルセミナー スクール

3 ハイブリッドアプリとは 3

4 モバイルOSシェア

5 モバイルアプリ開発に関する課題 開発言語がOS 毎に異なるため 1. 開発工数がかかる 2. ソースコード管理の複雑化 3. エンジニアの確保が困難

6 HTML5 という選択肢

7 ハイブリッドアプリの登場 ネイティブアプリと Web アプリ 2 つのアプリの特徴をいいとこ どりしたアプリを ハイブリッドアプリ と呼びます ネイティブアプリ Web アプリ ハイブリッドアプリは Web の技術を使って開発しますが 生成 されるアプリはネイティブアプリとほぼ同等のものになります

8 従来の開発手法とハイブリッドアプリの比較 特徴 性能 ネイティブアプリ Web アプリ ハイブリッドアプリ クロスプラットフォーム対応 端末へのインストール マーケットでの配布 オフラインでの利用 端末固有の機能の利用 アプリ実行速度

9 ハイブリッドアプリの仕組み ハイブリッドアプリは Cordova(PhoneGap) という OSS ライ ブラリを利用して開発します Cordova は HTML で作成された コードをネイティブコードでパッケージングします WebView ネイティブコード

10 ネイティブ機能呼び出しの仕組み カメラなどの端末固有の機能を呼び出す場合 開発者は JavaScriptで命令を記述します するとCordovaがネイティブコードによって対応する機能を実行します Cordova 標準 API HTML CSS JavaScript ネイティブコード カメラ GPS 連絡帳

11 Cordova を利用している Android アプリ

12 様々なソリューションで採用

13 Monaca のご紹介 13

14 ハイブリッドアプリ開発環境 :Monaca ios, Android, Windows 8, Chrome Apps 対応 クラウドベースのハイブリッドアプリ開発環境 日本語サポート ドキュメント Windowsマシンでも開発 OK

15 Monacaのユーザー 祝 100,000ユーザー達成

16 Monaca によるアプリ開発 コンパイル処理や USB 経由での実機転送などは不要 デバッグ専用アプリがネットワーク経由で変更箇所を取得するため リアルタイムに動作検証できます 1 2

17 Monaca の仕組み ソースコードはクラウド上に クラウド ターゲット OS に合わせた環境でアプリをビルド IDE デバッガー ビルドシステム

18 選べる IDE ブラウザーベースのフル機能 IDE 既存の開発環境がそのまま利用可能 拡張機能として Monaca の機能を提供 コマンドラインからの実行

19 Visual Studio による Cordova アプリ開発 Visual Studio に標準搭載されているツールと 拡張機能として提供されている Monaca for Visual Studio があります Visual Studio Tools for Apache Cordova 開発ベンダーマイクロソフトアシアル Monaca for Visual Studio デバッガー ビルド機能 Visual Studio に統合されたエミュレータ ビルド環境のセットアップ (ios アプリの場合は Mac と Xcode も ) が必要 実機 クラウドビルド (ios アプリも可 )

20 バックエンドサービスとの連携 Azure のモバイル用バックエンドサービスや オンプレミス環境 のサーバーとの連携が可能です Azure Mobile Apps JavaScript によるデータの送受信 クラウドデータベース ユーザー認証 プッシュ通知

21 デモ 21

22 開発事例紹介 22

23 事例 1: テレ朝動画アプリ 株式会社テレビ朝日 YouTube 上の公式動画閲覧アプリ SNS 連携 お気に入り登録など

24 ワンソースでマルチデバイス対応 Android iphone ipad style.css CSS 切替 HTML は共通 style2.css

25 事例 2:ASICS SHOE FINDER 株式会社アシックス 足形計測サービスと連携して おすすめシューズを検索 マーケット公開しない店頭アプリ 開発期間は約 2 週間 (ipad のみ )

26 事例 3:Health Planet 株式会社タニタヘルスリンク 既存の同名 Web サービスとの連携 体重計の計測データを Bluetooth でアプリに送信 歩数計のデータを NFC で読み込み

27 Health Planet の仕組み REST API Cordova API 体重計 Web サービス Bluetooth HTTP NFC (Android) 歩数計

28 事例 4: ジャパンネット銀行残高確認アプリ ジャパンネット銀行 機能は残高確認のみ パターン認証による 1 秒ログイン

29 ハイブリッドアプリが抱える課題 29

30 ハイブリッドアプリの 3 つの課題 1. パフォーマンスチューニング 2. Android の断片化問題 3. セキュリティ対策

31 パフォーマンス対策 :Onsen UI HTML5 のカスタムタグを記述することで UI を簡単に構築するこ とができる モバイルアプリのための UI フレームワークです モバイルライクなフラットデザイン ネイティブと遜色ないアニメーション 豊富なUIパーツ SPAの構築が容易 UIガイドラインに準拠

32 Onsen UI の使い方 <ons-toolbar></ons-toolbar> <ons-list-item></ons-list-item> <ons-tabbar></ons-tabbar>

33 断片化対策 :Crosswalk 通常のハイブリッドアプリでは OSに付属しているWebView を利用していますが MonacaではIntelのCrosswalkという WebViewをアプリに内包してビルドすることができます Androidアプリ

34 セキュリティ対策 : ソースコード暗号化 端末には暗号化されたファイルが保存され アプリ実行時に データを複合化します 複合化データは一時的にメモリ上に 展開されるだけなので 外部から読み取られる心配はありません 復号化

35 Monaca によるアプリ開発まとめ Web 標準技術のみを使って開発ができる 多くの端末やOSに ワンソースで対応できる リモートデバッグ リモートビルド機能で手軽に開発 検証できる ハイブリッドアプリの弱点を補う暗号化プラグインやUIフレームワークなどを提供

36 価格は無料 ~ プラン名 価格 Basic 無料 Personal 980 円 / 月 Gold 5,000 円 / 月 Platinum 8,000 円 / 月 プロジェクト数 無制限 ビルド回数 3 回 /24 時間無制限無制限無制限 Visual Studio 連携 Community Edition のみ Community Edition のみ 外部の Cordova プラグイン組み込み ローカル開発

37 Monaca エンタープライズ エンタープライズ向けの上位プランです 業務アプリ開発をセキュアかつ効率的に行うための各種機能を提供します ソースコードの暗号化 アプリの自動更新機能 SAP 等の外部システムとの連携 完全なローカル環境での開発 その他カスタマイズ対応

38 様々な開発支援サービス 専門のサポートチームが技術的課題を解決します ご要望に応じてコードレビューも行います Monaca によるアプリ開発講座の他 JavaScript 等のプログラミング教育も実施しています

39