OmniAICreator/Qiita-1.07M huggingface dataset:
[Angular] 入門

こんにちは。

最近フロント側のフレームワークをAngularに乗り換えたので自分のメモとしてAngular入門をまとめました。

# Angularとは？
「Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop. 」 とのことです。要するにモダンフロントエンド開発に必要なものをパッケージ化した開発環境ということでしょう。　AngularにするかReactにするかなんて言う議論がありますが、これはまた別途まとめてみたいと思います。

# Angular開発に必要なもの

## IDE
普段からVisual Studio(VS)を使ています。VSじゃなくてもいいのですが、ここから先はVS使って進めていきます。 今回 Visual Studio Professional 2017 Version 15.9.3を使っています。

## Node.js
AngularはNode.jsを必要とします、[こちら](https://nodejs.org/ja/)をご参照ください
## npm
また、npmという関連パッケージを管理するプログラムが必要となります。npmに関しては[こちら](https://docs.npmjs.com/about-npm/index.html)をご参照ください。

# はじめてみる

細かい説明はあとにして、早速はじめてみます。

## VSを立ち上げて「新規プロジェクト」
![image.png](https://qiita-image-store.s3.amazonaws.com/0/241909/a448d39b-24ac-b866-b975-5ba7e2e80e52.png)

## 新しいASP.Net Core アプリケーションを選択して、Angularテンプレートを選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241909/5183d259-0827-6ef9-f8c2-281e8867579d.png)

これで必要なファイルがすべて生成されてました。 

## 生成されたファイル群

下記格納されたファイルやフォルダーの説明です。また後で細かい説明はするので、読み飛ばしてもOKです。

アプリのルートフォルダーはClientAppです。

アプリ本体のコードはsrcの中に格納されています。
- index.html はトップページファイルです
- main.ts はスタートアップファイルとよばれ、名前の通りスタートアップするときに使われます
- appフォルダーの中にはAngularアプリ関連のファイルが格納されいてます。
- app.component.tsはロートのコンポーネントファイルです
- app.module.tsはルートモジュールファイルです

e2eにはテスト関連のファイルが格納されています。
package.jsonにはパッケージ情報が格納されています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241909/d4f7c2f1-b72a-c191-b371-b5cff8859516.png)

細かい話はあとにして早速実行ボタンを押してみましょう。

## 実行をクリックして初めてのAngularアプリケーションを実行。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241909/9c2657f0-1c63-3f24-ee90-8e291b1adfeb.png)

下記のようにサンプルアプリケーションを起動することができました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241909/531459ff-9591-22d9-adc8-9dbae84dbe18.png)

# 次（基本編）

では次はAngularの基本となる部分を説明。　Angularはいくつもの部品で構成されていて、その部品をModule(モジュール)と呼んでいます。また表示するページのUIの部品をComponent(コンポーネント)と呼んでいます。　Angularアプリがたちがる際にはスタート時にMain.tsが読み込まれます、まずはここを見てきましょう。


# 参考URL

- [Angular オフィシャルサイト](https://angular.io/)
- [Visual Stduio IDE サイト](https://visualstudio.microsoft.com/vs/)
- [Node.js オフィシャルサイト](https://nodejs.org/ja/)
- [npm オフィシャルサイト](https://docs.npmjs.com/about-npm/index.html)
コンバージョンとは？

# はじめに

Adventカレンダー「エンジニアのためのWebマーケティング」の9日目です。
サクッと読める記事を目標に。異論・ツッコミ大歓迎。
できるだけ専門用語を使わないように気をつけます。

それでは参りましょう

# コンバージョンを説明できる人は少ない？

Webサイトの分析をする時に、**「コンバージョン」**という言葉がよく使われます。
よく使われるのですが、これを説明できる人は意外と少ないです。

## Webサイトの分析をする時に大事なのは「ゴールの設定」

Google AnalyticsなどのWeb分析ツールを使う時に、いちばん大事なのは何でしょうか。

それは、「ゴール」の設定です。
もっというと、ビジネスの設計ということになります。

## KPIとKGI

**KPI**や**KGI**という言葉をみなさんはご存知でしょうか。

KGIは**K**ey **G**oal **I**ndicatorの略で、ビジネス上での目標が達成されているかどうかを計測する指標のことです。

対して、KPIは**K**ey **P**erformance **I**ndicatorと呼ばれ、「KGIを達成するための過程が計測できているかの中間指標」です。

例えば、
KGIが**「1年間のうちに売上を1000万円達成する！」**であれば
KPIは**「1ヶ月の受注件数を○○件以上にする」**などの
その**目標を達成するための目情**になります。

## WebサイトのコンバージョンはKGIかKPIか

ここで問題になってくるのが、Webサイトで設定する目標はどれになるのか、という話です。

ビジネスのゴールを設定する時には、「Webサイトがビジネスにおいて、どれぐらいの要素を持っているのか」が大事になってきます。

# ECサイトと資料請求サイトの違い

自分のビジネスが、ECサイト一本でしているのであれば、そこの売上が自然とビジネスの目標になってきます。

逆に、セミナーなどを開催することが仕事の会社の場合、資料請求や申込みをしてもらうことがWebサイトの役割として担っている可能性が多いですね。
最終的な売上はセミナーで稼ぐわけです。

## とりあえず、「購入完了」をコンバージョンにする前に

Web分析をするから、コンバージョンを設定するのではなく
「自身のビジネスの目標がここにあるから、Webのゴールはここに置く」
というのをしっかり設定してから、やってみましょう。

気づいたら、ビジネスに対して直結しないページのPVをコンバージョンに設定してしまい「結局俺たちはこのWebサイトで何が計測したかったんだ？」

とならないようにご注意ください。


# どうでもいい話

生まれて初めてWebの世界でコンバージョンという単語を聞いた時、自分は「コンバート」のことと勘違いしてしまいました。「なんで野球のポジション変えるようなこと・・・？Webサイトで何かを交換するんかな？」と勘違いをしていました。しょうもない。


# おわりに

明日は、今流行りの「UI/UXについて」です
四分位数などから、データのかたちを推測する

OpenStreamのAdventCalendarの10日目です。

本記事では、とあるデータから計算された四分位数から、そのデータのかたちを推測することについて書きます。

##なぜ
世の中では、いろんな調査がされています。
そして、調査の結果をまとめたものとして、平均値や、中央値や、四分位数や、標準偏差などの値が公開されることがあります。
（せめて、ヒストグラムがあると、かなりデータのかたちがわかるのですが、調査する項目がとても多いため、紙面の都合で省かれたりしていると思われます）
そのときに、公開された数値だけを、調査の結果としてとらえるより、中央値や四分位数や標準偏差からデータのかたちを推測することで、調査した対象のデータが意味することがもっと見えるようになります。

##平均値や四分位数が公開されているものとして
[IPA SEC ソフトウェア開発データ白書2018-2019](https://www.ipa.go.jp/sec/publish/tn12-002.html)などは、いろんな調査項目に対して「平均値」「標準偏差」「最小値」「最大値」「中央値」「第１四分位数」「第３四分位数」などが公開されています。

ソフトウェア開発データ白書は生データが公開されてない、かつ、データサイズが大きいため、
本記事では、データサイズが小さい架空のデータで、説明を進めます。

##データの説明
とあるグループで、「スマートデバイスの所持数」を調査した結果をまとめたものが以下の値です。

|データサイズ|平均値|標準偏差|最小値|第1四分位数|中央値|第3四分位数|最大値|
|--------:|--------:|--------:|--------:|--------:|--------:|--------:|--------:|
|26|2.256|4.423|1|3|4|5.75|10|

箱ひげ図にすると以下のようになります。
![箱ひげ図.png](https://qiita-image-store.s3.amazonaws.com/0/216955/14d9c59d-a608-a6a5-19bd-70d092600152.png)

※各値の定義を確認したい方は[こちら](https://www.stat.go.jp/teacher/c2dic.html)をお勧めします。

##中央値や四分位数からわかること
これらの値からわかることは、
- 「最小値と第1四分位数の間」と「第1四分位数と中央値の間」と「中央値と第3四分位数の間」が狭い
- 中央値より平均値が小さい
です。
そこから推測できるのは、データの範囲は1～10ですが、分布が小さい値のほうに寄っているということです。
正直これらの値からは、データの山が一つであることは、確定できませんが、
もし、データの山が一つであれば、右に裾を長く引いた形であると推測できます。

##ヒストグラムで見ると
では、生データからヒストグラムにしたものを見てみましょう。
![ヒストグラム.png](https://qiita-image-store.s3.amazonaws.com/0/216955/86c20f84-9212-2dcb-f12f-b39e985ba1c7.png)
ヒストグラムからも、「分布が小さい値に寄っていること」と「右に裾を長く引いている」ことが確認できると思います。

##まとめ
上記のように、平均値や四分位数からある程度のデータのかたちが推測できます。
本記事では、生データに基づいたヒストグラムで答え合わせをしましたが、
推測した時に、手書きで良いので、データのかたちを書いて、メモリもつけてみると、かなりデータのかたちがわかるようになります。

### 参考情報
[統計学習の指導のために（先生向け）基本用語集](https://www.stat.go.jp/teacher/c2dic.html)
PowerShell UDP


受信

```powershell
$Udp = New-Object Net.Sockets.UdpClient -ArgumentList 54321
$Sender = $null
while ($true) {
  if ($Udp.Available) {
    $Buffer = $Udp.Receive([ref]$Sender)
    $MessageString = [Text.Encoding]::UTF8.GetString($Buffer)
    Write-Host $MessageString
  }
  Start-Sleep -m 500
}
```

送信

```powershell
$Udp = New-Object Net.Sockets.UdpClient
$ByteData = [Text.Encoding]::UTF8.GetBytes('Hello')
$Udp.Send($ByteData, $ByteData.Length, '192.168.11.7', '54321')
$Udp.Close()
```
【設計時の見落とし】端数処理について

# はじめに
これは[設計時の見落とし Advent Calendar 2018](https://qiita.com/advent-calendar/2018/overlook)の9日目の記事となります。

業務アプリケーションの設計をするときに、見落としがちなところに焦点をあてて紹介します。 
下流工程からの手戻りを少なくして 双方の負担を減らしましょう。

# 切り上げ
仕様書の中に、「小数点第４位で切り上げ」というのがありました。
容積の求める項目なのですが、小数点3桁までとなっている。

```
容積 =（たて / 1000）×（よこ / 1000）x（たかさ / 1000）
```
製造作業も終了し、検証作業ということで検証者がチェックしたわけですが、不具合ということで、容積の計算結果が挙がってきたわけです。

下記の計算を行ったとき

```
（9999 / 1000）×（9999 / 1000）×（9999 / 1000）= 999.70003
```

製造者の計算結果は、**999.701**
検証者の計算結果は、**999.700**

**小数点第4位で切り上げであるため、小数点第4位の値は0であるから結果の末桁は、0ではないのか？という認識ですね。**

それではと、Excel上の切り上げ関数のROUNDUPで実行してみました。
**ROUNDUP(999.70003,3)＝999.701**という結果となったわけです。

この件は、お客さんに確認して小数点第4位以降を切り上げでいうことで「999.701」で問題ないとなりました。
端数処理もちりもつもれば、集計結果が違ってきてしまいますからね。
端数処理の違いで有名なのは四捨五入で、銀行型丸め、通常の四捨五入があります。
[.NET TIPS 数値を四捨五入するには？](http://www.atmarkit.co.jp/fdotnet/dotnettips/700mathround/mathround.html)

端数処理は意外と盲点なので、気をつけた方がいいでしょう。

# 按分処理後の端数補正
業務用アプリケーションでは、料金などを比率によって振り分ける按分処理を行うことがあります。

簡単な例で言えば、100円を5つに均等配分するとすれば、各20円となります。
では、100円を3つに均等配分してみるとどうでしょう？
この場合、各33円となって、1円が余ってしまいますね。では、この1円はどうするのでしょうか？

この例とは違いますが、以前あった振り分け先として

* 按分した際に金額(按分比率)が一番多いところ、または一番少ないところ
* キーとなるコードの昇順または降順の先頭
* 先に登録された順

これは、ユーザーであるお客さんの決められたルールによって処理します。
逆にこれが決まってないようなら、ユーザーに決めてもらう必要があります。

こうしてユーザーのルールによって、どこかに1円を含めた結果として34円、33円、33円といった配分となるわけです。

## 60年代末に銀行員の犯行
この端数処理の振り分けで思い出したのが、[サラミ法](https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%A9%E3%83%9F%E6%B3%95)を使った犯罪です。

有名なのは1960年代にアメリカンの銀行で発覚した顧客の預金利子を計算するプログラムで端数処理を四捨五入ではなくすべて切り捨て計算とし、剰余の利息を自分名義の口座に自動振込するプログラムも付け加えて巨額の不正入金を得たというもの。

サラミ法といえばこの事件が有名ですね。実に巧妙な手口です。
塵も積もれば、金額も巨額になるわけですね。

さすがに銀行でこの手口はもう出来ないでしょうけど、最近は何かとポイント制だったりしますので、知らない間に仕組まれている可能性も･･･
Pythonでエラー箇所を上書きしてしまわないようにする


Pythonで例外が発生しそうな箇所で `try` して例外をキャッチし、ログを追加するなどビジネスロジックとは別の処理をしたあとに再び同じ例外を発生させたいときがあります。

このとき、 `raise e` のようにキャッチした例外をそのまま指定するコードを見かけますが、多くのケースでこれはあまり好ましくなく、何も指定しない `raise` とだけ書くことが好ましいです。

## `raise` だけで同じ例外を発生させる事ができる

「Python文法詳解」には次のように書かれています。

> `except` 節や、 `finally` 節で例外ハンドラの実行中には、例外オブジェクトを指定せずに `raise` 文を実行できます。この場合、例外中の例外オブジェクトが、自動的に再送出されます。[^1]

[^1]: 石本敦夫 「Python文法詳解」 オライリー・ジャパン 2014年 p.184

## `raise e` と `raise` は微妙に違う

`raise e` と `raise` は似ている動作ですが、前者はエラーを追うときに苦労してしまいます。なぜなら、 `except` 内で `raise e` としてしまうと、一度例外をキャッチした上で新たに例外を発生させることになってしまうのでスタックトレースのエラー箇所は `raise e` と書いたところになってしまうからです。一方で `raise` だけならキャッチした例外を引き継ぎ、スタックトレースを汚しません。

```python
def test1():
    try:
        raise StandardError()
    except Exception as e:
        raise e
```

```python
def test2():
    try:
        raise StandardError()
    except Exception as e:
        raise
```

上記の２つのコードを実行してみます。結果は次のとおりです。

```python
>>> test1()

# Traceback (most recent call last):
#   File "<input>", line 1, in <module>
#     test1()
#   File "<input>", line 5, in test1
#     raise e
# StandardError
```

```python
>>> test2()

# Traceback (most recent call last):
#   File "<input>", line 1, in <module>
#     test2()
#   File "<input>", line 3, in test2
#     raise StandardError()
# StandardError
```

`test1()` は例外をキャッチした上で"新たに"例外 `e` を発生させているため5行目でエラーになったかのように見えます。一方で `test2()` は `raise` で何も指定しておらず、3行目の実際のエラー箇所がスタックトレースに残っています。
Elixir: パイプ演算子|>について

[パイプ演算子`|>`](https://hexdocs.pm/elixir/Kernel.html#%7C%3E/2)については、gumi TECH Blog「[Elixir入門 10: EnumとStream](https://dev.to/gumi/elixir-10-enumstream-4fpb)」の「パイプ演算子」で説明されています。本稿は、そのおさらいもしつつ、公式ドキュメントの情報などを補います。

# パイプライン演算
パイプ演算子`|>`による演算は、パイプライン演算と呼ばれることもあります。左辺の式の値を右辺の関数の第1引数として渡します。

> 左辺 |> 右辺

たとえば、つぎのコードは`List.flatten/1`でリスト内の入れ子を平坦化します。左辺が第1引数ですので、右辺の関数の引数には加えません。

```elixir
iex> list = [1, [[2], 3]] |> List.flatten 
[1, 2, 3]
```

引数がふたつあるときは、関数には第2引数をかっこ`()`でくくって渡します。この場合のかっこは省けません(省くと警告が示されます)。

```elixir
iex> square = list |> Enum.map(fn(x) -> x * x end)      
[1, 4, 9]
```

引数がふたつ以上あるときも、同じように第1引数を省いて、第2引数以降をかっこ`()`に加えてください。

```elixir
iex> sum = square |> Enum.reduce(0, fn(x, acc) -> x + acc end)
14
```

上記3つの演算をパイプ演算子なしに1行で書くと、つぎのようになります。入れ子になり、しかも内側から演算されますので、読みにくいコードです。

```elixir
iex> sum = Enum.reduce(Enum.map(List.flatten([1, [[2], 3]]), fn(x) -> x * x end), 0, fn(x, acc) -> x + acc end)
14
```

パイプ演算子を使えば、左から演算の順に書けますので、わかりやすいでしょう。

```elixir
iex> [1, [[2], 3]] |> List.flatten |> Enum.map(fn x -> x * x end) |> Enum.reduce(0, fn(x, acc) -> x + acc end) 
```

引数に関数があるときは、キャプチャ演算子`&`を使うとさらに短く書けます(「[Elixir入門 08: モジュールと関数](https://dev.to/gumi/elixir-08--1c4c)」「関数のキャプチャ」参照)。

```elixir
iex> [1, [[2], 3]] |> List.flatten |> Enum.map(&(&1 * &1)) |> Enum.reduce(0, &+/2)
14
```


# パイプ演算子で注意すること
Elixir公式ドキュメントの[`|>/2`](https://hexdocs.pm/elixir/Kernel.html#%7C%3E/2)の項には[ふたつの注意](https://hexdocs.pm/elixir/Kernel.html#%7C%3E/2-pitfalls)が示されています。

## 演算子の優先順位
ひとつは、演算子の優先順位に関わるかっこ`()`づけです。つぎのコードはエラーになります。

```elixir
String.graphemes "Hello" |> Enum.reverse
```

演算子の優先順位にしたがってつぎのように解釈され、[`Enumerable`](https://hexdocs.pm/elixir/Enumerable.html)プロトコルがバイナリに対して定められていないからです。

```elixir
iex> String.graphemes("Hello" |> Enum.reverse)
** (Protocol.UndefinedError) protocol Enumerable not implemented for "Hello"
```

したがって、つぎのように優先順位をかっこで示さなければなりません。

```elixir
iex> String.graphemes("Hello") |> Enum.reverse
["o", "l", "l", "e", "H"]
```

もっとも、せっかくパイプ演算子を使うのですから、つぎのように書くほうがよいでしょう。

```elixir
iex> "Hello" |> String.graphemes |> Enum.reverse
["o", "l", "l", "e", "H"]
```

## 無名関数に用いるとき
もうひとつの注意は、パイプ演算子を無名関数に用いるときです(関数のキャプチャについても同じ)。

```elixir
iex> func = fn(str) -> str |> String.graphemes |> Enum.reverse end
#Function<6.127694169/1 in :erl_eval.expr/5>
```

関数名のあとのドット(`.`)を忘れてはいけませんし、引数がひとつでもかっこ`()`は省けません。

```elixir
iex> "Hello" |> func.()
["o", "l", "l", "e", "H"]
```

けれど、パイプ演算子を使わなくてもこれは同じです。

```elixir
iex> func.("Hello")
["o", "l", "l", "e", "H"]
```

少し気をつける点はあるものの、見やすいコードを書くために、パイプ演算子は役立つでしょう。ところで、『[プログラミングElixir](https://shop.ohmsha.co.jp/shopdetail/000000004675/)』(原書『[Programming Elixir 1.6](https://pragprog.com/book/elixir16/programming-elixir-1-6)』)の著者Dave Thomas氏はこのパイプ演算子がお気に入りのようで、書籍のサブタイトルにつぎのように使われています。

> Functional
 |> Concurrent
 |> Pragmatic
 |> Fun
キャリアの軸としてのQAエンジニア

こちらは [トレタ Advent Calendar 2018](https://qiita.com/advent-calendar/2018/toreta) の8日目の記事です。

QAエンジニアの坂田です。今月トレタに入社し、QAとしては3人目のメンバーになりました。

前職ではBtoBソフトウェアのQAエンジニアを6年、テクニカルサポートを4年担当していました。
サポートを含む経験を通して「QAエンジニアは広くキャリア形成する軸として結構良いんじゃないか」と思うことがあったので、今回はそれについて書いてみます。[^1]

### QAエンジニアの役割
QAと聞くと一般的に「製品の挙動をテストしてバグを出す」イメージがあると思いますが、文字通りに捉えれば「品質を保証/保障する(Quality Assurance)」というのがQAエンジニアの役割になります。

では「品質」とは何なのか。個人的には「そのモノに関わる人たちの目的・期待を満たす度合い」だと考えています。[^2]

なので、
- 作ったモノが作り手の目論見どおり動くかどうか (システム的な観点)
- 作ったモノが使い手の目的・期待を満たすかどうか (ユーザ志向的な観点)
の両方が、QAの役割に入ってくることになります。[^3]

### QAエンジニアとソフトウェア事業
上記のようにQAという仕事を捉えると、ソフトウェア事業全体をかなり広く見渡せる職種であるように思います。

突き詰めれば事業企画・プログラマー・デザイナー・サポートなどの各専門家と連携を取りつつ、価値・制約・リスク・コストなど様々な因子との兼ね合いで品質を最適化することになるわけで、ここまで活躍すれば立派なプロダクトマネージャです。

そこまで行かないにしても、システムとユーザの両面でプロダクトに関わるので、QAには自分の興味や特性を生かせる自由度があると考えています。実際、よりシステム寄りのSET(Software Engineer in Test)という職種もメジャーになりましたし、一方でトレタではQS(Quality Support)という役割がQAと別に設けられていたりします。

QAを軸足に置きつつ段階的に経験を積み、将来的にプログラマーやカスタマーサクセスに転身してしまうのも全然ありだと思います。

### QAエンジニアからキャリアを始める
自分自身の経験上、キャリアの起点としてもQAエンジニアは適しているように思います。

悪い言い方ですが、キャリアに迷いがあってもつぶしが効く職種であると言えます。また、専門能力がそれほど高くない時期から参画しやすい利点もあります。
(私も社会人になるまでIT知識皆無でした)

最初は「テスト実行」「仕様ベースのテスト設計」といったいわゆるテスター的な作業から入ると思いますが、QAの本質にしつこく向き合い続ければ、いわゆるテスターの悪いイメージに堕することなく自分に合った活躍の道が開かれると思います。

### まとめ
誰向けの記事なのか分からなくなってきましたが、QAエンジニアはキャリア形成の観点からも良いという、とりとめのない私見でした。

それでは、今年の残りも楽しく健やかに過ごしましょう！

[^1]: 前職も現職もソフトウェア事業会社なので、ソフトウェア事業会社におけるQAエンジニアという括りで書きます
[^2]: 「品質」の厳密な定義はISOとかIEEEとかに譲ります
[^3]: 他にも開発プロセス的な観点(プロセス品質)なんてものもあります
RailsのN+1問題の解決方法　初心者→中級者へのSTEP9/25

#RailsのN+1問題の解決方法
**はじめに**
RDM楽しかったです。後々、記事にしてみせます。二日酔いです。頑張って書きます。
今回はパフォーマンスを悪くするN+１問題の解決方法についてです。

##N+1問題とは##

コードをみた方が早いかもしれません。下記コードをみてください。

```user.rb
class User < ApplicationRecord
  has_one :blog
end
```

```blog.rb
class Blog < ApplicationRecord
  belongs_to :user, foreign_key: "user_id"
end
```

わかりすいようにユーザーがブログを一つ持つようなリレーションモデルを考えます。
`user#indes`にて各ユーザーの名前とそのユーザーのブログ名を表示するようにします。

```view/user/index.html.haml
- @users.each do |user|
  = user.name
  = user.blog.name
```

このコードによるクエリは以下のようになります。
<img width="731" alt="スクリーンショット 2018-12-09 23.33.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/174526/0504317b-25ee-0f2f-a907-cb6d8b2d9c05.png">

各ユーザーごとにBlogテーブルにアクセスしています。これがもしユーザー数が千、万、10万...となってくると非常にパファーマンスが悪いです。これがN+1問題です。(user一覧表示の為のデータ取得のSELECTが`1`、各ユーザのブログを取得する為のSELECTが`N`となります）

パフォーマンス向上の為、ブログテーブルへのSELECTを一回にしたいです。

##解決方法の`includes`
解決策は簡単で、`includes`を使うだけです、`includes`メソッドは関連するテーブルをまとめて取得してくれます。


```view/user/index.html.haml
- @user_index.includes(:blog).each do |user|
  = user.blog.name
```
<img width="558" alt="スクリーンショット 2018-12-09 23.42.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/174526/5f411d3c-5496-a0eb-f0b3-e953c1696c11.png">

これでブログテーブルへのSELECTが１つになりました！！N＋１問題は解決です。
※今回は1対1の関連モデルを例に説明しましたが、N対1対Nの場合、など状況によって`includes`の使い方を少し考える必要があります。とりあえす`includes`入れればいいや、ではなくログをみてしっかりパファーマンスが改善されているか判断してコーディングしましょう

##まとめ
N+1問題を作るようなコード書くとブヒブヒ言われそうなので、意識して書かないようにしましょう。
RDMについてはこのカレンダー中に記事にできそうかわからないけど絶対記事にする。
参考先にbulletとかいう便利なgemのこと書いてあったからそれもいつか書かなきゃですな。

##参考にしたの
【Rails入門】パフォーマンスが悪いならincludes/orderを検討しよう
https://www.sejuku.net/blog/26168

Railsライブラリ紹介: N+1問題を検出する「bullet」
http://www.techscore.com/blog/2012/12/25/rails%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E7%B4%B9%E4%BB%8B-n1%E5%95%8F%E9%A1%8C%E3%82%92%E6%A4%9C%E5%87%BA%E3%81%99%E3%82%8B%E3%80%8Cbullet%E3%80%8D/
課金システム未経験の私がstripeを使って本気で課金システムを考えてみる

はじめまして！

このブログは[Stripe Advent Calendar](https://adventar.org/calendars/3096)のDay９のブログです。

みなさん課金システムは使ってますか？

私が知ってる限りでは下記の二つしかありませんでした。
しかも、それで課金システムを組んだことはありませんでした。
・[PAY.JP](https://pay.jp/)
・[PayPal](https://www.paypal.com/jp/webapps/mpp/merchant)
...etc

私の周りで最近よく話を聞く、Hotな課金システム[Stripe](https://stripe.com/jp)を使ってみたいと思い奮起してやってみることにしました！

# 目次
- [1日目](https://qiita.com/ririson/items/d9a593c972e70ecdfe52#1%E6%97%A5%E7%9B%AE)
    - 新規登録の仕方
    - ドキュメントを読む
    - デバッグ方法を試してみる
- 2日目
    - 実装してみる
    - testデータを使ってみる
- 3日目
    - 準備中

# 1日目
## 新規登録の仕方
### Stripeにアクセスする
https://stripe.com/jp
[ログイン]をクリック
![1.png](https://qiita-image-store.s3.amazonaws.com/0/187558/1e4a3093-c4f5-b297-8b34-73ce2453f20b.png)


[アカウントをお持ちでない方はこちらへ ユーザ登録]をクリック
![2.png](https://qiita-image-store.s3.amazonaws.com/0/187558/e0e42f2b-c08f-f417-f855-920fcf36e6ed.png)


[メール]
[名前]
[パスワード]
[パスワードの確認]
[私はロボットではありません]
上記を入力してアカウントの作成をしてください。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/187558/53131c03-d40d-5323-d83f-16486e1a5245.png)


## ドキュメントを読む
### ドキュメントの場所

ここに初めて触る方用にチュートリアル的なものも置いてあります。
https://stripe.com/docs

英語だらけなので、右クリックから「日本語に変換」を押す、戻すを繰り返しながら意味を把握していきました。

## デバッグ方法を試してみる
（＊）[ココ](https://stripe.com/docs)にある[Try Now]は試してみるといいと思います。
これが一番簡単に体験できます。

### Try Nowを試してみる
下記のようにちょっと待ってると[Name]と[Card]が自動的に入力されます。
コードのすぐ下にある[Usage:]に書いてある通り、入力が自動的にされた後にSubmitボタンを押します。
![4.png](https://qiita-image-store.s3.amazonaws.com/0/187558/fb691451-178e-de1a-dc41-b22847f7a222.png)


そうすると次はTry Nowの下にあるステータスが①Cardから②Customerに変わったと思います。

ここではセキュリティのためコードは隠していますが、下記のようなコードが出てきたと思います。

```
curl https://api.stripe.com/v1/customers \
   -u sk_test_×××××××××××: \
   -d source=tok_××××××××××× \
   -d description="×××××××××××" \
   -d email="×××××××××××@example.com"
```

これをコピーしてください。

私のPCはMacなので、Macの方はこの通りにやって頂ければ動くと思います。
【１】ターミナルソフト（Terminal.app, iTerm2.app）を開いてください。
【２】（ターミナルソフト上で）先ほどコピーしたコマンドを打ち込んで下さい。
【３】（ターミナルソフト上で）JSON形式で返ってきたと思います。
【４】（ブラウザ上に）②Customerと書いてあったステータス部分が③Chargeに変わり、下のコードが変わったと思います。

```
curl https://api.stripe.com/v1/charges \
   -u sk_test_×××××××××××: \
   -d amount=2000 \
   -d currency=usd \
   -d customer=cus_×××××××××××
```

＊これでCustomerが作成されました。
【５】（ターミナルソフト上で）【４】に出てたコマンドを打ち込んで下さい。
【６】（ターミナルソフト上で）JSON形式で返ってきたと思います。
【７】（ブラウザ上に）③Chargeと書いてあったステータス部分が④Planに変わり、下のコードが変わったと思います。

```
curl https://api.stripe.com/v1/plans \
   -u sk_test_×××××××××××: \
   -d amount=999 \
   -d currency=usd \
   -d interval=month \
   -d product[name]="×××××××××××" \
   -d id=×××××××××××
```

＊これでChargeが作成されました。
【８】（ターミナルソフト上で）【７】に出てたコマンドを打ち込んで下さい。
【９】（ターミナルソフト上で）JSON形式で返ってきたと思います。
【１０】（ブラウザ上に）④Planと書いてあったステータス部分が⑤Subscriptionに変わり、下のコードが変わったと思います。

```
curl https://api.stripe.com/v1/customers/cus_E7iK6zOfygy7Mk/subscriptions \
   -u sk_test_×××××××××××: \
   -d plan=×××××××××××
```

＊これでPlanが作成されました。
【１１】（ターミナルソフト上で）【１０】に出てたコマンドを打ち込んで下さい。
【１２】（ターミナルソフト上で）JSON形式で返ってきたと思います。
【１３】（ブラウザ上に）⑤Subscriptionと書いてあったステータス部分が⑥Successに変わり成功となります。
SPRESENSEでセマフォを使ってみる


[前回](https://qiita.com/fururu/items/c5746f28c7cb3ae4e97b)は、Spresenseで2つのスレッドでそれぞれLEDの点滅を行いました。

今回はセマフォを使ってみました。
セマフォとは、ある資源(今回の例では`count`という変数)を複数のスレッドで使用している時に、同時にアクセスされないよう排他制御する仕組みです。
詳細はこの記事の説明がわかりやすいので、そちらをご参照ください。

[イベントフラグ、セマフォ｜RTOS編](https://www.aps-web.jp/academy/rtos/03/)

## 準備

前回作成した`test`プロジェクトに、新たにアプリを追加します。

```terminal
$ tools/mkcmd.py -d test semaphore_test "My Semaphore test" # アプリ作成
$ make clean
$ tools/config.py -m # My Semaphore testにチェックを入れる
$ make
```



## セマフォを使ってみる

今回は、
- スレッドA: 200 ms周期でLED1を点滅
- スレッドB: 3秒おきに、LED1を1秒間点灯
とします。
どちらのスレッドでもLED1を使用しているので、セマフォを使って排他制御する必要があります。

```semaphore_test.c

#include <sdk/config.h>
#include <stdio.h>
#include <semaphore.h>
#include <arch/board/board.h>
#include <arch/chip/pin.h>

#define PIN_LED0  PIN_I2S1_BCK
#define PIN_LED1  PIN_I2S1_LRCK
#define PIN_LED2  PIN_I2S1_DATA_IN
#define PIN_LED3  PIN_I2S1_DATA_OUT

const int led_pin[4] = {
  PIN_LED0,
  PIN_LED1,
  PIN_LED2,
  PIN_LED3
};

sem_t sem;

void toggle_led(uint32_t pin){
  board_gpio_write(pin, board_gpio_read(pin) == 0 ? 1 : 0);
}


void* task_A(void *arg)
{
  while(1)
  { 
    // 200 ms周期でLED1を点滅
    sem_wait(&sem);
    toggle_led(led_pin[1]);
    sem_post(&sem);

    usleep(200*1000);
  }

  return NULL;
}


void* task_B(void *arg)
{
  while(1)
  {
    // 1秒間LED1を点灯
    sem_wait(&sem);   
    
    board_gpio_write(led_pin[1], 1);
    sleep(1);
    board_gpio_write(led_pin[1], 0);
    
    sem_post(&sem);
    
    // 2秒間待機
    sleep(2);

  }

  return NULL;
}




#ifdef CONFIG_BUILD_KERNEL
int main(int argc, FAR char *argv[])
#else
int semaphore_test_main(int argc, char *argv[])
#endif
{
  for(int i = 0; i < 4; i++){
    board_gpio_config(led_pin[i], 0, true, true, PIN_FLOAT); // GPIOの設定
  }

  sem_init(&sem, 0, 1);
  pthread_t thread_A, thread_B;
  
  pthread_create(&thread_A, NULL, task_A, NULL);
  pthread_create(&thread_B, NULL, task_B, NULL);

  pthread_join(thread_A, NULL);
  pthread_join(thread_B, NULL);
  
  sem_destroy(&sem);

  return 0;
}
```


## 結果
想定どおりの動きをしていることが確認できます。
試しに、task_A,task_B内の`sem_wait`,`sem_post`をコメントアウトすると、点滅し続けます。
遅刻防止システムを考えて作ってみた

「[グレンジ Advent Calendar 2018](https://qiita.com/advent-calendar/2018/grenge)」 10日目を担当の"ito_shin_2017"です

# はじめに

この前、家の鍵をスマホで操作できる[セサミスマートロック](https://jp.candyhouse.co/)を衝動買いしました
GoogleHome、Alexa、[IFTTT](https://ifttt.com/discover)とも連携出来るので色々出来そうです

僕は社会人3年目になりますが、二度寝してしまって会社に遅刻した経験が何回かあります
なので、遅刻ギリギリの時間になっても自宅にまだいるときにだけアラートを鳴らしてくれる機能をセサミスマートロックを使用して作ってみました

# ざっくり構成

![kouse.png](https://qiita-image-store.s3.amazonaws.com/0/220951/4c79b8e2-e21a-5552-54cd-53203cb1ab06.png)

# 開発環境
 
* サーバー
[arukas](https://arukas.io/)のクラウドサービスを使用しました
DockerHubに上げたImageを指定するだけでサーバーを立ち上げてくれます（※無料で利用可能です）

* 言語
golang 1.9（最近勉強中）

# IFTTTについて

>　IFTTTの名前の由来である、「もし（IF）『This（入力）』ならば（Then）『That（出力）』する」の「This」と「That」を対応サービスから選択すれば、新しいサービスが作成できるのだ。
例えば、スマートフォンの位置情報サービス（ロケーションサービス）とメールを組み合わせれば、乗換駅に着いたら、自動的に家族にメールを送るといったことが簡単に実現できる。

↑「[さまざまなサービスが連携できる「IFTTT（イフト）」の使い方 (1/3)](http://www.atmarkit.co.jp/ait/articles/1711/22/news031.html)」から引用

# ①家の鍵を解錠したら通知

<img width="1611" alt="image2.png" src="https://qiita-image-store.s3.amazonaws.com/0/220951/bea187c5-ad8c-56be-b415-34a712697444.png">


IFTTTの"This"に、セサミのスマートロックの解錠時と施錠時が指定できます
解錠したら通知したいので、「Sesame unlocked」を指定します
IFTTTの"That"には「Webhooks」でサーバーにPOSTして解錠したことを伝えてあげます

# ②遅刻ギリギリの時間になったら通知

IFTTTの"This"には「Date & Time」の「Every day of the week at」で平日9時45分に指定します
僕の場合、9時45分が"遅刻ギリギリの時間"となります

<img width="1475" alt="image5.png" src="https://qiita-image-store.s3.amazonaws.com/0/220951/be2df77f-5a00-351f-9499-9175add5a177.png">

先ほどと同じように、IFTTTの"That"には「Webhooks」でサーバーにPOSTして遅刻ギリギリの時間になったことを通知させます
（サーバー側でcronを設定しても良いと思うのですがIFTTTの方が設定が簡単で分かりやすいので）

# ③その日の解錠記録がない場合通知

「②遅刻ギリギリの時間になったら通知」がサーバーに来た時に、サーバーにその日解錠された記録がなければ、
IFTTTにPOSTして通知を送ります
もしその日解錠された記録があれば、無事に起床して家を出ているはずなので何もしないです

# ④アラートを鳴らす

"This"は「Webhooks」を指定して、「③その日の解錠記録がない場合通知」が来たときに"That"をするようにします
"That"は「VoIP」を指定します

<img width="1562" alt="image4.png" src="https://qiita-image-store.s3.amazonaws.com/0/220951/80f183a4-0a25-8f88-a817-7686bc2c9b98.png">

VoIPはIFTTTのアプリを入れた自分のiPhoneに通話をかけてくれます

<img width="375" alt="IMG_0970.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/220951/27363fe1-4779-2836-45a2-f31ee784c959.png">



# 課題点

* 0時以降家から出た場合は二度寝判定されない
* データベース使っていないので、サーバーのプログラム終了させたら鍵の解錠記録が消えちゃう

#さいごに

実装している最中に気がつきましたが、GoogleAppsScriptを使えばサーバー自体いらなくなりそうな気がしました
起きる時間になったら部屋の明かりをつけて音楽流すとかやられている方もいるので、そういうのも今後真似してやっていきたいと思いました

# 参考書籍

「[Go言語によるWebアプリケーション](https://www.oreilly.co.jp/books/9784873117522/)」
第6章の「REST形式でデータや機能を公開する」を参考にサーバー側を実装しました
SCSSを使ってparticleを大量に生成する

# 概要

SCSSのrandom関数を使ってparticle(粒子)を大量に生成する。
正確言うと、要素自体はemmetで生成して、SCSSで要素のスタイルを定義する。

# コード

particles.css

```scss
body {
  background: #000;
  margin: 0;
  padding: 0;
}

.main-container {
  height: 100vh;
  left: 0;
  position: absolute;
  width: 100vw;
}

.particle {
  background: #fff;
  position: absolute;
}

@for $i from 1 through 10000 {
  .particle:nth-child(#{$i}) {
    $size: random(2) + px;
    height: $size;
    width: $size;
    $x: random(10000);
    left: percentage($x/10000);
    $y: random(10000);
    top: percentage($y/10000);
  }
}
```

particles.html
`.particle*10000` はemmetで展開してます。
展開に10数秒の処理時間がかかるので、ここも何かのパッケージを導入して解決したい。

```html
<!DOCTYPE html>
<html lang="ja">
  <link rel="stylesheet" href="particles.css" />
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div class="main-container">
      .particle*10000
    </div>
  </body>
</html>
```

# 結果


![particles.png](https://qiita-image-store.s3.amazonaws.com/0/104942/eb4da95d-f567-c76d-4c96-eb8786aa90bc.png)

SCSSを初めて使ったが、random関数で無茶苦茶に大量のルールセットを定義できるのは、表現の範囲がまるで変わってくる。
次はうにょうにょ動かすアニメーションも定義してみたい。
Electronで画面録画のアプリを作ってみた

# はじめに

## 誰?
技術開発部というところで[SkyWay](https://webrtc.ecl.ntt.com/)というWebRTC関連のサービスの開発をしています。現在2年目です。趣味はスプラトゥーンと競技プログラミングです。

## 内容
これはNTTコミュニケーションズ Advent Calendar 2018の9日目の記事です。
Electronで画面録画をするアプリケーションを作成してみました。
作成した物は[こちらのリポジトリ](https://github.com/y-i/vue-electron-screenrecord)に公開しています。現状、最低限のボタンと画面しか存在しませんがMIME-Typeの選択も可能です。

## やろうとした動機
画面録画のアプリケーションを作ってみようと思った動機は、仕事中などでバグの発見やそのデバッグをしているときに、映像で残せたらわかりやすいと思ったからです。(macOSだとmojaveから画面録画のショートカットが存在 https://support.apple.com/ja-jp/HT208721 ) その上でOSに関わらず画面録画ができると嬉しいと思いアプリケーションを作成しようとしました。
最初はGoogle Chrome70からScreen Captureが可能になったのでその機能を利用しようとしました。screen/windowなどの選択やそのインターフェースがあり利用しやすそうだったからです。
しかし、Electronの方が手軽と思い、Electronで作り始めました。

# 実装について
## 使用技術
- electron-vue
    - Electron
    - Vue.js

## 検証環境
- Windows 10 Pro
- macOS sierra

## 実装詳細
### Screen captureについて
ChromeのScreen Captureを使おうとしたのですが、ElectronのChromiumのバージョンは66だったので上記のAPIは使えず、[ElectronのAPI](https://electronjs.org/docs/api/desktop-capturer)を使うことにしました。こちらはChromeとは違い良くも悪くもデータだけが渡されるので、選択UIなどは自作する必要があります。

### electron-vue
electron-vueを使ったのは、Electronの起動周りだったりメニューだったりという本筋と離れているが少し面倒なところをやってくれるので利用しました。vue.jsについてはほとんどデータバインディング程度の機能しか利用できていません。(vuexもvue-routerも使っていない)
実際の実装した部分は`src/render/components/Screen.vue`の中にあります。

### リストの表示と録画対象の選択について
リストの作成は、ElectronのdesktopCapturerからサムネイルなどを取得し、画像として表示しています。このメソッドからは他にもgetUserMediaで使用するIDやwindowの名前も取得可能です。
リストの映像を実際に取得するには、getUserMedia内で`chromeMediaSourceId: source.id`といった形で上記のIDを渡す必要があります。今回、macOS Sierra上では`audio:true`だと失敗したため、audioは取得していません。

### 録画と保存について
映像の録画についてはMediaRecorder APIを利用しています。Start/StopボタンがこのAPIのstart/stopに対応しているため、簡単に任意タイミングでの録画の開始と停止を実装できます。
ファイルの保存についてはnode.jsのfsモジュールを用いるだけでなのですが、getUserMediaで取得したデータを`fs.writeFileSync`で保存できるようにするまでにはデータ形式を複数回変換する必要があります。
具体的には、MediaStream -> Blob -> fileReader.result -> Uint8Arrayとなります。

## 例
例えばこのような動画を撮れます。
![ezgif-1-ddd34a474c5a.gif](https://qiita-image-store.s3.amazonaws.com/0/315100/1de1162a-2045-d3e0-7857-6c01b53c5eec.gif)

# 感想
データ形式の変換を除くとそんなに難しいところもなく画面録画が可能になりました。
もうちょっと実装すると、ライブストリーミングのAPIに投げたり、WebRTCを使って画面共有を用いて説明したりということができるようになると思います。
ひとりかんばん的な ToDo 管理アプリ「hashira」を Go で作っているぞ

この記事は、[Go3 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/go3) の 10 日目の記事です。
どうもいつも元気な @pankona です。

# 長い話を短くすると

- 現在製作中な ToDo 管理アプリの紹介です。名前は「hashira」。Go で作ってます。
  - 見た目はこんな感じです。
  - 柱が 4 本立ってるっぽく見える気がするので hashira という名前にしました。
![Screenshot from 2018-12-10 00-16-53.png](https://qiita-image-store.s3.amazonaws.com/0/36552/9c8e42f7-3223-cc7f-0d8e-43f65c3f53f5.png)


  - ターミナル上で動作する (TUI) ひとりかんばんライクなやつです。いまのところスタンドアロン (つまりインターネットなしで) 動作します。
  - リポジトリは https://github.com/pankona/hashira 。
      - (2018/12/25 追記) 最新リリースは [v1.7.0](https://github.com/pankona/hashira/releases) です。
      - バイナリリリースは Linux と Mac 向けのみ同梱。Windows 版は動作未確認なので含んでいません、ごめんなさい！
  - もし興味があったら試してみてね！動かし方は README.md を参照してください！
  - 2018/12 現在、鋭意製作中のため、粗が目立つかもしれませんがどうかひとつ生暖かい目で見守っていただければと…。

# 以下、hashira の紹介

## hashira とは何か

ターミナル上で動作する (いわゆる TUI を持つ) ToDo 管理アプリです。
ひとりかんばんライクな UI (Backlog、ToDo、Doing、Done がある) で構成しています。

## 工夫している点

ToDo アプリ作った！ってそれだけだと単なる習作のようにも聞こえてしまうかもしれないのですが、
hashira に関してはいくらか工夫しているところがあります。

### 新しく追加した ToDo は一番上に追加される

個人的にこれが一番やりたかったみたいなところあるんですが、世の中の ToDo 管理アプリの多くは、"新しく追加した ToDo をリストの末尾に追加する" 動作をするような気がします。

ですが、それだとリストが長くなってくるに従って "新しく追加した ToDo がスクロールしないと見えなくなってしまう" 状況になりがちです。いや、私のようにそんなリストが長くなるような使い方をしている時点でちょっとあれなのかもしれないですけど、私のいままでの個人的な ToDo 管理アプリの使い方として、「靴を買う」とか「シャンプー買う」とか「子の上履きを洗う」などの細かーい ToDo まで入れていきたいという気持ちがあり、この手のまで入れていこうとすると、どうしても ToDo のリストが長くなりがちになっちゃうというのは何となく想像いただけるのではないかと思います。

ちなみに私がいままで使っていた ToDo 管理アプリのてっぺんには「英語を勉強する」という一生終わらなそうな ToDo が鎮座ましましており、消すに消せず、「いや英語勉強するし」と毎日ひとりごちてはそのまま放置してしまい、結果 ToDo リストのてっぺんという特等席を占拠し続けて数年経過する、みたいなことになってしまうこともあるわけです。

私の例はちょっと極端な例かもしれませんが、**新しく追加した ToDo を一番上に追加していく**ことで、この「英語を勉強する」のような生存期間が長い腐った ToDo が勝手に押し出されて見えなくなっていくと共に、最近追加した活きの良い ToDo がよく見えるところに置かれるので嬉しい、のような効能があるように感じています。

### TUI

我々ソフトウェアエンジニアの多くは、おそらくターミナルを操作することに多くの時間を割いていることだろうと想像します。なので、ToDo 管理もターミナルで完結できるとコンテキストスイッチの面で効率いいと思うわけです。ターミナルから離れたくないぞ。

## 想定する使い方

こんな使い方を想定しています。

- 思いついた ToDo はすべて Backlog にいれる。
- 今日や明日、明後日くらいまでにやるべき何となく優先度が高いものを ToDo に移す。終わったら順次 Done に送る。
- 作業していて発生した割り込み作業や、ふと思いついた何かとかも適当に Backlog か ToDo に放り込んでいく。
  - 優先度の高い割り込み作業なんかも、新規に追加した ToDo は一番上に出てくるという動作のおかげで、ToDo として追加したけど見えなくなっちゃって忘れてしまった、なんてこともなりにくいはずだぞ！

## これから先の hashira

- いまは TUI のみですが、今後はとりあえず Android アプリ (ウィジェット) を作る予定。
  - 細かい ToDo を日常的に登録したいならばターミナルだけだとキビシイよね、PC 開けてないときもあるし…。
  - クラウド側での認証、ToDo のデバイス間での同期機能をぼちぼち実装中。
- Done に送った ToDo は消えないので、ひたすら長くなってしまう。Done に積まれた ToDo は一定期間がすぎたら自動的に見えなくするようにする予定。
- ToDo が多くなりすぎたときに所望の ToDo を探せるよう、フィルターして表示する機能も入れる予定。

その後ウェブアプリ版も、等と思っていて青写真はまあまあ壮大なのですが、いかんせんひとりで業務の隙間時間に作っているようなやつなので、このままだと出来上がるまで 100 年かかりそうな開発ペースです…。

## 制限

~~正確には使っている TUI フレームワークライブラリである [gocui](https://github.com/jroimartin/gocui) の制限ですが、日本語を始めとしたマルチバイトキャラクターを正しく入力/表示できません。キビシイ。直し方は分かっているので、近いうちに直します…！~~
(2018/12/25 追記)
[hashira v1.7.0](https://github.com/pankona/hashira/releases/tag/v1.7.0) にて、日本語入力をサポートしました！ 

## 終わりに

完全に自分のために作っている ToDo 管理アプリの紹介でしたが、いかがでしたでしょうか。
まだまだ作りかけの状態ですが、おっ、なんか面白いな、みたく思っていただければ本望です。
もしも興味をもっていただけたならば、ちょいと使ってみていただけると嬉しいです。フィードバックいただけるならなお嬉しい...！

明日は @kumakuma さんの登板予定です！お見逃しなく！
AOJ day 18: Jajanmen, typed SQLite parameters

In previous posts, I wrote about using type-level parsing for URLs. While that's nice and all, it's not necessarily what seems readily usable to solve some problem. Luckily, I have a worse problem to talk about, but with a nice solution.

Often, I use SQLite from PureScript by using the sqlite3 library. This library lets me supply parameters by naming them, and providing a record that has properties where the labels match the ones in the query, so that the parameters are applied to the query. This is nice, but in typical usage, it's untyped in that I can easily forget to specify properties and cause my query to always fail.

Well, I can solve that, can't I? I have a static query that I'm going to be using the vast majority of the time, so I can put those Symbol parsing skills to use.

## "Well-typed parameterized SQLite parameters with PureScript"

In this post, I wrote about how we can parse a type-level string to extract parameters that make up a record of parameters we need for our query, where the Symbol can be simply reflected to provide to sqlite3:

<https://qiita.com/kimagure/items/4b08e9f0479d5866ec04>

Tl;dr:

```hs
-- the type signature here is inferred:
getEm
  :: forall a b. J.AllowedParamType a => J.AllowedParamType b
  => SL.DBConnection -> { "$name" :: a, "$count" :: b } -> Aff Foreign
getEm db = J.queryDB db queryP
  where
    queryP = SProxy :: SProxy "select name, count from mytable where name = $name and count = $count"
```

Since I wrote this post, I've given a couple of talks about this library and how people might get to using it.

Long form presented in Milan: <https://speakerdeck.com/justinwoo/superior-string-spaghetti-with-purescript-jajanmen>

Short form presented in HaskellX as a lightning talk: <https://speakerdeck.com/justinwoo/type-classes-pattern-matching-for-types>

There's even a video of the HaskellX talk: <https://skillsmatter.com/skillscasts/13012-lightning-talk-superior-string-spaghetti-with-purescript>
AOJ day 17: Unions for Partial Properties

Many times when we work with JS libraries from PureScript, we find that many methods take in a record for their arguments that may have any fields that are a subset of a total set of valid properties. But how should we go about modeling this?

Luckily in PureScript 0.11.x, we gained the ability to talk about Unions of rows, where we can declare that the combination of rows `left` and `right` can form a total set `union`:

```hs
class Union (left :: # Type) (right :: # Type) (union :: # Type)
  | left right -> union
  , right union -> left
  , union left -> right
```

We can see from the fundeps that if we have the `left` and `union`, we can determine `right` here. How would we exploit this to work with JS APIs?

## "Unions for Partial Properties in PureScript"

In this post, I talked about how to take advantage of Union to partially type echarts:

<https://qiita.com/kimagure/items/581c63707673db61e061>

The approach used here matches that of React-Basic, a library from the folks at Lumi, where we can use the concrete input provided by the user and the total set of properties we know exist for a given method together to determine the unspecified complement. While we don't care about the complement very much, we at least can tell from this that we have specified a valid subset of inputs in this way.

This gives us the ability to talk about most JS interfaces that use partial sets of inputs, so this is definitely worth looking into the next time you run into object inputs.
GitHub GraphQL APIで任意の情報を一発で取得する

この記事は [Akatsuki Advent Calendar 2018](https://adventar.org/calendars/2990) の 10 日目の記事です。

# きっかけ
GitHub上の任意の情報を抽出する際に、スクリプトを組んでREST APIを何度も実行していたのですが、GraphQL APIならシンプルに欲しい情報を取得できるとのことだったので、実際に触ってみた内容を書きます。
今回はこんな感じで使えるのかーというのを掴んでもらうために、使ってみるを中心に進めていきます。

# GraphQL APIの使い方
GitHub GraphQL APIはExplorerで簡単に実行できます。
https://developer.github.com/v4/explorer/

画面はこのようになっており、左側に実行したいGraphQLを記入し、実行するだけです。
<img width="1422" alt="スクリーンショット 2018-12-09 22.00.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/64641/f0298b23-20a6-a27d-41ba-a04fc984f65e.png">



# 動かしてみる

今回は、**自分のプロジェクトに関連するチームが閲覧できるリポジトリの一覧を取得する** というクエリを書いてみます。

```
query {
  organization(login: "組織のアカウント名"){
    name,
    login,
    teams(query: "検索ワード",first: 100){
      totalCount,
      edges{
        node{
          name,
          repositories(first: 100){
            totalCount,
            edges{
              node{
                nameWithOwner
              }
            }
          }
        }
      }
    }
  }
}


```

これを実行すると、このようなデータが返ってきます。

```
{
  "data": {
    "organization": {
      "name": "組織名",
      "login": "組織のアカウント名",
      "teams": {
        "totalCount": 9,
        "edges": [
          {
            "node": {
              "name": "チーム名",
              "repositories": {
                "totalCount": 32,
                "edges": [
                  {
                    "node": {
                      "nameWithOwner": "所有者/リポジトリ名"
                    }
                  },
                  {
                    "node": {
                      "nameWithOwner": "所有者/リポジトリ名"
                    }
                  }
　　　　　　　　　　・
　　　　　　　　　　（長いので省略）
　　　　　　　　　　・
                ]
              }
            }
          },
          ・
          （長いので省略）
          ・
        ]
      }
    }
  }
}
```
このような形で、簡単に欲しい情報だけを取得することができます。

ちなみに、他にどのようなConnectionやFieldがあるか確認したい場合は、
UI上でカーソルを合わせるとリファレンスを参照できるので便利です。
<img width="1413" alt="スクリーンショット 2018-12-09 22.02.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/64641/7d24b39f-8495-d426-9592-6621ed64df0b.png">


# クエリの解説

```query {```
GraphQLには「Query」と「Mutation」という2つの型があります。
「Query」がデータの取得、「Mutation」がデータの変更になっています。
今回はデータを取得したいので、queryを使用します。

```organization(login: "組織のアカウント名"){```
ここでは組織のオブジェクトを取得します。
引数のloginが必須なので、組織のアカウント名を入れます。

```teams(query: "検索ワード",first: 100){```
組織に存在するチームのオブジェクトを取得します。
queryでチーム名に関連する文字列を入れて絞ることができます。
自分たちのプロジェクトではチームの命名規則が決まっているので、そこが引っかかるように検索ワードを入れました。
firstはリストの最初からn件を表示します。100までしか指定できないので、超える場合はafter（指定されたcursorの後に来るリスト内の要素を返す）を使用して表示する範囲を変更して対応します。

``` edges{ ```
teamsは複数のチームのデータを持っているので、それぞれのデータにアクセスするためにはedgeを介してアクセスします。
edgeはcursorなどのnodeを識別する情報を持っています。

``` node{ ```
チームのデータ（nameなどのチーム自体の情報）が含まれています。

# まとめ
このように使ってみると一つのクエリで欲しい情報に到達することができ、explorerの使い勝手もかなりよかったです。
またGraphQLというものに初めて触れましたが、シンプルに無駄のないAPIリクエストを実現できるのは魅力的だなと感じました。
ゲームを作る上でも、仕様変更によるAPIの修正は発生しており、その都度対応コストもかかっていたので、この辺りを解消できたりもするのかなーとか考えつつ、GraphQLの理解をもう少し深めたいなと思いました。
AOJ day 16: Pseudo-dynamically typed errors

Many times when we deal with errors from impure routines in PureScript applications, we have to think about errors at multiple stages. Is it an exception from the runtime that is caught as an Error? Or is it an error that we expect to handle in some way?

And while many will end up using `ExceptT` to model the expected errors, I don't find this particularly pleasing to use with impure code, where I still end up with two different layers of errors to handle.

What if I could just put information in an Error? I would really like to use the normal errors too, but the problem is that I can only store strings inside of the normal JS Error, so I have to find another way to transport error information. But is it really far off from using Error?

## "Pseudo-dynamically typed errors in PureScript"

In this post, I talk about putting my error information in a Variant value, and putting it into a subclass of Error:

<https://qiita.com/kimagure/items/71e938ee93e31bd2e79b>

By using a subclass of error, I can stuff it into wherever Error goes, and then I can retrieve this error information by using some reading operations, where I can make sure that 1) I have an instance of my VariantError class and 2) the key "type" in the runtime representation of the Variant contained is within the set of keys expected.

And by using this, I no longer need to handle errors on multiple levels and can get away with not having to deal with `ExceptT MyError Aff`. While many might disagree with this approach, this really does make working with my code much easier, especially for people who are not familiar with transformers.
Ajaxの影で消えたブラウザ非同期通信Remote Scripting

Ajaxは知っての通り、ブラウザ内で非同期通信を行うJavascriptの技術です。
１９９９年にIE5にXMLHttpRequest実装されてから、２００５年にAjaxという言葉が生まれて、現在では、SPA開発などで欠かせない技術になってきました。

こういった非同期通信の技術はAjax以外にも1999年にMicrosoftが「Remote Scripting」を出していましたが、いつの間にかに無くなっていた。
（確か、IE7かIE8出たあたりで使えなくなってた気がする）

あたらめて情報を探してみたけど、ネット上の情報が少なすぎる。

* [Wikipedia Remote Scripting](https://en.wikipedia.org/wiki/Remote_scripting)
* Microsoft公式の[Remote Scripting によってクライアントとサーバーの境界線を曖昧にする](https://msdn.microsoft.com/ja-jp/library/dd313979.aspx)
* Microsoft Docsの[Remote Scripting](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/scripting-articles/ms974566(v=msdn.10))
ぐらいか

基本的な仕組みは、
クライアントサイドは[XMLHttpRequest](https://ja.wikipedia.org/wiki/XMLHttpRequest)ではなく、
Microsoft Java VMの独自のJavaApplet（Rsproxy.class）から、
サーバーサイドの[Classc ASP(Active Server Pages)](https://ja.wikipedia.org/wiki/Active_Server_Pages)上で設定したメソッドをよびだす。

※Microsoft VMのサポートは2007年に終了
※Classc ASP(Active Server Pages)はWindows2016サポートあり。2019は？


クライアントサイドからは下記のようにRSExecuteを使ってairport.aspページのvalidateAirportメソッドをtxtDepart.valueの引数で呼び出す。

```html

<script language="JScript" src="../_ScriptLibrary/rs.htm"></script>
<script language="JScript">
RSEnableRemoteScripting("../_ScriptLibrary");
</script>
<script language="JScript">
function txtDepart_onblur()
{
 var objTest
 /*  Call the validateAirport Method on airport.asp
  When it's done call me back on airportCallBack */
 objTest = RSExecute("airport.asp","validateAirport",txtDepart.value)

 // Check to see if we have an error
 if (objTest.return_value != true)
 {
  // Display the error in the div
  alert(objReturn.return_value);
 }
}
</script>

```

そうするとサーバーサイド側ではVBScriptのvalidateAirportメソッドを呼び出されて値を返す。

```vb:airport.asp

<%@ LANGUAGE=VBSCRIPT %>
<%
' Define my Airport class
Class clsAirport
  public function validateAirport(strAirport)
 if lcase(strAirport) = "london" then
  validateAirport = "Which London airport?" & vbCRLF
validateAirport = validateAirport & "Heathrow (LHR)" & vbCRLF
validateAirport = validateAirport & "Gatwick (LGW)" & vbCRLF
validateAirport = validateAirport & "Stansted (LST)" & vbCRLF
 else
  validateAirport = true
 end if
  end function
end class

set public_description = new clsAirport

' Call RSDispatch to use the public_description object and make 
its methods available for Remote Scripting Calls
RSDispatch %>
<!--#INCLUDE FILE="../_scriptlibrary/rs.asp"-->


```

ブラウザからJavascriptを使ってサーバーと通信しているということで、
機能的にはAjaxと同じようなことが出来ているけど、
サーバーサイドはClassc ASP(Active Server Pages)が必須で、クライアント側はIEでMicrosoft VMが必須ということでということで、いつの間にかに消えてしまった。
一時期使う機会があったが、それ以外でこれを使っているところは見た事がない。
FESTA2018のおうちハック枠でLTやる事になった話

どうも。幽霊会員のMasawo Yamazakiです。

おうちハック同好会のグループにはかなり前から参加していたのですが、今までタイミングが合わずずっとROMしたり、中継をネットで見たりしてました。

きっかけは、Facebookの通知からたどった湯村さん一本の投稿

![きっかけ00.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/1e6d9c90-bf13-25ab-d582-7b6db0803d61.jpeg)

ああ、なんか(お約束の)戦いを挑まれてるな... と思いつつ、では自分も地味に参戦してんみようかとボソッと

![きっかけ01.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/7b6340f3-437f-876f-6afb-e9b4ca312188.jpeg)

と書いたところ、

![きっかけ02.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/652b3a8d-06a4-a613-e590-2322fe1fa049.jpeg)

という返信をもらったのですが、まあ埋まるだろうと軽く考えていました。
そして、FESTAの前日に展示準備をしていると湯村さんからメッセージが来ました。

![きっかけ03.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/e7395f00-7dce-bc08-af9d-c8d50255bee3.jpeg)

という事で、皆さんには申し訳ないのですが、ほとんどおうちハック要素のないままに、思う存分M5StackのLTをさせていただいちゃいました。こんな感じで投稿もしてもらいました。塚谷さん、ありがとう！！

![キャプチャ1.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/fa154b33-0609-3fe7-cd9b-6020e2a953de.jpeg)

まあ、本番ではパチパチクラッピーでページ送りをするも誰も突っ込んでくれず、でもちょっとだけ内容で笑ってくれた人もいたりで、大変良い経験？をさせてもらいました。
発表に使ったプレゼン資料はSlideshareにアップしましたので、よければ見てください。
(ほとんどNT金沢の時のネタです。)

https://www.slideshare.net/MasaoYamazaki/201812020707-festa2018-m5stack-lt

おうちハック同好会のページにも投稿させていただきました。多分これが初投稿です。

![キャプチャ2.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/ec269cb3-4fd2-6ab2-c460-4919f1042a15.jpeg)

来年は堂々とM5Stackを使ったおうちハックネタで参加します！！
ゲーム理論について

#ゲーム理論について
これはユアマイスターアドベントカレンダー2018の9日目の記事です
https://qiita.com/advent-calendar/2018/yourmystar

##ゲーム理論とは
　ゲーム理論とは、複数の意思決定をする主体が、その意思決定に関して相互作用する状況を研究する理論です。もっと噛み砕いていうと、利害関係を持つ相手がいる状況で、自分と相手の利益を考え、最適な行動を決めるための理論です。現在は通信などの分野にも広く用いられています。通信の帯域の取引やオークションの考え方などに用いられています。

##ナッシュ均衡
　ナッシュ均衡とは、お互いが最適な戦略をとった組のことです。つまり、各プレーヤーが互いに最適な戦略を取り合っているため、これ以上戦略を変更する誘因を持たない安定的な状況という意味です。

##パレート最適
　パレート最適とは、ある自分の状態をより良い状態に改善するには、他の誰かの状態を犠牲にしなくてはならない状態です。

##囚人のジレンマ
　囚人のジレンマとは、ゲーム理論の代表的なモデルです。二人の犯罪者(A,B)が捕まり、取り調べを受けています。**どちらも黙秘をすれば懲役は2年**ですみます。**片方だけが自白した場合、自白した方は無罪になり、自白しなかった方は懲役10年**となります。**両方が自白した場合は懲役5年**になります。
　この場合、お互いに自分だけが自白するというのが最も魅力的な答えになります。そのため、**ナッシュ均衡は互いに自白する**ことになります。次に、**パレート最適な解はお互いに黙秘になります。**
　お互いに黙秘した方が結果としては両者の利益にはなるが、お互いに自白してしまうというのが囚人のジレンマと言われる所以です。
WorkFusionのExcel関係のActionについて軽く調べてみた

# はじめに
エンジニア？アナリスト？サイエンティスト？歴5ヶ月めの新卒社員が最近学んだことをちょっとずつまとめてみたもの。13回目なんですが、ちょっと今日は直近でなんとか成功させたいタスクができまして。それについて下調べしたことをちょっとまとめておきたいなっていう感じでまとめてみました。題名でお気づきかとは思いますが、まぁRPA関係ですw

今日はいつもに増して暖かい目でみてほしいなぁと思います！！

ちなみに、これまでに書いた記事の最新3回分はこちら↓
[第10弾](https://qiita.com/icchy_sh33p/items/5cae50134d0e3e3e455a)
[第11弾](https://qiita.com/icchy_sh33p/items/15a6d98aa292e773d71f)
[第12弾](https://qiita.com/icchy_sh33p/items/ab6069de8a315a2d06b2)

# Excel関係Actionまとめ
- Open Spreadsheet→開くファイルを指定
- Get Column/Row→指定したカラム／行を取得。
    - 取得するものの指定方法
        - index・・・カラム／行名による指定
        - position・・・該当するカラム／行を場所で指定
            - First・・・最初のカラム／行
            - Last・・・最後のカラム／行
            - Next・・・次のカラム／行
            - Previous・・・前のカラム／行
            - Current・・・現在のカラム／行
- Save Spreadsheet→それまで指定していたものと同じファイルを指定／新しくファイルを作成のいずれかを選択したうえでデータをセーブ
- Set Range→Excelに結果を入力する
    - 変数の値を入れる範囲の設定は、Optionsの『From cell#』でどこからか、『To　cell#』でどこまでか指定
- Set Active Cell→操作を追加するにあたってターゲットとするセルに焦点を当てるアクション。
- Set Cell Value→セルに変数を代入
- Get Cell Value→セルから変数の値を取得
- Delete Cell→セルの削除
- セルに関するアクションにおける指定する設定の仕方→場所による指定か、座標による指定で設定が可能

# ファイルの検索方法
- ファイルの検索そのものは、『Files and Folders』内の『Check Existence』で可能。
- 検索したファイルからさらに指定を加えたうえで、指定したファイルを編集等する指示をRobotがすべて実行するよう設定できるかについては、もう少し検証、調査が必要そう

# 感想
今日は、やりたいこととやらないといけないことがちょっと増えてきたなって再認識した感じです。
やばい！！！焦る！！笑
けど、焦ってもよくないのも勉強会に行けば行くほど、痛感します。とある方にいわれた、『ひとつの目標という山に対して、どこまではロープウェイで行って、そこからは歩くみたいな具体的なルートを立ててみなさい』ということばがずっしりきました。学生時代とは違う勉強の仕方、ちょっとずつ学んでいこう

Advent Calendarについても、昨日今日と滑り込みセーフ状態なので、明日はもっと事前に投稿します！！
では、おやすみなさーい
（新人必見）【解答編】【プログラミング研修お題】あなたならどう解く？線のオーバーラップを判定する

## 1. はじめに

今回は前回の記事「[【プログラミング研修お題】あなたならどう解く？線のオーバーラップを判定する](https://qiita.com/5zm/items/e0950332c80b6355e57c)」の解答編になります。

お題の概要は「２つの線が重なるか（オーバーラップする）どうかを判断する処理」を実装するでした。詳細について前回の記事を参照ねがいます。

以下の観点で議論するということだったので、以下の内容も踏まえて、解答編に進みたいと思います。

* ロジックの分かりやすさ　⇒　保守性
* ステップ数（実行行数）　⇒　保守性、性能（フットプリント）
* 平均処理時間　⇒　性能（レスポンスタイム）

今回は３つの解答案を用意しました。

## 2. （解答１）端から端まで（Ｅ２Ｅ）の長さで判断する

![answer1.JPG](https://qiita-image-store.s3.amazonaws.com/0/195748/18c00af5-21e2-71ab-49f0-281e41ca5eb5.jpeg)


```java:LineUtils.java（解答１）
package com.example.training;

import java.util.Arrays;

public class LineUtils {

    public static boolean isOverlap(Line l1, Line l2) {
        int[] points = { l1.getP1(), l1.getP2(), l2.getP1(), l2.getP2() };
        Arrays.sort(points);
        int e2eLength = points[3] - points[0];
        int length1 = Math.abs(l1.getP1() - l1.getP2());
        int length2 = Math.abs(l2.getP1() - l2.getP2());
        if (e2eLength >= length1 + length2) {
            return false;
        } else {
            return true;
        }
    }
}
```

Ｅ２Ｅの長さを求めるために最大値と最小値が必要なため、配列を用意して`Arrays.sort()`でまとめて求めました。
それぞれのラインの長さは絶対値を利用してp1、p2の大小関係を考慮しないようにしました。

* 実行行数　：　１２行（isOverlapメソッド）

```console:平均処理時間
[AVERGE] : 2381.846153846154 (nano second)
```

解答の１つ目なので速いかどうか判断できません。これを基準として次の解答に進みます。
あと、`[AVERAGE]`のTYPOしてますね、、、すみません。

## 3. （解答２）オーバーラップをしない場合を主に考える

![answer2.JPG](https://qiita-image-store.s3.amazonaws.com/0/195748/c14dd309-e573-a6a8-4a0b-7d46fe93c77f.jpeg)


```java:LineUtils.java（解答２）
package com.example.training;

public class LineUtils {

    public static boolean isOverlap(Line l1, Line l2) {
        if ((Math.min(l2.getP1(), l2.getP2()) >= Math.max(l1.getP1(), l1.getP2()))
                || (Math.max(l2.getP1(), l2.getP2()) <= Math.min(l1.getP1(), l1.getP2()))) {
            return false;
        }
        return true;
    }
}
```

IF文の最初の評価が「赤のラインのMin >= 青のラインのMax オーバーラップしない」です。
`||（または）`の後の評価が「赤のラインのMax <= 青のラインのMin オーバーラップしない」です。
IF文が真にならない場合が「それ以外は全てオーバーラップする」です。
説明通りなのでソースコードは簡単に読めるかと思います。
ちなみに、空間が歪んでいない限り`||（または）`の前後が同時に成り立つことはありえません。

* 実行行数　：　７行（isOverlapメソッド）

```console:平均処理時間
[AVERGE] : 793.8846153846154 (nano second)
```

平均処理時間は解答１の半分以下になりました。
配列を利用しない分だけ軽いのかと思います。

## 4. （解答３）４点をソートし、その順番で考える

![answer3.JPG](https://qiita-image-store.s3.amazonaws.com/0/195748/3ff64627-35fb-fdda-2a1f-87d0ea1283f7.jpeg)

実装しようと思いましたが、ぱっと見て解答１、解答２と比べてメドクサソウなので、この時点で止めました。
たぶんメンドクサイということは解答２より処理性能が短くなるとは思えません。

## 5. さいごに

みなさんはどうやって解いたでしょうか。そして解答１、解答２、（解答３）のどれが分かりやすいと思いましたか。
簡単な課題でしたが、いろいろな解き方があるということ、そして思いついた方法が最適な方法かどうか検討する必要があることを理解して貰えたかと思います。

ちなみに今回は「線（１次元）がオーバーラップするか」でしたが、次元数を増やすと「面（２次元）がオーバーラップするか」、「立体（３次元）がオーバーラップするか」も同様に判断できるようになります。
興味のある方は試してみてください。