OmniAICreator/Qiita-1.07M huggingface dataset:
「さくらのインターネット」のメール機能について

[macOS Serverの将来的な仕様変更](https://support.apple.com/ja-jp/HT208312)に備え、IMAPに対応し格安で使用できるレンタルサーバーを探す旅の途中で得た「さくらのインターネット」に関する知識を残しておこうと思います。

## 今回は「さくらのメールボックス」を試用
年額1,029円で使えるメールサーバー。容量10GB。
料金などの詳細は[公式ページ](https://www.sakura.ne.jp/mail/)へどうぞ。

## 落とし穴・その１
「さくらのメールボックス」でのディスク容量は10GB、ただし1アドレス毎の最大容量2GBまで。

公式ページには書かれていないため、アドレスを作る時に初めて知る制限ですね。

過去のメールを全てメールサーバに置いておきたいという個人的な用途には向いてないと思いました。

## 落とし穴・その２
設定例が役立たず

[iPhoneでの設定例](https://help.sakura.ad.jp/hc/ja/articles/206053932-iPhoneを利用する)には書かれているのに、[iPadでの設定例](https://help.sakura.ad.jp/hc/ja/articles/206056902-iPadを利用する)には書かれていない、「IMAPパス接頭辞」。

iPhoneでは「INBOX」を設定することになっているが、iPadの方にはそのような記載が一切ないためハマるポイントです。

設定してある場合としてない場合、それぞれのメールソフトで新規フォルダを作成した際に出来る位置が異なってしまいますし見に行くフォルダの位置も異なります。IMAPで使用したい場合には必ず「INBOX」を設定した方がよろしいかとー（他人事）

なお、[Thunderbirdでの設定例](https://help.sakura.ad.jp/hc/ja/articles/206054182-Mozilla-Thunderbird-を利用する)にも書かれてませんね。ここでもハマりましたので、設定方法を書き残しておきます。

アカウント管理画面から『詳細』を開き
　IMAPサーバディレクトリに INBOX
　個人名前空間に ”INBOX.”
　公開(共有)名前空間に ”shared.","#shared."
をそれぞれ設定することをおすすめします。

## 落とし穴・その３
自動的に作成されるフォルダ類
・受信ボックス
・下書き［Draft］
・送信済み［Sent］
・迷惑メール［spam］
・ゴミ箱［Trash］

前4つのフォルダは削除出来ますが、Trashだけはどうやっても削除出来ません。しかも時間が経つと削除したはずのフォルダが復活します。

Thunderbirdをお使いでしたら必要なフォルダだけを購読することが出来るのでそう困ることではないと思いますが、問題はiOSですね。Drafts、Sent Messages、Junk、Deleted Messagesといったフォルダで運用したがるので仕方なく許してしまうとフォルダが9個並んでしまい、フォルダ毎の購読設定が出来ないため非表示にも出来ない＆削除しても勝手に復活するという無間地獄...これで完璧に心折れました。残念ながら不採用です。

## 悪いところだけでは悪いので
SSL周りの仕様がいつのまにか変更された？んですかね？

先程の設定例ではSSL/TLSやSTARTTLSを使用しないよう指示されていましたが、実際にはそれぞれ

【IMAP】
ポート：993
接続の保護：SSL/TLS
認証方式：通常のパスワード認証
【SMTP】
ポート：587
接続の保護：STARTTLS
認証方式：暗号化されたパスワード認証

と設定することで使用できました。また、独自ドメインで使用する場合は暗号化が出来ないような記載→『※3 送受信サーバ名に「初期ドメイン(○○○.sakura.ne.jp)」を設定する事でご利用が可能です。』がありますが、実際には使用出来ましたのでご安心を。

## 最後に
上記はすべて2週間の試用期間中に気付いた仕様です。試用期間中でも質問には答えてもらえます。試用期間中であれば契約を取り消すことが出来るので、自分の必要としている機能や要件をしっかり確認してから本契約を結びましょう。

この投稿が同じ事で悩んだりハマっている方々の役に立つことを願います。
PHP + NetBeans + XDebug 動かないときに



## 切り分け（どのような症状か）

- [ブラウザが開かない](#browser_not_launch)
- [phpinfo(); に XDebug がない](#xdebug_not_loaded)
- [接続待ちのまま（１）](#connect_is_eternal_wait_1)
- [接続待ちのまま（２）](#connect_is_eternal_wait_2)

<a name="browser_not_launch"></a>

## ブラウザが開かない

「プロジェクトをデバッグ」をクリックしてデバッグ実行を開始してもブラウザすら開かないことがあります。

NetBeans のブラウザ設定を確認してください。Windows では「ツール > オプション > 一般 > Web ブラウザ」です。「＜デフォルトのシステム・ブラウザ＞」だと開かないことがありました。具体的なブラウザを設定してください。

<a name="xdebug_not_loaded"></a>

## phpinfo(); の結果で XDebug が表示されない

XDebug のバージョンと PHP のバージョンがあっているかを確認してください。

32bit、64bit の不一致はないかについても念のため確認してください。

<a name="connect_is_eternal_wait_1"></a>

## ブラウザは起動するが、ずっと接続を待っている（１）

NetBeans プロジェクトのプロパティで「実行構成 > 詳細 > パス・マッピング」の「サーバー・パス」と「プロジェクト・パス」がともに設定されていることを確認してください。

ここはまれに編集できないことがあります。その場合、以下のいずれかのファイルに設定があるのでテキストエディタで開いて直接編集します。

- ＜プロジェクトのルート＞\nbproject\project.properties
- ＜プロジェクトのルート＞\nbproject\private\private.properties

<a name="connect_is_eternal_wait_2"></a>

## ブラウザは起動するが、ずっと接続を待っている（２）

ファイアウォールの設定を確認してください。

受信の許可設定に NetBeans を指定するか、TCP のポート 9000 を指定します。php.ini の xdebug.remote_port で指定しているポート番号です。

## 最後に

XDebug の設定についての情報は良く見かけますが、トラブル対応についてまとめてみました。

全部自分が遭遇したトラブルです。
IllustratorとかのSVGのパスをUIBezierPathのコードに変換するツール作ってみた

#はじめに
iOS/macOS向けのアプリ開発でアイコンやボタンなど簡単な図形を描きたい場合に、UIBezierPathやNSBezierPathを使います。毎回パスを描く際に、紙に図を書いて頂点の相対距離などを計算して出していました。そこで、IllustratorなどのSVGのパスをそのままUIBezierPathにしてしまおうと思いました。
Google先生に質問してみると、すでに[目的を達成していそうなもの](https://swiftvg.mike-engel.com)がありました。が、全てのパス形式に対応していた様ではなかったので自分なりに作り直してみました。

#できたツール
http://svg-converter.kyomesuke.com/

<img width="500" alt="svg.png" src="https://qiita-image-store.s3.amazonaws.com/0/67153/57ccdef0-06da-3fb8-a6d7-7e4441374ef8.png">

上のテキストエリアにSVGのパスデータを貼り付け、目的の変換ボタンを押すことで下のテキストエリアにコードが生成されます。iOS開発の場合はUIBezierPathですが、macOSの場合はNSBezierPathなので、そこも対応してみました。

#補足
ドーナツ型などくり抜き型については別々にパスを描いてBezierPathのコードに手を加える必要があります。
また、大きさや位置を変更したい場合は`AffineTransform`を使う必要があります。
SVGをUIBezierPathにするライブラリが存在していますが、どうしてもベタ打ちで描きたいという方はどうぞ。
テスト初心者がブラックジャックを開発してみた

# はじめに
参考記事様
[プログラミング入門者からの卒業試験は『ブラックジャック』を開発すべし](https://qiita.com/hirossyi73/items/cf8648c31898216312e5)

オブジェクト指向を意識しつつ、テストをしっかり書く事を目的としてPython3で作成しました。
なお、オブジェクト指向での設計もテスト記述も初心者のため、温かい目でお願いします。

# 使用ツール
- python 3.5.5
- pytest 3.5.1

# コード
想定よりもコードが長くなってしまったのでgistに置きました。
[https://gist.github.com/yokoc1322/ebff7d2e677481481384c07ca75ca6ac](https://gist.github.com/yokoc1322/ebff7d2e677481481384c07ca75ca6ac)

# テスト内容
## カード
- 不正なスートが渡された時に例外を出す
- 不正なランクが渡された時に例外を出す
- ランクに応じたポイントを持つ

## デック
- 52枚のカードを持つ
- 有り得るカードを持つ(スペード、ハート、クラブ、ダイヤをそれぞれ1~13まで)
- カードの重複がない
- カードが引ける
- 0枚目を引こうとした時はNoneを返す
- **未実装** インスタンス作成後の並びはランダムである

## 手札
- カードが引ける
- 手札が0枚の時のポイントは0である
- 正しく計算できる
- 22を越えた時は-1を出す
- Aは1と11のどちらかの値を取り、手札の点数によって最適な値に成る
- カードの一覧としてスートとランクを取れる

## 人
- デック切れでカードが引けないとき、終了フラグ(isFinished)が立つ
- **未実装** カードの表示ができる

## プレイヤー（人を継承）
- 手札が22を超える場合、終了フラグが立つ
- **未実装** 引き続けるかの確認においてy/nで答えることができる

## コンピュータ（人を継承）
- 手札が17点以上のとき、終了フラグが立つ
- 手札が16点以下のとき、終了フラグは立たない
- **未実装** ゲーム中の手札表示は、一枚目を除いて＊で表示される

## ゲーム
勝敗判定のみ

- 一人目のプレイヤーの点数が最も高いとき、勝者は一人目のプレイヤーである
- 二人目のプレイヤーの点数が最も高いとき、勝者は二人目のプレイヤーである
- 一人目と二人目の点数が最も高いとき、勝者は両方のプレイヤーである
- どちらも22を越えた手札のとき、引き分けとなる

# 反省点
## 実コードについて
### ブラックジャックのルールを間違えた
ディーラー対プレイヤーではなく、プレイヤー同士のカードの点数勝負として実装を行ってしまいました。

### 各カードが数値を複数持てるという無駄な拡張
「Aは1と11のどちらか都合の良い数値を取れる」ルールを実装しました。
その際に何を思ったのか、すべてのカードが複数の値を取れるようにして、計算の際に21以下で最も高い数値を計算するメソッドを作成しました。
そのメソッドを再帰で呼び出すなど、非常にメンテナンスし辛くしてしまったので、まさに無駄な拡張でした。

### Hand(手札)クラスは必要だったのか？
内容としてはPersonクラスに統合できるとも考えました。
しかしその場合はPersonクラスが大きくなりすぎると思ったため、どちらが良かったのか未だわからずじまいです。

## テストコードについて
### テストのためだけにHandsの内部状態を変更するメソッドを作成した
HandsクラスはCardの配列をプライベートで持っています。
しかしテストの際にそのCardsを任意に変更したいと考えたため、そのテストのためだけにメソッドを追加しました。
非常に悪手だとは思っているのですが、他に方法がわからなかったという現状です。

内部状態を保持するクラスのテストの場合、どのようにテストするのがベストなのでしょうか。

### ランダムが関わる部分のテストが書けなかった
「デッキがシャッフルされている」部分のテストが書けませんでした。
シャッフル前の状態を覚えておいて、シャッフル後と比較するのがよかったのでしょうか。

### 標準入出力が関わる部分に対してテストが書けなかった
カードを引き続けるかどうか？の標準入力による判断や、手札の表示などについてテストが書けていません。 ~~大変そうだったので~~
標準入出力とロジック部分を分離しておけばよかったなと反省しています。

# 所感
今まで作成してきた物ではどのようにテストを書けばよいのかわからず、全くテストを書いてきませんでしたが、このような題材でテストを書けたのは非常に良い経験になったと思います。
ただ、テストについて調べれば調べるほど「こうしておけばよかった」が沢山出てくるので、圧倒的に経験値が足りないなと実感しました。
Google Apps Scriptを使って2つの2次元配列の差分を取得したい

# 概要
Google Apps Script (GAS)ではGoogle DocsやGoogle APIsなどで2次元配列が頻繁に使われています。このとき、2つの配列から差分の要素を必要とする場合があります。サンプルではこのような差分を取得します。

# サンプル
差分を取得するためのサンプル

~~~javascript
var ar1 = [
  ["a1", "b1", "c1"],
  ["a2", "b2", "c2"],
  ["a3", "b3", "c3"],
  ["a4", "b4", "c4"],
  ["a5", "b5", "c5"]
];
var ar2 = [
  ["a2", "b2", "c2"],
  ["a5", "b5", "c5"],
  ["a1", "b2", "c3"]
];

var res = ar1.filter(function(e){return ar2.filter(function(f){return e.toString() == f.toString()}).length == 0});

Logger.log(res) // [["a1","b1","c1"],["a3","b3","c3"],["a4","b4","c4"]]
~~~

ちなみに、スクリプトの``== 0``を``> 0``に変更すると重複した要素を取得することができます。

~~~javascript
var ar1 = [
  ["a1", "b1", "c1"],
  ["a2", "b2", "c2"],
  ["a3", "b3", "c3"],
  ["a4", "b4", "c4"],
  ["a5", "b5", "c5"]
];
var ar2 = [
  ["a2", "b2", "c2"],
  ["a5", "b5", "c5"],
  ["a1", "b2", "c3"]
];

var res = ar1.filter(function(e){return ar2.filter(function(f){return e.toString() == f.toString()}).length > 0});

Logger.log(res) // [["a2","b2","c2"],["a5","b5","c5"]]
~~~

[最近の測定](https://qiita.com/tanaike/items/1f45e75019b5976e897f)でGASのループ手法ではmap, filterが有効であることを知りましたので、早速取り入れてみました。
0.5pxのborder

Retinaディスプレイではborderに0.5pxを指定できるが、MacのChromeなどでは小数点単位での指定は無視されてしまう。
通常は下記で示されている様に、デバイスやブラウザに応じて表示を変える実装が良い。
[CSS retina hairline, the easy way](http://dieulot.net/css-retina-hairline)

それでもなんとか実装したい場合は、四方を囲む場合には適さないが、transformプロパティを使って実装できる。

```css
.hairlines::after {
  content: "";
  display: block;
  border-top: 1px solid #000;
  transform: scaleY(.5);
  transform-origin: 100% 0;
}
```

<p data-height="265" data-theme-id="light" data-slug-hash="odbbGv" data-default-tab="css,result" data-user="hal9188" data-embed-version="2" data-pen-title="half pixel border" class="codepen">See the Pen <a href="https://codepen.io/hal9188/pen/odbbGv/">half pixel border</a> by Haruumi Kondo (<a href="https://codepen.io/hal9188">@hal9188</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
F#'s cool FizzBuzz (^_^)b

# Summary

`F#`でいい感じの`FizzBuzz`ができた（ような気がする）

`F#`で`FizzBuzz`書いてみてと急に言われても安心

# Thanks
```
@haxe
@omanuke
@bleis
```

# Code
```fsharp
[
    ["fizz";"";""]
    ["buzz";"";"";"";""]
]
|> List.map ( fun l -> Seq.initInfinite( fun _ -> l ) |> Seq.concat )
|> function a::b::_ -> Seq.zip a b | _ -> failwith "invalid!"
|> Seq.mapi ( fun i (a,b) -> if a + b = "" then string i else a + b )
|> Seq.tail
|> Seq.take 100
|> Seq.iter stdout.WriteLine
```

結果

```
1
2
fizz
4
buzz
fizz
7
8
fizz
buzz
11
fizz
13
14
fizzbuzz
16
17
fizz
19
buzz
fizz
```

# Point
```
// いつか書く
```

# reference

[taediumの日記](http://d.hatena.ne.jp/taedium/20110102/p4)

[sudo rm -rf /](http://blog.adjust-work.com/1374/)

[fsharp掲示板](https://gitter.im/fsugjp/public?at=5aef223b00dc4888049c42fe)
Unityちゃんの見る方向をIKで変える方法

#Unityちゃんの見る方向をIKで変える方法

オブジェクトの見る方向を変えるには一般的にTransform.LookAtを使いますが、今回はIKでもっと自然に見る方向を変えていきます。

#Unityちゃんにアニメーションを付ける

Hierarchy内のUnityちゃんにAnimatorコンポーネントを付け、ControllerにAnimatorを配置します。（今回はUnityChanActionCheckが入っています）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250267/6d87d922-806f-bee4-b4aa-f801f13ba582.png)

今、UnityChanActionCheckの中身（ダブルクリックで確認）はこの様になっています。これでUnityちゃんのアニメーション自体が実行されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250267/4dd2f3b9-6623-ad82-b6c4-3cccb6bb467c.png)


#UnityちゃんにIKをつける
Animatorの左側にあるBaseLayerに注目してください。そこに歯車ボタンがあります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250267/efd95b85-5aa2-cc54-3153-41ba7af2e139.png)
それを押してIKPassにチェックを入れてください。これでIKが使えるようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250267/6ce6a10a-9850-b35c-e66e-160b37306a41.png)

#スクリプトを作る
今回はUnityちゃんがカメラの方向に向くようにします。


```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class afternoonUnitychanMotion : MonoBehaviour {

	Animator animator;
	Vector3 LookPos;


	void Start () {
		//Animatorコンポーネントを取得
		this.animator = GetComponent<Animator> ();
		//Mainカメラの方向を見るようにする準備
		this.LookPos = Camera.main.transform.position;
		}


	private void OnAnimatorIK (int layerIndex)
	{
		//どの部位がどのくらい見るかを決める
		this.animator.SetLookAtWeight (1.0f, 0.0f, 1.0f, 0.0f, 0f);
		//どこを見るか（今回はカメラの位置）
		this.animator.SetLookAtPosition (this.LookPos);
	}
}
```

【引数の意味】
SetLookAtWeight（全体の重み,身体を動かす重み,頭を動かす重み,目を動かす重み,モーションの制限量)


このスクリプトをUnityちゃんにアタッチして完成です！お疲れ様でした。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/250267/f2a9fd2e-e21a-5fa0-f7b4-4dc0a440849b.png)
UE4でP4Vを使ってみた(随時更新)

慣れないことばかりだったので、基本操作とか痒い所をまとめてみます。

#Perforceの仕組み
**ファイルは全てサーバ上にしかありません。**
ファイル取得、ファイルの巻き戻し、ファイルのチェックアウト（これから更新するというマーキング。これをしないと読み取り専用ファイルとなって更新不可能）、差分があるかの確認。

**全てサーバに問い合わせないとできません。**

これは、**アクセス過多などでサーバがアクセスしにくい状況になると、作業が出来ないことを意味**します。

#基本操作
## SVNで言うところのコミット
サブミットと言います。

## Blameを見たい
ワークスペースや検索結果などので該当ファイルを右クリックし、「タイムラップ・ビュー」を開く。

行ごとにいつのサブミットかが確認できる。

タイムラップビューは少し優れた点がある。ウィンドウ上部のシークバーを動かすと時系列毎のビューになる。どのタイミングでどのような変更点があったのかとても分かりやすい。

##間違ったサブミットメッセージを修正する
[履歴] -> [コンテキストメニュー] -> [サブミット済みチェンジリストを編集]

##コンフリクトした？

ファイルの項目を右クリック→衝突の解決
衝突件数が0件なら「マージ結果を承諾」で自動マージされる。
衝突件数が1件以上なら「マージツールを実行」して衝突解決します。
その後「マージ結果を承諾」を押して完了します（マージツールを変更していた場合）。

#痒い所まとめ
##マージツールを好きなものに変更する
1. [編集] -> [プリファレンス] -> [差分]
1. [編集] -> [プリファレンス] -> [マージ]

それぞれに設定を適用する。基本的にはexeのファイルパスを指定するだけ。
[WinMerge](https://qiita.com/search?q=WinMerge)であれば、ファイルパスを指定するだけでOK。
注意点として、[P4Merge](https://qiita.com/search?q=P4Merge)でなければ、衝突解決時に「承諾」を行わないと自動では反映されない。
Gatsby+firebaseで独自ドメインのHTTPSサイトを作る（その３ Gatsbyの設定）


# はじめに

（ほぼ）無料で静的サイトを簡単に作れたらいいなと常々おもっていました。
最近は環境などそろってきたのでやってみます。

+ [Gatsby+firebaseで独自ドメインのHTTPSサイトを作る（その１独自ドメインの取り方）](https://qiita.com/kei0425/items/91af9616dcaf4326c251)
+ [Gatsby+firebaseで独自ドメインのHTTPSサイトを作る（その２ Firebaseの設定）](https://qiita.com/kei0425/items/a7da8d263e8833f7e837)
+ [Gatsby+firebaseで独自ドメインのHTTPSサイトを作る（その３ Gatsbyの設定）](https://qiita.com/kei0425/items/d5e42d3217278b30004e) ← 今回はここ

今回は「Gatsbyの設定」です。

## 前提条件

+ Cloud9を使って作業
+ お名前.comにアカウントあり
+ Firebaseのアカウントあり

## Gatsbyのインストール

nodeのツールのため、npmでインストールします。

```sh
npm install -g gatsby
```

## Gatsbyプロジェクト作成

その２で作成したフォルダは利用せず、新しいフォルダにプロジェクトを作成します。
ブログのテンプレートを利用します。

```sh
cd ~/workspace
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
```

## Gatsby動作確認

動作確認を行います。

```sh
cd blog
gatsby develop -H $IP -p $PORT
```

上記実行後、以下が表示されるため、クリックします。

```
  Local:            http://0.0.0.0:8080/
```

うまく英語のブログが表示されたらOKです。

## ビルド

デプロイ用にビルドをします。

```sh
gatsby build
```

## デプロイ

firebaseのファイルを設定します。

その２で作成したファイル２本をコピーします。

```sh
cp ../gatsby-test/.firebaserc .
cp ../gatsby-test/firebase.json .
```

firebase.jsonを修正します。
publicを"./"から"public"に修正
rewriteを削除

```firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

デプロイします。

```sh
firebase deploy
```

以上で完成です！！

作成したドメインにアクセスしてみてください。


なお、gatsbyはこちらを参考にしました。

https://qiita.com/jaxx2104/items/5f28915355a85d36e38a
macOS High Sierra で速く操作すると IME 切り替えが行われない

macOS High Sierra で速く操作すると IME 切り替えが行われない問題で困っていたが、 https://blog.macfeeling.com/archives/24781 に書いてある通り

* 「前の入力ソースを選択」に Command + space を割り当て
* 「入力メニューの次のソースを選択」を無効にする

と直った。以前何かを参考に 「入力メニューの次のソースを選択」を使って切り替えていたが、どこかのタイミングでこの機能の動作が変わったのかも。
AE 親とリンクのエクスプレッション

#いつもの使い方
シェイプレイヤーを作成して、親となるレイヤー（ヌル）を作成して親とのリンクでヌルに設定してあげてました。
ただヌルの位置やスケール回転に関してはリンクされているのですが、透明度に関してはリンクされてないので
いつもはシェイプレイヤーの不透明度にエクスプレッションをこのように記述していました。

```js
thisComp.layer("ヌル 1").transform.opacity
```

![bandicam 2018-05-07 10-29-30-575.jpg](https://qiita-image-store.s3.amazonaws.com/0/178061/e8bb4e67-5ed0-5aba-e915-e45db57e1043.jpeg)

もちろんこれで間違ってはいません。が！！！

#もっとスマートに
親へのリンクにエクスプレッション言語に「parent」という物があります。

```js
parent.transform.opacity
```

結果は同じですが、ちょっとスマートになりましたね。

#親を変更した時または親を解除した場合は？

親の変更に関してはそのまま親のリンクの値になりますが
親リンクを解除したらエラーになります。

![bandicam 2018-05-07 10-36-08-115.jpg](https://qiita-image-store.s3.amazonaws.com/0/178061/8f2393b1-a398-a2ca-b2bd-45c3083ca791.jpeg)

もちろん親を参照していない結果ですね。

このエラーを回避する為にif文を使ってレイヤーに親がある場合と無い場合の指示をしてあげます。

```js
if (hasParent == true){
parent.transform.opacity
}
else{
value
}
```

もしレイヤーに親がある場合は親の不透明度
そうでなければ、シェイプレイヤーのバリューを使う感じです。

親がある場合の結果は
しっかりヌル（親）の不透明度50％の値を取ってくれています。

![bandicam 2018-05-07 10-43-14-740.jpg](https://qiita-image-store.s3.amazonaws.com/0/178061/d8bc064c-91ec-e305-39ec-7c4513bf30b3.jpeg)



そして親が無い場合の結果は
シェイプレイヤーのバリューの値100％を取ってくれています。

![bandicam 2018-05-07 10-44-56-428.jpg](https://qiita-image-store.s3.amazonaws.com/0/178061/1df436e2-f68d-6c40-56f1-32802da48843.jpeg)

これでスマートになりましたね！

たまに使いそうなのでメモとして残しておきます。
PHPStormでCode FormatterのPrettierを使えるようにする

# やりたいこと
PHPStormで開発中のJavascriptコードをコードフォーマッタにかけたくなったので、どうやったらできるのかをまとめました。

# Prettier
使ったCode Formatterは[Prettier](https://github.com/prettier/prettier)。
`Star`が24192、`Fork`が1105というバケモノCode Formatter。
私は今まで知りませんでしたが、Code Formatter界でも指折りの存在なのでしょうか？

# インストール

これをターミナルで叩くだけ。

```
npm install --global prettier
```

# 使い方
とても簡単で丁寧な説明が公式に書かれています。
https://prettier.io/docs/en/webstorm.html#using-prettier-as-external-tool

`Go to Preferences | Tools | External Tools and click + to add a new tool. Let’s name it Prettier.`

PHPStorm(WebStorm)の`Preferences`開いて、Toolsを開き、その中のExternal Toolsを開いて、+ボタンをクリックして新しいPHPStormのToolを作ろう。`Prettier`って名前にすればいいよ。

と、とても簡単な説明なので安心して読めます。

# 設定
https://prettier.io/docs/en/configuration.html

1. `.prettierrc`というjsonファイルを作成
2. 中身を書く

例えばこんなの。

```json
{
  "printWidth": 100,
  "parser": "flow"
}
```

# 実行させる

ショートカットの`Cmd/Ctrl-Shift-A`をすると、ツール検索ウィンドウが表示されるので、`Prettier`と入力すると`Prettier`が表示されます。
それを選択すると、コードが綺麗に整います。
SafariでCloud9を使う時にCookieエラーが出た時の対処方法

Safari(11.1)でCloud9を初めて使った時に、
"Your web browser does not have third-party cookies enabled"
とのエラーが出た。oh...

![スクリーンショット 2018-05-07 10.17.15.png](https://qiita-image-store.s3.amazonaws.com/0/236643/bbbb32b7-8905-0e3a-79ce-08bb6b983fc2.png)

Safariの環境設定　プライバシータブの
**サイト越えのトラッキンを防ぐ**のチェックを外したら使えました。
![スクリーンショット 2018-05-07 10.16.22.png](https://qiita-image-store.s3.amazonaws.com/0/236643/30fdccfc-fc9e-0df5-8446-7635788686c7.png)
FbxSdkがVisualStudio2017でビルド出来なかったお話

# FbxSdkがVisualStudio2017でビルド出来なかったお話

## <font color=red> [2019.2](https://www.autodesk.com/developer-network/platform-technologies/fbx-sdk-2019-2)にてVS2017に対応しました。以下の内容はFbxSDK 2019.2未満を使用する方向けの記事になります。</font>
VS2019でも問題なくする事を確認済みです。

## FbxSdkを持ってくる
~~巷でNightmare SDKとか言われてる~~ [FbxSdk2019](https://www.autodesk.com/developer-network/platform-technologies/fbx-sdk-2019-0)がリリースされていたので、これを期にVisualStudio2017で新規プロジェクトを立ち上げる事にした。

早速ページに飛んでみると...
![2018y05m07d_094410187.jpg](https://qiita-image-store.s3.amazonaws.com/0/135859/0ef2b650-5642-6ee9-bf57-ea8001d74417.jpeg)

**VisualStudio 2015 ま で し か 対 応 し て な い**
SDKは2019なのに...

2017でも動くだろうと考え、2015版をダウンロードしインストール　ここまでは順調。

## 何はともあれビルド

VisualStudio2017で空のプロジェクトを作成してヘッダの位置を追加してmainのみを書いてビルドしてみると...

![2018y05m02d_131427133.jpg](https://qiita-image-store.s3.amazonaws.com/0/135859/257dd986-48e8-4370-6d0f-14669fc5caca.jpeg)

ゑっ？

**ゑっ？**

## 原因究明
納得が行かなかったので色々調べてみる

 - FbxSDK2017を試す  
　- 全く同じエラーが表示される
 - VisualStudio2015で試す
　- 2019も2017もビルドに成功
- > **VisualStudio2017が生成するプロジェクトファイルに何かあるっぽい**

結論から言うと、以下のオプションが悪さをしていた。
![2018y05m07d_095555785.jpg](https://qiita-image-store.s3.amazonaws.com/0/135859/c3b47fbf-8510-c36a-4162-a4001d6ba7f4.jpeg)

準拠モードってなんぞ？　と思い調べてみる
https://blogs.msdn.microsoft.com/vcblog/2017/11/15/msvc-conformance-improvements-in-visual-studio-2017-version-15-5/

> We’ve enabled the /permissive- conformance mode by default with new projects created in Visual C++, enabling you > to write code that is much closer to C++ standards conformance. This mode disables non-conforming C++ constructs that have existed in MSVC for years. You can learn more about our conformance mode and the /permissive- switch that controls it in this blog post or on docs.microsoft.com.

要約すると、
・(VisualStudio2017で)新規でプロジェクト作ると勝手に ON になる
・MSVCが認識できる非標準のC++構文を無効にする

とのこと。
Twitter for Macを求めるあなたに

Twitter for Macが終了し困ってる人のための、Twitter公式クライアントをインストールする手順です

## 1. 最新のGoogle Chromeを用意する

正確にはPWAが使えるバージョン以降なら幾つでも大丈夫

## 2. Desktop PWAsを有効にする

Chromeで[chrome://flags/#enable-desktop-pwas](chrome://flags/#enable-desktop-pwas)にアクセスし、Desktop PWAsをEnabledにする。
<img width="768" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/15402/0626cd0e-48e7-1b38-b298-a9d506b99541.png">

## 3. Twitter Liteにアクセス

https://mobile.twitter.com/

## 4. インストールする

ブラウザ右上のメニューを開いて、"Install to Applications..."を選択
<img width="504" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/15402/ae7a900b-eaf2-d6ba-58df-e8f5bd4c7ca6.png">


以上でTwitter Liteをデスクトップアプリとしてインストールできます
PWAって便利ですね

# 蛇足

僕は[tweetdeck](https://tweetdeck.twitter.com/)を使ってて、Twitter Lite使ってない
AWS Cloud9からVPSサーバへ接続

以前、業務でCloud9を使用していたが、AWSに移行してから使ったことがなかった。
折角なのでAWSのアカウントを作成しつつ、EC2などのインスタンスではなく、
外部に借りているレンタルサーバーに接続することにした。

■AWSのアカウント作成
こちらは特に難しいことはないので、割愛。
因みに初期は違ったようだけれど、AWS前のCloud9はクレジットカードが必要だった。

■Colud9からレンタルサーバーへ接続
SSHで接続できればよいとの事だったので、早速試してみる。
ユーザー名、ホスト名を入れて、NEXTボタンを押下。
しかし、SSH接続エラーとなってしまう。
Public Keyとして表示されている公開鍵をサーバー側に設定必要なようだ。
レンタルサーバーのホームディレクトリに.sshフォルダを作成。
フォルダの権限を700に変更。
`
mkdir .ssh
chmod 700 .ssh
`
authorized_keyファイルを作成し、Public Keyの内容をコピー。
権限を600に変更。
`
touch authorized_key
vi authorized_key
chmod 600 authorized_key
`

sshd_configの設定についても変更。

/etc/ssh/sshd_config

変更したのは
・PermitRootLogin yes → no
・AuthorizedKeysFile　コメントイン
・PermitEmptyPasswords no → yes
※自分が借りているレンタルサーバー上のOSはUbuntu。

変更を反映させるためにsshd再起動。
service sshd restart

AWSに戻ってもう一度接続を試みるが、無慈悲にも同じエラー。
画面をリロードして、試してみるとエラーの内容が変わった！

Could not execute node.js on...

なんだこれは。。。
SSH以外にも下記インストールが必要だけれど、
・Python2.7
・Node.js
2つともインストール済み。

エラーの内容からStackOverFlowの力を借りて、
nodelegacy.jsをインストールしたところ、無事接続できた。
`
apt-get install nodejs-legacy
`

初回起動はかなり時間がかかったけど、その後は快適に動作している。
開発が楽しみ。
【メモ】jQueryでloading画面を表示する

CSSと[JQuery](https://code.jquery.com/)を読み込む。

```index.html
<div id="loader-bg">
  <div id="loader">
  　<img src="images/load.gif" alt="Loading..." />
  　<p>Loading...</p>
  </div>
</div>
<div id="contens">
  <p>読み込み完了しました。</p>
</div>
```

```script.js
$(function() {
    var h = $(window).height(); // ブラウザウィンドウの高さを取得する
    $('#contents').css('display','none'); // コンテンツを非表示にする
    $('#loader-bg ,#loader').height(h).css('display','block');//ローディング画像を表示
});
$(window).on('load', function () { // 読み込み完了したら実行する
    $('#loader-bg').delay(900).fadeOut(800);// ローディングを隠す
    $('#loader').delay(600).fadeOut(300);
    $('#contens').css('display', 'block');// コンテンツを表示する
});
```

```style.css
#loader-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #2b365c;
    z-index: 1;
}
#loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    text-align: center;
    color: #fff;
    z-index: 2;
}
#contens{
    text-align: center;
    margin-top: 30%;
    font-size: 20px;
    color: white;
}

body {
    background-color: #2b365c;
}
```

ローディング画像はここで作成。
http://loadinfo.net/

結果
![loading.gif](https://qiita-image-store.s3.amazonaws.com/0/244207/12d6c1e5-7800-580d-b5ba-953767f19c60.gif)
備忘録: Backup execでストレージをIBM Cloud Object Storageにする。

Backup Execを使用すればバックアップデータをAWS S3やAzure Blobなどのクラウドにバックアップすることが可能です。
https://www.veritas.com/ja/jp/product/backup-and-recovery/backup-exec

この度最新のアップデート20.1（2018年4月)でIBM Coud Object Storage (通称ICOS)にも対応したようなので
https://origin-download.veritas.com/resources/content/live/OSVC/100041000/100041309/en_US/be_20_hcl.html#cloud_storage

簡単にやり方を書いておきます。
ステップとしては
-IBM CLoudのポータルでICOSをオーダー、バケットを作成する。
-BackupExec management command line consoleでICOS用インスタンスを作成
-Backup Execメニューでストレージを選択
-バックアップを実行

では
 -IBM CLoudのポータルでICOSをオーダー、バケットを作成する。
オーダー方法は省略しますがバケットは以下のように作成
![1.png](https://qiita-image-store.s3.amazonaws.com/0/59741/3fcab245-685f-b6ae-6332-3b9693e6581a.png)
![2.png](https://qiita-image-store.s3.amazonaws.com/0/59741/23b2b438-f231-42c7-167d-650a736f2bfd.png)
![3.png](https://qiita-image-store.s3.amazonaws.com/0/59741/5ef72cb5-919e-f8fb-a146-27b16d91bc65.png)

-BackupExec management command line consoleでICOS用インスタンスを作成

下記のコマンドをConsoleで入力
New-BECloudInstance -Name “icos” -Provider “compatible-with-s3” -ServiceHost “s3-api.us-geo.objectstorage.service.networklayer.com" -HttpPort "80" -HttpsPort "443" -SslMode “Disabled” –UrlStyle “Path” 
上記URLは作成したバケットにより異なります。

ここでICOSは任意の名前をつけてください。

s3-api.us-geo.objectstorage.service.networklayer.com  は作成したバケットによって異なります。(こちらを参照 https://console.bluemix.net/docs/services/cloud-object-storage/basics/endpoints.html#select-regions-and-endpoints )

参照URL https://www.veritas.com/support/en_US/article.000114986 (Veritasのページ）
![4.png](https://qiita-image-store.s3.amazonaws.com/0/59741/d298c365-c1b0-29b6-7c0d-3ed2177b4bb8.png)

-Backup Execメニューでストレージを選択

![5.png](https://qiita-image-store.s3.amazonaws.com/0/59741/831d9768-da8f-136f-0077-94aec856dee1.png)
![6.png](https://qiita-image-store.s3.amazonaws.com/0/59741/220dc40e-91f9-7d82-fb66-525ec98ac643.png)
![7.png](https://qiita-image-store.s3.amazonaws.com/0/59741/fd8b6440-dc03-2f0f-4faa-2bcfcafc24f6.png)
![8.png](https://qiita-image-store.s3.amazonaws.com/0/59741/490f63ee-5ef4-a1b5-1e40-2e50869764dd.png)
![9.png](https://qiita-image-store.s3.amazonaws.com/0/59741/e4e0fb32-5af8-778f-493d-4b7f95c821c9.png)
![10.png](https://qiita-image-store.s3.amazonaws.com/0/59741/cab521f7-3603-b463-a15a-c024197da825.png)
![11.png](https://qiita-image-store.s3.amazonaws.com/0/59741/9608e653-80ad-ae2b-b05d-f1ad7e9ebb08.png)
![12.png](https://qiita-image-store.s3.amazonaws.com/0/59741/8a490753-c0a0-4984-5553-10e27a88b406.png)
![13.png](https://qiita-image-store.s3.amazonaws.com/0/59741/4db5177b-ad22-3573-8bad-34f360b7cfea.png)
wordpress　開発環境用のテンプレ作ってみた

#作った経緯
たまたま、wordpressのローカル環境を用意しておく必要が出たので、今後全員で常にサクサクっと使える様にしておきたくテンプレートdockerファイルを作成

# 各バージョンと必要条件
・PHP7.1
・mysql ver5.6
・themaのカスタマイズがあるので、wordpressファイルはローカルに配置
・wordpressは最新版を提供

# 構築手順
以下リンクをcloneしてきてください
https://github.com/katyou/Docker-template-wordpress
```git@github.com:katyou/Docker-template-wordpress.git
```
ディレクトリを移動して
```cd Docker-template-wordpress
```
Docker構築
```docker-compose up -d
```
最初の環境構築にはかなり時間がかかるかと思います。

ブラウザを開きlocalhost:8000 からアクセス

停止したい時は
```docker-compose stop
```

Dockerをスタートさせたいときも同様
```docker-compose up -d
```
を叩けばOK
[iOS] カスタムクラスをData型に変換する（UserDefaultsにカスタムクラスの配列を保存する）

（コメントにて@ObuchiYukiさんのご指摘にもありますが、）
本記事の内容は古く、現在であれば`Codable`を使用するのが簡単に思います。

下記に例を示します。

保存対象のカスタムクラス

```.swift
struct Item: Codable {
    let id: Int
    let name: String
}
```

保存処理

```.swift
func saveItems(items: [Item]) {
    let data = items.map { try! JSONEncoder().encode($0) }
    userDefaults.set(data as [Any], forKey: "キー名")
}

```

読み取り処理

```.swift

func readItems() -> [Item]? {
    guard let items = userDefaults.array(forKey: "キー名") as? [Data] else { return [Item]() }
    
    let decodedItems = items.map { try! JSONDecoder().decode(Item.self, from: $0) }
    return decodedItems
}
```

---

# カスタムクラスをData型に変換する必要性

例えばUserDefaultsを使用する場合、カスタムオブジェクトをNSDataに変換する必要があります :)

なぜかというと、UserDefaultsで保存できる型は NSData, NSString, NSNumber, NSDate, NSArray, NSDictionary となっているからです。

これ以外の型を保持させたい場合は一旦NSData型に変換してから保持し、読み込む際はNSData型として読み込んだ後に型変換を行う必要があります。

以下では「UserDefaultsにてカスタムクラスの配列を保存、読み込む」という具体的なケースで、Swift4でカスタムクラスをData型に変換する処理を見ていきます😄


# 流れ

iOS ではシリアライズすることをアーカイブ、デシリアライズすることをアンアーカイブといいます。
アーカイブのためのクラスとして NSKeyedArchiver クラス
アンアーカイブのためのクラスとして NSKeyedUnarchiver クラスがあります。

<img width="797" alt="概要図 2018-05-04 13.26.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/138735/7d6ca366-92fe-8c5b-9e1c-d252a0f626ca.png">

# UserDefaultsにカスタムクラスの配列を保存・読み込みをする

まず、独自に作成するカスタムクラスを定義します。

＜ポイント＞
NSObject, NSCodingを継承する
エンコード、デコード処理を記述する

```.swift
class SomeObj: NSObject, NSCoding {
    
    var word: String!
    var date: String!
    
    init(word: String, date: String) {
        self.word = word
        self.date = date
    }
    
    required init?(coder aDecoder: NSCoder) {
        self.word = aDecoder.decodeObject(forKey: "word") as! String
        self.date = aDecoder.decodeObject(forKey: "date") as! String
    }
    
    func encode(with aCoder: NSCoder) {
        if let word = word { aCoder.encode(word, forKey: "word") }
        if let date = date { aCoder.encode(date, forKey: "date") }
    }
}

```

保存処理では```NSKeyedArchiver.archivedData```を使用します

```.swift

var someObjArray = [SomeObj]()
let someObj = SomeObj(word: "hoge", date: "2000/01/01")

someObjArray.insert(someObj, at: 0) 

UserDefaults.standard.set(NSKeyedArchiver.archivedData(withRootObject: someObjArray), forKey: "someObjs")

```

読み込み処理では、一度Data型で読み込んだものを```NSKeyedUnarchiver.unarchiveObjec```を使用してアンアーカイブ（デシリアライズ）します

```.swift

func loadSomeObjs() -> [someObj]?{
        if let loadedData = UserDefaults().data(forKey: "someObjs") {
            let someObjs = NSKeyedUnarchiver.unarchiveObject(with: loadedData) as! [SomeObj]
            return someObjs
        }else {
            return nil
        }
}

```

これでUserDefaultsにカスタムクラスの配列を保存したり、読み込んだりできるようになります！
[アプリ] GitHub でワード検索するアプリ作ったよっていう話

# どんなアプリ？

Qiitaの[こちらの記事](https://qiita.com/kyoshidajp/items/c5d4f060df636ea20cbb)を読んで、"プログラミングしてるときのネーミング迷う問題" に共感して、アプリ版を作成してみました！


🔽スクリーンショット

<img width="150" alt="スクショ01" src="https://qiita-image-store.s3.amazonaws.com/0/138735/945d4a6e-e119-2ae9-7b91-a6a5e0f09640.png">　<img width="150" alt="スクショ02" src="https://qiita-image-store.s3.amazonaws.com/0/138735/34b02a5e-0824-6c5a-977a-cb6839f6f8af.png">　<img width="150" alt="スクショ03" src="https://qiita-image-store.s3.amazonaws.com/0/138735/c90f5117-76d3-49ec-1589-c4cec2c057be.png">　

（※ RANKが 「0」始まりになってるのはミスです。。。w）

## 使い方

いくつかネーミングの候補があるときに、それらを検索してみましょう！

例えば・・・
「いまアプリを利用しているユーザーオブジェクトを保持する変数名を何にしよー」というときに ```user```, ```currentUser```, ```loginUser```, ```nowUser``` という候補があるときに検索して

<img width="300" alt="スクショ" src="https://qiita-image-store.s3.amazonaws.com/0/138735/f22a7c79-da6e-8c9d-5522-720d1f883e59.jpeg">　

ほえ〜 GitHubではこんな感じなのか〜て感じでネーミングの参考になればいいかなと思ってます😁


# 開発過程

簡単なイメージだけで見切り発車でコーディングしてました。

大規模なアプリだと遷移図とか画面仕様書とか書いた方がいいと思うんですけど、これぐらいのアプリなら紙に起こさなくてもいいかな、という感じですね〜


コーディング　　　　　　　　→　３時間ぐらい
実装方法、APIの調査　　　　　→　３時間ぐらい
UI、ライブラリの検討　　　　→　だらだら３時間ぐらい


# ダウンロード

シンプルでまだまだ改善していきたいと思っているアプリですが、
一度ダウンロードしてもらえると嬉しいです！
アドバイス、要望、などなどあればなんでもお申し付けください！全力で取り組みますっ


<img width="500" alt="スクリーンショット 2018-05-06 20.03.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/138735/0978464b-43ea-21c2-8680-41e2219a2634.png">


[作ったアプリ： Git Word Search]()
ターミナル出力を色づけするツールを作ってみた

# はじめに
先日[こちら](https://qiita.com/natsuyoshi_jr/items/80b0d0a0b7aa435c5b7a)の記事を見てとても便利そうだったので、いろいろ機能追加してツールにしてみました。

https://github.com/dalance/pipecolor

# 使い方
こんな感じでパイプでつないで使います。

```console
$ tail -f hoge.log | pipecolor
```

ファイル指定で`cat`相当の動作をします。

```console
$ pipecolor hoge.log
```

さらにLinux限定ですがPID指定で実行中のプロセスから出力を取ってくることもできます。

```console
$ pipecolor -p 10000
```

また、出力が端末かファイルかは判定しているので、デフォルトではファイルへのリダイレクト時には色付けしません。

```console
$ tail -f hoge.log | pipecolor > no_color.log # no_color.logは色付けなし
$ tail -f hoge.log | pipecolor --mode always > color.log # color.logは色付けあり
```


動作デモはこんな感じです。
（INFO行を緑、ERROR行を赤に色付けしてみました）

![pipecolor.gif](https://qiita-image-store.s3.amazonaws.com/0/84296/f74b4c42-732c-0fdd-a9ac-1d3891df85a6.gif)

# インストール
[Release](https://github.com/dalance/pipecolor/releases)から最新のバイナリをダウンロードしてパスの通ったところに置いてください。
Rustで書かれているので環境構築済みの方は以下でもOKです。

```console
$ cargo install pipecolor
```

# 設定
カラーリングの設定ファイルを用意します。デフォルトでは`~/.pipecolor.toml`を読みます。
また、`--config`オプションでパス指定も可能です。

## シンプルな設定

```toml
[[lines]]
    pat   = "ERROR.*"
    colors = ["Red"]
    tokens = []
```

`pat`にマッチさせる正規表現を、`colors`に色を指定します。
この場合正規表現にマッチした部分全体が`Red`になります。

## グルーピングによる色分け

```toml
[[lines]]
    pat   = "(ERROR).*"
    colors = ["Red", "LightRed"]
    tokens = []
```

正規表現ではグルーピング指定ができて、各グループの色は`colors`の2つ目以降に書きます。
（1つ目の色はどのグループでもない部分です）
この場合は`ERROR`が`LightRed`で`.*`の部分が`Red`です。

## 複数の色付け設定

```toml
[[lines]]
    pat   = "(ERROR).*"
    colors = ["Red", "LightRed"]
    tokens = []
[[lines]]
    pat   = "(INFO).*"
    colors = ["Green", "LightGreen"]
    tokens = []
```

`lines`は複数設定出来ます。この設定は上の動作デモで使った「`ERROR`が赤、`INFO`が緑」のものです。

## 特定文字列のハイライト

マッチした行のうちさらに特定の文字列だけハイライトすることもできます。

```toml
[[lines]]
    pat  = "^(.*?) .*? .*? \\[(.*?)\\] \".*?\" .*? .*? \".*?\" \"(.*?)\""
    colors = ["White", "LightGreen", "LightBlue", "Green"]
    [[lines.tokens]]
        pat   = "GET"
        colors = ["LightCyan"]
    [[lines.tokens]]
        pat   = "POST"
        colors = ["LightYellow"]
    [[lines.tokens]]
        pat   = "HEAD"
        colors = ["LightMagenta"]       
```

これはApacheのログを想定した設定です。`GET`/`POST`/`HEAD`に対してそれぞれ色付けしています。

![access_log.png](https://qiita-image-store.s3.amazonaws.com/0/84296/74634f0e-67a0-e66c-3ea4-cab98e1216af.png)

## 色指定

使える色は今のところ以下です。

| Usable color |  | | | |
|:-- |:-- |:-- |:-- |:-- |
| Black | Blue | Cyan | Default | Green |
| LightBlack | LightBlue | LightCyan | LightGreen | LightMagenta |
| LightRed | LightWhite | LightYellow | Magenta | Red |
| White | Yellow | | | |
Nuxt.jsでdotenvを用いた環境毎のデプロイを実現する3step

## やりたいこと
*Nuxt.js良いですよね。*
[【npm】nuxt@dotenv](https://github.com/nuxt-community/dotenv-module) を使って、
バックエンドのAPIを投げ分けている設定をしているのですが、Generateの度に「.env」ファイルを書き換えなくてはいけない！という問題を解決すべく、以下のコマンドを作りました。

```
# Staging環境用
npm run generate:staging

# 本番環境用
npm run generate:production
```
[環境] Webアプリ開発
・フロントエンド：Nuxt.js
・バックエンド(API)：Ruby on Rails

##[前提] npm-script
Node.js+npm での package.json の機能の1つです。今回はタスク管理機能を使って実現しました。
###タスク管理
ビルドやユニットテストの実行などをタスクとして定義できる。
タスクは Shell スクリプトとして記述し、定義されたタスクは Teminal から npm run TASKNAME コマンドで実行可能。
参考サイト)
[npm-scripts で Web フロントエンド開発を管理する](http://akabeko.me/blog/2016/10/npm-scripts-web-front-end-development)

#やったこと
npm-scriptで.envファイルを常に切り替えてgenerateを以下3手順
1. npm-run-allインストール（複数の npm-scripts を実行するためのコマンドラインツール)
2. 「.env」ファイルを環境分作成
3. package.jsonにてscript作成

##1. npm-run-allインストール
```
# scriptでのタスクを複数実行用
npm install npm-run-all
```

##2. 「.env」ファイルを環境分作成
env/ディレクトリを作成して格納しました。

```env/.env_development
API_BASE_URL=http://localhost:4000/api/v1
AXIOS_DEBUG_MODE=true
NODE_ENV=development
FRONT_BASE_URL=http://localhost:3000/
```
```env/.env_staging
API_BASE_URL=http://staging.hogehoge.com/api/v1
AXIOS_DEBUG_MODE=true
NODE_ENV=staging
FRONT_BASE_URL=http://staging.hogehoge.com/
```
```env/.env_production
API_BASE_URL=https://api.hogehoge.com/api/v1
AXIOS_DEBUG_MODE=false
NODE_ENV=production
FRONT_BASE_URL=https://hogehoge.com/
```

##3. package.jsonにてscript作成
以下の5つを追加しています。

```
    "copy_env_development": "cp env/.env_development .env",
    "copy_env_staging": "cp env/.env_staging .env",
    "copy_env_production": "cp env/.env_production .env",
    "generate:staging": "npm-run-all -s copy_env_staging generate copy_env_development",
    "generate:production": "npm-run-all -s copy_env_production generate copy_env_development
```
```package.json
  "scripts": {
    "dev": "nuxt -s",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "copy_env_development": "cp env/.env_development .env",
    "copy_env_staging": "cp env/.env_staging .env",
    "copy_env_production": "cp env/.env_production .env",
    "generate:staging": "npm-run-all -s copy_env_staging generate copy_env_development",
    "generate:production": "npm-run-all -s copy_env_production generate copy_env_development"
  }
```


以上です！
これで以下コマンドでgenerate可能です。

```
# Staging環境用
npm run generate:staging

# 本番環境用
npm run generate:production
```

#最後に
超絶力技です！初めてnpm script使いましたが、便利ですね。
もっとイケてる方法があれば、ぜひ教えてください！
CI機能作成録00 - CI機能とは


# 記述目的
CI機能作成録では、筆者が今流行り(?)の「python」を使用した何かしらの「CIテストツールの作成」を目標に、奮闘する記録である。なお筆者は「python」の開発経験は無い。
今回は触りとしてCI機能そのものについて記述していこうと思う。

## CI機能とは
CI(継続的インテグレーション)を持つツールのこと。
そもそも継続的インテグレーションとは、テストやデプロイ等のソフトウェア開発で繰り返し行われる品質管理作業、またはその効率化のことを指す。
メリットとして開発の効率化、問題の早期発展に繋がる。
代表的なものとして、Javaのオープンソースである「Jenkins」などが挙げられる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/eba268d5-b60f-7bfb-c926-49648e46fef2.png)

## 進捗状況(汗)
そもそもpythonのgithubのビルド環境構築に大変手間取り、やっと落ち着いたところである。
筆者のレベルはその程度という事も理解して頂きたい。この辺は、近々詰まった点等の記事を書くかも知れない。

## 最後に
なにより筆者は、このような技術記事の投稿どころか、ブログ記事もまともに書いたこともないため、温かい目で見守って欲しいと心から思う。
chainerの作法　その11

#概要
chainerの作法、調べてみた。
Deconvolution2D使ってみた。
autoencoder書いてみた。

#写真

![auto3.png](https://qiita-image-store.s3.amazonaws.com/0/18104/f28b7e86-0b3d-0724-6b0a-fd43d951c128.png)


#サンプルコード


```
import numpy as np
from chainer import datasets, iterators
from chainer import optimizers
from chainer import Chain
from chainer import training
from chainer.training import extensions
import chainer.functions as F
import chainer.links as L
import chainer
import matplotlib.pyplot as plt


class Autoencoder(Chain):
	def __init__(self):
		super(Autoencoder, self).__init__(encoder = L.Convolution2D(None, 16, 5, 1), decoder = L.Deconvolution2D(16, 1, 5, 1))
	def __call__(self, x):
		h = F.relu(self.encoder(x))
		return F.relu(self.decoder(h))

def main():
	train, test = datasets.get_mnist()
	def transform(data):
		img, lable = data
		img = img.reshape((1, 28, 28))
		return img, lable
	train = datasets.TransformDataset(train, transform)
	test = datasets.TransformDataset(test, transform)
	train = train[0 : 1000]
	train = [i[0] for i in train]
	train = datasets.TupleDataset(train, train)
	train_iter = iterators.SerialIterator(train, 100)
	test = test[0 : 25]
	model = L.Classifier(Autoencoder(), lossfun = F.mean_squared_error)
	model.compute_accuracy = False
	optimizer = optimizers.Adam()
	optimizer.setup(model)
	updater = training.StandardUpdater(train_iter, optimizer, device = -1)
	trainer = training.Trainer(updater, (80, 'epoch'), out = "result")
	trainer.extend(extensions.LogReport())
	trainer.extend(extensions.PrintReport(['epoch', 'main/loss']))
	trainer.run()
	pred = []
	for (data, label) in test:
		pred_data = model.predictor(np.array([data]).astype(np.float32)).data
		pred.append((pred_data, label))
	for index, (data, label) in enumerate(pred):
		plt.subplot(5, 5, index + 1)
		plt.axis('off')
		plt.imshow(data.reshape(28, 28), cmap = plt.cm.gray_r, interpolation = 'nearest')
		n = int(label)
		plt.title(n, color = 'red')
	plt.savefig("auto3.png")
	plt.show()

if __name__ == '__main__':
	main()


```

以上。
【目次】MMDモーショントレース自動化への挑戦【3/31更新】

この記事では、「MMDモーショントレース自動化への挑戦」関連の記事を一覧にまとめていきます。

# まとめ

 - [MMDモーショントレース自動化への挑戦【序章】](https://qiita.com/miu200521358/items/d50fa3fb3a409d421b35)
 - [MMDモーショントレース自動化への挑戦【第一章】](https://qiita.com/miu200521358/items/fdedbca879cb079e407c)

## クラウド版MMD自動トレース【3/5追加】

クラウド(colab)上でMMD自動トレースが実行できるノートブックを用意しました。

[クラウド(colab)でMMD自動トレース(Unityもいけるよ) - Qiita](https://qiita.com/miu200521358/items/fb0a7bcf2764d7797e26)

詳細は、上記記事をご確認ください。

## ローカル版MMD自動トレース導入手順

以下の順番で導入してください。
**v2リリースに伴い、こちらの開発は終了しました。ご注意下さい**

 1. [Windows への OpenPose導入手順](https://qiita.com/miu200521358/items/539aaa63f16869191508)
 1. [Windows への FCRN-DepthPrediction-vmd の導入手順](https://qiita.com/miu200521358/items/9b45c181c4fd39be9c21)　【2019/2/15追加】
 1. [Windows への 3d-pose-baseline-vmd の導入手順](https://qiita.com/miu200521358/items/d00c3b6d1bc1b6e67480)
 1. ~~[Windows への 3dpose-gan の導入手順](https://qiita.com/miu200521358/items/5e570f7695a950445651)　【2018/10/20追加】~~ 　【2019/3/31削除】
 1. [Windows への VMD-3d-pose-baseline-multi の導入手順](https://qiita.com/miu200521358/items/a2dd8b651fd0cd2ac634)

## ローカル版バルクバッチ【1/13追加】

上記処理を一括で処理するバッチを用意しました。

https://github.com/miu200521358/motion_trace_bulk

詳細はGithubをご確認ください。
エラーになった場合、エラーになったプログラムが分かるようであれば、そちら側でお問い合わせ下さい。
不明であれば、こちらの記事にそのままお問い合わせください。

## 動画内コメント

動画内に記載されている文章のテキストを起こしたものです。
翻訳等にご利用下さい。

 - [MMDモーショントレース 自動化への挑戦：動画コメント【ver1.00】](https://qiita.com/miu200521358/items/f18d066a1fa9636f0947)

## 技術メモ

 - 【ver0.02】 … [PyQt5でクォータニオンの回転](https://qiita.com/miu200521358/items/32915b65e07799f9e040)
 - 【ver0.04】 … [MMDモーショントレース自動化でのセンター推定](https://qiita.com/miu200521358/items/2a43d8c7da92eb940a05)
Shopifyのアプリ周りの仕組み

日本語の情報がやたらと少なく、英語でも情報少ないのでめも

## Shopifyアプリの仕組み
WordPressはサーバー上に作成したプラグインなりをアップロードすることができるが、Shopifyはこれができない。
以下のAPIを使って取得したり、登録したりしてアプリを作成する。
https://help.shopify.com/api/reference
なにかテーマ側にロジックを入れる必要がある時はapiでテーマ編集するなり、scriptタグ挿入するなりが必要



## プライベートアプリ、パブリックアプリ
###パブリックアプリ
storeに公開され、トークンを取得してAPIにアクセス。
https://help.shopify.com/api/partner-dashboard
パプリックアプリのみ、shopifyの管理画面にアプリ側から情報を出すことができる。
Shopifyサーバーにアプリを置けないのでサーバーを立てて管理する必要がある。
パートナー登録はパプリックアプリ作らないなら必須ではない。
ただ、無料でテストサイト使えるのでこれは良い

### プライベートアプリ
ショップごとにアクセストークンを作成しAPIにアクセス。
storeに公開はされない。
基本的にAPIをpostで叩くだけだからコマンドラインツールでも問題ない。
サーバー建てるとwebhook使える
Go の Context を学ぶ

Azure SDK for go を使っていると、突然 `Context` というものが出てきて意味がわからなかったので調べて見た。

公式のリファレンスを読んだのちに

* [Package context](https://golang.org/pkg/context/)
* [Go Concurrency Patterns: Context](https://blog.golang.org/context)


次のブログがとてもわかりやすかった。

* [golangでcontextパッケージを使う](http://twinbird-htn.hatenablog.com/entry/2017/04/07/214420)

ざっとまとめると、Context は、APIのサーバーやクライアントを使うときに、コンテキストを提供してキャンセルや、タイムアウト、値を渡したり出来る仕組み。

Context 構造体の持っている属性や関数に関しては上記のブログに書いてあるので、ここでは書かないけど、何もなし(Background) キャンセル、タイムアウト、値渡しなどの関数が存在する。Context の構造体自体はキャンセルのメソッドは提供しないが、Context はデコレーターの様になっておりラップが可能になっている。上記のブログのサンプルを拡張して見た。

# 基本的な使い方

`go routine` などを呼び出す元の方でオブジェクトを生成する。`context.Background()` は空のコンテキストを生成する。

```go
ctx := context.Background()
```

これを`go routine` を実行時に引き渡す。

```go
	go infiniteLoop(ctx)
```

`go routine` の方では、それを受け取る。この例ではループが回るが、キャンセルされたら、`Done()` が呼ばれるので、メッセージを出力する。

ポイントは、コンテキストオブジェクトは、デコレータの様な使い方をするところ。この例では、渡ってきたのは、空の`Context`が渡ってきているが、ここで、`context.WithCancel(ctx)` の様にラップしてキャンセル機能を追加している。

```go
func infiniteLoop(ctx context.Context) {
	innerCtx, cancel := context.WithCancel(ctx)
	defer cancel()
	for {
		fmt.Println("Waiting for time out")

		select {
		case <-innerCtx.Done():
			fmt.Println("Exit now!")
			return
		default:

		}
	}
}
```

# タイムアウトの実装

たとえばタイムアウトを追加したければ、本体側でこんな感じで書けば良い。キャンセルされたらキャンセルの関数が呼ばれる様に `defer` 関数を使っておく。

```go
	ctx := context.Background()
	ctx, cancel := context.WithTimeout(ctx, 5*time.Second)
        defer cancel()
```

しっかりと 5秒後にキャンセルされ、`Done` が呼ばれる。

# Key/Value 値を設定する

Context はキーバリューも保持できる様になっている。これもデコレータ的な使い方をする。

```go
	ctx := context.Background()
	ctx, cancel := context.WithTimeout(ctx, 5*time.Second)
	ctx = context.WithValue(ctx, "message", "hi")
```

`go routine` 側でこの値を取りたければこんな感じにすると良い。KeyValue の型は`interface {}` なので、型変換が必要。

```go
fmt.Println("message:", ctx.Value("message").(string))
```


# コード全体

こちらにコードを置いておいた

* [サンプルソース](https://github.com/TsuyoshiUshio/gocontextspike/blob/master/main.go)

全体を載せておく。

```go
package main

import (
	"context"
	"fmt"
	"time"
)

func infiniteLoop(ctx context.Context) {
	innerCtx, cancel := context.WithCancel(ctx)
	defer cancel()
	for {
		fmt.Println("Waiting for time out")
		//time.Sleep(time.Second)
		// If I put sleep in here, fmt.Println doesn't output the "Exit now!"

		select {
		case <-innerCtx.Done():
			fmt.Println("Exit now!")
			fmt.Println("message:", ctx.Value("message").(string))
			return
		default:

		}
	}
}

func main() {
	ctx := context.Background()
	ctx, cancel := context.WithTimeout(ctx, 5*time.Second)
	ctx = context.WithValue(ctx, "message", "hi")
	defer cancel()

	go infiniteLoop(ctx)

	select {
	case <-ctx.Done():
		fmt.Println(ctx.Err())
	}
}

```

# 次のステップ

Context は理解できたと思うが、上記のサンプルコードには一点わからないことがある。上記のもので、`time.Sleep(time.Second)` を有効にすると、キャンセル時に、`fmt.Println("Exit now!")` が実行されない。なんでだろう。
HTTP POSTでAPI Gatewayを経由してSQSにエンキューする

APIGatewayのAWS Service Proxy(API Integration/AWS Service)を使うと割と簡単にSQSの入り口をAPIGatewayで自作出来るのでServerless Framework利用してやる方法を書きます。

イメージ
`client ==HttpPost(json)==> API Gateway ==AwsServiceProxy==> SQS`

ServerlessFreamwork使うのであれば、`API Gateway -> Lambda -> SQS`という方法も取れますがAPI GatewayのAWS Service Proxyを使えばLambdaを間に作る必要がありません。自作APIに対するリクエスト増えた場合、Lambda介さない方が圧倒的に安価です。複雑な認証など必要としないならばAWS Service Proxy使う方をお薦めします。
AWS Service Proxyの難点としては設定項目が分かり難い所ですかねぇ。

# 設定
serverlessの導入やserverlessを叩くiam周りは省きます。

## serverless.yml
ほぼCloudFormationです。ymlはGistに置きました。

[APIGateway->SQS · GitHub](https://gist.github.com/miso4ru/bd235e5e65540df9d316494f0c7f9228)

- ServerlessからAPI Gatewayを作るため、利用しないLambdaProxy作成(mock)
- 後でSQSのメッセージ属性に任意値付与できるようにjsonでpost
- CORS用にMock統合タイプで OPTIONSメソッド設定
- APIGatewayのAPIKey不要と記載しているが基本的に利用推奨
- IAM PolicyはSQS FullAccessでガバガバ

## deploy

```
$ serverless deploy
```
言わずもがな


# テスト
端末からAPIエンドポイントにPOSTでJSON文字列を送りつけて確認する

request(post)

```
$ curl -i -X POST -d "{"message":"test"}" \
-H "Content-Type: application/json" \
https://<apigateway-endpint>/dev/send
```

response

```
HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 276
Connection: keep-alive
Date: Sun, 06 May 2018 17:17:22 GMT
......
 略
......

{"SendMessageResponse":{"ResponseMetadata":{"RequestId":"50238bdd-aa56-55b7-9675-d8b490b428b5"},"SendMessageResult":{"MD5OfMessageAttributes":null,"MD5OfMessageBody":"098f6bcd4621d373cade4e832627b4f6","MessageId":"ac3b9630-cd8c-4ae5-89db-5699c7874fda","SequenceNumber":null}}}
```

### メッセージ到達確認
マネジメントコンソールから
<img width="1050" alt="sendsqs-dev-message-test.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/83024/9dabad53-8eb1-b599-111d-5db8a2241f40.jpeg">

来てますね。OKです。

# おわり
非同期でSQSをポーリングして何かする仕組みは別途用意する感じで。
## ServerlessFreamworkのAWS ServiceProxy (2018/05)
2018/5現在でServerlessFreamwork標準でLambda作らずAWS Service Proxyを使う方法は現在無さげです。([関連issue](https://github.com/serverless/serverless/issues/2841))

今回ほぼCloudFormationしか使っておらず、同じことをやる場合に敢えてServerlessを使う必要はないと思います。今の所はServerlessで既に作成しているAPIと同じエンドポイントを利用したいケース、コード管理でやり方統一したいとき等にはServerlessを使う利点があるかもしれません。

## 参考
- [AWS 統合で API Gateway API をビルドする - Amazon API Gateway](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/getting-started-aws-proxy.html)
- [Connect AWS Api Gateway to SQS – Daws Blog](https://cloudhut.io/connect-aws-api-gateway-to-sqs-923cf312bf78)
- [Creating an AWS Service Proxy for Amazon SQS - DZone Cloud](https://dzone.com/articles/creating-aws-service-proxy-for-amazon-sqs)
xl2tpdをRaspberry PI向けにmacOSでクロスコンパイルする

# コンパイルしたい理由

`udp_xmit failed to *.*.*.*:* with err=-1:No such device` このようなエラーが表示されており、VPNがうまく稼働しなかった。

GitHubを見ると、Kernel 4.15で動かないよという情報があった。
[l2tp does not work with 4.15 mainline kernels ](https://github.com/xelerance/xl2tpd/issues/147)

また、Raspberry PIでも似た問題が出ているよと[書かれていた](https://github.com/xelerance/xl2tpd/issues/147#issuecomment-378491917)。
> For the record, xl2tpd-1.3.8 broke also when upgrading my RPi here from Kernel 4.9.51 to 4.14.30.. is it recommended to already upgrade to xl2tpd-1.3.12dev ?

そのコメントのした人曰く、githubから最新コードを取得してコンパイルし直したらいいよとのことであった。自分もこれを試す。


## 問題が生じた環境
```.sh
$ uname -a
Linux rp2mb-usbhdd 4.14.37-v7+ #1111 SMP Thu Apr 26 13:56:59 BST 2018 armv7l GNU/Linux
```
4.15では無いのに問題が生じているのはどういう加減だろうか?

# コンパイルする
## クロスコンパイラの入手
Raspberry PIの容量が小さいのでmacOSでコンパイルをする。クロスコンパイルのツールがインターネットで見つかったのでそれを利用する。
https://www.jaredwolff.com/toolchains/
```Crosstool-NG GNU Linux EABI Toolchain for RPi3```をダウンロードして、dmgをマウントする。

## ソースコードの入手
macOSのターミナルでgitのソースコードを取得する。

```.sh
$ git -b 1.3.12 git@github.com:vyos/xl2tpd.git
```

## 関連するライブラリとソースコードの入手
- libpcap0.8-dev_1.6.2-2_armhf.deb
- libpcap0.8_1.6.2-2_armhf.deb
2つのdebファイルが必要だった。
これはRaspberry PI側にて`apt-get download libpcap-dev`と`apt-get download libpcap0.8-dev`により得られた。

これらをscpなどによりRaspberryPIからmacOSにコピーして、`ar x ファイル名.deb`として展開、また、`tar xf data.tar.xf`としてusr以下を取得する。

## makeの実行
上記の操作により作られたフォルダ構造が次のようであるとする。

- `/Volumes/xtools` ... クロスコンパイルのdmgをマウントした場所
- `~/xl2tpd_b/xl2tpd` ... gitにより得られたxl2tpdのソースコードの場所
- `~/xl2tpd_b/deb/usr` ... debを展開して得られたincludeファイルとlibファイルなどの場所

その時、`~/xl2tpd_b/xl2tpd`で次のようにコマンドを実行するとRaspberry PI用の最新のxl2tpdがコンパイルされる。

```.sh
$ CC=/Volumes/xtools/armv8-rpi3-linux-gnueabihf/bin/armv8-rpi3-linux-gnueabihf-gcc \
LDFLAGS="-L/Volumes/xtools/armv8-rpi3-linux-gnueabihf/lib/ -L../deb/usr/lib/arm-linux-gnueabihf" \
CFLAGS="-I/Volumes/xtools/armv8-rpi3-linux-gnueabihf/include/ -I../deb/usr/include/" \
make
```

# Raspberry PIに配置する
`/usr/sbin/xl2tpd`が問題を起こしているファイルであるようなので、コンパイルされたもので置き換える。
コンパイルした結果をscpなどによりRaspberry PIへコピーした後、次のように上書き（！）する。

```.sh
$ sudo /etc/init.d/xl2tpd stop
$ cp xl2tpd /usr/sbin/xl2tpd
$ sudo /etc/init.d/xl2tpd start
```

これにより問題となっていたエラーメッセージが表示されなくなる。
ubuntu on dockerにスマートコントラクト開発環境を作成

作業記録です。

##コンテナの構築
### 永続化領域の作成
```
docker pull busybox
docker create -v /Users/xx/Project/sc/storage --name scstorage busybox
```
###ubuntu
```
docker pull ubuntu
docker run --volumes-from scstorage --name scubuntu -i -t ubuntu /bin/bash
```
##install
```
apt-get install apt-file
apt-file update
apt-get install software-properties-common
add-apt-repository ppa:longsleep/golang-backports
apt-get update
apt-get install golang-go
add-apt-repository -y ppa:ethereum/ethereum
apt-get update
apt-get install -y ethereum
apt-get install -y solc
mkdir ~/data_testnet
cd ~/data_testnet
apt-get install -y vim
vim genesis.json
{
"config": {},
"nonce"      : "0x0000000000000042",
"timestamp"  : "0x00",
"parentHash" : "0x0000000000000000000000000000000000000000000000000000000000000000",
"gasLimit"   : "0x8000000",
"difficulty" : "0x4000",
"mixhash"    : "0x0000000000000000000000000000000000000000000000000000000000000000",
"alloc"      : {}
}
cp -r /root/data_testnet/ /home/
```
##Geth起動
```
cd /home/data_testnet/
geth --datadir /home/data_testnet init /home/data_testnet/genesis.json
tree /home/data_testnet/
```

installで試行錯誤したり、テストネットのパスを動かしたりしました。
上記手順の再検証をする時間はないので、その辺りはご容赦を。
Slackのユーザ情報を取得して，CSVに出力する．

# はじめに
Slackのユーザ情報をCSVに出力して，他のデータベースにインポートしたり，エクセルで確認したい．そんなとき次の操作を行います．

# 前提
### Slackトークン
Slack トークンを取得する必要があります．

- [レガシートークン](https://api.slack.com/custom-integrations/legacy-tokens)
- [推奨のトークン取得](https://api.slack.com/docs/oauth)

レガシートークンの方が操作自体は簡単です．
下記Qiita記事などが簡潔に説明しているます．
https://qiita.com/ykhirao/items/3b19ee6a1458cfb4ba21

### jqコマンド
JSONから値を抽出るjqコマンドを利用します．
mac, Linuxの方はパッケージマネージャを利用してインストールしましょう．(brew, apt-get, yumなど)
Windows10の方は，Windows Subsystem for Linux上で操作するのが良いでしょう．

# 取得と変換
## ユーザ情報を取得します．
[users.list](https://api.slack.com/methods/users.list)でユーザ情報を取得します．

```
curl https://slack.com/api/users.list?token=<TOKEN> > users.json
```

## 取得した情報を加工します．
jqコマンドを利用して必要な項目を抽出し，CSVとして出力しています．
jqコマンドの引数に欲しいパラメータを追加しましょう．

```
cat users.json | jq '.members[] | [.id, .name, .real_name] | @csv' > users.csv
```

# まとめ
Slackからユーザ情報を取得，抽出し，CSVに出力しました．
以下の操作を行います．

```
curl https://slack.com/api/users.list?token=<TOKEN> > users.json
cat users.json | jq '.members[] | [.id, .name, .real_name] | @csv' > users.csv
```