OmniAICreator/Qiita-1.07M huggingface dataset:
C++ Builder XE4, 10.2 Tokyo > IDE > TPanelとTGroupBoxの交換

```txt:動作環境
C++ Builder XE4
RAD Studio 10.2 Tokyo Update 2 (追記: 2018/01/05)
```

### Case 1: TGroupBoxとTPanel

```Unit1.dfm
object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 300
  ClientWidth = 635
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  PixelsPerInch = 96
  TextHeight = 13
  object GroupBox1: TGroupBox
    Left = 16
    Top = 24
    Width = 185
    Height = 105
    Caption = 'GroupBox1'
    TabOrder = 0
  end
  object Panel1: TPanel
    Left = 232
    Top = 32
    Width = 185
    Height = 41
    Caption = 'Panel1'
    TabOrder = 1
  end
end
```

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/523c37ef-7c12-6cde-a06c-13f1f2c9dec3.png)


### Case 2: TPanelとTGroupBox

```Unit1.dfm
object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 300
  ClientWidth = 635
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  PixelsPerInch = 96
  TextHeight = 13
  object GroupBox1: TPanel
    Left = 16
    Top = 24
    Width = 185
    Height = 105
    Caption = 'GroupBox1'
    TabOrder = 0
  end
  object Panel1: TGroupBox
    Left = 232
    Top = 32
    Width = 185
    Height = 41
    Caption = 'Panel1'
    TabOrder = 1
  end
end
```

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/5dc5c297-dabc-874d-bd9d-445a9644147a.png)

### Case 1からCase 2への変更

.dfmファイル内の「TGroupBox」と「TPanel」を交換した。

TGroupBox上のコンポーネントをTPanelにCtrl+xとCtrl+vで移動するときに「位置ずれ」が生じるのは将来のバージョンで対処して欲しいものです。

TGroupBox上のコンポーネントをTPanelにCtrl+xとCtrl+vで移動するときに「タグ順番」が逆転するのは将来のバージョンで対処して欲しいものです。

### 追記 (2018/01/05)

「位置ずれ」の問題は10.2 Tokyoでも変更なし。
「タグ順番」の問題も10.2 Tokyoでも変更なし。

19.3 Vulkan(嘘)で解決するといいなぁ。
React の SFC に default props を与える方法と実用例

`SFC.defaultProps = {渡したいprops}`　でOK。

```js:default_props.js

const AnySFC = (props) => (
   <div>{props.defaultMessage}</div>
)

AnySFC.defaultProps = {
  defaultMessage: 'デフォルトメッセージ',
};

```

デフォルトで何か style を当てつつ、style を変更したいときは　props から変更できるようにする例。
style のプロパティをスプレッドシンタックスでマージしてます。

```js:default_styled_sfc.jsx
import React from 'react';

const defaultProps = {
    style: { color: 'red' },
};

const DefaultStyledSFC = (props) => (
    <div {...props} style={{ ...defaultProps.style, ...props.style }}>
        {props.children}
    </div>
);
DefaultStyledSFC.defaultProps = defaultProps;

export default DefaultStyledSFC;
```

`<DefaultStyledSFC style={{ color: 'green' }}>`  などで上書き可能。
JUCEを使ってみた(mac)

#JUCEとは？
C++でプラグインを作れるフレームワークです。
Windows、mac、Linuxで開発することが可能で、VST,AUなどビルド可能です。Dawソフトに認識させることができるわけですね。
何と言ってもJUCEの強みは、GUIを簡単に作れることです。
かっこいいGUIが用意されているので、音響処理に集中できるのが素晴らしいですね。
しかも、Exampleがかなり充実していて、一通り環境構築ができれば色々遊べそうな感じです。

[公式サイト](https://www.juce.com/)

公式のGettingStartedはこちら
[Learn more](https://www.juce.com/doc/tutorial_new_projucer_project)

#環境構築
公式サイトからダウンロードしてきます。(現在　version 5.1)
[JUCE-Download](https://www.juce.com/projucer)

VSTプラグインを作るにはSteinbergのSDKをダウンロードしてくる必要があります。
[Steinberg-SDK](https://www.steinberg.net/en/company/developers.html)

#起動からビルドまで
1.Projucerのインストール
ダウンロードしたJUCEフォルダを展開して任意のディレクトリへ移動します。
スタインバーグからダウンロードしたSDKを展開してこちらも任意のディレクトリへ移動します。
Projucer.appをアプリケーションフォルダに移動しとく

2.Projucerの起動
こんな感じの画面が表示されます。
ProjucerはJUCEフレームワークを利用するためのコントロールセンター的なものという理解をしています。
<img width="911" alt="スクリーンショット 2017-10-11 19.10.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/152481/0d26d10c-4b1b-7e16-1438-d78f5a8156f0.png">

無事に起動したら、「AudioPlug-in」を選択します。

3.VSTSDKのパスを通す。
次に先ほどダウンロードしたsteinbergのSDKのパスをprojucerに教えてあげる必要があるみたいです。
Projucer>Global Search Pathを選んで
<img width="629" alt="スクリーンショット 2017-10-11 18.48.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/152481/0167421a-e35d-acf7-53cc-4075f6ad28c9.png">

SDKsのVST3 SDKの項目をダウンロードしたSteinbergのSDKのpathを参照してあげます。
※画像では"/User/XXX/JUCE/VST_SDK"となっていますが、正しくは"/User/XXX/JUCE/VST_SDK/VST3_SDK"としないとビルドでエラーが出ます。

<img width="598" alt="スクリーンショット 2017-10-11 18.48.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/152481/fe82342d-341a-8364-04f0-6c8ea7c2b72e.png">
4.詳細設定
ProjectNameやCompany NameなどBuildセッティングができます。
後からでも編集可能そうなのでとりあえず、ProjectNameを決めて、build VSTとbuild Audio UnitのEnabledにチェックしておきました。

5.Xcodeを開く
Xcodeのアイコンがあるのでポチッと押すとXcodeが開く。
<img width="897" alt="スクリーンショット 2017-10-11 18.49.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/152481/bf8a14b4-47e7-1ff7-d841-258bbf643b17.png">


6.Buildしてみる。
特にスクリプトを編集せずにXcodeのビルドボタンでビルドしてみます。

無事にビルドが成功すれば、任意のファイルパスにVSTとAudioUnit,StandAloneのアプリケーションが出力されています。

7.StandAloneを起動してみる
"xxx.app"をクリックすると、、、こんな感じでアプリケーションが起動しました。
<img width="399" alt="スクリーンショット 2017-10-11 19.37.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/152481/f900c7ba-11ee-73f4-fe9a-700d6bccd4a9.png">
また"xxx.vst"をお手持ちのDAWのVSTに読み取らせれば無事に使えると思います。
iPhoneでページ内リンクからブラウザバックした後にalertが動かない現象

`onload`とかそういう話じゃなくて、単純に`onclick`に設定した`alert`が動かない。
ページ内リンクから戻った場合だけで、他のHTMLに移動して戻った場合は動く模様。
`alert`の後に書いたJavaScriptは動いている模様。


簡単な再現ページを書いた。
https://n314.com/iphone-back-alert-bug.html
ソース見たら分かる通り、めっちゃ単純な構造なんだけど…。



これって常識？
Zabbixで、コマンドの結果を、監視したいとき

# 概要

特定のディレクトリにあるファイルの数など、簡単なコマンドの結果を監視したいときに、zabbixでどうしたらよいか調べた

# まとめ

キーに

```
system.run[コマンド]
```

を、設定して、あとは、値の種類を書くということができることがわかった

## 調べたサイト

* [ファイル数/ディレクトリ数の監視 - Knowlege Database](http://extstrg.asabiya.net/pukiwiki/index.php?%A5%D5%A5%A1%A5%A4%A5%EB%BF%F4%2F%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8%A5%EA%BF%F4%A4%CE%B4%C6%BB%EB)
* [1 Zabbixエージェント [Zabbix Documentation 2.2]](https://www.zabbix.com/documentation/2.2/jp/manual/config/items/itemtypes/zabbix_agent)
PHP開発中の curl: (60) Peer certificate cannot be authenticated with known CA certificates 対応方法

Laravelを使用してYahoo! JAPAN IDログイン機能を実装中、サーバーからYahooのWebAPIにHTTPSリクエストを送った際 curl: (60) Peer certificate cannot be authenticated with known CA certificates のエラーが出た。

私の環境ではcurlにCA証明書を使うように設定することでうまくいったのでメモ。
CentOS6 + Apache2.2 + PHP5.6 と古い環境ですが。

・まずCA証明書取得
```sudo -i
cd /etc/httpd/conf.d
mkdir pem
cd pem
wget http://curl.haxx.se/ca/cacert.pem
```

・次に/etc/php.ini の[curl]のところに以下のように設定
```[curl]
; A default value for the CURLOPT_CAINFO option. This is required to be an
; absolute path.
curl.cainfo ="/etc/httpd/conf.d/pem/cacert.pem"
```

・最後にApacheの再起動
```service httpd restart
```
git 自動メール送信

### ファイル更新等あったら自動でメールが送信される
※ssmtpインストール済み

/var/www/repos/git/siteam.0.git/hooks
[root@localhost hooks]# ls -lah
合計 56K
drwxr-xr-x. 2 apache apache 4.0K 10月 11 18:16 .
drwxr-xr-x. 7 apache apache 4.0K 10月 10 18:50 ..
-rwxr-xr-x. 1 apache apache  452 10月 10 18:50 applypatch-msg.sample
-rwxr-xr-x. 1 apache apache  896 10月 10 18:50 commit-msg.sample
-rwxr-xr-x. 1 apache apache  211 10月 11 18:07 post-receive
-rwxr-xr-x. 1 apache apache  189 10月 10 18:50 post-update.sample
-rwxr-xr-x. 1 apache apache  398 10月 10 18:50 pre-applypatch.sample
-rwxr-xr-x. 1 apache apache 1.7K 10月 10 18:50 pre-commit.sample
-rw-r--r--. 1 apache apache 1.4K 10月 10 18:50 pre-push.sample
-rwxr-xr-x. 1 apache apache 4.9K 10月 10 18:50 pre-rebase.sample
-rwxr-xr-x. 1 apache apache 1.3K 10月 10 18:50 prepare-commit-msg.sample
-rwxr-xr-x. 1 apache apache 3.6K 10月 10 18:50 update.sample
-rwxr-xr-x. 1 root   root     76 10月 11 16:51 while_a.sh

「.sample」がついているものは動作しない
使用したい場合は、「.sample」を取ってあげる

###今回は、「post-receive」を作成
------------------------------------------------------------
!/bin/sh

while read oldrev newrev refname; do
        echo -ne "To: test@google.com\nSubject: TestSend1\n\nhttp://172.16.0.10/projects/siteam/repository/revisions/${newrev}" | ssmtp test@google.com
done

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

### メール本文に張り付けたURLを開くと開けない
[git][redmine] pushした際にRedmine側の「リポジトリ」の情報も更新する必要がある


例
#!/bin/sh

while read oldrev newrev refname; do

CURL="/usr/bin/curl -s"
REDMINE_URL_BASE="https://redmine.your.server/"
REDMINE_REPOS_API_KEY=your_api_key
REDMINE_PROJECT_ID=your_project_id
 
echo "updating redmine..."
RESPONSE=$($CURL "${REDMINE_URL_BASE}sys/fetch_changesets?key=${REDMINE_REPOS_API_KEY}&id=${REDMINE_PROJECT_ID}")
echo $RESPONSE

echo -ne "To: test@google.com\nSubject: TestSend1\n\nhttp://172.16.0.10/projects/siteam/repository/revisions/${newrev}" | ssmtp test@google.com
done


-------------------------------------------------
[root@localhost hooks]# cat post-receive
#!/bin/sh

while read oldrev newrev refname; do

CURL="/usr/bin/curl -s"
REDMINE_URL_BASE="http://172.16.0.10/"
REDMINE_REPOS_API_KEY=vClVtIUm8Nc69ybpVCpb
REDMINE_PROJECT_ID=siteam

echo "updating redmine..."
RESPONSE=$($CURL "${REDMINE_URL_BASE}sys/fetch_changesets?key=${REDMINE_REPOS_API_KEY}&id=${REDMINE_PROJECT_ID}")
echo $RESPONSE

#以下のフォルダに移動
cd /home/work/git/siteam.0;

#pushした最新ファイルをpullで引っ張てくる
git pull;

#strにファイル名を入れる
str=`git diff --name-only ${oldrev} ${newrev}`;

#メール送信
        echo -ne "From: dummyjacom@google.com\nTo: yamagami@glodia.jp\nSubject: ${refname} SI更新\n\nhttp://172.16.0.10/projects/siteam/repository/revisions/${newrev}\n\n${str}" | ssmtp yamagami@glodia.jp
done
-99~99の正規表現　正の数負の数

-99~99の正規表現

phpのpreg_match()で実行

-0を含まないようにしている。

例1.

```ruby:qiita.rb
/^(-[1-9][0-9]|0)$|^([1-9][0-9])$/
```

例2.

```ruby:qiita.rb
/^(0|-?[1-9]0|-?([1-9]?[1-9]))$/
```

間違ってたらご指摘ください。

正規表現をチェックするツール
http://okumocchi.jp/php/re.php
Xcodeの過去バージョンをダウンロード・ビルドするまで

# きっかけ
過去のSwiftバージョンでリリースをする必要があったため。

# 方法
1. https://developer.apple.com/download/more/ にアクセス。  
2. 検索窓にてxcodeで検索し、プラスボタンからxipをDL。  
![FireShot Capture 1 -  - https___developer.apple.com_download_more_#.png](https://qiita-image-store.s3.amazonaws.com/0/136954/c521344f-b6b2-71c1-ccef-033ecb6811f7.png)
3. xipを展開。  
4. Xcode > Preference > Locations のCommand Line Toolsを過去バージョンに修正
![スクリーンショット 2017-10-11 17.35.03（2）.png](https://qiita-image-store.s3.amazonaws.com/0/136954/3a81ff75-eff4-253b-84a7-6206128eb96c.png)
5. gitなどで過去バージョンのソースコードを取得。  

___  

❇︎ ここからはCarthageを導入しているプロジェクトのみ
6. Cartfile.resolvedにて、frameworkのバージョン指定をこれからビルドするSwiftバージョンに対応したバージョンへ変更する。
7. `carthage bootstrap --platform iOS`をコマンドラインから実行。

___
❇︎ ここからはCocoaPodsを導入しているプロジェクトのみ
8. Podfile.lockにて、frameworkのバージョン指定をこれからビルドするSwiftバージョンに対応したバージョンへ変更する。
9. `pod install`をコマンドラインから実行。

___

あとはclean → run
CSSだけで作る3D表現入門

JavaScript も Canvas も使わず CCS の `transform` を主に使って3D表現する方法のメモ。

# サンプル

<p class="codepen" data-height="600" data-theme-id="5973" data-default-tab="result" data-user="KazuyoshiGoto" data-slug-hash="YGQrOd" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="CSS3D基本">
  <span>See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/YGQrOd/">
  CSS3D基本</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# CSSの3D表現に必要なプロパティ
- perspective
- transform-style
- transform

以上３点です。

## perspective

```css
perspective: 1000px;
```

3D表現するオブジェクト全体を俯瞰する親要素へかけます。
サンプルでは `body` にかけています。

これ単体では表示に何も影響ありませんが、後述の `transform` で奥行きを出すためのプロパティです。

個人的には「**中心点からカメラを引く距離**」と考えています。
100pxなどあまり値が小さいと魚眼レンズのように歪んでいるように見えます。とりあえず1000pxなど大きめの値を設定し、歪むようなら広げる調整をすると良いです。

## transform-style

```css
transform-style: preserve-3d;
```

3D化したいオブジェクトの大枠要素へかけます。
サンプルでは `.content` にかけています。

これは単なるお約束の3D宣言です。
これが無いと `perspective` や `transform` をかけても立体感が付きません。

## transform

```css
transform:
  rotateX(*deg)
  rotateY(*deg)
  rotateZ(*deg);
```

3D化するオブジェクトの向きを操作します。
サンプルでは水色のZ軸を表す `.z` と土台を見せるための `.ground` にかけています。
またアニメーションにも利用しています。

`rotate` は3D専用のプロパティというわけでないですが、`rotateZ` など**Z軸の操作**が加わることで三次元化されます。

**3D表現のキモはこのZ軸を意識したオブジェクト操作です。**


さらに以下のように `translate` でオブジェクトの移動を加えると `div` などのレイヤーをポリゴンのように扱えます。

```css
transform:
  rotateX(*deg)
  rotateY(*deg)
  rotateZ(*deg)
  translateX(*px)
  translateY(*px)
  translateZ(*px);
```

<p class="codepen" data-height="500" data-theme-id="5973" data-default-tab="html,result" data-user="KazuyoshiGoto" data-slug-hash="PGjmdp" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Cube">
  <span>See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/PGjmdp/">
  Cube</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 欠点

- （まだ）重い
- 単純な3D表現しかできない

あくまで四角の面を3D配置できるだけなので、本格的な3Dグラフィックを表現するものではありません。本格的に3Dをやるなら Three.js などのライブラリを使った方が良いです。

Web表現のアクセントの選択肢としてどうぞ。
Processing でキーの同時押し

# 方法

keyPressed 関数 / keyReleased 関数でキーごとに押されたか、離されたかを判定します。

```java
// それぞれのキーの入力状態を格納
boolean left, right, up, down;

void keyPressed() {
  if (keyCode == LEFT)  left  = true;
  if (keyCode == RIGHT) right = true;
  if (keyCode == UP)    up    = true;
  if (keyCode == DOWN)  down  = true;
}

void keyReleased() {
  if (keyCode == LEFT)  left  = false;
  if (keyCode == RIGHT) right = false;
  if (keyCode == UP)    up    = false;
  if (keyCode == DOWN)  down  = false;
}
```

使い方:

```java
void draw() {
  if (left) {
    /* 左キーが押されているときの処理 */
  }
  if (right) {
    /* 右キーが押されているときの処理 */
  }
  if (down) {
    /* 下キーが押されているときの処理 */
  }
  if (up) {
    /* 上キーが押されているときの処理 */
  }
  if (up && down) {
    /* 上キーと下キーが同時に押されているときの処理 */
  }
}
```

下記のように KeyState クラスを作成して管理するとより綺麗です。

```java:KeyState.pde
public static class KeyState {
  private static final HashMap<Integer, Boolean> states = new HashMap<Integer, Boolean>();

  private KeyState() {}

  static void initialize() {
    states.put(LEFT,  false);
    states.put(RIGHT, false);
    states.put(UP,    false);
    states.put(DOWN,  false);
  }

  public static boolean get(int code) {
    return states.get(code);
  }

  public static void put(int code, boolean state) {
    states.put(code, state);
  }
}

void keyPressed() {
  KeyState.put(keyCode, true);
}

void keyReleased() {
  KeyState.put(keyCode, false);
}
```

使い方:

```java:main.pde
void setup() {
  /* ... */
  KeyState.initialize();
}

void draw() {
  if (KeyState.get(LEFT)) {
    /* 左キーが押されているときの処理 */
  }
  if (KeyState.get(RIGHT)) {
    /* 右キーが押されているときの処理 */
  }
  if (KeyState.get(UP)) {
    /* 上キーが押されているときの処理 */
  }
  if (KeyState.get(DOWN)) {
    /* 下キーが押されているときの処理 */
  }
  if (KeyState.get(UP) && KeyState.get(DOWN)) {
    /* 上キーと下キーが同時に押されているときの処理 */
  }
}
```

# おわりに
方向キーは **keyCode（int 型）**ですが、Tab や Enter は **key（char 型）**に格納されるのでもう一工夫要ります。
windows10でドライバを作成する

# ドライバ開発に必要なもの
 - windows10
 - Visual Studio Community 2015 ( 2017だとWDKが対応していない )
 - Window SDK for Windows 10, version 1703
 - WDK for Windows 10, version 1703

以下からDL可能
https://developer.microsoft.com/en-us/windows/hardware/windows-driver-kit

## インストール時に参考にさせていただいたサイト
[ Windows 10 でサンプル ドライバーをビルドするまで ]( https://blogs.msdn.microsoft.com/jpwdkblog/2015/08/21/windows-10/)

## サンプルドライバ
https://github.com/Microsoft/Windows-driver-samples
zipでDLするなど。


# 注意事項
 - SDKのバージョンとWDKのバージョンは同じものを使わないとだめ。
 - EVコードサイニング証明書がないと現在のwindows10ではドライバ実行時にブロックされる

# EVコードサイニング証明書
global signのサイトを見るのがわかりやすい
https://jp.globalsign.com/service/codesign/ev_authenticode.html

年間75000円とか払って、EV証明書とって、さらにMicrosoftに作成したドライバを提出して、チェックしてもらう必要がある。チェックが完了すると認証されたドライバが帰ってくる。
そうするとブロックされることなくドライバが実行できる。

# EVコードサイニング証明書なしでドライバ実行する方法
以下を参考にさせていただいた。
[ Windows10で署名なしドライバをインストールする方法／テストモードにする方法 ]
( https://freesoft.tvbok.com/win10/testmode.html )
[ Windows10 Creators UpdateでSmartScreenを無効にする方法 ]
( https://freesoft.tvbok.com/win10/operation/disabled_smartscreen.html )
[ Windows 10でUEFI (BIOS) 画面を起動する手順 ]
( https://freesoft.tvbok.com/win10/access_uefi_bios_setup.html )
supervisord下で動かしているデーモンに任意のシグナルを送る

超ウルトラ小ネタ。

supervisord下で動かしているデーモンに任意のシグナルを送りたい場合は、以下を実行すれば、pidを調べる必要がありません。

```bash
$ supervisorctl signal <シグナル名> <プログラム名>
```

rails(puma)を一々 stop/startすると時間がかかってしょうがないので、 rolling restartさせるために`USR1`シグナルを送りたい場合は

```bash
$ supervisorctl signal USR1 rails
```

でOKです。
最速静的Webデプロイ

## 先に言うとNetlify最強。

静的コンテンツをホストしてHTTPSで表示させたい。
S3 + CloudFront でできるのだが、ちょっと手間かなと思ってた。

## 参考

AWS得意な人がS3よりNetlifyをオススメしててすごい参考になった。
- [HTTPSの静的コンテンツをホストするならs3よりNetlifyが俺の求めていたものだった](https://qiita.com/shogomuranushi/items/6ab5bc29923b3f82c9ed)

## やってみる

1. ドメイン取得 → 名前.comで取得

2. Netlifyでアカウント作成（要 GitHubアカウント）
2-1. GitHubアカウントつなぎこんで、公開したいサイトに対応するリポジトリを選ぶ。
2-2. 公開ブランチとディレクトリを選び、ビルドコマンドを入力する（デフォルトでgulpコマンドが入力されてた）
2-3. `Netlify DNS 使用する`ボタンポチッとしてアドレスもらう。
2-4. お名前.com で DNSの nameserver アドレスを登録
2-5. HTTPS対応させる `Enable automatic TLS` ボタン2回押すだけ。 
<br>
3. Slackにビルドの情報を通知する
3-1. Slackに専用チャンネル作る → Webhoockのアドレス取得
3-2. Netlify の Deploy notifications にすでに Slackへの通知が選べるプルダウンがあるので、登録
<br>
4. 完了
4-1. 公開ブランチにプッシュ。→自動デプロイ。初回のみ npm install が走る。
4-2. Slack に start と succeeds の通知がくる。


---
↑ あとで綺麗にまとめたい。。。


## サクッとできた。

ドメインがあって、GitHubアカウントがあるのであれば。
全部で小一時間で公開できる。

タスクランナーなしで、吐き出したソースを登録するでも良い。

そしてここまでNetlifyは全部無料。すごい…。

https://www.netlify.com/pricing/

- Unlimited sites
- Personal or professional projects
- Public or private code
- HTTPS for custom domains

Pro の機能で欲しいのは、アクセス権限くらい。
一人デプロイまで持っていくのには最速だと思った。


## リダイレクト
追記： http → https にリダイレクトするのを忘れてた…。

https://www.netlify.com/docs/redirects/
リダイレクトも、`_redirects`っていうファイル作って書くだけ。
apatch でできる Redirect/Rewrite が大体設定可能。ほんとすごい。

301でサイト全部リダイレクトする。

```
http://sitename.com/*  https://sitename.com/:splat  301!
```
gulpでルートにファイル吐き出すように追加して完了。
WindowsローカルのPHPでSSL有効化

SSLを有効化したつもりになっていたので、設定の備忘録です。

## やりたいこと
Windowsのローカル環境でLaravel5.5を起動する


## 環境
* Windows10
* Apache/2.4.27 (Win64)
* PHP 7.1.10 (cli) (built: Sep 26 2017 20:04:32) ( ZTS MSVC14 (Visual C++ 2015) x64 )
* Laravel Framework 5.5.14

## 問題
laravelを起動後、`http://localhost/`にアクセスしてみると
`PHP Warning:  PHP Startup: Unable to load dynamic library 'C:/php71/ext\\php_openssl.dll`
と出ているので、`php.ini`でextensionが有効化されていることを確認。

```ini:php.ini
extension=php_openssl.dll
```

よく書かれている、extension_dirも確認。

```ini:php.ini
; On windows:
extension_dir = "C:/php71/ext"
```
この状態でApacheを再起動するも、Aapcheの`error.log`を見ると、

```
PHP Warning:  PHP Startup: Unable to load dynamic library 'C:/php71/ext\\php_openssl.dll' - \xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xcc\x83I\xef\xbf\xbdy\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd[\xef\xbf\xbde\xef\xbf\xbdB\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdO \xef\xbf\xbdV\xef\xbf\xbdX\xef\xbf\xbde\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xc5\x82\xef\xbf\xbd %1 \xef\xbf\xbd\xcd\x8e\xef\xbf\xbd\xef\xbf\xbds\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xdc\x82\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdB\r\n in Unknown on line 0
```
デコードしてみたが文字化けてしまったので、メッセージの解析は挫折…

## やったこと
OpenSSLの使い方を調べてみました。
PHPのフォルダ直下にある、`ssleay32.dll`と`libeay32.dll`をパスの通ってるディレクトリに置かないと行けないらしく、
今回は`C:\Windows\System32`にコピー。

Apacheを再起動するとエラーが出ず、表示されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/133646/3b67ea1e-ca92-77c6-a7a4-216213ff8542.png)
elasticbeanstalk 設定の優先順位　削除

# 設定の優先順位
http://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/command-options.html#configuration-options-precedence

# .ebextensionsの値を有効にするには
## 設定オプションの場合
一度設定をnullにする

ここを参照
http://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/environment-configuration-methods-after.html#configuration-options-remove-ebcli

## 環境プロパティの場合
`eb setenv XXX= YYY=`
でXXXとYYYはリセットされる

http://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/eb3-setenv.html
Dockerfileの中でgithubのprivate repositoryをgit cloneする

メモです

```
ARG TEMP_SSH_KEY_DIR=/root/.ssh
ARG TEMP_SSH_KEY=/root/.ssh/id_rsa

RUN apt-get install -y ssh
RUN mkdir ${TEMP_SSH_KEY_DIR}
COPY id_rsa_github_repo ${TEMP_SSH_KEY}

RUN chmod 600 ${TEMP_SSH_KEY} && \
    ssh -o StrictHostKeyChecking=no -T git@github.com || true && \
    cd /path/to/your/workspace && \
    git clone git@github.com:username/hoge.git

RUN rm -r ${TEMP_SSH_KEY_DIR}
```
Sentry で 4xx 系のエラーを送信しない

[Sentry.Plug](https://hexdocs.pm/sentry/Sentry.Plug.html) は [Plug.ErrorHandler](https://hexdocs.pm/plug/Plug.ErrorHandler.html) のコールバックで実装されているので、`use Sentry.Plug` する前に無視したいエラーにマッチする `handle_errors/2` を定義してやればできる。

```elixir:lib/myapp_web/router.ex
use Plug.ErrorHandler

defp handle_errors(_conn, %{reason: %{plug_status: status}})
  when is_integer(status) and status >= 400 and status < 500 do
  nil
end

use Sentry.Plug
```
Azure 、ロードバランサー配下のウェブサーバーへのアクセスログ取得

#概要
ウェブサーバーのアクセスログ、特に、ロードバランサーをウェブサーバー前に配置した場合のアクセスログの収集方法は、利用するロードバランサーによって変わります。
#Azure のロードバランサー
Azure には、以下の2つのロードバランサーが提供されています。

- Azure Load Balancer (L4)
- Application Gateway (L7)

各ロードバランサーのレイヤーについては上記の通り。Azure Load Balancer は、無料でロードバランサーのパフォーマンスを気にしないで使える素晴らしいサービス。Application Gateway は、有料だけど、WAFも追加できる高機能なサービス。
# Azure Load Balancer 配下のウェブサーバーのアクセスログ
Azure Load Balancer の場合、ウェブサーバーに記録されるのは、アクセス元のIPアドレス等。普通はアクセスしたウェブブラウザのIPアドレス。特に、ロードバランサーの存在を気にする必要はないです。
# Application Gateway 配下のウェブサーバーのアクセスログ
ウェブサーバーに記録されるのは、Application Gateway のIPアドレス。よって、ウェブサーバーでアクセスログを収集しても、アクセス元情報は分かりません。
その場合、Application Gateway のアクセスログを収集することで、アクセス元IPアドレスがわかります。
デフォルトでは、ログの収集は設定されていないので、Azure ポータルで、Application Gateway
 の設定で「診断ログ」を設定します。
Google DriveのフォルダID命名規則（勝手に見つけた法則）

## はじめに
Google Drive APIを使ってプログラム内からフォルダ作成＆保存など色々やっているのですが、
作成するフォルダIDは完全なランダムでなく、規則があることが分かってきました。
日本語の情報が見つからなかったので、僕が実験した限りの規則をまとめます。

:warning: Googleのドキュメントで見つけた情報ではないので、非公式です！
間違いあるかも知れませんし、仕様は突然変わるかもしれないので、ご了承ください。

## フォルダIDの桁数
「マイドライブ」では**28桁**の英数字, ハイフン, アンダーバーの組合せです。
個人用のGmailアカウントでもGsuiteアカウントでも同じでした。
https://drive.google.com/drive/folders/123456789ABCDEF0123456789ABC

「チームドライブ（G suite専用）」の場合は少し長くなり**33桁**でした。
https://drive.google.com/drive/folders/123456789ABCDEF0123456789ABCDEFGH

## フォルダIDの先頭文字
「マイドライブ」に作成するフォルダは、個人用のGmailアカウントでもGsuiteでも、
**先頭2文字は必ず0B**になります。
https://drive.google.com/drive/folders/0Babcdefghijklmnopqrstuvwxyz


## フォルダ作成者のID
「マイドライブ」に作成するフォルダは、個人用のGmailアカウントでもGsuiteでも、
**0Bを含む先頭13桁はフォルダ作成者によって固定値**になります。
**後半15桁がランダム**のようです。

例えば、ある人が作ったフォルダは必ず`0Babc_def_ghi`で始まる、といった具合。
https://drive.google.com/drive/folders/0Babc_def_ghiABChogefugapiyo
https://drive.google.com/drive/folders/0Babc_def_ghiXYZfugapiyohoge
https://drive.google.com/drive/folders/0Babc_def_ghiOOOpiyohogefuga

## おわりに
何の役に立つんだ！って思われるかも知れませんが、
アクセス権限をいろいろ切り替えながらテストするときなど、
フォルダIDの命名規則が分かってるとスムーズだったりするのですよ。

今の所判明している法則はこんくらいですが、
スプレッドシートのファイルIDとか、他にも法則はありそうな予感してます。
また見つけ次第追記していきますね！

ではまた〜。
ES6、webpack、ESLintまとめ【js開発環境】

JavaScriptの開発環境を構築するにあたり、以下の必須項目についての概要をまとめてみた。
# 必須要素
- ES6
- webpack
- ESLint

# 各要素の概要

## ES6

正式名称はECMAScript2015（ES2015）。通称ECMAScript6（ES6）。
ECMA Internationalによって標準化されたJavaScriptであり、これまでJavaScriptでは不便であったオブジェクト指向プログラミングが、直感的に行えるようになった。

### ES6で新たに提供された主な仕様

- class命名の導入で、Java/C#ライクなクラス定義が可能に
- import/export命令によるコードのモジュール化をサポート
- 関数構文の改善（アロー関数、引数のデフォルト値、可変長変数など）
- let/const命令による値の列挙
- イテレーター/ジェネレーターにより列挙可能なオブジェクトの操作が可能に
- 組み込みオブジェクトの拡充（Promise、Map/Set、Proxyなど）
- String/Number/Arrayなど、既存の組み込みオブジェクトも機能を拡張

ただし、すべてのブラウザーが対応しているわけではないので、Babelのようなトランスコンパイラーが不可欠。

## webpack

ウェブコンテンツを構成するファイルをまとめるツール。モジュールバンドラ。

- モジュールバンドラ  
	複数のモジュールを1つにまとめたファイルを出力するツール。代表的なものとして、Browserify、RequireJS、webpackがある。

複数のJavaScriptファイルをまとめることで様々な利点がある。
1. 機能ごとにファイルを分割できる（作業の効率化）
2. 外部モジュールを利用できる
3. リクエスト数を減らすことが出来る  
	HTTP/1.1接続ではブラウザとウェブサーバーの同時接続数が限られるため、１つのファイルにまとめることで転送時間を短縮できる
4. 依存関係を解決したファイルを出力できる

JavaScriptの他にも、CSSや画像もバンドルできたり、ローカルサーバーの起動まで包括的な制作環境としての機能まである。

## ESLint

JavaScriptのための静的検証ツール。コード一貫性の保持やバグの発見などをおこなう。同様のツールにJSLint、JSHint、JSCSなどがある。
### 特徴

- すべての検証ルールを自由にon/offできる
- カスタムルールを作ることができる
- 豊富なビルトインルールに加えて、多数のプラグインが公開されている
- ES6、ES7、JSXを標準サポート
- Babel と連携することで、仕様策定中の新しい構文や Flow 型注釈にも対応できる
- 迅速に開始できるように、推奨ルールだけでなくサードパーティの設定利用が可能
- Sublime、Vim、JetBrainsの製品およびVisual Studio Codeなどの、複数のエディタやIDEとの統合が可能
リモートで使用している jupyter notebook が作動しない


#考えられる原因
1.リモートで使うための設定ができていない
2.初回ログインでトークンのパスが通っていない
3.（複数の人間で同じサーバにアクセスする場合）ポート番号がコンフリクトしている
4.その他

##1.リモートで使うための設定
ここが大元。
https://jupyter-notebook.readthedocs.io/en/stable/public_server.html

要点をまとめると、
1.`jupyter notebook --generate-config` をターミナルに打ち込んでconfigを生成。
2.`pip install ipython` でipythonのインストール。
3.以下のコードをターミナルで実行し、sha鍵の生成。
`ipython
In [1]: from IPython.lib import passwd
In [2]: passwd()`
4.その鍵を使用し、必要部分を編集
`c.NotebookApp.ip = '*'
c.NotebookApp.open_browser = False
c.NotebookApp.port = 8888
c.NotebookApp.password = u'sha1:XXXXXXXXX' #先に生成したsha鍵を記述
c.NotebookApp.extra_template_paths = [os.path.join(jupyter_data_dir(), 'templates') ]
c.NotebookApp.server_extensions = ['nbextensions']`

##2.初回ログインでトークンのパスが通っていない
`jupyter notebook`
とターミナルに打ち込み、起動した際に表示される、
`Copy/paste this URL into your browser when you connect for the first time,
    to login with a token:`
以下に書かれているトークンを
<img width="747" alt="スクリーンショット 2017-10-11 15.12.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/113089/55ffdbd1-9ddd-4127-bbd2-9543394b7add.png">
の窓枠の中に打ち込めばOKです。

##3.ポート番号がコンフリクトしている
これは、jupyter notebookの設定以前の問題なのですが、複数人で同時に作業する場合、ポートの番号がコンフリクトを起こすと作業できません。各自、別々のポート番号でログインしていることも念のため確認しましょう。（基本的には、ポート番号がかぶることはないはずですが。。。）

##4.その他
ちなみに、参照先を貼るにとどめますが、jupyter labのインストールによって動作しなくなる場合もあるようです。
https://github.com/jupyterlab/jupyterlab/issues/312

#参照
qiita Jupyterを導入しよう -リモート編-　https://qiita.com/Miggy/items/5466a2c1e968602f3ebe
jupyter notebookドキュメント　https://jupyter-notebook.readthedocs.io/en/stable/public_server.html
github Once jupyterlab is installed in one conda environment, it can prevent notebooks from opening in clean env #312 https://github.com/jupyterlab/jupyterlab/issues/312
Rails + MongoDBのメモ

#はじめに

直近のプロジェクトでGoogleCloudStorageで検証を進めていたのですが、
一部インフラ要件が出てきたので、他のNoSQLのデータベースを使って実装を試すことにしました。
今回はRails + MongoDBを使って
インストールから簡単なアプリケーションを構築するところまで覚え書きとして残します。

#MongoDBをUbuntuにインストールする

##インストールする

```
$cat /etc/lsb-release
>DISTRIB_ID=Ubuntu
>DISTRIB_RELEASE=14.04

$ sudo apt-get install ntp
$ sudo apt-get install mongodb
$ mongo -version
>MongoDB shell version: 2.4.9
```

##portを解放する

```
sudo ufw status
sudo ufw allow 27017 <-Mongodbで使う
sudo ufw allow 27018 <-Mongodbのwebconsoleで使う
sudo ufw allow 28017 <-Mongodbのwebconsoleで使う
//許可ポート以外閉じる
sudo ufw default deny
```

##MongoDBの外部IPを許可する

```
$ vim /etc/mongodb.conf

//コメントアウトする
#bind_ip = 127.0.0.1
#port = 27017
bind_ip = All

//Webインターフェースを有効化
# Disable the HTTP interface (Defaults to localhost:27018).
#nohttpinterface = true
nohttpinterface = false
```

##dbの起動
```
$ sudo service mongodb start
or
$ sudo service mongodb restart
```

##webコンソールに接続する
```
http://[IP]:28017
```

#Railsの環境構築
##railsテンプレートの作成

```
$ rails -v
>Rails 5.1.4

$ mkdir rails-mongo-demo
$ cd rails-mongo-demo/
$ rails new rails-mongo-demo --skip-active-record
$ cd rails-mongo-demo/
```

##GemFileに追記
```
gem 'mongoid'
```

##bundle install
```
bundle install
```
##configを作成

```
$ bundle exec rails g mongoid:config


mongoid.ymlにhostsを設定する>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
development:
  clients:
    default:
      hosts:
        - 192.168.0.1:27017
```

##scaffoldでCatを作成
```
$ bundle exec rails generate scaffold Cat name:string age:integer
```

##一時的にCSRFを設定する
```
class ApplicationController < ActionController::Base
  #protect_from_forgery with: :exception
  protect_from_forgery with: :null_session
end
または
class CatsController < ApplicationController
  protect_from_forgery :except => [:create]
```

##postしてみる
```
curl -d 'cat[name]=abcdefg&cat[age]=11' http://localhost:3000/cats
```


```
---------------------------------------------
#mongoに接続

$ mongo

> show dbs
rails_mongo_demo_development  0.203125GB

> use rails_mongo_demo_development
> show collections
cats

//インデックス
db.rails_mongo_demo_development.getIndexes();

//全部削除
db.cats.remove();

//データ取得 find_all的な
db.cats.find()

//データ取得 find_by的な
db.cats.find({"name":"Reon"})
---------------------------------------------
```
日付に関するクラスについてのメモ（ドットインストールのカレンダー作成より）

#日付に関するクラスがわからない
ドットインストールでPHPでカレンダーを作成する講座を受講していたら見知らぬクラスが出てきたので、調査を行った

#DatePeriodクラス
引数
・開始日（指定した日付を含む）
・形式
・終了日（指定した日付を含まない）

#DateIntervalクラス
形式を指定

http://php.net/manual/ja/dateinterval.construct.php
を参照

#DateTimeクラス
日付と時刻をあらわす
様々な書式に対応しているようです
http://php.net/manual/ja/datetime.formats.php
を参照
[Haskell] Arrowに触れてみた(FizzBuzz)

最近、すこしずつ圏論の勉強と、Haskellの圏論関係のモジュールの勉強をしています　(*´σｰ｀)ｴﾍﾍ

練習問題として、 Control.Arrow を使って fizzbuzz を書いてみました

# FizzBuzz
```hs:FizzBuzz.hs
import Control.Arrow

fizz :: Int -> Either Int String
fizz n = if n `mod` 3 == 0
           then Right "Fizz"
           else Left n


buzz :: Int -> Either Int String
buzz n = if n `mod` 5 == 0
           then Right "Buzz"
           else Left n


fizzbuzz :: Int -> Either Int String
fizzbuzz n = if n `mod` 15 == 0
               then Right "FizzBuzz"
               else Left n

fizzbuzzA :: Int -> String
fizzbuzzA = fizzbuzz >>> (buzz ||| Right) >>> (fizz ||| Right) >>> (show ||| id)


main :: IO ()
main = mapM_ (putStrLn . fizzbuzzA) [1..100] 
```

# あとがき
関係ないけど、 Arrow の do構文の展開、めちゃクソ面倒くさくないですか

## 追記
こっちのほうがカッコ良いですね

```hs:FizzBuzz.hs
whenMultipleOf :: String -> Int -> Int -> Either Int String
whenMultipleOf str m n = if n `mod` m == 0
                           then Right str
                           else Left n

fizzbuzzA_ :: Int -> String
fizzbuzzA_ = "FizzBuzz" `whenMultipleOf` 15
         >>> "Buzz"     `whenMultipleOf` 5  ||| Right
         >>> "Fizz"     `whenMultipleOf` 3  ||| Right
         >>> show ||| id
```

Kleisli圏のArrowでもやってみた

```hs:FizzBuzz.hs
import Control.Arrow

fizz :: Kleisli (Either String) Int Int
fizz = Kleisli $ \n -> if n `mod` 3 == 0
                         then Left "Fizz"
                         else Right n


buzz :: Kleisli (Either String) Int Int
buzz  = Kleisli $ \n -> if n `mod` 5 == 0
                          then Left "Buzz"
                          else Right n


fizzbuzz :: Kleisli (Either String) Int Int
fizzbuzz = Kleisli $ \n -> if n `mod` 15 == 0
                             then Left "FizzBuzz"
                             else Right n

fizzbuzzA :: Int -> String
fizzbuzzA = either id show . runKleisli (fizzbuzz >>> buzz >>> fizz)


main :: IO ()
main = mapM_ (putStrLn . fizzbuzzA) [1..100]
```
Movable Type 7 Developer Preview (アルファ版)をインストールする

Movable Type 7 のDeveloper Preview 版が公開されました。

ここでは、Movable Type 7 Developer Preview 版を触るためのインストール方法・アップグレード方法について記述します。

※この記事は、ベータ版が公開されるまでの限定公開の予定です。

## 動作環境(推奨環境)


動作環境は現時点で以下の予定となっています(変更の可能性あり)。

* Perl 5.10.1 - 5.24.x
 * 推奨 5.18.x
* MySQL 5.1-, MariaDB 5.5-
 * 推奨 Maria DB 10.1
* nginx もしくは Apache / psgi 対応
 * 推奨 nginx + starman

psgiサーバーは必須ではなく、Apache + Perl + MySQLでも動作します。
(筆者はさくらインターネットさんのレンタルサーバーやAWSのEC2上でいろいろいじっています)

速度を求める場合、nginxのような軽量なウェブサーバーや、psgiのようにプロセスを常駐化できる仕組みを整えたほうがより良いパフォーマンスが出ることでしょう。

## Movable Type 7 Developer Version の入手

以下から入手します。

https://www.movabletype.jp/beta/

## インストール方法

インストールは、今までのMTと変わりません。
MT7 Developer Preview を解凍=>インストールディレクトリへ配置=> mt.cgi へアクセスすることで、インストールウィザードが走ります)

インストール方法については、スタートガイドをご参照ください。

https://www.movabletype.jp/documentation/mt6/startguide/


## 既存のMTからアップグレードを試す方法

MT7では、community pack が除外されているため、これまでのMT6にそのまま上書きするだけでは正常にアップグレードされません。

例として、以下の環境でMTが動いていると仮定した環境でのアップグレード例を記述します。

* 公開URLは http://example.com
* MTの管理画面URLは http://example.com/mt/
* MTがインストールされているサーバーパスは /var/www/html/mt

最初に、旧MTのディレクトリをリネームします。

```
mv /var/www/html/mt /var/www/html/oldmt
```

次に、MT7 Developer Version を /var/www/html/mt に展開します。

```
mkdir /var/www/html/mt
cp -r /path/to/mt7's folder/* /var/www/html/mt
```

cgiファイルをchmodして755や705など、実行可能な状態にします。


```
chmod 755 /var/www/html/mt/*.cgi
```

mt-config.cgi を、旧MT環境からコピーします。

```
cp /var/www/html/oldmt/mt-config.cgi /var/www/html/mt/
```

すべて準備できたら、mt-upgrade.cgiへ直接アクセスします。今回の例で言うと

```
http://example.com/mt/mt-upgrade.cgi
```
へ、ブラウザで直接アクセスします。

これで、アップグレードが走り、MT7の利用準備が完了します。

## ご注意

今回のバージョンはアルファ版であり、実際の案件での利用はできません。

旧バージョンからのアップグレードを試す場合は、事前にデータベース、旧バージョンのMTパッケージ、および公開されたデータなどのバックアップを取った上で、お試しください。

MT7 Developer Preview へアップグレードしたあとに、元のバージョンへ戻すことはできませんので、十分ご注意ください。

Developer Preview の仕様や機能は、予告なく変更する場合がありますので、ご了承ください。

## その他

Movable Type 7 の概要については、以下の資料を合わせてご覧ください。

https://speakerdeck.com/hirata/mtddc-2017-keynote-mt-7-concept
https://www.slideshare.net/swordbreaker/movable-type-7-80522292
railsでmysqlのJSON型を扱う

ActiveRecordでJSON型のカラムを読み書きする時用のメモ

# 環境

- MySQL 5.7
- rails 5.1.3

# コード

```ruby:scheme.rb
create_table "foo_models", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4" do |t|
  t.json "hoge"
end
```

- create

```ruby
FooModel.create(
  hoge: {
    name: 'yamada',
    age:  22,
    sex:  0
  }
)
```

- get

```ruby
foo = FooModel.first
foo.hoge['name']
=> "yamada"
```

※取得の際にシンボル指定(`foo.hoge[:name]`)だとダメなようです

# ransackの検索に対応する

公式Wikiの[ここ](https://github.com/activerecord-hackery/ransack/wiki/using-ransackers#3-search-for-a-key-in-an-hstore-column-in-this-example-searching-an-hstore-column-called-properties-for-records-containing-a-key-called-link_type)の対応でいけるかと思ったけどうまく動かなかったので追記でメモしておきます。
JSON型といっても中身は文字列なのでLIKE検索で力強く取得します。

```ruby:foo_model.rb
  ransacker :hoge_name, formatter: -> v { "\"name\": \"#{v}\"" } { Arel.sql('hoge') }
```

これで

```ruby
FooModel.ransack(hoge_name_cont: 'yamada').result
```

このように検索できるようになります。
日付を取得するDOSコマンド

###日付を取得して文字列にする

よく使う割に思い出すのが面倒なのであとでコピペできるように書いておく。

dcdiagコマンド部分はおまけ。
このコマンドはActiveDirectoryサーバのみです。


```getdate.bat
set ymd=%date:~0,4%%date:~5,2%%date:~8,2%
echo %ymd%

dcdiag /a /c >%userprofile%\desktop\dcdiag_%ymd%.txt

```
###実行結果
dcdiag_yyyymmdd.txt　というファイル名のActiveDirectoryの診断結果が作成される。
Docker for Windowsでxdebugを使う

設定で苦労したので備忘録として書いておく。

# 目的
Docker for Windowsでwebサービスの開発環境を構築する。
ホストOSはwindows、ゲストOSはlinux。
ホストOSのソースはゲストOSにマウントされている状態。
webはapacheとphp。
netabeansを使ってxdebugでphpデバッグするのが目的。

# 環境
os : windows 10 pro
Docker : 17.09.0-ce
docker-compose : 1.16.1
php : 5.6
NetBeansIDE 8.2

# 前提
php等はゲストOSにインストールされてるものとする。
自分の環境では以下で一通り入っている。Dockerfileより抜粋。

```Dockerfile
RUN yum install --enablerepo=epel,remi-php56,remi -y \
                              php \
                              php-cli \
                              php-gd \
                              php-mbstring \
                              php-mcrypt \
                              php-mysqlnd \
                              php-pdo \
                              php-xml \
                              php-xdebug \
                              php-pear \        
                              php-intl \
                              php-devel \
                              php-xmlrpc \
                              php-pecl-apcu \
                              php-pecl-xdebug
```

# 設定
## ゲストOS側の設定

```php.ini
;xdebug.soがあるパスを書く
zend_extension="/usr/lib64/php/modules/xdebug.so"
xdebug.remote_enable=1
;remote_connect_backを0にしないと動かない
xdebug.remote_connect_back=0
xdebug.remote_autostart=1
;remote_hostはホストOSのipにする
xdebug.remote_host=10.101.65.9
xdebug.remote_handler=dbgp
;portは9000でもよいが衝突しにくいものにしておく
xdebug.remote_port=49190
xdebug.max_nesting_level=1000
;ide側の設定と合わせる必要あり
xdebug.idekey="netbeans-xdebug"
xdebug.profiler_output_dir=/tmp
xdebug.remote_log=/tmp/xdebug.log
```

/etc/php.d にある15-xdebug.iniも編集

```15-xdebug.ini
zend_extension=/usr/lib64/php/modules/xdebug.so
xdebug.default_enable = 1
xdebug.remote_enable  = 1
```
設定したらapachectl restart

## ホストOSのnetbeans設定
プロジェクト右クリック > プロパティ > 実行構成
プロジェクトURLに起動するアプリケーションのURLを追加。

![netbeans設定.png](https://qiita-image-store.s3.amazonaws.com/0/145645/9d0054ff-b39a-6040-5b61-b81b57bb6d02.png)


さらに「詳細」をクリック

「デバッグURL」：デフォルトを選択

「パスマッピング」：ゲストOSのソースのファイルパス
「プロジェクト」：ホストOSのソースのファイルパス
(ここでゲスト/ホストOSのソース同士がマッピングされデバッグが可能になる)

![nete2.png](https://qiita-image-store.s3.amazonaws.com/0/145645/254159e4-816a-3fbf-6165-eb27dcfe8c3c.png)


プロジェクト右クリック > デバッグ で起動する。

# 苦労
## デバッグ起動時　接続をまっています　のまま
php.iniの
xdebug.remote_connect_back=1だと接続できなかった。
/tmp/xdebug.logを見つつ以下を参考に対応。
https://qiita.com/bashishi/items/e40830884d107b4055de

## ファイルのマッピングがされない
以下を参考に対応。
https://blog.freedom-man.com/php-xdebug/

# 参考文献
https://qiita.com/kojionilk/items/5cff97ece056fd3c469f
https://blog.freedom-man.com/php-xdebug/
https://qiita.com/bashishi/items/e40830884d107b4055de
http://tango.hatenablog.com/entry/2016/09/05/201108
Vue.js + ExpressでSSRをやってみた

簡単に管理できるようにバックエンド(express)とクライアントエンド(Vue.js)を分けます。

#express
express-generatorを使って構築します。

```
npm install express-generator -g 
```

テンプレートとしてJadeを使います。

```
express --view=jade backend
cd backend
npm install
DEBUG=backend:* npm start
```

http://localhost:3000 にアクセス見たら、Welcome to expressが表示させることを確認できます。自分は3000ポートをすでにRailsで使っているため以下のように実行しました。

```
PORT=3030 DEBUG=backend:* npm start
```

#Vue.js
vue-cliを使って構築します。

```
npm install -g vue-cli 
```

テンプレートとしてWebpackを使います。

```
vue init webpack frontend
```
設定項目の質問は確認して設定を行います。ただし、Install vue-routerは必ずYesにしてください。

```
cd frontend
npm install
npm run dev
```
http://localhost:8080/#/ が自動にブラウザーを開き、表示されます。

# expressとvue連結
http://localhost:8080 にリクエストが来た場合、localhost:3030をProxyに使うように設定します。

``` frontend/config/index.js ``` から ``` proxyTable ``` を修正します。

``` 
proxyTable: {
  '/': {
    target: 'http://localhost:3030/',
    changeOrigin: true,
    pathRewrite: {
      '^/': ''
    }
  }
},
``` 

http://localhost:8080 にアクセスすると welcome expressページが表示されます。

# expressサーバーだけ使う
現在はサーバーがexpressとvue no
webpack-dev-serverが一緒に動いています。現在はlocalhost:3030にアクセスするとexpressのページが表示されます。
vueアプリを配布してexpressサーバーだけ使ってvueにアクセスできるようにします。

``` frontend/config/index.js ``` から buildで以下の部分を修正します。

``` 
index: path.resolve(__dirname, '../../backend/public/index.html'),
assetsRoot: path.resolve(__dirname, '../../backend/public'),
``` 
修正した後、ビルドしたらbackend/publicにビルドされた結果が作られます。
frontendをrunしなくてもvueの結果がexpressから表示されます。

```
cd frontend
npm run build
```
http://localhost:3030/ にアクセスするとVue.jsのWelcom to Your Vue.js Appページが表示されます。

# vueのrouterをhistoryモードに変更
http://localhost:3030/ にアクセスすると　http://localhost:3030/#/ になるのは現在のvueアプリがhashモードだからです。そのためhistoryモードに変更します。

``` frontend/config/index.js ``` に以下のコードを追記します。

``` 
export default new Router({
  mode: 'history',
  routes: [
    {
　　　　　　　　　...
``` 

今後vueアプリでhistoryモードが引き継がれない問題があるため、[connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback)を使いします。

まずinstallします。

``` 
cd backend
npm install --save connect-history-api-fallback
``` 

``` backend/app.js ``` に以下のコードを追記します。


``` 
var app = express();
app.use(require('connect-history-api-fallback')());
```
React NativeでNativeのUI Componentを使う（iOS編）

サードパーティのNative用SDKのコンポーネントをReactNativeで使いたかったので調べた。公式は英語を読めたとしても説明不足だったり、余計だったり分かりづらいと思う。
当方、Objective-C初心者ですので悪しからず。プロパティの設定や、他APIの使用はさらに色々設定が必要。
[Android編](https://qiita.com/abdonwww/items/5a286000428fe4cd877c)はこちら。

## 公式ドキュメント
https://facebook.github.io/react-native/docs/native-components-ios.html

## 一番シンプルなコード例
1. RCTViewManagerを継承したヘッダーファイル（.h）と実装ファイル（.m）を作成。[XXXX]Managerと命名すること。XXXXがJSで呼び出される名前になる。
2. 実装ファイルで **RCT_EXPORT_MODULE()** を呼び出し。viewメソッドでNativeのViewを返す。
3. Managerクラスでつけた名前を指定してJavaScriptから呼び出す。 

``` ExampleManager.h
#import <React/RCTViewManager.h>
#import <UIKit/UIKit.h>

@interface ExampleManager : RCTViewManager
@end
```

``` ExampleManager.m
#import "ExampleManager.h"

@implementation ExampleManager

// This line allows ReactNative to access this component from JS
RCT_EXPORT_MODULE();

- (UIView *)view
{
  return [[UIView alloc] init];
}
@end
```

``` App.js
import React from 'react';
import { requireNativeComponent } from 'react-native';

const Example = requireNativeComponent('Example', null);

export default class App extends React.Component {
  render() {
    return (
      <Example />
    );
  }
});
```
apkをビルドできない java.util.zip.ZipException: duplicate entry 


KotlinのプロジェクトにAdobe Creative SDKを導入しapkを作成しようとしたところ以下のエラーでハマった。

```
Error:Execution failed for task ':app:transformClassesWithJarMergingForDebug'.
> com.android.build.api.transform.TransformException: java.util.zip.ZipException: duplicate entry: org/intellij/lang/annotations/Identifier.class
```

`Identifier.class`でgrepすると以下の用にannotations-12.0.jarとannotation-13.jarが使用されようとしていた。

```
$./gradlew assembleDebug --stacktrace --info | grep Identifier.class

addJar(/Users/ユーザー名/.gradle/caches/modules-2/files-2.1/com.intellij/annotations/12.0/bbcf6448f6d40abe506e2c83b70a3e8bfd2b4539/annotations-12.0.jar): entry org/intellij/lang/annotations/Identifier.class
addJar(/Users/ユーザー名/.gradle/caches/modules-2/files-2.1/org.jetbrains/annotations/13.0/919f0dfe192fb4e063e7dacadee7f8bb9a2672a9/annotations-13.0.jar): entry org/intellij/lang/annotations/Identifier.class
```

古い(であろう)12の方の`com.intellij`のannotationsを次のように除外設定することで無事ビルドできるようになりました。

```appモジュールのbuild.gradle
android {
    // 中略
    configurations.all {
        exclude group: 'com.intellij', module:'annotations'
    }
}
```

なんかいつもgradle周りは行き当たりばったりの解決で理解が深まらないぜ！
まぁしかたないが、記録に残せば何か変わるかも。

参考
https://medium.com/@terrakok/how-to-fix-gradle-build-error-java-util-zip-zipexception-duplicate-entry-83d102038056
馬鹿の一つ覚え: SSHポートフォワーディング

SSH port forwardingの実際の使い方を場合ごとにまとめておく。

## sshのオプション

#### ssh -L の使い方
host_aから、別なLANに接続されていて直接アクセスできないhost_cにsshする場合を考える。host_aから直接アクセスでき、かつhost_cにもアクセスできるhost_bを中継して、host_aからhost_cにトンネルを掘ってみる。host_aで以下のように ssh -Lを実行すれば良い。

```
host_a $ ssh -L 54321:host_c:22 host_b
```

これはhost_aから見てローカル、つまりlocalhostの54321番ポートを開放し、データを転送する。ssh -Lで接続するhost_b、つまりリモートから見てhost_cの22番ポートにそのデータは転送される。よって、この状態で以下のようにsshすればhost_aからhost_cに直接sshできるようになる。

```
host_a $ ssh -p 54321 localhost
```
![fg20181002.png](https://qiita-image-store.s3.amazonaws.com/0/182586/ffa6e51c-3042-9ba2-9b6b-a80688229087.png)

#### ssh -R の使い方
host_aから、別なLANに接続されていて直接アクセスできないhost_bやhost_cにsshする場合を考える。host_bやhost_cから見てWAN側のhost_aに直接アクセスできる場合、host_aからhost_cにトンネルを掘ってみる。host_bで以下のようにssh -Rを実行すれば良い。

```
host_b $ ssh -R 51234:host_c:22 host_a
```

これはhost_bから見てリモート、つまりhost_aの51234番ポートを開放し、データを転送する。ssh -Rを実行したhost_b、つまりローカルから見てhost_cの22番ポートにそのデータは転送される。この状態でhost_aに入り込んで以下のようにsshすればhost_aからhost_cに直接sshできるようになる。

```
host_a $ ssh -p 51234 localhost
```
![fg20181003_ssh_R.png](https://qiita-image-store.s3.amazonaws.com/0/182586/7891ccbb-4d52-d21e-a8ab-e9d394a331a0.png)

#### ssh -f の使い方
host_aでssh -fを実行した場合、sshのプロセスをバックグラウンドで実行させる。しかしオプション -f 単独で使った場合は動作しないので、次に説明するオプション -N と一緒に使う。

```
host_a $ ssh -f host_b
Cannot fork into background without a command to execute.
```

#### ssh -N の使い方
接続したリモートhost_bで何も実行しないためのオプション -N があり、ポートフォワーディングのためには -f とともに使うと便利である。実行したssh -f -Nはバックグラウンドで実行され、シェルからは切り離されているのでコマンドpsで確認する必要がある

```
host_a $ ssh -f -N -L 54322:host_c:22 host_b
host_a $ jobs    # jobsでは確認できない
host_a $ ps -ef | grep ssh    # プロセス番号を確認
host_a $ kill 1487    # バックグラウンドのssh -f -Nをkill
```

## プライベートネットワーク内にあるホストPから外側のネットワークにあるホストGにssh接続できるが、逆ができない場合に、ホストGからホストPにssh接続する方法。

仮にホストGのIPアドレスをクラスBのプライベートIPアドレスを用いて172.24.24.24とする。まず、内側のホストPからリモートのオプション-Rを用いてで外側のホストG (172.24.24.24) に接続し、その状態を維持しておく。以下のコマンドは、リモートホストの52043番ポートへの通信を、localhost (127.0.0.1) つまりホストPの22番ポート(sshdのdefault)へ転送させることを意味する。ポート番号はエフェメラルポートの番号、特に50000番台が無難。

```
hostP $ ssh -R 52043:127.0.0.1:22 172.24.24.24    # リモートの52043番ポートへの通信を自身へ転送
hostG $ cat /proc/sys/net/ipv4/ip_local_port_range    # エフェメラルポートの確認
32768	61000
```

上記ssh接続を維持させたままホストGから自身の52043番ポートへアクセスすると内側のホストPへ接続することができる。

```
hostG $ ssh -p 52043 127.0.0.1
hostP $ 
```

## 外からプライベートネットワーク内のhttpdにアクセス

プライベートネットワークの外側からプライベートネットワーク内のwebサーバにアクセスしてみる。プライベートネットワーク内のwebサーバ、プライベートネットワーク内のホストP、外側のホストGのIPアドレスを仮に、それぞれ 192.168.24.4 、 192.168.24.24 、 172.24.24.24 とする。まず、ホストPからssh -RでホストGにアクセスし、接続したままの状態を維持する。ここでは、リモートのホストGの520044番ポートへのアクセスをwebサーバの443番ポートに転送させる設定を行なっている。HTTPの場合は80番、HTTPSの場合は443番がデフォルトである。その状態でホストGのwebブラウザから https://localhost:52044/ にアクセスすれば、webサーバにアクセスすることができる。

```
hostP $ ssh -R 52044:192.168.24.4:443 172.24.24.24
hostP $ 
```
経営・マーケティング周りの分析手法について（SWOT分析など）


## はじめに
ITパスポートなどでも出てくる程度の経営/マーケティング分析手法について簡易なリストと雑感を書いています。気が向いたら追記していきます。

## 色々ある**分析
調べれば分かりやすいサイトはいくらでもあるので、ここでは短文で簡潔にリストだけを示します。

* [SWOT分析](https://ja.wikipedia.org/wiki/SWOT分析)：強み・弱み・機会・脅威の観点から分析
* [PEST分析](http://www.itmedia.co.jp/im/articles/0812/01/news147.html)：政治・経済・社会/文化・技術の観点から分析
* [5F（ファイブフォース）分析](https://ja.wikipedia.org/wiki/ファイブフォース分析)：既存同業者・新規参入企業・代替品・売り手(供給業者)・買い手(顧客)の各脅威の観点から分析
* [3C分析](https://ferret-plus.com/66)：市場/顧客・競合・自社の観点から分析
* [VRIO分析](http://www.accia.net/glossary/mark/vrio.html)：企業の経営資源を「経済価値・希少性・模倣可能性・組織」の観点から分析
* [バリューチェーン分析](http://www.darecon.com/tool/valuechain1.html)：バリューチェーンの各レイヤーに対する分析

## 雑感
こういう分析は大体の場合、次の戦略を立てるために現状を把握するという観点から行われます。これは会社でなくとも、人が集まりなんらかの経済活動をしているという点からプロジェクト単位であっても活用はできるでしょう。

先ほど挙げた分析の中では、一番大きな枠組みとしてSWOT分析があります（私の勝手な考えです）。SWOT分析における機会・脅威は基本的に外側にあるもので、その外側を分析するためにPEST分析や5F分析を使います。一方、SWOT分析における強み・弱みは内側のものなので、まずはバリューチェーン分析によりレイヤーに分け、各レイヤーに対してVRIO分析を行います。

こうした分析において大切なのはMECEであるということでしょう。MECEとは何かというと、Mutually Exclusive and Collectively Exhaustive（お互いに重複せず、全体に漏れがない）という概念のことです。すなわち、なんらかの分析を行うにあたって、重複や漏れがないことが大切だということです。と言ってももちろんMECEはこうした分析に限らず、ロジカルに考えるにあたって重要な概念だと思うので、覚えておいて損はないでしょう。


## その他よく聞く概念、分析手法等
・[PPM(Product Portfolio Management)](https://ja.wikipedia.org/wiki/プロダクト・ポートフォリオ・マネジメント)：自社製品or事業を、市場成長率とシェアから「スター/金のなる木/問題児/負け犬」に分類し、投資先の決定などを行う
Rails Tutorial 第一章　簡易まとめ　HerokuへのGemfile変更



```rb:元のgemfile

source 'https://rubygems.org'

gem 'rails',        '5.1.2'
gem 'sqlite3',      '1.3.13'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.6.4'

group :development, :test do
  gem 'byebug', '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

```

HerokuではPostgreSQLデータベースを使う。そのためには、本番 (production) 環境に
「pg gem」をインストールしてRailsがPostgreSQLと通信できるようにする。

```rb:これの追加

group :production do
  gem 'pg', '0.20.0'
end
```
HerokuではSQLiteがサポートされていないため、

リスト 1.5の変更を行って、sqlite3 gemが本番環境に導入されないようにしておきます。

```rb: 

#sqlite3 gem の場所変更


group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.0', platform: :mri
end

```

```rb:変更後のgemfile


source 'https://rubygems.org'

gem 'rails',        '5.1.2'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.7.0'

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

group :production do
  gem 'pg', '0.20.0'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

```


本番用のgem (この場合はpg gem) をローカルの環境にはインストールしないようにするために、bundle installに特殊なフラグ「--without production」を追加

```
$ bundle install --without production
```

リスト 1.14で追加したgemは本番環境でしか使わないので、このフラグを追加したコマンドを実行すると本番用gemはローカルに追加されません。今このコマンドを実行するのは、後の本番環境へのデプロイに備えてGemfile.lockを更新し、pg gemやRubyバージョンの指定をGemfile.lockに反映する必要があるため。

最後に、次のコマンドを実行して、変更をコミット。

```
$ git commit -a -m "Update Gemfile for Heroku"
```

自分のシステムにHerokuコマンドラインクライアントがインストールされているかどうかを確認します。

```
$ heroku version
```

クラウドIDEをお使いの場合は、Herokuのバージョン番号とともにheroku CLIが利用可能であるというメッセージが表示されます。クラウドIDEを使っていない場合は、[Heroku Toolbelt](https://toolbelt.heroku.com/)をインストールする必要があります。

Herokuのコマンドラインインターフェイス (CLI) がインストールされていることが確認できたら、いよいよherokuコマンドでログインしてSSHキーを追加します。

```
$ heroku login
$ heroku keys:add
```

最後にheroku createコマンドを実行して、Herokuサーバーにサンプルアプリケーションの実行場所を作成します。

```rb: 
#Herokuに新しいアプリケーションを作成する
$ heroku create
Creating app... done, fathomless-beyond-39164
https://damp-fortress-5769.herokuapp.com/ |
https://git.heroku.com/damp-fortress-5769.git
```
このherokuコマンドを実行すると、Railsアプリケーション専用のサブドメインが作成され、ただちにブラウザで表示可能になります。今はまだ何もありませんが、すぐにデプロイしてWebページを表示させましょう。

・Herokuにデプロイする

Railsアプリケーションを実際にHerokuにデプロイするには、まずGitを使ってHerokuにリポジトリをプッシュし\する。以上。

```
$ git push heroku master
```