jQueryとCSSで遊ぼう【初級者向け】

blog160912

今回はデザイン→できる!、HTML→OK!、CSS→なんとかいけるよ。。、Javascript→なんか怖い。。。っていう人向けです。

まずはサンプルページはこちら
作っているうちに遊んでしまいました。

最初に今回のお題です。(コードだけだけど・・・)
ボタンを押すと、アニメーションします。Webサイト使っていると当たり前に見るエフェクトですね。

これをちょっと前まではどうやっていたかというと、jQueryを使ってやっていました。



$(document).ready(function(){
     $('.button').on({
        'click' : function(){
            $('.target').fadeIn(500, 'ease');
            $('.target').css({
                 'padding-top' : '50px',
                 'padding-left' : '50px',
            });
        }
    });   
});


いまでは、このような使い方をすることが多いです。



//jQuery
$(document).ready(function(){
     $('.button').on(
        'click' : function(){
            $('.target').toggleClass('active');
    });   
});


/* CSS */
.target{
    opacity: 0;
    padding-top: 0;
    padding-left: 0;
    transition: all 0.5s ease;
}
.target.active{
    padding-top: 50px;
    padding-left: 50px;
}


jQueryの仕事はクラスを付与するだけ、残りの設定はCSSでやろう、ということですね。

jQueryを使う

CSS3がガンガン使えるようになってこういうことは当たり前になっていますけど、ほんのちょっと前はこんなことしてました。
Flashが使われなくなり始め、さまざまなJavascriptのライブラリの中からjQueryが頭ひとつ抜け出し、ブラウザが新しくなってCSS3で表現できることがずっと広がった。そういう経緯です。

jQueryの場合はアニメーションに限りませんが初めにセレクタを選ぶ。「$(‘selector’)」の部分ですね。
それから、そのセレクターの動作、英語の動詞にあたるような部分を書きます。「.fadeIn()」などです。
終わりは「; (セミコロン)」です。

上記の例では初めに「.button」が「on」すると言っています。
on()は、clickやmouseenterなどの動作の時に命令を発動させます。
例では「click」イベントが起こったときに、



$('.target').fadeIn(500, 'ease'); //①
$('.target').animate({
     'padding-top' : '50px',
     'padding-left' : '50px',
}, 500, 'ease'); //②


の2つの命令をしています。
①では500ms(ミリセカンド)、つまり0.5秒かけてフェイドインをさせています。’ease’はイージングの指定です。
②は0.5秒かけてpadding-topとpadding-leftがそれぞれ50px移動します。これによって、ターゲットは右下に広がるように見えるはずです。

CSSのアニメーションについて

CSSでアニメーションするには2通りの方法があります。

1.transitionを使う方法と2.animationを使う方法です。
transitionは自動ではスタートしません。またループもできません。
しかしサイト制作上、よく使うアニメーションはこちらを使うことが多いです。
transitionとは「遷移」のことですから、ある状態からある状態へ移行する、というイメージでしょうか。

animationはtransitionに比べ、より細かいアニメーションの設定ができます。
キーフレームごとにプロパティの設定ができるので、自分の想像に近い動きを細かくつけていくことができます。

CSSアニメーションでの注意点

CSSのアニメーションでは基本的に数値や計算式で操れるものしかアニメーションできません。
例えばtopの値が0から50pxにすることも50%にすることも5emにするのもOKです。

しかし、margin-leftの値を0からautoにする、これはアウトです。
transitionを使って、margin-rightとmargin-leftをautoにし、ボックスをアニメーションさせながら中央に寄せるということはできません。
もちろん、text-alignをleftからcenterにしてもアニメーションはしません。
数値を扱うものしか使えない、とおぼえておいてください。
先ほどのボックスをアニメーションさせながら中央に寄せる、なんていうのはJavascriptで計算しながらやってもいいです。
※marginをautoして中央寄せのアニメーションはできませんが、同じ動きならおそらく下のコードで行けると思います。


.target-parent{
    position: relative;
    width: 100%;
    height: 200px;
}
.target{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(0) translateY(-50%);
    transition: all 0.5s ease;
}
.target.anime{
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

発火

これまではjQueryを使ってアニメーションしていた動きはCSSでも表現できることがわかりました。
CSSのアニメーションを使う場合は何らかの発火イベントを利用することが多くなります。

例えば上述のクリックのイベントもそうですし、当たり前によく使うのはボタンの上にカーソルがのった時、などですね。このカーソルがボタンにのる動きはCSSのセレクタ(:hover)で判定できますから、CSSだけでアニメーションを完結させることができます。

しかし、CSSのセレクタだけでは判定できないものも多くあります。
例えばお申込みフォームで、「利用条件に同意する」のチェックボックスにチェックが入っていないと、送信ボタンが押せない仕掛けはよく見るでしょう。(あれはCSSなしでjQeury(Javascript)だけで実装したりしますが)
もしくは、要素が画面の上部にスクロールしたらアニメーションが始まるという場合もありますね。

こういう時によく使う方法が、アニメーションの動き自体はCSSで設定しておく。→何らかの条件を満たした場合にjQueryを使ってその要素にクラスを付与する。→アニメーション!みたいな方法です。

上記の例でいえば、.targetにはアニメーションする前の状態とtransitionでアニメーションすることが書かれています。
そして.target.animeには、.targetに.animeというクラスが付与された場合に起こる結果が書いてあります。
例えばクリックされたときに、例えばスクロールしてきた時に、jQueryのaddClass()を使ってクラスを付与してあげれば、アニメーションがスタートするわけです。

下の例では.buttonがクリックされたときに.targetにクラスactiveが付与され、アニメーションが始まります。



$(document).ready(function(){
     $('.button').on(
        'click' : function(){
            $('.target').addClass('active');
    }); 
});


また、jQueryを使うならば、toggleClass()もよく使うのでおぼえておくと便利です。
下の例では、.buttonがクリックされたときに.targetにクラスactiveがなければクラスactiveを付与、あった場合はクラスactiveを削除します。



$(document).ready(function(){
     $('.button').on(
        'click' : function(){
            $('.target').toggleClass('active');
    }); 
});


さまざまなジェネレーターやライブラリ

自分で実装するとなると、こんがらがる部分も初めのうちは多いと思います。
そんな人でもカンタンにアニメーションができるように、ありがたいことにjQueryにせよCSSにせよいろいろなライブラリやジェネレータが出てきました。
作者さんたちに感謝しつつ、こういうのを使うのも制作スピードを上げる上では有用だと思います。
Javascriptは怖いと思ってるデザイナーさんに、今回やったのはjQueryを利用して、クラスを付けたり消したりしただけです。
たった5行。慣れると便利ですから、ちょっとずつ触っていってみてくださいね。

参考サイト


Wixの新機能を試してみました

Wix Editor

 

無料で使えるWebサイト作成ツール「Wix」。
自由度の高いレイアウトや、アニメーションなどの目を引くデザインが、コードをいっさい書かなくても簡単に実装できてしまいます。

logo

Wix.com
http://ja.wix.com/

数ヶ月前にWixでWebサイトを作ることがあった時にも、その簡単さに驚いたのですが、それからもどんどん新しい機能が追加され、より多岐にわたったデザインを作ることができるようになりました。

その新機能の中でも特に気になった2つ。8月に実装されたばかりの新しいスクロールエフェクトと、全画面に対応したカラムレイアウトについて、今回はご紹介します。

続きを読む Wixの新機能を試してみました


WordPressで画像情報を個々に取得する。

どうもKazです。

WordPressで画像を扱う際に、画像のalt、キャプション(caption)、説明(description)を個別に引用する事がありました。
altはともかく、キャプションや説明の欄を使う事が今まで無かったのでネットで調べてみると、以外と個別に取得する方法を書いている方が見当たらなかったので自分のメモ代わりの為にも書いておこうと思います。

WordPressで画像を扱う際にIDを持たせるかURLを持たせるか考える事があるかと思いますが、画像からイロイロと情報を引き出す場合はIDを持たせた方が使いやすいと思います。

さて、画像はIDで持つ事にして、その画像の情報はドコにあるのかと言うと…
WordPressのDBは『メディア用』『投稿用』『カスタム投稿用』などキレイに分かれておらず『ごった煮』状態になっていますので探すのは大変なのですが

.wp_postmeta
(meta_IDをキーにpost_IDやはaltなどがあります)

.wp_posts
(IDをキーに、キャプション、説明などがあります)

この2つのDBの中に入っています。
※画像に情報を書き込み、AdminerプラグインなどDB内を確認してみてください。

それぞれの記録状態がわかったので
画像のIDをキーとして取得する方法を説明致します。

【altの取得】

$wp_alt = get_post_meta( 画像ID , '_wp_attachment_image_alt', true )

※altに関しては定番ですので、説明は不要かと思います。

キャプション(caption)、説明(description)の取得
前に説明した通りwp_postsの1レコードに書き込まれていますので、その1レコードを全部取得してから必要な情報のみ取得します。

【該当レコードの取得】

get_post( 画像ID )

これでIDに紐付けされたレコードが取得できます。
取得できる項目が23項目ほどありますが
その中で

キャプション = post_excerpt
説明 = post_content
タイトル = post_title

以上の項目で持っています。
ちなみに、こんな物もあります。

投稿のタイプ(画像のみ) = post_type
オリジナル画像のURL = guid

では、早速alt以外の項目も取得していきましょう。

【画像情報の取得】

$wp_rec = get_post( 画像ID )
// キャプション
$wp_caption = $wp_rec->post_excerpt;
// 説明
$wp_discts = $metas->post_content;

これで画像IDから基本的な情報が取得できました。

連続で取得する場合は、画像IDを配列に持ってループさせ
各情報も配列で持てば扱いやすくなるとおもいます。


安い独自SSLの使えるサーバーについて

近年急激に安くなった独自SSL。Googleが検索順位に影響するよ!と言い始めてからにわかに注目を集めています。かつて安いSSLと言えば、サーバー会社の提供する共用SSLがほとんどでしたが、昨年あたりから年数千円単位の格安の独自SSLサービスが出てきました。サーバーを契約すれば、無料で使えるエックスサーバーのようなサービスもあります。2016年8月現在、有名処のサーバーの独自SSLサービスを調べてみました。

格安SSL証明書について
証明書の信頼性云々もさることながら、色々制限もあります。
・格安SSLの場合、SSLの持ち込みはできないケースがほとんど。サーバー会社とセットで利用する形態になる。
・ドメイン認証型のため、利用できるブラウザに制限がある。ざっくり言うと古いブラウザでは表示できない可能性あり。更にざっくり言うとガラケーは弾かれる可能性大。その代わりに審査が簡単で即日利用できるようになるなど、安い以外のメリットもあり。


■さくらインターネット

証明書 Rapid SSL
価格 年1500円

詳細:さくらのSSL https://ssl.sakura.ad.jp/

コンパネから申し込んで、即実利用可能。


■ロリポップ/ヘテルム

証明書 GlobalSign クイック認証SSL
価格 ロリポップ年20000円 ヘテルム年18000円

詳細:ヘテルム 独自SSL https://heteml.jp/option/ssl/

GMOグループグローバルサインのSSLを提供。流行の格安SSLは提供していない模様。


■お名前.com/Xrea/CORE server/Value server

証明書 アルファSSL
価格 年1200円

詳細:バリューサーバー 独自SSL https://www.value-domain.com/pr/ssl/

月額換算で100円とかなり安い。アルファSSL自体もGMOグループ。そう考えるとロリポップでアルファSSLを扱うのも時間の問題か。


■ファーストサーバー(Zenlogic)

証明書 Let’s Encrypt
価格 0円

詳細:Zenlogic無料SSL https://zenlogic.jp/option/ssl/letsencrypt.html

いつの間にやらクラウドサーバーがサービスの主になっていたファーストサーバー。法人・個人事業主に限定されるが、無料でSSLを提供している。


■エックスサーバー

証明書 Let’s Encrypt
価格 0円

詳細:エックスサーバー独自SSLについて https://www.xserver.ne.jp/functions/service_ssl.php

弊社も利用中。ファーストサーバーと同じく、Let’s Encryptの証明書。
サーバー契約者なら無料・無制限で取得出来るので、割り振っているドメイン全てをSSLに対応させることが可能。


■カゴヤ・ジャパン

証明書 Rapid SSL
価格 年9180円(上位プラン契約で無料)

詳細:カゴヤジャパンSSLサーバー証明書 https://www.kagoya.jp/ssl/

契約をしていれば、1つだけ無料で使える。


色々見てきましたが、現状アルファSSLとLet’s Encryptの2択です。Googleの検索順位も荘ですが、アプリとサーバー間の通信もSSL必須とされてきているので、今後需要はますます高まるのは間違いないでしょう。
各サーバー会社の格安独自SSLは、今春あたりから急速に広まってきたものなので現在様子見ですが、問題なければ積極的に導入していきたいサービスです。