rails フロントエンド開発 メモ

railsの基本

slim上の表記

• =で書かれた行は、rubyの出力結果を表示します
• -で書かれた行は、rubyのコードを実行しますが、内容はファイルに主力されません
• each do |xxxx|
  • ループ処理、xxxxがループで出力される内容

ディレクトリ

ルートディレクトリ

• app
  • htmlファイルや、モデル層などの主要なプログラムが置かれる箇所
• misc
  • rails以外の設定ファイルなど
• public
  • 外からもアクセスできる公開ディレクトリ

.
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
├── bin
├── config
├── config.ru
├── db
├── lib
├── log
├── misc
├── public
├── spec
├── tmp
├── vendor
└── wordpress

app

• admin
  • 管理画面系
• assets
  • stylesheetやjavascript、画像など
• views
  • htmlファイルが置かれる

app
├── admin
├── assets
├── controllers
├── helpers
├── jobs
├── mailers
├── models
├── uploaders
└── views

app/views

• layouts
  • headerやfooterなどのテンプレート的なhtmlが置かれる
• www
  • テンプレートに埋め込む、各ページの内容のhtml

views/
├── admin
├── api
├── devise
├── layouts
└── www

app/views/layout

• application.html.slim
  • 大元になるhtmlファイルのテンプレート、scriptの呼び出しなどもここにまとめる

├── application.html.slim
├── application_smart_phone.html.slim
├── pc
│   ├── _footer.html.slim
│   ├── _header.html.slim
│   └── _sidebar.html.slim
└── smart_phone
    ├── _footer.html.slim
    ├── _header.html.slim
    └── _sidebar.html.slim

app/views/www

• home
  • トップページ関連
• article
  • 記事詳細関連

views/www/
├── article
│   ├── show.html.slim
│   └── show_smart_phone.html.slim
└── home
    ├── index.html.slim
    └── index_smart_phone.html.slim

pcとスマートフォンのファイル名について

pc用のファイル名に、_smart_phoneというプレフィックスをつけてください。
同じディレクトリにファイルを格納してください

views/www/home/
├── index.html.slim
└── index_smart_phone.html.slim

ファイルを分割する方法

下記のように、application.html内でヘッダーを呼び出したりと、ファイルを分割したい場合

application.html
_header.html.slim

呼び出したいファイル

ファイル名の前に_（アンダーバー）をつけてください
中身はそのまま書いて大丈夫です

下記は、/www/home/以下に作成した場合です

_header.html.slim

呼び出し側の動作

呼び出す際は、_は不要です
拡張子もいりません

= render('www/home/header') 

変数を使用する場合

変数を使用するテンプレートを作成する場合は、渡邊に投げてください

他と共通で使用するテンプレートの場合

例えば、article以外のページと共通で使用する分割するhtmlがあった場合（サイドバーなど）は、下記のディレクトリにいれてください

app/views/www/shared

railsの問題になりやすい機能について

sproketsについて

sproketsは主に以下の動作をする

• jsやcssを一つのファイルにまとめる
• jsやcssのminify化
• js, css, 画像のファイル名の後ろにdigestをつける

app/assets/javascript/application.jsには以下のような指定がしてある
ここにファイルを追加していくと、sproketsの対象になり、ファイルが読み込まれる

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require www/pc/home

digestについて

sproketsを利用するとファイル名が以下のようになる
-30d67bb829a514ffd24d9dcdbabe7864はsproketsによってつけられたdigest

image-30d67bb829a514ffd24d9dcdbabe7864.png

digestの必要性

現在は各ブラウザでキャッシュを持つのが大体の仕組みになっている
そのため、デプロイしてassets内のファイルを更新した際に、digestをつけないと、各ブラウザでファイルをキャッシュしているため、更新されない可能性がある

digestが付与されていると、デプロイのたびに毎回ファイル名が変更されるため、ブラウザでキャッシュされていても、新規に更新されるためユーザによって更新されない等の問題が発生しない

注意点

digetstがつくというとは、ファイル名が変わるということである
image.pngで保存していて、<img src="image.png">ではdigestがつくので呼び出せないのである

そのため、下記のようなメソッドを利用する

html内の画像呼び出し

<img src="">
↓
image_tag( "画像のurl", alt: "alt属性", class: "クラス名", id: "id名")
or
img src="<%= asset_path "hoge.png" %>"

css内の画像呼び出し

またcss内で画像を呼び出す際などは下記のように行う

<div style="background-image:url(#{asset_path("hoge.png")})" />

.hoge {
  background-image: image-url("hoge.png");
}

別の回避策

public/ディレクトリ以下は外部からもアクセスするようのディレクトリである
そのため、public以下に画像を置いて直接参照する方法もある
この場合は、digestが着かないので、そのままのurlで済む
ただ、画像が圧縮されなかったり、digestがつかないので、多少railsの恩恵を受けられないのが難点

turbolinkについて

わかりやすいサイト
http://kray.jp/blog/must-know-about-turbolinks/

turbolinksとは

ページ遷移をすべてajaxに置き換えて、jsやcssファイルの読み込みを省略することで高速化をしている機能

• aタグへのクリックだった場合にtrubolinksで遷移する
• ページ遷移した際に、jsやcssファイルが変わっていないとヘッダー部分の再読み込みはしない
• タイトルとbodyだけ、読み込みを差し替える

機能しないパターン

• リクエストがGETメソッド以外
• aタグのデフォルト動作が、別のイベントハンドラによってブロックされている場合
• target属性が付与されている

注意点

• readyイベントが発火しない場合がある
• windowオブジェクト、documentオブジェクト
  • 通常はwindowオブジェクトや、documentオブジェクトはページ遷移すると更新されるが、turbolinksを使用すると更新されない

documntオブジェクトのイベント登録について

先ほども書いたように、documentオブジェクトはturbolinksを使用していると更新がされない
そのため、そのままオブジェクトを格納した状態で次ページへ遷移する
なので下記のような問題が発生する場合がある

documentオブジェクトは前のページから引き継がれるため、同じdocumentオブジェクトに２つ目のイベントハンドラが登録されてしまいます。

$(function(){

$(document).on('click', '.mySelector', myHandler);

});

mysqlのデータが見たいとき

sequel proというのがお勧めです
http://www.sequelpro.com/