yama-log – ページ 3

カテゴリー: 未分類

Vue2のテンプレート内部で、momentが使えなかった、dataに渡してあげると解決。

import moment from 'moment';
moment.locale('ja');

new Vue({
    el: '#myApp',
    data: {
        moment: moment
    },
.
.
.

出ていたmomentが参照できないよとエラー

app.js:43920 [Vue warn]: Property or method "moment" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

参考 :
https://stackoverflow.com/questions/58342090/typeerror-vm-moment-is-not-a-function-in-vuejs

Laravel9で定期バックアップなどを取る方法

By admin

オン 2022年8月26日

カテゴリー: 未分類

旧バージョンでは’spatie/laravel-backup’を利用させてもらったんですが最新バージョンには対応されていないようなので、laravel-backupの内部でつかわれている、spatie/db-dumperのみをシンプルにCommandに組み込みました。

spatie/db-dumper

まずインストール

composer require spatie/db-dumper

で、コマンド作成 app/Console/Commands/BackupDb.php

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Carbon;
use Spatie\DbDumper\Databases\MySql;

class BackupDb extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'myapp:backup_db';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Backup Database';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
        $filename = "backup-" . Carbon::now()->format('Ymdhis') . ".sql";
        $file = storage_path() . "/app/backup/" . $filename;
        MySql::create()
            ->setDbName(env('DB_DATABASE'))
            ->setUserName($env('DB_USERNAME'))
            ->setPassword(env('DB_PASSWORD'))
            ->dumpToFile($file);        
    }
}

でcronｎ登録したり、Kernel.phpでスケジュールしたり。

$ php artisan myapp:backup_db

DeskTopのSafariやiPadのSafariでmp4のvideoファイルの読込が遅い問題

By admin

オン 2022年6月15日

カテゴリー: 未分類

DeskTopのSafariやiPadのSafariでmp4のvideoファイルの読込が遅い問題

<video> タグでmp4動画を再生させる場合基本ストリーミング再生できるのですが、DeskTopのSafariやiPadのSafariでできなかったのでその解決方法は、DescTopのSafariは”HLSを使って再生対応する”

手順

事前準備:動画のメタデータを先頭にもってくる。
動画ファイルをセグメント化(細かく分割)
JSでHSL対応/非対応ごとに再生方法を記述

0.事前準備:動画のメタデータを先頭にもってくる。

ffmpegでメタデータを先頭にもってきます。
メタデータ:動画の長さetcが後方にある場合は読込が重くなるため(Safariに限らず)

$ ffmpeg -i input.mp4 -codec copy -movflags faststart output.mp4

1.動画ファイルをセグメント化(細かく分割)

ffmpegで分割します。

ffmpeg -i input.mp4 -c:v copy -c:a copy -f hls -hls_time 9 -hls_playlist_type vod -hls_segment_filename "output%3d.ts" output.m3u8

m3u8ファイル(output.m3u8)は、分割されたファイルの再生順などが記載されたテキストファイル
分割ファイル(output{xxx}.tsは分割された動画ファイル

2.JSでHSL対応/非対応ごとに再生方法を記述

2–1.HLS対応のライブラリを読込ます。

    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> </head>

2–2.videoタグにHLS対応/非対応両方のsrcをdatasetとして記述

<video 
    id="video" 
    data-src="./assets/video/output.mp4" //HLS非対応用
    data-src-hls="./assets/video/output.m3u8" //HLS用
>
</video>

2–3.JSで分岐処理

それぞれ再生方法を処理する。

if(Hls.isSupported()) { //HLS対応
    var hls = new Hls();
    hls.loadSource(video.dataset.srcHls);
    hls.attachMedia(video);
}else{                  //HLS非対応
    video.src = video.dataset.src;
}
video.play();

2–4.ソース全体像

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> </head>
<body>
<video 
    id="video" 
    data-src="./assets/video/output.mp4"
    data-src-hls="./assets/video/output.m3u8">
</video> 
<script>
var video = document.querySelector('#video'); 
if(Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(video.dataset.srcHls);
    hls.attachMedia(video);
}else{
    video.src = video.dataset.src;
}
video.play();
</script>
</body>
</html>

PHPStormでHTMLのClass属性からSASSのソースへジャンプできなくなった

By admin

オン 2022年5月25日

カテゴリー: 未分類

PHPStormでHTMLのClass属性からSASSのソースへジャンプできなくなった。

なぜかコンパイル後のCSSへしかジャンプできなくなった。
コンパイル後のCSSファイルのファイルタイプを“PlainText”にすると、SASSのソースに飛ぶようになりました。

お知らせのタイトルです。

By editor

オン 2022年3月18日

カテゴリー: 未分類

だみーてきすとです。これは仮入力のためのだみーてきすとです。全く意味はございません。だみーてきすとです。これは仮入力のためのだみーてきすとです。全く意味はございません。だみーてきすとです。

Vue3/Vue.js 親コンポネントから子コンポネントのメソッド呼び出し

By admin

オン 2021年11月8日

カテゴリー: 未分類

Vue3/Vue.js 親コンポネントから子コンポネントのメソッド呼び出し

//親コンポネント
<script>
    .
    .
    methods: {
        onPlay(){
            this.$refs.player.play();
        }
    }

    .
    .
</script>
<template>
    <Player ref="player"></Player>
    <button type="button" @click="onPlay">PLAY</button>
</template>

-------------------------------------------------------

//子コンポネント
<script>
    .
    .
    methods: {
        play(){
            document.querySelector('#video').play();
        }
    }

    .
    .
</script>
<template>
    <div>
        <video id="video" src="video.mp4" />
    </div>
</template>

Laravel8のsail SequelProでmysql8に接続する方法

By admin

オン 2021年11月4日

カテゴリー: 未分類

Laravel8のsail SequelProでmysql8に接続する方法

Laravel8のsailはmysql8で、SequelProだと、caching_sha2_passwordで接続できませんと怒られる。

SequelProが’caching_sha2_password’に対応していないので’mysql_native_password’を利用するように設定してあげる

$ ./vendor/bin/sail up //サーバーUP
$ mysql -u root -ppassword --host="127.0.0.1"   //mysqlに入る
mysql> ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'password';   //mysql_native_passwordに変更

[Chia Network]のマイニング方法ざっくり(win/macもアプリで簡単)

By admin

オン 2021年4月21日

カテゴリー: 未分類

1.Chia Network へアクセス

https://www.chia.net/

2.マイニング用アプリをダウンロード

3.アプリをインストール/起動/秘密鍵を新規作成

4.秘密鍵を控えて次へ

(ダッシュボードが表示されます。)

5.耕地を追加

6.設定:

1.耕地容量を選択

左の数字が、最終的に保存される容量(HDDなどへ)、※()内の数字がテンポラリ(一時)ファイル(高速なSSDなどがよい)なのでこの容量溢れないように注意が必要です。

2.耕地数を選択

こちらは詳細な動作/設定が難しくなりそうなので、デフォルトの[耕地をキューに追加]を選びました。

3.一時ファイルのディレクトリを選択

高速なSSDの方が処理が早く済みそうで、私は内蔵のSSDを選択しました。
適当に自分でchia_tmpのようなフォルダを作りました。

4.最終ディレクトリを選択

こちらは永続的に保存が必要になりそうなので、外付けで専用のHDDを指定しました。
フォルダ名は適当にchia_finalとしました。

5.耕地を作るボタンを押して完了

7.マイニング(耕し)開始

あとは、耕しが始まり進捗状況が表示されるのでじっとまちます。

絶賛耕し中！！

なので、実際耕してその後の取引などは随時更新していきたいと思います。

WordPressグーテンベルクエディタのタイトルをJSから設定する方法。

By admin

オン 2020年6月29日

カテゴリー: 未分類

WordPressグーテンベルクエディタのタイトルをJSから設定する方法。

のメモ。

wp.data.dispatch('core/editor').editPost({title:'hogehoge'});

AOS(Animate On

By admin

オン 2020年4月14日

カテゴリー: 未分類

AOS(Animate On Scroll Library)をLaravelMixで使う。

devにインストール

$ npm install aos --save-dev

sassでCSS組み込み(.cssを付けなければインライン展開される)

@import "~aos/dist/aos";

jsで、window.AOSにrequireする

window.AOS = require('aos');

DomLoad後にinitする。

document.addEventListener('DOMContentLoaded', function () {
    AOS.init();
});