(詳細は私の名前をGoogleで検索してみてください)。乗り換えることができました。チュートリアルという本です。関連の本を参考にしてきましたが、真の決定版と呼べるものは本書をおいて他にありません。流」で行われています。最初のうちは慣れるまでに時間がかかりましたが、この本を終えた今、ついにこれこそが自然な方式だと感じられるまでになりました。全編を通して実践しています。実例を使ってここまで分かりやすく解説された本は、本書が初めてでしょう。実例に含めている点です。このような、実際の開発現場で使わているツールもチュートリアルに含まれているため、読者は、まるで実際のプロジェクトの開発プロセスを体験しているかのような感覚が得られるはずです。それでいて、それぞれの実例が独立したセクションになっているのではなく、そのどれもがチュートリアルの内容と見事に一体化しています。本書は、筋道だった一本道の物語のようになっています。チュートリアルを3日間かけて一気に読破しました1。最初から最後まで、途中を飛ばさずにやるのが一番効果的で有益な読み方です。3分のTEDの動画「社会運動をどうやって起こすか」を観たことがある方もいるのではないでしょうか。その方からの推薦の言葉です。多くを参考にさせてもらっています。協力と本書への支援も含め、感謝したいと思います。氏にも謝意を表したく思います。彼女が野球の試合に連れて行ってくれる限り、私は本を書き続けるでしょう。方々、ありがとうございました。最後に、ここに書ききれないほど多くの読者からバグ報告や提案を頂きました。ご協力いただいた皆様のおかげで、本書の完成度をとことんまで高めることができました。Donahoe、日々のチュートリアルの制作をサポートしてくれてありがとう。最後に、たくさんの読者の皆さん、そして、ここに挙げきれないほど多いコントリビューターのみんな、バグ報告や提案をしてくれてありがとう。彼ら/彼女らの多くの手助けに、最高の感謝を。開発を学ぶときによく参考にされる本の著者です。教育系ウェブサイトの創業者でもあります。ベースのSNSプラットフォーム「Insoshi」の開発にも携わっていました。ハーバード大学卒業後、カリフォルニア工科大学で物理学博士号を取得。ライセンスの元で提供されています。「すべてのソースコード」とは、Railsチュートリアル内で題材としている「Railsアプリケーションのソースコード」を指します。「Railsチュートリアル」という教材は上記ライセンスで提供されていないのでご注意ください。商用でRailsチュートリアルをご利用する場合はお問い合わせページからご連絡ください。実際には数週間〜数ヶ月をかけて読むのが一般的です。4.3.4で指摘したとおり、このスタイルシートはまだ空のままです。この章では、アプリケーションにBootstrapフレームワークを組み込み、そして、カスタムスタイルを追加します1。Pipelineについて学び、さらにSassについても紹介します(5.2)。本章では、サンプルアプリケーションにレイアウトを追加したり、修正したりといった部分に注力していきます。3.3で解説します)。このため、本章ではテキストエディタによる修正とブラウザによる確認がほとんどになります。テスト駆動開発で進める唯一の箇所は、5.3.1のContactページを追加する箇所のみです。統合テストを使って、最終的なレイアウトやリンクが正しいかどうかをチェックします。構造を追加するRailsチュートリアルはWeb開発のための本であり、Webデザインの本ではありませんが、だからといって何のスタイルもない寒々しい外観のアプリケーションでいつまでも作業を続けていると憂鬱になってしまいます。そこでこの章では、レイアウトにいくつかの構造とCSSを与えて、最小限のスタイルを追加します。カスタムCSSルールの他に、Twitter社によるオープンソースのWebデザインフレームワークとして公開しているBootstrapも利用します。コードそのものにもスタイルを与えます。機能を使って整えていくということです。Webアプリケーションを作成するときに、ユーザーインターフェイスの概要をできるだけ早いうちに把握しておくことがしばしば有用です。いう、実装後のアプリケーションの外観をスケッチして使っていきます2。本章では、主に3.2で紹介したサイトロゴ、ナビゲーションヘッダー、サイトフッターを含む静的ページを開発します。5.9で確認することができます。(例えば、実際には最後にRailsのロゴをページに追加します)。モックアップは正確である必要はありませんので、これで十分です。サンプルアプリケーションのHomeページのモックアップGitでバージョン管理をしているのであれば、これまでと同様、この時点で新しいブランチを作成するのがよいでしょう。HTML構造を追加し、レイアウトファイルを更新します。追加、CSSクラスの追加、サイトナビゲーションの起点となる領域の追加も含まれます。続いて、これを構成している多くの部品について解説します。(注:この時点ではわざわざ見に行くほどの仕上がりではありませんが)。5.1の新しい要素を上から順に見ていきましょう。html>と書いてHTML5であることを宣言します)。HTML5のサポートが不完全である場合があります。shiv))3を使ってこの問題を回避します。</script><![endif]-->上のコードには、次のような奇妙な構文が含まれています。囲まれている行を実行します。Railsの一部ではありません。Explorerで特別にサポートされています。shimを読み込めるため、非常に好都合です。いくつかの領域、ナビゲーションリンクのリストがあります。</div></header>headerタグは、ページの上部に来るべき要素を表します。このheaderタグには、navbar、navbar-fixed-top、navbar-inverseという3つのCSSクラスがスペース区切りで与えられています4。navbar-inverse">すべてのHTML要素には、クラスとidの両方を指定することができます。クラスとidの主な違いは、クラスはページ内で何度でも使えるのに対し、idは一度しか使えない点です。今回の場合、すべてのnavbarクラスには、5.1.2でインストールするBootstrapフレームワークによって特別な意味が与えられます。headerタグの内側にはdivタグがあります。class="container">divタグは一般的な表示領域を表し、要素を別々のパーツに分けるときに使われます。古いスタイルのHTMLでは、divタグはサイト内のほぼすべての領域で使われていました。HTML5からはよく使われる領域ごとに細分化できるようになり、具体的にはheader要素、nav要素、section要素が新たに使えるようになりました。与えていますが、このクラスもBootstrapにおいて特別な意味を持っています。divに続いて、埋め込みRubyコードが出現します。(3.2.2で見たアンカータグaが最終的に生成されます)。link_toの第1引数はリンクテキスト、第2引数はURLです。URL「'#'」を置いておきます。logoを指定しています(他の3つのリンクにはオプションハッシュが指定されていませんが、必須ではないので構いません)。Railsヘルパーは、このようにオプションのハッシュを取ることがよくあり、これによりRailsのコードから離れることなく任意のHTMLオプションを柔軟に追加することができます。divの内側の2番目の要素は、リストアイテムタグliと順不同リストタグulによって作られた、ナビゲーションリンクのリストです。</ul></nav>正確にはここでは不要なのですが、navタグには「その内側がナビゲーションリンクである」という意図を明示的に伝える役割があります。ulタグに付与されているnavやnavbar-nav、navbar-rightクラスもBootstrapにおいて特別な意味を持ちます。したがって、5.1.2でBootstrapのCSSを追加したときに、これらのスタイルも自動的に適用されます。ブラウザからソースを見ることで確認ができますが、Railsが埋め込みRubyを評価し、レイアウトを描画すると、上のリストは次のように置き換わります5。</ul></nav>これがブラウザに返されるHTMLになります。レイアウトの最後の部分は、メインコンテンツ用のdivです。%></div>上と同様、containerクラスもBootstrapにおいて特別な意味を持ちます。3.4.3で学んだように、yieldメソッドはWebサイトのレイアウトにページごとの内容を挿入します。5.1.3で追加するサイトフッターを除いて、これでレイアウトは完成しました。Homeページへアクセスして表示結果を確認することができます。%>第7章でサイトにユーザーを追加するときに備えて、最初のlink_toで次のような仮のリンクを生成します。now!</a>上で挙げたdivタグのCSSクラスjumbotronや、signupボタンのbtnクラス、btn-lgクラス、btn-primaryクラスはすべて、Bootstrapにおいて特別な意味を持ちます。2番目のlink_toでは、引数として画像ファイルのパスと任意のオプションハッシュをとるimage_tagヘルパーの能力が示されています。このヘルパーでは、シンボルを使ってalt属性などを設定できます。一方で画像を表示するためには、rails.pngというRailsのロゴ画像ファイルを加える必要があります。画像をダウンロードして、app/assets/images/ディレクトリにおいてください6。(アセットパイプラインについては5.2で説明します)。これで準備は完了です。再起動を試してみてください。5.2のような結果になるはずです。カスタムCSSを使っていないHomeページimage_tagの効果を確かめるために、ブラウザから生成されたHTMLを見てみましょう7。Railsが追加していることがわかります。これは、例えば画像ファイルを新しい画像に更新したときに、ブラウザ内に保存されたキャッシュに意図的にヒットさせないようにするための仕組みです。いうディレクトリ名が含まれていないことにも注目してください。これは高速化のための仕組みで、Railsはassetsディレクトリ直下の画像をapp/assets/imagesディレクトリにある画像と紐付けています。これにより、ブラウザから見るとすべてのファイルが同じディレクトリにあるように見えるようになります。このようなフラットなディレクトリ構成を採っていると、ファイルをより高速にブラウザに渡すことができるようになります。最後に、alt属性は、画像がない場合に代わりに表示される文字列です。視覚障害のあるユーザーが使うスクリーンリーダーでは、ここの属性が読み上げられて、そこに画像があることが示されます。思っていたよりもみすぼらしいでしょうか。今回HTML要素に理にかなったクラスを付与したおかげで、CSSを使ってスタイルが追加できる素晴らしい状況になりました。演習Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。5.3のネコ画像をダウンロードしてきましょう8。