2 : Ruby on Rails の基本

前の章:ウェブページとは?

Header2

0 : この章の目的

 Ruby on Railsを使ったウェブページ作成について大まかな理解を得て、Ruby on Railsの環境構築を終了させる。


1 : Ruby on Rails

この章から、実際のウェブページの作成の方法を説明していきます。
ここでは Ruby on Rails というソフトウェアを使い、ウェブページを作っていきます。

前の章で「ウェブページはデータの表示と保存」をしていると説明しましたが、Ruby on Rails では、出来上がっている雛形に「データの表示と保存」を自分で設定していくことでウェブページを作っていきます。

 Ruby on Railsではデータの表示と保存を自分で設定しながら、ウェブページを作る。
 Ruby on Railsではなにを「自分で設定」しなければならないのでしょうか?

自分で設定するものは2つあります。
1つ目はページ、2つ目はデータです。

 ① : Ruby on Railsのページ


Ruby on Railsでウェブページを作るときには、ページをどのように表示させるかを自分で設定しなければなりません。

ですがウェブページではデータを表示させるだけでなく、発信されたデータを保存する必要があるので、Ruby on Railsではデータの表示と保存の方法で、作るページの役割が決まっています。

データの表示と保存は、
  • 保存されたデータの表示
  •  例:ツイートを表示する

  • データの作成
  •  例:ツイートを作成する

  • データの編集
  •  例:プロフィールを編集する

  • データの削除
  •  例:ツイートを削除する

の4つがあり、それぞれに合わせたページを設定します。

Twitterを例にページの役割をもう少し詳しく説明していきます。
 保存されたデータの表示
Tweet index and show データベースに保存されたデータを表示させます。
データベース内の全てのデータを表示するページと、データベースから1つのデータを選択して表示するページからできています。

2種類あるのは、タイムライン1つの投稿のページの違いと考えてもらえれば分かりやすいかと思います。
※ データベースからデータを表示しないページを表示させることもできます。(ランディングページみたいなページ)
 データの作成
Tweet new 入力させたデータをデータベースに保存します。
データを入力させるページと、入力したデータを送信して保存させるページの2つのページからできています。
 データの編集
Tweet edit 入力された内容に選択されたデータベースの内容を変更します。
これも、データを入力させるページと、入力されたデータを送信して内容を変更させるページからできています。
 データの削除
Tweet destroy 選択されたデータをデータベースから削除します。
 Ruby on Railsでは、データの表示・作成・編集・削除の4種類のページをどのように表示させるかを自分で設定していきます。


 ② : Ruby on Railsのデータ


Ruby on Railsでは、データの表示と保存の方法に応じてページに役割が振り分けられていることを説明しました。
ページがデータの表示と保存に応じて、決まっていることは説明しましたが、実際のデータの保存はどのように行われているのでしょうか?
前の章で利用者が発信したデータは、ウェブページを動かしている機械(サーバー)の中にあるデータベースに保存されると説明しました。
Fb save data
例えばFacebookの投稿であれば、

利用者の投稿
  • 投稿した人の名前は「山田太郎」
  • 投稿した内容は「Hello world」
  • 場所は「東京都新宿」
  • 画像は「なし」
  • などなど...

のような情報でサーバーに送信され、それがサーバー内のデータベース(Excelの表)に保存されます。

Ruby on Railsで保存されるデータもこれと同じで、利用者が発信した情報はウェブページの機械(サーバー)の中のデータベースに保存され、それがページに表示されます。
このデータを保存するためのデータベース(Excelの表)の作成と、実際のデータの保存・変更・削除をRuby on Railsで設定していく必要があります。
  • データベースの枠組みの定義
  • Facebookの例でいうと、名前・内容・場所を保存するためのデータベース(Excelの表)を作る。

  • データベースへの代入と保存
  • ページで入力され送信されたデータをデータベースに保存・変更・削除をする
をします。

 ⑴ : データベースの枠組みの定義


データベースに情報を保存するには、まず中身にどのようなデータをいれるかを決める必要があります。
Excelを使う時も、データをいれる前にどのようなデータをいれるかを一番上の行に書いていきますよね?

これと同じように、利用者が発信した情報を保存するデータベースにも一番上の行が必要になります。
このデータベースの一番上の行が、発信された利用者の情報の受け皿になります。
Ruby on Railsでデータを扱う際には、このデータベースの一番上の行の定義、データベースの枠組みの定義が必要になります。

amazonの商品を例に説明しましょう。 Amazon expensive amazonの商品には「商品名・値段・画像・レビュー」などの情報があり、データベースではこれらの情報が保存されています。
基本的なデータベースの枠組みは下のようなものになるでしょう。 Amazon database
 Ruby on Railsでは、このようなデータベースの1番上の行を定義を自分で設定します。
 Twitterのデータベースの枠組みがどのように定義されているのか考えてみよう!


 ⑵ : データの代入と保存


ウェブページではユーザーが入力した情報に応じて、新しいデータがデータベースに追加されていきます。
Facebookの投稿で言うと、あなたが投稿するたびにデータベースにはあなたの投稿したデータが追加されていきます。 Fb database ページはデータベースへの代入・保存の方法で役割が分かれていますが、そこではデータの保存は行われないので、データの操作はページの役割とは別に自分で設定しなければなりません

具体的には、それぞれの役割のページに
  • 「どのデータを、表示させるか(データを選択する)」
  • 「どのデータを、作成するか」
  • 「どのデータを、変更するか」
  • 「どのデータを、削除するか」
などのデータの操作の方法(データの表示・作成・変更・削除を設定して、実際のデータの保存などをします。
 Ruby on Rails内のデータ保存は、データベースの枠組みの定義とデータの操作のやり方を自分で設定して行う。


 ③ : まとめ


Ruby on Railsでは、
出来上がった雛形の上にどのようなページを表示させてどのようなデータを保存させるかの設定、つまりページとデータの操作をどうするかを設定していくことでウェブページを作っていく。



2 : Ruby on Railsの準備

ここまでRuby on Railsでは基本的になにをしているかを説明しました。
ただ実際にRuby on Railsでウェブページを作るにあたって、Ruby on Rails以外にも必要となるソフトウェアがあります。

ここでは、Ruby on Railsとその他のソフトウェアをインストールして開発ができる環境にしましょう。





 Windows の PC をお使いの場合は、こちらの説明をお読み下さい!








まずは、インストールする時に必要になる「ターミナル」というアプリケーションについて説明します。


 ① : ターミナル


まずは「ターミナル」を開いてみます。下の画像を参考に開いてみてください Terminal open Terminal open done ターミナルは開けたでしょうか?
このターミナルはなんなのでしょうか?
 ターミナルはどのようなアプリケーションなのか?

ターミナルとは、コンピューターに命令を与えるアプリケーションです。
Ruby on Railsのウェブページもターミナルの命令で作ります。
 ターミナルを使って、デスクトップ内を移動しよう!

半角英数字で「cd Desktop」と入力して、Enterを押してみましょう。
下のように1行追加されて表示されたでしょうか?
下の画像の赤線が現在の場所を示しています。今は、Desktopにいますね。 Terminal cd desktop after 「cd」を使えば、現在のフォルダ内にある指定されたフォルダに移動できますFinder desktop  「cd」で、デスクトップ内の好きなフォルダに移動しよう!
  「open ファイル名」で、ファイルを開くこともできます。

※「cd ..」と入力すれば前のフォルダに、「cd ~/Desktop」と入力すればデスクトップに移動できます。
※ 半角英数字で入力して下さい


 ② : Ruby on Railsのインストール


では、Ruby on Rails をインストールしてみましょう!
少し長くなるので頑張って下さい!

バージョンは
  • Ruby 2.3.1
  • Ruby on Rails 5.0.2
になります。
すでに環境を構築済みの方は、環境を構築し直す必要はありませんので、先に進んで適宜質問下さい。

 まずは「Command Line Tools」というソフトをインストールします。

 AppleIDを用意の上、こちらをクリックしてAppleIDでログインをして下さい。
※ AppleIDの作成はこちらから

下のような表示は出てきたでしょうか? Chrome apple developer ここからCommand Line Toolsをインストールします。
 インストールする前にMacのバージョンを確認します。
※ Macのバージョンによってインストールするものが変わるので確認しておきましょう!

下のように左上にある をクリックして、中にあるAbout This Macをクリックして下さい。 Settiing about this mac 下のように表示されるので、赤線の部分を確認して下さい。 About this mac overview About this mac overview detail Macのバージョンを確認の上、下の表に対応したものをダウンロードして下さい。
Macのバージョン Command Line Tools
10.11.x Command Line Tools(OS X 10.11)for Xcode x.x.x
10.10.x Command Line Tools(OS X 10.10)for Xcode x.x.x
10.9.x Command Line Tools(OS X 10.9)for Xcode x.x.x
10.8.x Command Line Tools(OS X Mountain Lion)for Xcode x.x.x
10.7.x Command Line Tools(OS X Lion)for Xcode x.x.x
複数ある場合は最新のものを選んで下さい!

ダウンロードができたらダウンロード」フォルダを開いて、先ほどダウンロードしたファイルをクリックして、 Finder downloads command line tools インストールしてできたファイルを開いて終了です。 Finder command line tools
 次に「Ruby on Rails」のインストールをします。
コマンドを順番に入力して下さい!


  ここではターミナルを使っていきます。
早速開いてみましょう!

※ ターミナルについてはこちらを参考 Terminal open 開けたら、

 ターミナル(半角英数字)
1 cd

と入力して下さい。これでターミナルはターミナルが最初に開かれた時に位置に戻ります。

 では、始めてみます。
まずは下のリンクをクリックして、ファイルをダウンロードして下さい。

 xcodeを利用している方は、こちらをクリック

 xcodeを利用していない方は、こちらをクリック

その後でダウンロードしたファイル(「rails_build_command」)をデスクトップに移動させてから、ターミナルでデスクトップに移動して、

 ターミナル(半角英数字)
1 cd Desktop

下の入力をします。

 ターミナル(半角英数字)
1 source rails_build_command


 最初に自分のPCのパスワードを要求されるので、それを入力します。
※ パスワードは表示されませんが入力されているので大丈夫です

 xcodeを利用していない方は、こちらから次にお進み下さい。


 その次に、下のような画面が出てきますので q と入力します。 Terminal xcode licence
 次に下のような画像が出てくるので、ここでは agree を入力します。 Terminal xcode licence agree
 ここからはインストールまでに時間がかかるのですが、下のような画面が出てきますのでそこでは enter キーを入力します。 Terminal install brew
 ここでパスワードの入力が要求されるので、それを入力して下さい。
※ パスワードは表示されませんが入力されているので大丈夫です

 ここからは時間がかかりますが、少しお待ち下さい。
ターミナル上の動作が完了したら、下の入力をしてみて下さい。

 ターミナル(半角英数字)
1 rails -v

これでRails 5.0.2が表示されれば、大丈夫です。

これでできたら、こちらから次の説明へ、
できなかったら、お手数ですがすぐ下の説明を参考にして下さい。



  • Homebrewのインストール

  • まずは下の入力をして下さい。これでHomebrewというツールをインストールします。コピペでも大丈夫です。

    ※ 文字を選択してCommand」と「cを押せば文字をコピー、Command」と「vを押せば文字の貼り付けができます。

     ターミナル(半角英数字)
    1 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    途中でパスワードの入力を要求されるので、そこで自分のMacのパスワードを入力して下さい。

    インストールが完了したら、

     ターミナル
    1 brew -v

    Homebrewのバージョンが出てくれば大丈夫です。
  • rbenvとruby-buildのインストール

  • この2つのツールで、「Ruby on Rails」を動かしている「Ruby」というプログラミング言語のバージョン管理をします。
    ではインストールしてみます!下の2つの入力をして下さい。

    ※ 文字を選択してCommand」と「cを押せば文字をコピー、Command」と「vを押せば文字の貼り付けができます。

     ターミナル(半角英数字で入力)

     ここはコピペができない場合がありますので、コピペができなかったら直接入力して下さい。
    1 brew install ruby-build

     ターミナル(半角英数字で入力)
    1 brew install rbenv

    これでインストールができました!

     しかし今のままでは使えないので、下の入力をして下さい。

    ※ 文字を選択してCommand」と「cを押せば文字をコピー、Command」と「vを押せば文字の貼り付けができます。

     ターミナル(半角英数字で入力)
    1 echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

    この後で、

     ターミナル(半角英数字で入力)
    1 source ~/.bash_profile

    を入力して設定を有効にします。
  • readlineのインストール

  • このreadlineというツールをインストールして、日本語入力をしても文字化けがしないようにします。

    下の入力をしてインストールしましょう!

    ※ 文字を選択してCommand」と「cを押せば文字をコピー、Command」と「vを押せば文字の貼り付けができます。

     ターミナル(半角英数字で入力)
    1 brew install readline

     次にreadlineを使うための設定をします。

    ※ 文字を選択してCommand」と「cを押せば文字をコピー、Command」と「vを押せば文字の貼り付けができます。

     ターミナル(半角英数字で入力)
    1 brew link readline --force

     ターミナル(半角英数字で入力)
    1 RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline) --with-openssl-dir=$(brew --prefix openssl)"

  • Ruby のインストール

  • 先ほどインストールした「rbenv」で、Ruby on Rails」を動かすための「Ruby」というプログラミング言語をインストールします。

    ここではバージョンが「2.3.1」の「Ruby」をインストールしますので、その2.3.1をインストールします。

     ターミナル(半角英数字で入力)
    1 rbenv install 2.3.1

    これでインストールされたので、「Ruby」を起動する準備をするための入力をします。

     ターミナル(半角英数字で入力)
    1 rbenv rehash

    ここまででインストールと準備ができたので、使うRuby」のバージョンを設定します。

     ターミナル(半角英数字で入力)
    1 rbenv global 2.3.1

    これで設定ができたので、

     ターミナル(半角英数字で入力)
    1 ruby -v

    Ruby」のバージョンを確認します。
    2.3.1が出て来れば、大丈夫です。
  • rails のインストール

  • 最後にRuby on Rails」のインストールをします!
    まずは、お決まりのRuby on Rails」を使うためのツールをインストールします。

     ターミナル(半角英数字で入力)
    1 gem install bundler

    次にRuby on Rails」をインストールします。

     ターミナル(半角英数字で入力)
    1 gem install rails --version "=5.0.2"

    次にもう一度

     ターミナル(半角英数字で入力)
    1 rbenv rehash

    をして、下の入力をしてRuby on Rails」のバージョンを確認して下さい。

     ターミナル(半角英数字で入力)
    1 rails -v

     ここまでで「Ruby on Rails」をインストールできました!


 ③ : Sublime Textのインストール


設定ファイルを編集するためのファイルの編集ソフト、Sublime Textもインストールしましょう。
まずはSublime Textのホームページに移動して、ファイルをダウンロードします。

こちらを開いてみて下さい

下のような表示はでてきたでしょうか? Chrome sublime text このページのDownload for OS Xをクリックして、ダウンロードをしましょう。
ダウンロードが終わったら、ダウンロード」フォルダに、ダウンロードしたファイルがあるので開いてみましょう! Finder downloads sublime text クリックすると、 Finder after download sublime text のように表示されます。

ここにある「Sublime Text」のアイコンをShift」キーを押しながらクリックして、Applicationsに移動させて下さい。 Finder move sublime text to applications これでSublime Textのインストールが完了しました!
 確認のために一回開いてみましょう!

右上の虫眼鏡マークを押して、「Sublime Text」と入力してみて下さい。
Spotlight find sublime text できたらEnterキーを押せば開きます。 Window sublime text このようなウィンドウが出てきたでしょうか?
このSublime Textを今回は使っていきます。


 ④ : MySQLのインストール


ここではMySQLというデータベースを使いますので、それをインストールしましょう。
ターミナルを開き、「brew install mysql」と入力してみましょう。

 ターミナル ※ 半角英数字で入力して下さい
1 brew install mysql

実行して以下のような表示が出て来れば大丈夫です。
==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/mysql-5.6.22.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring mysql-5.6.22.yosemite.bottle.tar.gz
==> Caveats
A "/etc/my.cnf" from another install may interfere with a Homebrew-built
server starting up correctly.

To connect:
    mysql -uroot

To have launchd start mysql at login:
    ln -sfv /usr/local/opt/mysql/*.plist ~/Library/LaunchAgents
Then to load mysql now:
    launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist
Or, if you don't want/need launchctl, you can just run:
    mysql.server start
==> /usr/local/Cellar/mysql/5.6.22/bin/mysql_install_db --verbose --user=tasukujp --basedir=/usr/local/Cellar/mysql/5.6.22 --datadir=/usr/local/var/my
==> Summary
🍺  /usr/local/Cellar/mysql/5.6.22: 9666 files, 339M

今の状態だとMySQLを起動させるにはターミナルでコマンドを入力しなければならないので、下の二つのコマンドでログイン時に自動で起動できるようにします。
※ 一つずつコピペして、ターミナルに入力しましょう

 ターミナル
1 ln -sfv /usr/local/opt/mysql/*.plist ~/Library/LaunchAgents

 ターミナル
1 launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist

 以上で、Mysqlのインストールが完了しました。


 ⑤ : Sequel Proのインストール


データベースの中身(あのExcelの表)を簡単に表示させてくれるソフトウェアであるSequel Proをインストールしましょう。

 Sequel Proをダウンロード(クリックすると始まります)

ダウンロードができたら、ダウンロードされたファイル(普通ならダウンロードフォルダにあります)を開いてみてください。 Sequel pro open 開くと、下の画像のようなウィンドウが表示されるので、画像の手順にしたがい「Connect」を押して下さい。 Sequel pro 下のように表示されれば大丈夫です。 Sequel pro main page


 ここまでで環境構築は終わりです。お疲れさまでした!
次の章からは実際にRuby on Rails を使った開発をしていきます。