OmniAICreator/Qiita-1.07M huggingface dataset:
[Rails]  rails コマンドの際のyarnエラー   yarn.lockで不整合が起きてる場合に起こる

rails sの際にエラーが起きました

```
$ rails s
=> Booting Puma
=> Rails 6.0.0.rc1 application starting in development
=> Run `rails server --help` for more startup options
error Couldn't find an integrity file
error Found 1 errors.


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).


yarn check v1.17.3
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.


Exiting
```


ログ通りに

```
yarn install --check-files
```
を実行するとサーバーは起動できるものの
ブラウザでアプリを開いた時にcssライブラリたちが効いていない
事象に陥りました。

```
$ yarn upgrade
```

とすることで一発で解決できます
hot reloading not working with docker-compose running nuxt on mac

1. click docker-icon with menubar on mac

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253014/134352d3-f982-74fb-2c3b-cfcc9af370c8.png)


1. and press command + r
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253014/8a90d990-791a-df3f-3f1a-896ed45852ca.png)

1. then docker is restarted
単体テスト研修(業務開始前に実践！) 

##単体テスト研修(業務開始前に実践！) 

社内の新人向けに単体テストの研修をすることになりました。
対象受講者はC言語がある程度読め、単体テスト未経験～経験の浅い方です。
そこで今回はその研修用に作成した資料を公開し、少しでも何か意見を頂けたら
ラッキー！という感じです。
資料の内容は以前書いた[単体テストの勘所](https://qiita.com/Banayad/items/d93f6e77107ccbb0541a)を自分なりに改善したつもりのものです。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450697/24e6f74b-8611-4e94-bc81-1817e23c6fa0.png)
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450697/4d2ad4df-5fd9-e51c-99a1-e159d646d337.png)
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450697/cc62b4de-1793-d166-d70e-ecd4804b5006.png)
![キャプチャ4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450697/7de12f5f-2578-09b2-c278-0292d22d90da.png)
![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450697/658c5584-1d97-051b-f403-c0f913f75b16.png)
![キャプチャ6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450697/7dd1e124-a0ee-bfc7-46d3-bec01938dbc8.png)
![キャプチャ7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450697/0be1b223-e354-1d72-a9a6-a18906b7e190.png)
![キャプチャ8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450697/15438139-7c96-8009-a479-73b905252c97.png)

以上、御覧頂き有難うございました！
JavaScriptで文字列から大まかなemを算出する関数

# 概要

JSを触っていると、`table`等にデータを表示する機会が何度かあると思います。
その際、「列ごとに一番長い文字列に合わせたい、でもあんまり長くなったら折り返したい」みたいなことはありませんか？
厳密にやるなら、`visibility: hidden;`を付与した要素に突っ込んでサイズを調べることも出来ますが、件数が多くなってくるとパフォーマンスへの影響が心配になってきます。

そこで、「多少ズレてもいいので、文字列突っ込んだらemを返してほしい」ときに使う関数が欲しくなったので、作りました。

## 実装

```js
/**
 * @param {string} str - 対象の文字列
 * @param {number} max - 折り返したい文字数
 * @param {number} hanSize - 全角に対する半角のサイズ
 */
const toEM = (str, max = 20, hanSize = 0.5) => {
  const total = str.length;
  const zen = str.replace(/[!-~]/g, '').length; // 半角の文字や記号を潰し、全角の文字数を取得します。
  return Math.min(max, zen + Math.ceil((total - zen) * hanSize)); // 小さくて折返しが発生するのも嫌だったので、桁上げしています。
}

```

見ての通り、単純に半角と全角を分けてそれぞれの文字数を求めているだけです。
フォントに依存するところがあるので、hanSizeはある程度チューニングしてください。
フォント幅の差が激しい場合は頼りなくなりますが、大体なのでご愛嬌。
折返しが嫌な場合、大きめの半角フォント幅に合わせたほうが安全です。

## サンプル

```js

toEM('あいうえおabcde12345'); // => 10
toEM('Qiita'); // => 3
toEM('東京特許許可局'); // => 7
```
aho-corasick 0.7.6 コードリーディング

[aho-corasick](https://github.com/BurntSushi/aho-corasick) クレイトの現在の最新バージョン ([0.7.6](https://github.com/BurntSushi/aho-corasick/tree/0.7.6)) のコードリーディングをしました。

## モジュール図
![aho-corasick-0.7.6-mods.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67404/40850ed0-646f-71a6-d7fc-1395db3500ed.png)

## 各モジュールの責務
[docs.rs](https://docs.rs/aho-corasick/0.7.6/aho_corasick/) にあるのは詳細を省く。
### packed
ベクトル化した探索の実装
### state_id
状態の番号を表す型である StateID トレイトの定義
### error
エラー型 (`error::Error`, `error::Result`) の定義
### classes
u8 の同値類を表現する `classes::ByteClasses` の定義。これにより大文字小文字を同一視した探索などができる。
### buffer
u8 ロールバッファ (`buffer::Buffer`) の定義
### prefilter
マッチがありえない時にフィルタする機能を持つ `prefilter::Prefilter` トレイトの定義。偽陰性 (マッチがあるのにないと主張すること) は許されない
### automaton
Automaton トレイトの定義
### nfa
NFA (非決定性有限オートマトン) の定義
### dfa
DFA (決定性有限オートマトン) の定義、NFA -> DFA の変換 (決定化) 関数 [`Builder::build`](https://github.com/BurntSushi/aho-corasick/blob/0.7.6/src/dfa.rs#L619-L670) の実装
### ahocorasick
公開インタフェイスである `AhoCorasick`, `AhoCorasickBuilder` などの定義

### ソースコード
モジュール図 (dot) https://gist.github.com/koba-e964/5fa51a9426061d027142d55c7542acc7
rails s -d実行後にpidが表示されない時の対処法

# 環境

- VPSサーバー
- CentOS7
- ruby 2.6.3(rbenv)
- rails 5.2.3

## 起きたこと

`rails s -b 0.0.0.0 -d`でrailsのサーバーを起動させた後、下の参考リンクを見ながら`ps aux | grep rails`としても`grep`のプロセスしか表示されず、railsのPIDを表示できない

### 参考

[rails server -d でバックグラウンドで実行中のプロセスを停止する方法 -Qiita](https://qiita.com/Masaaki/items/6b29c2bb1a49107f2b73)

## 対処法

`ps aux | grep rails`ではなく、`ps aux | grep puma`とすればよかったようです。

これで出てきたPIDを`kill -9 `の後に入れると、無事railsサーバーを終了することができました。
例)

```bash
$ kill -9 1234
```



[こちらのブログ](https://happy-teeth.hatenablog.com/entry/2019/07/01/185631)のように新しい情報だと、`ps aux | grep puma`で紹介されているようです。
駆け出しのエンジニアにおすすめGitHubを使った勉強の継続方法

**注意)ポエムです**

issueを使って目的の明確化、N日後の自分への引き継ぎ資料を作ろうという内容です。

## ターゲットレベル
この記事のターゲットレベルは「gitの操作できるよ！」くらいの人です。
gitってなにって状態の人はgitの勉強を１時間くらいしてから見てください。

## 背景
昨年からTwitterで駆け出しのエンジニアタグが流行りましたよね。
その１年前に#駆け出しのエンジニアをツイートして生き残っているアカウントは半数以下だと推定されます。(当社調べ[^1]
半数しか生き残れないほど過酷()な分野だと言うことがこの事例かから分かりますよね。
### では、なぜ生き残れないのでしょうか？
熱意がなかったから？あきたから？プログラミングが難しいから？時間がないから?

### どうしたらいいの?
まずプログラミングが難しいと時間がないを解決しよう 

- プログラミングが難しい [^2]
そもそも何から開始したらいいか分からない 
分からないから怖い
→　作りたいもの/勉強したい項目について細分化してみよう

- 時間がない 
まとまった時間が取れず、毎日勉強できず何をしていたか覚えてない
→　勉強した内容に対して見える化しよう

何をしたらいいか明確にして、勉強した内容を見えるかすることでモチベーションアップ


###　そこで
「GitHubを使って勉強を継続しよう」という本題に戻ります。

## GitHubの使った勉強法
GitHubには様々な機能がありますが、その中でもissueという機能を使って行きます。
issueを使って目的の明確化、N日後の自分への引き継ぎ資料を作成します。
例えば、nodejsを勉強をする場合の例を紹介していきます。

1. GitHubのリポジトリを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27217/4f8a9750-7315-2950-4308-450c8bb2d3a0.png)
2. nodejsのアプリを作成するissueを作る  
issueを作ることによって何をしないといけないか明確になる
時間が空いても何をしないといけないか思い出すこと簡単 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27217/33dfece2-915a-7a25-7794-22b12b980216.png)
チェックボックス形式で何をするかさらに明確にするとgood
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27217/e55d69d4-e7d4-9430-cf0c-7e0849835995.png)
3. どうすればいいか検索してissueに書く   
issueに調べたことを書くことで同じサイト２回開くことや１か月後に再度見直すことができる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27217/d89a2002-b211-0526-49b6-df4d9f8d5c38.png)
4. チェックリストを更新する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27217/034fad49-71a7-fe46-c778-373056a6af23.png)
5. 目標を達成!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27217/67920334-4ea4-7dd0-a0ef-3d74197db2fa.png)

6. ソースコードをpush
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27217/27cb7538-2a2b-3ded-cca9-d4290c20c4f5.png)
7. issueをcloseする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27217/518ecc92-22bd-51f5-c022-756c4eb72ce7.png)
8. 次のissueを作成する  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27217/a1685006-3c7d-389c-ece3-73b1aa1d53c0.png)
看板を作ることより見える化できます 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27217/b1ff2740-169f-7ae1-53a3-5a1baf1ab249.png)

9. ３に戻ります 
実装途中に新しい課題が見つかれば新しいissueを作成します
10. closeしたisuueを見ながらニヤニヤします [^3]  

- その他  
余力があれば6.ソースコードをpushをプルリクにするのがbest  
ローカルでマージのでもgood  
**なにを変更したか後から見直すことができる事が大切**

## まとめ

本業のポエムが書きたくなってやってしまった後悔はしていない。
GitHubのissueを使ってチケットで見える化して勉強を加速しようという内容でした。

[^1]: 言ってみたかっただけ
[^2]: プログラミングは難しい
[^3]: ドヤ顔でも可
ec2-user の uid いろいろ

Aug 15, 2019 の情報です。

|env|uid|備考|
|---|---|---|
|AmazonLinux1 x86_64|500||
|AmazonLinux2 x86_64|1000||
|AmazonLinux2 aarch64|1000||
|Cloud9|501|ssm-user が uid == 500|

一概に RHEL 6 系と RHEL 7 系でみたいな話でもなくて、ssm-user を必要とする AMI では uid が 500 だったり 501 だったり、ブレがあるらしいです。

じゃあ AMI ID 載せなきゃ？？　今回はやめておきます。悪しからず。
画像をformで送信すると文字列になってしまう問題の解決方法

# 画像をformで送信すると文字列になってしまう

例えばこのようなコード

```html
<input name="client_img1" type="file">
```

ここに問題があるように思う人もいると思うが実は違う。

## formタグの定義部にmultipart/form-dataを指定する必要がある。

```html
<form method="POST" action="hoge" accept-charset="UTF-8" enctype="multipart/form-data">
  <input name="client_img1" type="file">
</form>
```


enctype="multipart/form-data"を設定することでサーバーに画像として送信される。
C++のmap,  unordered_mapの使い方: 連想配列が扱える


##C++ での連想配列の使い方
C++ で連想配列を使うために mapコンテナを使います
使い方は簡単で下記ように宣言するだけで, 連想配列が扱えるようになります

```c++
map<string, int> mp;
```

では下記の2個のプログラムを参考に説明していきます

通常の連想配列同様 mp[key] に値の入力を行い, 出力することができます.
また， mp["fish"] のように初期化されていないものは 0 が出力されます.

```c++:exsample.cpp
#include<bits/stdc++.h>
using namespace std;

int main(){
    map<string, int> mp;
    mp["dog"] = 3;
    mp["cat"] = 1;
    mp["python"] = 4;

    cout << mp["dog"] << endl; //3
    cout << mp["cat"] << endl; // 1
    cout << mp["python"] << endl; // 4
    cout << mp["fish"] << endl; //0
}
```

ループ使用方法及び, キー, 値の取得方法は下記のようにできます.

```c++:exsample2.cpp
#include<bits/stdc++.h>
using namespace std;

int main(){
    map<string, int> mp;
    mp["dog"] = 3;
    mp["cat"] = 1;
    mp["python"] = 4;

    for(auto itr=mp.begin(); itr!=mp.end(); itr++) {
        cout << "key = " << itr->first;      // キーを表示      
    	cout << ", val = " << itr->second << endl;    // 値を表示
    }
}
```

exsample2.cpp の実行結果が下記のoutput.txtです.

```c++:output.txt
key = cat, val = 1
key = dog, val = 3
key = python, val = 4
```

##おまけ
競技プログラマーの人は下記の問題で連想配列を使ってみてね!
[ABC008-b 投票](https://atcoder.jp/contests/abc008/tasks/abc008_2)

##unordered_map が高速だと聞いたので速度比較してみた
"map.cpp" と "unordered_map.cpp"の実行時間を time で測ってみた!

```bash
g++ -O0 map.cpp
time ./a.out 
g++ -O0 unordered_map.cpp
time ./a.out 
```


```c++:map.cpp
#include<bits/stdc++.h>
using namespace std;

int main(){
    map<string, int> mp;

    for(int i=0; i<1e7; i++){
        string s = to_string(i);
        mp[s]= i;
    }
    
    for(auto itr=mp.begin(); itr!=mp.end(); itr++) {
        string a = itr->first;      // キーを表示
    	int b = itr->second;
    }
}

```

```c++:unordered_map.cpp
#include<bits/stdc++.h>
using namespace std;

int main(){
    unordered_map<string, int> mp2;
    for(int i=0; i<1e7; i++){
        string s = to_string(i);
        mp2[s]= i;
    }

    for(auto itr=mp2.begin(); itr!=mp2.end(); itr++) {
        string a = itr->first;
        int b = itr->second;
    }
}

```
###実行結果
実行結果は下記のようになった.
map.cpp: 19.24s
unordered_map.cpp: 15.49s

大きな差ではないが, 有意な差は見られた
TypeScriptのPlaygroundが使いやすくなってた

## はじめに
TypeScriptで簡単な挙動確認をしたいときに作業中のプロジェクトの中でコードを書くのは少々億劫で、そういうときはブラウザ上でTypeScriptを実行できるサービスを使ってテストをしていました。
その中で一番の候補に上がるであろうTypeScript公式のPlaygroundというサービスがあるのですが、当時は使いにくかったのでCodeSandboxなどで代用していました。
しかし最近ふとPlaygroundを使ってみたところ、サービスが刷新されて使いやすくなっていたのでその点を簡単な解説付きで共有したいと思います。

Typescript Playground
http://www.typescriptlang.org/play/

## 結論
まずどう変わったかというと「**実行環境が新規ページから現在のページ**」に変わりました。
これは一長一短あると思うのですが、TypeScriptの挙動を確認したいだけであれば圧倒的にメリットの方が勝ると思います。

古いPlaygroundを知らないと何を言っているのかさっぱりだと思うので簡単に解説します。

## 以前までのPlayground
PlaygroundのExampleにはまだいくつか古い記述が混じっており、例えば「Classic JavaScript」を生成するとこんな感じです。

```ts
function Greeter(greeting) {
  this.greeting = greeting;
}

Greeter.prototype.greet = function() {
  return "Hello, " + this.greeting;
};

// Oops, we're passing an object when we want a string. This will print
// "Hello, [object Object]" instead of "Hello, world" without error.
let greeter = new Greeter({ message: "world" });

let button = document.createElement("button");
button.textContent = "Say Hello";
button.onclick = function() {
  alert(greeter.greet());
};

document.body.appendChild(button);
```

これはボタンを生成してbodyタグに追加している処理ですが、現在のPlaygroundでは実行しても見た目上はなにも起こりません。

古いPlaygroundでは、実行すると`新規のクリーンなhtmlページを生成 => 新規ページ上で上記が実行`されて結果が見えるという流れになっていたので成り立っていたサンプルになります。

ちなみにdevtoolsで見ると一応現在のページに生成されていることを確認できます。
![Screen Shot 2019-08-15 at 16.39.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137381/926c5751-da9e-3aa9-96bc-fdfd1b79a574.png)

新規ページが生成されるのでhtmlを扱った処理を自由に書け、ある種メリットではありましたが、TypeScriptを試したいだけの私にとってはわざわざ別ページに飛ばされるのは煩わしさしかなかったです。

さらにconsole.logでチェックしようとすると`新規ページを開く => devtoolsを開く`という手順を毎回踏まないといけないため、トライ＆エラーが辛かった記憶があります。

## 新しいPlayground
結論でお話した通り、新しいPlaygroundでは「現在のページ」で実行されるようになったので、**現在のページのConsoleから簡単に動作確認できるようになっています。**
![Screen Shot 2019-08-15 at 17.11.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137381/53bb3f0a-03b8-e712-b231-a464faeaf219.png)

めっちゃ便利！
というか最初からこれを求めてた。。。

## 最後に
機能を削ったことでユーザビリティを上げるというあまり見ない例かもしれませんね。
個人的には大変使いやすくなったと思うので、これからは純正のPlaygroundで色々テストさせてもらおうと思います。
DialogFragmentのdismiss,cancel

備忘録。

ダイアログの画面外をタッチされた時の処理を書こうと思ってググると、
setOnDismissListenerでいける！というブログを見つけたのでやってみると良く分からん挙動をする。

調べてみると、
http://oboe2uran.hatenablog.com/entry/2014/02/19/120653
setOnDismissListenerやsetOnCancelListenerは自分で書いてはいけないらしい。
代わりにonDismissやonCancelをOverrideすれば良いらしい。

ここまで来て、DismissとCancelの違いってなんぞ？って思って調べたら、
https://stackoverflow.com/questions/3125647/what-is-the-difference-between-a-dialog-being-dismissed-or-canceled-in-android

onDismissはOKボタンを押そうがキャンセルボタンを押そうがはたまたBackキーで戻ろうが画面外をタッチしようが、要はダイアログが終了するときに必ず呼ばれるらしい。
一方でonCancelは画面外タッチやBackキーと言ったボタン以外の(初心者開発者にとっては)非正規な動きでダイアログを閉じたときに呼ばれるらしい。

終了時、常にしたい処理はonDismissで、
イレギュラー対応はonCancelで書けば良いみたい。

なるほど。
Qiita記事投稿について

Qiitaにお世話になりすぎて、ついに自分も投稿してみたくなりました。
簡単にQiita記事投稿について書いていきます。

#参考記事
　[Markdown記法チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
　[Qiita初心者の投稿方法備忘録](https://qiita.com/cloversoft/items/0f12f3a739312d35cb8f)

#はじめに
Qiitaアカウントを作成
↓
メールアドレスを認証
↓
準備完了
#最低限必要そうな記法
##コードの挿入
例えばPythonで記述したコードをファイル名"qiita.py"で投稿したい場合、バッククオートを使って以下のように書きます。

><pre>
(空行)
```qiita.py
print("Hello Qiita")
```
（空行）
></pre>

結果

```qiita.py
print("Hello Qiita")
```
#見出し
「#」を使って書きます。
「#」1個→H1タグ〜「#」6個→H６タグ

><pre>
#筋肉
></pre>
結果
#筋肉

#Linkの書き方
タイトル付きでリンクが貼れたりします。
><pre>
https://www.irasutoya.com/
[いやすとや]（https://www.irasutoya.com/）
></pre>
結果
https://www.irasutoya.com/
[いやすとや](https://www.irasutoya.com/)
#強調
「＊」か「__」
1個イタリック
2個太字

><pre>
*イタリック*
__太字__
></pre>

結果
*イタリック*
__太字__

#引用
<pre>
>い　　　し　　　し　　　　く　　　て　　　　。
>　ん　う　て　ま　た　　に　く　っ　　い　す
>　　よ　　　み　　　み　　　な　　　　ま
</pre>
結果　
>い　　　し　　　し　　　　く　　　て　　　　。
>　ん　う　て　ま　た　　に　く　っ　　い　す
>　　よ　　　み　　　み　　　な　　　　ま

#最後に
簡単な記事ならこれでかけると思います。
他にも使えそうな書き方がいろいろとありそうなのでぜひ使っていきたいです。
[参考書]Android アプリ開発入門で詰まったところ

SBクリエイティブの`基本からしっかり身につくAndroidアプリ開発入門`をやっていて、サンプルコードでエラーになるところをあげます。

Capter6のRSSリーダーアプリ作成時のAsyncTaskLoaderを使うところで、コードの変更(`loaderManager`を`supportLoaderManager`へ)が必要でした。



- エラー

```
Type inference failed: fun <D : Any!> initLoader(p0: Int, p1: Bundle!, p2: LoaderManager.LoaderCallbacks<D!>!): Loader<D!>!
cannot be applied to
(Int,Nothing?,MainActivity)
```



- コード

```
package com.example.rssreader


import android.os.Bundle
import android.support.v4.app.LoaderManager
import android.support.v4.content.Loader
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.GridLayoutManager
import android.support.v7.widget.RecyclerView

class MainActivity : AppCompatActivity(), LoaderManager.LoaderCallbacks<Rss> {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // ここをsupportLoaderManagerに変更する
//        loaderManager.initLoader(1, null, this)
        supportLoaderManager.initLoader(1, null, this)
    }

    override fun onCreateLoader(id: Int, args: Bundle?): Loader<Rss> {
        return RssLoader(this)
    }

    override fun onLoadFinished(loader: Loader<Rss>, data: Rss?) {
        if (data != null) {
            // recycler view
            val recyclerView = findViewById<RecyclerView>(R.id.articles)

            val adapter = ArticleAdpter(this, data.articles) {
                // 記事タップしたときの処理

            }

            recyclerView.adapter = adapter

            // グリット表示
            val layoutManager = GridLayoutManager(this, 2)

            recyclerView.layoutManager = layoutManager
        }
    }

    override fun onLoaderReset(p0: Loader<Rss>) {
        // do nothing
    }
}

```
Ubuntu 18.04にKibana 7.3を導入する(aptコマンドでインストール)

参考
https://www.elastic.co/guide/en/kibana/current/deb.html

以下、rootユーザーで実行しています。

# 1. Kibanaのインストール
下記のコマンドを実行します。
Elasticsearchを事前にインストールしている環境であればリポジトリの登録は不要です。

```
wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | apt-key add -
echo "deb https://artifacts.elastic.co/packages/7.x/apt stable main" | tee -a /etc/apt/sources.list.d/elastic-7.x.list
apt update
apt install kibana
```

# 2. kibana.ymlの編集
kibana.ymlに以下のパラメーターを追加します。

```/etc/kibana/kibana.yml
server.host: XX.XX.XX.XX # 自身のIPアドレス
elasticsearch.hosts: ["http://XX.XX.XX.XX:9200"] # ElasticsearchサーバーのIPアドレス
```

# 3. 起動
下記のコマンドを実行します。

```
systemctl start kibana
```

# 4. 動作確認
ブラウザで
http://XX.XX.XX.XX(server.hostに設定したIPアドレス):5601
にアクセスして、下記のような画面が表示されることを確認します。
![Screenshot_2019-08-15 Kibana.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478819/59d3ae58-803a-c5d0-44af-0974514b4222.png)
Chrome76のNative lazy-loadingを利用するときに気をつける事

Chromeが[画像の遅延読み込み(lazy-loading)をネイティブでサポート](https://web.dev/native-lazy-loading)しました。

実装も実にシンプルで、

```
<img src="hello.png" loading="lazy" />
```

と、loading属性を追加するだけで、簡単に遅延読み込みに対応できます。

「めっちゃ簡単やん、よし全部の画像タグに ``loading="lazy"`` つけたろ」と思って、imgタグにひたすらlazyつけたら、**一部画像が表示されなくなってハマった**ので、ここに記録を残しておきます。

# loading="lazy"をつけると画像が表示されなくなった

lazy-loadingしたことで、画像が正しく表示されない例を以下ページに置きました。
画像があることをわかりやすくするために、画像のまわりに赤い枠線を配置してます。

https://nishio-dens.github.io/chrome-lazy-load-test/ng_lazy/

以下のように、ただひたすらにネコ画像を並べたサイトです。パット見うまく表示されているように見えますが...

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12701/5cb6d180-1373-b0aa-8ed1-50427b9d3405.png)

スクロールしてみると、おやおや...

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12701/27e75520-1d8d-2d5f-5f6f-909e25f7f3da.png)

画像がでてませんね.

# なぜ画像がでないのか

なぜ画像がでてこないのか。これはCSSの書き方に問題がありました。
以下のようなcssで画像を表示してます。

```css

<style>
.wrapper {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  min-height: 1000px
  display: flex;
  flex-wrap: wrap;
}
.element {
  margin: 20px;
  overflow: hidden;
  border: 2px solid red;
}

.element img {
  width: 100%;
  height: auto;
}
</style>

  <div class="wrapper">
    <div class="element"><img src="../img/0.png"  loading="lazy"></div>
    <div class="element"><img src="../img/1.png"  loading="lazy"></div>
    
    ひたすら同じエレメントが続く...
  </div>

```

問題は element にある `overflow: hidden` と imgの `height: auto` にあります。

遅延読み込みの画像は、最初は読み込まれていないので高さ0pxのままとなって表示され、
そのまま画像ダウンロードが完了しても0pxのままレンダリングされてしまうのです。

よって、**画像はダウンロードされてはいるが、高さ0pxで表示が隠れてしまう** 状態になっていました。

## どうすればよいか

### 対応案1. 幅高さをちゃんと指定する
https://web.dev/native-lazy-loading に記載されている注意書きをちゃんと読んでませんでした。

![スクリーンショット 2019-08-15 16.58.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12701/9c407a5e-690d-e930-7a32-d6d0def978e6.png)

幅高さ(width/height)を上記のように指定していないと、遅延読み込みのタイミングで画面がガタガタ揺れてしまいます。
また、今回のようにoverflow: hidden; で消されてしまう可能性もあるのと、幅高さを指定しないとパフォーマンスにも影響があるようなので、width/height をちゃんと指定しましょう。

![スクリーンショット 2019-08-15 17.00.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12701/6938d3c6-cbb0-e0bf-e7e5-88a53be81d8c.png)

とはいったものの、レスポンシブなサイトで画像の大きさを固定にするのは厳しくない？ というのもありますよね。

### 対応案2. overflow: hidden を消す

画像の親にある ``overflow: hidden;`` がそもそも悪さをしているので、こいつを消せば解決です。
でもデザインの関係で消せないかも？


### 対応案3. min-height: 30px とか指定しちゃう

これはちょっと危ないコードな気がしますが、とりあえず画像が一部表示されるスペースが有れば、画像遅延読み込み完了時に``height: auto``がちゃんと効いてくれます。

CSSで書くと、以下のようになります。

```
.element img {
  width: 100%;
  height: auto;
  min-height: 30px; // 30px でなくても良い
}
```

この実装は以下のようになります。

https://nishio-dens.github.io/chrome-lazy-load-test/fix_lazy/

しかし高さの指定がちゃんと無いので、スクロールがガタガタ揺れますよね... あまり良くない実装です。


## まとめ

単純にimgタグにlazyってつければ良いというわけではなく、CSS・デザインへの影響もちゃんと考えてlazy属性をつけましょう。というお話でした。
EBSをxfsでフォーマットしてEC2にマウントしようとしてmount: wrong fs type, bad option, bad superblock on~~~エラーが出たときの対処

# EBSマウント時のエラー

EC2に追加でEBSをアタッチして、`$ mkfs -t xfs /dev/xvdg` でフォーマットしてマウントしたかった。

そもそもamazonlinuxにxfsがなかったので`yum install xfsprogs`でインストール。

xfsのバージョンはこれ。

```bash
$ yum list installed | grep xfs
xfsprogs.x86_64                      4.5.0-18.23.amzn1             @amzn-updates
```

改めてフォーマットしてマウントしようとしたら、

```bash
$ mount /dev/xvdg /data
mount: wrong fs type, bad option, bad superblock on /dev/xvdg,
       missing codepage or helper program, or other error

       In some cases useful info is found in syslog - try
       dmesg | tail or so.
```

と出た。

# 原因

xfsにはxfsv4とかxfsv5とかバージョンがあるらしく、自分の環境だと `$ mkfs -t xfs /dev/xvdg`とやるとxfsv5になるようで、amazon linuxのkernelがxfsv5に対応していないと上記のエラーが出るとのことだった。 [^1]

# 対処

unameコマンドでkernelのバージョンがわかるので、まずはこれを確認。

3系だったら、mkfsコマンドに `-m crc=0`を付ける。
これでxfsv4でフォーマットされる。

```bash
$ uname -r
3.14.48-33.39.amzn1.x86_64
$ mkfs -t xfs -m crc=0 /dev/xvdg
```

4系だったら、mkfsコマンドに `-m crc=1`を付ける。(もしくはmオプションを付けない)
これでxfsv5でフォーマットされる。

```bash
$ uname -r
4.14.67-66.56.amzn1.x86_64
$ mkfs -t xfs -m crc=1 /dev/xvdg
```

あとはマウントする。

※3系だったら4系だったらといってますが、厳密にどこからxfsv5に対応してるかは未確認。少なくとも上記2例のバージョンではそれぞれ未対応/対応でした。

# おわりに

LVMでやれば必要ないとかなんとか。
mkfsよりそっちのほうがいいんですかね？
ていうかそんな古いカーネルのままにしておくなよって感じですかね？


[^1]: https://nekomatu.blogspot.com/2016/06/ubuntu-trusty-xfsv5.html
マークダウン記法をブラウザ上で簡単に書けるエディター

## リンク
https://misogihagi.github.io/mdede/

## 本文
https://qiita.com/_carbonara_/items/274b26ae45c7d4372bdf をもとにブラウザ上でうごくマークダウンエディタを作ってみました。
といってもそのままコピーしているわけではなくqiitqのように左にマークダウン、右にHTMLが出るようにしました。
また、HTMLテキストで出力されたテキストをクリックすればそのままクリップボードにコピーされるようにしました。 今回始めてulkitを使ってみたのですが、コピーされたことがわかるようにトースト([notification](https://getuikit.com/docs/notification))できるのは素晴らしいと思います。

## 蛇足
http://md2pdf.higty.xyz/md2html
このサイトが使えなくなっていたので作ったのですがなにかあったのでしょうか。


## 元ソースとの比較
```比較.diff
5c5
<     <title>test</title>
---
>     <title>Markdown→HTML変換</title>
17c17
< <body>
---
> <body width="100%">
19,21c19,21
<     <div class="editor uk-container uk-margin-small">
<         <h2>Markdownの入力フォーム</h2>
<         <form id="editor-form" class="">
---
>     <div class="editor uk-container uk-margin-small" width="100%">
>         <div style="width:50%;float:left;">
>             <h2>Markdownの入力フォーム</h2>
23,28d22
<         </form>
<         <button type="button" onclick="draw_preview()" class="uk-button uk-button-default uk-margin-auto">Preview</button>
< 
<         <h2>HTMLに変換した結果</h2>
<         <div class="col-md-12 ml-auto mr-auto text-left" style="border: 3px solid #ebebeb;">
<             <div class="preview" id="marked-preview"></div>
30,32c24,33
< 
<         <h2>変換結果コピペエリア</h2>
<         <textarea onclick="this.select();" id="result" class="uk-textarea" name="result" rows="8" cols="100" readonly></textarea>
---
>         <div style="width:50%;float:right;">
>             <h2>HTMLに変換した結果</h2>
>             <div class="col-md-12 ml-auto mr-auto text-left" style="border: 3px solid #ebebeb;">
>                 <div class="preview" id="marked-preview"></div>
>             </div>
>         </div>
>         <div style="clear: both;">
>             <h2>変換結果コピペエリア</h2>
>             <textarea onclick="this.select();document.execCommand('copy');UIkit.notification('コピーしました');" id="result" class="uk-textarea" name="result" rows="8" cols="100" readonly></textarea>
>         </div>
35c36
<         <p class="uk-text-center">Copyright 2018 konightch All Rights Reserved.</p>
---
>         <p class="uk-text-center">Copyright 2018 konightch & misogihagi All Rights Reserved.</p>
43a45
>     (function() {
45,46d46
<     </script>
<     <script>
51a52,55
>         simplemde.codemirror.on("change", function(){
> 	    draw_preview()
>         });
>     })();
```
プログラム案（というか思いつき）

NHKの『みんなで筋肉体操』を見ていて思い付きました。忘れないように書き留めておきます。

スクワット（3）で、

- 15秒やって5秒休憩、次に10秒やって5秒休憩してまた10秒で1セット

というのがありました。これをAndroidやiPhoneのタイマーアプリでやろうとすると、意外とできない。片っ端からできるかどうか試すのもどうかと思うので、おいおいこれを作ろうと思います。

まあまずは15秒、20秒、30秒、35秒、45秒にアラームを出すよう設定する画面と、設定通りにならすプログラムを作るのが第一段階。

次に、設定画面を考えて、エクササイズと休憩を分けられるように。

それから、設定方法を数式化できないかなー。上記の例だったら、`e15+(r5+e10)*2`って入力するみたいな画面にできたらなーなんて。

実行中の画面は、実装に応じて作り込んでいけばいいと思ってます。いつ着手できるかわかりませんが、いつか作ります！ まずは、コアなところだけでもJavaScriptを使って、コンソールもしくはローカルのHTMLファイルで作ってみようかな。音出せるのかな。表示だけでもまあいいか。いつかはスマホ用のアプリにしたいです。
Keras.model.fitの使い方例（コールバック、モデルの学習途中記録など）


#Kerasのfitの使い方を備忘録を兼ねて記述しておきます。

```python
erly_stpg = EarlyStopping(patience=10, verbose=1,monitor='val_loss' , mode = 'min') 
chkfile = '/root/・・・・・・/' + '{0:2d}'.format(Vernum)+'_{epoch:02d}-{val_loss:.4f}.hdf5' #format関数
chck_pont = ModelCheckpoint(filepath = chkfile, monitor='val_loss', verbose=1, save_best_only=True, mode='min')

history_callback = model.fit(x_train, y_train, batch_size=128, epochs=12, validation_split=0.1, shuffle = True , \
                             callbacks=[erly_stpg , chck_pont],validation_data=(x_val,y_val) , verbose = 0)
```
主なコードは上記のとおりです。
個別に説明します。

```python
erly_stpg = EarlyStopping(patience=10, verbose=1,monitor='val_loss' , mode = 'min') #early Stoppingを設定する
```

```python
chkfile = '/root/・・・・・・/' + '{0:2d}'.format(Vernum)+'_{epoch:02d}-{val_loss:.4f}.hdf5' #format関数
#チェックポイント（後述）をセーブするファイル。Vernumは事前に記録してある実験ナンバー
#epoch,val_lossはFormatを用いなくてもそのまま記述できるようだ
```

```Python
chck_pont = ModelCheckpoint(filepath = chkfile, monitor='val_loss', verbose=1, save_best_only=True, mode='min')
```
学習途中を記録する
filepath:記録するファイル名、固定すると上書きされてしまうため、今回変数を使用
monitor:記録要否を判定する変数
verbose:エコーの有無を指示
save_best_only:現時点で最もよかったら記録
mode:望小か望大を指示

```Python
history_callback = model.fit(x_train, y_train, batch_size=128, epochs=12, validation_split=0.1, shuffle = True , \
                             callbacks=[erly_stpg , chck_pont],validation_data=(x_val,y_val) , verbose = 0)
```
x_train...shuffleは省略
callbacks:学習途中のデータ（１epoch毎）を変数に返す
　　　　　　[]内に複数のオブジェクトを記載する
validation_data:別にバリデーションデータを用意する
　　　　　　今回は、学習データにノイズをいれたので、ノイズを入れていないデータを用意した。
###参考URL
https://qiita.com/cvusk/items/7bcd3bc2e82bb45c9e9c
モデルを時系列で書き出す方法が記載されています。
https://qiita.com/officefutaro/items/94af6799dc2451fa82c2
損失関数をファイルにセーブする方法を書いてあります(by　風太郎）
https://keras.io/ja/callbacks/
Keras日本語ドキュメント　Callbackの部分です
https://keras.io/ja/models/model/#fit
Keras日本語ドキュメント　Modelクラスのfitメソッドの解説です
Java8でPDFとTIFFを出力する

#概要
PDF出力には[Apache PDFBox](https://pdfbox.apache.org/)を利用する。
TIFF出力はJava9だと標準で対応されているらしいが、
Java8は未対応なので、[JAI(Java Advanced Imaging API)](https://www.oracle.com/technetwork/jp/java/javase/documentation/iio-141084.html)を利用する。

#準備
使用するライブラリをダウンロード。
###Apache PDFBox
ここから必要なファイルをダウンロード
[Apache PDFBox](https://pdfbox.apache.org/download.cgi#20x)
・pdfbox-2.0.16.jar
・fontbox-2.0.16.jar
・pdfbox-tools-2.0.16.jar
（執筆時点では上記のバージョンが最新)
#


Mavenだと

```xml:pom.xml
<dependency>
    <groupId>org.apache.pdfbox</groupId>
    <artifactId>pdfbox</artifactId>
    <version>2.0.16</version>
</dependency>
```
###JAI
jarファイルだけ欲しかったので、[java2s.com](http://www.java2s.com/Code/Jar/j/Downloadjaiimageio11jar.htm)からダウンロード。
・jai_imageio-1.1.jar
#実装
##PDFの出力
fontboxを使うことで日本語フォントも扱える。

```java:PDFSample.java
/**
  例外処理は適宜
**/

PDDocument doc = new PDDocument();
PDPage page = new PDPage();
TrueTypeCollection ttc = new TrueTypeCollection(new File("c:/windows/fonts/msgothic.ttc"));
PDFont font = PDType0Font.load(doc, ttc.getFontByName("MS-Gothic"), true);
doc.addPage(page);
PDPageContentStream cs = new PDPageContentStream(doc, page);
cs.beginText();
cs.setFont(font, 12);
cs.newLineAtOffset(10f, 10f);
cs.showText("Hello PDFBox！");
cs.endText();
cs.close();
doc.close();
```

##TIFFの出力
```java:TIFFSample.java
/**
  例外処理は適宜
**/
PDDocument doc = new PDDocument()

/**
  省略：PDF作成処理
**/

PDFRenderer pdfRenderer = new PDFRenderer(doc);

for (int p = 0; p < doc.getNumberOfPages(); ++p) {
    BufferedImage bi = pdfRenderer.renderImageWithDPI(p, 300, ImageType.RGB);
    ImageIOUtil.writeImage(bi, "TIF", this.outputStream, 300);
}
doc.close();
```
C#でWindows Serviceを作る（３）

#概要
前回の記事[C#でWindows Serviceを作る（２）](https://qiita.com/yossihard/items/6635a746607d9517a684)の続き。

#環境
Windows 10
Visual Studio 2017 Community

#手順
開発したサービスを実際にWindows 10にインストールして、
サービス管理画面で確認してみます。

####ビルド
ビルドメニューの「ソリューションのビルド」を選択し、
実行ファイル（Exe）を生成します。

中身は何も実装していないので、
何もしないサービスですが（笑）。

####インストール
「[C#でWindows Serviceのインストール処理を実装する](https://qiita.com/yossihard/items/89b1133d3204afbf9bf4)」では、
サービスのインストール機能をExeに組み込みましたが、
今回はDocsにも記載されている方法でインストールします。

まずはスタートメニューの開発者コマンドプロンプトを右クリックして、
「管理者として実行」を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/cbd3dd1c-0e5d-5622-248d-121cba97bf40.png)

コマンドプロンプトが起動するので、カレントフォルダをExeがあるフォルダに移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/4f9952ca-14ee-57ed-7078-e845e3cd0949.png)

以下のコマンドを実行します。
＞installutil Exeの名前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/29ae1215-93cc-a1ce-7ba2-d25ec725f8ed.png)

以下のような画面が表示されるので、管理者権限のあるユーザー名とパスワードを入力してください。
ユーザー名の先頭には、コンピューター名と￥マークを付加してください。
⇒つまり、「コンピューター名￥ユーザー名」の形式で入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/a57974b9-5a38-1576-acd7-e4b54c159a5e.png)

インストールが完了すると、このような表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/0175559c-ef11-ee7a-75cd-d9d52882ae30.png)

####サービスの確認
ちゃんとインストールされているか確認してみます。
Visual Studioで設定した内容がこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/05b243ce-ffff-79ea-7f2f-5e1126163f31.png)

タスクマネージャーを起動して、サービスタブを表示してみます。
ServiceName、Descriptionが表示されていますね。
インストール直後は停止状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/826beb39-4707-4274-0184-54033e11b117.png)

続いてサービス管理ツールの表示を確認してみます。
こちらでは、DisplayNameで表示されていますね。
Descriptionに設定した文字列が、説明の部分にちゃんと表示されています。
スタートアップの種類も手動（＝Manual）と、設定した値になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/04d1a8f3-96dd-25d8-6202-66748fb27b2c.png)

####サービスのアンインストール
サービスのアンインストールの手順も書いておきます。
開発者コマンドプロンプト（管理者モード）を起動し、
カレントディレクトリをExeのあるフォルダにします。
その後、以下のコマンドを実行します。
＞installutil -u Exeの名前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/fbc77a76-56a5-f218-2b94-3fff9bf42dae.png)


ここまでで、C#でのWindows Serviceのベース部分の作成と
インストール／アンインストールまでできました。

次回は処理の実装についての備忘録を書くつもりです。
Forward Proxy と Reverse Proxy って結局何が違うのか？

## 概要

LAN から WAN に抜ける時に Client の代わりになってくれるものを `Forward Proxy`、
WAN から LAN への通信で必要になるのが `Reverse Proxy` くらいにしか理解していませんでした... 。
調べ直したところ、間違ってはいないかったですが、Forward も Reverse も結局、

- Client からリクエストを受け取って Server に渡す
- Server からのレスポンスを受け取って Client に返す

という通信の流れは同じであるため、これだけだと明確な違いを理解できていません。
この記事に Reverse Proxy と Forward Proxy の違いの詳細をまとめておきます。

## 結論

いきなり結論ですが、Forward と Reverse の決定的な違いは、`通信対象の Server が特定のものであるか、不特定多数であるか`です。

#### Forward Proxy

普通に「プロキシ」と言ったら、こちらを指します。
LAN から WAN への抜ける時に、`Client (Web brawser) の代わり`に通信を行ってくれる。
リクエストを受ける Web Server は、Proxy を経由しているため Proxy からリクエストが来ているように見え、`Client の IP アドレスを隠蔽`できます。
また、Web Server への通信は必ず Proxy を経由するようにすることで、Proxy でユーザー認証、URL フィルタリング、通信の管理なども行えるようになります。

つまり、`Forward Proxy とは Client から不特定の Server にアクセスする際に、Client の代わりに通信を行ってくれるもの`です。

```
Web browser (Client) → ForWard Proxy (Client) → 不特定多数の Web server (Server)
```

#### Reverse Proxy

「リバプロ」と呼ばれることが多いです。(自分の周りでは)
`不特定多数の Client から、特定の Server への通信を代わりに行ってくれる`のが Reverse Proxy になります。
Reverse Proxy を導入することで、Server への負荷分散、Server の IP アドレスを隠すことができるなどのメリットがあります。

```
不特定多数の Web browser (Client) → ForWard Proxy (Server) → Web server (Server)
```

## まとめ

いろんな記事に Forward Proxy は Client 側に置かれて、Reverse Proxy は Server 側に置かれるものだ。と書かれていましたが、その本質は

- Forward Proxy は`特定の Client から、不特定多数の Server` への通信を代わりに行うもの
- Reverse Proxy は`不特定多数の Client から、特定の Server` への通信を代わりに行うもの

という違いがあるからでした。

## おまけの備忘録

- Apache と Nginx どちらを Reverse Proxy にするべきか

Apache でも Reverse Proxy の機能はありますが、Apache よりも軽量で動作が軽く、単純なリクエストを大量に捌くのが得意なのは Nginx。そのため Nginx を採用する事例が多いようです。
複雑なアプリケーション処理は Apache で行い、Nginx による Reverse Proxy が Apache にリクエストを転送するという構成が採用されることもあるようです。

- Nginx の Reverse Proxy 設定

/etc/nginx/conf.d に設定ファイルを配置します。ファイル名は xxx.conf となります。

『www.example.co.jp』へのリクエスト全てを 192.168.1.1 へ転送する場合は以下のようなファイル構成になります。

```php
server {
  listen 80;
  server_name www.example.co.jp;

  proxy_set_header    Host    $host;
  proxy_set_header    X-Real-IP    $remote_addr;
  proxy_set_header    X-Forwarded-Host       $host;
  proxy_set_header    X-Forwarded-Server    $host;
  proxy_set_header    X-Forwarded-For    $proxy_add_x_forwarded_for;

  location / {
    proxy_pass http://192.168.1.1/
  }
}
```
Route53を使ってサブドメインを移譲する流れ

この記事はRoute53の使い方になれた人向けに流れを書いたものです。
詳細な操作方法等は他の記事をご参照ください。

## Route53を使ってサブドメインを移譲する流れ

あるRoute53で管理されてる`example.com`のサブドメイン`jp.example.com`を別のRoute53に移譲する流れを書きます。

1. `example.com`のホストゾーンをRoute53(Aと呼びます)で作ります。（すでにある場合は不要）
2. 別のRoute53(Bと呼びます)にて`jp.example.com`のホストゾーンを作ります。（すでにある場合は不要）
3. Bのホストゾーンにある`jp.example.com`のNSレコードの値(ネームサーバが4つ登録されてるはず)をコピーします。
4. Aのホストゾーンに下記内容でNSレコードを作成します。
    5. 名前:`jp.example.com`
    6. タイプ:`NS`
    7. 値：上でコピーした4つのネームサーバの値

上記で作業完了です。
vectorによる並び替え

#数列をコピーする方法・昇順降順に並べる方法

```c
#include<bits/stdc++.h>
using namespace std;

int main(){
    int n; cin >> n;
    vector <int> A(n),B(n); //vector<型名> 変数(要素数) 
                            //vector<型名> 変数={要素1、要素2,....}
    for (int i=0; i<n; i++){
        cin >> A[i];
        B[i]=A[i];
    }
    
    //昇順
    sort(A.begin(),A.end()); //#include<algorihtm>によってsort関数を利用できる!
    for (int i=0; i<n; i++){
        cout << A[i] << " " ;
    }
    cout << endl;

    //降順
    sort(B.begin(),B.end(),greater<int>());
    for (int i=0; i<n; i++){
        cout << B[i] << " " ;
    }
    
    return 0;
}
```

#サイズ取得方法
```c
#include<bits/stdc++.h>
using namespace std;

int main(){
    vector <int> a={1,2,3}; 
    a[0]=3;
    for (int i=0; i<a.size(); i++){
        cout << a[i] << " ";
    }
    return 0;
}
レキシカルとは

レキシカル
====

私はいつも「字面（じづら）の」と説明しています。
ソースを一通り見た範囲で決定できるのがレキシカルです。

実際に実行時にどこから呼ばれるか、どんなオブジェクトにぶら下がるかはダイナミックな問題です。
以下pediaの解説にある擬似コードの例です。

```
A {
    var x;
}

B {
    var x; // A内のxとは別物
    var f;

    C {
        var y; // Cの内側からしか見えない
        y = rand();
        f = function(z) { return y + z; };
    }
    x = f(42);
}
```

この場合 C::y が外から見えないとする言語では、その範囲（いわゆるスコープ）をソースで確定可能です。
ソースで確定できるならレキシカルです。

一方、C::y が外からも見えるような言語では、誰が見るのか実行時でないとわかりません。という事は C::y のスコープは、それを見ようとしているナニかが C::y を外に見せるか、隠すかによって決まります。
実行時に決まるのでダイナミックです。

----
「レキシカルスコープ」で検索する機会があったんですが、みなさん色々混乱してらっしゃるようです。
特定のプログラミング言語のレキシカルスコープとダイナミックスコープの違いから類推する記事が多いです。
結果を見て機能を推測するのは、「だって実際に動いてるし」につながるのでとても危険です。やめましょう。
PythonのライブラリPillowを使用して複数画像をカラーモード変換（CMYK→RGB）

複数画像の中に画像モードがCMYKのものがあった場合、CMYK画像だけ別フォルダにコピーしてRGBに変換する
（カラープロファイル指定なし）

Python3.6.8 で Pillow（Pythonの画像処理ライブラリ）を使用

## venvでpythonの仮想環境を作成し、Pillowをインストールする

venvで仮想環境 test_python を作成

```
$ python -m venv test_python
```

仮想環境に移動

```
$ cd test_python
```

仮想環境を有効化

```
$ source bin/activate
```


Pillowのインストール

```
$ pip install Pillow
```

IDLEの起動

```
$ python -m idlelib.idle
```

## 画像モード変換のプログラムを作成して実行する
IDLEの上部メニューから File > New File を選択して新規ファイルを作成し、
以下を記述して名前をつけて保存する「例：cmyktorgb.py」


```cmyktorgb.py
import os
from PIL import Image

os.makedirs('cmyktorgb', exist_ok=True)

# カレントディレクトリの全画像をループする
for filename in os.listdir('.'):
    if not (filename.endswith('.jpg') or filename.endswith('.jpeg')):
        continue #.jpg、.jpeg以外はスキップする
    
    im = Image.open(filename)
    
    if im.mode == 'CMYK':
        im = im.convert('RGB')
        # 変換したファイルをcmyktorgbフォルダに保存する
        im.save(os.path.join('cmyktorgb', filename))
```

カレントディレクトリにRGBに変換したい画像ファイルを格納し、
cmyktorgb.py ファイルを開き、上部メニュー Run > Run Module を選択して実行すると、
CMYK画像だけRGBに変換され cmyktorgb フォルダに格納される



### 参考

- [Pillow](https://pillow.readthedocs.io/en/4.0.x/index.html)
- [初心者向け・Pythonの仮想環境venvとPipenvによるパッケージ管理についての解説](https://paiza.hatenablog.com/entry/2018/07/05/%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91%E3%83%BBPython%E3%81%AE%E4%BB%AE%E6%83%B3%E7%92%B0%E5%A2%83venv%E3%81%A8Pipenv%E3%81%AB%E3%82%88%E3%82%8B%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8)
- [venv --- 仮想環境の作成](https://docs.python.org/ja/3.6/library/venv.html)
Monarch対応開発キット - UnaMKR -

シンガポール・台湾のSigfoxオペレータ[UnaBiz](https://www.unabiz.com/)からSigfoxグローバル・シームレス・ローミング技術[Monarch](https://build.sigfox.com/monarch)に対応した開発キット[UnaMKR](https://www.unabiz.com/products/unamkr/)が販売されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/751486f7-8b42-9c1c-064b-f87f58f8b098.png)
UnaMKRは、Sigfox Monarchに対応した開発ボードであり、Arduino MRKZERO互換を持ったモードに加え、Modemモード、Embedモードが用意され、様々な視点でのIoT学習やプロトタイプ開発でもお使いいただけます。
海外シームレスローミング技術であるMonarchに関しては[こちら](https://qiita.com/ghibi/items/3283348a81e09e784b8d)も参考にしてください。

#UnaMKRのハードウェア概要
UnaMKRは、各国のSigfox運用技術基準に対応した全RC（RC1～RC6）をサポートした通信モジュールを搭載しているほか、BLEモジュール、9種類のセンサ（BME680、LSM303）が内蔵されています。

|内容|詳細|
|:---|:---|
|サイズ|25 x 69 mm|
|質量|16g|
|Sigfox|Monarch|
|Radio Configuration|RC1、RC2、RC3、RC4、RC5、RC6|
|Bluetooth|5.0|
|アンテナコネクタ|I-PEX SMA|
|搭載センサ|加速度、磁気、ガス、温度、湿度、気圧、照度、リードスイッチ、ボタン|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/afef6374-f3e9-c7cf-37f0-bab10a1ac616.png)

#UnaMKRのオペレーションモード
UnaMKRは、下記3種類のモードが用意されており、通信モジュールにATコマンドで直接制御したり、Arduinoや内蔵されているST BlueNRG-2 SoCから制御することも可能であり、様々な試作開発シーンで有効な開発キットとなっています。

- Modem: Sigfox通信モジュールをUSBシリアルケーブルに接続したPC等から直接ATコマンド制御するモード
- Arduino: [Arduino MKR Zero](https://store.arduino.cc/arduino-mkrzero)から通信制御するモード
- Embed: 低消費電力デバイス向け[ST BlueNRG-2 SOC](https://www.st.com/ja/wireless-transceivers-mcus-and-modules/bluenrg-2.html)から通信制御するモード

|モード|消費電力量|電力源|センサ利用可否|
|:---|:---:|:---:|:---:|
|Arduino|+ (多い)|Arduino Pins|可|
|Modem|- (少ない)|Micro USB / DC|不可|
|Embed|-- (最少)|Micro USB / DC|可|
>ArduinoモードとModemモードの切り替えはジャンパの切り替え、Embedモードへの切り替えは[STツールを使ったファームウェア更新](https://www.st.com/content/st_com/en/products/embedded-software/wireless-connectivity-software/stsw-bnrgflasher.html#overview)が必要です。

海外ローミングに対応したLPWAソリューションを作ってみたいという方に適した開発キットかと思います。
内蔵されている[LITEON社製通信モジュール](https://partners.sigfox.com/products/wsg309s-monarch)も、技適取得済みですし、[1年間の無料回線](https://qiita.com/ghibi/items/5893923b44f1757294e9)も含まれています。

####こちらに各モードの使用方法をまとめています
- [Modemモードとして使う](https://qiita.com/ghibi/items/33c62bd56fc1eb334e8a)
- [Arduinoモードとして使う](https://qiita.com/ghibi/items/5682dc559b86b3f2e992)
- [Embedモードとして使う](https://qiita.com/ghibi/items/902bd12c2519caa535f7)

Welcome to the 0G World!
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/d6ad10bc-75ba-8124-14d4-f144657c6473.png)](https://twitter.com/ghibi) @ghibi
Windowsの特定のプロセスのメモリ使用量を記録する

## 目的
あるプロセスがメモリリークしている。その推移を記録する。

## 結論
プロセスIDが1228の推移を1秒間隔で1228.csvに記録するには、PowerShellプロンプトを開き、以下のようにする。停止するにはCtrl+C

```powershell
while ($true) {ps -Id 1228 | Add-Member Time (Get-Date) -PassThru | Export-Csv -Path 1228.csv -Append  -NoTypeInformation; sleep 1}
```

## 詳細
Windowsでデフォルトで使えるPowerShellを使ってなんとかする。

プロセス一覧は `ps` (Get-Process)コマンドレットで得られます。

例えばfirefoxのプロセスだけ欲しいなら以下のようにします。

```powershell
ps firefox
```

特定のプロセスだけ欲しいならIdを指定します。Idはpsコマンドレットで得られます。

```powershell
ps -Id 1228
```

いつの状態か記録するために、時刻プロパティを追加しましょう。`Add-Member` で追加できます。
現在時刻は `Get-Date` で得られます、()をつけないと `Get-Date` と出力されてしまう。 `-PassThru` オプションで新たに拡張されたオブジェクトをパイプラインに渡します。

```powershell
ps -Id 1228 | Add-Member Time (Get-Date) -PassThru
```

CSV形式で保存するには `Export-Csv` です。繰り返し実行するので `-Append` オプションをつけます。タイプ情報は不要なので `-NoTypeInformation` オプションもつけておく。

```powershell
ps -Id 1228 | Add-Member Time (Get-Date) -PassThru | Export-Csv -Path 1228.csv -Append -NoTypeInformation
```

定期的に実行したいので無限ループします。`sleep` で間隔(秒単位)を指定。

```powershell
while ($true) {ps -Id 1228 | Add-Member Time (Get-Date) -PassThru | Export-Csv -Path 1228.csv -Append  -NoTypeInformation; sleep 1}
```

## 感想
1行でなんとかなりました。
定期実行を無限ループで処理しているのがちょっと気になるところです。
また、メモリ使用量に限らずプロセス情報すべて記録しているので無駄があります。記録する項目を指定したほうがいいかもしれない。

これでリーク調査はまだしていないので実際のところ役に立つのかは不明です。
Address already in use - bind(2) for "127.0.0.1" port 3000

##エラー
```
Address already in use - bind(2) for "127.0.0.1" port 3000
```

##原因
ポートが重複していた

##解決
プロセスの確認

```
ps ax | grep rails
```
```
  800 ?        SNsl   0:09 /usr/local/rbenv/versions/2.5.3/bin/ruby bin/rails s -e production -b localhost -p 3000
31974 pts/0    S+     0:00 grep --color=auto rails
```

プロセス指定して、kill

```
kill 800
```
コンポーネントという考えが好き

# コンポーネント
コンポーネント（部品）をつくって、それを組み合わせていくプログラムする手法があります。
サーバサイドではオブジェクト指向の言語だと、クラスをつくって使い回せるようにという考えは、僕がプログラムしだしたころから一般的だった気がします。
厳密に言うとクラスとコンポーネントは違いますが、部品を作るという発想は近いと思います。
フロントエンドではあまり部品をつくるという発想はなかったんですが、最近VueやReactが注目を浴びることで、コンポーネントという考え方が一般化してきる気がします。

**注目を浴びる=良い** 

ということですよね。
時代が変わって他の画期的な手法が出てくるかもですが、現時点ではかなり良い手法ではないかと思います。

個人的に良いと思うのは、

 * 他に使い回しやすくなること
 * 部品単位なのでメンテナンスや単体テストしやすいこと
 * 依存関係をスッキリさせることができること

です。

ただ従来のやり方に満足している人たちには、このメリット伝えても全然感動しないんですよね。
「使い回すんやったら、コピペで良いやん」とか言い出す人もいるでしょう。
「部品を作って他に持っていくのとコピペは全然違うねん！」「プログラムってのは依存関係を意識しておくのが良いんだよ」とかいっても響かないんですよね。

・・・愚痴っちゃいましたが、コンポーネント良い考えだと思います。
まだやったことない人は騙されたと思ってやってみてほしいです。

## 小さな単位
コンポーネントの作り方や粒度、プログラミングの方法は、色々良いとされる原理原則ありますが、それを最初に全て知ろうとすると時間がかかってしまいます。
とりあえず、最初はできる範囲で部品にわけて、次のプログラムにも活かせるかもぐらいで作るのが個人的には良いのではないかと思います。
で、僕がそれを実践した結果、今のところ小さな単位でコンポーネントを作るほうが良いなと思ってます。
小さすぎるとファイル多くなるし、データの流れが複雑、マトリョーシカとか言われるかもですが、
僕はデータがたらい回しにされようが、理にかなった設計であれば問題ないと思ってます。

## コンポーネントとか小さい単位とか言い出した理由
なんでこんな話を書いたかと言うと、Qiita書くネタがないわけじゃないんですが、
Qiita書く場合、結構最初から最後まで完結して１つにまとまってる記事のほうが多いなって思って、
自分もそれで書こうと思うと、知識不足だったり、文章力がなかったりで「やべぇうまくかけない」ってなっちゃったんですね。

だからコンポーネントの考えで、
部分部分で小さく１つの記事にしちゃおうって思ったわけです。
記事とプログラム違うからとか言われると元も子もないですが、
１つにまとまってるのを最初から最後まで読んで理解するってなかなか大変な人も多いんじゃないかな。
ほんとに最小限で今日はここまでみたいな記事も需要あるんじゃないかという推測です。

というわけで僕は基本小さい単位で記事書く！
（これで継続投稿しやすくなるわー）
Rails / RSpec

# 概要
# 前提条件
# 手順
## Gemfile
```:Gemfile
  group :development, :test do
    # Call 'byebug' anywhere in the code to stop execution and get a debugger console
    gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
+   gem 'rspec-rails'
+   # Adds support for Capybara system testing and selenium driver
+   gem 'capybara', '>= 2.15'
+   gem 'factory_bot_rails'
  end

  group :development do
　  ︙
    gem 'spring-watcher-listen', '~> 2.0.0'
+   gem 'spring-commands-rspec'
  end

  group :test do
    # Adds support for Capybara system testing and selenium driver
-   gem 'capybara', '>= 2.15'
    gem 'selenium-webdriver'
-   # Easy installation and use of chromedriver to run system tests with Chrome
-   gem 'chromedriver-helper'
+   gem 'webdrivers'
end
```

chromedriver-helper を削除し webdrivers を追加する理由は、rspecコマンド実行時に 下記のWarning が出るため

```
2019-08-15 07:18:52 WARN Selenium [DEPRECATION] Selenium::WebDriver::Chrome#driver_path= is deprecated. Use Selenium::WebDriver::Chrome::Service#driver_path= instead.
```

## Gem インストール
```
$ bundle install
```

## RSpecインストール
```
$ bundle exec rails g rspec:install
```

## RSpec 設定変更
出力形式を見やすいドキュメント形式に変更

```:.rspec
  --require spec_helper
+ --format documentation
```

## rails g コマンド実行時のテストに関する設定の変更

```ruby:config/application.rb
  module Myapp
    class Application < Rails::Application
      # Initialize configuration defaults for originally generated Rails version.
      config.load_defaults 5.2

      # Settings in config/environments/* take precedence over those specified here.
      # Application configuration can go into files in config/initializers
      # -- all .rb files in that directory are automatically loaded after loading
      # the framework and any gems in your application.

+     config.generators do |g|
+       g.test_framework :rspec,
+                        fixtures: true,
+                        view_specs: false,
+                        helper_specs: false,
+                        routing_specs: false,
+                        request_specs: true,
+                        system_specs: true
+     end
    end
  end
```

## Capybaraの初期セットアップ
```ruby:spec/spec_helper.rb
+ require 'capybara/rspec'
  RSpec.configure do |config|
+   config.before(:each, type: :system) do
+     driven_by :selenium_chrome_headless
+   end
　  ︙
  end
```

## binstub 作成
```
$ bundle exec spring binstub rspec
```

## 動作確認
```
$ bundle exec bin/rspec

Running via Spring preloader in process 22
No examples found.

Finished in 0.00272 seconds (files took 0.68623 seconds to load)
0 examples, 0 failures
```
[AWS EC] Linux にEBSを追加

ただのメモです

#AWSコンソール
- EBSを作ってインスタンスへアタッチ
- デバイス名は控えておいたほうがいい

# Terminal
- SSHで繋ぐか、System ManagerでStart Session

```shell
# ディスクの空き領域を表示
df -h

# パーティションの作成
## /dev/xvdbはEBSをアタッチしたときに指定したもの 
## /dev/sdf -> /dev/xvdf の場合があるので、fdisk -l で確認
sudo su -
fdisk -l
mkfs -t ext4 /dev/xvdb

# マウント　（と権限）
mkdir /data2
mount /dev/xvdb /data2
cd /data2
chmod 777 .

# ディスクの空き領域を表示
df -h

# 起動時に自動でマウントされるようにfstabに追加
echo /dev/xvdb /data2 ext4 defaults 1 1 >> /etc/fstab

```
【PostgreSQL】大文字小文字を無視したテキストの検索条件

メモとして残します。


#■やり方

`LIKE`が`~~*`になるだけ。

```sql
SELECT * FROM tablename WHERE columnname ~~* 'keyword';
```
または`ILIKE`を使う

```sql
SELECT * FROM tablename WHERE columnname ILIKE 'keyword';
```
EC2の新インスタンスに既存ElasticIPをあてたらログインできなかった

##経緯
EC2の環境構築を間違えて、修正がめんどくさかったので新しいインスタンスを作成した。
新しいインスタンスに既存のelasticIPをあてたところ、EC2のログイン時にエラーが発生した。

##エラー文
```
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the ECDSA key sent by the remote host is
**************************************************
Please contact your system administrator.
Add correct host key in /Users/USERNAME/.ssh/known_hosts to get rid of this message.
Offending ECDSA key in /Users/USERNAME/.ssh/known_hosts:2
ECDSA host key for xxx.xxx.xxx has changed and you have requested strict checking.
Host key verification failed.
```
> <ざっくり要約>
リモートホスト(EC2)の認証が変わりました。
マンインザミドルアタック(中間者攻撃。第三者が送信者と受信者の両方になりすまして、ユーザーが気付かないうちに通信を盗聴したり、制御したりする行為)を受けた可能性があります。
また、ホストキーが変わった可能性があります。
正しいホストキーを"~/.ssh/known_hosts"に追加してください。 
〜


どうやら、SSH通信のための公開鍵の設定がローカルとホストで違うことが問題らしい。
調べてみたところ、SSHで接続するときにホストキーを再生成していたり、同じIPアドレスやホスト名だけど違うサーバに接続したり、再インストール後に接続したりすると出るエラーとのこと。

##解決方法
```
$ ssh-keygen -R HOST
```
**※HOSTにはxxx.xxx.xxx.xxx(ElasticIP)を入れる。**
これで公開鍵の設定がリセットされ、無事ログインできるようになった。

##参考
https://qiita.com/grgrjnjn/items/8ca33b64ea0406e12938
https://qiita.com/wnoguchi/items/690f3f4651f8f11e4ed3
https://www.uramiraikan.net/Works/entry-1970.html
Multiplicative Persistence

[Multiplicative Persistence 11を求めた](https://twitter.com/KeikoUTorii/status/1161322092165337088)という話題があったので、[Pythonで実装しました](https://qiita.com/yutasth/items/b214b825db4361721bfe)が、Haskellでも実装してみました。私のPCで0.76秒くらい。こういうときには遅延評価は便利ですよね。Python版では探索空間をさらに減らすことで0.02秒を実現しています。

```haskell
module Main where

import Data.Char (digitToInt)

mps :: [(Integer, Int)]
mps = map calcMP targets
  where
    calcMP :: Integer -> (Integer, Int)
    calcMP t = (t, calcMP' t)
    calcMP' :: Integer -> Int
    calcMP' t | t < 10    = 0
              | otherwise = let t' = foldr (*) 1 $ map (fromIntegral . digitToInt) $ show t
                            in calcMP' t' + 1
    targets :: [Integer]
    targets = 2 : 3 : 4 : 5 : 6 : 7 : 8 : 9 : concatMap extend targets
    extend :: Integer -> [Integer]
    extend i = map (\j -> i * 10 + j) [fromIntegral (i `mod` 10)..9]

getMP :: Int -> (Integer, Int)
getMP limit = head $ dropWhile (\(_, mp) -> mp < limit) $ mps

main :: IO ()
main = print $ getMP 11
-- (277777788888899,11)
```