「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
モバイルアプリのための万能ツールではなく、
ハイブリッドアプリを開発するためのフレームワーク。
プラットフォームのすべての機能をサポートしているわけではない。
だけを利用しての開発も可能だが、
コマンド操作を行うことなくアプリ開発を進めることができる。
Cordova Tools Extensionのインストール例
プロジェクトは、Cordova CLIコマンドで作成する。
# | ファイル・フォルダ | 説明 |
1 | config.xml | 各プラットフォームに展開されるCordova用設定ファイル。 |
2 | wwwフォルダ | HTML5リソースやアプリ設定に関するファイルが格納される。 ルートフォルダに配置したHTMLファイルなどがアプリとして表示される。 |
3 | pluginsフォルダ | プラグインが格納されている。 |
4 | mergesフォルダ | HTML5側をプラットフォームごとに切り替える。 wwwディレクトリがプラットフォームごとにコンパイルされる際、 ここに格納されている各プラットフォーム特有のリソースがマージされる。 |
5 | platformsフォルダ | ネイティブ側をプラットフォームごとに切り替える。 各プラットフォーム特有のプロジェクトファイルが格納される。 |
以下の中身を読んで理解する。
Cordovaで利用するプラグインやその設定ファイルを格納する。
HTML5側をプラットフォームごとに切り替える。
- wwwディレクトリの内容がplatforms/android/assets/wwwディレクトリ以下にコピーされる。
- merges/androidディレクトリの内容がplatforms/android/assets/wwwディレクトリ以下にコピーされる。
※ 同じ名前のファイルがある場合には上書きされる。
ネイティブ側をプラットフォームごとに切り替える。
# | ファイルのパス | サイズ |
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 |
# | ファイルのパス | サイズ |
1 | icon.png | 57*57px |
2 | icon@2x.png | 114*114px |
3 | icon-72.png | 72*72px |
4 | icon-72@2x.png | 144*144px |
# | 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 |
# | 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 create ・・・
cordova platform add ・・・
cordova platform add android
cordova platform add browser
cordova platform rm ・・・
cordova platform rm android
cordova platform rm browser
cordova platform ls
cordova requirements
cordova prepare
各、環境のプロジェクト・ファイルは、
platformsフォルダ内に格納されている。
cordova build
cordova run
cordova emulate android
以下のサイト情報から、2つの方式が確認できる。
ローカルにある静的なHTMLとWebAPI(JSON)によって機能する。
Webアプリケーションの画面をホストする。
ブラウザ内で使用するJavaScriptの管理に使用。
外部ツール(node.js製)の管理に使用。
Cordovaを拡張したCLI(Cordovaコマンドを直接使用しない)で、
UIのベースにAngularを使用するアプリ開発に特化した開発環境。
React Nativeとの棲み分けは...。
localの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>
<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>
<section id="page1" data-role="page">・・・</section>
<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">
<div data-role="header"> <a href="" data-rel="back">戻る</a> </div>
OAuth PKCEを実装する。
APNs認証キー、またはAPNs証明書の入手
Firebase Consoleにアクセスし、登録する。
プロジェクト作成等の設定を行う(config.xmlのIDなどを登録)。
メジャーなプラグインは以下。
Cordova (PhoneGap)ではなく、WebViewの話題っぽい。
https://codezine.jp/article/detail/9218
https://codezine.jp/article/detail/9327
https://codezine.jp/article/detail/9368
https://codezine.jp/article/detail/9412
https://codezine.jp/article/detail/9454
https://codezine.jp/article/detail/9527
https://codezine.jp/article/detail/9577
https://codezine.jp/article/detail/9593
https://codezine.jp/article/detail/9701
https://codezine.jp/article/detail/9780
https://codezine.jp/article/detail/9838
https://codezine.jp/article/detail/9886
https://codezine.jp/article/detail/9929
https://codezine.jp/article/detail/9970