アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

Udemyのセールが1月11日まで1300円だった!冬は引きこもって成長しよう。

f:id:simpledancer:20180102162145p:plain


オンラインの学習サービスUdemy 私も好きでよく買います。

新年のセールで1月11日まで1300円!

24000円のが1300円とか。

ちなみに私昔はセールがあるの知らなくて9800円くらいで買ったものもあります。。ボリューム的には1万円でも全然お得なくらいの量のものでしたがここまで金額下がるなんて知らなかったからちょと損した気分でした。。

書籍1冊分以下の値段

Udemy はビデオレッスンで買いきりなのでいつでも見返すことができます。先ほどジュンク堂に技術書を見に行ってきたのですが技術書ってだいたい2000円以上するんですよね〜。あと分厚い。。 なので持ち運びが結構しんどいんですよ。

もちろん書籍の良さもあるとは思うのですが。。

Python系の言語の講座も90%offだし私もいくつか買おうと思います。

 

 

ちなみにスマホでも学習可能なので語学系の講座だと通勤、通学中に勉強することができます。プログラミングやデザインなどweb系のものだとどうしてもPCが必要にはなってくるのでスマホだとちょっと不便かもしれませんがコードの復習をすることはできます。以外とぼんやりとスマホで動画見てる時に「あ、そういうことか!」って理解できるときとかありますしね。

 

冬で引きこもりがちな時に成長する!

私は寒いのがいやで、基本必要以上は外に出たくないのでUdemyは助かります。

引きこもりがちな人は是非、Udemyで何か新しいことにチャレンジしてみるのはいかがでしょうか?

ちなみに私が購入予定なのはこちら!

 [swift 3.0対応] iOS10アプリ開発完全マスター人気講座

iOS11アプリ開発オンライン講座

iOSの開発が気になるので。。。こっち系を買っておこうかと思ってます。

 

あ、私が買ってよかったなと思う講座はこちらでした

Rubyで作る! ビットコイン自動売買システム  

 

simpledancer.hatenablog.com

Webデザイン入門オンライン講座

simpledancer.hatenablog.com

デザインの方が勉強が止まっていて面白かったんですけど。だけどいつでも復活することができるから時間作ってまた再開したいと思います。

オススメです、ボリュームめっちゃあって大変だけどw書籍でいうと10冊分くらいあるかも。。。

Railsチュートリアル復習中:エラーが解決しない場合

f:id:simpledancer:20180101113350j:plain

あけましておめでとうございます!

数日間こっちのブログはアップしてませんでしたが、チュートリアルは進めていました。

ただ年内にやり終えようと思っていたのですが思いの外ボリュームが多く

年明け持ち越しとなりました。できれば今日明日中には仕上げたい。

エラーがその間、出てしまってなかなかうまくいかなかったり

rails testのエラーの意味が調べてもわからなかったりしたのでその場合はどうしたかというと。。。

simpledancer.hatenablog.com

独学者のエラーが解決しない時

実際の開発ではそんなことは無理〜だと思いますが、エラーが出てググっても質問してもなんかわからない時は。。。

飛ばす!

とにかく次に進みます。

実際非常に稀に最初の方のコードが間違えていても

後の方に出てくるコードをコピペしたら、あれ、エラー消えてる。

と言う場合もある(あった)

ので手詰まりそうになったら、無視して進む。

あとわからなくても、最初のうちはなんとなくの理解でいいと思う。

(理解ここでできなくても大丈夫って行ってくれる本もあるから)

100%理解するなんて多分相当無理だと思うんですよ。

今回ぶち当たったエラーも消えていた。

htmlをちゃんと書いているはずなんだけど、エラーは出なくても画面にAccountの表示が出ない。コードはちゃんとかけている、なぜだ。

rails testをするとレイアウトのところでエラーが出ているのだけれど、調べてもどうも違う。うーん。

 

と言う手詰まりがありましたが。。。

 

無視しました。そして進みました。

本当はちゃんと理解した方がいいとは思いますが何が原因だったのか。。。

usersページを表示したらアカウントページがちゃーんとできてました。

多分プログラマーのお友達に聞けば全部答えてくれそうだけど。。。最近勉強時間取れなかったから聞くの憚られる。。

 

simpledancer.hatenablog.com

お正月は勉強するのにいいタイミング

私はエンタメ業なので結構年末年始は仕事何ですが

サービス系以外の仕事の方はお正月とかおやすみな方多いと思います。

きっと親戚付き合いとかある方もいるとは思いますが

ここはやぱりお正月だからといってだらけないで

逆にお正月休みの間にこれやりきる!みたいなの作った方がいいと思うのです。

お勧めはUdemy のビットコイン自動売買アプリ作成のやつです。今はやりのビットコイン!

simpledancer.hatenablog.com

私でも数日で作ることができましたし

少額であれば試しにやってみるのもいいと思います。

 

 

Udemy はかいきりタイプのビデオレッスンですので何度でもやり直せますし書籍1冊分のお値段でお得です。 あとプログラミング系のレッスンだと質問した時の回答がとっても早い気がします(デザイン系のもので質問した時はなかなか返信がこなかった。。

 

そんな感じで

「正月暇だわー人混みに出て行くのもしたくないし。。」って思ってパソコンでネットサーフィンしてるそこの貴方!Udemy をポチってアプリ開発 しましょう!

 

simpledancer.hatenablog.com

 

|| = という代入演算子について

railstutorial.jp

|| = という代入演算子

or equal と言う代入演算子について。出てきて気になったのでメモに記しておきます。

以外とこれについて書いてるブログとかが少なくて。

以下引用します。

この「||=」(or equals) という代入演算子はRubyで広く使われているイディオムであり、Ruby開発者を志すならこの演算子に習熟することが重要です。or equalsという概念は一見不思議にみえますが、他のものになぞらえて考えれば難しくありません。

多くのコンピュータプログラムでは、次のような記法で変数の値を1つ増やすことができます。 x = x + 1 そして、Ruby (およびC、C++、Perl、Python、Javaなどの多くのプログラミング言語) では、上の演算を次のような短縮形で表記することもできます。 x += 1 他の演算子についても同様の短縮形が利用できます

$ rails console >> x = 1 => 1 >> x += 1 => 2 >> x *= 3 => 6 >> x -= 8 => -2 >> x /= 2 => -1 いずれの場合も、●という演算子があるときの「x = x ● y」と「x ●= y」の動作は同じです。

Rubyでは、「変数の値がnilなら変数に代入するが、nilでなければ代入しない (変数の値を変えない)」という操作が非常によく使われます。4.2.3で説明したor演算子 || を使えば、次のように書くことができます。

>> @foo => nil >> @foo = @foo || "bar" => "bar" >> @foo = @foo || "baz" => "bar" nilの論理値はfalseになるので、@fooへの最初の代入「nil || "bar"」の評価値は"bar"になります。

同様に、2つ目の代入「@foo || "baz"」("bar" || "baz"など) の評価値は"bar"になります。

Rubyでは、nilとfalseを除いて、あらゆるオブジェクトの論理値がtrueになるように設計されています。

さらにRubyでは、||演算子をいくつも連続して式の中で使う場合、項を左から順に評価し、最初にtrueになった時点で処理を終えるように設計されています。

なお、このように||式を左から右に評価し、演算子の左の値が最初にtrueになった時点で処理を終了するという評価法を短絡評価 (short-circuit evaluation) と呼びます。論理積の&&演算子も似たような設計になっていますが、項を左から評価して、最初にfalseになった時点で処理を終了する点が異なります。

上記の演算子をコンソールセッション上で実際に実行して比較してみると、@foo = @foo || "bar"はx = x O yに該当し、Oが||に置き換わっただけであることがわかります。

x = x + 1 -> x += 1 x = x * 3 -> x *= 3 x = x - 8 -> x -= 8 x = x / 2 -> x /= 2 @foo = @foo || "bar" -> @foo ||= "bar" これで「@foo = @foo || "bar"」は「@foo ||= "bar"」と等価であることが理解できます。この記法をcurrent_userの文脈で使うと次のような簡潔なコードになります。 @current_user ||= User.find_by(id: session[:user_id]) お試しあれ。 補足: 技術的には、「@foo || @foo = "bar"」と書いた場合、Rubyの内部では実際にすべての項が評価されます (||が左辺にある点に注意)。これは@fooがnilやfalseでない場合に、無駄な代入を避ける必要があるためです。しかしこの式の動作では||=記法の動作と同じにならず、説明上不都合なので、上の解説では@foo = @foo || "bar" という式を用いて説明しました。  

参考 

karolgalanciak.com

www.tom08.net

以上参考にさせていただきました。

英語の文章がサラサラ読めたらもっと情報が得られるのですが。。

simpledancer.hatenablog.com

Railsチュートリアル復習中:ログイン機能を作る

f:id:simpledancer:20171225153757p:plain

今日はログイン機能を作っていきます。

ログインの基本的な仕組みとは、ブラウザがログインしている状態を保持し、ユーザーによってブラウザが閉じられたら状態を破棄するといった仕組み (認証システム (Authentification System))です。この認証システムの基盤が出来上がったら、ログイン済みのユーザー (current user) だけがアクセスできるページや、扱える機能などを制御していきます。なお、このような制限や制御の仕組みを認可モデル (Authorization Model) と呼び、例えば本章で実装するログイン済みかどうかでヘッダー部分を切り替える、といった仕組みもこれにあたります。

セッション 

railstutorial.jp

ユーザーログインの必要なWebアプリケーションでは、セッション (Session) と呼ばれる半永続的な接続をコンピュータ間 (ユーザーのパソコンのWebブラウザとRailsサーバーなど) に別途設定します。セッションはHTTPプロトコルと階層が異なる (上の階層にある) ので、HTTPの特性とは別に (若干影響は受けるものの) 接続を確保できます。 

 まずはsessionsコントローラを生成します。

 $ rails generate controller Sessions new

(rails generateでnewアクションを生成すると、それに対応するビューも生成されます。createやdestroyには対応するビューが必要ないので、無駄なビューを作成しないためにここではnewだけを指定しています)

f:id:simpledancer:20171226113007p:plain

ルーティング

config/routes のファイルにルーティングを書きます

f:id:simpledancer:20171226113534p:plain

get log inとpost login とdelete logoutの3行を追加しました。

そしてtest/controllers/sessions_controller_test.rbに新しいログイン用の名前付きルートを使うようにする必要があります 

f:id:simpledancer:20171226143524p:plain

これでルーティングはできたようです。

Viewを整える

見た目部分を整えます。ログインフォームの見栄えを作っていきます。

ログインフォームの見た目は最初の登録フォームの見た目とほぼ変わりなく。

simpledancer.hatenablog.com

emailとパスワード入れる欄、createボタンの代わりにlog inボタンがあり、

新規登録の場合は登録画面に移動するリンクが作られているようなものにします。

app/views/sessions/new.html.erbのコードを登録フォームの時と同じようにformforヘルパーを使って書きます 

f:id:simpledancer:20171226145900p:plain

サーバーを立ち上げてloginアドレスに変えて表示してみると

f:id:simpledancer:20171226145644p:plain

こんな感じで2つ(email.password)ラベルと ログインボタン、リンクが生成されました。

 

続く!

全然関係ありませんが、今出張中で昨夜(クリスマス)仕事から帰ってきてこんなのを食べながらブログを書いてました。

f:id:simpledancer:20171226013840j:plain

でも。脳にいいのかちょっとよくわからない。どちらかというと細かくて食べにくかったですwただ、糖質を取るよりも眠気冷ましになるかとは思います。ローソンでかいました。味は三種類ですがわさび目が覚めそうで買ってみました。(地方限定かも)

チュートリアル復習中:ユーザー登録画面を作る

なんとか年内にチュートリアルを終わらせたいと思っています。

今日はユーザー登録のところです。

現時点ではこんな画面です。

f:id:simpledancer:20171223155103p:plain

これをちゃんと登録できるように設定します。

form_forヘルパーメソッドを使う

ユーザー登録ページで重要な点は、ユーザー登録に欠かせない情報を入力するためのformです。Railsでform_forヘルパーメソッドを使います。このメソッドはActive Recordのオブジェクトを取り込み、そのオブジェクトの属性を使ってフォームを構築します

 Userオブジェクトの作成:まずインスタンス変数@userにUser.newを代入する

f:id:simpledancer:20171224104115p:plain

Scssで見栄えを整えると

f:id:simpledancer:20171224105003p:plain

sign up画面がこんな感じですっきり見やすく登録画面ができました。

ただし、まだ登録ボタンを押しても

このようなエラーが出ます。

f:id:simpledancer:20171224105214p:plain

コントローラにcreateするアクションが見当たらないとなっています。

まだ作ってないので当然ですが。

なのでこのcreateアクションを作っていきます。

コントローラにcreateアクションを作る

f:id:simpledancer:20171224111056p:plain

そうしてもう一度ユーザー登録をすると今度は

f:id:simpledancer:20171224111408p:plain

となります。

今度はcreateアクションの下に外部から使えないようにprivateアクションも追加します。

そしてユーザー登録に失敗した際のエラーメッセージも追加します。

パーシャルを作る

  <%= render 'shared/error_messages' %>

 ’shared/error_messages’というパーシャルをrender (描画)と云う意味。

sharedというディレクトリを作ってファイルを作ります。app/views/shared/_error_messages.html.erb

f:id:simpledancer:20171224114731p:plain

そこでエラーメッセージを表示することが可能になります。

もし空欄でcreateボタンを押した場合このように

f:id:simpledancer:20171224115855p:plain

上部に赤字でエラーメッセージが表示できるようになりました。

postの追加

f:id:simpledancer:20171224120340p:plain

エラーの処理ができたのでconfig/routes.rbに post '/signup', to: 'users#create'(postリクエスト)を追加する。

 

しかし、この状態だとcreateしようとsubmitボタンを押しても送信されません(フリーズする)

コントローラに追加をします。

redirect_to @user 

f:id:simpledancer:20171224121408p:plain

flashメッセージについてはちょっと割愛します。

Railsの一般的な慣習に倣って、ユーザー登録に成功した場合はページを描画せずに別のページにリダイレクト (Redirect) するようにしてみましょう。具体的には、新しく作成されたユーザーのプロフィールページにリダイレクトしてみようと思います (場合によってはルートURLにリダイレクトするのも1つの選択肢でしょう)。 

f:id:simpledancer:20171224121631p:plain

無事にuserをcreateすることができました!

長くなるので

今日はここまで!

 

 

Railsチュートリアル前半まとめ

f:id:simpledancer:20171223110634j:plain

1日一記事更新するぞ!と思っていたのだけれど、昨日は練習やら出張準備やらで勉強できなかった。。

今日は合間にやっていく予定ですがやっと後半戦に突入。

目標は年内に復習を終わらせて来年は違うのやりたいです。

前半チュートリアルまとめ

以前やっていたものの、ザーーーーーっと流したので細かく見ていくとかなり理解していなかった部分がたくさんあった。

多分今もあまり理解できてないんだろうけど。

simpledancer.hatenablog.com

simpledancer.hatenablog.com

simpledancer.hatenablog.com

simpledancer.hatenablog.com

simpledancer.hatenablog.com

今日から6日間出張に行ってきます!

出張の合間にできるところはやりたいですが。。どれくらいできるかな。7章以降は難しくなるのでわかりませんが。。

railstutorial.jp

Railsチュートリアル復習中:デバッグ

f:id:simpledancer:20171221123650p:plain

デバッグについて、いつもさらっとここも流していたので少しゆっくりやりながら進めていこうと思います。

Railsチュートリアルでいうと7章のところです。

railstutorial.jp

 デバッグとは

デバッグ - Wikipedia

デバッグ(debug)とは、コンピュータプログラム電気機器中のバグ・欠陥を発見および修正し、動作を仕様通りのものとするための作業である。サブシステムが密結合であると、1箇所の変更が別の箇所でのバグを作り出すので、バグの修正がより困難となる

http://wa3.i-3-i.info/word1419.html

バグ→プログラムのおかしいところ

デバッグ→そのおかしいところを取り除く作業

デバッガー→バグの原因を見つけてくれるお手伝いをするソフトウェアの事orその仕事をする人

 まずデバッグ情報を追加する

f:id:simpledancer:20171221125353p:plain

 layout/application.html.erbに <%= debug(params) if Rails.env.development? %>を追加する

本番環境に展開したアプリケーションではデバッグ情報を表示したくないので if Rails.env.development?となる。

環境開発のみで行うべきで本番環境やテスト環境ではデバッグ情報は表示されないようにする。

CSSの追加

デバッグの出力を綺麗にするためにCSSを追加します。

@mixin box_sizing {  
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.#ここでSassのミックスイン機能 (ここではbox_sizing) を使っています。ミックスイン機能を使うことで、CSSルールのグループをパッケージ化して複数の要素に適用することができます。

 

.

.

/* miscellaneous */

.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
}

www.webcreatorbox.com

 

デバッグ出力

Railsサーバーを立ち上げるとこんな画面になります。

f:id:simpledancer:20171221131656p:plain

デバッグ出力には、描画されるページの状態を把握するのに役立つ情報が含まれます。

 これはparamsに含まれている内容で、YAML5という形式で書かれています。YAMLは基本的にハッシュであり、コントローラとページのアクションを一意に指定します。

YAMLとは

構造化されたデータを表現するのに便利な、ファイルの書き方ルール(の1つ)
です。

です。

http://wa3.i-3-i.info/word13801.html

Rubyist Magazine - プログラマーのための YAML 入門 (初級編

まとめ

とりあえず7章からは難しいらしいです。しかもつぎからつぎへと知らない単語や知っているけどよくわからない単語、説明に困る単語が出てきます。

覚書なので意味のわからないところは多いブログではありますが、引き続きやっていきたいと思います。

 

続く。

 

プログラミングをする場所で最適なところって?

f:id:simpledancer:20171021142929j:plain


今日は夜仕事なので家でプログラミングしています。

チュートリアルの内容をupdateしようかと思ったのですが、

普段よく、プログラミングする場所ってどこが最適なのか?と。

あ、独学してる人にとって。

私の場合メインはカフェか自宅なんですが家だとだらだらしちゃってなかなか進まないんですよね。。

一番お勧めはファミレス(静かな)

個人的にはお勧めはファミレスです。

電源がないところが多いのですが、まず

  • テーブルが広い
  • ドリンクバーがある
  • 店員さんが放置してくれる

というところです。

繁華街だと結構うるさいのでお勧めできないのですが。

住宅地なんかだといい感じに人がいないので

集中できるし。

なんだったら食事もできますし。リーズナブルなところが多いので。

カフェは以外と場所を選ぶ

カフェって机が小さいところが多いので

結構作業がしにくいです。

パソコンだけおければいいのかというと、手元にメモだったり、勉強中の本だったりをおきたい場合スタバやベローチェだと結構机不足。

ただ、電源があるところはかなり利用しがいがあります。

都心だと作業できるようなカフェも結構あるんですがうちの近所は以外とないんですよ(都会のくせに)

渋谷のbowling cafeは地下で繁華街ですがかなり静かでお勧めです。

tabelog.com

テーブル広い!

以前Rubyの環境構築手伝ってもらう際に利用しました。

渋谷なのに空いてる確率が高く(地下だからかな?)wifiもあるし。静かなことが多いぽい。

ちなみに昨日は渋谷のilly のカフェを使いました。テーブルはちょっと狭かったけど2F席は結構空いてた。

自宅作業する際

自宅だとついいろいろ違うことをやってしまうんですが

コツはできるだけその日のタスクを決めてしまうこと

何時から何時までやってこれくらいは休憩。という感じで休憩もちゃんと時間を取ってあげること。

ある程度タイムスケジュールを組んでしまうといいのかもしれません。

 

ただ、ゲームとかテレビの誘惑が多い人はやっぱり自宅でやるのは控えた方がいいかもしれませんね。。

後、プログラミングやってて思うのですが、本当に人と喋らなくなるんですよね。。(私だけじゃないはず)

それが辛い人は店員さんと触れ合えるからやっぱり外でプログラミングした方がいいのかな。。

 

Railsチュートリアル復習中:苦手なデータベースのところ

f:id:simpledancer:20171219214825p:plain

今日はデータベースのところで以前全然スルーしていたところです。

Railsはデータを保存する際にデフォルトでリレーショナルデータベースを使います。リレーショナルデータベースは、データ行で構成されるテーブルからなり、各行はデータ属性のカラム (列) を持ちます。 

 まずUserモデルを作るためにコマンドに

 $ rails generate controller Users new

します。

そうするとファイルがいろいろできてきます。

この中にマイグレーションという新しいファイルが生成されます。

 マイグレーションは、データベースの構造をインクリメンタルに変更する手段を提供します。それにより、要求が変更された場合にデータモデルを適合させることができます。このUserモデルの例の場合、マイグレーションはモデル生成スクリプトによって自動的に作られました。

マイグレーションファイルを生成する流れ 

f:id:simpledancer:20171219212002p:plain

マイグレーションファイルのファイル名には先頭に生成された時間のタイムスタンプがつきます。

マイグレーション自体はデータベースに変更を与えるchangeメソッドの集まり

changeメソッドはcreate_tableというRailsのメソッドを呼びユーザーを保存するためのテーブルをデータベースに作成します。

create_tableメソッドはブロック変数を1つ持つブロック  を受け取ります。 

 ブロックの中でcreate_tableメソッドはtオブジェクトを使って、nameとemailカラムをデータベースに作ります モデル名は単数形 (User) ですが、テーブル名は複数形 (users) です(これはRailsで用いられる言葉の慣習を反映)モデルはひとりのユーザーを表すのに対し、データベースのテーブルは複数のユーザーから構成されます。

ブロックの最後の行t.timestampsは特別なコマンドで、created_atとupdated_atという2つの「マジックカラム (Magic Columns)」を作成します。これらは、あるユーザーが作成または更新されたときに、その時刻を自動的に記録するタイムスタンプです  

 $ rails db:migrate

 マイグレーションを実行します。

 db:migrateが実行されると、db/development.sqlite3という名前のファイルが生成されます。これはSQLite5データベースの実体。

データベースの構造を見ることができるツールがdevelopment.sqlite3ファイルを開くためのDB Browser for SQLiteというものがあります。

f:id:simpledancer:20171219213711p:plain

DB Browser for SQLite

 ダウンロードして、開くとこのように構造を見ることができます!(これ、前回やってませんでした多分)

f:id:simpledancer:20171219214046p:plain

データベースのところはちょっとかじってはやめ、かじってはやめ、、、で理解が全然できていないのでこれを機会にちゃんと理解したいなと思ってます。

 

続く!

simpledancer.hatenablog.com

simpledancer.hatenablog.com

 

Railsチュートリアル復習中:アセットパイプライン

f:id:simpledancer:20171218162611p:plain

footerを追加しました。

どうも単語だけが一人歩きしている感が否めない(私の中で)

アセットパイプラインについて今日は調べながら進めていきたいと思います。

すごく完結に書かれている記事がありました。

www.transnet.ne.jp

Ruby on Railsにはアセットパイプラインという機能が実装されています。その役割をひと言で説明すると、Web画面上の色塗りを楽にする機能です。

 比喩として”色塗り”と言っていますが、具体的にはWebブラウザに画面のデザインを認識させるためにHTMLに紐付くCSSやJavaScript、Imageファイルを記述・作成することです。

 

 アセットパイプラインとはWebの画面上の色塗り(CSSやJavaScript、Imageファイルを記述・作成)を楽にする機能ということですね!

アセットパイプライン・3つの主要な機能

アセットディレクトリ

 Railsのアセットパイプラインでは、静的ファイルを目的別に分類する、標準的な3つのディレクトリが使われています。

app/assets: 現在のアプリケーション固有のアセット

lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット

vendor/assets: サードパーティのアセット

 マニフェストファイル

静的ファイル (アセット) を上記の場所へそれぞれ配置すれば、マニフェストファイルを使って、それらをどのように1つのファイルにまとめるのかをRailsに指示することができます。なお、実際にアセットをまとめる処理を行うのはSprocketsというgemです。また、マニフェストファイルはCSSとJavaScriptには適用されますが、画像ファイルには適用されません。 

 プリプロセッサエンジン

必要なアセットをディレクトリに配置してまとめた後、Railsはさまざまなプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備します。Railsはどのプリプロセッサを使うのかを、ファイル名の拡張子を使って判断します。最も一般的な拡張子は、Sass用の.scss、CoffeeScript用の.coffee、埋め込みRuby (ERb) 用の.erbです。 

 

railsguides.jp

いやー、読んでるだけでは結構意味不明で眠たくなってきました。なのでコードを書きながら理解していこうと思います。

ただ、前になんとなくザーッとやっていた時よりも

コードを書きながら説明を読みながらじっくりやっていくとちょっとずつではありますが紐解けてきた部分もあるのかな。。

言語化するのが難しいです。

 

続きます。

 

 

Railsチュートリアル復習中:Bootstrapの読み込み

f:id:simpledancer:20171217160937p:plain

今日もデザインの部分です。

Bootstrapについて少し触れていきます。

Udemyで今年最大のセール実施中。対象のオンラインコースが全て¥1200!学ぶなら今!

Bootstrap

Bootstrap - Wikipedia

BootstrapウェブサイトWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィフォームボタンナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

まずはgemfileに

gem 'bootstrap-sass', '3.3.7'

を追加します。

f:id:simpledancer:20171217161754p:plain

 そして$ bundle install してBootstrapを読み込みます。

 

カスタムCSSファイルを作るためにコマンドに

$ touch app/assets/stylesheets/custom.scss を打ち込んでファイルを作ります。

ファイル内に

@import "bootstrap-sprockets";
@import "bootstrap";

を記述。

 サーバーを起動させると前回はこれ↓

f:id:simpledancer:20171216134138p:plain

 からの↓

f:id:simpledancer:20171217162959p:plain

とBootstrapを読み込むだけでずいぶんサイトらしくなりました。

CSSファイルは最終的にこういう感じ。↓

 

@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */

body {
padding-top: 60px;
}

section {
overflow: auto;
}

textarea {
resize: vertical;
}

.center {
text-align: center;
}

.center h1 {
margin-bottom: 10px;
}
/* universal */

body {
padding-top: 60px;
}

section {
overflow: auto;
}

textarea {
resize: vertical;
}

.center {
text-align: center;
}

.center h1 {
margin-bottom: 10px;
}
/* header */

#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}

#logo:hover {
color: #fff;
text-decoration: none;
}

f:id:simpledancer:20171217163955p:plain

ロゴを設定しボタンを中央寄せになりました。

参考

Bootstrap 3 Tutorial

getbootstrap.com

今日は短いけど、これだけ!(出先でwifiの電池がやばい)

 

Railsチュートリアル復習中:サイトのデザインを整えていく

f:id:simpledancer:20171216134138p:plain

今でやっと真ん中くらいまできたかな?今日はUIの部分のところです。

ビットコインについても調べたい今日この頃ですが、とりあえずRailsチュートリアル復習日記を続けます。

HTML5

 RailsはデフォルトでHTML5を使います (と書いてHTML5であることを宣言します)。ただHTML5は比較的新しく、一部のブラウザ (特に旧式のInternet Explorer) ではHTML5のサポートが不完全である場合があります。そのため、次のようなJavaScriptのコード (通称: HTML5 shim (or shiv))3を使ってこの問題を回避します。

他のコードはとりあえず置いておいて、まずはこれ

<!--[if lt IE 9]>

  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">

  </script>

<![endif]-->

<!--[if It IE 9]>は Microsoft Internet Explorer (IE) のバージョンが9より小さい場合 (if lt IE 9) にのみ、囲まれている行を実行します。

 Firefox、Chrome、Safariなどの他のブラウザに影響を与えずに、IEのバージョンが9未満の場合にのみHTML5 を読み込める

mayonez.jp

改めてHTML5を勉強するときの参考に。

埋め込みRuby

simpledancer.hatenablog.com

link_toヘルパー

リンクの生成のためにRailsヘルパー link toを使います。

link_toの第1引数はリンクテキスト第2引数はURL。 

<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>

※今はリンク先はとりあえず# に置いている。

Bootstrapのcssを追加するとこれらのコードが

Railsが埋め込みRubyを評価しレイアウトを描画すると次にように置きかわる(上のコードはul class~のところ省略してる)

 <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Log in</a></li>
  </ul>

 

 imagetagヘルパー

f:id:simpledancer:20171216141151p:plain

この画像をダウンロード!

それをassetsのimageフォルダに入れる。

コマンドで取得する場合は

$ curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png   で!

image_tagヘルパーを使うとRailsが該当する画像を探し出して(アセットパイプライン)くれる。

simpledancer.hatenablog.com

自分の理解用なのでちょっと省略しすぎかもしれません。。

とりあえずここまででざっくりとしたサイトのデザインが現れました。↓

 

f:id:simpledancer:20171216134138p:plain

時間がきてしまったので、続く!

simpledancer.hatenablog.com

 

Railsチュートリアル復習中:failuresの修正をする

f:id:simpledancer:20171215123502p:plain

今日は時間がなくてとりあえず進めていたところ、ターミナルにcommand not foundが続きすぎていろいろググったけど見つからない。

Pathを通してみたけどダメだし。bundle installもしてみたし。。。

時間が迫ってきたので一旦gitにpushして中断することにしました。

rails testしたら 1failuresと出た

0errorsだけど1failuresと出ました。

何か、もう時間ないんだけど。

よく見ると

f:id:simpledancer:20171215123840p:plain

<Ruby on Rails Sample App>と <Ruby on Rails Tutorial Sample App>のTutorialの文字が入っているか否か

と言う失敗のようでした。

controllerのファイルを開き修正をしました。

f:id:simpledancer:20171215124213p:plain

も一度rails testしてみました。

f:id:simpledancer:20171215124305p:plain

赤字が緑に変わり、failuresがなくなりました!

command not foundのところはまた明日やります。

そういえば以前自分でteratail に質問してたな。。。

simpledancer.hatenablog.com

 teratail は日本語で質問 できるので時々使います。

Railsチュートリアル復習中:配列について

f:id:simpledancer:20171214133013p:plain

Railsチュートリアル、今日は文法のところを立ち還りました。

ちなみに昨日通知がきていたのですがUdemy 人気のコースが安くなってました!

こちらは私も購入済み!:Rubyで作る! ビットコイン自動売買システム  

simpledancer.hatenablog.com

splitメソッド

 文字列を自然に変換した配列を得ることができる

>> "foo bar baz".split # 文字列を3つの要素を持つ配列に分割する

=> ["foo", "bar", "baz"]

※splitで文字列を区切って配列にするときにはデフォルトで空白が使われる

他の文字を指定して区切ることもできる。

>> "fooxbarxbazx".split('x')

=> ["foo", "bar", "baz"]

要素のアクセス

railstutorial.jp

配列の要素は0から始まります。配列の要素にアクセスするには[ ]を使う

>> a = [42, 8, 17]

=> [42, 8, 17]

>> a[0] # Rubyでは角カッコで配列にアクセスする

=> 42

>> a[1]

=> 8

>> a[2]

=> 17

>> a[-1] # 配列の添字はマイナスにもなれる!

=> 17 

その他比較演算子、メソッドも同じように使うことができる。

 >> a # 配列「a」の内容を確認する

=> [42, 8, 17]

>> a.last

=> 17

>> a.last == a[-1] # == を使って比較する

=> true

破壊的メソッド

配列の内容を変更したい場合は、そのメソッドに対応する「破壊的」メソッドを使います。破壊的メソッドの名前には、元のメソッドの末尾に「!」を追加したものを使うのがRubyの慣習です。

 >> a

=> [42, 8, 17]

>> a.sort! #ソートする

=> [8, 17, 42]

>> a

=> [8, 17, 42]

sort!メソッドは、配列の要素をソートします。レシーバ自身を変更するメソッドです。戻り値はレシーバ自身です。sortメソッドと同様に順序の比較には<=>演算子が使われます。

ref.xaio.jp

その他

  • pushメソッド(要素の追加)
  • joinメソッド(連結する)

範囲オブジェクト 

www.rubylife.jp

 >> 0..9

=> 0..9

>> 0..9.to_a # 9に対してto_aを呼んでしまっている

NoMethodError: undefined method `to_a' for 9:Fixnum

>> (0..9).to_a # 丸カッコを使い、範囲オブジェクトに対してto_aを呼びましょう

=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

 

配列の要素を取り出す

>> a = %w[foo bar baz quux] # %wを使って文字列の配列に変換

=> ["foo", "bar", "baz", "quux"]

>> a[0..2] #0番目から2番目の要素まで取り出す

=> ["foo", "bar", "baz"] 

-1を使うと、配列の長さを知らなくても配列の最後の要素を指定することができ、これにより配列を特定の開始位置の要素から最後の要素までを一度に選択することができます。 

 >> a = (0..9).to_a

=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

>> a[2..(a.length-1)] # 明示的に配列の長さを使って選択

=> [2, 3, 4, 5, 6, 7, 8, 9] >> a[2..-1] # 添字に-1を使って選択

=> [2, 3, 4, 5, 6, 7, 8, 9]

文字列の場合の範囲オブジェクト

 >> ('a'..'e').to_a

=> ["a", "b", "c", "d", "e"]

 

配列はRubyの文法を勉強し始めた時になんとなくこんな感じ〜といったように勉強してただけなので細かく見ていくと、あ、なんだそういうことだったのね、というメソッドがたくさんあるのに気づいたのでした。

simpledancer.hatenablog.com