OmniAICreator/Qiita-1.07M huggingface dataset:
[Ruby] アンド `&.` (Safe Navigation Operator) で、引数 (argument) を渡す方法

`[]` がメソッドで、`:a` が引数です。


```rb
foo = {a:1}

foo[:a]
#=> 1

foo&.[](:a)
#=> 1

nil&.[](:a)
#=> nil
```

今度はクラスとメソッド書いてわかりやすいサンプル。

```rb
class Foo
  def foo(x); x; end
end

Foo.new.foo(3)
#=> 3

Foo.new&.foo(3)
#=> 3

nil&.foo(3)
#=> nil
```

これを見つけるのに、いろいろ打って探したんですが。ドキュメントがうまく見つけられませんでした..。😧

ひとまず見つかってよかったのですが。
Fluid images VS Responsive Images

# Fluid images VS Responsive Images

## Fluid Imagesとは？

ブラウザのウィンドウ幅に合わせて画像のサイズをフィットさせる方法。
ウィンドウサイズより大きい画像でも、ウィンドウサイズ（または親要素の幅）に応じて、縦横比を保持したまま自動的に画像が拡大・縮小するようにする手法
具体的には、img 要素に対して以下のスタイルを適用する。

```img { max-width : 100%}```

### Fluid Imagesの利点

* ウィンドウサイズなど利用者の環境に関わらず、使用する画像を1つに統一できる為
	* 画像管理が用意
	* HTMLの記述は、従来通りのシンプルなものでよい

### Fluid Imagesの欠点

欠点は利点と表裏だが以下が主な問題として議論されている

* 利用者の環境（特に回線速度やピクセル密度の違い）に応じて最適な画像を提供できない

この手法を採用した場合、より多くの利用者の環境に於いても高画質の画像を提供するために、コンテンツ提供者はより大きなサイズ（ファイルサイズも）の画像を用います。
その為、3G回線のスマートフォン利用者でも、ハイスピードLANの主に会社のオフィスPC利用者と全く同一のファイルを強制的にダウンロードさせられてしまいます。

---

## Responsive Imagesとは？

```<picture>``` 要素は、画像リソースの読み込みを宣言的に行う仕組みです。Web 開発者はこの要素によって、CSS や JavaScript によるハックなしに、レスポンシブデザインで画像を扱えるようになります。また、画像リソースの読み込みがネイティブに実装・最適化されたのは、遅いモバイル回線でページを見ているユーザーにも嬉しいことです。これはとくに重要でしょう。

```<picture>``` 要素と、新しく ```<img>``` に追加された srcset と sizes 属性を使えば、画像リソースを柔軟に指定できます。レスポンシブデザインのサポートとページ読み込み時間を短くするため、どの状況下でどの画像を読み込むかはブラウザにまかせてしまいましょう。私たちは、今から紹介する画像の使われ方にもとづいて、わかりやすい HTML を書くだけです。

```
<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>
```


出典：[レスポンシブイメージのネイティブサポート](https://www.html5rocks.com/ja/tutorials/responsive/picture-element/)


### Responsive Imagesの利点

上にも記載しましたが、Fluid Imagesの問題点を解決してくれ利用者の環境に最適な画像の出し分けをブラウザの判断に委ねることができます。

また、アートディレクションによる出し分け（モバイルデバイス用、ワイドデスクトップモニター用と、表示される画面によって画像を出し分けたい）にも適しています。


### Responsive Imagesの欠点

IE11に於いては、picture要素は使用することが出来ません。
img要素のsrcsetとsizes属性のブラウザ実装状況においてもmicrosoft製ブラウザは不十分です。

* [picture要素のブラウザ実装状況]https://caniuse.com/#search=picture
* [srcsetとsizes属性のブラウザ実装状況](https://caniuse.com/#search=srcset)

また、この実装方法では一つの画像に対して想定出し分け環境に応じた複数の画像を用意する必要があります。つまり、例えば10ページのHTMLからなるウェブサイトの中で1ページあたり5枚の画像が使用されいた場合、それらを3つの環境に出し分けるというルールを設定すると

``` 5X3X10=150 ```

コンテンツ制作者は150枚の画像を用意し、それらを管理する必要があります。


## ベスト・プラクティス

Responsive ImagesはFluid Imagesの欠点を補う完全なオルタネイティヴと認識されがちであるが、必ずしもそれは正しくありません。

確かにウェブ利用者の環境が多様化している現在に於いて、それらに応じた最適なサイズや見栄えを提供することはコンテンツ制作者にとって正しい選択だと思います。
但し、同時に全ての環境に最適化することに掛けられるコストも同時に勘案しておく必要があります。上記Responsive Imagesの欠点でも述べたように一つの小規模なサイトを制作するために100以上もの画像を制作・管理することは理想的な姿ではありません。

その点を考慮すると

* 一般的な挿絵や説明画像など、見栄えに強く拘らない若しくはデスクトップモニターのサイズでも極端に大きな画像サイズが要求されない画像については、従来通りFluid Imagesを用いる
* それ以外、特にアートディレクションによる出し分けを要求される場合に於いては、対象環境が許す範囲でResponsive Imagesの実装方法を用いる

というベーシックルールに則ることが現状のベスト・プラクティスだと考えられます。
キャッシュを効かせつつ変更を反映（クエリ付けても効かないとき）

# キャッシュを効かせつつ変更を反映

jsやcssの変更を反映させたいけどキャッシュが使われてしまう。
クエリを付ける方法が有名ですが、効かない場合があったのでそれと格闘しました。

## これが使えていれば一番平和　※ダメな事も

よく使われる手法が下記のように、ファイルの更新日時をクエリとして付与する方法。

```html:index.html
<script src="test.js?time=1499939904"></script>
```

しかしこの方法ではキャッシュが使われてしまう場合があるようです。
（Google Chromeで確認）
昔は効いていたので、どこかのアップデートで変わってしまったのかもしれません。

## 一旦妥協 ※ダメな事も(再）

ひとまず変更を反映させる事を優先し、キャッシュの利用を無効化しました。

```html:index.html 
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
```

ところが、これでもキャッシュが使われ続けている事が判明。
調べたところ、フッター付近に記述すれば解消する可能性があるようです。
が、確実性が無いらしく、妥協に妥協を重ねるのも嫌なので抜本的な解決策を模索。

# クエリを使わずに別ファイルとして認識させる

ファイルの更新日時をクエリに使用するのではなく、ディレクトリ名として使う事で解消。

```html:index.html
<script src="/js/1499939904/test.js"></script>
```

```:.htaccess
RewriteEngine On
RewriteRule ^(js|css)/([0-9]+)/(.+\.(js|css))$ $1/$3?time=$2 [QSA]
```

1499939904というディレクトリは存在しないので、.htaccessでリライトして消してしまいます。
他にも環境に合わせて.conf等に記述したり独自のスクリプトで対応してもいいと思います。

同じようにキャッシュに悩まれている方はお試しを！
プロジェクトのAndroid viewにKotlinディレクトリが出ない件

Kotlinの勉強ついでに既存のプロジェクトを変換してみたところ、ディレクトリ名がjavaのままだったので、Refactor→Renameとかやってkotlinに変更したところ、プロジェクトからディレクトリが消えてしましました...

<img width="331" alt="スクリーンショット 2017-07-31 15.54.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/89908/04b8bdbc-24fd-c745-f9b7-beac239f5084.png">

しかし、ビルドも通るし、Project view では見えています。

<img width="379" alt="スクリーンショット 2017-07-31 15.58.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/89908/c7dc4f72-0474-0d21-78c7-2b1b2f509ac7.png">

どうもAndroid viewで見れないのはAndroidStudioが未対応のようです。

ネタ元：[Renaming “java” directory to “kotlin” in Android Studio](https://stackoverflow.com/questions/41467453/renaming-java-directory-to-kotlin-in-android-studio/41534738#41534738)
Jenkinsのシェルスクリプトで特定のプロセスをkillして再起動する

## Golangアプリケーションのリリース
Jenkinsでビルド・デプロイしている人も少なくないかと思います。例えば私の場合はrevel（go言語）のアプリケーションを運用していますが、これまでアプリケーションのバージョンアップ時は次のような手順を行っていました。

1. ソースをローカルでビルドしてリポジトリにプッシュ（手動）
2. Jenkinsでデプロイ（半自動）
3. サーバ上でアプリケーションを再起動（手動）

## アプリケーション再起動の自動化
このうち、No.3の手順をJekinsのシェルから実行できるようにしたのでメモ。

```
PID=/sbin/pidof [対象のアプリケーション実行コマンド *1]
kill -9 $PID
sh run.sh
```
*1 `ps aux`の出力で確認できる


### pidof
`pidof`はプログラムのプロセスIDを調べるコマンドです。`/sbin/pidof`といったようにフルパスで指定しているのは、Jenkinsが乗っているCIサーバからSSH経由で対象サーバ上でコマンドを実行する際に環境変数（PATH）が通常のSSHログイン後のものと異なるからです。このあたりは実際に試して見ると良いかと思います。CIサーバ上からSSH経由でコマンドを実行してみてコマンドがありませんといった旨のエラーが出たときはPATHを疑ってみてください。
Asanaでチームの効率的にタスク管理を行う

## 概要
チームでプロジェクト管理をする場合の注意点などについてまとめました。
会社でAsanaを使っているので、asanaでWeb開発をする場合の知識になります。
asanaを使う前は、各自独自のタスクリストを作ったりしていました。
asanaを使うと、これがより効率的にミスなく運用することができます。

## 主要メンバーとそれぞれの管理目的
ディレクターやデザイナーなど、自分がどのレイヤーに属しているかで欲しい情報が違います。
それぞれレイヤーごとに主な目的を書き出しました。

### マネージャー
プロジェクトの何が動いているかの把握を行います。
見積もりとの工数の乖離がないかなどを把握します。

- 目的：プロジェクト一覧

### ディレクター
進行管理、それぞれのタスク管理を行います。

- 目的：プロジェクト一覧
- 目的：進行スケジュール
- 目的：タスク一覧

### デザイナー、コーダー
実際の制作を行います。

- 目的：タスク一覧

## 開発手法における管理の違い
ローンチ前のサービスに関してはウォーターフールを取ることが多く、開発後のアップデートに関してはアジャイル開発で行うことが多いと思います。

### ウォーターフール開発
最初にプロジェクトを作るときに、Listを使います。
Listにtodoをすべてあげて、それをこなして行くような使い方です。

### アジャイル開発
最初にプロジェクトを作るときに、Boardを使います。
backlog, todo, doneなどのボードを作り、カードを移して行くことで進行させます。

## オプション機能
オプションとして下記の機能を使います。

### タイムマネジメント
Togglを連携させるとタイムマネジメントすることができます。

### ガントチャート
instaganttと連携するとガントチャートを作ることができます。

## まとめ
asanaはチームごとにかなり異なる運用ができるツールです。
サブタスクを使うかどうかなど、チームごとに運用ルールを決める必要があります。
使い方が分かると、ミスなく効率的に運用できるようになります。

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

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


- Twitter　日々のつぶやきはこちら
https://twitter.com/hironado
子コンポーネントから親コンポーネントのイベントを発火する


`emit` を使う。

#子コンポーネント

「追加する」ボタンをクリックすると、親に `add` というイベントが渡される。

```html:child.vue
<template>
	<button class="button" @click="add">追加する</button>
</template>

<script>
    export default {
        methods: {
            add(){
                this.$emit('add');
            }
        }
    }
</script>

```

#親コンポーネント

`add`を検知すると `addProduct` が実行される。

```html:parent.vue
<template>
	<forms @add="addProduct"></forms>
</template>

<script>        
	export default {
		methods: {
			addProduct(){
				console.log("piyo");
			}
		}
	}
</script>        
```

#参考
http://kuroeveryday.blogspot.jp/2016/10/vuejs-components-emit-events.html
goqueryを使ってサイト内のCSSをスクレイピング

サイト内で使用されているCSSを確認しようとしたのですが、膨大なページがあったのでスクレイピングをする事にしました。その時に使用したgoqueryがとても便利でした。

他にもスクレイピング系ライブラリがあるみたいです。
[Go言語のスクレイピング系ライブラリまとめ](http://qiita.com/okataitai/items/db6999ea1ab39ec0bd3e)

goqueryの便利なところは、HTMLのselectorを指定できるので、jQuery感覚で記述できる点です。
以下は、githubからExamplesをお借りしました。

```ExampleScrape.go
func ExampleScrape() {
  doc, err := goquery.NewDocument("http://metalsucks.net")
  if err != nil {
    log.Fatal(err)
  }

  // Find the review items
  doc.Find(".sidebar-reviews article .content-block").Each(func(i int, s *goquery.Selection) {
    // For each item found, get the band and title
    band := s.Find("a").Text()
    title := s.Find("i").Text()
    fmt.Printf("Review %d: %s - %s\n", i, band, title)
  })
}
```
めちゃくちゃ読みやすくないですか？


## sitemapから各ページで使用されているCSSを洗い出す

各ページで使用されているCSSを洗い出すために以下の事を行なっています。
思ったよりサクっとできました:thumbsup:

1. sitemapにあるaタグのhref、タイトルを取得。
2. `http://example.com/`がついていないかチェック。ついていなかったらつける。
3. 重複が存在している場合は削除。（めっちゃdirty）
4. 最後はURLを使って、各ページにアクセスし、CSSを取得・表示。

```main.go
package main

import _ "fmt"

import (
	"bytes"
	"fmt"
	"github.com/PuerkitoBio/goquery"
	"regexp"
)

func main() {
	urls := []string{}
	titles := []string{}
	doc, err := goquery.NewDocument("http://example.com/sitemap/")
	if err != nil {
		fmt.Print("url scarapping failed")
	}
	doc.Find("a").Each(func(_ int, s *goquery.Selection) {
		url, _ := s.Attr("href")
		title, _ := s.Html()
		urls = append(urls, url)
		titles = append(titles, title)
	})
	urls = removeDuplicate(createProtocolUrl(urls))
	for i := range urls {
		doc, err := goquery.NewDocument(urls[i])
		if err != nil {
			fmt.Print("\n", "child url scarapping failed", "\n")
		}
		doc.Find("[rel='stylesheet']").Each(func(_ int, s *goquery.Selection) {
			cssPath, _ := s.Attr("href")
			fmt.Print(titles[i], "  --  ", urls[i], " -> ", cssPath, "\n")
		})
	}
}

func createProtocolUrl(urls []string) (result []string) {
	arrayUrlHasProtocol := []string{}
	for i := range urls {
		var url string
		if hasDomain(urls[i]) {
			url = urls[i]
		} else {
			var buffer bytes.Buffer
			buffer.WriteString("https://example.com")
			buffer.WriteString(urls[i])
			url = buffer.String()
		}
		if url != "" {
			arrayUrlHasProtocol = append(arrayUrlHasProtocol, url)
		}
	}
	return arrayUrlHasProtocol
}

func hasDomain(path string) bool {
	return regexp.MustCompile(`^http://example.com/`).Match([]byte(path))
}

func removeDuplicate(args []string) []string {
	results := make([]string, 0, len(args))
	for i := 0; i < len(args); i++ {
		dup := false
		for j := 0; j < len(results); j++ {
			if args[i] == results[j] {
				dup = true
				break
			}
		}
		if !dup {
			results = append(results, args[i])
		}
	}
	return results
}
```

## まとめ
スクレイピング自体どの言語を使っても割と簡単にできるので、今回はGo言語で行いました。
コードを書くよりも環境設定の方が時間かかりました。結局gopathをどこにしたらいいのかはわからず:cry:
Go自体こういったコードを書くには向いてると思います！
【logrotate】を触ってみる

※古いアカウントに載せてた分を１つにまとめたメモ書きです。
#logrotate設定
##初期の設定ファイルの中身
```/etc/logrotate.conf
 1 # see "man logrotate" for details
 2 # rotate log files weekly
 3 weekly
 4
 5 # keep 4 weeks worth of backlogs
 6 rotate 4
 7
 8 # create new (empty) log files after rotating old ones
 9 create
10
11 # use date as a suffix of the rotated file
12 dateext
13
14 # uncomment this if you want your log files compressed
15 #compress
16
17 # RPM packages drop log rotation information into this directory
18 include /etc/logrotate.d
19
20 # no packages own wtmp and btmp -- we'll rotate them here
21 /var/log/wtmp {
22     monthly
23     create 0664 root utmp
24         minsize 1M
25     rotate 1
26 }
27
28 /var/log/btmp {
29     missingok
30     monthly
31     create 0600 root utmp
32     rotate 1
33 }
34
35 # system-specific logs may be also be configured here.
```
##今回のlogrotate要件
- 5MBを超えたら世代交代
- 最大世代数は10まで
- 世代交代時に圧縮もしてほしい
- ログファイルがない時のエラーは無視

##設定ファイル追加
以下の設定ファイルを追加。

```/etc/logrotate.d/test-log
 1 /jobs/log/job-0001.log  {
 2         size 5M
 3         compress
 4         missingok
 5         rotate 10
 6 }
 7 /jobs/log/sample.log  {
 8         size 5M
 9         compress
10         missingok
11         rotate 10
12 }
```

はじめ、「*.log」としていたが、5MB超えてないファイルまでローテーションされたため別で記述。てっきり勝手にファイル毎に見てくれるんじゃないかと(ry

##オプション
- \-d・・・デバックモードで実行
- \-v・・・詳細表示
- \-f・・・強制実行

```コマンド実行例.
logrotate -dv /etc/logrotate.d/test-log
logrotate -f /etc/logrotate.d/test-log
```
AWSでAmazon Linuxの立ち上げから初期設定まで ssh鍵認証 + php7.1 + nginx (fast CGI) remiいらず

### AWSマネジメントコンソールからインスタンスを立ち上げる
- Amazon Linux AMI 2017.03.1 (HVM), SSD Volume Type」
- t2.micro
- 汎用SSD(GP2) 8G

ほとんどデフォルト状態で立ち上げる。
SSHのポートを22番から2222番に変更するため、セキュリティグループに2222を追加しておく。
pemのパーミッションは600に変更。
ec2-userでターミナルからSSH接続する。

### yum更新
接続したらとりあえずyum更新
`yum update`

### ユーザー作成
ec2-userを変えたいのでユーザーhogeを新しく作る
`sudo useradd -p hoge`

### ユーザー権限
hogeにsudo権限つける
`sudo visudo`

```
root    ALL=(ALL)       ALL
hoge    ALL=(ALL)       ALL #　追加
```

### hogeのSSH接続設定
hogeユーザーになって、SSH鍵を作る

```
$ pwd
/home/hoge

$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/home/hoge/.ssh/id_rsa):#そのままEnter
Created directory '/home/service/.ssh'.
Enter passphrase (empty for no passphrase):#パスワード入力
Enter same passphrase again:#パスワード再入力
Your identification has been saved in /home/hoge/.ssh/id_rsa.#秘密鍵
Your public key has been saved in /home/hoge/.ssh/id_rsa.pub.#公開鍵
```

公開鍵の名前変更とパーミッション変更

```
cat .ssh/id_rsa.pub > .ssh/authorized_keys
chmod 600 .ssh/authorized_keys
rm -f .ssh/id_rsa.pub
```

SSHのポートを22番から2222に変更

`sudo vim /etc/ssh/sshd_config`
~~Port 22~~
Port 2222

変更内容を再読み込み
`sudo /etc/rc.d/init.d/sshd reload`

リモートから秘密鍵を利用して接続を確認。

### PHP7系をインストール
`sudo yum list available | grep php7`
おー7系がある。
前はremiでごにょごにょやらないといけなかったのにさすがamazonさん。
新しいもの好きなのでとりあえず7.1を入れちゃう。

nginxを使うのでfpmも入れておく
`sudo yum -y install php71 php71-mbstring php71-bcmath php71-common php71-devel php71-json php71-mysqlnd php71-fpm php71-gd`

```
$ php -v
PHP 7.1.7 (cli) (built: Jul 17 2017 06:11:12) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies
```

### php-fpmの設定
`sudo chkconfig php-fpm on`
`sudo vim /etc/php-fpm.d/www.conf`
apacheをnginxに変更。
デフォルトでfast CGIを使うようになってる・・・？！
のでlistenはいじらずそのまま。

~~user = apache~~
~~group = apache~~
user = nginx
group = nginx

### php-fpmの起動

```
$ sudo /etc/init.d/php-fpm-7.1 start
Starting php-fpm-7.1:                                      [  OK  ]
```

### nginxをインストール
`sudo yum install nginx`

### nginxの設定
初期の設定をごにょごにょする

```Bash:/etc/nginx/nginx.conf
server_tokens off; #追加

include /etc/nginx/conf.d/*.conf;

# バーチャルホストがメインなのでコメントアウト
# server {
#   ...
# }
```
バーチャルホストの設定

```Bash:/etc/nginx/conf.d/virtual.conf
server {
    listen       80;
    server_name  hoge.example.com;
    root /home/hoge;

    index index.php index.html;
    charset utf-8;

    location / {
      try_files $uri $uri/ /index.php?$query_string;
    }

　　　　　　　　# php-fpm用
    location ~ \.php$ {
      fastcgi_split_path_info ^(.+\.php)(/.+)$;
      fastcgi_pass unix:/var/run/php-fpm/www.sock;
      fastcgi_index index.php;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
      include fastcgi_params;
    }
}
```

### nginxの起動

```
[service@ip-172-31-1-172 ~]$ sudo /etc/init.d/nginx start
Starting nginx:                                            [  OK  ]
```

### ブラウザからページを確認
バーチャルホストで設定したURLをブラウザで確認。


### MySQL5.7のインストール
別記事で書きました。
http://qiita.com/namixc/items/b74778ff947e8e7054e7
Extend Your App’s Presence with Deep Linking

#通常のAPP
The typical user experience involves knowing that the content or function exists in your app; then, navigating through some hierarchy of use in order to find it. This is called the user journey or user activity.
![スクリーンショット 2017-07-31 14.30.32.png](https://qiita-image-store.s3.amazonaws.com/0/192913/e9ce3440-1ae4-7669-397a-6e229d59cc56.png)


#Deep Linkingとは？
Deep links are a way to offer direct access to the content and functions in your app.The way it works is your app is launched, you receive a link, and the app displays the content. The same can be done to complete a function in your app automatically. 
![スクリーンショット 2017-07-31 14.31.47.png](https://qiita-image-store.s3.amazonaws.com/0/192913/a68555bf-21ec-dfeb-38cb-4af582bc2b93.png)

#Demo
メッセンジャーのリンクからビデオAPPの特定動画を再生する
![qqq.png](https://qiita-image-store.s3.amazonaws.com/0/192913/c8fcf6b2-740e-65ea-2c98-69a1b6670da5.png)

#Universal Link(iOS 9以降)
![スクリーンショット 2017-07-31 15.13.48.png](https://qiita-image-store.s3.amazonaws.com/0/192913/c09935b9-4a6e-6b9b-8884-3a896f3e6db1.png)

- The transport syntax for Deep Links 
- Securely map to apps you choose Work universally
- fall back to Safari

#Universal Links実装
- Associated Domainsの追加
- apple-app-site-associationを作成し、Webサイト上に配置
- AppDelegateの実装

```
func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool
```

#利用シーン
- Siri App Suggestions Hand Off (by registering NSUserActivities)
- Widgets
- Quick Actions
- SiriKit
- App to App 
- TV Services

#参考資料
http://dev.classmethod.jp/smartphone/universal-links/
https://developer.apple.com/jp/documentation/General/Conceptual/AppSearch/UniversalLinks.html
https://developer.apple.com/videos/play/wwdc2017/250
SECURITY WARNINGとFaceBookのシェアボタンが叫んでいる。

# FaceBookボタン　-> SECURITY WARNING 
2015年頃にFacebookのApi仕様が変更され、このようなエラーを吐いていたらしい。
シェアボタンといいねボタン両方ダメらしい。

 SECURITY WARNING: Please treat the URL above as you would your password and do not share it with anyone. See the 

こちらのウェブ担の記事を読もう。

<a href="http://web-tan.forum.impressrd.jp/e/2014/11/11/18639">いいね！ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります（公式情報）</a>

## all.jsをsdk.jsに変更すれば解決
![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/d52982a7-9ff0-5918-139d-ba2b6559afac.png)

非常に単純、これでエラーを出さなくなりました


ちなみにシェアボタンのURLの方も少し変わっておりました、変更しなくても動くかな？
![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/8cd2ceda-3369-084b-5cb2-5332907cd2d6.png)



エラーを検知したのはSentryくん、ありがとう
CentOS7.3 環境(Vagrant)に SchemaSpy を導入してみるの巻

# SchemaSpy ってなんじゃい
今あるデータベースからスキーマ情報・ER図、リレーションシップを出力してくれる便利なツールです。いままでの経験上、バグとか発生してプログラム修正するもドキュメントって更新されないことが多いんですよ、とくにテーブル情報のドキュメントって誰も更新しなかったりするんですよね、、。まああとプロジェクト途中で参加したけどそういった設計資料がゼロってとこもあるし。まあ、そういう訳でこういう便利ツールがあるといいわけですｗ。

# SchemaSpy 動作前提条件
とりあえず、Java8 があればいけるっぽい。リレショーンシップは、graphviz インストールする必要があるぐらいかな。とりあえずね。
あとJavaなので好きな環境で使えばいいと思います。

| ソフトウェア | バージョン |
|:-----------|:----------|
|JAVA    |8      | 
|データベース|Mysql,Oracle(default),DB2 ...    |
|schemaspy|6.0.0-rc1     | 
|Graphviz|2.38.0     | 

# インストール
http://schemaspy.readthedocs.io/en/latest/home.html

schemaspy と、MySQL のドライバー、描画するための graphviz をインストールする。

```
/home/vagrant/dbspy
├── /html
├── schemaspy-6.0.0-rc1.jar
└── mysql-connector-java-5.1.43-bin.jar
```

## schemaspy のインストール
とりあえず、こんな感じで。ok。最新版入れればいいと思うよ。

```bash
$ mkdir dbspy
$ cd dbspy
$ wget https://github.com/schemaspy/schemaspy/releases/download/v6.0.0-rc1/schemaspy-6.0.0-rc1.jar
$ mkdir html
```

## MySQL ドライバーのインストール
使用するデータベースのドライバーをインストール。ってほどじゃないけどねｗ。

```bash:
$ cd dbspy
$ wget https://dev.mysql.com/get/Downloads/Connector-J/mysql-connector-java-5.1.43.tar.gz
$ tar zxvf mysql-connector-java-5.1.43.tar.gz
$ cp mysql-connector-java-5.1.43/mysql-connector-java-5.1.43-bin.jar .
```

## graphviz のインストール
[CentOS 7にgraphvizをインストール](http://qiita.com/ynaito/items/efc2dc2085482dfceac5) さんの手順とおりに進めればok。

```bash:
$ wget http://www.graphviz.org/graphviz-rhel.repo
$ sudo cp ./graphviz-rhel.repo /etc/yum.repos.d/
$ sudo yum install graphviz-2.38.0-1.el7
$ sudo yum install graphviz-graphs-2.38.0-1.el7
$ sudo yum install graphviz-gd-2.38.0-1.el7
$ sudo yum install graphviz-devel-2.38.0-1.el7
$ sudo yum install graphviz-lang-python-2.38.0-1.el7
```

# config.file を作成してコマンド実行する。

```text:config.file
# type of database. Run with -dbhelp for details
schemaspy.t=mysql
# optional path to alternative jdbc drivers.
schemaspy.dp=/home/vagrant/dbspy/mysql-connector-java-5.1.43-bin.jar
# database properties: host, port number, name user, password
schemaspy.host=server
schemaspy.port=3306
schemaspy.db=db_name
schemaspy.u=database_user
schemaspy.p=database_password
# output dir to save generated files
schemaspy.o=/home/vagrant/dbspy/html
# db scheme for which generate diagrams
schemaspy.s=dbo
```

と、db接続情報など修正して…。
下記のコマンドを実行する。

```bash:
$ cd dbspy
$ java -jar schemaspy-6.0.0-rc1.jar -configFile config.file
```

実行結果がずらずらコンソールに表示されるのでエラーが表示されていないかぎりは、html ディレクトリに既存のDBスキーマからテーブル情報のドキュメントが生成されます。

http://schemaspy.org/sample/index.html

# 使った感想
400テーブル数ある既存のDBスキーマからテーブル情報のドキュメントを生成したところ、約２時間位かかりました。結果として手メンテする資料より全然イケテルので週末だれも使っていない環境で実行しておくとかいいかもしれない。

# 参考にさせて頂いたサイト様
> [SchemaSpy - 既存のDBスキーマからドキュメント生成](http://www.moongift.jp/2017/07/schemaspy-%E6%97%A2%E5%AD%98%E3%81%AEdb%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%9E%E3%81%8B%E3%82%89%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E7%94%9F%E6%88%90/)
> [CircleCI x SchemaSpyでER図を新しくし続ける](http://hatappi.hateblo.jp/entry/2017/03/28/083000)
dockerでコンテナにログインするのを省力化してみる

*macOS Sierraで動作確認しています。*

コンテナにログインするときに

```
docker exec -it container_name bash
```

と入れるの面倒というか、コンテナ名を入力するのに`docker ps`してコンテナ名コピペしてと大変面倒くさいです。
そこで対話式にログイン出来るシェルスクリプトを作成しました。
下記を~/.bashrcにコピペして`source ~/.bashrc`で使えます。



```bash
function dlogin (){
        SHELL='bash'
        if [ $# -gt 0 ]; then
                SHELL=$1
        fi
        containers=(`docker ps --format "{{.Names}}"`)
        len=${#containers[@]}
        echo "Please enter container number." 
        for (( i = 0; i < $len; ++i )); do
          echo $i ${containers[$i]}
        done
        while read -p "" num ; do
                expr "$num" + 1 >/dev/null 2>&1
                if [ $? -ge 2 ]; then
                        echo "Please enter only numeric characters."
                        return 0
                fi
                if [ $num -lt 0 -o $num -ge $len ]; then
                        echo 'Please enter valid number.'
                        return 0
                fi
                docker exec -it ${containers[$num]} $SHELL
                return 0
        done
}
```

```shell-session
hoge:~ hoge$ dlogin 
Please select container number.
0 haproxy
1 hoge-httpd
2 hoge-data
```

と表示されるのでログインしたいコンテナの番号を入力します。
bash以外でログインするときは引数に使いたいシェルを入れて下さい。

```shell-session
hoge:~ hoge$ dlogin sh
Please select container number.
0 haproxy
1 hoge-httpd
2 hoge-data
```
pluckで取得したデータをハッシュに変換する方法

何回もやり方を忘れるので備忘録代わりに。
任意のカラムの値だけを利用する場合、pluckは検索も取得も早いのでよく使うのですが、
pluckで取れた値は、その後少し使いづらいので、出来ればハッシュ形式にしたいと言った時の書き方。

例えば、

```rb
@user = User.pluck(:id,:name)
```
で、取得した値は

```
pry: @user
=> [[1,abc], [2,cde], [3,efg], ...]
```
となっているので、少し使いづらい。出来れば idをキーにしたハッシュにしたい、と言った時。

```rb
userarray = User.pluck(:id,:name)
@userhash = Hash[*userarray.flatten]
```
とすると

```
pry: @userhash
=> {1=>abc,2=>cde,3=>efg,・・・｝
```

となってくれて、これで、 ' @userhash[2] ' とかで名前を取り出す等が可能です。


<追記>
コメントで .to_hでarrayをハッシュに変換出来るとのご指摘頂きました。
こんな複雑な書き方せずとも、 ` userarray.to_h ` で望む結果が出てきました。
IXS iMCs01をUbuntu1404で使う

##目的
IXS Researchのモータコントローラ、iMCs01をUbuntu14.04で使う方法について。
発売から時間が経ち、マニュアルはUbuntu1204を想定しているが、最新のKernelではそのままコンパイルできない。
http://www.ixs.co.jp/products/controller/imcs01-j.html

##動作確認環境
>Ubuntu 14.04.5(x64) LTS trusty
Kernel　4.4.0-83-generic
gcc (Ubuntu 4.8.4-2ubuntu1~14.04.3) 4.8.4


##カーネルのバージョンを確認する。

```
$ uname -r
4.4.0-83-generic
````

##ドライバーをダウンロードする。
下記のページから、Linux Kernel3.2のドライバーをダウンロードして解凍する。
http://www.ixs.co.jp/support/imcs01d.html

```
$ wget http://www.ixs.co.jp/download/src/imcs01_driver_3.2.tar.gz
$ tar xvfz imcs01_driver_3.2.tar.gz 
````

##ドライバーをmakeする
makeをすると、下記のエラーが発生する。

```
$ cd imcs01_driver/driver
$ make
````

### autoconf.hのコピー
> urbtc.c:24:43: fatal error: linux/autoconf.h: 
そのようなファイルやディレクトリはありません
 #include <linux/autoconf.h>   //chg t.miyo

これは、最新のkernelではautoconf.hの場所が変わってしまったため。
linux以下に、autoconf.hをコピーする。リンクを貼っても良い。

````
$ cd /usr/src/linux-headers-4.4.0-83-generic/include/
$ cd ./generated
$ sudo cp autoconf.h ../linux/
````


###ソースコードの修正
urbtc.c中の、err(...)、dbg(...)関数がエラーを吐いてしまうため、これを全てコメントアウトする。
編集したものは下記に格納。
https://github.com/nnn112358/imcs01_driver-for-Ubuntu1404/blob/master/imcs01_driver%20for%20Ubuntu1404/driver/urbtc.c

```
$ git clone https://github.com/nnn112358/imcs01_driver-for-Ubuntu1404.git
```

##再度make
再度makeし、Driverファイルが生成されれば完了。
>urbtc.ko


##ドライバの読み込み
下記のコマンドで読み込み。

````
$ sudo insmod urbtc.ko
````

iMCs01を USB コネクタに差す。/dev/urbtc0が作られる。

````
$ ls -l /dev/urbtc*
````

アクセス権を変更する。

````
$ sudo chmod 777 /dev/urbtc*
````
ES6のclass記法でのReact.jsでmixinを使う方法

公式ドキュメントに記載されているRect.jsのMixinはES6記法ではサポートされていません。

https://facebook.github.io/react/docs/react-without-es6.html#mixins


# 理想的な実装

可能であればこちらの記事を参考にして、継承でカバーしたほうがいいです。

[React0.13.0-beta.1でのComponentのES6 classでの継承とmixinが使えない理由]
(http://qiita.com/mizchi/items/ce9a128aa2a47804e083)

# 継承でなくES6でない場合のようなmixinとして使いたい場合

[react-mixin](https://github.com/brigand/react-mixin)

こちらのnpmを使えば、ES6のclass記法でも利用でいます。

#使用方法

npm packageをインストール

```
$ npm install --save react-mixin@2
```


こんな感じで書けばmixinとして利用できます。

```js:Sample.jsx
import React, { Component } from 'react';
import reactMixin from 'react-mixin';
import Log from './mixin/Log.jsx';

export default class Sample extends Component {
    render() {
        return <div></div>;
    }
}

reactMixin.onClass(Sample, Log);
```

```js:mixin/Log.jsx
export default {
    componentWillMount(){
        console.log("mounted");
    }
}
```
Riot.js でTagに大文字を使うときの罠

# tl;dr
`riot.mount('#myid', 'UpperCaseTag')`したら
`riot.min.js:2 Uncaught TypeError: Cannot read property 'class' of undefined`ってエラーになったら
`riot.mount('#myid', 'uppercasetag')`でトライしてください。

# 問題
大文字が使われているタグ(例えば`UpperCase.tag`)を`riot.mount('#myid', 'UpperCase')`とするとエラーが出ます。

# 解決法
* タグに大文字を使わないようにしましょう。
* もし大文字が含まれているタグを使う場合は`riot.mount('#myid', 'uppercase')`というように小文字に変えましょう。
* また、`riot.mount('UpperCase')` として`<UpperCase></UpperCase>`とすることで罠から抜け出せます。

# サンプル

```html:sample.html
<!doctype html>

<html>
  <body>
    <script src="UPPER.tag" type="riot/tag"></script>
    <script src="lower.tag" type="riot/tag"></script>
    <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>
     
    <UPPER></UPPER>
    <lower></lower>
    
    <div id="myid1"></div>
    <div id="myid2"></div>
    
    <script>
      riot.mount('lower'); // Both lower and upper cases are ok
      riot.mount('UPPER'); // when selector is not used
      
      riot.mount('#myid1', 'lower');
      // riot.mount('#myid2', 'UPPER'); Upper case tag name is not working
    </script>

  </body>
</html>
```
Plunkerでデモできます。
http://plnkr.co/edit/CX2tdf5AvO6cJkDZINGn?p=info
スケジュール機能を利用したバッチ実行によるレポートの実行

レポートのスケジュール実行と言えば、指定されたタイミングに指定された周期でレポートを実行するものですが、「トリガー」という機能を使用することで、トリガーとなるバッチファイルを実行したタイミングでCognosのレポートが実行されるように設定することが可能です。

設定自体はレポートのスケジュールから設定できます。



##設定方法

トリガー実行したいレポートのプロパティからスケジュールタブを開きます。

スケジュールを「トリガー」に指定します。
ここで、トリガー名も指定しておく必要があります。

![001.jpg](https://qiita-image-store.s3.amazonaws.com/0/146283/ac5347b7-5041-04dd-14c0-ed87087ab009.jpeg)


※フォーマットや配信方法などは、通常のスケジュールと同じように設定します。

##トリガー実行
＜Cognos Analyticsのインストール場所＞\webapps\utilities\trigger 配下にあるtrigger.batに引数を渡しながら実行することで、トリガー駆動がスケジュールされたレポートを実行することができます。
コマンドラインなどからtrigger.batを呼び出してください。
※Linux環境では、trigger.shとなります。

実行コマンドは下記の形式になります。
`trigger.bat URL [username password Namespace ID] "comma separated trigger list"`

例えば匿名認証がオンの環境では下記のようなコマンドになります。
`trigger.bat http://localhost:9300/p2pd/servlet/dispatch trigger`

trigger.bat実行後、下記のメッセージが返されると実行成功となります。
> "Trigger: <trigger name> fired successfully"

![002.jpg](https://qiita-image-store.s3.amazonaws.com/0/146283/0374faff-945f-60f0-ad5f-0a1bc215e623.jpeg)

##実行確認
レポートに対して通知を受け取る設定をしている場合、スケジュール実行がされるとようこそ画面で通知を受け取ることが可能になります。

![003.jpg](https://qiita-image-store.s3.amazonaws.com/0/146283/923ee61b-cfc2-e562-d765-3eea8cec655b.jpeg)




このトリガーによるレポート実行を使用することで、任意のタイミングでレポート実行を可能にすることから、DBのデータが更新されたタイミングで最新レポートを見るといった要件にも対応可能となり、運用の幅が広がる気がします。
DB2DBA: テーブルからテーブルへの直接データLOAD

LOADコマンドの入力ファイルにCURSOR名を指定することで、テーブルからテーブルへ直接データをLOADすることが出来ます。

# 方法
以下のように、LOADコマンドにDECLAREしたCURSOR名とデータタイプCURSORを指定するだけです。

```SQL
DECLARE csr CURSOR
	FOR SELECT * FROM schema1.table1 ;

LOAD FROM csr OF CURSOR INSERT INTO schema2.table2 ;
```


さらに、CURSORをリモートDBのテーブルに対して定義することで、DB間でデータを高速にコピーすることもできます。これはフェデレーションの設定がなくても、リモートDBをカタログさえしていれば実行可能です。

```SQL
CATALOG TCPIP NODE rmtinst REMOTE hostname SERVER svcname ;
CATALOG DATABASE rmtdb AT NODE rmtinst ;

DECLARE csr CURSOR
	DATABASE rmtdb
	USER username
	USING password
	FOR SELECT * FROM rmtschema.rmttable ;

LOAD FROM csr OF CURSOR INSERT INTO localschema.localtable ;
```



# 参考
- [IBM developerWorks - Fast and easy data movement using DB2's LOAD FROM CURSOR feature](https://www.ibm.com/developerworks/data/library/techarticle/dm-0901fechner/)
- [DB2 for Linux UNIX and Windows 11.1.0 - LOAD command](https://www.ibm.com/support/knowledgecenter/en/SSEPGG_11.1.0/com.ibm.db2.luw.admin.cmd.doc/doc/r0008305.html)
- [DB2 for Linux UNIX and Windows 11.1.0 - DECLARE CURSOR statement](https://www.ibm.com/support/knowledgecenter/en/SSEPGG_11.1.0/com.ibm.db2.luw.sql.ref.doc/doc/r0000937.html)
    - DECLARE CURSORでリモートDBを指定するオプションはCLPインターフェース限定の機能であるため、こちらには記載されていません。次の箇所を参照してください。
- [DB2 for Linux UNIX and Windows 11.1.0 - Using command line SQL statements and XQuery statements]
(https://www.ibm.com/support/knowledgecenter/en/SSEPGG_11.1.0/com.ibm.db2.luw.admin.cmd.doc/doc/r0002135.html)
JavaScriptを基礎から学び直してみる#1

##基礎をやり直して地力を鍛える
皆さんこんにちは。
フロントエンジニアとして胸を貼って言えるようになるために日夜奮闘しております。
そこで、なんとなくでしかなかった知識をこのタイミングで基礎から叩き直そうと思いました。
理由は主に下記の３点です。

- あやふやな知識のままではこれ以上の成長は望めない
- プログラムの仕様を理解することで応用力を身につける
- 人の書いたコードを編集するには上辺だけの知識では足りない

特に今回は入社されて間もない方、来年入社される方は自分の持っている知識を「誰かに教えることができるか」を基準に今一度自分の持っている知識について考えて欲しいと思います。

今回勉強するにあたって下記の本を参考にしました。
[「開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質」](https://www.oreilly.co.jp/books/9784873116211/)

##そもそも「JavaScript」って？
簡単に言うと「JavaScript」はWebページに動きをつけるためのプログラミング言語です。
また、世の中には「Java」というプログラム言語も存在します。
「Java」はPCのアプリケーションの開発やAndroidの開発で使用されるプログラミング言語です。
私自身も学ぶまでは勘違いしていましたが、まずは違うものだと認識していただければいいと思います。
また、誰かに質問や話をする際には

- 「Java」は「ジャヴァ」
- 「JavaScript」は「ジェイエス」

と伝えると伝わりやすいと思います。
（カタカナで書くと少し気持ち悪いですが・・・）

##DOMってなに？
「JavaScript」を学ぶ上で重要になってくるのがこの「DOM」と言われるものです。
DOM（Document Object Model）とは、xmlやhtmlの各要素、
たとえば「pタグ」とか「imgタグ」などの要素を操作する仕組みのことです。
よく「DOMが・・・」なんて会話の中で言われますが難しく考えなくて良いです。
プログラミングを学び始めた方は特に聞いた途端に難しく捉えてしまう方も多いかと思います。
（特にデザイナーの方などには多いような印象を受けます）

##jQueryってなに？
一言で言うと「JavaScript」のライブラリです。
ライブラリというのは、「JavaScript」を少ない記述で使いやすくするためのファイルです。
有名なライブラリとしては

- D3.js
- Chart.js
- Vue.js

他にも「JavaScript」のライブラリはたくさんあるので興味があれば試してみてください。

##他人のソースコードを編集していると起こる問題
チームで仕事をするということは当然誰かが書いたコードを編集することになります。
そこで起こる問題としては、「上手く動作しない」「予期しない値が取得されている」などがあげられます。
簡単に言ってしまえば「他の人が書いた処理」が「自分の書いた処理」に影響を与えているわけですが、
そんなときソースコードを読み解く力がないと問題が起こっている原因を突き止められないなんてことが起こります。

- グローバル変数
- ローカル変数
- スコープの考え方
- プロトタイプ継承

など「JavaScript」自体の言語の仕様について知らないと解決できない問題もあったりします。

##ソースコードを読み解く力
一朝一夕で身につけられるものではないです。
どれだけ沢山のソースコードを書いたか、プログラミング言語の仕様を知っているかということに尽きると感じます。
エラーが起こったときに「とにかくいろいろ試してみる」この対応の仕方で始めはいいですが仕事のスピードや生産性を考えたときに限界がやってきます。
また、自分の成長を考えた時も同様で成長できない状態であると思います。
便利なライブラリが沢山あるのでそれでもいいと思われるかもしれませんが、目指す職種によっては全ての元になっている「JavaScript」に対する言語の理解は外すことができない事項だと言ってもいいとすら感じています。

##まとめ
言語の仕様を知らないことで同じ処理を何度も記述してしまったり、無駄に変数を定義したり汚いソースを記述することになります。
一度に全てを理解することは難しいことだと思います。
ただ、「JavaScript」の特性をなんとなくでも知っているだけで問題解決や作りたいものを作るまでの時間は圧倒的に早くなると思います。
言語のリファレンスは英語で書かれていることが多いですが、新しい言語を触るときにはリファレンスを読んで言語の特性を理解することに努めることが本当の意味で使えるプログラムを書けるということだと思います。
組合せ最適化でチーム分けする

# これなに
[Master's Apprentices](http://odapeth.blogspot.jp/)の記事で、「[ワークショップのチーム分けを組合せ最適化問題として解く](http://odapeth.blogspot.jp/2017/06/blog-post.html)」というのを、定式化して解いてみました。

# 問題
**6人**(P,Q,R,S,T,U)を**3チーム**(A,B,C)に分けたい。4つのコミュニケーション能力とその合計をなるべく**均等**にしたい。詳しくは元記事を見てください。

# コミュニケーション能力の得点表
6人のコミュニケーション能力は、コントローラ、プロモータ、サポータ、アナライザごとに下記のように得点化されています。例えば、Pさんのコントローラ能力は6点です。

```py3:python
import numpy as np, pandas as pd
from pulp import *
from ortoolpy import addvars, addbinvars
得点 = pd.DataFrame([[6,0,1,3],[2,-1,3,5],[2,4,0,0],[3,4,5,0],[0,2,1,4],[2,3,-1,1]],
    columns='コントローラ プロモータ サポータ アナライザ'.split(),index=list('PQRSTU'))
チーム数,メンバ数 = 3,得点.shape[0]
print(得点)
```

<table>
  <thead>
    <tr>
      <th></th>
      <th>コントローラ</th>
      <th>プロモータ</th>
      <th>サポータ</th>
      <th>アナライザ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>P</th>
      <td>6</td>
      <td>0</td>
      <td>1</td>
      <td>3</td>
    </tr>
    <tr>
      <th>Q</th>
      <td>2</td>
      <td>-1</td>
      <td>3</td>
      <td>5</td>
    </tr>
    <tr>
      <th>R</th>
      <td>2</td>
      <td>4</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <th>S</th>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>0</td>
    </tr>
    <tr>
      <th>T</th>
      <td>0</td>
      <td>2</td>
      <td>1</td>
      <td>4</td>
    </tr>
    <tr>
      <th>U</th>
      <td>2</td>
      <td>3</td>
      <td>-1</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

# 定式化してPythonで解く
なるべく均等にするには、ばらつきを最小化できればいいですが、素直に定式化すると非線形(2次式)になり解きづらくなります。今回はチーム数が少ないので、最大と最小の差を最小化しましょう。経験的にグループ数が小さければ、分散最小と同じような効果が得られます。
ここでは、チーム内のばらつきの重みを1、チーム間のばらつきの重みを1.5とします。

```py3:python
m = LpProblem() # 数理モデル
x = np.array(addbinvars(メンバ数,チーム数)) # 割当
y = np.array(addvars(チーム数,2)) # チーム内の最小と最大
z = addvars(2) # チーム間の最小と最大
m += lpSum(y[:,1]-y[:,0]) + 1.5*(z[1]-z[0]) # 目的関数
for i in range(メンバ数):
    m += lpSum(x[i]) == 1 # どこかのチームに所属
for j in range(チーム数):
    m += lpDot(得点.sum(1),x[:,j]) >= z[0]
    m += lpDot(得点.sum(1),x[:,j]) <= z[1]
    for k in range(得点.shape[1]):
        m += lpDot(得点.iloc[:,k],x[:,j]) >= y[j,0]
        m += lpDot(得点.iloc[:,k],x[:,j]) <= y[j,1]
m.solve() # 求解
結果x = np.vectorize(value)(x)
print(['ABC'[i] for i in (結果x@range(チーム数)).astype(int)])
>>>
['C', 'A', 'A', 'B', 'C', 'B']
```

元記事と同じ分け方が得られました。
(元記事では、近似解法でしたが、こちらは厳密に解いています)

最大と最小の差分を最小化する方法は、今回用いた汎用ソルバーには、不得意なアプローチなので、大規模になると、計算時間が急激に増えることにご注意ください。その場合は、「ある範囲を外れるとペナルティがつく」ように変更すると、解きやすくなります。

参考
- [組合せ最適化でグループ分け](http://qiita.com/SaitoTsutomu/items/9218e39a6604b2e0be14)
- [組合せ最適化で、ゲームのグループ分け](http://qiita.com/SaitoTsutomu/items/595d921758a5fbd73296)

以上
Dockerコンテナのメトリクス監視してますか？

どうも僕です。タイトルどおりです。
Dockerコンテナのメトリクス監視してますか？？？

本番環境ならDataDogとかそのへんで監視していてもローカル環境のやつ確認してないこと多くないですか？

※ 僕はしてないです。dd-agentローカルにも入れれば終わりじゃんって話なんですが、なんかあれじゃないですか。。。

監視してなかったお陰で、高負荷時に突然死する原因を調査したい場合に、無事頭を抱えました。(原因はメモリ枯渇してた)

そこで、コンテナ名, コンテナID, CPU, MEM, NET RX/TX, IO R/W, PIDS 情報が見れたらいいのになーを調べてたらさくっと見れることに気づいたので記事にまとめておきます。

やりたかったのはこういうやつです。
![expanded.gif](https://github.com/bcicen/ctop/blob/master/_docs/img/single.gif?raw=true)


# 本家の付随機能を利用する

https://docs.docker.com/engine/reference/commandline/stats/

コンテナのリソース使用状況をライブで流し続ける

## 使い方

```
docker stats [オプション] [コンテナ...]
```

## オプション


| 名前, 省略形 | デフォルト | 説明 |
|---|---|---|
| --all, -a | false | 全てのコンテナを表示（デフォルトは実行中のみ）|
| --format |  | Goテンプレートで整えて表示 |
| --no-stream | false | ストリームを無効化し、初回結果のみ表示 |

## フォーマット

| プレースホルダー | 説明 |
|---|---|
| .Container |コンテナ名 もしくは コンテナID(user input)|
| .Name |コンテナ名|
| .ID |コンテナID|
| .CPUPerc |CPUパーセンテージ|
| .MemUsage |メモリ使用量|
| .NetIO |ネットワークIO|
| .BlockIO |ディスクIO|
| .MemPerc |メモリパーセンテージ(Windowsは使用不可)|
| .PIDs |PID番号(Windowsは使用不可)|

## 使用例

```
$ docker stats
CONTAINER           CPU %               MEM USAGE / LIMIT     MEM %               NET I/O             BLOCK I/O           PIDS
77dd929886dd        0.01%               41.3MiB / 995.8MiB    4.15%               648B / 0B           315kB / 0B          12
68e984e2c6a4        0.07%               225.9MiB / 995.8MiB   22.69%              648B / 0B           2.04MB / 12.9MB     27
```

```
$ docker stats --format "table {{.ID}}\t{{.CPUPerc}}\t{{.MemUsage}}"
CONTAINER ID                                                       CPU %               MEM USAGE / LIMIT
77dd929886dd8a6e75ee2a53624431186ec43f60d446067ad57b94641ce22912   0.01%               41.3MiB / 995.8MiB
68e984e2c6a4024f3d85ddc46252a433098573935baebe269567fa5a65848d37   0.05%               225.9MiB / 995.8MiB
```

# ctopを使う

https://github.com/bcicen/ctop

topライクなコンテナのメトリクス監視


## 使い方

デフォルトでDOCKER_HOSTを使用します。connectorオプションを使うことでDocker or RunCに対応することができるみたいです。(デフォルトでしか試していないです)

```
$ ctop [オプション]
```

## オプション

| 名前 | 説明 |
|---|---|
|-a |	起動してるコンテナのみ表示|
| -connector | 使用するコンテナコネクタを設定(docker, runc) |
|-f |	初期のフィルター文字列を設定|
|-h	| ヘルプ表示|
|-i	| デフォルトの色を反転|
|-r	| コンテナの逆順ソート|
|-s	| 初期のコンテナのソートフィールド選択(cpu, id, io, mem, mem %, name, net, pids, state)|
|-v	| バージョン情報|

## キーバインド

| 名前 | 説明 |
|---|---|
|a| 全コンテナ表示と起動してるコンテナ表示の切り替え|
|f| 表示するコンテナのフィルター|
|H| ctopのヘッダー表示の非表示の切り替え|
|h| ヘルプ表示|
|s| ソートフィールドの変更|
|r| コンテナの逆順ソート|
|q| 終了|

## 使用例

公式のdocから引用してます。

![grid.gif](https://github.com/bcicen/ctop/blob/master/_docs/img/grid.gif?raw=true)

詳しく見たいコンテナを選んでenterを押すと

![expanded.gif](https://github.com/bcicen/ctop/blob/master/_docs/img/single.gif?raw=true)

# まとめ

デフォルトの機能でもできるけど若干見づらいのでグラフィカルに調査したい場合はctop使いましょう！もちろん開発環境の話です。
Atomにインストールしたパッケージ一覧をファイルに書き出し&まとめてインストール

`apm`を使います。インストールしてない人はたしかメニュー辺りからできたと思います。

## ファイルに書き出し

叩くのは次のコマンド。

```bash
 apm list -bi --no-dev > Apmfile
```

これでApmfileにパッケージ一覧が保存されます。

```:Apmfile
atom-beautify@0.30.3
atom-ternjs@0.18.3
autoclose-html@0.23.0
...
```

以下少しフラグの説明。

## `-b` 

```
Built-in Atom Packages (n)
├── atom-dark-syntax@0.28.0
├── atom-dark-ui@0.53.0
...
```

をこんな感じに。

```
atom-dark-syntax@0.28.0
atom-dark-ui@0.53.0
...
```

## `-i`

インストールしたものだけ表示。（コアパッケージとかを含めない）

## `--no-dev`

atomのパッケージを作ったりする人用で開発モードで入れてるパッケージを含めない。（デフォルトは含まれる）

## まとめてインストール

別の環境に先程のApmfileをコピーして、次のコマンドを叩く。

```bash
apm install --packages-file Apmfile
```
javascriptで特定の文字が含まれているか確認する【注意：matchとincludesの違い】

# javascriptで特定の文字列が含まれているか確認する方法
javascriptにて特定の文字列が含まれている確認する方法を２つ紹介します、

もちろんjsにはその他にも判定する方法はたくさんありますが、
実際にはまってエラーを大量発生させたので、その原因となった２つのメソッドの正しくない利用方法も紹介します。

## includesメソッド
includesメソッドは特定の文字列が含まれるか、含まれていないかをbool型で返してくれます。



```js:example.com/category/cute/
console.log("------includes--------");
console.log(location.href.includes("/category/"));
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/718bcd41-f68b-bbc7-c1f1-6ab2ca3f266d.png)

### 【ブラウザ実装状況に注意】
非常に便利ですが、以前対応ブラウザを確認せずに利用して、
古いAndroidとiPhoneにて商品一覧が出ないというクレームにつながりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/4615c274-df24-1c99-3045-da096b9eb745.png)
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">MDN web docsより引用</a>



## matchメソッド
### 【matchメソッドの戻り値は bool型ではないことに注意】
```js:example.com/category/cute/
console.log(location.href.match("/category/"));
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/68b6ffa6-bb85-2066-43e1-8df83708f2bb.png)

### 【categoryが含まれない場合は nullが返る】

```js:example.com/
console.log(location.href.match("/category/"));
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/dae1d347-e7e1-a5f0-05a7-dc2e0dcc06d1.png)

### 【matchメソッドで文字が含まれるか確認する方法】

```js:example.com/category/cute/
console.log("------match--------");
console.log(location.href.match("/category/")!=null);
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/739ce68d-2cfd-cba7-ca96-09ec4370419f.png)

ただ、jsのnullはif文に入れるとfalse判定されるので入れなくても使える説がありますがあまりよろしくないように思えます

### 【ブラウザ実装状況】
ブラウザ実装状況は優良です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/b2b36bc7-1a86-3239-ba11-6231d2daa3b3.png)
<a href="http://js.studio-kingdom.com/javascript/string/match">js studioより引用</a>

## includesとmatchメソッドの違い
古いブラウザにも対応したい場合はmatchメソッド。
最新のブラウザだけ対応すればよく、綺麗に書きたいのであればincludesメソッド。

そもそもmatchメソッドには別の用途があるのでこれで判断するのが正しいとは言えませんが、そう使い分けたいと思います。

```js:index.js
console.log("------match--------");
console.log(location.href.match("/category/")!=null);
console.log("------includes--------");
console.log(location.href.includes("/category/"));
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/af7e1f52-0b4e-e0db-b114-d5db93659a7c.png)
GitLabでメンバーを追加して、netbeansでクローンさせる手順

##GitLab側準備
①GitLabでメンバーを追加したいプロジェクトを開く
↓
右側歯車アイコンのメニューからメンバーを選択
↓
招待したい人を追加する。

②プロジェクトのhttpをコピーして招待したい人に教えておく。

##netbeans
上部メニューより`チーム>git>クローン`を選択。
↓
リポジトリURLに②でコピーした物を挿入。
↓
 GitLabのユーザー名とパスワードを入力。
R(shiny) でDT(DataTables)の日本語化

##需要なさそうだけど、、
一人で無意識に使う分には何の問題も無いですが、一般向けサービスを作ろうとした時に「なんで英語なんじゃい」とよくクレームがあったりすると思うので、そんな時にご使用ください。

##サンプルコード
optionsリストのlanguageリストにパラメターを渡します。
```
DT::renderDataTable(options = list(language = list(url = '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json')),
data.frame.to.output
)
```
OS X (El Capitan) > Time Machine > 外付けHDDにTime Machineでバックアップする場合にはsparsebundleイメージファイルは使用されません

```txt:動作環境
OS X El Capitan
外付けHDD (Thunderbolt接続)
```

外付けHDDをTime Machineで使う際、全部の容量を使うのでなく、一部を使う設定を探していた。

見つけたのがNASでの設定だった。
http://papativa.jp/archives/2290

sparsebundleファイルを書替えることで可能とのこと。

しかしながら、実際に外付けHDDにTime Machineで書込みをしてもsparsebundleファイルは作成されない。

https://discussionsjapan.apple.com/thread/10092945?tstart=0
> FileVaultもsparsebundleイメージファイルを使用しますが、Time MachineはTime Capsuleにバックアップする際に使います。複数ユーザが別々にバックアップ出来るようにするための工夫と思われます。
**外付けHDDにTime Machineでバックアップする場合にはsparsebundleイメージファイルは使用されません**。

NASと外付けHDDでバックアップの仕組みが違うようだ。

### 外付けHDDの分割

実際に行いたいことは以下だった。
http://www.comshop.co.jp/syokika/st-backupmac.html
Processing で、Arduino の LED を点灯させる

[Arduino IDE](https://www.arduino.cc/en/software)と、[Processing](https://processing.org/download)がインストールされている状態からの設定の方法は、こちら。

* [ProcessingでArduinoを操作するための準備](http://kimizuka.hatenablog.com/entry/2015/05/01/000000)

マウスを押さえている間は、Arduino についている LED がつき、マウスを放せば、LED が消えるサンプルです。

```java:button/button.pde
// --------------------------------------------------------------
/*
	button.pde

					Jul/31/2017

*/
// --------------------------------------------------------------
import processing.serial.*;
import cc.arduino.*;

Arduino arduino;
int ledPin = 13;
color bgColor = color(0);

void setup() {
size(400, 200);
arduino = new Arduino(this, Arduino.list()[0], 57600);
arduino.pinMode(ledPin, Arduino.OUTPUT);
}

void draw() {
background(bgColor);
}

void mousePressed() {
arduino.digitalWrite(ledPin, Arduino.HIGH);
bgColor = color(0,255,0);
}

void mouseReleased() {
arduino.digitalWrite(ledPin, Arduino.LOW);
bgColor = color(0);
}
 
// --------------------------------------------------------------
```

ProcessingIDE の中からだけでなく、コンソールからも実行ができます。

```bash
processing-java  --sketch=button --run
```
備忘ポエム(随時更新)

#2017/11/28
##お勧め記事
[DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話](https://www.slideshare.net/koichiromatsuoka/ddd-x-cqrs-orm)

#2017/11/27
##Speedmentさんが内部的にClass#forName(String)でJDBCのDriverを直接呼び出している件について。
[PostgresqlDbmsType#getDriverName()が](https://github.com/speedment/speedment/blob/master/runtime-parent/runtime-core/src/main/java/com/speedment/runtime/core/internal/db/postgresql/PostgresqlDbmsType.java)
[AbstractDbmsType#isSupported()から呼ばれてる](https://github.com/speedment/speedment/blob/master/runtime-parent/runtime-core/src/main/java/com/speedment/runtime/core/internal/db/AbstractDbmsType.java)
まぁ、その結果を返すわけではないのでDriverManager#registeredDriversの登録処理起動だけみたいだけど。

#2017/08/01
##お勧め記事
[Awesome Java：素晴らしいJavaフレームワーク・ライブラリ・ソフトウェアの数々](http://qiita.com/h_network21/items/7868996e3eb5fa55f11a)

#2017/07/31
##javax.crypto.Cipher
[Cipher (Java Platform SE8)](https://docs.oracle.com/javase/jp/8/docs/api/javax/crypto/Cipher.html)
暗号化、複合の処理を透過的に行うためのフレームワークコアである。
基本的には`Cipher#doFinal(byte[])`にて暗号化/複合結果を取得する。
`Cipher#doFinal(byte[], int, int, byte[], int)`は引数1の暗号化/複合結果を、引数4の引数5以降に出力する。この際、引数1と引数4は同一の参照であることをAPIとして許容しているため、メモリ空間の節約に役立つ。
また、連続したデータを取り扱う場合には同様に`Cipher#update(byte[])`などを使用する必要があるが、最終段階で`Cipher#doFinal()`などを呼び出す必要がある。

##javax.crypto.CipherInputStream / javax.crypto.CipherOutputStream
[CipherInputStream (Java Platform SE8)](https://docs.oracle.com/javase/jp/8/docs/api/javax/crypto/CipherInputStream.html)
[CipherOutputStream (Java Platform SE8)](https://docs.oracle.com/javase/jp/8/docs/api/javax/crypto/CipherOutputStream.html)
上記Cipherを使用したI/O Streamクラス、ストリーム処理が必要な場合やデータサイズが大きい場合にはこちらが楽。
ファイルシステムの上限を超えるようなデータを処理する場合にはどちらにせよ一考する必要があるが。
Windowsのスクリプトで入力プロンプトなしで別のユーザーとしてプログラムを実行する方法

# 概要

システム構築の自動化をしていると Windows で別のユーザー権限でコマンドを実行したいときが出てくる。そういうときには真っ先に別ユーザーとして実行するコマンドの `runas` を思い浮かべるかもしれないが、これは入力プロンプトが表示されるので自動化には向かない。こういうときは `schtasks` を使うようだが普通に書くとスクリプトが汚れるので `schtasks` で実行する部分を取り出したスクリプトを書いてみた。

## 実行スクリプト

 下記スクリプトを `schexec.ps1` として保存する。

```powershell:schexec.ps1
Param(
    [string]$jobUser,
    [string]$jobPassword,
    [string]$execCommand
)
# Changes the active console code page to Shift-JIS (932). 
chcp 932 | Out-Null

$taskname = "SCHEXEC.TASK.$(Get-Random).$(get-date -f 'yyyy-MM-dd_hh_mm_ss')"
$taskscript = "${Env:TEMP}\${taskname}.ps1"
$donefile = "${taskscript}.done.txt"

Write-Host "Create task script"
echo @"
Param(
)
chcp 932 | Out-Null
Set-Location -Path "$((Get-Item -Path ".\" -Verbose).FullName)" -PassThru
Write-Host "Start task script."
`$arguments = @("/c", "$execCommand")
`$proc = Start-Process "cmd.exe" -ArgumentList `$arguments -PassThru -Wait
`$proc.WaitForExit()
"done" | Out-File "$donefile"
"@ >$taskscript

Write-Host "Create job"
schtasks.exe /CREATE /RU "$jobUser" /RP "$jobPassword" /SC DAILY /TN "$taskname" /TR "powershell -file $taskscript" /ST "00:00:00" /F

Write-Host "Run job"
schtasks.exe /RUN /TN "$taskname"

Write-Host "Waiting for job to be done..."
while (!(Test-Path "$donefile")) { Start-Sleep 1 }

Write-Host "Delete job"
schtasks /DELETE /TN "$taskname" /F
```

## 使い方

 Powershell スクリプト, もしくは Bat ファイルで `shchexec.ps1` ファイルを以下のように呼び出す。

```
schexec.ps1 [実行したいユーザー名] [実行したいユーザーのパスワード] [実行したいコマンド]
```
Gradle で FindBugsをかけるとHTMLで結果を出力してくれない

# あらまし

Gradle で FindBugs をかけるには、`findbugs {}` をサブプロジェクトに書くだけで良い。
が、そのままではXMLでのみ結果が出力され、HTMLでは出力されない。

HTMLで出力する方法を紹介する。

# 方法

（Androidの場合）サブプロジェクトの`build.gradle` に以下を記載する。

```groovy:build.gradle
tasks.withType(FindBugs) {
    reports {
        xml.enabled = false // これを書くとXML出力を止めることができる
        html.enabled = true
    }
} 
```

これによって、FindBugsの結果がHTMLで出力されるようになる。

# 参考

https://stackoverflow.com/questions/15406469/how-to-generate-html-output-using-gradle-findbugs-plugin
[Android] FindBugs, PMD, checkstyle をGradle公式の方法で実行する

# tl;dr

https://plugins.gradle.org/plugin/io.freefair.android-checkstyle

# あらまし

Gradle で FindBugs, PMD, checkstyle をかけるプラグインは本家で紹介されているが、
Android の Gradleではそのままでは動かないようだ。

* http://gradle.monochromeroad.com/docs/userguide/findbugs_plugin.html
* http://gradle.monochromeroad.com/docs/userguide/pmd_plugin.html
* http://gradle.monochromeroad.com/docs/userguide/checkstyle_plugin.html

そのため、Gradle公式の方式ではなく独自にアレンジする方法が紹介されている。

* https://stackoverflow.com/questions/29967309/findbugs-android-gradle-plugin
* http://yuki312.blogspot.jp/2014/12/androidfindbugs.html

しかし、Gradle公式の方法で使えるに越したことはないので、それをするための方法を紹介する。

# 方法

以下のプラグインを組み込む。

https://plugins.gradle.org/plugin/io.freefair.android-checkstyle

```groovy:最上位のbuild.gradle
buildscript {
  repositories {
    maven {
      url "https://plugins.gradle.org/m2/"
    }
  }
  dependencies {
    classpath "io.freefair.gradle:android-gradle-plugins:2.3.1"
  }
}
```

```groovy:サブプロジェクトのbuild.gradle(Ex.app/build.gradle)
apply plugin: 'io.freefair.android-findbugs' 
apply plugin: 'io.freefair.android-pmd'
apply plugin: 'io.freefair.android-checkstyle'
```

あとは、Gradle公式の通りに`findbugs{}`, `pmd{}`, `checkstyle{}`をサブプロジェクトに書けばよい。

# まとめ

Android プロジェクトのGradleでも、Gradle公式の方法で各種静的解析ツールを適用することができた。
`getstorybook`したら`Unsupported Project type.`と言われた

```bash
getstorybook  
# getstorybook - the simplest way to add a storybook to your project. 

# • Detecting project type. ✓
#    Unsupported Project type. (code: UNDETECTED)
#    Visit https://storybook.js.org for more information.
```

最低限`react`と`react-dom`をインストールしないと駄目です🙅

```bash
npm init -y
npm i react react-dom
```

おわり。