DockerComposeでNuxt.jsとMongoDBを構築した

はじめに

DockerCompose で Nuxt.js と MongoDB を構築したので手順をメモ

【読書メモ】ファイナンス機械学習【第1章】

はじめに

ファイナンス機械学習 金融市場分析を変える機械学習アルゴリズムの理論と実践
という書籍を読み始めました

せっかくなので内容を忘れないようにメモしていこうと思います
超ざっくり要約と一言感想的な感じで

買うか悩んでる人向けのレビュも全部読んでから書こうかなと思います

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

【Ionic】net::ERR_CONNECTION_REFUSED (http://localhost:8080/)

はじめに

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

【CSS】特定の要素だけをスクロール禁止にする方法

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以外は問題なく使えるので導入しても大丈夫ですね!()

【cordova】deviceready has not fired after 5 seconds.

はじめに

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

Your browser is out-of-date!

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

×