2015-07-21

jQuery + CSS3でスクロールアニメーション実装してみる

動的な動きをつけたいの！

jQueryによってスクロールする距離によってCSSクラスを与えて、そのCSSクラスにアニメーション処理を施しちゃうような動きを期待している。

勿論、skrollr

<a href="https://github.com/Prinzhorn/skrollr">Prinzhorn/skrollr</a>github.com

のようにもっと便利なjQuery プラグインは色々あるのですが、今回はもっと簡単にjQueryとCSSだけでやっちゃおう的なものです。スクロール関係の効果は簡単なものに対して重いプラグインを使ってもリソースの無駄だったり、複雑なものは素早くスクロールしたりすると表示が壊れたりするため基本的には規模にあったものを実装するのが良い。

と、~~誰がえらい人がいつか言っていた~~気がします。

サンプルはこんな感じ

http://mypglog.tk/150721/

コード

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>mypglog sample 01</title>
    <link rel="stylesheet" href="../reset.css" />
    <link rel="stylesheet" href="../base.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style>
        section {
            width: 960px;
            margin: 100px auto;
            min-height: 300px;
        }

        section h2 {
            font-size: 30px;
            font-weight: bolder;
            text-align: center;
        }

        .opa {
            opacity: 0;
        }

        .noneopa {
            opacity: 1;
        }

        .action {
            opacity: 1;
            -webkit-transition: all 1.5s;
            -moz-transition: all 1.5s;
            -ms-transition: all 1.5s;
            -o-transition: all 1.5s;
            transition: all 1.5s;
        }

        .rotate {
            animation: rotate 2s;
            animation-iteration-count: 1;
            -webkit-animation: rotateanime 2s;
            -webkit-animation-iteration-count: 1;
        }

        .move {
            animation: rotate 2s;
            animation-iteration-count: 1;
            -webkit-animation: moveanime 2s;
            -webkit-animation-iteration-count: 1;
        }

        .big {
            animation: rotate 2s;
            animation-iteration-count: 1;
            animation-delay: 2s;
            -webkit-animation: biganime 2s;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-delay: 2s;
        }

        strong {
            font-weight: bolder;
        }

        @keyframes moveanime {
            0% {
                transform: translate(200px, 0);
            }
            100% {
                transform: translate(0, 0);
            }
        }

        @-webkit-keyframes moveanime {
            0% {
                transform: translate(200px, 0);
            }
            100% {
                transform: translate(0, 0);
            }
        }

        @keyframes rotateanime {
            0% {
                transform: rotateX(0deg);
            }
            100% {
                transform: rotateX(360deg);
            }
        }

        @-webkit-keyframes rotateanime {
            0% {
                -webkit-transform: rotateX(0deg);
            }
            100% {
                -webkit-transform: rotateX(360deg);
            }
        }

        @keyframes biganime {
            0% {
                font-size: 30px;
            }
            50% {
                font-size: 85px;
            }
            100% {
                font-size: 30px;
            }
        }

        @-webkit-keyframes biganime {
            0% {
                font-size: 30px;
            }
            50% {
                font-size: 85px;
            }
            100% {
                font-size: 30px;
            }
        }
    </style>

    <script type="text/javascript">
        // <!--
        $(document).ready(function () {
            var number = 200;
            //animation
            $(window).scroll(function () {
                if ($(this).scrollTop() > 250 - number) {
                    $(".anime01").addClass("action");
                }
                if ($(this).scrollTop() > 650 - number) {
                    $(".anime02").addClass("action move");
                }
                if ($(this).scrollTop() > 1050 - number) {
                    $(".anime03").addClass("action rotate");
                }
                if ($(this).scrollTop() > 1050 - number) {
                    $(".anime04").addClass("action");
                    $('.anime04').delay(1000).queue(function () {
                        $(this).addClass('big').dequeue();
                    });

                }
            });
        });
        // -->
    </script>
</head>

<body>
    <header>
        <h1>jQuery + CSS3でスクロールアニメーション実装してみる</h1>
        <p>http://samplesample.com</p>
    </header>

    <section class="sec01">
        <p>スクロールをしていくとフェードインや3D回転のアニメーションしていくようなアレです</p>
    </section>

    <section class="sec02">
        <h2 class="opa anime01">こんにちわこんにちわこんにちわわ！</h2>
    </section>

    <section class="sec03">
        <h2 class="opa anime02">実は今、こんにちわを三回言ったのではなく…</h2>
    </section>

    <section class="sec04">
        <h2 class="opa anime03">最後は「<strong class="opa anime04">ちわわ</strong>」と言っていたんです＞＜</h2>
    </section>
</body>

</html>

解説

仕組みは物凄く簡単で

$(document).ready(function () {
    var number = 200;
    //animation
    $(window).scroll(function () {
        if ($(this).scrollTop() > 250 - number) {
            $(".anime01").addClass("action");
        }
        if ($(this).scrollTop() > 650 - number) {
            $(".anime02").addClass("action move");
        }
        if ($(this).scrollTop() > 1050 - number) {
            $(".anime03").addClass("action rotate");
        }
        if ($(this).scrollTop() > 1050 - number) {
            $(".anime04").addClass("action");
            $('.anime04').delay(1000).queue(function () {
                $(this).addClass('big').dequeue();
            });

        }
    });
});

こんな風にスクロールした距離に合わせてクラスを追加させていき、そのクラスにはアニメーション処理がついている…というだけ。var = numberはスクロールの長さを調節する時にいちいち全ての数字をいじるのが面倒なので仮に入れてあるような形になります。

CSSトカ

CSSは好みに合わせて何入れても良いのですが要素を隠したい時はdisplay:noneではなくopacity:0を使う事を意識する。display:none;の場合要素のエリアごと消してしまうので、たまにフェードインしたいはずが瞬間移動してしまうとかあったりします。

CSSのアニメーションも正直何度も出来るような域まで達しているので、色々遊んでみると楽しいかもしれません。

2015-07-11

WP-membersの追加したプロフィール内容を検索したい時

wordpress php

WP-membersで追加したフィールドからユーザー検索や絞り込みをするのにハマったお話。

会員制サイトなんかを作ったりしていたのですが、プロフィールに色々と項目を追加してWP-membersにて登録出来るようにした…という状態。

get_usersではダメ

<?php $users = get_users(); ?>

はユーザー情報を全て取得する関数で、引数に色々と追加すると絞込の条件等も指定出来る。例えば

<?php $users = get_users( array( 'search' => 'sample*', 'search_columns' => 'user_nicename' ); ?>

とユーザーニックネームで「sample」という単語から始まるものを検索出来る。だったらsearch_columnsにカスタムフィールドのフィールド名突っ込めばいいかと思いきや、取れない。CODEX見るとそもそも「（'ID'、'user_login'、'user_email'、'user_url'、'user_nicename'のいずれか）」しか利用出来なかった。残念。
という訳で色々試行錯誤した結果以下になった。

<?php
$users = get_users();//全てのユーザー情報を取得
foreach ($users as $key => $value) {
    $usermeta[] = $value->ID;//ユーザーIDを取得して配列に格納
}

//ユーザー数を取得してループ(foreachでもいいのですが…)
for($i=0;$i<count($usermeta);$i++){
    $get = get_user_meta( $usermeta[$i],'検索したいフィールド',true);
    if($get == "サンプル"){
        echo $get."がマッチしました";
        echo $get."さんのスラッグは".get_the_author_meta('user_nicename',$usermeta[$i])."です！";
    }
}
?>

というような感じでキーワードに引っかかったユーザーを一覧で出せる。またget_the_author_metaはカスタムフィールドだろうが既存のフィールドだろうがお構いなしに取れるので、これを使えばほぼなんとでも表示が出来る。

#他にもっと良い方法
多分すごくありそう。なんていうか今回僕はやり方が分からず、力づくでやった感が凄い。もっとスマートな方法があれば教えてください…。

2015-04-20

web屋はmacとwindowsどっちを使えばいいのかのお話

雑記

Photoshop使って、illustlator使って、sublimetextないしエディタでコード書いて、たまにオーサリングソフトも使うかなとかそんなレベルのお話。
iOSアプリ開発してますとか絶対統合開発環境主義者とかそういう方はちょっと対象外です。

webデザイナーになりたい！webプログラマになりたい！

この世界は厳しいんだぞおおおおとかそういう話は置いておいて、そういう方はたくさんいると思うのですが、それにあたってmac(OSX)を使うかwindowsを使うか…というのは、某エディタ論争並によく議論されたりします。

両方を7年くらい使ってきた私から言いますと「マジで本当にどっちでもいい」が正解だと思っています。

なんでよ！

何故ならどっちも基本的に何でも出来るから。ただし、自分で企画やディレクション等なんでもやる方はwindowsを推奨したい。クライアントとのやり取りで、officeがフル機能で必要だったり、zipが文字化けしちゃいますあうあうあーとかそんな事になりにくい。クライアントは基本windowsだったりするし、windowsにしておけば問題ない。

でもでも！mac使う人の方が多いやん？

ぶっちゃけ本当に単にデザイン面と、「なんかそんな雰囲気だから」「昔、adobe関係がwindowsに無かったためその名残」という理由です。ありがちなmacのメリットと言えば。

MBAまじ軽い。速い。便利。
- レッツノートの方が軽い。
バッテリーの持ちもいい
- レッツ(ry。
トラックパッドハイパー便利
- と言う方に限って必ず入っている「BetterTouchTool」

とかこんな感じ。別にmacでなくともいい。

私？基本macです！！！

とここまで凄いwindowsをゴリ押ししましたが、実際よく使っているのはmacです。
それは単純に今所持しているPCの中で一番スペックが高いのが現在macなのでこれを使っていますが、もしメモリ32GBのi7＋αなオンラインゲーム最先端グラボも積んでいるようなwindowsPCがあれば勿論そちらを使います。速さ、大事、命。

最終的には予算

そうなんです、速さが命なんです本当に。
だからmacが、windowsが…ではなく。今出せる予算の中で最高スペックのものを買うといいと思うんですよ。

2015-03-11

wordpressでカスタム投稿タイプのRSSを出力させる

wordpress

こんな事がしたかった

他ドメイン管理のページと、現在ページの特定カスタム投稿タイプの更新ニュース的なものを合わせて時系列的に表示させたい。
でも、スクレイピングしてまとめる程の労力をかけたくないというのが心境で、そうだRSSだ！という事に至りました。

カスタム投稿タイプのRSSですが

http://osarusan.com/?feed=rss2&post_type=投稿タイプ

で簡単に取れました。出力というほどのものでも無かった…。

2015-03-10

wordpressで次の記事とか前の記事のカスタムフィールドの内容を読み込む

php wordpress

記事ナビゲーションではまる

いつもお願いしてるコーダーさんの手が空かないとかでスケジュール的にアレだったので、久しぶりに自分でwordpressの組み込みをしました。~~PHPとか本当よくわからないです。~~

で、はまる。凄いハマった。状況としては

カスタム投稿タイプ「news」の個別記事を表示させている
記事下部に前の記事・次の記事的なナビゲーションをつけたい
ついでにその前の記事にカスタムフィールドの画像を載せたい
まあここまで来たらテキストフィールドのサブタイトル的なフィールドも載せちゃおっか

という状況で、1まで完成している状態でした。
そして色々試したあげく、ようやく正解にたどり着きました。

次の記事と前の記事のIDをまず取る

<?php
$prevpost = get_adjacent_post(false, '', true); //前の記事
$nextpost = get_adjacent_post(false, '', false); //次の記事
?>

続いて条件分岐を書く

<?php
$prevpost = get_adjacent_post(false, '', true); //前の記事
$nextpost = get_adjacent_post(false, '', false); //次の記事

if ( $prevpost ) {
?>
前の記事があった場合の内容
<?php } else{ ?>
前の記事がなかった場合の内容
<?php }?>

<?php

if( $nextpost ) {
?>
次の記事があった場合の内容
<?php } else{ ?>
次の記事がなかった場合の内容
<?php }?>

こんな感じ。後は入れたい箇所に入れたいものを入れる。

カスタムフィールドの画像を表示させたい！

<img src="<?php echo wp_get_attachment_url(get_post_meta($prevpost->ID,"フィールドのID",true));?>">

次の記事の画像が良い時は$prevpostを$nextpostに。

カスタムフィールドのテキストを表示させたい！

<?php
echo nl2br(get_post_meta($prevpost->ID, subtitle, true));
?>

nl2brはテキストエリアで自動改行していた場合、これ入れておかないと改行してくれないため入れてあります。
次の記事のテキストが良い時は$prevpostを$nextpostに。

普通にタイトルを取得したい

<?php
get_the_title($prevpost->ID)
?>

次の記事のタイトルが良い時は$prevpostを$nextpostに。
ちなみにリンクのURLなら以下。

<?php
get_permalink($prevpost->ID)
?>

勉強になった！

2015-03-09

HTML5でコーディングする時のテンプレート的なやつ

しょっちゅうコーディングされる方は自分なりのHTML5のテンプレート的なものを使っているかと思うのですが、その中でも私が良く使っているのはこんな感じです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <title>HTML 5 templete</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/common.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello World</p>
</body>
</html>

X-UA-Compatible

web屋として鬱陶しい事この上ないIEの互換モード封印のため記述

IE8以下の対策

html5やCSS3をある程度解釈してくれるように

  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->

このコードを追加しています。
ただし、クライアントにHTML5で対応して欲しい…と言われた際や、IE8以下は無視してもいいなんて言われた時に保険で入れておいてあります。
予め仕様要件としてIE8以下も含まれているのであれば最初からXHTMLで書くべき。

その他

CSSはそのままwordpressに乗せる事が多いのでstyle.cssのみトップディレクトリに配置してありますが、そのへんは好みかと思います。
wordpress管理画面から編集の必要がないのであれば、他ファイルと同じcssディレクトリへ。

2015-03-05

COREPREE Cloudについてあれこれと

サーバー

GMOの傘下に~~なってしまった~~デジロック云々はさておき、そのGMOにCOREPRESS Cloudなるサービスが最近追加されました。
<a href="http://www.corepress.jp/">COREPRESS cloud コアプレスクラウド</a>
COREPRESS cloud コアプレスクラウド

いわゆるwpxクラウド的なあれです。こういうサービスは多ければ多いほど、ユーザーの選択肢は広がるのでありがたいのですがなんていうか誰得サービスでした。

料金体系の訪問者数に注目して頂きたい。1000UU(PVではないと思われる)毎に月額100円らしい。そりゃクラウドですからね。スケールアウトされたらその分占有するわけですし都度課金というのはわかります。ですが、使用用途としてこれは困る。

そもそも普通のレンタルサーバーでwordpressを使わずにクラウドを使うメリットっていうのは「速度」と「アクセス肥大事の安定性」の面が大きいと思います。通常動作の安定性なんてxserverで十分ですし、バックアップは毎日3時とかにDBごとバックアップすればええやん？という話で大きなメリットにはならない。

でもアクセス肥大時に503エラーになるのとかって、それこそPVが平均5000やそこらから10万近くまで膨れ上がった時くらいなんですよね。COREPRESSのプランCP-3(月2000円)ですら「月60,000UU」までしか許していません。日換算すると平均「2,000UU/dayです」。2000ｗｗｗｗｗ2000ｗｗｗｗとか言いたい。wpxクラウドであれば月額1,000円で「7,000UU/day(1人あたり3PV前後計算)」くらい可能です。

wordpressでも使い方によって色々と負荷は変わるのに、全員が全員wordpress利用なので負荷は大体同じだろうから1000UU…とか本気で設定してそう。

なんかかなりアンチのような書き方をしてしまいましたが、valueserverとか本当好きです。MySQLがちょくちょく切れるのが玉に瑕というか、玉が割れてるレベルですがそれでも、コストパフォーマンスはすごく良いと思う。

ただ、今回のcorepressは分からない。本当に誰得か分からない。誰か私にこのサービスのメリットを教えて下さい！