OmniAICreator/Qiita-1.07M huggingface dataset:
EC2+RDSにMauticを入れてみた

EC2+RDSの設定については触れてません。
EC2はAmasonLinuxで立ち上げています。

スライドモードの方が見やすそうなのでスライドモードにしています。
手順は5つほどです。

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

###1)Apache＋PHP+Mysqlを導入する
まずEC2とRDSを用意して下さい。
EC２にSSH接続して以下のコマンドを実行して下さい。

Mysqlは不要なものも導入しています。
この構成で導入すると、MysqlでDBをローカル(EC2内)に構築してMauticを動かす事も可能です。

```
$ sudo yum install httpd24
# apacheをインストール

$ sudo yum install php56 php56-devel php56-cli php56-gd php56-mbstring php56-pecl-memcached php56-mysqlnd php56-xml php56-opcache php56-mcrypt
# phpをインストール

yum install mysql56 mysql56-common mysql56-devel mysql56-server mysql56-libs
# mysqlをインストール

$ sudo chkconfig httpd on
$ set httpd to start apps
$ chkconfig
# apacheをサーバーの起動と同時に起動する(最後のchkconfigはチェック用)

$ sudo service httpd start
# apacheスタート
```

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

###2)Mauticを導入する

```
$ cd /usr/local/src
$ sudo curl -sS https://getcomposer.org/installer | sudo php
$ sudo mv composer.phar /usr/local/bin/composer
# composerを取得します、取得したcomposerは/usr/local/bin/composerに移動

$ sudo wget https://github.com/mautic/mautic/archive/master.zip
# mauticを取得します

$ sudo unzip master.zip
# mauticを解凍

$ cd mautic-master/
$ sudo /usr/local/bin/composer install
# mauticして出来上がったディレクトリに移動して、composerをインストール

$ sudo cat /etc/httpd/conf/httpd.conf | less
# apacheの設定ファイルでDocumentRootが何処に設定されているか確認して下さい。
# 検索コマンドは 「/DocumentRoot」です。今回の検索結果は「/var/www/html」でした。

$ sudo mv -v ./* /var/www/html
# MauticアプリをDocumentRootに移動します。
```

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

###3)ディレクトリのユーザーグループとパーミッションを変更します

```
$ cd /var/www/html/
# DocumentRootに移動

$ sudo cat /etc/httpd/conf/httpd.conf | less
# ユーザーとグループを確認します。
# 検索コマンドは「/User」と「/Group」です。今回の検索結果は「apache：apache」でした。

$ sudo chown -R apache:apache /var/www/html/app/cache
$ sudo chown -R apache:apache /var/www/html/app/logs
$ sudo chown -R apache:apache /var/www/html/app/config

$ sudo chmod -R 775 /var/www/html/app/cache
$ sudo chmod -R 775 /var/www/html/app/logs
$ sudo chmod -R 775 /var/www/html/app/config

$ sudo service httpd restart
# apacheリスタート
```

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

###4)ブラウザからページにアクセスすると、エラーが出たので対応
![スクリーンショット 2016-07-22 17.40.17.png](https://qiita-image-store.s3.amazonaws.com/0/63777/4c8f7c59-f5ef-61bb-53ab-b0b5d6fe8472.png)
エラーが出てる・・・。
と言うことで対応します。
基本的にはエラー内容に書かれている通りです。
php.iniの該当箇所のコメントアウトを外すだけ。

ちなみにphp.iniの場所が分からなければ以下のコマンドをEC2上で叩きます。(試してないです。)
```$ sudo find / -name 'php.ini'```

コメントアウトを外すのは、「always_populate_raw_post_data = -1」。
なので、vimか何かでphp.iniを開いて、「always_populate_raw_post_data」を検索します。
vimだと検索コマンドは「/always_populate_raw_post_data」です。

-----------

###5)指示に従って、Mauticを設定する
Mauticの設定では、DBへの接続情報を聞かれます。
ここにRDSの情報を記載して下さい。

EC2からRDSへの接続が出来るか、事前に確認しておいた方がいいかもしれません。

-----------

#####参考サイト：[AWS EC2 に Mautic をインストールする](https://concrete5.co.jp/blog/install-mautic-on-aws-ec2)
インストールされたリポジトリの一覧とリポジトリに含まれるパッケージの一覧を確認


元ネタ: [YUM Query Available Packages From Specific Repository on Fedora, CentOS, Red Hat | If Not True Then False](http://www.if-not-true-then-false.com/2010/query-available-packages-from-specific-yum-repository-on-fedora-centos-red-hat/)


# インストールされたリポジトリの一覧

```
$ yum repolist all
```

現在、有効なものの一覧は

```
$ yum repolist
```



# リポジトリに含まれるパッケージの一覧


リポジトリ"mysql56-community"に含まれるパッケージの一覧

```
$ sudo yum --disablerepo="*" --enablerepo="mysql56-community" list available
読み込んだプラグイン:amazon-id, rhui-lb, search-disabled-repos
利用可能なパッケージ
mysql-community-bench.x86_64                              5.6.31-2.el7                      mysql56-community
mysql-community-client.i686                               5.6.31-2.el7                      mysql56-community
mysql-community-common.i686                               5.6.31-2.el7                      mysql56-community
mysql-community-devel.i686                                5.6.31-2.el7                      mysql56-community
mysql-community-devel.x86_64                              5.6.31-2.el7                      mysql56-community
mysql-community-embedded.i686                             5.6.31-2.el7                      mysql56-community
mysql-community-embedded.x86_64                           5.6.31-2.el7                      mysql56-community
mysql-community-embedded-devel.i686                       5.6.31-2.el7                      mysql56-community
mysql-community-embedded-devel.x86_64                     5.6.31-2.el7                      mysql56-community
mysql-community-libs.i686                                 5.6.31-2.el7                      mysql56-community
mysql-community-server.x86_64                             5.6.31-2.el7                      mysql56-community
mysql-community-test.x86_64                               5.6.31-2.el7                      mysql56-community
```
s3fsでマウント(IAM：ユーザー)

S3をマウントする方法は２種類(s3fs,goofys)ありますが、そのうちのs3fsでのマウントを記録します。
goofysでマウントが気になる方は[こちら（IAM設定あり）](http://qiita.com/mint/items/20f77d81726eecba6a22)にあります。

#IAMの設定とバケットの作成
##IAMの設定
冒頭にあるgoofysのリンクのIAMの設定を見てください。
1,ユーザー作成
2,ポリシー作成
3,ユーザーにポリシーをアタッチする
をやるだけでいいです。
##バケットの作成
S3のサービスを開いてバケットの作成。適当にリージョンと名前を決め作成する。

#s3fsでマウント
・rootユーザーで基本作業します

```
sudo su
cd
```


##s3fsのインストール

```
yum -y install git automake gcc-c++ fuse fuse-devel libcurl-devel libxml2-devel openssl-devel
wget https://github.com/s3fs-fuse/s3fs-fuse/archive/v1.78.tar.gz
tar xzvf v1.78.tar.gz
rm -f v1.78.tar.gz
cd s3fs-fuse-1.78/
./autogen.sh
./configure prefix=/usr
make
make install
```


##IAMで作成したユーザーをs3fsに登録
`vi /etc/passwd-s3fs`

```text:passwd-s3fs
バケット名:アクセスキー:シークレットキー
```

・権限変更
`chmod 640 /etc/passwd-s3fs`

##s3fsでマウント手順

```
cd ~
touch s3fs-mount.sh
chmod u+x s3fs-mount.sh
vi s3fs-mount.sh
```


マウントポイントは自分で適当な場所に`mkdir`で作成してください。

```text:s3fs-mount.sh
#!/bin/bash
s3fs [バケット名] [マウントポイントのディレクトリ] -o allow_other,use_cache=/tmp,uid=[UID],gid=[GID],passwd_file=/etc/passwd-s3fs
```

```text:例
#!/bin/bash
s3fs example-s3buket /home/ec2-user/s3-mountpoint -o allow_other,use_cache=/tmp,uid=500,gid=500,passwd_file=/etc/passwd-s3fs
```

・実行
`./s3fs-mount.sh`

・確認
`df -h`実行結果にs3fsと自分がマウントしたディレクトリ名が出てくれば成功


以上終わりです。
#自動起動とアンマウントのやり方
##自動起動
`vi /etc/fstab`
fstabに以下を追記する

```text:fstab
s3fs#[バケット名] [マウントするディレクトリ] fuse allow_other,use_cache=/tmp,uid=[UID],gid=[GID],passwd_file=/etc/passwd-s3fs 0 0
```

```text:例
s3fs#example-s3buket /home/ec2-user/s3-mountpoint fuse allow_other,use_cache=/tmp,uid=500,gid=500,passwd_file=/etc/passwd-s3fs 0 0
```

##アンマウント方法
以下のコマンドを使用
`fusermount -u [マウントしたディレクトリ]`

（`umount`だとエラー出てくる。`fuser -k [マウントしたディレクトリ]`で対処できますが…）

#感想
goofysとs3fsと両方いじったのですが、早いのはgoofysのほうが明らかに早い。
s3fsはviなどcatやlsに少し時間がかかる。
S3をもとにftpサーバーを作るのにvsftpdとgoofysの相性がよくないと聞いたので仕方なくs3fsを使用しています。

s3fsでは初めてマウントしたときにもともとS3のなかにあったものはすべてのパーミッションが000になります。
ですが、chmodでおのおのパーミッションの設定ができるのがいいと思います。
goofysではchmodで変更できないです。マウント時にパーミッションの設定をしますので、すべて統一のパーミッションになります。


#参考サイト
http://qiita.com/hmitr/items/155f25e50e4dcb287979
http://qiita.com/wanghm/items/1561b0f2a9a90fba716f
http://qiita.com/daigo2010/items/636d0b4217faf197eb52
https://curecode.jp/tech/install-s3fs-1-78-on-amazon-linux/
http://dev.classmethod.jp/cloud/aws/s3fs-ec2-mount-s3/
Bash | 変数に収めた複数行テキストの差分=差集合を得る

# 問題

複数行のテキスト

```
A
B
C
```

```
B
C
D
```

を比較して、**前者には存在するが、後者には存在しない値 (A)** を得たい。

# 回答例

```bash:diff.sh
expect=$(cat << EOM
A
B
C
EOM
)

exist=$(cat << EOM
B
C
D
EOM
)

diff=$(join -v 1 <(echo "$expect") <(echo "$exist"))
echo $diff
```

# 結果

```
$ bash diff.sh

A
```

# 環境

- bash 3.2

# 参考

- [コマンドラインで集合演算](http://qiita.com/highfrontier/items/610cd285f0c0de480ac9)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
複雑な(説明|定義)リストdl,dt,ddの見た目を表のようにするCSS

## 概要
`dt`と`dd`が1:1対応で`dt`の方が中身が長かったり，`dd`の方が中身が長かったりする(説明|定義)リストの見た目を表のようにするCSSの書き方
いろいろ試行錯誤の末，1つの答えを見つけたのでまとめる

今回は特に下記のように，表の左側に背景色をつける場合

## つまり

```html:html
<dl>
    <dt>short-short</dt>
    <dd>short-short-short</dd>
    <dt>middle-middle-middle-middle-middle-middle-middle</dt>
    <dd>long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long</dd>
    <dt>long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long</dt>
    <dd>short</dd>
    <dt>middle-middle-middle-middle-middle</dt>
    <dd>long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long</dd>
    <dt>middle-middle-middle-middle-middle-middle-middle</dt>
    <dd>long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long</dd>
    <dt>long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long</dt>
    <dd>short</dd>
</dl>
```

のような(説明|定義)リストを

![dl-table.png](https://qiita-image-store.s3.amazonaws.com/0/70183/09c77e46-6760-a32b-6d6d-98d3f8e6c15d.png)

のようにする

## 結論

```css:css
dl,
dt,
dd {
  box-sizing: border-box;
}
dl {
  background: #eee;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
dt,
dd {
  padding: 10px 10px 0 10px;
  border-top: 1px solid #ccc;
}
dt {
  width: 40%;
  float: left;
}
dd {
  background: #fff;
  margin-left: 40%;
  padding-bottom: 10px;
  border-left: 1px solid #ccc;
}
dd:after {
  content: '';
  display: block;
  clear: both;
}

```

## TIPS

- `dt`には`float: left;`付けるが，`dd`には付けない
- `dt`の幅と同じだけ`dd`の左マージンをあける
- `dd`の後(擬似要素after)で回り込みを解除する(`float: left;`)
- 表内部のpaddingの内，`padding-bottom`は`dd`にのみ付ける
- 表の左側の背景色で背景色で表全体を塗った上で，右側(`dd`)の背景色を全体の背景色と同じにする

1つ残念な点としては，本来，背景色をつけない方の背景色を背景と同じ色にしなくてはならないということ．
ただ，表の右半分にのみ背景色を付けたい場合はこの分ではないし，リクワイアメントは達成できていると思う．
Amazon Linux+Apache2.2+PHP5.6


コマンドだけです。

```
# sudo -s
$ cat /etc/system-release
Amazon Linux AMI release 2016.03

$ yum install httpd
$ yum install httpd-devel
$ httpd -v
Server version: Apache/2.2.31 (Unix)
Server built:   Jul 19 2016 00:11:31

$ yum install gcc

$ yum install libxml2
$ yum install libxml2-devel

$ yum install openssl
$ yum install openssl-devel

$ cd /home/ebisol/
$ wget http://jp2.php.net/distributions/php-5.6.24.tar.bz2
$ cd /usr/local/src/
$ tar -jxf /home/ebisol/php-5.6.24.tar.bz2
$ cd php-5.6.24
$ ./configure --with-openssl --with-libxml-dir=/usr/bin --with-apxs2
$ make
$ make install
$ /usr/local/src/php-5.6.24/build/shtool install -c ext/phar/phar.phar /usr/local/bin
$ ln -s -f phar.phar /usr/local/bin/phar
$ vi /etc/httpd/conf/httpd.conf
ServerName IPアドレス:80

$ vi /etc/httpd/conf.d/php.conf
AddHandler php5-script .php
AddType text/html .php
DirectoryIndex index.php

$ /etc/init.d/httpd start
```
TeX 書式での数式表示が崩れるメモ

表示崩れの原因についてコメントを頂いていますので、合わせてご覧ください。

---

# どのように表示が崩れるのか？

以下のようなやつ。

> $\sum_i (y_i - \hat{y}_i)^2$ を最小化する $\mathbf{w}$ と $w_0$ を求める

元の文字列はこちら。

```
$\sum_i (y_i - \hat{y}_i)^2$ を最小化する $\mathbf{w}$ と $w_0$ を求める
```

この問題に関して、次のような回避方法があるとのことです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/komiya_atsushi">@komiya_atsushi</a> よく被害にあってます、これ。braceを使うのを避けて空白に置き換えると回避できることがあります。\boldsymbol{x}_a を \boldsymbol x_a という感じに</p>&mdash; Такаhаshi, Riкiyа (@rikija) <a href="https://twitter.com/rikija/status/757456670867922945">2016年7月25日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

実際にこの回避方法を適用してみると、

> $\sum_i (y_i - \hat y_i)^2$ を最小化する $\mathbf{w}$ と $w_0$ を求める

ちゃんと表示されるようになりました。


# 表示崩れの原因

本 post のコメントにあるとおり、そもそもは Markdown の `_italic_` の解釈の方が優先されてしまうことにあるとのこと。
ですので、 `_` をエスケープする形で `\_` として記述すればよいそうです。
create-react-appで構築したReactアプリケーションでjQueryを使う

[Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する](http://qiita.com/chibicode/items/8533dd72f1ebaeb4b614)を読んでさっそく試してみた。
本当に記事の通りすんなり構築できたので、jQueryも読み込んでみた。

プロジェクトのディレクトリで

```
npm i jquery --save
```

んで、index.jsに追記。

```js:index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import $ from 'jquery';

$('#root').on('click',function(){
	console.log('クリックしたよ');
})	

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
```

あっさり動いた。
$(function () {})っていうのはいらない。
finally節とreturn/throw

```java



//finally節はtry節のreturn/throwを上書きする。
//default文はcase文のreturn/throwを上書きしない(比較)。



class TestFinally{	
	void method() throws Throwable{
		try{
			throw new Exception();
		}finally{
			throw new Throwable();
		}
	}
}
class TestDefault{
	void method() throws Throwable{
		switch(123){
		case 123:
			throw new Exception();
		default:
			throw new Throwable();
		}
	}	
}
public class Test {
    public static void main(String[] args) {
        try{
        	(new TestFinally()).method();	//①
        	(new TestDefault()).method();	//②
        }catch(Exception e){
        	//②はこちらでcatchされる。
        	System.out.println(e);
        }catch(Throwable e){
        	//①はこちらでcatchされる。
            System.out.println(e);
        }
    }
}



```
Pylint で no-member エラーを出なくする

numpy や OpenCV などのモジュールを使っている時、以下のようなメッセージが表示されます。

```
E: 35,65: Module 'numpy' has no 'deg2rad' member (no-member)
E: 65,28: Module 'cv2' has no 'imread' member (no-member)
```

これらのモジュールのメンバーをチェックしないようにするオプションがありました。

```
pylint --extension-pkg-whitelist=numpy,cv2 sample.py
```

[SublimeLinter](http://sublimelinter.readthedocs.io/en/latest/settings.html)なら、User Settings の pylintセクションを以下のようにします。

```json
            "pylint": {
                "@disable": false,
                "args": ["--extension-pkg-whitelist=numpy, cv2"],
                "disable": "",
                "enable": "",
                "excludes": [],
                "paths": [],
                "rcfile": "",
                "show-codes": false
            }
```
vimrc よく使う設定を初期値に


```bash:~/.vimrc
set backup
set ignorecase
set hlsearch
set number
set showmatch
syntax on
```

## 各行の意味
1. バックアップ
2. 検索時に大文字小文字を意識しない
3. 検索結果をハイライトする
4. 行番号の表示
5. 相関する括弧を強調表示
6. シンタックスハイライトを使用する
Modern JS for Designer

## 対象

* デザイナー・HTML/CSSコーダーで、少しだけJavaScriptを使うこともある人
* 最近のJavaScriptがよく分からない、バックエンドエンジニア

---

## 背景

JSerとデザイナー・コーダーの話が噛み合わない

* 「プラグインはnpmから取ってきてよ」
* 「ビルドはWebpack使ってるから必要なら設定書きかえてね」
* 「babel使ってるからvarじゃなくてconstね」

この会話が通じるようになるといいな。

---

## Topic

* Node.js
* npm
* Webpack(browserify)
* ES6(ES2015)、Babel

---

## Node.js

---
## Node.js

* ~~サーバーサイドのJavaScript言語~~
* コマンドラインで動くJavaScript(で、サーバーとしても使える)

Webサーバーとしてだけでなく、**CLI(コマンドライン)ツールとしても活用される**。サーバーサイドエンジニア以外は、コマンドラインツールとしての使い方を覚えておけばいい。

---
## 例えば

![gruntgulp_001.jpg](https://qiita-image-store.s3.amazonaws.com/0/52054/86581710-a6e5-dc9a-9b36-2845ff7c59c1.jpeg)

---

## node.js製のコマンドを使う

```
$ npm i -g create-react-app
```

`create-react-app`コマンドが使えるようになる。

```
$ create-react-app sample1
```

---

## npm

---

## npm
Node.jsのパッケージ管理ツール。OSSで公開されているライブラリの、ダウンロード・バージョン管理を行う。

* Rubyで言うところの「gem」
* PHPでいうところの「Composer」

**GruntもGulpもnpmで配布されている**。最近ではフロントエンド開発でも使われる(詳細は後述)

---

インストールしたパッケージは`package.json`で管理。

```json:package.json
{
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
  }
}
```

---

package.jsonがあれば、`npm install`コマンドで必要なパッケージを全てダウンロードできる。

```
$ npm install
```

新しいパッケージを使う場合は、`npm install <パッケージ名> --save`。

```
$ npm install react --save
```

---

## ここまでのまとめ

* Node.jsはサーバーだけでなく、コマンドラインツールとしても使われる
* 最近のJavaScriptのライブラリは、npmで管理するのが主流

---

## Webpack

---

## Webpack

npmの登場により、
「同じJavaScriptなら、フロントエンドでもnpmで配布されているライブラリを使ったらいいんじゃない？」

=> **WebPack/Browserify**が登場

---
## 例えば

バックでもフロントでも使えるモジュール

* moment.js(日付操作ライブラリ)
* lodash(便利ライブラリ)

その他、独自ライブラリをフロント/バックエンドで共通化したり。

---
## どうやっているか

昔のJS

```index.html
<!-- ライブラリの読み込み -->
<script src="http://code.jquery.com/jquery.js"></script>
```

今のJS

```
$ npm install jquery --save
```

jsファイルでモジュールの読み込み

```js
import $ from 'jquery';
```

---

## Webpackでビルド

Webpackを実行

```
$ webpack --config webpack.config.js
```

自分で書いたJS＋読み込んだnpmライブラリが、**ひとつのファイルに連結される**(=ビルドされる)。

あとは通常通りHTMLで読み込み。

```html
<script type="text/javascript" src="/bundle.js" />
```

---

## フロントの開発でもnpmが前提に

最近では、フロントエンドでしか使えないもの(jQueryや、その関連ライブラリなど)も、npmで配布されるようになっている。

フロントエンドの開発は、npmでライブラリを管理し、Webpack/browserifyを使ってビルドするのが主流に。

---

## ES6(ES2015)とbabel

---

## ES6

* JavaScriptの時期バージョン
* 別名ES2015
* 今まで使ってたJavaScriptはES5(か、IE対応していた人はES3)

便利な記法がいろいろと追加されている。

```js
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
```

---

## でも...

* エンジニアは便利なのでES6で書きたい
* ただ、世の中の全てのブラウザがES6(= 新しいJavaScript)に対応している訳ではない。
* IEの悪夢再び

=> ここで**babel**が登場。

---

## babel

ES6の記法で書いたJavaScriptを、ES5のJavaScriptに変換するライブラリ。

エンジニアは書きやすいES6で書き、ブラウザで実行するのは変換後のJavaScript( =どのブラウザでも動く)。

※babelで変換することを、バベると言ったり言わなかったり

---

## 例

```js
const say = (str) => console.log(str);

const msg = "hoge";
say(msg);

// ↑をバベると...↓

var say = function say(str) {
  return console.log(str);
};

var msg = "hoge";
say(msg);
```

---

## ここまでのまとめ

* Webpackの登場で、npmがフロントエンドでも使われるようになっている
* 最近のエンジニアはES6でJavaScriptを書いている
* でも実際に動いているのは、バベった後のES5のプログラム


---

## 以上です

---

## エンジニアとのコミュニケーション

* 「ライブラリ管理は何を使ってますか？」
* 「ビルドは何を使ってますか？」
* 「記法はES6ですか？」

このあたりを押さえておけばたぶんOK。
VSCodeでVagrantfileをrubyに関連付ける

Vagrantfile等の拡張子のないファイルを関連付ける機能がないかと探したら、普通にありました。



```json:settings.json
{
    "files.associations": {
        "Vagrantfile":"ruby"
    }
}
```

対応した拡張機能もありましたが、Vagrantfile以外のファイルにも使える汎用性からsettings.jsonをいじる方が良さそうです。
https://github.com/bbenoist/vscode-vagrant
https://github.com/mastazi/VS-code-vagrantfile
【Palo Alto】WildFireのアップロード先を"WildFire Japan"に変更する

※記事の内容はPAN-OS6.1.xが対象です

パロアルトネットワークス次世代ファイアウォールの機能の１つに、「WildFIre」というサンドボックス型の未知マルウェア検知機能があります。


## デフォルトのアップロード先
解析対象のファイル形式などを設定し、該当するファイルが通信に含まれていた場合にファイルをクラウドサーバにアップロードします。
アップロード先のクラウドサーバの設定はデフォルトでは、「wildfire-public-cloud」になっています。

［Device］>［セットアップ］>［WildFire］
![スクリーンショット_072516_110305_AM.jpg](https://qiita-image-store.s3.amazonaws.com/0/34809/2dda46ec-5273-e286-1d52-429ece5f9b55.jpeg)

「wildfire-public-cloud」の場合、下記ロケーションから最も遅延が少ないサーバが選出されます。

* 日本
* アメリカ
* ヨーロッパ
* シンガポール

## UP先を国内企業のデータセンターに変更する

上記はAmazon AWS上のサーバとなり、ユーザによっては国内企業のデータセンターに送りたい場合もあると思います。

アップロード先のサーバは以下の設定で変更可能です。
<br>

［Device］>［セットアップ］>［WildFire］
![スクリーンショット_072516_110305_AM.jpg](https://qiita-image-store.s3.amazonaws.com/0/34809/86111f2d-ab6f-1f01-e994-814dce5a78a9.jpeg)

”WildFIreサーバ”の値を「wildfire.paloaltonetworks.jp」に変更し、Commitします。

この設定で、国内企業のデータセンターにファイルをアップロードすることが可能になります。

## 設定変更後の確認

設定後、正しく動作するかを確認します。

WildFireの動作を確認するには、以下のファイルを使うと便利です。

リンク先にアクセスすると、"wildfire-test-pe-file.exe"がダウンロードされます。
このファイルはテスト用のファイルで、必ずWildFireにアップロードされます。
（判定は"malicious"となります）

http://wildfire.paloaltonetworks.com/publicapi/test/pe

以下の画像は、設定変更前と後のWildFireログです。
下が設定変更前、上が設定変更後です。
![Wildfire_002.jpg](https://qiita-image-store.s3.amazonaws.com/0/34809/e18221d2-778d-0837-5a1f-c4bd76cae9ba.jpeg)

変更後、「wildfire.paloaltonetworks.jp」に正常にアップロードされたことが確認できます。
<br>
-----
次世代ファイアウォールのログ解析ツールをOSSで提供しています。

[![PALallax_banner.jpg](https://qiita-image-store.s3.amazonaws.com/0/34809/3675ccfe-c474-cd9d-8cbc-a192dfd1cadc.jpeg)](http://www.ap-com.co.jp/ja/paloalto/palallax/)
brew brewdleがbrew bundleになっていた

# Brewfileを更新しようとしたら

自分のhomebrew環境のバックアップ的に使えるBrewfile。最近新しくしてないなと思って、更新しようとしたら

```bash
$ brew brewdle dump
Error: Unknown command: brewdle
```

あれ？

なんかbrewdleなんて知らないと言われたのでtapし直すも効果なし

# `brew brewdle` => `brew bundle` 

[この記事](http://qiita.com/tearoom6/items/1abf24ca6d872e6579b0#brew-bundle)にある通り、
いつの間にか**`brew brewdle` は `brew bundle`になっていました。**

だから

## Dump

`brew bundle dump`
見た感じ、以前のbrewfileをそのまま使えるみたいです

## brewfileから復帰

brewfileのあるディレクトリで
`brew bundle`

# インストール方法

`brew tap homebrew/bundle`

もしくは、 `brew bundle` 系のコマンドを打つと勝手に引っ張ってきてくれるみたい

# ちなみに

https://github.com/Homebrew/homebrew-brewdler に行くと
https://github.com/Homebrew/homebrew-bundle に飛ばされます。レポジトリの名前が変わったみたいです
(レポジトリの名前を変えた時の動作についての[公式Helpページ](https://help.github.com/articles/renaming-a-repository/)。Repo名を変えると、 **前の名前のURLが新しい名前のものにリダイレクトされる**そうです)

従って

* `brewdler`の時代にtapしていた人はエラーなしに使えます。
* `brew tap homebrew/brewdler` も一応動きます。が、混乱するので `bundle` を使ってあげましょう。


そして`brew bundle dump`した翌日にPCが物理的にぶっ壊れました。タイミング良過ぎでしょ
`<input type="file">`をBootstrapのデザインに簡単に合わせる(要JQUERY)


自分の知っているlabelを利用した方法とJqを利用したファイル名の表示をコラボしてみました

```:html
<label for="InputFile" class="btn btn-default">ファイル選択
<input class="hide" type="file" id="InputFile" onchange="$('#file_name').text($(this).val())"/>
</label>
<span id="file_name"></span>
<input class="btn btn-primary" type="submit" name="submit" value="送信" id="Submit">
```

Bootstrapのデザインクラスに対応していない `<input type=file...>` に
![スクリーンショット 2016-07-29 10.44.33.png](https://qiita-image-store.s3.amazonaws.com/0/51918/e64fc9f5-25a4-bd0c-9e6e-6ee185b2bae5.png)
　　　　　　　　　⇓
　　　　　　　　　⇓
こんな感じでデザインを充てられますし、CSSで自由にデザインできます。
![スクリーンショット 2016-07-29 10.39.50.png](https://qiita-image-store.s3.amazonaws.com/0/51918/87b1f31e-9730-6167-7d64-09af2c848a5f.png)
![スクリーンショット 2016-07-29 10.40.10.png](https://qiita-image-store.s3.amazonaws.com/0/51918/aac397cb-8aa5-d954-3593-9715f1f772d1.png)



参照
http://qiita.com/yasumodev/items/c9f8e8f588ded6b179c9
http://qiita.com/shimayu/items/605ecac3eeec50dd4f93
テキスト説明分に擬似ボタンを表現する


```:html
<span class="btn-sm" style="border:solid 1px;"><i class="fa fa-fw fa-pencil fa-lg"></i>…</span>
```
￼![スクリーンショット 2016-07-25 12.29.25.png](https://qiita-image-store.s3.amazonaws.com/0/51918/e3af7670-893f-90f9-66d6-f60ac1a99e1d.png)
みたいな。



```:html
<span class="btn-sm bg-success" style="border:solid 1px;">情報を更新する</span>
```
![スクリーンショット 2016-07-25 12.57.12.png](https://qiita-image-store.s3.amazonaws.com/0/51918/5234d288-a22c-364b-e982-3a0f2f849c93.png)
みたいな。

いずれも動作保証はしない。
Line botをAWS LambdaとAPI Gatewayでアモーレ！！- システム解説編


どうも！アモーレkoooheiです。前回[「Line botをAWS LambdaとAPI Gatewayでアモーレ！！- 実装編」](http://qiita.com/kooohei/items/650c331f95f83072f4d6)では、リトルに言われて自分でアモーレをつくっちゃいました♪
と言っても街行くレディに声かけてもダメなので、Line botとAWSを組み合わせたですよ！
名付けて「ぼくのアモーレ」！！

今回はAWSで構築したシステムについて解説します。


# はじめに
まずは全体構成を確認しましょう。
![amore10_aws03.png](https://qiita-image-store.s3.amazonaws.com/0/82090/440950aa-9d0c-8c67-1e52-124da3577532.png)

今回利用しているAWSサービスは**API Gateway**と**Lambda**、そして**CloudWatch**の3サービスとなります。

それではこれらのAWSサービスがどのような流れで機能しているかをもう少し説明します。


# 全体の流れ
まず、ぼくがアモーレに『こんにちは』と囁いた言葉はデータとして「API Gateway」へ**イベント通知**され、そのまま「Lambda」へ送られます。（イベント通知）

そしてデータを受け取った「Lambda」はその情報をもとに送信用のデータを作成し、LINEサーバーへ送ります。
LINEサーバーは受け取った情報に記載されている送信先（ぼく）に対してメッセージを送り返します。（イベント送信）

また、「Lambda」から「CloudWatch」へ_console.log_モジュールを利用してログを出力しています。（log）

それでは各AWSサービスごとに見ていきたいと思います。


# API Gateway
Lambda関数を実行するためのトリガーとなります。
API Gatewayで作成されたエンドポイントへデータを送るとそのデータはAPI Gatewayを経由してLambdaへ渡されます。

![amore11_api.png](https://qiita-image-store.s3.amazonaws.com/0/82090/d5ac65ad-3f68-4778-b0fd-94c69cc0e482.png)


ここで作成されるエンドポイントは**全てHTTPS**になります。非暗号化(HTTP)エンドポイントはサポートしていません。
ちなみにLine botのCallback URLも**HTTPS必須**なのでちょうど良いですね。
また、Line botはPOSTでの通信になるのでMethodはPOSTにし、LineからアクセスできるようにSecurityはOPENにしています。


# Lambda
Lambdaはサーバーへのプロビジョニングを行う必要がなくコードが実行できるAWSのサービスです。

![amore11_lambda.png](https://qiita-image-store.s3.amazonaws.com/0/82090/85ee8803-1174-5ca0-edd5-9a78443e33a1.png)

まず、Nameで任意のLambda関数名を入力し、Descriptionでその関数についての説明を記載します。
Runtimeは実行環境ですので今回用いた言語である「Node.js 4.3」を選択します。
そしてExisting roleではLambdaを実行するための基本ロールである「lambda_basic_execution」を指定します。
MemoryはLambdaを実行するために割り当てるメモリサイズでTimeoutは処理にかける時間(秒)です。ここで指定した秒数を超えてしまうとタイムアウトとなり処理は途中で中断されてしまいます。
ここでは処理に要するメモリを128MBにし、時間は3秒間としています。
最後にVPCの項目ですが、ここはLambdaが自分の用意したVPC環境へアクセスを行いたい場合などに指定します。今回は必要ないので「No VPC」にします。


# CloudWatch
Lambdaでログ出力を行うと自動的にCloudWatchへ吐き出されます。
今回の場合node.jsを利用しているのでconsole.logを使ってログ出力しています。


# おわりに
以上がシステムについての解説です。「できるだけシンプルに、簡単に作れる」をモットーにしてるので極力設定する箇所を少なくしています。（細かい設定はよくわからんという話もありますが。。。）

「ぼく」と「アモーレ」は始まったばかりです。至らぬ点もあるかと思いますが、何卒暖かい目で見守っていただければ幸いでございますorz


### 関連
[Line botをAWS LambdaとAPI Gatewayでアモーレ！！- 実装編](http://qiita.com/kooohei/items/650c331f95f83072f4d6)
[Line botをAWS LambdaとAPI Gatewayでアモーレ！！- code解説編](http://qiita.com/kooohei/items/daf864f2b56d95311030)
[Line botをAWS LambdaとAPI Gatewayでアモーレ！！- システム解説編](http://qiita.com/kooohei/items/a98669f54451143591c2)
新 Firebase を React Native で使うためのまとめ

新 Firebase のどの機能を React Native で使えるのか調べてみた。

現在使える機能
--------------

基本的に次のページで Web で使える機能は React Native でも使えるよう。 Realtime Database 以外は未検証。

https://firebase.google.com/docs/

- Cloud Messaging
- Authentication
- Realtime Database
- Storage
- Hosting

その他の機能は bridge 経由になる。 Analytics はすでに bridge がある。

https://github.com/evollu/react-native-firebase-analytics

それ以外はいまのところ自前で bridge を書く必要がある。


セットアップ方法
----------------

### Firebase プロジェクト作成

次のボタンを押して新しいプロジェクトを作成する。

![make-new-project.png](https://qiita-image-store.s3.amazonaws.com/0/27516/62aeda39-2c8f-57d8-a938-9d45ff91327b.png)

config の情報を次の位置から取得する。

![button-to-show-config.png](https://qiita-image-store.s3.amazonaws.com/0/27516/5ea6266f-3a9e-dc65-d462-370782e9dd36.png)

次の `apiKey`, `authDoamin`, `databaseURL`, `storageBucket` の値をひかえておく。

![config.png](https://qiita-image-store.s3.amazonaws.com/0/27516/57b2ad14-8178-5d50-b9e5-ba37186c1734.png)


### React Native セットアップ

#### サンプルプロジェクト

サンプルプロジェクトとして TODO アプリを作ってみたので参考にどうぞ。

https://github.com/januswel/fb-rn-todo

TODO 追加

![add](https://raw.githubusercontent.com/januswel/fb-rn-todo/images/images/add.gif)

TODO チェック

![upd](https://raw.githubusercontent.com/januswel/fb-rn-todo/images/images/upd.gif)

TODO 削除

![del](https://raw.githubusercontent.com/januswel/fb-rn-todo/images/images/del.gif)

#### React Native のプロジェクトを作成する。

```sh
react-native init fb-rn-sample
```

firebase パッケージをインストール。

```sh
npm install --save firebase
```

firebase を使う際に発行された API key で初期化する必要がある。
たとえば次のように `initializeApp` までしたオブジェクトを返すようなものをひとつ作っておくと便利。

```js:firebase.js
import firebase from 'firebase'
import CONFIG from './config'

const config = {
    apiKey: CONFIG.API_KEY,
    authDomain: CONFIG.AUTH_DOMAIN,
    databaseURL: CONFIG.DATABASE_URL,
    storageBucket: CONFIG.STORAGE_BUCKET,
};
firebase.initializeApp(config)

export default firebase
```

```js:config.js
export default {
    API_KEY: "上記でひかえた値",
    AUTH_DOMAIN: "上記でひかえた値",
    DATABASE_URL: "上記でひかえた値",
    STORAGE_BUCKET: "上記でひかえた値",
}
```

実際は react-native-config などを使って git repo に commit しないようにすべきだけど例なので。

### アプリ作成

ここまで揃ったらあとは Realtime Database を使うだけ。

```js
import firebase from './firebase'

const db = firebase.database();
const ref = db.ref('todos');
```

`ref` に対して Realtime Database API を用いて操作できる。

- https://firebase.google.com/docs/database/web/save-data
- https://firebase.google.com/docs/database/web/retrieve-data

これはサンプルをみたほうがわかりやすいかな。

- https://github.com/januswel/fb-rn-todo/blob/master/src/components/app.js
Mac OS X(EL Captain)でrbenvからいれたrubyのバージョンが切り替わらない時の対処法

適当にググッてrbenvインストールしたがrubyのバージョンが勝手に切り替わってくれなくてちょっと戸惑う。。

```
% rbenv install 2.3.1
Downloading ruby-2.3.1.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.3/ruby-2.3.1.tar.bz2
Installing ruby-2.3.1...
Installed ruby-2.3.1 to /Users/MusicThanks/.rbenv/versions/2.3.1

% rbenv versions
* 2.3.1 (set by /Users/hoge/.rbenv/version)

% rbenv global 2.3.1

% ruby -v
ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin15]

```

.zshrcに下記を入力し

```
export PATH="$HOME/.rbenv/bin:$PATH" 
if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi
```

読み込ませたら無事解決。

```
% source .zshrc
% ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin15]
```

# 参考
- [MacOS Yosemiteにrbenvでrubyをぶっこんでも動かなかった件について](http://tabunmuri.hatenablog.com/entry/2015/03/05/MacOS_Yosemite%E3%81%ABrbenv%E3%81%A7ruby%E3%82%92%E3%81%B6%E3%81%A3%E3%81%93%E3%82%93%E3%81%A7%E3%82%82%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E4%BB%B6%E3%81%AB%E3%81%A4%E3%81%84)
CentOS7にqmakeとcapybara-webkitをインストールする

## 概要
capybara-webkitをインストールしようとすると、qmakeコマンドがないといエラーが出てインストールできない。調べてみたことろ、CentOS7での解決方法がなかったので、CentOS6.4での対象方法を参考に、CentOS7でqmakeコマンドをインストールしてみた。

### エラー内容
```
$ bundle install --path vendor/bundle
Installing capybara-webkit 1.11.1 with native extensions

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /home/vagrant/RSpec/vendor/bundle/ruby/2.3.0/gems/capybara-webkit-1.11.1
/home/vagrant/.rbenv/versions/2.3.1/bin/ruby -r ./siteconf20160725-8249-16gn6j5.rb extconf.rb
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/home/vagrant/.rbenv/versions/2.3.1/bin/$(RUBY_BASE_NAME)
        --with-gl-dir
        --without-gl-dir
        --with-gl-include
        --without-gl-include=${gl-dir}/include
        --with-gl-lib
        --without-gl-lib=${gl-dir}/lib
        --with-zlib-dir
        --without-zlib-dir
        --with-zlib-include
        --without-zlib-include=${zlib-dir}/include
        --with-zlib-lib
        --without-zlib-lib=${zlib-dir}/lib
Command 'qmake ' not available

extconf failed, exit code 1

Gem files will remain installed in /home/vagrant/RSpec/vendor/bundle/ruby/2.3.0/gems/capybara-webkit-1.11.1 for inspection.
Results logged to /home/vagrant/RSpec/vendor/bundle/ruby/2.3.0/extensions/x86_64-linux/2.3.0-static/capybara-webkit-1.11.1/gem_make.out
Using poltergeist 1.10.0
An error occurred while installing capybara-webkit (1.11.1), and Bundler cannot continue.
Make sure that `gem install capybara-webkit -v '1.11.1'` succeeds before bundling.
```
## qmakeのインストール手順

下記の内容で、`/etc/yum.repos.d/qt.repo`を作成する。
`epel-7`のレポジトリは存在しないので、`baseurl`の部分の`epel-$releasever`を、`epel-6`に書き換える。

```lang:/etc/yum.repos.d/qt.repo
$ vi /etc/yum.repos.d/qt.repo

[epel-qt48]
name=Software Collection for Qt 4.8
#baseurl=http://repos.fedorapeople.org/repos/sic/qt48/epel-$releasever/$basearch/
baseurl=http://repos.fedorapeople.org/repos/sic/qt48/epel-6/$basearch/
enabled=1
skip_if_unavailable=1
gpgcheck=0

[epel-qt48-source]
name=Software Collection for Qt 4.8 - Source
#baseurl=http://repos.fedorapeople.org/repos/sic/qt48/epel-$releasever/SRPMS
baseurl=http://repos.fedorapeople.org/repos/sic/qt48/epel-6/SRPMS
enabled=0
skip_if_unavailable=1
gpgcheck=0
```

## qtをインストール

```
$ sudo yum -y install qt48-qt-webkit-devel
```

## qmakeコマンドのパスを通す

```
$ sudo ln -s /opt/rh/qt48/root/usr/include/QtCore/qconfig-64.h  /opt/rh/qt48/root/usr/include/QtCore/qconfig-x86_64.h
$ source /opt/rh/qt48/enable
$ export PATH=/opt/rh/qt48/root/usr/lib64/qt4/bin/${PATH:+:${PATH}}
```

## まとめ
これで`bundle install`したら、capybara-webkitのインストールに成功した。

以上

[参考]
http://tagamidaiki.com/capybara-webkit-qmake/
PMP　更新方法

PMPの資格を維持するには60PDUを3年以内に取得しなければならない。学習や活動の1時間がIPDUに相当すると考えていい。

プロジェクトマネジメント協会(PMI)から、いろいろなメールが送られてくるので英語に弱い方は注意が必要。資格更新だけであれば日本支部に登録したり、会員登録する必要はない。



参考にさせてもらったサイト
http://pdupointget.web.fc2.com/page2.html
モダールやパネルのcontent、直にテーブルをしていする


```:html
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="modal-label">確認</h4>
</div>

<table class="table table-striped table-bordered" style="margin-bottom:0; border:0;">
	<tr><td>…</td><td>…</td></tr>
	<tr><td>…</td><td>…</td></tr>
	<tr><td>…</td><td>…</td></tr>
</table

<div class="modal-footer">
…
```

標準のcontent指定は省く、ターブルの枠絡みを非表示
動作保証はしない
macでxamppを使用する際にvirtualhostの設定で403が出る

XAMPP 5.6.23

新しくmacを購入して、xamppでバーチャルホストの設定しようと思ったら、
ブラウザで見ても403..403..の連続になってしまった。

色々な記事を見て試したが解決せず。
ファイルのパーミッションを777にしてもダメ。

やっとこさ解決策が以下に書いてあった。

[403 errorの箇所]
http://jonathannicol.com/blog/2012/03/11/configuring-virtualhosts-in-xampp-on-mac/

要は、
apacheはデフォルトでは、「nobody」ユーザーで実行されるため
あなたのOSX内のディレクトリ等にアクセスする許可を持たないから。
ということらしい。（ディレクトリとファイルのパーミッション777にしたんだけど。。）

なので、apacheのユーザーをOSXのユーザーと同じにすればいいということで、

/Applications/XAMPP/xamppfiles/etc/httpd.conf
のファイル内の

```
<IfModule unixd_module>
# User/Group: The name (or #number) of the user/group to run httpd as.
# It is usually good practice to create a dedicated user and group for
# running httpd, as with most system services.
#
User daemon
Group daemon
</IfModule>
```

のユーザーの箇所を

```
<IfModule unixd_module>
# User/Group: The name (or #number) of the user/group to run httpd as.
# It is usually good practice to create a dedicated user and group for
# running httpd, as with most system services.
#
User あなたのosxのユーザー
Group daemon
</IfModule>
```

に変更して再起動させたら、閲覧できるようになりました。
カスタムUITableViewCellの選択時の背景色を変更する

# サンプルコード

UITableViewCellクラスの`selectedBackgroundView`を設定するだけです。

```swift
// CustomCell.swift:

import UIKit

class CustomCell: UITableViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        backgroundColor = UIColor(named: "primary")        
        selectedBackgroundView = makeSelectedBackgroundView()
    }

    private func makeSelectedBackgroundView() -> UIView {
        let view = UIView()
        view.backgroundColor = UIColor(named: "primary_light")
        return view
    }
}
```
Raspiとweb-camを使って監視カメラ運用する


# 使うもの

- Raspberry pi 2 B+
- SDカード
	- Debian jessie
	- ApplePi-bakerを使いました(割愛)
- USBケーブル + USB電源アダプタ
- Webカメラ(IO-DATA)

画像取り込みと公開は, [motion](http://www.lavrsen.dk/foswiki/bin/view/Motion/)を使いました。

# 基本構築
## ネットワークの設定

jessie から ```/etc/network/interfaces```でなく```/etc/dhcpcd.conf```を編集する. 

```txt:/etc/dhcpcd.conf
interface eth0
static ip_address=192.168.0.15/24
static routers=192.168.0.1
static domain_name_servers=192.168.0.1
```

- [参考.1: Raspberry Pi 2 (Raspbian: jessie) でIPアドレスを固定する](http://qiita.com/ykog/items/a6dbba1c09e870f8f702)

## motion 
まずmotionを入れます。

```
# アップデートは割愛可能。
% sudo apt-get update && sudo apt-get upgrade
% sudo apt-get install motion
```

次、```/etc/motion/motion.comf```で設定をします。

```txt:/etc/motion/motion.conf
videodevice /dev/video0
width 640
height 480
framerate 4
minimum_frame_time 0
threshold_tune off
locate_motion_mode off
text_right %Y-%m-%d %T-%q
```

実行します。

```sh
% sudo motion -n
```

# おまけ/ cronに追加
Raspiを起動したら監視カメラをonにする設定をする. 

```sh
% sudo crontab -e
```

```txt:crontab
@reboot motion -n
```


# 参考
- [
Linux + motion + webcamでライブ監視カメラを設置する](http://damelog.com/computer/linux/linux-motion-webcam%E3%81%A7%E3%83%A9%E3%82%A4%E3%83%96%E7%9B%A3%E8%A6%96%E3%82%AB%E3%83%A1%E3%83%A9%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%99%E3%82%8B/)
配列に格納できるオブジェクトの型は配列変数の型ではなく配列オブジェクトの型が決定する。

```java
class Sup{}
class Sub extends Sup{}

public class Test {
	public static void main(String[] args){
		Sup sup = new Sub();
		sup = new Sup();
//に相当するのは
		Sup[] arySup = new Sub[1];
		arySup[0] = new Sup();	//ArrayStoreException
//ではなく
		Sup[] arySup = new Sub[1];
		arySup = new Sup[1];
//である。
	}
}
```
MAMPでphp includeを使えるようにする


`/Applications/MAMP/conf/apache` を2か所編集する


```apache:apache(515行目付近)

# 編集前

    #AddType text/html .shtml
    #AddOutputFilter INCLUDES .shtml

#===================

# 編集後 

    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml .html .htm .php


```


```apache:apache(200行目付近)

# 編集前
<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None 
</Directory>

#===================

# 編集後 

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride All
    AddType application/x-httpd-php .htm .html 
</Directory>


```
【論文シリーズ】深層畳込み活性化特徴表現 (DeCAF)について

## 原文
[汎用的な画像認識における深層畳込み活性化特徴表現 (DeCAF: A Deep Convolutional Activation Feature for Generic Visual Recognition)
Jeff Donahue, Yangqing Jia, Oriol Vinyals, Judy Hoffman, Ning Zhang, Eric Tzeng, Trevor Darrell (2013)](http://goo.gl/dUztS2)



## 1. 要約
* CNNで鍛えた画像認識の識別器(Deep Architecture)を、テストデータ以外の汎用的なデータにも適用できないか、ということにチャレンジした。
* DeCAFは、ここで鍛えた識別器の略称である。
* この手の識別器の発展という視点では、[Krizhevskyらによる研究成果](http://decaf.berkeleyvision.org/)を進化させた。彼らのモデルは、5層の畳込み層(間にReLUの活性化、プーリング層あり)、3層の完全結合層からなる。1000パターンほどの識別が可能。

## 2. 骨子の理論
基本的な理論構成は、従来のCNNと変わらない。
メイン手法の仕事としては、畳込みの層を7層に拡張したくらいである。
本稿では、3.のモデル適用に際してのテクニックのインプットの方に価値を置く。



## 3. モデル適用例
### (1)画像認識
畳込み層増築に、ロジスティック回帰とDropoutを組み合わせて、性能向上を確かめた。

![151126151040_1.JPG](https://qiita-image-store.s3.amazonaws.com/0/127228/04e803cb-a9b2-4f54-0d82-e323391e004d.jpeg)


### (2)ドメイン( = 特徴量の領域をベクトル量に基いて投射したもの)の適合
DeCAFに**t-SNE**というアルゴリズムを施して、2Dの投射領域図を作成した。すると、対象のSURFの図に対して良好な再現性を得られた。

![151126151040_2.JPG](https://qiita-image-store.s3.amazonaws.com/0/127228/3a0258e4-f23e-ba04-d31f-e678b147416c.jpeg)


### (3)サブカテゴリ認識
画像の各部の特徴も認識し分けるというもの。

* **クロッピングアプローチ**: 
<br>データの画像を切り分けて、それから基本サイズに拡張し直すこと(部分を改めてひとつの画像と見て、パターン認識するケース)
* **可変型部分記述法** (Deformable Part Descript: DPD): <br>1画像内に見られる弱い特徴ごとに、領域を検知する(図の青い枠線)。それぞれを分離して、その特徴を記述するというもの
6層の畳込みにDPDを加えたものが、良好な結果を示した。

![151126151041_3.JPG](https://qiita-image-store.s3.amazonaws.com/0/127228/8ea7479b-5a29-d354-fdfc-b7e9b22e8a3f.jpeg)

![151126151041_4.JPG](https://qiita-image-store.s3.amazonaws.com/0/127228/1fa96928-a5f7-c317-b6a4-a6e755091d20.jpeg)
Material Design Liteのブレイクポイント

Bootstrapの記事はたくさんあるのに[Material Design Lite](https://getmdl.io/)は紹介されているばっかりで実装に関する情報が全然ないです。

Material Design LiteはMindBEMdingと言う命名規則に則って書かれている。個人的にはBootstrapのOOCSSより使いやすい。

コンポーネントが少なくゴリゴリ書かなければいけない系のフレームワークなので、まず最初にブレイクポイントぐらい知っておきたいですよね。

```css
/* =================================
  Media Queries
================================== */


@media (max-width: 479px) {
  .demo:before { content: "phone";}
}


/* ---------------------------------
  phone
---------------------------------- */
@media (max-width: 479px) {
  .demo:before { content: "phone";}
}


/* ---------------------------------
  tablet
---------------------------------- */
@media (max-width: 839px) {
  .demo:before { content: "tablet 以下";}
}
@media (min-width: 480px) and (max-width: 839px) {
  .demo:before { content: "tablet";}
}
@media (min-width: 480px){
  .demo:before { content: "tablet 以上";}
}


/* ---------------------------------
  desktop
---------------------------------- */
@media (min-width: 840px) {
  .demo:before { content: "desktop";}
}


/* ---------------------------------
  desktop large
---------------------------------- */
@media screen and (min-width: 1025px) {
  .demo:before { content: "desktop large";}
}
```

こんな感じです。普通ですね。

Material Design Liteを使う前に知ってほしいことはフォーム回りが貧弱だということです。
詳しくはコンポーネントを見てください。
[Jenkins] ビルドトリガ（定期的に実行）設定についてのまとめ

# 文法
ビルドトリガの基本的な文法はcronを参考にすれば良いと思います。
[crontab - Wikipedia](https://ja.wikipedia.org/wiki/Crontab)
cronでは最後に実行コマンドがつきますが、Jenkinsでは当然必要ありません。

```
+------------ 分 (0 - 59で指定もできるが、他ジョブでずれる可能性が高いため、H と指定を推奨)
| +---------- 時 (0 - 23)
| | +-------- 日 (1 - 31)
| | | +------ 月 (1 - 12)
| | | | +---- 曜日 (0 - 6) (日曜日=0)
| | | | |
H * * * *
```

Jenkins本体でのヘルプとしては以下のようなメッセージとなっています (`v2.0`)

```
この項目は、クーロンの書式に従います(多少違いはありますが)。 具体的には、各行はTABかスペースで区切った5つの項目から成ります。
MINUTE HOUR DOM MONTH DOW
MINUTE	分 (0-59)。
HOUR	時 (0-23)。
DOM	日 (1-31)。
MONTH	月 (1-12)。
DOW	曜日 (0-7) 0と7は日曜日。
１つの項目に複数の値を設定するには、次の演算子を使用できます。優先度の順に、

'*'は、全ての有効な値を指定します。
'M-N'は、"1-5"のような範囲を指定します。
'M-N/X'や'*/X'は、例えば、分の項目で"0,15,30,45"の代わりに"*/15"を、 "1,3,5"の代わりに"1-6/2"のように、その範囲内でXだけスキップします。
'A,B,...,Z'は、"0,30"や"1,3,5"のように複数の値を指定します。
定期的にスケジュールされたタスクがシステムに負荷をかける場合に対応できるように、 H (ハッシュを表す)を使用するべきです。 例えば、たくさんの日次ジョブに0 0 * * *を使用すると、真夜中にシステムへの負荷が急上昇します。 それに対して、H H * * *を使用すると、1日1回各ジョブが実行されますが、 すべてのジョブが同時に実行するのではなく、限られたリソースをより有効に使用します。

H は範囲とともに使用することもできます。 例えば、H H(0-7) * * * はAM 00:00からAM 7:59までの間のいつかを表します。 また、インターバルとあわせて使用することもできます。

H は、ある範囲におけるランダムな値と考えることもできますが、 実際には、ランダム関数ではなく、ジョブ名のハッシュであり、特定のプロジェクトに対して一定の値を表すものです。

空行や'#'で始まる行はコメントとして無視されます。

さらに、'@yearly'(年に1回)、'@annually'(年に1回)、'@monthly'(月に1回)、'@weekly'(週に1回)、'@daily'(日に1回)、 '@midnight'(日に1回)、および'@hourly'(時間に1回)をサポートします。

例	
# 15分ごと (おそらく、7分、22分、37分、52分）
H/15 * * * *
# 0-30分の間で10分ごと (おそらく、4分、14分、24分の3回）
H(0-29)/10 * * * *
# 平日の9-16時の間で2時間ごと (おそらく 10:38、12:38 14:38 16:38)
H 9-16/2 * * 1-5
# 12月を除く毎月1日と15日に1回
H H 1,15 1-11 *
```

# 毎日 ◯◯時に実行
## 個別指定
### 毎日 12時に実行
```
H 12 * * *
```

## 複数指定
### 毎日 0時, 12時, 18時に実行
```
H 0,12,18 * * *
```

# 曜日を指定して実行
日曜の `0` 始まりなので注意

## 平日のみ実行 (1-5)
### 平日 19時に実行
```
H 19 * * 1-5
```

## 休日のみ実行 (土曜 6, 日曜 0)
### 土日 19時に実行
```
H 19 * * 0,6
```


# 参考
[Tea for Coding: Jenkinsの「定期的に実行」で地味に感動した](http://faltc.blogspot.jp/2013/03/jenkins.html)
VivaldiでChromeのウェブアプリを使う

#事の発端
Macのデスクトップアプリ版のLINEが諸事情によって使えなくなってしまったので、代わりを探していたところ、Google Chrome用のLINEアプリを発見しました。
ただ、自分が使っているWebブラウザがVivaldiなのでそれに入れて動くのか検証してみることにしました。
なお、Vivaldiについての簡単な紹介は[以前のエントリ](http://qiita.com/Bouningen578/items/f75c746aafdab917be47)に書いてありますのでそちらを見てください。

#VivaldiでChromeアプリ
さて、ここまでだらだら書いていますがそもそもVivaldi上でChromeアプリが動くのかと言われれば、「だいたいYes」と答えるのがおそらく適切です。
というのも、[以前のエントリ](http://qiita.com/Bouningen578/items/f75c746aafdab917be47)でも書いたとおりVivaldiはchromiumをカスタムしたものでほぼ問題なくchromeのコマンドが使えるからです。

#アプリのインストール
実際にアプリをインストールします。
vivaldiでchromeのアプリストアに入ります。
URLとして、`vivaldi://apps`を入力します。これは例にならって`chrome://apps`でも何の問題もなく動きます。
ここで、アプリケーションを選んで入れてみます。
今回はLINE(Chrome版)を選択して「+ CHROMEに追加」をクリックします。使っているブラウザはChromeではありませんが別に問題なく実行されます。
ダウンロードしたアプリはChromeと同じようにアプリページ(vivaldi://apps)に表示されるのでそこをクリックして実行することが出来ます。

#結論：結構動く
今回はアプリでしたが、拡張機能なんかもインストール方法は同じです。ただ、自分が実行した限りでは、拡張機能に動くものと動かないものがありました。
一例を挙げれば、InboxやFirebug(Lite版)なんかは一応動きましたが、ChromeCastはうまく動きませんでした。
ファイルの名前に解析したい要素が含まれているCSVを取り扱う

例えば、logdata_20150725.csvのようなファイル。

CSVファイル内に日付データカラムが含まれていればなにも問題はないですが、ファイル名だけが日付を持っていると取扱いが面倒くさいです。Pythonを使ってこの課題をなんとかします。

Pythonが使える環境であること。取り出したい要素はアンダースコア（_）で切り分けられていることを前提としています。

11行目の 'split' で分割していますので、ここを操作すると他の分割文字でも対処可能です。

```py3
import csv
import os

FileList = os.listdir()

for FileName in FileList:
    ReadFile = open(FileName, 'r')
    WriteFile = open(FileName.split('_')[1]+'.csv', 'w')
    reader = csv.reader(ReadFile)
    header = next(reader)
    writer = csv.writer(WriteFile, lineterminator='\n')
    for row in reader:
        addrow = [FileName.split('_')[1]]
        addrow.extend(row)
        writer.writerow(addrow)
    ReadFile.close()
    WriteFile.close()
```

使い捨てスクリプトなので、ファイルがおいてあるフォルダ内で実行してください。1つずつファイルを読み込んで、別名（この場合は日付.csvのかたち）で保存します。

- osモジュールを利用してFileListにファイル一覧を格納する
- ReadFileに読み込みたいファイルを格納する
- WriteFileに書き出したいファイル名を与える
    - for文のFileName要素を分割して、第2要素をファイル名に（FileName.split('_')[1]の部分)
- csvモジュールを使ってreader,header,writerを作成
- 行に日付要素を格納
- 元々CSVファイルに格納されていた要素を行の右側に追加（extend）
- writerを使ってCSVファイルに書き込み
- 閉じる

という流れです。

参考
http://qiita.com/okadate/items/c36f4eb9506b358fb608
Web API 一覧

# 地図・位置情報

| 名前                                                         | 提供元       | 詳細 |
|:-------------------------------------------------------------|:------------|:-----|
| [Google Maps API](https://developers.google.com/maps/?hl=ja) | Google |  |
| [Bing Maps Dev Center](https://www.bingmapsportal.com/) | Microsoft |  |


# 天気

| 名前                                                        | 提供元       | 詳細 |
|:------------------------------------------------------------|:------------|:-----|
| [OpenWeatherMap](http://openweathermap.org/)                |             |  |
| [Weather Hacks](http://weather.livedoor.com/weather_hacks/) | Livedoor    |  |
| [天気予報 API](http://tenkiapi.jp/)                          | 日本気象協会 |  |
| [気象情報API](http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/weather.html) |


# 翻訳

| 名前                                                              | 提供元       | 詳細 |
|:------------------------------------------------------------------|:------------|:-----|
| [Google Translate API](https://cloud.google.com/translate/?hl=ja) | Google |  |
| [Microsoft Translator](https://www.microsoft.com/en-us/translator) | Microsoft |  |


# 文章解析

| 名前                                                              | 提供元       | 詳細 |
|:------------------------------------------------------------------|:------------|:-----|
| [テキスト解析Web API](http://developer.yahoo.co.jp/webapi/jlp/) | Yahoo! JAPAN |  |


# 画像解析

| 名前                                                              | 提供元       | 詳細 |
|:------------------------------------------------------------------|:------------|:-----|
| [Google Cloud Vision API](https://cloud.google.com/vision/?hl=ja) | Google |  |
| [Computer Vision API](https://www.microsoft.com/cognitive-services/en-us/computer-vision-api) | Microsoft |  |


# 音声認識

| 名前                                                              | 提供元       | 詳細 |
|:------------------------------------------------------------------|:------------|:-----|
| [Google Cloud Speech API](https://cloud.google.com/speech/?hl=ja) | Google |  |
SQLite.swift  sqlite3.h not found 対処方法

SQLite.swiftで、sqlite3.h not found エラーが出た場合の対処方法

# 対処方法

module.modulemap を修正する。

```` module.modulemap
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk/usr/include/sqlite3.h'
````

自分の場合は、Xcodeのバージョンを幾つか共存させていたので、アプリ名を変更していた。

Xcode.app -> Xcode7.3.1.app

# 原因

現在のバージョン(0.10.1)では、絶対パス記述になっていたため。

参考: [iOS Swift: SQLite.swift Error - Header not found](http://stackoverflow.com/questions/30588981/ios-swift-sqlite-swift-error-header-not-found)
goアプリをオフィシャルのdockerコンテナ上で走らせるサンプルを作った

リポジトリに相乗りさせる形でのタイプ

https://hub.docker.com/r/ushios/go-example/

上記を見てもらえばわかると思いますが、ちょっとだけ説明。

```Dockerfile
FROM golang:1.6.3-onbuild

CMD ["app", "-s"]
```

該当リポジトリに上記のような`Dockerfile`を作成して、起動コマンドを入れるだけ。
あとはREADMEにあるようなコマンドでbuild,runすれば動くようです。
また、 コンパイル後の実行バイナリはすべて`app`という名前になるらしいです。

```bash
$ docker build -t go-example .
$ docker run -it --rm --name run-go-example -p 80:8080 go-example
```

様々な使い方は別の記事を見ていただけると幸いです。
##### 参考
 - [Goの公式dockerイメージを使ってみた](http://qiita.com/jpshadowapps/items/e5de997d70fb8ecae7da)
Promiseテンプレート

## Promiseとは

>Promiseは非同期処理を抽象化したオブジェクトとそれを操作する仕組みの事をいいます。

参考：[JavaScript Promiseの本](http://azu.github.io/promises-book/)

## このエントリーは？

Promiseについていろいろ勉強した結果、 自分のなかでこういう書き方がわかりやすいかなぁとまとめた内容です。
今後も使いそうなのでテンプレートにしておきました。

## ソース

### Promise処理を順番に処理したい場合

```js:promise.js
call_async_process.process_A(params)
  .then(function(value) {

    // 成功時：何か処理

    //　次の関数の引数
    return proaRes
  })
  .then(call_async_process.process_B)
  .then(function(value) {

    // 成功時：何か処理

    //　次の関数の引数
    return probRes
  })
  .then(call_async_process.process_C)
  .then(function(value) {

   // 成功時：何か処理

  }).catch(function(reason) {
    // 失敗時の処理
    // ※上記で呼び出したすべての非同期処理のreject結果が入る
  });
```

### Promise処理が全て終わるのを待つ場合

```js:promiseAll.js
/**
 * call_async_processの3つの非同期処理を監視
 * @class process_promise_all
 * @return {Promise}　Promiseオブジェクト
 */
const process_promise_all = {
  return Promise.all([
    call_async_process.process_A(),
    call_async_process.process_B(),
    call_async_process.process_C()
  ]);
}

// 実行
process_promise_all().then(function (value) {
    //成功
    console.log(value);
}).catch(function(reason){
    //失敗
    console.log(reason);
});

```



### 非同期処理呼び出しの部分

```js:call_async_process.js
/**
 * 非同期処理群
 * @class call_async_process
 */
const call_async_process = {
  /**
   * 処理A
   * @memberof call_async_process
   * @return {Promise} Promiseオブジェクト
   */
  process_A() {
      return new Promise(function(resolve, reject) {

        /**
         *  非同期処理呼び出し　A
         * @memberof call_async_process.process_A
         */
        startAjax(urlparam)
          .done(function(data) {

            if ('エラーとしたい戻り値判定') {
              resolve('success');
            } else {
              reject('error');
            }

          }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
            reject(errorThrown);
          })
      });
    },
    /**
     * 処理B
     * @memberof call_async_process
     * @return {Promise} Promiseオブジェクト
     */
    process_B() {
      return new Promise(function(resolve, reject)
       //call_async_process.process_Aと同じ感じ
      });
    },
    /**
     * 処理C
     * @memberof call_async_process
     * @return {Promise} Promiseオブジェクト
     */
    process_C(params/*引数あり*/) {
      return new Promise(function(resolve, reject) {
        //call_async_process.process_Aと同じ感じ
      })
    }
};
```

### 内部のajax処理（非同期処理）

```js:startAjax.js
/**
 * Ajax処理
 * @function startAjax
 * @return {Promise} Promiseオブジェクト
 */
function startAjax(urlparam) {
	return $.ajax({
		url: "http://" + urlparam,
		type: "POST",
		dataType: "xml",
		contentType: "text/xml; charset=\"utf-8\"",
		connection: "Keep-Alive",
		crossDomain: true,
		headers: {
		    SOAPAction: "urn:init"
		},
		data: soapMessage
	})
}
```