-完成させるぞ！！-

今日は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ページに戻って件数が増えていたら…！！

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

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

〜最後に〜

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

-データベース、頑張りましょう-

夏季インターンシップの目標は
「お問い合わせフォームをつくる」ということでしたが、
より学びたいということで
データベースの勉強をはじめました！

データベースというのは
「さまざまな目的を考慮して整理整頓されたデータの集まり」です。
階層型、ネットワーク型、リレーショナル型があります。
今回はリレーショナル型を扱っていきます。
データベース管理システムはデータベースを管理して、
データに対するアクセス要求に応えるソフトウエアです。
リレーショナルデータベース管理システムの中には、
今回使ったPostgreSQLの他にMySQLやSQLiteなどがあります。
そしてユーザがデータベース管理システムに指示を出す言語があり
今回はその言語はSQLを使います。

…わかりましたか？
簡単に言えば、データベースが図書館で
データベース管理システムが司書さん。
借りる人が司書さんに言う言語がSQLということですよ！
詳しくはこちらをご覧ください。
データベースについて

とりあえず、データベースを使えるように
色々とインストールしていきましょう！

〜インストール〜

まずPostgreSQLをインストールします。
以前にインストールしてあるHomebrewを使って
インストールすると楽にできます。
PostgreSQLをインストール
↑このサイトを参考にしたのですが、
最後に書いてあるまとめを見ると
たった３行しかいれなくていいことがわかりますね。
また、テーブルの作成、削除、データの追加も
SQLでできることがわかります。

〜コマンドで使ってみる〜

ターミナルで「psql -l」とうつと
自分のPCに入っているデータベース一覧を
表示することができます。
自分でデータベースを作っていない場合は
postgresとtempate0とtemplate1があると思います。
「作ってないのにある！？」
と思うかもしれないんですけど、
そこは深く考えないようにしましょう！笑
とりあえず、３つ図書館（データベース）があるんですよ。
では、postgresというデータベースに入館しましょう！
そのために「psql postgres」とうちます。
はい、入館しました！！
でも、テーブル（本棚）がありません。
図書館はあってもさすがに本棚はないんですね。
本棚をつくってあげましょう！
ここでは「かえる」作成します！！
え、なんでかえるなのかって？
姉妹「探して発見したHPの例がかえるだった」
ただそれだけです。
カラム名は、名前と生息地、体長にしましょう。
「create table frogs(name text, habitat text, length int);」
※英語がわからない妹なので翻訳サイトに頼っているため
変な英語を使っているかもしれませんが目をつぶってください。

テーブルの名前は複数形にしてください。
このtextはデータの入力がテキスト表示、
intは数字ってことを表しています。
これをターミナルに打ち込めば、
テーブル（本棚）が作成されます！
確認してみましょう！
「\d frogs」これでfrogsというテーブルがあるのか
みることができます。

ちゃんとカラム名も作れていますか？
では、データを挿入してみましょう。
ここからはSQL言語を使っていきます。
逆引きSQL
詳しくはこの上のサイトをご覧ください。
では、ニホンアマガエルのデータを挿入していきます。
「insert into frogs (name, habitat, length) values(‘ニホンアマガエル’,’日本’,3);」
これはニホンアマガエルの生息地が日本で
体長が３cmであるというデータを入力したことになります。
ためしにちゃんと挿入されているか確認しましょう。
「select * from frogs;」
とうったら全部表示してくれます。
ニホンアマガエルのデータがでたら成功です！

削除に関しては、
自分でHPの指示に従ってやってみてくださいね。

実はこのブログを書くから嘘を書かないようにしようと
ちゃんとかえるのことを調べていた妹だったのですが
かえるを見すぎて目を閉じると
かえるが襲ってくる現象に陥ったのは内緒。

ただ、もともとあるデータベースを色々といじるのは不安なので
データベースを新しく作ってみましょう！
データベースの作成
samplesというデータベースを作りたかったら
「createdb samples」と打てばつくることができます。
ちなみに妹はlibraryにしています。

〜Sinatraから使う〜

今ままではデータベースを直接操作していたのですが
次はSinatraを使って動かしていきたいと思います。
そのためにデータベースとSinatraを通信させます。
通信するためにSinatraにgemをいれていきます。
そのgemというのは「pg」「activerecord」「sinatra-activerecord」です。
そのため、Gemfileが

こういう記述になるようにしましょう。

ちなみにGemfileを編集する度に、
ターミナルでbundle installをうってくださいね。

そしてmyapp.rbにはこれらを追加。

さらにRakefileやmigrationファイルも作成します。
下の図はRakefileです。

そうすることでSinatraからテーブルを
いじることができるようになります！
詳しくはこちらをご覧ください。
参考サイト：データベース操作

このURLを見ればわかると思いますが、
migrationファイルをつくるには、
ターミナルで自分が今作っているディレクトリに移動して
「bundle exec rake db:create_migration NAME=create_samples」
とうちます。これでsamplesというテーブルを作成出来ます。

ちなみにmigrationファイルは
日付_create_テーブル名.rbというファイルです。
dbフォルダ→migtrateフォルダの中にあります。
このサイトにはdefのあとにupとdownと書かれているのですが
これは古いバージョンらしく、

このchangeだけで大丈夫です！
tableのあとは自分のテーブル名
t.stringのあとはカラム名に変えてくださいね！

`bundle exec rake db:migrate`を一番最後に打つと
設定が成功してデータベースがちゃんとできました！
ぱちぱちぱち！！！！

きちんと作れているのか確認したい場合は
始めのほうに書いたやりかたで自分のデータベースにはいって
「\d」と入力すればテーブルが一覧ででてきます。

姉妹「調べすぎて頭がパンクしそう」

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

Herokuとは「多様な言語に対応し、webアプリケーションの開発から公開までサーバサイドを意識することなく実装できるプラットフォーム」のことです。
……いやいや、そんなこと言われても
なんのこっちゃって感じですよね、わかります。
簡単に言えば、「自分たちが作ったwebアプリケーションやサービスを一般公開するためのもの」です！！
今まで頑張って作ってきたお問い合わせフォームを一般公開できるよう
HerokuにSinatraをあげていきます。

〜準備すること〜

あげるのにあたって、
・Herokuのアカウント登録
・Heroku Toolbeltをインストール
をまず行なわなければいけません。

Herokuのアカウント登録ですが、HerokuのHPにいってもらえれば
英語がわからなくても簡単に登録できます！（現に妹ができた）
HerokuのHP
さあ、サクサク進みますよ！笑
次にHeroku Toolbeltのインストールですが、
これもHPにいけば英語がわからなくても
簡単にインストールできます！！（現に妹ができた part2）
Heroku Toolbeltのインストール
自分が使ってるものに合わせてインストールしてください。
姉妹はmacを使っているので
mac用のボタンをポチっと押してインストール完了です！

〜コードの修正〜

ここまでは早い！ここからが大変！！

これからHerokuにSinatraをあげるため用のアプリを
作っていきます。
まずはconfig.ruというファイルをつくって

を書いてください。

はい、妹がひっかかったエラーその１
ここのrequireのあとのファイル名は
自分がつくった.rbのファイル名と同じにしてください！
一緒にお問い合わせフォームをつくってきてくださった方は
姉妹と同じmyappなので大丈夫ですが、
違う名前にした方はここを注意しないと
エラーが出続けます。（妹はずっとエラーが出続けました）

そうしたら下に書かれている

をターミナルでうつのですが・・・
ここで注意！
heroku createのあとに
自分が作りたいアプリの名前を書いてください。
そうしないと長くて変なURLが出来上がります。（妹が失敗済み）
「heroku create app」にするとappという名前にできます。

一応作成できたがどうか「heroku —version」
とターミナルにうってください。
[heroku-toolbelt/3.41.5 (x86_64-darwin10.8.0) ruby/1.9.3
You have no installed plugins.]
こんな感じがでたら成功です！
pluginsがないとかそんなん気にしないで先に進みましょう！
ここでhttps://が２パターンできたと思います。
https://自分が考えたapp名.herokuapp.com
のほうが公開したときのURLで
gitって書かれてあるURLは
ソースコードをプッシュするgitのアドレスになります。

次！妹がひっかかったエラーその２！
ここで必ず、今行なった変更を
SouceTreeでコミットしてください！
この作業を忘れてエラーがでて妹がどんだけ困ったことか…
Herokuに向けてのプッシュは今回はターミナルでするので
SouceTreeではしないでくださいね！

〜pushして公開〜

SouceTreeでコミットしたら
「git push heroku master」
とターミナルでうってプッシュしましょう。

さあ、これで！できているはずです！！！！
公開するときのURLにアクセスしてみてください！！
どうですか！！感動しませんか！
妹は叫びました。

もしエラーがでたらターミナルでheroku logsとうってみてください。
エラーが長々と表示されます。
英語が苦手な方。頑張ってください（切実）

実はこの一連の流れ、全部slack上で行なわれていたんです。
その時間、午前２時。
るびじょチームはみんな夜行性でした。

さあwebに公開することができたので、目標だった
「お問い合わせフォームの作成」は完了です！
お疲れ様でした！！！

・.gitignoreを調べて設定
・入力した内容をメールの本文として送信
　→引数をつかう
　→文字列の連結
という内容を今日は行いました。

さあ前回の最後にでてきた
.gitignoreですが簡単に言うと、
gitで管理しないファイルを無視させるファイルのことです。
なぜ.gitignoreファイルを作ったのかというと、
今までにgemをインストールしたと思います。
自分たちが認識していれたgem以外にもセットでインストールされてる
gemが実はたくさんあるのです。
さあ、SourceTreeを見てみてください！
…どうですか？1700くらいありませんか？
妹は思わずスクショしました。

これらを全部コミットしてプッシュするとしたら大変ですよね。
そのgemをgitで管理しないようにするためのファイルが
.gitignoreなのです！！
また、他人にみせたくない情報が書かれているファイルを
管理しないようにするためにも使用します。

姉妹はbundleというディレクトリと
vendorのディレクトリにあるbundleのディレクトリを
管理しないようにしたいので
# Ignore bundler config.
/.bundle
/vendor/bundle
というのを.gitignoreの中に記述します。
そうすれば、1700もあったのが一気になくなりますよ！

さらに、.envと記述すると、前回妹が設定したように
.envの中身もプッシュされないように変更できます。

ちなみに、「.ファイル名」のように「.」から始まるファイルは
隠しファイルと呼ばれるものです。
これを表示させる方法はこちらをご覧ください。
隠しファイル表示方法

さて、これから入力した内容を反映させて
送信できるようにしていきたいと思います。

前回、get endとdef endを組み込んで書いてもいい
というお話をしたの覚えていますか？
それはpost endとdef endでも同じです。
しかしそれは一般的ではなく、
他の人がそのコードを見たときに
わかりづらいのでわけて書きましょう。

今までの知識を使おうとすると
＠つけて変数にすれば反映できそうって思いますよね。
ところがどっこい、
＠はget/postなどからendの間しか
変数としての役割をもたないのです。
今回のようにpost endとdef endをわけて書くと
＠はなにも役にたたなくなるのです。

困ったー。
また姉妹の検索との戦いが始まりました。
妹「『def ruby』で検索検索ーーっっ！あ、引数つかうっぽい！」
？「正解！」
def endを初めて使うとき、
メソッド定義が詳しく書いてあるURLをリンクとして載せました。
そこに引数のあるメソッドを定義するというのがでてきているのです。
姉妹は学校で少しC言語をやっていて、
引数のことを少し知っていましたが
やはり仕組みは少し違っていて
とことん意味を知りたくなる姉は少し戸惑っていました。
妹が見つけたURL
メソッドの定義と呼び出し
引数を付けたメソッド呼び出し
このサイトを参考にして頑張りました！

こんな感じです！
send_simple_messageと書かれているのがメソッドで、
その後ろに（）で囲まれているのが引数になります。
post endの中に書かれている@emailと@messageの文ですが
それは最後に送信完了画面に表示させるやつで
ここでは関係ありません。

このスクショの中に
send_simple_message
という文が２つ出てきていますよね。
その（）で囲まれている１つ目同士が対応しています。
そのためdef endの中で
「email」と「message」の変数が使えるようになっているのです。
ちなみに最後の:textの文ですが[]で囲むことで配列を使っています。
これは、メールアドレスと内容がそのまま本文に表示されます。
ただこれだとお問い合わせフォームとして利用していく中で
メールを受け取った側が見づらいですよね。

そこで、これから文字列の連結というのをやってきます。
また検索し始めたのですが、これがなかなかヒットしないのです。
姉が先に見つけてソースコードを書いている中、
見当違いなものばかりヒットさせる妹。
でも！妹に奇跡がおきます！！
妹「そういや、”と’の違いってなんだろう・・・」
それを調べていると、
妹「え、これ？？？」
そうです、なぜか答えにたどり着いてしまったのです。
妹もこれにはびっくり。
このときのサイトがこちらです。

そのサイトを参考にして頑張った結果、
このようなソースコードになりました！

変わった部分わかりますか？
…最後の１行だけです。ややこしくしてすいません。
#{}で変数を囲って、自分なりの文章を打てばいいだけです！
例えば
メールアドレスがmiki@miki.comで本文にこんにちはといれたとします。
今回妹が作成した文だと、
miki@miki.comさんからお問い合わせがありました。
内容：こんにちは
となるわけです！
ちなみの\nは改行を意味しています。

今日の内容はここまで！！
お問い合わせフォームまであと少しです！

スクショの中の:to =>のあとにmikiと書かれていますが、
これはなんでもいいので、ここから見本のソースコードにはformと書きます。

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

今日は次のことをやりました。
１、送信完了画面を「〜/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。..:*

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

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

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

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

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

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

？「前回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の中にあるのです！

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

？「じゃあ次は、この前作った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」
となってしまっているのです。

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

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

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

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

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

〜インストール〜

まずは、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のときでもそうでしたが、
『習うより慣れろ』
ということなので、
これからたくさん使って理解を深めたいと思います！

姉妹「頑張ります！」

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

初めてgitを使ってみてから
何回もgitを使い、慣れていこうと頑張ってみた姉妹。

姉妹「あれ、あの日は混乱してたのに、
　　　使ってみたら意外と使えてる…！」

そうです。深く考えなければ、なんだかんだ使えてるのです。
これなら頑張れば説明できるのではないかと思い
解決編を書こうと思ったのです。

ー謎解きー

〜リポジトリとは〜

gitでファイルを管理しておけば、
保存した履歴がgitに保存されていきます。
そのファイルやディレクトリの状態を記録する場所のことを
リポジトリといいます。
リポジトリの管理下に変更した履歴を
管理しておきたいディレクトリをいれておくことで
そのディレクトリ内のファイルなどの履歴を記録してくれます。
だからgitを使う場合にはリポジトリを
作らなければいけないということですね。

さらにさらに、そのリポジトリは２種類あるのです。
それはローカルリポジトリとリモートリポジトリです。
ローカルリポジトリは、自分のPC上にあるリポジトリで
リモートリポジトリは
ここではGitHubに配置されているリポジトリです。

…わかりますか？

〜姉妹のわからなかったこと〜

ところで、最初にわからなかったのは
その変更履歴の保存場所だったのです。
姉「いったいどこに保存されているのだろう…」
妹「このPC上のどっかっしょ！」
姉「それはわかってるんだって、
　　そのどこに行ってるのかが知りたいの！」
妹「………考えてなかった」
今では、雰囲気(！)で感じとっています。

ただ、自分が変更したファイルを上書き保存したからといって
コミットされてるわけではないですよ！
ちゃんとSource Treeを使ってコミットボタンを押さないと！
コミットしてから、次にコミットするまで、
自分がたくさんソースコードを変更しても、
その変更履歴は残らないので
そこは注意しておきたいですね。

バックアップするメリットは
撃沈編でも書いたのでわかりますよね。

あれ、神の声が聞こえる…
「ずっとバックアップ、バックアップ言ってるけど
　gitではバックアップって言わないんだよ！イメージは一緒だけど！
　gitでは『コミット』って言うんだよ」

…そうらしいです。
覚えておきましょう！

〜プッシュ、プッシュ〜

次にGitHubにアップロードするという話なのですが、
実はアップロードもgitでは『プッシュ』といいます。
では、なんのためにプッシュをするのかというと
自分ひとりだけでソースコードを書いていたとき、
万が一PCが壊れてしまったら、
ローカルリポジトリ自体にもアクセスできなくなってしまい、
データを復活することができなくなってしまいますよね。
それは大変！
また、何人かで共同でソースコードを書いていたとき、
共有するのがめんどくさいですよね。
これまた大変！
そんなときプッシュが便利なのです。
プッシュすることでGitHubにあるリモートリポジトリに
ソースコードが保存されます。
自分のPC上ではなくサーバーに保存されるので
そこにアクセスすれば誰でもみることができるのです。

姉「普通にみんなに見られるとか怖い」
妹「恐怖、恐怖」
？「GitHubにお金を毎月払ったら、
　　プライベートリポジトリっていって
　　公開されないようにも出来るんだよ」
姉妹「結局お金かーー」

〜プル＆クローン〜

そして、プッシュしたデータをPCに取り込むことを
『プル』『クローン』といいます。
なにが違うの？って思いますよね。
プルというのは、元々そのデータが入っていて、
そのデータを更新することです。

クローンというのは、新しく他の人にデータを貰いたいときに
ダウンロードすることです。
一回クローンすれば
そのデータを更新したいときは、ずっとプルです。

クローン→自分が編集→コミット→プッシュ→他の人が編集→プル→自分が編集→コミット……
という感じです。

〜まとめ〜

姉妹ふたりとも丁寧に説明してもらったのですが、
最初はほんとにわかりませんでした。
でも使ってるうちにつかめてきます！ほんとに！
わかるまで使い続けましょう！！

姉妹「つかえるようになれば楽だった」