OmniAICreator/Qiita-1.07M huggingface dataset:
[CircleCI 2.0][WebdriverIO][Docker] CircleCI 2.0 で WebdriverIO で E2E テストを行う （スナップショットの日本語対応含む）

CircleCI 2.0 で WebdriverIO を用いた Web アプリケーションの End-to-End testing を行うには image に  circleci/node:latest と selenium/standalone-chrome:latest を使うのが簡単です。

.circleci/config.yml のサンプルを示します。

``` .circleci/config.yml
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:latest
      - image: selenium/standalone-chrome:latest
    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package.json" }}
          # fallback to using the latest cache if no exact match is found
          - v1-dependencies-

      - run: npm install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

      - run:
          name: Run WebdirverIO tests
          command: |
              node_modules/.bin/wdio wdio.conf.js
          no_output_timeout: 30m

      - store_test_results:
          path: ./wdio-logs

      - store_artifacts:
          path: ./screenShots/

      - store_artifacts:
          path: ./errorShots/
```

WebdriverIO のリポーターに `wdio-junit-reporter` を使うことで、 `./wdio-logs` ディレクトリに jUnit 形式のログが出力されますので、 CircleCI がいい感じにリポートを表示してくれます（大した情報量はありませんが。。。）。

また、 -store_artifacts で スクリーンショットとエラー時のスクリーンショットを Aritifacts からダウンロード可能なように設定しています。

# スナップショットの日本語対応

上記のままだとスナップショットの日本語が豆腐（白い四角）になってしまうので、日本語を表示可能なカスタムイメージを作ります。

selenium/standalone-chrome:latest　をベースに作ります。

```bash
$ cd /path/to/your_project/
$ mkdir -p ./test/images/primary
$ cat > ./test/images/primary/Dockerfile
FROM selenium/standalone-chrome:latest
RUN sudo apt-get update && sudo apt-get install -y locales locales-all
RUN sudo update-locale LANG=ja_JP.UTF-8 LANGUAGE="ja_JP:ja"
RUN . /etc/default/locale
RUN sudo apt-get install fonts-ipafont-gothic fonts-ipafont-mincho
RUN sudo fc-cache -fv;
```

やっていることは日本語フォントを読み込んでいるだけです。

./test/images/primary/Dockerfile を作ったらビルドします。

```bash
$ docker build -t shinchit/standalone-chrome-addjfont .circleci/images/primary
```

`shinchit/standalone-chrome-addjfont` の箇所は <[Docker Hub](https://hub.docker.com/) の アカウント名>/<プロジェクト名> を指定します。
※ 事前に Docker Hub のアカウントをとっておきましょう。

無事ビルドが成功したら Docker Hub に push します。

```bash
$ docker login
$ docker push shinchit/standalone-chrome-addjfont
```

pushが成功したら、 作成したイメージを使えますので `.circleCI/config.yml` の image の指定を次のように置き換えます。

``` .circleci/config.yml
    # （略）
    docker:
      - image: circleci/node:latest
      - image: shinchit/standalone-chrome-addjfont:latest
    # （略）
```

これで、スナップショットの日本語が豆腐にならずに表示されるようになります。

# リファレンス

- [Using Custom-Built Docker Images](https://circleci.com/docs/2.0/custom-images/)
改修で影響範囲を見るときの探し方Tips

# 概要
改修を行うときに影響範囲を見るときにどのように探していったら良いのかまとめる。
思わぬ伏兵がいるときがあるのでとても注意。更新予定。

# 影響範囲を調べると言うことは・・・


1. 回収したり、削除したりするメソッドやクラスをgrep
2. grepしたファイル内で使っているメソッドを変数に入れているようならファイル内で変数をgrepし、どうなっているかを見る。改修や削除を行っても、変更前とアウトプットが変わらない、または、変わっても問題ないことを確認する。
3. 1. に引き続き、grepして変更や削除を行うメソッドやクラスを使っているメソッドでさらにgrepする。
SVG 画像が表示できないと言われた場合 (Apache)

## 結論

/etc/httpd/conf/httpd.conf に 1 行足しました

~~~
AddType image/svg+xml .svg .svgz
~~~

拡張子のピリオドはあってもなくても良いみたいです
変更後`# service httpd graceful`で反映できました

## 事象

画像ファイル

<img width="1440" alt="svg_sample.png" src="https://qiita-image-store.s3.amazonaws.com/0/106789/bb50f473-bae0-1027-66c3-f3006aa6875b.png">


## 原因

MIME タイプが正しく設定されていなかったためです
事象が起きたサーバーがだいぶ古かったため、/etc/mime.types に svg が無かったようです

~~~
$ grep svg /etc/mime.types
$
~~~

/etc/mime.types は httpd.conf 内の TypesConfig ディレクトリでロードされています

~~~
$ grep 'TypesConfig' /etc/httpd/conf/httpd.conf
# TypesConfig describes where the mime.types file (or equivalent) is
TypesConfig /etc/mime.types
~~~

ちなみに /etc/mime.types の方を編集するのは推奨されていません

>ほとんどの管理者は、よく使われるファイル名の拡張子を IANA に登録されたコンテントタイプに関連付けている、 Apache の mime.types ファイルを使います。 現在の一覧は http://www.iana.org/assignments/media-types/index.html で管理されています。これは、主要なメディアタイプの定義を提供して、 必要ところを AddType で 上書きする、という方法で httpd.conf を簡略にします。 mime.types はサーバをアップグレードしたときに 置き換えられるかもしれないので、そのファイルを直接 編集しないでください。

http://httpd.apache.org/docs/2.4/ja/mod/mod_mime.html

## 参考

[ChromeでSVGが表示されない現象](https://qiita.com/hibikikudo/items/4d5678b041d55bb3fcca)
tf.cast()とは？＜数行で説明編＞

#１行で説明
型を変換する関数です。

#もう少し詳しく
こういう風に書く。
tf.cast( 変換したいもの , 変換後の型 )


#具体例
```py

import tensorflow as tf

aaa=[False,False,True]

bbb=tf.cast(aaa, tf.float32)

print (sess.run(bbb))
```

実行結果　


```python

[0. 0. 1.]
```

　

以上がtf.cast()の説明です。

　


※この記事はテンソルフローを使っている人向けの記事です。
Mavenリポジトリのローカルキャッシュ

Eclipce環境下でMavenのローカルキャッシュによりハマったため、備忘録として残したいと思う。

##事の発端
とあるプロジェクト、 `git pull` によってソースが更新されたタイミングで
>ビルド・パスのエラーが解決されるまで、プロジェクトをビルドできません。
----------------------.jar が見つかりません。

こんな感じのエラーにより、プロジェクト内のJunitテストが動作しなくなった。
タイミングがたまたま `git pull` の直後だっただけで、具体的に何がトリガーか分からず。

##試行錯誤
ひとまずMavenの依存関係をチェック。
エラーに表示されているjarファイルは存在している。
が、パッケージ・エクスプローラーからそのjarファイルを見ようとすると、開けない。
>invalid LOC header(bad signature)

画面には上記表示。~~**なるほどわからん。**~~
試しに`pom.xml`で別バージョンを指定してjarを取得してやると上手くコンパイルが通った。
Junitテストも動くようになったが、何の解決にもなっていないので試行続行。
後から考えるとこの辺の挙動も、解決のヒントになったのかもしれない。


気を取り直して、よくわからんエラーの時にとりあえずやってみる対処を...

- プロジェクトのRefresh
- ビューの問題タブからエラーを削除してClean→Build
- maven clean
- maven install
- プロジェクト削除 → プロジェクトを再Import
- Eclipseを再起動

一通りやってみたが、ダメだった。

##解決
Google先生を問い詰めていると、
Mavenリポジトリのローカルキャッシュがおかしなことになっている可能性があるとのこと。


**.m2配下にMavenキャッシュが存在する**らしい。
` ~/.m2/repository ` 配下のフォルダを全て削除し、
**Mavenプロジェクト右クリック → Maven → Update Maven Project...** から`pom.xml`を反映し直す。

お、コンパイル通った。
無事Junitテストも実行することができ、一件落着。

##まとめ
とりあえずエラーを解消する対処なんてことをいつもしているからこうなる。
知識不足も去ることながら、しっかり原因を捉えた上で考えて対応しましょうね、と。
当たり前のことですが、良い戒めになりました。

ただ今回のような「よくわからないけどエラーが起きている」という時には、
**色々試せる武器**を持っていなければならないですね....
それでもPythonのversionを切り替えたい

Pythonのversionを２系から３系に変更しようとしたけど手間取ったので。


<h1>現在のPythonのversionの確認</h1>

ターミナルで次のように打ち込みます。

```terminal
$ python --version
```

また、次のように打ち込むと変更が可能なPythonのversionの一覧がでます。



```terminal
$ pyenv versions
```


<h1>Pythonのversionの切り替え</h1>

次のようにすると全体に

```terminal
$ pyenv global 3.6.0
```

次のようにするとカレントディレクトリに

```terminal
$ pyenv local 3.6.0
```

反映されるようですが再度次のように打ち込んだ時に

```terminal
$ python --version
```
versionが２系のままだったのでいやはや初心者には３系に変えるのも大変だなと思いました。

参考:
https://qiita.com/twipg/items/75fc9428e4c33ed429c0

<h1>.bash_profileを編集してパスを通す</h1>
そこで調べていたところ、.bash_profileに一文を追加すると良いとの情報がありました。

まずターミナルで次のように入力します

```terminal
vi ~/.bash_profile
```
ここで初めてviに出会います。
viはテキストエディタようなもので編集モードとコマンドモードとあるようです。

一文を追加します。

```terminal
export PATH="$HOME/.pyenv/shims:$PATH"
```
viはescで編集モードからコマンドモードに戻れるみたいです。またコマンドモードで

```vim
:wq
```
と入力すると保存して無事ターミナルに戻れます。
保存しない場合は

```vim
:q!
```
で戻れます。

これらをしないでターミナルを終了するとファイルが破損することがあるようです。
それをやってしまったのでATTENTIONメッセージが出てきてびっくりしました。

そんなこんなでスムーズにはいきませんでしたがPythonのversionは無事3.6.0へ切り替わりました。

参考:
https://qiita.com/nbkn/items/01a11392921119fa0153
https://qiita.com/mckyhrs/items/94a2db3506287df0420e
サーバレスアプリケーション開発ガイドを読んだ

## AWSを使ったサーバレスアプリについて書いてある本

 2018年の3月16日に発売される、[Amazon Web Servicesを使った　サーバレスアプリケーション開発ガイド](https://www.amazon.co.jp/Amazon-Web-Services%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%82%B9%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%82%AC%E3%82%A4%E3%83%89-%E8%A5%BF%E8%B0%B7-%E5%9C%AD%E4%BB%8B/dp/4839964564)を、先駆けて頂いたので、所感と今後の活用方法についてまとめてみる。

## 対象ユーザ
 - AWSでサーバレスなアプリをイチから作ってみたい人、
 - AWS Lamdaを知っているけどどこから使ったら良いかわからない人、
 - AWSをアカウントをまずとって何か初めてみたい人
(あまり大きい声では言えないがある程度Production環境で幾つか動かしている人向けにはちょっと合わないかも... :thinking: )  

この本の良いところは、あまりAWSのコンポーネントを詳しく知らなくても、サーバーレス設計ができたり、 `早く` 動かせるところだと思う。(ハマったりしない、パターンを知れる。)

一方で、業務で使っている人はある程度知っていても、RecognitionやX-Ray,SAM,CIまでカバーしているので範囲は広いと思う。
個人的には、この本をきっかけに新たに挑戦しよう、というきっかけにもなった。


## 意外と認識不足でオッと思った点
 - Lambda統合プロキシ
    - [API Gateway側](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/set-up-lambda-custom-integrations.html#set-up-lambda-custom-integration-using-cli)で設定できるんですね
 - [エンコード処理する場合のアップロード可能なサイズの制限](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/limits.html)
 - DynamoDBはfroatに対応していないのでその部分の処理が関数側で必要。


## Lambdaをはじめとするサーバレス化に今後も期待
 本に書かれているアプリはLambdaで使用できるPython, NodeJSで書かれていますが、昨年のre:inventであったようにGoが対応されたり、サーバレスレポジトリが設計図の中に取り込まれたり、今後もアップデートがありそうなので環境に合わせて積極的に使っていきたい。
TensorFlowの”警告WARNING”をなくす方法。＜エラーはでないがモヤモヤする人向け＞


#解決方法

コード内の「initialize_all_variables」の部分を「global_variables_initializer」に書き換えて実行すると警告はなくなります。

「initialize_all_variables」は初期化するためのものなので、初期化を行う場所にあります。

　

※書き換えてもうまくいかなかった場合は別の原因かもしれないです。
docker-composeコマンド

## 概要

個人的によく使うdocker-comopse コマンドをまとめます

## コマンド一覧

| コマンド |  説明 |
| --- | --- |
| build | サービスのimageをビルド  | 
| restart | サービスを再起動 |
| run | サービスを起動 |
| up | サービスのimageをビルド＆起動 |
| exec | サービスに対してコマンドを実行 |
| logs | サービスのログを出力 |
| stop | サービスを停止させる |
| kill | サービスをkillする  |

## build

全てのサービスをビルドする

```bash
docker-compose build
```

サービス名を指定してビルドすることもできます

例: railsをビルド

```bash
docker-compose build rails
```

## up

全てのサービスを起動する

```bash
docker-compose up
```

`-d` を指定してデーモン状態で起動することもできます

```bash
docker-compose up -d
```

サービス名を指定して起動することもできます

例: railsを起動

```bash
docker-compose up rails
```

or 

```bash
docker-compose up -d rails
```

## exec ( or run )

`exec ( or run )` コマンドを使って、コンテナ内のサービスに対してコマンドを実行できます

```bash
docker-compose + exec ( or run )  + サービス名 + 実行したいコマンド
```

いくつか例を上げてみます

|例|macOS上のコマンド| docker-composeコマンド | サービス名 | コンテナ内で実行するコマンド |
| --- | --- | --- | --- | --- |
| dbコンテナに入る | docker-compose | exec | db | bash |
| railsコンテナに入る | docker-compose  | exec | rails | bash |
| bundle installをする | docker-compose | exec | rails | bundle install |
| db:create をする | docker-compose | run | rails | db:create |
| db:migrate をする | docker-compose | exec | rails | db:migrate |
| rspecを実行する | docker-compose | exec | rails | bundle exec rspec |

※ `run` を指定して実行した場合は新しくコンテナを立ち上げてから実行し、 `exec` を指定して実行した場合は既に立ち上がっているコンテナを使って実行します

**※ runコマンドを使う場合は、runの後に`--rm`オプションをつけることをオススメします**
`--rm` をつけて実行すると、コンテナ終了時に自動で起動したコンテナを削除してくれます

例: 終了後に自動でコンテナが削除されるようにrailsコンテナで`rails console`を起動する

```bash
docker-compose run --rm rails rails console
```

## logs

全てのサービスのログを出力する

```bash
docker-compose logs
```

サービス名を指定して出力することもできます

```bash
docker-compose logs rails
```

## stop

全てのサービスを停止する

```bash
docker-compose stop
```

サービス名を指定して出力することもできます

```bash
docker-compose stop nginx
```

## kill

全てのサービスをkillする

```bash
docker-compose kill
```

サービス名を指定してkillすることもできます

```bash
docker-compose kill rails
```
Fラン大学生のウェブ制作日記

<h1>MySQLでよく忘れるカラム制約のあれこれ</h1>
はい、というわけで昨日投稿したハルちゃんです:relaxed:
初投稿だったので自分でも何書いているのかわけわからんくなりました、、、
今回はSQLを使ってて自分がよく忘れてしまうカラム制約のあれこれをまとめてみました！

- 主キーの追加
- auto_incrementの追加
- カラムの追加

まず一番上の主キーの追加ですが、

alter table テーブル名 add primary key(カラム名);

これで簡単にできます。
<img width="577" alt="スクリーンショット 2018-03-14 1.16.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/240422/5fed0c30-6e35-cf47-ae89-5c2e15bcd64c.png">
※ ;(カンマ)を忘れずにつけてくださいね！自分はよく忘れてしまいます笑
こんな形でサクッとできます！
次に、auto_incrementですが、

alter table テーブル名 change 現在のカラム名 変更後のカラム名 データ型 auto_increment;

これでできます。では早速やってみます！
<img width="604" alt="スクリーンショット 2018-03-14 1.23.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/240422/fe64dc74-4f0f-4393-15eb-3f10c5332132.png">
こんな形でauto_incrementの追加ができました！

最後にカラムの追加です。

alter table テーブル名 add 追加したいカラム　データ型;

で完了です。早速、、、
<img width="645" alt="スクリーンショット 2018-03-14 1.28.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/240422/70c32ebb-e825-10a4-6646-b241b04289cc.png">

とまぁ、自分が忘れるものをメモりました笑
しっかり頭の中に入れないと、、、
【問題解決】 match式で`pattern type is incompatible with expected type;`というエラーが発生



# 環境
* Scala 2.12.4 (Java HotSpot(TM) 64-Bit Server VM, Java 1.8.0_152)


# 問題

以下のscalaコードをビルドすると、`pattern type is incompatible with expected type`というエラーが発生しました。

```scala:sample.scala
val s = Some("hoge")
val result = s match {
  case Some(str) => str
  case None => "not matched"
 }
```

```txt:error
Error:(46, 10) pattern type is incompatible with expected type;
 found   : None.type
 required: Some[String]
    case None => "not matched"
```


# 原因
変数`s`の型がOptionでなくSomeであることが原因でした。
エラーの内容は「`Some[String]`型を期待するけど、`None`が見つかったよ」という意味です。

`val s:Option[String] = Some("hoge")`に変更して、解決しました。

「OptionはSomeとNoneを持つ」という事実を知っていればすぐ解決できるはずなんですが…
これに30分間も使ってしまったので、Qiitaに投稿しました。

# 補足
[ドワンゴのscala研修資料](https://dwango.github.io/scala_text/error-handling.html)で勉強している際にハマった問題です。
androidでのリソースIDでの色と、16進数での色

androdアプリを作っていて、色に関してハマったことを示します
*注: リファレンス見たらすごく当たり前のことですが、ご了承ください

##setBackgroundResourceとsetBackgroundColorの違いについて
まず、動的にViewの色を変えたいと思い、colors.xmlに記載したものを参照して普段は

```sample.kt
view.setBackgroundResource(R.color.blue)
```

としていましたが、一度

```sample.kt
view.setBackgroundColor(R.color.blue)
```
こちらを使ってみると
NullPointerと怒られました

なんだこれはと公式リファレンスを参照してみると、一目瞭然
###setBackgroundResourceは引数にリソースID
###setBackgroundColorは引数に16進数のカラーコード
を受ける形となっていました
リソースIDもconstantな数値としてRクラスに保存されており、同じIntなのでビルドしてみるまで気づきませんでした。

これに加えて

```sample.kt
ContextCompat.getColor(context, R.color.blue)
```

というものがありました。
これも、getColorだから色のリソースIDを返してくれるのかと思い込んでいましたが、16進数
AARRGGBB (AA:透明度)
を返していました

つまりまとめると、

|メソッド   |引数   |返り値   |
|---------|-------|--------|
|setBackgroundColor|16進数のカラーコード|void(Unit)|
|setBackgroundResource|リソースID|void(Unit)|
|ContextCompat.getColor|context, リソースID|16進数のカラーコード|

以上、簡単なまとめ記事でした。
改善点や、誤解を招く表記などございましたらお教えください。
Plotlyでヒストグラム その2

### Plotlyでヒストグラム その2
```
この記事では plotly 2.3.0を利用しています。
```
### はじめに
***
下記でヒストグラムについて述べたのですが、より実務に近い形で。

[Plotlyでヒストグラム](https://qiita.com/haru1977/items/550e9da23de28064c2d4)

ここではkaggleのTitanicのデータを利用しています。

### 連続変数ごとに、カテゴリカルな変数の傾向を見る
***

ここでは５歳刻みの年齢(Age)ごとに、生死(Survived)の傾向を積み上げグラフで見ます。

```py
# coding:utf-8

import pandas as pd
import numpy as np

import plotly.plotly as py
import plotly.graph_objs as go

import plotly.offline as offline
offline.init_notebook_mode()


# データ部分については省略。
# dfというデータフレームで、年齢を表す変数が Age(float),　生死を表す変数が Survived(object型で値は0,1)


x0 = df['Age'][df['Survived'] == '0'].values
x1 = df['Age'][df['Survived'] == '1'].values

trace0 = go.Histogram(x=x0,xbins=dict(start=0, size=5, end=np.max(df['Age']) + 5), name = 'non')
trace1 = go.Histogram(x=x1,xbins=dict(start=0, size=5, end=np.max(df['Age']) + 5), name = 'survive')

layout = go.Layout(bargap = 0.2, barmode = 'stack',xaxis = dict(title="Age"))
fig = go.Figure(data=[trace0, trace1], layout=layout)

offline.iplot(fig)

```
![Unknown-4.png](https://qiita-image-store.s3.amazonaws.com/0/50110/e07c5da6-9bfe-2e4e-353b-f3db6442331b.png)


### カテゴリカル x カテゴリカル
***

そうなるとカテゴリカルな変数ごとに、つまり普通のクロス表を可視化するにはどうしようということでやってみました。
基本的に上のものと変わりないのですが、もっといい書き方があるような気もしています・・・。
(もし誤っている部分などあれば、ご指摘いただけると助かります。)

```py
# coding:utf-8

# 性別ごとに傾向を見る
x0 = df['Sex'][df['Survived'] == '0'].values
x1 = df['Sex'][df['Survived'] == '1'].values

trace0 = go.Histogram(x=x0, name = 'non')
trace1 = go.Histogram(x=x1, name = 'survive')

layout = go.Layout(bargap = 0.2, barmode = 'stack',xaxis = dict(title="Sex", dtick = 1))
fig = go.Figure(data=[trace0, trace1], layout=layout)

offline.iplot(fig)

```

![Unknown-5.png](https://qiita-image-store.s3.amazonaws.com/0/50110/b2c2077e-72ae-9e1d-dfaa-84454b1e8e07.png)
GitHubに先に登録されていたユーザー名を譲ってもらった話

:::note info
現在、ユーザー名を変更したい時はアカウント設定から可能となっています。
詳しくは、[GitHub ユーザ名の変更](https://docs.github.com/ja/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-user-account-settings/changing-your-github-username)を参照ください。
:::

GitHubでアカウント登録しようとした際に、ユーザー名の入力欄に```Username is already taken```という文字が…

自分が登録しようとしたユーザー名を持っているアカウントを見てみると、登録（2014年）以降まったく使われていませんでした（なぜ登録したのか…）

いろいろ調べてみると、GitHubには```Name Squatting Policy```というものがありました。

# Name Squatting Policy
このポリシーは、アカウント取得は基本早いものがちだが、非アクティブなアカウントについてはスタッフがアカウントを削除または他のユーザーに譲るということを示しています。

> Name Squatting Polycy
https://help.github.com/articles/name-squatting-policy/

# GitHubにコンタクト
そこで自分が使いたいユーザ名を譲ってもらえないかとGitHubにコンタクトをとってみました。

こんな感じでメッセージを送ってみました。

```:Me
Hi,

I'm enquiring about whether username nisyuu can be released? The user who has registered that username doesn't look to have any activity.

Would just like to know whether this would possible.

Regards,
nisyuu
```

次の日に返信が来ました。

```:GitHub

Hi nisyuu, 

Thanks for getting in touch.

You are in luck — we have classified the nisyuu account as dormant, as outlined in our Name Squatting Policy:

https://help.github.com/articles/name-squatting-policy 

We typically would release the username back into the public for you to claim; however, this may be a potentially popular username. I'd be happy to make the switch for you on our end to avoid anyone else jumping in and taking it!

Let me know which account you'd like to rename to nisyuu, and we'll get that taken care of for you. If you don't have an account yet, let me know once you sign up with a temporary username.

Best,
Robin 
```
GitHubが定めているポリシーに則りアカウントを譲ることが出来ますが、このまま解放してしまうと他のユーザーに運悪く登録されてしまう可能性もあるため、アカウントを持っていないなら一時的に仮のアカウントを作って知らせてくださいとのこと。

早速作成し返信。

```:Me
Hello Robin,

Thanks for your reply.

I made the nisyuu2 account (https://github.com/nisyuu2) because I did not have an account.
I am looking forward to hearing from you.

Truly yours,
nsyuu
```

GitHub側でユーザー名の変更をやってくれました!
ありがとうGitHub!!

```:GitHub

Hi nisyuu,

Thank you for confirming! I have changed nisyuu2 to nisyuu, so this should be all set.

Please let us know if you have any questions, or if we can help with anything else at the moment.

Cheers, 
Jack
```

無事に希望通りのユーザー名で登録が出来ました。
IntteliJ - Git接続

#__PC環境__
- OS: Windows 10 Pro
- IntelliJ IDEA: 2017.2.6
- Git: 2.14.1

###__1.改行コードの設定__
- CTRL+ALT+SでSettingsを表示する。
- 左ペインよりEditor／Code Styleを選択する。
- 右ペインのLine separatorにUnix and OSXを設定する。
- Applyボタンを押す。

###__2.マスターパスワードの設定__
- CTRL+ALT+SでSettingsを表示する。
- 左ペインよりAppearance & Behavior／System Settings／Passwordsを選択する。
- 右ペインでMaster Passwordを設定する。
- Applyボタンを押す。

###__3.Gitプラグインの確認__
- CTRL+ALT+SでSettingsを表示する。
- 左ペインよりPluginsを選択する。
- 右ペインでGit IntegrationとGiｔHubがONになっていることを確認する。
- Applyボタンを押す。

###__4.Gitアクセストークンの設定__
- CTRL+ALT+SでSettingsを表示する。
- 左ペインよりVersion Control／GitHubを選択する。
- 右ペインでAuthTypeでTokenを選択してCreate API Tokenを押す。
- ログインダイアログが表示されたらユーザIDとパスワードを入力しLoginを押す。
- ダイアログが閉じてTokenが設定されたらTestを押す。
  - Successのダイアログが表示されることを確認する。 
- Applyボタンを押す。

###__5.Git設定の確認__
- CTRL+ALT+SでSettingsを表示する。
- 左ペインよりVersion Control／Gitを選択する。
- 右ペインのPath to Git executableにgit.exeのパスが設定されていることを確認する。
- Testボタンを押しSuccessのダイアログが表示されることを確認する。
- Applyボタンを押す。

#__2.リモートリポジトリ作成__
- GitHubでプロジェクト名と同じ名前のリポジトリを作成する。

#__3.プロジェクト設定～Pushまで__
###__1.バージョン管理を有効にする。__
- メニューVCSよりEnable Version Control Intgrationを選択する。
- 表示されたダイアログでGitを選択しOKボタンを押す。

###__2.Git Configの修正___
- プロジェクトルート／.git/configを開く
- [core]セクションに「autocrlf = False」を追加する。

###__3.Remoteアドレスの追加__
- メニュー「VCS」の「Git／Remote」を選択する。
- 表示されたダイアログの＋を押して２で追加したリポジトリのURLを登録する。

###__4.コミット＆プッシュ__
- プロジェクト名を右リックしてコンテキストメニューを表示し、Git／Commit Directoryを選択する。
- 表示されたダイアログにコミットメッセージを入力しCommitボタンを押す。
- メニュー「VCS」の「Git／Push」を選択する。
- 表示されたダイアログのPushボタンを押す。

#__参考__
[IntelliJ IDEAとGitHubを連携するときの設定メモ](https://qiita.com/rubytomato@github/items/b2ca27712146ed6f1426#gitgithub%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E7%A2%BA%E8%AA%8D)
Objective-Cで書いたCustomViewをStoryboardで指定するとunrecognized selector sent to instanceになる問題の解決方法

# 概要

言葉で書くとわかりづらいのですが、Objective-Cで書かれたCustomViewをStoryboardで指定して、IBOutlet等でSwiftのViewControllerにて参照しようとすると`unrecognized selector sent to instance`となる現象が発生しました。
その時の対処方法を記載します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/56178/5c17598b-68be-adf7-3e5a-0d2ddb0b22cc.png)


# 結論

**Inherit Module From Target**にチェックを入れない
![image.png](https://qiita-image-store.s3.amazonaws.com/0/56178/a4a6932b-6b61-5849-0445-aaf36c9daaf3.png)

| クラッシュする | クラッシュしない |
|:---:|:---:|
|![スクリーンショット 2018-03-14 0.51.38.png](https://qiita-image-store.s3.amazonaws.com/0/56178/2b148300-86bb-81d7-9401-737f3d0875be.png) |![スクリーンショット 2018-03-14 0.52.22.png](https://qiita-image-store.s3.amazonaws.com/0/56178/3c2f2d33-7de6-2de4-163b-1cbde522f7af.png)|

# 補足

再現用のプロジェクトを[https://github.com/TakkuMattsu/UseObjcCustomViewFromSwiftCrashSample](https://github.com/TakkuMattsu/UseObjcCustomViewFromSwiftCrashSample)にあげました。

masterブランチが落ちる状態になっています。
ちなみに同じCustomViewをSwiftで書いたものはチェックが入っても、入っていなくても落ちることはありませんでした。
(custom_swift_viewブランチにSwift版のコードが入っています)

# 考察

落ちた時のエラーログを見ると

```
UseObjcCustomViewFromSwift[10176:3025863] Unknown class _TtC26UseObjcCustomViewFromSwift14CustomObjcView in Interface Builder file.
UseObjcCustomViewFromSwift[10176:3025863] -[UIView setDelegate:]: unrecognized selector sent to instance 0x14bd01520
```

となっており、本来はCustomObjcViewのdelegateにアクセスするはずのところが、UIViewのsetDelegateにアクセスしようとして`unrecognized selector sent to instance`となっています:thinking: 

**追記**

会社の人に**Define Module**を有効にすれば治るんじゃね？と言われやってみましたがダメでした。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/56178/f35c3169-8ade-9906-8f7b-55bd52dd4d4a.png)


**Inherit Module From Target**が実際何をやっているのかわかっておらずどうして問題が解決したのかわかっていません:cry:
.zshrc や .tmux.conf などをGitHubで管理している時のインストールスクリプト

`.zshrc` などの設定ファイルをGitHubで管理している人は多いと思う。けれども複数PC間で使うために、リポジトリをcloneした後に手動でファイルをホームディレクトリに移動させたり、シンボリックリンクを張るのは面倒だ。シェルスクリプトでやってしまおう。

```install.sh
# リポジトリがあるpath
DOTFILES=$(cd $(dirname $0); pwd)
# バックアップ用のタイムスタンプ
now=$(date '+%Y%m%d%H%M%S')

cd ~/

function copy_file() {
　# すでにファイルが存在する場合はバックアップを作る
  if [[ -e $1 ]]; then
    # .zshrc_20180314010755 のような名前でバックアップをとる
    mv $1 $1_$now
  fi
  # シンボリックリンクを張る
  ln -fs $DOTFILES/$1
}

# 引数にリンクを張りたいファイル名を与えてあげる
copy_file '.gitconfig'
copy_file '.zshrc'
```

O K 💃
root での SSH リモートログインを禁止し、一般ユーザでの公開鍵認証のみ許可する

VPS への Ubuntu Server インストール時にユーザを作成しなかったため、SSH 接続時のログインユーザとして試しに root を使ってみたらログインできてしまった。
外部から root ユーザでログインされてしまうと大変危険なので、sshd の設定を変更し、root でリモートログインできないようにする。

また、パスワードが平文で流れるのを防ぐため、パスワード認証を不可にし、公開鍵認証のみ許可するようにする。

# 作業内容

# 1. root ユーザでのリモートログインを禁止する
## 一般ユーザの作成（SSH ログイン時に使用）
例として foo ユーザを作成する。

```console
# adduser foo
Adding user `foo' ...
Adding new group `foo' (1000) ...
Adding new user `foo' (1000) with group `foo' ...
Creating home directory `/home/foo' ...
Copying files from `/etc/skel' ...
Enter new UNIX password:
Retype new UNIX password:
passwd: password updated successfully
Changing the user information for foo
Enter the new value, or press ENTER for the default
Full Name []:
Room Number []:
Work Phone []:
Home Phone []:
Other []:
Is the information correct? [Y/n] y
```

foo ユーザが sudo を使えるようにする。

```console
# gpasswd -a foo sudo
Adding user foo to group sudo
```

一旦ログアウトし、foo ユーザで SSH ログイン可能であることを確認。

```console
$ ssh foo@example.com
foo@example.com's password: 
Welcome to Ubuntu 16.04.4 LTS (GNU/Linux 4.4.0-21-generic x86_64)
...
```

## sshd の設定変更
設定ファイルのバックアップをとる。

```console
# cp -p /etc/ssh/sshd_config /etc/ssh/sshd_config.org
```

/etc/ssh/sshd_config を開き、PermitRootLogin を no にする。

```conf:/etc/ssh/sshd_config
PermitRootLogin no
```

`sshd -t`で構文チェック後、設定を反映する。

```
# /etc/init.d/ssh restart
[ ok ] Restarting ssh (via systemctl): ssh.service.
```

root ユーザで SSH 接続しようとしてもエラーとなることを確認。

```console
$ ssh root@example.com
root@example.com's password: 
Permission denied, please try again.
```

# 2 SSH 公開鍵認証設定
## 鍵の生成
クライアント側で SSH の秘密鍵と公開鍵を生成する。

```console
$ ssh-keygen -t rsa
```

## .ssh フォルダの作成
サーバのログインユーザのホームディレクトリに .ssh フォルダを作成する。

```console
$ mkdir ~/.ssh
$ chmod 700 ~/.ssh
```

## SSH 公開鍵の登録
クライアントからサーバへ SSH 公開鍵を転送する。

```console
$ scp ~/.ssh/id_rsa.pub foo@example.com:~/.ssh/authorized_keys
```

転送した公開鍵のパーミッションを変更しておく。

```console
$ chmod 600 ~/.ssh/authorized_keys
```

## パスワード認証の禁止設定
/etc/ssh/sshd_config を開き、PasswordAuthentication を no にする。

```conf:/etc/ssh/sshd_config
PasswordAuthentication no
```

設定を反映する。

```console
# /etc/init.d/ssh restart
```

## 設定確認

新しいシェルで SSH 接続し、公開鍵認証が有効であることを確認。

```console
$ ssh foo@example.com
Enter passphrase for key '/Users/foobar/.ssh/id_rsa': 
Welcome to Ubuntu 16.04.4 LTS (GNU/Linux 4.4.0-21-generic x86_64)
...
```

パスワード認証が使えず、公開鍵認証を強制されることを確認。

```console
$ ssh bar@example.com
bar@example.com: Permission denied (publickey).
```

これで秘密鍵を持たないクライアントからの SSH 接続は不可となった。

万が一 PC が壊れた等で秘密鍵を紛失し、SSH ログインできなくなってしまっても、VPS を使用しているなら通常コンソールからパスワードでログインできるので、SSH パスワード認証を無効にしても問題ないと思う。

# その他
SSH のポート番号を変更すれば、もう少し攻撃に強くなるかもしれない。
ポート監視をして想定以上に攻撃があれば対応するかも。

（3/16追記）
いくつかのサイトに「22番ポートはブルートフォース攻撃を受けやすいのでポート番号を変えるべき」という記載があったので、ポート番号を変えました。

# 参考サイト
[ubuntu ユーザを追加して sudo 権限をつける](https://qiita.com/white_aspara25/items/c1b9d02310b4731bfbaa)
[rootでのSSHログインを禁止 - SSHサーバーの設定](https://webkaru.net/linux/ssh-prohibit-root-login/)
[公開鍵暗号を用いてのSSH接続（きほん）](https://qiita.com/mukoya/items/f20def019e25dc162ca8)
環境変数、シェル変数の動きメモ

# 変数の設定
最初、シェル変数、環境変数の定義はない

```console
# echo $TEST_ENV

# env | grep TEST_ENV
# printenv | grep TEST_ENV
# export -p | grep TEST_ENV
# set | grep TEST_ENV
# set | grep TEST_ENV
```

シェル変数 TEST_ENV を設定

```console
# TEST_ENV='test'
```

シェル内で定義した変数の値は echo で表示できる。シェル変数、環境変数を両方表示する set でも表示できる。

```console
# echo $TEST_ENV
test
# set | grep TEST_ENV
TEST_ENV=test
```

環境変数を表示するenv、printenv、export -p では表示されない

```console
# env | grep TEST_ENV
# printenv | grep TEST_ENV
# export -p | grep TEST_ENV
```

環境変数に設定

```console
# export TEST_ENV='test'
```

環境変数を表示する export -p env printenv で表示。echo set　でももちろん表示。

```console
# export -p | grep TEST_ENV
declare -x TEST_ENV="test"
# env | grep TEST_ENV
TEST_ENV=test
# printenv | grep TEST_ENV
TEST_ENV=test
# echo $TEST_ENV
test
# set | grep TEST_ENV
TEST_ENV=test
```

env コマンドの中で実行して変数定義。
env は env を呼びだしたシェルのシェル変数として定義する。 
env を呼びだしたシェルの中で変数 TEST_ENV が上書きされている。
環境変数は変わらない。

```console
# env TEST_ENV='test2' | grep TEST_ENV
TEST_ENV=test2
# env | grep TEST_ENV
TEST_ENV=test
# set | grep TEST_ENV
TEST_ENV=test
# printenv | grep TEST_ENV
TEST_ENV=test
# echo $TEST_ENV
test
```


環境変数の削除

```console
# export -n TEST_ENV
```

環境変数は表示されない。

```console
# export -p | grep TEST_ENV
# env | grep TEST_ENV
# printenv | grep TEST_ENV
```

シェル変数は export -p で削除されないので表示できる。

```console
# echo $TEST_ENV
test
# set | grep TEST_ENV
TEST_ENV=test
```

シェル変数の削除

```console
# unset TEST_ENV
```

シェル変数は表示されない

```console
# echo $TEST_ENV
# set | grep TEST_ENV
```

# シェル変数の上書き。
シェル変数を設定し、同じ変数名の環境変数に別の値を設定。

```console
# TEST_ENV='test'
# echo $TEST_ENV 
test
# export TEST_ENV='test2'
# export -p | grep TEST_ENV
declare -x TEST_ENV="test2"
```

シェル変数が上書きされている。
export の引数　TEST_ENV='test2'　でシェル変数が上書きされているため。

```console
# echo $TEST_ENV 
test2
# set | grep TEST_ENV
TEST_ENV=test2
```

環境変数を削除しても上書きされたシェル変数は残る。

```console
# export -n TEST_ENV
# export -p | grep TEST_ENV
# echo $TEST_ENV 
test2
```

下のコマンドでは　TEST_ENV　が上書きされない時とされる時がある。
パイプ処理で区切ったコマンドは子プロセスとして呼び出されているため、export は子プロセスのシェル変数を定義している？

```console
# export TEST_ENV='test2' | export -p | grep TEST_ENV
declare -x TEST_ENV="test"
# export TEST_ENV='test2'
# export -p | grep TEST_ENV
declare -x TEST_ENV="test2"
```

参考
http://linux.just4fun.biz/?%E9%80%86%E5%BC%95%E3%81%8DUNIX%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89/%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%AE%E7%A2%BA%E8%AA%8D%28env%2C%20printenv%E3%81%AE%E9%81%95%E3%81%84%29

https://webkaru.net/linux/export-command/
なぜ「２の補数」を使うのか

# 概要
- なぜ２の補数を使うのか．何のために使うのか．
-> 減算器を不要にして，**加算器だけで済む**ようにするため
- なぜ２の補数による加算が減算の代わりになるのか
-> 有限の桁数しか保存できないメモリでは，
  **「AからBを引く」のと「AからBの２の補数を足す」のは同じ結果**になるから．

# ２の補数が使われるのはなぜ？
## ハードウェアが簡単に
2の補数を用いることで，減算を加算器を用いて行えるようになるので減算器が不要になり，
ハードウェア（回路）を簡単にできます．

（より詳細な説明は「[コンピュータの構成と設計　下](https://www.amazon.co.jp/dp/429607010X/)」の「付録B　論理設計の基礎」中の「B.6 加算の高速化：桁上げの先見」に書いてありました．これが結構面白いです．）

### 減算を加算器を用いて行うとはどういうことか
10進数で考えてみましょう．
8-5 という減算を加算で行おうとすると，負の数という定義を導入し，
8 + (-5)
とすることで加算に変えることができます．
言い換えると，一桁同士の引き算の表が無くても，
負の数を含めた一桁同士の足し算の表があれば済むということです．
よって，減算器が無くても減算をすることができます（超簡単化しています）．

2進数に話を戻しますと，「負の数という定義を導入し，」の部分を「2の補数という定義を導入し，」とすることで減算を加算器を用いて行うことを可能にしているのです．

この，「負の数 $\approx$ 2の補数」という感覚は重要なので念頭に置いて以下を読んでもらえると，理解の助けになると思います．

## 「反転」して「1を足す」のはなぜ？

２の補数（反転して1を足した数）が負の数の代わりになる理由についてです．

### ２の補数の計算方法
ビットを反転させ，反転した2進数に1を足せば，２の補数は求まります．
例えば，0110の２の補数は

```math
\begin{align*}
0110&→1001 \qquad (反転) \\
&→1010 \qquad (1を足す)
\end{align*}
```
という流れで，1010と求まります．
なぜでこのように２の補数を定義するのでしょうか？

### ２の補数の定義の背景
まず，ある二進数で表された値A（N桁）を考えます．当然ですが

```math
A + (Aを反転した値）＝ 111...11
```
がどのようなAでも成り立ちます．先ほどの例で試すと，0110+1001=1111です．
そして，両辺に1を足すと，

```math
A + (Aを反転した値)+1 = 1000...00 \\
\Leftrightarrow A + (Aの2の補数)= 1000...00
```
となります．これを$\pmod {2^N}$で考えると，右辺の先頭の1はN+1桁目なので消えて

```math
A + (Aの2の補数) \equiv 0  \pmod {2^N}
```
となります．
$\pmod {2^N}$の意味が分からなければ，ここでは「1~N桁目だけを見てそれ以上の桁は無視する事」であると考えてください．
これを変形すると，

```math
(Aの2の補数) \equiv -A \pmod {2^N}
```
になります．この式から「**Aの２の補数**と**-A**は法$2^N$に関して合同である」とわかります！
言い換えると，「1~N桁目だけを見る限りでは，**Aの２の補数**と**-A**が同じである」ということです．
このことから，なんとなくAの２の補数 と -Aの関係が見えてきましたね！

### 「1~N桁目だけを見る」とは
「1~N桁目だけを見る限りでは同じ」という説明をしましたが，これは現実的にはどういうことに相当するのでしょうか．

今，4つだけ，0または1を保存できるメモリがあるとします．
このメモリで保存できる数の範囲は，0000 ~ 1111です．
11011のような5桁以上の数字は保存できず，先頭の1を無視して1011と保存するしかありません．
これはつまり「1~4桁目だけを見る」ということです．

以上のことから，「**Aの２の補数**と**-A**は法$2^N$に関して合同である」というのは，
「N桁しか保存できないメモリからすれば，**Aの２の補数**と**-A**は同じ」を意味しているとわかります．
始めに示した「負の数 $\approx$ 2の補数」ということが理解できたのではないでしょうか？

もし分かりにくい点があれば，コメントいただけるとありがたいです．

# まとめ
- 「２の補数」を使うのは，加算器だけを用意すればいいようにするため
- 減算を加算器で計算できるのは，負の数を導入して$ A - B = A + (-B) $となることからなんとなくわかる
- N桁しか保存できないメモリからすれば，２の補数と負の数は同じ
- 2の補数の「反転して1を足す」という計算は，$A + (Aを反転した値)+1 = 1000...00 \equiv 0  \pmod {2^N}$から

# 最後に

私は専門家ではないので，間違ってそうな部分があればお気軽にコメントいただけると嬉しいです．
private funcをテストしたいとき

Dictionaryから値を取得する、Arrayのn番目の値を取得して何かする、計算するなど
privateなfuncを使用することは多いですよね。

しかし、そのprivateなfuncはロジックであることが多いです。**つまりテストしたいですね**:innocent:
しかし、privateにするとTestから呼び出すことができないので、テストができません。

# privateなfunc
```swift
struct User {
	
	func save(dictionary: [String: String]) {
		guard let name = getname(from: dictionary) else {
			return
		}
		UserDefaults.standard.set(name, forKey: "key")
	}
	
	private func getName(from dictionary: [String: String]) -> String? {
		return dictionary["name"]
	}
	
}
```
例えば、このような例ですね。
外からは`save()`を呼べればよい。そして、`getName()`はテストしたい。

# インナークラスに隠す
インナークラスを作成して、そこにprivateなfuncを定義します
## privateなfuncのprotocolを作る
```swift
protocol UserPrivateProtocol {
	static func getName(from dictionary: [String: String]) -> String?
}

extension UserPrivateProtocol {

	static func getName(from dictionary: [String: String]) -> String? {
		return dictionary["name"]
	}

}
```
まずは、privateにしたいfuncをprotocolに実装します。
このprotocolはinternalなので準拠したクラスを作れば、`getName()`は使えてしまうのですが、それは目をつむります笑

## インナークラスをprotocolに準拠させる
```swift
struct User {

	private struct Private: UserPrivateProtocol {
	}
	
	func save(dictionary: [String: String]) {
		guard let name = Private.getName(from: dictionary) else {
			return
		}
		UserDefaults.standard.set(name, forKey: "key")
	}

}
```

インナークラスをprivateにすることで外から触ることができなくなります。
しかし、User内ではちゃんと使えます。

## Testする
```swift
let dictionary = ["name": "tarou"]

struct UserPrivateMock: UserPrivateProtocol {
	
}

XCTAssertEqual(dictionary["name"], UserPrivateMock.getName(from: dictionary))
```
テストするときは、privateなfunc用に作ったprotocolに準拠したMockクラスを作成します。
そのMockクラスを使用することでテストが可能になります。
## 課題
protocolのdefault実装を利用して、Mockを作ってテストするのですが、`getName()`の実装がdefaultのままという前提のテストになってしまいます。

# インナークラス内にprivateにしたいfuncを定義

## インナークラス作成
```swift
struct User {

	struct Private {
		static func getName(from dictionary: [String: String]) -> String? {
			return dictionary["name"]
		}
	}
	
	func save(dictionary: [String: String]) {
		guard let name = Private.getName(from: dictionary) else {
			return
		}
		UserDefaults.standard.set(name, forKey: "key")
	}

}
```
インナークラスにprivateにしたいfuncを定義します。
`User.Private.getName()`でアクセスできてしまうのですが、それは目をつむりましょう笑
## Test
```swift
let dictionary = ["name": "tarou"]

XCTAssertEqual(dictionary["name"], User.Private.getName(from: dictionary))
```
これでテストができます。

# まとめ
2つの方法を思いついたので書きましたが、特に問題がないならinternalで定義するのが簡単で良いと思います:relaxed:
[Ionic] Service Proxies を使うプロジェクトをネイティブビルドするとHTTPリクエストが動作しない問題

__環境__

* Ionic 3.19.1

---

WebApp等から別ドメインのAPIを直接叩くと、CORS制約に引っかかってリソースを取得できないことがあります。
Ionicでは、Service Proxiesを設定することで、このCORS制約を回避することができます。

Ionicの素振りとして[GitHub Event Watcher](https://github-event-watcher.netlify.com/#/activity)というWebAppを作ったのですが、このアプリ内では GitHub のユーザーイベントを取得するAPIを叩く際にService Proxiesを使用しています。
プロキシの設定は以下です。

```json:ionic.config.json
  ...
  "proxies": [
    {
      "path": "/github",
      "proxyUrl": "https://api.github.com"
    }
  ]
  ...
```

また、APIを叩くコードはこんな感じです。

```typescript:src/providers/events/events.js
  ...
  constructor(
    public http: HttpClient,
  ) {
  }
  ...
  getEvents(username: string): Observable<Object> {
    const url = `users/${username}/events`;
    return this.http.get(`/github/${url}`);
  }
  ...
```

---

しかし、CORSはWebアプリ上の制約であり、ネイティブアプリには関係ありません。

`Cordova`でビルドしたネイティブアプリからだと、このコードではリクエストを送信できません。
`proxies`の設定が無視され、そのまま`/github/users/${username}/events`にリクエストを飛ばしてしまいます。

解決策として、Web/PWAとネイティブで処理を分けます。

```typescript:src/providers/events/events.js
  ...
  constructor(
    public http: HttpClient,
    public platform: Platform,
  ) {
  }
  ...
  getEvents(username: string): Observable<Object> {
    let url = `/users/${username}/events`;

    if (this.platform.is('mobile')) {
      url = `https://api.github.com/${url}`;
    } else {
      url = `/github/${url}`
    }

    return this.http.get(url);
  }
  ...
```

これでネイティブの場合は普通に元のURLを叩きに行くようになります。

---

このように、プラットフォームに依存した処理を書く場合はIonicのPlatform APIを使います。
Platform APIで判定できるプラットフォームの一覧は以下に載っています。

[Platform - Ionic API Documentation - Ionic Framework](https://ionicframework.com/docs/3.0.1/api/platform/Platform/#is)
Nuxt.js+expressでsequelizeを使いたい

#何したいの？
https://github.com/nuxt-community/express-template
こちらのNuxt.js公式テンプレートを使って開発中の出来事になります。
MySQLに接続するためにサーバーサイドにSequelizeを導入したのですが、
いざ```npm run dev```すると

```
Error: Cannot find module '/home/User/Project-Name/build/server/models/user.js'
```

というエラーが。
buildフォルダにはjsファイルとソースマップだけ。
あれぇ？

#原因を探ろう
Nuxt.jsは元からwebpackによるJSファイルのバンドル機能が組み込まれています。
requireやimport文が一行でも書かれていれば見逃すことなく1ファイルにまとめてくれるすごい奴のはずなんですが。

##sequelizeのソースを眺める

```javascript:server/models/index.js

'use strict';
require('dotenv').config();

var fs        = require('fs');
var path      = require('path');
var Sequelize = require('sequelize');
var basename  = path.basename(__filename);
var env       = process.env.NODE_ENV || 'development';
var config    = require(__dirname + '/../config/config.json')[env];
var db        = {};

if (config.use_env_variable) {
    console.log(process.env[config.use_env_variable]);
  var sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
  var sequelize = new Sequelize(config.database, config.username, config.password, config);
}

fs
  .readdirSync(__dirname)
  .filter(file => {
    return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js');
  })
  .forEach(file => {
    var model = sequelize['import'](path.join(__dirname, file)); // <-- モデル読み込みはここ！
    db[model.name] = model;
  });

Object.keys(db).forEach(modelName => {
  if (db[modelName].associate) {
    db[modelName].associate(db);
  }
});

db.sequelize = sequelize;
db.Sequelize = Sequelize;

module.exports = db;
```

```javascript:node_modules/sequelize/lib/sequelize.js
//382行目から

  import(path) {
    // is it a relative path?
    if (Path.normalize(path) !== Path.resolve(path)) {
      // make path relative to the caller
      const callerFilename = Utils.stack()[1].getFileName();
      const callerPath = Path.dirname(callerFilename);

      path = Path.resolve(callerPath, path);
    }

    if (!this.importCache[path]) {
      let defineCall = arguments.length > 1 ? arguments[1] : require(path);
      if (typeof defineCall === 'object') {
        // ES6 module compatibility
        defineCall = defineCall.default;
      }
      this.importCache[path] = defineCall(this, DataTypes);
    }

    return this.importCache[path];
  }
```
モデルを読み込む部分がパス文字列を引数として渡す形になっているようです。
ビルド前の```__dirname```とビルド後の```__dirname```が変わってしまうのでエラーが起きている感じですね。

#解決策
色々調べたのですが、webpack側でどうにかする方法はおそらく無いようです。
というわけで強引ですが、```copy-webpack-plugin```を使って、modelフォルダをbuildフォルダにコピーすることにします。

```javascript:backpack.config.js
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  webpack: (config, options, webpack) => {
    config.entry.main = './server/index.js'
    config.plugins = [
        new CopyWebpackPlugin([{from: './server/models/', to:'./server/models/'}], {ignore: ['index.js']})
    ]
    return config
  }
}
```
テンプレートで使われているのがbackpack.jsなので、webpackの場合は適宜読み替えてください。
fromとtoの文字列が同じですが、toはwebpack出力先のフォルダがルートになるためです。
実際は、fromが”ルートディレクトリ/server/models/”なのに対して、
toは”ルートディレクトリ/build/server/models/”となります。

#おわりに
もっとエレガントな解決法があったら何卒ご教授くださいませ…
Laravel5.1と5.6のプロジェクトを作る


仕事でLaravel5.1を触る機会があり、自習用に入れて見ました。

### 環境
xampp-win32-7.2.2

任意の場所で

```
$ composer create-project "laravel/laravel=5.1.*" appName
```

作ったディレクトリに移動してバージョンを確認

```
$ php artisan -V
```

ちなみにLaravelインストーラが入っていればこれで最新の5.6が入ります。

```
laravel new appName
```

参考
Laravel　バージョン指定インストール
http://pg-fan.com/2016/05/laravel%E3%80%80%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E6%8C%87%E5%AE%9A%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/amp/



Laravelをスタートしよう (2/5)
https://www.tuyano.com/index3?id=11526003&page=2
PHPでファイルアップロード時の注意点

自分同様の初心者（特に独学をされている方）の方々がはまりそうなので
忘れないように残しておこうと思います。

##何があったのか
page1から画像をアップし、page2で３MB以上ならNGとする判定を入れた状態としていたが
2MBの画像をアップしても所定のフォルダに格納されない・・・。

```HTML:page1
			<form method="post" action="pro_add_check.php" enctype="multipart/form-data">
				<p>画像を選んで下さい。</p><br />
				<input type="file" name="image" style="width:400px"><br />
				<br />
				<input type="button" onclick="history.back()" value="戻る">
				<input type="submit" value="OK">
			</form>
```


```php5:page2
	$pro_image=$_FILES['image'];

	if($pro_image['size'] > 0){
	    if($pro_image['size'] > 3000000){
	        print '画像のサイズが大きすぎます。';
	    }else{
	        move_uploaded_file($pro_image['tmp_name'], './image/'.$pro_image['name']);
	        print '<img src="./image/'.$pro_image['name'].'">';
	        print '<br/>';
	    }
	}
```
##原因
ソース側に問題がないか色々試してみたが、問題は発見できず、調べてみたところ、
php.iniのupload_max_filesizeの値でアップロードファイルの容量上限を設定していることが判明。
（自分の環境は２MBでした。）
この値を2M以上にしてやることで無事解決。

**※php.iniの値を変えた後はWebサーバの再起動を忘れずに・・・。**
iPhoneアプリ未経験者がSwift2 Xcode7で自分向開発手順１

写真編集アプリ開発から学ぶSwift2 Xcode7
１、ローカル写真リストアンドセレクトアプリの全体的イメージ
　　①写真サムネイルリストより選択した写真の拡大表示(以下は完成途中のイメージ）　　
![スクリーンショット 2018-03-14 3.22.36.png](https://qiita-image-store.s3.amazonaws.com/0/101462/7edebe2c-9ffa-0368-8964-ef9f2103eb9f.png)


　　②保存された写真を全検索してデータベース化
　　　・Sqlite3のローカルデータベースへ写真ごとのパスを保存
　　　・各写真からExifデータを元にデータベースへ更新
　　　・写真選択拡大表示と同時にコメント、キーワード等を
　　　　データベース化（下記の様な環境設定）
![スクリーンショット 2018-03-14 3.30.04.png](https://qiita-image-store.s3.amazonaws.com/0/101462/ea6849a5-28c9-332e-02e3-13cd73ae8bbf.png)

　　③ローカル写真検索処理
　　　・キーワード及び分類キーにより写真を整理し条件指定でリストアップ
　　　　以下Sqlite3データベースphotolist.dbとし設定処理

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let documentsPath = NSSearchPathForDirectoriesInDomains(.DocumentDirectory, .UserDomainMask, true)[0] as String
        
        let paths = NSSearchPathForDirectoriesInDomains(.DocumentDirectory,.UserDomainMask, true)
        let _pathx = NSURL(fileURLWithPath: paths[0]).URLByAppendingPathComponent("photolist.db").path
        let db = FMDatabase(path: _pathx)
        
        if db == true {
            print("already create data base")
        }else{
            print("create database")
        }
        
        db.open()
        
        ............省略
          
    }
Webから取得したデータでサービスを作ってみる(Part2)

JavaScriptで要ログインサイトのデータ収集サービスを作ってみるでデータ収集の機構を作ったので、それを用いたサイトを作ることにしました。(某音ゲーのスコアツールです。)

(作ったサイトはここになります)

#やることリスト
 - 取得したデータを管理するDBに入れる
 - DBに入れたデータを見せる
 - ユーザ登録・ログイン・ログアウトをしてユーザごとに管理する

# ユーザ登録
- ログイン済みユーザはログイン後のメインページに遷移させる
- ユーザ・パスワードを登録させる
    - パスワードはハッシュ化して登録(password_hashする)
    - 重複ユーザを許さない

```PHP:addUser.php
<?php
session_start();
// 既にログインしている場合にはメインページに遷移
if (isset($_SESSION['XXXX'])) {
    header('Location: ShowData.php');
    exit;
}

$error = '';
// ログインボタンが押されたら
if (isset($_POST['signUp'])) {
    // user欄確認
    if (empty($_POST['username'])) {
        $error = 'ユーザーIDが未入力です。';
    }else if (empty($_POST['password'])) {  //パスワード確認
        $error = 'パスワードが未入力です。';
    }
    // どっちも入っている場合
    if (!empty($_POST['username']) && !empty($_POST['password'])) {
        $username = $_POST['username'];
        $password = $_POST['password'];
        $OuterREF = intval($_POST['OuterREF']);
        $pdo = CreatePDO();
        try{
            //------- DB確認----------
            // 登録作業＋重複確認
            $res = SetUserData($pdo,$username,$password,$OuterREF);
            if($res == FALSE){
                $error = 'ユーザ名が重複しています';
            }else{
                $_SESSION['XXXX'] = $res;
                echo '<script>
                alert("登録が完了しました。");
                location.href="ShowData.php";
                </script>';
            }
        } catch(Exception $e){
            $error = $e->getMessage();
        }
    }
 }

// 登録+重複確認
function SetUserData($pdo,$userName,$password,$OuterREF){
    // 重複ユーザー名確認
    $SQL = '登録予定のユーザネームを含む件数のSQL';
    if($res = $pdo->query($SQL)){
        if($res->fetchColumn() > 0){
            // 同じ名前のユーザがいる
            return FALSE;
        }
    }
    // ユーザ数確認
    $SQL = 'SELECT COUNT(*) FROM  tableName';
    $allUser = 0;
    if($res = $pdo->query($SQL)){
        $allUser = $res->fetchColumn();
    }


    // ユーザ登録
    $stmt = $pdo->prepare('登録SQL');
    $stmt->bindParam(':UserName', $userName, PDO::PARAM_STR);
    // パスワードをハッシュ化して登録
    $stmt->bindParam(':pass',password_hash($password, PASSWORD_DEFAULT) , PDO::PARAM_STR);
    $stmt->execute();

    // UserID返却
    return sprintf('MSC%04d',$allUser);
}
?>
<!-- HTML省略(自身にPOSTするようなフォーム) -->
```

#　次回
ログイン関連書きます
使ってますか？ パラメータストア

# こんにちは

Emotion Techの子安です。

最近使っているもの： Docker / Rails / Python / Digdag

![Emotion_Tech_logo_yoko.small.png](https://qiita-image-store.s3.amazonaws.com/0/169518/ae2059bd-2f12-9545-b1a2-e438cb177071.png)

----

# 今日のお話

AWS System Manager パラメータストアは、シンプルながらコンテナでもファンクションでも活用できるサービスです。そんなパラメータストアの概要と、手間味噌ですが少し便利に使うためのライブラリについてお話しします。

----

# ある日の○○支部の懇親会
私： 「環境変数をタスク定義ごとに展開するのが面倒くさいですよねー」
中の人： 「パラメータストア使ったらどうですか」
私： 「ふむふむ！ （意訳： 何だっけそれ？？）」

----

# パラメータストアとは

一言で言えば、設定値を保管してくれる場所。

詳細はこちらに → [AWS Systems Manager パラメータストアとは](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/systems-manager-paramstore.html)

----

## パラメータの階層化

システム構成に合わせて階層化可能。

イメージ：

```
/FooSystem
    `-- /Production
            `-- /AppRole
                   `-- /DB_HOST='dbhost.prod.xxxx'
                   `-- /DB_USER='dbuser'
                   (...)
    `-- /Development
            `-- /AppRole
                   `-- /DB_HOST='dbhost.dev.xxxx'
                   `-- /DB_USER='dbuser'
                   (...)
```

----

## 階層化されたパラメータの利用

```bash
aws ssm get-parameters-by-path --path /FooSystem/Production/AppRole
```

```json
{
    "Parameters": [
        {
            "Name": "/FooSystem/Production/AppRole/DB_HOST",
            "Type": "String",
            "Value": "dbhost.prod.xxxx",
            "Version": 1
        },
        {
            "Name": "/FooSystem/Production/AppRole/DB_USER",
            "Type": "String",
            "Value": "dbuser",
            "Version": 1
        },
        { "...": "..." }
    ]
}
```

----

## ここまでのまとめ

パラメータストアを使うと、

**各コンポーネントが自身の役割を特定できる情報を知っていれば、その他の設定情報をコンポーネント自身で取得できる。**

先ほどの例だと、 `$SYSTEM_NAME`, `$ENV_NAME`, `$ROLE_NAME` といった情報を与えておけば、パラメータストアから具体的なDB接続情報を取得することができる。

----

# Pythonライブラリ aws-paramstore-py

pipでインストールできるライブラリを作った。

詳細はこちらに → [aws-paramstore-py](https://pypi.python.org/pypi/aws-paramstore-py)

----

## 実現したいことは何か

awscliやSDKの戻り値には、いろんな情報が含まれている。（特にパラメータ名も階層のトップからフルパスで入っている）

実際的なユースケースとしては、 **コンポーネントが利用するパラメータを、環境やらロールやらを意識しなくても取得できる** と嬉しい。

```
$SYSTEM_NAME --\
                   --------------    /--> $DB_HOST
$ENV_NAME ------->| パラメータストア |--
                   --------------    \--> $DB_USER
$ROLE_NAME ----/
```

----

## aws-paramstore-pyの使い方

インストール：

```bash
pip install aws-paramstore-py
```

```python
import aws_paramstore_py as paramstore

params = paramstore.get('FooSystem', 'Production', 'AppRole')

# { 'DB_HOST': 'dbhost.prod.xxxx',
#   'DB_USER': 'dbuser' }
```

----

## Bashでも


```bash
eval "$(aws-pspy 'FooSystem' 'Production' 'AppRole' --bash-export)"

# export DB_HOST='dbhost.prod.xxxx'
# export DB_USER='dbuser'
```

----

# まとめ

AWS System Manager パラメータストアを利用すると、（コンテナ・ファンクション問わず） **各コンポーネントが、自分自身の設定値を能動的に取得できる** ようになる。

aws-paramstore-py も是非お試しを。フィードバック歓迎！！

----

# ご清聴ありがとうございました。
gRPCとGraphQL

# はじめに
[gRPC](https://grpc.io/docs/guides/index.html)と[GraphQL](http://graphql.org/)をどう使い分けるかがわからず混乱していたので、軽く整理した。

# どう違うか
GraphQLはAPI用のクエリ言語で必要なデータを指定することで無駄な通信をしないようにすることができる。
一方でgRPCはProtocol bufferを用いてRPC(サーバー上のメソッドをあたかもクライアント側で呼んでいるかのように見せるもの)を実現している。
どちらも、サーバーに対してリクエストを出しレスポンスを受け取るという目的は一緒。
ただ、gRPCはGraphqlのように柔軟なクエリ（関数呼び出し）はない。
サービスという形でRPCの関数を呼び出し結果を得るが、その結果の形は固定。
また、[Mediumの記事](https://blog.datank.ai/graphql-grpc-part-1-54d92a109619)でも述べられている通り、gRPCは低レベル向き、GraphQLは高レベル向き。
なので、ウェブアプリを作るときには、フロント側がアクセスするAPIはGraphQLで、そのAPIが通信する別のAPIはgRPCで実装するみたいなことをすればいいっぽい。

ちなみに、[web-grpc](https://github.com/improbable-eng/grpc-web)なるものがあってフロント側でもgRPCを使えるようにはできる。ベストプラクティスはなんだろう。

# 補足
## gRPCとは
gRPCはGoogleが開発したRPC(Remote Procedure Control)のライブラリで、
Protocol Bufferとよばれるシリアライゼーションを用いてRPCを処理する。
Protocol BufferもGoogle生まれ。
RPCはサーバー上のコードをあたかもクライアント側にあるかのように、クライアントから呼び出せる仕組みである。

## GraphQL
APIのためのクエリ言語である。次の3つを特徴としている。

- 必要なものを必要な分だけ
  例えばJSONを返すようなRESTだと、返ってくるデータにはクライアント側では不要なものも含まれており、  
無駄な通信帯域を消費していた。GraphQLでは、クエリを用いて必要なデータのみを取ってくることができる。  
例えば以下のように特定の人の情報を返すようなREST APIがあったとする。  
もし仮にクライアント側では`id`, `firstname`, `lastname`しか必要ないとしても、  
APIがそういう仕様なので受け取って必要ないものは捨てる。  
あるいは、REST APIの仕様を変えて特定の条件下では`id`, `firstname`, `lastname`しか返さないようにする。  
要はREST APIは柔軟性にかける。

```json
{
   "person": {
     "id": 2,
     "age": 25,
     "firstname": "dora",
     "lastname": "emon"
     "phonenumber": [
       "080-xxx-yyyy",
       "090-zzz-xxxx"
     ]
   }
}
```

  GraphQLでは以下のようにクエリで必要なデータを簡単に指定できる。

  ```graphql
  {
    person {
      id
      firstname
      lastname
    }
  }
  ```  
  
- できるだけ多くのリソースを一回のリクエストで取得
  n + 1問題などのようにリクエスト回数をできるだけ減らすことができる。  例えば`/users/${id}`がユーザーIDが${id}のユーザー情報を返すとする。また、そのデータにははユーザーのフォロワーのID一覧がリストで含まれている。もしフォロワーの名前も取得するとなると、フォロワーの数(n)だけ`/users/${id}`にアクセスしないといけなくなり、通信のオーバーヘッドが大きくなってしまう。もちろん`/users/${id}`で返されるデータにフォロワーの詳細情報も含めることができる。**クライアントが必要としない(しなくなるかもしれない)無駄な情報とともに。**
 
- 1つのエンドポイントでAPIを提供

# 参考サイト
- [gRPC公式サイト](https://grpc.io/docs/guides/index.html)
- [GraphQL公式サイト](http://graphql.org/)
- [GraphQL & gRPC (Part 1)](https://blog.datank.ai/graphql-grpc-part-1-54d92a109619): Mediumの記事
PowerShellでCSV（TSV）ファイルの列を削除する

タブ区切りファイルの列を削除します。
Splitしているだけなのでカンマ区切りファイルにも対応できます。

```powershell
#対象のファイル
get-content("test.tsv")
a	b	c
a1	b1	c1
a2	b2	c2
a3	b3	c3
```

タブは[ \`t ]で指定
ちなみに、CRLFは[ \`r `n ]らしい 

```powershell
#タブで分割してみる
(get-content("test.tsv")).Split("`t")
a
b
c
a1
b1
c1
a2
b2
c2
a3
b3
c3
```

```powershell
#2列目（列b）を抜いてみる
for($i=0; $i -lt $csv.Length; $i++){$csv[$i].Split("`t")[0] + "`t" + $csv[$i].Split("`t")[2]}
a	c
a1	c1
a2	c2
a3	c3

```
```powershell
#ファイルに出力してみる
for($i=0; $i -lt $csv.Length; $i++){add-content -path new.tsv -value ($csv[$i].Split("`t")[0] + "`t" + $csv[$i].Split("`t")[2])}

```