OmniAICreator/Qiita-1.07M huggingface dataset:
PowerShellでcdしたら自動でlsしてショートカット先へもcdしたい

素人の備忘録。

# 動機
PowerShellの`cd`（`Set-Location`）をもうちょっと使いやすくしたい。

0. `cd`の後に自動で`ls`してもらいたい
0. ショートカット(.lnkファイル）にも対応してもらいたい
    - ディレクトリのショートカットならそのフォルダへ移動
    - ファイルのショートカットなら元ファイルがあるディレクトリへ移動

# 解決策
## `cd`の後に自動で`ls`
以下の関数を使うと`cd`の後に自動で`ls`してくれる。
[参考：code: Coreutils-style ‘ls’ for Windows Powershell](https://la11111.wordpress.com/2012/10/20/code-coreutils-style-ls-for-windows-powershell/)

```powershell
# cdの後に自動でls
function cd-ls {
    param($path)
    try {
        set-location $path -erroraction 'stop'
        ls
    }
    catch {"$_"}
}
```

## ショートカット(.lnkファイル）にも対応
まずショートカットの情報を得るフィルターを作る。
[参考：PowerShellで、ショートカット情報を得るフィルタを作ってみる](http://d.hatena.ne.jp/Wacky/20090308/1236496903)

```powershell
# ショートカットの情報を得る
filter Get-ShortcutProperty() {
    $sh  = new-object -comobject WScript.Shell
    return $sh.CreateShortcut($_)
}
```

次に、引数が

* .lnkファイルでないならそのまま`cd-ls`
* .lnkファイルなら、
    + WorkingDirectoryがない（＝ディレクトリの）ショートカットならTargetPathへ`cd-ls`
    + WorkingDirectoryがある（＝ファイルの）ショートカットならWorkingDirectoryへ`cd-ls`

する関数を作る。
[参考：How can I follow a windows shortcut in power shell?](http://superuser.com/questions/393279/how-can-i-follow-a-windows-shortcut-in-power-shell)

```powershell
# ショートカット先へも移動する
function Move-Location {
    param($path)
    If (((Resolve-Path $path).Path).EndsWith(".lnk")) {
        $ShortcutPath = Get-ChildItem $path | Get-ShortcutProperty
        If ($ShortcutPath.WorkingDirectory) {
            cd-ls $ShortcutPath.WorkingDirectory
        } else {
            cd-ls $ShortcutPath.TargetPath
        }
    } else {
        cd-ls $path
    }
}
```

あとは適当にエイリアスする。

```powershell
Remove-Item alias:cd
Set-Alias cd Move-Location
```
【PHP】Windowsのローカル環境でPHPを動かす（WebMatrix）

#はじめに

ローカルでPHPをサクッと動かして、HTTPリクエスト・レスポンスの中身を確認したかったけど、XAMPPは導入が面倒くさい。

他に方法はないかと調べて（Qiitaに投稿されてたと思うけど、どの記事だったか失念）たら、Microsoftが提供してる[WebMatrix](https://www.microsoft.com/japan/web/webmatrix/)を利用するとPHPが実行できるとのことで早速導入。

#導入

ダウンロードしてクリックすれば、導入完了。（超簡単）

※ちなみにWindows10に導入したよ。

#あれ？エラーが表示される・・・

何も読まずに（おい！ちゃんと公式読めよ）WebMatrixからPHPファイルを実行すると下記のようなエラー文が表示されました。

> HTTP エラー 403.14 – Forbidden
> Web サーバーは、このディレクトリの内容の一覧を表示しないように構成されています。
> 
> 対処方法:
> ・ディレクトリの参照を有効にしない場合は、既定のドキュメントが構成され、ファイルが確実に存在するようにします。
> ・ディレクトリの参照を有効にします。
> 
> 　1.IIS Express インストール ディレクトリに移動します。
> 　2.appcmd set config /section:system.webServer/directoryBrowse /enabled:true を実行して、サーバー レベルでのディレクトリ参照を有効にします。
> 　3.appcmd set config ["SITE_NAME"] /section:system.webServer/directoryBrowse /enabled:true を実行して、サイト レベルでのディレクトリ参照を有効にします。
> 
> ・サイトまたはアプリケーション構成ファイルで configuration/system.webServer/directoryBrowse@enabled 属性が true に設定されていることを確認します。

エラー文に記載がある通りの対処方法を実行します。

コマンドプロンプトで下記の2つを実行。

```
cd C:\Program Files\IIS Express
```

```
appcmd set config /section:system.webServer/directoryBrowse /enabled:true
```

これでサーバーレベルでのディレクトリ参照が有効になりました。

PHPファイルを、`PC > ドキュメント > My Web Sites` の中に設置したら問題なく実行できました。

参考：[webmatrix(IIS Express):HTTP エラー 403.14 – Forbidden Web サーバーは、このディレクトリの内容の一覧を…etc](http://www.amelt.net/imc/web/3693/)

#他のローカル開発環境

WebMatrix以外にもローカル開発環境はあります。

PHP5.4.0から[ビルトインウェブサーバー](http://php.net/manual/ja/features.commandline.webserver.php)という機能があり、WindowsにPHPを入れればサクッと動くと思われる。（試してない）

Macだと最初からPHPが入っているので、ビルトインウェブサーバーでサクッと動くはず。（試してない）

XAMPPはあえて紹介しない。
ポップアップウインドウ

jQueryを使わずにポップアップウィンドウを作ってみました。

#Result
http://codepen.io/takanorioki4/pen/ezJdrw

#main.js

```js:main.js
window.onload = function() {

var box = document.getElementById("box");
var btn = document.getElementById("btn");
var close = document.getElementById("close");
var boxstyle = box.style;

btn.onclick = function(){
  if( boxstyle.display === "block" ) {
    boxstyle.display = "none";
  } else {
    boxstyle.display = "block";
  }
};

close.onclick = function(){
  boxstyle.display = "none";
};

}
```

#index.html

```html
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>PopUp</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="main.js"></script>
  </head>
  <body>
    <input type="button" id="btn" value="押す">
    <div id="box">
      <p id="close">×</p>
      <h2>Box</h2>
    </div>
  </body>
</html>
```

#style.css

```css
@charset "UTF-8";

#box {
  background: #FFF;
  border: 1px solid #333;
  box-shadow: 0 10px 10px #999;
  display: none;
  font-family: serif;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 200px;
}

#box > #close {
  background-color: #EEE;
  color: #333;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  margin: 0;
  position: absolute;
  right: 1px;
  text-align: center;
  top: 1px;
  width: 30px;
}

#box > #close:hover {
  background-color: #F9F9F9;
  color: #999;
}

#btn {
  background-color: #6C6;
  border: 0;
  color: #FFF;
  cursor: pointer;
  padding: 5px 20px;
}

#btn:hover {
  background-color: #9D9;
}

#btn:active {
  background-color: #4A4;
}
```
Vue.jsハンズオン@DeNA

DeNAで開催されていたVue.jsのハンズオンに行ってきました。
http://eventdots.jp/event/590005:embed:cite

Vue.jsの詳細は[こちら](https://jp.vuejs.org/)。
今回は簡単なTODOアプリを作りました。

# Vue.jsについて
## MVVMとは？
MVVMとはモデル(M)とビュー(V)間のやり取りをビューモデル(VM)を介して行うアーキテクチャのこと。
Vue.jsではリアクティブデータバインディングというシステムを利用している。
## Model
Modelとはdataオブジェクトとmethodsオブジェクトのこと。
dataオブジェクトの属性はv-textやv-modelといったディレクティブによってバインドされる。
ディレクティブとはDOMを操作するための特殊な属性で、v-から始まる。
## View
Viewとはelで指定されたDOM要素のこと。
elでDOM要素を指定することで、ViewModelの適用範囲を指定できる。

# TODOアプリ
## Result
http://codepen.io/takanorioki4/pen/jrWqRq

## HTML
まずはHTMLを書きます。
テキストの展開は{{}}によって行います。

```html
<div id="myApp">
  <p>
    Task:
    <input type="text" v-model="newTask" v-on:keyup.enter="addTask()">
    <button v-on:click="addTask()">ADD</button>
  </p>

  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" v-model="todo.isCompleted">
      <span v-bind:class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span>
      <button v-on:click="deleteTask(todo)">Delete</button>
    </li>
  </ul>
  <p>Remaining Tasks: {{ remains }}/{{ todos.length }}</p>
</div>
```

それぞれのディレクティブについて簡単に解説します。
<dl>
<dt>v-for</dt>
<dd>配列をレンダリングするディレクティブ。
形式は{{ item in items }} (itemsは配列、itemは配列の要素)</dd>
<dt>v-model</dt>
<dd>form input要素で双方向データバインディングをするためのディレクティブ。
checkboxで使用するとboolean値がかえってくる</dd>
<dt>v-bind</dt>
<dd>HTMLの属性値(classなど)をバインドするためのディレクティブ。
省略することも可能。</dd>
<dt>v-on</dt>
<dd>DOMをListenするためのディレクティブ。
キー修飾子(kyeup.~~~)などの修飾子がある。</dd>
</dl>
##JS
つづいてVue.jsで処理を記述していきます。

```javascript
new Vue ({
  el: '#myApp',
  data: {
    newTask: '',
    todos: [
      { task: 'buy a book', isCompleted: false },
      { task: 'buy a cake', isCompleted: false },
      { task: 'buy a sugar', isCompleted: true }
    ]
  },
  methods: {
    addTask: function(){
      if(this.newTask==''){
        return;
      } else {
      this.todos.push({
        task: this.newTask,
        isCompleted: false
      });
      this.newTask = '';
      }
    },
    deleteTask: function(todo){
      this.todos.$remove(todo);
    }
  },
  computed: {
    remains: function(){
      var counter = 0;
      for(var i=0; i<this.todos.length; i++){
        if(!this.todos[i].isCompleted){
          counter ++;
        }
      }
      return counter;
    }
  }
});
```

###computedプロパティ
動的なプロパティを生成するメソッドを持つオブジェクトで、複雑な計算が必要な場合computed
プロパティを使用する。(methodsとの違いはgetやsetの定義ができるとこ)


##CSS
最後にCSSを書きます。

```CSS
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li{
  margin: 5px;
  text-indent: 0;
}

ul li .complete{
  text-decoration:line-through;
  color: #ddd;
}
```

#感想
最近Reactとか触っていますが、小規模なSPAなどはこちらのほうが使いやすい印象です。
他のアプリも作っていこう。
レスポンシブコーディングでの縦横比問題の解決策

最近レスポンシブコーディングやスマホのリキッドデザインなんかで縦横比を保ちたいってことが多いですよね。　　
その実装方法を紹介します。

#HTML

まずは普通にHTMLを書きます。
ポイントはinnerをboxで囲んでいるところ。
innerは今回赤くしている部分でboxはその親要素になっています。

```html
<div id="sample-box">
<div class="sample-inner">
<p>4:3</p>
</div>
</div>
```

#CSS

続いてCSSを書きます。

```css
#sample-box{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 75% 0 0;
}
```

<b>padding: 75% 0 0;</b>
ここがポイントです。

**padding-top(%) = 高さ / 横幅 * 100**

この式で求めた数値をpadding-topに設定します。
あとはinnerに下記のようなCSSを設定すれば縦横比が4：3になってくれます。

```css
#sample-box .sample-inner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
background:  #b40d0d;
}
```
Chefを使ってSwap領域を作成してみた


# 概要
Chefを使ってWebLogic Server環境の作成を自動で行う事ができるようになりました。

- [Chefを使ってWebLogic Serverをサイレント・インストールしてみた](http://qiita.com/shinyay/items/318f60bb01caade47a00 "サイレント・インストール")
- [Chefを使ってWebLogic Serverの基本ドメインを作ってみた](http://qiita.com/shinyay/items/8ea3c25b0160ec91d666 "ドメイン作成")
- [Chefを使ってWebLogic Serverを起動してみた](http://qiita.com/shinyay/items/b93e1c80733ae1b7d2db "管理サーバ起動")

さて、WebLogic Server環境、つまりアプリケーションサーバ環境は自動構成できるようになったのですが、データベースがなくては作成できるアプリケーションに大きな制約が発生します。
そこで、データベースとしてOracle Database 12cR1をインストールしていきます。

ところでデータベースの導入については、事前に行っておく前提作業があります。一部**[Chefを使ってOracle製品をインストールするための環境を準備してみた](http://qiita.com/shinyay/items/4420820cbb9c53e16815)**でも記載をしていますが、そこで触れていなかったSwap領域の作成を今回は行います。

OS導入時にSwap領域を適切に構成していれば特に問題はないですが、既存環境にOracle Databaseを導入しようとした時にSwap領域不測で警告が発生する事があります。
そのような時のためにChefでSwap領域を用意するRecipeを作成してみます。


# Oracle Databaseのインストール前提作業
Oracle Databaseのインストール前提作業は、インストールマニュアルの以下の箇所に記載があります。

- [Oracle Databaseのインストール前の作業](https://docs.oracle.com/cd/E49329_01/install.121/b71312/pre_install.htm)

## スワップ領域の前提条件
スワップ領域は、使用する環境のRAMの量に応じて以下の要件となります。

|RAM|スワップ領域|
|-----|--------------|
|1GB - 2GB|RAMサイズの1.5倍|
|2GB - 16GB|RAMサイズと同じ|
|16GB - |16GB|

- [サーバー・メモリーの最低要件](https://docs.oracle.com/cd/E49329_01/install.121/b71312/pre_install.htm#BABJEEFE "Linuxのスワップ領域要件")

# Swap領域の作成手順
Swap領域は以下の手順で作成します。

1. Swapファイルの作成
2. Swap領域の初期化
3. Swap領域の有効化

## 1. Swapファイルの作成
ddコマンドでNULL埋めファイル（/dev/zero）をコピーして作成します。
作成したファイルには、実行属性を付与します。

```bash
$ dd if=/dev/zero of=/swapfile bs=1M count=1024
$ chmod 600 /swapfile
```
- of: 作成するファイル名
- bs: ブロックサイズ（byte）
- count: ブロック数

## 2. Swap領域の初期化
mkswapコマンドでスワップ領域を作成します。

```bash
$ mkswap -f /swapfile
```

## 3. Swap領域の有効化
swaponコマンドを使って，スワップ領域を有効にします。

```bash
$ swapon /swapfile
```

# Chefを使ってやりたい事
前述のSwap領域を作成する一連の操作、

> 1. Swapファイルの作成
> 2. Swap領域の初期化
> 3. Swap領域の有効化

これらをChefで自動実行できるようにします。

## 今回作成するRecipe
- 作成するSwap領域サイズは、Attributeで制御するようにし、デフォルトしては1GBのSwap領域を作成し有効化します。

# Recipe. Swap領域の作成
以下の2種類のファイルを作成します。
- Recipe
- Attribute

 ## Swapファイルの作成 & 初期化

```recipes/swap.rb
execute "make swapfile" do
  user 'root'
  group 'root'
  command "dd if=/dev/zero of=#{node['env']['swap']['swapfile']} bs=#{node['env']['swap']['blocksize']} count=#{node['env']['swap']['count']} && chmod 600 #{node['env']['swap']['swapfile']} && mkswap #{node['env']['swap']['swapfile']}"
end
```

## Swap領域の有効化

```recipes/swap.rb
execute "activate swap" do
  user 'root'
  group 'root'
  command "swapon -ae"
end
```

## デフォルト値設定

```attributes/default.rb
default['env']['swap']['swapfile'] = '/swapfile'
default['env']['swap']['blocksize'] = '1M'
default['env']['swap']['count'] = '1024'
```

# まとめ
Swap領域の作成は、コマンドからも容易に作成する事ができるので、Chef化しておく必要はないかもしれないと思う方もいらっしゃるかもしれません。
Chefで実行できるようにしておく事のメリットは、次の点があると考えています。

- 自動化
- 冪等性
- 属人性排除

つまり今回のようなSwap領域の作成もコマンドで簡単にできると思える方と，思えない方、誰が実施しても同じ結果がでるというところに価値があるように考えています。

- [今回のレシピ：https://github.com/shinyay/chef-oracle-env/tree/publish_20160624](https://github.com/shinyay/chef-oracle-env/tree/publish_20160624 "chef-oracle-env
")
  - Oracle製品を導入する前提条件を満たすためのCookbookです。
CSS のfilterについて紹介と試してみたことメモ

#CSS のfilterについて紹介と試してみたことメモ

## CSS filterについて
「filter」プロパティは要素に対してフィルタ効果を与えるというものです。

## 対応ブラウザ
http://caniuse.com/#search=filter
IE未対応。
ベンダープレフィックス- webkit -を使えば残りの主要ブラウザはほぼ対応。
(2016/6/10調べ)

##  使える効果 
サンプル↓
http://codepen.io/yasui05821/pen/gMpZQd

- ぼかし
- グレースケール
- セピア
- 彩度
- 色相の回転
- 階調反転（ネガ・ポジ）
- 明るさ
- コントラスト
- 影
- 透過度

作ってて思ったのが影の表現でよく使うdox-shadowプロパティfilterのdrop-shadowと
の違いが面白かったです。

透過PNG画像をで試すと分かりやすいんですが、
box-shadow　　→　画像の大きさに合わせてbox状に影
drop-shadow　 →　はちゃんと透過した部分は無視して色があるPixel部分に影
てな感じです。






## 実際にアレンジして試してみた
### sample-1 ~セピア、グレースケール~
http://codepen.io/yasui05821/pen/Vjeyjv

アルバムめくりをイメージ。
古い記憶がよみがえるようなシーンをイメージして作りました。


### sample-2　~ぼかしを活用~
http://codepen.io/yasui05821/pen/aZdEVo

主役と脇役を変化させるテスト。
背景をぼかすことで最初の主役を文字に、背景を段々とはっきりさせることで背景に
眠たい時の視界、最後にあくびなど、人間の状態による視覚を再現できるかなと思い作成しました。


## 所感
CSSアニメーションやjavascriptと組み合わせたりと、
アイデア次第で表現の幅でより広がると思いました。
【Unity】SceneビューからVRモードのON/OFFを切り替える

※この記事のUnityのバージョンは5.3.5f1です.
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/5098feb0-fb50-f1c3-369e-e1a98f2caeda.png)

#はじめに
VRモード(Virtual Reality Supported)のON/OFFを手早くやりたかったので、SceneビューにVRモードをON/OFFするチェックボックスを出してみました。

#ソースコード
以下のスクリプトをUnityプロジェクト内に配置するとSceneビューにチェックボックスが出てきます。

``` ToggleVR.cs
#if UNITY_EDITOR
using UnityEditor;
using UnityEngine;
using UnityEngine.VR;

[InitializeOnLoad]
public class ToggleVR
{
  static ToggleVR()
  {
    // Sceneビューにウィンドウを出す
    SceneView.onSceneGUIDelegate += (sceneView) =>
    {
      Handles.BeginGUI();
      GUILayout.Window(1, new Rect(10, 26, 120, 47), OnGUI, "Window");
      Handles.EndGUI();
    };
  }

  static void OnGUI(int id)
  {
    if (Application.isPlaying)
    {
      if (PlayerSettings.virtualRealitySupported)
      {
        VRSettings.enabled = EditorGUILayout.ToggleLeft("VR Enabled", VRSettings.enabled);
      }
    }
    else
    {
      PlayerSettings.virtualRealitySupported = EditorGUILayout.ToggleLeft("VR Supported", PlayerSettings.virtualRealitySupported);
    }
  }
}
#endif //UNITY_EDITOR
```

#結果
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/5098feb0-fb50-f1c3-369e-e1a98f2caeda.png)
チェックボックスが出てきます。 チェックを入れるとVRモードがONになります
PHP7で新しいMongoDBのドライバを使う

以前、CentOS6 + PHP5.6の環境下で動かしていたPHPでMongoDBをごにょごにょといじくるスクリプトがあったんですが、CentOS7+PHP7で動かすとエラー
そういやドライバ入ってないじゃんと思ってインストールしようとしたのですが微妙に流儀が変わっていたのでメモ

マニュアルにも

[MongoDB ドライバ (旧版) ](http://php.net/manual/ja/book.mongo.php)
[MongoDB driver](http://php.net/manual/ja/set.mongodb.php)

とあるとおり今まであったものは旧版扱い



## PHPやドライバのインストール

私はPHP関連はremiリポジトリを使っています
PHP7.0の場合はremi-php70というリポジトリを有効にした上でphp-*なモジュールに関してはphp70-を頭につければいいらしい
ひとまずcliとmongodbとマルチバイトだけの最小構成

```bash
sudo yum --enablerepo=remi,remi-php70 install php70-php-cli php70-php-mbstring php70-php-pecl-mongodb
```

## 環境変数
これでインストールが終わったのですがシェルからphpと打つと

```bash
$ php -v
PHP 5.6.xx (cli) (built: xxxx)
Copyright (c) 1997-2016 The PHP Group
Zend Engine vx.x.x, Copyright (c) 1998-2016 Zend Technologies
```

予め入れてあったphp5.6が有効に・・・
php7を使うには

```
$ source /opt/remi/php70/enable
```

として環境変数を設定してあげなきゃいけないらしい
もう7以外使わないという人は.bashrcあたりに書いておくと幸せかも



## ライブラリを入れる

[チュートリアル](http://php.net/manual/ja/mongodb.tutorial.library.php)を見ると素のPHPで使う場合はこのライブラリを入れてねという風にお勧めされているので素直にしたがってcomposerでインストールしておく

## サンプル

ここまでやってしまえばあとは旧版とほぼ同じOneとManyでメソッドが分かれているのがポイント？

```php
<?php
require_once dirname(__FILE__) . '/vendor/autoload.php';

$client = new MongoDB\Client("mongodb://localhost:27017");
$db = $client->selectDatabase('example');
$collection = $db->selectCollection('gochiusa');


$collection->insertOne([ 'name' => '宇治松千夜', 'shop' => '甘兎庵', 'cv' => '佐藤聡美' ]);
$collection->insertOne([ 'name' => '桐間紗路', 'shop' => 'フルール・ド・ラパン', 'cv' => '内田真礼']);
$collection->insertMany([
    [ 'name' => '保登心愛', 'shop' => 'ラビットハウス', 'cv' => '佐倉綾音' ],
    [ 'name' => '香風智乃', 'shop' => 'ラビットハウス', 'cv' => '水瀬いのり' ],
    [ 'name' => '天々座理世', 'shop' => 'ラビットハウス', 'cv' => '種田梨沙' ],
]);

$chiya = $collection->findOne(['name' => '宇治松千夜']);

$rabbithouse = $collection->find(['shop' => 'ラビットハウス']);
foreach($rabbithouse as $rabbit){
    print_r($rabbit);
}
```
文字化け「名」→「吊」

UTF-16でハマった為、メモ

# Q. 特定の文字だけ化けてしまうのは何故か？

# A. 改行コードの変換処理が悪さをしていた

1. バージョン9までのMacで、改行コードは「CR」だった
2. UTF-16の「名」=「0x540D」、「吊」=「0x540A」
3. ツール・ライブラリ・コーディングしてる人の事情
    * 開発言語によっては、「CR」を改行として認識してくれない為、(など、諸々のコーディング事情により、)インポートされたファイルに対して改行コード「CR」=「0x0D」を「LF」=「0x0A」に一括置換させる実装がある
4. 「名」＝「0x540D」など、「0x0D」を使ってる文字まで、「0x0A」に置換される
5. 「名」→「吊」に変身する

# 解決策

以下のいずれか。

1. UTF-16を使わない
2. 改行コードを置換しない
3. UTF-16をUTF-8に変換してから、改行コードを置換する
    * UTF-8では、「0x0D」を使っている文字はない為
Centos 7.1 + Vagrant でVBoxGuestAdditionsをインストールする

`vboxsf` がないため、ローカルのファルダをVMにMountできなくて、VBoxGuestAdditionsをインストールするが必要です。


まずは、自分のVirtualBoxバージョンにあわせて、　http://download.virtualbox.org/virtualbox/ から、VBoxGuestAdditionsのisoをダウンロードします。

```
wget http://download.virtualbox.org/virtualbox/5.0.20/VBoxGuestAdditions_5.0.20.iso
```


ISOファイルをMountします。

```
sudo mkdir /media/VBoxGuestAdditions
sudo mount -o loop,ro VBoxGuestAdditions_5.0.20.iso /media/VBoxGuestAdditions
```

いちようインストールを試します。

```
sudo sh /media/VBoxGuestAdditions/VBoxLinuxAdditions.run 
```

初めては必要なパッケージがないため、エラーとなりました。

依頼パッケージをインストールします（実際に異なるかもしれません）。

```
sudo yum install -y gcc
sudo yum install -y kernel-devel-3.10.0-327.18.2.el7.x86_64
```

最後にインストールのShellを実行しましょう

```
sudo sh /media/VBoxGuestAdditions/VBoxLinuxAdditions.run 
```


今回は無事にインストールが成功し、 `vagrant reload` を実行しVM再起動して、無事にローカルのフォルダをVMにMonutできました。
無料のウェブスクレーパー：Octoparse

このツールを使うことができればスクレイピング用のコードを記述しなくともデータの取得ができる。

Octoparseはユーザーがそれの感覚に未構造化データをするのを助け始められた。 私達はどんな情報をそれらがウェブサイトから必要とする、そしていかにその情報が構成されるべきであるか定める認めることによってことに、ユーザーインターネットのデータであるビジネスに無限により有用感じた。（http://www.octoparse.com/）
![Octoparse.jpg](https://qiita-image-store.s3.amazonaws.com/0/130932/14b831a6-edbd-e48f-d35d-3ccdb02c304e.jpeg)

ってことに、ユーザーインターネットのデータであるビジネスに無限により有用感じた。 私達のプロダクトは網のデータ抽出代理店および得られたデータにアクセスするのに使用されているWebアプリケーションを造るのに使用されているデスクトップアプリケーションから成っている。 これは次にOctoparseがほぼあらゆるWebページからのデータのカスタマイズされた供給を作成し、そのデータを管理するか、輸出する、または再使用することを容易にすることを意味する。 複数のソースからのデータの組合せはそれを必要とする時はいつでもユーザーが有用な、最新情報があることを可能にする。 それはまたユーザーが容易にmashupsを作成し、監視し、フォーラムにそしてブログに値を付けている把握し、競争相手を注文の研究を表現される行い、顧客の意見を多くのオンライン仕事を自動化することを可能にする。
![g.png](https://qiita-image-store.s3.amazonaws.com/0/130932/58e28687-4d70-ae61-53f7-a252641d6b06.png)


Octoparseのpricingからダウンロード後、インストールするだけである。(http://www.octoparse.com/pricing/)
![QQ图片20160624113159.png](https://qiita-image-store.s3.amazonaws.com/0/130932/80642a5e-20c9-665a-3e52-a759b4f42c48.png)


アカウントも必要になるが登録、利用は無料である。(http://www.octoparse.com/SignUp)
AndroidStudioで未署名APKを作成

AndroidStudio2系でGUI上から未署名APKを作成する方法です。
# ビルド環境
Mac（OS10.10.5）
AndroidStudio2.1.2

# 手順
#### 1. ビルド設定を追加する。

アプリメニュー：Build → Edit Build Types
<img width="840" alt="スクリーンショット 2016-06-24 11.40.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/130537/51daf9a1-aa85-748b-4f08-2ad813a6242f.png">

キャプチャのように署名設定を行わないビルド設定を作成する。
<img width="840" alt="スクリーンショット 2016-06-24 11.40.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/130537/7e6a1200-a0f1-2fe3-8311-9c2610729027.png">

#### 2. ビルド対象を変更する

アプリメニュー：Build → Select Build Variant →　前の手順で作成したビルド設定を選択
<img width="840" alt="スクリーンショット 2016-06-24 11.41.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/130537/e537ede2-a539-9518-c1a3-5b08771e139a.png">

<img width="840" alt="スクリーンショット 2016-06-24 11.41.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/130537/6b27081c-2a2b-ca8d-212e-415c48573b15.png">

#### 3. ビルドする

アプリメニュー：Build → Build APK
<img width="840" alt="スクリーンショット 2016-06-24 11.41.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/130537/ca892f3c-d406-b225-0088-30655322cf62.png">

以上の手順でプロジェクト内対象アプリの
「app/build/outputs/apk/」
ディレクトリに
「**-unsigned.apk」
が作成されます。
<img width="568" alt="スクリーンショット 2016-06-24 12.15.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/130537/c374a306-0e73-f52e-a291-2cf860b9b87e.png">

以上、AndroidStudio2系で未署名APKを作成する方法のご紹介でした。
MongoDBの新しいGridFS APIを使ってみる

# ことのはじまり

MongoDBにはGridFSというファイルを他のメタデータつきでまるっと格納できる機能があり、コマンドラインからもプログラムからもデータを突っ込めるというのでかなり便利に使っています

これまでNode.js上でMongooseで手軽にMongoDBのデータを出し入れしながらAPIが若干違うGridFSもエレガントに使おうという場合は[gridfs-stream](https://github.com/aheckmann/gridfs-stream)と組み合わせるのが定跡のように言われておりました

しかし先日昔の作りかけアプリをES6ベースな書き方になおしたい→node.jsとnpmモジュール関連を一気にバージョンアップしたところコケるアプリがチラホラとありまして
エラーメッセージを見るとアプリ本体やMongoose周りは別段問題はなさそうだったのですが、gridfs-stream関連を使っているあたりで色々出てる感じでした

調べてみるとgridfs-streamで使っているGridStore APIが最近のMongoDB Native Driverでは

![The GridStore API is deprecated](https://qiita-image-store.s3.amazonaws.com/0/31310/62378837-784b-a835-58ea-d048e89826ed.png)

どうやら[Grid File System API](http://mongodb.github.io/node-mongodb-native/2.1/reference/gridfs/streaming/)に移行しなさいと言っているようで

件のコケたアプリのエラーはこれだけが原因というわけでもなかったのですが、見かけたついでなので *new GridFS API* なるものがどんなものなのか試してみました

## Grid File System API

ドキュメントを読むとNode.jsのstreams3にも対応したstreamベースのAPIらしく、今までgridfs-streamを経由してやっていたことをネイティブドライバのモジュールが素でやってくれそうな雰囲気

というわけでMongooseとの組み合わせでデータを出し入れするサンプルを書いてみました

```js:model.js
var Mongoose = require('mongoose');
var ObjectId = Mongoose.Types.ObjectId;
var mongoose = Mongoose.connect('mongodb://localhost/something');

var Schema = {};
var Model = {};

Schema.File = new Mongoose.Schema({
    filename: {type: String},
    contentType: {type: String},
    length: {type: Number},
    md5: {type: String},
    uploadDate: {type: Date},
    metadata: Mongoose.Schema.Types.Mixed
}, {strict: false});

Schema.File.statics.writeStream = function(filename, options){
    var bucket = new Mongoose.mongo.GridFSBucket(mongoose.connection.db);
    return bucket.openUploadStream(filename, options);
};

Schema.File.methods.readStream = function(callback){
    var bucket = new Mongoose.mongo.GridFSBucket(mongoose.connection.db);
    return bucket.openDownloadStream(this._id);
};

Schema.File.methods.unlink = function(callback){
    var bucket = new Mongoose.mongo.GridFSBucket(mongoose.connection.db);
    bucket.delete(this._id, function(err){
        callback(err);
    });
};
Model.File = Mongoose.model('File', Schema.File, 'fs.files');

module.exports = Model;

```

```writer.js
var fs = require('fs');
var Model = require('model.js');
var readstream = fs.createReadStream('example.txt');
var writestream = Model.File.writeStream('example.txt', {
    metadata: {}
});
writestream.once('finish', function(){
    console.info('オワタ');
});

readstream.pipe(writestream);
```
Ansibleで WindowsServerへセキュリティアップデート（KB）を個別にインストール・アンインストールする　サンプルプレイブック

## 0.はじめに
Windows2012ServerR2へAnsibleから特定のKBをインストール・アンインストールするサンプルのAnsible playbookと　確認用 Serverspec specファイルです。

rawモジュールなどを使った泥臭いやり方ですが、Windows関連の事例が少ないので参考までに。
なお、実際にはserviceの上げ下げやreboot、上位のLB制御なども必要だと思いますが
シンプルにKBのインストール・アンインストールのみを記載しています。
また、インストールについてはDISMではなくpkgmgrを使用しています。

---
linuxのセキュリティアップデートについてはこちらの記事も参考にしていただければと思います。
http://qiita.com/tbuchi888/items/6807894368ad5b2a874d

---
2016/07/04
本記事をベースにKBファイル名などを変数化し、MSUファイルをlsコマンドで動的に取得して複数KBをインストールする記事を投稿しました。
http://qiita.com/tbuchi888/items/c23b856b16aba4ed494f

---

## 1.大まかな流れ

Ansibleサーバで
0.　事前にプレイブック実行ディレクトリにpatchディレクトリ作成と配下に対象のmsuファイルをダウンロードしておく

Ansible　ServerからターゲットのWindowsへ

1.　msuファイルをコピーするためのディレクトリを作成
2.　msuファイルをコピー
3.　msuファイルを圧縮解凍
4.　pkgmgrでサイレントインストール

Serverspec　で
5. `wmic qfe`の実行結果に該当のKBが含まれているか確認

---

## 2.Ansible playbook

インベントリファイル： hosts

``` hosts
[win]
win0[1:2]

[win:vars]
ansible_user=ansible
ansible_password=password
ansible_port=5985
ansible_connection=winrm
```

playbook：　install_KB.yml

``` install_KB.yml
---
- hosts: win
# Don't gather hosts facts for performance
  gather_facts: no
# Setting the task
  tasks:
   - name: create directory
     win_file: path=c:/work/ state=directory
   - name: copy the msu file
     win_copy: src=patch/Windows8.1-KB3079904-x64.msu dest=c:/work/Windows8.1-KB3079904-x64.msu
   - name: decompression the msu file
     raw: wusa C:/work/Windows8.1-KB3079904-x64.msu /extract:C:/work/
   - name: install KB
     raw: pkgmgr /n:C:/work/Windows8.1-KB3079904-x64.xml /quiet /norestart
```

playbook：　uninstall_KB.yml

``` uninstall_KB.yml
---
- hosts: win
# Don't gather hosts facts for performance
  gather_facts: no
# Setting the task
  tasks:
   - name: uninstall KB 
     raw: wusa /uninstall /kb:3079904 /quiet /norestart
```

## 3.ServerSpec

``` chk_KB_spec.rb
require 'spec_helper'

describe command('wmic qfe') do
  its(:stdout) { should contain('KB3079904') }
end
```

## 4.参考
ansibleのplaybookでServerspecのように確認行う場合は以下

``` check_KB1.yml
---
- hosts: win
# Don't gather hosts facts for performance
  gather_facts: no
# Setting the task
  tasks:
   - name: Check KB
     raw: wmic qfe
     register: command_result
     failed_when: "'KB3079904' not in command_result.stdout"
```

または、findstrで対象が見つからないとエラー("failed": true, "rc": 1,)となるので

``` check_KB2.yml
---
- hosts: win
# Don't gather hosts facts for performance
  gather_facts: no
# Setting the task
  tasks:
   - name: Check KB
     raw: wmic qfe | findstr "KB3079904"
```
cron設定後の確認方法


いつもcronで設定したコマンドの確認方法を忘れてしまうのでメモ。

`sudo crontab -e`で編集した場合、
`sudo /bin/sh -c "入力したコマンド"`で実行確認を行う。

普通に`sudo コマンド`では実行できても、
上記のコマンドでは、環境変数が引き継がれない可能性があるので、必ず実行確認をする。
【備忘録】wordpressの振り分け関数あれこれ

# top判定

```
if (is_home()) {
///
}
```

# 特定固定ページをトップ（フロントページ）にしてる時

```
if (is_front_page()) {
///
}
```

# 一覧判定

```
if (is_archive()) {
///
}
```


# カテゴリ一覧判定

```
if (is_category()) {// 引数にカテゴリスラッグでカテゴリ指定
///
}
```
# 記事詳細判定

```
if (is_single()) {
///
}
```

# 固定ページ判定

```
if (is_page()) { // 引数にスラッグで個別判定
///
}
```

# カスタム投稿記事一覧判定

```
if (is_post_type_archive('カスタム投稿スラッグ')) {// arrayで複数可
///
}
```



# カスタム投稿記事詳細判定

```
if (is_singular('カスタム投稿スラッグ')) {
///
}
```

# タグ判定

```
if (is_tag()) {
///
}
```

# タクソノミ判定

```
if (is_tax('タームスラッグ')) {
///
}
```

# 年別一覧判定

```
if (is_year()) {
///
}
```

# 月別一覧判定

```
if (is_month()) {
///
}
```

# 検索一覧判定

```
if (is_search()) {
///
}
```

# 404判定

```
if (is_404()) {
///
}
```


# 管理画面判定

```
if (is_admin()) {
///
}
```
NVIDIA GPU+Windows 10マシンにSSD増設してUbuntu14またはUbuntu16をUEFI BIOSで入れる時のハマりどころ

#　かきかけです

# WindowsがUEFIモードになっていることを確認

- システム情報を参照

# 高速スタートアップ / fastboot　の設定確認

# セキュアブート　の状態を確認

# SSDを新たに増設



# ubuntuをインストール
LiveCD／USBから起動
***nvidia GPUが刺さっていると、GRUBからInstall Ubuntuを選んでも真っ黒な画面になる場合がある
そんな時はInstall Ubuntuカーソル状態で e -> quiet splash を nomodeset に書き換えてF10で起動***

Windows10が/dev/sda、新たなSSDが/dev/sdcとする
sdcにパーティションを切る

- ext4領域を/に
- swap領域も作る
- ブートローダーは/dev/sdc に

再度そのまま起動してしまうとまた画面は真っ黒なので、忘れずにUbuntuカーソル状態で e -> GRUB optionをquiet splash を nomodeset に書き換えてF10で起動

# nvidia GPU のドライバをダウンロードしてインストール

Ctrl + Alt + F1でCUIモード
ログイン

***nvidiaのドライバを削除してダウンロードしたものと置き換える***

```bash
sudo apt-get purge nvidia* #forget-me-not
sudo service lightdm stop
sudo ./NVIDIA-****.run
```
- without signingで入れる

# BIOSから、ブート順を変更
- 増設したSSDを最初に
- WindowsはGRUBの選択肢に追加されているはず

# GRUBの起動順を変更してデフォルトで起動するOSをwindowsにする（おこのみで）
three.js テクスチャを貼る


![スクリーンショット 2016-06-24 10.17.36.png](https://qiita-image-store.s3.amazonaws.com/0/76843/b90baaa0-417a-b229-e608-00133ca4a412.png)

頑張ってトレースしたヒゲおじさんボックス画像を貼り付ける。



コードの基本形はこちら
□ three.jsテンプレート。ボックス一つ表示
http://qiita.com/39_isao/items/d1cb35d30a309568dc28


```js:hoge.js

    // loaderオブジェクトを作って、画像をロード次第、mesh作成


    var loader = new THREE.TextureLoader();

    loader.load("block.jpg", function(texture){
        createBox(texture); // mesh作成
        render();
    });


    function createBox(texture){
        box = new THREE.Mesh(
            new THREE.BoxGeometry(100, 100, 100),
            new THREE.MeshLambertMaterial({map: texture})  // {map: texture}がキモ
        );
        box.position.set(0, 0, 0);
        
        // シーンに追加
        scene.add(box);
    }



    function render(){
      // レンダリング処理ごにょごにょ
    }
```
[Espresso]AdapterViewの子要素の確認方法まとめ

毎回忘れてググる羽目になるので自分用メモ。

# ListView,GridView

```
Espresso.onData(anything())
                .inAdapterView(withId(R.id.gridView))
                .atPosition(index)
                .onChildView(withId(R.id.img_child))
                .check(matches(isDisplayed()))
                .check(matches(withEffectiveVisibility(ViewMatchers.Visibility.VISIBLE)));
                .perform(click())
```

※ListView/GridViewがTOP要素なら、atPositionに指定したビューが見えるまで自動でスクロールしてくれるが、ScrollView内に含めるような実装方法にしていると、自分でスクロールさせておく必要がある。

# RecyclerView

**check**

```
onView(withId(R.id.list))
    .perform(RecyclerViewActions.scrollToPosition(index))
    .check(matches(atPositionOnView(index,
                            withText("タイトル"), R.id.text_title_name)))
    .check(matches(atPositionOnView(index ,
                            withText("¥300"), R.id.text_price)))
    .check(matches(atPositionOnView(index,
                            withEffectiveVisibility(ViewMatchers.Visibility.INVISIBLE),
                            R.id.text_purchased)));
```

```
public static Matcher<View> atPositionOnView(final int position, final Matcher<View> itemMatcher,
                                           @NonNull final int targetViewId) {

  return new BoundedMatcher<View, RecyclerView>(RecyclerView.class) {
      @Override
      public void describeTo(Description description) {
          description.appendText("has view id " + itemMatcher + " at position " + position);
      }

      @Override
      public boolean matchesSafely(final RecyclerView recyclerView) {
          RecyclerView.ViewHolder viewHolder = recyclerView.findViewHolderForAdapterPosition(position);
          View targetView = viewHolder.itemView.findViewById(targetViewId);
          return itemMatcher.matches(targetView);
      }
  };
}
```

**perform**

```
onView(withId(R.id.list)).perform(
                   RecyclerViewActions.actionOnItemAtPosition(index + 1, click()));
```
Hyper-V上のLinux仮想マシンをVMware ESXiへ移行する手順 - Migrate Linux virtual machine on Hyper-V to VMware ESXi

# 概要

Hyper-V上で動いているLinux仮想マシン（OSはCentOS 5.8）をVMware ESXi 5へ移行しました。

移行するやり方は2通りあります。

- VMware vCenter Converter https://my.vmware.com/web/vmware/evalcenter?p=converter を使った簡単なやり方
- 仮想ディスクを変換して、ごにょごにょする面倒なやり方

今回は後者でやりました。

# 手順

## ステップ1 仮想ディスクvhdxをvmdkへ変換する

Hyper-Vサーバ上にはある仮想ディスクを変換します。

変換にはStarWindのV2V Converterを使いました。

下記からダウンロードできます。
https://www.starwindsoftware.com/converter

変換先としてVMware pre-allocated imageを選択しました。

![v2v1.PNG](https://qiita-image-store.s3.amazonaws.com/0/59475/efa9569d-b05f-8b1f-6e21-9803ed98b461.png)

ほんとうはthickディスクじゃなくてthinディスクにしたいのですが、なぜかESXiで読み込めませんでした。後でもう一度thinに変換することにします。

## ステップ2 VMware仮想マシンを作成

VMware ESXi上で仮想マシンを作成します。
このとき仮想ディスクは作らないようにします。

## ステップ3 変換した仮想ディスクvmdkをアップロード

変換した仮想ディスクをVMware ESXiからアクセスできる場所へアップロードします。

## ステップ4 仮想マシンへ仮想ディスクを追加

ステップ2で作成した仮想マシンに、ステップ3でアップロードした仮想ディスクを追加します。

SCSIコントローラは、CentOS 5なので LSI Logic SASを選びました。
より新しいOSであれば、VMware paravirtualのほうがよいです。

## ステップ5 仮想マシンをLive DVDを使って起動

rootファイルシステムが見えなくて起動しないので、いったんLive DVDで起動します。

自分はCentOS 7のDVDを使いました。

## ステップ6 /etc/modprobe.confを書き換えて、initrdを再作成

既存CentOSが`/mnt/sysimage`にマウントされているはずなので、その中にある/etc/modprobe.confを書き換えます。

```shell-session
vi /mnt/sysimage/etc/modprobe.conf
```

書き換え内容は、`scsi_controller`を含む行です。

```text:/mnt/sysimage/etc/modprobe.conf
alias scsi_hostadapter mptbase
alias scsi_hostadapter1 mptscsih
alias scsi_hostadapter2 mptfc
alias scsi_hostadapter3 mptspi
alias scsi_hostadapter4 mptsas
```

[CentOS wiki](https://wiki.centos.org/TipsAndTricks/CreateNewInitrd)にある手順に従って、initrdを再作成していきます。

必要なものをマウントして、chrootします。

```shell-session
mount --bind /proc /mnt/sysimage/proc
mount --bind /dev /mnt/sysimage/dev
mount --bind /sys /mnt/sysimage/sys
chroot /mnt/sysimage
```

initrdを作成します。wikiにある手順では、カーネルバージョン部分は`uname -r`で取得していました。今回は異なるバージョンのLive DVDを使っているので手書きしました。

```shell-session
cd /boot
cp initrd-2.6.18-308.el5PAE.img initrd-2.6.18-308.el5PAE.img.bak
mkinitrd -f -v /boot/initrd-2.6.18-308.el5PAE.img 2.6.18-308.el5PAE
```

再起動します。

```shell-session
exit
reboot
```

## ステップ7 Linux Integrationをアンインストール

無事起動したら、Hyper-VのLinux Integrationをアンインストールします。

## ステップ8 VMware Toolsをインストール

いつもの手順でVMware Toolsをインストールします。

以上です。お疲れ様でした。 :smile: 

# 落穂ひろい: thick仮想ディスクをthinにする

ESXiホストマシンへsshでログインして、vmkfstoolsを使います。

```shell-session
vmkfstools -i original.vmdk new.vmdk -d 'thin'
```

`ls -l`で見える数字は仮想ディスク全体のサイズなので、`-s`を付けると実サイズが見えます。

こういう作業は、sshしてするよりvSphere PowerCLI使ったほうがよさげです。
NOKIA5110(PCD8544)のLCDシールド


たまたま見ていたら[aitendo](http://www.aitendo.com)でNOKIA5110のLCDモジュールを使ったRaspberryPi用のシールドが目に止まったので買ってみたのですが、販売ページに資料が無く使い方が分からないので調査してみました。

#商品


LCDシールド（84x48/SPI） [SLD8544Pi-HL]
http://www.aitendo.com/product/10969


![Evernote Camera Roll 20160624 112122.jpg](https://qiita-image-store.s3.amazonaws.com/0/14768/14d5d0ea-e711-d6b4-00c9-675b6ce319ee.jpeg "Evernote Camera Roll 20160624 112122.jpg")

#ボードのピン配列

|LCD Pin| RPiPin | Name | 
|:--|:--|:--|
|VDD|1|3.3V|
|SCLK|11|GPIO0|
|DIN|12|GPIO1|
|D/C|13|GPIO2|
|CS|15|GPIO3|
|OSC||
|GND|?|GND|
|VOUT||
|RST|16|GPIO4|

![Evernote Camera Roll 20160624 113022.jpg](https://qiita-image-store.s3.amazonaws.com/0/14768/875363ed-089b-dc62-1c53-c2d9678df0da.jpeg "Evernote Camera Roll 20160624 113022.jpg")


#使い方

ピン配列が分からないと制御できないと思い込んでいたのですが、どうやらこの繋ぎ方が標準なようで、普通に下記のページの参考にコンパイルしたら動きました...。

http://binerry.de/post/25787954149/pcd8544-library-for-raspberry-pi

まぁ、制御ピンさえわかれば後はArduino用の情報やPCD8544のデータシート等を見ればなんとかなると思います。

https://www.sparkfun.com/datasheets/LCD/Monochrome/Nokia5110.pdf


#ごにょごにょ

表示が乱れる現象が出るのですが時々なので、そんなものなのか不良品なのか不明です。他のも買ってみればいいのかな...。
IAMポリシーに負けない！S3バケットポリシーのIP制限

# IAMポリシーに負けない！S3バケットポリシーのIP制限

Denyは強い！

```json
{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "IPDeny",
            "Effect": "Deny",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::${bucket_name}/*",
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": [
                        "203.0.113.1/32"
                    ]
                }
            }
        }
    ]
}
```
Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'  解決方法

http://easyramble.com/warnings-for-changing-mysql-socket.html
http://d.hatena.ne.jp/TamaC/20090330/1238418696


vim /etc/my.cnf
でsocketをsocket=/tmp/mysql.sockにしたら治ったけど、mysqlに繋げれなくなった。

再起動
 sudo /etc/init.d/mysqld restart
summernoteのimage upload機能を非表示にする

# はじめに
- [summernote](http://summernote.org/)というWYSIWYGエディターが手軽で簡単
- railsには[summernote-rails](https://github.com/summernote/summernote-rails)がある
- image upload機能があるが、それを実装したくない場合の手法についてメモ

# image uploadの2つの方法
おそらくsummernoteは下記の2つの方法でimage uploadができる。そのため、それぞれ出来なくする必要がある。

1. エディター上部の「画像」ボタンクリック後のフォーム
2. ドラッグアンドドロップ

# 1. エディター上部の「画像」ボタンクリック後のフォーム
スタイルシートに下記を追記することで非表示にすることが可能。

```
.note-group-select-from-files {
  display: none;
}
```

#2. ドラッグアンドドロップ
dropzoneの機能を停止させるプロパティがあるようです。

```
$('#summernote').summernote({
disableDragAndDrop: true
});
```


# 参考にしたサイト
下記を参考にさせていただきました。

[Disable image upload in Summernote](http://stackoverflow.com/questions/33615669/disable-image-upload-in-summernote)
[summernoteのimage upload機能を止める](http://qiita.com/asukiaaa/items/484127cc227b23a34731)
chi-bus.jpその後

# simplify-js

---

## simplify-jsとは
いい感じに経度緯度配列を削減

デモ：
http://mourner.github.io/simplify-js/
GitHub：
https://github.com/mourner/simplify-js
Ruby移植：
https://github.com/odlp/simplify_rb

---

## その他の移植

- Python: omarestrella / simplify.py (by Omar Estrella)
- PHP: AKeN / simplify-php (by Rotari Gheorghe)
- PHP: andreychumak / simplify-php (by Andrey Chumak)
- Java: ekeneijeoma / simplify-java (by Ekene Ijeoma)
- Java: hgoebl / simplify-java (by Heinrich Göbl)
- Processing: ekeneijeoma / simplify-processing (by Ekene Ijeoma)
- AS3: fnicollet / simplify-as3 (by Fabien Nicollet)
- Rust: calvinmetcalf / simplify-rs (by Calvin Metcalf)
- Ruby: odlp / simplify_rb (by Oliver Peate)
- Go: yrsh / simplify_go (by Anton Korotkikh)
- C# (Portable): imshz / simplify-net (by Shees Ul-Hassan)
- Swift: malcommac / SwiftSimplify (by Daniele Margutti)

---

## 元のコード

```rb
tracks: bus_route.bus_route_tracks.map do |track|
  track.coordinates.map.with_index do |coordinate, index|
    next if index != 0
      && index != track.coordinates.length - 1
      && index % bus_routes.length != 0
    { lat: coordinate[0], lng: coordinate[1] }
  end.compact
end
```

---

## 改善その1

```rb
tracks: bus_route.bus_route_tracks.map do |track|
  coordinates = track.coordinates.map { |coordinate| { x: coordinate[0], y: coordinate[1] } }
  SimplifyRb.simplify(coordinates, 0.0001).map do |coordinate|
    { lat: coordinate[:x], lng: coordinate[:y] }
  end.compact
end
```

---

## 改善その2

```rb
doc.css('Curve').each do |node|
  gml_id = node['id']
  coordinates = node.at('posList').text.strip.each_line.map { |line| { x: line.split[0].to_f, y: line.split[1].to_f } }
  simplified_coordinates = SimplifyRb.simplify(coordinates, 0.0001).map { |c| [c[:x], c[:y]] }
  bus_route_track = BusRouteTrack.create(gml_id: "#{xml_path}/#{gml_id}", coordinates: simplified_coordinates)
  bus_route_track_progress.increment
end
```

---

## ベンチマーク

ApatchBenchがSNIに非対応のため測定してないため、以下はざっくり

美しさ：　圧倒的
応答速度：　+50ms（JSON処理、削減ロジック）
通信量：　たぶん1/30くらい（今まではバスルート数に比例して削減→simplify.jsは1本から適用）

---

# WOVN.jp

---

## WOVN.jpとは

たった１行のコードで、
あなたのウェブサイトをグローバルに。

デモ：
https://www.chi-bus.jp/

ちなみに「ウォーブン」と発音

---

## 埋め込みコード

```html
<script src="//j.wovn.io/1" data-wovnio="key=xxxxx" async></script>
```

---

## すごいところ

- ほんとに1行
- 対応ページの追加が簡単
- 翻訳支援＋自由な編集
- 多言語対応
- ライブ編集モード

---

## 作った人

- [ミニマル・テクノロジーズ](http://www.minimaltech.co/ja/)
- CEOは林鷹治氏
- もともと林氏は、Stores.jpを運営するブラケットでグロースハッカー
- ブラウザ上でA/Bテストが簡単にできるOptimizelyのサービスを使っていた
- 独立系VCのIncubate Fundから450万円のシード投資
- その後リクルートなどが出資
Travis CIで ARMツールチェインを使う

Travis CIで ARMツールチェインを使う。

はまったのでメモしときます。

* ARMツールチェインはバイナリ配布されている [GCC ARM Embedded in Launchpad](https://launchpad.net/gcc-arm-embedded)を使います。
* Travis CIは64bit環境で動作しています。
* GCC ARM Embeddedは32bit環境でコンパイルされたバイナリです。
* なので32bitのライブラリを別途インストールする必要があるので libc6-i386 のパッケージをインストールします。
* あとは、GCC ARM Embedded のパッケージを展開してbinにPATHを通せばよいです。

* さらに、PX4 のちょっと前のtravis.yml を参考にして複数バージョンのgccでコンパイルをしています。https://github.com/PX4/Firmware/blob/584165def20f3a354edc9393af2308a736c8d544/.travis.yml

```.travis.yml

language: c

matrix:
  fast_finish: true
  include:
    - os: linux
      sudo: false
      env: GCC_VER=4.8
    - os: linux
      sudo: false
      env: GCC_VER=4.9
    - os: linux
      sudo: false
      env: GCC_VER=5.0

addons:
  apt:
    packages:
    - libc6-i386 

before_install:
  - if [ "${TRAVIS_OS_NAME}" = "linux" ]; then
         pushd .
      && cd ~ && mkdir gcc && cd gcc
      && if [ "$GCC_VER" = "4.8" ]; then GCC_URL="https://launchpadlibrarian.net/186124160/gcc-arm-none-eabi-4_8-2014q3-20140805-linux.tar.bz2" ; fi
      && if [ "$GCC_VER" = "4.9" ]; then GCC_URL="https://launchpad.net/gcc-arm-embedded/4.9/4.9-2015-q3-update/+download/gcc-arm-none-eabi-4_9-2015q3-20150921-linux.tar.bz2" ; fi
      && if [ "$GCC_VER" = "5.0" ]; then GCC_URL="https://launchpad.net/gcc-arm-embedded/5.0/5-2016-q1-update/+download/gcc-arm-none-eabi-5_3-2016q1-20160330-linux.tar.bz2" ; fi
      && wget -O gcc.tar.bz2 ${GCC_URL}
      && tar -jxf gcc.tar.bz2 --strip 1
      && exportline="export PATH=\$HOME/gcc/bin:\$PATH"
      && if grep -Fxq "$exportline" ~/.profile; then echo nothing to do ; else echo $exportline >> ~/.profile; fi
      && . ~/.profile
      && popd
      ;
   fi

before_script:
  - arm-none-eabi-gcc --version

script:
  - make
 
notifications:
  email: false
```

* でもビルドの度にバイナリをwgetして大丈夫なのかな、と心配ですね。
three.js meshのグループ化


複数meshを同時に動かしたい時とか


とりあえずboxを2個作る

 ```js:hoge.js
var box = new THREE.Mesh(
        new THREE.BoxGeometry(30, 30, 30),
        new THREE.MeshLambertMaterial({color: '#00FFFF'})
    );


var box2 = new THREE.Mesh(
        new THREE.BoxGeometry(30, 30, 30),
        new THREE.MeshLambertMaterial({color: '#00FFFF'})
    );

box.position.set(0, 0, 0);
box2.position.set(100, 0, 100);
```


グループ化作業 THREE.Group();

 ```js:hoge.js
    var boxes = new THREE.Group();

    // 先ほどのboxをグループに追加
    boxes.add(box);
    boxes.add(box2);

    // sceneに追加
    scene.add(boxes);
```

簡単！
Swiftのコードから特定のUIViewを識別する


Swiftのコード上から、特定のUIViewの識別子を取得する方法がすぐに見つからなかったので、まとめておきます。

## Storyboard上のUIViewのIdentityのRestration IDを設定

![スクリーンショット 2016-06-24 10.10.26.png](https://qiita-image-store.s3.amazonaws.com/0/44140/3573f46c-7573-097b-865b-146802c15695.png "スクリーンショット 2016-06-24 10.10.26.png")

## Swiftのコード上からUIView.restorationIdentifierで上記で設定した文字列を取得

```ViewController.swift
view.restorationIdentifier() // Test
```

こんな感じです。
c++ builder XE4, 10.2 Tokyo > TForm > 1つのフォームをベースに複数のフォームのインスタンスを作る

```txt:動作確認
C++ Builder XE4
RAD Studio 10.2 Tokyo Update 2 (追記: 2017/12/27)
```

## やりたいこと

複数台のRS-232C通信処理を実装する。

通信処理はメインのユニットとは分離して、再利用性を高める。
分離する処理の実装は「TThreadにする」か「別ユニットのフォームにする」かなどが考えられる。別ユニットのフォームとして実装してみる。その前段階として1つのフォームを作り、そのフォームを複数個インスタンス生成してみる。

## 手順

構成としては以下とする。

- Main.cpp : メインフォーム
- UnitComm.cpp : 通信処理のフォーム (Name: FormComm)

1. UnitCommを新規作成する
1. プロジェクト > オプション > フォーム にて「自動生成フォーム」の欄からFormCommを「使用可能フォーム」に移動して自動生成を防止する
1. Main.hにてUnitComm.hをincludeする
1. Main.hにてTFormComm *m_commForms[10];のように宣言する
1. Main.cppの処理で以下のようにインスタンス生成する

```cpp
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	for(int idx=0; idx<4; idx++) {
		m_commForms[idx] = new TFormComm(this);
		m_commForms[idx]->Show();
	}
}
```

上記にて4つのフォームが生成される。

TFormComm()のコンストラクタにてidxを引数として渡すなどして、それぞれ異なる処理を実装できる。

newで生成するのでMain終了時は適宜delete処理が必要。

TThreadでなくFormで処理する利点としては、FormにはTMemoなどを含めることができる。通信内容のデバッグなどがしやすくなる。TThreadでない短点としては、プライオリティの調整ができないこと。
MySQLのIndexをはるコツ

## Indexを作成すべき列の特長
### 1. テーブル内のデータ量が多く、少量のレコードを検索する場合

### 2. WHERE句の条件、結合の条件、ORDER BY句の条件として頻繁に利用する
ただし全表走査が目的のテーブルであれば索引は不要

### 3. NULL値が多いデータから、NULL値以外の検索をする
IndexはNULLを含まないのでNULL値以外の検索には効果がある

## 逆に、Indexを作成すべきでない列の特徴

* 表の規模が小さいか、表から大部分のレコードを検索する場合

* WHERE句等の条件としてあまり仕様されないもの
* 列の値が頻繁に挿入、更新、削除される


 * Indexは表に新規行が挿入されればIndexにも自動的に値が格納される。そのためデータの検索速度は向上するが挿入、更新、削除の処理では索引のメンテナンス作業が発生し、速度低下につながる

* WHERE句の条件として使用されるが、列が式の一部として参照される


## Indexの付け方

### 通常

```
ALTER TABLE landing_pages ADD INDEX index_name(user_id)
```

### マルチカラムインデックス

```
ALTER TABLE landing_pages ADD INDEX index_name(user_id, created)
```

MySQLでは1つのクエリを実行するとき1つのテーブルにつき1つのインデックスしか使用できない。よって、単に2つのインデックスを作成してしまうとどちらか一つを選択する。

マルチカラムインデックスを使えば、複数のカラムにインデックスを使用できる

（参考）http://blog.xao.jp/blog/mysql/mysql%E3%81%AE%E8%B6%85%E9%81%85%E3%81%84select%E3%81%8C%E5%8A%87%E7%9A%84%E3%81%AB%E6%97%A9%E3%81%8F%E3%81%AA%E3%81%A3%E3%81%9F/

### ユニークインデックス

```
ALTER TABLE landing_pages ADD UNIQUE(id)
```

これをつけておくことで、当該カラムにおいて、値が重複して出現しなくなる（NULLは除く）。すなわちレコード挿入、更新時にすべての値を調べて同じ値が既に存在しないことを確認することになる。


### Indexの削除

```
ALTER TABLE table_name DROP INDEX index_name;
```

## Indexの使われるとき使われない時
### 使われるとき
* フィールド値を定数と比較するとき (WHERE name = "hogehoge" )
* フィールド値全体でJOINするとき ( WHERE a.name = b.name )
* フィールド値の範囲を求める時 >,
* LIKEで文字列の先頭が固定な時
* MIN(), MAX() (複数要素indexの同一first fieldでsecond fieldのmin,max でも有効)
* 文字列のプレフィックスをもとにしたORDER BY, GROUP BY
* WHEREのすべてのフィールドがindexの一部の場合 (DBまったく参照されず)

### 使われない時
* LIKEがワイルドカードで始まる時
* DB全体を読んだ方が早いとMySQLが判断した時
* 通常はindexはORDER BYには使われない
* WHERE と ORDER BYのフィールドが違う時にはどちらかしか使われない



## Indexが利用されているか調査

### EXPLAINとは
EXPLAINコマンドを使って調査する。EXPLAINは、「mysqlがどのように判断してクエリを実行したかという情報」

使い方は SELECTの直前に `EXPLAIN` をつけるだけ！

EXPLAINは大量データが存在する、本番（もしくはステージング）で実行する事が非常に大事。

### 見方
![107b68f9-b6f0-b07d-0f2b-341aac89469d.png](https://hotstartup.qiita.com/files/1d99fb3c-ba07-30fb-5290-469c4ce54892.png)

### typeを確認
* const・・・PRIMARY KEYまたはUNIQUEインデックスのルックアップによるアクセス。最速。
* eq_ref・・・JOINにおいてPRIARY KEYまたはUNIQUE KEYが利用される時のアクセスタイプ。constと似ているがJOINで用いられるところが違う。
* ref・・・ユニーク（PRIMARY or UNIQUE）でないインデックスを使って等価検索（WHERE key = value）を行った時に使われるアクセスタイプ。
* range・・・インデックスを用いた範囲検索。
* index・・・フルインデックススキャン。インデックス全体をスキャンする必要があるのでとても遅い。
* ALL・・・フルテーブルスキャン。インデックスがまったく利用されていないことを示す。OLTP系の処理では改善必須。

**indexまたはALLを見かけたらすかさずクエリをチューニングしよう。**

### その他
* 確認する項目は「possible_keys」「key」「Extra」
 * possible_keys: SQLを実行する上で利用可能なINDEXとして候補にあがったINDEX
 * key: 実際に選択されたINDEX
 * Extra: 追加情報 Using filesortやUsing temporaryが出たら赤信号
* Using filesortとUsing temporaryは最悪な組み合わせ
* Using filesortはソートに必要な領域がメモリ上に乗り切らずに物理ファイルに書き出しソートを行う。
* Using temporaryはクエリを実行するのにテンポラリテーブルが作られる。
* リアルタイム処理を行うようなシステムの場合はUsing filesortとUsing temporaryが表示されたら改善必須




[（参考）MySQLでクエリチューニングことはじめ](http://tech.aainc.co.jp/archives/4634)
[（参考）漢のコンピュータ道](http://nippondanji.blogspot.jp/2009/03/mysqlexplain.html)
[（参考）MySQL初級者を脱するために勉強してること -INDEX編-MySQL初級者を脱するために勉強してること -INDEX編-](http://qiita.com/kkyouhei/items/e3502ef632c48d94541d)

## 注意点
* Indexを使用すると、検索性能は向上するが、容量が犠牲になる
matplotlibでいい感じの円グラフを書く

#要旨
matplotlib 円グラフを綺麗に書くための自分なりの方法です。
色々調整が必要な以下のようなデータを円グラフで書くと都度調整するようなことになって面倒ですよね。

- ラベルが長かったり、短かったり。
- データが１０個以上あったり、１個だったり。

#code

※細かい解説は時間のあるときに追記します・・・

```py
# coding:utf-8

import matplotlib.pyplot as plt
import matplotlib.cm as cm
import numpy as np

###データ###
data=[1011,530,355,200,40,11]
label=['hoge','fuga','piyo','pugya','dododododododo','ga']

###綺麗に書くためのおまじない###
plt.style.use('ggplot')
plt.rcParams.update({'font.size':15})

###各種パラメータ###
size=(9,5) #凡例を配置する関係でsizeは横長にしておきます。
col=cm.Spectral(np.arange(len(data))/float(len(data))) #color指定はcolormapから好みのものを。

###pie###
plt.figure(figsize=size,dpi=100)
plt.pie(data,colors=col,counterclock=False,startangle=90,autopct=lambda p:'{:.1f}%'.format(p) if p>=5 else '')
plt.subplots_adjust(left=0,right=0.7)
plt.legend(label,fancybox=True,loc='center left',bbox_to_anchor=(0.9,0.5))
plt.axis('equal') 
plt.savefig('figure.png',bbox_inches='tight',pad_inches=0.05)

```

plt.pie(data)だけだとこんな感じなんですが、
![figure_1.png](https://qiita-image-store.s3.amazonaws.com/0/72634/5fb44e94-1116-5441-5a4c-7e0bb9302107.png)

こんな感じになります。
![figure2.png](https://qiita-image-store.s3.amazonaws.com/0/72634/7b68a691-841d-a1ee-5cc3-3601eb95f3d0.png)


#参考サイト
colormapは以下サイトから好きなものを。
http://matplotlib.org/examples/color/colormaps_reference.html
各種オプション
http://matplotlib.org/api/axes_api.html#matplotlib.axes.Axes.pie

http://d.hatena.ne.jp/a-hisame/20150424/1429875458
総統はsortに相当お困りのようとか

タイトルはふざけてますが、内容はまじめです。
とある案件でJava8 stream api使ったらsortでハマりましたという話。

#何が起こったのかとか
簡単に言ってしまうと、ソートされるべき値がソートされずに出力されました。
なぜそうなったのかを考えてみます。

#サンプルとか
ようはこういうことをしようとしたわけです。

```java
IntStream
.range(0, 20)
.parallel()
.sorted()
.forEach(System.out::println);
```
で、結果。

```
12
5
1
0
8
2
4
3
10
16
7
13
18
6
11
14
17
15
9
19
```

見事にばらばらになりました。
この時点でわかる人には原因がわかると思います。
よーく考えればバーにもわかったはずですが、急ぎの仕事だったため、なんで**sortedされてない**の！とパニクってjavapで逆アセンブルして

```
 0: iconst_0
 1: bipush        20
 3: invokestatic  #16                 // InterfaceMethod java/util/stream/IntStream.range:(II)Ljava/util/stream/IntStream;
 6: invokeinterface #22,  1           // InterfaceMethod java/util/stream/IntStream.parallel:()Ljava/util/stream/IntStream;
11: invokeinterface #26,  1           // InterfaceMethod java/util/stream/IntStream.sorted:()Ljava/util/stream/IntStream;
16: getstatic     #29                 // Field java/lang/System.out:Ljava/io/PrintStream;
19: invokedynamic #38,  0             // InvokeDynamic #0:accept:(Ljava/io/PrintStream;)Ljava/util/function/IntConsumer;
24: invokeinterface #39,  2           // InterfaceMethod java/util/stream/IntStream.forEach:(Ljava/util/function/IntConsumer;)V
29: return
```
うわ、意味なかった！

#なぜソートされないのかとか
これ、原因は単純な話でした。

```java
IntStream
.range(0, 20)
.parallel()
.sorted()
.boxed()
.collect(Collectors.toList())
.stream()
.forEach(System.out::println);
```
これだと正しい結果になります。
つまり、**sortedされていなかったわけではなく、sortedされていた**のです。
にも関わらず、sortされていない出力になった理由は**parallel**にあります。
このparallel処理がforEachにも適用され、**System.out::printlnがparallelに実行された**ため、こういう結果になったのではないかと思われます。
実際に確認してみましょう。
今回調べて初めて知ったsequential！
こいつを使います。

```java
IntStream
.range(0, 20)
.parallel()//パラレルを
.sorted()
.sequential()//シリアルに
.forEach(System.out::println);
```
実行すると正しい答えが得られます。
やはりforEachがparallel処理されたためにsortedされていないように見えた、ということで良さそうです。

#なぜこれが初心者向けなのかとか
今回行った手順は
- sortedされていない！
- 本当にsortedされていないのか一度Listにして検証
- sortedされているのに正しい結果が得られない理由を推測
- sequentialを入れたコードを書いて検証
- 確定
となっており、これはバーが普段行っているトラブルシューティング手順そのものです。

何かおかしな結果が得られたときに、一番重要なのはもちろん原因となる場所を特定することですが、まれに「たまたま原因が特定できたように見える」ケースがあります。
今回のケースでも、検証しなければsortedが効いてない→sortedは使えないという結論になってしまっていたでしょう。

**原因を特定した！
それは本当ですか？
検証しましたか？**

このことが頭に入っていることが初心者脱出の一つの鍵ではないでしょうか。
git で https なリモートレポジトリを登録


# 概要

git を利用していて、リモートレポジトリを登録するときに、https を使いたい。

具体的には、プライベートサーバーに立てた gitbucket を remote origin にしたいが、単に

``` shell
git remote add origin https://MY.PRIVATE.HOST/gitbucket/git/USERNAME/PROJECT.git
git push -u origin
```

とすると、

``` shell
error: server certificate verification failed. CAfile: /etc/ssl/certs/ca-certificates.crt CRLfile: none while accessing .....
```

のように表示され、うまく push できない。

# よく見つかる例（だけどセキュリティ的に不安）

上記エラーメッセージをもとにネット検索をしてみると、

``` shell
export GIT_SSL_NO_VERIFY=1 
```

にするとか

``` shell
git config --global http.sslverify false
```

にすると良い、というような情報が見つかる。

でも、それって証明書を無視しているわけだから（しかも場合によっては、すべてのプロジェクトで）、セキュリティ的には不安だし、根本的な解決にはなっていないような気がした。

# で、どうするか

[stackoverflow](http://stackoverflow.com/questions/21181231/server-certificate-verification-failed-cafile-etc-ssl-certs-ca-certificates-c) の記事を参照に、

``` shell
HOST=MY.PRIVATE.HOST
PORT=443

echo -n | openssl s_client -showcerts -connect ${HOST}:${PORT} 2>/dev/null  | sed -ne '/-BEGIN CERTIFICATE-/,/-END CERTIFICATE-/p'
```

として、表示された内容を /etc/ssl/certs/ca-certificates.crt などに書き加える。

参照した記事には「表示された証明書のすべてを追記」みたいなことが書かれているので、その通りにした方がいいと思われる。

今回のサーバーは自己証明書だったので、証明書一つ分の追記で正常に動いた。

・・・結局、自己証明書のサーバーなのでセキュリティ的な問題は残るような気もするが、そこはあえて目を瞑る。


# 参照

- [https://blog.breadncup.com/2011/06/09/skip-git-ssl-verification/](https://blog.breadncup.com/2011/06/09/skip-git-ssl-verification/)

- stack overflow （こちらで解決）
[http://stackoverflow.com/questions/21181231/server-certificate-verification-failed-cafile-etc-ssl-certs-ca-certificates-c](http://stackoverflow.com/questions/21181231/server-certificate-verification-failed-cafile-etc-ssl-certs-ca-certificates-c)