今日から本題のRubyとSinatraにはいりました！

〜インストール〜

まずは、Rubyをインストールするために
「rbenv」をインストールします。
Rubyはいくつもバージョンがあるらしく、
rbenvをインストールすることで、
バージョンを簡単にシフトすることが出来ます。
そのあと、Rubyをインストールしました！
参考サイト
rbenv&Rubyのインストール

続いてSinatraのインストールです。
Sinatraのインストールはとても簡単で
ターミナルに
「gem install sinatra」
と
「gem install sinatra-reloader」
の２行を打つだけです！
参考サイト（２.Sinatraのインストールからご覧ください）
Sinatraのインストール

〜Ruby？Sinatra？？〜

「Rubyは言語で、Sinatraはフレームワークです。」
そう言われたのですが、
妹はここの関係性がわかりませんでした。

姉「Rubyは難しいから、それを簡単に扱うのがSinatraだよ」
妹「？？？？？？
　　…この前やったBootstrapとcssの関係みたいな感じ？」
？「まあそんな感じっちゃそんな感じだね」
妹「ほーほー」

んんん……
このソースコードはどこがRubyでどこがSinatraなんだ？？

ここから妹は質問攻めをしました。
結果！
・SinatraはRubyで書かれている！
・SinatraはRubyでWebアプリケーションをつくるときに
　必要なものを集めてあるもの！
ということがわかりました。
これを把握できたことが妹の中ではすごく大きく、
頭の中の「？」が減りました。

厳密に言うと少し違うのですが、感覚的には
フレームワークというのは、
「なにか特定の言語で、何かしらのアプリケーションをつくるときに
必要であろうものを集めてあるもの」
という感じです！

姉が妹のために、身近なもので
RubyとSinatraの関係性を表現してくれたので、
こちらをご覧ください！↓↓↓↓

〜Hello world!〜

さてさて、これから
Rubyをつかって「Hello world!」
と表示したいと思います。

姉妹はいつもSublime Text2を使っているので、
そのエディタを使っていきます。
まずはエディタでファイルをつくります。
ファイルの拡張子なのですが、
厳密には「.rb」にしなくても動きますが、
「.rb」にすることが推奨されています。

そのファイルの中に

と打ちましょう。

打ち終えたら、ターミナルに移動します。
ここからが少し大変なのですが、
ファイル名.rbのファイルがある場所に
「ls」や「cd」コマンドを利用して移動して、
「ruby ファイル名.rb」というコマンドを実行します。
こんな感じ！↓

Webサーバーを立ち上げるためです。
今は一時的にターミナルでWebサーバーを立ち上げているので
ターミナルを閉じて、またRubyでつくったものを表示させたいときに
ターミナルでこのコマンドを入力します。

ターミナルの使い方でわからないことがあったら
妹もこのサイトをみて頑張ったので
こちらをご覧ください！
ターミナル使い方

入力し終えたら、
ブラウザでhttp://localhost:4567/を開いてみてください！
そうすると…

このように表示することができました！

〜まとめ〜

gitのときでもそうでしたが、
『習うより慣れろ』
ということなので、
これからたくさん使って理解を深めたいと思います！

姉妹「頑張ります！」

今日のソースコードはこちらです。
参考にしてくださいね！

前回のソースコードはこちら

？「じゃあ次は、この前作ったHTMLファイルを
　　Rubyでだしてみよう！」
姉妹「…え？どういうこと？」
妹「リンクってことではないですよね？」
？「うん、違うね」

ここから姉妹の戦いが始まりました。
各自、HPを漁っていきます。
妹「『ruby htmlファイル 出力』……
　　いや、でもファイルに入出力するわけではないか」
姉「『ruby html 埋め込み』……違うかー。
　　そういえば、SinatraってRubyを簡単にしてくれるんだよな〜、
　　そしたらSinatraでググればいいのかな」
？「うんうん」妹「（なるほど）」
妹「『Sinatra htmlファイル 読み込み』……
　　え！これめっちゃいけそう！！ぽいぽいぽい！！」

妹「え、できない…」
？「これより簡単な方法あるよー」
妹「まじかーーー」
姉「『sinatra html』……このHPに書いてあるっぽい…」
妹「………（負けず嫌いだからまだ聞かない）」
？「あー、このHPの通りにやったらできるね」
妹「…！！？？？（姉に先越されて少し悔しい）」
姉「あれ？拡張子が.htmlになっちゃう！」
妹「チラ…、カタカタカタカタ。よっしできたー！！」
姉「ええええ！！！」

さあ、姉が発見したHPにはどんなことが書いてあったのでしょうか。

〜どうすればいいの？〜

Sinatraでは、「.erb」という形式でHTMLを表現できます。
そして、これらの基本構造は、このようにしましょう。
├── myapp.rb
└── views
　└── index.erb

myapp.rbと同じところに「views」というフォルダをつくり
その中に「.erb」のファイルを作成します。
「.erb」は、RubyもHTMLも書ける便利な拡張子です。
index.erbに、呼び出したい内容を書きます。
myapp.rbには

と書きます。
姉が発見したHP

〜拡張子の問題〜

さて、ここで姉が壁にぶち当たった拡張子のお話です。
今までのように、Sublime Textで保存する際に
ファイル名を「index.erb」と入力したのですが
なぜか保存して開いてみると「index.erb.html」
となってしまっているのです。

ここで、神の声待ち！！！

「ファイルのところで『情報を見る』をクリックして
そこから名前と拡張子ってとこで直してみな！」

姉「ほおお……、あ！できた！！」

無事保存することができて動かすことが出来ました！
さらに、ファイルの拡張子を常に表示させる方法があります。
そうすることで、ファイル名を変更するときに
拡張子自体も変更することが可能になり、
楽に変更することが出来ます。
そのやり方はこちらをご覧ください。
参考サイト
拡張子を常に表示させる方法
もし拡張子が自分が保存したい拡張子にならない場合は
この方法を実践してみてください！

今日のソースコードはこちらです。
参考にしてくださいね！

前回のソースコードはこちら

？「前回HTMLファイルを呼び出したけど、そのindex.erbから違うページへの行き方を調べてみましょう。さらに今回はそのページを『http://localhost:4567/about』でだせるようにしましょう。」

姉妹「はーい」
ということで、また各自調べ始めました。
そしてほぼ同時に
姉妹「できたーー！！！」
はい、できました。

妹が参考にしたサイト：違うページへの行き方

そのやり方なのですが、
まず最初につくった「.rb」ファイルの中に
get ‘/about’ do　
　　erb :about
end
というソースコードを書きます。
このような感じです。↓↓

そしてもしHTMLのファイルをもともと作っていて
about.htmlをリンクしようとしていたら
index.erbのソースコードをこのように変更しましょう。

そうすると！ちゃんと動くはずです！

でもまだページの移動だけしか出来ていなくて
CSSや画像の読み込みなどはまだです。

〜ブラウザ、サーバって？〜

さてさて、index.erbから違うページへの行き方は
簡単にできた姉妹だったのですが、
ブラウザとサーバの関係でつまずきました。
Rubyでのお話ですが、
まず、ブラウザというのはサーバからきた文字列を
デザイン化して表示するという感覚です。
サーバは、ブラウザからの要求をうけて、
その結果を文字列として返します。

姉がわかりやすく図を書いてくれました！
１.ユーザーがブラウザでアクセスしたいURLをうち、
　 そのURLが要求としてサーバに送られる。
　 ここでのURLはhttp://localhost:4567/aboutです。
２.「localhost:4567」というサーバが
　 /aboutの情報を取得するように動作し、get関数を見つける。
　 そこでabout.erbのファイルをブラウザに返すことを認識する。
３.about.erbのファイルを呼び出して、文字列としてブラウザに返す。
４.サーバから返ってきた文字列をブラウザがデザイン化して表示する。

まるでブラウザとサーバはコンビですね。
漫才みたいですね。
ブラウザさんがボケで、サーバさんがツッコミの感じ！
ブラウザさんがボケたら、
サーバさんはそのボケが書いてあるネタ帳を探して
必ず突っ込んでくれます。
サーバさん優しい…！！

妹自身もあまりよくわかっていない状況なので
またわかり次第詳しく書きたいと思います。
ごめんなさい！！

〜ちなみに〜

最初にターミナルでWebサーバを立ち上げる
という話をしましたよね。
そのWebサーバーというのが「localhost」であって
自分のPCの中にあるのです！

今日のソースコードはこちらです。
参考にしてくださいね！

前回のソースコードはこちら

今まではリンクを使って、
入力画面から送信確認画面に進んでいました。
それを今日はリンクではなく！
さらに入力した内容を確認画面で表示する！！
という難しい内容に挑戦しました。

〜GETとPOSTの違い〜

HTTPというのは
リクエストするとレスポンスが返ってくるという
通信の方式のことをいいます。
そしてHTTPのリクエストの種類のことをメソッドといいます。

ではこのことをふまえて
今日の内容にはいっていきましょう！

？「GETメソッドとPOSTメソッドの違いを説明するね。
　　簡単にいうと、
　　GETメソッドは情報を取得したいというリクエストで、
　　POSTメソッドは情報を追加したいというリクエストだよ。」
姉妹「ほーほー」
ちなみに、主体はブラウザです。

リクエスト・レスポンスって？

今まではaタグでリンクしていたから、
GETメソッドをリクエストで送られていたのです。
だから今回は、ユーザーが情報を入力して
その情報を追加したレスポンス（確認画面）がほしいので
POSTメソッドを使うわけなんですね。

〜挑戦！〜

これを理解して、早速姉妹は各自HPをあさり始めました。
発見したHPは二人とも同じでした！
→Sinatraでformを使ってPOSTしてみる
でもなかなか反映されません。
しかも姉妹二人とも同じところでつまづいていました。
※姉妹は確認画面のファイル名を「check.erb」にしています。

まず、myapp.rbにこのソースコードを書きます。

この＠emailや@messageは変数です。
またparamsというのを使うと、
パラメータを取得することができます。
今回でいえば、フォームで入力した値を
params[:パラメータ名]という使いかたで取得します。

はい、姉妹がつまづいたポイントその１！！
ここでpostに変更しているので
index.erbのほうの送信ボタンに貼ってあったリンクがあれば
そのaタグを消さないと

こんなエラーが出てしまいます。
なぜなら、リンクがそのままだとボタンを押したときに
getのリクエストが送られて
「このcheckっていうページを取得したい！」
ってことになってしまうからです。
そのためSinatra側では、
「え、getのリクエストが送られてきてるのに
　get ‘/check’になってない！」
と混乱してしまって、エラーがでます。

続いて、index.erbのファイルの中身なのですが
フォームを作る際、formタグで中を囲っているはずです。
そのformタグにaction =“check” method=“POST”と書きます。

これは、フォームになにか入力し、送信ボタンを押したときに
「送信されるデータの送信先がcheckで、
　checkにPOST（追加）してください！お願いします！」
というリクエストを送るためです。
また、
メールアドレスを入力してもらうというソースコードが
inputタグになっていますよね。そこに、name=“email”と書きます。
同じく、本文のほうのtextareaタグのところにも
name=“message”と書きます。

こうしないと先ほど宣言した変数に、
入力した内容を代入することができなくなります。

ちなみにフォームを作っている時以外でも
postでなにか表示させたいときには
formタグを使ってactionやmethodを指定しましょう！

はい、つまづいたポイントその２！
ここで英語が苦手な妹登場です！！　しょうもないミスをしました。
わかりますか。そうです。スペルミスです。
しかもemailでもmessageでもなく、nameのほうです。
１つだけ「neme」にしてしまったのです。
妹「スペルミスには気をつけよう…」

最後にcheck.erbの中身です。
入力した、メールアドレスと本文を表示させたいところに
<%=@email%>
<%=@message%>
と書きます。

そうすればそれぞれの変数に代入された、
入力された内容が反映されるはずです！！

しかし、ここで問題発生！
妹「よっしゃー！！できたぞー！！！！」
姉「え……、さっきのエラーがでる」
妹「え！！なんで！！？？？」

さあここから間違い探しが始まりました。
でもほんとになにが違うのかがわからない！！

妹「method=“POST”のとこ、大文字じゃなきゃいけないとかある？」
姉「カタカタ…。いや小文字でも大丈夫だ。」
姉妹「うーーーーん。」
？「…文字拡大してみる？」
妹「ここの空白が全角だったりしてね！」
姉「いやーそんなことあるわけ！（とりあえず直す）
　　…あれ、幅変わった。え！もしかして！！」
そしてリロードして送信ボタンを押すと……！！
姉妹「きたーーーーーーー！！！！！！！！」

…いやー、空白の全角、半角って怖いです。
わかりません。奇跡です。
姉「初歩的すぎて恥ずかしいよーー…」
よくある間違いらしいので気をつけましょう。

今日のソースコードはこちらです。
参考にしてくださいね！