Rails + Materializeでウェブページを作ってみる

[先日](http://qiita.com/MariMurotani/items/c0d37a9636e96f947a06)調べた通り、Rails + Materializeがよさそうなのでウェブページを作ってみます。
CSSのデザイン部分はMaterializeがやってくれるのでやらないといけないパートはJSの部分とサーバーサイドの入出力だけです。
JavaScriptもMaterializeがJqueryを使っているのでそのまま慣れ親しんだJqueryを使い続けます。
今回AJAX通信でのサーバー連携は外してアニメーションのデモだけ作成します。

[GettingStarted]
(http://materializecss.com/getting-started.html)
のサイトにサンプルが豊富に揃っているので一貫してHTMLのコピペのみでいけそう。
覚える事はあまり無いです。色とか線の太さとかデザイナーチックな事は気にしなくていいので自分好みです。

[Rails用のGem利用方法](https://github.com/mkhairi/materialize-sass)
こちらも書いてある通りにやれば動きましたので安定感→高の印象。
ただ、CDNを利用する方法もあるので、実運用している所に組み込むのなら、下記の方法でいいかなと思います。

```
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
```          

# 1. セットアップ
|端末|バージョン|
|:-:|:-:|
|Ruby|ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-linux]|
|Rails|Rails 5.0.0|
|Materialize|sass-3.4.22|

## 1.1 Gemfileに追記
```text:Gemfile
gem 'materialize-sass'
```

## 1.2 モジュールインストールとコントローラ作成
```
[admin@localhost my1stRails]$ bundle install --path vendor/bundle
[admin@localhost my1stRails]$ rails generate controller matelpage
```

## 1.3 matelpage.scssを編集
```scss:my1stRails/app/assets/stylesheets/matelpage.scss
@import "materialize/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize';
```
テーマカラーを青くします。デフォルトは赤っぽい色です。

## 1.4 application.jsを編集
```js:app/assets/javascripts/application.js
//= require jquery
//= require materialize-sprockets
```

読み込みたいJSを指定するそうです。
[こちら](http://qiita.com/Oakbow/items/2e712e05bb4bbf68faf5)の説明が分かりやすいです。

## 1.5 routers.ebに追記
```
get 'matelpage/index' => 'matelpage#index'
```

## 1.6 matelpage_controller.rbに追記
```ruby:my1stRails/app/controllers/matelpage_controller.rb
class MatelpageController < ApplicationController
  def index

  end
end
```

## 1.7 index.html.erbに追記
[この中](http://materializecss.com/badges.html#!)のコードを適当にコピペ！
でとりあえず立派なページができます。

```my1stRails/app/views/matelpage/index.html

  <div class="collection">
    <a href="#!" class="collection-item">Alan<span class="badge">1</span></a>
    <a href="#!" class="collection-item">Alan<span class="new badge">4</span></a>
    <a href="#!" class="collection-item">Alan</a>
    <a href="#!" class="collection-item">Alan<span class="badge">14</span></a>
  </div>

```

# 2. 作ってみよう
とりあえず、コンポーネントの中の[カード](http://materializecss.com/cards.html)が気に入ったのでこれで遊びたいと思います。
時計をクリックするとカードが時計回りに回るだけです。
レイアウト崩れなど起きずとても楽に実装できました。
元の画像が壁紙サイズなので最初の読み込みだけ遅いです。

[デモ](http://mydemos1-1223107232.ap-northeast-1.elb.amazonaws.com:3001/matelpage/index)をみる

![スクリーンショット 2016-08-17 15.10.28.png](https://qiita-image-store.s3.amazonaws.com/0/89997/b03f5341-3a85-ccff-3e85-5791dbed666c.png)

## 2.1 作り方
アニメーションは素直にJQueryの.animate()を使っています。
レイアウトは、
　　第一階層: 親DIV
　　  └第二階層1: キャンバス(canvas)
　　  └第二階層2: Cardを子要素として入れる用のDIV
となっています。
第二階層1,2が完全に重なるようにレイアウトしておきます。

![スクリーンショット 2016-08-17 15.18.50.png](https://qiita-image-store.s3.amazonaws.com/0/89997/f01ec576-f120-ffe6-3a7e-841540551970.png)
1.上のような感じでキャンバスに最初に楕円を書いて座標を配列にとっておきます。
　位置決めだけしたら、canvasは消していいです。
2.どの角度の時にCardをプロットするか決めます。
3.CardのオブジェクトをCloneして第二階層2にどんどん入れていきます。
4.3で配列にオブジェクトをとっておいて、ボタンがクリックされたら回します。

## 2.2 動作確認

|端末|ブラウザ|バージョン|
|:-:|:-:|:-:|
|MAC|Chrome|バージョン 52.0.2743.116 (64-bit)|
|MAC|Safari|バージョン 9.1.2|
|MAC|FireFox|バージョン 47.0.1|
|WIN|Chrome|バージョン 52.0.2743.116 (64-bit)|
|WIN|IE|バージョン 11.545.10586.0|

全部問題無いです


リファクタリングはどうやってやるかちょっと悩んでます。
JSのキレイなコードをいかに書くかはちょっと課題ですね。
http://qiita.com/k4zzk/items/11e5dbd53cb93edb8b4d