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

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

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

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

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

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

はじめに

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

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

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

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

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

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

はじめに

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

エラー内容

setting .DEX extension only for .CLASS files

解決策

1

cordova clean

シンプルですね

はじめに

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

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

作り方

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

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

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にしたがって起動するとライブ配信と視聴ができるはずです！
端末が２台必要です！

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

ではでは

はじめに

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を開きなおす

はじめに

IonicプロジェクトでAndroid起動すると画面に表題のエラーが表示されたので解決策をメモしておきます

エラー内容

net::ERR_CONNECTION_REFUSED (http://localhost:8080/)

修正内容

1
2
3
4

ionic cordova plugin add cordova-plugin-ionic-webview
ionic cordova platforms rm android
rm -rf plugins
ionic cordova build android

2019/11/22 追記

一部のスクロールを禁止にするのではなく一部のスクロールのみ許可して他は全て禁止にするという逆転の発想の方が
使い勝手が良かったので紹介します

このライブラリを使うと色々な問題が解決されていい感じでした
https://github.com/willmcpo/body-scroll-lock

Vueならこっちですね
https://github.com/phegman/v-scroll-lock

1

npm install v-scroll-lock

でインストールして、

1
2

import VScrollLock from 'v-scroll-lock'
Vue.use(VScrollLock)

すると全画面でスクロールが無効になります
で、スクロールさせたい要素だけ

1

<div v-scroll-lock="true">

のようにするとこの要素だけはスクロールできるようになります

以下、原文

普通スクロール禁止といえば以下を使うのだと思いますが、

1

document.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false});

これだと画面全体に効いてしまいます

画面の一部の要素だけをスクロール禁止にするCSSを見つけたのでメモしておきます

1

touch-action: none;

https://caniuse.com/#feat=css-touch-action

caniuseを見るとデスクトップSafari以外は問題なく使えるので導入しても大丈夫ですね！（）

はじめに

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

なんだかいつも役に立つことを書こうと意識しすぎてる気がするので今日は逆に何の役にも立たないことを書こうと思う

ただの日記を書く。

今日起こった事とか感じたこととかを書く

なんか最近エッセイを色々読んでて、自分も何か書きたくなったのだ

今日は朝は 8 時半に目が覚めた

はじめに

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