OmniAICreator/Qiita-1.07M huggingface dataset:
Pandoc+Automatorで、MarkdownとTextileを右クリックで相互変換

最近は何かとMarkdownで書かれた情報が多く、Textile文化のRedmineとスムーズに連携しづらいシーンが増えている。(最近のRedmineはMarkdownにも対応しているが、筆者はどう考えてもTextileの方が好きなので変えたくない。)手動でフォーマットをチビチビ書き変えるのは時間の無駄なので、右クリックで書式を変換できるAutomatorを作成した。

---
<dl>
<dt>Pandoc</dt>
<dd>色々なテキストファイルを相互変換できるhaskell製アプリケーション。  
</dd>
<dt>Automator</dt>
<dd>GUIで自動処理をプログラミングできるツールで、MacOSXに最初から入っている。「サービス」や「フォルダアクション」等、シェルスクリプトだけでは作れない自動処理を作成できる。</dd>
<dt>サービス</dt>
<dd>MacOSXのFinderとかで、右クリックメニューの中にある「サービス」以下の項目のこと。Windowsの「送る」に似た便利な機能。</dd>
</dl>
---

# Pandocのインストール

※あらかじめhomebrewのインストールが必要

```zsh
%brew update && brew install pandoc
==> Downloading https://homebrew.bintray.com/bottles/pandoc-1.15.0.6.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring pandoc-1.15.0.6.yosemite.bottle.tar.gz
  /usr/local/Cellar/pandoc/1.15.0.6: 67 files, 74M
```

これまで使ったことがない場合はhaskellも同時にインストールされる。haskellのコンパイルにはとても長い時間がかかる場合があるので、途中で止めてしまわないように注意。

# Automatorでサービスを作成する

`/Applicatoins/Automator.app`を起動して「Textileに変換」という名前で新規書類を作成。書類の種類は「サービス」にする。

![make-service.png](https://qiita-image-store.s3.amazonaws.com/0/48238/fc4fb240-8488-e700-bff2-4446710c7120.png)

左の「ライブラリ」から「シェルスクリプトを実行」を探してタスクに追加し

* 「"サービス"は、次の選択項目を受けとる:」を「書類」に
* 「検索対象:」を「Finder」に
* 「シェル:」をpandocにパスが通ってる普段使いのシェルに設定
* 「入力の引き渡し方法:」を「引数として」に設定
* シェルスクリプトの入力欄に以下を記入

```zsh
pandoc "$1" -o "$1".textile
```


![automator.png](https://qiita-image-store.s3.amazonaws.com/0/48238/65cbebc0-ac4d-270d-bec5-fc9aff743e67.png)


あとは、Finderで拡張子が`〜.md`になっている項目を右クリックして「サービス」から「Textileに変換」を選べば、その場所に拡張子が`〜.textile`のファイルが作成される。

なお、pandocはファイルの拡張子で変換元のフォーマットを判定してくれるので、HTMLやOPML等、他のテキストフォーマットでもTextileに変換できる場合がある。

[Pandocコマンドの例](http://pandoc.org/demos.html)


あとは、同じようにシェルスクリプトの拡張子だけを変えた「Markdownに変換」サービスを作成すれば完了。両者の相互変換が簡単にできるようになる。
rubyでちょっと便利な外部コマンド実行

rubyで外部コマンドを実行する方法はいくつかありますが、ライブラリなしだと標準エラーが取れなかったりと不便ですし、ライブラリを入れると小回りがきかないです。

そこで自分で作ってみました。よかったら使ってください。

### ソース

```rb
require 'fileutils'
require 'tempfile'
require 'tmpdir'
require 'timeout'

class Cmd
  @@timeout = 0
  def Cmd.timeout=(sec) ; @@timeout = sec ; end
  def Cmd.run(*cmd_array)
    raise(Exception,"Command string is nil") if cmd_array.size == 0
    stdout_file = Tempfile::new("#{$$}_light_cmd_tmpout",Dir.tmpdir)
    stderr_file = Tempfile::new("#{$$}_light_cmd_tmperr",Dir.tmpdir)
    pid = spawn(*cmd_array, :out => [stdout_file,"w"],:err => [stderr_file,"w"])
    status = nil
    if @@timeout != 0
      begin
        timeout(@@timeout) do
          status = Process.waitpid2(pid)[1] >> 8
        end
      rescue Timeout::Error => e
        begin
          Process.kill('SIGINT', pid)
          raise(Exception,"Timeout #{@@timeout.to_s} sec. Kill process : PID=#{pid}" )
        rescue
          raise(Exception,"Timeout #{@@timeout.to_s} sec. Fail to kill process : PID=#{pid}" )
        end
      end
    else
      status = Process.waitpid2(pid)[1] >> 8
    end
    return  Result.new(stdout_file,stderr_file,status,cmd_array)
  end

  class Result
    attr_reader :stdout_file, :stderr_file, :status, :cmd_array
    def initialize(stdout_file, stderr_file, status, cmd_array)
      @stdout_file = stdout_file
      @stderr_file = stderr_file
      @status = status
      @cmd_array = cmd_array
    end
    def stdout  ; File.read(@stdout_file) ; end
    def stderr  ; File.read(@stderr_file) ; end
    def to_h    ; {:cmd_str => cmd_str,:stdout => stdout, :stderr => stderr, :status => status} ; end
    def cmd_str ; @cmd_array.join(" ") ; end
    def to_s    ;to_h.to_s ; end
  end
  class Exception < StandardError ; end
end
```

### 使い方

Cmd.runにコマンドを渡すだけです。

```
ret = Cmd.run("uname -r")
p ret.stdout
=> "2.6.32-220.el6.x86_64\n"
p ret.stderr
=> ""
p ret.status
=> 0
```

タイムアウトも仕込めます

```
Cmd.timeout = 1 
Cmd.run("sleep 2");
=> 例外発生してくれます
```

長い標準出力でも、一時ファイルに吐かれているの、後から少しずつ読めます。

```
ret = Cmd.run("rpm -qa")
while line = ret.stdout_file.gets
  puts line
  sleep 1
end
=> 1行づつ出力
```
データベースクラスを作成するぞ - vol.3

#まえがき
とりあえず現段階では、あるメソッドから
メインとなるメソッドの呼び出しまで、なんとかOK。

その中で"発行したいsql文"を、
どーにかこーにか作成できた状態。
(いやー大問題を抱えているんですけどね…。)

#作成中DBクラス
```php:DBクラス
class DB {
    private $_instance;
    Private $_pdo;

    private function __construct() {
        $dsn="mysql:dbname=【データベース名】;host=【ホスト名】;charset=utf8";
        $user="【ユーザー名】";
        $pass="【パスワード】";
        try {
            $this->_pdo= new PDO($dsn, $user, $pass);
            echo 'coonected!';
        } catch(PDOException $e) {
            die($e->getMessage());
        }
    }

    public static function getInstance() {
        if(!isset(self::$_instance)) {
            self::$_instance = new DB();
        }
        return self::$_instance;
    }

    public function mainAction($action, $table, $where = null) {
        if(isset($where)) {
            $field = $where[0];
            $operator = $where[1];
            $value = $where[2];
            // *1
            $sql = "{$action} FROM {$table} WHERE {$field} {$operator} {$value}";
        } else {
            // *2
            $sql = "{$action} FROM {$table}";
        }
    }

    public function select($table, $where = null) {
        $this->mainAction('SELECT *', $table, $where);
    }

    public function delete($table, $where = null) {
        $this->mainAction('DELETE', $table, $where);
    }
}

// 呼び出し例
DB::getInstance()->select('【テーブル名】', array('【フィールド名】', '【演算子】', '【値】'));
```

"SELECT" と "DELETE" を、どこで入れようかなーと
ちょっと迷いましたが、後になるとmainAction()が
大きくなりそうだったので、早い目にいれておきました。

ここまでで、なんとなーく形にはなってきた…よね。きっと。

#あとがき
ただし、(\*1)(\*2)のsql文が、大きな問題を抱えております。

このままの状態で、sql文を通してしまうと
噂の**"SQLインジェクション"**の恰好の的。な、はず。

その為に、プリペアドステートメントを
実行することになるのですが…。

んーやっぱり、別のfunctionを作成した方が良いのかな…。
あまり１箇所にまとめ過ぎるとダメだ、って聞いたような気もするし。

ということは…

あるメソッドを呼び出すと、(今後作成していくinsertやupdateも含めて)
いくつかのメソッドを通っていき、最終的に "A" or "B" 
どちらかのメソッドで終了(実行)となりそう、かな。
iBMSC Clipboard Data xNT


Example
=======

```
iBMSC Clipboard Data xNT
5 120 10000 0 0
6 168 10000 0 0
7 192 10000 0 0
8 216 10000 0 0
9 264 10000 0 0
10 312 10000 0 0
11 360 10000 0 0
4 408 10000 0 0
```


Magic String
============

```
iBMSC Clipboard Data xNT
```


Row
===

```
<channel> <time> <value> <length> <flag>
```

Channel
-------

| Channel | Description |
| -------:| ----------- |
| 4 | BPM |
| 5 | KEY1 |
| 6 | KEY2 |
| 7 | KEY3 |
| 8 | KEY4 |
| 9 | KEY5 |
| 10 | KEY6 |
| 11 | KEY7 |


Time
----

- By default, time in ticks (PPQN = 48; 1 measure = 192).


Value
-----

- Keysound
    - Value &times; 10000. For example, B1<sub>16</sub> = 397<sub>10</sub> &rarr; 3970000.


Length
------

- For long notes, length in ticks.
- If it is a short note, this is 0.


Flag
----

| Flag | Description |
| ----:| ----------- |
| 0 | Normal |
| -1 | Hidden |
Virtualenvの使い方

２通りの方法を記述します。

* virtualenvのみ利用(「Only virtualenv」)
* virtualwrapper も利用(「With virtualenvwrapper」)

### 表記上の注意

```
# : rootで実行。
$ : 一般ユーザ(root以外)で実行。
```


# 仮想環境の構築
#### Only virtualenv
カレントディレクトリに構築します。

```
$ virtualenv --python=/usr/local/bin/python project-env
```

#### With virtualenvwrapper
[Python3.4 インストール](http://qiita.com/masa0422/items/6471bc28ae62d2a3548c#virtualenvwrapper)で設定した$WORKON_HOMEの配下に構築します。

```
$ mkvirtualenv --python=/usr/local/bin/python project-env
```

# 仮想環境の活性化(activate)
仮想環境を利用する前に実行します。
#### Only virtualenv

```
$ cd /var/www/python
$ source ./project-env/bin/activate
```
#### With virtualenvwrapper

```
$ workon project-env
```
ホームディレクトリ配下の仮想環境project-envが活性化します。

# 仮想環境の不活性化(deactivate)
仮想環境から抜けるときに実行します。
#### Only virtualenv & With virtualenvwrapper

```
$ deactivate
```
マークダウンビュワー Markn v0.1.1 リリース

Electron製のマークダウンビュワーアプリ [Markn v0.1.1](https://github.com/minodisk/markn/releases/tag/v0.1.1) をリリース。リアルタイムプレビューのCPUコストが低めなのが特徴。とりあえずビュワーとして最低限ぽい機能を実装したのでマイナーバージョンを上げてリリースした。

![demo.gif](https://qiita-image-store.s3.amazonaws.com/0/6752/6f9f1d79-0a4f-29eb-f6f3-77065c44cce3.gif)

こういうアイコン -> ![icon_48x48.png](https://qiita-image-store.s3.amazonaws.com/0/6752/e594c91c-3749-264f-675d-efc8b629c9da.png)

## 作ったきっかけ

<blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/minodisk">@minodisk</a> Atom最低のマークダウンビュワーだった <a href="http://t.co/qitOXRi0X8">pic.twitter.com/qitOXRi0X8</a></p>&mdash; 炭水化物 (@minodisk) <a href="https://twitter.com/minodisk/status/616148193903026176">2015, 7月 1</a></blockquote>

### この四日間に何があったのか？

5000行オーバーのマークダウンを編集しようとしたらフリーズした。Atomのマークダウンプレビューはファイルに変更がある度にマークダウンをHTMLにコンパイルし全要素を再レンダリングするのでそのコストが半端無く、CPU使用率が激増した模様。[^atom]

[^atom]: 扱っているマークダウンの大きさが異常なだけで、常識的な大きさのマークダウンだとすごく良いマークダウンエディタだと思う。

## 目指してるところ

- 大きなマークダウンを編集しながらプレビューできる
- 大きなマークダウンを縦断するための検索機能がある[^search]

[^search]: 現状、大きなファイルで検索すると重いという課題がある。

## 技術的な話

- [atom/electron](https://github.com/atom/electron): はじめ Chrome extension を書いていたがファイルシステムがないのでローカルファイルの監視がすごくつらいことになった。Node+Chromium が手軽にユーザー環境にダウンロードできる現代すごい。
- [facebook/react](https://github.com/facebook/react): リアルタイムな更新性の高いHTMLをレンダリングするのに最適な答えと思う。
- [facebook/flux](https://github.com/facebook/flux): やってみてる。冗長という感じは自分はあまりしない。イベントリスンとメソッドコールがこんがらがりがちなアプリケーションのコードが超絶に整頓されるのでやって良かったという感想しかない。
- [mizchi/md2react](https://github.com/mizchi/md2react): [Kobito for Windows](http://kobito.qiita.com/win) で使われているマークダウンをReactエレメントに変換してくれるやつ。これがなかったらアプリを作ろうとは思わなかった。
- [babel/babel](https://github.com/babel/babel): ES6とES7のasync/awaitで書いてみている。非同期処理を見通しよく書けて楽しい。CoffeeScriptからJavaScriptに戻ってきたのだけど、ArrowFunctionとかあるのでそんなに書き味も悪くないという感想。[^coffee]

[^coffee]: 悪くないという程度で CoffeeScript のが圧倒的にサクサク書けるのだけど。

## まとめ

- react+md2react 最高だった。
- [minodisk/markn](https://github.com/minodisk/markn) へのプルリクお待ちしております。
AppVeyor で Perl のテストを実行する

# AppVeyor とは?
[AppVeyor](http://www.appveyor.com) は OS に Windows を使っていることを特徴とした CI (継続的インテグレーション) サービスです。[Travis CI](http://www.appveyor.com) と同じように、オープンソースプロジェクトでは、無料で使用できます。

# なぜ Windows で Perl を CI するのか ?
オープンソースプロジェクトでは、Perl の CI として、Travis CI が一般に使われています。Travis CI は Linux (Ubuntu) で動作しており、Build Matrix も使え、CI としての機能は十分です。

しかし、**プロジェクトの開発者や、ライブラリの利用者は、Unix 系 OS を利用している人だけとは限りません**。Unix 環境であることを前提としたコードは、Windows では正常に動作しません。そして、意図せず、そのようなコードを産んでしまう可能性があります。そのような事態を、Windows でも並行して CI することにより、未然に防ぐことができます。

# AppVeyor の特徴

- オープンソースプロジェクト 無料
- GitHub 連携が可能
- appveyor.yml にビルドスクリプト記述し実行
- Windows 系 OS (Windows Server 2012)
  - 毎回クリーンな Virtual Machine を起動し、その中で実行
- 管理者権限 (Administrators グループ) を持つユーザーで動作
- Chocolatey が利用可能 (Windows 版パッケージマネージャー)
  - 必要なソフトウェアをコマンドから簡単にインストール可能


# AppVeyor の利用方法

まず、AppVeyor に GitHub アカウントでサインアップし、有効にします。そして、appveyor.yml を対象のリポジトリに配置すれば OK です。

# 設定ファイルの作成
AppVeyor でテストを実行するには、appveyor.yml を作成する必要があります。実際に動作する appveyor.yml のサンプルを以下に載せますので、プロジェクトに応じてカスタマイズしてください。

```yaml
branches:
  # ビルドするブランチを制限する場合
  only:
    - master

init:
  - git config --global core.autocrlf input

install:
  # Chocolatey から任意バージョンの Perl をインストールする
  # https://chocolatey.org/packages/StrawberryPerl
  - choco install strawberryperl -version 5.20.1.1
  - SET PATH=C:\strawberry\c\bin;C:\strawberry\perl\site\bin;C:\strawberry\perl\bin;%PATH%

  # Carton を利用可能にする
  - cpanm install Carton
  - carton install

build: off

test_script:
  # テストを実行する
  - carton exec prove --norc --rc=.proverc -r t

cache:
  # Carton のインストール先をキャッシュする
  # 実用的な時間でテストするためには必須
  - local

# 高速化のために、レポジトリをシャロークローン (--depth 1) する
shallow_clone: true
```

## 参考
- [appveyor.yml Reference](http://www.appveyor.com/docs/appveyor-yml) (公式)


## 注意点
- コマンドは、cmd.exe 経由で実行されます。ps: と行頭に付けた場合、PowerShell 経由で実行されます。
- Unix 環境で用いている & (バックグラウンド実行) などは Windows では利用できないので、注意してください。

# その他
AppVeyor はビルドまでの時間、ビルドの時間が Travis CI と比較すると著しく遅いです。そのため、ビルドするブランチを master, develop に絞ったり、他の CI と併用するなどして利用することをオススメします。

# 関連記事
- [AppVeyor で Node.js を CI する](http://qiita.com/pine613/items/b1b0ec71b959f639fa38)
[翻訳] Elixirで書く関数型FizzBuzz

Michał Muskałaさんの2015年8月10日付のブログ記事[Functional FizzBuzz in Elixir](http://michal.muskala.eu/2015/08/10/functional-fizzbuzz-in-elixir.html)の翻訳です。

文中にもありますが、Erlangでちょっと変わったFizzBuzzの書き方をした人がいてそれをElixirに移植したという記事です。面白かったんで翻訳してみました。

普通は3または5またはその両方で割り切れるか剰余演算子で調べて Fizz/Buzz/FizzBuzz を出し分けるんで、パターンマッチと再帰(そもそもループがないから)のサンプルにしかならないんですけどね、FizzBuzz。関数型の例なのかよ！と言われるとどうなんでしょうか(笑)

あと、これ、Clojureでも同じように書けそうだなあ…と思ったらその通りで書けました(おまけ参照)

-----

前回のSteven ProctorさんのErlang Thursday - [関数型 fizzbuzz](http://www.proctor-it.com/erlang-thursday-bonus-functional-fizzbuzz/)からインスパイアされたんでどうやったら剰余演算子を使わないでFizzBuzzをElixirっぽく実装できるかどうかやってみました。

こんな感じかな：

```ex
defmodule FizzBuzz do
  def print(n) do
    generate
    |> Stream.take(n)
    |> Stream.each(&IO.puts/1)
    |> Stream.run
  end

  def generate do
    fizzes = Stream.cycle(["Fizz", "", ""])
    buzzes = Stream.cycle(["Buzz", "", "", "", ""])

    Stream.zip(fizzes, buzzes)
    |> Stream.map(&concat/1)
    |> Stream.with_index
    |> Stream.map(&translate/1)
    |> Stream.drop(1)
  end

  defp concat({f, b}), do: f <> b

  defp translate({"",   n}), do: to_string(n)
  defp translate({str, _n}), do: str
end
```

おおよそのところは見ての通りですけど、独自性もあるのでそこを説明します。Erlangでの実装の問題点のひとつとしては`cycle`のような遅延評価のストリーム及び関数がないことだと思っていますが―Elixirでは`Stream`モジュールがあるのでこれは問題になりません。一方でErlangでは`lists:zipwith/3`[^1]が使えるので項目を合成して結合するのをいちどきに行うことが可能です。Elixirでは2ステップが必要です―まず`Stream.zip/2`(または`Stream.with_index/1`)を使い、直後に結果のタプルをマップして必要なフォーマットにします。
[^1]: 例：lists:zipwith(fun(X,Y) -> X+Y end, [1,2,3], [4,5,6]).はリスト[5,7,9]を返します。lists:zip([1,2,3],[4,5,6]).が[{1,4},{2,5},{3,6}]という２項タプルのリストを返すんでそのタプルの2つの要素を第１引数の無名関数で演算する感じです。

`Stream.drop/2`の呼び出しはElixirのインデックスが`0`から始まるのに*fizzbuzz*の結果の最初の項目は`1`から始まって欲しいために必要となっています。これを避けるには第３のストリームを生成してそれが`1`から始まる番号を返すようにして、それを合成するのも手ですね：

```ex
def generate2 do
  fizzes  = Stream.cycle(["", "", "Fizz"])
  buzzes  = Stream.cycle(["", "", "", "", "Buzz"])
  indexes = Stream.iterate(1, &(&1 + 1))

  Stream.zip(fizzes, buzzes)
  |> Stream.map(&concat/1)
  |> Stream.zip(indexes)
  |> Stream.map(&translate/1)
end
```

どっちがより明快で理解しやすいかは私にはわかりかねますが…。

---
おまけ：Clojureで書いてみた

割と簡単に書けました。とはいえしばらくClojure書いてなかったからもっといいやり方がありそうですが…

```clj
(def fizzes (cycle ["" "" "Fizz"]))
(def buzzes (cycle ["" "" "" "" "Buzz"]))
(def indexes (iterate inc 1))
(defn translate [x,n]
  (cond (= x "") (str n)
        :else x
        )
  )

(defn print-fb [n]
  (take n (map #(translate %1 %2) (map #(str %1 %2) fizzes buzzes) indexes))
  )

````
ドラッグ＆ドロップのサンプルコードを試してみました

## はじめに

『独習JavaScript』を読んで、マウスイベントを試してみました。マウスイベントのサンプルコードにドラッグ＆ドロップのサンプルコードがあり、それを試してみました。この記事では、試してみて気付いたことを紹介したいと思います。

## ソースコード＆気付いたこと

まずは、index.htmlを見てみます。ここでの注意点は、style属性にposition: absoluteを指定していしているところです、position: absoluteを指定しない場合、topとleftの値は、更新されますが、適用されません。

position: absoluteはサンプルコードにもありましたが、なるべくサンプルコードを見ないようにして自作のメモを頼りに実装したので、少しハマりました。

```index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="app.js"></script>
</head>
<body>
  <img id="test" src="circle.svg" style="position: absolute; height: 60px; width: 60px;" alt="">
  <script>
    var e = document.getElementById('test');
    draggable(e);
  </script>
</body>
</html>
```

次に、app.jsを見てみます。ここでの注意点はmouseMove関数で30を引いているところです。これによって、マウスの位置とドラッグ＆ドロップの対象の中心が同期されるようになります。

preventDefault関数を使わない場合、既存のイベント処理が実行され、バグみたいな動きになることがありました。例えば、ドロップしたのに、ドラッグしたままになってしまうことがありました。

```app.js
function draggable(elem) {
  elem.onmouseover = function (e) {
    e.preventDefault();
    elem.style.backgroundColor = "chartreuse";
  };

  elem.onmouseout = function (e) {
    e.preventDefault();
    elem.style.backgroundColor = "white";
  };

  elem.onmousedown = function (e) {
    e.preventDefault();
    document.onmousemove = mouseMove;
  };

  elem.onmouseup = function (e) {
    e.preventDefault();
    document.onmousemove = null;
  };

  function mouseMove(e) {
    elem.style.left = e.clientX - 30 + 'px';
    elem.style.top = e.clientY - 30 + 'px';
  }
}
```

最後に、circle.svgを見てみます。特に、気を付けることはないかもしれません。imgタグのsrc属性でsvg画像を埋め込むくらいでしょうか。

```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="30" cy="30" r="30" fill="blue"/>
</svg>
```

今回は使いませんでしたが、rectタグも試してみました。

```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="300" y="300" height="10" width="20" fill="yellow"/>
</svg>
```

## まとめ

サンプルコードを少し改良できたと思います。

mouseMove関数で30を引いているところは他の画像では使えないので、もう少し手を入れたほうが良かったかもしれません。
無償版ESXiでの仮想マシンバックアップ(備忘録的メモ)

無償版ESXiはサードパーティ製品が使用できないため、仮想マシンのバックアップを取得する際には、vSphereClientでデータストアからダウンロードするか、SSHで接続してコマンドで取得するしかない。



今回はESXi環境の仮想マシンのバックアップをコマンドで取得した際のメモを記載する。

・2017/02/19追記
サードパーティ製バックアップ製品ですが、以下の製品は無償版ESXiでもバックアップが可能なようです。
実際に試していないですがトライアル版もあるようなので、時間あるときに試そう。
**Acronis Backup 12 Virtual Host License**

#前提条件#
・仮想マシンは停止(コールドバックアップ)
→スナップショットを取得すれば、起動中でもバックアップ可能
・ESXiの「SSH」を起動
#環境#
・ESXi5.5(無償版)
・バックアップ対象仮想マシン名:TEST1
・バックアップ先は /vmfs/volumes/datastore2/BackupTEST1/配下
・ターミナルソフトの用意(私はTeraTermを使用)
#内容#

##事前作業##
**仮想マシン一覧の取得**
vim-cmd vmsvc/getallvms

ここでバックアップ対象の[vmid]をメモする。後述の仮想マシンの停止・起動に使用する。

**仮想マシンのシャットダウン**
vim-cmd vmsvc/power.shutdown [vmid]
##バックアップ作業##
**構成ファイル群のバックアップ**
今回の対象ファイル
TEST1.vmsd
TEST1.vmxf
TEST1.vmx
例)
cp -i /vmfs/volumes/datastore1/TEST1/TEST1.vmx /vmfs/volumes/datastore2/BackupTEST1/TEST1.vmx


**仮想ディスクのバックアップ**
vmkfstools -i /vmfs/volumes/datastore1/TEST1/TEST1.vmdk -d /vmfs/volumes/datastore2/BackupTEST1/TEST1.vmdk



##バックアップ後の作業##
**仮想マシンのパワーオン**
vim-cmd vmsvc/power.on [vmid]

OSの動作確認で問題がなければ終了。

##ESXiをバックアップする際には以下を参照##
vSphere コマンドライン インターフェイスと vSphere PowerCLI を使用した ESXi 構成のバックアップとリストア (2092886)
http://kb.vmware.com/selfservice/microsites/search.do?language=en_US&cmd=displayKC&externalId=2092886


###最後に###
今回はとりあえずバックアップが目的なので、リストア手順も加えるともう少し詳しく書かないと...


以上。
VirtualBox5.02でvagrantやろうとしてハマったのでメモ

# vagrint初挑戦でハマったのでメモ。
結果的には、VirtualBox 5.02のバグっぽい。


## 症状
`vagrant up`のログ

```
$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Clearing any previously set forwarded ports...
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
==> default: Forwarding ports...
    default: 22 => 2222 (adapter 1)
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
The guest machine entered an invalid state while waiting for it
to boot. Valid states are 'starting, running'. The machine is in the
'poweroff' state. Please verify everything is configured
properly and try again.

If the provider you're using has a GUI that comes with it,
it is often helpful to open that and watch the machine, since the
GUI often has more helpful error messages than Vagrant can retrieve.
For example, if you're using VirtualBox, run `vagrant up` while the
VirtualBox GUI is open.

The primary issue for this error is that the provider you're using
is not properly configured. This is very rarely a Vagrant issue.
```
VirtualBoxのエラー情報
```
Failed to load VMMR0.r0 (VERR_VMM_SMAP_BUT_AC_CLEAR). 
終了コード : NS_ERROR_FAILURE (0x80004005)
コンポーネント: ConsoleWrap
インターフェース: IConsole {872da645-4a9b-1727-bee2-5585105b9eed}
```

## 原因
おそらくこれ
https://www.virtualbox.org/ticket/14412

## 対応方法
古いバージョンにインストールしなおし。探すのに苦労したが、
https://www.virtualbox.org/wiki/Download_Old_Builds
にあっった。
5.0でも大丈夫なのかもしれないが、5系自体が信じられなくなったので4.3を入れたら直った。
Google翻訳ツールで、ページ遷移した際に言語引き継ぎされない時

## 起きたこと

Google翻訳ツール [https://translate.google.com/manager/website/](https://translate.google.com/manager/website/) を同ホスト下の複数ページに設定している状態で、

全てのテキストに``class="notranslate"``を指定したり、
画像のみでテキストを含まないページを経由すると、 

翻訳ツールを設置しているページであっても、
次に遷移したページ上の、翻訳が期待されるテキストの翻訳が行われない。

## 原因

Google翻訳ツールは、
Coookieで各URL下ページの翻訳状況を把握してるんだけど、

```
name: 'gootrans'
value: '/en/ja'
 (英語ページを日本語に翻訳するとこのようなCookieが保存される)
```

どうやら翻訳すべきテキストが一文字も見つからないと、
このCookieを消してしまう仕様になっているみたい。

_TODO : 公式ドキュメントの記述を見つけたい_

## 一つの解決方法
翻訳させるテキストを用意する。


```html
<span style="visibility:hidden">translate text</span>
```

これはダメ。

```html
<span style="display:none">translate text</span>
```
CentOS 6.6 に Python3.4 をインストール

CentOS 6.6上に、下記をインストールします。

* Python (version: 3.4.3) 
* Easy_install
* Pip
* Virtualenv
* Virtualenvwrapper

### 表記上の注意

```
# : rootで実行。
$ : 一般ユーザ(root以外)で実行。
```

#  Python3.4
今回はソースからビルドしてインストールします。
#### 1. 前準備
まずは関連するモジュールのインストールです。

```
# yum groupinstall "Development tools"
# yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel
```
#### 2. Pythonソースインストール
ソースをダウンロードして、configure → make → make altinstallします。

```
# cd /usr/local/src
# wget https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz
# tar -zxvf Python-3.4.3.tgz 
# cd Python-3.4.3
# ./configure --prefix=/usr/local/python
# make && make altinstall
```
#### 3. 共有ライブラリに追加
システム全体からpythonライブラリが認識できるようにします。

```
# echo "/usr/local/python/lib" >> /etc/ld.so.conf
# ldconfig
```
#### 4. /usr/local/bin/配下にシンボリックリンクを作成
PATHが通っている/usr/local/bin/配下に、インストールしたpython3.4のリンクを貼っておきます。

```
# ln -s /usr/local/python/bin/python3.4 /usr/local/bin/python
```
##### <<注意>>
PATHの値は、/usr/local/binが初めに来るように設定してください。

#### 5. 確認
pythonでpython3.4が呼び出せるはず。

```
# /usr/local/python/bin/python3.4 -V
# python -V
```
上記が同じ結果だったら、正常にインストール出来ています。

# Easy_Install
Easy_Installでpipを入れるので、インストールします。

```
# cd /usr/local/src
# wget https://pypi.python.org/…/s/setuptools/setuptools-18.0.1.zip
# unzip setuptools-18.0.1.zip
# cd setuptools-18.0.1
# /usr/local/bin/python setup.py install
# ln -s /usr/local/python/bin/easy_install /usr/local/bin/easy_install
```
# Pip

```
# /usr/local/bin/easy_install pip
# ln -s /usr/local/python/bin/pip /usr/local/bin/pip
```
# Virtualenv
pythonの仮想環境を作るためのライブラリです。

```
# pip install virtualenv
# ln -s /usr/local/python/bin/virtualenv /usr/local/bin/virtualenv
```
# Virtualenvwrapper
virtualenvの仮想環境を一括管理する拡張機能です。
#### 1. インストール

```
# pip install virtualenvwrapper

```
#### 2. 設定
各ユーザごとに設定が必要です。

```
$ vim ~/.bashrc
if [ -f /usr/local/python/bin/virtualenvwrapper.sh ]; then
export WORKON_HOME=$HOME/.virtualenvs
source /usr/local/python/bin/virtualenvwrapper.sh
fi
```
# 参考文献
[python3.3をCentOSにインストール](https://librabuch.jp/2013/01/python33-install/)
[Virtualenvwrapperの導入](http://qiita.com/_rdtr/items/5f3a9a9e2cb5a24f284e)
Ubuntu 14.04.3 LTSでAVRマイコン開発

Atmel studioがクソ重い。
Eclipseは使い物にならない。
それにプログラミング作業は慣れた*nix系でやりたい。
仕事場から暇を見つけてはsshを家に張ってマイコン開発に勤しみたい。
もちろん可能だ。

スムーズにいけば10秒で導入できる。

必要なパッケージを導入
---------------
binutils-avr gcc-avr avr-libc avrdude

binutils=avr、gcc-avr、avr-libcは名前の通りavrマイコン向けのプログラミングに必要。
avrdudeはライターを制御する。

だいたいのディストリで`apt-get`できる。

```
sudo apt-get install binutils-avr gcc-avr avr-libc avrdude
```

avrdudeを試す
------------

今回は、Atmel AVR ISP mkIIとAtmel ATmega328Pを使用する。

マイコンにmkIIを繋ぎ、usbポートにmkIIを繋ぐ。
mkIIはVccを供給*しない*ので、別途電源を確保する事。

次のコマンドを入力する。

```
sudo avrdude -c avrisp2 -P usb -p m328p -v
```

詳細は`man`で確認する事。
正しくmkIIが動いていれば、メモリ領域の統計情報等が表示される。

ubuntu等では、デフォルトではusbデバイスへのアクセスにroot権限が必要。
この設定の変更については次の節を参考。

usbデバイスの権限を変更する
------------------------

`sudo`する手間を惜しまなければこの節は必要ない。

権限を変更するためには、udevを利用する。
udevはLinuxにおけるデバイス管理ツール。
udevはハードウェアの追加や削除を検知してイベントを発行し、ユーザーは各イベントに対する動作を設定できる。
今回の場合は、mkIIが追加された時に権限を変更すれば良い。

そのために次のudevルールを追加する。

```
sudo vim /etc/udev/rules.d/60-avr.rules
```

内容は以下の通り

```
SUBSYSTEM!="usb", ACTION!="add", GOTO="avrend"

ATTR{idVendor}=="03eb", ATTR{idProduct}=="2104", MODE="0666"

LABEL="avrend"

```

意味は「usbデバイスが追加された時に、追加されたデバイスのベンダーIDが"o3eb"(Atmelに対応)かつ、プロダクトIDが"2104"(mkIIに対応)ならば、権限を"0666"に設定」

mkII以外のライタを扱いたい時は、`udevinfo`や`udevadm`によって`idProduct`を確認する事。
usbデバイスの場合は/sys/bus/usb/devices/の中にデバイスファイルがある。

権限をより細かく設定したい場合は、udevルールについて調べる事。

Cプログラムをコンパイルする
-----------------

`avr-gcc -mmcu=atmega328p ./test.c -o ./test.out`

プログラムを書き込む
-----------------

`avrdude -c avrisp2 -P usb -p m328p -U flash:w:test.out:e -v`

意味は、「flashメモリにelfフォーマット(e)のtest.outファイルを書き込む(w)」。

昔はhexファイルしか書けなかったけど、今はelfを与えるだけで内部的に変換してくれる。

ボーレートの細かい設定等をしたい人はmanを参照。

その他
------
サポートされている部品のリストを表示するには

```
avrdude -p ?
```

サポートされているライタのリストを表示するには

```
avrdude -c ?
```

困ったらとにかく`man`

番外: clang_completeで補完する
---------------------

通常のc/c++プログラムを補完する際との違いは2点ある。

1.clang_completeにgcc-avrが参照しているインクルードパスを教える。

2.マイコンの種類を教えるマクロをdefineする。

例えば、次の様なコマンドを.vimrcに食わせれば良い。

```
let g:clang_user_option = "-I/usr/lib/avr/include/ -D__AVR_ATmega328P__"
let g:clang_complete_macros = 1
```

avr/includeの場所はシステムによっては異なるので、avr-gcc -v等で確認する。
自分の使いたいマイコンに対応したマクロを調べるには、avr/io.h等を見ればわかる。
Chef bashリソースでコマンドが実行されない場合

Chefのbashリソースではプロパティにcodeを使い、
executeリソースではプロパティにcommandを使います。

```rb:bash
bash 'myscript' do
  code 'echo bash code'
end
```
```rb:execute
execute 'myscript' do
  command 'echo execute command'
end
```
ここでbashリソースにcommandプロパティを使ってしまうと、
コマンドが実行されないうえwarnメッセージが出まくります。

```rb:bash+command
bash 'myscript' do
  command 'echo bash command'
end
```

Chef 13以降はbashリソースがcommandを受け取るとエラーになるようです。
https://github.com/chef/chef/issues/3244
ViewModelでStyleを指定する方法。StyleConverterでFindResource汚染を回避

##はじめに
MVVMで永遠に付いて回る悩みの一つは、Viewの持ち物であるデザインリソースをViewModelといかに切り離すかです。
例えば、カラーやブラシなどロジックとは関係ないリソースは、ViewModelでは持たずリソースのキー名だけで管理できるのが理想です。
WPFには、FindResource関数が用意されていますが、コイツは、リソース本体を読み込んで返すという基本的な関数なためViewModelに、重たいリソース情報を持つことになります。
また、Viewの参照も必要とするためMVVMとは相性の良くない機能です。

##Styleを活用する
WPFには、Styleという機能が用意されています。
ご存じない方に一言で説明するならば、プロパティ値の集合がStyleです。
Xamlのタグに、Windth="100"というようにプロパティ設定を行いますが、このWindth="100"という部分だけを纏めたものがStyleです。
そのためターゲットとなるオブジェクトによって、設定できるプロパティ名は変わってきます。
ViewModelから状態によって、見た目を変化させるというプログラムの多くは、Styleを切り替える事で実現出来るはずです。

##StyleConverterを制作する
疎結合を保つためViewModelには、リソースのキー名だけを持つようにします。
Xamlの受け手のStyle=""は、Styleクラスですので、そのままバインディングできません。
このように、バインディング値を変換しなければならない時には、Converterという仕組みを利用します。

```csharp:StyleConverter.cs
public class StyleConverter : IMultiValueConverter 
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        FrameworkElement targetElement = values[0] as FrameworkElement;
        string styleName = values[1] as string;

        if (styleName == null)
        {
            return null;
        }
        Style newStyle = (Style)targetElement.TryFindResource(styleName);

        return newStyle;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
```
上記のコードが、StyleConverterの実装例です。

##呼び出し例
呼び出しは、マルチバインディングを使っています。
1つ目が、リソースを格納しているオブジェクトへの参照で、２つ目が、キー名となります。
ViewModelの記述は、割愛します。

```xaml:Test.xaml
<Button>
    <Button.Style>
        <MultiBinding>
            <MultiBinding.Converter>
                <converters:StyleConverter />
            </MultiBinding.Converter>
            <MultiBinding.Bindings>
                <Binding RelativeSource="{RelativeSource Self}" />
                <Binding Path="ButtonStyle" />
            </MultiBinding.Bindings>
        </MultiBinding>
     </Button.Style>
</Button>
```
【Blender】バージョンアップ時に "Load X.XX Settings" （前バージョンからの設定引継ぎ）を押しそびれた時の対処方法

　新バージョンインストール後の初回起動時は、スプラッシュスクリーンに "Load X.XX Settings" などという項目が現れます。これをクリックすると前バージョンでの個人設定や追加したアドオンを新バージョンに引き継ぐことが出来ます。
![スクリーンショット 2022-12-08 21.19.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13938/e9fd2cc2-86d8-fdd8-8f23-0af5f775d405.png)

　改めて同じ環境を作るのは面倒なので便利なのですが、うっかり押しそびれてしまうことがあります。そんな場合には次のようにすると改めて、"Load X.XX Settings" を表示させる事が出来ます。

# 設定ファイルの保存場所の確認
　まず、こちらの [Blender's Directory Layout](https://docs.blender.org/manual/ja/3.4/advanced/blender_directory_layout.html#blender-directory-layout) の各 OS でのユーザー設定の保存場所を確認して下さい。

# Windows の場合
　Windows であれば `%USERPROFILE%\AppData\Roaming\Blender Foundation\Blender\` 以下にバージョン毎の設定が保存されているので、バージョン番号を除いたパス名をエクスプローラーにコピペします。
![コメント 2019-12-29 110940.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13938/688e5e84-2cfd-ed02-3452-ff89d4ca6330.png)

# macOS の場合
　macOS であれば `/Users/$USER/Library/Application Support/Blender/` 以下にバージョン毎の設定が保存されているので、バージョン番号を除いたパスまで Finder やターミナルで移動します。

# 設定ファイルを削除する
　どの OS であっても、各バージョン毎にフォルダが分けられていますので、自分がインストールしたバージョン番号のフォルダを削除、または（念のためのバックアップとして）名前の変更をします。

# Blender を再起動する
　改めて Blender を起動すれば "Load X.XX Settings" が表示されます。今度は忘れずにクリックをしましょう。
GVM で go1.5 のインストール

[Go 1.5 出た！ - Qiita](http://qiita.com/spiegel-im-spiegel/items/98e91bae292da5bb2166)

go1.5 が、ようやくリリースされたようですね。
ますます、使いやすくなりそうで楽しみです。

[Go 1.5 Release Notes](https://golang.org/doc/go1.5)

# GVM を利用しての go1.5 のインストール手順

go1.5 からは、動作する go1.4 以上がブートストラップに必要になった。

## go1.4.x が使われているのを確認

```
$ gvm list

gvm gos (installed)

   go1.4.1
=> go1.4.2

$ go version
go version go1.4.2 darwin/amd64
```


## ブートストラップに使用する go を GOROOT_BOOTSTRAP に指定して go1.5 をインストール

```
$ env GOROOT_BOOTSTRAP=`go env GOROOT` gvm install go1.5
Installing go1.5...
 * Compiling...
```

## go1.5 を確認

```
$ gvm use go1.5
Now using version go1.5
$ go version
go version go1.5 darwin/amd64
```

gvm で go1.5 をデフォルトにするには：

```
$ gvm use go1.5 --default
```
KotlinでAndroidのassets内のテキストファイルを手軽に読み出す

assetsにテキストファイル入れるじゃないですか。読もうとすると色々面倒くさいじゃないですか。
Kotlinだと手軽に済みます。

```kotlin
val message = getAssets().open("LICENSE.TXT").reader(charset=Charsets.UTF_8).use{it.readText()}
```

Kotlin可愛いよKotlin。
TypeScriptでReactを書く(2)：子コンポーネントを使う

TypeScriptとReactでコンポーネントを作るメモ。TypeScriptもES6もimport/export周りの理解があやふやなので使い方間違ってるかもしれない。動くには動く。

PropとかStateとか、Reactの仕組み的なものは[一人React.js Advent Calendar 2014](http://qiita.com/koba04/items/43200b6fd6e6f43f0d8d)が非常に参考になる。Prop = 定数かと思ってたけど、Prop = そのコンポーネントでは書きかえられない(= 親コンポーネントから書きかえられることはある)ということか。

# 実装
子コンポーネント。`export default`(=module.export)でクラスをexportする。

```ts:countText.tsx
/// <reference path="../../../typings/bundle.d.ts" />

import * as React from 'react';

export default class CountText extends React.Component<any, any> {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>{ this.props.message } { this.props.count }</div>
    );
  }
}
```

親コンポーネント。`import`で使えるようになる。

```ts:Hello.tsx
/// <reference path="../../../typings/bundle.d.ts" />

import * as React from 'react';
import CountText from './countText';

class Hello extends React.Component<any, any> {

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  onClick() {
    this.setState({ count: this.state.count + 1});
  }

  render() {
    return (
      <div>
        <CountText message="count: " count={this.state.count}></CountText>
        <button onClick={ this.onClick.bind(this) }>UP!</button>
      </div>
    );
  }
}

React.render(<Hello />, document.getElementById('app'));
```

もはやTypeScriptでもなんでもない。これからしっかり型を書いていきます...
でも手元のエディタ(atom)だと`.tsx`は入力補完してくれないっぽい。辛い。
奇数の完全数を1つ探そうとするPythonワンライナー

奇数の完全数が存在するのかどうかは未だにわかっていない数学の問題の一つです。
今回はそんな難問になぜかPythonのワンライナーで挑戦しました。
以下のワンライナーを実行し、該当の数字が見つかると標準出力にその数字が表示されます。

```shell-session
$ python -c "from itertools import *; print(next(n for n in count(1,2) if sum(s for s in range(1,(n//2)) if ((n/s)%1)==0)==n))"
```

なお見つからない模様。
JavaScriptでセレクトボックスを動的に作成する


時間や分、日付のようなセレクトボックスを作る時に、ベタにHTMLを書いても良いんだけど面倒。
しかも複数になってくると、HTMLの見通しも悪くなる。
というわけで、JavaScriptで動的に生成してみた。

まずは、生成する関数。
最初はjQuery使ってたけど、やめたらだいぶ長くなった…。

```JavaScript
function createNumberSelects(targetArray) {
  targetArray.forEach(function(element) {
    createNumberSelect(element.id, element.max);
  });
}

function createNumberSelect(id, max) {
  var target = document.getElementById(id);

  // 子ノードを全て削除
  while(target.firstChild) {
    target.removeChild(target.firstChild);
  }

  // 子ノード生成
  for (var i = 0; i < max; i++) {
    var element = document.createElement('option');
    element.innerHTML = ('0' + i).slice(-2);
    element.value = i;
    target.appendChild(element);
  }
}
```

続いて、これを使う方。

```JavaScript
// 1つだけ作成
createNumberSelect('hour', 24);

// 複数ID分をまとめて作成
createNumberSelects([
  {id: 'hour', max: 24},
  {id: 'minute', max: 60},
]);
```
Antことはじめ

----


MacでAntを使ってみたのでメモ。    

## Apache Ant?  
Javaのビルドツール。
詳細は、[Wikipedia](https://ja.wikipedia.org/wiki/Apache_Ant)。
主なAntタスクもまとまっています。

## 環境
* Mac OSX 10.11 (beta)
* java version "1.8.0_45"
* apache ant 1.9.6

## インストール
Homebrewでインストール。  

```
$ brew install ant
$ ant -version
Apache Ant(TM) version 1.9.6 compiled on June 29 2015
```

環境変数も設定しておきます。
（設定していないと、コマンド実行時にエラーになる模様）

```~/.zshrc
### Added manually                                                                                                                                    
export ANT_HOME="/usr/local/bin/ant/"
export PATH="$PATH:$ANT_HOME/bin"
```

## 実行してみる
定番のHello world。  

### build.xml
build.xmlは、プロジェクト、ターゲット、タスクの集まりになっています。
（ターゲットは、ある目的を達成する為のタスクのまとまりです。）

```build.xml
<?xml version="1.0" encoding="utf-8" ?>

<project name="antsample" default="helloworld">

  <target name="helloworld">
    <echo message="Hello world!" />
  </target>

</project>

```

実行してみましょう。

```
$ ant
Buildfile: path/to/ant-sample/build.xml

helloworld:
     [echo] Hello world!

BUILD SUCCESSFUL
Total time: 0 seconds
```

* ファイル名
	* "build.xml"であれば、ファイル名の指定は不要。  
	* 指定する場合は、```$ ant -f <filename>```  
* ターゲット名
	* 指定しない場合、"default"に指定したターゲットを実行

## Antタスク
Antのタスクについては、[Overview of Apache Ant Tasks](https://ant.apache.org/manual/tasksoverview.html)にまとまっています。

### echo
```
  <target name="helloworld">
    <echo message="Hello world!" />
  </target>
```

### mkdir & javac
classディレクトリを作成し、コンパイル。

```
  <target name="compile">
    <mkdir dir="./class" />
    <javac srcdir="./src" destdir="./class" />
  </target>
```

### java
javaのクラスを実行。
以下の例では、exec実行時、compileターゲットが実行される(depends)。

```
  <target name="exec" depends="compile">
    <java classname="HelloWorld" classpath="${class}" />
  </target>
```

### jar
jarファイルを作成。

```
  <target name="jar">                                                                                                                                                                                                                             
    <jar basedir="class" jarfile="sample.jar" />
  </target>
```
CentOS6.7(x64)にMySQLをインストールする

rootになる


インストール

    yum -y install mysql-devel
    yum -y install mysql-server


起動

    /etc/rc.d/init.d/mysqld start


接続

    mysql 

ユーザ追加

    mysql> create user 'yamato'@'localhost' identified by 'パスワード'


追加したユーザで接続

    mysql -u yamato -p


rootのパスワードを設定する

    mysql -u root
    update mysql.user set password=password('任意のパスワード') where user = 'root';
    flush privileges;
【俺メモ】LinuxMintでVirtualBox（主にWindowsゲスト）の設定

# VirtualBoxインストール
１．[公式ページ](https://www.virtualbox.org/)からパッケージファイルをゲットや。
２．パッケージファイルからインストールや。

# Extension Packインストール
１．[こちら](https://www.virtualbox.org/wiki/Downloads)からダウンロード
２．Virtual Boxマネージャーのメニューのファイル→環境設定
３．Virtual Box環境設定ダイアログ機能拡張より新しいパッケージの追加をクリック
４．ダウンロードしたファイルを選択し、インストール

# ユーザー追加
$ sudo gpasswd -a vbox実行ユーザー名 vboxusers
※これをしないとUSBが認識しないんやで。

# ゲストOSインストール
isoファイルから適当にインストールしてや。

# 画面解像度の追加
１．Linuxのターミナルを起動
２．以下のコマンドを入力
$ sudo VBoxManage setextradata "VBoxマシン名" CustomVideoMode1 9999x9999
※画面解像度をさらに追加する場合はCustomVideoModeの後ろの数字を増やしてや。

# Guest Additionsのインストール
１．ゲストOSを起動する
２．メニューのデバイス→GuestAdditionsCDイメージの挿入
３．マウントされたCDよりインストーラを起動してインストール
TypeScriptでReactを書く(1)：JSX

TypeScriptでReactを書きたかったので雑にメモする。

# TypeScriptでJSXのコンパイル
Reactはまあ出来るとして、JSXがちゃんとコンパイル出来るのか疑問だったがTypeScript1.6から出来るらしい。2015.8.15現在のバージョンは1.5系なのでnextバージョンをインストールする必要あり。グローバルのtscは別プロジェクトで現行系を使いたいのでlocal installにした。

```
$ npm install typescript@next --save
```

JSXをコンパイルするには拡張子を`.tsx`にする必要があるらしい。あとはコンパイル時に`--jsx react`オプションが必要。

もろもろの事情によりタスクランナーはGruntを使っているため、自動コンパイルをしたかったのだが、[grunt-typescript](https://www.npmjs.com/package/grunt-typescript)だとどう設定しても`.tsx`の拡張子は対応してませんと怒られた(~~設定方法が悪かったのかもしれない~~)。
追記；`grunt-typescript`自体にtypescriptが入っていて、それのバージョンが調べた時点で`1.5 beta`だった。1.5は正式版が出てるので、gruntは`grunt-ts`を使ったほうがいいのかもしれない。

一方[grunt-ts](https://www.npmjs.com/package/grunt-ts)なら次の設定でコンパイルが出来たのでこれを使うことにした。

```js
  dev: {
    src: [
      'assets/scripts/ts/**/*.ts', 'assets/scripts/ts/**/*.tsx'
    ],
    options: {
      noImplicitAny: false,
      module: 'umd',
      removeComments: true,
      additionalFlags: '--jsx react',
      fast: 'never'
    }
  }
```

あとは型定義ファイルのインストールも忘れずに

```
$ dtsm init
$ dtsm install react --save
```

Reactのビルドのためにbrowserifyを入れたりもするんだけど、その辺りはTypeで書こうが何で書こうが同じなので割愛。

# 実装
Reactコンポーネントをどうやって書くの？というところで若干詰まった。よく考えるとTypeScriptはES6をしっかりと追っかけているのでES6の例をだいたいそのまま持ってきたら動く。

React0.13から(?)、creatClass()をしなくてもES6 classで`React.component`を継承するとコンポーネントが作れるようになった。この点はTypeScriptも同じ(ジェネリクスだけ付けてあげればOK)。
ポイントは`constructor()`をしっかりと実装すること、super()を呼び出すことの2点。

```ts:Hello.tsx
/// <reference path="../../../typings/bundle.d.ts" />

import * as React from 'react';

class Hello extends React.Component<any, any> {

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  onClick() {
    this.setState({ count: this.state.count + 1});
  }

  render() {
    return (
      <div>
        <div>count, { this.state.count }</div>
        <button onClick={ this.onClick.bind(this) }>UP!</button>
      </div>
    );
  }
}

React.render(<Hello />, document.getElementById('app'));
```

あとはHTMLにタグを埋めたら表示される。

```index.html
<div id="app"></div>
```

あと詰まったポイントはJSX内で`this.onClick.bind(this)`としている所。これをつい`this.oncClick()`と書いてしまっていた。クラス内メソッドで定義されているonClick()なのでHelloにバインドされて呼び出されるかと思っていたら、そりゃDOMから直接(?)メソッドコールされるときは`this`変わるよね、という話。
IE9 CSS position: absolute;overflow: scroll; box-sizing: border-box; を組み合わせると幅がずれる

調べるのに無駄に苦労したので備忘として記載します。

表題の通り、IE9で
position: absolute;
overflow: scroll; 
box-sizing: border-box;
を組み合わせると幅が狭くなって表示されます。

参考：
http://terurou.hateblo.jp/entry/20120607/1339044000
（https://groups.google.com/forum/?fromgroups#!topic/closure-library-discuss/3htcvlCLvHs）
http://www.days.jp/blog/2013/07/ie9-box-sizingborder-box-overflowscroll/
https://social.msdn.microsoft.com/Forums/ja-JP/6eea687b-8c61-4a35-a54c-e8812b4d8b11/ie9-boxsizing-borderbox-problem?forum=iewebdevelopment

下記のHTMLをIE9とそれ以外で開くと幅がずれてます。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
<div style="
    background-color: green;
    width: 200px;
    height: 100px;
    position: relative;
    left: 30px;
    top: 30px;
">
  <div style="
    background: yellow;
    overflow: auto;
    max-height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    box-sizing: border-box;
  ">A<br>
    B<br>
    C<br>
    D<br>
    F<br>
  </div>
</div>
</body></html>
```
Chrome
![Chrome](https://qiita-image-store.s3.amazonaws.com/0/84259/dda4c5da-e6fe-37b3-7cc6-0340c6bf50d0.jpeg)
IE9
![IE9](https://qiita-image-store.s3.amazonaws.com/0/84259/877b7925-e71e-74fb-41a8-581551317dae.jpeg)
IE9では黄色の部分の幅が狭く緑の部分が左に出てます。

（https://social.msdn.microsoft.com/Forums/ja-JP/6eea687b-8c61-4a35-a54c-e8812b4d8b11/ie9-boxsizing-borderbox-problem?forum=iewebdevelopment
のhtmlのほうがわかりやすいかもしれません）


参考ページでは条件が2つだったりしますけど僕が間違えてるんでしょうか？
ちょっとよくわからないですね。

回避策は
box-sizing:content-box;
にせよと書いてあったりしますが、
問題起きないかどうかは場合によるのではないかと心配しています。

http://www.days.jp/blog/2013/07/ie9-box-sizingborder-box-overflowscroll/
ではIE10でダメだった様な記載がありますが、
僕の手元には気軽にIE10を動かせる環境がないので未確認です。
HTML/CSSのクラス名に迷ったら



ボキャプラリのないわたしはコーディングをしていて、クラス名を考えている時間が長い。それはもう長い。

パッと思いつくときもあるのだが・・・。最近では思いつかなすぎてhogeやらfugaやら、連番やらとりあえずつけておき、良いクラス名を思いついたら変更するみたいなこともやったが、hogegegegegegeとなったので控えようと思った。

sassなんか使っていると普通にネストしたくなる。
でもなんだかんだ（ほぼ）全ての要素にclass名をつけた方がメンテナンス性が高いことはカラダがわかっている。


クラス名を考えるだけの時間・・・なんとか削減できないかと思い、汎用的に使えるクラス名をまとめてみた。

#汎用クラス名
※重複あり

##レイアウト
- container
- wrapper
- wrap
- header
- footer
- section
- sec
- content
- body
- inner
- column
- col
- block
- grid
- row
- list
- sidebar
- main
- sub

##モジュール
- nav
- article
- list
- form
- box
- item
- button
- alert

##エレメント（モジュールのパーツ的な）
- header
- footer
- body
- row
- col
- core
- title
- headline
- heading
- hdl
- ttl
- text
- txt
- description
- dsc
- name
- date
- time
- data

##ステート（状態的な）
- error
- open
- close
- normal
- primary
- stop
- round
- current
- cur
- active
- activate
[jQuery]アンカーリンクで飛んだ先のアンカー要素にclassを付与してハイライトする


リンク先が他のページ内のアンカーだった時に、その要素をハイライトさせる（目立たせる）ためのスクリプトです。

**表示イメージ**

以下のようなページにリンクしていたとします。

▼こちらは普通に表示した場合。
![ハイライトなし](https://qiita-image-store.s3.amazonaws.com/0/62022/1d8d3c99-e842-1456-9a3a-52758202631f.png)


▼こちらはアンカーリンクで飛んだ場合。
ハイライト用のclassを付与することでアンカーの部分を目立たせています。
![ハイライトあり](https://qiita-image-store.s3.amazonaws.com/0/62022/2ee4e321-301d-df88-2e19-48f7b16035a3.png)

なんとなくイメージできましたでしょうか。

以下がコードです。

jQueryを使うので、head内に予め読み込んでおいてください。

```html
<head>
<!-- 例 -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
```

**HTML**
リンク先（アンカーがある）ページのコードサンプルです。

```html
<div>
ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。世の中にある人とすみかと、またかくのごとし。 
</div>

<div id="hoge">
祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。
</div>

<div>
雨にも負けず<br>風にも負けず<br>雪にも夏の暑さにも負けぬ
</div>
```

このページの #hoge の部分にリンクさせています。
このページに以下のスクリプトを読み込ませ、active というclass名を付与させます。

※リンク元ではなく、リンク先のページになります。

また、アンカーリンクだとウィンドウのトップに#hogeがきてしまうので、すこしトップに余白をつけてピッタリにならないようにしています。

**JavaScript**

```javascript
$(document).ready(function(){
	//▼ページ全体をフェードで表示させています。不要な場合は以下の二行は削除してください。
	$('body').hide();
	$('body').fadeIn('fast');
	//▲ここまでフェードの処理

	var anchor = $(location).attr('hash');	//アンカー名を取得
	var point = $(anchor).offset().top;		//要素の位置を取得
	var position = point - 100;				//余白

	//要素の位置（＋余白）までスクロール
	$('html,body').animate({
		scrollTop : position
	}, 400);

	//ハイライトするためのclass名を付与
	$(anchor).addClass('active');
});
```

**CSS**
ハイライトのスタイルはお好みで。

```css
/* ハイライトさせるclass名 */
.active {
	background-color: #ffffcc;
	box-shadow:0 0 0 3px red;
}
```

以上です。

リンク先に飛んだ時に、ページの途中が表示されるとどこを見ればいいの？と戸惑うことがたまにあるので、こういう処理があると便利なのではと思いました。

同一ページ内のアンカーリンクでも同じスクリプトで対応出来るかと思います。
canvasにdrawImageした画像にonClick付けたい

`canvas`タグ自体に`onClick`付ける[サンプル](http://stackoverflow.com/questions/15331264/javascript-canvas-image-onclick-not-working)は腐るほど出てきます。

そうじゃないんだ。
`canvas`内に`drawImage`した`Image`に`onClick`付けたいんだ。

```js
<script>
$(document).ready(function(){
    var context=document.getElementById("canvas").getContext("2d");
    
    var image=new Image();
	image.id="hoge";
    image.onload=function(){
		context.drawImage(image, 0, 0);
		$("#hoge").click(function(){ alert("hoge"); });
	}
    image.src="gazou.png";
});
</script>
<canvas id="canvas"></canvas>
```

動きません。
それどころか`document.getElementById("hoge")`の時点でnullです。
なんで？

http://www.inazumatv.com/contents/archives/7281
http://www.inazumatv.com/contents/archives/9620

どうやらdrawImageした時点でcanvas全体が一枚の画像のような扱いになってしまうらしく、特定の画像にリスナーセットといった芸当はできないみたい。
どうにかするためには、canvas上の座標を取得して、そこに重なってるはずの画像を探して、とか自力でやんないといけないらしい。
はー何それふざけてんの？

そんなわけで素のJavaScriptでcanvasを扱うのは無謀なようです。
となればライブラリの出番だ。
同サイトで紹介されてた[ライブラリ](http://www.inazumatv.com/contents/archives/8858)のうち、一番上にあった[CreateJS](http://www.createjs.com/)を試してみることにする。

```js
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//code.createjs.com/easeljs-0.8.1.min.js"></script>
<script type="text/javascript" src="//code.createjs.com/preloadjs-0.6.1.min.js"></script>
<script>

$(document).ready(function(){
	// 画像を読み込み
	var loader = new createjs.LoadQueue();
	loader.on("complete", completePreload, this);
	loader.loadManifest([{id:"gazou", src:"hoge.png"}]);
});

// 画像読み込み完了
 var completePreload = function(event) {
 	// 画像インスタンス
	var image = event.target.getResult("gazou");

	// canvasを取得
	var stage = new createjs.Stage("canvas");
	
	// 画像をセット
	var bitmap = new createjs.Bitmap(image);
	bitmap.foo = 'bar';
	bitmap.addEventListener("click", function(event){alert(event.target.foo);});
	stage.addChild(bitmap);
	
	// canvas更新
	stage.update();
}
</script>
<canvas id="canvas"></canvas>
```

画像にクリックイベントを登録することができました。

`createjs.Bitmap`は画像を扱うクラスです。
で、一応`new createjs.Bitmap("hoge.png");`みたいにファイルパスを与えることもできるみたいなのですが、`stage.update()`したときにまだ画像のロードが終わってなかったら画像が全く表示されない、みたいなことになります。

[延々update()を繰り返し](http://qiita.com/pikoshimame/items/1739c471cead8f80a970)ておけばそのうち表示されますが、
ここでは`createjs.LoadQueue`で先に画像を取得し、読み込みが完了した後に`update()`するようにしました。

`createjs.Bitmap`には`addEventListener`で[リスナーを設定](http://createjs.com/docs/easeljs/classes/Bitmap.html)できます。
他にも渡したい値なんかを適当に送りつけることもできます。
これで、canvasに描いた画像に個別にクリックリスナーを設定することができるようになりました。
めでたし。
つうかcanvasタグの仕様が悪い。
A/D コンバータの MCP3002, MCP3208 を raspberry pi 上の Ruby から扱う


A/D コンバータでデジタル化して SPI 経由で raspberry pi 上から扱いたい。A/Dコンバータも SPI も使ってみたのが初めてだったので、学習もかねてライブラリ化してみた。

```
require 'spi_mcp'

mcp = MCP3208.new
val = mcp.channel(0)
puts val # 0 ~ 4095
```

もしくは適当にライブラリ単体で引数つけて実行する。

```
$ watch -n 1 sudo ruby spi_mcp.rb MCP3208
```

![console.png](https://qiita-image-store.s3.amazonaws.com/0/5330/f252ab29-897f-53ec-4929-93d0e4a6f99e.png "console.png")


MCP3002(秋月で180円)を複数買ってしまったけど、特に理由が無ければ MCP3208(320円) の方が分解能高いし、たくさんチャンネル使えるし、繋ぐ必要ある配線もあんまり変わらないのでこちらを買った方が良いと思う。

![MCP3208_MCP3002.JPG](https://qiita-image-store.s3.amazonaws.com/0/5330/d6c1e3eb-9ad3-50cc-b62a-dfd8c4226c03.jpeg "MCP3208_MCP3002.JPG")


ちょっとしたハマりどころとしては、Ruby から SPI を扱える [pi_piper](https://github.com/jwhitehorn/pi_piper) gem が raspi2 だと  Ruby の FFI から呼び出してる libbcm2835.img を最新のを使わなくてはならない。2015/08/16現在、```gem install pi_piper``` だと古い物が使われてしまう、かつ最新の ```gem install pi_piper --version 2.0.beta.4``` を入れてもうまくいかないため、自前で gem を build して使った方が良い(git 最新の方が libbcm2835.img が新しかったし)。

```
git clone https://github.com/jwhitehorn/pi_piper.git
cd pi_piper
gem install bundler rake
bundle install
rake gem
sudo gem install pkg/pi_piper-2.0.beta.4.gem
```

あとあと MISO と MOSI がどっちが out でどっちが in か解らなくなる…。自分用メモ。

![MCP3208_3002_memo.jpg](https://qiita-image-store.s3.amazonaws.com/0/5330/b31b48f8-876d-8a8a-68ee-4984e3923354.jpeg "MCP3208_3002_memo.jpg")




```ruby
# spi_mcp.rb

require 'pi_piper'

class SpiMCP
  attr_reader :bit_resolution
  attr_reader :channels

  def initialize(options = {})
    @bit_resolution = options[:bit_resolution] or ArgumentError.new("require :bit_resolution")
    @channels = options[:channels] or ArgumentError.new("require :channels")
  end

  def channel(ch)
    raise ArgumentError.new("channel #{ch} is not support.") unless channels.include?(ch)
    result = 0
    PiPiper::Spi.begin do |spi|
      result = convert spi.write(*write_data(ch))
    end
    result
  end

  def convert(raw_data)
    ((raw_data[-2] << 8) + raw_data[-1]) & (2**bit_resolution - 1)
  end
end

class MCP3002 < SpiMCP
  def initialize
    super bit_resolution: 10, channels: 0..1
  end

  def write_data(ch)
    [
      0b01101000 | (ch<<4),
      0b00000000
    ]
  end
end

class MCP3208 < SpiMCP
  def initialize
    super bit_resolution: 12, channels: 0..7
  end

  def write_data(ch)
    control_bit = channel_control_bit(ch)
    [
      0b00000100 | (control_bit>>2), # 0b000001#{SINGLE/DIFF}#{D2}
      (control_bit & 0b11) << 6,     # 0b#{D1}#{D0}000000 (D1, D0)
      0b00000000
    ]
  end

  # return 4-bit (SINGLE/DIFF, D2, D1, D0)
  def channel_control_bit(ch)
    (0b1000 | ch) & 0b1111
  end
end

if __FILE__ == $0
  begin
    mcp_class = Object.const_get(ARGV[0])
  rescue NameError => e
    abort "usage: $ ruby #{__FILE__} MCP3208"
  end

  mcp = mcp_class.new
  mcp.channels.each do |ch|
    puts "ch #{ch}: #{mcp.channel(ch)}"
  end
end

```
特定のタグのついたEC2群を対象にfabricで任意のコマンドを実行する

複数のEC2に対してfabricを使って任意のコマンドを実行する場合、

```
$fab -H host1,hosts2.... hoge
```

とすればできますが、面倒なので任意のタグが付与された複数のEC2群に実行できるようにしてみたのでそのメモ。

なお、コマンドさえ変更すればELB配下のEC2群に実行など色々できそうです。

# 結論

今回の例ではEC2タグのkeyにRole、ValueにWebとついたインスタンス群に`hostname`コマンドを実行する場合として書きます。

以下のようなfabfileを作ればOK。（事前準備が必要なので要参照)

```lang:fabfile
from fabric.api import *
import commands

env.user = 'ec2-user'
env.key_filename = '~/.ssh/hogefuga.pem'

def set_hosts(role):
  hosts = commands.getoutput("aws ec2 describe-instances --filter \"Name=instance-state-name,Values=running\" \"Name=tag-key,Values=Role\" \"Name=tag-value,Values=%s\" | jq -r '.Reservations[].Instances[].PublicIpAddress'" % role)
  env.hosts = hosts.split("\n")

def hostname():
  run('hostname')
```

AWS CLIを叩いているだけなのでそこを変えれば対象ホストはいかようにもできる。

実行は以下のようにすればOK

```
$fab set_hosts:Web hostname
[52.69.75.181] Executing task 'hostname'
[52.69.75.181] run: hostname
[52.69.75.181] out: ip-172-31-24-50
[52.69.75.181] out:

[52.69.104.143] Executing task 'hostname'
[52.69.104.143] run: hostname
[52.69.104.143] out: ip-172-31-20-54
[52.69.104.143] out:


Done.
Disconnecting from 52.69.104.143... done.
Disconnecting from 52.69.75.181... done.
```

RoleにDBと設定されたものを実行する場合、以下のようにすればOK

```
$fab set_hosts:DB hostname
```

# 事前準備

+ fabric実行サーバーではAWS CLIが使えること
+ fabric実行サーバーではec2のdescribe-instancesが使える権限が設定されていること(IAMロールもしくはcredentialを設定)
+ fabric実行サーバーでjqが使えること

# 説明

+ env.hostsにlist型のホスト名(今回はPublicIPアドレス)を指定すれば動的に実行ホストを決定できる。参考->[fabric-実行モデル](https://fabric-ja.readthedocs.org/ja/latest/usage/execution.html)
+ Pythonではcommands.getoutputによって任意のコマンドを実行できるので、AWS CLI+jqで対象EC2群のPublicIPアドレスを取得(コマンドは事前に単独で確認)
+ AWS CLI実行時のroleの指定はfabric実行時に引数で指定
+ AWS CLI+jqの結果は改行区切りなのでsplitでlistに変換(対象EC2が一つのみの場合でもこれで大丈夫)


# まとめ

fabric内で普通にpythonが実行できるのはすごく便利。
また、AWS CLI実行部分はいかようにも変えれるので色々便利そう。