はなゐろぐ

Advanced Custom FieldのTimepickerを5分刻みにカスタマイズする

2019.10.28 13:10

add_filter('acf/input/admin_footer', 'acf_input_timepicker');
function acf_input_timepicker(){
  ?>
  <script type="text/javascript">
  (function($){
    acf.add_filter('time_picker_args', function(args, $field){
      args['stepMinute'] = 5;

      return args;
    });
  })(jQuery);
  </script>
  <?php
}

Adding custom javascript to date and time picker fields - ACF Support
ACF | acf/input/admin_footer

リンク先ではDatepickerのカスタマイズも書かれていて、例えば選択可能な範囲を指定するにはこんな感じ。

add_filter('acf/input/admin_footer', 'acf_input_datepicker');
function acf_input_datepicker(){
  ?>
  <script type="text/javascript">
  (function($){
    acf.add_filter('date_picker_args', function( args, $field ){
      args['minDate'] = 0; // 今日以降
      args['maxDate'] = '+1m'; // 1ヶ月以内

      return args;
    });
  })(jQuery);
  </script>
  <?php
}

他にもいろいろできそう。

parsley.jsでバリデーションしつつaxiosで郵便番号から住所を自動入力

2019.09.10 15:09

入力された郵便番号をバリデーションにかけ、問題なければ郵便番号-住所検索APIにリクエストを投げ、返ってきた値をセットします。

import $ from 'jquery';
import axios from 'axios';
import 'parsleyjs';
import 'parsleyjs/dist/i18n/ja.js';

$(document).ready(function() {
  const form = $('#form')
    .parsley()
    // バリデーションを通ったら
    .on('field:success', function(){
      // 郵便番号から住所を取得
      if(this.$element[0].name === 'zipcode'){
        const zipcode = this.value;
        // 番号をAPIに投げる
        axios.get(`https://api.zipaddress.net/?zipcode=${zipcode}`)
          .then(function(res){
            // レスポンスが返ってきたら値をセット
            if(res.data.code === 200){
              $('[name="address"]').val(res.data.data.fullAddress);
            }
          })
          .catch(function(){
          });
      }
    });
});

Sassのmapを使って同じようなCSSを一括作成

2019.06.24 22:06

mapとは、Javascriptでいう連想配列のようなもので、キーと値をセットで定義することができる変数です。普通の変数と違って何がよいかというと、ループして同じような処理を自動でできるようになります。

たとえば色違いの項目をたくさん作る必要がある場合、Sassに書くルールは1つでよく、パターンを増やすにも変数を1行増やすだけでいいので管理しやすくとても楽。

$map: (
  1: #ce5a24,
  2: #2f99ac,
  3: #9e272d
);

.hoge{
  &__item{
    @each $n, $color in $map{
      @at-root #{&}:nth-child(#{$n}){
        background-color: $color;
      }
    }
    }
}

この例でいうと、$nにキー(変数の左側)、$colorに値(変数の右側)が代入されます。この2つはわかりやすい任意の文字列で大丈夫。

$map: (
  hokkaido: #6cb041,
  tohoku: #d98d66,
  kanto: #6537a8,
  kansai: #e43474,
  chushikoku: #5d94a4,
  kyushu: #a63914
);

.section{
  @each $key, $color in $map{
    @at-root #{&}-#{$key}{
      color: $color;
      background-image: url(/path/to/bg_#{$key}.jpg);
    }
  }
}

mapに限った話ではないですが、Sassでは変数を#{$key}と囲うことで、ファイルパスやセレクタに使うこともできます。

簡単なカラムmixin

2018.10.11 21:10

サムネイルやカードを並べるのによく使うやつです。

@mixin col(
  $column-count, // カラム数
  $gutter: 10px, // 間の余白
  $inverse: false, // true->右から左へ、false->左から右へ
  $selector: '> *' // 子要素のセレクタ
){
  @include clearfix;
  $direction: if($inverse, right, left);

  #{$selector}{
    // 余白を一旦リセット
    margin-left: 0;
    margin-top: 0;
    float: $direction;
    @if $gutter != 0{
      $margins: $gutter * ($column-count - 1);

      width: calc((100% - #{$margins}) / #{$column-count});
      // 左右の余白
      + *:not(:nth-child(#{$column-count}n+1)){
        margin-#{$direction}: #{$gutter};
      }
      // 上下の余白
      &:not(:nth-child(-n+#{$column-count})){
        margin-top: #{$gutter};
      }
    }
    @else{
      width: calc(100% / #{$column-count});
    }
  }
}

gulp-pleeeaseで依存パッケージのCSSをimportする

2018.04.23 20:04

Normalize.cssをnpmでインストールして、それをsassでimportしようとしたけど、探してもそのものズバリな記事が出てこなかったのでメモ。

パッケージをインストールして、

$ npm install --save-dev normalize.css

gulp-pleeeaseのオプションにimport: 'node_modules/'を追加する。

var pleeease = require('gulp-pleeease');
// 中略
.pipe(pleeease({
  import: 'node_modules/'
}))

あとは、node_modules/からの相対パスで読み込みたいCSSファイルをimportするだけ。

@import "normalize.css/normalize.css";

追記(2018.5.3)

gulp-sassでも問題なかった…。一応メモ。

.pipe(sass({
  outputStyle:'compressed',
  includePaths: [
    'node_modules'
  ]
}))
123