HTML

2019.07.25

ul

unorderd list

Xpath

XML文章中の要素、属性値などを指定するための言語。
mechanizeのsearchメソッド内でそのまま使える。
同一属性の指定が非常に楽。特にテーブルで。
htmlの検証画面から指定した要素を右クリックでコピーする際に選べる。

page.search("//*[@id='IR1600']/tbody/tr").count

Haml

HTMLを簡単に記載する方法。
Railsではhaml-railsというGemがあり、割と使われる。

%でタグ付け
インデントで子要素
変数が使えるので#{}で式展開
= でerbで使う式を記述
– は出力しない式を記述

font-awesomeのアイコンの使い方とリンクの貼り方

= link_to '/hogehoge' do
  = fa_icon "cog", class:"sidebar__btn"

link_to doで以下のインデントしたテキストにリンクを貼る。
icon “cog”はアイコン名称を書くだけでOK

クラスの指定

開始タグを打った後に連続して.class名を続ける。

%p.class名

HAMLの属性の書き方

実は{}シンボルで書く方法と（）で書く方法の2通りある。
下の例は　(for=”file”)　と　{type: “file”}　で記載しているが、
どちらもきちんと属性に格納される。

%label.chat(for="file")
  = fa_icon "image"
  %input.hidden#file{type: "file"}
<label class='chat' for='file'>
  <i class="fa fa-image"></i>
  <input class='hidden' id='file' type='file'>
</label>

カスタムデータ属性

%div{data-user_id=1}などと書くとSyntaxErrorになる。
ハイフンが使えないため、以下のようにハッシュネストにする。

{ data:{message_id: message.id} }

なお上記の場合、以下のように展開され、_がハイフンに変換されてしまう。
data-message-id="183"

rubyのシンボルに「-」を含めるにはダブルクォートでくくる必要がある。
なので上記のようなハッシュを「-」に変換してくれる仕様になっている。

ファイル参照ボタンをアイコンに変更

ファイル参照はhtmlだと以下。（idやクラスは任意につけて下さい）

<input type="file" id="filesend">

このままだとデフォルトのブサイクなファイル参照ボタンと文字列が出てしまうので、これをfont-awesomeなどのアイコンに置き換えたい。

解決方法はlabelタグでinputタグを囲んでラベルを表示し、
inputタグはcssでdisplay: none;を設定して隠してしまう。

HTML
<label>
  <i class="fa fa-image"></i>
  <input class='hidden' type='file'>
</label>

CSS
.hidden{ display: none; }

さらにこれをhamlで書くとこうなる。

%label
  = fa_icon "image"
  %input.hidden{type: "file"}

hamlのinputタグの書き方には慣れてないので難しいね。

Hamlのサンプル（フォーム） - Qiita
!!!%html%body%form{:action=>"/",:method=>"post"}Title:%input{:name=>"title",:size=>"…
qiita.com

厳密にはlabelではfor属性でラベルを貼る先のidを指定すべき。

submitボタンにアイコンを配置

f.submitの場合はtextしかいれられないため、buttonのtypeをsubmitにして内部にアイコンを格納する。buttonなら文字列もアイコンも格納できる。

= form_with(url: root_path, method: :get, local: true) do |f|
  = f.search_field :keyword, placeholder: "何かお探しですか？"
  = button_tag type: 'submit' do
    %i.fa.fa-search

link_to

= link_to 'TEXT', 'URL'
= link_to 'ほげほげ', '/hogehoge'

1つのみを記載した場合はtextとして認識する。
<a>タグ内にdivやその他の項目を含めて、配下の全てをクリック時にリンク先へ飛ばしたいような時はdoを用いる。

= link_to '#' do
  %h2 title
  %p first_message
HTML
<a href="#">
  <h2>title</h2>
  <p>first_message</p>
</a>

aタグのlink_toへの置き換え

aタグはmethodの指定がやりづらいのでlink_toへ置き換える。

= link_to "Sign Out", destroy_user_session_path, method: :delete, class: 'dropdown-item'

%a.dropdown-item{href: destroy_user_session_path} Sing Out

リンクを新しいタブで開く

aタグにtarget=”_blank”属性をつければOK.
hamlなら以下のような感じ。

%a.ir-title{href: ir.url, target: "_blank"}= "#{ir.title}"

inputタグ

submitボタンを設置する場合は{}内に続けてtypeを指定する。
ボタンの文字列はvalueに書く。

%input.form__input--btn{type: "submit", value: "Post"}

form_for

f.text_field等は1段インデントする。
また属性はカンマ区切りで続けてかける。

= form_for @group do |f|
  = f.text_field :name, placeholder: "グループ名を入力してください", class: "chat-group-form__input", id: "chat_group_name"

data-disable-with

多重送信を防ぐためにrails5から実装。
連続でsubmitをクリックできなくなるが、代わりに表示する名称を設定できる。

f.submit "Send", "data-disable-with": "送信中..."

アイコンにラベルを貼って、input操作をさせる方法

= form_for [@group, @message] do |f| 
  = f.label :image, class:"chat__form__btn--image" do
    = fa_icon "image"
    = f.file_field :image, class: "hidden"

これは下と同義。
  %label.chat__form__btn--image(for="file")
    = fa_icon "image"
    %input.hidden#file{type: "file"}

新規プロジェクトの始め方haml/scss

rails new NewProject
rails db:create
gemファイルに
gem "haml-rails", "~> 2.0"
bundle install
rails haml:erb2haml
rails g controller hogehoges
hogehogez/index.html.hamlを作成
routes.rb
root 'hogehoges#index'
application.css削除
application.scss追加し@import "hogehoges";と記載
hogehoges.scssを_hogehoges.scssへリネーム
_reset.scssを作成し、リセットCSS内容をコピペ
application.scssに@import "reset";と記載

Hamlの疑問

式展開とidsの処理

= form_for group do |f|
 .chat-group-form__field--right
  = f.text_field :name
 - group.users.each do |user|
  .chat-group-user
    %input{name: "group[user_ids][]", type: "hidden", value: user.id}/
    %p.chat-group-user__name= user.name
    .user-search-remove.js-remove-btn 削除

6行目の%inputで=をつけていないのにuser.idが展開されるのはなぜ？

{"utf8"=>"✓", "_method"=>"patch", "authenticity_token"=>"teow24w==", 
"group"=>{
    "name"=>"hogehoge", 
    "user_ids"=>["1", "2", "3"]
    }, 
"commit"=>"登録する", 
"controller"=>"groups", 
"action"=>"update", 
"id"=>"12"}

paramsにgroup[user_ids][]にvalueが入った配列ができているのはなぜ？

hamlの変換のされ方の違い

属性と本文で扱いが違うのはなぜ？

%span.user-name{ data:{message_id: message.id}} message.user.name
<span class="user-name" data-message-id="183">message.user.name</span>

%span.user-name{ data:{message_id: message.id}}= message.user.name
<span class="user-name" data-message-id="183">fooo</span>

コメントアウト行によるエラー

コメントアウトもインデントしないとsyntax errorになる。
以下の例は= form_withと同じインデントにコメント行があるためエラーになる。
何故こんな設定になってるの？？？

= form_with(model: @user, url: "/users/session", class: "register") do |f|
-# = form_with(model: @user, url: "/users/session", class: "register") do |f|

  .field
    = f.label :"ニックネーム"
    = f.text_field :nickname, placeholder: "nickname"

labelのネスト

f.label do
 %i
↑これは通らない
f.label :name do
 %i
これは通る。なぜ？

関連記事

コメント