超簡単にモダンな感じを実現できる『Smoke』を使ってみた  


bootstrapにモダンな機能を追加してくれるsmokeを触ってみた。

![スクリーンショット 2015-05-25 15.56.19.png](https://qiita-image-store.s3.amazonaws.com/0/18932/dce2ac3b-fb84-7c1e-9cca-c8e11fa5382f.png "スクリーンショット 2015-05-25 15.56.19.png")


## 追加されるモダンな機能
![スクリーンショット 2015-05-25 15.55.00.png](https://qiita-image-store.s3.amazonaws.com/0/18932/10a9eaf0-b668-7262-26b2-46558b967f6d.png "スクリーンショット 2015-05-25 15.55.00.png")

`smoke`では

- バリデーション
- 通知
- プログレスバー
- フルスクリーン
- パネル
- ヘルパー

という機能を提供しています。
だいたい言葉どおりの機能ですが、ヘルパーがあんまりピンと来ませんでした。

どうも、フォームで入力した値を通知で知らせるっぽい？？

今日は、この中から『フルスクリーン』と『プログレスバー』を実装してみました！！


## 準備

[ダウンロードページ](http://alfredobarron.github.io/smoke/#/getting-started)の説明に従ってダウンロードしましょう。

ファイル構成はこんな感じになっています。
[jQuery](http://code.jquery.com/jquery-2.1.4.min.js)と[Bootstrap3](https://github.com/twbs/bootstrap/releases/download/v3.3.4/bootstrap-3.3.4-dist.zip)をダウンロードしていい感じに追加して下さい。


    smoke/
      ├── css/
      │   ├── smoke.css
      │   └── smoke.min.css
      ├── js/
      │   ├── smoke.js
      │   └── smoke.min.js
      └── lang/
          ├── es.js
          └── es.min.js
          ├── de.js
          └── de.min.js

`/smoke`以下に、おもむろに`html`を追加しましょう。


    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Basic template</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/smoke.min.css" rel="stylesheet">
      </head>
      <body>
        <h1>Hola Mundo!</h1>
        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/smoke.min.js"></script>
        <script src="lang/es.min.js"></script>
      </body>
    </html>


準備おわり！

## フルスクリーン

フルスクリーンボタンを設置してみる。

`html`を追加。

    <div class="panel panel-default example">
      <div class="panel-heading">
        <h3 class="panel-title">Smoke Fullscreen</h3>
      </div>
      <div class="panel-body text-center">
        <a href="#" class="btn btn-info" id="fullscreen"></a>
      </div>
    </div>

　  
`css`を追加。

    body {
      background-color: #222;
    }

    .example {
      max-width: 630px;
      margin: 50px auto;
    }
　  

`js`を追加。

    $(function(){
      $('#fullscreen').smkFullscreen();
    });


そうすると、こんな感じの画面になり、水色のボタンを押すと、、、
![スクリーンショット 2015-05-25 16.34.50.png](https://qiita-image-store.s3.amazonaws.com/0/18932/c6cb8ef0-d19d-7652-5f46-bdfaf0f553b9.png "スクリーンショット 2015-05-25 16.34.50.png")

↓どーん！

![スクリーンショット 2015-05-25 16.35.14.png](https://qiita-image-store.s3.amazonaws.com/0/18932/2dd319df-8aca-5d7c-9f02-5841485fc9d5.png "スクリーンショット 2015-05-25 16.35.14.png")

となるはずが何か画面下部が真っ白に、何でだ？？

ま、まぁフルスクリーンにはできたのでよしとしよう。

## プログレスバー

ページの上部で左から右にみょーんってなるプログレスバーをよく見かけるようになりました。

あれも、smokeなら簡単実装できます。

まずは`html`を追加。

    <div class="panel panel-default example">
      <div class="panel-heading">
        <h3 class="panel-title">Smoke Progressbar</h3>
      </div>
      <div class="panel-body text-center">
        <a href="#" class="btn btn-info" id="btnProgressBar">Start</a>
      </div>
    </div>

次に、`js`を追加。

    $('#btnProgressBar').click(function(event) {
      event.preventDefault();
      $.smkProgressBar({
        element: 'body',
        status: 'start'
      });
      setTimeout(function() {
        $.smkProgressBar({
          element: 'body',
          status: 'end'
        });
      }, 1000);
    });

`element`にプログレスバーを実装する要素を指定、`status`で`start`と`ned`を指定してコントロールするようですね。
　　  
結果はこんな感じ（静止画ですが、、、
コピペだけでプログレスバーも簡単に実装できました。

![スクリーンショット 2015-05-25 16.47.49.png](https://qiita-image-store.s3.amazonaws.com/0/18932/569dd41a-22d2-e386-a607-df1f4b613ea6.png "スクリーンショット 2015-05-25 16.47.49.png")


## おわり

`jQuery`ちょっとだけ触れるよって人でもモダンなサイトを簡単に構築できるのは凄くよいですね。


他にもいくつか機能がありますので興味ある方は[smokeのサイト](http://alfredobarron.github.io/smoke/#/)でご確認下さい。