webサイトを作る

こんにちは。

今日は前回の宣言通り、「CSSが苦手」を克服するために

webサイトを作ろうと思います。

 

前回はかっこいいと思ったwebサイトを模倣すると言いましたが、

やっぱりただ作るだけだと勿体無いな〜どうせなら自分の作品として何かつくれないかなと思いまして、

自分のポートフォリオサイトを作成することにしました。

 

前回も簡単なブログを作ったんですけど、

そのときはCSSは外部のwebサイトから引っ張ってきただけだったので、

自分でちゃんとwebサイトを作ってcssもできるようにしたいと思います。

 

どんなサイトを参考にするか

今回はいいなと思ったサイトの2つを参考にして、

ブログアプリを作成したいと思います。

 

break-u-fast.karlymake.com

これをトップページにして、

ベースは以下のサイトを作成したいと思います。

 

鈴木えみオフィシャルブログサイト↓

ブログ | Little Bit -emi suzuki official site-

 

設計する

まずどんなサイトにするか? ーポートフォリオサイト

 

なんの機能を追加するか? ーブログ、フォトアルバム、プロダクト一覧、ツイッター・インスタグラム連携、ページネーション

 

ざっとこんな感じで考えてから設計に移りました。

 

設計図

[トップ画面]

 

f:id:lilybelly:20181018190627p:plain

 

 

[ABOUT ME画面]

f:id:lilybelly:20181018185953p:plain

 

 

[PRODUCT画面]

f:id:lilybelly:20181018185859p:plain

 

[PHOTO ALBUM画面]

f:id:lilybelly:20181018190814p:plain

 

レイアウトはこんな感じにしようと思います。

 

https://app.moqups.com/lilybell.y/1t0d19DUQq/view/page/ad64222d5?ui=0

app.moqups.com

作ったレイアウト。保存用に。

 

ちなみに設計図はこのサイトで作りました。

操作も簡単なのでおすすめです。

 

app.moqups.com

 

これで一応設計まで完成しました。

次は実装をしていきたいと思います。

 

 

カリキュラム終了!

今日はチャットアプリの開発が終わって、

デプロイをする作業で終わってしまいました!

 

デプロイの作業がなかなか難しくて厄介ですね、、、

 

 

これからチーム開発が始まるんですが、

早めにカリキュラムを終わらせることができたので

あと4日は自分の時間として復習とかに費やせそうです。

 

 

そこで私は何をしようかなーと考えたんですが、

まずCSSが苦手なので①好きなwebサイトを1つ作る

 

あとは②簡単なミニアプリを作る

 

を考えました。

 

うーん、苦手を克服したいのでまずwebサイトを作ってみようと思います。

 

どんなwebサイトを作るか

まだ決まってないのですが、どんなwebサイトがいいか候補を書いておきます。

 

1. 星野リゾートOMO

 

このwebサイトはcssがかなり凝ってますね。

アニメーションで画像が移動したり動いたりするように設定してあります。

これができたらめちゃくちゃかっこいいな〜

やってみたいです!

omo-hotels.com

 

2. ginza

自分の好きなものでやりたいなと思って、かっこいいなと思う雑誌のwebサイトをまねしてみるのもありかなと思いました。

ginzamag.com

 

3. Break U fast

これはかっこいいwebデザインで検索したらヒットとしたもの

webデザインというか写真とか文字フォントが自分のツボってだけかも、、笑

 

break-u-fast.karlymake.com

 

4. LESSE

これもなんだかかっこいいなと思ったもの。

 

lesseofficial.com

 

5. Kinfolk

これも自分の好きな雑誌。

 

https://kinfolk.com/

 

うーん、、こんな感じかなあ。

いろんなものを参考にして自分のブログでも作れたらいいなと思うんですけど、

なにより自分の作品がないからなあ、、。

 

自分がとった写真をポートフォリオにしとこうかなと考えたり、、。

 

なんだかワクワクしてきました!

なにをするかは明日にでもまた報告したいと思います!

 

 

enumを日本語化する

前回はenumを使ってリファクタリングするやり方を解説しました !
 

 

↓前回の記事はこちらから見れます。

lilybelly.hatenablog.com

 

ただ前回で完成したenumを使ったコードでは、

英語表記で

  私用→individual

  仕事用→work

  その他→others

になってますが、

 

これを日本語で「私用」「仕事用」「その他」に直したいですね。

きょうはそのやり方を解説していきたいと思います。

 

 enum_helpを使う

英語表記を日本語表記にするには

enum_help」というgemをインストールします。

 

enum_helpのgemをインストール

gemfileに「enum_help」というgemを追加しましょう。

 

↓gemfile

# 末尾に追記
gem 'enum_help' 

 

gemfileに追加できたら

ターミナルで  bundle install  をして使えるようにしましょう。

 

↓ターミナル

$ bundle install

 

これで gem の enum_help は使えるようになりました。

 

ja.ymlを編集する

ja.ymlは日本語に翻訳するための言語ファイルみたいなものです。

 

config/locales/ja.yml

# ja:の一行下から、enums: ~ others:までの記述を追加

ja:
  enums:
    task:
      kind:
        individual: "私用"
        work: "仕事"
        others: "その他"
  activerecord:
# 以下省略

enumで設定したtaskのkindの中で、individualは私用に、workは仕事、othersはその他で日本語化する」という解釈でおっけーです。

 

enum_helpを使って、ja.ymlに言語ファイルを設定できたら、

「[もともとのenumを使った表記]_i18n」と書くことで、日本語化へ変換できます!

 

 

ビュー設定した「task.kind」を日本語にしたenum_i18nに書き換えましょう。

app/views/tasks/_task.html.haml

/ task.kindをtask.kind_i18nに書き換え /
%tr
  %td
    = task.kind_i18n
  %td
    = task.title
  %td
    = task.content
  %td
    = task.start_at
  %td
    = task.finish_at
  %td
    - if task.finished?
      完了済
    - else
      未完了
      %br
      = link_to "完了にする", task_path(task), method: :patch, class: "btn btn-primary "

 

 

app/views/tasks/index.haml

/ Task.kinds.keysをTask.kinds_i18n.invertで書き換え /
= form_for @task, html: {class: 'form-group'} do |f|

  = f.label :kind
  = f.select :kind, Task.kinds_i18n.invert, {}, class: 'form-control', placeholder: 0

 

 

これでenum_helpを使って、ビューも書き換えることができました。

これで完成です!

 

ここまで完了したら、一度Raiilsサーバーを終了させた後、もう一度rails sを実行してください。これで、enumの日本語化が完了しました。

最後に

英語から日本語へ変換というと、なんだか面倒そうなイメージがありましたが、

enum_helpを使うと本当に簡単に日本語化できましたね。

 

ja.ymlはenum以外でも日本語化をするときに使うファイルになるので、

きちんと覚えておいたほうがいいです。

 

 

 

 

 

 

enumを使う

今日はリファクタリングについて勉強しました。

そこでリファクタリングのなかの

enumを使ってリファクタリングをする方法を学びました。

 

enumとはなにか

enumとは複数の定数をまとめることができる型です。

今回はあとで、タスク管理のアプリのなかでenumを使う例を記述するつもりです。

 

具体的にどんなところでenumを使うかというと、

 

タスクを種類別に

if 0 => 私用

elsif 1 => 仕事

else 2 =>その他

とビューで設定して、そのタスクが私用なのか仕事用なのか、それともその他のものなのかというように種類別に分けてわかりやすいようにしてあるんですが

 

これだと問題が2つあります。

  • kindの0, 1, 2がそれぞれ何を意味するのか、ビューを見ないと分からない
  • kindの種類が増える度、新たにif文を足さなければいけない

 

こういう問題があるとコード量が増えてきた時にエラーが起こる原因になります。

 

そこでこの問題を解消するためには

enumをモデルで定義するんです。そうすれば解決します!

 

実際にこのアプリを例にとって見てみるとわかりやすいと思います。

 

実装例

 

先ほど説明したように、タスク管理アプリでenumを使ってみます。

 

enumを使う前のコード

enumを使用する前のコードを載せておきます。

 

コントローラー

app/controllers/tasks_controller.rb

class TasksController < ApplicationController

  def index
    @task = Task.new
    @tasks = Task.where('start_at > ?', Time.zone.now).order(start_at: :asc)
  end

  def create
    @task = Task.new(task_params)
    @task.save
    redirect_to tasks_path
  end

  def update
    @task = Task.find(params[:id])
    if @task.finished == false
      @task.finished = true
      @task.save
      redirect_to tasks_path
    else
      render :index, alert: '既にタスク「#{task.title}」は完了しています '
    end
  end

  private

  def task_params
    params.require(:task).permit(:title, :content, :start_at, :finish_at, :kind, :finished)
  end
end

 

コントローラはTasksテーブルに対応したTasksコントローラのみです。
indexアクション、createアクション、updateアクションが存在しています。

 

ビュー

app/views/tasks/index.html.haml

%nav.navbar.navbar-light{style: :"background-color: #e3f2fd;" }
  %a.navbar-brand 登録済みタスク一覧

= form_for @task, html: {class: 'form-group'} do |f|

  = f.label :kind
    = f.select :kind, [0, 1, 2], {}, class: 'form-control', placeholder: 0 

  = f.label :title
  = f.text_field :title, class: 'form-control', placeholder: "ここにタスク名を入力してください"

  = f.label :content
  = f.text_area :content, class: 'form-control', placeholder: "ここにタスクの詳細を入力してください"

  = f.label :start_at
  = f.datetime_select :start_at, ampm: :true, minute_step: 15, class: 'form-control'

  = f.label :finish_at
  = f.datetime_select :finish_at, ampm: :true, minute_step: 15, class: 'form-control'

  = f.submit '作成する', class: "btn btn-primary"

.table-responsive
  %h4.r-title-label{style: 'display: inline-block; margin-right: 20px; '}
  %table.table.table-striped.b-t.b-light
    %thead
      %tr
        %th 種類
        %th タスクの名前
        %th タスクの内容
        %th 開始時間
        %th 終了時間
        %th 状態
    %tbody
      = render @tasks

 

ページ上部の フォームから入力された情報は、Tasksコントローラを通じてTasksテーブルに保存されます。Tasksテーブルに登録されている各レコードは、部分テンプレートviews/_task.html.hamlを通じて描画されています。

 

ビューの部分テンプレート

app/views/tasks/_task.html.haml

%tr
  %td
    - if task.kind == 0
      私用
    - if task.kind == 1
      仕事
    - if task.kind == 2
      その他
  %td
    = task.title
  %td
    = task.content
  %td
    = task.start_at
  %td
    = task.finish_at
  %td
    - if task.finished?
      完了済
    - else
      未完了
      %br
      = link_to "完了にする", task_path(task), method: :patch, class: "btn btn-primary "

 

 

こんな感じのコードです。

どんな風に動くかというと、以下の画像をみてください。

 

f:id:lilybelly:20181015144733g:plain

こんな感じで、一番上の欄のkindというところで、

私用か仕事用かなどのタスクの種類を分けれるようにしてあります。

 

enumを使う

 

タスクを種類別に

if 0 => 私用

elsif 1 => 仕事

else 2 =>その他

とビューで設定して、そのタスクが私用なのか仕事用なのか、それともその他のものなのかというように種類別に分けてる部分は

 

 ↓app/views/tasks/_task.html.haml

%tr
  %td
    - if task.kind == 0
      私用
    - if task.kind == 1
      仕事
    - if task.kind == 2
      その他
  %td
    = task.title
  %td

 

 この部分ですね!

そしてそれを

app/views/tasks/index.html.haml

= form_for @task, html: {class: 'form-group'} do |f|

  = f.label :kind
    = f.select :kind, [0, 1, 2], {}, class: 'form-control', placeholder: 0

 

 indexのビューのform_forタグで配列形式でもってきて、

f.selectで選択フォーム を作っています。

 

ちなみに選択フォームはこんなやつです↓

        f:id:lilybelly:20181015150330p:plain

 

1.モデルにenumを定義する

 

 ↓app/views/tasks/_task.html.haml

%tr
  %td
    - if task.kind == 0
      私用
    - if task.kind == 1
      仕事
    - if task.kind == 2
      その他
  %td
    = task.title
  %td

 この条件分岐を消して、モデルにkindカラムとして定義してあげる

class Task < ApplicationRecord
  enum kind: [:individual, :work, :others]
end

 配列でとってるから、

0はinidividual(私用)

1はwork(仕事)

2はothers(その他)

になっていて、ビューでは「kind」でこの条件分岐を呼び出せます。

 

なのでさっきのif文を消して、kindに書き換えてあげましょう。

 

app/views/tasks/_task.html.haml

/if文を削除し、task.kindと書き換える/
%tr
  %td
    = task.kind
  %td
    = task.title
/以下省略/

 

 これで部分テンプレートの条件分岐のところはオッケーです。

 

ただ選択フォームはさっきの0、1、2のままなので、

ここも変更する必要があります。

 

app/views/tasks/index.html.haml

= form_for @task, html: {class: 'form-group'} do |f|

  = f.label :kind
    = f.select :kind, [0, 1, 2], {}, class: 'form-control', placeholder: 0

これを

  = form_for @task, html: {class: 'form-group'} do |f|

    = f.label :kind
    = f.select :kind, Task.kinds.keys, {}, class: 'form-control', placeholder: 0

に変更します。

 

これはなにをしてるかというと。

[0,1,2]が Task.kinds.keysとなっていますね。

 

実は、

enumを定義すると、[モデル名].[カラム名の複数形] のような形で、そのカラムに設定したenumを全て表示することができます。

 

なので

Task.kinds
=> {"individual"=>0, "work"=>1, "others"=>2}

Task.kindsと打つと2行目のように数字と値がハッシュで返されるようになります。

 

そこで「Task.kinds.keys」と打つとその中の、キーだけが取り出せます。

Task.kinds.keys
=> ["individual", "work", "others"]

 

 

これを入力フォームの f.select に引数として渡すことによって、選択肢を[0 ,1, 2]のように書くことを避けられるので、

ユーザーが選択するときにもわかりやすくて便利ですよね!

 

こんな風にenumをつかってコードをまとめることができました!

 

まとめ

  • enumとは複数の定数をまとめることができる型
  • 配列を数字ではなく、文字列で扱うことができる。
  • [モデル名].[カラム名の複数形] のような形で、そのカラムに設定したenumを全て表示することができる
  • [モデル名].[カラム名の複数形].keys のような形で、そのカラムに設定したenumのキーを一覧で表示することができる

最初は慣れないと思いますが、

リファクタリングのためにできるだけ使うようにしていきたいです。

 

 

 

attr()メソッド応用編

前回attr()メソッドの基本編として、

attr()メソッドを使って属性値の取り出し、属性値の変更、複数の属性値の変更ができるようになりました。

 

そこで今日はattr()メソッドの応用編として、

属性の削除方法、attr()とprop()の違いを勉強していきたいと思います。

 

属性の削除

属性自体を削除したいときは、

attr()メソッドの派生型「removeAttr()」を使いましょう。

 

removeAttrの書き方

f:id:lilybelly:20181014195955p:plain

例えば1行目のようなaタグがあるとすると、

3行目のようにremoveAttr(削除したい属性名)と書くことで、

属性自体を削除できます。

 

今回はaタグのclass属性を削除できました。

 

attr()とprop()の違い

prop()とはなにか

「prop()」はHTML要素に付与されている「id・class・name」…などの属性や、「checked・selected」…などのプロパティを取得できます。

 

特定のhtml要素の属性を取り出すには、どちらも同じように使えそうです。...が、物によっては取り出した値が変わってくる場合があるみたい。

 

 

例えば、どちらも同じようなinputタグにクリックする度に、

属性の値を取り出そうとしています。

 

f:id:lilybelly:20181014202047p:plainこの例では、input要素にあらかじめ「checked」プロパティが付与されているのが分かります。

input要素に対して「prop(‘checked’)」と記述するか「attr('checked')」と記述するかでことで取得した値が変わってきてます、

左のattr()は true が、右の prop()では checked が返されています。

 

これは2つのコードの認識方法が違うことから起きています。

 

attrは純粋に 属性における値 を取得する

 checkされてる
  ↓
 checkedという『属性』がある
  ↓
 checked

 

一方でpropは、checkedという プロパティの真偽 を取得してくれる

 

 checkされてる
     ↓
    checkedという『プロパティ』はtrue
     ↓
    true

 

というように同じコードでもどのような返り値をだしてくれるかは

メソッドによってかわってくるので、

気をつけて使い分けをした方がよさそうですね!!!

 

また勉強になりました

 

 

 

jQueryのattr()メソッドとは[基本編]

今日はjQueryattr()メソッドを勉強したので、

attr()メソッドはなんなのかについて書きたいと思います。

 

attr()メソッドとは

まずattr()メソッドとはどんなものなのか?

 

 ー attr()メソッドとはjQueryの中で使われるメソッドの一つです!

 

どんな時に使えばいいのか?

 

 ー 特定のHTMLの要素の値取り出したり、変更したりしたいときに使いましょう!

 

...ふむふむ、なんとなくどんなものかわかりました。

実際にどんなふうに使えばいいのか、やってみます。

 

基本的な記述方法

f:id:lilybelly:20181014192129p:plain

こんな風に書くことで、atte()メソッドはオッケーです。

 

要素を取得したいとき

要素を取得したい場合は、基本的な記述方法で書けば取り出せます。

 

f:id:lilybelly:20181014192646p:plain

 

ではhtmlにこんな記述があったとして、

このaタグのclass名という属性を知りたい場合に

attr()メソッドを使って取り出しましょう。

 

1行目は記述方法で、2行目が実際に書いたコードです。

f:id:lilybelly:20181014193104p:plain

これでaタグのclassという属性を取り出しています。

 

こうすると「”link”」が取り出されるはずです!

要素の取り出し方はオッケーですね

 

要素の変更

 

f:id:lilybelly:20181014194028p:plain

 

変更したい場合はattr()の第二引数に変更したい値を入れてあげればオッケーです

 

こうすると「”linkTag”」がクラス名になるはずです!

 

複数の属性を変更する

attr()メソッドは、複数の属性をまとめて変更することもできちゃいます。

便利ですね、、!

 

例えばinputタグで記述してあるhtmlに

複数の属性値を設定したい場合は以下のように書けば出来ます。

 

f:id:lilybelly:20181014194505p:plain

このようにinputタグにattr()メソッドを使って、

id属性やclass属性などを複数まとめて設定しています。

 

今日はほんとに基本編だけになります。

あした応用編を書きたいと思います。