OmniAICreator/Qiita-1.07M huggingface dataset:
（小ネタ）docker-compose.yml をビルドに使う

多分いろんな人が書いているであろう小ネタ。

たとえば、 `Dockerfile` をビルドする際に、毎度毎度、下記のようにするぐらいなら、

```console
$ docker build -t foobar.com/foobar:1.0.0 .
```

下記のような `docker-compose.yml` ファイルを用意しておいて、

```yaml:docker-compose.yml
version: "2.4"

services:
  build_foobar:
    image: foobar.com/foobar:1.0.0
    build:
      context: ./
```

`docker-compose build` コマンドを実行すればいいです。そのまま `docker-compose push` も可能です。

```console
$ docker-compose build
$ docker-compose push
```

複数個のDockerイメージをビルドするのも`docker-compose build` で一発対応できますし、サブディレクトリにDockerfileがあっても、Dockerfileの名前が異なってもへっちゃらです。

```yaml:docker-compose.yml
version: "2.4"

services:
  build_foobar:
    image: foobar.com/foobar:1.0.0
    build:
      context: ./

  build_barbaz:
    image: foobar.com/barbaz:1.0.0
    build:
     context: ./subdir
     dockerfile: barbaz.Dockerfile
```

バージョンは環境変数から与えたい？それなら、

```yaml:docker-compose.yml
version: "2.4"

services:
  build_foobar:
    image: foobar.com/foobar:${VERSION}
    build:
      context: ./

  build_barbaz:
    image: foobar.com/barbaz:${VERSION}
    build:
     context: ./subdir
     dockerfile: barbaz.Dockerfile
```

としておいて、 `VERSION=0.0.1 docker-compose build` みたいにしてもいいでしょう。

```console
$ VERSION=0.0.1 docker-compose build
Building build_foobar
Step 1/1 : FROM busybox
 ---> 22c2dd5ee85d

Successfully built 22c2dd5ee85d
Successfully tagged foobar.com/foobar:0.0.1
Building build_barbaz
Step 1/1 : FROM busybox
 ---> 22c2dd5ee85d

Successfully built 22c2dd5ee85d
Successfully tagged foobar.com/barbaz:0.0.1
```

## リンク

- https://docs.docker.com/compose/compose-file/compose-file-v2/#build
- [この記事のソースコード](https://github.com/knjname/2018-07_useDockerComposeAsBuildFile)
反射神経測定アプリをGoogle Playストアに公開してみた

#はじめに
約1年前に勉強のためにAndroidのゲームアプリを作成し、GooglePlay上に公開したのですが、特に宣伝などしなかったため、インストール数が1という残念な状態でした…。もうだいぶ仕様など忘れてしまったのですが、**最初の5分ぐらいは飽きずに楽しめるアプリ**だと思ってるので、覚えてるかぎりでも記録に残そうと思い、記事を書きました。

#完成したアプリ
[Rapid Tap - Google Play のアプリ](https://play.google.com/store/apps/details?id=sinhalite.rapidchoice)

![Screenshot_1532355388.png](https://qiita-image-store.s3.amazonaws.com/0/104983/3ac1fb12-a831-1a90-6801-adea2f113f67.png)


1~32の数字を順番に素早くタップしていく脳トレ＆反射神経アプリです。
タイムが20秒切るとSランクで、15秒を切るとSSランクです。

コツとしては次の数字だけを探すのではなく、全体を俯瞰して数字を把握し、タップする順番を頭で組み立てると良いタイムが出ると思います。

ちなみに私のベストはSランクで、SSランクは出したことありません。
適当に設定したので、超人で無い限り、15秒は切れないと思います…。

#必要となる知識
大きく分けて以下の4つでしょうか。勉強する事が多く、そこそこしんどいです。

- Java
	ゲームのロジック部分

- Android SDK
	Android独自のイベントや部品など

- Android Studio
	アプリのコーディング、ビルド

- Google Play Console
	アプリの公開

#参考書
正直、「この本めちゃくちゃ分かりやすい！」って本は無かったです。
またAndroid StudioやAndroid SDKは頻繁にバージョンアップするため、記載内容がどんどん古くなってしまうので、多少の問題は自己解決できる人じゃないと厳しいかな…という印象です。

ただAndroidの開発においては、ウェブの情報だけだと限界があると思うため、何かしら本は買った方が良いと思います。私が使ったのは以下2冊です。最近は以下の本より新しい本が出ているかと思いますので、なるべく新しい書籍を購入したほうが良いと思います。

[TECHNICAL MASTER はじめてのAndroidアプリ開発 第2版（山田祥寛）](https://www.amazon.co.jp/dp/4798048534/)
[ほんきで学ぶAndroidアプリ開発入門 第2版（株式会社Re:Kayo-System ）](https://www.amazon.co.jp/dp/B01N035NLT/)

#思ったこと
- 静的型付けの言語をほとんど使ったことがなかったので戸惑ったが、慣れれば問題はなさそう。
- アクセス修飾子がまだ完全に理解出来てない。
- 署名キーを忘れ、結局思い出せず、パッケージ名を変えて再公開。しんどすぎる。
- WEBならHTML+CSS+JSなので情報がいっぱいあるが、AndroidアプリのViewに関する情報は少ない。英語が読めないと辛そう。
- 私はAndroidのエミュレータのためにCPUをAMDからIntelに変えたのです…。だからこそアプリを一本作り上げねばという気持ちになれた部分はある。
[PowerQuery]営業日数を取得する

Excelの[NETWORKDAYS.INTL](https://support.office.com/ja-jp/article/networkdays-intl-%E9%96%A2%E6%95%B0-a9b26239-4f20-46a1-9ab8-4e925bfd5e28)関数で「週末」に`"0000000"`(=週末無し)を指定したときと同じ挙動になるPowerQueryの関数をメモ

### 前提
休日一覧のテーブルをPowerQueryに取り込んでおく。
見出しを「休日」とする。
![休日一覧.png](https://qiita-image-store.s3.amazonaws.com/0/97601/1655d71f-1b8b-482a-e7f3-7d8e14ba7f80.png)

### 関数


```
(開始日 as date, 終了日 as date, optional 休日一覧 as table) as number =>
let
  Lst休日一覧 = if 休日一覧 = null then {} else Table.Column(休日一覧,"休日"),
  NumLst休日一覧 = List.Transform(Lst休日一覧 ,each Number.From(_)),
  NumLst指定期間 = if 開始日<終了日 then {Number.From(開始日)..Number.From(終了日)} else {Number.From(終了日)..Number.From(開始日)},
  NumLst差分  = List.Difference(NumLst指定期間, NumLst休日一覧),
  営業日数 = if 開始日<終了日 then List.Count(NumLst差分) else List.Count(NumLst差分)*(-1)
in
  営業日数
```


**2018/07/24追記** ifを使わないバージョンを作ろうと思ったが、休日一覧が指定されないときにTable.Columnでこけるので、そっとoptionalを外して今回は逃げることにした↓

```
(開始日 as date, 終了日 as date, 休日一覧 as table) as number =>
let
  指定期間 = List.Generate( () => List.Min({開始日,終了日}), each _ <= List.Max({開始日,終了日}), each Date.AddDays(_,1)),
  営業日数 = List.Count( List.Difference( 指定期間, Table.Column(休日一覧,"休日") ) )
in
  営業日数
```

### 参考
[Tech Net: Calculate Working Days using Power Query](https://social.technet.microsoft.com/Forums/en-US/b48aebbf-3219-4d36-a619-4a2f6437b2fc/calculate-working-days-using-power-query?forum=powerquery)
Windows上でJAVA_HOMEを指定してTOMCATを起動する方法

会社のセキュリティポリシーにより、windowsの環境変数を変更できない場合がある。
ただ、開発者はローカル端末にサーバを立てる必要がある場合がある為、その際に環境変数を変更せずに「JAVA_HOME」を指定してTOMCATを起動する方法を以下に記載する。

#前提
以下のものをローカルにダウンロードして展開していること。
1.JDK
2.TOMCAT
以下の手順では、JDKが「Program Files」に展開されているが、インストーラを使用せずに展開する方法がある為、その方法を利用すればインストーラも使用せずにJDKのダウンロードからTOMCATの起動までをすべてセキュリティポリシーを迂回して実施することができます。
（インストーラを使用せずにJDKを展開する方法は、別途ページを作成します。）

#手順1 JDKの展開先を確認する
![tempsnip.png](https://qiita-image-store.s3.amazonaws.com/0/204260/36289204-4ab7-07ff-0521-813c16efb5be.png)
キャプチャでは、「C:\Program Files\Java\jdk1.8.0_161」となっている。

#手順2 TOMCATの起動バッチの格納先を確認する。
![tempsnip.png](https://qiita-image-store.s3.amazonaws.com/0/204260/5eadd54f-1a46-7e99-2992-1071518a4861.png)
キャプチャでは、「C:\00_myspace\01_server\01_tomcat\apache-tomcat-9.0.6\bin」となっている。

#手順3　コマンドプロンプトを起動する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/204260/88516e7b-caa0-f237-bdcc-899341f089c6.png)

#手順4　JAVA_HOMEを設定する。
```cmd
set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_161
```
![tempsnip.png](https://qiita-image-store.s3.amazonaws.com/0/204260/63a0d089-b313-e82f-e80e-2aa6e89894e5.png)

#手順5　TOMCAT起動バッチの格納先へ移動する。
```cmd
cd C:\00_myspace\01_server\01_tomcat\apache-tomcat-9.0.6\bin
```
![tempsnip.png](https://qiita-image-store.s3.amazonaws.com/0/204260/2f9ea2fa-bbd0-0011-a1bd-5033d976b90e.png)

#手順6　TOMCAT起動バッチを実行する。
```cmd
startup.bat
```
![tempsnip.png](https://qiita-image-store.s3.amazonaws.com/0/204260/bff24650-3b2b-010b-31a4-7a146d69fb4e.png)

#手順7　ブラウザで起動を確認する。
URL:localhost:8080
![image.png](https://qiita-image-store.s3.amazonaws.com/0/204260/9d7aeb6b-2164-31d4-a0b6-e66ee4c4ca7b.png)

以上、上記手順が環境変数を設定せずにTOMCATを起動する手順となります。
Ubuntu18.04からiPhone(iOS 10.2)にアクセスする

Ubuntu18.04からiPhone(iOS 10.2)にアクセスする。
目的は、任意のデータのコピーをするため。
なお、iPhone ではパスコードを「オン」にしている。
　

### 1. パッケージをインストールする
```
sudo apt-get install -y libimobiledevice6 libimobiledevice-dev
sudo apt-get install -y ifuse
sudo apt-get install -y libimobiledevice-utils
```

### 2. Ubuntu 18.04 と iPhone を USB ケーブルで接続する
```
iPhone にて、アクセス許可を出すこと。
```

### 3. Ubuntu 18.04 から iPhone をマウントする
```
% sudo idevicepair pair
ERROR: Could not validate with device 7a9925b8a9a5a476ce62e6ec7a7898bec549b9d6 because a passcode is set. Please enter the passcode on the device and retry.
```
エラーになるが、iPhone と Ubuntu の USB ケーブルを再接続すれば良い。


### 4. Ubuntu 18.04 から iPhone へデータをコピーする
```
各自が iPhone にインストールしたファイルビューアーを開き、
Ubuntu 18.04 の nautilus などを使ってクリック&ドロップでコピーしてやればOK。

なお、iPhone にドロップしたときに、iPhone 上で接続先を信頼するか否か問われるので「信頼する」を選択すること。
```

　  

#### 参考
http://www.nekochango.com/entry/linux/iPhone/libimobiledevice
xcode swift 画面表示を横向きに固定する。

iPhoneでの画面表示を横向きに固定する方法です。

xcode上で下記設定を行います。
① プロジェクト名を選択します。
② 「General」タブを選択します。
③ 「Deployment Info」 内にある 「Device Orientation」の下記項目のみチェックを付けます。
　　・Landscape Left
　　・Landscape Right

<img width="1119" alt="スクリーンショット 2018-07-23 23.32.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/274592/0627697c-6dca-8fe5-45f9-20e302c39e24.png">

これでiPhoneでの画面表示は、横向きに固定されます。
iPhoneを縦にしても、画面の表示は縦にはなりません。
Kotlinの@Parcelizeを使ってみた

# Parcelizeとは
Kotlin 1.1.4から提供された実験的な機能

詳しくは公式ドキュメントを参照
https://kotlinlang.org/docs/tutorials/android-plugin.html#parcelable

# 何が便利なのか

簡単に書くと、Parcelable型の長いコードが`@Parcelize`アノテーションによって劇的に短くなる！

# 導入方法
[公式](https://kotlinlang.org/docs/tutorials/android-plugin.html#enabling-parcelable-support)にも載っているとおり実験フラグをオンにする

```diff:app/build.gradle
     androidTestImplementation 'androidx.test:runner:1.1.0-alpha3'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0-alpha3'
 }
+
+androidExtensions {
+    experimental = true
+}
```

あとはParcelableクラスにアノテーションをつけるだけ

```diff
+@Parcelize
data class Animal(val dog: String, val cat: String, val bird: String) : Parcelable

//Parcelableに必要なコードは自動生成される
```
注意する点は、Parcelableを継承する必要があること

# 参考リンク

- Parcelable in Kotlin? Here comes Parcelize – ProAndroidDev https://proandroiddev.com/parcelable-in-kotlin-here-comes-parcelize-b998d5a5fcac
  - Parcelize導入はこのリンクを見ながら行った
- Parcelizeを利用してみた所感と注意点 - heihei blog http://blog.shaunkawano.com/entry/2018/06/14/105730
  - Parcelizeの注意点が載っているので参考になる
Clovaスキルでのsignature検証をお手軽に

[この記事](https://qiita.com/imajoriri/items/92d8a2906e554f43b2a5)でlambdaでsignature検証を実装しました。
ここで使用した関数たちをモジュール化しました。
***Lambda以外でも、ヘッダーが取得できればどこのでも使えます。***

# install

モジュール自体のインストール

```
npm install --save clova-signature
```

以下より、公開鍵をダウンロードする

```
$ curl -O https://clova-cek-requests.line.me/.well-known/signature-public-key.pem
```

# AWSでの設定

lambdaではデフォルトではヘッダーの値を取得できないのでAPI Gatewayで設定する必要があります。
API Gatewayの設定は以下の記事を参考にしてください。

https://dev.classmethod.jp/cloud/aws/api-gateway-mapping-template/
https://qiita.com/imajoriri/items/92d8a2906e554f43b2a5

マッピングテンプレートは以下です。

```
{
  "headers": {
#foreach( $key in $input.params().header.keySet() )
    "$key": "$input.params().header.get($key)"#if( $foreach.hasNext ),#end
#end
  },
  "requestParameters": $input.json('$')
}
```

# コード

```js
var sig = require('clova-signature');

var headerSignature = event.headers.signaturecek || event.headers.SignatureCEK;
 
var params = {
  keyPath: './signature-public-key.pem', // ダウンロードしたpemファイルのパス
  applicationId: "co.jp.tekito", // CEKで設定したapplicationID(extensionID)
  requestBody: event.requestParameters, // CEKからのJSON
  headerSignature: headerSignature, // headerに含まれるsignatureCEKの値。
}
 
// 検証する。検証に失敗したらエラーが返る。
sig.verify(params)
```

# GitHub

https://github.com/imajoriri/clova-signature
簡単なディレクトリ構成図を書く

# ディレクトリ構成図を書きたい
Qiitaとかに投稿するときにこんなディレクトリ構造書きたかったんですが、中々やり方出てこなかったのでシェアです！

```:こんな構成図を書きたい！
.
├── fuga.py
├── fuga_dir
│   ├── fuga
│   └── fugafuga
├── fugafuga.py
├── fugahoge.py
├── hoge.py
└── hoge_dir
    ├── hoge
    └── hogehoge
```

### 記号で書く方法
[ディレクトリ構成図を書くときに便利な記号 - Qiita](https://qiita.com/paty-fakename/items/c82ed27b4070feeceff6)

### treeコマンドをコピーする方法
[[Linux] ディレクトリ構成図作るのに便利だよ tree コマンド | バシャログ。](http://bashalog.c-brains.jp/12/12/03-093334.php)

私はこのやり方使ってます！
筆者のWSL(Windows Subsystem for Linux)環境では以下でできます

```bash
tree | clip.exe
```
正式なSSLサーバ証明書を発行して使用する

ローカル環境や一般公開しない特定の範囲内で使用する分には、自己証明書(オレオレ証明書)でも問題ありませんが、一般公開するような用途では警告(信頼された証明機関から発行されたものではありません)が出てしまうのでお勧めできません。
最近ではSSL証明書の導入を標準化する流れですし。

そこで、さすがに有料になってしまいますが、正式なSSLサーバ証明書を発行してみます。
最近は安いもので年額1,500円程度で発行できます。
_※最近では **Let’s Encrypt** という無料のSSL証明書もあったりします。_

SSLサーバ証明書には下記の３種類があるのですが、

* ドメイン認証SSL
* 企業認証SSL
* EV SSL

ドメイン認証SSL以外は個人で取得できないので、ドメイン認証SSLを取得する前提ですすめます。

# CSR(Certificate Signing Request)の作成
まずは、申し込みに必要となるCSR(Certificate Signing Request)ファイルを用意します。
途中まではオレオレ証明書を作成する流れと一緒です。

まずは、ディレクトリを移動。(ここである必要はありません。)

```shell
# cd /etc/pki/tls/private
```

そして、秘密鍵の作成。

```shell:秘密鍵の生成
# openssl genrsa -des3 2048 -rand /var/log/ > www.hoge.jp.key
Generating RSA private key, 2048 bit long modulus
................................................................................+++
..........................................+++
e is 65537 (0x10001)
Enter pass phrase:                ←秘密鍵のパスフレーズを入力
Verifying - Enter pass phrase:    ←もう一度入力
```

あと、暗号化を解除しておきます。(オリジナルはコピーしておく)

```shell:暗号化の解除
# cp -p www.hoge.jp.key www.hoge.jp.key.org
# openssl rsa -in www.hoge.jp.key -out www.hoge.jp.key
Enter pass phrase for private/localhost.key:    ←秘密鍵のパスフレーズを入力
writing RSA key
```

そしてCSRの作成。正式な証明書なので、入力項目は正式な情報を入力します。

```shell:CSRの作成
# openssl req -new -key ./www.hoge.jp.key -out ./www.hoge.jp.csr
Country Name (2 letter code) [XX]:JP                                  ←国コード
State or Province Name (full name) []:Tokyo                           ←都道府県
Locality Name (eg, city) [Default City]:Edogawa-ku                    ←市区町村
Organization Name (eg, company) [Default Company Ltd]:SOFTPLUS        ←組織名(これは自分が名乗っているもので大丈夫です。サイト名など)
Organizational Unit Name (eg, section) []:                            ←部署名(未入力でもOKです)
Common Name (eg, your name or your servers hostname) []:www.hoge.jp   ←発行するドメイン(間違わないように！)
Email Address []:                                                     ←未入力でOK

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:                                              ←未入力でOK
An optional company name []:                                          ←未入力でOK
```

これでCSRの完成です。

# 発行を申請(委託)する
あとは発行を委託するサービスを選びます。
これはお好きなサービスを選べば良いと思いますが、自分はさくらのラピッドSSL(年額税込み1,620円)を選びました。(サーバもさくらなので)

申し込みの際に先ほど作成したCSRを求められると思うので、入力して申請します。
さくらの場合はこの後、ドメインの正当性確認のために確認用のHTMLファイルが発行されるので、それをドメイン直下に配置(インターネットから参照できるように)して待ちます。
さくらのラピッドSSLだと、営業日の申請であれば早ければその日にサーバ証明書が発行されます。

# 中間証明書という名の落とし穴
発行されたら、あとはサーバに設定するだけなのですが、ここで注意すべき点があります。
発行機関によっては発行された証明書の他に、中間証明書もサーバ側に設定してあげないといけません。(まさにラピッドSSLはそうでした)
中間証明書を設定しないと、PCのブラウザなどでも問題なく(警告なく)表示されても、Androidのブラウザなどではなぜか警告が出るという状態になります。
自分も最初はまりました。。。ちゃんと証明書の発行通知のメールに中間証明書もインストールしてと書いてあるんですけどね(笑)

Apacheではサーバ証明書の他に中間証明書を指定するプロパティがあるのですが、Nginxにはありません。
ならどうするのか？。。。答えは簡単で１ファイルにくっつけてあげますｗ

```shell
# cat www.hoge.jp.crt
-----BEGIN CERTIFICATE-----
発行されたサーバ証明書
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
中間証明書
-----END CERTIFICATE-----
```

なので、証明書としての中身はこんな感じで２つが一緒に記載された形になります。
firestore で配列の検索・追加・削除がサポートされたので試してみた

firebase JavaScript SDK v5.3.0 がリリースされた(July 19, 2018)。そしてこのバージョンでめでたく firestore で配列の検索 `array-contains` 、要素の追加 `arrayUnion` と要素の削除 `arrayRemove` がサポートされた。本当にめでたい。firestore を使っていない人からしたら配列の検索・追加・削除がそんなに嬉しいのか？と思うかも知れないが、本当に嬉しいのです。

例えば、firestore はドキュメント指向なので以下のようなデータを持つことができる。

```json
{
  "name": "zaru",
  "items_array": [
    "foo",
    "bar"
  ]
}
```

MongoDB のように柔軟に良い感じに使えそう。

## 配列の検索

では、この `items` に `foo` を持っているデータを検索しようとするとどうなるかというと、普通にはできなかった。今までは。検索クエリが単純な `<`, `<=`, `==`, `>=`, `>` しかなかったため、 `items` の n 番目に存在しているかも知れないというクエリは書けなかった。

なので、代替案として以下のパターンが推奨されていた。

```json
{
  "name": "zaru",
  "items_object": {
    "foo": true
    "bar": true
  }
}
```

そう、配列の代わりにオブジェクト（ハッシュ）を使ってくれということ。これなら以下のようなクエリが書ける。

```javascript
DB.collection('sample').where('items_object.foo', '==', true).get().then(res => {
  res.forEach(doc => {
  })
})
```

これが v5.3.0 からは配列であっても `array-contains` を使えば検索できる。

```javascript
DB.collection('sample').where('items_array', 'array-contains', 'foo').get().then(res => {
  res.forEach(doc => {
  })
})
```

素晴らしい。配列データをちゃんと配列として使うことができて嬉しい。なお、検索パフォーマンスは、1000件程度の場合では配列でもオブジェクトでも違いが見られなかった。インデックスがちゃんと効いているっぽい気がする。

## 要素の追加

配列に要素を追加するのも今まではできなかった。まるごと update するしかなかった。

```javascript
DB.collection('sample').doc('doc').update({
  items_array: firebase.firestore.FieldValue.arrayUnion('zaru', 'soba')
})
```

## 要素の削除

配列の削除はこちら。

```javascript
DB.collection('sample').doc('doc').update({
  items_array: firebase.firestore.FieldValue.arrayRemove('zaru', 'soba')
})
```

これで firestore でも配列をふんだんに使ったデータ構造ができますね。嬉しい。
【Unity】Gradientからカラーランプテクスチャを生成する

UnityでGradientクラスのインスタンスからカラーランプテクスチャをランタイムで生成して、シェーダーで利用するまでの方法です。

Gradientのグラデーションをインスペクターから設定し、`CreateTexture`でGradientからテクスチャを生成しています。
テクスチャはx方向にグラデーションになるようにしています。

```csharp:GradientTextureTest
using UnityEngine;

[ExecuteInEditMode]
public class GradientTextureTest : MonoBehaviour {

    [SerializeField] private Gradient gradient;

    private void Awake()
    {
        Material material = new Material(Shader.Find("Custom/Gradient"));
        material.SetTexture("_GradientTex", CreateTexture());
        GetComponent<Renderer>().material = material;
    }

    private Texture2D CreateTexture()
    {
        Texture2D texture = new Texture2D(128, 1);
        for (int h = 0; h < texture.height; h++)
        {
            for (int w = 0; w < texture.width; w++)
            {
                texture.SetPixel(w, h, gradient.Evaluate((float)w / texture.width));
            }
        }

        texture.Apply();
        texture.wrapMode = TextureWrapMode.Clamp;
        return texture;
    }
}
```

使用したシェーダーです。法線と`_Dir`で指定した方向の角度に応じてテクスチャをサンプリングしています。

```
Shader "Custom/Gradient"
{
	Properties
	{
		_GradientTex ("Gradient Texture", 2D) = "white" {}
		_Dir ("Direction", Vector) = (0, 1, 0)
	}
	SubShader
	{
		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float3 normal : NORMAL; 
			};

			struct v2f
			{
				float4 vertex : SV_POSITION;
				float3 normal : TEXCOORD0;
			};

			sampler2D _GradientTex;
			float3 _Dir;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.normal = UnityObjectToWorldNormal(v.normal);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				float3 normal = normalize(i.normal);
				float3 dir = normalize(_Dir);
				float3 col = tex2D(_GradientTex, float2(dot(normal, dir) * 0.5+ 0.5, 0));
				return fixed4(col, 1.0);
			}
			ENDCG
		}
	}
}
```

Sphereメッシュに使用するとこんな感じになります。

![output.gif](https://qiita-image-store.s3.amazonaws.com/0/61569/b32a4705-01ef-317e-a87c-b17df8c8e616.gif)
【教訓】HTTP ヘッダーのフィールド名では大文字と小文字を区別しない

[RFC2616](http://www.ietf.org/rfc/rfc2616.txt) の 「4.2 Message Headers」によると下記のように区別しないのが正解のようです。

>Each header field consists of a name followed by a colon (":") and the field value.
>Field names are case-insensitive. 

「x-foo-bar」 も 「X-Foo-Bar」 も 「X-FOO-BAR」 も見た目が違っても等しく平等に扱わないとダメです。
「ヒャッハー！ （完全一致で）汚物は消毒だー！！」とかやると自分が消毒されます。
gcc アップデート


Rubyをインストールしたいのに紆余曲折してgccを最新版にする事に。

１.gccをダウンロード
`ctrl -O ftp://ftp.ntua.gr/pub/gnu/gcc/releases/gcc-8.1.0/gcc-8.1.0.tar.gz`

ダウンロードに20分くらいかかった...早いところがあればそちらからでも良いと思います。

２.gccを解凍
`tar -jxvf gcc-8.1.0.tar.gz`

解凍後、できたフォルダに移動
`cd gcc-8.1.0`

３.依存パッケージのインストール
`# ./contrib/download_prerequisites`

gccのセットアップ必要なパッケージがインストールされる。

４.ツールのインストール２つ
`# yum -y install glibc-devel*`
`# yum -y install gcc-c++*` ...5分くらいかかった

５.gccのビルド
`# mkdir build cd build`
`# ../configure --disable-multilib`
`# make`

続く...

...翌日

うわ。寝る前に実行させて起きてもまだmakeしてる...

続く...

...昼休み

うわ。まだやってる。
DTIのEntryなvpsだからスペックが低いのかな？

続く...

...続き

ようやくmakeが終わった模様。
23:00頃に実行して、翌日15:45頃に完了 ... 約17時間
おーーーーーい、かかりすぎでしょ。

次は
`make install`

続く...

...続き

と思ったら、全然絶賛make中であった。
結局24時間以上makeしていた。だいたい、25時間くらい...て、長すぎんだろ！？
これが普通なの？

今入っているgccをアンインストール。

yumでインストールしたので `yum remove gcc` を叩いてアンインストール。

その後`make install` をして、gccまでのパスを通して完了。

gccのインストール先は、`/usr/local/bin/gcc`なので、bashへ記載。

```
sudo vim ~/.bash_profile

# .bash_profile
 :
PATH=/usr/local/bin:$PATH  ←追加
```

後は.bash_profileを再読み込みさせる。
`source ~/.bash_profile`

で、バージョン確認。

```
gcc -v

組み込み spec を使用しています。
COLLECT_GCC=gcc
COLLECT_LTO_WRAPPER=/usr/local/libexec/gcc/x86_64-pc-linux-gnu/8.1.0/lto-wrapper
ターゲット: x86_64-pc-linux-gnu
configure 設定: ../configure --disable-multilib
スレッドモデル: posix
gcc バージョン 8.1.0 (GCC) 
```

お！バージョン上がっている。
やっと、終わった...

実のところ、vpsのCentOSを借りたのが初めてで、やりたいことをするために色んなパッケージを入れる羽目になってます。サーバ作るのって...大変
正直、こんなに色んなパッケージをインストールしないといけないとは思ってもみなかった。
Javaで、先頭と末尾のみから、複数の指定した文字をトリムしたい。

### 先頭と末尾のみから、指定した複数の文字をトリムしたい。

#### 結論

apache.commons.lang が使えない環境じゃない限りは
下記のコードの出番はないです。

stripメソッドを使いましょう。速いし。

これより先は、物好きの方のみ推奨。

----

たとえば。
全角スペース、半角スペース、タブ文字　以外の要素を取得したい。

なんてこと、よくある気がする。
都度、replaceAll？
「取り出したい要素の中にある半角スペース等は置き換えたくない」
　から、使えないんです。

そんな時に、下記コードを書きました。
コピペプログラマーの助けになれば幸いです。



```Java
	private String trim(String target) {
		if (target == null || target.isEmpty() || TRIM_CHARS.isEmpty()) {
			return target;
		}
		final char[] chars = target.toCharArray();
		int trimHeadIndex = 0;
		int trimTailIndex = 0;
		for (int i = 0; i < chars.length; i++) {
			if (!TRIM_CHARS.contains(chars[i])) {
				trimHeadIndex = i;
				break;
			}
		}
		for (int t = chars.length; t > 0; t--) {
			if (!TRIM_CHARS.contains(chars[t - 1])) {
				trimTailIndex = t;
				break;
			}
		}
		return target.substring(trimHeadIndex, trimTailIndex);
	}
```

TRIM_CHARS は配列なんだけれども
追加のし易さ的に、はじめはListで、
操作し終えた上で `Collections#unmodifiableList` にして、
定数として持っていたりするのが良いかも。
（final修飾子だけじゃなくて、ね）

「正規表現使っても出来そうだなぁ。」と今更思ったけど、
実現できてるから、いいか。

ちなみに、サロゲートペア文字で実験しても期待通り動いてくれました。
（想定外でしたが）
[C++] DirectShowを使おうとして軽くハマった話

#0. TL;DR
DirectX SDKを入れたのにコンパイルが通らないと思ったら,
リンカに, dshow.libが依存するlibを指定し忘れていてコンパイルできなかっただけだった...


#1. はじめに
どうも皆さん, C++ビギナーです.
普段はC#を使っているのですが, 今回仕事の都合でC++とDirectShowを使うこととなり勉強を開始しました.

C++は大学生の時分に舐める程度やったのですが, もはや頭の中にはほとんど知識は残っておらず, DirectShowなんて今回初めて存在を知ったため, 内心ビビりまくりで28歳最後の夏を過ごしております.

そんな中, 意気揚々とWin32アプリのプロジェクトを作成して #include "dshow.h" と書き込み,
鼻歌交じりでコーディングをしていざコンパイルをしてみると"エラー"の嵐が...

#2. エラーとの闘い その1
エディター上ではエラーが発生せず, LINKエラーが大量に発生していたため「pathが通っていないのか？」と, まずはパス回りを確認.
とりあえずはヘッダへのパスもライブラリへのパスもデフォルトでちゃんと通っているようだ！と思いつつ, dshow.libなるライブラリがないことに気付く.

ここで「新しく支給されたPCだから, DirectX SDK 入れてないだけやんけ!!」と考え, 急いでDirectX SDKを
インストール. これでコンパイルが通って, サンプルコードもちゃんと動けば完璧だ.

しかし, 現実はそう甘くはなかった...

#3. エラーとの闘い その2
お茶を一口啜りながら優雅にコンパイルを実行. あとはサンプルアプリの起動を待つばかり...
だがそこで現れたのは憎きエラーメッセージの山!!!!

最初よりは少なくはなっていたが, それでもエラーが出てくるのは気にくわない.
しかも出てるエラーがまたもやLINKエラー!! DirectX SDKは入っているはずなのになぜ...
ライブラリのフォルダを見てみると, そこにはちゃんと dshow.lib があった. ならばどこに問題が?

ここから長い旅が始まる...

CoCreateInstance()でエラーが発生しているようだったので, Google先生に質問してみる.
目ぼしいサイトを見てみては, 解決方法を試みるも失敗の連続.
あぁ, 僕はなんて神様に嫌われた技術者なんだ. 考えているうちに時間だけが過ぎ去っていく.

#4. そして解決へ
一度, 初心に戻り DShow.h の[公式ページ](https://docs.microsoft.com/ja-jp/windows/desktop/DirectShow/setting-up-the-build-environment)へ行ってみる.
すると, _"DirectShow uses the static library files shown in the following table."_なる文言が見えた.

ここの文章から察するに, _Strmiids.lib_と_Quartz.lib_もないとダメそうな書き口だ.
そこで僕はおもむろに, 

```
[プロジェクト]->[プロパティ]->[構成プロパティ]->[リンカ]->[入力]->[追加の依存ファイル]
```

に上の2つのライブラリ名を入力し, コンパイルを実行した.

すると見事にコンパイルが成功し, 無事サンプルコードが動き出したではないか!!

#5. おわりに
C++を愛用している人たちからすれば当たり前の設定なのかもしれませんが, 畑違いの僕には何がなんだかわからず絶望しかけました. やはり慣れない言語を使うのは中々に難しいですね.
ただ, DirectShowを使ってのデバイス制御系のプログラミングは今まであまり触れてこなかった分野であるので, 日々新しいことを知れて楽しいです. これからもっとC++を楽しむために更に勉強と経験を積んでいきたいと思います.

駄文をここまで読んでくださいありがとうございました.
Hanami::Repositoryが参照するテーブル名をデフォルトから変えたい時

Hanamiを使っているとRepositoryが自動で設定してくれるテーブル名を変更したい時があります。

## 対応

```ruby
class HogeRepository < Hanami::Repository
  self.relation = :t_hoges
end

HogeRepository.new.t_hoges.where(id: 1)
# => [sample] [INFO] [2018-07-23 22:56:27 +0900] (0.000640s) SELECT `id` FROM `t_hoges` WHERE (`id` = 1) ORDER BY `t_hoges`.`id`
```

`Hanami::Repository.relation`を上書きすることで対応可能です。

## 私の場合

`Hanami::Repository`が推測してくれるテーブル名は`Hanami::Utils::String.pluralize`というメソッドによって実装されているのですが、こいつが時たま「マジかっ」って変換をします。

```ruby
irb(main):003:0> Hanami::Utils::String.pluralize('fee')
=> "fees"
irb(main):004:0> Hanami::Utils::String.pluralize('original_fee')
=> "original_ves"
```

こういうやつ。

このままだと
`FeeRepository`はfeesテーブルを参照するのに、
`OriginalFeeRepository`はoriginal_vesテーブルを参照してしまいますね。

feeに接頭語をつけると複数形が変化してしまうんですね。

言語的に何が正しいのかまでは分からないのですが、
私の場合は、接頭語がつく時とつかない時も同じようにfeesを参照して欲しかったので、
`Hanami::Repository.relation`を上書きすることで無事に対応できましたとさ。

## リスク

> `Hanami::Repository.relation`を上書きする

という対応はHanamiの公式ドキュメントには載っていない方法です。
[hanami/repository.rb#L281](https://github.com/hanami/model/blob/v1.2.0/lib/hanami/repository.rb#L281)らへんにできる風なコメントは書いてありますが、後々変更されるリスクはあると思います。

こういったリスクを取りたくない場合は、素直にHanamiが設定するテーブル名にすることがよいかと思われます。
モデルの名前を変更するのも一案ですね。


マサカリ歓迎です。コメントください！

以上。
Azure 関連の認定資格まとめ (2018年版)

本記事では、2018年7月時点の Azure 関連認定資格についてまとめています。

# Microsoft 認定資格体系
Azure 以外も含めた Microsoft の認定資格については、[このブログ](https://buildazure.com/2016/09/27/microsoft-certification-changes-and-goodbye-to-mcsd-azure-solutions-architect/)がよくまとまっています。このブログにある分類の、Cloud Platform & Infrastructure にある認定資格が Azure に関連のあるものになります。

2016 年に認定資格の体系が整理され、MCSD:Azure Solutions Architect と 70-534 試験がなくなりました。

参考：Microsoft 認定資格 公式ページ
https://www.microsoft.com/ja-jp/learning/certification-overview.aspx

# Azure 関連認定資格
マイクロソフトの認定資格は試験とは別になっており、複数の試験に合格することで認定資格を取得することができます。

## 認定資格
Azure と直接関係する認定資格には以下の3つがあります。

#### アソシエイト認定資格
* マイクロソフト認定ソリューション アソシエイト (MCSA:クラウドプラットフォーム)
* マイクロソフト認定ソリューション アソシエイト (MCSA:Linux on Azure)

#### プロフェッショナル認定資格
* マイクロソフト認定ソリューション エキスパート (MCSE:クラウドプラットフォームとインフラ)

### 認定資格詳細
#### [**マイクロソフト認定ソリューション アソシエイト (MCSA:クラウドプラットフォーム)**](https://www.microsoft.com/ja-jp/learning/mcsa-cloud-platform-certification.aspx)
以下のいずれか2つの試験に合格することで取得可能。

* **70-532: Microsoft Azure Solutions の開発**
* **70-533: Microsoft Azure Infrastructure Solutions の実装**
* **70-535: Microsoft Azure Solutions の設計**
* 70-537: Microsoft Azure Stackを使用したハイブリッドクラウドの設定と運用

#### [マイクロソフト認定ソリューション アソシエイト (MCSA:Linux on Azure)](https://www.microsoft.com/ja-jp/learning/mcsa-linux-azure-certification.aspx)
以下２つに合格

* 70-533: Microsoft Azure Infrastructure Solutions の実装
* LFCS: Linux Foundation Certified System Administrator

#### その他の Cloud Platform & Infrastructure の認定資格
* [MCSA: Windows Server 2012](https://www.microsoft.com/ja-jp/learning/mcsa-windows-server-certification.aspx)
* [MCSA: Windows Server 2016](https://www.microsoft.com/ja-jp/learning/mcsa-windows-server-2016-certification.aspx)

#### [**マイクロソフト認定ソリューション エキスパート (MCSE:クラウドプラットフォームとインフラ)**](https://www.microsoft.com/ja-jp/learning/mcse-cloud-platform-infrastructure.aspx)
MCSA 取得後、以下から追加でいずれか1つ（合計3試験）合格で取得可能。

* **70-532: Microsoft Azure Solutions の開発**
* **70-533: Microsoft Azure Infrastructure Solutions の実装**
* **70-535: Microsoft Azure Solutions の設計**
* 70-473: Cloud data platform solutionーションの設計と実装
* 70-475: Big Data Analytics Solutionsションの設計と実装
* 70-744: Windows Server 2016 のセキュリティ
* 70-745: ソフトウェアが定義した DataCenterの実装
* 70-413: サーバーインフラストラクチャの設計と実装
* 70-414: 高度なサーバーインフラストラクチャの実装
* 70-537: Microsoft Azure Stackを使用したハイブリッドクラウドの設定と運用

#### 廃止された認定資格
マイクロソフト認定ソリューション デベロッパー (MCSD: Azure Solutions Architect) は、70-534 試験と共にが廃止されました。

# 受ける試験の順番は？
**上記すべての認定資格に必要な 70-533 試験から受験するのがおすすめです。**その後、70-532 試験, 70-535 試験のいずれかを受験することで、Azure に関連の深い試験のみを受験して MCSE まで取得することができます。
nginxの設定

nginxの各種設定(主に修正しそうな箇所)です。
結構昔にメモしたもの再掲なので、少し古いかも？

```shell:nginxの設定ファイルを開く
# vim /etc/nginx/nginx.conf
```

## user
nginxプロセスを実行するユーザ。

```
user  nginx;
```

## worker_processes
nginxのプロセス数。
Webサーバ専用のサーバなら、サーバコア数を設定するのが良いかと。
他に余力を残しておきたいなら、サーバコア-1とか。

```
worker_processes  3;
```

## worker_connections
1プロセスあたりの最大接続数。
ついでに「use epoll」も指定。Linux2.6からはepollが推奨らしい。

```
events {
    worker_connections  1024;
    use epoll;
}
```

## client_max_body_size
nginxがPOSTで受け取れる最大サイズ。(未設定だと1MB)
普通は1MBあれば十分ですが、例えばGitサーバとして使用してコミットファイルを大量に受け付ける場合などは設定が必要です。
＃一緒にclient_body_buffer_sizeも設定しておきます。

```
http {
    client_max_body_size     100m;
    client_body_buffer_size  256k;
}
```

## tcp_nopush
レスポンスヘッダとファイルの内容をまとめて送信するかどうか。
ONにするとパケットを少なくできます。

```
http {
    tcp_nopush  on;
}
```

## keepalive_timeout
KeepAliveのタイムアウト時間です。

```
http {
    keepalive_timeout  120;
}
```

## その他もろもろ
コンテンツのgzip圧縮設定だったり、リバースプロキシ設定など。説明が適当でスミマセンm(_ _)m

```
http {
    gzip on;
    gzip_comp_level 1;
    gzip_disable "MSIE [1-6]\.";
    gzip_http_version 1.0;
    gzip_buffers 4 8k;
    gzip_min_length 1024;
    gzip_proxied any;
    gzip_vary on;
    gzip_types text/plain
               text/xml
               text/css
               text/javascript
               application/xml
               application/xhtml+xml
               application/rss+xml
               application/atom_xml
               application/javascript
               application/x-javascript
               application/x-httpd-php;

    proxy_buffering     on;
    proxy_buffer_size   64k;
    proxy_buffers       16 64k;
    proxy_cache_path    /var/cache/nginx/proxy_temp levels=1:2
                        keys_zone=czone:15m max_size=512m inactive=7d;
    proxy_temp_path     /var/tmp/nginx 1 2;
    proxy_cache_valid   200 302 2h;
    proxy_cache_valid   301     4h;
    proxy_cache_valid   any     1m;
    proxy_cache_use_stale  error timeout invalid_header updating
                           http_500 http_502 http_503 http_504;
}
```

あと、`/var/cache/nginx/proxy_temp`などのパスを記載しているものは、そのパスが存在していることを確認する。あと書き込み権限なども。なければ作成で。
設定を修正したら、設定ファイルのチェック。そして再起動。

```shell
# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
# service nginx restart
```
JST（JavaScript Templates）ってなんすか

テンプレートエンジンとはデータとテンプレートを合体させ、文字列を作る仕組みのことです。

JavaScriptでいいますと、データというのは、オブジェクトや配列のことで、テンプレートエンジン自体は、JavaScriptのライブラリと考えて問題ありません。

　今回紹介する、JavaScript用テンプレートエンジン「JavaScript Templates（JST）」は、TrimPathというJavaScript用フレームワークの中で使用されているテンプレートエンジンです。JSTを使用することで、JavaScriptファイルとHTMLファイルが完全に分離されている状態を実現することができます。



＊Template literal は組み込み式を扱うことができる文字列リテラル（定数）です。

*template (名詞) ： 毎回作り直す必要がないように、特定のアプリケーションの開始状態として利用される、予め決まった様式を持つドキュメントまたはファイル。

＊テンプレートは、何があってもブラウザにいじくりまわされたくない HTML の塊を置いておく場所なのです。

https://www.html5rocks.com/ja/tutorials/webcomponents/template/
Win10Pro DPI仮想化をオフにする

Windows10Pro(Pro以外は試してないです)でのスケーリングによるぼやけを解消します。
他のサイトを見たのですが、自分が設定しようとした時ではそこに記述してあった設定項目が見当たらなかったので、試行錯誤いじっているうちに見つけた方法です。

#概要
プロパティから高DPI設定の拡大縮小の実行元をアプリケーションにします。


#手順
aviutlを例に作業を進めます。
何もしない状態では、下の画像のように文字がぼやけてしまっています。
![あ.jpeg](https://qiita-image-store.s3.amazonaws.com/0/242536/a26a9c43-75b9-b105-9dd8-959c298b05ca.jpeg)
そこで、ぼやけを解消したいプログラム（以下プログラム）を開いて、
``` 1.タスクバーからアイコンの上で右クリック ```
``` 2.プログラムの名前の上で右クリック ```
``` 3.プロパティをクリック ```
します。
![キャプ1チャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/242536/6b6a27ce-abbd-fb29-f9b3-3c1d0bf23418.jpeg)
開いたプロパティウィンドウの
``` 1.互換性タブ ```
``` 2.高DPI設定の変更 ```
``` 3.高いDPIスケールの動作の上書きにチェック ```
``` 4.拡大縮小の実行元「アプリケーション」 ```
![キャプ2チャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/242536/235d7902-753a-1522-541c-9f012c7e3ccc.jpeg)

アプリケーションを再起動すると設定が適用されます。
（直すときは、逆の手順をしてください）
#注意点＆まとめ
この手順を実行すると、ぼやけはなくなりますが、**スケーリングが100%の時の文字サイズ（ウィンドウサイズ）になります**ので、ウィンドウ全体のサイズが小さくなります。
また、アプリケーションによっては動作がおかしくなる場合があります。

以上です
[備忘録]pythonでbeautiful soupの使い方まとめ

pythonでのスクレイピングツールbeautiful soupを使うときの使い方についてまとめました。
スクレイピングって地味によく使うんですよね...

##最初のhtml parserの処理
uClient = urllib.request.urlopen(doctor_site)
page_html = uClient.read()
uClient.close()
page_soup = soup(page_html, "html.parser")

##タグでの検索(最初に一致したもの)
page_soup.h1

##タグでの検索（複数検索）
findAll("h1")

##タグ＆クラス名での検索（複数検索）
page_soup.findAll("meta",{"name":"description"})

##クラスの取得
page_soup.h1.attrs['class']

他に何かあったら適宜追加していきます。
あと、beautiful soupって書き方が色々あったりするから、注意。
CSRFに関して

## CSRFとは
- Webアプリケーションの**「重要な処理（パスワードやメールアドレスの変更、決済、口座振込など）」**は、ユーザが意図したリクエストか確認が必要。
- 確認が抜けていると、罠サイトを閲覧しただけで**ユーザのブラウザから勝手に**「重要な処理」が実行させられてしまう。
- リクエスト強要とも。

----
以下のようなHTMLがあったとします。

```html
<!-- // 正規のサイト -->
<form action="http://hoge.com/password_change.php" method="post">
  <input type="text" name="password">
  <input type="submit" value="変更する">
</form>
```
----
それに対して以下のようなHTMLを用意します。

```html
<!-- // 罠サイト -->
<body onload="document.forms[0].submit()">
  <form action="http://hoge.com/password_change.php" method="post">
    <input type="hidden" name="password" value="cracked">
  </form>
</body>
```
`password_change.php` で確認の処理が抜けていると、パスワードが勝手に変更させられてしまう。

----
## CSRFの対策
----
inputのhiddenにトークンを埋め込みます。

```php
<?php
session_start();
if (empty($_SESSION['token'])) {
  $token = bin2hex(openssl_random_pseudo_bytes(24));
  $_SESSION['token'] = $token;
} else {
  $token = $_SESSION['token'];
}
?>
<form action="http://hoge.com/password_change.php" method="post">
  <input type="hidden" name="token" value="<?php echo htmlspecialchars($token, ENT_COMPAT, 'UTF-8'); ?>">
  <input type="text" name="password">
  <input type="submit" value="変更する">
</form>
```
----
パスワードの変更受付処理でトークンを検証します。

```php
session_start();
$token = filter_input(INPUT_POST, 'token');
if (empty($_SESSION['token']) || $token !== $_SESSION['token']) {
  die('エラー');
}
```
----
- 他にも「パスワードの再入力を求める」や「リファラをチェックする」といった対策がある。
- トークンの埋め込みが最も一般的。

----
## CSRF(Web APIの場合)
----
こんなAPIがあったとします。

```php
session_start();
if (empty($_SESSION['uid'])) {
  header('HTTP/1.1 403 Forbidden');
  die('ログインしてください');
}
$req = json_decode(file_get_contents('php://input'));
// DBにpasswordをセットする疑似コード
$this->db->set('password', ['uid' => $_SESSION['uid'], 'password' => $req->password]);
header('Content-Type: application/json; charset=utf-8');
echo json_encode(['result' => 'OK']);
```

----
それに対して以下のようなJavaScriptを実行させます。

```js
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.hoge.com/passward");
xhr.withCredentials = true;
xhr.send('{"password": "cracked"}');
```

APIで確認の処理が漏れていると、パスワードが勝手に変更させられてしまいます。

----
## CSRFの対策(Web APIの場合)
----
ログイン(uidを取得)処理でトークンも生成。

```php
if ($_SESSION['token']) {
  $token = bin2hex(openssl_random_pseudo_bytes(24));
  $_SESSION['token'] = $token;
}
header('Content-Type: application/json; charset=utf-8');
echo json_encode(['uid' => $_SESSION['uid'], 'token' => $_SESSION['token']]);
```
----
APIでトークンを検証する。

```php
session_start();
if (empty($_SESSION['uid'])) {
  header('HTTP/1.1 403 Forbidden');
  die('ログインしてください');
}
$token = $_SERVER['HTTP_X_CSRF_TOKEN'];
if (empty($token) || $token !== $_SESSION['token']) {
  header('HTTP/1.1 403 Forbidden');
  die('エラー');
}
...
```
----
## まとめ
- CSRFは攻撃者が罠サイトを作成し、ユーザーに罠サイトを閲覧させることで発動する。
- HTMLフォームの場合もWeb APIの場合もトークンを生成し検証する方法が最も安全。
教えてください。slideToggleがすぐに閉じてしまいます、、、

素人がサイトWordpressを使ってサイト制作しているんですがsydneyというテーマをカスタマイズして制作しています。
トップページ読み込み時にオープニングムービーとしてgifアニメを再生してからトップページを表示したいのですが下記サイトを参考にして実装したところ画面幅がせまっくなった時用のドロップダウンメニューがクリックで開くのですがすぐに閉じてしまうようになりました。
参考にしたサイトと足したコードは下記のとおりです。

参考サイト
https://9-bb.com/fade-3/

<html内>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="fade.js"></script>
  <style>
    #fade-image div {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: center center no-repeat;
      background-size: cover;
      display: none;
      z-index: 9999;
    }
  </style>
  <script>
    deley_time = 1500; //フェードアニメーションのスピード 1000 = 1秒
    image_list = [
      "00001.jpg",
      "00002.jpg",
      "00003.jpg",
    ]//画像のリスト
  </script>

<scriptふぁいる>
var image_list;
var define;
var firstview;


$(document).ready(function(){
  if(firstview == "on") {
    if(!localStorage.getItem("fade_no_first_view")) {
      localStorage.setItem("fade_no_first_view","true");
      setup();
    }
  } else {
    localStorage.removeItem("fade_no_first_view");
    setup();
  }
});


function setup() {
  var html = $("body").html();
  $("body").html("<div id='fade-main-content' style='display:none;'>"+html+"</div>");

  $("body").prepend("<div id='fade-image'></div>");
  for (var i=0 ; i<image_list.length ; i++) {
    $("#fade-image").append("<div style='background-image:url("+image_list[i]+");'></div>");
  }

  for (i=0;i<image_list.length;i++) {
    fade_in_out(i);
  }
}


function fade_in_out (i) {
    if(i == 0) {

      if(1 == image_list.length) {
        $("#fade-image div").eq(i).fadeIn(deley_time,function(){
          $(this).fadeOut(deley_time);
          $("#fade-main-content").fadeIn(deley_time);
        });
      } else {
        $("#fade-image div").eq(i).fadeIn(deley_time,function(){
          $(this).fadeOut(deley_time);
        });
      }
    } else if (i+1 == image_list.length) {
      setTimeout(function() {
        $("#fade-image div").eq(i).fadeIn(deley_time,function(){
          $(this).fadeOut(deley_time);
          $("#fade-main-content").fadeIn(deley_time);
        });
      }, deley_time*i);
    } else {
      setTimeout(function() {
        $("#fade-image div").eq(i).fadeIn(deley_time,function(){
          $(this).fadeOut(deley_time);
        });
      }, deley_time*i);
    }
}
パターン認識　~各識別手法の長所・短所~

初めての投稿です！
不明な点、間違いがあった場合はコメントでご指摘をお願いします。人(･ω･;)

# 初めに
パターン認識について学習しており、各識別手法の長所・短所をざっくりとまとめてみました。

# **k最近傍法**
<手法説明>
学習データの中からk個の学習データ(鋳型またはテンプレートと呼びます)を取り出す。鋳型と識別したいデータの距離をそれぞれ求める。距離が最も短くなった時、その鋳型が所属するクラスが識別したいデータのクラスになる。

- 長所
       - 学習データの数に応じて、kの数を選択できるので適応能力は高い。
       - kの数を適切に設定することで例外データの影響を受けにくくなる。
- 短所
       - k個の学習データとの距離計算、距離を昇順にソートなどの処理があるため、計算時間が大きく、またメモリの消費も大きい。

# **線形識別関数**
<手法説明>
識別境界を線形関数で表現し、識別関数の値でクラスを決定する。

- 長所
       - 全ての学習データを保持することがなく、　要約して識別するので計算量が小さく、またメモリの消費量も小さい。
- 短所
       - 識別境界が直線でしか表現できないため、異なるクラスのデータが混ざり合う処理対象データの場合は線形分離できないので識別能力が落ちる。 

# **線形サポートベクトルマシン**
<手法説明>
サポートベクトル(境界に最も近い学習データ)と識別境界とのマージンが最大なるように識別境界を求め、データ識別する。

- 長所
       - マージンの最大化がより良いほど汎化能力が向上する。
- 短所
       - 識別境界が直線でしか表現できないため、異なるクラスのデータが混ざり合う処理対象データの場合は線形分離できないので識別能力が落ちる。

# **非線形サポートベクトルマシン**
<手法説明>
元の特徴ベクトル空間を線形分離可能な別の空間に変換してから、線形分離を行うことでデータを識別する。

- 長所
       - マージンの最大化がより良いほど汎化能力が向上する。
       - 識別境界が曲線で表現できるので、異なるクラスのデータが混ざり合う処理対象データの場合にも対応できる。
- 短所
       - パラメータチューニングが必要が必要である。

# 参考文献
[『初めてのパターン認識』 平井 有三](https://www.amazon.co.jp/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E8%AA%8D%E8%AD%98-%E5%B9%B3%E4%BA%95-%E6%9C%89%E4%B8%89/dp/4627849710)

# 終わりに
もっと細かく観たら、各識別手法の長所・短所はもっとあります。計算量など各手法ごとに比較していきたいですね。
手法説明とかできるだけ要点をまとめて記そうとしましたが、自分の語彙力のなさすぎて、、、、。ρ(-ω- )ハァ
より良い記事をかけるように精進していきます。(･ω･ゞ
RubyMineを最新バージョンに更新する際の(超個人的)落とし穴メモ

## 発生事象
旧バージョンのRubymineに日本語翻訳プラグインを入れている場合
最新のRubymineをダウンロードしてそのまま起動しようとすると
Rubymineが起動出来ない。

## 今回自分がチェックした項目
### ① RubyMineの設定ファイルで指定されているJavaのバージョンが間違っていないか 

Javaのバージョンを確認 

```ruby
~ $ java -version
java version "1.8.0_181"
Java(TM) SE Runtime Environment (build 1.8.0_181-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.181-b13, mixed mode)
```  

RubyMineの設定ファイルをvimでチェック

```ruby
~ $ vim /Applications/RubyMine.app/Contents/Info.plist
```

`/Applications/RubyMine.app/Contents/Info.plist` のファイルの `JVMVersionが1.8` だったら上記のJavaのバージョンと一致しているのでOK

```ruby
[中略]

 <key>JVMVersion</key>
 <string>1.8*,1.8+</string>
 <key>MainClass</key>
 <string>com.intellij.idea.Main</string>
 <key>Properties</key>
 <dict>

[中略]
```

### ② どんなエラー出ているのか？ 

RubyMineがインストールされるディレクトリを確認する

```ruby
cd /Applications/Rubymine.app/Contents/MacOS
```

/MacOSディレクトリでターミナルから直にRubymineを起動してみる 

```ruby
./rubymine
```

発生エラーを確認

```ruby
2018-07-23 20:35:53.378 rubymine[2673:36287] allVms required 1.8*,1.8+
2018-07-23 20:35:53.382 rubymine[2673:36297] Value of RUBYMINE_VM_OPTIONS is (null)
2018-07-23 20:35:53.382 rubymine[2673:36297] Processing VMOptions file at /Users/shigeyukifukuda/Library/Preferences/RubyMine2018.1/rubymine.vmoptions
2018-07-23 20:35:53.383 rubymine[2673:36297] Done
Error opening zip file or JAR manifest missing : /Applications/RubyMine.app/Contents/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
Error occurred during initialization of VM
```

注目すべきところは以下の部分

```ruby
Error opening zip file or JAR manifest missing : /Applications/RubyMine.app/Contents/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
```

つまり日本語化するjarがないとのこと。
Rubymineの `rubymine.vmoptions` というファイルの以下の記述がされたままだと
日本語設定ファイルを参照しようとして、無いからエラーになっている模様...

```ruby
-javaagent:/Applications/RubyMine.app/Contents/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
```  

## 解決法
とりあえず、ないと言われているプラグインを入れてあげる
http://mergedoc.osdn.jp/#pleiades.html

```ruby
$ mv /Users/ユーザー名/Downloads/pleiades/plugins/jp.sourceforge.mergedoc.pleiades /Applications/RubyMine.app/Contents/plugins/
```

## 所感
記憶が曖昧なものの、途中で日本語のプラグインをいらないかも・・・と思って削除した状態で、
RubyMineの `VMOptionファイル` はそのままの状態だったため、エラーが起こったのかも(何も記憶にない)
日々いろんな設定を見切り発車でやってしまっているせいで原因の特定に時間がかかってしまいました...
Javaのバージョンを上げてRubyMineのJVMオプションの記述バージョンがそのままだとエラーが発生するという事象も今後発生しそうなので、気をつけて次回エラーが発生した際は手際よく解決出来るようにしたいです。
誰でもわかるMarkDown

#MarkDown記法とは?
MarkDown記法とはMarkUp言語(＊)の一種です。
プレーンテキスト(＊)などの文章を、簡単に装飾するための言語です。
具体的に装飾とは、協調や改行、見出し付けなど行うことができます。

「文章をわかりやすくするための簡単な言語」と覚えておいてください。


___
**＊1「MarkUp言語」**
テキストなどを装飾して構造化するための言語。
一般的に「コンピューターの言語=プログラミング言語」と思われがちだが、実際には、プログラミング言語はコンピューターに関わる数ある言語の中の1つ。
MarkUp言語は、プログラミング言語とは別の言語である。

**＊2「プレーンテキスト」**
テキスト以外の装飾などに関する情報を持っていない、テキスト100％の文章のこと。
一般的に言われるテキストデータとほぼ同意義。
若干、「テキストだけだよ！」というニュアンスが強く感じる。


#MarkDown記法の特徴
利便性が高く便利な方法。
HTMLやCSSなどを用いればMarkDown記法よりはるかに質の高い文章の見た目を作れるが、手軽には使えない。
しかしMarkDown記法は手軽にそこそこの質の文章を作ることができるので、ちょっとした文章の作成に適している。

___

#MarkDown記法の使い方
MarkDown記法は非常にシンプルで使いやすいと説明いたしました。
ここでは簡単に使い方をご紹介いたします。

**・「見出し」=「#」**
 強調は「#」でを文章の先頭に配置。
「#の数」=「見出しのレベル」となる。

**・「下線」=「___」**
下線を引きたい部分に「_×3」。

**・「リスト」=「-,+,*」＋「スペース、タブ」**
リストを作る時には、「-,+,*」と「スペース、タブ」を文章の最初に入力。

**・「強調」＝「*×２」**
強調したい文章を「*×２」で囲む


**「コード挿入」=「'''×3」**
コードを挿入する場合は、コードの上下に「'''×3」を記入
【datetimepicker】カレンダー表示位置が崩れている問題をCSSで解決

##ハマったこと
bootstrapのdatetimepickerを利用してカレンダーを表示できたものの、ブラウザを縦に短くすると上の方(ヘッダー)に表示されてしまい、これが解決できずに1日を無駄にした。。

参考ブログ: https://github.com/NetCommons3/NetCommons3/issues/200

##実現したいこと【デモ】
ブラウザの縦幅が足りなくなると上にいきすぎてしまうので、
以下のGifのように、bottomが足りなくなった時でもカレンダーの位置を調節したい。

![qiita_3.gif](https://qiita-image-store.s3.amazonaws.com/0/242611/a0f38f68-4520-eab6-95ec-1f241ecf3d04.gif)

##試したこと

###bottomを増やして上に表示できないようにする

ブラウザを縦に縮めて行くとbottomが足りなくなり、カレンダーは上側に表示する仕様になっている。
ここで重要なのが、カレンダーよりしたのbottomは、**カレンダー入力フォームの親要素の高さ**によって決まるということ。
ということは、親要素の高さを`height: 〇〇px` のようにして高くすればいい。

これをすることによって、カレンダー以下のbottomが広くなり、そもそも上に表示されることもなく全て下に表示させることができる。
ただ注意点として、当然高さが増えるとスクロール範囲も増えてしまったので別の解決策を考えた。

###親要素にrelativeを適用する
結局これにたどり着いた。
親要素にrelativeを設定し、datetimepickerの移動する範囲を制限してしまう方法だ。

**修正前**

```test.html
<body>
  <div id="container">
    <input type='text' class="datetimechecker">
  </div>
</body>
```

**修正後**

```test.html
<body>
  <div id="container">
    <div id="carendar-position">　 <!--追加 -->
      <input type='text_field' class="form-control">
    </div>
  </div>
</body>
```


```test.css
/* 追加 */
#carendear-positon {
  position: relative;
}
```

これで指定した親要素を起点にカレンダーの位置を制限することができる。
逆にヘッダーのpositionをrelativeにしてしまえばヘッダーを起点にカレンダーが表示されるということ。

今回はinputformを起点にカレンダーを表示させたかったため、すぐ上に親要素を作り、relativeを適用させることでinputformを起点に表示位置を決定することができたわけですね。


##まとめ
一時期、大元であるdatetimepickerのcssをいじっていましたが、ちょっといじると全てが崩れることが多く、複雑すぎて全くわかりませんでした。。。

なので下手にdatetimepickerをいじるより、

①カレンダーを表示させたい場所に親要素を追加
②その親要素にrelativeを設定する

という手順が一番簡単なやり方だと思います。
elastic beanstalkのログをcloud watch logsに飛ばす

# 基本
[ここに基本的なことはまとまってる](https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/AWSHowTo.cloudwatchlogs.html)。
ぽちぽちすればストリーミングできることが分かる。
監視対象が足らないことも分かる。
rubyだとこんな感じ。
<a href="https://gyazo.com/c125754d5192abc17a922a833338c734"><img src="https://i.gyazo.com/c125754d5192abc17a922a833338c734.png" alt="Image from Gyazo" width="877"/></a>
railsのproduction.logとかの面倒は見てくれないのがわかる。

# production.logもストリーミングしたい
fluentdの方法はすぐ出てくるけど、CWLogsでも[S3に吐ける(らしい)](https://dev.classmethod.jp/cloud/aws/export-cloudwatch-logs-to-s3/)し、[kibanaとかにも出せる(らしい)](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/CWL_ES_Stream.html)し、まずはAWSにあるものでやりたいじゃん。

# 参考
本家
https://github.com/awsdocs/elastic-beanstalk-samples/blob/master/configuration-files/aws-provided/instance-configuration/logs-streamtocloudwatch-linux.config

# やりかた

### 1. ファイル作る
[こんなファイル](https://github.com/awsdocs/elastic-beanstalk-samples/blob/master/configuration-files/aws-provided/instance-configuration/logs-streamtocloudwatch-linux.config)を`.ebextensions`ディレクトリの下に作る。

`/etc/awslogs/config/logs.conf` を作ってそうなとこと `commands:` があればOK。

こんなかんじ。

```yaml:.ebextensions/001my-logs-streamtocloudwatch-linux.config
packages:
  yum:
    awslogs: []

files:
  "/etc/awslogs/config/logs.conf" :
    mode: "000600"
    owner: root
    group: root
    content: |
      [/var/log/app.log]
      log_group_name = `{"Fn::Join":["/", ["/aws/elasticbeanstalk", { "Ref":"AWSEBEnvironmentName" }, "var/log/app.log"]]}`
      log_stream_name = {instance_id}
      file = /var/log/app.log

  "/var/log/app.log" :
    mode: "000666"
    owner: root
    group: root
    content: |
      created by .ebextensions

commands:
  "01":
    command: chkconfig awslogs on
  "02":
    command: service awslogs restart
```

ついでに、logファイルも作ってます。`webapp`ユーザーでは`/var/log`にファイル作れないので。
たぶん、`webapp`ユーザーが書き込めるディレクトリを作ってあげるほうが正しいはず。

### 2. 狙った場所にログを吐く
Railsならbroadcastとかで吐くと良いんだと思う。

### 3. デプロイ
`eb deploy`
自分はコミットしてない修正が`eb deploy`に乗っからないことを知らず、時間を溶かしました。悲しい。

### 4. 確認
`/var/log/awslogs.log`に`app.log`をpublishしてそうな痕跡が見れるかと思います。
実際にcloud watch logsで見れたらおｋ。

# 感想
古い記事だと`/var/awslogs/config/...`みたいなファイルを修正してたり、`/etc/awslogs/awslogs.conf`を上書きしてたりするけど、本家のGithubみると、`/etc/awslogs/config/logs.conf`に書くのが正しいみたい。
でも古い記事も当時の正義だったはずなので、この記事もいつまで正義か分からないです。そのうちポチポチで設定して`eb save`で落としてこれる世界が来るはず。はよこい。

というか記事少ないよー
C++ Now and TomorrowでBjarne Stroustrup氏になぜchar8_t型がないのか聞いてきた

# C++ Now and Tomorrow

2018年7月23日、東京大手町のMorgan Stanleyにて[C++ Now and Tomorrow](http://www.morganstanley.co.jp/ja/people/students-graduates/events-programs/2018-bjarne-stroustrup-now-and-tomorrow)が開催されました。

Cities Ckylineをやっていたら家を出るのが遅くなって、16:00開始なのに東京駅に16:37に着きました。そこからOtemachi Financial City South Towerまではすぐについたんですが、受付が大量にあるオフィスビルあるあるに引っかかってさまよいにさまよった挙げ句、会場入りは17:00でした。

入るとBjarne Stroustrup氏が、C++におけるジェネリクスとC++20のconceptの話をしていました。

その後、別の人が金融・株分野での高速な動作の要求される世界の紹介があり、質疑応答、解散、のち個別に質問がありました。

本当は質疑応答でC++のNetworkingと金融の話を聞こうと思ってたんですが時間の関係で私の前の人で打ち切られてしまったのでそれはまあ誰かが聞いてくれるでしょう。

# `char8_t`型とは

~~大学の試験が終わったら追記します~~

別の記事として執筆しました
[C++標準化委員会、ついに文字とは何かを理解する: char8_t](https://qiita.com/yumetodo/items/54e1a8230dbf513ea85b)
`char8_t`型はC++20に入りましたね！

# 問いかけようにも英語力がない

英語は辞書があれば読めるけど、会話とか無理。圧倒的無理。英検2級なんてそんなもん。

まあいくつかキーワードを紙に書いて見せたりしながら質問したんですが。

# 注意

そういうわけで下記内容はちゃんと私が聞き取れていたのか、一切の保証はありません。

# 本題

なぜ`char8_t`型はC++にないのでしょうか？グダグダな問答はもはや言語化不能なので割愛して整理して紹介します。

## `char16_t`/`char32_t`はUTF-16/UTF-32を保証するためのものではない

C++11で`char16_t`/`char32_t`が導入されましたが、これはUTF-16/UTF-32を保証するためのものではなく、16bit、32bitの文字型であることを示すものであると言うのがBjarne Stroustrup氏の主張と思われます。

実際C++規格では`char16_t`/`char32_t`はUTF-16/UTF-32を保証しません。`__STDC_UTF_16__`/`__STDC_UTF_32__`が定義されているときのみUTF-16/UTF-32を保証します。

すると`char8_t`というのは8bitの文字列型と捉えるべきということになり、それってすでに`char`があるじゃんとなってしまう。

## 8bitな文字エンコードはUTF-8だけじゃないよね？

Bjarne Stroustrup氏曰く、日本語にはSJISがあるし、そもそもASCIIあるやん。なんでUTF-8だけ？という感じのことを言っていたように思う。

C++がUTF-8に媚をうっちゃまずいとかそういうことだろうか。

## 文字エンコードの保証はlibraryで

UTF-8を保証する`char8_t`があればC++17で追加されたfilesystem libraryの`u8path`みたいにoverloadできないものを作らなくて済むやん？という感じのことを聞いたところ、そういうのはlibraryで。という回答が。

# 感想

それでもUTF-8を保証する型はほしいので積極的に声を上げ続けて行きたい。

# 余談

`char8_t`ってどう発音すればいいの？なんていう質問をしたら、「ちゃー、エイト、てぃー」と発音してくれた。

# License

[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/deed.ja)

<a href="https://commons.wikimedia.org/wiki/File:CC-BY_icon.svg#/media/File:CC-BY_icon.svg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/CC-BY_icon.svg/1200px-CC-BY_icon.svg.png" alt="CC-BY icon.svg" width="88px"></a>
datetimepickerのdefaultDateが設定できない時の対処法【日付の初期値】

##実現したいこと
datetimepickerで
minDate, maxDate等を指定していると、それらのデータがデフォルトで入力されてしまう。

```datetimepicker.rb

f.text_field :test, value: nil, label: true, id: datetimepicker
```


```datetimepicker.js
$(function() {  
  $("#datetimepicker").datetimepicker({
    minDate: moment().subtract(1, 'months'), 
    maxDate: moment().add(6, "months")
  });
});
```

勝手にデータが入るのも嫌なので**defaultではnilにしたい。**

<img width="348" alt="新しいプランの作成___BitStar（ビットスター）.png" src="https://qiita-image-store.s3.amazonaws.com/0/242611/60eb3e2f-bcca-d266-d20c-8596d23862bb.png">

1日で二回datetimepickerの記事を書いているわけですが、そろそろdetetimepickerが嫌いになりそうなので、二度と同じことが起きないよう、備忘録として残しておきたいと思います。

##初期値を設定するためにdefaultDateを使う
QiitaやTeratail、公式サイトなどを見てみると、どうやら`defaultDate`を使えばいいらしいので以下のように設定してみた。

```datetimepicker.rb

f.text_field :test, value: nil, label: true, id: datetimepicker
```

```datetimepicker.js

$(function() {  
  $("#datetimepicker").datetimepicker({
    minDate: moment().subtract(1, 'months'), 
    maxDate: moment().add(6, "months")
    defaultDate: null
  });
});
```


しかし、入力欄には値が入ったままだ。

公式によると、、、

>if input value is empty, calendar set date use defaultDate


どうやらinputフォームのvalueに何も入っていない場合にだけ適応されるらしい。
というわけでvalueをnilに変更。

```datetimepicker.rb

f.text_field :test, value: nil, label: true, id: datetimepicker
```


が、formの初期値は一向に変わらない。。あるいはカレンダーすら表示されない。。
`defaultDate`が読み込まれていない？と感じたので以下のように実装。


```datetiempicker.js
$(function() { 
  $("#release_datetimepicker").datetimepicker({
    defaultDate: null
  });

  $("#release_datetimepicker").datetimepicker({
    minDate: moment().subtract(1, 'months'), 
    maxDate: moment().add(6, "months"),
  });
});
```

やや冗長かもしれませんが、もう一個同じ操作対象を増やし、本来あったオプションの上に書いたら解決しました。
<img width="312" alt="新しいプランの作成___BitStar（ビットスター）.png" src="https://qiita-image-store.s3.amazonaws.com/0/242611/d35291f8-25b1-94ce-295a-ab841bb73304.png">

<img width="397" alt="qiita_2_gif.png" src="https://qiita-image-store.s3.amazonaws.com/0/242611/12feeeba-ae2a-d74d-7a4f-deedb343cf3f.png">



なお、以下のようにdefaultDateを後に指定すると読み込まれないので注意してください。

```datetiempicker.js
$(function() { 
  $("#release_datetimepicker").datetimepicker({
    minDate: moment().subtract(1, 'months'), 
    maxDate: moment().add(6, "months"),
  });
　　　　$("#release_datetimepicker").datetimepicker({
    defaultDate: null
  });
});
```

##まとめ
こんなことで1日費やしたけどなんとか思い通りにinputフォームの初期値を設定することができました。
datetimepicker、便利な反面よくわからない部分も多いです。。

参考:
  teratail: https://teratail.com/questions/8914
  公式: https://eonasdan.github.io/bootstrap-datetimepicker/
       https://xdsoft.net/jqplugins/datetimepicker/