つぶやきを投稿できるwebサイト。twitterよりも2chに近いかも。
- wifiに接続する(eduroamはダメです！HINES-WLANにしてください)
- Google ChromeまたはSafariで以下のページにアクセス cloud9 https://c9.io/
- 右上にある（隠れている時もある）sign inボタンを押して、メールアドレスとパスワードを入力（今から教えます） ログインすると、workspacesというのがでてきます
ここまでできた人から、これからどう操作するか教えます
このサイトは、webブラウザ(google chromeやinternet explorerなど)でlinusというOS(windowsのようなものです)を使えるというものです
必要なパーツをインストールします。
さっきの画像の「コンソール部分」に以下のコマンドを一行ずつ打ち込んでいきます。
インストールするためには、
gem install rails -v 5.0.1
をコピペし、エンターキーを押しましょう。このコマンドを打ち込んだら、なにやら大量にメッセージが出てきます。このメッセージが出てき終わったら次のコマンドを打ち込めます。
メッセージが終了したら、
~$
という表示に切り替わるので、次は、
rails _5.0.1_ new sns -d postgresql
をコピペしてエンターを押してください
Gemfileというものを編集します。 左側のファイル名が並んでいるところの下の方のファイルにGemfileというのがあります。それをクリックしてください。(Gemfile.lockではありません) クリックすると、画面中央から右側にかけて、文字が書き込めるような画面が開くと思います。 そこに以下のコードをすべてコピペしてください。(source...からgem 'tzinfo-data'...の行まですべてです）
source 'https://rubygems.org'
gem 'rails', '5.0.1'
gem 'bcrypt', '3.1.11'
gem 'faker', '1.6.6'
gem 'carrierwave', '0.11.2'
gem 'mini_magick', '4.5.1'
gem 'fog', '1.38.0'
gem 'will_paginate', '3.1.0'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'bootstrap-sass', '3.3.6'
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.12'
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
group :test do
gem 'rails-controller-testing', '0.1.1'
gem 'minitest-reporters', '1.1.9'
gem 'guard', '2.13.0'
gem 'guard-minitest', '2.4.4'
end
group :production do
gem 'pg', '0.18.4'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]コピペしたら、このファイル(ファイル名：Gemfile)を保存しましょう。control と sを同時押しすると保存できます。 (macの人はcommand と s)保存できたかどうかは、ファイル上のファイル名が書かれているタブを見て、以下の画像のように確認できます。
保存前（変更したけど保存してない）
保存後（変更していないか、変更して、保存してある）
保存し終わったら、またコンソールに以下のコマンドをコピペし、エンターキーを押してください
cd sns
（特にメッセージはでません。即、~$ みたいになるので、続けて以下の一行をコピペしてエンターキーを押してください
bundle update
データベースとは、簡単に言えば、データを保存する場所のことです。 データを保存しておかないと、過去のツイートを見ることができません。
ツイートを投稿するということは、
- ツイートを入力する
- データベースに保存する
という二つのステップがあって初めてできます。なので、データを保存するための設定は大事です。
データベースの設定をします。
画面左側のファイルツリーから「config」というフォルダがあるのでそこをクリックすると、中にあるファイルが見れるようになります。その中のdatabase.ymlというファイルをクリックして、右側のエディタで編集できるようにしてください。
そして、その中の内容をすべて消してください。 代わりに、以下のコードをコピペして、保存してください。（control と sを同時押し または command と sを同時押し)
database
default: &default
encoding: SQL_ASCII
pool: 5
development:
<<: *default
adapter: sqlite3
database: sns_development
test:
<<: *default
adapter: postgresql
database: sns_test
production:
<<: *default
database: sns_production
username: sns
password: <%= ENV['SNS_DATABASE_PASSWORD'] %>$ rails server-b $IP -p $PORT このコマンドをコピペし、エンターを押したら、
...:~/workspace/sns $ rails server -b $IP -p $PORT
=> Booting Puma
=> Rails 5.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
このようなメッセージが表示されると思います。この3行目のhttp://0.0.0.0:8080 のところをクリックして見てください。そうすると、「open」などの選択肢がでてくるので、「open」をクリックしてください。すると、ブラウザで新しいタブが開くはずです。 以下のような画面が表示されたら成功です。
いつまでたっても接続されない場合はWifi環境をチェック。HINES-WLANに接続していることを確認する。（できない場合はすぐ教えてください）
まずは、さっきの画面から、新しいホーム画面に変えます。まずはまたcloud9画面下のコンソールに以下をコピペし、エンターを押す
rails generate controller StaticPages home
このコマンドは、ホーム画面を表示するためのいろいろなセットアップをしてくれます
cloud9の左側のファイルツリーから、viewsというフォルダを探し、クリックしてください。（なければ、appというフォルダを探し、クリックしてからviewsを探してください） さらに、viewsフォルダの中のstatic_pagesフォルダをクリックすると、home.html.erbというファイルが現れます。これをクリックしてください。 そうすると、画面右側に編集画面が開きます。 以下のようにすでに書いてあるはずです。
しかし、それはすべて削除して、以下のコードをコピペして、保存してください。
<h1>ホーム</h1>
<p>ホーム画面です</p><h1> </h1>は見出しを意味します。これで囲むと文字が大きくなります
<p> </p>は段落を意味します。普通の大きさの文字が表示されます
ただし、これではまだホーム画面を表示することはできません。普段、皆さんは何気なくgoogleなどで目当てのページを見ることができていますが、それはさきほど作ったhtmlファイルなどを見ているわけです。ただ、これを表示するためには、このファイルがどこにあるかをコンピュータに教えておかないと見つけられません。これはこれから行う「ルーティング」は、表示したいhtmlファイルの場所をコンピュータに教えてあげるという作業です。 その作業は難しくはないです。 まず、画面左側のファイルツリーからconfigフォルダの下5~10個あたりにroutes.rbというファイルがあるので、これをクリックして開きます。 画面右側で編集できるようになるので、以下のように書き換えましょう。すでに何か書かれていますが、全て消して以下をコピペして保存しましょう。
Rails.application.routes.draw do
get 'static_pages/home'
root 'static_pages#home' # <= 追加
endrails generate controller Microposts
rails generate model micropost content:text user:references
contentというのは、マイクロポストの本文 userというのは、マイクロポストを送った人（今はいない） をそれぞれ指す
マイクロポストについての処理を行うコントローラ コード編集 : MicropostsController class MicropostsController < ApplicationController def new @micropost = Micropost.new end
def create @micropost = Micropost.new(micropost_params) if @micropost.save flash[:success] = "Micropost created!" redirect_to root_url else flash[:danger] = "micropost is too long or blank" redirect_to root_url end end
private def micropost_params params.require(:micropost).permit(:content) end end
マイクロポスト保存・管理に関するモデル コード編集 : models/micropost.rb class Micropost < ApplicationRecord belongs_to :user, optional: true #<= 変更 validates :content, presence: true, length: { maximum: 140 } # <= 追加 end
2行目：詳細は省略。現段階ではこれをつけないとマイクロポストを投稿する時エラーになる 3行目：文字数０のマイクロポストではエラーがでるようにする。また、最大文字数を１４０に制限 belongs_to :user,optional: true
ホームページでマイクロポストを投稿するための準備 class StaticPagesController < ApplicationController def home @micropost = Micropost.new end end
これでマイクロポストを送信できるようになった さっきのページを思い出してほしい マイクロポストを送るためのページをまだ書いていない
マイクロポスト投稿用のパーシャル
mkdir app/views/shared
touch ./app/views/shared/_micropost_form.html.erb
コード編集 : app/views/shared/_micropost_form.html.erb
<%= form_for(@micropost) do |f| %>
パーシャルを読み込むようにホーム画面をカスタマイズ
ホーム画面です
（aside : 余談・補足情報のセクション）
マイクロポストを投稿する準備 Rails.application.routes.draw do get 'static_pages/home' root 'static_pages#home'
resources 'microposts', only: [:create, :destroy] #<= 変更
For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
マイクロポストを投稿するためにデータベースを設定する rake db:migrate
サーバを起動し、サイトを見てみよう rails server -b $IP -p $PORT
マイクロポストを作成したはずだけどできない
マイクロポストを投稿する意味ー＞見るため・見てもらうため
マイクロポストを表示するページを作ろう
マイクロポストを取得する class StaticPagesController < ApplicationController def home @micropost = Micropost.new @microposts = Micropost.all #<= 追加 end end
コード編集 : views/static_pages/home.html.erb マイクロポスト表示用のパーシャル $ touch app/views/microposts/_micropost.html.erb コード編集 : app/views/microposts/_micropost.html.erb
これをホームに表示できるようにする
ホーム画面です
-
<%= render @microposts %>
ここまでのおさらい
・マイクロポストを投稿・一覧表示できるようになった
そのために必要なものはなんだったか？ ・MVCとデータベース 投稿する ・マイクロポストを入力・投稿するための見た目(View) ・マイクロポストの入力を投稿する(Controller) ・マイクロポストを保存するデータベースの設定・作成(Model) 表示する ・マイクロポストを取得する(Controller) ・マイクロポストを表示する(View)
大事なこと Webサイトは、色々なファイル（小さなプログラム）が役割分担して処理をすることで成り立っている
この辺で終わり？ 次回は4/14とか
続きをやってほしいという需要があればまたそのうちやります （個人的に連絡いただければいつでも教えます！というより一緒に勉強しましょう！）
デコレーションする cssを使う