OmniAICreator/Qiita-1.07M huggingface dataset:
JSのアロー関数のreturnの書き方いろいろ

##普通のJSで書くと
```js

var multiplication = function(x,y){
	return x * y;
};
multiplication(2,10);
```

##ES6のアロー関数で書くと
```js
let multiplication = (x,y) => {
	return x * y;
}
multiplication(2,10)
```

###さらに戻り値がそのままならreturnが省略できる

```js
let multiplication = (x,y) => (
	x * y
)
multiplication(2,10)
```

###さらにさらに1行なら()もいらない

```js
let multiplication = (x,y) => x * y
multiplication(2,10)
```

##引数の有無でも書き方が違う

```js
// 引数が一つなら
let multiplication = x => x * x
multiplication(2)

// 引数が二つ以上なら
let multiplication = (x,y) => x * y
multiplication(2,10)

// 引数がない場合
let multiplication = () => 2 * 10
multiplication()
```
WordPressで新規ブログ作成時に入れておくプラグイン一覧

ブログの初期設定でとりあえず入れる用メモ


## Widget logic

ウィジェットの条件分岐。アドセンスの表示、非表示に使う。
https://wordpress.org/plugins/widget-logic/

## All in one seo

とりあえずSEO

## JP Markdown

Markdownで投稿する

## Anti-spam

コメントスパムをとりあえず弾きたいなら

## Easy Table of Contents

もくじの表示

## Autoptimize

ソース圧縮・軽量化

## Contact Form 7

フォーム

## PS Auto Sitemap

ユーザ用サイトマップページ

## 必須ではないやつ

- WP All Export：記事一覧をCSVエクスポート
mochaのhook関数が呼ばれる順番

mochaで、describeをネストして書くことが多いんですが、その時にhook関数がどういう順番で呼ばれるのか不安に駆られたので調べてみました。

テストコードはこんな感じです。行数削減のために詰めて書いているのでちょっと見難いですが、ご容赦ください。

```javascript
const {expect} = require("chai");

before(function(){console.log("global before")});
beforeEach(function(){console.log("global beforeEach")});
after(function(){console.log("global after")});
afterEach(function(){console.log("global afterEach")});

describe("hook call order test", function(){
  before(function(){console.log("before 1")});
  beforeEach(function(){console.log("beforeEach 1")});
  afterEach(function(){console.log("afterEach 1")});
  after(function(){console.log("after 1")});

  describe("inner describe", function(){
    before(function(){console.log("before 2")});
    beforeEach(function(){console.log("beforeEach 2")});
    afterEach(function(){console.log("afterEach 2")});
    after(function(){console.log("after 2")});

    it("test case 1", function(){
      expect(true).to.be.true;
    });
    it("test case 2", function(){
      expect(true).to.be.true;
    });
  });
  describe("inner describe 2", function(){
    before(function(){console.log("before 3")});
    beforeEach(function(){console.log("beforeEach 3")});
    afterEach(function(){console.log("afterEach 3")});
    after(function(){console.log("after 3")});

    it("test case 1 in describe 2", function(){
      expect(true).to.be.true;
    });
    it("test case 2 in describe 2", function(){
      expect(true).to.be.true;
    });
  });
});
```

これを実行すると次のようになります。

```
global before
  hook call order test
before 1
    inner describe
before 2
global beforeEach
beforeEach 1
beforeEach 2
      ✓ test case 1
afterEach 2
afterEach 1
global afterEach
global beforeEach
beforeEach 1
beforeEach 2
      ✓ test case 2
afterEach 2
afterEach 1
global afterEach
after 2
    inner describe 2
before 3
global beforeEach
beforeEach 1
beforeEach 3
      ✓ test case 1 in describe 2
afterEach 3
afterEach 1
global afterEach
global beforeEach
beforeEach 1
beforeEach 3
      ✓ test case 2 in describe 2
afterEach 3
afterEach 1
global afterEach
after 3
after 1

global after

  4 passing (14ms)
```

呼ばれる順番は、before/beforeEachはネストの外側から順番、after/afterEachはネストの内側から順番ですね。

内側のdescribe関数に書いたbefore関数は、そのdescribe関数の中にあるテストケース(it関数)が呼ばれる前に呼ばれて、after関数は、そのdescribe関数の中にあるテストケースと、afterEach関数が呼ばれた後に呼ばれるようです。

before/afterという名前に釣られて、テスト開始時にbefore関数が全部呼ばれて、after関数は終了直前まで呼ばれないような気がしていたんですが、hookを定義したdescribe関数の内側のテストケースを開始する直前と直後で呼ばれるんですね。

<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="クリエイティブ・コモンズ・ライセンス" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />この記事は <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">クリエイティブ・コモンズ 表示 4.0 国際 ライセンス</a>の下に提供されています。
初心者のローカル開発環境の構築　～Windows編～

#ローカル開発環境の構築を目指す！
プログラミング初心者のpiitaです。
プログラミングをがりがり勉強していこうと思った所、勉強には「開発環境」というものが必要だと聞きました。
そこで、この記事では「ローカル開発環境を構築する方法」について話ていきたいと思います。


#ローカル開発環境の構築のための準備
ローカル開発環境構築のために必要な知識について見てきます。

##必要なもの
とりあえず、ローカル開発環境構築の準備段階のお話です。

・WindowsPC
・Atom
・VirtualBox
・Vagrant
・Powershell
・PuTTY

##参考にしたサイトなど
ドットインストール:ローカル開発環境の構築［Windows編］
https://dotinstall.com/

#ローカル開発環境の基本
##開発環境とは
まずは、そもそも開発環境とは？という部分を説明します。
「開発環境」とは「開発を行う作業場」のことを指します。
そもままですよね（笑）
もっと具体的に言いますと、開発に必要なPCやソフト、アプリケーションなどの準備が整っている場所のことを指します。

##ローカルとは？
つづいて「ローカル」についての説明です。
「ローカル」と反対の概念で「リモート」というものもあるので、一緒に説明します。

ローカル：自分のパソコン
リモート：自分のパソコンから離れているサーバーやパソコン

##ローカル開発環境とは？
つまり「ローカル開発環境」=「自分のパソコン内にある作業場」のこと。
そして「ローカル開発環境の構築」=「自分のパソコンの中に作業場を作ること」と言えます。


##ローカル開発環境の構築の「１番」の目的
ローカル開発環境の構築の目的は、ただ「プログラミングに必要なソフトウェアやアプリケーションをインストールすること」だけではありません。
１番の目的はプログラムの「開発環境（自分のPC）」と「公開環境（サーバーなど）」を同じにすることです。

開発環境と公開環境の関係は、以下のような状態になっています。

・開発環境（自分のPC）：MacかWindowsのOSで動いている
・公開環境（サーバー）：LinuxというOSで動いている

つまり「開発環境」と「公開環境」のOSが異なるのです。
その結果、「自分のPCで作ったプログラムを、サーバー上で実際に動かそうとするとうまくいかない...」という状態になるのです。
それを防ぐための「ローカル開発環境の構築」なのです。

___
・「公開環境」
公開環境とは、開発してプログラムなどを公開して実際に稼働させる場所のこと。
主にサーバーがその役割を果たす。

・「OS」
Operating Systemの略。パソコンやスマートフォンなどに導入されているソフトウェアの１つで、システム全体の管理を行う。
OSの上に様々なアプリケーションやシステム（word、Internetなど）がなっているイメージ。
一般的には、「Windows用のアプリケーションをMacOSでは動かせない」といった制限もある。


##
###

WindowsPowershell
コマンドシェル
CLI　CUI　GU
【Shader】ボリュームレンダリングで3Dノイズを可視化する

#はじめに
ボリュームレンダリングは雲の表現やCT、MRIの画像等に対して利用されるレンダリング方式です
このボリュームレンダリングと3Dノイズを組み合わて遊んでいきます

#できあがり
メッシュにはプリミティブのCubeを使用しています。ボリュームレンダリングを適用する事で、あたかもCubeに中身があるような表現になっていると思います
癒やされるなあ〜〜
![ao.gif](https://qiita-image-store.s3.amazonaws.com/0/193550/2bc25613-e6b8-f0a9-cdfb-48bbafc3467a.gif)

Cube3つ重ね
![rainbow.gif](https://qiita-image-store.s3.amazonaws.com/0/193550/9e141365-dfa9-5be9-27f4-0320fa5b1122.gif)

##ソースコード
参考にさせて頂いた記事やGitHubのソースを切って張り合わせた程度の内容です
今回は流線表現に利用されたりするカールノイズを使います
`SimplexNoise.cginc`はKeijiro氏の[SimplexNoise3D.hlsl](https://github.com/keijiro/NoiseShader/blob/master/Assets/HLSL/SimplexNoise3D.hlsl)を利用しています

```glsl:VolumeCurlNoise.shader
Shader "Volume/CurlNoise" {
	Properties {
		[HDR] _Color ("Color", Color) = (1,1,1,1)
		_Size ("Size", Range(0, 10)) = 1.0
    	_Iteration("Iteration", Int) = 10
    	_Intensity("Intensity", Range(0, 1)) = 0.1
	}
	SubShader {
		Tags { "RenderType"="Transparent" "RenderQueue"="Transparent" }
		Cull Off
		ZWrite Off

		CGPROGRAM
		#pragma surface surf Lambert alpha vertex:vert
		#include "SimplexNoise.cginc"

		struct Input {
			float3 worldPos;
			float3 localPos;
			float3 viewDir;
		};

		fixed4 _Color;
		int _Iteration;
		fixed _Intensity;
		fixed _Size;

		float3 curlnoise(float3 p) {
			const float e = 0.009765625;
			const float e2 = 2.0 * e;

			float3 dx = float3(e, 0., 0.);
			float3 dy = float3(0., e, 0.);
			float3 dz = float3(0., 0., e);

			float3 p_x0 = snoise(p - dx);
			float3 p_x1 = snoise(p + dx);
			float3 p_y0 = snoise(p - dy);
			float3 p_y1 = snoise(p + dy);
			float3 p_z0 = snoise(p - dz);
			float3 p_z1 = snoise(p + dz);

			float x = p_y1.z - p_y0.z + p_z0.y;
			float y = p_z1.x - p_z0.x + p_x0.z;
			float z = p_x1.y - p_x0.y + p_y0.x;
			return normalize(float3(x, y, z) / e2);
		}

		void vert (inout appdata_full v, out Input data) {
			UNITY_INITIALIZE_OUTPUT(Input,data);
			data.localPos = v.vertex;
			data.worldPos = mul(unity_ObjectToWorld, v.vertex);
		}

		void surf (Input IN, inout SurfaceOutput o) {
			float3 wdir = IN.worldPos - _WorldSpaceCameraPos;
			float3 ldir = normalize(mul(unity_WorldToObject, wdir));
			float3 lstep = ldir / _Iteration;
			float3 lpos = IN.localPos;
			fixed output = 0.0;

			[loop]
			for (int i = 0; i < _Iteration; ++i)
			{
				fixed a = curlnoise((lpos + 0.5) * _Size).r;
				output += (1 - output) * a * _Intensity;
				lpos += lstep;
				if (!all(max(0.5 - abs(lpos), 0.0))) break;
			}

			fixed4 c = _Color * output;

			o.Albedo = c.rgb;
			o.Alpha = c.a;
		}
		ENDCG
	}
	FallBack "Diffuse"
}
```


#参考
[Unity でボリュームレンダリングをしてみる - vol.1 データ表示](http://tips.hecomi.com/entry/2018/01/05/192332)
[Noise Shader Library for Unity](https://github.com/keijiro/NoiseShader)
[Curl Noise書いてみた](https://qiita.com/nyamadandan/items/2a8bc7a3639e7b5ce9c9)
Jenkinsでgitのエラーで失敗してしまう時に確認すること

初めに
=============

Jenkinsでgitを使っているジョブがあるときに
例えば、そのジョブの実行中にをgitのプロセス中に強制終了すると次のビルドがgitエラーを出して失敗するようになるかもしれません。

例)

```
ERROR: Error fetching remote repo 'origin'
hudson.plugins.git.GitException: Failed to fetch from https://github.com/hogehoge/fugaaa.git
	at hudson.plugins.git.GitSCM.fetchFrom(GitSCM.java)
	at hudson.plugins.git.GitSCM.retrieveChanges(GitSCM.java)
	at hudson.plugins.git.GitSCM.checkout(GitSCM.java)
	at org.jenkinsci.plugins.workflow.steps.scm.SCMStep.checkout(SCMStep.java)
	at 
（略）
```

そういうときのいくつかの対処法

ちなみにコンフリクト起こしているときとかはうまくマージしたりcheckoutとかreset --hardとかすれば直る多分きっと。
ジョブ上でgit落としてくる前に何かそういう対策したければ[pre-scm-buildstep](https://wiki.jenkins.io/display/JENKINS/pre-scm-buildstep)なんてのもある。


1.lockファイルを削除する
-----------------

たいていこれでいける
エラーログに次のようなログがあったらそのファイルを削除してあげればOK
スクリプトコンソールとかで消してあげれば楽

```
fatal: Unable to create 'C:/path/to/.git/index.lock': File exists.
```

2.gitのプロセスを殺す
----------------

上記ファイルが消せない場合は恐らくgitのプロセスがゾンビ化してlockファイルをつかんじゃってる可能性がある

なので例えば

```powershell:powershell

ps git | kill
```

とかしてgitのプロセスを殺してあげると1の操作ができるようになる。
（なお上記コマンドはほかのgitプロセスも皆殺しにするのでそこだけ注意）
安易にdivタグを消すな

***
#改修でdivタグを消して注意されたので戒めとしてメモする。(既存ソース改修)

***
###やりたかったこと
`<div class="hoge”>`のクラス名が悪さをしていたので消したかった。


###やったこと
`<div class="hoge”>`を削除。



***
###その時考えていたこと

見た感じこのdivタグで何かやってる感じしないし、divタグごと消せばよくね
要らない物を残す必要ないし


***
###結果

挙動的には問題ないのでプルリクを出す。
が、ソースレビューでNG


***
###ダメだったところ

divタグとCSSのセレクタのことを詳しく知らずに安易に消した点
隣接セレクタの存在

***
###隣接セレクタの存在とは
```隣接セレクタとは同じ階層にある要素同士で、 ある要素の直後に隣接している要素を対象にスタイルを適用することができる存在```

このdiv他の部分に影響を与える可能性があるということ。

***
###まとめ
CSSにも注意して修正
CircleCIで.envファイルを扱う


ENVファイルをCircleCIに登録してきましょう。
CircleCIのプロジェクト設定を開いて ` Environment Variables ` を開きます。
![スクリーンショット 2018-07-28 15.08.17.png](https://qiita-image-store.s3.amazonaws.com/0/77203/108d3b63-0a2e-f71e-8891-6f85818bb31f.png)

開いたら右上にある ` Add Variable` をクリックします。
![スクリーンショット 2018-07-28 15.08.21.png](https://qiita-image-store.s3.amazonaws.com/0/77203/e63e1e6d-bbbe-4037-dc10-23fe37612a33.png)

するとモーダルが表示されるのでNameに `ENV` Valueには.envをBase64でエンコードした文字列を入れておきます

最後に下の行をステップのはじめの方に入れておけばokです

```yaml
- run: echo ${ENV} > ~/.env   
```
大気中の大気汚染物質や花粉の量から、マスクを付けて外出したほうが良いかを Slack で通知するアプリをつくりました

# 概要
https://github.com/chan-yo/mask
導入方法はこちら。詳細は READNE.md にも記載しておりますが、  

- 環境省の HP から、大気汚染物質と花粉情報をクローリングする  
- 取得対象の都市は自由に指定できる(HPに掲載されている範囲内で)  
- 花粉については、通知する際の閾値を自由に変更可能  
大気汚染物質は環境基準値に従って通知されます(個人で強い弱いとか無いと思うので)  
- 1日3回自動的に Slack に通知される  
- github のコードのバージョンアップを確認したら Slack へ通知する

といった仕様です。

## 通知例  
### マスク着用の必要有り
![大気汚染物質、花粉量が基準値を超えた場合](https://github.com/chan-yo/mask/raw/master/image/notice.png "大気汚染物質、花粉量が基準値を超えた場合")
### マスク着用の必要無し  
![大気汚染物質、花粉量が基準値を超えていない場合](https://github.com/chan-yo/mask/raw/master/image/no_notice.png "大気汚染物質、花粉量が基準値を超えていない場合")


# きっかけ
2018年4月27日。札幌市内の PM2.5 濃度が急激に上昇するというニュースがありました。
https://www.sankei.com/life/news/180427/lif1804270035-n1.html
> 北海道でＰＭ２・５濃度上昇　ロシア極東の森林火災影響か

このときは Twitter でたまたま外出前に情報を知ることが出来たので、マスクを付けて外出しました。
今後も何らかの形で事前に知ることが出来たらなーと思ったのがきっかけです。
あとは花粉症が辛いので、花粉量が特に多い日は外出前に予め知っておきたいとも思いました。

※後日、環境省の大気汚染物質広域監視システム（そらまめ君）その日の大気汚染物質の情報を見てみようとしたんですが、PM2.5の測定情報は残っていませんでした。
http://soramame.taiki.go.jp/DownLoad.php
また、開発が終了したときは花粉情報の提供期間も過ぎていたので、このアプリで本当に目的が達成されるかどうかはまだわかっていないです。

# 感想  
Google Spreadsheet と Slack を組み合わせたら、サーバを用意しなくとも簡易的なアプリケーションは簡単に作れるんだと思いました。
今回は通知先に Slack を利用したので非エンジニアには少し環境構築など敷居が高かったかもしれないので、今度は、 Google Spreadsheet と LINE を組み合わせた同様のアプリケーションが作ってみたいですね。
数字がいつの間にか文字列オブジェクトになっていてはまった話

style propertyでthis.pops.numberの値を使ってmarginTopなどの値にしようとしていたがなぜか、marginTopが効かない...........


次の日　もう一度考えるともしかしたら数字ではなく文字列としてかえってきてしまっているのでは　と思ったらそうだった...

Number(this.props.number)で解決
OculusGoからWindows共有フォルダ(sambaサーバ, UNCパス)のファイルを読む方法

OculusGoというか、androidをターゲットとしたunityアプリケーションでSambaサーバに接続してファイルを読み込む方法。
(とりあえずwindows共有フォルダのテキストファイルが読めるところまでしか試していないけれど、取っ掛かりにはなると思う)

環境: Unity 2018.1.5f1 (64-bit) Personal 

## 事前準備

あらかじめ Assets/Plugins に
https://jcifs.samba.org/src/
からダウンロードした「jcifs-1.3.19.jar」をコピーしておく。

## コード

以下のコードで、\\192.168.XXX.XXX\share\test.txt の1行目の内容を読み込むことに成功した。

```c#
try {
	string user   = "user";
	string pass   = "pass";
	string server = "192.168.XXX.XXX";
	string path   = "share/test.txt";
	string smb = "smb://" + user + ":" + pass + "@" + server + "/" + path;

	using (AndroidJavaObject sfis = new AndroidJavaObject("jcifs.smb.SmbFileInputStream", smb))
	using (AndroidJavaObject inputSr = new AndroidJavaObject("java.io.InputStreamReader", new [] {sfis} ))
	using (AndroidJavaObject butterR = new AndroidJavaObject("java.io.BufferedReader"   , new [] {inputSr} )) {
		string line = butterR.Call<string>("readLine");

		MyOVRDebug.Log(line); // これは単にOculusGo上で文字表示するための自作関数
	}
} catch (System.Exception ex) {
	MyOVRDebug.Log(ex.ToString());
}
```

## 参考にしたURL

- JCIFSライブラリの使い方
http://blog.happylifecreators.com/?p=368

- AndroidJavaClass の使い方
https://qiita.com/YukiMiyatake/items/c8c2ef396fbf4457ba4f

- JCIFS (javaで動作する SMB クライアントの実装)
https://jcifs.samba.org/
(LGPLライセンス)
Google Cloud Storage (GCS) の公開方法が更新されてる件

#備忘録
GCS の仕様変更で、静的コンテンツの公開方法が少し変わったメモ

#従来
下の画面の”公開アクセス”の非公開をクリックして、公開してた
![スクリーンショット 2018-08-13 11.28.31.png](https://qiita-image-store.s3.amazonaws.com/0/184724/131541cd-8388-a7e5-3be4-7779046d1e4b.png)

#今回
権限を追加して、公開するように変更
変更の詳細は参考サイトを確認してね
今回は、手順だけメモ

右のメニューボタンを押して、"権限を編集"
![スクリーンショット 2018-08-13 11.28.51.png](https://qiita-image-store.s3.amazonaws.com/0/184724/9e09f627-08a9-4087-1c1c-02dc7b2498c4.png)

下のようにアノニマスユーザをリード権限をつけて追加する
![スクリーンショット 2018-08-13 11.29.21.png](https://qiita-image-store.s3.amazonaws.com/0/184724/fe4c3808-3f6d-2508-c8f8-d6777c1ed7d1.png)

すると、下のように公開され、公開情報も見れるようになる
![スクリーンショット 2018-08-13 11.31.38.png](https://qiita-image-store.s3.amazonaws.com/0/184724/bf15a2d4-63e0-c2aa-16b6-80416acf2e7a.png)

以上

#参考サイト
ありがとうございます！
http://iga-ninja.hatenablog.com/entry/2017/10/23/195630
横スクロール可能な要素内のflexbox要素のwidthが途中で切れてしまうときの対処

## 現象

* スクロール可能な要素内のflexbox要素サイズが途中で切れる。（本当はスクロールしたら全部で2000pxあるはずなのにスクロールしない状態の1200pxになる等）
* その影響でflexbox要素のスタイル（backgroundやborder）が途中で切れる。
* `position: sticky` が途中で解除されてしまう。

```html
<div class="table">
  <div class="line">
    <div class="cell">aaa</div>
    <div class="cell">bbb</div>
    <div class="cell">ccc</div>
    <div class="cell">ddd</div>
    <div class="cell">eee</div>
  </div>
</div>
```

```css
.table {
  overflow-x: auto;
}
.line {
  display: flex;
}
.cell {
  width: 400px;
}
```

## 対処

* `.line` に `min-width: min-content` を追加

## 他に試したこと

* `.line` に `width: 100%` を追加　→　何も変わらず
* `.line` に `align-items: flex-start` を追加　→　何も変わらず
PostgreSQLでtimestamp without time zone型のカラムの値をJSTに変換する

PostgreSQLのバージョンは9.6, DBのタイムゾーンはUTCとします。

# 結論

`users.created_at` のような `timestamp without time zone` 型のカラムがある場合、次のようにするとJSTの時刻を取得できます。

```sql
timezone('JST', users.created_at::timestamptz)
```

まず、`timestamp without time zone` 型のカラムである `users.created_at` の値を `timestamp with time zone` 型の略記である `timestamptz` 型にキャストしています。`::` は[PostgreSQLにおける型キャストの記法]([4.2. 評価式](https://www.postgresql.jp/document/9.6/html/sql-expressions.html#sql-syntax-type-casts))です。そして、タイムゾーン変換の構文 `timestamp AT TIME ZONE zone` と等価である `timezone` 関数でJSTに変換しています。

# 正しくない例

次のようにするとできません。

```sql
timezone('JST', users.created_at)
```

この場合、 `users.created_at` が `2018-08-10 00:00:00` だと `timezone('JST', users.created_at)` は `2018-0８-09 15:00:00` となり、UTCの2018-08-10 00:00:00におけるJSTの時間を期待して9時間進んでほしいところが、9時間戻ってしまいます。

これは、JSTとして `users.created_at` を解釈したあとに、ローカル時間（この場合UTC）の時間はいつか、というロジックで値を表示するからです。つまり、この場合 `2018-08-10 02:46:58` をJSTとして解釈し、それはUTCでは `2018-0８-09 17:46:58` である、というふうになっています。これは `timestamp without time zone` 型の値に対する `timezone` 関数は「与えられた時間帯なしタイムスタンプを指定された時間帯にあるとして取り扱う」という仕様によります。

そこで、`users.created_at` を `timestamp with time zone` 型にキャストします。すると、この場合は `timezone` 関数が「与えられた時間帯付きタイムスタンプを新規の時間帯に、時間帯の指定なく変換する」という仕様になります。これによって、JSTへ変換したタイムスタンプを表示することができます。

# 参考

- PostgreSQL 9.6.5文書
  - [8.5. 日付/時刻データ型](https://www.postgresql.jp/document/9.6/html/datatype-datetime.html)
  - [9.9.3. AT TIME ZONE](https://www.postgresql.jp/document/9.6/html/functions-datetime.html#functions-datetime-zoneconvert)
よくわからんけどTypeScriptのtscコマンドが使えなくてハマりましたよ

TL;DR
======
 - TypeScriptを導入して`npm install typescript -g`しても`tsc`が使えません。困った！
 - `npm install typescript --save`して`package.json`編集したら無事使えるようになりました。めでたしめでたし。

はじめに
=======
Node.jsにてJavaScriptで開発を続けることに早々と限界を感じてしまったので、TypeScriptに切り替えることにしました。
ご参考程度に僕の環境は以下の通りなのです。

|項目             |値                   |
|-----------------|--------------------|
|OS               |Windows 10 Pro 64bit|
|Node.js          |8.11.3 LTS          |
|Node.jsのPath設定|✔                   |

いざ、TypeScript導入！でも...
============================
コマンドプロンプトを起動して、`npm i typescript -g`コマンドでTypeScriptをインストールします。

...参考書とかではこれでTypeScriptをインストールできて、`tsc`コマンドを利用できるはずなのですが...
**`tsc`コマンドも`npm run tsc`も利用できず...(死**
これは困りました...

とりあえずこれで治ったよ！(僕はね！
================================
TypeScriptをグローバルインストールしていましたが、プロジェクトのディレクトリへインストールして`package.json`の`scripts`セクションに`tsc`コマンドを設定しました。

1. コマンドプロンプトにて`cd`コマンドでTypeScriptを使いたいソースのディレクトリまで移動する。
2. 同じくコマンドプロンプトにて`npm i typescript --save`コマンドでTypeScriptをインストールする。
3. `package.json`をご利用のエディタで開いて`scripts`項目を探す。
4. `"tsc": ".\\node_modules\\.bin\\tsc"`の記載を追加する。 (先約がいるときは先約の最終行に「,」をつけて改行する。)

この方法ではプロジェクトごとにTypeScriptをインストールする必要があったり、デメリットがありそうですが、とりあえずTypeScriptが使えるようになりました！やったね！

☆冗長☆
==========
この記事は僕のブログにおととい書いた内容の転載です。
(Qiita向けに内容は少し整理しました。)
Qiitaにも顔は出すつもりだけど、ブログを優先するつもりだよ！

ブログ→[ミニマムオプスの小屋](http://minimum-opus.blog.jp)
ではでは～
はじめから公開で作業する

**はじめから公開で作業する**ことの価値を実感しています。18f のブログにある、 Eric Mill による [Working in public from day one](https://18f.gsa.gov/2014/07/31/working-in-public-from-day-1/) を抄訳する形で、そのメリットを紹介してみます。

#１日目からオープンソースでやれば良いのです
「コードの整理ができたらオープンソースにするんだ」という話を聞きますが、そういう気持ちでいるから、簡単にオープンソースにできたはずのたくさんのいい仕事がクローズドのままなのです。これを避けるのは簡単です。**１日目からオープンソースでやればいい**のです。最初のコミットからオープンソースにするのです。そうするのがいい、と思ってもらうための理由をこれからいくつか書きます。

#（１）誰もあなたのコードを見たりしません
コードなんて退屈なものです。世の中のほとんどのコードがそうです。人があなたの作品を判断する場合には、人々がどうそのコードに関わるか、によって判断します。つまり、使い方が README からすぐ分かるかだとか、開発が活発かだとか、GitHub でどのくらいスターがついているかだとか、そういうことで判断します。そういったものは、あなたの作品が十分に使えるものになってからしか得られません。あなたがそれに値するまでは、あなたがスポットライトを浴びることはないでしょう。

#（２）オープンソースで始めることで、いい判断ができるようになります
オープンソースのプロジェクトにパスワードをコミットすることは、ふつうないでしょう。オープンソースにしていると、良い判断をするための自然なプレッシャーを感じます。ハードコードをすることは少なくなり、設定ファイルをしっかり作るようになります。すこしモジュール的に書くようになります。コメントに気を使うようになります。セキュリティの穴をより素早く見つけるようになります。こういうものは健康なプレッシャーです。

#（３）時間が無駄になりません
（２）で書いたような「いい判断」を加えるのは時間の無駄だと思うかもしれません。でも、プロジェクト人員があなた一人だとしても、こういうことはしなければなりません。プロジェクトが一ヶ月進捗したあと、判断をした場所に戻ったときに、そういった良い判断をしたことをとてもありがたいと思うことになるでしょう。そして、良い判断が日常のものとして身についたとき、良い判断にかかる時間は短くなります。そして、あなたはさらに良いプログラマになります。

#（４）人の助けになるかもしれません
それに、人が助けてくれるかもしれません！インターネットは大きな場所かつ狭い世界であり、GitHub は意外な接触を作ってくれることがあります。あなたのコードが少し役立つものであれば、それが役立つ人があなたのコードを見つけるみこみがあります。あなたがものすごくニッチだと思っているコードを書いているとしても、めぐりあいの可能性を閉ざさないのがよいでしょう。

#あなたのデフォルトをオープンにするのは、健全な習慣
公開で作業を始めることに一度慣れてしまえば、公開で作業をすることはパフォーマンスアートをするような感じがするのではなくて、呼吸をするような感じがすることになるでしょう。公開で作業を行うことは、良い作品と個人の成長を生み出し、自発的な貢献と関わりの可能性を開くための、健全な習慣なのです。デフォルトがオープンであることは、みんなの利益になるのです。
EC-CUBE4をWindowsにインストールしてみた

# 概要
windowsで簡単にインストールできなかったので、まとめました。
公式版が出たらお役目御免のはず。

# 環境
- windows 10
- xampp(PHP7.2.8)

# 手順
1. インストール
2. DBの設定
3. コマンドの実行

# 1.インストール
```
composer create-project ec-cube/ec-cube ec-cube "4.0.x-dev" --keep-vcs
```
を実行するだけです。

最後にエラーが出ますが、無視します。

# 2. DBの設定
.envを書き換えます。databasenameは、新しく作成されるので、存在しないDB名です。

```
DATABASE_URL=mysql://<user>:<password>@<host>/<database name>
```

書式は、公式サイトにある感じです。
http://doc3n.ec-cube.net/quickstart_install

ここではコマンドを実行していますが、windowsでは、エラーが出ます。

# 3.コマンドの実行

個別でコマンドを実行していきます。windowsのため、phpを先頭に追加しました。

```
php bin/console doctrine:database:create
php bin/console doctrine:schema:create
php bin/console eccube:fixtures:load
```

ここに書いていました。
https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=20480&forum=2

# 完成

後はアクセスするだけです。途中タイムアウトするかもしれないので、php.iniを修正してください。


# おまけ
## PHPが実行できない場合

```
C:\xampp\php
```
を**path**に追加してください。

ここに詳しく書いていました。
https://pc-karuma.net/xampp-php-path/
webpack-serve で動的な処理をアドオンする(deprecated)

追記: webpack-serve は非推奨になり、 webpack-dev-server の開発が再開しました。ここは webpack-dev-server を使っておきましょう。


とりあえず動かしたい場合は https://qiita.com/ma2saka/items/eb4190a009da9649583c に最低限の設定方法を書いたのでそちらを参照する。

webpack-serve は webpack で開発しながら動的にビルド走らせてサーバで動作確認するためのものと認識している。「ファイルを監視して webpack を適切に実行してブラウザをリロードする」が主な役割。

ただ「本番系では手前にリバースプロキシがいてURLの書き換えやってる」とか「APIサーバが別にいてそっちへのアクセスはモックしたい」とかいろいろ都合があるもので、そのあたりはアドオンとしてカスタマイズする流れになる。

- [webpack-serve/README#add-on-features](https://github.com/webpack-contrib/webpack-serve#add-on-features)

アドオンは `koa` のミドルウェアを追加することになる。 `koa` は https://github.com/koajs/koa で開発されている、Node.js の軽量なWebアプリケーションフレームワークなのだけど、ここでは詳細には踏み込まない。

ただ、以下サンプルで示すコードで出てくる `ctx` は Koa の Context オブジェクトなんだぜ、とか `app.use(async (ctx, next) => {` あたりの記述はkoa公式のREADMEで紹介されている書き方に習っているので他の箇所とちょっと命名のノリが違うんだ、くらいで一つよろしくお願いいたします。

## serve.config.js で addon を設定する

### /hello ときたら `{"hello":"world"}` を返す

`options.add` に、 `koa` のミドルウェアを設定する関数を渡すようにする。

```serve.config.js
const serve = require('webpack-serve');
const config = require('./webpack.config.js');
const argv = { }

const addon = (app, middleware, option) => {
  middleware.webpack();
  middleware.content();

  app.use(async (ctx, next) => {
    if(ctx.originalUrl.match(/\/hello/)){
      ctx.response.status = 200
      ctx.response.type = 'json'
      ctx.response.body = JSON.stringify({hello: "world"})
    }else{
      await next()
    }
  });
}
serve(argv, { config, content: 'public/', port:8080, add: addon})
```

サーバを立ち上げ、curl でアクセスすると、ちゃんと

- Content-Type が `application/json`
- HTTP Status Code が `200`
- body が設定したJSONデータ

になっていることがわかる。

```
$ curl -i http://localhost:8080/hello
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 17
Date: Mon, 13 Aug 2018 01:35:58 GMT
Connection: keep-alive

{"hello":"world"}
```

簡単。

ここで以下のようにミドルウェアの内容を修正してみると、

```js

  app.use(async (ctx, next) => {
    if(ctx.originalUrl.match(/\/hello/)){
      console.log(ctx); // レスポンスを設定する前に ctx の中を確認する
      ctx.response.status = 200
      ctx.response.type = 'json'
      ctx.response.body = JSON.stringify({hello: "world"})
    }else{
      await next()
    }
  });
```

レスポンスを返す前の段階で「リソースが見つからない」判定がなされ、404になっていることがわかる。

```
{ request:
   { method: 'GET',
     url: '/hello',
     header:
      { host: 'localhost:8080',
        'user-agent': 'curl/7.54.0',
        accept: '*/*' } },
  response: { status: 404, message: 'Not Found', header: {} },
  app: { subdomainOffset: 2, proxy: false, env: 'development' },
  originalUrl: '/hello',
  req: '<original node req>',
  res: '<original node res>',
  socket: '<original node socket>' }
```

### 404の内容をカスタマイズする

そこで、「静的コンテンツが見つからなかったら」JSONを返すように変更してみる。

```js
  app.use(async (ctx, next) => {
    if(ctx.status === 404){
      ctx.response.type = 'json'
      ctx.response.body = JSON.stringify({not: "found"})
    }else{
      await next()
    }
  });
```

これで、

```
$ curl http://localhost:8080/
hello
$ curl http://localhost:8080/hoge
{"not":"found"}
```

404だった場合の結果ページを上書きすることができた。

## まとめ

`webpack-serve` に動的な処理をアドオンするのはとても簡単。使い所は、これから考える。
DirectX キー入力

今回は、ゲーム制作では欠かせないキーボードによる入力をやって行きます。
扱っていくのはDirectInputを使って行きます。
パッド対応させたい場合は、XInputがいいみたいですが、
キーボードだけならこっちの方が簡単だと思います。

```c++:Input.h
#define DIRECTINPUT_VERSION 0x0800
#include <dinput.h>
// キー最大数
#define KEY_MAX 256

class Window;
class Input
{
public:
   // コンストラクタ
   Input(Window* win);
   // デストラクタ
   ~Input();
   // キー入力
   bool CheckKey(UINT index);
   // トリガーの入力
   bool TriggerKey(UINT index);
private:
   // インプットの生成
   HRESULT CreateInput(void);
   // キーデバイスの生成
   HRESULT CreateKey(void);
   // キーフォーマットのセット
   HRESULT SetKeyFormat(void);
   // キーの協調レベルのセット
   HRESULT SetKeyCooperative(void);

   // ウィンドウ
   Window* win;
   // 参照結果
   HRESULT result;
   // インプット
   LPDIRECTINPUT8 input;
   // インプットデバイス
   LPDIRECTINPUTDEVICE8 key;
   // キー情報
   BYTE keys[KEY_MAX];
   // 前のキー情報
   BYTE olds[KEY_MAX];
};
```

```c++:Input.cpp
#include "Input.h"
#include "Window.h"

#pragma comment(lib, "dinput8.lib")
#pragme comment(lib, “dxguid.lib”)

// 解放マクロ
#define Release(X) { if((X) != nullptr) (X)->Release(); (X) = nullptr; }

// コンストラクタ
Input::Input(Window* win) :
   win(win), result(S_OK), input(nullptr), key(nullptr)
{
   memset(&keys, 0, sizeof(keys));
   memset(&olds, 0, sizeof(olds));

   CreateInput();
   CreateKey();
   SetKeyFormat();
   SetKeyCooperative();
}
// デストラクタ
Input::~Input()
{
   Release(key);
   Release(input);
   delete win;
}
// インプットの生成
HRESULT Input::CreateInput(void)
{
   result = DirectInput8Create(GetModuleHandle(0), DIRECTINPUT_VERSION, IID_IDirectInput8, (void**)(&input), NULL);

   return result;
}
// キーデバイスの生成
HRESULT Input::CreateKey(void)
{
   result = input->CreateDevice(GUID_SysKeyboard, &key, NULL);

   return result;
}
// キーフォーマットのセット
HRESULT Input::SetKeyFormat(void)
{
   result = key->SetDataFormat(&c_dfDIKeyboard);

   return result;
}
// キーの協調レベルのセット
HRESULT Input::SetKeyCooperative(void)
{
   result = key->SetCooperativeLevel(win->GetHandle(), DISCL_NONEXCLUSIVE | DISCL_BACKGROUND);

   //入力デバイスへのアクセス権利を取得
   key->Acquire();

   return result;
}
// キー入力
bool Input::CheckKey(UINT index)
{
   //チェックフラグ
   bool flag = false;

   //キー情報を取得
   key->GetDeviceState(sizeof(keys), &keys);
   if (keys[index] & 0x80)
   {
      flag = true;
   }
   olds[index] = keys[index];

   return flag;
}
// トリガーの入力
bool Input::TriggerKey(UINT index)
{
   //チェックフラグ
   bool flag = false;

   //キー情報を取得
   key->GetDeviceState(sizeof(keys), &keys);
   if ((keys[index] & 0x80) && !(olds[index] & 0x80))
   {
      flag = true;
   }
   olds[index] = keys[index];

   return flag;
}
```

こんな感じで実装してます。
ほとんどデフォルトの設定なのでオリジナルのキーを使いたい場合は、
フォーマットのセット部分を自作のものに変えれば大丈夫なはずです。
高卒新人プログラマが教える「IPA資格の確実な取得方法」

今現在、高校卒業して、社会人４ヶ月です。
体験していることのほとんどが新鮮なものばかりの今、
実践に出ていろいろ学ぶ以前にまだ学ぶことが多い状態です。

その中で、資格取得にも力を入れていく必要がありました。
#資格が実力を示すのに一番良い

**「実際の現場で仕事をするなら、資格なんて必要ない」**

僕自身はそういう風に高校の時にとある教師に言われたことがありました。
でも確かにそうだと思います。

しかし、**資格を通じて学べることは実践では学べない。**
とも言われたことがあります。

でも結局のところ、**自分ができることを証明するのに手っ取り早いのは、
資格を取得をして証明することです。**

#ITパスポートを二日で合格

私は、高校三年間で、**「ITパスポート」**と**「基本情報技術者試験」**
の資格を取得しました。

ただ、勉強については基本情報の勉強だけしていました。
基本情報を合格して、就職活動で使えるようにするのが目標でしたが、
なんと、**当時の春の試験で落ちていまい、
就職で使える有力な資格がほとんどありませんでした。**

その後、就職活動で使える資格を何とか取得するために
「ITパスポート」の資格を、急いで取得しました。
(後の秋の試験で基本情報は合格しました)

**その時の、勉強時間は、たった二日の、時間でいうと5時間です。**

私以外の、友人もあわてて取得しましたが、
**彼は、ノー勉強で取得していやがりました。**

なぜ、そんな簡単に合格できたかというと、
**基本情報の勉強の仕方がよかったからです。**（不合格でしたが…）

どのような勉強をしたかをこれから説明します。

#険しい道の登り方

当時の、基本情報の資格勉強は授業を通して勉強していました。
担当してくれた先生は、
**資格勉強ではなく、エンジニア育成の勉強を私たち生徒にさせていました。**

エンジニアの育成をさせている中で、基本情報の資格取得も
一緒にやってしまおうという感じです。
そのため、勉強はかなり面倒でした。

一週間の中で、ほぼ毎日、勉強したことをノートにまとめて、
次の授業に確認してもらう。
ということをひたすら繰り返していました、
ノートのまとめ方も非常にレベルが高く、基準が、

**「幼稚園の様な論理的思考がまだ備わっていない子供に理解できるようにする」**

という基準をもとにノートまとめをしていました。

しかも、授業中はノートを開くのを禁止して、**印刷ミスをした藁半紙の裏側を、
それぞれ、それぞれ生徒に数枚配布してメモを取らせていました。**
ノートまとめを、強制的に自宅でさせるためだと思います。

そして、授業の最後には、その授業で学んだことの問題が出されて、
その問題を解き終わった人から、自由時間になる。

といった感じで、ひたすら勉強していました。

そのおかげで、結果的に合格することが出来ました。

基本情報の資格取得の勉強ならば、もっと簡単に勉強できると思いますが。

上記のような目的で勉強をしていくのであれば、話は別です。
しかし、そんな勉強方法をしたおかげで、一年近くたった今でも、
一度、問題を出されたとしても、覚えていることがたくさんあります。

某アニメの名セリフでもあるように、
**「簡単な道のりを知りたいんじゃない、俺は険しい道の歩き方を知りたいんだ！！」**

と同じことが言えます、私は険しい道のりを歩いたことによって、
本来の知識量をはるかに超えた、知識量を持つことが出来ました。

そのおかげか、就職して、二か月で、
java silver プログラマーの資格までも**簡単に**取得することが出来ました。

#険しい道を歩くと後が楽

今私は、当時の勉強した知識で、何とか延命して別の資格を取得しています。
でも、その延命が意外に長く、質が良いので、
今年の応用情報技術者試験に挑戦してみようと、検討しています。

最近、暇つぶしに応用情報の午前問題を[過去問道場](https://www.ap-siken.com/apkakomon.php)で解いてみたところ…
なんと、30年度春の午前問題は合格してしまいました！

これは、延命のおかげなのかわかりませんが勉強してみる価値はあると思います。

まさかここまで、自分の中で知識が物になっているとは思いませんでしたし。

なので、これからエンジニアを目指す皆さんがこの記事を見ているのであれば、
無謀にならない範囲で、険しい道を歩いて、歩き方を学んでください、
そうすると、非常に後が楽です。

では、僕と同じ高卒新人プログラマが、活躍できることを願ってこの記事を終わりとします。
iOS 12のSDKから`hashValue`の値が変わりました

# iOS 12のSDKから`hashValue`の値が変わりました

Xcode 10で利用されるiOS 12のSDKでビルドしたアプリのhashValueの値が、Xcode 10より前にビルドした時の値と異なる値になっているようです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">iOS 12のSDKだと 1.hashValue の値が 1 じゃなくなってる<br><br>Xcode 9.4.1で試すとIntのhashValueは自身の値と同じ</p>&mdash; Tatsuya Tanaka / たなたつ (@tanakasan2525) <a href="https://twitter.com/tanakasan2525/status/1027021439709245440?ref_src=twsrc%5Etfw">2018年8月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## Xcode 9.4.1

### Int
自身の値がhashValueの値。

例: `5.hashValue` なら `5`。

### Bool
`true` なら `1`、 `false` なら `0`。

### Enum
caseの順番がhashValueの値。

```swift:例
enum Foo {
    case 🐶
    case 🐱
    case 🐭
}

print(Foo.🐱.hashValue) // 1
```

## Xcode 10

### Int
自身の値とは異なる値。

例: `5.hashValue` は、`-1168890137408403414` など。 (実行のたびに変わるようです)

### Bool
Intと同様。

### Enum
Intと同様。

## 対応方法

本来の使い方で `hashValue` を利用している場合は影響を受けないとは思いますが、誤った使用方法をしている場合は対応が必要です。

### Int
`.hashValue`を削除する。

例: `5.hashValue` なら `5`。

### Bool
三項演算子で書き換える。

```swift:例
let flag = true

// Before
let value = flag.hashValue

// After
let value = flag ? 1 : 0
```

### Enum
`RawValue`に`Int`を指定する。

```swift:例
// Before
enum Foo {
    case 🐶
    case 🐱
    case 🐭
}

print(Foo.🐱.hashValue) // 1

// After
enum Foo: Int {
    case 🐶
    case 🐱
    case 🐭
}

print(Foo.🐱.rawValue) // 1
```

既に`RawValue`に別の型が使用されていたり、`Associated Value`を利用している場合は、`computed property`で `Int` を返すプロパティを追加すると対応が簡単です。

```swift:例
enum Foo {
    case 🐶(name: String)
    case 🐱(name: String)
    case 🐭(name: String)

    var index: Int {
        switch self {
        case .🐶: return 0
        case .🐱: return 1
        case .🐭: return 2
    }
}
```

# まとめ
Xcode 10でアプリをビルドする際は一度、`.hashValue`で検索をかけて、誤った使い方をしている部分がないかチェックをし、もしあった場合は上記のような対応をすると良いと思います。
Red Hat Decision Manager ルールの書き方を知りたい場合に役立つドキュメント

Red Hat Decision Managerでルールを実装する際に使う言語が、**DRL(Drools Rule Language)**。
ルールを記述するには、このDRLの文法をまずは知る必要があります。

DRLとは、こんな感じのコードです。

```
rule "Hello World"
when
    Person( name == "Chuck" )
then
    System.out.println( "Hello Chuck" );
end
```

「え？DRLで書かなくてもいいんですよね？Decision Managerって、Excelとか使って表でルール書けるんですよね？」という質問をよく受けます。

<img width="900" alt="スクリーンショット 2018-08-11 16.51.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/276989/210b4ddf-28c5-36ac-3238-749f50394edd.png">

たしかに、Decision Managerのルールは上記のような表形式で書くことも出来ます。
ですが、よく見てください。上の方にプログラムコードみたいなのが書いてありますよね？

<img width="1224" alt="スクリーンショット 2018-08-11 16.53.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/276989/aaeea1c9-9df9-7f7c-1307-edf2600f291e.png">

ここはまさしくDRLで書かれています。表形式で書くルールを、**デシジョンテーブル**とか**意思決定表**と言いますが、これを書く際にはDRLの知識が必要になります。

出来上がったデシジョンテーブルのメンテナンスは、DRLを知らなくてもExcelの編集だけで可能ですが、最初にデシジョンテーブルを作る開発者は、DRLについて知っておく必要があります。

さて、そこで、DRLやデシジョンテーブルの書き方について習得したいけれど、あまり情報がなくて困っている、
そういう方向けに役立ちそうな情報をここにまとめておきたいと思います。

## ルール実装の学習に役立つあれやこれ
Q. 書籍ってないんですか？

A. 少し古いけど、それなりには役立つのがこれ。全編英語ですけどね。
[Mastering JBoss Drools6](https://www.packtpub.com/networking-and-servers/mastering-jboss-drools-6)

========================
Q. 参考になるサイトはないですか？

A. Drools（Decision Managerのコミュニティー版）のドキュメント内に割と詳しく書いてあります。全編英語です。製品版(Decision Manager）もルールの書き方についてはほぼ同じです。ただし、まったく同じではありませんので、それを頭に入れた上で参照ください。（第8章：Rule Language Reference にDRLの記法が書いてあります）
バージョンはたびたびアップデートされますので、最新を見つけてください。以下は7.9.0のドキュメントへのリンクです。
[Drools Documentation](https://docs.jboss.org/drools/release/7.9.0.Final/drools-docs/html_single/index.html#_droolslanguagereferencechapter)

========================
Q. 日本語のサイトはないですか？

A. かなり古いバージョンになりますが、製品版のマニュアルで以下は日本語化されています。API関連のところは現バージョンとはかなり違いがありますが、ルールの記述についてはあまり変わっていないため、最初に読んで理解するには最も良い資料です。
[古いけど日本語化されている製品マニュアル](https://access.redhat.com/documentation/ja-jp/jboss_enterprise_soa_platform/5/html/jboss_rules_5_reference_guide/)

新しいバージョンのマニュアルも、日本語化されています。
[バージョン7.7のルールエンジンに関するマニュアル](https://access.redhat.com/documentation/ja-jp/red_hat_decision_manager/7.7/html-single/decision_engine_in_red_hat_decision_manager/index)

Excelを使ってデシジョンテーブルを作成する場合は、[こちらのマニュアル](https://access.redhat.com/documentation/ja-jp/red_hat_decision_manager/7.7/html/designing_a_decision_service_using_spreadsheet_decision_tables/decision-tables-defining-proc)をどうぞ。
Rails where like を使った検索機能の実装が上手くできない

#環境・前提条件
rails ~> 5.1.4
cloud9

#やりたい事
Postモデル一覧ページにフォームを設置し、検索機能の実装を行いたいと思います。
Postにはdateカラムで'2018-08-13'のようなデータが格納してあり、
フォームではそこから'2018-08'(年と月のみ)を指定して、
それに合致するPostを一覧表示したいと思ってます。

#起こっていること
フォームで年と月を指定し、検索ボタンを押しても何も結果が返ってきません。

#試した改善策
routesをpostからgetに変更してみましたが
結果は同じくです。


```post_controller.rb
  def search
    @post = Post.where('date like ?', '%#{params[:date]}%')
    render "index"
  end
```

```index.html.erb
 
<div class="contents" "form-group">
  <%= form_tag('/search')do %>
     <div class="form-group"> 
  　 <input type="month" name="date" id="date" class="form-control name" placeholder="検索">
     </div>
     <input type="submit" value="検索" class="btn btn-primary")>
  <% end %>
</div>
   
<div class="row mt-3">
 <% @post.each do|post| %>
   <div class="card col-12 col-md-3">
        <h5><%= post.title %></h5>
        <h6>日付：<%= post.date %></h6>
         <p><%= link_to("内容を見る","/show/#{post.id}") %></p>
   </div>
 <% end %>
</div>
```
```routes.rb
  post "/search" => "post#search"
```

もしコードのミスなどお分かりになる方いましたら教えてください。
bufferでシーンチェンジエフェクト

# はじめに
この記事はHSP (Hot Soup Processor)でバッファを使うときに知ったことの覚え書きです。
最初に、私が大学の課題として作成したものをおいておきます。 
<blockquote class="twitter-tweet" data-lang="ja"><p lang="pt" dir="ltr">Phantomizer (Short ver.) MV - Kuyuri Iroha<br><br>Source code: <a href="https://t.co/fSVw8RXGPO">https://t.co/fSVw8RXGPO</a><br>niconico: <a href="https://t.co/6KeiYHx7pg">https://t.co/6KeiYHx7pg</a><br>YouTube: <a href="https://t.co/wa6LOjUI4j">https://t.co/wa6LOjUI4j</a><a href="https://twitter.com/hashtag/HSP?src=hash&amp;ref_src=twsrc%5Etfw">#HSP</a> <a href="https://twitter.com/hashtag/EP%E6%BC%94%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#EP演習</a> <a href="https://twitter.com/hashtag/creativecoding?src=hash&amp;ref_src=twsrc%5Etfw">#creativecoding</a></p>&mdash; いろはクユリ (@kuyuri_iroha) <a href="https://twitter.com/kuyuri_iroha/status/1006023726003994624?ref_src=twsrc%5Etfw">2018年6月11日</a></blockquote>
（ソースコードをコピペしても必要ファイルがかなり多いため動きません。ご了承ください。 ）  
今回はこのプログラムで使ったHSPのバッファについて、使っていて気がついたことを書いてゆきます。  
# HSPのバッファって何？
そもそもHSPのバッファとはなんなのでしょうか。今回の記事で扱うバッファとは `buffer ウインドウID, 幅, 高さ` の命令で呼び出すものを指します。私は特に専門的な人でもないので、私の持っているイメージを軽く説明します。
[![カラーバッファのレイヤー構造](https://gyazo.com/20801f71e3427e2f48e9d191a38caba4/raw)](https://gyazo.com/20801f71e3427e2f48e9d191a38caba4)

画像のように、レイヤーのと似た役割をしてくれて、加算 減算などの合成もできます。一般的にバッファというとデータの一時的な保存領域の総称で、頂点バッファ、深度バッファなどがありますが、HSPでは仮想ウインドウ（カラーバッファのように使えるもの）のことを"バッファ"と呼んで使うようです。  
# シーンチェンジエフェクト
私のプログラムでは白と黒しか使わない関係上、減算して色を反転させるなどの処理はしていましたが、加算、乗算等の合成はあまりしていません。
一番バッファの恩恵が得られたのは、動画の[0:43](https://youtu.be/auuWXXnF_Fo?t=43s "YouTube")からのサビのシーンチェンジです。これはスクリーンいっぱいのバッファを細切りにして、時間をずらして移動させているだけですが、これを応用するとGlitchのようなエフェクトもかけられます。
横方向へスライドしてシーンが変わる部分の実装は下記のようになっており、縦方向も同様の処理をして実装しています。

```hsp:effect.hsp
setease 0.0, 1280, ease_quartic_out
divNum = 50
repeat divNum
    ease = geteasef(double(frame) - 2962.0 - (double(cnt) / 5.0), 20)
    gmode 0, 1280, 720 / divNum, 255
    pos ease, 720 / divNum * cnt
    gcopy 5, 0, 720 / divNum * cnt
loop
```

イージングを使って動かしていますが、基本的には

1. `gmode`で スクリーンの縦 / 分割数 の幅を指定。
2. `pos`を使って座標を指定。
3. `gcopy`でウインドウID 5 のバッファの指定した座標と同じ位置から指定した大きさの部分を現在の描画バッファに書き込む。

という内容の処理を分割数分`repeat`することで実現できます。  

# 参考
[http://masudahp.web.fc2.com/hsp3/kiso/hspk022.html](http://masudahp.web.fc2.com/hsp3/kiso/hspk022.html "HSP3.0-ウィンドウと画像表示") -HSP3.0-ウィンドウと画像表示
-> buffer 周りの基本的な使い方がサンプル付きで記されています。  
[https://twitter.com/motions_work/status/858335224626790400](https://twitter.com/motions_work/status/858335224626790400 "「HSP Twister」 (by @FMS_Cat ) ") -「HSP Twister」 (by @FMS_Cat ) 
-> Catさんのこの作品を見て、HSPでバッファが使えることを知りました。めちゃくちゃかっこいいです。
プロジェクト配下の build.gradle が表示されない

## はじめに
この問題は稀な事例かもしれませんが、問題に遭遇し地味に不便だったので備忘録として記録します。

## 何が問題か
Android Studio のプロジェクトツリーを `Android` で表示している時、いつのまにか `build.gradle (Project: ~)` が表示されなくなっていることがあります。

<img width="500" src="https://qiita-image-store.s3.amazonaws.com/0/185323/f71369e2-ee4c-b880-95a4-268cc7dfdd82.png"/>

プロジェクトツリーの表示を `Android -> Project` にすることで回避はできるのですが、その都度切り替えるのは面倒です。

## どのように解決するか
解決する方法はとても簡単です。

Android Studio のプロジェクトの履歴から削除し、再度プロジェクトを開くことで `build.gradle (Project: ~)` が表示された状態にすることができました。

<img width="500" src="https://qiita-image-store.s3.amazonaws.com/0/185323/4ae18cef-6670-8567-b9c8-af438eb45ba9.png"/>

## 最後に
根本的な原因は何かよくわかっていないのですが、わかったら追記したいと思います。
webpack-serve v2.0変更点 (deprecated)

追記: webpack-serveは開発が止まり、webpack-dev-server の開発が再開しました。したがってwebpack-dev-server を使っていきましょう。

以下備忘録。2.0.1 はドキュメント更新と open 時の path の処理の軽微な修正のみなのでスルー。

see https://github.com/webpack-contrib/webpack-serve/releases/tag/v2.0.0

- エントリポイントが `serve(options)` から `serve(argv, options)` になった
- serve関数の戻り値Promiseはネットワークのlistenの開始後に渡されるから `listening`　イベントを待つ必要はないよ。
- `serve(argv, options)` の Promise の結果値には `app, on, options` が含まれる。

```
serve(argv, options).then(({app, on, options}) => {
  console.log(options)
})
```

- `--dev`と `--hot` がそれぞれ `--devWare`, `--hotWare` になった
基礎 HTML 教學 By 彭彭

★ 我的第一份網頁（HTML）

```ruby:qiita.rb
<!DOCTYPE html>
<html>
<head>
	<title>olittlewhyo</title>
</head>
<body>
	Hello World
</body>
</html>
```

```ruby:qiita.rb
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>oLITTLEWHYo</title>
</head>
<body>
	<h3>Florence Kwok</h3>
	<img src="florence.jpg" />
	<hr />
	<h3>My Favorite</h3>
	<ul>
		<li><a href="https://www.weibo.com">weibo</a></li>
		<li><a href="https://www.instagram.com">instagram</a></li>
		<li><a href="https://www.facebook.com">facebook</a></li>
	</ul>
	<h3>florence Kwok</h3>
	<table  border="1" width="150" cellpadding="5">
		<tr>
			<td>姓名</td>
			<td><b>florence</b></td>
		</tr>
		<tr>
			<td>生日</td>
			<td><b>0825<b></td>
		</tr>
		<tr>
			<td>星座</td>
			<td><u>vigor</u></td>
		</tr>
</body>
</html>
```

★ 點綴一下網頁
a. css 基礎語法
b. css box model
c. 標簽的寬度高度設定
d. css 選擇器簡介
e. 定位模式簡介

```ruby:qiita.rb
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"></meta>
	<title>oLITTLEWHYo</title>
	<!--
		行内 span
		區塊 div box
		區塊邊距 margin
		邊框 border 三個部分的設定
		邊距 padding 邊框的距離
		絕對定位 position
		相對定位 relative 平方 立方
	-->
	<style type="text/css">
	.title{font-weight:bold;font-size:20px}
	.content{width:600px; padding:10px;border:1px solid green;margin-top:10px;margin-bottom:10px;}
	.keyword{color:red}
	.box{
		position:absolute;right:0;top:0;
		width:100px;height:100px;background-color:pink;color:gray;
	}
	</style>
</head>
<body>
	<div class="box">message</div>
	<div class="title">believe in yourself.</div>
	<div class="content">
		if you have a dream you have to protect it. <span class="keyword">period!</span>
	</div>
	
	<div class="title">nothing for nothing</div>
	<div class="content">
	you think you can, you can.
	if you want something <span class="keyword">go get it.</span><br />
	period<span style="position:relative;top:-5px;">³</span>!
	</div>
</body>
</html>

```

★網頁的排版 CSS 選擇器 詳細介紹

```ruby:qiita.rb
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"></meta>
	<title></title>
	<style type="text/css">
		/* 標簽名稱選擇器 */
		body{
			background-color:#FFFFDD;
			font-size:12px;font-family:"微軟正黑體"
		}
		h3{
			font-size:20px;
		}
		/* class 選擇器 */
		div.content{
			width:500px;
			padding:10px;border:1px solid #999999; 
		}
		/* id 選擇器 */
		#btn{
			border:1px solid #ffffff;
			background-color:#ffffff;padding:5px;
		}
		/* 虛擬選擇器 搭配其他選擇器使用 */
		/* :hover 虛擬選擇器 滑鼠移到目標上時，套用一組設定 */
		#btn:hover{
			background-color:#888888;
		}
		/* :focus 虛擬選擇器 儅目標取得焦點時，套用一組設定 */
		input:focus{
			border:1px solid #006400;
		}
		/* 階層式選擇器　搭配其他選擇器使用 */
		.connection a{
			color:#66CDAA;
		}
		.favorite a{
			color:#FF6347;
		}
	</style>
</head>
<body>
	<h3>hard work</h3>
	<div class="content">
		learning
	</div>
	
	<h3>my connection<h3>
	<ul class="connection">
		<li><a href="https://www.youtube.com/">YouTube</a></li>
		<li><a href="https://qiita.com/olittlewhyo">Qiita</a></li>
	</ul>
	<h3>my favorite<h3>
	<ul class="favorite">
		<li><a href="https://www.instagram.com/kwok_florence/">florencekwok</a></li>
	</ul>
	<h3>my profile</h3>
	<div class="content">
		<input type="text" /> <button id="btn">tokyo・beijing</button>
	</div>
</body>
</html>
```
Google Cloud FunctionsのPython(Beta)でHttpトリガーのときJSONを返す

## 概要

関数作成のサンプルを見る限り、Flaskが利用できるみたいだったので、試してみました。


## 手順

```sh
> cd 任意のディレクトリ
> touch main.py
> vi main.py
```

```python:main.py
from flask import jsonify, make_response

def flask_json_response(request):
    return make_response(jsonify({'hoge': 'fuga'}))
```

で、デプロイします。

```sh
> gcloud beta functions deploy flask_json_response \
    --trigger-http \
    --runtime=python37
```

ポイントとしてはFlaskを```pip install```してなくてもCloud Functions上では利用できる状態になっているってことでしょうか？
けど、実際にはローカル開発時に```pip install```しそう。どうでしょう？

で、呼び出します。

```sh
> curl --include https://us-central1-プロジェクトID.cloudfunctions.net/flask_json_response

HTTP/1.1 200 OK
Content-Type: application/json
Function-Execution-Id: a55fsn8a2dc7
X-Cloud-Trace-Context: 9b776cf314416e08c181efaab7524a1e
Date: Thu, 09 Aug 2018 06:33:42 GMT
Server: Google Frontend
Content-Length: 21
Alt-Svc: quic=":443"; ma=2592000; v="44,43,39,35"

{
  "hoge": "fuga"
}
```

はい。

```Content-Type``` も自動で、```application/json``` になってくれてますね。

わかれば簡単なのですが、なにせ公式ドキュメントがまだないので^^;;;


## 参考

Flask Application Object
http://flask.pocoo.org/docs/0.12/api/#flask.Flask.session_interface

もっとも簡単なFlaskの作り方
https://qiita.com/5zm/items/f283c201344ae347ea2d


Cloud FunctionsでPython利用記事まとめ
https://qiita.com/kai_kou/items/2f65db5305ba280ad81e
JavaおじさんがPythonを使えるようになるまでの全記録（その13）

#pylabって非推奨なのか...？
[テキスト](https://www.amazon.co.jp/gp/product/4764905183/ref=oh_aui_detailpage_o02_s00?ie=UTF8&psc=1)では「11章 プロットとクラス」の中でPyLabを使ったプロットの例が紹介されてて、一応こんな感じでサンプルも組んでみたのだけども。

```11-1.py
import pylab
#先頭でのフォント宣言
font = {'family':'Noto Sans CJK JP'}
pylab.rc('font', **font)

pylab.figure(1)
min = -3
max = 4
xRange = range(min,max)
y1 = [x1**2 for x1 in xRange]
y2 = [x2**3 for x2 in xRange]
pylab.plot(xRange, y1, color='red')
pylab.plot(xRange, y2, color='blue', linestyle='dashed')

#個別にフォントを指定する場合の記述
#igfont = {'family':'Noto Serif CJK JP'}
#pylab.title('xの2乗と3乗のグラフ（赤が２乗、青が３乗）', **igfont)

#表題と軸の意味を表示
pylab.title('xの2乗と3乗のグラフ（赤が２乗、青が３乗）')
pylab.xlabel('x')
pylab.ylabel('y')
pylab.show()
```

でもって実行するとこんな感じ。

![2018-08-13.png](https://qiita-image-store.s3.amazonaws.com/0/275064/8f1fcb22-463b-0361-4fd7-ae93525149f2.png)

で、日本語表示しようとするとフォントの関係で文字が化けるので、追加のフォント入れたり入れたフォントの指定をしたりとかは[こちら](https://qiita.com/yniji/items/3fac25c2ffa316990d0c)を参考にしました。

で、いろいろ見て回ってると[こんなサイト](http://technocrat.hatenablog.com/entry/2015/02/05/031408)を発見したりして。
...非推奨？
元ネタが[こっち](https://matplotlib.org/faq/usage_faq.html#matplotlib-pyplot-and-pylab-how-are-they-related)らしいんだけど。
いやまあこれ文意を取ると、静的なプロットだったらpyplotで十分、と言っててpylabがdeprecatedまでは言ってないよな...？テキストの話は一応クラスの中で動的にプロットするという話なのでPyLabはアリだと思うんだけども？どうなの？

さて、次は「ナップサック問題とグラフ最適化問題」か...いいね。本格的にアルゴリズムの話になってきたよ。

#Djangoアプリ設計
さて、今回Djangoのアプリも並行で作るんだけどどういうネタがいいかなー。
ドメインの条件としては

- 少なくとも2つ以上のクラスから構成されるモデルを使って
- 何かしらCRUDが実行できて、
- 複数のモデルクラスにまたがるトランザクションが実行できるもの

にしたいと思ってるんだけど、さてどうしようかな。
普通に考えるとショッピングカートの実装あたりだろうけどそれも芸がないしなー。

ちなみに、別にPythonだからこういうドメインが得意とかそういうのはないと思っている。
言語なんてしょせん道具立てですよ。
しいて言うならfloatに誤差がある以上、科学技術計算なんかには誤差の出ないようにする追加パッケージがないと無理だとは思ってるけれども。JavaにおけるBigDecimalみたいなやつね。

そんなわけで現在鋭意考え中。
webpack-serveで立てたサーバに外部から接続する(deprecated)

追記: webpack-serveは開発が止まり、webpack-dev-server の開発が再開しました。したがってwebpack-dev-server を使っていきましょう。

開発環境として立てたローカルサーバに、PCのIPを指定して同じネットワークの他の端末から接続したいケースがたまにあります。例えば同じWiFi経由でスマホから接続したいとかそういう場合。

「webpack-serve で立てたサーバに外部から接続させる」ためには、待ち受けのIPアドレスとポートを `localhost` だけではなく外部から見えるIPアドレスにバインドする必要があるのと、どのIPアドレスを用いて接続しても立てた開発サーバのコンテンツを返すようにしたいです。特に何も設定せずに `webpack-serve` を起動した場合、接続できるのはそのローカルサーバを立ち上げたホストからのみです。

[webpackとwebpack-serveで静的なWeb環境を作る](https://qiita.com/ma2saka/items/eb4190a009da9649583c) 最低限の設定は左記を参照してください。

## serve関数の引数で host を指定する

```
const serve = require('webpack-serve');
const config = require('./webpack.config.js');
const argv = {}
const options = { host:'0.0.0.0', config }

// host: '0.0.0.0' を利用
serve(argv, options);
```

これでネットワーク的に外部からサーバに接続できるようになります。

ただし、この段階では以下のようにちょっと気持ち悪いことになります。`10.0.1.7` はDHCPから付与された手元のローカルネットワークのIPアドレスです。 

```
$ curl 10.0.1.7:8080
hello
$ curl 127.0.0.1:8080
Not Found
$ curl 0.0.0.0:8080
Not Found
```

## webpack-serve の引数 `--host` を指定する

serve 関数で `options.host` を渡すだけだと、今度は localhost とか 127.0.0.1 で動作しなくなったので、合わせて `webpack-serve` のコマンドライン引数でも `--host 0.0.0.0` を指定するようにします。

```
npx webpack-serve --host 0.0.0.0
```

## まとめ

webpack-serve で立てたサーバに外部から接続する場合には、

- serve関数呼び出し時に `options.host` で `0.0.0.0`
- コマンドライン引数の `--host` で `0.0.0.0`

でいいんだけど統一感ない。
【Swift】UICollectionView reloadDataの不思議な挙動？


ちょっとした実装をしているときに「あれ、これ何でうまくいかないんだろう？」と思ったことがあり、メモします。

UICollectionViewを話題にしていますがUITableViewも同じです。


# CellをSwapしたい

やりたいことはシンプルで、あるセルとあるセルの位置を交換したく、
下記のようにDataSourceのデータをSwapしてreloadDataを行います。

ちなみに、UICollectionViewの```moveItem(at indexPath: IndexPath, to newIndexPath: IndexPath)```を使用するとこの現象は起きませんが、今回は２つのセルを入れ替えたいという目的があり、
上下のセルを入れ替えると他のセルも動いてしまうため、使いませんでした。

![IMG_0031.TRIM.MOV.gif](https://qiita-image-store.s3.amazonaws.com/0/219965/9267d207-a3e3-7b98-ab71-3baf797463d1.gif)



```swift

@objc func handlePanGesture(_ gesture: UIPanGestureRecognizer) {


    // movingCellは移動中のセルの状態を保持しているクラス
    switch gesture.state {
        
    case .began:
        movingCell = MovingCell(cell: cell.0, originalLocation: cell.0?.center, indexPath: cell.1)
        
    case .changed:
        movingCell?.cell.layer.zPosition = 100
        movingCell?.cell.center = gesture.location(in: gesture.view!)
    case .ended:
        swapMovingCellWith(cell: cell.0, at: cell.1)
    default:
        movingCell?.reset()
        movingCell = nil
    }
}

private func swapMovingCellWith(cell: UICollectionViewCell?, at indexPath: IndexPath?) {
    guard let cell = cell, let indexPath = indexPath, let moving = movingCell else {
        movingCell?.reset()
        return
    }
    
    viewModel.swap(from: moving.indexPath.item, to: indexPath.item)
    animate(moving: moving, to: cell)
}

private func animate(moving movingCell: MovingCell, to cell: UICollectionViewCell) {
    panGesture.isEnabled = false
    
    UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.1, initialSpringVelocity: 0.7, options: .allowUserInteraction, animations: {
        
        movingCell.cell.center = cell.center
        cell.center = movingCell.cell.center
        
    }, completion: { _ in

        // ここが問題
        self.collectionView.reloadData()
        self.panGesture.isEnabled = true
        self.movingCell = nil
    })
}
```

一見問題なく動きますが、

![IMG_0025.TRIM.MOV.gif](https://qiita-image-store.s3.amazonaws.com/0/219965/1e2902e4-95a4-7ed2-41a7-470251a5897f.gif)


一番左上のセルを移動させようとすると移動位置がおかしくなります。

![IMG_0026.TRIM.MOV.gif](https://qiita-image-store.s3.amazonaws.com/0/219965/368747e8-a83f-12b3-babd-a97a3499d14d.gif)

画面上では消えたように見えますが、
実際には同じ位置の下にいます。

この現象が起きるのは、一番左上のセルから他のセルに移動された場合のみで、
逆に他のセルから左上のセルに移動させる場合には問題はありませんでした。

色々原因を探ってみましたが、

Storyboardでcellを作成しているから? →コードから生成しても変わらず。

MainThreadで処理していない？→あえてDispatchQueue.main.async内でやってみたが変わらず。


# 回避策

結局この条件の時だけ、最後に移動させるようにしました。
reloadDataのあとに確実に処理を行うために、animationのcompletionで処理を行なっています。

```
UIView.animate(withDuration: 0, animations: {
    self.collectionView.reloadData()
}, completion: { _ in
    if movingCell.indexPath.item == 0 {
        cell.frame.origin.x = 0
    }
    self.panGesture.isEnabled = true
    self.movingCell = nil
    completion()
})
```

![IMG_0027.TRIM.MOV.gif](https://qiita-image-store.s3.amazonaws.com/0/219965/a40d0ce8-9c44-e7f9-14db-4dd9d113ba1e.gif)


# まとめ

なぜこの現象が起きるのかがわかっていないのですごい気持ち悪いです:cold_sweat:
IndexPath(item: 0, section: 0)であることが何か関係しているのか。:thinking:

もうちょっと調べてみます。

何か他の解決法をご存知の方がいらっしゃいましたら教えてください:bow_tone1: