OmniAICreator/Qiita-1.07M huggingface dataset:
[AWS] リージョンの変更

## 概要
オレゴンにインスタンスを作ってしまったので、東京へ移した際の方法です。

## 1.スナップショットを作成する
左のメニューからスナップショットをクリックし、インスタンスのスナップショットを作成します。

## 2.スナップショットのコピー
作成したスナップショットをクリックし、メニューからコピーをクリックします。
コピー画面が表示されたら、送信先リージョンの場所を東京を選択します。

## 3.リージョンの変更
右上のリージョンをオレゴンから東京へ変更します。

## 4.イメージの作成
スナップショットをクリックし、メニューからイメージの作成をクリックします。
注意点として、仮想化タイプを「ハードウェアアシストの仮想化」を選択することを間違えないでください。

## 5.AMIの確認
左メニューからAMIをクリックし、ファイルが作成されているか確認します。

## 6.インスタンスの作成
インスタンスを作成をクリックし、左メニューからマイAMIをクリックし、作成したAMIを選択し、インスタンスを作成します。
セキュリティキー、HTTPプロトコルなどは再設定が必要です。

## おそらく役立つ情報 
痒いところに手が届くかもしれない記事を書いています。
フォローしてくれるとやる気になります！

- Qiita　プログラミングに関する情報はこちら
http://qiita.com/nadonado


- Twitter　日々のつぶやきはこちら
https://twitter.com/hironado
AWS SDK for JavaScriptを使ってS3にファイルをアップロードする方法


### SDK version
---

`"aws-sdk": "^2.114.0"`

### S3のアップ場所とファイル名
---

```
/hoge/in/fuga/aaa1/08/15/myKey1.txt
/hoge/in/fuga/aaa1/08/15/myKey2.txt
```

### コード
---

```js
var AWS = require('aws-sdk')

AWS.config.update({
  accessKeyId: 'accessKeyId',
  secretAccessKey: 'secretAccessKey',
  endpoint: 'https://hoge.s3-ap-northeast-1.amazonaws.com/in/fuga',
  s3ForcePathStyle: true
})

var s3 = new AWS.S3()

var params1 = {
  Bucket: 'aaa1',
  Key: '08/15/myKey1.txt',
  Body: 'Hello!',
  ContentType: 'text/plain'
}

var params2 = {
  Bucket: 'aaa1',
  Key: '08/15/myKey2.txt',
  Body: 'World!',
  ContentType: 'text/plain'
}

s3.upload(params1, function (err, result) {
  console.log(err, result)
  s3.upload(params2, function (err, result) {
    console.log(err, result)
  })
})
```

まったく同じ場所に置くのであれば、endpointとかBucketで指定すればファイル名だけで良いです。

[CloudBerry Explorer](https://www.cloudberrylab.com/explorer/amazon-s3.aspx)を使えば、FTPソフトのような形でS3を確認できます。アクセスキーとか、シークレットキーの権限も含めた動作確認とかも出来るので、合わせて使ってみると良いかもしれません。

なぜか、２回目のアップロードが`Access Denied`で失敗するという謎のエラーで、めっちゃハマったので、共有という意味でうまくいったコードをアップしました。
httpヘッダーからPHPのバージョンを隠す

### 備忘録として

### 環境
PHP 7.0.21

### 設定箇所
```/etc/php.ini
・
・
expose_php = Off
・
・
```

### 参考

[コア php.ini ディレクティブに関する説明](http://php.net/manual/ja/ini.core.php#ini.expose-php)
>expose_php boolean
>PHP がサーバーにインストールされていることを全世界に晒し、PHP のバージョンも HTTP ヘッダに含めます
GitLFSで大量のデータから一部分取得する

Gitでバイナリデータを扱う際にはGitLFSを使用するのが一般的かと思われる。
ただ、GitLFSを利用して大量のデータを扱ってしまうと`git lfs clone`するのにものすごく時間がかかってしまう。。。

なので、ディレクトリの一部分だけ取得したい場合とかのためにgitのコマンドをメモしておく

```
mkdir <workspace>
cd <workspace>
git init
git config core.sparsecheckout true
git config filter.lfs.smudge "git-lfs smudge --skip %f"
git remote add origin <URL>
echo "取得対象のリポジトリ内のディレクトリを指定 (e.g./tmp)" > .git/info/sparse-checkout
git pull origin master 
git lfs pull -I 対象のファイルパス(カンマ区切りで複数指定できる)
```
iOS 11 の Safe Area は Auto Layout だけでなくコードベースでも取れる

iOS 11 では Safe Area という概念を導入しました。そして本日のイベントをご覧になられた方、もしくは iPhone X を少しでも掘ってみた方ならわかると思いますが、この Safe Area の概念はレイアウトする時、特に iPhone X ではものすごい重要になってきます。

具体的に iPhone X 向けのレイアウト最適化の話については是非とも公式の [Building Apps for iPhone X](https://developer.apple.com/videos/play/fall2017/201/) と [Designing for iPhone X](https://developer.apple.com/videos/play/fall2017/801/) をご覧いただければと思いますが、ここではとりあえず筆者みたいな Auto Layout 死んでも使わない人（）向けに「Safe Area」をコードで取る方法を簡単に説明したいと思います。（ちなみに Auto Layout でしたら `safeAreaLayoutGuide` を使うことができます）

iOS 11 からは `UIView` では `safeAreaInsets` という `UIEdgeInsets` 型のプロパティーが追加されました。[公式の説明](https://developer.apple.com/documentation/uikit/uiview/2891103-safeareainsets)によりますとこれは get-only のプロパティーで、ビューヒエラルキーに依存しているとのことです。なので最終的には Status Bar や TabBar の他に、ビューヒエラルキーに入っている `UIViewController` の `additionalSafeAreaInsets` にも依存しています。

例えばルート ViewController が保持している `view` ParentView は、iPhone X の縦画面なら上に `44`、下に `34` ピクセルの Safe Area がこの `safeAreaInsets` プロパティーで読み取れます（`UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)`）。そしてこの ParentView だけでなく、ParentView に追加した子ビュー ChildView も、ChildView 自分自身の `frame` に応じて、適切な `safeAreaInsets` が読み取れます。例えば ChildView の `frame.origin.y` が `10` なら、ChildView の `safeAreaInsets.top` は `44 - 10 = 34` になります。また、さらにこの ChildView に追加した子ビュー、つまり ParentView から見た GrandChildView でも、ビューヒエラルキーに則って ParentView から見た領域で `safeAreaInsets` を適切に読み取れます。例えば GrandChildView 自身の `frame.origin.y` が `10` なら、これは ChildView から見た `10` なので、さらに ChildView の `10` を合計した `20` こそが ParentView から見た `frame.origin.y` になります。ですので GrandChildView の中に残っている `safeAreaInsets.top` は `44 - 20 = 24` にならなければなりません。そして実際 GrandChildView の `safeAreaInsets.top` を確認してみれば確かにこれが `24` になります。

ただし、注意点としては、まだビューヒエラルキーに追加されていない場合（つまり `superview` が `nil` か、`superview` を遡ると最終的に `nil` になる場合）、`safeAreaInsets` は `.zero` になります。

ちなみに、GitHub に[簡単なサンプルプロジェクト](https://github.com/el-hoshino/SafeAreaTest)を上げました。iPhone X のシミュレーターで起動すると下記のようなスクリーンショットになります。この時裏から青、赤、緑のビューのそれぞれの `safeAreaInsets` をコンソールで確認できます（筆者の環境の出力も下記に置いておきます）

<img width="545" alt="スクリーンショット 2017-09-13 15.35.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/63998/907d4e8b-86dd-ee3a-fe74-2dd906691641.png">

```
self: UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)
sub: UIEdgeInsets(top: 34.0, left: 0.0, bottom: 24.0, right: 0.0)
grand: UIEdgeInsets(top: 24.0, left: 0.0, bottom: 14.0, right: 0.0)
```

（上記の出力について、`self` は一番裏にある青のビュー、`sub` は一個上にある赤のビュー、そして `grand` は一番上にある緑のビューを指します）

余談ですが、当然 [NotAutoLayout](https://github.com/el-hoshino/NotAutoLayout) もこの機能には対応する予定です。
expressで掲示板をつくる

expressを使い始めた初心者です.指摘やアドバイス等あればコメントをしてください.
##環境
node v6.11.2
express 4.15.2
テンプレートエンジンにejsを使用
データベースはNeDB

##準備
まずは必要なものををインストール

```bash:
npm install -g express-generator
express --view=ejs bbs
cd bbs
npm install
npm install --save express-session
npm install --save csurf
npm install --save nedb
```

##コード

express-generatorでつくられたファイルの構造は以下の通り

- bin
    - www
- node_modules
- public
    - images
    - javascripts
    - stylesheets
- routes
    - users.js
    - index.js 
- views
    - error.ejs
    - index.ejs
- app.js


これらのファイルを必要に応じて変更,書き換えしていく

```js:app.js(追加したものだけ)

const expressSession = require('express-session');
const csrf = require('csurf');

app.use(expressSession({secret: 'secret_key'}));
app.use(csrf({cookie: true}))
app.use((req, res, next) => {
  res.locals.csrftoken = req.csrfToken();
  next()
})

```
app.jsに書き加えたのはcsrf対策に必要なモジュール

```js:routes/index.js
const express = require('express')
const router = express.Router()
const nedb = require('nedb')
db = new nedb({
  filename: 'bbs.db',
  autoload: true
})
/* GET home page. */
router.get('/', function(req, res, next) {
  db.find({}).sort({time: 1}).exec((err, data) => {
    if (err) {
      res.send('dberror')
      return
    }
    let obj = {}
    for (let i=0; i < data.length ; i++) {//data配列をobjectに
      obj[i]=data[i]
    }
    res.render('index', {
      obj: obj,
      len: data.length
    })
  })
})

router.post('/post', (req, res) => {
  const name = req.param("name")
  const body = req.param("body")
  if ( !name || !body ) {
    res.send('名前もしくは本文を入力してください')
    return
  }
  db.insert({
    name: name,
    body: body,
    time: (new Date()).getTime()
  }, (err, doc) => {
    if (err) {
      res.send('dberror');
      return
    }
  })
  res.redirect("/")
})

module.exports = router;

```
'/'でアクセスしてきたら掲示板(index.ejs)を表示する.NeDBから読み込んだデータは時間順にソートしてobjに格納し,index.ejsには名前と本文の入っているオブジェクトobjと,NeDBに登録されたデータの個数を渡す.
'/post'でpostされたデータをNeDBに登録する

```html:views/index.ejs
<!DOCTYPE html>
<html>
  <head>
    <title>BBS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>BBSへようこそ</h1>
    <form action="/post" method="post">
      <input type="text" name="name" value="">
      <input type="text" name="body" value="">
      <input type="hidden" name="_csrf" value="<%= csrftoken %>"><!--csrf対策-->
      <input type="submit" name="" value="送信">
    </form>
    <ul>
      <% for(let i=0;i < len;i++){ %>
        <li><%= obj[i].name + ' : ' + obj[i].body %></li>
      <% } %>
    </ul>
  </body>
</html>

```

XSS対策のエスケープはejsの<%= %>でできるらしい

##実行

```bash:/bbs
npm start
```
上記コマンドで実行できる.実行されているのは/bbs/bin/wwwで,wwwは拡張子がないがjavascriptで書かれたファイルであるので,

```bash:/bbs/bin
node www
```
でも実行できる.
##感想
掲示板はPHPでフレームワークを使わずに作ったことがあったが,そのときよりも簡単に作れたと思う.ただ,フレームワーク初心者なのでどこのファイルに何を記述すればいいのか迷った.
次はチャットみたいなWebSocketを利用するものを作りたい.
Macで更新日が3日以上前のファイルを自動削除する方法

特定のフォルダにて、一定期間以上放置されたファイルを自動削除する方法です。cronを使って消していきます。

## cronに仕込む

`crontab -e`でcronの設定を開き、次の行を追加します。

```
* * * * * find ~/Desktop/tmp/ -mtime +2 -delete && touch ~/Desktop/tmp/注意！3日以上放置されたファイルは自動削除されます
```

以上で~/Desktop/tmp/のファイルが毎分チェックされ、3日以上過ぎていれば削除されます。

## テストコード

ファイル削除のテストコードです。

```bash:test.sh
#!/bin/bash

set -eu

: "テスト用フォルダ作成" && {
	cd ~/Desktop
	mkdir -p test
	cd test
}

: "テスト用ファイル作成" && {
	find . -delete
	for i in {0..3}
	do
		date=$(date "-v-${i}d" +'%Y%m%d%H%M')
		touch -t $date $date.log 
	done
}

: "テスト" && {
	echo 今日の日付: && date +'%Y-%m-%d %H:%M'
	echo 今あるファイル: && ls -l
	echo 更新日が3日以上過去のファイルを消す: && 
		find . -mtime +2 -name '*.log' -delete -print
	echo 残ったファイル: && ls -l
}
```

```txt:実行結果
今日の日付:
2017-09-13 15:27
今あるファイル:
total 0
-rw-r--r--  1 suin  staff  0 Sep 10 15:27 201709101527.log
-rw-r--r--  1 suin  staff  0 Sep 11 15:27 201709111527.log
-rw-r--r--  1 suin  staff  0 Sep 12 15:27 201709121527.log
-rw-r--r--  1 suin  staff  0 Sep 13 15:27 201709131527.log
更新日が3日以上過去のファイルを消す:
./201709101527.log
残ったファイル:
total 0
-rw-r--r--  1 suin  staff  0 Sep 11 15:27 201709111527.log
-rw-r--r--  1 suin  staff  0 Sep 12 15:27 201709121527.log
-rw-r--r--  1 suin  staff  0 Sep 13 15:27 201709131527.log
```

## 参考資料

* [BashでN回ループは`for i in {1..N}`でOK - Qiita](http://qiita.com/suin/items/d92fbe0c3a2f9eb8a411)
* [findで更新日がN日以上過去のファイルを探すには-mtimeオプションを使う - Qiita](http://qiita.com/suin/items/9b8ec65bca8070a5eab6)
[Survey] Kaggle - Quora 7位解法まとめ

Kaggle - Quora Question Pairs[^1]の7位解法[^2]の調査記事です．

Title: [7位] 7-th solution overview
Author: aphex34
Discussion URL: https://www.kaggle.com/c/quora-question-pairs/discussion/34697


### モデル構造

- 下記方式1〜5の予測結果(sigmoid)を特徴量としてXGBoostで予測
- 10-fold cvでout-of-fold prediction

#### 方式1.

- Reccurent Highway Network[^3]
- 双方向LSTM
- Siamese-Net[^4]
- GloVe 840Bで分散表現
- 89.1%の正答率

#### 方式2.

- 方式1と基本同じだが，文字単位で適用
- 単語使わなくても方式1より1%程度性能が悪化するだけだった

#### 方式3.

- 方式1と基本同じで，3-gramを利用

#### 方式4.

- Decomposable Attention[^9]を利用．
- かなり高速に収束(方式1は収束に2時間，こちらは20分程度)
- 異なるカーネルサイズで実験(論文[^3]版, [2,3]版, [2,3,5]版)

#### 方式5.

- 方式1〜4と同じだが，Attention Mechanismを利用していない．

### 自然言語処理(教師なしNLP特徴量)

- Abhishek[^5], Mephistopheles[^6], the1owl[^7]によるカーネル
- WordNetの類似性[^8]
- GloVe840BでWord Mover's Distance[^10]を算出
- NERベースとPOSベースの特徴量(Stanford CoreNLPでタグを入手)

### グラフ構造

- 上位陣と同じ

### 最適化

- binary crossentropyのかわりにcontrastive lossを利用．

### その他の工夫

- Pseudo Labeling
	- 最良のモデルを利用してテストセットを予測
	- (train+test) x (train+test)のスパース正方行列$A$を構築
	- 重複確率が閾値以上の全てのペアに対して，スパース正方行列$A$の対応する要素に1を挿入
	- trainとtestの各ペアについてコサイン類似度を算出

- 予測値をそれぞれ1e-5と1-1e-5でクリッピング
- ストップワードなし版は性能が落ちたので除外.


## References

[^1]: Kaggle, [Quora Question Pairs](https://www.kaggle.com/c/quora-question-pairs), 2017.
[^2]: aphex34, [7-th solution overview](https://www.kaggle.com/c/quora-question-pairs/discussion/34697), 2017.
[^3]: Zily et al., [Recurrent Highway Networks](https://arxiv.org/abs/1607.03474), 2017.
[^4]: Dandekar, [Semantic Question Matching with Deep Learning](https://engineering.quora.com/Semantic-Question-Matching-with-Deep-Learning), 2017.
[^5]: Abhishek, [Abhishek's features](https://www.kaggle.com/c/quora-question-pairs/discussion/31284)
[^6]: mephistopheies, [0.29936 solution](https://www.kaggle.com/c/quora-question-pairs/discussion/32313)
[^7]: the1owl, [Matching ¿Que? for Quora - End to End 0.33719 PB](https://www.kaggle.com/the1owl/matching-que-for-quora-end-to-end-0-33719-pb)
[^8]: sujitpal, [nltk-examples](https://github.com/sujitpal/nltk-examples/blob/master/src/semantic/short_sentence_similarity.py)
[^9]: Parikh et al., [A Decomposable Attention Model for Natural Language Inference](https://arxiv.org/abs/1606.01933), 2016.
[^10]: Kusner et al., [From Word Embeddings To Document Distances](http://proceedings.mlr.press/v37/kusnerb15.pdf), 2015.
findで更新日がN日以上過去のファイルを探すには-mtimeオプションを使う

findコマンドでファイルの最終更新日時が指定日数以上過去のファイルを探す方法です。

### 更新日が1日以上過去のファイルを探す

```bash
find . -mtime +0
```

0が1日以上という意味です。

### 更新日が2日以上過去のファイルを探す

```bash
find . -mtime +1
```

### 更新日が3日以上過去のファイルを探す

```bash
find . -mtime +2
```

## テストコード

次はテストコードです。挙動をお手元のmacOS環境で確認できます。ちなみに、[「名前付きブロック記法」](http://c16e.com/1603281120/)で書いています。

```bash:main.sh
#!/bin/bash

set -eu

: "テスト用フォルダ作成" && {
	cd ~/Desktop
	mkdir -p test
	cd test
}

: "テスト用ファイル作成" && {
	find . -delete
	for i in {0..3}
	do
		date=$(date "-v-${i}d" +'%Y%m%d%H%M')
		touch -t $date $date.log 
	done
}

: "テスト" && {
	echo 今日の日付 … $(date +'%Y-%m-%d %H:%M')
	echo 更新日が1日以上過去のファイルを探す: && 
		find . -mtime +0
	echo 更新日が2日以上過去のファイルを探す: && 
		find . -mtime +1
	echo 更新日が3日以上過去のファイルを探す: && 
		find . -mtime +2
}
```

```txt:実行結果
今日の日付 … 2017-09-13 15:14
更新日が1日以上過去のファイルを探す:
./201709101514.log
./201709111514.log
./201709121514.log
更新日が2日以上過去のファイルを探す:
./201709101514.log
./201709111514.log
更新日が3日以上過去のファイルを探す:
./201709101514.log
```
サーバ上の実行中プロセスを確認する

`ps -ax`
`ps -ax | grep httpd`※見たいやつだけの場合
オプションで
「-a」は全てのプロセスを表示する。
「-x」他の端末に結び付けられているプロセスも表示するという説明だったけど、
「-a」と「-x」で別々に実行した時のものを足しても
「-ax」で実行した時の結果が違う。。。ようわからんけど、
上記コマンドで実行中のプロセスが確認できると覚えておこう^^;
UpUp.jsで簡単にオフライン時のページを用意する

## 参考

* [UpUp - Webのオフラインアクセス機能を簡単に実装する MOONGIFT](http://www.moongift.jp/2017/07/upup-web%E3%81%AE%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E6%A9%9F%E8%83%BD%E3%82%92%E7%B0%A1%E5%8D%98%E3%81%AB%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B/)
* [Service Worker の紹介  |  Web  |  Google Developers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers?hl=ja)
    * localhost 以外で動かす場合は、 https が必要。

## 準備

https://github.com/TalAter/UpUp/releases から
https://github.com/TalAter/UpUp/archive/v0.3.0.zip
をダウンロード。

UpUp-0.3.0/demo/ 内から以下を取得

* upup.min.js
* upup.min.js.map
* upup.sw.min.js
* upup.sw.min.js.map

## サンプル

```html:1.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="/upup.min.js"></script>
<script>
	UpUp.start({'content-url': 'offline.html'});
</script>
</head>
<body>
通常のページ
</body>
</html>
```

```html:offline.html
<head>
<meta charset="utf-8">
</head>
<body>
<pre>
インターネットに接続できていない可能性があります。

次の内容を確認してください。

* ケーブルがしっかり接続されていること

* ブロードバンドルーターの電源をOFF/ONして1分ほど経ってから
  再度ページを開き直してください。
  
</pre>
</body>
</html>
```

## 表示例

オンライン時

![スクリーンショット_2017-09-13_14-51-51.png](https://qiita-image-store.s3.amazonaws.com/0/25728/d2b91919-2f22-67bf-fa77-cc2456868f20.png)

オフライン時

![offline.png](https://qiita-image-store.s3.amazonaws.com/0/25728/0bde3820-78ce-4842-8fea-bb25cd6f3c9a.png)

![スクリーンショット_2017-09-13_15-40-52.png](https://qiita-image-store.s3.amazonaws.com/0/25728/53804a9e-5056-fa84-2564-6bddd11b4973.png)
BashでN回ループは`for i in {1..N}`でOK

Bashで指定回数ループする処理は、`for i in {x..y}`という書き方がお手軽です。

```bash:main.sh
#!/bin/bash
for i in {1..3}
do
	echo $i
done
```

```console:実行結果
1
2
3
```
Atomに統合開発環境パッケージが出たってよ

<img width="1440" alt="スクリーンショット 2017-09-13 13.44.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/bbdabee8-abe0-ae61-64c8-ae5dbc6ed4de.png">

あの「GitHub Inc」さんから「Facebook」と共同で開発した「Atom IDE」なるものが発表されました

このパッケージを入れることで「Atom」をIDEにすることができます。

## 現在対応している言語

- TypeScript & JavaScript
- Flow
- C#
- Java(Java 8 runtime required)
- PHP(PHP 7 runtime required)

## 推奨ではありません。必須です

公式の「[Atom IDEブログ](http://blog.atom.io/2017/09/12/announcing-atom-ide.html)」をみてみると

> We strongly recommended you use Atom Beta 1.21 as it includes 
the necessary file monitoring and process control to ensure the underlying
language servers are running properly.

なんて書いてあるので
今の最新版(1.20)でもいけるんじゃね？と思ってやってみたら
<img width="697" alt="スクリーンショット 2017-09-13 13.28.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/7a38e339-3a21-286d-4afa-f61192712635.png">

インストールすら許されなかったので
強く推奨じゃなく**必須**です。

もう一度言います**必須**です。

**!!!!!required!!!!!**

## 下処理

**(Macで行なっております)**

Atomが既に入っていたりすると何かと面倒なこともあるので

```
$ rm -rf ~/.atom
```

これでパッケージやらなんやらまとめてサクッと消しちゃいましょう

あとはAppCleanerなどで消してください。

これでクリーンな状態で始められますね！キリッ！

## 改めて入れてみましょう

[Atom Beta](https://atom.io/beta)
こちらからbeta版をインストールしてください

<img width="1154" alt="スクリーンショット 2017-09-13 14.13.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/491a4534-e032-fce8-393b-848cbc893cb4.png">

このように1.21.xxになって入れば問題ありません。

### 🎁必須パッケージをインストールします。

**Preferences** > **install**

といって「**atom-ide-ui**」を入力しインストールしてください

<img width="782" alt="スクリーンショット 2017-09-13 14.17.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/08b97632-4d78-b77f-49c8-834f4082e798.png">

### 🎁入れたい言語のIDEサポートパッケージを入れる

| 言語名 | パッケージ名 |
|:-:|:-:|
| Flow | ide-flowtype |
| C# | ide-csharp |
| Java | ide-java |
| PHP | ide-php |
| TypeScript & JavaScript | ide-typescript |

今回はjavascriptのtypescriptを入れてみたいと思います。

## 🌟使ってみる

- auto-completion
- outline view
- go to
- find all
- hover-to-reveal
- formatting

があるらしいので
やってみましょう。

![auto.gif](https://qiita-image-store.s3.amazonaws.com/0/177207/fe187e29-9363-50d8-1e56-7adbaef3b476.gif)

自動補完されている…？
クリーンな状態なはずなので…。

まだ使い始めなので色々調べて追記したいと思います。
IDEって言うくらいなんだからデバッグとかビルド出来るんだよな…？？
と思ってます。

詳しくはこちらへ
https://nuclide.io/blog/2017/09/12/Introducing-Atom-IDE-UI/
git amでコンフリクトしたときの対処


`git am`でコンフリクトすると以下のように出力される

```bash
$ git am /path/to/patch
(中略)
The copy of the patch that failed is found in: .git/rebase-apply/patch
When you have resolved this problem, run "git am --continue".                                            
If you prefer to skip this patch, run "git am --skip" instead.                                           
To restore the original branch and stop patching, run "git am --abort". 
```

出力にあるように失敗したパッチは.git/rebase-apply/patchにコピーされているのでpatchコマンドで適用する

```bash
$ patch -p1 < .git/rebase-apply/patch
patching file Makefile.am                           
Hunk #1 succeeded at 303 (offset -25 lines).        
patching file configure.ac                          
Hunk #1 succeeded at 224 (offset -25 lines).        
Hunk #2 succeeded at 710 (offset -35 lines).        
patching file src/compositor-drm.c                  
Hunk #1 succeeded at 56 with fuzz 1 (offset -1 lines).                                                   
Hunk #2 succeeded at 115 with fuzz 2 (offset -3 lines).                                                  
Hunk #3 succeeded at 193 (offset -7 lines).         
Hunk #4 succeeded at 2162 (offset -196 lines).      
Hunk #5 succeeded at 3302 (offset -201 lines).      
Hunk #6 FAILED at 3760.                             
Hunk #7 succeeded at 3609 (offset -207 lines).      
Hunk #8 succeeded at 3675 (offset -206 lines).      
1 out of 8 hunks FAILED -- saving rejects to file src/compositor-drm.c.rej                               
patching file src/compositor-drm.h                  
Hunk #1 succeeded at 87 with fuzz 2 (offset -3 lines).                                                   
patching file src/gst-recorder.c                    
patching file src/gst-recorder.h                    
patching file src/main.c                            
Hunk #1 FAILED at 278.                              
Hunk #2 FAILED at 752.                              
2 out of 2 hunks FAILED -- saving rejects to file src/main.c.rej                                         
patching file src/media-ctl/libmediactl.c           
patching file src/media-ctl/libv4l2subdev.c         
patching file src/media-ctl/mediactl-priv.h         
patching file src/media-ctl/mediactl.h              
patching file src/media-ctl/tools.h                 
patching file src/media-ctl/v4l2subdev.h   
```

ここではcompositor-drm.cとmain.cへの変更が一部リジェクトされたので、compositor-drm.c.rejとmain.c.rejを眺めながら手でパッチを当てた後、変更を全て（patchコマンドで変更されたもの＋手パッチしたもの）`git add`して

```bash
$ git am --continue
```

でOK。

一度に複数のパッチを適用したときも基本的に上の動作を繰り返していけば良い。
SourceTreeを使って、ローカルでgitリポジトリを作った後、リモートに登録する方法

# 概要 
[ローカルでgitを使用した後、gitHubに登録する方法](http://qiita.com/koshihikari/items/dcf126fa9c0de2b6fa7e)のSourceTree版です。

前提としては、ローカルで既にgit管理中で、リモートリポジトリを新規で作成した状態です。

# 手順
設定を開くと、リモート設定が何も登録されていないはずなので追加します。

1. SourceTreeで該当のリポジトリを開く
2. 「設定」を押す。
3. 「リモート」タブを選択。
4. 「追加」ボタンを押す。
5. リモートの名前に「origin」、URL/パス：の欄にGitHub上で確認できる
リポジトリのアドレス（例：`https://github.com/user/code.git`）を入力してOKする。
6. 登録したリモートリポジトリにプッシュする。

<img width="570" alt="スクリーンショット 2017-09-13 14.25.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/46299/c73a6398-abab-b0f6-d3c8-d58c71738bd3.png">

<img width="619" alt="スクリーンショット 2017-09-13 14.26.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/46299/a5668dcf-58ba-864e-b734-6be69136c26f.png">

ターミナルを使わなくてもできました。めでたしめでたし。
【PHP】Formの入力要素valueに字数制限について


いいブログを見つかりました。
share with you ~

*参考*
[Formの入力要素に字数制限はあるのか](http://wiz.came.ac/blog/2013/06/htmlform.html)

`---I Love PHP (｡･ω･｡)ﾉ♡`
Arduino-ESP32 Serial通信

WROOM-32のArduino開発環境でシリアル通信を行う方法を確認します。
必要な事項は以下です。

(1) シリアル通信のハードウェアピンの接続
(2) Arduinoライブラリ　Serialを使ったプログラム

#(1) シリアル通信のハードウェアピンの接続
ハードウェアのピン配置については
EPS32と使用するモジュールのドキュメントのUARTを確認します。
UARTは0,1,2の3系統があります。

UART0 ( デフォルト RX=GPIO3, TX=GPIO1 ) 
![WROOM_UART_0_PIN.png](https://qiita-image-store.s3.amazonaws.com/0/165672/e841e340-1252-5629-c832-a288e670752e.png)
UART1 ( デフォルト RX=GPIO9, TX=GPIO10 ) ※WROOM32では、デフォルトでは使用不可
![WROOM_UART_1_PIN.PNG](https://qiita-image-store.s3.amazonaws.com/0/165672/96b244e4-3e78-7f0a-b1b3-9202dae1148f.png)
UART2 ( デフォルト RX=GPIO16, TX=GPIO17 )
![WROOM_UART_2_PIN.png](https://qiita-image-store.s3.amazonaws.com/0/165672/b251298a-d876-e3de-512f-6af977cc7c04.png)

http://ht-deko.com/arduino/esp-wroom-32.html#18
上記を参考にしますと、UART1はデフォルトのピン(IO9,10)では使用不可なので、UART1を使用する際には使用するピンを変更して使用するようです。

<20180209追記>
UART1の動作確認しました。
使用する場合は、
(1) HardwareSerial Serial1(1); を定義して、
(2) Serial1.begin(115200, SERIAL_8N1, 33, 34);　をsetup()で実行することで、使用可能になります。
上記はRX=33, TX=34の例ですので、引数で使用したいGPIOの番号を指定できます。(IO6～IO11, IO34, IO35は使用不可)

begin()関数の詳細はgithubの[ここ](https://github.com/espressif/arduino-esp32/blob/master/cores/esp32/HardwareSerial.h)を確認してください。
<20180209追記 end>

今回はUART2を使用して確認します。

#(2) シリアル通信のハードウェアピンの接続
Arduinoでのシリアル通信はSerialというライブラリを使用します。

ArduinoのSerial ライブラリ　ドキュメント
https://www.arduino.cc/en/Reference/Serial
日本語の解説
https://garretlab.web.fc2.com/arduino_reference/language/functions/communication/serial/findUntil.html

Serialの送受信のサンプルは[MultiSerial]がSDKのサンプルに入っています。
https://github.com/arduino/Arduino/blob/master/build/shared/examples/04.Communication/MultiSerial/MultiSerial.ino

以下を参考にESP32のUART2(IO16,IO17)を使うように設定します。
      http://taltalp.hatenablog.jp/entry/2017/05/12/153509

```
HardwareSerial Serial1(2);

void setup() {
  // initialize both serial ports:
  Serial.begin(115200);
  Serial1.begin(115200);
}

void loop() {
  // read from port 1, send to port 0:
  if (Serial1.available()) {
    int inByte = Serial1.read();
    Serial.write(inByte);
  }

  // read from port 0, send to port 1:
  if (Serial.available()) {
    int inByte = Serial.read();
    Serial1.write(inByte);
  }
}
```

受信したデータがAsciiの場合は、Serial.write(inByte);とすることで、文字が出力されます。

サンプルの関数Serial.read()は1byteを読み込みします。
また、Serial.avialable()は、取得可能なバイト数を確認できます。

Additional UART 
http://hackaday.com/2017/08/17/secret-serial-port-for-arduinoesp32/
こちらのリンクだと、ライブラリ側のピン設定を変更してUART1を使えるようにしているようです。
MacへのJupyter Notebookのインストール

#ターミナルの起動
 - MacのF4キーを押すと、アプリケーション一覧が出ます。ユーティリティ>ターミナルの順で、黒い四角のマークのターミナルを起動してあげてください。

# Homebrewのインストール
 - https://brew.sh/
 - 以上URLを押して、インストールサイトへ移動。
 - "Install Homebrew"のURLをダブルクリックで全選択し、コピー。
 - ターミナルへ戻って、ペーストし、Enterを押す。
 - なんか色々バーって出るのが、落ち着くまで待つ。

# pyenvののインストール
###以下の内容をコピペ→Enterしていきましょう。

 - homebrewでインストール

``` bash:bash1
brew install pyenv
```

``` bash:bash2
brew install pyenv-virtualenv
```

 - 細かい.bash_profileの設定（1行ずつ分けてコピペ→Enter）
 
``` bash:bash3
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
```
- 読み直し

``` bash:bash3
source .bash_profile
```

#PythonとAnacondaのインストール

- Pythonのインストール

``` bash:bash
pyenv install 3.6.0
```

- Anacondaのインストール（多分必要のないものも含まれるが一応）

``` bash:bash
pyenv install anaconda3-4.3.1
```

``` bash:bash
pyenv global anaconda3-4.3.1
conda create --name py3.6.0 python=3.6.0
pyenv local anaconda3-4.3.1/envs/py3.6.0
pyenv global system
source $PYENV_ROOT/versions/anaconda3-4.3.1/bin/activate py3.6.0
```

#Jupyter Notebookのインストール

- Jupyterのインストール

```bash:bash
pip install jupyter
```

```bash:bash
pip install "ipython[notebook]"
```

#Jupyter Notebookの起動

```bash:bash
jupyter notebook
```
- これでウェブブラウザ上でJupyter Notebookを起動できます。右上のNewというところから、"Python3"を選択すると、新規.ipynbファイルを作成できます。
- Jupyter Notebookを使えば、Pythonのコードの入力内容に対する出力結果が同一画面上で確認できます。非常に便利です。
【jQuery】ファイルダイアログを起動するプラグイン【JavaScript】

#ファイルダイアログを好きなタイミングで起動したい方へ
ファイルを選択させたいだけなのに&lt;input type="file"&gt;って書くの嫌ですよね。
おまけに見た目もカッコ悪いし。
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/163605/572643cb-426b-51b0-b9db-0d30eb85ac3d.png)

そんなあなたにお勧めなのがjquery.filedialog.js！
あなたが実装するのは、ファイルが選択された時の処理だけです！

#使い方
① まず以下のソースを適当なソースに貼り付けてjquery.filedialog.jsで保存


② 次にscriptタグで読み込む。(jqueryの後に読み込んでください。)

```html
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.filedialog.js"></script>
```


③ 好きなタイミングで、$.file.open({onChange: function() {...}})メソッドを呼ぶ。

```js

$(document).mousedown(function() {
	$.fileDialog.open({
		accept: '.png',
		onChange: function(files) {
			// ここに処理を書く			 
		}
	});		
});
```


④ ファイルダイアログでユーザーがファイルを選択したときに、onChangeが呼ばれる。
#openメソッド

openメソッドの引数は、

```js
{
  accept: '.png',
  onChange: function(files) {  /* ここに処理を書く */ }
}
```

てな感じでオブジェクトを渡してください。

acceptについては、<a href="http://html5.cyberlab.info/elements/forms/input-accept.html">こちら</a>を参照してください。acceptは省略可能です。

onChangeの引数はfilesです。1つ目のファイルを処理したい場合、files[0]としてください。

#clearメソッド

このメソッドは呼ばなくても基本大丈夫ですが、
ファイルダイアログが開かれてcancelされた時に、
非表示の&lt;input type="file"&gt;が残ってしまいます。
clearメソッドはそれを削除します。

#ソース
<a href="https://github.com/pgman/fileDialog">こちら</a>からダウンロードしてください。
2024/12/18: githubにソースを移動させました

#最後に
本プラグインは自由に使ってもらって大丈夫です。
著作権は放棄します。
reactからvueにお引っ越ししてみる(後篇)

実際に簡単なアプリ置き換えの実装してみたときの追加メモ
react/reduxで書いたアプリも今のところ大きな問題もなく移植はできている

# propsの受け渡し
propsで受け取ったデータを変更して出力する場合、computedを使う
親から子にデータを渡す場合はv-bindを使う
これでreactのpure renderなcomponentはつくれる

```js


  <div
    v-for="(item, index) in items"
  >
    <my-component :item="item" />
  </div>

```

# inlineStyle

```js
<div
  :style="{width: '100px'}"
/>
```

# postcss
こちらを参考に導入
https://github.com/vuejs/vue-loader/issues/74
https://vue-loader.vuejs.org/en/features/postcss.html
generateLoaders経由ではうまく動かなかったのであまり頑張らずに
vue-loader.conf.jsにpostcssを追加して対応

```js

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  postcss: [
    require('postcss-cssnext')({
      warnForDuplicates: false,
    }),
  ],
```

これでnestとかが使える

# イベントハンドリング
methods使う

# vuexのactionの引数
引数は一つしか渡せないので複数のデータを渡したいときはObjectで渡す

# ElementUIでbuttonとかを使う

```js
import Button from 'element-ui'

<template>
  <button>hoge</button>
</template>
```

とかやろうとするとbutton要素とかはデフォルトの要素名と重複するので怒られる

```
Do not use built-in or reserved HTML elements as component id: Button
```

aliasで対応する


```js
import { Button as HogeButton } from 'element-ui';

<template>
  <hoge-button>hoge</hoge-button>
</template>
```

# templateのプロパティにobjectを使いたい
templateがごちゃごちゃするのを避けたかったのでdata/conputed使った

# dataとcomputedとmethod
dataはlocal stateと認識
computedとmethodは取れる値は同じ
computedはcacheが聞いていて依存関係が更新されたときのみ更新
methodはrender毎に都度呼ばれる
パフォーマンス観点でのCSSセレクタ指定方法

CSSのセレクタ指定方法はたくさんあるが、パフォーマンス観点ではどのような違いがあるのか、気になったので調査結果をメモ

#調査結果
##[参考サイト1](https://stackoverflow.com/questions/12279544/which-css-selectors-or-rules-can-significantly-affect-front-end-layout-renderi)
回答より抜粋
>| セレクタ指定方法     |      Firefox 15.0 |   Chrome 19.0.1084.1 |  Internet Explorer 8 |
|:-----------------------------|------------------:|---------------------:|---------------------:|
|class selectors (.classname)|                                      35ms|   100ms|  35ms|
|class selectors, more specific (div.classname)|                    36ms|   110ms|  37ms|
|class selectors, even more specific (div div.classname)|         40ms|   115ms|  40ms|
|id selectors (#id)|                                                35ms|   99ms|   35ms|
|id selectors, more specific (div#id)|                              35ms|   105ms|  38ms|
|id selectors, even more specific (div div#id)|                     40ms|   110ms|  39ms|
|class selectors, with attribute (.class[title="ttl"])|             45ms|   <font color="Red">400ms</font>|  <font color="Red">2000ms</font>|
|class selectors, more complex attribute (.class[title~="ttl"])|    45ms|   <font color="Red">1050ms</font>| <font color="Red">2200ms</font>|

古い情報だが、classセレクタ・idセレクタ・要素型セレクタは問題なさそう
属性セレクタを指定した場合は、極端にレンダリング速度が遅くなることが判明(極力使わないほうが良さそう)
※個人的にFirefoxがあまり影響を受けないことが興味深い(気になる人は試してみたほうが良いと思う)

##[参考サイト2](https://stackoverflow.com/questions/29421373/is-css-faster-when-you-are-specific)
回答より抜粋
レンダリング速度が速い順に記載
>1. ID, *e.g. #header*
2. Class, *e.g. .promo*
3. Type, *e.g. div*
4. Adjacent sibling, *e.g. h2 + p*
5. Child, *e.g. li > ul*
6. Descendant, *e.g. ul a**
7. Universal, *i.e. **
8. Attribute, *e.g. [type="text"]*
9. Pseudo-classes/-elements, *e.g. a:hover*

やはり、classセレクタ・idセレクタ・要素型セレクタがトップを占める

##[参考サイト3](http://johnotander.com/css/2015/06/10/css-performance/)
使用を控えたほうが良いプロパティを抜粋
>- border-radius
- box-shadow
- transform
- filter
- :nth-child
- position: fixed;

使用するべきでないプロパティを抜粋
>- *
- [disabled]
- [type=“text”]

#結論
- なるべく、classセレクタ・idセレクタ・要素型セレクタで指定する
- 全称セレクタ・属性セレクタはコストが高いため、使用しない
- 子セレクタ・子孫セレクタは使用を控える(使用する場合は**ネストの深さ**や**キーセレクタ**に気をつける)

※ネストの深さやキーセレクタが与えるパフォーマンスについては[ブラウザのCSS解釈方法についての衝撃事実](http://qiita.com/rnakayama/items/e4f3b54e266f7e1867f9)を参照

#余談
CSSセレクタのパフォーマンス検証は[CSS Test Creator](http://stevesouders.com/efws/css-selectors/csscreate.php)が便利らしい
【AWS】t2.nanoのEC2インスタンスでのMySQL起動が失敗する。

### 経緯
t2.microのEC2にMySQLをインストールした後、ステージング環境作成のため、AMIを作成したが、その後、作成したAMIからt2.nanoのEC2を起動したら、MySQLが起動しなかったので、その時に行った作業の備忘録です。

### 環境
mysql  Ver 14.14 Distrib 5.6.36
Amazon Linux AMI release 2017.03

### 結果
下記のサイトが参考になりました。どうもありがとうございました。
[t2.nano で MySQL5.6 を動かすために](https://blog.yskw.info/articles/295/)

### やったこと
- エラー内容の確認
- MySQLのバージョン確認
- My.confに設定追加

### エラーログの確認
```/var/log/mysqld.log
・
・
2017-09-07 08:52:41 2962 [Note] Plugin 'FEDERATED' is disabled.
2017-09-07 08:52:42 2962 [Note] InnoDB: Using atomics to ref count buffer pool pages
2017-09-07 08:52:42 2962 [Note] InnoDB: The InnoDB memory heap is disabled
2017-09-07 08:52:42 2962 [Note] InnoDB: Mutexes and rw_locks use GCC atomic builtins
2017-09-07 08:52:42 2962 [Note] InnoDB: Memory barrier is not used
2017-09-07 08:52:42 2962 [Note] InnoDB: Compressed tables use zlib 1.2.8
2017-09-07 08:52:42 2962 [Note] InnoDB: Using Linux native AIO
2017-09-07 08:52:42 2962 [Note] InnoDB: Using CPU crc32 instructions
2017-09-07 08:52:42 2962 [Note] InnoDB: Initializing buffer pool, size = 128.0M
InnoDB: mmap(137363456 bytes) failed; errno 12
2017-09-07 08:52:42 2962 [ERROR] InnoDB: Cannot allocate memory for the buffer pool
2017-09-07 08:52:42 2962 [ERROR] Plugin 'InnoDB' init function returned error.
2017-09-07 08:52:42 2962 [ERROR] Plugin 'InnoDB' registration as a STORAGE ENGINE failed.
2017-09-07 08:52:42 2962 [ERROR] Unknown/unsupported storage engine: InnoDB
2017-09-07 08:52:42 2962 [ERROR] Aborting
・
・
```

### MySQLのバージョン確認
```
$ sudo mysql --version
mysql  Ver 14.14 Distrib 5.6.36, for Linux (x86_64) using  EditLine wrapper
```

### my.cnfの修正
```/etc/my.cnf
[mysqld]
・
・
・
performance_schema=off
```
bundler/inline (Gemfileの内容をプログラム中にインラインで書くための方法について)

要約
----

```rb
#!/usr/bin/env ruby

require 'bundler/inline'

gemfile do
  source 'https://rubygems.org'
  gem 'to_gunma', '0.0.2'
end

array = [1,2,3]
array.to_gunma!
puts array.to_s
```

みたいに、`gemfile`メソッド使えばインラインで Gemfile の内容書けるよ！　詳しくは https://github.com/bundler/bundler/blob/master/lib/bundler/inline.rb 読んでね！

１ファイルくらいのスクリプト向け bundler
====

ruby のパッケージ管理ツール [Bundler](http://bundler.io/) はとても便利です。
便利ですが、ちょっとした、ちょうど 1 ファイルくらいの軽量スクリプト書くときには、いちいち `Gemfile` を書いたりするのは面倒です。そんな時、たいていの場合は bundler を使わず、普通に `gem install hogehoge` みたいにライブラリをインストールし、`require 'hogehoge'` してライブラリを読み込んでいるかと思います。でも、たまに、このスクリプトファイルを共有する時とかにライブラリのバージョン差異が出て地味に不便なんですよね。

そんなわけで、 Bundler にはインラインで依存ライブラリを指定する記法が用意されています。

https://github.com/bundler/bundler-features/issues/47

です。　

・・・この issue を読むと、誕生背景やサンプルコード、実装内容に制限事項が網羅されているので解説など不要な気がしますが、将来の自分のために日本語でまとめておきましょう。
なお、詳しい情報は [APIドキュメント](https://github.com/bundler/bundler/blob/master/lib/bundler/inline.rb) に載っていますので、使いたい方はそちらをご参照ください。

```rb
#!/usr/bin/env ruby

require 'bundler/inline'

gemfile do
  source 'https://rubygems.org'
  gem 'to_gunma', '0,0.2'
end

array = [1,2,3]
array.to_gunma!
puts array.to_s
```

上記に示すサンプルコードのように、 `require 'bundler/inline'` することでインラインで Gemfile を宣言する `gemfile` メソッドを使えるようになります。

このファイルを実行する環境で gem がインストール済みであれば、 `gemfile` メソッドのブロック内で定義したライブラリを自動的に require までしてくれます。また、第一引数に `true` を設定することで、未インストールの時に自動的にインストールまでしてくれます。

使いみち
-----

サンプルコードを gist に貼ったりするときのお供にどうぞ！　例えば、バグレポートを報告するときなどにバージョンを図示して報告した方が便利です。

https://github.com/rails/rails/pull/20429

をみると、例えば [rails](https://github.com/rails/rails) ではテンプレートにこの記法が組み込まれているのがわかるかと思います。こんな風に、例えば「ブログの記事用サンプルコード」や「Qiitaに載せるのちょっとしたコード」などで、特定ライブラリの特定バージョンに依存したことを明示したいときなどにお使いくださいな！

良いプログラミングを！
複数ファイルに書かれてる React.PropTypes を PropTypes へ変換

今更感あるけども。

## このやり方での依存

- npm@^5.2.0 - `npxのため`
- [the_silver_searcher](https://github.com/ggreer/the_silver_searcher) - `brewとかで入れる`
- [react-codemod](https://github.com/reactjs/react-codemod) - `好きな場所にクローン`

`~/react-codemod`となるように置いたとします。

## コマンド

こんだけ。

```bash
ag --js -l React.PropTypes | \
xargs -I@ npx jscodeshift -t ~/react-codemod/transforms/React-PropTypes-to-prop-types.js @
# import {Component, PropTypes} from 'react'; みたいな場合
ag --js -l ', PropTypes}' | \
xargs -I@ npx jscodeshift -t ~/react-codemod/transforms/React-PropTypes-to-prop-types.js @
# Time elapsed: 5.044seconds 
# npx: installed 273 in 26.297s
# Processing 1 files... 
# Spawning 1 workers...
# Sending 1 files to free worker...
# All done. 
# Results: 
# 0 errors
# 0 unmodified
# 0 skipped
# 1 ok
# :
# :
```

`ag(the_silver_searcher)`の`--js`と`-l`で、`React.PropTypes`と書かれたファイル名一覧を取得して、変換処理に渡してます。

`jscodeshift -t`へ渡すパスは[この辺](https://github.com/reactjs/react-codemod#included-scripts)に色々書かれてます。

---

ただ`npx`使うとめっっさ遅い。変換するファイルが多いならやっぱりグローバルインストールが良さそうです。

```bash
npm i -g jscodeshift

agjs -l React.PropTypes | \
xargs -I@ jscodeshift -t ~/test/react-codemod/transforms/React-PropTypes-to-prop-types.js @
```
Elasticsearch から type が無くなる

Elasticsearch の勉強を兼ねて、アプリを開発しています。今はちょっとした機能を追加しようと思いあれこれ考えていますが、既存のデータ構造をうまく拡張できずに悶々としていました。

そんな折、たまたま見かけた以下の記事に、Elasticsearch 6 では「_type は Deprecared」と書いてあり、びっくりしました。なぜなら、私が作った index には _type が3つあり、なおかつそのうち２つを parent-child の構造にしていたからです。

* [CA.io #1 - マッチングサービスを支えるElasticsearchメモ](http://qiita.com/don_hanabi/items/1c1fab12fd05d4942bc6)
* [Elasticsearchの勉強会(CA.io#1)のメモ](http://qiita.com/kaznishi/items/b2798581900e0738f433)

これでは間違いなくES7の時代には移行できなくなると思い、対策を調べてみました。

* [Removal of mapping types](https://www.elastic.co/guide/en/elasticsearch/reference/6.x/removal-of-types.html)
* [Indices, types, and parent / child: current status and upcoming changes in Elasticsearch](https://www.elastic.co/blog/index-type-parent-child-join-now-future-in-elasticsearch)

type を引退させる理由として、上記の記事で挙げられているのが、Elasticsearch の type に関する誤解です。

> In an Elasticsearch index, fields that have the same name in different mapping types are backed by the same Lucene field internally

ということで、異なる type であったとしても、内部では同じ Lucene フィールドが使われるので、type 毎に field の型を変えたりすることはできません。

また、

> On top of that, storing different entities that have few or no fields in common in the same index leads to sparse data and interferes with Lucene’s ability to compress documents efficiently.

共通項目の少ないデータを同じインデックスに入れると、Lucene のドキュメント圧縮が効率的に働かないそうです。
なんだか知らない事ばかりで、とても勉強になりました。

では、どうするかというと、一つの index には 一つの type のみ使うようにすればいいです。
これまで _type を使っていた部分は、自分で type を定義すれば同様のことができます。reindex APIを使った例が、上記のページに書いてあります。


そんなわけで、自分のアプリのデータ設計を根本から見直そうと思います。「index の type は一つだけ」の縛りにすると、むしろ設計がシンプルになって、道がパッと開けたような気がしました。ビジネス要件を index の構造に反映させるのではなく、そこは Elasticsearch の様々な検索機能にやらせればいいと思いました。それこそまさに Elasticsearch の得意な分野だと思うので。
PyPIにパッケージを登録する方法(2017/9時点)

# まずはじめに

日本語の記事でPyPIにパッケージを登録する方法が簡単にググっても古い手法が多く、なかなかuploadができなかったので、改めてguideを読んで手順をおこしてみました。

https://packaging.python.org/guides/using-testpypi/

この記事は基本的にパッケージのupload時の流れを書きます。
（setup.pyの書き方等は取り扱いません。）

# テストでパッケージをupload

- 事前にwheel, twineを落としておく
    - `pip install wheel twine`
- https://test.pypi.org/ にアクセス
- 登録して、username, passwordを控える
- 自分の作ったpackageがある(setup.pyがある)ディレクトリのもとで下記を実行
    - `python setup.py sdist`
    - distディレクトリができ、upload用の圧縮ファイルができるはず
- .pypircを作って置く

```py3:.pypirc
[testpypi]
username: <username>
password: <password>
```

- twineを使う
    - `twine upload --repository-url https://test.pypi.org/legacy/ dist/* `
- test.pypi.orgのマイページにアップロードしたライブラリが表示される

# 本番公開する場合

手順はテストのときとほぼ一緒であるがテストの時との手順で違うところをあげておきます。

- 本番ではhttps://pypi.python.org/pypi に公開するので、事前に←のサイトで登録、username, passwordを控えておく
- pypircを下記のように書き換えて置く

```py3:.pypirc
[pypi]
username: <username>
password: <password>
```
- twineを使うタイミングでは、`--repository`　は使わない、下記コマンドに従えばOK
    - `twine upload dist/*`
[備忘録]Unity2D Spriteを反転させる

#いきなり本題
Spriteを反転させるには
・反転させたいSpriteのScaleを負の値にしてあげる
以上

##まとめ
これ前にも調べたよなーと思いながら、忘れてたので次も必要な時に絶対忘れてるだろーなーと思い備忘録として残します。
Solr の managed-schema に REST API で add-field する


公式ドキュメントがこのザマだったので。
![スクリーンショット 2017-09-13 11.12.01.png](https://qiita-image-store.s3.amazonaws.com/0/127723/5d2ea3f3-7c5f-33a9-ef43-9d8fc3bf559b.png "スクリーンショット 2017-09-13 11.12.01.png")

# やること
- post するといいです。具体的には以下の感じ。


```
$ curl -X POST -H 'Content-type:application/json' --data-binary '{
    "add-field": [
        {
            "name": "hoge",
            "type": "string",
            "stored": true,
            "indexed": true,
            "multiValued": true,
        },
        {
            "name": "fuga",
            "type": "string",
            "stored": true,
            "indexed": true
        }
    ]
}' 'http://localhost:8983/solr/core1/schema'
```
Bash on Ubuntu on Windows環境に ansible をインストールしたい


# 概要
- Bash on Ubuntu on Windows（BoUoW）上に Ansible を導入して使うためのメモ

# 目標
- できるだけ新しい ansible (2.x) を導入して使える状態にしたい
- apt で解決したい

# 作業環境
- BoUoW バージョン確認: `lsb_release -a`

```
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 14.04.5 LTS
Release:        14.04
Codename:       trusty
```
- ※ 以下は `sudo su -` で root環境で作業しているメモ。適時 `sudo`

# aptでansibleを取得できるか確認
- `apt search ansible`

```
ソート中... 完了
全文検索... 完了
ansible-fireball/trusty 1.5.4+dfsg-1 all
  Ansible fireball transport support

ansible-node-fireball/trusty 1.5.4+dfsg-1 all
  Ansible fireball transport support for nodes

python-reclass/trusty 1.2.2-1 all
  hierarchical inventory backend for configuration management systems

reclass/trusty 1.2.2-1 all
  hierarchical inventory backend for configuration management systems
```
- 1.5.4 と 1.2.2 を使えるっぽいが 今回は2.x を使いたい… :anguished:

# PPAリポジトリを追加
- `apt-add-repository ppa:ansible/ansible`
- `apt update`

# 再度取得できるパッケージを確認
- `apt search ansible`

```
ソート中... 完了
全文検索... 完了
ansible/trusty,now 2.3.2.0-1ppa~trusty all
  A radically simple IT automation platform

ansible-doc/trusty 1.5.4+dfsg-1 all
  Ansible documentation and examples

ansible-fireball/trusty 1.5.4+dfsg-1 all
  Ansible fireball transport support

ansible-node-fireball/trusty 1.5.4+dfsg-1 all
  Ansible fireball transport support for nodes

python-reclass/trusty 1.2.2-1 all
  hierarchical inventory backend for configuration management systems

reclass/trusty 1.2.2-1 all
  hierarchical inventory backend for configuration management systems
```
- 2.3.2 が増えた :smile:

# インストール
- `apt install ansible `

# バージョン確認
- `ansible --version`

```
ansible 2.3.2.0
  config file = /etc/ansible/ansible.cfg
  configured module search path = Default w/o overrides
  python version = 2.7.6 (default, Oct 26 2016, 20:30:19) [GCC 4.8.4]
```

# 動作テスト
- ローカルホストにping を実行してみる
- `test.yml` playbookを作成する

```
- hosts: localhost
  connection: local
  tasks:
    - ping:
```
- ` ansible-playbook ./test.yml`

```
 [WARNING]: provided hosts list is empty, only localhost is available

PLAY [localhost] ***********************************************************

TASK [Gathering Facts] *****************************************************
ok: [localhost]

TASK [ping] ****************************************************************
ok: [localhost]

PLAY RECAP *****************************************************************
localhost                  : ok=2    changed=0    unreachable=0    failed=0
```
- 正常に実行できた！ :laughing:

# 参考情報
- http://qiita.com/yunano/items/f47c5f873c10f63ab5ab
- http://qiita.com/koukun/items/ae673f2bae8f1525b6af
(初心者向け)Swift3.0で初アプリ - 外部ライブラリを使ってみる - CocoaPods, Carthage

Swift3.0を使って簡単なiPhoneアプリを作ってみます
外部ライブラリを使うため、CocoaPodsとCarthageを使ってみます

#1. CocoaPodsを使ってみる
- [【Swift】CocoaPods導入手順](http://qiita.com/ShinokiRyosei/items/3090290cb72434852460)などを参照してCocoaPodsを使えるようにします
- 練習のため、SVProgressHUD　を導入してみます
- Xcodeの起動は、いつもの`xcodeproj`ファイルではなく、`xcworkspace`ファイルをダブルクリックする点に注意します

<img width="380" alt="スクリーンショット 2017-09-19 11.11.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/0c1bcba5-0176-cb8c-7d86-95f87f30d7b7.png">

- 練習のため、AlamoFireを導入してみます。。。うまくいかない場合、下記のCartheageでのAlamoFireのインストールを試みます

#2. Carthagoを使ってみる
- [Carthageを使ってビルド時間を短縮しよう](http://qiita.com/yutat93/items/97fe9bc2bf2e97da7ec1)などを参照してCarthageを使えるようにします
- 練習のため、AlamoFireを導入してみます
【備忘録】Python計算高速化（するかもしれない）モジュール"Numba"関連まとめ

#Pythonプログラムを高速に回したい！

**「10倍速く計算できれば，10倍多くの失敗ができる」**
そう考えたら速い計算をできたらいいなと誰しもが考えるはず．

表題のNumbaですが，JIT(just-in-time)コンパイラを使ってPython上の計算を高速化できるというモジュールです．
このNumbaに関する過去の優れた記事たちを備忘録としてまとめたものがこの記事となります．
以下に簡単にNumbaについて記載しておきます．

Pythonにおいてfor文は遅延の原因であり，内包表記などで速くできます．
しかし，**どうしてもfor文を（特に複数回）使う**ような状況はあるでしょう．
Numbaは `import numba` および `@numba.jit` のたった2文でfor文を高速化できる**かもしれない**ツールです．

Numbaでサポートされている関数のリストはこちらにあります．
[Numpy Support in numba](http://numba.pydata.org/numba-doc/0.14/numpy_support.html#supported-ufuncs)

詳しく見ると `add` `subtract` などの四則演算や `exp` `log10` `sqrt`などの簡単な関数，
`sin` `cos` `tan` などの三角関数が対応されています．

しかし `fft` やら多くの計算は対応できないのが現状です（というか原理的に無理？）．
（※速くならないだけで計算ができないわけではない）
本来なら速く計算可能な内包表記や，空のリストがnumbaでは計算できません．
その辺は定義した関数を細かくバラしてnumbaを利用できそうなところに使うことになりそうです．

ということで，
・簡単な計算を何度も行う
・複数のfor文を回す
といったときには高速化されるかも？というのがNumbaです．

もともと高速に計算可能なNumpyを活かすために，for文と上手に付き合う必要があると言えます．



**以下にNumbaに関する内容を取り扱った記事をまとめています．**



100万倍速いプログラムを書く
http://qiita.com/Akai_Banana/items/48a35d2a40d1804d3b32

Python: Numbaによる高速化
http://dr-kayai.hatenablog.com/entry/2014/10/09/175456

NumPyでfor文を使うと遅いと思ったがそんな事はなかったぜ
http://qiita.com/termoshtt/items/d6cf43e777946b3c1d93

PythonコードをNumbaで高速化したときのメモ
http://qiita.com/toyolab/items/b5d95bd38b3c7c66b510

JITコンパイラライブラリNumbaを使ってPythonコードを劇的に高速化する方法
http://myenigma.hatenablog.com/entry/2017/03/02/155433

pythonを速くしたいときにやったこと -Numba編-
http://qiita.com/open_cans/items/b6cde6c28f8eacba0ca1

初心者のPythonが速くなる〇〇の方法【numpyとか】
http://qiita.com/yukkyo1222/items/df4487bbc2767c630247

Python3.5 でNumbaをインストールして使ってみた
http://qiita.com/fujibo/items/9a776e671170137d7ade

Pythonのコードを高速化(はじめてのNumba)
http://fjkei.hatenadiary.jp/entry/2015/06/21/121251o

Pythonによる反応拡散シミュレーションをJITで高速化
https://qiita.com/kaityo256/items/3c07252ab63591256835

---
CGPointで四則演算

CGPointで四則演算させたい

C++なら演算子のオーバーロードあるのに......Swiftにもあるやん
ということを昨日知った情弱なのでextensionに付け足しました
誰かやってそうだけどバシっとしたのヒットしなかった

#やれること
こういうことができるようになります
値とCGPointの計算ルールはまぁextensionに書いてる通りです

```swift

//準備
let p1 = CGPoint(x:2, y:3)
let p2 = CGPoint(x:5, y:7)
let v1:CGFloat = 11
let v2:CGFloat = 13


// CGPoint同士で四則演算
p1 + p2 //{x:7, y:10}
p1 - p2 //{x:-3, y:-4}
p1 * p2 //{x:10, y:21}
p1 / p2 //{x:0.4, y:0.429}

// 値とCGPointで四則演算
p1 + v1 //{x:13, y:14}
p2 - v2 //{x:-8, y:-6}
p1 * v1 //{x:22, y:33}
p2 / v2 //{x:0.385, y:0.538}

//CGPointと値で四則演算
v1 + p1 //{x:13, y:14}
v2 - p2 //{x:8, y:6}
v1 * p1 //{x:22, y:33}
v2 / p2 //{x:2.6, y:1.857}
```

#extension

```swift
extension CGPoint{
  static func + (left: CGPoint, right: CGPoint) -> CGPoint {
    let x = left.x + right.x
    let y = left.y + right.y
    return CGPoint(x:x, y:y)
  }
  static func + (left: CGPoint, right: CGFloat) -> CGPoint {
    let x = left.x + right
    let y = left.y + right
    return CGPoint(x:x, y:y)
  }
  static func + (left: CGFloat, right: CGPoint) -> CGPoint {
    let x = left + right.x
    let y = left + right.y
    return CGPoint(x:x, y:y)
  }
  static func - (left: CGPoint, right: CGPoint) -> CGPoint {
    let x = left.x - right.x
    let y = left.y - right.y
    return CGPoint(x:x, y:y)
  }
  static func - (left: CGPoint, right: CGFloat) -> CGPoint {
    let x = left.x - right
    let y = left.y - right
    return CGPoint(x:x, y:y)
  }
  static func - (left: CGFloat, right: CGPoint) -> CGPoint {
    let x = left - right.x
    let y = left - right.y
    return CGPoint(x:x, y:y)
  }
  static func * (left: CGPoint, right: CGPoint) -> CGPoint {
    let x = left.x * right.x
    let y = left.y * right.y
    return CGPoint(x:x, y:y)
  }
  static func * (left: CGPoint, right: CGFloat) -> CGPoint {
    let x = left.x * right
    let y = left.y * right
    return CGPoint(x:x, y:y)
  }
  static func * (left: CGFloat, right: CGPoint) -> CGPoint {
    let x = left * right.x
    let y = left * right.y
    return CGPoint(x:x, y:y)
  }
  static func / (left: CGPoint, right: CGPoint) -> CGPoint {
    let x = left.x / right.x
    let y = left.y / right.y
    return CGPoint(x:x, y:y)
  }
  static func / (left: CGPoint, right: CGFloat) -> CGPoint {
    let x = left.x / right
    let y = left.y / right
    return CGPoint(x:x, y:y)
  }
  static func / (left: CGFloat, right: CGPoint) -> CGPoint {
    let x = left / right.x
    let y = left / right.y
    return CGPoint(x:x, y:y)
  }
}
```
【Facebook】Graph API アップグレードのお知らせ（2017年10月7日まで）

**「2017年10月9日で Graph API v2.4 の期限が切れるので、v2.5 以降にアップグレードしてください」**という旨のメールが 9月13日頃に Facebookページ管理人宛に届いています。
 
- v2.5 も 2018年4月12日で使用期限が切れるため、最新の **v2.10** に書き換えることをおすすめします。
- Facebookページの場合は、「APIアップグレードツール」で確認できます。（https://developers.facebook.com/tools/api_versioning/）

　
「Facebookページ」以外にも、通常のサイトに設置している「いいねボタン」、「PagePlugin（元LikeBox）」などでも使用している API のため、多くのページで使われている可能性があります。
念のためバージョンをご確認ください。

（使用期限を過ぎてしまうと動作の保証ができなくなります。いつ対応されなくなるかどうか分かりませんので、ご注意ください！）
（今までは期限切れ後すぐに使えなくなることはあまりありませんでしたが、今回もそうとは限らないので、念のためにぜひ！）
iPhone X気を付ける事まとめ


自分のための備忘録も含めて。

## Swiftが4になり、Xcodeもバージョンアップ

Xに限ったことではないけれども。
完全に新しいモデルが出た以上、即座に最新のXcodeでのビルドが必須になりそう。


## 画面サイズのバリエーションが増える

iPhone Xは2,800x1,242という、~plus以上の解像度を誇る新たなデバイス。
さらに増やしやがった。

幸か不幸か、iOS11で3.5inchは死滅したので、
実質的には総数に変動はない。


## アスペクト比が違う

iPhone5～8まで、おおよそ16:9の解像度となっていた。
ところが、iPhone X ほぼ2:1。

動画などを再生する場合には恐らく中央に寄ると予想。

## なんかステータスバー・・・？が違う

画面上部にステータスバーがあるが、
iPhone X はステータスバーというか、スピーカーに挟まれた部分に
ステータスバーに準ずる部分が左右に分かれて配置されている。

これってどうなるねん・・・

## Touch ID 非搭載

代わりにFace IDなるものが搭載された。
セキュリティ上大丈夫なのかはちょっと不安だけど、
TouchID以上のセキュリティを担保してくれるならまあOK・・・か？
それよりも、


## まとめると・・・

まとめると、以下のようになる。


|画面サイズ|3.5inch|4 inch | 4.7inch | 5.5inch | 5.8inch|
|:-:|:-:|:-:|:-:|:-:|:-:|
| 端末|4/4s| 5s/SE|6/7/8(s)|6/7/8(s)P|X|
|ピクセル|960x640|1136x640|1334x750|1920x1080|2436x1125|
|アスペクト比|3:2|16:9|16:9|16:9|2:1|
|Touch ID|×|○|○|○|×|
|Face ID|×|×|×|×|○|
|iOS 11|×|△|○|○|○|

※4inchでも、iPhone5/5cはiOS11から見捨てられている。


## さいごに

がんばってiPhone X のシミュレーターを使いこなしましょう。
gitlabの機能ざっくり下調べ

gitを利用しているが、gitlabを使おうかと思い調べたり、使ってみたりのメモ。

##バージョンの違い

### Community Edition(CE)
* Free!
* marge requestやIssue boardなどプロジェクト管理ツール＋VCSとしての最低限の機能

### Enterprise Edition Starter (EES)
* 年間$39/1アカウント
* CE＋αで色々追加されている。真っ当に使うなら欲しい機能から、非常に手厚いLDAP関連の機能や多数のプロジェクトを動かす場合に必要な機能迄が揃う。ただ、本当に重要そうなのは下記２つくらいかなと。
    * Issue関連付け
        * タスクの親子関係とかが作れると便利
    * 高度な検索機能
        * 正規表現やElasticSearchを利用したソース検索ができる
        
### Enterprise Edition Premium (EEP)
* 年間$199/1アカウント
* ESS＋αで更に色々輪をかけて追加されているけど、一言で言えばめっちゃ可用性を高めてめっちゃ迅速にサポートしますよ！って感じ。

## 所見
* 現状、プロジェクト管理ツールでJIRAやbacklog等を使っていて、それも含めてgitlabに統合しようとしているなら、ESS以上を購入するかプロジェクト管理ツールとbacklogを連携＆併用した方が良さそう。プロジェクト管理ツールとしてはどうしても一段見劣りする。Issueの登録はJIRAで行うなどの連携＆併用はgitlabの設定一つでできる部分も多い。統合はプロジェクト参画メンバーが開発チーム主体なんであればなんとかなるかも。
* CI関連の機能は強い。jenkinsやslack連携も簡単にできるし、gitlab使うのならばCI/CD関係をきっちり作ろう。
* marge requestは大規模プロジェクトじゃ使えない。何十ファイルの更新差分をマージリクエストで対処するのは無理。レビューフローでガイドラインを決める必要がありそう。