Gulp4 destに移動し終わった後で通知する
よく忘れるので備忘録的にメモ
以下だとwebpの処理が始まったタイミングで通知されてしまう。
//Gulpfile v4 import gulp from 'gulp'; const { src, dest } = gulp; import webp from 'gulp-webp'; import notifier from 'node-notifier'; import rename from 'gulp-rename'; export function imageWebp(done) { const _src = 'assets/img/'; src(_src + '**/*.{jpg,png,jpeg}') .pipe(rename(function(path) { path.basename += path.extname; })) .pipe(webp({ quality: 70, method: 6, })) .pipe(gulp.dest(_src)); notifier.notify('webp 終わったっす。'); done(); }
destでファイルの設置がすべて終わったタイミングで通知をしたい場合、on('end',function(){ / 通知など / }) をする必要がありました。
// ~ 省略 export function imageWebp(done) { const _src = 'assets/img/'; src(_src + '**/*.{jpg,png,jpeg}') .pipe(rename(function(path) { path.basename += path.extname; })) .pipe(webp({ quality: 70, method: 6, })) .pipe(gulp.dest(_src)) .on('end',function{ notifier.notify('webp 終わったっす。'); done(); }); //ここを追記 /* 以下は削除 notifier.notify('webp 終わったっす。'); done(); */ }
てな感じで、すべての対象ファイルのwebpファイル化が終わったタイミングで通知を送ることができました。 たぶん何回もやってるんですが、整備する度に忘れるので、自戒ingの記事投稿となりました。
Custom Field Suiteでloopを複数設置した場合に意図しないloop要素が複製された
Custom Field SuiteはWordPressのプラグインでloopフィールドが多重化できるということで、今回の案件の要件とハマったので利用してみました。
そのloopフィールドの多重化で少しハマったのでメモ。
環境
- WordPressのバージョン：6.0.3
- Custom Field Suiteのバージョン：2.6.2.1（執筆時点の最新）
構成
カスタムフィールドに複数のカスタムフィールドグループが存在
イベントグループ
- イベント項目1
- イベント項目2
- イベント詳細ループ
- 個別開催日時設定ループ
- 日付
- 開始時間
- 終了時間
- 個別開催日時設定ループ
リンクボタングループ
- リンクボタンアイテムループ
- ボタンタイプ
- ボタンURL
- ボタンラベル
と大まかですが、上記のようなフィールドグループを2つ特定のカスタムポストに紐付けていました。
症状
上記の構成のときに「リンクボタンアイテムループ」を追加するボタンが入力画面の上部と下部に存在するのですが、上部から追加しようとした場合に「リンクボタンアイテムループ」の構成が複製されて追加されるのではなく「個別開催日時設定ループ」が追加されるということが起こりました。
原因
ループフィールドのファイル（custom-field-suite/includes/fields/loop.php）を見に行くとプラスボタンでクローンを生成するJavascript内で、該当のグループを特定するIDを参照しにいっている先の要素が別のところを見に行ってるっぽい。
$(document).on('click', '.cfs_insert_field', function(event) { event.stopPropagation(); var $add_field = $('.cfs_add_field'); //←ここ // ~ 以下省略
ということで、この部分を修正してみた。
修正
プラグイン本体のファイルは変更したくないので、フィールドのオーバーライドなどできないかと調べていると、以下の記事が丁寧に記載してくれていました。
ということで、同じようにloopフィールドを上書きできると思い、テーマ内に custom-field-suite/includes/fields/loop.php を inc/loop.php としてコピーし、functions.php で
add_filter('cfs_field_types', 'plus_field_type');
function plus_field_type($field_types){
$field_types['loop'] = './inc/loop.php';
return $field_types;
}
というものを追加すると loopフィールド がテーマディレクトリの中で上書きできるようになりました。
あとは loop.php で
$(document).on('click', '.cfs_insert_field', function(event) { event.stopPropagation(); // var $add_field = $('.cfs_add_field'); // 変更前コード var $add_field = $(this).parents('.cfs_loop').find('.table_footer .cfs_add_field'); // 変更後コード // ~ 以下省略
として記載してあげたら、自分の領域の cfs_add_field の要素を見に行くようになりました。
まとめ
Custom Field Suiteは細かいところまで手を入れられる素晴らしいプラグインだなと思いました。 ただ、今回はカスタムフィールドの構成が肥大化したのも原因かと思うので、もっともっと分割していったほうがやさしいのかなとも思った件でした。
もし参考にしていただけましたら幸いです。
Custom Field Suiteプラグインを使っているときに別編集画面でビジュアルエディタの編集モードをHTML編集モードにするとリッチエディタがTinyMCEでなくなる
最近になって、Custom Field Suiteプラグインの存在を知り利用しているのですが、あるとき、リッチエディタとして登録した入力画面でリンクボタンの挿入アイコンが消えるなど、TinyMCEが適応されていない？状態になっている現象が起こりました。
導入初期時には起こっていなく、バージョンアップなどもしていないと認識していたので、ググってみたところ以下のようなTeratailの記事がみつかった。
Custom field suite リッチエディタでのHTML入力について
こちら自己解決されてシンプルに理由を記載されているのでとても助かりました。
さて、上記のように別のリッチエディタ画面でHTML編集モードとなっている場合に、Custom Field Suiteで作成したリッチエディタを表示すると
となると、リッチエディタの表示する編集画面では、wp_default_editorを利用して強制的にビジュアル編集モードに変更してあげればよいかということになりました。
<?php /* 省略 */ // 今回はポストタイプで指定しました。※ポスト名は適当です。 add_filter('wp_default_editor',function($editor){ global $typenow; if($typenow === 'custom_post_type'){ $editor = 'tinymce'; } return $editor; },10,1);
上記のようにすることで、他の編集画面でHTML編集モードにしていても、特定のポストタイプではビジュアル編集モードに矯正的にすることが出来ました。
そんなこんなで今日も皆様おつかれさまです。
javascriptのmatchMediaについて
久しぶりにフロントのことをやったらmatchMediaのことをすっかり忘れていたので自分用にメモ。 ついでに簡易的に関数化してみる使いやすくしようと思う。
/* * @param string media : 'screen and (max-width: 750px)' etc... * @param function func : callback function * @param boolean loaded : default 'undefined' */ function setMatchMedia(media, func, loaded) { const mm = window.matchMedia(media); mm.addEventListener('change',function(e){ if(e.matches){ func(); } },false); if(loaded){ // 3rd argument is true if(mm.matches){ func(); } } } // SP sample // 初回に判定したい場合には第3引数にtrueを入れる setMatchMedia('screen and (max-width:559px)',function(){ console.log('sp_view'); },true) // TABLET sample setMatchMedia('screen and (min-width:560px) and (max-width:959px)',function(){ console.log('tab_view'); }) // PC sample setMatchMedia('screen and (min-width:960px)',function(){ console.log('pc_view'); })
コメントにも書いている通り、初回の動作をつけたいときは第3引数にtrueを入れると関数設定時に判定するようになります。 DOMContentLoadedのタイミングなどで実行してあげると一番いいのかもしれません。
超簡易的なものなので穴があれば教えていただければありがたいです。
ではまた。
Googleフォームをお問い合わせフォームとして使うメモ
- 大まかな流れ
- Googleアカウントを取得
- Googleフォームの作成
- Googleフォームの結果をスプレッドシートに格納
- 送信元（from）の設定用にGmailにメールアカウントを追加
- フォーム内容のメール送信や自動返信
- トリガーの実行タイミングを設定
- 完了ページの遷移をやめAJAXでGoogleフォームにPOST送信
大まかな流れ
- Googleアカウントを取得
- Googleフォームの作成
- Googleフォームの結果をスプレッドシートに格納
- 送信元の設定用にGmailにアカウントを追加
- フォーム内容のメール送信や自動返信
- 完了ページの遷移をやめAJAXでGoogleフォームにPOST送信
といった感じですかね。
Googleアカウントを取得
まずはこれ。
フォーム内容のメール送信や自動返信
フォーム内容をメール送信するためのスクリプトをスクリプトエディタで記述する
スプレッドシートのスクリプトエディタで記述する
またその際 fromを設定するので MailApp.sendMail ではなく GmailApp.sendMail を利用する
トリガーの実行タイミングを設定
こちらはG Suiteと通常の設定では設定画面が違うよう（？）ですが「フォームの送信時」のタイミングで実行を設定します。
完了ページの遷移をやめAJAXでGoogleフォームにPOST送信
通常遷移するとGoogleフォームの完了ページにいってしまうので、Javascriptで書きます。
細かい部分は時間あるときに更新していきます。
Smart Custom Fieldsのラジオボタンのキーを取得する場合に数字を設定していたらとれなかった
ちゃんと設定できる人ならハマらない話しをひとつメモ。
Wordpressのプラグインで「Smart Custom Fields」をよく使わせてもらっています。
キー => 値
の形で設定する際に以下のように数字をキーにすると
0 => 値1 1 => 値2 2 => 値3 3 => 値4 4 => 値5
SCF::get()をする際にはキーを取ってくるのではなく値をとってきてしまいました。
で、いろいろやった結果、
キーを設定する際はキーを文字列で設定する必要があるようです。
num1 => 値1 num2 => 値2 num3 => 値3 num4 => 値4 num5 => 値5
上記であれば値1を設定している場合にSCF::get()で num1 などのキー名を取得できました。
wp_postmetaの重複データ削除
Wordpressでインポートしまくるとwp_postmetaテーブルなどに重複データがわんさか。
特定のmeta_keyなどをチェックしながら削除したいなと思いググる。
で、重複データの削除をとググると以下のような記事が上がってきたので拝見。
こちらを元に重複データのmeta_idが一番若いものを残して削除したかったので、
delete from wp_postmeta where meta_key = '任意のkey' and not in ( select min_id from ( select min(meta_id) as min_id from wp_postmeta where meta_key = '任意のkey' group by post_id, meta_value ) as tmp ) );
とSQLを書いて処理した。
もっと簡単なやり方があるのかもしれないが、少しSQLの勉強になった。
