OmniAICreator/Qiita-1.07M huggingface dataset:
CDブートすらできない！って思った時確認すること


### CDブートすらできないと焦った時用の備忘録
BIOSの設定もやってるのになんで！？と焦ってる自分
それ二回目だからもうQiitaに書いとくよ

研究室PC・研究所PCの古い奴だと、何だか知らないけどUbuntu16.04のLiveCDではブートできない
特にWindows7あたりのやつ

### 代わりにUbuntu14.04でブートしてください
yosamiとnuxtの速度を比較してみた

[知り合い](https://qiita.com/alfa)が[yosami](https://qiita.com/alfa/items/2cc6eabc267787a3786a)というフレームワークを作ったらしく、**多分これが一番早いと思います**と言うパワーワードを聞いたのでnextより速いnuxtと比較してみた。

# 検証環境
- Ubuntu16.04
- Core i7
- メモリ 8GB
- node9.0.0

# 検証コード
画面にHelloWorldを表示するだけ
https://github.com/sato333/yosami-vs-nuxt

# 検証結果
siegeを5回ずつ実行してそれぞれスコアの良かったものを掲載

## nuxt

```
$ npm run build && npm start
$ siege -c 30 -r 5 --time=10S http://localhost:3000

Transactions:		         521 hits
Availability:		      100.00 %
Elapsed time:		        9.24 secs
Data transferred:	        0.30 MB
Response time:		        0.02 secs
Transaction rate:	       56.39 trans/sec
Throughput:		        0.03 MB/sec
Concurrency:		        1.20
Successful transactions:         521
Failed transactions:	           0
Longest transaction:	        0.13
Shortest transaction:	        0.00
```

## yosami


```
$ npm run build && npm start
$ siege -c 30 -r 5 --time=10S http://localhost:3001

Transactions:		         585 hits
Availability:		      100.00 %
Elapsed time:		        9.54 secs
Data transferred:	        0.23 MB
Response time:		        0.00 secs
Transaction rate:	       61.32 trans/sec
Throughput:		        0.02 MB/sec
Concurrency:		        0.19
Successful transactions:         585
Failed transactions:	           0
Longest transaction:	        0.05
Shortest transaction:	        0.00
```

# 所感
実用的なコードでは結果が変わってくるだろうから参考程度に。
しかし良さみは感じ取れた。
Contingency Matrix から Listへの変換

Contingency Matrix(Table)を使っていて、一時的にListへ変換したいことがあります。

このContingecy Matrixから


cmat = 

|id |A | B | C |
|----------|-----------|--------------|---|
| 1            |              F|        T|F|
| 2           |            F|       T|F|
| 3             |              F|        F|T|
| 3             |              F|        F|F|

または

|id |A | B | C |
|----------|-----------|--------------|---|
| 1            |              0.1|       0.6|0.3|
| 2           |            0.1|       0.7|0.1|
| 3             |              0.1|        0.1|0.4|
|4             |              0|        0|0|



こういうリストへ

clist =

|key|value|
|---|---|
|1|B|
|2|B|
|3|C|
|4|A|
# 一解法

reshapeやtidyrを使ってやるのが基本のようですが、論理値だけでなく、値のうち最大のものという条件などを考えると、以下のような感じにしてみました。

```r
clist <- cmat %>% tidyr::gather(key, value, - id) %>%
        group_by(id) %>%
        top_n(n = 1) %>%
        slice(1) %>%
        arrange(id)
```


確率で選択したい場合など、最大のもの(TRUE)が複数ある場合や、全部０(FALSE)の場合にも対応したいので、無理やりですが、これでもいいかもしれません。

うーん、違うな。
prestoの気持ち 時間関係(Date and Time Functions and Operators)

## 型変換
### string -> timestamp
```sql
parse_datetime(string, format) → timestamp with time zone
```
### timestamp -> varchar
```sql
format_datetime(timestamp, format) → varchar
```
## 時間の加減計算
### timestamp同士の引き算

```sql
-- 引き算
date_diff(unit, timestamp1, timestamp2) → bigint
```

unitの例

```
second
minute
hour
day
week
month
year
```

使用例
dtがユーザー登録日だとすると、以下のコードで登録日からの経過日数になる

```sql
date_diff('day',  DATE_PARSE(dt, '%Y-%m-%d %H:%i:%s.000') + interval '9' hour, current_timestamp + interval '9' hour)
```
SBCLメモ: 実装

# SBCLメモ: 実装

## read

ストリームからオブジェクトを読みんで返す

- src/code/reader.lisp
- 処理は基本的に%read-preserving-whitespaceに委譲

### %read-preserving-whitespace

- 1文字だけ読んでwith-char-macro-resultに委譲

### with-char-macro-result

- その名の通り、character-macroに関する処理をしている。
- 引数で最初の文字が来るので、それがcharacter macroのentryなら該当処理を実行する。
  - get-raw-cmt-entryの返り値で判断
- 実行は、!cmt-entry-to-functionに委譲。read-token関数もfallbackに渡している。
- cmtってcharacter macro なんとか、みたいな感じかな。

### !cmt-entry-to-function

- マクロ
- 最終的にはsb!sys:%primitive sb!c:safe-fdefn-funに委譲
- 引数はget-raw-cmt-entryの返り値

### safe-fdefn-fun

- src/compiler/x64-64/cell.lisp
- vopみたい。define-vopで定義されている。
- よくわかんないけどjmpしてる。

### %primitive

- def-ir1-translatorで定義されている
- よくわからないけど、%%primitiveをopにもつS式に展開されて、それをさらにir1-convertに渡している


### read-token

- src/code/reader.lisp
- 状態遷移機械によるtokenizer。nginxのrequest line parserみたいな感じか。
- read-charを繰り返し呼んでる。
- たとえば、最終的にread結果がシンボルだということが分かった場合、RETURN-SYMBOLタグにgoし、シンボルを返却する。具体的にはinternしたりfind-symbolしたりする。
- なんかよくわかんないけどすごい。

### read-char

- 一文字読む。
- ansi-stream-read-charかstream-read-charに委譲している。
- stream-read-charはGray stream用っぽい。

### ansi-stream-read-char

- first-read-char

### fast-read-char

- src/code/sysmacs.lisp
- ansi-stream-cin-bufferの現在のインデックスの値を返し、インデックスの値をインクリメントしている。
- ansi-streamをどうやって作るのかを知る必要がありそう
- bufferの限界まで読んだらfast-read-char-refillを呼んでbufferをリセットしてる感じ。


### fast-read-char-refill

- src/code/stream.lisp
- UB~D-BASH-COPYを呼んでbufferからまとめて読むっぽい
  - まとめて読むのはansi-stream-n-binを使う
- 見た感じub8-bash-copyしかない


### ub8-bash-copy

- src/compiler/seqtran.lisp
- マクロで定義されていて見つけづらい
- vectorに入った数値をエンディアンとかをすり合わせてとってくるような感じ


### fd-stream-read-n-bytes

- fd-stream用のansi-stream-n-bin
  - fd-streamはunixのファイルを読むstream
- fd-stream-ibuf (実態はsap) 経由でbufferに数値を突っ込み、それをub8-bash-copyにコピーさせる感じ？
- bufferに数値を突っ込むのは%byte-blt

### %byte-blt
- genericな関数
- fd-streamのsapからn個分読むのに使える
- src/code/target-miscに再起定義あり
- src/compiler/generic/vm-tranにdeftransformあり

## list

- src/compiler/x86-64/alloc.lisp
- define-vopによるlistもしくはlist*の実装。二つまとめて実装している。
- listはstarがnil, list*はstarがt
React-navigation

#react-navigationを使ったルーティング


###パッケージをプロジェクトにaddする
```
yarn add react-navigation or npm install react-navigation --save
```
###どういうもの？
>React Navigation's StackNavigator provides a way for your app to transition between screens and manage navigation history.
react navigationのStackNavigatorはアプリ内の画面の移動と、そのhistoryを管理してくれるもの。(今はStackNavigatorしか使わないので他はわからない)

###基本
```react:navigationSimple
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

export default StackNavigator({
  Home: {
    screen: HomeScreen,
  },
});
```
公式ではStackNavigatorがcreateStackNavigatorになっているが、使えない

###複数の画面のルーティング
```react:navigationMulti
import React from 'react';
import { View, Text, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button title="go detail" onPress={() => this.props.navigation.navigate('Detail')} />
            </View>
        );
    }
}
class DetailScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>detail Screen</Text>
                <Button title="go back" onPress={() => this.props.navigation.goBack()} />
            </View>
        );
    }
}

const RootStack = StackNavigator({
    Home: {
        screen: HomeScreen,
    },
    Detail: {
        screen: DetailScreen
    }
}, {
        initialRouteName: "Home"
    }
);

export default class App extends React.Component {
    render() {
        return <RootStack />
    }
}

```
オブジェクトのkeyがRoute名となり、その名前を使って行ったり来たりする。
initialRouteNameによってデフォルトの画面を決める(ない場合0番目の要素がデフォルトとなる)

画面移動は this.props.navigation....を使う
-特定の場所に行く場合： this.props.navigation.navigate(RouteName)
-戻る場合： this.props.navigation.goBack()
PHPのpassword_hashで生成したBCryptハッシュがRubyで検証できずにハマった

# 起きたこと
- 既存のCakePHP3.5+PHP7.2のアプリケーションではハッシュ化にBCryptを使用している

```php
$passwordHash = password_hash('test', PASSWORD_DEFAULT);
echo $passwordHash
// => "$2y$10$i3J7OqQt9h33I5bwSwAge.H6qQtO2LZASwu36AJi3oC69qdXFSx5i"
```


- 連携するRuby on Rails5.1+ruby2.5のアプリケーションでも同様にBCryptを採用した

```ruby
password_hash = Crypt::Password.create("test")
p password_hash
# => "$2a$10$8vSfRpFpQYMXdYCDgV6i2.4yTOD.99DWqA/WYk8h5/YuOptzYJGUy"
```

- PHPでは検証のためsaltからハッシュを再生成できるが、Ruby側では行えなかった
 
```ruby
# PHPで作ったやつを検証したい
password_hash = "$2y$10$i3J7OqQt9h33I5bwSwAge.H6qQtO2LZASwu36AJi3oC69qdXFSx5i"
input_password_hash = BCrypt::Engine.hash_secret("test", BCrypt::Password.new(password_hash).salt)
p password_hash == input_password_hash
# => trueになるはずがfalse
p input_password_hash
# => なぜかnil
```
#原因
- どうにもRuby側のBCrypt実装のバージョンが古いらしい
  - 先頭の`$`に囲われてる`2y`と`2a`が問題で、このバージョンが`2y`のほうが`2a`より新しいため、Ruby側ではハッシュを再生成できなかった
  - 参考
    - <a href="https://yuskamiya.tumblr.com/post/100503173956/bcryptblowfish%E6%9A%97%E5%8F%B7%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%AA%BF%E3%81%B9%E3%81%9F%E3%81%AE%E3%81%A7%E6%96%87%E6%9B%B8%E5%8C%96%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%81%9F">BCrypt(Blowfish暗号)について調べたので文書化してみました</a>

#解決方法
- バージョンを上げる、という選択肢は現状だとほぼ不可能な様子...
- とりあえずバージョンを微妙に無視すれば動くことには動きました
- 参考
    - <a href="https://stackoverflow.com/questions/20980859/using-bcrypt-ruby-to-validate-hashed-passwords-using-version-2y">Using bcrypt-ruby to validate hashed passwords using version $2y
<a>
    - <a href="https://github.com/codahale/bcrypt-ruby/pull/91">Update crypt_blowfish implementation from v1.1 to v1.3<a>

```ruby
password_hash = "$2y$10$i3J7OqQt9h33I5bwSwAge.H6qQtO2LZASwu36AJi3oC69qdXFSx5i"
passsword_hash = password_hash.sub(/^.../, '$2a')
p BCrypt::Password.new(passsword_hash).is_password?("test")
# => true
```

これで良いんだろうか...というもやもやが残る...

良い解決方法があったらコメントで教えていただけると助かります。

**
っていうかバージョン違うなら例外くらい投げてくれてもいいのになんでnilが返されるんですかね！？！？
**
templateタグはクローンしてから使おう

この記事は移行しました！[最新の内容はこちら](https://naoqoo2.github.io/blog/template%E3%82%BF%E3%82%B0%E3%81%AF%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%B3%E3%81%97%E3%81%A6%E3%81%8B%E3%82%89%E4%BD%BF%E3%81%8A%E3%81%86/)をご覧ください😀

## MDN web docsのサンプル

https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

```html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 必要に応じて既存のデータをここに含められます。 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

<script>
// https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

// templete 要素の content 属性の有無を確認することで、
// ブラウザが HTML template 要素をサポートしているかテストします。
if ('content' in document.createElement('template')) {

  // 既存の HTML tbody と template の行を使って table をインスタンス生成します。
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // 新しい行を複製してテーブルに挿入します。
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // 新しい行を生成します。
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // 新しい行を複製してテーブルに挿入します。
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} else {
  // HTML template 要素がサポートされていないので 
  // テーブルに行を追加するほかの方法を探します。
}

</script>
</body>
</html>
```


## templateタグ書き換えちゃってる！

上記サンプルのjsを解説するとこんな感じ。

templateタグをいじっちゃうので使い回すときとか危険だなと思いました。

```javascript

  var t = document.querySelector('#productrow');
  var tb = document.getElementsByTagName("tbody");

  // <template>タグに値をセット
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";
  // 複製してテーブルに挿入
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // <template>タグに値をセット（※一つ前に追加したデータを上書き！危険！）
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";
  // 複製してテーブルに挿入
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);
```

## 推奨：templateタグは汚さない

まずtemplateタグをクローンしてから使いましょう。

```javascript

  var t = document.querySelector('#productrow');
  var tb = document.getElementsByTagName("tbody");

  // <template>の中身を複製
  var clone = document.importNode(t.content, true);
  // 複製したタグに値をセットしてテーブルに挿入
  td = clone.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";
  tb[0].appendChild(clone);
  
  // <template>の中身を複製（※<template>は綺麗なまま）
  var clone = document.importNode(t.content, true);
  // 複製したタグに値をセットしてテーブルに挿入
  td = clone.querySelectorAll("td");
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";
  tb[0].appendChild(clone);
```
【tutorial】GitHubにリポジトリを作成

2018年4月3日に実施。

１．GitHubにログイン。「Start a project」をクリック。
https://github.com/login
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/247425/d331c8eb-69a8-e13a-8662-d7298f03f114.jpeg)

２．「Repository name」を適当に入力して、「Create repository」をクリック。
![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/247425/bd3d4b43-e71f-dd31-d5de-943bd178bb27.jpeg)

終わり。

作成したリポジトリをローカルにクローンする方法は次の記事。
https://qiita.com/d778980/items/e356ba3f85b3cd4f09ca
bxsliderでスライド時に縦にスクロールしないようにする


bxsliderをスマホに適用した際、iOSにおいてスワイプする際に縦にスクロールしてしまい、画面から外れてしまうのを防ぐ

```js
$(function() {
    $('.hoge').bxSlider({
        controls, true,
        onSlideBefore : function(){
            window.scrollTo(0, window.pageYOffset);
        },
    });
});
```
for文卍 iterableのススメ

[なぜfor文は禁止なのか？関数型記述のススメ](https://qiita.com/ukiuni@github/items/abad07524856c65a20ea)を元に`for`の例を示します

## TL;DR

[babelしたコード](https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=PQKgUAZgrgdgxgFwJYHsYgAQygWwEYCmATgM4AUAlBgN5gYYQpEZkA2BCWGAvBgAwBuDAiJQCQmAGpJVAJ5ICrACZYBYAL5hIsRKnQYCANwIwAcrkKlKNOgyYt2nGBhQQsF4uQpVa9ekjcyZwBSDAAmHm5ePjkFZVVbTU0QYC1oeGQ0TCMTc3xPa187ZjYOLmihETEJDEleMNjFFRg1TTBQbQy9bOMzDyIAVRglYjIADx9bRhLHLlcDXrzLL0m_DACWZwAeDAmbNfp5JoS19QNWEgJ9g7wiAgBDAGs1U8SNNJ1M_Ry-_MHh4gARj4fEKtiOyh6uX6QxGRDIwJirTAKQ-XSyC2hf1hQJBYPo0wcZWc8x-SwK3mu_kC2wwiNWBwhzRefjOikuVL8twez1s9E0_PeYDgaBInAQKAQ91YAHkIABRRYwgFERE8DAAQSIRHusgAdBAiCgcGQycq4YjKBQ9XclFA4AQyGR7gAaLBUbgAPgw91q7rUwtFKHYetYKAA5mQJVLZQqldiVfSBEA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0&envVersion=)

```js
function* evenNumbers() {
  for (let n = 0; true; n += 2) yield n;
}

function* evenNumberUnder100() {
  for (let n of evenNumbers()) {
    if (n < 100) {
      yield n;
    } else {
      break;
    }
  }
}

const totalOfEvenNumberUnder100 = Array.from(evenNumberUnder100()).reduce((a, n) => a + n);
```

## 偶数は無限にある

偶数は無限にあります。for文で無限のイテレーター[^iterator_and_generator]を作りましょう。初期値、無限の条件、無限に`yield`、2ずつ増えていくのを1行で書けてわかりやすいですね。[^有限]

```js
function* evenNumbers() {
  for (let n = 0; true; n += 2) yield n;
}
```

[^iterator_and_generator]: [イテレーターとジェネレーター - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)
[^有限]: 実際には[JavaScript において、 Number は 倍精度64ビット浮動小数点形式 (IEEE 754)](https://developer.mozilla.org/ja/docs/Glossary/Number)なので有限

## 無限の整数から偶数を取り出してもいい

こう書いてもいいですね

```js
function* numbers() {
  for (let n = 0; true; n++) yield n;
}

function* evenNumbers() {
  for (let n of numbers()) {
    if (n % 2 === 0) yield n;
  }
}
```

## 100未満の整数を列挙する

100を超えたら列挙をやめましょう

```js
function* evenNumberUnder100() {
  for (let n of evenNumbers()) {
    if (n < 100) {
      yield n;
    } else {
      break;
    }
  }
}
```

## x未満の整数を列挙する

xを引数でとれば100じゃなくても使えるようになりますね

```js
function* evenNumberUnder(x) {
  for (let n of evenNumbers()) {
    if (n < x) {
      yield n;
    } else {
      break;
    }
  }
}

function* evenNumberUnder100() {
  yield* evenNumberUnder(100);
}
```

## 100未満の数列を元に配列を作る

`Array.from`にiterableを渡すと配列ができます。便利ですね。[^Array.from]

```js
Array.from(evenNumberUnder100())
```

[^Array.from]: [Array.from() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

## 足す

`reduce`するだけ

```js
const totalOfEvenNumberUnder100 = Array.from(evenNumberUnder100()).reduce((a, n) => a + n);
```
今日から使えるパイプとリダイレクト

linuxコマンドをいくつか覚えたあとは
**パイプ**と**リダイレクト**というテクニックを知るとできることが広がります。

いまいちなじみのないこれらのテクニックを紹介します。

## パイプ
`command1 | command2`のようにシェルコマンドの間にある縦棒のことを**パイプ**といいます。

テキスト上だとコマンドを真っ二つにしているようですが、
パイプ（水道管みたいなもの）の名の通り、
`command1`の出力が**パイプ**を通して`command2`の入力として実行します。

### 例１

```ls -l | grep rw-r--r--```
カレントディレクトリの中でrw-r--r--(権限644)のものだけ出力します。

### 例２

```cat error_20180402.log | grep ERROR```
error.logファイルの中でERRORの文字がある行だけ出力する。

### 例3

```ps | grep ERROR```
実行中プロセスの中でhoge.pyの状況を調べる。
pidを調べてkillしたり、メモリやCPUの使用状況を見てパフォーマンスチェックしたりします。

このように情報の一覧を表示して、その中で特定の状況を絞ることができます。
もちろんA | B | C のようにどんどんパイプでつなげることもできるので
少しずつ応用できるように「このコマンドとこのコマンド使ってこんなことできないかな？」と考えてみるといいでしょう。

## リダイレクト

リダイレクトは**方向を変える**という意味です。

例えば
```echo hello```
すると画面にhelloが出力されます。

画面のことを標準出力といい、この標準出力に向いている出力を
`echo hello >> hoge.txt`とすると、
`hoge.txt`ファイルにリダイレクト（方向を変えます）します。

なので画面にはhelloが表示されず、代わりにhoge.txtにhelloが書き込まれます。

リダイレクトを本来この形
```echo hello A >> B```
でAからBに向きを変えることです。

```echo hello 1>>hoge.txt```
と打ってみてください。

さきほどと同じようにhoge.txtにhelloが書き込まれていますね。

これは1が標準出力という意味で、
```echo hello >hoge.txt```
だと リダイレクトの左部分、つまりリダイレクトするものがなさそうに見えますが、
左の部分がないときは標準出力がリダイレクト対象としてデフォルトで選ばれます。
そのため、
```echo hello 1>hoge.txt```
と同じ結果となるのです。

ちなみにエラー出力は2が割り振られており、
```ls -bze 2> hoge.txt```
とすると、エラーの内容をhoge.txtに出力することができます。

ちなみに`>`は上書き、`>>`は追記になりますので気をつけましょう。
タイムゾーンの変更と、日付のフォーマット[Rails]

# タイムゾーンの変更と、日付のフォーマット[Rails]

```application.rb
class Application < Rails::Application
  # 追加
  config.i18n.default_locale = :ja
  config.time_zone = 'Tokyo'

  #  ActiveRecord 使用時に DB に書かれる時刻も合わせたい場合は以下も追加
  config.active_record.default_timezone = :local
end

# 追加
Time::DATE_FORMATS[:default] = '%Y/%m/%d %H:%M'
```

### フォーマット利用例

```hoge_helper.rb
def format_posted_time(time)
    time.to_s(:default)
end
```
EC2のインスタンス上でConsole上のタグ名を取得するワンライナー


```sh:
aws ec2 describe-instances --instance-ids `curl -s http://169.254.169.254/latest/meta-data/instance-id` --query 'Reservations[].Instances[].{Name:Tags[?Key==`Name`].Value}' --output text | awk '{print $2}'
```
Scalaによるtype-safeなCloudFormation DSL

## 自己紹介
渋谷　充宏 @m4buya

* 株式会社オプト テクノロジー開発部 チームマネージャー
* Ruby / Scala / インフラ
* https://github.com/mshibuya
* RailsAdmin/CarrierWave committer
* ADPLAN SREチームリーダー(New!)

---
## SREチームを立ち上げました

が、人が足りてません…

株式会社オプトではSREを含めエンジニアを積極採用中です！

---
## アジェンダ

* 前提知識
* ScalaMatsuriへの応募内容
* cloudformal
  * 特長
  * 実際のコード
* 今後の展望
* まとめ

---
## 前提知識

* CloudFormationとは

JSON(やYAML)でAWSインフラが作れるやつです！

---
## LoadBalancerを作る

```js
"Resources" : {
  "ApplicationLoadBalancer" : {
    "Type" : "AWS::ElasticLoadBalancingV2::LoadBalancer",
    "Properties" : {
      "Subnets" : {
        "Ref" : "Subnets"
      }
    }
  }
}
```

---
## 条件分岐

```js
"Size" : {
  "Fn::If" : [
    "CreateLargeSize",
    "100",
    "10"
  ]},
```

---
## これ、つらくない…？

生で書くと死ぬやつなので、いろんなDSLがあります

* kumogata
* troposphere
* cloudformation-template-generator
* cloudform

---
## ScalaMatsuriへの応募内容

![cfp.png](https://qiita-image-store.s3.amazonaws.com/0/27474/a5582301-67f4-28bf-ff14-60207309492b.png)


---
## cloudformal

https://github.com/mshibuya/cloudformal

---
## 特長

* CloudFormationの更新に簡単に追従
* 静的な型チェック
* Object-Orientedなモデリング

---
## CloudFormationの更新に簡単に追従

Cloudformalのコードの大半はAWSが公開しているCloudFormation Resource Specificationより自動生成されており、コマンド一発で追従できます。

---
## 静的な型チェック

```scala
def blockDeviceMappings: Property[Seq[BlockDeviceMapping]] = Empty
def creditSpecification: Property[CreditSpecification] = Empty
def disableApiTermination: Property[Boolean] = Empty
def ebsOptimized: Property[Boolean] = Empty
def elasticGpuSpecifications: Property[Seq[ElasticGpuSpecification]] = Empty
```

---
## Object-Orientedなモデリング

```scala
trait ServerInstance extends aws.ec2.Instance {
  def image: AMIImage
  def imageId: String = image.id
}

case class BatchServerInstance(
  image: BatchServerImage
) extends ServerInstance

case class WebServerInstance(
  image: WebServerImage
) extends ServerInstance
```

---
## 今後の展望

* CLIが全然しょぼいので整備したい
* テストコード書きたい
* ドキュメント整備したい

---
## まとめ

* インフラ×型安全、意外といけるのでは
* とはいえ実用はこれから
* 可能性を感じていただけたら、ぜひ使ってみてください！

---
## 最後に

Starお待ちしてます★

https://github.com/mshibuya/cloudformal
Ruby : Enumerableモジュール


Enumerableモジュールは、HashクラスやArrayクラスにインクルードされているモジュールである。
また、全てのメソッドがeachメソッドを元に定義されており、eachメソッドが定義されているクラスであれば、そのクラスで利用できる。


##map
```
[1, 2, 3, 4, 5].map{|i| i ** 2}
=> [1, 4, 9, 16, 25]
#map = collect
```

##each_with_index
```
[:a, :b, :c, :d, :e].each_with_index{|v, i| puts "#{v} => #{i}"}
a => 0
b => 1
c => 2
d => 3
e => 4
=> [:a, :b, :c, :d, :e]

```
##each_cons
```
(1..10).each_cons(3) {|items| p items}
[1, 2, 3]
[2, 3, 4]
[3, 4, 5]
[4, 5, 6]
[5, 6, 7]
[6, 7, 8]
[7, 8, 9]
[8, 9, 10]
```

##each_slice
```
(1..10).each_slice(3) {|items| p items}
[1, 2, 3]
[4, 5, 6]
[7, 8, 9]
[10]
```

##reverse_each
```
> [1,2,3,4,5,6].reverse_each {|i| p i}
6
5
4
3
2
1
=> [1, 2, 3, 4, 5, 6]
```

##all?    /  any?
```
hoge1 = ["dog", "cat", "mouse", "pig"]
puts hoge1.all? {|w| w.kind_of?(String) }
=>true
 
hoge2 = ["dog", "cat", 123, "pig"]
puts hoge2.all? {|w| w.kind_of?(String) }
=>false

hoge2 = ["dog", "cat", 123, "pig"]
puts hoge2.any? {|w| w.kind_of?(String) }
=>true
```

##select / reject
```
[1,2,3,4,5,6,].select {|e| e % 2 == 1}
=> [1, 3, 5]

[1,2,3,4,5,6,].reject {|e| e % 2 == 1}
=> [2, 4, 6]
```

#count / first
```
[1,2,3,4,5,6].count
=>6
[1,2,3,4,5,6].first
=>1
[1,2,3,4,5,6].first(2)
=>[1,2]
```

##include
```
[1,2,3,4,5,6].include?(1)
=>true
```

##find  /  find_index
```
[1,2,3,4,5].find{|i| i % 4 == 0}
=>4

[1,2,3,4,5].find_index{|i| i % 4 == 0}
=>3
```

##include?

```
[1,2,3,4,5,6].include?(6)
 => true
```

##grep

```
ani = ["dog", 123, "#cat", "mouse"]
p ani.grep(String)

=>["dog", "#cat", "mouse"]
```

##max

```
numbers = [46, 55, 14, 23, 41, 32, 5, 16, 61, 39]
puts numbers.max
=>61

numbers = ["3", 4, "25", 12, "44"]
puts numbers.max {|a, b| a.to_i <=> b.to_i }
=> 44
```

##max_by
```
animals = ["dog", "cat", "dogs", "giraffe"]
puts animals.max_by {|anim| anim.size }
=> giraffe
```

##cycle
```
>[:a, :b, :c, :d].cycle {|v| p v}
:a
:b 
:c 
:d 
:a
:b 
:c 
:d 
...
```

##group_by

```
>(1..20).group_by{|v| v % 3}
=> {1=>[1, 4, 7, 10, 13, 16, 19], 2=>[2, 5, 8, 11, 14, 17, 20], 0=>[3, 6, 9, 12, 15, 18]}
```

##zip
```
>[:a, :b, :c, :d].zip([1,2,3,4], ["a","b","c","d"])
=> [[:a, 1, "a"], [:b, 2, "b"], [:c, 3, "c"], [:d, 4, "d"]]
```

##take / first

```
>["dog", "cat", "animal"].take(2)
=> ["dog", "cat"]

>["dog", "cat", "animal"].first
=> ["dog"]
```

##take_while
```
>[:a, :b, :c, :d].take_while{|v| v != :d}
=> [:a, :b, :c]
```

##drop / drop_while

```
>["dog", "cat", "animal"].drop(2)
=> ["animal"]

>[:a, :b, :c, :d].drop_while{|v| v != :c}
=> [:c, :d]
```
楽をしてWEBページを作ろう STEP1 `RUN` (Vue Pug Sass TS Buefy)

## 記事対象
* 最近の開発環境に触れてみたい方
* 直接FTPクライアントでサーバー側のファイルをいじってる方
* ある程度Webの知識がついてきて、更に何かしたい方
* タイトルでビビッと来る方

## 前提
* Bash
* Node.js v8.10.+
    * nodeやnodebrewは [こちら](https://qiita.com/sinmetal/items/154e81823f386279b33c) の記事が非常に参考になります
* vscode
    * sass-indented
    * tslint
    * vetur
    * vscode-bs-ctrlchar-remover
    * vscode-eslint

## 楽をしよう
1. Gitから構築済みプロジェクトを落としてくる
    * 便利なタグがすでに内包済み
        * ダイアログ
        * モーダル
        * ナビゲージョンバー
        * フォームアイテム
        * テーブル
2. タグを自作する
3. タグを配置する
4. コマンド一発でテスト用サーバーが立つ
5. コマンド一発でサーバーデプロイ用コードをビルド

こんな楽な環境があったらいいなーとは思いませんか？
今回は楽に速く美しく作れる環境を提案したいと思います

## リポジトリ
https://github.com/narumi18wa/vue-pug-sass-ts-proj

## RUN
1. `README.md` を軽く読む
2. `download` or `clone`
3. `$ cd ${project_dir}`
4. `$ ./install.sh`
5. `$ npm run dev`

これだけの操作でサンプルタグを表示したページが `localhost:8000` に立ち上がります

## 次記事
[次記事](https://qiita.com/narumi18wa/items/9e941483c346606cdd55)
CloudFormationでCognitoのカスタム属性を使用する

CloudFormationでCognitoのカスタム属性(custom attributes)を使用したい場合があります。しかし以下のように指定するとエラーとなります。

```yaml
...
  UserPoolClient:
    Type: AWS::Cognito::UserPoolClient
    Properties:
        ClientName: client
        GenerateSecret: false
        UserPoolId: !Ref UserPool
        ReadAttributes:
          - custom:private_eth_address
        WriteAttributes:
          - custom:private_eth_address
...
```

エラー内容:

```bash
The following resource(s) failed to create: [UserPoolClient]. . Rollback requested by user.
Invalid write attributes specified while creating a client (Service: AWSCognitoIdentityProvider; Status Code: 400; Error Code: InvalidParameterException
```

エラーがわかりにくいですが、必須書き込みパラメータが未指定の場合に発生します。なので以下のように必須書き込みパラメータ(この場合はemail)を加えれば解決します。

```yaml
...
  UserPoolClient:
    Type: AWS::Cognito::UserPoolClient
    Properties:
        ClientName: client
        GenerateSecret: false
        UserPoolId: !Ref UserPool
        ReadAttributes:
          - email
          - custom:private_eth_address
        WriteAttributes:
          - email
          - custom:private_eth_address
...
```
windows7にDockerをインストールした手順まとめ

windows7にDockerをインストールしたので、備忘録として手順をまとめておきます

#ダウンロード
    
https://docs.docker.com/toolbox/overview/#ready-to-get-started
ここからダウンロード　
自動スクロールで表示された「Get Docker Toolbox for Windows」を押す
#ダウンロードされたインストーラを実行
- select distination locationまではそのまま
- select componentでは、既にVirtualBoxとGithub for WindowsをインストールしてあるPCだったのでチェックを外した。

あとは最後までそのまま。

#ドライブの変更
インストール自体は上記で完了なのだけど、デフォルトだとDockerの仮想ディスクファイル(disk.vmdk)がCドライブに置かれているので、Cには置きたくないなという人は設定ファイルの変更が必要になる
（イメージによっては容量も結構でかい）

デフォルトだとdisk.vmdkは以下の場所にある

```none
C:\Users\<ユーザー名>\.docker\machine\machines\dev\disk.vmdk
```

こちらを別のドライブの適当なフォルダに引っ越しする。
そのあと、

```none
C:\Users\<ユーザー名>\.docker\machine\machines\dev\dev\dev.vbox
```
をエディタで編集する。

```none
<HardDisks>
    <HardDisk uuid="ランダムな文字列"　location="C:/Users/<ユーザー名>/.docker/machine/machines/dev/disk.vmdk" ... />
</HardDisks>
```
といった行があるので、
パスを引っ越し先に変更する

```none
<HardDisks>
    <HardDisk uuid="ランダムな文字列"　location="D:/引っ越し先のパス/disk.vmdk" ... />
</HardDisks>
```

無事に起動できたらおしまい
Treasure Data (Presto) で Array の要素数を得る

`array<any>` 型に対して、配列の要素数（長さ）を得るには `cardinality` という関数を使う。

```
cardinality(x) → bigint
  Returns the cardinality (size) of the array x.
```

https://prestodb.io/docs/current/functions/array.html

 `size` とか `length` とか `array_size` とか `array_length` とかは無い。
【tutorial】GitHubのアカウントを作成

2018年4月3日に実施。

１．Username、Email、Passwordを入力して「Sign up for GitHub」をクリック。
https://github.com/
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/247425/705628d6-02c2-4525-42aa-deae5e40ff07.jpeg)

２．何も考えずに「Continue」をクリック。
※「Unlimited public repositories for free」= フリープラン（パブリックリポジトリだけ作成可能）
　「Unlimited private repositories for $7/month」= 月額7ドル払えば、プライベートリポジトリを無制限に作成可能
![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/247425/6cb51a22-c5bc-1214-a2c4-c0590ac4cdad.jpeg)

３．何も考えずに「skip this step」をクリック。
![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/247425/9f048c50-ed26-1bd4-9b6f-0e57d966c2dd.jpeg)

４．「１．」で入力したEmailに確認メールが届いているので、「Verify email address」をクリック。
![4.jpg](https://qiita-image-store.s3.amazonaws.com/0/247425/6e090361-1dcf-f57d-dc61-2ece571c5cf9.jpeg)

終わり。

GitHubリポジトリの作成は次の記事。
https://qiita.com/d778980/items/a81568d5fbfcfad784ce
Python データフレームの列名を変更

pandasでのデータ加工時、データフレームの列名を変更したいとき

###1.データ読み込み時
```
df = pd.read_csv('test.csv',
                  names = ('id', 'gender', 'generation'))
```

変更後イメージ

| id|gender|generation| 
|:--|:--|:--|
| aa | 0 | 10 | 
| bb | 1 | 20 | 



###2.データ読み込み後
現在ついている列名を何に変更するかを、columnsの後に辞書型で指定する

```
#変更前のデータフレーム名をdfとする
df = df.rename(columns={'A':'id', 'B':'gender', 'C':'generation'})
```
変更前イメージ

| A|B|C| 
|:--|:--|:--|
| aa | 0 | 10 | 
| bb | 1 | 20 | 

変更後イメージ

| id|gender|generation| 
|:--|:--|:--|
| aa | 0 | 10 | 
| bb | 1 | 20 |
filter(., word %in% c("a", "b")) でエラー:    'filter' is longer than time series


###1.実行内容
データフレームから条件を満たす行のみを出すために、
以下のようなコードを書いた
```
df2 <- df %>%  filter(word %in% c("a", "b"))
```



###2.エラー内容
```
 filter(., word %in% c("a", "b")) でエラー: 
  'filter' is longer than time series
```

###3.解決方法
dplyrのfilterを使用するつもりだったが、読み込まれていなかったことが原因だった。

```
library(dplyr)
```
を実行してから、1のコードを実行
NULLをFalseに変更する（条件によってブール値に変換）

##概要
データが条件を満たすかによってブール値(True, False)を入れる

##1.NULLにはFalse,それ以外にはTrueを入れる

```
#データ名をdfとする
#flg列にNULLが入ってればFalse, それ以外はTrueをつける

df.loc[:, 'flg'] = df.flg.apply(lambda x: x==x)
```

変換前イメージ

|id|flg|
|:--|:--|
|aa|1|
|bb|NULL|
|cc|NULL|
|dd|1|

変換後イメージ

|id|flg|
|:--|:--|
|aa|True|
|bb|False|
|cc|False|
|dd|True|



##2.条件を満たせばTrue, そうでなければFalseを入れる

```
#データ名をdfとする
#flgに1以上が入っていればTrue, それ以外はFalseをつける

df.loc[:, 'flg'] = df.flg.apply(lambda x: x>=1)
```

変換前イメージ

|id|flg|
|:--|:--|
|aa|1|
|bb|0|
|cc|2|
|dd|0.5|

変換後イメージ

|id|flg|
|:--|:--|
|aa|True|
|bb|False|
|cc|True|
|dd|False|
Linuxの基本コマンド集①2018/04/03

２０１８年4月３日スタート
40歳からスタートするLinux 1日目
基本コマンドを利用してディレクトリ作成、コピー、移動などを実行する。

mkdir newDir1　％ディレクトリを作る

```
[root@ik1-331-25935 home]# mkdir newDir1
[root@ik1-331-25935 home]# ls -l
total 4
drwx------ 4 kho       kho       4096 Apr  3 14:32 kho
drwx------ 2 lee       lee         80 Apr  3 13:30 lee
drwx------ 2 mizukoshi mizukoshi   80 Apr  3 13:30 mizukoshi
drwx------ 4 nam       nam        127 Apr  3 13:30 nam
drwxr-xr-x 2 root      root         6 Apr  3 18:14 newDir1
drwx------ 2      1001      1001   80 Apr  3 13:28 okuno
drwxr-xr-x 3 root      root        35 Apr  3 15:29 test
drwxr-xr-x 3 root      root        53 Apr  3 15:20 test2
```

cd newDir1　％newDir1ディレクトリに移動する

```
[root@ik1-331-25935 home]# cd newDir1
[root@ik1-331-25935 newDir1]# ls -l
total 0
```

mkdir subNewDir1　％ディレクトリを作る

```
[root@ik1-331-25935 newDir1]# mkdir subNewDir1
[root@ik1-331-25935 newDir1]# ls -l
total 0
drwxr-xr-x 2 root root 6 Apr  3 18:16 subNewDir1
```
mkdir -p newDir2/subNewDir2 ％一発でディレクトリが作られる

```
[root@ik1-331-25935 home]# mkdir -p newDir2/subNewDir2
[root@ik1-331-25935 home]# ls -l
total 4
drwx------ 4 kho       kho       4096 Apr  3 14:32 kho
drwx------ 2 lee       lee         80 Apr  3 13:30 lee
drwx------ 2 mizukoshi mizukoshi   80 Apr  3 13:30 mizukoshi
drwx------ 4 nam       nam        127 Apr  3 13:30 nam
drwxr-xr-x 3 root      root        23 Apr  3 18:16 newDir1
drwxr-xr-x 3 root      root        23 Apr  3 18:19 newDir2
drwx------ 2      1001      1001   80 Apr  3 13:28 okuno
drwxr-xr-x 3 root      root        35 Apr  3 15:29 test
drwxr-xr-x 3 root      root        53 Apr  3 15:20 test2
[root@ik1-331-25935 home]#
```
cd newDir1　％移動
cal > cal1.txt　％カレンダーファイルを作成

```
[root@ik1-331-25935 home]# cd newDir1
[root@ik1-331-25935 newDir1]# cal > cal1.txt
[root@ik1-331-25935 newDir1]# ls -l
total 4
-rw-r--r-- 1 root root 133 Apr  3 18:21 cal1.txt
drwxr-xr-x 2 root root   6 Apr  3 18:16 subNewDir1
[root@ik1-331-25935 newDir1]# cat cal1.txt
     April 2018
Su Mo Tu We Th Fr Sa
 1  2  3  4  5  6  7
 8  9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
```

cp cal1.txt cal2.txt　％cal1.txtコピーしてcal2.txtを作成
cat cal2.txt　％内容を確認

```
[root@ik1-331-25935 newDir1]# cp cal1.txt cal2.txt
[root@ik1-331-25935 newDir1]# cat cal2.txt
     April 2018
Su Mo Tu We Th Fr Sa
 1  2  3  4  5  6  7
 8  9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

```

cp cal2.txt cal1.txt　％コピー
mv cal2.txt subNewDir1　％subNewDir1に移動させる
cd subNewDir1　％subNewDir1ディレクトリで確認

```
[root@ik1-331-25935 newDir1]# cp cal2.txt cal1.txt
[root@ik1-331-25935 newDir1]# mv cal2.txt subNewDir1
[root@ik1-331-25935 newDir1]# cd subNewDir1
[root@ik1-331-25935 subNewDir1]# ls
cal2.txt
```
AWS Cloud9からRDSに接続

難しそうに見えて簡単に接続できるので、手順を記載します。

1. Cloud9が起動しているEC2のVPCを確認
2. RDSのVPCを確認
3. 1と2のVPC間のピアリング接続を作成
4. それぞれのVPCのルーティング設定に、ピアリング接続への設定を追加
5. RDSのセキュリティグループのインバウンド許可に、Cloud9が起動しているEC2のVPCを追加
6. Cloud9のコンソール上からmysqlコマンドで接続を試す
7. 成功！

Cloud9にはmysqlはインストール済なので、mysqlであればネットワーク設定のみで接続が可能です。
C++のポインタを理解する

## 本記事執筆の背景
最近，C++使うことになったため。
理解が足りなくて苦しいので知識の整理を兼ねて書きます。

※ 内容にはいｔ

## ポインタとは
> ポインタとは，なんらかのオブジェクトを指し，オブジェクトを間接的に参照するためのものである。

僕のC言語の理解では，データのアドレスを入れるものという理解だったけど，C++のクラスを理解する上ではこちらのほうがわかりやすいですね。ポインタは以下のようにして，使用します。

```c++
char x;
char *ptr = &x;
```

`char *ptr`でポインタを宣言し， `&x`でxのアドレスを代入しています。

## ポインタの利点
ポインタの利点がいまいち理解できてませんでしたが，

> ポインタは移動可能

ということで，ポインタは移動して使用することで旨味が出てきます。
参考文献[1]では会社を例にしています。非常にわかりやすい！！

例えば，自分が社員数10名の会社の社長だとします。
社員全員に伝えたい命令がありますが，全ての社員を一人ずつ呼んで複雑な命令を伝えるわけにもいかないという状況。このとき，中間管理職の課長がいればどうでしょうか。社長は直接社員一人ひとりに命令を伝える必要はなく，課長に命令を伝え，課長を経由して間接的に社員全員に命令を下すことができます。

この，社員を一人ずつ呼んで間接的に命令を伝えてくれる課長の役割をするのがポインタです。

具体的にどういうことかというと，以下の様なことが出来るということです。

```c++
int x, y;
int *ptr = &x; // ptrはxを指す
*ptr = 1;      // xに1を代入
ptr = &y;      // ptrはyを指す
*ptr = 20;     // yに20を代入
```

ちなみに，ポインタが配列の要素を指しているとき，ポインタを+1すると次の要素に移動できます。

```c++
char v[5];
char *p = &v[0];   // pはv[0]を指す
*p = 12;           // v[0]に12を代入
++ptr;             // ポインタはv[1]を指す
*ptr = 30;         // v[1]に30を代入
```

こんな感じで，ポインタは指している先を変更できるので，異なるオブジェクトに対する処理をひとつのコードで記述できるのが便利なのです。

## ポインタとクラス
構造体・クラス名を T とすると，

```c++
T *p = new T;
```

でクラスオブジェクトを生成することが出来ます。 オブジェクトを作って，ポインタで参照するんですね！
ちなみに単に

```c++
T obj;
```

と記述すると，現在のスコープ内で，構造体やクラスオブジェクトが生成されます。

オブジェクト生成時には，デフォルトコンストラクタが呼ばれ，ポインタが指す先の構造体・クラスのデータメンバは`p->メンバ名`で参照できます。他にも，`(*p).メンバ名`で参照することも可能です。

`p = new T;`で生成したオブジェクトを破棄する場合は，`delete p;`と書きます。 （← この辺りも勉強が必要）


## まとめ
ポインタへの認識を，

**データのアドレスを表すもの 
=> オブジェクトを間接的に参照するためのもの**

と変えると，C++のクラスにおけるポインタの使い方が理解しやすいことがわかりました。
引き続き勉強を続けます。


## 参考文献
[[1] 手を動かしてさくさく理解するC言語/C++ ポインタ入門](http://vivi.dyndns.org/tech/cpp/pointer.html)
Rails 5.1, webpack4, webpackerによるvue.jsの導入時にvue-loaderのcssに関するpluginがエラーを起こす対処

[【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～](https://qiita.com/jnchito/items/30ab14ebf29b945559f6)を参考にrails+vue.jsの環境構築を行なっている際にエラーに悩まされ、特に解決方法が他に記載されていなかったので、投稿いたします。
## エラー内容
事件は `bin/webpack`コマンドを入力した時に起きました。
参考先でも「エラーが出ます」と書いてあるが、エラー内容が異なる

```
[./app/javascript/app.vue] 558 bytes {hello_vue} [built] [failed] [1 error]
[./app/javascript/packs/application.js] 515 bytes {application} [built]
[./app/javascript/packs/hello_vue.js] 1.89 KiB {hello_vue} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {hello_vue} [built]
    + 4 hidden modules

ERROR in ./app/javascript/app.vue
Module build failed: Error: [vue-loader] extractCSS: true requires extract-text-webpack-plugin as a peer dependency.
    at getCSSExtractLoader (/Users/userName/project/node_modules/vue-loader/lib/helpers.js:124:15)
    at resolveLoaders (/Users/userName/project/node_modules/vue-loader/lib/helpers.js:108:9)
    at createHelpers (/Users/userName/project/node_modules/vue-loader/lib/helpers.js:166:7)
    at Object.module.exports (/Users/userName/project/node_modules/vue-loader/lib/loader.js:72:7)
 @ ./app/javascript/packs/hello_vue.js 9:0-29 16:15-18
```

抽出

```
Module build failed: Error:
 [vue-loader] extractCSS: true requires extract-text-webpack-plugin as a peer dependency.
```
vue-loaderにおいて、`extractCSS`ではなく`extract-text-webpack-plugin`を読み込んでねという内容。
[バージョンアップにより変更された模様](https://github.com/vuejs/vue-loader/issues/1220)なので、[vue.jsの公式レファレンス](https://vue-loader.vuejs.org/en/configurations/extract-css.html#manual-configuration)を参考に下記のように対応したところ解決。

## 解決方法
pluginインストールしておいて

`npm i -D extract-text-webpack-plugin`

ご希望通り、読み込ませる。あとは、webpack-dev-serverかproductionかの判定を組み合わせる。

``` config/webpack/loaders/vue.js
const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
const ExtractTextPlugin = require("extract-text-webpack-plugin") <-該当のpluginを読み込ませる

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { ExtractTextPlugin } <-設定する
  }]
}
```
flatMapをcompactMapに置換したらerrorでた時の対処

# 問題
flatMapを安易にcompactMap置換したら一部処理が通らない

# 原因
```swift
struct Ints {
    let value: [Int]
}

let i = [Ints(value: [0]) ,Ints(value: [1])]

i.flatMap{ $0.value } //[0, 1]
i.compactMap{ $0.value } //[[0], [1]]
```

↑の例えだと
flatMapだと`[Int]`で返って来るが
compactMapだと`[[Int]]`で返って来るのでbuild通らなくなった

compactMap内で返す値の型が`[Any]?`か`[Any]`によって返って来る値が変わるらしい
~~`[Any]?`ならflatMapが正しいのですが~~
~~`[Any]`のものを取り出すのにflatMap使わなくていいじゃんって話なんですが。。。~~
↑[修正しました](https://qiita.com/Tomooki_Tatsuguchi/items/aa2becdb7d5ff25edd79#lovee-%E3%81%95%E3%82%93%E3%81%8B%E3%82%89%E6%8C%87%E6%91%98%E9%A0%82%E3%81%8D%E4%BF%AE%E6%AD%A3)
今回の使い方だとSwift4.1以降でのflatMapの使い方として問題ないので　**flatMapのままで良かった**
ただflatMapを使うことによってwarnigが取れないのしゃあないのかな！？

#対応

色々やり方はあると思いますが
一行で書くならreduceでとる

```swift
i.reduce(into: [Int]()) { $0 = $0 + $1.value }
```


# @lovee さんから指摘頂き修正

↑の例でのflatMapの使い方でも問題はない

以下Swift4.1以降での使い方

- [compactMap](https://developer.apple.com/documentation/swift/sequence/2950916-compactmap)
 - nilを含む要素を取り出す(フィルタリング)
 - ```
Returns an array containing the non-nil results of calling the given transformation with each element of this sequence.
```

- [flatMap](https://developer.apple.com/documentation/swift/sequence/2905332-flatmap)
    - 要素内の要素を取り出す
    - ```
Returns an array containing the concatenated results of calling the given transformation with each element of this sequence.
```
リソースポリシーによるAPI GatewayのIPアドレス制限を試す

## はじめに
API Gatewayにリソースポリシーを設定できる様になりました。

https://aws.amazon.com/jp/about-aws/whats-new/2018/04/amazon-api-gateway-supports-resource-policies/

これまで API で IP 制限を行うには、CloudFront + AWS WAF を組合せて使うか、
カスタムオーソライザーで制御する必要があり、少々大掛かりだったのですが、
S3 のバケットポリシーの様に JSON 形式で簡単に指定できます。

## やってみる
コンソールで API を選択すると、ナビゲーションペインにリソースポリシーが追加されています。
IP 範囲のブラックリストを選択すると自動的にポリシーのサンプルが入力されるので
Resource でステージ、メソッド、リソースパスの情報と、Condition に接続を拒否したい
IP アドレスまたは CIDR ブロックを定義するだけで簡単に設定できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/ee0b1206-53e3-5ad0-be7e-8ec8bfd453b2.png)

ステージ等は省略可能です、今回はホワイトリスト型に設定したかったので、以下のように指定しました。

```policy.json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "execute-api:Invoke",
            "Resource": "arn:aws:execute-api:ap-northeast-1:<account-id>:<api-id>/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": "接続を許可するIPアドレス"
                }
            }
        }
    ]
}
```

保存後、API のデプロイをお忘れなく。反映までは数秒かかりました。
許可対象外の IP アドレスから API を呼ぶと、以下のようなエラーメッセージが表示されます

```
{"Message":"User: anonymous is not authorized to perform: execute-api:Invoke on resource: arn:aws:execute-api:ap-northeast-1:account-i:api-id/dev/GET/}"
```
リソースポリシーで明示的なDenyを設定し、アクセスが拒否された場合は with an explicit deny
というメッセージも追加されます。

```
{"Message":"User: anonymous is not authorized to perform: execute-api:Invoke on resource: arn:aws:execute-api:ap-northeast-1:account-i:api-id/dev/GET/ with an explicit deny"}
```

Conditionには、aws:SourceIP 以外も指定可能で、以下のドキュメントにまとまっています。
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/apigateway-resource-policies-aws-condition-keys.html
aws:CurrentTime キーによる日付条件や、aws:UserAgent キーによる制限も便利そうです。

## 注意点
**2020/7/10 追記**
以前は設定値を空にして保存できなかったのですが、2020年7月時点では
値を空に戻して保存できるようになっており、以下の事象は改善されていました。

~~リソースポリシーの設定画面には削除ボタンが無いので、一度設定すると~~
~~現状コンソール上での削除はできないように見えます。(空にすると保存できない)~~
~~その場合は以下のようにCondition 部分を削れば制限解除となると思いますが、どうせなら削除もしたい。。~~

```poclicy.json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "execute-api:Invoke",
            "Resource": "arn:aws:execute-api:ap-northeast-1:<account-id>:<api-id>/*",
        }
    ]
}
```

簡単ですが、以上です。
参考になれば幸いです。
Arduino UNO R3をPS3/PCコントローラー を DIYしよう！

# PS3 のジョイスティックを DIY してみました。（何故か、このサイトに投稿されていない）覚書
##基本的には下記の説明通りです。

https://code.google.com/archive/p/unojoy/wikis/GettingStarted.wiki

https://github.com/AlanChatham/UnoJoy

- UnoJoyWin-21Feb2013.zip 最新のものをダウンロード 
　https://code.google.com/archive/p/unojoy/downloads

- UnoJoyWin\UnoJoyArduinoSample を、Arduino にインストール
-- ピンの配置は、スケッチを見てください。
- Windowsのドライバーをインストールします。
  \UnoJoyWin\UnoJoyDriverInstaller.bat
- ファーム書き換えは、ファーム書き換えツールを入手後に実施してください。
  \UnoJoyWin\TurnIntoAJoystick.bat ----- ※

- ファーム書き換えツールを入手します。
  http://www.microchip.com/developmenttools/ProductDetails.aspx?PartNO=FLIP

- Arduino UNO R3のファームの変更
 1 Arduino UNO R3 の、RESET と GNDを接続(画像は下記)電源接続後に切断
 https://www.arduino.cc/en/uploads/Hacking/Uno-front-DFU-reset.png
 2 ファーム書き換え
 \UnoJoyWin\TurnIntoAJoystick.bat 
 3 USBを抜き差しすると、USBジョイスティックとして認識されます。

- USBジョイスティックから元に戻す。

上記手順で、バッチファイルを下記に変えてください。

TurnIntoAnArduino.bat
# PS4 は、別途検証しているところです。
【tutorial】Qiitaに初投稿

2018年4月3日に実施。

１．Googleアカウントを作成。　https://www.google.co.jp/
２．GoogleアカウントでQiitaにログイン。　https://qiita.com/
３．画面右上の「投稿する」ボタンをクリック。
４．「タイトル」「タグ」「本文」を書いて、画面右下の「Qiitaに投稿」ボタンをクリック。

終わり。めちゃめちゃ簡単でした。

※投稿できて安心してたら、Gmailにこんなのが届いていました。
　放置したまま24時間経つとどうなるんだろう。
　　　![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/247425/f2b1d25f-80a8-998f-f611-b7886d8099c0.jpeg)

［補足：【question】投稿の編集履歴は誰でも見れる？］
https://qiita.com/d778980/items/e3d96c3aa20a73fe5750

［補足：【what is】限定共有投稿］
https://qiita.com/d778980/items/2f4071c8ee7d50370d94
文鎮化したNexus5Xの復旧方法

## 初めに
国内外で1年ほどNexus5Xを試用した後にブートループに陥り起動できなくなるケースがXDA等で多く報告されています。筆者も1年程でなってしまいました。
本記事はNexus5Xの文鎮化について、私の分かる範囲で対策をまとめたものです。100％復旧できるかはわかりませんが色々参考になるかと思います。

筆者はこれまでに2台Nexus5Xを購入し、Googleロゴでブートループになりましたが緩和策を打ったことでひとまず安定動作するようにはなりました。

また問題が起きた時のメモ書きも兼ねて残します。

予め言っておきますが、**この記事で示すような操作をする場合は自己責任でお願いします。場合によってはBootloaderのアンロックをするため、保証が無くなります。保証が残っている場合は下手な操作をするよりも修理に出したほうが確実です。**

また、電源回路などの物理破損に関しては修理しかありません。

## ブートループの状態について
主に扱うのは以下の場合です。
"adb コマンドが使える・fastbootコマンドが使える"前提で書いています。

- Googleロゴでブートループする。

## Googleロゴでブートループする
筆者のNexus5Xはこの問題で文鎮化しました。
問題の原因としては[XDA上で記事になっています](https://www.xda-developers.com/nexus-5x-bootloop-fix-boot-phone/)。まだ完全には判明してはいませんが、Nexus5XのCPU構成(big.LITTLE構成)に問題を抱えており、big側のCPUを無効化することで緩和できることが知られています。無効にするとその分性能は落ち、バッテリーの持ちは良くなると思います。

方法としては以下の手順で行っていきます。
- ブートローダーのアンロック
- CPU無効化

保証はなくなりますし、デフォルトROMだとアップデートが来ないので筆者は[LineageOS](https://download.lineageos.org/bullhead)に移行しました。

### 手順1.ブートローダーのアンロック
多分こちらが一番苦戦します。なんせGoogleロゴでブートループするわけですから。どうにかして起動させます。

具体的には**起動するまで放置するか、Nexus5Xをドライヤー等で温めます。**(冷蔵庫等で冷やして起動した例もあるそうですが定かではありません)
理由としては、Nexus5Xは高温状態になるとbig側のCPUを無効化し6コア→4コア動作になるという仕様がありそれを利用しています。

起動したらすぐさま"開発者向けオプション"からOEMアンロックを有効にします。
有効にしたらすかさずFastbootで起動し直してブートローダーのアンロックをします。
`fastboot oem unlock`
 データが消えますがここはしょうがないです。

### 手順2.4コア動作にする
最初にリカバリを起動(or インストール)してパッチを当てます。
以下から4コア動作のリカバリとスクリプトを入手します。
https://basketbuild.com/devs/osm0sis/osmods
引用元：https://forum.xda-developers.com/showthread.php?t=2239421

`twrp-3.2.1-0-fbe-4core-bullhead.img`
`N5X-6P_BLOD_Workaround_Injector_Addon-AK2-signed.zip`
をダウンロードしてください。

まずはブートローダーからリカバリを起動orインストールします。
`fastboot flash recovery /path/to/twrp-3.2.1-0-fbe-4core-bullhead.img`
もしくは
`fastboot boot /path/to/twrp-3.2.1-0-fbe-4core-bullhead.img`

TWRPが起動したらInjectorのzipファイルをインストールします。
adb コマンドが使えるので`adb push`か`adb sideload`辺りでインストールできると思います。

これでひとまず4コア化が完了します。

通常通り再起動して使うことも出来ますし、LineageOSをインストールする際にも先程のInjectorを最後に適用すれば使えます。

## おまけ：起動するけど時々落ちる/OSの起動アニメーションでループする場合の対処
OSのアップデートが上手くおこなえていない時等に起こります。
方法としては2つあります。どちらも行いそれでも不安定な場合は別の問題の可能性があります。

- スマホ初期化
- アップデートの手動適用

スマホの初期化については一般的な手順でググればいくらでも出てくるので割愛します。

アップデートの適用についてはブートローダーのアンロックが行われていない場合でも出来ます。
ブートローダーのアンロックが行われている場合はFactory Imagesをインストールしてしまうのが楽です。
ちなみにインストールスクリプトについては注意しないとユーザーデータも消えます。
Factory Imageは以下から入手できます。
https://developers.google.com/android/images

ブートローダーがロックされている場合はFull Otaのzipファイルを適用することで出来ます。
Full OTAはアップデートの差分ではなく、全データが入っています。
Otaファイルの適用はNexus5Xのブートローダーからリカバリーを起動してadb sideloadでインストール出来ます。
OTAファイルは以下から入手できます。
https://developers.google.com/android/ota

ちなみにNexus5Xのブートローダの起動は音量-と電源ボタンの長押しで起動できると思います。リカバリーはブートローダーの画面から起動できます。詳細はググって下さい。


## 最後に
とりあえず緩和策がだいぶ出てきて、自動で4コア化してくれる便利なスクリプトも登場してきたので延命できそうです。
筆者は2台持っていて一台は電源関連が死亡し完全に文鎮になりましたが、2台目はGoogleロゴでのループになったので上記手順で動作するようになりました。今のところ90時間ぐらい動いています。
Unreal Engine 4でEquirectangularの360度画像を表示する

Unreal Engine 4でEquirectangularの360度写真を表示したかったのでやり方を調べてみました。公式ドキュメントの[StereoPanoramicCaptureのページ](https://docs.unrealengine.com/en-us/Platforms/VR/StereoPanoramicCapture/QuickStart/CreatingViewerMaterial)にそれっぽいのがありましたが、微妙にアレンジしました。

## テクスチャーのインポート

まず、Equirectangularの360度写真をコンテンツブラウザにインポートします。

![インポートした状態](https://qiita-image-store.s3.amazonaws.com/0/56668/b2699dcb-3ee4-a342-b4de-d5009b76ff6f.png)

このテクスチャーをダブルクリックで開き、以下の箇所を編集します。

* Compression Settingsを **UserInterface2D (RGBA)** にする。
* Mip Gen Settingsを **NoMipmaps** にする。
* Texture Groupを**Skybox**にする。
* sRGBの**チェックを外す**。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/56668/3de57ce7-5017-8325-a5f5-eb25917361f0.png)

## マテリアルの作成

次に、マテリアルを作ります。テクスチャーを右クリックしてマテリアルを作成すると早いです。マテリアルを作ったら、下記のように編集します。

![Equirectangularマテリアル](https://qiita-image-store.s3.amazonaws.com/0/56668/a9ffa395-d4f1-50ee-adeb-e5c9b2428745.png)

やっていることは単純で、↑のコメントに書いたとおりです。Shading ModelはUnlitにしておきましょう。

## スカイボックス（球）の作成

このマテリアルを巨大な球に貼り付けてレベルに配置すれば良いです。巨大な球を用意する方法はいろいろ考えられますが、今回はBlueprintを使う方法を試してみました。

1. まずコンテンツブラウザで右クリックして新規Blueprintクラスを作成します。親クラスはActorとします。
2. ダブルクリックしてBlueprintエディターを開きます。
3. Add Component→Static Meshを選択します。
4. Static Meshを選択した状態で詳細タブからStatic Meshを選ぶところに`SM_SkySphere`を指定する（右下のView OptionsのShow Engine Contentにチェックを入れる）。
5. MaterialsのElement 0に先程作成したマテリアルを指定する。
6. Collision PresetsをNoCollisionにする。

ここまでできたらコンパイルして保存します。

このBlueprintクラスをレベルの中にドラッグアンドドロップして、360度写真が表示されれば完成です！!

グリグリ動かせます。
![capture.gif](https://qiita-image-store.s3.amazonaws.com/0/56668/6d9a150b-0fd0-8d85-cfe6-23e7f120f9c6.gif)
Cythonで、pyximportでも、コンパイルオプションを付与したい

## はじめに

pythonが遅くて、Cythonに手を出す人は多いかと思います。

入門書などでは、setup.pyを記述してインストールして実行しますが、開発中は、pyximportを使ったほうが効率が断然よいです。

他にも、マルチ環境（64bit,32bit環境など)で実行する際などにも、ソースでデプロイしたほうが便利だったりもするので、普段からpyximportを利用しています。

しかし、setup.pyがないと、コンパイルオプションが付けられない！
numpyのヘッダがみつからないよ！！
とお嘆きの貴兄に！

## pyximportでのオプションのつけ方

hoge.pyxファイルと同じフォルダに
hoge.pyxbldファイルを置いてください。

内容は以下です。

```hoge.pyxbld
def make_ext(modname, pyxfilename):
    from distutils.extension import Extension
    import numpy
    ext = Extension(name = modname,
        sources=[pyxfilename],
        extra_compile_args=['-ffloat-store'],
        include_dirs = [numpy.get_include()])
#        extra_link_args[['-Lpath', '-lcustomlib'])
    return ext

#def make_setup_args():
#    return dict(script_args=['--verbose'])
```

今回は特に、numpyのヘッダを追加しています。
普通のpythonファイルなので、自由に編集してください。
Extensionは通常のsetup.pyで記述するExtensionと同様になります。

詳しくはこちらか
https://github.com/cython/cython/blob/master/pyximport/pyximport.py
こちら

```python
import pyximport
pyximport.install??
```

## おわりに

Cython日本語の情報が少なすぎですね。
Swift3 テーブルをスクロールするとチェックマークが勝手につく場合の解決法

# Swift3 テーブルをスクロールするとチェックマークが勝手につく場合の解決法

## やりたいこと
ある値に合致した場合にのみテーブルで表示しているセルにチェックマークを付けたいがテーブルをスクロールするとチェックマークを付けたいセル以外にもチェックマークが勝手についたり、ずれたりする現象を解決したい

## 動作環境
- Xcode9.2
- Swift3

## 原因
どうやらセルの再利用に関する問題のようで、下記のようにテーブルにチェックマークをつける条件分岐を片方でしか行わなかった場合発生した。

```swift


import UIKit

class viewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

let alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]

// ... 中略 ...

    /// セルの表示内容を操作するメソッド
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // ここでは事前に定義しておいたStoryboardのセルを指定
        let cell = tableView.dequeueReusableCell(withIdentifier: "cellName", for: indexPath as IndexPath)
        cell.textLabel?.text = alphabet[indexPath.row]
        if cell.textLabel?.text == "a" {
           cell.accessoryType = .checkmark
        } 
        return cell
    }
}
```


## 解決策
チェックマークをつける際は条件分岐でつけない場合の処理もきちんと記載することで回避できた

```swift


import UIKit

class viewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

let alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]

// ... 中略 ...

    /// セルの表示内容を操作するメソッド
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // ここでは事前に定義しておいたStoryboardのセルを指定
        let cell = tableView.dequeueReusableCell(withIdentifier: "cellName", for: indexPath as IndexPath)
        cell.textLabel?.text = alphabet[indexPath.row]
        if cell.textLabel?.text == "a" {
           cell.accessoryType = .checkmark
        } else {
           cell.accessoryType = .none // 条件に当てはまらなかった場合、チェックマークをつけない記述を追記
        }
        return cell
    }
}

```