2016-12-06

WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。

管理画面から

WordPressの管理画面 > コンタクトフォームの編集画面 > その他の設定
を選択して、記入エリアにon_sent_ok:(送信完了時)、on_submit:(送信された時常に) のキーワードに続けて実行したいjavascriptのコードをテキスト形式で記述する。

on_sent_ok: "alert('sent ok');"
on_submit: "alert('submit');"

恐らく最も簡単な方法です。google Analyticsのコードを追加したりはこれで十分だと思います。
しかし、複雑なコードを書いたり、自前のスクリプトで即時関数の中にあるオブジェクトなどを触ろうとすると少し大変です。

設定されているdispatcherを利用する

ContactForm7がサイト上で実行しているjsファイルを見ていると次のようなdispatcherが設定されていました。

// contact-form-7/includes/js/scripts.js
//   wpcf7.triggerEvent
$(data.into).trigger('wpcf7:invalid');
$(data.into).trigger('wpcf7:spam');
$(data.into).trigger('wpcf7:mailsent');
$(data.into).trigger('wpcf7:mailfailed');
$(data.into).trigger('wpcf7:submit');

管理画面から設定できる on_sent_ok、on_submit はそれぞれ mailsent.wpcf7、submit.wpcf7 でイベントの発火を受け取ることができそうです。
それ以外にもエラーになった時やメール送信失敗時のevent dispacherも用意されています。

on_submit (送信された時常に) 実行したい場合は次のようにdocumentにイベントを付けておけばOKです。

$(document).on('wpcf7:submit', function(evt) {
  alert('submit');
});

このdeprecatedさえれるイベントを利用すれば、独自に書いているjsの中でも比較的自由にContactForm7のイベント実行時に合わせて独自の処理を加える事ができそうです。

[参考]

小さなお店&会社の WordPress超入門 ―初めてでも安心! 思いどおりのホームページを作ろう!

作者: 星野邦敏,大胡由紀,吉田裕介,羽野めぐみ,リブロワークス
出版社/メーカー: 技術評論社
発売日: 2016/07/15
メディア: 大型本
この商品を含むブログ (1件) を見る

2016-11-30

Stylus Objectでらくちんカラー管理したい

stylus CSS

f:id:kikiki-kiki:20161130110134p:plain
StylusやSassなどでwebサイトのCSSを作成する時は、variableというようなファイルを作成して使用する色などを変数で書いておき適時使用しています。

しかし、色のバリエーションがある時に

$primary = #158cba
$primary-dark = #127ba3
$success = #28b62c
$success-dark = #28b62c

の様に全て変数で書いていくのは、なかなか面倒です。
そこで、値をオブジェクトにして簡単に色を取得できる方法を考えてみました。

stylus カラーパレットでの管理方法

// variable.styl
// カラーパレットをオブジェクトで作成
$color-palette = {
  default: {
    color:      #555,
    base:       #eee,
    border:     #e2e2e2,
    dark:       #d5d5d5,
    border_dk:  #c3c3c3,
    darker:     #C8C8C8,
    border_dkr: #c3c3c3 
  },
  primary: {
    color:      #fff,
    base:       #158cba,
    border:     #127ba3,
    dark:       #127ba3,
    border_dk:  #0c516c,
    darker:     #106a8c,
    border_dkr: #0c516c
  },
  // 略
}

使い方

ex: 色を返すだけのミックスイン

// Mixin: Return color
// @param: $type: color type
// @param: $tone: color's tone
get-color($type = "default", $tone = "base")
  return $color-palette[$type][$tone]

// How to use
.c-bg-primary
  background-color: get-color("primary")
.c-bg-primary-darker
  background-color: get-color("primary", "darker")

stylusはオブジェクトから値を取得するのに、javascriptと同じようにObject[val]の形式でも取得することが可能なので、darkやlightといったカラーバリエーションがあっても1つのミックスインに$typeと$toneを渡せば、トーンに合った色を簡単に取得することができました。

応用

ボタンなど色の出力のパターンが決まっているものは、ミックスインで出力するCSSのテンプレートを作ってしまえば簡単にバリエーションのCSSを作成することができます。

ex: ボタン

// Mixin: Button Variation
button-variant($type)
  color: $type.color
  background-color: $type.base
  border-color: $type.border
  &:hover
    color: $type.color
    background-color: $type.dark
    border-color: $type.border_dk
  &:active,
  &.is-active
    color: $type.color
    background-color: $type.darker
    border-color: $type.border_dkr
  &:disabled,
  &.is-disabled
    color: $type.color
    background-color: $type.base
    border-color: $type.border

// ボタンのカラーバリエーションのCSSを出力
for $key, $colors in $color-palette
  .c-btn-{$key}
    button-variant($colors)

ex: ラベル

// Mixin: Label Variation
label-variant($type, $tone = "base")
  color: $type.color
  background-color: $type[$tone]

// ラベルのバリエーションのCSSを出力
// Label Variation
for $key, $colors in $color-palette
  .c-label-{$key}
    label-variant($colors)

  // Darker Labels Style
  .c-label-{$key}-darker
    label-variant($colors, "darker")

Demo

See the Pen Stylus Color Manage by KIKIKI (@chaika-design) on CodePen.

[参考]

TVアニメ『アイカツスターズ!』新OP/EDテーマ「1, 2, Sing for You!/So Beautiful Story/スタージェット!」

アーティスト: AIKATSU☆STARS!,唐沢美帆,南田健吾(onetrap),せな・りえ・みき・かな from AIKATSU☆STARS!
出版社/メーカー: ランティス
発売日: 2016/11/02
メディア: CD
この商品を含むブログ (2件) を見る

2016-11-29

Gulp min化したJS・CSSに自動でコメントを入れたい

Gulp Node.js JavaScript

f:id:kikiki-kiki:20161129005159p:plain コーディングをする時、Gulpでコンパイル&min化をしています。
min化したコードにコメントでバージョン情報とか、元のライセンス情報を入れたいケースとかがあります。

javascript

ライブラリなどのライセンス情報で/*!で始まるコメントの場合はgulp-uglifyのオプションでmin化する際に残すことができるみたいです。

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    // console.logを削除するパッケージ
    stripDebug = require("gulp-strip-debug"),
    // jsをmin化するパッケージ
    uglify = require("gulp-uglify");

gulp.task('js. minify', function(cb) {
  return gulp.src( FILE_PATH )
    .pipe( stripDebug() )
    .pipe( uglify({
      // このオプションを使うと/*! */のコメントは残る
      preserveComments: 'some'
    }) )
    .pipe( rename({
      extname: '.min.js'
    }) )
    .pipe( gulp.dest( DEST_DIR ) );
});

/*! License */

↑ この/*!で始まる形式でないコメントは消えてしまうので、違う形式でライセンスが書かれているファイルはライセンスのコメントを残すことができないので注意が必要。

CSS

いつもCSSのmin化につかっているgulp-clean-cssでは特定の形式のコメントを残す方法が無さそうでした…
ライセンス情報を残すオプションのある良い感じのライブラリがあれば教えてください。

ファイルの先頭にテキストを追加できるパッケージを使う

gulp-header を利用すればJS, CSSに関わらず好きなコメントをファイルの先頭に追加できるようです。
min化したファイルに最後にバージョン情報や最終更新日時を追加するのに良さそうです。

ex: min化したCSSにpackage.jsonに書かれている情報を元にコメントを追加する

var gulp = require("gulp"),
    rename = require('gulp-rename'),
    header = require('gulp-header'),
    cssminify = require('gulp-clean-css'),
    // 日付を簡単にフォーマットできるパッケージ
    moment = require('moment');

// package.jsonを読み込む
var pkg = require('./package.json');
// CSSに追加するテキスト
var banner = ['/**',
    ' * <%= pkg.name %>',
    ' * @version <%= pkg.version %>',
    ' * @author <%= pkg.author %>',
    ' * @lastmodified <%= today %>',
    ' */',
    ''].join('\n');


gulp.task('css.minify', function(cb) {
  var versionDate = moment().format('YYYY-MM-DD');

  return gulp.src( FILE_PATH )
    .pipe( cssminify() )
    .pipe( rename({
      extname: '.min.css'
    }) )
    .pipe( header(banner, {
      pkg: pkg,
       today: versionDate
     }) )
    .pipe( gulp.dest( DEST_DIR ) );
});

gulp css.minifyでタスクを実行すると、min化されたCSSファイルの先頭に下記のようなコメントが追加されます。

/**
 * PROJECT-NAME
 * @version 1.0.0
 * @author KiKiKi_KiKi
 * @lastmodified 2016-11-29
 */

完璧にライブラリなどに書かれたライセンス情報のコメントを自動的に残す方法は達成できませんでしたが、JSではuglifyのオプションを利用すればそれなりに上手く行きそうな気がします。
また、gulp-headerを使えばプロジェクトの情報などを動的に追加することができるので、CSSでも追加するコメントのテンプレートを予め作成しておけば、ある程度カバーできそうだなぁと思いました。

[参考]