トップページの長ったらしいコードをスッキリさせる

前回までアカウント関連のところをいじってきたので 今回は最初のトップページのコードを省略して行こうと。

現状はこんな感じ。スクリーンショット 2017-08-03 14.39.42.png

んー。これじゃ情報量の多いトップページにした場合 とんでもない量のコードになってしまう。。

いくらインデントやらつけて行もわざわざ開けて読みやすくしても このままだと後々改良しようとした時にどこに何があるかわかりにくくなるな。。

よし、navbarの部分省略しよう。

前回までと同じようにrenderで省略して。。スクリーンショット 2017-08-03 14.50.00.png

これでよし。さて確認。スクリーンショット 2017-08-03 14.51.34.png

おっつ。一番上白くなっとるやん。。 んーどうもdefaultの方じゃなくdeviseの方を読み込んでるみたい。

まぁ考えたらわかることでdefaultを使うことを宣言するコードを 削除してしまってるしなぁ・・。 しかし参った。これじゃ綺麗にできねぇじゃん。

さてどうしたものか。。

 

(ここで眠気に勝てず30分爆睡)

 

そういえば前になんかの本でrailsでもJavaScript使えるのをちらっとみた気がする ってことはなんかスクリプトで表示できたりするんちゃうやろか。。 ↑寝起き早々冴えてるのかボケてるのかわからん思考。

まぁとりあえず、ググってみよ。

(検索・・)

・・え、嘘やん。

思っ切りrailsガイドに書いてるやん。 しかも日本語版のサイトできてる。。

今まで英語版しか見たことなかったからこれはアツいぞ。 しかも開発元がrailsチュートリアルの日本語翻訳してるヤスラボさんやん。 これは信頼度高し!

※後で知ったけど翻訳されたサイトは前からあったらしいけど まだそこまで翻訳しきれてる範囲が少なかったのでなかなか出てこなかったのか それとも検索の仕方が間違ってたのか探し当てることができなかった

個人的に若干ではあるもののJavaScriptはかじったことがあるので なんとなくの思うがままに書いてみることに。

とりあえず、JSの宣言せなあかんのちゃうやろか

調べたらこんな感じで書くだけでいいとは。。

要は「スクリプトの記述をこれからJavaScriptで書くことを宣言しますよ」ってことらしい

うん。正直自分でも意味はわかってないけど ちゃんと機能してくれたらそれでいい。 ↑それ一番あかんやつやん

まぁなんにせよとりあえずコードを書いてみる。

$(function(){ $(".navbar").removeClass("navbar-devise"); $(".navbar").addClass("navbar-default"); });

ここで、何がしたいかというのも deviseのクラスを一旦削除して、defaultのクラスに変更して読み込ませようとしているとこ。

多分、これで動いてくれるはず。。スクリーンショット 2017-08-03 16.11.24.png

よかった!エラーも出ずにちゃんと反映されてる! このままついでに左上のサイト名称をクリックしたら ホームに戻るようにしときたい。

現状のままだと何もリンクにしてないので ただ単にページを更新するだけになってしまう。

確か一番最初に作った時Brandになってたような気がする。 navbarのファイルを確認してみると

<a class="navbar-brand" href="#">Mu-fun</a>

あったあった。

確かこの「#」を「/」に変えたらホームに飛ぶようになるんやなかったっけ・・。

<a class="navbar-brand" href="/">Mu-fun</a>

これでいいか。見てみよう。 一旦ログインに飛んでから・・

スクリーンショット 2017-08-03 16.19.24.png

ここで左上クリック。スクリーンショット 2017-08-03 16.19.38.png

よし、でけた!

んーウィンドウの大きさのせいか 画像の真ん中の文字が微妙に崩れてる・・。

CSSの定義がうまいこといってないんか。 これも課題にせなあかん・・くそう。。

まぁなんにせよ今回やらなあかんことはできたし 良きにはかろうやないか(いきなり何様やねん)

 

ってことで今回はこれまで。

 

ではー。

この記事をシェアする