OmniAICreator/Qiita-1.07M huggingface dataset:
PHPStormでjsTestDriverの環境を整える


この記事を書いた時点のPHPStormはV7.1.3です。テストコードの事態の書き方はいくつか記事を書いているが、テスト環境の整え方についてまとめていなかったのでメモ。

> 参考
> [Backbone.jsのEventテストでハマった話](http://qiita.com/mm-git/items/f796bfc027a225744ac1)
> [CoffeeScriptでAsyncTestCaseを書く](http://qiita.com/mm-git/items/4aed467fd52513f29167)
> [非同期関数のcallbackのテストを行う](http://qiita.com/mm-git/items/1f6717a25f93bec2fd8d)

## jsTestDriver plug-inのダウンロード
1. PHPStormの環境設定を開きます。
2. 設定の検索で plug と入力したら、設定項目がフィルタされて便利です。
3. Browse repositoriesボタンを押します。
![Preferences.png](https://qiita-image-store.s3.amazonaws.com/0/34579/8afca1af-57ae-6c40-9f45-d46c59ac3189.png "Preferences.png")

4. レポジトリにあるプラグイン一覧が表示されるので、jsTと入力して項目を絞り込みます。
5. jsTestDriverを選択してダウンロードボタンを押します。
![Browse_Repositories.png](https://qiita-image-store.s3.amazonaws.com/0/34579/65d3ccd9-2882-9f83-985b-b9e0b8ae9790.png "Browse_Repositories.png")
6. ダウンロードが完了したら **一度PHPStormを再起動** します。再起動しないとjsTestDriverが有効になりません。

## ライブラリの追加
jsTestDriverのライブラリを追加しておけば、assertEqualsなどのコード補完ができるようになります。
下記のようなテストコードファイルを作成します。

```js:hogetest.js
TestCase("test", {})
```

TestCaseにカーソルを合わせOption+Enterを押します。jsTestDriver assertion frameworkを追加しますか？のようなメッセージが表示されるのでOKを押します。
![Code_Assistance_For_JsTestDriver_Assertion_Framework.png](https://qiita-image-store.s3.amazonaws.com/0/34579/e19a8b07-7d67-e8b3-3a83-883e7d4891bd.png "Code_Assistance_For_JsTestDriver_Assertion_Framework.png")
下記のように環境設定にも追加されます。
![Preferences.png](https://qiita-image-store.s3.amazonaws.com/0/34579/5e7e7b06-6571-aadc-8b7a-0f59c11b5726.png "Preferences.png")


## テスト設定ファイルの作成
下記のようなテストの設定ファイルを書きます。ファイルの内容まではここでは説明しません。

```jsts:test.jstd
server: http://localhost:9876

load:
  - hoge.js

test:
  - hogetest.js
```

## テストの環境設定
1. テスト環境の設定画面にjsTestDriverが追加されているはずなので選択します。
![Run_Debug_Configurations_と_routewebapp_-____Develop_PhpstormProjects_routewebapp_.png](https://qiita-image-store.s3.amazonaws.com/0/34579/420174e3-c95b-41a7-819c-fb476e4ad58d.png "Run_Debug_Configurations_と_routewebapp_-____Develop_PhpstormProjects_routewebapp_.png")

2. 設定の名前は適当にtestなどと入力します。
3. Configuration fileは先ほど作成したjstdファイルを選択します。
![Run_Debug_Configurations.png](https://qiita-image-store.s3.amazonaws.com/0/34579/c76bb217-04b8-8620-930e-4225b2497efc.png "Run_Debug_Configurations.png")

- この時点ではTest Connectionは失敗するのでOKで設定を保存してください。

## テストの実行
とにかく、先ほどのテスト設定でテストを実行してみます。macの場合^Rです。すると、下記のエラーが表示されるので、Start a local serverをクリックします。
![routewebapp_-____Develop_PhpstormProjects_routewebapp_.png](https://qiita-image-store.s3.amazonaws.com/0/34579/d937063d-85e4-578b-99b0-92723cc28504.png "routewebapp_-____Develop_PhpstormProjects_routewebapp_.png")

下記のようにjsTestDriverの画面が追加されます。

![routewebapp_-____Develop_PhpstormProjects_routewebapp_.png](https://qiita-image-store.s3.amazonaws.com/0/34579/2f1aff65-105d-7770-e425-99a112cbe855.png "routewebapp_-____Develop_PhpstormProjects_routewebapp_.png")
テストを実行したいブラウザを選択して、改めてテストを開始(^R)するとテストが実施されます。
ckeditorでfilebrowserからの画像のアップロードに失敗した時のメモ


## こんなエラー

```
ActionController::RoutingError (No route matches [POST] "/ckeditor/EDITOR.config.filebrowserImageUploadUrl"):
  actionpack (4.1.0) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  actionpack (4.1.0) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  railties (4.1.0) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.1.0) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.1.0) lib/active_support/tagged_logging.rb:68:in `block in tagged'
  activesupport (4.1.0) lib/active_support/tagged_logging.rb:26:in `tagged'
  activesupport (4.1.0) lib/active_support/tagged_logging.rb:68:in `tagged'
  railties (4.1.0) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.1.0) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.5.2) lib/rack/methodoverride.rb:21:in `call'
  rack (1.5.2) lib/rack/runtime.rb:17:in `call'
  activesupport (4.1.0) lib/active_support/cache/strategy/local_cache_middleware.rb:26:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  actionpack (4.1.0) lib/action_dispatch/middleware/static.rb:64:in `call'
  rack (1.5.2) lib/rack/sendfile.rb:112:in `call'
  railties (4.1.0) lib/rails/engine.rb:514:in `call'
  railties (4.1.0) lib/rails/application.rb:144:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  rack (1.5.2) lib/rack/content_length.rb:14:in `call'
  rack (1.5.2) lib/rack/handler/webrick.rb:60:in `service'
  /Users/user/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/1.9.1/webrick/httpserver.rb:138:in `service'
  /Users/user/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/1.9.1/webrick/httpserver.rb:94:in `run'
  /Users/user/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/1.9.1/webrick/server.rb:191:in `block in start_thread'
```

## Gemfileに以下を追加してbundle installで解決

```
gem 'activesupport-json_encoder', github: 'rails/activesupport-json_encoder'
```
mavericksにてmeldをインストールする

Linuxから`meld`を使ってきました、Macにも使えるかなを調べました。

導入は簡単です。
前提：
1.Xcode
2.XQuartz：http://xquartz.macosforge.org/landing/

上記の2件が揃いましたら、
`brew install meld`

だけでインストール出来ました。
自己書き換えをしてみる

と言ってもプログラムの動作を変えるようなvirusちっくなものではなくて、例えば自分が何回呼ばれたのかを記録するのに使えたりする。
別ファイルに書き出すのが普通だけれど、こんなこともできますよという例ということで。

* ハッシュに格納しているのはkey,valがいくつ増えても大丈夫なように。
* get_dataでsplit,joinしているのは値に=が入った場合の処置。Config系モジュールでこんなことをしていた気がする。


```perl:counter.pl

use strict;
use warnings;

my %data = get_data();
$data{count}++;
set_data(%data);

sub get_data {
  my %hash;
  while (<DATA>) {
    chomp;
    my ($key, @vals) = split /\=/;
    $hash{$key} = join '=', @vals;
  }
  return %hash;
}

sub set_data {
  my (%hash) = @_;
  open my $fh, "+<", $0;
  while (<$fh>) {
    if (/^__DATA__/) {
      foreach my $key (sort keys %hash) {
        print $fh "$key=$hash{$key}\n";
      }
      last;
    }
  }
  close $fh;
}

__DATA__
count=0
```

```bash
$ tail -n 1 counter.pl
count=0
$ perl counter.pl
$ perl counter.pl
$ perl counter.pl
$ tail -n 1 counter.pl
count=3
```
画面を縦向きにする

[公式のWiki](http://www.cocos2d-x.org/wiki/Device_Orientation)に載っている。

- プロジェクトファイルのDevice OrientationをPortraitに設定する

- RootViewController.mmを変更

```cpp
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return UIInterfaceOrientationIsPortrait( interfaceOrientation );
}

// For ios6, use supportedInterfaceOrientations & shouldAutorotate instead
- (NSUInteger) supportedInterfaceOrientations{
#ifdef __IPHONE_6_0
    return UIInterfaceOrientationMaskPortrait;
#endif
}
```
Fiddler で iPhone の SSL 通信を読む設定

とりあえず、セットアップするまでのメモ。

設定後、どこをどう見たら通信内容が分かるかについては割愛します。

**2015-06-09 追記**: [公式ドキュメント](http://docs.telerik.com/fiddler/Configure-Fiddler/Tasks/ConfigureForiOS)に書いてあることがほぼ一緒なので、英語大丈夫ならそっち見たほうがいいと思います。

# 導入

* http://getfiddler.com/ から Fiddler をインストールする
* [Tools] > [Fiddler Options] を開いて
  * [HTTPS] タブで Decrypt HTTPS traffic にチェックを入れて ...from remote client only を選ぶ。Fiddler のルート CA を信頼するかどうか聞かれるけど、ここで Yes を押しても Windows の設定が変更されるだけで特に意味が無いので No と答える
  * [Connections] タブで Allow remote computers to connect にチェックを入れる
* 設定後、Fiddlerを再起動する
* 終わったら、iPhone 側でプロキシを設定する。IPは自分のマシン、ポートは8888
* Safari を起動し、http://ipv4.fiddler:8888 にアクセス
* そこでルート CA 証明書をインストールして、だいたい終わり

# 豆知識

* Fiddler の左下の All Processes を Non-Browser にすると、出力がちょっと減る
* Android の場合は[こんな感じ](http://qiita.com/chocomelon/items/9284e9d5a1e8471b61fa)でできるらしい
cocos2d-xとZwoptexによるアニメーション

#Zwoptex
![スクリーンショット 2014-05-10 11.10.34.png](https://qiita-image-store.s3.amazonaws.com/0/43663/1438b2fa-3fca-fc47-b554-9cf2af0dd5e1.png)

画像を集めたテクスチャアトラスと座標情報等をまとめたプロパティリストを作ってくれるツール。
ぱたぱたアニメ(口を閉じてる画像と開けてる画像の切り替えで会話をしている動き)を実現したくて使用。

複数の画像をドラッグ＆ドロップ→Layoutボタンクリックで自動整列→Publishボタンクリックでテクスチャアトラス(png)とプロパティリスト(plist)が生成される。生成先はPublish Settingsで設定できる。


#cocos2d-x
- addSpriteFramesWithFileでplistを設定する。

```cpp
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("characters.plist");
```

- createWithSpriteFrameNameで画像を参照できる。
- SpriteFrame*のVectorとAnimationでアニメーションできる。

```cpp
auto frames = new Vector<SpriteFrame *>();
frames->pushBack(SpriteFrameCache::getInstance()->getSpriteFrameByName("MouseOpen.png"));
frames->pushBack(SpriteFrameCache::getInstance()->getSpriteFrameByName("MouseClose.png"));
Animation *animation = Animation::createWithSpriteFrames(*frames, 0.3f);
animation->setLoops(-1);    // forever
sprite_man_center->runAction(RepeatForever::create(Animate::create(animation)));
delete frames;
```



#いいと思ったこと
- テクスチャアトラスを読み込んでおけば、中の画像をテクスチャアトラスを作った時の画像ファイル名で参照できる
- テクスチャアトラスの画像はツールが自動で並べてくれる。画像ファイル名でアクセスするから、画像の並びは気にしなくてよい→画像ファイルに命名規則があると後々よい。
画像を一定時間表示する


scheduleではなく、Actionでやるパターン。

あらかじめsetVisible(false)で非表示にしておき、表示したい時にsetVisible(true)をコールする。この時DelayTimeとHideのアクションを組み合わせて指定時間後に非表示にする。

(例)0.5秒間表示する
```cpp
sprite->setVisible(true);
sprite->runAction(Sequence::create(DelayTime::create(0.5f), Hide::create(), NULL));
```
Node.jsで関数を順番に実行する

step npmパッケージサイト
https://npmjs.org/package/step

step GitHubサイト
https://github.com/creationix/step

非同期プログラムは、コールバックの階層が深くなるとコードの見通しが悪くなりがちです。stepは、引数で指定した関数を順番に実行することができます。

下記サンプルのように、各関数の戻り値は次の関数の第二引数として渡されます。

## インストール

```
npm install step
```

## サンプルコード

読み込むテキストファイル

```txt:hello.txt
Hello World!
```

```js:app.js
var http = require('http');
var fs = require('fs');
var Step = require('step');
 
var keyword = '';
 
//順番に実行する
Step(
    function first(){
        //ファイルを読み込む
        fs.readFile(__dirname + '/hello.txt', this);
    },
    function second(err, str){
        if(err) throw err;
        //読み込んだ内容を文字列に置換し、次の関数の第2引数に渡す
        return str.toString();
    },
    function third(err, str){
        if(err) throw err;
        keyword = str;
        //サーバーの起動
        http.createServer(function (req, res) {
            res.writeHead(200, {'Content-Type': 'text/plain'});
            
            //文字列をブラウザに出力
            res.end(keyword + '\n');
            
        }).listen(1337, '127.0.0.1');
    }
);
 
console.log('Server running at http://127.0.0.1:1337/');
```

## CoffeeScriptで記述した場合

```coffee:app.coffee
http = require('http')
fs = require('fs')
Step = require('step')
keyword = ''

#順番に実行する
Step (first = ->
    
    #ファイルを読み込む
    fs.readFile __dirname + '/hello.txt', this

), (second = (err, str) ->
    throw err    if err
    
    #読み込んだ内容を文字列に置換し、次の関数の第2引数に渡す
    str.toString()
), third = (err, str) ->
    throw err    if err
    keyword = str
    
    #サーバーの起動
    
    #文字列をブラウザに出力
    http.createServer((req, res) ->
        res.writeHead 200,
            'Content-Type': 'text/plain'

        res.end keyword + '\n'
        return
    ).listen 1337, '127.0.0.1'
    return

console.log 'Server running at http://127.0.0.1:1337/'
```
opentableのWindows Boxでリモートデスクトップを使えるようにした


[前回](http://qiita.com/zrock/items/5d221119f796457e8961)、Vagrant Cloudから落としてきたopentableさんのWindows Boxにリモートデスクトップがつながらなかったのでつながるようにしてみた。

#環境
* OSX 10.9
* VirtualBox 4.3.10 r93012
* Vagrant 1.6.1

#手順
##VirtualBoxでWindowsのコンソール画面にアクセスできるようにする
もともとのBoxがヘッドレスになっていた（？）ようなので、Vagrantfileをいじって起動時にウィンドウが立ち上がるようにします。
`vagrant init`で作成したVagrantfileなら下のようにコメントになっているところがあります。

```Vagrantfile.old
  # config.vm.provider "virtualbox" do |vb|
  #   # Don't boot with headless mode
  #   vb.gui = true
  #
  #   # Use VBoxManage to customize the VM. For example to change memory:
  #   vb.customize ["modifyvm", :id, "--memory", "1024"]
  # end
```

このコメントをはずします。メモリの部分はいらないのでコメントのまま。（元のBoxは2GB割り当ててあるのでそのままのほうが無難です）

```Vagrantfile
  config.vm.provider "virtualbox" do |vb|
    # Don't boot with headless mode
    vb.gui = true
  
  #  # Use VBoxManage to customize the VM. For example to change memory:
  #  vb.customize ["modifyvm", :id, "--memory", "1024"]
  end
```

あと、ホスト側からリモートデスクトップにアクセスできるようにリモートデスクトップのポートもフォワーディングしておきましょう。

```Vagrantfile
  config.vm.network "forwarded_port", guest: 3389, host: 3389
```

これで、以下のコマンドでもう一度起動。

```bash
$ vagrant reload
```

これでVirtualBoxでWindowsのコンソールが立ち上がり、ホスト側からアクセスできるようになりました。

##Windows側でリモートデスクトップを有効にする

コンソールが開いたら、Windowsボタンを右クリックして「Ststem」をクリック、開いたウィンドウの中で「Remote Setting」をクリックします。で、「Allow remote connections to this computer」を選んで「OK」ボタンで保存。

![スクリーンショット 2014-05-12 13.38.14.png](https://qiita-image-store.s3.amazonaws.com/0/41603/4dbd0f5a-7534-d2fe-e4bf-8b03d73fb2b4.png "スクリーンショット 2014-05-12 13.38.14.png")

これだけだと、Publicネットワーク（ホストとつながる方）からのアクセスがファイアウォールでブロックされたままなので、ファイアウォールの設定を行います。

コントロールパネルで「Allow an app through Windows Firewall」を選んで、「Remote Desktop」の「Public」をチェックしましょう。

![スクリーンショット 2014-05-12 14.05.37.png](https://qiita-image-store.s3.amazonaws.com/0/41603/ec19571e-da4a-5592-77fd-18e9a3947975.png "スクリーンショット 2014-05-12 14.05.37.png")

これでWindows側でリモートデスクトップを有効にすることができました。

##リモートデスクトップでアクセス
せっかくなので`vagrant rdp`コマンドでアクセスしてみましょう。

```bash
$ vagrant rdp
```

vagrantユーザーでつなごうとします。デフォルトのパスワードは`vagrant`です。これでリモートデスクトップでつなぐことができました。

![スクリーンショット 2014-05-12 14.11.17.png](https://qiita-image-store.s3.amazonaws.com/0/41603/d8cb5df5-270c-9694-a5a7-e644f496ff0c.png "スクリーンショット 2014-05-12 14.11.17.png")

##最後に
次回以降起動時にVirtualBoxのウィンドウを表示したくない場合は、最初にコメントを外した部分を再度コメントアウトしてヘッドレスで起動されるように戻しておきましょう。
また、結構面倒なので、この状態のBoxを作っておいた方が次回以降面倒でなくていいです。
というか、見て分かる通り、英語版のWindowsなので、嫌な人はやっぱり日本語版のWindowsをVirtualBoxにインストールして、そこから自分のBoxを作るのが一番楽かもしれないですね。
[perl] Parallel::ForkManager で簡単に複数プロセスをforkする

セールスポイント：
* STDOUT / STDERR やユーザデータの受け取りをコールバックで行えるようにしてあります。
* child process が die したときにも $pm->finish() を呼ぶようにしています。
* なにげにハンドルと変数代入のperl IO レイヤのサンプルにもなっています。

```pl
#!/usr/bin/env perl

use utf8;
use strict;
use warnings;
use Data::Dumper;
use Carp qw(croak);

use Encode qw(decode_utf8);

use Parallel::ForkManager;

sub say { print $_[0], "\n"; }

our $N_CHILDREN = 5;
my $pm = Parallel::ForkManager->new($N_CHILDREN);

# callback when child process exit or die.
$pm->run_on_finish( sub {

    my ($pid, $exit_code, $ident, $exit_signal, $core_dump, $data_structure_reference) = @_;

    if (defined $data_structure_reference) {
        #print Dumper($data_structure_reference);
        print STDOUT Encode::decode_utf8($data_structure_reference->{'stdout'});
        print STDERR Encode::decode_utf8($data_structure_reference->{'stderr'});
        say "Client terminating with data => ". $data_structure_reference->{'i'};
    }

    say "EXCEPTION: child PID: $pid with $exit_code" if $exit_code ;
    say "";

});


foreach my $i (0..9) {

    my $pid = $pm->start and next;

    my ($stdout, $stderr) = ('','');

    $SIG{__DIE__} = sub { $pm->finish( -1, { i => $i, 'stdout'=>$stdout, 'stderr'=>$stderr } ); };

    close STDOUT;
    close STDERR;
    open STDOUT, ">:scalar:utf8", \$stdout or $pm->finish(-1);
    open STDERR, ">:scalar:utf8", \$stderr or $pm->finish(-1);
    STDOUT->autoflush(1);
    STDERR->autoflush(1);

    say "Client $$ starting...";

    croak "Client died" if $i % 2 == 0 ;

    sleep 10; # do something useful instead!

    $pm->finish( 0, { i => $i, 'stdout'=>$stdout, 'stderr'=>$stderr } );

}

$pm->wait_all_children;

say "Parent process after all child has finished";

__END__
```
BW::HTTPからAFMotionに書き換え


RubyMotion初心者なので、
こちらの記事、[実践！RubyMotion](http://mobiletou.ch/stories/%E5%AE%9F%E8%B7%B5%EF%BC%81rubymotion)をチュートリアル的にやっていた。分かりやすい記事。


記事中では、BubbleWrapを使ってQiitaAPIを叩いて記事を取得しているのだが、
ビルド時にこの`BW::HTTP`の部分がdeprecatedと出た。

なので、[AFMotion](https://github.com/usepropeller/afmotion)というgemを使って書き換えてみた。AFMotionは`AFNetworking`のrubymotion用ラッパ。

利用方法はGithubに書いてある。

* 書き換え前

```ruby:app/entries_controller
class EntriesController < UITableViewController

  def viewDidLoad
    super

    @tag = 'RubyMotion'
    self.title = @tag
    @entries = []

    url = 'https://qiita.com/api/v1/tags/RubyMotion/items'
    BW::HTTP.get(url) do |response|
      if response.ok?
        json = BW::JSON.parse(response.body.to_s)
        @entries = json
        self.tableView.reloadData
      else
        p response.error_message
      end
    end
  end

end
```


* 書き換え後

```ruby:app/entries_controller
class EntriesController < UITableViewController

  def viewDidLoad
    (途中まで同じ)

    url = 'https://qiita.com/api/v1/tags/RubyMotion/items'
    AFMotion::JSON.get(url) do |result|
      if result.success?
        @entries = result.object
        self.tableView.reloadData
      else
        p result.error.localizedDescription
      end
    end
  end

end
```
C#(Unity)でのファイルパスの取得

#C#(Unity)でのパスの取得#

### 指定したフォルダ内のファイルのパスを取得 ###

```csharp

string folderPath = "/hoge/hogehoge";
string[] fs = System.IO.Directory.GetFiles (@folderPath, "*" );

```

##### A. 指定したフォルダにあるファイルだけを取得する場合 #####
3番目の引数 searchOption で TopDirectoryOnly を指定する

```csharp

string folderPath = "/hoge/hogehoge";
string[] fs = System.IO.Directory.GetFiles (@folderPath, "*", System.IO.SearchOption.TopDirectoryOnly);

```

##### B. 指定したフォルダのサブフォルダも含めたフォルダにあるファイルを取得する場合 #####
3番目の引数 searchOption で AllDirectories を指定する

```csharp

string folderPath = "/hoge/hogehoge";
string[] fs = System.IO.Directory.GetFiles (@folderPath, "*", System.IO.SearchOption.AllDirectories);

```

### パス文字列からファイル名部分を取得 ###

###### A. ファイル名部分を取得 ######

```csharp

string path = "/hoge/hogehoge/hoge.png";
string fileName = System.IO.Path.GetFileName (path);

Debug.Log (fileName);

```

(出力結果) hoge.png

###### B. 拡張子名部分を取得 ######

```csharp

string path = "/hoge/hogehoge/hoge.png";
string fileName = System.IO.Path.GetExtension (path);

Debug.Log (fileName);

```

(出力結果) .png



###### C. 拡張子をのぞいたファイル名部分を取得 ######

```csharp

string path = "/hoge/hogehoge/hoge.png";
string fileName = System.IO.Path.GetFileNameWithoutExtension (path);

Debug.Log (fileName);

```

(出力結果) hoge

###### D. ディレクトリ名部分を取得 ######

```csharp

string path = "/hoge/hogehoge/hoge.png";
string fileName = System.IO.Path.GetDirectoryName (path);

Debug.Log (fileName);

```

(出力結果) /hoge/hogehoge
CSSで背景に正円を適用する方法

CSSメモ。
高さと幅を指定すること。高さを指定するので、要素はブロック要素。

``` css
#hoge{
    background: #cccccc;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
```
エキスパートシステム

コンピュータに人間っぽいことをさせたい、そんなあなたに

エキスパート ＝ 専門家
特定の事柄を対象に分析などをするシステムです

→ [アキネイター](http://jp.akinator.com/)

#構成

1. 知識ベース
知識を集めたデータベース
対象と、それに関するデータを関連させる

2. 推論エンジン
実際に推論する仕組みのこと

アキネイターだと、人の名前、その人にまつわる質問と答えが知識ベースに入っていて、推論エンジンは選択肢をできるだけ2分割する質問を出します
参考:[研究開発:Akinator アキネータの仕組み - livedoor Blog（ブログ）](http://blog.livedoor.jp/tak_tak0/archives/51841558.html)

#推論法
1. 前向き推論法
2. 後ろ向き推論法

##前向き推論法
アキネイターはこっち

##後ろ向き推論法
JavaScript開発に必要なツール一覧

今現在、2014年時点でブラウザJavaScript開発をするのに必要なツール一覧。

# Node.js

JavaScript開発を支援するためのツールの多くがNodeで作成されているのでインストールは必須です。
[Node.js](http://nodejs.jp/)

# Grunt

ソースコードのビルド、サーバーの起動などを行ってくれるNode製の便利ツールです。
困ったときはgrunt-contribでだいたい揃います。

[Grunt](http://gruntjs.com/)
[grunt-contrib](https://github.com/gruntjs/grunt-contrib)
[Grunt入門](http://qiita.com/svartalfheim/items/3968fd94da05f565d18f)

# Bower

JavaScriptのライブラリ管理をしてくれるNode製のツールです。
そのまま使うのもよいですが、Gruntとあわせて使うと自分の好きなように出力ファイルを振り分けることができます。

[Bower](http://bower.io/)
[GruntBowerTask](https://github.com/yatskevich/grunt-bower-task)
[Bower入門(基礎編)](http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308)
[Bower入門(応用編)](http://yosuke-furukawa.hatenablog.com/entry/2013/06/04/085537)


# Testem

JavaScriptのテストを支援してくれるNoe製のツールです。
指定したブラウザでテストを実行する等してくれます。

(Testem)[https://github.com/airportyh/testem]

# JSHint

JavaScriptのコーディングを支援してくれるツールです。

==は警告、varを指定してないない変数の代入は警告など、様々な設定が可能です。

[JSHint](http://www.jshint.com)
[日本語訳設定一覧](http://qiita.com/xorphitus/items/f26ec8fbe17c317d3994)
JavaScript開発に必要なライブラリ一覧

今現在、2014年時点でブラウザJavaScript開発をするのに必要なライブラリ一覧。

# jQuery

DOM操作を簡単に行えるライブラリ。
Deferredもよく使います。

[セレクタまとめ](http://www.hp-stylelink.com/news/2013/11/20131122.php)
[Deferred入門](http://techblog.yahoo.co.jp/programming/jquery-deferred/)


# Sugar, Underscore

便利メソッドのライブラリ。
prototype汚染を気にする場合はundersocreを使いましょう。

[Sugar](http://sugarjs.com/)
[Underscore](http://underscorejs.org/)


# Knockout, Angular

MVVMフレームワーク。
KnockoutにはRouterがないのでSammyと一緒に使います。

[Angular](https://angularjs.org/)
[Knockout](http://knockoutjs.com/)

# RequireJS

AsynchronousDefinition 略して AMD。

モジュール管理をするためのライブラリ。
RequireJS専用のビルドツールであるr.jsの設定を毎回忘れる。

[RequireJS](http://requirejs.org/)
[r.jsの設定一覧](https://github.com/jrburke/r.js/blob/master/build/example.build.js)
Express4 + mongoDBアプリケーションをherokuで動かす


herokuって何かとは説明しません。
今回これを達成するためにいくつか問題点を解決します。

package.json
--------
dependenciesに記述したmoduleはrequireできるようになる。なのでdevDependenciesにあるものなどはdependenciesに書き換えておく。
ただ、それだけでは動かない。
同じフォルダにProcfileを作る。これはherokuで動かすコマンドを記述し、デプロイした後にコマンドを送れば実行してくれる。

~~~Procfile
(Procfile)
web: npm start --production
~~~

これによってpackage.jsonのstartに記述したコマンドが実行されることになる。developmentとproductionを切り替える場合は--productionをつける。express4でpackage.jsonのstartには

~~~package.json
		  "scripts": {
		    "start": "node ./bin/www"
		  },
~~~
と記述されているが、これで良い。wwwの中を見ると、httpのlistenと、app.jsを読み込むようになっている。app.jsに普段のnodeを記述しておけばok。

念のためpackage.jsonにはdependenciesのバージョンを書き換えておく。使用しているvesionを使える感じに末尾の数字をXにする。
とくにnodeとnpmのバージョンは堅牢にするために以下のように追加

~~~package.json
		  "engines": {
		  	"node": "0.10.X",
		  	"npm": "1.4.X"
		  }
~~~


.gitignore
----------
gitで無視
echo 'node_modules' > .gitignore



herokuへdeploy
---------
mongoDBを使う設定をするために一度heroku createまでやる。

~~~sh
heroku login
git init
git add .
git commit -m "init message"
heroku create
	# heroku info, list, etc..
git push heroku master
heroku ps:scale web=1
~~~
６行目まではテンプレなので覚える。gitの意味は説明しない。
heroku createした時点で色々情報が出てくる。忘れてしまったら、heroku info とかコマンドで見れます。使い方はheroku helpで。
用意しておいたProcfileのコマンドを呼ぶ？のが７行目です。heroku内で何がおきているかは

~~~
heroku logs
heroku logs -t
~~~
で見れます。heroku help充実してるんでもっと見ていきたい。


さてアクセスできないmongoDBのレンタル先を探しにいこう。

mongolab
-------------
herokuにはmongoDBを使うためのaddonsが提供されている。使えるaddonsはheroku addons:listで見れる。

~~~
heroku addons:add [使うaddon]:free
~~~
とすると無料版を使える。heroku idにクレジットカード情報を登録していないと、ほとんどのaddonは使えないので、登録します。さて今回使うaddonはmongolabを使えるようにheroku addons:add mongolab:freeをする。
するとheroku内の環境変数にuriが追加されている。

~~~sh
heroku config
heroku config | grep MONGOLAB_URI
~~~

環境変数の一覧はheroku config。開発環境と本番環境のNODE_ENV変数の確認にも使える、説明はしない。
２行目で出てくるURIが見慣れたmongoDBアクセスURIだ、これをnode内のmongoDBアクセス設定に追加すればよい。

追加した後に改めて、git add . > git commit -m "second" > git push heroku master でコミットすれば完了だ！

たとえば以下のようにapp.jsを動かせばmongoDBアクセスを確認できる。

~~~app.coffee
mongoose = require "mongoose"
mongoose.on "open", () -> console.log "success"
mongoose.on "error", () -> console.log "failed access"
mongoose.connect "取得したURI"
mongoose.disconnet()
~~~

なおデータベースの状況は
herokuにアクセス > 使用application > addons > MongoLab  >
で確認できる。

さあ、これで今日からheroku open！！
各種ミドルウェアをSupervisorで管理する

プロセスが落ちた際の自動再起動をしたい場合や、Docker の1つのコンテナの中に各種ミドルウェアをまるっと入れる場合などでアプリケーションの動作に必要なミドルウェアを Supervisor で一元管理したいときがあります。

Supervisor: A Process Control System
http://supervisord.org/

Supervisor でデーモンを管理する場合、デーモンをフォアグラウンドで起動させる必要がありますのでミドルウェアの設定変更が必要になる場合があります。その方法についてまとめます。

※CentOS での実行パスなどをベースで記載していますので、各種ミドルウェアの起動パスなどが異なる場合にはお使いのディストリビューションに書き換える必要があります。

## Nginx

設定ファイルを書き換えてもいいのですが、起動オプションで設定を上書きすることができますので `-g "daemon off;"` を起動オプションに指定します。

また、Nginx はフォークされたプロセスのユーザーは Nginx の設定ファイルに記載しますので、Supervisor で起動するプロセスの実行ユーザーは root のままとします。

```text:/etc/supervisor.d/nginx.conf
[program:nginx]
command=/usr/sbin/nginx -g "daemon off;"
autostart=true
autorestart=true
```

## MySQL

MySQL では起動したプロセスではなく、フォークされたプロセスの監視を行う必要があります。これについては Supervisor が提供している pidproxy というプログラムを利用して監視します。

Subprocesses
http://supervisord.org/subprocess.html#pidproxy-program

Nginx と同様、フォークされるプロセスは実行時のオプションで指定しますので root のままとします。

```text:/etc/supervisor.d/mysqld.conf
[program:mysqld]
command=/usr/bin/pidproxy /var/run/mysqld/mysqld.pid /usr/bin/mysqld_safe --datadir=/var/lib/mysql --socket=/var/lib/mysql/mysql.sock --pid-file=/var/run/mysqld/mysqld.pid --basedir=/usr --user=mysql
autostart=true
autorestart=true
```

## MongoDB

MongoDB では設定ファイルに fork して起動する設定がありますので、`fork = true` と設定ファイルに記載されている場合は `fork = false` に変更する必要があります。

```diff:/etc/mongodb.conf
 ##
 bind_ip = 0.0.0.0
 port = 27017
-fork = true
+fork = false
 pidfilepath = /var/run/mongodb/mongodb.pid
 logpath = /var/log/mongodb/mongodb.log
 dbpath =/var/lib/mongodb
```

起動するプロセスはフォークされずフォアグラウンドで実行されますので、root 以外の適切なユーザー名で実行させます。今回は MongoDB を RPM からインストールした際に作成された mongodb ユーザーを `user=mongodb` として指定しています。

```text:/etc/supervisor.d/mongod.conf
[program:mongod]
command=/usr/bin/mongod -f /etc/mongodb.conf
autostart=true
autorestart=true
user=mongodb
```

## Redis

Redis はバージョン 2.6 からコマンドラインから設定ファイルの値を指定することもできますが、バージョンに依存しないよう設定ファイルの値を変更することとします。

手順は MongoDB とほぼ同様、設定ファイルの中で `daemonize yes` と記載があったら `daemonize no` へ変更します。

```diff:/etc/redis.conf
# By default Redis does not run as a daemon. Use 'yes' if you need it.
# Note that Redis will write a pid file in /var/run/redis.pid when daemonized.
-daemonize yes
+daemonize no

# When running daemonized, Redis writes a pid file in /var/run/redis.pid by
# default. You can specify a custom pid file location here.
```

Redis も実行ユーザーでプロセスが立ち上がるので、redis ユーザーで起動させるため `user=redis` と指定します。

```text:/etc/supervisor.d/redis.conf
[program:redis]
command=/usr/sbin/redis-server /etc/redis.conf
autostart=true
autorestart=true
user=redis
```

## php-fpm

php-fpm の場合、Nginx と同様起動時のオプションでフォアグラウドで起動するよう指定ができますので `--nodaemonize` とオプションに指定しておきます。

php-fpm では起動される pool ごとに実行時ユーザーを設定ファイルで記載しますので、実行時のユーザーは root のままとします。

```text:/etc/supervisor.d/php-fpm.conf
[program:php-fpm]
command=/usr/sbin/php-fpm --nodaemonize
autostart=true
autorestart=true
```

## その他のミドルウェアやアプリケーションサーバーを起動させる場合のポイント

以上、一部のミドルウェアでの設定・起動例を挙げましたが、他のミドルウェアやアプリケーションサーバーでは

* フォアグラウドで実行させること
* Supervisor の設定にもよりますが、実行時ユーザーを指定しないと root で起動されるので気をつける

という点に注意しながら設定ファイルを書くといいでしょう。
CanCanを使って複数のモデルに対して異なった権限（Ability）を設定する


CanCan を使うとユーザモデルが各リソースに対してアクセスする際の CRUD 権限を付与できるが、
ユーザモデルが複数になった場合、それぞれに異なった権限を設定したくなるかと思います。

例
> User モデルと Admin モデルがそれぞれ以下のような役割を持つ
> 
> ■User
> ・一般ユーザには各リソースに対して参照権限と修正権限を付与
> ・特別なユーザには各リソースに対して作成権限、参照権限、修正権限、削除権限の全てを付与
> 
> ■Admin
> ・カスタマーサポートには各リソースに対して参照権限を付与
> ・サービス管理者には各リソースに対して参照権限、修正権限、削除権限を付与

このような場合は、Ability クラスを複数に分けて権限を設定すると、幸せになれます。

## モデルを作成して役割を与える

今回はユーザモデルの作成に devise を使用し、役割の判別は Rails 4.1 より追加された enum を使いますが、もちろん他の方法でも問題ありません。

```bash:bash
$ rails generate devise User
$ rails generate devise Admin
$ rails generate migration AddRoleToUsers role:integer
$ rails generate migration AddRoleToAdmins role:integer
$ rake db:migrate
```

```ruby:user.rb
class User < ActiveRecord::Base

  enum role: {general: 1, special: 2}

end
```

```ruby:admin.rb
class User < ActiveRecord::Base

  enum role: {support: 1, manager: 2}

end
```

## 権限を設定する

権限設定には CanCan を引き継いだ [CanCanCan](https://github.com/CanCanCommunity/cancancan) を使用し、設定は複数の Ability クラスを作成して行います。

```bash:bash
$ rails generate cancan:ability
      create  app/models/ability.rb
$ cp -ip app/models/ability.rb app/models/user_ability.rb
$ cp -ip app/models/ability.rb app/models/admin_ability.rb
```

```ruby:user_ability.rb
class UserAbility
  include CanCan::Ability

  def initialize(user)
    if user.general?
      can :read, :all
      can :update, :all
    elsif user.special?
      can :manage, :all
    end
  end

end
```

```ruby:admin_ability.rb
class AdminAbility
  include CanCan::Ability

  def initialize(admin)
    if admin.support?
      can :read, :all
    elsif admin.manager?
      can :read, :all
      can :update, :all
      can :destroy, :all
    end
  end

end
```

## コントローラで適用する権限設定を振り分ける

ここが最も重要になりますが、`CanCan::ControllerAdditions` の `current_ability` を上書きします。

```ruby:application_controller.rb
class ApplicationController < ActionController::Base  

  def current_ability
    if user_signed_in?
      @current_ability ||= ::UserAbility.new(current_user)
    elsif admin_signed_in?
      @current_ability ||= ::AdminAbility.new(current_admin)
    else
      @current_ability ||= ::Ability.new(nil)
    end
  end

end
```

この設定を入れることで、User でログインしている場合は UserAbility に設定した権限が適用され、
Admin でログインしている場合は AdminAbility に設定した権限が適用されます。
なお、未ログイン状態のユーザに対しては、Ability に設定した権限が適用されます。
NYAOS で「cd」した時のディレクトリを %HOME% や %USERPROFILE% 以外に

自分は C:\Opt\SkyDrive を %HOME% にして、複数のシステムで共有しているんだけれども、ローカルのものは C:\Opt 以下に置くので、そっちに移動した方がいいんだよね

そういう場合は、_nya にこう書けばよろしい

```
cd{
    if "%1" == "" then
        __cd__ ~\..
    else
        __cd__ "%1"
    endif
}
```

```__cd__``` は、cd のシステム組み込みの別名。```cd{ … }``` はあまり知られていないが、関数機能という。
ImageMagickでドット絵を整数倍にするワンライナー

最初に言っておきます。

__ImageMagick入っている前提です！！__
<br>

48x48のドット絵（sanae_48x48.png）を2倍の96x96のドット絵にする場合です。
（Photoshopのニアレストネイバー法みたいな感じの拡大ができます！）
<br>

```bash
scale='2'; filename='sanae_48x48.png'; converted_filename='sanae_96x96.png'; converted_width=`expr \`identify -format "%w" $filename\` \* $scale`; `convert -filter box -resize $converted_width -verbose $filename $converted_filename` 
```
<br>

変換前（48x48のドット絵）
![sanae_48x48.png](https://qiita-image-store.s3.amazonaws.com/0/26265/daa16a82-c990-ca0b-9e43-c2fc5a0bbff9.png)

変換後（96x96のドット絵）
![sanae_96x96.png](https://qiita-image-store.s3.amazonaws.com/0/26265/739f6da8-82c7-6cae-1cc5-e51cbd8829a3.png)
<br>

##入力によって変更する必要がある値は以下の3つです。
```bash
scale（整数倍）
filename（拡大前のファイル名）
converted_filename（拡大後のファイル名）
```
FragmentManager#getFragments()


[@hideが付いている](http://tools.oesf.biz/android-4.4.2_r1.0/xref/frameworks/support/v4/java/android/support/v4/app/FragmentManager.java#303)はずなのに何故か使えます。
一応[バグレポート](https://code.google.com/p/android/issues/detail?id=67607)は出ていますので将来再びhiddenになると思われます。
オラクルCreate文

忘れていたので復習を・・・。

■Create文
-------------------------------------------------------
```sql
create table SAMPLE_TABLE
 (
    SAMPLE_ID char(3),
    SAMPLE_FID char(5),
    SAMPLE_NAME varchar2(10),
    constraint PK_SAMPLE_ID primary key( SAMPLE_ID ),
    constraint FK_SAMPLE_FID foreign key ( SAMPLE_FID ) references SAMPLE_FOREIGN_TABLE( SAMPLE_FID )
 )
```


CREATE TABLE <表名>
(
　 　<列名>　<データ型>
　,　<列名>　<データ型>　<列制約>
　,　・・・・
)

列制約には、以下のようなものがある
　・primary key　←　一意制約とNOT NULL制約の複合
　・foreign key　←　他のテーブルの主キーまたは一意キーを参照する制約
　・not null   　←　NULL値を禁止する
PHPの多次元配列と連想配列についてのサンプル。

PHPの配列について学んできましたので、自分で噛み砕いて理解するために投稿させていただきます。

## 配列、多次元配列、連想配列？

配列は、数学B的に考えると
A　=　（１，４，５）
こんな感じで、１列１行は１。みたいな。あのノリがそのままプログラムの配列でも適応できそうです。

多次元配列は
A　=　（B，C，D）
B　=　（E，F，G）
F　=　３；
まぁ仮にですけど。これを紐解くとAのBのEは３。のような感じ。配列の中に配列を入れているのが多次元配列、だと勝手に思っています。

次に連想配列。これが
生徒　=　（山田，田中，高橋）
山田　=　（ID，出身，性別）
出身　=　（東京）
生徒の山田の出身は東京！

”何”番目が”何”番目が”あれ”　ではなく
”生徒”の”田中”の”性別”が”男”　が連想配列です。

> 纏めると...

上記の感じのデータを一纏めにしたのが配列です。
そのような配列に配列をどんどん入れていくのを多次元配列。
そして、「自分で適当に識別名」を用いるのが連想配列。

下記は研修で作成したコードですが、サンプルに載せておきます。

```php
<?php
//下記にプログラムを記載してください。
$list = array(
  '山田' => array(
      'ID' => '001', 
      '出身' => '函館', 
      'メールアドレス' => 'yamada@example.com',
      '性別' => '女性'
  ),
  '田中' => array(
      'ID' => '002', 
      'メールアドレス' => 'tanaka@example.com',
      '性別'  => '男性'
  ),
  '高橋' => array(
      'ID' => '003', 
      '出身' => '札幌', 
      'メールアドレス' => 'takahasi@example.com',
      '性別'  => '女性',
  ),
  '井上' => array(
      'ID' => '004', 
      '出身' => '東京', 
      'メールアドレス' => 'inoue@example.com',
      '性別'  => '男性',
  ),
  '小林' => array(
      'ID' => '005', 
      '出身' => '大阪', 
      'メールアドレス' => 'kobayasi@example.com',
      '性別'  => '男性',
  ),
  '森' => array(
      'ID' => '006', 
      '出身' => '沖縄', 
      'メールアドレス' => 'mori@example.com',
      '性別'  => '女性',
  )
);

$i = 0;
//配列の中の名前を出す。
foreach($list as $key => $member){
  echo $key;
  if($i < count($list)-1){
    echo ',';
  }
  $i++;
}

//改行。
echo PHP_EOL;

//配列の中の名前を出す。
echo join(",",array_keys($list)).PHP_EOL;


//出身地札幌の人間を表示する
foreach($list as $key => $member){
  if(!isset($member['出身']) || $member['出身'] != '札幌'){
    echo $key.PHP_EOL;
  }
}

?>
```

こんな感じで多次元配列を作れるようです。
ビルドしていると、きちんと出ると思います。

この部分を理解しておかないとMySQLと連携して
色々な要素を持ったデータを扱うときにめちゃくちゃ苦労します。（しました。）
Redmine APIでフィルタに複数の値を指定できるようにする


cf_3が整数型のフィールドのとき、

http://localhost:3000/projects/hoge/issues.json?cf_3=1,2

のような感じで複数の値を指定できる方法がないっぽかったので、プラグインで実現してみた。
こういうの既に存在してたら是非教えて下さい。

ソースコード: [github.com/miminashi/redmine-multiple-values-filter](https://github.com/miminashi/redmine-multiple-values-filter)

## 注意点

* いまのところ整数値のカスタムフィールドでしか使えない
* バリデーションチェックを怠っている

## しくみ

* add_filter_errorをalias_method_chainで書き換えて、filter_typeが:integerの場合でもエラーを出さないようにしている
  * かわりのバリデーションを書かないといけないんだけど書いてない
* sql_for_field_withをalias_method_chainで書き換えて、IN演算子でSQLを組み立てている

## その他

* Redmineは元々ひとつのフィールドあたり複数個の値を受け取れるようになっているっぽいのでこれを利用してもっと賢そうな感じにできないか
  * APIではなくブラウザからトラッカーなどを複数指定するところなどで使われている
Capistrano+Nginx+UnicornのUnicornの設定

ほとんどはここ通りにやればいいんですが、`unicorn`の設定がなかったので追加しておきます。

<a href="http://qiita.com/satococoa/items/9b0cc416ffc042680b9b">unicorn + rails 用 Capistrano 3 の設定ファイル - Qiita</a>

## 知っといたほうがいいこと

`Unicorn`は1秒たりともサービスを停止させずにdeployできる気の利いた再起動方法があります。
詳しくはここらへんで。

<a href="http://stackoverflow.com/questions/10148588/unicorn-not-reloading-with-usr2">ruby on rails - Unicorn not reloading with USR2 - Stack Overflow</a>

んで、古いサービスはどうやって落とすかというとUnicorn自体の設定で古いのを見つけたら殺すようにします。

## その設定

```rb:config/unicorn/production.rb
root = "/var/www/example.com/current"
working_directory root
pid "#{root}/tmp/pids/unicorn.pid"
stderr_path "#{root}/log/unicorn.log"
stdout_path "#{root}/log/unicorn.log"

listen "/tmp/unicorn.example.sock"
worker_processes 3
timeout 30

before_exec do |server|
  ENV['BUNDLE_GEMFILE'] = "#{root}/Gemfile"
end

before_fork do |server, worker|
  # the following is highly recomended for Rails + "preload_app true"
  # as there's no need for the master process to hold a connection
  if defined?(ActiveRecord::Base)
    ActiveRecord::Base.connection.disconnect!
  end

  # Before forking, kill the master process that belongs to the .oldbin PID.
  # This enables 0 downtime deploys.
  old_pid = "#{root}/tmp/pids/unicorn.pid.oldbin"
  if File.exists?(old_pid) && server.pid != old_pid
    begin
      Process.kill("QUIT", File.read(old_pid).to_i)
    rescue Errno::ENOENT, Errno::ESRCH
      # someone else did our job for us
    end
  end
end

after_fork do |server, worker|
  # the following is *required* for Rails + "preload_app true",
  if defined?(ActiveRecord::Base)
    ActiveRecord::Base.establish_connection
  end

  # if preload_app is true, then you may also want to check and
  # restart any other shared sockets/descriptors such as Memcached,
  # and Redis.  TokyoCabinet file handles are safe to reuse
  # between any number of forked children (assuming your kernel
  # correctly implements pread()/pwrite() system calls)
end
```

## 参考

全体の流れを知りたい場合はここ。

https://ariejan.net/2011/09/14/lighting-fast-zero-downtime-deployments-with-git-capistrano-nginx-and-unicorn/

"Railsのdeployは簡単さ！"とか偉い人は言ってるそうですが、それは出来杉君が「勉強なんてやればできるさ！」とのび太に言うようなもんだと思います。

複数の要素が絡みまくってる上にしょっちゅう新しいのに移行するからややこしいんだよ！クリックひとつでデプロイしたい！

(Herokuは簡単だけど詰まった時にCapistranoとかよりヤバそうなので使ってません。)
expressパッケージとコマンドのインストール


# expressパッケージのインストール

expressのグローバルインストール。

```
$ npm install -g express
```

グローバルインストールした場合はNODE_PATHにnode_modulesのパスをセットしておく。

```.zshrc
# node_modules
export NODE_PATH=/usr/local/lib/node_modules
```

hello worldで動作確認します。

```app.js
app = require('express')();

app.get('/', function(req, res){
        res.send('hello world');
    });

app.listen(3000);

```

上記app.jsを作成してからnodeコマンドでWebサーバーを起動。ブラウザでhttp://localhost:3000 を表示できます。

```
$ node app.js
```

# expressコマンド

expressコマンドはexpress-generatorパッケージでインストールできます。

```
$ npm install -g express-generator
```

expressコマンドを実行すると基本的なファイルが生成される。

```
$ express

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www

   install dependencies:
     $ cd . && npm install

   run the app:
     $ DEBUG=my-application ./bin/www
```

``npm install``で依存するパッケージを取得した後、``./bin/www``でWebサーバーの起動です。
remoteObjectでつかえる条件式

remoteObjectでつかえる条件式は次のとおりです。

* WHERE
* LIMIT
* OFFSE
* eq (equal)
* less than (<)
* greater than (>)
* LIKE
* AND
* OR

ORDER BY と GROUP BYはつかえないみたいです。


**What clauses are permitted when querying SObjects using Visualforce Remote Objects?**
http://help.salesforce.com/apex/HTViewSolution?id=000193198&language=en_US
AngularJsで、Angular Drag and Dropを使ってdndを実践。

#はじめに
AngularJsでDrag&Dropを実装する際に、便利そうなライブラリを発見したので利用してみた。

#ライブラリ
[Angular Drag and Drop](http://www.directiv.es/Angular-DragDrop)

#使い方
本家サイトのサンプルコードを確認しよう。

#自分の例
自分の場合は、あるリストを一覧表示して、その各アイテムをdrop先のリストに登録するといったことをやった。

##drag側のリスト側
```html
<table><tr>
  <td ng-repeat="xxxxx in dragItems"
    data-drag="true"
    ng-model="dragItems[$index]"
    jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}"
    data-jqyoui-options="{revert: 'invalid', helper: 'clone'}">
    {{xxxxx.description}}
  </td>
</tr></table>
```
`data-drag="true"`とするところがポイントだろうか。
他の指定も重要そうだが。

#リストを追加する側
dropAreasには、drop先のエリアをリストで保持。
`data-drop="true"`とするところがミソ。

```html
<table><tr>
  <td ng-repeat="p in dropAreas"
    data-drop="true"
    ng-model='target'
    jqyoui-droppable="{multiple:true,onDrop:'onDrop'}">
    {{p.description}}
  </td>
</tr></table>
```

angularJSのController側で、$scope.onDropという関数を実装するとDrop時に処理が動くようになる。
また、コール先のonDrop関数では、`this.p.id`や`this.target.id`というような指定で、dragしたitemのidや、drop先の要素のidが取得できる。

#注意
`angular.module('app', ['ngDragDrop']);`のように、`ngDragDrop`の指定を忘れずに。
javascriptで画像をフェードインする方法

**javascriptで画像をフェードインする方法**
--------------------------------------------------------------------

Webアプリで画像をフェードインしたい時がありjavascriptを使用して実装してみたのでメモ。
（探せばもっとよい方法があるかも。。）

正しく言えば、フェードインっぽく画像を表示しているだけ。

**■実装方法**
=====================================================================
以下をheadタグの中に記述する

```html
<script type="text/javascript">
	<!--
		opa=0; //透明度　0は透明
		opacnt=3; //透明度の増減の間隔
		timer=100; //setTimeout関数の実行間隔　ミリ秒

		// フェードイン
		function FadeInstr()
		{
			gazouId = "gazou1";
			MyIMG = document.getElementById(gazouId);
			MyIMG.style.visibility = "visible";
			FadeIn1(gazouId,opa);
		}
		//透明度を増加していきます。
		function FadeIn1(gazouId,opa)
		{
			if (opa <= 100)
			{
				MyIMG.style.filter = "alpha(opacity:"+opa+")"; // IE のソース
				MyIMG.style.opacity = opa/100; //Mozilla Firefoxのソース
				opa += opacnt;
				setTimeout("FadeIn1('"+gazouId+"',"+opa+")", timer);
			}
		}

	//-->
</script>

```

bodyタグの中に以下を記述。

```html

<IMG src="画像を指定" id="gazou1" name="gazou1" style="visibility : hidden;" onload="FadeInstr()">

```

上記の記述により画像の透過度が減少し画像がフェードインして見える。

以上、参考まで。

---
[簡単家計簿 Androidアプリ](https://play.google.com/store/apps/details?id=jp.example.keepingbook.app&hl=ja)
ホストOS型の仮想化ツール比較

# 背景
これまで割と長いこと、業務でも趣味でも VMware Player/Server を利用していたのですが
いつの間にやら、VMware Player の業務利用は有償になっていたようです


> ## VMware Playerの業務利用に関するお問い合わせ
> VMware Playerは個人利用に限り、非商用利用において無償で提供されます。会社や組織として関知された形でのご利用の場合は、VMware Fusion Professionalを必要数量分ご購入ください。

([VMware へのお問い合わせ](http://www.vmware.com/jp/company/contact) より引用)

というわけで VMware Player からの乗り換えを目的に、仮想化ツールを比較します。

# 前提
以下の要件を前提として比較します

* とりあえず有名ドコロで
* ホストOS型 (ハイパーバイザ、LXC などは対象外)
* ホストは Windows(7)/主要Linux
* ゲストは Windows(XP以降)/主要LInux
* これまでの VMware 資産 (特にゲストOS) が活用可

過去の資産については、[OVF](https://www.google.co.jp/search?q=OVF) があるので特に心配しなくても大丈夫でしょう。

# 比較
| 名前 | 提供元 | ホストOS | ゲストOS | 業務開発での利用 | 備考 |
|:--|:--|:--|:--|:--|:--|
| VMware Player 6 | VMware | win,linux | win,linux,solaris,FreeBSD | 有償 | |
| VirtualBox 4 | Oracle | win,mac,linux,solaris | win,mac,linux,solaris | 無償も可※ | ※ただし使用する個人がインストールした場合<br />※大人数の使用、ミッションクリティカルでサポートが欲しい場合等は有償 |
| VirtualPC | Microsoft | win | win※ | 無償 | ※サポート外ではあるが、色々動くらしい |

# 移行について
分かりきっていたのですが、移行先は VirtualBox 一択ですね。

というか Vagrant が流行りだしたあたりで移行しようと思いつつずるずる、
Vagrant 1.1 の VMware 対応を知ってさらにずるずる引き伸ばし、
VMware 業務利用が有償化してたのに気づいて今度こそ正式に乗り換え… という流れなので
わりと結論ありきの比較でした(もっとまともな機能比較を期待していた方いたらすみませんorz)

# 情報源
## VMware Player
* [VMware 互換性ガイド](http://www.vmware.com/resources/compatibility/search.php 互換性)
* [VMware Player の基本操作](https://www.vmware.com/files/jp/pdf/vmware_player60.pdf) ※6.0

> ## ホストOS 互換性
> サポートされるホスト OS のリストを確認するには、当社 Web サイトでオンラインの『VMware 互換性ガイド』を検索してください。
> Player はリストに含まれていませんが、Workstation の情報が Player にも適用できます。リストに含まれていないオペレーティングシステムは、仮想マシンでの使用がサポートされていません。

※互換性ガイドについてはゲストも同様

## VirtualBox
* [ライセンスFAQ](https://www.virtualbox.org/wiki/Licensing_FAQ)
* [ユーザドキュメント](https://www.virtualbox.org/wiki/End-user_documentation)

## VirtualPC
* [Windows Virtual PC の説明](http://support.microsoft.com/kb/958559)
いつもいつも忘れてしまうのでruby-buildのconfigureオプションの設定についてメモっておく


毎度毎度ググったり[ruby-build](https://github.com/sstephenson/ruby-build)のページを見るのもだるくなってきたので、ここらでメモ書きしておいて、記憶に定着させる。

## ruby-buildのconfigureオプション
ruby-buildで必要な環境変数については[ruby-buildのCustom Build Definitions](https://github.com/rbenv/ruby-build#custom-build-definitions)のところに書かれている。この中で今回必要としているのは以下の2つ。

* CONFIGURE_OPTS
* RUBY_CONFIGURE_OPTS

### CONFIGURE_OPTS

> CONFIGURE_OPTS lets you pass additional options to ./configure.

先ほどのSpecial enviroment variablesから引用すると、CONFIGURE_OPTSは文字通り./configureにoptionを渡すことになる。

### RUBY_CONFIGURE_OPTS
変わってRUBY_CONFIGURE_OPTSの場合はどうなるかというと、こちらもconfigureにoptionを渡すのは同じだがrubyに対してのみ適応される。これは例えばruby-buildでrubyインストール時に依存関係があるライブラリに対しては適応されない。

ついでにSpecial enviroment variablesの文章からすると、この環境変数はMRI(CRuby)のみ有効と読み取れる。確かにrubiniusをビルドするとBUILD FAILDになります。

```bash
$ CONFIGURE_OPTS="--with-readline-dir=`brew --prefix readline` --with-openssl-dir=`brew --prefix openssl`" RUBY_CONFIGURE_OPTS="--with-readline-dir=`brew --prefix readline` --with-openssl-dir=`brew --prefix openssl`" rbenv install rbx-2.2.6
Downloading rubinius-2.2.6.tar.bz2...
-> http://releases.rubini.us/rubinius-2.2.6.tar.bz2
Installing rubinius-2.2.6...

BUILD FAILED

Inspect or clean up the working tree at /var/folders/_7/12w0r1850z9c0lp6sxr9x6ww0000gn/T/ruby-build.20140511110113.7856
Results logged to /var/folders/_7/12w0r1850z9c0lp6sxr9x6ww0000gn/T/ruby-build.20140511110113.7856.log

Last 10 log lines:
   --without-dtrace           Disable dtrace
   --with-rpath               Enable rpath
   --without-rpath            Disable rpath

 Help!
   --show                     Print the current configuration and exit
   -V, --verbose              Print additional info
   -h, --help                 Show this message

Unrecognized option: --with-readline-dir=/usr/local/opt/readline
```

## 結論
今のところ自分の環境でconfigureオプションが必要となるのはMac環境のみ（opensslとreadlineをbrewでインストールしたものにしておきたい）だけで、かつruby-buildで依存ライブラリがインストールされるバージョンではないので（2.0以降はなかった記憶）、どちらで設定してもあまり変わりなさそうと思える。ひとまずCONFIGURE_OPTSで設定するようにするかな。
javascriptで日付・曜日・時間を表示する方法

**javascriptで日付・曜日・時間を表示する方法**
--------------------------------------------------------------------

javascriptで日時を表示したい場合がたまにあるのでメモ。


**■実装方法**
=====================================================================

bodyタグ内に以下のようにスクリプトを記述するだけでOK

```html
<html>
<head></head>
<body>
<script language="JavaScript">
			<!--
				myTbl     = new Array("日","月","火","水","木","金","土");
				myD       = new Date();
				
				myYear    = myD.getYear()
				myYear4   = (myYear < 2000) ? myYear+1900 : myYear;
				myMonth   = myD.getMonth() + 1;
				myDate    = myD.getDate();
				myDay     = myD.getDay();
				myHours   = myD.getHours();
				myMinutes = myD.getMinutes();
				mySeconds = myD.getSeconds();
				
				myMess1   = myYear4 + "年" + myMonth + "月" + myDate + "日";
				myMess2   = myTbl[myDay] + "曜日";
				myMess3   = myHours + "時" + myMinutes + "分" + mySeconds + "秒";
				myMess    = myMess1 + " " + myMess2 + " " + myMess3;
				document.write( myMess );
			// -->
</script>
</body>
</html>

```

こんな感じで表示される。

![karenn.png](https://qiita-image-store.s3.amazonaws.com/0/41775/d69dd2f5-5568-9090-2674-c9e3a72b295a.png)



以上、参考まで。

---
[簡単家計簿 Androidアプリ](https://play.google.com/store/apps/details?id=jp.example.keepingbook.app&hl=ja)
[Deprecated] Turbolinksとプログレスバーをあわせると開発がかなり捗る nprogress-rails

## Deprecated
Turbolinks 2.5.2 から Turbolinks本体にプログレスバーの機能が追加されたのでそちらを使用するのが一般的になりそうです。3.0.0からはデフォルトで使用される予定。
詳しくはTurbolinksの[README](https://github.com/rails/turbolinks)で。

## [nprogress-rails](https://github.com/caarlos0/nprogress-rails)
* 自社サービスの[BOOTH.pm](https://booth.pm/ja)で@geta6が実装して良かったので共有します
* RailsのViewに簡単にプログレスバーを追加出来るgem
* Youtube likeなプログレスバー
* Turbolinksとの相性がよい

### Youtubeのプログレスバー
![Fullscreen_5_11_14__11_02_PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/28262/d2f9015c-0f7b-91d3-4e19-dcf4009e740d.jpeg)


## Turbolinksを使っててよく起こる問題
* Turbolinksを使っているとTurbolinksで遷移したのか、ページが切り替わったのかわかりずらい
* ので、Javascriptでeventを書く際に`ready`なのか`page:load`なのかを意識するのが大変面倒。
* Turbolinksで遷移する時ににAjaxで時間がかかると処理が止まってるように見える。


## プログレスバーを追加すると何がいいか
* Turbolinks遷移時にはプログレスバーが表示され、そうでない時は表示されない(ページが切り替わるため)
* ユーザーにとって処理が行われている事が可視化されるので処理が止まってるのでは？という不安をある程度軽減出来る。
* 開発者にとって、この遷移はTurbolinksである、この遷移はそうではないということが視覚化されて捗る

## 内部的な処理
* page:fetch でプログレスバーをスタートさせて
* page:changeでプログレスバーを終了させているだけで
* とても簡単な処理となっている

## Tips
* プログレスバーがある程度進んで、完了する前にページが切り替わる場合、Turbolinksで正しく遷移できてない可能性があるのでそれらを無くしていくことでTurbolinksをうまく活用することが出来る。
  * ほとんどの場合、cssやjsが異なるページにアクセスしていることが多い。(data-turbolinks-trackしているコンテンツの内容が違う)。Turbolinksを使う場合はapplication.js, application.cssに集約するのがbest practice。

## まとめ
### Turbolinksを使う時はぜひnprogress-rails使いましょう!
Androidアプリでボタンをフェードイン&フェードアウトさせる方法

**Androidアプリでボタンをフェードイン&フェードアウトさせる方法**
--------------------------------------------------------------------

ボタンをフェードインしたり、フェードアウトしたりする方法をメモ。
例としてイメージボタンでのフェードイン、フェードアウトを実装。

使いどころはあまりないかもしれないが、躍動感のあるアプリにしたい場合には使えるかも。。

**■実装方法**
=====================================================================

①フェードインの実装方法
------------------------------------------------------------------

onCreateメソッド内等に以下を記述する。

```java
//フェードイン対象のボタンを指定
ImageButton btn = (ImageButton)findViewById(R.id.btn);

//フェードインアニメーションの準備する(1,0)フェードアウト、(0,1)フェードイン
AlphaAnimation feedin_btn = new AlphaAnimation( 0, 1 );

//表示時間を指定
feedin_btn.setDuration( 50 );

//実行
btn.startAnimation( feedin_btn );

```

②フェードアウトの実装方法
------------------------------------------------------------------
onCreateメソッド内等に以下を記述する。

```java
//フェードアウト対象のボタンを指定
ImageButton btn = (ImageButton)findViewById(R.id.btn);

//フェードインアニメーションの準備する(1,0)フェードアウト、(0,1)フェードイン
AlphaAnimation feedin_btn = new AlphaAnimation( 1, 0 );

//表示時間を指定
feedin_btn.setDuration( 50 );

//実行
btn.startAnimation( feedin_btn );

```


上記のフェードアウトとフェードインの違いは以下のところだけ。
イン　：AlphaAnimation feedin_btn = new AlphaAnimation( 0, 1 );
アウト：AlphaAnimation feedin_btn = new AlphaAnimation( 1, 0 );

以上、参考まで。

---
[簡単家計簿 Androidアプリ](https://play.google.com/store/apps/details?id=jp.example.keepingbook.app&hl=ja)

[音感診断 Androidアプリ](https://play.google.com/store/apps/details?id=jp.xising.single.app&hl=ja)
MATLAB-Sample 【基礎】グラフの表示

#ダミーデータの準備
グラフを表示するにはデータがないと始まらない。
まずはダミーデータを作成しておく。ただの直線ではイマイチな感じなのでオシャレな$\sin$カーブを使おう。

以下のコードをMATLABに読み込ませて、`X`と`Y`のデータを作成しておく。
（※以下のコードが何を意味するかについては、[MATLAB-Sample 【基礎】データを作る](http://qiita.com/oicawa/items/5e1c37f7d83c6f6aab58 "MATLAB-Sample 【基礎】データを作る")を参照のこと。）

```matlab
> X = 0.0:0.01:2*pi;
> Y = sin(X);
> 
```

これで、$\sin$カーブのX軸データとY軸データが作成された。


#グラフの表示

グラフを表示するには`plot`関数を使用する。では`X`と`Y`を使って表示してみる。

```matlab
> plot(X, Y);
```

こんな画面が表示されるはず。

![sinカーブ.png](https://qiita-image-store.s3.amazonaws.com/0/39876/c6ef099c-965b-3e89-cd10-4791033395d6.png)

#ラベルの表示

X軸やY軸にラベルをつけることができる。使用するのは`xlabel`関数と`ylabel`関数。

```matlab
> %まずはグラフを表示
> plot(X, Y)
> %X軸のラベルを表示
> xlabel('radian');
> %Y軸のラベルを表示
> ylabel('sin(X)');
> 
```

次のようにY軸に「sin(X)」、X軸に「radian」と表示される。

![ラベル付のグラフ](https://qiita-image-store.s3.amazonaws.com/0/39876/d59ef6f7-ea98-1581-8e8d-fcf88cc4636f.png)

（※上記画像はFreeMatで出力したもので、X軸のラベルが下半分切れてしまっている。MATLABで採取したもので差し替え予定。）


#凡例を表示

`legend`関数を使用する。つぎのように実行すると塩梅よく凡例を作ってくれる。

```matlab
> %まずはグラフを表示
> plot(X, Y)
> %凡例を表示
> legend('sin(X)');
> 
```

すると、つぎのように凡例が表示される。

![graph_with_legend.png](https://qiita-image-store.s3.amazonaws.com/0/39876/262556f2-a78a-f1a7-a660-2761d575bf28.png)