CSS関連のライブラリ追加した

機能追加を試す

 

font-awesome追加 <head>タグ内リンクで

  1.  公式からリンクをコピーして、application.html.erbの<head>タグ内に挿入

  2.  公式から使いたいアイコンのタグをワンタッチコピーして、
     自分が表示したいところに貼るだけ。
     <i class="fas fa-trash fa-lg"></i> のように、
     iタグとクラス名で読み込まれる。         以上

 ※Materializeも同様

 

boostrap追加 Gemで

  1. 「gem "bootstrap-sass"」をGemfileに追記して、bundle install

  2.  assets/javascripts/application.js に、
    「 //= require bootstrap-sprockets 」を追記
  3.  application.css は application.scss にリネームするなどし、.scss( or .sass )ファイルを用意する。
  4.  上記の、assets/stylesheets/application.scss に、
    「 @import "bootstrap-sprockets";
      @import "bootstrap";       」 を追記

  5. サーバー再起動

  6. 公式から好きなものをとってきて、表示したいところで
    <button type="button" class="btn btn-info"> のように貼るだけ。

 

!!必要があれば、クラス名やリンクタグなどを修正する。!!

ここの技術があるかどうか。

ブログアプリ機能追加

スクールの自主課題のブログアプリ実装の続き、

 

 ブログの「投稿」「一覧表示」「マイページ表示」などは終わっていたので、

追加で、「編集」「削除」の機能追加と、レイアウト修正。

 

2週間くらい前に作って置いたやつだったので、

今振り返るとHTMLの構成とかクラス名の付け方が下手くそ。

今もまだまだだけど、2週間前よりはCSS当てやすい構成できてきた。

 

機能追加のコードは、、

 

「form_for」/「form_for」の使い分け、

結構何度も勉強して頭ではわかってるんだけど、

自分で書いてもエラーとか空振りばっかりで、

 実際に機能するコードとして書けなくてがっくり。

リファレンスとかいろいろ調べて書けたけど時間かかった。

 やっぱコード書かないと。 

そして、コードがうまく挙動しなかった時も、すぐ調べられる力。

それもまあコード書きまくるしかないって話。

 

 

あとは、Githubとの付き合い方が少しわかってきたかも。

  • ブランチ切り替え忘れで新機能実装入ってしまう。
  • LooksGoodToMe もらった後にマージし忘れて新機能実装入る。
  • プルのやり方がよくわからない?

とか、何が分からないかがわからないみたいな感じで、

書いたコードが無いことになってしまったり。

(コードの履歴管理のためのツールなのに!!!)

 

だけど、自主制作のアプリで自分のタイミングでプッシュプルしながら、

RPGのセーブデータ上書きしていくみたいな感じで使うのわかってきた。

あとは使いまくって習慣化する。

 

プログラミングの勉強、「一進一退」というか、

おととい出来たことが、

頭をめちゃくちゃ消耗するような1日を挟んだりすると

今日は全くできなくなったりするし、

ちゃんとアウトプットしつつ記憶を技術に変えていかないとなと思う。

チャットアプリ実装中

チャットアプリのメインのチャット画面の実装

チャットの入力フォーム周りでかなり苦労したーーーーーーーーー。

 

結果的には、HTML/CSSのフォーム系の書式を知らなかったのが原因。

 

 .form__mask
  %input.message-input{ type: "text", placeholder: " type a message"}
  %label.upload-label{for:"upload-icon"}
   %i.fa.fa-picture-o
   %input{type:"file",style:"display:none;",id:"upload-icon"} 

 

  1.  <form>タグ作って
  2.  <input type="text">で入力フォーム作って
  3.  <label>タグ用意して
  4. 「 font awesome 」でアイコン入れて
  5.   <input type="file">でファイル添付用のウインドウ出して
     さらに、オプション style="display:none;" で画面から表示を消して
  6.  <label>タグの機能で、4のアイコンを押したら5のファイル選択ウインドウ
    が出るようにする。

 

まあ、それだけなら普通調べればわかるんだけど、

 

Haml / Scss使いたてだから余計に書式がごちゃごちゃに、、

 

特に、タグにオプションをつけるところの書式が上手く効いてなかった。

 

 

先生に言われたのは、

  • インデントを正確につける
  • 検証とかを使ってまず構成を掴む  ってこと。

終えて自分で思ったのは、

  • 書式を正確に書くこと
  • 構成はいくつか考えられる場合もあるが、それぞれの実現可能性や後々の追加修正のしやすさを落ち着いて整理すること  

 

特に、まずは書式かな。

 

公式リファレンスとかそれに近いもの、コンバーターを使って

 

とにかく書式で間違わない

 

できれば、使ったことのないタグやオプションは、

 

一つ一つ記入のつど画面への表示のされ方を確認すること!

 

(知らない要素がいくつか含まれるコードをペースとして表示を見ても

 

それらが互いに関連して表示され、要素ごとの繁栄がわからない。)

 

丸1日はかかったな。。

 

〜つづく〜

毎日少しでもRailsにさわる

 

スクールのカリキュラム上、Railsがっつり勉強する日もあれば、

 

違う言語やったり、他の周辺知識勉強したりで、全くRailsいじりしない日もある。

 

でも、とりあえずはRuby/Railsのdeveloperになるわけだから、

 

その他あれこれ諸々の勉強も、

 

Railsでより機能的な、自由度の高い、ラグジュアリーな、

 

アプリ、サービスを作れるようになるため。

 

だから常に、「てか、Railsアプリ開発でこの知識をどう使える?」は意識だし、

 

 

毎日、最低でも2時間はRailsをさわる時間を作る

 

 

 

それに、勉強にメリハリつける意味もあるんじゃないかな。

 

1日ずっと同じこと勉強してると、時間当たりの成果が落ちる気がする。

 

特に、アウトプットできるかどうかでいうと、やり方的に生産性低いかな。

 

だから、1日10時間なら10時間、

 

意識的に3つに時間を区切るとかして、学習計画を立てる。

 

多分、マルチタスクの練習にもなると思うんよ。

視野

 

スクールで、みんなより早くカリキュラムを進めている人が言っていた。

 

「早く勉強進めて、早くテスト受けさせてもらった方がいいよ」

 

僕らとは学びに対する態度が全然違った。

 

普通、「テストの日程が迫ってきている」「慣れてる問題だといいな」

 

みたいな会話をしてしまうけど、

 

「とりあえず早く受けて、たとえ落ちても、また受ければいい」

「テストなんて早く済ませて、実際のサービス開発に入らないと。ね?」

 

そういう感覚でやらないといけないんだと反省した。刺激になった。