OmniAICreator/Qiita-1.07M huggingface dataset:
我々はそろそろ、真剣にBlueprintについて考えるべきではないか

#我々はそろそろ、真剣にBlueprintについて考えるべきではないか

**あなたは、本当にBlueprintをご存知だろうか。
Blueprint、もはやこれは、地球規模のプログラミング言語なのだ。**

あなたも無関心ではいられない、無関心であることがノードベースプログラミング迫害につながっているのだ。
ゲーム業界ではかなりノードベースプログラミングが迫害されているというほうこくがある。
我々は長期にわたり、さまざまなBlueprintの潮流を体感し続けてきた。
ゲーム業界はBlueprint無しでは生きられなくなるだろう。
今回公開する記事を通し、その事実を今一度、思い出していただきたい。

**【あなた方の知りたくない真実】** MaterialはBlueprintとは別のものであり、組み方とかが違う

##イベントドリブン
###for Unity(MonoBehavier)
インプットを取得するには、以下のようなコードを書く必要がある。

```C#:Input
void Update () {
    if (Input.GetKeyDown("return")){
        //エンターキーが押されたときの処理
    }
}
```

###for UnrealEngine(Blueprint)

![L1.png](https://qiita-image-store.s3.amazonaws.com/0/239082/59559eac-8a04-1fb1-8c47-e0f9e7377782.png)インプットを取得するイベントは、標準で組み込まれているのである。
![L2.png](https://qiita-image-store.s3.amazonaws.com/0/239082/ebaf7a60-38c6-ecc3-697e-c41328a50acd.png)　![L3.png](https://qiita-image-store.s3.amazonaws.com/0/239082/aa9eb6ca-1fc3-d376-0af8-3cac086c8a70.png)
登録したキーが押されたときに発火するActionMappingsや、スティックの倒され具合を正規化してくれるAxisMappingsもあり、わざわざ余計なことをしなくても、体感的に正しくやってくれるのである。

**【あなたが知りたくない真実】** 一見Blueprintには見えないが、LevelもBlueprintの一部である。

---

UIについても、MonoBehavierだと、「表示されるべき値が変更されたときに、UIの値も変更する」といった、気の利くことはやってくれない。常時UIを書き換えるか、気の利くことをやってくれるかもしれないUniRxを使用するかである。
Blueprintでは、表示されるべき値を監視することで、「値が変更されたときに、UIの値も変更する」という、気の利くことをやってくれるのであり、もっとUIを最適化したければ、イベントドリブンで更新することも簡単なのである。

**【あなただけが知らない真実】**
イベントディスパッチャーも、ブループリントインターフェイスも、発信されたものを受信して行動しているので、ReactiveExtensionsであるのだ。

##便利な機能
あなたは回数を限定して実行するときにDoNを使用することで、

```C#:DoN
void Update () {
    if (counter > 10) { return; }
}

```
if文とカウンター変数を省略する事ができるし、

一度だけ実行するときにDoOnceを使用することで、

```C#:DoOnce
void Update () {
    if (flag == true) { return; }
}
```
if文とフラグを省略する事ができる。

**【気づきづらい真実】** Unityのオブジェクトは多重継承だが、UnrealEngine4のアクターは単一継承である

MathExpressionは画期的な機構である。数式を記入するだけで、なんかいい感じにコーディングをやってくれる。
もはや複雑な計算を実現するために、多重カッコのスパゲッティーに悩まされることもないのだ。



**出典**　[我々はそろそろ、真剣にバンブーについて考えるべきではないか。](https://togetter.com/li/118521)（[ダイハードティルズ](diehardtales.com)・[@NJSLYR](https://twitter.com/NJSLYR)）
topコマンドをcronに仕込んで障害調査

#障害時のログ取得
日々障害の原因調査なんかをしていると、ある特定の時間に障害が発生していることに気がつくときがある。
そんな時以下のコマンドを利用してcronに登録しておけば、PCに張り付いておかなくても良いよって話。

>00 00 * * * top -b -d 30 -n 30  > top_result.txt.`date "+%Y%m%d_%H%M%S"`

上記は毎日0時より30秒間隔で30回topコマンドの結果をtop_result.txtに書き込んでくれる。
ログはdateコマンドで日付を入れることで世代管理。
調査が長引くようであれば、同じくcronにログローテートの設定を仕込めばOK
デジタル差分解析と計算強度の軽減

自分が小さい頃に知ったアルゴリズムで、よくよく考えれば単純なものですが仰々しい名前もついている、そんなものを紹介していきます。

## 概要
「デジタル差分解析」とは、描画に際して整数の加減算とシフトだけで済ませるための技法です。今回は、簡単な「直線を引く」場合を考えてみます。

## 前提とするグラフィックス環境

今の時代は、スマホですらGPUがあって3DCGを平然と実行できますが、このアルゴリズムが前提とするのは、VRAMが直接あって、何かを描画するには1ドットずつメモリを書き換える必要がある、そんな原始的な環境です。もちろん、直線を引くAPIなんてあるはずもありません。

そして、SIMDどころか浮動小数点演算、整数の乗除算なども高価な演算とみなされていました。

ということで、ハーフトーンなんて贅沢なことは考えず、ペイントで出てくるような1ドット単位でつないでいく線を描くようなことを考えていきます。

## 普通にやろうとした場合

水平、垂直な線を引く場合、アルゴリズムを考えることもなく決まりますので、傾きのある線に限定します。$(x_0, y_0)$ から $(x_1, y_1)$ へ引いた線の方程式は、（前述のように $x_0 \neq x_1$ なので）

$$
y= \frac{y_1 - y_0}{x_1 - x_0}(x - x_0) + y_0
$$

のようになります。数学であれば、これを $x_0$ から $x_1$ まで動かす…とすればいいのですが、コンピューターの場合ドットの数が決まっていますのでそうもいきません。

### 単純化

とりわけ、傾きが1を超える場合、$x$ を動かしてプロットしていては $y$ が飛び飛びになってしまってうまくいかないので、式を逆にして $y$ から $x$ を計算する必要があります。また、実際には起点の位置や線の方向などでいろいろ場合分けしないといけないのですが、アルゴリズムを考える上では煩雑になるので、いったんシンプル化します。

「左下が原点のxy平面で、$(0, 0)$ から $(x_1, y_1)$ まで線を引く（ただし、$y_1 < x_1$ ）」

こうすれば、方程式は $y = (y_1/x_1) x$ までシンプルになります。

### 演算をシンプルにする

式のとおりに計算するなら、浮動小数点数の乗除算が必要となります。少しシンプルにするには、$x$ を1ずつ動かした場合に $y$ の増える量は $y_1/x_1$ と決まっていますので、これを足し算していけば、そのたびごとの乗除算は不要となります。

さらに、浮動小数点数の演算を不要とするための方法として、「$x$ の1の変化に対して、$y$ の変化は1以下」ということを利用することが考えられます。まず、そのままの演算処理を下のように分解してみます。

0. `x = 0, y = 0, yの端数= 0`の状態からスタートする
1. `x`を1ずつ増やしつつ。以下の操作を行う
 2. `yの端数`に`y_1/x_1` を足す。
 3. `yの端数`が0.5以上なら、`y`に1を足して、`yの端数`から1を引く。

ここで、`yの端数`に`x_1`を掛け算して処理を進めると考えると、浮動小数演算が不要となります。

0. `x = 0, y = 0, yの端数= 0`の状態からスタートする
1. `x`を1ずつ増やしつつ。以下の操作を行う
 2. `yの端数`に`y_1` を足す。
 3. `yの端数`が`x_1 >> 1`以上なら、`y`に1を足して、`yの端数`から`x_1`を引く。

このように、「どうせ1ドット単位でしか描画できない」ことを積極的に使って、計算強度を削減していくのが、デジタル差分解析と呼ばれる技法です。
destroyアクションのmethod指定方法

<h1>aタグとlink_toメソッドのどちらでもmethodを指定できるようになりたい</h1>
メモアプリを作成していて、投稿したメモの削除機能を作っています。「削除」ボタンをaタグとlink_toメソッドを用いた場合では指定方法が異なるので、両方の指定方法を記録しておきます。（ルーティングはどちらも同じ）
<h1>aタグの場合</h1>

```show.html.erb
<a href="/memos/<%=memo.id%>" data-method="delete">削除</a>
```
<h1>link_toメソッドの場合</h1>

```show.html.erb
<%= link_to "削除", "/memos/#{memo.id}", :method => :delete %>
```
Linter/analysis_options.yamlの話（とDart2.1対応コードへのマイグレーション関連を少し）

Dartでコードを書く場合、ほとんどの方が、JetBrains系のIDEやVisual Studio CodeにDartプラグイン（Flutterプラグイン）を導入されていることと思います。DartプラグインはDart Analysis Serverとの連携により、構文エラーやワーニングを示してくれます。今やIDEのサポート無しにはコードを書く気が起こらないほどです。

さてDart Analysis Serverは、パッケージがあるディレクトリ（pubspec.yamlがあるディレクトリ）に `analysis_options.yaml` ファイルが存在する場合、ファイルの内容に従いAnalyzerの挙動をカスタマイズすることができます。
https://www.dartlang.org/guides/language/analysis-options

今回は `analysis_options.yaml` ファイルの設定のうち、Linterに着目してみようと思います。

## Linterの設定

前述のURLに示したページの通り、Linterの設定は下記の様な内容を `analysis_options.yaml` に記述することでカスタマイズ出来ます。

```analysis_options.yaml
linter:
  rules:
    - avoid_empty_else # else文の実行が抜けていないか（else直後のセミコロン混入など）
    - cancel_subscriptions # StreamSubscriptionのcancelが抜けていないか（メモリリーク防止）
    - close_sinks # Sinkのcloseが抜けていないか（メモリリーク防止）
        ：
```

変数名の命名規則をどうするか、文字列リテラルをダブルクォートで囲むのを許すかシングルクォートに統一するか、インスタンス生成時にnewの使用を許すかnew無しに統一するのかなど、例え自分一人しかメンテしないコードであってもバラつきが無い方が良いです。公開するコードならなおさらです。一貫性、統一性が大事です。

Android StudioでFlutterのプロジェクトを新規生成した場合など、 `analysis_options.yaml` が生成されなかったりしますので、もし設定していない場合はお好みに合わせて設定することをお薦めします。
例えばAngularDartでは、以下の設定がされています。
https://github.com/dart-lang/angular/blob/master/analysis_options.yaml

## Linterのもう一つの意義

一貫性、統一性とは別の意義が、Linterにはあると考えています。
それは、より読みやすい、又は明確なコードを書くことを助けてくれることです。

```dart
// BAD
class _Foo {
  _foo() => 42;
}
```

簡単な例ですが、上記は  `always_declare_return_types` を設定することで、メソッドの戻り値の型が定義されていないことを指摘してくれます。

```dart
// GOOD
class _Foo {
  int _foo() => 42; // intを明記することでワーニングが消える
}
```

なおコーディングスタイルの指針として以下のドキュメントがありますが、Linterでカバーしていないものもあれば、Linterでそれ以上のチェックも可能だったりします。
https://www.dartlang.org/guides/language/effective-dart/style

## Linterオプションのすべて

設定可能なオプションは、以下にすべて列挙されています。
http://dart-lang.github.io/linter/lints/options/options.html

オプションのそれぞれの意味は、ここから辿ることができます。
http://dart-lang.github.io/linter/lints/

なお、 `analysis_options.yaml` に設定したオプションであっても、コメントに `ignore:` とオプション名を記述すれば、ピンポイントでワーニングを抑止することが出来ます。

```dart
final name = element.displayName; // ignore:always_specify_types
```

ちなみに自分は以下の様に設定しています。
まず全部入りから初めて、徐々にチューニングしている最中です。
https://gist.github.com/takutaro/912b449cdd2814dd3dd8721d99bcca89

## Dart2.1対応コードへのマイグレーション関連

mixin構文がDart2.1から追加されています。
`prefer_mixin` オプションを設定すれば、mixinに置き換え可能な箇所を見つけ出すことが容易になります。
http://dart-lang.github.io/linter/lints/prefer_mixin.html

また、double型の変数に与えるリテラルの扱いが変わりました。例えばFlutterで `TextStyle(fontSize: 18.0)` と書く必要があったDart2.0から、 `TextStyle(fontSize: 18)` の様に「.0」を書かずに済むようになりました。
オプションに `prefer_int_literals` を追加することで、整数リテラルで記述可能な箇所を見つけやすくなります（無理に過去のコードを修正する必要は無いかと思いますが、統一性を持たせたい場合は役立ちます）。
http://dart-lang.github.io/linter/lints/prefer_int_literals.html

この様に、新しい文法に追従したい場合にもLinterが役立つ場合があります。
（その意味では、デフォルトで全オプションが有効な状態から、必要に応じてオプションを抑止する方が個人的には嬉しかったかも）

## まとめ

Linterを活用することで、コーディングスタイルについて、悩まない、読みやすい、明確である、一貫性を保てるという効果がありました。それだけでなく、例えば無闇に `.forEach()` を使っている場所があった等、気付ける/学べることもありました。
これからもLinterに助けられつつ、Dartコードを書いていきます。
youtube-dlで今まで取得できていた動画のurlが取得できない問題

# はじめに
[GoogleHomeとIFTTTとFirebaseとラズパイとnode.jsでyoutubeの音を流す](https://qiita.com/nakagawa1017/items/2a8dfc215210ff5a2ca7)
これを作った当初取得できていたurlが急に取得できなくなった問題が発生した
取得できるurlと取得できないurlが存在する

# 環境

```
$ pip3 list
youtube-dl (2018.10.5)
```

# エラー内容

```terminal
exec error: Error: Command failed: youtube-dl -g -x https://www.youtube.com/watch?v={item.id.videoIdが入る}
ERROR: Signature extraction failed: Traceback (most recent call last):
```

# 対応

下記で言及されているようにyoutube-dlを(2015.11.02)にアップデートする必要がある

[ERROR: Signature extraction failed: Traceback (most recent call last):](https://github.com/mps-youtube/mps-youtube/issues/376)

youtube-dl(2015.11.02)のアップデート内容
[Extractor error](https://github.com/rg3/youtube-dl/issues/7413)

ラズパイのyoutube-dlを(2015.11.02)にアップデートした

```terminal
$ sudo pip3 install youtube-dl==2018.11.07

Downloading/unpacking youtube-dl==2018.11.07
  Downloading youtube_dl-2018.11.7-py2.py3-none-any.whl (1.8MB): 1.8MB downloaded
Installing collected packages: youtube-dl
  Found existing installation: youtube-dl 2018.10.5
    Uninstalling youtube-dl:
      Successfully uninstalled youtube-dl
Successfully installed youtube-dl
Cleaning up...

$ sudo pip3 list

youtube-dl (2018.11.7)
```

無事にurlを取得できるようになった
JavaScriptで順列と組み合わせ

# JavaScriptで順列と組み合わせをつくる

JavaScriptで[1,2,3]の順列と組み合わせを作ろうと思ったら、いろいろ悩んだのでメモ

rubyだとメソッドがあるがJavaScriptにはない。探せばあるのかな

rubyだと順列は```array.permutation().to_a```、組み合わせは```array.combination().to_a```

```rb
array = [1, 2, 3]
p array.permutation(3).to_a
# [[1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1]]
p array.combination(2).to_a
# [[1, 2], [1, 3], [2, 3]]
```

## おさらい

高校の数学がなつかしい
!は階乗の意味
4! = 4*3*2*1

### 順列

nPk = n! / (n - k)!

### 組み合わせ

nNk = n! / n(n - k)!

## 順列のアルゴリズム

stabuckyさんのブログを参考させていただきました
https://stabucky.com/wp/archives/5334

おおまかにこんなかんじsplice()で一つずらしつつ、一つ減らした配列を作成

```js
let array1,array2,array3,i,j,k;
let arrayInit = []
//i = 0の処理 
array1 = [1, 2, 3] //この配列の順列を出力 
//↓
array1 // [1, 2, 3] i = 0
array2.splice(i,1) // array2は[2,3]
//↓
array1 // [1, 2, 3] i = 0
array2 // [2, 3] j = 0
array3.splice(j,1) // [3] k = 0
//↓
array1 // [1, 2, 3] i = 0
array2 // [2, 3] j = 1
array3.splice(j,1) // [2] k = 0

//これをからの配列にpushする
arrayInit.push([array1[0]].concat([array2[0]]).concat([array3[0]]))
arrayInit.push([array1[0]].concat([array2[1]]).concat([array3[0]]))
//こんな感じのfor処理でつくる
```

```js
let array1 = [1,2,3];
let arrayInit = [];
let i, j, k,array2,array3;

for(i = 0;i < array1.length; i++){
  array2 = array1.slice(0)
  array2.splice(i, 1);
  for(j = 0; j < array2.length; j++) {
    array3 = array2.slice(0)
    array3.splice(j, 1)
    for(k = 0;k < array3.length; k++){
      arrayInit.push([array1[i]].concat([array2[j]]).concat([array3[k]]))
    }
  }
}
console.log(arrayInit)

/*
[ [ 1, 2, 3 ],
  [ 1, 3, 2 ],
  [ 2, 1, 3 ],
  [ 2, 3, 1 ],
  [ 3, 1, 2 ],
  [ 3, 2, 1 ] ]
*/

```

おなじ処理を複数しているだけなので、関数処理ができないか模索中

## 組み合わせ

[1, 2, 3]の2つの組み合わせを考えてみる
簡単に言うと、左端の値から左から一つ減らした配列を組み合わせる
[1]のときは[2,3]の組み合わせ
[2]のときは[3]

```js
let array1,array2,i,j;
let arrayInit = []
//i = 0の処理 
array1 = [1, 2, 3] //この2つの組み合わせを出力 
//↓
array1 // [1, 2, 3] i = 0
array2.slice(i + 1) // array2は[2,3]
//↓
array1 // [1, 2, 3] i = 1
array2.slice(i + 1) // array2は[3]

//これをからの配列にpushする
arrayInit.push([array1[0]].concat([array2[0]])))
arrayInit.push([array1[0]].concat([array2[1]])))
//こんな感じのfor処理でつくる
```

```js
let array1 = [1,2,3];
let arrayInit = [];
let i, j,array2;

for(i = 0;i < array1.length; i++){
  array2 = array1.slice(i + 1)
  for(j = 0; j < array2.length; j++) {
    arrayInit.push([array1[i]].concat([array2[j]]))
  }
}
console.log(arrayInit)
// [ [ 1, 2 ], [ 1, 3 ], [ 2, 3 ] ] 
```

これも不器用なので簡略かできるか模索中
GCP Compute EngineでHubot BOT（Mattermost）を動かしてみました（２）

## （１）より続き
[GCP Compute EngineでHubot BOT（Mattermost）を動かしてみました（１）
](https://qiita.com/hyano1973/items/a0ad4020370194f99dc2)
# TeraTermでログイン

* known hostsリストに追加（初回のみ）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/310579/4210a983-4b2a-832d-5e5f-3b39f7cb2c46.png)

* ホストに固定した外部IPを入力し、OKをクリックします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/310579/aee561a9-6256-4295-29d8-ad67d062f421.png)

* 認証鍵を登録したときに表示されたユーザー（＝Windowsのユーザー名）と認証鍵を作成するときに入力したパスフレーズを入力します
* 「RSA/DSA/ECDSA/ED25519鍵を使う」から、「秘密鍵」から作成済みの秘密鍵（id_rsa）を選択します
* OKをクリックします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/310579/c91e67d7-98f1-efe9-5157-15a31e7e9199.png)

# CentOS設定

* スーパーユーザーに変更

```bash
$ sudo su -
```

* タイムゾーン変更

```bash
# timedatectl set-timezone Asia/Tokyo
```

* selinux無効化

```bash
# vi /etc/selinux/config
:
SELINUX=disabled
:
```

* firewalld無効化（GCPのファイアウォール機能で実施）、sshポート変更

```bash
# systemctl disable firewalld
Removed symlink /etc/systemd/system/multi-user.target.wants/firewalld.service.
Removed symlink /etc/systemd/system/dbus-org.fedoraproject.FirewallD1.service.
# vi /etc/ssh/sshd_config
:
Port xxxxx
:
```

* 再起動

```bash
# reboot
```

# GCPのファイアウォールポート変更
* CentOSで指定したsshポートと同じポートを指定します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/310579/da8c29b2-882f-85af-ef5d-503505563c60.png)

# nodejs/npmインストール、yo/generator-hubotインストール
* スーパーユーザーで作業します

```
$ sudo su -
# curl -sL https://rpm.nodesource.com/setup_10.x | bash -
# yum -y install nodejs
# npm install -g yo generator-hubot
```

# BOT作成、起動
* BOT実行ユーザーで作業します

```
# exit
$ vi .profile
export MATTERMOST_HOST="Mattermostホスト名"
export MATTERMOST_GROUP="ユーザーのグループ"
export MATTERMOST_USER="ユーザー"
export MATTERMOST_PASSWORD="パスワード"
export MATTERMOST_WSS_PORT="443"
export MATTERMOST_HTTP_PORT="443"
export MATTERMOST_TLS_VERIFY="false"
export MATTERMOST_USE_TLS="true"
:
$ source .profile
$ mkdir hubot-xxxxxx
$ cd hubot-xxxxxx
$ yo hubot --adapter matteruser
:
$ vi external-scripts.json
:
"hubot-heroku-keepalive", # →削除
:
$ bin/hubot --adapter matteruser
```
Qiitaの記事に助けられた十選


#こんな記事たちに助けられた・・・と過去形では無く、現在もこれからも助けられている

##　01 WebサービスAPIの使い方

　WebサービスのAPIはたとえ公式のドキュメントがあったとしても、利用するまでに何度もトライアンドエラーを繰り返して実際の動作を確認することになる。これが記事にまとまっていると、その労力の軽減されるほどは計り知れない。

##　02 OSやその上で動くサービスの設定方法

　新しいサービスをインストールすると、当然だが何をどうして良いのか分からない。最低限動作させるために何を設定すれば良いのか、特定の動作をさせるためには何をすれば良いのか、そういった記事があれば、驚くほど簡単に目的が達成される。まるで自分が有能になったような気分になるが、それは先駆者がテンプレートを用意してくれたおかげなのだ。


##　03 開発環境のバージョンアップによる変更点

　なんだかよく分からないけれど、バージョンアップの通知が来たからとりあえずアップデートすることがある。VSCodeなんかはバージョンアップしまくりで、いちいと追う気力もそがれてしまう。しかし何がどう変わったのか知らなければ宝の持ち腐れと言うことは多い。ここで何が変更されたのかまとまっていると、新たな機能の恩恵にあずかることが出来るのだ。

##　04 開発環境の便利なプラグインと設定方法

　新しいプラグインというのは次々に開発される。また、古いものでも知らずに見落としていることは多い。人間一人の視界など狭いものなのだ。そういったときにプラグインの一覧がまとまっていると、知らなかった便利機能に出会えることがあるのだ。そんな記事は、まるでお見合いをセッティングしてくれる仲人のような存在だ。


##　05 DBやWebサーバなどの新機能と実際の使い方

　サービス類も次々にバージョンアップされていく。新バージョンになって、欲しかった機能がついに実装されたということはたびたびある。それどころか、現在使っているバージョンにすでに欲しかった機能が実装されていたなんてこともあるのだ。


##　06 各種言語のインストール方法と稼働させるための手順

　そもそもインストールのためのパッケージ名は何でどこから拾ってくるのか、動かすためのコマンドは何なのか、最初に知らなければならないことは多い。この手順がまとまっていれば初動のハードルが下がり、興味を抱いた時点ですぐに試すことが出来る。何にしても、この自分で試すことを容易にてくれるというのはとても重要なのだ。


##　07 各種言語の便利なモジュール・ライブラリの紹介と使い方

　開発環境以上に、各種言語のモジュールの数は膨大だ。やりたいことがあったとして、その目的に関連するモジュールを自分で一つ一つ調べていたら、あっという間に人生が終わってしまう。記事に機能などがまとまっていれば、少なくとも試すべきものを絞ることが出来る。そして事前にどんなものなのかという知識を得ていれば、検証するための労力も軽減される。


##　08 Serverや各種言語の機能や性能比較

　WebサーバやDBサーバなど多種多様に存在するものの中から自分が必要としているものを選ぶなら、事前に機能や性能比較の情報は重要だ。この系統は日進月歩でトレンドも移り変わり、きちんと情報を収集しておかないと、気がついたら旧世代の遺物を取り扱っていたということになりかねない。


##　09 便利なWebサービスのまとめ

　Webサービスはビックバンが起こったかのようにその体積を広げている。それこそ星の数ほどありすぎて、一個人ではその一部すら知覚することは難しいだろう。そんなときにオススメの居住惑星を紹介されれば、快適なサービスを利用できる可能性が上がるのだ。また、自分が作ろうとしているサービスの参考になることもある。


##　0A 規格のまとめ

　何かにアクセスするための統一規格やデータフォーマットなど、よくアルファベットで略語系になっている内容の解説記事。特に有用なのは処理手順や記述書式などを明確にした内容だ。名前は知っていても、具体的な内容を知らないことは非常に多い。


#大切なのは「いいね」を押すことでは無い

　開発においてQiitaに限らずWeb上の様々な情報に助けられている。そこに感謝を示す方法は「いいね」を押すことでは無いと思っている。どんなに自分が役に立ったと思った記事でも、マイナーなサービスのアクセス方法なんかだと、「いいね」を押したところでトレンド入りなどするはずもないし、したところで一部の人にしか役に立たないのだから意味が無い。

　だったらどうすれば良いのか？ 答えは難しくない。人から恩を受けたら、そのぶん誰かに親切にすればいい。つまり記事で受けた恩は記事で返す。たとえ恩を受けた本人に直接返らなくても、回り回っていけば良いことが起こるかもしれない。恩を与える記事を書いた人も、必ず誰かに恩を受けているのだ


　もちろん自分の書いた記事に「いいね」が押されればうれしくのが人間だ。けれどそれはゲームでスコアを稼いだ嬉しさと同等のものだというのを感じている。それよりも恩返しの記事を書いてくれる人が増えてくれれば、回り回って自分がハッピーになれるのだ。もしかしたら自分が必要としていない情報が増えるかもしれない。しかし必要としているものなら検索で引っかければ何の問題も無いのだ。

　この業界は記事に限らず、無料で提供されるサービスやソフトが沢山ある。その開発や運営に直接貢献しなくても、自分が良いと思ったものを紹介するだけで、回り回って恩を返せるときが来るかもしれない。地球は丸く、どこへ向かっても一周回ったら戻ってこられるのだ。


　なんだかんだグダグダ書いたが、本当に大切なのは「感謝する気持ち」だ。これがあるかないか、ただそれだけなのだ。
【Unity(C#)】簡単にサウンドを再生、停止する方法

　　
　　
　　

この記事は

**『プログラミング完全未経験からUnityでの開発現場に迎え入れてもらえた世界一の幸せ者』**

の記事です。そのつもりでお読みください。
　　
　　


# Unity(C#)でサウンドを再生、停止する方法


###方法①publicで変数を宣言する。


```C#
public AudioSource audioSource;
```
　　
そうしたらInspector側に　　"ここに音源を入れてくれや！"
みたいなのが表示されるのでそこに音源をぶち込みましょう。

![Audio public.png](https://qiita-image-store.s3.amazonaws.com/0/244071/2f3fe733-dafe-abba-05b1-3c55b9d40250.png)
##音を再生する方法

```C#
audioSource.Play();    
```
  
　　

##音を停止する方法

```C#
audioSource.Stop();      
```

 
---
###方法②ゲームオブジェクトに直接AudioSourceをAdd Componentする。

まずは変数宣言しときましょう。

```C#
AudioSource audioSource;
```
　　
次に、Inspector側でAudio SourceコンポーネントをAdd Componentします。  
![AudioSource.png](https://qiita-image-store.s3.amazonaws.com/0/244071/7b431f74-0055-2afd-5d89-ec56a1322a83.png)





この場合はAudioClipってとこに音源をぶち込みましょう。


##音を再生する方法

```C#
audioSource = this.GetComponent<AudioSource>();
audioSource.Play();    
```
  
　　

##音を停止する方法

```C#
audioSource = this.GetComponent<AudioSource>();
audioSource.Stop();      
```
  

めちゃくちゃ簡単ですね。

”ボールを取ったら音を鳴らしたい！”　みたいなときは
もしコライダーと接触したら...という処理の場所に呼び出せばいいだけです。

もしBGMとか設定するつもりの人はAudio SourceのInspector画面いじって
"Play on Awake"と"Loop"にチェック入れてみてください。
コード一行も書かずにできます。
デコレータとyieldを使ってdictを返す関数でちょっと楽する方法

以下のような戻り値に1つの関数を適用するだけのデコレータを作っておくと

```returns.py
def returns(wrap_function):
    def decorator(f):
        def decorated(*args, **kwargs):
            return wrap_function(f(*args, **kwargs))
        return decorated
    return decorator
```

以下のコードを

```sample_old.py
def times3_old(values):
    result = {}
    for v in values:
        result[v] = v * 3
    return result

print(times3_old([1, 3, 5]))  # {1: 3, 3: 9, 5: 15}
```

以下のように書くことができます

```sample.py
@returns(dict)
def times3(values):
    for v in values:
        yield v, v * 3

print(times3([1, 3, 5]))  # {1: 3, 3: 9, 5: 15}
```
PowerShellのパイプラインでEndが呼ばれる順番を確認してみた。

この記事は、PowerShell 5.1で実行した結果をもとにしています。

# 動機
普段はC#で書いているのですが、諸処事情により「ここはPowerShellの出番かな」と思ったので書き始めたところ、usingステートメントがないってことで「じゃぁフィルターみたいな関数を書けばいいのかな」と思い立ち、「パイプラインで複数段つなげると、beginとかendが呼ばれる順番って、どうなるんだろう」となったわけです。

# 作ってみた
ということで、こんなスクリプトを書いてみました。

```powershell:filter_test.ps1
function Filter-A {
  param(
    [Parameter(Mandatory, Position = 0, ValueFromPipeline)]
    [string] $str
  )

  begin {
    echo "begin A"
  }

  process {
    $str + "A"
  }

  end {
    echo "end A"
  }
}

function Filter-B {
  param(
    [Parameter(Mandatory, Position = 0, ValueFromPipeline)]
    [string] $str
  )

  begin {
    echo "begin B"
  }

  process {
    $str + "B"
  }

  end {
    echo "end B"
  }
}

1..5 | Filter-A | Filter-B
```

# 実行してみた
実行してみたところ、こんな結果になりました。

```
PS > .¥filter_test.ps1
begin B
begin AB
1AB
2AB
3AB
4AB
5AB
end AB
end B
```

> begin B
> begin AB

やってしまいました。Filter-Aのbeginが`echo "begin A"`しているので、それをFilter-Bが受け取って、Filter-Bのbegin実行後、Filter-Bのprocessで`$str + "B"`してしまっています。

> 1AB

ここから5行は予定通りですね。

> end AB

これって、出力しているのはFilter-Bのprocessですね。ということは、Filter-Aのendで実行された`echo "end A"`をFilter-Bが受け取って処理し、その後にFilter-Bのendが実行されているということです。

# まとめ
ということで、パイプラインでは先頭から順番にbeginが実行され、先頭から順番にendも実行されていました。
つまり、C#のusingステートメントをネストした場合とはendの呼ばれる順番が逆になるので、そのままでは代替にならない（場合もある）ということでした。
ぐぬぬ。。。
Railsでよく利用するコマンドとRSpec、FactoryBotを導入するまで【Railsチートシート】

Railsで新規アプリを作成する時、毎回調べてしまうためまとめる。

今回のリポジトリのURL: https://github.com/harhogefoo/rails_rspec

# 前提環境
* ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin16]
* Rails5.1.6

# 新規アプリ作成
今回はアプリ名を`rails_rspec`として記述します。

```bash
$ rails new rails_rspec
# APIを作成する場合は
$ rails new rails_rspec --api

$ cd rails_rspec
```

# RSpecをインストールする
公式: https://github.com/rspec/rspec-rails

## GemfileにRSpecを追加
```rb:Gemfile
group :development, :test do
  gem 'rspec-rails'
end
```

## RSpecの設定
```bash
$ bundle install
$ bin/rails g rspec:install
```

## .rspecを編集する
```bash:.rspec
--require spec_helper
--format documentation
```

## binstubを利用する
* 高速にRSpecの実行が可能になる

```rb:Gemfile
group :development do
  gem 'spring-commands-rspec'
end
```

```
$ bundle install
$ bundle exec spring binstub rspec
* bin/rspec: generated with spring
```

bin配下に `rspec` が生成される。

## 不要なspecファイルを生成しないようにする
```rb:config/application.rb
module RailsSpec
  class Application < Rails::Application

  ...
    config.generators do |g|
      g.test_framework(
        :rspec,
        view_specs: false,
        helper_specs: false,
        routing_specs: false,
        request_specs: false
      )
    end
  end
```


## RSpecを実行する
```bash
$ bin/rspec
c
Running via Spring preloader in process 32839
No examples found.

Finished in 0.00042 seconds (files took 0.24181 seconds to load)
0 examples, 0 failures
```

# FactoryBotをインストールする
```rb:Gemfile
group :development, :test do
  ...
  gem 'factory_bot_rails'
end
```

```
$ bundle install
```

# ファクトリーの作成
```bash
$ bin/rails g factory_bot:model User
```

# モデルの作成
* モデル名は単数形で書くこと

```bash
$ bin/rails g model user
```


# コントローラーの作成
* コントローラー名は対象のモデル名の複数形にすること

```bash
$ bin/rails g controller users
```

# specファイルの作成
## モデルのspecファイルの作成
```bash
$ bin/rails g rspec:model user
```

## コントローラーのspecファイルの作成
```bash
$ bin/rails g rspec:controller users
```
[Rails] model名が原因でエラーになる場合の対処方法

# 概要
`bundle exec rails g model xxx` を実行すると以下のエラーが発生する。
このエラーを解消するための方法そして原因について書き記すものである。

```bash
The name 'xxx' is either already used in your application or reserved by Ruby on Rails. Please choose an alternative and run this generator again.
```

# 前提
- Ruby 2.5.1
- Rails 5.2
- RailsアプリケーションをHogeで作成(`bundle exec rails new hoge`)
- HogeアプリケーションをHogeCoreにアプリケーションを変更

# エラー
```bash
$ bundle exec rails g model hoge
Running via Spring preloader in process 59696
      invoke  active_record
The name 'Hoge' is either already used in your application or reserved by Ruby on Rails. Please choose an alternative and run this generator again.
```

# 原因
本来、アプリケーション名とモデル名を同じにすることができないことが原因と判明（[参考](http://jewelrybox.wpblog.jp/2017/08/24/%E3%83%A2%E3%83%87%E3%83%AB%E4%BD%9C%E6%88%90%E6%99%82%E3%81%AB%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E6%99%82%E3%81%AE%E5%AF%BE%E5%87%A6%E6%B3%95-ruby-rails/)）

アプリケーション名を事前にHogeからHogeCoreに変更しているので、
アプリケーション名とモデル名が一致しないので問題ないように思える。

しかし、ここに大きな落とし穴があった！！！！

アプリケーション名の変更をLinuxコマンドの**mvコマンドを実行してアプリケーションフォルダのみ変更したが、この変更方法に問題があった。** 
というより、もう１箇所変更しないといけない箇所がある。

# 解決方法
### 1. アプリケーションフォルダを変更する。

```bash
$ mv hoge hoge_core
```

### 2. 設定ファイルの名前空間を変更する。([参考](https://qiita.com/yyuuiikk/items/13298f81eb2dc93778c9))

#### 変更前
```ruby:config/application.rb
require_relative 'boot'
require 'rails/all'

Bundler.require(*Rails.groups)

module Hoge
  class Application < Rails::Application
    config.load_defaults 5.2
    # (省略)
  end
end
```

#### 変更後
```ruby:config/application.rb
require_relative 'boot'
require 'rails/all'

Bundler.require(*Rails.groups)

module HogeCore # この行の名前を変更！！！！！
  class Application < Rails::Application
    config.load_defaults 5.2
    # (省略)
  end
end
```

# 解消を確認
前項の解決方法を実施した後に再度Modelを作成すると成功する！

```bash
$ bundle exec rails g model hoge
Running via Spring preloader in process 61629
      invoke  active_record
      create    db/migrate/20181110124442_create_hoges.rb
      create    app/models/hoge.rb
      invoke    rspec
      create      spec/models/hoge_spec.rb
      invoke      factory_bot
      create        spec/factories/hoges.rb
```

# まとめ
モデル名を変更できない場合は、モデル名とアプリケーション名だけではなく周辺設定(configファイル)を合わせて確認すると幸せになる。

よい、Railsライフを！！！
<メモ>ServiceNow Kingston ATF Known Errors

# スクリーンショットが見切れる
ワークアラウンド：sys_propertyにてmin_width/min_heightを広げる。
Automated Test Framework: Screenshot does not display the bottom of a UI Element because it is hidden by the bottom of the page.
https://hi.service-now.com/kb_view.do?sys_kb_id=055acf3edbdff284d7e37aa31f9619e8

#　選べないフィールドがある

https://hi.service-now.com/kb_view.do?sys_kb_id=f9779ff6db975740fece0b55ca9619a1

Fixed in London Patch 2
【Unity(C#)】重力をスクリプトから任意のタイミングで操作する方法

  
  

 
この記事は

**『プログラミング完全未経験からUnityでの開発現場に迎え入れてもらえた世界一の幸せ者』**

の記事です。そのつもりでお読みください。


以下のスクリプトを重力を制御したいゲームオブジェクトにくっつけて任意のタイミングで呼び出せばOKです。

```C#
Rigidbody rd;

rd = this.GetComponent<Rigidbody>();
rd.useGravity = true;
    
```
"true"でON、"false"でOFFです。
Squirrel SQL ClientでMySQLに接続しようとしたらできなくてつまった

squirrelでmysqlに接続しようとしたらタイムゾーン関係でエラー

windowsだとmysql側のタイムゾーンの設定でエラーになるようです。

下記記事を参考に接続URLを
` "jdbc:mysql://localhost:3306/[データベース名]?characterEncoding=UTF-8&serverTimezone=JST"`
のようにすると繋がりました。
mysqlに直接タイムゾーンを設定する方法もあるようです。

参考
https://www.nakamuri.info/mw/index.php/Mysql-connector-java_%E3%81%AE%E3%83%90%E3%82%B0%E3%81%A7_Java%E3%81%8B%E3%82%89MySQL%E3%81%AB%E6%8E%A5%E7%B6%9A%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84
【AWS入門】EC2を使用してAWS上に仮想サーバーを立ててみる

#AWSのEC2って？
EC2とは「Elastic Compute Cloud」の略。
AWS上に仮想サーバー(インスタンス)を立てられる。
EC2はAWSでは古くからあるサービスであり、
これから勉強していこうと思っている方には覚えておくべきサービスの1つ。

#コンソール画面から数クリックのみで立てられる

アカウント作成したらコンソール画面にてサービス一覧より「EC2」を選択。
![01.png](https://qiita-image-store.s3.amazonaws.com/0/171267/9b5a4acb-d3ff-0c81-162a-d8c9c1ac9a2f.png)


インスタンスの作成をクリックする。
![02.png](https://qiita-image-store.s3.amazonaws.com/0/171267/a6c6b27f-c2b5-3690-0e2b-af0f626212b8.png)

ステップ 1: Amazon マシンイメージ (AMI)にて一覧が出てくるので任意の物を選択します。
※ここではAmazon Linux 2 AMI (HVM), SSD Volume Typeを選択しています。
![03.png](https://qiita-image-store.s3.amazonaws.com/0/171267/c1a9943e-541f-c53e-029d-89e2525108a0.png)

ステップ 2: インスタンスタイプの選択にて適切なリソースタイプを選択し
「確認と作成」を押下します。
※ここでは無料枠で使用できるt2.microを選択しています。
また、「インスタンスの詳細の設定」よりインスタンスの詳細やストレージ設定、セキュリティグループなども予め設定可能。
![04.png](https://qiita-image-store.s3.amazonaws.com/0/171267/a9506b1e-6ce5-bf6f-6b01-20d4e552cc89.png)

ステップ6:セキュリティグループの設定
※セキュリティグループ(ファイアウォール)の設定については
デフォルトでは何も設定されていないため、セキュリティグループのルールを設定して、
既知のIPからのみアクセスできるようにしておきます。
詳細は↓
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/using-network-security.html

ステップ 7: インスタンス作成の確認より各項目に問題がなければ
「確認と作成」を押下します。
![05.png](https://qiita-image-store.s3.amazonaws.com/0/171267/a7ad03d2-e88a-7d75-7d18-1aecbf7972e0.png)

最後にキーペアの設定画面が出てくるので新しいキーペアの作成を選択し、
キーペア名に任意の名前を設定して「インスタンスの作成」を押下すると作成が完了します。
※ここでSSHで接続する際に秘密鍵が必要であるためキーペアのDLをし、
保存しておく必要があります。
![07.png](https://qiita-image-store.s3.amazonaws.com/0/171267/bf59b2c9-5736-833f-86ef-03003579b337.png)

#実際にインスタンスへ接続出来るかどうか確認
インスタンスの作成が完了したら実際にSSHで接続をしてみます。

インスタンスへの接続
＜Macの場合＞
ユーザ名: ec2-user
パブリックDNS名: Ec2 ManagementconsoleのパブリックDNS名を指定

・秘密鍵ファイルに読み取り権限を付与します。
・コンソール画面「EC2ダッシュボード」-「インスタンス」より作成した
インスタンスのパブリックDNS等を確認後、ターミナルを開き、
実際にSSHでログインできることを確認。
`chmod 400 <鍵ファイル名>.pem`
`ssh -i <ユーザ名>@<パブリックIP or パブリックDNS名>`
![08.png](https://qiita-image-store.s3.amazonaws.com/0/171267/98ce3ac8-04f3-d3f8-42d6-b8255995f35c.png)

Windowsで接続する場合はTeratermなどを使って、
公開鍵認証で接続できるかどうかご確認ください。
ことりんと一緒 Springもね - 4. REST API デザイン

## 概要 / 説明
[ことりんと一緒 Springもね - 3. 関数から波括弧省略](https://qiita.com/shinyay/items/4152259d73de02d5e9c0)では、RestController に対して GET / POST / PUT / DELETE メソッドでアクセスできるAPIを追加しました。

ただ、その追加の仕方は特に指針もなく適当に追加したものでした。そのため、公開するAPIも分かりやすくするという指針のみで、以下のように定義した関数ごとに名前をつけて定義をしていました。

```kotlin
@GetMapping(value = ["/display"])
fun getMessages() : List<Message> {
```

そこで、もう少し **REST API らしい**デザインに変更したいと思います。

## 前提 / 環境
### ランタイムバージョン
- Kotlin : 1.3.0
- SpringBoot : 2.1.0.RELEASE

### Spring Dependencies
- Web

### 開発環境
- OS : Mac
- IDE : IntelliJ IDEA
- Build : Gradle

## 手順 / 解説
### REST API デザイン
ここでは、まだ厳密に API デザインは考えずに最低限の方針だけ考えてみます。

#### アクセスURI
- **名詞** でアクセス
  - 動詞ではない

もともとの定義は、クラスへのアノテーションでルートパスを決め、関数毎にアクセスURIを決めていました。そこでの名称は、操作がわかりやすいように動詞表記でした。

```kotlin
@RequestMapping("/simple")
class SimpleController {

    @GetMapping(value = ["/display"])
    fun getMessages() : List<Message> {
```

そのため、実際には次のようにアクセスし、動詞的なアクセスとなっていました。

`http://xxx/simple/display`

ここの処理で *display* したいのは、**messages** でした。
そこで、上記のようなアクセスから、以下のように *messages* を対象とする意図した名詞でのアクセスに変更します。

`http://xxx/messages`

```kotlin
@RequestMapping("/messages")
class SimpleController {

    @GetMapping()
    fun getMessages() : List<Message> {
```

関数に記述していたアクセスURLがなくなっていますが、それは次で説明します。

#### HTTP メソッドと CRUD 操作
先に説明した アクセスURI で名詞でのアクセスするようにしました。
そのアクセスする名詞に対しての CRUD操作 (CREATE / READ / UPDATE / DELETE) を HTTP メソッド (GET / POST / PUT / DELETE) で表現するようにします。
そのため、先に定義していたような関数ごとの アクセスURI を必要としなくなりました。

HTTP メソッドと CRUD 操作の関係は以下のようにします。

|HTTP メソッド|CRUD 操作|意味|
|------------|--------|---|
|GET|READ|取得|
|POST|CREATE|登録|
|PUT|UPDATE|更新|
|DELETE|DELETE|削除|

##### POST / PUT - 冪等性
POST と PUT はどちらも状態の作成や更新をする際にしようする HTTP メソッドです。
では、なぜ POST を CREATE, PUT を UPDATE としたのでしょうか。

理由は HTTP メソッドの冪等性にあります。

冪等性とは簡単に説明すると再実行しても同じ結果になるような性質を言います。

HTTP メソッドの冪等性は、以下のようになります。

|HTTP メソッド|冪等性|
|------------|--------|
|GET|冪等|
|POST|非冪等|
|PUT|冪等|
|DELETE|冪等|

登録処理について想像してみてください。
同じ命令を複数回実行すると、同じレコードが複数できてしまいます。冪等ではありません。
一方で更新処理は、同じ命令は複数回実行しても結果は変わりません。冪等です。

このように考えると、**POST = CREATE = 非冪等** / **PUT = UPDATE = 冪等** が相応しいと分かります。

### REST API の修正
以上の事を踏まえて以下のように修正しました。

- 名詞アクセス
- HTTP メソッドでのCRUD処理
- 冪等性を考慮した登録処理

```kotlin:修正前
@RequestMapping("/simple")
class SimpleController {

    @PutMapping(value = ["/insert"])
    fun insertMessage(@RequestBody message: Message) : Message {}

    @PostMapping(value = ["/update"])
    fun updateMessage(@RequestBody message: Message) : Message {}
```

```kotlin:修正後
@RequestMapping("/messages")
class SimpleController {

    @PostMapping
    fun insertMessage(@RequestBody message: Message) : Message {}

    @PutMapping
    fun updateMessage(@RequestBody message: Message) : Message {}
```

## まとめ / 振り返り
今回はREST APIのデザインについて"簡単"に触れました。
厳密に考えていくと、全然これだけでは足りません。
APIのバージョニングや、階層化、コレクションの表現やステータスコードなどまだまだ考慮する事があります。

とりあえず、今回はシンプルに考えて作る上での最低限な事として扱ってみました。

今後、Microservices のデザインまで踏み込む話題のときに、APIデザインについて改めて考えてみたいと思います。

### 今回のソース
- [spring-just-rest-kotlin/tree/first-rest-design](https://github.com/shinyay/spring-just-rest-kotlin/tree/first-rest-design)
Angular7系でタイムラインUIを実装する

# 目標物
![rapture_20181110202211.png](https://qiita-image-store.s3.amazonaws.com/0/256853/c080d4f0-5073-3db1-e004-584f56c7aed1.png)

# 環境
Angular 7.0.5

## Step1. パッケージの導入

[TechGapItalia/angular-vertical-timeline: Vertical Timeline component for angular 4+](https://github.com/TechGapItalia/angular-vertical-timeline)を使います。

npmの場合

```
npm install angular-vertical-timeline --save
```

yarnの場合

```
yarn add angular-vertical-timeline
```

## Step2. app.module.tsで定義を追記
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TimelineComponent } from './timeline/timeline.component';

// 外部モジュール
import { VerticalTimelineModule } from 'angular-vertical-timeline'; // 追記

@NgModule({
  declarations: [
    AppComponent,
    TimelineComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    VerticalTimelineModule // 追記
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ]
})
export class AppModule { }
```

## Step3. styles.cssに追記
```javascript
@import "~angular-vertical-timeline/dist/vertical-timeline.css";
```

## Step4. コンポーネントのテンプレートに追記
```html
<!-- Add the timeline -->
<vertical-timeline>

  <!-- Add some cards to the timeline. It works with *ngFor too -->

  <!-- If no value is passed for the date, the current time is used. -->
  <vertical-timeline-card>
    <h1>Today</h1>
  </vertical-timeline-card>

  <!-- tomorrow = new Date(2017, 9, 20, 14,34); -->
  <vertical-timeline-card [dateValue]="tomorrow">
    <h1>Tomorrow</h1>
  </vertical-timeline-card>

</vertical-timeline>
```

すると、このような時系列を表現できるタイムライン風レイアウトを描画できます。
![rapture_20181110202211.png](https://qiita-image-store.s3.amazonaws.com/0/256853/572ba67c-357b-8132-f7b1-127fde74ce74.png)
カラーコードで透明度は指定しない方がいい

私はバックエンドが主ですが、先日リリースしたサービスで、**CSSで設定したはずのbackgroundが効いてない！**という事態が発生して急遽フロントの対応をしたので、そのことについて記録しておきます。

#原因
タイトルにもある通り、カラーコードを用いて透明度を指定していたのが悪さをしていたようです。

```css
.class {
  background: #ffffffaa;
}
```
最初はこのように記述していましたが、Androidで背景が透明になっていることが判明し、Android Studioのエミュレータを用いて調べました。（後々気付きましたが、iOS Safariでは透明度の部分だけ無効化され、完全不透明の白背景になっていました。）

調べ方については下記のサイトを参考にしました。いやー、Android Studioもともと入れてて良かった。
[PCでAndroid端末のブラウザチェックをして、検証までやってしまおう！](https://www.genius-web.co.jp/blog/cat-114/browser_check.html)

#解決までの道のり
確かにエミュレータのブラウザでも背景が透明になっている、、、
CSSがどのように作用しているかを見てみると、指定したbackgroundが無視されてrgb(0,0,0,0)となってるじゃないか、、、
ということで色々いじってみました。

```css
.class {
  background: #ffffff;
}
```
うん。完全不透明の白背景になった。これは効くのか。

```css
.class {
  background: rgb(255, 255, 255);
}
```
そら効くだろ。当たり前だ。

```css
.class {
  background: rgba(255, 255, 255, .8);
}
```
あ！！ちゃんと透過されてるじゃないか！

**opacityで透過させたくない時は、カラーコードではなくrgba()を使いましょう。**

解決してみれば、とてもしょうもないものでした。恥ずかしい、、、

#最後に
カラーコードでの透明度指定はPCブラウザだと有効なので、当たり前のように有効だと思い込んでしまってました。思い込みは怖いですね。
あとは、バグが起きた時にググることも大事ですが、エラーが起きている部分を自分の目でチェックするのはもっと大事ですね。今回の件でも、ググってみてこれが原因なんじゃないかと推測したものは全て見当違いでした。ところがAndroidエミュレータでいじってみたら、いままでの苦労をあざ笑うかのように一瞬で解決しました（笑）

おそらく多くのエンジニアの方にとっては当たり前のことなんだろうかと思いますが、この経験が誰かの救いになれば幸いです。
UIVisualEffectView(UIBlurEffect)が効かない時

# 画像をぼかして表示したい

iOS8以降のOSでは（今現在ではさすがにもう全部そうだという認識で良いと思いますが）UIBlurEffectというぼかしが利用できます。UIVisualEffectViewにセットして画像に重ねると雰囲気おしゃれになります。

使い方はたくさん記事があるので各自調べてください。

# みんなできてるのに何故か自分だけできない

とても簡単に実装できるっぽいので実装して実機で試してみると、Blurを掛けた部分が真っ白になる。自分の目が悪いだけで実はうっすらボケているのか？

いや、さすがにコントラストの強い画像をおいてみたけど何も見えないのはおかしい。
EffectをかけたViewをどかすとちゃんと画像は設定されている。

バグか何かと思って調べまくったのですが、実はこれには実機の設定が関連しているようです。（iOS開発者には常識なのか…？）

`設定 > 一般 > アクセシビリティ > 透明度を下げる`

をオンにしているとボカした画像は一切表示されず、真っ白（.darkの場合グレー？）になるようです。

なので、ぼかしが効いて見えている事を前提にしてしまうと人によっては意図しない表示になっているので開発者は注意が必要です。（というか自分がそうだったせいでめっちゃ悩まされたんだけども。）

罠やん :thinking:
【Heroku】よく使うコマンド集

# Heroku CLIの公式ドキュメント
https://devcenter.heroku.com/categories/command-line

# autocompleteのススメ
heroku-cliのコマンドやアプリ名などがTAB補完できるようになります。
https://devcenter.heroku.com/articles/heroku-cli-autocomplete

```bash
heroku update
heroku autocomplete
```

autocomplete導入以降、後述するコマンド内のAPP_NNAMEがTABで補完できるようになります。めでたい。

# よく使うコマンド一覧
開発時によく利用するheroku-cliのコマンドをまとめておきたいと思います。

## ログインをする
```bash
heroku login
```

## アプリを作成する
```bash
heroku create

# 名前をつけたい場合
heroku create APP_NAME
```

## アプリ名を変更する
```bash
heroku rename NEW_APP_NAME

# アプリを指定して名前を変更する
heroku rename NEW_APP_NAME -a APP_NAME
```

## アプリ一覧を出力する
```bash
heroku apps
```

## コマンドを実行する
```bash
heroku run COMMAND
```

### コマンド実行例
#### Rakeのdb:migrateコマンドを実行する
```bash
heroku run rake db:migrate
```

#### bashを起動する(サーバにログインする)
```bash
heroku run bash
```

## ログを確認する
公式ドキュメント: https://devcenter.heroku.com/articles/logging

```bash
heroku logs

# ログを200行出力する
heroku logs -n 200

# リアルタイムで出力されるログを追う
heroku logs -t

# 指定したアプリのログを出力する
heroku logs -a APP_NAME
```

* デフォルトでは100行出力される
* Herokuのログは1500行まで残る（1500行を超えると自動的に削除される)

1500行を超えてログを保存したい場合は、無料のAddonがある（いつか使いたい)
https://elements.heroku.com/addons/papertrail




## サーバを再起動する
```bash
heroku restart -a APP_NAME
```

## PostgreSQL
### PostgreSQLにログインする
```bash
heroku pg:psql
```

### PostgreSQLのデータを初期化する
```bash
heroku pg:reset
```

## 環境変数
### 環境変数を設定する
```bash
heroku config:set KEY=VALUE
```

### 環境変数の設定を解除する
```bash
heroku config:unset KEY
```

### 設定されている環境変数を取得する
```bash
heroku config:get KEY
```
【第3回】 GitFlow GitHubFlowについて

#GitFlow、GitHubFlowとは?
開発するにあたって、どのようなプロセスで運用していこう！ってのがあるんですが、それがGitFlow、GitHubFlowです。（超ざっくり言うと）

基本的には以下の資料を参考にしました。
https://qiita.com/tlta-bkhn/items/fc485a66dbe48ec3b919
http://komaken.me/blog/2013/09/09/git-flowとgithub-flowざっくりまとめ/

##Gitflowについて
|branch|用途|ざっくり表現|
|:----------------:|:-----------------:|:------------------:|
|master|リリースされたブランチ|（完成品）|
|develop|開発中のブランチ|（試作品）|
|feature branches|developを機能毎に分けたブランチ|（試作品の部品）|
|release branch|評価用のブランチ|（本番環境の評価ベンチ）|
|hotfixies|バグ修正用等のブランチ|（緊急対応）|


#その他のコマンド(紹介)

###Tagについて
どの機能を実装しているかを明示するタグ

【git tagのコマンド】
https://qiita.com/growsic/items/ed67e03fda5ab7ef9d08

```
git tag タグ名
git tag -a タグ名 -m 'タグのコメント'
```

###困ったときのコマンド
https://qiita.com/shuntaro_tamura/items/db1aef9cf9d78db50ffe

```
git reset --soft タグ名
```
git reset --hard もあるよ｡

###編集中に役立つコマンド
```
git stash
git cherry-pick
```

#おわりに
Gitの基本的な内容は理解できたと思います｡
ここまでできれば､調べながらGitを使いこなす実力はついています｡

興味がある方は､Gitの仕組みを覗いてみるといいかもしれません｡
[わかりやすかったページリンク](http://koseki.hatenablog.com/entry/2014/04/22/inside-git-1)
Grid Layout

# Grid Layoutの作り方


Grid Layoutはレイアウトを囲むコンテナの要素（例では.container）にその子要素の配置の仕方を指定していきます。Flexboxと違い、要素を並べる行・列コンテナとなる要素を用意する必要はありません。

##　親要素に以下を指定

要素に display: grid を指定すると、その要素はグリッドコンテナになります。

```
display: grid
```

## グリッドコンテナを縦・横に分割します。

縦方向に分割した各列のサイズは

```
/* 1列目から順番に180px、1fr、160pxの幅 */
grid-template-columns: 180px 1fr 160px;
```

横方向に分割した各行のサイズは

```
/* 1行目から順番に60px 1fr 90pxの高さ */
grid-template-rows: 60px 1fr 90px;
```

---

### 補足ですが
#### 「fr」 という単位はなんだろう
メインエリアの幅指定に「fr」という単位を使います。
frはグリッドコンテナの中を分割するサイズの指定に使える単位です。**全体の幅からfr以外の単位(pxや%など)で指定したものを引き、残りの幅がfrで指定された列に配分されます。**


### 列・行のことを何ていう？
**グリッドトラック**といいます。

### 列・行を分割した線を何ていう？
**グリッドライン**といいます。

### グリッドアイテムって？
**グリッドコンテナ直下の子要素**をグリッドアイテムといいます。
UbuntuにLaravelをインストールし起動

Ubuntu 18.04にLaravel 5.7をインストールし、起動します。

必要なPHP拡張パッケージをインストールします。
`sudo apt install php-mbstring php-xml php-json`

LaravelのパッケージはComposerというパッケージ管理ソフトで管理します。以下のコマンドを実行しダウンロード、インストールして下さい。
`curl https://getcomposer.org/installer | php`
`sudo mv composer.phar /usr/local/bin/composer`

Laravelのプロジェクトに使うディレクトリに移動し、以下のコマンドを実行しプロジェクトを作成して下さい。その際、PROJECT_NAMEはプロジェクトの名前に置き換えて下さい。
`composer create-project --prefer-dist laravel/laravel PROJECT_NAME`

作成されたプロジェクトのディレクトリに移動し、LaravelのコマンドラインインターフェースであるArtisanを使いサーバを起動して下さい。
`cd PROJECT_NAME`
`php artisan serve`

ブラウザで http://localhost:8000/ にアクセスし、「Laravel」のロゴが表示されれば成功です。
ロリポップからAWSへWordpressのサイトを移行してみる②

![AWS ロリポップ.png](https://qiita-image-store.s3.amazonaws.com/0/265573/c552c32e-3a79-780d-aad7-109aa8af79e8.png)

ロリポップからAWSへWordpressのサイトを移行してみる①
(https://qiita.com/yu19991013/items/9899cdea9f70a58ff6aa)

# 初めに
こんにちは。Arii-Incの加藤です。
前回はAWSのVPCとRDSを構築し、ロリポップのDBの中身を移行する作業を行いました。
今回はロリポップのFTPサーバに置いてあるファイルをEC2のインスタンスに移行していきます。

##⑴ ロリポップ!FTPにログインしファイルを取得してローカル環境に保存

FTPサーバの(/var/www/html)に置いてあるファイルをコピーしてローカル環境に保存します。

##⑵ EC2インスタンスを立てる
###1. EC2インスタンスをAmimoto AMIを元に作成 (https://ja.amimoto-ami.com/)

Amimoto AMIはWordpressのAWSで使われるマシーンイメージ(インスタンスに必要な情報を提供する)です。
![AMIMOTO画像.png](https://qiita-image-store.s3.amazonaws.com/0/265573/42174e92-91d6-bbf3-8adb-c1d10a284329.png)
今回はフリートライアルがないNginxを使った WordPress powered by AMIMOTO(HVM)を使いたいと思います。

###2. セキュリティグループ を設定
セキュリティグループのインバウンドではssh 22ポートとhttp 80ポートのみを許可します。

<img width="1034" alt="セキュリティグループ 設定.png" src="https://qiita-image-store.s3.amazonaws.com/0/265573/6309d4e9-b965-5e18-829a-402fdb676b15.png">

###3. ファイルの置き換えと参照するDBの変更
sshでec2にアクセスして(/var/www/html)にある既存のファイルをロリポップからコピーしてきたファイルに置き換えます。

ec2を作成したときに作成した暗号鍵を用いてsshコマンドを叩きます。

```
ssh -i [秘密鍵のパスを指定] ec2-user@[IPアドレス or DNS名]
```

次に(/var/www/vhosts/[InstanceID]/wp-config.php)のDBの設定をRDSのDBの内容に書き換えます。

```php:wp-config.php
// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define( 'DB_NAME', 'database_name_here' );

/** MySQL データベースのユーザー名 */
define( 'DB_USER', 'username_here' );

/** MySQL データベースのパスワード */
define( 'DB_PASSWORD', 'password_here' );

/** MySQL のホスト名 */
define( 'DB_HOST', 'localhost' );

/** データベースのテーブルを作成する際のデータベースの文字セット */
define( 'DB_CHARSET', 'utf8' );

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define( 'DB_COLLATE', '' );
```


##⑶ ELBの設定

ロードバランサーの設定

httpとhttpsのどちらのアクセスもリスナーに追加する場合、httpにはルールとしてhttpsにリダイレクトし、httpsのルールとして転送先をec2のサーバーに設定します。この設定をすることでWordPressのサイトへアクセスする際にhttpsをURLの初めにつけない(ex: http://hoge...com)
ことでサイトにアクセスできないということが起こらなくなります。
![セキュリティグループ .jpg](https://qiita-image-store.s3.amazonaws.com/0/265573/79249c04-f821-23ca-7736-61f8a40b5f83.jpeg)

##⑷ Route53の設定

###1. 取得済ドメインのホストゾーンを作成する
![ホストゾーン画像.png](https://qiita-image-store.s3.amazonaws.com/0/265573/72b0751a-f123-5113-0c41-eb8556642df9.png)
![Route53 ホストゾーン 作成フロー.png](https://qiita-image-store.s3.amazonaws.com/0/265573/ce90cc24-ff4c-bdec-310d-0c6993057f99.png)


###2. AWSで作成したネームサーバの情報をドメイン取得サイトに設定
ドメインを取得した際に利用したサービス(お名前.comやムームードメイン)のネームサーバの設定にRoute53のホストゾーンを作成した際に作られるNSレコードを貼り付ける。
![Route53 NSレコード.jpg](https://qiita-image-store.s3.amazonaws.com/0/265573/096597a5-0c82-49ad-797c-23339ba3f974.jpeg)




###3. ロードバランサー用のAレコードを追加
https通信を行いたいのであればACM(https://aws.amazon.com/jp/certificate-manager/)
で証明書を発行します。
その際に、DNSを検証するためにホストゾーンにCNAMEレコードを追加します。
<img width="512" alt="DNS検証.png" src="https://qiita-image-store.s3.amazonaws.com/0/265573/14c977b9-6695-cf9b-b356-242d9ef0ed3b.png">
次に、Aレコードを追加していきます。
![Route53 Aレコード.png](https://qiita-image-store.s3.amazonaws.com/0/265573/6d74b964-150e-3807-e8ec-745f115101f1.png)


# 終わり
以上でロリポップからAWSへWordpressの移行が終了しました！
その気になれば半日かからずに終わるので是非皆さんも休日など時間があるときに試してみてください！
Glueの使い方的な㉘(DataFrameでデータ読み込み)

# GlueのDynamicFrameではなく、GlueでDataFrameを使ってデータ入力出力する

### ジョブの内容

csvファイルをparquetに変換します。

※"[Glueの使い方的な①(GUIでジョブ実行)](https://qiita.com/pioho07/items/c9ce1d0677777f974ffe)"(以後①とだけ書きます)と同じ処理です。データ入力と出力部分をDynamicFrameからDataFrameに変更します。

### ジョブ名
se2_job14

# 前準備

IAMロールなどは①をご確認ください。


### 今回使うサンプルログファイル(19件)

```csv:csvlog.csv
deviceid,uuid,appid,country,year,month,day,hour
iphone,11111,001,JP,2017,12,14,12
android,11112,001,FR,2017,12,14,14
iphone,11113,009,FR,2017,12,16,21
iphone,11114,007,AUS,2017,12,17,18
other,11115,005,JP,2017,12,29,15
iphone,11116,001,JP,2017,12,15,11
pc,11118,001,FR,2017,12,01,01
pc,11117,009,FR,2017,12,02,18
iphone,11119,007,AUS,2017,11,21,14
other,11110,005,JP,2017,11,29,15
iphone,11121,001,JP,2017,11,11,12
android,11122,001,FR,2017,11,30,20
iphone,11123,009,FR,2017,11,14,14
iphone,11124,007,AUS,2017,12,17,14
iphone,11125,005,JP,2017,11,29,15
iphone,11126,001,JP,2017,12,19,08
android,11127,001,FR,2017,12,19,14
iphone,11128,009,FR,2017,12,09,04
iphone,11129,007,AUS,2017,11,30,14
```

#### S3に配置

```shell:
$ aws s3 ls s3://test-glue00/se2/in0/
2018-01-02 15:13:27          0 
2018-01-02 15:13:44        691 cvlog.csv
```

# 実行コード

適当なGlueジョブを作成し、できあがったジョブの中身のコードを以下のコードで上書きする
inferSchemaでデータ型をSpark側で自動で類推する。DataFrameにしているので型が必要だから。

```python:
import sys
from awsglue.transforms import *
from awsglue.utils import getResolvedOptions
from pyspark.context import SparkContext
from awsglue.context import GlueContext
from awsglue.job import Job

args = getResolvedOptions(sys.argv, ['TempDir','JOB_NAME'])

sc = SparkContext()
glueContext = GlueContext(sc)
spark = glueContext.spark_session
job = Job(glueContext)
job.init(args['JOB_NAME'], args)

df = spark.read.format("csv").option("header", "true").option("inferSchema", "true").load('s3://test-glue00/se2/in0/*.csv', header=True)

output='s3://test-glue00/se2/out14/'
codec='snappy'

df.write.mode("overwrite").parquet(output,compression=codec)
job.commit()
```

# クローラー作成し実行、テーブル確認

出力先のS3パスへのクローラーを作成し、クローラー実行

出来上がったテーブルが以下のようになる

<img width="719" alt="スクリーンショット 0030-12-31 19.01.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/27932/529dbffa-ec54-88f6-6eab-5e208e25f154.png">


# Athena確認

![スクリーンショット 0030-11-10 19.20.46.png](https://qiita-image-store.s3.amazonaws.com/0/27932/ec5db286-22e9-8fbc-0b30-a2be97ce3383.png)

# こちらも是非

Glueの使い方まとめ
https://qiita.com/pioho07/items/32f76a16cbf49f9f712f
systemdのサービスでdelayed_jobの起動と監視を行ってみた

# systemdとは
Systemdとは、Linuxの起動処理やシステム管理を行う仕組みです。CentOS7以前は `/etc/init.d` 以下にシェルスクリプトを置いてOS起動時にサービスの自動起動を行っていましたが、CentOS7からはsystemdは `*.service` ファイルを記述しUnitという単位で管理するようになりました。
この仕組を利用すればサービスの自動起動だけでなく、**プロセスの監視を行い停止したら再起動を行う**こともできます。

# delayed_jobとは
古くからRailsで利用されているバックグラウンド処理を行うための仕組みです。`delayed_job_active_record.gem` を利用します。

# delayed_jobの問題点
delayed_jobはDBにバックグラウンド処理を行うためのキュー情報を保存するため、RDBMSの再起動等で接続が切断してしまうと、サービス自体が停止してしまいます。そのため、以前は [monit](https://mmonit.com/monit) 等を利用してプロセスを監視し、停止している場合は再起動を行う必要がありました。
ここでは、systemdを利用してプロセスの監視を行ってみます。

# delayed_job起動スクリプト
`/opt/project/bin` 以下にdelayed_jobの起動スクリプトを置きます。 **project** の部分はご自分の環境に合わせて書き換えて下さい。

## delayed_job.sh
`Capistrano` のdelayed_jobプラグインが実行するコマンドを真似て次のように記述しました。パス等はご自分の環境に合わせて書き換えて下さい。

```shell
#! /bin/sh
sudo su -l kazuhisa -c "cd /home/kazuhisa/apps/project/current && RAILS_ENV=production /home/kazuhisa/.rbenv/bin/rbenv exec bundle exec bin/delayed_job -n 1 start"
```
実行権限を与えます。

```shell
# chmod 755 delayed_job.sh
```

# serviceファイル
`/etc/systemd/system` 以下にserviceファイルを置きます。

## delayed_job.service
注意点は次の通り

* `ConditionPathExists` に起動スクリプトを置いたパスを設定します。
* `ExecStart` に起動スクリプトをフルパスで設定します。
* Restartは `on-failure` を指定します。よく `always` を指定している例があるのですがCapistranoでデプロイ時にdelayed_jobがリスタートしたタイミングで、死活監視が動作してしまい、無駄に再起動が実行されてしまいます。 `on-failure`を指定することで**異常終了**したときだけサービスを再起動することができます。
* `RestartSec`はプロセスの停止を検知してから起動するまでの時間を秒で指定します。
* `PIDFile` はdelayed_job実行時のpidファイルの場所を設定します。

```
[Unit]
Description = start delayed_job
After=local-fs.target
ConditionPathExists=/opt/project/bin

[Service]
ExecStart=/opt/project/bin/delayed_job.sh
Restart=on-failure
RestartSec=30
Type=forking
User=kazuhisa
Group=kazuhisa
PIDFile=/home/kazuhisa/apps/project/current/tmp/pids/delayed_job.pid

[Install]
WantedBy=multi-user.target
```

# サービスの有効化
```
# systemctl daemon-reload
# systemctl enable delayed_job.service
# systemctl start delayed_job.service
```

# delayed_jobの再起動の確認
プロセスを強制的に停止してみます。しばらく待つと再起動することが確認できると思います。

```
$ cat tmp/pids/delayed_job.pid
17449
$ kill -9 17449
(しばらく待つ)
$ cat tmp/pids/delayed_job.pid
20409
$ ps ax | grep 20409
20409 ?        Sl     0:00 delayed_job
20419 pts/1    S+     0:00 grep --color=auto 20409
```

これで安心してdelayed_jobを使うことができますね。

# 参考
* [systemdの*.serviceファイルの書き方](https://qiita.com/masami256/items/ef0f23125cf8255e4857)
* [Systemdを使ってさくっと自作コマンドをサービス化してみる](https://qiita.com/DQNEO/items/0b5d0bc5d3cf407cb7ff)
CloudFormationを使ってEBSスナップショットのData Lifecycle Managerを設定する

#はじめに
本記事では、AWS CloudFormation管理コンソールを使って、EBSスナップショットのData Lifecycle Managerを設定する手順を説明しています。（初心者向け）

本記事で掲載しているテンプレートの最新版は、下記に置いてます。
https://github.com/okubo-t/aws-cloudformation
#Data Lifecycle Managerとは
 Amazon Data Lifecycle Manager (DLM) を利用すると、バックアップしたいEBSとそのバックアップのポリシーを定義するだけで、自動的にスナップショットを取得することができる機能です。
#参考
[EBS スナップショットの Amazon Data Lifecycle Manager の概要]
(https://aws.amazon.com/jp/about-aws/whats-new/2018/07/introducing-amazon-data-lifecycle-manager-for-ebs-snapshots/)
[CloudFormation テンプレート リファレンス AWS::DLM::LifecyclePolicy]
(https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-resource-dlm-lifecyclepolicy.html)

#前提条件
後述するテンプレートのサンプルでは、スナップショットを取得したいEBSに、Nameタグが設定されていることとしています。

ポリシーは、例として、下記の内容で定義しています。

|ポリシー内容|値|
|:---|:---|:---|
|スナップショット取得間隔|24時間|
|スナップショット取得開始時刻|17:00(UTC)|
|スナップショットの保持世代数|3|

#設定手順
１ AWS CloudFormation管理コンソールから、スタックの作成をクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/283246/e0c3e7c3-f478-18c7-2dc2-7e669d1b399d.png"　 width=50%>

２ 後述のテンプレートを選択します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/283246/060a4709-622a-2394-de5f-ac2103045137.png"　 width=50%>

３ 各パラメータを入力します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/283246/4129105f-8789-21e3-c353-d04c1a22130f.png"　 width=70%>

|パラメータ名|用途|備考|
|:---|:---|:---|
|スタックの名前|テンプレートから作成するリソース一式の名前|例　prd-stack-vpc-20180801|
|EBSNameTag|スナップショットを取得したいEBSに設定されているNameタグを指定します||

4 後続は、デフォルトのまま次へ次へで、作成します。

５ 状況が CREATE COMPLETEになれば、EBSスナップショットのLifeCycle Managerの設定が完了です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/283246/f919b748-e62b-9f47-0eed-a3ab499405f0.png"　 width=50%>

6 EC2の管理コンソールで、LifeCycle Managerにアクセスすると。ポリシーが設定されていることが確認できます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/283246/37c53c92-aae5-b5a1-b321-6810c9c10fe9.png"　 width=70%>

#テンプレート
```ec2-dlm-01.yml
AWSTemplateFormatVersion: "2010-09-09"
Description:
  Create DLM LifecyclePolicy

# ------------------------------------------------------------#
# Input Parameters
# ------------------------------------------------------------# 
Parameters:
  EBSNameTag:
    Type: String

# ------------------------------------------------------------#
#  DLM LifecyclePolicy
# ------------------------------------------------------------#
Resources:
  LifecyclePolicy:
    Type: "AWS::DLM::LifecyclePolicy"
    Properties:
      Description: "Daily EBS Snapshot"
      State: "ENABLED"
      ExecutionRoleArn: !Sub "arn:aws:iam::${AWS::AccountId}:role/AWSDataLifecycleManagerDefaultRole"
      PolicyDetails:
        ResourceTypes:
          - "VOLUME"
        TargetTags:
          -
            Key: "Name"
            Value: !Ref EBSNameTag
          
        Schedules:
          -
            Name: !Sub "${EBSNameTag}-daily-snapshot"
            TagsToAdd:
              -
                Key: "type"
                Value: "DailySnapshot"
              
            CreateRule:
              Interval: 24
              IntervalUnit: "HOURS"
              Times:
                - "17:00"
            RetainRule:
              Count: 3
            CopyTags: true
```