OmniAICreator/Qiita-1.07M huggingface dataset:
Node.js の REPL で、変数のバインドとHistoryの両立で快適になった

# 動機

Node.jsには `node` とターミナルで打ち込めばREPLを開始できる。

が、そこそこの規模のプロジェクトで、 `rails c` 感覚で使おうとすると、毎回モジュールの読み込みをするのが面倒。

Railsなら

```bash
$ rails c
pry > User.first.email
=> "hoge@example.com"
```

みたいになるのに、これを `node` でやろうとすると

```bash
$ node
> const User = require('./models').User
> User.findOne.then(user => console.log(user.get().email))
"hoge@example.com"
```

という具合になる。 `require...` を省きたい。

# 問題

Node.js にはREPLという機能があり、これを使えば実現できる。

```js:bin/console
const replServer = require('repl').start('>>> ')
replServer.context.User = User
```

このようなファイルを作っておけば

```bash
$ bin/console
>>> User.findOne().then...
```

とできる。

https://nodejs.org/api/repl.html

ただ、ここで一つ問題がある。

REPLの履歴を呼び出せない。

普段、履歴に頼る生活をしているので、これは困る。

Node.jsのIssueにもなっているが、解決されていない。理由はちゃんと読んでいないので不明。

https://github.com/nodejs/node/issues/5730

# 解決策

下記のファイルを置いてあげれば、 `rails c` とほぼ同様の挙動ができる。

```js:bin/console
#!/usr/bin/env node
const fs = require('fs')
const path = require('path')

const models = require('../api/models')
const User = models.User

const replServer = require('repl').start('>>> ')

replServer.context.User = User

const replHistoryPath = process.env.HOME + '/.node_repl_history'

fs.readFile(replHistoryPath, 'utf8', (err, data) =>
  data.split('\n').forEach(command =>
    replServer.history.push(command)
  )
)

replServer.on('exit', () => {
  fs.writeFile(replHistoryPath, replServer.history.join('\n'), err => {
    console.log(err)
    process.exit();
  })
});

// vim:set ft=js
```

肝心なのは `replHistoryPath` 以降で、起動時に読み出しと、終了時に書き出しを行っている。

これで開発が捗りそう。
An error occurred while installing rmagick

```

An error occurred while installing rmagick (2.16.0), and Bundler cannot
continue.
Make sure that `gem install rmagick -v '2.16.0'` succeeds before bundling.


```

怒られた。

調べると7系はダメで6系をじゃないとダメみたい。


```

brew uninstall imagemagick


brew unlink imagemagick


```

で既存のrmagickをアンインストール


リポジトリを指定してインストール

```

brew install https://raw.githubusercontent.com/Homebrew/homebrew-core/6f014f2b7f1f9e618fd5c0ae9c93befea671f8be/Formula/imagemagick.rb

```
metaタグについて調べたことメモ

metaタグについて理解が浅いと感じたので調べてみました。

#metaタグとは？
その文書自体について記述する際にmetaタグを使います。
HTML文書のmetaタグはheadタグの中で指定します。
属性は以下の４つがあります。

- charset属性
- name属性
- http-equiv属性
- content属性

それぞれの使い方を見ていきましょう。

###charset
文字コードの設定を行います。指定しないと文字化けが起こる事があります。
`<meta charset="UTF-8">`

###name属性
name属性で指定できる属性は次の7つです。それぞれを指定します。
- application-name
- author
- description
- generator
- keywords
- robots
- viewport

###http-equiv属性
- content-language：文書の主な言語の指定を行います。
- content-type：ファイルタイプや文字エンコーディングを指定します。
- default-style：デフォルトで適用するスタイルを指定します。
- refresh：別のURLへのリダイレクトやページの再読み込みの指定をします。

###content属性
name、http-equiv属性の値を指定します。
RでMendeleyのAPIを叩いてみる～ある論文の読者層を見る～

# Mendeley
Mendeleyという論文管理ツールがあるのですが、各論文に対していろいろな情報がデータベースとして保存されています。
APIも提供されているので、Rを使って論文に対する情報を抽出できるかやってみたいと思います。

# Mendeley APIのアクセストークン用の情報を手に入れる。
## Mendeleyの開発者ポータルにログイン
http://dev.mendeley.com/ から開発者ポータルにログインしてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/158368/d52c238b-7be0-a925-d6ff-df8da9768b99.png)

## MendeleyからアプリケーションIDとSecretを手に入れる
アプリケーションの管理画面に入れるので、適当にアプリケーション名を入れてアプリケーションIDとSecretを生成してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/158368/c7e9a95c-b358-7919-9325-c7f34ea68509.png)

# コード
## アクセストークン生成用の情報と論文Doi
```r
client_id <- "アプリケーションID"
client_secret <- "アプリケーションSecret"
doi <- "10.1021/acs.accounts.6b00479"

```
## パッケージ 
```r
require(httr)
require(rjson)
require(RCurl)
require(RColorBrewer)
require(optparse)
```
## アクセストークン生成
先ほどの情報からアクセストークンを生成をします。
調べたところ以下の流れはMendeleyの認証のうち、[Client credentials authorization flow](http://dev.mendeley.com/reference/topics/authorization_client_credentials.html)に当たるようです。
このトークンでは、ユーザーごとの情報は抜き出せず、アノニマスな情報だけを抜き出せる権限になるようです。
ユーザー毎の情報を抜き出す認証方法([Authorization code flow](http://dev.mendeley.com/reference/topics/authorization_auth_code.html))についてはまた今度出来たらと思います。~~良さげなサイトなどあれば教えてください。~~
書きました→[RでMendeleyからOAuth認証後、自分のライブラリ情報を抜き出す](http://qiita.com/kyusque/items/167483815168576fddea)

```r
basic_auth_credentials <- RCurl::base64(paste(client_id, client_secret, sep = ":"))
access_token_rsp <- POST('https://api.mendeley.com/oauth/token',
                        add_headers(
                          'Authorization' = paste("Basic", basic_auth_credentials),
                          'Content-Type' = 'application/x-www-form-urlencoded'
                        ),
                        body = 'grant_type=client_credentials&scope=all'
)

access_token <- content(access_token_rsp)$access_token


```
## Mendeley APIの作成
```
catalogue_url <- paste('https://api.mendeley.com/catalog?view=stats&doi=', curlEscape(doi), sep='')

doc_rsp <- GET(catalogue_url,
               add_headers(
                 'Authorization' = paste("Bearer", access_token),
                 'Content-Type' = 'application/vnd.mendeley-document.1+json'
               )
)

docs <- fromJSON(rawToChar(content(doc_rsp)))
```
## 返ってきたデータから必要な情報を抽出、プロット
```r
df <- data.frame(t(data.frame(docs[[1]]$reader_count_by_academic_status)))
colnames(df) <- c('readers')
par(mar=c(5,18,1,1), las=2)
barplot(df$readers, names.arg=row.names(df), horiz=TRUE, col=brewer.pal(n=15, name="Reds"))
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/158368/ac3dbe15-f1aa-e072-fc3c-44193a86706f.png)


# 参考
https://github.com/Mendeley/mendeley-api-r-example/blob/master/mendeley.R
JavaScript の == と === の違いを詳しくまとめてみる

## **はじめに**
**JavaScript** の **『 等しい 』** には **等しい** ```==``` と**厳密に等しい** ```===``` の2種類があります。

## **等価演算子 ```==```**


|左辺と右辺の型|データ型|評価基準|
|:-----------:|:------------:|:------------:|
|同じ|文字列・数値・論理型|単純に値が等しいか|
|同じ|配列・オブジェクト|参照先が等しいか|
|同じ|null・undefined|すべて true |
|異なる|文字列・数値・論理型|文字列・論理型を数値に変換して比較|
|異なる|オブジェクト|リテラルに変換して比較|

```JavaScript
console.log('5' == 5)  // true
console.log(1 == true) // true
console.log(['vue', 'angular', 'react'] == ['vue', 'angular', 'react'])  // false 参照先が等しくない
console.log('3.14e2' == 314) // true 浮動小数点により'3.14e2'→'314'
console.log('0x10' == 16) // true '0x10'が16進数表現とみなされる
```

**```==```** は値を等しいとみなせないか頑張ります。

## **厳密等価演算子 ```===```**

厳密等価演算子はデータ型を変換しません。

```JavaScript
console.log('5' === 5)  // false
console.log('3.14e2' === 314)  // false
console.log('0x10' === 16)  // false
```

等価演算子```==```で **true** が返っていたものが ```===``` ではいずれも **false** が返りました。
javaScriptの寛容さはアプリを開発する際には予期せぬバグを生み出すことがあるので比較は ```===``` で行ったほうが良いそうです。

**```'5' === 5```** が **false** になるのは文字列の５と数値５が異なるためです。
数値と文字列を比較する際は ```===``` で比較し明示的に型変換を行うことが一般的なようです。

```html:index.html
<input type="number" id="numbox">
<input type="button" id="btn" value="ボタン">
```

```JavaScript:script.js
window.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    const numbox = document.getElementById('numbox')
    const target = 5

    // 数値と文字列の厳密比較は必ずfalseが返るので数値に変換する
    console.log(target === Number(numbox.value))　// true 
  }, false)
}, false)
```

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/195024/87f1d271-e526-8ab4-2c26-d746bdb33889.png)



## **【おまけ】 switch 文は  === で比較される**

```JavaScript
const a = undefined
const b = null
console.log(a == b)  // true
console.log(a === b)  // false
switch (a) {
  case b:
    console.log('some')  // 	実行されない
    break
}

```

## **参考**

- [改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで- 山田祥寛](http://gihyo.jp/book/2016/978-4-7741-8411-1)
- [比較演算子 - MDN web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
Python2.x系でprint()を使う方法とPython2.x系とPython3.x系の両方で動くコードを書く


## はじめに
最近，Pythonを使って画像認識に挑戦しています．そこで問題になるのが，2系と3系の互換性のことです．
よく，コードをゴリ押しして実行してもなぜか上手く動かない...

それは，きっと2系と3系の文法が混じっているのでしょう...

以下の方法で解決できるかもしれません．

メモ書き程度に書いておきます．

## Python2.x系でprint()の文法を使う
おまじないをかけましょう！

```py
from __future__ import print_function
```

これで，

```py
print("テスト")
```

の文法が使えるようになります．

## Python2系とPython3系の両方でコードを動かすために
これも，おまじないをかけましょう！

```py
import six
```

これで問題は解決できます！
（でも，これだけでは両方では動きません．）
なぜ，「6」なのか？
それは，```2×3=6```だからだそうです！

次は，詳しくsixのパッケージを検証したいと思います．
【Java初心者の苦悩】Junitで実装してしまったテストしにくいコード

##とある日、こんなコードを書いてました

```java
@Inject
private Accessor accessor;

@Dependent
public class DataReader {

   String getData(String key) {

		String value = accessor.getByDate(key, new Date());

		return value;

	}
}	
```

###さあテストだぜ！　と思って書いたテストがこちら

```java
public class DataReaderTest {
	
	@Mock
	Accessor accessor;
	
	@InjectMocks @Spy
	DataReader dataReader;
	
	@Before
	public void setUp() throws Exception {
		MockitoAnnotations.initMocks(this);
	}

	@Test
	public void test() {
		when(accessor.getByDate(key, new Date())).thenReturn(now);
		assertThat(dataReader.getData("key0"), is("todayData"));
	}
}
```

#####しかし成功しない...と相談したところ、「これは成功しないよね、テストしづらいし。」ということで以下のように修正
#####Testの`when(accessor.getByDate(key, new Date())).thenReturn(now);`と実際に呼び出す`accessor.getByDate(key, getNow())`ではDate型の引数の値が変わってしまうため失敗していました

##修正後

```java
@Inject
private Accessor accessor;

@Dependent
public class DataReader {

   String getData(String key) {

		String value = accessor.getByDate(key, getNow());

		return value;

	}
	
	Date getNow() {
		return new Date();
	}
}
```

```java
public class DataReaderReaderTest {
	
	@Mock
	Accessor accessor;
	
	@InjectMocks @Spy
	DataReader dataReader;
	
	@Before
	public void setUp() throws Exception {
		MockitoAnnotations.initMocks(this);
	}

	@Test
	public void test() {
		Date now = new Date();

		//こちらでも良い
		//when(deviceOptionReader.getNow()).thenReturn(now);
		doReturn(now).when(deviceOptionReader).getNow();

		when(accessor.getByDate(key, now)).thenReturn(now);
		assertThat(dataReader.getData("key0"), is("todayData"));
	}
}
```

##戒め
メソッドの引数に直接Date型をnewするようなコードを書いてはならない
球面上の格子の作り方

球面上でいろいろシミュレーションしたくなった。

　たとえば、２次元平面上でシミュレーションするときには、ぼくらはよく周期境界条件という境界条件を課す。それは、こんなトーラス上で制限された運動を考えているのに等しい。
<img src="https://qiita-image-store.s3.amazonaws.com/0/188973/046be037-87b5-79eb-9e16-eae095102dda.png" width=30%>

周期境界条件はお手軽なので、ついやっちゃうんだけども、
やっぱり球面上でやりたい。やりたいんだ。

球面上で微分方程式を解くためには球面を格子に切らないといけないのだけども、適当に３次元極座標表示を使うと北極と南極に格子点が密集する。
<img src="https://qiita-image-store.s3.amazonaws.com/0/188973/a0c26f7a-ae55-db07-f1f5-94a225af9d55.png" width=20%>

格子点が密集すると、その部分は格子幅が小さくなるわけで、
そのままつかっちゃうと方程式の安定条件に引っかかって計算が吹っ飛ぶ。

そこで、球面上を綺麗に分布するように点を打ち、その点を三角形でつなぐことで格子幅がだいたい同じになるような格子の切り方を考える。
この点の置き方が問題で、球面上でPoisson disk samplingとかやるのかなあ、めんどくさいなあ、、、と思っていたら、
スマートな点の置き方をやっている研究を教えてもらった。
http://cesdweb.aori.u-tokyo.ac.jp/~nicam/index.html

ベースとなるアイディアは、比較的簡単な多面体（正２０面体）からスタートして、辺を細分化していくことで球に近づけていく、ということ。
アルゴリズムも簡単で、辺の中点を動径方向に球面に射影すればOK（だと思う）。
やってみるとすごく綺麗。

<img src="https://qiita-image-store.s3.amazonaws.com/0/188973/918accc7-0839-ac16-b362-c74bbec52359.png" width=100%>

文献ではさらにスムージングをかけるらしいけど、エンジョイ勢のぼくにはこれで十分ではないかと思う。
XcodeからiOS10.3にビルドした時にエラーが出た時の対応

Xcodeから端末ビルドする際に発生したエラーと解決手順をまとめました。

**動作環境**
Xcode 8.3.3 (8E3004b)
iOS 10.3(14E277)

# 結論
XcodeからiOS 10.3(14E277)へビルドする際に必要なファイルが不足していた為に発生したエラーだった模様。
ファイルを準備して再度ビルドしてみた所、解決しました。

# エラーまでの手順
1. UnityよりiOS Build
2. iOS 10.3(14E277)のiPhoneをPCに接続
3. Xcodeでビルド
4. エラー発生

# エラー内容
以下エラーが発生、Xcodeが **iOS 10.3 (14E277)** に対してビルドが出来なかった

<img width="414" alt="スクリーンショット 2017-09-13 11.31.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/201662/365d9631-651a-e083-c0d2-9093223a8647.png">

端末バージョン
<img width="170" alt="スクリーンショット 2017-09-13 11.32.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/201662/afdde926-afdb-3cce-28d0-83aa869abaf4.png">


# 必要なファイルをダウンロード
DropBoxページからZipファイルをDLして解凍します。

[DropBox - 10.3 (14E269).zip DLページ](https://www.dropbox.com/s/i1f7q8w3vgr2ozl/10.3%20%2814E269%29.zip?dl=0)

解凍後のスクリーンショット
<img width="152" alt="スクリーンショット 2017-09-13 11.36.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/201662/d9857304-5618-06e3-03b3-eb507f5f606d.png">


# ファイルの置き場所
以下の階層へDLしたフォルダをコピーします。

```
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport
```

コピー後はこのようになります。
<img width="141" alt="スクリーンショット 2017-09-13 11.37.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/201662/ba3ddeaa-0545-f6cb-e101-ee338808f4c0.png">

# 再度ビルド
**Xcodeを再起動後** 再度ビルドを行うと正しく端末にビルドする事が出来ました！

# 参考ページ
[GitHub - steipete](https://gist.github.com/steipete/d9b44d8e9f341e81414e86d7ff8fb62d#gistcomment-2041802)
９月１３日は、プログラマーの日

初エントリーです。
プログラミングの知識というわけではないのでご了承ください

## 1月1日から数えてちょうど256日目
ロシアでは2009年から、1月1日から数えて256日目にあたる9月13日（閏年の場合は9月12日）を
公式な**祝日**としているそうです。

　[プログラマーの日 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%AE%E6%97%A5)

２５６といえば、**２の８乗**
365以下で最大の２のべき乗ということでこの日に決まったのでしょう。

## そんな今日、Qiitaはじめます
きっかけは、今日の大学の講義で、
　プログラミングを勉強する際は、進捗などを**発信**するのが大事
と聞いたからです。

そして今日9月13日は、大安＆プログラマーの日らしく、
Qiitaをはじめるにはぴったりの日だなと思いました。

Qiitaはプログラミングの知識を記録&共有するサイトなのに
プログラミングの知識が全くない記事を書くことのは大丈夫なのかとためらいましたが、
どうしてもこの日に初エントリーしたかったのです。ご理解ください！

次回以降はちゃんと、プログラミングの話題を書いていきたいと思います。

## 今後の計画
いきなり自分語りになってしまいますが、
僕が小学校の頃、父がタイピングのソフトを作ってくれて、
それで早くタイピングできるように練習していました。

そして、大学生になった今、
父に「プログラミングを始めんだからタイピングソフトをつくって」と言われて作ってみることに。

GUIを作りたいなーと思いながら、C、Java、Pythonに触れてみるも決めかねて、
いっそのこと、CUIでGUI風のタイピングソフトを作ってみるのはどうだろう
と思い、今は**バッチファイル**で作っているところです。

「レガシー[^1]ですね」とつっこまれる前に、早めにある程度作って
C、Java、Pythonあたりに移行したいと思いますが、
しばらくは、【**タイピング練習のソフトをバッチファイルで再現してみた。**】でいきたいと思います。

---
[^1]: （legacyを使った例文）This allows users to exploit the legacy of older applications.
 [例文の出典：legacyの意味 - Weblio辞書](http://ejje.weblio.jp/content/legacy)
Pike版OpensStack Ceilometer味見

## はじめに
先日(2017/8末)にOpenStack Pikeがリリースされましたので味見してみました。

## 環境条件
OS: ubuntu 16.04
使用パッケージ: リポジトリ ubuntu-cloud.archive.canonical.com のdebパッケージ
インストール手順: docs.openstack.org記載の手順に準ずる(gnocchiで引っかかったのでそのうち纏めたい)


## Ceilometerアーキテクチャ
とりあえずPike版のアーキテクチャ図を見てみます。
引用元: https://docs.openstack.org/ceilometer/latest/

アーキテクチャ図(pike版)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202003/78317232-2d89-82f7-f77d-c8628ca608b9.png)

ceilometer-collectorがアーキテクチャ図から削除されてeventの登録先としてpankoの名前が記載されるようになっていますね。

ちなみにocataがリリースされた頃に表示されていたアーキテクチャ図はこちら
(2017/09/13時点ではocataアーキテクチャ図も上の図に差し替わっています)

アーキテクチャ図(ocata版(旧))
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202003/d83a6c69-8319-8773-30e1-8291df6dad67.png)

Ceilometer polling agentが情報を収集してAMQPに投げたデータと各OpenStackコンポーネントが投げてくるAMQPメッセージをcollectorが拾ってdatabaseに投げる構図となっています。
Pikeではpipelineの設定が変更されてAMQPに投げられていたデータを直接gnocchiに投げるように変わっているはずです。



##インストール&確認
まだcontroller側の手順がupされていませんでしたのでcollectorのinstallを除外して
ocata版と同じ手順で実施してみました。
とりあえずpankoの事は見なかったことにしてみましたがすんなり動作しました。
collectorを経由しなくなったせいかリソースを追加してからceilometerに登録するまでの間隔が短くなった気がします。


※install時には無かったのですが今見たらuploadされていますね。
(https://docs.openstack.org/ceilometer/pike/install/install-base-ubuntu.html)
差分としてはDEFAULTセクションでmeter_dispatchers, event_dispatchersの指定をしろという記載が消えた程度でしょうか。

ocata時代からcollector, ceilometer-apiの使用は非推奨と記載されていましたが
デフォルトのpipeline.yamlのpublishersがnotifier://になっているため
docs.openstack.orgに記載の構築手順ではceilometer-collectorを使用してgnocchiに書き込む形となっていました。

pike版ではpipelineの記載が下記の通りgnocchiになっているためcollectorが不要となっています。

```pipeline.yaml
sinks:
    - name: meter_sink
      transformers:
      publishers:
          - gnocchi://
```


```event_pipeline.yaml
sinks:
    - name: event_sink
      transformers:
      publishers:
          - gnocchi://
```


なおpipeline.yaml, event_pipeline.yamlはocata版では/etc/ceilometer直下に配置されていましたがpike版では
/usr/lib/python2.7/dist-packages/ceilometer/pipeline/data に配置されています。

ceilometerって結構重いのでcollectorが居なくなるのは嬉しいかも。
pankoを見なかったことにしていたりと色々突っ込みどころがあるので今後もう少し遊んでみようと思います。
CentOS7 iptables 設定

CentOS7のiptables設定について記載


1.iptablesをインストール

```
yum -y install iptables-services
```


2.iptablesの起動と自動起動の設定

```
systemctl start iptables
systemctl enable iptables
systemctl status iptables
```



3./etc/ssh/sshd_config 　にsshのportを追記

```
vi /etc/ssh/sshd_config

#Port 22
↓
Port 22
```

4.sshdを再起動

```
systemctl reload sshd
```

5.自動起動の設定

```
systemctl enable sshd

```

6.iptablesを設定（以下はport追加。各々の設定をしてください。）

```
 iptables -A INPUT -p tcp -m tcp --dport <port_number> -j ACCEPT
・・・
```

7.iptablesの再読み込み

```
systemctl restart iptables
```


以上
Riot.jsで、タグへ直書きした引数に対する挙動の変化

Riot.jsでは、`<custom-tag param1="hoge"></custom-tag>`のように、タグの属性を指定して、`opts`として拾うことができます。

ただ、この`opts`の挙動は、ネストして使う場合とルートタグに使う場合で、大きな違いがあります。

# デバッグに便利な技

Riotのタグでは、`before-mount`、`mount`、`update`、`updated`などのイベントが発生しますが、全イベントをまとめて拾える`'*'`という指定法もあります。`'*'`で指定したイベントハンドラには、第1引数としてイベント名が入ります。

```js
this.on('*', name => console.log(name))
```

# HTMLに直接書いたタグの場合

```html
<some-tag>
  <button onclick={push}>アップデート</button>

  console.log('トップコード', opts)
  this.on('*', function(name){
    console.log(name, opts, this.opts)
  })
  push(e){
    console.log('push')
  }
</some-tag>
```

上のように定義して、`<some-tag foo='1'></some-tag>`のようにマウントすれば、`opts`には`{foo: 1}`のようなオブジェクトがセットされます。

が、その後にDOM経由で`<some-tag>`にアクセスして、`setAttribute`などで属性を書き換え、`riot.update()`をかけたとしても、新しい値は`opts`や`this.opts`には反映されません。Riotタグインスタンス経由で制御するしかありません。

# 親タグ内にあるタグの場合

```html
<parent>
  <button onclick={push}>親をアップデート</button>
  <child fixed=1 dynamic={dynamic}></child>

  console.log('親:トップコード', opts)
  this.dynamic = Math.random()
  this.on('*', function(name){
    console.log('親:', name)
  })
  push(e){
    this.dynamic = Math.random()
    console.log('親: push', this.dynamic)
  }
</parent>
<child>
  <button onclick={push}>子をアップデート</button>

  console.log('子:トップコード', opts)
  this.on('*', function(name){
    console.log('子:', name, opts, this.opts)
  })
  push(e){
    console.log('子: push')
  }
</child>
```

このように親子でセットされたタグの場合、親で`<child>`にセットした値の変更は、子の`opts`にも**反映されます**。

なお、すべてのアクションは「親→子」と進みます。

* マウント時：親の`before-mount`→子の`before-mount`→子の`mount`→親の`mount`のように進む
* 親の更新時：親の`update`→子の`update`→子の`updated`→親の`updated`
* 子の更新時：親には伝わらない
preg_replace_callbackで、無名関数を使わない場合

preg_replace_callbackの第2引数は一般的には無名関数を使いますが、
時として$this->myfunctionといったようにクラスメソッドを指定したい時があります。
この書き方がわからなかったのですが、公式ページのサンプルコードにありました：

http://php.net/manual/ja/function.preg-replace-callback.php

```
preg_replace_callback($pattern, array($this, 'replace'), $text);

private function replace($matches){
    // 処理を記載
}  
```
CentOS7 で仮想通貨をマイニングしてみる

CentOS7 で仮想通貨をマイニングしてみる方法を記載
CentOS7にMinergate-cliを入れてマイニングする



1.以下のリンクからminergateのMacやWinでGUI版をダウンロードしてアカウントを作成。これでとりあえずマイニングできる状態にする。
https://minergate.com/

2.cli版のダウンロード

```
sudo wget https://minergate.com/download/rpm-cli -O minergate-cli.rpm
```

3.インストール（必要なパッケージがないとエラーになる）

```
sudo rpm -ivh minergate-cli.rpm
エラー: 依存性の欠如:
        libEGL.so.1()(64bit) は minergate-cli-6.2_gcc4-1.x86_64 に必要とされています
...
```

4.必要なパッケージの確認

```
yum provides libEGL.so.1 \
libSM \
・・・
```

5.パッケージのインストール

```
yum install -y libGL
```

6.再度インストール

```
sudo rpm -ivh minergate-cli.rpm
```

7.採掘する（以下は「xxxxx@co.jp」ユーザーアカウントでXMR(仮想通貨monero)をCPU 1個で採掘の例）

```
minergate-cli --user xxxxx@co.jp --xmr 1
```

8.以下のようなメッセージが出れば接続は成功してます。あとは放置
（採掘した仮想通貨の確認は、GUI版で行う。）

```
Successfully connected to pool:~
```



以上
scala の抽象型メンバ（abstract type member）の実践的な例

暇つぶしに書く。[前回](http://qiita.com/lyrical_logical/items/ecac1a6433395d1ad5ee)は例が実践的でなかったし、与太話も多かった。practical な情報を好む practical なプログラマには不評だったことだろう。
手も痛いので、さっくり終わらせる。

例えば、akka stream を利用した抽象的なインターフェースを書きたいとする。モチベーションは、実運用時の実装とテスト時等で実装を差し替えたいため、とかでいいだろう。実装を差し替えたい理由で一番多いのは、恐らくテストだ。
閑話休題。早速書いてみる。

```scala
trait XXXSources {
  def allXXX: Source[XXX, NotUsed]
}
```

これは良くない。rigid だ。Materialized value が NotUsed で固定されてしまっている。実装によっては NotUsed では困るかもしれない。
そのため、普通はこうする。

```scala
trait XXXSources[Mat] {
  def allXXX: Source[XXX, Mat]
}
```

これで良くなった。型パラメータは便利だ。

では次のような例ではどうか。所謂リポジトリパターンで、ソート済みのクエリ結果を返すメソッドシグネチャを考える。折角なので akka stream を例に用い続けよう。特に意味はない。

```scala
trait Repository[Entity, Mat] {
  def sorted(): Source[Entity, Mat]
}
```

普通だ。この後、実装していくうちに、とある実装で昇順降順を指定できることが分かり、それに合わせてシグネチャを変更したくなったとする。

```scala
trait Repository[Entity, Mat] {
  def sorted(ord: some.implement.Ord): Source[Entity, Mat]
}
```

特定の実装に依存したシグネチャはよくない。先の例のように型パラメタを使うことで解決できないか。

```scala
trait Repository[Entity, Ord, Mat] {
  def sorted(ord: Ord): Source[Entity, Mat]
}
```

一見うまくみえるが、先ほどよりうまくない。使う側で、実装詳細の型に触れなくてはならない。

```scala
class RepositoryImpl[XXXEntity, some.implement.Ord, Future[Done]] { ... }

val repository = new RepositoryImpl
repository.sorted(some.implment.Ord.Asc) // oops
```

これでは抽象も何もあったものではない。
こういった時、つまり実装詳細の隠蔽をしたい時に抽象型メンバ（abstract type member）は輝く。

```scala
trait Repository[Entity, Mat] {
  type Ord
  def asc: Ord
  def desc: Ord
  def sorted(ord: Ord): Source[Entity, Mat]
}
```

こうなる。

```scala
class RepositoryImpl[Entity, Mat] {
  type Ord = some.implement.Ord
  def asc: Ord = some.implement.Ord.Asc
  def desc: Ord = some.implement.Ord.Desc
  def sorted(ord: Ord): Source[Entity, Mat] = ...
}

val repository = new RepositoryImpl
repository.sorted(repository.asc)
```

これで使う側は Ord がどのような型か知る必要はなくなった。どのような型か知らないため、生成することもできないために、メンバが増えてしまったが、これは仕方がない。一度隠した上で、見せたい部分だけ見せる、ということだ。

抽象型メンバ（abstract type member）は、実践的には Win32 API の HANDLE 型や、opaque pointer のような物だ。使う側には何の情報も与えず、実装を隠蔽する。これによりモジュール間を疎結合にしたり、実装の差し替えを容易にしたりする。

隠す必要がない時には型パラメタ、隠す必要があるときには抽象型メンバを、と覚えていれば大体それで良い。

ところで akka stream の Materialized value は、所謂実装詳細に属するものだ。一方で、利用者が Flow を制御するためのものという側面もある。結果として、抽象型メンバよりは、型パラメータにしておくのが望ましい。何事にも例外はある。

勿論抽象型メンバにしておくこともできるのだが、少々ややこしくなってしまう。どのようにややこしくなってしまうのか気になる人は、自分で書いてみよう。手が疲れただけといえば、その通りだ。

おしまい。
build.rsでLIBやPATH環境変数を設定せずにcargo runする

# 背景

Go言語でlibhoge.aを作り、hoge.dll、hoge.libを作って、これらをRustから使う方法を試した。

これらは、.libファイルは環境変数LIBにパスを追加、.dllは環境変数PATHにパスをそれぞれ追加することで、利用可能だが、git cloneしてcargo run一発で動かしたい。

# build.rs

```rust
use std::env;
use std::fs;
use std::path::Path;

fn main() {
    let out_dir = env::var("OUT_DIR").unwrap();
    let dest_lib_path = Path::new(&out_dir).join("../../../deps").join(
        "hoge.lib",
    );
    let dest_dll_path = Path::new(&out_dir).join("../../..").join("hoge.dll");
    let _ = fs::copy("./vendor/hoge.dll", dest_dll_path);
    let _ = fs::copy("./vendor/hoge.lib", dest_lib_path);
}
```

libファイルはOUT_DIRにコピーして、OUT_DIRをライブラリパスとしてしてしても
対応できるが、この方法の方が、手間いらず。

# 実際に動かした様子

[![mruby-webcam](http://img.youtube.com/vi/YbZ_qN5iL4g/0.jpg)](http://www.youtube.com/watch?v=YbZ_qN5iL4g)

# 関連

- [kjunichi/libimgtype: imgcat library for windows](https://github.com/kjunichi/libimgtype)
- [Go言語でコマンドプロンプトに画像を表示するコマンドを作って、Vimの:terminalで表示させた](https://abrakatabura.hatenablog.com/entry/2017/08/19/093906)
- [WindowsでmrubyからGoで作ったライブラリを呼び出して、Webカメラの画像をコマンドプロンプトに表示した](https://abrakatabura.hatenablog.com/entry/2017/09/01/072123)
- [RustでWebカメラの映像をコマンドプロンプトに出すコマンドを作った](https://abrakatabura.hatenablog.com/entry/2017/09/21/064630)
- [RustでGoのライブラリを使うときのCargoのbuild.rsの書き方](https://abrakatabura.hatenablog.com/entry/2017/10/22/110223)
- [2018年版、Rustで多次元配列を使うには](https://abrakatabura.hatenablog.com/entry/2018/07/15/203516)
cookieとsession


![クッキーの役割](http://itpro.nikkeibp.co.jp/article/COLUMN/20080221/294407/zu01.jpg)

## Cookieの仕組み

参考URL
http://qiita.com/mogulla3/items/189c99c87a0fc827520e

まず、サーバがSet-Cookieという名前のフィールドをHTTPヘッダに載せてレスポンスを返す。Cookieとしてクライアントに保存して欲しい情報を、このSet-Cookieフィールドの値として設定する。
レスポンスを受け取ったクライアントはCookieをブラウザに保存する。そして、それ以降のリクエストには受け取ったCookieをそのままリクエストするようになる。

※ Cookieを載せてリクエストするURLの範囲はSet-Cookieの属性値で指定され、その値に従う
※ Cookieには有効期限があり、有効期限が切れたCookieは消滅し、リクエストに載らない

![クッキーの仕組み](https://qiita-image-store.s3.amazonaws.com/0/2813/6f120ec2-9a44-69a0-1506-1b28857c4f98.png)
-------------------------------------
参考URL
http://www.atmarkit.co.jp/ait/articles/1704/20/news024.html
http://www.atmarkit.co.jp/ait/articles/1704/20/news024_2.html


https://teratail.com/questions/64373


Seleniumでcookieをsetする方法
http://tech.furyu.jp/blog/?p=1473


てか、Seleniumのget_cookiesメソッドで一度クッキーを取得して二回目からその取得した値を使うほうが早いと思う。
Ubuntuブリッジ化のメモ

## ブリッジとは

[ブリッジ (ネットワーク機器) - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%AA%E3%83%83%E3%82%B8_(%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E6%A9%9F%E5%99%A8) "ブリッジ (ネットワーク機器) - Wikipedia")

## ブリッジ化のメリット

- Linux機がHUBになる。（いったい何がうれしいのか）
- お勉強用

今、考え中です。

## ブリッジ化の準備

- Ubuntu とか、ネットワーク環境が一通り揃っていること（えっ）
- ネットワークアダプタががふたつ以上必要（Linuxから認識されるもの）

（ちなみに、ここでは内蔵+2つの外付けで、3つのネットワークアダプタを使っています）

NICを挿す。
OSがNICを認識しているか確認。
```ifconfig -a```
いい加減にifconfig は使うなよ。
```ip addr show```
（なぜか eth1 ではなく、eth2、eth3となった）

## ブリッジ化
ブリッジユーティリティをインストール
```sudo apt install bridge-utils```
ここで、
```man brctl```
とか
```brctl show```
とかして、使い方を確認しておいてください。

###ブリッジ作成テストのシェルスクリプトを作成と実行
```
vi bridge-test.sh
```

```bash
#!/bin/bash
# bridge-test.sh
# bridge-utils テストスクリプト 

## 変数定義（OSなどの環境に合わせて修正してください）
# brctlコマンド（bridge-utils）
BRCTL=/sbin/brctl

# ipコマンド （iproute2）
IP=/sbin/ip

# ブリッジの名前
BRIDGE=br0

# ブリッジの  IPアドレス
IP_ADDRESS=192.168.1.60/24

# ブリッジにするネットワークインターフェースたち
NICS="eth0 eth2 eth3"

## 本処理
# ブリッジインターフェースを追加
$BRCTL addbr $BRIDGE

# スパニングツリープロトコル（STP）は使わない
$BRCTL stp $BRIDGE off

# ブリッジにIPアドレスを割り当てる
$IP addr  add $IP_ADDRESS dev $BRIDGE

for NIC in $NICS
do
    # IPアドレス等の設定を消す
    $IP addr flush dev $NIC
    # ブリッジインターフェースに物理NICをバインドする
    $BRCTL addif $BRIDGE $NIC
    # NICをプロミスキャスモードで起動
    $IP link set dev $NIC promisc on
    $IP link set dev $NIC up
done

# ブリッジを起動する
$IP link set dev $BRIDGE up

# EOF
```

スクリプトに実行権をつける
```chmod +x bridge-test.sh```

実行時にはroot権限が必要
```sudo ./bridge-test.sh```

※このスクリプトは必ず実機の端末上で実行すること（ネットワーク越しでは実行しないこと）

- 外部から br0 にping を飛ばして疎通確認
- eth2またはeth3にLANケーブルを挿して疎通確認


### 起動時にブリッジを有効にする設定
```
sudo vi /etc/network/interfaces 
```

```
auto eth0
    iface eth0 inet static
    address 0.0.0.0

auto eth2
    iface eth2 inet static
    address 0.0.0.0

auto eth3
    iface eth3 inet static
    address 0.0.0.0

iface br0 inet static
      address 192.168.X.XX
      netmask 255.255.255.0
      network 192.168.X.0
      broadcast 192.168.X.255
      gateway 192.168.X.XX
      dns-nameservers 192.168.X.XX 8.8.8.8
      bridge_ports eth0 eth2 eth3
      bridge_stp off
```
再起動すれは有効になる。
AAAAレコードを記述したら nginx が Empty Response を返していた話

設定を触ったらChromeが ERR_EMPTY_RESPONSE (Error 324) を返すようになるというのはまれにある話だが、こんな症例もあるというメモ。

# nginx の IPv6 listen 設定

試行錯誤したところ、どうもAAAAレコードを記述したのが元凶ということがわかった。
nginxの設定を変更したのが原因と感じていたのは、単に作業中にDNSキャッシュが破棄されていきなりIPv6で名前を引くようになったことが原因だったのだ。

実はnginxは

```nginx:nginx.conf
server {
        listen 80;
}
```

ではIPv6のリクエストに応答してくれない。(確認: www-servers/nginx-1.12.1::gentoo)
IPv6でもlistenする設定にするには明示的に書く必要がある。

```nginx:nginx.conf
server {
        listen 80;
        listen [::]:80;
}
```
これで問題なく挙動した。
5分で触るブロックチェーン

##下準備
###nodeJSをインストール
http://nodejs.org/
###blockchain-cli をnpm コマンドでインストール
```$ npm install blockchain-cli -g```
##ブロックチェーンを触る
### blockchain-cli を起動
```$ blockchain```
![blockchain0png.png](https://qiita-image-store.s3.amazonaws.com/0/75383/ac463e84-78b9-8592-5dc4-db1690676a13.png)
### 現在のブロックチェーンを確認する
```blockchain → blockchain```
![blockchain1.png](https://qiita-image-store.s3.amazonaws.com/0/75383/754ee92d-2377-13ae-d4ea-70d8ec0a5b11.png)
初期のブロックがGenesis Blockと呼ばれていることがわかる
簡単にデータ構造の説明を下記にまとめる

| データ | 説明 |
|:-:|:-:|
| Previous Hash  |  1つ前のブロックのハッシュ |
| Timestamp  | タイムスタンプ  |
| Data  |  データ |
| Hash  |  現在のブロックのハッシュ |
| Nonce  |  ソルト |

最初のブロックなためPrevious Hashが0となっている

### ブロックを生成する
```blockchain → mine hoge```
![blockchain2.png](https://qiita-image-store.s3.amazonaws.com/0/75383/170dc4eb-c38d-ba63-f516-399c70cb93f5.png)
Dataにhogeが入ったブロックが生成された
そしてPrevious Hashが#0のGenesis BlockのHashとなっている

### さらにブロックを生成する
```blockchain → mine fuga```
![blockchain3.png](https://qiita-image-store.s3.amazonaws.com/0/75383/145041a7-7472-37e9-bef1-eeffee8f0e9f.png)
Dataにfugaが入ったブロックが生成された
そしてPrevious Hashが#1のブロックとなっている

### 現在のブロックチェーンを確認する
```blockchain → blockchain```
![blockchain4.png](https://qiita-image-store.s3.amazonaws.com/0/75383/b7a76946-bd32-a2f8-9af1-64d41b6f7df9.png)
データが一連のブロックで流れができていることがわかる
Spring Boot + Flywayでコードによるデータベースマイグレーション

Spring BootでFlywayを使ってマイグレーションを行なっているのですが、初期データをCSVから加工して投入したいことがあったので、コードによるマイグレーションを試してみました。

# Java-based migrations
[Java-based migrationsのページ](https://flywaydb.org/documentation/migration/java)に書いてある手順で、CSVを取り込んで加工するJavaクラスを作成します。

## マイグレーション用のJavaクラス作成
src/main/java配下にdb.migration配下に[こちらのページに書いてある命名形式](https://flywaydb.org/documentation/migration/java)でクラスを作成します。
基本的にマイグレーション用のSQLの命名規則と同じです。

作成したクラスに[JdbcMigration](https://flywaydb.org/documentation/api/javadoc/org/flywaydb/core/api/migration/jdbc/JdbcMigration)もしくは[SpringJdbcMigration](https://flywaydb.org/documentation/api/javadoc/org/flywaydb/core/api/migration/spring/SpringJdbcMigration)を継承します。
今回はSpring Bootを使用しているので、SpringJdbcMigrationを継承し、migrateメソッドを実装します。

```java:V1__add_test_user.java
package db.migration;

import org.flywaydb.core.api.migration.spring.SpringJdbcMigration;
import org.springframework.jdbc.core.JdbcTemplate;

public class V1__add_test_user implements SpringJdbcMigration {
    public void migrate(JdbcTemplate jdbcTemplate) throws Exception {
        jdbcTemplate.execute("INSERT INTO test_user (name) VALUES ('テストユーザ')");
    }
}
```

データベースへの投入は引数で渡ってくる[JdbcTemplate](https://spring.io/guides/gs/relational-data-access/)を使用してデータ投入等のSQLを実行します。
今回の例では固定でSQLを実行していますが、CSVからデータを読み込んでデータ投入などSQLだけだと難しいデータ投入がコードによるマイグレーションを使うことでできるかと思います。


# おまけ：CSVファイルの読み込みとデータ投入
```java:V2__insert_word_positive_negative.java
package db.migration;

import org.flywaydb.core.api.migration.spring.SpringJdbcMigration;
import org.springframework.jdbc.core.JdbcTemplate;

import java.io.BufferedReader;
import java.io.InputStreamReader;

public class V2__insert_word_positive_negative implements SpringJdbcMigration {

    @Override
    public void migrate(JdbcTemplate jdbcTemplate) throws Exception {
        try(BufferedReader br = new BufferedReader(
                new InputStreamReader(getClass().getClassLoader().getResourceAsStream("db/migration/seed/pn.csv.m3.120408.trim")))) {

            String str;
            while ((str = br.readLine()) != null) {
                String[] split = str.split("\t"); // タブで分割
                if (split.length > 1) {

                    String emotion = split[1].trim(); // p or e or n
                    int score = 0;
                    if (emotion.equals("p")) {
                        score = 1;
                    } else if (emotion.equals("n")) {
                        score = -1;
                    }
                    jdbcTemplate.update("REPLACE INTO WordPositiveNegative(word, score) VALUES (?,?)",split[0].trim(),score);
                }
            }
        }
    }
}

```

今回のサンプルでは[東北大学の乾・岡崎研究室が公開している日本語評価極性辞書](http://www.cl.ecei.tohoku.ac.jp/index.php?Open%20Resources%2FJapanese%20Sentiment%20Polarity%20Dictionary)をsrc/main/resources/db/migration/seed配下に置いてます。
MacのiTerm2でカーソルの位置にスポットを当てる

```
⌘/
```
↑を押すと

これが

<img width="1440" alt="スクリーンショット 2017-09-13 20.17.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/124843/2126bc0c-8389-1dc2-27d1-975651481143.png">

こうなる

<img width="1440" alt="スクリーンショット 2017-09-13 20.17.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/124843/046dbfee-75d4-29fc-2a30-aaba0a411097.png">

人前でターミナルを開いた時に使うとカッコイイ！
やったね！
docker-composeがタイムアウトするまでの時間を変更する

下記みたいな感じでいけます。

```
COMPOSE_HTTP_TIMEOUT=240 docker-compose up
```

デフォルトは60秒です。

参照：[CLI 環境変数](http://docs.docker.jp/compose/reference/envvars.html#compose-http-timeout)
ransack で日付で絞り込む(カスタム検索)


## はじめに
みなさん ransack は使っていますか？
導入も簡単ですし使いやすいので使っている人も多いことと思います。
基本的な使い方は<a href='http://qiita.com/nysalor/items/9a95d91f2b97a08b96b0'>こちら</a>の記事など参照すればわかりやすいかと。
今回は基本的な使い方にプラスして日付検索をしたかったので ransack でカスタム検索したので <a href='https://github.com/activerecord-hackery/ransack'>github</a> を見ればわかるっちゃわかるんですが、備忘録として書いときます。

### やりたいこと
特定の日付の範囲に該当するデータを検索したい。
今回はデータの `created_at` が指定した日付の範囲の中にあるものを検索します。

### やること
フォームに指定した日付の間に `created_at` がある Post モデルのレコードを取得する。

## 実装
コントローラー内で使う ransack の `search` メソッドの第２引数にオプションを追加します。

```app/controllers/posts_controller.rb
class PostsController < ApplicatoinController

  def index
    search_options = {
      created_after: params[:created_after]
      created_before: params[:created_before]
    }
    @q = Post.search(params[:q], search_options)
    @posts = @q.result
  end
end
```
ここではオプションで `created_after` と `created_before` を設定しています。
これらを設定できるようにビューとモデルにコードを書いていく。

ビューではコントローラ内にある `paramas[:created_after]` と `params[:created_berore]` を受け取れるように下記のように書く。

```app/views/posts/index.html.haml
= search_form_for @q, url: posts_path do |f|
  = f.search_field :created_after
  = f.search_field :created_before
  = f.submit '検索'

- @posts.each do |post|
 = post.title
```
モデルではオプションのキーで使っている `created_after` と `created_before` を設定する。


```app/models/post.rb
class Post < ApplicationRecord
  scope :created_after, -> (time) {
    time = time.to_time
    where('created_at > ?', time)
  }
  scope :created_before, -> (time) {
    time = time.to_time
    where('created_before > ?', time)
  }

  class << self
    def ransackable_scopes(auth_object = nil)
      [:created_after, :created_before]
    end
  end
end
```
まずはそれぞれのスコープを作り、クラスメソッドで `ransackable_scopes` を設定してあげるだけでよい。

## まとめ
検索する件数が多くなったり、リクエストの数が増えると ransack だと微妙な面もありますが、
これだけ簡単にカスタム検索できるのは便利なので、社員しか使わないなどであればもってこいかと。
UI > カテゴリごとの表示 > ユーザはカテゴリを覚えるという前提

mindmupというオンラインツールを使い続けている。

最近UIが変更されたようだ。
例として、色の変更方法は以下のように変わった。

- 変更前
    - ノード選択
    - 右クリック
    - 色変更メニュー選択
    - 色指定
- 変更後
    - ノード選択
    - 右クリック
    - カテゴリ選択 (ノード編集メニュー)
    - 色変更メニュー選択
    - 色指定

変更後のUIの問題は「ユーザはどのカテゴリにどのメニューがあるか、覚え続けないといけない」ということ。

**2,3のツールのみを使い続けるユーザと、50近くのツールを使い続けるユーザで差は出てくる。
頻繁に使い続けるユーザと、たまに使うユーザでも差は出る。**

2,3のツールのみ使い続けるユーザや、頻繁に使い続けるユーザは「カテゴリ内容を覚えておける」。記憶コストは低い。
50近くのツールを使い続けるユーザや、たまに使うユーザは「カテゴリ内容を忘れる」。記憶コストは高い。

自分は50近くのツールを適宜、たまに使うユーザである。

そういう点で、新しいmindmupのUIは使いにくくなった。

それでも、ファイルがJSONファイルであること（ポータビリティ）や他の操作がまだ使いやすいという点から使い続けるようには思う。
UIの変更時には、「どういうユーザを対象としているか」をしっかり検討した上で、設計をするのが良いというfood for thoughtになった。

PS.
一カ月前からC++ Builder XE4のプロパティ表示を「カテゴリ形式」に変更して使っていた。ある特定のプロパティを変更する時に、「どのカテゴリにあるか分からない」ことが繰り返されたので、カテゴリ形式をやめてアルファベット形式に最近戻した。よく使用しているIDEでさえ、カテゴリの詳細を覚え続けるのはコストが高い。
    
PS (2018/01/05)
10.2 Tokyoになってからオブジェクトインスペクタでプロパティとイベントのキーワード検索ができるようになった。
この機能はTokyoを使い始めてから重宝している。こういうUIはどんどん実装されれば開発が捗るIDEになると感じる。
BusyIndicatorサンプル

#BusyIndicatorのサンプル
##テスト用QML
```qml
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtMultimedia 5.9

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("BusyIndicatorサンプル")

    Audio { id: clickSound1; source: "Sounds/btn01.mp3" }
    Audio { id: clickSound2; source: "Sounds/btn02.mp3" }

    Column {
        BusyIndicator {
            id: busyIndicator
            running: false
        }

        Button {
            text: "Start"
            onClicked: {
                if (busyIndicator.running)  clickSound2.play()
                else                        clickSound1.play()
                busyIndicator.running = !busyIndicator.running
                text = busyIndicator.running ? "Stop" : "Start"
            }
        }
    }
}
```
う〜ん…もうちょっとリサイズ処理なんとかならないかな？^^;
##実行結果
[![SignalTransitionサンプル動画](http://img.youtube.com/vi/OgILfK_6hMA/0.jpg)](http://www.youtube.com/watch?v=OgILfK_6hMA)
※Linux Mint 18.2 & Qt 5.9.1使用
Global Average Pooling（GAP）を理解してみる

Deep Learningのテクニックの一つであるGlobal Average Pooling（GAP）を、なるべくわかりやすいように（自分がｗ）解説してみます。

# 基本となるネットワークモデル
今回はVGG-16をベースに考えてみます。
![vgg16.png](https://qiita-image-store.s3.amazonaws.com/0/130771/80621b2f-150c-887c-3c4d-7c8c3164d443.png)

ポイントとなるのは、最後の全結合の部分です。

現状は、max poolingにより、7x7x512のデータができています。
これを1x1x4,096に全結合してますので、25,088×4,096=102,760,448の重みパラメータが存在しています。
![image1.png](https://qiita-image-store.s3.amazonaws.com/0/130771/f49efe75-0a9f-143d-8634-9b7c0f5a40a3.png)

# Global Average Poolingとは
各チャンネル（面）の画素平均を求め、それをまとめます。
そうすると、重みパラメータは512で済みます。
![image2.png](https://qiita-image-store.s3.amazonaws.com/0/130771/88d115a3-f4c4-f021-e0b4-f2c77aa52bff.png)

# 評価
[論文（pdf）](https://arxiv.org/pdf/1312.4400.pdf)によると、識別率に問題はない模様です。
（反対に良いぐらい！）
![image3.png](https://qiita-image-store.s3.amazonaws.com/0/130771/30b4378c-124e-ffb9-fa6d-7d7d71a10a16.png)

使用するメモリ量は少なく、識別率もよいなんて、いいことづくめですね！

# おまけ
このGAPを利用した物体位置の検出がClass Activation Mapping（CAM）になります。
この辺りは

- [Class Activation Mapping（CAM）の実装である「Weakly_detector」のソースを読み解く　～トレーニング編～](http://qiita.com/mine820/items/c3726cb906c45a2e5265)
- [Class Activation Mapping（CAM）の実装である「Weakly_detector」のソースを読み解く　～可視化編～](http://qiita.com/mine820/items/0d03e9baa84f81238819)

に書きましたので、参考にしていただければと思います。
コマンドの頭に!をつけたときの動作

# 100%個人的などうでもよい背景

業務でシェルスクリプトで書かれたツールを使う必要があり、ツールを作った人が書いたマニュアルを読んでいた。
マニュアルに書いてある手順のなかで
`!mkdir`
などと書かれた箇所があり、
このビックリは何だ？と思って調べた。

# !の意味

man bashから抜粋

>Event Designators
An event designator is a reference to a command line entry in the history list.
イベント指定子は、履歴リストのコマンドラインエントリへの参照です。

履歴リストって？→`$history | less`で見られるやつ

>!      Start  a history substitution, except when followed by a blank, newline, carriage return, = or
       ( (when the extglob shell option is enabled using the shopt builtin).
ヒストリ置換を開始します。ただし、空白、改行、キャリッジリターン、または（が後に続く場合は除く（shopt組み込み関数を使用してextglobシェルオプションが有効になっている場合）。

>!n     Refer to command line n.
履歴リストのn番目のコマンドラインへの参照。
→n番目のコマンドを再実行する。

>!-n    Refer to the current command line minus n.
履歴リストを現在のコメンドラインから遡ってn番目への参照。
→n個前のコマンドを再実行する。こっちの方が普通に使いそうか。

>!!     Refer to the previous command.  This is a synonym for ‘!-1’.
直前のコマンドへの参照。これは '！-1'と同義。

>!string
       Refer to the most recent command starting with string.
一番最近のstringで始まるコマンド。
つまり、`!mkdir`だと一番最近のmkdirコマンドを再実行する。

>!?string[?]
       Refer to the most recent command containing string.  The trailing ? may be omitted  if  string
       is followed immediately by a newline.
一番最近のstringを含むコマンド。文字列の直後に改行が続く場合は、後ろの?は省略することができる。
（[]は省略可能という意味で実際には入力しない）

>^string1^string2^
       Quick  substitution.   Repeat the last command, replacing string1 with string2.  Equivalent to
       ‘‘!!:s/string1/string2/’’ (see Modifiers below).
クイック置換。最後のコマンドを繰り返し、string1をstring2に置き換える。 '' !!：s / string1 / string2 / ''と等価。

>!#     The entire command line typed so far.
現時点のコマンドライン全体。

# 個人的な結末

マニュアル上でコマンドの先頭に付いてた"!"は上記とは無関係で、
$とか#とかと同じで単にコマンドラインですよという意味を表す記号でしかなかった。
要するに、勘違いで、そのツールを使う上で上記の内容はとくに関係がなかった。
（マニュアルをきちんと読むと履歴を利用するようなシチュエーションでもないし、全部のコマンドの前に!がついていた）

ところで、\#はrootで$はそれ以外のユーザーの場合の表示だと聞いたことがあるけど、じゃあ!は何か特定の状況を表す意味があるんだろうか？
Visual Studio Codeの使用感詳細

[前に記事](http://qiita.com/yochori/items/b8b173e4ecbf25f90ea1)を書いてから、色々PHPの開発環境を試そうと思ってましたが、Visual Studio Codeで十分満足してしまいました。使用感をもう少し詳細に残しておきます。

#**総論**
1. その他の開発環境と同様、便利な機能は一通り揃っています。
2. コストが掛からないのは、一つ大きなメリットです。
3. 機能が揃っているのに、軽快に動作します。
4. GitやCUIコマンドに距離感を感じている方には、最適の開発環境だと思います。Git、コマンドの便利さをすんなりと感じさせてくれます。

#**気に入っているところ**
###**フリー**
フリーで利用できて、Gitの使い方が素人に優しそうなGUI(Gitに関してはこのレベル)になっている点が好印象。

###**何よりも軽快**
Eclipseと比較したら、大抵のものが軽快ですが、個人的には相当快適に感じています。
Atomと比較しても軽いと感じましたが、Atomの機能拡張の使い方が悪かっただけかもしれません。

###**Gitのメリットをイメージしやすい**
Gitの素人(自分)がいだくイメージ(Android StudioにあるVersion Controlの画面)にかなり近い形のGUIが用意されていると思います。
Gitしたことが無い人でも、更新状況が一覧で確認できるだけで相当便利さを感じると思います。FTPに手動でUPする場合に更新リストとして重宝すると思います。
進み過ぎた世の中に付いていけてない自分としては、Jenkins使って自動でデプロイとか手が出せてないので、FTP手動UPは業務上必須です。
*※Jenkinsとかよくわかってないので、言っていることが正しいかわかってません。きっとこういうことなのかってだけです。*

###**最新のコミットとの差分が確認しやすい**
最近気付きましたが、Gitの更新リストで、変更箇所がきちんと**文字単位**で強調されていて、非常に分かりやすい。細かいコミットをするインセンティブになります。

###**Powershellがウィンドウ内で利用できる**
これも最近気付きましたが、powershellがウィンドウ内で利用できるのは便利。別Windowで立ち上げて、ディレクトリ移動してやるよりずっと直感的に利用できます。
Gitコマンド打つのってどこで打つのって一番最初思う気がするので、Gitの利用促進にもこのウィンドウ内のレイアウトは良いと思います。

#**面倒だなとおもったこと**
###**ローカルにPHPの環境をインストールする必要がある**
機能拡張で、PHP IntelliSense等を入れると必然的にローカルにPHP環境が必要になります。
VirtualBoxやVagrant, XAMPPとかローカルで色々やっちゃえるなら気にならないところかもしれません。
ローカルがゴチャゴチャし過ぎて変なことになったりしないか心配になっちゃうので、リモート環境使って色々やる方向が何となく良いと思ってしまいますが、古いですかね、考え方が...

#**現在の環境**
参考までに今のところの機能拡張を記載しておきます。

###**機能拡張**
1. Git History
2. PHP DocBlocker
3. HTML Snippets
4. PHP Debug
5. PHP InterliSense 


###**設定変更**
1.　ミニマップ表示　on　"editor.minimap.enabled": true
Appdashを動かしてみた


## 背景

分散トレーシングとしてOpenTracingやUberが出しているJaeger, Appdash等様々なツールが存在しているが、どの分散トレーシングツールがイケてるのかがわからない。

## 目的

分散トレーシングツールの一つであるAppdashのサンプルを触ってみ手動かし、GUIなどを見る。なおJaegerのサンプルは腐っていたので動かず断念した。また、OpenTracingも自前のUIがなさそうなのでひとまず断念中。

## 環境
* Macbook Pro(Siera)
* Golang 1.7.3（多分1.7以上がいる）

## 動かし方

### Appdashのインストール

```
$ go get -u sourcegraph.com/sourcegraph/appdash/cmd/...
```

### デモの動かし方

```
$ appdash demo
Appdash collector listening on tcp:62160
Appdash web UI running at http://localhost:8700

Appdash demo app running at http://localhost:8699
```

UIは `http://localhost:8700` からアクセスができる。
デモのアプリは `http://localhost:8699` からアクセスができるのでAPIコールのリンクをクリックしてからUIを見に行くと以下のようなTraceとSpanの画面が見れる。
![Appdashのデモ](https://qiita-image-store.s3.amazonaws.com/0/9622/b43dd365-dc73-7108-e67d-0cdef53269aa.png "スクリーンショット 2017-09-13 17.14.34.png")

### サンプルデータの試し方

でも以外にもサンプルが動くのでそちらも試してみた。
まず受け取り側を起動させたままにしておく。

```bash:console1
$ appdash serve
appdash collector listening on :7701 (plaintext TCP (no security))
appdash HTTP server listening on :7700
```

次にサンプルデータを送る

```bash:console2
$ appdash send
Sending sample data...
Adding sample data (60 traces)
Done sending sample data.
Flushing chunked collector...
Done flushing chunked collector.
```

`http://localhost:7700` のUIにアクセスしに行くと以下のようにサンプルデータが投入されたものが見える。

![サンプルデータのTraces](https://qiita-image-store.s3.amazonaws.com/0/9622/a3035175-5b39-47db-0055-4233df14633a.png "スクリーンショット 2017-09-13 18.30.44.png")

![SQLのサンプルらしい](https://qiita-image-store.s3.amazonaws.com/0/9622/1c94189a-e504-20c5-3bdb-d1c794c916f5.png "スクリーンショット 2017-09-13 18.32.39.png")


## 結果

Appdashはサンプルが簡単に動かすことが出来、TraceとSpanの可視化ができた。
しかしながらSpanの関係図を示すDAG（有効巡回グラフ）がなさそうな気配がする。
git - 追跡対象のファイルの変更を無視する


```bash
$ git update-index --assume-unchanged <file-path>
```

また追跡する

```bash
$ git update-index --no-assume-unchanged <file-path>
```


追記

`--skip-worktree` で `reset --hard` や `pull` マージの対象にもしない要することができる模様。
 
- [“既に git 管理しているファイルをあえて無視したい - Qiita”](https://qiita.com/usamik26/items/56d0d3ba7a1300625f92)
Docker で始める Keycloak

と言っても、Docker Hub に Keycloak のイメージが既にあるので、以下のコマンドを実行するだけ。
https://hub.docker.com/r/jboss/keycloak/

```shell-session
$ docker run -d -p 18080:8080 \
             -e KEYCLOAK_USER=admin \
             -e KEYCLOAK_PASSWORD=admin \
             --name keycloak \
             jboss/keycloak
```

これで、ブラウザから以下の URL にアクセスして、初期ユーザ `admin` パスワード `admin` でコンソールにログインできる。
http://localhost:18080/auth/admin/

Keycloak を終了するには、以下のコマンド。

```shell-session
$ docker stop keycloak
```

再度同じイメージを起動するには、以下のコマンド。

```shell-session
$ docker start keycloak
```
Visual Studio for Mac で xcodeと通信が失敗しました

##**そんなときはおそらくxcodeのバージョンが古いのでupdateしよう！**

他にも要因があるかもしれませんが、僕の場合はxcode7.x.xから8.3.3にupdateしたら問題なく動作するようになりました。
Visual Studio for Mac で Azure Blob Storage を使う

macでVisualStudioが使えるようになったとのことで入れてみた。
そしてAzureのBlob Storageを使おうとしたところでハマりまくったのでメモ。

#結論
.NET でやろうとするんじゃなくて Xamarin でやろう。

.NET Core というのがあるから、同じようにかけるもんだとおもって、.NETのサンプルを追ってたんだけどできなかったわけです。app.configから詠み込もうにも、どうにもwindowsじゃないと扱えないパッケージなんかが必要みたいで読み込めず。

というわけで以下MicrosoftAzureのdocumentサンプルコード抜粋

### 必要なパッケージ
~~~
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System.Threading.Tasks;
~~~

### uploadの部分
~~~
public static async Task performBlobOperation()
        {
            // Retrieve storage account from connection string.
            CloudStorageAccount storageAccount = CloudStorageAccount.Parse("DefaultEndpointsProtocol=https;AccountName=your_account_name_here;AccountKey=your_account_key_here");

            // Create the blob client.
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

            // Retrieve reference to a previously created container.
            CloudBlobContainer container = blobClient.GetContainerReference("mycontainer");

            // Create the container if it doesn't already exist.
            await container.CreateIfNotExistsAsync();

            // Retrieve reference to a blob named "myblob".
            CloudBlockBlob blockBlob = container.GetBlockBlobReference("myblob");

            // Create the "myblob" blob with the text "Hello, world!"
            await blockBlob.UploadTextAsync("Hello, world!");
        }
~~~

app.config なんていらなかったんや…

###参考
https://docs.microsoft.com/en-us/azure/storage/blobs/storage-xamarin-blob-storage
[AWS] WordPressのBitnamiというバナーを消す

## 概要
AWSのWordPressのBitnamiというバナーを消す方法です。

## 1.ターミナルからbitnamiというユーザー名でログインする
こんな感じ。

```
$ ssh -i ~/.ssh/MyKeyPair.pem bitnami@{パブリック DNS}
```

ログインすると下記のようなロゴが表示されます。

```
       ___ _ _                   _
      | _ |_) |_ _ _  __ _ _ __ (_)
      | _ \ |  _| ' \/ _` | '  \| |
      |___/_|\__|_|_|\__,_|_|_|_|_|

```

## 2.バナーを非表示にする

```
$ sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
```
## 3.Apacheを再起動する

```
$ sudo /opt/bitnami/ctlscript.sh restart apache
```



## おそらく役立つ情報 
痒いところに手が届くかもしれない記事を書いています。
フォローしてくれるとやる気になります！

- Qiita　プログラミングに関する情報はこちら
http://qiita.com/nadonado


- Twitter　日々のつぶやきはこちら
https://twitter.com/hironado
Rails engine の１つのアプリ内のモデルをrails consoleで操作する方法

自分用メモ。

まず、モジュール名をチェックする。```/engine/hoge_app/lib/hoge_app.rb ``` の moduleを確認。モジュール名がHogeAppであったとすると、rails consoleで

``` > ::HogeApp::ModelName.some_method ```

とすればモデルを操作できる。
Laravel備忘録（いつも探して時間の無駄なことまとめ）

# はじめに
毎回忘れて、色々なページを漁って時間の無駄なので、
チョットでもハマったことは残しとく自分用のメモ。

# プロダクトコード
## Eloquentモデルのカスタム属性
DBと強力に紐づくEloquentモデル。
DBにないカラムを追加したかったりすることがままある。
そんなときは、以下のフィールドに追加したい属性を定義して、getXXXAttributeメソッドを追加すればOK。

```php:MyModel.php
protected $appends = ['add_filed',];

public function getAddFiledAttribute()
{
    return '返したい何か';
}
```

ClassのPHPDocに@propertyで書いといてあげれば別のクラスからの呼び出しも楽になる

## 配列のバリデーション
連想配列については割としっかり書いてあってすぐに見つかるけど、
そうじゃないヤツどうやるんだっけ？っていつも探しにいき、説明不足で読んでもスルーして更に探しに行くという無駄があるので書いておく。

```php:MyFormValidation.php
public function rules()
{
    return [
        'arrays.*'=> 'integer|in:1,9',
    ];
}
```

これで、連想配列に関係なく全部中身をチェックしてくれる。（もう少ししっかり書いといて欲しさがある）

## Resource ControllerのFormバリデーションで任意のHTTPステータスコードを返す
エラーになると前ページにリダイレクトしようとするので、302が返るヤツ。
Resource Controllerだと400が返したい。
ソース読まないと判らなかったから残しておく。

```php:MyResourceFormValidation.php
public function response(array $errors)
{
    return new JsonResponse($errors, 400);
}
```

Illuminate\Foundation\Http\FormRequest#responseをオーバーライドすればOK。
バリデートに失敗したときにしか呼ばれないから、上記をコピペすれば大概上手くいく。

## BladeからGETメソッドにパラメータを追加する
ドキュメントにはroutingのRESTFullっぽい記述のことしか書いてないけど、以下をすれば普通に「?」で繋がる。

```php:route.php
Route::get('/index/{id}', ['as' => 'index', 'uses' => 'HogeController@index']);
```

```php:view.blade.php
{!! Form::open(['route' => ['index', 1, 'my_arg' => 'get_param'], 'method' => 'get']) !!}
```

上記のように書くと、こうなる（一応）

```html
<form action='http://localhost/index/1?my_arg=get_param' method='GET'>

</form>
```

# テストコード
## HTTPリクエストの投げ方
リクエスト投げる部分はコピペしてるから新しく始めたときにすぐ忘れる。

```php:MyTest.php
$response = $this->call('GET', '/index');
```

## ヘッダーに要素を追加する
引数名が判りづらくて、いつもStack Overflowを徘徊させられる。

```php:MyTest.php
$server = $this->transformHeadersToServerVars(['authorization' => 'hoge']);
$response = $this->call('GET', '/index', [], [], [], $server);
```

# 最後に
増えればここに追加します。
ブラウザのCSS解釈方法についての衝撃事実

CSSのパフォーマンスについて調査していたところ、衝撃の事実を知りました。
それは、
>**「CSSセレクタは右から左へと照合される」**

らしいです。

#今までの私の見解

```css
.sample table td {
  color: red;
}
```
上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行していると思っていました。
　　1. 　sampleクラスを見つける
　　2. 　1の子孫のtable要素を見つける
　　3. 　2の子孫のtd要素を見つける
　　4. 　文字色を赤くする

#正しい見解
```css
.sample table td {
  color: red;
}
```
上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行しているらしいです。
　　1. 　<font color="red">全てのtd要素を見つける</font>
　　2. 　1の先祖要素にtable要素が存在するかを確認
　　3. 　2のtable要素の先祖要素にsampleクラスが存在するかを確認
　　4. 　文字色を赤くする

このように、**CSSセレクタは右から左へと照合**されていきます。
※一番右側のセレクタは、**キーセレクタ**と呼ばれるらしいです

#何が問題か？
例えば、以下のようなHTMLコードがあったとします。

上記のCSSコードでsampleクラス配下の表の文字色を赤くしようとすると、まずDOM内の全てのtd要素を見つけ、さらにtable要素・sampleクラスの存在確認をしようとします。
sample2クラス配下の表は文字色が黒のままで良いので、sample2クラス配下のtd要素は、本来見つけなくて良いことになります。
これは、明らかな**コストの無駄**です。
sample2クラス配下のtd要素が爆発的に増えれば、**パフォーマンス問題**につながる可能性があります。

```html
<!-- 文字色を赤くしたい表 -->
<div class="sample">
  <table>
    <tr>
      <td>hoge</td>
      <td>hogehoge</td>
    </tr>
    <tr>
      <td>fuga</td>
      <td>fugafuga</td>
    </tr>
  </table>
</dvi>

<!-- 文字色は黒のままで良い表 -->
<div class="sample2">
  <table>
    <tr>
      <td>hoge</td>
      <td>hogehoge</td>
    </tr>
    <tr>
      <td>fuga</td>
      <td>fugafuga</td>
    </tr>
  </table>
</div>
```

#どのようにすべきだったか
既にお分かりかと思いますが、念のため記載しておきます。
やはり、文字色を赤くしたいセルにだけ、赤くするクラスを付与するのが一番良いです。

```css
.red {
  color: red;
}
```
```html
<!-- 文字色を赤くしたい表 -->
<div class="sample">
  <table>
    <tr>
      <td class="red">hoge</td>
      <td class="red">hogehoge</td>
    </tr>
    <tr>
      <td class="red">fuga</td>
      <td class="red">fugafuga</td>
    </tr>
  </table>
</dvi>

<!-- 文字色は黒のままで良い表 -->
<div class="sample2">
  <table>
    <tr>
      <td>hoge</td>
      <td>hogehoge</td>
    </tr>
    <tr>
      <td>fuga</td>
      <td>fugafuga</td>
    </tr>
  </table>
</div>
```

#結論
- キーセレクタはパフォーマンス問題に直結する可能性がある
- キーセレクタは出来る限り絞り込む(無関係のDOMをマッチさせないようにする)
- キーセレクタをどれだけ絞り込むかでコストが左右される

#参考サイト
CSS の適用について
http://d.hatena.ne.jp/oknknic/20110716/1310835176

Webkit と Firefox のレンダリングの仕組み
https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/#Manipulating_the_rules_for_an_easy_match

レンダリングについて
https://qiita.com/mikimhk/items/7cfbd6c94d0f3d7aa51f#3-rendering