OmniAICreator/Qiita-1.07M huggingface dataset:
ググって技術調査する時に個人的にやること

# はじめに

この記事は[POL AdventCalender](https://qiita.com/advent-calendar/2019/pol)の5日目の記事です。

はじめまして、[POL（ポル）](https://pol.co.jp)のエンジニアの高橋です。
アドベントカレンダー3記事の内の最初の記事なので、まずは軽いTips記事をさらっと書こうと思います。

## この記事は？

仕事での調べ物時にお世話になるグーグル先生。
この記事では僕個人(+他エンジニアメンバー)が技術調査をする時に良く使う、便利なキーワードを共有します。

## 【キーワード】と用途

### 【vs】他に似た技術があるか調べたい

例えば`react vs`のように`【技術】 vs`でgoogle検索フォームに入力すると、 `react vs angular`, `react vs vuejs` のように検索条件が補完されて、同じ位置付の技術キーワードを把握できます。ライブラリ選定する際に結構使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130513/6ee86cda-421a-c097-7a0e-2c93dd513418.png)

その後はgoogle trendsとかgithubのスター数等で技術のトレンドを調べて、どちらを使うか判断すると良き。

### 【awesome】技術について網羅的な情報がほしい

`react awesome`で検索すると、最初に[GitHubのこのリポジトリ](https://github.com/enaqx/awesome-react)が引っかかり、
:arrow_down: のようなReact関連の情報を網羅的にまとめてくれている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130513/9807baec-2bb0-6df9-b1c6-ea6cb7d45d75.png)

`awesome`というキーワードで特定の技術について網羅的にまとめたサイトを見つけることができるので、派生技術、関連技術の情報を知りたい時に便利です。

### 【example, usage, sample, gist】 技術の具体的な使い方をコードレベルで知りたい

`【技術】 example`や`【技術】 usage`等で検索すると誰かが書いたコードの断片が見つかるので、使い方を把握したい場合に便利です。
※余談ですが、開発時に参考にしたgist等のURLをコミットコメントに記載してあげるとレビュアーに優しいので、文化として世に広まって欲しい。

### 【cheatsheet】 よく使うものを一通り把握したい

`【コマンド】 cheatsheet`で検索すると、頻繁に使う(覚えておきたい)のコマンドが一通り把握できるサイトが見つかるので、特定のコマンド(gitとか)の使い方が思い出せない時や概要レベルで理解したい時にオススメ。

### 【not working】 cssが当たらない時、なんかよくわからんが設定したことが動かない時

cssが当たらない時にこのキーワードでググると他のスタイルの当て方を見つけられる時がある。
他にも「設定したけど動かない〜！」な状況で `hoge not working` でググってStack Overflowの情報に助けられる時がある。(この状況ではもう少し現状を整理しないと問題解決できないことが多いけど…)

### 【problem, issue】 不具合の原因の予想に対して確証となる情報を得たい時

「多分これが不具合の原因だろう」と当たりが付いているけど、修正方針までは見えていない時に、`issue`や`problem`を検索キーワードに組み合わせると解決策まで見つかることがあります。
例えば、 iOS safariでログイン処理がうまくいかない不具合対応時に、

1. 色々デバッグした結果、safariではログイン処理が途中で中断されていて`location.href` が怪しいことに気づく
2. `ios safari location href problem` のようにググってみる
3. 検索結果から似たような事象を踏んでいる人が居ないか、解決策を誰かがコメントしていないか探す

:arrow_up: のように解決できたことがあります。

### 他のPOLメンバーから教えてもらったキーワード
#### 【tips, tricks, techniques】, 【best practices】 by [@yahooshiken](https://twitter.com/yahooshiken)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130513/18cc89f0-d992-156a-c88f-df5bfa667adc.png)
[react-bits](https://github.com/vasanthk/react-bits)
[CSS Tricks](https://css-tricks.com/)

#### 【Codepen】 by [@keng5](https://twitter.com/keng5)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130513/b4475a0a-51aa-537a-b037-d45322bc3d42.png)

### etc...
他にも知っているキーワードや調べ方があれば教えてくれると嬉しいです。
UIViewControllerのアニメーション無しpresent遷移

#はじめに
普段、IOSのアプリ開発をしているゆーすけと言います。
これから備忘録も兼ねてQiitaの記事を投稿していこうと思います！
あまり投稿は慣れてないので多少見辛いかもしれませんが
よろしくお願いします。

#経緯
現在新規アプリの開発に携わっているのですが、
アニメーション無しでViewControllerの遷移をする必要がありました。
今までアニメーション無しの遷移なんてなかなか使ってなかったので
直ぐには方法が思いつかなかったというのが経緯です。

#実装
```swift:FirstViewController.swift
   let secondViewController = UIViewController()
   self.present(secondViewController, animated: false, completion: nil)
```

ポイントはanimatedをfalseにすることです。
falseにすることでアニメーション無しで遷移できます。


普段、何も意識せずanimatedはtrueにしていたので、
それぞれの引数がどんな役割をしているのか、もっと意識して実装しないとなと
改めて感じました。。
Jenkinsのcredentialsをコードで更新する方法

## はじめに
全国のJenkinsおじさんの皆様、こんにちは。
ちょっとJenkinsいじってる系SREエンジニアをやっている@hayaosatoです。

Jenkinsあるあるなのが、Jenkinsおじさんと呼ばれるように`属人化してしまう`ことだと思います。
なぜ属人化するのか、その理由の一つに「Jenkinsでの設定のほとんどがGUIで操作できるから」があるのではないかなと個人的に思っています。

しかし、Jenkinsの設定のほとんどはコード管理することができます。
その中で、今回はcredential情報の管理について書いていこうと思います。

## Jenkinsの起動時実行スクリプト
Jenkinsでは、`$JENKINS_HOME/init.groovy.d/`配下に配置したgroovyスクリプトはJenkinsの起動時に自動的に読み込まれます。
今回はそのJenkinsの起動に実行されるスクリプトでcredentialsの登録をしたいと思います。

## credentialsの登録
credential情報として、以下のようなパスワード一覧のtextファイルを配置します。

```/path/to/credentials.txt
slack-api-token: xxxxxxxxxx: slackのAPIトークンだよ
パスワード1: xxxxxxxx: xxxのパスワードだよ
```

```groovy
import jenkins.model.*
import com.cloudbees.plugins.credentials.*
import com.cloudbees.plugins.credentials.domains.*
import com.cloudbees.plugins.credentials.impl.*
import org.jenkinsci.plugins.plaincredentials.*
import org.jenkinsci.plugins.plaincredentials.impl.*
import hudson.util.Secret
import java.io.BufferedReader
import java.io.FileNotFoundException
import java.io.FileReader
import java.io.IOException
def domain = Domain.global()
def store = Jenkins.instance.getExtensionList("com.cloudbees.plugins.credentials.SystemCredentialsProvider")[0].getStore()
def f = new File("/path/to/credentials.txt") // Jenkins(再)起動前に配置すること。
f.eachLine { line ->
    def secrets = line.split(":")
    def secretId = secrets[0].replaceAll(' ', '')
    def secretPass = secrets[1].replaceAll(' ', '')
    def description = secrets[2].replaceAll(' ', '')
    def secretText = new StringCredentialsImpl(
        CredentialsScope.GLOBAL,
        secretId,
        description,
        Secret.fromString(secretPass)
    )
    store.addCredentials(domain, secretText)
}
```
groovyファイルで、このようにcredentialsのファイルを読み込んで、一つずつcredentialとして登録していくことができます。また、後ろの説明も登録することができます。
一度読み込んだらJenkinsを再起動してもcredentialは消えることはないので、一度読み込んだら消すことをお勧めします。

## 最後に
最近ではGitHubActionsなど、Saasのビルドツールが流行っていますが、セキュリティ上の理由などからまだまだJenkinsは活躍すると思います。
その際にJenkinsおじさんに頼りきってしまうのではなく、IaCで設定をコード管理することで属人化が多少は防げるのではないかなぁと思っております。

## 参考
- [Jenkinsの構築それ全部自動でできるよ](https://qiita.com/fuku2014/items/995cf34afd126a627c22)
[UE4]テクスチャの状況を見張ろう

制作が進んでくると、何かとテクスチャ周りの問題が起きてきますよね。

特に「STREAMING POOL OVER」の警告とかほんともう、トラウマですよね。
<img width="310" alt="2019-12-04_22h12_39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/d699c9d9-b7ce-fb79-8bf3-86b0a03e0629.png">

そんなとき、このシーンで今どんなテクスチャが使われていて、
どんな状況になってるかを調べるのに便利なコンソールコマンドがあります。
<img width="997" alt="2019-12-04_22h13_41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/406d7084-dcee-c14a-6956-2deca7c853f1.png">

それが**「LISTTEXTURES」**。
<img width="595" alt="2019-12-04_21h50_59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/387d2bc9-dd11-6401-de18-4a7cbb9feda7.png">

コンソールコマンドのサジェストには出てこないし、上のように説明もないのですが、
打つと、今使われているテクスチャのリストをずらーーっと出してくれます。
<img width="910" alt="2019-12-04_22h05_09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/d7f72b1b-a7a4-4e4d-80bc-1651d1579e43.png">
解像度だけではなく、圧縮設定や、ストリーミングされてるかなどもわかるので、
テクスチャ設定を間違ってたり、ネックになってるものがないかなどを確認するのにとても便利です。

さらに、もっと見張りたい！
特定のテクスチャがどうなっているかいつだって見守りたい！
という場合は、以下の**「TrackTexture」**というコマンドが便利です。
<img width="590" alt="2019-12-04_21h51_07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/343dc9ee-953b-682d-231d-165dd8734c45.png">
こちらも説明はないのですが、
<img width="299" alt="2019-12-04_22h06_53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/ac2ce9bf-352e-2b03-7053-e6811dda7929.png">
**「TrackTexture」**に続いて、見張りたいテクスチャの名前を入れると、
（例えば今回はライトマップを見張りたいので**Light**とすると）
<img width="1075" alt="2019-12-04_22h07_03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/348822b5-dea9-9f56-6017-cbce84a603a7.png">
その文字列が含まれるテクスチャの状況が変わったら、逐一教えてくれるようになります。

いくら近くによってもボケたままのテクスチャがどうなってるか知りたい、
カメラを切り替えたあと映ってないテクスチャがどうなっていくか確認したい、
など、特定のテクスチャを見張るのにはとても便利です。

ちなみに、**「ListTrackedTextures」**で、今見張っているテクスチャが何だったかを確認できます。
<img width="191" alt="2019-12-04_22h07_14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/319293fc-1b85-e6c2-22c4-47a29a1eeb81.png">
また、**「UntrackTexture」**で見張るのをやめることができます。
<img width="337" alt="2019-12-04_22h07_34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/3d73aa35-4e49-4db7-3275-e16a036574f9.png">

皆様良いテクスチャ警察ライフを！
React x Typescriptで@emotion/coreを使用するために。

cssが認識されずにハマったので共有。
こちらの記事で解決。
cssを認識させるために、jsxに解釈させる必要があるらしい。
[Emotion v10 unusable with pure TypeScript · Issue #1046 · emotion-js/emotion · GitHub](https://github.com/emotion-js/emotion/issues/1046)

### tsconfig.jsonにjsxFactoryを追加
```json
"jsxFactory": "jsx",
```

### コンポーネントファイルごとにpragmaを宣言する
```tsx
/** @jsx jsx */
import { css, jsx } from '@emotion/core';

const theme = css`
    width: 100vw;
    height: 100vh;
    background-color: #000;
`;

const App: React.FC = () => {
  return (
    <div css={theme}>
      <p>hello</p>
    </div>
  );
}

export default App;
```

### pragmaとは？
https://www.gatsbyjs.org/blog/2019-08-02-what-is-jsx-pragma/
> A pragma is a compiler directive. It tells the compiler how it should handle the contents of a file.
> プラグマはコンパイラ指令です。ファイルの内容を処理する方法をコンパイラに指示します。

jsx pragmaはコンパイラにjsxと解釈させるために必要なもの。
npmについて学んだことまとめ

## 目次
1. npmとは
2. npmコマンド

## 今回の学習のゴール
- npmとは何かを知る
- 実際の使い方について知る

## 1. npmとは
- Node Package Managerの略称
- Node.jsのパッケージを管理するツール
- Node.jsをインストールすると、標準パッケージとして一緒にインストールされる
    - パッケージとは、あらかじめ用意された便利な機能をまとめたもの
    - 代表的なパッケージ
        - Express
            - Node.jsのWebアプリケーション開発で利用できるMVCフレームワーク
        - promise
            - 非同期処理を分かりやすく実装できる
        - Socket.io
            - 双方向のリアルタイムアプリケーションを実装できる
- npmでインストールしたパッケージのバージョン情報を`package.json`に格納し、`package.json`からパッケージを一括でインストールすることが出来る
    - `package.json`を一元管理することによりパッケージのバージョン管理を一元化できる
    - `package.json`作成方法

```console
npm init
```
```json:package.json
{
  "name": "npm",
  "version": "1.0.0",
  "description": "This README would normally document whatever steps are necessary to get your application up and running.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://***@bitbucket.org/***/***.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/***/***#readme"
}
```
※説明
  "main" : モジュールの中で最初に呼ばれるスクリプトファイルを指定する
  "scripts" : 任意のshell scriptを実行するエイリアスコマンドを定義できる
  "repository" : ソースコードが管理されている場所を指定する
  "author" : 一人だけ指定（複数の人を配列指定する場合は"contributors"）
  "license" : ライセンス情報
  "homepage" : プロジェクトのホームページURL
  


## 2. npmコマンド
- 動作確認

```console
npm --version
```
- npmでパッケージをインストール
    - プロジェクトのルートディレクトリにパッケージ情報が記載されたpackage.jsonを置きインストールすることで、package.jsonに記載されたパッケージが一括でインストールされる 

```console
npm install <パッケージ名>
```
- インストール済みパッケージを表示
   - -gオプション : 使用しているコンピューター内の全てのパッケージを表示
   - 現在作業中のディレクトリにインストールされたパッケージを表示する場合は-gオプションを外す

```console
npm list -g
```
- パッケージのアップデート
    - package.jsonに記載されているパッケージのバージョンに更新される

```console
npm update
```
- npmを最新にする

```console
npm --version
npm install -g npm
npm rebuild
```
- パッケージをアンインストール

```console
npm un <パッケージ名>
```
- ヘルプ機能

```console
npm help
```


## 参照
- [便利なパッケージ管理ツール！npmとは](https://techacademy.jp/magazine/16105)
- [npm入門 - Qiita](https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea)
- [【初心者向け】NPMとpackage.jsonを概念的に理解する - Qiita](https://qiita.com/righteous/items/e5448cb2e7e11ab7d477)
- [npmのpackage.jsonと依存関係を理解しよう！](https://bagelee.com/programming/npm-package-json-dependencies/)
- [package.jsonの中身を理解する](https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847)
- [package.json - Yarn](https://yarnpkg.com/lang/ja/docs/package-json/)
心理的安全性ゲーム体験会@高松 に行ってきた！

この記事は [Agile459 Advent Calendar 2019](https://adventar.org/calendars/4228) のエントリーです。
# [心理的安全性ゲーム体験会@高松](https://agile459.connpass.com/event/149428/)
心理的安全性ゲーム体験会@高松は、2019/10/18(金)に高松市市民活動センター 会議室1にて開催されました。

以前から、ずーーーっと体験してみたかった心理的安全性ゲームを、やっとむさんこと[安井 力](https://twitter.com/yattom)さんと[GOT](https://twitter.com/got4416)さんのおかげで、念願かなって体験することができましたー:relaxed:
その時感じたことを、やろうやろうと思って残すことができていなかったので、Advent Calendarの力を借りて残すことにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/97760cbb-7ccd-1f4d-a402-73908fcb6121.png)
## Why？
心理的安全性、心理的安全性ゲームがなんたるかは、詳しくはやっとむさんの[心理的安全性ゲーム](https://games.yattom.jp/safety)ホームページをご覧ください。

以下のような理由から心理的安全性を必要としていました。

1. なんとなくの想像でしかなかったものを、ちゃんと教わってみたい
2. 仕事でもきっと役に立つはず！
3. 苦しくなったときの、あの状況をなんとかしたい！

## What did you get?
私たちのチームは、以下のようなテーマと役割でゲームを行いました。

- テーマ：リリース１週間前のホームページ開発
- 役割：
    - お客さん * 2 
    - マネージャー * 1
    - 開発者 * 2

### 1人では状況をよくすることはできない
リリースまで１週間前という状況なので、この段階でのトラブルはみんなごめんです。
状況カードによって、様々なトラブルが発生します。

私は、お客さんの役割にしました。
仕事では開発側なので、こんなお客さんだったらいいなーと、できるだけポジティブな発言を意識してみました。

しかし、前後の発言によって、呼応してくれる人がいなければ、ポジティブな発言も効果がありませんでした。

- 発言する人の、役割や立場も作用しそう
- 個人的な接触での根回しや、それまでの関係性によって効果が違ってくるかも

### 同じ発言も使い方によって違う伝え方ができる
例えば、”ムダだね”という発言カードがあります。
普通に使うと、このカードはネガティブな言葉になってしまいます。

これを、”**ムダだね**なんて言わないで・・・”などのように、応用して使うこともできるそうです。

自分がネガティブだと思ってるカードも、考え方を変えれば苦しい状況を好転させられる使い方ができるかもしれません。

### 心理的安全性は成長するチームに必要
失敗も臆することなく相談できるチームって、心理的安全性の高いチームなんじゃないかなーと思いました。

失敗の報告や相談って、結構勇気がいります。
それは、まだまだ対人的なリスクを感じるチームだからかもしれません。
失敗から学ぶことは多いです。
形式的な報告と、それっぽい対策を考えて終わるのではなく、次に向けてのカイゼンにつなげる、そんなチームがいいなと思いました。
ふりかえりしたいなー

# 感謝！
翌日、岡山に移動にも関わらず、お越しくださったやっとむさんありがとうございました！:relaxed:
開催にご尽力してくださったGOTさんありがとうございました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/bdfdb804-c163-6d37-fafa-72faac3b26f3.png)

# おまけ
心理的安全性チートシート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/ef8c64a0-aecb-7a3b-d751-f6d9767db97c.png)
いよいよ始まり！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/d7d69ac5-3beb-89d0-606e-b9964fa6d010.png)
お願いする会社間違えたと思った瞬間
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/5947d307-c66b-c519-f122-4eb621ae43db.png)
>関連のある考えや感情について人びとが気兼ねなく発言できる雰囲気

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/4a84fa12-5f54-8cd5-3efb-5adfccb918e5.png)
心理的安全性がなぜ学習につながるのか
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/bdba4eb6-2d1c-c4bf-2d0b-d059c3d04a39.png)
集団的学習を促す行動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/c79d0231-51ab-5376-6c4d-eadd3ac8b2c7.png)
モダンアジャイル！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/a4010838-97c4-b7ce-8d83-662ce0334b8f.png)
なにがいいのか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/b5d2e8a9-5bb4-30c6-9871-511136634d0d.png)
フルオープン！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317870/79a67d55-5829-16d9-ac7e-6e79d4bbdd12.png)
VCIを作成するときのメモがメインな感じです

## VCIを作成するときのちょっとしたことを書いていきたいと思います
夜にはバーチャルキャストで配信したり、VCI作ったりしてます。
VCI作ったときにBlender,Unity,Luaで気づいたことは結構あるけど忘れるんですよね。
簡単なメモ代わりだったり、ちょっとした情報を書いていきますのでよろしく。
![20191028-203905_49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/1847c155-f818-cd6b-06e6-67b9700a1bc7.jpeg)

## さいごに
この記事はアドカレに書く前の練習用に書いてみました。
まずはVCIアドカレ2019を2枠分くらい書きますので、しばらくお待ちください。
アドカレはこちらからどうぞ。
https://qiita.com/advent-calendar/2019/vci
Java で DataFrame を使う

### DataFrame ご存知ですか?

DataFrame は Python や R言語でデータを扱ったり、機械学習したいときによく使われるとても便利なライブラリ・オブジェクトです。表形式のデータや2次元の配列のデータを扱うための様々な機能が揃っています。
https://amalog.hateblo.jp/entry/kaggle-pandas-tips

どのくらい便利かというと、Excel や CSV から一気にデータを読み込んだり、2次元配列の任意の行列を抽出したり、表同士を SQL 操作のごとく join したりと、とにかく 2次元データを使う際には欠かせないというレベルです。

でも Java だとこれという DataFrame 相当の実装が無くて、ありがたい DataFrame の恩恵を受けられない、データ処理に時間がかかる、なんで Python じゃないんですかと暴言(?)を吐かれるなどの悲しい目に合うわけです。

### Morpheus data science framework 

しかし、そこに一筋の光が。
Morpheus data science framework が、その DataFrame と(たぶん)同等の機能を提供してくれています。
https://github.com/zavtech/morpheus-core

A Simple Example に沿って試してみましょう。

> Consider a dataset of motor vehicle characteristics accessible here. The code below loads this CSV data into a Morpheus DataFrame, filters the rows to only include those vehicles that have a power to weight ratio > 0.1 (where weight is converted into kilograms), then adds a column to record the relative efficiency between highway and city mileage (MPG), sorts the rows by this newly added column in descending order, and finally records this transformed result to a CSV file.

(このサンプルでは)車の特性データを使用します。CSV を Morpheus DataFrame に読み込み、出力(馬力)重量比が 0.1 を超える条件で行をフィルタし、高速道路/都市部のMPG(燃費?)の比率の列を追加します。追加した列でソートして、結果を CSV ファイルに出力します。

#### サンプルコードと実行結果

```Java
import com.zavtech.morpheus.frame.*;

public class MorpheusTester {

    public static void main(String[] args) {

        DataFrame.read().csv(options -> {
            options.setResource("http://zavtech.com/data/samples/cars93.csv");
            options.setExcludeColumnIndexes(0);
        }).rows().select(row -> {
            double weightKG = row.getDouble("Weight") * 0.453592d;
            double horsepower = row.getDouble("Horsepower");
            return horsepower / weightKG > 0.1d;
        }).cols().add("MPG(Highway/City)", Double.class, v -> {
            double cityMpg = v.row().getDouble("MPG.city");
            double highwayMpg = v.row().getDouble("MPG.highway");
            return highwayMpg / cityMpg;
        }).rows().sort(false, "MPG(Highway/City)").write().csv(options -> {
            options.setFile("./cars93m.csv");
            options.setTitle("DataFrame");
        });

    }
}
```

戻り値の型が DataFrame 型なので、メソッドチェーンで csv(), select(), add(), sort() と続けて実行できます。csv() のあたりはとても DataFrame 感に溢れています。

* 処理前のデータ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323666/74b7a18b-1b9f-9589-7795-aa5a85d07879.png)

* 処理後のデータ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323666/adad85df-f08e-25ee-6ca2-8cea7575f45c.png)

DataFrame は機能が豊富で、同等かどうか試すのも容易ではありませんが、行抽出、列追加、ソートといった操作を確認することができました。

Java でデータ処理される際には、利用を検討してみても良いと思います。
cytanb.luaのススメ 1.導入編

#はじめに
この記事は、[VCI Advent Calendar 2019](https://qiita.com/advent-calendar/2019/vci)の5日目の記事です。

#cytanb.luaはいいぞ
 VCIでluaスクリプトを作成する場合において、 私はほぼ全てのプログラムに[oO](https://twitter.com/oocytanb)さんが作成されているcytanb.luaを使用しています。（ 使っていない時は10行程度のプログラムのみ）
今回は感謝の気持ちをこめて、cytanb.luaの使い方の解説をしていきたいと思います。

cytanb.luaはこちらにあります。
[GitHub - oocytanb/cytanb-vci-lua](https://github.com/oocytanb/cytanb-vci-lua)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150633/38791aab-58c3-67f1-e855-e70f2ac9f441.png)

github の使い方をご存知の方は後はワークスペースフォルダにこちらのデータを入れていただければ OK です。

github の使い方をご存知でない方のためのコピペ重視の導入方法をご紹介します。

#事前に
今回は、こちらの**VCIスクリプトの開発環境の導入**を実施した後という前提で話を進めます。
[vscode:tutorial [VirtualCast]](https://virtualcast.jp/wiki/doku.php?id=vscode:tutorial)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150633/b23217ff-e5d7-0265-c0ab-dd262d4a80e6.png)

#もくじ
cytanb.luaのススメ 1.導入編 - この記事
[cytanb.luaのススメ 2.同一VCIのmessage競合対策](https://qiita.com/feath/items/d52a6ed3c6fa011fb765)
[cytanb.luaのススメ 3.同一VCIのtable転送](https://qiita.com/feath/items/d52a6ed3c6fa011fb765)

#1.cytanb_annotations.luaをワークスペースフォルダに置く
1. [GitHub - oocytanb/cytanb-vci-lua](https://github.com/oocytanb/cytanb-vci-lua)からsrcフォルダを開きます
2. cytanb_annotations.luaファイルを開きます
3. Rawボタンをクリックして全文のみを表示させます
4. Ctrl+Aで全選択して右クリックでコピーします
![cytanb_install.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150633/bb785fd4-f7a4-aadf-597f-c544585ebe7b.gif)

次に、VScodeを開いて、EMBEDDEDSCRIPTWORKSPACEフォルダを選択して、新規ファイルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150633/1db331d5-2910-5419-8a01-fa37b9c40b42.png)
新規ファイルを作成したら、cytanb_annotations.luaというファイル名にします。
(luaファイルでさえあればファイル名は自由だったりしますがこういうとこが大事)
types.luaやtemplate.luaファイルと同じ場所にcytanb_annotations.luaファイルがあることになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150633/fe1973c3-08f1-383a-7bc0-b8101446b729.png)

あとはこのcytanb_annotations.luaファイルを開いて、空欄を右クリックして先程コピーしたテキストを貼り付けたら完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150633/880c648b-cdd3-309b-6efe-4bfdf4174706.png)
これでアノテーション・インテリセンスが効くようになります。
以後は更新されたcytanb_annotations.luaファイルを使用する際にはこのファイルに上書きすればOKです。
#2.cytanb_min.luaを使いたいluaファイルの最初の行に入れる
1. [GitHub - oocytanb/cytanb-vci-lua](https://github.com/oocytanb/cytanb-vci-lua)からsrcフォルダを開きます
2. cytanb_min.luaファイルを開きます
3. Rawボタンをクリックして全文のみを表示させます
4. Ctrl+Aで全選択して右クリックでコピーします
5. 使いたいluaファイルを選択して最初の行に貼り付けます
![cytanb_min.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150633/73e4939b-cd69-d535-ea48-e89ac56551ca.gif)

これで導入は完了です。

##cytanb_annotations.luaの利点は何？
選択肢・解説が出てくるようになります。
![cytanb_annotation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150633/324bea3c-b55b-7d42-aad6-f8ae7cfca79e.gif)

次は、これを使った便利な機能について解説していきます。
MySQL Consistency 論考


# モチベーション

MySQL with InnoDB の一貫性が、なぜ・どのように実現されているのかを、できるだけ簡素にまとめたかったので、忘備録を兼ねて、作成。

# 本文

1. MySQL with InnoDB (以下、単純に MySQL) は、BTree 構造でデータをディスクとメモリにおいて保持する RDB である。
2. MySQL は、 Buffer Pool に対して読み書きを行うことで、操作を高速化する。
   1. Buffer Pool は、メモリ上に展開されたディスクデータの作業場である。
   2. Buffer Pool は、 Page 単位でディスクに対するキャッシュのような振る舞いをする。
3. MySQL における Consistency は、 select 文については MVCC、更新については共有・排他ロックで実現される。
   1. MVCC とは、今現在の Buffer Pool の値ではなく、直近ある時点における値を読みめるようにするための制御のこと。
   2. 更新における共有・排他ロックは、更新の際にデータの走査に利用したインデックスの range と、発見されたレコードそれぞれに対して実施される。
   3. 更新文の中で、実際にデータを書き換えるために捜査した場合は排他ロックがかかり、ただ値を取得するだけの場合には共有ロックがかかる。
      1. ただ値を取得するだけ、とは、例えばサブクエリが該当する。
4. Buffer Pool への更新は、 redo log によって永続化される。
   1. redo log は、 Buffer Pool への更新内容を記録した、 round robin なリングバッファとして機能するファイルである。
      1. これにより、 redo log を再度適用することで、更新内容を復元できる。
   2. Buffer Pool への更新は、まず Innodb Log Buffer (メモリ領域)に溜められ、ある一定程度たまると flush されてディスクに書き込まれる。
      1. 更新 transaction commit の際にも flush は行われる。
   3. redo log 上の通し番号を LSN (Log Sequence Number) という。
   4. トランザクション中の更新文は、 commit の前であっても redo log を作成する。
      1. roll back は、その rollback による変更が redo log に記述される。
5. Buffer Pool の内容自体をディスクへ同期することを checkpoint を作成する、という。
6. MySQL は、 Buffer Pool のページに対して、そのページを最後に更新した際の LSN が、小さいものから順に checkpoint を作成していく。
   1. 永続化後は該当 redo log は不要になり、その領域が再度使える。
      1. redo log がリングバッファなのはこれが理由
7. ロールバックや MVCC での過去データは Undo ログによって実現される。
   1. Undo ログ一覧を History List と呼ぶ
   2. Undo ログは Buffer Pool として作成される。
      1. redo log も付与される。
8. いらなくなった Undo ログを削除することをパージという。
9. レコード削除は、最初は論理削除で、パージのタイミングで物理削除される。

# 最後に

実は、 fuzzy checkpointing がどうして consistent になるのか、はここでは述べられていないし、自分もいまいち理解できていないです。

具体的には、最小未反映 LSN のとある対象ページが、最大 LSN な変更の対象となっていた場合には、そのページを永続化するためにはその最小 LSN ~ 最大 LSN までの変更をすべてディスクに書き出し直さなければならないはずだが、しかしそういう自体が発生した場合の checkpointing がどのように行われていくかが、いまいち自分もわかっていないです。（そして文献もあまり見つからない。。）

誰か詳しい人などいれば、指摘していただけると幸いです m(_ _)m
ReactとReduxで複数のReducerを使う

簡単な機能を実装する場合にはreducerは一つだけでも問題はないですが、
機能が増えるとreducerをモノリスにしておくわけにもいかなくなります。

複数のreducerを機能別に分けて使うにはreduxのCombineReducersを使う方法があります。
使い方のまとめとして投稿します。

# CombineReducersのインポート例

`rootReducer`にreducerを注ぎ込む。
このrootReducerの部分はuseSelectorで取得することができるstateになる。

```index.ts
import { combineReducers } from 'redux'
import {
  FirstReducer,
  SecondReducer,
} from './reducer'

const rootReducer = combineReducers({
  first: FirstReducer,
  second: SecondReducer,
})

export default rootReducer
```

# 各reducerの例

actionのpayloadは対象のreducerが担当するstateの分だけ用意すれば良い。
CombineReducersがそれらを結合してくれる。

```reducer.ts
const initialFirst = {
  hoge: '',
  foo: '',
}
const initialSecond = {
  bar: '',
  baz: '',
}

export const FirstReducer = (
  state: typeof initialFirst,
  action: {
    type: string,
    payload: typeof initialFirst
  }
): typeof initialFirst => {
  switch(action.type) {
    case 'HOGE':
      return {
        ...action.payload,
        hoge: action.payload,
      }
    case 'FOO':
      return {
        ...action.payload,
        foo: action.payload,
      }
    default:
      return state
  }
}

export const SecondReducer = (
  state: typeof initialSecond,
  action: {
    type: string,
    payload: typeof initialSecond
  }
): typeof initialSecond => {
  switch(action.type) {
    case 'BAR':
      return {
        ...action.payload,
        bar: action.payload,
      }
    case 'BAZ':
      return {
        ...action.payload,
        baz: action.payload,
      }
    default:
      return state
  }
}
```

[combineReducers · Redux](https://redux.js.org/api/combinereducers)も参考に。
アップキャスト/ダウンキャスト

初学者ですが、個人的な勉強のため書きました

##アップキャスト

・サブクラスのインスタンスをスーパークラスのオブジェクトに格納することを**アップキャスト**という
・コンパイラは互換性をチェックできればキャストを自動的に行ってくれるので、継承関係であるサブクラスはスーパークラスのすべてのメンバーを保証できるためアップキャストは**暗黙的**に行われる
・スーパークラスとサブクラスに、同じ名前のフィールド変数やメソッドがある場合には、**フィールド変数はスーパークラス、メソッドはサブクラスが優先**される

##ダウンキャスト

・アップキャストとは逆に、サブクラスのオブジェクトにスーパークラスのオブジェクトを格納することを**ダウンキャスト**という
・スーパークラスはサブクラスのすべてのメンバーを保証できないため、スーパークラスからサブクラスにダウンキャストする場合は**明示的に**ダウンキャストを行う必要がある
・アップキャストされていないオブジェクトをダウンキャストすると、ClassCastExceptionの例外が発生するので、**一度アップキャストしてからダウンキャストする必要がある**
・instanceof演算子でオブジェクトが指定したクラス型もしくは指定したクラスを継承しているか比較することでダウンキャストできるか判定できる
格子を使ってRSA暗号を攻撃する。

## 概要
格子理論は、めちゃくちゃ奥が深い。格子にはいろいろな用途があり、１つは**格子暗号の構成**であるが、もう１つは**格子を使った既存暗号への攻撃**である。これを理解するために、
**LLLアルゴリズム**について今一度調べてみようと思う。また、その際に**Howgrave-Grahamの補題**にも出くわしたので簡単にまとめてみる。
参考文献は、[國廣さんの論文](https://www.jstage.jst.go.jp/article/essfr/5/1/5_1_42/_pdf/-char/ja)であり、とてもわかりやすいので
これを読むのをお勧めします。

## 内容

簡単にまとめると、

- 格子は基底を整数倍したものの和で**張られる点の集合**のことである。
- 格子を使って**RSA暗号を攻撃**することができる。
- 格子の重要概念である**基底を簡約化するアルゴリズムがLLL**である。
- **LLLでRSA暗号を攻撃**できる。
- その時に**Howgrave-Grahamの補題**が出てくる。

です。

## LLL アルゴリズム
格子には基底（線形独立なベクトル）が存在し、それらに整数の係数をつけて線形和をとった時に張られる点の集合のことを格子と呼んでいるのだが、それらの**基底は複数存在する**。それらの中で、それらの**ノルムの和が最小となるものを最小基底**と呼ぶが、それを求める問題は**ミンコフスキーの定理**より、NP困難である。

LLLアルゴリズムは、その**格子の最小基底を近似的に求めるアルゴリズム**であり、それが**多項式時間内に解けることが特徴**である。また、格子の次元が低いときは、基底簡約によって最小基底の厳密解が求まることが多い。**LLLアルゴリズムの本質は、Gram-Schmidtの直行化の演算を整数演算で近似すること**である。
具体的なアルゴリズムのステップに関しては、ウィキペディアなどを参照すると書いてある。


## RSA暗号を格子がどう攻撃するか

>格子は、線形独立なベクトルの集合によって定
義される加群である。格子は、暗号攻撃と暗号構
成の双方に用いられてきた。
格子を暗号攻撃の手段として用いる場合、1982
年に提案された LLL アルゴリズム(14)が良く用いら
れる。LLL アルゴリズムは、ナップザック暗号や
特殊なパラメータを用いる場合の RSA 暗号に適
用されてきた。

とあるように、格子理論は暗号攻撃と、暗号構成の２つの側面がある。

攻撃という側面では、格子を使うことである条件下で、RSA暗号の秘密鍵を計算可能であることが知られている。
深くは踏み込まないが、簡単にRSA暗号をおさらいすると、$p, q$を異なる素数として、$N=pq$とし、**公開鍵を$(e,N)$**、 **秘密鍵を$d$**とする。このとき、これらは$ed=1 (mod (p-1)(q-1))$を満たしている。これがRSA暗号の基本である。この鍵ペアを用いて、**暗号化は　$C=M^e mod N$**、 **復号は　$M = C^d mod N$**で求められる。
格子理論が解くことのできる条件とは、この**秘密鍵$d$が比較的小さいパターン**の時であり、$ d = N^\sigma$と書く時に、$\sigma < 0.292$の時である。したがって、全ての場合に攻撃できるわけではないが、この条件下では秘密鍵を求めることができる。

ここでは詳細を省くが、先ほどの鍵ペアが満たす方程式$ed=1 (mod (p-1)(q-1))$を変形すると、$ed-1-k(A-s) = 0 (mod e)$となる。これは$x(A+y) +1 = 0  (mod e) $という方程式に一般化されるが、この方程式は**２変数法付方程式**と呼ばれる。この方程式の解を$\overline{x}, \overline{y} $とした時、これらの解が、$|\overline{x}| < e^\sigma, |\overline{y}| < e^{1/2} $という条件を満たす時、この解を求めることを**Small Inverse Problem**という。ここに格子を使うことができる。
これを求めることは、RSA暗号において秘密鍵を特定の条件下で解けることになるため、格子がRSA暗号を攻撃できるということである。



## このときに出てくるのがLLLとHowgrave-Grahamの補題

上で出てきたような法付きの方程式を解く時には２つのアプローチがある。　

1. **解を直接格子の最短ベクトルに埋め込み、最短ベクトルを導出する方法**
2. **法が外れた代数的にに独立な方程式を複数本導出し、その連立方程式の解を求める方法**

である。1では、格子の最短ベクトルを求めるSVP問題を解くオラクルが必要になり、一般的にこの問題はNP困難（多項式時間で答えが計算できない）であるが、２では理論上は多項式時間内に計算を収めることができる。ここで法付きの方程式から法を外す時に使われるのが、Howgrave-Grahamの補題である。

法付き方程式の**Small Inverse Problemの解**vを使い、それらで構成される基底を設定、つまり格子を決める。その設定された基底を、**LLLアルゴリズムで簡約化し、最小基底を求める**。これにより、最終的に解を求めることができるのである。


## おわりに

細かい導出などは上の参考文献や、ウィキペディアなどにたくさん式が書いてあるのでそちらを参照していただきたいが、格子は暗号構成だけでなく、RSA暗号の攻撃に使われるなど、とても面白かった。もっと勉強していきたい。

おわり。
pythonでポートスキャン

# はじめに
CTFの本でポートスキャンをpythonでできるってことを知り
「え？pythonってそんなのできる？」という好奇心からスタート
その過程でシングルで動かすよりもマルチスレッドのほうが抜群に早いことを知り
せっかくなので比較のために両方残す。

# 気を付ける事
ポートスキャンは外部のサイトにやるのはＮＧなので
実験にあたっては自前のＰＣでVirtualboxを使って仮想サーバを立ち上げて
そこに対してポートスキャンをかました。
そんなわけで↓↓のソースコードで書かれている"10.0.0.2"は自前の仮想サーバのIPです。


# １．シンプルなポートスキャン
参考：https://qiita.com/najayama/items/728682bcae824c902046

一番勉強になったコードはコレ。なんせ無駄が一つもない。
その代わり遅い。逆に遅いからこそ「マルチスレッドの有効性」というもの痛烈に感じることができた。

```python:simple-port-scanner.py
import socket

max_port = 6000
min_port = 1

target_host = input("Input target host name or address: ")

for port in range(min_port, max_port):
    #target_host のポート番号portに接続を試行
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    return_code = sock.connect_ex((target_host, port))
    sock.close()

    #socket.connect_ex は成功すると0を返す
    if return_code == 0:
        print("Port %d open!" % (port))

print("Complete!")
```

# ２．マルチスレッドなポートスキャン
参考：https://www.valuestar.work/news/archives/20

こちらも負けず劣らず無駄がない。
threadをうまく使ってるので死ぬほど早い。１．では１ポートあたり１秒くらいかかっていたので
1~1024ポートやるのに結構な時間を要したがこっちのプログラムだと、３秒程度で処理が終了した。
threadやばい。

今回は突貫で参考にしたのでコード丸写しなため、比較できる形になっていない。
後々比較できるように整形出来たら…いいなぁ

```python:multi-port-scanner.py
import socket
import threading

scan_range = [1, 10000];

host = "10.0.0.2";

threads = [];
ports = [];
isopen = [];

def Run(port, i):
    con = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    return_code = con.connect_ex((host, port))
    con.close()

    if return_code == 0:
        isopen[i] = 1;
    
    
count = 0;
for port in range(scan_range[0], scan_range[1]):
    ports.append(port);
    isopen.append(0);
    thread = threading.Thread(target=Run, args=(port, count));
    thread.start();
    threads.append(thread);
    count = count + 1;

for i in range(len(threads)):
    threads[i].join();
    if isopen[i] == 1:
        print("%d open" % ports[i]);
```

# おわりに
ポートスキャンの勉強のために調べたけど
予想以上に自分の中ではthreadの破壊力が印象に残ってしまった。
後でゆっくりソースコードを眺めて整理することにしよう

～おしまい～
エラーメッセージ出す処理

##エラーメッセージ出す処理

なんか便利そうなの思いついたので備忘録に

```ErrorMessage.java
package listTest;

import java.util.ArrayList;
import java.util.Collection;
import java.util.LinkedList;
import java.util.List;
import java.util.stream.Collectors;

public class ErrorMessage {
	
	public static void main(String[] args) {
		
		// モデルのリストが入力とかされたとする
		List<Model> models = new ArrayList<>();
		
		// 検知されたエラーメッセージを全種類取得
		List<String> eMsgCodes = models.stream()
				.map(ErrorMessage::validationLogic)
				.flatMap(Collection::stream)
				.distinct()
				.collect(Collectors.toList());
		
		// メッセージコードを設定ファイルとかから変換とかして出力的な
		eMsgCodes.forEach(ErrorMessage::viewErrorMessage);
	}
	
	/**
	 * 各要素ごとに入力値チェックをする.
	 * <p>
	 * アノテーションなどではじけないような固有判定.
	 * 
	 * @param model チェック対象のモデル
	 * @return エラー文言のリスト
	 */
	private static List<String> validationLogic(Model model) {
		
		List<String> errorMessages = new LinkedList<>();
		
		// idが0でないエラー
		if (0 != model.getId()) {
			errorMessages.add("MessageCode.001");
		}

		// 名前が〇〇でないエラー
		if (!"???".equals(model.getName())) {
			errorMessages.add("MessageCode.002");
		}

		// アドレスが〇〇でないエラー
		if (!"???".equals(model.getAddress())) {
			errorMessages.add("MessageCode.003");
		}
		
		return errorMessages;
	}
	
	/**
	 * メッセージコードを表示用メッセージに変換して出力.
	 * <p>
	 * 設定ファイルから取得した該当文言を画面に表示する.
	 * 
	 * @param msgCode メッセージコード
	 * @see 設定ファイル
	 */
	private static void viewErrorMessage(String msgCode) {
		System.out.println(msgCode);
	}
}

class Model {
	private int id;
	private String name;
	private String address;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	
}
```

おもにここですね

```ここ.java
		// 検知されたエラーメッセージを全種類取得
		List<String> eMsgCodes = models.stream()
				.map(ErrorMessage::validationLogic)
				.flatMap(Collection::stream)
				.distinct()
				.collect(Collectors.toList());
```

チェック後にエラーメッセージが複数件出るとわかっている場合
ロジック的には引数がmodelで戻り値がListになるわけで
それをすべてstreamにならして、かぶりを排除って処理ですね

わりといい感じなのでは
シェルスクリプト . コマンド

. コマンドは、別のシェルスクリプトを読み込む。
同じプロセス内で読み込むため、共通のシェル変数やシェル関数を読み込むのに使用される。

以下のようなテキストファイルがあったとします。

```bash:abc.conf
VAL=ABC
```

#### . コマンドで読み込んだ場合
コマンドで読み込んだ場合、その定義した変数が読み込まれる。

```bash:dot-command1.sh
. ./abc.conf
echo ${VAL} # ABC
```

#### シェルスクリプトとして読み込んだ場合
一方で、シェルスクリプトとして読み込んだ場合、別のプロセスでその変数が読み込まれるため、読み込み元のシェルではその変数は参照できない。
※シェルスクリプトとして読み込む場合は、そのファイルに実行属性が必要

```bash:dot-command2.sh
./abc.conf
echo ${VAL} # 未定義（参照不可）
```

#### source コマンド
bash では、. コマンドの代わりに source コマンドを使うことも可能。
（source コマンドの方が馴染みがあるかもしれない）

```bash:dot-command3.sh
source ./abc.conf
echo ${VAL} # ABC
```

#### exit コマンド
読み込み先のファイルで exit コマンドが実行されると、呼び出し元のシェルプロセスも終了する。
以下のようなテキストファイルがあったとします。

```bash:abc2.conf
VAL=ABC
exit 0
```
この場合、呼び出し元の echo コマンドが実行されるまでにプロセスが終了してしまう。

```bash:dot-command4.sh
. ./abc2.conf
echo ${VAL} # このコマンドが呼ばれる前（上の行で）プロセス終了
```
p5.js + matter.js で落ち物ゲーっぽいもの

#概要
javascript用の物理演算ライブラリの**衝突判定**について遊びます。
日本語での情報が少ないと感じたので、何かご参考になればと。

#元ネタ
最初に申し上げますが、原型はみんな大好きShiffman先生のものです。
これに色を付けて、同じ色の球を消す衝突判定を付けてみました。
>
https://www.youtube.com/watch?v=urR596FsU68

#目次
1.はじめに
　完成形の紹介。
2.衝突判定
　衝突イベントの記述方法について。
3.GoogleChromeのデベロッパーツール
　何と何が衝突しているかを調べましょう。
4.参考
5.おわりに

#1.はじめに
###完成形
こんなものを作ることを想定して話を進めます。
ここから発展させれば、ツ○ツ○とかぷ○ぷ○みたいなゲームが作れるはずです！
![bowl_game.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245489/c1ab7971-3f4b-d627-1dbf-c60061c5f557.gif)
>ソース
https://editor.p5js.org/Yu-lign/sketches/Avm-ykFxp

#2.衝突判定
こちらを参考に以下のコードを書きました。

>coderblock JavaScript Physics with Matter.js
　（ピンボールのコード　events for when the pinball hits stuff部）
https://codersblock.com/blog/javascript-physics-with-matter-js/

```
  Matter.Events.on(engine, 'collisionStart', function(event) {
      let pairs = event.pairs;  //衝突物がpairs配列に入る
      pairs.forEach(function(pair) {　//pairs配列をすべて見ていくループ
         console.log(pair); //これで何がぶつかっているかがわかる
         if (pair.bodyA.render.fillStyle == pair.bodyB.render.fillStyle) {　 //もしbodyAとbodyBのオブジェクトの色が一緒であれば
　　　　　   //bodyAとbodyBの消去処理を記述する。
         }  
      });
  });
```

どうやら衝突したものが全てpairs配列に格納され、
pairs配列を一つ一つpairに分解して、何と何が衝突したかを調べて行くようです。
そこで、コンソールでpairの中身を吐くようにしてみました。


#3.GoogleChromeのデベロッパーツール（web editorでも見れます）
情報の玉手箱や〜！！！
赤枠で囲ったところにbodyAとbodyBの情報があります。
以下は球と四角（外枠の壁）にぶつかったようですね。
右矢印をクリックしてさらに詳しい情報を見ていくことも可能です。
この情報からif文で衝突判定を書けますね（ここではBodyAとBodyBのrender.fillStyleで色が一致したかを見ている）
<img width="1205" alt="スクリーンショット 2019-12-04 21.46.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245489/2045fcc1-37e3-8a1d-27ea-241c9a373058.png">



#4.参考
>
Shiffman先生のmatter.js解説：https://www.youtube.com/watch?v=urR596FsU68
matter.js衝突判定参考：https://codersblock.com/blog/javascript-physics-with-matter-js/
matter.jsのリファレンス(Events.on(engine, "collisionStart", callback))
https://brm.io/matter-js/docs/classes/Engine.html

####色付け
takawo先生にワークショップで教えて頂いた考え方に基づいています。
→配列に複数色を格納する。色の組み合わせはcolormind等のサイトを参考にする。
>参加したワークショップおよびその資料：https://twitter.com/takawo/status/1173588907662798849
takawo先生HP：http://cenkhor.org/

#5.おわりに
私は非プログラマーですし、Advent Calendarも初参戦で恐る恐る書いてみました！笑
ですが、p5.jsは私みたいなライトなユーザーに広まって欲しいとの思いもあり、
初心者ながら書いてみました。
分かりにくいところあったら、何でも質問下さい。
ご覧頂きありがとうございました。
EtherCATスレーブに使える半導体 (2)

この記事は [EtherCATについて語る Advent Calendar 2019](https://adventar.org/calendars/4097) の5日目です。

昨日は@lipoyangさんの [IoTつくるよ！でのEtherCATに関するFAQ](https://lipoyang.hatenablog.com/entry/2019/12/04/120212) でした。


さて、EtherCATスレーブに使える半導体 (2)ということで、今回は「マイコン内蔵EtherCATスレーブIC」についてまとめていきます。

前回の **[「マイコン外付けEtherCATスレーブIC」](https://qiita.com/nonNoise/items/8caacbaae9d31ffd63e4)**と,
今回の**「マイコン内蔵EtherCATスレーブIC」** との
違いと利点欠点については、また後日まとめます。


##マイコン内蔵EtherCATスレーブIC

###Renesas ルネサス
![スクリーンショット_2019-12-04_21-32-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/4a49b7a6-12f3-6779-3f8a-22f44eed981e.png)

 - [EC-1](https://www.renesas.com/jp/ja/products/factory-automation/ec-1.html)
 
 言わずと知れた国産半導体メーカー「ルネサス」が提供するEtherCATが組み込まれたマイコンという様なIC。
EherCATの機能を持つブロックと、CPUを持つブロックがあり、ワンチップで済むというのが利点なのだろう。
CPUもARM社のCortex-R4を使用するなど、**何か**に狙って出しているような気がする。

![スクリーンショット_2019-12-04_21-38-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/a6c1808e-57a4-31e7-fda0-a815b0a0ebe0.png)

- [RX72M](https://www.renesas.com/jp/ja/products/microcontrollers-microprocessors/rx/rx700/rx72m.html)

こちらは、CPUがRXv3コアが入ったマイコンである。
ブロック図をよく見ると、Ethernetx2 EtherCATx2 と書かれている。
要は、Ethernetのポートが二つあれば、高速にマイコンがパケットを転送してあげれば、EherCATの仕様を満たすことが出来る。というソフトウェアコーディングで実現出来ていると思われる。こういう逃げ道（EtherCATがポシャってもEthernetで生きていける！）はとても良いと思うが、ソフトウェアコーディングなので信頼性に不安が残る。また開発も難儀ナノではないだろうか。


- [RX72M 搭載評価ボード TS-RX72M-COM ](https://www.tessera.co.jp/ts-rx72m-com.html)

TwitterでEtherCAT検索していたら見つけたボード。EtherCATと書いてあるので動くと思うが、ソース類は見当たらず。開発はもうHEWではなくe2 studioで行うようだ。少し気になる。人柱報告期待。

###infineon 
![スクリーンショット_2019-12-04_21-44-54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/31477756-6f7a-1511-f1a6-800274aae979.png)

- [XMC4300](https://www.infineon.com/cms/en/product/promopages/xmc4300_4800-EtherCAT/)

こちらも、CPU内蔵のEtherCATスレーブIC。CPUはARM Cortex-M4が乗っていて、見た目は開発にちょうどよい様に思える。海外の動画を見る限り人気っぽい。
問題は、PHYが外付けで配線が鬼のように大変な所だ。
悪くはないが、サポートするのは大変そう。

###TexasInstruments 

![スクリーンショット_2019-12-04_21-48-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/6c6815c9-d2e2-a45c-dad4-3d63a4bbe829.png)

日本の代理店もやってる！やってる！と言うが、特に専用チップは無い。

強いて言えば、[BeagleBone](https://beagleboard.org/black)でEtherCATが動くという話があり、勿論それはEthernetポートが2つあるためソフトウェアコーディングによる実装だが、それでも動くという話があり、更にTIはBeagleBoneで使われていたCPUからグラフィックやメモリを取っ払い、組込み用に組んだ[AMIC110](http://www.tij.co.jp/tool/jp/TMDXICE110)というのがある。

どういう事かと言うと、**化物**である。

Linux（Ubuntu)がフルに動く様なCPUにEtherCATのスレーブ機能をもたせるのだから、それ以外の演算も計算も余裕で熟せる訳だが、オーバースペック過ぎて開発が進まないだろうし、融通が効かないだろう。ただこのICがあることでTIはEtherCATをやっている事になるのだから、それはある種の**夢のようなIC**という事にしておこうと思う。


-----------------------------------

以上。今回は少し辛口でした。
マイコン内蔵って~~好きな~~使い慣れたマイコン選べないから嫌いなんだよねぇ〜
なので、自分は断然、マイコン外付けのスレーブICがオススメ。
更に、面倒くさいPHYの回路が内蔵のBeckhoff　ET1100とMicrochip LAN9252がオススメ。
各社色んな方針や現場で戦っているので、どれが悪いとかはありませんのでね。皆さんの御判断におまかせします。


それでは、今日はここまで！

ありがとうございました！

北神（@nonnoise)

### 宣伝

ここで紹介した **LAN9252** を使用した評価基板をスイッチサイエンスにて販売しております。
https://www.switch-science.com/catalog/5917/
よろしければご覧頂ければと思います。
ある箇所の型を知りたいとき

## はじめに

Typed Holesです。

IDEと対応したエディタがあればフロートウィンドウで出してくれます。なければコンパイルしてエラー表示から見ましょう。

## やり方

```haskell
func :: String
func = "aaa" <> show 1
```

のとき

```haskell
func :: String
func = "aaa" <> ?show 1
```

とか

```haskell
func :: String
func = "aaa" <> ?show ?1
```

両方につけることもできます。

```haskell:これはできない！
func :: String
func = ?"aaa" <> show 1
```

文字列の前にはハテナつけられないみたいです。こんなときは、

```haskell
func :: String
func = ("aaa" :: ?_) <> show 1
```

こうします。でもこれだとHoleに名前がついていなくて(_)分かりづらいので、

```haskell
func :: String
func = ("aaa" :: ?foo) <> show 1
```

のようにして適当な名前をつけてあげることができます。

## 参照

- https://github.com/paf31/24-days-of-purescript-2016/blob/master/23.markdown
PHPからJavaScriptへの値渡し

##はじめに
PHPからJavaScriptへの値の渡し方を、phtmlで書いてまとめます。
なるべく同じような型として解釈されるように変換しています。

##PHP(string) → JS(string)

```php:test.phtml
<?php
	$foo = 'abcde';
?>

<script>
	let bar = '<?php echo $foo; ?>';
	console.log('typeof: ' + typeof bar);
	console.log('value: ' + bar);
</script>
```

```console.log
typeof: string
value: abcde
```

##PHP(integer) → JS(number)

```php:test.phtml
<?php
	$foo = 12345;
?>

<script>
	let bar = <?php echo $foo; ?>;
	console.log('typeof: ' + typeof bar);
	console.log('value: ' + bar);
</script>
```

```console.log
typeof: number
value: 12345
```

##PHP(boolean) → JS(boolean)

```php:test.phtml
<?php
	$foo = true;
?>

<script>
	let bar = Boolean(<?php echo $foo; ?>);
	console.log('typeof: ' + typeof bar);
	console.log('value: ' + bar);
</script>
```

```console.log
typeof: boolean
value: true
```

##PHP(array) → JS(object)

```php:test.phtml
<?php
	$foo = [1, 2, 3, 4, 5];
	$foo = json_encode($foo);
?>

<script>
	let bar = JSON.parse('<?php echo $foo; ?>');
	console.log('typeof: ' + typeof bar);
	for (let i = 0; i < bar.length; i++) {
		console.log('value: ' + bar[i]);
	}
</script>
```

```console.log
typeof: object
value: 1
value: 2
value: 3
value: 4
value: 5
```

##PHP(array) → JS(object) [連想配列]

```php:test.phtml
<?php
	$foo = ['key' => 'value', 'aaa' => 'bbb'];
	$foo = json_encode($foo);
?>

<script>
	let bar = JSON.parse('<?php echo $foo; ?>');
	console.log('typeof: ' + typeof bar);
	for (let key in bar) {
		console.log(key + ': ' + bar[key]);
	}
</script>
```

```console.log
typeof: object
key: value
aaa: bbb
```

##まとめ
Bool or Array を渡すときは、ひと手間必要です。
JenkinsFileのテンプレ

#テンプレ
JenkinsのPipelineを書くのにテンプレが欲しかったので備忘録に

```
pipeline {
    agent any
	environment {
	// Globalな変数宣言
	}
	stages {
		//	template
		stage ('stage name') {
			when {
				expression {
					// 条件を満たす時のみ実行される
					return true
				}
			}
			environment {
				//このstageでのみ有効な変数宣言
			}
			steps {
				// Timestamperプラグインの出力がされる
				timestamps {
					script {
					}
				}
			}
		}
	}
}
```

## 注意点
`toBoolean()` を使う場合は **Use Groovy Sandbox** のチェックは外すこと
リーダブルコード chapter2

## 情報を名前に込める


- todolist
  - 一目見てわかる具体的なネーミング
  - 接頭辞で、プラスαの意味を込める
  - 一般的、凡庸なネーミングは避ける
  - 意味を込めたネーミング

## 例

- bad

 `get` `size`など。何を`get`するの？何の`size`なの？など疑問がでる

class BinaryTree {
   init Size(){
   }
}

returnする値はnodeなのかmemoryなのかわからない

- good

class BinaryTree {
   init NumNodes（MemoryBytes）(){
   }
}

## 語彙力を高めろ

colofulwordを使えと言っている


# イテレーターの変数 i j など

```ruby
i,j  → club_i member_i


bad

for (int i = 0; i < club.size(); i ++)
    if (clubs[i].members[k] == users[j])

good

for (int club_i = 0; club_i < club.size(); club_i ++)
    if (clubs[club_i].members[member_i] == users[user_id])

```

## 凡庸的なネーミングについて
WROOM-02　WEBページ表示テスト（初投稿）

## 初投稿なのでテストも兼ねてます

### 内容
　IoT的な何かをやってみたくて以前秋月電子で買ったWROOM-02（安かったからこれにした）で、とりあえずLAN内からWiFiを使ってデータを受信してWEBページで表示するものを作ってみたときの記録。

#### Arduino IDEにESP8266(WROOM-02)ボードを追加

- ファイルメニュー/環境設定にある追加のボードマネージャのURLに以下を追加。

```  
http://arduino.esp8266.com/stalbe/package_esp8266com_index.json
```

- ツール/ボードにあるボードマネージャでESP8266を検索し、esp8266 by ESP8266 Communityをインストール 

### 書き込み・実行モードの変更

|ESP|Serial|
|:--|:--|
|3.3V|3.3V|
|GND|GND|
|EN|Pull Up|
|IO15|Pull Down|
|IO2|Pull Up|
|IO0|Pull Up|
|TXD|RX|
|RXD|TX|

* Firm書き込み時はIO0をPull Down

# サンプル

 WROOM-02からADCの値を取得して非同期通信でRaspberrypiで稼働しているWEBページを更新して表示する

### サーバーサイド
 
```PHP:value.php
//データをvalue.txtに保存する
<?php
　$value=$_GET["value"];
　$handle=fopen("value.txt","w");
　fwrite($handle,$value);
　fclose($handle);
?>
```
### データ表示ページ(RaspberryPi上)

```html:sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Read Value</title>
<script>
function start_func(){
    setInterval("loadvalue()",1000);
}
var xmlHttp;
function loadvalue(){
    xmlHttp=new XMLHttpRequest();
    xmlHttp.onreadystatechange=checkstatus;
    xmlHttp.open("POST","./value.txt",true);
    xmlHttp.send(null);
}
function checkstatus(){
    if(xmlHttp.readyState==4&&xmlHttp.status==200){
        var node=document.getElementById("value");
        node.innerHTML=xmlHttp.responseText;
    }
}
</script>
</head>
<body onload="start_func()">
<div id="read">
test
</div>
<p id="value"></p>
</body>
</html>
```

### ノード(WROOM-02)

```
#include<ESP8266WiFi.h>
#include<WiFiClient.h>
const char* ssid="xxxx";
const char* password="xxxx";
const char* server="xxxx";

WiFiClient client;

void connectWiFi();
void connectServer();


void setup() {
  Serial.begin(9600);
  connectWiFi();
  
}

void loop() {
  connectServer();
  delay(5000);
  
}


void connectWiFi() {
  Serial.println("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED){
    delay(500);
  }
}

void connectServer() {

  if(client.connect(server, 80)){
    client.print("GET /home/server/web/value.php?val=1234 HTTP/1.1\r\n");
    client.println("HOST: enter_ip_adress");
    client.println("Connection: close");
    client.println();
  }
}     
```



これでWROOM-02からWiFi経由で1234というデータを送ってWEBページに表示させることができます。
batファイル定期実行方法について

#概要
　本内容は、タスクスケジューラを利用したbatファイルを定期実行させる方法の紹介となります。
　バックグラウンドで実行を行うため、vbsからbatファイル呼び出す内容となります。
　(LinuxのCrontabに設定する様なイメージとなります。)

#事前設定
　あらかじめ実行するbatファイルの準備をお願いします。

#設定内容
　今回の設定方法については、下記2つの設定を行う必要があります。
　①batファイル起動用vbsファイル作成
　②タスクスケジューラに①で作成したvbsファイルの設定実施
　上記が本記事の内容となります。

詳細情報は、下記の通りです。

#batファイル起動用vbsファイル作成

```vb:back.vbs
'バックグラウンド稼働用
Set csc = CreateObject("Wscript.Shell")
csc.run "cmd /c 【バッチファイル名】",0,True
```

　上記内容ですが、至ってシンプルな内容です。
　cmdコマンドを利用して、ウィンドウを表示させずbatファイルを呼び出す内容となります。
　※batファイルのディレクトリがvbsと異なる場合は、絶対パスで記載する必要があります。

#タスクスケジューラ設定方法
　それでは、タスクスケジューラの設定方法を記載します。
　初めに、タスクスケジューラを起動してください。
　※ファイル名を指定して実行より【control schedtasks】で表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527985/d64996ba-0036-4e68-2227-733c7a380c41.png)

　タスクスケジューラ右枠より、【タスクの作成】を選択してください。

##タスクの作成(全般)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527985/ab8fe0c7-33f4-6b69-3500-f8ec121a2881.png)
タスク名及び実行ユーザを設定してください。
※【ユーザがログオンしているかどうかかかわらず実行する】としておくとログオフしても実行されますので便利です。

##タスクの作成(トリガー)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527985/f9dc1c13-4001-bfc2-9a99-f47df4fcdbbb.png)
スケジュール開始時間及び繰り返し間隔を設定してください。
※crontabの様に無期限に繰り返す場合は、継続時間を[無期限]にする事で可能です。
設定完了後、OKを押してください。

##タスクの作成(操作)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527985/bb21b130-df72-e480-9dfd-c1e489579551.png)
先程作成したvbsファイルの絶対パスを入力してください。※2
※2 絶対パスは参照から選んでもOKです。
入力完了後、【引数の追加】・【関数(オプション)】を入力してください。
入力例は、キャプチャでは隠れているため下記に記載しています。

```txt:入力例
引数の追加・・・[cscipt.exe]を入力してください
　　　　　　　　　(本例:cscript.exe)
関数(オプション)・・・vbsファイルが保存されているディレクトリを記載してください。※1
　　　　　　　　　　　　(本例:C:\Users\Administrator\Desktop)
※1 最後の【/】は不要です。本例参照
```

設定完了後は、OKを選択しタスクが登録されているか確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527985/d4b1d023-da68-1df9-67e5-39a1cb962956.png)

正常に登録されていれば、あとは実行されるのを待ちます。
※右枠より【実行】を選択してもOKです。

##本例のテスト結果について
本例のテストで利用しているbatファイルは、別記事で記載している[CloudWatch出力スクリプト](https://qiita.com/0HY4/items/b8614d2c871a0c60cc3c)となります。

設定情報は、下記の通りです。
★本例設定内容
　繰り返し間隔:1分 期限:無期限
　ゴール: 1分毎にCloudWatchに出力されていればOKとなります。

それでは、10～15分程待ってみましょう。

#結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527985/0df1a57f-1b3b-5ff8-116e-cab89e9f5c48.png)
この通り、1分毎にスクリプトが実行されているのでCloudWatchへ値が出力されています。

#今後の改善点
　本内容にログ出力等も加えれば、実行結果がわかりやすくなると考えています。
　実際に私も挑戦しましたが、vbsの実行結果コードしか出力できなかった為
　本記事からは割愛しました。

#参考URL
　・vbsコメントアウト方法
　　http://vbscript.pgtop.net/article/318269716.html
　・タスクスケジューラvbs起動方法
　　https://support.microsoft.com/ja-jp/help/3046977
　　※Microsoft側では関数をフルパスで指定すると記載されていましたが
　　　私はフルパスでは記載しませんでした。(トライ＆エラーおすすめします。)
Pythonの高速フィボナッチ

## こうです(lru_cacheをつかって)

```python
from functools import lru_cache

@lru_cache(maxsize=None)
def fib(n):
    if n <= 1:
        return 1
    return fib(n - 2) + fib(n - 1)
```

## こうです(自作キャッシュでメモ化して)

```python
def fib(n):
    cache = {}
    def impl(ni):
        nonlocal cache
        if ni <= 1:
            return 1
        if ni not in cache:
            cache[ni] = impl(ni - 2) + impl(ni - 1)
        return cache[ni]
    return impl(n)
```

@shiracamusさんからのコメントを元に少し変更したもの↓

```python
def fib(n, cache={0:1, 1:1}):
    if n not in cache:
        cache[n] = fib(n - 2) + fib(n - 1)
    return cache[n]
```

## ⚠️これは遅いです⚠️

```python
def fib(n):
    if n <= 1:
        return 1
    return fib(n - 2) + fib(n - 1)
```
QMLでlegacyなwidgetを使いたい

Python3.7/PySide2/Qt5.13でQMLをはじめました。

とりあえずQMLを読み込んで動かせるためのエントリスクリプトはこんな感じ。

```python:main.py
import sys
import os
import pathlib

from PySide2.QtGui import QGuiApplication, QFont
from PySide2.QtQml import QQmlApplicationEngine

def main() -> int:
    appDir = pathlib.Path(__file__).parent
    app = QGuiApplication(sys.argv)
    app.setFont(QFont('メイリオ', 10))
    engine = QQmlApplicationEngine(os.fspath(appDir / 'view.qml'))
    if not engine.rootObjects():
        sys.exit(-1)
    return app.exec_()

if '__main__' == __name__:
    sys.exit(main())
```

最新 QtQuick.Controls の 2.13 で普通に動かすとこんな感じになる。

```qml:view.qml
import QtQuick 2.13
import QtQuick.Controls 2.13 // 新しいスタイルの 2.x

ApplicationWindow {
    title: "六歌仙"
    width: 400
    height: 300
    visible: true
    Column {
        anchors.fill: parent
        Repeater {
            model: ["僧正遍昭",  "在原業平", "文屋康秀", "喜撰法師", "小野小町", "大友黒主"]
            Button {
                anchors.horizontalCenter: parent.horizontalCenter
                text: modelData
                onClicked: {
                    this.anchors.horizontalCenter = undefined
                    this.parent = null
                }
            }
        }
        move: Transition {
            NumberAnimation {
                properties: "y"
            }
        }
    }
}
```

<img width="201" alt="2019-12-04_21h28_54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136847/8b2eb1b9-9a60-65ee-a297-937cb10e6e55.png">

どうにもこのスタイルが好みじゃないのでlegacyなwidgetを使いたい。
調べたところ QtQuick.Controls を 1.x を import すればいいっぽい。

```qml:view.qml
import QtQuick 2.13
// import QtQuick.Controls 2.13 // 新しいスタイルの 2.x
import QtQuick.Controls 1.4 // legacyスタイルな 1.x

ApplicationWindow {
    title: "六歌仙"
    width: 400
    height: 300
    visible: true
    Column {
        anchors.fill: parent
        Repeater {
            model: ["僧正遍昭",  "在原業平", "文屋康秀", "喜撰法師", "小野小町", "大友黒主"]
            Button {
                anchors.horizontalCenter: parent.horizontalCenter
                text: modelData
                onClicked: {
                    this.anchors.horizontalCenter = undefined
                    this.parent = null
                }
            }
        }
        move: Transition {
            NumberAnimation {
                properties: "y"
            }
        }
    }
}
```

<img width="201" alt="2019-12-04_21h29_11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136847/214a1615-1fb9-dcdf-0f5f-0aad58d29a7d.png">

そうそう。これこれ。