学習備忘ログ

よく使うコードや設定のメモ

【CSS】下線部を追加

css

方法

①擬似要素の利用

f:id:akousuke:20210224170445p:plain

  • html
<div class="head_home">
  <h2 class="ttl">ABOUT.</h2>
</div>

.head_home .ttl {
    font: 500 56px/1em "Futura PT"; 
    line-height: 1.28;
    position: relative;
}

.head_home .ttl:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    background: #0cf;
    bottom: 0;
    left: 0;
}

②pタグの利用

f:id:akousuke:20210224170642p:plain

  • html
<h2 class="headline-sm">1.</h2>
<p class="headline-border"></p>

.headline-border {
    height: 5px; /* 線の太さ */
    width: 40px; /* 線の長さ */
    background: #1BC8B7; /* 線の色 */
    margin-top: -15px;   /* 少し上へ */
}

【CSS】コンテナについて

css

コンテナ のメリット

まず、コンテナのメリットについては以下を参照

note.com

方法

①全セクションにコンテナを使用

②部分的にコンテナを使用する

ajaxでhtmlレスポンスを取得する方法(ページングも)

  • コントローラ側の処理
public function viewB(Request $request)
{
     if (!$request->ajax()) {
         // ajax以外は許容しない。元の画面にリダイレクト
         return back();
     }
     return response(view('b', [ 'var' => '変数' ])->render());
}
  • jsの処理
$(document).on('click', 'ページングのセクレタ', function(e) {
    e.preventDefault();
    var url = $(e.currentTarget).attr('href');

    $.ajax({
      type: 'GET',
      url: postUrl,
      dataType: 'html',
      data: data,
      success: function(data) {
        removeLoading();
        $(postId).append(data);
        makeStar($('.star-rating-js'));
      },
      error:function() {
        removeLoading();
        alert('システムに問題が発生しました。担当者にお問い合わせください。');
      }
    });
})

ページングしたいときは、urlにページング先のurlを割り当てることがポイント

Sqs及びSupervisorの設定

基本操作

  • 停止

`sudo supervisorctl stop 【worker名】

  • 再起動

    • sudo supervisorctl reread で .conf の再読み込み
    • sudo supervisorctl update で supervisor 自体に最新の conf 情報を反映させる
    • sudo supervisorctl start canly-localposts-worker:* で開始

全ての woker が RUNNING になればOK。

confファイルの設定

  • ファイルの作成箇所

/etc/supervisor/conf.d/

内に、各workerごとに .conf ファイルがあるので、その中身を確認する。

【canly-localposts-worker.conf の例】

[program:canly-localposts-worker]
process_name=%(program_name)s_%(process_num)02d
command=php /usr/local/var/www/201906_MEO-Cloud/artisan queue:work --queue=queue_name --sleep=2 --timeout=7200
autostart=true
autorestart=true
user=ubuntu
numprocs=1
redirect_stderr=true
stdout_logfile=/usr/local/var/www/201906_MEO-Cloud/storage/logs/canly-localposts-worker.log

トラブル時のチェック項目

  • まずは状況を確認する

sudo supervisorctl status

以下のように RUNNING になっていれば正常稼働中。

ubuntu@ip-172-31-5-73:~$ sudo supervisorctl status
canly-localposts-worker:canly-localposts-worker_00               RUNNING   pid 8597, uptime 4:30:45
canly-standard-worker:canly-standard-worker_00                   RUNNING   pid 18768, uptime 17:54:56
insight-csv-exporting:insight-csv-exporting_00                   RUNNING   pid 18769, uptime 17:54:56
update_store_using_csv_worker:update_store_using_csv_worker_00   RUNNING   pid 18794, uptime 17:54:54

（それ以外のステータスがある場合は以下に続く。）

supervisor の ログで起動状況などを確認する

less /var/log/supervisor/supervisord.log

起動→エラーでworkerが終了→supervisorが強制的に再起動→エラー…

を繰り返しているような場合があるため、この場合はエラー原因を取り除くまではいったん該当の worker を停止させておく。

キューの設定

redisやsqsを使用できるが今回は、sqsでのキュー設定方法を記載する。

  1. awsのコンソールでsqsでキューを作成。

代替テキスト

  1. queue.phpでドライバーの設定
      'sqs_create_media' => [
            'driver' => 'sqs',
            'key' => env('AWS_KEY', ''),
            'secret' => env('AWS_SECRET', ''),
            'prefix' => 'https://sqs.ap-northeast-1.amazonaws.com/608782139973',
            'queue' => 'Bulk-Create-Media-Queue',
            'region' => 'ap-northeast-1',
        ],
  1. envのQueueDriverに上記を指定
QUEUE_DRIVER=sqs_create_media

  1. jobをdispatchする際に以下のどちらかでやる。

Job::dispatch->onConnection(env('QUEUE_DRIVER','sync'));
Job::dispatch->onQueue('Bulk-Create-Media-Queue');

onQueueの引数の中身もenvにして読みこむと良い。

上記二つの判断としては、既にQUEUE_DRIVER指定されており変更できない場合は、2つ目、変更できる場合は1つ目でやると良いかも。

全てのモデルに対して共通の処理をいれる 

<?php

namespace App\Models;

use Reliese\Database\Eloquent\Model as Eloquent;

class BaseModel extends Eloquent
{
    protected static function boot()
    {
        parent::boot();

        self::saving(function ($model) {
            if (auth()->user()) {
                $model->updated_by = auth()->user()->id;
            }
        });
        self::creating(function ($model) {
            if (auth()->user()) {
                $model->created_by = auth()->user()->id;
                $model->updated_by = auth()->user()->id;
            }
        });
    }
}

動的に作成した変数をpostする方法 

let cbRowsBtn = $('.custom-table').find('tbody input[type=checkbox]');

$(function(){
    $('.update-btn').click(function(){ //.update-btnは送信ボタン的なやつ

        mail = []; //動的に作成した変数

        cbRowsBtn.each(function(index, row){ //関数内で変数に値をいれる
          let is_checked = $(this).is(':checked') ? 1 : 0
          let is_mail = stores.data[index].is_mail

          //既存店舗のメール設定と異なっていれば、postする。
          if(is_mail != is_checked) {
            mail_env = {
                "store_id" : $(this).val(),
                "status" : is_checked
            }

            mail.push(mail_env)
          }
        })
  
        $('input[name="mails"]').val(JSON.stringify(mail)); //ここでここで配列を文字列にコンバート
        $('#env-edit-all-tabs-form').submit();//#env-edit-all-tabs-formは送信したいform
    });
})