OmniAICreator/Qiita-1.07M huggingface dataset:
[Swift]Swiftの関数はここが違う!関数を引数にする関数を使おう!!


俺の名はケンヤ。難事件をいくつも迷宮入りさせたニート。しかし ある時謎の組織に入社し薬を飲まされ身体が縮んで **Braian** になっちゃった。

**まず事前知識として必要そうなことを書きとめてます。**

###第一級オブジェクト

```

Swiftの関数は第一級オブジェクトとして扱う事ができる。第一級オブジェクトとは、関数を 『一つのオブジェクト』として扱えるということです。そのため、関数を変数に格納したり引数で関数をやりとりするようなことが可能になります。
第一級オブジェクトでは生成、代入、演算、（引数・戻り値としての）受け渡しといったその言語における基本的な操作を制限なしに使用できる対象のことである。
```

**第一級オブジェクトは特徴として下記のようになっている**
*無名のリテラルとして表現可能である。
*変数に格納可能である。
*データ構造に格納可能である。
*それ自体が独自に存在できる（名前とは独立している）。
*他のものとの等値性の比較が可能である。
*プロシージャや関数のパラメータとして渡すことができる。
*プロシージャや関数の戻り値として返すことができる。
*実行時に構築可能である。
*表示可能である。
*読み込むことができる。
*分散したプロセス間で転送することができる。
*実行中のプロセスの外に保存することができる。


hahaha．．．意味分からん。
少し振り返るか、そもそも関数とは?
###関数
引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結果を返す一連の命令群。多くのプログラミング言語では、関数がプログラムを構成する要素となっている。多くの言語や処理系では、開発者の負担を軽減するため、よく使う機能が関数としてあらかじめ用意されている。
例えば「二つの数を受け取って、それらを合計した結果を返す」という命令は関数である。この関数をfと呼ぶとすると、「関数fに引数1と2を与えると3という結果が返ってくる」ということになる。
記述してみると，，，

```
func f(1, 2) -> 3 {
	1 + 2
	return 3
}
```



必ずしも数字を扱うものだけを指すのではなく、 **「入力された文字を画面に表示する関数」** なども存在する。言語によっては引数を取らない関数や結果を返さない関数を作成できるものもあるが、通常はそうしたものは関数とは呼ばないことが多い。

####関数定義の文法

```
func 関数名(引数) -> 返り値の型 {
	return 返り値
}
```

だそうです苦笑

###関数を引数にとる関数
Sampleコードをかきますね

```
func myMap(array: [Int], function: (Int) -> Int) -> [Int] {
    var a: [Int] = []
    for value in array {
        a.append(function(value))
    }
    return a
//    return array.map(function)
}
```

引数に[Int]を受け取り返り値で[Int]を返している関数です。
関数を引数にとる関数ですね。
では配列を作りmapを使用して全部の値に2をかけてみます

```
func myMap(array: [Int], function: (Int) -> Int) -> [Int] {
    var a: [Int] = []
    for value in array {
        a.append(function(value))
    }
    return a
//    return array.map(function)
}

let before: [Int] = [1 ,2 ,3 ,4]
let after: [Int] = myMap(before, {(value: Int) -> Int in
    return value * 2
})
// [2, 4, 6, 8]
```

うまくいったようです！！
うーーん理解したとは言えませんが、関数に慣れる為にも積極的に使っていこうと思います。

不備やアドバイスなどがあればコメントしていただけると幸いです。
引き続きSwiftを好きになってみたいとおもいます。
wkhtmltopdfでWEBサイトのキャプチャをコマンドからとる


## wkhtmltopdfのインストール
業務上、サイトのキャプチャを毎回大量に印刷しなければならない為
コマンドからWEBサイトのキャプチャを撮れるwkhtmltoimageを使ってみたので利用メモ。

まず[wkhtmltopdf](http://wkhtmltopdf.org/downloads.html)にアクセスし、Downloadから対応OSのパッケージを落とす。

パッケージマネージャを使うと、そのままグローバルパスにコマンドがインストールされるのでターミナルを開き`$ wkhtmltopdf -H`でドキュメントが表示される。

`$ wkhtmltopdf http://google.co.jp ~/hoge.pdf`
でグーグルのトップページがtest.pdfでキャプチャされる。

他にPNG、GIFでもファイルは作成されるが開くことが出来なかったので現状で確認できたのはPDFのみ。

## BASIC認証対応オプション
`$ wkhtmltopdf --username ユーザ名 --password パスワード http://hogehoge.co.jp ~/hoge.pdf`

## mac上で動くサービス作りました
Automatorでmac上で動くサービスを作成しました。
テキストを選択して、右クリックからサービス内urlCaptureToPDFを実行するとデスクトップにPDFが作成されます。

下記ファイルをダウンロード後、~/Library/Services以下に移動すると使えると思います。

[Automaorソース](https://www.dropbox.com/sh/m4vd21vovflyb0f/AADkYePmjkbM7SBd56D2kGr2a?dl=1)
Ruby2.2のDockerfile

ubuntu14.04をベースにruby2.2をソースからインストール。
dockerイメージなのでrbenvなどは介さない方針で。
各所で書かれているように、コンパイル時に2.1以前で必要無かったlibffi-devがいる模様。

```Dockerfile
FROM ubuntu:14.04

MAINTAINER user@example.com

RUN sed -i -e "s:http\://archive.ubuntu.com/:http\://ubuntutym.u-toyama.ac.jp/:g" /etc/apt/sources.list && \
    apt-get -qq update && \
    DEBIAN_FRONTEND=noninteractive \
    apt-get -qqy --no-install-recommends install \
    build-essential \
    curl \
    zlib1g-dev \
    libssl-dev \
    libreadline-dev \
    libffi-dev && \
    apt-get clean && \
    curl -O http://ftp.ruby-lang.org/pub/ruby/2.2/ruby-2.2.0.tar.gz && \
    tar -zxvf ruby-2.2.0.tar.gz && \
    cd ruby-2.2.0 && \
    ./configure --disable-install-doc && \
    make && \
    make install && \
    cd .. && \
    rm -r ruby-2.2.0 ruby-2.2.0.tar.gz

RUN gem install --no-ri --no-rdoc bundler
```
FuelPHPのログを環境毎に出力してあげる

デフォルトだと環境を変えても同じ日付のファイルに書き込まれて区別できないので、環境毎のフォルダに出力されるように設定

```php:fuel/app/config/config.php
	'log_path'         => APPPATH.'logs/'.Fuel::$env.'/', 
```

* aliasしておくと便利

```shell-session:~/.bash_profile
alias devlog='tail -n 30 -f fuel/app/logs/development/`date +\%Y/\%m/\%d`.php'
```
UIデザイナー的なヒトがgodo（Go言語）までやってみた件


# はじめに

最初に自己紹介。[Gunosy inc.](http://gunosy.co.jp)でUI DesignとFront-End EngineerとUX Architectぽいことをやっています。GunosyはGo言語を多く取り入れているので、フロントエンドでも多いに関わってきます。
あとGo 1.4でAndroidを正式にサポートしたこともあり、Go言語は触れておいた方が良さげです。

というわけで1日遅れのメリークリスマス…

# <img src="https://qiita-image-store.s3.amazonaws.com/0/47955/c4acc589-bcc1-29f7-b8e6-cab0881f90c8.png" width="50px" /> とりま、Goをインストール

Terminalを起動します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/47955/288f8adb-1aaa-4736-40ac-8856ff4ce44a.png" width="20%" />

起動したら、以下を入力。

```
$ brew install go --cross-compile-all
==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/go-1.4.mave
######################################################################## 100.0%
==> ./make.bash --no-clean
==> ./make.bash --no-clean
…
==> Summary
  /usr/local/Cellar/go/1.4: 7695 files, 1.5G, built in 6.4 minutes
$ go version
go version go1.4 darwin/amd64
```

**インストール終了。**

![go-install.png](https://qiita-image-store.s3.amazonaws.com/0/47955/ff7306b5-b22a-fbc8-fab6-18f5b4161282.png)


# GOPATHを設定する

さて、Go言語のパッケージ管理の設定。go get hogehogeで任意のライブラリをインストールできるようになります。

### zshの場合
```
echo export GOPATH=$HOME/.go/ >> ~/.zshrc
echo export PATH=$HOME/.go/bin >> ~/.zshrc

```

### bashの場合
```
echo export GOPATH=$HOME/.go/ >> ~/.bashrc
echo export PATH=$HOME/.go/bin >> ~/.bashrc

```

これでgo getできるようになっているはずなので、試しにGodo関連の何かをgo getしてみます。

```
go get -u gopkg.in/godo.v1/cmd/godo
go get -u github.com/mgutz/goa
```
なにもエラーがでなければ成功ぽいです。ふむ。

# Godo

今回はフロントエンドの人には関わり深いGo言語版Task Runner **[Godo](https://github.com/go-godo/godo)** を試してみます。

ちなみに、既にフロントエンドでよく使う？以下のものはあるようです。

- Jade => [Ace](https://github.com/yosssi/ace)
    - JadeやSlimを参考につくられているテンプレートエンジンぽいです。
- Sass, Stylus => [go-sass](https://github.com/SamWhited/go-sass)
    - 他にも[GoSass](https://github.com/moovweb/gosass)
- Watcher => [Goat](https://github.com/yosssi/goat)

あとはSprite画像（gulpだとSprite Smith）やwebfont生成、Browserify、BowerMainFileがあると一通りは問題ない感じですが、その辺はみつけられませんでした。


## ま、とりあえずGodo動かしてみる。

```
cd $GOPATH/src
mkdir github.com/tyshgc
git clone https://github.com/go-godo/godo.git
```

cloneできたら、**./godo**へ移動して

```
godo --watch
```

```
% godo --watch
godo 1.1.0 - do task(s)

Usage: godo [flags] [task...]
  -h, --help     This screen
      --verbose  Log verbosely
  -v, --version  Print version
  -w, --watch    Watch task and dependencies

Tasks:
  build        Runs build task
  dist         Runs {test, lint, dist} tasks
  install      Runs install task
  interactive  Runs interactive task
  lint         Runs lint task
  readme       Runs readme task
  test         Runs test task
  whoami       Runs whoami task
```

ちなみに、もし動いていれば…Godofile.goのあるところでwatchが開始されるぽいです。が、こんな感じなのでやっぱり当面gulpかなと。
ちなみに、Go + gulpで良さげな構成サンプルをみつけたので、今はこの方法がベストのような気もします。



<img src="https://raw.githubusercontent.com/gulpjs/artwork/master/gulp-2x.png" width="20px" />　[shorrockin/noted](https://github.com/shorrockin/noted)
単体テストメソッド名に日本語を使おう

# JUnitを使った単体テストメソッドの命名

Javaプロジェクトで単体試験を書く際、JUnitないしはそれ以外の派生ライブラリで書くときのお話です。

そのテストメソッド名ですが、謎なコーディング規約に従って無理やりヨクワカラン英単語を並べてしまい、結局何のテストしているのかわからない名前になってしまい、その結果、疲弊することも多いでしょう。

実はJavaのメソッド名に日本語などのマルチバイト文字を適用しても問題ありません。特に、テストで期待する結果を日本語で書いたほうがわかりやすいこともあるでしょう。

* 「一覧結果に日本語が書かれていると、何のテストしているのかわかりやすい」
* 「改修後のテストの要否がわかりやすい」
* ~~エクセルで実行結果を求めて印刷物で納品を要求してくる地獄のようなお客様にも対応しやすい~~

などなど。

## 利用例

以下の例はMockitoもあわせて使った、簡単な利用例です。

```Java:IPCheckServiceTest
import static org.junit.Assert.*;
import static org.mockito.Mockito.*;

import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.mockito.Mock;
import org.mockito.runners.MockitoJUnitRunner;

@RunWith(MockitoJUnitRunner.class)
public class IPCheckServiceTest {

	@Mock
	IPCheckService service;

	@Before
	public void before() throws Exception {
		service = spy(new IPCheckService());
		service.start();
	}

	@After
	public void after() throws Exception {

	}

	@Test
	public void test成功するIPアドレス() throws Exception {
		assertTrue( service.check("127.0.0.1") );
	}

	@Test
	public void test失敗するIPアドレス() throws Exception {
		assertFalse( service.check("192.168.0.7") );
	}
}
```

EclipseのJUnitランチャーで実行した結果、なんとなく見やすいですよね。

![jpnmethod.png](https://qiita-image-store.s3.amazonaws.com/0/13268/1e4a4999-09ce-d107-df15-9866dd47b933.png)

~~これをエクセルへ出力するなど工夫することで、印刷を強要する地獄でもニッコリではないでしょうか。~~
Underscore.jsのオブジェクト操作いろいろ


# Underscoreを使う際のTips的な（オブジェクト編）

## 記述テンプレ
```
_.○○○○(object);
```

### _.keys(object)
キーを配列に抽出する

```
_.keys({A: 1, B: 2, C: 3}); => ["A", "B", "C"]
```

### _.values(object)
値を配列に抽出する

```
_.values({A: 1, B: 2, C: 3}); => [1, 2, 3]
```

### _.pairs(object)
キーと値のペア配列に変換する

```
_.pairs({A: 1, B: 2, C: 3})
=> [["A", 1], ["B", 2], ["C", 3]]
```

### _.invert(object)
キーを値に、値をキーに反転する

```
_.invert({A: "aaa", B: "bbb", C: "ccc"});
=> {aaa: "A", bbb: "B", ccc: "C"};
```

### _.functions(object)
名前順にオブジェクト名を返す。

```
_.functions(_);
=> ["all", "any", "bind", "bindAll", "clone", "compact", "compose" ...
```

### _.extend(destination, *sources)
オブジェクトを結合する。

```
_.extend({name: 'A'}, {age: 20});
=> {name: 'A', age: 20
```

### _.pick(object, *keys)
オブジェクトから引数の条件に該当する部分のみを抽出する。

```
_.pick({name: 'A', age: 10, userid: 'a01'}, 'name', 'age');
=> {name: 'A', age: 10}
_.pick({name: 'A', age: 10, userid: 'a01'}, function(value, key, object) {
  return _.isNumber(value);
});
=> {age: 10}
```

### _.omit(object, *keys)
オブジェクトから引数の条件に該当する部分を除外する。

```
_.omit({name: 'A', age: 10, userid: 'a01'}, 'name', 'age');
=> {userid: 'a01'}
_.omit({name: 'A', age: 10, userid: 'a01'}, function(value, key, object) {
  return _.isNumber(value);
});
=> {name: 'A', userid: 'a01'}
```

### _.defaults(object, *defaults)
オブジェクトのキーについて、引数に渡されたオブジェクトの同一キーを上書きする。

```
var name = {name: "bbb"};
_.defaults(name, {name: "aaa", age: 20});
=> {name: "bbb", age: 20}
```

### _.clone(object)
オブジェクトのコピー

```
_.clone({name: 'aaa'});
=> {name: 'aaa'};
```

### _.has(object, key)
オブジェクトに指定のキーが存在しているかどうかを返す。

```
_.has({A: 1, B: 2, C: 3}, "B"); => true
```

### _.property(key)
プロパティで指定したキーの値について一致しているかどうかを返す。

```
var name = {name: 'A'};
'A' === _.property('name')(name);
=> true
```

### _.isEqual(object, other)
オブジェクト同士が一致するかどうかを返す

```
var A = {name: 'A', luckyNumbers: [1, 2, 3]};
var copyA = {name: 'A', luckyNumbers: [1, 2, 3]};
_.isEqual(A, copyA);
=> true
```

### _.isEmpty(object)
オブジェクトが空なら真、そうでなければ偽を返す。

```
_.isEmpty({name: "A", age: 20}); => false
_.isEmpty({}); => true
```

### _.is○○○○(object)

_.isElement, _.isArray, _.isObject, _.isArguments, _.isFunction, _.isString, _.isNumber, _.isFinite, _.isBoolean, _.isDate, _.isRegExp, _.isNaN, _.isNull, _.isUndefined

存在確認、真偽値を返す。
「関数プログラミング 珠玉のアルゴリズムデザイン」をScalaで実装してみる まとめ

はてなブログに書いたもののまとめをこっちに乗せてみる。

[サンプルコード置き場](https://github.com/qtamaki/pearls)

[「関数プログラミング 珠玉のアルゴリズムデザイン」をScalaで実装してみる](http://qtamaki.hatenablog.com/entry/2014/12/14/063748)

[「関数プログラミング 珠玉のアルゴリズムデザイン」をScalaで実装してみる 第２章](http://qtamaki.hatenablog.com/entry/2014/12/22/145634)

[「関数プログラミング 珠玉のアルゴリズムデザイン」をScalaで実装してみる 第３章 その１](http://qtamaki.hatenablog.com/entry/2014/12/26/062150)

[「関数プログラミング 珠玉のアルゴリズムデザイン」をScalaで実装してみる 第３章 その２](http://qtamaki.hatenablog.com/entry/2015/01/07/124445)

[「関数プログラミング 珠玉のアルゴリズムデザイン」をScalaで実装してみる 第４章](http://qtamaki.hatenablog.com/entry/2015/02/11/202500)

番外: [foldの融合則について #haskell](http://qtamaki.hatenablog.com/entry/2015/02/14/175848)

[「関数プログラミング 珠玉のアルゴリズムデザイン」をScalaで実装してみる 第５章](http://qtamaki.hatenablog.com/entry/2015/03/12/141221)

[「関数プログラミング 珠玉のアルゴリズムデザイン」をScalaで実装してみる 第６章](http://qtamaki.hatenablog.com/entry/2015/05/08/200957)



順次増やしていくつもりだけど、果たしてどこまでいけるか・・・。
jQuery-UIでdiv要素をぐりぐり動かす

jQuery-UIでdiv要素をぐりぐり動かす
=======================
まずhtml5で記述するとどうなるか
①ドラッグ

    <script>
      function f_dragstart(event){
        //ドラッグするデータのid名をDataTransferオブジェクトにセット
        event.dataTransfer.setData("text", event.target.id);
      }
    </script>

    ～～～～～

    <div id="div1" draggable="true" ondragstart="f_dragstart(event)" style="position: relative;">～</div>

draggable="true"とすることによってその要素をドラッグ可能にする。イベントについてはondragstartで定義し、それはscriptタグに記述する必要がある。

②ドロップ

    /***** ドラッグ要素がドロップ要素に重なっている間の処理 *****/
    function f_dragover(event){
      //dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにする
      event.preventDefault();
    }

    /***** ドロップ時の処理 *****/
    function f_drop(event){
      //ドラッグされたデータのid名をDataTransferオブジェクトから取得
      var id_name = event.dataTransfer.getData("text");
      //id名からドラッグされた要素を取得
      var drag_elm =document.getElementById(id_name);
      //ドロップ先にドラッグされた要素を追加
      event.currentTarget.appendChild(drag_elm);
      //エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
      event.preventDefault();
    }

    ～～～～～

    <div id="div3" dropzone="move" ondragover="f_dragover(event)" ondrop="f_drop(event)">～</div>

dropzoneに処理形式を記述し、ドラッグと同様にondragover、ondropでイベントを定義する。


サンプルでは基本的な記述しか説明したいないが、jQuery-UIと同様、様々なタイミングでイベントを取得できる。

参考としたサイトを以下に記す。
http://www.htmq.com/dnd/

また、前回あれこれと話題に上がったリサイズについては、CSS3のresizeプロパティを指定することで実現できる。

    resize: both;

こちらについては以下を参照。
http://www.htmq.com/css3/resize.shtml


HTML5での実現→リサイズ以外はJavaScript制御が必要


ではこれらをjQueryUIを用いて実現しようとするとどうなるか

    $("要素").draggable(); //ドラッグ可能にする
    $("要素").droppable(); //ドロップ領域に指定する
    $("要素").resizable(); //リサイズ可能にする

それぞれがたったこれだけで実現できる（勿論イベント処理の記述は必要ではあるが）


以下リファレンスサイト(順にドラッグ、ドロップ、リサイズ)
http://jqueryui.com/draggable/
http://jqueryui.com/droppable/
http://jqueryui.com/resizable/
Underscore.jsの配列操作いろいろ

# Underscoreを使う際のTips的な（配列編）

## 記述テンプレ
```
_.○○○○(array);
```

### _.first(array, [n])
配列の先頭のn個を取得する。

```
_.first([1, 2, 3, 4, 5], 2); => [1, 2]
```

### _.last(array, [n])
配列の最後尾のn個を取得する。

```
_.last([1, 2, 3, 4, 5], 2); => [4, 5]
```

### _.initial(array, [n])
配列の最後尾のn個を除いた配列を取得する。

```
_.initial([1, 2, 3, 4, 5], 2); => [1, 2, 3]
```

### _.rest(array, [n])
配列の先頭からn個を除いた配列を取得する。

```
_.rest([1, 2, 3, 4, 5], 2); => [3, 4, 5]
```

### _.compact(array)
配列から不正な値(false, null, 0, "", undefined, NaN)を除外する。

```
_.compact([0, "a", 1, "", true, false]); => ["a", 1, true]
```

### _.flatten(array, [shallow])
配列の階層を均す。[shallow]がtrueなら1階層分だけ均す。

```
_.flatten([1, 2, [[3, 4], 5]]); => [1, 2, 3, 4, 5]
_.flatten([1, 2, [[3, 4], 5]], true); => [1, 2, [3, 4], 5]
```

### _.without(array, *values)
配列から引数の値を除外する。

```
_.without([1, 2, 3, 4, 5], 2, 3); => [1, 4, 5]
```

### _.union(*arrays)
複数の配列を結合する。重複分は除外され、一意の値として抽出される。

```
_.union([1, 2, 3, 4, 5], [1, 3, 5, 7, 9], [10, 5, 9]); => [1, 2, 3, 4, 5, 7, 9, 10]
```

### _.intersection(*arrays)
全ての配列に存在する値のみを抽出する。

```
_.intersection([1, 2, 3, 4, 5], [1, 3, 5, 7, 9], [10, 5, 9]); => [5]
```

### _.difference(array, *others)
他の配列に存在する値を除外する。withoutの配列版。

```
_.difference([1, 2, 3, 4, 5], [1, 3, 5, 7, 9], [10, 5, 9]); => [2, 4]
```

### _.uniq(array)
重複分を除外して配列内の値を一意にする。

```
_.uniq([1, 2, 3, 2, 5]); => [1, 2, 3, 5]
```

### _.zip(array)
複数の配列をインデックス番号ごとにまとめる。はみ出している項目については他は未定義。
_.zip.apply(_, array)では配列の行列反転が可能。

```
_.zip(["A", "B", "C"], [200, 100, 150, 1000], ["M", "F", "M"]);
=> [["A", 200, "M"], ["B", 100, "F"], ["C", 150, "M"], [undefined, 1000, undefined]]
_.zip.apply(_, ["A", "B", "C"]);
=> [["A"], ["B"], ["C"]]
```

### _.object(list, [values])
keyとvalueの関係にオブジェクト化する。はみ出しているvalueについては無視される。

```
_.object(["A", "B"], [200, 100, 150]); => {A: 200, B: 100}
_.object([["A", 200], ["B", 100]]); => {A: 200, B: 100}
```

### _.indexOf(array, value, [isSorted])
valueの値が最初に出てくるインデックス番号を取得する。
isSorted指定があればそのインデックス番号から後をサーチする。
```
_.indexOf([1, 2, 3, 4, 5, 4, 3, 2, 1], 3); => 2
```

### _.lastIndexOf(array, value, [fromIndex])
valueの値が最初に出てくるインデックス番号を取得する。
fromIndex指定があればそのインデックス番号から後をサーチする。
```
_.lastIndexOf([1, 2, 3, 4, 5, 4, 3, 2, 1], 3); => 6
```

### _.sortedIndex(list, value, [iteratee], [context])
valueが整列された配列のどこに挿入されるかのインデックス番号を取得する。
```
_.sortedIndex([1, 5, 10, 50, 100, 1000, 5000, 10000], 500); => 5
```

### _.range([start], stop, [step])
規則的な数列を作成できる。2ずつとか5ずつとかにしたければ[step]を定義。
```
_.range(5); => [1, 2, 3, 4, 5]
_.range(3, 8); => [3, 4, 5, 6, 7]
_.range(3, 30, 3); => [3, 6, 9, 12, 15, 18, 21, 24, 27]
```
jQuery初歩

これさえ覚えればとりあえず動くjQuery
=====
# 要素の指定方法

## 記述テンプレ
```
$("要素")
```

### \<タグ>（\<div>など）

```
$("div")
```

### id="sample" IDで指定したい場合は # + ID名

```
$("#sample")
```

### class="sample" クラスで指定したい場合は . + クラス名

```
$(".sample")
```

## 指定した要素に対してアクションを指定する

### 要素内のテキストを書き換える処理

```
$("要素").text("代替テキスト");
```

### ～したら～する
多くの場合、～したら～するという記述になると思う。例えばクリックされたら～の場合は、

```
$("要素").click(function(){
  ～処理内容～
});
```

#### 例１：\<button>がクリックされたら\<div>内を代替テキストに書き換え

```
$("button").click(function(){
  $("div").text("代替テキスト");
});
```

#### 例２：\<button>がクリックされたらそのボタンのテキストを代替テキストに書き換え

```
$("button").click(function(){
  $(this).text("代替テキスト");
});
```

## 要素に追加/コピー/削除する

|記述 |説明 |
|:----------|:---------------------|
| prepend() | 指定要素内部の先頭に追加 |
| append() | 指定要素内部の最後に追加 |
| before() | 指定要素の前に追加 |
| after() | 指定要素の後に追加 |
| clone() | 指定要素を別な要素にコピー|
| remove() | 指定要素を削除 |

### 例：\<div>\</div>内に\<ul>\<li>リスト<\/li>\</ul>を追加

```
$("div").append("<ul><li>リスト</li></ul>");
```


## 要素の親兄弟を選択する

下記の様な構成だったとして、一番下の階層にテキストを加えたい…

```
<div>
  <div class="mine">
    <div>

    </div>
  </div>
  <div>

  </div>
</div>
```

$("div").text("～");
と指定してしまうと全ての\<div>を対象としてしまう。

### 親兄弟の指定1

|記述 |説明 |
|:----------|:---------------------|
| parent() | 対象の親要素(一つ上の階層)を指定 |
| siblings()| 対象の兄弟要素(同階層)を指定 |
| children()| 対象の子要素(一つ下の階層)を指定 |

### 例：$(".mine")をから考えて、下層のみを対象にテキストを追加する。

```
$(".mine").children().text("～");
```

### 親兄弟の指定2

|記述 |説明 |
|:----------|:---------------------|
| next() | 対象の次の兄弟要素を指定 |
| prev() | 対象の前の兄弟要素を指定 |


### 親兄弟の指定のオプション

|記述 |説明 |
|:----------|:---------------------|
| :first | 指定要素の中で最初のものを対象とする |
| :first-child | 指定要素の最初の子要素を対象とする |
| :last | 指定要素の中で最後のものを対象とする |
| :last-child | 指定要素の最後の子要素を対象とする |

#### 例：最後のdiv要素のみテキストを追加

```
$("div:last").text("～");
```

## ある要素をそのまま複製したい時は.clone()を使う

### 例：最初\<p>\</p>の要素を最後の\<div>\</div>に複製

```
$("p:first").clone().appendTo("div:last"); or $("p").clone().prependTo("div");
```
|記述 |説明 |
|:----------|:---------------------|
| appendTo() | ()に指定した要素内の最後に追加 |
| prependTo() | ()に指定した要素内の先頭に追加 |

### 例：最初\<p>\</p>の要素を最後の\<div>\</div>にコピー

```
$("p:first").clone().appendTo("div:last"); or $("p").clone().prependTo("div");
```
初めてのC初心者限定#2


###投稿の動機
専門学校でPG教えてます。時間の制約の為、c++もさらっとしか教えられないので、学生さん向けにまとめようと思います。
ついでにcがわからんと思い込んでる方々の参考になれば幸いです。
プロには不要なまとめです。

###環境
####Linux,Unix,Mac
ターミナルからコマンドを発行。
gcc -v
インストール済みなら、何らかリターンがあります。

####Windows
VmWare Playerをインストール
Linuxの仮想環境を作りましょう。

bcc32 .netのコンパイラを勧めない理由。
結局Unix、Linuxを勉強しなきゃならんのです。

###Sum.c
```c:Sum.c
#include <stdio.h>

int main(void)
{
    int x, y, z;
    printf("Input 3Numbers with space. ex)100 200 300\n");
    scanf("%d %d %d", &x, &y, &z);
    printf("First%d、Second%d、Last%d\n", x, y, z);
    printf("Sum = %d\n", x + y + z);
    return 0;
}

```

###コンパイル
```
gcc -o Sum Sum.c
```

###Run
```
./Sum
```
![kobito.1419552180.491196.png](https://qiita-image-store.s3.amazonaws.com/0/33317/0aca8548-137b-3b5b-f0e7-086f16fbfbac.png "kobito.1419552180.491196.png")

はい簡単です。

###おまけ
Macならsayコマンドを使って
![kobito.1419552261.899268.png](https://qiita-image-store.s3.amazonaws.com/0/33317/9f6d0546-b77d-1edc-29b4-a606bbd8905f.png "kobito.1419552261.899268.png")

してみると、ちょっと楽しい。
【緩募】markdown+スタイルシート

#論文もmarkdownで書きたい!!!
  
##やりたいこと
  
1. vimで本文つらつら(hoge1.md)
2. vimで参考文献をつらつら(hoge2.md)
3. vimで学会用投稿スタイルつらつら
4. pandocコマンドで(多分)markdown全部くっつけてさらにスタイルシートもくっつける。
5. あら不思議、ワードファイル(hoge.doc,hoge.docx)が完成！！(∩´∀｀)∩ﾜｰｲ

##要望
1. 参考文献はMarkdownじゃなくtexの.bibみたいな感じで
2. というかインターネットで配布されてるtexのスタイルシートをpandocでくっつけたい！


##そもそも
markdownにマニアックなスタイルシート(texみたいの)対応してくれれば…
初めてのC初心者限定#1


###投稿の動機
専門学校でPG教えてます。時間の制約の為、c++もさらっとしか教えられないので、学生さん向けにまとめようと思います。
ついでにcがわからんと思い込んでる方々の参考になれば幸いです。
プロには不要なまとめです。

###環境
####Linux,Unix,Mac
ターミナルからコマンドを発行。
gcc -v
インストール済みなら、何らかリターンがあります。

####Windows
VmWare Playerをインストール
Linuxの仮想環境を作りましょう。

bcc32 .netのコンパイラを勧めない理由。
結局Unix、Linuxを勉強しなきゃならんのです。

###Hello.c
```c:Hello.c
#include <stdio.h>

int main(void)
{
    printf("Hello, World\n");
    return 0;
}
```

###コンパイル
```
gcc -o Hello Hello.c
```

###Run
```
./Hello
```
![kobito.1419542225.944668.png](https://qiita-image-store.s3.amazonaws.com/0/33317/b487c65a-6487-3a62-dfb9-ce4371a8caa2.png "kobito.1419542225.944668.png")

はい簡単です。

###おまけ
Macならsayコマンドを使って
```
./Hello | say
```
してみると、ちょっと楽しい。
FuelPHPのORMで子モデルを作成する

こんな構造をひとつのテーブルで管理したいとする

> 親: Model_Asset
　子: Model_Asset_Image
　　孫: Model_Asset_Image_Jpeg
　　孫: Model_Asset_Image_Png
　子: Model_Asset_Text
　　孫: Model_Asset_Text_Url
　　孫: Model_Asset_Text_Txt

### 親モデル

```php:fuel/app/classes/asset.php
<?php

class Model_Asset extends \Orm\Model
{
	protected static $_properties = array(
		'id',
		'object_model',
		'object_id',
		'class'=> array( 'default' => 'Model_Asset' ),//ここで子モデルを判別する
		'original_id',
		'priority',
		'filter_name',
		'mime_type',
		'filename',
		'extention',
		'bin',
		'created_at',
		'updated_at',
	);
```

### 子モデル

```php:fuel/app/classes/asset/image.php
<?php
use Orm\Model;

class Model_Asset_Image extends Model_Asset
{
	protected static $_properties = array(
		'id',
		'object_model',
		'object_id',
		'class'=> array( 'default' => 'Model_Asset_Image' ),
		'original_id',
		'priority',
		'filter_name',
		'mime_type',
		'filename',
		'extention',
		'bin',
		'created_at',
		'updated_at',
	);
	
	/**
	 * Overrides the query method to allow soft delete items to be filtered out.
	 */
	public static function query($options = array())
	{
		$query = \Orm\Query::forge(get_called_class(), static::connection(), $options);
		
		$query->where( array( 'class' => static::$_properties['class']['default'] ) );

		return $query;
	}

}
```

### 孫モデル

* 同様に好きなだけ作成する

# 使い方

```php
$img = Model_Asset_Image::find('first');
//select * from assets where class='Model_Asset_Image'; が発行される
```

```php
$img = Model_Asset_Image_Jpeg::find('first');
//select * from assets where class='Model_Asset_Image_Jpeg'; が発行される
```

* has_manyなどでリレーションされていてもよしなにしてくれる

```php
$user = Model_User::find('first',array('related'=>array('img')));
//select * from users inner join assets on users.image_id = assets.id where assets.class = 'Model_Asset_Image_Png'; といった感じ
```
atomのvim-modeのyank時にクリップボードにも入るようにする

### 2015/02/20 追記

vim-modeの0.33.0でクリップボードと無名レジスタの共有が追加されました。

https://github.com/atom/vim-mode/pull/525

現在は下記の設定を行う必要はありません。


## はじめに

現在のところatomのvim-modeのyankはクリップボードと共有できません。
(atom: 0.165.0, vim-mode:0.21.0時点)

本家vimだとvimrcに`set clipboard+=unnamed`と書いておくと、yankした値はclipboardと共有できます。

[vimエディタからクリップボードを利用する。 — 名無しのvim使い](http://nanasi.jp/articles/howto/editing/clipboard.html)

vimで普段からこの設定に慣れていると、atomで使えないのに非常にストレスが溜まります。

これをなんとかしてみました。

## init.coffeeにコマンドを定義する

### init.coffeeとは
init.cofeeはatom起動時に、一番最後に読み込まれる設定ファイルです。

[Customizing Atom](https://atom.io/docs/latest/customizing-atom)

```
When Atom finishes loading, it will evaluate init.coffee in your ~/.atom directory, giving you a chance to run arbitrary personal CoffeeScript code to make customizations.
```

一番最後に適用されるのでここでvim-modeのコマンドを呼ぶこともできそうです。

ここに自分用のyankを作ることにします。

### 書いてみた

- init.coffee

```coffeescript
atom.workspaceView.eachEditorView (editorView) ->
  editorView.command 'my-command:yank', ->
    editorView.trigger('core:copy')
    editorView.trigger('vim-mode:yank')
```

コマンド内容は'core:copy'と'vim-mode:yank'を2つやるってだけです。非常にシンプルです。

`atom.workspaceView.eachEditorView (editorView)`でeachしているeditorViewに紐付けると、editor viewでしか使えないコマンド、という定義ができるようです。

例えば、このコマンドはtree viewでは使えません。

githubの中の人の公開しているinit.coffeeを見たりしてこの記述に辿り着いたのですが、現在公式にはこのAPIは書いていない気がします。

(見落としてるだけかな？)

### keybindを定義する

keymap.csonで先ほど定義したコマンドを割り当てます。

- keymap.cson

```coffeescript
'.editor.vim-mode:not(.insert-mode)':
  'y'  : 'my-command:yank'
```

すでに登録されているキーバインドをkeymap.csonに書いた場合は上書きになります。

この設定で、vim-mode本来のyankは使わずに、自分で定義した`my-command:yank`を使うように上書きしています。

### 動作検証

init.coffeeは起動時に読み込まれるので、atomを再起動する必要があります。

yでyankした値がclipboardに入っていれば成功です！


## 終わりに

init.coffeeの書き方がわからなくて苦労してしまいましたが、なんとか動きました！

もっと良いやり方があるかもしれません。

ご存知の方は教えてください！


## ところでatomのvim-modeにはこんなissueが上がっていた

https://github.com/atom/vim-mode/issues/308

なるほど、確かに`"*yy`でyankすればクリップボードに入りますね！

こうすれば*レジスタに入るので共有できるということですね。

でも毎回打つの面倒なので却下しました。

(設定でyank時に使うレジスタ変更できるPR出すのが正解ですね！だれかおねg)
Server does not support diffie-hellman-group1-sha1 for keyexchange

poderosaから接続できなかったので調査。

## 参考

* [0002804: [Seed] sshd起動時「/usr/sbin/sshd-keygen: No such file or directory」と、エラーが表示される。 - Vine Linux バグトラッキングシステム](http://mantis.vinelinux.org/view.php?id=2804)

> openssh-6.7から KexAlgorithms のデフォルトが変更されています。
> diffie-hellman-group1-sha1 は現在の基準では弱い鍵交換アルゴリズム
> なためデフォルトでは無効になっています。
> diffie-hellman-group1-sha1 しか使えない古いクライアントをお使い
> の場合は、クライアントを新しい近代的なものに変更することをおすす
> めします。
> (どうしても使いたい場合は sshd_config で変更することで使えるかも
> しれませんが、推奨はしません。see man sshd_config)


## 暫定的な対処

```diff:/etc/ssh/sshd_config
+ KexAlgorithms diffie-hellman-group1-sha1
```

```bash:
systemctl restart sshd
```
Xcode5から6にアップデートした際に、シミュレーターのディレクトリが変わってしまって立ち上がらない問題(Unable to run app in Simulator)


**3,4回程悩まされた機会があったのでまとめておきます。**


- mac osがmerveriskでXcode6.1アップデートの時が多い

# 試したこと

## 1.シミュレーターのsettingをリセットする

## 2.過去シミュレーターのディレクトリを消す

### ディレクトリ

#### Xcode6
/Users/[User]/Library/Developer/CoreSimulator/Devices/[DeviceID]/data/Containers/Data/Application/[App]
#### Xcode5
/Users/[User]/Library/Application Support/iPhone Simulator/[iOS Version]/Applications/[App]

## 3.commandLineToolを最新のものにする

[Unable to run app in Simulator : Xcode beta 6 iOS 8](http://stackoverflow.com/questions/24033417/unable-to-run-app-in-simulator-xcode-beta-6-ios-8)

## 4.結局今回は、OSをYosemiteにしたらなおった
Ruby 2.2.0 をソースコンパイル

[Ruby 2.2.0 Released 2014/12/25](https://www.ruby-lang.org/en/news/2014/12/25/ruby-2-2-0-released/)
Ubuntu 14.04 で動作確認済みです。

既に2.2.0以前のバージョンの Ruby がインストールされているなら下記の各パッケージは既に入ってると思われるので不要です。
<pre>
% sudo apt-get -y install build-essential automake git
% sudo apt-get -y install zlib1g-dev libssl-dev libreadline6-dev libyaml-dev libxml2-dev libxslt-dev
% sudo apt-get -y install libcurl4-openssl-dev libmysqlclient-dev
</pre>

このままだとRuby2.2.0をコンパイルする際にエラーが出て、`libffi-dev`をインストールしたらコンパイルできました。

<pre>
% sudo apt-get install libffi-dev
</pre>

自分がいつもやっているソースコンパイルの方法は下記。

<pre>
% sudo wget http://cache.ruby-lang.org/pub/ruby/2.2/ruby-2.2.0.tar.gz
% sudo tar xzf ruby-2.2.0.tar.gz
% cd ruby-2.2.0
% mkdir /opt/rubies/2.2.0
% sudo ./configure --prefix=/opt/rubies/2.2.0
% sudo make
% sudo make install
% sudo /opt/rubies/2.2.0/bin/gem update --system
% sudo /opt/rubies/2.2.0/bin/gem install bundler
</pre>

<pre>
% bin/ruby -v
ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-linux]
</pre>

怪しい点
---
prefixについては好みだと思うのですが、なんかディレクトリなくても作成されると思っていたのですが、なぜかできず、事前にディレクトリを作成しました。

あと全部sudoでしてしまうのもなあ。。。
Movable Typeのサイトの再起動時の確認

Movable Type を以下のアプリで動かしています。
Nginx,psgi,memcached,mysql

構築は以下を参考にしました。
http://www.skyarc.co.jp/engineerblog/entry/movabletype_psgi_mysql.html

停止
/etc/init.d/nginx stop
svc -d /service/memcached
svc -d /service/psgi
/etc/init.d/mysql stop

開始
/etc/init.d/mysql start
svc -u /service/psgi
svc -u /service/memcached
/etc/init.d/nginx start

netstat -an で該当のポートで起動してるか確認すること。
FuelPHPでひらがな、カタカナ、ひらカタ混在をバリデーションする

# 定義

チェックというよりは、ひらがな・カタカナをチェックした後で全てひらがな、全てカタカナに変換する
[ダウンロード(Gist)](https://gist.github.com/goosys/d7cb9a3af3381c4866ca)

```php:fuel/app/classes/validation/japanese.php
<?php

/**
 * 独自バリデーションを追加
 */
class Validation_Japanese
{
	/**
	 * 
	 */
	public static function _validation_hiragana($val)
	{
		if( empty($val) ){ return true; }
		if( static::_validation_hirakata($val) ){
			return mb_convert_kana($val, "sHcV");
		}
		
		return false;
	}
	
	/**
	 * 
	 */
	public static function _validation_katakana($val)
	{
		if( empty($val) ){ return true; }
		if( static::_validation_hirakata($val) ){
			return mb_convert_kana($val, "sKVC");
		}
		
		return false;
	}
	
	/**
	 * 
	 */
	public static function _validation_hirakata($val)
	{
		if( empty($val) ){ return true; }
		
		mb_regex_encoding("UTF-8");
		if (preg_match("/^[ 　ぁ-んァ-ヶーｦ-ﾟ｡-ﾟ0-9０-９]+$/u", $val)) {
		    return true;
		}
		
		return false;
	}
}
```

# バリデーション

* ひらがな
* カタカナ
* ひらカタ混在

```php
$val->add_field('name_hiragana', 'name_hiragana', 'required|hiragana|max_length[255]');
$val->add_field('name_katakana', 'name_katakana', 'required|katakana|max_length[255]');
$val->add_field('name_hirakata', 'name_hirakata', 'required|hirakata|max_length[255]');
```

# 値確認

```php
echo $val->validated('name_hiragana'); //すべてひらがな
echo $val->validated('name_katakana'); //スベテカタカナ
echo $val->validated('name_hirakata'); //ひらカタこんザイ
背景色(background-color)を透過させて文字色は不透明にする方法とhtml,slim,css,scssでの記述方法

![](https://qiita-image-store.s3.amazonaws.com/0/63640/3c15bea4-7567-553d-6fc9-ba1a34e02810.png "logofix.png")
今回は、背景色(background-color)は透過させたいけど文字は不透明(そのまま)にする方法をご紹介します。どちらも簡単なので、ぜひ参考にしてください(>ω<)

**ポイントは色をカラーコードではなく、rgbaで指定することです。**
今回は赤い半透明の背景色をつけてみたいと思います。
※[rgbaに簡単に変換してくれている便利なサイトをみつけました](http://j-press.info/16torgba/)

## rgba
r=red(赤)、g=green(緑)、b=blue(青)、a=alphachannel(アルファ)を表します。
アルファチャンネルは透明度を表します。
アルファチャンネルを指定しないと不透明な赤色の背景色がつきます。
![スクリーンショット 2014-12-26 1.28.49.png](https://qiita-image-store.s3.amazonaws.com/0/63640/bfaa6917-70ac-ba94-9e5f-40c64c537be0.png "スクリーンショット 2014-12-26 1.28.49.png")

```html
<h1>おでんと言ったらちくわぶ。</h1>
```

```RubySlim
h1
	| おでんと言ったらちくわぶ。
```

```CSS
h1 {
	background-color: rgb(255,0,0);
}
```

```SCSS
h1 {
	background-color: rgb(255,0,0);
}
```

## アルファチャンネルを指定して透過させる
1に近ければ近い程、不透明に近くなります。
指定は小数点以下で表します。
![スクリーンショット 2014-12-26 1.51.54.png](https://qiita-image-store.s3.amazonaws.com/0/63640/fba84f76-8d30-148b-0646-31e8c6be0d56.png "スクリーンショット 2014-12-26 1.51.54.png")


```html
<h1>おでんと言ったらちくわぶ。</h1>
```

```RubySlim
h1
	| おでんと言ったらちくわぶ。
```

```CSS
h1 {
	background-color: rgba(255,0,0,0.5);
}
```

```SCSS
h1 {
	background-color: rgba(255,0,0,0.5);
}
```

## 文字色も透過させたい場合
文字色も一緒に透過させたい！そんな時はrgba指定ではなく、カラーコードとopacityというものを使って記述します。

![スクリーンショット 2014-12-26 1.56.08.png](https://qiita-image-store.s3.amazonaws.com/0/63640/8a3f1388-bcc8-4bc0-b443-0b5e6a178107.png "スクリーンショット 2014-12-26 1.56.08.png")

```html
<h1>目玉焼きといったら醤油。</h1>
```

```RubySlim
h1
	| 目玉焼きと言ったら醤油。
```

```CSS
h1 {
	background-color: #ff0000;
	opacity: 0.5;
}
```

```SCSS
h1 {
	background-color: #ff0000;
	opacity: 0.5;
}
```
FuelPHPでアップロードファイルをバリデーション

# バリデーションルール

[ダウンロード(Gist)](https://gist.github.com/goosys/88165c3ca0d2538c293f)

```php:fuel/app/classes/validation/asset.php
<?php

/**
 * 独自バリデーションを追加
 */
class Validation_Asset
{
	/**
	 * アップロードファイルをチェック
	 */
	public static function _validation_upload($val, $config = null)
	{
		Upload::process($config);
			
		if( Upload::is_valid() ){
			Upload::save();
			return true;
		}
		
		return false;
		//return Upload::get_error(); //TODO send error message
	}
}

```

# コンフィグ

* upload.phpとuploads.phpがあるのでややこしい

[ダウンロード(Gist)](https://gist.github.com/goosys/11b72462edbf18086783)

```php:fuel/app/config/uploads.php
<?php
return array(
	'photo1' => array(
		'path'             => APPPATH. 'tmp/image/',
		'max_size'         => 2 * 1024 * 1024,
		'ext_whitelist'    => array('jpg','jpeg','gif','png'),
	),
);
```

[ダウンロード(Gist)](https://gist.github.com/goosys/11b72462edbf18086783)

```php:fuel/app/config/upload.php
<?php
return array(
	'auto_process'     => false,
	'auto_rename'      => false,
	'overwrite'        => true,
	'randomize'        => true,
);
```

# バリデーション

```php:fuel/app/classes/model/assets.php

	/*
	 * 画像アップロード時のバリデーション
	 */
	public static function validate($factory)
	{
		$val = Validation::forge($factory);
		$val->add_callable('Validation_Asset');
		
		Config::load('uploads');
		$photo_config = Config::get('photo1');

		$val->add('photo', 'Photo')
			->add_rule('upload', $photo_config )
		;
		
		return $val;
	}
```
Ruby 2.2.0をrbenvとruby-buildでインストール

#クリスマスにRuby 2.2.0リリース

はい、メリクリメリクリ。

Ruby2.1から恒例のクリスマス行事になったRubyの新バージョンリリース、今年も無事に2.2.0がリリースされましたね。

ということで、ここではおなじみのrbenvとruby-buildを使ってインストールしてみます。

## rbenvとruby-buildのインストール

Qiitaにも他にたくさんのエントリーがアップされてるので省略。

まだ入れていない方は、各自の環境にあったエントリーを見つけてインストールしてください。

## ruby-buildをアップデート

すでに入れている人はruby-buildのアップデートをしましょう。ruby-buildのディレクトリで

    % git pull origin master

と叩いて更新。

    % rbenv rehash

してから

    % rbenv install -l

でインストール可能バージョンに2.2.0が含まれていることを確認します。

## rbenvでruby-2.2.0をインストール

あとは

    $ rbenv install 2.2.0

とやればOK。

## Ubuntu14.04およびUbuntu14.10の場合

・・・のはずだったのですが、自分の環境（Ubuntu14.04及びUbuntu14.10）では下記のようなエラーが出てビルドに失敗しました。

    % rbenv install 2.2.0
    Downloading ruby-2.2.0.tar.gz...
    -> http://dqw8nmjcqpjn7.cloudfront.net/7671e394abfb5d262fbcd3b27a71bf78737c7e9347fa21c39e58b0bb9c4840fc
    Installing ruby-2.2.0...

    BUILD FAILED (Ubuntu 14.04 using ruby-build 20140524-150-gbe7d096)

    Inspect or clean up the working tree at /tmp/ruby-build.20141226005210.7528
    Results logged to /tmp/ruby-build.20141226005210.7528.log

    Last 10 log lines:
    make[1]: *** 未完了のジョブを待っています....
    installing default date_core libraries
    installing default nkf libraries
    make[2]: ディレクトリ `/tmp/ruby-build.20141226005210.7528/ruby-2.2.0/ext/objspace' から出ます
    linking shared-object nkf.so
    make[2]: ディレクトリ `/tmp/ruby-build.20141226005210.7528/ruby-2.2.0/ext/nkf' から出ます
    linking shared-object date_core.so
    make[2]: ディレクトリ `/tmp/ruby-build.20141226005210.7528/ruby-2.2.0/ext/date' から出ます
    make[1]: ディレクトリ `/tmp/ruby-build.20141226005210.7528/ruby-2.2.0' から出ます
    make: *** [build-ext] エラー 2

logの中身を見てみます。

    (前略)
    linking shared-object objspace.so
    /usr/bin/ld: ./libffi-3.2.1/.libs/libffi.a(raw_api.o): 再配置 R_X86_64_32S (`.rodata' に対する) は共有オブジェクト作成時には使用できません。-fPIC を付けて再コンパイルしてください。
    ./libffi-3.2.1/.libs/libffi.a: error adding symbols: 不正な値です
    collect2: error: ld returned 1 exit status
    make[2]: *** [../../.ext/x86_64-linux/fiddle.so] エラー 1
    make[2]: ディレクトリ `/tmp/ruby-build.20141226005210.7528/ruby-2.2.0/ext/fiddle' から出ます
    make[1]: *** [ext/fiddle/all] エラー 2
    make[1]: *** 未完了のジョブを待っています....
    installing default date_core libraries
    installing default nkf libraries
    make[2]: ディレクトリ `/tmp/ruby-build.20141226005210.7528/ruby-2.2.0/ext/objspace' から出ます
    linking shared-object nkf.so
    make[2]: ディレクトリ `/tmp/ruby-build.20141226005210.7528/ruby-2.2.0/ext/nkf' から出ます
    linking shared-object date_core.so
    make[2]: ディレクトリ `/tmp/ruby-build.20141226005210.7528/ruby-2.2.0/ext/date' から出ます
    make[1]: ディレクトリ `/tmp/ruby-build.20141226005210.7528/ruby-2.2.0' から出ます
    make: *** [build-ext] エラー 2


どうも **libffi** というのが怪しそう。

ということで以下のパッケージをインストールしてみました。

    % sudo apt-get install libffi-dev

再度インストールを実行。

    % rbenv install 2.2.0


今度は正常にインストールされました。

    % rbenv versions
       ...
       ...
       2.2.0

rubyのバージョンを2.2.0に切り替えます。

    % rbenv global 2.2.0
    % ruby -v
    ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-linux]

これで最新のruby2.2.0が使えるようになりました。
Array ランダムソート

ActionScript Arrayのランダムソートは1行で実現できます。
以下がソースコードと10回実行した結果です。

```as:sort.as
var a:Array = new Array(0,1,2,3,4,5,6,7,8,9);
a.sort(function():int { return int(Math.random() * 3) - 1 } );

/*
10回実行したときの結果
2,1,5,7,4,3,0,6,9,8
7,9,4,3,2,6,8,5,1,0
2,4,3,6,9,5,8,0,7,1
7,4,5,1,3,9,6,0,8,2
3,2,6,9,1,7,5,8,4,0
4,0,7,9,1,3,5,8,6,2
3,0,7,9,8,5,1,4,2,6
6,5,7,3,8,2,9,4,1,0
3,5,8,7,2,6,9,4,1,0
6,2,8,7,9,3,1,5,4,0
*/

```


***
この記事は、以前ブログで公開していた記事、内容を再編集したものです。
ActionScript 1.0/2.0/3.0とFlex 3の内容が中心です。
⌘の描画

コマンド記号を描画します。

> ⌘はコマンド記号（コマンドきごう）と呼ばれる記号である。主にアップル製ハードウェア用キーボードのコマンドキーに刻印されている。記号の形状からプロペラや四葉、クローバーと呼ばれることもある。 (Wikipedia)

![スライド5.jpg](https://qiita-image-store.s3.amazonaws.com/0/3862/42460a29-ab7d-c738-ef7a-680abc2eb33b.jpeg)

この記号は、次の連立方程式で表現することができます。

> x(t) = 3cos(t) + 2cos(3t)
y(t) = 3sin(t) − 2sin(3t)

この連立方程式をそのままコードに落とします。

```as:command.as
package 
{
	import flash.display.Sprite;
	import flash.events.*;

	public class Main extends Sprite 
	{
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			var sp:Sprite = new Sprite();
			addChild(sp);
			sp.graphics.lineStyle(5, 0x000000);
			var mx:Number = stage.stageWidth / 2 ;
			var my:Number = stage.stageHeight / 2;
			var o:Object = calcCurve(0);
			var r:Number = 25;
			sp.graphics.moveTo(o.fx * r + mx, o.fy * r + my);
			for (var t:Number = 0; t <= 6.28; t += 0.05)
			{
				o = calcCurve(t);
				sp.graphics.lineTo(o.fx * r + mx, o.fy * r + my);
			}
		}
		private function calcCurve(t:Number):Object
		{
			var o:Object = new Object();
			o.fx = 3 * Math.cos(t) + 2 * Math.cos(3 * t);
			o.fy = 3 * Math.sin(t) - 2 * Math.sin(3 * t);
			return o;
		}
		
	}
	
}
```

***
この記事は、以前ブログで公開していた記事、内容を再編集したものです。
ActionScript 1.0/2.0/3.0とFlex 3の内容が中心です。
FuelPHPで選択肢を日本語化する

Selectタグで使う配列をLangで定義しておくと便利

# 日本語を定義

* ```'DBに入る値'=>'日本語'```

```php:fuel/app/lang/ja/selector.php
<?php
return array(
	
	'contract_type' => array(
		''    => '--',
		'1'    => '普通借家',
		'2'    => '定期借家',
		'99'    => 'その他',
	),
	
	'has_parking' => array(
		'0'    => 'なし',
		'1'    => 'あり',
	),
	
	'layout' => array(
		''    => '--',
		'1room'   => 'ワンルーム',
		'1k'      => '1K',
		'1dk'     => '1DK',
		'1ldk'    => '1LDK',
```

# フォームで使用

```php
<?php echo Form::select('layout', Input::post('layout', isset($item) ? $item->layout : ''), 
				__('selector.layout'), 
				array('class' => 'form-control')); ?>
```

# 表示

```php
<?php echo \Arr::get(__('selector.layout'),$item->layout,''); ?>
```

# 関係ないけど

Placeholderも同様に定義しておくと便利

```php:fuel/app/lang/ja/placeholder.php
<?php

return array(
	
	'model' => array(
		//1 建物
		'building' => array(
			'name'             => '田中荘',
			'name_kana'        => 'タナカソウ',
			'zip_code'         => '000-0000',
			'city'             => '渋谷区',
			'address'          => '渋谷 1-2-3',
			'city_kana'        => 'シブヤク',
			'address_kana'     => 'シブヤ',
```


```php
			<?php echo Form::input('name', Input::post('name', isset($item) ? $item->name : ''), 
				array('class' => 'form-control', 'placeholder'=>__('placeholder.model.building.name')));  
			?>
```
Math.absとMath.floorの代替

絶対値を返すMath.abs。
Math.absを利用するより、if文を利用して絶対値を求める方が高速に動作します。

Math.abs 200ms

```as:sample1.as
var n:int = -1;
			
for (var i:uint = 0; i < 1000000; i++) {
  n = Math.abs(n);
}
```

If文 75ms

```as:sample2.as
var n:int = -1;
			
for (var i:uint = 0; i < 1000000; i++) {
  if (n < 0) {
    n *= -1;
  }
}
```

指定された数値をもっとも近い整数にするMath.floor。
Math.floorよりも高速に動作する方法を紹介します。
Math.floorと代替方法の実行時間を求めます。

Math.floor 195ms

```as:sample3.as
var pi:Number = 3.141952;

for (var i:uint = 0; i < 1000000; i++) {
  var num1:Number = Math.floor(pi);
}
```

代替方法 75ms

```as:sample4.as
var pi:Number = 3.141952;

for (var i:uint = 0; i < 1000000; i++) {
  var num1:Number = pi|0;
}
```

代替方法を利用したほうが高速に動作します。


***
この記事は、以前ブログで公開していた記事、内容を再編集したものです。
ActionScript 1.0/2.0/3.0とFlex 3の内容が中心です。
日本語が使える無料Web Fontsを使ってみる


どうやら、最近は日本語が使える無料Web Fontsがあるようなので、早速使ってみる。
好みの問題かもしれないけど、細いフォントってかっこいい。
日本語でも、タイポグラフィとか意識できる時代になるのかしら。

ただ、使ってみると、ちょっと遅いかな。

# 比較
![WebFont.png](https://qiita-image-store.s3.amazonaws.com/0/50720/e3c91fb7-2624-aba6-2ae0-ec104d2f2502.png)


# Google Noto Sans Font Japanese(日本語版)

http://www.google.com/fonts/earlyaccess

# IPAフォント

http://ipafont.ipa.go.jp/

# M+ Fonts
IPAフォントをベースにつくられたフォント

http://mplus-fonts.sourceforge.jp/webfonts/

# NGT Font
IPAフォントをベースにつくられたフォント

https://sites.google.com/site/mandel59/fonts/ngtfont

# bokutachi

http://yoshihisa.que.jp/fontopo/

# サンプルコード

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Web Font</title>
    <style>
    /*Google Noto Sans Web Fonts*/
    @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
    #noto {
        font-family: 'Noto Sans Japanese', serif;
        font-weight: lighter;
    }

    /*IPAフォント*/
    @font-face {
        font-family: ipaexg;
        src: url('IPAexfont00301/ipaexg.ttf');
    }
    #ipaexg {
        font-family: ipaexg;
        font-weight: lighter;
    }

    /*mplus font*/
    @font-face {
        font-family: mplus-1p-light;
        src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-light.ttf');
        format("truetype");
    }
    #mplus {
        font-family: mplus-1p-light;
        font-weight: lighter;
    }

    /*NGT Font*/
    @font-face {
        font-family: ngt;
        src: url('ngtmp/ngtmp.ttf');
    }
    #ngt {
        font-family: ngt;
        font-weight: lighter;
    }

    /*bokutachi*/
    @font-face {
        font-family: bokutachi;
        src: url('boku/bokutachi.otf');
    }
    #bokutachi {
        font-family: bokutachi;
        font-weight: lighter;
    }
    </style>
</head>

<body>
    <h1>Google Noto Sans Web Fontsを使ってみない。</h1>
    <h1 id="noto">Google Noto Sans Web Fontsを使ってみる。</h1>
    <hr>
    <h1>IPAフォントを使ってみない。</h1>
    <h1 id="ipaexg">IPAフォントを使ってみる。</h1>
    <hr>
    <h1>M+ Fontを使ってみない。</h1>
    <h1 id="mplus">M+ Fontを使ってみる。</h1>
    <hr>
    <h1>NGT Fontを使ってみない。</h1>
    <h1 id="ngt">NGT Fontを使ってみる。</h1>
    <hr>
    <h1>ぼくたちフォント（bokutachi）を使ってみない。</h1>
    <h1 id="bokutachi">ぼくたちフォント（bokutachi）を使ってみる。</h1>
</body>

</html>
```
アセットの埋め込み

PNG、JPEG または GIF ファイル形式の画像を Flash/Flexアプリケーションに埋め込んで、複数のインスタンスを作成することができます。
[Embed]メタデータタグを使用してアプリケーションに画像を埋め込み、バインディング可能な ActionScriptクラスに関連付けします。


画像の埋め込み（AS)

```as:sample.as
package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	
	public class Main extends Sprite
	{
		[Embed(source = "sample.jpg")]
		private var SampleImage:Class;
		public function Main():void 
		{
			var bm:Bitmap = new SampleImage();
			addChild(bm);
		}
	}
}
```
画像の埋め込み（MXML)

```mxml:sample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Image source="@Embed('sample.jpg')" />
</mx:Application>
```

サウンドの埋め込み（AS)

```as:sample2.as
package
{
    import flash.display.Sprite;
    import flash.media.Sound;
    import flash.media.SoundChannel;

    public class EmbeddedSoundExample extends Sprite
    {
        [Embed(source="sound.mp3")]
        public var SampleSound:Class;
        
        public function EmbeddedSoundExample()
        {
            var sound:Sound = new SampleSound() as Sound;
            sound.play();
        }
    }
}
```


***
この記事は、以前ブログで公開していた記事、内容を再編集したものです。
ActionScript 1.0/2.0/3.0とFlex 3の内容が中心です。
行の数値の平均をとる

```awk
NF>1 {
  i=1;
  sum=0;
  while(i <= NF) {
    sum += $i;
    i++;
  }
  print sum/NF;
}
```

test

```shell-session
> echo '1 2 3 4 5' | awk 'NF>1 {i=1;sum=0; while(i <= NF) {sum += $i; i++;} print sum/NF;}'
3
```

(12/27編集) heliac2000さんのコメントを適用
FuelPHPのORMを日本語化する

というよりは、日本語化しやすくする工夫

# 日本語を定義

* フィールド名に日本語を定義
* 関連して使用する項目があれば自由に追加定義（password2など)
* _nameにテーブル名を定義
* 以上をテーブルの分だけ記述

```php:fuel/app/lang/ja/model.php
<?php
return array(
	'user' => array(
		'_name'                => 'ユーザー',
		'username'             => 'ユーザー名',
		'nickname'             => 'ニックネーム',
		'email'                => 'メールアドレス',
		'group'                => '権限グループ',
		'password'             => 'パスワード',
		'password2'            => 'パスワード確認',
		'last_login'           => '最終ログイン日',
		'login_hash'           => 'ログインハッシュ',
		'profile_fields'       => 'プロフィール',
		
		'_anonymouse'          => '匿名',
	),
	
	'topic' => array(
		'_name'                => 'スレッド',
		'title'                => 'タイトル',
		'body'                 => '本文',
```

# バリデーションで使用

```php:fuel/app/classes/model/topic.php
	public static function validate($factory)
	{
		$val = Validation::forge($factory);
		$val->add_field('title'            , __('model.topic.title'            ), 'required|max_length[255]');
		$val->add_field('body'             , __('model.topic.body'             ), 'required|max_length[1000]');

		return $val;
	}
```

# ビューで使用

```php
<?php echo __('model.topic.body'); ?>
```
Cephのこれから

Ceph and GlusterFS Advent Calendar 最後の記事は、Cephのこれからについてまとめます。

## Cephの開発項目

Cephの開発項目一覧は、[Blueprints - Ceph Wik](https://wiki.ceph.com/Planning/Blueprints)に一覧でまとまっていて、誰でも見ることができます。各バージョンごとに一覧になっていてわかりやすいですね。もちろん、予定なのでずれることや、キャンセルされることもあります。

この記事では、この多数ある開発項目一覧から、大きな項目や、注力されている項目をいくつかピックアップしてみます。

## CephFS関連

CephFSはSageが「最優先で開発を進めている項目の一つ」と繰り返し発言しているように、かなり重要な項目として認識されているようです。

最近ceph-develに[the state of cephfs in giant](http://thread.gmane.org/gmane.comp.file-systems.ceph.user/13991/focus=14491)というメールがSageから投げられました。そこに書かれていることをまとめると、

- GiantではSingle Active MDSの構成でそこそこ動く。Multi MDSの構成はまだバグがある
- カーネルドライバとFUSEドライバ両方とも動く

と書かれています。

Single-mdsではひとまず安定して使えるはずですが、multi-mdsで使うと、まだ"expect some stability issues that could lead to data loss."という状態のようです。


そして、今後の開発課題として

- [CephFS: Forward Scrub](https://wiki.ceph.com/Planning/Blueprints/Hammer/CephFS%3A_Forward_Scrub)
- [CephFS: Hadoop Support](https://wiki.ceph.com/Planning/Blueprints/Hammer/CephFS%3A_Hadoop_Support)
- Multi-mds、 スナップショット、Ganesha NFS、など

が挙げられています。

まだしばらくプロダクション環境で安定して利用するには時間がかかりそうですが、構成によってはそんなに遠くないのかもしれません。

## RGWの強化

RGWで、Amazon S3のような[オブジェクトのバージョニングをサポートしよう](https://wiki.ceph.com/Planning/Blueprints/Hammer/rgw%3A_object_versioning)というblueprintが掲載されています。これが実現されれば、オブジェクトの履歴が残り、より安全な運用が可能になります。

また、RGWのスケーラビリティの問題にも対応が計画されています。[rgw: bucket index scalability](https://wiki.ceph.com/Planning/Blueprints/Hammer/rgw%3A_bucket_index_scalability)という項目です。現在は一つのバケットのオブジェクト数が数百万を超えると、インデックスを格納しているオブジェクトをbackfill/recoveryしている間は、PUTリクエストをブロックしてしまうという問題があります。これを解決するために、インデックスをshardingする実装が進行中です。

## Ceph Cold Storage に向けて

Cold Storageは、Amazon Glacierのようにアクセス頻度が少ないデータを安価に長期保存するための仕組みです。[Cephも、Cold Storageとしての利用に適した機能を計画](https://wiki.ceph.com/Planning/Blueprints/Hammer/Towards_Ceph_Cold_Storage)しています。

### 電源状態を考慮したCRUSH

例えばレプリケーションが3つある場合に、3台のOSDのうち1台を代わる代わる順番に電源を落としておき、残りの2台でデータの読み書きを行う、といったアイデアがあります。電源状態が変わったときに、古いデータの更新を行います。

実現すれば、電気代を節約することができます。

### オブジェクトの「スタブ」

Cephに外部ストレージをプラグイン形式でサポートさせ、要求があった場合に直接そちらを参照するための仕組みが検討されています。例えば実態はテープドライブに格納されているとして、Ceph内にはテープに格納されているという情報(スタブ)を記録します。Cephよりも安価で遅いストレージを組み合わせて使うことが可能になります。

## Dockerとの組み合わせ

[CephをDockerと組み合わせて利用する試みがいくつか列挙](https://wiki.ceph.com/Planning/Blueprints/Submissions/Continue_Ceph%2F%2FDocker_integration_work)されています。

- Deisと呼ばれるOSSのPaaSと組み合わせて利用
- Dockerのストレージドライバとして組み込んで利用

上記は動作するものができており、コンテナ環境のストレージとしてもCephが広く使われるようになるかもしれません。

## RADOSの信頼性向上

いくつか、RADOSの信頼性を向上させるような試みが計画されています。

- アイドル時にオブジェクト全体のチェックサムを確認
- Scrub / repair を強化する
- Scrub / repair のI/O優先度をより適切に管理する
- 使用率がnearfullになったosdのweightを自動的に下げる
- 同時に複数のOSDから並列に読み込み、大規模システムでのレイテンシの問題を解決

## まとめ

ここに挙げたのはほんの一例です。他にも多数の新機能が提案され、開発されています。今後のリリースも楽しみですね。

メリークリスマス！
Alertコントロールのカスタマイズ

Alertコントロールとは、メッセージ、タイトル、「OK」「キャンセル」「はい」「いいえ」のボタン、アイコンを含むことができるポップアップダイアログボックスです。
Alertコントロールは、MXMLで作成できません。

**1. 通常**

![スライド1.jpg](https://qiita-image-store.s3.amazonaws.com/0/3862/64b97a1c-226f-87f2-f637-bc2b0f92c3ef.jpeg)

```mxml:sample1.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
  <mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.events.*;
		public function init():void{
			Alert.show("エラーメッセージ","エラー",Alert.YES,this,function(e:CloseEvent):void{})	
		}
    ]]>
  </mx:Script>
</mx:Application>
```

通常のAlertコントロールをカスタマイズします。

**2. カスタマイズ**

![スライド2.jpg](https://qiita-image-store.s3.amazonaws.com/0/3862/94a17162-ea2e-a116-99bc-3a6a0071cbb8.jpeg)

```mxml:sample2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
  <mx:Style>
	Alert{
		borderColor:#ffffff;
		backgroundColor:#ffffff;
		color:#000000;
	}
  </mx:Style>
  <mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.events.*;
		[Embed(source='/assets/alert18x18.png')]
		private static var alert_confirm:Class;
		public function init():void{
			Alert.show("エラーメッセージ","エラー",Alert.YES,this,function(e:CloseEvent):void{},alert_confirm);
		}
    ]]>
  </mx:Script>
</mx:Application>

```

Styleタグで、Alertのスタイルを定義します。ここでは、ボーダ、背景色、フォントの色を変更しました。
次に[Embed]メタデータタグを利用して画像を埋め込みます。埋め込まれた画像は、alert_confirmというクラスとしてActionScriptから利用できます。

***
この記事は、以前ブログで公開していた記事、内容を再編集したものです。
ActionScript 1.0/2.0/3.0とFlex 3の内容が中心です。