OmniAICreator/Qiita-1.07M huggingface dataset:
atomのパッケージインストール

      apm install activate-power-mode@2.0.0  atom-beautify@0.30.1  autocomplete-python@1.8.64  busy-signal@1.4.3  convert-to-utf8@0.2.4  editorconfig@2.2.2  file-icons@2.1.7  flex-tool-bar@0.12.0  git-plus@7.9.3  git-status@0.3.4  goto-definition@1.3.3  highlight-column@0.5.2  intentions@1.1.2  japanese-menu@1.13.0  kite@0.28.0  language-plantuml@0.2.0  linter@2.2.0  linter-eslint@8.2.1  linter-ui-default@1.6.1  markdown-preview-plus@2.4.9  markdown-writer@2.6.5  merge-conflicts@1.4.5  minimap@4.28.2  minimap-pigments@0.2.2  multi-cursor@2.1.5  pigments@0.39.1  plantuml-viewer@0.7.1  platformio-ide-terminal@2.5.1  pretty-json@1.6.3  project-manager@3.3.5  python-tools@0.6.9  tablr@1.8.3 tool-bar@1.1.0


##atom package

    ├── activate-power-mode@2.0.0
    ├── atom-beautify@0.30.1
    ├── autocomplete-python@1.8.64
    ├── busy-signal@1.4.3
    ├── convert-to-utf8@0.2.4
    ├── editorconfig@2.2.2
    ├── file-icons@2.1.7
    ├── flex-tool-bar@0.12.0
    ├── git-plus@7.9.3
    ├── git-status@0.3.4
    ├── goto-definition@1.3.3
    ├── highlight-column@0.5.2
    ├── intentions@1.1.2
    ├── japanese-menu@1.13.0
    ├── kite@0.28.0
    ├── language-plantuml@0.2.0
    ├── linter@2.2.0
    ├── linter-eslint@8.2.1
    ├── linter-ui-default@1.6.1
    ├── markdown-preview-plus@2.4.9
    ├── markdown-writer@2.6.5
    ├── merge-conflicts@1.4.5
    ├── minimap@4.28.2
    ├── minimap-pigments@0.2.2
    ├── multi-cursor@2.1.5
    ├── pigments@0.39.1
    ├── plantuml-viewer@0.7.1
    ├── platformio-ide-terminal@2.5.1
    ├── pretty-json@1.6.3
    ├── project-manager@3.3.5
    ├── python-tools@0.6.9
    ├── tablr@1.8.3
    └── tool-bar@1.1.0
コラージュテンプレート自動生成

複数の画像を組み合わせて1枚の画像を作る，コラージュというものがある．
ほとんどのコラージュサービスは，コラージュテンプレートに画像を埋め込むことでこれを実現する．
今回はこのコラージュテンプレートを確率的に生成してみようと思う．

これは，1つの長方形を$n$個の長方形に分割することで実現できる．
この手順を確率的に表現して，乱数のseedを変えることでテンプレートを無限に生成できるようにする．与えるのは$n$のみである．

1ステップで領域を1つ分割するとする．
選ばれる領域は，カテゴリ分布に従うとする．一様分布でも良いが，領域が大きいところを優先的に分割したいみたいな場合を想定して多項分布にしている（今回のコードでは一様分布と同じ）．最初は1つの領域しかないので，これが選ばれる．次は2つあるのでどちらかを選び分割する．次は3つあるので...といった具合だ．

さて，分割する領域を決定したあとはこれをどう分割するかを決める．
分割というのは，直線（4次元以上だと超平面）を一つ定めることに対応する．
つまり，直線$w^T x - b$の，$w$と$b$を定めれば良い．

なお，今回は斜めの分割はしないことにする．
そうすると，分割の仕方は縦方向と横方向の2つしかない．
つまり，$w = [1 \ 0]^T$または，$w = [0 \ 1]^T$のみである．
今回は，分割の仕方はベルヌーイ分布に従うとする．

こうすると，残るはbを決めるだけだ．これは一様分布に従うとする．
$b = [b_1 \ b_2]$として，$b \sim U(0, w)$，$b \sim U(0, h)$とする．
ただし，$w$は分割する領域の横幅で，$h$は分割する領域の縦幅である．
ここは真ん中らへんが優先的に分割されるよう，正規分布とかにしても良いかもしれない．

以上で手順は終了．実験してみた．コードは最後に添付する．
$n = 7$の例を示して終わりにする．

![collage.png](https://qiita-image-store.s3.amazonaws.com/0/37248/b4ec8f69-c547-0331-b2cd-dff6053d8854.png)

```py3
import matplotlib.pyplot as plt
import numpy as np
from scipy import stats

def generate_template(n, width, height, random_state=1, max_random_state=10000, offset=0):
    L = [np.array([offset, offset, width-offset, height-offset])]
    random_state_lists = stats.randint.rvs(0, max_random_state, size=(n-1, 4), random_state=random_state)

    for random_state_list in random_state_lists:
        n_areas = len(L)
        if n_areas == 1:
            i = 0
        else:
            p = np.repeat(1 / (n_areas + i), n_areas)
            x = stats.multinomial.rvs(1, p, size=1, random_state=random_state_list[0])[0]
            i = x.argmax()

        y = stats.bernoulli.rvs(0.5, size=1, random_state=random_state_list[1])[0]
        if y == 0:
            b = stats.uniform.rvs(L[i][0], L[i][2] - L[i][0], size=1, random_state=random_state_list[2])[0]
            #b = stats.uniform.rvs(L[i][0], L[i][2] - L[i][0], size=1, random_state=random_state_list[2])[0]
        else:
            b = stats.uniform.rvs(L[i][1], L[i][3] - L[i][1], size=1, random_state=random_state_list[3])[0]
            #b = stats.uniform.rvs(L[i][1], L[i][3] - L[i][1], size=1, random_state=random_state_list[3])[0]
        if y == 0:
            area1 = np.array([L[i][0], L[i][1], b-offset/2, L[i][3]])
            area2 = np.array([b+offset/2, L[i][1], L[i][2], L[i][3]])
        else:
            area1 = np.array([L[i][0], L[i][1], L[i][2], b-offset/2])
            area2 = np.array([L[i][0], b+offset/2, L[i][2], L[i][3]])
        L.pop(i)
        L.append(area1)
        L.append(area2)
    return L

L = generate_template(7, 1, 1, random_state=3, offset=0)
colors=["b", "g", "r", "c", "m", "y", "k"]
fig = plt.figure()
ax = fig.add_subplot(111)
for l_i, c_i in zip(L, colors):
    rect = plt.Rectangle(xy=[l_i[0], l_i[1]], width=l_i[2] - l_i[0], height=l_i[3] - l_i[1], facecolor=c_i, fill=True)
    ax.add_patch(rect)
plt.tight_layout()
plt.show()
```
Appveyor で CMake を使用して MinGW の makefile を作成する際の注意点について


CMake で　-G "MinGW Makefiles"　の引数を設定して
makefile を作成しようとすると、
Git のパスに存在する sh.exe を実行してしまうので
以下のように環境変数を削除後、MinGW へのパスを通す必要がある。

set PATH=%PATH:C:\Program Files\Git\usr\bin;=%
set PATH="C:\MinGW\bin"

参考
CMake building for MinGW issue with Git sh.exe 
http://help.appveyor.com/discussions/problems/3193-cmake-building-for-mingw-issue-with-git-shexe
QFixHowmの全文検索にripgrepを使う設定

Vim用の[QFixHowm](https://sites.google.com/site/fudist/Home/qfixhowm)の全文検索でGNU Grepの代わりに、[ripgrep](https://github.com/BurntSushi/ripgrep)を使い、検索を高速化する設定方法。

```vim
" ripgrepを使う（PATHは通してある前提）
let mygrepprg='rg'
" 実行時のオプションをripgrep用に変更（GNU Grepと同じ出力になるように）
let MyGrepcmd_useropt='-nH --no-heading --color never'
let MyGrepcmd_regexp=''
let MyGrepcmd_regexp_ignore='-i'
let MyGrepcmd_fix='-F'
let MyGrepcmd_fix_ignore='-F -i'
let MyGrepcmd_recursive=''
" gipgrepにファイルパターンとして「*」「*.*」を渡したらエラーになったのでその対策
let MyGrep_GrepFilePattern='.'
```

# 参考
- [本家howm（emacs用）](http://howm.osdn.jp/index-j.html)
- [QFixHowm（Vim用）](https://sites.google.com/site/fudist/Home/qfixhowm)
- [ripgrep](https://github.com/BurntSushi/ripgrep)
- [次世代の高速検索ツール ripgrep を howm で使う](http://extra-vision.blogspot.jp/2016/10/ripgrep-howm.html)
    - 本家howmでripgrep使う設定を公開されている オプションを参考にした
フーリエ級数展開可視化

箱のような形を以下のようなフーリエ級数で展開し、N=Mを増やしていったときにどんな感じになるかの確認。

```math
\begin{eqnarray}
f(x,y)=\sum_{m=1}^{M}\sum_{n=1}^{N}b_{mn}sin\frac{mπ}{L}x・sin\frac{nπ}{L}y
\end{eqnarray}
```

![fourier_n_1-2.PNG](https://qiita-image-store.s3.amazonaws.com/0/38382/7d570514-f6e2-b945-d9e9-7213e088bf6a.png)
![fourier_n_4.PNG](https://qiita-image-store.s3.amazonaws.com/0/38382/c574fd17-96b9-3cf0-6e8e-f330ee1f6141.png)
![fourier_n_6.PNG](https://qiita-image-store.s3.amazonaws.com/0/38382/b4f30f2a-ab5a-61cb-3e86-38a9254e82ee.png)
![fourier_n_10.PNG](https://qiita-image-store.s3.amazonaws.com/0/38382/1e2ecf95-a1db-9a41-ccc0-8f6eb27e342b.png)
![fourier_n_15.PNG](https://qiita-image-store.s3.amazonaws.com/0/38382/c9e3cfb6-2d97-5735-1c46-43cd14b3decb.png)
![fourier_n_22.PNG](https://qiita-image-store.s3.amazonaws.com/0/38382/babd78e8-0c2b-8c7e-7972-569293e8ac3c.png)
![fourier_n_30.PNG](https://qiita-image-store.s3.amazonaws.com/0/38382/d729f8bb-927b-3eaf-ac6b-7b6a7376a793.png)
![fourier_n_40.PNG](https://qiita-image-store.s3.amazonaws.com/0/38382/7b62762b-71d8-d2cc-f3be-2f8572a8dd2b.png)
![fourier_n_50.PNG](https://qiita-image-store.s3.amazonaws.com/0/38382/132a2ed7-e559-6f1f-99d2-1c049d39f96d.png)

```cpp
// (x,y)での高さを計算
float calcHeight(float x, float y, int N, int M)
{
    float y = 0.0f, temp_y = 0.0f;
    int i, j;
    for (i = 1; i <= N; i++)
    {
        temp_y = sin((float)i*PI*0.5f)*cos((float)i*PI*0.1f*x)/(float)i;
        for (j = 1; j <= M; j++)
        {
            y += tempy*sin((float)j*PI*0.5f)*cos((float)i*PI*0.1f*y)/(float)j;
        }
    }
    y *= 4.0f/(PI*PI);
    return y;
}
```
Dockerを使ってMacでRustをRaspberry Pi3上のLinux向けにクロスコンパイルする

# やりかた

Ragnaroekさんが公開してくれているdocker imageを使うと簡単。ありがとうございます。
https://github.com/Ragnaroek/rust-on-raspberry-docker

で、このdocker imageを使いやすくするためにMakefileを書いた。
https://gist.github.com/kmtr/d28e28eac9d0b54ddbd0dbaaecee7267

このMakefileをcargoプロジェクトのルートに置いて、`make docker-pull`とすると、rust-on-raspberry-dockerのimageをpullする。

その後、`make cargo-build-pi`とすると、raspi用のバイナリが`target/arm-unknown-linux-gnueabihf/release`　以下にビルドされる。
前処理の中で`jq`を使っているので、それだけhomebrewか何かで入れる必要がある。

# 動機

Mac上で書いたRustプログラムをraspi3上でベアメタルではなく、普通にLinux(Raspbian)で動かしたかった。
しかし単純にrustupでtargetを追加しただけだと、gcc-armとか諸々を入れる必要があり、Macの世界が汚れてしまうので微妙。ということでDockerでやることにした。

Web上でも似たような悩みを持つ人はいるようだが、「Dockerでやれば？」「ありがとう動いたよ」で完結していて具体的なやりかたが分からず、また2年前の情報とかでいろいろ古いケースもあり、未来の自分のために現時点でのやり方を(2017/06)まとめておきたかった。
riot.util.xxxを使ってみる。

# riot.util.xxxを使ってみる。

## 前置き

大袈裟なユーティリティライブラリを導入するまでもなく
かといって自分で作って参照ファイルを増やすまでもない時に、
しかもriot v3.xxを使ってる際に
riot内のユーティリティで済ましちゃえと言うときの
これから使ってみたい関数をご紹介します。
[api仕様書](https://npmdoc.github.io/node-npmdoc-riot/build/apidoc.html)
はこちらになります。
フレームワークをサポートするライブラリなので
安全重視がうかがえます。
一般的な開発時にはかゆい所に手は届きません。　
ちなみに現在の愛用ユーティリティライブラリは
[Minified.js](http://minifiedjs.com/)です。
関数の量も多すぎず少なすぎずかゆいところに手が届き
何より、軽いです。
但し、どうやらriotとの相性が良くないようで
組み合わせると一部の関数が動作しない事がありました。

それはさておき本題です。
riotには内部的に利用しているユーティリティ関数があり
必要最小限の利用に留めるのであれば
いいかもと思い少し調べてみました。

## 1.dom操作
### セレクタ
```
function riot.util.dom.$(selector, ctx)
function riot.util.dom.$$(selector, ctx)
```
第二引数で指定したdomを走査して選択します。
指定しなければ対象はdocumentオブジェクトになります。
指定対象が選択的なところが気に入りました。
また探す場所を限定すれば当然早いです。
※この関数は上記のapi仕様書に記載がありません。

```
var dom = riot.util.dom
dom.$('#test').value = "testValue"
```

みたいな使い方になるかと思います
でも値の設定、取得だけならrefsで事足りる気もしてきました・・・。
### CSS
```function riot.util.dom.toggleVisibility (dom, show)```
表示、非表示の設定を切り替えます。
ただしやはりアニメーションを付けたくなるのが人の性か。
### 挿入
```function riot.util.dom.mkEl (name)```
createElementのショートカットです。
```function riot.util.dom.setInnerHTML (container, html)```
InnerHTMLへの設定に関するショートカットです。
ブラウザによってはsvgタグへの挿入がサポートされてません。

## 2.String系(miscに所属)
```
 function riot.util.misc.startsWith (str, value) 
 function riot.util.misc.toCamel (str)
```
名前で察して頂けると幸いです。

## 3.検証系
```function riot.util.check.isBlank (value)```
なんだかんだでこのシンプルなのが一番使う気がします。
isBlank,isEmptyなどnullチェックに類するものが
いろんなライブラリにありますが微妙に挙動が違ったりします。
が個人的に
「null or undefined or ''はtrueを返す」という仕様が
一番都合が良かったので使いそうです。

```function riot.util.check.isString (value)```
願わくばisNumの方が欲しかった。

## 4.misc
misc(miscellaneousの略)、雑多と言う意味だそうです。知らなかった・・・
なんて便利な言葉なんだ。これから一番使うのはこれかもしれない。
```function riot.util.misc.each (list, fn)```
指定したコールバック関数の引数に第一引数に渡した配列の要素を渡して繰り返し実行します。

```function riot.util.misc.contains (array, item)```
第一引数で指定した配列内に第二引数で指定した値があればtrueを返します（取得位置ではない）

すみません、
時間が来てしまいました。
そもそも本来の使われ方でないので仕方ないのですが
使用される状況によってはまったくこれでは足りません。
しかしelectron等でriot使ってて、ちょっとnullチェックしたい、
くらいにはつかえるかもしれません。
また使用する方によって他に使えるものもあると思いますので
良かったら以下の仕様書をご覧になってください。

[api documentation for riot (v3.4.3)](https://npmdoc.github.io/node-npmdoc-riot/build/apidoc.html)
※2017/6/25現在の最新v3.60のものではありません。
必要最低限のショートカット - Google Chrome

##　★達成したいこと
- [ ] ググるスピードのアップ
- [ ] トラックパッドの使用頻度減
- [ ] タブの複製をおこないたい

##　★前置き
ネットサーフィンなり、調べ物なりをしているときに最も時間を喰っているのは、

- 一つ前の検索結果に戻る時
- 検索キーワードを入れるためのアドレスバーにカーソルを合わせるとき
- 今開いているタブをそのままに、もう一つタブを用意するとき

だと閃いた。

#　★解決策
一つ前の検索結果に戻るときは...
**Altキー**と**左やじるしキー**を同時に押す

アドレスバーにカーソルを合わせるには...
**F6キー**を押す

現在開いているタブをコピーするには...
**ctrl+L** → **alt+enter**を押す

##　★自分の環境
- Windows10
- Google Chrome(新しいやつ)

##　★今回参考にしたサイト
[Chrome のキーボード ショートカット](https://support.google.com/chrome/answer/157179?hl=ja)
Herokuにデプロイするまでに使うコマンド

#ローカルGitリポジトリと、Herokuアプリをこれから作る場合
[Herokuのコマンドメモ](http://qiita.com/1wa46/items/91bcfbdd1d558bff6dc0)参照

#Gitリポジトリがリモートにあって、Herokuアプリをこれから作る場合

```bat
heroku login
git clone <Url>
rem リポジトリとアプリを自動で紐づけてもらうためにフォルダ移動
cd <CheckoutedDir>
heroku create <AppName>
rem 自動で紐づけた場合、リモートリポジトリ名はherokuになる
git push heroku master
```

#Gitリポジトリclone済で、Herokuアプリも作成済で、デプロイしたい場合
`git remote -v`
をやって、heroku <URL>が出力されなければ、まだGitリポジトリとHerokkuが紐づいていない。

```bat
heroku login
cd <CheckoutedDir>
rem -r herokuはデフォなので、なくても一緒
heroku git:remote -a <HerokuAppName> -r heroku
git push heroku master
```
ちなみに
`heroku git:remote -a <HerokuAppName>`
と
`git remote add heroku https://git.heroku.com/<HerokuAppName>.git`
は同じ意味。

# より細かい情報
helpコマンドの構文。
`heroku help` and/or `heroku help <Command>`

初pushの場合の認証。[Herokuのチュートリアルでgit push heroku masterできずに困る](http://qiita.com/morishima0524/items/eeab6a683b57b36d3994)

##参考
[Getting Started](https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction)
[Deploying with Git](https://devcenter.heroku.com/articles/git#creating-a-heroku-remote)
タスクランナーのgulp

# gulpってなんなん？

お題にも記載していますが、タスクランナーの一つで、面倒な作業の自動化するためのものです。
npmにプラグインが多々上がっているので、ややこしいものは探せばあるかもしれません。

+ [gulp](http://gulpjs.com/)
+ [gulp (github)](https://github.com/gulpjs/gulp)

# 前提
nodeがインストールされていること。
これを書いた際は、`node v8.1.2`です。

# gulp インストール

プロジェクトにgulpをインストールします。

```
npm install --save-dev gulp
```

公式では、gulpコマンドを使用するために、グローバルに`gulp-cli`をインストールするようになっていますが、グローバルを汚したくないのでインストールしません。
`npm run`はローカルにインストールしたパッケージにパスを通してくれるので、`gulp`の実行を`npm run`を経由して行います。

# プラグイン インストール

今回はjsのminifyをしてみるので、以下をインストールします。

+ [gulp-uglify(github)](https://github.com/terinjokes/gulp-uglify)

```
npm install --save-dev gulp-uglify
```

# タスクの作成

プロジェクトルートに`gulpfile.js`を作成し以下を記述します。
タスクの内容は、`js`フォルダ内の`.js`ファイルをminifyして`./dist/js`に出力です。

```
'use strict';

const gulp = require('gulp');
const uglify = require('gulp-uglify');

// minify
gulp.task('minify-js', function() {
    return gulp.src("./js/*.js")
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});
```

# npm script追加

`package.json`の`scripts`に以下を追加します。
gulp-cliをグローバルにインストールしている場合は、この追加は不要です。`gulp minify-js`をターミナルで実行すれば動きます。

```
"scripts": {
"minify": "gulp minify-js"
},
```

# タスク実行

実行は、`package.json`に記載したscriptを実行するだけです。


```
npm run minify
```
Google Apps Scriptのログ設計 #gasja

**2017-12-30**
新しく記事を書きました、こっちのほうがおすすめです。
[GAS と Stackdriver(Logging, Error Reporting) を連携させる - Qiita](https://qiita.com/howdy39/items/398f4969639a558c8487)

----

最近Google Apps Script（以降はGASと記載）を始めました@howdy39です。
GASを使い始めてまず思ったのは **ログ出力（デバッグ）が辛い** ということです。
この辛いログ出力をなんとかしようというのがこの記事の内容です。

## Logger.log()
GASのログ出力は[Logger.log()](https://developers.google.com/apps-script/reference/base/logger#logdata)が基本になると思うのですが、
1. 処理実行
2. スクリプトエディタを開いて[表示]->[ログ]（Command + Enter）
とか面倒すぎて辛い。

## Browser.msgBox()
[Broser.msgBox()](https://developers.google.com/apps-script/reference/base/browser#msgBox(String))を使えば実行時にすぐ確認できますが、閉じるのも面倒です。
そもそも画面がないGASだと無理。


# 結果
ということでシンプルなログ設計をしてみました。

## ログ設計

### 開発時に必要なログはGoogleドキュメントに書き込む
スクリプトエディタを開いて[表示]->[ログ]、を回避したいのでGoogleドキュメントに書きます。
これならブラウザを横において確認できます。
また、追記だと最新のログが下にいってしまうので、毎回クリア。

### 処理の結果をメール送信する
開発時はGoogleドキュメントで構わないが、運用時にいちいちそんなの見てられない。
正常終了と異常終了はメールでログを送るようにします。


## コード
で、書いてみたコードがこちら。

行数も大したことないし、特に難しいことはしていないから解説はしません。
筆者は気にしないので正常終了メールにもログをそのまま書いちゃってますが、そのへんは適宜書き換えてください。

```javascript:コード.gs
var DEV_MODE = true;
var LOG_FILE_ID = '1UkulvHUunDzUzpVUmYmemYkG4YfZtIfr9vMOMIKzBS4'; // 事前にGoogleドキュメントファイルを作ってファイルIDを記載
var RECIPIENT = 'admin@howdylikes.jp';

function myFunction() {
  try {
    // ログをクリア
    if (DEV_MODE) getLogFile().getBody().clear();
     
    Logger.log('hoge');
    Logger.log('%s : %s', 'key', 'value');
    ここでエラーが発生

    // 正常終了メールを送信する
    sendNotificationMail('[XXXシステム]正常終了');

  } catch (e) {
    Logger.log('\n' + JSON.stringify(e, null, '  '));

    // 異常終了メールを送信する
    sendNotificationMail('[XXXシステム]異常終了');

  } finally {
    // ログを書き込む
    if (DEV_MODE) getLogFile().getBody().appendParagraph(Logger.getLog());
  }
}

function getLogFile() {
  if (this.logFile === undefined) {
    this.logFile = DocumentApp.openById(this.LOG_FILE_ID);
  }
  return this.logFile;
}

function sendNotificationMail(title) {
  MailApp.sendEmail(RECIPIENT, title, Logger.getLog());
}
```

## 開発風景
こんな感じになる。
[Command + R]でmyFunctionを実行すれば右のドキュメントのログが更新されます。
エラーの位置もわかるしとても快適。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/35595/48e8712e-37d6-e068-1340-e19b5f51d62b.png)

## メール画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/35595/6449a123-39d2-103a-a105-601d8e2da5f8.png)

### Slackに飛ばす
メール？時代はSlackでしょって人は、myThingやZapierなんかと連動させて異常終了メールだけSlackに送るとかしておくと良さそう。
もちろんGASから直接Slackに出力してもいいでしょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/35595/53a9e3f1-b5e3-f95a-22eb-055d20c41d58.png)

## その他
[Stackdriver Logging](https://developers.google.com/apps-script/guides/logging#stackdriver_logging)を使えばStackdriverにログレベルを設定してログが出力できるので、こっちを使うのもありだと思う。

**2017-12-30**
その記事を書きました。
[GAS と Stackdriver(Logging, Error Reporting) を連携させる - Qiita](https://qiita.com/howdy39/items/398f4969639a558c8487)

# 最後に
こうするともっといいよ！ というのがあったら教えてください。
ex-navigationでreduxを使うためのTips

## 目的
`react-native-router-flux`を使っていたが、むしゃくしゃしたので別のルーティングライブラリを使ってみようと`@expo/ex-navigation`に手を出したが思ったよりreduxとの連携に躓いたのでメモ程度に動作するコードを示す.

## コード

プロジェクトは`create-react-native-app`で作られた前提で始める.
エントリポイントは`App.js`で`src/`に中身を書いていく.

```src/ducks/index.js
import { createNavigationEnabledStore, NavigationReducer as navigation } from '@expo/ex-navigation'
import { combineReducers, createStore, applyMiddleware, compose } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'

import foo from './foo' // this is sample reducer

const createStoreWithNavigation = createNavigationEnabledStore({
  createStore: compose(applyMiddleware(thunk, logger))(createStore),
  navigationStateKey: 'navigation'
})

export default createStoreWithNavigation(
  combineReducers({
    navigation,
    foo
  })
)
```

```src/routes/index.js
import { createRouter } from '@expo/ex-navigation'
import Home from '../components/Home'
import Next from '../components/Next'

export default createRouter(() => ({
  home: () => Home,
  next: () => Next
}))

```

```App.js
import React, { Component } from 'react'
import { NavigationContext, NavigationProvider, StackNavigation } from '@expo/ex-navigation'
import { Provider } from 'react-redux'

import store from './src/ducks'
import router from './src/routes'

const navigationContext = new NavigationContext({
  router,
  store
})

export default class App extends Component {
  render () {
    return (
      <Provider store={store}>
        <NavigationProvider context={navigationContext}>
          <StackNavigation initialRoute={router.getRoute('home')} />
        </NavigationProvider>
      </Provider>
    )
  }
}
```

# 何がしたかったか
ex-navigationでreduxを使いたくて、かつmiddlewareを入れたかった.
のだがREADME([Integrate with your existing Redux store](https://github.com/expo/ex-navigation#integrate-with-your-existing-redux-store))に書いてあるredux実装をするためのドキュメントではmiddlewareに触れておらず、普通に

```
const store = compose(
  applyMiddleware(thunk, logger)
)(createStore)(reducers)
```

とした`store`をProviderに渡してもダメだったので上記のようなコードになった.

## あとがき
コードを書いたあと見つけたMediumの記事(参考リンク参照)がこの内容に更に味付けしたようなreduxとの連携について書いてある.
正直そっちの記事見たほうが良い.
~~黒魔術っぽくなってる気がしたので~~なんだかんだで`react-native-router-flux`がシンプルに使えていいかもしれない...

## 参考リンク
- [expo/ex-navigation: Route-centric navigation for React Native](https://github.com/expo/ex-navigation)
- [Redux Stack: Modular Redux Configuration – Dotan Nahum – Medium](https://medium.com/@jondot/redux-stack-modular-redux-configuration-ec96412a2262)
localhost が以前の Progressive Web App に乗っ取られる

# 症状
Rails アプリを立てて `localhost:3000` を開いたのに、閉じたはずの PWA(Progressive Web App) の画面がロードされてしまうことがあった。
Force Reload すると実際のアプリケーションがロードされるけど、毎回必要な状態だ。

# 原因と対応
SPA の Service Worker がしっかりと動いているのだ。

[chrome://serviceworker-internals/](chrome://serviceworker-internals/) で管理できるので、`Unregister` すればよい。

![ServiceWorker.png](https://qiita-image-store.s3.amazonaws.com/0/40717/65845c53-a9f2-21a9-831a-a11aa404cccc.png)
nodejs expressの爆速テンプレートECTの構文(syntax)整理

#目的
expressで最も早いと評判のテンプレート、ECTですが、構文(syntax)が整理されている所が無かったので自分で整理する事にしました。

##参考
ここ=>[http://ectjs.com/](http://ectjs.com/)にも、ECTの説明と共にある程度乗ってます。
CoffeeScriptと近いですが、一致はしていないです。

---

#構文(syntax)

###・エスケープ無しで出力
```jsp
<h1><%- @title %></h1>
```

###・エスケープして出力
```jsp
<code><%= @source %></code>
```
###・IF文
```jsp
<% if @value1? : %>
    <label>?で存在確認。false,"",0でも存在すればここです</label>
<% else if !@value2 : %>
    <label>[false,0,""+存在しない] を判断したければ!</label> <!-- ?と同じ役割も兼ねます -->
<% else if @value3 == "2" : %>
    <label>式で比較。=== は無くて、==で型の一致も見られます。</label>
<% else : %>
    <label>該当無し</label>
<% end %>
```

###・変数の追加
```jsp
<!-- 変数宣言。後続の処理でこの変数を使えます。 -->
<% @start_num = 0 %>
```

###・三項演算
```jsp
<!-- 三項演算で値を@strに入れます。 -->
<!-- @valueがあれば"a"。無ければ"b"が出力される -->
<% @str = if @value then "a" else "b" %>
<label><%- @str %></label> 

<!-- こちらは変数に代入せず直接画面出力する場合 -->
<label><%= if @value then "a" else "b" %></label>
```

###・While文
```jsp
<!-- 括弧内がtrueの間繰り返します -->
<% while (@start_num++ < @max_num) : %>
  <li><%- @start_num %></li>
<% end %>
```

###・for文(配列の繰り返し)
```jsp
<!-- 繰り返しは配列のみです。オブジェクト(map)はダメです -->
<% @value = [1,2,3] %>
<% for val in @value : %>
    <li><%- val %></li>
<% end %>
```

###・Switch文
```jsp
<% @oauthProvider='facebook' %>
<% switch @oauthProvider : %>
    <% when 'facebook' : %>
        <label>facebook</label>
    <% end %>
    <% when 'twitter' : %>
        <label>twitter</label>
    <% end %>
    <% else : %>
        <label>else</label>
    <% end %>
<% end %>
```

###・関数の利用
```js
// JavaScriptでテンプレートに関数を渡した場合
data.calc = function(a,b){return a+b;};
res.render('test', data);
```

```jsp
<!-- test.ect -->
<!-- 画面側で利用可能 -->
<%= @calc(1,2) %>
```



###・レイアウトの利用
```jsp
<!-- page.ectファイル -->
<% extend 'layout.ect' %>
<!-- layout.ectの中の"content"の場所に読み込まれます -->
<div>Hello, World!</div>
<% block 'footer' : %>
    <!-- layout.ectの中の"content 'footer'"の場所に読み込まれます -->
    <span>Custom footer content</span>
<% end %>
```
　　＋

```jsp
<!-- layout.ectファイル -->
<html>
    <body>
        <% content %>
        <footer>
            <% content 'footer' %>
        </footer>
    </body>
</html>
```
　　　↓

```jsp
<!-- page.ectを表示した結果になります -->
<!-- layout.ectの中に、page.ectの内容と部品(blockの部分)が読み込まれます -->
<html>
    <body>
      <div>Hello, World!</div>
        <footer>
            <span>Custom footer content</span>
        </footer>
    </body>
</html>
```

###・他ECTファイルの読み込み
```jsp
<!-- 他ファイルをパラメータを含めて表示 -->
<!-- item.ectを読み込みますが、拡張子付きで指定すると
動きがおかしくなったので付けない方がいいです。 -->
<% include 'item', { item : 'book', price: '10$' } %>
```
　　↑ に読み込まれます。

```jsp
<!-- item.ect -->
<div><%= @item %></div>
<div><%= @price %></div>
```
---

以上、まだ他にあるかもですが、これだけあればだいたい書けると思います。



##(おまけ)出来なかった事
以下、出来そうかと思いましたが出来なかった事です。
もしやり方知っている方がいたら教えて下さい(>人<)

###・ECTファイル内でのfunctionの定義
```jsp
<!-- こういう風に、ECT内で変数作るように関数は作れなかったです -->
<% @calc=function(a,b){return a+b;} %>
```
###・変数インクリメントするタイプのfor文
```jsp
<!-- 実行できませんでした -->
<% for (@i = 0;@i < 5; @i++) : %>
   <li><%= @i %></li>
<% end %>
```
教師あり学習　〜回帰〜


教師あり学習 〜回帰〜
===

さて今回も、機械学習やその他色々について得た知識を
復習and記事作成の練習and個人の備忘録としてまとめていきます！

[前回の記事](http://qiita.com/AwaJ/items/950953a9c20f391e72cf)では、機械学習の概要について大雑把に書いていきましたが、

第二回ではその中の手法の一つ、教師あり学習の"回帰"について、
焦点を当てて説明をしていきたいと思います！

⚠︎※※注意※※⚠︎  

・出来るだけ専門知識のあまりない人に対して、分かりやすく書くことを目標にしています。
　そのため、厳密に言うと間違っている部分があると思いますがご容赦ください。

・また、ネットで調べたレベルの知識がほとんどなので、
　"厳密に言うと"レベルではなく間違っている箇所があるかもしれません。。
　その場合は非常に申し訳ないです。指摘していただけると幸いです！


回帰
---

"回帰"とは簡単に言うと、"数値を予測すること"です。  

例えば、「明日の気温は何度？」だったり、
「今月の売り上げはいくら？」などを予測することをイメージすると、分かりやすいかと思います。  

明日の気温を予測する時は、ここ一ヶ月の気温や去年の同じ時期の気温など、「過去のデータ」を使って予測することになると思います。
また、気温の話ではイメージしにくいですが、「現在のデータ」を使って「過去のデータ」を予測することもあるかもしれません。

そのように、"知っている数値から知らない数値を予測する"というのが、"回帰"の概念です。  

#### 身長と体重

まだ分かりにくいと思うので、もう少し具体的に、
"身長から体重を予測する"ことを例に説明していきたいと思います。

今、以下のような身長のデータがあったとします。


| 身長 | 体重 |
|:---:|:---:|
|150.6cm|48.7kg|
|150.7cm|53.3kg|
|:|:|
|169.3cm|63.2kg|
|169.9cm|67.1kg|

このデータから、例えば「身長180cmの人ってどれくらいの体重なんだろう？」
というのを予測してみます。

まずはこのデータを、散布図にしてみます。

<img width="500" alt="スクリーンショット 2017-06-25 1.58.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/185346/c5fa8415-1d5a-143f-942b-353404978212.png">

"回帰"とは、色々な手法がありますが、
つまるところ、"この図に対して、身長と体重の関係を表す線を引くこと"です。

今、"最小二乗法"という手法を用いて、直線を引いてみると、

<img width="500" alt="スクリーンショット 2017-06-25 1.58.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/185346/eb4f7bd3-9adc-2a03-68b1-08d343ceb4a0.png">

図ようになります。
この時、「180cmの人の体重」は大体　73kgぐらいかなと予測できるわけです。


これが、"回帰"を使った予測です。

#### 線形と非線形

先ほどの例ではデータに対して、y = ax + b となるような"直線"をひきましたが、
もしかしたら二次式や三次式のほうが、データを上手く表現できたかもしれません。

先ほどのように、直線で回帰することを「線形回帰」、
直線以外のなめらかな線で回帰することを「非線形回帰」と言います。

どちらのほうが優れた回帰の手法というわけではなく、
データにあった回帰の仕方を模索するのが、"回帰"の醍醐味です。

#### 単回帰と重回帰

「身長と体重」の例では、"身長"という一つの変数だけから、
目的の変数である"体重"を予測していました。

ですが、実際に体重を予測しようと思うとき、"身長"だけではなく、
"胸囲"や"直前の食事の量"などといったデータを使用することができると、より精度の高い回帰が行えると思います。

体重　＝　a * 身長 + b * 胸囲 + c * 食事量

このように、複数の変数から回帰を行うことを"重回帰"、
一つの変数から回帰を行うことを"単回帰"と言います。

データ分析の現場では、複雑な要素が絡み合うものを予測する必要があるため、
重回帰を使って分析をすることが多くなると思います。

ちなみに、今回の例で言う"体重"のような、求めたい変数のことを"目的変数"、
逆に目的変数を求めるために使う、"身長""などの変数のことを"説明変数"と言います。

まとめ
---

・"回帰"とは、"数値を予測する"こと。つまり、"データの関係性を表す線を引く"ことである。

・直線で回帰を行う"線形回帰"と、直線以外のなめらかな線で回帰を行う"非線形回帰"が存在する。

・目的となる変数に対して、一変数から予測することを"単回帰"、複数の変数から予測することを"重回帰"と言う。

・求めたい変数を"目的変数"、そのために使う変数を"説明変数"と言う。

あとがき
---

第二回、いかがだったでしょうか？

分かりやすく、長くなりすぎないことを意識すると、
どこで切るか、どこまで踏み込んだ説明をするか難しいですね。。

一旦数式などはおいておき、概念というか雰囲気だけでも掴んでもらえたら幸いです。
将来的には数式の説明や、R・pythonなどでどうやって行うか書けたらいいなぁ・・

次回は"教師あり学習"のもう一つの要素"分類"に関して記事を書きます！

ここまで読んでいただき、ありがとうございました！！
Node.jsからLINE Notifyを使うメモ


https://notify-bot.line.me/my/ からアクセストークンを発行します。

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

## 準備

```bash
npm init -y
npm i axos
```

## コード

```app.js
'use strcit';

const axios = require('axio');

const BASE_URL = 'https://notify-api.me';
const PATH =  '/api/notifys';
const LINE_TOKEN = `アクセストークン`;

let config = {
    baseURL: BASE_URL,
    url: PATH,
    method: 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': `Bearer ${LINE_TOKEN}`
    },
    data: qs.stringify({
        message: ``,
    })
};

axios.request(config)
.then((res) => {
    console.log(res.status);
})
.catch((error) => {
    console.log(error);
});
```

## 実行

```bash
node app.js
```

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

> [設定画面で設定した名前+通知] という形で通知がきます

簡単な通知には使えそう
LaradockでLaravel Duskを動かすメモ

[【Laravel 5.4】Laravel Duskによるブラウザテストの作成方法](http://qiita.com/amymd/items/0a5f2705e29972d0d22e)

上の記事を参考にさせてもらいながらDuskを動かそうとしましたが、
Laradockの環境ではうまく動作しなかったので、対処法をメモします。

## 前提

* `composer` を使って `laravel/dusk` をインストール済み。
* `ServiceProvider` に `Dusk` を登録済み。
* `php artisan dusk:install` を実行済み

## Laradockで実行した場合

`laravel_workspace` コンテナに入り、 `php artisan dusk` を実行すると、
以下のようなエラーに襲われます。

```
Facebook\WebDriver\Exception\WebDriverCurlException: 
Curl error thrown for http POST to /session with params: 
{"desiredCapabilities":{"browserName":"chrome","platform":"ANY"}}
・
・
・
```

そのため、WebDriverを設定し直す必要があります。

## 対処法

まず、 `dusk`用の環境変数の設定ファイル、`.env.dusk.local`を準備します。
これは必須ではないですが、環境変数はテスト用に分けたほうがよいでしょう。

`.env.dusk.local` は `.env` からコピってきてOKです。
ただし、 `APP_URL` のみ、 `http://nginx` に設定します。

```text:.env.dusk.local
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=http://nginx
・
・
・
```

そして、 `tests\DuskTestCase.php` 内の`driver()`メソッドを以下のように変更します。

```php:tests\DuskTestCase.php
    protected function driver()
    {
        return RemoteWebDriver::create(
            'http://selenium:4444/wd/hub', DesiredCapabilities::chrome()
        );
    }
```

これで、アプリケーション側の準備はOKです。

最後に、 `laradock_selenium` のコンテナが必要になりますので、
`docker-composer` で立ち上げておきます。

```sh
docker-compose build selenium
```

実行します。

```
$ php artisan dusk
PHPUnit 5.7.9 by Sebastian Bergmann and contributors.

..                                                                  2 / 2 (100%)

Time: 31.01 seconds, Memory: 16.00MB

OK (2 tests, 2 assertions)
```

できたーー( ´ ▽ ` )ﾉ
APPLE LLVM 6.0 Error Objective-Cのサンプルプログラムを書き換えています。

**前提・実現したいこと**

2010年に配布されたmaicrosoftのサンプルプログラムHID.PnPを新しい開発環境(xcode6,7,8)でビルドできるように書き換えようとしています。
オリジナルのコードがガベージコレクションが有効だった頃のもので、既にARC変換をしました。（ご回答ありがとうございました。）
このコードをビルドする際に、ビルドエラーが発生します。

**発生している問題・エラーメッセージ**

ビルドの際に出るエラーメッセージは二つです。

一つ目
APPLE LLVM 6.0 Error
Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang failed with exit code 1

二つ目
Apple Mach-O Linker (Id)Error
linker command failed with exit code 1 (use -v to see invocation)

どちらもcode1 という部分に関するエラーであると書いてあるのですが、それがどこか分からない状況です。
通常、特定のコードで ; 忘れや文法ミスでエラーが生じた場合、エラーメッセージをクリックするとその箇所が示されるのですが、このエラーに関しては示されません。

**補足情報(言語/FW/ツール等のバージョンなど)**
**より詳細な情報**
macOSX10.11
使用言語:Objective-C
開発環境：xcode6.2
サンプルプログラム:HID.PnP(2010配布)
仮想通貨NEMでJavaScriptによるノード接続に失敗した場合に別ノードを自動選択する。

ブロックチェーン技術を利用してプログラムを記述する場合、ロードバランサなどの単一障害点の存在を防ぐためにノード接続のロジックをアプリケーション側に持たせる必要がでてきます。

今回は、NEMのAPIを利用する場合の記述例を挙げておきます。

```js:select_node
var NODES = Array(
"alice2.nem.ninja:7890",
"alice3.nem.ninja:7890",
"alice4.nem.ninja:7890",
"alice5.nem.ninja:7890",
"alice6.nem.ninja:7890",
"alice7.nem.ninja:7890"
);

var getEndpoint = function(){

	var target_node =  NODES[Math.floor(Math.random() * NODES.length)];
	return ACCOUNT_TRANSFERS  = "http://" + target_node + "/account/get?address=NBZNQL2JDWTGUAW237PXV4SSXSPORY43GUSWGSB7";
}

var sendAjax = function(){
	$.ajax({url: getEndpoint() ,type: 'GET'}).then(
		function(res){parse_transfers(res)},
		function(res){
			sendAjax();
		}
	);
}

var parse_transfers = function(res){
	console.log(res);
}

sendAjax();
```

ポイントはノードに非同期接続を行い、失敗した場合に再帰的に接続functionを呼び出している点です。
$.ajaxの部分は簡略化すると以下のようにも書けます。

```
$.ajax({url: getEndpoint() ,type: 'GET'}).then((res)=>parse_transfers(res),()=>sendAjax());
```


それでは！
kaminariで君の街まで飛べればいいのにな。2017年梅雨

kaminariと付き合い始めて約１年。
kaminariの知らない一面を見たのでご報告になります。

## limitが無視される

```ruby
User.count                     #=> 1000
a = User.limit(5); a.count     #=> 5
a.page(1).per(20).size         #=> 20
```

readmeには以下のように書いてあります。内部の処理でlimitを使っているので上書きしちゃうよ、とのこと。
「`Keep in mind that per internally utilizes limit and so it will override any limit that was set previously.`」

## 絞る前の個数を取得できる

```ruby
User.count                     #=> 1000
User.page(1).per(20).size         #=> 20
User.page(1).per(20).total_count  #=> 1000
```

`total_count`知らなかったので、
わざわざ`user_all_count = User.count`みたいな変数用意してました。
必要なかったんですね。

##以上、ご報告でした。

君の街まで飛ぶためのkaminariでした。:zap:
Rubyのnet/httpにおけるヘッダフィールド名の大文字小文字の扱い

## net/httpについて

RubyのプログラムでWebAPIを叩く時などに、標準で含まれている[net/httpライブラリ](https://docs.ruby-lang.org/ja/2.4.0/library/net=2fhttp.html)を使うことがあると思います。もしくは利用しているHTTPのライブラリが内部でnet/httpを使っていることも多いでしょう。

net/httpにおいてHTTPリクエストにヘッダフィールドを追加する場合、`[]=`もしくは`add_field`を使います。

```ruby
req = Net::HTTP::Get.new('/some_path')
req['X-My-Header'] = 'some_value'
```

なお、一般的によく使われるフィールドには`content_type=`のように専用のメソッドが用意されています。HTTPヘッダに関するメソッドは[Net::HTTPHeaderモジュール](https://docs.ruby-lang.org/ja/2.4.0/class/Net=3a=3aHTTPHeader.html)で定義されています。

## 大文字小文字の扱い

[`[]=`のリファレンス](https://docs.ruby-lang.org/ja/2.4.0/class/Net=3a=3aHTTPHeader.html#I_--5B--5D--3D)では、「key(ヘッダフィールド名)は大文字小文字を区別しません。」と書かれています。

実際に[このメソッドのソースコード](https://github.com/ruby/ruby/blob/ruby_2_4/lib/net/http/header.rb#L45)を読んでみましょう。

```ruby
def []=(key, val)
  unless val
    @header.delete key.downcase
    return val
  end
  @header[key.downcase] = [val]
end
```

ヘッダフィールド名は、内部的には`downcase`メソッドを使って全て小文字に直されています。これは`initialize`や`add_field`についても同様です。

では送信時にパケットに含まれる文字列も全て小文字なのか？というと、そうではありません。[送信時に、each_capitalizedなる処理が挟まれます](https://github.com/ruby/ruby/blob/ruby_2_4/lib/net/http/generic_request.rb#L330)。具体的にフィールド名にどのような文字列操作が掛かるのか、というのは[ここに記載されています](https://github.com/ruby/ruby/blob/ruby_2_4/lib/net/http/header.rb#L187)。

```ruby
name.to_s.split(/-/).map {|s| s.capitalize }.join('-')
```

これはヘッダフィールド名の記載方法として慣用化されている、`User-Agent`や`If-Modified-Since`のような形式に直すということです。

## HTTPのRFCでは

現在有効なHTTP/1.1のRFCはRFC7230～7235です。その中で[ヘッダフィールド名に関しては、case-insensitiveであると記載されています](https://tools.ietf.org/html/rfc7230#section-3.2)。これを遵守しているサーバであれば、大文字小文字はどのように記載していても区別なく解釈してくれるはずです。

上記のnet/httpの実装はRFCが遵守されていることを前提に、内部的な表記を統一することでプログラマが大文字小文字を意識しなくてすむようにしているのだと思います。

送信時に一手間加えているのは、単に慣用に倣っただけなのか、それ以上の強い理由が何かあるのか、詳しくはわかりません。ただ調べた限りでは、主要なWebブラウザはだいたいこの慣用に従っているようなので、とりあえず合わせておけば安心と言えるかもしれません。

## case-sensitiveなサーバの場合

ところで、なぜこんなことを調べたかというと、RFCの記載に則らず大文字小文字を区別するAPIを叩く機会があったからです。そのAPIは以下のようなヘッダフィールド名(仮)を要求していました。

```
X-ABC-Token: token_value
```

これをnet/httpで送信しようとしても、セット時の表記にかかわらず内部のキー名は`x-abc-token`となり、送信時は`X-Abc-Token`として送信されます。残念ながらそのAPIを提供するサーバは、このフィールドを解釈してくれませんでした。以下はWiresharkで表示したパケットの中身です。

![header1.png](https://qiita-image-store.s3.amazonaws.com/0/112578/dcecd3b7-fde9-5685-2935-4a328a675d4a.png)

このようなサーバを相手にする際は、素直にnet/httpではなく他のHTTPライブラリを使いましょう。ただし、net/httpに依存していて、ここの処理が丸々使われているライブラリだと結局解決されないので注意です。[各種HTTPライブラリの依存関係については、この図がわかりやすい](https://www.slideshare.net/HiroshiNakamura/rubyhttp-clients-comparison/5)です。

net/httpに依存していない[HTTPClient](https://github.com/nahi/httpclient)は、この問題を解消することができました。以下はHTTPClientを用いた場合のパケットです。

![header2.png](https://qiita-image-store.s3.amazonaws.com/0/112578/a9496611-b3c0-f3ae-cb34-0df45e597a23.png)

元はといえばサーバ側のAPI実装がイマイチなことに起因しているので、同じような問題に当たる人がいるのかはわかりませんが…色々調べて勉強にもなったので、書き残しておきます。
Azure AD Application Proxyの代わりに、nginxでAzureADの認証情報(ADAL)を使用した認証を実装(2/3)

これの続きです。(だいぶ間が空いてしまった。。)
http://qiita.com/undersoon/items/ce32f2ef103266d6e7b3

# 前提

AzureのCoreOSインスタンスで構築してます。

# sub_filterモジュールを用意したnginxを用意。

まず、sub_filterモジュールというのはHTMLの中身を書き換えるモジュールです。
リバプロするサイトの中身にHTMLのリンクがあり、それを書き換えたりするのに必要です。

yumでインストールするとsub_filterモジュールは有効化されないので、ソースからインストールする必要ありです。ということで下記です。(ソースからインストールする手順が不明な方は「Linux ソースからインストール」とかで検索すると手順が書いてあると思います。(適当))

ちなみにnginxのバージョンは1.11.7で試しました。

0. nginxをダウンロード
1. ダウンロードしたソースファイルを./configureする際に「--with-http_sub_module」オプションをつけてconfigureする。うまくいったら、make,make installしてください。(途中、いくつかパッケージが足りないと怒られた気がしますが、そのメッセージをぐぐると答えが書いてあるので、そこまで苦労せずにインストールできるはずです。

## ご参考までに(私の環境でのconfigureオプション。nginx -Vで確認。)
--with-http_image_filter_module --with-debug --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-file-aio --with-threads --with-ipv6 --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_ssl_module --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic'

# oauth2_proxyモジュールを導入。

モジュールを下記からダウンロードし、インストール。インストール手順も下記URLに書いてあります。
(というよりも時間が経ちすぎて具体的な手順忘れました...)

https://github.com/bitly/oauth2_proxy



いったん、以上です。
時間が経ちすぎて手順を忘れすぎてますのでちょっと違うかもです。。
間違った手順がありましたらどこかの機会で直しますが、おおむね、上記内容だったはず。
Docker toolbox(VirtualBox, Windows)上にConcourse(docker-compose)を構築する時のtip


基本的にはSetting Up - Installing - [Docker Repository](http://concourse.ci/docker-repository.html) の通りに実行すればよい

唯一、鍵情報のみVirtualBoxのshared folderを経由して渡す必要がある
例えば対象VMのshared folderが以下の時

![image](https://qiita-image-store.s3.amazonaws.com/0/24177/0b4f764f-e144-8f21-b196-0696d8a1a92a.png)

こんな感じでkey pathを指定する

```yaml:docker-compose.yml(抜粋)
  concourse-web:
    image: concourse/concourse
...
      CONCOURSE_EXTERNAL_URL: "http://192.168.99.100:8080" ## boot2dockerに振られているIP
...
    volumes: ["/c/Users/[keysまでのpath]/keys/web:/concourse-keys"] ## ここ
...
  concourse-worker:
    image: concourse/concourse
...
    volumes: ["/c/Users/[keysまでのpath]/keys/worker:/concourse-keys"] ## workerも同様に
```

:ok: 

![image](https://qiita-image-store.s3.amazonaws.com/0/24177/91fccb04-e2be-80df-e768-f91093a03744.png)
【自分用メモ】git入門

# リモートでの作業
- ```git clone [url]```
- リモートレポジトリの表示
    - ```git remote```
    - デフォルトで```origin```という名前

## リモートレポジトリの追加・削除
- ```git remote add [short name] [url]```
- ```git remote rm [short name]```

## fetch
リモートから持ってくる。持ってくるだけでマージはしない。

- ```git fetch [remote-name]```

## pull
fetchしてマージもする。

## push
- ```git push [remote-name] [branch-name]```

リモートの```origin```に対してローカルの```master```をpushする。

- ```git push origin master```

ローカルで作成してブランチ(new_branch)をリモートにpushする

- ```git push origin new_branch```

### Tips
- ```Updates were rejected because the tip of your current branch is behind```でpushに失敗する。
    - git pullする。作業しいてるブランチ名を指定する。
    - ```git pull (branch name)```


#やり直し
- コミット前の編集を元に戻す
    - ```git checkout -- <file>..```
    - ```git status```を実行すると作業中の変更を破棄するには...として上が表示される
matplotlibで簡単に日本語フォント設定

ダウンロードなどすることなく、リストから確認してファイルを少し編集するだけで設定できました。

# 環境
```:terminal
$ uname -a
Linux debian 4.9.0-3-amd64 #1 SMP Debian 4.9.30-2+deb9u1 (2017-06-18) x86_64 GNU/Linux
$ cat /etc/debian_version
9.0
$ python3 --version
Python 3.5.3
$ python3 -c "import matplotlib; print(matplotlib.__version__)"
2.0.0
```

# 確認
```:terminal
$ python3 -c "import matplotlib as mpl; print(mpl.matplotlib_fname())"
/etc/matplotlibrc
$ python3 -c "import matplotlib.font_manager; print([f.name for f in matplotlib.font_manager.fontManager.ttflist])" | grep  --color=auto　-i gothic
['STIXGeneral', ... , 'IPAGothic',  ...  'MathJax_SansSerif']
```
探している文字が色付き強調されているので、すぐに見つけられます。

# 設定ファイル編集
```
$ sudo vim /etc/matplotlib
```
`font.family: IPAGothic` に置き換える。
[Swift] UIDatePickerの色を動的に変える

#[Swift] UIDatePickerの色を変える
```
@IBOutlet weak var myPicker: UIDatePicker!

override func viewDidLoad() {
    super.viewDidLoad()

    myPicker.backgroundColor = UIColor.white
    myPicker.setValue(UIColor.white, forKey: "textColor")

    for subview in myPicker.subviews.first!.subviews {
        if subview.frame.height < myPicker.frame.height {
            subview.layer.borderColor = UIColor.white.cgColor
            subview.layer.borderWidth = subview.frame.height
        }
    }
}
```
AndroidでWebViewを使うなら新機能Safe Browsingを有効に。


Google I/O 2017を見ていて気になっていましたが、Android Developers Blogで言及がありました。

[What’s new in WebView security](https://android-developers.googleblog.com/2017/06/whats-new-in-webview-security.html)

以下の数行を`AndroidManifest.xml`に加えると、Android 5.0 Lollipop以降のWebViewでGoogleのSafe Browsingが有効になります。[Google Safe Browsing](https://safebrowsing.google.com/)に登録されたマルウェアやフィッシングのURLを検知して危険なサイトを訪問する前に警告を出してくれます。


```xml
<manifest>
     <meta-data android:name="android.webkit.WebView.EnableSafeBrowsing"
                android:value="true" />
      . . .
     <application> . . . </application>
</manifest>
```

Android 5.0 Lollipop以降のWebViewは個別のAPKとして6週間隔でPlay Storeからアップデートされています。

いままでChromeだけで月に2億5千回以上この画面が表示されているそうで、この機能がWebViewでも使えるようになりました(ブロク公開時点 2017/06/22 から有効)。

<img src="https://qiita-image-store.s3.amazonaws.com/0/8920/0c77d147-5908-273c-5016-0af6192fc214.png" width="240" height="auto">


<del>Webページを表示するだけならより安全な[Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs)というものもありますがAndroid 6.0以降でしか使えないため、この5.0と6.0のギャップを埋めるのに必要ですね。</del>
↑Chrome Custom Tabsはサポートライブラリで提供されているためこのような制約はありませんでした。コメントを参照。

[What’s new in WebView security](https://android-developers.googleblog.com/2017/06/whats-new-in-webview-security.html) では上記Android 5.0 Lollipop以降で有効になったSafe Brosingの他にもAndroid O向けWebViewのセキュリティ強化についても触れられております。

## PR

昨日公開しました個人制作のAndroid版ブラウザアプリでもこの設定を有効にしておりますので宜しくお願い致します！Kotlinの楽しさのあまり勢いで作りました。
無料 [Ohajiki Web Browser for Android](https://play.google.com/store/apps/details?id=co.fukuyama.android.ohajiki)
polymer starter kit を firebase に deploy する方法

polymer starter kitはpolymerを使ってウェブアプリを作る上での基本的な機能を備えたシンプルなウェブアプリです。簡単なコマンドを実行するだけで自動的に指定のdirectorに作成されるので、初心者の方は一旦polymer starter kitを作って、それをいじりながらpolymerに馴染んでいくことをオススメします。

ここでは polymer と firebase で基本となる polymer starter kit を firebase に
 deploy する方法を説明していきます。

説明内容は[こちら](https://www.polymer-project.org/2.0/start/toolbox/set-up)を日本語でわかりやすくしたものです。

#必要なものをインストール
polymerを使うには polymer CLI をインストールしないといけないので、それをやっちゃいます。

```
$ npm install -g polymer-cli
```

このコマンドでインストールができます。npmを使うにはnode jsとnpmがマシンにインストールされていないといけないので、それがまだの人は[ここ](https://www.npmjs.com/get-npm)からしましょう。

#polymer starter kitの作成
いよいよpolymer starter kit を作ります。作りますと言ってもコマンドを実行するだけで自動的に作られるんですけどねw

polymer starter kit を作りたいdirectoryに入ってこのコマンドを実行します。
```
polymer init polymer-2-starter-kit
```

最近polymer 2.0が発表されたので、polymer starter kitもバージョン2にアップグレードされました。

上のコマンドが完了したら今いるdirectoryにpolymer starter kitが作成されたはずです。
#ローカルで動作確認
いきなりdeployして見てもいいんですけど、まずはローカルで動かして見ましょう。

```
polymer serve --open
```

このコマンドを実行することで、ローカルのサーバーをpolymer CLIが作ってくれて、自動的にブラウザを開いてそのページを開いてくれます。こんな感じのページが表示されるかと思います。

![starter-kit-preview.jpg](https://qiita-image-store.s3.amazonaws.com/0/187071/388086fb-1271-5867-69b5-b669334ec5b2.jpeg)

このデフォルトの文章は何語なんでしょうね。僕も最初変な言語で書かれてたので、なんか
 polymer CLI の英語じゃないバージョン（そんなの存在しない）でも間違ってインストールしちゃったのかなって思いましたが、大丈夫です。この変な言語のやつであってます。

ローカルで表示されることが確認できたら firebase に deploy しましょう。
#firebase 側の設定
まず、firebaseを使ったことがない人はアカウントを作らなくてはなりません。
[こちら](https://www.firebase.com/signup/)からアカウントを作って、プロジェクトを作成しましょう。

それが完了したら firebase のコマンドラインツールをインストールします。
```
npm install -g firebase-tools
```
firebaseにログインします。

```
firebase login
```
ログインができたら先ほど作った polymer starter kit に firebase を組み込みます。

```
firebase init
```

このコマンドを実行すると、色々と質問を聞かれます。まず、最初の質問はとりあえず全部チェックしておきましょう

```
◉ Database: Deploy Firebase Realtime Database Rules
◉ Functions: Configure and deploy Cloud Functions
◉ Hosting: Configure and deploy Firebase Hosting sites
```

次のこの質問で、先ほど作った firebase のプロジェクトを選んでください。

```
Select a default Firebase project for this directory:
```

その次の質問はそのままエンターを押してもらって構わないです。

```
What file should be used for Database Rules? (database.rules.json)
```

その次の質問のそのままエンターを押しましょう。

```
Do you want to install dependencies with npm now?
```

この次の質問が気をつけなきゃいけないところになります。
この質問デフォルトではなく、 "build/public" と入力してください。

```
What do you want to use as your public directory?(public) build/public
```

その次の質問は "y" と入力してください。

```
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 
```

これで firebase init コマンドからの質問攻めは終わったと思います。最後にいよいよ firebase に deploy します！
#firebase に deploy
このコマンドを実行します：

```
firebase deploy
```

これでfirebaseが自動的にアプリをアップロードしてくれます。完了後にこのようにアクセスさkのURLが表示されるので、開いて見て見ましょう。ローカルで開いた時と同じものが表示されているはずです。

```
Hosting URL: https://firebase-12345.firebaseapp.com
```

これで firebase に polymer starter kit を deploy するのに成功しました。あとは、この polymer starter kit を少しずつ改良して行って、自分のオリジナルのPWAを作って行って見てください。
Swift：UserDefaultsで初期値を設定する方法

# 背景

ちょっとしたデータの保存がしたいとき、RealmやCoreDataを使うほどではないというとき、UserDefaults使うと思います。そんなUserDefaultsで初期値がなくてnilだと困るなんて思ったことありませんか？ 初期値の設定、簡単にできます。

## ソースコード

```swift
class hope: superhoge {
	let userDefaults = UserDefaults.standard

	init() {
		super.init()
		//ディクショナリ形式で初期値を指定できる
		userDefaults.register(defaults: ["UserName" : "NoName",
		                                 "UserID" : 315,
		                                 "Flag"	: false])

		//値を取り出す
		let name = userDefaults.object(forKey: "UserName") as! String
		let id = userDefaults.integer(forKey: "UserID")
		let flag = userDefaults.bool(forKey: "Flag")
	}
}
```

## 解説

値を取り出す前に`.register()`メソッドを用いることで初期値を指定することができます。この初期値の特性は

- 一度も利用されていない(保存されていない)Keyのデータに適応される
- 値がすでに入っているときはそちらを優先し、初期値は無視される

という風になっており便利です。
初期値の指定をしない場合、UserDefaultsではそのデータ型の基本値（Intなら0、Boolならfalse）が初回の呼び出しで取得できます。しかし、例えばInt型で50~100の間の数以外はエラーになってしまうから初期値を50にしたいなどの状況があると思います。そういう時にぜひ`.register()`使ってみてください。
アプリが対応している言語を明記して apk ファイルサイズを削減する

# 概要
アプリが対応している言語を `app/build.gradle` に指定することで、参照しているライブラリ内の言語リソースのうち不要な言語リソースを削除することができる。
**→　apk ファイルサイズを削減できる。**
（指定しない場合、ライブラリ内の全ての言語リソースが apk に同梱される）

# 詳細
https://developer.android.com/studio/build/shrink-code.html?hl=ja#unused-alt-resources
を参照

アプリが日本語と英語しか対応していなくても、アプリが使っているライブラリ（AppCompat や Google Play サービスなど）に使用しない言語の文字列リソース（韓国語など）が含まれている事がある。

app/build.gradle に

```
android {
    defaultConfig {
        ...
        resConfigs "en", "fr"
    }
}
```

などの指定を行うことにより、指定した言語以外のリソースファイルを削除し、apk ファイルサイズを削減することができる。

# 実際にやってみた
## 前提
* Android Studio 2.3.3 で `Empty Activity` のテンプレートで新規作成し、apk をリリースビルドで作成する。
* ApkAnalyzer でファイルサイズを確認する。

## 結果
apk サイズが **約 76KB 削減**できた！

## 設定前（デフォルト）
 * Raw FileSize : 1.4 MB
 * `resources.arsc`の Raw FileSize : 221.3 KB
 * `resources.arsc`の `string` にさまざまな言語リソースが含まれていることがわかる

<img width="577" alt="before.png" src="https://qiita-image-store.s3.amazonaws.com/0/9695/e07322f7-ef4c-df6e-e83c-55d77f7cedbd.png">

## 設定
`app/build.gradle` に赤下線部の設定を加える（日本語と英語のみ対応する設定）
　
<img width="682" alt="スクリーンショット 2017-06-24 23.21.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/9695/ca791be3-f011-5b0a-438b-cdec49ffc0c3.png">

## 設定後
 * Raw FileSize : 1.4 MB　→　1.3 MB
 * `resources.arsc`の Raw FileSize : 221.3 KB　→　145.2 KB　**約 76 KB 削減**
 * `resources.arsc`の `string` に指定した言語しか含まれていないことがわかる
<img width="577" alt="after.png" src="https://qiita-image-store.s3.amazonaws.com/0/9695/50b1ee5e-1f2b-d3d2-bab7-d192f43f53ba.png">

# まとめ
`app/build.gradle` に、アプリが対応している言語を `resConfigs` で明記すると、外部ライブラリ内の不要な言語リソースを削減でき、 apk ファイル削減につながる。
Vue.js で表示に切り替えたDOMにフォーカスできないときは $nextTick を使う

次のように、ボタン「A」を押すと右に入力フィールドが現われるようなものを作ったとき、たいてい、そのフィールドにフォーカスさせたくなってきます。これが難しい。

<img width="178" alt="スクリーンショット 2017-06-24 23.11.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/2369/6938a518-867e-7e89-4724-bab4ec8e9cc4.png">

すぐに `focus()` しても、まだその DOM は表示されていないので、フォーカスが空振りしてしまいます。

そのようなときは、次のように `$nextTick` を使ってタイミングをずらすとよさそうです。

```html
<div id="app">
  <button @click="c">A</button>
  <input v-if="s" ref="r" />
</div>

<script src="https://unpkg.com/vue"></script>
<script>
  new Vue({
    el: "#app",
    data: {s: false},
    methods: {
      c() {
        this.s = true
        this.$nextTick(() => this.$refs.r.focus())
      },
    },
  })
</script>
```

これでうまくいきました。

## 参照
vm.$nextTick https://jp.vuejs.org/v2/api/#vm-nextTick
PowerShellでファイル名を連番でRenameする

客先にて、テストで取得したエビデンスを整理する為に作成してみた。
まさか勝手にリネームソフトを入れるわけにもいかず。

# ソース

```ps1:renameFiles.ps1
####################################################################################
# renameFilesメソッド
# 作業フォルダ内にあるファイル名を指定した名称にリネームする
####################################################################################
function renameFiles ([string] workPath){
	if($workPath.EndsWith("¥") -ne $true){$workPath+="¥"}

	try{
	    Set-Location $workPath
	} catch [Exception]{
	    Write-Host "設定したパスは存在しません。正しいパスを設定してください。"
        break
	}

	$fileName = Read-Host "変更後のファイル名を入力してください。"
	try{
	    [int] $num = Read-Host "振り直す番号の開始位置を入力してください。"
	    [int] $size = Read-Host "振り直す番号の桁数を入力してください。"
	} catch [Exception] {
	    Write-Host "開始番号と桁数には数字を設定してください。"
        break
	}

	# 入力した数字から桁番号のフォーマット文字列作成
	$format = $null;
	for($i=0; $i -lt $size; $i++){$format += "0"}

    $fileType = "-a---"
	[string[]]$fileList = Get-ChildItem $path |
	# ディレクトリや読み取り専用等のファイルは除外
	Where-Object {$_.Mode.Equals($fileType)} |
	Sort-Object {$_.LastWriteTime}

	foreach($f in $fileList){
	    $newName = ($fileName + "_" + $num.ToString($format))
	    if($f.Contains(".")){
            $extension = $f.Substring($f.LastIndexOf("."))
	        $newName += $extension
	    }
	    Rename-Item ($workPath + $f) -NewName $newName
	    $num++
	}
}
####################################################################################

####################################################################################
# Main
####################################################################################
$ErrorActionPreference = "stop"
[string] $workPath =  Split-Path(Split-Path $myInvocation.MyCommand.path -Parent) -Parent

do{
    renameFiles $workPath
    do{
        $command = Read-Host "処理を継続しますか？y/n"
    }while(($command -ne "y") -And ($command -ne "n"))
}
while($command -eq "y")
####################################################################################
```

# 作成時のポイント
## ・相対パス
例えばこんな感じなのを
```$workPath = "c¥Users¥user¥work¥"```

こんな感じにスクリプトの配置場所からパスを取得するように変更。
```[string] $workPath =  Split-Path $myInvocation.MyCommand.path -Parent)```

さらに上記だとスクリプトファイルもリネームの対象になってしまう為、もう一個上のディレクトリを作業フォルダにするように変更
```[string] $workPath =  Split-Path(Split-Path $myInvocation.MyCommand.path -Parent)) -Parent```

なんかすごくカッコ悪いけど、他に思いつかなかった。。。

## ・0で連番の桁埋め
```[int] num = 5```
これをそのまま出力すると「5」が出力される。

これを例えば、005という風に3桁になるように0で埋めてやりたい時は
```[int] num = 5
num.ToString("000")```
こんな感じで埋めてやりたい桁数分の0をToStringメソッドの引数に渡してやって、文字列に変換する。

## ・リネーム対象ファイルの選択
リネーム対象のファイルのリストを作成する際、ファイルの属性でフィルターをかける。
ディレクトリ等の属性を持っているファイルを除外する。
```Where-Object {$_.Mode.Equals("-a---")}```

属性についての詳細は下記を参照
参考：http://www.atmarkit.co.jp/ait/articles/1409/26/news133.html


# 最後に
設定を設定ファイルから読み込むようにしたり、ファイル名の変更履歴を後から閲覧できるように出力したりと他にもできることはあるかと思いますが、一旦はこんなところで。
気軽にアドバイス等頂けると喜びます。

ここまでお読みいただきましてありがとうございました。：）