Re:ゼロから始める爆速コーディング生活（フロントエンド実践編）

前回：[Re:ゼロから始める爆速コーディング生活](http://qiita.com/teradonburi/items/cbb8353a7e5043b087fd)
~~前回みなくてもなんとかなるかも~~

gulpfile.jsファイル周り色々更新しました。
今回使うテンプレはgitに置いてます。
https://github.com/teradonburi/htmltemplate.git

# とりあえずサクッと動かす

* gulp(ファイル修正時に画面リロード)
* snippetsで高速コーディング(Bracketsエディタ使います)
* less(cssにコンパイル)

次のコマンドでダウンロードします。
NodeJSを使っているので入れてない人はNodebrew経由でインストールしましょう。
バージョン管理に関して最近はNVMよりもNodebrewの方が新しいバージョン入るのでこちらのほうがいいかも
NVMを入れてた人はアンインストールして乗り換えましょう
http://qiita.com/sinmetal/items/154e81823f386279b33c

```
$git clone https://github.com/teradonburi/htmltemplate.git
$echo "-----------NodeJSインストール---------"
$curl -L git.io/nodebrew | perl - setup
$export PATH=$HOME/.nodebrew/current/bin:$PATH
$nodebrew install-binary v6.4.0
$nodebrew use v6.4.0
$echo "-----------ここまで-----------"
$echo "-----------ここからはNodeJSのモジュールをインストール-----------"
$npm install -g gulp@3.9.1 node-inspector 
$npm install
```

Windowsの人はNodistで入れましょう
参考：[nodistでNode.jsをバージョン管理](http://qiita.com/satoyan419/items/56e0b5f35912b9374305)

Bracketsのインストールはこちら
http://brackets.io/

Bracketsインストール後、snippetsプラグインをインストールします。
snippetsは記念品という意味で独自にプログラムの部品を登録して特定のキーワードで展開することができます。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/55077/ea55f79e-4ba9-85cb-e93e-f7062365e411.png)


インストール後、電球アイコンをクリックして、Settings項目にてフォルダ内のexports-snippets.ymlをインポート
![2.png](https://qiita-image-store.s3.amazonaws.com/0/55077/29079dc7-0468-cb8a-6561-683432922c3d.png)


Bracketsメニュー欄のファイルからコマンドラインショートカットをインストールします。
<img width="361" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/34ad58d4-1ba7-3894-3e62-1825cd8ab5f3.png">


次のコマンドでブラウザとBracketsが開きます（さらにWebサーバも起動します）。

```
$gulp
```

Windowsの人は動かんかもなのでその場合はgulpfile.jsの次の箇所をコメントアウトして（Mobileブラウザでのリロード用）
Ctrl+C→gulpで再起動してください。

```
    // Browser livereload
    stream = gulp.src('./')
        .pipe(webserver({
        //host: '0.0.0.0', // コメントアウト
```

index.html,main.less（とapp.js）のいずれかを編集して保存するとブラウザがリロードします。
![masonry.gif](https://qiita-image-store.s3.amazonaws.com/0/55077/532bae5d-0adf-d27b-74ca-6314b17b2439.gif)


HTML,JavaScript,lessに多数snippetsを登録してあるので色々いじってみてください
登録済みのsnippetsはsnippetsプラグインから確認、編集ができます。
![4.png](https://qiita-image-store.s3.amazonaws.com/0/55077/c29b711d-f00c-16de-78ed-a568913b3c27.png)


以下、私が作ったいくつか便利なsnippetsを紹介します。

# 画面配色
一般的にベースカラー（７５％）、メインカラー（２０％）、アクセントカラー（５％）
の割合で使用するといいとされています。

次のような使い分けをするとよいらしいです。
ベースカラー：背景色
メインカラー：サービスや商品のテーマの色
アクセントカラー：ボタンなどの目立たせたい要素

参考：[WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」](http://www.m-hand.co.jp/design/4002/)

main.lessにて変数で定義してあります。

```main.less
@base_color: #ffffff;// ベースカラー:75%（背景色）
@main_color: #0088ff; // メインカラー:20%（テーマ色）
@accent_color:spin(@main_color, 180);// アクセントカラー:5%（メインカラー色相の逆位相、もしくは黒、白などメインカラーに対して浮く色）
@support_color:#e0e0e0; // ４色目としてグレーなども使いやすい
```


# レイアウト
flexboxを使用しております。
下記参考にさせていただきました。
参考：[floatより辛くない「flexbox」でざっくりレイアウト](http://qiita.com/hashrock/items/939684b9207dbab1d59e)

main.lessの次の部分が影響

```main.less
/* flexbox layout */
@header_height:7rem;
@footer_height:3rem;
@sidebar_width:15rem;
.box{
    min-height: 100vh;
    height: 100%; /* for IE11 */
    .flex-display();
    .flex-direction(column);
}
.header{
    height: @header_height;
    background: @support_color;
}
.wrapper{
    .flex-display();
    .flex(1);
    height: 100%; 
}
.left{
    width: @sidebar_width;
    background: @main_color;
}
.contents{
    .flex(1);
    background: @base_color;
}
.right{
    width: @sidebar_width;
    background: @main_color;
}
.footer{
    height: @footer_height;
    background: @support_color;
}


/* flexbox masonry */
@masonry-width:33.3%;
@masonry-height: 100vw;
.masonry{
    .flex-display();
    .flex-direction(column); // 縦並び
    .justify-content(flex-start); // 左寄せ 
    .flex-wrap(wrap); // 折り返し
    height: @masonry-height; // vw=ビューポートの横幅、３列になるように調整 

    .item{
        width: @masonry-width; // 3列
        img{
            width: 100%;
        }
    }
}
```

## col-two
２列レイアウト

```index.html
        <div class="wrapper">
            <div class="left">
                
            </div>
            <div class="contents">
                
            </div>
        </div>
```

![5.png](https://qiita-image-store.s3.amazonaws.com/0/55077/d960db83-6f55-23d6-0e6c-65d89d4329d8.png)


## row-three
ヘッダー・フッター付きレイアウト

```index.html
        <div class="box">
            <div class="header"></div>
            <div class="contents"></div>
            <div class="footer"></div>
        </div>
```
![6.png](https://qiita-image-store.s3.amazonaws.com/0/55077/483dc228-daff-c1a0-ac3e-f4439deeb987.png)


## holy-grail
サイドバー、ヘッダーフッター付きレイアウト

```index.html
     <div class="box">
            <div class="header">
            </div>
            <div class="wrapper">
                <div class="left">
                </div>
                <div class="contents">
                </div>
                <div class="right">
                </div>
            </div>
            <div class="footer">
            </div>
    </div>
```
![7.png](https://qiita-image-store.s3.amazonaws.com/0/55077/da7a547f-6e60-de9d-abc7-6a631396dffd.png)


## masonry
タイルレイアウト

```index.html
    <div class="masonry">
            <div class="item">
                <img src="https://unsplash.it/600/400?random" />
            </div>
            <div class="item">
                <img src="https://unsplash.it/600/600?random" />
            </div>
            <div class="item">
                <img src="https://unsplash.it/720/460?random" />
            </div>
            <div class="item">
                <img src="https://unsplash.it/800/400?random" />
            </div>
            <div class="item">
                <img src="https://unsplash.it/480/700?random" />
            </div>
            <div class="item">
                <img src="https://unsplash.it/680/420?random" />
            </div>
            <div class="item">
                <img src="https://unsplash.it/740/480?random" />
            </div>
            <div class="item">
                <img src="https://unsplash.it/840/440?random" />
            </div>
            <div class="item">
                <img src="https://unsplash.it/640/380?random" />
            </div>
            <div class="item">
                <img src="https://unsplash.it/500/680?random" />
            </div>
     </div>
```
![8.png](https://qiita-image-store.s3.amazonaws.com/0/55077/7ab9e8bd-b058-1c97-c81d-e163cfd3ae00.png)


# アニメーション、半透明、グラデーション、角丸、影

## @ani,@key,@tra,@opa,@gra-li,@gra-ci,@br,@box-sha
main.lessに追記

```main.less
.animbox{
    background-color: red;
    .animation(testanim 3s linear infinite);
    width: 10rem;
    height: 10rem;
    .box-shadow(10px 10px 10px 10px rgba(0,0,0,1));
}

.keyframes(testanim,{
    0%, 100% { 
        .transform(translate(10rem,10rem) rotate(0deg) scale(1.0) );
        .opacity(1.0); 
        .linear-gradient(45deg,red, orange,yellow,green,blue,purple);
        .border-radius(0.0rem);
    }
    50% {  
        .transform(translate(5rem,5rem) rotate(180deg) scale(0.5) );
        .opacity(0.5);
        .radial-gradient(center,circle,red, orange,yellow,green,blue,purple);
        .border-radius(1.5rem);
    }
});
```

html側

```index.html
        <div class="animbox">            
        </div>
```
![anim.gif](https://qiita-image-store.s3.amazonaws.com/0/55077/66877d5f-66ac-af1f-bd7a-aba15932ff6b.gif)


# DOM操作

下記参考にしました。
[You Don't Need jQuery](http://qiita.com/tatesuke/items/b9548dd484b01b139b74)

## eq,ec,ecl,eaf,ebe,epr,eap,eqa,ev

scriptタグ内に記述（JavaScript）、DOM作成、DOM検索、DOM追加、DOMイベント付与

```index.html
<script>
         window.onload = function (e) {

            var body = document.querySelector("body");
            for(var i=0;i<10;++i){
                var button = document.createElement("button");
                button.innerHTML = 'button' + i;
                button.classList.add("btn");
                body.insertAdjacentHTML("beforeend",button.outerHTML);                  
            }
            var buttons = document.querySelectorAll(".btn");
            for(var i=0;i<buttons.length;++i){
                buttons[i].addEventListener("click",function(e){
                    var button = e.target;
                    alert(button.innerHTML);
                });
            }
        }
</script>
```

<img width="524" alt="btn.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/a2197cb1-9445-fdae-a01e-4e69bb36662a.png">

# 通信

scriptタグ内に記述（JavaScript）、Ajax通信

## xhr

```index.html
<script>
         window.onload = function (e) {

            var xhr = new XMLHttpRequest();
            xhr.open("GET", "http://localhost:3000/api", true);
            xhr.onload = function (e) {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        console.log(xhr.responseText);
                    } else {
                        console.error(xhr.statusText);
                    }
                }
            };
            xhr.onerror = function (e) {
                console.error(xhr.statusText);
            };
            xhr.send(null);
        }
</script>

```

# オーディオ再生

## webaudio

scriptタグ内に記述（JavaScript）、WebAudio


```
<script>
         window.onload = function (e) {
            
            window.AudioContext = window.AudioContext || window.webkitAudioContext;  
            var context = new AudioContext();
            
            // Audio用のbufferを読み込む
            var getAudioBuffer = function(url, fn) {  
                var req = new XMLHttpRequest();
                // arraybufferを指定
                req.responseType = 'arraybuffer';
            
                req.onreadystatechange = function() {
                    if (req.readyState === 4) {
                        if (req.status === 0 || req.status === 200) {
                            // array buffer を audio buffer に変換
                            context.decodeAudioData(req.response, function(buffer) {
                                // コールバックを実行
                                fn(buffer);
                            });
                        }
                    }
                };
            
                req.open('GET', url, true);
                req.send('');
            };
            
            var playSound = function(buffer) {  
                var source = context.createBufferSource();
                source.buffer = buffer;
                source.connect(context.destination);
                // 再生
                source.start(0);
            };

            getAudioBuffer("test.mp3",playSound);
      
        };
</scrupt>
```

# ビデオキャプチャ

## webrtc

scriptタグ内に記述（JavaScript）、WebRTC

```index.thml

<script>
        window.onload = function (e) {

            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            var constraints = {audio: true, video: true};
            var video = document.querySelector("video");
            function successCallback(stream) {
                window.stream = stream;
                if (window.URL) {
                    video.src = window.URL.createObjectURL(stream);
                } else {
                    video.src = stream;
                }
            }
            function errorCallback(error) {
                console.log("navigator.getUserMedia error: ", error);
            }
            navigator.getUserMedia(constraints, successCallback, errorCallback);

        };
</script>
    <video src="" width="640" height="480" autoplay></video>
```


# おまけ

## module_doraemon
SVGどらえもん
[お借りしました](http://satoshi.blogs.com/life/2010/09/doraemon.html)。
![dora.png](https://qiita-image-store.s3.amazonaws.com/0/55077/1931dbb9-8959-0153-5336-e683607ad174.png)

## module_rpg
HTML新規ファイルで展開
ドラクエ的なマップ
![rpg.png](https://qiita-image-store.s3.amazonaws.com/0/55077/333e6d2e-755d-f33d-361a-ce9bdd7cad13.png)


## module_shooting
HTML新規ファイルで展開
シューティングもどき
![shooting.png](https://qiita-image-store.s3.amazonaws.com/0/55077/1d8b938f-2100-6d38-0c6c-eef3d61af674.png)