OmniAICreator/Qiita-1.07M huggingface dataset:
CentOS7にMariaDB10.1をインストールする方法

MariaDBの公式からリポジトリが用意されている。
URL：https://downloads.mariadb.org/mariadb/repositories/

上記URLから以下を指定。
1. Choose a Distro　→　CentOS
2. Choose a Release　→　CentOS 7 (64-bit)
3. Choose a Version　→　10.1

リポジトリファイルに記載する内容が表示されるので、コピペして「/etc/yum.repos.d/」配下にファイルを作成する。

```lang:/etc/yum.repos.d/mariadb.repo
# MariaDB 10.1 CentOS repository list - created 2016-01-06 10:34 UTC
# http://mariadb.org/mariadb/repositories/
[mariadb]
name = MariaDB
baseurl = http://yum.mariadb.org/10.1/centos7-amd64
gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB
gpgcheck=1
enabled=1
```

リポジトリファイルを作成したら、yumでインストールする。

```lang:
yum -y install MariaDB-devel MariaDB-client MariaDB-server
```
配列の中身を真偽で分ける方法

タイトルのままなんですが便利なメソッド見つけたのでメモ

パッと思いついた方法はこれ

```rb
pry(main)> arr = ["cat", 123, "mouse", 0.99, :dog]
pry(main)> numbers = arr.select { |item| item.kind_of?(Numeric) }
=> [123, 0.99]
pry(main)> non_numbers = arr.reject { |item| numbers.include?(item) }
=> ["cat", "mouse", :dog]
```

いまいちスマートじゃないのでxorでできるかなと思ったら

```rb
pry(main)> non_numbers = arr ^ numbers
NoMethodError: undefined method `^' for ["cat", 123, "mouse", 0.99, :dog]:Array
from (pry):24:in `<main>'
```

配列はダメみたいです。

で、見つけた解決策が**partition**

```rb
pry(main)> numbers, non_numbers = arr.partition { |item| item.kind_of?(Numeric) }
=> [[123, 0.99], ["cat", "mouse", :dog]]
pry(main)> numbers
=> [123, 0.99]
pry(main)> non_numbers
=> ["cat", "mouse", :dog]
```

便利

参考
http://docs.ruby-lang.org/ja/2.2.0/method/Enumerable/i/partition.html
~~http://ref.xaio.jp/ruby/classes/enumerable/partition~~（古い情報です）
【Android】ListFragmentでonListItemClickが呼ばれない時の対処法

ListFragment内でonListItemClickをオーバーライドしたのに呼ばれない場合の対処法をメモっとく。

#原因
原因は、CustomAdapterのrow内のView（TextViewなど）にフォーカスが当たっているため。
TextViewにフォーカスが当たってしまう理由の一例は、`android:inputType=""`を指定している場合など。

#対処法
rowのViewに

```.xml
android:clickable="false"
android:focusable="false"
```

を設定してあげればよい。
例えば、

```.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_row"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textMultiLine"
        android:clickable="false"
        android:focusable="false" />

</LinearLayout>

```

みたいな感じ。
もしくは`ArrayAdapter`の`getView`内で動的に設定してあげる。

```.java

   @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        if (convertView == null) {
            convertView = layoutInflater_.inflate(R.layout.list_row, null);
        }

        TextView text = (TextView)convertView.findViewById(R.id.text1);
        shopNameText.setClickable(false);
        shopNameText.setFocusable(false);

        return convertView;
    }


```

今回の場合は，
`android:inputType="textMultiLine"`
を
`android:ellipsize="end"`
に変えても解決できた．
JavaScriptにおけるプロトタイプチェーンの動作確認

[シングルページWebアプリケーション――Node.js、MongoDBを活用したJavaScript SPA](https://www.oreilly.co.jp/books/9784873116730/)の学習メモです。
プロトタイプチェーンの説明がわかりやすく、面白かったのでまとめました。

## \_\_proto\_\_ プロパティを使ってプロトタイプチェーンを手動でさかのぼる

次のサンプルを見てみましょう。

```js
var proto = {
  sentence  : 4,
  probation : 2
};

var makePrisoner = function( name, id ) {

  var prisoner = Object.create( proto );
  prisoner.name = name;
  prisoner.id = id;
  return prisoner;
};

var firstPrisoner = makePrisoner( 'joe', '12A' );

console.log( firstPrisoner );
// { name: 'joe', id: '12A' }

console.log( firstPrisoner.__proto__ );
// { sentence: 4, probation: 2 }

console.log( firstPrisoner.__proto__.__proto__);
// {}

console.log( firstPrisoner.__proto__.__proto__.__proto__ );
// null

console.log( firstPrisoner.__proto__.__proto__.__proto__.__proto__ );
// TypeError: Cannot read property '__proto__' of null
```

さかのぼった時の挙動がわかりやすく確認できました。chromeのデベロッパーツールを使うと、より視覚的に構造がわかると思います。

![スクリーンショット 2016-01-06 18.51.21.png](https://qiita-image-store.s3.amazonaws.com/0/90682/3d389f1e-27da-2cf3-c7ac-3747e9e964b0.png)

## プロトタイプの上書きと属性の削除

```js
var proto = {
  sentence  : 4,
  probation : 2
};

var makePrisoner = function( name, id ) {

  var prisoner = Object.create( proto );
  prisoner.name = name;
  prisoner.id = id;
  return prisoner;
};

var firstPrisoner = makePrisoner( 'joe', '12A' );

console.log( firstPrisoner.sentence );
console.log( firstPrisoner.__proto__.sentence );
// どちらも4

firstPrisoner.sentence = 10;
console.log( firstPrisoner.sentence );
console.log( firstPrisoner.__proto__.sentence );
// 10
// 4

delete firstPrisoner.sentence;
console.log( firstPrisoner.sentence );
console.log( firstPrisoner.__proto__.sentence );
// どちらも 4

delete firstPrisoner.__proto__.sentence;
console.log( firstPrisoner.sentence );
console.log( firstPrisoner.__proto__.sentence );
// どちらも undefined
```

いい感じにさかのぼっていっているのが確認できました。

## プロトタイプの変更

```js
var proto = {
  sentence  : 4,
  probation : 2
};

var makePrisoner = function( name, id ) {

  var prisoner = Object.create( proto );
  prisoner.name = name;
  prisoner.id = id;
  return prisoner;
};

var firstPrisoner  = makePrisoner( 'joe', '12A' );
var secondPrisoner = makePrisoner( 'sam', '2BC' );

proto.sentence = 5;
console.log( firstPrisoner.sentence );
console.log( secondPrisoner.sentence );
// どちらも 5

firstPrisoner.sentence = 4;
console.log( firstPrisoner.sentence );
console.log( secondPrisoner.sentence );
// 4
// 5
```

こういった動作をすることを知っておくことが重要らしい（そりゃそうだ）。
確かに、この振る舞いは意図しない値の変更が生じそうで怖いです。
AndroidAnnotations 4.0-SNAPSHOTで、Intent Builderを使うと、Android5.0未満の端末で「java.lang.VerifyError」が発生する

表題の通り

# エラー内容

```
01-06 18:47:56.817 7785-7785/? E/AndroidRuntime: FATAL EXCEPTION: main
                                                 java.lang.VerifyError: hoge/fuga/activities/LoginActivity_$IntentBuilder_
```

# 解決方法

以下のように、Intent Builderを使わずに実装する。

```
// XXX: Android5.0未満でエラーになる
//LoginActivity_.intent(getActivity()).start();
startActivity(new Intent(getActivity(), LoginActivity_.class));
```
Unity5.3でAndroid SDKのパス設定項目が表示されない件についての対処

Unityで作成したプロジェクトをAndroidで実行するにはUnity側でAndroid SDKのパスを設定する必要がありますが、設定画面にそれを設定する項目が表示されないという事象が発生しましたので、その対策をメモします。

#環境
- OS ： windows10
- Unityのversion：5.3.1f1

#事象
Unity Personalの「Edit」->「Preferences」->「External Tools」を開くと、Android SDKを指定する項目が表示されない。(本来はここに設定項目が表示されるはずである)

![無題.jpg](https://qiita-image-store.s3.amazonaws.com/0/102567/9b6c55e7-8b00-3ef4-0fd8-ba27df213f22.jpeg)

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/102567/c0da71ce-c660-d3af-91dd-5621d9cb5af5.png)




#対処
以下サイトで「無料ダウンロード」をクリックし、Unityを再インストールする
https://unity3d.com/jp/get-unity

続いて、インストーラーの「Choose Components」にて、
**「Android Build Support」**にチェックを入れた状態でインストールを進める

![無題5.png](https://qiita-image-store.s3.amazonaws.com/0/102567/123f31a7-3dd7-3eeb-80d4-af7546f32282.png)

#結果

以下のように、Android SDKを設定する項目が表示される。

![無題6.png](https://qiita-image-store.s3.amazonaws.com/0/102567/272b081d-9d58-cfb4-511e-517211366340.png)
Opsworks コマンドによるPermissionユーザ登録

### 1. arn　情報の作成

arnは、アカウントIDと、IAMユーザ名があれば作成できる。

以下の形でarnを作成する。
```arn:aws:iam::<アカウントID>:user/<IAMユーザ名>```

### 2. SSHキーの作成
http://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-key-pairs.html#how-to-generate-your-own-key-and-import-it-to-aws

```
$ ssh-keygen -t rsa -C "<ユーザ名>" -f ./<出力ファイル名>.pem
```
passwordを2回入力して設定する。

```
$ ssh-keygen -t rsa -C "taro" -f ./taro.pem
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in ./taro.pem.
Your public key has been saved in ./taro.pem.pub.
The key fingerprint is:
a7:79:fa:bc:4e:47:2b:df:2e:f3:4c:26:42:b1:32:c5 taro
The key's randomart image is:
+--[ RSA 2048]----+
|                 |
|         .       |
|          E      |
|         . o     |
|        S + .    |
|         B . .   |
|        o = + o  |
|         = =o*   |
|        .o=..==  |
+-----------------+
$ ls taro*
taro.pem  taro.pem.pub
```

<出力ファイル名>.pem
<出力ファイル名>.pem.pub
が作成される.

### 3. ユーザ情報更新
http://docs.aws.amazon.com/ja_jp/opsworks/latest/APIReference/API_UpdateUserProfile.html


```
aws opsworks update-user-profile \
--region us-east-1 \
--iam-user-arn arn:aws:iam::719778162096:user/taro \
--ssh-username taro \
--ssh-public-key "ssh-rsa AAaaaaaaaaaaaaaaaa4jvMC/prbbbbbbbbbbbbbbb== taro" //2で作成した<出力ファイル名>pem.pubの内容

```
Rails4: deviseの日本語化とViewのカスタマイズ

# はじめに

deviseを利用し始めた際に、デフォルトでは各メッセージやラベルが英語なので、ここでは日本語にしたいと思います。


## Railsの*default_locale*を日本語に設定

```ruby:config/application.rb
  # config.i18n.default_locale = :de
  config.i18n.default_locale = :ja
```

## メッセージ

### メッセージ用のロケールファイルの作成

- deviseのインストールの初期コマンド実行時に、*config/locales/devise.en.yml* が生成されましたが、これの日本語版(*devise.ja.yml*)を作成します。

```
$ cp devise.en.yml devise.ja.yml 
```

- enをjaにして、日本語に変更にします。     
- 日本語化対応をしている方がいますので参考にしてみてください。
http://qiita.com/MasatoYoshioka@github/items/8d910e793e7c485403bb

```yaml:devise.ja.yml
ja:
 ...
     sessions:
       #signed_in: "Signed in successfully."
       signed_in: "ログインしました。"
```

### アクセス

- 日本語になっていることを確認

![020.png](https://qiita-image-store.s3.amazonaws.com/0/92328/ff79205e-9bb9-737b-527e-a69857e2156a.png)


## ラベル
### Viewのカスタマイズ

- Viewのカスタマイズをするにあたって、`rails g devise:install`実行時の5番の対応を行います。

```
$ rails g devise:views
Running via Spring preloader in process 7679
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb
```


### Viewにベタ書きされている部分の変更

- 1行目を「Sign up」から「ユーザ登録」に変更します。

```erb:app/views/devise/registrations/new.html.erb
  1 <h2>ユーザ登録</h2>
  2 
  3 <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  4   <%= devise_error_messages! %>
```

### ラベルの変更

- *config/locales/ja.yml*を作成します。すでにある場合は追加します。

```config/locales/ja.yml
ja:
  helpers:
    label:
      user:
        email: メールアドレス
        password: パスワード
        password_confirmation: パスワード(確認)
        remember_me: パスワードを記憶
...
```

### アクセス

- 日本語になっていることを確認

![019.png](https://qiita-image-store.s3.amazonaws.com/0/92328/6a92c929-0f19-f1bd-4e7d-f69de0d7f49c.png)
書き捨てファイルを作成するtempfile Packageをリリースした


## tempfile

URL: https://atom.io/packages/tempfile

[tempfile](https://atom.io/packages/tempfile)は書き捨て用ファイルを作成するためのパッケージである。
emacsの[open-junk-file.el](http://www.emacswiki.org/emacs/open-junk-file.el)を意識して作成したが、デフォルトではテンポラリディレクトリにファイルを作成する点が異なる。

## 作成した動機

[script](https://atom.io/packages/script)と組み合わせて手元で軽く動かして試すために[try](https://atom.io/packages/try)というパッケージを利用していたが、下記の不満があった。

- ファイルタイプごとにひとつのファイルを使いまわす
- 使い捨てではなく明示的に削除しなければファイルは残ったまま

そのため、新たにパッケージを作ることにした。

## 使用方法

### 新しい書き捨てファイルを作成する

コマンドパレットから`tempfile:create`を実行すると[grammar-selector](https://atom.io/packages/grammar-selector)のようなモーダルウィンドウが開く。
ファイルタイプを指定すると予めそのファイルタイプに設定した一時ファイルを作成して開く。

### 選択したテキストを新しい書き捨てファイルに貼り付ける

貼り付けたいテキストを選択し、コマンドパレットから`tempfile:paste`を実行、またはコンテキストメニューから「Paste to tempfile」を選ぶと、選択したテキストを貼り付けた状態で新しい書き捨てファイルを作成して開く。

## テンポラリディレクトリ以外に保存したい場合

私は基本的に書き捨てファイルは保存しておかなくても良いと思っているため、テンポラリディレクトリにファイルを作成するようにしている。
もしファイルをテンポラリディレクトリ以外に保存したい場合、設定の"Save"オプションにチェックを入れ、”Directory"に保存ディレクトリを指定すると、指定したディレクトリに日時をファイル名として保存するようになる。
自動セーブではないので`Ctrl-s`等で保存しなければならない。

また、ファイルを開くたびに選択する方法は開くときの操作が億劫になりかねないので対応予定はない。
もし適時テンポラリディレクトリ以外に保存したい場合は多少面倒ではあるが都度「別名で保存」で保存していただきたい。

## 拡張子付与について

拡張子は私のAtomで`atom.grammars.grammars`を表示し、`fileTypes`プロパティの中から適当に選んで設定している。
判別は`scopeName`で行っているので、もし標準にないものに対応したかったり、標準から変更したい場合は`config.cson`で設定することができる。

```coffeescript
'tempfile-extra':
  'source\\\.perl': 'pm'
```

ドットはエスケープしなければならないことにご注意いただきたい。
JAVA ラムダ式

###関数をその場で作る
関数型インターフェース（抽象メソッドが1つだけ定義されているインターフェース）の変数に代入する箇所ではラムダ式を渡すことが出来る。

見た目上は、無名内部クラス（匿名クラス）を短く記述できる記法と言える。

<FONT color="#ff0000">■ラムダ式の構文</font>
**(型 引数名1, 型 引数名2,…) -> {
    処理1;
    処理2;
    :
    return 戻り値;
}**

※ラムダ式がJVMによって評価されると、関数の実体が生成され、
その実体を指す参照(関数オブジェクト)に化ける

▪️Lambda.java

```java
import java.util.function.*;

public class Lambda {
	public static void main(String[] args) {
		IntBinaryOperator func = (int a, int b) -> {
			return a - b;
		};
		System.out.println(func.applyAsInt(12, 7));
	}

}
```

▪️Lambda.java Execution(executed program result)
5

▪️Test85.java

```java
import java.util.function.*;

public class Test85 {
	public static void main(String[] args) {
		IntToDoubleFunction func = (int x) -> {
			return x * x * 3.14;
		};
		System.out.println(func.applyAsDouble(30));

		IntSupplier iii = () -> {
			return 2;
		};
		System.out.println(iii.getAsInt());

		IntPredicate ip = (int i) -> {
			return true;
		};
		System.out.println(ip.test(2));
	}
}
```

▪️Test85.java Execution(executed program result)
2826.0
2
true

▪️Test88.java

```java
import java.util.function.*;

public class Test88 {
	public static void main(String[] args) {
		IntBinaryOperator func = (int a, int b) -> {
			return a - b;

		};

		System.out.println(func.applyAsInt(10, 4));

	}

}
```

▪️Test88.java Execution(executed program result)
6

![スクリーンショット 2016-01-07 17.15.30.png](https://qiita-image-store.s3.amazonaws.com/0/95187/65f3f9b2-c67e-d0ae-8a83-ca381d872c87.png)

E … Element (Javaのコレクション フレームワークで多用されています)
K … Key
N … Number
T … Type
V … Value
S、U、Vなど … 2番、3番、4番目の型
CentOS7のEPEL、Remiのリポジトリ追加方法

# EPELの追加方法
EPELのリポジトリはCentOS7の標準リポジトリからインストールすることができる。

```lang:
yum install epel-release
```

# Remiの追加方法
Remiのリポジトリ設定パッケージからインストールする。
※ダウンロード元のURLは以下を参照
http://rpms.famillecollet.com/

```lang:
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
```

尚、デフォルト設定ではyumコマンドの実行時にremiのリポジトリは自動的には使用されない。
Slackで手軽に日程調整！😇

## チームで活動してると、日程調整したいときありますよね？？

そんな悩みを抱えていて検索したら、こんなやり方がありました。。。

5秒でできる！slackで簡単スケジュール調整（設定・プラグイン不要）
http://qiita.com/smd8122/items/3dc1e8b9b6446cdc095c


こちらを参考に、応用してこんなのをつくってみました。。。


![image](https://qiita-image-store.s3.amazonaws.com/0/108347/abe2adfe-4610-4c49-d4e6-162e0c37c003.png)



真っ黄色ですがそこは次回から工夫しますw



書き方は簡単。
曜日　時間の後に顔文字をつけ、
その後に自らその顔文字を押せばオッケー
プログラムのぷの字もないです。

### もっと効率化したい方は

金曜日　10-12:grinning:       13-15:grimacing:     15-17:joy:     17-19:innocent:
▲上のやつをコピペして

曜日ごとに投稿
自分で１回顔文字をアクションしておけば、他の人がクリックしやすくなります。
homesteadの導入とか

## homesteadの導入とか

[公式のページ](https://laravel.com/docs/5.2/homestead)に大体書いてある。

最新のboxを追加

```bash
$ vagrant box add laravel/homestead
```

現時点の最新はv0.4.0

```bash
$ vagrant box list | grep homestead
laravel/homestead    (virtualbox, 0.4.0)
```

これの中身がphp7なので5.6系が使いたい場合はversion違うやつもインストール
下記のバージョンはphp5.6がインストールされてるやつ

```bash
$ vagrant box add laravel/homestead --box-version 0.3.3

$ vagrant box list | grep homestead
laravel/homestead    (virtualbox, 0.3.3)
laravel/homestead    (virtualbox, 0.4.0)
```

プロジェクト毎にhomesteadを入れたいのでcomposerでプロジェクト対して直接インストール

```bash
$ composer require laravel/homestead --dev
```

設定ファイル郡を生成させるために下記コマンドを実行

```bash
$ php vendor/bin/homestead make
```

phpとかのバージョンを切り替えたいとかが特になければそのまま```vagrant up```

やりたければ、該当のboxのversionをhomestead.ymlのproviderの下にでも記述して```vagrant up```

```yaml
version: "0.3.3"
```

おわり

boxのversionが古いやつでなんか表示がおかしかったりしたらnginxのsocketが違うの指していたりするのでそこを正しいものに修正

---

## homesteadに対してmigrateしたりしたいんだけど？

homestead.ymlでport forwardingの設定を下記のように追記して

```yaml
ports:
    - send: 3306
      to: 3306
```

.envのDB_HOSTでportを指定させればいいんじゃないのかな

```
DB_HOST=localhost:3306
```

おわり
HTML5 history apiで戻るボタン無効化

ブラウザバックを無効化したい要望が発生したので、history apiを用いてみました。

# history apiの対応状況

http://caniuse.com/#search=history
↑こちら参照しました。

最近のブラウザだとほぼ対応しているので、ブラウザバック無効化したいとかあった場合は使ってもいいかもしれませんね。
※Androidだと4.0は非対応みたいです。

# ブラウザバックの無効化
[こちらの記事を参考にさせて頂きました！](http://hidari-lab.hatenablog.com/entry/2015/03/02/212818)
ものすごく簡単にできました。

```js:test.js
// 履歴にスタックしたかどうかのflag
var isHistoryPush = false;
(function() {
    if (history && history.pushState && history.state !== undefined) {
        // history イベントの監視
        window.addEventListener('popstate', function (e) {
            if (isHistoryPush) {
                alert('ブラウザでの戻るボタンは禁止されております。');
                history.pushState(null, null, null);
            }
        }, false);
    }
})();

// pushしたいタイミングで呼び出します
function pushHistory() {
    if (history && history.pushState && history.state !== undefined) {
        isHistoryPush = true;
        history.pushState(null, null, null);
    }
}
```
`history.pushState(null, null, null);`で、履歴にストックしています。

| | param | 意味 |
|:-----------|------------:|:------------:|
|第一引数     | state |オブジェクト形式で入れられます。ストックした履歴を識別したい時に入れるといいですね。|
|第二引数     | title |ページのタイトルをここで指定できます。|
|第三引数     | url|`pushState()`のイベントでURLを変更したい場合はここで指定します。null指定だと自分自身になります。|
上記コードの例だと全て`null`なので、単純に自分自身のページをストックするようになってます。

ブラウザの戻るボタンを実行すると、`popstate`のイベントが実行されます。
その中で、alertを表示。
さらに`history.pushState(null, null, null);`と自分自身をストックするようにする。
↑この部分不要だと思われますが、あるとブラウザの「進む」ボタンが無効になる。（why?）

# その他注意点
[こちらの記事](http://www.allinthemind.biz/markup/javascript/history_api_2015.html)を参考に、history apiを使う際の注意点があります。
引用させて頂いてます↓↓

> * History APIに対応していないブラウザ・端末がある
> * ファイル読み込み時に、popState（「進む」「戻る」をクリック（タップ）した際のイベント）を実行してしまうブラウザ・端末がある（想定外）
> * history.pushState（履歴を追加するメソッド） が使えても、history.state（履歴追加時にセットした情報） が使えない場合がある

という状況を踏まえて、コードに落とし込んでます。

* History APIに対応していないブラウザ・端末がある
* history.pushState（履歴を追加するメソッド） が使えても、history.state（履歴追加時にセットした情報） が使えない場合がある
こちらは以下で対応。

```
if (history && history.pushState && history.state !== undefined) {
    // 対応している場合の処理
}
```

* ファイル読み込み時に、popState（「進む」「戻る」をクリック（タップ）した際のイベント）を実行してしまうブラウザ・端末がある（想定外）  
**↑これはiOS8、9のSafariだと発生しました。**

こちらは以下で対応。

```
// グローバル変数にします。
var isHistoryPush = false;

// このメソッドが呼ばれた時、フラグをONにします。
function pushHistory() {
    // 省略・・・
    // フラグをON
    isHistoryPush = true;
}

// popstateイベントでフラグをチェック
window.addEventListener('popstate', function (e) {
    if (isHistoryPush) {
        // 処理・・・・
    }
}, false);
```

という感じで出来ました。
sassでBEM的な書き方を簡単に

最近知ったのですが、sassでBEMっぽい書き方をしたい時

```sass
// 愚直
.parent {
  .parent__child {
    .parent__child__grandson {
      text-align: center;
    }
 }
}
```

と書いてましたが、下記の方が見通しが良いですね

```sass
// スマート
.parent {
  &__child {
    &__grandson {
      text-align: center;
    }
  }
}
```

出力結果

```
.parent__child__grandson {
  text-align: center;
}
```

調べたらsass3.3から導入されたようです。
[Support for BEM modules in Sass 3.3](http://mikefowler.me/2013/10/17/support-for-bem-modules-sass-3.3/)

やばい、もう数年前の話じゃないか！

以上です。
Linuxでbootable USB diskイメージを作成する

ISO9660形式で配布されているインストーラをCDやDVDに焼かずにUSBメモリからブートするためのイメージを作成した。

ダウンロードしたISOイメージをisohybrid で変換する。Debianではsyslinux-utilsパッケージに含まれている。
```% isohybrid installer.iso```
そのままこのファイルがUSBメモリでブート可能な形式に書き換えられる。次に dd を使って書き込む
```% sudo dd if=installer.iso of=/dev/sdX```
`/dev/sdX`は適当なデバイス名(/dev/sdfとか/dev/sdgとか)を指定する。何になるかはデバイスを接続したときに
`dmesg`もしくは`syslog`の出力を見る。またGNOMEやKDEだと自動的にマウントしてしまうことがあるのでその場合は手動でデバイスを事前に`umount`する

ddの書き込みが終了すればOK。SystemRescueCDやUbuntuで動作確認あり。
Excel for Macでの編集モードのショートカットなど

|内容  |win  |mac  |
|---|---|---|
|セル編集モード  |F2  |control + u  |
|セル内の改行  |alt + enter  |option + command + enter  |
|複数セルのデータ削除  |delete  |fn + delete  |
（´-`）.｡oO（適時更新していく予定）
個人的ターミナルのショートカット

- Ctrl + a：行頭に移動
- Ctrl + e：行末に移動
- Ctrl + u：行頭まで削除する
- Ctrl + k：行末まで削除
- Ctrl + w：ワード単位で行頭方向の文字列を削除
- Ctrl + r：コマンド履歴の検索
- Ctrl + Insert：テキストのコピー
- Shift + Insert：テキストの貼り付け
appleScriptの割と使えるコード集

最近使い始めて便利だと思ったscript達です。
私はgestrと言うアプリで主にscriptを利用しています。
http://mhuusko5.com/#gestr
とても便利なのでぜひ使ってみて下さい。

safariで新しいwindowを開く

```
tell application "Safari" to activate
tell application "System Events"
	keystroke "n" using {command down}
end tell

```
safariで一番手前のwindowのURLをクリップボードにコピー

```
tell application "Safari"
	set pageURI to get URL of current tab of window 1
	set the clipboard to pageURI
end tell

```

macの音量をミュートにする

```
set volume with output muted 
get volume settings
```
ミュート解除

```
set volume without output muted 
get volume settings
```
デスクトップに新しいファイルを作る

```
tell application "Finder"
	make new folder at desktop
end tell
```
現在のwindowやtabを閉じる

```
tell application ((path to frontmost application) as Unicode text) to activate
tell application "System Events" to keystroke "w" using command down
```
現在のapplicationを終了する

```
tell application ((path to frontmost application) as Unicode text) to activate
tell application "System Events" to keystroke "q" using command down
```
PHPでCrypt Blowfishを使ったハッシュ化

# PHPパスワードをハッシュ化する
phpで用意されている強力なハッシュ化アルゴリズムを使用して、ハッシュ化を行いたいと思います。

注意
php5.6より前では、パスワードをもう一度ハッシュ化して、ハッシュ値の検証をしますが、
php5.6以降では、ハッシュ値の比較にhash_equals()関数を用います。

## Crypt Blowfish
強力なハッシュ方式

## Saltの生成
Saltはパスワードをハッシュ化する時に、毎回生成します。

```php
// $strから乱数で文字列を取得して、$saltにcryptのsaltを生成する
    $str  = array_merge(range('a', 'z'), range('0', '9'), range('A', 'Z'),array(".","/"));
    // ランダムな文字列を22文字取得
    $max  = 22;

    // Blowfishをハッシュ形式に指定、ストレッチ用のコストパラメータを指定
    $salt = "$2y$04$";

    for ($i = 1; $i <= $max; $i++) {
        $salt .= $str[rand(0, count($str)-1)];
    }
```

## Blowfish形式で暗号化

```php
    // ハッシュ化
    $hashedPassword = crypt($password, $salt);
```

## ハッシュ値の照合（php5.6より前の場合)

```php
   if(crypt($password, $hashedPassword)==$hashedPassword){
       // 照合成功
   }
```
$hashedPasswordをcrypt()関数で使用していることが、見た目上気持ち悪いですが、
この場合、crypt()関数が使用するのは最初に生成したsalt部分までになります。
salt以降は無視され、最初のハッシュ化の際に使用したsalt部分だけを使用します。

## ハッシュ値の照合(php5.6)

```php
if (hash_equals($hashedPassword, crypt($password, $hashedPassword)) {
   // 照合成功
}
```
ドメイン参加したWindows ServerへのドメインユーザでのRDPが拒否されるとき

## 事象
RDPでドメインユーザでログインしようとすると、「このユーザーアカウントはリモートログインを許可されていないため、接続は拒否されました。」と出る。

##方法
```
コントロールパネルから「ユーザーアカウント」をクリック。
「ユーザーアカウントの管理」をクリック。
ユーザータブで「追加」をクリックし、ユーザー名とドメインを入力する。
```

##参考
コントロールパネルから「ユーザーアカウント」をクリック。 「ユーザーアカウントの管理」をクリック。 ユーザータブで「追加」をクリックし、ユーザー名とドメインを入力する。 http://iteduki.hateblo.jp/entry/2015/02/05/155302
「このユーザーアカウントはリモートログインを許可されていないため、接続は拒否されました。」の対応 at softelメモ https://www.softel.co.jp/blogs/tech/archives/5046
Ubuntuで日本語の設定方法

#目的

Ubuntu環境で、日本語が入力出来なかったので、日本語入力ができるようにした

#環境

Ubuntu 14.04 LTS

#手順
- Mozcをインストールする


```
sudo apt-get install ibus-mozc
```
これは、Google 日本語入力がフリーで公開されたものらしいです。
https://ja.wikipedia.org/wiki/Google_%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%85%A5%E5%8A%9B

>Mozcとは、Google 日本語入力のオープンソース版である。これは2010年5月11日にGoogle日本語入力をGoogle Chrome OSに移植するために必要な部分をオープンソースしたものである[25]。


- インストールが終わったら再起動する
- フォント設定画面を開く
- 右上の文字のアイコンか、System SettingからFont Entryをクリック
- 左下のプラスのボタンを押す
- Japanese(Mozc)を選択
- 右側のSwitch to next source using を選択し、任意のボタンを押す。（自分の場合は半角・全角ボタンを設定）

#問題が起きたとき

- なぜかキーボードが変わってしまった・・
-
以下のページが役に立ちました。
http://qiita.com/jjjiii26/items/af134896483ae9d32a7d
Cocoaの機能を使って日付と文字列を変換するAppleScriptハンドラ



* `dateFromStringUsingFormat`: `dateFormat`をフォーマットとして`dateString`を日付に変換
* `formatDate`: `dateFormat`をフォーマットとして`aDate`を文字列に変換
* `convertDateExpression`: `inputDateString`の日付表記を`inputDateFormat`から`outputDateFormat`に変換


```AppleScript
use scripting additions
use framework "Foundation"
property dateFormatter : missing value

log dateFromStringUsingFormat("2013/11/02 13:04:55", "yyyy/MM/dd HH:mm:ss") as date
--> date "2013年11月2日土曜日 13:04:55"

log formatDate(current date, "yyyy-MM-dd HH:mm:ss") as text
--> "2016-01-06 17:09:49"

log convertDateExpression("2013/11/02 13:04:55", "yyyy/MM/dd HH:mm:ss", "M'月'd'日' ah'時'm'分'") as text
--> "11月2日 午後1時4分"

on dateFromStringUsingFormat(dateString, dateFormat)
	return dateFormatterWithFormat(dateFormat)'s dateFromString:dateString
end dateFromStringUsingFormat

on formatDate(aDate, dateFormat)
	return dateFormatterWithFormat(dateFormat)'s stringFromDate:aDate
end formatDate

on convertDateExpression(inputDateString, inputDateFormat, outputDateFormat)
	set aDate to dateFormatterWithFormat(inputDateFormat)'s dateFromString:inputDateString
	return dateFormatterWithFormat(outputDateFormat)'s stringFromDate:aDate
end convertDateExpression

on dateFormatterWithFormat(format)
	--require framework: Foundation
	try
		if dateFormatter = missing value then
			error number -2753
		end if
	on error number -2753
		set dateFormatter to current application's NSDateFormatter's alloc()'s init()
		set dateFormatter's locale to current application's NSLocale's localeWithLocaleIdentifier:"en_US_POSIX"
		set dateFormatter's timeZone to current application's NSTimeZone's defaultTimeZone
	end try
	set dateFormatter's dateFormat to format
	return dateFormatter
end dateFormatterWithFormat
```


## 更新履歴

* 2016-01-06: Cocoaの機能を使って作成
* 2016-01-07: use文を冒頭に記述
* 2016-01-17: `setTimeZone`に`time to GMT`を追加して、タイムゾーンによる時刻のズレを修正
* 2016-01-20: localeとtimeZoneを設定
* 2016-01-22: dateFormatterの初期宣言部分を`dateFormatterWithFormat`ハンドラにまとめ
* 2018-09-14: dateFormatterをキャッシュするように変更
WindowsのSourceTreeでBitbucketからクローンできなかった


# 概要

SourceTreeの環境構築中に変なところで躓いたので、忘れないように書いておこうと思います。
解決するまで時間がかかったのと、根本的な原因は未だに不明です。

# 環境

* Windows 7 Professional
* SourceTree Version 1.7.0.32509

# 問題

環境構築自体は途中まで問題なく出来ていました。

1. SourceTreeのインストール
2. PuTTY Key GeneratorでSSHキーの作成
3. SSHエージェントを起動し、SSHプライベートキーの登録
4. BitbucketにSSHパブリックキーを登録
5. Bitbucketから「SourceTreeにクローン」ボタンを使用してクローン開始
6. ……クローンできない！(というかそもそもGitリポジトリとして認識されていない？)

という具合にピンポイントでここだけ上手くいきませんでした。
いくら待ってみてもリポジトリの取得が終わらないのです。
以前、SourceTreeを入れていた別のPCでは問題なく動いていて、
何故か新規にSourceTreeを入れたPCではクローンできませんでした。

まあ、ここまではよくある現象だと思っていました。
たぶん、SSHキーがうまく認証できていないんだろうと。
ここから試行錯誤が始まります。

* SSHキーの設定を見直す
* SSHキーを作りなおす×2～3回
* PC再起動
* SourceTreeの再インストール
* ファイアウォールを無効にする
* URLをポート指定にしてみる
* 別のSourceTreeを入れていないPCで試す → こっちでも発生！

いろいろ試してみましたが、どれもこれもSSHの認証が通りません。
SSHは諦めてHTTPSにしようかなと思っていた時に、ある情報が気になります。
(HTTPSではリポジトリを認識してくれました。)

**WindowsだとSSHを使用した時、レジストリに何か書き込まれるらしい。**

調べてみると、どうやら以下の場所に書き込まれるようです。

```
HKEY_CURRENT_USER\SoftWare\SimonTatham\PuTTY\SshHostKeys
```

上手くいくPCでは「rsa2@22:bitbucket.org」がありますが、
今回問題のあったPCではこれが書き込まれていません。
たぶん、こいつのせいです！

# 解決方法？

なんでレジストリに書き込まれないかは、SourceTreeのみぞ知るなので分かりません。
では、どうしたらここに書き込まれるのでしょうか？
調べてみると、以下のコマンドでなんとかなりそうです。

コマンドプロンプトで

```
 > "C:\Program Files (x86)\Atlassian\SourceTree\tools\putty\plink.exe"
  -ssh -C -i "privatekey.ppk" git@bitbucket.org 
```

と実行して以下のように出ていれば大丈夫だと思います。

```
The server's host key is not cached in the registry. You
have no guarantee that the server is the computer you
think it is.
The server's rsa2 key fingerprint is:
ssh-rsa 2048 97:8c:1b:f2:6f:14:6b:5c:3b:ec:aa:46:46:74:7c:40
If you trust this host, enter "y" to add the key to
PuTTY's cache and carry on connecting.
If you want to carry on connecting just once, without
adding the key to the cache, enter "n".
If you do not trust this host, press Return to abandon the
connection.
Store key in cache? (y/n) y
Using username "git".
Server refused to allocate pty
logged in as <ユーザー名>.

You can use git or hg to connect to Bitbucket. Shell access is disabled.
```

レジストリを確認してみると、「rsa2@22:bitbucket.org」が書き込まれています！
そして、再度Bitbucketからクローン。今度は上手くいきました！

# まとめ

WindowsでGitの環境構築をする時、毎回SSH(PuTTY)周りで引っかかるのですが、
まさか、Windowsのレジストリまで見に行くことになるとは思いませんでした。
原因は不明ですが、おそらくSourceTreeの特定のバージョンで
上手くいかない時があるのかもしれません。(今まではこんなことはなかったので)
ちなみに、私は個人的な好みでGit Extensionsを使ってます。

# 参考にしたサイト

* https://ja.confluence.atlassian.com/bitbucket/use-the-ssh-protocol-with-bitbucket-cloud-221449711.html
* http://d.hatena.ne.jp/naka-06_18/20120826/1345962868
filter: blur するとフチがぼやける対策

![image](https://qiita-image-store.s3.amazonaws.com/0/40931/c4a07d8c-bf7b-96dd-34ac-a77441c0664b.png)
^これに

```lang:css
  img {
    -webkit-filter: blur(10px);
  }
```
^blurになるスタイルを当てると

![image](https://qiita-image-store.s3.amazonaws.com/0/40931/6d1ee591-3e5d-6f5f-88e6-2910ce7e92c4.png)
^こうなる。**フチまでブラーがかかってしまう**ため、このままだとちょっと使いづらい。

で、こうする。

```lang:html
<div>
  <img src="nekocyan.jpg" alt="" width="500" height=333">
</div>
```
imgをwrapperで包んで

```lang:css
  div {
    width: 500px;
    height: 333px;
    position: relative;
    overflow: hidden;
  }
  img {
    position: absolute;
    width: 520px;
    height: 353px;
    top: -10px;
    left: -10px;
  }
```
枠になるdivのサイズに元の画像サイズに指定し、overflow: hidden;に。
中のimgは**blurのpxぶんだけ**四方に伸ばす。(blurのpxの2倍を縦横に足す)
で、blurのpxぶんのネガティブマージンをとると
![image](https://qiita-image-store.s3.amazonaws.com/0/40931/7d822e0b-0105-7b02-7c8b-59cf7cec7f62.png)
こんな感じにフチが綺麗なblur画像になる。

## 追記
コメント頂いたやり方のほうが全然スマートな方法でした。
コメント欄ご参照ください。
docker-machine upgradeするときの注意点 vagrant と busybox を使用している場合

# 概要

docker-machineを使ってvagrant busyboxで作った環境に対して

```
docker-machine upgrade busyboxのマシン
```

を、実行すると、home以下なども更新されて、ファイルが無くなる。
homeいがいも/usr/loca/binの下もなかった。

# 対策

必要なものはバックアップをとる

# なぜこのようなことになったか。

docker 1.9.0 の環境で

```
docker-machine help
```

を実行した時に、以下のように書いてあったので、dockerだけバージョンがあがあるのかと思った。

```
  upgrade		Upgrade a machine to the latest version of Docker
```


# 参考情報

* [docker-machine - Docker Machine ドキュメント参考日本語訳 - Qiita](http://qiita.com/zembutsu/items/9d189da5d2c7708717a3#upgrade)
指定した日本標準時(JST)をUTCへ変換

# 概要
* 指定のJSTをUTCに変換する
* フォーマットはお好みで

# コマンド

JSTは UTC+9 なので 9時間前になる

```
$ date +%s --date "2016-01-06 09:00:00 JST" | awk '{print strftime("%Y-%m-%d %H:%M:%S",$1) }'
2016-01-06 00:00:00
$ date +%s --date "2016-01-06 20:00:00 JST" | awk '{print strftime("%Y-%m-%d %H:%M:%S",$1) }'
2016-01-06 11:00:00
```
1万字書けるツイッターに数字を順に並べる

<blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">１万字までだと数字は１～いくつまで打てるんだろう</p>&mdash; ネ級に揺らぐイカミソ (@IKAMISO_KAISEN) <a href="https://twitter.com/IKAMISO_KAISEN/status/684550345343680512">2016, 1月 6</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

```ruby:irb
# 1万文字書けるツイッターに連続した数字はいくつまで並ぶか
(2..Float::INFINITY).lazy.inject(1){ |l, n| nx = l + n.to_s.size + 1; break(n - 1) if nx > 10000; nx}
```

ツイッターに書き込もうとしてがんばって短くしたので変な感じになってしまいました。^^;

<blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr"># 1万文字書けるツイッターに連続した数字はいくつまで並ぶか 空白有&#10;(2..Float::INFINITY).lazy.inject(1){ |l, n| nx = l + n.to_s.size + 1; break(n - 1) if nx &gt; 10000; nx}</p>&mdash; えむけー (@mktoho) <a href="https://twitter.com/mktoho/status/684556937967439872">2016, 1月 6</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


無限配列を2から始めて、初期値に1を与えるようにしたのががんばった所です。先頭の数字だったら空白はいらないけど2つ目の数字からは空白の分1を足して、、、っていう処理がいらなくなりました。

## 追記

あまりに分かりづらかったので書き直しました。メソッド名が長いのは私の英語力が無いせいです。^^;;;;;

```ruby:twitter10000.rb
# coding: utf-8

def how_many_consecutive_numbers_can_write_within_byte_of(limit)
  (2..Float::INFINITY).lazy.inject(1) do |len, num|
    next_len = len + num.to_s.size + 1
    break(num - 1) if next_len > limit
    next_len
  end
end

# 1万文字書けるツイッターに連続した数字はいくつまで並ぶか
puts how_many_consecutive_numbers_can_write_within_byte_of(10000)
```
PostgreSQL9.3でパーティショニング【メモ】

今まで比較的MySQLを使うことが多くて、MySQLだとパーティショニングって結構簡単にできたんですが、 PostgreSQLだと、自分でパーティション用の子テーブル作って〜とか結構めんどくさかったので、忘れないようにメモ。

## 元になるテーブルを作る

とりあえずよくあるユーザーテーブル的なので試す

```sql:users
CREATE TABLE users (
    user_id SERIAL NOT NULL PRIMARY KEY,
    mail_address TEXT NOT NULL,
    name TEXT NOT NULL,
    password TEXT NOT NULL,
    created_at timestamp(0) without time zone default now(),
    updated_at timestamp(0) without time zone default now(),
    deleted_at timestamp(0) without time zone
);
```

こんな感じのテーブルで。

## パーティション用子テーブルを作る

とりあえず4分割にしてみる。

```sql:pertition_tbls
CREATE TABLE users_par0 (
    CHECK (user_id % 4 = 0)
) INHERITS (users);

CREATE TABLE users_par1 (
    CHECK (user_id % 4 = 1)
) INHERITS (users);

CREATE TABLE users_par2 (
    CHECK (user_id % 4 = 2)
) INHERITS (users);

CREATE TABLE users_par3 (
    CHECK (user_id % 4 = 3)
) INHERITS (users);
```

簡単にどこで何を指定してるかまとめると、

```
・CHECK (user_id % 4 = 0)・・・user_idを4で割った余りが0の場合のみ、この子テーブルにデータを格納するという指定（他の子テーブルと重複がないようにする）
・INHERITS (users)・・・派生元テーブルの指定
```

というような感じです。

## functionを定義

実際にinsert文が発行されたときに、どの子テーブルにinsertを流すかを制御するfunctionです。

```sql:function
CREATE OR REPLACE FUNCTION users_insert_trigger_func()
    RETURNS trigger AS
$BODY$
    DECLARE
        child text;
    BEGIN
        child := 'users_par' || new.user_id % 4;
        EXECUTE 'INSERT INTO ' || child || ' VALUES(($1).*)' USING new;
        RETURN NULL;
    END;
$BODY$
    LANGUAGE plpgsql VOLATILE
    COST 100;
```

## triggerを登録

insert文が発行されたときに、上記のfunctionが実行されるようにtriggerを作ります。

```sql:trigger
CREATE TRIGGER users_insert_trigger
    BEFORE INSERT
    ON users
    FOR EACH ROW
        EXECUTE PROCEDURE users_insert_trigger_func();
```

これで4分割パーティションができるはず！
それにしてももうちょっと手軽にできないのかなぁ、、、


## ※ついでに

上記で作ったテーブルを普通にdropしようとすると怒られるので、drop時は以下のようにする

```sql
DROP TABLE users CASCADE;
```

また、functionは一緒に消えてくれないので、function消す場合は以下も実行する

```sql
DROP FUNCTION users_insert_trigger_func();
```
縦横の比率維持で迷うのはもうやめよう！

#cssで横幅を基準にレスポンシブを保つ方法

横：縦 = 2:1の横長の長方形をレスポンシブにしてみます。
結論から言うと

```html
<div class="wrap">
  <div class="box"></div>
</div>
```

```css
.wrap{}

.box{
  width:50%;
}
.box::before{
  content: '';
  display:block;
  padding-top:50%;
}

```

これでおしまいです。
ちなみにwrapはほぼ関係ないです。

##なんでこうなった！
###ポイント1：「自分の横幅を基準」に50%の高さを指定は難しい

仮に

```css
.box{
  width:50%;
  height:50%; /* 自分のwidthの半分だから50% */
}
```

とできたら簡単ですよね！
ただ、heightの%指定は「**自分の親要素（自分を囲っているタグ）**」のheightの値を基準にします。
今やりたいのは「**自分の横幅**」を基準に50%を取得したいのです。（2:1なので）

残念ながら、「**自分の横幅**」を基準に縦方向を%で指定できるものはありません。
しかし、「**自分の親要素の横幅**」を基準に縦方向を%で指定できるものがります。

###ポイント2：「自分の親要素の横幅を基準」に計算する
それは**padding**です。

この場合だと個要素を1つ作り、それにpaddingを指定します。

```html
<div class="wrap">
  <div class="box">
    <div class="box__inner"></div> <!-- 1個要素が増えた -->
  </div>
</div>
```

```css
.wrap{}

.box{
  width:50%;
}
.box__inner{
  padding-top:50%;/* 自分の親要素の横幅を基準に50%を指定できる */
}

```

こうすると高さ0の.boxを.box__innerがpadding-top:50%;分押し上げてくれるようになります。
ここのpadding-topは親要素（.box）のwidthを基準に計算してくれるので50%✕50%で25%になります（ちょっと語弊があるかもしれないですが。。。）

###ポイント3：無駄なタグは消そう
ただ、この場合だと比率を保ちたいがために、無駄なタグを増やしています。
本当は無駄なタグを挟まずに
「**レスポンシブにしたい要素**」の「**子要素**」に「**padding-top:50%;**」
を指定できればいいんです。

それってわざわざhtmlに書かなくてもcssで書けます。

###ポイント4：before擬似要素を使う
before擬似要素は「要素の直前に内容を挿入する際に使用します。」 
引用 [http://www.htmq.com/selector/before.shtml](http://www.htmq.com/selector/before.shtml)

つまりbefore要素に「**padding-top:50%;**」を指定すればよいのです。
ただ、before要素はinlineで入ってしまうのでdisplayプロパティを使ってblock要素にしましょう。
また、contentプロパティも入れないと動かないのでご注意を。

それを踏まえて先ほどのhtml, cssを書き換えると

```html
<div class="wrap">
  <div class="box"></div>
</div>
```

```css
.wrap{}

.box{
  width:50%;
}
.box::before{
  content: '';
  display:block;
  padding-top:50%;
}

```

これで完成です。

###ポイント5：おまけ
レスポンシブにした後に中に要素を入れたい場合は.boxにposition:relative;を入れて
中に要素を入れてposition:absolute;をフルサイズで入れるしかないようです_(:3 」∠ )_

#cssで縦幅を基準にレスポンシブを保つ用法
縦幅を基準にレスポンシブにしたい場合は

```css
.box{
  width: 50vh;
  height: 50vh;
}
```

にしましょう！

vh は　Viewport Heightの略でビューポートの高さに対する割合になります。
なので100vhでブラウザの高さと同じです！
今回は50vhなので縦幅の50%の高さにしました！

#まとめ
画像などは勝手にレスポンシブになってくれるので簡単なのですが、意外と要素を比率を保ったままレスポンシブにする方法が難しかったのでまとめました。

参考になれば幸いです。
TypeScript用ng-modelを使うdirectiveのテンプレ

# 対応バージョン

* Angular 1.4.8
* TypeScript 1.7.5

で動作確認。

# バリデーション系directive

```ts
module foo {
    angular.module('bar').directive('hoge', () => {
        return {
            restrict: 'A',
            scope: {},
            require: ['ngModel'],
            priority: -1,
            controller: HogeCtrl
        };
    });

    class HogeCtrl {
        /* @ngInject */
        constructor($element: ng.IAugmentedJQuery) {
            var ngModel: ng.INgModelController = $element.controller('ngModel');
            ngModel.$validators['hoge'] = (modelValue, viewValue) => {
                var v = modelValue || viewValue;
                return true;
            };
        }
    }
}
```

# 独自input系directive


```ts
module foo {
    angular.module('bar').directive('hoge', () => {
        return {
            restrict: 'E',
            scope: {},
            require: ['ngModel'],
            priority: -1,
            controller: HogeCtrl,
            controllerAs: 'ctrl',
            replace: true,
            template: `<div>hoge</div>`
        };
    });

    interface IHogeData {}

    class HogeCtrl {
        ngModel: ng.INgModelController;
        /* @ngInject */
        constructor($element: ng.IAugmentedJQuery) {
            this.ngModel = $element.controller('ngModel');
        }

        get data(): IHogeData {
            return this.ngModel.$viewValue;
        }

        set data(hogeData: IHogeData) {
            this.ngModel.$setViewValue(hogeData);
        }
    }
}
```

# 補足

* `/* @ngInject */`は [olov/ng-annotate](https://github.com/olov/ng-annotate#suppressing-false-positives-with-ngnoinject)で自動的にinjectの例のヤツを付けるためのもの。
* `priority: -1`は過去のngModelのpriorityが0だったことがあったので一応。基本は付けなくても問題ないかも。
* scaffold用のテンプレを作ると捗ります。

# 補足2

@shuhei さん曰く、`/* @ngInject */`より、今は`"ngInject";`と書いたほうが良いそうです。

```ts
class A {
    constructor($scope: ng.IScope) {
        "ngInject";
    }
}
```
Oracleで文字列+数値の自然数ソート

文字列（半角英字）と数値が組み合わさったレコードをソートしたい場合のORDER BY句。
カラムはVARCHAR2型を想定。

データとして「CODE1、CODE2、CODE3、CODE4、CODE10、CODE20、CODE100」があるとして、通常はソートすると以下のようになる。

```sql:
 ORDER BY カラム名
```

```:結果
CODE1
CODE10
CODE100
CODE2
CODE20
CODE3
CODE4
```

自然数ソートしたい場合は以下のようにする。

```sql:
 ORDER BY REGEXP_SUBSTR(カラム名, '^([a-z]|[A-Z])+'), TO_NUMBER( REGEXP_SUBSTR(カラム名, '[0-9]+$') )
```

```:結果
CODE1
CODE2
CODE3
CODE4
CODE10
CODE20
CODE100
```
gem install pg でエラーがでた

bundle installしたときに、gem 'pg' でエラーが出ました。
エラーが出た環境は、Ubuntu 15.04です。Ruby環境はrbenvを使って、ruby 2.2.2を使っています。
ネットを検索しても'pg_config.libpq-dev'について書いているものがなかったので、備忘録として書いておきます。

```
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
...省略...
checking for pg_config... yes
Using config values from /usr/bin/pg_config
checking for libpq-fe.h... no
Can't find the 'libpq-fe.h header
...省略...
```
libpq-fe.hが見つからないようです。

```
$ apt-file update
$ apt-file search libpq-fe.h
libpq-dev: /usr/include/postgresql/libpq-fe.h
postgres-xc-server-dev: /usr/include/postgres-xc/server/gtm/libpq-fe.h
```
libpq-dev はインストールしています。
/usr/bin/pg_config を見にいってみ見つかっていないようです・・・。

```
$ ls -l /usr/bin/pg*
-rwxr-xr-x 1 root root 39728  8月  5 10:25 /usr/bin/pg
-rwxr-xr-x 1 root root 30760  8月 21  2014 /usr/bin/pg_config
-rwxr-xr-x 1 root root 30792 10月 10 11:41 /usr/bin/pg_config.libpq-dev
-rwxr-xr-x 1 root root 27216  2月 11  2015 /usr/bin/pgrep
```
おや、pg_config.libpq-dev なんてものがあるぞ・・・。
これか！

```
$ gem install pg -v '0.18.2' -- --with-pg-config=/usr/bin/pg_config.libpq-dev
$ rbenv rehash
```
通った・・・。
それでは、bundle install が通るように設定したいと思います。

```
$ bundle config build.pg --with-pg-config=/usr/bin/pg_config.libpq-dev
$ bundle install
$ rbenv rehash
```
with-pg-config もGemfileに書けたらいいのですが。

以上、gem 'pg' エラーの対応でした。
JAVA java.util.functionパッケージに準備されたSAMインタフェース

<FONT color="#ff0000">IntToLongFunction</font>
引数→int
戻り値→long
▪️Test80.java

```java
import java.util.function.*;

//引数int、戻り値longの場合はIntToLongFunctionを使う
public class Test80 {
	static long s = 1000000L;

	public static long method(int value) {
		return s;
	}

	public static void main(String[] args) {
		IntToLongFunction lll = Test80::method;
		System.out.println(lll.applyAsLong(2));
	}

}
```

▪️Test80.java 実行結果
1000000

<FONT color="#ff0000">IntToDoubleFunction</font>
引数→int
戻り値→double

▪️Test81.java

```java
import java.util.function.*;

public class Test81 {

	public static double method(int a) {
		return a * 2.9;
	}

	public static void main(String[] args) {
		IntToDoubleFunction ddd = Test81::method;
		System.out.println(ddd.applyAsDouble(3));
	}
}
```

▪️Test81.java 実行結果
8.7

<FONT color="#ff0000">IntConsumer</font>
引数→int
戻り値→なし(void)
▪️Test82.java 例①

```java
import java.util.function.*;

public class Test82 {
	public static void method(int a) {
	}

	public static void main(String[] args) {
		IntConsumer ccc = Test82::method;
		ccc.accept(2);
	}
}
```

▪️Test82.java 例① 実行結果
(なにもない)

▪️Test87.java 例②

```java
import java.util.function.IntConsumer;

public class Test87 {

	public static void main(String[] args) {
		IntConsumer consumer = System.out::println;
		consumer.accept(1);
	}

}
```
▪️Test87.java 例② 実行結果
1

<FONT color="#ff0000">IntSupplier</font>
引数→なし
戻り値→int
▪️Test83.java 

```java
import java.util.function.*;

public class Test83 {
	public static int method() {
		return 10 * 3;
	}

	public static void main(String[] args) {
		IntSupplier sss = Test83::method;
		System.out.println(sss.getAsInt());
	}

}
```

▪️Test83.java 実行結果
30

<FONT color="#ff0000">IntPredicate</font>
引数→int
戻り値→boolean

▪️Test84.java

```java
import java.util.function.*;

public class Test84 {
	static boolean isMarried = false;

	public static boolean method(int a) {
		return isMarried;
	}

	public static void main(String[] args) {
		IntPredicate ppp = Test84::method;
		System.out.println(ppp.test(3));
	}

}
```

▪️Test84.java 実行結果
false
CloudFlareでキャッシュされない条件

CloudFlareのキャッシュについて調査メモ。
何かあれば、随時追加していく用。

# HTMLファイルはデフォルトではキャッシュされない。

デフォルトだと、HTMLファイルはキャッシュされない。

詳しくは[こちら](https://support.cloudflare.com/hc/en-us/articles/200172366-How-do-I-cache-everything-on-a-URL-)

デフォルトでキャッシュされるのはは、画像とかJS、CSSファイルとか。
詳しくは、[こちら](https://support.cloudflare.com/hc/en-us/articles/200172516-What-file-extensions-does-CloudFlare-cache-for-static-content-)。

キャッシュする為には、「Page Rules」として設定する。

# オリジンサーバーのレスポンスに*Cache-Control*、*Expires*などのヘッダーが設定されていたらキャッシュされない。

詳しくは、[こちら](https://support.cloudflare.com/hc/en-us/articles/202238800-Why-is-Always-Online-not-working-) (9のとこ)。

*Expires*に300（5分）とか入れてみたりしたけど、取り敢えずヘッダーが設定されていたら、キャッシュされないみたい。
githubのprivate repository からファイルを1つもってくる

```bash
GITHUB_ACCESS_TOKEN='hoge'
GITHUB_USER_NAME='ppworks'
GITHUB_REPOSITORY_NAME='pplog'
GITHUB_BRANCH='master'
FETCH_FILE_NAME='db/schema.rb'

curl --header "Authorization: token $GITHUB_ACCESS_TOKEN" \
     --header 'Accept: application/vnd.github.v3.raw' \
     --output $FETCH_FILE_NAME \
     --location "https://api.github.com/repos/$GITHUB_USER_NAME/$GITHUB_REPOSITORY_NAME/contents/$FETCH_FILE_NAME?ref=$GITHUB_BRANCH"
```
Windows Visual Studio 2015 communityでOpenCV 3.1を使う

OpenCVで画像処理を始めてみようといろいろ調べたが、OpenCV 2.X系だったりVisual Studio 2013 community使用前提だったりビルド済みライブラリ利用だったりCMakeでビルドだったりNuGetで取ってきたりでよく分からず手間取ったので、やり方をまとめておく。

結局VS2015 communityでNuGetで取得する方法で簡単にセットアップできた。
OpenCVは勝手に取ってきてくれるので、予めインストールする必要はなし。

- Visual Studio 2015 communityをインストール。なぜかオンラインインストールではうまく行かなかったので、isoを落としてきた。
- 新しいプロジェクト作成。「Visual C++」で「Win32コンソールアプリケーション」を選択。他は特に弄る必要なし。
- 「ツール」→「NuGetパッケージマネージャー」→「ソリューションのNuGetパッケージの管理」を選択。
- タブを「参照」に切り替えて「opencv3.1」で検索し選択(「opencv3.1.redist」等ではない)し、インストール。数分待つ(2回目以降は早いかも)。
- 適当なサンプルアプリを作って動かして試す。
  [ここ](http://nonbiri-tereka.hatenablog.com/entry/2015/05/13/063713)を使わせてもらった。1つ目の引数は顔認識させたい画像を、2つ目の引数はhaarcascade_frontalface_alt2.xmlあたりを指定すればOK。
  注意点は、x64環境であればソリューションプラットフォームをx64に変更すること。間違ったままだとハンドルされない例外が発生するっぽい。
Vagrantfileで大きめのストレージを作る方法

# 概要

Vagrant経由のVMで作業したいけど、大きめのディスク容量を確保したい。
予め判っているなら、Vagrantfileで済ませたい。そういうこと、[まれによくある](http://www.weblio.jp/content/%E3%81%BE%E3%82%8C%E3%81%AB%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B)。
マウント手順も怪しいのでメモ。本当はもっとスマートにしたかったけど知識が足りない。

初心者なもんですから、何でもかんでもメモっておきたくて。

# 環境

* Vagrant 1.7.4
* VirtualBox 5.0.10
* CentOS 7.1

# 手順
## Vagrantfile

Vagrantfileに下記を追記します

```lang:Vagrantfile
  config.vm.provider :virtualbox do |vb|
    file_to_disk = "./disk1.vdi"
    unless File.exist?(file_to_disk)
      vb.customize ['createhd', '--filename', file_to_disk, '--format', 'VDI', '--size', 20 * 1024, '--variant', 'Standard']
      vb.customize ['storageattach', :id, '--storagectl', 'SATA Controller', '--port', 1, '--device', 0, '--type', 'hdd', '--medium', file_to_disk]
    end
  end
```

## ssh

fdisk -l を実行し、/dev/sdb が表示されることを確認します

```lang:sh
# fdisk -l
```

fdisk /dev/sdb を実行し、対話式で下記の通り操作します

```lang:sh
# fdisk /dev/sdb
Welcome to fdisk (util-linux 2.23.2).

Changes will remain in memory only, until you decide to write them.
Be careful before using the write command.

Device does not contain a recognized partition table
Building a new DOS disklabel with disk identifier 0x60b67fe0.

Command (m for help): n
Partition type:
   p   primary (0 primary, 0 extended, 4 free)
   e   extended
Select (default p): p
Partition number (1-4, default 1): 
First sector (2048-41943039, default 2048): 
Using default value 2048
Last sector, +sectors or +size{K,M,G} (2048-41943039, default 41943039): 
Using default value 41943039
Partition 1 of type Linux and of size 20 GiB is set

Command (m for help): w
The partition table has been altered!

Calling ioctl() to re-read partition table.
Syncing disks.
```

mkfs を実行後、マウントポイントを作成します

```lang:sh
# mkfs -t ext4 /dev/sdb1
# mkdir /disk1
```

/etc/fstab の末尾に下記を追記します

```lang:/etc/fstab
/dev/sdb1 /disk1 ext4 defaults 0 0
```

マウントします

```lang:sh
mount -a
```

以上
ng-repeat内で、オブジェクトの特定のプロパティが存在しない場合は表示しない


こういう面倒なオブジェクトがある場合

```some.js
var obj = {
	1: [
		{
			name: 'taro',
			someprop: 'hoge'
		}
	],
	2: [
		{
			name: 'jiro'
		},
		{
			name: 'sabro'
		}
	]
}
```

* somepropがある場合には表示したくない
* listの長さが0だったらkeyも表示しない
* listの長さとしてはsomepropがあるオブジェクトはカウントしない（つまり key = 1の場合は長さ0）

画面でどうにかなったりする

```some.html
<div ng-repeat="(k, v) in obj">
	<p ng-show="filteredList.length > 0">{{ k }}</p>
	<ul ng-repeat="item in (filteredList = (v | filter: { someprop: '!' }))">
		<li>{{ item.name }}</li>
	</ul>
</div>
```
## メモ
filter: { propname: '!' } でプロパティが存在する場合は除外される
filter: { propname: '!!' } でプロパティが存在しない場合は除外される

filterした結果は変数に入れておけるので、それを利用できる。すごい。
React.js をgulp で Babel + Browserify を利用して動作させるシンプルな環境を作った


React.js をとりあえず動作させてみようと思ったものの、gulp? jsx? Babel? と未知の単語がいっぱいでとりあえず何をしたらいいか分からなかった（自分）や同じような方の参考になればと思い React.js ＋ gulp + Babel +Browserify のシンプルな環境を作ってみました。

公式ページを見たけど、それを動かすことができずに挫折しそうな方の参考になれば。
React.js や Babelは進歩も早くて、Google検索した結果を見ても少し古くて色々はまったので。

以下GitHub にて公開しています。
https://github.com/ma-tu/react-babel-gulp-browserify-simple

2016年1月時点で最新のライブラリを利用しています。
また Windows環境で検証しています。
* react: 0.14.5
* gulp: 3.9
* babel: 7.2
* browserify: 12.0.1

上記の GitHub のサンプルを動かすと以下のように表示されます。
![react-gulp-babel-browserify-sample-image.png](https://qiita-image-store.s3.amazonaws.com/0/108308/c1f4466b-92b1-e7cf-26f9-1cfbe5ff300d.png)

## 利用方法

node / npm はインストール済みの前提です。他に記事を参考にしてインストールしてください。

### 1. gulp の インストール
※ gulp がインストール済みの場合は 2. ファイルの配置に進んでください。  

gulp がインストールされていない場合は以下コマンドでグローバルインストールすることを推奨します。
gulp は便利な開発ツールなのでグローバルインストールすることによりコマンドプロンプトから簡単に利用できるようになるので便利です。

```
npm install -g gulp
```

※アンインストールしたくなったら以下で可能です。
```
npm uninstall -g gulp
```

### 2. ファイルの配置
以下のコマンドで clone するか [こちら](https://github.com/ma-tu/react-babel-gulp-browserify-simple/archive/master.zip)を Download ZIP して任意のフォルダに配置します。
```
git clone https://github.com/ma-tu/react-babel-gulp-browserify-simple.git
```

### 3. 必要ライブラリ取得
上記で配置したフォルダに移動して以下コマンドを実行します。
実行に必要なライブラリが現在のフォルダ以下の node_modules 以下にダウンロードされます。

```
npm install
```
### 4. 実行
以下コマンドを実行すると、React.js の jsx ファイルがコンパイルされて、簡易サーバーを起動します。
```
gulp
```

### 5. 動作確認
適当なブラウザで http://localhost:8000/ にアクセスします。  
gulp のタスクランナーで src/jsx/app.jsx ファイルの変更を監視しているので、上記ファイルを修正して保存すると自動的にコンパイルされます。
google mapsを画像に変換する

google mapsを表示後、png画像に変換するプログラムです。
jQuery 1.11.3、html2canvas 0.4.1を利用しています。

```map.html
<html>
  <head>
    <meta charset="UTF-8">
    <title>Google Maps Javascript API test page</title>
    <link rel="stylesheet" href="/css/mymap.css">
  </head>
  <body>
    <img id="ss" src="" />
    <div class="map-embed">
      <div id="map-canvas">ここに地図が表示されます</div>
    </div>
    <script src="/js/jquery/1.11.3/jquery-1.11.3.min.js"></script>
    <script src="/js/html2canvas/0.4.1/html2canvas.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>

      $(document).ready(function() {
        $("#ss").hide();

        var canvas  = document.getElementById( 'map-canvas' ) ;
        var latlng  = new google.maps.LatLng( 35.633664 , 139.715593 );
        var options = {
          zoom: 15,
          center: latlng ,
        };

        var map = new google.maps.Map( canvas , options );

        setTimeout(map2image,1000);
      });

      function map2image() {
        html2canvas($("#map-canvas"), {
          useCORS: true,
          onrendered: function(canvas) {
             var myImage = canvas.toDataURL("image/png");
             $("#map-canvas").hide();
             $("#ss").show();
             $("#ss").attr("src", myImage);
          }
        });
      }
    </script>
  </body>
</html>

```