Bootstrap3のbreakpointとcontainer幅とgrid内余白を変更する

はじめに

breakpointとcontainer幅について復習します。

以下のURLの日本語リファレンスの表を参考にさせて頂きました。

グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス

windowサイズが以下それぞれの数値のときに、container幅もそれに対応した数値になります。

Window幅	container幅
～767px	None (auto)
768px～991px	750px
992px～1199px	970px
1200px～	1170px

上記した数値はそれぞれ変数があるので、そのペアを変更することになります。

Bootstrapのsass版をダウンロードする

「Bootstrap · The world's most popular mobile-first and responsive front-end framework.」で bootstrap-sass-3.3.7.tar.gz をダウンロードしました。

どこを編集するのか

圧縮されたファイルを展開すると、中に「assets/stylesheets/bootstrap/_variables.scss」があるので、その中を編集します。

breakpoint

breakpoint設定の変数は以下の4つです。

• $screen-xs: 480px !default;
• $screen-sm: 768px !default;
• $screen-md: 992px !default;
• $screen-lg: 1200px !default;

$screen-xsはcontainerの幅変更には関与していませんが、他のコンポーネントで使用されています。

container幅

container幅設定の変数は以下の4つです。

• $container-tablet: (720px + $grid-gutter-width) !default;
• $container-desktop: (940px + $grid-gutter-width) !default;
• $container-large-desktop: (1140px + $grid-gutter-width) !default;

grid内余白

以下の変数が該当箇所なのですが、影響を与えるコンポーネントは少なくないので、0など極端な数値に変更したい場合はコンパイルした後で個別に変更した方が良いかもしれません。

• $grid-gutter-width: 30px !default;

編集する

例えばcontainerの最大幅が1170pxだと狭いと感じる場合は、$container-large-desktop と $screen-lg を変更すると良いでしょう。

コンパイルする

普段はgulpやWebpackを使っているのでわからなくなりがちなのですが、「assets/stylesheets/_bootstrap.scss」を以下のコマンドでコンパイルします。

sass _bootstrap.scss:bootstrap.css

WindowsでAtomを使ってみる

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

縦線を消す wrap-guide

Atomでエディター内の縦線を消す方法 | IDEA*IDEA

設定とかプラグイン、ショートカットキーのこと

WindowsでAtomをインストールして使ってみる - Qiita

環境

• Windows10
• Atom v1.8.0 (2016-07-29現在)

ウィンドウを分割する

Atom エディタで画面分割する方法 - Qiita

設定を変更追加する

ウィンドウ上部のメニューから File > Settings を選択する。

ウィンドウ内の Install を選択して、フィールドに例えば japanese-menu と入力して、Packagesボタンをクリック。

Theme

とりあえずmonokaiにした。

その他

japanese-menu

メニューが日本語になる。インストールしてないけど、一応書いておく。

show-ideographic-space

全角スペースが可視化される。

minimap

sublimetextでウィンドウの右端に出てくるあれ。

emmet

HTMLやCSSの入力支援。

-

今後も少しずつ更新予定。

webpackを使ってES2015、Vue.jsのビルド環境を構築する

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

webpackのすごく基本

webpack で始めるイマドキのフロントエンド開発 - Qiita

以前書いたReact.jsの記事

webpackを使ってES2015、React.jsのビルド環境を構築する - Motomichi Works Blog

Vue.jsでの記述例について

vue.js + webpack の紹介(その2) - Qiita

https://github.com/vuejs/vue-webpack-example/blob/master/src/views/a/index.js

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

webpack-vue-sampleディレクトリを作成した。

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

npm install -g webpack babel

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

まずpackage.jsonを作成する。

npm init

webpack-vue-sammpleディレクトリで以下のコマンドを実行した。

npm install --save-dev webpack vue html-loader babel-core babel-loader babel-preset-es2015

今回webpack-vue-sample内に作成するディレクトリ構造とファイル

以下のディレクトリやファイルを手順に沿って作成していきます。

• index.html
• package.json
• webpack.config.js
• node-modules/*
• src/main.js
• src/vue-materials/sample.js
• src/vue-materials/template-hoge.html
• src/vue-materials/template-foo.html
• result/bundle.js

webpack.config.jsの作成とその記述内容

webpack-vue-sampleディレクトリに作成した。記述内容は以下の通り。

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: `${__dirname}/result`,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        exclude: /node_modules/,
        test: /\.js[x]?$/,
        query: {
            cacheDirectory: true,
            presets: ['es2015']
        }
      },
      {
        test: /\.html$/,
        loader: "html-loader"
      }
    ]
  },
  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    extensions: ['.js']
  },
  plugins: []
}

./src/main.jsの作成とその記述内容

require('./vue-materials/sample');

./src/vue-materials/sample.jsの作成とその記述内容

templateをrequire()するところ以外は普通のVue.jsの記述と同じで、以下の通り。

var Vue = require('vue');

var app = new Vue({
  el : '#app',
  components: {
    'my-hoge': {
      template: require('./template-hoge.html')
    },
    'my-foo': {
      template: require('./template-foo.html')
    }
  }
});

./src/vue-materials/template-hoge.htmlの作成とその記述内容

<div>テンプレート hoge</div>

./src/vue-materials/template-foo.htmlの作成とその記述内容

<div>テンプレート foo</div>

index.htmlの作成とその記述内容

webpack-vue-sampleディレクトリに作成した。
webページ作成用の普通のhtmlです。コンパイルされたbundle.jsを読み込みます。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>vue-tutorial</title>
</head>
<body>

<div id="app">
  <my-hoge></my-hoge>
  <my-foo></my-foo>
</div>

<script type="text/javascript" src="result/bundle.js"></script>
</body>
</html>

watchしてコンパイルしてみる

webpack -d --watch

src/vue-materials/template-hoge.htmlなどを編集して保存すると、result/bundle.jsが生成される。

ページを見てみる

index.htmlをブラウザで開いてみる。

確認できた。

webpackを使ってES2015、React.jsのビルド環境を構築する

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

webpackのすごく基本

webpack で始めるイマドキのフロントエンド開発 - Qiita

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

Webpackでイチから作るReact.js開発環境 - Qiita

babelとwebpackを使ってES6でreactを動かすまでのチュートリアル - Qiita

grunt glup webpack それぞれでBabelでES2015の自動コンパイル環境を作る(比較のため)

BabelでES2015の自動コンパイル環境を作る（Browserify / gulp / Grunt / webpack） | mae's blog

.babelrcがバージョン6以降は必要だとかそういう感じの話

Babelを6系にアップデートしたらgulpでこける - Qiita

gulp をやめて webpack

gulpでjsのビルドをしていたのだけれど、色々あってjsのビルドはwebpackを使うことにした。

以下のページを参考に、環境構築をしてみる。

• Webpackでイチから作るReact.js開発環境 - Qiita

webpackをインストール

グローバル

npm install -g webpack

プロジェクトにも

npm install --save-dev webpack

他のパッケージもインストール

グローバル

npm install -g babel

プロジェクト

npm install --save-dev react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react

webpackの場合は、babelを使う為にbabel-loaderやbabel-coreなどが必要らしい。

あとはgulpのときにも使用していたパッケージだけど一応書いておいた。

参考ページにならって進める

引き続き以下のページにならって進めたらできると思う。

Webpackでイチから作るReact.js開発環境 - Qiita

その他

以下のページも読んでおくと.babelrcのことなども書いてあって良いかも。

babelとwebpackを使ってES6でreactを動かすまでのチュートリアル - Qiita

さくらのVPSを使う その0015 HeidiSQLでMySQLホストに接続する

vagrantのMySQLホストに接続したときの過去記事

vagrantその0026 HeidiSQLでvagrant内のMySQLホストに接続する - MOTOMICHI WORKS BLOG

記事の為に、仮のユーザー名, パスワード, ポート, IP

例えば「さくらのVPSを使う その0001 申し込みからsshログインに関わる設定 - MOTOMICHI WORKS BLOG」みたいな感じで、サーバーにログインするユーザー名とパスワード、MySQLに接続するユーザー名とパスワードなどを以下のように設定したことにする。
ポートはそれぞれ初期値を例とする。

• サーバーユーザー名 : hoge
• サーバーパス : hogepass
• サーバーのポート : 22
• MySQLユーザー名 : root
• MySQLパス : myhogepass
• MySQLのポート : 3306

VPSのサーバーのIPは契約したときメールで送られてくると思うけど、仮に000.00.000.00という事にする。

HeidiSQLの設定

設定タブ

• ネットワーク種別 : MySQL(SSH tunnel)
• ホスト名/IP : 127.0.0.1
• ユーザー : root
• パスワード : myhogepass
• ポート : 3306

SSHトンネルタブ

• plink.exe : (plink.exeのパス)
• SSHホスト : 000.00.000.00
• ポート : 22
• ユーザー名 : hoge
• パスワード : hogepass
• plink.exeのタイムアウト時間 : 4
• ローカルポート : 3307

タイムアウト時間は15とか20に伸ばした方が良いという情報もあるけど、私は4で接続できた。

あとは空白で。
今回の例では秘密鍵も空白で接続できる。

vagrantその0026 HeidiSQLでvagrant内のMySQLホストに接続する

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

今回のおおよそのこと

VirtualBox Vagrant上のMySQLにHeidiSQLで接続する方法 | Lancork

Vagrant vccw のMySQLデータベースにHeidiSQLで接続する – セルティスラボ

Macでやってたときの記事

vagrantその11 SequelProで仮想環境内のMySQLデータベースに接続する - MOTOMICHI WORKS BLOG

can't connect to mysql server on 'localhost' (10061) について

linux - Can't connect to Vagrant using HeidiSQL: "Can't connect to MySQL server on 'localhost'" - Stack Overflow

vagrantのSSHの設定を表示する

VagrantインスタンスにSSHでログインする - Qiita

plink.exeをダウンロードして配置する

PuTTY Download Page

For Windows on Intel x86 の plink.exe をダウンロードした。

任意の場所で良いけどC:\plink\plink.exeとなるように置いた。

HeidiSQLのインストール

「Download HeidiSQL」でインストーラーをダウンロードして、HeidiSQL_9.3.0.4984_Setup.exeを実行した。

vagrant up とか vagrant reload したときに表示される情報

vagrant up とか vagrant reload したときに表示される以下のような情報を使って接続する。

例えばこんな感じでMySQLをインストールしたことにして以降の話をする

さくらのVPSを使う その0003 Mysqlをインストールする - MOTOMICHI WORKS BLOG

HeidiSQLで接続する

設定タブ

まずは設定タブ内の情報を入力する。

• ネットワーク種別「MySQL(SSH tunnel)」を選ぶ
• ホスト名/IPは普通にvagrant内にMySQLをインストールしたら「127.0.0.1」
• まだrootユーザーしかいないので「root」
• パスワードはMySQLインストール時に設定したもの
• ポートは初期値の場合「3306」

SSHトンネルタブ

次にSSHトンネルタブ内の情報を入力する。

• plink.exeはC:\plink\plink.exeにさっき置いたので。
• SSHホスト+ポートはvagrant upしたときに表示されるSSH addressのところだと思う。SSH address: 127.0.0.1:2201のところ。今回の例では2201だけど、自分の環境をよく見た方が良い。
• ユーザー名はvagrant upしたときに表示されるSSH usernameのところ。
• パスワードは「vagrant」
• あとは初期値が入っていたのでそのまま「4」とか「3307」とかになってるし、秘密鍵ファイルは指定していない。

「設定」と「SSHトンネル」両方の入力が完了したら、開くボタンを押下する。

なんか聞かれる

なぜかエラーになり、なぜか解決

なぜか以下のようなエラーが発生した。

can't connect to mysql server on 'localhost' (10061)

検索してみると、以下のページが出てきた。

linux - Can't connect to Vagrant using HeidiSQL: "Can't connect to MySQL server on 'localhost'" - Stack Overflow

どうもvagrant reloadすると直るようなことが書いてあるようなので、vagrant reload してから、もう一度HeidiSQLで同じように入力して「開く」ボタンを押下したら接続できた。

vagrantのコンフィグを表示する

ついでに「VagrantインスタンスにSSHでログインする - Qiita」に書いてあったので残しておく。

エラーが解決した要因がよくわからないのであんまりすっきりしないけど、もうエラーは出ないし今回はここまで。

gulp-eslintの.eslintrcを作成する

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

.eslintrcを公開してくださっているページ

.eslintrc晒す - Qiita

eslint

• eslint

gulp-eslint

• gulp-eslint

babelとか関係なくeslintについて包括的な基礎のこと

• [GitHub 奮闘記] gulp で eslint 設定とコード チェック環境の共有 - Qiita
• ESLint を試す – アカベコマイリ
• ESLintの設定事始め - Umi Uyuraのブログ
• ESLintの設定ファイルをブラウザでポチポチして作るツールを作った - Qiita
• ESLint 最初の一歩 - Qiita
• ESLintのルールを自作しよう！ - Yahoo! JAPAN Tech Blog

babel使用時の.eslintrcの記述などについて

• babel-eslint
• babel な ESLint の設定をがんばった ::ハブろぐ

babel-eslintのインストールについて

• babel-eslintでBabelなLint | たんたか

一部設定の日本語解説

ESLintのエラールール。日本語ざっくり解説[スタイル編] - Qiita

前提として

gulpとかeslintとか色々動くようになっている。

やりたいこと

.eslintrcの編集をして、設定を適切な感じにしていきたい。

babelを使用している環境で予約語に関するエラーが出たのでここは通したい

以下の通りエラーが出た。

1:1  error  Parsing error: The keyword 'import' is reserved

babel-eslintをインストールして.eslintrcに設定すると大丈夫らしいのでインストールする

以下の通りインストールした。

npm install --save-dev babel-eslint

コメントでご教示頂いたので直した

"parserOptions"というキーを適切に設定すると直る。

.eslintrcの作成

.eslintの配置はユーザー直下に置くとグローバルな設定になり、プロジェクト直下に置くとプロジェクトごとの設定が可能らしいので、とりあえず今回はプロジェクト用としてpackage.jsonと同じディレクトリに配置する。

下記二つページを参考にくっつけて調整してみた。

• babel な ESLint の設定をがんばった ::ハブろぐ
• .eslintrc晒す - Qiita

ecmaFeaturesキー

ecmaFeaturesキーは、ESLint 1.x.x か ESLint 2.x.x 以降かで書く場所が違うので注意が必要っぽい。