vi ~/.zshrc　で　

setopt nonomatch

追記（mysql再インストールでファイルが消えないため）

Homebrewで入れたMySQLが起動できないのでアンインストール＆再インストールした話 - Qiita

teratail.com

上に続いて以下homebrew環境の所有者を修復を試みるも。。

[macOS Sierra] Homebrewのupdateが出来ない。 - Qiita

最終的にhomebrewの再インストールから行い

Homebrew の再インストール - Qiita

なんとか解決できた模様

2021/11/24再びmysqlが動かなかくなったので追記

おこなっった事mysqlのアンインストール

brew doctorでエラーがwarningが出ないようにした今回はx-codeのアップデートは無視

mysqlが動くようになったが

rails sで

Library not loaded: /usr/local/opt/mysql@5.6/lib/libmysqlclient.18.dylib (LoadError)

MySQL起動エラーの対処の仕方【Library not loaded: /usr/local/opt/mysql/lib/libmysqlclient.21.dylib (LoadError)】 - Qiita

を参考に解決

2022/2/23再びmysqlが動かなかくなったので追記

やったことmysql再インストール

https://qiita.com/O-yeah1980/items/9acaaf036930f6f462f6

参考記事過去のものと同じ

watashinoMacBook-Pro ~ % brew uninstall mysql@5.7

mysql削除後も関連するファイル・フォルダが生きているので削除します。（uninstallで一緒に消してくれれば良いのに・・・）

watashinoMacBook-Pro ~ % sudo rm -rf /usr/local/Cellar/mysql* watashinoMacBook-Pro ~ % sudo rm -rf /usr/local/bin/mysql* watashinoMacBook-Pro ~ % sudo rm -rf /usr/local/var/mysql* watashinoMacBook-Pro ~ % sudo rm -rf /usr/local/share/mysql* watashinoMacBook-Pro ~ % sudo rm -rf /usr/local/opt/mysql* watashinoMacBook-Pro ~ % sudo rm -rf /usr/local/etc/my.cnf watashinoMacBook-Pro ~ % sudo rm -rf /etc/mysql/my.cnf watashinoMacBook-Pro ~ % sudo rm -rf /etc/my.cnf watashinoMacBook-Pro ~ % sudo rm -rf ~/.my.cnf

brew doctorでチェック

警告解消　例

watashinoMacBook-Pro ~ % softwareupdate --all --install --force
watashinoMacBook-Pro ~ % rm -rf /usr/local/lib/libmecab.2.dylib
watashinoMacBook-Pro ~ % brew link python@3.8

watashinoMacBook-Pro ~ % brew install mysql@5.7

パス通し

watashinoMacBook-Pro ~ % echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.zshrc
watashinoMacBook-Pro ~ % source ~/.zshrc

watashinoMacBook-Pro ~ % which mysql
/usr/local/opt/mysql@5.6/bin/mysql

4. mysql起動

watashinoMacBook-Pro ~ % mysql.server start
Starting MySQL
. SUCCESS!

2020-11-05

ec2 rails http→https接続　備忘録　Let's Encryptを使ってhttps対応

Let's Encryptで証明書取得

基本はこのページ（証明書の導入完了まで）

www.yoheim.net

ec2のポート変更も行ったhttps

Nginxの設定

nginx.conf　

自分の場合ここの場所でDNSを設定してたのでここ(sudo vim /etc/nginx/conf.d/〇〇.conf)

nginx.conf

server {
　　　server_name 【ドメイン名（例：○○.com）】;
　　　#listen80;
　　　#listen 80→４４３に変更
    listen 443 ssl default deferred;
    ssl_certificate   /etc/letsencrypt/live/test.hoge.jp/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/test.hoge.jp/privkey.pem;

    # <中略> # 
}
location /  {
   add_header  Access-Control-Allow-Origin *;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       # httpsの設定をしてあげないとRailsの方でSSL判定できずに無限ループに陥る
       proxy_set_header X-FORWARDED_PROTO https;
       proxy_set_header Host $http_host;
       proxy_redirect off;
       if (!-f $request_filename) {
         proxy_pass http://app;
         break;
       }
}

# 以下を追記　------------------------------------
# httpでのアクセスをhttpsに転送する設定です。 
# ドメイン名は変更してください！
server {
  listen      80;
  server_name 【ドメイン名（例：○○.com）】;
  return      301 https://$host$request_uri;
}

また、Railsの場合は、proxy_set_header X-FORWARDED_PROTO https;
を忘れずに。詳しい解説は以下が参考になります。

Nginx のリバースプロキシ設定のメモ - Qiita

nginxを再起動します。

terminal

sudo service nginx restart

以上でSSLの設定は完了です。
ブラウザからこのサイトにアクセスしてみましょう。https接続になるはずです。
また、http://として接続した場合でも、自動でhttps接続になるはずです。

自動更新の設定

作業はルートユーザーで行った

$ sudo su -

terminal

crontab -e # rootでcrontabを編集すれば、設定コマンド内でsudoを使わなくて済みます。

crontab

0 4 * * * sudo certbot renew --no-self-upgrade --post-hook "service nginx restart"

// 午前4時に自動更新をするcron登録

crontab

*  *  *  *  * command
分 時 日 月 曜日

	分	時	日	月	曜
範囲	0-59	0-23	1-31	1-12	0-7（0と7はSunday）

全てワイルドカード[*]にすると、毎分実行。
また、[ , ]でand、[ / ]でステップ数、[ - ]で範囲を指定できる。

実行例

32 02 * * * 　　         02:32に実行
*/10 * * * * 　　　　　　 10分おきに実行
0-10 20 * * *           20:00から20:10まで 1分毎に実行
0,30 20 * * 2,4         毎週,火,木曜の 20:00と 20:30に実行
* 20 * * *　　　　　　　　 20:00から 20:59まで 1分おきに実行
0 1 * * *　　　　　　　　  1:00に実行
0 * * * *　　　　　　　　  毎時 0分に 1時間おきに実行
2 8-20/3 * * *　　　　　　8:02,11:02,14:02,17:02,20:02に実行

※ --no-self-upgradeを付ける事で、自動でバージョアップするのを防いでいます。（AWSドキュメントより）

※ --debugを付けているのは、下記のエラーが出ないようにするためです。

※ --post-hookで証明書更新後にNginxも再起動する様にしています。

設定後、cronデーモンを再起動します。

terminal

sudo service crond restart

参考サイト

[サーバー] Let's EncryptとNginxで、https対応を行う - YoheiM .NET

Amazon Linux + Rails + Nginx環境にLet's Encryptを導入する - Qiita

無料でHTTPS化できる「Let's Encrypt」をやってみた ※install.sh付き - Qiita

[Rails][Nginx][AWS] Let's EncryptをEC2上のRailsに入れてHttpsにする - Qiita

Let's Enctyptの証明書の更新関連のコマンドのメモ - Qiita

2019-12-11

slick実装方法　＋レスポンシブ対応　#ruby #rails　#slick #slider

今回はslickの実装方法＋レスポンシブ対応について紹介したいと思います

slickはホームページなどで以下のような画面をみた事がないでしょうか？

f:id:mi---tomo:20191211070546p:plain

写真が時間でスライドしていくように見せるために便利なのがslickになります

①実装方法

実装方法は多くのサイトで紹介されていますが私は、以下の記事がわかりやすく感じました

https://qiita.com/milneo/items/3560cb01cba92c2ccb6f

このサイト通りやったのですがchromの検証ツールを使うと「ajax-loader.gif」が見つからないというエラーメッセージが出るため

assetフォルダーのimageフォルダーの中に「ajax-loader.gif」を保存し

slick-theme.scssに

{
background: #fff url('./ajax-loader.gif') center center no-repeat; 
}

を追記これで見つからないよ！！エラーは消えました

②レスポンシブ対応

レスポンシブ対応はcssで行うと思ってました！確かに１枚１枚の写真サイズはCSSで設定できるのですがslickでスライドさせる写真の枚数などは

carousel.js内に　「breakpoint:○○」を設定することでスマホ、タブレットなど画面サイズによって切り分ける方法を取りました　こうすることで画面サイズが変わってもサイズに合わせてスライダーを表字する事ができました！！参考になればと思います

$(document).on('turbolinks:load', function(){
 
$('.slick').slick({
autoplay:true,
dots: false,
arrows: false,
speed: 1500,
slidesToShow: 6,
slidesToScroll: 1,
autoplaySpeed: 0,
cssEase: 'linear',
responsive: [
 {
　　breakpoint: 1024,
　　settings: {
　　slidesToShow: 4,
　　slidesToScroll: 1,
　　dots: false,
　　cssEase: 'linear',
 　}
 },
 {
　　breakpoint: 600,
　　settings: {
　　slidesToShow: 3,
　　slidesToScroll: 1,
　　cssEase: 'linear',
 　}
 },
 {
　　breakpoint: 480,
　　settings: {
　　slidesToShow: 2,
　　slidesToScroll: 1
 　}
 }
 
 ]
 });
}); 

2019-11-29

コントローラーのリファクタリング　#ruby #rails

今回はコントローラーのリファクタリングについてメモを残したいと思います

ruby on rails でコントローラーにコードを記述していって気づくとコントローラー内のコードの量がパンパンになってなぜこんなに長くなってしまったんだ( ；∀；)

という事が起きてしまう人も中にはいるのではないかと思います。そのうちの１人が私です

今回はコントローラーのリファクタリングについて大きく２つの方法を紹介したいと思います

①複数のコントローラに同じ処理が記述されている場合

・app/controllers/concerns/○○.rb（任意の名前）ファイルを追加し、moduleを設定したのち必要な箇所で読み込ませる

具体的には以下のように記述します

module TyoufukuRefactoring
  extend ActiveSupport::Concern

  private

  def syorinaiyou
    //中身記述
  end
end

そしてコントローラーないでは

class MainsController < ApplicationController
  include TyoufukuRefactoring
  before_action :syorinaiyou
end

こうする事で複数コントローラーにある記述を省略して記述できるようになります

・親コントローラにメソッドを定義する

単純な話にはなりますが親コントローラーに共通の内容を記述する方法です

共通の親がApplicationControllerだった場合

app/controllers/application_controller.rbの中を以下のように記述するだけです

def ApplicationController < ActionController::Base

 //共通の内容を記述

end

②コントローラに複雑な処理を記述している場合

記述内容をモデルに移します

こちらも方法はシンプルでコントローラーに以下のように記述します

@products = Sorting.sorting_products(order_id)

上はサンプルですがイコールの右辺が読み込みに行くコントローラーの名前になっています　モデル自体は以下がサンプルで

class Sorting
　def self.sorting_products(order_id)
　　//処理内容記述
　end
end

とすることでモデルに処理内容を読み込みにいき結果を受け取る事ができます

※もし実行時にコントローラーでモデルが見つからないという趣旨のエラーが発生する時は、

require "sorting.rb"

を記述してあげる事で読み込めるようになる事も有ります

（読み込める時と読み込めない時の違いははっきりわかっていませんご存知の方がおられましたら教えて頂けると幸いです）

以上大きく２つ紹介しましたが参考にして頂けたら幸いです！！

2019-11-19

画面遷移に時間がかかる時　クルクル読み込み表示を　gifファイルで代用　ruby

今回はインターネット上で画面が遷移する際以下のような読み込み中表示がよくある

f:id:mi---tomo:20191119213033p:plain

spin.js が有名だが　これの代用になる方法としてgifファイルを再生する方法を

紹介したいと思う

htmlとcssとjQueryの記述のみで表示が可能だ

実際に実装した遷移画面は以下のリンク

https://gyazo.com/e1463a4af04661cc9a5c9853bb66f4db

遷移の最中は赤い車が走るgifファイルが再生されるようになっている

実装の方法はとてもシンプルで

①htmlに今回の遷移gifは

<div class='loadingWrap'>
  <img src='/car.gif'>＊該当車の台数が多いときは１分程度かかることがあります
</div>

と記述してあるのみだ

loadingWrapクラス内にイメージタグ利用してgifファイルの保存してある場所を指定しているだけだ今回のgifファイルはpublic直下に保存してある

②続いてcssは

.loadingWrap{
  width: 100%;
  height: 100%;
  margin-top:60px;
  background: #fff;
  position: fixed;
  text-align:center;
  top: 0;
  left: 0;
}
.loadingWrap img{
  position: absolute;
  top: 50%;
  left: 20%;
  height:11%;
  width:80%;
  margin-top: -100px;
  margin-left: -150px;
}

が記述してあるだけだ

内容の補足としてloadingWrapクラスは遷移時に全体を白く隠すためのもので

その中のimg はgifファイルの表示位置サイズを指定している

③最後にjQueryだが方法はいくつかあると思うためあくまで参考ということで

以下のような記述をした

$(document).on('turbolinks:load', function() {
  $(".loadingWrap").hide();
  $(document).ready(function(){
    $('.btn--block').click(function(){
      $(".loadingWrap").fadeIn();
    })
  });
　$(window).load(function(){
  $(".loadingWrap").fadeOut();
　});
});

ボタンが押されると発火するように記述した

以上遷移画面を表示できるようになるはずだ！

参考になれば幸いです

※内容はjQueryを使えるようにする設定などは省いてます

2019-11-07

css レスポンシブ　について学んだ！　html　css

webページ制作時見る端末によって横幅が変わってしまうため

レスポンシブ対策をとる必要がある

実際に確認するにはgoogle chromeの検証ツールで

画面横幅を大きくしたり小さくしたりすることにより確認可能だ！

今回行ったのは①PC画面　②タブレット端末　③スマホ端末

の３種類を想定してCSSを設定した

まず最初に設定する事は

htmlのheadの中に以下赤字を追記

あとは

cssに以下を画面サイズごとに記述するだけだ

@media screen and (max-width:639px) {
/*スマホ用*/
}
@media only screen and (min-width:640px) and (max-width:1023px) {
/*タブレット用*/
}
@media screen and (min-width:1024px) {
/*pc用*/
}

※共通項目は上記３つの場合分けのかっこの外に書けば適用される

今回は場合分けごとにクラスを省略する記述

display:none;　　を記述した

細かくやろうと思えば、フォントサイズの変更、色の変更など

様々なことが適応できる

以下のgifファイルが今回試しにやってみた内容

https://gyazo.com/dc52950b51a2a5a069b2ab7b73b59605

その他のレスポンシブ対策として

・フォントサイズを％で表記

・overflow: hidden;

・overflow: scroll;

なども有効かと思われる

レスポンシブ対策はjsで行うものかと思っていたが、今回説明した条件分岐により

複数パターンのCSSがユーザーの利用環境（画面サイズ）により適用されることを学んだ

参考にしたサイト

https://creive.me/archives/16922/

2019-11-04

html プルダウンボックスの記述方法　３種類

プルダウンボックスの記述方法は様々あるが

今回は自分が学んだ方法３種類を備忘録としてのせたいと思う

f:id:mi---tomo:20191104153852p:plain

プルダウンボックスとは↑の画像のようなクリックすると選択できる一覧が表示されるもので、

今回は①htmlに直接書く方法　②モデルに書く方法　③テーブルから持ってくる方法を紹介する

①htmlに直接書く方法

これは一番シンプルで選択する内容が少ない場合（例：性別など）直接記入になることが多いのではないかと思う

具体的にはoptionを使って

↑のように羅列する方法や

form_forで

<%= f.label :"くだもの" %>
<%= f.select :subject, [["りんご", "りんご"], ["みかん", "みかん"], ["バナナ", "バナナ"], ["その他", "その他"]] ,class:"kudamono-list" %>

↑のように["表示する文字","パラムスで飛ばす文字"]として直せつリストを作成できる

②モデルに書く方法

html

<%= f.select(:sex, Sex::SEX_TYPES)%>

model

Class Sex < ActiveRecord:Base
SEX_TYPES = ["male", "female"]
end

③テーブルから情報をもらう方法

<%= f.collection_select :name, Carname.all, :address, :maker_name %>

第1引数[:name]
値を登録するDB上のカラム名
第2引数[Carname.all]
プルダウンを構成するデータを取得するためのActiveRecordの取得メソッド
第3引数[:address]
DBに登録するカラム
第4引数[:maker_name]
プルダウンに表示するカラム

の３通りを学んだ！！

mi---tomo’s diary

ある日突然mysqlが使えなくなって深みにハマった

brew doctorでチェック

4. mysql起動

ec2 rails http→https接続　備忘録　Let's Encryptを使ってhttps対応

Let's Encryptで証明書取得

ec2のポート変更も行ったhttps

Nginxの設定

自動更新の設定

slick実装方法　＋レスポンシブ対応　#ruby #rails　#slick #slider

コントローラーのリファクタリング　#ruby #rails

画面遷移に時間がかかる時　クルクル読み込み表示を　gifファイルで代用　ruby

css レスポンシブ　について学んだ！　html　css

・overflow: hidden;

・overflow: scroll;

html プルダウンボックスの記述方法　３種類