今回は、タイムシフト株式会社の野呂浩良さんが開催していた、Rubyという言語のフレームワーク Ruby on Rails のセミナーを受講してきました。
2月14日といえば、セミナーの日ということでメモしていきたいと思います。
Rubyとは
Ruby（ルビー）は、まつもとゆきひろ（通称 Matz）により開発されたオブジェクト指向スクリプト言語であり、スクリプト言語が用いられてきた領域でのオブジェクト指向プログラミングを実現する。 また日本で開発されたプログラミング言語としては初めて国際電気標準会議で国際規格に認証された事例となった 。
Ruby on railsとは
Rubyで書かれたModel View Controller（MVC）アーキテクチャに基づいて構築されたオープンソースのWebアプリケーションのフルスタックなフレームワークです。
Railsの基本理念は
- 同じことを繰り返さない（DRY:Don't Repeat Yourself）
- 設定より規約を重視する（Convention over Configuration、CoC）
とされています。
⇩ Ruby on Railsについては下記サイトへ
・Railsの基本理念 : Railsの生みの親が掲げる8つの原則 | プログラミング | POSTD
Cloud9というクラウド上の開発環境
Cloud9はオンラインIDE（統合開発環境）と呼ばれるもので、GitHubやHerokuとの連携もできるようです。クラウド上のIDEなのでネット環境必須です。
Cloud9、Herokuともに無料で使えます。（有料プランもありますので必要に応じて選択してください。デフォルトは無料プランになってます。）
Heroku
AWS（Amazon Web Services）のIaaS（Infrastructure as a Service）上に構築されたPaaS（Platform as a Service）で、Gitでデプロイできたり、Webアプリの開発から公開までが簡単にできるプラットフォーム。
Amazon Web Services（アマゾン ウェブ サービス、AWS）とは、Amazon.com により提供されているクラウドコンピューティングサービス（ウェブサービス）です。
⇩ クラウドについて詳しくは下記サイトへ
・第1回 クラウドを再入門，クラウドとは何か？：雲を駆け抜けろ｜gihyo.jp … 技術評論社
⇩ デプロイについては下記サイトへ
・IT用語でコミット、デプロイするとはどういう意味でしょうか？ - よくＩＴ... - Yahoo!知恵袋
Ruby on Railsセミナーでしたこと概要
セミナーでやったことの全体像のイメージ図です。
（gitコマンドは、『git init』は最初の１回のみで、『git add』でファイルをindexファイルに登録してから『git commit』でcommitオブジェクトなどを生成し、『git push』でリモートリポジトリに格納する流れです。詳しくは、Gitでバージョン管理 の項目で。）
⇩ Cloud9を使っていきますが、英語でも大丈夫な方はCloud9のDocumentationにCloud9の導入の仕方からいろいろ書いてありますので下記サイトへ
ここからは、Ruby on Railsのセミナーでのやり方になります。
Cloud9にアカウントを登録する
https://c9.io/にアクセスして、『SIGN UP』を選択クリックします。
項目を入力していきます。
項目を全て入力し終わったら『I'm not a robot』にチェックを入れ、『Create your free account』を選択クリックします。
下記のような画面が表示されたら、『Go to your dashboard』を選択クリックします。
『Cloud9』のダッシュボードのページにきます。
『Create a new workspace』を選択クリックします。
『Workspace name』に適当な名前を入力し、『Create workspace』ボタンを選択クリックします。今回は「code」という名前のWorkspacesを作成しました。
下記のような画面が表示されればOKです。Workspacesが作成され、『code』というフォルダが作成されてます。
それぞれのエリアの内容です。
ピンクで囲まれたアイコンをクリックすると、いろいろ表示されます。
試しに『Dashboard』を選択します。
ダッシュボードのページにきました。
ページ情報が更新され、作成したWorkspacesが表示されてます。
『Open』を選択するとWorkspacesを開けます。
Workspacesに戻ってきたところで作業を続けていきます。
Herokuコマンドを使えるようにする
Cloud9でHerokuコマンドを使えるようにするため、『Heroku Toolbelt』をインストールします。
⇩ Heroku CLI（Command line interface）については下記サイトへ
・GitHub - heroku/heroku-cli: Heroku Toolbelt v4
bashと呼ばれるコマンドを入力するためのものがデフォルトで画面下部に表示されているので、そこに『heroku』コマンドを入力します。
heroku
自動で処理を進めてくれるので待ちます。
Ruby on Railsを導入
Rubyのフレームワークである、Ruby on Rails を自動生成してくれるコマンドを実行します。このコマンドは、作るアプリ毎に最初の１回のみ行うようです。
今回はachieveというアプリケーションを作ってます。
rails new achieve
bundle installの部分で処理に時間がかかりますが、しばらく待ちます。
ここの部分でしばらく止まりますが、待ちます。
処理が進み、下記のように『code』フォルダ内に『achieve』というフォルダが作成されていればOKです。
『achieve』フォルダの中にRuby on Railsのフレームワーク一式がインストールされてます。
ディレクトリの移動
・原則的にRuby on Railsで開発をする際は、rails new 〇〇で入力した名前のディレクトリに移動してから作業を行うようです。
『cd ディレクトリ名』コマンドで『achieve』フォルダに移動します。
cd achieve
Webアプリケーションの作成
準備が整ったので開発をしていきます。
”blogsというURLでアクセスできるtitleとcontentという入力欄がある画面一式”を作ります。（※blogとして作成すると、URLにアクセスするときは複数形のblogsになります。blogsで作成すると、URLアクセスはblogssになるようです。）
※ちなみに、下記はCakePHPにおけるscaffoldの説明ですが、CakePHPがRuby 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というフォルダが生成され、その中にファイルが作成されています。
DB&テーブル作成
入力欄がある画面一式を作ったので、その入力されたデータを保存する場所を作ります。
sqlite3内に格納場所（DB）とその引き出し（テーブル）を作成します。
マイグレーション（migrate）とは、DBに保存されているデータを保持したまま、テーブルの作成やカラムの変更などを行うための機能。
rake db:create db:migrate
前の手順で作成されたマイグレーションファイルを元に、データベース管理システム 「sqlite3」内にデータを格納するデータベースとテーブルを作成してます。
HTTPServer起動
作成したWebアプリケーションにアクセスできるようにサーバーを起動させます。
（RailsではWEBrickと呼ばれるHTTPServerの機能を提供するクラスが存在し、これがWebサーバーとして機能してくれます。）
rails server -b $IP -p $PORT
画面上部の『Preview』 >『Preview Running Application』を選択クリックします。
『Welcome aboard』という画面が表示されればOKです。
アドレスバーの末尾に『rails g scaffold blog title:string content:text』で指定したblogの複数系blogsを足してアクセスします。
https://code-〇〇.c9users.io/blogs
画面が表示されればOKです。『New Blog』をクリックしてみましょう。
入力欄が表示されるので、適当に入力し、『Create Blog』ボタンをクリックします。
『Blog was successfully created.』と表示されれば、成功です。『Back』をクリックしてみます。
データが足されています。
HTTPServerを停止させる
コマンドを入力するところをクリックした後に『Ctrl + C』を押します。
HTTPServerが停止するので、HTTP通信のやりとりができなくなり、『Preview』 >『Preview Running Application』でアプリケーションにアクセスできなくなります。
再度アクセスしたい場合は『rails server -b $IP -p $PORT』コマンドでHTTPServerを起動させましょう。
Gitでバージョン管理
Webアプリケーションのフォルダ（今回はachieve）をGitの管理管轄下におきます。
（※ローカルのパソコンでGitを使うには、gitクライアントソフトをインストールする必要がありますが、今回使っているCloud9では既にgitコマンドが使えるようになってます。）
arcieveフォルダに移動してることを確認して、『git init』コマンドを実行します。
git init
・これにより拡張子 .git のディレクトリ（フォルダ）が生成され、そのディレクトリ内に管理管轄下のフォルダ情報が書き込まれるようになり、バージョン管理をすることができます。
左サイドバーの右上隅にカーソルを持って行くと、『設定のアイコン』が表示されるので、クリックし『Show Hidden Files』を選択します。
最新状態を表示させるために『Refresh File Tree』を選択します。
隠れていたフォルダ・ファイルが表示され、achieveフォルダの直下のものが『.git』フォルダの管理下に置かれるようになっています。
『config』ファイルを開きます。
Gitのユーザー登録
氏名・Emailを登録するためのコマンドを作成するために、ファイルビューワのNewTabボタン（プラスマーク）をクリックし、『New File』を選択します。
Gitのユーザ情報として氏名を登録するコマンドを作成します。
作成したら、コマンド欄に貼り付けで実行します。
git config --global user.name "あなたの氏名"
Gitユーザとしてメールアドレスを登録する
氏名の登録コマンドと同じ要領でコマンドを作成して、Gitにメールアドレスを登録します。
git config --global user.email "あなたのメールアドレス"
表示色を設定
gitコマンドの処理結果の文字列に色つけを自動で行い見栄えをよくするコマンドを実行します。
git config --global color.ui true
Gitに登録する
Git管理のイメージ図
コミットのイメージ図
⇩ Gitのブランチなどについては下記サイトへ
⇩ Gitの仕組みなどについては下記サイトへ
・Gitの最低限必要な基礎知識 | hellooooworld.com
⇩ アリスとボブのGit入門レッスンについては下記サイトへ
・アリスとボブになりきってgitをちゃんと理解したい！ - ザリガニが見ていた...。
現時点の作成編集されたすべてのファイルを新規登録分としてGitに検知させます。
git add .
addで検知した内容を覚えさせます。
git commit -m '祝！初コミット'
登録確認
検知したが未登録の内容がないか、Gitへの登録状況を確認
git status
nothing to commit, working directory clean と表示され、問題なくすべて登録できたことを確認します。
コミットされたログを確認する
git log
「commit ランダムな文字列」の表示が出されるのを確認します。
ここまでの手順で設定した内容をコンソールに表示させる
・gitに設定した内容を確認するコマンドです。
git config --list
Herokuにユーザー登録
HerokuのWebサイト（https://www.heroku.com/）にアクセスして、『SIGN UP FOR FREE』をクリックします。
・Herokuは無料で登録ができます。
『Company name』以外の項目を入力します。『Select a Language』は『Ruby』を選択します。全て入力したら、『Create Free Account』をクリックします。
『Heroku』にログインする時のパスワードを決めます。
パスワードを入力し終わったら、『Set Password and log in』をクリックします。
メールアドレスに送ったメールで登録を完了させてくださいとなるので、gmailを確認しに行きます。
送られてきたメールに添付されてるリンクをクリックします。
『Click here to proceed as 〇〇〇〇@gmail.com』と表示されてる部分をクリックします。
『Heroku』のダッシュボードに来ます。
Cloud9でHerokuと連携するための設定
Cloud9に行ってHerokuと連携するための初期設定をします。
ログインしてない場合は、https://c9.io/login でログインしましょう。
Cloud9のログイン画面
『Open』ボタンをクリックでWorkspacesを開きます。
『Gemfile』というものを選択します。
7行目のgem'sqlite3'のすぐ後ろにコードを追記し、下記のようになるようにします。
gem 'sqlite3', groups: %w(test development), require: false gem 'pg', groups: %w(production), require: false
修正したら、『Ctrl + S』で変更を保存します。
Gemfileの編集分を反映させる
『bundle install』コマンドを実行します。
bundle install
SSHキー登録
Herokuにcloud9と疎通するキーを登録します。
すでに存在するSSHキーファイルをcloud9のコンソール上からHerokuに対して登録します。
heroku keys:add
・heroku〜始まるコマンドは、cloud9からインターネットを介してherokuを操作するためのもののようです。
メールアドレスを入力します。
Cloud9からHerokuへの接続を確認
herokuへログインできるか確認する
heroku login
メールアドレスを入力します。
Heroku内
Heroku上に、Cloud9から送付したファイルを入れるための「Application枠」を作成します。
heroku create
・heroku内にランダムな名称でアプリケーションを格納する箱が作られます。「heroku create 任意の名前」と入力すると任意の名前で登録ができます。全世界で唯一の名である必要があるようです。
https://アプリ枠名.herokuapp.com/と表示されるため、アプリ枠名のみを手元のメモに控えておきます。
Heroku用DB設定
DB接続用ファイル「database.yml」を編集します。
"YAML Ain't Markup Language" = "YMLはマークアップ言語ではありません"、という意味らしいです。
Cloud9上でachieve/configディレクトリ内にある「database.ymlファイル」を開きます。
「#から始まる行（コメント行）」をすべて削除し、production: << default=""の部分を修正します。
production: <<: *default adapter: pg database: db/production.pg
CSSを反映させる
herokuに送付する本番環境の設定情報を修正します。
config/environments/production.rbファイルを開きます。
「config.assets.compile = false」の記述を見つけ、false を true に書き換えて、保存します。
・trueにするとcloud9で編集したCSS情報がHerokuに反映されるようになります。
herokuに送付するCSSファイルを事前にコンパイルする
Cloud9内のCSSファイルをHerokuに反映させるようにコンパイル（変換）します。
rake assets:precompile RAILS_ENV=production
・CSSを編集した上でherokuに送付する際は、必ず行うコマンドです。この仕組みを深く理解するためには、アセットパイプラインというRailsの仕組みを学びましょう。
バージョン管理
database.ymlの更新をGitに登録する
git add .
database.ymlファイルを編集した内容をGitに覚えさせる
git commit -m "database.yml登録"
Herokuへ送付
コミットされたDB設定ファイルをherokuに送る（更新分をGitを介してHerokuに送付する）
git push heroku master
「remote: Verifying deploy.... done.」と表示され、送付が完了したことを確認します。
・git push heroku masterコマンドは、ソースコードをherokuに反映させる都度、実行するコマンドです。
環境変数設定
Heroku内にアプリを動作させるための環境変数を登録します。
シークレットキーをcloud9上のコンソールからHerokuに登録します
heroku config:add SECRET_KEY_BASE="$(bundle exec rake secret)"
・heroku内でアプリを起動させるために必要なキーを登録します
Heroku用テーブル作成
Heroku内（本番環境）データベースにテーブルを作成します。
Heroku内のPostgreSQL内データベースにテーブルを作成します。
heroku run rake db:migrate RAILS_ENV=production
・Heroku内には push した時点で自動的にデータベースが作成されます。そのため、db:createは必要ありません。
エラーが発生することなく「CreateBlogs: migrated」と表示されたことを確認します。
起動確認
お試しアプリケーションを表示します。
WebブラウザからHerokuにログインし、ダッシュボード上でブラウザを再読込みを「二回以上」して、以前の手順で作成したAppの名前を見つけ、そのAppを選択します。
画面右上の「3つ点」ボタンをクリックして、OpenAppをクリックします。
URLの末尾に/blogsを追記してブラウザを再読込します。
Cloud9で表示されていたものがHerokuでも表示されました。
Bootstrapの導入
Cloud9画面左上にあるファイルビュワーからGemfileをクリックします。
gemfileの32行目に追記します。
gem 'twitter-bootstrap-rails'
※gemとはライブラリのことで、便利な機能を追加できます。
Gemfileの編集分を反映させる
gemを追加したので、『bundle install』コマンドを実行します。
bundle install
Bootstrap用にCSSをインストールする
rails generate bootstrap:install static
Bootstrap用にHTMLを編集する
erbテンプレートを編集します。
achieve/app/views/blogs/index.html.erbを開きます。
中身をすべて削除します。
リンク先のファイルのソースコードをすべてコピーしてindex.html.erbに貼り付けてください。
https://github.com/Timeshift-corp/day1/blob/master/app/views/blogs/index.html.erb
レイアウトファイルを編集します。
app/views/layout/applicaiton.html.erbを開きます。
中身を削除します。
リンク先のファイルのソースコードをすべてコピーして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
app/asset/imagesをクリックし、ファイルをアップロードするフォルダをimagesフォルダに指定します。
file/Upload Local Fileをクリックします。
『Select files』をクリックしてアップロードしたいimageファイルを選びましょう。
選択したimageファイルが『images』フォルダに格納されました。
CSSファイルを編集する
app/asset/stylesheetsを右クリックし、『New File』を選択します。
clean-blog.cssと名前を付けます。
間違えたり入力できなかったら右クリックをおして『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』をクリックします。
下記画面が表示されない時は、URLの末尾に/blogsと入力してリロードしてみましょう。
Herokuでネット公開
画面も整ったので変更した内容をインターネットに公開します。
アセットをコンパイルする
アセットとは、app/assets/配下にあるファイル一式のことです。
プリコンパイル
※app/assets配下のファイルを追加や編集した場合のみ、実行します。
rake assets:precompile RAILS_ENV=production
Gitに登録する
ファイルの更新分を登録します。
変更分をGitに覚えさせるためにGitにまず検知させます。
git add --all
作業内容が後からわかるように任意のコメントをつけて、コミットをして、Gitに覚えさせます。
git commit -m "作業内容をここに書く"
Herokuへ再送付する
コミットされたDB設定ファイルをherokuに送ります。
前の手順でGitに覚えさせたファイル更新分をGitを介してHerokuに送付します。
git push heroku master
・git push heroku masterコマンドは、ソースコードをherokuに反映させる都度、実行するコマンドです。
Heroku内DBのテーブル作成・更新をする
※マイグレーションファイルを追加した場合のみ行います。
Heroku内データベースに対してマイグレーションを実行します。
heroku run rake db:migrate RAILS_ENV=production
起動確認する
WebブラウザからHerokuにログインし、ダッシュボード上から以前の手順で作成したAppの名前を見つけ、Appを選択します。
『Open app』を選択クリックします。
Heroku上で表示されました。
ほとんど理解せずにセミナーを終えてしまったので、コマンドをしっかり勉強しなければと思った今日この頃です。
今回はこのへんで。
