OmniAICreator/Qiita-1.07M huggingface dataset:
Angular2で描画後になにか操作したい場合

# Angular2で描画後にDOM操作をしたい場合

例えばAngular2で描画した後にDOMに対してフォーカスを当てたい場合などがあります。

## ngAfterViewInit と ngAfterViewChecked を使用する
その際行った際に使用するのが ngAfterViewInit と ngAfterViewChecked です。

| HOOK             |説明        |参考 |
|:-----------------|:-----------|:---|
|ngAfterViewInit   |コンポーネントのビューが生成された直後に呼ばれます。            |[ngAfterViewInit](https://angular.io/docs/ts/latest/api/core/index/AfterViewInit-class.html)|
|ngAfterViewChecked |コンポーネントのビューの変更を確認した後に呼ばれます。 |[ngAfterViewChecked](https://angular.io/docs/ts/latest/api/core/index/AfterViewChecked-class.html)|

## 使用方法

```ts:app.component.ts
import { Component, AfterViewInit, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent implements AfterViewInit, AfterViewChecked { 
  name = 'Angular';
  ngAfterViewInit(){
    console.log("init");
  }
  ngAfterViewChecked(){
    console.log("checked");
  }
}
```

## 使用上の注意

Expression has changed after it was checked. Previous value: 'Angular'. Current value: 'Angular2'.

下記のようなコードを書くと上記のようなエラーが発生します。

```ts:app.component.ts
import { Component, AfterViewInit, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent implements AfterViewInit { 
  name = 'Angular';
  ngAfterViewInit(){
    this.name = "Angular2";
  }
}
```

理由は簡単で ngAfterViewInit やngAfterViewChecked を使用して
直接 template の情報が描き変わるようなことはしてはいけないということです。

描画後に変更を行いたい場合は下記のようにsetTimeoutを使用するなどして
回避する必要があります。

```ts:app.component.ts
import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent implements AfterViewInit { 
  name = 'Angular';
  ngAfterViewInit(){
    setTimeout(() => this.name = "Angular2");
  }
}
```

また、ngAfterViewChecked はコンポーネントがチェックされるたびに呼ばれるので動作がかなり遅くなったり、場合によっては無限に実行され続ける場合がありますので
必要な場合のみ処理を行うようコードを書くべきなのでしょう。


なにか、間違いやお気づきの点がありましたらコメントくだされば幸いです。


## 参考記事
[Angular2のLifecycle Hooksを理解する](http://blog.yuhiisk.com/archive/2016/05/02/angular2-lifecycle-hooks.html)
[How to run a jquery function in Angular 2 after every component finish loading
](http://stackoverflow.com/questions/31171084/how-to-call-function-after-dom-renders-in-angular2)
Webpack で React を導入した Rails アプリケーションを Heroku で動かすまでの手順

Webpack で React を導入した Rails アプリケーションを Heroku で動かすまでの手順

* 環境
    * Rails : 5.0.1
    * node : 6.10.0

# :one: React, Webpack, Babel の導入

* Rails のルートフォルダ直下に client/ ディレクトリを用意
* client/ ディレクトリ配下に package.json を作成
* React のパッケージをインストール
* Webpack, Babel のパッケージをインストールする

```bash
$ mkdir client
$ cd client
$ npm init -y
$ npm install --save react react-dom
$ npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react
```

* Webpack の confing を用意
    * ビルド対象のファイルや成果物の出力先などを指定

```js:client/webpack.config.js
module.exports = {
  entry: { app: './src/index.js' },
  output: {
    path: '../app/assets/javascripts/webpack',
    filename: 'app.js',
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react'],
        },
      }
    ]
  },
}
```

* package.json にビルドコマンドを指定
    * webpack を使用したビルドができるようにする

```json:client/package.json
...
  "scripts": {
    "watch": "webpack -w",
    "build": "webpack -p",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...
```

# :two: Rails の config に precompile の設定を追加

* assets のコンパイル対象に JS を含める

```rb:config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( *.js )
```

# :three: React component の作成

```js:client/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

class Greet extends React.Component {
  propTypes () {
    return {
      name: React.PropTypes.string.isRequired,
    };
  }

  render () {
    return (
      <div>
        Hello, {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <Greet name={name} />,
  document.getElementById('react_test')
);
```

# :four: 作成した component を使用した view の作成

* controller から受け取ったデータを script タグでグローバル変数に格納しておく
    * componet の props として渡せるように

```erb:app/views/sample/index.html.erb
<h1>React Sample</h1>

<script>
  var name = <%= @name %> <% # @name は controller から受け取った文字列 %>
</script>

<div id="react_test"></div>
<%= javascript_include_tag "webpack/app" %>
```

# :five: ローカル環境での起動

* ここまで設定すると下記コマンドで表示を確認することができる

```bash
$ cd client/
$ npm run build
$ cd ../
$ rails s
```

# :six: Heroku で動かすための準備

* Rails のルートフォルダ直下に package.json を用意する
    * Heroku で node や npm をインストールするためには package.json がルートディレクトリの直下にないといけない(らしい)

```bash
$ npm init -y
```

* Heroku 上では npm コマンドを使用した webpack のビルドができないので precompile 前に自動で実行するように rake task を用意する

```rb:lib/tasks/before_precompile.rake
task :build_frontend do
  cd "client" do
    sh "npm install"
    sh "npm run build"
  end
end

Rake::Task["assets:precompile"].enhance(%i(build_frontend))
```



# 参考リンク
* http://techlife.cookpad.com/entry/2016/07/27/101015
* http://ichimaruni-design.com/2017/02/heroku-rails-react-webpack/
Apexでのnullとか空チェック

普段あまり深く考えず、とりあえずでチェックしているので、少し整理してみました。

### 以下は単純に` == null`でOK
- ID
- Integer
- Decimal
- Double
- Date
- Datetime
- Time

### Stringは空文字列と、空白文字があるので、状況に応じて使い分けます。
以下、挙動の比較

```java
String nullString = null;
String emptyString = '';
String blankString = '    ';

// ==null
System.debug(nullString == null); //true
System.debug(emptyString == null); //false
System.debug(blankString  == null); //false

// == ''
System.debug(nullString == ''); //false
System.debug(emptyString == ''); //true
System.debug(blankString == ''); //false

// String,isEmpty(inputString)
System.debug(String.isEmpty(nullString)); //true
System.debug(String.isEmpty(emptyString)); //true
System.debug(String.isEmpty(blankString)); //false

// String,isNotEmpty(inputString)
System.debug(String.isNotEmpty(nullString)); //false
System.debug(String.isNotEmpty(emptyString)); //false
System.debug(String.isNotEmpty(blankString)); //true

// String,isBlank(inputString)
System.debug(String.isBlank(nullString)); //true
System.debug(String.isBlank(emptyString)); //true
System.debug(String.isBlank(blankString)); //true

// String,isNotBlank(inputString)
System.debug(String.isNotBlank(nullString)); //false
System.debug(String.isNotBlank(emptyString)); //false
System.debug(String.isNotBlank(blankString)); //false

//inputString.isWhitespace()
System.debug(nullString.isWhitespace());//ぬるぽ
System.debug(emptyString.isWhitespace()); //true
System.debug(blankString.isWhitespace()); //true
```

### List, Set, Map
nullチェックは`== null`
空チェックは`.isEmpty()`
なので、`hoge != null && !hoge.isEmpty()`という使い方が多いかな？

なお、 クエリの結果をリストに格納した場合、値がとれなくてもnullにはならないので、nullチェックはしなくて良いみたい。
また、クエリで取得したsObjectの項目の値は、文字列系の項目であっても空にはならないので、nullチェックのみで良さそう。
Visualforce で連動選択リスト

結構よくやることだと思うのですが、Visualforce側の書き方を忘れがちなのでメモ

ポイントは
・`<apex:actionSupport>`タグでonchangeイベントを拾う
・`<apex:actionRegion>`タグで他の項目の入力チェックを回避する
の2点です。

まずはVF

```html:DependentSelectList.page
<apex:page controller="DependentSelectListController">
  <apex:form>
    <apex:pageBlock>
      <apex:pageBlockSection columns="1">
        <apex:pageBlockSectionItem>
          <apex:outputLabel value="選択リスト1"/>
          <apex:actionRegion>
            <apex:selectList value="{!selectValue1}" id="selectList1" size="1">
              <apex:selectOptions value="{!selectList1}"/>
              <apex:actionSupport event="onchange" reRender="selectList2"/>
            </apex:selectList>
          </apex:actionRegion>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem>
          <apex:outputLabel value="選択リスト2"/>
            <apex:selectList value="{!selectValue2}" id="selectList2"
                             size="1" disabled="{!ISBLANK(selectValue1)}">
            <apex:selectOptions value="{!selectList2}"/>
          </apex:selectList>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>
```

選択リスト1の`<apex:selectList>`タグの中に`<apex:actionSupport>`タグを入れ、onchangeイベントを拾って選択リスト2を更新するようにしています。

さらに、選択リスト1の`<apex:selectList>`タグを`<apex:actionRegion>`タグで囲って、他の項目の入力チェックが動作するのを回避しています。

また、選択リスト2の方は、選択リスト1で値が選択されていない間は、非活性になるようにしています。

続いて、コントローラ

``` java:DependentSelectListController.cls 
public with sharing class DependentSelectListController {
  public ID selectValue1 {get; set;}
  public ID selectValue2 {get; set;}
  public List<SelectOption> selectList1 {
    get {
      List<SelectOption> selectOptions 
       = new List<SelectOption> { new SelectOption('', '-なし-') };

      for(Example__c e : [
        SELECT ID
             , Name
          FROM Example__c
         WHERE IsValid__c = true
         ORDER BY DisplayOrder__c]
      ) {
        selectOptions.add(new SelectOption(e.ID, e.Name));
      }

      return selectOptions;
    }
  }
  public List<SelectOption> selectList2 {
    get {
      List<SelectOption> selectOptions 
       = new List<SelectOption>{new SelectOption('', '-なし-')};

      for(ExampleChild__c ec : [
        SELECT ID
             , Name
          FROM ExampleChild__c
         WHERE IsValid__c = true
           AND Example__c = :selectValue1
         ORDER BY DisplayOrder__c
      ]) {
        selectOptions.add(new SelectOption(ec.ID, ec.Name));
      }

      return selectOptions;
    }
  }

  public DependentSelectListController() {
  }
}
```

選択リストの中身は、今回は一番よく使いそうな親子関係にあるオブジェクトを表示する形式にしています。
親レコードを選択リスト1に、その子レコードを選択リスト2にセットします。

余談ですが、Keyに空文字列をセットしたSelectOprionをnewしていますが、VFでこの選択肢を選択した場合にクラス側に渡ってくる値は、なぜかnullになるっぽいです。
まぁ、受け取る変数の型がIDだったり、数値だったりのときにエラーにならないためでしょうかね。
Fluentdを使ってMongoDBにツイートを保存してみた

# はじめに
今回はTwitter Streaming APIとFluentd、FluentdとMongoDBを連携させて、MongoDB内にツイートデータを溜めていきたいと思います。(Fluentdを使ってみたかっただけ)

# 環境
Vagrant1.9.3
Ubuntu14.04
Python3.5
Anaconda3-4.3.0

# Fluentdのインストール
下記コマンドを実行してインストールします。

```
$ curl -L http://toolbelt.treasuredata.com/sh/install-redhat-td-agent2.sh | sh
```

・fluentdの起動

```
sudo service td-agent start
```

・fluentdの停止

```
sudo service td-agent stop
```

・fluentdの状態確認

```
sudo service td-agent status
```


# Twitter Streaming APIとFluentdを連携させる
Twitterからツイートを取得し、fluentdに流します。
## Twitter Streaming APIを使えるようにする
まず[このサイト](https://syncer.jp/Web/API/Twitter/REST_API/)を参考にTwitterアプリケーションの登録や Twitter Streaming API に必要な以下の4つの情報を取得してください。

・Consumer Key
・Consumer Secret
・Access Token
・Access Token Secret

## twitterプラグインのインストール

下記コマンドを実行すればインストールできます。

```
$ sudo yum -y install openssl-devel libcurl libcurl-devel gcc-c++
$ sudo td-agent-gem install install eventmachine
$ sudo td-agent-gem install fluent-plugin-twitter
```

## td-agent.conf の設定

/etc/td-agent/ 内のtd-agent.confを編集します。
sourceディレクティブで入力方法を指定します。
CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRETの部分には、各自が取得したものを入力してください。

```/etc/td-agent/td-agent.conf
<source>
  @type twitter
  consumer_key CONSUMER_KEY
  consumer_secret CONSUMER_SECRET
  access_token ACCESS_TOKEN
  access_token_secret ACCESS_TOKEN_SECRET
  tag input.twitter
  timeline sampling
  lang ja
  output_format nest
</source>
```

# FluentdとMongoDBを連携させる
同様に/etc/td-agent/ 内のtd-agent.confを編集します。
matchディレクティブで出力方法を指定します。
今回はfluentdデータベースのtwitterコレクションにツイートを格納します。

```/etc/td-agent/td-agent.conf
<match input.twitter>
  @type mongo
  host localhost
  port 27017
  database fluentd
  collection twitter
  flush_interval 10s
</match>
```

# ツイートを取得
これで準備は整いました。

```
sudo service td-agent start
```

でfluentdを起動させ、ツイートの取得を開始します。
しばらくしてからmongoに入って、ツイートが格納されているか確認してみます。

```mongo
> use fluentd
> db.twitter.count()
```

で確認すると、

```
9294
```

となって、9294件のツイートがしっかりMongoDBに保存されているのがわかります！
知らないユーザーの方たちをツイートをランダムに取得していたので、中身をピックアップして載せるのはやめます...

# まとめ
今回はTwitterAPI → Fluentd → MongoDBの一連の流れをやってみました。データ分析系の記事を読んでいるとFluentdの名前をよく目にするので、一度使ってみたかったというのが主な動機でした。
今回はツイートを取得するだけで終わりましたが、今度はこれを利用して大量のツイートからテキストマイニングなどもしてみたいです。
複数の関連テーブルを結合する

## モデルの設定
チームの中には複数のメンバーがいて一人に複数の役割がある。役割一つに複数のやるべき仕事がある。

```rb 
class Team < ActiveRecord::Base
  has_many :members
end

class Member < ActiveRecord::Base
  belongs_to :team
  has_many :roles
end

class Role < ActiveRecord::Base
  belongs_to :member
  has_many :tasks
end

class Task < ActiveRecord::Base
  belongs_to :role
end
```

## "掃除"というタスクをもったメンバーのいるチームを抜き出す処理を書く

```rb
# a = Team, b = Member, c = Role, d = Task
# a_has_b b_has_c c_has_d
Team.joins(members: { roles: :tasks }).where(tasks: { name: "掃除"})
or
Team.joins(members: [roles: :tasks]).where(tasks: { name: "掃除"})
```
Visual Studio 2017でプロジェクトをGitHubに公開する

# 環境
* Microsoft Visual Studio Community 2017
* Windows 10
* 言語設定\: 日本語

# インストールするもの
* [GitHub Extension for Visual Studio](https://visualstudio.github.com/index.html)

# 方法
* Visual Studioが開いていたら閉じる
* 上記のGitHub Extensionをインストールする
* 公開したいプロジェクトを開く
* チームエクスプローラーの「GitHub」の項目から「Connect…」をクリック
* サインイン画面が開くのでサインインする
* 下のバーにある「ソース管理に追加」をクリックする
* 出てきたメニューの「Git」を選択
* チームエクスプローラーが出てくるのでPublish to GitHubの項目の「Publish to GitHub」ボタンをクリックする
* リポジトリの名前等の設定項目が出てくるので設定して、「Publish」ボタンをクリックする
* 通知が出てきたら成功

# 参考
* https://github.com/blog/2285-github-extension-now-supports-visual-studio-2017-rc
* https://visualstudio.github.com/index.html
【REAPER】ReascriptをPythonで弄れるようにするには

#はじめに
作曲ソフト（≒DAW）のREAPERへ、独自のスクリプトを書く事が出来る機能”Reascript”は、プログラミング言語"Python"を用いることが出来きます。
今回はその環境構築方法に関して、簡易的な手順とテストコードを記載しますね。
（これ関係の和訳記事が少ない為、興味ある方への手助けに成れば幸いです。）



#環境
Windows10 64bit
REAPER v5.27 64bit

#1. Pythonのインストール
下記URL先にてインストーラーのダウンロード＆インストールを行います。
https://www.python.org/downloads/
####※注意点
64bit版のREAPERをお使いの場合、Pythonも64bit版を用意しなければ今後の工程（**手順3**）でエラーが発生します。

#2. Python"xx".dllをREAPERへ読み込ませる
上記、不思議なファイル名になってしまいましたが、「Python"xx".dll」の"xx"はバージョン名です。
僕の場合、インストールしたPythonのバージョンは3.6.1だった為、「Python36.dll」という名前になります。

##2-1. Python"xx".dllのパスを入手
これから「Python36.dll」をREAPERへ読み込ませる為、そのパスを知る必要があります。
この場所は手順1のインストール先によって変動します。もし分からない場合はエクスプローラーにて「Python"xx".dll」と検索すると見つかるかと思われます。

ちなみに、「Python36.dll」が置いてあったフォルダの雰囲気はこんな感じでした。
（同フォルダ内に「Python3.dll」がありますが、こちらは使用しないものなのでご注意を。）
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/169920/725372b4-413b-087f-0173-53c2c4b02bc7.png)

##2-2. REAPERへ読み込ませる
プリファレンスを表示させます。
```Ctrl + P```もしくは、メニューバーから```Options > Preferenecs```
![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/169920/a926df05-0c86-ed4d-624f-ef52792f48a0.png)


”ReaScript”にて下記3項目の設定を行います。
設定を行い、画面下部に記載の
>Python: No compatible version ofPython was found.

が

>Python: python"xx".dll is installed.

と変われば、読み込み成功です。


**Enable Python for use with ReaScript**
左側のチェックを入れる
**Custom path to Python dll directory:**
右端の```Browse...```を押し、手順2-1にて入手したパスを指定します。
**Forse ReaScript to use specific Python dll:**
右側に「Python"xx".dll」と入力

![キャプチャ4.PNG](https://qiita-image-store.s3.amazonaws.com/0/169920/c5ece5f1-c6dc-9fa8-0b00-10c5e812842a.png)


いかがでしょうか。
画像内の黄色いハイライトの様に表示が変わりましたら、読み込み成功ですので```OK```を押し、REAPERの再起動を行います。

#3. 実際にスクリプトを作成する
アクション編集画面から新規スクリプトファイルを作成し、出現したエディターからスクリプトを編集していきます。

メニューバーから``` Actions > Show action list...```
![キャプチャ5.PNG](https://qiita-image-store.s3.amazonaws.com/0/169920/64e3ecae-d8af-4fbd-ba9f-58c2c993f569.png)

アクティブになっているボタン、「ReaScript」項の```New...```をクリック
![キャプチャ6.PNG](https://qiita-image-store.s3.amazonaws.com/0/169920/4dbb41aa-c88e-4ffa-3fa7-3e5d17af362e.png)

「ファイルの種類」項にて、REAPERが拡張子**.py**を対応している事の確認をしましょう。
もしここで**.py**が表示されていなかった場合、手順1にて異なるバージョンをインストールしている、もしくは異なるdllファイルを読み込ませている可能性があります。
![キャプチャ8.PNG](https://qiita-image-store.s3.amazonaws.com/0/169920/364d0b5d-1574-1cb4-e82c-efb83f83ecb4.png)

適当なファイル名を入力し、その後ろに必ず拡張子**.py**を入力しましょう。
ファイル名だけですと、

>Extension not supported:""

「そんな拡張子（空白）は対応しておらん！」と怒られてしまいますのでご注意を。
保存を押すと、こんなスクリプトエディターが表示されます。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/169920/a3c1ec3f-ed4f-cccd-1547-f8bd38a7e2c0.png)

本投稿では、具体的な表記方法についての説明は割愛させて頂きますが、
下記コードをコピペし、```Ctrl + S```（保存）をすると、メッセージボックスやコンソールが出現し「Hello World!」と表示してくれます。


```py3:test.py
RPR_ClearConsole()

str = "Hello World!"

RPR_ShowMessageBox(str, "title", 0 )
RPR_ShowConsoleMsg(str)
```

#まとめ
いかがでしたでしょうか。


僕自身、プログラミングの勉強を始めて間もないですが、
今後はPythonを使って音をだしたり、機械学習関係にも手を出せたらと思います。


#参考文献
敬称略。

leihcrev著「Python 3.4 Windows7-64bit 環境を作る (金融時系列解析向け)」
http://qiita.com/leihcrev/items/4971eee4e657be953895
「REASCRIPT API — DOCUMENTATION」
https://www.extremraym.com/cloud/reascript-doc/
「REAPER-ReaScript」
http://www.reaper.fm/sdk/reascript/reascript.php#reascript_basic
Docker Toolbox(Windows)を使っていて"no space left on device"が出た時の対応

問題
====
https://github.com/docker/kitematic/wiki/Common-Issues-and-Fixes#running-out-of-space
> By default the VM is created with 20GB of disk space. 

解決
====
docker-machineで`default`を作り直し。
準備
----
  - コンテナのimageはexportしておく

default作り直し
---------------------------
200GBにする。

- `Docker Quickstart Terminal`をクリックしてターミナルを起動
- 以下を実行

```
$ docker-machine stop default
$ docker-machine rm default
$ docker-machine -D create -d virtualbox --virtualbox-disk-size "200000" default
```
Nested KVM

# Nested KVM

OpenStack を CentOS7 にインストールしてみる。どんなものか試してみたいだけなので、仮想マシン上で動かしてみたい。仮想マシン上で仮想マシンを動かすことになるのだが、カーネルの設定が必要。

Intel-VT の場合

<pre>
# modprobe -r kvm-intel 
# echo "options kvm-intel nested=1" > /etc/modprobe.d/kvm-intel-nested.conf
(kvm-intel-nested.conf は別のファイル名でも OK)
# modprobe kvm-intel
# cat /sys/module/kvm_intel/parameters/nested
Y (Y なら有効になっている)
</pre>
WordPressECサイト化プラグイン「Welcart」カスタマイズ方法まとめ！

# はじめに
WordpressのECサイト化プラグイン「Welcart」を扱った案件をやることになりました。
その上でいろんなことを整理しています。
間違っている点などあれば、是非ご指摘頂ければうれしいです。

## データ構造
- Welcartのデータ構造  
http://qiita.com/msp0310/items/117067af10f156841427

## カスタマイズ
- Welcartでカスタムフィールドを扱う方法  
http://qiita.com/msp0310/items/15206fab0c2907069e26
- Welcartで関連商品を表示する方法  
http://qiita.com/msp0310/items/d61d526c3b33624f9dd0
- カスタムフィールドで並び替える  
WordPressでの並び替え方法について書かれた記事ですが、welcartもWordPressなので同じです。  
*WordPressのサイト上で簡単に並び替え＆絞り込みする方法*  
https://magnets.jp/web_design/cms-web_design/3124/

## 参考リンク
- welcart - 公式サイト  
https://www.welcart.com/
- WordPress Codex 日本語版  
https://wpdocs.osdn.jp/Main_Page
Welcartで関連商品を表示する方法

## はじめに
WordpressのECサイト化プラグイン「Welcart」を扱った案件をやることになりました。
その上でいろんなことを整理しています。
間違っている点などあれば、是非ご指摘頂ければうれしいです。

## なにをもって関連商品とみなす？
どうやって関連商品とみなすのかという方法にはいくつかあります。
1. 同じカテゴリ・タグに属している
2. マスタ登録時に関連商品を設定する
3. 商品（記事）の特徴の関係を抽出
今回は2. マスタ登録時に関連商品を設定する方法について説明します。

## 関連記事の設定方法
1. 2つ以上の商品を用意  
2. 商品詳細ページを表示  
![image](https://qiita-image-store.s3.amazonaws.com/0/39308/9091de24-ea90-7a98-9ab2-71a5a53f55fd.png)
3. タグに関連する商品の商品コードを設定  
関連する商品コードをタグに設定し、追加します。  
![image](https://qiita-image-store.s3.amazonaws.com/0/39308/f693fd9e-b297-b3ce-2bbe-e248b7cd52fa.png)
4. 表示されているか確認する  
![image](https://qiita-image-store.s3.amazonaws.com/0/39308/24ed1b11-b1ee-0d86-2b85-dacf6991b7d6.png)

## 該当部のソース
**商品詳細ページ**
/wp-content/themes/welcart_default/wc_templates/wc_item_single.php

```php:wc_item_single.php(155行目付近)
	</div><!-- end of itemsubimg -->

<?php usces_assistance_item( $post->ID, __('An article concerned', 'usces') ); ?>

</div><!-- end of itemspage -->
```

**関連商品部分出力関数**
/wp-content/plugins/usc-e-shop/functions/template_func.php

```php:template_func.php(2748行目付近）
function usces_assistance_item($post_id, $title ){
	if (usces_get_assistance_id_list($post_id)) :
		global $post;
		$r = new WP_Query( array('post__in'=>usces_get_assistance_ids($post_id), 'ignore_sticky_posts'=>1) );
		if($r->have_posts()) :
		add_filter( 'excerpt_length', 'welcart_assistance_excerpt_length' );
		add_filter( 'excerpt_mblength', 'welcart_assistance_excerpt_mblength' );
		$width = apply_filters( 'usces_filter_assistance_item_width', 100 );
		$height = apply_filters( 'usces_filter_assistance_item_height', 100 );
?>
	<div class="assistance_item">
		<h3><?php echo $title; ?></h3>
		<ul class="clearfix">
<?php
```

## 参考リンク
*g.　タグ  @  Welcart オンライン・マニュアル*
https://www.welcart.com/documents/manual-2/%E6%96%B0%E8%A6%8F%E5%95%86%E5%93%81%E8%BF%BD%E5%8A%A0/g%E3%80%80%E3%82%BF%E3%82%B0
【MovableType】テンプレートのバックアップを取る

先日「【MT東京−33】はじめようMovable Type.テンプレート編」に行ってきたのですが、せっかく作った（ほとんどのカスタムは講師の方が教えてくれたものだけど）テンプレートをバックアップしておきたかったので調べました。

##MT管理画面からバックアップ

### 1. 管理画面＞ツール＞テーマのエクスポート

### 2. 出力形式を選ぶ

- テーマディレクトリへのインストール
- ZIP形式アーカイブでダウンロード

今回はレンサバの情報を知らないので、ZIPでダウンロード

### 3. 「テーマをエクスポート」をクリック

![mt.png](https://qiita-image-store.s3.amazonaws.com/0/13242/823f1e33-7ddf-9051-cd60-439ad7ec437b.png)
Rust de wasm de レイトレーシング

東京から福岡に一時帰ってきたのですが、主に粉を固めたもの
（ラーメン・うどん・ピザ・梅ヶ枝餅など）しか食べてない気がします。

前にRustでWebAssemblyを実験したやつを書いたんですが、その後、いろいろと
RustでWebAssemblyでできるようになったっぽいので、また少し実験をしてみました。

# 環境

Chrome 57.0.〜
MacOSX 10.10.5 Yosemite
Rust 1.15.0

※ Rustでwasmを吐き出す方法については省略します。

# 実験と結果

よくある球に線を飛ばして、当たった場所の色を表示するやつです。
ソースコードについては、[ここ](https://github.com/akatsuki-chan/rust-raytrace-wasm)においておきます。

Rust内でレイトレーシングで数値を計算しておいて、Javascriptに計算結果を返して
canvas内に表示しています。

<img width="539" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/54715/f479dd0a-b4b0-2228-a2d2-abee668c6ec6.png">

少し詰まったところとしては、RustからJSに配列を返すときにVec(vec![])じゃなくて、
slice([])のポインタで返す必要があったんですが、`vec.as_slice().as_ptr()`では、
JSで受け取ったあとの配列内の数値がおかしい場合がありました。

なので、あらかじめ固定幅のsliceを作っておいて、`clone_from_slice()`でコピーして、
ポインタを返してあげました。
まあ、メモリー確保とかしていると考えると当たり前なのかな・・・？

# 感想

あまり凝ったことをしてないので、普通のJSと比べてWebAssemblyがすごく早いかどうかはわかりませんでした。
ただ、別言語をブラウザ内で実行できるのは便利かなと思います。（型チェックがあるし）

また、配列を受け渡ししたり、文字列を操作したりする場合は、
ポインタっぽい操作（Module._mallocとか）をしないといけないので、
そこら辺をゴニョゴニョできるRustとWebAssemblyは結構相性良いのかなーと思いました。
Kotlin 1.1で要素が空の時のaverage()が0.0を返す仕様からDouble.NaNを返すように変わった

　[Whats's New Kotlin 1.1](https://kotlinlang.org/docs/reference/whatsnew11.html)にも載っていないマイナーな変更。


　`Collection<T>`や`Array<T>`、`Iterable<T>`の拡張関数、[average](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/average.html)

　この関数の、要素が空の時の返り値がKotlin 1.1で変わりました。

　Kotlin 1.0では次のように、`0.0`を返します。

```
@Test
fun test1() {
    val result = emptyList<Int>().average()
    Assert.assertTrue(result == 0.0)
}
```

　Kotlin 1.1では、`Double.NaN`を返します。

```
@Test
fun test1() {
    val result = emptyList<Int>().average()
    Assert.assertTrue(result.isNaN())
}
```

　Issueはこちらの[KT-15399](https://youtrack.jetbrains.com/issue/KT-15399)。

> Iterable.max() and Iterable.average() have different behavior when run on empty collections; max() returns null, but average() returns zero. These should have the same behavior. I believe that returning null is the correct behavior, since the average of "nothing" is not "zero".

　私個人の意見としてはこの方が言っている通り、`average`も要素が空の時は`null`を返すべきだと思います。ただ、それだと返り値型を`Double?`に変更しないといけないので破壊的な変更になってしまいます。そのためKotlin 1.1の変更では、`Double.NaN`にしたのでしょうかね？


　変更コミットは[こちら](https://github.com/jetbrains/kotlin/commit/01f53d01735269654d4e8157f956e9c3a9eb6994)。`Iterable<T>`、`Array<T>`、`Collection<T>`、`Sequence<T>`の`average()`の実装が変更されています。

　[ChangeLog](https://github.com/JetBrains/kotlin/blob/94b261d70124025194afdeb27bd1c83873cd370d/ChangeLog.md)には載ってましたね。
郵便番号検索APIを公開してみた

## はじめに
以前に作った[郵便番号検索番号API](http://qiita.com/imunew/items/85af754703266ec1c592)を今回、公開してみました。

もし、良かったら使ってみてください。
http://api.includes.tech/

で、今回はAPIを公開するまでにしたことを紹介します。

## `API Gateway`で作成したAPIにカスタムドメインを割り当てる
2017年3月に、API GatewayがACM (AWS Certificate Manager)に対応したようで、[Developers.IO](http://dev.classmethod.jp/)にて紹介されています。

- [【新機能】Amazon API GatewayがACM (AWS Certificate Manager)に対応。簡単に独自ドメインAPIがSSL化。 ｜ Developers.IO](http://dev.classmethod.jp/cloud/aws/amazon-api-gateway-integrates-acm/)

基本的には、この記事にあるとおり進めていくと、カスタムドメインかつSSLでAPIをホストすることができます。

## 紹介ページの作成とデプロイ
APIを公開しても、紹介しないことには、誰にも使ってもらえないので、ページを作成して、S3に静的ウェブサイトホスティングしてみました。

### ビルド周りの技術スタック
Webpack + babel + Vue.js だけで乗り切れるかと思ったんですが、CSS周りが上手いことセットアップできずに、結果、gulp + gulp-webpack で連携するようにしました。

- Webpack
- babel
- gulp
- gulp-sass
- gulp-webpack

Vue.jsのビルドがうまく行かなかったので、CDNから利用するようにしました。

```
<script src="//unpkg.com/vue@2.2.6/dist/vue.min.js"></script>
```

### Bootstrap4 + Font Awesome
CSSフレームワークをどれにするか相当迷ったんですが、結果、[Bootstrap4](https://v4-alpha.getbootstrap.com/)を使うことにしました。
Bootstrap3を使ったことがあれば、違和感なく使えると思います。
これも基本CDNから利用しています。
[Font Awesome](http://fontawesome.io/)はソースをダウンロードして、gulpでビルドするようにしました。

### Vue2 + jQuery3
実装のポイントをざっとまとめると、下記のようになります。

- APIごとにVueコンポーネントを作成
- テンプレートと実装をひとまとまりに
- APIコールはVueインスタンス側で実行
- 子コンポーネントにAPIのレスポンスをセットする
- AJAXはjQuery3を使用

### デプロイ
npmの[s3-deploy](https://www.npmjs.com/package/s3-deploy)をインストールし、`npm run`で実行します。
既にAWSの認証情報（`~/.aws/credentials`）が設定してあれば、リージョンとバケット名を指定するだけでS3にデプロイできるので大変便利です。

## おわりに
API周りは、AWSの機能を組み合わせるだけで、簡単にセットアップできたので非常にスムーズでした。
一方でWebページの作成はあまり慣れていないせいか、ビルドツール周りでつまづき、さらに、Vueのコンポーネントに苦しみました。
やっぱり手を動かして、試行錯誤して作り上げていく作業は楽しいですな。
ではでは。
Markdownが苦手（GitHub)

マークダウンはサービスによって方言があるのがつらいっす。ちなみにQiitaの記法もはてな記法もちゃんとわかってません。必要な時にいちいち調べたりして時間を無駄にしています。
GitHubに関してはプッシュした後にreadme.mdが思ったようにならなくて、readmeを更新するためだけに何度もコミット→プッシュを繰り返してます。
さすがに面倒なので、書くときの注意点を随時メモしていこうと思います。

## 見出し
\#の数で見出しレベルが決まる。\#のあとに半角スペースが必須。（Qiitaの場合は半角スペースなくても見出しにしてくれる）

## 改行
半角スペースを二つ行末につけるとbrタグ。（正直書いてて気持ち悪い）
空行を一つ開けると段落となる。行間が開く。

##　表
セルは | で区切る。| と中のテキストの間には半角スペースが必要っぽい。
2行目にハイフン3つ以上の記号しか入っていないセルを用意して、テキストの揃えを指定しないと表にしてくれない。
あと、1行目は必ず見出しのセル(tr)にしないといけないのかも。よく分からん。

```
| 見出し1 | 見出し2 | 見出し3 |
|---|---:|:---:|
| 区切りのハイフンは3つ以上。 | :の位置でtext-alignが決まる | 両端は中央揃え |
```

#とりあえず今日はここまで。
ISOとかで標準化してくれたら学習コスト少なくて済むのになあ。つぶしの利かないルールを覚えるのはストレスっす。いっそhtmlで書かせてくれ…

#参考URL
[Markdown-Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
Swiftのprint()をファイル名、行数、関数名を出力して分かりやすくする

```swift
func print(debug: Any = "",
           function: String = #function,
           file: String = #file,
           line: Int = #line) {
    var filename = file
    if let match = filename.range(of: "[^/]*$", options: .regularExpression) {
        filename = filename.substring(with: match)
    }
    Swift.print("Log:\(filename):L\(line):\(function) \(debug)")
}

```

使い方

```swift
    override func viewDidLoad() {
        super.viewDidLoad()
        print() // Log:ViewController.swift:L27:viewDidLoad()
        print(debug: "Hello.") // Log:ViewController.swift:L28:viewDidLoad() Hello.
    }
```

ファイル名、行数、関数名が表示されて便利
WindowsからCentOSへSSH公開鍵認証

SSH公開鍵認証でログインする際、hostOSがwindowsの場合はTeraTermやPuTTYを使うのが代表的らしいですが、
Git Bashを使ってWindowsからvirtualbox上のCentOSへログインする方法を書きます。
また、[フォルダー共有](http://qiita.com/wslife/items/946acbf7b0f043887e64)、[ネットワーク設定](http://qiita.com/wslife/items/896f3e9187f60aea7c96)済みであるとして話を進めます。

##環境
- host : windows10 (Git Bashを使用)
- guest : centos7

#鍵生成
今回はRSA暗号の鍵を生成します。

```:GitBash
$ ssh-keygen -t rsa -f key  #-fで鍵のファイルの名前を指定
```
key(秘密鍵)とkey.pub(公開鍵)が生成されます。
公開鍵を共有フォルダーに移動させます。
間違えて秘密鍵を共有しないように！

#鍵の配置

```:CentOS
$ pwd
/home/user
$ mkdir .ssh
$ cat share_folder_name/key.pub >> .ssh/authorized_keys
$ chmod 700 .ssh
$ chmod 600 .ssh/authorized_keys
```
#sshd_configの編集
sshd_configの編集はroot権限で行ってください。

```:CentOS
# vi /etc/ssh/sshd_config

PasswordAuthentication no

# systemctl restart sshd
```

#SSH公開鍵認証でログイン

```:GitBash
$ ssh -p port_number -i ~/path/key [ user@localhost | user@IPv4address ]
```
`[user@localhost]$`みたいなコマンドプロンプトが出てくれば、成功です！！
初回は警告が出るかもしれないですが、`yes`とすれば大丈夫です。

##最後に
パスワードを使うよりも公開鍵認証でログインするほうがセキュリティ上望ましいので、公開鍵認証を使用するようにしてください。
今回はSSH公開鍵認証に焦点を当てましたが、その他のセキュリティ面の基本設定は[こちら](https://wiki.centos.org/HowTos/Network/SecuringSSH?highlight=%28network%29%7C%28ssh%29#head-269bff20ef58d0317e9e222927e738872730f713)を参考にしてください。

#参考
- https://wiki.centos.org/HowTos/Network/SecuringSSH?highlight=%28network%29%7C%28ssh%29#head-269bff20ef58d0317e9e222927e738872730f713
Linuxでループバック・デバイスを扱う

## ループバック・デバイスとは
```
一般的なファイルを，あたかもハード・ディスクなどのブロック型デバイスであるかのように扱うための機能です。
パソコン上でイメージ・ファイルを直接操作したい場合などに使います。「ループ・デバイス」とも呼ばれます。 
```
http://itpro.nikkeibp.co.jp/article/Keyword/20080118/291396/?rt=nocnt

## Linux上での基本的な操作
### 作成

```
# ディスクイメージを作成
dd if=/dev/zero of=loop1.img bs=1M count=100

# 作成したイメージを/dev/loop0と関連付ける
sudo losetup /dev/loop0 loop1.img 

# フォーマット
sudo mkfs.ext4 /dev/loop0

# マウント
sudo mount -t ext4 /dev/loop0 /mnt
```

### 削除
```
sudo losetup -d /dev/loop0
rm loop1.img
```

## ループバック・デバイスの活用
### ISOイメージの中を確認する

```
sudo mount -o loop /path/to/iso_image /mount
```

この後は、通常のファイルのようにISOイメージ内のファイルにアクセスできる。

### LVM検証
実際にHDDなどを追加しなくても、ループバック・デバイスを使うことでpvcreateなどを実行することができる。

その他にもブロック型デバイスを用いた検証の際は、役立つシーンが多そうだ。

## 参考
 * 『Linux のループデバイスを使ってみる』（http://blog.amedama.jp/entry/2015/09/22/002201）
DjangoでOauth認証をしたあとにTwitter APIを叩く

# 発端
- TwitterのクライアントをDjangoで作ろうと思った時にOauth認証を用いてTwitterでログインを実装する記事はたくさんありました

- http://qiita.com/y-tsutsu/items/4c9edec8fbefb3116bf6
- http://qiita.com/ariarijp/items/2d63e4fe69be3b64998d
- など

- しかし、私がやりたかったことはOauth認証をしたときに発行されたoauth_tokenとsecretを用いてTwitterAPIを叩くことでした
- ググり方が悪いのか記事を見つけることが出来ず悪戦苦闘していましたが終止符を打つ事ができたので報告がてら記事にします
- `social-auth-app-djangoというライブラリを使わせていただきました


# DjangoでOauth認証をすると何が起こるか
- Twitterのサイトから戻ってきたときのログを見てみると`/complete/twitter`というパスにoauth_tokenとsecretがクエリとして追加されGETリクエストが行われていることがわかります
- 当初はこの`complete/twitter`というパスにアクセスが行われたときに走るメソッドをオーバーライドかなにかするものだと思っていたのですが違うようです
- DjangoでOauth認証をするとUserモデルのオブジェクトが生成されます
- `host/admin`からスーパーユーザでログインしユーザ管理を見てみるとたしかにTwitterのscreennameでユーザが生成されていました
 - あれ？oauth_tokenは？
- `SOCIAL_DJANGO`の`User social auths`に居ました

<img width="314" alt="qiita0000.png" src="https://qiita-image-store.s3.amazonaws.com/0/45373/851fef27-3983-94c5-bcb7-42a5aba9e169.png">

- どうやらUserSocialAuthモデルを参照すればいいようです
- social_djangoのモデルとしてUserSocialAuthが存在するので

```py3

from social_django.models import UserSocialAuth
UserSocialAuth.objects.get(クエリ).access_token
```

でoauth_tokenとsecretが含まれている辞書が取得できますのでTwitterAPIを叩くことができます
Windows環境で環境変数の設定とコマンドの実行を1行で行う


MacやLinux系の環境であれば、以下のようにして一時的な環境変数を設定し、続けて目的のコマンドを実行することができます。

```
# HOGEに123を設定してからirbを実行する。それからirb内でHOGEの値を取得する
$ HOGE=123 irb
irb(main):001:0> ENV['HOGE']
=> "123"
irb(main):002:0> exit

# HOGEは一時的な値なので、コマンドが終了すると無効になる
$ irb
irb(main):001:0> ENV['HOGE']
=> nil
```

これと同じようなことをWindows環境でやるとこうなります。

```
> (set HOGE=123) && irb
irb(main):001:0> ENV['HOGE']
=> "123"
```

ただし、MacやLinuxとは異なり、irbが終了しても同じコマンドプロンプト内ではHOGEの値が有効なままになっているので注意が必要です。

```
> irb
irb(main):001:0> ENV['HOGE']
=> "123"
```

僕が調べた限りではこういう方法しか見つからなかったのですが、もっといい方法をご存知の方がいたら教えてください！
WebDriverManagerを使用してgekcodriverを自動インストール、groovyでgeb実行する


[WebDriverManagerを使用してgeckodriver(SeleniumのWebDriver)を自動インストールする方法 - Qiita](http://qiita.com/kazuki43zoo/items/71f4c09e644b45a4002c)
[GitHub - bonigarcia/webdrivermanager: Automatic Selenium WebDriver binaries management in runtime for Java](https://github.com/bonigarcia/webdrivermanager)

上記を見てやってみた。

* `io.github.bonigarcia:webdrivermanager:1.6.1` を grab する
* `org.openqa.selenium.firefox.FirefoxDriver` を import
* 実行前にドライバ読み込み

`groovy google_search.groovy` 実行で普通に動いた。

```groovy:googlejp_search.groovy
@Grab('org.gebish:geb-core:1.1.1')
@Grab('org.seleniumhq.selenium:selenium-firefox-driver:3.3.1')
@Grab('org.seleniumhq.selenium:selenium-support:3.3.1')
@Grab('io.github.bonigarcia:webdrivermanager:1.6.1')
@GrabExclude('org.codehaus.groovy:groovy-all')

import geb.Browser
import geb.navigator.NonEmptyNavigator
import org.openqa.selenium.*
import org.openqa.selenium.remote.DesiredCapabilities
import org.openqa.selenium.firefox.FirefoxDriver

// https://github.com/bonigarcia/webdrivermanager
import io.github.bonigarcia.wdm.FirefoxDriverManager

DesiredCapabilities capabilities = DesiredCapabilities.firefox()
capabilities.setCapability("marionette", true)
capabilities.setCapability("timeoutInSeconds", (long)60)

// ドライバ読み込み
FirefoxDriverManager.getInstance().setup();

/*
* brew install geckodriver してから以下を読み込んでいたが、必要がなくなった。
* System.setProperty("webdriver.gecko.driver", "/usr/local/bin/geckodriver")
* /

Browser browser = new Browser(driver:new FirefoxDriver(capabilities))
browser.driver.manage().window().size = new Dimension(1200,900)

browser.with {
    go "https://www.google.co.jp"
    waitFor { title == 'Google' }
    $('input#lst-ib').value("けものフレンズ")
    $("input", name: "btnK").click()
}
```

### 2018/12/20 追記

`FirefoxDriverManager.getInstance().setup()` は、WebDriverManager の 3.x から使えなくなっていた。
新しい書き方は、 `WebDriverManager.firefoxdriver().setup()` と書く。

[WebDriverManager as Java dependency | bonigarcia/webdrivermanager](https://github.com/bonigarcia/webdrivermanager#webdrivermanager-as-java-dependency)

```groovy
import io.github.bonigarcia.wdm.WebDriverManager

// ドライバ読み込み
WebDriverManager.firefoxdriver().setup()
```
Love Your Project： TAIGA簡単インストール (アジャイル・プロジェクト管理ツール)

[![TAIGA簡単インストール](http://img.youtube.com/vi/jgQFivfBi3U/0.jpg)](http://www.youtube.com/watch?v=jgQFivfBi3U)
【↑クリックで動画再生】
-----

# TAIGAのDockerイメージを利用して1行でインストール。  
ユーザ数やプロジェクト数の制限はなく、すべての機能が利用可能です。（リアルタイム更新も対応）

※[TAIGA(taiga.io)](https://taiga.io/): オープンソースで無料のアジャイル開発者向けのプロジェクト管理プラットフォーム。  

-----

# 1.特徴
* エピック・ユーザストーリ・スプリント・タスクボード・かんばん・課題・Wiki
* シンプルで使いやすい
* リアルタイム更新に対応
* 日本語に対応

-----

# 2.インストール

```
docker run -d -p 80:80 -t -i -h taiga --name taiga accon/taiga
```

※実行にはDockerが必要です。Dockerのインストールは[Docker公式](https://www.docker.com/)をご参照ください。

-----

## 2.1.初回起動時にTAIGAの構築が行われます

[http://localhost/install.html](http://localhost/install.html)

↑にアクセスしインストール状況を確認。  
PROGRESS_[INSTALLATION_COMPLETE]が表示されたらインストール完了です。

-----

# 3.利用開始

[http://localhost](http://localhost)

-----

## 3.1.ユーザ作成と日本語の設定

* ユーザの作成：右上の「Sign up」から行います
* 日本語化：ユーザ作成後、ログインを行い右上のアカウントの「Edit profile」を実行し「Language」を日本語の設定

※初期ユーザのadminのパスワードは「123123」。必ずパスワードの変更を。

-----

## 3.2.リアルタイム更新の確認

[上の動画をご確認ください](https://youtu.be/jgQFivfBi3U)

-----

# 4.Docker「TAIGA」コンテナについて

* [Dockerfileのコードはこちら(GitHub)](https://github.com/maemori/accon/tree/master/docker/taiga)
* [Dockerfile一式のダウンロード](https://kurobuta.jp/download/get/19)

-----

## 「TAIGA」コンテナの構成要素

 * taiga-front : フロントエンドサービス。anglejsとcoffeescriptで構築されたフロントエンド関連のコードで構成されています。
 * taiga-back : バックエンドサービス。djangoとpython3を使って構築されたapiで構成されています。
 * taiga-events : フロントエンドをリアルタイム更新するためのサービス。WebSocketサーバーとして動作し、バックログ、タスク・ボード、かんばん、課題をリアルタイムに更新します。
 * taiga-celery : 非同期タスク実行サービス。webhooksやimport/exportなどを非同期で実行します。
VMware Horizon  NSX アップデート　

Horizonと合わせてNSXを利用されている場合、NSXはライフサイクルを維持するために定期的にアップグレードが必要です。NSXのアップグレードはとても簡単です。


#本記事でのバージョン
nsx 6.2.4->6.3.1 update 
GuestIntrospection = Yes

ESXi version 5.5.0 4179633
vCenter6 5112529

※アップグレード先のバージョンと各vmware製品の互換性をチェックする。
http://www.vmware.com/resources/compatibility/sim/interop_matrix.php
※NSXアップグレードのドキュメントを熟読する。（これが常に正、以下サマリ）
http://www.vmware.com/jp/support/support-resources/pubs/nsx_pubs.html
※この環境はコントローラ無し（DFWのみ）
※Trend Micro 社 Deep Securityを利用されている場合は下記もチェック。
https://success.trendmicro.com/solution/1060499

#NSX manager のアップデート
-nsx manager の管理画面にログイン（vSphere Web Clientではなく）
-Upgrade⇒Upgradeボタン⇒ファイルを選択⇒NSX6.3.1のアップグレードファイルを選択⇒Continue⇒アップロード中（数分まつ）⇒表示されたVesionを確認する、
sshのon/off、カスタマーエクスペリエンスのon/off を設定して、Upgradeボタンを押す
(数分まつ）
Last Upgrade status = Success となったら完了。
-nsx manager の管理画面に再度ログインして、バージョンを確認。
-vSphere web Client を開きなおす

#コントローラーのアップデート
-ドキュメント通り、割愛

#ESXi 側のアップデート

-DRSを手動モードへ変更
-あらかじめ１ホスト上のVMを全てvmotionで別ホストへ動かしておく。（GIはそのままでOK)
-vSphere web client ⇒NSX⇒インストール手順⇒ホストの準備⇒対象クラスタでアップグレードを利用可能と表示されていることを
確認。リンクをクリックする⇒アップグレードを続けてもよいですか⇒はい（クラスタに対する処理なので全台数アップグレードが発生することに注意。従い全停止が基本的な推奨）
-上記ホストの準備ができていませんのリンクをクリックして全て解決を実施
-メンテナンスモードになるのでホストを再起動する
-再起動後、表示がこのようになっているのを確認。※再起動したホストだけバージョンアップ完了となっている。ここでは192.168.111.70のホストを指す
![image](https://qiita-image-store.s3.amazonaws.com/0/169431/aaac08a7-77eb-152a-dfc8-2ba04ac4584d.png)

-VMをvMotionである程度戻す（あとはDRSで適当に）
-次のホストで同じように、、準備ができていませんのリンクをクリックして全て解決を実施。
![image](https://qiita-image-store.s3.amazonaws.com/0/169431/3538415d-6898-a808-9b94-9e681da49dbb.png)

以下繰り返し。最終的には以下のような状態になる。
![image](https://qiita-image-store.s3.amazonaws.com/0/169431/91a8181c-b5c5-0c97-b99f-debf8e725d2e.png)


#サービスデプロイ　（GI)のアップデート
-アップグレードを利用可能　をクリック⇒アップグレードマーク(青い矢印)をクリック⇒設定確認のうえ、今すぐアップグレード。
![image](https://qiita-image-store.s3.amazonaws.com/0/169431/aace292d-5c40-a9a7-56c3-e939ccce434d.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/169431/50346ba6-c93f-65bb-3055-f316002df7f6.png)


-インストール状態：成功しました。サービスステータス：接続中　になるまで待つ
![image](https://qiita-image-store.s3.amazonaws.com/0/169431/50168df3-4bc1-237b-916a-eb5f73fbb437.png)

※当該プロセスでは、新しいGIのDeploy、旧GIの削除が発生する。アップグレード中に２倍のGIが一時的に稼働されることに留意する。アップグレード完了後GIのVM名のナンバリングが増えるGuest Introspection(#). 

![image](https://qiita-image-store.s3.amazonaws.com/0/169431/0e0b110c-973e-f2b0-4372-7614e2155076.png)

完了。DRSを元に戻す。

念のため、FWが動作していることを確認しましょう。
DynamoDB Lambdaとの連携

DynamoDBに関する基本的な内容をまとめてみたものです。DynamoDBに関する、Web上にすでにある解説コンテンツをまとめたサイトの抜粋です。
[DynamoDB Lambdaとの連携] (https://www.techcrowd.jp/dynamodb/lambda/)

# [Amazon DynamoDBでAWS Lambdaを使用する] (https://www.techcrowd.jp/dynamodb/lambda/)
DynamoDBのStream機能を利用して、DynamoDBに対して行われた追加・更新・削除などの変更履歴を記録して、以下のような機能を実現する際には、DynamoDBに書き込み等がされた際に都度ある処理を実行させたいことが多くあります。
・クロスリージョンレプリケーション
・ゲームやSNS等のユーザの集計、分析などのための非同期集計
・ユーザが新しい写真をアップロードするとともに、友人のモバイルデバイスに自動的に通知する等

その処理の実現方法として便利なのが、DynamoDBのテーブルに対してLambda関数をトリガーとして設定する方法です。以下の仕組みでDynamoDBのレコード更新に対応してLambda関数が実行されます。
1. カスタムアプリケーションによって DynamoDB テーブルが更新
2. Amazon DynamoDB は項目の更新をストリームに発行
3. AWS Lambda はストリームをポーリングし、ストリームで新しいレコードを検出すると Lambda 関数を呼び出す
4. AWS Lambda は、Lambda 関数の作成時に指定した実行ロールを引き受けることにより、Lambda 関数を実行

# [AWS LambdaとDynamoDB Streamsを連携する手順] (https://www.techcrowd.jp/dynamodb/lambda/)
### 1. Lambda関数を作成
DynamoDB イベントを処理するために使用する Lambda 関数のサンプルコードが、さまざまな言語で提供されています。いずれかの言語を選択し、該当する手順に従ってデプロイパッケージを作成します(Lambda関数を作成して設定します)。Lambda 関数を作成したら、サンプルの DynamoDB イベントデータを使用し、その関数を手動で呼び出してテストしておきます。

### 2. DynamoDBストリームを作成し、それをLambda関数と関連づける

・ストリームが有効になった Amazon DynamoDB テーブルを作成
・AWS Lambda でイベントソースマッピングを作成
このイベントソースのマッピングは、DynamoDB ストリームを Lambda関数と関連付けます。このイベントソースのマッピングを作成すると、AWS Lambda はストリームのポーリングを開始します。
・エンドツーエンドエクスペリエンスのテスト
テーブルの更新を実行すると、DynamoDB はイベントレコードをストリームに書き込みます。ストリームをポーリングしている AWS Lambda は、ストリームで新しいレコードを検出し、イベントを Lambda 関数に渡して、ユーザーに代わって関数を実行することをテストして確認すればOKです。

# [DynamoDBとLambdaを連携させるユースケース] (https://www.techcrowd.jp/dynamodb/lambda/)
■DynamoDB Cross-region Replication
DBの内容を離れた場所にある複数のデータセンターにあるDBにコピーをいつも保持するというCross-region Replicationには、下記のようなニーズがあります。
・Disaster Recovery : 大地震などによりデータセンターに障害が発生した場合にでも、もうひとつのリージョンのDBに切り替えて機能提供を続けることを可能にする
・エッジ機能: いくつもの地域に拠点を多展開している大企業の場合、それぞれの拠点に近いデータセンターのDBへアクセスすることにより、一箇所のデータセンターへアクセスが集中する場合よりも高速なデータアクセスを提供することを可能とする

■DBへの書き込みに応じて値チェックをしつつ別テーブルを更新・プッシュ通知等を実施
DynamoDBの更新状況の監査ログをS3に保存する、ゲームのランキング集計を非同期に実施するなど、DBへの書き込みタイミングに、その都度、値チェックを行ったり、データのコピーを保存するなどの処理を実行させたいことがあります。
DynamoDB スループットと費用

DynamoDBに関する基本的な内容をまとめてみたものです。DynamoDBに関する、Web上にすでにある解説コンテンツをまとめたサイトの抜粋です。
[DynamoDB スループットと費用] (https://www.techcrowd.jp/dynamodb/fee/)

# [プロビジョンドスループット] (https://www.techcrowd.jp/dynamodb/fee/)
DynamoDBは、テーブル単位に読み書きのスループットを指定することができます (プロビジョニングされたスループット)。

読み込みと書き込みのスループットはそれぞれ個別に設定します。

### Read Capacity Unit (RCU)	
・1秒あたりの読み込み項目数✖️項目のサイズ
・結果整合性のある読み込みをする場合スループットが２倍

### Write Capacity Unit (WCU)	
・1秒あたりの書き込み項目数✖️項目のサイズ
・1KBを下回る場合には繰り上げられて計算

各 DynamoDB テーブルには、プロビジョニングされた読み込みスループットと書き込みスループットがあり、テーブルに関連付けられています。無料利用枠を超える場合は、そのスループット容量に対して 1 時間ごとに課金されます。

テーブルにリクエストを送信するかどうかにかかわらず、テーブルにプロビジョニングしたスループット容量に対して 1 時間ごとに課金されることに注意してください。テーブルのプロビジョニングされたスループット容量を変更するには、AWS Management Console または UpdateTable API を使用します。

さらに、DynamoDB では、インデックス化されたデータの保存料金として標準的なインターネットデータ転送料金が別途かかります。

# [費用の構成] (https://www.techcrowd.jp/dynamodb/fee/)
DynamoDBの費用は、下記の3つの合計金額となります。

- プロビジョニングされたスループットの料金
- ストリームの読み込みリクエストの料金
- ストリームの料金

# [運用費用を節約する方法] (https://www.techcrowd.jp/dynamodb/fee/)
DynamoDBのコストボトルネックはスループット量になるためにスループットの増大に注意し、DynamoDBの特性に応じた用途で利用するのが最善ですが、そうではない場合でもテーブルをカラムごとの利用頻度によって分割したり、アイテムごとにキャッシュしてスループット消費を抑える対策も効果を期待できます。
DynamoDBデザインパターン

DynamoDBに関する基本的な内容をまとめてみたものです。DynamoDBに関する、Web上にすでにある解説コンテンツをまとめたサイトの抜粋です。
[DynamoDBデザインパターン] (https://www.techcrowd.jp/dynamodb/designpattern/)

# [DynamoDB + AWS Lamda = DynamoDB Triggers] (https://www.techcrowd.jp/dynamodb/designpattern/)
Amazon DynamoDB は AWS Lambda と統合されているため、トリガー（DynamoDB Streams 内のイベントにすばやく自動的に応答するコード）を作成できます。 トリガーを使用すると、DynamoDB テーブル内のデータ変更に対応するアプリケーションを構築できます。

テー ブルで DynamoDB Streams を有効にした場合、書き込む Lambda 関数にストリーム ARN を関連付けることができます。 テーブルの項目が変更されるたびに、新しいストリームレコードがテーブルのストリームに表示されます。AWS Lambda はストリームをポーリングし、新しいストリームレコードを検出すると Lambda 関数を呼び出します。

Lambda 関数は、通知の送信やワークフローの開始など、指定したアクションを実行できます。たとえば、Lambda 関数を記述すると、各ストリームレコードを Amazon Simple Storage Service (Amazon S3) などの永続的ストレージにコピーしたり、書き込みアクティビティの永続的な監査証跡をテーブルに作成したりすることが簡単にできます。

# [DynamoDB Cross-region Replication] (https://www.techcrowd.jp/dynamodb/designpattern/)
Amazon DynamoDB では、AWS リージョン間で DynamoDB テーブルを自動的にレプリケートするクロスリージョンレプリケーションをサポートしています。クロスリージョンレプリケーションを使用すると、グローバル に分散配置されたアプリケーションを構築する際に、低レイテンシーのデータアクセス、高いトラフィック管理機能、災害復旧とデータ移行の簡単化を実現できます。

# [AWS Mobile SDKと2 Tier アーキテクチャ] (https://www.techcrowd.jp/dynamodb/designpattern/)
AWSのモバイルアプリケーション用のSDK “AWS Mobile SDK”を用いることにより、仮想サーバ(EC2)を介さずに、直接モバイルアプリケーションからDynamoDBを利用することも可能です。
DynamoDB Streams

DynamoDBに関する基本的な内容をまとめてみたものです。DynamoDBに関する、Web上にすでにある解説コンテンツをまとめたサイトの抜粋です。
[DynamoDB Streams] (https://www.techcrowd.jp/dynamodb/dynamodb-streams/)

# [ストリーム機能の概要] (https://www.techcrowd.jp/dynamodb/dynamodb-streams/)
テーブルでストリームを有効にすると、DynamoDB はテーブル内のデータ項目に加えられた各変更に関する情報をキャプチャします。

アプリケーションがテーブル内の項目を作成、更新、または削除するたびに、DynamoDB Streams は変更された項目のプライマリキー属性を付けてストリームレコードを書き込みます。ストリームレコードには、DynamoDB テーブル内の単一の項目に加えられたデータ変更についての情報が含まれています。追加情報（変更された項目の前後のイメージ）をキャプチャするようにストリームを設定することもできます。

・DynamoDBに行われた追加、更新、削除の変更履歴を保持しとりだし可能

・過去２４時間以内にそのテーブルのデータに対して行われた変更のストリームすべてにアクセス可能で、２４時間経過したストリームデータは消去され、DynamoDB Streamsの容量は自動的に管理されます。

#[ストリームの有効化] (https://www.techcrowd.jp/dynamodb/dynamodb-streams/)
新しいテーブルでは、そのテーブルの作成時にストリームを有効にできます。既存のテーブルでストリームを有効または無効にしたり、ストリームの設定を変更することもできます。DynamoDB Streams は非同期的に動作するため、ストリームを有効にしてもテーブルのパフォーマンスに影響は与えません。

# [ストリームの読み込みと処理] (https://www.techcrowd.jp/dynamodb/dynamodb-streams/)
ストリームを読み込んで処理するには、アプリケーションが DynamoDB Streams エンドポイントに接続して API リクエストを発行する必要があります。

ストリームは、ストリームレコードで構成されています。各ストリームレコードは、ストリームが属する DynamoDB テーブル内の 1 件のデータ変更を表しています。各ストリームレコードには、レコードがストリームに発行された順序を反映したシーケンス番号が割り当てられます。

ストリームレコードは、グループ（つまり、シャード）に整理されます。各シャードは、複数のストリームレコードのコンテナとして機能し、これらのレコードへのアクセスと反復処理に必要な情報が含まれています。シャード内のストリームレコードは 24 時間後に自動的に削除されます。

シャードはエフェメラルであり、必要に応じて自動的に作成および削除されます。また、任意のシャードは複数の新しいシャードに分割できます。これもまた自動的に行われます (親シャードが 1 つの子シャードのみを持つ場合もあります)。アプリケーションが複数のシャードからレコードを並列処理できるように、シャードは親テーブルで高レベルな書き込みアクティビティに応じて分割される場合があります。
ストリームを無効にすると、開かれているシャードは閉じられます。

# [ストリームの順番保証] (https://www.techcrowd.jp/dynamodb/dynamodb-streams/)

DynamoDB Streamsでは、DynamoDBのテーブルの特定の項目(item)に対して行われた変更は、正しい順序で表示されます。異なる項目(item)に対して行われた変更は、受信した順序とは異なる順序で DynamoDB ストリームに表示されることがあります。

# [ストリーム機能の使い所] (https://www.techcrowd.jp/dynamodb/dynamodb-streams/)
DynamoDB Sreamsの使い所は、クロスリージョンレプリケーションやゲーム・ソーシャルサイト等でのユーザの集計・分析などのための非同期処理などとなります。

あるいはユーザが新しい写真をアップロードするとすぐにサークル内のすべての友人のモバイルデバイスに自動的に通知するモバイルアプリケーションの構築などが考えられます。
DynamoDBのセキュリティ

DynamoDBに関する基本的な内容をまとめてみたものです。DynamoDBに関する、Web上にすでにある解説コンテンツをまとめたサイトの抜粋です。
[DynamoDBのセキュリティ] (https://www.techcrowd.jp/dynamodb/security/)

# [FGAC（Fine Grained Access Control）] (https://www.techcrowd.jp/dynamodb/security/)
DynamoDB と AWS Identity and Access Management (IAM)との統合により、組織内のユーザーのアクセスを細かく管理することもできます。

FGAC（Fine Grained Access Control）とは、DynamoDB テーブルの所有者がテーブル内のデータに対して詳細なコントロールを行うための機能です。具体的には、テーブル所有者は誰（呼び出し元）がテーブルのどの項目や属性にアクセスでき、どのようなアクション（読み込み/書き込み）を実行できるかを指定できます。FGAC は、AWS Identity and Access Management（IAM）と組み合わせて使用されます。セキュリティ認証情報および対応するアクセス権限の管理は、IAM で行います。

# [DynamoDBがセキュリティ、アクセス制限を実現する仕組み] (https://www.techcrowd.jp/dynamodb/security/)
FGACを利用する場合には、アプリケーションはセキュリティトークンをリクエストします。このトークンは、特定の DynamoDB テーブル内の特定の項目のみへのアクセスをアプリケーションに認可するものです。

このトークンを使用して、エンドユーザーアプリケーションエージェントは DynamoDB に対して直接リクエストを発行します。このリクエストが受信されると、リクエストの認証情報が DynamoDB によって検証されます。リクエストの認証には IAM が使用され、そのユーザーにどの操作を許可するかが決定します。ユーザーのリクエストが許可されない場合は、データへのアクセスが FGACによって阻止されます。

FGAC が効果を発揮するのは、DynamoDB テーブルを使用して情報をトラッキングするアプリケーションにおいて、エンドユーザー（またはエンドユーザーの代理となるアプリケーションクライアント） がテーブルの読み取りや変更を、中間層サービスなしで直接行う必要がある場合です。

# [セキュリティ、アクセス制限を利用するために発生する追加料金] (https://www.techcrowd.jp/dynamodb/security/)
FGAC は追加料金なしで使用できます。通常どおり、お支払いいただくのは DynamoDB テーブルに関連してプロビジョニングされたスループットとストレージの料金のみです。
ADDA > local_nRows > 27984 for -grid 25 

```txt:My_Environment
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
gcc (Ubuntu 4.8.4-2ubuntu1~14.04.3) 4.8.4 
(also for g++)
GNU bash, version 4.3.8(1)-release (x86_64-pc-linux-gnu)
ADDA v.1.3b6
```

This article is related to [ADDA (light scattering simulator based on the discrete dipole approximation)](https://github.com/adda-team/adda/).

Related: [ADDA > runtime parameter > grid > Sets dimensions of the computation grid](http://qiita.com/7of9/items/9537252c79f5318d8f55)
Related: [ADDA > chp_time > used to trigger SaveIterChpoint() > chp_time / chpoint](http://qiita.com/7of9/items/4966f131d405cd89ee07)

`pvec[]` in the checkpoint file has the length of 27984 for the following run:

```
$ ./adda -grid 25 -chp_type normal -chpoint 1s > log
```

I had a question how the 27984 is obtained for the grid 25 option.
The answer was quickly obtained:
[the reason why [local_nRows] is 27984 for nx, ny, nz = (25, 25, 25) @ ADDA question and answers](https://groups.google.com/forum/#!topic/adda-discuss/8GFMbdhhGHg)

For the `-grid 25` option, I have 

```
---
Total number of occupied dipoles: 9328
---
```

Then, interaction matrix has 3 for each of the dipoles.

9328 * 3 = 27984.
C++のベンチマーク用のライブラリであるgoogle/benchmarkを試す


# 環境
OS: Ubuntu 16.04 LTS
google benchmark v1.10

# サンプル
今回作成したサンプルは以下のところにある。
https://github.com/shu65/googlebenchmark_sample/tree/v1.0.0


# google benchmark のインストール

```bash
git clone https://github.com/google/benchmark googlebenchmark
cd googlebenchmark
git checkout v1.1.0 # versionの指定
cmake -DCMAKE_BUILD_TYPE=Release . # releaseでコンパイルする
make 
sudo make install
```

上記のようにすると以下のところにインストールされる。
ライブラリ： /usr/local/lib/libbenchmark.a
ヘッダー： /usr/local/include/benchmark

# サンプルについて
以下のところに、今回作成したサンプルがある。
https://github.com/shu65/googlebenchmark_sample/tree/v1.0.0

この中の./src/sample1.cppがgoogle benchmarkのサンプルとなっている。
githubでは以下のコードである。
https://github.com/shu65/googlebenchmark_sample/blob/v1.0.0/src/sample1.cpp

このコードの中では、測定したい関数を複数回実行するというstatic関数を定義し、BENCHMARKというマクロでこれらのstatic関数をベンチマーク実行時に走らせる関数として登録している。

今回、ベンチマーク時に走るstatic関数は以下の2つ。

- StringCreationBenchmark()
- StringCopyBenchmark()

そして、最後のBENCHMARK_MAINというマクロでベンチマークを実行するmain関数を定義している。

# サンプルのコンパイルと実行
以下のようにサンプルをコンパイルし、実行する。

```bash
git clone git@github.com:shu65/googlebenchmark_sample.git
cd googlebenchmark_sample
git checkout v1.0.0
make clean 
make
./sample1
```

このようにコンパイルして実行すると、以下のようにベンチマークの結果が出力される。

```
Run on (4 X 2501 MHz CPU s)
2017-04-02 07:44:27
---------------------------------------------------------------
Benchmark                        Time           CPU Iterations
---------------------------------------------------------------
StringCreationBenchmark          8 ns          8 ns   87576122
StringCopyBenchmark             18 ns         18 ns   32842471
```

# 注意
以下のように何も実行しない場合、どれくらいのタイムになるかを測定した。

```cpp
#include <benchmark/benchmark.h>

static void BlankBenchmark(benchmark::State& state) {
  while (state.KeepRunning()) {
  }
}

BENCHMARK(BlankBenchmark);


static void PauseAndResumeBenchmark(benchmark::State& state) {
  while (state.KeepRunning()) {
          state.PauseTiming();
          state.ResumeTiming();
  }
}
BENCHMARK(PauseAndResumeBenchmark);

BENCHMARK_MAIN();
```

これの実行結果は以下の通り。

```
Run on (4 X 2501 MHz CPU s)
2017-04-02 12:40:49
---------------------------------------------------------------
Benchmark                        Time           CPU Iterations
---------------------------------------------------------------
BlankBenchmark                   8 ns          8 ns   82399045
PauseAndResumeBenchmark        628 ns        627 ns     977439
```

このため、私の環境では8 ns以下の実行時間のものはちゃんと測定できてない。
また、PauseTiming()とResumeTiming()を毎回呼び出すようなベンチマークの場合は、628 ns以下はちゃんと測定できない。

# まとめ
思ったよりもお手軽にベンチマークができるので、便利そう。
Djangoの始め方

[Django ドキュメント](https://docs.djangoproject.com/ja/1.10/)

# バージョン確認

```
$ python -m django --version
```

# プロジェクト作成

```
$ django-admin startproject mysite
```

# 開発用サーバ

```
$ python manage.py runserver
```

# アプリケーション作成

```
$ python manage.py startapp hoge
```
技術英語 > Speaking of counters, / Speaking of the devil,...

@ Introducing Python: Modern Computing in Simple Packages by Bill Lubanovic
(No. 3189 / 12833)

> **Speaking of counters**, the standard library has one that does the work of the previous example and more:

https://www.merriam-webster.com/dictionary/speak%20of
> to mention (a subject) in speech or writing 

上記の意訳「countersについて言及すると、標準ライブラリは前掲の例とそれ以上を行う機能を1つ持つ」

<hr>
関連して思い出したのは

> Speaking of the devil, 

https://en.wikipedia.org/wiki/Speak_of_the_devil

>  It is used when an object of discussion unexpectedly becomes present during the conversation. 

噂をすればなんとやら。

「泣いた赤鬼」の話をしている最中に該当の赤鬼が登場したとすると以下のような感じか（間違っているかもしれない）。
Speaking of the devil, the Red Demon turned up.

http://qiita.com/7of9/items/f2ca2be9ac2446de60e4