Skip to content

DNET_Cordova

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

Cordova (PhoneGap)

概要

経緯

  • 2011年10月4日

    • Nitobi社が開発していたPhoneGapをAdobeが買収、
    • Adobeは同時にPhoneGapを、Apache Foundationへ寄贈した。
    • Apache FoundationではCordovaというブランド名が与えられた。

  • 2020年10月1日

    • AdobeはPhoneGap / PhoneGap Buildの開発及びサービス提供を終了。
    • 現在、アシアルから、Monacaへのマイグレーション支援が提供されている。

PhoneGap

  • PhoneGapはCordovaベースのAdobe製品版。

  • 以下の様なサービスも提供されている。

    • PhoneGap Build
      PhoneGapを利用したアプリケーションの
      ビルド環境をオンラインで利用できるサービス。

    • PhoneGap Debug
      PhoneGap製のアプリをデバイス上で
      デバッグすることができるサービス。

    • PhoneGap Emulation
      Webブラウザ（Google Chrome）上で動作する
      エミュレータによってアプリの検証が行えるサービス。

Monaca

  • アシアル株式会社(Asial Corporation)が開発・運営している。

  • Cordovaベースの開発プラットフォーム

    • 内部的には、最新版のCordovaを利用している。

    • 開発・ビルド・デプロイまでWeb上で可能なのが特徴。

      • Webブラウザからアクセス可能なWeb IDE
      • 開発したアプリをビルドするサービス
      • およびデプロイするサービス（と、サーバー）

  • Freeプラン以外ではローカル開発も行える
    Monaca LocalkitやMonaca CLIも使用可能。
    （Monaca CLIは、 Cordova CLIの拡張っぽい）

  • mBaaSを選択的に利用可能。

    • Monaca Backend
    • Firebase
    • ニフクラ mobile backend（mBaaSの該当節を参照）

  • Monaca Docs

プラットフォーム

サポート

  • 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アプリ

iOSアプリ

Windowsアプリ

ビルドとデプロイ

Cordova - ビルドとデプロイ

開発

開発ツール

Cordova CLI

  • Node.js製コマンドライン開発ツール

    • 新しいプロジェクトの作成
    • 異なるプラットフォームで構築
    • エミュレーター内で実際のデバイスで実行

  • 詳しくは、「Cordova CLIコマンド」を参照。

各種 IDE

  • Apache Cordovaでモバイルアプリを開発するには、

    • （JavaScritpを記述する）テキスト・エディタ
    • （プロジェクトの生成やデバッグ実行を行うための各種）Cordova CLI

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

  • Apache CordovaをサポートしたIDEを導入すると、
    コマンド操作を行うことなくアプリ開発を進めることができる。

    • VS Code + Cordova Tools Extension
      （Cordova Tools Extensionの該当節を参照）

    • 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コマンドで作成する。

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

config.xml

Cordova - 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以下に、
# ファイルのパス サイズ
1 drawable-ldpi/icon.png 36*36px
2 drawable-mdpi/icon.png 48*48px
3 drawable-hdpi/icon.png 72*72px
4 drawable-xhdpi/icon.png 96*96px
  • iOSの場合
    platforms/ios/（アプリ名）/Resources/icons以下に、
# ファイルのパス サイズ
1 icon.png 57*57px
2 icon@2x.png 114*114px
3 icon-72.png 72*72px
4 icon-72@2x.png 144*144px

  • スプラッシュスクリーン設定

    • Androidの場合
      （splashscreenを設定した上で、）platforms/android/res以下に、
# 9-patchファイルのパス サイズ（縦*横）
1 drawable-ldpi/splash.9.png 426*320px
2 drawable-mdpi/splash.9.png 470*320px
3 drawable-hdpi/splash.9.png 640*480px
4 drawable-xhdpi/splash.9.png 960*720px
  • iOSの場合
    platforms/ios/（アプリ名）/Resources/splash以下に、
# pngファイルのパス サイズ（縦*横）
1 Default-568h@2x~iphone.png 640*1136px
2 Default-Landscape~ipad.png 1024*748px
3 Default-Landscape@2x~ipad.png 2048*1496px
4 Default-Portrait~ipad.png 768*1004px
5 Default-Portrait@2x~ipad.png 1536*2008px
6 Default~iphone.png 320*480px
7 Default@2x~iphone.png 640*960px

プラグイン

Cordova - Plugin

Cordova CLIコマンド

初期設定

Cordova Tools Extensionの該当節を参照。

プロジェクト作成

Cordova Tools Extensionの該当節を参照。

Create

Cordova Tools Extensionの該当節を参照。

  • プロジェクト作成

    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

  • 具体例（Cordova Tools Extensionの該当節を参照）

requirements

  • ビルドに必要な前提環境を確認する。

    cordova requirements

  • 前提環境の例（Cordova Tools Extensionの該当節を参照）

  • 前提環境の構築

    • Android
      ココの指示に従って Android Target をインストール
      （Android Studioの該当節を参照）する。

    • iOS
      ココの指示に従って...。

    • Windows
      ココの指示に従って...。

Prepare

  • 準備

    cordova prepare

  • Cordova - config.xmlメタデータを

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

ビルド → 実行 → デプロイ

Platforms

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

Build

  • ビルド

    cordova build

  • 実機やエミュレータ向けのビルドは作成できる。

  • ただし、実機やエミュレータにデプロイはしない。

Run

  • ブラウザで起動する。

    cordova run

  • エミュレータで起動する。

  • 実機を使用した動作確認はDeployが必要。

Deploy

実機・エミュレーターを参照。

参考（CLIコマンド）

方式

処理方式

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

SPA型

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

Web型

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

パッケージ管理

Browser

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

npm

外部ツール（Node.js製）の管理に使用。

参考（パッケージ管理）

ソースの外だし

HTMLファイル

不可能

JSファイル

可能

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

CodePush

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> までを１ページと認識

      <section id="page1" data-role="page">・・・</section>

  • 戻る

    • addBackBtnプロパティ

      <script>
  $(document).bind("mobileinit", 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フレームワーク（SPAフレームワークの追加）のRouter機能を使用する。

クレーム・ベース認証

OAuth2/OIDC

UserAgentでOAuth2のTokenを取得するベスト・プラクティス

OAuth PKCEを実装する。

OAuth2/OIDC以外

  • 色々なプラグインがあるが、使うとIDMaaSにロックインされる。

  • 例えば、Azureなら ADAL(MSAL)（OpenID / OAuth / OpenID Connectの該当節を参照）の
    プラグインを利用する。

  • ブラックボックス化されているが、

    • 恐らく中身は、OAuth2/OIDC。
    • モノによっては、ケルベロスなどもあるかも。

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

プッシュ通知

プッシュ通知

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

設定手順

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

Firebaseにログイン

Android (FCM)の該当節を参照。

プロジェクトの作成

Android (FCM)の該当節を参照。

FCMへアプリを登録

Android (FCM)の該当節を参照。

ファイルのダウンロード

Android (FCM)の該当節を参照。

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

Android (FCM)の該当節を参照。

Android、iOS、其々のプラットフォームに向けて、

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

Cordova - Pluginの該当節を参照。

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

Android (FCM)の該当節を参照。

SPAフレームワークの追加

SPA（(MV*) UIフレームワーク）は index.html と index.jsに纏まるので、
これを、www の index.html と差し替えれば良い。

webpack

JavaScriptライブラリの作り方の該当節を参照。

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

Angular + Ionic

Cordovaを拡張したCLI（Cordovaコマンドを直接使用しない）で、
UIのベースに Angular（(MV*) UIフレームワークの該当節を参照）を
使用するアプリ開発に特化した開発環境。

React

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

サポート

移行メモ

  • jQuery Mobile の「戻る」のコードにあった $(document).bind("bobileinit", ...) は、 jQuery Mobile の初期化イベント名から "mobileinit" の誤記と判断し正した。
  • 「ソースの外だし」の JS ファイルの記述 <src script=""></src> は <script src=""></script> に正した。
  • 「デプロイしデバックできる」は「デバッグできる」、 「およびデプロイするサービス（と、サーバー」の閉じ括弧を補った。
  • jQuery Mobile のページ定義の説明にあった HTML 実体参照（&lt;）は 通常の記号に戻し、コード部分はコード ブロック／コード スパンとした。
  • iOS のスプラッシュスクリーンのファイル名に含まれる ~ が Markdown の取り消し線記法と衝突するため、表中はコード スパンで記述した。
  • マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への リンクは、移行済みの MS_CordovaToolsExtension / MS_MigrationToASPNETCore / MS_CodePush / MS_UserAgentOAuthBestPractice / MS_OpenIDOAuth に張り替えた。

Tags: 移行, Cordova, PhoneGap, Monaca, ハイブリッドアプリ, WebView, スマホ, プラグイン

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

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally