気ままに趣味旅行

面白いコト「拡がる／拡げる」

トップ > Ruby

ウェブサイトを作る2　Ruby on Rails

Ruby

f:id:hiroakies4463:20190110194257j:plain

どうもhiroakiです。

 

今回はRubyのウェブフレームワークであるRuby on Railsを用いてウェブサイトを作っていきたいと思います。progateを参考に作ってみます。よろしくお願いします。

 

▼前回までの記事はこちらに載せています。

hiroakies.hatenablog.com

 

lesson2

開発に入る前に基礎的なことを押さえましょう。Railsでは、MCVという考え方を理解することが重要です。

Model　モデル

モデルは、データを操ります。コントローラーからの命令に従って、データベースから必要な情報を取り出してコントローラーに情報を返したり、コントローラーの命令に従って、データベースに情報を書き込んだり、書き換えたりします。

Controller　コントローラ

コントローラーは、司令塔です。コントローラーの命令に従って、モデルとビューが働きます。

View　ビュー

ビューは、デザインとユーザーインターフェースを操ります。コントローラーから渡されたデータを使って、どういうページを表示するか定義します。見た目だけではなく、入力フォームなどのユーザーが触れる部分を正しく機能するように設置するのもビューの仕事です。　

router　ルーター

MCVとは別に、ルーターという重要な機能があります。webはクライアントからのリクエストに、サーバーがレスポンスすることで成立しますが、ルーターはhttpリクエストを読み取って、処理を振り分けコントローラに渡します。

 

以上、ブラウザでページが表示されるまでに、ルーター→コントローラ→ビューの流れで処理が行われることを押さえましょう。 

 

参考記事：

rails-study.net

www.yuta-u.com

 

lesson3

次にlesson1で作ったtweet_appにトップページを作っていきます。

  1. cd tweet_app
  2. rails generate controller home top

1.まず、tweet_appディレクトリへ移動してください。

2.次に「rails generate（gと省略できます。生成するの意） controller home（コントローラー名） top（アクション名）」のコマンドを実行します。※同名のコントローラがすでにある場合は、このコマンドを使えません。

どうでしょう。新しいWebページが作られましたか？

「localhost:3000/home/top」のURLでアクセスしてみましょう。

 

次に、viewsフォルダに「homeフォルダ」と「top.html.erb」ファイルが作成されたのを確認しましょう。このtop.html.erbがトップページとしてふさわしくなるよう装飾しましょう。コードは好きなように、書いてください。何でもいいですよ。

ちなみに、拡張子erbは「Embedded Ruby（埋め込みRuby）」の略です。HTMLコードの中にRubyのコードを組み込むことができます。

  1. <-! top.html.erb -->
  2. <h1>自分の気持ちを正直に</h1>
  3. <p>～書き込もう～</p>

 

コントローラ

「rails g controller home top」を実行すると「home_controller.rb」というコントローラファイルが作られ、下のように「topメソッド」が追加されます。このコントローラ内のメソッドを「アクション」といいます。

  1. #home_controller.rb
  2. class HomeController < ApplicationController
  3. #topメソッド=アクション
  4.   def top
  5.   end
  6. end

このアクションは、コントローラ名(home_controller)と同名のフォルダ(home)から、アクション名(top)と同名のファイル(top.html.erb)を探してきて、ブラウザに返します。

 

ルーター

ルーターは「config/routes.rb」に定義されます。実際に中身を開いて確認してみましょう。

ルーターは、送信されたURLをみて、httpリクエストをgetで受け取り、「どのコントローラのどのアクション」で処理するか決めます。「get "URL" => "コントローラー名#アクション名"」という形になっています。
例えば、ブラウザから「localhost:3000/home/top」というURLが送信されたら、ルーターがURLを読み解き、homeコントローラーのtopアクションで処理されるよう働いてくれます。

 

次に、このルーターを書き換え、トップページを表示するためのURLを変更してみましょう。

  1. #route.rb
  2. Rails.application.routes.draw do
  3. get "top" => "home#top"
  4. end

上記のように書き換えると、「localhost:3000/top」でトップページにアクセスできるようになります。

 

ちなみに下のようにすると、「localhost:3000/」でトップページにアクセスできるようになります。

  1. #route.rb
  2. Rails.application.routes.draw do
  3. get "/" => "home#top"
  4. end

 

 

lesson4

次に、サービス紹介ページ(aboutページ)を作っていきます。

先ほどのlessonを復習しながら、①ルーティングの設定②homeコントローラーの変更③ビューの作成を行いましょう。

①ルーティングの設定

  1. #route.rb
  2. Rails.application.routes.draw do
  3. get "top" => "home#top"
  4. get "about" => "home#about"
  5. end

②homeコントローラーにアクションを追加

  1. #home_controller.rb
  2. class HomeController < ApplicationController
  3. def top
  4. end
  5. def about
  6. end
  7. end

③ページビュー(about.html.erb)を作成

  1. <-! about.html.erb -->
  2. <div class="about-main">
  3. <h2>TweetAppとは</h2>
  4. <p>SNSサービスです。近況やつぶやきを投稿し、他のユーザーと楽しくコミュニケーションしましょう。</p>
  5. </div>

 

lesson5

装飾

CSSファイルは「app/assets/stylesheets」に入っています。「rails generate controller home ...」コマンドで「home.scss」が自動生成されます。
「scss」はCSSを拡張したものでSassと呼ばれるものです。CSSをより効率的に書くことができるので、気になる人は下記事を参考にしてみてください。

hiroakies.hatenablog.com

 

では、自分なりに、トップページとサービス紹介ページのCSSを「home.scss」に記述しましょう。CSSについて忘れた人は、下記を参考に。

hiroakies.hatenablog.com

 

lesson6

次に「public」フォルダを開き、画像を配置しましょう。「public」フォルダの画像は、「<img src="/画像名" >」や「background-image: url("/画像名");」のように、画像名を指定するだけで表示できます。

この時、指定するURLは、ディレクトリ階層の最上位にある「ルートディレクトリ」を意味する「/」から始めなければなりません。ルートディレクトリは一番外側のフォルダだと思えばいいです。

参考：https://wa3.i-3-i.info/word1504.html

  1. <img class="about-img" src="/tweets.png">

 

 

最後に…！

ちなみにこれまでのlessonで、間違えてgenerateしてしまうことありませんでしたか？必要のないものが作られてしまって困りますね。

失敗する度に、何度も作り変えてたらキリがないですよね。。

例えば、topアクションを作るつもりが、タイプミスでhomeコントローラーのpopアクションを作ってしまった場合、下のコマンドでそれを壊すことができます。

  1. rails destroy controller home pop

destroyは破壊するの意で、dと省略できます。詳しくは下記事を参考に。

qiita.com

 

 

今回は以上です。

次回以降もまとめていきます。自分も学びながらですので、間違いや意見、質問等あればコメントください。TwitterにDMを送っていただいても構いません。

では。

ウェブサイトを作る1　Ruby on Rails

Ruby

f:id:hiroakies4463:20190110194257j:plain

どうもhiroakiです。

 

今回はRubyのウェブフレームワークであるRuby on Railsを用いてウェブサイトを作っていきたいと思います。progateを参考に作ってみます。よろしくお願いします。

今回は、自分の練習のためもあり、progateのレッスンとほぼ同じものを作ることになると思いますが、お付き合いください。なお、このレッスンではHTMLやCSSについては最低限のことしか紹介しません。細かく気になる人はprogateに加入してみるといいでしょう。

 

▼記事はこちらにまとめていきます。

hiroakies.hatenablog.com

 

Ruby on Railsとは

まずは、Ruby on Railsの基礎を押さえましょう。

Ruby on Rails（以下Rails）はRubyでwebアプリケーションを作るフレームワークのひとつです。Rubyのwebアプリケーションフレームワークには他にもSinatraなど様々あります。これらのフレームワークを使うことで、初めから自分でコードを作る必要がなくなります。開発速度が上がりますね。また、複雑なコードを用意しなくてもいいなどのメリットがあります。

以前も少しご紹介しましたが、ウェブアプリを作る人の中にwebフレームワークを使わない人はいません。

参考文献：

eng-entrance.com

 

Ruby on Railsの原則

Railsでは、多くのプログラマーがより素早く、簡単にサービスを開発できるように、次の原則があります。この原則に「納得がいかない！」という人はRailsでの開発に向いていないかもしれません。

DRY(Don't Repeat Yourself)
同じコードや似たようなコードを何度も書くのは、効率が悪い。また変更に弱い為やめるべき。皆が理解できる拡張性の高いコードも同じようにDRYなコード記述によって生まれる。

COC(Convention Over Configuration)
プログラマーの意思よりも「規約(決められたルール)を優先する」ということ。Railsはどんな風にアプリケーションを開発することが最善の方法であるか、ある程度事前に決めてくれている。これを「規約」といい、規約を守り抜くことを前提としてフレームワークが構築されている。規約のレールに乗ることで、最速でアプリケーション開発を行うことができる。初心者の方にとって有益。

 

では、これから開発を進めていきます。先ほども紹介した通り、プログラミング初心者向け勉強サイト、progateの内容を元に進めていきます。ここでは、ツイッターのようなサイトを作っていきます。

prog-8.com

 

環境構築

railsのインストールは以下のサイトを参考にしてください。

www.javadrive.jp

azumayuri.hatenablog.com

データベースの設定に関して。

www.javadrive.jp

 

 

初心者には、環境構築があまり必要のないCloud9での開発もおすすめです。

実はWindowsでのrails開発は何かと苦労が多いらしいです。自分もこれにはちょっと苦戦しまして、どうすればいいのか途方に暮れていました。

そこで、AWSのCloud9を試すことにしました。クラウドのIED（統合開発環境）であれば、そういったPCなどの違いも関係ないとの事。これですんなり開発に進めます。

sakagami3.com

road2dagaya.tokyo

style.potepan.com

paiza.jp


これに似たサービスで、PaizaCloudもおすすめです。

paiza.cloud

 

AWSのcloud9やPaizaCloudなどで環境設定をする際は、以下を参考にしてみるといいでしょう。

https://dotinstall.com/search?q=AWS&f=topbar

 

 

lesson1

ひとまず、環境は整いましたかね。ちょっと時間もかかったかもしれませんが、早速、開発していきましょう。

Railsで開発を始めるには、ターミナルで「rails new アプリケーション名」というコマンドを実行します。

  1. rails new testtweet_app

コマンドを実行することで、入力したアプリケーション名と同名のフォルダが作成され、その中に開発に必要なフォルダやファイルが用意されます。コマンド実行後にどんなものが作られたか、実際に中身を確認してみてください。この自動生成機能がrailsのウリです。

  1. rails server

次に、開発中のアプリケーションをブラウザで表示するため、サーバーを起動します。「rails server」してください。
「localhost:3000」のURLにアクセスし、初期画面が表示されれば成功です。

 

 

＋α

こちらも参考にしてみてください。

railsguides.jp

qiita.com

 

感想

ちょっと疲れたので、今回はここまで。

リンクばかりですみません。もし、上記までで上手くできない人がいらっしゃればコメントください。私も分からないなりに、なるべく調べてご回答差し上げます。

今回は、いつもの文章量からすると、すこし少な目かもしれませんが、初めての人にとっては環境構築に時間がかかり、大変だと感じたところかもしれません。特にWindowsの人←

自分も調べたりなんやりで結構時間かかりました。

時間がかかりすぎて、「うわー自分プログラミング向いてねー」ってなりました(笑)ストレスたまったんで、やめようかなと思いました(笑)

今回試行錯誤の末（≒Google検索の末）、ドットインストールの動画にたどり着き、なんとか開発環境を整えましたが、実はあまり仕組みがよく分かっていないです。なので今後も学びつつまとめていこうと思います。

 

最後に、「プログラミングで大事なのは実際に自分で手を動かして試してみること」だと、よく言われますよね。プロゲートやpaizaその他では、サイト内でコーディングを試せるようになってはいますが、それだけでは実際に開発はできません。なので環境構築って初心者を脱するには大事なことなんじゃないか？と思ってます。

なぜなら、学んだことをある程度自分で「再現」できれば、「自分はここまではできた」と思えますからね（まあ、自己満ですが）。なので、今のところ、学んだことは自分で試してみるのが一番良いんじゃないかなと思って進めていってます。

また、自分はこんな風に、偉そうに言ってますが、実際今も分けわからん状態なので、独学試行錯誤中です(笑)

こうやって仮説を立てて学ぶことも大事らしいですんで、なんでもかんでも試していこうじゃないですか(笑)吹っ切れて。

 

みなさん、これからlesson続けていきますが、一緒に頑張りましょう。きっと、できます。これ、自分にも言い聞かせてます(笑)きっと、じゃない必ずできます。こうすればいい、とかこれは何だとかありましたら、ぜひコメントください。お互いに知恵を出し合って解決できれば、と思います。

 

長くなりましたが、以上です。

ではでは。