レイアウトを作成する(その1)
WED(WeekEndDevelopers)のぽんたです。
開発スキルのないSIerからソフトウェアスキルを取得するため、WEDでモノづくりを計画しています。詳しい経緯はここ
今回から第5章(レイアウトを作成する)に入っていきます。
ふー、やっと第５章です。。。
この章では、アプリケーションにBootstrapフレームワークを組み込み、そして、カスタムスタイルを追加します。
た、これまで作成したページ (HomeやAboutなど) へのリンクをレイアウトに追加するそうです。
なんだか目に見えるものを作っていける感じでちょっと楽しくなってきました。
まずは準備としてgitでソース管理をしているのでブランチを切ります。
$ git checkout -b filling-in-layout Switched to a new branch 'filling-in-layout'
サンプルアプリケーションにリンクとスタイルを追加するために、サイトのレイアウトファイルapplication.html.erbにhtml構造を追加し、レイアウトファイルを更新します。この更新には、領域 (divタグ) の追加、CSSクラスの追加、サイトナビゲーションの起点となる領域の追加も含まれます。
$ cat app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"> </script> <![endif]--> </head> <body> <header class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <%= link_to "sample app", '#', id: "logo" %> <nav> <ul class="nav navbar-nav navbar-right"> <li><%= link_to "Home", '#' %></li> <li><%= link_to "Help", '#' %></li> <li><%= link_to "Log in", '#' %></li> </ul> </nav> </div> </header> <div class="container"> <%= yield %> </div> </body> </html>
今後のスタイル要素を利用するために、home.html.erbビューに特別な要素をいくつか追加します。
$ cat app/views/static_pages/home.html.erb <div class="center jumbotron"> <h1>Welcome to the Sample App</h1> <h2> This is the home page for the <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a> sample application. </h2> <%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %> </div> <%= link_to image_tag("rails.png", alt: "Rails logo"), 'http://rubyonrails.org/' %>
Ruby on Rails公式ページの https://railstutorial.jp/rails.png から画像をダウンロードして、app/assets/images/ディレクトリにおきます。
$ curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
100 13036 100 13036 0 0 5250 0 0:00:02 0:00:02 --:--:-- 8604
$ rails s => Booting Puma => Rails 5.2.3 application starting in development => Run `rails server -h` for more startup options Puma starting in single mode... * Version 3.12.1 (ruby 2.4.1-p111), codename: Llamas in Pajamas * Min threads: 5, max threads: 5 * Environment: development * Listening on tcp://localhost:3000
http://localhost:3000/static_pages/homeにアクセスすることで確認できました。
演習１
Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。リスト 5.4のコマンドを使って、図 5.3のネコ画像をダウンロードしてきましょう。
以下(リスト5.4)の通り実施しました。
$ curl -OL cdn.learnenough.com/kitten.jpg
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
0 0 0 0 0 0 0 0 --:--:-- 0:00:01 --:--:-- 0
100 138k 100 138k 0 0 47102 0 0:00:03 0:00:03 --:--:-- 86923
このままだと、app/assets/images/ディレクトリに配置されないんですよね。念のために確認します。
~/develop_environment/sample_app$ ls Gemfile README.md app/ config/ db/ lib/ package.json storage/ tmp/ Gemfile.lock Rakefile bin/ config.ru kitten.jpg log/ public/ test/ vendor/
演習２
mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください (参考: 5.2.1)。
app/assets/images/に配置するって事なのでしょうか？やってみます。
$ mv kitten.jpg ./app/assets/images/ $ ls app/assets/images/ kitten.jpg rails.png
演習３
image_tagを使って、kitten.jpg画像を表示してみてください (図 5.4)。
演習２ではファイルを移動させるところまでやりました。
ただこのままだとファイル名の関係で表示させる事が出来ないため、rails.pngを退避させて
kitten.jpgをrails.pngにリネームしてやります。
$ cd app/assets/images/ $ mkdir bak $ mv rails.png ./bak/ $ mv kitten.jpg rails.png
$ rails s => Booting Puma => Rails 5.2.3 application starting in development => Run `rails server -h` for more startup options Puma starting in single mode... * Version 3.12.1 (ruby 2.4.1-p111), codename: Llamas in Pajamas * Min threads: 5, max threads: 5 * Environment: development * Listening on tcp://localhost:3000 Use Ctrl-C to stop
無事確認することが出来ました！！
今回はここまで！では＾＾
