OmniAICreator/Qiita-1.07M huggingface dataset:
Homebrewの練習 sgeのformulaを書く


RubySDLインストールする際、sgeていうライブラリがあるとより便利になる。
けど素のHomebrewにはsgeがない。なのでググってsgeのformulaを見つけたけど、/usr/local/以下に直にインストールされたりと出来が良くないので、Homebrewの練習がてら自分でformulaを書いてみた。

```ruby:libsge.rb
# Documentation: https://github.com/Homebrew/homebrew/blob/master/share/doc/homebrew/Formula-Cookbook.md
#                /usr/local/Library/Contributions/example-formula.rb

class Libsge < Formula
  desc 'An add-on graphics library for the Simple Direct Media Layer'

  homepage 'https://github.com/flibitijibibo/libSGE/'
  url 'git://github.com/flibitijibibo/libSGE.git', revision: '1085c4958397b91a42c399bc389e8fddde8f207b'
  version '1085c49'

  depends_on 'sdl'

  def install
    args = %W(
      PREFIX=#{prefix}
      PREFIX_H=#{prefix}/include/SDL
    )

    system 'make', 'install', *args
  end

  test do
    (testpath / 'test.c').write <<-EOS.undent
      #include "sge.h"

      int main() {
        sge_Random(1,10);
        return 0;
      }
    EOS

    system "#{ENV.cc} test.c `sdl-config --cflags --libs` -lsge -otest"
    system './test'
  end
end

```

マニュアルとか他のformulaとか--debug --verboseとかを見ながら書いてこんなかんじ。

PREFIXを環境変数で指定して、アンインストールを可能に。あとgitのrevisionしといて安定性向上。雑ながら一応テストも追加。あたりが改善点。

gistにおいたので

```
brew install https://gist.githubusercontent.com/ymmtmdk/5b15f2b06aef5549eb5a/raw/ebf4c9758b1f772f0f6073e7b2bdbb5e9665ee74/libsge.rb
```

で使用可能。

Homebrewはmake && make installなプログラムが簡単に管理下におけて便利だなあと思いました。
JavaScriptでMIDIファイルを解析してみる 1

#MIDIの構造について
[ここ](http://www.omnibase.net/smf/)の解説をもとに解析してみます。
ちなみにMIDIファイルのことをSMF(Standard MIDI FILE)と呼びます。
なので以降SMFと呼びます。

#使用する環境
Node.js

#SMFを16進数データとして読み込む
解析するために16進数並びのテキストデータとして読み込みます。
こんな感じです。

````loadsmf.js

/**
*midiファイルを読み込んで16進数テキストを返します。
*@param {string} filepath 読み込むMIDIファイルのパス
*@callback コールバック
*@return {string} 16進数テキスト
**/
var fs=require("fs");

module.exports=function(filepath,callback){
    fs.readFile(filepath,function(err,data){
      if(err) throw err;
      //読み込んだデータを16進数テキストに変換(小文字は大文字に変換)
      var hexString = Buffer(data).toString("hex").toUpperCase();
      callback(hexString);
    });
}
````

#SMFのヘッダ
SMFのヘッダはヘッダチャンクと呼ばれているようです。
構造は下記のようになっています。

###1.チャンクタイプ(4byte)
これは**4D 54 68 64**という値で固定です。まずこれで正しいSMFかどうか判定できますね。

###2.データ長(4byte)
ヘッダのサイズは可変長になっているようです。
ですのでここでヘッダサイズを保持しています。
ここでいうヘッダサイズは、この後に続くヘッダデータのデータ長です。
将来の拡張用で保持してあるだけで、実際はほとんど6バイトなのかな？
データ例：**00 06**

###3.フォーマット(2byte)
SMFには0,1,2いずれかのフォーマットタイプがあるようです。
ですので、フォーマットのデータは**00 00**か**00 01**か**00 02**になります。
フォーマットの詳細については、記事最初にあるリンク等で確認してください。

###4.トラック数(2type)
トラックの数を示します。
トラックが1つなら **00 01**となります。

###5.時間単位(2byte)
分解能のこと。
SMFでは時間管理の方法について、「何小節何拍」と「何分何秒何フレーム」のいずれか指定をすることができます。
でもだいたいは「何小節何拍」のほうを使うようです。
これは2バイトあるうちの上位バイトの最上位ビットが0か1か、で決定されます。
つまり上位バイトが
**00～79**(最上位ビットが0)なら、「何小節何拍」
**80～FF**(最上位ビットが1)なら、「何分何秒何フレーム」
となります。

データの例としては
**01 E0**で、分解能が480 何小節何拍で指定する
となります。

ちなみに、通常使われるは分解能の値は、480です。

これは4分音符が、480という数値で表されると考えてください。
ただしこれは秒とか、ミリ秒とかを表すような単位ではありません。

あくまで、4分音符を480と表現するだけです。
4分音符を480としておけば、8分音符は240、2分音符は960と表現されます。
SMFでは、「4分音符」とか「8分音符」とかいう形での「音価」の表現はない代わりに、4分音符を480としておくことで、何音符か、を表現しているのです。

また、実際の演奏時間は、テンポを保持しているデータから計算しますが、詳細は別記事で解説します。

以上がヘッダチャンクの概要です


とりあえずここまでを取得するテストスクリプトを作ってみますと

````js
    //dataは16進テキストにしたsmfファイルの中身
    var  header ={
        //チャンクタイプ
        chunktype:data.substring(0,8),
        //ヘッダサイズ
        headersize : data.substring(9,16),
        //SMFフォーマット
        format : data.substring(16,20),
        //トラックの数
        tracksize : data.substring(20,24),
        //時間単位
        timeunit : data.substring(24,28),
    }
    console.dir(header);
}
````
単純に文字列関数で、何文字目にあるか、で取得してみました。
本来ヘッダは可変長なので、headersizeで読み込むサイズを決める必要があるのですが、
ここでは割愛。6バイト前提です。

さて、これで単純なSMFを読み込んでみたいと思います。
テストで使用するのは、MuseScoreというフリーの楽譜作成ソフトで作成したピアノ楽譜をMIDIエクスポートしたものです。ピアノ楽譜です。トラック数は右手と左手で2つになるようです。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/75209/0be87764-a11e-3582-26cb-e8401ecd4268.png)

C5の四分音符を鳴らすだけです。

このSMFを上記スクリプトで読み込んでみると

````js
{ chunktype: '4D546864',
  size: '0000006',
  format: '0001',
  tracksize: '0002',
  timeunit: '01E0'
}
```
こんなデータが返ってきました。
ヘッダ、ヘッダサイズ、ヘッダの各情報を取得することができましたね。

音の情報はこの後に続きますが考え方は同じです。
詳しくは[JavaScriptでMIDIファイルを解析してみる 2](http://qiita.com/PianoScoreJP/items/71db2907b302793544e9)で解説します。
ELECOM のルータ(WRC-733FEBK-A) でファームウェアアップデートができないのを何とかした

# ELECOM のルータでファームウェアアップデートができない

## お断り
* ある特定の製品に限った話をしています
* ぶっちゃけ、Qiita に書くのは間違ってるかもしれません。「プログラミングに関する知識を共有」という目的からは外れているので、削除されても文句言えません。
* ファームウェアのバージョンは v2.07 から v2.10 にアップデートした時の話です。

# 結論
* ルータモードに戻して、公式サイトからファームウェアをダウンロードしてきて、手動更新でファームウェアをアップデートすれば、アップデートできた。
* AP モードで使いたい人は、一回ルータモードに戻して、接続回線の種別を DHCP にしてからファームウェアアップデートしましょう

# デバッグ経緯
1. お家で 11a を話せるルータ欲しい。
2. WRC-733FEBK-A 買ってみた。(安いし)
3. bugfix もあるだろうし、ファームウェアアップデートしたい
3. AP モードで動作させてたけど、ファームウェアアップデートができない(; ´Д｀)
4. 「手動更新」のページで、最新のファームウェアを DL してきてアップデートしようにも、なんか JS がおかしくて、ダメ。
    * 話がそれるけど、この JS。ルータ自分自身の HTML に対して、HTTP GET を投げてるんだけど、これ確実にダメだよね。 
4. SkyLink Manager なるアプリをダウンロードしてきて、試すもやっぱりアップデートできない
    * どうやら「!!elecom-setup」という SSID が飛んでいるけど、これSkyLink Manager(スマホアプリ、Winアプリ)から設定する用の SSID なようだ。
5. 一旦ルータモードに戻して、手動更新試してみよう。。。
6. できた。

という経緯でございます。

# なんとも言えないまとめ
* ブラックボックステストって楽しいですよね。
* 変なバグり方してるんだな、と。動作モードに応じて挙動がまるっきり変わってる感じ。
* 製品出荷状態に戻してから、１から手順を追うのは大切。
#yokohamarb 「Rubyレシピブック」recipe 194「ファイルに1行挿入する」の修正

ポイントはコメントに書いたとおりです。
元の`Tempfile.new`の代わりに`Tempfile.create`を、`File.rename`の代わりに`FileUtils.cp`を使いました。
`Tempfile.create`って知らなかった。
`open`と違って、付属のブロックを抜けた時、作成した一時ファイルを削除します。
今度からこっち使おう。

```ruby
require 'tempfile'
require 'fileutils'

def insert path, start_line, data
  pid = Process.pid.to_s 
  Tempfile.create pid, File.dirname(path) do|temp|
    File.open(path) do|input|
      start_line.times do
        if line = input.gets
          temp.write line
        end
      end
      temp.puts data
      while line = input.gets
        temp.write line
      end
    end
    temp.flush
    mode = File.stat(path).mode
    # File.renameだとpathとtemp.pathのあるファイルシステムが違う場合、うまく行かない。
    # どうせTempfile.createメソッドのブロックを出るときにtempは削除されるはずなので、cpする。
    FileUtils.cp(temp.path, path)
    File.chmod(mode, path)
  end
end

insert ARGV[0], ARGV[1].to_i, ARGV[2]
```
Haskellの関数合成、または (.) 関数

Haskell の関数合成について書いてある記事が意外と少なかったので、私が詰まづいたところをメモしておきます。

ここでは、部分適用の知識があることを前提にしたいと思います。
また、ここでは数学や圏論の話は極力抜きで。私自身が苦手なので。

# ポイントフリースタイル

まず初めに、

```hs
f x = g x
```

という式があったとき、この`x`を「ポイント」と呼びます。
そしてこの式は、

```hs
f = g
```

と書くことができます。
この書き方を「ポイントフリースタイル」と呼びます。

# 関数合成

複数の関数を結合したい場合、

```hs
f x = g $ h x
```

といった書き方をすると思います。
これはポイントがカッコ内にあるため、このままではポイントフリースタイルにすることはできません。

しかし、`(.)`という関数を使うと上の式を、

```hs
f x = (g . h) x
```

と書くことができます。
この「二つの関数を繋げて一つの関数にする」ことを、「関数合成」と呼びます。

```hs
f = g . h
```

ポイントフリースタイルにすることができました。

# 二引数関数

Haskell には正確には二引数関数は存在しませんが、ここでは便宜上、二つの引数を取る関数をそう呼ぶことにします。

たとえば`(++)`関数の型は、

```hs
(++) :: [a] -> [a] -> [a]
```

と、見た目上は二引数関数になっています。

では、例として二つの文字列を取り、さらに反転させる関数を考えてみましょう。

```hs
f x y = reverse $ (++) x y
```

単純に考えると、次のようになると思います。

```hs
-- f :: String -> String -> String
f = reverse . (++)
```

しかし、この式を実行すると

```text
main.hs:1:19:
    Couldn't match type `[a1] -> [a1]' with `[a0]'
    Expected type: [a1] -> [a0]
      Actual type: [a1] -> [a1] -> [a1]
    In the second argument of `(.)', namely `(++)'
    In the expression: reverse . (++)
    In an equation for `f': f = reverse . (++)
```

というエラーが出てしまいます。

これは、要約すると「`reverse . (++)`に引数を適用しても、返ってくるのが`[a1] -> [a1]`という型（の関数）であるため、`reverse`の引数の型`[a0]`と一致しない」という内容です。

では、二引数関数を関数合成したい場合、どうすれば良いのでしょうか。

# `(.)`関数とは

そもそも`(.)`関数とは何でしょうか。
型は次のように定義されています。

```hs
(.) :: (b -> c) -> (a -> b) -> a -> c
```

ここから推測すると、`(.)`の正体は
1. 第二引数`::a -> b`に第三引数`:: a`を適用させる
2. 第一引数`::b -> c`に上の値`:: b`を適用させる
関数だということになります。

ところで、先程出てきた

```hs
f = reverse . (++)
```

という式は、

```hs
f x y = ((.) reverse (++)) x y
```

と書くことができます。この式を変形させると、

```hs
f x y = ((.) reverse (++)) x y
f   y = (reverse ((++) x)) y
```

となり、関数がカッコの中に入ってしまうためエラーが出ていました。
`(.)`は、三番目の引数に二番目の引数を適用させる関数ですから、この時点で


```hs
f   y = ((.) reverse ((++) x)) y
```

となっていれば良いのです。
つまり、式を成立させるには

```hs
f = ((.) (reverse)) . (++)
f = (reverse .) . (++) -- 上式と同じ
```

と書けば良いということになります。

# 応用

前述の関数を使って、いくつかのパターンを考えてみましょう。

## 三引数関数

```hs
f x y z = g $ h x y z
```

という三引数関数を、ポイントフリースタイルにしてみましょう。

```hs
f x y z = g (((h x) y) z)
f x y   = (.) g ((h x) y)
f x     = (.) ((.) g) (h x)
f       = (.) ((.) ((.) g)) h
f       = (((g .) .) . h -- 上式と同じ
```

ｎ引数関数はパターン見えてきました。

## 引数あり . 引数あり

```hs
f x y = g x $ h y
```

という関数を考えてみます。

```
f x y = g x (h y)
f x y = flip g (h y) x
f x y = ((.) (flip g) h) y x
f     = flip ((.) (flip g) h)
f     = flip $ flip g . h -- 上式と同じ
```

`flip`関数を併用すると、ポイントフリーにできる関数の幅も広がりそうです。

とりあえず今回はここまで。
ターミナルから Sublime Text を開く

以下のシンボリックリンクを作成する

```
sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin
```

上記で現在位置のディレクトリをSublime Textで開くことが出来るようになる。
開き方は以下。

```
$ subl ./
```


以下を参考にさせて頂きました。
https://www.sublimetext.com/docs/3/osx_command_line.html
Git のガベージコレクションについて

Git のガベージコレクションについてのメモ。

# 設定

[`git help config`](http://git-scm.com/docs/git-config) (v1.9.2) より。

 * http://git-scm.com/docs/git-config/1.9.2

見出しの `()` はデフォルト値。

## gc.auto (6700)

> When there are approximately more than this many loose objects in the repository, git gc --auto will pack them.

ルーズオブジェクト (パックされてないオブジェクト) が、ここで指定された個数を越えると、`git gc --auto` がそれらを pack する。

> Some Porcelain commands use this command to perform a light-weight garbage collection from time to time.

Porcelain (一般ユーザ向け) コマンドのいくつかは、軽量なガベージコレクションのために `git gc --auto` を裏で実行する。

> The default value is 6700. Setting this to 0 disables it.

デフォルト `6700`。`0` で無効。

## gc.autopacklimit (50)

> When there are more than this many packs that are not marked with *.keep file in the repository, git gc --auto consolidates them into one larger
pack.

pack ファイルが指定された個数を越えると、`git gc --auto` 時に 1つの pack にまとめ直される。`*.keep` ファイルで保持し続けられる。

>  The default value is 50. Setting this to 0 disables it.

デフォルトは `50`。`0` で無効。

## gc.pruneExpire (2 weeks ago)

> When `git gc` is run, it will call `prune --expire 2.weeks.ago`.

`git gc` 実行時に、`prune --expire 2.weeks.ago` が呼ばれる。2週間以上前の、到達不能なオブジェクトが削除される。

> Override the grace period with this config variable.
>
> The value "now" may be used to disable this grace period and always prune unreachable objects immediately.

到達不能なオブジェクトをすぐ消すには `now` を設定する。

## gc.reflogexpire (90 days)

> `git reflog expire` removes reflog entries older than this time;

`git reflog expire` が、この値で指定されたより古い `reflog` を削除する。

> defaults to 90 days.

デフォルトは `90 days`。

> With "`<pattern>`" (e.g. "`refs/stash`") in the middle the setting
applies only to the refs that match the `<pattern>`.

`gc.<pattern>.reflogexpire` のような設定で、`reflog` 毎の期限を設定できる。

## gc.reflogExpireUnreachable (30 days)

> `git reflog expire` removes reflog entries older than this time and are not reachable from the current tip;

`git reflog expire` 時に、現在の (リファレンスが指す?) 先端 (tip) から到達できない reflog で、この値で指定されたより古いものを削除する。

> defaults to 30 days.

デフォルトは `30 days`。

> With "`<pattern>`" (e.g. "refs/stash") in the middle, the setting applies only to the refs that match the <pattern>.

`gc.reflogexpire` と同様に、パターン指定できる。

## gc.rerereresolved (60 days)

> Records of conflicted merge you resolved earlier are kept for this many days when `git rerere gc` is run.

`git rerere gc` 実行時に、この値で指定したより前に解消したコンフリクトのマージの記録が削除される。

> The default is 60 days. See git-rerere(1).

デフォルトは `60 days`。

## gc.rerereunresolved (15 days)

> Records of conflicted merge you have not resolved are kept for this many days when `git rerere gc` is run.

`git rerere gc` 実行時に、この値で指定したより前の、解消しなかったコンフリクトのマージの記録が削除される。

> The default is 15 days. See git-rerere(1).

デフォルトは `15 days`。

## gc.aggressiveWindow (250)

> The window size parameter used in the delta compression algorithm used by `git gc --aggressive`. 

`git gc --aggressive` 時に使う差分圧縮アルゴリズムのウィンドウサイズ。

> This defaults to 250.

デフォルトは `250`。
TypeScriptでシングルトン(Singleton)パターンを使おう


※ 2017/2/17

TypeScript 2ではシングルトンが短く書けます。

[TypeScript 2ではシングルトン\(Singleton\)パターンが短く書ける \- Qiita](https://qiita.com/tonkotsuboy_com/items/225d08e915a57777c9dc)

---


プログラミングには、**プロジェクトでインスタンスを一つだけ生成し、それを使いまわす「シングルトン（Singleton）パターン」**という手法（デザインパターン）があります。今回は、TypeScriptにおいてシングルトンパターンを使う方法をご紹介します。


# TypeScriptでシングルトンパターンを使う方法
Hogeクラスをシングルトンパターンで実装するコードは以下です。各処理に説明をコメントしておきました。ポイントは、**コンストラクタがgetInstance()メソッドを経由して一度しか実行されない点**です。

```ts:TypeScript
/**
 * シングルトンパターンで実装されたHogeクラス
 */
class Hoge
{
    /**
     *  インスタンス
     */
    private static _instance:Hoge;

    /**
     * インスタンスの取得
     */
    public static getInstance():Hoge
    {
        console.log("☆1 Hogeクラスインスタンスの取得");
        // インスタンスが存在しない場合、new演算子でインスタンスを作成
        // 引数に渡すのは、Hoge.getInstanceというFunction
        if (!this._instance)
            this._instance = new Hoge(Hoge.getInstance);

        // 生成済みのインスタンスを返す
        return this._instance;
    }
    
    /**
     * コンストラクタ
     */
    constructor(caller:Function) {
        if (caller == Hoge.getInstance)
            console.log("☆2 インスタンスを作成。一度しか呼ばれない。");
        else if (Hoge._instance)
            throw new Error("既にインスタンスが存在するためエラー。");
        else
            throw new Error("コンストラクタの引数が不正な為エラー。");
    }
}
```

# インスタンスの取得
実際にこのHogeクラスのインスタンスを取得してみます。コンソールログを見るとわかるように、**Hogeクラスのインスタンスは一度きりしか生成されない**のがわかります。インスタンスの取得はHoge.getInstance()でのみ行われ、クラス外でのnew Hoge()によるインスタンス化は不可能です。

```ts:TypeScript
// ☆1と☆2のログが出力。Hogeクラスのインスタンスがnewで生成される
var hoge1:Hoge = Hoge.getInstance();
// ☆1のログのみ出力。インスタンスはnewで生成されない
var hoge2:Hoge = Hoge.getInstance();
// new Hoge()ではインスタンス化不可能
// var hoge:Hoge = new Hoge();
```

Google Chromeのコンソールタブの出力結果は以下です。
![chromelog.png](https://qiita-image-store.s3.amazonaws.com/0/67884/56164464-d4f5-f1f5-e2d2-3253ff28608c.png)

# 使いどころ
インスタンスには、毎回newによる生成が必要なものと1度生成すれば充分なものがあります。例えばゲームのアプリを作るとき、画面上の表示物のクラスのインスタンスは都度作成した方が都合がよいですが、ゲームのデータを管理するクラスのインスタンスは1度生成して使いまわすべきです。

# 最後に
シングルトンパターンの考え方は、ActionScript 3.0やPHP等、他の言語においても役に立ちます。**シングルトンパターンを使いこなして不要なインスタンス生成を減らしましょう**。
N60-BASICとプチコン3号の細かな差異

マニュアルではわかりにくい、N60-BASIC(PC-6001)とプチコン3号(V3.1.0)の細かな差異を列挙

|項目|N60-BASIC|プチコン3号|備考|
|:--|:--|:--|:--|
|小数点以下切捨て|INT(-0.5)→-1|FLOOR(n)→-1|命令が異なる|
|論理演算|(1>0)→-1|(1>0)→1|N60:TRUE条件は-1<BR>プチコン:TRUE条件は1<BR>FALSE条件は0で共通|
|論理演算|(1=1)|(1==1)|比較演算子の書式が異なる|
|論理演算|(1<>1)|(1!=1)|比較演算子の書式が異なる|
|論理演算|(1>=1) または (1=>1)|(1>=1)|比較演算子の書式が異なる|
|数値の文字列化|STR$(1)→' 1'|STR$(1)→'1'|N60:0以上の場合1文字目は空白<BR>負数は1文字目がマイナスで差異なし|
|文字列の数値化|VAL("12A3")→12|VAL("12A3")→0|N60:数値とみなす部分まで変換<BR>プチコン:数値以外の文字が入ると結果0|
|文字列の数値化|VAL("12E3")→12000|VAL("12E3")→0|N60:指数表現も数値化|
|乱数|RND(-1)|RANDOMIZE 0,-1<BR>RNDF()|N60:負数の場合、引数のシード値で初期化し、<BR>0以上1未満の乱数値を出力|
|乱数|RND(0)|－|N60:0の場合、前回のRND結果を出力|
|乱数|RND(1)|RNDF()|N60:正数の場合、0以上1未満の乱数値を出力|
|文字列切り出し|MID$("ABCD",2,1)→'B'|MID$("ABCD",2,1)→'C'|N60:第2引数は1始まり<BR>プチコン:第2引数は0始まり|
|文字列切り出し|MID$("ABCD",2)→'BCD'|－|N60:第3引数がない場合文字列の最後まで出力|
|配列変数|DIM A(99)|DIM A[99]|N60:A(0)~A(99)の範囲<BR>プチコン:A[0]~A[98]の範囲|
|配列変数|A(10)=99|DIM A[11]<BR>A[10]=99|N60:10まではDIM不要|
|変数名|A=1:A\$="A":<BR>A(0)=2:A\$(0)="B"|A=1:A$="A"|N60:数値, 文字, 配列で同じ変数名を使用可能<BR>プチコン:配列有無で同じ変数名は指定不可|
|データ|READ A,B$<BR>DATA ,|READ A,B\$<BR>DATA 0,""|N60:データは省略表現可能|
|データ|READ A\$,B\$<BR>DATA "A", B C|READ A\$,B\$<BR>DATA "A","B C"|N60:文字データは「""」で囲まなくても良い<BR>左右の空白をトリミングして変数に入る|
MACにSassをインストールしてNetBeansでコンパイルする方法

#環境
MAC: Yosemite(10.10.3)
NetBeans: 8.0.2
#Sassのインストール方法
ターミナルを立ち上げて、下記コマンドでインストール。

```
sudo gem install sass
```
MACのパスワードを聞かれるので、入力。
インストールが完了したら、正常にインストール出来ているか確認。

```
sass -v
```
下記のようにSassのバージョンが返ってきたらOK

```
Sass 3.4.14 (Selective Steve)
```
#Compassのインストール
下記コマンドでCompassをインストールする。
```
sudo gem install compass
```
インストール後、ツラツラとターミナルに表示されるが、下記内容が含まれていればOK

```
Successfully installed compass-1.0.3
```
#NetBeans の設定
NetBeans起動後、「NetBeans」→「Preferences」→「その他」の「CSSプリプロセッサ」タブの「Sassパス」項目にSassのパスを入力する。
![スクリーンショット-2015-06-13-18.33.06.jpg](https://qiita-image-store.s3.amazonaws.com/0/77171/8c4df8ac-4003-3341-45d0-3dc19d8d5b30.jpeg)
この時「検索」ボタンを押すと、勝手にパスを入れてくれたので便利。

次に、プロジェクトの設定です。
プロジェクトを右クリックして「プロパティ」を選択。
「CSSプリプロセッサ」項目を表示して、「保存時にSassファイルをコンパイル」欄にチェック。
「コンパイラ・オプション」欄に「--compass」を入力する。
![スクリーンショット-2015-06-13-18.36.47.jpg](https://qiita-image-store.s3.amazonaws.com/0/77171/f62a059a-5d27-25a2-696c-d3a0a60f93c8.jpeg)
WordPress - カスタムフィールドに値がない場合、項目を非表示にする。

```php
<?php if(post_custom('カスタムフィールド名')): ?>
	非表示にしたいコンテンツ
<?php endif; ?>
```



例：
記事末尾に、記事に関する「カテゴリー」「タグ」「リンク」等があり、その値をカスタムフィールドで生成している時、記事作成時に、「カテゴリー」「タグ」を入力するが、「リンク」のみカスタムフィールドを使用する必要がない場合、HTML側で見出しなどを作成していた時、見出しのみが存在し、値が空の状態になる。

そういった時に、値が存在しなければ、表示を非表示にする事ができる。
Unityことはじめ

# About
このページは身内向けのUnityワークショップ用に作られたドキュメントです。
まったくUnityを触ったことない人向けの資料になります。

# Unityでつくるゲームの構成
- ひとつのゲームはProjectとという単位で構成されます。
- そしてそのProjectの中に、Sceneというものがあります。これはゲームの１ステージに対応するものと思ってください。
- そしてそのSceneの中に、GameObjectというものがあります。これはステージの中のキャラクターやカメラ、アイテム、地形等に相当します。

# Unityのインターフェース
Unityを開くと「Scene」とか「Hierarchy」だとか色んなウィンドウがあります。これらはビューと呼ばれます。
[このページ](https://github.com/unity3d-jp/FirstTutorial/wiki/0.%E3%83%95%E3%82%9A%E3%83%AD%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)で簡単に説明しています。
以下引用。

>
### Sceneビュー
シーンビューには製作中のゲーム世界（シーン）が表示され、自由な位置・角度から眺めることができます。
### Gameビュー
ゲームビューはゲーム画面です。 ゲームプレイヤーは基本的にこの画面を見ながらゲームをプレイします。 またUI等の操作はこの画面で行います。
### Inspectorビュー
シーンの中で選択肢中のオブジェクトが持つ属性を表示・編集するためのビューです。 属性には座標やメッシュといった見た目上のものから、衝突判定や物理制御に冠するパラメーターなどもあり、その他ユーザー定義のものもここに表示されます。
### Hierarchyビュー
シーン内に存在するオブジェクトの一覧が表示されます。 編集中のシーン内でオブジェクトをコピー/ペーストしたり、適切な名前をつけて整理することもできます。
### Projectブラウザ
製作中のプロジェクト（ゲーム全体）に含まれるシーン、スクリプト、グラフィックやサウンドなどのデータ、その他のリソースがファイル単位で表示されます。ここに出来合いのスクリプトセット、アートアセット、シェーダーなどを「パッケージ」単位でインポートすることもできます。

### その他
- ゲームの再生
    - 上の▶ボタンを押すと、ゲームが始まります。デバッグで使います。
- 左上の5つのボタン
    - Sceneビューでのマウスでできることを切り替えます。
   
# シーンにオブジェクトを追加する
ヒエラルキービューで右クリックすると、様々なオブジェクトを追加することができます。
試しに「3D Object」→「Plane」を選んでみましょう。画面に地面が追加されます。
他にも、最初から色んなオブジェクトがUnityでは準備されています。

# コンポーネント
オブジェクトにはコンポーネントと呼ばれるものがアタッチされています。
これはオブジェクトの機能にあたるもので、ゲームオブジェクトの動作の基礎です。

Cubeオブジェクトを配置して、コンポーネントを少し見てみましょう。
Hierarchy右クリック→「3D Object」→「cube」を選んでください。

Inspectorビューに「Tranfrom」やら「BoxCollider」やらが表示されていると思います。これがコンポーネントです。

#### Transform
オブジェクトの位置、回転、スケールの情報を管理するコンポーネントです。
#### Collider
あたり判定を計算するためのコンポーネントです。
これがないと他のオブジェクトと衝突しません。
#### Mesh
3Dのオブジェクトを形付けるものと思っておきましょう。
#### RigidBody
物理演算をするためのコンポーネントです。
これがアタッチされていると、重力やその他の力の計算をしてくれます。
#### Script
自分で書いたプログラム（スクリプト）をアタッチすることで、任意の動作をさせられます。
次項で説明します。

# スクリプト
空っぽの状態のスクリプトを以下に記述します。

```csharp:Hoge.cs

using UnityEngine;
using System.Collections;

public class Hoge : MonoBehaviour {

	// Use this for initialization
	void Start () {
	
	}
	
	// Update is called once per frame
	void Update () {
	
	}
}
```

C#分かんないって人は、とりあえず上4行近くは無視してください。
大事なのは、Start()とUpdate()って関数です。

#### Start()
Start関数は、一番初めに一回だけ呼ばれる関数です。
ここに初期化処理を書くのが基本です。

#### Update()
毎フレームごとに呼ばれる関数です。
基本的に制御の内容を書いていきます。
> フレームって？
> ここでは、ゲーム内の最小の時間単位と思ってください。詳しくは[こちら](http://unity-yb.github.io/articles/frame_and_update.html)。

## 物体を移動させてみよう
Update()内に次のコードを書いてみましょう。

```csharp:Hoge.Update()
transform.position += new Vector3(0.1f, 0.0f, 0.0f);
```

tranfromのpositionをVector3(0.1f, 0.0f, 0.0f)の分だけ足す、という処理です。
Unity3Dの座標は、このVector3を使って作る（表現する）ことができます。

## デバッグログを出してみよう
以下の関数を呼び出すと、コンソールにログを書き出すことができます。

```csharp
Debug.Log("Hello, debug log.");
```



疲れたのでこの辺で。
PHPでシェルソート

#PHPでシェルソート

```php

/*
適当な間隔をあけた飛び飛びのデータ列に対してあらかじめソートしておき、挿入ソートを適用する
今回の間隔は
h(n+1) = 3h(n) + 1 という条件で選び出した数列 1, 4, 13, 40, 121, ...
h(1) = 1
このhの中から配列のサイズ / 9の値以下にすると効率が良い。
*/

//0～200の配列を作成。stepは1
$list = range(0, 200 , 1);
//配列をシャッフルする
shuffle($list);

echo 'ソートする配列は';
echo '<pre>';
var_dump($list);
echo '</pre>';

$listCount = count($list);
//まず最初にとびとびの間隔を決める
$step = 1;
for($step_tmp = 1; $step_tmp < $listCount / 9; $step_tmp = $step_tmp * 3 + 1 ){
    $step = $step_tmp;
}

while($step > 0 ){
    //最初は離れたところで交換。次第に細かく。
    for($index = $step; $index < $listCount; $index++ ){
        $tmp = $list[$index];
        //考え方は挿入ソートとほぼ同じ。離れた相手と比較するだけ
        for($j = $index - $step; $j >= 0 && $list[$j] > $tmp; $j = $j - $step ){
            $list[$j + $step ] = $list[$j];
        }
        $list[$j + $step] = $tmp;
    }
    $step = (int) ($step / 3);
}

echo 'ソート完了';
echo '<pre>';
foreach ($list as $value) {
    echo $value;
    echo '<br>';
}
echo '</pre>';

```
PythonからTumblrに画像を投稿する


#準備

##ライブラリをインストール

python3でも使えるpython-tumblpyを使うので，インストール．

	pip install python-tumblpy

##KEYを取得

[Tumblrアプリの登録](http://www.tumblr.com/oauth/apps)をして，OAuth Consumer KeyとSecret Keyを取得．
Application websiteとDefault callback URLは画像を投稿するために用意したtumblrのブログにした．

#第一段階

以下のスクリプトを動作させて，出力されたauth_urlへブラウザでアクセスし，許可する．
すると，URLが飛ばされて，飛んだ先のURLのクエリパラメータにoauth_verifierがあるんで，
それをメモする．

```python:first.py
from tumblpy import Tumblpy

CONSUMER_KEY = '取得したやつ'
CONSUMER_SECRET = '取得したやつ'

t = Tumblpy(CONSUMER_KEY, CONSUMER_SECRET)

auth_props = t.get_authentication_tokens()
auth_url = auth_props['auth_url']

OAUTH_TOKEN = auth_props['oauth_token']
OAUTH_TOKEN_SECRET = auth_props['oauth_token_secret']

print(auth_url)
print(OAUTH_TOKEN)
print(OAUTH_TOKEN_SECRET)
```

#第二段階

第一段階で取得したOAUTH_TOKEN，OAUTH_TOKEN_SECRET，oauth_verifierを使って
以下のスクリプトを実行．
このスクリプトで得られた2つのトークンを投稿に使う．

```python:second.py
from tumblpy import Tumblpy

CONSUMER_KEY = '前のやつ'
CONSUMER_SECRET = '前のやつ'
OAUTH_TOKEN = '取得したやつ' 
OAUTH_TOKEN_SECRET = '取得したやつ'

t = Tumblpy(CONSUMER_KEY, CONSUMER_SECRET, OAUTH_TOKEN, OAUTH_TOKEN_SECRET)

oauth_verifier = 'URLのパラメータのやつ'
authorized_tokens = t.get_authorized_tokens(oauth_verifier)

oauth_token = authorized_tokens['oauth_token']
oauth_token_secret = authorized_tokens['oauth_token_secret']

print(oauth_token)
print(oauth_token_secret)
```

#投稿テスト

ローカルにあるsample.jpgを投稿してみる．
postのidが表示されたら投稿完了．

```python:test.py
from tumblpy import Tumblpy

CONSUMER_KEY = '前のやつ'
CONSUMER_SECRET = '前のやつ'
OAUTH_TOKEN = 'まえ取得したやつ' 
OAUTH_TOKEN_SECRET = 'まえ取得したやつ'

t = Tumblpy(CONSUMER_KEY, CONSUMER_SECRET, OAUTH_TOKEN, OAUTH_TOKEN_SECRET)

blog_url = '投稿するtumblrのURL'

photo = open('sample.jpg', 'rb')
post = t.post('post', blog_url=blog_url, params={'type':'photo', 'caption': 'Test Caption', 'data': photo})
print(post)
```
GitHub 別リポジトリに push する方法

####【経緯】
別プロジェクトで作った機能を一部スピンオフして一つのアプリケーションにしたいと言う要望があったため、アプリケーションを別リポジトリにpushすることとなりました。

####【準備】
取り込み元 `https://github.com/moto/torikomi_moto.git`
取り込み先 `https://github.com/saki/torikomi_saki.git`

####【実際のコマンド】

```
1: $ git clone https://github.com/saki/torikomi_saki.git
2: $ cd torikomi_saki
3: $ git remote add torikomi_repo https://github.com/moto/torikomi_moto.git
4: $ git pull torikomi_repo master
5: $ git add .
6: $ git commit -m 'get torikomi_moto'
7: $ git remote rm torikomi_repo
8: $ git push origin master
```

1)`$ git clone https://github.com/saki/torikomi_saki.git`
一旦取り込み先のリポジトリをcloneする

2)$ cd torikomi_saki
取り込み先のディレクトリへ移動

3)`$ git remote add torikomi_repo https://github.com/moto/torikomi_moto.git`
取込元をremoteに登録

4)$ git pull torikomi_repo master
torikomi_repoからマスターにpull

5)$ git add .
6)$ git commit -m 'get torikomi_moto'

7)$ git remote rm torikomi_repo
torikomi_repoを削除

8)$ git push origin master

5,6,8については add して commit して push
Sublime Text3 で Rspecを実行する

RVMで環境構築しています。
現在利用しているのはRuby2.1+Rails4.1+Rspec3.2です。

[準備]
1)RubyTest と言うパッケージを導入する。
2)Preferences->Package Settings->RubyTest->Settings-Userを開く。
3)以下の設定内容を記載する。

```
{
  "check_for_rvm": true,
  "check_for_bundler": true,
  "run_rspec_command": "rspec {relative_path}",
  "run_single_rspec_command": "rspec {relative_path} -l{line_number}"
}
```

[実行]
Command-shift-R:現在の行のブロック内のテストを実行。
Commanfd-shift-T:現在のファイルのテストを全て実行。
Command-shift-E:最後に実行したテストを再実行。
Unity Remote4を使った実機テストの方法

##Unity Remote4とは
AndroidやiOSの実機をUSBで接続し、Unityで作成したアプリケーションをプレイすることが出来ます。Unityのエディタ上のテスト画面と、デバイスの画面が同期しており、通常のデバッグに加えてデバイスの入力を使用を試すことが可能です。
例えば、

- タッチ
- 加速度
- ジャイロ
- コンパス
- GPS

なんかが取れたりします。

なお、Unity Remoteはデバイス上で実行した時の見た目、操作感覚の大まかな把握が目的なので、画質が低下したりします。実際の動作の確認にはデバイスへのインストールをおすすめします。

公式の解説
http://docs.unity3d.com/ja/current/Manual/UnityRemote4.html

##準備
###Androidデバイス
PlayStoreからUnity Remote4の公式Appをインストールします。
https://play.google.com/store/apps/details?id=com.unity3d.genericremote

###iOSデバイス
AppStoreからUnity Remote4の公式Appをインストールします。
https://itunes.apple.com/us/app/unity-remote-4/id871767552

###Unityエディタ
メニューバーの`Edit > Project > Editor`を押すと、インスペクタにEditorSettingsの設定画面が現れます。その中のDeviceの項目を使用するデバイスに応じて変更します。Android機でのテストであればAny Android Deviceを選択し、iOS機でのテストであればAny iOS Deviceを選択します。

##実行
準備が整ったらあとは起動するだけです。
以下の手順で実行しましょう。
1. デバイスとPCをUSB接続します。
2. デバイスのUnity Remoteアプリを起動します。
3. Unityのエディタ上でプレイボタンで再生します。
4. デバイスの画面にゲーム画面が表示されます。

##うまくいかない時は
はじめに起動しようとした時、Unity Remoteのアプリの初期画面のまま表示が変化しませんでした。そこで、Unity自体を再起動したところうまくいきました。

それでもダメな場合は、USBケーブルを挿しなおしてみたり、Unity Remoteを再起動してみたりしてみると良いと思います。
Node.js ファイルを読み込んで16進数で表示したい

バイナリエディタで開いた感じっていうんですかね。あーゆーのを表示したい。

````hoge.txt
hoge
````


````loadfileAsHex.js

var fs=require("fs");

fs.readFile("hoge.txt",function(err,data){
    console.log(Buffer(data).toString("hex"));
});

結果：686f6765

````
同期でやりたいなら`readFileSync`を使って

````
var data= fs.readFileSync("hoge.txt");
console.log(Buffer(data).toString("hex");
````
ですね。

さらに、**1E2E**みたいに大文字で表示させたいなら`toUpperCase`を最後につけてあげればよいです。

`toString`の引数でいろんな形式で表示できます。
以上。
vimコマンドでよく使うまとめ


Linuxなどで使うvimの使い方についてまとめてみました。

## コマンドモードと入力モード
vimにはコマンドモードと入力モードがあり、それぞれ、
iキーでコマンドモード→入力モード
escキーで入力モード→コマンドモードと、
モードを切り替えることができます。

コマンドモードでは、様々なコマンドを実行することができます。
その中でよく使うコマンドを下記にまとめました。


##保存と終了
| コマンド | 動作 |
|:-------------------|:----------------------|
| :w|編集中のファイルを上書き保存します。|
|:w!|編集中のファイルを読み取り専用でも強制的に保存します。|
| :q|vimを終了します。編集途中の場合は終了できません。|
|:q!|vimを終了します。編集途中でも強制終了できます。|
|:wq|ファイルを保存終了します。|
|:wq!|読み取り専用でもファイルを強制的に保存終了します。|

##削除、コピー、貼り付け
| コマンド | 動作 |
|:-------------------|:----------------------|
| x|カーソル上の1文字削除|
|yl|1文字コピー|
|yy|1行コピー|
|dd|1行カット|
|p|ペースト|

##カーソル移動
| コマンド | 動作 |
|:-------------------|:----------------------|
|gg|ファイルの先頭に移動|
| G|ファイルの末尾に移動|
|k|1行戻る|
|j|1行進む|
|h|1文字戻る|
|l|1文字進む|
|0|行頭に移動|
|$|行末に移動|
[matlab]負の値をゼロにするテク

解析の待ち時間まーひーなので
今日実装した関数を載せようと思います。


負の値をゼロにするっていう感じなんすけど、
Matlabだと綺麗にかけました。


```matlab:cutNegativeToZero.m
function Xnonnegative = cutNegativeToZero( X )
%% Xnonnegative = cutNegativeToZero( X )
% @desc: cut off values below zero
% return +1 -> +1
%        -1 -> 0
%
% ex)
% X
% X =
%     0.8252   -1.0582   -0.2725
%     1.3790   -0.4686    1.0984
% common.cutNegativeToZero(X)
% ans =
%     0.8252         0         0
%     1.3790         0    1.0984

    negative = find(X<0);
    X(negative) = zeros(size(negative));
    Xnonnegative = X;
end
```

シミュレーションで作ったスペクトルにノイズを加えた際に
負の値は取らないはず、とかいうときに使います。

ではでは～
チェックボックスを大きくしたい

![table_with_checkbox01.png](https://qiita-image-store.s3.amazonaws.com/0/6697/fce05971-b3de-37b9-f1c3-a4f4fc6a4b18.png)

ここにチェックボックスを内包した td 要素を持つテーブルがあります (画像は Google Chrome v43 で表示したものです) 。
うーん、ちょっとチェックボックスが小さすぎてクリックしずらいです。
なんとかして大きくできないかなぁ…。

調べてみたら [transform](https://developer.mozilla.org/ja/docs/Web/CSS/transform) という CSS プロパティを発見しました。

```scss
input[type=checkbox] {
  transform: scale(1.5);
}
```

![table_with_checkbox02.png](https://qiita-image-store.s3.amazonaws.com/0/6697/8f3e2626-43ec-84c0-4f12-2bbdd9de680c.png)

＼＼\\٩( 'ω' )و//／／ 大きくなった！ 

ただし transform は CSS3 のプロパティなので、
[Compass](http://compass-style.org/) のミックスインを使ってベンダープレフィックスを付けたほうが安心ですかね。

```scss
@import 'compass';
 
input[type=checkbox] {
  @include scale(1.5);
}
```

この SCSS は以下の様な CSS に変換されます。

```css
input[type=checkbox] {
  -ms-transform: scale(1.5, 1.5);
  -webkit-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
}
```
Virt-installを使用したゲストOSのインストール

# 前の記事
KVMブリッジネットワークの設定
http://qiita.com/TsutomuNakamura/items/e15d2c8c02586a7ae572

# Suse Linux のインストールサンプル 
`virt-install` コマンドを使用したゲストOS のインストール手順について説明していきます。
次のコマンドはCentOS のゲストOS を作成するサンプルコマンドです。

```text
# virt-install \
    --name=kvm_centos7 \
    --vcpus=2 \
    --memory=1000 \
    --disk path#/var/kvm/disk/kvm_centos7/disk.img,size20  \
    --network=bridge:br0 \
    --arch=x86_64 \
    --cdrom=/var/kvm/iso/CentOS-7.0-1406-x86_64-Minimal.iso
```


上記コマンドのオプションの意味は次の通りです。



* virt-install コマンドの主なオプション
<table><tbody>
  <tr>
    <th> オプション</th>
    <th> 引数例</th>
    <th> 説明</th>
  </tr>
  <tr>
    <td> --name=NAME</td>
    <td> kvm_centos7</td>
    <td> KVM ゲストOS の名前を指定する</td>
  </tr>
  <tr>
    <td> --vcpus=VCPUS</td>
    <td> 2</td>
    <td> ゲストOS の仮想CPU コア数を指定する</td>
  </tr>
  <tr>
    <td> --memory#MEM[,OPT1VAL][...]</td>
    <td> 1024</td>
    <td> ゲストOS のメモリサイズをMB 単位で指定する。</td>
  </tr>
  <tr>
    <td> --disk /path/to/storage[,OPT1=VAL1]</td>
    <td> path#/var/kvm/disk/kvm_centos7/disk.img,size20</td>
    <td> ゲストOS が使用するストレージを指定する。指定するものは、ファイルもできるし、ブロックデバイスもできる。
存在しないファイルを指定した場合は、新規にストレージを作成する。
リモートホストを指定した場合は、virt-install コマンドは、libvirt storage API を使用して与えられたパスに自動的にストレージの作成を試みる。</td>
  </tr>
  <tr>
    <td> --network=NAME</td>
    <td> bridge:br0</td>
    <td> ゲストOS が使用するネットワークインタフェースを指定する。
指定できるインタフェースはvirsh コマンドラインを使用して、リストアップしたり作成したり、削除したりすることができる。</td>
  </tr>
  <tr>
    <td> --arch=ARCH</td>
    <td> armv7l</td>
    <td> ネイティブとは異なるアーキテクチャをゲストOS のアーキテクチャとして指定できる。指定しない場合はネイティブのアーキテクチャとなる。</td>
  </tr>
  <tr>
    <td> --cdrom=CDROM</td>
    <td> /dev/cdrom</td>
    <td> ゲストOS で使用するCD ROM デバイスを指定する。
引数に指定できるものは、デバイスファイルやiso ファイルなどが可能</td>
  </tr>
</tbody></table>

その他の詳細オプションについては`man virt-install` コマンドを参照

# KVM ゲストOS 定義ファイルの場所について
`virt-install` コマンドを使用してゲストOS を作成すると、`/etc/libvirt/qemu/` ディレクトリ以下に`guest_name.xml` というファイル名で定義ファイルが作成されます。
`virt-install` コマンドを使用することで、XML 形式のファイルを直接編集することなくゲストOS を作成することができますが、こちらを編集することでもゲストOS の状態を編集することができます。。
File APIを使ってJavaScriptで画像を読み込む。canvasを使って画像を出力

### [こちらに移行しました。→ 「FileAPIで画像を読み込み → canvasに描画」 (2018/11/24)](https://tech-blog.s-yoshiki.com/entry/2)

#概要
JavaScriptとHTMLを使って画像を『読み込む』&『書き出す』という簡単なコードを記述します。
canvasとFile APIを使用します。
必要なものはhtmlとjsファイルとcanvasに対応したブラウザだけです。


#画像の読み込み
**HTMLサイド**

```html:index.html
<input type="file" id="selfile">
```


**JavaScriptサイド**

```js:.js
var dataUrl;
var objFile = document.getElementById("selfile");
objFile.addEventListener("change", function(evt) {
    var file = evt.target.files;
    var reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onload = function() {
        dataUrl = reader.result;
    };
}, false);
```
dataUrlにはURL(文字列)が代入されます。
#画像の出力
```js:.js
document.getElementById("xxx").innerHTML="<img src='"+dataUrl+"' alt='none'>";
/*xxxは任意のHTMLタグ*/
```
画像ファイルを読み込んだ後に実行します。
imgタグとして任意のタグの中に出力します。

***注意***
画像のサイズが大きくなると、読み込む時間が大きくなるため、これを考慮した関数を書く必要があります。
#Canvasを使って画像を出力
**HTMLサイド**

```html:index.html
<canvas id="canvas">
画像を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
```

**JavaScriptサイド**

```js:.js
function main() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        var context = canvas.getContext('2d');
        var image = new Image();
        image.src = dataUrl;
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0);
    }
}
```

main()が実行されるとcanvasに画像が表示されます

#参考
https://tech-blog.s-yoshiki.com/entry/2
MACにMAMP、NetBeans、XdebugでPHPをトレースする方法

#環境
MAC: Yosemite(10.10.3)
MAMP: 3.2.1
NetBeans: 8.0.2
Xdebug: 2.2.5

#前提
MACにMAMPがインストールされている事とする

#PHPバージョンの確認
MAMPのphpinfoで、PHPのバージョンを確認する。
私の環境では、5.6.7。
![phpinfo-1.png](https://qiita-image-store.s3.amazonaws.com/0/77171/0d4ffe3c-cfea-4be7-d735-83bf99ce9e86.png)




#Xdebugを有効化
MAMPをインストールすると、Xdebugも一緒にインストールされています。
しかし、デフォルトではXdebugは無効化されている為、有効化する必要があります。

まず、ターミナルを開いて下記コマンドで、php.iniの場所を確認する。

```
$ find /Applications/MAMP -name "php.ini"
/Applications/MAMP/bin/php/php5.1.6/conf/php.ini
/Applications/MAMP/bin/php/php5.2.17/conf/php.ini
/Applications/MAMP/bin/php/php5.3.29/conf/php.ini
/Applications/MAMP/bin/php/php5.4.39/conf/php.ini
/Applications/MAMP/bin/php/php5.5.23/conf/php.ini
/Applications/MAMP/bin/php/php5.6.7/conf/php.ini
/Applications/MAMP/conf/php5.1.6/php.ini
/Applications/MAMP/conf/php5.2.17/php.ini
/Applications/MAMP/conf/php5.3.10/php.ini
/Applications/MAMP/conf/php5.3.13/php.ini
/Applications/MAMP/conf/php5.3.14/php.ini
/Applications/MAMP/conf/php5.3.20/php.ini
/Applications/MAMP/conf/php5.3.27/php.ini
/Applications/MAMP/conf/php5.3.28/php.ini
/Applications/MAMP/conf/php5.3.29/php.ini
/Applications/MAMP/conf/php5.3.5/php.ini
 :
 :
```

今回の場合は、PHP5.6.7なので「/Applications/MAMP/bin/php/php5.6.7/conf/php.ini」となる。

該当ファイルを念のため複製してバックアップをとり、開き、[xdebug]の箇所を探す。

```
[xdebug]
;zend_extension="/Applications/MAMP/bin/php/php5.6.7/lib/php/extensions/no-debug-non-zts-20131226/xdebug.so"
```

私の環境では、上記のように「zend_extension」がコメントアウト状態になっていた為、コメントを外し、下記項目を追加する。

```
 xdebug.remote_enable=on
 xdebug.remote_handler=dbgp
 xdebug.remote_mode=req
 xdebug.remote_host=localhost
 xdebug.remote_port=9000
 xdebug.idekey=netbeans-xdebug
 xdebug.profiler_enable=1
 xdebug.profiler_output_dir="/Applications/MAMP/tmp"
```

最終的に、こうなる。

```
 zend_extension="/Applications/MAMP/bin/php/php5.6.7/lib/php/extensions/no-debug-non-zts-20131226/xdebug.so"
 xdebug.remote_enable=on
 xdebug.remote_handler=dbgp
 xdebug.remote_mode=req
 xdebug.remote_host=localhost
 xdebug.remote_port=9000
 xdebug.idekey=netbeans-xdebug
 xdebug.profiler_enable=1
 xdebug.profiler_output_dir="/Applications/MAMP/tmp"
```

保存して、MAMPを再起動。
Xdebugが有効化されたか、phpinfoを確認する。
![phpinfo-2.png](https://qiita-image-store.s3.amazonaws.com/0/77171/3a194b96-86a6-0959-8796-2402d3415cff.png)

Xdebugの項目が表示されていれば成功。

#NetBeans設定
XdebugをNetBeansで使う為の設定を行う。
NetBeans起動後、「NetBeans」→「Preferences」→「PHP」→「一般」の「PHP5 インタプリタ」項目に使用するPHPのパスを記入する。
今回は、「/Applications/MAMP/bin/php/php5.6.7/bin/php」となる。

![スクリーンショット-2015-06-13-15.03.58.jpg](https://qiita-image-store.s3.amazonaws.com/0/77171/90d4733a-0c85-74ca-698c-511975891d67.jpeg)

そして、「デバッグ」タブの「デバッガ・コンソールを表示」にチェックを入れる。

![スクリーンショット-2015-06-13-15.08.05.jpg](https://qiita-image-store.s3.amazonaws.com/0/77171/cbb2251c-d997-edae-4256-130dcabe1871.jpeg)

これで、NetBenasからPHPのデバッグ(トレース)が出来るようになる。
Dropwizardをjava8で動かす


[Dropwizard java8 Bundle](https://github.com/dropwizard/dropwizard-java8)を導入して動かすところまで。 
これをやると`java.util.Optional`とDate/Time API (JSR-310)が色々なところで使えるようになる。

##pom.xml

Java8 Bundleを追加。

```
<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <dropwizard.version>0.8.1</dropwizard.version>
    <dropwizard.java8.version>0.8.0-1</dropwizard.java8.version>
</properties>
```

```
<dependency>
  <groupId>io.dropwizard.modules</groupId>
  <artifactId>dropwizard-java8</artifactId>
  <version>${dropwizard.java8.version}</version>
</dependency>
<dependency>
  <groupId>io.dropwizard.modules</groupId>
  <artifactId>dropwizard-java8-auth</artifactId>
  <version>${dropwizard.java8.version}</version>
</dependency>
<dependency>
  <groupId>io.dropwizard.modules</groupId>
  <artifactId>dropwizard-java8-jdbi</artifactId>
  <version>${dropwizard.java8.version}</version>
</dependency>
```

`maven-compiler-plugin`に設定をjava8にする。

```
<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-compiler-plugin</artifactId>
  <version>3.1</version>
  <configuration>
    <source>1.8</source>
    <target>1.8</target>
    <encoding>UTF-8</encoding>
   </configuration>
</plugin>
```

##Applicationクラス

```
@Override
public void initialize(Bootstrap<ExampleConfiguration> bootstrap) {
		
	//for Java8 bundle.
	bootstrap.addBundle(new Java8Bundle());
...
```

##動かしてみる
これはjava8だからといって特別なことはないけど一応。

```
mvn package
```

```
java -jar example.jar server example.yml
```

##サンプル
Dropwizard＋Java8ですぐに動かせる(たぶん)サンプルプロジェクトをGithubにあげておきました。
[https://github.com/master-of-sugar/dropwizard-java8-example](https://github.com/master-of-sugar/dropwizard-java8-example)
連続するリストを横並びに等分表示する...レスポンシブへの足がかり

簡単なCSSで連続するリストを横並びに等分表示してみた。プログラマー未満人にはレスポンシブへの足がかりにならないかと...

```html
<div id="item-list">
<ul class="cols-3">
<li>商品01</li>
<li>商品02</li>
<li>商品03</li>
<li>商品04</li>
<li>商品05</li>
<li>商品06</li>
</ul>
</div>
```

```css
/* 便宜的に...すべての余白を0に、box-sizing を border-boxに
* {  
  margin:0;
  padding:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#item-list {
  background:#ccc;
  padding:20px 10px 0 10px;
  margin-bottom:20px;
}

#item-list ul{
  margin-left:-20px;/１カラムのpadding分マイナスマージン*/
  overflow:hidden;
  background-color:transparent;
}

#item-list ul li {
  list-style-type:none;
  float:left; /*floatで横並びに*/
  padding-left:20px;/*カラム間のガター*/
  margin-bottom:20px;
  text-align:center;
}

ul.cols-1 li {width: 100%;}
ul.cols-2 li {width: 50%;}
ul.cols-3 li {width: 33.33333%;}
ul.cols-4 li {width: 25%;}
ul.cols-5 li {width: 20%;}
ul.cols-6 li {width: 16.66666%;}
ul.cols-7 li {width: 14.28571%;}
ul.cols-8 li {width: 12.5%;}

.inner{ /*カラムの内側*/
  margin:0;
  height:100%;
  background:white;
}

@media only screen and (max-width: 767px) {
  ul.cols-4 li,ul.cols-5 li,ul.cols-6 li,ul.cols-7 li,ul.cols-8 li{
	  width: 33%;/*４列以上は３列に*/
  }
  ul.cols-3 li{
	  width:50%;/*３列は２列に*/
  } 
}

@media only screen and (max-width: 479px) {
  ul[class*='cols-'] > li{
	  width: 100%;/*すべてを１列に*/
  }
}

```

```js
<script type = "text/javascript" src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript" src = "jquery.matchHeight.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
  $("#item-list ul li").wrapInner("<div class='inner'></div>");
  $("#item-list ul li >.inner").matchHeight();
});
</script>
```

サンプル
http://qitailang.small.jp/misc/equal_cell/sample2.html
LumenのDB設定(Heroku Postgres)

### ポート番号が5432ではないのでDB_PORTという項目を追加する

~~~ php:.env
DB_CONNECTION=pgsql
DB_HOST=ec2-11-11-11-111.compute-3.amazonaws.com
DB_DATABASE=dddddddddddddd
DB_USERNAME=uuuuuuuuuuuuuu
DB_PASSWORD=ppppppppppppppppppppppppppp
DB_PORT=5672
~~~
express-generator で作成したアプリケーションが heroku で動作しないときに確認すべき点



デプロイ直後は表示はされるもののスタイルシートが読み込めておらず、リロードすると `Application Error` と表示されてしまう。

## 対応方法

`express-generator` で生成された `app.js` は下記の通りです。

```app.js
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('node-compass')({mode: 'expanded'}));
app.use(express.static(path.join(__dirname, 'public')));
```

一番下にある static の指定を上に移動させる

```app.js
var app = express();

// ↓ここに移動
app.use(express.static(path.join(__dirname, 'public')));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('node-compass')({mode: 'expanded'}));
// ↓これを上に移動
// app.use(express.static(path.join(__dirname, 'public')));
```

動いた。

### 参考

[Node.js with express app crashes on Heroku, works locally](http://stackoverflow.com/questions/24836094/node-js-with-express-app-crashes-on-heroku-works-locally)
github用private-key切り替えメモ

# make rsa key
まずは、pub-keyとprivate-keyを生み出す

```.sh
cd ~/.ssh
ssh-keygen -t rsa -C "hogehoge@xxx.com" hogehoge_private_rsa
pbcopy < ~/.ssh/hogehoge_private_rsa.pub
```


# config
vim ~/.ssh/config

* 次にIdentityFileを切り替える
* 本命のメインコミットはid_rsaにしておいてサブをhogehogeにする
* 切り替えようのシェルを作ってaliasで叩いてもよし

```.sh
Host github.com
  HostName github.com
  User git
  Port 22
  IdentityFile ~/.ssh/hogehoge_private_rsa
  #IdentityFile ~/.ssh/id_rsa
  TCPKeepAlive yes
  IdentitiesOnly yes
```
備忘録：bashで来月の月初の日や日数を求める

```
echo 来月の月初の日
echo $(date +%Y/%m/%d -d "-$(($(date +%d)-1)) days + 1 month")

echo 来月の年
echo $(date +%Y -d "-$(($(date +%d)-1)) days + 1 month")

echo 来月の月
echo $(date +%m -d "-$(($(date +%d)-1)) days + 1 month")

echo 来月の日数
echo $(date -d "$(date +%Y/%m/%d -d "-$(($(date +%d)-1)) days + 1 month") +1month -1day" +%d)
```
備忘録：perlの複雑なhashの展開

`$access{$hour}{$min}{$sec}`

というハッシュに秒間アクセス数が格納されているとします。 
これをループで展開するには次のように書きます：

```
foreach my $hour (sort keys(%access)) {
  foreach my $min (sort keys %{$access{$hour}}) {
    foreach my $sec (sort keys %{$access{$hour}{$min}}) {
      print $access{$hour}{$min}{$sec}."\n";
    }
  }
}
```
Dropwizardで作ったアプリをHerokuにデプロイする


##仕掛けを作る
###HerokuのPostgeSQLを使うための仕掛け
HerokuのPostgreSQLを使うためにデータベース設定を少しだけ細工する。  
ローカルでもHerokuでも動かせるためにHeroku用の`DataSourceFactory`を作る。

```
public class HerokuDataSourceFactory {
	
	private static Logger logger = LoggerFactory.getLogger(HerokuDataSourceFactory.class);
	
	public static DataSourceFactory get(String databaseUrl){
		logger.info("Creating DB for " + Objects.requireNonNull(databaseUrl));
		try {
			URI dbUri = new URI(databaseUrl);
			final String user = dbUri.getUserInfo().split(":")[0];
			final String password = dbUri.getUserInfo().split(":")[1];
			final String url = "jdbc:postgresql://" + dbUri.getHost() + ':' + dbUri.getPort() + dbUri.getPath()
					+ "?ssl=true&sslfactory=org.postgresql.ssl.NonValidatingFactory";
			DatabaseConfiguration<Configuration> databaseConfiguration = new DatabaseConfiguration<Configuration>() {
				@Override
				public DataSourceFactory getDataSourceFactory(Configuration configuration) {
					//TODO 接続設定以外は設定ファイルから読みたい
					DataSourceFactory dsf = new DataSourceFactory();
					dsf.setUser(user);
					dsf.setPassword(password);
					dsf.setUrl(url);
					dsf.setDriverClass("org.postgresql.Driver");
					dsf.setAutoCommitByDefault(false);
					return dsf;
				}
			};
			return databaseConfiguration.getDataSourceFactory(null);
		} catch (URISyntaxException e) {
			logger.error(e.getMessage());
			return null;
		}
	}
}
```

続いて`Configuration`クラスに仕掛けする。

```
	@Valid
	@NotNull
	@JsonProperty("database")
	private DataSourceFactory database = new DataSourceFactory();

	public DataSourceFactory getDataSourceFactory() {
		String databaseUrl = System.getenv("DATABASE_URL");
		if(databaseUrl == null){
			logger.info("Standard DataSourceFactory url=" + database.getUrl());
			return database;
		}
		DataSourceFactory dsf = HerokuDataSourceFactory.get(databaseUrl);
		logger.info("Heroku DataSourceFactory url=" + dsf.getUrl());
		return dsf;
	}
```

これでローカルで実行するときは設定ファイルから、Heroku上で実行するときには`System.getenv("DATABASE_URL")`で取得することができる。

###Herokuで実行するための仕掛け
`Procfile`を作成する。

```
web: java $JAVA_OPTS -jar target/dropwizard-app.jar db migrate dropwizard-app.yml && java $JAVA_OPTS -Ddw.server.connector.port=$PORT -jar target/dropwizard-app.jar server dropwizard-app.yml
```

設定ファイルをsimpleサーバーモードで起動するようにする。

```
server:
  type: simple
  applicationContextPath: /
  connector:
    type: http
    port: 8080
```

##ローカルで動かしてみる

```
mvn package
```

`foreman`を使用して起動する。

```
foreman start
```

`http://localhost:5000`にアクセスして確認する。

##Herokuにデプロイしてみる

一応最初から。
プロジェクトルートをgitレポジトリ化してコミットする。

```
git init
git add .
git commit -m "Initial commit"
```

Herokuアプリを作成。

```
heroku create <application name>
```

PostgreSQLアドオンを追加。

```
heroku addons:create heroku-postgresql:dev
```

Herokuにpushする。

```
git push heroku master
```

アプリを開く。

```
heroku open
```

問題なく稼働することが確認できました。

[参考](https://github.com/alexroussos/dropwizard-heroku-example)
【Unity】 スクリプトから新しいタグを追加する

Unityでスクリプトから新しいタグを追加する方法について。バージョンは5で、スクリプト例はC#です。

## スクリプト

以下の例を適当なゲームオブジェクトにコンポーネントとして追加します。実行すると、 `AddTag` メソッドに渡した文字列が新しいタグとして追加されていきます。

```csharp:TagHelper.cs
using UnityEngine;
using UnityEditor;

public class TagHelper : MonoBehaviour {

	void Start () {
		AddTag("HogeTag01");
		AddTag("HogeTag02");
		AddTag("HogeTag03");
	}

	static void AddTag(string tagname) {
		UnityEngine.Object[] asset = AssetDatabase.LoadAllAssetsAtPath("ProjectSettings/TagManager.asset");
		if ((asset != null) && (asset.Length > 0)) {
			SerializedObject so = new SerializedObject(asset[0]);
			SerializedProperty tags = so.FindProperty("tags");

			for (int i = 0; i < tags.arraySize; ++i) {
				if (tags.GetArrayElementAtIndex(i).stringValue == tagname) {
					return;
				}
			}
			
			int index = tags.arraySize;
			tags.InsertArrayElementAtIndex(index);
			tags.GetArrayElementAtIndex(index).stringValue = tagname;
			so.ApplyModifiedProperties();
			so.Update();
		}
	}
	
	void Update () {
	}
}
```

参考ページの例では、新しいタグを常に配列の0番目に挿入していましたが、それだとTag0だったタグが新しく追加される度にTag1、Tag2...と移動してしまいます。結果として、あるゲームオブジェクトにTag0のタグをセットしていた場合、それが一番最後に追加したタグに変わってしまう、などの良くないことが起こります。なので、この例ではtagsの末尾に新しいタグを追加していくようにしました。

## 結果

![tag_helper.png](https://qiita-image-store.s3.amazonaws.com/0/54587/717d5872-200f-7583-24a0-380a78ff2ec9.png)

スクリプトで追加したタグが反映されました。
ただ、この方法で追加されたタグは当然ながらゲーム終了と共に無くなります。開始前にも存在していないので、使い時としては、ゲーム中に生成されるゲームオブジェクトに連番で動的にセットしたいタグがある場合などでしょうか。

## 参考ページ

[Is it possible to create a tag programmatically?](http://answers.unity3d.com/questions/33597/is-it-possible-to-create-a-tag-programmatically.html)
Ubuntuのファイルマネージャをnemoに変更

# Nautilusは使いにくい（主観）

のでnemoに変更して利用してますが、いつも忘れるのでメモ。
* F3で分割画面がでるのは素敵

## nemo-terminalで起動するシェルをzshに変更

dconf-editor を利用して値を変更できます。
/org/nemo/extensions/nemo-terminalのterminal-shellで変更できるようです。

## デフォルトのファイルマネージャにする
```bash
xdg-mime default nemo.desktop inode/directory application/x-gnome-saved-search
gsettings set org.gnome.desktop.background show-desktop-icons false
gsettings set org.nemo.desktop show-desktop-icons true
```

## 参考
http://thjap.org/linux/ubuntu/6156.html
PowerShellでexpressコマンドを使う

# 概要
Node.js Command Prompt(以下NCP)だと起動時に.batを実行することでexpressコマンドが使えるようになっているんですが、PowerShellだとうまくいかない。PowerShellのほうが使いやすいのでこちらでもできないかと思い、やってみました。とはいえやっていることは環境変数の設定だけなので大したことではありません。

# 前提
PowerShellからps1ファイルを実行できるように設定してあること
[参考]
http://www.atmarkit.co.jp/ait/articles/0805/16/news139.html
https://technet.microsoft.com/ja-jp/scriptcenter/powershell_owner05.aspx

# 主な手順
## 1.Powershellのショートカットを作成
任意の場所にPowerShell.exeへのショートカットを作成し、ショートカットのプロパティを下記のように設定する。
PowerShell起動時にnodejsフォルダ内のnodevars.ps1を実行するように設定しています。
-noexitはスクリプト実行後もPowerShellが終了しないようにしています。

```lang:PowerShellのショートカットのオプション
%SystemRoot%\system32\WindowsPowerShell\v1.0\powershell.exe -noexit &'C:\Program Files\nodejs\nodevars.ps1'
```

## 2.ps1スクリプトを作成
このスクリプト内で環境変数を設定します。
作ったスクリプトの場所と、expressのあるAPPDATA/npmを環境変数に設定しています。
このスクリプトを、1.で指定した場所(ここではC:\Program Files\nodejs\)にnodevars.ps1という名前で保存します(管理者権限が必要です)。

```nodevars.ps1
$scriptPath = $MyInvocation.MyCommand.Path
$scriptPath = Split-Path $scriptPath -Parent 
$env:path = $env:path + ";" + $env:APPDATA + "/npm;" + $scriptPath
```

以上。
Reactから外部のライブラリを直接使う


Reactで例えばグラフなんかを生成したい場合、d3やChartistを使いたくなる。
いくつかグラフ用のコンポーネントは散見されるが、簡単なものであればスッと利用できそうだが、ちょっと複雑なカスタマイズなどするにはなかなか厳しそうに見えた。

なのでそのまま使うにはどうするかみたいなのを考えた。

（基本的に元のライブラリにパフォーマンスが引きづられがちになったりと若干の邪道感があるやり方になっているのでそこらへんは要注意）


# Example
今回は[Chartist](https://gionkunz.github.io/chartist-js/)を使った。

下記のような感じでRendererを用意する。

```ChartistRenderer.js
class ChartistRenderer{
  render(targetSelector, props){
    let {data} = props
    // 必要があればここでデータ加工したり。
    var chart = new Chartist.Bar(targetSelector, {
      labels: data[0],
      series: [ data[1] ]
    })
  }
}
```

関数名とかはReact.Componentに気持ちだけ合わせておく。
この程度ならComponent側にメソッドとして持たせても良かったのだけど、実際に扱おうとするとこの辺りの処理が肥大化するし、Reactからそこらへんの感心事は切り出したい感じしたのでやっておく。

で、あとはコンポーネント。

```Chart.jsx
class Chart extends React.Component{
  constructor(){
    super()
    this.chartClassName = "chart"
    this.renderer = new ChartistRenderer()
  }
  componentDidMount(){
    this.renderChart()
  }
  componentDidUpdate(){
    this.renderChart()
  }
  renderChart(){
    var targetSelector = "." + this.chartClassName    
    this.renderer.render(targetSelector, this.props)    
  }
  render(){
    return <div className={this.chartClassName}  ></div>
  }
}
```
renderではChartistのコンテナとなるdivだけ作る。
そして`componentDidUpdate`と`componentDidMount`でこのコンテナに対してrenderingをする。
renderの際にレンダリング対象のクラス名とデータ（propsを利用）を渡す。
propsでデータを渡すことで、propsがが変更されれば`componentDidUpdate`がフックされてくれるという仕組み。

あとは起動部分。適当に。

```app.jsx
var data = [
  ["foo", "baz", "bar"],
  [1, 10, 20]
]

var body = document.querySelector('.container')
React.render(<Chart data={data} />, body);

```

おしまい！

### サンプル
jsbinのbabelモードうまく使えnなかったのでcodepenで
http://codepen.io/suisho/pen/GJEwaP/

![A_Pen_by_suisho_と_ReactでReact以外のライブラリをそのまま使う_と_Developer_Tools_-_http___codepen_io_suisho_pen_GJEwaP_.png](https://qiita-image-store.s3.amazonaws.com/0/7307/0bb58b20-d045-587d-9a23-234d184e9eb9.png "A_Pen_by_suisho_と_ReactでReact以外のライブラリをそのまま使う_と_Developer_Tools_-_http___codepen_io_suisho_pen_GJEwaP_.png")

# 参考
あとで調べたらd3で似たようなこと考えている人いた。
http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/
phpのconfigure設定を確認する方法

phpのソースがおいてある場所で

```
php -i
```

ってする。

例えば

```
/usr/local/bin/php -i
```
ってやると、

```
Configure Command =>  './configure'  '--with-apxs2=/data/bin/apxs' '--with-openssl' '--enable-mbstring'  '--enable-zend-multibyte'
```

とか出てくる。