はじめに
webアプリケーションを作るための学習記録
(マッチングアプリを作る予定)
こちらのチュートリアルを片っ端から進めていく
【Ruby on Rails チュートリアル】
https://railstutorial.jp/
第5章レイアウトを作成する
まとめ
- HTML5を使ってheaderやfooter、logoやbodyといったコンテンツのレイアウトを定義しました
- Railsのパーシャルは効率化のために使われ、別ファイルにマークアップを切り出すことができます
- CSSは、CSSクラスとidを使ってレイアウトやデザインを調整します
- Bootstrapフレームワークを使うと、いい感じのデザインを素早く実装できる
- SassとAsset Pipelineは、(開発効率のために切り分けられた) CSSの冗長な部分を圧縮し、本番環境に最適化した結果を出力する
- Railsのルーティングでは自由にルールを定義することができ、また、その際に名前付きルートも使えるようになる
- 統合テストは、ブラウザによるページ間の遷移を効率的にシミュレートする
所感
- パーシャル初めて知った、確かにキレイになった。HTMLやCSSも早く慣れたい
- ルーティング改めてわかりやすいなと思った。どのリクエストをどのURLに送るとどのコントローラのメソッドを呼び出してくれるか
途中参考にしたページ
・HTMLでアンカータグを使う方法【初心者向け】
https://techacademy.jp/magazine/5796
・スタブ【テスト】 (stub)
https://wa3.i-3-i.info/word14933.html
スタブ:テスト対象から呼び出される代用品
ドライバ:テスト対象を呼び出す代用品
・よく使うcurlコマンドのオプション
https://qiita.com/ryuichi1208/items/e4e1b27ff7d54a66dcd9
curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png
-OLでURL先のファイルをリダイレクト有効でダウンロード
それを-oのファイルに出力
・CSSがもっと効率的に書ける!LESSの使用方法について。
https://www.qam-web.com/?p=11278
動的スタイルシート言語(CSSの拡張メタ言語)
これで書いたものをコンパイルするとCSSになる
・これからはcssはSassで書こう。
https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe
構文的にイケてるスタイルシート。LESSの別バージョン
・タイポグラフィとは?基本ルールと作り方 37の要点
https://saruwakakun.com/design/tips/typography2
要するに文字のデザイン
・【CSS初心者入門】hoverとは何?使い方も解説!
https://web-camp.io/magazine/archives/10923
リンクにカーソルが乗った時のデザイン
・【Rails入門】yieldとcontent_forを使ってページ毎にタイトルを変更
https://www.sejuku.net/blog/75657
共通レイアウトで個別レイアウトを展開するのがyield
共通レイアウトの一機能をくくり出すのがパーシャル?
・Sprocketsの仕組み
https://qiita.com/ttaka66/items/991a52081a92cb6c2738
アセットファイルにアクセスするためのパスを管理する(アセットパス)
・bootstrapで原因不明のエラー(File to import not found or unreadable: bootstrap-sprockets)
http://www.eggineer.info/entry/2018/01/31/165612
なんか知らんけど「custom.css」というファイルができていた、消したらエラー解消
・Sassの記法(SCSS構文)
https://qiita.com/takeshisakuma/items/1c40c42f61c6e751c0e3
・LESS変数一覧
https://getbootstrap.com/docs/3.4/customize/
・yieldについて
https://qiita.com/sanstktkrsyhsk/items/e7d27c6717b430302967
他のviewにあるものを引っ張ってくる
・AWS 別名(エイリアス)と初期リージョン
https://qiita.com/qt6hy/items/3539bc2fc7caef0d0755
AWSのアカウントエイリアスとデフォルトのリージョンを変更
・URLとURIの違いとは? パーツの構造・名称・意味も大解説!
https://webtan.impress.co.jp/e/2010/03/09/7539
URIが場所/名前を識別する大カテゴリ、URLは小カテゴリでいわゆる「http://~」
使用したコマンド
git checkout -b filling-in-layout
curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png
curl -o app/assets/images/kitten.png -OL cdn.learnenough.com/kitten.jpg
bundle install
touch app/assets/stylesheets/custom.scss
touch app/views/layouts/_shim.html.erb
touch app/views/layouts/_header.html.erb
touch app/views/layouts/_footer.html.erb
touch app/views/layouts/_rails_default.erb
ls app/assets
rails generate integration_test site_layout
rails test:integration
rails t
touch test/helpers/application_helper_test.rb
rails t
rails generate controller Users new
git add -A
git commit -am "Finish layout and routes"
git checkout master
git merge filling-in-layout
rails test