bootstrapで簡単にトグルナビゲーションバーを作る！
完成版
今回はこんな感じでナビゲーションのアイコンをクリックすると下にナビゲーションが出てくるようなトグルナビゲーションを実装していこうと思います。
なおこの実装にはbootstrapを用いているのでご了承。
また、これはスマホ版の画面であってpc画面になると表示が変わります。
こんな感じです。
右側のアイコン等が消えていますね
。今回はこんな感じのトグルナビゲーションを実装していこうと思います。
さっそくコードを書いていく
<body> <header> <!--navbarを使う宣言--> <nav class="navbar navbar-expand-lg navbar-light active"> <!-- ブランド名・ロゴ--> <a class="navbar-brand" href="#">Navbar</a> <!-- トグルのボタンを作る--> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navbarNav"data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!--開閉した時の中身--> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item "> <a class="nav-link" href="#">home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">about</a> </li> <li class="nav-item"> <a class="nav-link" href="#">work</a> </li> <li class="nav-item"> <a class="nav-link " href="#">contact</a> </li> </ul> </div> </nav> </header> </body>
上から順に説明していきますね。
まずnavbarを使うにはnavbarとnavbar{sm md lg xl}、カラースキームの指定が必要です。
カラースキームはnavbar-light以外にnavbar-darkなどを使うことができます。
後者を使うとナビゲーションバー全体が黒に変わります。きになる人は試してみてください。
ブランド名およびロゴ
次にブランド名やロゴをnavbar-brandを使って表す。
トグルのボタンを作る
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navbarNav"data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
・classの指定→必須
・data-toggle="collapse"→必須。collapseという単語から推測できると思いますがこれがないと開閉できません。
・aria-controls="navbarNav"→必須ではない
・data-target="#navbarNav"→必須。後々必要
・aria-expanded="false"→必須ではないがこれもSEO的にあった方がいいです。また、"true"にするとトグルメニューが空いている状態から始まります。
・aria-label→必須ではないがseo的にあったほうがいいです。
トグルメニューの中身を作っていく
<!--開閉した時の中身--> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item "> <a class="nav-link" href="#">home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">about</a> </li> <li class="nav-item"> <a class="nav-link" href="#">work</a> </li> <li class="nav-item"> <a class="nav-link " href="#">contact</a> </li> </ul> </div>
・<div class="collapse navbar-collapse" id="navbarNav">→開閉部分全体をdivで囲む。
・classの指定→必須。画面の幅によって表示の仕方を変える設定を行います。
・idの指定→必須。トグルの設定の時に後々必要といった理由はこれです。toggle-targetと同じ属性を与えてあげます。
・nav-linkとnav-item→必須。名前からも予測できるようにリンクになります。
まとめ
いかがでしたか？このナビバーをcssとjavascriptで作ろうとすると相当な時間がかかると思います。
bootstrapってとても便利ですよね〜
ぜひ試してくださいね！
コスパ最強！無料で髪が切れる！？高級美容院で無料で髪を切る方法！
みなさんこんにちはなかじーです。
今回は東京の高級美容院で無料で髪が切れる方法を教えたいと思います。
「無料で髪が切れるなんてどうせ紹介とかしなければダメなんでしょ？」という方！
まじで無料です。
早速その方法を教えたいと思います。
minimoというアプリを使う
無料で髪を切る方法はこのminimoというアプリを使うんです。ご存知の方もいるかもしれませんがこのminimoというアプリは
美容室・マツエク・ネイルサロン・エステ・リラクに特化した予約アプリです。
今流行りのマッチングアプリですね。
minimoでカットモデルになる
minimoを使って具体的な無料カットの方法を見ていきしょう。
minimoにはカットモデルを募集しているいわゆる見習いスタイリストさんが大勢いらっしゃいます。
その見習いスタイリストさんの練習台となって髪を切ってもらうんです！
見習いでも腕は一流
見習いと聞くと下手に切られたりするかもしれないと不安になるかもしれませんが、見習いのスタイリストさんでもやはり高級美容院に務めるだけあってめちゃくちゃうまいです。
いままで僕はminimoで何回も髪を切ってもらいましたが一度も失敗したことはないですし、めちゃくちゃかっこよくカットしてもらいました！
最後はトップスタイリストが見てくれる
どんなに上手くてもやはり見習いのスタイリストさんだと不安になりますよね。しかし安心してください。
本当のトップスタイリストさんが最後に仕上げてくれるのでトップスタイリストさんに髪を切ってもらうのと同然の仕上がりになります！
minimoで予約すると激安になる！
それでもトップスタイリストさんじゃないといやだという人は普通にminimoで予約するだけでも格安料金になるのでぜひ試してください！
だいたい半額以下になります！
まとめ
minimoを使って無料or格安で髪を切る方法でした！
この機会にminimoを使って無料or格安で髪を切ってみてください！
【プログラミング入門】『for』文を使った繰り返し処理
for文とは何か
for文というのはwhile文と同じループ処理の構文となります。
whileが何かについては以下の記事を参照してください。
for文とwhile文は全く同じ処理を行います。
for文とwhile文の違いは？
for文とwhile文の違いは構文の書きやすさです。どのように違うのか実際にみていきたいと思います。
これがfor文の命令です。
これがwhile文の命令です。
同じ処理を行なっているのに圧倒的にfor文の方が書きやすいのがわかります。
今回はwhile文だけについて言及しますが本来ならばdo...while文というのもありますこれらの違いは下の記事を参照してください。
for文を詳しくみていく
ではこのfor文について詳しく話していきます。
for文は簡単で左から順に
- i = 0という定義
- i <10の時にループをしてね
- i++で０に１ずつ足してね
という命令です。
この命令の結果は
このようになります。
continueとbreak文の違い
さてここでループを抜ける処理である
- continue
- break
について詳しく話していきます。
- continue→ループ処理を一回スキップ
- break→ループ処理を抜ける
このような違いがあります。具体的に例をあげて説明していきます。
continueを実行する
この処理は
- iが５の時にスキップしてねという処理になります
この結果が
この結果になります。
breakを実行する
この処理は
- iが５の時にループ処理を抜けてねという命令になります。
これが結果になります。continueと違って４以降がありません。これがcontinueとbreakの違いになります。
まとめ
今回はfor文とループ処理におけるcontinueとbreakの違いについて説明していきました。
なおこの記事は「ドットインストールを勉強した後のアウトプット記事」として書いています。
ドットインストールと内容がほぼ被っている思います。ご了承！
ではでは
世界一わかりやすい『while , do..while』文
while , do..while文とは
while , do...構文はループ処理を行う処理になります。
同じループ処理を行う構文にfor文というのがあります。while文とfor文は同じです。
while文を実際に出力してみる
上から順に説明していきます。
まず、
var i = 0;
で
i = 0と定義します。
次にiが10以下の時にwhile文を適用してね。という命令をします。
そしてコンソールに出力したいのでconsole.logを打ちます。
永遠ループには気をつけて
ここで僕も失敗したのですが
i++;
というコマンドを打ち忘れると大変なことになります笑
見出しにもある通り永遠に０がループします。制御不能です。
なぜ永遠ループするのか
なぜ永遠ループをするのかというともう一度さっき僕がタイプした命令を見ればわかります。
この命令は
iが10以下の時にループを回してねという命令でした。
もうお気付きの通り。
i++;
がなければ10以上の数字になるはずがないので永遠にループします。
まあ試しになんでも試してみて自分で体験してみる方が勉強になりますが。
ループを止めるもう一つの方法
ループを止めるには
break文を打てば止まります。
i++の代わりにbreak;を打てばループを止められることができます。
do..while文との違い
while文とdo...while文の決定的な違いは条件判定が後に来るか先に来るかの違いです。
do...while文は条件判定が後に来ます。
文で書いても伝わらないと思うので実際に動かしてみます。
do..while文を実際に動かしてみる
これがdo...while文になります。違いがわかりますか？違いがわかるようにwhile文も下に載せておきます。
条件判定というのは
while(i < 10)です。
この位置が先に来るか後に来るかの違いです。
出力にも違いが出る
じゃあ条件判定が先に来るか後に来るかで出力結果が変わってくるの？と思うかもしれませんが結果は変わる場合と変わらない場合があります。
上の例ではどちらも出力結果は変わりません。一つ結果が変わる例を出してみましょう。
iが200の時には出力結果が変わってしまいます。
どのように変わるかというとこの結果はwhile文では何も表示されなくなりdo..while文の時だけ結果が出力されます。
なぜかというとwhile文においてi＝200というのは条件判定の時点で条件に合致していないとみなされてしまうからです。
逆にdo...while文においては後に条件判定がきているためとりあえず200というのだけは出力されてしまいます。
それ200以降は条件に合致していないので出力されません。
このような違いがあります。
まとめ
今回はwhile文とdo...while文の違いについて説明しました。ぼくもまだまだ知識が足りないので補足説明や間違えていると思ったところは指摘してくれるとありがたいです。
ではでは
世界一わかりやすいjavascript「switch」文
switch文とは
switch文とはその条件によって処理を変えていくというものである。if文とswitch文の決定的な違いは条件分岐の多さである。
switch文の方が条件分岐が多い時に使う。
実際にswitch構文を書いてみる
まずdaiki="バカ"と定義する。
switch(daiki)でdaikiというのを出力する。
今回はweb上に結果を出力したいのでconsole.logを使う。
条件分岐は以下の通り。
- daiki ="バカ"→その通り
- daiki ="天才"→ワンチャン
- daiki =バカと天才以外→何も書いてないよ
と出力されるようにした。
default文の役割
default文はさっき見てもらったようにdaiki="バカ"と、daiki="天才"というのを定義したがそれ以外の時に対応できるようにしている。
つまり今回では"バカ"と"天才"以外が来た時。
break文がない場合
よくみるとbreak;というのがある。最初いらないんじゃね？と思ってbreak文を抜いてみたところ
このようになった。
簡単にいうとbreakがないと全てが表示されてしまうということになる。
まとめ
今日の備忘録はswitch文でした。始めたばかりなのでどんな時に役に立つのかあまり実感できていませんがかんたんなまとめでした。ではでは
rails tutorialの第二章『toy app』の備忘録＆かんたんなまとめ
ユーザーモデルのカラムを作っていく
今回はscaffoldを使って簡単にユーザー登録ができるようなアプリを作っていく。なので、まずはユーザーというモデルを作っていく。注意するべきところが、この表に書いてあるusersというのがモデルではないことだ。rails初心者はこのusersというのがモデルだと勘違いしてしまう。どうでもよくね？と思うかもしれないがとても重要。このせいで僕も混乱した。このusersというのはテーブル名である。つまりユーザーというモデルのなかにusersというテーブル名があることになる。そしてその下にあるidやnameなどがカラムになる。そしてその隣にあるintegerとかが「型」になる。ここを間違えると本当に混乱する。ていうか混乱した。
次にマイクロポストと呼ばれるコメントを投稿する機能を持ったモデルの設計をしていく。ここでもmicropostsというのはテーブル名なので注意。そしてカラムの中を見るとcontentというのがあるがこれは型を見てもらえばわかる通り「text」なのでコメントの本文がくることがわかる。ここで疑問に思ったのがなんでコメントをするのにuser_idが必要なのかということ。結論から言うとコメントとユーザーは紐づいてるから。例をあげるならtwitter。ツイッターはログインをしないと投稿ができないし編集もできない。つまりコメントをするのが誰かがわからなきゃだめだと言うこと。だからユーザーがここで入ってくる。
モデルの実装
$ rails generate scaffold User name:string email:string
このコマンドを打っていく。この大文字から始まるUserはモデルの名前。そのあとのnameはカラムの名前。そのあとの:stringが型の名前。さっき混乱したと言っていたがまさにここで、なんでさっきの箱にはusersと書いてあったのにこっちではUserなんだよって感じで混乱してた。
マイグレートをする
ここでもなんでマイグレートをしなきゃいけないんだろうってすごい疑問に思ってたんだけどつまりはゲームでいうセーブみたいなもんだと覚えた。
MVCモデルについて
ここの理解が本当に時間がかかった。rails初心者はこれだけ覚えておけば問題ないいんじゃないかってくらい重要。
↑今回作ったアプリのルーティング
↑今回作ったアプリのコントローラー（一部省略）
今回はユーザーを新規登録するのと関係しているnewアクションを例に説明していく。
- ユーザーを登録するというボタンを押す
- ルーティング内でそのボタンと関連があるnewアクション（今回はresourse:userの中）がコントローラー内で同じnewアクションを見つけ実行する。
- newアクションに基づくview（今回はapp/views/new.html.erb）が表示される。
この３の表示されたものが下の画面。
これを理解できないと自分で開発するときに手も足も出ない。また、User.newを＠のインスタンス変数に渡さなければいけない理由がいまだにわからない。とりあえず理解できてるのはこのインスタンス変数に渡さないとUser.newではビューでは使えないということ。
あとはほとんど理解できたので省略する。わからないところ等があったら意見を共有試合ましょう！
ではまた！
ruby on rails でコメントの実装をする 「備忘録」
コメントモデルの作成
まずはコメントモデルを作る。
名前と型は次の通り
名前：型
user_id :integer
topic_id :integer
body :integer
次にモデルの関連付けをしていく。
- コメントは一つのトピックを持っている。
- コメントは一人のユーザーを持っている。
- トピックは複数のコメントを持っている。
つまり
「topicモデル」に「has_many : comment」を、「commentモデル」に「belongs_to : user」を追加していく。
＊コメントとトピックの関連付けはすでに終えている。
コントローラーとルーターの設定
mvcモデルに乗っ取って行うので。まず先にルーターの設定から行っていく。
今回はresourseを使ってネストにしていく。
つまり、
config/routes
resources :topics do
resources :comments
end
としていく。
次にコントローラーの設定をしていく。
class CommentsController<ApplicationController
def new
@comment = Comment.new
end
def create
@comment = Comment.new(comment_params)
@comment.user_id = current_user.id
@comment.topic = params[:topic_id]
if @comment.save
redirect_to topic_path, success: '投稿に成功しました'
else
flash.now[:danger] = '投稿に失敗しました'
render : new
end
end
praivate
def comment_params
params.require(:comment).permit(:body)
end
end
これでコントロラーの設定ができた。
それぞれの設定の意図を説明していく。
１ , def new
→アドレス/new（ここではコメントのマークを押す）にアクセスされた時にコントローラー側でnewアクションが実行されるようにする。
２ , Comment.new
→コメントモデルのインスタンスが作られる。←これによってコメントのモデルの中にある各カラムが格納されるようになる。
３ , @coment = Comment.new
→２で作ったインスタンスを＠comment変数とする。＠をつけなければいけない理由はview側でもこのnewを使いたいから。
これによってview側でも＠を使うことができる。
次に、
def createについて 説明していく。
＠comment = Comment.new(comment_params)はnewメソッドを実行した時に送られてくる値を受け取るもの。これがないとデータが受け渡されない。
次に
@comment.topic = params[:topic.id]についてだが、これは送信されたurlに含まれた値を受け取っている。つまり、トピックのidを受けっとっている。だから、これでどのトピックかがわかる。
viewの設定
<div class="comment-new-wrapper" >
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">コメントをする</h1>
<%= form_for @comment, url:topic_comments_path do |f| %>
<div class="form-group">
<%= f.text_field :body, class: 'form-control' %>
</div>
<%= f.submit '投稿', class: 'btn btn-black btn-block' %>
<% end %>
</div>
</div>
</div>
</div>
ちょっとわかりづらいが備忘録なのでその辺は気にしない。
きになるのは
<%= form_for @comment, url:topic_comments_path do |f| %>
この部分。なんで直接urlを指定するの？とすごい疑問に思った。
いろいろ調べるとrailsでは複数形のパスしか作ってくれないということがわかった。
つまり俺が指定したいパス(正解のパス)がtopic_comments_pathで
railsが自動で作ってくれるパスがtopics_comments_pathらしい。だからエラーになってしまう。
このエラーで何時間戦ったことか。。。
まあ後はちょろかったからかかなくていいかな。
もしこの記事を見て間違ってるぞこのクソボケが！って方がいたらぜひ僕のツイッターに申し出てほしい。
こんなに偉そうに書いてるけど僕はrailsを初めて３週間なのでそこんとこよろしく！
