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

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Cordova (PhoneGap) へ行く。
  • 1 (2017-10-26 (木) 10:21:33)
  • 2 (2017-10-26 (木) 11:38:07)
  • 3 (2017-10-26 (木) 17:03:15)
  • 4 (2017-10-26 (木) 19:20:42)
  • 5 (2017-10-27 (金) 12:14:40)
  • 6 (2017-10-30 (月) 14:58:29)
  • 7 (2017-10-31 (火) 16:31:32)
  • 8 (2017-11-14 (火) 18:58:37)
  • 9 (2017-11-17 (金) 13:56:24)
  • 10 (2017-11-17 (金) 17:25:19)
  • 11 (2017-11-17 (金) 20:57:48)
  • 12 (2018-02-16 (金) 14:50:02)
  • 13 (2018-02-23 (金) 20:28:19)
  • 14 (2018-03-09 (金) 09:25:19)
  • 15 (2018-03-26 (月) 16:46:00)
  • 16 (2018-03-27 (火) 10:41:19)
  • 17 (2018-03-27 (火) 15:03:13)
  • 18 (2018-03-28 (水) 15:01:28)
  • 19 (2018-04-13 (金) 14:21:59)
  • 20 (2018-05-14 (月) 17:33:30)
  • 21 (2019-06-18 (火) 11:33:42)
  • 22 (2020-02-21 (金) 18:27:32)
  • 23 (2020-02-21 (金) 20:21:46)
  • 24 (2020-02-25 (火) 14:12:30)
  • 25 (2020-02-25 (火) 20:08:27)
  • 26 (2020-02-26 (水) 13:36:39)
  • 27 (2020-02-26 (水) 16:50:50)
  • 28 (2020-02-27 (木) 12:14:18)
  • 29 (2020-03-10 (火) 15:59:28)
  • 30 (2020-03-16 (月) 14:21:46)
  • 31 (2020-04-22 (水) 15:04:14)
  • 32 (2021-04-09 (金) 10:49:03)
  • 33 (2021-04-09 (金) 18:44:37)
  • 34 (2021-04-12 (月) 12:50:47)
  • 35 (2021-04-12 (月) 15:52:29)

---

「.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向けにもリリース

• 参考：Android
  • Android開発
  • Androidのデバッグ
  • Androidのデプロイ

iOSアプリ †

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

• 参考：iOS
  • iOS開発
  • iOSのデバッグ
  • iOSのデプロイ

Windowsアプリ †

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

開発 †

開発ツール †

Cordova CLI †

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

IDE †

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

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

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

インストール †

Cordovaフレームワーク †

cordova.js †

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

devicereadyイベント †

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

プロジェクト構造 †

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で開くことが出来るらしい）。

• 特有の設定項目(preference)

• アイコン設定

• Androidの場合
  platforms/android/res以下に、

• iOSの場合
  platforms/ios/（アプリ名）/Resources/icons以下に、

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

• Androidの場合
  （splashscreenを設定した上で、）platforms/android/res以下に、

• iOSの場合
  platforms/ios/（アプリ名）/Resources/splash以下に、

プラグイン †

Cordova CLIコマンド †

初期設定 †

コチラを参照。

Create †

• プロジェクト作成

  cordova create ・・・

Platform add or rm †

• ターゲット・プラットフォームの追加

  cordova platform ・・・

Prepare †

• 準備

  cordova prepare

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

ビルド～実行 †

Build †

• ビルド

  cordova build

Run †

• デバッグなしで実行

  cordova run

参考 †

• 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アプリケーションの画面をホストする。

パッケージ管理 †

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

フレームワークの追加 †

Ionic †

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

• 参考
  • ionicを使ったハイブリッドアプリ開発の特徴｜便利なAngularJSとCordovaベースのフレームワーク
    http://mtitg.com/ionic/
  • ionicによるハイブリッド型アプリ開発の研究 | 株式会社ユーワークス
    https://youworks.jp/topics/356/
  • キミはionicを知っているか？AngularJS+PhoneGap?+美麗コンポーネント群！ | HTML5Experts.jp
    https://html5experts.jp/canidoweb/7359/
  • Cordova+ionic+TypeScript?+AngularJSでアプリ作成 - Qiita
    https://qiita.com/kenfdev/items/de781d4e147f6cbf04b1

React †

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

• 参考
  • create-react-app と Cordova を使って一発でReactのネイティブアプリ開発環境を作る - Qiita
    https://qiita.com/hal_sk/items/cdc459fd639a736bccc3
  • javascript - Cordova with Create-react-app - Stack Overflow
    https://stackoverflow.com/questions/43336924/cordova-with-create-react-app

画面遷移 †

ブラウザの履歴 †

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>

認証 †

OAuth2/OIDC †

OAuth PKCEを実装する。

OAuth2/OIDC以外 †

• 色々なプラグインがあるが、使うとIDMaaSにロックインされる。
• 例えば、AzureならADALのプラグインを利用する。

プッシュ通知 †

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

APNs入手（iOSのみ） †

APNs認証キー、またはAPNs証明書の入手

• https://docs.monaca.io/ja/tutorials/phonegap_push/#ios%E3%81%AE%E6%BA%96%E5%82%99

Firebaseへの登録 †

Firebase Consoleにアクセスし、登録する。

• https://firebase.google.com/

Firebaseのプッシュ通知設定 †

プロジェクト作成等の設定を行う（config.xmlのIDなどを登録）。

• https://docs.monaca.io/ja/tutorials/phonegap_push/#firebase-%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5%E9%80%9A%E7%9F%A5-%E3%81%AE%E8%A8%AD%E5%AE%9A

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

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

• 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対応で開発されている。
  • イベントトラッキング、クラッシュレポート等の分析情報をアプリに送信する機能を有する。

プッシュ通知受信処理の実装 †

• phonegap-plugin-push
  PushNotification?.init(初期化)＆push.on(受信)を実装。
  https://docs.monaca.io/ja/tutorials/phonegap_push/#%E4%BD%BF%E3%81%84%E6%96%B9

• cordova-plugin-firebase
  onNotificationOpen?(受信)を実装。
  https://docs.monaca.io/ja/tutorials/firebase/#%E4%BD%BF%E3%81%84%E6%96%B9

参考 †

• Apache Cordova - Wikipedia
  https://ja.wikipedia.org/wiki/Apache_Cordova

• HTML5ハイブリッドアプリ開発を支えるOSS
  「Cordova」はなぜアツいのか？PhoneGap?との違いは何か？ - ふろしき.js
  http://furoshiki.hatenadiary.jp/entry/2014/07/23/084643

• Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
  https://www.slideshare.net/ShinOgata1/cordova-73839153

Qiita †

• [*Cordova/PhoneGap?*] CordovaとPhoneGap?の違い
  http://qiita.com/cigalecigales/items/1245bff1f2e81ff02a2c

• Cordovaの環境構築をしてみる
  https://qiita.com/katsu_suzuki/items/2a9251f8a13812b03664
  • Cordovaのフォルダ構成について
    https://qiita.com/katsu_suzuki/items/ee606a198020a0fe27df

• Apache Cordovaの開発環境をちょっと良くして自己満足
  https://qiita.com/BlackCat/items/0f20cc865ca3ccb69a92
  • MacにApache Cordovaの開発環境を作って、実機にデプロイしてみた
    https://qiita.com/BlackCat/items/c89a00e2ddbe95f8110f

HTML5Experts.jp †

• Cordova
  https://html5experts.jp/tag/cordova/

• HTML5ハイブリッドアプリの濃いネタ満載！第1回Cordova勉強会まとめ
  https://html5experts.jp/masahiro/11351/

• Cordovaは今やMicrosoftが主導！？最新状況と基本を素早く再チェック！
  https://html5experts.jp/masahiro/20562/

• Electron、React Native、Cordova…
  Web技術でネイティブアプリ開発する方法を、
  アシアル田中さんに聞いた | HTML5Experts.jp
  https://html5experts.jp/shumpei-shiraishi/24253/

Build Insider †

• 書籍転載：［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門
  http://www.buildinsider.net/mobile/bookhtml5hybrid

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

• Cordovaを用いた開発環境を構築する
  http://www.buildinsider.net/mobile/bookhtml5hybrid/0401
• Cordovaを用いてアプリを開発する
  http://www.buildinsider.net/mobile/bookhtml5hybrid/0402
• Cordova： アプリの設定
  http://www.buildinsider.net/mobile/bookhtml5hybrid/0403
• Cordova：プラットフォームごとにカスタマイズする
  http://www.buildinsider.net/mobile/bookhtml5hybrid/0404
• Cordovaプラグインを利用する
  http://www.buildinsider.net/mobile/bookhtml5hybrid/0405
  Android 向けのCordovaプラグインを実装する
  4.5.7　Android 向けのプラグイン開発の詳細
  http://www.buildinsider.net/mobile/bookhtml5hybrid/0406

第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

リファレンス †

• Monaca Docs
  http://docs.monaca.io/ja/
• ガイド - Apache Cordova
  https://cordova.apache.org/docs/ja/latest/

     

Site admin: TechInfoOfMicrosoftTech

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.105 sec.