OmniAICreator/Qiita-1.07M huggingface dataset:
こんなKPTになるのだったらやらない方がいい

# なぜこの記事を書くのか
KPTというツールが意味ない！
もうKPTって聞くだけで、イヤだ！というアレルギーにすら感じてるような人に遭遇しました。

自分自身は、**KPTというツールを使い続けてきた結果、思考停止しない人間になれた**んじゃないかと思ってる人であり、そんなことないのになぁーと思ってる人です。

なので、何故そのKPTが上手くいかなかったのか？
きっとこんな、状況に陥って、KPTが回ってない／意味ないと思ってしまってるのではないかという失敗パターンを、想像できる範囲で纏めてみました。

:warning:本記事では、KPTとは？の説明は割愛します

# こんな失敗パターン？
- お客さん側の問題だったり、今の環境では解決策が何も出せないと思い込んでる
:arrow_right: お客さんに相談してみて、問題共有をしてみることから始めてみませんか？

- 塩漬けになってる P が沢山あるパターン
:arrow_right: 過去に出した P が積み上がっているが、現状、困ってなければ、それは P ではないと割り切って捨てる（剥がす）ことも検討してみましょう。整理して優先すべき P に集中してみてはどうでしょうか？

- 「チームで問題を共有する場です」と言ってるのにPMがメンバばっかりに T を求め過ぎてるパターン
:arrow_right: チームの問題と言ってるのに、どこかでメンバの責任だと思ってませんか？PMの立場からも反省することがあったり、サポートしてあげるような T があるんじゃないでしょうか？

- せっかく T を捻り出したのに目の前のスケジュールを優先して実行に移せてないパターン
:arrow_right: T のハードルが高過ぎて実行するには時間が掛かるような内容になってませんか？ハードルを下げて実行できそうな T が他にありませんか？あるいは時間を確保出来るように、上司であったり、お客さんに相談することは出来ないでしょうか？

- 実はPM自身も困っている P があるのだけど、PMだけで解決しなければならないと思い込んでるパターン
:arrow_right: そのPMのプライドとか邪魔していたり、責任感があるが故にPMだけで解決しなきゃいけないと思い込んだりしていて、メンバに助けて欲しいと言えなかったりするパターン。
その問題が解決されないとメンバが影響を受けたりすることになりませんか？
プライドなんか捨て去ってしまってメンバに助けを求めてみましょう！

- ここからは会社の問題だから自分たちで解決する範囲ではないと勝手に思い込んでるパターン
:arrow_right: 会社の問題って放っておいて進むのでしょうか？問題を認識したのであれば、それを解決できそうな役員層とかキーマンとなる人を見つけ出して、問題コミットと解決を促すことから始めてみませんか？

- 一撃必殺で一気に解決出来る、夢のような T を模索してしまうパターン
:arrow_right: そもそも、ちょっとずつ問題を解決していきましょうというツールなので、一撃必殺で解決するなら苦労しないですね。その辺の認識がチーム内でズレてるようでしたら、あらためてチームでKPTを再認識させましょう。
自分的には筋トレと同じような感覚に近いです。スグに効果を求めてはいけません。継続的に行うことによって問題解決能力が高まるのではないかと思います。

- 大人数で実施して P がいっぱい！T が追いつかないパターン
:arrow_right: 自分の感覚としては2～5人までの人数で実施するのが丁度いいです。それ以上の人数の場合は分けて実施てみてはどうでしょうか？
いやいや、分けると中途半端な人数になるし困るよ。チームの問題だからやっぱり全員でやるべきじゃないか？ということであれば下記のような形式で実施してみるのはいかがでしょうか？
① 一週目は、いつもどおりのKPTを実施。P がいっぱい出るので、ファシリテーターの判断で優先度が高い P のみに絞って T を出す。
② 二週目は、新しい KPT は出さずに ① で出した T が実施できているか確認、①で出した KPT を整理する時間に使う。
③ あとは ①、② の繰り返し

# さいごに
失敗パターンを見てみると会社の枠組みであったり、権力が及ぶところではないとか、常識に囚われすぎて T を出せてないようなことが多いんじゃないかと思います。
なので **T を出すにはブレスト形式**で行うようにしたほうが良いと思います。

ファシリテーターとして私が思う重要なスキルは、
**客観的に状況整理できたり、**
**ちょっとでも問題解決が進んだことを実感させてくれること**
だと思います。
上記が出来るようなファシリテーションだとメンバの自信に繋がったり、更なる T を出そうというモチベーションに繋がったりします。
また、K についてはあまり触れてませんでしたが１点挙げると、
目の前の結果だけを、よかったと振り返るのではなく、**なぜうまくいったのかプロセスの方を明確にする**ことの方が重要かと思います。

（少しでもKPTアレルギー克服してもらえるといいなぁ。。。）
Java で XML を pretty print する

## やりたいこと

```xml
<tag><tag>test</tag></tag>
```
のような文字列を

```xml
<tag>
  <tag>test</tag>
</tag>
```
のように pretty format されたものに変換したい。

## 方法

やり方は諸説あるようですが、いくつかを組み合わせて以下のようにしました。

```java

	static public String formatXml(String xml) {
		try {
			InputStream bais = new ByteArrayInputStream(xml.getBytes("utf-8"));
			DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
			DocumentBuilder builder = factory.newDocumentBuilder();
			Document doc = builder.parse(bais);
			doc.setXmlStandalone(true);
			Transformer transformer = TransformerFactory.newInstance().newTransformer();
			transformer.setOutputProperty(OutputKeys.INDENT, "yes");
			transformer.setOutputProperty(OutputKeys.OMIT_XML_DECLARATION, "yes");
			transformer.setOutputProperty("{http://xml.apache.org/xslt}indent-amount", "2");
			StreamResult result = new StreamResult(new StringWriter());
			DOMSource source = new DOMSource(doc);
			transformer.transform(source, result);
			String xmlString = result.getWriter().toString();
			String header = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
			return header + "\n" + xmlString;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return xml;
	}
```

追記

Javaのクラスとしてユーティリティ化してあります。

https://github.com/oyahiroki/nlp4j/blob/master/nlp4j/nlp4j-core/src/main/java/nlp4j/util/XmlUtils.java

Maven Repository にも入れてあります。

https://mvnrepository.com/artifact/org.nlp4j/nlp4j-core

以上。
ブラウザからIME状態を制御する方法

# 概要
WebアプリのUIとしてフォームを作成する場合は、HTMLの`<input>`タグを利用する。
この入力フォームに対して入力を始める前に入力できる文字種に応じた入力モードになるようにIMEを制御したいという要件が（特に業務アプリでは）ありうる。
ここではその方法を解説する。

# 方法
## 一般的な実装
```html
<input type="text" value="" style="ime-mode: active">
```
これでIMEがオンの状態になる。`ime-mode`は以下の値を取りうる。
* `active`: IMEをオンにする。ただし、ユーザはオフにする操作ができる。
* `inactive`: IMEをオフにする。ただし、ユーザはオンにする操作ができる。
* `disabled`: IMEを無効にする。ユーザが状態を変えることはできない。ただし、これは使用してはならない。理由は後述する議論-UXについてを参照。

## 議論
### 対応ブラウザについて
この`ime-mode`というスタイルはCSS3の標準ではない。
そのため、必ずしも全てのブラウザが対応しているわけではないし、これから残るかどうかもわからない。
現在の対応ブラウザは、IE11、Edge、FirefoxでChromeとSafariは対応していない。
また、スマートフォンは全く対応していない。
元々はIEからMS-IMEを制御するためのMicrosoft独自仕様である。

### 代替手段について
非対応ブラウザについても一応の代替手段があるが、全く同じ条件で実装できるわけではない。
これらは実装依存が甚だしいためIME制御のためだけに使用してはならない。

* `<input type="number">` 数値のみ入力可になる。
* `<input type="tel">` 半角英数字のみ入力可になる。スマートフォンの場合は、電話キーパッドになる。
* `<input type="email">` 半角英数字のみ入力可になる。
* `<input type="url">` 半角英数字のみ入力可になる。
* `<input type="password">` 半角英数字のみ入力可になる。さらに、表示がマスクされる。

#### inputmode属性
HTML5.1(WHATWG)の`inputmode`属性はChrome 66以降くらいしか対応していない。このままだとHTML5.2で廃止される可能性がある。

### UXについて
そもそも、基本的な設計指針としてIMEの制御は必要最低限にするべきである。
なぜなら、IMEはブラウザ外でも使用され、その際のモード切替は全てユーザが行っているからである。
WebフォームでIME状態を制御するということはユーザの知らないうちにモードが切り替わっているということであり、このことをユーザに伝える手段がない場合ユーザを混乱させるだけになってしまう。

採用基準として例を挙げると、

* 全角半角どちらも受け付けるフォーム
    * IMEを制御すべきではない。なぜなら、1文字目に全角を入力するか半角を入力するかはユーザ以外選択できないため。
* 全角文字がエラーになるフォーム
    * IMEを制御（この場合、`inactivate`）してもよい。なぜなら、通常IMEをオフにしてから入力するため。ただし、`disabled`（無効）にしてはならない。IMEは全角文字を入力するためにだけ使われるわけではない。例えば、「めあど」を単語登録してメールアドレスを入力しているユーザがいる。
AutoHotkey でクラスを使う

## 定義

AutoHotkey ではクラスを以下のように定義します。

```AutoHotkey:AutoHotkey
class pos{
    __New(x=0, y=0){
        this.x := x
        this.y := y
    }
}
```

これでメンバ変数 x, y を持つクラス pos が定義できました。__New はコンストラクタであり、インスタンスが生成される度に呼ばれます。インスタンス自身にアクセスするには this を使います。
次にインスタンスを生成します。

```AutoHotkey:AutoHotkey
p := new pos(1, 2)
msgbox, % p.x ; -> 1
msgbox, % p.y ; -> 2
```

インスタンスは、`変数 := new クラス名()` の形で生成できます。

## メソッド

メソッドを宣言します。

```AutoHotkey:AutoHotkey
class pos{
    __New(x=0, y=0){
        this.x := x
        this.y := y
    }
    get_angle(){
        return atan(this.y / this.x)
    }
    get_distance(){
        return (this.x ** 2 + this.y ** 2) ** (1 / 2)
    }
}

p := new pos(1, 1)
text := ""
text .= p.x . "`n"
text .= p.y . "`n"
text .= p.get_angle() . "`n"
text .= p.get_distance() . "`n"
msgbox, %text%

; 1
; 1
; 0.785398
; 1.414214
```

メソッドは `インスタンス.メソッド名()` の形で呼ぶことができます。インスタンス自身にアクセスする際には this を使います。

## 継承

継承もできます。

```AutoHotkey:AutoHotkey
class pos{
    __New(x=0, y=0){
        this.x := x
        this.y := y
    }
    get_distance(){
        return (this.x ** 2 + this.y ** 2) ** (1 / 2)
    }
}

class 3pos extends pos{
    __New(x=0, y=0, z=0){
        base.__New(x, y)
        this.z := z
    }
    get_distance(){
        return (this.x ** 2 + this.y ** 2 + this.z ** 2) ** (1 / 2)
    }
}

p := new pos(1, 2)
3p := new 3pos(3, 4, 5)
text := ""
text .= p.get_distance() . "`n"
text .= 3p.get_distance() . "`n"
msgbox, %text%

;2.236068
;7.071068
```

継承は、`class 継承先クラス名 extends 継承元クラス名` と記述することで行うことができます。継承元クラスには base でアクセスできます。

## ゲッター・セッター

メンバ変数を取得・メンバ変数に代入する際に特殊な処理をかませることができます。

```AutoHotkey:AutoHotkey
class pos{
	__New(x=0, y=0){
		this.x := x
        this.y := y
	}
	__Get(name){
		if (name == "distance"){
			return (this.x ** 2 + this.y ** 2) ** (1 / 2)
        }else if (name == "angle"){
            return atan(this.y / this.x)
		}else{
			Object.__Get(this, name)
		}
	}
	__Set(name, value){
		if (name == "distance"){
            angle := this.angle
			this.x := cos(angle) * value
            this.y := sin(angle) * value
			return
        }else if (name == "angle"){
            distance := this.distance
            this.x := cos(value) * distance
            this.y := sin(value) * distance
            return
		}else{
			Object.__Set(this, name, value)
		}
	}
}

p := new pos(1, 1)

text := ""
text .= p.x . "`n"
text .= p.y . "`n"
text .= p.distance . "`n"
text .= p.angle . "`n"

p.distance := 5

text .= p.x . "`n"
text .= p.y . "`n"
text .= p.distance . "`n"
text .= p.angle . "`n"

p.angle := 3.14

text .= p.x . "`n"
text .= p.y . "`n"
text .= p.distance . "`n"
text .= p.angle . "`n"

msgbox, %text%

; 1
; 1
; 1.414214
; 0.785398
; 3.535534
; 3.535534
; 5.000000
; 0.785398
; -4.999994
; 0.007963
; 5.000000
; -0.001593
```

atan の仕様上最後の angle が誤っていますが、本来存在しないメンバ変数 distance, angle への参照、代入が __Set, __Get によって可能になっています。
Solidity v5の引数にあるcalldataについて

solidity v5で関数の引数に　
> function (uint256[] calldata _arg) ...

という記述があり、 calldata??となったのですが、[version5のドキュメント](https://solidity.readthedocs.io/en/develop/050-breaking-changes.html#explicitness-requirements)を見ると、version 5から、struct, array, mappingについてはデータを管理する領域を明示的に指定する必要があるそうです。

これまでは引数にある値はcalldata領域に入ってましたので、引数の配列についてはとりあえずcalldataとしておけば大抵はいいんじゃないでしょうか。
github pagesへNuxtで作ったサイトをデプロイ

github pagesにNuxt.jsで作ったサイトを公開するまでの手順です。
ずっとgithub.ioでポートフォリオ作りたかった。

- 〇〇(ユーザー名).github.ioっていうリポジトリ名にしなくても良かった。
- TravisClっていうツール使った。

# 環境
Mojave 10.14.3（18D109）
node.js v10.11.0
yarn 1.10.1

# 手順
##1. nuxtプロジェクト作る
```sh
$ yarn create nuxt-app portfolio
$ cd portfolio
$ yarn generate
```

##2. プロジェクトの設定変更
```javascript:nuxt.config.js
// 追記
const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
  router: {
    base: '/tetsufe-github-pages/'
  }
} : {}

module.exports = {
  // 省略 だいたいheadの下くらい
  routerBase,
  // 省略
}
```

```json:package.json
"scripts": {
  ...追記
  "build:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt build",
  "generate:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt generate"
},
```

##3. githubにpush

githubに予めリポジトリを作っておきます。

```sh
$ git add -A
$ git commit -m 'first commit'
$ git remote add origin ◯◯(リポジトリのURL)
$ git push -u origin master 
#これ以降のpushコマンドは git push だけでOK
```

##4. Travis CIの設定

###1. ルートディレクトリに.travis.ymlを置く。

```yml:.travis.yml
language: node_js
node_js:
  - "8"

cache:
  directories:
    - "node_modules"

branches:
  only:
  - master

install:
  - yarn install
  - yarn generate

script:
  - echo "Skipping tests"

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_ACCESS_TOKEN  # セキュアとマークされたアクセストークンを travis-ci.org のダッシュボードに設定してください。https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token
  target-branch: gh-pages
  local-dir: dist
  on:
    branch: master
```

###2. githubでアクセストークンを取得する。
[https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line#creating-a-token](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line#creating-a-token)

取得したトークンはあとから使うのでメモしておく。

###3. Travis CIにリポジトリを登録する。
アカウントを持っていなければgithubのアカウントでサインアップする。
[https://travis-ci.com/](https://travis-ci.com/)

リポジトリを登録したら、ダッシュボードにそのリポジトリが表示されるので、「≡」→「setting」と進み、「Environment Variables(環境変数)」で

- Name: GITHUB_ACCESS_TOKEN
- value: 取得したアクセストークン

で「Add」する。

##5. githubへ再度pushするとデプロイされる
```sh
$ git add -A
$ git commit -m "Adding travis deploy configuration"
$ git push
```
デプロイが完了すれば、
```https://◯◯(ユーザ名).github.io/△△(リポジトリ名)/```
で公開されていると思います！

# 参考

- [https://github.com/TetsuFe/my-official-site](https://github.com/TetsuFe/my-official-site)
- [https://knowledge.sakura.ad.jp/3754/](https://knowledge.sakura.ad.jp/3754/)

# あとがき
先輩いわく、
```◯◯(ユーザ名).github.io```
のURLでも設定できるらしいです。
しかもgh-pagesのブランチも作らず、privateリポジトリでもいける。。。だと。。。
[こちら](https://chaos-boy.tokyo/posts/2018-06-04/github_pages/)が参考になるとのこと。
Goモジュールモードでモジュール内に作ったモジュールを扱う

GoModule、大変便利ですね。
便利なのですがちょっと大きめのシステムを組もうとした時に頭を悩ませることが出てくるかと思います。

ちょっと大きめのシステムになると機能別にディレクトリを作って構成を分割したいという要求が出てくるかと思うのですが、
素直にGoModuleを利用するとこういったケースを上手く対応することができないのです。

## 想定する構成

sampleモジュールの中に、module1、module2というsampleモジュールから利用するためのサブモジュールが定義されています。

```
sample/
  module1/
    module1.go
    go.mod
  module2/
    module2.go
    go.mod
  main.go
  go.mod
```

## importする

このような構成にした時、このモジュール内にあるモジュールは呼び出し側からは以下のようにインポートします。

```main.go
package main

import (
	"github.com/sample/module1"
	"github.com/sample/module2"
)
```

このように書くとサブモジュールのコードを取得するためにgithub[^1]へアクセスしてコードを取得してきます。
githubにアクセスするということはgithubへコミットされていないコードは反映されないということです。

一般的に、サブモジュールはその場で変更したら即座に利用側へ反映されてほしいはずです。

## モジュール内モジュールは、ローカルのコードを参照するようにする

この問題は、`go.mod`ファイルに`replace`というキーワードを利用してモジュール名とパスの関連をつくることで解決することができます。

```go.mod
replace (
	github.com/sample/module1 => ./module1
	github.com/sample/module2 => ./module2
)
```

このように書いておくと、GoModuleは以下のようなrequire文を追記してくれ、無事モジュール内モジュールのコードはローカルのコードを参照してビルドしてくれるようになります。

```go.mod
replace (
	github.com/sample/module1 => ./module1
	github.com/sample/module2 => ./module2
)

require (
	github.com/sample/module1  v0.0.0-00010101000000-000000000000
	github.com/sample/module2  v0.0.0-00010101000000-000000000000
)
```

## 参考リンク

- [When should I use the replace directive?](https://github.com/golang/go/wiki/Modules#when-should-i-use-the-replace-directive)

[^1]: この例はgithubを利用しているため、githubと記述しています。
heroku への push時にエラー：Detected sqlite3 gem which is not supported on Heroku

# 前提
heroku は postgresqlに対応しているため、
herokuのrepositoryへpushする際、
productionのRDBMSとして postgresqlを指定する必要がある。

指定したつもりで
# エラー内容
```
remote:  !     Failed to install gems via Bundler.
remote:  !     Detected sqlite3 gem which is not supported on Heroku:
remote:  !     https://devcenter.heroku.com/articles/sqlite3
```
# 原因
Gemfileの全環境用Gemを指定する箇所に、他のRDBMSのgemを記述したままになっていた。
# 解決策
```Gemfile.
- gem 'sqlite3', '~> 1.3.6'
- 
group:development do
+ gem 'sqlite3', '~> 1.3.6'
end
```
```
$ bundle install
```
```database.yml
production:
+   adapter: postgresql

```
JavaScript の Number の最大値


## 事象

~~~js
// 20 桁の整数
console.log(12345678901234567890); // 12345678901234567000 (18 - 20 桁目が 000 になってしまった)
~~~

## Number.MAX_VALUE

~~~js
// JavaScript において表すことが可能な最大数
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
// Integer かどうか
console.log(Number.isInteger(12345678901234567890)); // true
// safe integer かどうか
console.log(Number.isSafeInteger(12345678901234567890)); // false
~~~

~~~js
var x = 12345678901234567890;
var y = 12345678901234567891;
console.log(x === y); // true
~~~

- [Number.MAX_VALUE
]
(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE)

## おまけ

JSON Viewer (JSON Formatter) を利用していて気づきました
![json_formatter.png](https://qiita-image-store.s3.amazonaws.com/0/106789/36669454-41be-7752-6fd0-f9f4f8474b49.png)

## 参考
- [Number.MAX_SAFE_INTEGERを気にしておきたい](https://qiita.com/kyokoshimizu/items/0d476cbdde9006248988)
- [JavaScriptで扱える整数の最大値は？](https://qiita.com/sakamotoryouta/items/5a895dc30f38f82ad89e)
- [プログラミングで小数はヤバイんだぜ？という話。](https://qiita.com/ukiuni@github/items/3349b313da229abb029b)
heroku デプロイ関係のコマンド

# login
```
$ heroku login
```
# herokuの接続先URLを
## 確認
```
$ git remote -v
```
## 登録
```
$ git remote add heroku https://git.heroku.com/*******.git
```
## 変更
```
$ git remote heroku set-url https://git.heroku.com/*******.git
（***はrepository名）
```

# heroku URLの確認
https://dashboard.heroku.com/apps
-> Personal/各repository/Settings/Info : `Heroku Git URL`

# push 
```
$ git push heroku master
```

# migration
```
$ heroku run rails db:migrate
```

# アプリ起動
```
$ heroku open
```

# ssh接続
```
$ heroku run bash
```
Autohotkey で SetTimer に引数付きの関数を実行させる

例えば [AutoHotkey Wiki の tooltip の記事](http://ahkwiki.net/ToolTip) に

```AutoHotkey:example_1
ToolTip, Multiline`nTooltip, 100, 150
; To have a ToolTip disappear after a certain amount of time
; without having to use Sleep (which stops the current thread):
#Persistent
ToolTip, Timed ToolTip`nThis will be displayed for 5 seconds.
SetTimer, RemoveToolTip, 5000
Return
RemoveToolTip:
SetTimer, RemoveToolTip, Off
ToolTip
Return
```

とあります。Sleep 等のコマンドで待機するとその間他のスレッドの動作に影響が出る / 影響されるため、SetTimer で指定時間後に ToolTip を非表示にするラベルを実行する方が良いと判断してのことだと思います。

上記を簡略化したものが以下になります。

```AutoHotkey:example_2
#Persistent
ToolTip, text, 100, 150
SetTimer, RemoveToolTip, -5000
Return

RemoveToolTip:
ToolTip
Return
```

ToolTip が一つの場合はこれで良いのですが、複数個の ToolTip をそれぞれ設定した時間だけ表示させたい場合には工夫が必要になります。
ところで、SetTimer はラベルのほかに関数を実行することもできます。

```AutoHotkey:example_3
#Persistent
ToolTip, text, 100, 150
SetTimer, RemoveToolTip, -5000
Return

RemoveToolTip(){
    ToolTip
    Return
}
```

SetTimer の第一引数には任意の function object を指定することができるため、次のように書くことができます。


```AutoHotkey:example_4
#Persistent
ToolTip, text, 100, 150
RemoveToolTip_func := Func("RemoveToolTip")
SetTimer, %RemoveToolTip_func%, -5000
Return

RemoveToolTip(){
    ToolTip
    Return
}
```

AutoHotkey v1.1.20 から function object の派生として boundfunc object というものが存在します。これは引数が定められた function object として扱うことができます。これと SetTimer を組み合わせることで、引数を指定した関数を任意時間経過後に実行することができます。


```AutoHotkey:example_5
#Persistent
ToolTip, text_1, 100, 150, 1
ToolTip, text_2, 300, 150, 2
RemoveToolTip_func_1 := Func("RemoveToolTip").bind(1)
RemoveToolTip_func_2 := Func("RemoveToolTip").bind(2)
SetTimer, %RemoveToolTip_func_1%, -8000
SetTimer, %RemoveToolTip_func_2%, -5000
Return

RemoveToolTip(index){
    ToolTip, , , , %index%
    Return
}
```
TestNG使ってみた

Java6サポート切れ対応で火を吹いていた時期にちょうど休職しており、難を逃れました。JUnit3というかdjUnitのテストクラスとかどうしたんだろう（一応動くには動くらしい）。

というわけで、超今さらながらTestNG使ってみました。

# 準備
Mavenであれば以下の依存性を追加すれば準備完了です。

```xml:pom.xml（コピペ厳禁）
<dependency>
    <groupId>org.testng</groupId>
    <artifactId>testng</artifactId>
    <version>6.14.3</version>
    <scope>test</scope>
</dependency>
```

Maven自体ほとんど使ったことがなかったのですが、pom.xmlの記述をコピペして書き換えたりすると高確率で事故ります。実際、コピペしたらscope間違えていて、動くには動くけどデプロイするアーカイブにtestng-6.14.3.jarが入ってしまうというおかしなことになりました。必ずIDEの自動補完を使ってください。

使ったことはあるけどpom.xmlの書き方はわからないって人は結構多いかもしれませんね。

# テストケースを作る
JUnitで言うところのテストクラスです。結構似ています。
JUnit4を使ったことがあれば戸惑うこともありません。

```java:LogoutBeanTest.java
public class LogoutBeanTest {

    /** テスト対象クラス */
    private LogoutBean logoutBean;

    @Test
    public void logout() throws Exception {
        String result = logoutBean.logout();

        // 結果の検証
        assertEquals(logoutBean.getMessage(), "ログアウトしました");
        assertEquals(result, "/logout/logout.jsf");
    }

    @BeforeMethod
    public void setUpMethod() throws Exception {
        logoutBean = new LogoutBean();
    }
}
```

`assertEquals()`の引数の順番がJUnitと逆なのがちょっと気になりましたね。JUnitだと想定結果（expected）が先ですが、TestNGでは実際の結果（actual）が先になります。JUnitでも逆に書いている人結構いましたけどね……

# テストスイートを作る
複数のテストクラスをXMLで管理することができます。
コマンドラインでTestNGを実行する場合は複数のテストクラスをまとめて呼べるようになって便利なのですが、IDEではその利点を見出せず。

```xml:testng.xml
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd" >
<suite name="cc.cress.sample">
    <test name="Login">
        <classes>
            <class name="cc.cress.sample.login.LoginBeanTest"/>
            <class name="cc.cress.sample.util.PasswordEncrypterTest"/>
        </classes>
    </test>
    <test name="Logout">
        <classes>
            <class name="cc.cress.sample.logout.LogoutBeanTest"/>
        </classes>
    </test>
</suite>
```

このあとPowerMockito（モックオブジェクト）とかJacoco（カバレッジ取得）とかも導入しているのですが、かなりボリューミーになってしまったので一旦ここまで。
TensorFlowのsess.run()が遅かった

## やりたいこと
色んな画像に対してObject Detection APIで
sess.run()したかったが、一枚5~8秒ほどかかった。

```python:
# イメージ
for i in range(10):
    tf.Session(graph=hoge) as sess:
        sess.run(hoge_op, feed_dict={})
```
実際はクラス化したり、sessionがネストしてたり、
外部から呼び出されたりでもっと複雑だったが、
まぁ雰囲気はこんな感じだった。

## 対処
要はこう。

```python:
# イメージ
tf.Session(graph=hoge) as sess:
    for i in range(10):
        sess.run(hoge_op, feed_dict={})
```
## 何故か。グラフとセッションの関係
この2つの概念を知っておけば、自分のような初心者でも何となくTensorflowのコードが理解出来るようになった。
グラフは回路のようなもので、セッションでの実行で初めて通電するイメージで認識している。

* **グラフ：計算グラフ**

情報系の人間には見覚えのあるグラフ。
![](https://i.imgur.com/rpIL96n.png)
TensorFlowで書く時は↓みたいな感じ。（あ、コードは上のグラフとは関係ないです。）
電源の無い回路のようなもので、セッションによって通電されないと各変数(tf.placeholder)に値が入らない。

```python:
add_graph = tf.Graph()
with add_graph.as_default():
    a = tf.placeholder(tf.int32, shape=[], name="a")
    b = tf.placeholder(tf.int32, shape=[], name="b")
    add_op = tf.add(a, b, name="add_op")
```
* **セッション：**

グラフを実行するために存在する。
コードによっては省略されているが、tf.Session(graph=hoge)のように、実行対象のグラフは必ず指定されている。
tf.Session()でグラフを指定したsessを作成出来て、sess.run()でその中の一部とか全部を出力出来る。

```python:
with tf.Session(graph=add_graph) as sess:
    ret = sess.run(add_op, feed_dict={a:1,b:1})
    print ret
```

例えばadd_opのような、グラフ内の変数名を指定すれば、feed_dictを入力として起動したグラフにおける、該当の変数(add_op)を返り値として得られる。
複数欲しいなら[a, b, add_op]でOK。

* **実装の流れ：**
1. グラフを作成
2. セッションを作成→sess.run()


### 結果として、何故遅かったのか
最初の例だと、毎回セッションの作成を行ってしまうから。
セッションは作成時にメモリ確保とかを行うので、作成にはかなり時間がかかる。

## 参考サイト
グラフとセッションの部分のコード参考：
http://docs.fabo.io/tensorflow/building_graph/tensorflow_graph_part2.html
グラフとセッションについての説明：
https://arakan-pgm-ai.hatenablog.com/entry/2017/05/04/173031

## 感想
Chainerとかは直感的だけど、TensorFlowは結構独特で、
ごくごく軽く触る程度の身としては困っている。

勉強(機械学習)のための勉強(Tensorflowへの慣れ)、
になってしまったので、
やはりChainerみたいなdefine by run系がとっつきやすいと思う。
cmdでフォルダ構成を調べる。(dirコマンド)


dirコマンドでフォルダ構成を調べる。(windows)
  (1)ファイルとフォルダの一覧を取得
  (2)フォルダの一覧を取得
  (3)ファイルの一覧を取得
上記の3つのパターンを記載しています。

(1)ファイルとフォルダの一覧を取得
```言語:コマンド(windows)
dir /s /b c:¥〜¥Work > c:¥F1.txt
```
```言語:出力結果：F1.txt
c:¥〜¥Work¥仕事
c:¥〜¥Work¥仕事¥スケジュール.xlsx
c:¥〜¥Work¥仕事¥メモ.txt
c:¥〜¥Work¥目標¥ダイエット.xlsx
c:¥〜¥Work¥目標¥運動とは.txt
c:¥〜¥Work¥目標¥タスク
c:¥〜¥Work¥目標¥タスク¥やること一覧.xlsx
c:¥〜¥Work¥その他
c:¥〜¥Work¥その他¥新元号予想一覧.xlsx
c:¥〜¥Work¥その他¥旅行計画.pdf
```

(2)フォルダの一覧を取得
```言語:コマンド(windows)
dir /a:d /s /b c:¥〜¥Work > c:¥F2.txt
```
```言語:出力結果：F2.txt
c:¥〜¥Work¥仕事
c:¥〜¥Work¥目標¥タスク
c:¥〜¥Work¥その他
```
(3)ファイルの一覧を取得
```言語:コマンド(windows)
dir /a-d /s /b c:¥〜¥Work > c:¥F3.txt
```
```言語:出力結果：F3.txt
c:¥〜¥Work¥仕事¥スケジュール.xlsx
c:¥〜¥Work¥仕事¥メモ.txt
c:¥〜¥Work¥目標¥ダイエット.xlsx
c:¥〜¥Work¥目標¥運動とは.txt
c:¥〜¥Work¥目標¥タスク¥やること一覧.xlsx
c:¥〜¥Work¥その他¥新元号予想一覧.xlsx
c:¥〜¥Work¥その他¥旅行計画.pdf
```

**補足**
`c:¥〜¥Work`は、任意のディレクトリ。
`dir /？`をするとオプションが調べられます。
ノスタルジアpc-9801 その5

#概要

整理していたら、フロッピーディスクが出てきた。
せっかくなので、エミュで動かしてみた。

#環境

- windows vista
- t98-next
- disk explorer

#N88basicで、fizzbuzz。

![n0.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/b92d728f-a4ab-e243-3ba3-8bf6d5b96a50.jpeg)
![n1.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/be2d1f18-ff37-5cd7-607e-581cf43383fc.jpeg)



以上。
ノスタルジアpc-9801 その4

#概要

整理していたら、フロッピーディスクが出てきた。
せっかくなので、エミュで動かしてみた。

#環境

- windows vista
- t98-next
- disk explorer

#quick cで、fizzbuzz。

![qc0.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/3535f355-d7a5-66a2-f8a7-e2a93eb10f1c.jpeg)
![qc1.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/d88b5dfa-6558-0cc2-06f2-b2b98c235e10.jpeg)


以上。
ノスタルジアpc-9801 その3

#概要

整理していたら、フロッピーディスクが出てきた。
せっかくなので、エミュで動かしてみた。

#環境

- windows vista
- t98-next
- disk explorer

#turbo c++で、fizzbuzz。

![tc0.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/4a9f626f-8798-b0cd-a38b-7c9f7d8939f1.jpeg)
![tc1.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/78443ddd-f357-06b2-25b8-ebb797a6f9a6.jpeg)


以上。
Dockerの基本コマンド

**外部からイメージを持ってくる場合**
---

```
$ docker pull ${imageName}
```
```
$ docker run -itd --name ${contenaName} ${imageName or imageID}
```
`-p`: 外部からアクセスされるポート番号:コンテナ側のポート番号
`-v`: ホストの絶対パス:コンテナの絶対パス

```
$ docker exec -it ${contenaName or contenaID} bash
or
$ docker attach ${contenaName or contenaID}
```
`attach`は`exit`時、コンテナが停止する

```
$ docker start ${contenaName or contenaID}
```
```
$ docker stop ${contenaName or contenaID}
```
```
$ docker rm ${contenaName or contenaID}
```
```
 $ docker rmi ${imageName or imageID}
```
**自分でイメージを作成する場合**
---
dockerfile: `build`の手順書

```:./dockerfile
FROM ubuntu

CMD echo 'Hello docker world!'
```
`FROM`: imageName
`ARG`: 変数定義 -> 代入時： $変数名
`RUN`: build時に実行
`CMD`: run時に実行

```
$ docker build -t ${imageName or imageId} ${dockerfileName} ${absolute path}
```
**コンポーズ（イメージ作成からコンテナ起動まで行ってくれる）**
---
***Docker Composeのインストール***
---

```
$ curl -L https://github.com/docker/compose/releases/download/1.21.2/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
```
```
chmod +x /usr/local/bin/docker-compose
```
`docker-Compose`が使用できるか確認

```
$ docker-compose --version
```
***Docker Composeを使ってみる***
---

```:./dockerfile
FROM python:3.6

ARG project_dir=/projects/

ADD src/requirements.txt $project_dir

RUN mkdir /test
VOLUME /test/
ADD src/requiremnts.txt /test/
ARG requirements=/test/requirements.txt

WORKDIR $project_dir

RUN pip install -r $requirements
```
```yml:./docker-compose.yml
version: '3'

services:
  flask:
    build: .
    ports:
      - "5000:5000"
    volumes:
      - "./src:/projects"
    tty: true
    environment:
      TZ: Asia/Tokyo
    command: flask run --host 0.0.0.0 --port 5000
```
```python:./src/app.py
from flask import Flask, jsonify

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False

@app.route('/')
def index():
  return jsonify({
    "message": "Hello flask!"
  })

if __name__ == '__main__':
  app.run()
```
```text:./src/requirements.txt
flask
jsonify
```
```
$ docker-compose up -d
```
アクセスできるかホストから確認

```sh
$ curl http://localhost:5000
  {"message":"Hello flask!"}
```

参考
---
[Docker | docker build と Dockerfile でイメージをビルドする基本](https://qiita.com/YumaInaura/items/e7155b309e109bc75cf8)
[Python+Flask環境をDockerで構築する](https://qiita.com/kai_kou/items/e78b546b9820c7d8f1f9)
[Dockerfileについて](https://qiita.com/tanan/items/e79a5dc1b54ca830ac21)
[docker-compose.ymlの命令を理解して、よりDockerを有効活用したい！](http://aspec7.hateblo.jp/entry/2015/11/08/134228)
サロゲートペア、異体字、絵文字に対応した文字数の数え方


## spread operatorだけでサロゲートペア文字列は対応できる

```js
"𠮷野屋".length //=> 4
[..."𠮷野屋"].length // => 3
```

## 異体字や絵文字対応するなら、ライブラリを使う


```js
import split from "graphemesplit";

"𠮷野屋👍🏾葛飾区👍葛󠄀城市👍🏿".length // => 22
[..."𠮷野屋👍🏾葛飾区👍葛󠄀城市👍🏿"].length // => 15
split("𠮷野屋👍🏾葛飾区👍葛󠄀城市👍🏿").length // => 12
```

## 使うライブラリ

- 書記素クラスタ（grapheme cluster)を実装したライブラリ
    - https://www.npmjs.com/search?q=grapheme%20cluster
Php Inspections EA Extended 3.0.11/Ultimate 2.0.13の新機能

[Php Inspections (EA Extended)]と[Php Inspections (EA Ultimate)]はPhpStormのInspection(コード検査)機能をさらに強力なものに拡張してくれるPHPerなら絶対に入れておきたいプラグインです。無償で使えるのがEA Extendedで、それに更に検査ルールを加えたハイエンドの有償版がEA Ultimateです。

本稿では、そのEA Extended 3.0.11(2019/2/23リリース)、EA Ultimate 2.0.13(2019/2/25リリース)に追加された新たなチェックツールを紹介します。

[Php Inspections (EA Extended)]: https://plugins.jetbrains.com/plugin/7622-php-inspections-ea-extended-?
[Php Inspections (EA Ultimate)]: https://plugins.jetbrains.com/plugin/10215-php-inspections-ea-ultimate-

## EA Extended/EA Ultimate共通の新機能

### PHPUnitのバグとベストプラクティス

検査名: _PhpUnit: bugs and best practices_

PhpUnit関連のコードを分析してバグを報告し、ベストプラクティスを使用することを提案します。単体テストでの型安全性を強化するために、インスペクションの設定で「assertSameの使用を提案」を有効にすることができます。

<img width="680" alt="php-playground___Volumes_dev_php-playground__-_____ExampleTest_php__php-playground_.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/70abdd3c-6cfc-e2da-e1ef-c90afb8c5cdf.png">

`assertEquals`より`assertSame`のほうが良く、さらにこの場合、`assertSame`よりも`assertTrue`のほうが良いということを指摘してくれます。

![2019-02-28 11.22.31.gif](https://qiita-image-store.s3.amazonaws.com/0/889/b4d33ee1-70cd-4adc-6546-7134c3bb148c.gif)

### `array_push`の誤用

検査名: _'array_push(...)' misused_

`array_push（...）` 呼び出しが `$array[] = ...` と同じ意味で使われている場合に、`$array[] = `に置き換えることを提案します。そのほうが関数を呼び出すより2倍高速なためです。

`array_push`の誤用を検出する様子:

<img width="393" alt="php-playground___Volumes_dev_php-playground__-_____ExampleTest_php__php-playground_.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/c359ca69-3906-5934-8df1-4748a97ef2e1.png">

誤用は自動で修正してくれる:

<img width="379" alt="php-playground___Volumes_dev_php-playground__-_____ExampleTest_php__php-playground_.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/82730e61-03ed-76e9-7b7c-f74bfb326219.png">



## EA Ultimate限定の新機能


### if-return-returnの単純化

検査名: _If-return-return could be simplified_

条件に基づいてbool値を返すif（）構造を分析し、代わりに条件を返すように単純化します。


```php
    if ($conditions) {
        return true;
    }

    return false;
```

上のコードは下のように単純化できます:
	
```php
	return $conditions;
```

### 繰り返しのメソッド呼び出し

検査名: _Repetitive method calls_

ループでの繰り返しメソッド呼び出しを報告します。 呼び出し量を減らすために、ローカル変数化を提案します。

### 疑わしいバイナリオペレーション

検査名: _Suspicious binary operations_

検査は、`instanceof`演算子など不明確で疑わしい演算子の優先順位、誤ったオペレータ、ハードコードされたブール値、その他のバグを含む可能性があるケースなど、さまざまなケースを報告します。

`$a && $b || $c`は`($a && $b) || $c`と書いたほうがいいよと提案してくれる様子:

<img width="664" alt="php-playground___Volumes_dev_php-playground__-_____ExampleTest_php__php-playground_.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/c704c2c6-8250-a166-18eb-0c36d7d2c2fc.png">

### 疑わしい変数宣言

検査名: _Suspicious variable declaration_

疑わしい変数の宣言を分析して報告します。

### 不要なcontinue

検査名: _Unnecessary continue statements_

削ってもいい`continue`があれば教えてくれます。


<img width="697" alt="php-playground___Volumes_dev_php-playground__-_____ExampleTest_php__php-playground_.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/efd9640c-e2c2-5838-676a-c70ae5a4461b.png">

## 関連

* [Php Inspections EA Extended 3.0.9/Ultimate 2.0.11の新機能 - Qiita](https://qiita.com/suin/items/ef141c0d3318a59f6a3a)
【php/Laravel】Carbon使って「来月の今日」を求めたいのです

# Carbonとは

まず公式をお読みください。
https://carbon.nesbot.com/

よくわからん、という場合はこの記事自体読む必要ないと思いますけど、ググって実際の利用ケースを参照してもらうと良いと思います。

# 何が便利なのか

phpの組み込み関数だけで日付計算しようとすると、結構煩雑な記述になって、後から見た時何しようとしてんのかわからん、っていうのが一番の問題ですよね。
たとえば、1836年1月3日に生まれた坂本龍馬が今生きてたら何歳かな？とか計算しようとしたら・・・

```php:誕生日の計算
$birthday = "1836-01-03";    // なんかデータベースにでも入ってると仮定して
   :
   :
$now = date('Ymd');
$bd = date('Ymd', strtotime($birthday));
$age = floor(($now-$bd)/10000);

# [結果]
# => 183.0
```

のようになります。
特にこの、`floor(($now-$bd)/10000)` とかの計算部分がよくわからんですね。
こんなもん標準の関数で用意しとけ、て思うくらいの定型文。
なので、これをCarbon使ってやると

```php:Carbonで誕生日から年齢計算
use Carbon\Carbon;
  :
$birthday = "1836-01-03";
  :
$age = Carbon::parse($birthday)->age;

# [結果]
# => 183
```

なんと、日付から生成したオブジェクトのageプロパティにアクセスしたら、自動的に年齢が取れてしまいました。

こういう細かく行き届いた機能が山のように用意されています。
便利ですね！

# これまで（個人的に）問題だったこと

実務でlaravelを使ってシステム組んでいて、日付計算にcarbonを使うようになってずいぶんコード量もバグも減ったと思うのですが、1個だけどうしても解決できない面倒な記述があったのです。

それは **来月** の日付取得。

普通に考えれば、「来月の今日」をもってこようと思ったら

```php:来月の今日

$raigetu = Carbon::addMonth()->toDateString();
```

みたいな感じでいい気がしますか？
では1月31日にこうやって日付取り出したらどうなりますか？
やってみてください。

うるう年かどうかによりますが、3月2日か3日が返ってきますね。
全然来月じゃない。
こんなロジックで請求書なんか出すシステム組んだ日にはえらいこっちゃですね。
通常、運用的にはこういう場合は翌月の最終日を返してほしいのです。

私は通常

```php:来月の今日(2)

raigetu = date('Y-m-', strtotime('+1 month', strtotime(date('Y-m-01')))) . date('d');
```

みたいなややこしい書き方をしてました。Carbonのソースコード読むまでは。
このへんは人によっていろんなやり方があると思いますけど、月末で計算するから日数によって月またいだりいろいろしちゃうのであって、1日で計算したら問題ないでしょ？っていうやりかたです。
自分的には定型文ですが、他の人が見たら「なんじゃこりゃ」ってなりかねません。

でもCarbonのドキュメント読んでいてもそれっぽい機能が見当たらない。

で、仕方ないのでソースコード詠みこんでみたんですが、なんだかあっさりそれっぽいのが見つかりました。
その名も
**addMonthNoOverflow**

## addMonthNoOverflow の使い方

って程の事はないです。

```php:Carbon::addMonthNoOverflow()

// 今日が 1/31だと仮定して、翌月の今日を求めたい場合
$raigetu = Carbon::now()->addMonthNoOverflow()->toDateString();
# [結果]
# => "2019-02-28"

$raigetu = Carbon::parse("2019-03-31")->addMonthNoOverflow()->toDateString();
#[結果]
# => "2019-04-30"

// 1か月以上加算したいときは
//  Carbon::addMonthsNoOverflow(int)
// をつかいます。
$hantosi = Carbon::parse("2019-03-31")->addMonthsNoOverflow(6)->toDateString();
#[結果]
# => "2019-09-30"

```

あらまぁ・・・便利ですわね、奥さん！

ロジック的には、普通にaddMonthしてから、元の「日」と計算後の「日」が違ったら計算後の日付の「前月の最終日」を返す、っていう組み方みたいです。
速度的なロスを考えると、なんとか1行で書いてしまおうとしている私のやり方よりも賢いかもしれません。何より読みやすいし。

というわけで、ますます **Carbon万歳** っていう流れになりましたね。

というところで、また次回！
IM-FormaDesigner クライアントサイドスクリプトで入力チェックエラー時の強調表示をON OFFする

### 前提
 - intra-mart Accel Platform 
 - IM-FormaDesiner / IM-BIS
 - クライアントサイドで操作したい

### やりたいこと
クライアントサイドスクリプトでこの強調表示のON OFFをしたい
入力チェックエラー時の強調表示とは下図の赤枠と「！」アイコンのこと
![formaエラー.JPG](https://qiita-image-store.s3.amazonaws.com/0/22172/59605d57-c86e-7573-207d-527aa938b104.jpeg)


### エラー表示API
非公開APIだが下記のようなAPIがある
非公開なので次のバージョンから使えなくなっても泣かない
動作の保証はないので注意

エラー表示API
> formaItems.%画面アイテムID%.AcceptError({"inputId":"%フィールド識別ID%"});
 
エラー表示クリアAPI
> formaItems.%画面アイテムID%.ClearError({"inputId":"%フィールド識別ID%"});

画面アイテムIDは下記のようなもの。画面アイテムの種類を指定する
大体使えるはずだけどグリッドテーブルや明細テーブルだと使い方が違うはずだが、この辺りは未確認

> product_72_number
> product_72_textarea

画面アイテムIDは下記資料を見ると大体わかるはず

[IM-BIS クライアントサイドスクリプトAPI](https://www.intra-mart.jp/document/library/bis/public/bis_specification/texts/spec/csjs_script.html)


### API使用例

画面アイテム：文字列 フィールド識別ID：textbox_1のアイテムのエラー表示ONにするサンプル

``` javascript:エラー表示ON.js
formaItems.product_72_textbox.AcceptError({"inputId":"textbox_1"});

```

画面アイテム：数値 フィールド識別ID：number_1のアイテムのエラー表示OFFにするサンプル

``` javascript:エラー表示OFF.js
formaItems.product_72_number.ClearError({"inputId":"number_1"});

```

スクリプトアイテムやアクション設定のカスタムスクリプトで上記APIを使うとクライアントサイドスクリプトでエラー表示ON OFFが可能となる

### 注意点
サーバーサイドにてエラー表示される場合、画面上部にエラーメッセージが表示されるがこちらはAPIでの操作は不能と見られる
domを直にいじる以外に方法はないはず

### 追記 2019/07/16
非公開APIで以下のようなAPIを発見。
エラークリアとクライアントサイドでの入力チェック処理

``` javascript:エラー表示更新.js
// エラークリア
formaClearError();
// 入力チェック
inputCheck('1');
```

クリア→チェックの順番で実行すると、クライアントサイドだけでエラー表示を最新の状態にできる。
詳しくは下記参照
**IM-FormaDesigner / IM-BIS クライアントサイドスクリプトAPIまとめ**
https://qiita.com/doriburu/items/c3d4660233b622e2e947
Unityでモバイル端末のバイブレーションをコントロールする

# Unityに用意されているバイブレーションAPI
```
Handheld.Vibrate ();
```
これで、1秒くらいのバイブレーションがブーンとなりますが、
使うシーンによってはちょっとマッチしない。
タップだったりに合わせて鳴らすにはもう少し短いものがほしいですよね。

調べるといろいろ出てきて、その寄せ集めの情報にはなりますが、
iOSとAndroidの情報がまとまってるものが意外となかったので書いておきます。

# iOS
秒数での制御ができないので、プリセットのリストから選んで鳴らすことになります。

```C#:IOSUtil.cs
#if UNITY_IOS && !UNITY_EDITOR
        [DllImport ("__Internal")]
		static extern void _playSystemSound(int n);
#endif

		public static void PlaySystemSound(int n) //引数にIDを渡す
		{
#if UNITY_IOS && !UNITY_EDITOR
			_playSystemSound(n);
#endif
		}
```

```C:IOSUtil.mm
#import <Foundation/Foundation.h>
#import <AudioToolBox/AudioToolBox.h>

extern "C" void _playSystemSound (int soundId)
{
    AudioServicesPlaySystemSound(soundId);
}
```

タップに反応する短いものだと `1519` なんかが良さそう。
ただ、ドキュメントを探しても、`1519` `1520` `1521` あたりは載って無くて、
使ってて大丈夫なのかは若干不安なところ..

# Android
秒数（ミリ秒）で制御することができます。参考リンクまんまですが。

```C#:AndroidUtil.cs
#if UNITY_ANDROID && !UNITY_EDITOR
    public static AndroidJavaClass unityPlayer = new AndroidJavaClass("com.unity3d.player.UnityPlayer");
    public static AndroidJavaObject currentActivity = unityPlayer.GetStatic<AndroidJavaObject>("currentActivity");
    public static AndroidJavaObject vibrator = currentActivity.Call<AndroidJavaObject>("getSystemService", "vibrator");
#else
		public static AndroidJavaClass unityPlayer;
		public static AndroidJavaObject currentActivity;
		public static AndroidJavaObject vibrator;
#endif

		public static void Vibrate(long milliseconds)
		{
			if (isAndroid())
				vibrator.Call("vibrate", milliseconds);
			else
				Handheld.Vibrate();
		}
		private static bool isAndroid()
		{
#if UNITY_ANDROID && !UNITY_EDITOR
			return true;
#else
			return false;
#endif
		}
```

端末によって差異はありそうですが、
試した感じ結構細かい数値の違いでも、体感の変化を感じられました。
上記で記載したiOSの `1519` の感触に近づけるには `3ms` くらいの短い指定でもよさそう。

`Handheld.Vibrate();` の記述について、
コードに残しておくことでAndroidのパーミッションをUnity側でビルド時に自動で追加してくれます。
手動で管理する場合はこの分岐は省略して良いかと思います。

# プレビュー
実機で動かして試せるアプリを用意しました。
https://github.com/mrhdms/VibrationTester
iOS, Androidそれぞれで動きます。

iOSはプリセットリストから選択して再生。（音しかならないもの、音とバイブのもの、バイブレーションだけのものが混在）
Androidは0-1秒の間でスライダで調整しながら確認できます。

# 参考
http://smartgames.hatenablog.com/entry/2019/02/17/125413
http://greenkour.hateblo.jp/entry/2017/11/20/100000
ブロックの中身をテストするときのRSpecの書き方

```rb:block_spec.rb
class Sample
  def foo(x)
    ho = hoge(x) do |y|
      piyo(y)
    end
    ho + 'foo'
  end

  def hoge(x)
    yield x + 'hoge'
  end

  def piyo(y)
    y + 'piyo'
  end
end


describe Sample do
  it 'yields block of hoge method by passing block to stub' do
    allow(subject).to receive(:hoge).with('start') do |x, &block|
      expect(block.call(x)).to eq('startpiyo')
      'startpiyo'
    end
    subject.foo('start')
  end

  it 'yields block of hoge method by using `and_yield`' do
    allow(subject).to receive(:hoge).with('start').and_yield('yielded_arg')
    expect(subject.foo('start')).to eq('yielded_argpiyofoo')
  end
end

```
上記2つのどちらかの方法でテストする。

## 参考
https://relishapp.com/rspec/rspec-mocks/docs/configuring-responses/yielding
cmdで別ドライブに移動する


CドライブからDドライブに移動したい
DドライブからCドライブに移動したい
と言う時に使うコマンド

移動するコマンドは、２パターンあります。
パターン①: `cd /d D:`
パターン②: `D:`


```言語:cmd画面
C:\> 
C:\> cd /d D:
D:\>
D:\> C:
C:\>
C:\> D:
D:\> 
D:\> cd /d C:
C:\>

```
AWS Systems Manager のセッションマネージャーの小ネタ(Switchロールした際のログ表示、sudoの禁止)

#はじめに

AWS Systems Manager のセッションマネージャーは、S3とCloudWatchLogsにログ出力できますが、Switchロールした場合は、どういった表示になるのか認識できてなかったので確認しました。ついでにsudoの禁止方法についても記載します。

#Switchロールした場合のログ表示の確認

##結論
Switchロール前のIAMユーザ名でセッションIDが表示されます。

##実機確認
Switchロールする前のIAMユーザ(miyamoto)が表示されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/8acbe25b-ef9d-62cf-b459-f8a291f321a9.png)

CloudWatchLogsにも元のアカウントのIAMユーザ名がロギングされます。

```
Script started on 2019-02-28 01:47:39+0000
[?1034hsh-4.2# /usr/bin/ssm-session-logger /var/lib/amazon/ssm/i-030874ac1ad0d6f6d/sess 
ion/orchestration/miyamoto-08d0033a7ae098d22/Standard_Stream/ipcTempFile.log fal 
se
Error occurred fetching the seelog config file path: open /etc/amazon/ssm/seelog.xml: no such file or directory
Initializing new seelog logger
New Seelog Logger Creation Complete
[?1034hsh-4.2$ 
[Ksh-4.2$ 
sh-4.2$ 
sh-4.2$ 
sh-4.2$ 
sh-4.2$ 
```
#sudoの禁止するには？

/etc/sudoers.d/ssm-agent-usersでssm-userに許可を削除すればSudoできる権限を剥奪可能です。

```
sh-4.2$ sudo cat /etc/sudoers.d/ssm-agent-users
# User rules for ssm-user
ssm-user ALL=(ALL) NOPASSWD:ALL
```

#お約束
投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。
ラスボス系後輩ヒロインAIチャットボットを作りたい・プロローグ

当記事はQrunchにクロス投稿しています。

## 前置き
保守対応に回されてチケット来ない日は暇なので二度とIE8案件の保守なんかにぶち込まれないで済むように勉強をはじめました（IEを口汚く罵る絵文字）
とりあえずFGOのCCCイベが楽しかった&BBちゃんが可愛かったのでラスボス系後輩ヒロインAIチャットボット制作を目標に据え置いて作業します。
何を隠そう「先輩」と呼ばれることにものすごく弱いのだ……（マシュも大好き）

## 本編

予定の目次と、語の定義についてざっと検索してみた結果

 - Pythonの基礎 with [O'Reilly本](https://www.oreilly.co.jp/books/9784873117386/)
 	- NumPy
 	- matplotlib（ふたつともO'Reilly本に収録されていることを確認、ラッキィ）
 - 数学の基礎
 	- 線形代数
 	- 微分
 	- 正規分布
 	- 交差エントロピーも目を通しておきたいけど[Kares](https://keras.io/ja/)に入ってるっぽいからやらなくてもよい？　保留  
 - ニューラルネットワークの概要
 - [バックプロパゲーション](https://qiita.com/43x2/items/50b55623c890564f1893#%E8%AA%A4%E5%B7%AE%E9%80%86%E4%BC%9D%E6%92%AD%E6%B3%95%E3%81%AE%E5%B1%8B%E5%8F%B0%E9%AA%A8)の概要
 - 仮想環境の構築
 - [JUMAN++](http://nlp.ist.i.kyoto-u.ac.jp/index.php?JUMAN++)入門
 - シンプルな[RNN(Recurrent Neural Network - 再帰的ニューラルネットワーク)](https://qiita.com/kiminaka/items/87afd4a433dc655d8cfd#rnn-recurrent-neural-network%E3%81%A8%E3%81%AF)の実装
 - 勾配クリッピング
 - シンプルな[LSTM(Long Short Term Memory)](https://qiita.com/t_Signull/items/21b82be280b46f467d1b#lstm%E3%81%A8%E3%81%AF)の実装
 - シンプルな[GRU(Gated Recurrent Unit)](https://deepage.net/deep_learning/2017/05/23/recurrent-neural-networks.html#gru)の実装
 - LSTM、GRUによる自然言語処理

目次は[Udemy](https://www.udemy.com/ai-nlp-bot/)を参考に作りました。クレカ審査落ちたので受講はできません。調べたらPayPalが銀行口座からの支払いに対応しているようで、本人確認すればPayPal越しに行けそうな感じがあったんですけど、なんか時間かかるっぽいしめんどくさいし保留。デビットカード作ればいいんだろうか……お金周りはめんどうだねえ。

元々形態素解析は[MeCab](http://taku910.github.io/mecab/)でやってたんですけど（Rubyラッパの[natto](https://github.com/buruzaemon/natto)とか係り受け解析機[Cabocha](https://taku910.github.io/cabocha/)とかMeCab周りは食べ物の名前が多い）、この記事 [新形態素解析器JUMAN++を触ってみたけど思ったより高精度でMeCabから乗り換えようかと思った話 - Qiita](https://qiita.com/riverwell/items/438e88427363511e9f28) を読んで、砕けた喋り方のチャットボットならJUMAN++の方が向きそうだなと思ったので乗り替えることに。

目下の明確な問題は **明らかに教師データが足りない** ことなんですけど（FGOからBBちゃんのセリフ全部起こしても足りないだろうし、CCC持ってないし）（実家からVita持ってくればPSストアから買えるっぽい？）まあそのへんは最悪ぐだBB夢小説でも書いてなんとかしましょう（なんとかなるんだろうか？）
【2019年2月末版】最軽量K8sのk3sを試してみた。

# 無事に動きました。

以下の記事で動作確認に再挑戦いたしました。こちらをご確認ください！
https://qiita.com/koinori/items/c97812442bc3fe430585

以下の記事は過去の失敗例としてそのままにします。

# 最軽量のk8sが動く環境をUbuntu18、Hyper-Vで構築

こちらの参考ページ通りにさくっと作成いたします。

- [Windows 10 Pro Hyper-V に Ubuntu 18.04 LTS をインストール](https://qiita.com/mfunaki/items/9e2901936b04f00f9cd7#%E8%BF%BD%E5%8A%A0%E8%A8%AD%E5%AE%9A)

まずUbuntuのイメージをダウンロードします。

こちらのサイト
http://ftp.riken.jp/Linux/ubuntu-releases/bionic/
から、↓のイメージをダウンロードしてきました。
http://ftp.riken.jp/Linux/ubuntu-releases/bionic/ubuntu-18.04.2-live-server-amd64.iso

Hyper-V Managerで以下の仮想マシンを作成します。

- ネットワーク：既定のスイッチ
- ハードディスク：5120M
- インストールオプション：ブートイメージファイルから→ダウンロードした ファイルを指定

「次へ」→「完了」

[参考ページの追加設定](https://qiita.com/mfunaki/items/9e2901936b04f00f9cd7#%E8%BF%BD%E5%8A%A0%E8%A8%AD%E5%AE%9A)にもある通り、追加の設定をします。


メモリ：動的メモリの上限を上の値と同じにする
セキュリティ：セキュアブートを無効にする
プロセッサ数：上げる
統合サービス：ゲストサービスを有効にする

そして起動！

インストール手順は適当に。
Featured Server Snaps なんてあるんだ！いろいろ試したいけど、今はこらえて次へ。。。

# バイナリのダウンロード

とりあえずUbuntuのインストールといつもの```sudo apt update & sudo apt upgarde```はやっておきます。
最近のお気に入り、httpieも入れます。

```
$ sudo apt install -t httpie
```

では、githubからk3sのバイナリをダウンロードし、/usr/binに放り込みます。

```
$ http https://github.com/rancher/k3s/releases/download/v0.1.0/k3s > k3s
$ chmod +x k3s
$ sudo mv k3s /usr/bin/
```

# 起動！
さっそくバージョンでも確認するかと・・・

<img width="652" alt="無題.png" src="https://qiita-image-store.s3.amazonaws.com/0/335150/d2649f60-cdb5-2459-b4f9-501cf41919a9.png">


おぅ。。。

なんかHTMLテンプレートでエラー出てませんか？！

ちょと時間ができたらソースからビルドに挑戦してみます。
JAWS DAYS 2019に行ってきた件(AI/ML系を中心に)

[JAWS DAYS 2019](https://jawsdays2019.jaws-ug.jp/)に行ってきたので、備忘録です。

![IMG_5093.JPG](https://qiita-image-store.s3.amazonaws.com/0/192038/7010e5b8-8a38-9040-2ebe-fc6cb719e4ef.jpeg)

# 総評：とにかく盛り上がってた

1900人超来て史上最高の人数だったそう。
あんま写真撮ってないんですが、確かにどのセッションも黒山の人だかり。
お弁当もランチカーも長蛇の列でした。
運営のみなさんお疲れ様です。

スポンサーもいっぱい。

![IMG_5094.JPG](https://qiita-image-store.s3.amazonaws.com/0/192038/c3b157c6-35f2-6756-a388-8c04753ffecc.jpeg)

うーん、AWSとも仲良くしてるはずの実行委員長所属会社がスポンサーになってないのはなぜだ。

# 発表の傾向と回ったところ

当日のタイムテーブルはこちら。
https://jawsdays2019.jaws-ug.jp/timetable/

資料のまとめはこちら。
https://qiita.com/hayao_k/items/91c19480948f26b71705

実に11トラック。更に展示/同人誌ブースもあり、非常に盛りだくさん、満漢全席の名前の通りという感じでした。
満漢すぎて食いきれないので、2日に分けてほしいとも思ったくらいですが、まあ2日に分けると大変だろうしなぁ・・・

Serverless、コンテナ、ハイブリッドクラウドといった基盤周りの新しい軸に関するセッションが結構多かった印象。
IoTとかもちらほらありましたね。SORACOMのハンズオンとか楽しそうだった。
私はAI/ML系のセッションを中心に聞いてきました。
以下、気になったセッションをいくつか紹介。

# 気になったセッション

この3セッションが連続したあたりが、個人的なハイライトでした。
ここに書いてないことも色々と話されていたのですが、気になったところを中心に。

## [AI/ML 前半] PythonとSageMakerで始める MLチームのみで完結するAPIの構築事例 GVA TECH 武田さん

https://speakerdeck.com/ababa893/jaws-days-2019-pythontosagemakerteshi-merumltimufalsemitewan-jie-suruapifalsegou-zhu-shi-li

* ML機能の開発フローは、「分析検証→アルゴリズム開発→学習・モデル変換→APIのデプロイ→プロダクトに反映」
  * プロダクトに反映まで行って初めてユーザ価値が生まれる。なので、そのスピードをなるべく高速化したい。
* APIとしてデプロイしてプロダクトに反映するところはインフラまわりのスキルが必要。
* 機械学習の専門家集団であるMLチームは基本的にインフラ周りのスキルはそんなに高くない。彼らにそこをやらせるのはスキルの無駄遣い。
* 一方、インフラ周りの担当を別途用意すると、MLチームとは文化が違ってわかりあうのが難しい。（MLチームのコードがわんぱくすぎる、とか）
  * コミュニケーションコストが高くなって、結局速くならない。
* そこで、SageMakerを活用して、MLチームのみで商用環境へのデプロイ可能な状況を作った。
* 結果、新バージョンのAPIリリースがほぼ1日で対応可能に！

## [AI/ML] 機械学習における AWS を用いたマイクロサービスアーキテクチャ ABEJA 中川さん

https://www.slideshare.net/yutanakagawa2/aiml-aws

* AI/ML業界は技術の進化スピードがえげつない。　
* だから、ビジネスとしては速攻で最新のモデルを取り入れていきたい。
* ところが分析系機能のアーキテクチャが完全にモノリスで、１年位モデルいれかえてない・・・とかいう状況に。
* そこで、モデル部分をマイクロサービスにして、影響範囲を極小化しながら必要なモデルを簡単に差し替えられるようにした。
    * ついでに、モデルのフローも組み換え可能に。
* これによって、最新の技術を論文で知り、検証用コードを活用して新たなモデルを作り、すぐにプロダクトに組み込みが可能に。

## [BigData] AI/MLシステムにおけるビッグデータとの付き合い方 DeNA 鈴木さん

* AI/ML系の開発をスムーズ・迅速に行うために、3つのロールを設けている。
    * AI研究開発エンジニア - 各分野の専門性を持ってる人。研究のウォッチと活用。
    * データサイエンティスト - Kagglerの人たち。泥臭い系。
    * MLエンジニア - AI技術をサービス上に実装して安定運用を実現するのがミッション。←鈴木さんはここ。
* MLエンジニアはモデル開発以外の部分は何でもやる。AI研究開発エンジニアやデータサイエンティストは基盤周り弱いので。
    * 機械的なレベルのデータクレンジングとかも全部やってる
    * セキュリティ周りも、普通にやってれば問題が発生しないように整備しておく
    * 野良インスタンスが立たないようにとか、GPUインスタンスのスポットインスタンスを使うとか、そのへんもお手伝い。
        * SageMakerはスポットインスタンス使えなくて高いのもあるし、意外とニーズがなかった。

# 所感

というわけで、如何に専門性の高い人のスキルを無駄遣いせずに、彼らのアイデアを最短距離でビジネスに落とし込んでいくかというところが一つのキーポイントなのだな、という感じですね。
でも、そこに向けての工夫ややり方、体制は三者三様。専門家がデプロイまで簡単にできるようにしてあげるのか、そこは他の人が見てあげるのか。デプロイの高速化のやり方もそれぞれ。この辺は組織やメンバーにあったやり方をそれぞれ模索するべきなのでしょう。
他にも色々セッションは聞いたんですが、この3つが一番印象に残ったので取り上げてみました。

あといちばん笑ったのは営業セッションだったけどそれはまたどこかで。
Windows10でSkypeとか付箋とかだけで日本語が入力できなくなる

Windowsのパーミッションコワイ。
# tl;dr
Google日本語入力などを使っている？
Win既定のアプリのみ使えない？
ひょっとしてこれかな？
[Windows 7 から Windows 10 へアップデート後、Edge やコルタナなどで、Google 日本語入力が利用できない場合の対応方法 - Google 日本語入力 ヘルプ](https://productforums.google.com/forum/#!topic/ime-ja/xBJLDHyJVw0)
だめなら一番下を見てね

# 以下ほんへ
## なんなん
- Google日本語入力
- Windows10 home (会社のもので7->10に上げてるらしい)

## なんや
Skypeとか、付箋(Sticky Note)メモとかで、
Google日本語入力の**日本語入力だけ**出来なくなる。

## なんでなん
tl;drでも示した[ここ](https://productforums.google.com/forum/#!topic/ime-ja/xBJLDHyJVw0)にあるが、権限がないらしい。
ので力を与える。

## どないすんねん
上記手順で進める。
1. c/Program Files（もしくはx86）内の「Google Japanese Input」を探す
2. 右クリック > プロパティ > セキュリティ > 編集
3. 「～のアクセス許可」というのが表示されるので、追加
4. 「選択するオブジェクト名を入力してください」の項目に`ALL APPLICATION PACKAGES`と入れてOK
5. ALL APPLICATION PACKAGESがリストに追加されていればおわり

他の入力メソッドを潰しにかかってるんですかね...？

## それでも使えないとき
Windowsアプリとか使わなきゃならないときだけ、`Win + space`でMS-IMEに切替する、ぐらいか
というか上記設定やっても使えなくなることがあるので、ｱｱｱｱｱって感じ
イライラ軽減として、プロパティから以下

- **IME入力モード切替の通知のチェックを外す**
エンジニアなら英数かな切替は頻繁にあるだろうから、画面中央に`A`と`あ`がチラチラしてうるせぇので黙らせる。

- **詳細設定 > 予測入力 > 予測入力サービスを有効にする**
このクラウド候補というものを入れると、今までのクソMS-IMEがわりと緩和される印象。
りんな、というものもあり、AI技術（ディープラーニング？AI？）を使っているとかなんとか。
予測にきゃわわ♡な文章が追加される。
これは、いらないの 🎃🎃🎃
次の年号をゴリ押しで予測する

# なにこれ

こんなのを見掛けたので、

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">常用漢字が2136字なので、2文字の組み合わせは約456万通り、1秒に2つずつ漏洩させていけば約27日、まだ元号の発表までに間に合う、今すぐやれ</p>&mdash; twinrail (@twinrail) <a href="https://twitter.com/twinrail/status/1100338994426957824?ref_src=twsrc%5Etfw">2019年2月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

やってみた。

# 常用漢字を

http://www.bunka.go.jp/kokugo_nihongo/sisaku/joho/joho/kijun/naikaku/kanji/joyokanjisakuin/index.html

## 文化庁から取ってきて

```bash
wget http://www.bunka.go.jp/kokugo_nihongo/sisaku/joho/joho/kijun/naikaku/kanji/joyokanjisakuin/index.html
```

## 案の定 sjis なので utf-8 に変換

```bash
nkf -w index.html > index.utf8.html
```

# 抜き出す

そして安定のfontタグ。

```text:xpathはこれ
//*[@id="urlist"]/tbody/tr/td[1]/font[1]
```

```python:a.py（前半）
import lxml.html

contents = open("index.utf8.html").read()

xpath = '//*[@id="urlist"]/tbody/tr/td[1]/font[1]'
doc = lxml.html.fromstring(contents)

elems = doc.xpath(xpath)
kanji = [ x.text_content() for x in elems ]

print(len(kanji))
print(kanji[:10])
```

```bash
$ python a.py
2136
['亜', '哀', '挨', '愛', '曖', '悪', '握', '圧', '扱', '宛']
```

# 2文字の順列

```python:a.py（後半）
import itertools

for a, b in itertools.permutations(kanji, 2):
    print(f"次の年号は\t{a}{b}\tかな？")
```

# 結果

```bash
$ python a.py > out

$ wc -l out
4560360 out

$ head out
次の年号は	亜哀	かな？
次の年号は	亜挨	かな？
次の年号は	亜愛	かな？
次の年号は	亜曖	かな？
次の年号は	亜悪	かな？
次の年号は	亜握	かな？
次の年号は	亜圧	かな？
次の年号は	亜扱	かな？
次の年号は	亜宛	かな？
次の年号は	亜嵐	かな？
```

おわり。
displayいろいろメモ

#display:table
###カラムの中身の折り返しを抑制する
長い単語の途中で改行を許すにはword-wrapプロパティを使って、値にbreak-wordを設定する。
テーブルセルの中の文字を改行させるには、テーブル全体に幅を指定して、幅を固定する必要がある。

```ruby:CSS
.table {
  display: table;
  /* 幅を指定して固定する必要がある
    width: 300px;
    table-layout: fixed;
  */
}

.table-cell {
  display: table-cell;
  word-wrap: break-word; /* 単独では効果がない */
}
```

#display:flex
要素をflexboxでレンダリングするには、displayプロパティを利用して値にflexを設定する。
flexが指定された要素をFlex container(Flexコンテナ) と呼び、その子要素をFlex item(Flexアイテム) と呼ぶ。
☆flexboxとは、コンテンツをレイアウトするために導入された、比較的新しい新しいプロパティ
☆歴史順でだとtable→float→flexboxらしい

###flex-wrap
Flexアイテムを所定の幅で折り返す

プロパティには次の値が利用できる
●nowrap
　改行しない
●wrap
　改行する
●wrap-reverse
　wrapと同じだが、並び順が逆。
※初期値はnowrapが設定されている

###flex-direction
Flexアイテムの並び順を逆順にする

プロパティには次の値が利用できる

●row
　左から右に配置
●row-reverse
　rowと同じですが、順番が逆
●column
　上から下に配置
●column-reverse
　columnと同じだが、順番が逆
※初期値はrowが設定されている

###justify-content
Flexアイテムを左右中央に配置

プロパティには次の値が利用できる

●flex-start
　Flexアイテムを始端配置
●flex-end
　Flexアイテムを終端に配置
●center
　Flexアイテムを中央に配置
●space-between
　Flexアイテムを均等に配置。最初のアイテムは始端に、最後のアイテムは終端に配置される。
●space-around
　space-betweenと同じ、最初のアイテムと始端との間と最後のアイテムと終端との間のスペースは、各アイテム間のスペースの1/2になる
●space-evenly
space-betweenと同じ、最初のアイテムと始端との間と最後のアイテムと終端との間のスペースは、各アイテム間のスペースと同じになる
※初期値はflex-startが設定されている

###align-items
Flexアイテムを上下中央に配置
プロパティには次の値が利用できる

●flex-start
　Flexアイテムを上部配置
●flex-end
　Flexアイテムを下部配置
●center
　Flexアイテムを中央配置
●stretch
　Flexアイテムはコンテナいっぱいに広がる
※初期値はstretchが設定されている

###align-content
Flexアイテム全体の縦の配置を変更する
※align-contentは、Flexコンテナーに余白がある場合のみ有効

●flex-start
　Flexアイテムを上部に配置。
●flex-end
　Flexアイテムを下部に配置。
●center
　Flexアイテムを中央に配置。
●space-between
　Flexアイテムを均等に配置し。最初のアイテムは上部に、最後のアイテムは下部に配置される。
●space-around
　space-betweenと同じ、最初のアイテムと上部との間と最後のアイテムと下部との間のスペースは、各アイテム間のスペースの1/2になる。
●stretch
　space-betweenと同じ、最初のアイテムと上部との間と最後のアイテムと下部との間のスペースは、各アイテム間のスペースと同じになる。
※初期値はstretchが設定されている

###orderプロパティ
配置の順番を変更することができる。初期値は0
負の値を設定することで先頭に配置することができる。
###flex-growプロパティ
Flexアイテムが占有する幅を調整することができる。
flex-growで調整できる幅は、要素の絶対的な幅ではなく、Flexコンテナーが持つ余白。