2時間でネット公開！速習rails環境構築とアプリ開発

Founder 代表取締役 CEORails3認定ブロンズ技術者

野呂浩良

2時間でネット公開！速習Rails環境構築とアプリ開発

1Copyright © 2015-2016 TimeShift Corp. All Rights Reserved.

構成（1時間55分）

1. Introduction ( 10分)自己紹介、本日のゴール

2. Rails 基礎知識 ( 30分)開発環境、開発言語、Ruby on Rails、作業方法の基礎

3. 実践ワーク ( 70分)Cloud9で開発環境を構築、お試しアプリケーションの開発、Gitでバージョン管理、Herokuでネット公開

4. スキルアップのコツ ( 5分)

5. Appendixお薦めの学習サイト、書籍、ツール等

2Copyright © 2015 TimeShift Corp. All Rights Reserved.

Introduction

野呂浩良タイムシフト株式会社代表取締役Rails3認定ブロンズ技術者MBAエンジニア講師

経験ゼロからのプログラミングを

2回経験。

3

キャリア

Copyright © 2015-2016 TimeShift Corp. All Rights Reserved.

10年以上、非エンジニア社会人。異業種・異職種での転職と経営大学院を経て2015年4月に起業。

1980年誕生（松坂世代）

2003年株式会社すみや【接客販売】

2006年株式会社リクルート【法人営業】

2009年株式会社ワークスアプリケーションズ【運用保守】

2012年グロービス経営大学院大学 MBA

2015年タイムシフト株式会社（創業）

4

プログラミングとの出会い


①問題解決能力発掘プログラム(2009年10月〜2010年3月)

・ネットなし・レクチャー禁止・文献なし・呼び出し＆指導入り

本ネット

COBOL

DELPHI

ORACLE DB(SQL)

エンジニア

経験ゼロ

独力

COBOL

COBOL

DELPHI

DELPHI

5

Ruby on Rails との出会い


②リーンスタートアップ(2014年4月〜2014年10月)

・アイデアソン X回・ハッカソン X回・Startup Weekend 3回・もくもく会 X回

本

ネット

300アイデア

3プラン

1プラン

エンジニアメンバー

ゼロ独力開発

独力開発

エンジニアが・・・


Ruby on Rails スキル

2014年11月6日。「Rails3技術者認定ブロンズ」に一発合格！Railsを本気で学びはじめて約2ヶ月半。

7

スクール開校への原点


『自分ではカタチにできない』と思い込み、エンジニアを探すという口実で前に進められずにいる非エンジニアの

まずカタチにすることでリーンスタートアップを行いたい(フリーランスで働きたい)という課題を

自力でプロトタイプを作成できるスキルを身につけることで解決する。

誰の？何の課題を？どう解決するのか？

8

私たちのミッション


すべての人が、テクノロジーを武器にして活躍できる社会をつくる

対面講義 & ネット

Rails基礎

チーム開発

• Ruby(Rails)• PostgreSQL• HTML• CSS(Bootstrap)

WEBエンジニア

経験ゼロ

デザイン基礎

SNS機能

受託開発

グループタスク機能

9

本日のゴール

3つの状態に到達すること

1. Rails経験ゼロから学習環境を構築できている

2. Webアプリケーション開発の素養が身についている

3. モチベーションがグッと向上している



Rails基礎知識

11

開発環境とは


開発作業に必要な場所と道具を用意すること。

開発言語

DIYで言うところの「縁側とノコギリ」。

開発環境開発言語作業方法


開発環境とは

構築は従来はPCやサーバを入手して複雑なインストール作業が必要だったが、今やボタンひとつで可能に。

従来本講座

・ボタン１つでOK

わずか３０分で完了！

Cloud9・インストールするPCを用意↓・開発言語をインストール↓・フレームワークをインストール↓・データベース管理システムをインストール↓・バージョン管理システムをインストール等

初めての時は3日はかかる…。



開発環境とは

Cloud9内には言語やツールが用意されているため、ブラウザで開いて使うだけ。

フォルダビューワファイルビューワ

ターミナル



開発言語とは

人間にもコンピュータにもわかるコトバで、プログラムを構築しコンピュータを動かすことができるもの。

Ruby PHP



開発言語とは

開発言語は60年前に生まれ、時代の潮流と共に様々な言語が生まれた。Ruby は1995年に誕生。

※出典元：ひつじTOWN「C言語あれこれ」 http://l-edge.jp/lep/r_prog/prog_c01.html


http://l-edge.jp/lep/r_prog/prog_c01.html


開発言語とは

世界中にある著名な言語のうち、Rubyは唯一、日本人まつもとゆきひろ氏が開発した言語。



Ruby on Rails

開発言語は Ruby 。Ruby on Rails は Ruby で開発する際の「型」となるフレームワーク。



Ruby on Rails

Basecamp創業者 David HeinemeierHansson氏によって、無駄な時間を減らすために作られた。

DRY (Don't repeat yourself) CoC (Convention over Configuration)

“ぼくがやろうとしていることは、自分の時間を浪費する時間を減らそうっていうこと。どうでもいいことに時間を費やすのを減らす。”

「同じことを繰り返さない」「設定よりも規約」

※出典元：HRナビ「「10倍プログラマ」の神話、Ruby on Railsの生みの親が語った高い生産性のカギとは!?」http://hrnabi.com/2015/01/30/5463/


http://hrnabi.com/2015/01/30/5463/

http://hrnabi.com/2015/01/30/5463/


Ruby on Rails

Ruby on Rails で作られたWebサービスの例

「ストリートアカデミー」さん


出典元：https://www.street-academy.com/home

https://www.street-academy.com/home


Ruby on Rails

インターネット

ブラウザを通して通信が流れる。通信先のコンピュータから処理結果が返る。ブラウザ上に画面が表示される。

http通信リクエストGET, PUT, DELETE …

レスポンスHTML, images …

URL



Ruby on Rails

画面表示内部処理データ管理

HTTP Server

Controller

View

Model

デー

タベ

ース

管理

シス

テム

内

Database

コンピュータがhttp通信を受け取り、役割に応じて処理が順番に流れ、レスポンスとして返る。

リクエストGET

レスポンスHTML

RouterURL

① ② ③ ④ ⑤

⑥⑦⑧⑨10



Ruby on Rails

各役割は所定のフォルダ内にファイルとして存在。その中に開発言語 Ruby が書かれている。

http S

erve

r

Contro

ller

Vie

w

Mode

l

デー

タベ

ース

管理

シス

テム

Route

r

役割別のフォルダ構造。ファイル内に Ruby が書かれている。

Cloud9内概念図


23

http S

erve

r

def index

@blogs = Blog.all

end

<% @blogs.each do |blog| %><% end %>

class Blog < ActiveRecord::Baseend

/views/blogs/index.html.erb


http通信とURLの組み合せから処理を流す先を判定。C→(M→DB→M→C)→V→Cと通信が流れる。

/config

/ro

ute

s.rbURL/blogs

httpGET

Ruby on Rails

blogs#

inde

x

/controllers/blogs_controller.rb

/models/blog.rb

PostgreSQLblogsテーブル

h1 {}

/assets/stylesheets/blogs.css.scss

“O/Rマッパー”Blog.all↓RubyからSQLに変換↓SELECT * FROM blogs;


24

http S

erve

r


オモテは、HTML, CSS。ウラはRuby, SQL。Rails はhttpリクエストからレスポンスまでの流れをつくる。

/config

/ro

ute

s.rbURL/blogs

httpGET

blogs#index

/controllers/blogs_controller.rb

/models/blog.rb

PostgreSQLblogsテーブル

/views/blogs/index.html.erb

Ruby on Rails

/assets/stylesheets/blogs.css.scss



Ruby on Rails

画面表示内部処理データ管理

HTTP

Serve

r

Contro

ller

Vie

w

Mode

l

デー

タベ

ース

管理

シス

テム

内

Database

Rails を理解する第一歩は、http リクエストからレスポンスまでの流れを理解すること。

リクエストGET

レスポンスHTML

Route

rURL

① ② ③ ④ ⑤

⑥⑦⑧⑨10



作業方法の基礎

キーボードを使いターミナルを操作する。ターミナルは、文字でコンピュータを操作するための窓口。

ターミナル




ターミナルは、コンピュータに対して一行（プロンプト）につき一回だけ命令ができる。

プロンプト

現在いるディレクトリ(=フォルダ)

コンピュータをキーボードで操作することに慣れましょう。




マニュアルを見る。コマンドをコピーする。ターミナルに入力する。エンターで実行する。

①マニュアルを見る ②コマンドを作成する ③ターミナルに入力する

編集が必要

そのまま使える

コピー＆ペースト

編集してコマンドを完成

※メモ帳では半角”や’が全角に自動変換されることがあるため使用禁止



実践ワーク

30

実践ワーク


3ステップで、Webアプリケーションをネット公開！

【STEP0】Cloud9で開発環境を構築

【STEP1】お試しアプリケーションの開発

【STEP2】Gitでバージョン管理

【STEP3】Herokuでネット公開(初回)

① ② ③

1

2

3

0

https://goo.gl/Tbr0yi

https://goo.gl/Tbr0yi

31

Cloud9

実践ワーク

【図解】3ステップ


① ② ③

画面内部データ

C

V

M DB

Heroku画面内部データ

HTTP

Server

CV

M DB

0

Git内(ファイル)に記録

C

V

M

1

2

3

HTTP

Serve

r

32

続きは・・・会場にて！

Railsエンジニアとして有償で受託開発ができるまで、到達していただきます。


http://diveintocode.jp/



2時間でネット公開！速習rails環境構築とアプリ開発

Education