clearfix について html css

エラー内容 このようにdivで囲んでいるはずなのに、背景が認識しない。

floatが邪魔している

f:id:happy_teeth_ago:20190809125102p:plain

これをclearfixというクラスをあてて修正する。

.clearfix::after {
  content: " ";
  display: table;
  clear: both;
}

疑似要素の:afterを指定 疑似要素とは::afterと書くことにより、その直後になにか記載したい時に使用する。 ちなみに::beforeだと直前に挿入する。

::はCSS3の書き方

ここでは

// なにもない空要素を追加 これにより入力があると認識される。
 content: " ";

//これによりカラム落ちがなくなる
display: table;

//floatを打ち消す
clear: both

HTML CSS form 関係まとめ

cssははじめに、サニタイズしておく必要がある。 padding,margin などをまとめて初期化すること。

ここへ csstools.github.io

<link rel="stylesheet" href="style.css">

下記のような、下線だけあるinputは f:id:happy_teeth_ago:20190807164455p:plain

input {
//まずborderをclear
  border: none;
//その上で下線を指定 solid は直線ほかに dotted、 dashedなどがある
  border-bottom: 1px solid #d1d1d1;
  font-size: 1.2rem; 
 width: 100%;
  padding: 8px;
}

button

button {
  width: 100%;
  background-color: #2096F3;
  border: none;
 //文字色
 color: #FFF;
  padding: 15px;
//角丸
  border-radius: 3px;

//ドロップシャドウ 4つの半角ブランクで指定 X, Y ,ボケ具合の大きさ, 色3つと透明度
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4)
}

rails ActiveRecord::DuplicateMigrationNameError:

ActiveRecord::DuplicateMigrationNameError:

Multiple migrations have the name DeviseCreateUsers.

問題 同じマイグレーションファイルが2つあった。

対応、マイグレーションファイルはそのまま削除してはいけない。

RailsはDBがバージョンを持っているのでおかしくなる

//リセットする 共同開発では決して利用しないこと
rails db:reset

//必要なファイルを修正、または削除する


// それから
rails db:migrate
 
//バージョン確認
rails db:version

必要なファイルを修正、または削除する時

バージョンを確認する

Rails DB関連のコマンド

rails db:create                          # Creates the database from DATABASE_U...
rails db:drop                            # Drops the database from DATABASE_URL...
rails db:environment:set                 # Set the environment value for the da...
rails db:fixtures:load                   # Loads fixtures into the current envi...
rails db:migrate                         # Migrate the database (options: VERSI...
rails db:migrate:status                  # Display status of migrations
rails db:rollback                        # Rolls the schema back to the previou...
rails db:schema:cache:clear              # Clears a db/schema_cache.yml file
rails db:schema:cache:dump               # Creates a db/schema_cache.yml file
rails db:schema:dump                     # Creates a db/schema.rb file that is ...
rails db:schema:load                     # Loads a schema.rb file into the data...
rails db:seed                            # Loads the seed data from db/seeds.rb
rails db:setup                           # Creates the database, loads the sche...
rails db:structure:dump                  # Dumps the database structure to db/s...
rails db:structure:load                  # Recreates the databases from the str...
rails db:version       

今回は 削除してしまったマイグレーションファイルのバージョンをRailsが保持していたため、dropを実行する。

その後create

その後migrate


ec2-user:~/environment/toto_app (master) $ rails db:drop
Dropped database 'db/development.sqlite3'
Dropped database 'db/test.sqlite3'
ec2-user:~/environment/toto_app (master) $ rails db:create
Created database 'db/development.sqlite3'
Created database 'db/test.sqlite3'
ec2-user:~/environment/toto_app (master) $ rails db:migrate
== 20190613074638 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0011s
//省略

gem rmagickのインストール エラー

ImageMagickのライブラリが見つからないことが多いです。

ImageMagicとは、画像処理用のソフトウエアライブラリ

OSに入れるもの

しかし先日インストールしている。 公式サイトを確認

www.rubydoc.info

Cloud9では、インストール時に

sudo yum install gcc ImageMagick-devel make which

を使いなさいと、、 通常yumはすでにコンパイルされたものをインストールする。 それに対して、make は、どのようにコンパイルするか自分で決めることが出来る。
とりあえず、指示通りにするとエラー解決

recaptcha キーが違います wpforms エラー

キーが違いますとエラーが出たので調査。

結論から言うとwpformsではV3は利用しないほうがいい。

設定画面にV3を設定していたが、公式サイトのV2 Invisibleに変更したらエラーが消えました。

wpforms.com

wpforms公式サイト

f:id:happy_teeth_ago:20190727140636p:plain

V3利用できるって書かないでよ、、 といいたくなるのをこらえる。

Heroku Rails デプロイ 忘備録

  rails routes
  bundle install
  //libxmlはXMLをパースするライブラリ
sudo yum install libxml2-devel

//libcurlは通信をサポートするライブラリ
sudo yum install libcurl-devel
bundle install

//リダイレクトの確認
rails routes
rails s

//環境変数の設定
vi ~/.bash_profile

//設定を反映
source ~/.bash_profile

エラー

 Uglifier::Error: Unexpected character '`'

調べてみるとUglifier= RailsのJavaScriptの軽量化gem がES5までしか対応していない。
おいおい、、、 本家サイトで確認

github.com

config>environment.rb

//これを
config.assets.js_compressor = :uglifier

//このように変更
config.assets.js_compressor = Uglifier.new(harmony: true)

ビルドは通ったけど今度はこれ

f:id:happy_teeth_ago:20190726125816p:plain

ログを見る tailは現在のものを見れる

heroku logs --tail

iamge fileが ないとエラーが出たので、とりあえずpostgressをインストール

 sudo yum install -y postgresql-server postgresql-devel
 sudo chkconfig postgresql on
 sudo service postgresql start
 
//postgres userでログイン
 sudo -u postgres -i

//ec-2userを作成する
createuser -s ec2-user
//CTL + D で抜ける

bundle install

//DB作成
rails db:create

rails db:migrate

//サーバー起動
rails s

エラー

 NoMethodError (undefined method `email' for nil:NilClass):
app/models/user.rb:54:in `is_same_person_as_super_user?'

emailが無いと言っているので、言われたところを見てみる

 def is_same_person_as_super_user?
    User.superuser.email == email
  end

superuserが無いとエラーになる。

 def self.superuser
    User.find_by(email: ENV.fetch('SUPERUSER_EMAIL'))
  end

superuserは環境変数からgetしているので、環境変数にセットする
ついでにDBもリセットする
herokuのブラウザからできる。
f:id:happy_teeth_ago:20190730121018p:plain

DBをマイグレーションする。

$ heroku run rake db:migrate
//作成したタスクを確認。
$rake -T
//タスクを実行
$ heroku run rake db:create_superuser

DBのリセットはherokuコマンドでも可能

//ログを見る
heroku logs --tail
  
//リセット
heroku pg:reset DATABASE

//DBに反映
heroku rake db:migrate
//データ作成
heroku rake db:seed

参考にさせていただきました https://whatsupguys.net/programming-school-dive-into-code-learning-41/