はじめに
DockerCompose で Nuxt.js と MongoDB を構築したので手順をメモ
ファイナンス機械学習 金融市場分析を変える機械学習アルゴリズムの理論と実践
という書籍を読み始めました
せっかくなので内容を忘れないようにメモしていこうと思います
超ざっくり要約と一言感想的な感じで
買うか悩んでる人向けのレビュも全部読んでから書こうかなと思います
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と同様に以下の通りに導入すれば良いのですが、
認証機能だけは上のままだとうまく動かないので修正する必要があります
で、その修正方法は以下の公式ドキュメントに載っているのですが、
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
当然ですがライブ配信なんて高度なこと自分でやるのは無理なので、プラグインを使います
色々調べましたが、使えそうなものは以下の1つだけでした
https://github.com/bambuser/cordova-plugin-bambuser
これは以下の会社が運用しているものです
なのでまずは上の会社に登録する必要があります
最初の14日は無料ですが、それからはお金がかかるので注意してください
料金表
https://bambuser.com/pricing
登録したらAPIキーとアプリケーションIDを取得してください
その後は、、コードを載せて解説してもいいんですけど、正直そんなに難しいことはしてないので
直接githubのリポジトリみた方が早いと思います!
https://github.com/reon777/sample_vue_cordova_banbuser
READMEにしたがって起動するとライブ配信と視聴ができるはずです!
端末が2台必要です!
遅延は数秒程度で、画質もライブ配信アプリとしては問題なく使えるレベルだと思いました
ではでは
CordovaプロジェクトでAndroidのビルド時に表題のエラーになったので解決策をメモしておきます
Minimum supported Gradle version is 4.10.1. Current version is 4.6.
platforms/android/gradle/wrapper/gradle-wrapper.properties
1 | # 修正前 |
修正後、
IonicプロジェクトでAndroid起動すると画面に表題のエラーが表示されたので解決策をメモしておきます
net::ERR_CONNECTION_REFUSED (http://localhost:8080/)
1 | ionic cordova plugin add cordova-plugin-ionic-webview |
一部のスクロールを禁止にするのではなく一部のスクロールのみ許可して他は全て禁止にするという逆転の発想の方が
使い勝手が良かったので紹介します
このライブラリを使うと色々な問題が解決されていい感じでした
https://github.com/willmcpo/body-scroll-lock
Vueならこっちですね
https://github.com/phegman/v-scroll-lock
1 | npm install v-scroll-lock |
でインストールして、
1 | import VScrollLock from 'v-scroll-lock' |
すると全画面でスクロールが無効になります
で、スクロールさせたい要素だけ
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以外は問題なく使えるので導入しても大丈夫ですね!()
Update your browser to view this website correctly. Update my browser now