2015年5月25日

子要素がfloatだった場合に親要素の高さが拡張しない問題点の解決法

子要素が floatだった場合、親要素の高さが拡張しない問題点を解決する方法の一つをメモしておきます。
親要素に overflow: auto;のプロパティを付与しましょう。

to-automatically-extend-parent-element-01

子要素が floatだった場合、親要素の高さが拡張しない

to-automatically-extend-parent-element-02

親要素に overflow: auto;のプロパティを付与すればOK

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>子要素がfloatだった場合も親要素の高さを拡張させる例</title>
	<style type="text/css">
		.parent {
			background-color: #E5E5E5;
			padding: 5px;
			overflow: auto;
		}
		.child {
			width: 100px;
			height: 100px;
			background-color: #449D44;
			margin: 5px;
			float: left;
		}
	</style>
</head>
<body>

<div class="parent">
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>子要素がfloatだった場合も親要素の高さを拡張させる例</title>

.parent {

background-color: #E5E5E5;

padding: 5px;

overflow: auto;

}

.child {

width: 100px;

height: 100px;

background-color: #449D44;

margin: 5px;

float: left;

}

</style>

</head>

<body>

</div>

</body>

</html>

以上です。

2015年4月14日

npm listの依存関係を非表示にする

mawatari 日記 JavaScript, Node.js 0 Comments

npm list (またはls, ll, la)では、パッケージの依存関係がすべて表示されてしまうので、自身でインストールしたパッケージのみを知りたいときに見づらく感じてしまうことがあります。そんな時は depthオプションで表示制御をしましょう。
例えば、 --depth=0オプションを付与するとパッケージの依存関係を非表示にすることができます。

npm list --depth=0 -g
/Users/mawatari/.nvm/versions/node/v0.12.2/lib
├── grunt-cli@0.1.13
├── gulp@3.8.11
└── npm@2.7.4

npm list --depth=0 -g

/Users/mawatari/.nvm/versions/node/v0.12.2/lib

├── grunt-cli@0.1.13

├── gulp@3.8.11

└── npm@2.7.4

以上のとおり、表示制御出来ました。

2015年4月9日

Debianのバージョン確認コマンドとアーキテクチャ確認コマンド

mawatari 日記 Debian, Tips 0 Comments

仕事でDebianに触れる機会がありました。普段はあまり触らないOSなので、わからないことも多いわけですが、そのうちの一つとして、Debianのバージョンやアーキテクチャ（OSが32bit, 64bitどちらなのか）を確認するためのコマンドをメモしておきます。
以下は、Mac OS XのVirtualBoxを使ってゲストOSとしてインストールしたDebianで試した結果です。

Debianのバージョンを確認するコマンド

他のOSと比べても極めてシンプルな表示ですね。

cat /etc/debian_version
7.8

# 以下のコマンドでも確認できます
cat /etc/issue
Debian GNU/Linux 7 \n \l

cat /etc/debian_version

7.8

# 以下のコマンドでも確認できます

cat /etc/issue

Debian GNU/Linux 7 \n \l

アーキテクチャ（OSが32bit, 64bitどちらなのか）を調べるコマンド

こちらに関してはLinux共通ですね。

arch
# 以下のように表示されます
# 64bitの場合
X86_64
# 32bitの場合
i686

# 以下のコマンドでもOK
uname -a
# 以下のように表示されます
Linux debian 3.2.0-4-amd64 #1 SMP Debian 3.2.65-1+deb7u2 x86_64 GNU/Linux

# このコマンドでもOK
cat /proc/version
Linux version 3.2.0-4-amd64 (debian-kernel@lists.debian.org) (gcc version 4.6.3 (Debian 4.6.3-14) ) #1 SMP Debian3.2.65-1+deb7u2

arch

# 以下のように表示されます

# 64bitの場合

X86_64

# 32bitの場合

i686

# 以下のコマンドでもOK

uname -a

# 以下のように表示されます

Linux debian 3.2.0-4-amd64 #1 SMP Debian 3.2.65-1+deb7u2 x86_64 GNU/Linux

# このコマンドでもOK

cat /proc/version

Linux version 3.2.0-4-amd64 (debian-kernel@lists.debian.org) (gcc version 4.6.3 (Debian 4.6.3-14) ) #1 SMP Debian3.2.65-1+deb7u2

以上です。

2015年4月7日

Vagrant 1.7+でSSH接続エラーが出た場合の対処法

mawatari 日記 Ansible, Homebrew, Vagrant, VirtualBox 1 Comment

普段から、Vagrant + Ansibleを用いて、チームで共通の開発環境を作れるようにしています。先月、届いた13″ rMBP early 2015に開発環境を構築していた際、Ansibleがうまく実行できないトラブルにハマりました。
全く同じBox及びプロビジョニングを使って旧環境では問題なく構築できたのに、新環境ではできないことに頭を悩ませましたが、2時間ほど試行錯誤した結果、解決できたので、その事象と原因、対処法をメモしておきます。

環境

環境は以下の通りです。Vagrant, VirtualBox, AnsibleすべてをHomebrewでインストールしています。結果からいうとVirtualBoxやAnsibleは直接関係ありませんでしたが、一応、バージョン情報を示しておきます。

ソフトウェア	バージョン
MacOS	10.10.2
Vagrant	1.7.2
VirtualBox	4.3.26
Ansible	1.9.0.1

SSH Error: Permission deniedとなってしまう問題

まずは事象を振り返ります。
CentOS 6.x minimalのVagrant Box* を用いて、 vagrant provisionや ansible-playbookコマンドでプロビジョンしようとした際、次の様なエラーが表示され、それ以上、先に進めることができませんでした。
* 厳密には、minimalにVirtualBoxのツールやvagrantユーザの作成などを行った状態のものです

vagrant provision
192.168.33.10 | FAILED => SSH Error: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
    while connecting to 192.168.33.10:22
It is sometimes useful to re-run the command using -vvvv, which prints SSH debug output to help diagnose the issue.

ansible-playbook -i hosts/vagrant provision_vagrant.yml
192.168.33.10 | FAILED => SSH Error: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
    while connecting to 192.168.33.10:22
It is sometimes useful to re-run the command using -vvvv, which prints SSH debug output to help diagnose the issue.

vagrant provision

192.168.33.10 | FAILED => SSH Error: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).

while connecting to 192.168.33.10:22

It is sometimes useful to re-run the command using -vvvv, which prints SSH debug output to help diagnose the issue.

ansible-playbook -i hosts/vagrant provision_vagrant.yml

192.168.33.10 | FAILED => SSH Error: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).

while connecting to 192.168.33.10:22

It is sometimes useful to re-run the command using -vvvv, which prints SSH debug output to help diagnose the issue.

Ansibleのインベントリファイルである hosts/vagrantには、以下の様な内容を記述していました。

192.168.33.10 ansible_ssh_private_key_file=~/.vagrant.d/insecure_private_key ansible_ssh_user=vagrant

1	192.168.33.10 ansible_ssh_private_key_file=~/.vagrant.d/insecure_private_key ansible_ssh_user=vagrant

2015年3月24日

HomebrewとAnsibleでMacの開発環境構築を自動化する

mawatari 日記 Ansible, Homebrew, Mac 0 Comments

3月20日に13″ rMBP early 2015が手元に届いたので、以下の様なツイートをしながらPlaybookを作っていました。

GUIアプリも含めて全部Homebrewで管理してみようかな。
— まわたりなおと (@mawatarin) 2015, 3月 20

んー？Brewfileで管理できないのか？ http://t.co/g8eBr2tInk
— まわたりなおと (@mawatarin) 2015, 3月 20

うん。Brewfileの代替はこれがよさそうだな。今夜やってみよう。 http://t.co/mxXRd3IGK2
— まわたりなおと (@mawatarin) 2015, 3月 20

例のごとく、そのとき取り組んだことを整理した上で公開しようとしていたわけですが、その日の夕方、@t_wadaさんによって、Mac の開発環境構築を自動化する (2015 年初旬編)という記事が公開されました。内容がほぼ被っているので、私のメモを公開する意義は少ないわけですが、アプローチが違う部分、修正した部分もあるので残しておきます。
Homebrew + Ansibleで、CLI, GUIアプリともに管理します。非常に簡単なので、ぜひ取り組んでいただければと思います。
mawatari/mac-provisioning – GitHub

ちなみに、Ansibleを使わずにやりたい場合は、以下の記事が参考になるかもしれません。
Brewfileはオワコンではない
 Homebrew-fileでhomebrewでインストールしたパッケージの管理をする

環境

環境は以下の通りです。工場出荷状態の13″ rMBP early 2015で試しました。
以下の説明はクリーンインストールされたMacOSを前提にしているので、環境によっては違ってくる部分もあると思いますが、その点は留意してください。
念のため、OSの再インストールを3回繰り返してチェックしたので、同じ環境であれば同様の手順で簡単に再現できるはずです。

ソフトウェア	バージョン
MacOS	10.10.2

«‹ 2 3 4 5 ›»