【開発環境】Ruby on Railsのチュートリアルは、Cloud9・Git・Bitbucket・Herokuを勉強するのに最適かも【プログラミング】

スポンサーリンク
広告

Cloud9

最近、山でのDIYやら、地形にはまってたりで・・・プログラミングの方はあまり見ていなかったのですが、ちょっと前にCloud9っていう全部Webで開発環境(たぶんContainerを作ってくれて開発環境を作れてしまう)ができるサービスを発見して、便利そうだなぁ~って思って、Wordpress,Pythonは出来たけど、Androidが出来なくて挫折してほったらかしにしてました。Gitとかもオジサンには覚えられない(笑)。

Cloud9の初期設定は、

Cloud9の使い方と便利機能!最強プログラミング開発環境(IDE) | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
開発環境構築に便利な、Cloud9の基本的な使い方や便利機能を紹介しています。またRubyやPHP、JavaScript、Python、Ruby on Rails、WordPressなどでの簡単な演習もご紹介しています。

ここを見て、勉強しました。 Credit Cardの登録がいるから、少し勇気いりますけど・・・料金は発生しないようです(笑)

で・・・Wordpressなんかをいじってみたり・・

これ便利。。。Runって押すと ちゃんとhttps://まるまるまる.io とかで、Wordpress動いてくれる。自分が借りてるサーバでやるより、統合環境になっているのでやりやすい(笑)

Webアプリを作るにはとってもいい環境です。。が・・・PythonでカメラStream読み込みでOpenCVで認識とかAndroidアプリつくったろとか・・だと少しハードルが高くて・・

で・・・こんなので止まっていたわけですが(笑)

Ruby on Rails のチュートリアル

Ruby on Railsのチュートリアルの記事をFBで見て、クリックしてみたら・・・

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう
SNSの開発を題材にした無料の大型チュートリアルで、ウェブサービスの開発から公開までの流れを実例を通して学べます。解説動画や質問対応サービスも提供しています。

なんと・・ このチュートリアルは、Cloud9で開発環境(IDE)を作って、Gitでソース管理、Bitbucketで非公開化・Herokuでデプロイ(実行)ってことができるようになっているようです。確かに・・・

Cloud9でWorkspaceを新たに作るときに、最初から、そういうアイコンがあります(笑)

人間って・・興味ないと・・完全に見逃すものですね(笑)

あらためて、Cloud9をGoogleで検索すると、Quitaでもいっぱい記事出てきますね(笑)

Rails Tutorialのアイコンは、開発環境をセットアップするために、Railsとは違って、チュートリアルを動かす分のセットアップが省かれているようです(笑)。いい配慮ですね!!

ちなみに、Ruby on Railsって、いままでほとんど興味なかったんですが、つらつらと、チュートリアルを眺めると、Webのサーバーアプリを作るのにはとても良さそうな言語(Web作成のフレームワーク)なんですね。このチュートリアルでは、Twitterに似たWebアプリを作って、Herokuで動かすところまでやれるみたいです。14章まで到達できれば・・(笑)

第一章までやってみる(笑)

最初の方は、RubyやLinuxの説明やらがありますが・・・読み飛ばして 1.2.2 開発環境まで飛びます(^^; ちなみに、ここでは、Cloud9で必要なところだけを、書いてありますので・・きちんとチュートリアルは読みましょうね。

DashBoardからWorkspaceを作るをクリックして

https://railstutorial.jp/chapters/beginning?version=5.0#fig-cloud9_new_workspace

の通りにして、Create WorkSpaceボタンを押します。

しばらくすると、こんな画面が現れます。

Railsをインストール

下の方にbashと書かれたシェルの画面(タブ)がありますので、そこからRailsをインストールします。あるいは、緑の+マークをクリックすると、ポップアップが出てきますので、そこのNew Terminalというところをクリックすると、このように、bashのターミナルが出てきますので、そこからでもいいですね。

$ gem install rails -v 5.0.0.1

すると・・2017年4月現在では・・下記のように成功したと出てきます。

tom2rd:~/workspace $ gem install rails -v 5.0.0.1
Fetching: i18n-0.8.1.gem (100%)
Successfully installed i18n-0.8.1
Fetching: thread_safe-0.3.6.gem (100%)
Successfully installed thread_safe-0.3.6
Fetching: tzinfo-1.2.3.gem (100%)
Successfully installed tzinfo-1.2.3
Fetching: concurrent-ruby-1.0.5.gem (100%)
Successfully installed concurrent-ruby-1.0.5
Fetching: activesupport-5.0.0.1.gem (100%)
Successfully installed activesupport-5.0.0.1
Fetching: rack-2.0.1.gem (100%)
Successfully installed rack-2.0.1
Fetching: rack-test-0.6.3.gem (100%)
Successfully installed rack-test-0.6.3
Fetching: mini_portile2-2.1.0.gem (100%)
Successfully installed mini_portile2-2.1.0
Fetching: nokogiri-1.7.1.gem (100%)
Building native extensions. This could take a while...
Successfully installed nokogiri-1.7.1
Fetching: loofah-2.0.3.gem (100%)
Successfully installed loofah-2.0.3
Fetching: rails-html-sanitizer-1.0.3.gem (100%)
Successfully installed rails-html-sanitizer-1.0.3
Fetching: rails-dom-testing-2.0.2.gem (100%)
Successfully installed rails-dom-testing-2.0.2
Fetching: builder-3.2.3.gem (100%)
Successfully installed builder-3.2.3
Fetching: erubis-2.7.0.gem (100%)
Successfully installed erubis-2.7.0
Fetching: actionview-5.0.0.1.gem (100%)
Successfully installed actionview-5.0.0.1
Fetching: actionpack-5.0.0.1.gem (100%)
Successfully installed actionpack-5.0.0.1
Fetching: activemodel-5.0.0.1.gem (100%)
Successfully installed activemodel-5.0.0.1
Fetching: arel-7.1.4.gem (100%)
Successfully installed arel-7.1.4
Fetching: activerecord-5.0.0.1.gem (100%)
Successfully installed activerecord-5.0.0.1
Fetching: globalid-0.3.7.gem (100%)
Successfully installed globalid-0.3.7
Fetching: activejob-5.0.0.1.gem (100%)
Successfully installed activejob-5.0.0.1
Fetching: mime-types-data-3.2016.0521.gem (100%)
Successfully installed mime-types-data-3.2016.0521
Fetching: mime-types-3.1.gem (100%)
Successfully installed mime-types-3.1
Fetching: mail-2.6.4.gem (100%)
Successfully installed mail-2.6.4
Fetching: actionmailer-5.0.0.1.gem (100%)
Successfully installed actionmailer-5.0.0.1
Fetching: nio4r-1.2.1.gem (100%)
Building native extensions. This could take a while...
Successfully installed nio4r-1.2.1
Fetching: websocket-extensions-0.1.2.gem (100%)
Successfully installed websocket-extensions-0.1.2
Fetching: websocket-driver-0.6.5.gem (100%)
Building native extensions. This could take a while...
Successfully installed websocket-driver-0.6.5
Fetching: actioncable-5.0.0.1.gem (100%)
Successfully installed actioncable-5.0.0.1
Fetching: thor-0.19.4.gem (100%)
Successfully installed thor-0.19.4
Fetching: method_source-0.8.2.gem (100%)
Successfully installed method_source-0.8.2
Fetching: railties-5.0.0.1.gem (100%)
Successfully installed railties-5.0.0.1
Fetching: bundler-1.14.6.gem (100%)
Successfully installed bundler-1.14.6
Fetching: sprockets-3.7.1.gem (100%)
Successfully installed sprockets-3.7.1
Fetching: sprockets-rails-3.2.0.gem (100%)
Successfully installed sprockets-rails-3.2.0
Fetching: rails-5.0.0.1.gem (100%)
Successfully installed rails-5.0.0.1
36 gems installed

Hello World アプリケーション

フレームワークの読み込み(作成)をするのに

$rails _5.0.0.1_ new hello_app

とターミナルに打ち込みます。

Bundlerでいっぱいファイルができました。Bootstrapのような感じのファイル構成ですね。。

Gemfileの編集

インストールされたファイルたちのバージョンをチュートリアルで使うバージョンに合わせるために、Gemfileを編集して、もう一回インストールする必要があるそうです。Herokuで使うSQLがPostgresなので、それへの対応だと思います。

左のファイル欄からgemfileを選んでダブルクリックすると、編集画面が出てきます。

source 'https://rubygems.org'

gem 'rails',        '5.0.0.1'
gem 'puma',         '3.4.0'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.0.0'
gem 'coffee-rails', '4.2.1'
gem 'jquery-rails', '4.1.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.4.1'

group :development, :test do
  gem 'sqlite3', '1.3.11'
  gem 'byebug',  '9.0.0', platform: :mri
end

group :development do
  gem 'web-console',           '3.1.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '1.7.2'
  gem 'spring-watcher-listen', '2.0.0'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

と編集して、タブを閉じると・・

Saveするか?と聞かれますので、Saveします。

ちなみに、 group :development, :test do ~ endの環境と、group :development do ~ endの環境で開発時とテスト時で環境を変えているようです。これがHerokuの時に効くおまじないだそうです。。

で・・・このGemfileを動かします。

$ cd hello_app/
$ bundle install

そうすると、何やら・・・Conflictが起こるので、bundle updateをしろって最後に出てきます。

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

それで

 $ bundle update

と入れると、bundle updated! って最後に出てきますので、成功したんでしょう(笑)

Rails serverの立ち上げ

$ cd ~/workspace/hello_app/
$ rails server -b $IP -p $PORT

よくわかりませんが、Cloud9では、このコマンドみたいです。

そうすると・・・Webサーバーが立ち上がるんですね。

tom2rd:~/workspace $ cd hello_app
tom2rd:~/workspace/hello_app $ rails server -b $IP -p $PORT
=> Booting Puma
=> Rails 5.0.0.1 application starting in development on http://0.0.0.0:8080
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.4.0 (ruby 2.3.0-p0), codename: Owl Bowl Brawl
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:8080
Use Ctrl-C to stop

で赤の文字のところをクリックしてあげると、下記のようなWebページにアクセスできます。

Hello worldって出すために二つのファイルを書き換えます。

一つ目は、app/controllers/application_controller.rb というファイルを以下のように・・
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def hello
    render html: "hello, world!"
  end
end

ルートの情報を定義するファイル config/routes.rb に以下のように書く。。
Rails.application.routes.draw do
  root 'application#hello'
end

そして、先ほどのホームページをリロードすると・・

こんな感じで、Hello Worldができました(笑)

Gitでバージョン管理

Gitについての基本的な使い方は、Pro Git が有名だそうです。

肝心なところですが・・・ 今日はここまで(笑)

次はここからです。

第1章 ゼロからデプロイまで | Rails チュートリアル
SNSの開発を題材にした無料の大型チュートリアルで、ウェブサービスの開発から公開までの流れを実例を通して学べます。解説動画や質問対応サービスも提供しています。

その2はこちら(笑)
その3はこちら(笑) 

コメントを残していただけるとありがたいです

Loading Facebook Comments ...
%d人のブロガーが「いいね」をつけました。