先日調べた通り、Rails + Materializeがよさそうなのでウェブページを作ってみます。
CSSのデザイン部分はMaterializeがやってくれるのでやらないといけないパートはJSの部分とサーバーサイドの入出力だけです。
JavaScriptもMaterializeがJqueryを使っているのでそのまま慣れ親しんだJqueryを使い続けます。
今回AJAX通信でのサーバー連携は外してアニメーションのデモだけ作成します。
GettingStarted
のサイトにサンプルが豊富に揃っているので一貫してHTMLのコピペのみでいけそう。
覚える事はあまり無いです。色とか線の太さとかデザイナーチックな事は気にしなくていいので自分好みです。
Rails用のGem利用方法
こちらも書いてある通りにやれば動きましたので安定感→高の印象。
ただ、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に追記
gem 'materialize-sass'
1.2 モジュールインストールとコントローラ作成
[admin@localhost my1stRails]$ bundle install --path vendor/bundle
[admin@localhost my1stRails]$ rails generate controller matelpage
1.3 matelpage.scssを編集
@import "materialize/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize';
テーマカラーを青くします。デフォルトは赤っぽい色です。
1.4 application.jsを編集
//= require jquery
//= require materialize-sprockets
読み込みたいJSを指定するそうです。
こちらの説明が分かりやすいです。
1.5 routers.ebに追記
get 'matelpage/index' => 'matelpage#index'
1.6 matelpage_controller.rbに追記
class MatelpageController < ApplicationController
def index
end
end
1.7 index.html.erbに追記
この中のコードを適当にコピペ!
でとりあえず立派なページができます。
<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. 作ってみよう
とりあえず、コンポーネントの中のカードが気に入ったのでこれで遊びたいと思います。
時計をクリックするとカードが時計回りに回るだけです。
レイアウト崩れなど起きずとても楽に実装できました。
元の画像が壁紙サイズなので最初の読み込みだけ遅いです。
デモをみる
2.1 作り方
アニメーションは素直にJQueryの.animate()を使っています。
レイアウトは、
第一階層: 親DIV
└第二階層1: キャンバス(canvas)
└第二階層2: Cardを子要素として入れる用のDIV
となっています。
第二階層1,2が完全に重なるようにレイアウトしておきます。
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