[jQuery]BxSliderで画像をズームアウトさせながらスライドさせる

経緯

表題の動きをしようと思ったけど参考サイトのJS覗いたら処理が難しすぎてハァ?ってなったのでもっと簡単にできるだろ!!!と思って考えた結果。プラグインの機能の範囲で済ましてるし自分ではこっちのが良い。
※この記事はSlickでやろうとした結果挫折した記事の続きです。

要点

  • ズームアウトの動きは CSSのAnimation
  • movingクラスにズームアウトするアニメーションを呼び出し
  • BxSliderは普通に呼び出すだけ。難しいことしない。

CSS

スライド内のliに

0% → transform: scale(1.2)
100% → transform: scale(1)

という感じで最初が大きくもとに戻っていくCSSアニメーションを適用する。

親要素のoverflowはhiddenで。後は普通にスライドしたらOK。多分動く。

SUZURIでグッズ販売をはじめました

SUZURIでグッズ販売をはじめました!
https://suzuri.jp/yoneco

初回ラインナップは前に自分用のTシャツ作ったときの絵
おすすめはTシャツとマグカップです。よろしくおねがいします。

[参加レポ] WDF vol.30

概要

WDF vol.30「デザイナーに求められる価値をうみだし伝える力」に参加してきたので簡単ですがレポ。
印象に残ったことの箇条書きと雑感。

個人的な課題など

amp対応さっさと勉強せなならん

未来の未来のWebと必要な技術をWebのトレンドニュースから考察

KDDIウェブコミュニケーションズ 阿部さんのセッション

スマートスピーカーの普及率が今後上がってくる!ということで翌日すぐGoogle Home買いました。

  • 7月からChromeでは非httpsだと警告が出るので、いよいよ「サイトを作れば証明書のコストが必要なものとしてかかる」ということをクライアントへ説明した方がベター
  • 仕事用のネット利用はPCが微増傾向 BtoBだったらPC強い
  • スマートスピーカー今からくるぞ!
    REST APIを用いる
    →マシンリーダブルにする必要性が増してくる。構造化をきちんと。(めっちゃ大変じゃねこれ)
  • AIとビッグデータで便利に!というビジネスが今後アツいのでは
  • モバイルファーストインデックス始まってた(Googleはスマホサイトを優先して回遊するぞ)
  • ページ速度はweb担当者Forumの解析ツールが便利
    https://webtan.impress.co.jp/e/2013/01/29/14562
  • ページが遅い!原因別解析 Chrome解析ツールで可能
    1. ドメインの初回読み込み速度が遅い場合は サーバー
    2. ファイルの読み込みが遅い場合は プロトコル
    3. 要らない重いファイルは削除!本当に必要かな?
  • フロントの軽量化は手間の割に効果が薄い。こだわるならやれば良い程度
  • サーバー選びで重要なこと
    SSLはもちろんだが 個人的に把握してなかったのは
    プロトコル HTTP/2 かどうかというポイント

自分を観察してデザインする、学びの習慣

The Marsknowledge 株式会社 イシジマさんのセッション

自己肯定力が重要、ハードルは低く。
習慣は自分の普段の行動の中にうまいこと仕込んで、ちょっとでもできたらOKって気が楽で良いと思いました。
やる気ないときでもできるようにしておく。

  • ルール作りは、相手が普通に振る舞っただけで守られるようなものを
    相手の行動様式を観察し、そこに差し込む!
    (いつも行く場所の中にメモを置くようなこと)
  • 自分が学べる行動様式を作ってしまえ
    1. ブラウザの新規タブ画面を変える
      Panda 5
      Muzli 2
    2. TLが有用なものになるようにすごい人フォローしとけ
    3. YouTubeでダラダラ学習
  • 行動様式の設計3つのポイント
    自分しか勝てない場所をわかっておくこと!
    3が2に繋がっています

    1. 努力前提の設計をしない
    2. やらない事を決める
    3. 自分の特性を知る

    何故今こんな気分なのかをちゃんと見るように!特に何故ヘコんだのかということは振り返っておこう

  • 自分の強みを伸ばすサイクルを当たり前に
  • 小さな成功をいっぱいしような!
  • 無理に勉強するのは違うんだぞ

クライアントと同じ方向を向くためのコミュニケーション術

よつばデザイン 後藤さんのセッション

個人的にこの日一番のパワーワード「私も神様」が出た
(「お客様は神様」と言うが、対等なので私も神様だ という流れ)

思いやりを持って接すること、ニーズを把握すること。
相手に自分がしてあげられることをちゃんと伝える。

  • 捉え方を、肯定して捉える
    いい言葉に置き換えて捉える。せっかちは対応が早いみたいなこと。性質による利点のようなこと。
  • 100%は分かり合えないぞ
  • 最初が肝心
    Webサイトとは、特性、などなど説明しましょう
    初期段階できっちり資料作ると信用が得られるぞ
  • 相手によってコミュニケーション方法を変える
  • プライベートな話を盛り込むと距離が縮まりやすい
  • 大前提の共有
    準備が大事だよ
    知識共有・全体の流れの把握(例えば閲覧環境のこととか)
  • 細かいことを先に言っても伝わらない!知識がないから
    難しい言葉も使わない。
  • こういう質問はよく出ます、みたいなことをちゃんと言っておこうね
  • 見積もりは細かく!(家を建てるとして一式で出されても困るのと同じだよ)
    一式で出すとディスカウントが険しくなっちゃうぞ
  • メリットデメリット自分の見解を伝えよう
  • 図にできることは図解しよう(簡単で良いよ)
  • 長い説明を動画で(サイト内容の説明、WPの使い方など)
  • ターゲットの説明などには総務省に資料が公開されているぞ
  • どこまでできるかははっきり言っておこう(修正回数など)
  • 決定権を持つ人は打ち合わせに参加させよう
  • 原稿が遅かったらどんなペナルティがあるのか強めに言っておこうな
  • 対等ということを忘れない!私も神様!
  • 自分たちとお客さんの価値が一致しないことはままある
  • コマーシャルフォトとインスタは、作品とコミュニケーションという違い
  • それいいね、という感覚コミュニケーション
  • 3秒繋ぎ 飽きない動画ができる
  • ザイオン効果(何回も見てたら親しみを持ってくる効果) いいぞ

Q&A

  • 他の人のデザインが良く見えて凹む時は?
    いったん離れても良い、自己肯定する 「やらない時」も作る
    最終的には勝つつもりで課題抽出し、改善する
  • 決定権がある人が複数いたら?
    選択肢を与え、決めさせる。割れたら他のスタッフにも聞いて決めさせる。
    決めないと進まないしこれ以上伸ばしたら金かかるぞ!って言う
    難しいなあ基本的には
  • 老後にやりたいことと今がリンクしていないと全て無駄になるぞ!

[WordPress]ページリストを出力して現在のページ以外の子孫ページのソースをぶっ殺す

概要

タイトルの通りなんですけど下記のようなサイドバーが必要だったのでコネコネしてました。
一応できたよ。一応。
なお最後のリスト呼び出しの際に全然条件指定してないのでお好みでカスタムが必要でございます。

  • ページリストが出したい
  • 現在のページまたは現在のページが属する階層以外の子ページ孫ページのリストは出したくない

コード

下記のとおりです。

// 通常のページリストから、
// 現在のページ以外の子ページ孫ページのリストを削除して出力

//現在のページID 親ページがなければそのまま・あれば一番上の親のIDを取得
if( !$post->post_parent ){
$current_id = $post->ID;
} else {
$ancestors = get_post_ancestors( $post->ID );
$current_id = end($ancestors); //get_post_ancestorsの最後の数値が最上層
}

$pages = get_pages(); //ページ全部
$page_ids = array(); //ページID格納用配列
$children_lists = array(); //子ページリスト格納用配列

//1.
//最上層のページIDを配列に格納
foreach( $pages as $page ){
if( !$page->post_parent ){ //ここはforeach文の変数を使わないとダメなので$page->post_parentになります
$page_ids[] = $page->ID;
}
}
//現在のページIDを配列から削除
$page_ids = array_diff($page_ids, array($current_id));
//配列を詰める
$page_ids = array_values($page_ids);

//2.
//現在のページ以外の子ページ孫ページのリストを、後ほどの置換用に文字列として取得(タブと改行を削除)
foreach( $page_ids as $page_id ){
$children_lists[] = preg_replace('/[\n\t]/', '', wp_list_pages( 'title_li=&child_of='.(int)$page_id.'&echo=0' ));
     //ここと 下の「$all_pages」のwp_list_pages両方とも「child_of」以外のオプションを完全に合わせる。
    // sort_columnを片方にしか設定しなかった場合などにマッチしなくて除外に失敗するため。
}
//全ての固定ページリストを文字列として取得(タブと改行を削除)
$all_pages = preg_replace('/[\n\t]/', '', wp_list_pages( 'title_li=&echo=0' ));
//現在のページ以外の子ページ孫ページのリストを削除
$page_list = str_replace($children_lists, '', $all_pages);
//空のul.childrenを削除
$page_list = str_replace('<ul class=\'children\'></ul>', '', $page_list);


//3.
//リストを出力
echo '<ul>'.$page_list.'</ul>';

[リンク]リップルエフェクトのTips参考サイト

ちょっと書き留めておく場所がなかったので参考にしたいサイトメモということでリンクをば

https://saruwakakun.com/html-css/material/ripple_effect

[jQuery]Slickで画像をズームアウトさせながらスライドさせる

2018/8/10追記

修正忘れてました。
説明がややこしくなりそうなので別の記事で書きます。
こちら。

2018/5/2追記

すみませんこの方法IE11だとはみ出した部分が表示されてしまい、ちらつきが出ちゃって使えませんでした、、、
全画面背景になら使えると思います。
BxSliderを使ったらもっと簡単にできるかも。今度まとめます。。

経緯

この動きをしようと思ったけど参考サイトのJS覗いたら処理が難しすぎてハァ?ってなったのでもっと簡単にできるだろ!!!と思って考えた結果。プラグインの機能の範囲で済ましてるし自分ではこっちのが良い。
initの発火タイミングが.slickより前っていうのがめっちゃわかりにくかった。

要点

  • ズームアウトの動きは CSSのAnimation
  • movingクラスにズームアウトするアニメーションを呼び出し
  • なんでもかんでもSlickのコールバックで処理

CSS

.slick-slideに.movingが付くようにコールバックを設定するので、
.slick-slide.moving{ ここにアニメーションを呼び出し。 }

0% → transform: scale(1.2)
100% → transform: scale(1)

という感じで最初が大きくもとに戻っていくアニメをつくる

JS

$(‘.slider’).slick() が基本の形なんだけども、
初期化された時実行される init のコールバックを使いたいので一番最初にinitの命令を書く。
これをやらないと1枚目にmovigクラスが付かず止まってしまう。

次にslickを呼び出し、色々設定、

最後に beforeChange のコールバックで下記の命令を実行。

  • 最後のスライド番号を判定するためlengthを使ってスライドの数を数える
  • 現在の2個前のスライドからmovingクラスを除去
    (余分に動かし続けないとスライドの切り替わり時に動きが止まってしまう)
  • 次のスライドにmovingクラスを付加
  • 最初に戻った(data-slick-indexが0になった)ら最後のスライドからmovingクラスを除去
    (こうしないと最後のスライドからmovingクラスが消えない)
$('.slider').on('init', function(){
  $('.slick-slide[data-slick-index="0"]').addClass('moving');
})
  .slick({
    arrows: false,
    dots: false,
    infinite: true,
    fade: true,
    speed: 2400,
    autoplay: true,
    pauseOnHover: false,
    autoplayspeed: 5000,
    centerMode: true
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var slide_num = $('.slick-slide').length;
    $('.slick-slide[data-slick-index="'+ ( currentSlide - 1 ) +'"]').removeClass('moving');
    $('.slick-slide[data-slick-index="'+nextSlide+'"]').addClass('moving');
    if( currentSlide == 0 ){
      $('.slick-slide[data-slick-index="'+ ( slide_num - 1 ) +'"]').removeClass('moving');
    }
  });

以上!!

[WordPress]検索画面にターム一覧のチップを追加・検索対象にする

概要

テキストボックスでの検索の他に日付検索とタームを選択しての検索を追加する必要があった。
検索は特定のポストタイプでのみ動作する。
全部フック「pre_get_posts」の中に書いて、if ( $query->is_search() )で検索結果だけに反映しています。

add_action( 'pre_get_posts', 'customize_main_query' );
function customize_main_query($query) {
  if ( is_admin() || ! $query->is_main_query() )
    return;
    //ゴニョゴニョ………
}

ターム一覧

ポイントは下記

  1. 検索フォーム内で、チェックボックスのnameはcat[]とかcategory[]とか、[]で終わらせる。
    こうすると後でURLパラメータを配列に格納した時に勝手にこの項目が配列になる。
  2. functions.php内でパラメータをGETしてループを加工することで投稿の呼び出しへ反映させる。

検索テンプレート、検索を実装するテンプレートではinputタグのチェックボックスを用いてタームの選択肢を追加。

functions.phpでは、URLを元にパラメータの中身を配列として取り出し、tax_queryでタクソノミーとタームを指定する。
ターム名を配列にしてタームの指定に用いる。

参考URL:
【PHP】URLを分解して配列で取り出すには?(Web.fla)

functions.php

//URL取得
if ( isset($_SERVER['HTTPS']) and $_SERVER['HTTPS'] == 'on' )  
{  $protocol = 'https://';  }  
else  
{  $protocol = 'http://';  }
$search_url  = $protocol.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];  
//念のためデコード
$decoded_url = urldecode($search_url);
//URLを配列に分解
$url_arr = parse_url($decoded_url);
//パラメータの中身を文字列の配列として変数へ格納
parse_str($url_arr['query'], $parms);
//タクソノミー指定
if ( ! empty( $parms['category'] ) && !is_wp_error( $parms['category'] ) ){
  $query->set('tax_query' , array(
    array(
      'taxonomy' => 'タクソノミー名',
      'field' => 'slug',
      'terms' => $parms['category'] //フォームで取得した値
      )
    )
  );
}

ちなみにこれを作ってるときまで気づかなかったけどfunctions.php内で普通に$protocol.$_SERVER[‘HTTP_HOST’].$_SERVER[‘REQUEST_URI’]でURLを取得しようとしても実行タイミングが早すぎてサイトURLしか取れません。pre_get_postsのタイミングだから取れてるだけ。

検索するテンプレートのフォーム部分

<ul class="term-list">
<?php
  $terms = get_terms('タクソノミー名',
    //オプションは必要に応じて
    array(
      'parent' => 0,
      'orderby' => 'description'
    )
  );
  //投稿が存在するタームの一覧を取得・加工
  if ( ! empty( $terms ) && !is_wp_error( $terms ) ):
  foreach( $terms as $term ):
?>
  <li>
    <label class="term-item"><input name="category[]" type="checkbox" value="<?php echo $term->slug; ?>"><span><?php echo $term->name; ?></span></label>
  </li>
<?php endforeach; endif; ?>
</ul>

日付検索の実装

jQueryUIのDatepickerで入力した値を、検索結果のループを加工する時に利用する。
基準となる日付は投稿日ではなくてカスタムフィールドに入力された日付の値を利用しているのでちょっとややこしかった。

$date_from_src = $_GET["date_from"]; //この日から
$date_until_src = $_GET["date_until"]; //この日まで

if( $date_from_src != '' && $date_until_src != '' ){
  //始めも終わりも指定した場合
  $query->set(
    'meta_query', array(
      'relation' => 'AND', //AND検索にする
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_from_src,
        'compare'=>'>=',
        'type' => 'DATE'
      ),
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_until_src,
        'compare'=>'<=',
        'type' => 'DATE'
      )
    )
  );
} elseif( $date_from_src != '' && $date_until_src == '' ){
  //始めだけ指定した場合
  $query->set(
    'meta_query', array(
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_from_src,
        'compare'=>'>=',
        'type' => 'DATE'
      )
    )
  );
} elseif( $date_from_src == '' && $date_until_src != '' ){
  //終わりだけ指定した場合
  $query->set(
    'meta_query', array(
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_until_src,
        'compare'=>'<=',
        'type' => 'DATE'
      )
    )
  );
}

[WordPress]メディアファイルへリンクしている画像をLightbox対応する

概要

本文内に挿入した画像のうちリンク先が「メディアファイル」になっているものをすべてLightboxを用いて拡大する必要があったのでその方法の備忘録。

参考URL

[WordPress] 画像挿入時にリンク先が画像の時のみ、aタグに独自クラスを付与する方法(memocarilog)

フィルターの内容は上記で紹介してくれているソースを使用。正規表現詳しくなくて……
調整して、下記のソースにした。

add_filter( 'image_send_to_editor', 'addClass' );
add_filter( 'the_content', 'addClass' );
function addClass( $html ) {
  if(preg_match('/<a href="https?:\/\/+[-_.\/a-zA-Z0-9]+(?:png|jpg|jpeg|gif)"><img/' , $html)){
      $html = str_replace( '<a ', '<a data-lightbox="gallery" ', $html );
  }
  return $html;
}

追加点

1行目を追加。
フック「image_send_to_editor」はその名の通り「メディアライブラリから画像をエディタ内に追加するタイミングで」働くので、画像を挿入した後に編集してリンクを追加した場合には働かない。

もしも「メディアを追加」から追加するタイミングで設定を忘れたら対応できないということになるので、「the_content」にもフィルタリングして、本文がそもそも書き出される時に付加してくれるように調整。
これを使用した案件では特定のポストタイプのシングルページでのみ動作させれば良く、Lightboxのファイルの読み込みは条件付きにしたのであまり影響がなさそうだったのでここで落とし所とした。

ギャラリー機能への対応

post_galleryというフィルターフックがあったが出力されるHTMLの変数名などチラと見ただけでわからず、面倒だったのでjQueryで操作しました。
やってることは、似たようなもんです。
「.gallery-item内のaを全部調べて、hrefの中身に画像の拡張子があった場合data-lightbox属性をつける」という内容ですが、ちょっとif文甘い?ギャラリーの中だけだしイレギュラーはない気がするんですけど……

$(".gallery-item a").each( function(){
  var link = $(this).attr('href');
  if( link.match(/(?:png|jpg|jpeg|gif)/g) ){
    $(this).attr('data-lightbox','gallery');
  }
});

以上でございます。