CSSのみで二重線ボックスを実装する

f:id:hoge:20150419213303p:plain

CSSだけで二重線のボックスが作れるらしいと聞いていたが、実際にやってみたら本当に簡単だった。

<div class="test">Test Box</div>

box-shadowが肝っぽい

.test {
margin: 20px;
padding: 20px;
border: 1px solid #000;
border-radius: 5px;
box-shadow: 0 0 0 1px #fff inset;
background: #000;
color: #fff;
}

すぐ確認できるファイルをGistで公開しておいた

gist.github.com

Gitでリモートにブランチを作成する

Gitでリモートにブランチ作成する時は、ローカルでブランチを作成してからそのブランチをリモートにpushする形で作成できるようだ

$ git push origin dev
Total 0 (delta 0), reused 0 (delta 0)
To hoge@remote:name/test.git
* [new branch]      dev -> dev

Gitのリモートのブランチをすべて表示する

git branchで表示されるブランチって全部のブランチじゃないんだな。リモートに存在するすべてのブランチを一覧にするには-aを付ければ良いらしい

$ git branch -a
* dev
master
remotes/origin/HEAD -> origin/master
remotes/origin/dev
remotes/origin/master
remotes/origin/test

BowerでjQueryやbootstrapを自動で取ってくるようにする

bowercomposerjQueryとか持ってくる版みたいな奴と思ってればおっけい。npmでインストールするんでnpmが入っていなかったら入れて以下でbowerのインストールは終わり

npm install -g bower

ウェーイ

$ bower -v
1.4.1

jQueryをコマンドで入れてみる

$ bower install jquery
bower jquery#*              not-cached git://github.com/jquery/jquery.git#*
bower jquery#*                 resolve git://github.com/jquery/jquery.git#*
bower jquery#*                download https://github.com/jquery/jquery/archive/2.1.3.tar.gz
bower jquery#*                 extract archive.tar.gz
bower jquery#*                resolved git://github.com/jquery/jquery.git#2.1.3
bower jquery#~2.1.3            install jquery#2.1.3
jquery#2.1.3 bower_components/jquery

なんか色々入ってくるけど、jQueryを使うってだけならdist以下の必要なファイルをあとで取ってこればおっけい。取ってくる作業をshellとかで自動化してもいいけど、grunt使うと必要なファイルを必要なディレクトリにまとめるのが楽なので別でまとめる

必要ファイルをbower.jsonにまとめる

必要ファイルをbower.jsonとかにまとめておけばbower installで一発でできるようになる。そのbower.jsonbower initで作れるからやってみたら、聞かれること多すぎる上に必要ない設定も追加されて、最終的に必要な項目も生成されなかったので手作業で作ることにして、結果できた最小構成がこれ。

{
"name": "my-project",
"version": "1.0.0",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {}
}

このbower.jsonを保存しておいて、さっきのbower install packageをやる時に--saveってすると勝手にbower.jsonに保存される

$ bower install jquery --save
$ bower install bootstrap-sass --save

こういう風になった

{
"name": "my-project",
"version": "1.0.0",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"jquery": "~2.1.3",
"bootstrap-sass": "~3.3.4"
}
}

一旦bower_compornentsを削除してからbower installやればdependencies`に設定されているものがインストールされる。gruntを使えばファイルを移動させたり結合したりできるんだが、複雑になるんでshellでそのあたりの処理をやっても私はいいと思う。gruntについては後日まとめておく。

Bowerのパッケージ一覧

bower search packageで使えるパッケージ取ってこれるんだけど、どんなパッケージがあるかブラウザからも見てみたくなって検索したんだが出てこねえしってことで、しつこく調べたら見つけたぜ

bower.io

"bower パッケージ 一覧"で検索したら出てきた方がいいと思うし、Google先生ならその辺持ってきてくれそうな気がしたけど来てないから、bower自体そんなに使ってる人がいないか、みんなコマンドを使ってるとかかね

npmをインストール

おいnpm入ってねーぞ

$ npm
-bash: npm: command not found

npmってどうやってインストールするんだっけと考えていたが、node入れた時に一緒に入ってくるんだった。ということでbrewでインストールするぞ

$ brew install node
==> Downloading https://homebrew.bintray.com/bottles/node-0.12.2_1.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring node-0.12.2_1.yosemite.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
==> Summary
🍺  /usr/local/Cellar/node/0.12.2_1: 2603 files, 28M

npmが入ったぜ

$ npm -v
2.7.5

PHPのarray_values()で単純配列にする

array_values()を使って単純配列が作れるぞ。キーなども抜けるので、数値をキーとした連想配列とかをくどく単純配列としたいときに大活躍した

<?php
$array = ['hoge' => 'test', 'hoge2' => 'test2', 'hoge3' => 'test3'];
print_r($array);
print_r(array_values($array));

こんな感じで使う

$ php test.php
sArray
(
[hoge] => test
[hoge2] => test2
[hoge3] => test3
)
Array
(
[0] => test
[1] => test2
[2] => test3
)

配列を返す関数は何もない時にnullとかfalseとか返すんじゃなくて空配列を返すようにしてくれると便利

composerをグローバルにインストールする

最近composerがデファクトスタンダードになってきた気がするのでグローバルに入れてやるぜ。composerをグローバルに入れるには公式で紹介されている以下の方法でいける

curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer

composerって打って以下が出ればおっけい

$ composer
______
/ ____/___  ____ ___  ____  ____  ________  _____
/ /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
/_/

/usr/local/binがなければ自分で作ればいいんだが、homebrewとかインストールすれば勝手に作られるし、brew使うなら入れておけばこのディレクトリを自分で作らなくていいので楽だぞ

Thanks

getcomposer.org

Pythonでリストを展開する

Pythonって配列って言わずにリストって言うらしいな

hoge = ['hoge', 'moge', 'hage', {'anoke': '1', 'sokonoke': '2'}]
print hoge

こうしてprintするだけで中身展開された

$ python test.py
['hoge', 'moge', 'hage', {'anoke': '1', 'sokonoke': '2'}]

PHPとかprint_r()があったり、JavaScriptとかだとconsole.log()とかすると思うんだけど、Pythonprintすればそのまま出るしこれでいいんかね

Pythonでページ内の画像URLを正規表現ですべて取ってくる

途中から面倒くなってきて中途半端だけどある程度動くんじゃないか

import urllib2
import re
fp = urllib2.urlopen('https://github.com')
html = fp.read()
fp.close()
repatter = re.compile('<img([^"\']*)src=["\']((https?://)?[\w/:%#\$&\?\(\)~\.=\+\-]+)["\']', re.IGNORECASE)
images = repatter.findall(html)
for image in images:
print image[1]

実行すると画像URLを一覧にする

$ python test.py
https://assets-cdn.github.com/images/modules/home/ghfm.png?v=2
https://assets-cdn.github.com/images/modules/home/gh-windows-app.png

全部書き終わる頃にDOMを解析したほうが楽そうだと思ったので今度それやるか。これ途中からすげーどうでも良くなった