vue-awesome-swiper で swiper を二つ使用し、かつ swiper-container を入れ子にした場合の swiper 同士の干渉エラー

updated: 2018.11.14

サイドメニュー　－　メインページ　---- swiper 1

[メインページ内]  コンテンツ１　－　コンテンツ２　－　コンテンツ３　---- swiper 2

swiper 2 が swiper 1 の中に入れ子になっている場合、swiper2 の swiper-slide-prev が swiper 1 に干渉して表示される。

solution:

.swiper-slide-prev {

　　display: none

}

これだと vue-awesome-swiper が正常に動作しなくなる。

.swiper-slide-prev {

　　margin-right: foo px;

}

これでもうまくいかない。

.swiper-slide-prev {

　　visibility: hidden;

}

解決

display: none ボックス自体を無くす

visibility: hidden ボックスは無くさないが非表示にする。レイアウトが崩れない。 

参考：

www.htmq.com

related:

monteecristoo.hatenablog.com

swiper-container がスワイプ可能域

swiper1 > swiper-container と swiper2 > swiper-container の画面配置でスワイプのコントロールが可能になる。

problem:

swiper2 (メインページ) の上に swiper1 (サイドメニュー) がレイヤーしてほしいが swiper1 と swiper2 が入れ子なので z-index が使えず、clip で .swiper2 .swiper-container の表示を削って swiper-container のレイヤー構造はできたが .swiper2 > .swiper-container > swiper-slide を swiper-container の上に表示させる方法が見つからなかった。(swiper-slide ごと clip で表示が削られる)

またCSS3 では clip は非推奨。

サイドメニュースワイプ可能域を左側に20px取り、メインページにpadding-left: 20px を設定することで妥協

update：

上記妥協案を取らずに根元から変更

side-nav(スワイプ対応 left to right)は vuetify の navigation-drawer

メインページのスワイプ(right to left) は vue-hammer を使ってイベント発火でcomponent の切り替え

を使ったほうがスムーズに実装できた。　

vue-loader を v13.0.0 以降にアップデートしたら "Failed to mount component: template or render function not defined"

vue-loader を v13.0.0 以降にアップデートしたら

"Failed to mount component: template or render function not defined"

vue-loader@13.0.0 以降 ES module が default で true になっているため、古い CommonJS でエラーが発生

solution: 

// before
const Foo = require('./Foo.vue')

// after
const Foo = require('./Foo.vue').default

Vue.component('example', require('./components/Example.vue').default);

 参考：

github.com

github.com

mozjpeg コンパイリングエラー cloud9

cloud9 で Laravel mix 使用時、下記のエラーが発生

cjpeg: error while loading shared libraries: libpng16.so.16

error write epipe

エラーがどのタイミングで発生したか把握していない

ubuntu 特有のエラーかも

環境:

Ubuntu 14.04.5 LTS (cloud9)

laravel-mix@2.0.0

vue@2.5.7

vue-loader@14.1.1

vue-template-compiler@2.5.13

solution: 

sudo apt-get update

sudo apt-get install nasm

参考：

github.com

github.com

github.com

Atom Editor npm install --save-dev error

windows10

nvm 使用

node@9.4.0

npm@5.6.0

npm 使用時、npm install は出来るが npm install --save-dev で install されないエラー

** windows の問題かも

powershell 、コマンドプロンプトで npm install --save-dev ->>> error 表示無く、package.json も更新されるが実際にインストールされない

Git Bash で npm install --save-dev ->>> OK

** 但し、terminal package のデフォルト起動を　Git Bash に変更しても Atom 経由でコマンドを実行するとエラーが発生する。

Error: In Database.php line 198: No suitable servers found ('serverSelectionTryOnce' set) : [connection refused calling ismaster on '127.0.0.1:27017']

updated: 2018 9/26

Error: In Database.php line 198: No suitable servers found ('serverSelectionTryOnce' set) : [connection refused calling ismaster on '127.0.0.1:27017']

mongoDB と mysql を使った multiple Database 環境で php artisan migrate をした際発生。

solution: mongoDB を起動していなかった ->>> ./mongod 

また cloud9 上でMYSQLが起動していなく

tinker 上で以下のコマンドでエラーが出た場合

factory(App\User::class)->create()

>>> .... SQLSTATE[HY000] [2002] Connection refused ....

 apache が寝てるかも・・・

apache を起動させるか

solution: cloud9 terminal で phpmyadmin-ctl install

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7② migration file による validation

updated: 2018/1/17

public function up()
{
　　Schema::connection('mongodb')->create('group_messages', function (Blueprint $collection) {
　　　　$collection->increments('id');
　　　　$collection->timestamps();
　　　　$collection->string('body');〇
　　　　$collection->unsignedInteger('sender_id'); ✖
　　　　$collection->integer('message_group_id')->unsigned();✖
　　});
}

mongoDB では Laravel Doc にある Available Column types、Column Modifiers で使用できないものがあるため要確認

laravel.com

migration file 上で column type を指定するとPHP側で validation されるが、mongo shell 上で getCollectionInfos() で collection 情報を確認するとmongoDB上では schema validation 機能はない。

jenssegers/laravel-mongodb でサポートされている Laravel Available Column types、Column Modifiers を確認するのは手間なので validation は下記の方がよい？？

github.com

mongoDB basic usage

updated: 2018/10/2

以下 mongo shell 上で

> db

// show databases

> use DB_NAME

// change current database

> db.testMongo.insertOne(

　　{

　　　　body: "test mongo operation",

　　　　id: 1

　　}

)

// create testMongo collection and insert a document

> show collections

// testMongo

データの削除

$d = db.COLLECTION_NAME.findOne()

db.COLLECTION_NAME.deleteOne($d)

document model structure

References Data Models (normalized data models)

→　RDBMS風にcollectionを分割してrelated_id でrelational に管理する場合

複雑な many to many relationships に対応できる

多階層のrelationships に対応できる

可読性が下がる

処理を実現するための query が長くなる

Embedded Data Models (denormalized data models)

→　embed related data in a single structure or document.

RDBMS では複数にまたがっていたデータが単一の record で管理できるため、query が単純になる

可読性が高い

normalized data models よりデータの duplication が多いのでデータが大きくなる

参考：

Data Modeling Introduction — MongoDB Manual 3.6

Data Model Design — MongoDB Manual 3.6

 lecture 55

Schema Validation

事前に collection に挿入する data に制限をかける

db.createCollection("students", {
   validator: {
      $jsonSchema: {
         bsonType: "object",
         required: [ "name", "year", "major", "gpa" ],
         properties: {
            name: {
               bsonType: "string",
               description: "must be a string and is required"
            },
            gender: {
               bsonType: "string",
               description: "must be a string and is not required"
            },
            year: {
               bsonType: "int",
               minimum: 2017,
               maximum: 3017,
               exclusiveMaximum: false,
               description: "must be an integer in [ 2017, 3017 ] and is required"
            },
            major: {
               enum: [ "Math", "English", "Computer Science", "History", null ],
               description: "can only be one of the enum values and is required"
            },
            gpa: {
               bsonType: [ "double" ],
               minimum: 0,
               description: "must be a double and is required"
            }
         }
      }
   }
})

参考：

Schema Validation — MongoDB Manual 3.6

collection 作成後、設定した validation を確認する方法は…

> db.getCollectionInfos()

Data Type

BSON Types — MongoDB Manual 3.6