OmniAICreator/Qiita-1.07M huggingface dataset:
GCCのstd::isnan()に対する警告の謎

# GCCのstd::isnan()に対する警告の謎

C++/11のstd::isnan()を利用したとき、gccでわけのわからない挙動があったのでメモ書き。

動かないわけではないので無視もできたが、原因がわからず気持ち悪かったので深追いし、えらい時間を喰った。

## 現象

実装中、以下の現象が発生した。

### 環境

CentOS7上のgcc7 (DevToolkit 7)で発生。

$ gcc --version
$ gcc (GCC) 7.3.1 20180303 (Red Hat 7.3.1-5)

### コード

以下コードをコンパイルすると、型変換に関するコンパイラ警告が発生する。

```cpp
#include <cmath>

int main() {
  double x = 3.1;

  // warning: narrowing conversion of ‘isnan(x)’ from ‘int’ to ‘bool’ inside { } [-Wnarrowing]
  const std::vector<bool> a = {
    std::isnan(x),
  };
}
```

```sh
g++ -std=c++14  -Wall -Wextra -Wno-unused-variable -Wconversion test.cpp
```

std::isnan()の戻り値は[boolのはず](https://cpprefjp.github.io/reference/cmath/isnan.html)。なんでや！

## 理由

cstdlib内のisnan()の定義が、[C++/11仕様と、XOPENという古い拡張仕様の2つある](http://developers.redhat.com/blog/2016/02/29/why-cstdlib-is-more-complicated-than-you-might-think/)ことが原因の模様。

> Prior to GCC 6 the <cmath> header declared bool std::isnan(double) and bool std::isinf(double) functions for C++11 and later, and the <math.h> header (which came from the C library) declared the X/Open int ::isnan(double) and int ::isinf(double) functions. If a program added a using namespace std; to the global namespace then the two sets of functions would clash, and the program would fail to compile (but only in C++11 mode!)
> ~
> GCC 6 now detects when the obsolete functions are present in the C <math.h> header and uses them, avoiding the clash (**but meaning that the function might return int instead of bool as C++11 requires**)

上記環境では、問題のコードは以下のように前処理されていた(isnanに関係ない部分は除去済)。

```cpp
extern "C" {
extern int isnan(double __value) throw() __attribute__((__const__));
}
extern "C++" {
namespace std __attribute__((__visibility__("default"))) {
    constexpr bool isnan(float __x) { return __builtin_isnan(__x); }
    using ::isnan;
    constexpr bool isnan(long double __x) { return __builtin_isnan(__x); }
}  // namespace std__attribute__((__visibility__("default")))
}

int main() {
  const std::vector<bool> y = { std::isnan(0.5), };
}
```

`extern "C"{}`内(グローバル名前空間)で定義された`isnan()`が、usingでstd内に取り込まれている。

よって、引数がdoubleの`std::isnan()`だけはintを返す挙動になっていた、ということの模様。

## その他

以下だと警告が出ない。なんでや！

```cpp
double x = 3.1;
// vectorではなく配列のイニシャライザに指定 (組み込み配列と挙動が違うのはまあ納得)
const bool b[] = {
  std::isnan(x),
};
```

```cpp
// 変数ではなくリテラルをそのまま指定 (これで警告が消えるわけがわからない…)
const std::vector<bool> a = {
  std::isnan(3.1),
};
```

C++のすごい人がレスしてくれることを願って投稿。
ABC 132: D - Blue and Red Balls

以下、赤いボールを `R`、青いボールを `B` と書きます。

### 青いボールの並べ方
まず、青いボールの並べ方から考えます。青いボールを $i$ 個のブロックに分けると、高橋くんの操作回数は $i$ 回になります。ただし、青いボールは $K$ 個しかないので、$K+1$ 個以上のブロックに分けることはできません。

青いボールを $i$ 個のブロックに分けることにすると、各ブロックに最低1個は青いボールが必要なので、$i$ 個の青いボールを消費します。

残りの $K-i$ 個の青いボールは、$i$ 個のブロックのどこかに入ればよいことになります。この組み合わせ数は $\_i\mathrm{H}_{K-i}$ と書けます。「$i$ 個から重複を含めて $K-i$ 個取る」と読みます。

この組み合わせ数は、`||||BBBBB` というように、$K-i$ 個の青いボールを、$i-1$ 個の仕切りと合わせて並べる組み合わせ数と等しくなります。よって、 $\_i\mathrm{H}\_{K-i} = {}\_{K-1}\mathrm{C}\_{K-i}$ です。

### 赤いボールの並べ方

次に、赤いボールを並べます。青いボールが $i$ 個のブロックに分かれるためには、$i-1$ か所のすき間に赤いボールが最低1個以上入る必要があります。この時点で $i-1$ 個の赤いボールを消費します。$N-K < i-1$ の場合、青いボールを $i$ 個のブロックに分けることができないので、そのようなボールの並べ方は存在しません。

残った $N-K-(i-1)$ 個の赤いボールは、端も含めた $i+1$ か所に分配すればよいです。これは ${}\_{i+1}\mathrm{H}\_{N-K-(i-1)}$ 通りです。先ほどと同じように、$N-K-(i-1)$ 個の赤いボールを $i$ 個の仕切りとともに並べる組み合わせの数と同じなので、 ${}\_{N-K+1} \mathrm{C}\_{N-K-i+1}$ 通りあります。

### 答え

以上から、高橋くんが操作をちょうど $i$ 回行うようなボールの並べ方は、$i \leq N-K+1$ ならば ${}\_{K-1}\mathrm{C}\_{K-i}\times{}\_{N-K+1}\mathrm{C}\_{N-K-i+1}$ 通り、$i \> N-K+1$ ならば $0$ 通りです。

### 実装例
https://atcoder.jp/contests/abc132/submissions/6179079

### 参考リンク
[重複組合せ - Wikipedia](https://ja.wikipedia.org/wiki/%E9%87%8D%E8%A4%87%E7%B5%84%E5%90%88%E3%81%9B)

### 感想
こういうのが数分で定式化できる人は強い。
Retrofitでxmlの値を取得する

Retrofitでxmlの要素を取得するためにEntityを定義しました。
初めて行うと意外に苦戦することが多いので、まとめます。


今回対象のxmlは以下になります。

```
<?xml version="1.0"?>
<rss version="2.0">
  <channel>
    <title>××××××××××××××</title>
    <link>×××××××××××××××</link>
    <description>××××××××</description>
    <lastBuildDate>××××××</lastBuildDate>
 
        // itemがリストになっている
        <item>
          <title>××××××××××××</title>
          <link>×××××××××××××</link>          
　　　　　 <description>×××××××</description>          
　　　　　<pubDate>××××××××××××</pubDate>   
        </item>
   </channel>
```

今回作成したEntityは2種類になります。

```kotlin:BlogDetailEntity
@Root(name = "item", strict = false)
class BlogDetailEntity {

    @set:Element(name = "title", required = false)
    @get:Element(name = "title", required = false)
    var title: String? = null

    @set:Element(name = "link", required = false)
    @get:Element(name = "link", required = false)
    var link: String? = null

    @set:Element(name = "date", required = false)
    @get:Element(name = "date", required = false)
    var date: String? = null

    @set:Element(name = "description", required = false)
    @get:Element(name = "description", required = false)
    var description: String? = null
}
```

BlogDetailEntityは<Item>のリストの詳細を表しています。
`@Root`でitemを指定することにより、`<item>`の子要素を取得しています。
`name=`でタグの名前を指定することで取得できます。
`required=`は必須チェックを行っています。
また、`strict=false`を指定しないと、全ての要素をEntityに記載しないといけなくなるので、注意です。

```kotlin:BlogEntity
@Root(name= "rss", strict = false)
class BlogEntity {

    @set:Element(name = "title", required = true)
    @get:Element(name = "title", required = true)
    var title: String? = ""

    @set:Element(name = "lastBuildDate", required = true)
    @get:Element(name = "lastBuildDate", required = true)
    var lastBuildDate: String? = ""

    @set:ElementList(entry = "item", inline = true)
    @get:ElementList(entry = "item", inline = true)
    var articleEntities: List<BlogDetailEntity>? = null

    @set:Element(name = "channel")
    @get:Element(name = "channel")
    var channel: String? = ""
}
```

こちらではrss配下の要素を取得しています。
itemはリスト型で`name`ではなく、`entry`で指定しています。

実際にやってみて意外と苦戦しました。
[simplexmlのリファレンス](http://simple.sourceforge.net/home.php)を見ながらやるのが一番いいと思います。
pandas.DataFrameのMECEな分割で気をつけること

pandas.DataFrameを使ってアルゴリズムを実装する中で、__DataFrameをMECEに分割できていないためにバグることが多々あります__。
普通の`if~else`分岐であれば条件はほぼMECEになりますが、DataFrameの分割になると忘れがちな気がしています。（自分だけ？）
そんなとき、DataFrameでも`~`を使って`else`条件を書くことで、MECE分割されないことによるエラーを防ぐことができます。

サンプルとしてKaggleのtitanicデータを使用します。
<https://www.kaggle.com/c/titanic/data>

```python
import pandas as pd

# データセットの読み込み
train = pd.read_csv('../input/train.csv')

# 男性かつ20歳以上でDataFrameを分割
train_subset01 = train[
    (train['Sex'] == 'male')
    & (train['Age'] >= 20)
]
# not(男性かつ20歳以上)でDataFrameを分割
train_subset02 = train[
    ~((train['Sex'] == 'male')
    & (train['Age'] >= 20))
]

# 分割結果がMECEであることを確認
print(f'total size is :{str(len(train))}')
print(f'subset01 size is :{str(len(train_subset01))}')
print(f'train_subset02 size is :{str(len(train_subset02))}')
print(f'intersection size is :{str(len(set(train_subset01.PassengerId).intersection(set(train_subset02.PassengerId))))}')
```

```
total size is :891
subset01 size is :364
train_subset02 size is :527
intersection size is :0
```
冗長な表現になりますが、`~`を使うことで`if~else`を実現できるので、DataFrame分割でミスるリスクを減らせると思います。
react native + I18n で文字が翻訳されない

ちょっとハマったのでメモ。

# 結論
関数にする

### もうちょい詳しく
例えば…

```
const text = I18n.t("app")
```
これ、デフォルトの言語で出力されてしまいます。

理由は静的プロパティはlocaleが設定される前に実行されてしまうからです。
なので以下のように関数にすると呼び出すたびに実行されて都度翻訳された文字が返ってきます。

```
const text = () => I18n.t("app")
```

参考：https://github.com/AlexanderZaytsev/react-native-i18n/issues/137#issuecomment-338014805
【Git】リベース(rebase)  でコンフリクトした時の対処法

`git rebase` でコンフリクトした時の対処
1. コンフリクトしたファイルのコンフリクト部分を修正する
2. 修正が完了したら修正したファイルを `git add` でステージング環境にあげる
3. `git rebase --continue` でrebase を続行する

もしよくわかんなくなったら `git rebase --abort` でリベース自体を取り消すことができる。

もうリベースが怖くない

# 参考
https://fuqda.hatenablog.com/entry/2018/08/29/210526
Mongoを使う前に最低限気にしたい事メモ

※ずっとRBMSな世界で過ごしてきた人の個人的なメモです。
　右も左もわからない状態で初めてMongoを触った時、特に予め知っておきたかった事。
　すでに使ってる人から見ればわざわざメモするまでもない内容。

# "とりあえず"でMongoを使う前にここだけは考慮したい
## ドキュメントの構成
ドキュメントの単位は、業務で利用する単位とする事がおすすめ。
RDBMSのノリで正規化していってしまうとパフォーマンス低下の原因となる。
(業務の主体となる単位がおすすめ。例えば業務で扱うのが"人"の情報なら、１人につき１ドキュメント)

## ドキュメントサイズ
通常超える事は無いが、1ドキュメント16Mの制限があるので、軽く意識しておく。
どうしても超えてしまう場合にはリファレンスコレクション(関連テーブル的な)の導入を検討するべき。

## シャード構成
取り扱うデータの件数が多い場合にパフォーマンスを求める場合、シャーディングの構成を
どのように(スペック含め)するかは先にキメておかないと痛い目を見る。

## シャードキー
特にシャードキーは適当にキメてしまうと全然効率的な分散が出来ない事もあるので
たとえば「人」が単位のドキュメントの場合、単純に連番を振って段階的なシャーディングにしてしまうと
初期のユーザ(番号の若いユーザ)から順番にシステムを利用しなくなってしまった場合に負荷が偏ってしまい
シャーディングの旨さを享受できない。
このような場合、シャードキーをただの連番ではなく、連番のHashed Index等にしておけば解決する。
ひとまずのsassコンパイル用gulpfile.js設定

[gulp導入しました。](https://qiita.com/shiki_neki/items/e12e908c083805a9c06d)
引き続きgulpです。

#gulpfile.js設定
gulp4だと3系の記事を参照していたらエラー吐きまくったので、バージョンは気をつけましょう。


###追加したモジュール
- gulp-sass
- gulp-plumber
- gulp-notify

それぞれインストールしてください。

sassコンパイル用

```
npm install gulp-sass --save-dev
```

<br>エラー時に監視を止めない

```
npm install gulp-plumber --save-dev
```

<br>エラーコードのポップアップ表示

```
npm install gulp-notify --save-dev
```

<br>それらを反映した設定ファイル

```gulpfile.js
var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');

//sassコンパイル
gulp.task("sass",function(done){
	gulp.src("sass/*.scss")
	.pipe(plumber({errorHandler: notify.onError('<%= error.message %>')}))
	.pipe(sass({outputStyle: 'expanded'}))
	.pipe(gulp.dest("./css"));
	done();
});

//動作設定
gulp.task("default", gulp.series('sass', function(done){
	gulp.watch("sass/*.scss", gulp.series('sass'));
	done();
}));
```


<br>これを使用するプロジェクトフォルダに配置。
該当のフォルダにcdで移動後、gulpで開始します。

```
$ gulp
```

終了するときは「ctrl + c」です。


##さらにbrowser-sync加える
ファイルを更新すると同時にブラウザも更新してくれます。
複数のブラウザを開いている状態で、ページ遷移、スクロールなどを同期してくれます。


```
npm install browser-sync --save-dev
```

```gulpfile.js
var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var browserSync =require('browser-sync');

//sass
gulp.task("sass",function(done){
	gulp.src("sass/*.scss")
	.pipe(plumber({errorHandler: notify.onError('<%= error.message %>')}))
	.pipe(sass({outputStyle: 'expanded'}))
	.pipe(gulp.dest("./css"));
	done();
});


//ブラウザ同期
gulp.task('browser-sync', function(done) {
	browserSync({
		proxy: "http://hogehoge" //MAMPなどで設定したバーチャルホスト
	});
	done();
});

//ブラウザリロード
gulp.task('bs-reload', function (done) {
	browserSync.reload();
	done();
});


//動作設定
gulp.task('default', gulp.series('browser-sync', function (done) {
	gulp.watch("sass/*.scss", gulp.series('sass'));

	gulp.watch("./*.html",		gulp.series('bs-reload'));
	gulp.watch("./**/*.html",	gulp.series('bs-reload'));
	gulp.watch("./css/*.css",	gulp.series('bs-reload'));
	gulp.watch("./js/*.js",		gulp.series('bs-reload'));
	done();
}));
```

MAMPで設定しなくてもbrowser-syncでローカル環境は作ってくれますが、PHP環境などは対応していないので、やはり動的サイトではMAMPを入れたほうが良さそうです。

MAMPについてはこちら
[MAMPのインストール＆初期設定＋αをしてみる](https://qiita.com/shiki_neki/items/35d73f57615ed1f1d4fb)


完全な静的サイトだったら、browser-syncの部分を下記に書き換えるとMAMPなしでローカル環境を作ってくれます。

```gulpfile.js
//ブラウザ同期
gulp.task('browser-sync', function(done) {
    browserSync({
        server: {
            baseDir: "/",
            index: "index.html"
        }
    });
    done();
});
```

####公式サイトのオプション一覧
- [Browsersync options](https://www.browsersync.io/docs/options)
Vue.jsで連想配列の要素を削除するには

Vue.jsで配列要素をレンダリングに反映されるよう削除するには

```
Vue.obj.splice(インデックス番号, 削除数)
```

を使いますが、連想配列ではspliceは使えません。

```
Vue.$delete(配列, キー)
Vue.$delete(ary, 'id')
```
を使います。
要素追加の際の

```
Vue.$set(配列, キー, 値)
```
と似てますね。
Nuxt.js+Express.jsにTypeScriptを導入してみた(backpack.js編)

以前下記記事でTypeScriptに対応したNuxt.js+Express.jsを公開したが、サーバーにアップロードするためには不十分なので、追加で記事を作成

[Nuxt.js+Express.jsにTypeScriptを導入してみた](https://qiita.com/sauzar18/items/6255877457b29c5f7421)

[ソース](https://github.com/sauzar18/nuxt-express-ts)

## 主な環境
- Nuxt.js v2.8.1  
- @nuxt/typescript v2.8.1  
- Express.js v4.17.1  
- ts-node v8.2.0  
- nodemon v1.19.1  
- backpack-core v0.8.4  
- awesome-typescript-loader v5.2.1  

## backpack.jsを使ってts化されたファイルをコンパイル

まずはbackpackとawesome-typescript-loaderを追加する

```bash
yarn add backpack-core awesome-typescript-loader
```

ts-loaderだとダメでした。

## backpackの設定

config.entry.mainで起動スクリプトのパスを設定 
loaderを先ほどinstallしたawesome-typescript-loaderに設定

```js:backpack.config.js
module.exports = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  webpack: (config, options, webpack) => {
    config.entry.main = './server/index.ts'
    config.resolve = {
      extensions: ['.ts', '.js', '.json']
    }
    config.module.rules.push({
      test: /\.ts$/,
      loader: 'awesome-typescript-loader'
    })
    return config
  }
}
```

## package.jsonの設定

起動時の設定をする

```json:package.json
"scripts": {
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
    "precommit": "yarn run lint",
    "dev": "backpack dev",
    "build": "nuxt build && backpack build",
    "start": "cross-env NODE_ENV=production node build/main.js",
    "generate": "nuxt generate"
},
```

## tsconfig.jsonの設定

これは以前コメントアウトしたものを戻す

```json:tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}
```
これにて設定完了

## 起動

localで起動する場合はそのまま

```bash
yarn run dev
```

buildするときも

```bash
yarn run build
```
でnode.jsで動くようにコンパイルしてくれます。

build/main.jsが起動ファイルになります。

## まとめ
loaderの相性もあることを知りました。
pluckでテーブル間で重複したカラム名を指定する

# リファレンス
http://railsdoc.com/references/pluck

# pluckは便利
便利ですが、

- `table_a`と `table_b` に `name` という同名のカラムがある
- table_a, bを join する
- 任意のテーブルのnameカラムを指定して取得したい（場合によっては両方）

この場合、どう指定すれば良いでしょうか？
リファレンスからは読み取りづらい状態です。

## エラー例

```ruby
TableA.join(:table_b).pluck(:name)

# Mysql2::Error: Column ‘name’ in field list is ambiguous: SELECT ...
```

# 結論
- 名前が重複している場合、シンボルを使わずに、`テーブル名.カラム名` で指定します。
- シンボルを使うとうまくいかないです。
- 名前が被っているのを両方指定しても大丈夫です。

```ruby
Model.pluck('table_a.name', 'table_b.name')
```

# 参考
- [Unexpected behavior when plucking from joins (nil colunms in resulting arrays) #15649](https://github.com/rails/rails/issues/15649) : 解決済みのissue
WordPress テーマファイルを弄らずにdiv要素の順番を入れ替えたい

##業務目標
会社として立ち上げるオウンドメディアの準備もいよいよ佳境に入った。環境としては、WordPress4.7.13 + Sango 1.8.2テーマが採用されたが、


```index.php
<body class="home blog">
  <div id="container">
    <header id="header">"メニューバーを含むヘッダー"</div>
    <div id="header-image">"カバー写真"</div>
    <div id="content">"記事一覧"</div>
  </div>
</body>
```

となっているのを、どうしても、

```index.php
<body class="home blog">
  <div id="container">
    <div id="header-image">"カバー写真"</div>
    <header id="header">"メニューバーを含むヘッダー"</div>
    <div id="content">"記事一覧"</div>
  </div>
</body>
```

に入れ替えたい。
つまり、カバーを上のほうに持ってきてインパクトを狙いたいのだ。

###課題
なんだ、単にテーマファイルをいじればいいじゃないか？
そう思うだろうか。しかし社会は甘くないのである。

#####テーマ改修リバート問題
どんなテーマにもいえることだが、子テーマの改変でカバーできるCSSとは異なり、HTML/PHP構文本体の改修は、テーマのアップデートによってリバートされてしまう。
子テーマにindex.phpを入れて親テーマをバイパスすればリバート問題こそ解決するが、親テーマのアップデートにおけるindex.phpへの変更が反映されず、他のファイルのみがアップデートされる事態となり、遅かれ早かれ矛盾して500 internal errorと相成りそうである。

そのため、子テーマCSSの改修のみで、目標を達成する必要があるのだ。

###試行
(CSS改修だけで実現できることは前提）
####@saksak氏　【レスポンシブ】PCとスマホでdivの順番を入れ替える
[こんなの](https://qiita.com/saksak/items/6ade0be65ad83733e993)を発見したので、とりあえずトライ。CSS flexboxという最新仕様を使うそうな。
#####特長
- レスポンシブ対応である。

flexboxの対象にするためには、[CSS上でセレクタを指定して、「display:flex」を付与するだけ](https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html)でよいそうな。いけそうじゃん！
`(display:flexは)親要素に加える必要がある唯一のプロパティです。その子要素は自動的にflexアイテムになります。`

通常の上⇒下の表示は

```
.flex-container {
  flex-direction: column;
}
```
になるそう。
これを今回のケースにあてはめると、`div id="container"`に`display:flex`と`flex-direction: column`を設定すれば、**子要素のdivはみなflexになるはず**だ。
（ただし、引用したQiitaでは、`「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。`を利用してるので若干定義のしかたが違う。

#####Orderを定義
さて、いよいよ、子要素のdivにorderを設定。
`「order」のデフォルト値: 0`なので、

```style.css
    #container{
        display: flex;
        flex-direction: column;
    }
    #header-image{
        order: -1;
    }
```


##できたっ！！
試行1回目でうまくいくって普通ないことです。記念にヘンリー・フォードの名言を。

```
There is no man living who isn’t capable of doing more than he thinks he can do.
どんな人間も、自分が思っている以上のことができる。
```
repository-token の CONTRIBUTING.md 日本語訳

[repository-token](https://github.com/dev-protocol/repository-token) の [CONTRIBUTING.md](https://github.com/dev-protocol/repository-token/blob/master/.github/CONTRIBUTING.md) の日本語訳。

---

# コントリビュートガイド

## コントリビュートするには?

[Issues](https://github.com/dev-protocol/repository-token/issues) から問題を見つけたり、他の問題を修正することができます.

基本的なプルリクエストの手順:

1. このリポジトリをフォークする
2. featureブランチを作成する: `git checkout -b awesome-feature`
3. 修正し、実行する: `npm run lint`
4. 修正した内容をコミットする: `git commit -am "Add awesome feature"`
5. ブランチをプッシュする: `git push origin awesome-feature`
6. このリポジトリにプルリクエストを送信する

## 開発を始めるには？

まずは以下の通り:

```
git clone git@github.com:YOUR/repository-token.git cd repository-token
npm i
npm run generate
```

何かを変更した場合は、テストコードも更新してください.

すべてのテストを実行:

```
npm test
```

問題がなければテストは成功します!
今日学んだ事(自分用)


#7/1(月)

###●UI(ユーザーインターフェース)
・ユーザーがPCとやりとりする際の入力や表示方法などの仕組み

###●UX(ユーザーエクスペリエンス)
・サービスによってユーザーが得られる体験


───────
###●アジャイル開発
・ソフトウェア開発のプロジェクトの進め方。短期間で開発を見直す手法。

###●erb記法
・HTMLにRubyスクリプトを埋め込む

###●スクリプト
・プログラムの流れ
1.プログラミング(人間の言葉でコンピュターへの命令を記述する)
2.コンパイル(1で書いた内容をPCがわかる言葉に翻訳する)
3. 2の内容にしたがってPCが仕事する
・スクリプト言語は2のコンパイルを飛ばし
プログラミング⇨PCが仕事する流れ

###●eachメソッド
・要素を1つずつ取得し出力させる

```
オブジェクト.each do |変数|
```

```例.
fruits = ["apple","orange","melon"]
 fruits.each do |a|
puts a
end

出力
apple
orange
melon
```
・このような繰り返しメソッドを、イテレートまたはイテレータという。

###●order(順序)メソッド
・DBからデータの取得時にデータを並び変える事ができる
・DESC(降順)
・ASC(昇順)
コード

```
モデル名.order('カラム名　順序')
```

###●limitメソッド
・データをいくつ取得するか指定するメソッド
コード

```
モデル名.limit('取得件数')
```

###●orderメソッドとlimitメソッドを一緒に使う時

```
モデル名.order('カラム名 順序').limit(取得件数)
```

###●find(見つける)メソッド
・引数に指定したidをもつ情報を1件だけ取得する
・作品の個別ページの移行の時などに使う

```例.
User.find(1)
```

###●rake routesコマンド
・HTPPアクションの一覧を見る事ができる
・リクエスト、パスに対してのコントローラ、アクション名が確認できる

```ターミナル.
rake routes
```

以上
macOS Mojave(10.14)でluajitをインストールしようとしたらハマった

# macOS Mojave(10.14)でluajitをインストールしようとしたらハマった

luajitをインストールしようと`make`したら↓のエラーが出て怒られた。。

```
ld: library not found for -lgcc_s.10.4
```

lgcc_sが見つからないらしい。。



原因見つからずいろいろ探し回った結果これが一番参考なった
[macOS Mojave (10.14) Compile Error #468](https://github.com/howl-editor/howl/issues/468)



`MACOSX_DEPLOYMENT_TARGET`を指定して`make`したら解決。
10.6に限らず試してないけど他のバージョンでもいけると思われる。

```
make MACOSX_DEPLOYMENT_TARGET=10.6 DEFAULT_CC=clang -j8
```
ACL Anthologyの論文一括DLスクリプト書いた

注：小ネタです。

# やったこと
[ACL Anthology](https://aclweb.org/anthology/)の論文pdfを一括DLするスクリプトを書きました．

[ACLAnthologyDownloader](https://github.com/stfate/ACLAnthologyDownloader)

NAACL2019の論文収集する時に「個別PDF欲しいけどひとつずつDLするのめんどくちゃい」と思ってしまったのでついうっかり書いてしまった．

# 依存ソフトウェア
- Python3
- Google Chrome
- [chromedriver](http://chromedriver.chromium.org/downloads)
- chromedriver_binary
- selenium

# 使い方
```bash
python ./acl_anthology_downloader.py -e <event_name> -y <year> -o <output_dir> -d </path/to/chromedriver>
```

イベント名と年度を指定すると該当イベントのpdfをすべてDLする仕様になってます．

例

```bash
python ./acl_anthology_downloader.py -e NAACL -y 2019 -o papers/NAACL2019 -d /usr/local/bin/chromedriver
```

# 注意点
- Selenium+chromedriverを使っているので，Chromeのバージョンと合ったchromedriverをインストールしてください
- デフォルトだとheadlessモードで動作しますが，Linux環境などでheadlessでうまく動作しない場合は`--xvfb/-x`オプションを付与してください(当方のWSL環境だとこの状況になりました)

# 実装に関して
今までPythonでのスクレイピングは[scrapy](https://scrapy.org/)を愛用してきましたが，Seleniumにも慣れておきたい意図で今回はSelenium+chromedriverを使用しました．
chromedriverの動作環境構築のコストはかかりますが，APIはscrapyよりかなり使いやすい気がしますね．
Webアプリの自動テストにも使えるし(というか本来の用途はそちら)

# おわりに
ICMLとかNIPSのダウンローダも書いておきたい．
Macを手に入れてからgit completion bashとgit promptを使えるようになるまで

# 概要
Macを購入したら待ち受けている数多くの初期設定。
GUIツール以外にも、CLIで使う系のものは骨が折れますよね。

そんな中で、毎回git completion bashとgit promptに関しては調べてやっていたのでメモ書きとして。

# 各ツールの概要
## git completion bashとは
Gitコマンドの補完を効かせてくれるやつです。
途中まで入力したブランチ名とかをTABキーで保管してくれたりします。

## git promptとは
シェル上でのgit情報をわかりやすく見せてくれるやつです。
こういうの↓
<img width="443" alt="スクリーンショット 2019-07-01 18.04.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154121/92b00f97-691e-f1b0-eec9-be93e415ef6b.png">

ブランチ名とか出てきて良い感じになります。

# インストールしていく
## Homebrewインストール
まずは、[公式サイト](https://brew.sh/index_ja)からHomebrewを入れましょう。

## Gitインストール
デフォルトでは、Xcodeのcommand line toolsが使えるようになっています。
しかし管理のしやすさなどから、Homebrewを使って今回は入れていきます。

```
brew install git
```

その後に、`~/.bashrc`を作成して下記を追加します。
gitのパスをインストールしたものに置き換えます。

```~/.bashrc
export PATH="/usr/local/Cellar/git/2.5.0/bin:$PATH"
```
上記の2.5.0はインストールされたgitのバージョンが入るので、各バージョンによって書き換えましょう。

## bash completionを入れる
各種コマンドの保管を行ってくれるやつです。
`~/.bashrc`に下記を追加します。

```~/.bashrc
if [ -f $(brew --prefix)/etc/bash_completion ]; then
  source $(brew --prefix)/etc/bash_completion
fi
```

## git completion bashを入れる
こちらも`~/.bashrc`に追加します。

```~/.bashrc
source /usr/local/etc/bash_completion.d/git-prompt.sh
source /usr/local/etc/bash_completion.d/git-completion.bash
GIT_PS1_SHOWDIRTYSTATE=true
export PS1='\[\033[37m\][\[\033[36m\]\u\[\033[37m\]@\h \[\033[32m\]\W\[\033[37m\]]\[\033[31m\]$(__git_ps1)\[\033[00m\]\$ '
```

## .bashrcにパスを通す
初期状態は`~/.bash_profile`がなく、今回作成した`~/.bashrc`にパスが通っていません。
そのため、`~/.bash_profile`から、`~/.bashrc`にパスを通しましょう。

```~/.bash_profile
if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi
```

これでシェルを立ち上げ直せば、git completion bashとgit promptが使えるようになります！

# 参考記事
https://qiita.com/koyopro/items/3fce94537df2be6247a3
JFreeChart-複数パイチャート(MultiplePieChart)


目次 ⇒ [JFreeChartサンプル](https://qiita.com/artery/items/3e9c63e5c14a9e965c97)

```java
package jp.avaj.lib.chart;

import org.jfree.chart.ChartFrame;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.MultiplePiePlot;
import org.jfree.chart.plot.Plot;
import org.jfree.data.category.CategoryDataset;
import org.jfree.data.category.DefaultCategoryDataset;

/**
JFreeChart-複数パイチャート(MultiplePieChart)

・MultiplePiePlotを使用すると複数のパイチャートを表示することができる.
・PiePlotを組み合われるのではなく、独自のPlotが用意されている.

・DatasetはDefaultCategoryDatasetを使用する.

・サンプルに示したのは、複数のスーパーの売上の比較.
・同様の事例としては各国のGDP構成の比較、家庭の出費の比較などなど.

・残念ながらパイチャートの時のように、特定のデータを強調したり、色を変えたりはできない.

 */
public class Chart05_00 {
  // 目次-複数パイチャート(MultiplePieChart)
  A_Chart05 a_Chart05;
  // 目次-Artery-JFreeChart用のライブラリ
  A_Chart00 a_LibChartSampeContents;


  public static void main(String[] args) {
    //
    // Datasetの作成-ColumnKeyごとにパイチャートが作成される
    DefaultCategoryDataset dataSet = createSalesData();
    // Plotの作成
    MultiplePiePlot multiplePiePlot = new MultiplePiePlot((CategoryDataset)dataSet);
    JFreeChart jfreeChart = new JFreeChart("スーパー売上構成",(Plot)multiplePiePlot);
    //
    ChartFrame cFrame = new ChartFrame("スーパー売上構成",(JFreeChart)jfreeChart);
    cFrame.pack();
    cFrame.setVisible(true);
  }
  private static DefaultCategoryDataset createSalesData() {
    // ColumnKeyごとにパイチャートが作成される
    DefaultCategoryDataset dataSet = new DefaultCategoryDataset();
    // A店
    dataSet.addValue(100,"生鮮食品","A");
    dataSet.addValue(80,"加工食品","A");
    dataSet.addValue(40,"日用品","A");
    dataSet.addValue(30,"電器","A");
    dataSet.addValue(30,"服飾","A");
    dataSet.addValue(40,"雑貨","A");
    // B店
    dataSet.addValue(50,"生鮮食品","B");
    dataSet.addValue(20,"加工食品","B");
    dataSet.addValue(30,"日用品","B");
    dataSet.addValue(30,"電器","B");
    dataSet.addValue(70,"服飾","B");
    dataSet.addValue(50,"雑貨","B");
    // C店
    dataSet.addValue(70,"生鮮食品","C");
    dataSet.addValue(40,"加工食品","C");
    dataSet.addValue(30,"日用品","C");
    //
    return dataSet;
  }
}

```
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278568/237e98be-b2cb-4980-fae4-65dc601b17f7.png)
開発環境とは何ぞや

##はじめに

はじめまして、未来電子テクノロジーでインターンをしている宮﨑です。
プログラミングはほとんど初心者なので、開発環境を整えるところからすでに「IDE？テキストエディタ？？VSCode」とキャパオーバー気味…
そこで今回は開発ツールのセットアップについて簡単にまとめてみます。


##プログラミングをはじめるには

ハードウェアやOSは揃っているという状態から、プログラミングができる環境にする手順を見ていきましょう。
１．統開発環境（IDE)あるいはテキストエディタを入れる
２．各種言語をインストール(自分の書いた文字をコンピューターに読み取ってもらえるようにする)



「開発環境を整える」という言葉の雰囲気からもっと仰々しいものを思い浮かべてましたが、これで一安心です。

##IDEとは

ザックリと言えば「プログラミングに必要なものがすべて詰まったソフトウェア」です。
コードを書いたり、デバッグやコンパイル(※)をすることができたりします。

※プログラムのコードを機械語に翻訳すること

##テキストエディタとは

プログラムをテキストで書いて実行するためのアプリケーションです。
ほとんどのプログラミング言語に対応しているエディタもあります。

たとえば、Windowsのメモ帳もテキストエディタの一種ですが、アプリを使えば色を付けて見やすくしたり、エラーチェックを行ったりと使いやすいようにカスタマイズできます。

ちなみに私が導入することとなったのはマイクロソフトのVSCode(Visual Studio Code)というテキストエディタです。めちゃめちゃ高性能のようです。

##IDEとテキストエディタの違い

テキストエディタの方が起動が早く、動作が軽いのですが、IDEより標準でできることは少ないです。
初心者にとってはテキストエディタの方が使いやすそうですね。


##まとめ

無事にプログラミングの開発環境を整えることができました。
未知のものでも臆することなく一つ一つやっつけていきたいです。
究極に分かるNoise_shapeの動作

# 0. 概要
Dropoutの適用範囲を決めるNoise_shapeの動作であるが、以下のKerasの公式から詳細な処理を読み解くのは不可能に近い。

https://keras.io/ja/layers/core/

```
rate： 0と1の間の浮動小数点数．入力ユニットをドロップする割合．
noise_shape： 入力と乗算されるバイナリドロップアウトマスクのshapeは1階の整数テンソルで表す．例えば入力のshapeを(batch_size, timesteps, features)とし，ドロップアウトマスクをすべてのタイムステップで同じにしたい場合，noise_shape=(batch_size, 1, features)を使うことができる.
seed： random seedとして使うPythonの整数．
```

そこで、実験的に試して分かった動作をまとめる。

# 1. Noise_shapeの動作

まず、CNNから出力されたShapeが以下だとする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95636/66239c9f-4d6c-2639-8b67-4faf739ff24b.png)

そこでNoise_shapeを指定し、Dropoutを掛ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95636/ff107810-4441-f49f-1967-6e71dca4fb1c.png)

この時、1x1を指定すると、2x2を1x1のように扱ってくれる。
もう少し詳しく説明するとこんな感じである。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95636/45e6441c-cb88-ed43-daa6-e207df83e265.png)

因みに2x2を指定すると、以下のように各画素に対してDropoutを設定できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95636/03053b0b-99e7-4c0b-7429-acb5f8417dd9.png)

これまではバッチサイズを入力数分確保して、独立的にDropoutを行っていたが、これを1つに見立てると以下のような感じの処理になる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95636/b88da585-f925-556f-7046-a0750e990fb6.png)


中々、慣れない表記である。

# 動作テストのコード

``` python
import numpy as np
from tensorflow import keras
from tensorflow.keras import backend as K
from tensorflow.keras.layers import Input, Dropout, Dense, Lambda, BatchNormalization

x_test = np.ones((5, 2, 5))
model = keras.models.Sequential()
#model.add(Lambda(lambda x: K.dropout(x, 0, seed=None)))
model.add(Lambda(lambda x: K.dropout(x, 0.5, seed=None, noise_shape=(5, 1, 5))))
model.compile(optimizer='adam', loss='categorical_crossentropy', metrics=['accuracy'])
predictions = model.predict(x_test)
for i in predictions:
    print(i)
    print("----------")
```
The builds tools for v142 (Platform Toolset = 'v142') cannot be foundとなった時

# 概要
visual studio 2015でビルドする際に、上記の様なエラーがでました。エラーの原因はビルドツールのバージョンなので、その点を変更すれば、ビルドできるようになりました。

# 実行環境
次に実行環境を示します。

| Soft and Hard       |       バージョン | 
|:-----------------:|:------------------:|
| Windows 10 pro        |              16.04 |  
| Visual studio 2015        |              Community update 3 |   

## 手順
1. 該当するプロジェクトもしくはソリューションをvisual studio上に開く
2. プロジェクトもしくはソリューションを選択した状態で、右クリックする
3. ”プロパティを選択する”
4. 構成プロパティ -> 全般  ->  プラットフォームツールセット　をクリックし、バージョンを変更する。

![figure1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169342/5607b066-b84c-02bd-4ea8-48891edc1f94.png)


## まとめ
今使用しているwindowsには、visual studio 2015、visual studio 2017、visual studio 2019が入っているので、このようなエラーが出てしまったのだと考えられます。
"量子位相推定で量子化学計算のシミュレーション"論文をレビュー

#量子位相推定を用いた量子化学計算のシミュレーション論文をレビューしました
こんにちは。テラスカイの須郷です。

[前回](https://qiita.com/seiya-sugo/items/98b5b806cdb74ce6ea72)に引き続き、理研の中田真秀さんの指導のもとで論文のレビュー発表をさせていただきました。
前回、量子位相推定(PEA)のアルゴリズムを学んだので、今回はそれを量子化学に応用した論文を選ぶことになりました。[その発表で使用したスライドがこちらです](https://speakerdeck.com/seiyasugo/review-of-simulated-quantum-computation-of-molecular-energies)。実はこの論文、有名なので半年以上前に一度読もうとしたことがあったのですが、当時の知識ではさっぱりわからない状態でした。今回、PEAを学んだあとだったことや、MDR様の方でこちらも半年ほど続いている[中田さんの指導のもと行なっている量子化学勉強会](https://qnn.connpass.com/event/136186/)の成果もあり、随分論文が理解できるようになっていて、成長を感じることができました。今こちらの勉強会は[2週目が始まったところ](https://qnn.connpass.com/event/137018/)ですので、量子化学を学びたい方はぜひ参加されてみてはいかがでしょうか？

#次の課題
次回はVQEで量子化学計算を行なっている論文をレビューします。PEAにどのような問題があってVQEにつながっていったのかなど、周辺の流れも理解できるようにしたいです。次の投稿はちょっと時間が空いて8月下旬から9月上旬頃になる予定です。
WebRTCを手動で動かす際に詰まった点に関するメモ

# WebRTCを手動で動かす際に詰まった点に関するメモ
こちらの[手動でWebRTCの通信をつなげよう ーWebRTC入門2016](https://html5experts.jp/mganeko/19814/)が非常に参考になる記事だったのですが、
それでもなお真似する上で詰まったところがあったので、備忘も兼ねてメモ。

## ChromeでConnectを押した側から受信側の映像が見えない
Ver75.0.3770.100で確認。
Answerを入力した後なぜかRemote側のVideoの再生が始まらず。
(Remote側は双方の画面が見えている)
正確な原因はわからなかったものの、local側のVideoタグを消して、
Videoを一つだけにしたら正常に表示されるようになった。
記事上で公開されているサンプルでも動かず、他ブラウザでは動いたのでChromeの問題の可能性が高いと思われる。
Chrome + 複数video + srcObjectは他にも問題を起こしたことがあるようなので、今回もその類だろうか…
参考:https://lealog.hateblo.jp/entry/2017/08/10/150100

## HTMLMediaElement.play()の戻り値はpromise
WebRTC自体ではなく、WebRTCに絡む要素ですが、
サンプルコードだと普通にvideo.play();でコードが終わっている箇所があります。
しかし、HTMLMediaElement.play()の戻り値はPromiseです。
この辺りはちょっとしたことでエラーを出しやすいので、きちんとcatchを付けてエラーハンドリングすべきです。

## 複数ブラウザでWebカメラを使おうとするとNotAllowedErrorが出る場合がある
他のブラウザやアプリで利用中の場合、WebCameraを許可していてもgetUserMediaがRejectされる場合があります。
複数ブラウザでのテスト時などは注意。

## サンプルコードはletばかりで書かれているがconstでも問題ない
ロジックを整理してconstだけで書いても特に問題は起こりませんでした。

## まとめ
結局あまりWebRTCに関係のないところで詰まっていますね。
javascriptの特徴について簡単にまとめてみた

##javascriptってどういうもの？

javascriptは「ブラウザを操作」するプログラミング言語です。javascriptで何かプログラムを書けば、ブラウザはその命令通りに処理してくれます。

###ブラウザを操作するってどういうこと？

ブラウザの役割はWEBページを表示させることです。WEBページはHTMLとCSS、数点の画像で作られてます。HTMLとCSSには重要な特徴があります。それは、一度ブラウザに読み込まれたら変化しないです。例えば、次のページに行こうとしない限り、基本的にブラウザ上に同じ情報を表示し続けます。

・HTML　→　ページのコンテンツを表示させるもの
・CSS　→　HTMLにスタイル情報を提供してレイアウトやデザインを決めるもの

ウィンドウ幅に合わせて伸縮するレイアウトやサイト、画面サイズに合わせてレイアウトを大きく変えるレスポンシブWEBデザインで作られているWEBページがありますが、レスポンシブもHTMLとCSSが初めに読み込まれた時から変わることはないです。HTMLとCSSは不変で静止したデータと言えます。

しかし、javascriptを使うことによって、これらの静止したデータであるHTMLとCSSを、その場でリアルタイムに書き換えることができます。加えて一部のコンテンツを入れ替えたり、画像のスライドショーのような動きをつけたりすることができます。

##具体的な「書き換え」の例

HTMLを書き換える方法ですが、大きく4つに分けられてます。

###1.タグに囲まれたテキストを書き換える

```javascript
//idから取得したオブジェクトを日付データに書き換えてます
document.getElementById("choice").textContent = new Date();
console.log(document.getElementById("choice").textContent);
```

###2.要素を追加・削除する

```javascript
//li要素を追加
var todo = ['デザイン','データ','申し込み','牛乳を買う'];
todo.push('歯医者にいく');
for(var i = 0; i < todo.length; i++){
  var li = document.createElement('li');
  li.textContent = todo[i];
  document.getElementById('list').appendChild('li');
}
```

###3.タグの属性の値を変える

```javascript
function changePic(){
   var edit=document.getElementById("picdiv");
   edit.innerHTML="<img src='girls2.jpg'>"
  }
```

###4.CSSの値を変化させる

```javascript

```

上記4つのパターンでHTMLとCSSが書き換えられると、変更された内容がブラウザに即時反映されます。しかも、画面が描き替わるのは変更があった箇所だけで、ページ全体の読み込みは発生せずに待ち時間もありません。これにより単なるWEBページではない、より動きのあるWEBページを作ることができます。
CircleCIの新規設定時にGitHubの対象リポジトリ(organization)が表示されない現象の解決方法

普段は気にしないかもしれないが、ゼロからGitHubの対象リポジトリ(organization)のCircleCI設定を行おうとした際、その対象リポジトリ(organization)が一覧に表示されなくて焦った事がある。

GitHubのorganizationオーナーは、私にOWNER権限を振ったと言うのでCircleCI関連の設定をしようとするが表示されない。
　↓
CircleCIに問い合わせると、未設定の場合は、オーナーが一度CircleCIにGitHubログインしないといけない、と言われる。
　↓
GitHubのorganizationオーナーには、自分と同じOWNER権限を私にも振ったと言われる。
という負のループ状態に陥った事がある。

この時、たまたま、AWS CodeDeployの設定をしていて解決方法に気づいたので、備忘のためメモしておく。

## ■原因
GitHubとCircleCIの連携のAuthorize設定が過去に完了しているため、対象リポジトリ(organization)との連携がGrantができない状態になっている。

## ■解決方法
1. 自分のGitHubアカウントに行き、画面右上のメニュー一覧から`Settings`を選択する。
![e4676310599b83f5bec89baadbf608fa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429583/d426b006-5008-d990-c564-6b7c5482016c.png)
2. 画面左側のメニュー一覧から`Applications`を選択し、表示された画面の`Authorized OAuth Apps`を選択してください。そして、CircleCIのアイコン右側にある`・・・`を押下し、`Revoke`を押下してください。
![17af15f9ce6e98a4c962fa6648c237bf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429583/ecb74ed1-be81-7558-3c91-bb3b58c0df68.png)
3. CircleCIのログイン画面( https://circleci.jp/vcs-authorize/ )に行き、 「GitHubでログイン」ボタン右側のプルダウンから、`全てのリポジトリと連携`を押下してください。
<img width="1253" alt="0b0dbd0a25d97a2ba4d58f8bf32f1ca9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429583/237792c1-0d63-9aa8-86b1-b7b99a9804b4.png">
4. GitHubとCircleCIの連携に関するAuthorize画面が表示される。以下の画像はAWS CodeDeployの例になるが、未連携のリポジトリ(organization)で、かつ、権限があれば`Grant`と表示されるので、こちらを押下して緑色のチェックが該当のリポジトリ(organization)に付いたのを確認したら、「Authorize aws-codesuite」ボタンを押下する。
![dcb3a9881e22f4369638d247443b2d35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429583/61435c72-3e9c-4e56-d7d4-4d240dd55fa3.png)
5. すると、CircleCIのリポジトリ(organization)一覧に、対象のものが表示されるようになる。

## まとめ
意外と盲点になりがちな問題なので、これまで誰かが設定していたCircleCIを使ってて、初めて自分で設定する事になったという人は自分と同じ問題に直面しない事を祈っている。
誤ってバージョンアップしまったMacOSをダウングレードする方法


Appleサポートから、誤ってバージョンアップしてしまったMacOSをダウングレードする方法を
教えてもらったので、ここに転記しておく。

以下の方に試して見る必要があるかな
１）Time Machineでバージョンアップ行う前、バックアップを取ってない。
２）工場初期化にはしたくない。

ただ、確約はできないものとなるため、実際に行ってみてどうかという対処方法にはなるので、気に入れて欲しい。

手順：

>- 1）外付けHDDにTime Machineバックアップを作成します。
>
>Time Machine で Mac をバックアップします
>https://support.apple.com/kb/HT201250?viewlocale=ja_JP
>
>- 2）macOS復元領域から起動しOSをインストールします（この操作で出荷時のOSになります）
>
>macOS 復元から macOS を再インストールする方法
>https://support.apple.com/kb/HT204904?viewlocale=ja_JP
>
>- 3）Time Machineバックアップから個別でデータを復元する
>
>削除したファイルや古いファイルを Time Machine で復元する
>https://support.apple.com/kb/HT209152?viewlocale=ja_JP
>

以上、お疲れ様でした！

>iOS、Androidアプリの制作なら、hq7781@gmail.comまで、
>法人並みに、信頼且つ満足できる製品を納品いたします
初心者がJavaでエンコードした画像をデコードするよー

#画像をデコードするよっていう話
JavaでBASE64エンコードされた画像をデコードするというのを初めてやったので、その中のエッセンスの部分を抽出したものをまとめていきます。

##環境など
Java8

##BASE64を取り扱う
まずはBASE64形式でデータをいただいているかチェックします。
そのチェックのために、Matcherを使っていきます。
Matcherというのは簡単に言うと、自分の設定したパターンと特定の入力がマッチするか判断できると言うとてもありがたいものです。
使い方は以下の通り。

```java:sample.java
String str = "YuruFuwaGang";
String regex = "Yuru"
Pattern p = Pattern.compile(regex);
Matcher m = p.matcher(str);
```

説明としては、
一行目でチェックしたい文字列を作成。
二行目でパターンを設定。
三行目でJavaがプログラム内で使えるパターンオブジェクトというものに設定したパターンを変換。
四行目でMatcherを使って一行目の文字列がパターンとマッチしているか確認。
という流れです。
で、ここのパターンに画像としての正規表現を入れてあげることで、今回は形式のチェックをしてあげます。
今回は正規表現の書き方については省略しますが、以下のサイトを参考にして作成しました。
[正規表現の基本](https://qiita.com/sea_ship/items/7c8811b5cf37d700adc4)
[基本的な正規表現の使い方](https://qiita.com/AquaMeria/items/cf22ba6750a3812f6566)
[忘れっぽい人のための正規表現チートシート](https://qiita.com/tossh/items/635aea9a529b9deb3038)
ちなみにBASE64ですと、画像は
`"data:image/jpeg;base64,xxx......"`
という形で送られてきます（多分）。

##デコードする
デコードはシンプルで、java.util.Base64を使います。

```java
byte[] bytes = Base64.getDecoder.decode("デコードするデータ");
```

##おまけ：画像を書き込む
今回ファイルはbyte形式のものを書き込むために、FileOutputStreamを使います。

```
byte b = 74;
FileOutputStream file = new FileOutputStream("パス/ファイル名");
file.write(b);
```

以下、解説です。
二行目で書き込むファイルを指定。
そして三行目で書き込みをおこなっています。

##まとめ
画像のデコードが初めてで、とにかく難しかったです。
また、まだFileOutputStreamなんかも掴みきれてないので、精進しなきゃなぁという感じでした。頑張ります。

##その他参考
[正規表現のグループに名前をつける(Java)](https://qiita.com/tatesuke/items/1b5ad8505b13d39174f2)
→パターン内の部分部分をとるのにとても便利でした（画像の形式やエンコード部分など）。
[クラスPattern](https://docs.oracle.com/javase/jp/8/docs/api/java/util/regex/Pattern.html)
→Patternクラスについて。また、正規表現の方法についてもまとめっています。
[java – Base64エンコードイメージをファイルに書き込む](https://codeday.me/jp/qa/20190118/159902.html)
→日本語が変だけれども、わかりやすいです。
機械学習のメモ

![](https://ongxuanhong-files-wordpress-com.cdn.ampproject.org/i/s/ongxuanhong.files.wordpress.com/2015/06/supervised-classification.png)

# 機械学習とは
`Wikipedia`により

> Machine learning is the subfield of computer science that "gives computers the ability to learn without being explicitly programmed"

簡単といえば、機械学習はコンピュータ科学のサブセットであるものです。
「人間がが経験をして学習することを機械（コンピュータ）で実現する技術・手法です。」
もう少し具体的といえば、
「データから学習を行い、パータンか特徴を見つけて未知のデータに対して予測します」

# 機械学習の学習方法
機械学習の学習方法は基本的に３つの書類があります

1. [Supervised learning](#Supervised-Learning)
2. [Unsupervised learning](#Unsupervised-Learning)
3. [Reinforcement learning](#Reinforcement-Learning)

## Supervised Learning （教師あり学習）
[Wikipedia](https://bre.is/7SpzxGIsn)により
>　Supervised learning is the machine learning task of learning a function that maps an input to an output based on example input-output pairs. It infers a function from labeled training data consisting of a set of training examples

教師あり学習は、事前データ(入力値（Input/Features）と出力値（Output/Label）のセット)から学習を行う事です
これは「過去のデータから未来に発生する可能性がある事象を予測する」のに使用します

*※ 例えば、「スパムメール判別」とか「明日の天気予報」などです*

**教師あり学習はよく分類と回帰問題に別れています**

+ 分類問題とは、迷惑メールか普通のメールか判定することです。つまりは0か1かラベルを予測することになります(二項分類)。また、3つ以上分類(多項分類)することも可能です。
+ 回帰問題とは、車の情報（走行距離、年式、メーカーなど）から株価を予測したりすることです。予測したい値はよく`label`と呼ばれていて、予測する元の情報は`features`と呼ばれています

## Unsupervised Learning （教師ありなし学習）
[Wikipedia](https://en.wikipedia.org/wiki/Unsupervised_learning)により
> Unsupervised learning is a type of self-organized Hebbian learning that helps find previously unknown patterns in data set without pre-existing labels

この学習方法は、出力データが学習時に与えられない学習方法で、
正解となる出力を与えず、データから規則性を発見していくのが特徴の手法です。

![教師あり学習と教師なし学習の違い](https://2s7gjr373w3x22jf92z99mgm5w-wpengine.netdna-ssl.com/wp-content/uploads/2018/09/WD_2.jpg)
*教師あり学習と教師なし学習の違い*

## Reinforcement learning(強化学習)
![Reinforcement learning](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Reinforcement_learning_diagram.svg/250px-Reinforcement_learning_diagram.svg.png)

[Wikipedia](https://en.wikipedia.org/wiki/Reinforcement_learning)により
> Reinforcement learning (RL) is an area of machine learning concerned with how software agents ought to take actions in an environment so as to maximize some notion of cumulative reward

強化学習も教師なし学習と同じく明確な答えは与えません。
そのかわり、「行動」と「報酬」を与えます。
この結果、「どのような行動をとれば累積報酬が最大となるか」
を学習していきます。
webpack4でsassを別ファイルとして出力させたいのにエラーがでてしまった

##概要
sassをjsにバンドルさせるのではなく、外部ファイルとして`<link rel="stylesheet" href="style.css">`な感じでhtmlで読み込ませるようにしたいなぁと思いました。

`src`でsassを入力し、`dist`なりビルド後のファイルとして`style.css`出力するかたちにしたかったのですが、どうにも**下記のエラー**が出てしまいコンパイルが止まってしまうのです。


### 問題のエラー文
```
(node:7683) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/Users/[プロジェクトパス]/node_modules/webpack/lib/Chunk.js:849
                throw new Error(
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Users/[プロジェクトパス]/node_modules/webpack/lib/Chunk.js:849:9)
    at /Users/[プロジェクトパス]/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /Users/[プロジェクトパス]/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/[プロジェクトパス]/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/[プロジェクトパス]/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/[プロジェクトパス]/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/[プロジェクトパス]/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/[プロジェクトパス]/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at _addModuleChain (/Users/[プロジェクトパス]/node_modules/webpack/lib/Compilation.js:1095:12)
    at processModuleDependencies.err (/Users/[プロジェクトパス]/node_modules/webpack/lib/Compilation.js:1007:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
```

### 環境

```json
"dependencies": {
    "axios": "^0.18.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue": "^2.5.22"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "eslint": "^5.13.0",
    "eslint-loader": "^2.1.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "postcss-loader": "^3.0.0",
    "vue-loader": "^15.6.2",
    "vue-router": "^3.0.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
```


## 解決策
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/760
ドンピシャなものがgithubのissueに上がっていました。



### メモ
こちら、数ヶ月前の下書きで、具体的な解決方法を忘れてしまいました;;

上記githubには
> Solution: npm i -D extract-text-webpack-plugin@next

と書いてあるので、これを参考にしたと思うのですが
またwebpack使用時に思い出したら確実な結果を追記したいと思います。


とりあえず、苦労して見つけた解決策のような気がしたので備忘録として残しておきます。
enum_helpについて

### はじめに
enumをしようする中でenum_helpというgemを使用したためenum_helpについてまとめる。

### enumとは
enum_helpの説明の前にenumについてまとめたいと思います。
enumは数字を何かしらの値と紐付けているようなデータの管理をしている場合に有効なものとなります。

```
class ShippingBurden < ApplicationRecord
  has_many :items
  enum name: [:select_shipping_burden, :postage_included, :freight_collect]
end
```

このようにmodel内でenumを定義することでf.selectなどでhamlにoptionを記述しなくても数字で値を表示できるようになります。

しかし、このままでは表示される値が英語表記のまま表示されてしまいます。
そんな時に英語を日本語表記に変える時に必要となるのがenum_helpです。

### 仕様方法
まずはじめに、gemのenum_helpをgemfileに記述します。

```
gem 'enum_help'
```
そして、bundle install

次に、config直下にja.ymlというファイルを作成し、そこに日本語表記の記述をします。

```
ja:
  enums:
    shipping_burden:
      name:
        postage_included: '送料込み(出品者負担)'
        freight_collect: '着払い(購入者負担)'
```

最後にaplication.rbにja.ymlを適応させる記述を書きます

```
config.i18n.default_locale = :ja
```

これで日本語表記で表示させることが可能になります。
いつの間にか、capistranoの自動デプロイできない



#解決したいこと

端的にいうと、、、unicornが立ち上がらない！！！

capistrano選手はいつも同じとこででコケる。あと一歩の所なのに（以下）

```
$ bundle exec cap production deploy
00:15 unicorn:start
      01 $HOME/.rbenv/bin/rbenv exec bundle exec unicorn -c /var/www/freemarket_sample_53a/curr…
      01 master failed to start, check stderr log for details

```

Logを確認すると、、、
以下のエラー文

```Unicorn.stderr.log

ArgumentError: You tried to define an association named transaction on the model Item, but this will conflict with a method transaction already defined by Active Record. Please choose a different association name.
```
つまり、 Itemモデル内で『transactionとかいう奴が、名前被りを起こしてるよ。だってメソッドで transactionってのがもうあるからね』的なエラー、、、多分


いっそのことtransactionというテーブルごとmigrationをRollbackして削除したった！！


これで解決めでたしめでたし。




、、、が、しかし
capistrano選手またしても第３コーナーで転倒。
『悪魔のmigrationコーナー』の除霊はまだ済んでいない様でした




試しに伝家の宝刀である、秘技『本番環境でEC2を再起動後、直接mysqlとNginXを再起動』を実行しても解決しない、、、、


冷静になる。本番環境の migration fileを確認すると、、、


```
$rails db:migrate:status RAILS_ENV=production

database: freemarket_sample_53a_production

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20190629070850  ********** NO FILE **********
   up     20190629071302  Create categories
   up     20190629071551  Create brands
   up     20190629072026  Create shipping regions
   up     20190629072322  Create shipping methods
   up     20190629072537  Create shipping statuses
   up     20190629072800  Create shipping days
   up     20190629073016  Create shipping burdens
   up     20190629074914  Devise create users
   up     20190629084129  Create cards
   up     20190629084829  Create items
   up     20190629085143  Create images
   up     20190629085717  Create category items
   up     20190629090005  Create likes
   up     20190629095614  Add region id to users

```

『NO FILE』だと！！
どうやらローカル環境でmigration ファイルを編集し、デプロイするとこういうことが起きるらしい。
ってことで、何度も言いいますが、migration ファイルの編集は慎重にということ！！


＊railsのrakeのmigrationファイルを削除しNO FILEとstatusに出た時の対処
	https://joppot.info/2014/10/16/2104
以上はこういう場合の紳士な解決法


今回は、少々マッチョな解決法を実施しました。以下
「いちいち、roll backするなんてめどくせえ」なんて方には参考になるかも

幸いにも、今回はDatabaseに何も保存されていないので、
（、、、、保存されててもseed.rb先生があるからなんとかなる）

```
$ mysql -u root -p 
mysql> show databases;
+----------------------------------+
| Database                         |
+----------------------------------+
| information_schema               |
| freemarket_sample_53a_production |  ←ドナドナ〜
| mysql                            |
| performance_schema               |
+----------------------------------+


mysql> drop database freemarket_sample_53a_production;
Query OK, 3 rows affected (0.02 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
|				     |  ←『空（から）』
| mysql              |
| performance_schema |
+--------------------+
```


##やったこと

Mysqlを直接操作し、Database   をドロップ。
「freemarket_sample_53a_production なんて無かったんだ、、、」

そして、何事もなかったかのように以下を実行
$ rails db:create RAILS_ENV=production
$ rails db:migrate RAILS_ENV=production


これにて、解決！！

#学んだこと
migration の編集は慎重に！！
もし、チーム開発中にmigrationを書き換える時は、変更を必ずシェアしよう
Jenkinsのジョブが長すぎてメモリリークした時の対処法

## 経緯

1時間半程かかるrspecのテストをJenkinsで実行したところ、途中でJenkinsが落ちてしまった。
再度テスト実行して落ちる寸前でfreeコマンドを確認したところメモリのusedが595(約0.5Gb)になっていたため、メモリが枯渇したのだと思いメモリ開放について調べてみた。


## Tl; DR


slabキャッシュの開放

```sh
echo 2 > /proc/sys/vm/drop_caches
```

実行前

```sh
$ free -tm
             total       used       free     shared    buffers     cached
Mem:          7884       7289        595         37        474       1699
-/+ buffers/cache:       5115       2768
Swap:            0          0          0
```

実行後

```sh
$ free -tm
             total       used       free     shared    buffers     cached
Mem:          7884       4686       3198         37        475        289
-/+ buffers/cache:       3922       3962
Swap:            0          0          0
```

freeが595(約0.5Gb)->3198(約3Gb)になりました！
さらに定期実行できるようにcronに設定。

```sh
sudo su # rootで実行
crontab -e
```

```sh
# 毎時0分にキャッシュクリア
0  * * * * echo 2 > /proc/sys/vm/drop_caches
```


## Jenkinsのメモリリークについて考察

jenkinsのジョブを実行し続けるとメモリの空きが減ってくる。
おそらくslabキャッシュというkernelがdentry等をキャッシュするために使うメモリ領域が多くなっているため。
slabキャッシュは以下コマンドで開放する。

```sh
echo 2 > /proc/sys/vm/drop_caches
```


## 参考
https://bacchi.me/linux/server-memory-troubleshoot/
管理者権限で BAT ファイルを起動

システムファイルやレジストリ等を変更したいときは、
以下のように書くと、管理者権限を取得して BAT ファイルを実行できます。

``` HideHiddenFiles.cmd
@echo off
rem 隠しファイルを非表示にする。

rem 管理者権限で起動していなければ、管理者権限で再起動する。
openfiles > nul 2>&1
if errorlevel 1 (
    PowerShell.exe -Command Start-Process \"%~f0\" -Verb runas
    exit /b 9999
    goto :exit
)

rem ここから管理者権限
pushd "%~dp0"

setlocal

rem 隠しファイル、隠しフォルダー、および隠しドライブを表示しない -> 再起動後有効になる。
reg add "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v "Hidden" /t REG_DWORD /d "2" /f >nul

rem 保護された オペレーティング システム ファイルを表示しない -> 再起動後有効になる。
reg add "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v "ShowSuperHidden" /t REG_DWORD /d "0" /f  >nul

endlocal

popd

rem 再起動！
shutdown -r -t 1

:exit
exit /b 9999
```

HKCUの操作は　管理者権限でなくてもできるので、以下でＯＫです。

```HideHiddenFiles.cmd
@echo off
rem 隠しファイルを非表示にする。
pushd "%~dp0"
setlocal
rem 隠しファイル、隠しフォルダー、および隠しドライブを表示しない -> 再起動後有効になる。
reg add "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v "Hidden" /t REG_DWORD /d "2" /f >nul
rem 保護された オペレーティング システム ファイルを表示しない -> 再起動後有効になる。
reg add "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v "ShowSuperHidden" /t REG_DWORD /d "0" /f >nul
endlocal
popd
rem 再起動！
shutdown -r -t 1
exit /b 0
```
Apache JMeterの設定（日本語化、プロキシ設定）

**対象：Apache JMeter Ver5.0、Ver5.1.1**

binディレクトリの中にある「jmeter.bat」をテキストエディタで開き、編集する。

## 日本語化
ここで設定をしておくとメニューは常に日本語表示となる。

```bat:日本語化設定（76行目付近）
set JMETER_LANGUAGE=-Duser.language="en" -Duser.region="US"
    　　　　　　　　　　　　　　　　↓
set JMETER_LANGUAGE=-Duser.language="ja" -Duser.region="JP"
```

## プロキシ設定
　※プラグインをダウンロードする場合、プロキシ設定は必須となる。
　　インターネットオプションのプロキシ設定は参照されない。

```bat:プロキシ設定（142行目付近）
set JMETER_CMD_LINE_ARGS=%*
　　　↓
set JMETER_CMD_LINE_ARGS= -H プロキシサーバ -P ポート番号 -N プロキシ対象外アドレス -u ユーザ名 -a パスワード
```
gulpインストールと一括管理用のフォルダ構成

gulp導入しました。
とりあえず、インストール用のメモ。
導入自体はNodeとnpm入れてれば簡単にできます。

グローバルインストールやらローカルインストールやらなんのこっちゃって感じだったのですが、
（グローバルにインストールしたら、ローカルはいらないのかと思ったら、そうでもないようで...）
管理も面倒だし、ひとまずはローカルだけでいいやという結論です。

##事前準備
- Node.js
- npm (Node.jsのパッケージ管理)


##フォルダ構成の準備
ローカルインストールだと、フォルダごと、プロジェクトごとにgulpをいれなきゃいけないのが面倒だとおもうので、gulpはひとつで、gulpfile.js（gulpの設定ファイル）のみ、プロジェクトごとの管理にします。

####準備段階の構成例
**/親フォルダ/**
　　└ **/プロジェクト１/**
　　　　└ index.html
　　└ **/プロジェクト２/**
　　　　└ index.html
これを準備してください。

####最終的な構成目標
**/親フォルダ/**
　　└ **/プロジェクト１/**
　　　　└ index.html
　　　　└ gulpfile.js　（gulpの設定ファイル）
　　　　└ node_modules　（node_modulesのエイリアス）
　　└ **/プロジェクト２/**
　　　　└ index.html
　　　　└ gulpfile.js　（gulpの設定ファイル）
　　　　└ node_modules　（node_modulesのエイリアス）
　　└ **/node_modules/**　（モジュール管理フォルダ）
　　└ **package.json**　（Node.jsのpackage管理ファイル）



##package.json作成
まずは`cd`で親フォルダまで移動して、下記のコマンドを入れます。

```
$ npm init
```

色々聞かれますが、全てenter(return)で大丈夫です。
これでpackage.jsonが作成されます。


##gulpのインストール
####ローカルインストール（`--save-dev`、 `--save`）

```
$ npm install gulp --save-dev
```

`--save`でインストールすると、webサイトに使用するデータと見なされるので、
`--save-dev`で、開発用のデータですよ、と分類してあげてるみたいです。

ちなみにグローバルインストール

```
$ npm install -g gulp
```

これで/node_modules/が生成されます。
この中にモジュールがインストールされます。

##/node_modules/のエイリアス作成
いわゆるショートカットです。右クリックから作成して、それぞれのプロジェクト内に配置します。
このとき、名前は全て「node_modules」にしてください。

エイリアスを作成すると、きちんと参照先のnode_modulesを読んでくれるので、
gulpの管理がひとつで済みます。

現在のフォルダ構成
**/親フォルダ/**
　　└ **/プロジェクト１/**
　　　　└ index.html
　　　　└ node_modules　（node_modulesのエイリアス）
　　└ **/プロジェクト２/**
　　　　└ index.html
　　　　└ node_modules　（node_modulesのエイリアス）
　　└ **/node_modules/**　（モジュール管理フォルダ）
　　└ **package.json**　（Node.jsのpackage管理ファイル）




##gulpfile.jsの作成
それぞれのプロジェクトに合わせて、設定ファイルを作ります。

**/親フォルダ/**
　　└ **/プロジェクト１/**
　　　　└ index.html
　　　　└ **gulpfile.js　（gulpの設定ファイル）　←これです**
　　　　└ node_modules　（node_modulesのエイリアス）
　　└ **/プロジェクト２/**
　　　　└ index.html
　　　　└ **gulpfile.js**　（gulpの設定ファイル）
　　　　└ node_modules　（node_modulesのエイリアス）
　　└ **/node_modules/**　（モジュール管理フォルダ）
　　└ **package.json**　（Node.jsのpackage管理ファイル）



gulpfile.jsについては、それについてだけの記事がいいので、ちょっと分けます。

####gulpfile.jsの記事書きました。
[ひとまずのsassコンパイル用gulpfile.js設定](https://qiita.com/shiki_neki/items/130c4dc6358f4f63c17a)