Cordova (PhoneGap) のバックアップ(No.25)

参考：Windows 10
- Windows 10 Apache Cordova プラットフォームの概要 | Visual Studio 日本チーム
  https://devblogs.microsoft.com/visualstudio-jpn/windows-10-apache-cordova/

↑

開発 †

↑

開発ツール †

↑

Cordova CLI †

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

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

↑

各種 IDE †

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

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

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

VS Code + 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 †

↑

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

特有の設定項目(preference)

↑

プラグイン †

↑

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
```

前提環境の例

前提環境の構築
- Android
  ココの指示に従ってAndroid Targetをインストールする。

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

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

↑

Prepare †

準備
```
cordova prepare
```

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

↑

ビルド → 実行 → デプロイ †

↑

Platforms †

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

↑

Build †

ビルド
```
cordova build
```

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

↑

Run †

ブラウザで起動する。
```
cordova run
```

エミュレータで起動する。
- コマンドから
```
cordova emulate android
```
- IDEのサポートを活用する

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

↑

Deploy †

実機へのデプロイには、各種ネイティブ環境への
デプロイに必要な環境設定が必要になる。

Android → Android Studio

iOS → Xcode

Windows → Visual Studio

詳細：ビルドとデプロイ

↑

参考 †

Qiita
- よく使うCordovaコマンド
  https://qiita.com/hara_p/items/f9bbcced6882fcfede6f
- Cordovaを使って、Androidの実機実行するまで
  https://qiita.com/cognitom/items/3b30284e8d01eaf122b7

↑

方式 †

↑

処理方式 †

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

Apache Cordova を使用したホスト型 Web アプリの作成 – Visual Studio 日本チーム Blog
https://blogs.msdn.microsoft.com/visualstudio_jpn/2016/05/19/apache-cordova/

↑

SPA型 †

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

↑

Web型 †

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

↑

パッケージ管理 †

↑

Browser †

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

↑

npm †

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

↑

参考 †

ASP.NET Coreへの移行 - マイクロソフト系技術情報 Wiki > パッケージ・マネージャ
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%E3%81%B8%E3%81%AE%E7%A7%BB%E8%A1%8C#w4347dc8

↑

ソースの外だし †

↑

HTML †

不可能

↑

JS †

可能（サーバ上に格納したものを<src script=""></src>で指定）

↑

†

↑

画面遷移 †

↑

ブラウザの履歴 †

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("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への登録

Firebase Consoleにアクセス、ログインし、
https://firebase.google.com/

プロジェクト作成等の設定を行う。

アプリの登録
- config.xmlのIDなどを登録（項目などは、Android・iOSで異なる）。
- 登録の結果、生成されたファイルをダウンロードしておく。

↑

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

メジャーなプラグインは以下。

phonegap-plugin-push
https://github.com/phonegap/phonegap-plugin-push
- プッシュ通知では、おそらく最も利用されている、古くからあるプラグイン。
- v1：2015年と、v1ではGCM(Google Cloud Messeaging)を使用していたが、
- v2：2019年4月のGCM廃止に伴い、後継のFCM(Firebase Cloud Messeaging)に対応

cordova-plugin-firebase
https://github.com/arnesson/cordova-plugin-firebase
- 利用実績は上記に及ばないものの、こちらもそこそこ人気のあるプラグイン。
- v1が2018年4月と、新しいプラグインで、FCM対応で開発されている。
- イベントトラッキング、クラッシュレポート等の分析情報をアプリに送信する機能を有する。

↑