.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

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

インストール

Cordovaフレームワーク

cordova.js

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

devicereadyイベント

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

プロジェクト構造

#ファイル・フォルダ説明
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 add or rm

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

Prepare

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

ビルド~実行

Build

  • ビルド
    cordova prepare

Run

  • デバッグなしで実行
    cordova run

方式

処理方式

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

SPA型

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

Web型

Webアプリケーションの画面をホストする。

画面遷移

ブラウザの履歴

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>

認証

OAuth2/OIDC

OAuth2/OIDC以外

パッケージ管理

Browser

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

npm

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

参考

フレームワークの追加

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: 2018-05-14 (月) 17:33:30 (154d)