.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

モバイルアプリのための万能ツールではなく、
ハイブリッドアプリを開発するためのフレームワーク。

経緯

  • Nitobi社が開発していたPhoneGap?を2011年にAdobeが買収、
  • Adobeは同時にPhoneGap?を、Apache Foundationへ寄贈した。
  • Apache FoundationではCordovaというブランド名が与えられた。
  • 現在は他社のエンジニアも一緒になって、Cordovaの開発が進行中。

PhoneGap?

  • PhoneGap?はCordovaベースのAdobe製品版。
  • 以下の様なサービスも提供されている。
  • PhoneGap? Build
    PhoneGap?を利用したアプリケーションの
    ビルド環境をオンラインで利用できるサービス。
  • PhoneGap? Debug
    PhoneGap?製のアプリをデバイス上でデバッグすることができるサービス。
  • PhoneGap? Emulation
    Webブラウザ(Google Chrome)上で動作する
    エミュレータによってアプリの検証が行えるサービス。

プラットフォーム

サポート

  • Android
  • iOS
  • Windows Phone 8
  • Windows 8/8.1/10
  • Firefox OS
  • Amazon Fire OS
  • Blackberry 10
  • Ubuntu
  • Tizen

プラットフォームのすべての機能をサポートしているわけではない。

  • プラットフォーム毎のWebView相当に違いがある。
    • HTML5の機能やCSSのプロパティに違いがある。
    • Windowsでは、innerHTMLプロパティやalert関数などが利用できない。
  • プラグインを作成すれば機能は実現できる。
    ただし、プラットフォーム毎の制約を受ける。

実機・エミュレーター

  • 実機・エミュレーターへデプロイしデバックできる。
  • 実機へのデプロイには、各種ネイティブ環境への
    デプロイに必要な環境設定が必要になる。

Androidアプリ

  • SDKをWindows向けにもMac/Linux向けにもリリース

iOSアプリ

  • ビルド作業などでMacが必要になる

Windowsアプリ

  • Windowsの開発環境が必要になる。
  • ・・・

ビルドとデプロイ

開発

開発ツール

Cordova CLI

  • Node.js製コマンドライン開発ツール
    • 新しいプロジェクトの作成
    • 異なるプラットフォームで構築
    • エミュレーター内で実際のデバイスで実行

各種 IDE

  • Apache Cordovaでモバイルアプリを開発するには、
    • JavaScritp?を記述する)テキスト・エディタ
    • (プロジェクトの生成やデバッグ実行を行うための各種)Cordova CLI

だけを利用しての開発も可能だが、

  • Apache CordovaをサポートしたIDEを導入すると、
    コマンド操作を行うことなくアプリ開発を進めることができる。
  • Monaca
    • アシアル社が提供しているクラウド上でモバイルアプリを開発できるサービス
    • Cloud IDE、ローカル開発ツール、デバッガ、バックエンドのサポートを提供。
    • AndroidやiOSなどの環境を用意せずに手軽に開発できる。
    • 独自のUIフレームワーク、Onsen UIとIonic Frameworkとの統合を提供する。
    • ローカル上で開発できる「Local Kit」や、Visual Studioとの連携ができる。
  • , etc.

Cordovaフレームワーク

cordova.js

  • Cordovaフレームワークが提供するJavaScript側インターフェイス
  • Cordovaの機能にアクセスする場合、HTML中でcordova.jsを読み込む。

devicereadyイベント

  • ネイティブとHTML5とのブリッジを確立するための初期化処理の完了イベント
  • 開発者は、HTML5側でdevicereadyイベントを察知した後にネイティブ機能を呼び出す。
  • loadイベントの後にブリッジの初期化処理が実行され、devicereadyイベントが発火する。

プロジェクト構造

プロジェクトは、Cordova CLIコマンドで作成する。

#ファイル・フォルダ説明
1config.xml各プラットフォームに展開されるCordova用設定ファイル。
2wwwフォルダHTML5リソースやアプリ設定に関するファイルが格納される。
ルートフォルダに配置したHTMLファイルなどがアプリとして表示される。
3pluginsフォルダプラグインが格納されている。
4mergesフォルダHTML5側をプラットフォームごとに切り替える。
wwwディレクトリがプラットフォームごとにコンパイルされる際、
ここに格納されている各プラットフォーム特有のリソースがマージされる。
5platformsフォルダネイティブ側をプラットフォームごとに切り替える。
各プラットフォーム特有のプロジェクトファイルが格納される。

config.xml

wwwフォルダ

以下の中身を読んで理解する。

  • index.html
    エントリポイント
  • cssフォルダ
    CSSファイル群
    • index.css
  • scriptフォルダ
    JavaScriptファイル群
    • index.js
  • imagesフォルダ
    イメージ・ファイル群
  • fontsフォルダ
    フォント・ファイル群

pluginsフォルダ

Cordovaで利用するプラグインやその設定ファイルを格納する。

mergesフォルダ

HTML5側をプラットフォームごとに切り替える。

  • プラットフォーム特有のHTML5リソースを配置
    • merges/android
      Androidプラットフォームだけで用いたい画像やJavaScript
    • merges/ios
      iOSプラットフォームだけで用いたい画像やJavaScript
  • ビルド時の動作(Androidの場合)
    1. wwwディレクトリの内容がplatforms/android/assets/wwwディレクトリ以下にコピーされる。
    2. merges/androidディレクトリの内容がplatforms/android/assets/wwwディレクトリ以下にコピーされる。
      ※ 同じ名前のファイルがある場合には上書きされる。

platformsフォルダ

ネイティブ側をプラットフォームごとに切り替える。

  • プロジェクト
  • Androidの場合
    Androidプロジェクトが生成される(Android Studioなどで開くことが出来るらしい)。
  • iOSの場合
    Xcodeプロジェクトが生成される(Xcodeで開くことが出来るらしい)。
  • アイコン設定
  • Androidの場合
    platforms/android/res以下に、
#ファイルのパスサイズ
1drawable-ldpi/icon.png36*36px
2drawable-mdpi/icon.png48*48px
3drawable-hdpi/icon.png72*72px
4drawable-xhdpi/icon.png96*96px
  • iOSの場合
    platforms/ios/(アプリ名)/Resources/icons以下に、
#ファイルのパスサイズ
1icon.png57*57px
2icon@2x.png114*114px
3icon-72.png72*72px
4icon-72@2x.png144*144px
  • スプラッシュスクリーン設定
  • Androidの場合
    (splashscreenを設定した上で、)platforms/android/res以下に、
#9-patchファイルのパスサイズ(縦*横)
1drawable-ldpi/splash.9.png426*320px
2drawable-mdpi/splash.9.png470*320px
3drawable-hdpi/splash.9.png640*480px
4drawable-xhdpi/splash.9.png960*720px
  • iOSの場合
    platforms/ios/(アプリ名)/Resources/splash以下に、
#pngファイルのパスサイズ(縦*横)
1Default-568h@2x~iphone.png640*1136px
2Default-Landscape~ipad.png1024*748px
3Default-Landscape@2x~ipad.png2048*1496px
4Default-Portrait~ipad.png768*1004px
5Default-Portrait@2x~ipad.png1536*2008px
6Default~iphone.png320*480px
7Default@2x~iphone.png640*960px

プラグイン

Cordova CLIコマンド

初期設定

プロジェクト作成

Create

  • プロジェクト作成
    cordova create ・・・

Platform

  • ターゲット・プラットフォームの追加
    cordova platform add ・・・
    • android
      cordova platform add android
    • browser
      cordova platform add browser
  • ターゲット・プラットフォームの削除
    cordova platform rm ・・・
    • android
      cordova platform rm android
    • browser
      cordova platform rm browser
  • プラットフォームの確認
    cordova platform ls

requirements

  • ビルドに必要な前提環境を確認する。
    cordova requirements
  • iOS
    ココの指示に従って...。
  • Windows
    ココの指示に従って...。

Prepare

  • 準備
    cordova prepare
  • config.xmlメタデータを
    • プラットフォーム固有のマニフェストファイルに変換し、
    • アイコンとスプラッシュスクリーンをコピーし、
    • 指定されたプラットフォーム用のプラグインファイルをコピーして、
    • 各ネイティブSDKでプロジェクトを構築できるようにする。

ビルド実行デプロイ

Platforms

各、環境のプロジェクト・ファイルは、
platformsフォルダ内に格納されている。

Build

  • ビルド
    cordova build
  • 実機やエミュレータ向けのビルドは作成できる。
  • ただし、実機やエミュレータにデプロイはしない。

Run

  • ブラウザで起動する。
    cordova run
  • 実機を使用した動作確認はDeployが必要。

Deploy

参考

方式

処理方式

以下のサイト情報から、2つの方式が確認できる。

SPA

ローカルにある静的なHTMLとWebAPI(JSON)によって機能する。

Web型

Webアプリケーションの画面をホストする(上記のホスト型 Web アプリ)。

パッケージ管理

Browser

ブラウザ内で使用するJavaScriptの管理に使用。

npm

外部ツール(node.js製)の管理に使用。

参考

ソースの外だし

HTMLファイル

不可能

JSファイル

可能

  • サーバ上に格納したものを<src script=""></src>で指定
  • ただ、更新かかるように、キャッシュ無効にすると、オフライン起動できない。

CodePush

上記の問題を回避するために、OTAアップデート機構が設けられている。

画面遷移

ブラウザの履歴

localのhtmlファイルに画面遷移

  • index.html
    <body onload="onBodyLoad()">
        <div data-role="header"><h1>Page1</h1></div>
        <p>This app is for my Blog</p>
        <a href="second.html" data-role="button">secondへ</a>
    </body>
  • second.html
    <body onload="onBodyLoad()">
        <div data-role="header"><h1>Page2</h1></div>
        <p>This is second page</p>
        <a href="index.html" data-role="button">indexへ</a>
    </body>

jQuery Mobile

  • ページの定義
    • data-role="page"
      <section>タグを使い、その中に<data-role="page">とすることで、</section>までを1ページと認識
      <section id="page1" data-role="page">・・・</section>
  • 戻る
    • addBackBtn?プロパティ
      <script>
        $(document).bind("bobileinit", function() {
          $.mobile.page.prototype.options.addBackBtn = true;
        });
      </script>
      ・・・
      <div data-role="page" id="id1">
        <div data-role="header" data-add-back-btn="true">
  • data-rel="back"
    <div data-role="header"> 
        <a href="" data-rel="back">戻る</a>
    </div>

SPA Router

SPAフレームワークのRouter機能を使用する。

クレーム・ベース認証

OAuth2/OIDC

OAuth PKCEを実装する。

OAuth2/OIDC以外

  • 色々なプラグインがあるが、使うとIDMaaSにロックインされる。
  • 例えば、AzureならADAL(MSAL)のプラグインを利用する。
  • ブラックボックス化されているが、
    • 恐らく中身は、OAuth2/OIDC
    • モノによっては、ケルベロスなどもあるかも。

※ そんな・こんな。なので、あまり利用したくないんです。

プッシュ通知

  • 色々なプラグインがあるが、使うとmBaaSにロックインされる。
  • FCMは実質デファクトなのでロックインの影響も少ない。

設定手順

https://docs.monaca.io/ja/tutorials/phonegap_push/

  • 準備(iOSのみ)
    • APNs入手
    • APNs認証キー、またはAPNs証明書の入手

FCMへアプリを登録

ビルド・プロセスへの組込

前述のダウンロード・ファイルを、Android、iOS、
其々のプラットフォーム向けのビルド・プロセスへ組み込む。

プラグインのインストール

プッシュ通知のコード実装

SPAフレームワークの追加

SPAは index.html と index.jsに纏まるので、
これを、www の index.html と差し替えれば良い。

webpack

CommonJSモジュールを利用する際に使用。

Angular + Ionic

Cordovaを拡張したCLI(Cordovaコマンドを直接使用しない)で、
UIのベースにAngularを使用するアプリ開発に特化した開発環境。

React

React Nativeとの棲み分けは...。

参考

Qiita

HTML5Experts.jp

Build Insider

第4章 Cordovaを用いたアプリ開発の流れ

第11章 JavaScriptとネイティブとのブリッジ

Cordova (PhoneGap)ではなく、WebViewの話題っぽい。

CodeZine? Apache Cordovaで本格スマホアプリに挑戦しよう

第1回:Apache Cordovaで本格スマホアプリに挑戦しよう

https://codezine.jp/article/detail/9218

第2回:Apache Cordovaでスマホアプリ開発を始める前の環境設定

https://codezine.jp/article/detail/9327

第3回:カメラプラグインを使って、Apache Cordovaのサンプルアプリを作ってみよう

https://codezine.jp/article/detail/9368

第4回:基本のプラグインを使ってハイブリッドアプリを作ってみよう

https://codezine.jp/article/detail/9412

第5回:Apache Cordova+AngularJSでローカルファイルにアクセスするプラグインを使おう

https://codezine.jp/article/detail/9454

第6回:ファイルを操作するためのプラグインで、テキストや画像をアプリ内に保存する

https://codezine.jp/article/detail/9527

第7回:ハイブリッドアプリ開発でファイルのアップロード、ダウンロードを便利にするプラグインを使う

https://codezine.jp/article/detail/9577

第8回:ハイブリットアプリ開発でオーディオファイルの再生を便利にするプラグインを使う

https://codezine.jp/article/detail/9593

第9回:マイクやカメラを使って音声・写真・ビデオデータを取得するプラグインを使う

https://codezine.jp/article/detail/9701

第10回:カメラとアルバムから写真データを取得するプラグインを使う

https://codezine.jp/article/detail/9780

第11回:連絡先データにアクセスするプラグインを使う

https://codezine.jp/article/detail/9838

第12回:カレンダーの予定を管理するプラグインを使う

https://codezine.jp/article/detail/9886

第13回:カレンダーを管理するプラグインを使って、予定の追加と削除を行う

https://codezine.jp/article/detail/9929

第14回:Cordovaでアプリを公開するためのビルド方法をカスタマイズしよう

https://codezine.jp/article/detail/9970

リファレンス


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-04-22 (水) 15:04:14 (82d)