はじめまして(*^^*)

2015/08/17/Mon

はじめまして!
今回、Circle Aroundさんで
夏期インターンシップでお世話になることになりました。
ぽんこつ姉妹、姉のあかねです。妹のみきです。

プログラミングのことをあまり知らないということと、
「ふたり、姉妹みたいだね」と言われたことから
ぽんこつ姉妹という名前を考えつきました!
あ、同い年です笑

企画名は
「ぽんこつ姉妹のRuby女子会〜基礎からWebはじめました〜」
です!
初めのうちは、HTMLなどの基礎からやっていきますが、
のちのちRubyをやるのでRuby女子会という名前を考えました。
企画名が長いため『るびじょ』という略称も考えたので
ぜひぜひ、覚えてくださいね!

妹はデザインセンスが0なので、
デザインは姉が担当します。
このブログのデザインも記事にのせるイラストも全部です。

基本的にこのブログは、

デザイン・イラスト、文章確認:姉
文章作成:妹

といった偏った担当でやっていきます。

ということでプログラミングの経験がないところから
2人で頑張っていきますので
よろしくお願いします!

P.S. キャラクターを考えました笑
sinatrakun
上記にRubyを勉強するとありますが、
その際にSinatraというフレームワークを使用するみたいなので、
こんなキャラクターになりました〜
ちょこちょこ出てくると思うので、よろしくお願いします!

Herokuを扱ってみよう

2015/09/02/Wed

-Herokuについて-

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というファイルをつくって
2015-09-04 17.22.57
を書いてください。

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

そうしたら下に書かれている
2015-09-04 17.23.53

2015-09-04 17.24.00
をターミナルでうつのですが・・・
ここで注意!
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://が2パターンできたと思います。
https://自分が考えたapp名.herokuapp.com
のほうが公開したときのURLで
gitって書かれてあるURLは
ソースコードをプッシュするgitのアドレスになります。

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

〜pushして公開〜

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

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

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

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

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

データベース

2015/09/03/Thu

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

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

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

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

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

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

〜インストール〜

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

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

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

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

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

2015-09-05 17.41.08

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

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

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

〜Sinatraから使う〜

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

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

そしてmyapp.rbにはこれらを追加。
2015-09-08 20.52.14

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

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

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

ちなみにmigrationファイルは
日付_create_テーブル名.rbというファイルです。
dbフォルダ→migtrateフォルダの中にあります。
このサイトにはdefのあとにupとdownと書かれているのですが
これは古いバージョンらしく、
2015-10-05 13.31.18
このchangeだけで大丈夫です!
tableのあとは自分のテーブル名
t.stringのあとはカラム名に変えてくださいね!

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

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

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

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