【プレミアム】 Ruby on Rails講座 49,800円

プレミアムサービスの方のみがご受講できます。

レベル

むずかしい

期間

1日約1時間で 14日間

レッスン


Ruby on Rails環境構築の目標

本格的なRailsアプリを作成・公開できるようになることを目標に、実際にアプリを作成しながら本格的な開発スタイルを学びます。

Gmailアカウントの取得

このレッスンでは、Gmailのアカウント作成やメールのテスト送信を行います。なぜGmailアカウントが必要かというと、この後のレッスンに出てくるGithubやHerokuなどのサービスで、認証を行う時に必要となる為です。

AWS Cloud9アカウントの作成方法を図解入りで詳しく解説

このレッスンでは、AWS Cloud9というサービスの登録・セキュリティの設定を行います。Cloud9の概要やメリット、セキュリティ設定方法について学んでいきましょう。

Cloud9でRails6の準備

このレッスンでは、開発環境であるCloud9にRailsをインストールしてアプリの作成を行い、アプリ開発の為の環境を構築します。また、Railsサーバーの起動・停止方法についても説明します。

Ruby on Rails6のインストール

それではターミナルで以下コマンドを実行してRailsをインストールしましょう。このチュートリアルではRails 6.0.1というバージョンを使用します。

Railsサーバーの起動と停止方法

Railsサーバーの起動と停止方法を解説します。

Gitの準備

このレッスンでは、Gitについて学んでいきます。Gitとは何かを理解し、実際にGitコマンドなどを使いながら、Gitの使い方を覚えましょう。

Githubの準備

このレッスンではGithubアカウントの開設を行い、実際に使用していきます。リモートリポジトリやGithubのコマンドについて学び、Githubの使い方を覚えましょう。

Herokuの準備

このレッスンでは、Herokuアカウントの開設方法を説明していきます。Herokuは制作したアプリを簡単に公開するために使用するものです。

まとめ

Railsアプリ作成の準備として以下6つの作業を行いました。【Gmailアカウント作成】【AWSアカウント作成】【Cloud9でRails5.2の開発環境作成】【Gitの準備】【Githubの準備】【Herokuアカウント作成】

【課題】架空の動物園サイトを作ってみよう(準備編)

Cloud9でRails環境を作成する実習になります。

Gitブランチを作成して作業開始

このレッスンでは、Gitの機能のひとつであるブランチについて学びます。実際に使用しながら、ブランチの概要やメリットについて理解を深めていきましょう。

トップページの作成

このレッスンでは、トピックブランチでのページ制作作業を進めて行きます。静的なページの作成やページ完成時のマージを行い、トップページを作ります。

Herokuへのデプロイ

Herokuとはレンタルサーバーのようなもので、デプロイとは制作したプロジェクトを公開するための作業です。このレッスンではデプロイに必要な準備を行い、実際にHerokuへデプロイを行います。

Herokuの修正デプロイ

このレッスンではScaffoldでブログ機能を作成して、修正した内容をHerokuにデプロイします。

まとめ

これから作成する本格的Railsアプリ「Newsable」について

Railsアプリの企画を作成する

まず、アプリケーション定義を確認しましょう。Newsableは、ニュースをかんたんに集めて意見できるプラットフォームです。

ユーザーの作成

この項目では、Deviseのインストール方法やgem・deviseについて学びます。

Deviseでユーザーの作成

この項目では、Deviseでユーザーを作成する方法やMigrationファイルについて学びます。

メールの設定

メール認証の仕組みを利用できるようにした後は、Railsアプリでメールの送信を行う為の設定が必要になります。流れを見ながら確認しましょう。

Deviseのメソッド

Deviseで認証をかけるだけでは一般ユーザーがブログを閲覧できなかったり、ログインしているユーザーにもログイン画面の表示がでたり…といくつか問題があります。それらはDeviseのメソッドを使うことで解決できます。

DeviseのView

DeviseViewについてやViewのディレクトリについて学びます。

仕上げ

GitのコミットやGithubへのプッシュ・Herokuへのデプロイを行います。

クリップ機能の作成

クリップを作成しニュース記事登録の際にはURLの入力のみでニュースタイトルなどの他の情報を自動で取得するようカスタマイズしていきましょう。

記事登録の自動化

この項目では、MetaInspectorというGemの導入方法や使い方を学びます。また、MetaInspectorをターミナルでも試してみます。

Metainspectorの実装とデバッグ

Metainspectorをコントローラで使用します。そして、デバッグの仕方やByebugの使い方についても学びましょう。

エラー処理

現時点ではエラーが、Railsのエラー画面そのままの表示になってしまっています。これではユーザーにはどのようなエラーが出ているのか伝わりません。このような問題をエラーハンドリングで解決していきましょう。

Herokuでのデバッグ方法を知る

Better Errorsという便利なデバッガーを入れてみましょう

モデルにコードを書くこととMVCパターン

これまでの教程では、コントローラやビューにコードを書いてきました。この教程では、モデルにコードを書いていきますがその前に、なぜコントローラではなくモデルに書くのか、モデルにコードを書く必要がある時とはどのような時なのかについて押さえておきましょう。

モデルにメソッドを自作する

インスタンスメソッドはオリジナルのものを作成する事も出来ます。その作成方法や設定方法について見ていきましょう。

Railsのコールバック

コールバックとは、保存・更新・削除する前や後にメソッドを呼び出せる機能です。この項目では、コールバックの書き方や実装方法について学んでいきます。

クリップに実装する

多対多を理解する(ユーザーごとにクリップ作成?)

前教程まででクリップ機能を実装してきましたが、誰が作成したクリップかはわからない状態です。これを、クリップとユーザーを関連付ける事で明確にします。そのためには、多対多という関連付けが必要です。この項目では、多対多についてやクラス図からコードをジェネレートする方法を学んでいきます。

ユーザークリップの関連付け

この項目では、多対多の関連付けについてもう少し理解を深めていきましょう。データベーステーブルの中身についてや、コンソールでの試し方などを学びます。

自分のクリップを作成する

この項目では、ユーザークリップフォームの作成などユーザークリップをビューに実装していきます。また、データが存在するかしないかの確認方法や、ユーザークリップとクリップデータの作成方法などについても学んでいきましょう。

ビューの実装

この項目では、ビューの実装を行います。フォームのエラー表示を変更したり、ユーザーごとに表示を変えるためにコントローラやビューに変更を加えます。

【Ruby on Railsアドバンス講座 8】 デザインの実装

この項目ではBootstrapの導入を行い、Bootstrapのクラスを実際に使用してみます。今回はトップページを作成する過程を通じてデザイン実装を学びます。

Bootstrapのグリッドを実装する

この項目では、グリッドについて学びます。基本的なコードの書き方や、実装方法について理解を深めていきましょう。

ナビゲーションバーの実装

この項目では、ナビゲーションバーの作成方法を学びます。ナビゲーションバー用のクラスを使用して、ナビゲーションバーのカスタマイズも試してみましょう。

ヒーロー(ビッグイメージ)の実装

カード部分を実装する

この項目では、BootstrapのカードデザインについてやRailsとの連携・実装方法について学びます。

フッターを作成する

この項目では、フッターを作成しながらフッターのHTML・CSSについて学びましょう。フッターとは、サイトの情報などを表示するべき部分です。例えば会社概要やコンテンツ情報などを表示します。

クリップ詳細ページ

この項目では、クリップ詳細ページのデザインを実装していきます。また、編集・削除の禁止も追加しましょう。クリップのデザインについては、以下のようにニュースの詳細が見れるようにします。

アラートをもっと見やすく

この項目では、Bootstrapのアラートの実装方法について学びます。アラートとは、警告や処理の結果を表示するためのものです。

オピニオンの基礎作成

オピニオン機能の基礎となる部分を作成します。

オピニオンの実装 1

この項目では、新規オピニオンの作成の為のフォームを実装します。createアクションでは、mergeというメソッドを使用します。このメソッドの使い方などについても学びましょう。

オピニオンの実装2

オピニオン一覧を作成します。また、フォームデザイン実装の為にCSSを編集していきます。

バリデーションの追加

ユーザーフローの理解とそのツールについて

本レッスンではペルソナを作成します。ペルソナとは、実在のユーザーの情報を元に作成した、架空のユーザーです。実在する人物化のように具体的に作成します。

クリップにオピニオンカウンターを追加する

このレッスンではRailsに備わっているcounter_cacheという機能を使って、クリップにオピニオン数の表示を追加します。オピニオン数の表示があることによって、そのクリップの盛り上がり度も一目で分かります。

アイコンを作成する

このレッスンではFontAwesomeというgemを使用して、デザイン実装の際にアイコンを使う方法について説明していきます。前回追加したオピニオンカウンターのビューの実装を行いながら、FontAwesome Gemのインストールや実装方法を学びましょう。

文字表示を整える

このレッスンでは、truncateというメソッドを使用して長い文字を短く省略する方法について説明します。また、truncateにはオプションが用意されています。このオプションなどを使用した、高度な使い方についても学びましょう。

日本語化する

現在、オピニオン作成後のOpinion was successfully created.というメッセージや、Deviseのメッセージは英語表記になっています。このレッスンでは、これらのメッセージを日本語化する方法を学んでいきます。

オピニオンの詳細画面

このレッスンでは、オピニオン詳細画面の仕上げを行います。Bootstrapのcssクラスなどを用いて、レイアウトやデザインを完成させましょう。

ライクの基本実装

このレッスンでは、ライク機能の基本部分を実装します。クラス図からScaffoldでライクを作成し、それぞれのモデルに関連付けを行います。

ライクの実装

Ajax化する

このレッスンではAjaxについて説明します。Ajaxの概要や実装方法を学び、ライク機能にAjaxを実装してみましょう。

Railsのモデルとオブジェクトを知る

ここではRailsのインスタンスメソッドを学び、きれいなコードが書けるようにします。

ヘルパーの実装

この項目では、ヘルパーの実装を行います。ヘルパーやRubyのstrftimeについて学んでいきましょう。

ユーザーフローの作成方法

ユーザーがとる行動のことをユーザーフローと言います。今回の場合は大きく2つのユーザーフローが考えられます。

ポリモーフィックを理解する

このレッスンでは、コメント機能を実装します。コメントモデルは、ポリモーフィックという種類の関連付けを設定します。データ構造などポリモーフィックについて学んでいきましょう。

ポリモーフィック・コメントの実装

このレッスンでは、ポリモーフィックの場合のroutesやレコード作成のコントローラ設定などについて学びます。コメント機能実装の仕上げを行っていきましょう。

クラスメソッド

この項目では、クラスメソッドについて学んでいきます。クラスメソッドを書いたり、ターミナルで試したりします。クラスメソッドとは、クラスから実行可能なメソッドです。

データフロー(モデリング)

データフローとは、データの流れを図にしたものの事です。モデリングとは、モデル設計というような意味です。このレッスンでは、データフローの作成・モデリングを行い、最後にはモデル同士の関連付け定義も行います。

×