Cakephp3で、入力する日付フォーマットを日本語にする方法

src/View/AppView.phpで定義すると楽に実装できました。
– 基本形成はdateWidgetで
– 細かいオプション変数としてテンプレートに渡して +=で必要分はテンプレートで追加

//src/View/AppView.php
class AppView extends View
{
     *
     *
     *
     
    public function initialize()
    {
        $this->Form->templates([
            'dateWidget' => '{{year}}年{{month}}月{{day}}日{{hour}}:{{minute}}',
        ]);
        $this->set('dateFormat',[
            'monthNames' => false,
            'minYear' => date('Y')-10,
            'maxYear' => date('Y')+10,
            'default' => date('Y-m-d H:i:s')
        ]);
    }
}

//your template 
echo $this->Form->control('due',$dateFormat+['label'=>'期限']);

PHPで連想配列をマージ(extend)するのは簡単だった。

今頃感ですが意外と使ったことがなかった。。orz..

$data = ['name'=>'yamaaaaa','job'=>'engineer'];
$data+= ['age'=>40];
print_r($data);//Array ( [name] => yamaaaaa [job] => engineer [age] => 40 )

php7にて確認。

Materialize.cssフレームワークでのメインのカラーの変更

流れは、ソースを持ってきて、変数の _variables.scssのカラー名を一箇所変更して再度コンパイルするだけ。

ソースは、materialize-css/sass以下を全部持ってくる。

/components/_variables.scssを開いて編集する、
38行目辺りの、$primary-colorを設定している箇所を ‘materialize-red’ から任意の色に変更。
以下は ’light-blue’の例。（色の種類は http://materializecss.com/color.html のColorPalette参照)

$primary-color: color("light-blue", "lighten-2") !default;

であとは、materiarize.scss をコンパイルする(components以下は@importしている)

参考ページ
http://materializecss.com/sass.html

MacでターミナルからSublimeTextを素早く開く方法。

openコマンドを使うと楽、-aでアプリを指定して、‘.(ドット)’ カレントディレクトリを指定してあげると、プロジェクトバー(サイドバー)に開いてくれる。

$ open -a /Applications/Sublime Text.app .

これをDashなどのスニペットアプリにトリガーを登録しておけば。‘open;’ とタイプするだけで一瞬で開けて便利。

WordPressの更新の場合のメンテナンス表示の時間について調べてみた。

WordPressの更新のときに基本自動アップデートにしたいんだけど、いろんな事情で手動で更新してて、それってサイト止まるの？って場合に出くわしまして。

掘り下げていくと、includes/update-core.phpのコメントにかかれていた。

1. Test unzipped location for select files to ensure that unzipped worked.
2. Create the .maintenance file in current WordPress base.
3. Copy new WordPress directory over old WordPress files.
4. Upgrade WordPress to new version.
   4.1. Copy all files/folders other than wp-content
   4.2. Copy any language files to WP_LANG_DIR (which may differ from WP_CONTENT_DIR
   4.3. Copy any new bundled themes/plugins to their respective locations
5. Delete new WordPress directory path.
6. Delete .maintenance file.

上記手順は、基本的には、Downloadされてものを準備された後の話。
2の手順でメンテ開始(.mainteannceファイルがあるとメンテになります。)
3,4でコピーなどが行われて5–6で更新ファイルを削除して完了。

気になるのは、4.3あたりで新しいテーマなどが入ってきたときは一瞬では終わらない可能性とかありそうです。

一瞬で切り替えたい場合は、並行してどこかで更新後の状態のファイル郡をつくって、どうさ確認などしてDodumentrootのリネームなどなのかなとか考え

めも。Macです。

brewでffmpegをインストール

依存パッケージエンコーダーいろいろと入ります。

$ brew install ffmpeg

できたらffmpegコマンドで抜く(正確には映像コーデックのみをコピー)

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

いろいろmp4コンテナいじれて面白そう。

Youtube 埋め込み iFrame APIでスマホで動画を自動再生する方法。(一部はできない

基本音声が入っているとできない、古い機種はできない、最近はわりとできるようになってきている。
微妙に悩ましい状況、動画GIFや独自mp4やボタンを置いて再生とかいろいろ検討する。
（本質的なところを掘り下げたい、、昔のIE5とか6とかwindows2000とか思い出す不毛)

ES6の抜粋
ポイントは、onReady で再生準備できたところで、いったん、
this.player.mute();
とミュートしてから再生しているとこ。(音声はYoutubeにかかわらずスマホは全般自動はだめ)

class Hoge { 
    player;
    isPlay=false;
    
    constructor() {
        window.onYouTubeIframeAPIReady = $.proxy(this.loadYoutubeApi,this);
        let scriptEl = document.createElement('script');
        let headEl = document.querySelector('head');
        scriptEl.src = "https://www.youtube.com/iframe_api";
        headEl.appendChild(scriptEl);
    }
        
    loadYoutubeApi(){
        this.player = new YT.Player('bgndVideo', {
            videoId: 'YOUR_LIKE_VIDEO_ID',
            width: '1920',
            height: '1024',
            playerVars: {
                playsinline: 1,
                showControls: 1,
                modestbranding:1,
                showinfo:0,
                controls:0,
                rel:0
            },
            events: {
                'onReady': $.proxy(this.onReadyYoutube,this)
            }
        });
    }

    onReadyYoutube(e){
        this.player = e.target;
        this.player.mute();
        this.playVideo();
        $('#bgndVideo').addClass('ready');
    }

    playVideo(){
        this.player.seekTo(1);
        this.player.playVideo();
        this.isPlay = true;
        setTimeout($.proxy(this.playVideo),19*1000);
    }

全体はこんな感じ、これは実は短い動画をループ再生していて、
最後まで再生するとチラッっと黒くなってピカピカちらつくので、最後に到達する前にループしています。(背景のまぁいめーじなので、大丈夫)

css3,transform: translate3dでのちらつきと、重なり順のバグ表示

アニメーションをつくっていたら、最後の方でちょこっとチラついたり、zIndexがおかしくなってみえなくなったりすることが有りました。

結果からいうと、以下で解決。

@keyframes animename
from
transform: translate3d(0,20%,0)
to
transform : none;　× これを、→ translate3d(0,0,0) に修正


具体的ところでは、要素の書く順番で、普通はBが上に来る。

animeA,animeB{
    position: absolute;
}
~~
<div id="animeA"></div>
<div id="animeB"></div>

けどアニメーションの途中などで以下のスタイルの状態になると、瞬間的にAが上に重なる。

animeA{
    transform: translate3d(0, 0,0);
}
animeB{
    transform: none;
}
~~

これは、translate3dを使った場合に CPUでなくGPUレンダリングが利用され、その描画レイヤーが通常のCPUレンダリングの上に来てしまうらしい。

高速化と確実性の両立がベストだけど高パフォーマンスをだすためにいろいろ頑張っているそのすきまなのかもしれなない。

gulpタスクランナー、babel(ES6)で、クラスプロパティーを使う。

ES6の私用でクラスプロパティーがつかえない、TyepScript,Coffeとかは使える。
Class properties transformプラグインをインストールする。

$ npm install --save-dev babel-plugin-transform-class-properties

Class properties transform
https://babeljs.io/docs/plugins/transform-class-properties/

gulpfile.jsでbabelするときにオプションで渡す。

gulp.task('babel', function() {
  browserify({
    entries: ['src/js/app.js']
  })
    .transform(babelify, {
      presets: ["es2015"],
      plugins: ["transform-class-properties"] // ★ココ , presetsとおなじく渡せばいいだけ
    })
    .bundle()
    .on("error", function (err) {
      console.log("Error : " + err.message);
      this.emit("end");
    })
    .pipe(source('app.js'))
    .pipe(gulp.dest('app/js/'));
});

フルスクリーンで縦にコンテンツごとスライドするJavaScriptを比較しようと思ったけど、fullPage.jsで良さそうなので比較しなかった。

タイトルの通り比較しようとしてfullPage.jsからみた。

fullPage.js

https://alvarotrigo.com/fullPage/

DocumentやDemoや有料のExtensionを見ていくと。

• タブレット可能
• 横も有り。
• 縦のドットあり
• スクロールバー付可能

• なし

• 横スクロールのドットあり
• セクション内でスクロール可能(これ良いかも
• faceエフェクトもある。

ほとんどなんでもできそうで比較せずにこちら採用で.orz.