monteecristoo’s blog

https://twitter.com/irakaarozo

toto random generator

resultタブを開くと0~2の数字がランダムに13個出力されます。 もう一度出力したい場合は他のタブを開いた後、resultタブを開いてください。 楽天toto //

VueJS 子コンポーネントに値をパスするときの謎の挙動

responseは[{prop1: {}, prop2: {}}, {prop1: {}, prop2: {}}] とする messages ではこのresponse をすべて格納して modifiedMessages ではprop2を削除して格納したい。 @messages.vue 親コンポーネント <app-messages v-for="message in messages" m=message key=message.id > mounted() { axios.get('getMessages').then(respons</app-messages>…

VueJs: method 内で setTimeout を使い setTimeout 内で他に定義した method を呼び出す方法

methods: { testFunc() { console.log('OK'); } }, mounted() { setTimeout(function(){ this.testFunc(); // エラー }, 1000); } this.testFunc() だとエラー。以下に訂正 mounted() { var self = this; setTimeout(function(){ self.testFunc(); // OK },…

Vuejs: $ref で得たデータを孫以降のcomponentと共有する方法

computed: { swiper() { return this.$refs.swiper.swiper },} この swiper を孫以降の component で共有したい場合 provide - inject >>> provide は data, method しか共有できない mixin >>> this.$refs が使えない Vuex の state で共有 >>> 〇 親 compo…

Vuex の actions の名前の付け方

大規模開発のため vuex の store.js をモジュール化すると各 component から vuex の action をインポートした際、action がどこのモジュールに含まれているかわからなくなってくる。 @store.js import Vue from 'vue'; import Vuex from 'vuex'; import act…

VueJs データの共有 between parent and child components

親子ならprops で可能だが、孫などには provide, injection を使う vuejs.org ただし共有できるのは data, method で computed はできない。 The provide options allows us to specify the data/methods we want to provide to descendent components. では…

linux で alias を設定してコマンドのショートカットを作る

sdparm を使用して HDD のスピンを制御するときのコマンド sudo sdparm --command=stop /dev/sda1 のショートカットを作る >>>> 今あるショートカットの確認 >>> alias 新規にショートカットの登録 sudo nano /.bashrc --------------------------------…

Laravel + VueJS : VueJS component 内のどこからでも jquery を使用できるようにする Laravel Mix

updated: 2018/5/2 この記事は検証途中で内容が不正確 方法1 Laravel Mix から @webpack.mix.js let webpack = require('webpack'); mix.webpackConfig({ plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', window.jquery: 'jquery' …

vueJs responsive screen switcher

// updated: 2018/4/27 vueJS でスクリーンサイズに応じて処理を切り替えたい場合に関して過去に書いた記事のフォローアップ monteecristoo.hatenablog.com 上記方法だとリロードごとには適用されるが例えばタブレットの縦横を回転させたときなどには適用さ…

raspberry pi 外付けHDD 復旧 can't read superblock ext4 file system

// ext4 でパーティションを作った外付けHDD がfilezilla で転送中にフリーズ 再起動したら HDD が認識されなくなった raspberry pi も起動画面で cannot open access to console the root account is locked と表示されコンソールも開けなくなったので OS …

Laravel-Mix issue sass scss .sourceMaps() を使っても chrome debugger で表示されないとき

// mix.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js2/app2.js', 'public/js/app2.js') .sass('resources/assets/scss/app.scss', 'public/css') .sass('resources/assets/scss/style.scss', 'public/css') .sass('resources/as…

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7⑧ sample case

// App\User ===> App\MongoMessage Mysql Relationships App\MessageGroup ===> App\MongoMessage hasMany Relationships App\User public function mongoMessages() { return $this->hasMany(MongoMessage::class); } App\MessageGroup public function mo…

Laravel 5.x よく使う query builder

// updated: 2018/4/14 first() get() >>> get() で複数の collection が返ってくるのでさらに処理したい場合は foreach で処理 e.g.) $messages = App\Message::whereNull("body")->get(); foreach($messages as $message) { $mssage->delete(); } whereIn(…

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7⑦ convert mongoDB to Mysql

// setting up Mysql Relationships create the route and controller fetch the data from mongoDB extract the value from the response(3) fetch the data from Mysql using the value(4) return the response 1. @app\user use Jenssegers\Mongodb\Eloqu…

Git 色々

git

// updated: 2018/6/2 yarn run watch (npm run watch) などを使用中にbranchの切り替えを行うと予期しないファイルが更新されてうまくmerge出来ないことがあるので出来れば一度watchを解除してからbranchを切り替える。 例)masterはsourcemapを表示させて…

PHP 倉庫

// updated: 2018/4/6 複数の値を返す >>> 配列を使う return array($a, $b); 参考: 関数/メソッドから複数の値を返すには(多値返却) | hydroculのメモ 配列に連想配列を追加 $hoge = array('key1'=>'value1'); $hoge += array('key2'=>'value2'); var_dump…

Laravel + VueJS multi vue files loading

// @webpack.mix.js mix.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js2/app2.js', 'public/js'); @resources/assets/js/app.js app.js に実装したい routing, components を読み込むconst routes = [ { path: '/user/:id', comp…

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7⑥ Mysql relationships test

// App\User >>>> Mysql based Database use Jenssegers\Mongodb\Eloquent\HybridRelations; use App\MongoMessage; class User extends Authenticatable { use HybridRelations; use MongoMessage; public function mongoMessages() { return $this->hasMan…

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7⑤ EmbedsMany relationships test

// tinker $mongoUser = new MongoUser(['id' => 1, 'name' => 'Max']); $mongoMessage = new MongoMessage(['id' => 1, 'group' => '1', 'body' => 'Something', 'sender' => 'max', 'receiver' => 'Monica']); $mongoMessage = $mongoUser->mongoMessages(…

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7④

// App/MongoUser namespace App; use Moloquent; use MongoMessage; class MongoUser extends Moloquent{ protected $connection = 'mongodb'; protected $collection = 'mongoUsers'; public function mongoMessages() { return $this->embedsMany('MongoM…

error: SQLSTATE[HY000] [2002] Connection refused (SQL: select * from information_schema.tables where table_schema = c9 and table_name = migrations)

// cloud9 上で php artisan migrate:reset 時に下記のエラー SQLSTATE[HY000] [2002] Connection refused (SQL: select * from information_schema.tables where table_schema = c9 and table_name = migrations) composer dump-autoload してもダメな時 な…

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7③ 導入するメリット

// updated: 2018/3/6 jenssegers/laravel-mongodb を導入するメリット MySQL Relations If you're using a hybrid MongoDB and SQL setup, you're in luck! The model will automatically return a MongoDB- or SQL-relation based on the type of the rela…

Angular builtin validator for email

// import { Component, OnInit } from "@angular/core"; import { FormGroup, FormControl, Validators } from "@angular/forms"; @Component({ selector: 'app-signup', templateUrl: './signup.component.html'}) export class SignupComponent implement…

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 に干…

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 c…

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

// cloud9 で Laravel mix 使用時、下記のエラーが発生 cjpeg: error while loading shared libraries: libpng16.so.16 error write epipe エラーがどのタイミングで発生したか把握していない ubuntu 特有のエラーかも 環境: Ubuntu 14.04.5 LTS (cloud9) la…

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…

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 をした際発生。…

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->u…

mongoDB basic usage

// updated: 2018/2/24 以下 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 col…