2019-01-01から1年間の記事一覧

PHP: 二つの配列を積算して全ペアーを作る How to generate matrix from two arrays.

PHP

Updated: 2019/12/31 Goal ref: https://stackoverflow.com/questions/27902955/javascript-generate-matrix-from-two-object-arrays https://stackoverflow.com/questions/36008226/how-to-generate-matrix-from-dynamic-multidimensional-array-in-php お…

Solved: Laravel で storageにファイルをアップロードしようとしたらLaravel Impossible to Create Root Directory

Laravel@6.4.0 ubuntu@18.04.2 $request->image->store('test'); を実行したらLaravel Impossible to Create Root Directory とエラーメッセージが出た。 >>> storage_path(config/filesystem.phpで確認)の権限の設定に不備。 対象フォルダにwrite権限を…

Solved: Voyagerをインストールしたらあらかじめ設定していたUserのdefault avatarがうまく取得できなくなった。

voyager@1.3 サーバーからのレスポンスでUserのavatarがnullの場合、javascript側でdefaultのavatarを設定していたがvoyagerをインストールしてからDB上でUserのavatarがnullでもusers/default.pngという値が勝手にサーバーからのレスポンスに付与されるよう…

Solved: Laravel: Voyager をインストールしたらphp artisan migrate:refreshが出来なくなった

updated: 2019/12/23 laravel@6.4.0 voyager@1.3 すでに作成済みのLaravel Appにvoyagerをインストールしたところphp artisan migrateをすると SQLSTATE[42S02]: Base table or view not found: 1146 Table 'databasename' doesn't exist とエラーメッセージ…

VueJS: computedで得たListをlist rendering し、かつその値を変更させる必要があるとき

vue@2.6.11 Example computed: { items() { this.$store.state.items } } itemsは{name: "ITEM_NAME", quantity: 0}の複数配列とする。 <v-for item in items :key=item.key> {{ item.name }} <v-btn @click="item.quantity++"> >>>>> computedは基本的にgetterとして使用するのでボタンを押してもquantityの値を変化させられな</v-btn></v-for>…

Vuex: stateの取得

updated: 2019/12/11 vue@2.6.10 vuex@3.1.2 以下要検証 vuexのstateを取得するときdataで取得することができるが data() { return { target: this.$store.state.target } } 取得したstateのプロパティにアクセスするときに取得前の値(null?)を参照してしま…

symlink(): No such file or directory laravel ubuntu - solved AWS Cloud9

Updated: 2020/9/25 laravel@6.4.0 AWS Cloud9 Ubuntu 18.04.2 LTS projectのrootディレクトリでなく、/root/PROJECT_NAME/にLaravelをインストール AWS Cloud9 上に作成したLaravelで php artisan voyager:install >>> error: symlink(): No such file or d…

AWS composer を使ったら proc_open(): fork failed errors

updated: 2019/11/6 proc_open(): fork failed errors 原因: メモリが足りない or ディスク容量が足りない 環境: php7.2 laravel6 t2micro swap memory 1GB で足りなかった → 2GBに設定 solution: qiita.com

VueJS: データ取得のタイミングの調整

updated: 2019/10/15 Vue@2.6.10 Vuex@3.1.1 前回の http://monteecristoo.hatenablog.com/entry/2019/09/16/074708 と同様にデータ取得のタイミングに関するエラー対応について syntaxでデフォルトで定義されていないディープにネストされたプロパティを含…

Vue の data の初期値について

updated: 2019/12/11 Vue@2.6.10 Vuex@3.1.1 あるdata, vuex stateプロパティ等の初期値をnullにしておくと 参照したvue syntaxで値は正しく取得されるがコンソールにnullを参照したことによるエラーが表示される。 ""や{}等適当な値を初期値にセットしてお…

Laravel Database 操作 PHP Notice: Indirect modification of overloaed property ...

Laravel@5.8.33 mongoDB@4.0.10 あるEloquent ORMのネストされたデータdetails['description']をアップデートしたい。 $target = App\ModelName::first() $target->details['description'] >>> "test" と返るので直接 $target->details['description'] = "up…

VueJS: 兄弟component間で同一メソッドを伝播させたい

updated: 2020/2/5 vue@2.5.7 vuex@3.0.1 ParentComponent.vue <app-child-component v-for="1 in n" > 親componentからv-forを使って複数の子componentが存在 子componentAで発生させたdoSomething()を兄弟componentB、C、D、、、でも同様に発生させたい。この方法について。 i) Vuexを使ってstat</app-child-component>…

画像やフォントサイズをresponsiveに調整する方法 Vuetify使用時

v-layout と v-flex を使用する(full fluid + conditional) <v-layout wrap> <v-flex lg3>1/4画像</v-flex> <v-flex lg6>1/2画像<v-flex> <v-flex lg3>1/4画像<v-flex> <v-layout> css img { width: 100%; height: auto; } ** layout にwrap を忘れないように。子コンポーネントがlayoutに収まるようになる。 ref: https://vuetifyjs.com/en/componen</v-layout></v-flex></v-flex></v-flex></v-flex></v-layout>…

AWS Cloud9 (ubuntu linux) + Laravel + Mysql : php artisan migrate error

Updated: 2020/8/17 環境: AWS Cloud9 EC2 platform: ubuntu linux Laravel: 5.8 Mysql: 5.7 AWS Cloud9 上でphp artisan migrateをすると下記のエラー SQLSTATE[HY000] [1698] Access denied for user 'root'@'localhost' (SQL: select * from information…

AWS Cloud9 using Laravel initial settings

updated: 2024/4/20 Environmentの設定 sudo apt update // packageのアップデート sudo apt install -y php php-xml curl -sS https://getcomposer.org/installer | php // composer のインストール suod mv composer.phar /usr/local/bin/composer // term…

Migration from old cloud9 to AWS cloud9

2019/7/1 以降Old Cloud9上でWorkspacesにアクセス不可になったので 自分のダッシュボードにアクセス https://c9.io/YOUR_OLD_CLOUD9_ACCAOUNT_NAME AWSアカウントの作成 AWS Cloud9 https://ap-northeast-1.console.aws.amazon.com/cloud9/home/product# EC…

javescript: JSONのプロパティを変数を使って定義する

Updated: 2019/12/2 1段階のnestであれば[]を使って簡単にできる。 2段階ネストされた変数を使ったプロパティを新規に追加する場合 下記ではエラー おまけ キーの取得

javascript jsonのキーの有無を調べる

hasOwnProperty()を使う ref. https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

VueJs: v-if 注意事項 keep-aliveを使って List rendering

updated: 2019/10/15 v-ifによる条件分岐で大規模なList Renderingはやらないほうがいい。 v-if の component DOM の destroyによるコストが大きくなるから。 infinite scrollを含んだcomponentにv-ifを使った結果、致命的なパフォーマンスissueが発生した。…

vue-router In-Component Guards

vue-router@3.0.6 beforeRouterEnter(to, from, next) { next(vm => { console.log(vm) vm <<<< router-viewを使っている場合、最終的にrouter-viewで表示されるcomponentのインスタンス }) 従って、router-view と In-Component Guardsを使えば別のcomponen…

Laravel formData validation

formData に image を入れてデータを送る場合 @FrontEnd const formData = new FormData() formData.append("image", BLOB_IMAGE_DATA) axios({ method: 'post', url: 'SERVER_URL', data: formData, config: { headers: {'Content-Type': 'multipart/form-d…

Scroll の up, down を検知する

以下、vuejs syntax に従って書くと... mounted() { window.addEventListener('scroll', this.wheelDelta) }, data() { return { currentPosition: 0, previousPosition: 0, scrollDelta: 0 } }, methods: { wheelDelta() { this.currentPosition = docum…

VueJS: List rendering した item を削除

<div v-for="(item, index) in items"> <button @click="deleteItem(item, index)"> data() { return { items: ['test', 'hi', 'hey'] method: { deleteItem(item, index) { axios.post('delete', item) { // server 側にデータをpost } this.items.splice(index, 1) // client 側のlist を更新 さらに list rendering が component を利用</button></div>…

Vuetify: vue-dialog で dialog が閉じられた際、イベントを発火したい

updated: 2020/10/5 <v-dialog v-model="dialog" @close="close"> ** dialog に input を含む場合は@input="v => v || close()" ** v => v はアロー関数 methods: { close() { console.log("closed") }, ref: vuejs.org github.com developer.mozilla.orgdeveloper.mozilla.org Vue.js入門 基礎から実践</v-dialog>…

VueJS + Konva vue-konva を使わずに konva を取り入れる

vue-konva の transform がモバイルに対応していなかったので。。。 <template> <div id="some-component"> </div> </template> <script> import Konva from 'konva' export default { mounted() { let stage = new Konva.Stage() error: Konva is undefined </script> import {Konva} from 'konva' error: Stage is undefined ----…