トップページの作成
このレッスンでは、トピックブランチでのページ制作作業を進めて行きます。ページの作成やページ完成時のマージを行い、トップページを作っていきましょう。
吉田先生
Webページには『静的ページ』と『動的ページ』の2種類があります。
『静的』なページの作成やページ完成時のマージを行い、トップページを作っていきましょう。
Webページについて
このレッスンでは、トピックブランチでのページ制作作業を進めて行きます。ページの制作に入る前にWebページについて少し解説します。Webページには『静的ページ』と『動的ページ』の2種類があります。
『静的』ページとはHTMLでつくられたページです。入力内容などによって表示されるページの中身はかわりません。
反対に『動的ページ』は「いつ」「誰が」見たか？など、条件に応じて表示される中身が変わるページのことです。
例えば、会員制のサイトにログインした時に「ログインに成功しました 〇〇さん」というように、会員ごとに表示される名前を変えたい場合などは『動的』ページを使います。
それではこれから『静的』なページの作成やページ完成時のマージを行い、トップページを作っていきましょう。
トピックブランチの作成
home（トップページ）用のトピックブランチを作成します。ターミナルで以下のコマンドを実行して下さい。
$ git checkout -b create-home
コントローラの作成
次に、home（トップページ）用のコントローラを作成します。また、作成したWebページの一覧を表示するindexアクションも同時に作成します。以下のコマンドを実行して下さい。
$ rails g controller home index
ルーティングを設定する
次に、ルーティングを設定します。このサイトにアクセスしたときに、最初に表示されるページを「home/index」に設定します。newsabelseのフォルダからroutes.rbのファイルを検索して【root ‘’home#index’】の文言を追加してください。
ブラウザで確認
アクセスしたときの表示を、ブラウザで確認してみます。確認には作業中ターミナルではない別のターミナルでサーバーを立ち上げている必要があります。
現在作業中のターミナルの右隣の+をクリックして、New Terminalを選択し、新たにターミナルを立ち上げておいてください。新しいターミナルで以下コマンドでコマンドでサーバーを起動します。
※サーバーの立ち上げについて不明な点があれば前回のチュートリアルを確認してください。
$ rails s
では、Cloud9での確認方法について説明します。まず、画面上部のPreviewをクリックしてPreview Running Applicationをクリックします。
ブラウザのタブで確認する場合は以下をクリックして下さい。
以下のようにブラウザに表示されれば、ルーティングの設定はOKです。
インスタンス変数を定義
次に、トップページに変更を加えていきます。home_controller.rbのindexアクションで＠helloというインスタンス変数に“Hello!”という文字列を代入します。
次に、index.html.erbを変更します。@helloを使ってトップページにHello!と表示するようにします。ブラウザを更新して以下のように表示されればOKです。
では、変更をコミットします。以下のコマンドを実行して下さい。
$ git add .
$ git commit -m "Create draft home"
ターミナルにcreateと表示されています。【$ git commit -m "Create draft home"】のコマンドの処理が進んでいるようです。
次に、create-homeブランチをmasterにマージします。masterブランチに移動して、マージを行って下さい。
$ git checkout master
$ git merge create-home
課題
新たにcreate-aboutブランチを作成して、aboutページを作成しましょう。about_controllerとindex.html.erbを作成して、「newsableについて」と表示出来るようにindex.html.erbに変更を加えます。
完成したら、add & commitを行いmasterにマージして下さい。そして、最後にGituhubへのプッシュも行ってみてください。
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。
