OmniAICreator/Qiita-1.07M huggingface dataset:
初めてのRubyMine使いに贈る！これだけは覚えておきたいショートカット


**記事内で利用しているバージョンは下記の通りです。ショートカットは初期値を前提として記載しています。**

```
RubyMine 7.0
OS X 10.9.5
```

皆さん！RubyMine使っていますか？
僕も一時期は「IDEは重くて起動に時間がかかるからちょっとね？！」って思ったましたが、MacBook Proを買い換えたら全然気にならなくなりました。w

ただ、IDEだとマウスを使うことが多くなってしまいます。マウスで腱鞘炎になる身としては辛い。。。
そこで出来る限りマウスを使わずにキーボードショットカットですませたい。
っということでよく使うショートカットを書いていきたいと思います。

## 全知全能の神が宿る `Cmd + Shift + A`

これだけ覚えておけばAll OKです。
`bundle install` `rake` `spec` `migration` etc...
何でも来い！
開発に必要なほぼ全てのコマンドがここから実行できます。
入力する度にコマンドが絞り込まれるので、数文字入力して選んでEnterで大丈夫。
RubyMineを使い始めてまず初めに覚えるべきショートカットだと思います。

![スクリーンショット 2014-11-29 15.41.41.png](https://qiita-image-store.s3.amazonaws.com/0/4529/46f03d96-956a-fcbd-ee3e-de746ebb33af.png "スクリーンショット 2014-11-29 15.41.41.png")

## テストが無いと不安で夜も眠れない貴方に `Alt + R`

Rake Task系のコマンドを呼び出すショートカットです。
僕がよく使うのは、`spec` `db:migrate` ですね。
`Cmd + Shift + A` 経由でも実行できるのですが、他のコマンドも混ざってくるので Rake Task に絞り込んだ上で検索したほうがより少ないタイプ数で目的のコマンドにたどり着けます。

![スクリーンショット 2014-12-01 19.42.50.png](https://qiita-image-store.s3.amazonaws.com/0/4529/cdc566bc-ffbf-1b1b-8362-2e1464c30cff.png "スクリーンショット 2014-12-01 19.42.50.png")

## とにかく作りたい。作り続けたい。 `Cmd + Alt + G`

Generate系のコマンドを呼び出すショートカットです。
`Cmd + Alt + G` で `migration` ファイルを作って `Alt + R` で `db:migrate` は一連の流れとして手が覚えてしまいました。
`Cmd + Alt + G` で一覧を見ていて `scaffold_controller` の存在を知りました。。。
IDEを使っていると自分が知らなかったHelperやメソッドに出会えるのも良いですね。

![スクリーンショット 2014-12-01 19.53.51.png](https://qiita-image-store.s3.amazonaws.com/0/4529/5add9eea-c199-4bf0-6150-b447292bfe6e.png "スクリーンショット 2014-12-01 19.53.51.png")

## すぐに呼び出せ！ `Cmd + Shift + O`

プロジェクト内でファイルを検索するショートカットです。
ファイル検索も全体のフォルダ内から串刺しで検索してくれます。
`フォルダ/ファイル名` で目的のフォルダ配下のファイルも検索できます。

![スクリーンショット 2014-12-01 20.04.18.png](https://qiita-image-store.s3.amazonaws.com/0/4529/921e53f3-4940-a21f-cbe8-dd537d8678b2.png "スクリーンショット 2014-12-01 20.04.18.png")

## 画面一杯にコードを表示したい `Cmd + Shift + 2`

Windowを横に分割するショートカットです。
`schema.rb` を見ながらコード書いたりしますよね。
縦分割はデフォルトでショートカットが設定されていない模様。。。
RubyMineは独自のショートカット設定も勿論可能なので自分好みにカスタマイズしてください。

![スクリーンショット 2014-12-01 20.12.08.png](https://qiita-image-store.s3.amazonaws.com/0/4529/f9b550c5-aac8-b949-0fd3-a1e6462226c1.png "スクリーンショット 2014-12-01 20.12.08.png")

## 整理整頓に生きがいすら感じています `Cmd + Alt + L`

コードをリフォーマットするショートカットです。

![スクリーンショット-2014-12-02-8.35.39.jpg](https://qiita-image-store.s3.amazonaws.com/0/4529/6c95fcdc-e54e-7bb4-b179-de36690b03a2.jpeg "スクリーンショット-2014-12-02-8.35.39.jpg")

リフォーマットはRubyMineに付いているSQLコンソールの所でも使えて便利。

![スクリーンショット-2014-12-02-8.36.25.jpg](https://qiita-image-store.s3.amazonaws.com/0/4529/ddea85f1-9f77-9dc7-1d65-63fba660d44d.jpeg "スクリーンショット-2014-12-02-8.36.25.jpg")

## まとめ

他にもまだまだ知らない機能がRubyMineには隠されています。
RubyMineマスターを目指して使いこなしていきたい所存です。
【ロボット】Pepperの実機プログラミングができる！秋葉原の体験スペース「アルデバラン・アトリエ」【SoftBank】

##ソフトバンクのパーソナルロボット「Pepper」
　ちょうど１ヶ月ほど前になります、2014年11月月初。ソフトバンクから来年2月に一般発売が予定されているヒューマノイドロボット「Pepper」の開発者先行販売分が届いたという喜びの報告が、続々とTLを飾りました。
###マジで来ちゃったよ
![スクリーンショット 2014-12-01 20.09.27.png](https://qiita-image-store.s3.amazonaws.com/0/5420/848fbadc-0f3e-57f3-014b-3e11028d4b62.png "スクリーンショット 2014-12-01 20.09.27.png")
###理想と現実
![スクリーンショット 2014-12-01 20.10.09.png](https://qiita-image-store.s3.amazonaws.com/0/5420/08eb9c71-39b6-6c42-78b5-f4e79407b65d.png "スクリーンショット 2014-12-01 20.10.09.png")
###私に届いたメール
![スクリーンショット 2014-12-01 19.32.34.png](https://qiita-image-store.s3.amazonaws.com/0/5420/c93eec6a-7cf7-6176-7a98-fcd3b382b476.png "スクリーンショット 2014-12-01 19.32.34.png")
###どうもこんにちは
このたびの抽選を見事に逃しました、しっとマスクことおでんと申します。


どうにか触れないものかと探してみると、Pepperの実機に接続してプログラミングが体験できる施設が秋葉原にあるとのことです。
いましばらくお待ちできなかったので、早速行ってきました。

##アルデバラン・アトリエ秋葉原 with SoftBank
###なんかPepperがいっぱいいた！
![IMG_0.jpg](https://qiita-image-store.s3.amazonaws.com/0/5420/ae29053d-b142-4460-b306-dbf543af9c9b.jpeg "IMG_0.jpg")

###イベント
Pepperと実際に出会えるスペースはいくつかありますが、この秋葉原のアトリエでは、実際にPepperの実機にWi-Fiで接続して、Choregrapheという開発環境を使ったプログラミングを体験できます。

[営業時間](http://www.aldebaran.com/ja/a-world/aldebaran-atelier/aldebaran-atelier-akihabara-with-softbank "営業時間")内のイベントがない時間帯に出向けば自由に触れるということですが、ぼくは開発体験ワークショップの予約をしてから出向きました。

[アルデバラン・アトリエ秋葉原 with SoftBank](http://pepper.doorkeeper.jp/events)

###みなさんもぜひ！
特に、抽選に応募して「お待ちください」メールが届いた方々！
別に待たなくても秋葉原まで出向けば、実際に動かせます！
一般販売が始まる２月まで、ここで乗り切りましょう！
[Android] BitmapFactory.Optionsでwidthとheightが逆？と思ったら


## widthとheightが逆？

以下の様なコードでwidth、heightを取得したら
どう見ても縦長の画像なのにwidthのほうが大きい。。。


```java:
BitmapFactory.Options options = new BitmapFactory.Options();
BitmapFactory.decodeFile(imagePath, options);

int width = options.outWidth;
int height = options.outHeight;
```

## 結果

色々調べた結果、この画像のExifには”向きは90°回転だよ”って情報が入ってました。


```java:

try {
    ExifInterface ex = new ExifInterface(imagePath);
    // orienatation定義
    // 1	そのまま
    // 2	上下反転(上下鏡像?)
    // 3	180度回転
    // 4	左右反転
    // 5	上下反転、時計周りに270度回転
    // 6	時計周りに90度回転
    // 7	上下反転、時計周りに90度回転
    // 8	時計周りに270度回転
    String orientation = ex.getAttribute(ExifInterface.TAG_ORIENTATION);
     // →orientationが6だった

} catch (IOException e) {
}
```
なるほど、この場合、BitmapFactoryでは回転前の縦横長さが返ってきてたようですね。
swiftでpresence()っぽい何か

# やりたいこと
swiftで、「textが入ってたらその値を使うけど、入ってなかったらデフォルト値を使う」という処理を書いていた。

``` swift
var text1 = myTextField.text.isEmpty ? "default" : myTextField.text
```

最近、とにかく変数の名前が長いので（とても良くない）、2回も同じ変数名が出現すると辛い。

# presence()
そういえばRailsにはpresenceというメソッドがあったなぁ、と思った。
http://apidock.com/rails/Object/presence
これで逃げてみよう。

# swiftで書いてみる
nilであれば右の値を返す、というNil Coalescing Operatorがある。

```swift
var hoge = nil ?? "not blank" // => "not blank"
```

なので、空文字であれば、nilにしてしまうメソッドを作れば良さそう。
以下のようなextensionを書く。

```swift
extension String {
  func presence() -> String? {
    return self.isEmpty ? nil : self
  }
}
```

使ってみた。

```swift
var foo = ""

// 以下2つは同じ
foo.isEmpty ? "blank" : foo // => "blank"
foo.presence() ?? "blank" // => "blank"

foo = "not blank"
foo.isEmpty ? "blank" : foo // => "not blank"
foo.presence() ?? "blank" // => "not blank"
```

うん。動いてるのは動いてる。

だけど、これだと変数の文字数が少ないので、何が嬉しいか全くわからない。文字数の多いやつでやってみる。

```swift
var text1:String = myTextFieldInHogeHoge.text.isEmpty ? "default" : myTextFieldInHogeHoge.text
var text2:String = myTextFieldInHogeHoge.text.presence() ?? "default"
```

若干見やすい。

# 感想
こういうちょっとしたやつって、どこかにあると思うんだが、どういうワードでググれば良いか分からなかった。
1分ぐらい調べて、書いたほうがはえーよと思ってブラウザをそっと閉じた。

…のだけど、そのうち最初の「やりたいこと」に書いた処理自体がなくなったので、そもそも書く必要はなかった（なので、ここで労働時間を供養）。
Xcodeのテンプレートファイルにマシンのユーザ名が入らないようにする

# 方針

テンプレートファイルから名前部分を消します。

# 手順

下記2箇所のディレクトリに対して後述の手順を行います。

- `/Applications/Xcode.app/Contents/Developer/Library/Xcode/Templates`
- `/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Templates`

他にもあるかもしれないので、下記コマンドで探すと良いと思います。

```bash
grep -rns "___FULLUSERNAME___" /
```

以下手順です。

```bash
# ディレクトリに移動します。
cd /Applications/Xcode.app/Contents/Developer/Library/Xcode/Templates

# オーナーがroot:wheelになっているので奪います。
# omochiの部分は自分のユーザ名にします。
sudo chown -R omochi .

# リポジトリ化してバックアップを取ります。
git init
git add -A
git commit

# sedでエラーが出ないようにします。
export LANG=C

# 一括置換します。
git ls-files -z | xargs -0 -n1 sed -i "" -e 's/Created by ___FULLUSERNAME___ on ___DATE___\.//'

# 変更結果を確認します。
git status
git diff

# 問題なければコミットしておきます。
git add -A
git commit
```

# 修正するとき

確認した結果を取り消したい時は下記ですね。

```bash
git reset
git checkout -- .
git clean -fdx
```

# 免責

これによってXcodeが壊れても責任は取れないので自己責任でお願いします。
JavaScript Audio()で効果音をランダムに鳴らす

Audio()コンストラクタを使えば、JavaScriptのみで音を鳴らせると聞いて、
サンプルを書いた。

```
var button = document.getElementById('button'),
    audioArr = [
      'audio/sample01.mp3',
      'audio/sample02.mp3',
      'audio/sample03.mp3',
      'audio/sample04.mp3'
    ];

var playAudio = function() {
  var audio = new Audio(),
      num = Math.floor(Math.random() * audioArr.length);

  if (num == audioArr.length) {
    num = audioArr.length - 1;
  }
  audio.src = audioArr[num];
  audio.play();
}

button.addEventListener('click', function() {
  playAudio();
}, false);
```
やっぱりCakePHP Advent Calendar がやりたいです

こんにちは @k1LoW です。

やっぱり [Advent Calendarのリスト](http://qiita.com/advent-calendar/2014)にCakePHPがないのは寂しいので、今更CakePHP Advent Calendarをはじめてみようと思います（いいですよね？）。

## 「最新」のCakePHP事情

CakePHP3のstableがそろそろ！そろそろ！リリースされそうですね。[もくもく会も活発に開催されているようです](http://coedo-cakephp.doorkeeper.jp/)。

新機能の紹介などは、是非、知っている人にAdvent Calendar に参加して書いてもらいたいですが、「もし11月にリリースだったらAdvent Calendarはフィーバーしていただろうな。。。」と思わずにはいられません。惜しい！！！

## 「最近」のCakePHP事情

以下のGoogleトレンドをご覧ください。

![スクリーンショット 2014-12-01 19.45.15.png](https://qiita-image-store.s3.amazonaws.com/0/808/8356008e-8ae1-e761-ead7-0a7c60d46be1.png)

Laravelすごいですね。

CakePHPはもうオワコンなのでしょうか？

個人的な観測範囲ではそんなことはなく、自分が知っているだけでも様々な事例があったりするのですが、確かに「新しい情報」が少なくなったなーと思います。

弊社Fusic社内を例に取ると、CakePHP2は完全に「枯れた技術入り」しています。安定安心で使っています。ちょっと飽きました。

そりゃあ2007年からCakePHPを使っていれば、そうなります。

「ブログエントリを書くまでもないかー」となることも多々あります。

## 「どの情報が今でも現役なのか」問題

2010年〜2012年などは、毎日が新発見だったような気がします（美化

当時のCakePHPに関するブログエントリは検索で多く見つかるのですが、「今、いったいどれが現役の情報なのか？」は、ぱっと見わかりません。

せっかく作ったCakePHP Pluginも、1回エントリを書いたら満足してしまいますからね（そこからバージョンアップやメンテがされていて、さらに大規模案件で使われていても）。

新人が入ってきた時に一番困ります（書籍には素晴らしい本があるので問題ないのですが。。。）

## というわけで

とりあえず自分は、肩ひじ張らずに「この情報は現役だよー。」とか「このプラグインは今でもメンテされているよー」とかを、ちまちま紹介していこうかと思います。

「参加してもなー」と思っている皆さんも「CakePHP◯◯」な書籍に参加している皆さんも、書くことが思いつかなかったら過去の情報の `modified` を更新するために書いてくれるといいなーと思っています。

「はじめてのCakePHP」とかも見てみたい！

...

どうせギリギリにはじまったんです。

気軽に参加してください（[特に自分の昨日のツイートに反応した人](https://twitter.com/k1LoW/status/538998168260599808)）。
imgとimgの間の余白を消す。

例えば、こんな感じに画像を表示したい場合、

![スクリーンショット 2014-12-01 19.06.17.png](https://qiita-image-store.s3.amazonaws.com/0/34634/5de3ee0e-a27d-0477-3a5d-43c1bd159d4e.png)

```html
<img src="img/1.png">
<img src="img/2.png">
<img src="img/3.png">
<br>
<img src="img/3.png">
<img src="img/1.png">
<img src="img/2.png">
```

こんな風に記述すると、こうなる。

![スクリーンショット 2014-12-01 19.29.38.png](https://qiita-image-store.s3.amazonaws.com/0/34634/d58f90e3-44be-6dce-9299-01bd412f7b51.png)

marginやpaddingを0にしても消えない。
これは、改行が隙間を作ってしまっているので、

```html
<img src="img/1.png"><img src="img/2.png"><img src="img/3.png"><br>
<img src="img/3.png"><img src="img/1.png"><img src="img/2.png">
```

こうすれば解消する。
それでも、こんな風に隙間が空いてしまう場合は、

![スクリーンショット 2014-12-01 19.12.44.png](https://qiita-image-store.s3.amazonaws.com/0/34634/4b9483b9-fd68-3c70-7161-daf022c9e4c8.png)

```html
<div>
<img src="img/1.png"><img src="img/2.png"><img src="img/3.png"><br>
<img src="img/3.png"><img src="img/1.png"><img src="img/2.png">
</div>

<style>
div{
	line-height: 0;
}
</style>
```

こうする。
もしくはこれでも可。

```html
<div><img src="img/1.png"><img src="img/2.png"><img src="img/3.png"></div>
<div><img src="img/3.png"><img src="img/1.png"><img src="img/2.png"></div>

<style>
div{
	line-height: 0;
}
</style>
```
CentOS5.4にJenkinsをyumでインストール

## 環境
OS : CentOS release 5.4 (Final)

## リポジトリ情報の登録

`$ sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo`
`$ sudo rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key`
→ http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key: インポート読み込みに失敗しました(-1)
とかエラーが出る場合、
一旦落としてから。
`$ wget http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key`
やると
`$ sudo rpm --import jenkins-ci.org.key`
うまくいくかも

## Jenkinsインストール
`$ sudo yum install jenkins`

```
Loaded plugins: fastestmirror, priorities
Loading mirror speeds from cached hostfile
 * addons: centos.mirror.secureax.com
 * base: centos.mirror.secureax.com
 * extras: centos.mirror.secureax.com
 * rpmforge: archive.cs.uu.nl
 * updates: ftp.iij.ad.jp
117 packages excluded due to repository priority protections
Setting up Install Process
Resolving Dependencies
--> Running transaction check
---> Package jenkins.noarch 0:1.592-1.1 set to be updated
--> Finished Dependency Resolution

Dependencies Resolved

====================================================================================================
 Package                Arch                  Version                  Repository              Size
====================================================================================================
Installing:
 jenkins                noarch                1.592-1.1                jenkins                 59 M

Transaction Summary
====================================================================================================
Install      1 Package(s)
Update       0 Package(s)
Remove       0 Package(s)

Total size: 59 M
Is this ok [y/N]: y
Downloading Packages:
Running rpm_check_debug
Running Transaction Test
Finished Transaction Test
Transaction Test Succeeded
Running Transaction
  Installing     : jenkins                                                                      1/1

Installed:
  jenkins.noarch 0:1.592-1.1

Complete!
```

## Jenkins設定変更
`$ sudo vi /etc/sysconfig/jenkins`

```
# ポート変更
JENKINS_PORT="8090"
JENKINS_AJP_PORT="8010"

# URLを{myserver}:8090/jenkinsで接続出来るようにする
JENKINS_ARGS="--prefix=/jenkins"
```

## Jenkinsのサービスを起動
`$ sudo service jenkins start`
or
`$ sudo /etc/init.d/jenkins start`

## 起動確認
http://{myserver}:8090/jenkins/

## Jenkinsの常駐化
`$ sudo chkconfig jenkins on`

## 常駐化確認
`$ sudo chkconfig --list | grep jenkins`


# Jenkinsの構成

|name|path|
|-----------|------------|
| 本体 | /var/lib/jenkins |
| 設定ファイル | /etc/sysconfig/jenkins |
|起動スクリプト | /etc/init.d/jenkins |
|ログ|/var/log/jenkins|



# 参考リンク
[Jenkins本家](http://jenkins-ci.org/)
【ShellScript】ShellScriptで絶対パスからディレクトリ、名前、拡張子に分離して変数に保存する方法

#簡潔に

以下をコピペして使う

```bash:echo_split_filepath.sh
# $1にフルパスが入る
FULLPATH="$1"
NAME_WITH_EXTENSION=`basename "$1"`
EXTENSION=${NAME_WITH_EXTENSION##*.}
NAME_ONLY=`basename "$NAME_WITH_EXTENSION" ".$EXTENSION"`

echo ""
echo "FULLPATH = $FULLPATH"
echo "NAME_WITH_EXTENSION = $NAME_WITH_EXTENSION"
echo "EXTENSION = $EXTENSION"
echo "NAME_ONLY = $NAME_ONLY"
echo ""
```

実際のテスト出力

```bash:command_line
$ echo_split_filepath.sh "aaa/bbb/ccc.png"

FULLPATH = aaa/bbb/ccc.png
NAME_WITH_EXTENSION = ccc.png
EXTENSION = png
NAME_ONLY = ccc
```
oh-my-zsh の osx プラグインを使ってみよう

oh-my-zsh に osx というプラグインがあるのですが、なんでしょうコレ。
調べてみると、お茶目な機能があったので共有します。

oh-my-zsh https://github.com/robbyrussell/oh-my-zsh を導入した後、.zshrc でプラグインを設定します。

```zsh:.zshrc
plugins=(osx)
```

## タブ操作系

新しいタブを開きます。
ショートカットがあれば事足りるような気もしますが

```
$ tab
```

さらに iTerm2 のみ、タブを分割したりできます

```
$ split_tab  #上下に分割
$ vsplit_tab #左右に分割
```

## Finder 連携

```
$ cdf
$ pushdf
```

cd, pushd に f をつけて、Finder で開いているディレクトリに移動ができます。

```
$ pfd
/Applications/
```

print finder directory でしょうか、Finder で開いているディレクトリを表示します。

```
$ pfs
/Applications/Atom.app/
/Applications/FaceTime.app/
/Applications/Firefox.app/
```

Finder で選択中のファイルなどを表示します。複数選択しているとこのようになります。

## iTunes 連携

```
$ itunes launch|play|pause|stop|rewind|resume|quit
```

iTunes を操作できるようです。
マクロや自作コマンドラインツールと合わせて使うと楽しいかも知れません。
NSPredicate メモ


複数条件適用する記法の備忘録

```Objective-C
NSMutableArray *predicateArray = [@[] mutableCopy];

[predicateArray addObject:[NSPredicate predicateWithFormat:@"id != %@", @"hoge"]];
[predicateArray addObject:[NSPredicate predicateWithFormat:@"id != %@", @"fuga"]];

NSPredicate* predicate = [NSCompoundPredicate andPredicateWithSubpredicates:predicateArray];

[target filteredArrayUsingPredicate:predicate];
```

`orPredicateWithSubpredicates` `notPredicateWithSubpredicate` もある。
Rakeを使ってCapybaraのドライバを切り替える

# 目標

- RakeでCapybaraのドライバを切り替えられるようにする
- でもRake使わなくてもOKな状態にもする

# 環境
- Ruby-2.1.4

- Rake-10.4.0
- RSpec-3.1.4
- Capybara-2.4.4
- Poltergeist-1.5.1

なおRails依存はない環境である。
またライブラリはBundlerを使ってインストールしています。

# ファイル

```rb:Rakefile
require 'rspec/core/rake_task'

namespace :mytest do
  begin
    [:selenium, :poltergeist].each do |target|
      RSpec::Core::RakeTask.new(target) do |spec|
        ENV['TARGET']   = target.to_s
        spec.pattern    = 'spec/**/*_spec.rb'
        spec.rspec_opts = ['-c', '-f d']
      end
    end
  rescue LoadError => e
    exit
  end

end

task :default => "mytest:selenium"
```

```rb:spec/spec_helper.rb
require 'rubygems'
require 'bundler/setup'
require 'rspec'
require 'capybara'
require 'capybara/rspec'

RSpec.configure do |config|

end

if (ENV['TARGET'].nil? || ENV['TARGET'] != 'poltergeist')
  Capybara.default_driver = :selenium
else
  require 'capybara/poltergeist'
  Capybara.default_driver    = :poltergeist
  Capybara.javascript_driver = :poltergeist
end
```

# 実行するとき

## Rakeで実行する場合

```bash
# Seleniumで実行
bundle exec rake
bundle exec rake mytest:selenium

# Poltergeistで実行
bundle exec rake mytest:poltergeist
```

## RSpec単体で実行する場合

```bash
# Seleniumで実行
bundle exec rspec
TARGET=selenium bundle exec rspec

# Poltergeistで実行
TARGET=poltergeist bundle exec rspec
```
テンプレートテンプレートパラメータ

テンプレートテンプレートという言葉に馴染みがない方もいらっしゃるかと思います。
テンプレートとは、よくご存知のように

```cpp
template< class Type >
struct something;
```

こういうもので、`Type`には基本的にどんな型でも入れることができます。
しかしTypeに入れることができない型があります。
それが、テンプレート引数が埋まっていない不完全な型です。
例えば、上記の構造体のテンプレートパラメータに、
`something< std::vector< int > >`　と入れることはできても、
`something< std::vector >`　と入れることはできません。
そうなると、somethingがこういう定義を持ちたい場合はどうでしょうか。

```cpp
template< class Type >
struct something
{
  Type< int > container;
}:
```

このsomethingはコンテナを包含するもので、このコンテナがlistだったりvectorだったりをテンプレートパラメータで指定したい・・・となると大変困る事がわかります。
そこで使われるのが、テンプレートテンプレートで、何も難しいことはありません。

```cpp
template<
  template< class, class > class Type >
struct something
{
  Type< int, std::allocator < int > > container;
};
```

Typeは、テンプレート引数を２つ取る何らかの型、という意味です。
std::vectorやstd::listは実はアロケータを引数に取るので、テンプレート引数は２つです。
基本形はこの通りです。

```
template<
  template< class > class Type >
struct somthing;
```

Typeの直前の`class`キーワードを忘れがちですので注意しましょう。

蛇足ですが、だったら、テンプレートテンプレートテンプレートパラメータも……あります。

```cpp
template< 
  template<
    template< class > class
   > class Type >
struct something;
```

テンプレート引数を１つ取る何らかの型をテンプレート引数に１つ取る何らかの型をテンプレート引数に取る構造体です。わたしもこんがらがってきました。
ここまで来ると使う機会は来ないでしょう。
getUserMedia()で、カメラと透過マスク

序盤なので軽いところから。
WebRTCの入り口として、getUserMedia()でカメラやマイクにアクセスするところから始めると楽しいですよね。
クリスマスにかこつけて、ツリー型の透過マスク(PNG)を使ってみました。

ツリーの周囲が抜けているものや、
![green_tree_trans.png](https://qiita-image-store.s3.amazonaws.com/0/19403/a6bc320f-8602-f3d4-fe2d-0c2a5d1c2169.png)
こんな風にツリー型に抜けているフレームを用意します。
![blueframe_tree_trans.png](https://qiita-image-store.s3.amazonaws.com/0/19403/492c74a7-3bf1-c00a-0e01-04a1fd127851.png)


これを使って、ビデオタグに -webkit-mask を使ってマスクします。(webkitの場合)

```html:
<video id="tree_mask_video" autoplay="1" style="width:320px; height:240px; -webkit-mask: url('http://sammple.com/green_tree_trans.png');"></video>
<video id="frame_mask_video" autoplay="1" style="width:320px; height:240px; -webkit-mask: url('https://sammple.com/blueframe_tree_trans.png');"></video>
```

あとはいつものように、getUserMedia()からビデオストリームを取得します。

```js:
 function startVideo() {
  navigator.webkitGetUserMedia({video: true, audio:false} ,
    function(stream) { // success
      document.getElementById('tree_mask_video').src = window.webkitURL.createObjectURL(stream);
      document.getElementById('frame_mask_video').src = window.webkitURL.createObjectURL(stream);
   },
   function(err) { // error
    console.log(err);
   }
  );
 }
```

いつもの自分カメラが、ちょっとクリスマスっぽくなりました。（そんだけです）
動作サンプル(Chrome用)はこちら [https://lab.infocom.co.jp/demo/webrtc-mask-video.html](https://lab.infocom.co.jp/demo/webrtc-mask-video.html) で見れます。

![tree_mask_demo.png](https://qiita-image-store.s3.amazonaws.com/0/19403/a3fe4a9b-6e13-a02c-fd8d-ef6ed05fab3f.png)

WebRTC/getUserMedia()はそれ単独でなく、CSS3と組み合わせてフィルターや変形、回転など、印象的な見せ方ができそうですね。
MacにTexをインストール


仕方ないのでbrewで試すことにした。以下のサイトを参考にコマンドを打っていった。

http://sakueji.com/mactex-reinstall/

まずはbrewをアップデートして、ghostscriptとimagemagickをインストール。

$ brew update
$ brew install ghostscript
$ brew install imagemagick

最近はcaskというのがあるらしいので、それをつかうと外部のパッケージをインストールできるらしい。

$ brew tap phinze/cask
$ brew install brew-cask
$ brew cask install mactex

パスが通っていないのでパスをついかする。bashなら.bash_profileあたりに入れた方が便利そう。

$ export PATH=/usr/texbin:$PATH

MacTexのアップデート

$ sudo tlmgr update --self --all

ヒラギノフォント

$ sudo ln -fs "/Library/Fonts/ヒラギノ明朝 Pro W3.otf" ./HiraMinPro-W3.otf
$ sudo ln -fs "/Library/Fonts/ヒラギノ明朝 Pro W6.otf" ./HiraMinPro-W6.otf
$ sudo ln -fs "/Library/Fonts/ヒラギノ丸ゴ Pro W4.otf" ./HiraMaruPro-W4.otf
$ sudo ln -fs "/Library/Fonts/ヒラギノ角ゴ Pro W3.otf" ./HiraKakuPro-W3.otf
$ sudo ln -fs "/Library/Fonts/ヒラギノ角ゴ Pro W6.otf" ./HiraKakuPro-W6.otf
$ sudo ln -fs "/Library/Fonts/ヒラギノ角ゴ Std W8.otf" ./HiraKakuStd-W8.otf
$ sudo mktexlsr

PDFにフォントを埋め込む

$ sudo updmap-sys --setoption kanjiEmbed hiragino

設定の確認

$ kanji-config-updmap-sys status
【Swift】UITableView上のカスタムボタンにタグ付け


アプリ開発を始めて，ついでにQiita初投稿．

TableViewのアクセサリーボタンにタグ付け成功．
1000の位はセクション，1の位はセルの行を表しています．

```TestTableView.swift

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    var _myTableView: UITableView!
    let SECTION_NAME = ["Clip", "History"]
    var _clipItemArray = ["iOS8", "iOS7", "iOS6", "iOS5", "iOS4"]
    var _historyItemArray = ["5.x", "4.x", "2.x", "1.x"]

//略

    // セルの内容
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath) as UITableViewCell
        let button = UIButton(frame: CGRectMake(0, 0, BUTTON_SIZE, BUTTON_SIZE))
        button.setImage(UIImage(named: "Icon180.png"), forState: .Normal)
        button.addTarget(self, action: "tmpButtonTouch:", forControlEvents: UIControlEvents.TouchUpInside)
        button.tag = indexPath.section*1000+indexPath.row
        cell.accessoryView = button
        if indexPath.section == 0 {
            cell.textLabel!.text = "\(_recordItemArray[indexPath.row])"
        } else if indexPath.section == 1 {
            cell.textLabel!.text = "\(_historyItemArray[indexPath.row])"
        }
        return cell
    }
    
    func tmpButtonTouch(sender: UIButton!) {
        var button: UIButton = sender
        println("button.tag: \(button.tag)")
    }
```

>http://lab.dolice.net/blog/2013/03/21/objc-button-args/
NetbeansでSass自動コンパイル

以前ブログで書いたのをQiitaに移してます。

Netbeansのバージョンは8.0でWindowsです。

前まではSassの自動コンパイルにGUIのKoala（コアラ）を使ってましたが、私は下請けでプログラムだけ依頼されたりする関係でサイトが２０サイト以上登録されてるので、コアラの左側がとんでもない事になってたり、そもそも立ち上げ忘れたりで面倒になってたので、Netbeansで自動コンパイルする方が楽だなと思いまして今回の話になりました。

まずはSassをインストールします。
単純にRubyをインストールしてgemでsassとcompassをインストールして下さい。
（ここは検索して下さい。何も問題なく出てきますので）

でここからNetbeansの設定
ツール→オプション→その他→CSSプリプロセッサ
Netbeans8.0だと先にRubyでsassをインストールすると勝手にパスが入ってるはずです。

![201409020902327d3.jpg](https://qiita-image-store.s3.amazonaws.com/0/12930/0f589e71-e225-777c-812b-833a9deb51f0.jpeg)

こんな感じですね。（Sassパスの部分を設定してあります。）

ここまではNetbeans全体としての設定。

次にプロジェクトの設定をします。

ちょっと「プロジェクト」について
NetbeansをJavaとかのプログラム制作で使ってるような人は違和感なくわかると思いますがサイト制作ツールとして使ってる人のために一応書くと、プロジェクトは複数のサイトやプログラムを作る際の１つの単位だと思って下さい。
「A」と言うサイトには「A」（名前は自由につけられますが）というプロジェクトを作成します。
で別に「B」というサイトを立ち上げる事になったら「B」と言うプロジェクトを別で作って一つの塊として管理するんだと思ってもらえれば良いかなと思います。

結構一つのサイトしかやらない方が「プロジェクト」って言われて固まってるのを見た事があったので（笑

さて本題に戻ってプロジェクトの設定です。
左「プロジェクト」画面から、
プロジェクト名を右クリック→構成の設定→カスタマイズ
で「プロジェクト・プロパティ」の画面が立ち上がります。
で「CSSプリプロセッサ」を選択します。

![20140902_0909.jpg](https://qiita-image-store.s3.amazonaws.com/0/12930/411083d3-ecc1-8b00-c3e8-abbc681ae0e0.jpeg)

そして「保存時にSassファイルをコンパイル」にチェックを入れます。
ほとんどの人はCompassを使うと思いますので下の「コンパイラ・オプション」に「--compass」を入力します。

これで準備は完了ですが、ここからを解説してる記事が意外と少ないので少し書いておきます。

「ウォッチ」の欄はウォッチ・・要するに監視するフォルダだと思えば良いかと。
入力に「/scss」が、出力に「/css」が入ってる場合は
「scssフォルダに入ってるscssファイルをコンパイルしてcssフォルダに出力」
って言う意味です。
で下の方に「Webサイトのルートへの相対ディレクトリURLを使用して下さい」って書いてあります。
私なんかがそうですが、レンタルサーバに合わせて（さくらのレンタルサーバが多いです）あるので、

![20140902_0916.jpg](https://qiita-image-store.s3.amazonaws.com/0/12930/42776b95-916a-df79-5ffe-edd5cc84197c.jpeg)

こんな感じに「www」フォルダからプロジェクトに入ってます。
例えばwwwフォルダ外にpearをインストールとかcakeをインストールとかはよくある話だと思います。
（直接WEBからアクセスとかされない為ですね）

その時にこのままだと相対パスが違うのでコンパイルしてくれない訳です。

その場合は先ほどの「プロジェクトプロパティ」ウィンドウの左から「ソース」（一番上のはずです）を選択
「Webルート」に「www」を入れてやるとそのフォルダをWebルートとして認識してくれます。

ですので先ほどのフォルダ構成を認識してくれるようになりますよって言うお話です。

スクショでは設定済みなので「scss」フォルダの「main.scss」を入れて、編集してから保存すると自動でコンパイルして「css」フォルダに「main.css」としてコンパイルされているのがわかると思います。
この場合の「main.css.map」は自動生成され、おそらくscssファイルとcssファイルとの対応が書かれていて、Chrome等でCSSをデバッグ？する際にscssファイルのどこに記述があるとかを表示してくれます。

参考になる人がいれば幸いですし、こうする方が良いよとか突っ込んでもらえるとありがたいです。
nginxでキャッシュを無効化するサイトを作る

やりたいこと
・Webサイトをデバッグするときとかにキャッシュを無効化したい
  - css、html、jsを更新した時にキャッシュが有効だと厄介
  - スマホのブラウザではキャッシュの消去がめんどくさい
  - Cache-Control:no-cacheはわりとあてにならない
・リリース時にはキャッシュを有効化、かつ簡単に切り替えたい
  - scriptタグのsrcにバージョンに相当するクエリーを埋め込むとかいう方法もあるけど、スクリプトを更新する度にhtmlも更新しないといけないのが面倒
  - htmlを全部phpやcgiにして自動でバージョンを挿入するという方法はWebサーバのパフォーマンスが下がるので出来れば避けたい
参考
http://weboook.blog22.fc2.com/blog-entry-367.html

実現方法
・クエリーのついてないリクエストについては適当なクエリー(例えば時刻)をつけたURIにリダイレクトしてしまう

	location (デバッグしたいURI) {
		if ($is_args != "?") {		   
		   rewrite ^ $uri?v=$msec redirect;
		}
	}

この設定があるconfig(デバッグ用)とないconfig(リリース用)を用意しておけば、configを切り替えるだけで、キャッシュ有効、無効の切替が可能！

これでいいかと思いましたが。。

これだけやってもiframeはダメ
・Cache-Control:no-cacheは意味なし
・Safari、Chromeはキャッシュにヒットするとリクエストすら出さないのでリダイレクトまで行ってくれない

というわけで、iframeは今のところJavaScriptかphpでクエリーを足すしかなさそうです。。

            $('#iframe').attr('src',url + '?' + Date.now());



こんな感じでどうでしょう。

今のところ
Mobile Safari
Google Chrome
Internet Explorer
で、ちゃんとサーバーから取りに行くことを確認しました。
なぜE2D3を作ろうと思ったか？

[E2D3](http://e2d3.org)の五十嵐です．
今回は「過去＝なぜE2D3を作ろうと思ったか？」について書きます．

私の2014年はIT系コンペに挑戦しつづける１年でした．
（なぜ挑戦することになったのかは略）
E2D3に関連するコンペとしては以下の3つがあります．

1. データサイエンス・アドベンチャー杯, 2014/1
2. データジャーナリズム・ハッカソン, 2014/3
3. Office用アプリ開発コンテスト, 2014/6

---
１．[データサイエンス・アドベンチャー杯, 2014/1](http://www.sascom.jp/AAC/2014/index.html)

これは科学技術~~信仰~~振興機構が集めた論文データの面白い活用法を提案するコンペでした．ここで私のチームは企業の研究ネットワークを可視化することに決めました．

ツールとしてはチームメンバーの加藤亮さんが
A.[Neo4j](http://neo4j.com/)
B.[gephi](https://gephi.org/)を，

坂口誠一郎さんが
C. D3の[Force-Directed Graph](http://bl.ocks.org/mbostock/4062045)を提案してくれました．

これが私が初めてD3を知ったきっかけでした．加藤さんもD3に興味があったのでD3を使うことになりました．そして坂口さんと加藤さんが手を動かして作ってくれたのが以下のD3グラフです．（以前はGoogle Drive上でD3を動かせたのですが，今はなぜか動かないので画像だけ）[Slide](http://www.slideshare.net/Analytics2014/ost-analytics-presentationsheet)

![1.png](https://qiita-image-store.s3.amazonaws.com/0/60629/115075eb-43a2-c300-c8c7-7403632651a8.png)


---
２．[データジャーナリズム・ハッカソン, 2014/3](http://www.asahi.com/miraimedia/sympo/hackathon/)

これは朝日新聞の社員と協力して，データジャーナリズム作品を作るコンペでした．私はスポーツチームに属しており，サッカーW杯2014において各国の代表選手が普段はどこの国のチームに所属しているのかを可視化することになりました．

そのときの私はもうD3ファンだったので以下の3つを提案し，Aを使うことになりました．
A. http://artzub.com/d3/wbca/
B. http://www.findtheconversation.com/concept-map
C. http://bost.ocks.org/mike/miserables/

そしてチームメンバーの小泊徹彦さんがコード改変し，高見沢徳明さんが動画として仕上げて下ったのが以下です．
https://www.youtube.com/watch?v=lR14OzDNOMA&list=UUUBIgiswmUdKJpaLlqmGk2A

![2.png](https://qiita-image-store.s3.amazonaws.com/0/60629/65deb318-a1e7-d693-0a84-1812484ae893.png)

ここでラッキーだったのは，WBCAが特殊なD3グラフだったことです．つまり，多くのD3グラフにおいてデータ部分はJSON onlyなのですが，WBCAはJSON+CSVになっていたのです．ですのでここで,データがCSVになっているD3グラフはExcelからEditできる可能性に気付きました（もっと以前からD3をやっていた人は，既に気付いていたのでしょうが）．

---
３．[Office用アプリ開発コンテスト, 2014/6](http://itpro.nikkeibp.co.jp/article/MAG/20140609/562742/?ST=nsw&P=3)

その後，このコンペでOffice（Excel）アプリに取り組む機会を得ることができました．Officeは2013から，アプリとしてhtmlやJavaScriptを動かせます．そこで私は，WBCAのD3グラフを埋め込んだExcelアプリを考えました．

私の案を，チームメンバーの松島輝昌さんが実装してくださりE2D3 ver. 0.1が完成しました．

![3.png](https://qiita-image-store.s3.amazonaws.com/0/60629/93b9e65f-6925-07be-2899-5289ee4330e4.png)

---
その後E2D3はver 0.2へ進化し，Excelシート内でデータ選択ができたり，複数のグラフを選択できるようになりました．これらの設計・実装は全てE2D3 ver 0.2のチームメンバーのお陰です．大変感謝しております orz

http://e2d3.org/
【svn】コマンドのみで手っ取り早くローカルPCにsvnリポジトリ作ってバージョン管理できるとこに持ってく方法

#概要
svnを利用してローカル環境でバージョン管理したい。
gitならgit initするだけで済むのだけどsvnはとりあえずバージョン管理したいと思ってリポジトリつくってやろうとすると結構面倒くさいうえに情報が何故か殆ど無い。(一応いくらかあるけど...)

ここでは特に手っ取り早くsvnでバージョン管理できる状態に持ってく方法だけを解説する。

#流れ
1. リポジトリ作成
2. バージョン管理したいファイルをインポート
3. [2]でインポートしたやつをチェックアウト
4. 後はaddなりcommitなりstatusなりなんなり

gitを使ってると違和感あるんだけどsvnではチェックアウトしないとバージョン管理される状態にできない（これほんと？）。svn initなんてやっても.svnは作られない。

#リポジトリの作成

```bash:command
$svnadmin create repository
```

これでカレントディレクトリにrepositoryという名前のsvnリポジトリができる。
どこに作成しても良いけど今回はどうせテスト的なもので最後には削除するのだろうからカレントディレクトリに作ってしまおう。

#バージョン管理したいファイルをインポート
インポートというのはgitでいうところのgit add + git commit + git pushに近い。
リポジトリにディレクトリを突っ込む。この後チェックアウトするのに必要になる。

その前にバージョン管理したいファイルを作成する。とりあえずtrunkフォルダを作って適当にtouch testしておこう。

```bash:command
$mkdir trunk
$touch trunk/test
```

今作ったtrunkフォルダをsvn importコマンドでリポジトリに突っ込む。
ここで面倒くさいのがリポジトリのパスはURIで指定しなければならないので階層が深いところに作成するとパスの指定がだるすぎる(ようはリポジトリを相対パスで ./repository と指定できない)。
指定方法は[ file:///... ]でもいいし[ http://localhost/... ]でも良いけど前者の方がTabでディレクトリ名の補間が効くからおすすめ。

```bash:command
$svn import trunk file:///....../repository/trunk -m "適当にメッセージ書く"
```

うまくいけばこんな感じで結果が表示されるはず。

```bash:command
 -m "add trunk"
Adding         trunk/test

Committed revision 1.
```

#[2]でインポートしたやつをチェックアウト
今追加したやつをチェックアウトしなければいけない。２度でま。(何とかならない？)
とりあえず[2]で追加したtrunkフォルダは邪魔なので残念な気持ちになりながら削除しよう。

```bash:command
$rm -r -f trunk
```

んでチェックアウトする。ここでもsvnのパスがURIなので深い階層にリポジトリ置くと悔しい思いをする。


```bash:command
$svn checkout file:///....../repository/trunk
```

うまくいけばこんな感じで結果が表示されるはず。

```bash:command
A    trunk/test
Checked out revision 1.
```

後はgitと同じような操作でいける。

#実際にaddとかcommitとかやってみる

```bash:command
# 適当にtrunk/aaaを編集.
$vi trunk/test
iaaa[ESC]:wq[Enter]

# svn statusで編集状態を確認.
$svn status trunk
M       trunk/test

# svn commit で変更をコミット。gitと異なりadd -uは不要.
$svn commit trunk -m "change"

Sending        trunk/test
Transmitting file data .
Committed revision 2.

# 変更が反映されたか確認する為に削除して再度チェックアウトしてtrunk/testを表示してみる
$rm -r -f trunk
$svn checkout file:///....../repository/trunk
$cat trunk/test
aaa
```
アプリ・スマートフォンのUI,UXを勉強する時に参考にしたいサイト５選！

WEBデザイナーとして勉強していて、HTMLやCSSなどのマークアップに関する勉強と同時に課題になってくるのは、UI(User interface)とUX(User experience)。
要は「かっこ良くて、使いやすい事でしょ！」なんて、一言で片付けてしまえない奥深さと難しさがあります。
そんなUI,UXを勉強しようと思いたった時、まず見てもらいたいサイトを５つ選びました。

選んだポイントを交えて紹介しますので、是非UI,UX研究の参考にどうぞ。
<h2>①：iOS Human Interface Guidelines</h2>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/2a3efcaa5d9aafca0b673036f1a2a47f.png" alt="ios" />
「<a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1" target="_blank">iOS Human Interface Guidelines</a>」言わずと知れた、AppleのiOSに関するUI設計のポイントが書かれています。

iOS８に関しては、英語版のみで、日本語訳が公開されていませんが「iOS7」に関しては<a href="https://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobilehig/DesigningForiOS7/DesigningForiOS7.html" target="_blank">コチラ</a>で公開されていますので、ご参考にどうぞ。
　
<h2>②：Google Material Design</h2>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/materialdesign-goals-landingimage_large_mdpi.png" alt="MaterialDesign" />
「<a href="https://www.google.com/design/spec/material-design/introduction.html" target="_blank">Google Material Design</a>」今年Google先生が発表した、新しいビジュアル言語で、より良いユーザー体験を実現するための新しいテクノロジーに、どんな環境でも使える理想的なデザインを目指したとか。

サイトの中では、動画を使って良いUI、悪いUIを示してくれているので、分り易いです。
動的なコンテンツを作成したい時、動かし方の指標になると思いますので、是非！
　
<h2>③：Beautiful Pixels</h2>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/78f0c5d3a17f7f712582f1a04864a643.png" alt="Beautiful Pixels" />
「<a href="http://beautifulpixels.com/" target="_blank">Beautiful Pixels</a>」は、UIが優れているアプリを紹介しているサイトです。
このサイトの良いところは、アプリの１つ１つを確り説明してくれている点です。
topやUIのサムネだけを表示しているサイトは時々見かけますが、ビジュアルだけで見せられるよりも、UIのポイントが解説されているので、勉強になります。
アプリデザインでUIの参考が欲しい時にに覗くと良いかもしれません。
　
<h2>④：dribbble</h2>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/dribbble.jpg" alt="dribbble" />
「<a href="https://dribbble.com/" target="_blank">dribbble</a>」最早国内でも有名になりましたが、招待制のデザインポートフォリオが集まったサイトです。
こういったサイトは国外のデザイナーの作品が多く、かっこいいと思って真似したけど、日本語のコピーを載せたらイマイチ・・・汗
なんてこと、良くありますが・・・。
dribbbleは日本人のデザイナーも増えてきたようなので、日本語表記でかっこいいデザインも見ることが出来ます。
基本はdribbbleに登録している人から招待をされないと、作品を投稿出来ないという事もあり、クオリティの高い作品が集まっています。
とはいえ、dribbbleはUIについて開設している訳ではないので、アイディアで煮詰まった時に見に来て、パラパラ眺めると良いアイディアが産まれるかもしれません。
　
<h2>⑤：Pttrns</h2>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/8156255d5ce7409c844925a62497cca0.png" alt="Pttrns" />
「<a href="http://www.pttrns.com/" target="_blank">Pttrns</a>」こちらは、iOSアプリの画面を、機能毎に分類して載せているサイトです。
例えば、アプリのログイン画面のデザインだけを参考にしたい！探したい！という際は、Pttrnsのサイドバーの項目から「Logins」を選択すると、その画面デザインだけが出てきます。一言で「ログイン画面」といっても、デザインや形式、項目数の違いなど複数の種類があるので、参考になるはずです。
しかも、iPhone・iPadなど端末別での絞込検索も出来るので更に便利！！！



如何でしたでしょうか。
UI,UXの勉強だけではなく、単にアイディア参考にしたい場合や、デザインをこれから勉強したい！という場合でも参考になるサイトばかりのはずです！
iOS / Android対応のicon画像全サイズを自動作成してくれる”makeAppicon”が超便利！

アプリをリリースする際に必要な画像は沢山ありますが、何かとサイズ事のバリエーションを用意しなくてはならないのが”icon”画像。
iOSだけでも、@3xを含めると最低12種類。これに加えてAndroid用も含めると更に膨大に・・・

しかし！
そんな作業を超絶簡単、かつ神速で終わらせてくれるサービスがありました！
その名も「<a href="http://makeappicon.com/download/f702e3bda74a4fb4ae20f531fd25717e#" title="makeappicon" target="_blank">makeAppicon</a>」

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/makeappicon.png" alt="makeaooicon-top" />

使い方を説明する必要が無いほど、簡単に”icon”画像のバリエーションが作成出来ます。
「1024*1024px」サイズの”icon”画像を１つ用意して、makeappiconにドロップ＆ドラックするだけ！
たったこれだけで、iOS & Androidに必要な”icon”画像の全てを書き出してくれます！


<h2>「<a href="http://makeappicon.com/download/f702e3bda74a4fb4ae20f531fd25717e#" title="makeappicon" target="_blank">makeAppicon</a>」にアクセスしたら、トースターのイラストの上に”icon”画像をD&D!</h2>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/step_1.png" alt="step1" />

<h2>むしゃむしゃロゴが食べられるアニメーションの後・・・</h2>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/step_2.png" alt="step2" />

<h2>あっという間に１２種類の”icon”画像が！</h2>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/step_3.png" alt="step3" />


しかも！リネーム済みで書き出してくれます！
もちろん、iOSの「@3x」へも対応済み。

これでiconデザインに何度修正が入ろうとも、恐れる必要が無くなりましたね。


icon以外の＠3x画像に関しては「<a href="http://tech.eversense.co.jp/278" target="_blank">iPhone6 / 6Plus対応！申請時にも必要な＠3xに関するサイズまとめ！</a>」という記事にまとめていますので、合わせてどうぞ。
WEBサイトをPhotoshopで編集可能なデータとして保存してれるアプリ”Page Layers”が便利！

Ralf Ebertさんが作成したアプリ”Page Layers”を使うと、WEBページをPhotoshopで編集可能な状態にしてダウンロードすることが出来ます。

WEBサイトをキャプチャするサービスは、google Chromeのpluginでもリリースされていますが、この”Page Layers”はWEBサイトをキャプチャするだけではなく、Adobe Photoshopで編集可能な状態で、サイトをダウンロード出来るということ！使用している画像やテキストをPhotoshopのレイヤ形式でダウンロードしてくれます！

以下で使用方法を紹介します。


<h2>How to page Layers</h2>
<h3>STEP 1:解析したいサイトのURLを入れる</h3>
<a href="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pagelayers_step1.jpg"><img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pagelayers_step1-480x327.jpg" alt="pagelayers_step1" width="480" height="327" class="alignnone size-medium wp-image-764" /></a>
Page Layersを起動すると、ブラウザのようなウィンドウが表示されるので、上部のバーに解析したいサイトのURLを入力します。
　
　
　
<h3>STEP 2:キャプチャしたい画面サイズを指定</h3>
<a href="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pagelayers_step2.jpg"><img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pagelayers_step2-480x327.jpg" alt="pagelayers_step2" width="480" height="327" class="alignnone size-medium wp-image-762" /></a>
Page Layers側で用意したサイズ以外にも、直接Page Layersのウィンドウをドラックしてサイズを変更する事も出来ます。
　
　
　
<h3>STEP 3:保存場所を指定！</h3>
<a href="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pagelayers_step3.jpg"><img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pagelayers_step3-480x339.jpg" alt="pagelayers_step3" width="480" height="339" class="alignnone size-medium wp-image-761" /></a>
メニューの”Save as”から、保存したい場所を選んで指定します。

<a href="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pagelayers_step4.jpg"><img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pagelayers_step4-480x339.jpg" alt="pagelayers_step4" width="480" height="339" class="alignnone size-medium wp-image-760" /></a>
すると、サイトは解析され、保存されます。
　
　
　
<h3>STEP 4:Photoshopで確認！</h3>
<a href="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pagelayers_step5.jpg"><img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pagelayers_step5-480x341.jpg" alt="pagelayers_step5" width="480" height="341" class="alignnone size-medium wp-image-763" /></a>
ご覧の通り！ulタグの中身まで綺麗に階層化されて保存されています！

ちなみに、上の画像ではテキスト部分がオブジェクト化されていますが、Page Layersの設定メニューから「Generate text layers」という項目にチェックを入れると、テキストデータとしてダウンロードすることも出来ます！
　
　
　
<h2>説明動画</h2>
公式の説明動画もありますので、キャプチャでは分かりづらかった方は、動画でも確認下さい。
<iframe src="http://player.vimeo.com/video/49520123?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="660" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

超便利！！
気になるサイトを調査、参考にする場合などに活躍しそうですね。
　
　
この”<a href="http://www.pagelayers.com/" target="_blank">Page Layers</a>”は<a href="https://itunes.apple.com/us/app/page-layers/id437835477?mt=12&ls=1" target="_blank">app store</a>からダウンロード購入できます。
お値段は”$34.99”と無料とはいかないものの、WEBデザイナーなら是非自分のマシンに入れておきたいアプリの一つですね！
Swift入門 プロジェクト作成から「Hello World」まで

Swift入門ということで、Hello Worldを表示するまでを説明します。今回はXcodeの使い方などは詳しく説明しません。どういう風にプロジェクトを作ったら良いか、どこにコードを編集していくかなどを順を追って説明していこうと思います。

##①Xcodeをインストール
App Storeにいって「Xcode」と検索し、インストールをする。３GBぐらいあるので、結構時間がかかりますのでコーヒーでも飲みながら待ちましょう。

##②Xcodeを起動する。
以下の画面が起動するので、「Create a new Xcode project」を選択します。右のほうの一覧は、過去に作ったprojectの履歴です。

![alt](http://nakailand.com/wp-content/uploads/2014/10/xcodestart.png)

##③Projectを選択する
②で選択したあと、以下の画面に遷移するので「Single View Application」を選択します。このApplicationは、最低限起動に必要なファイルだけ入っている状態です。

![alt](http://nakailand.com/wp-content/uploads/2014/10/projectchoose.png)

##④Product Nameを決める
次に以下のような画面に遷移するので、Product Nameを入力します。Organization NameとOrganization Identiferはとりあえずは適当でいいです。Languageは「Swift」を選択し、Devicesは「Universal」にしておきましょう。最後に「Next」を押します。次にプロジェクトをどこに置くかを決めますが、適当にデスクトップに置いておけばよいと思います。

![alt](http://nakailand.com/wp-content/uploads/2014/10/config.png)

##⑤ViewController.swiftを選択する
④から遷移すると、以下のような画面になります。左メニューはプロジェクトのディレクトリ群になっており、いろいろなファイルが格納されています。右は、プロジェクトの設定をするところであるが、今は細かいところは気にしなくて良いです。HelloWorldディレクトリ直下のViewController.swiftをクリックし、実装画面に移ります。

![alt](http://nakailand.com/wp-content/uploads/2014/10/startscreen.png)

##⑥実装する
初めは以下のようなコードが記述されています。

![alt](http://nakailand.com/wp-content/uploads/2014/10/default1.png)

ちなみに、画面の色を変えておきましょう。「Xcode」→「Preferences」→「Fonts &amp; Colors」にいき、「Dusk」を選択すると写真のような色になります。さて、コードを一行ずつ見ていきましょう。まず、「//」はコメントを表し、ファイル名、プロジェクト名、名前、copyrightなどが書かれています。次に、「import UIKit」ですが、これはUIを作るための便利なフレームワークであり、提供される様々なクラスを利用してコードを書いていくことになります。

「class ViewController: UIViewController」は「UIViewControllerクラスを継承した、ViewControllerクラス」を表します。UIViewControllerクラスは、UIKitで提供されているクラスで、Viewを管理する役割があります。さて、Hello Worldを出す前にごちゃごちゃ説明してもしょうがないので、以下のように書いてください。

![alt](http://nakailand.com/wp-content/uploads/2014/10/Hello.png)

三行のコードが追加されました。とりあえずはこれだけで大丈夫です。「label」は変数名で、変数の前に「let」をつけていますが、これは定数を表し、一度定義をすると変更をすることができません。変更をする可能性があるならば、「var label」と定義します。UILabelはラベルを管理するクラスで、文字列を表示するために使われます。引数にはframeを与えます。frameはViewのサイズと位置を保持しています。

(frameの詳しい解説は、[[XCODE] UIViewのframeとboundsとcenterの意味を整理してみた](http://www.yoheim.net/blog.php?q=20120502))

以下のように、編集中にコード補完が出てくるので、引数を入力していきましょう。CGRectMakeで、ラベルの位置と幅、高さを設定します。今回はx,yが0で幅、高さを100としました。なお、CGRectが対象オブジェクトの位置と幅、高さを管理するクラスです。

![alt](http://nakailand.com/wp-content/uploads/2014/10/editcode.png)

次に、定義したlabelにテキストを入力するには、textプロパティに文字列を代入します。文字列はダブルクオーテーションで囲みます。そして、最後にViewに追加する作業が必要になりますが、self.view.addSubviewで自身のビューに新たなビューを追加する意味となり、引数に定義したラベルを指定します。簡単にいうと、今ある画面の上に、ラベルを乗っけるということです。

##⑦実行する
左上の右三角を押し、実行をすると以下のようなシュミレーターが起動し、「Hello World」が表示されます。

![alt](http://nakailand.com/wp-content/uploads/2014/10/helloscreen.png)

これでひとまず完了ですが、ドキュメントを見て色々プロパティを設定したり、CGRectMakeの引数の値を変えたりして、挙動を確認してみると良いと思います。

Swiftは書いていて楽しいので、是非これを機会に学んでみてはいかがでしょうか。
[CSS]文章の先頭に画像を表示する擬似クラス"before""after"要素の使い方！

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/top.png" alt="top" />

文章の先頭、見出し部分にiconとして画像を表示したい！という場合に利用出来る、擬似クラス"before""after"。
その名の通り、指定した要素の「前”before”」か「後”after”」に画像を挿入することが出来ます。

<a href="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/before_1.png"><img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/before_1.png" alt="before_1" width="315" height="65" class="alignnone size-full wp-image-777" /></a>

実際に挿入すると↑こんな感じで見えます。

<h2>HTMLサンプルコード</h2>
<pre class="lang:html decode:true ">

<p>エバーセンス開発ブログ！</p>

</pre>

<h2>CSSサンプルコード</h2>
<pre class="lang:CSS decode:true ">

p:before {
    content: url(../img/es_logo.png);
    margin: 10px;
    position: relative;
    top: 8px;
}

p:after {
    content: url(../img/es_logo.png);
    margin: 10px;
    position: relative;
    top: 8px;
}


</pre>


という感じです。簡単！
SAMPLEのCSSでは、画像の位置をテキストを合わせる為に、positionを指定して揃えています。
contentプロパティで追加した画像は、”置換インライン要素”なので、positionで調整しないとテキストのベースラインと下端が揃った状態で表示されます。

<a href="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/before_2.png"><img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/before_2.png" alt="before_2" width="319" height="65" class="alignnone size-full wp-image-776" /></a>

↑少し分かりづらいですが、画像の下端とテキストの下端が揃ってますね。

今回のSAMPLEコードの様に、positionを使用すると位置を調整できますが、relativeで調整した場合、本来表示されるていた場所に画像があると他の要素が判断しますので、お気をつけて。
（※：<a href="http://dcs-webdesign.lolipop.jp/html/182.html" target="_blank">置換インライン要素とは</a>）
　
　
　
<h2>"before""after"対応ブラウザ</h2>
・Chrome
・Safari4〜
・Firefox3.5〜
・Opera6〜
・IE8〜
　
しかし、何かと便利な"before""after"ですが、IE7以下は対応していないんですね・・・；
便利なんですが、相変わらず古いIEでは対応していない事もあるようなので、過信は禁物。
作成しているサイトが、IE7以下で表示する可能性がある方はお気をつけて！

ちなみに、<a href="http://jquery.lukelutman.com/plugins/pseudo/" target="_blank">"jQuery Pseudo Plugin"</a>という、「IE7でも”before””after”の要素を利用できるようにするスクリプト！｣という素晴らしいモノがありました！
作って頂いた方、有難う御座います。
[CSS]擬似クラス"before""after"で出来るアレコレ！

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/before_2_top1.png" alt="before_2_top" />

<a href="http://tech.eversense.co.jp/536" target="_blank">前回の投稿</a>で擬似クラス”before”と”after”について書きましたが、その後も調べていくと、"before""after"では、画像を置換する他にも、contentプロパティを使って様々な事が出来るようなので、今回はその技をご紹介します。
 
　
 
<h2>beforeとafterでつくれる、あれこれ</h2>

<h3>その①：リボン</h3>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/ribbon1.png" alt="リボン" />

可愛さを出す為に多様しがちなリボン。
自分で書こうとすると、綺麗にバランスを取って作成するのが結構難しいんですよね・・。
そんなリボンも疑似クラスの”before””after”プロパティを使うことでで簡単に作ることができます。
こちらは、livetoolsというCSSジェネレーターがあるので、そこのCSSを元に編集すればOKです。

<a href="http://livetools.uiparade.com/" target="_blank">▶Ui Parade – Live Tools</a>
　
　
　

<h3>その②：ふきだし</h3>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/fukidashi1.png" alt="ふきだし画像" />

今までは画像で設定していたであろう「ふきだし」を擬似クラスを使用する事で、CSSで再現出来ます。
「色を変えたい！」となった際に、PhotoshopやIllustratorで作成しなおさなくても、CSSからcolorを書き換えるだけで済むので、お手軽です。
しかも、上記のサンプル画像以外にも様々な形状・タイプの「ふきだし」が作成出来ます。
サンプルコードと「ふきだし」のデモは以下のサイトで見れますので、ご確認下さい。

<a href="http://nicolasgallagher.com/pure-css-speech-bubbles/demo/" target="_blank">▶Pure CSS speech bubbles By Nicolas Gallagher</a>
　
　
　
<h3>その③：パッ◯マン！</h3>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/11/pacman1.png" alt="パックマン" />

ゲーム自体はプレイしたことは無いのですが・・・。
この形は様々な場所で見けてきた印象深い形なので、デザインの中にちょっとしたアクセントとして使えるかもしれません。これもCSSで作成出来ますので、colorは好きなように変更ができます。
ちなみに、パッ◯マンだけではなく、星形などアクセント使い出来るものから、虫眼鏡などの汎用性の高い形状まで、数多くを作成することが出来ます。
以下にThe Shapes of CSというサイトのリンクを記載しますので、URL内のリンクから各種CSSをご確認下さい。
　
　
<a href="http://css-tricks.com/examples/ShapesOfCSS/" target="_blank">▶The Shapes of CSS – CSS-TRICKS</a>
　
　
　
<h2>まとめ</h2>
如何でしたでしょうか！
「ふきだし」や「リボン」などは、画像で作成するよりもデータ容量も軽いし、更新も楽なので便利ですね。
とはいえ、<a href="http://tech.eversense.co.jp/536" target="_blank">前回の記事</a>でも書きましたが、擬似クラスは古いverのブラウザでは対応していない事も多いので、利用の際はご注意下さい。
便利だと思って色々試していたのですが、多様するとCSSが大分長くなってしまうんですよね・・・・。
便利な機能とはいえ、状況に合わせて活用した方が良さそうですね。
MySQLに緯度経度を保存する際の、カラム型の選び方

## はじめに

数値を丸められること無く、記録したとおりに緯度経度情報を保存したい。
もちろん文字列型ではなく浮動小数点型を使う方が処理効率が良いですよね。
どのようなカラムを使えば意図通りに保存出来るのかまとめてみました。

## 結論

VARCHAR型やDECIMAL型を利用する手もありますが、どちらも計算コストが高いため、
基本的に`double(9,6)`を利用すれば問題ないでしょう。

## 最大値と最小値

それぞれの最小値と最大値は次の通りです。

* 緯度 (latitude) : -90 〜 90
* 経度 (longitude) : -180 〜 180

## 小数点桁数と精度の関係

どの程度の精度を求めるには、どの程度の桁数が必要となるか、まとめてみましょう。

> ざっくりと計算しますと地球の円周は約40,000,000mで
> 緯度はぐるっと360度ですから緯度1度は
> 
> 40000000/360≒111111.1111...
> 
> で約111,111mになります。
> 
> 経度緯度のDBカラムの桁数 【OKWave】
> http://okwave.jp/qa/q4506558.html

こちらを表にすると、次の通りです。5〜6桁もあれば日常のユースケースに対応出来そうですね。

| 小数点以下桁数 | 緯度        | 概算距離 | MySQLのカラム型 (緯度/lat) | MySQLのカラム型 (経度/lng) |
|----------------|-------------|----------|----------------------------|----------------------------|
| 0              | 1度         | 111km    | double(2,0)                | double(3,0)                |
| 1              | 0.1度       | 11km     | double(3,1)                | double(4,1)                |
| 2              | 0.01度      | 1111m    | double(4,2)                | double(5,2)                |
| 3              | 0.001度     | 111m     | double(5,3)                | double(6,3)                |
| 4              | 0.0001度    | 11m      | double(6,4)                | double(7,4)                |
| 5              | 0.00001度   | 1m       | double(7,5)                | double(8,5)                |
| 6              | 0.000001度  | 11cm     | double(8,6)                | double(9,6)                |
| 7              | 0.0000001度 | 1cm      | double(9,7)                | double(10,7)               |

カラムの引数は `double(桁数, 小数点以下の桁数)` という指定となっています。

## スキーマ例

緯度経度を格納するテーブルのスキーマ例は次の通りです。
ただ、緯度経度それぞれの型を共通化しておきたい場合には、大きい方の`double(9,6)`に合わせると良いでしょう。

```sql
CREATE TABLE `geo_locations` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `address` varchar(255) DEFAULT NULL,
  `lat` double(8,6) DEFAULT NULL,
  `lng` double(9,6) DEFAULT NULL
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
```

さらに空間情報インデックス(geometory index)を付与して検索する際には、次のようにスキーマをセットします。
MySQL 5.7からは対応していますが、それ以前のバージョンではInnoDBはSPATIALインデックス非対応です。<br />
そのため、MySQL 5.0/5.1/5.5/5.6環境で高速に検索できるようにする場合には、次のようにスキーマをセットする必要があります。

```sql
CREATE TABLE `geo_locations` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `address` varchar(255) DEFAULT NULL,
  `location` geometry NOT NULL, -- NOT NULLである必要があります
  PRIMARY KEY (`id`),
  SPATIAL KEY `geo_location` (`location`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
```

バージョン問わずInnoDBで緯度経度検索を高速に行う場合は、B-Treeインデックスの使えるGeoHash形式を使うと良いです。
http://d.hatena.ne.jp/hiratara/20100824/1282635611

## あわせて読みたい

* 緯度経度1度の距離 - モノノフ日記<br />
http://mononofu.hatenablog.com/entry/20090324/1237894846

* MySQL TIPS 3 空間情報(geometry)を使って経度・緯度の検索を高速化する<br />
http://d.hatena.ne.jp/IT7C/20100723/1279835242
超絶分かりやすいオブジェクト指向入門

これをAmazonでポチれ。

![IMG_3094.JPG](https://qiita-image-store.s3.amazonaws.com/0/31381/f18362e1-eeb1-ba57-cb75-380bd2c30be8.jpeg)

http://www.amazon.co.jp/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E5%8E%9F%E5%89%87%E3%83%BB%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88-Architect%E2%80%99Archive-%E3%82%AF%E3%83%A9%E3%82%B7%E3%83%83%E3%82%AF%E3%83%A2%E3%83%80%E3%83%B3%E3%83%BB%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0/dp/4798111112
プレースホルダのスタイルを変える

自分が引っかかったのでメモ。


HTML5からフォームの初期値を入れておくことができるplaceholder属性ができた。

```html
<form>
	<input type="search" name="search" placeholder="キーワードを入力">
	<input type="submit" value="検索">
</form>
```

![form_placeholder.png](https://qiita-image-store.s3.amazonaws.com/0/34634/52a74a67-29c0-3873-968f-d09e743ae849.png)


スタイルを変える場合は、以下のように記述する。

```css
::-webkit-input-placeholder{
	color: #000000;
}
::-moz-placeholder{
	color: #000000;
}
:-moz-placeholder{
	color: #000000;
}
:-ms-input-placeholder{
	color: #000000;
}
```

私がやってしまった失敗。

```css
::-webkit-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
:-ms-input-placeholder{
	color: #000000;
}
```

これでは動かないので注意。
git filter-branch を使ったコミットの一括書き換え

プッシュ済のコミットに対して一括で何らかの操作をしたい場合には、git filter-branch を使う。

以下に、ファイル一括操作 と コミット情報一括操作 について記述した。


##  ファイルの追加/削除

「全コミットから機密情報含むファイルを削除したい」場合は以下の手順でコマンド実行する。

この操作を行うことで、履歴が総書き換えされる。(→ハッシュが新しくなる)

前述の挙動の為、他メンバーが作業中の場合はローカルで保持している変更を全てプッシュしてもらう必要がある。

また、作業する際にはそれ用に別途クローンし、そこでするのがよいと思います。


### 1. filter-branchコマンド

+ ''内に各コミットに対して適用するgitコマンドを指定する。今回はファイル削除するコマンドを指定している。

+ ＜対象コミット＞には コミットを特定する記述(HEAD~ とか HEAD など..)を指定する。未指定の場合はチェックアウトブランチが対象になる。

+ 複数ブランチが対象の場合は＜対象コミット＞を変えて、複数回コマンドを実行すればよい？

```
git filter-branch -f --index-filter 'git rm ＜ファイルパス＞' ＜対象コミット＞
```


### 2. リモートにプッシュ

履歴書き換え後のチェックアウトブランチをプッシュする。

```
git push origin master -f
```


## コミットユーザー情報など

「業務用アカウントで個人開発用リポジトリにコミット・プッシュしてしまった際の修正として、一括書き換えを行う。」などの修正操作。

基本的な流れは、ファイルの追加/削除 と変わらない。


### 1. filter-branchコマンド
```
git filter-branch -f --commit-filter '
  GIT_AUTHOR_NAME="＜Author名＞"; 
  GIT_AUTHOR_EMAIL="＜メールアドレス＞"; 
  git commit-tree $@;' ＜対象コミット＞
```


### 2. リモートにプッシュ
```
git push origin master -f
```



## 全ブランチを一括操作対象とする

git filter-branchコマンドに --all オプションをつけると全ブランチに対して処理が行われる。 

http://dskd.jp/archives/46.html
正規表現を使ったマッチングに変数を使用する

正規表現による文字列のマッチングをはじめて試みたんですが、
正規表現に変数を使用するのに少し手こずったので、
やり方をメモしておきます。

単純にRegExp(正規表現オブジェクト)の存在を
いままで知らなかったというだけですが・・・

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp

```javascript
var strBase = '',
    // 検索対象となる文字列
    
    strCombRegex = '',
    // 正規表現に組み合わせたい文字列
    
    regexp = new RegExp(strCombRegex + '(.*?)', 'g'),
    // 正規表現オブジェクト ここでは正規表現も文字列で記載する
    
    matchArr = strBase.match(regexp);
    // 検索対象から正規表現にマッチするものを抽出して、返す

console.log(matchArr);
```

正規表現オブジェクトの文末(フラグ)に'g'を指定すると、
2つ目以降のマッチする箇所も抽出し、配列にして返してくれます。
逆に言えば、gを指定しないと最初にマッチした結果しか返してくれませんでした。
度をもとにラジアンを返す

最近three.jsで遊ぶことが多いんですが、
入力する角度がラジアン値のようなので、
数学に不慣れな身としてはこれがいちいちちょっとめんどくさい。

円周率や三角関数と違い
Mathにラジアン変換が用意されていなかったので
関数を使うことにしました。

以下メモ。

```
var toRadian = function(degrees) {
  return degrees * Math.PI / 180;
};
```