OmniAICreator/Qiita-1.07M huggingface dataset:
docker-composeでjson-serverを使う

json-server
https://github.com/typicode/json-server

brewでインストールして使ってみたら便利だったけど、環境を汚したくないのでdockerで動かしたい

https://github.com/clue/docker-json-server
公式にリンクあるこいつをcloneして使ってみたけど繋がらない。なので自分で設定

構成

```bash
.
├── docker-compose.yml
└── json-server
    ├── Dockerfile
    └── db.json
```

Dockerfile

```dockerfile
FROM node:10.15.0

RUN npm install -g json-server

WORKDIR /data

EXPOSE 3000
```

docker-compose.yml

```docker
version: '3'
services:
  json-server:
    build: ./json-server
    container_name: test-json-server
    ports:
      - '3000:3000'
    volumes: 
      - ./json-server/db.json:/data/db.json
    command: json-server --watch db.json
```

繋がらない...

https://github.com/typicode/json-server/issues/811
hostは0.0.0.0にしないとダメだよー

docker-compose.yml

```docker
version: '3'
services:
  json-server:
    build: ./json-server
    container_name: test-json-server
    ports:
      - '3000:3000'
    volumes: 
      - ./json-server/db.json:/data/db.json
    command: json-server --watch db.json --host 0.0.0.0
```

繋がった

http://localhost:3000/
![スクリーンショット 2019-01-21 17.18.13.png](https://qiita-image-store.s3.amazonaws.com/0/124609/f71e6331-d39d-715b-a9a2-66231a68fcf1.png)
JSでZipファイルをダウンロードさせる方法

## 背景

axiosでS3からzipをダウンロードして、それをダウンロードさせる場面があったので、良くある感じでコードを書いてみた。

前提として　

- S3にはバックエンドから発行されるPresigned URLを使う
- バックエンドを通さず、そのURLに直接アクセスする

### 最初に書いたコード

```js
await { data } = axios.get('....')
const blob = new Blob([data], { type: 'application/zip' })

const uri = URL.createObjectURL(blob)
const link = document.createElement('a')
link.download = 'sample.zip'
link.href = uri
link.click()
```

### その結果…

ファイルのダウンロードは成功するけれど、解凍するとZipの中身が壊れている…

怪しいと思い、拡張子を `.txt` にして開いてみると、バイナリのようなテキストが並んでるので、Zipとして正しく解釈できていない模様。

フロントエンドだけで完結する対策として、この2つを思いついたので、どっちが良いか試してみる

1. S3 Presigned URL　に直接アクセスさせる
2. ファイルの変換をうまくやる

## 動作確認

### 1. S3 Presigned URLに直接アクセスさせる

```js
const link = document.createElement('a')
link.download = 'sample.zip'
link.href = '....'
link.click()
```

とりあえずダウンロードはできる。けれど、ファイル名が `download` で指定したものとは違う…

ググった結果ここにたどり着く。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download

> This attribute only works for same-origin URLs.

という訳で、直接S3 Presigned URLにアクセスするとファイル名を制御できない。

セキュリティ考えるとまあそうかなという仕様ですね。

### 2. ファイルの変換をうまくやる

https://developer.mozilla.org/ja/docs/XMLHttpRequest/Sending_and_Receiving_Binary_Data

ArrayBufferを指定して、明示的にバイナリデータを受信するように設定、

```js
const { data } = await axios.get('....', {
  responseType: 'arraybuffer',
  headers: { Accept: 'application/zip' },
})
const blob = new Blob([data], { type: 'application/zip' })
```

または、直接Blobを指定して構築してもらう。

```js
const { blob: data } = await axios.get('....', {
  responseType: 'blob',
  headers: { Accept: 'application/zip' },
})
```

これであとは、ファイルへのリンクをクリックさせるだけ！

```js
const uri = URL.createObjectURL(blob)
const link = document.createElement('a')
link.download = 'sample.zip'
link.href = uri
link.click()
```

これで無事、Zipファイルがダウンロードできました。

## Todo
論文読込み：「Single-Shot Refinement Neural Network for Object Detection」のまとめ

#はじめに
  YOLOv3に押されていたと思ったSSD系統の物体検出ですが、AAAI'19にM2Detが採用されました！
  M2Detはまだ実装が公開されてませんが、SOTA(最高パフォーマンス)のようです。
  ここでM2Detをスムーズに読むために、SSD系統のRefineDetを読みました。
  ここで簡単にまとめを共有します。
#概要
  SSD系統の手法の一つ。SSDの速度と正確性を向上させたもの。
  一般的に物体検出は1stage系統（SSD）が速度に優れ、2stage系統（R-CNN）が精度が高い。
  両アプローチのメリットを引き継ぎ、デメリットを少なくしたため、
  今回のRefineDetは1stage系統の速度を維持し、2stage系統より制度が高い。
#ネットワーク構成
![RefineDet_model.png](https://qiita-image-store.s3.amazonaws.com/0/138063/f4cebbf6-521c-6f79-31dd-9dc719b05a9b.png)

ARM(上段)で物体の有無だけを予測して、ODM（下段）ではどのクラスに属するか詳細に予測する。
ARMで空と判断したバウンディングボックスは閾値で弾き、ODMには物体があると判定したものだけを送る。
これでODMは物体があると判断された領域のみの分類に専念させるので動作が早くなる。

###Anchor Rifinement Module(ARM) 【上段】
ここで1stage系統と同じことをざっくりとおこなう。
anchor boxの位置とサイズに対しての最適な初期化と、物体があるかないかの2クラス分類を行い、
分類タスクを行う領域を減らすためにnegative anchorを減らす。

###Transfer Connecting Block(TCB)【中段】
![20180311143355.png](https://qiita-image-store.s3.amazonaws.com/0/138063/176507b1-1837-9709-1fc9-ae59c561b941.png)
ARM【上段】で抽出した情報をODM【下段】に受け渡すための層
深い層の特徴を浅い層の特徴に組み込む。これによって小さい物体に対しての認識精度が良くなる。
←の部分で右から特徴量を展開して足しています。


###Object Detection Module(ODM)【下段】
ARMからの出力Refinement　Anchorを入力として利用する。
anchor　boxの最終調整と分類タスクを行う。
SSDで用いられるHard Negative Miningもここで使用される。

###損失関数
<img width="312" alt="スクリーンショット 2019-01-21 16.46.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/138063/f7e740b9-07d2-195d-d233-bc77fdf3e3b3.png">
　損失関数はARMとODMそれぞれの損失関数の和を使っている。
i: anchorのindex
li: iの正解ラベル
gi: iの正解サイズと位置情報
Pi: 物体の有無
Xi: 選別されたanchor
ci: 予測結果のクラス
ti: 予測結果のバウンディングボックス
Narm: ARMでの有効なanchorの数
Nodm: ODMでの有効なanchorの数
Lb: 物体が存在するかしないかのcross entropy/log
Lm: 多クラスの信頼度のsoft max loss

#検証
![RefineDet_result.png](https://qiita-image-store.s3.amazonaws.com/0/138063/329a962f-920e-580d-3464-48fe99d21f5f.png)

M2Detの表
<img width="736" alt="スクリーンショット 2019-01-21 17.02.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/138063/cc9e4286-c374-ae5f-392d-716dbb760a21.png">
うーんやっぱり小さい物体の認識は大変そうですね。
M2Detに期待！
【CSS】レスポンシブな全幅の二等辺三角形の作り方▲▼▶◀

## 概要
画像で三角ってナウくない気がしたので、CSSで三角形を作ることにしました。
ぽんこつなので、ぱっと考えつかず例のごとくgoogle先生に教えてもらうことにして、あとは右から左へQiitaに投稿するのみ..

## 手順

### ステップ1
http://apps.eky.hk/css-triangle-generator/ja
↑httpsではないのですが、よいジェネレータさんがいらっしゃったので拝借します。

まずはお好みの向きで三角形をジェネレート。

```style.css
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 10px 100px;
border-color: transparent transparent #007bff transparent;
```
↑ジェネレータさんがこのように**▲上向き二等辺三角形**を生成してくれました。
この時点ではレスポンシブではありません。


### ステップ2

ありがたく拝借したコードに手を加えてレスポンシブ全幅にします。

```style.css
width: 0;
height: 0;
border-style: solid;
border-width: 0 50vw 10px 50vw;
border-color: transparent transparent #007bff transparent;
```
上記のように変更。変わった箇所は`border-width: 0 50vw 10px 50vw;`だけ。お色も任意で変えてくださいね。

**vhとは** 
ビューポートハイトの略です。ビューポートの幅の1/100が1vwになります。
50%だと思いがけない動きになる恐れがあるので、`50vw`を使用します。

詳しくはこちらをご参照ください。
https://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html


簡単2ステップであっという間にレスポンシブ全幅上向き二等辺三角形▲ができあがりました♪

### おまけ
アレンジ例: 

```test.html
<div class="sankaku"></div>
```

```foo.scss
.sankaku{
    padding-top: 110px;
    overflow: hidden; //スクロールバー対策
    position: relative;

    &:before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 110px 0 0 50vw;
        border-color: transparent transparent transparent blue;
        position: absolute;
        top: 0;
        z-index: 1;
    }
    &:after{
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 110px 50vw;
        border-color: transparent transparent blue transparent;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
    }
}

```
`:before`と`:after`を組み合わせて、右向き三角形▶左向き三角形◀の合わせ技も♪
工夫次第でいろんな図形ができそうです。

#### 注意点
`vw`を使って全幅にすると、スクロールバー分のwidthが横幅から漏れてしまいます。親要素に`overflow:hidden`をかけて三角形を含めた`height`を指定するか、`padding`で三角形分プラスしてあげるといいかもしれません。

そのときは
`left: 50%;`
`transform: transrateX(-50%);`
を**三角形**に足してあげてくださいね！

#### あとがき
画像にしてしまえば簡単中の簡単なのだけど、やっぱりこういうのはCSSでやったほうが軽いしキレイですよね。
そして、なるたけCSSで組み上げたい年頃。SVGでポリゴンな絵を作るのも楽しそうです。


*追記*
2019.01.23 注意点、修正しました。
2019.01.23 サンプルコード修正しました。
git pushが出来ない事象を解決する手順

「あなたのブランチは、2つのコミットによって 'origin / feature / hoge / 001'より先です。」

>   On branch feature/hoge/001
    Your branch is ahead of 'origin/feature/hoge/001' by 2 commits.
    (use "git push" to publish your local commits)
    nothing to commit, working tree clean

と表示されて、更に
「注意：taro-hogeは管理者ではありません。 別の人のコミットを押すことはできません。」

>   ### NOTICE: taro-hoge is not administor. you can't push another person's commit.
    ### NOTICE: commit-authors-string:jiro-hoge,saburo-hoge
    ### CHECK_COMMAND: git log ffc00000egg0000gg00gg0g00g00g0g00g0g00g0..12rt34567jkfhvnfh891lkfijjjjjjuhyfkkkl30
    error: failed to push some refs to 'git@github.hoge.jp:hoge/sp-hoge.git'

と表示され、git pushが出来ない事象を解決する手順
※ 上記のgit log はデタラメに記載したものです。

##原因
自分以外の第３者が先にコミットして、コンフリクトを起こした事が原因

##やった事

###その１
```terminal
$ git reset HEAD^
```
コミットをコミット前の状態に戻す。
（^ で一つ前 ^^なら二つ前）

```terminal
    Unstaged changes after reset:
    M	pm/test/hoge/001/Page/tokyo/test3.php

    modified:   ../pm/test/hoge/001/Page/tokyo/test3.php
```
すると add する前の状態に戻ります。

```terminal
$ git reset HEAD [ファイルパス]
```
ファイル名がわかる場合は↑のコマンドで
ただ、第３者がコミットしたもファイルは基本分からない場合がほとんどなので、
自分より先にあるコミットを消すという手順でやる事。

###その2
```terminal
git checkout (対象ファイル先)
```
で変更自体を無しにします。

例
../pm/test/hoge/001/Page/tokyo/test3.php
の場合

```terminal
git checkout ../pm/test/hoge/001/Page/tokyo/test3.php
```
特定のファイルではなく、全て元に戻したい場合

```terminal
git checkout .
```

###その3
```terminal
git status
```
で確認したら、commitが綺麗になくなってるので、
再度pushしてみる

```terminal
git push origin feature/hoge/001

Everything up-to-date
```
↑と表示され、pushするファイル自体が無くなる。
ので改めて、改修するファイルを更新し、再度

add → commit → push

して、終了。
iOSシュミレーターでCould not signal service com.apple.WebKit.Networking: 113と出たらアンチウィルスソフトを確認しよう

## 理由はわからないがXCodeのシュミレーターがこんな感じになってしまう。

エラーログは下記

```
Could not signal service com.apple.WebKit.Networking: 113: Could not find specified service
```


![4](https://user-images.githubusercontent.com/1619084/51459427-eaec4580-1d9b-11e9-83d5-ba71d049157c.png)

原因はセキュリティソフトのAVGAntiVirtus(AVastでもそうだった)が通信をブロックしているためである。

参考: [Avast iOS8 シミュレータでネットワーク通信ができません。](https://forum.avast.com/index.php?topic=189824.0)


設定で下記をWebShildの検知をOFFにしよう

```
# Avastの人は自分でググってください
open /Applications/AVGAntivirus.app
```

### 設定前

<img width="1136" alt="2" src="https://user-images.githubusercontent.com/1619084/51459488-2129c500-1d9c-11e9-95d7-25af1301cc16.png">


### 設定後

<img width="1133" alt="3" src="https://user-images.githubusercontent.com/1619084/51459499-2be45a00-1d9c-11e9-9e83-08a9a6264b9f.png">


これでWebviewの通信が上手くできました。


## 最後に

ハマりましたん。
Tensorflow.js-PoseNetを使って人間テトリス作ってみた

# TensorFlow.js
Googleが開発している、学習データをwebブラウザで扱えるようにしているライブラリです。[こちらのサイト](https://js.tensorflow.org/)では学習データを使ったゲームが公開されておりますが、その中でもパックマンのゲームは、自分の顔や画像などを左右上下のコントローラに割り当ててあらかじめ登録した画像を学習させ、登録した画像をコントローラにして移動を制御する仕組みで、遊び方がなかなか斬新です。リンクのサイトではもう一つ、PoseNetというリアルタイムに人間のボーンを解析するデモがあります。これがなかなか精度が良い感じだったので、デモとして自分の体でテトリスブロックを制御する人間テトリスを作ってみました。といってもジェスチャーがあまりないので、PoseNetのボーンデータの効力を活かし切れていませんが。。。
![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/117549/fe7204ac-1b25-f954-b671-5cc868de3fa3.gif)



## ゲームロジック
テトリスのゲームロジックはすでに色々な方が解説していますが、私は[こちらの方](https://torisky.com/javascript%EF%BC%9A%E3%83%86%E3%83%88%E3%83%AA%E3%82%B9%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/)のアルゴリズムを参考にしました。ただ、ブロックの1区画毎にデザインしたかったため、p5.jsで使えるように変更しています。

## PoseNetの組み込み
PoseNetは1人のみ検出と複数人検出の2つのクラスがあります。ただ、学習データに渡すパラメータは同じのようです。[こちらのサイト](https://developers.gnavi.co.jp/entry/posenet/hasegawa)を参考にさせていただいています。

## 遊び方
| MOVE | ROATATION |
|:-----------|:------------|
| ![move.png](https://qiita-image-store.s3.amazonaws.com/0/117549/3ebf93ca-1bd4-5850-b01e-826510c51273.png)| ![rotate.png](https://qiita-image-store.s3.amazonaws.com/0/117549/23aa6267-afdf-6b24-b69c-f90e2b877f57.png)|
| 自分が左右に移動するとブロックも左右に移動する | ジャンプするたびにブロックが回転する |

## パフォーマンス
Tensorflow.jsはWebGLをベースに開発されているので、パフォーマンスも端末のGPUに依存します。私の環境だとシングルポーズでだいたい **15fps前後**でした。複数人の検出だともう少し速度が落ちると思います。

|||
|:-----------|:------------|
|**PC**|MacBook Pro(Retina, 15-inch, Mid 2015)|
|**プロセッサ**|2.2 GHz Intel Core i7|
|**メモリ**|16 GB|
|**グラフィックス**|Intel Iris Pro 1536 MB|

また、OutputStrideとimageScaleFactorのパラメータにも依存します。ストライドについては勉強不足で理解できていませんが、[こちらのサイト](https://deepage.net/deep_learning/2016/11/07/convolutional_neural_network.html#%E3%82%B9%E3%83%88%E3%83%A9%E3%82%A4%E3%83%89
)に説明がありました。

|||
|:-----------|:------------|
|**output stride**|畳み込みの適用間隔(値が大きいと精度が悪く、スピードは早い）|
|**image scale factor**|画像の縮尺（大きいほど精度が高く、スピードは遅くなる)|

## 最後に
ボーンデータの検出は今までKinectなど赤外線等を使った機器でないと、精度が期待されていませんでしたが、このPoseNetはWebCameraだけでそこそこの精度と速度で動作するのでかなり魅力的です。インタラクティブコンテンツでうまく採用していけそうな予感がします。こちらに今回の[demo](https://ningen-tetris.herokuapp.com/)を置いておきますので、よろしければ参考にしてください。サイトが立ち上がらない場合は、[Github](https://github.com/mitsuyacider/ningen-tetris)からビルドをお願いします。

また、蛇足ですが、[デモ](https://xmas-fireworks.herokuapp.com)をもう一つ作ったので、何かのお役に立てれば嬉しいです。ソースコードは[こちら](https://github.com/mitsuyacider/xmas-fireworks)です。
![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/117549/d9cdd677-6a74-4024-1779-7589483fca50.gif)
Pythonでよく忘れることまとめ

# 目的

Pythonを天文科学計算データの解析として使っている。
色々なことをよく忘れるので、特によく忘れることをメモしておく

## IDLのデータをscipyで読み込む

天文コミュニティではいまだにIDLを使って解析している人が多くIDLでデータを渡されることが多い。

```idlang
a = findgen(100)
b = findgen(200)
save,'test.sav',a,b
```
とIDLでやるとa, bという配列が`test.sav`というファイルに保存される

```python
import scipy.io as sio
d = sio.readsav('test.sav')
```
このようにすると、dという辞書型にデータが格納される。`d['a']`, `d['b']`というデータを見ることができる。

## 軸の表記を消す
tick_paramsを使う。

```python
import matplotlib.pyplot as plt

####
# something
####

plt.tick_params(labelleft=False)
```

tick_paramsの中のオプション
label* (*=left, right, top, bottom)で字を消す
目盛りを消したい時は、labelをつけない。つまり```plt.tick_params(left=False)```などとする。
axesインスタンスでも使い方は同じ。つまり

```python
import matplotlib.pyplot as plt
fig = plt.figure(1)
ax = fig.add_subplot(111)
ax.tick_params(labelleft=False)
```
とすることができる。

## ファイルやディレクトリの有無を調べる

```python
import os
os.path.exists('ファイル名')
```

## 縦横比を揃える

二次元コンターを現実の座標に対して、おこなう場合。縦横比をスケールを反映したものにしたい時がある。そのための対策

#### axesインスタンスを使う場合

```python
import matplotlib.pyplot as plt

fig = plt.figure(1)
ax = fig.add_subplot(111,aspect='equal')
```

とする。axesインスタンスを使わない場合

```
plt.gca().set_aspect('equal')
```

とする。
HTML5 ~ Canvas で簡単なお絵かきアプリを作ってみた

ドットインストールの講座「Canvasでお絵かきアプリ」を受講しました。
リンク☟
https://dotinstall.com/lessons/doodle_canvas
HTMLとjQueryをある程度知っていたらできるので、プログラミング初心者でも簡単にできますよ！
ぜひお試しあれ。

#作るもの
目標物はこんな感じ。
![目標物](https://qiita-image-store.s3.amazonaws.com/0/298112/361fdc59-a5b5-9d6f-2cda-3576df0b4dcd.png "オワオワリ")
タイトルやテキストボックス、ボタンの作成方法はラクチンなので、今回は省きます。

#お絵かきキャンバスを用意する
まずは、お絵かきするキャンバスを用意します。

```html

<canvas width="400" height="200" id="mycanvas"></canvas>
```

HTML5の方で用意されているからめっちゃ便利。

#マウス動作による変化を導入する
次に、それぞれの動作を導入。
変数の導入などはお任せします。

<br>
＊クリック時

```javascript

$('#mycanvas').mousedown(function(e){
                isDrawing=true;
                startX=e.pageX - $(this).offset().left - borderWidth;
                startY=e.pageY - $(this).offset().top - borderWidth;
            })
```

<br>
＊マウスを動かした時

```javascript

.mousemove(function(e){
                // クリックを離したら処理を抜ける
                if(!isDrawing) return;
                x=e.pageX - $(this).offset().left - borderWidth;
                y=e.pageY - $(this).offset().top - borderWidth;
                // コンテクストを通じて描画
                // 線の始まり
                ctx.beginPath();
                // 始点(startX,startY)まで移動
                ctx.moveTo(startX,startY);
                // (x,y)まで線を引く
                ctx.lineTo(x,y);
                ctx.stroke();
                // 次の始点を(x,y)にする
                startX=x;
                startY=y;
            })
```
<br>
＊クリックを離した時

```javascript

.mouseup(function(){
                isDrawing=false;
            })
```

<br>
＊マウスがキャンバスからはみ出した時

```javascript

.mouseleave(function(){
                isDrawing=false;
            });
```

<br>
＊削除機能

```javascript

$('#erase').click(function(){
                if(!confirm('削除していいすか')) return;
                // キャンバスの左上から右下を消す
                ctx.clearRect(0,0,canvas.width,canvas.height);
            });
```
![削除](https://qiita-image-store.s3.amazonaws.com/0/298112/f96cbe73-4d36-9378-ea8c-89fe77d73c58.png
 "削除機能")



#保存機能を追加
ここまでくれば、ほぼ完成！
最後に、保存機能を入れます。

```javascript

$('#save').click(function(){
                var img=$('<img>').attr({
                    width:100,
                    height:50,
                    src:canvas.toDataURL()
                });
                $('#gallery').append(img.addClass('thumbnail'));
                // 画像をダウンロード
                var link=$('<a>').attr({
                    href:canvas.toDataURL().replace('image/png','application/octet-stream'),
                    download:new Date().getTime() + '.png'
                });
                $('#gallery').append(link.append(img.addClass('thumbnail')));
                // 保存したらキャンバスから削除
                ctx.clearRect(0,0,canvas.width,canvas.height);
```
<br>
これで目標物完成です。
1時間位でササっとできるのでぜひ。
退職した人がオーナーとなった状態のフォルダやファイルのフルアクセス権限を取り戻す。

#Administrator権限でもアクセス権限を修正できないフォルダやファイルがある。

これ。
ファイルのプロパティで、こんな画面になる。

![Image01.png](https://qiita-image-store.s3.amazonaws.com/0/284238/32ed162d-2e2f-6148-9eb5-81643ea93ee6.png)


ファイルサーバーでたまに起こるのですが、**オーナーがコピペした人になってしまう**ことがあります。
そうなると、Administrator権限でもアクセス権限を修正できなくなります。

今回は、オーナーとなった人は既に退職済で、修正依頼を出すこともできない。

↑画像の、詳細設定ボタンからオーナーを強制的に設定することはできるんですが、配下のフォルダやファイルに反映されない。今回200ファイル以上あるので却下。


### 困った点は以下

- オーナー権限を持っているアカウントは削除済。

- Administrator権限でも、削除できない、実行できない。

- icaclsコマンドでアクセス権限を付与しようとしても、変更権限がないのでエラーが発生する。

- ファイルサーバーにAdministratror権限で直そうとすれば直せるが、**１ファイル１フォルダごとに直さなければならない**。


#対応策

- コマンド　takeown.exe　を利用すると、オーナー権限を強制的に奪う事ができる。
- takeown.exeでオーナー権限を奪った後ならば、icaclsで権限の付与ができる。

```powershell

$targetFolder = "対象のフォルダパス";

# Get-ChildItem コマンドで、配下のフォルダを取得できる。-Recurseプロパティーで配下も取得
$itemList =  Get-ChildItem $targetFolder -Recurse

foreach($item in $itemList)
{
	takeown.exe /F $item.Fullname 
	icacls $item.Fullname /grant:r administrators:F
} 

```

##注意点
Get-ChildItemコマンドを実行した時点で、全ての配下のフォルダを確認しようとする。
アクセス権限がないフォルダに対しては、フォルダ名称だけ取得できる。
foreach以降でアクセス権限を設定するので、さらに配下のフォルダのアクセス権限を設定するには、***このコマンドを何度も実行する必要がある***。

時間があったら直す予定。
今回は業務が回ったのでここでクローズ。
とりあえずC3.jsを使ってみたい(Windows編)

[C3.js](https://c3js.org/)は、JavaScriptで様々な種類のグラフを描画できるライブラリです。

とりあえず使ってみたいと思ったけど、少し分かりにくかったので、メモを作成しました。

C3.jsのリソースを、[ここからダウンロード](https://github.com/c3js/c3/releases/latest)します。
zip形式とtar.gz形式があるので、お好きな方を。Windowsだと標準で解凍できるzip形式の方が良いかな？

そして、`C3はD3に依存してるんだよ` という記述があるので、D3の方もダウンロードします。

[ここ](https://d3js.org/)に `d3.zip` へのリンクがあるので、クリックするとダウンロードできます。

`C3` と `D3` 、いずれも解凍して、D3の方を解凍してできたファイルのうち、 `d3.min.js` をC3を解凍してできたフォルダにコピーします。

C3を解凍したフォルダの中身が下記みたいな感じになっていればOKかと。

|![image.png](https://qiita-image-store.s3.amazonaws.com/0/90217/ca6f351b-ac22-7e35-2a24-50d53cbc1e39.png)|
|:-:|

そして、おもむろに `c3.html` というファイルを作ります。内容はとりあえず下記で。

```html
<!DOCTYPE html>
<html>
    <head>
        <!-- Load c3.css -->
        <link href="./c3.css" rel="stylesheet">

        <!-- Load d3.js and c3.js -->
        <script src="./d3.min.js" charset="utf-8"></script>
        <script src="./c3.min.js"></script>
        <title>c3 graph</title>
    </head>
    <body>
        <div id="chart"></div>
        <script>
            var chart = c3.generate({
                bindto: '#chart',
                data: {
                  columns: [
                    ['data1', 30, 200, 100, 400, 150, 250],
                    ['data2', 50, 20, 10, 40, 15, 25]
                  ]
                }
            });
        </script>
    </body>
</html>
```

`c3.html` をブラウザで開くと下記のようなグラフが表示されると思います。
**ヴィクトリー！** （何も勝ってない）

|![image.png](https://qiita-image-store.s3.amazonaws.com/0/90217/56137689-dce2-7055-d282-a9f9e6af0c48.png)|
|:-:|
S3へのファイルアップロード、ダウンロードでたまにエラーになる・・・

昨日まで使えていたファイルアップロード、ダウンロードの機能が急にたまに動かなくなってしまった！

開発環境では問題ないのに本番環境だけ発生する
しかもうまくいったりいかなかったりと完全にランダム・・・
まじでこーゆーのやめてほしい
大雑把にはこんなエラーが発生

```
Excon::Error::Forbidden: Expected(200) <=> Actual(403 Forbidden)
```

結果的には本番サーバーの１つでchronyd（時刻をタイムサーバで合わせるサービス）が死んでいました

```
[root@ip-10-0-1-138 ~]# service chronyd status
chronyd dead but pid file exists
[root@ip-10-0-1-138 ~]# service chronyd stop
[root@ip-10-0-1-138 ~]# service chronyd start
```

Aサーバーで時刻がずれていたためAWSが「お前許さん！」と封鎖していたみたいです
Bサーバー経由でアクセスした時には問題なく動いていたために、
ランダムでうまくいったりいかなかったりしたんだね

ランダムの場合は、サーバーの１つで何か問題が起きていると疑うようにしよう
また１つ賢くなってしまった
EgretWingの UIエディタが大きくバージョンアップ

2018/12/20に配信されたニュースの記事です
https://mp.weixin.qq.com/s/j7FgqNDL8ifn2KKwUUdFiA

# Egret Wingが刷新されたベータ版を公開＆新しいツールをリリース

Egret Wingは、一新されたベータ版をリリースしました。新しいバージョンでは、Egret UI Editorと、Egret Coderという2つの新しいツールを提供します。VSCodeのためにスタンドアローンIDEは引き続き残りますが、新しいバージョンのEgret UI EditorとEgret CoderはオリジナルのEgret Wingをリプレースします。

今回のベータ版では下記のソフトウェアが含まれています

1. Launcher
2. UI Editor: UIのビジュアル編集
3. Coder: EUIプロジェクトの作成、開発(Exmlコードの自動補完や校正)、デバッグ、クリーニングなど


# 触ってみよう

## Egret Launcherから最新版を確認

5.2.13が最新版
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/a4b4b31a-3628-75af-ea24-08252abd5017.png)

5.2.13の内容を確認するとニュースより一か月前のバージョンなのでこれじゃない
![5-2-13.png](https://qiita-image-store.s3.amazonaws.com/0/302078/65421f61-bbce-d37b-7048-c0d5062dd889.png)

GitHubみてもエンジンは公開されていますが開発環境はでていませんでした
https://github.com/egret-labs

# 結論 (2019/1/21時点)
現時点での公開情報では触れなそうですので、公式アカウントに問い合わせ中です。

# 公式コミュニティからのアドバイス

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/aadc0428-ee44-cf17-d54d-dc40cc96aeeb.png)

> フォーラムにダウンロードアドレスがあります
> https://bbs.egret.com/forum.php?mod=viewthread&tid=53039&highlight=wing

## フォーラムのダウンロードページを見てインストールする

[Egret Wing New Form Open Internal Test](https://bbs.egret.com/forum.php?mod=viewthread&tid=53039&highlight=wing)

このフォーラムページ下部に以下のようなダウンロードリンクがあります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/0b9e14dd-452e-d0de-bfa3-c8adaa0fb8ad.png)

[Windows版ダウンロードアドレス](http://tool.egret-labs.org/EgretLauncher/EgretLauncher-insider-1.0.65.exe)

ダウンロードしたexeをそのまま起動してインストール

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/749605ee-85dc-4d57-6472-26a80e4710f2.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/56731417-3123-2e94-7f66-6390f076ce10.png)

# 起動
このようにToolsタブからEgret Wingが消えて、Egret UI Editorと Egret Coderに分割されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/77ef6252-16b0-f144-3ec3-1becf3a7d427.png)

さらに新しいバージョンがあるらしいのでUpdateしてみる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/220dc6b3-86a4-ddea-e0dd-0faa1c041fed.png)

特に各ツールのバージョンは変わってないですね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/3d80bb47-afce-2bb0-9b89-3a7d99e0bc6a.png)

次は「Egret UI Editor」は「Download」ボタンを押してダウンロードして次に「Install」ボタンを教えてインストールします。

「Egret Coder」は「Download」ボタンを押してダウンロードして次に「Activate」ボタンを教えてインストールします。

# 結論
いままでのEgret WingからUIエディターを取り除いたバージョンが実質VS Codeな「Egret Coder」。
UIエディターだけ独立したソフトウェアにしたものが「Egret UI Editor」です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/d8caa301-dc75-819b-4b02-2aa199ec015a.png)

Egret Coder(旧 Wing)からはこのようにUI編集機能は取り除かれXMLをテキストファイルとして修正することができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/5a0f7712-0aed-15a6-6c66-24e063268d75.png)
【AWS】T3インスタンスのUnlimitedな罠【EC2】

# 【AWS】T3インスタンスのUnlimitedな罠【EC2】

どうも。ジョーです。

2018/08/21にT3インスタンスが発表され数ヶ月が経ちましたね。
[Amazon EC2 T3 インスタンスをリリース](https://aws.amazon.com/jp/about-aws/whats-new/2018/08/introducing-amazon-ec2-t3-instances/)

弊社で「安い上に性能もT2より良いじゃん！！使ってみようぜ！！」と声が上がっていたので、某案件にて利用してみることにしました。

前回あたりに書いた[記事](https://qiita.com/joe_hirata/items/a6094e6666165fde6645)のように、負荷分散(AutoScaling)可能な構成で組みました。

「T3インスタンス起動したー！！楽勝やん！T3万歳！！」

がしかし。。。

## 地獄の始まり
びっくりしました。
Elastic Beanstalk(以下EB)でEC2が立ち上がるじゃないですかぁ。
**デフォルトでCPUクレジットの「Unlimited」オプションが「有効」**になってるんですよ。





さらにはElastic beanstalkの設定項目にはCPUクレジットの変更項目が存在しない。。。まさかのデフォルト固定値で構築時にも選択肢に無い。。??
EBの設定で後から簡単に変更できるやろと油断してました。

さらにさらに！
起動済みのインスタンスのUnlimited設定をOFFっても、台数の追加などで次に生まれてくるインスタンスはONになっているので設定が統一されない気持ち悪い感じに。

## 解決策！！

EBの設定から「t2.micro」インスタンスをこっそり選択し、反映。
CPU CreditsがUnlimitedではないt2.microインスタンスが立ち上がりました。


## 具体的な解決策？

実際にT3インスタンスで解決(実践)したわけではないですが、それらしきものを発見したので共有。調査に15分くらい費やしてしまった気がする。
[Is it possible to use T2 Unlimited instances in Elastic Beanstalk?](https://stackoverflow.com/questions/49691069/is-it-possible-to-use-t2-unlimited-instances-in-elastic-beanstalk)

ほぅ。「[ebextensions](https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/ebextensions.html)」配下にスクリプトを設置して解決してるようです。

先ほどの解決策のページを読むと、unlimitedを有効にする方法っぽいのですが、恐らくOFFにすることも可能でしょう。

```bash
## ここをstandardとかにすれば良いのではという微かな希望
$Credit.CpuCredits = "unlimited"
```




ちょうど今利用している環境でもebextensionsを利用していたので、ちょうど良いのでは。
しかしパッと見た所、一筋縄ではいかない感じ。できそうだけど検証やらで手間かかる。

なので今回はT3の利用を一旦保留し、T2インスタンスを利用することにしました。

ぐぬぬ。早くT3インスタンスをまともに使いたいでござる。
これからT3インスタンスをご利用の方、もしくは同じ問題にはまっている方の参考になればと思います。
また、「こんな方法でできたよ！」と言うのがあればコメントで教えていただけますとありがたいです(・ω・`)
Vue.jsでコンポーネント親子間の値の受け渡し

# 親→子（データ）
## 親
- 子のコンポーネントを読み込みテンプレートで配置
- message="渡したいデータを代入"

```parent.vue
<template>
    <div>
        <child message="Hello Vue!!"></child>
    </div>
</template>
<script>
import Child from './child.vue';
export default {
    components: {
        Child
    }
}
</script>
```
## 子
- propsに「message」を設定


```child.vue
<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>
<script>
export default {
    props: ['message']
}
</script>
```
# 親→子（変数）

- dataに変数を設定
- :message=messageで変数を渡す

```parent.vue
<template>
    <div>
        <child :message="message"></child>
    </div>
</template>
<script>
import Child from './child.vue';
export default {
    components: {
        Child
    },
    data() {
        return {
            message: 'Hello Vue!!'
        }
    }
}
</script>
```

# 子→親（変数）
- this.$parentでアクセス

```child.vue
<script>
export default {
    created: function () {
        this.$parent.message = 'child!!!';
    }
}
</script>
```

# 子→親（メソッド）
- v-on:panretMessage="messageLog"

```parent.vue
<template>
    <div>
        <child v-on:panretMessage="messageLog"></child>
    </div>
</template>
<script>
import Child from './child.vue';
export default {
    components: {
        Child
    },
    methods: {
        messageLog() {
            console.log("parent");
        }
    }
}
</script>
```
- $emit('panretMessage')

```child.vue
<template>
    <div>
        <button @click="$emit('panretMessage')">message</button>
    </div>
</template>
```
# メソッドに引数を渡す

```parent.vue
export default {
    components: {
        Child
    },
    methods: {
        messageLog(message) {
            console.log(message);
        
    }
}
```

- $emit('panretMessage', '親に送るメッセージ')

```child.vue
<template>
    <div>
        <button @click="$emit('panretMessage', '親に送るメッセージ')">message</button>
    </div>
</template>
```
Herokuで”Web process failed to bind to $PORT”が出力されるとき

####前提
Node.js, Expressを利用している場合です。


####現象
```:gitbash
git push heroku master
heroku open
```
このあと画面を開いてもApplication Errorで表示されない。

```:gitbash
heroku logs
```
ログを表示するとこのようなログメッセージが出てくる場合。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/336049/f678782c-fb19-8a62-8c1c-4235402d2ad7.png)

```:heroku_log
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
```
####原因
このログの場合はアプリケーションで設定しているポートがherokuが設定するポートと違うためエラーがでている場合があります。
ポート番号を修正してあげれば解決します。

####対応
[Herokuのサンプルコード](https://github.com/heroku/node-js-getting-started/blob/master/index.js)からコードをコピー

```:index.js
const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000

express()
  .use(express.static(path.join(__dirname, 'public')))
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'ejs')
  .get('/', (req, res) => res.render('pages/index'))
  .listen(PORT, () => console.log(`Listening on ${ PORT }`))
```

重要なのはPORTの設定が「process.env.PORT || 5000」になっていることです。
Docker 日本語環境構築まとめ 2


# アジェンダ 

[Docker 日本語環境構築まとめ 1](https://qiita.com/kkbt/items/9b19edf9d44b06718e95) ではDocker環境の構築をおこなった

今回はコンテナの作成を行う

1 Dockerfileを書く
2 Dockerfileからimageをbuild
3 imageからコンテナを作成




# コンテナ作成の前に Dockerfileを書く

- CentOSのver7を指定してinstall
- 日本語環境
- タイムゾーンを設定
- マニュアルとmanコマンドを入れる

参考
[Window10に日本語対応CentOS7のdockerコンテナを作ってみた](https://qiita.com/0ashina0/items/f8b960e822a40a6a2eed)

ポイントはCentOS ProjectのGPG公開鍵
これがないとinstallが全然すすまなかった



### Dockerfileをかく

```python:Dockerfile

vi Dockerfile

FROM centos:7

# CentOS ProjectのGPG公開鍵をインストールする
RUN rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-7

# インストール済みのパッケージをアップデート＆キャッシュのクリア
RUN yum -y update && yum clean all


# 言語を日本語に設定
RUN localedef -i ja_JP -f UTF-8 ja_JP.UTF-8
RUN echo 'LANG="ja_JP.UTF-8"' >  /etc/locale.conf
ENV LANG ja_JP.UTF-8


# 日付を日本語に設定
RUN echo 'ZONE="Asia/Tokyo"' > /etc/sysconfig/clock
RUN rm -f /etc/localtime
RUN ln -fs /usr/share/zoneinfo/Asia/Tokyo /etc/localtime


# manをインストールする前に、manファイルをインストールするように設定変更
RUN sed -i -e"s/^tsflags=nodocs/\# tsflags=nodocs/" /etc/yum.conf


# manと、man-pagesをインストール
RUN yum -y install man
RUN yum -y install man-pages.noarch
RUN yum -y install man-pages-ja.noarch
```

# 現在のDockerの状態

なにもないこと

```python:images
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
```


```python:ps
$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS   
```





# Dockerfileからimageをbuild

```python:コマンド構文

== 構文
docker build -t [生成するイメージ名]：[タグ名] [Dockerfileの場所]
※ タグ名は作成versionを入れたりすることが多いっぽい

== image生成
$ docker build -t act_chk:1.0 .
  --> Conplete!! 

== 確認

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED              SIZE
act_chk             1.0                 d2b0a3cbbbac        About a minute ago   588MB
centos              7                   1e1148e4cc2c        6 weeks ago          202MB
```

問題なくimageがbuildされました

# コンテナの作成

```python:docker_run

== コンテナ作成
$ docker run -it --hostname="act_chk" -d --name="act_chk" d2b0a3cbbbac /bin/bash

```

```python:ps
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
8af1a1241f48        d2b0a3cbbbac        "/bin/bash"         14 seconds ago      Up 12 seconds                           act_chk
```

生成されました


### コンテナに入ってみる

プロセスのSTASUSをみると"UP"となっているため、
このコンテナ状態はバックグラウンドにて起動中となっています

中に入って確認

```python:
$ docker attach act_chk
 --> プロンプトが変わりコンテナ内に入ります

$ date
2019年  1月 21日 月曜日 11:54:10 JST

日本語環境と時刻同期ができている事を確認
```

今回はexpectというコマンドも一緒にインストールした


これでCentOSでシェルを動かす環境がコンテナ上にできたのでここまで


[Docker 日本語環境構築まとめ 3](https://qiita.com/kkbt/private/735be8610effae31ee3b)へつづく
Docker 日本語環境構築まとめ 1

# アジェンダ 
Docker Engineのインストール

以上

# 構築環境

- ホストOS Debian

その上に構築
- Docker Engine
- CentOS7  


```python:カーネルバージョン確認
$ lsb_release -a

No LSB modules are available.
Distributor ID: Debian
Description:    Debian GNU/Linux 9.5 (stretch)
Release:        9.5
Codename:       stretch
```

```python:証明書のインストール
$ apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys 58118E89F3A912897C070ADBF76221572C52609D

Executing: /tmp/apt-key-gpghome.f0P8RXPZFq/gpg.1.sh --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys 58118E89F3A912897C070ADBF76221572C52609D
key F76221572C52609D:
7 signatures not checked due to missing keys
gpg: key F76221572C52609D: public key "Docker Release Tool (releasedocker) <docker@docker.com>" imported
gpg: Total number processed: 1
gpg:               imported: 1
```

```:Dockerリポジトリ登録

$ vi /etc/apt/sources.list.d/docker.list
　追記 > deb https://apt.dockerproject.org/repo debian-stretch main

$ apt-get update
証明書を入れていれば問題なく完了

入れていなければ
$ apt-get update
無視:2 http://ftp.jp.debian.org/debian stretch InRelease
ヒット:3 http://ftp.jp.debian.org/debian stretch-updates InRelease
ヒット:1 http://security-cdn.debian.org/debian-security stretch/updates InRelease
ヒット:4 http://ftp.jp.debian.org/debian stretch Release
取得:6 https://apt.dockerproject.org/repo debian-stretch InRelease [48.7 kB]
無視:6 https://apt.dockerproject.org/repo debian-stretch InRelease
取得:7 https://apt.dockerproject.org/repo debian-stretch/main amd64 Packages [6,943 B]
55.6 kB を 0秒 で取得しました (112 kB/s)
パッケージリストを読み込んでいます... 完了
W: GPG エラー: https://apt.dockerproject.org/repo debian-stretch InRelease: 公開鍵を利用できないため、以下の署名は検証できませんでした: NO_PUBKEY F76221572C52609D
W: リポジトリ https://apt.dockerproject.org/repo debian-stretch InRelease は署名されていません。
N: このようなリポジトリから取得したデータは認証できないので、データの使用は潜在的に危険です。
N: リポジトリの作成とユーザ設定の詳細は、apt-secure(8) man ページを参照してください。

↑ Dockerリポジトリの正当性が証明されないためリポジトリ登録できない
```

```vim:Dockerインストール

$ sudo apt-get install docker-engine

$ sudo service docker start
　> ホスト名の名前解決ができないと弾かれた



$ sudo docker run hello-world

== こんな感じのmsgがでる
Hello from Docker!
This message shows that your installation appears to be working correctly.

== Dockerの最新版にUpgrade
$ apt-get upgrade docker-engine



== Docker バージョン

$ docker -v
Docker version 17.05.0-ce, build 89658be

$ docker version
Client:
 Version:      17.05.0-ce
 API version:  1.29
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:09:06 2017
 OS/Arch:      linux/amd64

Server:
 Version:      17.05.0-ce
 API version:  1.29 (minimum version 1.12)
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:09:06 2017
 OS/Arch:      linux/amd64
 Experimental: false

```

これでDebianOS上におけるDocker の環境構築は終了

[Docker 日本語環境構築まとめ 2](https://qiita.com/kkbt/items/333719512bb8598cbf39) につづく
たとえばRubyのgitignoreを一瞬で作るだけで強くなれること



# Ref

[.gitignore_globalを自動生成！便利！しかし落とし穴が.. - Qiita](https://qiita.com/missyyy/items/5f2a8970c2b420cfac20#comment-9e47ae8323214c12df1d)

# https://www.gitignore.io/

![image](https://user-images.githubusercontent.com/13635059/51456855-7e207d80-1d92-11e9-9e60-3a6edf02804e.png)

# Result
[https://www.gitignore.io/api/ruby](https://www.gitignore.io/api/ruby)

```

# Created by https://www.gitignore.io/api/ruby
# Edit at https://www.gitignore.io/?templates=ruby

### Ruby ###
*.gem
*.rbc
/.config
/coverage/
/InstalledFiles
/pkg/
/spec/reports/
/spec/examples.txt
/test/tmp/
/test/version_tmp/
/tmp/

# Used by dotenv library to load environment variables.
# .env

## Specific to RubyMotion:
.dat*
.repl_history
build/
*.bridgesupport
build-iPhoneOS/
build-iPhoneSimulator/

## Specific to RubyMotion (use of CocoaPods):
#
# We recommend against adding the Pods directory to your .gitignore. However
# you should judge for yourself, the pros and cons are mentioned at:
# https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control
#
# vendor/Pods/

## Documentation cache and generated files:
/.yardoc/
/_yardoc/
/doc/
/rdoc/

## Environment normalization:
/.bundle/
/vendor/bundle
/lib/bundler/man/

# for a library or gem, you might want to ignore these files since the code is
# intended to run in multiple environments; otherwise, check them in:
# Gemfile.lock
# .ruby-version
# .ruby-gemset

# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
.rvmrc

# End of https://www.gitignore.io/api/ruby
```


---

https://twitter.com/YumaInaura

https://github.com/YumaInaura/YumaInaura/issues








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
websocket API を API Gateway と Python ランタイムの Lambda で作る

re:Invent 2018で発表があったとおり、API Gateway が websocket API をサポートしました。

- https://aws.amazon.com/jp/blogs/news/announcing-websocket-apis-in-amazon-api-gateway

ですが、AWS が提供するサンプルコードは JavaScript だけで・Python の実装が見当たりませんでした。

- https://github.com/aws-samples/simple-websockets-chat-app

そこで、本稿では Python ランタイムの Lambda を用いて websocket API を構築するさいのサンプルコードを紹介します。 
なお、デプロイや動作確認の手順については readme を参照してください。

## サンプルコード

- https://github.com/kumapo/simple-websockets-app-py
TableHeaderView の高さが AutoLayout で変わってくれないときの対処法

# この記事について
AutoLayout 利用時の TableHeaderView Height 問題は多くの記事で取り上げられています。今回紹介するのは、その中でも実装難易度が低く、複雑性が低いものをサンプルを使いながら紹介します。
よってこの方法は解決スピードを重視したものとなりますので、ご理解ください。

- Swift 4.x
- Xcode 10.1
- iOS 12

# 高さ不確定の現状
![Screen Shot 2019-01-21 at 14.58.00.png](https://qiita-image-store.s3.amazonaws.com/0/128344/0178ffae-32fd-fe9a-6c8a-bf2c11161cbb.png)

```swift
import UIKit

class ViewController: UIViewController {
    @IBOutlet private weak var tableView: UITableView!
    private let headerView = UINib(nibName: "HeaderView", bundle: nil).instantiate(withOwner: nil, options: nil).first as! HeaderView

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.delegate = self
        tableView.dataSource = self
        tableView.tableHeaderView = headerView
    }
}
// セルに関する処理は省略
```
このように TableHeaderView が正しく決まっておらず、レイアウトが崩れています（image/label/button の間隔が空きすぎてます）。
HeaderView 内で自動的に高さが決まるように設計しても、強制的に高さを変えられてしまう現象が発生しています。

# 解決方法
![Screen Shot 2019-01-21 at 14.53.59.png](https://qiita-image-store.s3.amazonaws.com/0/128344/7da309a2-f90f-a89c-1ce5-9fc846540150.png)
TableHeaderView 上のパーツを UIView 上に直置きするのではなく、1つ UIView を敷いてからその上に置くようにします。 `BaseView` と定義している View のことです。そして、 `BaseView` の上・左・右に対して制約をつけ、高さは中のパーツで決まるようにレイアウトします。
最後に、 `BaseView` を IBOutlet でつなげて高さを外部から参照できるようにします。

```swift
class ViewController: UIViewController {
    private let headerView = ...
    ...

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        var frame = headerView.frame
        frame.size.height = headerView.height
        headerView.frame = frame
        tableView.tableHeaderView = headerView
    }
}
```
VC 側で高さを反映させて完了です。

# 問題解決
![Screen Shot 2019-01-21 at 14.33.21.png](https://qiita-image-store.s3.amazonaws.com/0/128344/f76861ea-e675-3ebe-0879-c9ec65042602.png)
TableHeaderView の高さが強制的に決まってしまって、中のパーツで高さが決まってくれないのであれば、 UIView を1つ敷くことによってレイアウト計算を分け、AutoLayout によって決定した高さを TableHeaderView の高さに指定してしまえばいいじゃん！というアプローチでした。

# 最後に
素材として [いらすとや](https://www.irasutoya.com) を利用させていただきました。
実は、アプリ内に登場するカプセルフィギュアは本当に存在します（笑）。
appiumでapkから各要素のidを調査する方法

appiumを使ったandroidアプリのテストでは、各要素のidなどを指定して操作する。
特にダイアログボックス内のタイトルなど動的に生成した要素はidが不明だったりする。

##方法
appiumのGUIを使う。
<img src=https://qiita-image-store.s3.amazonaws.com/0/296108/ed47834b-015f-788e-6313-338bada86ca5.png width=600>
右上の虫眼鏡マークを押す

<img src=https://qiita-image-store.s3.amazonaws.com/0/296108/5b69b707-8315-e844-5f9c-238d4d26be01.png width=600>
こんな画面が出るので、Desired Capabilitiesに要素を確認したいアプリとエミュレータの設定を書く。
appiumでテスト用コードを書くときに

```python
desired_caps = {}
        desired_caps['platformName'] = 'Android'
        desired_caps['platformVersion'] = '8.0'
        desired_caps['deviceName'] = 'Nexus'
        # Returns abs path relative to this file and not cwd
        desired_caps['app'] = os.path.abspath(os.path.join(os.path.dirname(__file__),'apps/Chess Free.apk'))
        desired_caps['appPackage'] = 'uk.co.aifactory.chessfree'
        desired_caps['appActivity'] = '.ChessFreeActivity'
```
みたいな設定を書いているはずなので、それと同じものを書く。
appiumの導入～テストコード作成までの流れは[筆者の過去の記事](https://qiita.com/exp/items/bdf06a388f30a1726984)参照。

<img src=https://qiita-image-store.s3.amazonaws.com/0/296108/cb0a1be2-2634-1a8f-5932-159fb5da05de.png width=600>
できたらエミュレータを立ち上げたうえで、`Start Session`を押す。
`Save As ...`を押すと今書いた設定を保存できる。

<img src=https://qiita-image-store.s3.amazonaws.com/0/296108/9343449e-09c9-a597-5378-5782ba35ec22.png width =600>
こんな画面になる。
左上の矢印３つがそれぞれセレクタ、スワイプ、タップになっている。
右側のセレクタで選択した要素の詳細が右の`Selected Element`に表示される。


##(アプリ設計時の)注意
たとえばfragmentは画面の上に重なっているだけなので、appiumで`find_elements_by_hogehoge()`とかすると下にある要素が普通に引っかかる。
特に`by_xpath`は動作が不安定になりがちなので、layout作成時に複数重なったfragmentを含めてidが一意になるようにすべき。

<img src=https://qiita-image-store.s3.amazonaws.com/0/296108/98c6e7f5-d034-b337-195c-2a66ca9b891a.png width=600>


##参考
* [AppiumでiOS/Androidアプリの自動テストを試した 〜Appiumをインストールして自作サンプルアプリをなんとか動かすまで〜](https://qiita.com/devnokiyo/items/3cea66eb83280985d6cc)
OSXのSublimeText3でGoogle日本語入力のタブキーが効かない問題を解消する。コマンド例付き。

OSXのSublimeText3でGoogle日本語入力のタブキーが効かない問題を解消する。コマンド例付き。

[OSXのSublimeText3でGoogle日本語入力の不満を解消し、さらにMarkdown環境を整える - Qiita](https://qiita.com/giiko_/items/b3e4dd639c00635d0ef9)

# ディレクトリ作成

```
mkdir ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/Default
```

# Bindings を開いて command+S でファイル保存する


![image](https://user-images.githubusercontent.com/13635059/51455900-f6853f80-1d8e-11e9-8bca-6400fb85aa90.png)


# ファイル編集

```
vim ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/Default/Default\ \(OSX\).sublime-keymap
```

# コメントアウト

```
 // { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} },
  // { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": false},
  //  "context":
  //  [
  //    { "key": "setting.tab_completion", "operator": "equal", "operand": true },
  //    { "key": "preceding_text", "operator": "regex_match", "operand": ".*[^0-9]$", "match_all": true },
  //  ]
  // },
```

# Sublime再起動

# いけた

![image](https://user-images.githubusercontent.com/13635059/51455815-a1e1c480-1d8e-11e9-8886-4c84a99fbea4.png)



---

https://twitter.com/YumaInaura

https://github.com/YumaInaura/YumaInaura/issues








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
[golang] 「Gin」と「sqlx」を利用して簡単なAPIをつくってみた

# What's 「Gin」?
- golangのフレームワークのひとつ
- martiniという別のgolang frameworkのような感じですが、martiniよりも早いそう
- contributors/star/fork/watchがechoやirisよりも多い　（2019.01中旬時点）
- HTTP2.0にも対応している
- router がgroup化できる

[参照]
https://github.com/gin-gonic/gin

# What's 「sqlx」?
- golangの「database/sql」ライブラリを拡張したライブラリ
- NamedQueryとかが簡単にできるようになってるので便利

[参照]
https://github.com/jmoiron/sqlx/

# What did you do? 
- 「Gin」フレームワークで簡単なAPIを作ってみました
- テーマは「本の管理システム」です
- 基本的なCURDができるようにはなっています

## Structure
```
├── Dockerfile				// API実行用 Docker image
├── api
│   ├── main.go   			// API Server
│   └── scope
│       ├── book.go			// URI「/book」以下の処理
│       └── router.go			// HTTP Request Method毎に呼び出すメソッドを振り分ける
├── docker-compose.yml
└── mysql
    ├── Dockerfile			// mysql image
    ├── db-data
    ├── initdb.d
    │   ├── 1_init.sh
    │   ├── 1_schema.sql_		// mysql schema
    │   └── 2_testdata.sql_	// 初期データ
    └── my.cnf
```

## Contents

※　コードや実行方法は [github](https://github.com/sencondly/api/tree/master/bookstore_mock) に上げましたので、興味ある方はそちらを御覧ください
以下、URIになります。

- 検索
    - [GET]    /book/list
    - [GET]    /book/search/:title
- 追加
    - [POST]   /book/insert
- 更新
    - [PATCH]  /book/:id
- 削除
    - [DELETE] /book/:id

## Document
以下、ハマった箇所だけ簡単に解決法を紹介します。
（初心者なのでコードのあれこれ担保できないのであしからず）

### ■　argsを利用してselectする
[問題]

↓のようにargsを指定しなければstructsに結果を引き渡せるのですが、公式のように「$1」を指定するとまくいかなかった

```
 func getBookList(c *gin.Context) {
          db := dbConnect("mysql", "api", "api", "password")

          books := []Book{}
          db.Select(&books, "select * from book")
  
          c.String(200, "getBookList : %v", books)
```

[解決法]

- 「?」を指定する

	```
	err := db.Get(&book, "select * from book where id=?", id);
	```
 - メモ：like検索のように「％」などの特殊文字を指定する時上手く行かなかった

- Namedを利用する

	```
	m := map[string]interface{}{"title": "%" + title + "%"}

	nstmt, err := db.PrepareNamed("select * from book where title like :title")
;
	err = nstmt.Select(&books, m)
	```
 - メモ：「%」は事前に文字連結しておかないとエラーになってしまい、ハマった


### ■　HTTP Request Bodyを利用してパラメータを受け渡しする場合
[問題]

- request bodyをどんなメソッドで引き取ればいいかがわからなかった

[誤答]

- gin.Context.Resuest.Bodyを直接読み込もうとすること
 - これでやると、折角のフレームワークの旨味がまったく活かせない
 - しかもそのまま表示すると↓のようになる

 	```
	$ curl -X PATCH -d "title=RESTful web service&label=architecture" http://localhost:9000/book/st.sol.18
	updateBookInfo st.sol.18 : &{0xc000216140 <nil> <nil> false true {0 0} false false false 0x6a2030} 
	```

[解決法]

- [Bind()](https://github.com/gin-gonic/gin#model-binding-and-validation) を使う

 	```
	// update target info format is JSON
	var target Book
	if err := c.ShouldBind(&target); err != nil {
		c.JSON(http.StatusUnauthorized, gin.H{"status": "unauthorized"})
		return
	}
	```
SANs や ワイルドカードSSL証明書 って何？

## SANs
SANs（Subject Alternative Names）とは、SSLサーバー証明書の拡張機能で、SSL証明書にコモンネームとは別に拡張領域を設け、その拡張領域にドメイン（FQDN ※1）を個別に複数設定することが可能
https://zenlogic.jp/aossl/basic/ssl-function/#link02

## ワイルドカードSSL証明書
複数サブドメイン（ドメインは1つ、ホスト名は複数）で運用している場合はワイルドカードSSL証明書を、複数ドメインで併用運用している場合はSANsを選ぶといい
VB.netでの日時、ミリ秒、フォーマット変換、おまけで乱数

```vb
        Dim myRnd As String

        '--- 乱数初期化
        Randomize(Double.Parse(Format(Now(), "hhmmssfff")))　　'fffはミリ秒3桁

        '4桁の乱数を作成
        For x = 1 To 4
            '0～9の範囲の乱数を取得して文字列として結合
            myRnd = myRnd & CStr(Int((9 - 0 + 1) * Rnd() + 0))
        Next x
        Dim strRes As String = "ABC-" & Format(CType(Now, Date), "yyyyMMddHHmmssfff") & "-" & myRnd
         
        
        strRes →　ABC-20190121150037123-5678
                  a   b       c     d   e   
                
         -a → "ABC-"　　       固定値  
         -b → "20190121"　　　 日付
         -c → "150037"   　　　時刻
         -d → "123"      　　　ミリ秒
         -e → "5678"     　　　乱数
```
Go言語を真剣に勉強してみた〜パスワードのハッシュ化〜

#はじめに
こんにちは。某学校でプログラミング等の勉強中のサーバーサイドのプログラマーのワタタクです。:relaxed:
さて新年一発目の記事はログイン機能をgolangで実装するときのパスワードのハッシュ化の方法を紹介していきます。
#準備
``golang.org/x/crypto/bcrypt`` を使用することで安全なパスワードハッシュとチェックができます。
まず$GOPATHに移動して以下のコマンドを叩いてください。

```terminal:terminal
go get golang.org/x/crypto/bcrypt
```
#DBなどに登録するパスワードのハッシュ化

```golang
import "golang.org/x/crypto/bcrypt"

func main() {
    hash, err := passwordHash("登録用パスワード")
    if err != nil {
        panic(err)
    }
    println(hash)
}

// パスワードハッシュを作る関数
func passwordHash(pw string) (string, error) {
    hash, err := bcrypt.GenerateFromPassword([]byte(pw), bcrypt.DefaultCost)
    if err != nil {
        return "", err
    }
    return string(hash), err
}
```

``GenerateFromPassword`` は[]byte型を渡す必要があるのでフォームなどから入力されたパスワードを[]byte型にキャストする必要があります。
戻り値も[]byte型なのでDBに保存する時などにstring型にキャストします。
#登録したパスワードハッシュが入力パスワードにマッチするかどうかを調べる


```golang
import "golang.org/x/crypto/bcrypt"

func main() {
    // hashはDBなどからとってくる
    err := passwordVerify(hash, "入力されたパスワード")
    if err != nil {
        panic(err)
    }

    println("認証しました")
}

// 登録したパスワードハッシュが入力パスワードにマッチするかどうかを調べる関数
func passwordVerify(hash, pw string) error {
    return bcrypt.CompareHashAndPassword([]byte(hash), []byte(pw))
}
```
``CompareHashAndPassword`` も[]byte型を渡す必要があるのでキャストする必要があります。

以上。
もし何か間違っている等のご指摘があればご連絡ください。
最後まで読んで頂きありがとうございました。
SQLで複数のORをまとめる書き方

# ORの多用から抜け出す
下のPersonテーブルから、**Ageが10と35と40の人を抽出したい**とき、みなさんどう書きますか？


|ID  |Name  |Age  |
|---|---|---|
|1  |杉下 ブライアン  |35 |
|2  |元旦　絵馬  |40  |
|3  |鼻之穴　光男  |10  |
|4  |楊枝　折子  |89  |

ORを使って書くと、下記のようになります。

```sql
SELECT *
FROM `Person`
WHERE `Age` = 10 OR `Age` = 35 OR `Age` = 40; -- ORが２つもあって気分が優れない… --
```

ORが2つもあってなんだか気分が優れません。
そこで、**IN句**を使って書いてみましょう。そうすると、以下のようになります。

```sql
SELECT *
FROM `Person`
WHERE `Age` IN (10, 35, 40); -- INを使うと綺麗にまとめられる！ --
```

このように、カラムが同じであれば、**IN句を使ってまとめられる**みたいです。
とても綺麗になりました(*´∇｀*)

# 参考
https://yukun.info/mysql-query-select-where-in-like-between/
長い文章から1文ずつ抽出し、単語の出現回数を書き出すサンプル

長文から1文毎に区切りをつけ、単語の出現回数を記録するサンプルです。
テスト環境とデータセットは以下の通り。データセットは[青空文庫](https://www.aozora.gr.jp/)から取得しました。著作権が消滅したデータは、有償・無償であるかを問わず、自由に複製・再配布・共有することができ、ファイルを元に、実演・口述・翻案など自由に活用することもできるようです。

##### 開発環境
| language | version |
| :---: | :---: |
| Python | 3.6.6 |

##### dataset
| No. | 作家名 | 作品名 |本文 |
| :---: | :---: | :---: | :---: |
| 01 | 走れメロス |太宰 治 | メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を... |
| 02 | 羅生門 |芥川 龍之介 | ある日の暮方の事である。一人の下人げにんが、... |
| 03 | 江戸川 乱歩 | 赤い部屋 | 異常な興奮を求めて集った、七人のしかつめらしい男が... |

基本的に必要なライブラリをインストールして、`extract.py`を実行するだけで、書き出しができるようにしています。

```bash:terminal
# ライブラリをインストール
pip install regex janome

# 実行
python extract.py
```
## 1文抽出のルール
基本的に「。」や「？」で終了する文章を1文として切り出していますが、会話文の場合をどのようなルールにするか、現在検討中です。そのため、会話文の場合、1文の切れ目にカギカッコ「」が入って少し変な感じになっています。

### ルール
* 「本文」カラムのデータを1文ずつ抽出。
* 「作品名」を最後に追加

| 文章 |
| :--- |
| ある日の暮方の事である。|
|一人の下人げにんが、羅生門らしょうもんの下で雨やみを待っていた。|
| ... |

## 単語抽出のルール
形態素解析のライブラリはいくつかあるようですが、今回は単語の出現頻度をカウントする機能がついている`janome`というライブラリを使用しています。[こちらのサイト](http://mocobeta.github.io/janome/#id11)が非常に参考になりました。

### ルール
* 「本文」の文章を形態素解析。
* 名詞のみ抽出し、出現回数を記録する。
* 以下の品詞と活用形は除外

```python:除外フィルター
["名詞,代名詞",
"名詞,非自立",
"名詞,数", 
"名詞,接尾,特殊",
"名詞,接尾,一般", 
"名詞,接尾,形容動詞語幹", 
"名詞,接尾,サ変接続", 
"名詞,サ変接続"]
```

### 芥川龍之介「羅生門」
**Top 20**

| 単語 | 出現回数 |
| :--- | :--- |
| 下人 | 44 |
| 老婆 | 28 |
| 死骸 | 14 |
| 門 | 13 |
| 雨 | 12 |
| 男 | 11 |
| 手 | 9 |
| 梯子 | 9 |
| 死人 | 8 |
| 饑死 | 8 |
| 火 | 8 |
| 羅生門 | 7 |
| 女 | 7 |
| 上 | 7 |
| 前 | 7 |
| 太刀 | 7 |
| さっき | 6 |
| 今 | 6 |
| 眼 | 6 |
| 髪の毛 | 6 |
| ... | ... |

 

サンプルは[Github](https://github.com/mitsuyacider/ExtractSentence)に置いておきます。