Bootstrapをbowerで入れて使ってみる

HTML/CSS/JavascriptフレームワークのBootstrapをbowerを使って入れてみます
Bootstrap v.3.2.0でした

npmが使えるようにしてあったのでそこからです、あしからず

bowerをインストールする

$ sudo npm install -g bower

grunt-cliをインストールする

$ sudo npm install -g grunt-cli

bootstrapをインストールする

$ bower install bootstrap

下記のようにディレクトリが作成されbootstrapがインストールされます
├── bower_components
│   ├── bootstrap
│   └── jquery

使えるようにするため
$ cd bower_components/bootstrap
$ npm install

これで
bower_components/bootstrap/dist
ディレクトリにjavascriptやcssができます

bootstrapを使ってみる

使うために、今回はシンボリックリンクで使いやすいところへリンクを貼りました
$ ln -s bower_components/bootstrap/dist/css css
$ ln -s bower_components/bootstrap/dist/js js
$ ln -s bower_components/bootstrap/dist/fonts fonts

ベースのHTMLを
http://getbootstrap.com/getting-started/
Basic template
のところを見れば、使えます
bootstrap1

見た目でわからないので
http://getbootstrap.com/examples/starter-template/
なんかを見ながら
[html]
<div class="container">
<h1>Hello, world!</h1>
<p class="lead">
はじめてのBootstrap<br>
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
</p>
</div>
[/html]
とすると
bootstrap2

leadが文章を目立たせるプロパティです
cssは
http://getbootstrap.com/css/
を参考に

nav barを追加してみると
[html]
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!–/.nav-collapse –>
</div>
</div>
[/html]
bootstrap3

ウィンドウサイズを小さくすると
bootstrap4
ナビが消えたりします

ナビバーはcomponentsのページを参考に
http://getbootstrap.com/components/#navbar

Lineで知らない人からの通知がきたのでちょっと調べてみた

Lineでこんな通知がきました
line-nofriend

電話番号がばれて追加されたみたいです

写真をキャプチャして検索してみたら
越智ゆらの、って人でした
http://ameblo.jp/yulano/day-20140423.html
Googleのイメージ検索でひっかかりました

ブラウザのシークレットモードでのってるアドレスを叩くと
linechat.jpにつながりました
linechat

whoisでドメインの管理者を調べて見ました
http://whois.ansi.co.jp/linechat.jp
ドメイン代行会社の登録だけでわからず

これぐらいで暇つぶし終わります

diffコマンドの使い方

ファイルの差分をみるdiffコマンドを整理してみました
Ubuntu 12.04で試しています

フォルダ構成がこんな感じ時


$ tree
.
├── 1
│   ├── 1.txt
│   ├── 2.txt
│   └── 3.txt
└── 2
    ├── 1.txt
    └── 2.txt

差分を見たい時、


$ diff 1 2
diff 1 2
diff 1/2.txt 2/2.txt
1c1
< 1111
---
> 2222
1 のみに存在: 3.txt

unified形式だと


$ diff -u 1 2
diff -u 1/2.txt 2/2.txt
--- 1/2.txt     2014-10-16 17:11:17.925405481 +0900
+++ 2/2.txt     2014-10-16 17:17:43.965416847 +0900
@@ -1 +1 @@
-1111
+2222
1 のみに存在: 3.txt

で最初の3行がまとめで、それ以降が差です
– が1つ目のディレクトリ、+ が2つ目のディレクトリ

さらにフォルダを追加して


$ tree
.
├── 1
│   ├── 1-1
│   │   └── 1.1.text
│   ├── 1.txt
│   ├── 2.txt
│   └── 3.txt
└── 2
    ├── 1-1
    │   └── 1.1.text
    ├── 1.txt
    └── 2.txt

差分をみます、サブディレクトリも比較するには-rが必要です


$ diff -u -r 1 2
共通のサブディレクトリー: 1/1-1 と 2/1-1
diff -u 1/2.txt 2/2.txt
--- 1/2.txt     2014-10-16 17:41:37.781459066 +0900
+++ 2/2.txt     2014-10-16 17:41:54.381459554 +0900
@@ -1 +1 @@
-1111
+22222
1 のみに存在: 3.txt
user@user-ThinkPad-X120e:~/workspace/diff$ diff -u -r 1 2
diff -u -r 1/1-1/1.1.text 2/1-1/1.1.text
--- 1/1-1/1.1.text      2014-10-16 17:36:31.969450061 +0900
+++ 2/1-1/1.1.text      2014-10-16 17:42:11.921460071 +0900
@@ -1 +1 @@
-1-1
+2-1
diff -u -r 1/2.txt 2/2.txt
--- 1/2.txt     2014-10-16 17:41:37.781459066 +0900
+++ 2/2.txt     2014-10-16 17:41:54.381459554 +0900
@@ -1 +1 @@
-1111
+22222
1 のみに存在: 3.txt

差分をとってあてるには


$ diff -u -r 1 2 > patch.txt
$ mv patch.txt 1/
$ cd 1
$ patch -p1 < patch.txt
patching file 1-1/1.1.text
patching file 2.txt

と、diffの結果をファイルにして、あてたいフォルダへ移動、patchコマンドの-p1が1階層無視するオプションです
差分を適用したいフォルダを1つ目に指定します(今回は1ディレクトリ)

WordPressの子テーマ用にPHPを変更する

以前
WordPressにシェアボタンを用意する過程を公開
で、子テーマを作成しましたがPHPの修正が手抜きでした

テーマのアップデートをしたら案の定、修正が飛んでしまったのでやり直し..

フォルダ構成では
wp-content/themes/twentyeleven
wp-content/themes/twentyeleven-child

twentyeleven-childのフォルダに
style.cssをおいて、twentyelevenを継承するようにしたらCSSはOKでした

PHPも同様、同じファイル名で存在させれば子側を読み込みます(function.php以外)

content-single.phpを変更してたので、
アップデートして新しくなったcontent-single.phpをコピー


$ cp wp-content/themes/twentyeleven/content-single.php wp-content/themes/twentyeleven-child/content-single.php

子テーマのcontent-single.phpを修正、でバージョンアップ、かつ、以前の仕様に戻せました

次、アップデートしたら子側は手動アップデートでしょうか..
もっといい方法がある気がします..