paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

トップ > paiza-PaizaCloud > Ruby on Rails入門 - はじめてのRuby on Railsチュートリアル

Ruby on Rails入門 - はじめてのRuby on Railsチュートリアル

paiza-PaizaCloud Tech-Webサービス紹介 プログラミング Tech paiza Tech-環境 PaizaCloud-tutorial
f:id:paiza:20171213233338p:plain
(English article is here)

f:id:paiza:20151217152725j:plainこんにちは、吉岡([twitter:@yoshiokatsuneo])です。

Ruby on Railsでプログラミングをはじめよう！

と思った時に、何が一番難しいと思いますか？ プログラムの書き方でしょうか？

実は、最初にして最大の難関は、開発環境のインストール・設定だと思います。

環境構築には、一筋縄ではいかない罠が潜んでいることが多くあります。

よくあるのが…

  • インストール方法を探したが、最新版のものが見つからない。
  • インストール中にエラーが出たけど、解決法がわからない。(Ruby on RailsではNokogiriなど...)
  • インストールするには、別のソフトウェアやライブラリが必要らしいけどよくわからない。
  • Macでのインストール方法は見つかったけど、Windowsでのインストール方法が見つからない。
  • 他のソフトウェアと一緒にインストールするとエラーが出てしまう。
  • インストールできたけど、今まで動いていたソフトが動かなくなってしまった。

などなど…

詳しい友人に聞いてみても、インストール方法を忘れていたり、バージョンが古かったり、カスタマイズしていたりすると、環境が違ってなかなか解決できず苦労する…なんてことも。

また、勉強がてら頑張って作ってみたサービスは、公開して友人に自慢したり、感想をもらえたりするとモチベーションが格段にあがりますよね。ただし、作ったサービスを公開するには「デプロイ」が必要になります。このデプロイ作業も、初心者にとってはハードルが高いものだと思います。

そこで、ここではPaizaCloudというサービスを利用してみます。PaizaCloudでは、インストールなどの環境構築をしなくても、ブラウザだけで簡単にRuby on Railsを使ったWeb開発ができます。実際、作ろうと思えば5分程度で自分のサービスを作れてしまいます。さらに、作ったサービスをそのまま公開して、友人に見せることもできます。

PaizaCloudを使う

PaizaCloudのサイトはこちらです。

https://paiza.cloud/

メールアドレスなどを入力して登録すると、登録確認メールが送られてきます。GitHubやGoogle(Gmail)ログインを利用すると、ボタン一つで登録することもできます。

サーバを作る

開発環境となるサーバを作りましょう。

f:id:paiza:20171213234155p:plain

「サーバを作る」ボタンを押して、サーバ作成画面を開きます。

"Ruby on Rails", "phpMyAdmin", "MySQL"を選んでから、もう一度「サーバを作る」ボタンを押すだけです。

f:id:paiza:20171214084452p:plain

3秒程度で、Ruby on Railsを使える開発環境ができてしまいます。

アプリケーション作成

Ruby on Railsのアプリケーションを作成してみましょう。

アプリケーション作成は、"rails new"というコマンドを使います。

PaizaCloudでは、ブラウザ上で、コマンドを入力するための「ターミナル」を使うことができます。

画面左側の、「ターミナル」のボタンをクリックます。

f:id:paiza:20171213234317p:plain

ターミナルが起動しますので、"rails new アプリケーション名"のようにコマンドを入れます。

f:id:paiza:20171213234417p:plain

"アプリケーション名"は作るアプリケーションの名前なので、"music-app"、"game-app"　みたいな感じで、好きな名前にするといいですね。

ここでは、例としてボードゲームの内容説明を記録するアプリケーションを作ってみしょう。アプリケーション名は"boardgame-app"としてみます。

データベースはMySQLを使うので、"--database=mysql"も指定します。

$ rails new boardgame-app --database=mysql

とコマンドを入力します。

画面左側のファイルファインダを見ると、"boardgame-app"というディレクトリが作られています。フォルダをクリックして、中を見てみましょう。

f:id:paiza:20171213234518p:plain

Ruby on Railsアプリケーションに必要なファイルが作られています。

データベースサーバ(MySQL)はサーバ作成時に設定したので起動していますが、設定していない場合は、以下のように起動しておきましょう。

$ sudo systemctl enable mysql
$ sudo systemctl start mysql

PaizaCloudでは、このようにroot権限でパッケージをインストールすることもできます。

データベースサーバ(MySQL)上で、このアプリケーションのためのデータベースを作成します。 以下のように、アプリケーションディレクトリに移動して、"rake db:create"コマンドを実行してみましょう。

$ cd boardgame-app
$ rake db:create

f:id:paiza:20180922200831p:plain

このアプリケーションで利用する、"boardgame-app_development"というデータベースが作成できました。

Ruby on Railsサーバの起動

このアプリケーションは、もう動かすことができるんですよ。実際に動かしてみましょう！

"cd boardgame-app"でディレクトリを移動したあと、"rails server"と入れてみましょう！

$ cd boardgame-app
$ rails server

f:id:paiza:20171213234757p:plain

画面の左側に、"3000"と書かれたボタンが追加されました。

f:id:paiza:20171213234820p:plain

Ruby on Railsの開発環境では、3000番ポートでサーバが起動します。PaizaCloudでは、この3000番ポートに対応したブラウザ起動ボタンを自動で追加しています。

ボタンをクリックすると、ブラウザ(PaizaCloudの中で動くブラウザ)が起動して、Ruby on Railsについてのページが表示されました!

f:id:paiza:20171213234947p:plain

[注記]
なお、Ruby on RailsのサーバはHTTPで動作していますが、PaizaCloudではこれをHTTPSに変換しています。またサーバはlocalhostで動作していますが、PaizaCloudでは"https://localhost-サーバ名.paiza-user.cloud:ポート番号"というURLでlocalhostに接続できるようになっています。


[注記]
サービスを公開して他のユーザやデバイスからもアクセスできるようにする場合、"rails server -b 0.0.0.0"コマンドで 外部ネットワークから接続できるようにします。
さらにポート番号を指定せず、 https://ホスト名/ や http://ホスト名/ としてアクセスできるようにする場合、"sudo rails server -b 0.0.0.0 -p 80"コマンドで、ポート番号に80を指定します。80番でウェブサーバ(Apache)が起動している場合は"sudo systemctl stop apache2; sudo systemctl disable apache2”コマンドでウェブサーバを停止します。

データベースにテーブルを作成

実際に、アプリケーションで、データベースを使ってみましょう。

Ruby on Railsでは"rails generate scaffold"というコマンドで、データベーステーブル、モデル、コントローラ、ルーティング用のファイルを一気に作ることができます。

ここでは、ボードゲームの名前をあらわす"name", プレイできる人数をあらわす"players"の２つをもつgamesテーブルを作成してみます。

別のターミナルを開いて、コマンドを入れてみます。(Ctrl-Cで"rails server"を中断してもいいです)

$ rails generate scaffold game name players

f:id:paiza:20181207141345p:plain

作成したら、マイグレーションコマンドを実行して、実際にデータベース上にテーブルを作成します。

$ rake db:create
$ rake db:migrate

f:id:paiza:20171213235143p:plain

これで準備は完了です! PaizaCloud上のブラウザで、URLに "http://localhost:3000/games/" と入れてみましょう。

すると、以下のようにテーブル一覧が表示されました！ データの追加や削除ができるので試してみましょう！

f:id:paiza:20171213235249p:plain

作成したデータベーステーブルのデータは、phpMyAdminでも確認できます。

PaizaCloudのブラウザ上で"http://localhost/phpmyadmin/"と入れてみましょう。

f:id:paiza:20171214003801p:plain

ファイルの編集

一覧ページのタイトルを変更するため、ファイルを編集してみましょう。

ファイルの編集は、画面左側のファイルファインダからファイルを選択してダブルクリックします。

"boardgame-app/app/views/games/index.html.erb"を開いて編集してみましょう。

f:id:paiza:20171213235414p:plain

＜h1＞に囲まれた、タイトル部分を変更してみましょう。

boardgame-app/app/views/games/index.html.erb:

<h1>My Board Games!</h1>

編集したら、「保存」ボタンを押すか、「Command-S」または「Ctrl-S」で保存します。

f:id:paiza:20171213235606p:plain

画像ファイルも追加してみましょう。パソコン上の画像ファイルは、ドラッグ＆ドロップでPaizaCloudのサーバにアップロードして追加します。 アップロード先のディレクトリは "boardgame-app/app/assets/images" です。

f:id:paiza:20181207133959p:plain

追加したファイルを表示するように、index.html.erbを編集します。

boardgame-app/app/views/games/index.html.erb:

<h1>My Board Games!</h1>
<%= image_tag 'boardgame.jpg' , width: '100', height: '100' %>

毎回URLに"/games/"と入れるのも面倒なので、トップページで一覧が見えるようにリダイレクトしてみましょう。

"config/route.rb"を開いて、以下のようにトップページのルーティング情報を追記します。

config/route.rb:

  root to: redirect('/games/')

f:id:paiza:20171214000215p:plain

これで、アプリケーションの基本的な部分は完成です！

f:id:paiza:20171214000317p:plain

画像の保存

今度は、さらに、ボードゲームの画像ファイルもアップロードできるようにしてみましょう。

Ruby on Railsではgemパッケージを追加することで、このような機能を簡単に追加できます。

ここではpaperclipというファイルアップロード用のgemを使うため、ファイル"Gemfile"に"gem 'paperclip'"を追加します。

Gemfile:

gem 'paperclilp'

f:id:paiza:20171214000430p:plain

アップロードした画像ファイルを保存するための"picture"フィールドを追加するため、以下のコマンドを実行します。

~/boardgae-app$ bundle install
~/boardgae-app$ rails generate paperclip game picture

"~/boardgae-app/db/migrations/201xxxxxxxxx_add_attachment_picture_to_games.rb"というような名前のマイグレーションファイルができています。

データベースに反映するため、マイグレーションを実行します。

$ rake db:migrate

画像ファイルを扱えるように、フォーム投稿、表示用のHTMLファイルにタグを追加します。

~/boardgame-app/app/views/games/_ form.html.erb

  <%= form.file_field :picture %>

~/boardgame-app/app/views/games/index.html.erb

        <td><%= image_tag game.picture.url(:thumb) %></td>

画像ファイル用のフィールド「picture」をコントローラに追加します。

~/boardgame-app/app/controllers/games_controller.rb

    def game_params
      params.require(:game).permit(:name, :players, :picture)
    end

アップロードされたファイルを扱えるようにモデルを変更します。

app/models/game.rb

class Game < ApplicationRecord
    has_attached_file :picture, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/images/:style/missing.png"
    do_not_validate_attachment_file_type :picture
end

CSSフレームワークの追加

ついでに、見栄えをよくするために、追加するだけで使えるCSSフレームワークのMilligramを追加してみます。

app/views/layouts/aplication.html.erb

  <head>
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
    <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">

f:id:paiza:20171214001352p:plain

これで完成です！いい感じですね。

f:id:paiza:20171214001417p:plain

まとめ

というわけで、PaizaCloudを使って、開発環境を構築することなく、ブラウザだけでRuby on Railsのウェブアプリケーションを作ってみました。

すぐに作れるので、みなさんもぜひ試してみてください！

「PaizaCloud」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。 https://paiza.cloud

「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

paizaのおすすめコンテンツ

CGC codemonster プログラミングゲーム「初恋プログラミング研究会 ～海に行こうよ～」 CGC codemonster プログラミングゲーム「コードモンスター大図鑑 プログラミングでゲットだぜ！」 paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.