Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Visual Studio Codeの検索フィールドを下部に移動する(Visual Studio Codeの設定変更)

参考にさせていただいたページ

Settings.json格納先

お使いの環境によって格納先が異なります。

  • Windows: %APPDATA%\Code\User\settings.json (C:\Users\ユーザー名\AppData\Roaming\Code\User\settings.json
  • Mac: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.json

settings.jsonを編集する

以下のように記述すると検索フィールドは下部に移動できます。

"search.location": "panel",

以下のようにすると検索フィールドは左に移動できます。

"search.location": "left",

webpack4.x + sass-loader + postcss-loader + autoprefixerでscssファイルをコンパイルする

今日の環境

  • Windows10 Home
  • node 12.13.1
  • npm 6.13.1
  • webpack 4.41.2
  • webpack-cli 3.2.3

プロジェクトディレクトリを作成

mkdir webpack_4_scss_introduction
cd webpack_4_scss_introduction

npm initする

npm init

グローバルにインストール

npm install -g webpack webpack-cli

プロジェクトにインストール

npm install -D webpack webpack-cli
npm install -D webpack-import-glob-loader
npm install -D style-loader css-loader sass-loader node-sass postcss-loader autoprefixer
npm install -D mini-css-extract-plugin

ディレクトリとファイルを作成

mkdir src\scss\modules
copy nul src\scss\style.scss
copy nul src\scss\modules\_mod_example.scss
copy nul webpack.config.js

webpack.config.jsの編集

以下の通り記述

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    style: './src/scss/style.scss',
  },
  output: {
    path: `${__dirname}/dist`,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              // CSS内のurl()メソッドの取り込みを禁止する
              url: false,
              // ソースマップの利用有無
              sourceMap: true,
              // Sass+PostCSSの場合は2を指定
              importLoaders: 2
            },
          },
          {
            loader: 'postcss-loader',
            options: {
                // PostCSS側でもソースマップを有効にする
                sourceMap: true,
                plugins: [
                  // Autoprefixerを有効化
                  // ベンダープレフィックスを自動付与する
                  require('autoprefixer')({ grid: true })
                ]
            },
          },
          {
            loader: 'sass-loader',
          },
          {
            loader: 'webpack-import-glob-loader',
          },
        ],
      }
    ],
  },
  plugins:[
    // cssの出力先を指定する
    new MiniCssExtractPlugin({ filename: 'style/[name].css' }),
  ],
}

src/scss/style.scssの編集

webpack-import-glob-loaderをインストールしているのでglobパターンが使用できます。

@import "./modules/*";

src/scss/modules/_mod_example.scssの編集

autoprefixerが上手く機能しているか試す為に::placeholderを記述してみます。

/*
  残るコメント
*/
// 残らないコメント
.mod-example {
  .mod-example__hoge {
    background-image: url(../images/example.png);
  }
  ::placeholder {
    color: #aaaaaa;
  }
}

ビルドしてみる

webpack --mode=development
webpack --mode=development --watch

生成されたstyle.cssを確認する

ベンダープレフィックスが付いているのが確認できました。

vue/singleline-html-element-content-newlineのルールを無視するタグを追加する

参考にさせて頂いたページ

タグ毎に個別で無視するには

.eslintrc.jsのrulesに以下のように書きます。

{
  "vue/singleline-html-element-content-newline": ["error", {
    "ignoreWhenNoAttributes": true,
    "ignoreWhenEmpty": true,
    "ignores": ["pre", "textarea", ...INLINE_ELEMENTS]
  }]
}

INLINE_ELEMENTSというのがどこから来るのかというと、以下のような感じで./node_modules/eslint-plugin-vueからrequireします。

const INLINE_ELEMENTS = require('./node_modules/eslint-plugin-vue/lib/utils/inline-non-void-elements.json')

eslint-plugin-vue/singleline-html-element-content-newline.js at master · vuejs/eslint-plugin-vue · GitHub」に書いてありました。

sendmailコマンドでメールを送信する

参考にさせて頂いたページ

sendmailコマンドで送信してみる

以下のように sendmail [送りたいメールアドレス] を入力してenterを押します。
とりあえず自分のメールアドレスにでも送ってみるのが良いと思います。

$ sendmail hoge@example.com

続けて以下のようにメールのヘッダー情報を入力していきます。 以下のFromやToは存在しないようなメールアドレスを入力しても送信先に表示されるようです。 また、本文を入力して、最後に . を入力してenterを押すと送信されます。

From:aaaaa@aaaaa.com
To:bbbbb@bbbbb.com
Subject:テスト送信題
テスト送信本文です。
.

Rails5 erbで画像パスを取得する

参考にさせて頂いたページ

はじめに

image_tagメソッドみたいにタグが出力したいわけではなく、src属性に入れるパスだけ欲しかった。

サンプルコード

以下のような感じに書きます。

<%= image_path 'hoge/foo.png' %>

その他

他にも色々あるけどメモ

  • image_url
  • asset_path
  • asset_url

docker-composeとnginxのdocker imageで簡素に始める

参考にさせて頂いたページ

docker-composeを使ってnginx上でVueアプリケーションを動かす - Qiita

ディレクトリ構造

以下のようなディレクトリ構造です。docker-compose.ymlからの相対パスで色々指定しています。

hoge/docker-compose.yml
hoge/nginx/Dockerfile
hoge/nginx/nginx.conf
hoge/html/index.html

docker-compose.yml

version: '2'

services:
  nginx:
    build: ./nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./html:/var/www/html

Dockerfile

使用するimageだけ書きました。

FROM nginx:1.15.8

nginx.conf

user nginx;

events {
  worker_connections 2048;
  multi_accept on;
  use epoll;
}

http {
  charset UTF-8;
  server {
    listen 80 default;
    server_name example-hoge.com;
    root /var/www/html;
    index index.html;
    charset utf-8;
  }
}

任意のユーザーを一時的にdockerグループに所属させる(カレントグループの確認と変更)

参考にさせて頂いたページ

gpasswdについて

newgrpについて

usermodとgroupsについて

groupの一覧を確認する

はじめに

今回のhostのOSはcentos7です。

docker-composeを使うにあたって、一時的に(今だけ)sudo無しでdockerコマンドを実行したい。ということが今回の目的です。

Dockerでユーザーをdockerグループに追加することの危険性を理解しよう - Qiita によると、sudo無しでdockerを実行できるとhostのroot権限まで与えることになってしまうとのことです。

以前macで試したときはnewgrpでうまくできたと思うのですが、今回はうまくいかないのでgpasswdを使ってグループにhogeユーザーを追加して、終わったらhogeユーザーを削除します。

ログイン中のユーザーの所属グループを確認する

例えばhogeユーザーでログインしている場合以下のコマンドで確認できます。

$ groups hoge

以下のようにhoge wheelの2つに所属していることがわかりました。

hoge: hoge wheel

dockerグループがあるか確認する

今日の環境はcentos7なのですが、以下のコマンドで確認できました。

$ cat /etc/group

sudo無しで実行してみる

一度dockerコマンドを実行してみます。

$ docker version

以下のように表示されてdockerのサーバーの実行権限が無いことが確認できました。

Client:
 Version:      17.05.0-ce
 API version:  1.29
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:06:25 2017
 OS/Arch:      linux/amd64
Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.29/version: dial unix /var/run/docker.sock: connect: permission denied

dockerグループに追加してdockerコマンドが実行できることを確認する

Dockerコマンドをsudoなしで実行する方法 - Qiita にならってやってみます。

例えばhogeユーザーでログイン中に以下のコマンドでdockerグループに所属させます。

$ sudo gpasswd -a hoge docker

以下のコマンドで確認します。

$ groups hoge

以下のように表示されて、hogeユーザーがdockerグループにも所属しているのがわかります。

hoge : hoge wheel docker

以下のコマンドでdockerデーモンを再起動します。 (CentOS7の場合)

$ sudo systemctl restart docker

この段階ではまだdockerコマンドは実行できないので、一度サーバーからログアウトします。

$ exit

もう一度サーバーにsshでログインして、sudo無しでバージョン確認をしてみます。

$ docker version

以下のように表示されて、sudo無しでdockerコマンドを実行できることが確認できました。

Client:
 Version:      17.05.0-ce
 API version:  1.29
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:06:25 2017
 OS/Arch:      linux/amd64

Server:
 Version:      17.05.0-ce
 API version:  1.29 (minimum version 1.12)
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:06:25 2017
 OS/Arch:      linux/amd64
 Experimental: false

dockerグループから削除してdockerコマンドが実行できないことを確認する

以下のコマンドでdockerグループからhogeユーザーを削除します。

$ sudo gpasswd -d hoge docker

以下のコマンドでhogeユーザーが所属しているグループの一覧を表示してみます。

$ groups hoge

以下のように表示されて、hogeユーザーがdockerグループに所属していないことが確認できました。

hoge : hoge wheel

以下のコマンドでもう一度dockerデーモンを再起動します。 (CentOS7の場合)

$ sudo systemctl restart docker

ただ先ほどと同様、この段階ではまだdockerコマンドは実行できてしまうので、一度サーバーからログアウトします。

$ exit

もう一度サーバーにsshでログインして、sudo無しでバージョン確認をしてみます。

$ docker version

以下のように表示されてdockerのサーバーの実行権限が無いことが確認できました。

Client:
 Version:      17.05.0-ce
 API version:  1.29
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:06:25 2017
 OS/Arch:      linux/amd64
Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.29/version: dial unix /var/run/docker.sock: connect: permission denied