OmniAICreator/Qiita-1.07M huggingface dataset:
join、includes、eagerload、preloadに苦しんだのでまとめる

joins、includes、eagerload、preloadに苦しんだのでまとめます。

### joins
INNER JOINを生成し、関連するモデルを結合します。
データの絞りこみなどに使用します。

```rb
Post.joins(:user).where(posts: {user_id: 1})
```

### includes
includeしたアソシエーションに対し、where、joins、referencesを呼び出すとeager_loadの挙動になり、そうでなければpreloadの挙動になります。
すごく参考になりました。
https://qiita.com/k0kubun/items/80c5a5494f53bb88dc58

```rb
Post.includes(:user).where(posts: {user_id: 1})
```

### eager_load
eager_loadしたアソシエーションを一度に読み込み、キャッシュします。

```rb
Post.eager_load(:user).where(posts: {user_id: 1})
```

### preload
preloadしたアソシエーションを複数のクエリに分けて読み込みキャッシュします。
preloadしたアソシエーションに対してはwhereを使えません。
joinしない大きいテーブルを読み込む時は、eager_loadよりpreloadの方が良い

```rb
 Post.preload(:user).all
```

### 使いどころ
アソシエーションで関連モデルを読み込むのは、関連モデルが必要になった時です。
関連モデルをeachなどで１つずつデータを取り出す場合、毎回関連モデルが必要になるため、その都度データを読み込みます。
このように毎回読み込むのは、効率が悪いので、includes、eager_load、preloadを使い関連モデルを一度にまとめて読み込みましょう。データを読み込みに行ってた回数分SQLを減らせます。
sublimetext で 文字の折返しをオンオフするショートカット #Sublime

Command or Control + Shift + P で コマンドパレットを起動

次に Word Wrap Toggle を選ぶのがやりやすい

![image](https://user-images.githubusercontent.com/13635059/52930456-d21b8380-338b-11e9-9232-73220b0ee57d.png)

# シンタックス切替もよく使う

Command Pallet 活用していこう

![image](https://user-images.githubusercontent.com/13635059/52930487-faa37d80-338b-11e9-976e-f307c7b947b6.png)


# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
いい加減docker-composeでlinksを使うのをやめてnetworkでコンテナ間名前解決をする

Dockerの `--link` や docker-composeの `links` が古臭い手法になっていることは認識していたが、特に不便を感じておらず使い続けてしまっていたのでnetworkをちょっと調べてみる。

# docker-compose.yamlマイグレーション

## linksで名前解決

```yaml
version: '3'

services:
  web1:
    image: nginx:alpine
    links:
      - web2:web2
  web2:
    image: nginx:alpine
```

このようなごくシンプルな例で検証してみる。

```yaml
links:
  - web2:web2
```

の部分でweb1→web2へアクセスできるようにし、名前解決も行えるようにしたつもり。

ではweb1からweb2へcurlコマンドを叩いてみる。

```
$ docker-compose up -d
$ docker-compose exec web1 sh
# apk --update add curl
# curl web2
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
```

ここまでOK。
既知の領域。

## networkで名前解決

続いてlinksを使うのをやめるバージョン。

[ドキュメント](http://docs.docker.jp/compose/networking.html)によると、

> デフォルトでは、Compose はアプリケーションに対して ネットワーク を１つ設定します。

`network:` を書かなくてもデフォルトでnetworkは生成され、各コンテナはそのnetworkに参加した状態になるということのようだ。

さらに、

> Docker のリンク（link）は、一方通行の単一ホスト上における通信システムです。この機能は廃止される可能性があり、アプリケーションはネットワーク機能を使うようにアップデートすべきです。 **多くの場合は、docker-compose.yml で link セクションを削除するだけです。**

ということなので `links:` を削除しただけのyamlが下記。

```yaml
version: '3'

services:
  web1:
    image: nginx:alpine
  web2:
    image: nginx:alpine
```


名前解決がどのように行われるのかというと、

> リンク機能（links）とは、他のサービスから到達可能なエイリアス（別名）を定義するものです。サービス間で通信するために必要ではありません。すなわち、 **デフォルトでは、あらゆるサービスはサービス名を通して到達できます**

サービス名が自動的にそうなるのか、なるほど、ということで下記を検証。

```
$ docker-compose up -d
$ docker-compose exec web1 sh
# apk --update add curl
# curl web2
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
```

問題なくweb1からweb2にアクセスできた。

もちろんweb2→web1の名前解決も可能。

```
$ docker-compose exec web2 sh
# apk --update add curl
# curl web1
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
```

# 参考

- http://docs.docker.jp/compose/networking.html
- [dockerのlinkオプションがレガシーなので、コンテナ間で名前解決できるようにネットワークを用意する](https://qiita.com/tamanobi/items/8b8dd64ae1f959f9ff9f)
each_with_objectとinjectでhashの中身を入れ替える

結局、ボヘミアン・ラプソディ見なかったので、せめてQeenの前身となったSmileのhashの中身を入れ替えて、Queenのhashにしてみました。

each_with_objectとinjectを使って、Smileのhashから、vocal、bassを務めるティム・スタッフェルの代わりにフレディ・マーキュリーとジョン・ディーコンを加えてQueenのhashを新たに作ります。

### ＊ 2019/2/27追記
コメント欄にて@QUANONさんからコメント頂いたので追記です!
今回のようなhashの入れ替えは、Hash#mergeを使うのが一般的とアドバイス頂きました。

```rb
smile = { vocal: 'tim', guitar: 'brian', bass: 'tim', drum: 'roger' }
queen = smile.merge(vocal: 'fleddie', bass: 'jhon')

=> {:vocal=>"fleddie", :guitar=>"brian", :bass=>"jhon", :drum=>"roger"}
```

以下に書いてるようにループで面倒な事してましたね。勉強になりました！

## each_with_object

```rb
old_hash.each_with_object(初期化object) {|item, new_hash| block処理 }
```
初期化オブジェクトに{}を入れてhashにし、itemに(key、value)を入れてnew_hashに１つずつ入れるblock処理にします。

```rb
smile = { vocal:'tim', guitar:'brian', bass:'tim', drum:'roger' }

queen = smile.each_with_object({}) do |(key, val), member|
  member[key.to_sym] =
  case key
  when :vocal
    member[:vocal] = 'fleddie'
  when :bass
    member[:bass] = 'jhon'
  else
    val
  end
end
```
## inject

```rb
old_hash.inject(初期化object) {|new_hash, item| block処理 }
```

```rb
smile = { vocal:'tim', guitar:'brian', bass:'tim', drum:'roger' }

queen = smile.inject({}) do |member, (key, val)|
  member[key.to_sym] =
    case key
    when :vocal
      member[:vocal] = 'fleddie'
    when :bass
      member[:bass] = 'jhon'
    else
      val
    end
  member   #injectの場合、ブロックでループする最後に作成中のhashを返す行が必要
end
```

例題はふざけてますが、元のhashを加工して違うhashとして使用する事って、たまにあると思います。
Gitlab CI でFirebase Hostingに自動デプロイする方法


## 1. プロジェクトにFirebaseを適用

```bash
npm install -g firebase-tools
firebase login
firebase init
```

## 2. Firebaseトークンを取得

```bash
firebase login:ci
```

"1/hoge"という文字列（トークン）がコンソールに表示されるのでメモしておきます

## 3. Gitlab CIでトークンを設定

Gitlabのプロジェクトページの設定タブからEnvironment variablesを設定
キー：FIREBASE_TOKEN 
値："1/hoge" # 上で取得したトークン

<img width="1639" alt="スクリーンショット 2019-02-19 3.24.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/230651/6b647ce5-94a6-cfad-2cbb-675b3db781b1.png">

## 4. CI設定
プロジェクトフォルダ直下に以下のファイルを作成する

```.gitlab-ci.yml
image: rambabusaravanan/firebase

stages:
  - deploy

cache:                  
  paths:                
    - node_modules/     
  key: "$CI_BUILD_REPO" 

deploy-prod:
  stage: deploy
  only:
    - master
  script:
    - yarn
    - yarn run build
    - firebase use hoge-project-id --token $FIREBASE_TOKEN
    - firebase deploy --only hosting -m "Pipe $CI_PIPELINE_ID Build $CI_BUILD_ID" --token $FIREBASE_TOKEN
```


`hoge-project-id`はFirebaseのプロジェクトIDに変更すること

<img width="2026" alt="スクリーンショット 2019-02-19 3.46.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/230651/b86d3d84-3f88-7b43-52fd-849e7f229683.png">

あとはリポジトリをプッシュすれば自動デプロイされます！

### 所感
意外と簡単にできた
自動デプロイ気持ちいい〜
詳細な説明を見たい人は（英語になりますが）参考記事を参照してみてください！

### 参考
https://medium.com/@rambabusaravanan/firebase-hosting-deployment-automation-with-gitlab-ci-f3fad9130d62

以上です！
Katalon WebUI 整理

少しずつ増やします。

# WebUI.Click
* https://docs.katalon.com/katalon-studio/docs/webui-click.html#description

要素をクリックする。

|引数|型|必須|備考|
|:---|---|---|---|---:|
|to|TestObject|必須|対象要素|
|flowControl|FailureHandling|任意|失敗した場合に処理を続行するか停止するかを指定する|

```example
WebUI.click(findTestObject('Page_CuraHomepage/btn_MakeAppointment'))
```

# WebUI.verifyElementAttributeValue
* https://docs.katalon.com/katalon-studio/docs/webui-verify-element-attribute-value.html

対象要素の属性値を検証する。

|引数|型|必須|備考|
|:---|---|---|---|---:|
|to|TestObject|必須|対象要素|
|attributeName|String|必須|検証対象の属性名|
|attributeValue|String|必須|検証対象の属性値|
|timeout|int|必須|タイムアウト時間（秒）|
|flowControl|FailureHandling|任意|失敗した場合に処理を続行するか停止するかを指定する|

```
WebUI.verifyElementAttributeValue(findTestObject('Page_CuraHomepage/btn_MakeAppointment'), 'id', 'btnMakeAppointment', 20)
```
loading spinner

マテリアルデザインのCSSコンポーネント「[Matter](https://github.com/finnhvman/matter)」のCSSローディングスピナーの動きが求めていたものに近かったのでテストとして少しカスタマイズしてみました。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="https://yarnpkg.com/en/package/normalize.css">
<style>
*,*::before,*::after {
  box-sizing: inherit;
}
body {
  box-sizing: border-box;
}

/* spinner  */
.loading-spinner {
  overflow: hidden;
  width: 4em;
  height: 4em;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: #00f;
  font-size: 1em;
  -webkit-mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
  mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
  animation: loading-spinner-mask 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
}
.loading-spinner::before {
  display: block;
  width: 100%;
  height: 100%;
  border: solid 0.357em currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  content: "";
  animation: loading-spinner 0.75s infinite linear alternate;
}
:-ms-lang(x), .loading-spinner::before {/* hack for IE11 */
  animation: none;
}

@keyframes loading-spinner-mask {
  0% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(180deg);
  }
  25% {
    transform: rotate(630deg);
  }
  37.5% {
    transform: rotate(810deg);
  }
  50% {
    transform: rotate(1260deg);
  }
  62.5% {
    transform: rotate(1440deg);
  }
  75% {
    transform: rotate(1890deg);
  }
  87.5% {
    transform: rotate(2070deg);
  }
  100% {
    transform: rotate(2520deg);
  }
}
@keyframes loading-spinner {
  0% {
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-top-color: currentColor;
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: currentColor;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: currentColor;
  }
  100% {
    border-left-color: currentColor;
    border-bottom-color: currentColor;
    transform: rotate(225deg);
  }
}
</style>
</head>
<body>
<div class="loading-spinner"></div>
</body>
</html>
```

実際に表示される円とマスクの絶妙な時間差が参考になります。
動きを研究してオリジナルのローダーアニメーションも作ってみたいですね。

## 参考

* [Matter](https://github.com/finnhvman/matter)
* [Pure CSS Material Components Showcase](https://codepen.io/finnhvman/full/zMKagM)
* [Pure CSS Material Circular Progress](https://codepen.io/finnhvman/pen/bmNdNr)
* [Animated Google Loader with SVG and CSS](https://www.cssscript.com/animated-google-loader-with-svg-and-css/)

以上、ありがとうございました。
【エンジニア技術向上】爆速で技術記事を読む方法

# 【エンジニア技術向上】爆速で技術記事を読む方法
エンジニアとして今まで溜めてきた知識・知見を、複数回に渡ってご紹介したいと思います。

今回は **爆速で技術記事を読む方法** についてです。(※[速読](https://ja.wikipedia.org/wiki/%E9%80%9F%E8%AA%AD%E8%A1%93)ではありません。(_引用元：速読術 ウィキペディア (Wikipedia): フリー百科事典_))
少ない時間でたくさんの記事を知識として吸収できるように、様々なパターンを一緒に見ていきましょう。

## 1. 記事の全体像を把握する
まず一番先に確認しておきたいのは **記事のサイズ感** です。
記事を爆速で読むには、**必要とした情報が本当に存在しているのか**、**必要とした情報を理解するまでに前提知識が必要なのか** がポイントとなります。
なんとなく読んでいては、必要としない情報(ノイズ)まで頭に入れてしまうことになるからです。
以下3点の方法を順番に行なうことで、全体像を短時間で把握することができます。

1. 目次を見る
2. 一番下までスクロールし、文字の量を見る
3. 結論を読む

#### 1. 目次を読む
目次を読むことによって、概ね必要としている情報が存在するか確認することができます。
目次が存在する記事の場合は、本文に入る前に必ず確認しておきましょう。

#### 2. 一番下までスクロールし、文字の量を見る
次に文字の量を確認します。
同様の記事が複数存在する場合、簡潔に書かれている記事の方が、当然文字を読む量が少なくなり時間の短縮に繋がるからです。
また文字が多いというだけで心理的に圧倒されてしまい、読む意識と速度が下がる傾向にあります。

#### 3. 結論を読む
ここで結論を読みます。
ポイントは、記事の最後に結論が書かれている場合とそうでない場合があることです。
求めている内容を目検や検索機能で探す必要がありますが、先ほど一番下までスクロールしたことにより大体の記事のサイズ感が掴めている為、他の項目を読む(前後関係の確認)必要があるか判定できます。

これで **求めている内容が存在するのかを確認** することができ、この記事をさらに深く読み進めるのか、はたまたブラウザの戻るボタンを押すことになるのかを判断することができます。

## 2. 読む部分をスキップする
例えば以下のような記事を読み進めているとき、皆さんならどうしますか？
>(詳細は[リファレンス]()を参照してください)
...

A：リンクを開いて詳細を調べてから、記事の続きを読む
B：とりあえずこの記事を最後まで読んでから、詳細のリンクを開く

#### Aの場合
リンクを開いて詳細を理解しようとすると、間違いなくさらに理解を深める為にそのページから次のリンクを開くことになります。
すると気付いた時にはブラウザがタブだらけになり、元々読んでいたページに戻れなくなる可能性が非常に高いです。
さらに何を学習していたのかを思い出すのにも、時間がかかってしまいます。

#### Bの場合
最後まで読み進めることで、一部不明な点は残りつつも記事の内容を一連の流れとして把握することができました。
この時点でリンクを開いて詳細を確認します。
詳細の内容が理解できた状態で記事を軽く読み戻すとさらに理解が深まります。

#### AとBの比較
|選択肢|メリット|デメリット|
|:-:|:--|:--|
|A|・記事に書いてあることの意味はわかった|・結果的に時間がかかる<br>・記憶に残りにくい|
|B|・結果的に時間が省ける<br>・理解の意欲がわく|・記事に書いてあることの全てが一度に理解できない|

#### 結果：Bが有効
流れでリンクを開いていないため、最後まで記事を読んでもAに比べて理解が深まらないと思われがちですが、
Bの方が**人間の脳の仕組みに非常に適している方法**であると考えられます。
理由は、**ストーリーが脳に記憶する力を持っている** からです。
断片的に文字列や図を見ても、前後の繋がりがわからない内容は記憶に残りにくいと言われています。

#### 結論：おすすめの方法
1. 1つの記事に最後まで目を通す
2. 先ほどのリンクを開き、不明な点を調べる
3. 手順1に戻る

これが結果的に時間がかからずに記憶に残る方法であると考えられます。

## 3. 読むべき記事の選定
例えばフロントエンドの最新技術を学ぶために記事を探すとき、皆さんならブラウザの検索結果からどの記事を開きますか？
A：英語は読めないのでとりあえず日本語の記事から探し、有力な記事が見つからない場合は英語の記事を翻訳する
B：たとえ英語の記事であったとしても、検索結果の一番上から確認していく

私の経験則ですが、この選択肢のどちらが有力であるかは状況によって分かれます。
ポイントは **結果的に求めている情報が得られるどうか** です。
フロントエンドの最新技術はバージョンのアップデートが非常に盛んな為、記事によっては全く違う構文を知ることになる可能性があります。
どちらの方法を採用するかは以下の基準で考えます。

|選択肢|基準|
|:-:|:--|:--|
|A|・検索結果のメタディスクリプションを確認し、すぐに求めている情報が存在すると判断できる場合(バージョンが明記されている等)|
|B|・検索結果の上位がほとんどが英語の場合|

翻訳機能では、どうしても文脈を読み解くことが難しくなる場面があります。
出来るだけ母国語の記事を優先した方が、理解は早く進みます。

## 爆速に読むための結論
|手段|方法|
|:-:|:--|
|記事の全体像を把握する|・目次を読む<br>・一番下までスクロールし、文字の量を見る<br>・結論を読む|
|読む部分をスキップする|・最後まで読んでから文中のリンクを開く|
|記事の選定|・検索結果のメタディスクリプションで判断|

皆さんはこの記事をどのように読み進めたでしょうか？
無駄に記事を読まないように心がけることで、読む速度と記憶の定着を良くすることができます。
膨大な記事の中から取捨選択して知識を得る為に、結論を読む力を養ってください。
AngularJS

###1. 定義
- JavaScriptフレームワーク
- SPA (Single Page Application)プロジェクトを開発できる
- HTML拡張属性に基づいて動作する

###2. AngularJSの特性
- Webアプリケーションを作成するためのJavaScriptベースの開発フレームワーク
- APIを通じてデータがもらえる
- MVC （モデル・ビュー・コントローラ）モデル
- マルチプラットフォーム対応
- オーペンソース、無料

###3. AngularJSの運用モデル
![image.png](https://qiita-image-store.s3.amazonaws.com/0/349079/02eeb600-8170-3b96-f7e6-a94b8ef4167c.png)


- Module（モジュール）： AngularJSに使った資源を宣言する
- Config（コンフィグ）：プログラムの設定
- Routes（ルート）： プログラムのURLを作る
- View（ビュー）：コンテンツをHTMLスニペットとして表示する（インターフェース）
- Controller（コントローラ）： クライアントからリクエストをもらったあとで、処理する
- $scope: コントローラに可変値を保持して、ビューとコントローラの間のブリッジです

###     4. 長所と短所
#####長所：
 - SPAサイトとアプリケーションを簡単に作成できる
 - data bindでHTMLがリンクできる可能性ので、利用者 は便利にかんじる
 - Unit testは簡単だ
 - マルチプラットフォーム対応、例えば：PC、モバイル
 
#####短所：
 - 安全でない：サーバー側は、システムがスムーズに働くように定期的にアクセス許可を確認する必要がある
 - JavaScriptに依存：JavaScriptは無効だと、AngularJSが働けなくなる
Katalonで自動テストを始める 

過去にSelenium2ベースで作成したJavaテストコードをメンテしたい。
でも、SeleniumIDEが動かなくなったし、無理だなぁ。
Katalon Studio ? とてもよさそう。時代は進んでいた。
PageObject が自動で作成されるようだし、理想的。勉強ついでに、もう一度、１からコードを書くかな。

# Katalon きっかけ
* [Katalon Studioとはどんなソフトウェアか](https://qiita.com/kazurayam/items/aece5d314f84893a0a14)
* [テストの王子様 ～テスト自動化を諦めた大人へ贈る～](https://qiita.com/albyte/items/c4c56c0572e821da7a33)

# キャプチャーTips
昔、試行錯誤した際は、ページ全体のキャプチャーが全ブラウザでは出来なかった。
今回は以下を利用すれば出来る。感謝。
* [Materials](https://qiita.com/kazurayam/items/6d76148fa866129696b7)
* [aShot](https://qiita.com/kazurayam/items/ec9015e781819a5734b1)
* [aShot公式](https://github.com/pazone/ashot)
* [aShotでページ全体キャプチャーie11問題](https://github.com/pazone/ashot/issues/110)
* [上記の解決方法](https://github.com/pazone/ashot/pull/133/commits/ecde9ecf1f50d76670cd9bf14ef8c08f8bdccc67)

# Katalon有益情報
* [Katalon Studio Tutorial Video](https://www.youtube.com/playlist?list=PLNPi-ByLMIQjZh8C4xJBZfqvNcdyTorkA)
* [Manual](https://docs.katalon.com/katalon-studio/docs/overview.html)
* [Proxy Setting](https://docs.katalon.com/katalon-studio/docs/proxy-preferences.html)
* [WebUI Manual](https://docs.katalon.com/katalon-studio/docs/webui-click.html#description)

# 試した感想（利用歴一週間）
* 昔に比べてWebdriverの動作が安定している（無駄にSleepを入れなくてよい）。
* ブラウザ操作のレコードと個別のソースコード追加の行き来ができでよい。
* if、loopなど基本的な処理は、Groovyで記述できてよい。統合環境（Katalon Studio）を入れれば必要なものは揃っている印象。
* テストの中で発生する「共通操作」を別のテストケースにして、外部から呼び出せる。
また呼び出し引数によって、呼び出し元によって処理をコントロールできるのでよい。
* 昔苦戦したファイルのアップロードが比較的簡単にできた！
* 「CSV,Excelなどからデータを読み込み最後の行までループする」といったことが簡単にできた。感動。
* ヘッドレスブラウザで初めて動かしてみた。感動。
* ファイルのダウンロードは「セキュリティ」のウィンドウがでて、まだ実現できていない。キーイベントを使えばできる？
* いまのところ、とても良い。自動テストを実際にプロジェクトに組み込むことが現実的になったと思える。
digdag push が symlinks を辿ってくれないので自分で辿る

## やりたいこと

以下のようなディレクトリ構成にしたいとする。

つまり digdag project は異なるが、プロジェクト間である程度ファイルを symbolic links を使って共有したいような構成。

```
shared/
├── environment.yml
├── notification
│   ├── danger-template.yml
│   └── good-template.yml
└── tasks
    └── environment.rb
project/sample/
├── environment.yml -> ../../shared/environment.yml
├── notification
│   ├── danger-template.yml -> ../../../shared/notification/danger-template.yml
│   └── good-template.yml -> ../../../shared/notification/good-template.yml
├── sample.dig
└── tasks
    └── environment.rb -> ../../../shared/tasks/environment.rb
project/sample2/
├── environment.yml -> ../../shared/environment.yml
├── notification
│   ├── danger-template.yml -> ../../../shared/notification/danger-template.yml
│   └── good-template.yml -> ../../../shared/notification/good-template.yml
├── sample2.dig
└── tasks
    └── environment.rb -> ../../../shared/tasks/environment.rb
```

これは digdag push では扱えない。

```
Invalid symbolic link: Given path '../../shared/environment.yml' is outside of project directory
```

のようなエラーメッセージが出る。

## 対応

`rsync -KL` を使って symlinks を辿ったコピーをつくって digdag push すれば良い

```bash
$ PROJECT=sample
$ SRC_PROJECT_PATH="project/${PROJECT}"
$ PROJECT_PATH="tmp/project/${PROJECT}"
```

```bash
$ mkdir -p "${PROJECT_PATH}"
$ rsync -auvKL --delete "${SRC_PROJECT_PATH}/" "${PROJECT_PATH}/"
$ digdag push "${PROJECT} --project "${PROJECT_PATH}"
```

## ひとこと

digdga にパッチを送ろうかと思ったが実装を眺めてみると、サポートするのが面倒な気持ちがわかったので使う側で対応した。
シンボリックリンク対応の実装をしようと思ったら、内部的に同等のことをすることになるはず。
MySQL 8.0 インストール後 メモ

## MySQL5.x系と若干違うのでメモ

### インストール直後のパスワードの確認
```
[root@localhost ~]# cat /var/log/mysqld.log | grep 'temporary password'
2019-02-18T14:53:51.702752Z 5 [Note] [MY-010454] [Server] A temporary password is generated for root@localhost: YZuz:ifng1+-
```
このパスワードでログインします。
コマンドは例です。本当はパスワードがログに残るようなコマンドはだめ。

```
[root@localhost ~]# mysql -uroot -pYZuz:ifng1+-
```

### パスワード有効時間の変更
パスワードに有効期限があるので、これを無制限にします。いったんMySQLを止めて
/etc/my.cnf に記述追加

```/etc/my.cnf
[mysqld]
default_password_lifetime=0
```
MySQLを起動。

### rootパスワードの変更
その前にパスワード設定のルールを変更します。
最初はこんな風に怒られます。

```
mysql> SHOW VARIABLES LIKE 'validate_password%';
ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement.
```

いったん何でもいいのでパスワードを変更します。ここでは最初のパスワードの後ろに「123」をつけておきます。

```
mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY 'YZuz:ifng1+-123';
```

確認します。

```
mysql> SHOW VARIABLES LIKE 'validate_password%';
+--------------------------------------+--------+
| Variable_name                        | Value  |
+--------------------------------------+--------+
| validate_password.check_user_name    | ON     |
| validate_password.dictionary_file    |        |
| validate_password.length             | 8      |
| validate_password.mixed_case_count   | 1      |
| validate_password.number_count       | 1      |
| validate_password.policy             | MEDIUM |
| validate_password.special_char_count | 1      |
+--------------------------------------+--------+
7 rows in set (0.01 sec)
```

### 項目名が5.x系と違っているので注意
検索して出てくる通りにすると怒られます。

```
mysql> SET GLOBAL validate_password_policy=LOW;
ERROR 1193 (HY000): Unknown system variable 'validate_password_policy'
```

上の項目と比べて正しくはこうです。

```
mysql> set global validate_password.length=4;
Query OK, 0 rows affected (0.00 sec)

mysql> SET GLOBAL validate_password.policy=LOW;
Query OK, 0 rows affected (0.00 sec)

mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY 'NEWPASSWORD';
Query OK, 0 rows affected (0.01 sec)

```

NEWPASSWORD に新しく設定するパスワードをセットします。

### SELinuxを無効に

```
[root@localhost ~]# vi /etc/selinux/config
SELINUX=desabled
```

### phpMyAdminで利用できるために
このままだとなぜかphpMyAdminにログインできないので次のように変更

```/etc/my.cnf
[mysqld]
default_password_lifetime=0
validate_password.length=4
validate_password.mixed_case_count=0
validate_password.number_count=0
validate_password.special_char_count=0
validate_password.policy=LOW
default_authentication_plugin=mysql_native_password
```

パスワード関連はここで設定しておく方が楽かも、、、MySQLを再起動。
パスワードを再設定。

```
mysql > ALTER USER root@localhost IDENTIFIED WITH mysql_native_password BY 'xxx';
```

### CSVインポートが使えるように

```/etc/my.cnf
[client]
loose-local-infile=1
```

### 全文検索のために

```/etc/my.cf
ft_min_word_len = 2
innodb_ft_min_token_size = 2
innodb_ft_enable_stopword = OFF
```
Rubyにて一部newメソッドが機能しないクラスが存在する

# 背景

社内でオブジェクト指向を教えている時、以下は同じ意味ということをインターン生に教えた。

```rb
s = ''
s = String.new
```

しかしIntegerクラスに対して上記と同じことを試したら例外が返ってきた。

```rb
Integer.new
#=> NoMethodError: undefined method `new' for Integer:Class
```

なぜか。

# 前提知識

* Rubyにおけるオブジェクトは、特異メソッドである `new` を使用することで生成することができる
* Rubyにおいてnewでオブジェクトが生成されるクラスとされないクラスが存在する
* オブジェクトにはそれぞれ `object_id (=参照するメモリ)` を持っている

## newを実行するとオブジェクトが生成できるRubyクラス

### String

```rb
String.new
#=> ''
```

### Array

```rb
Array.new
#=> []
```

### Hash

```rb
Hash.new
#=> {}
```

## newを実行すると例外が返ってくるRubyクラス

### Integer

```rb
Integer.new
#=> NoMethodError: undefined method `new' for Integer:Class
```

### Float

```rb
Float.new
#=> NoMethodError: undefined method `new' for Float:Class
```

### TrueClass / FalseClass

```rb
TrueClass.new
#=> NoMethodError: undefined method `new' for TrueClass:Class
```

### Symbol

```rb
Symbol.new
#=> NoMethodError: undefined method `new' for Symbol:Class
```

## オブジェクトはそれぞれ `object_id` を持っている

### Stringの場合

同じ文字列だが、object_idは異なる値が返ってくる

```rb
s = 'test'
p = 'test'

s.object_id
#=> 70189307859540
p.object_id
#=> 70189307841860
```

### Integerの場合

同じ数値かつ同一のobject_idが返ってくる

```rb
s = 1
t = 1

s.object_id
#=> 3
t.object_id
#=> 3
```

# まとめ

* newを実行すると例外が返ってくるRubyクラスのオブジェクトは、1つしか持つことができない。だからobject_idが同一になり、newメソッドを使用することができない。
* 逆に値が同一でも異なるobject_idが返却されるオブジェクトの場合、newメソッドで対象のClassからオブジェクトが生成することが可能。
* オブジェクトを1つしか持つことができないメリットとして、メモリ消費を抑えることが挙げられる。文字列またはシンボルどちらでも可能な場合にシンボルが好ましいのはこの理由から。
WatchKitを試してみる３　簡単なアニメーションをノンプログラミングで

時間がまた空いた・・・空いてしまった。

### 開発環境

+ XCode10.1
+ Swift4.2.1

WatchKitでのアニメーションはWatchOS3で大幅に向上したみたいで、今回やろうとした事なんてもうプログラミングする必要すらなかったです。おそるべし・・・

![20190219_1.gif](https://qiita-image-store.s3.amazonaws.com/0/40693/7a6df244-2da9-5dfb-a9f0-97cfe6a97ff9.gif)

上のgif画像のような拡大、縮小を繰り返すレベルからもう少し複雑な動作を繰り返させるのもGUIで可能

やり方としてはシンプルにstoryboardでSpriteKitSceneを追加。

<img width="870" alt="スクリーンショット 2019-02-19 01.00.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/40693/85676ae7-647a-bd99-5538-299828f16069.png">

その後、Extension側にsksファイルを追加。

<img width="270" alt="スクリーンショット 2019-02-19 01.00.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/40693/d95349f9-56d0-41ca-eb81-bc7864fce629.png">

追加したsksファイルを開いて、skspriteNodeを追加。

<img width="1440" alt="スクリーンショット 2019-02-19 01.01.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/40693/b48ba44d-f12f-f4d2-6aae-4cd09be65b3b.png">

行いたい動作のパターンを追加したら、それら全て選択し、右クリックでEditLoopを選択。

後は、できたsksファイルをstoryboardのSpriteKitSceneで選んでおく

<img width="1132" alt="スクリーンショット 2019-02-19 01.09.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/40693/d96094cb-7b5d-3d2b-cf7e-aea372904341.png">

これだけでAppleWatchで動くアニメーションが完成。
うーん、簡単すぎる・・・

##### 参考ページ
[USING SPRITEKIT TO CREATE CUSTOM WATCHOS LOADING ANIMATIONS](http://martiancraft.com/blog/2017/09/spritekit-tutorial/)

[Apple WatchでSpriteKitを使ってアニメーション]
(http://developer.wonderpla.net/entry/blog/engineer/SpriteKit_with_watchOS3/)

参考というか、ほぼそのまま・・・
TouchDesigner内pythonでpandas



## TouchDesigner内pythonでpandasを使おうとおもったら

TouchDesigner内でPandas使おうと思って、外部パス通した後に、import pandasすると下記のエラーがでる。numpyとのパージョン整合性が合わないとのこと。

> 環境：64Bit Build 2018.27550
> Mac/Win

外部Pythonパスは、Preferenceでsite-packagesの場所を設定した。しかし、Numpyおそらく、TD内部にあるnumpyを読みに行っている。

```
ImportError: this version of pandas is incompatible with numpy < 1.12.0
your numpy version is 1.10.4.
Please upgrade numpy to >= 1.12.0 to use this pandas version
```

なので、textDat上で、Python探索パスの最前列に、所望の環境のsite-packagesを指定。

```python

import sys, os
path = os.path.join(os.path.abspath('.'), '.venv/lib/python3.5/site-packages')

if not path in sys.path:
	sys.path.insert(0,path)
	print(sys.path)

import pandas as pd
print(pd)

```
めでたく、pandasが動きました。
データサイエンティストに対する面談時のスキルチェック観点について


# はじめに

弊社の採用希望者やパートナーの参画候補者との面談時におけるスキルチェックの観点をまとめてみました。

# 弊社の職務について

どのような採用の話をするので、具体的にどのような職務を募集しているのかを先に紹介します。
弊社では、おおまかに以下のような職務を定義しています。

- データエンジニア
 - SQL,Pythonなどを使用したデータマートの作成や集計業務の実施
 - 下位職

- 分析プロジェクトリーダー
 - 分析プロジェクトのマネジメント業務
 - マネジメント特化型
- 分析コンサルタント
 - データ分析を用いたコンサルティング業務やデータドリブン組織の構築・運用の支援
 - ビジネス特化型
- MLエンジニア
 - 機械学習を用いた高度分析の実施やソリューション開発
 - データサイエンス特化型

- データサイエンティスト
 - 分析プロジェクトリーダーとデータ分析コンサルタントとMLエンジニアのハイブリッド


# スキルチェック観点について

前述の職務への適性を見極めのために、面談者のスキルを次のような観点で確認します。
実際には候補者の経歴によって都度変えているので、ここに抜粋した内容はあくまで一例です。

一般に明確な正解が定まっていないようなものもありますが、当人がどのように考えたのかを重視しています。
特に、分析に関しては、勉強会やスクール、Qiitaなどと初学者が情報を得る手段が多く、結構手軽にGit等のアウトプットを偽造できることもあり、質問で内容の精査が結構重要です。


## 全般

- 弊社or本プロジェクトを志望した理由
- これまで行ってきた分析関連の職務経歴について 
 - チームでプロジェクトを進めてきた経験とその時の規模・立場
 - 使用したツール
 - 担当した工程

- 最近興味のある技術、プロダクト、サービス

## エンジニアリング

- SQL、Pythonの利用経験
- Spark等分散処理系のソフトウェアの利用経験
- AWSやGCP等のクラウドコンピューティングの知識
- 機械学習ソリューションの開発経験
 - 使用したソフトウェアの選定方法
 - テスト設計
 - 実装時に工夫した点等

## 分析

- ExcelやBIによる分析経験
- N週or１か月のアウトプット量
- 得意な分析手法
- 新しい技術のキャッチアップ方法
- これまで扱ってきたデータの規模
 - 使用したミドルウェアやライブラリ
 - 扱うための工夫
- データの前処理
- 特徴量設計
- ハイパーパラメータチューニング
- モデルの評価
- 分析結果の品質担保

## マネジメント

- マネジメントしたチームの体制
- どのようにマネジメントを行ったか
 - 設定していた会議体 
 - 使用していたツールや作成したドキュメント
- マネジメントの中で特に意識したこと 
- アジャイルやスクラムの経験
- 仕様変更にどのように対応したか
- 業務の効率化、ナレッジの属人化への対応

## ビジネス

- クライアントの分析に対する期待値コントロール
- カスタマージャーニーやKPI等の設計経験
- データドリブンな組織・体制の構築
- 分析(あるいはモデル)の要件定義
 - 手法選択の基準
- モデルの精度指標とビジネス指標の擦り合わせ
flowの$ReadOnlyArrayでポリモーフィックなArrayを扱う

# 結論

`Array` は不変なのに対し `$ReadOnlyArray` は共変なのでポリモーフィックな型を扱えて便利やで。

## 例

ユーザ情報を表す `UserT` 型とより詳細なユーザ情報を有する `UserWithDetailsT` 型があるとする。
それぞれの型の関係性は `UserT` ≤ `UserWithDetails` となっている。

```js
type UserT = { name: string }
type UserDetailsT = { name: string, age: number }
```

このとき `UserT` と `UserDetailsT` が混在しうる `Array` を共通処理しようとして、以下のようにするとエラーとなる。

```js
const userList: Array<UserT> = [{ name: 'alice' }]
const userDetailsList: Array<UserDetailsT> = [{ name: 'bob', age: 20 }]

// Error
const userOrUserDetailsList: Array<UserT|UserDetailsT> = true ? userList : userDetailsList
```
 
なぜなら `Array` は不変（invariant）で `Array<UserT>` と `Array<UserDetailsT>` に互換性がないため。それに対して　`$ReadOnlyArray` は共変（covariant）なので互換性を持てる（[doc](ref: https://flow.org/en/docs/types/arrays/#toc-readonlyarray)）。


```js
// OK
const readOnlyUserOrUserDetailsList: $ReadOnlyArray<UserT|UserDetailsT> = true ? userList : userDetailsList
```

[Try flow でも確認してみる。](https://flow.org/try/#0C4TwDgpgBAqgzhATgFSgXigbygOwIYC2EAXFHMIgJY4DmUAvgFCiSwKIAiEwelANnFQZs+IqXJVaAGih4aJXAFcCAIyQNGjAMYB7HOSiL2AGUrlSAQUSI8IADzwkyAHzooAbRGEFAcjx9KLQgfBgBdbT0DIyQuHn44U3MoKxt7R05uXgEXN09cb1IfFR0VHxk5BQAmAAYwzQB6eqgAUWsdRCgAChTbKDM+nAA3PCo8HGAASgj9YEN2AHlEdNishLNgS2tbB3ZkAB9lzPicjApFaAB+OaRE2dJojLiBW4am+YBpLoASACUIPAAJvMcHwQD0QH04FBdMNRuMproZlBEP8gSCQOlFocnmskr9UcDQeCdk4DuwVsdXKdEOcoFcHrcoPdyUdnutGEA)

## 意気込み

上記のメリットに加え、 `Array.prototype.push` などによる `Array` への副作用も基本的に好ましくないので、今後は特に何も考えずに `$ReadOnlyArray` を使っていく所存。
概念モデル + AWS IAM との対比で Kubernetes の RBAC を理解する

# 概要

Kubernetes の RBAC は、「誰が (Subject) 」が Kubernetes のどの「リソース (Resource) 」のどの「操作 (Action) 」を利用可能かを制御します。

RBAC で実現したいことは AWS の IAM と同じです。

以前 「[AWS IAMの基本概念を概念モデルで整理した](https://qiita.com/os1ma/items/18bcdbacddb8fc7c752a)」という記事でまとめたのと同じように Kubernetes の RBAC の概念モデルを作成し、さらに AWS IAM と対比させて整理しました。

# 結論

## Kubernetes の RBAC に関する概念モデル

RBAC に関する概念をまとめると以下のようになりました。

![Kubernetes_RBAC (7).png](https://qiita-image-store.s3.amazonaws.com/0/216010/45e84cc3-8313-fc43-2bc5-5f147dfc3116.png)

## AWS IAM との対比

Kubernetes の RBAC の要素と AWS IAM の要素を対比させると、以下のようになります。

| Kubernetes RBAC | AWS IAM |
| --- | --- |
| Role, ClusterRole | IAM Policy |
| RoleBinding, ClusterRoleBinding | IAM Policy Attachment |
| ServiceAccount | IAM Role |
| Group | IAM Group |
| User | IAM User |

# 要素ごとの説明

## Role と ClusterRole

![Kubernetes_RBAC (2).png](https://qiita-image-store.s3.amazonaws.com/0/216010/715933f4-cbf4-3126-72a0-945a80236a3f.png)

Role と ClusterRole には、どのリソース (Resource) のどの 操作 (Action) を利用できるか (Rule) を定義します。
Role と ClusterRole の違いは、Namespace に紐付くか紐付かないかです。

Role と ClusterRole は AWS IAM の IAM Policy のようなものです。

| Kubernetes RBAC | AWS IAM |
| --- | --- |
| Role, ClusterRole | IAM Policy |

## RoleBinding と ClusterRoleBinding

![Kubernetes_RBAC (8).png](https://qiita-image-store.s3.amazonaws.com/0/216010/51cd5016-9b43-f056-5442-5e1e65624edf.png)

Role、ClusterRole で定義した内容を「誰か (Subject) 」に紐付けるのが RoleBinding と ClusterRoleBinding です。

| Kubernetes RBAC | AWS IAM |
| --- | --- |
| RoleBinding, ClusterRoleBinding | IAM Policy Attachment |

## Subject

![Kubernetes_RBAC (9).png](https://qiita-image-store.s3.amazonaws.com/0/216010/01892b57-d970-0dce-9fce-67138063fdbe.png)

RoleBinding、ClusterRoleBindingによる紐付け先 (Subject) は3種類あります。

- ServiceAccount
- Group
- User

ServiceAccount については後述します。
Group は User をまとめたものです。
User は人に紐付くもので、EKS であれば IAM と紐付いた認証となります。

| Kubernetes RBAC | AWS IAM |
| --- | --- |
| ServiceAccount | IAM Role |
| Group | IAM Group |
| User | IAM User |

## ServiceAccount

![Kubernetes_RBAC (6).png](https://qiita-image-store.s3.amazonaws.com/0/216010/1d7424f1-1e67-9e8a-ece9-bdf28bf2659a.png)


ServiceAccount は、Pod から Kubernetes の API を使いたいときに利用します。
ServiceAccount を Pod に紐づけることで、Pod 内から Kubernetes の API にアクセスするためのSecret が自動的に作成され、Podにマウントされます。

EC2 から AWS の API を利用する際に IAM Role を紐付けるのと同じです。

# おわりに
Kubernetes の RBAC も AWS IAM もなかなか理解できずにいたのですが、概念モデルでまとめることで理解が深まりました。

もし間違いに気付かれた方はご指摘お願いします。
Processingで雪を降らせる

概要
---
Processingで雪を降らせる方法をメモ.
奥行きを出すため、サイズと速さが連動しています(スピードが遅い雪は小さい).

コード
---

```
class Snowflake { //Snowflake Class
  float x; //x axis
  float y; //y axis
  float s; //size
  color c; //color
  float dy; //speed
        Snowflake() { //Function to create snowflakes
        x = random(width); //initial x point is random
        y = random(height);
        dy = random(0, 3); // Falling speed is random between 3 and 10
        s =  5 * dy / 4.0; //Size is small if initial speed is slow
        c = #ffffff; //white snow
        }
       void drop() { //create snow and move
        y += dy;
        if (y > height) y = 0; //if snow gets the bottom of the screen, return to top
        noStroke(); //no outline
        fill(c);
        ellipse(x, y, s, s);
    }
}
Snowflake[] sf = new Snowflake[5000]; //prepare the area for 1000 snow object




void setup(){
  size (600,600);
  noCursor();
  for (int i = 0; i < 2000; i++) { //雪⽚オブジェクトを1000 個作る
  sf[i] = new Snowflake();
  }
}

 
void draw() {
   background(12,15,32);
    for(int i = 0; i < 2000; i++) {
    sf[i].drop();
}
}

```

結果
---
![processingimage](https://d3ujv22cjrxycc.cloudfront.net/items/1D1m1R1R3W321e212G11/20190219_090417.GIF)
【UE4】C++プロジェクトでプラグインを追加する場合の手順

#はじめに
プラグインをUE4に認識させるまでは結構いろいろなブログなどで取り上げられておりBPだけならそれでも良いのだが、実際仕事をしていればC++で作業することになると思う
その場合は自分で追加したC++のコードからプラグインのAPIを使用することになるが、モジュール参照を追加しなければincludeすることができない
ちゃんとそのあたりも含めて手順をまとめている記事が少なかったのでまとめてみた
足りない手順または間違っている場合はコメントしてください

#作業環境
Windows10
UE4.21.2
VisualStudio Community 2017

#追加手順
##0.前準備
* C++プロジェクトデータであること
* 追加したいプラグインのソースを用意してあること

##1.プラグインのソースをプロジェクトに追加
プロジェクト直下に「Plugins」フォルダを作成してその中にプラグインのソースを追加する
![ue4plugin_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/138731/15d9fdb8-0f94-9f87-9980-6f6380f3beba.png)
![ue4plugin_3.PNG](https://qiita-image-store.s3.amazonaws.com/0/138731/9db84f26-9525-ef91-b65a-5532df9861de.png)

##2.UE4にプラグインを認識させる
〇〇.uprojectを右クリックし「Generate visual studio project files」を選択する
こうすることでslnファイルが再生成される（ちなみに、バージョン管理ツールなどの都合でslnファイルがない場合もこれで0から生成される）
![ue4plugin_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/138731/512c0b2c-b4f3-48a3-f768-bdc26033ef8b.png)

##3.VisualStudioを立ち上げてモジュール参照を追加する
UE4のソースコードはモジュールと呼ばれる単位ごとにUnrealBuildToolがビルドを行っている
なのでこの作業を行っていない場合includeに失敗するので気をつけよう

まず、VSを起動してソリューションエクスプローラから「(プロジェクト名).Build.cs」を開く
![ue4plugin_4.PNG](https://qiita-image-store.s3.amazonaws.com/0/138731/ac6d7ee9-08cd-9d8e-7987-7d49940a3373.png)
PublicDependencyModuleNamesに追加したプラグイン名を追加して完了
![ue4plugin_5.PNG](https://qiita-image-store.s3.amazonaws.com/0/138731/deb98635-f517-a144-1fc5-e1bfe234ac0f.png)

#参考
[UE4 プラグインを自分でビルドしてみる](http://unrealengine.hatenablog.com/entry/2015/05/20/220000)
[[UE4] モジュールについて](http://historia.co.jp/archives/3097/)
Sassを使ってnth-childを省略して書く方法


## 実現したいこと
画像をコンテナの右上に少しずつずらして表示したい
各画像に `icon:nth-child(1)` `icon:nth-child(2)` ... と書くのはシンプルじゃない。

<img width="389" alt="スクリーンショット 2019-02-19 0.02.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/239038/f9a4159a-02f9-e2c8-31e1-51eaa48d8f40.png">

## まずはVue.jsで画像を表示

```index.vue
<template>
  <section class="fruit">
    <div class="fruit__container">
      <img
        v-for="(item, i) in items"
        :key="`fruit__container-key-${i}`"
        :src="item.url"
        :alt="item.title"
        class="fruit__container__icon"
      >
      本文
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: "apple", url: "https://placehold.jp/150x150.png" },
        { title: "banana", url: "https://placehold.jp/150x150.png" },
        { title: "orange", url: "https://placehold.jp/150x150.png" },
        { title: "peach", url: "https://placehold.jp/150x150.png" },
        { title: "grape", url: "https://placehold.jp/150x150.png" }
      ]
    };
  }
};
</script>
```

## Sassを書いていく

```style.scss
.fruit {
  background-color: #afeeee;
  padding: 50px 0;
  color: #fff;

  &__container {
    background-color: #fff;
    position: relative;
    width: 50%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 15px;

    &__icon {
      position: absolute;
      top: -15px;
      width: 32px;
      height: 32px;
      margin-right: 5px;
      border: 1px solid #fff;
      border-radius: 50%;
    }
  }
}
```

この状態では各画像が重なっており１つしか見えていません。
各画像に対して `nth-child` を使って右にずらしてあげましょう。

<img width="390" alt="スクリーンショット 2019-02-19 0.14.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/239038/d1e91f6e-1517-de4a-3ab5-ecc92ac3c3ce.png">

## nth-childとfor文で画像をずらす

```style.scss
.fruit {
  &__container {
    &__icon {
      //（略）
    }

    // アイコンを右からpositionsの位置に配置
    $positions: (5, 25, 44, 65, 85);

    @for $index from 1 through length($positions) {
      &__icon:nth-child(#{$index}) {
        right: #{nth($positions, $index)}px;
      }
    }
  }
}
```

`$positions` で各画像の位置を書きます。
for文の意味は日本語に直してあげるとわかりやすいです。

- `@for $index` （$indexを繰り返す）
- `from 1 through` （1から）
- `length($positions)` （$positionsのlengthだけ）

なので、 `@for` の中では `$index` が1, 2, 3, ...と繰り返されています。
それを利用して `nth-child` に指定してあげます。

### 例えば、`$index` が `2` のときは。。

このように変換されます！
`&__icon:nth-child(#{$index})` → `&__icon:nth-child(2)`
`right: #{nth($positions, $index)}px;` → `right: 25px;`

変数をセレクタやプロパティ名にしたいときは `#{}` で囲います。
`nth($n)` はSassの関数で、指定した数($n)の要素を取り出すことができます。

## まとめ

Sassの関数を使うことで可読性が下がるという意見も聞きますが、
今回のように細かい微修正は　for文で書いた方がシンプルになり個人的には好きです！
DockerとC言語でHelloWorldする

# 概要
C言語の簡易な実行環境をDokcerで構築した時の作業メモ。
Ubuntu16.04環境で構築しました。

#内容
- フォルダ構成

```
- clang_test
  - Dockerfile
  - main.c
```

- Dockerfileを作成

```Dockerfile
FROM ubuntu:16.04

RUN apt-get update && \
    apt-get install -y sudo

RUN sudo apt-get install -y \
    build-essential \
    vim
```

- main.cを作成

```main.c
#include <stdio.h>

int main()
{
  puts("Hello World.");
  return 0;
}
```

- Dockerコンテナを立ち上げる

```bash
$ cd clang_test
$ docker build -t ubuntu/clang:16.04 .
$ docker run -it -d -v {clang_testの絶対パス}:/home --name clang {イメージID} bash
$ docker exec -it clang bash
```

- main.cをコンパイル

```bash
# clangコンテナ内で実行
$ cd /home
$ cc -o main main.c
$ ./main
Hello World.
```
respond_toを初心者向けに完全分解

##この記事の対象
respond_toがよくわからなくてとりあえずググった人

##構成
・respond_toのできる事
・使い方

## respond_toのできる事

```rb
def destroy
    @tweet = Tweet.find(params[:id])
    respond_to do |format|
      if @tweet.destroy
         format.html { redirect_to root_path }
         #root_pathへリダイレクトする
         format.js { render :action => "index" }
         #.index.html.erbで作成されたものをjson形式で表示する。
      end
    end  
end
```
destroy action が呼び出された時、formatがhtmlで指定されていたらroot_pathにリダイレクト、jsonで指定されていたらindex.html.erbをindex.html.jsで返す
##どうやって使うか

```rb
respond_to do |format|
    format.html 
    format.js { @user }
end  
```

こんな感じで、処理の終わりを指定されたformatにより変更できるように書きます。

書き方は

**format.形式  { 行いたい処理の内容 }**

です。

上記の例だと、何も処理を書かなければデフォルトのテンプレートが指定されたフォーマットで表示されます。

format.jsを使用した例だと、@userの情報をjson形式で返します（もちろんアクション内で@userの情報を取得しておく必要があります。）

##最後に

難しかったので、間違ってるとこあれば指摘ください。
bash を viモードで使うことにした

vim に改宗してから大分経つんですが、bash (というかreadline) の viモードを使ってないことに気づいたので使ってみることにしました。

まだ慣れませんが、慣れれば強そうです:thinking:


設定
=====

今のところ .inputrc はこんな感じ。

```shell
$if bash
  set editing-mode vi
  set keyseq-timeout 5

  set show-mode-in-prompt on
  set vi-cmd-mode-string "\1\e[36m\2cmd\1\e[0m\2 "
  set vi-ins-mode-string "\1\e[32m\2ins\1\e[0m\2 "

  set keymap vi-command
  "v": ""
  "\ev": edit-and-execute-command
  "\C-p": history-search-backward
  "\C-n": history-search-forward

  set keymap vi-insert
  "\ev": edit-and-execute-command
  "\C-l": clear-screen
  "\C-p": history-search-backward
  "\C-n": history-search-forward
$endif
```

最近はなるべくデフォルトで使う方向なんですが、しばらく使ってみてどうしても辛かったキーだけ設定しました。


```shell
$if bash
  # ...
$endif
```

とりあえず bash のみで有効になるようにしてます。

```shell
set keyseq-timeout 5
```

esc押してからコマンドモードに切り替わるまでのラグをなくすために設定してます。
曖昧なショートカット入力時のタイムアウト用らしいので、ショートカットの設定によっては問題がでるやもしれません。

screen や tmux を使う場合でも同じような設定があります。
screen が `maptimeout` で tmux は多分 `escape-time`（未確認）

```shell
set show-mode-in-prompt on
set vi-cmd-mode-string "\1\e[36m\2cmd\1\e[0m\2 "
set vi-ins-mode-string "\1\e[32m\2ins\1\e[0m\2 "
```

プロンプトの前にモードを表示するようにします。

エスケープシーケンスで色をつけたりできますが、プリンタブルじゃない文字は `\1` と `\2` で囲む必要があります。囲まなくて一見普通に動作しますが、 `C-u` で消したりしたときなどカーソル位置がおかしくなって不幸になります。


```shell
"v": ""
"\ev": edit-and-execute-command
```

デフォルトだと v キーは コマンドをエディタで編集し実行なんですが、暴発しまくったので Alt-v に割り当てました。


```shell
"\C-p": history-search-backward
"\C-n": history-search-forward
"\C-l": clear-screen
```

C-p / C-n / C-l はよく使ってたのでなくなるのが耐えられませんでした。
vvvv とりあえず入れとくべきコントリビューション

# とりあえず入れとくべきコントリビューション
- [Parasitic Design - a vvvv beginners cookbook](https://vvvv.org/contribution/parasitic-design-a-vvvv-beginners-cookbook)
- [DirectX11 Nodes](https://vvvv.org/contribution/directx11-nodes)
- [DX11.Particles](https://vvvv.org/contribution/dx11.particles)
- [Instance Noodles](https://vvvv.org/contribution/instance-noodles)
- [ParticlesGPU Shader Library](https://vvvv.org/contribution/particlesgpu-shader-library)

# コントリビューション導入方法
基本的にはコントリビューションのサイトとかダウンロードしたファイルの中に導入手順があるから問題ないはず。
あとは↓の動画とか参考になる
[【vvvv講座】Contributions の導入方法。これで色々なパッチが使えるように！](https://www.youtube.com/watch?v=6FnpNWnAckg&t=3s)

# 駄文
今年の頭からvvvvについて勉強を始めたんでこんな感じで備忘録とかメモを書き残して行きます。
vvvvで作ったものとかはtwitter([@moomin__7](https://twitter.com/moomin__7))に上げていってます。よかったら覗いて行ってください。
Herokuにデプロイ後に「We're sorry, but something went wrong」と表示された場合

こんにちは[@yukifreeworld12](https://twitter.com/yukifreeworld12)です。

#問題
Herokuへのデプロイの為
`$ git push heroku master`
でpush完了後にHerokuでアプリを開いたところ
**「We're sorry, but something went wrong」**
と表示されアプリがしっかりと開けない。

#解決
カラムの情報が入ったマイグレーションファイルをHerokuのデータベース上で作成する。
`$ heroku run rails db:migrate`

#結果
これで無事にHerokuでアプリが表示されるようになりました。

#追記
Herokuのエラー確認
`$ heroku logs --tail`
Apple ID を変更したいのに、「このメールアドレスは利用できません。他のアドレスを指定してください。」と言われた。

- Apple IDを、gmailに変更したかったので、[Apple ID を変更する(Apple)](https://support.apple.com/ja-jp/HT202667)にしたがって、変更手続きをしようとしたが、gmailアドレスを入れても、`このメールアドレスは利用できません。他のアドレスを指定してください。`と言われてしまった。
- しかし、このアドレスのApple IDが存在するわけではない。
- どういう状態なのかわからず、Appleコールセンターに相談してみたところ、「他のApple IDに連絡用/通知用メールアドレスとして登録されているメールアドレスは、Apple IDとして登録できません。」と教えてくれた。
- [Apple IDのページ](https://appleid.apple.com/)に、他のApple IDでサインインして確認したところ、連絡用メールアドレスに、変更したい先のgmailアドレスが登録されていたので、その登録を削除。
- 無事に変更したかったApple IDをgmailアドレスに変更することができた。
- 丁寧に対応してくださった、Appleコールセンターの人に感謝します。
PowerShellで$OLDPWD

欲しかったのでなんとかした。ということを書こうとして、本当に標準機能でないのだろうかと調べたところ、`Push-Location`と`Pop-Location`で履歴を辿ることはできるらしい。`Push-Location`のエイリアスをcdにしておけば解決と言いたかったのだが、こいつらは積んだスタックを順番にしか辿れないのであまり欲しいものではなかった。なので、安心して書き進める。

## 標準のエイリアスからcdを削除

邪魔なのでまず消す。元は`Set-Location`のエイリアス。

```powershell
rm alias:cd
```

## 関数化

エイリアスではどうにもならないので関数にする。

使い始めて気になってた、OldPwdがただの文字列リストで微妙に使い辛い部分に対応した。(2019/2/9 21時頃 追記)

```powershell
function cd ([parameter(ValueFromPipeline)]$Target) {
  [string]$Path = if ( $Target -is [int] -and $OldPwd[$Target] ) {
    ## 引数が数値で、OldPwdのn番目に何か入ってたら、履歴のn番目のパスを移動先に指定
    $OldPwd[$Target].Path
  } elseif ( $Target -is [string] ) {
    ## 引数が文字列なら、そのままそれを移動先に指定
    $Target
  } elseif ( $Target -is [IO.DirectoryInfo] ) {
    ## 引数がDirectoryInfo型なら、そのフルパスを取得して移動先に指定
    $Target.FullName
  } else {
    ## 全部通り抜けたら、ホームディレクトリを移動先に指定
    $HOME
  }

  ## グローバル変数のOldPwdに現在のディレクトリパスを追加
  [object[]]$global:OldPwd += Get-Location |
    select @{n='Id';e={$global:OldPwd.Count}},
           @{n='Path';e={$_.ProviderPath}}

  ## ディレクトリ移動
  Set-Location $Path
}
```

## 動作確認

OldPwdをオブジェクト型に変更したので動作確認結果を全面取り直し。(2019/2/9 21時頃 追記)

文字列の分。

```powershell
PS> $Pwd.ProviderPath
C:\Windows\system32
PS> cd 'C:\Windows'
PS> $Pwd.ProviderPath
C:\Windows
PS> $OldPwd

Id Path              
-- ----
 0 C:\Windows\system32


PS> 'C:\Program Files' | cd
PS> $Pwd.ProviderPath
C:\Program Files
PS> $OldPwd

Id Path              
-- ----
 0 C:\Windows\system32
 1 C:\Windows
```

DirectoryInfo型の分。

```powershell
PS> cd (ls 'C:\Windows' | ? Name -eq 'system32')
PS> $Pwd.ProviderPath
C:\Windows\System32
PS> $OldPwd

Id Path              
-- ----
 0 C:\Windows\system32
 1 C:\Windows
 2 C:\Program Files


PS> ls 'C:\Program Files' | ? Name -eq 'WindowsPowerShell' | cd
PS> $Pwd.ProviderPath
C:\Program Files\WindowsPowerShell
PS> $OldPwd

Id Path              
-- ----
 0 C:\Windows\system32
 1 C:\Windows
 2 C:\Program Files
 3 C:\Windows\System32
```

ホームディレクトリの分。実際に試したユーザはAdministratorではない。

```powershell
PS> cd
PS> $Pwd.ProviderPath
C:\Users\Administrator
PS> $OldPwd

Id Path              
-- ----
 0 C:\Windows\system32
 1 C:\Windows
 2 C:\Program Files
 3 C:\Windows\System32
 4 C:\Program Files\WindowsPowerShell
```

履歴を数値で指定する分。

```powershell
PS> $OldPwd

Id Path              
-- ----
 0 C:\Windows\system32
 1 C:\Windows
 2 C:\Program Files
 3 C:\Windows\System32
 4 C:\Program Files\WindowsPowerShell
PS> cd 0
PS> $Pwd.ProviderPath
C:\Windows\system32
PS> $OldPwd

Id Path              
-- ----
 0 C:\Windows\system32
 1 C:\Windows
 2 C:\Program Files
 3 C:\Windows\System32
 4 C:\Program Files\WindowsPowerShell
 5 C:\Windows\system32
PS> cd 1
PS> $Pwd.ProviderPath
C:\Windows
PS> $OldPwd

Id Path              
-- ----
 0 C:\Windows\system32
 1 C:\Windows
 2 C:\Program Files
 3 C:\Windows\System32
 4 C:\Program Files\WindowsPowerShell
 5 C:\Windows\system32
 6 C:\Windows
```

OldPwdもちゃんと全部履歴を持ってくれている。
Laravelのルーティング優先度でつまづいた話

# 404エラー発生

以下のルーティング・Controller・Viewを実装したところ`/stadium/create`にアクセスすることができず、
**404エラー**が発生しページが存在しないエラーが出ます。(createビューは作成しています。)

```web.php
Route::get('/', 'StadiumPostsController@index');
Route::get('/stadium/{id}', 'StadiumPostsController@show');
Route::get('/stadium/{id}/edit', 'StadiumPostsController@edit');
Route::patch('/stadium/{id}', 'StadiumPostsController@update');
Route::post('/stadium', 'StadiumPostsController@store');
Route::get('/stadium/create', 'StadiumPostsController@create');
```
```StadiumPostsController(createメソッドのみ).php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\StadiumPost;

    class StadiumPostsController extends Controller{
         public function create() {
             return view('create');
         }
}
```
```index.blade.php
    <h3>
      <a href="{{ url('/stadium/create') }}">New Stadium</a>
    </h3>
```

# エラー原因

Laravelのルーティング設定では、
###上に書かれた設定が優先的に実行される
ということです。

参考
[Laravelのルーティングチートシート](https://qiita.com/fagai/items/a1bf55b6249aee03a624)

なので、`web.php`に`/stadium/create`が一番下に書かれており、
`/stadium/{id}`が上にあることで、

1. `id`パラメータに`create`という値を受け渡す
2. Modelから`id`カラムに`create`という値が存在しない判定になる
3. `id`が`create`である他のカラムも取得できないため、showメソッドを実行したController側でエラーになる

となってしまいます。


対処方法としては以下の2通りです。

# 対処方法1：優先度を変更

単純な方法ですが、ルーティングの書く順番を変更すれば対処することができます。
`/stadium/{id}`を下にして、`/stadium/create`を上に書くことでエラー回避でき、
ちゃんとController側でcreateメソッドが実行されます。

```web.php
Route::get('/', 'StadiumPostsController@index');
Route::get('/stadium/create', 'StadiumPostsController@create'); //　上に移動
Route::get('/stadium/{id}', 'StadiumPostsController@show');//　下に移動
Route::get('/stadium/{id}/edit', 'StadiumPostsController@edit');
Route::patch('/stadium/{id}', 'StadiumPostsController@update');
Route::post('/stadium', 'StadiumPostsController@store');
```
# 対処方法2：正規表現で条件分岐

showメソッドを実行するために必要な`id`パラメータは
正の自然数しか出ない`AUTO_INCREMENT`になっておりますので、
ルーティングに0-9の数値でしか推移しないよう対処しました。

```web.php
Route::get('/', 'StadiumPostsController@index');
Route::get('/stadium/{id}', 'StadiumPostsController@show')->where('id', '[0-9]+'); //　正規表現追加
Route::get('/stadium/{id}/edit', 'StadiumPostsController@edit')->where('id', '[0-9]+');
Route::patch('/stadium/{id}', 'StadiumPostsController@update')->where('id', '[0-9]+');
Route::post('/stadium', 'StadiumPostsController@store');
Route::get('/stadium/create', 'StadiumPostsController@create');
```
mecabをubuntu18.04にインストール

mecabのインストールについてメモを残しておきます。

※この記事はubuntu18.04にmecabをインストールする場合を対象としています。

mecab公式サイト
http://taku910.github.io/mecab/#format

## mecabインストールの前に
mecabの動作に必要なものとして、以下が指定されているので準備します。

- C++コンパイラ (g++) 
- iconv

### C++コンパイラについて
以下のコマンドを実行してインストールします。

```
sudo apt install g++
```

g++がインストールされたか確認します。

```
$ g++ --verison
```

以下のような出力であればインストールできています。

```
g++ (Ubuntu 7.3.0-27ubuntu1~18.04) 7.3.0
Copyright (C) 2017 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
```

### iconv(libconv)について
以下コマンドを打ち、インストールされているか確認します。

```
iconv --version
```

インストールされてない場合、[こちら](http://www.gnu.org/software/libiconv/#downloading)からダウンロードできます。手順に従ってインストールして下さい。

## mecabのインストール
公式とほぼ同じ手順ですが、ubuntuにインストールする場合は文字コードをutf8に指定して「./configure」を実行したほうが、文字化けせずにすみます。

```
 % tar zxfv mecab-X.X.tar.gz
 % cd mecab-X.X
 % ./configure --with-charset=utf8
 % make
 % make check
 % su
 # make install
```
## 辞書のインストール
mecabと同様に文字コードをutf8に指定します。

```
% tar zxfv mecab-ipadic-2.7.0-XXXX.tar.gz
% mecab-ipadic-2.7.0-XXXX
% ./configure --with-charset=utf8
% make
% su
# make install
```
## mecabを実行
以下のコマンドでmecabを実行できます。

```
% mecab
```

試しに「私は学生です。」と入力してみます。
文字化けせず、以下のように形態素解析の結果が出力されたら成功です。

```
私は学生です。
私	名詞,代名詞,一般,*,*,*,私,ワタシ,ワタシ
は	助詞,係助詞,*,*,*,*,は,ハ,ワ
学生	名詞,一般,*,*,*,*,学生,ガクセイ,ガクセイ
です	助動詞,*,*,*,特殊・デス,基本形,です,デス,デス
。	記号,句点,*,*,*,*,。,。,。
EOS

```

# 参考文献
MeCab公式
http://taku910.github.io/mecab/#format

Linux Tutorials-Learn Linux Configuration
https://linuxconfig.org/how-to-install-g-the-c-compiler-on-ubuntu-18-04-bionic-beaver-linux

libconv
http://www.gnu.org/software/libiconv/#downloading
【解決】Polymer3をインストールしたけどcommand not foundになり詰みそうになった

# 要約

yarnでインストールするといける。

# 環境

* macOS Mojave(10.14.2)
* Node.js(11.10.0)
* npm(6.4.1)
* Homebrew 2.0.2

# Polymer3のインストール

```shell
npm install -g polymer-cli
```

インストールが終わって`polymer -v`を実行すると...`fish: Unknown command 'polymer'`(´・ω・｀)ｱﾗ?ｱﾗﾗ?ｱﾗﾗﾗﾗ?

# 調べる

`polymer3` `command` `not` `found`でググってウロウロしてたら[polymer 3 cannot run on macOS Mojave #731](https://github.com/Polymer/tools/issues/731)に辿り着く。yarn使えばいいぜ！とのこと（意訳）。

# yarn＆Polymerインストール

Homebrewでインストール。

```shell
brew install yarn
```

その後、Polymer3

```shell
yarn global add polymer-cli
```

ちょいちょいwarningが出ましたが、インストール完了。

# polymer -vを...

```shell
   /\˜˜/   /\˜˜/\
  /__\/   /__\/__\    Polymer-CLI
 /\  /   /\  /\  /\
/__\/   /__\/  \/__\  The multi-tool for Polymer projects
\  /\  /\  /   /\  /
 \/__\/__\/   /__\/   Usage: `polymer <command> [options ...]`
  \  /\  /   /\  /
   \/__\/   /__\/
```

ｷﾀｧ━━━━(ﾟ∀ﾟ)━━━━!!
これでPolymer使ってWeb Components作ってデータバインドして遊べるぅ...

# 最後に

何でyarnでいけたのかはわからない。