monteecristoo’s blog

https://twitter.com/irakaarozo

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

updated: 2018.2.18

 

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

[メインページ内]  コンテンツ1 - コンテンツ2 - コンテンツ3 ---- 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 は非推奨。

入れ子構造を改めてサイドメニューとメインページを兄弟要素化した方がいいかも。

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']

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 

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

以下 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

 

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()