いよいよデザイン

今日から、いよいよデザインパートに移れる!

PC、モバイル両方対応するけど、レスポンシブルとか今考えるのめんどいので、モバイル版を先に作っていこう。

 

最初は、ヘッダーのよくあるボタンを押したらぴょこっと出て来るメニューバー。

あれ名前なんていうんだろう。

ドロワーっていうのか。

ドロップダウンメニューも良いなぁ。

share-life.biz

 

名前わからないの、ここで知れるな。

qiita.com

 

三 はハンバーガーメニューか。

theorthodoxworks.com

これかっこいいな。

 

qiita.com

この記事を読んで、ハンバーガーメニューやめても良い気もしてきた。

カテゴリも5つぐらいだから辞めてもよくね?

って思い始めてきたな。

うん、やめよう。

 

さて、早速作っていこうと思い、画面サイズをモバイルのシミュレーターにしたら、文字がやたら小さくに・・・

なんでやねん。 Come on!

 

なんか知らんけど、Ctrl + 0を押したら治った。

前テストしたときに、俺小さくして表示していたのかな・・・

 

今後Google開発者ツールで困ったら、Ctral+0を押しておこう。

 

検索キーワード:Google 開発者ツール 縮小されてしまう

こんなん書いておけば誰かの役に立てるかも?

 

さて、脱線しまくりだけど、メニュー画面の表示をつくりますかっと。

 

だめだ、集中力がない・・・夜更かしが原因か。

気を取り直して、対応する。

今日はダメだ。乗らない。

 

TWBSColor - Generate your own Bootstrap navbar

 

ここで、メニューバーの色を変更しよう。

とその前に、まずメニュー作れよ俺・・・一体どんだけ無駄な時間過ごしているんだ。

 

Default Twitter Bootstrap nav bar, in the Slim templating language · GitHub

いちいちslimに変更しているの面倒くさいので、コピペしてから調整しよう。

 

やっぱだめだ。今日はだめだ。やめよう。終わり。

くそぉ。。ナビメニューすらできないなんて。

 

 

ページ移行 part 3

いろいろなところでつまずきながらも、引かぬ媚びぬ省みる!の精神で進めている。

 

今日はもうそろそろいい加減に終わらせて、次にいこうぜ俺。


Ruby on Rails Fight! Ready Go!

今日の敵は、ページャーか。。

Kaminariというのを使うと良さそう。

調べてページャーを導入しよう。

qiita.com

gem 'kaminari'

をして、bundle install

ひとまず、このまま進めて見るかな。

rails g kaminari:views default -e haml

だけど、今slimで進めているので、最後の方を修正

rails g kaminari:views default -e slim

hamlって、%が頭についているだけっぽいけど、その認識で良いのかな。

ひとまずコピペして、%はずすだけにしてみよう。エラー出たらどんまい。

うん。まずkaminariを動かしてからにしないとだめっぽいな。

@usersというのは、@users[0]などで表示確認してOK。

 

Undifined methodが表示されるので、そこを修正していく必要がある。

ここらへんは、データベースのからみもあるため、一度スキップしよう。

 

コントローラーで読み込みの設定をまとめたいYO!

コントローラーでデータ読み込みを検索。

モジュールの読み込みというので、できそう。

 

def で定義をつくって、controllerに定義の名前を入力するだけで、その中身の読み込みをされているのを確認した!

これは良いねぇ。

 

うーむ、なかなか良い感じで進んでいる気がするぞ。

 

文章の途中でリンクを張りたいものを作るときが、若干面倒くさい。

li
|テキストA:
= link_to yugi_card_item_price_detail_path, class: 'page-link' do
| リンク
| テキストB

というような感じで、初めて一行の中で指定のリンクを作れる。

 

よし、ようやく1ページ完成。

これ仮の移行でもあるから、この後が大変だけど、まず移行しないとね・・

 

13ページの3ページ完了。

残り10ページ。

だいぶサクサク進むはずなんだけど、気持ちが重い。

面倒くさい気持ちが強い。

何故かと言うと、微妙に時間がかかるから。

 

簡単なのから終わらせてしまい、距離を稼ごう。

よし1ページ完了!

残り9ページ。

よし1ページ完了!

残り8ページ。

よし2ページ完了!

残り6ページ。

よし1ページ完了!

残り5ページ。

よし2ページ完了!

残り3ページ。

 

おおおおおおおおおおおおお!!

わああああああああああああああああああ

ったーーーーーーーーー!!

 

・・・ページ移行するだけなんだけどね。。

ひとまず、おわった!!

Git Push!

ブランチ一回マージしよう。

 

Permission deniedがたくさんでまくり!

でも、Atomを終了すればよいだけさ。ふふふん。

あとは

git push heroku master

で、herokuを確認する。

 

gitのリポジトリをどうやって共有するの。

問題があればAdblockを疑え!!

 

なんでだろ。なんでだろう。

とおもったら、Adblockを疑え!!

 

という、事で今日はようやくページ移行完成した。

明日からデザインにうつるぞっと。

 

 

 

 

 

 

 

 

 

ページ移行Again

昨日は、Sassでつまずいてしまったけど、シミュレーターも判明したので、とても満足!

速度はゆっくりだけど。

さて、今日こそは画面移行を完成させる!

 

さて、画像制御のSASSを作る盤面が来たよ。

昨日の成果を見せてやる!

small mid largeの画像サイズCSSを用意したい。

やるぞっ!

 

Twitter Bootstrap使っているんだから smallとかにしないで

xs sm md lg xl 使えばいいじゃんね。。

今回は、横幅で合わせよう。

// サイズ = xs, sm, md, lg
$size: xs, sm, md, lg;
$value:50,100,150,300;

@for $i from 1 through 4 {
.img-#{nth($size, $i)}
{ width:#{nth($value, $i)}px;}
}

ひとまず、こんなもんか。

自由に後からサイズ変更できるように、掛け算で計算するのは辞めておいた。

 

あれー、Something went wrongと表示されてしまった。

SASSの方の設定で、セミコロンが抜けていたためのエラーでした。

うーむ。初歩的。

よし、これで画像制御もできるようになったので、次に進もう。

 

何行も同じの各の面倒くさくなってきたので、配列を使う。

Ruby 配列で検索。

配列はうまく行ったけど、for文が今度はうまくいかないなぁ。

 

コメント文章が邪魔だった事に気がついた!!

コメントをわざわざ途中にいれて、Tabを削除したのが問題だった。

そして、forの後にもう一つTabを押して入れ子にするというのをしていなかった。

解決!!

 

@移行の文字列を追加したいなぁ。

連想配列でしないと対応できなさそう。

- books = { 'こころ' => ,'こころ' => 300,'坊っちゃん' => 380,'明暗' => 700,}
- books.each do |key, val|
#{key} | #{val}円

これで、金額は表示されるが、Keyが表示されない。

意味がわからん。。。

 

うーん、配列の仕方がそもそも間違っている気もしてきた。

名前は名前、画像は画像という事で配列を作り直した。

あっさりと出来たよ。

ここまで来るのに全然あっさりじゃないけど。

ひとまず、ここで一旦セーブ。

 

危ない!北朝鮮のミサイルニュース記事が目に入ったので、見てしまった。そのままネットサーフィンをしてしまうところだった。

今は集中!

 

はやくViewを完成してしまい、デザインに移りたい。

ようやっとトップページのHTMLを移行した。

for文使えると楽だなぁ。

420行あったソースコードが、133行に!

 

slimの使い方が少しずつわかってきた。

重要なのは、TAB!

 

うぉぉ。面倒くさくなってきた。

一段落したというのもあるけど、なんか集中力切れた。

完全に切れちまったぜ。

5分だけ休憩。

よし、再開。

 

検索結果のページを追加完了した。

うん。移行はまだ終わってないね。Very遅いね。

 

github.com

 

フォームはここを見るのが一番だという事に気がついた。

めでたしめでたし。

静的ページの移行、SASS paddingの設定等

今日は、静的ページの移行を目標にしよう。

 

躓いた部分を書いていこう。あとはコツコツと。

最初に全部のページとURLを確定してしまったほうが良さそうだな。

 

あとで、リンクパス設定するのめんどいし。

一つ一つファイル追加するのもよいけど、コマンドで追加できないのかな。

調べてみよう。

 

rails g controller controllername new create

 

したら、既にあるものに追加されるのかな。

まぁやってみるか

conflict  app/controllers/

が出てきたので、y+Enterを押してもただ改行されるだけ・・・

うーむ。h+Enterでもだめ。

何か違うボタンを押す必要があるのだろうか。

Ruby on Rails generating controller with existing folder - Stack Overflow

 

ここを読んだけど、conflictの問題が大きそう。面倒くさいので手動で追加することにした。

 

helperは追加されているので

routes.rb と controller とViewの追加をした。

 

URLを叩いて、表示されているのを確認したので、次はリンクパスを作成する。

ナビゲーションメニューの設定からしていこう。

・・・よし!ナビゲーションメニューの設定完了。

これで各ページの修正が出来る。

一度Push プッシュ!

 

早速一番上に設置したフォームパーツでつまずく。

Rails Bootstrap Formsが良さそうなので、導入してみよう。

loumo.jp

 

gem 'bootstrap_form'

を追加して、bundle install。

applicationにもrequireを追加して、サーバーを再起動。

 

  1. <、>、<%、%>などのタグを削除する。閉じタグは全て削除する

というのを忘れてしまう。

一度スリム化する。

 

というか、そもそも rubyの form_for の意味をよくわかっていないので、一度調べてみよう。

@userはテーブルデータなので、エラーが表示されてしまう。

これは、@user = "" にしておけば、ひとまず回避。

= bootstrap_form_tag url: '/subscribe' do |f|
= f.email_field :email, value: 'name@example.com'
= f.submit

だと、表示を確認できた。

これの微調整をどうするかだなぁ。

 

<% %> は - ハイフンで出来るのを忘れてしまうなぁ。

<%= %> は=でOKなのは理解した。

 

peartialは楽だなぁ。

素晴らしい。

さて、このフォームを自由に使いこなしたいけど一体どうしたらよいのやら。

 

うーむ。

構築の基礎であるアプリケーションフォームを二つ欲しい。

www.rubylife.jp

 

使えそう。

色々と調べてもちょっと進めなさそうなので、やはりパス。

淡々とそれぞれのページを移行するのに・・・寄り道してしまう。

ひとまず、rails bootstrap form は導入できたので、一度プッシュしよう。

 

まず、このフォーム文をなんとかしたい。

github.com

素直にここを読むか。。

を、できたできた。意味がわかってきた。

 

Sass にマージン追加とか、そこら辺を入れておいたほうが良さそう。

マージンとか、関数を使って設定しているが、時間かかるぅぅ。。。

配列がうまく使えればよさそうだなぁ。

www.sassmeister.com

 

一回一回、sass入力して、リロードして、確認とかアホくさくなってきたので、オンラインでテスト実行する。

というか、Sassはまだまだだなぁ。

色々とこねくり回して、できそうな予感がしてきた。

時間かけすぎだよね。。本当に。

焦らない焦らない。一休みもしないで、この部分だけは今日作る。

 

できたー!!

何回もテストしながら、さぐりさぐりやっているため、理解しているかは本当に謎ではあるが、ひとまず理想の形ができた。

 

$size: low, mid, high;
$position: top, bottom, right, left;
$short_code: t, b, r, l;
$value :5;

@for $i from 1 through 3 {
@for $d from 1 through 4 {
.mg-#{nth($short_code, $d)}-#{nth($size, $i)}
{margin-#{nth($position, $d)}: #{$value * $i}px;}

.pd-#{nth($short_code, $d)}-#{nth($size, $i)}
{padding-#{nth($position, $d)}: #{$value * $i}px;}
}
}

 

これで、low, mid, highの3パターンのそれぞれ上下左右のサイズ設定が可能となる!

テストできるのとても良いな。

 

今日は検索窓の追加と、SASSでサイズの追加しかしていないけど、まぁOK!ゆっくりぽちぽちやっていこう。

SASSの設定、fontawesome、Atomの設定

昨日の自分の設定したscssを見て、無駄だなと思うところをちょっと調整したい。

.btn-green{
$btn-color: $green;
@include btn-hover($btn-color);
}

って、

.btn-green{
@include btn-hover($green);
}

でいいやん。

そして、これらをひとまとめにしたい。

qiita.com

 

これがすごく使えそう!

ということで、早速やってみた。

 

//色の指定
$member_color:(
blue: #0099cc,
orange: #daa520,
green: #008000,
red: #ff1919,
black: #4a4a4a,
purple: #8B008B
);

//それぞれのボタンの設定。$colorは$btn-colorで設定されているものを引数とする。
@mixin btn-hover($color) {
color: #fff;
background-color: lighten($color,5%);
border-color: $color;

&:hover,
&:focus,
&.focus {
color: #fff;
text-decoration: none;
background-color: darken($color,5%);
}

// .activeが追加された場合+5%暗く
&:active,
&.active {
background-color: darken($color,10%);
&:hover,
&:focus,
&.focus {
background-color: darken($color,15%);
}
}

// .diabledが追加された場合+5%明るくする
&.disabled,
&[disabled],
fieldset[disabled] & {
background-color: lighten($color,5%);
}

}

//ボタンの設定
@each $name, $color in $member_color {
.btn-#{$name} {
@include btn-hover($color);
}
}

 

 

バッチリ動作!!

これで、カラーの追加は、カラーコードを追加するだけでボタンをどんどん作れる。楽になるなぁ。

SASSもなんとなく理解してきたので、次に進もう。

 

FontawesomeをRuby on Railsに導入

<i class="fa fa-close"></i>

を動作させるようにしよう。

多分、gem入れるだけだよね。

RailsにFont Awesomeを導入するGem - Qiita

gem "font-awesome-rails"

を追加、bundle install

 *= require font-awesome

を application.scssに追加。

はい、エラーが沢山でましたよっと。

couldn't find file 'font-awesome' with type 'text/css'

だってさ。

SASSだからエラーでているのかなと推測。

調べてみる。

qiita.com

gem 'font-awesome-sass'

にして、bundle install

requireの部分を削除して、@importに修正。

確認!!・・・エラー!!

 

この人と同じく俺もハマっていたようだぜ。。。

rails s を再度し直しして、表示したら・・・

ちゃんと表示された!!ヒャッハー!

 

これで、fontawesomeの導入も無事に完了!!

やるじゃん俺。

 

さて、git push。

 

atomを使ってるんだけどさぁ、fontawesomeのclassタグの候補でないのを出せるように出来ないかなぁ。

少し探したけど見つからないので、却下。

まぁいいや。

 

少し脱線して

ruby on rails おすすめ gem で検索してみよう。

 

ruby slimがなんか使いやすそう・・・

qiita.com

qiita.com

 

slim導入してみよう。

直感的にわかりやすい。

gem 'slim-rails'

をgemに記載。bundle install

application.htm.erbを application.html.slimに変更

doctype html
html
  head
    title SampleApp
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track'=> true
    = javascript_include_tag 'application', 'data-turbolinks-track'=> true
    = csrf_meta_tags
  body
    == yield

 

と入力し、rails sで再起動して確認。

動作確認出来たー!

さて、slimの書き方を少し勉強して見るかのうぉ。

Bootstrap Formというのも便利そう。これは後で。

 

コメントは / か

li.item class=item.name

と書くと、classに直接追加されるのか。

a.btn.btn-blue.active style="font-size:25px;" アクティブボタン

とすると、styleが記載された。なんとなく理解した気がする。

slimも記載していけば、どうにかなるだろう。

 

slimで記載し時に、classの色分けとかしてくれないかな。

ひとまず、slim導入したので、git push

 

Atomプラグインを検索し

language-slim

をインストールした。色がついたので、わかりやすくなったなぁ。

これで、slimでコードを書いていっても問題なさそう。

 

なんとなく・・・プログラマーっぽい!w

スペースとか、タブとかもついでにわかるのないのかなぁ。

Atom - 半角スペース・タブ(不可視文字)を表示 - 開発メモ - Webkaru

普通に設定であった。

表示させると、全部・・・となっている。

>>となって欲しいのに。どうしたらなるの。

調べてたら、ちょっと違ったのが出てきたけど、・・・をもう少し濃く表示するといのがあったので、それを対応しよう。

Atomのスペースをはっきり見えるようにする · GitHub

見やすくなった・・・!

これはいいな。

 

いや、じゃなくてなんでTabを押してるのに、スペース扱いになるんだという点。

tech.machiiro.jp

最初からここを見ればよかった。

うん、ここ素晴らしい。

show-ideographic-space

もインストールしておいた。

show indent guideにチェックをいれているんだけど、slimだとダラっと落ちてしまう。。

indent-guide-improved

を導入したら、問題なく表示されたYO!!

これで、だいぶ操作しやすくなったはず。

 

うん、コーディング全くしてないね。設定ばっかりだね。

いや、重要だと思うんだよ。

これは。

 

あとで、ダラダラと書いているこの記事をまとめて、使いやすくしよう。行動記録は重要だよね。うん。

 

次は、Ruby on Railsで静的なページを追加しよう。

ちなみに、目標は静的なページを完璧に作り、プログラマに提供するです。はい。

 

Ruby on Rails Twitter Bootstrapの設定

昨日は、Twitter Bootstrapの導入まで出来たけど、カスタム設定ができなかった。

全部はいらないよね?bootstrap-sassをカスタマイズして使う方法 - Qiita

のおまけ部分。

 

ちなみに、何回もフォルダ開いて Git Bush Here!ってするのめんどい。

調べてみた。

1.プログラムファイルにある、Gitフォルダをクリック

2.git-bash.exeを右クリックでショートカットを作成

3.ショートカットを右クリックでプロパティを開く

4.作業用フォルダーの部分に、対象の作業フォルダのパスを追加

5.ショートカット名を変更し、スタート画面にピン留めする。

これで、毎回フォルダにアクセスしなくても、スタート画面からGitを開けるぞっと。

 

ついでに、 git add -A commit とかショートカットできないかも調べてみよう。

うん。よくわからないので、愚直に git add -Aってしていこうかな・・・

どんまい俺。

 

さて、カスタマイズ方法をやっていこう。

 

中身はココのコピペ。」って書いてあるのを無視して、一部分だけコピーしたのが原因だったっぽいな。。

あとはこの変数をBootstrapで初めから設定されている変数に
ぶち込んでやればサイトのカラーはこれで完結できる。

 

むむむ・・・scssをちゃんと理解していないため、この言葉を理解していない。

ひとまず、カスタムCSSは使えているっぽい。あとはscssの中身をどうしたら良いのかをチェック。

その前に、今のところうまくいっているので、GitにPushしよう。

マージは、Atomを閉じなければいけないので、あとでしよう・・・

 

さて、カスタムscssを利用して、Twitter Bootstrapを思うように変更させてみたい。やってみたい。

ボタンの色を自由自在に操作できるようにする。

$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: darken($btn-primary-bg, 5%) !default;

とかが怪しい。

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7

というところから引用しているのか。

そうかそうか。という事はここの色を変更すると、変わるんだな。

・・おお!変わった。

 

shade と tint の違いがわからなかったけど

Shadeは暗く

Tintは明るく という意味みたいだ。

 

今回色は6つ欲しいので、6つ設定してみよう。

青・赤・オレンジ・緑・黒・紫

 

$btn-blue-color: #fff !default;
$btn-blue-bg: $blue !default;
$btn-blue-border: darken($btn-blue-bg, 5%) !default;

を追加してみたが、動作せず。

btn-info とかって、どこで呼び出しているんだ・・・。

overrrideしか書いていないなぁ。

 

自分で、scssを追加して読み込ませてみよう。

_ ←アンダーバーの意味ってなに?

tenderfeel.github.io

.scss(.sass)ファイル名の先頭にアンダースコアを入れると、コンパイルしてもcss ファイルが作成されないという仕様があります。

Sassではファイルを分割して管理するが、コンパイル後に生成されるCSSファイルは1つだけ。ということが出来るのでとても便利です。
また、インポート専用ファイルの見分けがつきやすくなるという利点もあります。

前に書いていますが、読み込むときの@importでは拡張子とアンダーバーを省略することが出来ます。

だってさ。

ということは、追加していくScssはアンダーバーをつけて追加し、importで読み込めばOKということか。

なんとなく理解。

_original.scssを追加し、importする。

css - Change navbar color in Twitter Bootstrap 3 - Stack Overflow

SO 18529274 - JSFiddle

これをコピペして ナビゲーションの色は変更できた。

でも俺がしたいのはボタンの色を変えること!

_original.scssに

@import "bootstrap-custom/variables";

.btn-blue{
color: #fff;
background-color: $btn-blue-bg;
border-color: $btn-blue-border;
}

としたら、ボタンの色を変えれた・・・!

SCSSで作るといくらファイルつくてもまとまるみたいなので、originalフォルダを作り

application.css.scssに @import "original/*"; を追記して読み込みする事にした

ボタンはめでたく作れた!!

けど、ホバーした時の文字の色が黒くなるので、その設定をしよう。

色を管理するとき、ちょっとめんどいので色々と調べてみる。

Sassで色を管理する色々な方法 - Qiita

マップというものを試してみよう。

・・・やめた。

Twitter Bootstrapの中にヒントが有ると思ったけど、うーむ。

 

ちょっともう一回やり直し!

くそぉ。

 

@importもshadeも無し。

originalフォルダの_button.scssの中に関数を直接書くことにする。

 

Sass Color Generator

Sassのカラージェネレーター。よさげ。

 

_button.scssをこんな感じにして、完成した!!

//色の指定
$blue: #00acf0;
$orange: #bd853f;
$green: #31947c;
$red: #b9403e;
$black: #4a4a4a;
$purple: #8B008B;

//それぞれのボタンの設定。$colorは$btn-colorで設定されているものを引数とする。
@mixin btn-hover($color) {
color: #fff;
background-color: lighten($color,5%);
border-color: $color;
&:hover,
&:focus,
&.focus {
color: #fff;
text-decoration: none;
background-color: darken($color,5%);
}
}

//ボタンの設定
.btn-blue{
$btn-color: $blue;
@include btn-hover($btn-color);
}

.btn-green{
$btn-color: $green;
@include btn-hover($btn-color);
}

.btn-black{
$btn-color: $black;
@include btn-hover($btn-color);
}

.btn-purple{
$btn-color: $purple;
@include btn-hover($btn-color);
}

.btn-orange{
$btn-color: $orange;
@include btn-hover($btn-color);
}

.btn-red{
$btn-color: $red;
@include btn-hover($btn-color);
}

www.webcreatorbox.com

の引数を使う部分を参考にした。

こんな感じで、自分のしたようにTwitter Bootstrapを変えていけるかも・・・!

とりあえず、git add しておこう。

git push herokuも忘れずにね。

 

git checkout master 

git merge ブランチ名

git push heroku master

でHerokuにアップロードを確認。

またブランチで作業しよう。

git checkout ブランチ名。

 

ボタンの部分に active と disabled を追加しておこう。

activeは、若干濃くなる。

disabledは、クリックできなくなる。

 

うーん、うまく動作しないな。

 

お!うまく行った!

色が若干気に入らないので、調整して今日は終わろう。

 

うーむ、色が気に入らない。

カラーレベルを統一したい。明日調べよう。

ひとまず、これで動作は確認出来ている。

 

//色の指定
$blue: #0099cc;
$orange: #daa520;
$green: #008000;
$red: #ff1919;
$black: #4a4a4a;
$purple: #8B008B;

//それぞれのボタンの設定。$colorは$btn-colorで設定されているものを引数とする。
@mixin btn-hover($color) {
color: #fff;
background-color: lighten($color,5%);
border-color: $color;

&:hover,
&:focus,
&.focus {
color: #fff;
text-decoration: none;
background-color: darken($color,5%);
}

// .activeが追加された場合+5%暗く
&:active,
&.active {
background-color: darken($color,10%);
&:hover,
&:focus,
&.focus {
background-color: darken($color,15%);
}
}

// .diabledが追加された場合+5%明るくする
&.disabled,
&[disabled],
fieldset[disabled] & {
background-color: lighten($color,5%);
}

}

//ボタンの設定
.btn-blue{
$btn-color: $blue;
@include btn-hover($btn-color);
}

.btn-green{
$btn-color: $green;
@include btn-hover($btn-color);
}

.btn-black{
$btn-color: $black;
@include btn-hover($btn-color);
}

.btn-purple{
$btn-color: $purple;
@include btn-hover($btn-color);
}

.btn-orange{
$btn-color: $orange;
@include btn-hover($btn-color);
}

.btn-red{
$btn-color: $red;
@include btn-hover($btn-color);
}

Gitのブランチ等をいじってページを追加してみたり

Gitのブランチをいじれるようになれば、色々とめちゃくちゃやっても、その枝を払えばOKなんでしょ。ぐふふ。

という事で、Gitのブランチを作って、実験。

現在のブランチを確認する。

  • git branch

*master しかない。

ここに、破壊(hakai)というブランチを追加したい。

  • git checkout -b hakai

おお。git branchで確認すると、 hakai ブランチが作成出来た。

  • git checkout master

で、マスターに変更。 git checkout hakai としたら、hakaiに変更となるのか。

結合や削除に関しては、なんとなくできそうなので一旦保留。

hakai の状態で、railsの方を進めてみよう。

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう

 

の3.2の静的ページの追加からすすめる。

  • rails generate controller StaticPages home help

generateは g でも可能。

ひとまず、StaticPagesで良いかな。

うーん、Git Branchは作れているのだけど、Branchで作ったのをどこで動作確認したらいいんだろう。

Atomには表示されていないし。

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

が抜けてたため、静的なページが追加されていなかったのか。。

追加して、bundle install

これで、追加された。

Branchで追加されたのは緑色になっている。

Branchを削除してみようかな。

  • git branch -d hakai

error: Cannot delete the branch 'hakai' which you are currently on.

  • git checkout master

error: Your local changes to the following files would be overwritten by checkout:
Gemfile.lock
Please, commit your changes or stash them before you can switch branches.
Aborting

変更しているのが、残っているため切り替えができないようだ。

一度pushしてみよう。

Pushしたらチェックアウトできたな。

よし、マージするまえに削除してみよう。

お、追加されたものが全て削除されている。

なるほど・・・少し理解してきた。気がする。

 

じゃあ、改めてブランチを作るかな。

コントローラーに追加完了した。

一度追加完了したものに、Viewとかを追加するのってどしたら良いのだろうか。

mergeしよとしたときに、permission denied と表示されて原因を調査。

stackoverflow.com

 

Atomが影響していたみたいなので、Atomを閉じて対応したら、mergeできた。ちょっとめんどいな。

 

既に追加されているコントローラーに、何をしたらページを追加出来るのだろうか。

そんな疑問に俺が答えよう!(検索開始)

うん。なんか追加されるコマンドなさそうだね。

手動で追加してテストしようね。うん。まぁそれぐらい出来るよね。(願望)

 

さて、Twitter Bootstrapを導入したい。

qiita.com

を参考にすすめる。

gemに

gem 'bootstrap-sass'
gem 'autoprefixer-rails'

を記載し、bundle install

次に、 app/assets/stylesheets/ の中にある
application.cssapplication.css.scss に名前を変更してから
以下の2行を追加。

@import "bootstrap-sprockets";
@import "bootstrap";

bootstrap-sprockets は必ず bootstrap の上に書いてください。

jsのコンポーネントも使うので
app/assets/javascripts/application.js に以下を追加。

//= require bootstrap-sprockets

で使えるのを確認した。

 

Bootstrap Customの部分はまだうまく機能していないので、その部分については明日確認しよう。

そろそろコーディングに移れるかなぁ。

 
Bootstrap Customの設定が終わったら、マージしておこう。

マージは都度都度したほうが良さそうだなと思った。