Via Tech

技術のことなど

ざっくりHaml

Haml (HTML Abstraction Markup Lunguage)

概要

コツ

  • h1, tableなどは開始タグと閉じタグを削除し、%をタグにつける。
  • id属性、class属性、その他の属性を追加する場合は、{}でハッシュ形式
  • ifやeachなどロジック部分の行には、先頭に-
  • インデントに気をつける

準備

作業用ディレクトリの作成

$ mkdir haml_lesson; and cd haml_lesson
$ code .

Rubyのバージョンを指定

$ rbenv local 2.5.1
$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17]

hamlのインストール

$ sudo gem update --system
$ gem install haml
$ gem list | grep haml
haml (5.0.4)

変換

大まかな流れとして、hamlファイルをhamlに通すとhtmlが出来上がる。

$ string trim '
!!!
%haml
  %body
    hello world!
'> index.haml

htmlに変換

$ haml -q index.haml index.html
# -q : シングルクォーテーションではなくダブルクオテーションを使用する

確認

$ less index.html

基本

  • !!! → <!DOCTYPE html>
  • % → 開始タグと終了タグ

属性

htmlっぽく書いたり,htmlっぽく書いたりできる

%p(class="test") hello world or %p{class: "test"} hello world
↓
<p class='test'>hello world</p>

他にもさまざまな書き方ができる

%div{id: "main", class: "test"}
%div(id="main" class="test")
%div#main.test
#main.test
↓
<div class='test' id='main'></div>

コメント

/ end body
↓
<!-- end body -->

/ コメント
  コメント
  コメント
↓
<!--
  コメント
  コメント
  コメント
-->

hamlファイルのみのコメント

-# コメント

改行

%p hello
↓
<p>hello</p>
%p
  hello
↓
<p>
  hello
</p>
%p<
  hello
↓
<p>hello</p>

Filter

:css
  .myStyle {
    color: red;
  }

↓

<style>
  .myStyle {
    color: red;
  }
</style>
:javascript
  alert(1);
  if (1) {
    alert(2);
  }

↓

<script>
  alert(1);
  if (1) {
    alert(2);
  }
</script>
%div
  :escaped
    <html>
    </html>

↓

<div>
&lt;html&gt;
&lt;/html&gt;
</div>

Rubyの評価

%p total is #{3 + 9}
↓
<p>total is 12</p>
%p= Time.now
↓
<p>2018-10-05 10:42:56 +0900</p>
- x = 10
%p= x
↓
<p>10</p>
- (1..10).each do |i|
  %p{id: "item_#{i}"} #{i}
↓
<p id='item_1'>1</p>
<p id='item_2'>2</p>
<p id='item_3'>3</p>
<p id='item_4'>4</p>
<p id='item_5'>5</p>
<p id='item_6'>6</p>
<p id='item_7'>7</p>
<p id='item_8'>8</p>
<p id='item_9'>9</p>
<p id='item_10'>10</p>

【Rails5】新しいアプリを作成し,scaffoldするまで

sampleProductを作成する

mkdir Rails5SampleApp; and cd Rails5SampleApp

Rubyのバージョンを指定する

rbenv local 2.5.1

gemをbundlerで管理して、Projectフォルダにインストールする

bundle init
echo "gem 'rails'" >> Gemfile
bundle install --path vendor/bundle --jobs=4

railsアプリを作成する

bundle exec rails new . -d postgresql --skip-turbolinks --skip-test --skip-bundle
bundle install
bin/rails db:create

サーバーを起動

bin/rails s

f:id:synapse51:20181007082214p:plain

scaffoldする

bundle exec rails generate scaffold product name:string url:string

DBのマイグレーションを行う

bundle exec rails db:migrate

nodebrew を利用してnode.jsをinstallする

nodebrewは、node.jsを自分のマシン内でversion管理するためのtool。rubyのrbenvのようなもの。

github.com

ソースを持ってくる

$ curl -L git.io/nodebrew | perl - setup

パスを追加.bashrc .zshrc などに

# nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH

環境変数の読み込み

$ source ~/.zshrc

install可能なnode.jsのバーションの一覧

$ nodebrew ls-remote

nodebrewでnode.jsのinstall

$ nodebrew install v8.11.3

使用するバージョンを指定

$ nodebrew use v8.11.3
$ rehash

バージョン確認

$ node -v
v8.11.3

Rubyスキルチェック問題を行うときに役に立ったメソッドなど

入力

n
input_lines = gets.to_i
m n
n, m = gets.split.map(&:to_i)
N1
N2
N3
・
・
・
N7
(7).times{ gets.to_i }

出力

N文字目まで出力

s = "abcdef"
puts s[0,2]
=> "ab"

メソッド

絶対値(Absolute value)

p number.abs

文字列の末尾の改行文字を削除

p string.chomp

切り上げ

10.5.ceil
=> 11

切り下げ

10.5.floor
=> 10

四捨五入

10.5.round
=> 11

一文字ごとに分割

p "hello".chars
=> ["h", "e", "l", "l", "o"]

置換

string.gsub!(/at/, '@')

配列の要素数

array.count('x')

文字列の反転

s.reverse

計算

べき乗

p 2 ** 2
=> 4

バリューからキーを取得

hash.key(5)

最大と最小

array.max
array.min

三項演算子

puts a % 2 == 0 ? "even" : "odd"

ハッシュのループ

string = gets.chop
hash.each{ |key,value| string.gsub!(key, value) }

文字列から数字を取得(数字以外を消す)

s = gets.chop
puts s.delete("^0-9")

【Rails5】Herokuに乗っけたらフェイスブック認証ができなくなった件

f:id:synapse51:20180829151144p:plain

エラー

 URLはブロックされています: リダイレクトURIがアプリのクライアントOAuth設定でホワイトリストに追加されていないため、リダイレクトできませんでした。クライアントとウェブOAuthログインをオンにして、すべてのアプリドメインを有効なOAuthリダイレクトURIとして追加してください。

エラーの内容

リダイレクトURIがアプリのクライアントOAuth設定でホワイトリストに追加されていない。

対処法

コールバックURIをホワイトリストに追加する。

コールバックURIを確認する

http://localhost:3000/rails/info/routes

OAuth設定でホワイトリストに追加する

https://developers.facebook.com/apps

f:id:synapse51:20180829155346p:plain