かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Node.js nvmからnodebrewに乗り換えるぞい!

Node.jsのバージョンをv6.9.2に上げるにあたって、npmでグローバルにインストールしたパッケージを移行できるコマンドがあるということだったので、Node.jsのバージョン管理をnvmからnodebrewに乗り換えるました。npmのパッケージ結構容量を取るので...

nvmをアンイントールする

$ npm cache clean
$ rm -rf $NVM_DIR ~/.npm ~/.bower

~/.bashrc~/.bash_profileに書かれているnvm関連のパスを削除

# 下記の記述を削除
source ~/.nvm/nvm.sh
npm_dir=${NVM_PATH}_modules
export NODE_PATH=$npm_dir

homebrewでインストールしたnodeを削除

かなり昔にhomebrewでインストールしたnodeが残っていたので、これもアンインストールしてしまいます。

npmを削除

$ npm cache clean
$ cd /usr/local/lib
$ sudo npm uninstall npm
$ rm -rf /usr/local/bin/npm

homebrewでインストールされているnode.jsを削除

$ sudo brew uninstall node

~/.bashrc~/.bash_profileに書かれているhomebrewのnpmのパスを削除

# 下記の記述を削除
export PATH="/usr/local/share/npm/bin:$PATH"

nodebrewをインストール

1. インストール

$ curl -L git.io/nodebrew | perl - setup

2. nodebrewのパスを追加
~/.bashrc~/.zshrcに下記を記述して保存する

export PATH=$HOME/.nodebrew/current/bin:$PATH

3. 追加したパスを反映

$ source ~/.bashrc

nodebrewでNode.jsをインストール

nodebrewの0.6.0をリリースしました。install-binaryというコマンドを追加しまして、コンパイル済みのバイナリからインストールできるようにしました。
nodebrewでバイナリからインストールできるようにした

install-binaryコマンドでコンパイル済みのnodeをダウンロードします。

$ nodebrew install-binary v6.9.2

※ 通常のinstallコマンドでインストールすると、ダウンロードしてからコンパイルするので少し時間がかかってしまいます。

$ nodebrew install v6.9.2

使用するNode.jsのバージョンとデフォルトのバージョンを指定

# 使用するバージョン
$ nodebrew use v6.9.2
# デフォルトで使用するバージョン
$ nodebrew alias default v6.9.2

インストールの確認

別途ターミナルを起動して、nodeのバージョンを確認

$ node -v
v6.9.2

指定したバージョンが表示されていればOK。
別のバージョンが表示される場合は、nodebrewのパスが通ってなかったり、他のnodeのパスなどが残っている可能性が高いので$ which nodeでnodeのパスを調べたり、~/.bashrc~/.bash_profileの記述を再チェックしてみると良いと思います。

globalにインストールしたnpmのパッケージの移行

nodebrewではmigrate-package <version>コマンドで<version>のglobalにインストールされたパッケージの移行ができる。

# Install global NPM packages contained in <version> to current version
$ nodebrew migrate-package <version>

<version>は移行元を指定する。

ex: v5.9.0 にインストールしたパッケージを現在のバージョンに移行する場合

$ nodebrew migrate-package v5.9.0

[参考]

WordPress ContactForm7 フォーム送信時に送信確認のチェックをリセットしたい

ContactForm7は送信前の確認したかのチェックボックスを設置することができます。
ただ、フォームを送信した後、エラーの有無にかかわらず送信確認がチェックされたままで、送信ボタンを押すことができる状態になったままになっています。
そこで、ContactForm7で用意されているtriggerのイベントを利用して、フォーム送信後に送信確認のチェックを外して送信ボタンをdisabledに戻すようにしてみました。

triggerを利用するので、サイトで使ってあるテーマのjsファイルなどに記述すればOKです。
利用するイベントについては、WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。 - かもメモ を参照ください。

$(function() {
  var $form = $('.wpcf7-form');

  var onRresetAcceptance = function(evt) {
    var $form = evt.data.form,
        $submit = $form.find('input:submit');

    if( !$submit.length ) {
      return;
    }

    $form.find('input:checkbox.wpcf7-acceptance').each(function(i, elm) {
      var $acceptance = $(elm),
          is_invert = $acceptance.hasClass('wpcf7-invert'),
          is_checked = $acceptance.prop('checked');
      if( (is_invert && !is_checked)
       || (!is_invert && is_checked) ) {
          $acceptance.prop('checked', !is_checked).trigger('change');
          $submit.prop('disabled', true);
       }
    });
  };

  if( $form.length ) {
    $(document).on('wpcf7:submit', {form: $form}, onRresetAcceptance);
  }
});

フォーム送信時になぜか、submit.wpcf7が二回呼ばれてしまっているのですが、この様な感じでフォーム送信時に送信確認をリセットして送信ボタンをdisabledにする事ができました。


[参考]

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_okon_submit はそれぞれ mailsent.wpcf7submit.wpcf7 でイベントの発火を受け取ることができそうです。
それ以外にもエラーになった時やメール送信失敗時のevent dispacherも用意されています。

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

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

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


[参考]

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

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