ヘッダー再び
スクロールダウンした時に、ヘッダー非表示
スクロールアップした時に、ヘッダーを表示
これをぜひとも導入したい。
昨日は、コピペでだめだったので、もう一度丁寧にやろう。
コピペすればOK～！というのは、やはりだめですな。。
あらためて、これに挑戦してみる。
HTMLからSlimに置換するのが億劫だった。
置換してくれないかなぁー。と思い調べる。
いやぁ。あるんですな。
素晴らしい。
うーん、動かない。
固定表示はされているし・・・
ででで、、、できたー！！
Javascriptをちゃんと読み込み出来ていなかった。
よっしゃ！これで微調整して進めれる！
デザインの問題発生。
うぅむ・・・ヘッダーの高さを固定
いや、ナビゲーションメニューを上に持ってくることにしよう。
ナビメニューのサイズも固定しないと、この固定ヘッダー使えないな。
という事で、サイズを固定しよう。
昨日 vh とか vw設定してたものを一度破棄。
よし、微調整終了！これで、ヘッダーメニューを完成としよう。
このページだけで、コンテンツを表示したい！
そう思って調べて、便利なコードを発見。
if current_page?(設定したパス) == true
これを用いれば、トップページのみ表示したい場合など、追加できる！！
下階層のページに、パンくずリストを追加するぞ！
ページタイトルが長くなるので、パンくずリストは横スクロール出来るようにしておきたいね。
と、その前にどうやって各ページのパンくずリストまとめるんだ・・・
グーグルで調べまくりだ。そして何らかの答えが見つかる。
gretel gem使ってパンくずリストの設定をしてみよう。
何か新しい事する前に、現状をPush Push!
はい、また適当にしたため、エラーがでましたよっと。
ちゃんと理解しましょうね。俺。
ちゃんと読みましょうね、ドキュメント。
No methodのエラーはもう怖くない！
サーバーを再起動で確認だ。
Bundle installした場合は、基本サーバーを再起動だね。
うまく行かなかったけど、読み込みはされている。
はて、なぜテキストで出てしまっていたのか。
それは、＝で結んでいたからだった。
slimでの記載は、＝＝で結ばなきゃだめだという事に気が付き、無事に対応完了！
ナビゲーションメニューを一つの管理画面で作って、まとめて管理する事をしたい。
これ良いまとめだなぁ。
と、脱線するのではなく、まずパンくずリストのデザインもちゃんとしないと。
パンくずリストの表示ができた・・・！
各ページのパンくずリストを作ろう。
ホームをアイコンに変更したいなぁ、どうしたラインだろう。
出来ないなぁ。
よし！パンくずリストの追加は、無事に完了！
今日は順調に進んでいるなっ！
今日は、あとはパンくずリストを横スクロールをつけるのを導入して終わろう。
俺の携帯で試しに表示したら、めっちゃ文字小さかった・・・
@mediaで微調整は後ほどしよう。
パンくずリストのよこスクロール。
まずはコピペで試してガッテン！
スクロールの出来たけど、ものすごく微妙。。
よし！できた！
今日は、ヘッダーのスクロール、パンくずリスト、パンくずリストの横並べ表示の3つ完成。
なかなか良いんじゃないっすか！？
ヘッダー完成！
昨日は不甲斐なかった。
今日はバッチリ眠ったので、大丈夫！若干頭がいたいけど、どんまい。
ヘッダー部分と、スクロール設定を今日は設けよう。
これ素晴らしいね。
クロームでモバイル版テストが未だにできない。
多分、携帯用の表示をしないとだめなんだろうなと思う。
IEでするのも面倒くさいので、仕方がないがFire Foxをインストールしよう。
Firefox良いな。
よし、これでストレス解消。
文字サイズを、変更させたい。
ホームページ制作 東京 【SKYGOLD】 / フリーランス WEBデザインオフィス » フォントサイズを「vw・vh」でビューポートの幅にあわせて可変させる
画面の横幅全体を「100vw」とみなしますので、
例えば、10vwと記述すると、「ビューポートの全体幅に対して1/10」のサイズになります。
画面の横幅が320pxの時に、14pxのフォントサイズで表示したいときは、
14px÷320px=0.04375(4.375%) となりますので、「4.375vw」と記述します。
とのこと。
％と同じような間隔で考えればよいかな。
これを設定すれば、それぞれのスマホで若干違うサイズが合ったとしても、変更対応できるな。
背景が、継承されない・・・なんでやねん！って何回も試していたが、継承されないようになっているんだね。
知りませんでした。
リンクの色がかわらない！
なんでだって思ったら、 a のタグを追加わすれというね。
a:link で aタグのリンク修正だと思ったら違ったでござる。
よし、ようやっといい感じになってまいりました。
vwとvhは、携帯で見ると良いかもしれないけど、そのままPCで見ると地獄だ。
PC用は、後日対応するとしよう。
次は、スクロールしたときに、ボタンがフォローしてくるのを導入。
RubyにJavascript読み込ませる方法って、どうすんだっけな。。
Railsで、任意のJavaScriptやCSSだけを読み込む - Qiita
これを実行してみる。
多分問題なさそうな気がする。
そして、うまく動作したが・・・色々と設定が必要だな。
カクカクするのが気になるな。もっとスムーズに表示されないものだろうか。
こっちのほうがよいな。
うーむ、うまくいかない。もっと真剣にやればできるだろうけど、適当にしているからな。
これよさそうあので、試してみる。
色々とやってわけわからなくなったので、一度元に戻した。
$ git reset --hard HEAD
で追加されたものを全て削除し、元にもどす。
これは良さそうだなぁ。
ヘッダーが上にスクロールした時に、表示するメニューを作れなかった。うーん、なんとか作り終えたい。
・・・だめでした。
あとで再度挑戦。
いよいよデザイン
今日から、いよいよデザインパートに移れる！
PC、モバイル両方対応するけど、レスポンシブルとか今考えるのめんどいので、モバイル版を先に作っていこう。
最初は、ヘッダーのよくあるボタンを押したらぴょこっと出て来るメニューバー。
あれ名前なんていうんだろう。
ドロワーっていうのか。
ドロップダウンメニューも良いなぁ。
名前わからないの、ここで知れるな。
三 はハンバーガーメニューか。
これかっこいいな。
この記事を読んで、ハンバーガーメニューやめても良い気もしてきた。
カテゴリも５つぐらいだから辞めてもよくね？
って思い始めてきたな。
うん、やめよう。
さて、早速作っていこうと思い、画面サイズをモバイルのシミュレーターにしたら、文字がやたら小さくに・・・
なんでやねん。 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というのを使うと良さそう。
調べてページャーを導入しよう。
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遅いね。
フォームはここを見るのが一番だという事に気がついた。
めでたしめでたし。
静的ページの移行、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が良さそうなので、導入してみよう。
gem 'bootstrap_form'
を追加して、bundle install。
applicationにもrequireを追加して、サーバーを再起動。
<、>、<%、%>などのタグを削除する。閉じタグは全て削除する
というのを忘れてしまう。
一度スリム化する。
というか、そもそも rubyの form_for の意味をよくわかっていないので、一度調べてみよう。
@userはテーブルデータなので、エラーが表示されてしまう。
これは、＠user = "" にしておけば、ひとまず回避。
= bootstrap_form_tag url: '/subscribe' do |f|
= f.email_field :email, value: 'name@example.com'
= f.submit
だと、表示を確認できた。
これの微調整をどうするかだなぁ。
<% %> は - ハイフンで出来るのを忘れてしまうなぁ。
<%= %> は＝でOKなのは理解した。
peartialは楽だなぁ。
素晴らしい。
さて、このフォームを自由に使いこなしたいけど一体どうしたらよいのやら。
うーむ。
構築の基礎であるアプリケーションフォームを二つ欲しい。
使えそう。
色々と調べてもちょっと進めなさそうなので、やはりパス。
淡々とそれぞれのページを移行するのに・・・寄り道してしまう。
ひとまず、rails bootstrap form は導入できたので、一度プッシュしよう。
まず、このフォーム文をなんとかしたい。
素直にここを読むか。。
を、できたできた。意味がわかってきた。
Sass にマージン追加とか、そこら辺を入れておいたほうが良さそう。
マージンとか、関数を使って設定しているが、時間かかるぅぅ。。。
配列がうまく使えればよさそうだなぁ。
一回一回、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の３パターンのそれぞれ上下左右のサイズ設定が可能となる！
テストできるのとても良いな。
今日は検索窓の追加と、SASSでサイズの追加しかしていないけど、まぁOK！ゆっくりぽちぽちやっていこう。
SASSの設定、fontawesome、Atomの設定
昨日の自分の設定したscssを見て、無駄だなと思うところをちょっと調整したい。
.btn-green{
$btn-color: $green;
@include btn-hover($btn-color);
}
って、
.btn-green{
@include btn-hover($green);
}
でいいやん。
そして、これらをひとまとめにしたい。
これがすごく使えそう！
ということで、早速やってみた。
//色の指定
$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だからエラーでているのかなと推測。
調べてみる。
gem 'font-awesome-sass'
にして、bundle install
requireの部分を削除して、@importに修正。
確認！！・・・エラー！！
この人と同じく俺もハマっていたようだぜ。。。
rails s を再度し直しして、表示したら・・・
ちゃんと表示された！！ヒャッハー！
これで、fontawesomeの導入も無事に完了！！
やるじゃん俺。
さて、git push。
今 atomを使ってるんだけどさぁ、fontawesomeのclassタグの候補でないのを出せるように出来ないかなぁ。
少し探したけど見つからないので、却下。
まぁいいや。
少し脱線して
ruby on rails おすすめ gem で検索してみよう。
ruby slimがなんか使いやすそう・・・
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
をインストールした。色がついたので、わかりやすくなったなぁ。
これで、slimでコードを書いていっても問題なさそう。
なんとなく・・・プログラマーっぽい！ｗ
スペースとか、タブとかもついでにわかるのないのかなぁ。
Atom - 半角スペース・タブ（不可視文字）を表示 - 開発メモ - Webkaru
普通に設定であった。
表示させると、全部・・・となっている。
>>となって欲しいのに。どうしたらなるの。
調べてたら、ちょっと違ったのが出てきたけど、・・・をもう少し濃く表示するといのがあったので、それを対応しよう。
Atomのスペースをはっきり見えるようにする · GitHub
見やすくなった・・・！
これはいいな。
いや、じゃなくてなんでTabを押してるのに、スペース扱いになるんだという点。
最初からここを見ればよかった。
うん、ここ素晴らしい。
show-ideographic-space
もインストールしておいた。
show indent guideにチェックをいれているんだけど、slimだとダラっと落ちてしまう。。
を導入したら、問題なく表示されたYO!!
これで、だいぶ操作しやすくなったはず。
うん、コーディング全くしてないね。設定ばっかりだね。
いや、重要だと思うんだよ。
これは。
あとで、ダラダラと書いているこの記事をまとめて、使いやすくしよう。行動記録は重要だよね。うん。
次は、Ruby on Railsで静的なページを追加しよう。
ちなみに、目標は静的なページを完璧に作り、プログラマに提供するです。はい。
