ムカデノワラジ

ムカデノワラジ

ガジェット・Webサービス・プログラミング・エンタメについて書く雑記ブログ

MENU

フロントエンドのjavascriptライブラリ particles.jsをrailsで使用する方法

indroduction

この記事ではフロントエンドのjavascriptライブラリparticles.jsをRails Projectに導入する方法を紹介します。

particlesで描画したアニメーションはマウス位置を検知してインタラクティブに動きます。

幾何学的なアニメーションが入るだけでウェブサイトがそれっぽくなるのでフロントエンドデザインの手間を省きたいならおすすめです。

※基本的には外部のJSライブラリをRuby on Rails プロジェクトに導入するのと同じ方法でできます。

content

particles.jsのgithubページReadmeを見るとrails-assets-particles.jsというgemがあるそうですが、動きません。

particles.js公式のgem'rails-assets-particles.js'はなぜか動かないので公式ページからファイルを手動でダウンロードして、ファイルの中にあるparticle.min.jsを

vendor/assets/javascripts配下に置きます。

particles.jsというファイルもありますが、特段の事情がないならminifyしたparticles.min.jsを使いましょう。

minifyされたファイルのほうが同じ機能を残したまま容量を節約できます。

 

ファイルはこちらの「download」から取得できます。

particles.js - A lightweight JavaScript library for creating particles

ちなみに、このサイトで各種パラメター(色、サイズ、速度など)を調整してアニメーションがどうなるか確認できます。

 

particles.jsのアニメーションを表示したいページのviewの下のほうに以下を追加しprecompileした外部jsを読み込みます。

下のほうにしないとページ読み込み時にparticlesjsを描画するDOMが生成されていなくてエラーが起きる場合があります。

<%= javascript_include_tag "particles.min"   %>

hamlなら以下のようになります。

=javascript_include_tag "particles.min"

 

particles.jsのアニメーションを表示したい場所を以下で指定

particlesjsでアニメーションを表示したい場所にid="particles-js"を付与したdiv要素を追加します。

 

<div id='particles-js'>

haml

 #particles-js

 

config/initializers/assets.rbに以下を追加

これでparticles.min.jsがprecompileされます。

この部分がないとrails sでサーバーを起動してlocalhostにアクセスしたときにエラーが出ます。

Rails.application.config.assets.precompile = %w( particles.min.js )

 

#particles-jsにparticles.jsのアニメーションを描画

<script type='text/javascript'>

particlesJS('particles-js',hash) 

</script>

particlesJS(arg1,arg2)

arg1はparticlesを表示するdiv要素のidを指定します。

arg2はハッシュでparticles描画時の各種パラメターを調整できます。

※1 hashはparticles.jsonの中身と同じものでよい

particlesJS('prticles-js',{

  "prticles":{

    "number":{

      "value":100,

      "density":{

         ......

        }

      }

    "color":{

        ......

     }

   以下略

    }

  })

※2 javascriptはhtml直書きでもファイルを作っても良い。つまり<file_name>.jsをつくってその中にparticlesJS(arg1,arg2)を書いても良い。

※3 particlesJS.load('particles-js',url)を使えば外部のparticles.jsonを読み込んで使える

 

Ruby on Rails を利用したwebアプリにplotly.jsを使いグラフを描画する - ムカデノワラジ