【Rails】ツイッター・クローンを作る【DIVE INTO CODE】

更新日:

「DIVE INTO CODE」学習記録 13日目

こんにちは。

13日目。ツイッターを真似して作る。

学習内容

【大課題TwitterClone作成】

  • ツイッタークローンを作る

 

感想

今回は前回の課題のherokuアップデートと大課題。

【Rails】Bootstrapでデザインを考える【DIVE INTO CODE】

前回herokuのアップデートでどうしてもうまくいかずエラーが出てしまって提出できませんでした。

googleで色々調べては見たものの自力では解決できず、今回メンターさんに聞きました。

 

原因はアセットプリコンパイルをする順番を間違えていたため、herokuにアップデートしようとしていたためとのこと。かなり基本的な部分でのミス。

正直アップロードの順番とかなんとなくやってました。

 

一応正しい手順としては、

1、できたファイルをアセットプリコンパイルする。

2、gitのステージ領域にデータを入れる。($ git add)

3、gitのリポジトリにコミット。($ git commit)

4、herokuにプッシュ。($ git push heroku)

 

確かに言われてみればコンパイルは本番環境する前に必ずしなきゃいけないって習ってました。結構初歩的なところで躓いてたっていう恥ずかしさ。

 

なんかわからないですけど、プッシュした後コンパイルやってたと思います。

 

最初練習したときはファイルにそもそもコンパイルが必要なcssとかのプログラムがなかったので、しなくでも起動したんだと思います。

 

ちゃんと起動させるために1から全部やり直しました。

復習が必要です。習っていても使えてないですし。

 

全部やり直してプッシュして、herokuに無事アップロードできたと思いきや、

今度はトップ画面の画像データだけ反映されてませんでした。

 

これはアップデートの不具合ではなく、scssに書いたコードが少しよろしくなかったそうで。

 

scssとcssって全く同じコードではないみたいです。

 

基本的にはscssはほとんど全てのcssと同じように書けるそうなんですけど、

一部cssの表記だとscssでは読み込まないものがあります。

 

今回の場合、画像データの挿入をscssファイルに

background-image: image-url("top.jpg")

として記入するのが正解です。

 

最初私は

background-image: url("top.jpg")

と書いていたため、反映されませんでした。

 

この「image-」があるかないかで変わってきます。

cssだったらimage-をつけなくても「これは画像だ」と理解してくれるんですが、scssになると「これはなんなんだ?」ってなるそうです。

 

そもそもcssとscssの違いについてまで深く考えてなかったです。

 

「scssはcssの高級言語。高級言語とはできるだけ人間に理解しやすい形で表記した言語のこと。」

 

って覚えていたんですけど、これからはエラー出たらscssとcssで違うことも注意しようと思います。

 

まあなんだかんだありましたが、一応課題提出できて無事合格もらえました。

 

大課題のツイッタークローンの方なんですけど、正直実装内容がherokuにアップロードしたbootstrapの課題以上のものではなかったので、

ささっとおんなじ様なの作って提出しました。

 

herokuのURL乗っけます。よかったら見てください。

 

sample_blog_bootstrap

 

ここまで勉強してきた成果物です。

プログラミングスクール通い始めて二週間、

週6で10時間以上パソコンにへばりついたやつは、どんくらいプログラミングでwebアプリケーションを作れるようになるのか。

 

PCサイズで見たときの印象と、スマホサイズで見たときの印象が結構違いました。

パソコン上では納得いく感じだったのに、自分のアイフォンで見るとなんか思ってたのと違う、って感じです。

 

レスポンシブデザインでやったはずなんですけどね。

トップ画面の画像の見え方がアイフォンで見たときなんか違いました。

修正したいです。

 

まあ前提として大したものではないんですけど、

ここまでとりあえずこの短期間で、まがいなりにもできるようになったのは嬉しいです。

 

こっからは今よりさらに難しくなります。

今日一日休んでリフレッシュできたので、明日からまた頑張っていきます。

 

以上ありがとうございました。

-DIVE INTO CODE
-, , , , ,

Copyright© s u p ? , 2019 All Rights Reserved.