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

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

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

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

今日は次のことをやりました。
１、送信完了画面を「〜/send-mail」でだす
２、POSTを使って、送信完了画面の表示
３、入力フォームで入力し、
確認画面で表示した内容を送信完了画面にもだす
４、mailgunとBundlerのインストール
５、「〜/test」とうってメール送信
６、送信ボタンをおして、メールを送信。表示は送信完了画面

１、２は以前にもやった知識を活用すればできます。
忘れてしまった方はブログをご覧ください↓
・「〜/send-mail」でだす
・POST

「ああああ、忘れたーーー。もうだめだーーー」
なんて思わなくても大丈夫です。
ブログを書いてる本人たちも結構忘れていましたから！笑

さて、そんなこんなで１、２を軽くかわした姉妹でしたが、
３でつまずきました。
正確にいえば妹がつまづきました。
妹はブログの文章を担当しているので、
過去にやった内容はアウトプットができているので、
なんとなくわかるのですが、
新しいことに入るとつまづいてしまうのです。

姉妹ともformタグらへんをかえるのは
なんとなくわかっていたのですが、
どのようなソースコードを書けばいいのかというのは、
姉が早くたどり着きました。

姉「入力フォームから確認画面に持ってくることを
もう１回やりたいってことでしょ？
でもそのままのソースコードをもってきたら、
また入力フォームが表示されちゃうからなー。
その入力フォームを隠すためにはーー……。
hiddenとかつかうのかな？」

姉の声を聞いた妹も早速hiddenを調べ、
ソースコードに書き足そうとするのですが、
どの部分をどのファイルに書き足せばいいのかわからない！！
姉にヒントをもらいながらやっとできました。
※確認：妹は入力フォーム画面をindex.erb、確認画面をcheck.erb、
送信完了画面をthank.erbにしています。

これがmyapp.rbのソースコード↑

これがcheck.erbのソースコード↑

これがthank.erbのソースコード↑

index.erbの入力フォームのところで、
メールアドレスを入力するinputタグの中にname=“email”
内容を入力するtestareaのタグの中にname=“message”
と書いたと思います。
なので、check.erbに「<input type = “hidden” 」
のあとのnameのところはそれぞれ同じnameを記述し、
valueのところには送りたい文字列を記述します。
今回の送りたい内容というのは、入力フォームにいれた文字ですよね。
その文字達は@emailと@messageにはいっているので
その変数を書きます。
そして表示させたいthank.erbのソースコードの中に
check.erbで記述した表示をするためのソースコードを書きます。

これで３はクリアです！
４を行ないます。
なぜmailgunとBundlerをインストールしなくてはいけないのか
って疑問ですよね。
まずmailgunですが、
メール送信するために普通に１からソースコードを書いていたら
すっっっごく大変です。
それを解決してくれるのがmailgunです。
ただmailgunだけをいれて
ためしにメールを送信しようとすると
このようなエラーがでてしまいます。
この英語を姉に翻訳してもらった結果
RestClientが必要と言われていることがわかりました。
なので、これもインストールしなくてはいけないことがわかりました。
RestClientがGemらしいので
そのときにBundlerが必要になります。
Bundlerは、
Gemと呼ばれているいわゆるパッケージが新しいのがあったり、
古いのがあったりすると
Bundlerがないと正常に動いてくれないらしいのです。
要するにRubyのGemたちを管理してくれるものです。

Bundlerをインストールしたらmyapp.rbと同じディレクトリの中に
「Gemfile」というテキストファイルを作って
その中にRestclientの名前を書き、
ターミナルでbundle installというコマンドを入力すれば
RestClientのインストールができます。

仕組みはこんなイメージです。↓↓

・mailgunについて
・Bundlerについて

インストールをし終えて５に進みます。
ここで忘れてはいけないのですが、
先ほどインストールしたBundlerなどを
ソースコードに反映させなければいけないので、

だったのを

に変更しておきましょう

そして、
メソッドを作るために
def ＜メソッド名＞
＜文＞
end
というメソッド定義を初めて使いました。
詳しくはこちらをご覧ください。→メソッド定義

このdefと、以前から使っているgetを使って書いていくのですが、
実は何パターンか書き方があるのです。
まずは、

次に

です。
最後のソースコードで、
get endとdef endの順番も入れ替えても問題なく操作できます。
定義を先にしてしまうと
普通は「定義されてないぞ！？」と焦るのですが、
定義されてないとなるとget endの外側に出て探します。
そうすると、次に書いてあるdef endの中で
定義がされているので動かせるのです。
ここがうまくいけば、
「〜/test」のURLをうてばメールが送信されるはずです！

最後に！！６です！
これができるようになれば、
送信フォームの完成に一歩近づいたような感じがしますよね！！
実は６って意外と簡単なんですよ。
５で書いたコードのURLを「test」ではなく「send-mail」に、
「get」を「post」に書き換えるだけです。

これは簡単！
そうすれば、送信ボタンをクリックするだけで
メールを送信できるようになると思いますよ！

いままでのソースコードはこちら

ちなみにapi-keyをpushしないための設定があります。
GitHubは課金しない限りすべての人にデータがみられてしまいます。
それを防ぐためにこのような設定をしなくてはいけません。
参考サイトをご覧ください。
公開したくない情報はdotenvにしまってしまう
HerokuでWebアプリ開発を始めるなら知っておきたいこと

この中には.envの内容を隠すようにという指示を
.gitignore(次回説明します！)に書いてしまったので
プッシュされていなくて.envの内容がわからないと思います。
.envの内容は見せたくない内容なのでそれが正解なのですが
今回はわかりやすいように、画像をはりますね！！

本当に隠したい部分を「ほにゃらら」に変えましたが、
このような感じに書いてあれば正解ですよ！

そして、myapp.rbに
require ‘dotenv’
Dotenv.load
を付け加え、さらに
Gemfileに
gem ‘dotenv’を書きたすのを忘れずに！！
最後にターミナルでbundle installと打てば
正常に動くはずですよ。

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

*:..。o○☆○o。..:*

実は私たち、毎回お菓子を食べながら勉強しています笑
で、今更なんですが笑、「今日のお菓子」シリーズ始めます！！！

ガルボの紫いも味を食べたんですけど、
紫いも！！！！！！！！！！！！！って感じでした笑

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

-完成させるぞ！！-

今日はSinatra側からテーブルをいじってみます！
前回myapp.rbのところに
require’yaml’から、class〜endって書いていて、
classの後ろがSampleになってますよね。
これは自分が考えたテーブルの名前を
単数で最初の文字を大文字にしたものです。
migrationでつくったときに作成されていた
schema.rbを開くと
テーブルがちゃんとあるか確認することができます。

せっかく入力フォームをつくってメールを送っていますが、
このままだと送ったデータが残らないですよね。
ここでデータベースの出番です！
入力フォームで入力した情報をテーブルに保存してみましょう。

〜情報をテーブルに保存しよう〜

samplesをそのまま使ってもいいのですが、
入力フォームということで
mailsというテーブルを作りたいと思います。
そうするとsamplesが邪魔ですよね。
そのままとっておいてもいいのですが
こんがらがりそうなので削除してしまいましょう。
これは簡単！
ターミナルで「bundle exec rake db:rollback」
をうつだけです。
これは一つ前に戻るという意味なのです。

そしてここでmigrationすると
また同じように作ってしまうので、
migrationファイルを消します。
そしてもう一度、mails用のmigrationファイルをつくります。

そして
samplesを消したのでclassの後ろをMailに変えます。

こんな感じです。
ではこれを元に入力フォームで入力した内容を
データベースにいれられるようにしましょう。

さて、入力したemail情報を入れていきますよ！！
このサイトを参考にしてやっていきましょう！
ActiveRecordの基本機能とマイグレーション、バリデーション

myaap.rbのファイルの中に
mail = Mail.new
mail.email=@email
mail.message=@message
mail.save
これを入力します。

こんな感じ！！
@emailと@messageには以前からもお伝えしている内容が
既に入力されていますよね。
それをmail.emailとmail.messageにいれるのです。
これはmailというテーブルのemailというカラム名のところに
email情報をいれるということです。

ここで面白い会話とか入れられたらいいんですけどね…
姉妹とも調べ学習に集中して会話そこまでなんですよね…
でもこれはいいことですよ！！！
自分たちで調べようという心意気！！
ほめてください！！！（切実）

…話を戻します。
そして、これをすれば！
データベースをいれられてるはずなのです！！
これを確認するためには前から使っていた
localhostを使って確かめます。
ターミナルで一時的にサーバを立ち上げて
まずはメールを送ります。
そのあとにpostgresにログインして
テーブルの中を見てみましょう！！
どうですか？入っていたら成功です！！！

〜Herokuでもデータベースをつかおう〜

でもこれだとせっかく一般公開できるように
アプリケーションをHerokuの中にいれたのに
入力フォームに入力した情報は保存されないままに
なってしまっていますね。
これではまずい！！
ってことでHerokuでもデータベースを
つかえるように設定しましょう！
こちらのサイトをご覧ください！！
そして頑張って！（妹投げやり）
herokuでDBをできるようにする

この時にdatabaseのURLをプッシュするのはよくないので、
プッシュしないように設定しましょう！
これは今までやりましたよ！
そうです。.envファイルに書き足せばいいのです！
そしてmyapp.rbも変更しておいてくださいね。

↓　↓　↓　↓　↓　↓

こんな感じに！

はいはいはい！！
これが設定できたら、
コミットしてー
ターミナルでプッシュしてー
「heroku run bundle exec rake db:migrate」
をターミナルでうちこんでー
Herokuで設定したURLにアクセスして
メールを送ってみてください！！
送れましたか？
ここで！
どうテーブルに反映されたかという確認方法なのですが！
かっこよく受信件数の表示なんてさせてみましょう（にやり）

〜受信件数の表示方法〜

myapp.rbのindexところのget end内に
@count = Mail.count
を追加し、index.erb に
受信件数 <%=@count%>件
を追加するだけです！
この仕組みはもうおわかりですよね！
送信してみてTOPページに戻って件数が増えていたら…！！

完成です！！！
ひゃーーーーーー
姉妹「おつかれさまでした！！！！」
これで完成なのですよおおおお
叫んでいいですよ、叫びましょう。
ひとつアプリケーションつくれたんですもの！！！

完成したソースコードはこちら！！！

〜最後に〜

プログラミングに苦手意識があり、あまりさわったことがなかったぽんこつ姉妹ですが、３週間でお問い合わせフォームという立派なアプリをつくることができました！だからこれをみて少しでも興味を持ってくださった方、お問い合わせフォームをつくってみたいなっと思ってくださった方！
大丈夫です。つくれます。
ぽんこつ姉妹がつくれたのですから！笑
いつかのブログにもありますが、まずは慣れることが大事だと思います！意味はわからなくても、見本のソースコードをクローンして動かしてみましょう(^^)