OmniAICreator/Qiita-1.07M huggingface dataset:
DOTween Examples はこんな感じ (GIFアニメ)

# [DOTween](https://github.com/Demigiant/dotween)

DOTween とは Unity 向け トゥイーンアニメーションエンジンです。
OSS であり [Demigiant/dotween](https://github.com/Demigiant/dotween) にはサンプルとして以下の６つのシーンが含まれています。

- Basics
- Follow
- Materials
- Paths
- Sequences
- UGUI

それぞれのシーンがどの様な動きをしているのかパッと見て分かるように GIFアニメ を作成しました。

## Basics

![Basics.gif](https://qiita-image-store.s3.amazonaws.com/0/18763/c5a8c9bb-1ab7-3cc1-2755-04c162a357ed.gif)

- 基本的な座標移動の操作。 Color を操作する事もできる。

## Follow

![Follow.gif](https://qiita-image-store.s3.amazonaws.com/0/18763/217c4437-509d-188a-4022-af62b1b4398a.gif)

- 指定したオブジェクトに付いていくような動作。

## Materials

![Materials.gif](https://qiita-image-store.s3.amazonaws.com/0/18763/18d12f7e-b77d-0023-dbf2-d799b01cd97c.gif)

- Materials の Color, Emission, Offset の操作。

## Paths

![Paths.gif](https://qiita-image-store.s3.amazonaws.com/0/18763/558496fa-3670-2a20-df4f-c0eef82e16d6.gif)

- 複数の座標情報を用意し、それを辿る移動アニメーションが可能。座標間の補完方法は２種類ある。

## Sequences

![Sequences.gif](https://qiita-image-store.s3.amazonaws.com/0/18763/b02e755d-09d5-6ec3-54f1-8762a2254d71.gif)

- 専用の Sequence オブジェクトを用意し、それに従ったアニメーション動作を実行する事ができる。
- この例では Move, Rotate, Color を組み合わせたシーケンスデータで動作している。

## UGUI

![uGUI.gif](https://qiita-image-store.s3.amazonaws.com/0/18763/bd0827dd-a7de-ee3d-8794-2d29637b865c.gif)

- uGUI に対してもアニメーションを実装できる
- Image のフェードや、Slider の値変更は想像できたが、 Text に対してアニメーション出来たのは意外。
rsyslogのActionExecOnlyWhenPreviousIsSuspendedについて

rsyslogサーバの冗長化ができるようになるActionExecOnlyWhenPreviousIsSuspendedですが
udp転送だと使用できないので注意してください。
以下rsyslog.confの例です。
次のものはNGとなります。
```bash
*.* @master:5140
$ActionExecOnlyWhenPreviousIsSuspended on
& @slave1:5140
$ActionExecOnlyWhenPreviousIsSuspended off
```
こちらはOKです。
```bash
*.* @@master:5140
$ActionExecOnlyWhenPreviousIsSuspended on
& @@slave1:5140
$ActionExecOnlyWhenPreviousIsSuspended off
```
@ひとつの違いで結構苦しめられました…
“HelloWorld” チュートリアル(Swift) 

**新しいプロジェクト作成**
1) Xcode アプリケーションを起動
起動する時Welcome画面表示するので、[Create a new Xcode project]をクリックします。
![Screen Shot 2017-05-23 at 17.14.50.png](https://qiita-image-store.s3.amazonaws.com/0/178655/f88ecb17-b158-d990-ca9c-3e9e6a3d653b.png)

2) Xcodeから,Template選択できるためXcode 新しWindow表示します。
3) [ios]文言を選択します。
4) ApplicationSectionの中で「Single View Application」を選択します。
![Screen Shot 2017-05-23 at .png](https://qiita-image-store.s3.amazonaws.com/0/178655/2ad2ee97-660c-4719-8c39-efdd63ec6147.png)

5) 下のダイアログ表示します。
   このダイアログでProductName, Team, Organization Name　などを登録必要です。
   - Product Name : HelloWorld　（プロジェクト名）
   - Team: 自動でNoneを入力します。
   - Organization Name:自分のorganization名を入力します。（空でも大丈夫）
   - Organization Identifer: com.exampleを入力します。
   - Bundle Identifier: product nameとorganization identifier を使って自動で作ります。
   - Language: Swiftを入力します。
   - Device: iPhone
   - Use Core Data : 選択しない
   - Include Unit Tests: 選択します。
   - Include UI Test:　選択しない
![Screen Shot 2017-05-23 at 12.06.30.png](https://qiita-image-store.s3.amazonaws.com/0/178655/d889a0d9-de08-1ed8-75ca-ce57d0f8089b.png)

6) Next ボタンをクリックします。
7) Save ダイアログ表示します。
プロジェクトのlocationを選んで、保存と作成します。
8) ViewController.swift を選択します。
![Screen Shot 2017-05-23 at aaa.png](https://qiita-image-store.s3.amazonaws.com/0/178655/c15c1840-fe1a-5189-8acd-2c0434902149.png)

9) ViewControllerファイルの中でviewDidLoad() functionでLabelを作って
“HelloWorld!” を書きます。
![Screen Shot 2017-05-23 at 17.52.34.png](https://qiita-image-store.s3.amazonaws.com/0/178655/2cb730a3-29c2-4d01-676c-a07e7c91a823.png)

10) 実行Buttonをクリックして実行します。
![Screen Shot 2017-05-23 at 17.54.26.png](https://qiita-image-store.s3.amazonaws.com/0/178655/74c798d3-be3a-8b92-4c76-6a2252428e56.png)

**"HelloWorld!"**
![helloworld.tiff](https://qiita-image-store.s3.amazonaws.com/0/178655/05c4b7f0-b763-2828-d79a-27c08ddc7ef9.tiff)
トラヒック計測ツール pmacct を使ってみる

NIC インターフェイスを特定して細かいトラフィックを計測するために、 pmacct を使ってみました

tcpdump で集計するよりめっちゃ楽でした。

# ともかく使う

`apt install pmacct` で環境が揃います。yumでも大丈夫かな

```console
$ sudo apt install -y pmacct
```

## 実行

まず実行してみます

```console
$ sudo pmacctd -P print -r 10 -i eth0 -c src_host,dst_host,dst_port
INFO ( default/core ): Reading configuration from cmdline.
OK ( default/core ): link type is: 1
INFO ( default/print ): cache entries=16411 base cache memory=53434216 bytes
SRC_IP                                         DST_IP                                         DST_PORT  PACKETS               BYTES
INFO ( default/print ): *** Purging cache - START (PID: 6790) ***
XX.XX.XX.96                                     YY.YY.YY.107                                  61645     6                     712
YY.YY.YY.107                                    XX.XX.XX.96                                   22        3                     120
INFO ( default/print ): *** Purging cache - END (PID: 6790, QN: 2/2, ET: 0) ***
^CINFO ( default/print ): *** Purging cache - START (PID: 6789) ***
XX.XX.XX.96                                     YY.YY.YY.107                                  61645     4                     848
YY.YY.YY.107                                    XX.XX.XX.96                                   22        1                     40
INFO ( default/print ): *** Purging cache - END (PID: 6789, QN: 2/2, ET: 0) ***
INFO ( default/core ): OK, Exiting ...

16 packets received by filter
0 packets dropped by kernel
```

それっぽい感じで表示されました
上記コマンドラインの引数の意味はそれぞれ以下の通りです

* 出力先 = *print*
* 対象I/F = *eth0*
* 集計期間 = 10秒毎
* 集計単位 = src_host,dst_host,dst_port の3要素でグルーピング

# pmacctのいいところ

tcpdumpで直接計測しようと思いましたが、ちょっと大変そうだったところに見つけることができよかったです

* 標準出力といったCLI構成でも使える
    * DBにも保存できる
* 時間やホスト・ポート等の条件でまとめ上げてくれる
* tcpdump互換の表記で集計対象（もしくは対象外）を設定できる
    * `$ sudo pmacctd -P print -r 10 -i eth0 -c src_host,dst_host,dst_port not port 22` こんな感じで port=22 なトラヒックは除外できる

# あとがき

[低トラヒック用途向け新料金体系](https://www.soracom.jp/press/2017051001/)の[調査](https://blog.soracom.jp/blog/2017/05/22/how-to-buy-and-use-lowdatavolume/)を行うためにトラヒックモニタリングのツールを探してました
Laravel-mix で、IE11に対応させる

Laravel-mixでは最初から設定されていると思い、していなかった。
IE11を使っている人からの問い合わせで気付いた。

下記の手順を踏めば、IE11対応するはず。

```
yarn add -D babel-polyfill babel-preset-es2015
```

```json:.babelrc
{
  "presets": [
    "es2015",
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 2%"],
        "uglify": true
      }
    }]
  ]
}
```

```js:webpack.mix.js
const { mix } = require('laravel-mix')

mix.options({
  polyfills: [
    'Promise'
  ]
})
// ...
```

```js:resources/assets/js/app.js
// ...
require('babel-polyfill')
// ...
```

# 参考

https://github.com/JeffreyWay/laravel-mix/issues/564
https://github.com/JeffreyWay/laravel-mix/issues/436
[C言語] getopt

C言語でコマンドライン引数をパースする `getopt` を毎回忘れるので、備忘録です。

ショートオプションはPOSIXに準拠しているが、ロングオプションはGNU拡張のようです。
> getopt_long() and getopt_long_only():
> These functions are GNU extensions.                                                                                        

## コード
```c
#include <stdio.h>
#include <getopt.h>

void
usage()
{
	fprintf(stderr,
		"p: port number"
		);
}

void
cmdline_parse(int argc, char **argv)
{
	int port = 34400; // global or paramterに変更

	int ret = 0;
	while ( (ret = getopt(argc, argv, "hp:")) != -1 )
	{
		if (ret == -1)
			break;

		switch (ret) {
		case 'p':
			port = atoi(optarg);
			break;
		case 'h':
			usage();
			exit(1);
			break;

		case '?': // unknown option
		default:
			break;
		}
	}
}
```

## オプション
`getopt` の第3引数にオプションを指定する。
1. 引数から値を取る場合は `アルファベット:`
2. 引数から値を取っても取らなくても良い場合は `アルファベット::`
3. 非オプション文字列を検出するとただちにプログラムを終了する場合は `+アルファベット`
4. 非オプション文字は文字コード1の文字として扱われる `-アルファベット`

※2と3と4は、試してないです。

## 参照ページ
http://www.fireproject.jp/feature/c-language/basic-library/getargs.html
http://www.fireproject.jp/feature/c-language/basic-library/getopt_long.html
Spring -- POST用のAPIを作成したときのエラー・エラー回避

エラー内容

o.s.w.s.m.s.DefaultHandlerExceptionResolver.handleHttpRequestMethodNotSupported() : Request method 'POST' not supported

エラー原因の候補の1つ

URLが微妙に違う、など。

```
例：
（NG）http://xxxxxxxx/abc/def/index?12345678
（OK）http://xxxxxxxx/abc/def?12345678
```
MySQL ~ SQLに関する記述・コマンドメモ


#mysqlコマンド
SQLファイルの位置するディレクトリに移動

```
$ mysql -uroot -proot DB名 < ファイル名
```

#シェルスクリプトで流す場合

1.シェルスクリプト

```hoge.sh

#/bin/sh
id="root"
pass="root"
tbl="DB名"

cmd="mysql -u$id -p$pass $tbl"
$cmd < ファイル名
$cmd < ファイル名
$cmd < ファイル名
$cmd < ファイル名

```


2.コマンド
shファイルの位置するディレクトリに移動

```
$ ./hoge.sh
```

#SQLファイルの記述

1.データベース作成

```hoge.sql
DROP DATABASE IF EXISTS `DB名`;
CREATE DATABASE IF NOT EXISTS `DB名`;
USE `DB名`;
```


2.テーブル作成


```hoge.sql
DROP TABLE IF EXISTS `テーブル名`;
CREATE TABLE IF NOT EXISTS `テーブル名` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `カラム名` varchar(45) NOT NULL DEFAULT '' COMMENT 'ユーザ名',
  `カラム名` int(11) DEFAULT NULL COMMENT '属性ID',
  `カラム名` varchar(255) NOT NULL DEFAULT '' COMMENT '認証パスワード',
  `カラム名` varchar(255) DEFAULT NULL,
  `カラム名` datetime DEFAULT NULL,
  `カラム名` datetime DEFAULT NULL,
  `カラム名` int(11) NOT NULL DEFAULT '0' COMMENT 'サインイン回数',
  `カラム名` datetime DEFAULT NULL COMMENT 'ログイン日時',
  `カラム名` datetime DEFAULT NULL COMMENT '最終ログイン日時',
  `カラム名` datetime DEFAULT CURRENT_TIMESTAMP,
  `カラム名` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`テーブル名`),
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ENCRYPTION='Y' COMMENT='ログイン情報';

DELETE FROM `テーブル名`;
INSERT INTO `テーブル名` (`id`, `カラム名`, `カラム名`, `カラム名`, `カラム名`, `カラム名`, `カラム名`, `カラム名`, `カラム名`, `lカラム名`, `カラム名`, `カラム名`) VALUES
	(1, '値', '値', '値', NULL, NULL, NULL, '値', '値', '値' '値', '値');
```

3.テーブル追加


```hoge.sql
ALTER TABLE `テーブル名`
ADD COLUMN `カラム名` varchar(255) AFTER カラム名;
```

4.レコード追加


```hoge.sql
DELETE FROM `テーブル名`;
INSERT INTO `テーブル名` (`カラム名`, `カラム名`, `カラム名`, `カラム名`, `カラム名`, `カラム名`, `カラム名`) VALUES
  ('値', '値', '値', NULL, NULL, NULL, NULL),
  ('値', '値', '値', NULL, NULL, NULL, NULL);
```
Baculaで使えるbconsoleのコマンド一覧

BaculaのCUIツールbconsoleのコマンド一覧です。
コマンドは2017年5月現在のバージョン「7.4.7」のものになります。

コマンドは随時追加していきます。


|コマンド|説明　　　　　　　　　　　　|
|:--|:--|
|add|Pool追加|
|autodisplay|コンソールへログを自動表示させる|
|automount||
|cancel|ジョブ停止|
|create||
|delete|ボリューム、プール、ジョブの削除|
|disable||
|enable||
|estimate||
|exit|bconsole終了|
|gui||
|help||
|label|ラベル付与|
|list||
|llist||
|messages||
|memory||
|mount||
|prune||
|purge||
|quit|bconsole終了|
|query||
|restore||
|relabel|ラベル再付与|
|release||
|reload||
|run|ジョブ開始|
|restart|ジョブ再開|
|resume|ジョブ一時停止|
|status|ステータスレポート表示|
|stop|ジョブ停止|
|setdebug|デバッグレベル設定|
|setbandwidth||
|snapshot||
|setip||
|show||
|sqlquery||
|time|現在時刻表示|
|trace||
|truncate||
|unmount||
|umount||
|update||
|use|使用しているカタログを表示|
|var||
|version|ディレクターのバージョン表示|
|wait||
Redmine -- テーブルにおいてセル単位で罫線を消したいとき

以下に、記述。

```
|あああああ|いいいいい|

table{border-style:none}.
|{border-style:none}. あああああ|いいいいい|
```

２番目の記法の場合、「あああああ」側の罫線が消える。

![7be6a7aa0068d5477712.png](https://qiita-image-store.s3.amazonaws.com/0/67318/9589bdff-3ddb-374b-c064-dd870b7af0b4.png)
ChatWork API の利用制限の確認方法

# ChatWork API の利用制限の確認方法

ChatWorkを活用していると時々データがロストしていることが発覚
なんでなんで、と調べているとChatWork APIには最大コール数というものが設定されており、
特定の時間内に最大までいってしまうとコールができないようです。

**5分あたり100回まで**が公式で発表されているので、これを超えないようにします。
[公式ChatWorkAPI説明](http://developer.chatwork.com/ja/endpoints.html)

## 確認方法(実際に叩いてみた)

下記のコマンドで自分自身のAPI状況がわかりました。

```
curl -i -X GET -H "X-ChatWorkToken: 自分のAPI-KEY" "https://api.chatwork.com/v2/me"
```

### 正常な場合

```
Vary: Accept-Encoding,User-Agent
X-RateLimit-Limit: 100
X-RateLimit-Remaining: 92
X-RateLimit-Reset: 1495072244
Content-Length: 498
Connection: keep-alive
```

X-RateLimit-Limit: 最大コール回数
X-RateLimit-Remaining: 残りコール回数
X-RateLimit-Reset: 次に制限がリセットされる時間（Unixtime）

上記の場合だとまだまだ全然大丈夫そう！

### 不正常な場合

```
Vary: Accept-Encoding,User-Agent
X-RateLimit-Limit: 100
X-RateLimit-Remaining: 00
X-RateLimit-Reset: 1495092244
Content-Length: 498
Connection: keep-alive
```

X-RateLimit-Limit: 最大コール回数
X-RateLimit-Remaining: 残りコール回数
X-RateLimit-Reset: 次に制限がリセットされる時間（Unixtime）

上記の場合だとお亡くなりになってます・・・

## 回避方法（他にも多分あるだろうが）

- ChatWork APIを使うときは分間何件通知が来そうなのか予測することが必要
    * それでもって5分間に100件超えないか予測をする
- 大量に通知を発生しうるBotがいれば、役割毎にBotを分けてAPI Key自体を分割させる
    * とくに大事な通知(障害発生通知とか)と、複数来るようなあまり見ない通知は分けておかないと、いざという時に大事な通知が来ない・・・

## まとめ

ChatWork便利だけど、このAPI制限をもうちょっと引き上げてもらいたいです＞＜
UWPでWindowsPhoneアプリを開発しようとしたら、エミュレータがない！

# 1. はじめに
会社でUWP開発をしようと環境構築をしたら、思いのほか詰まったのでメモします。

# 2. 環境
・OS : Windows10 EnterPrise
・CPU : Intel Core I7-3770
・メモリ : 16.0GB 
・IDE : VisualStudio Professional 2017 Ver15.2

# 3. エミュレータがない！

![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/132588/ec84842a-9d37-ffc9-0aaa-0ca5df6eaa6e.png)

VSにて、UWPのプロジェクトを作成しエミュレータを起動してデバッグをしようとしたら、
上記画像のように、エミュレータがない！
「最新のエミュレータをダウンロード中です」とでていた。（スクリーンショットを撮る前）
クリックすると下記URLに遷移するので、一番上から二番目（Windows 10 SDK (ver. 10.0.14393.795 – a QFE for 10.01.14393.033) and Microsoft Emulator for Windows 10 mobile）のInstall Emulatorをクリックしてダウンロードしてインストール
https://developer.microsoft.com/en-us/windows/downloads/sdk-archive

# 4. エミュレータがまだでてこない！
ここまでで、終わっていれば記事なんて書かなくてもよかったのだが、自分の環境ではうまくいかず・・・

![024-600x440.png](https://qiita-image-store.s3.amazonaws.com/0/132588/d3267114-896b-13c3-6b1a-9d63ceba14c9.png)
(参考：http://coelacanth.jp.net/debug_windows_10_mobile/)
このようなエラーがでました。

# 5. 解決策
### 1. Hyper-V ロールをインストールする
1. Windows ボタンを右クリックし、[プログラムと機能] を選択します。
2. [Windows の機能の有効化または無効化] を選択します。
3. [Hyper-V] を選択して、[OK] をクリックします。
（設定後、再起動が必要です。）
![enable_role_upd.png](https://qiita-image-store.s3.amazonaws.com/0/132588/72eacd43-4658-114e-8c29-ebf73de898aa.png)

(参考：https://docs.microsoft.com/ja-jp/virtualization/hyper-v-on-windows/quick-start/enable-hyper-v)

これでもまだエミュレータが表示されなければ、2番をみてください。

### 2. 仮想機能を有効にするために、BIOSを設定する
1. コマンドプロンプトを立ち上げ(Win + R cmd)、コマンド「systeminfo」を実行
2. Hyper-V の項目が一つでも「いいえ」になっていることを確認する
3. PCを再起動し、BIOSを起動する（私の環境では、真っ暗な画面の時にF10連打）
4. Security -> SystemSecuriy
5. Virtualization Technology(VTx)とVirtualization Technology Directed I/o (Vtd)をEnavbleにする
6. 保存して、立ち上げる
7. コマンドプロンプトでコマンド「systeminfo」を実行し、下記のようになることを確認(Hyper-Vの要件：　ハイパーバイザーが検出されました。Hyper-Vに必要な機能は表示されません。)
![3.PNG](https://qiita-image-store.s3.amazonaws.com/0/132588/8da8fdf9-ec4b-a3ba-602f-f5f863603aad.png)

3に書いた通りに再度インストールし、これでVSを立ち上げてみると・・・
![4.PNG](https://qiita-image-store.s3.amazonaws.com/0/132588/2c4ce5ee-7fcc-385f-2484-675a393b7438.png)

うおおお！！
やっとできたああ！！！
BIOSの設定は環境によって異なるので、一応自分が調べたサイトのリンクを貼っておきます。
・http://www.tekwind.co.jp/faq/ASU/entry_134.php

# エミュレータの起動
ようやく、エミュレータが表示され一安心しました。
しかし・・・・
*仮想マシンを作成できません:
仮想マシンの作成中にエラーが発生しました: 操作に失敗しました。
Hyper-V 仮想マシン管理サービスで予期しないエラーが発生しました: ログオン失敗: 要求された種類のログオンは、このコンピューターではユーザーに許可されていません。 (0x80070569)。*

Administrator権限のユーザーで入っているのになぁとか思いつつ、全然わかりませんでした。

### 解決策
1. タスクマネージャーを開き、Hyper-Vに関するシステムを全て強制終了する
2. Hyper-V マネージャーを開き（Win+Q Hyper-V） サーバーに接続 -> ローカルに接続
3. VSで再度実行

#　まとめ
なぜうまくいったか、なぜうまくいかなかったかはあまりよくわかっていません。
参考になれば幸いです。

Hyper-Vのことや、BIOSのこともなんとなくしか知らないので、勉強していきたいです。

UWPどころか、WPFも触ったことないのでこれから頑張ります！

# 参考資料（ざっくり）
・http://coelacanth.jp.net/debug_windows_10_mobile/
・http://kururu.dip.jp/blog/?p=2429
・https://solutions.vaio.com/396
・https://blogs.technet.microsoft.com/askcorejp/2016/01/27/hyper-v-4/
Pugで「タグA + タグA外に文字列」を含んだタグBを生成したいとき

メモです

# 前提

例えばこんなHTMLを生成したいとき

```html
<label>
  <input />
  "name"
</label>
```

私の浅い知識で↓のように書くとエラーがでる。

```
label
  input name
```

**inputタグ** が閉じタグが無いので
*「name の部分を input の中に入れることは出来ないよ！」*
ってことだと思います。

# 結論

こういう時は、`#[]`を↓のように使う。

```
label #[input(type="checkbox",:checked="d.selected",:value="d.name")]
  | {{d.name}}
```

↓のように先頭に`#[]`が来るのはNG

```
label
  #[input(type="checkbox",:checked="d.selected",:value="d.name")]
    | {{d.name}}
```

# リンク

- [本家](https://pugjs.org/language/interpolation.html#tag-interpolation)
- [Pug/ Jade - input is a self closing element: \<input/> but contains nested content?](https://stackoverflow.com/questions/38295332/pug-jade-input-is-a-self-closing-element-input-but-contains-nested-conten)
MySQL -- コマンドラインだって、変数をうまく使おう！

1_準備するもの

```sql
CREATE TABLE `test`.`userProps` (
  `idUser` VARCHAR(16) NOT NULL COMMENT '',
  `seqProp` INT NOT NULL COMMENT '',
  `nameProp` VARCHAR(45) NOT NULL COMMENT '');

INSERT INTO `test`.`userProps` (`idUser`, `seqProp`, `nameProp`) VALUES ('userABC', '1', '心');
INSERT INTO `test`.`userProps` (`idUser`, `seqProp`, `nameProp`) VALUES ('userABC', '2', '技');
INSERT INTO `test`.`userProps` (`idUser`, `seqProp`, `nameProp`) VALUES ('userABC', '3', '体');
```

2_変数の活用法

```sql
SELECT @nameProp:='技';

SELECT seqProp INTO @seqProp FROM userProps WHERE nameProp=@nameProp;

SELECT @seqProp;
```

※最後のSELECTは、「2」と表示される。
Processingとp5.js入門(他の言語をやったことある人向け)01

# Processingとは

インタラクティブなアートや作品が得意で、しばしばメディアアートに使われる言語およびIDE

## 特徴

- とても簡単に動く作品が作れる
- プロトタイプが得意
- 環境構築が死ぬほど楽

非常に楽しい言語で、私はこの言語でプログラミング沼に堕ちました。
たとえばどんなのが作れるかと言うと(gifExportというライブラリもあるんだけど、挙動がおかしいので、画面キャプチャしてます)

![kurukuru.gif](https://qiita-image-store.s3.amazonaws.com/0/156882/6f2ffebd-ef80-98a9-38a1-e07beb735981.gif)

マウスの動きに伴って周りの円が回転しています。フレームレートクソなせいで全然きれいに見えない。

## ソースコード

ソースコードはこんな感じで簡潔になります。(コードを書く人がクソなので汚いですが)
最初に一度だけ起こるイベントをsetupに繰り返したいものをdrawに書きます。
javaベースなのですぐに慣れることができます
`void setup()`
と
`void draw()`

に関数がわかれる性質上グローバル変数が多くなりがちです。

```java:kurukuru.pde
float[] x, y, pX, pY;
float[] distance;
float[] gapTheata;
color[] c;

final int n = 200;

void setup(){
  size(1000, 1000);
  background(255);
  colorMode(HSB);
  
  x = new float[n];
  y = new float[n];
  pX = new float[n];
  pY = new float[n];
  distance = new float[n];
  gapTheata = new float[n];
  c = new color[n];
  
  for(int i = 0; i < n; i++){
    x[i] = y[i] = pX[i] = pY[i] = 30;
    distance[i] = random(15, 150);
    gapTheata[i] = random(-PI, PI);
    c[i] = color(random(255), 255, 255, random(255));
  }
  
}

void draw(){
  background(255);
  noStroke();
  colorMode(HSB);
  
  for(int i = 0; i < n; i++){
    fill(c[i]);
    float theata = radians(frameCount*5.0) + gapTheata[i];
    float dist =distance[i] + 90.0*noise(theata/1.0, frameCount/100.0, i);
    x[i] = (mouseX + dist*cos(theata) + pX[i])/2.0;
    y[i] = (mouseY + dist*sin(theata) + pY[i])/2.0;
    pushMatrix();
    translate(x[i], y[i]);
    ellipse(0, 0, 20, 20);
    popMatrix();
    pX[i] = x[i]; pY[i] = y[i];
  }

  colorMode(RGB);
  fill(0);
  ellipse(mouseX, mouseY, 40, 40);
}
```

細かい説明は省きます。

## 面白いもの

- `noise(w, x, y, z)`
    - 0 ～ 1の値を返します。
    - w以外は任意です。
    - 連続を保ったまま波のようなnoise表現が加えられるという考え方でいいと思います(randomでは不連続、noiseは連続的)
    - 固定値を与えると固定の値が返ってきます
    - 値を一気に変化させると、前フレームと全然違う値が出てきます。

---
- `pushMatrix()` `popMatrix()`
    - 現在の座標状態を保存したり、元に戻したりします

---

- `colorMode()`
    - HSBとRGBを切り替えられます(これ以外は使っているところを見たことがない)。他にも引数を与えて、値の上限を変えたりできます。

---

- `color`
    - 色を保持する型です、上記のカラーモードで宣言した色を使えます。αチャネルを追加することもできます

---

- `frameCount`
    - 今のフレーム数を持っていてくれます。連続的に変化するものを作りたいとき使えます。なぜか代入することもできます。

---

## Webに移植したい

じゃあ、これをwebに移植したいと思ったときに
**p5.js が使えるんですよね**

これをwebに移植してみましょう。(次の記事で)
Java8インターフェースのデフォルト実装がもたらす罠

EOLなバージョン使うのやめようぜ...

久しぶりぶりか、もしかしたら初めてかもしれないIteratorを実装してみたんですよ。
コミットしたら何故か他の人のEclipseでは赤くなるんですよね。

```java:Java8Iterator.java
import java.util.Iterator;

public class Java8Iterator implements Iterator<Integer> {

	@Override
	public boolean hasNext() {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public Integer next() {
		// TODO Auto-generated method stub
		return null;
	}

}
```

```java:Java7Iterator.java
import java.util.Iterator;

public class Java7Iterator implements Iterator<Integer> {

	@Override
	public boolean hasNext() {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public Integer next() {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public void remove() {
		// TODO Auto-generated method stub
		
	}

}
```

違いがわかるだろうか？　Java7Iteratorではremoveメソッドあり、Java8Iteratorではremoveメソッドが実装されていないのだ。実装されていなくても問題の無い環境があったり、実装されていないとコンパイルエラーな環境もある。

プロジェクトのJava Build Pathを見ると「JRE System Library [JavaSE-1.6]」だ。Java7ですらなかったのか！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/10269/ff6c8c7e-d855-b9f4-0ec6-da27f87d24f2.png)

プロジェクトの設定がJava 1.6でもjre1.8.0を使っていると、Eclipseの「Add unimplemented methods」で生成されるコードにはremoveメソッドが含まれない。
ちゃんとjre1.6を使うようにCompatible JREを設定すると、生成されるコードにはremoveメソッドが含まれるようになった。

JDK8のsrc.zipを確認すると、Iteratorインターフェースにはデフォルト実装が記述されてますね。デフォルト実装があると未実装メソッドとしては扱われないと。

そういうわけでEOLなバージョンのJavaを葬るか、しっかりCompatible JREを設定するかしましょう。
git_pullでエラーになったとき

gitサーバーとの通信にSSL方式を採用していたとき、普通にpullし、以下のようにエラーになった場合、

```shell-session
$ git pull
fatal: unable to access 'https://xxxxxxxx/abc/zzzzzzzz.git/': SSL certificate problem: self signed certificate
```

（主に簡易証明書、採用の場合）

以下のように回避する。

```shell-session
$ git config --global http.sslVerify false
```
cat/TYPE の代替としての StreamRelay.jar

`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar`
⇔
`StreamRelay.bat`

---
### cat/TYPE コマンドの代替

ファイル→コンソールなので、「local」にファイル(コンソールの入力源をファイルにする)、「remote」にコンソール
`cat a.txt`
`TYPE a.txt`
⇔
`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar -LocalPort 0 -RemotePort 0 -LocalInputFile a.txt`

---
### 目次へ戻る

[目次というか最初の一歩](http://qiita.com/tomoki0sanaki/items/85f20cbe18378e33cd6f)
cat/TYPE の代替としての StreamRelay.NET.exe

---
### cat/TYPE コマンドの代替

ファイル→コンソールなので、「local」にファイル(コンソールの入力源をファイルにする)、「remote」にコンソール
`cat a.txt`
`TYPE a.txt`
⇔
`StreamRelay.NET.exe -LocalPort 0 -RemotePort 0 -LocalInputFile a.txt`

---
### cat/TYPE の代替としての StreamRelay.NET.exe (NTFS代替ストリーム)

[cat/TYPE の代替としての StreamRelay.NET.exe (NTFS代替ストリーム)](https://qiita.com/tomoki0sanaki/items/d505a7479f7f8c4d0d49)

---
### 目次へ戻る

[目次というか最初の一歩](http://qiita.com/tomoki0sanaki/items/85f20cbe18378e33cd6f)
[baserCMS]記事編集領域内に入れたHTMLソースが自動整形されてそのまま入らないとき


baserCMSは、記事編集にCkEditorを利用してます。
フロントエンジニアの方で作成したHTMLを、固定ページの記事編集領域にそのまま入れ込むのがよくある場面として挙げられるのですが、その際に、HTMLソース表示にして保存したあと、再度開いた際に、CkEditor側で自動整形されて、HTML構造が保存時と異なってしまう症状があります。


## 想定している対象者
- baserCMSでウェブサイトを制作をしている方
- HTMLコーディングを主とするフロントエンジニア
- PHPer


## 発生状況
HTMLの内容（html5）を、固定ページの編集領域をソース表示に切替え、そのまま保存したあと、再度同じページを管理側で開いたとき。


## 原因
CkEditorが、HTML構造を整形し、保存時のHTML構造内容を変えてしまうこと。


## 対処
以下の内容を追記して適用する。

- 対象ファイル: /js/admin/ckeditor/config.js
- 適用後、ブラウザのキャッシュを削除すること

```
CKEDITOR.editorConfig = function( config ) {
	CKEDITOR.dtd.a.div = 1;
	CKEDITOR.dtd.a.p = 1;
	CKEDITOR.dtd.label.div = 1;
};
```

他にも必要な例外処理（html5では構造上、OKとなっている事柄）を入れておくと良いかもですね。

```
CKEDITOR.dtd.a.span = 1;
CKEDITOR.dtd.a.h2 = 1;
CKEDITOR.dtd.a.h3 = 1;
CKEDITOR.dtd.a.h4 = 1;
```


### 参考記事
- [How to configure CKEditor to allow html block-level tags to be wrapped in an anchor tag - Stack Overflow](https://stackoverflow.com/questions/19825802/how-to-configure-ckeditor-to-allow-html-block-level-tags-to-be-wrapped-in-an-anc)
- http://docs.ckeditor.com/#!/api/CKEDITOR.dtd
jQueryのshow・hideメソッドに、aria-hidden属性の設定を追加する方法


#スクリーンリーダーについて
display:noneした要素の場合、多くのスクリーンリーダーでは読まれる対象にならないみたいですが、JAWSでは表示がされていなくても読まれてしまうようです。

見えていない要素が読まれてしまうというのは、意図していないところですし、なによりも、目でブラウザを見ている人と耳でブラウザを聞いている人の間に、情報の差が出てしまうことはアクセシブルではないと考えます。

##スクリーンリーダーで読まれない要素
スクリーンリーダーで読まれない要素にするためには、aria-hidden属性をtrueに設定すれば、読まれないようになります。

#jQueryのshow・hideメソッドの拡張
表示を消す処理をjQuery等で行っている場合、そのメソッドを実行する度にaria-hidden属性を変更することができれば、毎回意識せずに設定することが可能になります。

プラグインを作成するような手順でoverrideすれば良いのですが、ただoverrideするのにも抵抗がありますので、既存のメソッドを何か違うメソッドに参照させ、overrideする時に、そのメソッドをラッピングする形を取ってみました。

```js:sample　code
/*
$.fn.addAriaHidden = function() {
    $(this).attr('aria-hidden', 'true');
};　
$.fn.removeAriaHidden = function() {
    $(this).removeAttr('aria-hidden');
};

$.fn.hideOrigin = $.fn.hide;
$.fn.showOrigin = $.fn.show;

$.fn.hide = function () {
    $(this).hideOrigin().addAriaHidden();
};
$.fn.show = function () {
    $(this).showOrigin().removeAriaHidden();
};
*/

/////初期投稿時に書いた上記コードではチェーンメソッドに対応ができていない
/////以下はチェーンメソッドに対応した書き方                       

$.fn.addAriaHidden = function () {
    $(this).attr('aria-hidden', 'true');
};
$.fn.removeAriaHidden = function () {
    $(this).removeAttr('aria-hidden');
};

$.fn.hideOrigin = $.fn.hide;
$.fn.showOrigin = $.fn.show;

$.fn.hide = function () {
    $(this).addAriaHidden();
    return $.fn.hideOrigin.apply(this, arguments);
};
$.fn.show = function () {
    $(this).removeAriaHidden();
    return $.fn.showOrigin.apply(this, arguments);
};
```

参考になればと思います。
（懸念点やもっと良い方法などありましたら教示ください。）

---
指摘をいただきました。
初期投稿時に書いたコードではチェーンメソッドに対応ができていなかったので、コードを追記しました。
SendGridでメールを送信する時に改行が上手くいかない時の対処法


# SendGridでメールを送信する時に改行が上手くいかない時の対処法

SendGridを介してメールを送信する時に、Contentをplain/textにしていると意図した改行がなされないとことがある。その時の対処法を記す。
対処法と言っても、非常に簡単な設定を行うだけである。

## 生じる問題

例えば、以下のような改行コードを入れた文字列の場合に生じる(SendGridのAPIを叩くためのJSONの一部を抜粋)

```
Content: []Contents{{
       Type:  "text/plain”,       
       Value: "アイウエオ\nカキクケコ\nサシスセソ",}},
```

この場合、メールで送信されてくる中身は、以下のようなものを期待している

![expected_mail_screen.png](https://qiita-image-store.s3.amazonaws.com/0/145611/9520e59c-d2a8-527e-9512-f6c43e4887ad.png)

しかし、デフォルトの設定のままだと以下のような内容が送信されてくる

![actual_mail_screen.png](https://qiita-image-store.s3.amazonaws.com/0/145611/662b47a8-99c3-4628-86a6-2402dd1bff0e.png)

## 問題が生じる原因
SendGridの `Plain Content: Convert your plain text emails to HTML` .という設定が、OFFになっているために生じる。(Settings > Mail Settings > Plain ContentのACTIVE)
これは、その設定の説明の通り、plain text のメールをSendGridがHTMLに変換してくれるというものである。
これがあるために、改行コードが無視されたHTML形式に変換されメールが送信されるので、先ほどのような問題が生じる。

![plain_text_off.png](https://qiita-image-store.s3.amazonaws.com/0/145611/2cc3eafc-bbb4-d8dc-7065-77126a27a001.png)


## 解決策
`Plain Content: Convert your plain text emails to HTML` (Settings > Mail Settings > Plain ContentのACTIVE)の設定を「ON」にすれば良い
若干ややこしいが、「OFF」にしていると、plain text のメールをSendGridがHTMLに自動で変換されるようになってしまう。

![plain_text_on.png](https://qiita-image-store.s3.amazonaws.com/0/145611/a60ce48e-abc7-6dec-ce8c-09d0238cf86e.png)


## 関連記事
 [Go言語でSendGrid Web API v3を使って、メールを送信する](http://qiita.com/Sekky0905/items/7f7285d0a2b3e5f21e57 "Go言語でSendGrid Web API v3を使って、メールを送信する")


 [GCE上のGoのコードからSendGridを使用してメールを送信](http://qiita.com/Sekky0905/items/ce9588b29ac9fca507c2 "GCE上のGoのコードからSendGridを使用してメールを送信")
netcat の代替としての StreamRelay.NET.exe

---
### ネットワーククライアントとしてnetcatの代替

ネットワーククライアントなので、localと呼称しているストリーム側をコンソール。remoteと呼称しているストリームをネットワーク(TCP)にする
`nc.exe 192.0.2.1 90`
⇔
`StreamRelay.NET.exe -LocalPort 0 -RemoteHost 192.0.2.1 -RemotePort 90`

---
### ポートスキャンとしての netcatの代替

-z オプションは -ZeroIO
`nc.exe -z 192.0.2.1 90`
⇔
`StreamRelay.NET.exe -LocalPort 0 -RemoteHost 192.0.2.1 -RemotePort 90 -ZeroIO`

---
### ネットワークサーバとしてnetcatの代替

ネットワークサーバなので、localと呼称しているストリーム側をネットワーク(TCP)。remoteと呼称しているストリームをコンソールにする
`nc.exe -l -p 90`
⇔
`StreamRelay.NET.exe -LocalPort 90 -RemotePort 0`

---
### リバースシェルサーバのようなnetcatの代替

外部コマンドをストリームのソースにするには、ポートに-1を指定する
`nc.exe -e cmd.exe 192.0.2.1 90`
⇔
`StreamRelay.NET.exe -LocalPort -1 -LocalProgram cmd.exe -RemoteHost 192.0.2.1 -RemotePort 90`

---
### シェルサーバのようなnetcatの代替

外部コマンドをストリームのソースにするには、ポートに-1を指定する
`nc.exe -e cmd.exe -l -p 90`
⇔
`StreamRelay.NET.exe -LocalPort 90 -RemotePort -1 -RemoteProgram cmd.exe`

---
### UDP を使うnetcatの代替

基本的には「-RemoteUdp」か「-LocalUdp」でよい
`nc.exe -u 192.0.2.1 90`
⇔
`StreamRelay.NET.exe -LocalPort 0 -RemoteHost 192.0.2.1 -RemotePort 90 -RemoteUDP`

とか

`nc.exe -u -l -p 90`
⇔
`StreamRelay.NET.exe -LocalPort 90 -LocalUDP -RemotePort 0`

---
### ファイルを入力源としたhttpクライアントのようなnetcatの代替

ファイル中にHTTPリクエストを記述し、それをリダイレクトする場合、StreamRelayは、基本的に双方向通信としているので、ファイル読み込み完了→レスポンス受信前にストリーム終了、となってしまうので「-AllowHalfOpen」を指定する
`nc.exe 192.0.2.1 80 < httpRequest.txt`
⇔
`StreamRelay.NET.exe -LocalPort 0 -localinputFile httpRequest.txt -RemoteHost 192.0.2.1 -RemotePort 80 -AllowHalfOpen`

---
### ソースルーティング

IPv4 オプションのソースルーティングについては、別記事になった。

[ソースルーティング試験ツールとしてのStreamRelay.NET.exe](https://qiita.com/tomoki0sanaki/items/8da7f82c09197428d64b)

---
### 目次へ戻る

[目次というか最初の一歩](http://qiita.com/tomoki0sanaki/items/85f20cbe18378e33cd6f)
netcat の代替としての StreamRelay.jar

`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar`
⇔
`StreamRelay.bat`

---
### ネットワーククライアントとしてnetcatの代替

ネットワーククライアントなので、localと呼称しているストリーム側をコンソール。remoteと呼称しているストリームをネットワーク(TCP)にする
`nc.exe 192.0.2.1 90`
⇔
`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRealy.jar -LocalPort 0 -RemoteHost 192.0.2.1 -RemotePort 90`

---
### ポートスキャンとしての netcatの代替

-z オプションは -ZeroIO
`nc.exe -z 192.0.2.1 90`
⇔
`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar -LocalPort 0 -RemoteHost 192.0.2.1 -RemotePort 90 -ZeroIO`

---
### ポートスキャンとしての netcatの代替(SSL対応)

`-RemoteSSL` で SSL ハンドシェイクまでしてくれる
`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar -LocalPort 0 -RemotePort 443 -RemoteHost www.example.com -ZeroIO -RemoteSSL
stdin/stdout => 192.0.2.1:64025 -> www.example.com:443 open (SSL open)`

と、TCP ハンドシェイク→SSLハンドシェイク、どこまで成功したか分かるようになっている

`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar -LocalPort 0 -RemotePort 80 -RemoteHost www.example.com -ZeroIO -RemoteSSL
stdin/stdout => 192.0.2.1:64164 -> www.example.com:80 open (SSL failed)`
これだと、TCPハンドシェイクは成功したけど、SSLハンドシェイクには失敗した。
とか分かる

---
### ネットワークサーバとしてnetcatの代替

ネットワークサーバなので、localと呼称しているストリーム側をネットワーク(TCP)。remoteと呼称しているストリームをコンソールにする
`nc.exe -l -p 90`
⇔
`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar -LocalPort 90 -RemotePort 0`

---
### リバースシェルサーバのようなnetcatの代替

外部コマンドをストリームのソースにするには、ポートに-1を指定する
`nc.exe -e cmd.exe 192.0.2.1 90`
⇔
`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar -LocalPort -1 -LocalProgram cmd.exe -RemoteHost 192.0.2.1 -RemotePort 90`

---
### シェルサーバのようなnetcatの代替

外部コマンドをストリームのソースにするには、ポートに-1を指定する
`nc.exe -e cmd.exe -l -p 90`
⇔
`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar -LocalPort 90 -RemotePort -1 -RemoteProgram cmd.exe`

---
### UDP を使うnetcatの代替

基本的には「-RemoteUdp」か「-LocalUdp」でよい
`nc.exe -u 192.0.2.1 90`
⇔
`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar -LocalPort 0 -RemoteHost 192.0.2.1 -RemotePort 90 -RemoteUDP`

とか

`nc.exe -u -l -p 90`
⇔
`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar -LocalPort 90 -LocalUDP -RemotePort 0`

---
### ファイルを入力源としたhttpクライアントのようなnetcatの代替

ファイル中にHTTPリクエストを記述し、それをリダイレクトする場合、StreamRelayは、基本的に双方向通信としているので、ファイル読み込み完了→レスポンス受信前にストリーム終了、となってしまうので「-AllowHalfOpen」を指定する
`nc.exe 192.0.2.1 80 < httpRequest.txt`
⇔
`java.exe -Djava.security.policy=StreamRelay.policy -jar StreamRelay.jar -LocalPort 0 -localinputFile httpRequest.txt -RemoteHost 192.0.2.1 -RemotePort 80 -AllowHalfOpen`

---
### 目次へ戻る

[目次というか最初の一歩](http://qiita.com/tomoki0sanaki/items/85f20cbe18378e33cd6f)
UnityのHoloLensアプリにair-tapを実装する

[UnityEngine.VR.WSA.Input.GestureRecognizer](https://docs.unity3d.com/ScriptReference/VR.WSA.Input.GestureRecognizer.html)クラスを使うと、HoloLensで一般的なair-tapジェスチャーを簡単にアプリに組み込むことができます。

```csharp:使用例
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.VR.WSA.Input; // これを追加するのを忘れずに！

public class MyControl : MonoBehaviour
{
  private GestureRecognizer gesture;
  private bool airTapped;

  void Start()
  {
    gesture = new GestureRecognizer();

    // air-tapした時に呼ばれるイベント
    gestureRecognizer.TappedEvent += (InteractionSourceKind source, int tapCount, Ray headRay) =>
    {
      airTapped = true;
    };

    // ジェスチャー認識を開始
    gesture.StartCapturingGestures(); 
  }

  void Update()
  {
    // air-tap を検出したかどうか
    if (airTapped)
    {
      print("air-tap!");
      airTapped = false;
    }
  }
}
```

通常オブジェクトを動かしたりする処理は`Update`の中で行うと思うので、ジェスチャー検出した結果をフィールドに保持して`Update`から参照するようにしています。わざわざこうしなくてもイベントハンドラの中でオブジェクトを動かしたりすることもできます。

よくあるのがair-tapしたときに見ている方向に何かを出現させたり、見ている方向にあるオブジェクトを検出したりする処理だと思います。
`gestureRecognizer.TappedEvent`に追加しているイベントハンドラ`(InteractionSourceKind source, int tapCount, Ray headRay) => {...}`の引数`Ray headRay`にはまさにこれを行うための視点から前方に向かうRayが渡されるので、これを使って処理しましょう。たとえば、視点の前方2メートル地点の座標が知りたければ、このようにして取得できます。

```csharp
Vector3 position = headRay.GetPoint(2.0f);
```

視線の先に何かオブジェクトがあるかどうかを調べるには`Physics.Raycast`を使います。

```csharp
RaycastHit hit;
if (Physics.Raycast(headRay, out hit))
{
  GameObject object = hit.collider.gameObject; // 検出したオブジェクト
}
```

デバッグ時にはUnityエディター上のマウスクリックで操作できるようにしておきつつ実機上ではair-tapで同じ処理をできるようにしたかったので、こんな感じで関数化してみました。

```csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.VR.WSA.Input;

public class MyBehavior : MonoBehaviour
{
    private GestureRecognizer gestureRecognizer;

    void Start()
    {
        gestureRecognizer = new GestureRecognizer();
        gestureRecognizer.TappedEvent += (InteractionSourceKind source, int tapCount, Ray headRay) =>
        {
            OnClickHandler(headRay);
        };
        gestureRecognizer.StartCapturingGestures();
    }

    void Update()
    {
        // マウスクリックを検出
        if (Input.GetMouseButtonDown(0))
        {
            Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
            OnClickHandler(ray);
        }
    }

    private void OnClickHandler(Ray ray)
    {
        // 処理(例)

        // 視線の2メートル先の位置を取得
        Vector3 position = ray.GetPoint(2.0f);

        // マリオを出現させる (詳細は割愛)
        SpawnMario(position);
    }
}
```
MySQL -- トリガーの実装、入門編

以下に、記載。

```sql
CREATE TRIGGER trigger1 BEFORE INSERT ON table1 FOR EACH ROW trigger_stmt

・・・他の方法・・・
DELIMITER $$

CREATE TRIGGER trigger_name BEFORE UPDATE 
 ON tbl_name FOR EACH ROW
 BEGIN
   実行するSQL文1;
   実行するSQL文2;
   ...
 END;
$$

DELIMITER ;
```
from sys import stderr するか、import sys → sys.stderr を呼ぶか

Pythonコード中で標準エラー出力ストリームのことを記述するには

```python
from sys import stderr 

stderr
```
と書く方法と

```python
import sys

sys.stderr
```

と書く方法の二通りあります。stderrに限らずimportはすべてそうなのですが。
さてそれらの使い分け。前者の方がループで利用する場合にわずかにパフォーマンスが良くなるなどあるのは置いておいて、意味論的な違いがあります。

- 前者は、このモジュールをロードした時点でstderrへの参照が確定します。
- 後者は、sys.stderrを呼び出すまで参照が確定しません。

何が起こるかというと、ユニットテストのために`contextlib.redirect_stderr`を使って出力先を差し替えようとしたとき、前者だとモジュールがロード済みならstderrへの参照が確定しているため**差し替えが効きません**。後者なら処理を実行したときにはじめてsysからstderrを取得するので**差し替えが効きます**。

素のprint関数は`contextlib.redirect_stdout`で向きを変えられるので、毎回その場でsysからstdoutを取得する動作になっていると言えますから、これに振る舞いを揃えたい場合は後者の記述をすればいいということになります。
dockerを使い始めたときのメモ

### dockerインストール
`yum install docker`

### dockerサービス起動
`service docker start`

### 新規立ち上げたインスタンスなので、足りないコマンドのインストールが必要になる
```
yum install passwd initscripts vim -y
passwd

yum install openssh openssh-clients openssh-server -y
vi /etc/ssh/sshd_config
UsePAM yes
→UsePAM no  # noに変更
#PermitRootLogin yes
→PermitRootLogin yes

service sshd start
Generating SSH2 RSA host key:                              [  OK  ]
Generating SSH1 RSA host key:                              [  OK  ]
Generating SSH2 DSA host key:                              [  OK  ]
Starting sshd:                                             [  OK  ]
```
`yum install httpd git make bzip2 -y`

### PHPを利用しているので、環境切り替えのため、phpenvのインストール
```
mkdir -p repos/git
cd repos/git
git clone https://github.com/CHH/phpenv.git
cd phpenv/bin
./phpenv-install.sh
Installing phpenv in /path/to/.phpenv
remote: Counting objects: 1889, done.
remote: Total 1889 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (1889/1889), 297.15 KiB | 155 KiB/s, done.
Resolving deltas: 100% (1182/1182), done.
Success.

export PATH="/path/to/.phpenv/bin:$PATH"
eval "$(phpenv init -)"

Add above line at the end of your ~/.bashrc and restart your shell to use phpenv.
$ source ~/.bashrc
```

### php-buildインストール
```
git clone https://github.com/php-build/php-build $HOME/.phpenv/plugins/php-build
```

### apxsインストール
```
yum install httpd-devel -y
which apxs
```

### PHPコンパイルオプション設定
```
find / -name default_configure_options
vi /root/.phpenv/plugins/php-build/share/php-build/default_configure_options
--with-apxs2=/usr/bin/apxs
--with-tidy
```
### 必要なコマンドインストール
`yum install php-pear php-devel re2c file autoconf mysql-devel -y`

### PHP7インストール
`phpenv install 7.0.10`

### 旧バージョンPHPアンインストール
`yum remove php-cli.x86_64`

### 環境変数設定
```
which php
/root/.phpenv/shims/php

vi ~/.bashrc

export PATH="/root/.phpenv/bin:$PATH"
export PATH="/root/.phpenv/shims:$PATH"
eval "$(phpenv init -)"

source ~/.bashrc
```

### PHPバージョン設定
```
phpenv local 7.0.10
phpenv global 7.0.10

php -v
```

### MYSQL5.6インストール

```
yum -y install http://dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm
yum -y install mysql-community-server
mysqld --version
chkconfig mysqld on

初期設定
mysql_secure_installation
```

### コンテナ一覧(停止コンテナ含む、サイズ表示) 
`docker ps -a`

### コミット
```
docker commit コンテナID DockerHub上リポジトリ名
例：
docker commit 123456789098 test/docker-test
```

### DockerHubに反映（Push）
```
docker login

docker push test/docker-test:latest
```

### DockerHubの「Organizations & Teams」に反映
```
docker pull teamabc/test
teamabc/testはOrganizationsにあるリポジトリ名

docker commit 123456789098 teamabc/test
docker push teamabc/test:latest
```

### コンテナ起動コマンドのメモ
```
docker run --privileged --name teamabc -d teamabc/test /sbin/init
docker exec -ti teamabc bash

docker run -p 88:80 --name teamabc -d teamabc/test
docker exec -ti teamabc bash

WARNING: terminal is not fully functional回避
docker exec -ti teamabc env TERM=xterm bash
```
matplotlibやKerasでの画像の扱い

# matplotlib

[matplotlib の本家ドキュメント](https://matplotlib.org/1.3.0/users/image_tutorial.html)を参照しながら。
ここで "cat.jpg" は、高さ280ピクセル、幅300ピクセルのカラー画像とする。

```python

import numpy as np
import seaborn as sns
import matplotlib.pyplot as plt
import matplotlib.image as mpimg

img = mpimg.imread("cat.jpg")
primt(type(img)) # => <class 'numpy.ndarray'>
print(img.shape) # => (280, 300, 3) 280:高さ, 300:幅, 3:チャンネル(RGB)
print(img)
plt.imshow(img)
plt.show()

```
mping.imread() の戻り値は shape が (280, 300, 3) の numpy.ndarray で中身は、0から255までの整数である。

ちなみに、途中で `img = img / 255.0` として、0から1までの小数に変換しても、plt.imshow() は問題なく画像を表示してくれる。

# Keras

環境: TensorFlow 1.1

```python
from tensorflow.contrib.keras.python.keras.preprocessing.image import load_img, img_to_array, array_to_img

img = load_img("cat.jpg")
img2 = img_to_array(img)
print(type(img)) # <class 'PIL.JpegImagePlugin.JpegImageFile'>
print(type(img2)) # <class 'numpy.ndarray'>
print(img2.shape) # (280, 300, 3)
print(img2) # [[[  39.   44.   40.] ...
```

Keras の load_img は PIL 形式での画像を読み込むので、配列に変換するためには、img_to_array() を使う。この配列の shape は matplotlib の imread() が返す配列と同じ。数値は 0 から 255 までの並びだが、型が小数になっているので、plt.imshow() で画像を表示するには、255 で割るか、`img.as_type(np.uint8)`などとして整数型に変換する必要がある。

ImageDataGenerator 経由で得る画像もデフォルトでは 0から255までの数値（型は小数）で表現されている。つまり、img_to_array() の戻り値と同じ。
jest で Node.js の テストするなら testEnvironment: "node" を使う

jest は**デフォルトコンテキストが browser になる**。

そのため axios とかだと内部に使われるhttp requestライブラリがデフォルトで XHR になる。

XHR になると、Nodeのhttpモジュールとは違い、CORSの制約などの細々した制約を受けてしまう。

受けた結果、 **jestでだけNetwork Error** になる、CORSのエラーとしてわかりやすいエラーが出てくれたら良いが、 Network Error とだけ返ってくる事になり、意味不明の状態で半日デバッグしていたら、jsdom/xmlhttprequest で変な問題を見つけた。

https://github.com/tmpvar/jsdom/issues/1868

どうも origin が "null" (string の null) のときと access-control-allow-origin のヘッダに何も指定しないと null (普通のnull) になり、同一性チェックに失敗するようだ。

jsdom だけのコードにして再現させるまでの時間がなかったので、再現コードを作ることができなかった。そのせいですでにクローズされている。

ただこれが jsdom のせいなのか、 jest のせいなのかもう少し調べようかと思っているうちに同僚から "testEnvironment" のプロパティを教えてもらった。

```js
"jest": {
    "testRegex": "(/__tests__/.*|\\.(test))\\.(js)$",
    "testEnvironment": "node"    // <= 新規追加
  }
```

これで node として実行できるので今言った問題は解消。もう少し jest のドキュメントを見ましょうという教訓になった。。。
静的サイトジェネレータ S.S.J (Seiteki Saito Jenereta)

# 簡易静的サイトジェネレーター S.S.J

https://github.com/naga3/ssj

ヘッダ・サイドバー・フッタなどのセクションを共通化する仕組みです。

特別なテンプレートは不要で、共通セクションの元となるHTML（デフォルトでは`index.html`）から、セクション部分を他のHTMLにコピーします。

## ソースコード

```php:ssj.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Seiteki Saito Jenereta</title>
</head>
<body>
<?php
// 反映元
$src = 'index.html';

// 反映先
$dists = ['company.html', 'contact.html'];

// セクション
$sections = ['header', 'sidebar', 'footer'];

$parts = [];
$html = file_get_contents($src);
foreach ($sections as $section) {
    preg_match('|<!-- <' . $section . '> -->(.*?)<!-- /<' . $section . '> -->|s', $html, $ms);
    $parts[$section] = $ms[1];
}
preg_match_all('|<!-- <slot(\d+?)> -->.*?<!-- /<slot\d+?> -->|s', $html, $mss, PREG_SET_ORDER);
$slots = [];
foreach ($mss as $ms) $slots[$ms[1]] = null;
foreach ($dists as $dist) {
    echo "$dist:<br>";
    $html = file_get_contents($dist);
    foreach ($slots as $no => $slot) {
        if (preg_match('|<!-- <slot' . $no . '> -->(.*?)<!-- /<slot' . $no . '> -->|s', $html, $ms)) {
            $slots[$no] = $ms[1];
        } else {
            $slots[$no] = null;
        }
    }
    foreach ($parts as $section => $part) {
        $html = preg_replace('|(<!-- <' . $section . '> -->).*?(<!-- /<' . $section . '> -->)|s', '${1}' . $part . '${2}', $html);
        echo " section: $section OK<br>";
    }
    foreach ($slots as $no => $slot) {
        if ($slot) {
            $html = preg_replace('|(<!-- <slot' . $no . '> -->).*?(<!-- /<slot' . $no . '> -->)|s', '${1}' . $slot . '${2}', $html);
            echo " slot$no: $slot OK<br>";
        }
    }
    file_put_contents($dist, $html);
    echo '<br>';
}
?>
</body>
</html>
```

## 実行方法

必要なファイルは`ssj.php`のみです。
ブラウザで開くと実行されます。

その他のHTMLとCSSファイルは動作確認用のサンプルです。

## カスタマイズ

### $src

共通セクションのコピー元。

### $dists

共通セクションのコピー先。

### $sections

共通セクション名。

## セクションについて

コメントで`<!-- <セクション名> -->`と`<!-- /<セクション名> -->`に囲まれた部分が共通セクションとなります。

セクション名はデフォルトでは`header`, `sidebar`, `footer`を定義していますが、自由に名付けることもできます。

## スロットについて

共通セクションの内部にスロットを定義すると、その部分だけは上書きされなくなります。

コメントで`<!-- <slotスロット番号> -->`と`<!-- /<slotスロット番号> -->`に囲まれた部分がスロットとなります。
スロット番号は1から順番に付けてください。
MySQL -- 複数レコードを、横に並べる例

1_準備するもの

```sql
CREATE TABLE `test`.`userProps` (
  `idUser` VARCHAR(16) NOT NULL COMMENT '',
  `seqProp` INT NOT NULL COMMENT '',
  `nameProp` VARCHAR(45) NOT NULL COMMENT '');

INSERT INTO `test`.`userProps` (`idUser`, `seqProp`, `nameProp`) VALUES ('userABC', '1', '心');
INSERT INTO `test`.`userProps` (`idUser`, `seqProp`, `nameProp`) VALUES ('userABC', '2', '技');
INSERT INTO `test`.`userProps` (`idUser`, `seqProp`, `nameProp`) VALUES ('userABC', '3', '体');
```

2_実際のSQL

```sql
SELECT idUser, GROUP_CONCAT(seqProp ORDER BY FIELD (seqProp, 1, 2, 3)) AS tempCSV FROM userProps GROUP BY idUser HAVING tempCSV='1,2,3';
```

3_SQL結果

![qt_001.png](https://qiita-image-store.s3.amazonaws.com/0/89355/4e71c8ce-1b79-7acd-8913-121ffe1d52a5.png)
ファイル関連（備忘）

ファイルの読み書きの備忘

```python:sample.rb
#ファイルの読込
orderSum = {}

with open('input/input.txt', 'r', encoding='utf-8') as f:
    for row in f:
        data = row.rstrip().split(',')
        name = data[0]
        order = data[1]
        if order in orderSum:
            orderSum[order] += 1
        else:
            orderSum[order] = 1

with open('output/output.txt', 'w', encoding='utf-8') as f:
    for key, value in orderSum.items():
        f.write(key + ':' + str(value) + '\n')
```
特定のgemの更新をCIでチェックする


銀行コードのgem([zengin_code](https://github.com/zengin-code/zengin-rb))や祝日判定のgem( [holiday_japan](https://github.com/masa16/holiday_japan))など、現実世界に合わせてアップデートされるgemは忘れずにアップデートしたいので、簡単なシェルスクリプトを書いてCIでチェックするようにしました。

```sh
#!/bin/sh

echo "Checking outdated gems..."

# 銀行コードや祝日のデータが更新されたときに忘れないように
result=$(bundle outdated | grep -E -e "(zengin_code|holiday_japan)")
if [ -n "$result" ]; then
  echo "Please update outdated gems!"
  echo "$result"
  exit 1
fi
```

gemのメンテナーさんが更新してくれないとどうしようもないけど、それはそれ。チェックしないよりマシということで。
XtraBackupでMySQLのレプリケーションを構成する


#はじめに
XtraBackupを利用して、MySQLのレプリケーションを構成します。
非常に簡単です。

#XtraBackup概要
- https://www.percona.com/doc/percona-xtrabackup/2.4/index.html
- オンラインでデータディレクトリを丸ごとバックアップできるため、リストアが高速
- 単体ではInnoDBのDBのみバックアップされるが、ラッパースクリプトinnobackupexを利用することで下記もバックアップされる。
  - MySQLシステムデータベース(mysql, performance_schema)
  - MyISAMデータファイル
  - InnoDBテーブル定義ファイル(.frm)

##メリット
- バックアップ成果物はMySQLデータディレクトリそのものなので、ログ適用→フォルダの入れ替えによるリストアとなり、作業が楽
- リストアが高速。12GBのデータベースのリストアが5分程度で完了（gzip解凍時間込み）
- レプリケーション構築も簡単
- --no-lockオプションにより、ロックフリーでのバックアップが可能

##デメリット
- mysqldumpに比べて圧縮後のバックアップファイルサイズが大きい
- バックアップ取得はそれなりに時間がかかる

##特記事項
- --compressで圧縮できるが、qpressのインストールが必要（XtraBackupと同じリポジトリにある）。ファイル単位で圧縮される。
- --decompressで解凍できるが、圧縮ファイルが残るので、別途手動削除が必要。
- 圧縮速度を高めるためにストリームを多重化し、マルチスレッドで処理することが可能
 - 参考：http://blog.father.gedow.net/2012/12/05/percona-xtrabackup-parallel/

#手順
##master
###1.バックアップ
####非圧縮
```Bash:command
# mkdir /tmp/xtrabackup
# innobackupex --user=root --password=XXXXXXXX /tmp/xtrabackup
 
# ll /tmp/xtrabackup
drwxr-x--- 6 root root 4096 Apr 27 12:05 2017-04-27_12-05-05
 
# ll /tmp/xtrabackup/2017-04-27_12-05-05
total 12340
-rw-r----- 1 root root      425 Apr 27 12:05 backup-my.cnf
drwxr-x--- 2 root root       55 Apr 27 12:05 example
-rw-r----- 1 root root      300 Apr 27 12:05 ib_buffer_pool
-rw-r----- 1 root root 12582912 Apr 27 12:05 ibdata1
drwxr-x--- 2 root root     4096 Apr 27 12:05 mysql
drwxr-x--- 2 root root     8192 Apr 27 12:05 performance_schema
drwxr-x--- 2 root root     8192 Apr 27 12:05 sys
-rw-r----- 1 root root       21 Apr 27 12:05 xtrabackup_binlog_info
-rw-r----- 1 root root      113 Apr 27 12:05 xtrabackup_checkpoints
-rw-r----- 1 root root      471 Apr 27 12:05 xtrabackup_info
-rw-r----- 1 root root     2560 Apr 27 12:05 xtrabackup_logfile
```

####gzip圧縮
```Bash:command
# innobackupex --user=root --password=XXXXXXXX --stream=tar /tmp/xtrabackup | gzip - > /tmp/xtrabackup/master_xtra.tgz
```

##slave
###1.masterからバックアップファイルを転送
/tmp/xtrabackupに置くと仮定

###2.リストア
####a.解凍
```Bash:command
# cd /tmp/xtrabackup
# tar zxvf master_xtra.tgz
# rm master_xtra.tgz
```

####b.ログ適用（必須）
```Bash:command
# innobackupex --apply-log /tmp/xtrabackup/
```

####c.mysql停止
```Bash:command
# service mysqld stop
```

####d.データディレクトリ退避
削除でもいいです。

```Bash:command
# mv /var/lib/mysql /var/lib/mysql.bk
```

####e.リストア
```Bash:command
# mv /tmp/xtrabackup /var/lib/mysql
# chown -R mysql:mysql /var/lib/mysql
```

####f.mysql起動
```Bash:command
# service mysqld start
```

###3.レプリケーション設定
####a.バイナリログ、ポジション情報確認
バックアップ時に作成されるxtrabackup_binlog_infoファイルにログポジンション情報が記載されています。便利！

```Bash:command
# cat /var/lib/mysql/xtrabackup_binlog_info
 
mysql-bin.000008    473
```

####b.change master to
先ほどの情報をもとに`change master to`します。

```Bash:command
# mysql -uroot -p
mysql> change master to
master_host='XX.XX.XX.XX',
master_user='REPLUSER',
master_password='REPLPASSWORD',
master_log_file='mysql-bin.000008',
master_log_pos=473;
```

####c.レプリケーション開始
```Bash:command
mysql> start slave;
```

####d.スレーブの状態確認
```Bash:command
mysql> show slave status\G
```

#まとめ
とにかくリストアが高速なのが非常に使いやすいと思います。
インポートの終了をドキドキして待つのに比べて、精神衛生上もメリットが大きいかと。
MEMキャッシュサーバー確認方法_#1

1. telnetサーバーがインストールされていること。
2. telnetコマンドで、memキャッシュサーバーへアクセスする。
3. 以下、一例。

```shell-session
stats items

stats cachedump 17 6
ITEM e70b5fe642a5585cc9cdfe3b15b43a0e [3508 b; 1467682182 s]
get e70b5fe642a5585cc9cdfe3b15b43a0e
```
テスト環境と本番環境を見誤らないためのchrome拡張

# はじめに

保守・運用しているWebサイトやシステム、管理しているサーバー等は本番環境とステージング環境、開発環境と、見た目が酷似していて見分けがつかないため、たまにこんなことがおこります。

* 開発環境でテストしていたつもりが、本番環境にリンクが貼られていて、いつの間にか本番でテストしていた。
* テスト環境にアップしているのに本番環境で確認していて「あれ？動かない」と悩む。
* 複数台で冗長化されているサーバーの管理コンソールが見た目同じで、どのサーバーを見ているのか混乱してくる。

こういった場合に誤って本番環境で誤った処理をしてしまうと大変なリスクになります。開発環境の背景色を変えておいて見た目で分かるようにしておくといった工夫も考えられますが、変えた背景色のスタイルを誤って上げてしまうというリスクも考えられます。

サイトによっていちいち「どうするか」と考えている時間がもったいないと思ったので、簡単にラベルを貼り付けられるchrome拡張を作ろうと思いたち、作ってみました。良かったら使って下さい。


# 概要

ホスト名によってラベルを表示するだけの軽量な機能拡張です。

![スクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/9064/bdcc9ec2-1ac3-d3bc-6f13-a7b2105bef03.png)

[ストア](https://chrome.google.com/webstore/detail/web-site-labeler/mjfpdplnncblmeagcgaahpbdmkpchhek?utm_source=qiita)からダウンロードしてご利用ください。


# クイックスタート

1. ラベルを貼りたいサイトにアクセスします。

2. 右上のアイコンをクリックし、「このサイトにラベルを貼る」を選択。

3. 管理ホストが追加されるので「編集」で任意のラベルやスタイルを設定。「送信」で保存。

4. 元のサイトに戻って再読込するとラベルが表示されます。


デフォルトでスタイルが多数設定されていますが、ラベルのルールを決めればこんなにスタイルは要らないでしょうから、「削除する」で必要最低限に絞ったほうが効率的です。例えば、本番は目立つように赤いラベルを右上に、開発環境は地味なダークブルーにして右下に、とルールを決めるなど。


# 最後に

今回はじめてchrome拡張を作ったので、色々至らないところがあるかもしれません。もし[ご要望があればこちらに](https://gitlab.com/digichro/web-site-labeler/issues)どうぞ。
MySQL サーバー向けの Azure データベースを作成してみる

まだプレビューですが、AzureでMySQLをPaasとして利用できるようになったので、
サービスを立ててみようと思います。
自分のメモ用にqiitaに残しておきます

### MySQLサーバー向けのAzureデーターベースを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/80457/d14275ea-b9cb-6a11-a8f5-cc9cbea59f30.png)

### とりあえず追加します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/80457/8ba402b8-62b2-e8b3-6099-01061dd0be08.png)

### サーバー名とかを入力していきます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/80457/507368c0-264e-2dd1-3b2d-98425bdea658.png)
Automationオプションを選択すると現在の入力値をJsonでダウンロードできます。
次回以降作成のために是非ダウンロードしておきましょう。

#### 価格レベルについて
現在はプレビューなのでbasicのみの提供。
最低スペックでも月に2375.50円です。SQLDBより高いです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/80457/f7811bd8-66bb-a339-6a01-b10c2ea46d70.png)
当然一番低スペックで作成しますが、遊び終わったら削除します。。。

####コンピューティングユニットとは
https://docs.microsoft.com/ja-jp/azure/mysql/concepts-compute-unit-and-storage
より引用
![image.png](https://qiita-image-store.s3.amazonaws.com/0/80457/041ab716-f2db-047e-e703-461c54d72384.png)
だそうです。

### サーバー作成完了
![image.png](https://qiita-image-store.s3.amazonaws.com/0/80457/29a8803d-9657-15c4-24b9-585008adfa69.png)

###データベースはポータルからは建てられない？！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/80457/edc62401-9a4f-33c7-7640-dff2048bfe29.png)
サーバーはできたけどデータベースはなしになっています。SQLDBのノリで作ろうと思いましたが、ポータルにはデータベース作成のメニューがありませんでした。
プレビューだからと信じてます。

とりあえず今日はここまでにしておきます。

追記：
postgreSQLの方も同じノリで作成できます。
しかしMySQLと違いデータベースの作成までしてくれるみたいです。
なぜだろうか？！