なるの備忘録

エンジニアリングそして営業ができるエンジニアに向けて、日々学んだことをアウトプットしていきます。

SCSSで超便利な幅調整クラスを作る

「ここだけピンポイントでマージンが欲しい」ときに便利な幅調整クラスを作る

HTML、CSSで画面コーディングをしていると、「ここだけピンポイントでマージンが欲しいんだよな」ってときがあると思います。
FLOCCSなどでクラス設計をしているときには「Utillity」という概念はありますが、SCSSファイルへの記述が面倒なので便利な幅調整クラスを作ります。

論よりコード

// 指定可能なmargin,paddingの範囲を定義
$adjust-min: 0;
$adjust-max: 120;

//幅調整用のstyleを作る関数
@for $i from $adjust-min through $adjust-max {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }

  .mr#{$i} {
    margin-right: #{$i}px !important;
  }

  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }

  .ml#{$i} {
    margin-left: #{$i}px !important;
  }

  .pt#{$i} {
    padding-top: #{$i}px !important;
  }

  .pr#{$i} {
    padding-right: #{$i}px !important;
  }

  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }

  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
}

幅調整したい要素のタグには以下のように記述します。

<div class="mt#16">これでmargin-top: 16px;が適用されます</div>

クラス名で「mt#16」(16は任意の数字)のように記載すると、関数が実行され、任意の数字のマージンを持ったstyleが生成されます。
そのstyleが、記載したクラス「mt#16」に適用されるので、結果として任意のmarginやpaddingが適用されます。

最後に

応用すると4方向のmarginやfont-sizeなどにも利用できますね。
ただし、使いすぎるとクラス設計がひどいことになりますので、用法用量を守りましょう。

Laravelで作成したWebアプリをレンタルサーバに公開する

はじめに

Laravelで作ったWebアプリをさくらのレンタルサーバで公開する方法です。
他のレンタルサーバでも読み替えてくれればできると思います。

前提

・開発環境はMySQL含め全てローカル
・アプリは完成済み
レンタルサーバーにssh接続できる

ディレクトリ構成

以下のようなディレクトリ構成で公開する。

/home/
 └[ユーザ名]
   ├ /www
   │ └ /[プロジェクト名](シンボリックリンク)
   └ /laravel(新しく作る)
     └ /[プロジェクト名]
       └ /public


/www以下は公開ディレクトリ。/laravel以下は非公開ディレクトリ。
/wwwの配下にプロジェクト名のシンボリックリンクを張り、/laravel/[プロジェクト名]/public配下にアクセスすることで、/public以下の情報のみ外部公開する。

GitHubにプロジェクトをpushする

こんなかんじ

git add .
git commit -m “本番用アプリ”
git push origin master

gitの使い方などは適当にググってください。
【参考】
narunaru7638.hatenablog.com

レンタルサーバ内にログインする

ssh [ユーザ名]@[ドメイン名].sakura.ne.jp

さくらのレンタルサーバの契約方法などは適当にググってください。
【参考】
narunaru7638.hatenablog.com

③プロジェクトをサーバに移す

適当に「laravel」(なんでも良いです)というフォルダを作り、そこにプロジェクトのデータをコピーします。

mkdir /home/[ユーザ名]/laravel
cd /home/[ユーザ名]/laravel 
git clone [Gitクローンのリンク]

④.envファイルを修正。

.envファイルは環境ごとに変わる情報(DBのログイン名とかパスワードとか)を記載したもの。
Gitクローンからプロジェクトをコピーすると.envファイルは無いので、.enc.exampleをコピーする。
データベースの設定やメールアドレス(gmail)の設定を書き込んでいきます。

cd /home/[ユーザ名]/laravel/[プロジェクト名]
scp .env.example .env

.env(修正前)

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

.env(修正後)

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=false
APP_URL=http://[ユーザ名].sakura.ne.jp/[プロジェクト名]

DB_CONNECTION=mysql
DB_HOST=[ホスト名]
DB_PORT=3306
DB_DATABASE=[データベース名]
DB_USERNAME=[ユーザ名]
DB_PASSWORD=[パスワード]

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=[gmailアドレス]
MAIL_PASSWORD=[gmailパスワード]
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=[gmailアドレス]
MAIL_FROM_NAME=[gmailに記載される名前]

DBのホスト名などの設定は、下記記事にて同様の作業をしているので、参考。
【参考】
narunaru7638.hatenablog.com

.htaccessファイルを修正。

.htaccess(修正前)

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

.htaccess(修正後)

<IfModule mod_rewrite.c>
    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

シンボリックリンクを張る

シンボリックリンクとはコンピュータのディスク上で扱うファイルやディレクトリを、本来の位置にファイルを残しつつそれとは別の場所に置いたり別名を付けてアクセスする手段。
windowsでいうショートカットのようなもの。

 ln -s /home/[ユーザ名]/laravel/[プロジェクト名]/public/ /home/[ユーザ名]/www/[プロジェクト名]

公開ディレクトリにある「/home/[ユーザ名]/www/[プロジェクト名]」にアクセスすると、本来の位置である非公開ディレクトリの「/home/[ユーザ名]/laravel/[プロジェクト名]/public/」にアクセスできる。

【参考】
laraweb.net

⑦Laravelセットアップ

Laravelをレンタルサーバ内でセットアップ。

cd /home/[ユーザ名]/laravel/[プロジェクト名]/
composer install
~~~ インストール ~~~
php artisan key:generate
php artisan migrate:fresh

⑧DBのデータエクスポート&インポート

この記事内で同様の作業しているので参考。
narunaru7638.hatenablog.com

⑨storageへのシンボリックリンクを張る

ローカル環境では、「/home/[ユーザ名]/laravel/[プロジェクト名]/public/storage」にstorageへのシンボリックリンクが配置してあるが、Gitクローンする過程で削除されるので、storageへのシンボリックリンクを改めて張る。

ln -s /home/[ユーザ名]/laravel/[プロジェクト名]/storage/app/public/ /home/[ユーザ名]/laravel/[プロジェクト名]/public/storage

⑩storage内に画像ファイルを配備する

あらかじめ利用したい画像ファイルがあれば、storage内に画像ファイルを配備する。
FillZillaなどを使って、適当にレンタルサーバの「/home/[ユーザ名]/laravel/[プロジェクト名]/storage/app/public/」内に画像ファイルを格納する。

参考サイト

qiita.com
laraweb.net

LaravelのRequestを使ったバリデーションで自分自身の重複は無視したいとき

プロフィール更新の際に、自分自身のデータすら重複チェックに引っかかる

Laravelのバリデーションで重複チェックを入れていると、プロフィール更新の際に、自分自身のデータすら重複チェックに引っかかります。
なので、自分自身の値は無視して、重複チェックをしたいと思います。
(記事自体はたくさんあるのですが、Requestsを使ったちょうど良い記事が見つからなかったので…)

Requestsの中のPHPファイルに以下のように記載します。

    public function rules()
    {
        return [
            'name' => 'required|string|max:255|unique:users,name,'.Auth::user()->name.',name',
            'email' => 'required|string|email|max:255|unique:users,email,'.Auth::user()->email.',email',
            'profile' => 'string|max:255',
            'pic_icon' => 'string|max:255'
        ];
    }

# unique:ユニークチェックをしたいテーブル名,ユニークチェックをしたいカラム名,ユニークチェックを除外したい値,ユニークチェックを除外したいカラム名

gulp利用時に「ReferenceError: internalBinding is not defined」のエラー

gulpを利用しようとしたらReferenceError: internalBinding is not definedのエラーが出た。

以下の記事を見たら「Try updating natives to the latest version. 」とのこと。
stackoverflow.com

以下のコマンドを実施して解決。
$ npm i natives@latest --no-save

参考
(当然ですがバージョン指定してアップデートでも良さそうですね。)
github.com

ボタンを押したら画面外からスライドして表示されるメニューの作り方と注意点

ボタンを押したら画面外からスライドして表示されるメニューの作り方

ボタンを押すと表示されるメニューを簡単に作っていきます。
動作イメージは以下。

画面に表示されるボタンを押すと…
f:id:narunaru7638:20190504001751p:plain

上からにゅ~っとメニューが現れます。
再びボタンを押すと閉じます。
f:id:narunaru7638:20190504001803p:plain

論よりコード

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" href="style.css">        
    </head>
    <body>
        <div class="cover js-cover">
            <div class="list">test1</div>
            <div class="list">test2</div>
            <div class="list">test3</div>
            <div class="list">test4</div>
            <div class="list">test5</div>            
        </div>
        <div class="btn js-toggle-cover">ボタン</div>    
    </body>
    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script src="app.js"></script>
</html>

CSS

.cover{
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.5;
    position: fixed;
    top:0;
    z-index: 2;
    /* ボタンを押す前は見えないようにメニューは画面外にずらす */
    transform: translateY(-100%);
    transition: .5s;
}

.list{
    font-size: 100px;
    color: red;
    text-align: center;
}

/*ボタンをクリックするとactiveクラスが付与される*/
.active{
    /* Y方向に要素を移動させる */
    transform: translateY(0%);
    transition: .5s;
}

.btn{
    cursor: pointer;
    font-size: 100px;
    border: 1px solid black;
    background-color: white;
    position: fixed;
    z-index: 3;
    top: 50%;
}

JavaScript

$('.js-toggle-cover').on('click', function () {
    $('.js-cover').toggleClass('active');
});

まとめ

・メニューの画面を作っておき、transform: translate() ;を使い、画面外に表示しておく。
・ボタンがクリックされたら、JSでクラスを付与し、画面に表示されるようにCSSを適用する。

注意点

下記のように、画面サイズの縦方向が小さくなってしまうと画面上部から、メニューの要素がはみ出してきてしまいます。
画面サイズと同じだけメニューの要素はずらして画面外に表示していますが、画面が小さくなると十分な量ずらすことができず、その分メニューの要素がはみ出して表示されてしまいます。
f:id:narunaru7638:20190504001845p:plain

なのでメニューを移動させる方向はヨコ方向(X方向)がオススメです。
特にスマートフォンのソフトキーボード(文字入力しようとしたときに表示されるキーボード)によって、表示画面が小さくなったときに上記の減少が起こりやすいです。
(ソフトキーボード利用時の挙動はブラウザの開発ツールでは確認できないので気が付かないことも多いと思います。)

追伸

Twitterでコメントを頂いたのですが、slideToggleを使うのが良さそう。(特に縦方向のアニメーションで表示させたい場合)
以下、コード(HTMLは特に変更なし)

CSS

.cover{
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.5;
    position: fixed;
    top:0;
    z-index: 2;
}

.list{
    font-size: 100px;
    color: red;
    text-align: center;
}

.btn{
    cursor: pointer;
    font-size: 100px;
    border: 1px solid black;
    background-color: white;
    position: fixed;
    z-index: 3;
    top: 50%;
}

JavaScript

$('.js-toggle-cover').on('click', function () {
    $('.js-cover').slideToggle('slow');
});

多少アニメーションの差異はありますが、特に気にするほどでなければ、こちらの実装のほうが良さそうですね。(特に縦方向のアニメーションの場合)

Android端末対応の縦書き明朝はNoto Serif JPを使おう

Android端末では明朝体フォントが使いたい

どうやら最近のAndroid端末では明朝体フォントがインストールされていないようです。
PCでは明朝体が表示されるのにスマホだと表示されない理由は上記になります。
そのため必然的にWebフォントを利用することになります。

明朝体で縦書きをするならばNoto Serif JPを使おう

Webフォントで日本語の明朝に対応しているとなると「さわらび明朝」か「Noto Serif JP」が選択肢になります。
結論から言うと、「さわらび明朝」は縦書きだと崩れるので、「Noto Serif JP」がおすすめです。
実際に見てもらったほうが早いと思うので、以下コードです。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" href="style.css">        
        <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css">
    </head>
    <body>
        <p class="font-test sawarabi-line">これはさわらび明朝の横書きです</p>
        <p class="font-test sawarabi-column">これはさわらび明朝の縦書きです。すこしずれているのが分かりますか?</p>
        <p class="font-test notoserif-line">これはNoto+Serif+JPの横書きです</p>
        <p class="font-test notoserif-column">これはNoto+Serif+JPの縦書きです</p>
        <p class="font-test notoserif-column">これはNoto+Serif+JPの縦書きです</p>
    </body>
</html>

CSS

.font-test{
    float:left;
}
.sawarabi-line{
    font-family: "Sawarabi Mincho", serif;
}

.sawarabi-column{
    writing-mode: vertical-rl;
    font-family: "Sawarabi Mincho", serif;
}

.notoserif-line{
    font-family:'Noto Serif JP', serif;
}

.notoserif-column{
    font-family:'Noto Serif JP', serif;
    writing-mode: vertical-rl;
}

画面表示

f:id:narunaru7638:20190502232210p:plain

まとめ

Android端末対応の縦書き明朝はNoto Serif JPを使おう。

【未解決】flexboxの子要素の位置指定とpositionは同時に利用できなさそう

flexboxで等間隔に並べたリストをpositionで画面上部に固定したいが…

タイトルの通りです。flexboxで等間隔に並べたリストをpositionで画面上部に固定したかったのですが、どうもうまくいかなかったので改めて調べてみました。

サンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>flexboxとpositionのテスト</h1>
        <div class="listArea">
            <ul class="list">
                <li class="listItem">A</li>
                <li class="listItem">B</li>
                <li class="listItem">C</li>
                <li class="listItem">D</li>
            </ul>
        </div>
    </body>
</html>

CSS(positionなし)

.list{
    display:flex;
    align-items: center;
    justify-content: space-around;
}
.listItem{
    margin: 10px;
    list-style: none;
    border: 1px solid black
}

画面表示(positionなし)

f:id:narunaru7638:20190430105837p:plain

この時点では、 justify-content: space-around;が効いて、要素が親要素の両端まで等間隔に並んでいることが分かります。

CSS(positionあり)

.listArea{
    position: fixed;
}
.list{
    display:flex;
    align-items: center;
    justify-content: space-around;
}
.listItem{
    margin: 10px;
    list-style: none;
    border: 1px solid black
}

画面表示(positionあり)

f:id:narunaru7638:20190430110003p:plain

position: fixed;を記載した途端、justify-content: space-around;が効いていないことが分かります。
position:absolute;などでも同様でした。
またulタグにpositionを適用しても同様の結果になりました。

解決法

とりあえずpositionを使うときは、justify-contentを使わずにmarginなどで感覚調整するのが良さそうだなあ。
(どなたか解決法をご存知でしたら教えて下さい。)