ParticleJS+Bootstrapをざっくり使用してみた #Bootstrap

これはマイネットエンターテイメント Advent Calendar 12日目の記事です。

はじめに

こんにちは。
自分のWebサイトに改良を・・と思い何かをテーマに題材を探していたところ
・雪のパーティクルを簡単に表示させたい。
・Bootstrapは何が便利なんだろうか。
という単純にふと思った事からParticleJS,Bootstrapについて調べようと思いました。
内容的には短時間でハイクオリティーの物を作成する必要があるという時に役に立つかもしれません…！

ParticleJS

ICS MEDIAさんから公開されているライブラリーになります。
パーティクルをフルスクラッチで作成すれば良いと思いましたが今回は簡単に綺麗なパーティクルを簡単に表示させたいと思い検索し辿り着きました。

Bootstrap

BootstrapはHTML・CSSデザインテンプレートになります。
かなり有名かと思います、私は聞いたことがありましたが実際使ったことが無かったので今回のアドベントカレンダーの機会があったのでざっくり調べて使ってみました。

ParticleJSの導入

ParticleJSの導入についてはこちらに詳細に記載されているので参考にして頂ければ問題は無いと思います。一応私の方からざっくり説明します。

Particle Developでパーティクルをデザイン

こちらのParticle Developを使用してデザインしJSONで形式のファイルをダウンロードします。
このエディタ上で色々パーティクルを簡単に編集できて実際に表示されている内容がそのままwebに組み込めます。

コーディング

私が作成した内容全文載せておきます。
コピペしてブラウザで動かしてみると私が作成した雪のパーティクルが表示されるかと思います。
1. ライブラリーを組み込む
2. canvasの準備
3. 作成したJSONの設定、パーティクルの準備

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>piano</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- CreateJSのライブラリー読み込み -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<!-- パーティクルシステムのライブラリー読み込み -->
<script src="https://cdn.rawgit.com/ics-creative/ParticleJS/release/0.1.3/libs/particlejs.min.js"></script>

<script>
  var particleSystem = null;
  var stage = null;

  window.addEventListener("load", function () {

    stage = new createjs.Stage("myCanvas");

    particleSystem = new particlejs.ParticleSystem();

    stage.addChild(particleSystem.container);

    // パーティクルの設定を読み込む
    particleSystem.importFromJson(
      // パラメーターJSON
      {
        "bgColor": "#00000",
        "width": 611,
        "height": 276,
        "emitFrequency": 300,
        "startX": 447,
        "startXVariance": "668",
        "startY": -14,
        "startYVariance": "378",
        "initialDirection": "192.5",
        "initialDirectionVariance": "148.5",
        "initialSpeed": "6.4",
        "initialSpeedVariance": "0",
        "friction": 0.0555,
        "accelerationSpeed": "0.0695",
        "accelerationDirection": "87.7",
        "startScale": "0.02",
        "startScaleVariance": "0.63",
        "finishScale": "0",
        "finishScaleVariance": "0",
        "lifeSpan": "136",
        "lifeSpanVariance": "500",
        "startAlpha": "0.51",
        "startAlphaVariance": "1",
        "finishAlpha": "0",
        "finishAlphaVariance": "0",
        "shapeIdList": [
            "blur_circle"
        ],
        "startColor": {
            "hue": "0",
            "hueVariance": "0",
            "saturation": "0",
            "saturationVariance": 0,
            "luminance": "100",
            "luminanceVariance": "47"
        },
        "blendMode": true,
        "alphaCurveType": "0"
    }
      // パラメーターJSONのコピー＆ペースト ここまで---
    );

    <!-- 更新処理 -->
    createjs.Ticker.framerate = 60;
　　　　　　　　createjs.Ticker.timingMode = createjs.Ticker.RAF;
    createjs.Ticker.addEventListener("tick", handleTick);
  });

  function handleTick() {

    particleSystem.startColor.hue += 2;
    if (particleSystem.startColor.hue >= 360) {
      particleSystem.startColor.hue = 0;
    }

    particleSystem.update();

    stage.update();
  }
</script>

<style>
  canvas {
    background-color: black;
  }

  * {
    margin: 0px;
    padding: 0px;
  }

</style>
<link rel="shortcut icon" href="">
</head>
<body>
　　　　<!-- Canvas -->
  <canvas width="960" height="240" id="myCanvas"></canvas>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

参考

Bootstrapの導入

Bootstrapの公式サイトのダウンロードのDownload Bootstrapからダウンロードします。
解答したファイルをcss/fonts/jsを編集したいディレクトリにコピーします。
先ほどのダウンロードした公式サイト下にある雛型のBasic templateを使用して開発するとすぐに開発することができます。(langをjpにだけ変更しました）

触ってみた

1.Grid systemが便利

Grid systemを使用するとレスポンシブWebページを作成することができました。実際cssでやることはできますが、用意されているオプションを使用すると色々なパターンを簡単に実装できそうです。

<div id="header" class="container" style="background: blue;">header</div>
  <div class="container">
    <div class="row">
      <div class="col-sm-3" style="background: gray;">s1</div>
      <div class="col-sm-6" style="background: black;">s2</div>
      <div class="col-sm-3" style="background: gray;">s3</div>
    </div>
  </div>
<div id="footer" class="container" style="background: blue;">footer</div>

↑Grid systemサンプル

2.ComponentsのGlyphicons

Available glyphsの種類豊富で使い勝手が良さそう。色々なサイトでBootstrapの有料テンプレートを使用しているサイトがたくさんあるので見たことがあるかもしれませんね。

3.いろいろある

初心者が知るべき機能については一通り触ってみましたが、Webページの作成する時にみるButtonデザインだけでも豊富なデザインパターンが用意されています。これは絵をかけない私には助かる機能。

cssで用意されている邪魔なパラメーターがあった時は打ち消すcssを記入する必要がありました。（初心者視点）拡張性が高く色々プラグインなどもあるのでもう少し調べてみたいと思います。

まとめ

ざっくり説明ですみませんでした。
ParticleJSの導入は簡単でしたね、むしろこのライブラリを自分で作れるようにならなければ。
2016年に流行ったフロントエンド周りの技術がキャッチアップ不足なので、年内に流行ったことは今年中に一通り把握しよう…！そういえば去年投稿してから一度も投稿していませんでしたね・・インプットしたらアウトプット。
以上になります。