【Cordova】よく利用するプラグイン一覧

はじめに

最近は Cordova を利用したハイブリッドアプリが流行ってきてますね
Cordova を導入した時にいつも入れているプラグインをメモしておきます

【Cordova】Failed to load resource net::ERR_FILE_NOT_FOUND

はじめに

CordovaプロジェクトでAndroidの起動時にコンソールに表題のエラーが表示されたので解決策をメモしておきます

エラー内容

Failed to load resource: net::ERR_FILE_NOT_FOUND cordova_plugins.js:1

解決策

cordovaプラグインが適切にインストールされていないことが原因でした
以下の2つのフォルダを見比べて、

  • plugins
  • platforms/android/platform_www/plugins

不足しているプラグインがあれば、以下の通り再インストールすれば直りました

1
2
cordova plugin rm cordova-plugin-camera
cordova plugin add cordova-plugin-camera

そもそもプラグインをインストールするとconfig.xmlに反映される気がしてましたが、
今見るとされていないですね。
何か設定が必要だったかな?うーん、分からん

まあとりあえず動いたので良しとしましょうw

参考

https://github.com/apache/cordova-android/issues/753

おわりに

cordovaのエラーは大体経験し尽くしたと思ってましたがまだ先があったのかと思ってびっくりしました

【Cordova】Firebaseを導入する方法

CordovaプロジェクトにFIrebaseを導入する方法をメモしておきます

まずは以下を参考にしてWebアプリにFirebaseを導入します
https://qiita.com/reon777/items/c5218371ce73b0840326

次にFirebaseコンソールからiosとandroidのアプリをそれぞれ追加します
バンドルIDが必要と言われるのでconfig.xmlwidget id="hoge"のhogeの部分を入力してください

基本的にはこれだけでOKです

ただし、認証機能だけは追加の作業が必要となります

手順は以下に記載したので必要あればご確認ください
Firebaseの認証をCordovaで行う方法

Firebaseの認証をCordovaで行う方法

はじめに

CordovaプロジェクトにFirebaseを導入したい時は、基本的にはWebと同様に以下の通りに導入すれば良いのですが、

Vue.jsへのfirebaseの導入と基本的な使い方

認証機能だけは上のままだとうまく動かないので修正する必要があります

で、その修正方法は以下の公式ドキュメントに載っているのですが、

https://firebase.google.com/docs/auth/web/cordova?hl=ja

そのままだとエラーになるので以下の修正が必要でした

【Cordova】setting .DEX extension only for .CLASS files【エラー】

はじめに

CordovaプロジェクトでAndroidのビルド時に表題のエラーになったので解決策をメモしておきます

エラー内容

setting .DEX extension only for .CLASS files

解決策

1
cordova clean

シンプルですね

【Cordova】ライブ配信の実装方法

はじめに

Cordovaを使ってライブ配信のサンプルアプリを作ってみました

完成系はこちら
https://github.com/reon777/sample_vue_cordova_banbuser

作り方

当然ですがライブ配信なんて高度なこと自分でやるのは無理なので、プラグインを使います

色々調べましたが、使えそうなものは以下の1つだけでした

https://github.com/bambuser/cordova-plugin-bambuser

これは以下の会社が運用しているものです

https://bambuser.com

なのでまずは上の会社に登録する必要があります

最初の14日は無料ですが、それからはお金がかかるので注意してください

料金表
https://bambuser.com/pricing

登録したらAPIキーとアプリケーションIDを取得してください

その後は、、コードを載せて解説してもいいんですけど、正直そんなに難しいことはしてないので
直接githubのリポジトリみた方が早いと思います!

https://github.com/reon777/sample_vue_cordova_banbuser

READMEにしたがって起動するとライブ配信と視聴ができるはずです!
端末が2台必要です!

遅延は数秒程度で、画質もライブ配信アプリとしては問題なく使えるレベルだと思いました

ではでは

【Cordova】Minimum supported Gradle version is 4.10.1. Current version is 4.6.

はじめに

CordovaプロジェクトでAndroidのビルド時に表題のエラーになったので解決策をメモしておきます

エラー内容

Minimum supported Gradle version is 4.10.1. Current version is 4.6.

修正ファイル

platforms/android/gradle/wrapper/gradle-wrapper.properties

修正内容

1
2
3
4
# 修正前
distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-all.zip
# 修正前
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

修正後、

  • Android Studio > Build > Make Projectを押下する(もしかしたらいらないかも)
  • cordova prepare android(cordova build androidでもいいかも)
  • Android Studioを開きなおす

【cordova】deviceready has not fired after 5 seconds.

はじめに

androidのcordova実行時にコンソールで
deviceready has not fired after 5 seconds.
というエラーになったので解決策をメモしておきます

【cordova】iPhone X レイアウト対応

はじめに

デフォルトだと iPhone X だと上下に変な空白が出るのでその修正方法です

【cordova-plugin-file】内部ストレージを使ってみた【Vue】

はじめに

これまではデフォルトの vuex を利用してて、結果的に local storage に保存してましたがされますが、以下の記事によるとセキュリティリスクが高いらしいので自分のアプリからしか利用できない内部ストレージを利用する方法を調べてみたので使い方をメモしておきます。

HTML5 の Local Storage を使ってはいけない(翻訳)

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×