bata's log

フロントエンド系のTipsとかメモ

CSS3 アニメーションで要素を表示・非表示

CSS3

iOS用のWEBアプリ制作のためのメモ。
iOS専用でCSS3アニメーションが使用できるので、アニメーション部分をCSS3で作ってJavaScriptでトリガーを制御します。

HTML

.onが使いたいのでjQueryを読み込んでおく。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="inc/css/common_sc.css" />
   <script type="text/javascript" src="inc/js/library/jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="inc/js/common.js"></script>
</head>
<body class="body">

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<div>
    <button>表示/非表示</button>
</div>

</body>
</html>

CSS

表示、非表示のアニメーションをそれぞれ設定します。
非表示の場合はデフォルトの値をtransform: scale(0, 0);にしないとアニメーション後に再度元のサイズで表示されてしまいます。

.box{
    display: none;
    margin: 20px;
    width: 100px;
    height: 100px;
    background-color: #ff0000;
}

.anime_in .box,
.anime_out .box{
    display: inline-block;
}


/**
 * webkit
 */
.anime_in .box{
    -webkit-animation: anime_in 0.5s;
}

.anime_out .box{
    -webkit-animation: anime_out 0.5s;
    -webkit-transform: scale(0, 0);
}

@-webkit-keyframes anime_in {
    0% { -webkit-transform: scale(0, 0); }
    50% { -webkit-transform: scale(1.3, 1.3); }
    100%{ -webkit-transform: scale(1, 1); }
}

@-webkit-keyframes anime_out {
    0% { -webkit-transform: scale(1, 1); }
    50% { -webkit-transform: scale(1.3, 1.3); }
    100%{ -webkit-transform: scale(0, 0); }
}

JavaScript

とりあえず簡単にclassを付け替えるトリガーを設定。
classを付け替えるタイミングで、それぞれのclassに設定したCSS3アニメーションが発火します。

$(function(){

    $(window).on('load',function(){
        $('#container').addClass('anime_in');
    });

    $('button').on('click',function(){
        $('#container').toggleClass('anime_out').toggleClass('anime_in');
    });

});

実際に動かすとこんな感じ

PHPでRSSを取得しJavaScriptで表示する

PHP JavaScript

RSSを取得してサイト内に表示する時、普通のリスト表示くらいなら全部PHPでやってしまえば良いのですが、インタラクティブな表現とかをする時はJavaScriptで書き出したほうが利用しやすいです。

PHP

<?php
    $RSS = "http://front-end.hatenablog.jp/feed";
    $XML = simplexml_load_file ($RSS);
    $JSON = json_encode($XML);
?>

RSSを取得して、json_encode を使ってPHPの配列をJSON形式に変換します。

Javascript

var json = <?php echo($JSON); ?>;
var data = json.entry;
$.each(data,function(i){
    document.write(data[i].title + '<br />');
    document.write(data[i].link['@attributes'].href + '<br />');
    document.write(data[i].updated + '<br /><br />');
});

PHPで生成したJSON形式のデータを変数に格納します。
JSONの構造に合わせて取り出したい要素を指定すればOKです。

全体

<?php
    $RSS = "http://front-end.hatenablog.jp/feed";
    $XML = simplexml_load_file ($RSS);
    $JSON = json_encode($XML);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="inc/js/library/jquery-1.10.2.min.js"></script>
</head>

<script type="text/javascript">
   var json = <?php echo($JSON); ?>;
   var data = json.entry;
   $.each(data,function(i){
       document.write(data[i].title + '<br />');
       document.write(data[i].link['@attributes'].href + '<br />');
       document.write(data[i].updated + '<br /><br />');
   });
</script>
<body>
</body>
</html>

jQueryなしで要素を取得してイベントを加える

JavaScript

普通に仕事してると、jQueryなしの環境ってほとんど無いし、そもそも効率がわるい。

しかも、自分のスタートがJavaScript == jQueryみたいな環境だったので、実際にjQueryなしでJavaScriptを書く機会が殆どなかった。
その後一から勉強しなおしたので、一応知識としては習得したが、やはり実際の現場で、document.getElement～～～とか書く機会はほとんどない。

練習にDOMエレメントの取得とイベントの設定を書いてみた。

関数

function AddEventAll(el,event,func){
    //要素を取得
    var $el = document.querySelectorAll(el);

    //要素の数を取得
    var len = $el.length;

    //各要素にイベントを設定
    for (var i = 0; i < len; i++){
        $el[i].addEventListener(event, func);
    };
}

実行

//DOMの構築が終わってから実行
window.onload = function(){
    AddEventAll('.hoge', 'click', hoge);
}

//イベントが発火すると実行される関数
function hoge(e){
    e.preventDefault();
    console.log('click!');
}

'セレクター名','イベント名',関数を入れて実行します。
ここでは関数は別に切り出しています。

jQueryの感覚で書くと？？？になる箇所

  • 要素を取得してもそのままイベントを加えるとエラー
  • DOM構築が完了してから関数を実行しないと要素が取得できない

jQueryって本当に便利ですね…

Sassのビルドにバッチファイルを利用する

Sass

Sassをビルドする時に、コマンドラインのSass --watchで監視してますが、最初にいちいちコマンドを打つのが面倒なので、バッチファイルで実行します。
Windowsの場合は簡単だったのですが、MACではまった事があったので詳細をメモ。

Windowsの場合

build.bat

cd /d %~dp0
sass --watch scss:css --sourcemap --style compressed --no-cache

Windowsの場合は簡単で、ファイル名.batのファイルを作ってそこにコマンドを書いてやるだけ。
このファイルを該当の場所に置いて実行すればOKです。

MACの場合

build.command

#!/bin/bash
MY_DIRNAME=$(dirname $0)
cd $MY_DIRNAME
sass --watch scss:css --style compressed --no-cache --sourcemap

MACの場合は多少面倒な設定が必要となります。

ファイル名.commandのファイルを作って、コマンドを書いてやるところまでは同じです。

ただ、このまま実行するとファイルのアクセス権限がない為エラーが出てしまいます。
ターミナルからファイルの実行権限を変更してやる必要があります。

ファイルのアクセス権限の変更

例
ls -l build.command
-rw-r--r--@ 1 user user 66 3 22 :00 build.command

-rw-r--r--@の部分が
-rwxr--r--@になるようにコマンドを実行してやります。

$ chmod u+x build.command

簡単に言うとこのファイルに実行可能な権限を与えてやるということです。
詳細が知りたい方は下記参照。
・Linuxのアクセス権限について
Linuxコマンド逆引き大全 - 【 アクセス権限とは 】：ITpro

これでファイルが実行できるようになります。 後はWindows同様該当の場所に置いて実行するだけ。

この方法は下記のサイトを参考にさせて頂きました。
そろそろ始めてみる macでバッチファイル実行

XAMPP for Mac の VirtualHost設定で403エラー

サーバー

Apache2.4以降でバーチャルホストを設定するときにハマりまくったのでメモ。

解決方法は下記を参考に

<VirtualHost *:80>
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/"
    ServerName localhost
    ErrorLog "logs/error_log"
    CustomLog "logs/access_log" common

    <Directory "/Applications/XAMPP/xamppfiles/htdocs/" >
        AddDefaultCharset utf-8
        AllowOverride All
        Options +Includes +FollowSymLinks
        Require all granted
    </Directory>
</VirtualHost>

http://www.loftways.co.jp/?author=1

詳細な仕組みはよくわかりません…
サーバーの勉強もしないとなあ。