Ruby on Railsのセミナーを受講して

今回は、タイムシフト株式会社の野呂浩良さんが開催していた、Rubyという言語のフレームワーク Ruby on Rails のセミナーを受講してきました。

2月14日といえば、セミナーの日ということでメモしていきたいと思います。

Rubyとは

Ruby(ルビー)は、まつもとゆきひろ(通称 Matz)により開発されたオブジェクト指向スクリプト言語であり、スクリプト言語が用いられてきた領域でのオブジェクト指向プログラミングを実現する。 また日本で開発されたプログラミング言語としては初めて国際電気標準会議で国際規格に認証された事例となった 。

Ruby - Wikipedia

Ruby on railsとは

Rubyで書かれたModel View Controller(MVCアーキテクチャに基づいて構築されたオープンソースのWebアプリケーションのフルスタックフレームワークです。

Railsの基本理念は

とされています。

  Ruby on Railsについては下記サイトへ 

Ruby on Rails - Wikipedia

Railsの基本理念 : Railsの生みの親が掲げる8つの原則 | プログラミング | POSTD

Cloud9というクラウド上の開発環境

Cloud9はオンラインIDE統合開発環境)と呼ばれるもので、GitHubやHerokuとの連携もできるようです。クラウド上のIDEなのでネット環境必須です。

Cloud9、Herokuともに無料で使えます。(有料プランもありますので必要に応じて選択してください。デフォルトは無料プランになってます。)

 

Heroku

AWSAmazon Web Services)のIaaS(Infrastructure as a Service)上に構築されたPaaS(Platform as a Service)で、Gitでデプロイできたり、Webアプリの開発から公開までが簡単にできるプラットフォーム。

Heroku導入メモ · GitHub

Amazon Web Services(アマゾン ウェブ サービス、AWS)とは、Amazon.com により提供されているクラウドコンピューティングサービス(ウェブサービス)です。

  クラウドについて詳しくは下記サイトへ

第1回 クラウドを再入門,クラウドとは何か?:雲を駆け抜けろ|gihyo.jp … 技術評論社

  デプロイについては下記サイトへ 

IT用語でコミット、デプロイするとはどういう意味でしょうか? - よくIT... - Yahoo!知恵袋

Ruby on Railsセミナーでしたこと概要

セミナーでやったことの全体像のイメージ図です。

f:id:ts0818:20160218185819p:plain

(gitコマンドは、『git init』は最初の1回のみで、『git add』でファイルをindexファイルに登録してから『git commit』でcommitオブジェクトなどを生成し、『git push』でリモートリポジトリに格納する流れです。詳しくは、Gitでバージョン管理 の項目で。)

 

  Cloud9を使っていきますが、英語でも大丈夫な方はCloud9のDocumentationにCloud9の導入の仕方からいろいろ書いてありますので下記サイトへ 

https://docs.c9.io/docs/

 

ここからは、Ruby on Railsのセミナーでのやり方になります。

 

Cloud9にアカウントを登録する

https://c9.io/にアクセスして、『SIGN UP』を選択クリックします。

f:id:ts0818:20160214224711j:plain

項目を入力していきます。

f:id:ts0818:20160214224710j:plain

項目を全て入力し終わったら『I'm not a robot』にチェックを入れ、『Create your free account』を選択クリックします。

f:id:ts0818:20160215001129j:plain

下記のような画面が表示されたら、『Go to your dashboard』を選択クリックします。

f:id:ts0818:20160215102012p:plain

『Cloud9』のダッシュボードのページにきます。

『Create a new workspace』を選択クリックします。

f:id:ts0818:20160215001044p:plain

『Workspace name』に適当な名前を入力し、『Create workspace』ボタンを選択クリックします。今回は「code」という名前のWorkspacesを作成しました。

f:id:ts0818:20160214224700j:plain

下記のような画面が表示されればOKです。Workspacesが作成され、『code』というフォルダが作成されてます。

f:id:ts0818:20160214224738j:plain

それぞれのエリアの内容です。

f:id:ts0818:20160215003617p:plain

ピンクで囲まれたアイコンをクリックすると、いろいろ表示されます。

試しに『Dashboard』を選択します。 

f:id:ts0818:20160215003618p:plain

ダッシュボードのページにきました。

ページ情報が更新され、作成したWorkspacesが表示されてます。

f:id:ts0818:20160215003620p:plain

『Open』を選択するとWorkspacesを開けます。

f:id:ts0818:20160214224738j:plain

Workspacesに戻ってきたところで作業を続けていきます。 

Herokuコマンドを使えるようにする

Cloud9でHerokuコマンドを使えるようにするため、『Heroku Toolbelt』をインストールします。

  Heroku CLI(Command line interface)については下記サイトへ

GitHub - heroku/heroku-cli: Heroku Toolbelt v4

bashと呼ばれるコマンドを入力するためのものがデフォルトで画面下部に表示されているので、そこに『heroku』コマンドを入力します。 

heroku

自動で処理を進めてくれるので待ちます。

f:id:ts0818:20160215003615j:plain

f:id:ts0818:20160215003616j:plain

 

Ruby on Railsを導入

Rubyフレームワークである、Ruby on Rails を自動生成してくれるコマンドを実行します。このコマンドは、作るアプリ毎に最初の1回のみ行うようです。

今回はachieveというアプリケーションを作ってます。

rails new achieve

bundle installの部分で処理に時間がかかりますが、しばらく待ちます。

f:id:ts0818:20160215003621j:plain

ここの部分でしばらく止まりますが、待ちます。

f:id:ts0818:20160215003622j:plain

処理が進み、下記のように『code』フォルダ内に『achieve』というフォルダが作成されていればOKです。

f:id:ts0818:20160215014105p:plain

『achieve』フォルダの中にRuby on Railsフレームワーク一式がインストールされてます。 

f:id:ts0818:20160215014905j:plain

 

ディレクトリの移動

・原則的にRuby on Railsで開発をする際は、rails new 〇〇で入力した名前のディレクトリに移動してから作業を行うようです。

『cd ディレクトリ名』コマンドで『achieve』フォルダに移動します。

cd achieve

 

Webアプリケーションの作成

準備が整ったので開発をしていきます。

”blogsというURLでアクセスできるtitleとcontentという入力欄がある画面一式”を作ります。(※blogとして作成すると、URLにアクセスするときは複数形のblogsになります。blogsで作成すると、URLアクセスはblogssになるようです。)

 

※ちなみに、下記はCakePHPにおけるscaffoldの説明ですが、CakePHPRuby on Railsに強く影響を受けてることから、Ruby on Railsにも言えることだと思ったので引用させていただきました。 

scaffoldは言うなれば「簡易DB操作GUI」です。バックグラウンドのシステム管理者用や、開発中にデータを修正するためのインターフェースを用意するときなどにとても便利です。

便利さとひきかえにカスタマイズ性を犠牲にしているので、全体公開用にscaffoldが使えるケースはほとんど無いでしょう。

Re: idea*idea CakePHP修行 #7~9「DB設計」「bake.php」「scaffold」 - akiyan.com 

 

rails g scaffold blog title:string content:text    

下記のように実行されると思います。

achieve/appの中の各フォルダにblogsというフォルダが生成され、その中にファイルが作成されています。

f:id:ts0818:20160215020623j:plain

 

DB&テーブル作成

入力欄がある画面一式を作ったので、その入力されたデータを保存する場所を作ります。

sqlite3内に格納場所(DB)とその引き出し(テーブル)を作成します。

マイグレーション(migrate)とは、DBに保存されているデータを保持したまま、テーブルの作成やカラムの変更などを行うための機能。

rake db:create db:migrate    

前の手順で作成されたマイグレーションファイルを元に、データベース管理システム 「sqlite3」内にデータを格納するデータベースとテーブルを作成してます。

f:id:ts0818:20160215022605j:plain

 

HTTPServer起動

作成したWebアプリケーションにアクセスできるようにサーバーを起動させます。

RailsではWEBrickと呼ばれるHTTPServerの機能を提供するクラスが存在し、これがWebサーバーとして機能してくれます。)

rails server -b $IP -p $PORT    

f:id:ts0818:20160215024805j:plain

画面上部の『Preview』 >『Preview Running Application』を選択クリックします。

f:id:ts0818:20160215025322j:plain

『Welcome aboard』という画面が表示されればOKです。

f:id:ts0818:20160215025323j:plain

アドレスバーの末尾に『rails g scaffold blog title:string content:text』で指定したblogの複数系blogsを足してアクセスします。

https://code-〇〇.c9users.io/blogs

画面が表示されればOKです。『New Blog』をクリックしてみましょう。 

f:id:ts0818:20160215030507j:plain

入力欄が表示されるので、適当に入力し、『Create Blog』ボタンをクリックします。

f:id:ts0818:20160215031848j:plain

『Blog was successfully created.』と表示されれば、成功です。『Back』をクリックしてみます。

f:id:ts0818:20160215032628j:plain

データが足されています。 

f:id:ts0818:20160215031849j:plain

 

HTTPServerを停止させる

コマンドを入力するところをクリックした後に『Ctrl + C』を押します。

HTTPServerが停止するので、HTTP通信のやりとりができなくなり、『Preview』 >『Preview Running Application』でアプリケーションにアクセスできなくなります。 

f:id:ts0818:20160215034042p:plain

再度アクセスしたい場合は『rails server -b $IP -p $PORT』コマンドでHTTPServerを起動させましょう。

 

Gitでバージョン管理

Webアプリケーションのフォルダ(今回はachieve)をGitの管理管轄下におきます。

(※ローカルのパソコンでGitを使うには、gitクライアントソフトをインストールする必要がありますが、今回使っているCloud9では既にgitコマンドが使えるようになってます。)

 

arcieveフォルダに移動してることを確認して、『git init』コマンドを実行します。

git init    

f:id:ts0818:20160215040511j:plain

 

・これにより拡張子 .git のディレクトリ(フォルダ)が生成され、そのディレクトリ内に管理管轄下のフォルダ情報が書き込まれるようになり、バージョン管理をすることができます。

左サイドバーの右上隅にカーソルを持って行くと、『設定のアイコン』が表示されるので、クリックし『Show Hidden Files』を選択します。

f:id:ts0818:20160215041615j:plain

最新状態を表示させるために『Refresh File Tree』を選択します。

f:id:ts0818:20160215041614j:plain

隠れていたフォルダ・ファイルが表示され、achieveフォルダの直下のものが『.git』フォルダの管理下に置かれるようになっています。

『config』ファイルを開きます。

f:id:ts0818:20160215041613j:plain

 

Gitのユーザー登録

氏名・Emailを登録するためのコマンドを作成するために、ファイルビューワのNewTabボタン(プラスマーク)をクリックし、『New File』を選択します。

f:id:ts0818:20160215044325j:plain 

Gitのユーザ情報として氏名を登録するコマンドを作成します。

作成したら、コマンド欄に貼り付けで実行します。

git config --global user.name "あなたの氏名" 

f:id:ts0818:20160215044326j:plain

Gitユーザとしてメールアドレスを登録する

氏名の登録コマンドと同じ要領でコマンドを作成して、Gitにメールアドレスを登録します。

git config --global user.email "あなたのメールアドレス" 

f:id:ts0818:20160215104755p:plain

表示色を設定

gitコマンドの処理結果の文字列に色つけを自動で行い見栄えをよくするコマンドを実行します。

git config --global color.ui true

 

Gitに登録する

Git管理のイメージ図

f:id:ts0818:20160216211150p:plain

コミットのイメージ図

f:id:ts0818:20160216211149p:plain

  Gitのブランチなどについては下記サイトへ

Git - ブランチとは

  Gitの仕組みなどについては下記サイトへ

Gitの最低限必要な基礎知識 | hellooooworld.com

Git の仕組み (1) - こせきの技術日記

イラストでわかる!git入門の入門 : アシアルブログ

図解 Git

  アリスとボブのGit入門レッスンについては下記サイトへ 

アリスとボブになりきってgitをちゃんと理解したい! - ザリガニが見ていた...。

 

現時点の作成編集されたすべてのファイルを新規登録分としてGitに検知させます。

git add .

addで検知した内容を覚えさせます。

git commit -m '祝!初コミット'     

f:id:ts0818:20160215105924p:plain

 

登録確認

検知したが未登録の内容がないか、Gitへの登録状況を確認

git status

nothing to commit, working directory clean と表示され、問題なくすべて登録できたことを確認します。

f:id:ts0818:20160215050733j:plain

コミットされたログを確認する

git log    

「commit ランダムな文字列」の表示が出されるのを確認します。

f:id:ts0818:20160215050734j:plain

ここまでの手順で設定した内容をコンソールに表示させる

・gitに設定した内容を確認するコマンドです。

git config --list

f:id:ts0818:20160215110243p:plain

 

Herokuにユーザー登録

HerokuのWebサイト(https://www.heroku.com/)にアクセスして、『SIGN UP FOR FREE』をクリックします。

・Herokuは無料で登録ができます。

f:id:ts0818:20160215112249j:plain

『Company name』以外の項目を入力します。『Select a Language』は『Ruby』を選択します。全て入力したら、『Create Free Account』をクリックします。

f:id:ts0818:20160215112250j:plain

『Heroku』にログインする時のパスワードを決めます。

f:id:ts0818:20160215112252j:plain

パスワードを入力し終わったら、『Set Password and log in』をクリックします。

f:id:ts0818:20160215112253j:plain

メールアドレスに送ったメールで登録を完了させてくださいとなるので、gmailを確認しに行きます。 

f:id:ts0818:20160215113202p:plain

送られてきたメールに添付されてるリンクをクリックします。

f:id:ts0818:20160215112251j:plain

『Click here to proceed as 〇〇〇〇@gmail.com』と表示されてる部分をクリックします。

f:id:ts0818:20160215112254p:plain

『Heroku』のダッシュボードに来ます。

f:id:ts0818:20160215112248p:plain

 

Cloud9でHerokuと連携するための設定

Cloud9に行ってHerokuと連携するための初期設定をします。

ログインしてない場合は、https://c9.io/login でログインしましょう。

Cloud9のログイン画面

f:id:ts0818:20160215115024j:plain

『Open』ボタンをクリックでWorkspacesを開きます。

f:id:ts0818:20160215115023j:plain

『Gemfile』というものを選択します。

f:id:ts0818:20160215115026j:plain

7行目のgem'sqlite3'のすぐ後ろにコードを追記し、下記のようになるようにします。

gem 'sqlite3', groups: %w(test development), require: false
gem 'pg', groups: %w(production), require: false

修正したら、『Ctrl + S』で変更を保存します。

f:id:ts0818:20160215115025j:plain

 

Gemfileの編集分を反映させる

『bundle install』コマンドを実行します。

bundle install

f:id:ts0818:20160215131542j:plain

 

SSHキー登録

Herokuにcloud9と疎通するキーを登録します。

すでに存在するSSHキーファイルをcloud9のコンソール上からHerokuに対して登録します。

heroku keys:add

・heroku〜始まるコマンドは、cloud9からインターネットを介してherokuを操作するためのもののようです。

 メールアドレスを入力します。f:id:ts0818:20160215131543j:plain

Cloud9からHerokuへの接続を確認

herokuへログインできるか確認する

heroku login

f:id:ts0818:20160215131546j:plain

メールアドレスを入力します。

f:id:ts0818:20160215160247p:plain

 

 

Heroku内

Heroku上に、Cloud9から送付したファイルを入れるための「Application枠」を作成します。

heroku create

・heroku内にランダムな名称でアプリケーションを格納する箱が作られます。「heroku create 任意の名前」と入力すると任意の名前で登録ができます。全世界で唯一の名である必要があるようです。

f:id:ts0818:20160215131544j:plain

https://アプリ枠名.herokuapp.com/と表示されるため、アプリ枠名のみを手元のメモに控えておきます。

 

Heroku用DB設定

DB接続用ファイル「database.yml」を編集します。

"YAML Ain't Markup Language" = "YMLはマークアップ言語ではありません"、という意味らしいです。

Cloud9上でachieve/configディレクトリ内にある「database.ymlファイル」を開きます。

f:id:ts0818:20160215132257j:plain

「#から始まる行(コメント行)」をすべて削除し、production: << default=""の部分を修正します。

production:
  <<: *default
  adapter: pg
  database: db/production.pg

 

f:id:ts0818:20160215132209j:plain

 

 

CSSを反映させる

herokuに送付する本番環境の設定情報を修正します。

config/environments/production.rbファイルを開きます。

f:id:ts0818:20160215131549j:plain

「config.assets.compile = false」の記述を見つけ、false を true に書き換えて、保存します。

f:id:ts0818:20160215133426j:plain 

・trueにするとcloud9で編集したCSS情報がHerokuに反映されるようになります。

 

herokuに送付するCSSファイルを事前にコンパイルする

Cloud9内のCSSファイルをHerokuに反映させるようにコンパイル(変換)します。

rake assets:precompile RAILS_ENV=production

f:id:ts0818:20160215160246j:plain

CSSを編集した上でherokuに送付する際は、必ず行うコマンドです。この仕組みを深く理解するためには、アセットパイプラインというRailsの仕組みを学びましょう。

バージョン管理

database.ymlの更新をGitに登録する

git add .

database.ymlファイルを編集した内容をGitに覚えさせる

git commit -m "database.yml登録"

f:id:ts0818:20160215160108j:plain

 

Herokuへ送付

コミットされたDB設定ファイルをherokuに送る(更新分をGitを介してHerokuに送付する)

git push heroku master

「remote: Verifying deploy.... done.」と表示され、送付が完了したことを確認します。

f:id:ts0818:20160215185130j:plain

・git push heroku masterコマンドは、ソースコードをherokuに反映させる都度、実行するコマンドです。

 

環境変数設定

Heroku内にアプリを動作させるための環境変数を登録します。

シークレットキーをcloud9上のコンソールからHerokuに登録します

heroku config:add SECRET_KEY_BASE="$(bundle exec rake secret)"

f:id:ts0818:20160215185131p:plain

・heroku内でアプリを起動させるために必要なキーを登録します

 

Heroku用テーブル作成

Heroku内(本番環境)データベースにテーブルを作成します。

Heroku内のPostgreSQL内データベースにテーブルを作成します。

heroku run rake db:migrate RAILS_ENV=production

f:id:ts0818:20160215185132p:plain

・Heroku内には push した時点で自動的にデータベースが作成されます。そのため、db:createは必要ありません。

 

エラーが発生することなく「CreateBlogs: migrated」と表示されたことを確認します。

起動確認

お試しアプリケーションを表示します。

WebブラウザからHerokuにログインし、ダッシュボード上でブラウザを再読込みを「二回以上」して、以前の手順で作成したAppの名前を見つけ、そのAppを選択します。

f:id:ts0818:20160215220733p:plain

画面右上の「3つ点」ボタンをクリックして、OpenAppをクリックします。

f:id:ts0818:20160215185128j:plain

URLの末尾に/blogsを追記してブラウザを再読込します。 

f:id:ts0818:20160215224050j:plain

Cloud9で表示されていたものがHerokuでも表示されました。

f:id:ts0818:20160215185129j:plain

Bootstrapの導入

Cloud9画面左上にあるファイルビュワーからGemfileをクリックします。

gemfileの32行目に追記します。

gem 'twitter-bootstrap-rails'    

f:id:ts0818:20160216011316j:plain

※gemとはライブラリのことで、便利な機能を追加できます。

Gemfileの編集分を反映させる

gemを追加したので、『bundle install』コマンドを実行します。

bundle install

 

 

Bootstrap用にCSSをインストールする

CSSスタイルシートをインストールするコマンドです。

rails generate bootstrap:install static

f:id:ts0818:20160216011311j:plain

Bootstrap用にHTMLを編集する

erbテンプレートを編集します。

achieve/app/views/blogs/index.html.erbを開きます。

f:id:ts0818:20160216011317j:plain

中身をすべて削除します。

f:id:ts0818:20160216011321j:plain

リンク先のファイルのソースコードをすべてコピーしてindex.html.erbに貼り付けてください。

https://github.com/Timeshift-corp/day1/blob/master/app/views/blogs/index.html.erb

 

 

 

レイアウトファイルを編集します。

app/views/layout/applicaiton.html.erbを開きます。

f:id:ts0818:20160216011320j:plain

中身を削除します。

f:id:ts0818:20160216011319j:plain

リンク先のファイルのソースコードをすべてコピーしてapplication.html.erbに貼り付けてください。

https://github.com/Timeshift-corp/day1/blob/master/app/views/layouts/application.html.erb


 

画像ファイルを配置する

リンク先に移動し、画像の上で右クリックしローカル(パソコン)に画像を保存します。

https://github.com/Timeshift-corp/day1/blob/master/app/assets/images/home-bg.jpg

f:id:ts0818:20160216011324j:plain

app/asset/imagesをクリックし、ファイルをアップロードするフォルダをimagesフォルダに指定します。

f:id:ts0818:20160216011323j:plain

file/Upload Local Fileをクリックします。

f:id:ts0818:20160216011314j:plain

『Select files』をクリックしてアップロードしたいimageファイルを選びましょう。

f:id:ts0818:20160216011313j:plain

選択したimageファイルが『images』フォルダに格納されました。

f:id:ts0818:20160216011315j:plain

 

 

CSSファイルを編集する

app/asset/stylesheetsを右クリックし、『New File』を選択します。

f:id:ts0818:20160216011327j:plain

clean-blog.cssと名前を付けます。

f:id:ts0818:20160216011312j:plain

間違えたり入力できなかったら右クリックをおして『rename』で変更ができます。

リンク先のファイルのソースコードをすべてコピーして、いま作成したclean-blog.cssに貼り付けてください。

https://github.com/Timeshift-corp/day1/blob/master/app/assets/stylesheets/clean-blog.css


 

起動確認

お試しアプリケーションにアクセスできるように、『rails server -b $IP -p $PORT』コマンドを実行しWebサーバーを起動させます。

rails server -b $IP -p $PORT

『Preview』>『Preview Running Application』をクリックします。

f:id:ts0818:20160216011325j:plain

下記画面が表示されない時は、URLの末尾に/blogsと入力してリロードしてみましょう。

f:id:ts0818:20160216011310j:plain

 

Herokuでネット公開

画面も整ったので変更した内容をインターネットに公開します。

アセットをコンパイルする

アセットとは、app/assets/配下にあるファイル一式のことです。

プリコンパイル

※app/assets配下のファイルを追加や編集した場合のみ、実行します。

assetsディレクトリ内のファイルをコンパイルする

rake assets:precompile RAILS_ENV=production

f:id:ts0818:20160216015042j:plain

 

Gitに登録する

ファイルの更新分を登録します。

変更分をGitに覚えさせるためにGitにまず検知させます。

git add --all

作業内容が後からわかるように任意のコメントをつけて、コミットをして、Gitに覚えさせます。

git commit -m "作業内容をここに書く"

f:id:ts0818:20160216015040j:plain 

Herokuへ再送付する

コミットされたDB設定ファイルをherokuに送ります。

前の手順でGitに覚えさせたファイル更新分をGitを介してHerokuに送付します。

git push heroku master

f:id:ts0818:20160216015038j:plain

・git push heroku masterコマンドは、ソースコードをherokuに反映させる都度、実行するコマンドです。

 

Heroku内DBのテーブル作成・更新をする

マイグレーションファイルを追加した場合のみ行います。

Heroku内データベースに対してマイグレーションを実行します。

heroku run rake db:migrate RAILS_ENV=production

f:id:ts0818:20160216015041j:plain

 

起動確認する

WebブラウザからHerokuにログインし、ダッシュボード上から以前の手順で作成したAppの名前を見つけ、Appを選択します。

f:id:ts0818:20160215220733p:plain

 

『Open app』を選択クリックします。

f:id:ts0818:20160215185128j:plain

Heroku上で表示されました。

f:id:ts0818:20160216015039j:plain

 

ほとんど理解せずにセミナーを終えてしまったので、コマンドをしっかり勉強しなければと思った今日この頃です。

 

 

 

広告を非表示にする