Cordova (PhoneGap)
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-戻る
--[[ハイブリッドアプリ]]
--[[クロスプラットフォーム開発ツール]]
---[[Flutter]]
---ReactNative
---Cordova (PhoneGap)
*目次 [#rc264ef1]
#contents
*概要 [#m7579b41]
-モバイルアプリのための万能ツールではなく、~
[[ハイブリッドアプリ]]を開発するためのフレームワーク。
-開発の言語・ツールは自由に組み合わせられる。~
([[WebViewにHTML5アプリを組み込むだけなので>ハイブリッド...
--JavaScript、HTML、CSS
--Angular、React、Vue.js、OnsenUIなど。
--故に、プラットフォーム移行は、~
[[内部コンテンツ(≒SPA)部分の乗せ換え>#o756899b]]で足り...
**経緯 [#hfe39c32]
-2011年10月4日
--Nitobi社が開発していたPhoneGapをAdobeが買収、
--Adobeは同時にPhoneGapを、Apache Foundationへ寄贈した。
--Apache FoundationではCordovaというブランド名が与えられ...
-2020年10月1日
--AdobeはPhoneGap / PhoneGap Buildの開発及びサービス提供...
--現在、アシアルから、Monacaへのマイグレーション支援が提...
**PhoneGap [#waca2c7a]
-PhoneGapはCordovaベースのAdobe製品版。
-以下の様なサービスも提供されている。
--PhoneGap Build~
PhoneGapを利用したアプリケーションの~
ビルド環境をオンラインで利用できるサービス。
--PhoneGap Debug~
PhoneGap製のアプリをデバイス上で~
デバッグすることができるサービス。
--PhoneGap Emulation~
Webブラウザ(Google Chrome)上で動作する~
エミュレータによってアプリの検証が行えるサービス。
**Monaca [#o756899b]
-アシアル株式会社(Asial Corporation)が開発・運営している。
-Cordovaベースの開発プラットフォーム
--内部的には、最新版のCordovaを利用している。
--開発・ビルド・デプロイまでWeb上で可能なのが特徴。
---Webブラウザからアクセス可能なWeb IDE
---開発したアプリをビルドするサービス
---およびデプロイするサービス(と、サーバー
-Freeプラン以外ではローカル開発も行える~
Monaca LocalkitやMonaca CLIも使用可能。~
(Monaca CLIは、 Cordova CLIの拡張っぽい)
-[[mBaaS]]を選択的に利用可能。
--Monaca Backend
--[[Firebase]]
--[[ニフクラ mobile backend>mBaaS#r9155dac]]
-Monaca Docs
--他のプラットフォームからの移行~
https://docs.monaca.io/ja/products_guide/migration/
*プラットフォーム [#m0666029]
**サポート [#r6cc6e0d]
-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関数などが利用で...
-[[プラグイン>#mbb3fb8e]]を作成すれば機能は実現できる。~
ただし、プラットフォーム毎の制約を受ける。
**実機・エミュレーター [#j98c1004]
-実機・エミュレーターへデプロイしデバックできる。
-実機へのデプロイには、各種ネイティブ環境への~
デプロイに必要な環境設定が必要になる。
***Androidアプリ [#scb00eb0]
-SDKをWindows向けにもMac/Linux向けにもリリース
-参考:[[Android]]
--[[Android開発]]
--[[Androidのデバッグ]]
--[[Androidのデプロイ]]
***iOSアプリ [#a469ae8a]
-ビルド作業などでMacが必要になる
-参考:[[iOS]]
--[[iOS開発]]
--[[iOSのデバッグ]]
--[[iOSのデプロイ]]
***Windowsアプリ [#xb514b7f]
-Windowsの開発環境が必要になる。
-・・・
-参考:Windows 10
--Windows 10 Apache Cordova プラットフォームの概要 | Visu...
https://devblogs.microsoft.com/visualstudio-jpn/windows-1...
***[[ビルドとデプロイ>Cordova - ビルドとデプロイ]] [#naae...
*開発 [#l9af25cb]
**開発ツール [#pce95c01]
***Cordova CLI [#a018251d]
-[[Node.js]]製コマンドライン開発ツール
--新しいプロジェクトの作成
--異なるプラットフォームで構築
--エミュレーター内で実際のデバイスで実行
-詳しくは、「[[Cordova CLIコマンド>#ec91c41f]]」を参照。
***各種 IDE [#uc7a2962]
-Apache Cordovaでモバイルアプリを開発するには、
--(JavaScritpを記述する)テキスト・エディタ
--(プロジェクトの生成やデバッグ実行を行うための各種)[[C...
>だけを利用しての開発も可能だが、
-Apache CordovaをサポートしたIDEを導入すると、~
コマンド操作を行うことなくアプリ開発を進めることができる。
--[[VS Code + Cordova Tools Extension>https://techinfoofm...
--Monaca
---アシアル社が提供しているクラウド上でモバイルアプリを開...
---Cloud IDE、ローカル開発ツール、デバッガ、バックエンド...
---AndroidやiOSなどの環境を用意せずに手軽に開発できる。
---独自のUIフレームワーク、Onsen UIとIonic Frameworkとの...
---ローカル上で開発できる「Local Kit」や、Visual Studioと...
--, etc.
**Cordovaフレームワーク [#kba33b89]
***cordova.js [#od4fcd96]
-Cordovaフレームワークが提供するJavaScript側インターフェ...
-Cordovaの機能にアクセスする場合、HTML中でcordova.jsを読...
***devicereadyイベント [#pfef3b3e]
-ネイティブとHTML5とのブリッジを確立するための初期化処理...
-開発者は、HTML5側でdevicereadyイベントを察知した後にネイ...
-loadイベントの後にブリッジの初期化処理が実行され、device...
**プロジェクト構造 [#gef3a270]
プロジェクトは、[[Cordova CLIコマンド>#ec91c41f]]で作成す...
|#|ファイル・フォルダ|説明|h
|1|[[config.xml>#x0c16d99]]|各プラットフォームに展開され...
|2|[[wwwフォルダ>#d95d4002]]|HTML5リソースやアプリ設定に...
|3|[[pluginsフォルダ>#gf533def]]|[[プラグイン>#mbb3fb8e]]...
|4|[[mergesフォルダ>#zfea3a56]]|HTML5側をプラットフォーム...
|5|[[platformsフォルダ>#vb7e0cec]]|ネイティブ側をプラット...
***[[config.xml>Cordova - config.xml#vd203b46]] [#x0c16d99]
***wwwフォルダ [#d95d4002]
以下の中身を読んで理解する。
-index.html~
エントリポイント
-cssフォルダ~
CSSファイル群
--index.css
-scriptフォルダ~
JavaScriptファイル群
--index.js
-imagesフォルダ~
イメージ・ファイル群
-fontsフォルダ~
フォント・ファイル群
***pluginsフォルダ [#gf533def]
Cordovaで利用する[[プラグイン>#mbb3fb8e]]やその設定ファイ...
***mergesフォルダ [#zfea3a56]
HTML5側をプラットフォームごとに切り替える。
-プラットフォーム特有のHTML5リソースを配置
--merges/android~
Androidプラットフォームだけで用いたい画像やJavaScript
--merges/ios~
iOSプラットフォームだけで用いたい画像やJavaScript
-ビルド時の動作(Androidの場合)
>
+wwwディレクトリの内容がplatforms/android/assets/wwwディ...
+merges/androidディレクトリの内容がplatforms/android/asse...
※ 同じ名前のファイルがある場合には上書きされる。
***platformsフォルダ [#vb7e0cec]
ネイティブ側をプラットフォームごとに切り替える。
-プロジェクト
--Androidの場合~
Androidプロジェクトが生成される(Android Studioなどで開く...
--iOSの場合~
Xcodeプロジェクトが生成される(Xcodeで開くことが出来るら...
-アイコン設定
--Androidの場合~
platforms/android/res以下に、
|#|ファイルのパス|サイズ|h
|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以下に、
|#|ファイルのパス|サイズ|h
|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ファイルのパス|サイズ(縦*横)|h
|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ファイルのパス|サイズ(縦*横)|h
|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 - config.xml#d8a61a...
**[[プラグイン>Cordova - Plugin]] [#mbb3fb8e]
*Cordova CLIコマンド [#ec91c41f]
**[[初期設定>https://techinfoofmicrosofttech.osscons.jp/i...
**[[プロジェクト作成>https://techinfoofmicrosofttech.ossc...
***[[Create>https://techinfoofmicrosofttech.osscons.jp/in...
-プロジェクト作成
cordova create ・・・
***Platform [#ld043276]
-ターゲット・プラットフォームの追加
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
-[[具体例>https://techinfoofmicrosofttech.osscons.jp/inde...
***requirements [#qbaa343a]
-ビルドに必要な前提環境を確認する。
cordova requirements
-[[前提環境の例>https://techinfoofmicrosofttech.osscons.j...
-前提環境の構築
--Android~
ココの指示に従って[[Android Targetをインストール>Android ...
--iOS~
ココの指示に従って...。
--Windows~
ココの指示に従って...。
***Prepare [#w30149d6]
-準備
cordova prepare
-[[config.xml>Cordova - config.xml]]メタデータを
--プラットフォーム固有のマニフェストファイルに変換し、
--アイコンとスプラッシュスクリーンをコピーし、
--指定されたプラットフォーム用のプラグインファイルをコピ...
--各ネイティブSDKでプロジェクトを構築できるようにする。
**[[ビルド>#o519a937]] → [[実行>#bfd8567d]] → [[デプロイ>...
***Platforms [#y3651c33]
各、環境のプロジェクト・ファイルは、~
[[platformsフォルダ>#vb7e0cec]]内に格納されている。
***Build [#o519a937]
-ビルド
cordova build
-実機やエミュレータ向けのビルドは作成できる。
-ただし、実機やエミュレータにデプロイはしない。
***Run [#bfd8567d]
-ブラウザで起動する。
cordova run
-エミュレータで起動する。
--コマンドから
cordova emulate android
--[[IDEのサポートを活用する>#uc7a2962]]
-実機を使用した動作確認は[[Deploy>#l9a50865]]が必要。
***[[Deploy>#j98c1004]] [#l9a50865]
**参考 [#n92f08ef]
-Qiita
--よく使うCordovaコマンド~
https://qiita.com/hara_p/items/f9bbcced6882fcfede6f
--Cordovaを使って、Androidの実機実行するまで~
https://qiita.com/cognitom/items/3b30284e8d01eaf122b7
*方式 [#i920a5e7]
**処理方式 [#yc003753]
以下のサイト情報から、2つの方式が確認できる。
-Apache Cordova を使用したホスト型 Web アプリの作成 – Vis...
https://blogs.msdn.microsoft.com/visualstudio_jpn/2016/05...
***[[SPA>#mdb0c942]]型 [#j5c142f6]
ローカルにある静的なHTMLとWebAPI(JSON)によって機能する。
***Web型 [#k46979bb]
Webアプリケーションの画面をホストする(上記のホスト型 Web...
**パッケージ管理 [#d322639a]
***Browser [#ie82631e]
ブラウザ内で使用するJavaScriptの管理に使用。
***npm [#icff9246]
外部ツール([[Node.js]]製)の管理に使用。
***参考 [#p4582ef3]
-ASP.NET Coreへの移行 - マイクロソフト系技術情報 Wiki > ...
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP....
**ソースの外だし [#m64fb281]
***HTMLファイル [#aba0cca3]
不可能
***JSファイル [#ieafb461]
可能
-サーバ上に格納したものを<src script=""></src>で指定
-ただ、更新かかるように、キャッシュ無効にすると、オフライ...
***[[CodePush>https://techinfoofmicrosofttech.osscons.jp/...
[[上記の問題>#ieafb461]]を回避するために、OTAアップデート...
**画面遷移 [#c20b524c]
***ブラウザの履歴 [#pf69f5bf]
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 [#lbe7ed7b]
-ページの定義
--data-role="page"~
<section>タグを使い、その中に<data-role="page">とする...
<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>#mdb0c942]] Router [#maab257e]
[[SPAフレームワーク>#mdb0c942]]のRouter機能を使用する。
**クレーム・ベース認証 [#me602308]
***[[OAuth2/OIDC>https://techinfoofmicrosofttech.osscons....
OAuth PKCEを実装する。
***OAuth2/OIDC以外 [#of1c0099]
-色々なプラグインがあるが、使うとIDMaaSにロックインされる。
-例えば、Azureなら[[ADAL(MSAL)>https://techinfoofmicrosof...
-ブラックボックス化されているが、
--恐らく中身は、[[OAuth2/OIDC>#hcf3dd4e]]。
--モノによっては、ケルベロスなどもあるかも。
>※ そんな・こんな。なので、あまり利用したくないんです。
**[[プッシュ通知]] [#u9b1dad8]
-色々なプラグインがあるが、使うと[[mBaaS]]にロックインさ...
-[[FCM>Android (FCM)]]は実質デファクトなのでロックインの...
***設定手順 [#xafba4e4]
https://docs.monaca.io/ja/tutorials/phonegap_push/
-準備(iOSのみ)
--[[APNs>iOS (APNs)]]入手
--[[APNs>iOS (APNs)]]認証キー、または[[APNs>iOS (APNs)]]...
-[[FCM>Android (FCM)]]関連の設定
--[[Firebaseにログイン>#yb66ae59]]
--[[プロジェクトの作成>#r4efaf9a]]
--[[FCMへアプリを登録>#x8599532]]
--[[ファイルのダウンロード>#iaf16f27]]
--[[ビルド・プロセスへの組込>#y3988af9]]
--[[プラグインのインストール>#l372907f]]
--[[プッシュ通知のコード実装>#a7a9f6e1]]
***[[Firebaseにログイン>Android (FCM)#k71a6dd8]] [#yb66ae...
***[[プロジェクトの作成>Android (FCM)#sa05a1ad]] [#r4efaf...
***[[FCMへアプリを登録>Android (FCM)#u8f35bcd]] [#x8599532]
***[[ファイルのダウンロード>Android (FCM)#h236aa91]] [#ia...
***[[ビルド・プロセスへの組込>Android (FCM)#v1a2d3ea]] [#...
Android、iOS、其々のプラットフォームに向けて、
-[[前述のダウンロード・ファイル>#iaf16f27]]をビルド・プロ...
-メイク・ファイル的なものを一部、手修正する。
***[[プラグインのインストール>Cordova - Plugin#k1d61b81]]...
***[[プッシュ通知のコード実装>Android (FCM)#uf6bbe9e]] [#...
**[[SPA>(MV*) UIフレームワーク]]フレームワークの追加 [#md...
[[SPA>(MV*) UIフレームワーク]]は index.html と index.jsに...
これを、www の index.html と差し替えれば良い。
***[[webpack>JavaScriptライブラリの作り方#jba2efa6]] [#yf...
CommonJSモジュールを利用する際に使用。
***[[Angular>(MV*) UIフレームワーク#ac831ebe]] + Ionic [#...
Cordovaを拡張したCLI(Cordovaコマンドを直接使用しない)で...
UIのベースに[[Angular>(MV*) UIフレームワーク#ac831ebe]]を...
***[[React]] [#f1551b14]
React Nativeとの棲み分けは...。
-参考
--create-react-app と Cordova を使って一発でReactのネイテ...
https://qiita.com/hal_sk/items/cdc459fd639a736bccc3
--javascript - Cordova with Create-react-app - Stack Over...
https://stackoverflow.com/questions/43336924/cordova-with...
*参考 [#o874d00d]
-Apache Cordova - Wikipedia~
https://ja.wikipedia.org/wiki/Apache_Cordova
-HTML5ハイブリッドアプリ開発を支えるOSS~
「Cordova」はなぜアツいのか?PhoneGapとの違いは何か? - ...
http://furoshiki.hatenadiary.jp/entry/2014/07/23/084643
-Cordova を使って本気で商用ハイブリッドアプリ開発をやって...
https://www.slideshare.net/ShinOgata1/cordova-73839153
**リファレンス [#ve5506ba]
-Monaca Docs~
http://docs.monaca.io/ja/
-ガイド - Apache Cordova~
https://cordova.apache.org/docs/ja/latest/
**Qiita [#i75d9dd9]
-[*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 [#c684c817]
-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 [#qe064aa1]
-書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発...
http://www.buildinsider.net/mobile/bookhtml5hybrid
***第4章 Cordovaを用いたアプリ開発の流れ [#id37d4f1]
-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とネイティブとのブリッジ [#gc326880]
[[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回:連絡先データにアクセスするプラグインを使う [#x...
https://codezine.jp/article/detail/9838
***第12回:カレンダーの予定を管理するプラグインを使う [#s...
https://codezine.jp/article/detail/9886
***第13回:カレンダーを管理するプラグインを使って、予定の...
https://codezine.jp/article/detail/9929
***第14回:Cordovaでアプリを公開するためのビルド方法をカ...
https://codezine.jp/article/detail/9970
**サポート [#b994204a]
-Adobe PhoneGap FAQ のサービスの終了~
https://helpx.adobe.com/jp/experience-manager/kb/adobe-ph...
-PhoneGap開発終了と今後のApache Cordovaについて | モナカ...
https://press.monaca.io/takuya/5562
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-戻る
--[[ハイブリッドアプリ]]
--[[クロスプラットフォーム開発ツール]]
---[[Flutter]]
---ReactNative
---Cordova (PhoneGap)
*目次 [#rc264ef1]
#contents
*概要 [#m7579b41]
-モバイルアプリのための万能ツールではなく、~
[[ハイブリッドアプリ]]を開発するためのフレームワーク。
-開発の言語・ツールは自由に組み合わせられる。~
([[WebViewにHTML5アプリを組み込むだけなので>ハイブリッド...
--JavaScript、HTML、CSS
--Angular、React、Vue.js、OnsenUIなど。
--故に、プラットフォーム移行は、~
[[内部コンテンツ(≒SPA)部分の乗せ換え>#o756899b]]で足り...
**経緯 [#hfe39c32]
-2011年10月4日
--Nitobi社が開発していたPhoneGapをAdobeが買収、
--Adobeは同時にPhoneGapを、Apache Foundationへ寄贈した。
--Apache FoundationではCordovaというブランド名が与えられ...
-2020年10月1日
--AdobeはPhoneGap / PhoneGap Buildの開発及びサービス提供...
--現在、アシアルから、Monacaへのマイグレーション支援が提...
**PhoneGap [#waca2c7a]
-PhoneGapはCordovaベースのAdobe製品版。
-以下の様なサービスも提供されている。
--PhoneGap Build~
PhoneGapを利用したアプリケーションの~
ビルド環境をオンラインで利用できるサービス。
--PhoneGap Debug~
PhoneGap製のアプリをデバイス上で~
デバッグすることができるサービス。
--PhoneGap Emulation~
Webブラウザ(Google Chrome)上で動作する~
エミュレータによってアプリの検証が行えるサービス。
**Monaca [#o756899b]
-アシアル株式会社(Asial Corporation)が開発・運営している。
-Cordovaベースの開発プラットフォーム
--内部的には、最新版のCordovaを利用している。
--開発・ビルド・デプロイまでWeb上で可能なのが特徴。
---Webブラウザからアクセス可能なWeb IDE
---開発したアプリをビルドするサービス
---およびデプロイするサービス(と、サーバー
-Freeプラン以外ではローカル開発も行える~
Monaca LocalkitやMonaca CLIも使用可能。~
(Monaca CLIは、 Cordova CLIの拡張っぽい)
-[[mBaaS]]を選択的に利用可能。
--Monaca Backend
--[[Firebase]]
--[[ニフクラ mobile backend>mBaaS#r9155dac]]
-Monaca Docs
--他のプラットフォームからの移行~
https://docs.monaca.io/ja/products_guide/migration/
*プラットフォーム [#m0666029]
**サポート [#r6cc6e0d]
-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関数などが利用で...
-[[プラグイン>#mbb3fb8e]]を作成すれば機能は実現できる。~
ただし、プラットフォーム毎の制約を受ける。
**実機・エミュレーター [#j98c1004]
-実機・エミュレーターへデプロイしデバックできる。
-実機へのデプロイには、各種ネイティブ環境への~
デプロイに必要な環境設定が必要になる。
***Androidアプリ [#scb00eb0]
-SDKをWindows向けにもMac/Linux向けにもリリース
-参考:[[Android]]
--[[Android開発]]
--[[Androidのデバッグ]]
--[[Androidのデプロイ]]
***iOSアプリ [#a469ae8a]
-ビルド作業などでMacが必要になる
-参考:[[iOS]]
--[[iOS開発]]
--[[iOSのデバッグ]]
--[[iOSのデプロイ]]
***Windowsアプリ [#xb514b7f]
-Windowsの開発環境が必要になる。
-・・・
-参考:Windows 10
--Windows 10 Apache Cordova プラットフォームの概要 | Visu...
https://devblogs.microsoft.com/visualstudio-jpn/windows-1...
***[[ビルドとデプロイ>Cordova - ビルドとデプロイ]] [#naae...
*開発 [#l9af25cb]
**開発ツール [#pce95c01]
***Cordova CLI [#a018251d]
-[[Node.js]]製コマンドライン開発ツール
--新しいプロジェクトの作成
--異なるプラットフォームで構築
--エミュレーター内で実際のデバイスで実行
-詳しくは、「[[Cordova CLIコマンド>#ec91c41f]]」を参照。
***各種 IDE [#uc7a2962]
-Apache Cordovaでモバイルアプリを開発するには、
--(JavaScritpを記述する)テキスト・エディタ
--(プロジェクトの生成やデバッグ実行を行うための各種)[[C...
>だけを利用しての開発も可能だが、
-Apache CordovaをサポートしたIDEを導入すると、~
コマンド操作を行うことなくアプリ開発を進めることができる。
--[[VS Code + Cordova Tools Extension>https://techinfoofm...
--Monaca
---アシアル社が提供しているクラウド上でモバイルアプリを開...
---Cloud IDE、ローカル開発ツール、デバッガ、バックエンド...
---AndroidやiOSなどの環境を用意せずに手軽に開発できる。
---独自のUIフレームワーク、Onsen UIとIonic Frameworkとの...
---ローカル上で開発できる「Local Kit」や、Visual Studioと...
--, etc.
**Cordovaフレームワーク [#kba33b89]
***cordova.js [#od4fcd96]
-Cordovaフレームワークが提供するJavaScript側インターフェ...
-Cordovaの機能にアクセスする場合、HTML中でcordova.jsを読...
***devicereadyイベント [#pfef3b3e]
-ネイティブとHTML5とのブリッジを確立するための初期化処理...
-開発者は、HTML5側でdevicereadyイベントを察知した後にネイ...
-loadイベントの後にブリッジの初期化処理が実行され、device...
**プロジェクト構造 [#gef3a270]
プロジェクトは、[[Cordova CLIコマンド>#ec91c41f]]で作成す...
|#|ファイル・フォルダ|説明|h
|1|[[config.xml>#x0c16d99]]|各プラットフォームに展開され...
|2|[[wwwフォルダ>#d95d4002]]|HTML5リソースやアプリ設定に...
|3|[[pluginsフォルダ>#gf533def]]|[[プラグイン>#mbb3fb8e]]...
|4|[[mergesフォルダ>#zfea3a56]]|HTML5側をプラットフォーム...
|5|[[platformsフォルダ>#vb7e0cec]]|ネイティブ側をプラット...
***[[config.xml>Cordova - config.xml#vd203b46]] [#x0c16d99]
***wwwフォルダ [#d95d4002]
以下の中身を読んで理解する。
-index.html~
エントリポイント
-cssフォルダ~
CSSファイル群
--index.css
-scriptフォルダ~
JavaScriptファイル群
--index.js
-imagesフォルダ~
イメージ・ファイル群
-fontsフォルダ~
フォント・ファイル群
***pluginsフォルダ [#gf533def]
Cordovaで利用する[[プラグイン>#mbb3fb8e]]やその設定ファイ...
***mergesフォルダ [#zfea3a56]
HTML5側をプラットフォームごとに切り替える。
-プラットフォーム特有のHTML5リソースを配置
--merges/android~
Androidプラットフォームだけで用いたい画像やJavaScript
--merges/ios~
iOSプラットフォームだけで用いたい画像やJavaScript
-ビルド時の動作(Androidの場合)
>
+wwwディレクトリの内容がplatforms/android/assets/wwwディ...
+merges/androidディレクトリの内容がplatforms/android/asse...
※ 同じ名前のファイルがある場合には上書きされる。
***platformsフォルダ [#vb7e0cec]
ネイティブ側をプラットフォームごとに切り替える。
-プロジェクト
--Androidの場合~
Androidプロジェクトが生成される(Android Studioなどで開く...
--iOSの場合~
Xcodeプロジェクトが生成される(Xcodeで開くことが出来るら...
-アイコン設定
--Androidの場合~
platforms/android/res以下に、
|#|ファイルのパス|サイズ|h
|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以下に、
|#|ファイルのパス|サイズ|h
|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ファイルのパス|サイズ(縦*横)|h
|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ファイルのパス|サイズ(縦*横)|h
|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 - config.xml#d8a61a...
**[[プラグイン>Cordova - Plugin]] [#mbb3fb8e]
*Cordova CLIコマンド [#ec91c41f]
**[[初期設定>https://techinfoofmicrosofttech.osscons.jp/i...
**[[プロジェクト作成>https://techinfoofmicrosofttech.ossc...
***[[Create>https://techinfoofmicrosofttech.osscons.jp/in...
-プロジェクト作成
cordova create ・・・
***Platform [#ld043276]
-ターゲット・プラットフォームの追加
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
-[[具体例>https://techinfoofmicrosofttech.osscons.jp/inde...
***requirements [#qbaa343a]
-ビルドに必要な前提環境を確認する。
cordova requirements
-[[前提環境の例>https://techinfoofmicrosofttech.osscons.j...
-前提環境の構築
--Android~
ココの指示に従って[[Android Targetをインストール>Android ...
--iOS~
ココの指示に従って...。
--Windows~
ココの指示に従って...。
***Prepare [#w30149d6]
-準備
cordova prepare
-[[config.xml>Cordova - config.xml]]メタデータを
--プラットフォーム固有のマニフェストファイルに変換し、
--アイコンとスプラッシュスクリーンをコピーし、
--指定されたプラットフォーム用のプラグインファイルをコピ...
--各ネイティブSDKでプロジェクトを構築できるようにする。
**[[ビルド>#o519a937]] → [[実行>#bfd8567d]] → [[デプロイ>...
***Platforms [#y3651c33]
各、環境のプロジェクト・ファイルは、~
[[platformsフォルダ>#vb7e0cec]]内に格納されている。
***Build [#o519a937]
-ビルド
cordova build
-実機やエミュレータ向けのビルドは作成できる。
-ただし、実機やエミュレータにデプロイはしない。
***Run [#bfd8567d]
-ブラウザで起動する。
cordova run
-エミュレータで起動する。
--コマンドから
cordova emulate android
--[[IDEのサポートを活用する>#uc7a2962]]
-実機を使用した動作確認は[[Deploy>#l9a50865]]が必要。
***[[Deploy>#j98c1004]] [#l9a50865]
**参考 [#n92f08ef]
-Qiita
--よく使うCordovaコマンド~
https://qiita.com/hara_p/items/f9bbcced6882fcfede6f
--Cordovaを使って、Androidの実機実行するまで~
https://qiita.com/cognitom/items/3b30284e8d01eaf122b7
*方式 [#i920a5e7]
**処理方式 [#yc003753]
以下のサイト情報から、2つの方式が確認できる。
-Apache Cordova を使用したホスト型 Web アプリの作成 – Vis...
https://blogs.msdn.microsoft.com/visualstudio_jpn/2016/05...
***[[SPA>#mdb0c942]]型 [#j5c142f6]
ローカルにある静的なHTMLとWebAPI(JSON)によって機能する。
***Web型 [#k46979bb]
Webアプリケーションの画面をホストする(上記のホスト型 Web...
**パッケージ管理 [#d322639a]
***Browser [#ie82631e]
ブラウザ内で使用するJavaScriptの管理に使用。
***npm [#icff9246]
外部ツール([[Node.js]]製)の管理に使用。
***参考 [#p4582ef3]
-ASP.NET Coreへの移行 - マイクロソフト系技術情報 Wiki > ...
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP....
**ソースの外だし [#m64fb281]
***HTMLファイル [#aba0cca3]
不可能
***JSファイル [#ieafb461]
可能
-サーバ上に格納したものを<src script=""></src>で指定
-ただ、更新かかるように、キャッシュ無効にすると、オフライ...
***[[CodePush>https://techinfoofmicrosofttech.osscons.jp/...
[[上記の問題>#ieafb461]]を回避するために、OTAアップデート...
**画面遷移 [#c20b524c]
***ブラウザの履歴 [#pf69f5bf]
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 [#lbe7ed7b]
-ページの定義
--data-role="page"~
<section>タグを使い、その中に<data-role="page">とする...
<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>#mdb0c942]] Router [#maab257e]
[[SPAフレームワーク>#mdb0c942]]のRouter機能を使用する。
**クレーム・ベース認証 [#me602308]
***[[OAuth2/OIDC>https://techinfoofmicrosofttech.osscons....
OAuth PKCEを実装する。
***OAuth2/OIDC以外 [#of1c0099]
-色々なプラグインがあるが、使うとIDMaaSにロックインされる。
-例えば、Azureなら[[ADAL(MSAL)>https://techinfoofmicrosof...
-ブラックボックス化されているが、
--恐らく中身は、[[OAuth2/OIDC>#hcf3dd4e]]。
--モノによっては、ケルベロスなどもあるかも。
>※ そんな・こんな。なので、あまり利用したくないんです。
**[[プッシュ通知]] [#u9b1dad8]
-色々なプラグインがあるが、使うと[[mBaaS]]にロックインさ...
-[[FCM>Android (FCM)]]は実質デファクトなのでロックインの...
***設定手順 [#xafba4e4]
https://docs.monaca.io/ja/tutorials/phonegap_push/
-準備(iOSのみ)
--[[APNs>iOS (APNs)]]入手
--[[APNs>iOS (APNs)]]認証キー、または[[APNs>iOS (APNs)]]...
-[[FCM>Android (FCM)]]関連の設定
--[[Firebaseにログイン>#yb66ae59]]
--[[プロジェクトの作成>#r4efaf9a]]
--[[FCMへアプリを登録>#x8599532]]
--[[ファイルのダウンロード>#iaf16f27]]
--[[ビルド・プロセスへの組込>#y3988af9]]
--[[プラグインのインストール>#l372907f]]
--[[プッシュ通知のコード実装>#a7a9f6e1]]
***[[Firebaseにログイン>Android (FCM)#k71a6dd8]] [#yb66ae...
***[[プロジェクトの作成>Android (FCM)#sa05a1ad]] [#r4efaf...
***[[FCMへアプリを登録>Android (FCM)#u8f35bcd]] [#x8599532]
***[[ファイルのダウンロード>Android (FCM)#h236aa91]] [#ia...
***[[ビルド・プロセスへの組込>Android (FCM)#v1a2d3ea]] [#...
Android、iOS、其々のプラットフォームに向けて、
-[[前述のダウンロード・ファイル>#iaf16f27]]をビルド・プロ...
-メイク・ファイル的なものを一部、手修正する。
***[[プラグインのインストール>Cordova - Plugin#k1d61b81]]...
***[[プッシュ通知のコード実装>Android (FCM)#uf6bbe9e]] [#...
**[[SPA>(MV*) UIフレームワーク]]フレームワークの追加 [#md...
[[SPA>(MV*) UIフレームワーク]]は index.html と index.jsに...
これを、www の index.html と差し替えれば良い。
***[[webpack>JavaScriptライブラリの作り方#jba2efa6]] [#yf...
CommonJSモジュールを利用する際に使用。
***[[Angular>(MV*) UIフレームワーク#ac831ebe]] + Ionic [#...
Cordovaを拡張したCLI(Cordovaコマンドを直接使用しない)で...
UIのベースに[[Angular>(MV*) UIフレームワーク#ac831ebe]]を...
***[[React]] [#f1551b14]
React Nativeとの棲み分けは...。
-参考
--create-react-app と Cordova を使って一発でReactのネイテ...
https://qiita.com/hal_sk/items/cdc459fd639a736bccc3
--javascript - Cordova with Create-react-app - Stack Over...
https://stackoverflow.com/questions/43336924/cordova-with...
*参考 [#o874d00d]
-Apache Cordova - Wikipedia~
https://ja.wikipedia.org/wiki/Apache_Cordova
-HTML5ハイブリッドアプリ開発を支えるOSS~
「Cordova」はなぜアツいのか?PhoneGapとの違いは何か? - ...
http://furoshiki.hatenadiary.jp/entry/2014/07/23/084643
-Cordova を使って本気で商用ハイブリッドアプリ開発をやって...
https://www.slideshare.net/ShinOgata1/cordova-73839153
**リファレンス [#ve5506ba]
-Monaca Docs~
http://docs.monaca.io/ja/
-ガイド - Apache Cordova~
https://cordova.apache.org/docs/ja/latest/
**Qiita [#i75d9dd9]
-[*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 [#c684c817]
-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 [#qe064aa1]
-書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発...
http://www.buildinsider.net/mobile/bookhtml5hybrid
***第4章 Cordovaを用いたアプリ開発の流れ [#id37d4f1]
-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とネイティブとのブリッジ [#gc326880]
[[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回:連絡先データにアクセスするプラグインを使う [#x...
https://codezine.jp/article/detail/9838
***第12回:カレンダーの予定を管理するプラグインを使う [#s...
https://codezine.jp/article/detail/9886
***第13回:カレンダーを管理するプラグインを使って、予定の...
https://codezine.jp/article/detail/9929
***第14回:Cordovaでアプリを公開するためのビルド方法をカ...
https://codezine.jp/article/detail/9970
**サポート [#b994204a]
-Adobe PhoneGap FAQ のサービスの終了~
https://helpx.adobe.com/jp/experience-manager/kb/adobe-ph...
-PhoneGap開発終了と今後のApache Cordovaについて | モナカ...
https://press.monaca.io/takuya/5562
ページ名: