OmniAICreator/Qiita-1.07M huggingface dataset:
tig(gitのテキストツール)のUTF-8での記号がずれる件

tigを導入したのだけど、
よりキレイな表示を、と思って
set line-graphics = utf-8
にしたけど、ずれる。
なぜずれるかって、iterm2の方でDouble-Width Charactersをチェック入れて有効に
しているから。これは外せない。vimやemacsで絵文字・記号を扱うことがあるので。
じゃあ、どうするか。
tigのソースコードを変更して、コンパイルしてインストールする

cd tig-2.1
vi src/graph-v2.c

```
        if (graph_symbol_cross_over(symbol))
+               //return "─│";
                return "-┼";
        if (graph_symbol_vertical_bar(symbol))
                return " │";
        if (graph_symbol_turn_left(symbol))
+               //return "─╯";
                return "-╯";
        if (graph_symbol_multi_branch(symbol))
+               //return "─┴";
                return "-┴";
        if (graph_symbol_horizontal_bar(symbol))
+               //return "──";
                return "---";
        if (graph_symbol_forks(symbol))
                return " ├";
        if (graph_symbol_turn_down_cross_over(symbol))
+               //return "─╭";
                return "-╭";
        if (graph_symbol_turn_down(symbol))
                return " ╭";
        if (graph_symbol_merge(symbol))
+               //return "─╮";
                return "-╮";
        if (graph_symbol_multi_merge(symbol))
+               //return "─┬";
                return "-┬";
```

```
./configure
make
make install
```
Web サイト本文の一行の文字数と最大幅 max-width の決め方

Web サイト本文の一行の文字数と最大幅 max-width について考えたことをメモっとく。

# 前提とするブラウザとフォント

[Web サイトを制作するときの対応ブラウザなど想定環境の決め方（PC 編）](http://qiita.com/takuya0301/items/6a266415b0c447588a14)を前提に下記のブラウザの最新バージョンに対応する。

* Chrome
* Internet Explorer 11
* Firefox
* Safari
* Edge

[Web サイト本文の font-family に指定するフォントの決め方](http://qiita.com/takuya0301/items/1094b4edc213ace1f821)を前提に下記の CSS のように font-family を指定する。

```css
p {
  font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
}
```

# 一行の文字数

一行の文字数は最大全角40文字（半角80文字）。

Understanding WCAG 2.0 の [Understanding Success Criterion 1.4.8](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) に下記のような記述がある。

> Width is no more than 80 characters or glyphs (40 if CJK). 

また、[日本語組版処理の要件（日本語版）](https://www.w3.org/TR/jlreq/ja/)にも下記のような記述がある。

> 1行の行長（字詰め数）は，縦組の場合，最大で52字くらい，横組では最大で40字くらいにする．

# フォントサイズ

本文のフォントサイズは 16px。これはブラウザのデフォルトフォントサイズのことが多い。

Google Developers の PageSpeed Insights にある [Use Legible Font Sizes](https://developers.google.com/speed/docs/insights/UseLegibleFontSizes) というページには下記のような記述がある。

> By default, the browser will display each font at 16px (CSS pixels). This is a good default for most cases, but may need to be adjusted for a specific font - i.e. the default size can be set lower or higher to accommodate for the different properties of the font.

MDN の CSS にある [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) というページにも下記のような記述がある。

> If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px.

# 最大幅 max-width の値

40 [全角文字] × 16 [px] = 640 [px] ということで、Web サイト本文の最大幅 max-width は 640px。

# 最大幅 max-width の指定は px と em のどっち？

個人的には px を使いたい。ただ、WCAG 2.0 は em を例示している。

Techniques for WCAG 2.0 の [C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized](https://www.w3.org/WAI/GL/WCAG20-TECHS/C20.html) には下記のような記載がある。サンプルコードは em 指定と % 指定のよう。

> Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized

Techniques for WCAG 2.0 に従いつつ最大文字数を制限することを考えると em 指定になる。

ただ、最近のブラウザは文字だけ大きくすることもページ全体を拡大することもできるから、em 指定するよりは px 指定の方が選択の幅が広がっていいんじゃないかな。（とか言いながら、この前のサンプルコードには em を使ってたよ……。）

本件は各自におまかせ。CSS Framework の都合とかもあるだろうし。（投げやり）

# まとめ

ブラウザのデフォルトフォントサイズ 16px を利用することを前提に CSS で下記のような指定をすると一行の文字数が全角40文字になる。

```css
p {
  max-width: 640px;
}
```

em 指定の場合はこちら。

```css
p {
  max-width: 40em;
}
```

# 関連記事

[Web サイトを制作するときの対応ブラウザなど想定環境の決め方（PC 編）](http://qiita.com/takuya0301/items/6a266415b0c447588a14)
[Web サイト本文の font-family に指定するフォントの決め方](http://qiita.com/takuya0301/items/1094b4edc213ace1f821)

# 参考文献

https://www.w3.org/TR/WCAG20/
https://www.w3.org/TR/UNDERSTANDING-WCAG20/
https://www.w3.org/WAI/GL/WCAG20-TECHS/
https://www.w3.org/TR/jlreq/ja/
https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
fuelPHPでIPv6入力のvalidationを追加したい

#なんでないんだ
こまったのでいろいろググった挙句落ち着いた

```php
<?php
class LocalValidation
{
    // IPv6チェック
    public static function _validation_valid_ipv6($ipv6addr)
    {
        if(!empty($ipv6addr)) {
            if (preg_match("/((([0-9a-f]{1,4}:){7}([0-9a-f]{1,4}|:))|(([0-9a-f]{1,4}:){6}(:[0-9a-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9a-f]{1,4}:){5}(((:[0-9a-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9a-f]{1,4}:){4}(((:[0-9a-f]{1,4}){1,3})|((:[0-9a-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9a-f]{1,4}:){3}(((:[0-9a-f]{1,4}){1,4})|((:[0-9a-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9a-f]{1,4}:){2}(((:[0-9a-f]{1,4}){1,5})|((:[0-9a-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9a-f]{1,4}:){1}(((:[0-9a-f]{1,4}){1,6})|((:[0-9a-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9a-f]{1,4}){1,7})|((:[0-9a-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/", $ipv6addr)) {
                return true;
            } else {
                return false;
            }
        }
        return false;
    }
}
```

こいつを適当な名前のクラス・ファイルにして
fuel/app/classesに置く。
そんで
add_callable('LocalValidation');
する。
LocalValidationはクラスの名前。
jQueryのscrollTop

#あるオブジェクトが表示されるまでスクロールしたい！
```js
$('#id').scrollTop($('.class').eq(0).offset().top);
```
うまくいかない


```js
$('#id').scrollTop($('.class').eq(0).get(0).offsetTop);
```
これだと大丈夫！
どうやらオブジェクトの位置計算方法がjQueryとjavascriptで違うらしい
sshfsのヘルパー関数

今まで接続先ごとにバラバラに関数作ってたけどこの際共通化してまとめてみました．Mac用に`/Volumes/識別子`にマウントするように書いてます．オプションがある場合は今のところ`~/.ssh/config`に書いておく前提です．

```bash:~/.bashrc,&#32;~/.zshrc&#32;などに追記
sm() {
    if [ $# -ne 1 -a $# -ne 2 ]; then
        echo 'Usage: sm <identifier> [<path (default: home)>]' >&2
        return 1
    fi
    mkdir "/Volumes/$1" 2>/dev/null
    local trapper="
        rmdir \"/Volumes/$1\" 2>/dev/null
        trap - INT EXIT TERM HUP
        return 1
    "
    trap "$trapper" INT EXIT TERM HUP
    if sshfs "$1":"$2" "/Volumes/$1"; then
        trap - INT EXIT TERM HUP
        return
    fi
    eval "$trapper"
}

um() {
    if [ $# -ne 1 ]; then
        echo 'Usage: um <identifier>' >&2
        return 1
    fi
    rmdir "/Volumes/$1" 2>/dev/null
    umount "/Volumes/$1"
}
```
FS01BU を Mac OS X 10.11 (El Capitan) で使う

これは [ソラコム](https://soracom.jp) の [リレーブログ](https://blog.soracom.jp/relay-blog/2016-04/) 4/20のエントリーです。

#概要

[ソラコム](https://soracom.jp) が販売する富士ソフト(OMEGA)の3Gモデム(FS01BU)ですが、製品仕様上の対応OSは Mac OS X 10.6～10.8 日本語版（Intel）の対応となっています。
[FS01BU　製品詳細｜富士ソフト株式会社](http://www.fsi.co.jp/mobile/plusF/products/FS01BU.html)

こちらを Mac OS X 10.11 (El Capitan) で使えるようにしてみます。

#免責事項
本ドキュメントは as is で提供するものであり、本ドキュメントの内容、利用により蒙るいかなる損害についても保証するものではありません。また、記載内容に関する問い合わせ等を行われないよう、ご了承ください。

製品仕様（対応OS）が変更されるわけではないこと、本来セキュリティを向上させるために具備されている機能である
・セキュリティ整合性保護機能（SIP: System Integrity Protection）
を（一時的に）無効化することになることについて、影響を十分に理解した上で、実施してください。

#手順
##セキュリティ整合性保護機能（SIP: System Integrity Protection）の無効化
command + R を押しながら Mac を起動させ、リカバリモードに入ります。
「ユーティリティ」から「ターミナル」を起動させ、"csrutil disable" と入力し、セキュリティ整合性保護機能（SIP: System Integrity Protection）通称 "rootless" を無効化します。

```
# csrutil disable
Successfully disabled System Integrity Protection. Please restart the machine for the changes to effect.
# 
```
完了したら再起動します。

##セキュリティ整合性保護機能（SIP: System Integrity Protection）が無効化されていることを確認

起動したら、ターミナルから以下のコマンドを打ち、セキュリティ整合性保護機能（SIP: System Integrity Protection）が無効化されていることを確認します。以下のように応答があれば正常です。

```
$ csrutil status
System Integrity Protection status: disabled.
```
なお、

```
System Integrity Protection status: enabled.
```

と表示された場合は、セキュリティ整合性保護機能（SIP: System Integrity Protection）が有効になっていますので「セキュリティ整合性保護機能（SIP: System Integrity Protection）の無効化」の手順に戻ってください。

##接続ソフト「FS01BU Data Connection Manager」のインストール
FS01BU を挿入すると、CD-ROM ドライブに見えます。
接続ソフト「FS01BU Data Connection Manager」をインストールします。（完了後に再起動が必要です。）
FS01BU Data Connection Manager の設定については割愛しますが、接続情報は SORACOM を利用する場合、ユーザ名: sora、パスワード: sora、APN: soracom.io、認証方式: PAP または CHAP、接続方式: IP です。

##接続・確認方法
接続ソフト「FS01BU Data Connection Manager」から接続します。
また「システム環境設定」＞「ネットワーク」には「USB Modem」が追加されています。


#後片付け
command + R を押しながら Mac を起動させ、リカバリモードに入ります。
ターミナルを起動させ、"csrutil enable" と入力し、セキュリティ整合性保護機能（SIP: System Integrity Protection）を再度、有効化します。

```
# csrutil enable
Successfully enabled System Integrity Protection. Please restart the machine for the changes to effect.
#
```
完了したら再起動します。ターミナルで "csrutil status" とコマンドを入力し、

```
$ csrutil status
System Integrity Protection status: enabled.
```

と表示されればセキュリティ整合性保護機能（SIP: System Integrity Protection）は有効化されています。

いったん接続ソフト「FS01BU Data Connection Manager」をインストールしてしまえば、FS01BU Data Connection Manager 等から接続が可能ですので、Mac OS X 10.11 (El Capitan) でも FS01BU が使えるようになりました。
ご紹介した手順が「ちょっとだけ試したい」といった場合のハードルを低くすることに役立てば、嬉しく思います。
遺伝アルゴリズムを試してみた


##参考書籍

この本を読んだので簡単なサンプルを実装してみました
結構古い書籍ですが
[「遺伝アルゴリズムの理論-自然・人口システムにおける適応-」](http://www.amazon.co.jp/%E9%81%BA%E4%BC%9D%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E3%81%AE%E7%90%86%E8%AB%96%E2%80%95%E8%87%AA%E7%84%B6%E3%83%BB%E4%BA%BA%E5%B7%A5%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E9%81%A9%E5%BF%9C-JohnH-Holland/dp/4627825110/ref=sr_1_1?ie=UTF8&qid=1461151938&sr=8-1&keywords=%E9%81%BA%E4%BC%9D%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E3%81%AE%E7%90%86%E8%AB%96)



##実装
今回は簡単のため以下のクラスを用いて
適応システムの対象の基本構造(遺伝子の代替)を加速度を表す順列に
適応度を単純に300フレーム後のx座標の進度
オペレータは単純交差、単純逆位、突然変異の三つのオペレータを
合成した単一のオペレータとしました
集団サイズは20,遺伝子長は50
また一回の世代交代で１個のみの子孫が既存のものと置き換わるようにしてあります

```cpp:Agent.h

#define PATTERN_NUM 50

class Agent {
public:
    ofVec2f speed;
    ofVec2f pos;
    
    unsigned int accePattern[PATTERN_NUM];
    unsigned int index;
    
    
    Agent();
    void update();
    void init();
};

```

```cpp:Agent.cpp
#include "Agent.hpp"

Agent::Agent(){
    for(int i = 0; i < PATTERN_NUM; i++){
        accePattern[i] = int(ofRandom(0, 9));
    }
    index = 0;
}

void Agent::init(){
    pos = ofVec2f(0,0);
    speed = ofVec2f(0,0);
    index = 0;
}

void Agent::update(){
    speed += ofVec2f(cos(float(accePattern[index]) * PI / 4.0 ),
                     sin(float(accePattern[index]) * PI / 4.0 ));
    pos += speed;
    index = (index + 1) % PATTERN_NUM;
}

```


##結果
最初はこんな感じだったのが…

![sample_と_動画_-_YouTube_と_遺伝アルゴリズムを試してみた.png](https://qiita-image-store.s3.amazonaws.com/0/68570/90ce2c87-8041-c975-82f7-d23fcf0b3087.png "sample_と_動画_-_YouTube_と_遺伝アルゴリズムを試してみた.png")

2900回の世代交代で…


![sample_と_動画_-_YouTube.png](https://qiita-image-store.s3.amazonaws.com/0/68570/34a79e8e-562d-ec34-69e0-3709ff09c6f1.png "sample_と_動画_-_YouTube.png")

こんな感じに
ちなみにバックのグラフは20個体の平均のスコアの推移です

この画像では交差確率 0.3, 逆位確率 0.01, 突然変異確率0.01で行いました
シミュレーション動画は以下
https://youtu.be/l2ivFB97yD4

突然変異確率を下げたものはこちら. 上記のような不安定さはありませんが
スコアの上昇も緩やかです.
![sample2_と_遺伝アルゴリズムを試してみた_と_1_1_件アップロード済み_-_YouTube.png](https://qiita-image-store.s3.amazonaws.com/0/68570/34580174-31d1-ae14-95a5-1458b3f591c1.png "sample2_と_遺伝アルゴリズムを試してみた_と_1_1_件アップロード済み_-_YouTube.png")

https://youtu.be/6_004SWQ7oc


##終わりに

最初の参考書籍、そこまで読むのに時間かからない上、
基本的な数学の知識さえあれば理解できるのでオススメです
最適配分や遺伝プランのロバスト性、スキーマ、散布言語についても書いてあります  
今回は内容の理解のために単純化して実装してみましたって趣旨なので
全体のコードは載せてませんが要望あれば整理してからかもう少しちゃんとしてから
どこかに載せるかもです
    
      

2016/04/20
TextViewの行間の調整する

#行間の調整


## android:lineSpacingMultiplier
* 文字に対する割合で設定できる

```
android:lineSpacingMultiplier=”1.5″
```

## android:lineSpacingExtra
* 静的にサイズを設定できる(サイズを固定したいならこっち)  

```
android:lineSpacingExtra=”15sp”
```


http://endoidou.hatenablog.com/entry/2015/09/13/174101
リセットCSSフレームワークのメモ


 リセットCSSとは各ブラウザが各々の歴史上の事情などで持っている、扱いづらい癖や、非互換性を解消するべく最初に読み込むCSSの決まり文句みたいなもの。
 
 コピペで使うこともい多いが、bowerなどで呼び出して管理した方が最新版に更新するときなど便利な気がする。
 
 ちょっと調べたので、幾つかのライブラリの癖などをメモ。

## reset.css
[meyerweb.com - CSS Tools: Reset CSS](http://meyerweb.com/eric/tools/css/reset/)

- 元祖。v2.0でhtml5にも対応。
- 原理主義的にリセットする。
- ユニバーサルセレクタを利用していない。昨今のブラウザでは利用しても構わないと思うし、新しいタグとかできたら動作が不安。

## Normalize.css
[Normalize.css: Make browsers render all elements more consistently.](http://necolas.github.io/normalize.css/)

- reset.cssにインスパイアされて作成された。
- 有用なデフォルトスタイルは残している。
- リセットのための範囲の外にある一般的なPCおよびモバイルのバグを修正している。
- デバッガを汚し過ぎないように配慮している。
- モジュール化されている。
- 豊富なドキュメント
- ブラウザサポート
  - Chrome (last two)
  - Edge (last two)
  - Firefox (last two)
  - Internet Explorer 8+
  - Safari 6+
  - Firefox ESR, Opera (last two),

**NPM**

```sh
npm install --save normalize.css
```

**Bower**

```sh
bower install --save normalize-css
```


## sanitize.css
[sanitize.css](https://jonathantneal.github.io/sanitize.css/)

- Normalize.cssと同じ作者が作成している。
- 有用なデフォルトはそのまま
- さまざまな種類のエレメントのスタイルがカスケードするように維持。
- バグの修正。ブラウザごとの異なるスタイルやバグを修正します。
- ユーザビリティの改善
- 最近の実装スタイルへの対応。
- ブラウザサポート
  - Chrome 47-48+, 
  - Edge 12-13+, 
  - Firefox 43-44+, 
  - Internet Explorer 10-11, 
  - Opera 34-35+, 
  - Safari 8-9+, 
  - Android 4.3-4.4+, iOS 7-8+, Windows Phone 8.1+.
  - 追加サポート Internet Explorer 9 と Safari 7.

**NPM**

```sh
npm install --save-dev sanitize.css
```

**Bower**

```sh
bower install --save sanitize-css
```


```css
@import url("node_modules/sanitize.css/sanitize.css");

/* overwrite defaults in sanitize.css */
:root {
	--root-box-sizing: border-box;
	--root-font-family: "Open Sans", sans-serif;
	--root-color: #333;
}
```

```less
@import "node_modules/sanitize.css/sanitize.less";

// overwrite defaults in sanitize.less
@root-box-sizing: border-box;
@root-font-family: sans-serif;
@root-color: #333333;
```


```scss
// overwrite defaults in sanitize.scss
$root-box-sizing: border-box;
$root-font-family: "Open Sans", sans-serif;
$root-color: #333333;

import "node_modules/sanitize.css/sanitize.scss";
```

--
## まとめ
デザインテーマの変更などはままあると思うので、sanitize.css が良いのかなと思います。
普及度や参照できる情報、とっつきやすさなどはNormalize.css のようなので、チーム開発などの場合にはこちらかと思います。
他にも幾つか出ているようなので、参考にしてコピペなどして折に触れて使用して見たいと思います。
Windowsで改行無しエコーをやりたい

文字列をファイル出力するとき、echoとリダイレクトを組み合わせますよね。
Jenkinsでパラメータをファイル渡しする際、改行を削らないといけなくて、`-n`オプションを良く使います。
````
% echo -n "__VERSION__=hoge" > params.txt
````
しかしWindowsのコマンドプロンプトには`echo -n`がありません。
なので対策についてググると、set /pを使う技について良く紹介されています。
````
set /p p=__VERSION__=hoge< nul > params.txt
````
しかしこれ、実は「空白文字を入力」＝エラー扱いなので、Jenkinsではそこでjobが止まります。なんてこった。

結局取った方法→pythonで1liner…
````
python -c "print('__VERSION__=hoge')" > params.txt
````

何か他にいい方法があったら教えてください。。。
独断と偏見で選ぶjavascriptの有能ライブラリ

# Moment.js

日付操作用のライブラリ。
javascriptで地味に面倒くさいフォーマットを指定して文字列化や日付の比較もお手の物。
moment-timezoneと組み合わせればタイムゾーンの設定も楽ちん。
日付を扱う部分のコードが非常にすっきりします。
[公式](http://momentjs.com/)

# Material Design Lite

Google製のデザインフレームワーク
公式ドキュメントに従ってクラスをつけるだけで今風なデザインが爆速で出来上がる。
画面のレイアウトやデザインにあまり時間をかけたくないというあなたに。

[公式](https://getmdl.io/)

# d3.js

データ可視化ライブラリ
全部自分でやらなければいけないが、その分自由度は凄まじく高い
公式にある事例集が見ているだけで楽しいが、すごすぎて若干引く

[公式](https://d3js.org/)
[事例(東京都内の風の様子をリアルタイムで描画しているらしい)](http://air.nullschool.net/)

# epoch.js

上記のd3.jsのプラグイン的なライブラリ
リアルタイムで動くグラフの描画に強い
シームレスに流れるグラフの描画がサクッとできる

[公式](http://epochjs.github.io/epoch/)
bashでApex(ルート)ドメインか否かを調べる方法

過去に作ったもの。
bashで関数化してあるのでコピペで使える。


```bash
function is_apex() {
        local domain=$1
        local APEX=
        echo $domain | grep "^www\." >/dev/null 2>&1
        if [ "$?" -eq 0 ] ; then
                APEX=`echo $domain | cut -c 5-`
                dig $APEX a | grep ".*IN.*[^SO]A.*[0-9.]\{7,15\}" >/dev/null 2>&1
                if [ "$?" -eq 1 ] ; then
                        return 2
                else
                        WITH_WWW=0
                fi
        else
                dig www.$domain a | grep ".*IN.*[^SO]A.*[0-9.]\{7,15\}" >/dev/null 2>&1
                if [ "$?" -eq 1 ] ; then
                        return 2
                else
                        APEX="$domain"
                        WITH_WWW=1
                fi
        fi
        whois $APEX | grep "^NOT FOUND\|^No match" >/dev/null 2>&1
        if [ "$?" -eq 1 ] ; then
                # Apex Domain.
                if [ "$WITH_WWW" -eq 1 ] ; then
                        return 0
                else
                        return 1
                fi
        else
                return 2
        fi
}
```

return 2が帰ってくればApexドメインあるいはwwwつきのドメインは存在しない(記述が少ないのでドメインが両方共存在しない場合もこちらになる)ことになり、
return 1が帰ってくれば両方共存在することになる。
return 0が帰ってくればもともと入力されたものがApexドメインであるということになる。

いいたいことはこれだけ。
bashは汎用的なのでWebでなにかドメインを活用するものを作る際などに便利だった。結局自分の中でこれだけ書いて没になったけど。

もっとシンプルな方法があったら教えて下さい。
Slackで二段階認証を有効化


### 手順

#### 1. 設定から二段階認証を有効にする

https://slack.com/account/settings#two_factor
にアクセスして、`Setup Two-Factor Authorization`ボタンを押下します。

![スクリーンショット 2016-04-20 18.54.06.png](https://qiita-image-store.s3.amazonaws.com/0/31268/cf0b9534-46c5-7fc9-c186-bf6fc95a9da5.png "スクリーンショット 2016-04-20 18.54.06.png")

#### 2. 認証方法を選択(APP)

Use an appを選択します。

![スクリーンショット 2016-04-20 18.54.31.png](https://qiita-image-store.s3.amazonaws.com/0/31268/2aed9392-be49-2ce6-a5c7-8403cf737160.png "スクリーンショット 2016-04-20 18.54.31.png")

#### 3. アプリをインストール

![スクリーンショット 2016-04-20 19.43.39.png](https://qiita-image-store.s3.amazonaws.com/0/31268/8f175c56-d91f-2076-110e-c3509de9844f.png "スクリーンショット 2016-04-20 19.43.39.png")

いくつか種類がありますが、`Google Authenticator`を自分のスマホにインストールします。
App StoreやGoogle Playで検索すれば出てきます。

![スクリーンショット 2016-04-21 13.41.44.png](https://qiita-image-store.s3.amazonaws.com/0/31268/25c87c84-174a-76dc-a9cd-5ae5668ab105.png "スクリーンショット 2016-04-21 13.41.44.png")

iOS: https://itunes.apple.com/jp/app/google-authenticator/id388497605?mt=8
Android: https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=ja

#### 4. QRコードをスキャンする

![スクリーンショット-2016-04-20-19.43.55.png](https://qiita-image-store.s3.amazonaws.com/0/31268/c13b0dba-852d-ff35-3239-8e142301ccfa.png "スクリーンショット-2016-04-20-19.43.55.png")

#### 5. 表示された認証コードを入力する

![IMG_1025-1.png](https://qiita-image-store.s3.amazonaws.com/0/31268/62891b8f-793e-ea31-83e5-123b48d97c15.png "IMG_1025-1.png")


#### 6. バックアップ用の電話番号を入力

オーナー権限の方はそのままバックアップ用の電話番号入力に進みます。
それ以外の方は8に進んでください。

https://slack.com/account/settings#two_factor

SMSで認証コードが送られるので、SMSが受け取れる電話番号を入力します。
国際番号付きなので、先頭の0は不要です。

![スクリーンショット 2016-04-20 19.10.56.png](https://qiita-image-store.s3.amazonaws.com/0/31268/9c07cd30-777d-22df-a25c-9691b1b47e0a.png "スクリーンショット 2016-04-20 19.10.56.png")

#### 7. 受信した認証コードを入力

![スクリーンショット-2016-04-20-19.12.49.png](https://qiita-image-store.s3.amazonaws.com/0/31268/ff638746-21ef-1b8c-1c75-81be5969c578.png "スクリーンショット-2016-04-20-19.12.49.png")

#### 8. バックアップ用のコードを保存する

![スクリーンショット-2016-04-20-19.11.53.png](https://qiita-image-store.s3.amazonaws.com/0/31268/53a75605-8291-7634-f7ee-d264acc8010a.png "スクリーンショット-2016-04-20-19.11.53.png")

端末を紛失した場合に備えて、バックアップ用コードを保存しておきます。
コードは一度しか使えませんので、計10回まではおっちょこちょいできますね。

### ログインの仕方

ID,PASS入力後、下記の画面に飛ばされますので、インストールした`Google Authenticator`に表示されている認証コードを入力すればログインできます。

![スクリーンショット 2016-05-25 13.59.45.png](https://qiita-image-store.s3.amazonaws.com/0/31268/9c5a31ad-3572-1885-3181-d9221a374b35.png "スクリーンショット 2016-05-25 13.59.45.png")
SSH の公開鍵認証のハマりどころ＆チェックポイント

## クライアント（ログインする）側

ｰ 秘密鍵と公開鍵のセットを作成する
- サーバ側に持っていくのは、公開鍵（秘密鍵じゃなくて）

## サーバ（ログインされる）側

- 公開鍵情報を保存する
- 公開鍵情報を保存するファイル名は、決まっている（ホームディレクトリ/.ssh/authorized_keys）
- 公開鍵情報を保存するファイル名は、```/ssh/etc/sshd_config``` で設定変更することもできる
- ファイル（authorized_keys）とディレクトリ（.ssh）の権限を、自分だけが読み書きできるように設定することが必要


## 参考にさせていただいたページ

- [SSHの公開鍵認証 - Qiita](http://qiita.com/abgata20000/items/161c49583f531afedda7)
- [「よく分かる公開鍵認証」～初心者でもよくわかる！VPSによるWebサーバー運用講座(2) - さくらのナレッジ](http://knowledge.sakura.ad.jp/beginner/3543/)
expressの既存プロジェクトをES6化する方法

expressの既存プロジェクトをES6化する際に色々と手こずったのでメモ。

#1.lebabを使って全てのjsファイルをES6に変換する。
・lebabをinstallする
`npm install -g lebab`
・lebabで全ファイルを変換する
`lebab es5.js -o es6.js`

lebab: http://lebab.io/

自動変換がうまくいっていっていない場合もあるので気をつける。
とくに、import、exportあたり。

#2.babelでコンパイルできるようにする
そのままexpressを起動するとimportでエラーがでる。

```
/Users/hage/test/app.js:5
import express from 'express';
^^^^^^

SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:139:18)
    at node.js:968:3
```

そこで、babelと利用しているPresetsをインストールする。
`npm install babel --save`
`npm install babel-preset-es2015 --save`　※es6の場合はこれ

presetsに関しては下記URLを参考
https://babeljs.io/docs/plugins/

#3.各種設定ファイルを配置する
下記ファイルをルートディレクトリに作成してpresetsを指定。jshintrcも設定しておく。

```lang:.babelrc
{
  "presets": ["es2015"]
}
```

```lang:.jshintrc
{
    "esversion": 6
}
```

#3.app.jsをラップする
ルートディレクトリにstart.jsを作成してapp.jsをラップする。

```lang:start.js
require('babel-register');
var app = require("./app.js");
```

package.jsonのstartも変更する

```lang:package.json
{
  "name": "sample-api",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node start.js"
  },
  	:
}
```

#4.expressを起動する
`npm start`で、変換が完了したexpressのプロジェクトを起動する。
※lebabの自動変換がうまくいっていない箇所はここでも発見できる。

参考
http://stackoverflow.com/questions/32346886/unexpected-reserved-word-import-in-node-js
春到来! TinyObjLoader で始めよう waveront .obj モデルローディング(2016 年版)

春到来! それは新しい C++ 出会いの季節ですね!

GW も間近に迫ってひと段落してきたこの季節, wavefront .obj モデルをロードして新しい自分にチャレンジしたくなりますね! 

たとえばマインクラフトデータを Mineways を使って .obj にエクスポートしたのを自分のツールで読んでみたいですね!

http://www.realtimerendering.com/erich/minecraft/public/mineways/


でも .obj のロードはクセがあってパーサ書くのめんどい... と思っていたズボラなアナタに朗報! 

世界中のみんなに愛され使われていると言っても過言ではない, シングルヘッダオンリーな .obj ローダである TinyObjLoader で始めて周りのみんなの視線を独り占めしましょう!

2016 年版では [C++ コードのデトックス](http://qiita.com/MitsutakaTakeda/items/6b9966f890cc9b944d75) も適用してキレイさとダイエットにも励みました!

https://github.com/syoyo/tinyobjloader/tree/develop
(2016 年版はもうちょっとテストとダイエットに励みたいので, まだ `develop` branch にあります. 
)

## 取得する

    $ git clone https://github.com/syoyo/tinyobjloader.git
    $ cd tinyobjloader
    $ git fetch
    $ git checkout -b develop origin/develop

あとは `tiny_obj_loader.h` を自分のプロジェクトにコピーして完了です.

## データ構造

2016 年版からちょっと変わったよ!

### attrib_t

```
typedef struct {
  std::vector<float> vertices;   // 'v'
  std::vector<float> normals;    // 'vn'
  std::vector<float> texcoords;  // 'vt'
} attrib_t;
```

`attrib_t` には頂点アトリビュートである `vertices`, `normals` and `texcoords` の一次元配列が格納されています. これはどのシェイプ(`shape_t`)にも共通です.

### shape_t

```
typedef struct {
  std::vector<index_t> indices;
  std::vector<unsigned char>
      num_vertices;               // The number of vertices per face. Up to 255.
  std::vector<int> material_ids;  // per-face material ID
  std::vector<tag_t> tags;        // SubD tag
} mesh_t;

typedef struct {
  std::string name;
  mesh_t mesh;
} shape_t;
```

`shape_t` は個々のシェイプ(形状)データが格納されます. シェイプは `o` もしくは `g` ごとに作成されます.

シェイプでは頂点インデックス(.obj で `f` 行で定義されるインデックス. vertex, normal, texcoord それぞれ. 定義されていないインデックスには 0x80000000(-2147483648)  が設定されます)と, face の面数(三角形の場合は 3, 四角形の場合は 4), per-face でのマテリアル ID を持ちます.

`tags` は optional で, OpenSubdiv 用の拡張です. 上級者向け.


## サンプル

![objview_bunny.png](https://qiita-image-store.s3.amazonaws.com/0/36275/65471cb5-8ab3-1180-a5ff-617f2674eb3b.png)

OpenGL で描画するサンプルが https://github.com/tinyobjloader/tinyobjloader/tree/master/examples/viewer にあります.
xcodeのシュミレーターがものすごく重くなった話とその解決策

## 起こった事
xcodeでの開発中、急にシュミレーターが遅くなり使い物にならなくなった

## 解決策
xcodeの設定からスローアニメーションの設定をoffにする

## 方法
**日本語表記の場合**
画面上記のメニューバーから
`デバッグ` > `スローアニメーションを切り替える`

**英語表記の場合**
同じくメニューバーから
`Debug` > `Slow Animation`

## 問題の原因
スローアニメーションを設定するためのショートカットが `⌘ + T`に設定されている為何かの拍子に押してしまった。 `⌘ + T`他のツールでかなり頻繁に使用してるので結構危うい...
フォントのまとめ

超厳選！Googleフォントおすすめ40選を用途別に紹介【導入方法解説付き】
http://lahtnas.hateblo.jp/entry/google-fonts

苦手なフォント選び・・・
ジャンル分けなどすごくわかりやすかったのでメモ。
AndroidのChromeアプリのヘッダーを1行のmetaダグで色変えする

AndroidのChrome。普段はグレーで当たり障りのない配色のヘッダー。

![マサトニックをChromeで検索](https://qiita-image-store.s3.amazonaws.com/0/55103/6554b3ad-0705-9dbd-5370-c5f5927c99f9.png)

これを次の画像のように、画面上部にあるヘッダーの色(テーマ)を変更できます。たった1行のmetaタグをHTML内に記述するだけで :sparkles: 

![cap2.png](https://qiita-image-store.s3.amazonaws.com/0/55103/d0201219-a091-405c-db75-8e3e091b9909.png)

# 条件
もちろん条件があります。

- Chromeのバージョンが39以降  
公開時点(2016/4/20)で最新が49.0.2623.105なのでそこら辺はあまり気にしないでいいか。
- **Android 5.0以降**  
残念ながら4系はサポートせずです。
- iOSは非対応のようです。

# ソースコード
ヘッダーを黒く染めたソースコードです。背景色を変えることで、文字色などは良しなに調整してくれます :+1: 

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="robots" content="noindex">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="theme-color" content="#000">
	<title>Android Google Chrome theme-color test</title>

	<style>
		body {
			background: #000;
			color: #fff;
		}
	</style>
</head>
<body>
Android 5以降のGoogle Chromeで閲覧すると、テーマカラーがBlackになります。
</body>
</html>
```

大切なのはこの記述です。これだけ！これだけ！

```html
<meta name="theme-color" content="#000">
```

簡単に他の色にも変えられる。

![cap3.png](https://qiita-image-store.s3.amazonaws.com/0/55103/e328ec8d-ef3c-d16b-5fe1-5f2de457f89d.png)

# まとめ
国内外のWebサイトを見ていてもあまり設定されていないですね。グレーのままじゃダサいときもあるので、コンテンツの世界観を演出するためにも設定したほうが良いかと思いました。とはいえ、ターゲットユーザーが少なすぎる、、、 :cyclone: 

# 参考リンク
[Support for theme-color in Chrome 39 for Android
](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)
Java Android drawCircleで描いた円の色を変える方法

#Java又はAndroidで,drawCircleで描いた円の色を変える方法

```java.circle    
// 描画用の準備
    paint = new Paint();
    paint2 = new Paint();
    paint.setColor(Color.GREEN);
    paint2.setColor(Color.CYAN);
```
- Paintクラスのインスタンスを色を変えたい円の個数分用意して、カラーをセット

- 上記の場合、paintとpaint2

- んで、drawCircleの引数のpaint部分にそれぞれ入れるだけ。

```java.circle
    canvas.drawColor(Color.BLACK);
    // GREENな円ができる  
    canvas.drawCircle(circleX, circleY, 60, paint);
    //CYAN(何色？？）な円ができる
    canvas.drawCircle(20,30,60,paint2);
```
​
Rails + Rspec 結合テストでエラー


```
NoMethodError: undefined method `call' 
```

Rack のテスト中に delete などのメソッドを実行する際に、
app という変数名があると名前が重なってエラーになるみたい。

```
describe "DELETE /api/v1/apps" do
  let(:app) { create(:app) }
  it do
     app
     expect { delete "/api/v1/hoges/1", { apikey: "xxxx" } }.to change { App.count }.from(1).to(0)
   end
end
```
     

Rails 4.2.4 + Ruby 2.2.3 の環境で再現。
1時間悩んだ・・・
Slack用勤怠管理Botの「みやもとさん」が初期化時にエラー発生

[Slack用勤怠管理Botの「みやもとさん」](https://github.com/masuidrive/miyamoto)をつかってみようとインストールしてみました。
現時点(2016-04-20)ではGoogle Apps Scriptの初期化処理でエラーが発生してしまうため、スクリプトを修正するなど、ちょこっと一手間追加してインストールを行いました。
という作業メモです。

main.gsの初期化(setUp)で休日の取得で参照している[URL](http://www.google.com/calendar/feeds/japanese@holiday.calendar.google.com)が403を返してるようでココでエラーが起きてしまっているようです。
ヘタレな自分はエラーのでないように修正するプログラマとしての正しい道を選ばずに、休日の設定は後回しにする方法を選びました。
つまり、以下のような修正をしました。

```diff:main.gs.diff
--- main.gs.O	2014-10-26 22:28:54.000000000 +0900
+++ main.gs	2016-04-20 17:14:07.000000000 +0900
@@ -608,15 +608,6 @@
     settings.set('無視するユーザ', 'miyamoto,hubot,slackbot,incoming-webhook');
     settings.setNote('無視するユーザ', '反応をしないユーザを,区切りで設定する。botは必ず指定してください。');

-    // 休日を設定
-    var url = 'http://www.google.com/calendar/feeds/japanese@holiday.calendar.google.com/public/full-noattendees?alt=json&max-results=1000&start-min='+DateUtils.format("Y-m-d", DateUtils.now());
-    var data = JSON.parse(UrlFetchApp.fetch(url).getContentText());
-    var holidays = _.map(data.feed.entry, function(e) {
-      return e['gd$when'][0]['startTime'];
-    });
-    settings.set('休日', holidays.join(', '));
-    settings.setNote('休日', '日付を,区切りで。来年までは自動設定されているので、以後は適当に更新してください');
-
     // メッセージ用のシートを作成
     new GSTemplate(spreadsheet);
```

patchをあてたmain.gsをGoogle Apps Scriptに貼り付けて初期化(setUp)を行うと完走します。

次に端折った休日の設定を手作業で追加します。
自動作成されるGoogleスプレッドシートの "_設定" シートのA4に"休日"を入力、B4に次の休日を適当に入力、C4に"日付を,区切りで。来年までは自動設定されているので、以後は適当に更新してください"を入力してください。(C4の文字列は不要かもしれないですが…)

以上の修正で「みやもとさん」を動かすことができました。
あ、Slackの管理ページのUIがREADME.mdの説明と若干異なっていますが、いい感じに読み替えてください。

Slackで勤怠管理できるのって便利便利。
Macportでmariadbをインストール

ちょっとうろ覚えなんだけど後でまたやるかもしれないのでメモしておく。

```
sudo port install mariadb-server
```

```
sudo -u _mysql /opt/local/lib/mariadb/bin/mysql_install_db
```

ここまでやって起動した？

```
sudo -u _mysql /opt/local/lib/mariadb/bin/mysqld_safe --datadir='/opt/local/var/db/mariadb'
```


そのあとrootのパスワード設定か？

```
/opt/local/lib/mariadb/bin/mysql_secure_installation
```


コマンドからつないでみる

```
/opt/local/lib/mariadb/bin/mysql -u root -p
```

php.iniを開いて

```
pdo_mysql.default_socket=/opt/local/var/run/mariadb/mysqld.sock
```


というように数カ所のdefault_socket部分に記入。
Python / Google Data APIを利用したGoogle Spreadsheetの作成

Google Spreadsheet自体を作成する方法について以下記載します。

OAuthの設定、および、スプレッドシートへのアクセスについては以下の記事が参考になりました。
[PythonからOAuth2.0を利用してスプレッドシートにアクセスする](http://qiita.com/koyopro/items/d8d56f69f863f07e9378)

また、Google Spreadsheetの作成自体については以下が参考になりました。
[docs_v3_example.py](https://github.com/google/gdata-python-client/blob/master/samples/docs/docs_v3_example.py)
[Create new spreadsheet (Google API / Python)](http://stackoverflow.com/questions/10527705/create-new-spreadsheet-google-api-python)

Python 2.7.10, gdata 2.0.18の環境で動作を確認しています。


```
#!/usr/bin/env python
# -*- coding: utf-8 -*-

from oauth2client.service_account import ServiceAccountCredentials
import gdata.docs.client

# name definitions
APP_NAME = 'GDataDocumentsAPISample'
name_spr = 'Sample Spreadsheet'

# resources for credential
json_key = 'gspread-test.json'
scope = ['https://docs.google.com/feeds']

# create goole data docs client
client = gdata.docs.client.DocsClient(source=APP_NAME)
client.http_client.debug = True
#client.http_client.debug = False

# create credentials
credentials = ServiceAccountCredentials.from_json_keyfile_name(json_key, scope)
auth_token = gdata.gauth.OAuth2TokenFromCredentials(credentials)

# authorise
auth_token.authorize(client)

# create document as spreadsheet
document = gdata.docs.data.Resource(type='spreadsheet', title=name_spr)
document = client.CreateResource(document)

# add ACL to  spreadsheet
acl_entry = gdata.docs.data.AclEntry(
    scope=gdata.acl.data.AclScope(value='hoge@foo.bar', type='user'),
    role=gdata.acl.data.AclRole(value='writer'),
)
client.AddAclEntry(document, acl_entry, send_notifications=False)
			    
print('Created:', document.title.text, document.resource_id.text)
```

少しハマったところとして…　Oauthを実行する場合のアカウントは自分のGoogleアカウントとは異なり、`name@projectname.iam.gserviceaccount.com` がownerとなり、デフォルトでprivateなのでacl_entryを設定してやらないとGoogle Drive上でSpreadsheetが表示できません。
Windows10 + Julia + PyPlot でグラフの描画

# 注意: この記事の情報は古いです
[2017年10月24日追記]


以下に書かれている情報はとても古く, 今は

Juliaをインストール → `Pkg.add("PyPlot")` → `using PyPlot` 

でOK. 必要なmatplotlibなどはanaconda経由で全て自動でインストールされる.

すでにmatplotlibなどが導入されている状態で, 新たにJuliaやPyPlotを導入する際にすでに存在するmatplotlibなどを使いたい場合は, 何かしら設定が必要らしいので各自で調べてください.



[2017年10月24日追記 ここまで]

# 以下は古い情報


WindowsにJuliaとPyPlotをインストールしてグラフを描画する, という記事はすでに[存在する](http://qiita.com/akmiyoshi/items/a2aca5369c8e3c11ae59)が, 情報が古いので, 自分用のメモも兼ねて, 新たに書くことに.
著者の環境は Windows10 64bit.

# Pythonをインストール
[公式サイト](https://www.python.org/)から必要な物をダウンロードして, インストール.
自分は64bit版Python 2.7をインストールしたが, Python 3シリーズで大丈夫かは未確認.
インストーラのデフォルトではPathを通さない設定になっているので, Pathを通す.


## pipをアップデート
必要なパッケージはpipで入れてしまえば良い. 
pipはデフォルトでPythonを入れた時に入っているはずなので, 特に新しく何かをインストールをする必要はない.

まずは, 

```
pip install -U pip
```

でpipそのものをアップデート.

## matplotlibをインストール
次に, 

```
pip install -U matplotlib
```

でmatplotlibをインストール. このとき, **依存関係にあるパッケージも全てインストールされる**ので, numpyなどを追加でインストールする必要はない.
もし心配であれば,

```
pip install -U パッケージ名
```

で必要なもの ([matplotlibのインストールガイド](http://matplotlib.org/users/installing.html)にある, 

> setuptools, numpy, python-dateutil, pytz, pyparsing, and cycler

たち) が最新版か確認すれば良い.

# Juliaをインストール
これも[公式サイト](http://julialang.org/)から必要な物をダウンロードして, インストール.
ただし, **Pythonとビット数(?)を合わせないといけない**. 例えば, インストールしたPythonが64bit版なら, Juliaも64bit版をインストールする.
インストール先は, 念のためCドライブ直下にしておいた方が良いと思う(が, これに意味があるのかは不明).

# PyPlotをインストール
Juliaを起動し, コマンドラインで

```
Pkg.add("PyPlot")
```

を実行する. しばらく待つとインストールが完了するはず.
これは1度だけでOK.

もし何かしらエラーが起きてインストールが成功しなかった場合は, 問題を解決したあとで,

```
Pkg.build("PyPlot")
```

を実行する.

## PyPlotをインクルード
実際にPyPlotを使いたい時には, Julia上で

```
using PyPlot
```

を実行する. 
一度実行すれば, Juliaを終了するまでは再度実行しなくて良い.
Juliaを再起動した場合は, 必要なときに実行する.

## 利用例
`using PyPlot` を実行した後に以下のようにすれば, $y = \sin x$のグラフが描画されるはず.

```
x = linspace(0, 2*pi, 100);
y = sin(x);
plot(x, y)
```
React+Reduxをした時のwindowサイズの変更検知


最近、Reduxの学習を始めてみました([1](http://blog.morizotter.com/2016/04/19/my-first-redux/),[2](http://blog.morizotter.com/2016/04/19/glance-at-redux-examples/))。一つ簡単なアプリを作ってみようとしてトライしたのですが、そこで、windowサイズの変更を検知したいと思いました。が、まだこの近辺の検索力が足りず、自作しました。Reduxの関連ツールとしてはReactReduxを使っています。

## 今回のやりかた

rootとなるJavascriptファイルに下記のように`addEventListner`を追加してみました。

```javascript:index.js
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import sampleApp from './reducers/SampleApp';
import App from './components/App';
import { changeScreenWidth } from './actions';

let store = createStore(sampleApp);

const rootEl = document.getElementById('root');

render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootEl
);

window.addEventListener('resize', () => {
  store.dispatch(changeScreenWidth(window.innerWidth));
});
```

変更をするactionを追加して、

```javascript:actions/index.js
export const changeScreenWidth = (width) => {
  return {
    type: 'CHANGE_SCREEN_WIDTH',
    screenWidth: width,
  };
};
```

reducerでstateに反映します。ここで`window.innerWidth`をしてもよかったのかもしれませんが、呼び出しもとで追加するようにしました。

```javascript:reducers/SampleApp.js
const initialState = {
  ...
  screenWidth: window.innerWidth,
};

const sampleApp = (state = initialState, action) => {
  switch (action.type) {
    ...
    case 'CHANGE_SCREEN_WIDTH':
      return Object.assign({}, state, {
        screenWidth: action.screenWidth,
      });
    default:
      return state;
  }
};

export default sampleApp;
```

## ご教授を＞＜

このやり方で動作としては問題ないのですが、考え方がおかしいとか、もっと簡単にやる方法があるとかあれば教えてください＞＜
PowerShell で関数名として使用可能な半角記号（１文字）

# 関数として定義可能で、実行可能な記号

```.ps1
function ! {'OK'}
function $ {'OK'} # 関数として定義できる！
function * {'OK'}
function / {'OK'}
function : {'OK'}
function = {'OK'}
function ] {'OK'}
function \ {'OK'}
function ^ {'OK'}
function _ {'OK'}
function ~ {'OK'}
```



# エイリアスを削除すれば、関数として定義可能で、実行可能な記号

```.ps1
Remove-Item Alias:% -Force
function % {'OK'}

Remove-Item Alias:? -Force
function ? {'OK'}
```


# 関数として定義可能だが、実行不可能な記号

```.ps1
function + {'OK'} # 単項演算子 '+' の後に式が存在しません。
function - {'OK'} # 単項演算子 '-' の後に式が存在しません。
function , {'OK'} # 単項演算子 ',' の後に式が存在しません。
function . {'OK'} # パイプライン要素の '.' の後に式が存在しません。
function [ {'OK'} # '[' の後に型名が存在しません。
```


# 関数として定義不可能な記号

```
function " {'OK'}
function # {'OK'}
function & {'OK'}
function ' {'OK'}
function ( {'OK'}
function ) {'OK'}
function ; {'OK'}
function < {'OK'}
function > {'OK'}
function @ {'OK'}
function ` {'OK'}
function { {'OK'}
function | {'OK'}
function } {'OK'}
```
OS Xで強制終了できないアプリケーションがある場合の対処

# 症状

- アクティビティモニタを見てもpsを見てもそのアプリケーションのプロセスはもう動いていない
- しかし「アプリケーションの強制終了」の一覧にはそのアプリケーションが残っている
- 「アプリケーションの強制終了」からそのアプリケーションを終了しようとしてもなにも反応がない
- Dockのアイコンをクリックしてもなにも反応がない（ぴょんぴょんしない，起動しない）

筆者の環境ではよくFirefoxを強制終了したときにこういう状態になります．

# 対処法

http://apple.stackexchange.com/questions/188259/cant-kill-preview-app/192467#192467

```
sudo killall launchservicesd # これで再び起動できるようになる
killall Dock # これもしないと起動してもDockに表示されないままになる
```

# 筆者の環境

MacBook Pro (Retina, 15-inch, Mid 2014)
OS X 10.11.4
Bottom navigationの使いどころを整理する


2016年3月、[Material Designガイドライン](https://www.google.com/design/spec/components/bottom-navigation.html)にBottom navigationが追加され、物議を醸しました。それまでBottom navigationはむしろ非推奨のデザインとされていたからです。

とはいえ、2015年の終わりあたりからはGoogle+、Google Photosにも取り入れられており、使いどころを間違えなければ利用を推奨されていくコンポーネントなのでしょう。

どういう時にどういう意図で使うべきなのかよくわかってなかったので、ガイドラインを読みながら整理しておきます。自分の想像も入りますので「それは違うんじゃないの？」という意見があればコメントをお願いします。


# そもそも何のために追加されたの？
Usageによれば、『トップレベルのビューに素早くワンタップでアクセスできるコンポーネント』として追加されたようです。自分の理解では、NavigationDrawerのアイテムと同じレベルの要素をよりアクセスしやすい位置に置くという目的のためだと考えています。

Google+やGoogle Photosを触ってみてもあんまりイケてると思えないかもしれないですが、やはり画面下部に表示されたボタンというのは抜群に押しやすいです。おそらくGoogle+でA/Bテストしてみて遷移先の数字がよかったので本採用となったのではないでしょうか。


# NavigationDrawerとの使い分けは？
NavigationDrawerじゃダメなの？と思っちゃいますよね。答えは「NavigationDrawerでもいい」です。ガイドラインの中でも、Bottom navigationの要素が6つ以上になる時はNavigationDrawerのほうがいいよ、と書いてあります。

NavigationDrawerは、携帯端末という限られたスペースの中でキーとなるビューへの導線をコンパクトにまとめるためのコンポーネントとして使われてきました。ただし、ユーザーの直接見えるところに表示されてはおらず、『NavigationDrawerを表示する』という1ステップを踏む必要があるという欠点があります。

ユーザーに、より簡単にアクセスしてほしいビューへの導線が複数あるなら、NavigationDrawerよりBottom navigationを採用した方がいいかもしれません。そういう意味だと、グロース施策の1つとして考えてみるのもよさそうです。


# Tabとの使い分けは？
Tabじゃダメなの？と感じると思うんですが、自分の意見としては別にTabでもいいと思います。

ガイドラインの言葉を借りるなら、「同じくらいの重要度を持つトップレベルの目的地」であればBottom navigationを使った方がいいかもしれません。

個人的な意見としては、NavigationDrawerに入れるレベルの要素以外はTabでいいんじゃないかなと思います。例えば、メディアアプリの中の『音楽』『本』『動画』『画像』のような要素であれば、Bottom navigationの方が向いていそうです。『ポップ』『ロック』『クラシック』のような要素であれば、Tabの方が向いているかもしれません。

Tabとの共存についてはガイドラインには「気をつけろよ」と書かれていますが、具体的に気をつけなければいけないポイントは「Tabはスワイプで移動できることを期待させる」というところだと思います。あとは実装面で言えばBottom navigationのトランジションはFadeにすべきというところですかね。

個人的には、TabとBottom navigationを併用するとコンテンツの見える範囲が小さくなって結構圧迫感があるので、他に情報を整理する手がないか一考してみた方がいいんじゃないかなぁと思います。

![Slack.png](https://qiita-image-store.s3.amazonaws.com/0/15267/bc0cc936-d094-ceb3-b6a6-f3667ae4980e.png "Slack.png")


# どういうケースで使うのがいいの？
ここはガイドラインにわりと明確に記載されています。「3〜5つのトップレベルの要素がある時」です。

2つであれば、Tabを使うべきだと記されています。（正直ここの使い分けの説明はあんまり指針が定まってない気がしますが）

![Bottom_navigation_-_Components_-_Google_design_guidelines.png](https://qiita-image-store.s3.amazonaws.com/0/15267/b9737f0e-6c63-eeb4-7be4-7e12574e2b43.png "Bottom_navigation_-_Components_-_Google_design_guidelines.png")


逆に6つ以上の時はボタン同士が押しにくいしNavigationDrawerを使うべきだと記されています。

![Bottom_navigation_-_Components_-_Google_design_guidelines.png](https://qiita-image-store.s3.amazonaws.com/0/15267/2968609c-74c0-e4a5-591a-cb1eaa8ba209.png "Bottom_navigation_-_Components_-_Google_design_guidelines.png")


気をつけるところとしては、現在画面下部に表示するコンポーネントとしてSnackbar、BottomSheet、FloatingActionButtonがあるので、z軸の重なりに注意しなければならないという点ですね。

----
まとめてみましたが、Tabとの使い分けのあたりは正直まだしっくりきていません。
今後導入しているアプリをチェックして考えていこうと思います。

[参考リンク]

* [Bottom navigation](https://www.google.com/design/spec/components/bottom-navigation.html)
* [Bottom Navigation on Android — FAQs & suggested practices](https://medium.com/@raveeshbhalla/bottom-navigation-on-android-faqs-suggested-practices-141f4975be4#.awyt592in)
atomでついうっかりcmd-qで閉じてしまう問題

# 解決される問題
* atomが突然消滅する
    * cmd-wと間違えてcmd-q押しちゃうの俺だけ？
* atomで複数プロジェクトあげてて
    * →こっちだけ閉じよう cmd-q
        * →atomが突然消滅
            * 俺だけ？

# 解決策
[maybs-quit](https://atom.io/packages/maybs-quit)

![](https://i.gyazo.com/04e9d6dd586379390dfbcf8df1a72019.png)

そうなの、それを聞いて欲しかったの。
涙が止まらない。
Apache の読み込みが非常に遅い - "can't apply process slot for error"

エラーログに
``mod_fcgid: can't apply process slot for /var/www/cgi-bin/cgi_wrapper/cgi_wrapper``
と表示された場合、fcgidのプロセスが足りないので、増やすといい。

``/etc/httpd/conf.d/fcgid.conf``
の
``FcgidIOTimeoutとFcgidMaxProcesses``
を増やす
配列にfirst, lastメソッドを生やす

JavaScript1.8から配列オブジェクトにmap, filter, reduce, some, everyと集合演算メソッドががさっと搭載されて随分と使いやすくなりました。
でもあれが足りませんね。first, lastメソッド。条件に合う最初の、もしくは最後の要素を返してくれるメソッド。reduceでも書けないことないんですけど適合したらbreakという処理にならないので無駄な判定が走りますし避けたいです。

そんなときにforループを書かなくてもいいように、生やしましょうfirst, lastメソッド。TypeScriptで。

```ts
/** Extends array object */
interface Array<T> {
    /** Returns the first element that satisfies the predicate */
    first(predicate:(element:T) => boolean, defaultVaule: T): T;
    /** Returns the last element that satisfies the predicate */
    last(predicate:(element:T) => boolean, defaultVaule: T): T;
}

Array.prototype.first = function (predicate: (element) => boolean, defaultVaule) {
    for (var i: number = 0; i < this.length; i++) {
        if (predicate(this[i])) return this[i];
    }
    return defaultVaule;
};
Array.prototype.last= function (predicate: (element) => boolean, defaultVaule) {
    for (var i: number = this.length; i-- > 0;) {
        if (predicate(this[i])) return this[i];
    }
    return defaultVaule;
};
```
Fess10 のJSON APIを試してみた

FessのJSON APIの機能を試してみます。

Fess10の導入記事はこちら( [Fess10の導入 Fess9との違いなど](http://qiita.com/tonkatu05/items/34ee36e0193340be88bb) )

# 概要

JSON APIについては [Fessの公式サイト](http://fess.codelibs.org/ja/articles/article-3.html)に詳しく載っています。
今回は公式サイトを参考にしてApacheのローカル環境でJSON APIを利用するチュートリアル的なものを書いていこうと思います。

# 環境構築

今回使用した環境です。

* OS : Ubuntu 14.04 LTS
* Fess 10.0.3
* Apache 2.4.7

## 1.Fessのインストール

Fess のインストールについては公式サイトや [Fess10の導入 Fess9との違いなど](http://qiita.com/tonkatu05/items/34ee36e0193340be88bb) を参考にしてください。

## 2.Apache のインストール

Ubuntuなら
`$ sudo apt-get install apache2`
で簡単にインストールできます。
`$ apachectl -v`
でバージョンを確認してみましょう。
http://localhost にアクセスするとApacheのトップ画面が表示できるようになっています。

Ubuntu以外のインストール方法はググればでてくると思います。

# Fessで任意のサイトをクロール

Fessを起動した状態で http://localhost:8080/admin にアクセスします。

[使ってみる (Fess10の導入 Fess9との違いなど)](http://qiita.com/tonkatu05/items/34ee36e0193340be88bb#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B) を参考にして適当にクロールしておきます。

適当な単語で検索して、ちゃんとクロールできているかどうか確認しておきましょう。

![search.png](https://qiita-image-store.s3.amazonaws.com/0/69140/863f4582-ef0d-013d-93ab-c4eccf3d65d5.png)

# index.htmlとfess.jsを作成

ここからは [Fessの公式サイト](http://fess.codelibs.org/ja/articles/article-3.html) を参考に(完コピ)してindex.htmlとfess.jsを作ります。

fess.js の 
`var baseUrl = "http://search.n2sm.co.jp/json?callback=?&q=";`
の部分は
`var baseUrl = "http://localhost:8080/json?&q="`
に変えておきましょう。

作ったらそれぞれ `/var/www/html/jsonapitest/` 直下に置いてみます。
(DocumentRootが `/var/www/html` になっていることを前提としています。) 

http://localhost/jsonapitest/ にアクセスしてみましょう。

![jsonapitest.png](https://qiita-image-store.s3.amazonaws.com/0/69140/8e857809-d80c-2417-a97b-0f321bdb4b0c.png)

殺風景な検索フォームが現れていると思います。

ここに適当な単語を入力して検索してみます。

![search-jsonapi.png](https://qiita-image-store.s3.amazonaws.com/0/69140/a358b73c-15d6-55ea-2f3d-811c37287fe3.png)

検索結果が現れました！感動的ですね。

# まとめ

このようにFessの JSON APIを使えば自前のデザインで簡単にFessの検索結果を表示させることができます。検索結果を開発言語に依存しない形式で扱えるので、 Fess をJava以外のシステムにも統合しやすいと思います。
Java8のラムダ式

今更ですがJava8らしいコードでプログラミングしたいなーと思ったのでさわりの部分軽くまとめてみます。

# Java8の主な新機能
1. ラムダ式
2. メソッド参照
3. Stream API

今回はラムダ式について

## ラムダ式
**抽象**メソッドが**１つ**定義されている**インターフェース**を「関数型インターフェース」といいます。
この関数型インターフェースを実装してインスタンスを生成するのが「ラムダ式」です。

Java8で追加されたメソッドに[Iterable#forEach()](https://docs.oracle.com/javase/jp/8/docs/api/java/lang/Iterable.html)があります。
このIterable#forEach()が引数にとる[Consumer<? super T> action](https://docs.oracle.com/javase/jp/8/docs/api/java/lang/Iterable.html#forEach)は

> これは、accept(Object)を関数メソッドに持つ関数型インタフェースです。

とあるように関数型インターフェース。
ということでIterable#forEach()を利用して匿名クラスの書き方とラムダ式を比較してみたいと思います。

```java:匿名クラスで書くと
import java.util.Arrays;
import java.util.List;
import java.util.function.Consumer;

public class Test {
  public static void main(String[] args) {
    String[] array = { "1", "2", "3" };
    List<String> list = Arrays.asList(array);
    Consumer<String> action = new Consumer<String>() {
      @Override
      public void accept(String t) {
        System.out.println(t);
      }
    };
    list.forEach(action);
  }
}
```

匿名クラスを書くのにあれこれと追加をしなければならないです。

```java:ラムダ式で書くと
import java.util.Arrays;
import java.util.List;
import java.util.function.Consumer;

public class Test {
  public static void main(String[] args) {
    String[] array = { "1", "2", "3" };
    List<String> list = Arrays.asList(array);
    Consumer<String> action = (String t) -> {
      System.out.println(t);
    };
    list.forEach(action);
  }
}
```

簡単に書け・・・
あれ？どんな構造になってんだこれ？

```:ラムダ式の構造
(関数型インターフェースのメソッドの引数の型 関数型インターフェースのメソッドの引数) -> {処理;}
```

この構造を意識して匿名クラスの部分とラムダ式の部分を見比べてみる。

```java:匿名クラスの部分
    Consumer<String> action = new Consumer<String>() {
      @Override
      public void accept(String t) {
        System.out.println(t);
      }
    };
```

```java:ラムダ式の部分
    Consumer<String> action = (String t) -> {
      System.out.println(t);
    };
```

引数と中の処理は残し
newする部分とメソッド名の宣言は省略され
->(アロー記号)を間に挟んでいる。

### 省略したラムダ式の書き方
実はラムダ式は以下のルールに従い更に省略ができる。

 - コンパイラの推論が働く場合は引数の型は不要

```java:ラムダ式(型推論)
    list.forEach((t) -> {System.out.println(t);});
```

[Iterable#forEach()](https://docs.oracle.com/javase/jp/8/docs/api/java/lang/Iterable.html#forEach)の動作は以下のようになる

```java:引用
for (T t : this)
    action.accept(t);
```

List\<String\>の場合は中はStringという推論がはたらくので
上の「t」の型「String」が省略できるようになる。

 - 型の省略をしたのち引数を囲むカッコは引数が１つなら省略できる
 - 
```java:ラムダ式(引数１つ)
    list.forEach(t -> {System.out.println(t);});
```

 - 処理が１つの式で完結する場合
    - 値を返さないメソッドなら、処理が１つの式で完結する場合、ブロック記号({})や式のセミコロンは省略でき

    ```java:ラムダ式(処理１つ)
    list.forEach(t -> System.out.println(t));
    ```

    - 値を返すメソッドなら、処理がreturnの１つの式で完結する場合、更にreturnも省略できる

理解が間違っている部分などありましたらコメントいただけますと嬉しいです。

### 参考
 - [Java 8：ラムダ式、パート1](http://www.oracle.com/technetwork/jp/articles/java/architect-lambdas-part1-2080972-ja.html)
Windows環境でLinux環境を作った時のメモ

# VMWareのインストール
公式ページからインストールしようとすると、なぜかうまくいかなかった。手こずるようなら
バージョンを指定して、Appのリポジトリ的なサイトからダウンロードしてきたほうがいいかも。。。
[VMware-player-6.0.2-1744117.exe](http://filehippo.com/jp/download_vmware_player/tech/57380/)

ちなみにVirtualboxだと、CentOSインストールでいきなりとまったり、エラーがかなりでた。


# CentOS6.5をインストール

* CentOS-6.5-x86_64-bin-DVD1.iso
* CentOS-6.5-x86_64-bin-DVD2.iso

残りの作業についてはここが参考になった
[Windows上でLinuxを使おう CentOS 6.5 on VMware Player](http://fa11enprince.hatenablog.com/entry/2014/05/11/041933)
EclipseでAndroidプロジェクトのレイアウトを表示時に「This version of the rendering library is more recent than your version of ADT plug-in. Please update ADT plug-in」エラー

## 事象
activity.xml を Graphical Layout で開こうとすると以下のエラーが表示され、レイアウトの表示が行われなかった。
>This version of the rendering library is more recent than your version of ADT plug-in. Please update ADT plug-in

## 原因
プレビューに使用されているSDKバージョンとレイアウトが作成されたSDKのバージョンが適合していない。

## 対応
![160420-0001.png](https://qiita-image-store.s3.amazonaws.com/0/43078/2018b495-cc0d-b76c-6b6c-b8c0638175ef.png)
画像のプルダウンメニューから適切なバージョンを選択する。
Automatically Pick Best は判定を誤ることがあるので使わない方がベター。
windows ユーザプロファイル格納先を変更する（Windows server 2008 R2）

#はじめに
ユーザプロファイルがデフォルトだとc:\Usersに保存されてしまうので、ディスクを圧迫したりします。
色々と手法はあるようですが、安全で簡単なものを選びました。

#変更方法
①新しいプロファイルの格納先ディレクトリを作成します。
　例： D:\Users

②レジストリエディタを起動します。
`regedit`

③以下のキーを探します。
`HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList`

・事前バックアップ
　「ProfileList」を選択して「エクスポート」します。
・この配下にある「ProfilesDirectory」を変更します。
　※デフォルトでは「%SystemDrive%\Users」が設定されています。
　
　例：　D:\Users

④「ProfileList」配下のフォルダを展開して各フォルダの「ProfileImagePath」の値を見ます。
　ここでどのユーザがどこにプロファイルを格納しているかが解ります。
　ドライブを変更したいユーザのレジストリを削除します。

以上です。

#設定変更後の動き
・再起動/ログオフ等は不要です。即時反映されます。
・設定を実施したサーバに初ログインのユーザ／④でレジストリ削除したユーザ　が設定した格納先ディレクトリ配下にプロファイル作成するようになります。

#注意点
・ユーザ毎のレジストリ削除時にユーザがログインしている場合は、一度ログオフをすると「ソース：User Profile Service ID:1500」のエラーが出てログインできなくなります。
⇒対処：該当ユーザのレジストリを復旧すると再度ログインできるようになります。
※ユーザ単位でのレジストリエクスポートをお勧めします。
https://support.microsoft.com/ja-jp/kb/947215

・変更後にユーザがログインする度に「ソース：User Profile Service イベントID：1530」の警告がでるようになるようです。使用していて問題はないので、気にしなくて良さげです。

#他留意点
旧プロファイルがCドライブに残るので、移行や削除が必要となります。
新プロファイルはユーザがログインして初めてできますので、事前移行は難しいかと思われます。
各自に実施して貰う形がいいかと思われます。

#旧プロファイルの削除方法
管理者で削除は可能となりますが、どうしても消えない場合があります。
以下のコマンドで何とか消せました。
何回かやってGUI上でフォルダを消してみてください。
移動ユーザプロファイルを使っている場合も、この削除方法は有効だと思います。

```
rem 強制的に権限をローカル管理者のものにする
takeown /F c:\Users\ユーザ名 /D Y /R /A

rem 特定のユーザの権限を再付与する
icacls c:\Users\ユーザ名 /setowner 権限付与したいユーザ名 /T /C

rem 存在しないファイルがありますとかエラー出るファイルの削除
del /F /S /Q \\?\c:Users\ユーザ名

rem 隠しファイルの削除
del /F /S /Q /A H c:\Users\ユーザ名

rem 読み取り専用ファイルの削除
del /F /S /Q /A R c:\Users\ユーザ名
```
jsonのパースで出たエラーの解決方法 lib/ruby/2.1.0/json/common.rb:155:in `parse': 795: unexpected token at ': [{ (JSON::ParserError)

初めてjsonをパースしてみましたが、エラーが出てしまいました。
```
/Users/home/.rbenv/versions/2.1.4/lib/ruby/2.1.0/json/common.rb:155:in `parse': 795: unexpected token at ': [{ (JSON::ParserError)
```
コードはこんな感じです。

```rb
require 'json'

json_file = File.open('test.json').read
hash = JSON.load(json_file)
puts hash
```
今回のjsonファイルはWebサイトから切り出してきたものだったので、ファイルが悪いのかコードが悪いのかチェックするためにjsonファイルを取得できるサイトを見つけてHTTP通信で取得してみました。

```rb
require 'json'
require 'open-uri'

json_file = open('https://hogehoge/hoge').read
hash = JSON.load(json_file)
puts hash
```
こっちは問題なし！切り出し方法が悪いということでチェックしてくれるツールを探した所、発見。

[JSONLint](http://jsonlint.com/)

JSONファイルをコピペするとエラー箇所を教えてくれます。
今回はダブルクオーテーションで囲われていない文字列がエラーを出してました。