OmniAICreator/Qiita-1.07M huggingface dataset:
FileReader経由でローカル領域の写真を取得してバイナリ送信する

JavaScriptでFormオブジェクトや、submitを利用せず、FileReaderから写真を取得してサーバサイドに送付します。主な構成は以下の通り。

## 構成
**クライアント側**
macOS Sierra 10.12.4
Google Chrome 57

**サーバサイド側**
Javaで作成します。
以前投稿した以下の記事を参照お願いいたします。
[Spring Bootでファイルアップロード(MultipartFileを利用しない)](http://qiita.com/kaikusakari/items/e869e41bca8a3022f89e)

## クライアント側
HTML

```html
<input type="file" id="file_input" />
```

JavaScript(jQueryを利用します)

```js
$("#file_input").on("change", event => {
    post_image($("#file_input"));
});

function post_image(image) {
	if(image.prop('files')[0] == undefined) return;
	var fr = new FileReader();
	fr.onloadend = function func(event) {
		var ua = new Uint8Array(fr.result);
		ajax_request("リクエスト送付先URL", "POST", ua, false,
			function sc_func(response) {
				console.log(response);
			},
			function er_func(response) {
				console.log(response);					
			}
		);
	}
	fr.readAsArrayBuffer(image.prop('files')[0]);
}

function ajax_request(url, method, data, type, success_func, error_func) {
    $.ajax({
		type: method,
		url: url,
		data: data,
		contentType: type,
		processData: false,
		dataType: "json",
		success: function(response) {
	    	success_func(response);
		},
		error: function(response) {
	    	error_func(response);
		}
    });
}
```
JavaScriptでファイルの入出力をしたい時に役立つリンク集

# ファイルを読込たい

- [【jQuery】外部ファイルの読み込みと操作 - MAXIMUM.PROの日記](http://d.hatena.ne.jp/MAXIMUM-PRO/20100928/1285678024)
    - [$.getJSON() | jQuery 1.9 日本語リファレンス | js STUDIO](http://js.studio-kingdom.com/jquery/ajax/get_json)
- [jQueryのgetJSONで読み込むjsonの要素名に-（ハイフン）使った顛末 - Togetterまとめ](https://togetter.com/li/479111)
    - $.getJSON() を使う時の注意が書いてあります。

## File API ってなんだ？
- [File API入門 - File APIとFileReader APIの利用 | CodeGrid](https://app.codegrid.net/entry/file-api-filereader-api#toc-2)
- [FileSystem API について知る - HTML5 Rocks](https://www.html5rocks.com/ja/tutorials/file/filesystem/#toc-references)
- [TML5のFile APIでローカルファイル情報取得してやんよ!!!  |  ときどきWEB](http://tokidoki-web.com/2013/08/file-api%E3%81%A7%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%83%85%E5%A0%B1%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E3%82%84%E3%82%93%E3%82%88/)



## 選択されたファイルのMIMEタイプを調べたい

- [新JavaScript例文辞典](http://www.openspc2.org/reibun/javascript2/FileAPI/files/0004/)
    - [String.prototype.match() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match)

## 選択できるMIMEタイプを指定したい

- [JavaScriptプログラミング講座【ファイル選択コントロールについて】](http://hakuhin.jp/js/input_file.html#INPUT_FILE_04)

## MIMEタイプの種類(ミネじゃなくてマイムです)

- 必要そうな種類を知りたい時に・・・
    - [HTML5/HTML5の基本/MIMEタイプ - TAG index](http://www.tagindex.com/html5/basic/mimetype.html)
    - [拡張子とMIMEタイプ](http://www.tohoho-web.com/wwwxx015.htm)
- ある程度詳しく知りたい時に・・・
    - [MIME タイプ - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
- 必要なのがわからないからとにかくたくさん見たい時に・・・
    - [Media Types](https://www.iana.org/assignments/media-types/media-types.xhtml)
- めも
    - JSON : application/json
    - CSV : text/comma-separated-values, text/plain, text/csv, MIMEタイプはない・・・何が正解？
        - [質問！ITmedia - CSVのMIMEタイプ](http://qa.itmedia.co.jp/qa9016749.html)
        - [CSVのMIMEタイプについて - その他（コンピューター・テクノロジー） 締切済 | 教えて!goo](https://oshiete.goo.ne.jp/qa/4672679.html)
        - [Comma-Separated Values - Wikipedia](https://ja.wikipedia.org/wiki/Comma-Separated_Values)
        - [MIMEタイプとは―読み方、意味、CSVなどの設定例、など](https://www.naka-jiten.com/MIME-type/index.html#jump3)

## JSONを読み込んで〜したい
- [JSON.parse 関数 (JavaScript)](https://msdn.microsoft.com/ja-jp/library/cc836466(v=vs.94).aspx)
- [【JavaScript】JSONのparseとstringifyメソッドの使い方 - TASK NOTES](http://www.task-notes.com/entry/20160719/1468858991)
- [javascriptでJSONデータを扱う(登録・参照・更新・削除) - Qiita](http://qiita.com/1mada/items/9a48f7053a6016b5fd5a)




# ファイルを出力したい
- [HTML5のBlobで、動的データのダウンロードを、わずか3行で実装できた。 - kurukuru-papaのブログ](http://kurukurupapa.hatenablog.com/entry/20121006/1349522062)
- [Webページ作成覚書: javascript&#65306;ファイルの出力](http://s104bntmp.blogspot.jp/2013/10/javascript_8953.html)
- [スクリプトでファイル入出力](http://marupeke296.com/IKDADV_JS_IO.html)

# 他のことを知りたい
[JavaScriptの実装に役立つリンク集 - Qiita](https://qiita.com/ponsuke0531/items/bf4b67e3ba4ae0df1390)
[JavaScriptでいろいろ取得したい時に見てみるリンク集 - Qiita](https://qiita.com/ponsuke0531/items/802195cdb080182b71b9)
WEBサービスの区分け機能UI

カテゴリやタグ追加機能といった、主となるコンテンツの区分け機能をWEB画面から追加するUIを検討していました。はてなブログのカテゴリ選択機能が凄く使いやすかったため一部の動きを参考にさせていただきました。作成したUIは以下のような動きにしました。

・テキストエリアに文字を入力する
・入力後、Enterキーを押下すると背景色が付き、区分けが視覚化する
・複数の区分けが可能
・Backspaceキーを押下すると、一番最後に追加した区分けを削除する
・視覚化の重複チェック
（同じ単語を視覚化しようとした場合、登録できない）

**機能例**
[カテゴリ選択画面機能例](https://kaikusakari.github.io/category_choice.html)
![1.png](https://qiita-image-store.s3.amazonaws.com/0/110457/d43bd33b-1848-fb8a-6170-3d815f41e463.png)
4. echonet-lite-convの使い方


# ECHONET Liteを解析するプログラムを使ってみる

ECHONET Liteを解析するためのechonet lite converterを使ってみるための情報です。
README.mdだけではわかりにくいとおもうので。


## 準備

```shell-session:console
> npm i echonet-lite
> npm i echonet-lite-conv
```

## テストコード

```javascript:test.js
var util = require('util');
var EL = require('echonet-lite');
var ELconv = require('echonet-lite-conv');
ELconv.initialize();

var objList = ['05ff01'];
var elsocket = EL.initialize( objList, function( rinfo, els ) {
	// データを受信するたび，このブロックが実行される
});

// 10秒に1回情報を表示（内部データは常時更新されている）
setInterval(function() {
	console.log('====');
	ELconv.refer( EL.facilities, function( devs ) {
		console.log(util.inspect(devs,false,null));
	});
}, 10000);

EL.search();
```

## 実行

実行しましょう。受信待ちで無限ループになるので自動的には終了しません。
10秒待っていると出力されて，そのあとも10秒間隔で何度も出力されます。
満足したらCtrl-Cで終了しましょう。

```shell-session
> node test.js
```


## 出力
何も機器がなくても，自分がコントローラなので下記1つはあります。
IPアドレスは例です。実行環境に依存します。

```javascript:output
====
{ IPs: [ '192.168.2.152' ],
  '192.168.2.152':
   { EOJs: [ 'ノードプロファイル01(0ef001)' ],
     'ノードプロファイル01(0ef001)':
      { EPCs:
         [ '動作状態(80)',
           'Version情報(82)',
           '識別番号(83)',
           'インスタンスリスト通知(D5)',
           '自ノードインスタンスリストS(D6)',
           '状変アナウンスプロパティマップ(9D)',
           'Setプロパティマップ(9E)',
           'Getプロパティマップ(9F)',
           'メーカコード(8A)',
           '自ノードインスタンス数(D3)',
           '自ノードクラス数(D4)',
           '自ノードクラスリストS(D7)' ],
        '動作状態(80)': 'ON(30)',
        'Version情報(82)': 'Ver. 1.10 規定電文形式(010A0100)',
        '識別番号(83)': 'referSpec(FE00000000000000000000000000000000)',
        'インスタンスリスト通知(D5)': 'keyValues(0105FF01)',
        '自ノードインスタンスリストS(D6)': 'コントローラ01(0105FF01)',
        '状変アナウンスプロパティマップ(9D)': '02[80, d5](0280D5)',
        'Setプロパティマップ(9E)': '00[](00)',
        'Getプロパティマップ(9F)': '09[80, 82, 83, 8a, d3, d4, d5, d6, d7](098082838AD3D4D5D6D7)',
        'メーカコード(8A)': '学校法人幾徳学園　神奈川工科大学(000077)',
        '自ノードインスタンス数(D3)': '1(000001)',
        '自ノードクラス数(D4)': '2(0002)',
        '自ノードクラスリストS(D7)': 'コントローラ(0105FF)' } } }
```

## ポイント

* echonet-liteモジュール内部にある「EL.facilities」を読んでしまう事。EL.facilitiesは書き込んではダメよ，受信データと不一致が出てしまうよ。
* ELconv.referすれば解析結果がコールバックされるよ。
Docker for MacでRails＋PostgreSQLの開発環境を作る

# はじめに
Ruby on Rails + PostgreSQLで開発する必要が生じたので、Docker for Macを使って開発環境を構築しました。
基本的には以下のリンクにある通りに実行すれば開発環境はできますが、少し問題があったので、その情報も追加しています。
[Quickstart: Compose and Rails](https://docs.docker.com/compose/rails/)
# Docker for Mac
Docker for Macをインストールしてない方は
[Get started with Docker for Mac](https://docs.docker.com/docker-for-mac/)
などを参考にインストールしてください。
# Ruby on Rails用Dockerfile
開発に使うdocker用のDockerfileを作成します。
まず、アプリ用のディレクトリを用意します。ここでは```~/myapp```とします。
元になるdocker imageとして最新のrubyのイメージを使用します。Dockerfileは以下のようになります。

```
FROM ruby:2.4.1

ENV LANG C.UTF-8
RUN apt-get update -qq 
RUN apt-get install -y build-essential libpq-dev postgresql nodejs

RUN gem install bundler
WORKDIR /tmp
ADD Gemfile Gemfile
ADD Gemfile.lock Gemfile.lock
RUN bundle install

ENV APP /myapp
RUN mkdir -p $APP
WORKDIR $APP
ADD . $APP
```
Ruby on RailsのコンテナにもpostgreSQLをインストールしておかないと、```rails db:connect```でデータベースに接続できないので、最初にインストールしておきます。
また、Gemfile, Gemfile.lockだけを/tmpにコピーして、```bundle install``` しているのは、キャッシュを利用してbundleを高速化するためです。詳しくは以下を参照ください。
[Docker で bundle install を爆速にする](http://qiita.com/kaiinui/items/5ec52437d114e364b7f0)
# Gemfileの作成
最初の起動用のGemfileを作成します。

```
source 'https://rubygems.org'
gem 'rails'
```
これで最新のrailsがインストールされます。また、空のGemfile.lockが必要なので、コマンドラインで、

```
$ touch Gemfile.lock
```
として作成します。
これらのファイルは```rails new```した時に上書きされます。
# docker-compose.ymlの作成
docker-composeの設定ファイルを作成します。

```
version: '2'
services:
  db:
    image: postgres
  web:
    build: .
    command: bundle exec rails server -p 3000 -b '0.0.0.0'
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
```
# Railsアプリケーションの生成
rails newを実行して、Railsアプリケーションを生成します。

```
$ docker-compose run web rails new . --force --database=postgresql --skip-bundle
```
生成が終われば、色々なファイルが生成されています。

```
$ ls -l
```
で確認できます。
# Docker imageの作成
次のコマンドでdocker imageを作成します。

```
$ docker-compose build
```
この後、Gemfileを変更した場合は、再度イメージをビルドし直す必要があります。
# データベースの設定
Ruby on Railsはいろいろなデータベースを使うことができますが、ここではPostgreSQLを使用します。
PostgreSQLへ接続するための情報を```config/database.yml```に設定します。

```
default: &default
  adapter: postgresql
  encoding: unicode
  pool: 5
  username: postgres
  password:
  host: db
```
デフォルトで用意されているユーザーはpostgresなので、ユーザー名にはこれを指定します。この後行う```db:create```では、develpmentとtestの両方のデータベースが作成されますので、defaultにユーザーなどを設定した方が今は便利です。
実際のアプリでは、データベースのユーザー設定をきちんと行い、この設定ファイルもそれに合わせて修正してください。
#　アプリケーションの起動
次のコマンドでアプリケーションを起動します。

```
$ docker-compose up
```
次に、アプリを起動したまま、別のターミナルで以下のコマンドを実行してデータベースを作成します。

```
$ docker-compose exec web rails db:create
```
これでアプリケーションの設定が終わりました。Webブラウザで次のURLにアクセスすると、

```
http://localhost:3000/
```
Railsのトップページが表示されます。
![Screen Shot 2017-05-08 at 15.57.30.png](https://qiita-image-store.s3.amazonaws.com/0/38304/38a3e11c-8a0e-72b8-2701-86128f23a6a9.png)
Vue.jsの標準環境ではChrome上でBreakPointが発火しない

#解決策

`devtool`を`#cheap-module-eval-source-map`から`#cheap-module-inline-source-map`に変更するだけ。

```js:build/webpack.dev.conf.js
  // eval-source-map is faster for development
  devtool: '#cheap-module-inline-source-map', //#cheap-module-eval-source-map',
```


これでちゃんと.vueに貼ったブレークも発火します。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/109103/4509917d-1138-adc0-6c7b-af395a589e68.png)

##該当Issue
https://github.com/webpack/webpack/issues/2145


##当方の環境
再発したときのために、一応環境も書いておく。
Windows10@1703(15063.138)
Chrome@ 58.0.3029.96 (64-bit)
vue@2.3.2
webpack@2.5.1
Swift実践入門読書会の非同期処理にあたって参考にしたソース

### Swift実践入門に書いてあること  
1. GCD
2. Operation
3. Thread


非同期処理をさらっと流しているという感想でした。より深い理解の為には下記参考情報が役に立つと思われます。
### 参考
* [並列プログラミングガイド - Apple](https://developer.apple.com/jp/documentation/ConcurrencyProgrammingGuide.pdf)
* [Concurrent Programming with GCD in Swift 3](https://developer.apple.com/videos/play/wwdc2016/720/)
* [8.2 Grand Central Dispatch · mixi-inc/iOSTraining Wiki · GitHub](https://github.com/mixi-inc/iOSTraining/wiki/8.2-Grand-Central-Dispatch)
* [増補改訂版 Java言語で学ぶデザインパターン入門 マルチスレッド編](https://www.amazon.co.jp/%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88-Java%E8%A8%80%E8%AA%9E%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E5%85%A5%E9%96%80-%E3%83%9E%E3%83%AB%E3%83%81%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E7%B7%A8-%E7%B5%90%E5%9F%8E-%E6%B5%A9/dp/4797331623)
* [非同期IO - Wikipedia](https://ja.wikipedia.org/wiki/%E9%9D%9E%E5%90%8C%E6%9C%9FIO)
* [コルーチンについての覚書 - Unityな日々（Unity Geek）
](http://unitygeek.hatenablog.com/entry/2017/04/12/172044)
[Actor-based Concurrency](http://berb.github.io/diploma-thesis/original/054_actors.html)
* [Concurrency.rst at master · apple/swift · GitHub](https://github.com/apple/swift/blob/master/docs/proposals/Concurrency.rst)
* [GitHub - apple/swift-evolution: development-major-version--swift-40](https://github.com/apple/swift-evolution#development-major-version--swift-40)
* [Dispatch | Apple Developer Documentation](https://developer.apple.com/reference/dispatch#overview)
* [How to create a serial DispatchQueue in swift 3... | Apple Developer Forums](https://forums.developer.apple.com/thread/53270)

### ライブラリなど  
* [BrightFutures](https://github.com/Thomvis/BrightFutures)
* [Hydra](https://github.com/malcommac/Hydra)
* [Swiftでasync/awaitな書き方もできるPromiseライブラリHydra - Qiita
](http://qiita.com/hachinobu/items/fb7b3e52a7b9ee430496)

### その他の言語など  
* [Kotlin 1.1 async/awaitの仕組みと使い方の概要 for Android](http://sys1yagi.hatenablog.com/entry/2016/12/19/184352)
* [before you start using async/await](https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8,Understand promises before you start using async/await) 
* [Go が他の多くの言語での非同期プログラミングよりも優れている理由 - Qiita](http://qiita.com/methane/items/5ad7c092c0d426db4ab5)
BigQueryでクエリを実行せずにスキャン量の見積もりを確認する

BigQueryはスキャンしたデータ量に応じて課金されるので、クエリがどの程度のデータをスキャンするのか実行前に事前に確認できると安心です。

確認方法は簡単で、右端の緑のチェックを押して、Validatorを起動してクエリの構文チェックできますが、このときスキャン量の見積もりも出てるので、クエリの実行前に毎回Validatorでチェックする癖を付けると精神衛生上良さそうです。

![image](https://qiita-image-store.s3.amazonaws.com/0/61152/3e36ea19-7f0d-efb5-97ea-8873ef65c0b2.png)
Vueにデバッグ関数を追加


`methods:` に追加する

![スクリーンショット 2017-05-08 19.11.00.png](https://qiita-image-store.s3.amazonaws.com/0/109241/30c09f4a-70e0-ad05-920c-c66843bf0130.png "スクリーンショット 2017-05-08 19.11.00.png")

Googleの拡張機能「Vue devtools」でみる。

![スクリーンショット 2017-05-08 19.13.55.png](https://qiita-image-store.s3.amazonaws.com/0/109241/6c4a3b67-7be5-90c0-0167-a9d5dd0d7587.png "スクリーンショット 2017-05-08 19.13.55.png")

Console drawerでコンソールを表示（↓はHideだけど）

![スクリーンショット 2017-05-08 19.16.37.png](https://qiita-image-store.s3.amazonaws.com/0/109241/5858ee2a-489f-0ede-b89f-6f177b410d3f.png "スクリーンショット 2017-05-08 19.16.37.png")

以下で実行

![スクリーンショット 2017-05-08 19.17.58.png](https://qiita-image-store.s3.amazonaws.com/0/109241/3a813750-9a0e-f215-a195-c0caafe15634.png "スクリーンショット 2017-05-08 19.17.58.png")
CentOS7.3でデフォルトインストールされるLibreOfficeを消す方法

##はじめに
CentOS7.3のOSインストール時の形態によって状況が異なると思われますが、私がGUI(XWindow)を必要とする形のオプションでOSを入れるとなぜかいつも、Libreofficeが一緒にインストールされてしまいます。
サーバー用途でLibreofficeが必要になるケースはそこまでないでしょうし、変に脆弱性をつかれる根源になっても困りますので、サクッとLibreOfficeを消すコマンドを用意しておきました。

##実行コマンド
```bash:
rpm -e unoconv-0.6
rpm -e libreoffice-impress-5.0.6.2-3.el7.x86_64
rpm -e libreoffice-writer-5.0.6.2-3.el7.x86_64
rpm -e libreoffice-ure-5.0.6.2-3.el7.x86_64
rpm -e libreoffice-calc-5.0.6.2-3.el7.x86_64
rpm -e libreoffice-langpack-ja-5.0.6.2-3.el7.x86_64
rpm -e libreoffice-pdfimport-5.0.6.2-3.el7.x86_64 --nodeps
rpm -e libreoffice-draw-5.0.6.2-3.el7.x86_64
rpm -e libreoffice-pyuno-5.0.6.2-3.el7.x86_64
rpm -e libreoffice-graphicfilter-5.0.6.2-3.el7.x86_64
rpm -e libreoffice-core-5.0.6.2-3.el7.x86_64
rpm -e libreoffice-opensymbol-fonts-5.0.6.2-3.el7.noarch
```

これを流せば、LibreOfficeは、サーバーからいなくなります。
※依存関係から考えて、どうもunocpnvが疑わしい気が...。
Adobe After EffectsとbodymovinでSVGアニメーションの作成を試してみる


# <i class="fa fa-plug" aria-hidden="true"></i> After Effects Add-onのインストール

* [Adobe Add-ons Bodymovin](https://creative.adobe.com/addons/products/12557)

![addons.png](https://qiita-image-store.s3.amazonaws.com/0/170211/d0d22b38-49c1-253a-2a0e-c7c9dee0a7aa.png)
<br>

### <i class="fa fa-exclamation" aria-hidden="true"></i> Adobe After Effects CC 2017の場合は下記の手順
1. After Effectsの拡張機能インストールのため、下記よりZXP Installerをダウンロード・インストールします。<br>[ZXP Installer](http://aescripts.com/learn/zxp-installer/)<br>
![zxpinstaller.png](https://qiita-image-store.s3.amazonaws.com/0/170211/ac27a176-d5aa-322d-0e2c-281604c7933e.png)
<br><br>
1. [githubのリポジトリ](https://github.com/bodymovin/bodymovin)からファイルをダウンロードし、「build ＞ extension ＞ bodymovin.zxp」をZXPInstallerにドラック＆ドロップ。<br><br>
![github.com_bodymovin.png](https://qiita-image-store.s3.amazonaws.com/0/170211/5f3b1377-317e-c011-6659-16f4f2ee1917.png)
<br>

# <i class="fa fa-video-camera" aria-hidden="true"></i> After EffectsからJSONの書き出し

アニメーションを作成したのち、「ウインドウ ＞ 拡張機能」から「Bodymovin」を選択し、ウインドウを開きます。

![ae1.png](https://qiita-image-store.s3.amazonaws.com/0/170211/c5742762-8101-9b1b-6bd5-27a70b2a3671.png)

作成したコンポジションを選択して「Render」を押すと↓こんなのが出たので、

![ae2.png](https://qiita-image-store.s3.amazonaws.com/0/170211/cc853c82-2983-27f5-877f-0b244fc99e36.png)

「編集 ＞ 環境設定 ＞ 一般設定」内の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れますと、無事JSONファイルが書き出されました。

![ae3.png](https://qiita-image-store.s3.amazonaws.com/0/170211/a07fe88c-39bb-2494-3b5f-b2a1f7430a48.png)
<br>

### サポートされている機能（一部）
> - プリコンポーズ
> - シェイプ（矩形、楕円、星型）、テキスト
> - ヌルオブジェクトレイヤー
> - マスク
> - パスのトリミング
> - タイムリマップ
> - ブレンドモード（IE、Edgeを除く）


### サポートされていない機能（一部）
> - 画像のシーケンス
> - ビデオ、オーディオ
> - レイヤーの時間伸縮
> - 3Dレイヤー


# <i class="fa fa-code" aria-hidden="true"></i> 実装
```html
<div id="bodymovin"></div>
```
に出力する場合、

```javascript
<script src="bodymovin.js"></script>

<script>
var animData = {
    wrapper: document.getElementById('bodymovin'),
    animType: 'svg',
    loop: true,
    prerender: true,
    autoplay: true,
    path: 'data.json'
};
var anim = bodymovin.loadAnimation(animData);
</script>
```
というような形で出力します。

> JSONデータを取得する際のクロスドメイン制約のため、ブラウザでの確認はローカルデータではなく、XAMPPなどに乗っけて行います。

# <i class="fa fa-file-text-o" aria-hidden="true"></i> 参考
* [bodymovin Wiki](https://github.com/bodymovin/bodymovin/wiki)
* [AfterEffectsで作成したアニメーションをJSONで書き出してみた](http://www.sonicjam.co.jp/blog/hitori/001484/)
* [Lottie](http://airbnb.design/lottie/)
* [LottieFiles](http://www.lottiefiles.com/)

> bodymovinをベースにAirbnbが開発しているSVGアニメーション用ライブラリ。
> 「LottieFiles」にはサンプルが豊富に掲載されており、それぞれJSONデータのダウンロードが可能。

# <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 雑感
After Effects上でのデータ作成に多少コツ（サポート外の機能の把握など）が必要ではありますが、実装自体はライブラリ丸投げで非常に簡便です。ただし、After Effectsの習得の方が大きな問題かも……
UbuntuからL2TP/IPsecにVPN接続する

UbuntuからL2TPなサーバーにVPN接続しようとしたらめちゃくちゃハマってしまったのでここで覚書

## 環境

- サーバー
    - Windows Server 2012(L2TP/IPsec)
- クライアント
  - Ubuntu 16.04

## 手順

```bash
$ sudo apt install xl2tpd strongswan git libgtk-3-dev libnma-dev libsecret-1-dev libnm-gtk-dev libnm-util-dev network-manager-dev libnm-glib-vpn-dev dh-autoreconf libglib2.0-dev ppp-dev intltool
$ git clone https://github.com/nm-l2tp/network-manager-l2tp.git
$ cd network-manager-l2tp
$ sudo ./autogen.sh
$ sudo ./configure --prefix=/usr \
--sysconfdir=/etc --localstatedir=/var \
--libdir=/usr/lib/x86_64-linux-gnu --libexecdir=/usr/lib/x86_64-linux-gnu \
--with-pppd-plugin-dir=/usr/lib/pppd/2.4.7 --enable-absolute-paths
$ sudo make
$ sudo make install

$ sudo service xl2tpd stop
$ sudo update-rc.d xl2tpd disable
$ sudo service network-manager restart
```

後はnetwork-managerからVPNの設定をすればOK
注意点としては、
- `IP Settings`=>`Enable IPsec tunnel to L2TP host`と`PPP Settings`=>`Use Point-to-Point encryption (MPPE)`にチェックすること
- /etc/network/interfaceでIPの固定はしないこと(するとnetwork-managerで管理ができなくなる)


## 参考
- [いつか、そのとき、あの場所で。 | [Ubuntu][VPN][自分用メモ] Ubuntu 16.04 のL2TP/IPsec クライアントツール、「Network Manager L2TP plugin」。](http://kometchtech.blog.fc2.com/blog-entry-1953.html)
- [直立二速歩行: ubuntu 16.04 でvpn client としてl2tp/ipsecサーバーに接続するやりかた。](https://kokawa2003.blogspot.jp/2016/08/ubuntu-1604-vpn-client-ipsec.html)
Macにneovimをインストール（MacVim-KaoriYaと共存）

# はじめに
neovimのインストールくらいは、ググればすぐに出てくるのですが、今までのvimと設定を共有しておきたいと思っていました。
ターミナルからVimを起動させる以外に、MacVimも使っています。
.vimrcに色々書き込んでいて、これを使いまわしたいのです。
調べれば分かることですが、そのものズバリのページは見つからなかったので、手順書です。

# neovimのインストール
公式の配布先にあるとおりです。コマンド一発で。
brewコマンドなのでもちろんHomebrewを先にインストールしておく必要があります。

```zsh
brew install neovim
```

[Homebrew — macOS 用パッケージマネージャー](https://brew.sh/index_ja.html)

# Vimの設定ファイルにシンボリックリンクを張る

今までのvim環境では設定は~/.vimrcに保存するようになっています。
neovimの場合は~/.config/nvim/init.vimです。
今のところ設定を使い分ける気はないので、もとからあった.vimrcにシンボリックリンクを張ることにしました。

```zsh
ln -snfv ~/.vim ~/.config/nvim/
ln -snfv ~/.vimrc ~/.config/nvim/init.vim
```

neovim設定ファイルについては下記に目を通しておくとよいでしょう。
[NeoVim、そしてdein.vimへ](http://qiita.com/okamos/items/2259d5c770d51b88d75b)

## エイリアスを設定しておく

neovimのコマンドはnvimですが、viコマンドでneovimが開くようにしても問題ないのでaliasを設定しておきます。

```zsh
alias vi='nvim'
```

# 余談

## GUIなneovim

いくつか紹介はされています。
[Related projects · neovim/neovim Wiki · GitHub](https://github.com/neovim/neovim/wiki/Related-projects)

ただ、MacVim-KaoriYaに近い設定をもつものは今のところなさそうなので。
かといってここから落として設定を自分で作り上げるのも。。

## neovim導入
正直なところ、現状は無理にneovimする必要はないのですが、これから盛り上がってきそうな気はするので。。
リモートで削除されたブランチをローカルにも同期する方法

以下のコマンドです。

```bash
$ git fetch -p
```

リモートリポジトリの更新情報を取得しつつ、リモートリポジトリ内で削除されたブランチをローカルでも削除してくれます。
個人的にマージ済みのブランチは削除するようにしているので、このコマンドでローカルもすっきりします。

蛇足ですが個人的には以下の流れで開発することが多いです。

1. 開発ブランチをcheckoutして作る
2. masterにプルリクエストを送る
3. マージしたらGithub上で開発ブランチを削除する
4. デプロイとか
5. `git pull origin master`する
6. `git fetch -p`でローカルに同期する
英語学習をlingvist.comでする時にちょっと楽するTips

## 学習状況
2017年8月23日現在
履歴
61時間
語彙
3395単語

## ちょっと楽するTips

https://learn.lingvist.com/
英単語を短い文章の中で覚えるサイト
現在無料で公開中（平成29年8月23日 現在）
このサイトは無料サービスの中では最強のサービスだと思う
英文をネイティブがしゃべってくれるし、文章中のどの単語もクリックするだけで読み上げてくれる、目標も１日新しい単語20 正解率80% 問題数100と設定されそれが直近1－4週間分のグラフとしてみれる、また覚えた語彙数も5000語まで視覚化される。

ブラウザはChromeを使用

学習方法は単語を入力し綴りがあっていたら、英文を音読、音読が日本語を喋るように滑らかに言えるようになったら、次はルックアップ（英文から目を離す）して英文を暗唱して、それが出来たら次に行く 後はこの繰り返し。
この時、音声を再生してモノマネしながら暗唱すると効果的。

しかし・・・

英文を音声で読み上げてくれるサービスはあるけれどショートカットキーがないので、いちいちマウスをクリックしなければならない。

そこでAutoHotKeyを使って
キーボードから手を離さずに音声を読み上げるように設定する。

（AutoHotKeyの使い方はわかっているものとして）

「,」キーに設定する
**音声を読み上げたいページ**もしくは**次の問題ページ**でこのキーを押すと音声を読み上げてくれる。
（遡れるのは一つ前の問題まで）

仕組みは単純で右カーソルキー、左カーソルキーを押すだけ
（次の問題ページから左カーソルキーを押すと、音声を読み上げて欲しいページに移動しその時自動で音声を読み上げてくれる機能がある。）

その他の便利なキー設定
Ctrl＋「hjkl」でホームポジションから手を離さずに
カーソル移動や画面遷移が出来る。
Ctrl＋h は左カーソルキー
Ctrl＋j は下カーソルキー
Ctrl＋k は上カーソルキー
Ctrl＋l は右カーソルキー

;はリターンキー（決定ボタン）
.は右カーソルキー
,は左カーソルキー（一つ前の問題に戻る）
スペースキーは右カーソルキー＋少し待って＋左カーソルキー
（このキーは一つ前の前の問題にいる時に、音声をボタン一つで再生するために設定した。）（回答済みの問題に限る）


```AutoHotKey:AutoHotkey.ahk

# NoEnv  ; Recommended for performance and compatibility with future AutoHotkey releases.
# Warn  ; Recommended for catching common errors.
SendMode Input  ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir%  ; Ensures a consistent starting directory.

;＝＝＝デフォルト （効果範囲はPC全体）

^h::Send, {Left}
^j::Send, {Down}
^k::Send, {Up}
^l::Send, {Right}

`;::Send, {Enter}


;＝＝＝Lingvist  （効果範囲はLingvistページ内のみ）
# IfWinActive Lingvist - Google Chrome

;画面移動用のキー設定
,::Send, {Left}
.::Send, {Right}

;音声再生のリピート専用キー設定（回答済みの問題に限る）
Space::
Send, {Right}
Sleep, 300
Send, {Left}
return


# IfWInActive



```

### AutoHotKeyの設定の仕方

AutoHotKey内のツール
WindowSpyを使うことでChromeブラウザのLingvistページでの情報を得る。

WindowSpy出力結果

```
Lingvist - Google Chrome   <<<<<（１）
ahk_class Chrome_WidgetWin_1
ahk_exe chrome.exe
```

（１）の情報を
\#IfWinActive （１）とするとそのブラウザのその画面だけに効果があるキー設定が出来る。

```AutoHotKey:AutoHotkey.ahk
# IfWinActive Lingvist - Google Chrome

～（効果範囲）～

# IfWinActive
```



## lingvist.comtとは？
Lingvistが日本語ベースの英語学習に対応 - Duolingo
https://ja.duolingo.com/comment/19955308/Lingvistが日本語ベースの英語学習に対応
Mac なターミナル使いは .DS_Store は要らない


とか言いながら iTerm なんだが。
なので、`.bashrc` なんかに

```shell
export FIGNORE=${FIGNORE}:.DS_Store
```
って書いておけば bash の補完に出てこなくなる。
うん、心の安定促進。

bash 使いじゃない人は心の目で見て。
RailsのControllerTestでRemote:trueのメソッドをテストする。

シンプルにこれだけ。
xhrメソッドが肝。

```rb
  test "should get edit" do
    xhr :get, :edit, id: @hoge
    assert_response :success
    assert_not_nil assigns(@hoge)
  end
```

Javascriptの実行テスト結果をテストすることは出来ないが、
内部変数ののチェックまでは可能。

[Rails4×Bootstrap3でNew/Edit画面をモーダルダイアログ化する](http://qiita.com/tabbyz/items/1ae01be713e5c35adcd5)

こんな感じの画面を作った時に、テストでアレっとなったので、メモ
もちろんドキュメントにはちゃんと載っていますよ。

[Railsドキュメント：テスト](http://railsdoc.com/test)
*inux環境で，素直なpdfのtext化

後半のお掃除フェーズのコマンドがいつも思い出せないのでメモ。

# PDFをtext化する
ここは基本的に ```pdftotext``` コマンドで一発。

# お掃除する
ただ，そのままだと ^L などの特殊文字が入っていることがあるので ``` col -bx ``` で綺麗にする。
golangリポジトリに無料で貼りたいバッヂの一覧（プライベート・パブリック別）

# プライベート

## 継続的インテグレーション

* [Circle CI](https://circleci.com/)
* [Wercker](http://www.wercker.com/)

# パブリック

## 継続的インテグレーション

* [Circle CI](https://circleci.com/)
* [Wercker](http://www.wercker.com/)
* [Travis CI](https://travis-ci.org/)

## カバレッジ

* [Code Climate](https://codeclimate.com)
* [Coveralls](https://coveralls.io/)

## ライセンス
* [FOSSA](https://app.fossa.io)

## golang特有

* [godoc](https://godoc.org/)
* [Go Report Card](https://goreportcard.com/)

# 参考
* [クラウドサービスを活用して README にバッジをペタペタ貼る](http://qiita.com/dtan4/items/13b0ea9edf5b99926446)
ActiveRecord + MySQLでレコード抽出

# はじめに
本記事は[ドットインストールActive Record入門 (全19回)](http://dotinstall.com/lessons/basic_activerecord_v2)で学習した時のメモ書きである。

#対象読者
ActiveRecordを勉強しようと思っている、Rubyの文法は基本的に知っている初心者

#本記事の目的
ActiveRecordの一機能である、「レコード抽出機能」を理解するための自分用のアウトプット記事


#実行環境

|        |   バージョン  |   Extra     |
|:-----------------:|------------------:|:------------------:|
|CentOS|6.9|VirtualBox経由でssh接続|
|VirtualBox|5.1.18||
| ActiveRecord             |     5.1.0          |                |
| MySQL           |    5.7.18         |              |
|     Ruby         |            2.4.1 |        rbenvで管理        |
| Bundler                |         1.14.6        |             |

#各種設定/実行ファイル

```:Gemfile
# frozen_string_literal: true
source "https://rubygems.org"

# gem "rails"
gem "activerecord"
gem "mysql2"
gem "sinatra"
```
```yaml:database.yml
development:
  adapter: mysql2
  database: TestApp
  host: localhost
  username: root
  password: ××××××××
  encoding: utf8
```

```rb:main.rb
require 'active_record'
require 'pp'
require 'mysql2'

Time.zone_default = Time.find_zone! 'Tokyo'
ActiveRecord::Base.default_timezone = :local

ActiveRecord::Base.configurations = YAML.load_file('database.yml')
ActiveRecord::Base.establish_connection(ActiveRecord::Base.configurations['development'])

class User < ActiveRecord::Base
end

# insert

User.delete_all

User.create(name: "tanaka", age: 19)
User.create(name: "takahashi", age: 25)
User.create(name: "hayashi", age: 31)
User.create(name: "mizutani", age: 28)
User.create(name: "otsuka", age: 35)

#以下をいじる

```
実行コマンド

```
bundle exec ruby main.rb
```


#レコードの抽出
##selectメソッド
**抽出するフィールドを指定したい場合は`select`メソッドを用いる。**


```rb:selectメソッドの例
#id, name, ageの値だけ、全てのレコード分表示
pp User.select("id, name, age").all

#id, ageの値だけ、最初の３件のレコード分だけ表示
pp User.select("id, age").first(3)
```
ppはpretty printというツールで見やすい形で出力してくれる。

##findメソッド

**主キーによる検索結果を抽出したい場合は`find`メソッドを用いる。**

```rb:findメソッドの例
# 主キー(id)の値が3であるレコードのid, name, ageの値を抽出
pp User.select("id, name, age").find(3)
```
##find_byメソッド

**その他のフィールドによる検索結果を抽出したい場合は`find_by`メソッドを用いる。**
メソッドの引数に検索対象のフィールドとその値をハッシュ形式で記載する。

```rb:find_byメソッドの例
# nameがtanakaであるレコードのid, name, ageの値を抽出
# 該当するレコードがなかったらエラーを返す。
pp User.select("id, name, age").find_by!(name: "tanaka")
pp User.select("id, name, age").find_by_name! "tanaka"
```

メソッドの最後に`!`をつけると、該当レコードがない時にエラーを吐き出す。つけなかった場合は`nil`が返る。

##whereメソッド
**`where`メソッドを使えば範囲指定など、より複雑な検索が可能。**

```rb:whereメソッドの例
# ageの値が20から29の間にあるレコードのid, name, ageの値を抽出
pp User.select("id, name, age").where(age: 20..29)
pp User.select("id, name, age").where("age >= 20 and age < 30")#

# idが3でないレコードのid, name, ageの値を抽出
pp User.select("id, name, age").where.not(id: 3)
```

※注意点
条件を記述する際、変数を用いるとき、**プレースホルダー**を使って条件文字列に安全に値を埋め込むことが必要。

```rb:プレースホルダーを用いた例
min = 20
max = 30

#以下二つは同様の意味
#?多いと見にくいからシンボルを用いることもある
pp User.select("id, name, age").where("age >= ? and age < ?", min, max)
pp User.select("id, name, age").where("age >= :min and age < :max", {min: min, max: max})

```
部分一致の検索結果を抽出したい場合もプレースホルダーを用いる。

```rb:部分一致検索にプレースホルダーを用いた例
# 名前が"a"で終わるレコードのid, name, ageの値を抽出
pp User.select("id, name, age").where("name like ?", "%a")
```
ドメインコントローラにおけるDNSの動的更新

Active Directory（以下、ADと省略）設定時に発生したトラブルについて共有します。

#トラブル内容

AD/DNSサーバをインストールし、別のホストをドメイン参加させようとしたところ、以下のエラーが出ました。![エラー画面.jpeg](https://qiita-image-store.s3.amazonaws.com/0/171918/2eeb871c-4038-ae33-5e10-7e82cfba2613.jpeg)

このエラーの原因として、
**SRVレコードが正しく作成されていない**
可能性があります。

そこで、
**DNSサーバの動的更新を行う**ことで、AD構築時に必要なSRVレコードの登録をします。

#DNSサーバの動的更新
OSはWindows Server 2012 R2を使用しています。

方法は簡単です。DNSサーバのインストール前に、1つのチェックボックスを選択するだけでOKです。

1. [コントロールパネル]>[ネットワークとインターネット]>[ネットワークと共有センター]で接続しているネットワークを選択する
2. [プロパティ]>[インターネット プロトコル バージョン4(TCP/IPv4)]を選択し、[プロパティ]>[詳細設定]>[DNS]タブを表示
3. 「この接続のアドレスをDNSに登録する」のチェックボックスを選択
![DNS設定画面_編集.jpeg](https://qiita-image-store.s3.amazonaws.com/0/171918/b3722dee-f133-a51c-3748-b0bb05c3e099.jpeg)

その後、[サーバー マネージャー]にてADサーバのインストールとドメインコントローラへの昇格を行います。

以上で、ドメインコントローラにおけるDNSの動的更新が可能になります！

#まとめ
ドメインコントローラーは、ADに必要なSRVレコードを登録するという理由でDNSの動的更新が望ましいです（必須ではありません）。
そのためにも、ADサーバのインストール前に、動的更新の設定ができているかどうか確認しましょう！
機械学習① SVM (Support Vector Machine) まとめ

# Support Vector Machine のまとめ

## What is SVM ?

SVM は一言で言うと、データを２つに分ける線を引く、教師ありでの機械学習モデルです。
この時に優先事項があります。

1. データを正確に group 分けする。（異常値outlierは別）
2. 線と点との差である Margin を最大化する。





## default のコード

```python:

from sklearn.svm import SVC

SVC(C=1.0, kernel='rbf', degree=3, gamma='auto', coef0=0.0, shrinking=True, 
probability=False, tol=0.001, cache_size=200, class_weight=None, 
verbose=False, max_iter=-1, decision_function_shape=None, random_state=None)

```

## SVM 内の Parameter の説明

- C 
 
Cは、誤分類をどの程度許容するかを決めるパラメータ。Cの値を大きくすれば大きくするほど、データの分類をより正確にしようとする。つまり、より複雑な線になりやすい。大きくしすぎると、過学習の状態になってしまうので、注意。


![Screen Shot 2017-05-08 at 13.26.27.png](https://qiita-image-store.s3.amazonaws.com/0/161691/bf8e19c7-f53a-409f-6a5a-714581fbce0b.png)
According to the 'Introduction to Machine Learning' from Udacity


- kernel
基本的に使うのは、線形カーネルの Linear と、 非線形カーネルの rbf の二種類。ちなみに、 Linear にすると直線で、データを分け、 rbf にすると、より曲線的で、複雑な線でデータを分ける。


- gamma
これは、線に近い方の点か線から遠い方の点、どちらを重要視するかを決める。つまり、値を大きくすると、近くの点との margin を重要視して、その結果、線は複雑になる。

![Screen Shot 2017-05-08 at 13.31.00.png](https://qiita-image-store.s3.amazonaws.com/0/161691/785993b9-5136-ed49-80c3-e1b656cdc9ff.png)
According to the 'Introduction to Machine Learning' from Udacity

反対に、小さくすると、遠くの点との margin を重要視するようになるので、線はある程度シンプルになる。

![Screen Shot 2017-05-08 at 13.32.35.png](https://qiita-image-store.s3.amazonaws.com/0/161691/af541fab-1fe8-3c67-feae-f5d3c5622a34.png)
According to the 'Introduction to Machine Learning' from Udacity


## SVM の 良い点悪い点。

- 良い点
最適化すべきパラメータが少ない。
データの特徴量が高次元になっても、対応できる。


- 悪い点
データにノイズが含まれている場合（上記の図で言えば、少数のマルが、バツの領域に存在していたり、少数のバツがマルの領域に存在していたり）、そして、データがオーバラップしている場合（上記の図で言うと、真ん中の線を引くべきところで、多くのマルとバツが混在している場合）していると、データが綺麗に分類されずらい。


## まとめ

以上が現在筆者のわかる範囲での SVM の概要です。
日々更新していきますので、追加すべきところ、直すべきところありましたら、コメントいただけると幸いです。
Font Awesome を利用して CSS (SCSS) だけでローディングマスクを実装する

# 実装

SCSS の mixin として実装してます。

```loading.scss
@mixin loading($mask: false, $font-size: 36px, $z-index: 1) {
  position: relative;

  @if $mask {
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: $z-index;
      background-color: rgba(0, 0, 0, 0.25);
    }
  }

  &::after {
    content: '';
    position: absolute;
    content: "\f110";
    font-family: FontAwesome;
    font-size: $font-size;
    top: calc(50% - (#{$font-size} / 2));
    left: calc(50% - (#{$font-size} / 2));
    animation: fa-spin 2s infinite linear;
    z-index: $z-index;
  }
}
```

# 使用例

```kyosaya.slim
.container
  .d-flex.justify-content-center
    .card.loading
      .card-header
        | 美樹 さやか
      .card-block
        .card-title
          | ゴメイサマ・リリアン
        a.btn.btn-primary href='#' OK
    .card.loading-mask
      .card-header
        | 佐倉 杏子
      .card-block
        .card-title
          | アミコミ・ケッカイ
        a.btn.btn-danger href='#' OK
```
```kyosaya.scss
.card {
  width: 400px;
  margin: 10px;
}

.loading {
  @include loading;
}

.loading-mask {
  @include loading($mask: true);
}
```
![スクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/6697/a0676eea-8960-9d9b-9b8c-467084ab6dfd.png)

左がマスク無し、右がマスクありの例です。また、実際はスピナーが回転しています。

# ソース

[<i class="fa fa-fw fa-codepen"></i> loading mask built with only CSS](https://codepen.io/quanon/pen/WjXmWe)
Semantic UIをRails5.1に導入するためにやったこと

## 環境
- Rails 5.1.0
- Semantic UI for Sass

## Semantic UI for Sassを追加

Semantic UIを導入するためのGemがあるので利用する。

[https://github.com/doabit/semantic-ui-sass](https://github.com/doabit/semantic-ui-sass)

Gemfileに以下を追記する。

```ruby:Gemfile
gem 'semantic-ui-sass', git: 'https://github.com/doabit/semantic-ui-sass.git'
```

ターミナルで以下を実行する。

```:terminal
bundle 
```

## .scssファイル
app/assets/stylesheets内のscssファイルに以下を追記する。

```scss:.scss
$import-google-fonts: false;
@import 'semantic-ui';
```

## Jqueryを追加
Gemfileに以下を追記する。

```ruby:Gemfile
gem 'jquery-rails'
```

## .jsファイル
app/assets/javascripts/application.jsに以下を追記する。

```js:application.js
//= require jquery
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
// Loads all Semantic javascripts
//= require semantic-ui
//= require_tree .
```

## dropdownなどの使い方
app/assets/javascripts/application.jsに以下を追記する。
javascriptが必要なコンポーネントは、解説ページの上部にDefinition,Examples,Usageなどのボタンがあるので参照する。


[https://semantic-ui.com/modules/dropdown.html](https://semantic-ui.com/modules/dropdown.html)

```js:application.js
$(function(){
  $('.ui.dropdown').dropdown();
})
```
PHP7.1でPhalconを使う

# Environment
OS : CentOS 7.3
PHP : 7.1.4
Phalcon : 3.1.2
Phalcon DevTools : 3.2.0

# Action

## 外部リポジトリのインストール  

```
# yum install -y epel-release
# rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
```

## PHP7.1パッケージのインストール

* 7.1のPHPパッケージの確認  

```
# yum info --enablerepo=remi-php71 php71*
```

* インストールしたPHPまわりのパッケージたち

```
yum list installed | grep php

php71.x86_64                     1.0-1.el7.remi                 @remi-safe
php71-php-cli.x86_64             7.1.4-1.el7.remi               @remi-safe
php71-php-common.x86_64          7.1.4-1.el7.remi               @remi-safe
php71-php-fpm.x86_64             7.1.4-1.el7.remi               @remi-safe
php71-php-json.x86_64            7.1.4-1.el7.remi               @remi-safe
php71-php-mbstring.x86_64        7.1.4-1.el7.remi               @remi-safe
php71-php-mcrypt.x86_64          7.1.4-1.el7.remi               @remi-safe
php71-php-pdo.x86_64             7.1.4-1.el7.remi               @remi-safe
php71-php-pecl-scrypt.x86_64     1.4.2-3.el7.remi               @remi-safe
php71-php-phalcon3.x86_64        3.1.2-1.el7.remi               @remi-safe
php71-php-tidy.x86_64            7.1.4-1.el7.remi               @remi-safe
php71-php-xml.x86_64             7.1.4-1.el7.remi               @remi-safe
php71-php-xmlrpc.x86_64          7.1.4-1.el7.remi               @remi-safe
php71-runtime.x86_64             1.0-1.el7.remi                 @remi-safe
```

## Phalconのインストール

### リポジトリの追加

```
# 安定板
curl -s https://packagecloud.io/install/repositories/phalcon/stable/script.rpm.sh | sudo bash
```

リポジトリを追加すればyumコマンドで普通にPhalconをインストールできます

```
Warning: Phalcon\Mvc\View\Engine\Volt\Compiler::compileFile(...)
failed to open stream: Permission denied in ...
Volt directory can't be written phalcon
```

URLを叩いて上のwarningが表示される場合は

```
# chmod 777 -R cache
```

を試してみましょう

### コマンドラインツールのインストール

```
git clone https://github.com/phalcon/phalcon-devtools
cd phalcon-devtools
. ./phalcon.sh
```

ツールを clone したフォルダに移動し、”. ./phalcon.sh” を実行
__コマンドの最初のドットを忘れないようにしましょう__

* __シェルを実行するとPHP Exceptionが出る場合__
masterブランチではなく、3.2.xブランチに切り替えてからシェルを実行してみましょう
PHP7系を使っていると発生する？

* スクリプト phalcon.php へのシンボリックリンクを作成

```
ln -s ~/phalcon-devtools/phalcon.php /usr/bin/phalcon
chmod ugo+x /usr/bin/phalcon
phalcon commands
Phalcon DevTools (3.2.0 ALPHA 1)

Available commands:
  info             (alias of: i)
  commands         (alias of: list, enumerate)
  controller       (alias of: create-controller)
  module           (alias of: create-module)
  model            (alias of: create-model)
  all-models       (alias of: create-all-models)
  project          (alias of: create-project)
  scaffold         (alias of: create-scaffold)
  migration        (alias of: create-migration)
  webtools         (alias of: create-webtools)
  console          (alias of: shell, psysh)
```

phalconコマンドのコマンドリストが表示されれば完了です
Vyatta の Firewall の Log

#前提
試しに以下のような設定で、ログをとってみます。

```
show firewall 
 name IN {
     default-action drop
     enable-default-log
     rule 20 {
         action drop
         log enable
         protocol icmp
     }
 }
```

#ファイアウォールのデフォルトアクションのログ
```
set firewall name IN enable-default-log
```

 の記述により、ファイアウォールのデフォルトアクションのログを 

```
show log firewall name IN
```

でみることができます。 
（ログ本体は、/var/log/messages に保存されていく形です。）

##例
```
vyos@khayama-test:~$ show log firewall name IN
Apr 13 01:36:59 khayama-test kernel: [143095.733345] [LOCAL-default-D]IN=eth1 OUT= MAC=06:b1:48:85:80:75:e4:c7:22:63:xx:xx:xx:xx SRC=223.xx.xx.xx DST=161.xx.xx.xx LEN=40 TOS=0x00 PREC=0x00 TTL=44 ID=31841 PROTO=TCP SPT=8089 DPT=23 WINDOW=12977 RES=0x00 SYN URGP=0 
```

#ファイアウォールの各ルールのログ
特定のルールについても、

```
set firewall name IN rule 20 log enable 
```

と記述しておくことで

```
show log firewall name IN rule 20 
```

でルールごとのログをみることができます。   
また、 

```
monitor firewall name IN rule 20 
```

でリアルタイムにログ監視することができます。

##例
```
vyos@khayama-test:~$ monitor firewall name IN 
Notice: monitoring information is displayed only for rules with enabled logging
Firewall-IN-rule-20: [143430.504542] [IN-20-D] IN=eth1 OUT=eth0 MAC=06:b1:48:85:80:75:e4:c7:22:61:xx:xx:xx:xx SRC=172.xx.xx.xx DST=10.xx.xx.xx LEN=60 TOS=0x00 PREC=0x00 TTL=56 ID=0 PROTO=ICMP TYPE=0 CODE=0 ID=1 SEQ=1361
```
Compose.io (OSS DBaaSサービス）で、MySQL Part1

久々すぎる更新はMySQLの記事ということで。
少しまたComposeのUIも変わったので、まだbetaサービスですがMySQLを使ってみたのでメモ。

## おさらい
Composeとは？というのと、他のDBで遊んだときのリンクを一応貼ります

**Bluemixで、お手軽PostgreSQL（ by Compose.io）**
http://qiita.com/azzeten/items/c1e72b3fe3cb9421e3ba

**MongoDBの環境もたった5分で構築できるCompose.io、試してみた**
http://qiita.com/azzeten/items/2e3901c080aafed078eb

**DBaaS環境でバックアップ＆リストア（Compose.io＠BluemixのPostgreSQL編）**
http://qiita.com/azzeten/items/b1efc046deb448bc7ca5

## ではMySQLの環境を作ってみます

**マニュアルはこちら**
https://help.compose.com/docs/mysql-compose-for-mysql
3ノードのレプリケーション構成とか、リーダーNodeがダウン後して60秒したらフェイルオーバーとか書いてあります。

では作業開始。
・MySQLを選んで、create deployment
![スクリーンショット 2017-05-08 15.48.42.png](https://qiita-image-store.s3.amazonaws.com/0/119378/3a397a04-60b3-6377-9f6f-2a629fbd2910.png)

・しばらく待つ（進捗を表現するバーとかが追加されてました。いつ終わるかなんとなく目処感がつかめて便利。いままでは全然わからなかったので..）
![スクリーンショット 2017-05-08 15.48.58.png](https://qiita-image-store.s3.amazonaws.com/0/119378/b64c9320-8eb3-85f8-f5db-ccc263b3de64.png)

・できあがり
![スクリーンショット 2017-05-08 15.49.05.png](https://qiita-image-store.s3.amazonaws.com/0/119378/1c27f10b-82a3-cab0-a43f-671a17ecb436.png)

## 接続テスト
MySQLのクライアントが入っている環境から、接続を試します。

```console:クライアント入ってるか確認
JinMac:~ $ which mysql
/usr/local/bin/mysql
```

接続! 接続子やパスワードは、Compose WEB UIから確認可能です↓
![スクリーンショット 2017-05-08 16.03.00.png](https://qiita-image-store.s3.amazonaws.com/0/119378/9d53b939-5155-93aa-875f-ab5813a22464.png)

```mysql:接続
JinMac:~ $ mysql -u admin -p --host sl-us-dal-9-portal.5.dblayer.com --port 23933 --ssl-mode=REQUIRED
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 64549
Server version: 5.7.17-log Source distribution

Copyright (c) 2000, 2017, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

```


試しにDB作成

```mysql:DB作成など
mysql>
mysql> create database test1;
Query OK, 1 row affected (0.27 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| compose            |
| mysql              |
| performance_schema |
| sys                |
| test1              |
+--------------------+
6 rows in set (0.32 sec)

mysql> use test1;
Database changed

mysql> show tables;
Empty set (0.20 sec)

```


## その他面白そうな機能は？

他のDB同様、バックアップが自由に取れたり、ログ・ファイル見れたり、リソースの使用状況は確認できますが、MySQLならではでなにかComposeとして便利かというと...そうでもないかもしれません（涙）
単純に気軽にMySQLの環境が欲しいなーというときに、ちょろで使えるのが、やっぱりComposeの良いところですね。
yieldについて

##htmlへviewsの各内容を引っ張ってくるもの。
レイアウトファイルには全体で共有するhtml.erbがあり、rails newで自動生成されるファイルの、app/views/layouts/application.html.erbがそれにあたる。
このbodyタグ内に<%= yield %>と入っており、ここに各ページの内容として別途作成されたhtmlファイルの内容を持ってくるわけである。
（そのためには rails g で作成する app/controllers/アプリ名_controller.rb と config/routes.rb で各ファイルをルーティングしてあげないといけないが）

具体的には、

```application.html.erb
<!DOCTYPE html>
<html>
<head>
  中略
</head>
<body>

<%= yield %>

</body>
</html>
```
・・・とあるところへ、home.html.erbがルーティングされていてその内容が以下だったとして。

```home.html.erb
<h1>サンプルアプリ</h1>
<p>これはサンプルアプリです</p>
```
かなりシンプルな内容ではあるが、サーバーを起動し、urlに「/アプリ名/home」を追記した先では上記二文の文字列が表示されるようになる。

また、titleタグのみに影響させることも可能で、

```application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>アプリ名 | <%= yield(:title) %></title>
  中略
</head>
　　　　後略
```
と、タイトルにyieldに(:title)をつけてあげて、今度はさっきのhome.html.erb側に以下・・・

```home.html.erb
<% provide(:title, 'ホーム') %>
<h1>サンプルアプリ</h1>
<p>これはサンプルアプリです</p>
```
・・・と、最初に一行追加してあげます。
すると、:titleに文字列「ホーム」が代入され、それがyieldによって持って行かれて、またhomeを開いてあげるとタイトルの横に「ホーム」と付くようになる、と。
kerasのmodel.get_weights()で得られるlistの構造

　kerasで学習して得られた重みを自作のニューラルネットワークに適用する機会があったので調べました。
# model.get_weights()について
　Keras Documentationにはこうあります。

> model.get_weights(): モデルの全ての重みテンソル(Numpy配列)のリスト返します．

ということで、この関数は複数のNumpy配列で構成されたlistを返し、それが学習結果の重みを表しています。しかし、肝心のlistのこの部分がニューラルネットワークのどこの重みを指しているのか、ということについてはここには記述されていませんでした。

# 調査結果
　自作のニューラルネットワークに得られた重みを設定するなど試行錯誤を行ったり、色々検索を行った結果、このような構造になっているということがわかりました。記号の意味、ニューラルネットワークの構造は[参考元](http://ni4muraano.hatenablog.com/entry/2017/02/01/000000)の図に準じます。

```py
## list[0]
[[w11(1) w12(1)]
 [w21(1) w22(1)]]
## list[1]
[w10(1) w20(1)]
## list[2]
[[w11(2)]
 [w12(2)]]
## list[3]
[w10(2)]
```

# まとめ
　三層の全結合ニューラルネットワークの場合、list[0]から順に入力層→中間層への重み、中間層へのバイアス入力、中間層→出力層への重み、出力層へのバイアス入力、となるようです。
# 参考
http://ni4muraano.hatenablog.com/entry/2017/02/01/000000
https://keras.io/ja/models/about-keras-models/
https://groups.google.com/forum/#!topic/keras-users/kLm-bTvDTaw
グループを作って、一部のファイルのみphpUnitを実行する方法


Test Runner optionsで指定する。

#設定

右上の

![スクリーンショット 2017-05-08 15.42.03.png](https://qiita-image-store.s3.amazonaws.com/0/109241/4489f4fd-c8f9-f550-0b98-57cf1afc2e32.png "スクリーンショット 2017-05-08 15.42.03.png")

からTest Runner optionsに `--group` でグループ名を指定（今回はactiveとした）

![スクリーンショット 2017-05-08 15.40.15.png](https://qiita-image-store.s3.amazonaws.com/0/109241/d99a2fcd-6480-10b0-75c7-8a4423017ba0.png "スクリーンショット 2017-05-08 15.40.15.png")

#実行したいコードにgroupをつける

コードに以下のようにコメントで記入

![スクリーンショット 2017-05-08 15.44.25.png](https://qiita-image-store.s3.amazonaws.com/0/109241/77fee091-cb5b-f9ae-372b-ef963bd3cb4f.png "スクリーンショット 2017-05-08 15.44.25.png")

##注意点

`@group active` というコメントはphpUnitの実行にだけ必要なのでコミットしないこと。
Mac Book Pro Retina Displayのスクリーンショットが大きいので自動でリサイズ

Mac Book ProのRetinaのスクリーンショットが倍のピクセルサイズで出力されるので自動で等倍にしてくれるようにした

Macにデフォルトで入ってる機能で簡単にできるのでメモ書き

※ 自動でリサイズすると画像が少しぼやけます

# 使用アプリ

・Automator

# 方法

## スクリーンショットの保存先を変更

ターミナルで作業をします

スクリーンショットの保存先を作成
`$ mkdir ~/Pictures/screenshot`

スクリーンショットの保存先を変更
`$ defaults write com.apple.screencapture location ~/Pictures/screenshot`

変更を反映するためにシステムの再起動
`$ killall SystemUIServer`


## Automatorでフォルダアクションを作成

<img width="680" alt="スクリーンショット 2017-05-08 15.29.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/165688/d816f7c6-53a9-35ed-a273-c0e0f6b0b70e.png">


<img width="700" alt="スクリーンショット 2017-05-08 15.35.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/165688/6318bef7-2506-ef56-b551-9506c2ad8c4e.png">

アクションはイメージを縦横50%のサイズにリサイズするようにしてデスクトップに移動しています

デスクトップに表示されるまで少し時間かかります

フォルダアクションを変更したい場合は下記フォルダにアクションが保存されてるのでそこから変更してください
`~/Library/Workflows/Applications/Folder Actions`


# 実行

![スクリーンショット 2017-05-08 15.02.59.png](https://qiita-image-store.s3.amazonaws.com/0/165688/956ecdce-e712-1dd5-6484-73fcf45d586b.png)

この画像でテストします
※ リサイズ後の画像を使っています

<img width="377" alt="スクリーンショット 2017-05-08 15.04.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/165688/8b183ba6-03c6-9ab9-65c6-d1c6cbd25881.png"><img width="377" alt="スクリーンショット 2017-05-08 15.04.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/165688/6c6f70b3-82e3-1a94-410d-953879c1dbda.png">

左がリサイズ前 右がリサイズ後
centos7 初期設定（備忘）

#初期設定

いつも初期構築時の手順を忘れるため自分のための備忘録

##ip 設定

```
nmtui
```

GUI画面に合わせてIPアドレスの設定をする

```
systemctl restart network
systemctl restart NetworkManager
```

##ユーザ作成
ユーザ作成しパスワードの設定も一緒に行う

```
useradd <ユーザ名>
passwd <ユーザ名>
```

##作成したユーザにroot権限付与

```
visudo
```
visudoコマンドを実行するとファイルが開くのでrootユーザの下に追加したユーザを追記する

```
## Allow root to run any commands anywhere
root    ALL=(ALL)       ALL
<ユーザ名>　　ALL=(ALL)       ALL　　#追加
```

あとは、パスワードなしでrootになれるようにする

```
## Same thing without a password
# %wheel        ALL=(ALL)       NOPASSWD: ALL
<ユーザ名>       ALL=(ALL)       NOPASSWD: ALL　　#追加
```

##history コマンドの行数を増やす

デフォルトでは1000行のため1001回コマンド実行すれば古いものから消えてしまうため行数を増やすのと実行時間を表示させるようにする

```
vi .bashrc
```
以下を最終行の後に追記する
今回は1万件まで表示できるようにします。
ついでに時間を表示させるようにもしておきます。

```
HISTSIZE=10000
HISTTIMEFORMAT='%Y/%m/%d %H:%M:%S '
```
すぐに反映させるには以下のコマンドを実行する

```
source .bashrc
```
windowsでTensorFlow その16

#概要
windowsでTensorFlowやってみた。
sin(x) を返すニューラルネットワークを作ってみた。
#プログラムの手順
#学習データの用意

```
data_x = np.linspace(-3, 3, 20)
data_y = np.sin(data_x) / 2.0 + 0.5
```

#モデルの作成
##入力、出力にplaceholder

```
x_in = tf.placeholder("float", [None, 1])
y_out = tf.placeholder("float", [None, 1])
```

##重みとバイアス用にVariable

```
W1 = tf.Variable(tf.random_uniform([1, 20]))
W2 = tf.Variable(tf.random_uniform([20, 1]))
b1 = tf.Variable(tf.zeros([20]))
b2 = tf.Variable(tf.zeros([1]))
```

#活性化関数を使う

```
y1 = tf.nn.sigmoid(tf.matmul(x_in, W1) + b1)
y2 = tf.nn.sigmoid(tf.matmul(y1, W2) + b2)
```

#ロス値を定義

```
loss = tf.nn.l2_loss(y2 - y_out)
```

#最適化の方法定義

```
train = tf.train.GradientDescentOptimizer(0.01).minimize(loss)
```

#セッションを定義して学習する。

```
with tf.Session() as sess:
	sess.run(tf.initialize_all_variables())
	for i in range(100000):
		choice = np.random.randint(0, 20, 4)
		batch_x = data_x[choice].reshape(4, 1)
		batch_y = data_y[choice].reshape(4, 1)
		sess.run(train, feed_dict = {
			x_in: batch_x,
			y_out: batch_y
		})
```
#テストデータで取り出す。

```
	test_x = np.linspace(-3, 3, 20)
	test_y = sess.run(y2, feed_dict = {
		x_in: test_x.reshape(20, 1)
	})
```
#写真

![test8.png](https://qiita-image-store.s3.amazonaws.com/0/18104/7cf1757f-8985-e5d6-7344-a006ae21b0e5.png)
goqueryでSwitchの在庫状況を監視した話

こんにちはT2です

Switchが全然売っていません(4/30現在)
どうやら毎週少しずつですが出荷はされている模様なんですが
それをいちいち見に行くのは面倒です。

ということでgoでamazonをスクレイピングするというのを試してみました。


まずAmazonでものが販売されているとはどういうことなのかを調べます
潤沢に在庫のあるゼルダのページを見ると

<img width="571" alt="スクリーンショット 2017-05-08 15.10.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/8904/68424de6-5ed3-8060-b310-086841441ad2.png">

上記のように表示されています。

Switchはというと、Amazonではなくマーケットプレイスの店名が入っています

```
この商品は、ホニャホニャStoreが販売し、Amazon.co.jp が発送します。 
```

ゼルダに立ち返って問題の箇所を確認するとid = merchant-infoにAmazon販売発送の旨が書いてあれば間違いなさそうです。
<img width="682" alt="スクリーンショット 2017-05-08 15.10.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/8904/169c4c02-592c-5450-10fc-5f57cb896156.png">


```checkSwitch.go
package main

import (
	"fmt"
	"github.com/PuerkitoBio/goquery"
	"strings"
)

const (
	//Swith url
	URL = "https://www.amazon.co.jp/Nintendo-Switch-Joy-Con-%E3%83%8D%E3%82%AA%E3%83%B3%E3%83%96%E3%83%AB%E3%83%BC-%E3%83%8D%E3%82%AA%E3%83%B3%E3%83%AC%E3%83%83%E3%83%89/dp/B01NCXFWIZ"
	//キーワード
	KEYWORD = "この商品は、Amazon.co.jp が販売、発送します。"
)

//ページのチェック
func CheckPage(url string) {
	doc, _ := goquery.NewDocument(url)
	t := doc.Find("#merchant-info").Text()
	if strings.Contains(t, KEYWORD) {
		fmt.Println("Switch売ってるよ！！！")
		PostSlack()
	} else {
		fmt.Println("Switch売ってない！！！")
	}
}

func main() {
	CheckPage(URL)
}
```

全文を引っ張ってきて
>doc, _ := goquery.NewDocument(url)

該当IDを選択して
>t := doc.Find("#merchant-info").Text()

そのTextにキーワードが含まれていれば売っている
>if strings.Contains(t, KEYWORD) 


うーんとっても簡単
なおまだSwitchは入手できていません(´；ω；｀)
CentOS7にdockerをインストール


新しいバージョンになって、開発者用のエディションとエンタープライズ用のエディションでインストールが変わったり、レポジトリがepelから取るのではなくて、dockerのrepo使ったりするようになったので、メモしておきます。

https://docs.docker.com/engine/installation/linux/centos/


以下、rootで作業しているので、``sudo``なしです。

## docker community editionのレポジトリを追加

```
yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
```

docker community editionのレポジトリを常にenableにしておくときは、以下もやる。

```
yum-config-manager --enable docker-ce-edge
```

## docker-ceをインストール

重複を含めて、一覧を見てみます。

```
yum list docker-ce.x86_64  --showduplicates
```

こんな感じで、でます。

```
利用可能なパッケージ
docker-ce.x86_64      17.03.0.ce-1.el7.centos      docker-ce-stable
docker-ce.x86_64      17.03.1.ce-1.el7.centos      docker-ce-stable
docker-ce.x86_64      17.04.0.ce-1.el7.centos      docker-ce-edge  
docker-ce.x86_64      17.05.0.ce-1.el7.centos      docker-ce-edge  
```

stableが使いたいのですが、このままやるとedgeがインストールされるので、``docker-ce.repo``でedgeのrepoをoffにします。

```/etc/yum.repos.d/docker-ce.repo
[docker-ce-edge]
name=Docker CE Edge - $basearch
baseurl=https://download.docker.com/linux/centos/7/$basearch/edge
enabled=0 # offにする
gpgcheck=1
gpgkey=https://download.docker.com/linux/centos/gpg
```

インストール

```
yum install docker-ce
```

おわり