monteecristoo’s blog

https://twitter.com/irakaarozo

Laravel-Mix issue: vue-loader のバージョンをアップグレードしたら vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 等、大量のエラーメッセージ

laravel-mix@2.1.11 vue-loader@15.3.0 vue-loader を @14.2.2 から @15.3.0 にアップでしたらエラーが発生 solution: webpack.mix.js にプラグインを適用 let mix = require('laravel-mix'); const VueLoaderPlugin = require('vue-loader/lib/plugin') mix…

cloud9 で Nginx を使う

updated: 2018/8/4 cloud9 では初めから Nginx がインストールされている。 初期設定ではポートが 80 になっている。cloud9 で使用できるポートは 8080, 8081, 8082 なので 設定を変える。 docs.c9.io @/etc/nginx/sites-available sudo nano default >>> se…

Biglobe sim ドコモ回線 定期回線速度測定

sim

5時30分 @千葉県千葉市 エンタメフリーオプション YouTube 480p → たまに止まるけど見れる程度12時頃 エンタメフリーオプション YouTube 480p → たまに止まるけど見れる程度12時30分 YouTube 240p → 見れる程度19時 23時30分

github と cloud9 の連携 fork 編

まず github 上で fork したいレポジトリを fork 次に cloud9 で新規ワークスペースを作成。この時 git clone の clone 元はオリジナルではなく fork した自分のレポジトリにする。(そうしないと cloud9 から push 出来ない。) github 上で fork し、git clo…

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 を設定してコマンドのショートカットを作る

updated: 2018/7/8 sdparm を使用して HDD のスピンを制御するときのコマンド sudo sdparm --command=stop /dev/sda1 のショートカットを作る >>>> 今あるショートカットの確認 >>> alias 新規にショートカットの登録 cd home/pi 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…