OmniAICreator/Qiita-1.07M huggingface dataset:
Tagのstringを読み込むPropertyAttributeによるエディタ拡張

前回の記事を見返したらtagにも適用できることに気が付いてtag版のPropertyAttributeも作りました。

```C#:TagAttribute.cs
using UnityEngine;
#if UNITY_EDITOR
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEditor;
using UnityEditorInternal;
#endif
class TagAttribute : PropertyAttribute{}
#if UNITY_EDITOR
[CustomPropertyDrawer(typeof(TagAttribute))]
public class TagEditor : PropertyDrawer
{
    //tagのList
    List<string> AllTags
    {
        get
        {
            return InternalEditorUtility.tags.ToList();
        }
    }
    //ドロップダウンメニューの作成
    public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
    {
        var list = AllTags;
        var selectedIndex = list.FindIndex(item => item.Equals(property.stringValue));
        if (selectedIndex == -1)
        {
            selectedIndex = list.FindIndex(item => item.Equals(list[0]));
        }

        selectedIndex = EditorGUI.Popup(position, label.text, selectedIndex, list.ToArray());

        property.stringValue = list[selectedIndex];
    }
}
#endif
```

前回の記事のgetterを変えただけです。
実装時は以下のようにstring型のフィールドに付けます。

```C#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerController : MonoBehaviour {
    [SerializeField, TagAttribute]
    string Tags;
}
```

![__tags.png](https://qiita-image-store.s3.amazonaws.com/0/163397/787ca15b-99b7-56cd-cd73-f86f5bde1eac.png)

![_tags.png](https://qiita-image-store.s3.amazonaws.com/0/163397/50b252e7-64e6-21a6-a6ba-3831653422e0.png)

デフォルトのtagに加え追加したtagが表示されています。
Google Tango　UnityでVideo Overlayにチェックを入れても真っ黒な時は

Qiita初投稿です。いつもお世話になっているので、少しでもお力になれれば・・・
#Google Tango　Unityでビデオオーバーレイにチェックを入れても真っ黒な時は
![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/174302/9739dcad-5aa6-b123-7bab-f09a5cb3e2a1.jpeg)

Tango ManagerのinspectorでEnable Video Overlayにチェックしてるのに実機でカメラの映像が表示されず真っ黒。でもそれ以外は正常という時。

##原因はMultiThreaded Rendering
私の場合は<b> MultiThreaded Rendering </b> が原因でした。
![キャプチャ3.JPG](https://qiita-image-store.s3.amazonaws.com/0/174302/404e1899-e642-3a7b-9bfb-b8f08f68ec7f.jpeg)

Player Settings -> Other SettingsのMultiThreaded Renderingのチェックを外した所正常に動作しました。
Swiftで連番画像のコマ送りアニメーション

# 概要
Swiftのみを利用してコマ送りアニメーションを実装しました。
**その際にソースの冗長性をなるべく軽減してみました。**
もし、画像が何百枚もあったら大変なので...
環境は Xcode8.3，Swift3.1です。

完成イメージ

![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/173720/ded13fe4-490e-7928-bb69-e7d90e8eb386.gif)
ボタン押すことでアクションします。

# 作り方
#1. 画像の準備
**前提として、画像は連番のものを使用してください。**（例 image01.png, image02,png...など）今回は、以下のリンクのフリー素材を使用させていたただきました。
http://www.pixiv.net/member_illust.php?mode=medium&illust_id=62121228

#2. 素材の配置
ImageViewとButtonを配置
今回は動作が2種類あるので、アクションを起こすボタンを2つ配置してます。
この辺は用意した画像に合わせて臨機応変に...
![スクリーンショット 2017-04-05 23.08.30.png](https://qiita-image-store.s3.amazonaws.com/0/173720/9de18886-9236-6386-5fbc-0364acb5b3ba.png)

#3. 接続
## ImageViewの接続
通常時の立ち絵を設定し、charaImageとしてOutlet接続します。

![スクリーンショット 2017-04-05 23.35.03.png](https://qiita-image-store.s3.amazonaws.com/0/173720/b20c9d1e-249f-e007-b6a8-6a5c5161cd83.png)
##Buttonの接続
左のButtonはActionで接続します。名前はattackBtnとします。

![スクリーンショット 2017-04-05 23.44.43.png](https://qiita-image-store.s3.amazonaws.com/0/173720/c985774e-a45f-21ce-3682-075ad6efaf76.png)

右のButtonの名前はdownAttackBtnとして接続します。

![スクリーンショット 2017-04-05 23.45.25.png](https://qiita-image-store.s3.amazonaws.com/0/173720/d4adfd81-bf1f-49e3-ca97-96b420f5b1fe.png)

以上で見た目に関する準備は終わりました。あとはコードを書いていくだけです。

#4. コードを書く
下記のようにコードを書いていきます。もしImageViewとButtonを違った名前で接続しているのならば、それに合わせて書いてください。

ポイントは、画像を入れる配列を作っておき、viewDidLoad() でループを利用してまとめて配列に格納することです。こうすれば、例え画像が100枚だろうと1000枚だろうと短いコードで格納できます。好みによっては関数化してもいいと思います。
imageArrayAttack.count+1としている理由は今回使用している連番画像の番号が01からだからです。
もし自分で用意した画像が0から始まる場合は、imageArrayAttack.countでかまいません。

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
	
	// キャラ表示用のUIImageView
	@IBOutlet weak var charaImage: UIImageView!
	
	// 立ち攻撃用配列
	var imageArrayAttack : Array<UIImage> = []
	// しゃがみ攻撃用配列
	var imageArrayDownAttack : Array<UIImage> = []
	
	override func viewDidLoad() {
		super.viewDidLoad()
		
		// 立ち攻撃の画像を配列に格納
		while let attackImage = UIImage(named: "attack0\(imageArrayAttack.count+1)") {
			imageArrayAttack.append(attackImage)
		}
		// しゃがみ攻撃の画像を配列に格納
		while let downAtackImage = UIImage(named: "downAttack0\(imageArrayDownAttack.count+1)") {
			imageArrayDownAttack.append(downAtackImage)
		}
		
	}

	override func didReceiveMemoryWarning() {
		super.didReceiveMemoryWarning()
		
	}
	
	@IBAction func attackBtn(_ sender: Any) {
		// アニメーションの適用
		charaImage.animationImages = imageArrayAttack
		// 1.5秒間隔
		charaImage.animationDuration = 0.5
		// 1回繰り返し
		charaImage.animationRepeatCount = 1
		// アニメーションを開始
		charaImage.startAnimating()
	}
	
	@IBAction func downAttackBtn(_ sender: Any) {
		// アニメーションの適用
		charaImage.animationImages = imageArrayDownAttack
		// 0.5秒間隔
		charaImage.animationDuration = 0.5
		// 1回繰り返し
		charaImage.animationRepeatCount = 1
		// アニメーションを開始
		charaImage.startAnimating()
	}
}
```

#5. まとめ
ループを利用して短くエレガントなコードにしました。
gitにプロジェクトをアップロードしておきます。
https://github.com/tomoyukiHAYAKAWA/animationSample
Silexのパフォーマンスチューニング

ちょっとずつ書いてく

- composer
  - クラスマップの最適化
  - 不要なファイルの除外
- apcu
- opcache
- twig
- translator
- session
- doctrine
  - auto generate proxy
  - metadata cache
  - query cache
  - result cache
  - second level cache
  - n+1問題
  - eager/lazy/extra lazy
  - csv出力
- sub request
- http cache
- yaml
- pimple
  - pimple1と3
  - 遅延ロード
- その他
  - php7
  - ssd
  - blackfire.io

## composer(wip)

### クラスマップの最適化

https://getcomposer.org/doc/articles/autoloader-optimization.md

- `composer dump-autoload -o`
- `composer dump-autoload -a`
- `composer dump-autoload --apcu`

### 不要なファイルの除外

https://getcomposer.org/doc/04-schema.md#exclude-files-from-classmaps
共通の振る舞いのspec

継承やmixinで振る舞いを共有するクラスがあるとき、共有する振る舞いのテストを個別に書いてたり、特定のクラスでだけ書くようでは、不十分だと思いました。

振る舞いが他の実装との兼ね合いで変わってしまったり、オーバーライドによって挙動が変わるなどしては困ります。

また、抽象クラスやモジュールでインターフェースのみ定義しておき、具象クラスでそれを実装するという仕様のとき、それが守られているかどうか確認したいことがありますが、すべてのクラスのテストでいちいち書くのも面倒だったりします。

このような共通の振る舞いのspecについて、最近はこんな感じで書いています。

## 共通する振る舞いを使う

こうすることで、`ClassA`が`include`しているモジュールの想定している振る舞いが実装されていることをテストでき、また理解しやすくなります。

```ruby
describe ClassA do
  # ～のように振る舞うことをテスト
  it_behaves_like 'HogeExtension', described_class.new
  it_behaves_like 'FugaExtension', described_class.new
  it_behaves_like 'HelloClass'

  # ClassA独自の振る舞いのテスト
  describe '#hello' do
    subject { described_class.new.hello }
    it { is_expected.to eq('ClassA world') }
  end
end
```

## テスト対象

```ruby
module HogeExtension
  def hoge
    'hoge'
  end
end

module FugaExtension
  def fuga
    'fuga'
  end
end

class HelloClass
  def hello
    raise NotImplementedError # このメソッドはオーバーライドする想定（インターフェースのみ定義するなど）
  end
end

class ClassA < HelloClass
  include HogeExtension
  include FugaExtension

  def hello
    'ClassA world'
  end
end
```

## 共通する振る舞いをまとめる

`include HogeExtension`したクラスのインスタンスの振る舞いのテストをこんな感じで`shared_examples_for`でまとめてみます。

ブロック引数`obj`としてインスタンスを受け取るようにしておきました。


```ruby
# spec/shared/examples/hoge_extension.rb
shared_examples_for 'HogeExtension' do |obj|
  describe '#hoge' do
    subject { obj.hoge }
    it "returns 'hoge'" do
      is_expected.to eq('hoge')
    end
  end
end
```

同様に`FugaExtension`


```ruby
# spec/shared/examples/fuga_extension.rb
shared_examples_for 'FugaExtension' do |obj|
  describe '#fuga' do
    subject { obj.fuga }
    it "returns 'fuga'" do
      is_expected.to eq('fuga')
    end
  end
end
```

`HelloClass`クラスについては、インスタンスの生成方法がわかっているということにして、`described_class`を使いつつ、`#hello`が実装されていること、`String`を返すことをテストしてみました。

```ruby
# spec/shared/examples/hello_class.rb
shared_examples_for 'HelloClass' do
  it { expect(described_class.ancestors).to be_include(HelloClass) }
  describe '#hello' do
    subject { described_class.new.hello }
    it { expect { is_expected }.to_not raise_error(NotImplementedError) }
    it { is_expected.to be_an_instance_of(String) }
  end
end
```
Vagrantでビルトインウェブサーバーを起動してWebアプリ開発(PHP)

PHPでWebアプリの開発するとき、Webサーバー（Apacheなど）を用意するのが面倒だったのですが、PHP 5.4.0 からビルトインウェブサーバーというものが利用できるようです。
PHPをインストールしてあればすぐにWebアプリケーションを開発できます。

ビルトインウェブサーバー
http://php.net/manual/ja/features.commandline.webserver.php

> 警告
> 
> このウェブサーバーは、アプリケーション開発の支援用として設計されたものです。 テスト用に使ったり、制約のある環境でアプリケーションをデモするために使ったりすることもできるでしょう。 あらゆる機能を兼ね備えたウェブサーバーを目指したものではないので、 公開ネットワーク上で使ってはいけません。

と、あるようにあくまで開発用です。リリースするときはちゃんとしたWebサーバーを使うようにしましょう。

今回は仮想環境を使ってゲストOS(CentOS)でビルトインウェブサーバーを起動して、ホストOS(Windows)からアクセスできるようにする手順になります。

#環境
Windows 7 Professional SP1 64bit
VirtualBox v5.1.18
Vagrant v1.9.3

ゲストOS
CentOS7.2 (bento/centos-7.2)
PHP 5.6.30

#Vagrant設定
ホストOS(Windows)からゲストOS(CentOS)のWebサーバーにアクセスできるように8080ポートを転送する設定をします。

```:Vagrant
Vagrant.configure("2") do |config|

  config.vm.network "forwarded_port", guest: 8080, host: 8080, host_ip: "127.0.0.1", auto_correct: true

end
```

#ビルトインウェブサーバー起動
ビルトインウェブサーバーの起動は、ゲストOS(CentOS)からphpコマンドに-Sオプションをつけて起動します。

```bash
$ php -S 0.0.0.0:8080
```

以下はvagrantユーザーのホームディレクトリにsampleディレクトリを作って、そこにテスト用のPHPファイル(phpinfo.php)を出力して、ビルトインウェブサーバーを起動しています。
ビルトインウェブサーバーを起動したカレントディレクトリ(sample)がWebサーバーのルートディレクトリになります。

```bash
[vagrant@localhost ~]$ mkdir ~/sample
[vagrant@localhost ~]$ cd ~/sample
[vagrant@localhost sample]$ echo '<?php phpinfo() ?>' > phpinfo.php
[vagrant@localhost sample]$ php -S 0.0.0.0:8080
PHP 5.6.30 Development Server started at Wed Apr  5 23:20:27 2017
Listening on http://0.0.0.0:8080
Document root is /home/vagrant/sample
Press Ctrl-C to quit.
```

#動作確認
ホストOS(Windows)のブラウザから以下のURLを入力します。

```
http://localhost:8080/phpinfo.php
```

うまくいったら以下のようなページが表示されます。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/6c3d2517-a66e-1fa0-bc29-23759a7e55f6.png)
Webpack2 + Gulp で複数の書き出し先、複数の設定のコンパイルをする

# やりたいこと

- 別々の場所に書き出したい
  - 複数のjavascriptファイルを書き出したい
  - 書き出し先は別々にしたい
  - minifyなどの設定は共通
- 異なる設定で書き出したい
  - 複数のjavascriptファイルを書き出したい
  - 書き出し先は別々にしたい
  - 「minifyする」、「node_modulesを内包しない」などの設定を変更したい

# 別々の場所に書き出したい

`entry` で指定した key が `[name]` に入るので、そこにパスを記述します。

```js:webpack.config.js
module.exports = {
    // 入力ファイル
    entry: {
        "file1": "./src/js/file1.js",
        "dir2/file2": "./src/js/file2.js"
    },
    // 出力ファイル（出力先のベースパスはGulp側で指定しています）
    output: {
        filename: "[name].bundle.js",
    },
    // 〜略〜
```

↓

```
dist/js/file1.bundle.js
dist/js/dir2/file2.bundle.js
```


# 異なる設定で書き出したい

Gulp の設定で Webpack の設定を指定しているので、それを変更します。

```js:gulpfile.js

// 共通
var path = {
    src: 'src/',
    dist: 'dist/'
};
var webpack_stream = require('webpack-stream');
var webpack = require('webpack');

// タイプ別 A
var webpack_A_src = [path.src + "js/typeA/*.js", path.src + "js/typeA/**/*.js"];
var webpack_A_dist = path.dist + "js/typeA/";
gulp.task("webpack_A", function(){
    gulp.src(webpack_A_src)
    .pipe(plumber())
    // 通常は webpack.config.js を指定する場所を変更している
    .pipe(webpack_stream(require('./webpack_A.js'), webpack))
    .pipe(gulp.dest(webpack_A_dist));
});

// タイプ別 B
var webpack_B_src = [path.src + "js/typeB/*.js", path.src + "js/typeB/**/*.js"];
var webpack_B_dist = path.dist + "js/typeB/";
gulp.task("webpack_B", function(){
    gulp.src(webpack_B_src)
    .pipe(plumber())
    // 通常は webpack.config.js を指定する場所を変更している
    .pipe(webpack_stream(require('./webpack_B.js'), webpack))
    .pipe(gulp.dest(webpack_B_dist));
});

```
今さらながらVirtualBoxネットワーク設定のベストプラクティスと解説

## 概要
VirtualBox上に仮想マシンを構築する際、セキュリティと利便性のどちらもに気を配るとすると、ネットワーク設定はどのようにすべきか。

ここでいうネットワーク設定とは、仮想マシンの設定で選択できるNAT、ブリッジアダプター、ホストオンリーアダプターなどを意味する。

## 結論
 * __アダプター1を"NAT"、アダプター2を"ホストオンリーアダプター"に設定する__
 * これはVagrantを使った場合と同じ設定である

## OSのネットワーク設定
このネットワーク設定を行った場合、OS（Linuxを想定）のネットワーク設定はどのようになるか
（最近のOSではデバイス名がeth0とかeth1ではなくなっているようなので、適宜読み替えてほしい ）

###ポイント
 * アダプター1（おそらくeth0）はDHCPを使う
 * アダプター2（おそらくeth1）は固定IPアドレスを設定する
    * 設定するIPアドレスは、ホストOSにアタッチされている"ホストオンリーアダプター"を見て(詳細は後述）

### 設定例（抜粋）
/etc/sysconfig/network-scripts/ifcfg-eth0

```
～～～
TYPE=Ethernet
BOOTPROTO=dhcp
ONBOOT=yes
～～～
```

/etc/sysconfig/network-scripts/ifcfg-eth1

```
～～～
BOOTPROTO=static
ONBOOT=yes
IPADDR=192.168.33.30
NETMASK=255.255.255.0
～～～
```



## 「ホストOSにアタッチされているホストオンリーアダプターとは
 * VirtualBoxの仮想マシンの設定で「ホストオンリーアダプター」を選択した場合、最低１つ以上の仮想的なNICがホストOS(VitualBoxを動かしているマシン)にアタッチされている状態となる
 * これは、Windowsであれば`ipconfig`、Linuxであれば`ifconfig`で確認できる
    * Windowsであれば、「イーサネットアダプター VirtualBox Host-Only Network #1」という項目になっているはず
    * ここで「IPv4アドレス: 192.168.33.1、サブネットマスク:255.255.255.0」となっていれば、仮想マシンに設定するIPアドレスの範囲は、192.168.33.2 ~ 192.168.33.254 となり、サブネットマスクは255.255.255.0となる 
        * 若番、老番は念のため避けて、"192.160.33.30"くらいを使えばよいと思う


## 解説
冒頭で、アダプター1を"NAT"、アダプター2を"ホストオンリーアダプター"に設定するのが最適であると述べたが、その根拠を簡単に説明する。

### ブリッジアダプターを使うべきではない理由
手っ取り早く仮想マシンをネットワーク（インターネット含む）に接続するやり方として、「ブリッジアダプター」を選択する方法があるが、残念ながらセキュリティ的に問題がある。

この設定を行った仮想マシンはホストOSと同じネットワークに存在することとなり、同じLAN内にある別のユーザからアクセスされる恐れがある。（ホストOSを経由した仮想マシンへのパケットは通常、ホストOSのFWでブロックされるが、セキュリティ的な穴をなるべく作らない方がいい）

その他の理由としては、ホストOSが所属するLANと密接な関係をもってしまう点がある。このことは、個人的な検証環境としてVirtualBoxを使うような一般的なユースケースにおいては、うれしくないだろう。

例えば社内環境であれば、仮想マシンに静的なIPアドレスを設定した場合、他のユーザのPCが社内DHCPサーバによって割り当てられたIPアドレスと競合してしまう恐れがある。

もちろんあえて仮想マシンを外部に公開したい場合においては、ブリッジアダプターは選択すべきだ。その場合でも、設定するネットワーク設定には注意を払う必要がある。

### NATとホストオンリーアダプターを共存させる理由
まず、NATをつかうことで、ネットワーク設定が容易になる。

NATを使いつつVirtualBoxの内部にあるDHCPサーバを利用することで、IPアドレス、デフォルトゲートウェイ、DNSサーバの設定が自動的に得られるため、面倒なインターネット接続までの設定が不要になる。

しかし、このままではIPアドレスは固定されないため、仮想マシン上でアプリを動かしたときの動作確認や、ホストOSからのSSH接続の設定が面倒だ。

そこでホストオンリーアダプターの設定が効いてくる。ここでは固定IPアドレスを設定する。

まとめると、１つ目のアダプターでネットワーク設定を自動化し、２つ目のアダプターで固定IPアドレスを持たせてアクセスしやすくする。

こうすることで、セキュリティと利便性のどちらもに配慮したネットワーク設定が実現できる。


## 参考文献
 * VirtualBoxのドキュメント
    * https://www.virtualbox.org/manual/ch06.html
【初心者投稿-18】週の折り返しが一番きつい

#昨日までのおさらい
昨日の投稿で急に５件の**いいね**を頂けた！

学習の方は、というと、会社生活を並行しながらちまちま進めています笑
主にProgateで学習していて、文系卒でもかなり楽しめています！

#週の折り返しきつくね？
朝の7:30-21:00までサラリーマンして…（働きすぎw）
帰宅してからの1時間を使うのはだいぶきつい笑

しかも月曜、火曜の疲れも水曜日にはグッと来ますね笑
自分は寝なきゃやっていけないタイプなので、平日は長くて1時間の学習になりそうです笑

でも、勉強は楽しい。

#学習の記録
* Progate:15日目
* 今日の勉強時間：40分
* 総学習時間：17時間45分
* 今日学んだこと：水曜日の勉強は辛い。笑
Electron メインプロセス変更箇所


正式バージョンのアップデートされてから、コーディングルールが幾つか変更され、またデフォルトのJavaScript仕様は厳格モードになりました。


##メインプロセス最低宣言変更
```以前
const app = require('app');
```

このappから各種機能を呼び出す事が出来ましたが、

```現在
const electron = require('electron');
const {app} = electron;
const {BrowserWindow} = electron;
```

`electron`をベースにオブジェクトの読み込みになりました。

##厳格モードでより具体的に

```現在のMainprocess
let win;

function createWindow(){
  win = new BrowserWindow({width: 800, height: 600});
  win.loadURL('file://${__dirname}/index.html');

  win.webContents.openDevTools();

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin'){
    app.quit();
  }
});

app.on('activate', () => {
  if(win === null){
    createWindow();
  }
});

```
ElectronのWindowをコンテンツの準備が出来てから表示する


通常ElectronでWindowを表示した場合、

```js
win.loadURL(`file://${__dirname}/index.html`);
```

で自動的に読み込みが開始され、定義されたWindowプロパティを元にウィンドウが表示される。自分の場合SSDを使用しているのであまり違和感はないものの、まだHDDを補助記憶装置としているPCは少なくない。

HDDを使用しているPCの場合読み込みに多少の時間が掛かり、その間Windowは真っ白の状態なので、起動してから表示準備が完了してから表示したい場合のメモφ(´･ω･｀)

## Windowをロードする前に一端非表示にしておく。

```js
  win.hide();
  win.loadURL(`file://${__dirname}/index.html`);
```
非表示メソッドをロード前に実行していればWindowは表示されない。
次にWebContentsオブジェクトの`did-finish-load`イベントを使う。

`did-finish-load`イベントは`window.addEventListener('load', ...)`が発火可能になった場合に呼び出される為、メインプロセス側ではこのイベントが発生した際にWindowを表示すればよい。

```js
  win.webContents.on('did-finish-load', ()=>{
    win.show();
  });
```



以上で、真っ白な読み込み途中のWindowを表示しない方法でした。

##全ソース

```main.js
const electron = require('electron');
const {app} = electron;
const {BrowserWindow} = electron;
const loadDevtool = require('electron-load-devtool');
let win;

function createWindow(){
  win = new BrowserWindow({
    width: 900,
    height: 500,
    'titleBarStyle': 'hidden',
    'acceptFirstMouse': true
  });


  win.hide();
  win.loadURL(`file://${__dirname}/index.html`);
  loadDevtool(loadDevtool.REDUX_DEVTOOLS);

  win.openDevTools();
  win.webContents.on('did-finish-load', ()=>{
    console.log("View");
    win.show();
  });

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin'){
    app.quit();
  }
});

app.on('activate', () => {
  if(win === null){
    createWindow();
  }
});

```
jquery datepickerのDOMツリー

jqeury ui datepickerをカスタマイズする際にDOMツリーがあると目的の要素にスタイルを当てやすいので共有

    【div】 id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"
      【div】 class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"
            【a】 class="ui-datepicker-prev ui-corner-all" title="<上月"
                 【span】 class="ui-icon ui-icon-circle-triangle-w"
            【a】 class="ui-datepicker-next ui-corner-all" title="下月>"
                 【span】 class="ui-icon ui-icon-circle-triangle-e"
            【div】 class="ui-datepicker-title"
                 【span】 class="ui-datepicker-year"
                 【span】 class="ui-datepicker-month"
       【table】 class="ui-datepicker-calendar"
            【thead】
                 【tr】
                      【th】
                      【th】
                      【th】
                      【th】
                      【th】
                      【th】class="ui-datepicker-week-end" //一番左が月曜から始まる場合(週始めによってこのクラスがどこにつくかは変わる
                      【th】class="ui-datepicker-week-end"
            【tbody】
                 【tr】//trの数はその月の週数によって変わる
                      //tdは必ず7つある
                      【td】class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" //前月の曜日なので表示なし（月によって変わる）
                      【td】class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"
                      【td】
                           【a】 class="ui-state-default" href="#"  //日付の数字が入る
                      【td】
                           【a】 class="ui-state-default" href="#"
                      【td】
                           【a】 class="ui-state-default" href="#"
                      【td】class=" ui-datepicker-week-end " //土日なので（どの曜日から始まるかによって位置は変わる
                           【a】 class="ui-state-default" href="#"
                      【td】class=" ui-datepicker-week-end "
                           【a】 class="ui-state-default" href="#"
                 【tr】//以下上記同様
                 【tr】
                 【tr】
                 【tr】
特別な設定不要で PC キーボードから HoloLens に文字入力する

Device Portal に Virtual Keyboard という便利な機能があるのでこれを紹介します。

特に設定不要で利用できるため、
ちょっとしたブラウザ検索や、面倒な文字入力(パスワードなど)を行いたい場合に重宝します。

### Virtual Keyboard

１. HoloLens 側は予め文字入力を行う状態で、ソフトウェアキーボードを表示しておきます。

２. PC ブラウザで Device Portal を開いて、左下部 Virtual Input を選択します。

![hololens_virtualinput.png](https://qiita-image-store.s3.amazonaws.com/0/38837/2c176844-ab35-5304-bc6c-adaa78cbf611.png)

３. 右ペインに Virtual keyboard が表示されるので、
キー、あるいは文字入力を行って "Send" ボタンをクリックするだけです。
これで HoloLens 側にキーイベントが飛びます。


### 所感

HoloLens は文字入力するのは苦手な子ではありますが、
Air-Tap に慣れれば簡単なキーワードであれば、それほど不便なく文字入力することができます。

…が、やはり記号や大文字、小文字も多数含まれるようなパスワードの類を打つのは難易度が高いので、
そういった場合は、この Virtual Keyboard を使うのがオススメです。

意外とこの機能に関する情報がなく、
今まで全く気づかずに、苦労していたのでここに情報として残しておきます。誰かの役にたてば。(´ω｀)
i2cアドレスが0x0dのHMC5883Lモジュールについて

#内容

手元にあるHMC588Lモジュール(3軸デジタルコンパス)が全く動作しない。
違う石を実装しているようだ。
結構出回っていると思うので、もし入手してしまった場合は本記事を参考にして頂ければ思い投稿します。

この記事の通りだった↓
https://www.raspberrypi.org/forums/viewtopic.php?t=172244&p=1102197

#対策
別のモジュールを用意して動作確認をしました。

その記事はこちらです↓
[3軸デジタルコンパスHMC5883Lを使ってみる](http://qiita.com/shigeru-yokochi/items/c36c975e14c0c86886c0)




#動作しないHMC5883Lの見分け方

##ICの刻印
- 誤：DA 5883 6012　
- 正：L883 2230

![20170321_215108-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/146154/5e4bcc28-9359-cd56-2f7c-a249eefcaf01.jpeg)


##i2cアドレス
- 誤：0x0d
- 正：0x1e

![HMC5883L-0x0d.PNG](https://qiita-image-store.s3.amazonaws.com/0/146154/4757c922-5e42-5812-e75c-6187ecd1713f.png)


（裏側参考）↓
![20170321_215257-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/146154/3c179d40-cf23-d08e-b239-8e39895755f2.jpeg)
時刻を整数に直して素因数分解し、結果をツイートするbotを作った(xkcdネタ)

#はじめに
「PythonでTwitter使ってやるぜ！」と意気込んで、アプリーケーション登録を済ませてからあっという間に3ヶ月がたちました。何か作らねば…と考えていたところ、xkcdでこんな話を見つけました。
[Factoring the Time - xkcd.com](https://xkcd.com/247) 
![factoring_the_time.png](https://qiita-image-store.s3.amazonaws.com/0/161252/0ca5c59f-d1fa-b067-a901-b494a1b0cd2b.png)
この男性（？）が暇つぶしにしていた、時刻を素因数分解する作業を自動化し、結果をつぶやいてくれる[bot](https://twitter.com/BitbiteN)を作りました。
こんな感じで動きます。
![bot.jpg](https://qiita-image-store.s3.amazonaws.com/0/161252/f85f5470-48ec-2ec7-f388-ad26605edca8.jpeg)



#環境
- Ubuntu 16.04
- Python 2.7
    - tweepy
    - sympy
    - datetime
    - time
 
#手順

何はともあれアプリケーション登録です。たくさん記事が書かれているので、ここでは割愛します。「twitter python 登録」とかでググると、いくつか出てくるはずです。

`token`というファイルを作り、そこに取得した文字列を書き込みます。

```text:token
"Consumer Key"
"Consumer Secret"
"Access Token"
"Access Secret"
```
こんな感じで書き込んだら、同じディレクトリに`main.py`を作って編集します。

```py:main.py
# coding:utf-8
import tweepy
from datetime import datetime
import sympy
import time


def login():
    with open("token") as f:
        (consumer_key,
         consumer_secret,
         access_token,
         access_secret) = f.read().split("\n")[:4]
    auth = tweepy.OAuthHandler(consumer_key, consumer_secret)
    auth.set_access_token(access_token, access_secret)
    api = tweepy.API(auth)
    return api


def get_factor_by_string(i):
    d = sympy.factorint(i)
    return "*".join(str(fact) for fact in d for num in range(d[fact]))


def get_time_by_int():
    return int(datetime.now().strftime('%H%M'))


def main():
    api = login()
    old = get_time_by_int()
    while True:
        now = get_time_by_int()
        if now != old and now != 0 and now != 1:
            old = now
            factor = get_factor_by_string(now)
            if "*" in factor:
                text = str(now) + "=" + factor
            else:
                text = str(now) + " is a prime number"
            api.update_status(text)
        time.sleep(0.1)


if __name__ == '__main__':
    main()

```

実行すると、ほぼ毎分時刻を素因数分解した結果をつぶやいてくれます。やったね！

#解説
するまでもないと思いますが、一応…。
プログラムの流れはこんな感じです
①tweepyでtwitter認証
②datetimeで現在時刻を取得
③すでにつぶやいた時刻ならば②に戻る
④sympyで素因数分解、書式を変える
⑤結果をツイート(②に戻る)
`login()`でtokenにある情報を使い、Twitterの認証を行っています。`get_time_by_int()`で`datetime.now().strftime()`を使い、現在時と現在分をくっつけた数字を取得します(12:30→1230みたいな感じ)。ここで、すでにつぶやき済みの時間であるか、もしくは返ってきた数字が0または1である場合には次の処理に入りません。素因数分解には`sympy.factorint()`を使っています。結果は{素因数:指数,素因数:指数...}という辞書型で返ってくるので、forを使って指数を使わない掛け算だけの形に直してあげます。最後に素因数分解の結果に*が入っているか（時刻の数字が素数か）でメッセージを変えて、`api.update.status()`でつぶやきます。
処理のほぼすべてをライブラリに頼った結果、50行未満に収まりました。Pythonすごい。

#おわりに
初のbot作成でしたが、単純なものなら結構簡単に作れると分かりました。
適当に実行してるので時々止まったりしますが、あと数日は動かしたいです。
3軸デジタルコンパスHMC5883Lを使ってみる

#概要

i2cで動作する3軸デジタルコンパスHMC5883Lの使い方です。
動作しないモジュールも出回っているみたいなので動かなくて悩むまえに確認してください。

動作しないモジュールについての記事はこちら↓
[i2cアドレスが0x0dのHMC5883Lモジュールについて](http://qiita.com/shigeru-yokochi/items/46eb23bd64bdf333f1ab)

#確認箇所

↓ 石はL883 2549 であることを確認する。
![20170401_145740-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/146154/880d710c-cd29-d7b8-3ab6-62bc12a3d4ad.jpeg)


↓ 0x1eで認識されることを確認する。
![HMC5883L-0x0e.PNG](https://qiita-image-store.s3.amazonaws.com/0/146154/f7e962c2-fcad-69aa-b93c-cb63a96375e4.png)



↓ピンアサイン(参考)
![20170401_145800-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/146154/3f31b5d6-55ed-e059-01e5-2000318e4cf9.jpeg)


#コード(c言語)

https://github.com/shigeru-yokochi/HMC5883L


#コード実行結果

北(0)から東(90)の方向へ回転している様子
![HMC5883.PNG](https://qiita-image-store.s3.amazonaws.com/0/146154/5e139784-733c-a957-f929-e2d73efb6693.png)
「Kibana + Nginx」構成でダッシュボード表示がタイムアウトしてしまう問題の回避方法

kibanaのダッシュボードログイン時に、Basic認証をかけたいなどの理由で、前段にNginxが置く場合があります。
※Nginxをリバースプロキシとして利用

```:環境
kibanaバージョン:4.5.1
```

　<br>
![貼り付けた画像_2017_04_05_21_42.png](https://qiita-image-store.s3.amazonaws.com/0/34809/6ff91d38-950d-02de-aa8f-a07bed6d42b5.png)

<br>
## タイムアウトしてしまう問題
この構成で、ダッシュボード表示までに時間がかかるアクセス（バックエンドのDBからのレスポンスを待っている）を行うと、
以下のエラーが表示されることがあります。

Visualize: Gateway Timeout
![Dashboard_-_Dashboard_-_PALallax.png](https://qiita-image-store.s3.amazonaws.com/0/34809/8a95ed1b-7319-32e0-430f-0972c33947a8.png)

自分の環境では、1分程度で上記エラーが表示されていました。
## 回避策


### kibanaの設定
kibanaの設定に、DB(elasticsearch)からのリクエストタイムアウト値の設定があります。

``` :/opt/kibana/config/kibana.yml
<中略>
# Time in milliseconds to wait for responses from the back end or elasticsearch.
# This must be > 0
elasticsearch.requestTimeout: 300000
<中略>
```
デフォルトでは300000ms（5分）と長めに設定されています。
1分程度で上記エラーが表示されていたので、この設定が原因ではなさそうです。

### Nginxの設定

Nginxのデフォルトでは、Proxy転送しているサーバからの応答が60秒間無い場合に接続を切ります。
「proxy_read_timeout」の設定を追加することで、タイムアウト値を変更できます。

```:/etc/nginx/conf.d/default.conf
<中略>
   location / {
      proxy_pass   http://127.0.0.1:5601;
      proxy_redirect off;
      proxy_read_timeout 300;　
    }
<中略>
```
単位は秒なので、「proxy_read_timeout 300;」で300秒（5分）になります。


上記Nginxの設定により、kibanaの「Visualize: Gateway Timeout」エラーが発生するまでの時間を緩和することができます。
wgetでWebサイトのリンク切れをチェック

wgetは `--spider` オプションをつけると、指定したURLのリンクの存在をチェックします。
そして `--recursive` オプションをつけると、URLのHTMLを解釈してリンクを再帰的に辿ります。
`--spider`オプションと `--recursive` オプションを組み合わせることで、Webサイトのリンク切れをチェックできます。

例を次に示します。

```sh
wget \
  --spider \
  --recursive \
  --level=inf \
  --no-verbose \
  --execute robots=off \
  localhost:8000
```

- `--level=inf`: `--recursive` オプションでたどる深さを上限なしに
- `--no-verbose`: 出力を簡素に
- `--execute robots=off`: `robots.txt` を取得しない

JavaScriptの実行などはしないため、動的に作られるリンクを調べることはできません。
しかしこのテクニックを使うと、CIなどで事前にリンク切れを検知することができます。
Jekyll、Middleman、MkDocsといったページジェネレータなどでその威力を発揮します。
JavaScript真田丸MVC　コールバック関数の中で何とかする方法（ローカル変数編）

# ローカル変数もまとめちゃおう
忘れてた。

今日やった事メモです。

ローカル変数もおまとめしてみました。

```javascript
var Local = {
    flot : {},
    map  : { lat:111, lng:111 }
}
```

それだけです。

さっきの記事に混ぜ混ぜすればよかったかも・・・・。
ファクト駆動ではなくクエスチョン駆動開発を始めよう！

# クエスチョン駆動開発とはその名の通り疑問を集めること！
ファクトを集めてマシンガンのように相手に打ち込むだけでは楽しくない！
それよりも疑問を集めて発見の喜びを味わった方がきっといい仕事になる（気がする）。
それだけです・・・。
すごーい！Android Studioは標準で萌えエディタ化できるフレンズなんだね！

けものフレンズが終わってしまって途方にくれている難民もこれで安心！たーのしー！
IntelliJをはじめJetbrains系IDEならどれでもいけるはずです

## やり方
1. SHIFT2回連続押しで`Search Everywhere`ダイアログを表示させる
1. 「background」と入力
1. `Set Background Image`を選択
    - ![スクリーンショット 2017-04-05 16.44.43（2）.png](https://qiita-image-store.s3.amazonaws.com/0/129872/fd2838f3-7edc-c37f-ca78-f813145cc1c1.png)
1. あとはお好きに
    - ![スクリーンショット 2017-04-05 16.46.23.png](https://qiita-image-store.s3.amazonaws.com/0/129872/0cd38874-c811-cacd-a2b7-f86ccb659099.png)

## 設定後
けもフレ難民もこれで2期まで耐えられますね！わーい！
~~ウィンドウ全体に適用されるので透明度調整しないとめっちゃ見にくい~~

![スクリーンショット 2017-04-05 16.46.59（2）.png](https://qiita-image-store.s3.amazonaws.com/0/129872/f21f1417-84fe-3b9f-7f5c-b50f30ad7440.png)
JavaScript真田丸MVC　コールバック関数の中で何とかする方法（私的編）

# コールバック関数の罠
JavaScriptで実装する際に、コールバック関数の中に書かなければならない事もあります。

例えばReact.jsとかReact.jsとかReact.jsを使った場合にです。

そんな時に、関数がとっちらかってしまう事もままあります。

昨年実装させていただいた地図関連の実装でも、大量の関数が１ファイルにダッダーンと並んでしまいました。

# MVC真田丸
そんな時に、せめて私だけでも助かりたい・・・いや、綺麗にコーディングしたいと思ってこんな事をやってみました。

ただのカテゴリわけです。

```javascript
var Model = {};
var View = {};
var Controller = {};
```

コールバック関数内に配列を用意しました。

ここに関数を埋め込んで行きます。

```Javacript
Model = {
    getTargetRecords : function (self, hoge) {},
};
View = {
    setMainPage : function (self, viewData) {}
};
Controller = {
    __Constructor : function (self) {}
};

Controller.__Constructor(this);
```

# 何が良いのか？
実装箇所がぱっと見でわかり良いです。

よってメンテナンス性と可読性があがります。

# ついでに・・・

ここではMVCしか書いてませんが、他にもこんな階層を用意したりします。

+ Service
+ EventBind

ServiceはMVCで言うモデル層です。

昨今はモデル層でDBアクセス、ロジックはコントローラかその配下の階層というのが多い気がしますので、こちらでもService層を用意してみました。

コントローラからサービスを呼び、サービスからモデル層を呼び、結果はコントローラに返します。そしてコントローラからビュー層を呼ぶという仕組みです。

またJavaScriptらしくevent層もご用意！

こちらはコントローラから必要な条件をサービス層で用意し、戻り値を元にevent層を呼ぶ形です。

この結果、eventバインド関連をここに丸っとまとめるって寸法です。

# この先の未来へ
とりあえずJavaScriptでclassがおおっぴらにつかえるまではこの手で行こうかと思います。

そのうち、古くてクラスが使えない例えばインターネットえくすぷろーら１１とか１１とか１１が無くなったら、クラスでこの実装を再考してみようかなって思いますです。

かしこ。
Dockerでswagger project editを実行するとError: Command failed: xdg-open "http://localhost:8080/#/edit"のようなエラーが出る場合の対処

docker hubのswagger-editではなくCentOSのコンテナにnpmで[Swagger](https://www.npmjs.com/package/swagger "swagger")をインストールして`swagger project edit`を実行するとxdg-openのエラーが出る場合

# 解決策

コマンドオプションに`-s`を付ける

`swagger project edit -s`

`-s`は

```
  Options:

    -h, --help         output usage information
    -s, --silent       do not open the browser
    --host <host>      the hostname the editor is served from
    -p, --port <port>  the port the editor is served from
```


CUIのコンテナ内でブラウザを開こうとするのでエラーが出ていたぽい


以上
ファイル操作:ファイル用の禁則文字処理用マクロ


##ファイル用の禁則文字処理用マクロ

```vbnet:ArrayCHR
Sub ArrayCHR()
Const 禁則文字列 As String = "[RLO] [LRM] [ZWJ] [ZWNJ] [LRE] [RLE] [PDF] [NADS] [NODS] [ISS] [AAFS] [ISFS] [RS] [US] ; @ " & """" & " " & "," & " - CON PRN AUX NUL CLOCK$ COM0 COM1 COM2 COM3 COM4 COM5 COM6 COM7"
Const 禁則文字01 As String = "COM8 COM9 LPT0 LPT1 LPT2 LPT3 LPT4 LPT5 LPT6 LPT7 LPT8 LPT9 ( ) [ ] { } & $ ’ ` ^ ~ \ / * | ? ' < > "
Dim i As Long
Dim 禁止
Dim 代替: 代替 = Split("①,②,③,④,⑤,⑥,⑦,⑧,⑨,⑩,⑪,⑫,⑬,㈱,㈲", ",")'丸付き数字13までと株と有
Dim 置換: 置換 = Split("01,02,03,04,05,06,07,08,09,10,11,12,13,(株),(有)", ",")

禁止 = Split(禁則文字列 & " " & 禁則文字01, " ")
Dim str As String: str = "?><?L+*K{P{SFDKL+JDS①②③④⑤2"
For i = LBound(禁止) To UBound(禁止)
str = Replace(str, 禁止(i), "_", 1, -1, vbTextCompare)
Next
For i = LBound(代替) To UBound(代替)
str = Replace(str, 代替(i), 置換(i), 1, -1, vbTextCompare)
Next i
Debug.Print str
End Sub
```
#Windowsでfile管理で死なないための基本

##このマクロ自体は原理的なもの
実験的にstrに文字を入れています。
本当は丸付き数字も黒地の分まであるのですが、これネットに上げてもVBEの画面にコピーできないし、手入力でも出ない。マクロでのエラー処理には限界があるということです。


##ファイル名とディレクトリ名にユニコード文字を使わない
##全角アポストロフを使わない
##それでも混じるので、ショートファイル名(8.3形式)の列を必ず作成する
##本当は変数名にも漢字なんか使っちゃだめ！（上は悪い例でもある）
[Access データベースでの作業時に使用すべきでない特殊文字](https://support.microsoft.com/ja-jp/help/826763/error-message-when-you-use-special-characters-in-access-databases)
[ファイル名に使わない方が良い文字](http://www.all.undo.jp/asr/1st/document/01_03.html)
[ファイル名に使用できない文字列が含まれていないか調べる - DOBON.NET](http://dobon.net/vb/dotnet/file/invalidpathchars.html)
[Naming Files, Paths, and Namespaces - Windows Developper Center](https://social.msdn.microsoft.com/Search/ja-jp/?Query=Naming+Files%2c+Paths%2c+and+Namespaces&Query=Naming+Files%2c+Paths%2c+and+Namespaces)
rails4系とrails5系のchefを公開


Ruby On Railsの開発環境って何気に構築するのが面倒だったりします。
Rubyをyumでインストールするかソースからインストールするか、rbenvで切り替えれるようにするか。とか。

なので、そんな面倒な事を事を考えなくてもいいようにgithubにchefで構築するためのコードを公開しました。

[railsの環境構築](https://github.com/mitani-darwin/rails)

使い方はGitHubにかいてあります。
(Rにおける)パイプ演算子についての個人的見解

R のパイプ演算子について批判的に書かれたブログのポストを見つけて、コメント欄まで含めて面白く読んだ。

[My aversion to pipes](http://www.fromthebottomoftheheap.net/2015/06/03/my-aversion-to-pipes/)

上記の記事を読んでの感想もといポエムである。

F#のパイプ演算子`|>`を模して(私はF#は書いたことがないのであまりわからないが)`magrittr`パッケージによってRに導入されたパイプ演算子`%>%`は以下のような書き方を可能にする。

```R
seq(length(x))
# あるいは
. <- length(x)
seq(.)
# ↑を↓のように書ける
x %>%
  length() %>%
  seq()
```

まあこんなに短いものだと大して旨味もないが長ったらしい例はリンク先の記事にもある。
リンク先の記事の著者が問題にしているのはどうやら

  - パイプ演算子はNSEを使っているが、それは予想もしないような結果をもたらさないか？
  - パイプスタイルに馴染みのない人々もいるのにドキュメンテーションにまでパイプ演算子が当然のように使われるのはどうなの？

という点のようだ。

もっともな主張ではあるかもしれない。
特に入れ子になった関数呼び出しなどと比べた場合にパイプ演算子を使うと評価順序がガラッと変わるので、その評価順序の変化でエンバグしない？　とかパフォーマンス落ちてない？　とか言われると判断しづらい。今のところ私はそういうことには遭遇していないが。
少なくともエラー時のスタックトレースが非常に追いづらくなるのは確かだ。

ただそれでも私はパイプ演算子は多用している。タイプ数が少なくて済むし読みやすいと思うし、序でに言えば代入演算子が減らせるのが良い点であると思っている。~~評価順序がわかりづらくなる？　最初っから R の値の評価順序なんかわかりづらいんだから今さらだろう~~
代入演算子が減らせるのが良い点であるのかというと趣味の問題と言えばそれまでかとも思う。要するに私はちょっとした Haskell かぶれの考え方をしていて、一度名前に値をバインディングしたものを出来るだけ動かさない方が良いよね、と思っているのだ。そして同時に私は安直な名前を付けるのは嫌いだが、名前を考えるのも嫌いなのだ。特に dplyr / tidyr での表の変形の過程で出てくる「何かをグループ化したやつ」だの「ちょっとフィルターかけたやつ」だの「横積みにしたやつ」だのに名前を一々つけてなんていられるかとも思う。

私は別に R でコードを書く人々とそんなにたくさん交流している訳ではないので完全に偏見だが、パイプ演算子を多用する人たちというのは関数型プログラミングかぶれな傾向が強いのではないか。代入演算子を憎んでいるのだ、おそらく。
R Markdownで定義リストをRのヘルプのArgumentsっぽくする

タイトルの通りです。うまくコンパクトに表現できなかったので，どういう感じなのかは完成例を見てください。

## 完成例

具体的には以下のような感じです:

![231.png](https://qiita-image-store.s3.amazonaws.com/0/35118/6ac71c49-92a7-824f-1132-ec3ea064a8c0.png)

https://kazutan.github.io/kazutanR/webshot_demo.html#%E5%BC%95%E6%95%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

引数リストを説明するのに，Rのヘルプと同じようにしたほうが見やすいなぁと思い，やってみました。

## 実装

### 定義リストの準備

R Markdownで定義リストを作成する方法については，[こちら](http://qiita.com/kazutan/items/1b7aef65abbe188bf86f)を参照してください。

例えば，以下のような感じで定義リストになります:

```
項目その1(<dt>の内容)

: 項目その1の内容(<dd>の内容)

項目その2(<dt>の内容)

: 項目その2の内容(<dd>の内容)
```

こんな感じにしておくと，R Markdownならこれらのまとまりを自動的に定義リストにまとめてくれます。

### cssの準備

結局のところ，定義リスト(<dt>と<dd>)に対してcssで適切なスタイルを指定すればいけます。私はよく**cssチャンク**をyamlフロントマターの直後に差し込んでスタイルを読み込ませています。具体的には以下のような感じです:

	```{css}
	dt {
	  clear: left;
	  float: left;
	  width: 15%;
	  font-weight: bold;
	  text-align: right;
	  padding: 3px 15px 3px 0;
	}
	dd {
	  margin: 0 0 0 20%;
	  padding-top: 3px;
	  padding-bottom: 3px;
	}
	```

重要なのはdtタグに当てている`clear: left;`と`float: left`です。これでdtタグとddタグが横に並ぶようになります。またdtにclearが付与されていますから，次の項目がどんどんつながらずに下の段へといくようになります。

あと，気をつけるのはdt,ddのwidth(幅)です。元々レスポンシブなのでpx固定は避けましょう。dtの方に`width: 20%`とか指定しとけば，横のddは自動で残りをつかうようになります。それ以外はお好みで設定すれば大丈夫です。

## 留意事項

もちろんこれは`html_document`出力を想定しています。html形式以外では機能しませんし，色々と設定してある独自テーマのものだとcssが競合して想定外の表示となるかも知れません。その場合は頑張ってください。

**Enjoy!**
Amazon RDS (for MySQL)のログをfluentdを使って取得する。

# はじめに
*Amazon RDS(for MySQL)* のログは [**fluent-plugin-rds-log**](https://github.com/shinsaka/fluent-plugin-rds-log) というプラグインを利用することで取得することができます。


# インストール

1.*fluent-plugin-rds-log* をインストールするには以下のパッケージを事前にインストールしておく必要があります。

```bash:パッケージ
$ sudo yum install gcc
$ sudo yum install mysql-devel
```

2.パッケージのインストールが完了したらプラグインをインストールします。

```bash:プラグイン
$ sudo td-agent-gem install fluent-plugin-rds-log
```


# RDS設定
1.ログを取得するにはRDSのパラメータグループを以下のように設定する必要があります。
>
log_output：TABLE
slow_query_log：1
general_log：1


# conf設定
1.先ずはログを取得するための *< source >*タグを設定します。

```text:取得設定
<source>
  type rds_log
  log_type slow
  host rds001.cs8xkvdfl8ru.ap-northeast-1.rds.amazonaws.com
  username awsuser
  password mypassword
  refresh_interval 30
  auto_reconnect true
  tag rds.db001.slow-log
  add_host false # add database hostname in record
</source>
```
今回はスローログを取得するための設定です。一般ログの場合は *general_log* にします。
*host* は対象となるRDSで *username* と *password* はRDSのアカウントです。


2.次に取得したログを出力する設定です。

```text:出力設定
<match rds.db001.slow-log>
  type file
  path /var/log/td-agent/rds-slow-log
</match>
```

3.再起動して反映させたら完了です。

```bash:再起動
$ sudo /etc/init.d/td-agent restart
```


# 確認
1.ログが出力されているか確認します。

```bash:出力確認
$ sudo ls /var/log/td-agent/
buffer			     rds-slow-log.20170404_1.log	      td-agent.log
db001			     rds-slow-log.20170405.b54c62b71eea28a57  td-agent.log-20170404.gz
rds-slow-log.20170404_0.log  rds-slow-log.20170405_0.log	      td-agent.log-20170405
```

出力されているのが確認できました。


# おわりに
[fluent-plugin-rds-log](https://github.com/shinsaka/fluent-plugin-rds-log) を使うとスローログと一般ログが簡単に取得できて便利です。
ただ、エラーログはこれでは取得できないので、それはやっぱりCLIとか使わないとです。
.htaccessで301リダイレクトする

例えばWordPressで運用しているサイトで、下層ページのURLはそのままで
ドメインだけを変更した場合に、旧サイトから新サイトへリダイレクトする.htaccessの記述です。

旧サイトURL: aaaaa.com
新サイトURL: bbbbb.com

```
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_HOST} ^aaaaa\.com$ [NC]
RewriteRule ^(.*)$ https://bbbbb.com/$1 [R=301,L]
</IfModule>
```

注意点としては、「# BEGIN WordPress」の前に記述します。
powershell file rename, replace sample

''' powershell:sp2.ps1
$csvFiles = Get-ChildItem . *.csv -rec
foreach ($file in $csvFiles)
{
    (Get-Content $file.PSPath) |
    Foreach-Object { $_ -replace "201706", "201707" } |
    Set-Content $file.PSPath
}

Get-ChildItem *.csv | Rename-Item -NewName { $_.Name -replace '201706','201707' }

'''
react-router で子Routeコンポーネントにpropsを渡す方法

以下のバージョンで動作確認してます。

* react: 15.4.1
* react-router: 3.0.0

例えばこんなRoutesを定義していて、 `Parent ` コンポーネントから `Child `コンポーネントをpropsとして渡したいとします。

    <Router history={browserHistory}>
      <Route path="/" component={Parent}>
        <Route component={Child} />
      </Route>
    </Router>

 普通なら`Parent `コンポーネント内で以下のように子コンポーネントを呼び出します。

    {this.props.children}

ただ、このままではpropsを渡せません。
ですが以下のように  `React.cloneElement `を使うことによってpropsを渡すことができます。
    
    {React.cloneElement(this.props.children, {
        props_to_pass: this.state.props_to_pass
    })}

やっていることは、 `this.props.children `を `React.cloneElement `でクローンしたオブジェクトを作成し、
それに対してpropsを適用しています。

なるべく状態は一つのコンポーネントにまとめたい、と感じることは多々あると思いますので、そんな時に便利です。
ただ、いかんせんあんまり美しくない方法なので、もしこれより綺麗なやり方があればお教えいただけると嬉しいです。
EC2 の CentOS インスタンスのルートドライブのディスク容量を増設する

Amazon EC2 で CentOS インスタンスを立ち上げると、デフォルトでは 8GB しかルートドライブのディスク容量が無いため、空き容量が不足することがあります。 Amazon Linux を使っている場合は AWS コンソールから無停止でディスク増設できるようなのですが、 CentOS ではできなかったので、やり方をメモしておきます。


実施環境
----
- CentOS 6.7 64bit
    - 使った AMI は [AWS Marketplace: CentOS 6 (x86_64) - with Updates HVM](https://aws.amazon.com/marketplace/pp/B00NQAYLWO)


前準備
----
上記の AMI から EC2 インスタンスを作成しておいてください。今回は全てデフォルト設定なので、ディスク容量は 8GB です。

```sh
$ df -h

Filesystem      Size  Used Avail Use% Mounted on
/dev/xvda1      7.8G  741M  6.7G  10% /
tmpfs           498M     0  498M   0% /dev/shm
```


増設手順
----
### ディスクサイズを変更する

1. EC2 コンソールのメニューから "Volumes" をクリック
1. 容量を追加したいボリュームにチェックを付け、 "Actions > Modify Volume" をクリック
1. "Size" を `8` から `16` に変更して "Modify" をクリック

これで ELB の State が "Optimizing (0%)" に変わります。100% を待つ必要はないので、次に進んでください。

### dracut をインストールする

EC2 インスタンスに SSH ログインしたら、 dracut というツールを EPEL からインストールします。

```sh
sudo rpm -Uvh http://ftp-srv2.kddilabs.jp/Linux/distributions/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm
sudo yum -y install dracut-modules-growroot
```

### 新たなボリュームを認識させる

```sh
# 現在のディスク容量の確認
$ df -h
Filesystem      Size  Used Avail Use% Mounted on
/dev/xvda1      7.8G  741M  6.7G  10% /       # <- まだ 8GB しか有効化されていない
tmpfs           498M     0  498M   0% /dev/shm

$ lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda    202:0    0  16G  0 disk             # <- ディスクは認識されている
└─xvda1 202:1    0   8G  0 part /

# フルにディスクを使うよう設定
$ sudo dracut --force --add growroot /boot/initramfs-$(uname -r).img

# 変更を反映させるために再起動
$ sudo shutdown -r now

# 再確認
$ df -h
Filesystem      Size  Used Avail Use% Mounted on
/dev/xvda1       16G  716M   15G   5% /
tmpfs           498M     0  498M   0% /dev/shm

$ lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda    202:0    0  16G  0 disk
└─xvda1 202:1    0  16G  0 part /
```


参考
----
- [EBSボリュームの容量を増やす - Qiita](http://qiita.com/katsukii/items/f7f4e080e81354a8e6d6)
- [CentOS on Amazon EC2 でディスクサイズ変更しても変わらないときの対処方法 ｜ Developers.IO](http://dev.classmethod.jp/etc/centos-on-ec2-disksize-change/)
- [CentOS 6.7のAMIをインスタンス作成時にgrowpartしてrootディスクが拡張されるようにしておく - yoshidashingo](http://yoshidashingo.hatenablog.com/entry/2015/08/22/164453)
Raspberry Pi をセットアップしてみた

最近人工知能が流行っているのでってわけではないですが、人工知能に挑戦してみようと思いました。そこで買ってずっと放置していたRaspberry Piでやることにしました。というわけでそのセットアップをまとめてみることにしました。

以下のサイトをもとにやってみました。
>[Raspberry PiにRaspbian(ラズビアン)をインストール](http://oem-net.com/blog/?p=239)

#用意するもの
- Raspberry Pi 3
- 電源（microUSBケーブル）
- micro SDカード（今回はSanDiskの8GBを用意）
- モニタ
- HDMIケーブル
- キーボード
- マウス

#手順(SDカードに書き込み編)
1. まずは以下のサイトからRaspberry PiのOS『Raspbian』のzipファイルをインストール（2017年3月現在はバージョンは2.3.0）

>[Download NOOBS](https://www.raspberrypi.org/downloads/noobs/)

*NOOBS Liteの方が早くダウンロードをできますがRaspberry Piをネットワークに接続してOSをインストールする必要があります。ただ、Raspberry Pi3は デフォルトでWifi接続ができるので時間短縮のためにもそちらをダウンロードするといいでしょう！*

2. SDカードをフォーマット
今回使用したのは「[SDフォーマッター](https://www.sdcard.org/jp/downloads/formatter_4/)」です。
*設定は消去設定【上書きフォーマット】、論理調整【ON】*

3. zipファイルを解凍
4. 解凍したファイルをSDカードにコピー

#手順(OSのインストール編)
1. キーボード、マウス、モニタを接続
2. 電源を接続する
すると、セットアップ画面が表示されます。

3. 画面上部でWifiのネットワークを設定
4. 画面の下部にある言語設定を日本語にしておきましょう
*しておかないと後々面倒くさいですよ（笑）*
5. 真ん中のメニューからOSを選択してインストール
今回は上部にあるRaspbian[推奨]を選びました。
6. 設定が完了したら再起動


これで無事にRaspberry Piが動かせると思います。次回からいよいよプログラムを作っていこうと思います。
privateリポジトリに置いたgemをGemfileに含める

10年ぶりくらいに記事書きます。
リクエストとか放置ですいません。

内部向けのgemをgithubのプライベートリポジトリで開発して、Gemfileに書いてbundle installする方法はいくつかありますが、環境変数を使い、かつGemfile.lockにtokenを残さないようにするには以下のようにします。

```ruby:Gemfile
gem 'hoge', git: 'https://github.com/nysalor/private-repo.git'
```

```shell-session
BUNDLE_GITHUB__COM=[github token]:x-oauth-basic bundle install
```

tokenはgithubの[personal access token](https://github.com/settings/tokens)から取得します。

なおGemfileに ```git: 'git://github.com...'``` や ```github: 'nysalor/private-repo'``` と書いてもtokenを利用できないので注意。 ``` git: 'https://github.com...'``` でないといけない。
考えてみれば当たり前なんだけど、ハマったので。
便利ツール集

# 便利ツール集

## Git

* tig // git history inspector

```bash
# for mac
brew install tig


# usage
tig [options] [revs] [--] [paths]
tig log[options] [revs] [--] [paths]
tig show   [options] [revs] [--] [paths]
tig blame  [options] [rev] [--] path
tig grep   [options] [pattern]
tig refs
tig stash
tig status

```
* [Zenhub](https://www.zenhub.com/) // git issue management
HoloToolKitで犯したミス

#はじめに
３月初めよりインターンで株式会社ゆめみ(https://www.yumemi.co.jp/ja) にてHoloLensの研究開発をしている近大生のよっしーです。
国内でこの１月から提供を開始したMicroSoft製MRデバイスのHoloLensについての記事を書いていきます。


#おこしたミス
カーソルで手の検知が一向に取れず、Printfデバッグをしたりソースコードを遡ったりして1日潰しました。

理由としてはHoloToolKit-Unityの中にInputManagerというものがあって、これをHierarchyパネルにドラッグ&ドロップすることで様々な入力を簡単に扱えるのですが、これをD&Dし忘れました。(ちゃんと読まなかった自分が悪い...。)

このように**HoloToolkitの仕様をよく理解していなかった**ので、無駄な時間を過ごしたり、無駄なコードを書いたりしてしまいました。

無駄なコードの例として、たとえばGestureManagerというクラスを作ってタップイベントを検知していたのが、以下のようにイベントリスナーとして登録してインターフェースに適合するだけで入力が取れます。スマートです。

```csharp:GetAirTap.cs
using UnityEngine;
using HoloToolkit.Unity.InputModule;

class SomeClass: MonoBehaviour, IInputClickHandler{

    void Awake(){
        InputManager.Instance.AddGlobalListener(gameObject);
    }

    void OnDestroy(){
        InputManager.Instance.RemoveGlobalListener(gameObject);
    }

    public void OnInputClicked(InputClickedEventData eventData) {
        // Do something.
    }
}
```

# このようなミスを防ぐために...
Academyと実際のHoloToolKitは全く別物なので、ドキュメントを良く読みましょう。
https://github.com/Microsoft/HoloToolkit-Unity

この記事のHoloToolkitの部分はわかりやすかったです。
http://qiita.com/s-harada_i-enter/items/4655cfe5baeca51f6c9a

随時、追加していきます。
mattn/go-sqlite3をRaspbian向けにクロスコンパイル


※通常はコメントで nati-ueno さんに教えて頂いた [xgo](https://github.com/karalabe/xgo) を使うのが良さそうです。

# はじめに

クロスコンパイルがとっても楽なgolang。
しかし、cgoが必要なライブラリを使い出すと、途端にクロスコンパイルが少々面倒に…。
というわけで、クロスコンパイル用（Raspbian向け）のDockerイメージを作りました。

[GitHub](https://github.com/tomoya0x00/cgo-cross)

[Docker Hub](https://hub.docker.com/r/tomoya0x00/cgo-cross/)

# 動作確認環境

Docker Toolbox on Windows 10/amd64
（本当はDocker for Windowsに乗り換えたいんですが、Homeなので使えず…）

# 使い方

```bash
cd YourSrcDir
docker run --rm -v  %CD%:/go/src/YourAppName -w /go/src/YourAppName tomoya0x00/cgo-cross:1.8.0-linux-arm go build -v
```

※go getを省略するためにも[glide](https://github.com/Masterminds/glide)などでvendoringがオススメです。

# 参考情報

https://hub.docker.com/_/golang/
https://github.com/dockcross/dockcross
データフレームは参照代入ではない

```{r}
> a <- data.frame(col.a = c(1, 2, 3), col.b = c(4, 5, 6))
> a.bak <- a
> print(a)
  col.a col.b
1     1     4
2     2     5
3     3     6
> print(a.bak)
  col.a col.b
1     1     4
2     2     5
3     3     6
> a <- a %>% mutate(col.c = c(7, 8, 9))
> a
  col.a col.b col.c
1     1     4     7
2     2     5     8
3     3     6     9
> a.bak
  col.a col.b
1     1     4
2     2     5
3     3     6
```
droplevelsでfactorの中の空のlevelを除去する

```R
> df <- data.frame(v = factor(c("x", "y", "z")))
> df
  v
1 x
2 y
3 z

> str(df)
'data.frame':	3 obs. of  1 variable:
 $ v: Factor w/ 3 levels "x","y","z": 1 2 3

> df.yz <- df %>% filter(v != "x")
> df.yz
  v
1 y
2 z

> str(df.yz)
'data.frame':	2 obs. of  1 variable:
 $ v: Factor w/ 3 levels "x","y","z": 2 3

> df.yz.drop <- df.yz %>% droplevels()
> str(df.yz.drop)
'data.frame':	2 obs. of  1 variable:
 $ v: Factor w/ 2 levels "y","z": 1 2
```
AWSのIAM関連の各リソースをER図にしてみた

AWSのIAM関連の各リソースの関係があやふやだったので、自分用まとめということでER図にしてみました。

# ER図
![スクリーンショット 2017-04-10 11.45.43.png](https://qiita-image-store.s3.amazonaws.com/0/145575/261d7133-376d-4f60-d2d7-12030c0ad66e.png)
省略されているカーディナリティは"1"です。

# ポイント
- ユーザ
    - アクセスキーやパスワードを割り当てる
    - グループのメンバーにできる
        - グループの入れ子は不可
- ロール
    - EC2や（Auto Scaling Groupの）起動設定に割り当てる
    - インスタンス作成後にロールを割り当てたい場合は、インスタンスプロファイルを作成して、アタッチする。

図に誤りがあればご指摘ください。

# 追記（4/10）
はてブコメントで、インスタンスプロファイルが抜けているという指摘を受けたので、追記しました。
【Unity uGUI】AutoLayout UIのRect Transformの値をスクリプトから取得する

Horizontal Layout GroupやGrid Layout Groupなどの、AutoLayout UIのGameObjectのRect Transformをスクリプト側から取得したい時に、Start()で取得しようとした時に、正しい値が返ってこなかったので、メモ。
Unity Versionは5.6。

正しい値が取得できない↓

```
public RectTransform TargetUi;
private Vector3 _targetUiInWorldSpace;

private void Start()
{
    _targetUiInWorldSpace = Camera.main.ScreenToWorldPoint(TargetUi.position);
}
```

これは[マニュアル](https://docs.unity3d.com/Manual/UIAutoLayout.html)にあるように、フレームの最後にAuto LayoutのRebuildが走り、描画位置が決定するためっぽい。

> The rebuild will not happen immediately, but at the end of the current frame, just before rendering happens.

Start()などで正しい初期値を取得しておきたい場合は、`WaitForEndOfFrame`でフレームの最後まで待つことで取得することができました。

正しい値が取得できる↓

```
public RectTransform TargetUi;
private Vector3 _targetUiInWorldSpace;

public IEnumerator Start()
{
    return GetAutoLayoutPosition();
}

private IEnumerator GetAutoLayoutPosition()
{
    yield return new WaitForEndOfFrame();
    _targetUiInWorldSpace = Camera.main.ScreenToWorldPoint(_ TargetUi.position);
    yield return null;
}
```

以上
列名を変更する rownames を magrittr のパイプ処理の中（>%>）で使う

```{r}
df = data.frame(key=c("key.a", "key.b"), value=c(1, 2))

#     key value
# 1 key.a     1
# 2 key.b     2

df %>% `rownames<-`(.$key)

#         key value
# key.a key.a     1
# key.b key.b     2
```

`rownames<-` は矢印の間にスペースを入れるとエラーになるので注意
pytzの仕様が変わっている

# 2017-03-30にリリースされたpytz version 2017.2にて日本のtimezoneの形式が変わっている (バグ??)

Stuart Bishopさんが管理している，pythonのタイムゾーン関係のライブラリの最新版(version 2017.2)で，妙な挙動があったので共有します．
http://pythonhosted.org/pytz/#localized-times-and-date-arithmetic

## 何が変わったのか
### 今まで
``` python
In [1]: import pytz

In [2]: pytz.__version__
Out[2]: '2016.10'

In [3]: pytz.timezone('Asia/Tokyo')
Out[3]: <DstTzInfo 'Asia/Tokyo' JST+9:00:00 STD>
```

### 最新バージョン
``` python
In [1]: import pytz

In [2]: pytz.__version__
Out[2]: '2017.2'

In [3]: pytz.timezone('Asia/Tokyo')
Out[3]: <DstTzInfo 'Asia/Tokyo' LMT+9:19:00 STD>
```

作者からのコメント等も見つからなかったのでバグの可能性もあります．

## これによる影響

このせいで，DBからの読み出しなどでUTC->JSTの変換をすると，19分ずれることがあります．
バグっぽいのは，ずれることがあるだけで，ずれない処理もあるからです．以下にずれる処理とずれない処理をまとめます．


### 今まで通りJSTが付与される処理
``` python
In [8]: tz = pytz.timezone('Asia/Tokyo')

In [10]: tz.localize(datetime.datetime.now())
Out[10]: datetime.datetime(2017, 4, 5, 9, 24, 56, 215625, tzinfo=<DstTzInfo 'Asia/Tokyo' JST+9:00:00 STD>)

In [11]: datetime.datetime.now(tz=pytz.utc).astimezone(tz)
Out[11]: datetime.datetime(2017, 4, 5, 18, 27, 33, 912014, tzinfo=<DstTzInfo 'Asia/Tokyo' JST+9:00:00 STD>)
```

### tzinfoの表示通りLMTの19分ずれた時刻が付与される処理
``` python
In [9]: datetime.datetime.now().replace(tzinfo=tz)
Out[9]: datetime.datetime(2017, 4, 5, 9, 24, 45, 694185, tzinfo=<DstTzInfo 'Asia/Tokyo' LMT+9:19:00 STD>)
```

手元で試したところ，tz.localize, datetime.astimezone(tz)などの非破壊的な処理ではJSTがきちんと付与されるのですが，
datetime.replace(tz)で強制的にtimezoneを付与するコードを使っているとJSTがつかず，19分ずれてしまうことがわかっています．

## その他

- pytz.timezone('Japan')
    - 同様の結果になりました．．．

## 最後に (本題)
1. 今まで通りのJSTタイムゾーンを取得する方法をご存知の方
    - 助けてください!! コメントで教えていただけると助かります!!
2. また，もし周りにこのことを知らずにdatetime.replace(tzinfo=tz)を使っている方
    - やばいので直してください!! あなたの時計19分ずれてます!!
3. (タイムゾーンとかクリティカルなので個人で管理してるpytzのようなライブラリではなく，Python公式で出してほしいものです．)
    - Python3ではdatetime.timezoneがあるようなのでそれに移行するのがよいのかな...
R関連のチートシート

https://www.rstudio.com/resources/cheatsheets/

# dplyr
* https://github.com/rstudio/cheatsheets/raw/master/source/pdfs/data-transformation-cheatsheet.pdf
* https://www.rstudio.com/wp-content/uploads/2015/02/data-wrangling-cheatsheet.pdf

# ggplot2
https://www.rstudio.com/wp-content/uploads/2016/11/ggplot2-cheatsheet-2.1.pdf

# R markdown
* https://www.rstudio.com/wp-content/uploads/2016/03/rmarkdown-cheatsheet-2.0.pdf
* https://www.rstudio.com/wp-content/uploads/2015/03/rmarkdown-reference.pdf

# R Studio
https://www.rstudio.com/wp-content/uploads/2016/01/rstudio-IDE-cheatsheet.pdf
個人メモ用-GIT差分ファイルのコマンド

コミットIDから差分ファイルを洗い出す

```
git archive [コミットID2] `git diff --name-only [コミットID1] [コミットID2] --diff-filter=ACMR` -o archive.zip
```

--diff-filter=ACMR
A : 追加
C : コピー
M : 修正
R : リネーム
D : 削除

削除ファイルのみの場合は
--diff-filter=D
^@ (null制御文字)をsedで消す

## 参考

* [CmdNote - [linux_command,sed] sed で null 文字を置換する](http://cmdnote.net/items/592)

```rb
sed -e "s/\x0/\n/g"
```

## メール送信用

メール本文に `^@` が含まれていると添付ファイル扱いになる問題に遭遇。
sed で消すことで解決した。

```rb:メール送信
git diff \
  | sed -e "s/\x0/\n/g" \
  | mail -s "diff" メール@アドレス
```

* [制御文字 - Wikipedia](https://ja.wikipedia.org/wiki/%E5%88%B6%E5%BE%A1%E6%96%87%E5%AD%97)