Rails app heroku deploy

まず大切なことをまとめる。

  • herokutoolbelt のインストールは必要ない
  • ssh も作成する必要は無い
  • アセットプレコンパイルも必要ない。それをするのがheroku
  • git のブランチのmasterがpush されるので、masterブランチに切り替えておくこと!

これにハマった。 ruby on rails - Removed sqlite gem but Heroku still detects sqlite gem and fails - Stack Overflow

  • 本家サイトを見るべし!

devcenter.heroku.com

heroku は postgres なので DB変更

gemを追加 productionのみポスグレに変更

//sqliteはコメントしておかないとエラーになる。
//ローカルで利用するときはコメントを外してbundle install
#gem 'sqlite3', '~> 1.3.0'

group :production do 
  gem 'pg'
  gem 'rails_12factor'
end

database.ymlも書き換える

ローカルでもpostgresを利用しないといけないことはない。 これは検証の必要あり。

default: &default
  adapter: postgresql
  pool: 5
  timeout: 5000

development:
  <<: *default
  database: udemy-1_development

//説明1を参照
production:
  adapter: postgresql
  username: <%= ENV['DB_USERNAME'] %>
  password: <%= ENV['DB_PASSWORD'] %>
  encoding: utf8
  database: hogehoge_rails1
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> 
  url: <%= ENV['DATABASE_URL'] %>

ローカルに作成するDBは当然 development

postgres install

postgres-serverを入れると必要な依存パッケージは入れてくれる

$ sudo yum install postgresql-server

バージョン確認
 $ psql -V
//==
psql (PostgreSQL) 9.6.11

DB初期化、起動

$ sudo service postgresql initdb

//起動
$ sudo service postgresql start

//自動起動をon
$ sudo chkconfig postgresql on

postgresSQLアカウント設定

//psqlユーザーでログインする

$ sudo su -  postgres

//postgresディレクトリに移動するので psqlと入力
-bash-4.2$ psql

//これでpostgresに入れる。

postgresでは linux のユーザーが必要

そこでLinuxにすでにある ec2-userをownerに指定している。

今のログインした状態でSELECT rolname FROM pg_roles;
または\duコマンドで、既存のロールを見ることができます。

新しくロールを作るにはCREATE ROLE name;

postgres=# CREATE ROLE "ec2-user" LOGIN CREATEDB PASSWORD 'パスワード入力';
//DBを作成ownerは ec2-user
postgres=# create database "DB名" owner "ec2-user";

postgres=# GRANT ALL PRIVILEGES ON database "DB名" TO "ec2-user";

//DB確認 (バックスラッシュ + L)
postgres=# \l

//==できています
------------------------
 postgres                 | postgres | UTF8     | en_US.UTF-8 | en_US.UTF-8 | 
 simple_board_development | ec2-user | UTF8     | en_US.UTF-8 | en_US.UTF-8 | =T
c/"ec2-user"    


\q で抜ける

postgres=# \q

//== exitで bashをぬける
-bash-4.2$ exit

作成したDBを確認したい場合はPostgreSQLのシェルでSELECT datname FROM pg_database;
または\lコマンドを使えば確認することができます。

DB作成

postgres=# create database thai_dict_development OWNER thai_dict;

これで接続可能 接続テストする これでロールとDBの準備が整えました。

psql --username=[user_name] --password --dbname=[DB_NAME]

しかしエラー

クライアント認証のエラー

どのipからどのユーザーの接続を許可するかの設定。 不便なので pg_hba.conf を設定し直す

//探す
$ sudo find / -name pg_hba.conf | grep pg_hba.conf

//==あった
/var/lib/pgsql96/data/pg_hba.conf

このサイトを参考に変更 UbuntuでPostgreSQLをインストールからリモートアクセスまでの手順 - Qiita

すべてtrust に変更

これはcloud9だけの設定なのでherokuには引き継がれないので大丈夫

# TYPE  DATABASE        USER            ADDRESS                 METHOD

# "local" is for Unix domain socket connections only
local   all             all                                     trust
# IPv4 local connections:
host    all             all             127.0.0.1/32            trust
# IPv6 local connections:
host    all             all             ::1/128                 trust

ログを見る限り、herokuでは rakeを使っているようだ。

$ rake db:migrate

SQLite on Heroku | Heroku Dev Center

基本ここの情報が大切

devcenter.heroku.com

ローカルでサーバーが起動したら、

heroku CLIのインストール、設定

このようなエラーがでて、cloud9ではnodeのバージョンが8以上が求められる。

WARNING Node version must be >=8.0.0 to use this CLI
WARNING Current node version: 6.17.0

NVMのインストール

説明

まずnvm がnodeのバージョン管理ツール nodeとはサーバーサイドのJavaScriptになる。

その上で npm とはnode.jsで作られた、パッケージやライブラリを管理するツール

nvmが言語なのでnvmのバージョンが古いと当然、npmが動かないことがありうる。
よってまずnvm のバージョンを上げてあげるのが大切。
windousXPに windows10のアプリ入れて動かないのと同じ事

nvm インストール可能なバージョン確認

$ nvm ls-remote

     v10.15.2   (LTS: Dubnium)
       v10.15.3   (Latest LTS: Dubnium)
        v11.0.0  
//latest が10.15.3 なのでそれを入れる
$ nvm install v10.15.3

//バージョン10.15.3を利用
$ nvm use v10.15.3
$ npm install -g heroku

$ heroku --version

//==入っています
heroku/7.22.9 linux-x64 node-v10.15.3

herokuにアプリをまず作成する 参考サイト

devcenter.heroku.com

herokuにログインした状態で

$ heroku create

//==作ってくれている
Creating app... done, ⬢ blooming-thicket-97684
https://blooming-thicket-hogehoge.herokuapp.com/ | https://git.heroku.com/blooming-thicket-hogehoge.git

$ heroku login -i
//email パスワードを入力

$ heroku create

$ git remote -v

//==git のremoteにherokuが追加されていることを確認
remote.heroku.url=https://git.heroku.com/intense-hogehoge.git
remote.heroku.fetch=+refs/heads/*:refs/remotes/heroku/*

これ大切

$ heroku git:remote -a [herokuが決めるドメイン]

デプロイ

$ git push heroku master

しかしこのようなエラー herokuにて
    * If you use Sass as a command-line tool, we recommend using Dart Sass, the new
         primary implementation: https://sass-lang.com/install

gem の'sass-rails', '~> 5.0' をコメントしてサイドbundle install

//--without productionは利用しない 利用するとheorku deploy時にエラーになる
$ bundle install

$ heroku logs --tail

$  heroku run rails db:migrate

サーバーの環境変数を設定する

説明1

先程上記でdatabase.yml に記載していた。

  username: <%= ENV['DB_USERNAME'] %>
  password: <%= ENV['DB_PASSWORD'] %>

をheroku のサーバーの環境変数にセットしないといけない。

herokuの環境変数をセット

$ heroku config:set DB_USERNAME=hogehoge

$ heroku config:set DB_PASSWORD=hogehoge

rails bootstrap4 table レスポンシブ 忘備録

まず table-responsive で囲む

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>

そこの親に overflow-auto を設定

  <div class="col-lg-12 overflow-auto">    
      <!--顧客一覧、searchと兼用  -->
      <%= render 'clients/clients_index' %>
    </div>

ついでに文字が折り返さないように、縦にならないように

<th scope="col" class="text-nowrap"></th>

を設定 テーブルにもbootstrapのクラスが当てられる。

f:id:happy_teeth_ago:20190320125032p:plain

wordpress css ファイル追加 functions.php

下記のように functions.php に記載することによりCSSを読み込める

//==この関数名は自由に決めれる
function university_files() {
  wp_enqueue_style('font-awesome','//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
');
  wp_enqueue_style('university_main_styles', get_stylesheet_uri());
}

//==
add_action('wp_enqueue_scripts', 'university_files');

add_actionとは

特定のアクションにフックする。つまり特定のアクションが実行されたときに、一緒に呼ばれると考えて良い。

定義

<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

第1引数

フックされるアクション名

第2引数

フックする関数名 ここでは上記の

university_filesを呼び出している

wp_enqueue_scriptとは

srcが提供されている場合はスクリプトを登録し(上書きしません)、それをエンキューします。

エンキューとは、入れた順に取り出すこと。

定義

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

$handle

ハンドルとして使う名前、自由に命名して良い.ユニークでないといけない。

$src

url ローカルは指定しない。 bootstrapやCDNで取得するアドレスのhttpをのぞいた部分から記載する。

下記だったら
http://example.com/wp-content/themes/my-theme/my-theme-script.js
このように記載する
//example.com/wp-content/themes/my-theme/my-theme-script.js

プロトコルの影響を受けないため

$deps

このスクリプトが依存する配列 このスクリプトより前に読み込まれるひつようがある。

毎回キャッシュを読み込む設定 第3引数にNULL 第4引数に microtime() を渡す。

  wp_enqueue_style('university_main_styles', get_stylesheet_uri(), NULL, microtime());

WordPress エラー:Cookieがブロックされたり使用されているブラウザがサポートしていません 忘備録

WordPressで

エラー:Cookieがブロックされたり使用されているブラウザがサポートしていません

まずログを見ないことには、話にならない。

直下のwp-config.phpに記載

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'WP_DEBUG_LOG', true );

すると

wp-content フォルダ内のdebug.log に出力される。

[19-Mar-2019 01:59:43 UTC] PHP Warning:  Declaration of bootstrap_4_walker_nav_menu::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in /home/users/1/ciao.jp-hideyasu/web/yamanaka/wp-content/themes/hogehoge/functions.php on line 76

function.php 76行目が怪しい

その他のデフォルトで入っているファイルがおかしいとは考えにくい。 見てみると

<?php
hogehoge

?>

<?php
hogehoge
?>

結論

functions.php では <?php  を閉じては行けないようです。

これでログインできなくなるとは、ちょっと驚きました。

ログに、2回読み込んでいると書いてあった。

今回の反省! ログはきちんと読もう!

あたりまえやろ

Rails カラムの平均値を表示

カラムの平均値はaverageで取得可能

関数定義

# File activerecord/lib/active_record/relation/calculations.rb, line 55
    def average(column_name, options = {})
      # TODO: Remove options argument as soon we remove support to
      # activerecord-deprecated_finders.
      calculate(:average, column_name, options)
    end

=>
Person.average(:age) # => 35.8

これを親モデルに記載

  def rating_average
      self.comments.average(:rating)
   end

rubyは最後に評価されたものが返却される

self.comments で親モデルに紐づくcommentsがすべて取得できる

controller は普通に詰め込むだけ showで走るメソッド

  def set_target_board
        @board = Board.find(params[:id])
   end

view

 <% @boards.each do |board| %>
    <tr>
      <td><%= board.id %></td>
      <td><%= board.title%></td>
      <td><%= board.name%></td>
//同じboadsに属しているので、メソッドがそのまま利用できる
      <td><%= board.rating_average %></td>

Swift API接続注意点2 忘備録 読まないこと!

まず、画面とRequestは分ける。

実装は疎結合にしておくのが基本

Modelのフォルダを作成した

User.swiftは、リクエストにもレスポンスにも使える、モデル構造を持っている

f:id:happy_teeth_ago:20190314005500p:plain

LoginRequest GitHubRequestを継承している。

struct LoginRequest : GitHubRequest {
    
    //これ generics
    typealias HTTPBody = SignInBody
    
    //他で必要
    typealias Response = User
  //こっちはプロパティ 初期値はなくて良い getter setter持っている
    var httpBody: SignInBody
    
    var path: String {
       return "/users/sign_in.json"
    }
    
    var method: HTTPMethod {
        return .post
    }
}


struct SignInBody: Codable{
    var user: UserRequest
    
    init(user: UserRequest){
        self.user = user
    }
}

//Codableに準拠しているとinitializer を入れられてしまう。イニシャライザがあっても初期化できるようにvarに変更
struct UserRequest: Codable{
    
    var email: String
    var password: String
    var remember_me = true
    //初期化するように変更した。
    init(email:String, password: String, remember_me:Bool){
        self.email = email
        self.password = password
        self.remember_me = true
    }
    
}
struct UserRequest: Codable{
    
    var email: String
    var password: String
    var remember_me = true
    //こちらも初期化
    init(email:String, password: String, remember_me:Bool){
        self.email = email
        self.password = password
        self.remember_me = true
    }

LogInクラス Viewを主に書くところ ログインボタンが押されたときの処理

 @IBAction func btn_login(_ sender: Any) {
        
        let client = GitHubClient()
//ここでUserRequestを初期化するために、上記クラスにイニシャライザを設定
        //jsonをパースできるように jsonは下記 下から組み立てる
//この画面の入力値を利用していることに注目、なのでジェネリクスを利用する価値がある。
        let userRequest = UserRequest(email: email.text!, password: password.text!, remember_me: true)
      
        let signIn = SignInBody(user: userRequest)
        
        let request = LoginRequest(httpBody: signIn)
        

        client.send(request: request){result in
            switch result{
            case let .success(response):
                print (response.id)
            case let .failure(error):
                print(error)
                
            }
        }
        
    }

sign_in.json の形

userの下位にUserRequest つまりemail passwordなどがある。

{
    "user": {
    "email": "admin@aaa.com",
    "password": "password",
    "remember_me": true
    }
}

wordpress head部の関数まとめ

wp_enqueue_scripts

p_enqueue_scriptsは、フロントエンドに現れることになっている項目をエンキューするときに使用する適切なフックです。その名前にもかかわらず、スクリプトとスタイルの両方をキューに入れるために使用されます

主にheaderでcss やJavaScriptを呼び出すときに利用する

function themeslug_enqueue_style() {
    wp_enqueue_style( 'core', 'style.css', false ); 
}

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', 'filename.js', false );
}

//第一引数にこのフックを持ってくる。第二引数は関数名
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

wp_enqueue_style 関数定義

wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )

引数

  • $handle スタイルシートの名前 ユニークでないといけない

  • $src  スタイルシートのurlかパス

  • $deps  array型 オプショナル このスタイルシートが依存する登録済みスタイルシートの配列

  • $ver Bool型 versionがfalseに設定されている場合、現在インストールされているWordPressのバージョンと同じバージョン番号が自動的に追加されます。 nullに設定すると、バージョンは追加されません。 デフォルト値:false

  • $media :String型 オプショナル このスタイルシートが定義されているメディア。 'all'、 'print'、 'screen'などのメディアタイプ、または '(orientation:portrait)'や '(max-width:640px)'などのメディアクエリを受け入れます。 デフォルト値: 'all'