2016-12-22

railsでMVC作成の超簡単な流れ

Hey, guys:)
さて早速ですがターミナルでrailsアプリの基盤であるMVCを作ってみよう！

まずはターミナルでコントローラーから作成！

$ rails generate controller home top

homeはコントローラー名でtopはアクション名だよ！

topアクションのビューファイルも生成されてるよ！

次はモデルとデータベースを作ってみよう！

$ rails generate model Blog title:string content:text

でモデルを作成！

Blogがモデル名でtitle:string / content:text= カラム名:データ型だよ！

とどめに

rake db:migrate

でデータベースを作っちゃえ！

力が有り余ったので英訳してみた

Lets's create MVC with terminal which is foundation of rails application.
First of all, type below.

$ rails generate controller home top

"home" is the name of controller and "top" is action.
If you want to create the model and database, you can do it easily as below

$ rails generate model Blog title:string content:text

"Blog" = name of database, title:string / content:text = column:Data Type

rake db:migrate

The code of above creates the database of your cool application.

英語のライティングってクソ難しい..

bye guys, see you next time : - )

2016-12-18

モバイル版とPC版のビューの違いを@media screenで指定＊CSS＊

こんにちは、エンジニア見習いのブライアンです。 HTML/CSS/JSの知識はまだまだですが、とあるwebアプリの開発中機能のビューを担当させていただくこととなりました。
利用者様は主にスマホから利用していただいている為、モバイル版向けにビューを作成すればいいんだなと取り組みはじめました。
なんとかそれなりにいい感じのビューが出来上がってきた頃、PC版も考慮するように指示を受けました。何か嫌な予感がする...と思いPC版に変換するとやはり今まで作成していたビューが人に見せてはいけないぐらい歪んでしまいました...
width,height,margin,padding等全てがモバイル版しか考慮しなかった為、画面の大きさが何倍も違うPC版だとそのようなことになるのは当然です。そんな私を救ってくれたのは@media screenというコマンドです。
実際にどのようにして使うかというと...

@media screen and (max-width: 703px){
  .content{
    margin: 100px;
  }
}

上記はブラウザのwidthが703pxまではcontentクラスのmargin:100pxとして読み込まれます。widthが704px超えてしまうと上記のコードは読み込まれません。

@media screen and (min-width: 704px) and (max-width: 1055px){
  .content{
    margin:180px;
  }
}

上記の様に記述すればブラウザのwidthが704px以上1055px以下の時はcontentクラスがmargin:180px読み込まれます。ブラウザがそれ以外のwidthだと読み込まれません。
この利便性に感謝です。

2016-12-15

ターミナルでGithubにブランチを切ってからプッシュ-Mac-

Git

突然ですがGithubを使うのって怖くないでしょうか？　私はめちゃめちゃ怖いです。。なぜなら会社でアプリ開発途中の機能を一人でググりながらブランチを切ってプッシュしようとしたところ、誤ってマスターにプッシュしてしまったからです。周りのエンジニアの方々に大変ご迷惑をおかけしてしまったため、Githubにプッシュする際はいつも緊張します。指導してくださっているtechnuma師匠に正しくブランチを作成してからプッシュの仕方を教わったのでよろしければ参考にしてください。まず自分が変更した箇所を確認するためにターミナルに下記を入力しましょう。

$ git status

赤い文字で出て来る箇所が自分の変更したファイルに該当します。その中でブランチに切りたいファイルをコピーします。次に

$ git add ファイル名

"ファイル名”の所に上記でコピーしたものをペーストしましょう。ちゃんとaddができたか確認する為にもう一度statusをみてみましょう。

$ git status

先程addしたファイル名が消えていたらaddに成功です。次にどのような変更をしたのか一言で記します。

$ git commit -m "変更した内容を一言で（日本語OK）"

次はいよいよブランチを作成します。

$ git checkout -b ブランチ名

ブランチ名はよく英語が使われますが日本語でも大丈夫（らしい）です。ちゃんとブランチを切れたか確認してみましょう。

$ git branch

先程名付けたブランチ名がでてきたら成功です。それでは最後にプッシュしましょう。

$ git push origin ブランチ名

これでプッシュ完了です！

最後に今回の記事で紹介したコマンドの流れです。↓

$ git status  
$ git add  
$ git status    
$ git commit -m "作業内容を一言で表す"    
$ git checkout -b ブランチ名  
$ git branch  
$ git push origin ブランチ名

2016-11-30

ローカル環境の立ち上げ

Hi :)

株式会社デザートでプログラミングが全くの未経験者の私が開発に携わらせていただくことになりました。それがきっかけでMacbookを購入し、ローカル環境でwebアプリケーションの機能追加のお仕事をいただいております。
気付いたら1ヶ月Macbookをシャットダウンせず、使わない時はスリープしていました。スリープしておいた方が立ち上げが早いし、使い終わったら閉じるだけという利便性に惹かれているからだ・・というのは理由の30%ぐらいで実はローカル環境の立ち上げかたがわからないというのが70%の理由です。シャットダウンしたら今まで使っていたローカル環境が使えなくなるのではないか・・そんな不安をふっ飛ばしてくれたのはtechnuma先生でした。伝授していただいたことを以下に記します。
まずターミナルから開発しているディレクトリへ移動しrailsのサーバーを立ち上げる。ターミナルで以下を入力。

bin/rails s

立ち上がるまでに時間がかかるが焦らなくて大丈夫。次にターミナルで新しいタブを開き以下を入力しMySQL(データベース)を立ち上げる。

 mysql.server start

SUCCESS!!と出たら成功だ！続けて

bin/rake db:migrate RAILS_ENV=development

と入力し、その後

redis-server

と入力したらケーキ（？）みたいな絵が出てきます！これでローカル環境立ち上がりました。

2016-11-16

gemを超噛み砕いて説明

ruby on railsのチュートリアルをやって何度もでてくるgem。gemはよく出現してくるがこれはなんなの？超簡単に噛み砕いてみた。 gemとはRuby用のライブラリを使うときに必要となるソフトウェアである。 ruby on rails でWEBアプリを作る際に、欲しい機能が出てきた際にgemが手助けしてくれる。また、bundlerというのもよく目にするが、これもgemである。どんなgemか？ bundlerはgemを管理するgemである。

2016-11-08

サーバーとブラウザの通信の仕組みについて学んだ

サーバーとブラウザの通信の仕組みについて学びました。

サーバーへリクエストを送って、サーバーからレスポンスが帰ってきて HTML , CSS（それとJavaScript）で書かれたデザインがブラウザ上でみえることである。

サーバーの究極の目的は送られたリクエストをレスポンスすることである。

phpや ruby on railsはリクエストとレスポンスの間に混在するそのやりとりがいかに上手く運べるか設計する役割を果たしている。

2016-10-29

railsアプリの作動する流れ（MVC）について簡単に掃除に例えて解説

前回のブログの続きはまたの機会にさせていただきたいと思いましたが、最終的にどこに行き着いたか話さないと今後このブログを書く上で背景がみえないので簡単に説明させて頂きます。知り合いに連れて行かれたDESSART＆Co.という会社でプログラミングを勉強させていただくことになりました。主にエンジニアのtechnumaさんに指導をしていただいております。前回のブログでプログラミングの鬼に該当する方ですが実際はとても優しく、モチベーションを維持させることが上手い方なので講師として最高な素質を持っています。

教えていただいていること: HTML, CSS, Ruby, Ruby on Rails

technumaさんのプロフィール

身長：174cm

プログラミングレベル：鬼

technumaさんに教わったことを書かせていただくこともありますが、先に謝ります。

間違った情報を発信したら申し訳ありません！！

自分の言葉と理解で書きますので教わったこととズレが生じる可能性がありますので、そこは私の理解不足と捉えてくれたら幸いです。

早速ですがrailsアプリの流れについて説明したいと思います。

矢印で流れを表記すると書きの感じ（見づらいかな・・）

ブラウザ→ルーティング→コントローラ（⇔モデル⇔データベース）→ビュー→ブラウザ

まずブラウザからURL（リクエスト）を入力します。このURLがルーティングです。

その入力されたURLに応じてどのコントローラーでどういうアクションを作動させるか決まります。コントローラーはモデルにデータベース（情報の宝庫）からどの情報を取ってくるか指示を出します。モデルはデータベースから取ってきた情報をコントローラーに渡して、コントローラーはビューにブラウザから表示させるように指示を出します。

こういった流れなんですが、以下の掃除の例えで順を追っていきます。

ー　配役

社長　＝　クライアント＋ルーティング

technumaさん　＝　コントローラー

Mさん　＝　モデル

ブライアン　＝　ビュー

社長「ブライアンに雑巾で床掃除させておいて」

technuma さん「はい！」

社長からブライアンに雑巾で床掃除をさせるようにtechnumaさんに伝えています。ブライアンは直接社長から掃除するように命令されていません。technumaさんは倉庫（データベース）にある雑巾を持ってくるようにMさんに指示を出します。

technumaさん「Mさん、雑巾を持ってきてください」

Mさん「了解しました！！」

Mさんは倉庫から雑巾を持ってきてをtechnumaさんに渡しました。雑巾を手にしたtechnumaさん。

technumさん「ブライアン、この雑巾で床掃除しているところを社長にみせてあげてください」

ブライアン「わかりました！！」

ブライアンは社長の指示をtechnumaさんを通して雑巾で床を拭いています。社長はブライアンの床を掃除している姿をみています。

社長は次、どんな指示をtechnumaさんを通して（technumaさんはMさんを使って）ブライアンにするのかな？？