OmniAICreator/Qiita-1.07M huggingface dataset:
JSONデータを元にウェブページの一括生成を試した（Gulp+Pug）

GulpとPugで静的ページを量産できる仕組みを試してみました。
サンプルとして`article/カテゴリー別/記事エントリー名/index.html`形式で出力されるようにしてみました。

### npmパッケ

```
$npm install gulp gulp-pug gulp-rename
```

### 記事データ

```json:article.json
{
  "music": {
    "entry-1": {
      "name": "バッハ",
      "title": "G線上のアリア"
    },
    "entry-2": {
      "name": "ベートーヴェン",
      "title": "運命"
    }
  },
  "movie": {
    "entry-1": {
      "name": "キューブリック",
      "title": "2001年宇宙の旅"
    },
    "entry-2": {
      "name": "黒澤明",
      "title": "七人の侍"
    }
  }
}

```

### ウェブページのテンプレート

```pug:_article.pug
!DOCTYPE html
html
  head
    meta(charset="UTF-8")
  body
    p テスト
```

### Gulp

```javascript:gulpfile.js
// Gulp
const gulp = require('gulp')
// ファイルリネーム
const rename = require('gulp-rename')
// Pug
const pug = require('gulp-pug')

// テンプレート
const template = './src/_article.pug'
// データファイル
const data = require('./src/article.json')

// ビルドタスク
const build = (callback) => {

  // カテゴリーのループ
  Object.keys(data).forEach((catKey) => {

    // 記事のループ
    Object.keys(data[catKey]).forEach((articleKey) => {

      // Gulpタスク
      gulp.src(template)
        .pipe(
          pug()
        )

        // 出力先
        .pipe(
          rename(`article/${catKey}/${articleKey}/index.html`)
        )

        .pipe(
          gulp.dest('./dist/')
        )
    })
  })

  callback()
}

// タスク実行
gulp.task('default', build)
```

## 実行結果

```
dist/
  └ article/
      ├ movie/
      │    ├ entry-1/
      │    │    └ index.html
      │    └ entry-2/
      │         └ index.html
      └ music/
           ├ entry-1/
           │    └ index.html
           └ entry-2/
                └ index.html
```

うまくファイルは出力されたけど、index.htmlの内容が全て同じだ。
各記事のデータが入らなければ意味がない。

調べてみるとPugにはlocalsというオプションでGulpからPugへ文字列を渡せるらしい。
gulpfile.jsをちょっと修正。

```javascript:gulpfile.js
.pipe(
  pug({
    // Pugテンプレートファイルに変数を渡す
    locals: {
      data: data,
      category: catKey,
      article: articleKey
    }
  })
)
```

```pug:_article.pug
p #{data}
p #{category}
p #{article}
```

## 実行結果

```html:index.html
<p>[object Object]</p>
<p>movie</p>
<p>entry-1</p>
```

…どうも配列ごとまるっと渡す横着はできないらしい。
あまり美しくないけど小分けで個別の変数として渡すしかないかな？

```javascript:gulpfile.js
.pipe(
  pug({
    locals: {
      category: catKey,
      article: articleKey,
      title: articleTitle,
      name: articleName,
    }
  })
)
```

ページで使いそうなデータを小分けにして送る様子。

## JSでも値を使いたい

```pug:_article.pug
!DOCTYPE html
html
  head
    meta(charset="UTF-8")
  body
    script.
      var setting = {
        category: '#{category}',
        article: '#{article}'
      }
```

こんな風にすればJSのグローバル変数に値を渡せる。あとはJSでお好きに。
appspec.ymlとbuildspec.ymlにfileを追記しなかったために，沼にハマった話

## 環境
- AWS CodeStar
- AWS CodeDeploy
- AWS CodeBuild
- Django: 2.1.4

## はじめに
- どうやらここ数日に，テンプレートアプリが変わった
- CodeStar製アプリで発生しました
- ある条件をクリアすると，エラー沼にハマった話
- あくまで備忘録程度です

## The overall deployment failed because too many individual instances failed deployment, too few healthy instances are available for deployment, or some instances in your deployment group are experiencing problems.

![スクリーンショット 2019-06-07 23.41.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160590/845157db-43df-37a9-80c1-e7ce2d776e8f.png)

このエラーは，CodeDeploy上で発生します．意味は分かるんですけど，原因はわからない．．．．
そこで，素直にDeployにおけるどのイベント中に発生したか確認します．

![スクリーンショット 2019-06-07 23.41.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160590/441f7420-135a-ae86-f448-8983456c6688.png)

`ApplicationStop`中にエラーが発生したことが確認できました．これは，前回デプロイしたアプリを正常に終了できなかったことを表しています（間違っているかもしれません．．．）
つまり，エラーが起きた原因は，直前のデプロイ内容にあります．

![スクリーンショット 2019-06-07 23.41.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160590/c0816f45-8a60-6dae-fb3b-91a54069e447.png)

## エラー原因：appspec.ymlとbuildspec.ymlにfileを追記しなかった
Djangoでは，新規アプリを作成する際に下記のコマンドを打ちます．

```
python manage.py startapp myapp
```

その後，'settings.py'に追記します．

```python:settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp', 追記箇所
]
```

ここから忘れていたがために，沼にハマったポイントです．
`appspec.yml`に下記を追記

```yml:appspec.yml
files:
- source: /myapp/ 追記箇所
    destination: /home/ec2-user/myapp 追記箇所
```

`buildspec.yml`に下記を追記

```yml:buildspec.yml
files:
 - "myapp/**/*" 追記箇所
```

## エラーを強行突破する
これでファイルの修正は完了です．しかし，このままデプロイしてもエラーが出続けます．．．．
そこで，CodeDeploy上から強行突破します．

まず，`アプリケーション`からアプリ名を選択して，`アプリケーションをデプロイする`を選択します．

![スクリーンショット 2019-06-07 23.56.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160590/37cfcb3d-3d0c-ab2b-834c-1ab8cadda58d.png)

次に`リビジョンタイプ`を選択します．ちなみに，CodeDeployとGitHubの接続は，自分のユーザーネームをGitHubトークン名の欄に入力すると．GitHubのページヘ遷移してうまくできます．
あとは，リポジトリ名やコミットIDを入力します．

![スクリーンショット 2019-06-07 23.56.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160590/5fbf083c-e215-4dcb-a391-ad8071aca335.png)

最後に，`追加のデプロイ動作設定`を行います
ApplicationStopなどライフサイクル中のエラーを無視するなら，最初の欄にチェックを入れます．また，同一ファイルの存在によるエラーであれば，コンテンツの上書きにチェックを入れます．

![スクリーンショット 2019-06-08 0.13.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160590/728fbc13-40f7-a83b-f7a8-587e9531ea87.png)

以上で，強行突破できるはずです．

## 感想
codedeploy上以外にも，aws cliコマンドからも強行突破ができます．本当は，こんなエラーが出ないようにコーディングしましょうという話ですよね（精進します）．
たどり着くまでにまる1日を要しました．エラーが発生した後にSSHでログを見たり．．．．まぁ，そもそもREADMEを見ると，ymlに追記してね！と書いてあったんですけどね．．．．
インフラ周りお勉強するぞー！
Linux：現場での頻出単語

##はじめに
こんにちは。現在就職活動中の[ほりかわ](https://twitter.com/jonnyjonnyj1397)です。

この記事では実際にベンチャーで活躍されてるエンジニアさんから「これだけは覚えておけ！」というLinuxの用語を教えていただいたので紹介します。

##Linux用語集

####Linuxカーネル

オリジナルのLinuxで、リーナス・トーバルズにより開発され、オープンソースで一般公開された。


####Linuxディストリビューション

Linuxカーネルを様々な企業やエンジニアがカスタマイズして再配布されたもの。

代表的なもの
**Debain系**→Ubuntu,Linux Mint
**Red Hat系**→CentOS,Amazon Linux

####パッケージ

Linuxでアプリケーションをインストールする際の形態。
Linuxはソースコードの状態で公開されているため、このままではユーザーがバイナリの形にコンパイルする必要がある。ここで利便性を高めるためにあらかじめコンパイルされたバイナリといくつかの必要なファイルをひとまとめにしたものが「パッケージ」。
パッケージのインストールやアンインストールや管理を効率的に行うために、RPM・Yum・Apt・DFNというパッケージ管理ツールを用いてインストールすることが基本となる。
Windowsではインストーラー、Macではdmgという形でアプリケーションをインストールする。

####シェル
 
Linuxを操作するためにコマンドを打つところ。
シェルは、ユーザーからのコマンドを通訳してカーネルに渡したり、カーネルからのメッセージを通訳して出力したりする。
bash、sh、zshなどがある。
windowsではコマンドプロント、PowerShellなどが該当する。

####コマンド

シェルを通してLinuxを操作するときの、その命令のこと。

以下に代表的なものを紹介します。


ユーザー作成：```useradd```
ユーザー削除： ```userdel```
パスワード設定：```passwd```
ユーザ切り替え：```su```

カレントディレクトリ移動：```cd```
所有者変更：```chown```
権限変更：```chmod```
コピー： ```cp```
検索： ```find```
一覧表示： ```ls```
移動：```mv```
削除： ```rm```

ファイル内表示： ```cat```
ファイル内検索： ```grep```
ファイル編集： ```vim```

####ミドルウェア

アプリケーションとOSの中間的な処理を行うソフトウェアのこと。


OSだけでは業務に求められるほどの機能は備えていないが、ミドルウェアをインストールすることで特定の処理や複雑な動作が可能になる。

Apache (Webサーバ)、MySQL (DBサーバ) などのことをさす。

##終わりに
Linuxについてまだ未学習の方やうる覚えの新人エンジニアさんにはここだけは抑えておきましょう！という指標にはなるかと思われます。
お役に立てれば光栄です。
素人によるワーシャルフロイド法

##ワーシャルフロイド法
　最短経路問題で使われるアルゴリズムの１つ。負の閉路がない限り、負の辺があっても使える。グラフ上の全ての頂点間の最短経路を探すので、計算量は$O(V^3)$となる。

　ワーシャルフロイド法はその名前から難しそうな印象があって避けていた。しかし、最近競プロの精進中に実装する機会がチラホラあり、実装してみると思ったよりも簡単だったのでびっくりした。ワーシャルフロイド法が必要となった方は簡単な実装なので恐れず調べてみてほしい。

##今回すること
　ワーシャルフロイド法は実装が簡単だが、その裏でどんな振る舞いをしているのかイマイチ掴めなかった。簡単に最短経路を求められるといっても、裏の仕組みを知らずに使うのは自分としてはどうも気持ちが悪い。今回はいろいろ手を動かしてみながら、仕組みの理解を試みる。

##C++によるコード
　まずはワーシャルフロイド法のコードを見てみる。

```cpp
void warshall_floyd(int n) {
  for (int k = 0; k < n; k++){       // 経由する頂点
    for (int i = 0; i < n; i++) {    // 始点
      for (int j = 0; j < n; j++) {  // 終点
        d[i][j] = min(d[i][j], d[i][k] + d[k][j]);
      }
    }
  }
}
```
　上記がC++によるワーシャルフロイド法の実装だ。グラフの表現は隣接行列。配列d[a][b]には頂点a,b間の辺のコストを入れておき、$a = b$の時は０を、a,b間の辺が存在しないときはINFを入れておく。アルゴリズムとしては、頂点iから頂点jへの経路と、頂点kを経由した場合の経路とを比較してよりコストの合計が小さい方を配列に入れる動的計画法を使っている。

　見た目は単純な３重ループ。初めて競プロでこれを実装してACした時は簡単にできすぎて呆気にとられた。

　次にこのプログラムがどんな振る舞いをしているのか確認してみよう。

##実際に確かめてみよう！
　まずは図を書きながら確かめる。
![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299664/dceea07c-f937-1e28-9a2e-edabb86fb26a.png)
　左が今回使うグラフで、右がそのグラフの隣接行列表現だ。早速手を動かしてみる。
　$k = 0, i = 0$のとき
![201.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299664/532960f0-e15c-565e-5263-139f55d48221.png)
　$k = 0, i = 1$のとき
![301.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299664/bb600e66-43c7-ec7a-6bd4-2647c39cb921.png)
　$k = 0, i = 2$のとき
![401.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299664/c274acfa-07c1-a0bc-7afc-ddbbbc4a7f15.png)
　$k = 0, i = 3$のとき
![501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299664/e5892829-f548-4e82-7e6d-e858a4f93c5c.png)

　確かに最短経路が更新されている…。でもイマイチ納得できないので別の角度から見てみる。
![1559916647mcx0DvqtfTeLkcj1559916639.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299664/62f7d7e8-2f69-07a7-fe01-0fba7547f770.gif)
　GIF画像を作ってみた。範囲は上の図でやったように$k = 0, i = 0$ から $k = 0, i = 4$の範囲だ。これを見ると規則的に動きながら最短経路が更新されている。

　始点、中継地、終点の組み合わせを全部試しながら確かに最短経路を求めている。

##おわり
　始点、中継地、終点の全探索であるというのは３重ループのあのコードから明らかではあるけれど、あまりに実装が簡単すぎてこれが本当に最短経路を求めるアルゴリズムなのか疑ってしまった。その飲み込みの悪さのためにこんな図まで作ってしまった（もっと要領よくなりたい…）。私と同じようにワーシャルフロイド法をそのまま飲み込みきれず、同じような疑いを持った人がこの記事を読んで理解の助けにしてくれれば今回の私の行為も無駄にならずに済んだと慰めることができるだろう…。

##参考文献
『プログラミングコンテスト攻略のためのアルゴリズムとデータ構造』
Unityにうまくモデルをインポートできない



#問題点
3DCGソフトBlenderで制作した3DモデルをゲームエンジンUnityにインポートした際に、以下のように一部の子オブジェクトが透過してしまう。
![1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432823/72135b9d-f536-1734-6a8c-9963980db924.png)

#解決手順
###Blenderでの作業
1.Blenderを開き、インポートしたいモデルを開く。
![1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432823/9653faef-5f4a-143a-44be-22fa81d1e280.png)

2.画面左下のバーをクリックして、編集モードに変更する。
![1-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432823/8438a24c-5411-424b-489e-b14d150e3a88.png)

3.Nキーを押してトランスフォームフィールドを表示させる。
![1-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432823/d83a822b-58c1-41a7-b458-3a1ed8354809.png)

4.トランスフォームフィールド＞メッシュ表示＞法線の面ボタンを押す。
![1-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432823/c10babf2-0631-343d-ff00-1c6b64248ef3.png)

5.Ctrl+Nを押すと自動的に法線ベクトルを外側に設定してくれる。
![1-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432823/ddeeb4d6-aa62-ead4-f3d6-b177a2cc8b9a.png)

6.ファイル＞エクスポートよりすきなファイル形式で出力する。

###Unityでの作業
1.Asset>Import new assetより6でエクスポートしたオブジェクトをインポートする。
![1-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432823/92d29a78-9f60-6777-e00b-cebeff1a16ed.png)

2.ちゃんと表示される！！！天才！！神！

#おわりに
躓いた問題が大きければ大きい程、達成したとの満足感が大きくいため、もっと開発したい欲が湧きますよね！
プログラマやデザイナに共通して言えますよね！ではまた次の機会で！
クイズをランダムに出題する方法

#はじめに
　こちらの記事はCSVファイルによるクイズのデータの読み込みが前提となります。CSVファイルに関しましては以下の記事をご参照ください。
　https://hakonebox.hatenablog.com/entry/2018/05/17/010407

#概要
　`List`と`Random.Range`を用いることでCSVファイルにあるクイズのデータをランダムに抽出、並び替えて表示します。これによりクイズゲームにおいてクイズを毎回ランダムに出題することができます。

#前提
以下のようなcsvファイルを`csvDatas`として読み込んでいます。今回はここからランダムに出題していきます！

```
タイトル,問題,選択肢1(答え),選択肢2,選択肢3
1,世界遺産が最も多い国は？,イタリア,フランス,中国
2,「テンパる」 はどのゲームの用語から生まれた言葉？,麻雀,囲碁,ポーカー
・・・・・・・
30,次のうちJR山手線にない駅は？,汐留,田端,目白
```
#スクリプト
まず、以下のように関数を定義します。

```C#
List<int> GetRandomList(){
		List<int> randomList = new List<int>();
		while(randomList.Count < 5){
			int y = Random.Range(1,31);
			if(!randomList.Contains(y)){
				randomList.Add(y);
			}
		}
		return randomList;	
	}
```

これにより、1~30の数字からランダムに５つ取り出して新たにListを作成することができるので、これを実際にListに紐づけます。

```C#
public List<int> randomQuiz;
randomQuiz = GetRandomList();
```


そして、この新たなListを以下のように利用して`quizText`にクイズを表示させます。

```C#
quizText.text = csvDatas[randomQuiz[0]][1];
```

#ちょっと細かい解説
以下の部分の詳しい解説をします。興味のある方だけお読みください。

```C#
while(randomList.Count < 5){
  int y = Random.Range(1,31);
  if(!randomList.Contains(y)){
    randomList.Add(y);
  }
}
```
1行目は`randomList`の要素数が5個になるまで以下の処理を続けるという意味です。
2行目は`Random.Range`を利用して、1~30のうちランダムに１つの数をyに代入するという意味です。
3,4行目はもし`randomList`の要素に上で代入したyが含まれていなければ新たにyを`randomList`に追加するという意味です。3行目の条件があることで数字の被りを防止しています。
	
#終わりに
今回紹介したランダムな数字のListを作成する方法はクイズだけでなく様々な場面で活用することができると思います。ぜひ応用してみてください！
滑らかな左右の移動

今回は僕が実際に作ったレースゲームを例に挙げCoroutineとIEnumeratorの使い方について紹介していきます。
#レースゲームの概要
コースはレーンになっており、ボタンも押すと隣のレーンに滑らかに移動できるようになっています。
はじめの移動は早く、最後はゆっくり動くようにしました。
gihなので少し滑らかさ無いように見えますが、もっと滑らかに動きます。


![Qiita用.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431503/2d08479a-70bf-ed96-1ea4-2ead569c3eb0.gif)

#Coroutine
コルーチンとは『フレームを跨いで処理を中断・再開させることが出来る仕組み』です。
例えば、通常for文の繰り返し処理３０回を処理しようとすると、３０回の処理を全て同じ１フレームで行います。
これをコルーチンを用いることで、３０回の処理を３０フレームなど分けて処理することができます。

#ゲームのコード
十字キーのRightキーを押した時の処理を取り上げてみます。

RightKeyを押したら、（Horisontal1)というコルーチンを実行します。

```php
void Update ()
	{
		float pos_x = transform.position.x;

		if (Input.GetKeyDown (KeyCode.RightArrow)) {
			if (pos_x < 4) {
				StartCoroutine(Horizontal1());
			}
		}
    }
```

for文の処理回数はiが１０の時、９の時、８の時、...１の時まで１０回の処理があります。
この１０回の処理で３.７右に移動したいです。

３.７の距離を５５等分して、iが１０の時５５等分のうち１０だけ右に移動する、次はiが９の時５５等分のうち９だけ右に進む、その次はiが８の時....とやっていくと丁度１０回の処理で３.７右に進むことができます。
これで徐々に進む距離が減っているので最初は早く、最後はゆっくり進むことができました。




```php
				
private IEnumerator Horizontal1()
   {
		for (int i = 10; i > 0; i--) {
			float p = i * 3.7f / 55;
			Vector3 nowPos = transform.position;
			transform.position = new Vector3 (nowPos.x + p, nowPos.y, nowPos.z);
			yield return null;
	     }
     }
```

<img width="810" alt="スクリーンショット 2019-06-13 16.03.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431503/2c1faf8c-5c88-dc5a-db58-228454c6b260.png">


>また変数pを下のようにする事で等速で左右に移動したり、for文の条件を変える事で徐々に早く動くようにもできます。
>
```php
float p = 3.7f / 10;
```
```php
for(i = 1; i <11; i++)
```




これは『ここまでで１フレーム』という意味の文です。




```php

yield return null;
```

>また上の文を下のようにすることで１フレームだけでなく指定した数秒ごとに実行することができます。
>
```php
yield return new WaitForSeconds(秒数);
```
windows10 の OpenSSH で SSH サービスが見つからない

# windows10 の OpenSSH をインストールしても SSH サービスが登録されなかった

sshd (or ssh-agent) の起動でサービスがいないよエラーが発生しているときの対処。

## 現象

[windows 標準の OpenSSH](https://docs.microsoft.com/ja-jp/windows-server/administration/openssh/openssh_install_firstuse) をインストールしてみたら、sshd, ssh-agent サービスが登録されなかった。再現方法もわからない。orz

```powershell
PS C:\WINDOWS\system32> .\where.exe sshd # sshd コマンドはインストールされている
C:\Windows\System32\OpenSSH\sshd.exe
PS C:\WINDOWS\system32> Start-Service sshd
Start-Service : サービス名 'sshd' のサービスが見つかりません。
発生場所 行:1 文字:1
+ Start-Service sshd
+ ~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (sshd:String) [Start-Service], ServiceCommandException
    + FullyQualifiedErrorId : NoServiceFoundForGivenName,Microsoft.PowerShell.Commands.StartServiceCommand

PS C:\WINDOWS\system32>
```

エラーメッセージにもある通り、sshd サービスが登録されていない。そこで[win32-OpenSSH](https://github.com/PowerShell/Win32-OpenSSH/releases)に含まれる install-sshd.ps1 と openssh-events.man を使って sshd, ssh-agent サービスを登録する。

## 対処

install-sshd.ps1 は同梱の sshd.exe, ssh-agent.exe をサービスとして登録するので、そのままでは使用できない。

install-sshd.ps1 の先頭で参照する sshd.exe, ssh-agent.exe を指定しているので、これの向き先を windows にインストールされている sshd.exe, ssh-agent.exe に変更して実行する。

### 変更前

```powershell
$scriptpath = $MyInvocation.MyCommand.Path
$scriptdir = Split-Path $scriptpath

$sshdpath = Join-Path $scriptdir "sshd.exe"
$sshagentpath = Join-Path $scriptdir "ssh-agent.exe"
$etwman = Join-Path $scriptdir "openssh-events.man"
```

### 変更後

```powershell
$scriptpath = $MyInvocation.MyCommand.Path
$scriptdir = Split-Path $scriptpath

$sshdpath = Join-Path $env:SystemRoot "System32\OpenSSH\sshd.exe"
$sshagentpath = Join-Path $env:SystemRoot "System32\OpenSSH\ssh-agent.exe"
$etwman = Join-Path $scriptdir "openssh-events.man"
```
ローカル環境でRancherを立ち上げる

オライリーの「分散システムデザインパターン」のハンズオンを試していて、k8sをローカルで動かしているうちにRancherも触ってみたくなったので調べてみた

# k8sをローカルで動かす

Docker CE for macをインストールして、PreferencesからEnable Kubernetesをonにしておく

# Rancherをローカルで動かす

[Rancherの公式のblog記事](https://rancher.com/blog/2018/2018-05-18-how-to-run-rancher-2-0-on-your-desktop/)があったのでそれを参考にした。

* Dockerに4096MB以上のメモリを割り当てないといけない
* helmを入れろとのことで、[公式](https://helm.sh/docs/using_helm/#installing-helm)見てhomebrewでinstall
* 言われるがままにServiceAccount、ClusterRoleBindingをcreateしてtillerをinitializeし、IngressControllerを追加した
* Cert-Managerのinstallはblogの手順ではうまくいかなかったので[cert-managerのドキュメント](http://docs.cert-manager.io/en/latest/getting-started/install/kubernetes.html)を参考にした
* rancherのレポジトリを落としてきてinstallした
* https://rancher.localhost にアクセス
* ログイン画面が出るのでログイン

ハロー牛さん
<img width="1289" alt="スクリーンショット 2019-06-07 23.42.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56357/e28cc33d-bf78-70ab-d429-0bb4152c1cdf.png">
ゲッターとセッターについて

#1.ゲッターとは
ゲッターとは,インスタンス変数をクラス内から参照するメソッドのことをいう。
以下のようなコードにおいて、本来Rubyではインスタンス変数の値はクラス内からでしか取得することはできない。

```ruby
class Movie
  def initialize(name)
    @name = name
  end
end

obj1 = Movie.new('Forrest Gump')

p obj1.name #=>undefined method `name' for #<Movie:0x00007fd4558526f0 @name="Forrest Gump">
```


そこで、それを可能にするため、クラス内にインスタンス変数を参照する専用のメソッド「ゲッター」を定義する。


```ruby
class Movie
  def initialize(name)
    @name = name
  end

  def getName #「ゲッター」
    @name
  end
end

obj1 = Movie.new('Forrest Gump')

p obj1.getName #=> 'Forrest Gump'
```

#2.セッターとは
セッターとは、インスタンス変数をクラス内で更新するメソッドのことをいう。
以下のようなコードにおいて、セッターにおいてもインスタンス変数の更新もクラス内でしかでない。

```ruby
class Movie
  def initialize(name)
    @name = name
  end
end

obj1 = Movie.new('Forrest Gump')

p obj1.name = 'Fight Club' #=>undefined method `name=' for #<Movie:0x00007ffd4a83b400 @name="Forrest Gump"> (NoMethodError)
```


そこで、それを可能にするため、クラス内にインスタンス変数の内容を更新する専用のメソッド「セッター」を定義する。

```ruby

class Movie
  def initialize(name)
    @name = name
  end

  def changeName=(name) #「セッター」
    @name = name
  end
end

obj1 = Movie.new('Forrest Gump')
obj1.changeName = 'Fight Club'
p obj1.getName #=> 'Fight Club
```
この時、セッターの定義において、
メソッド名の右側に「=()」が必要となる。
　
　　　　　　　　　　　　　　　　　　　　　　　　　　　以上
IoT Healthcare: Revolution in the Industry

The need for IoT healthcare has increased because of an aging population, expensive medical services, and outdated healthcare infrastructure. Affordable and innovative health care is a future reality. The IoT allows us to change this industry fundamentally.

![iot healthcare](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290718/d0c4dee2-cc4e-97a5-9da9-3256b59808f3.png)

The Internet of Things (IoT) or the Internet of Everything (IoE) can be described as a network of interconnected devices. The IoT consists of the whole ecosystem of interconnected gadgets, but not of separate devices. These devices are equipped with different sensors and processors that let information be collected from surrounding environments and sent over the network. This process happens without any human-to-human or human-to-computer interaction.

The use cases of the Internet of Things are numerous – from smart thermostats and bulbs, to car trackers, and even health monitors. For instance, a thermostat can detect the temperature in a room and send data to the cloud. Then, the data can be sent to an application on the user’s device so that they can decide to either turn the temperature up or down through the app or manually. The system can also automatically perform necessary actions based on predefined user preferences with no human interaction. The latter option is named machine-to-machine (M2M) communication.

IoT devices make our life more comfortable and let us automate things that are routine. The next step is the Internet of Medical Things (IoMT) which means penetration into other industries, including healthcare.

![iot in healthcare](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290718/92b613da-27cd-b98f-938e-fac2a637ef29.png)

The adoption of IoT in healthcare is slower, but over the last 10 years, the number of IoT devices in healthcare has grown immensely.

Nowadays, IoT healthcare devices have been introduced in various forms like heart rate, temperature, and blood glucose level monitors on the market. Such devices collect important data and provide doctors with extra insights into symptoms and any human body problems. In such a way it becomes easier to identify issues before they become critical and deliver medical help earlier.

Life expectancy rises and the healthcare costs too and with the help of IoT, we can reduce the cost of healthcare services.

Among early applications of the medical IoT are smart beds, medication dispensers and smart Fridge for vaccines.

Nowadays, there are 3.7 million medical devices that collect and monitor health data. By 2021 the Internet of Medical Things market size will reach $136.8 billion worldwide.

The IoT and healthcare have created incredible solutions for many pressing problems. They reduce health costs and waiting time, and make healthcare and medical checks accessible to everyone from home.

I suggest you should take a look at this [article](https://mlsdev.com/blog/iot-healthcare) to learn more about the most important facts about IoT healthcare. You will find out why the Internet of Medical Things is vital and what benefits it brings along.
機械学習：「 第 7 章： サポートベクターマシーン」 

サポートベクターマシンとは、2クラス分類のための機械学習手法であり、マージン（境界線と最も近いデータ点との距離）を最大化する決定境界（識別面）を求める。
ωTx + b = 0を境界線として各点との距離は、点と直線の距離の公式から
ti(ωTxi + b ) / ||ω||(ti = -1 or 1)
マージンとは決定境界と最も距離の近い点との距離なので
min ti(ωTxi + b ) / ||ω||
サポートベクターマシンとはマージンを最大化することが目標なので目的関数は
max[min ti(ωTxi + b ) / ||ω||]
マージン上の点において、ti(ωTxi + b ) = 1が成り立つとすると、すべての点において
ti(ωTxi + b ) ≧ 1 が成り立ち目的関数は
max [1/ ||ω||]

上記を以下の目的関数と制約条件を設定して解くことで最大マージンに基づく識別面の位置を決定できる。
min 1/2 ||ω||2
ti(ωTxi + b ) ≧ 1
上記はラグランジュ未定乗数法で解くことを考える。
ラグランジュ未定乗数法とは制約付き最適化問題を解くための手法で
制約gi(x) ≧0のもとで、f(x)が最小とxを求めるため、新たな変数λi≧0を用いた関数
L(x,λ) = f(x) – Σλig(x)を定義し、Lをx、λの其々について偏微分したものを=0と置き、連立方程式を解き、答えを求めることである。
意外と知られていないiTerm2の超便利機能

## 意外と知られていないiTerm2の超便利機能
iTerm2で`ls`をした場合、表示されたファイルを開きたいことがあると思います。
`open`コマンドを利用しても良いのですが、ショートカット機能があります。

commandキーを押しながら表示されたファイル・フォルダをクリックすることで開くことができるのです。

ログに現れるURLでも同じです。
是非ご活用ください。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
Prettier 1.18.0 に大きなバグを入れてしまった

今日リリースされたPrettier v 1.18.0で、自分のPRのせいでかなり大きなバグを引き起こしてしまいました。

## 概要

https://github.com/prettier/prettier/issues/6189

[僕の出したPR](https://github.com/prettier/prettier/pull/6115)の影響で、以下のようなバグが起こるようになりました。

拡張子が`.tsx`のファイルで`trailing-comma`オプションを`none`にしていても下のような末尾カンマの挿入が起こるバグです。

```tsx
// Input
function func<T>() {}
interface Interface<T> {}

// Output
function func<T,>() {}
interface Interface<T,> {}
```

バグの原因である僕のPRの本来の目的については[ブログ](https://sosukesuzuki-blog.netlify.com/4tHFHnvGS1BaKgH1ZP7yuO)を読んでいただけると嬉しいです。

## 原因

もともとこの末尾カンマは、型引数が一つのアロー関数のみに対してつけるべきものでしたが、私の実装ではそうなっていませんでした。結果として、`.tsx`のファイルでは通常の関数、インターフェース、タイプエイリアス、などあらゆる型引数受け取る構文に対して末尾カンマを挿入してしまうことになりました。

そしてバグをリリース前に発見できなかった理由ですが、フォーマット結果がファイル名(拡張子が `.tsx` であること)に依存するためにPlayground上でバグを発見できなかったためです。Prettierは https://prettier.io/playground でフォーマットの結果を試してみることができるのですが、これにはファイル名の概念が（現時点では）存在しないため、`.tsx`として解釈されないので、Playgroundで確認しても正しく動いているように見えてしまっていたのです。

## 現在

現在はバージョン 1.18.1 がリリースされ、修正されています。ちなみに、その修正のPRは https://github.com/prettier/prettier/pull/6190 にあります。授業中に死ぬほどドキドキしながら書きました。

## ごめんなさい

本当に申し訳なく思っています。もっと慎重にやります、、、。
Prestoで日付チェックがしたいのだ

# やりたいこと
とある古いデータベースからEMBULKでデータをインポートした。型指定めんどいから全部STRINGで。
このテーブルに誕生日があるから、年齢のセグメントを作りたくて年齢算出しようとしたら苦労した話。

# 年齢の算出は
```sql:generation.sql
DATE_DIFF('year',date_parse(CONCAT(SUBSTR(birthday,1,4),'-',SUBSTR(birthday,5,2),'-',SUBSTR(birthday,7,2)),'%Y-%m-%d') ,localtimestamp)     
```
日付の形に無理やりして、timestampにparseしてlocaltimestampとyearでdiffをとる＝年齢の完成

だが落ちまくる。
>Query 20190605_115121_72231_4gcsi failed: Cannot parse "1935-04-00": Value 0 for dayOfMonth must be in the range [1,30]

# 1935年04月00日生まれがいる
ああもう困った。parseできないよー。
SQLの日付チェックといえばなんだっけな```ISDATE(string)```
>Function isdate not registered

はいおこられました。Prestoにはんなもんない。もううるう年計算含めてコーディングしてやるかーっておもったけどw
いいもん発見

# PRESTOでの日付の妥当性チェックはTRY_CASTで
>try_cast(value AS type) → type
>    Like cast(), but returns null if the cast fails.

https://prestodb.github.io/docs/current/functions/conversion.html
CAST失敗したらNULL返しまっせファンクション。


コレさえ見つかれば、そうですそういうことでした。

```SQL:Try.sql
TRY_CAST(CONCAT(SUBSTR(birthday,1,4),'-',SUBSTR(birthday,5,2),'-',SUBSTR(birthday,7,2)) as date) is not null THEN
DATE_DIFF('year',date_parse(CONCAT(SUBSTR(birthday,1,4),'-',SUBSTR(birthday,5,2),'-',SUBSTR(birthday,7,2)),'%Y-%m-%d') ,localtimestamp)     
```

ちゃんと日付の妥当性チェックしてから処理ができるようになりました。
ちゃんちゃん。
ruby　振り返り

# 繰り返し処理の仕方 while times

``` ruby:while
i =  0
while i < 10 do
 puts "#{i}: hello"
 i += 1
end
```
``` ruby:times
10.times do |i|
    puts "#{i}: hello"
end
```

# eachを使って繰り返す仕方
```ruby:each
(15..20).each do |i|
    p i
end
```

# 永遠に処理を繰り返す loop break next
```ruby:loop
10.times do |i|
    if i == 7 
        next
    end
    p i
end
```

#メソッド
```ruby:method
def sayHi(name)  引数
    puts "hi! #{name}"
end

sayHi("suzuki")
```

#クラス
```ruby:class
class User

    def initialize(name)
        @name = name
    end

    def sayHi
        puts "hi! i am #{@name}"
    end
end

tom = User.new("tom")
tom.sayHi
```

インスタンス変数はクラスの中でならどこでも使える
Jetson NanoにPipenvでTensorFlowをインストール

# はじめに

本記事はJetson NanoにPipenvによりTensorFlowをセットアップするための方法を示したものである。Pythonの環境構築をPipenvで統一しつつある中で、TensorFlowをpip3でインストールしていたことが気になっていたのでPipenvでインストールし直した。

# 準備

基本的なセットアップは「[Jetson Nanoの実験環境のまとめ](https://qiita.com/yamamo-to/items/fc8b91062cb4e115c600)」に従っている。
追加で下記のパッケージをインストールする。

```bash:ターミナル
sudo apt install libhdf5-serial-dev hdf5-tools libhdf5-dev zlib1g-dev zip libjpeg8-dev  
```

# インストール

$HOME/Documents/TensorFlowにインストールする。

```bash:ターミナル
yamamo-to@jetson-nano:~$ mkdir ~/Documents/TensorFlow
yamamo-to@jetson-nano:~$ cd ~/Documents/TensorFlow
yamamo-to@jetson-nano:~/Documents/TensorFlow$
```

このディレクトリに下記の内容でPipfileを置く[^1]。

[^1]: 関係ないパッケージもnvidiaに参照しに行っていたので修正(2019/06/09)。

```:Pipfile
[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true

[[source]]
name = "nvidia"
url = "https://developer.download.nvidia.com/compute/redist/jp/v42"
verify_ssl = true

[dev-packages]

[packages]
numpy = {version="*", index="pypi"}
grpcio = {version="*", index="pypi"}
absl-py = {version="*", index="pypi"}
py-cpuinfo = {version="*", index="pypi"}
psutil = {version="*", index="pypi"}
portpicker = {version="*", index="pypi"}
six = {version="*", index="pypi"}
mock = {version="*", index="pypi"}
requests = {version="*", index="pypi"}
gast = {version="*", index="pypi"}
h5py = {version="*", index="pypi"}
astor = {version="*", index="pypi"}
termcolor = {version="*", index="pypi"}
tensorflow_gpu = {version="==1.13.1+nv19.5", index="nvidia"}

[requires]
python_version = "3.6"

[pipenv]
allow_prereleases = true
```

あとは次のコマンドでインストールされる。

```bash:ターミナル
yamamo-to@jetson-nano:~/Documents/TensorFlow$ pipenv install
```

# 確認

```bash:ターミナル
yamamo-to@jetson-nano:~/Documents/TensorFlow$$ pipenv run python3 -c 'import tensorflow; print(tensorflow.__version__)'
1.13.1
```
UIView, UIScrollView, UITableView の画像キャプチャのシンプルな実装

## 本記事の趣旨
下記の目的に対して、巧妙な実装をしている解説記事が多かったので、よりシンプルな実装を提案するものです。

- 任意の `View` のキャプチャ画像を `UIImage` として取得する
- 任意の `UIScrollView` / `UITableView` のコンテンツ全体の画像を `UIImage` として取得する

万が一うまくいかなかったらコメントで教えていただけると幸いです。

## 方法
### １. 任意の `View` のキャプチャ画像を `UIImage` として取得する

ここでは、`UIView` の extension として記述します。

```swift:UIView+getImage.swift

import UIKit

extension UIView {
    
    func getImage() -> UIImage? {
        // 確実に不透明なら、第２引数は true がよい
        UIGraphicsBeginImageContextWithOptions(self.bounds.size, false, 0.0)
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        self.layer.render(in: context)
        
        let capturedImage: UIImage? = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return capturedImage
    }
}
```

### 2. 任意の UIScrollView / UITableView のコンテンツ全体の画像を UIImage として取得する

キャプチャの瞬間だけ、`UIScrollView` / `UITableView` の `frame.size` を `contentSize` に変更してしまう方針です。
`UItableView` は `UIScrollView` を継承しているので、`UIScrollView` の extension として記述します。
（先ほどの `getImage()` とconflict しないように別名のメソッド (`getContentImage()`) とします。）

```swift:UIScrollView+getContentImage.swift

import UIKit

extension UIScrollView {
    
    func getContentImage() -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(captureSize, false, 0.0)
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        
        // 元の frame.size を記憶
        let originalSize = self.frame.size
        // frame.size を一時的に変更
        self.frame.size = self.contentSize
        self.layer.render(in: context)
        // 元に戻す
        self.frame.size = originalSize
        
        let capturedImage: UIImage? = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext();
        
        return capturedImage
    }
}
```
プルリクのdescriptionに"resolves #issue番号"と書くとマージ時に自動でissueをcloseにしてくれる

タイトルに内容を全て書いてしまった。

# どこに書けば良いのか？
## PRのdescriptionに記載する
プルリクのdescriptionに下記のように記載すると便利(`#1`はissueの番号)
プルリクをマージしたタイミングで、対象のissueをcloseにしてくれる

```
resolves #1
```

<img width="262" alt="スクリーンショット 2019-06-07 22.46.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144753/3d08a803-b2f1-a3c1-f4a4-b09a850da547.png">

`#`を打つと補完してくれます

## PRのタイトルに記載する
タイトルに書いた方がわかりやすいかもなぁ
<img width="803" alt="スクリーンショット 2019-07-24 18.23.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144753/e07adc00-03f6-8843-3942-4193e9734cff.png">



## コミットメッセージに記載する
descriptionに書かなくても、コミットメッセージに記載をしてもOK

```
fix #2
```

<img width="394" alt="スクリーンショット 2019-06-07 22.47.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144753/79c47ba6-5625-532e-b8b1-9a3bd7f7971f.png">

[Gitの最初のコミットは空コミットにしよう](https://qiita.com/NorsteinBekkler/items/b2418cd5e14a52189d19)を読んだので、
プルリクを作るときに、空コミットでこれとか作って置くのは良いかもしれないと思った(やったことはない)

```
git commit --allow-empty -m "fix #2"
```

## resolvesでもfixでもok
なんだかんだ初めて読んだが、Githubの公式のヘルプページに詳細が記載されていた
[キーワードを使って Issue をクローズする](https://help.github.com/ja/articles/closing-issues-using-keywords)

fixでもcloseでもresolvesでもOKらしいです。他のリポジトリ内の Issue をクローズする、複数のissueをクローズすることも可能、詳細は日本語で書いてあるので公式ページへ
Hyper-Vで仮想マシンが起動しない時の対処法

# はじめに

初めてHyper-Vを触った時に、作成した仮想マシンがなぜか起動しない...という謎の現象に陥りました。
同様の事象は色々なサイトでも紹介されていますが、ここでは備忘録として記録しています。

# 発生した現象

Windows10 Pro（64bit）の環境で、以下の手順で仮想マシンを構築しましたが、なぜか正常に起動しませんでした。

1. ［コントロールパネル］>［プログラムと機能］>［Windowsの機能の有効化または無効化］へと進み、［Hyper-V］を有効化する。
2. ［スタートメニュー］>［Windows管理ツール］>［Hyper-Vクイック作成］と進み、LinuxのISOファイルを指定して仮想マシンを作成する。
 * ここではCentOS 6.10を使用。
3. 作成した仮想マシンで［起動］を押しても、仮想マシンが正常に起動しない。
 * 「PXE Network Boot using IPv4 (ESC to cancel) Performing DHCP Negotiation...」というメッセージが表示された所で処理が止まってしまい、しばらく待っていてもそこから先に進めず...
![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312166/3807e0f6-c613-a36c-db9a-d9fc613b738a.png)
4. ここで使用したISOファイルが壊れているのではと疑って、CentOS 7.6（1810）を使って上記1～3の手順を繰り返したものの、やはり正常に起動せず...


# 解決策

* 仮想マシンの設定画面で、［セキュアブートを有効にする］のチェックを外すことで、仮想マシンを正常に起動することができました。
 * よく知られた事象のようですが、何事も初めてだと分からなくて焦りますね...![Bad Request]()

![disabled_secure_boot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312166/79117061-e020-d312-5dd8-bc80b0a5a2a7.png)

# 参考URL

* [Windows10でクライアントHyper-Vを使ってみる。セキュアブートの無効化は忘れずに！](https://i-think-it.net/windows10-hyper-v-1/)
* [Hyper-Vで仮想マシンをたてるまでの手順](https://qiita.com/Kobecow/items/3e20fd5a195dfff39606)
vue-cliのビルドファイルをGitHub Pagesにデプロイ

#1.```vue.config.js``` に正しい ```publicPath``` を設定

```https://<USERNAME>.github.io/``` にデプロイしている場合は、```publicPath```を省略することができる（デフォルトは ```"/"```のため）。

```https://<USERNAME>.github.io/<REPO>/```にデプロイしている場合（例えば、リポジトリが```https://github.com/<USERNAME>/<REPO>```にある場合）、```publicPath```を```"/<REPO>/"``` に設定。

例えば、リポジトリ名が "my-project"の場合、```vue.config.js(config/dev.env.js)``` は次のようになる。

```javascript

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}
```

#2.プロジェクト内で、次の内容で```deploy.sh```を作成し、それを実行してデプロイ

```terminal:deploy.sh
#!/usr/bin/env sh

# エラー
set -e

# build
npm run build

# 出力されたディレクトリに移動
cd dist

# カスタムドメインにデプロイする場合
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# https://<USERNAME>.github.io にデプロイする場合
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# https://<USERNAME>.github.io/<REPO> にデプロイする場合
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
```

シェルスクリプトファイル（deploy.sh）を実行
```chmod 755 deploy.sh```
```./deploy.sh```

これでデプロイが完了です

######Reference
- https://cli.vuejs.org/guide/deployment.html#github-pages
対象のリストからフィルタに含まれない要素を除外する (C#)

# 前提
- Linqは使いたくないものとします。

# やりたいこと
- 対象が`{ B, C, D, E, F }`で、フィルターが`{ A, B, D, E, G, H }`のとき、`{ B, D, E }`を得たいです。

# コード

### 対象のリストを書き替える場合

```cs:
TargetList.RemoveAll (t => !FilterList.Contains (t));
```

### 新しいリストを返す場合

```cs:
var result = TargetList.FindAll (t => FilterList.Contains (t));
```

---

### ダメなやり方
この方法だと、リストを前から順にスキャンするループ中に要素が削除されてズレるので、スキャンから漏れる要素が生じます。

```cs:
for (var i = 0; i < TargetList.Count; i++) {
	if (!FilterList.Contains (target [i])) { TargetList.RemoveAt (i); }
}
```
機械学習：「 第 5 章： アルゴリズム」

k 近傍法とはあらゆる機械学習のアルゴリズムの中で最も単純なものであり、分類問題のための手法である。近傍k個のデータから識別し、k個のクラスラベルの中でも最も多いラベルを割り当てることである。例えば新しいデータを赤色として、近傍には紫2個、黄色が1個あるとすると、紫と識別することである。
k(近傍の範囲にはいる点)を大きくすると結果も変わってくる。
一方k平均法とは与えられたデータをk個の特徴の似ている同士をグループ化（クラスタ）したものに分類する。アルゴリズムは、まず①各クラスタの中心の初期値を設定する。②各データと各クラスタ中心との距離を計算し、距離が最も近いクラスタを割り当てる。
③新しくできたクラスタの平均ベクトル（中心点）を計算する。④②と③を繰り返し、収束するまで中心の更新を行う。①の中心の初期値を変えるとと結果も変わりうるし、kの値をかえると結果もかわる。
VSCodeでHTML/CSSファイルを編集しながらリアルタイムでプレビューする方法

#はじめに
[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしているにのみやです。

この記事では、一からwebページを作ってみる際に、「絵を描くように、ファイルを編集しながらプレビューしたい」と思って調べてみたことをまとめてみました。
プログラミングを始めて二週間ほどなので、間違いも多いと思います。
間違いがあれば、ぜひ教えてください。


#STEP1 Live Serverをインストールする

[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)にアクセスしてインストールします。

#STEP2 セッティングする

１．VSCode左上、ファイル内の自動保存を有効にします。

![2019-06-07 (2)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423451/b2619ed5-843e-881f-dc96-decee9e4962d.jpeg)

２．右下の矢印の部分を「Go Live」にする
![2019-06-07 (1)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423451/9b8bb21e-6c3e-c9d2-3034-5afba3242988.jpeg)

３．プレビューしたいHTMLファイル上で右クリックし、「Open in browser」をクリックします。

![2019-06-07 (3)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423451/ebfb946e-52de-f848-c53c-c9c556b3fb2d.jpeg)


するとブラウザが開き、プレビューできるようになるので、画面分割モードなどにすることで編集しながらリアルタイムでプレビューできます。
※画像ではわかりにくいですが、HTML/CSSファイルを編集して一秒くらいするとブラウザで変更が反映されます。

![2019-06-07 (4)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423451/1b929e48-6ace-aae0-d40d-c7fba7b76fae.jpeg)


#おわりに

ざっと説明しましたが、「わかりにくい！」や「間違えている！」などのご意見がありましたらぜひ教えてください。
Leetcode #147: Insertion Sort List

```swift
func insertionSortList(_ head: ListNode?) -> ListNode? {
    if head == nil {
        return nil
    }
    let dummyHead = ListNode(0)
    dummyHead.next = head
    var nextNode = head?.next
    head?.next = nil
    while nextNode != nil {
        let tmp = nextNode
        nextNode = nextNode?.next
        var pre = dummyHead
        while pre.next != nil && pre.next!.val < tmp!.val {
            if let node = pre.next {
                pre = node
            } else {
                break
            }
        }
        let node = pre.next
        pre.next = tmp
        pre.next?.next = node

    }
    return dummyHead.next
}
```
fluentd+audit.logでのsudo監視

## やりたいこと
踏み台サーバ等でroot作業とかされそうな時、少なくともそれは把握したいという気持ち

## つかうもの
fluentd
auditd(ec2デフォルトならはじめから入ってる)
[auditログのfluent用パーサ](https://github.com/winebarrel/fluent-plugin-filter-parse-audit-log)

auditログはログ種別によって微妙に出力違ったりしてつらい
が、既に偉大なる先人がプラグイン作ってくれてたのでありがたく使う

fluentdやらauditのインストール方法はちょっとぐぐればどっさり出てくるので割愛

## aushapeは？
syslogに載せて使う分には困らないかもしれないけど、自分の場合は専用のログファイルにしたかったので
`--file`オプション使って色々確認したところ、audit設定のローテートとは特に関連せず、
ファイルポインタをauditのreboot無しにリセットする方法を少なくとも自分は見つけられなかったので、
ローテートで苦労しそうだなということで利用を断念。

## プラグインインストール
```bash
td-agent-gem install fluent-plugin-filter-parse-audit-log
```
※注 プラグインのgithubにあるREADMEのインストールコマンドはgem名微妙に間違ってる

## 設定(一例)
```yml
<source>
  @type tail
  path /var/log/audit/audit.log
  pos_file /var/log/td-agent/audit.log.pos
  read_from_head true
  <parse>
    @type none
  </parse>
  tag audit
</source>

<filter audit>
  @type parse_audit_log
  flatten true
</filter>

<filter audit>
  @type grep
  <regexp>
    key header_type
    pattern /USER_START/
  </regexp>
  <regexp>
    key body_msg_acct
    pattern /root/
  </regexp>
  <regexp>
    key body_msg_exe
    pattern /\/usr\/bin\/su\"/
  </regexp>
  <regexp>
    key body_msg_res
    pattern /success/
  </regexp>
</filter>

<filter audit>
  @type record_transformer
  enable_ruby
  <record>
    alert_time ${Time.at(record["header_msg"][/[0-9]+/].to_i).to_s}
  </record>
</filter>

<match audit>
  @type slack
  webhook_url [[slack webhook url]]
  channel [[channel]]
  username [[slack username]]
  icon_emoji [[slack icon]]
  color warning
  title "[%s] sudo login"
  title_keys alert_time
  message "With great power comes great responsibility."
  flush_interval 10s
</match>
```
これで誰かがrootなったときにslackへ通知されるようになります
こんなことするくらいならrootになれんようにすりゃええがな説とか色々ありますが、世の中そうはいかんこともあるということで…

grep部分はもっと良い引っ掛け方あるとは思うんだけどまあ一旦これで困らなさそうだしいいかな
remoteIPがあればもっと良いんだけど…

transform部分は失敗すると問答無用で例外吐くのでやらんほうが良い説はあります
Javaをコマンドプロンプト上でコンパイルする

windowsのコマンドプロンプト上でjavaのコンパイル・実行をする機会があり、苦戦したのでまとめました。

```
javac ... javaのコンパイルコマンド
①cdで、まずコンパイルしたいjavaファイルのある場所へ移動する。
②コンパイル
//パッケージのないクラスの場合
javac Test.java

//パッケージのあるクラスの場合
javac pacakage.Test.java

//jarのライブラリを参照してコンパイルしたい場合
※jarの指定時は、フルパスで
javac -classpath C¥test.jar; pacakage.Test.java

//コンパイルしたclassファイルの出力先変更をしたい場合
※javaファイル指定の前に、-dで出力先を指定する、
javac -classpath C¥test.jar; -d C¥local¥classes　pacakage.Test.java
```
C#メモ　非同期main

# ～C# 7.0

```CSharp
using System;
using System.Threading.Tasks;

class Program
{
    static void Main(string[] args)
    {
        MainAsync().Wait();
    }

    private static async Task MainAsync()
    {
        await Task.Delay(2000);
        Console.WriteLine("Hello World!");
    }
}
```

# C# 7.1～

```CSharp
using System;
using System.Threading.Tasks;

class Program
{
    static async Task Main(string[] args)
    {
        await Task.Delay(2000);
        Console.WriteLine("Hello World!");
    }

}
```
機械学習：「 第 4 章： 主成分分析」

主成分分析とは、多変量データのもつ構造をより少数個の指標にまとめる手法のことである。学習データの分散が最大となる方向への線形変換を求めることで、いわばデータを一つ一つ見なくても、データの概要をつかむことができるようになる。
計算は以下の通り。
学習データx = (x1, x2, …xn)Tとし、平均ベクトルを引き算したデータ行列は、
Xave = (x1-xave, x2-xave, …xn-xave)Tとなる。これをもとにn個のデータを係数ベクトルを用いて線形変換すると、
sj = (s1j, s2j-, …xnj)T = Xave aj
この分散値は、
Var(sj)=1/n sj Tsj = 1/n (Xave aj )T (Xave aj ) = 1/n aj T Xave T Xave aj = aj T Var(Xave ) aj
となる。

上記を最大にする最適化問題を解く。ただし、制約をいれないと無限に解があるため
aj T aj　= 1とする。

上記制約付き最適化問題はラグランジュ関数を最大にする係数ベクトルを見つければよい。
ラグランジュ関数：E(aj) = aj T Var(Xave ) aj – λ(aj T aj　– 1)
この関数の微分が0となればよいので、解は、Var(Xave ) aj = λaj
Var(s１)= a1 T Var(Xave ) a = λ1aj T aj = λ1
よって射影ベクトルの向きは固有ベクトル、分散の値は固有値となる。
JavaScriptによる共通HTMLの挿入

JQueryを使わずにheader・footerなどの共通のHTML文をJavaScriptで挿入する方法です。
といっても、innerHTMLで挿入するだけなんですけどね・・・

#HTML
```html:index.html
<!DOCTYPE html>
<html>
<head>
	<title>innerTest</title>
	<script type="text/javascript">
		function header(){
		var h = document.getElementById("header");
		h.innerHTML = "HelloWorld";
	}
	</script>
</head>
<body>
	<div id="header"></div>
	<script type="text/javascript">header();</script>
</body>
</html>

```
anaconda navigaterで作った仮想環境にターミナルで入る方法

anaconda navigatorで作った仮想環境に入る時のコマンドをメモしておく

```
#以下で仮想環境を確認
$ conda info -e 
```



```
#以下で仮想環境をアクチベート
$  source activate (仮想環境名)
```

## 追記1 20190616

```
#以下でアクチベート解除
$ conda deactivate
```

## 追記2 20200130
### fish導入後にsourceコマンドが利用できない場合
現時点では ~/.config/fish/config.fish に以下を追記するだけで対処できます。

```
source (conda info --root)/etc/fish/conf.d/conda.fish
```
そして config.fish を再読み込みし、設定を反映させます。

```
$ source ~/.config/fish/config.fish
```
【LINE Messanging API】プレビュー画像がキャッシュのせいでうまく表示されないときの解決方法

# はじめに
LINEbot開発をしている際にハマったことと解決策のメモ。

【環境】

- PHP(7.3.2)
    - ImageMagick(7.0.7-11)
- Heroku
- LINE Messaging API

# 課題
ユーザのメッセージに応じてサーバに動的に保存した画像をリプライするbotを作っている際に、リプライのプレビュー画像が前回のキャッシュのせいで正しい画像が表示されなかった。

```ruby:before.php
$client->replyMessage(array(
    'replyToken' => $event['replyToken'],
    'messages' => array(
        array(
            'type' => 'image',
            'originalContentUrl' => 'https://' . $_SERVER["HTTP_HOST"] . '/images/' . $userid . 'out.png',
            'previewImageUrl' => 'https://' . $_SERVER["HTTP_HOST"] . '/images/' . $userid . 'out.png',
        ),
    ),
));
```
# 解決方法
`.uniqid()`を画像指定の時につけたらキャッシュが表示されずに、新たに生成された画像が表示された。

```ruby:after.php
$client->replyMessage(array(
    'replyToken' => $event['replyToken'],
    'messages' => array(
        array(
            'type' => 'image',
            'originalContentUrl' => 'https://' . $_SERVER["HTTP_HOST"] . '/images/' . $userid . 'out.png?=' . uniqid(),
            'previewImageUrl' => 'https://' . $_SERVER["HTTP_HOST"] . '/images/' . $userid . 'out.png?=' . uniqid(),
        ),
    ),
));
```
Python個人的メモその4：内包表記編～「1以上10以下の奇数のリスト」を一行で書けますか?～

#内包表記はいいぞ
Pythonは内包表記という書き方ができます．スライスと同じくらい便利なので，これも覚えておきたいです．

# そもそも内包って?
「内包」とは集合論における「内包的記法」に由来します．
高校時代の数学Aなどで習ったと思いますが，集合の表し方には2種類あり，
- 外延的記法
- 内包的記法
があります．

外延的記法は単に集合に属する要素を直接書き下す記法で，
例えば{1,3,5,7,9}のように書きます．

内包的記法はまず集合に属する要素xを宣言したのち，xが満たすべき条件を示します．
例えば{x | xは10以下の奇数}ですね．

# 基本的な内包表記
これをPythonで書くとこのようになります．

```python:set_comprehension
s = {x for x in range(10) if x % 2 == 1}
print(s)  #{1,3,5,7,9}
```
Pythonの内包表記における基本構文は`x for x in 何か`で，後ろにif文などを持ってくることで条件を指定します．
今回はset，つまりpythonにおける集合に対して内包表記を適用しましたが，もちろん{}を[]に変えるだけでリストでも可能です．

### 別解
ちなみに、今回は説明の都合上無理矢理内包表記を使いましたが、別に[第3回 スライス編](https://qiita.com/mizu_waterfield/items/3ea67e90e33d871963fc)で扱ったrangeで書いた方が簡潔です。

```python
print([*range(1,10,2)])  #[1, 3, 5, 7, 9]
```

# 辞書内包表記
辞書型(dict, defaultdictなど)でも内包表記が可能です．

```python:dict_comprehension
from collections import defaultdict

key_list = ['a','bb','ccc','dddd','eeeee']
value_list = [1,2,3,4,5]
#辞書作成
dd = defaultdict(int, zip(key_list, value_list))

#ddにあるもののうち，valueが偶数のものだけ抽出して新たに辞書を作成
dd2 = {key:dd[key] for key in dd if dd[key]%2==0}
print(dd2)  #{'dddd': 4, 'bb': 2}

#ddにあるもののうち，keyの長さが3以上のものだけ抽出して新たに辞書を作成
dd3 = {key:dd[key] for key in dd if len(key) >= 3}
print(dd3)  #{'ccc': 3, 'dddd': 4, 'eeeee': 5}
```

# elseを入れる(三項演算子)
if付きの内包表記にelseを付けることもできます．
しかし**elseを付けると三項演算子扱いになるので似て非なるもの**になります．

```python:if_else_comprehension
#1~40の数字のうち3の倍数と3のつく数字の時だけ処理を変える
fool = [str(i) + '~~!!' if i % 3 == 0 or '3' in str(i) else i for i in range(1,41)]
print(fool)
#[1, 2, '3~~!!', 4, 5, '6~~!!', ... 29, '30~~!!', '31~~!!', '32~~!!', '33~~!!', ... 40]
```

当然30からの勢いが物凄いことになりますね．
それはさておき，if付き内包表記にelseが付くと最初に三項演算子(`処理1 if 処理1を行う条件 else 処理2`)の記述を行った後にforが来ます．if~elseをforの後ろに付けても動きません．紛らわしいですが気を付けましょう．

# 二重内包表記
要はforの部分を二重にできるということです．
以下は二次元配列を一次元配列にする内包表記です．

```python:flatten_comprehension
listA = [[1,2], [3,4], [5,6]]
flat = [flatten for inner in listA for flatten in inner]
print(flatten)  #[1,2,3,4,5,6]
```

初見だと随分見にくいですね．
まず最初のflattenで大きく切れて，そこから二重for文が続いているイメージです．

```python
flat = [
flatten
for inner in listA
    for flatten in inner
]
```

#さいごに
内包表記は確かに簡潔に書けますが，精々これぐらいの複雑さにとどめておかないと可読性が失われます．
用法容量を守って正しく使いましょう．
GANMAの連載漫画「木曜日は君と泣きたい。」が更新されると音声で通知してくれるPythonスクリプトを書いた

#GANMAの連載漫画「木曜日は君と泣きたい。」が投稿される度にお知らせをしてくれるPythonスクリプトを作った。
工藤マコト先生の描く「木曜日は君と泣きたい。」を毎回Twitter巡回で見つけるのが面倒なので、自動的にお知らせするようにしてみた。(2019年6月10日時点バージョン)

##必要なもの
- Tweepy(Pipでインストール)
- mpg123(Homeberw、apt-getでインストール)
- TwitterのAPIに必要な情報

上記のインストールは他のウェブサイトの説明が優秀なので割愛。

###当のコード
```Python
import os
import tweepy

os.chdir(os.path.dirname(__file__))

# 認証キーの設定 https://masatoshihanai.com/php-twitter-bot-01/ を見ながら取得してください
consumer_key = "自分のconsumer_key"
consumer_secret = "自分のcustomer_secret"
access_token = "自分のaccess_token"
access_token_secret = "自分のaccess_tocken_secret"

# OAuth認証
auth = tweepy.OAuthHandler(consumer_key, consumer_secret)
auth.set_access_token(access_token, access_token_secret)

# APIのインスタンスを生成
api = tweepy.API(auth)

#screen_nameには、工藤マコト先生のアカウント名（@抜き）を指定
status_list = api.user_timeline(screen_name="m0721804")
#データベースを使うほどの規模のものではないので、.txtを代わりに使用
with open("database.txt") as f:
    database_number = f.readline().strip()
    # database.txtの数値は最新の話数にしておいてください。
for i, status in enumerate(status_list):
    with open("database_nakitai.txt") as f:
        latest_number = f.readline().strip()
        # print(last_number)
        # last_number = "24"
        if "「木曜日は君と泣きたい。」" + database_number + "話" in status.text:
            print("新規掲載！")
# FF IVの「勝利のファンファーレ(fanfare.mp3)」が流れるようにしているが、
# 任意で好きなmp3ファイルにしてください。
            os.system("mpg123 -C  fanfare.mp3")
            latest_number = int(database_number) + 1
            with open("database_nakitai.txt", "w") as g:
                g.write(str(latest_number))
            break
    if database_number == str(latest_number):
        print("木曜日は君と泣きたい。" + str(latest_number) + "話は既読です。")
        break
```

現時点の最新話は24話なので、database.txt は24としておく。
```database.txt
24
```

実行
```ターミナル
python main.py
```

これで、cronか何かで自動実行するようにすれば、「木曜日は君と泣きたい。」がアップロードされる度に音でお知らせしてくれる。便利！！

#まさかり待ってます！
拡張ユークリッド互除法

RSA暗号にて公開鍵を求める時などで使えます。

$u$ と $v$ の最大公約数

$$
gcd(u, v)
$$

の他に

$$
s u + t u = gcd(u, v)
$$
 
を満たす $s, t$

が求められます。


また、

$$
e \equiv v^{-1} \bmod u
$$

を満たす $e$ が求められます。

競技プログラミングだと

[Atcoder M-SOLUTIONS プロコンオープン C問題](https://atcoder.jp/contests/m-solutions2019/tasks/m_solutions2019_c)

などで使えるのではないでしょうか

```Rust
// 拡張ユークリッド互除法
// 入力: 整数 u, v (u > v > 0)
// 出力: u と v の最大公約数 d (=r0) と, s * u + t * v = d を満たす s, t
// 返り値: e := v^{-1} mod u を満たす e (=t)
fn extended_euclidean(u: i64, v: i64) -> i64 {
    let mut r0 = u;
    let mut r1 = v;
    let mut s0 = 1;
    let mut s1 = 0;
    let mut t0 = 0;
    let mut t1 = 1;
    while r1 != 0 {
        let q = r0 / r1;
        let r = r0 - q * r1;
        let s = s0 - q * s1;
        let t = t0 - q * t1;
        r0 = r1;
        s0 = s1;
        t0 = t1;
        r1 = r;
        s1 = s;
        t1 = t;
    }
    println!("{} * {} + {} * {} = {}", s0, u, t0, v, r0);
    if t0 < 0 {
        t0 + u
    } else {
        t0
    }
}

fn main() {
    assert_eq!(11, extended_euclidean(19, 7));
    // 3 * 19 + -8 * 7 = 1
}
```

# 参考
[Wikipedia](https://en.wikipedia.org/wiki/Extended_Euclidean_algorithm)
UnityAdMobPluginアプデ時のエラー対処方法

## はじめに
AdMobプラグインアップデート後に以下のエラーがiOS/Android共に発生

```
The Google Mobile Ads SDK was initialized incorrectly
```

## 実装環境
- Unity 2019.1.4f1
- Google Mobile Ads Unity Plugin v3.17

## 対処方法
AppIDの設定箇所が重複しているため、以下のファイルの該当部分をコメントアウト
もしくはAppIDをセットする

### iOS

```C#:GoogleMobileAds/Editor/PListProcessor.cs
using System.IO;

using UnityEditor;
using UnityEditor.Callbacks;
using UnityEditor.iOS.Xcode;

public static class PListProcessor
{
    [PostProcessBuild]
    public static void OnPostProcessBuild(BuildTarget buildTarget, string path)
    {
        // Replace with your iOS AdMob app ID. Your AdMob App ID will look
        // similar to this sample ID: ca-app-pub-3940256099942544~1458002511
        
        //以下の部分をコメントアウト
        /*
        string appId = "ADMOB_APPLICATION_ID";

        string plistPath = Path.Combine(path, "Info.plist");
        PlistDocument plist = new PlistDocument();

        plist.ReadFromFile(plistPath);
        plist.root.SetString("GADApplicationIdentifier", appId);
        File.WriteAllText(plistPath, plist.WriteToString());
        */
    }
}
```

### Android

```XML:Plugins/Android/GoogleMobileAdsPlugin/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<!--
This Google Mobile Ads plugin library manifest will get merged with your
application's manifest, adding the necessary activity and permissions
required for displaying ads.
-->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.google.unity.ads"
    android:versionName="1.0"
    android:versionCode="1">
  <uses-sdk android:minSdkVersion="14"
      android:targetSdkVersion="19" />
  <application>
    <uses-library android:required="false" android:name="org.apache.http.legacy"/>
    <!-- Your AdMob App ID will look similar to this sample ID: ca-app-pub-3940256099942544~3347511713 -->

<!-- 以下の部分をコメントアウト -->

<!--    <meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="[ADMOB APPLICATION ID]"/>
 -->
  </application>
</manifest>
```


## 参考リンク
- [Google Mobile Ads Unity Plugin リリースノート](https://github.com/googleads/googleads-mobile-unity/releases)