9月, 2016 - AGN Web!

どもっ。Kazです。
メインのウェブブラウザは何を使っていますでしょうか？
私の場合は、safariからFierfoxを経てChromeで落ち着いています。
そしてWebの制作をしていくと、アレコレと機能拡張を入れては止め、入れては捨てを繰り返すのですが
その中で、意外と使える機能拡張を紹介していきます。

ユーザーエージェントの切り替えをサクッと行える
『User-Agent Switcher for Chrome』

アクセスするブラウザや端末の違いで表示がどう変わるか、サクッとチェックするにはもってこいの機能拡張です。
初期のプリセットも十分ですが、ユーザーエージェントの追加もできるので入れておくと便利です。

Cookieの管理が簡単
『EditThisCookie』

とにかく「サクっ」とブラウザのクッキーアイコンを押せば現在のCookieの状態を確認する事ができます。
Cookieの値も簡単に変更できるし追加や検索などなど機能も豊富ですので、Cookieを使ったサイト制作には必需品になると思います。

今見ているページを上から下まで画像にしたい!!
『Open Screenshot』

長いランディングページや各Webページの全体を把握したい。修正指示のためにページ全体の画像が欲しいなど
ブラウザのカメラアイコンをクリックすれば「ページ全てをスクリーンショット」するのか「見たままをスクリーンショット」するのかなど選べてサクッと画像にしてくれます。
プリントアウトする時にレイアウトが変わってしまったりする時もサクッと画像にしてプリントすれば崩れる事なく出力できます。

アナリィクスのチェックも簡単。
『Page Analytics (by Google)』

自身でチェック可能なアナリティクスを埋め込んであるサイトにアクセスした時、解析表示がONになっているとページ上部にアナリティクスの数値とグラフをそれぞれに表示してくれます。もちろん項目は変更できるので気になる項目を簡単にチェックできます。
また「今見ているページからドコへのアクセスが多いのか？」色分けやパーセント表示でチェックする事も可能です。
アナリティクスのチェックが多い方には本当に便利な機能拡張です。

よく探してみると、困っている事を解決してくれる機能拡張があったりするので、イロイロと試してみて使いやすいツールに仕上げてみましょう。

オススメがある方は、ぜひコメント欄に!!

今回はデザイン→できる！、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',
            });
        }
    });   
});

$(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');
    });   
});

//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;
}

/* 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');　//②

$('.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%);
}

.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');
    }); 
});

$(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');
    }); 
});

$(document).ready(function(){

$('.button').on(

'click' : function(){

$('.target').toggleClass('active');

});

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

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

今回のサンプルページ

月: 2016年9月

【引き出しを増やそう！】Webデザインのインプット

痒い所に手が届く!?　Chrome機能拡張

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

jQueryを使う

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

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

発火

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

参考サイト