OmniAICreator/Qiita-1.07M huggingface dataset:
iOSの画面の基礎、デリゲート(Delegate)をマスターする


こんばんは。昨日からSwiftプログラミングをはじめました。iOSデベロッパー登録費用$99、円安だから12800円位するかなーと思っていたら、なんと7800円だったのでお買い得です。ということで、iOSプログラミングの最初のハードルと思われる、Delegateについて書きます。

## Delegateとは
いわゆる「移譲」です。iOSプログラミングをはじめると、しょっぱなからDelegateと出てきます。移譲と言われても何を移譲するんだろう、、と思っていたのですが、
iOSにおいては、「アプリ的に意味のある部分にフックポイントを用意してるので、そこをアプリ側で実装してね」ということのようです。

今回は、「テキストフィールドを設置した場合、キーボードが現れますが、その出現したキーボードをenterのタイミングで下げる。」
というのを例に見ていきます。
これ、最初キーボードが隠れなくて「あれっEnter押してもキーボード隠れない！」
ってなるんですよね。あるある。


## テキストフィールドのDelegateまわりのクラス図
わかりやすいようにクラス図に起こしてみました。![class.png](https://qiita-image-store.s3.amazonaws.com/0/8893/0f3e5891-32ea-f28f-1590-14a6af4bf97e.png)

iOSでは、長押しするとcopy/pasteダイアログが出たりかっこよくて気の利いたインタラクションが予め用意されいて、テキストフィールドをStoryBoardにペタッと貼り付けるだけで動作するようになっています。でもその裏には複雑な実装があって、昔ながらのGUIプログラミングの世界では継承を駆使したりしながら挙動の制御を行っていました。

一方iOSでは、こうした挙動をアプリ開発者は知らなくてよくて、

テキストフィールド「入力が終わったら呼び出してあげるよ」。
アプリ開発者「じゃあキーボード消して」

という作りになっています。その定義がDelegate（プロトコル）です。

よく

```swift
class ViewController: UIViewController, UITextFieldDelegate
```

なんていう定義をみますが、あれはアプリ側はViewControllerでテキスト処理もやっちゃおうというアプローチですね。

コード全部みますと、

```swift
import UIKit

class ViewController: UIViewController, UITextFieldDelegate {

    @IBOutlet var textField : UITextField

    override func viewDidLoad() {
        super.viewDidLoad()
        self.textField.delegate = self
    }

    func textFieldShouldReturn(textField: UITextField!) -> Bool {
        self.view.endEditing(true)
        return false
    }
}
```

のように書きますね。ただ、コールバックで呼ばれあうので最初はちょっとわかりにくいかもしれません。シーケンス図に起こすとこんな感じです。

![seq.png](https://qiita-image-store.s3.amazonaws.com/0/8893/50454339-90b9-58ab-3abf-d87bcdbba3f2.png)

ユーザからの入力を受け付けるのはテキストフィールドが担っていて、
一方でその入力に応じて各種機能を実行して、画面に反映するのが
ViewControllerです。そう言われるとViewControllerって名前も納得ではないでしょうか。
そしておもしろいのは、テキストフィールドはViewControllerについて何も知らない点ですね、「delegateに登録された、よくわかんないオブジェクト」ぐらいの関係性。
テキストフィールドはかっこいいインタラクションの提供に専念しています。


ここまでできると、一画面アプリなら作れるようになりますね。
![beacon.png](https://qiita-image-store.s3.amazonaws.com/0/8893/f95a2e14-8b6e-682f-6f3e-69d4564e1c6c.png)
ということで混雑する年末年始に向けて、「iBeaconで迷子アラーム」アプリを作ってます。
第二回管理画面チラ見せ♡ナイトの話


本記事は管理画面[Advent Calendar 2014](http://www.adventar.org/calendars/586)のために書かれました。

ということで、[「管理画面チラ見せ♡ナイト」第二回](https://atnd.org/events/57411)に登壇したときに話した内容のまとめました。
発表時のスライドはこちら、[Cloud CMOの管理画⾯ チラ♡⾒せナイト](http://www.slideshare.net/sunaomunakata/cloud-cmo)です。
私の所属しているイノーバではすでにブログでレポートを[公開](http://innova-jp.com/chiramise-night-vol2-report/)してしまっているので、個人ブログとして使っているQiitaにまとめています。

# コンテンツマーケティングについて

私が開発しているCloudCMOは、コンテンツ・マーケティングをするためのプラットフォームです。コンテンツ・マーケティングとはなにか？と話を始める前に、まずアウトバウンドマーケティングとインバウンドマーケティングについての説明をいたします。

## アウトバウンドマーケティング
アウトバウンドマーケティングは、TVやCM、展示会を使って、会社が外に向けて商品を売り込むマーケティングです。

## インバウンドマーケティング
インバウンドマーケティングは、検索キーワードを使って検索しウェブページにたどりつくなど、生活者が興味を持っている状態で、商品を知ってもらうマーケティングです。直接商品を売り込むのではなく、徐々に商品知識を身につけてもらってから購買につなげていきます。

## コンテンツマーケティング

では、コンテンツマーケティングとはなにかというと、インバウンドマーケティングにとても近く、コンテンツとあるように、自社の製品やサービス販売を目的としてブログ、ポッドキャスト、ebook、ホワイトペーパー、動画などのコンテンツを使って、自社の商品をPRしていくマーケティング手法です。商品を直接売り込むではなく、商品に関する周辺知識についてのブログ記事を掲載し、その一部に自社の製品も売り込むような見せ方をします。

通常４つのステップ、(1)訪問者→(2)潜在顧客→(3)リード獲得→(4)顧客をへて成果（サービスの契約）に繋げます。

例えば、QiitaTeamの会員になってもらいたいと考えた場合

### 1.訪問者
「Advent Calendar 2014」といったユーザー発信型の企画の場を提供し、Qiitaのサービスを使ってもらう

### 2.潜在顧客
 「エンジニアライフ」というブログを定期的に書きQiitaを使うようなエンジニアの仕事を紹介をする。
注：エンジニアライフというブログはありません

### 3.リード（見込み顧客）獲得
Qiitaを無料で使い続けながら、簡単に記事がかけて簡単に情報共有できる体験をしてもらう。Qiitaのファンになってもらう。

### 4.顧客
社内の情報共有にも使えそうだからと、QiitaTeamを契約する

以上のステップを見る通り、コンテンツマーケティングは短期的ではなく長期的な視点にたったマーケティングです。
コンテンツマーケーティングについて詳しくは知りたい方は「[商品を売るな](http://amzn.to/1u7I9CT)」にわかりやすくまとめていますので一読をオススメします。

駆け足でコンテンツマーケティングについて書きました。
では、さっそくサービスの管理画面についての話です。

# 管理画面について
今回のチラ見せナイトではCloudCMOを管理するための管理画面の話をしました。まだサービスが立ち上がったばかりでしっかりとした管理画面がないのですが、３つのサービスを使い分けて管理しています。

## ３つの管理画面

### Amazonマネージメントコンソール
弊社のインフラはAWS上で動いており、サーバーの管理はAmazonマネージメントコンソールを使い、必要に応じてAWSのAPIを使って内製の管理システムに統合しています。

### Datadog
[Datadog](https://www.datadoghq.com/)はあまり聞いたことがない人が多いと思いますので簡単に説明すると、SaaS型のモニタリングサービスで、各種クラウドサービス(AWS、Github、Jenkins、Slack)から数字を集約しグラフで可視化し監視をするためのサービスです。モニタリングというと、CPU使用率やメモリー使用率などのシステムに関することが多いですが、DatadogはWebAPIを提供しており、あらゆる数字をDatadogに集約することができます。

### 内製管理システム
AWS、Datadog、顧客管理システムを統合した管理システムです。
AWSの利用料金、顧客別のサーバー管理、カスタマーサポートやセールスのシステムと連動したシステムです。
この管理画面で実現したいことは、カスタマーサポートからシステムに関する問い合わせが来たらどのサーバーの上で動いているどのサービスでいつ問題が発生しているのかか、今どんな状態なのかひと目でわかるような監視システムです。

## 効果測定と管理画面
弊社が提供するサービスはマーケティングツールのため、マーケティングの効果があったかどうかモニタリングする必要があります。PVやUUが増えればシステムの負荷も連動して増加するためシステムに関するメトリクスとサービス関するメトリクスを統合した管理画面が必要になってきます。またシステムの設計思想はマイクロサービスの考え方を取り入れており、各サービスをWebAPIで連携できるようにし、各サービスを疎結合にし、必要に応じてサービス同士をつなげるようにしています。管理画面も各クラウドサービスとの連携を前提とした作りにしています。

ユーザーの満足度を最大化するために管理しやすく、画面をみたときに迷わずにすぐにアクションがおこなえるような管理画面を目指して日々改良していきたい思っています。
tar (child): bzip2: Cannot exec: No such file or directory

Perl-Buildでperlをインストールしようとしたら表題のエラーが出ました。
どうも、perl-5.20.1.tar.bz2ファイルの解凍に失敗しているようです。

# 原因と対処法

`bzip2` コマンドが入ってなかったのが原因でした。

```
yum install bzip2
```

これで解決しました。
MvvmCross の Visibility Converter

# Value Converters

Xamarin + [MvvmCross](https://github.com/MvvmCross/MvvmCross) の話をします。

View と ViewModel とのバインディングを行う際に重要なのが [Value Converters](https://github.com/MvvmCross/MvvmCross/wiki/Value-Converters) です。Converter を適切に導入することで、バインディングをすっきりさせることができます。

例えば、文字列を受け取って文字列の長さに変換する `StringLength` Value Converter を定義しておいて、次のようにバインディングする、といったことが可能です。

```
set.Bind(lengthLabel).To(vm => vm.HogeText).WithConversion("StringLength");
```

# Visibility Converter

便利な Converter のひとつとして、Visibility Converter を紹介します。これは、MvvmCross プラグインのひとつ [Visibility Plugin](http://www.nuget.org/packages/MvvmCross.HotTuna.Plugin.Visibility/) で提供されており、NuGet でインストールできます。

これは、ViewModel の値に応じて View のパーツの表示・非表示を切り替えたい場合に便利な Converter です。

## 具体例

iOS の場合を例に挙げます。ViewModel の string 型プロパティ HogeText が空文字列の場合に hogeButton を表示しないようにするには、以下のようにします。

```csharp
set.Bind(hogeButton).For("Visibility").To(vm => vm.HogeText).WithConversion("Visibility");
```

どのような仕組みになっているか分解します。

- `For("Visibility")` は、Visibility Plugin が提供している `UIView` へのバインディングです。
	- `MvxVisibility.Visible` を受け取った場合は `UIView` の `Hidden` プロパティが `false` になります。
	- `MvxVisibility.Collapsed` を受け取った場合は `UIView` の `Hidden` プロパティが `true` になります。
- `WithConversion("Visibility")` は、各種のデータを `MvxVisibility` に変換します。
	- `bool` の値の場合は、`true` を `Visible` に、`false` を `Collapsed` に変換します。
	- `int` の値の場合は、0 より大きな値を `Visible` に変換します。
	- `string` の値の場合は、`null` でも空文字列でもなければ `Visible` に変換します。
	- その他オブジェクトの場合は、`null` でなければ `Visible` に変換します。

## 注意点

`For("Visibility")` と `WithConversion("Visibility")`（または `WithConversion("InvertedVisibility")`）とはセットで使わなくてはいけません。

例えば、`For(v => v.Hidden)` と `WithConversion("Visibility")` とではバインディングできません。Converter が返す `MvxVisibility` は `bool` 値ではなく、`Hidden` プロパティに代入できないためです。

なお、厳密にはセットでなくても、自分で MvxVisibility 型のプロパティを定義してバインディングするのは可能です。
プロ生ちゃん Unity パッケージで Unity 入門してみたかったお話

# はじめに
このエントリーは [プロ生ちゃん Advent Calendar 2014](http://qiita.com/advent-calendar/2014/pronama-chan) の第7日目の記事です。

プロ生ちゃんと言ったらやっぱり3Dモデルを動かしたい、ということで少し前に公開された[プロ生ちゃん Unity パッケージ](http://pronama.azurewebsites.net/2014/08/20/kurei-kei-3d-model-unity-package/)を Unity で動かしてみたかったお話を書きます。

今まで、Unity のネイティブプラグインでネットワーク通信をするコードなどは書いたことがあったのですが、
ゲーム部分というか Unity 本体の方はほとんど触ったことがなかったので、全くの入門からやることにします。

# 題材
時間があるときに読もうと思って買ってそのままになっていた、こちらの本をこの機会に読むことにしました。

[Unityゲーム開発 オンライン3Dアクションゲームの作り方](http://www.amazon.co.jp/Unity%E3%82%B2%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA-%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B33D%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-%E7%AB%B9%E5%86%85-%E5%A4%A7%E4%BA%94%E9%83%8E/dp/4797374403)
![unity_game.jpg](https://qiita-image-store.s3.amazonaws.com/0/28313/b263d7a7-dd9a-548e-bb87-6e343b83e038.jpeg)

この本は初めて Unity を触る人向けに、かなり本格的なサンプルゲームを作りながら、その開発法を学んでいけるものになっています。詳細な手順が記述されているので、本書のとおりに Unity を操作していけば迷うことなくサンプルゲームの開発が進んでいきます。

# サンプルゲームの開発を少々
ということで、わたしも本の手順通りに4, 5時間ほど手を動かしてみたところ、こんなにかっこいい戦士やドラゴンの３Dモデルを動かすことができました！
![UNIDRA.png](https://qiita-image-store.s3.amazonaws.com/0/28313/e3c0e1f8-f20c-f6cc-154d-7e1e94e63991.png)

Unity は基本的に 3D オブジェクトにスクリプトをアタッチすることで開発していくようですね。オブジェクト同士やスクリプト間のメッセージのやりとりに際して、通常のように相手のインスタンスへの参照を持っておいて、それのメソッドを呼ぶ、というのではなく、

```csharp
SendMessage("Foge", arg);
```
のように全体にメッセージを投げて、それを処理できる関数を持っているスクリプトが反応するようにしておく、というのが Unity のスタイルのようです。こうしておくことで各スクリプトを疎結合に保つというわけですね。

# プロ生ちゃん 3D モデルを取り込む
プロ生ちゃんアドベントカレンダーのネタとして、ここらでプロ生ちゃんを登場させたいですね。
冒頭のリンクからさらにニコニ立体に飛び、 「暮井 慧（プロ生ちゃん） MMD & Unity 公式データ」をダウンロードしました。
落ちてきた zip ファイルを解凍すると unity というフォルダの中に .unitypackage ファイルが入っているのでそれを説明のとおりに Unity にインポートします。Prefab の中に入っている pronamachan_s （スパッツバージョン！) をシーンの Hierarchy にドラッグアンドドロップすれば取り込みができました。簡単ですね！

![import_pronamachan.png](https://qiita-image-store.s3.amazonaws.com/0/28313/bf4c52a0-4c44-a3ac-373e-f776cf1be7d8.png)

# モーションを設定する
本の手順通りに作った女戦士には待機・走り・攻撃のモーションを備えた AnimatorController が設定されているので、これをそのままプロ生ちゃんに設定してみました。

![animator.png](https://qiita-image-store.s3.amazonaws.com/0/28313/5a5a6487-e3db-3af7-b3b9-c50f3beef52f.png)

これでプレビューを走らせてみると、プロ生ちゃんが待機モーションを取ってくれました！
![staying.png](https://qiita-image-store.s3.amazonaws.com/0/28313/6797cb73-c6ee-c75a-54c1-59192dbb0e35.png)

攻撃モーションもこの通り。
![attack1.png](https://qiita-image-store.s3.amazonaws.com/0/28313/970579d1-155d-81bf-0f4c-a15963cd4b93.png)

![attack2.png](https://qiita-image-store.s3.amazonaws.com/0/28313/872a0c9e-edb2-155b-232a-88f6e6d70b4a.png)

# 走らない・・・
ただ、ここで問題にぶつかってしまいました。女戦士の場合には問題なくできていた、マウスクリックでの移動ができないのです。クリックしてもその場でわずかに向きが変わるだけで、走りだしてくれません。
どうも、動きからすると地面に足が引っかかっているのかな、という感じなのですが、どうにもそれを直すことができませんでした。プロ生ちゃんと女戦士の大きさの違いとかコライダーの設定が関係しているのだと思いますが・・・
今回は残念ながらここまでとなってしまいました。

# おわりに
Unity を使えばとても簡単に 3D ゲームを作ることができそうですね。また時間を見つけてはいろいろいじってみようと思います。それでは。プロ生ちゃんかわいいっ！
CSSで下線グラデーションを表現する

# 作りたいもの
1. 見出しの装飾を下線グラデーションとしたい
2. 見出しの文字数は不特定

# こんな感じ
![スクリーンショット 2014-12-07 22.55.45.png](https://qiita-image-store.s3.amazonaws.com/0/38510/b8a5558b-cfaa-83b0-a2c1-da4329b72147.png)

# こうしてみた
画像にしてやっちゃてば色々早いんじゃないかと思ったのですが、なんとなくcssだけで表現できないかと思い、試行錯誤して以下のようにして表現しました。

2つのspan要素を使い、左から右への色の彩度のグラデーションと、上から下への白塗りの透明度グラデーション（間に指定パーセンテージあり）を重ねて、あたかも下線がグラデーションしているようにしてみました。

```html:html
<h1>
  <span class="gradient_underline">
    <span class="gradient_underline_white">見出し１見出し１見出し１見出し１見出し１見出し１</span>
  </span>
</h1>
<h2>
  <span class="gradient_underline">
    <span class="gradient_underline_white">見出し２見出し２見出し２見出し２見出し２</span>
  </span>
</h2>
<h3>
  <span class="gradient_underline">
    <span class="gradient_underline_white">見出し３見出し３見出し３見出し３</span>
  </span>
</h3>
<h4>
  <span class="gradient_underline">
    <span class="gradient_underline_white">見出し４見出し４見出し４</span>
  </span>
</h4>
```

```css:css
.gradient_underline {
  font-size: 20px;
  line-height: 25px;
  display: inline-block;
  background: -webkit-gradient(linear, left top, right bottom,
    from(rgba(255,153,0,1)),
    color-stop(50%, rgba(255,153,0,1)),
    to(rgba(255,255,255,1)));
  background: -moz-linear-gradient(left,
    #ff9900,
    #ff9900 50%,
    #fff);
  background: linear-gradient(to right,
    #ff9900,
    #ff9900 50%,
    #fff);
}

.gradient_underline_white {
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 40px;
  font-size: 20px;
  line-height: 25px;
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(255,255,255,1)),
    color-stop(90%, rgba(255,255,255,1)),
    color-stop(91%, rgba(255,255,255,0)),
    to(rgba(255,255,255,0))
  );
  background: -moz-linear-gradient(top,
    rgba(255,255,255,1),
    rgba(255,255,255,1) 90%,
    rgba(255,255,255,0) 91%,
    rgba(255,255,255,0)
  );
  background: linear-gradient(to bottom,
    rgba(255,255,255,1),
    rgba(255,255,255,1) 90%,
    rgba(255,255,255,0) 91%,
    rgba(255,255,255,0)
  );
}
```

# 感想など
* パーセンテージで色指定をしているため、2行にまたがると線の太さが倍になっちゃうのを直さないとですね。

* ちょっと前に作ったのですが、そのときのIE/Firefox/Safali/Chromeの最新版で動作確認しています。

* 他に何かもっといい方法はないものか...

End of Document.
Ruby（っぽいなにか）でシェーダを書く

# 前説
「[DXRuby Advent Calendar 2014](http://www.adventar.org/calendars/345)に出せなかったチラシの裏ネタ」略して「DXRuby Advent Calendar の裏ネタ」です。
プログラマブルシェーダを Ruby で書きたかったので書いてみました。

# 導入
この [hlsl.rb](https://gist.githubusercontent.com/wanabe/64602cb2ea501357114f/raw/c3cc18aefb44bed5149e51c994b6a9492288250a/dxrubyhlsl.rb) を、ダウンロードしてご自分の Ruby の lib/ruby/site_ruby/（バージョン）/ に移動させてください。

# 動作
DXRuby 1.4.1 の sample/shader_sample 以下のサンプルに対して[パッチを作りました](https://gist.githubusercontent.com/wanabe/64602cb2ea501357114f/raw/3cc5c13b4404c0192c1f04f05b868d7d550cf787/dxruby-hlsl.patch)。Gist に貼るときに文字コードをUTF-8にしてしまったっぽいので、もし試してやろうという方がいらっしゃいましたらSJIS（厳密にはWindows-31J）に変換してからお使いください。

パッチ後はシェーダ部分が Ruby スクリプトになり、かつパッチ前後で動作が変わっていないことが確認できるかと思います。

# 詳細
**スクリプトファイルを直に読み込んで、HLSL になるように sub! と gsub! と tr! で書き換えています**。それだけです。

# 雑感
最初は ISeq#to_a の結果をパースしようとしていたのですが、命令が多すぎて挫折しました。

作業中に、どちらかというとエイプリルフール向けのネタなんじゃないかと気づきました。が、４月まで置いたら絶対に忘れるので今のうちに出しておくことにします。

一応、Ruby スクリプトで統一されるので（インデントや色分けなど）エディタで見やすいという実用的な面もあります。すみませんこじつけです。
Luaでコルーチン

# Luaでコルーチン

遅刻してしまいましたが、Lua Advent Calendar 6日目書きます。

その拡張性と実行速度からしばしばゲーム開発において用いられます。
その中でも特に強力な機能としてコルーチンがあります。

## コルーチンとは
強調的マルチスレッドとも呼ばれます。
マルチスレッドはここであえて説明する必要はないとは思いますが、処理をスレッドという単位にわけ平行で実行し、パフォーマンスを向上させるというものです。
マルチスレッドでは実行するスレッドの切り替えを自動で行うのに対し、コルーチンは手動で切り替えを行います。
明示的にスレッドの切り替えを行わない限り他のスレッドの処理が割り込むことはありません。

## どういうときに使うのか
パフォーマンス向上目的というよりは、非同期処理をシンプルに書くために使われることが多いかと思います。
たとえばこういうケースです。

1. 保存ダイアログを表示する
2. 保存ダイアログのOKボタンが押されれば保存して終了する
3. 保存ダイアログのCANCELボタンが押されれば確認ダイアログを表示する
4. 確認ダイアログのOKボタンを押せばアプリケーションをを終了する
5. 確認ダイアログのCALCELボタンが押されれば再度保存ダイアログを表示する

コールバックを活用し、いかのようなコードをおそらく書くことになります。

```lua
local showSaveDialog
local showConfirmDialog

showSaveDialog = function()
  _showSaveDialog({
    onOK = function()
      save()
      exit()
    end,
    onCANCEL = function()
      showConfirmDialog()
    end
  })
end

showConfirmDialog = function()
  _showConfirmDialog({
    onOK = function()
      exit()
    end,
    onCANCEL = function()
      showConfirmDialog()
    end
  })
end
```

ですがもう一度よく処理の流れを見てください

> 1. 保存ダイアログを表示しする
> 2. 保存ダイアログのOKボタンが押されれば保存して終了する
> 3. 保存ダイアログのCANCELボタンが押されれば確認ダイアログを表示する
> 4. 確認ダイアログのOKボタンがあればアプリケーションをを終了する
> 5. 確認ダイアログのCANCELボタンが押されれば再度保存ダイアログを表示する

この処理、普通に無限ループで書くことができます。
ですが何故コールバックで書かないといけないのでしょうか？
それはこの処理がノンブロッキングだからです。
`showSaveDialog()`のあとすぐに`showConfirmDialog()`を書いてしまうと2つのダイアログが同時に出現してしまいます。
なのでコールバックで実装するしかないのです。
しかし、これだと処理の流れが複雑になってしまいます。
今回の場合はダイアログが2つだけでしたが3つ、4つと増えてくるとコールバックが増え、非常に見通しが悪くなってしまいます。

それを解決してくれるのがコルーチンです。
コルーチンを使うと以下のように書き換えることができます。

```lua
local showSaveDialog
local showConfirmDialog

local thread = coroutine.create(function()
  while true do
    local ok_pushed
    ok_pushed = showSaveDialog()
    if ok_pushed then
      save()
      return
    end

    ok_pushed = showConfirmDialog()
    if ok_pushed then
      return
    end
  end
end)

showSaveDialog = function()
  _showSaveDialog({
    onOK = function()
      coroutine.resume(thread, true)
    end,
    onCANCEL = function()
      coroutine.resume(thread, false)
    end
  })
  coroutine.yield(thread)
end

showConfirmDialog = function()
  _showConfirmDialog({
    onOK = function()
      coroutine.resume(thread, true)
    end,
    onCANCEL = function()
      coroutine.resume(thread, false)
    end
  })
  coroutine.yield(thread)
end

coroutine.resume(thread)
```

このように同期的な無限ループに書き換えることができます。
ダイアログ表示のタイミングでスレッドを一時停止しているのでビジーループにはなっていません。

やっていることは簡単で`coroutine.create`で新しいスレッドを作成。
`coroutine.yield`でスレッドの処理を中断し、元のスレッドに戻る。
`coroutine.resume`でスレッドの処理を再開する。

ダイアログの表示は別スレッドで行い、表示した瞬間スレッドを停止、ボタンが押されたらスレッドを再開させる、それだけです。

コールバックよりは見通しがよくなったと思いませんか？

## まとめ
このようにコルーチンを使うとこのように非同期処理をすっきり書くことができます。
一方でLuaのホストとしてはしばしばC/C++が用いられますが、そこまで非同期処理につよいとはいえません。
この辺うまくすみわけできるとよいですね。
vpshud

512bit 内の 128bit に含まれる32bit値4個をまぜまぜします。x86の伝統に従い、128bit 境界は超えられません。

```cpp

#include <immintrin.h>
#include <stdio.h>

int in0[16] = {100,
               101,
               102,
               103,
               104,
               105,
               106,
               107,
               108,
               109,
               110,
               111,
               112,
               113,
               114,
               115};
               

int out[16];

static inline int __attribute__((always_inline))
test(const int imm)
{
    __m512i v = _mm512_loadu_si512(in0);
    v = _mm512_shuffle_epi32(v, imm);

    _mm512_storeu_si512(out, v);

    for (int i=0; i<16; i++) {
        printf("%2d:%3d\n", i, out[i]);
    }
}



int
main(void)
{
    test(_MM_SHUFFLE(3,3,3,3));
    puts("--");
    test(_MM_SHUFFLE(3,2,1,0));
    puts("--");
    test(_MM_SHUFFLE(0,0,2,2));
}
```

```
$ sde -- ./a.out 
 0:103
 1:103
 2:103
 3:103
 4:107
 5:107
 6:107
 7:107
 8:111
 9:111
10:111
11:111
12:115
13:115
14:115
15:115
--
 0:100
 1:101
 2:102
 3:103
 4:104
 5:105
 6:106
 7:107
 8:108
 9:109
10:110
11:111
12:112
13:113
14:114
15:115
--
 0:102
 1:102
 2:100
 3:100
 4:106
 5:106
 6:104
 7:104
 8:110
 9:110
10:108
11:108
12:114
13:114
14:112
15:112
```

明日は @tanakmura が vpermt2d について書きます。
MacでPostgreSQLのポート番号を変える方法


## 設定ファイルを書き換える

- ターミナルを開き階層を移動する``` cd /Library/PostgreSQL/9.3 ``` (9.3は使用しているバージョンによって異なります)
- Finderで開きます``` open .```
- dataフォルダを右クリックし、情報を見るをクリック
- 出現したwindowの右下にある鍵マークをクリックし、クリティカルな設定の変更ができるようにします。
- 設定が可能になったら、共有とアクセス権の項目で左下にある「+」のボタンをクリックしAdministratorを選択します
- 共有とアクセス権の項目で<名前：admin>を<読み/書き>に変更します。この操作によりFinderでdataフォルダが開けるようになります。
- Finderで/Library/PostgreSQL/あなたのPostgreSQLバージョン/data/postgresql.confを適当なエディタで開きます。(ex.sublime)
- ファイルを開いたら57行目あたりの「port = 」の項目があるので、数値を適当な値に変更します。（参考；CONNECTIONS AND AUTHENTICATION->Connection Settings）
- ファイルを保存します。
- Finderで/Library/PostgreSQL/あなたのPostgreSQLバージョン/に移動し、dataフォルダの共有とアクセス権で<admin>をクリックし、左下の「-」ボタンをクリックします。
- さらに、同windowで鍵マークをクリックし、設定をロックします。


## PostgreSQLを再起動

- ターミナル上で、```sudo launchctl stop com.edb.launchd.postgresql-9.3```(9.3は使用しているバージョンによって異なります)を実行しPostgreSQLを停止します。
- ```sudo launchctl start com.edb.launchd.postgresql-9.3```(9.3は使用しているバージョンによって異なります)を実行しPostgreSQLを開始します。

## サーバの作り直し

- サーバの下にある「PostgreSQL9.3(locahost:これまでのポート番号)」を右クリックし、削除(抹消)を行う
- ファイル->サーバの追加からサーバを追加する。
    - サーバ名：適当に
    - ホスト名：localhost 
    - Port：新たに設定したポート番号
    - ユーザ名、パスワード：適当に
講習会におけるコーチング手法


今年は4月から31回ほどのプログラミングの講習会に関わってきた。講習会でのアンケートを指導方法に活かすことで、PDCAサイクルを回すことはできていたが、質的変化の必要性を感じ始めたので考えを整理してみた。

## 目標の設定&明確化で協同関係

大抵、指導する側が設定した講習の目標提示を行うが、指導を受ける側の目標設定はそれぞれ異なっていることが考えられる。もし各人の収穫や成長を考えるのであれば、各人の目標を知る必要がある。大人数に対して指導を行う場合、時間・人材・場所などのリソースに縛られることになるが、個人的な技術サポートを行うにしても、各人の目標を<感じている状態>と<知っている状態>では対応が変わってくる。一方的に技術サポートを行ったとしても、各人の本質的な変化に結びつかないことが多かった。

### 目標設定

指導する側が目標を傾聴するときに必要な観点。ライトニングトークや勉強会では、全体に対して参加目的を挙手制で確認するだけでも違う。

#### 人そのものをみる

- インプレッションで可能性を判断しない（この瞬間から後天的である）
- はじめから技術力の向上に焦点をあてない（課題は人そのものを引き出してから関わるべきもの）
- フィードバックを約束する（承認を与え、行動の動機を作る）
- フィードバックを行い、成長を認知させる(目標の設定効果を確認させる)

### 傾聴

- 内的傾聴（自分の経験を話したりする。感染力弱い。）
- 集中的傾聴（相手に集中し、感情を読み取り実際を読み解く。）
- 全方位的傾聴（仕草を含む相手の全てに対して気づきを行う。感染力強い。）


### オープンクエスチョン

指導する側が各人に対して質問を行い気づきを与える。

* 期待：「この講習会で何をもとめているのか」など
* 可能性を探る：「他にどのようなことが考えられる」など
* 選択肢を広げる：「続けた場合と続けなかった場合の違いは何」など
* 核心をつく：「いま抱えている問題は何ですか」など
* 行動を促す：「いつやるの」「いつまでにやれば良いと思いますか」など
* 学びを深める：「講習会の学びを深めるためにはどうしたらいいか」など
Blenderのユーザインターフェース

# Belnderユーザインターフェース(UI)のなりたち
BlenderのUIは「わかりにくい」「変態的だ」などとdisれらることが多いのは事実です。しかしBelnderのUIはマーケティングの結果で生まれたものではありません。もともと3DCGの製作会社のCGアニメータたちが、自分たちが使うため自ら作成したソフトウェアで、自分たちが効率よく作業を進めるために考えられた合理的なUIなのです。

誰もが最初に面食らうのは、RMB(右マウスボタン)による選択です。通常、選択はLMB(左マウスボタン)で行うのが常識ですが、Blenderでは逆なのです。これにも理由があります。一般的なマウスの使用では左ボタンの使用が圧倒的に多いので、指の疲労を平均化するために選択を右ボタンに割り付けているのです。
（この話は出展を覚えていないのですが、他にも理由があったと思います。また、設定で左ボタンを選択に割り付けることも可能です。）

#Blender UIの基本
Blenderのあらゆる機能は当然メニューから選択可能なのですが、その機能のほとんどにショートカットが割り付けられています。最初はメニューから選択しても良いと思いますが、良く使う機能からどんどんショートカットに切り替えていくと良いと思います。

Blender操作時の基本スタイルは「左手をキーボードの左側に置き、右手でマウスをつかむ」というものです。このスタイルに慣れると、このUIは以外は考えられなくなります。

#最初に覚えるショートカット
Blender操作時に一番良く行うのは「なにかを選択して、どうにか（移動・回転・拡大縮小）する」というものだと思います。

まず「選択」ですが、これは前述のRMBによるクリックで行います。（他にもいろいろ選択の方法はありますが、とりあえずは右クリックです）

次に「移動」です。ショートカットは「G」です。「Grab:つかむ」の頭文字です。なぜ「Move:移動」の「M」ではないのか？　それは「M]だと左手でタイプしにくいからです。これがBlender UIの思想です。「G」をタイプしたと同時にマウスで自由に移動できるようになります。気に入った場所でLMB（左マウスボタン）をクリックすると移動完了です。LMBではなくRMBをクリックすると「移動」のキャンセルです。LMBで「決定」RMBで「キャンセル」というのは共通ルールです。

次は「回転」です。ショートカットは「R」です。「Rotate：回転する」の頭文字です。これは覚えやすいし、左手でタイプしやすい位置です。ラッキーです。操作は「移動」と同様でマウスで回転させてLMBで「決定」RMBで「キャンセル」です。

最後に「拡大縮小」です。ショートカットは「S」です。「Scale：縮尺」の頭文字です。これも覚えやすいし、左手でタイプもしやすい位置にあります。またまたラッキーです。マウスを選択した物に近づけると「縮小」離すと「拡大」で、LMBで「決定」RMBで「キャンセル」です。簡単ですね。

# G:移動/R:回転/S:拡大縮小の応用
これで「選択」「移動」「回転」「拡大縮小」「決定」「キャンセル」を覚えました。これを応用します。
「移動」は「G」でしたが、「G」「X」と連続してタイプすると「X軸に沿って移動」となります。Y軸、Z軸も同様です。さらに「G」「X」「X」とタイプすると「ローカルのX軸に沿って移動」になります。すでに回転している物体だと自身から見たX軸は基準のX軸とはずれています。この自身からみたX軸が「ローカルのX軸」です。（基準のX軸はグローバルのX軸と呼びます）

「回転」「拡大縮小」もまったく同様にローカル・グローバル軸に沿った操作が可能です。

# まとめ
基本中の基本を簡単に説明しましたが、いかがでしょうか？
Belnderは簡単に使いこなせる道具ではありません。無限の可能性を秘めた非常に強力な道具であり、日々開発が続けられ、機能もどんどん増えています。完全に習得するには非常に時間がかかります。しかし、それだけの価値がある道具なのです。 とはいえ、難解と言われるUIでも、しっかりと合理的な思想に裏付けられており、慣れればどんどん習得は進みますし、全てを理解しなくても十分楽しめる道具でもあります。じっくり腰を据えて挑戦してみてはいかがでしょうか。
実物貨幣としてのビットコイン

ビットコインは、経済学の文脈で、実物貨幣と信用貨幣のどちらに分類されるべきかという議論があります。実物貨幣をどう定義し、信用貨幣をどう定義するかで結論が変わりますし、実物貨幣でも信用貨幣でもない第三の分類を定義することも可能だと思います。早稲田大学大学院教授の岩村充さんは、2014年の3月頃に放映されたあるテレビ番組で、信用貨幣と実物貨幣の大枠を示した上で、ビットコインは実物貨幣だと発言しました。私は筋の通った議論だと思っています。以下は、そのときの発言の一部です。

<b>岩村</b>　 ビットコインは、法律的にはともかく、貨幣です。正確に言うと、貨幣として以外に全く使いようがないという意味で、見事に貨幣ですね。電子ファイルの一種だと言ってもいい訳ですけど、例えば、音楽ソフトなら楽しめるんですけど、ビットコイン持ってても何にも楽しくない。人に渡すしかない訳で、これは貨幣ですね、やっぱり。だから、貨幣ってくだらないものなんですよ。貨幣としてしか使えないほどくだらない代物だというふうに意地悪言ってもいいですね。

<b>岩村</b>　信用貨幣というのは、発行者の信用に依存すると。日本政府の徴税能力と日本国債の信頼と金融政策に依存すると。こういうふうに価値ができてる。それに対して、大麦とか銀ってメソポタミアの時代からあったんですが、金貨っていうのは比較的新しいし、銭というのはかなり長い伝統があるんですが、そういうものっていうのは、もともと持ってる素材の価値が重要な訳ですね。素材の価値で通用するものを実物貨幣と言う訳です。さあ、ビットコインはどっちかと、こういう話ですが、実物貨幣です。

<b>岩村</b>　金の価値っていうのは、金自体たいしたものじゃないんですよ。金歯になるとかね。飾るとか。他に使いようがないから貨幣向きなんですが、じゃあなんであんなに金に高い値段がつくかというと、地金採掘費とか、鋳造費とか、流通管理費とか、そういうのが非常にかかる。だから1グラム何千円もするんですね。こういうのを限界費用っていうんですが、過去どのくらいの値段で金を掘ったかじゃなくて、今新しく金貨を1枚作るとしたらなんぼかかりますかと、1枚作るのに10万円かかりますというなら、そういう意味で10万円なんです。なぜかっていうと、価値が10万円より高いとマーケットで評価されれば、どんどん金貨作られるし、安くなると誰も作らなくなるから、結局そういうのを限界費用価格って経済学者は言うんですけどね。金は限界費用で価値が出てると。ビットコインはどうかということですよね。ビットコインについても同じように考えると、ご説明があった通りで、一定の手順を取って探し出した特別な数字の塊なんですね。その条件を満たす数字を見つけるのに、すごいコンピュータコストがかかる。電力代もかかる。それがビットコインの価値だよといふうに考えることができるとすれば、仮想で実物貨幣というのは変ですけれども、でも論理的には金や銀と同じ価値の構造を持ってるという意味で、実物貨幣に分類した方がいいと。

ところで、2013年12月にシカゴ連邦準備銀行が発行した<a href="http://www.chicagofed.org/digital_assets/publications/chicago_fed_letter/2013/cfldecember2013_317.pdf" target=”_blank”>レター論文</a>では、ビットコインは信用貨幣だとしています。この論者は、計算機資源とエネルギーが、ビットコインの市場価格を決めることを認めながらも、金と違って一旦生成されたビットコインには交換以外の価値がないから、実物貨幣とは認められないという論理展開を披露しています。これは、岩村さんのように貨幣価値の構造の違いによって貨幣を分類するのではなく、貨幣の受領性の構造によって貨幣の分類を試みているのでしょう。つまり、内在的価値によって受領を期待できる実物貨幣と、内在的価値がないにも関わらず受領を期待できる信用貨幣で区別する試みです。

この論文のまずいところは、実物貨幣と信用貨幣を何によって分類するのか明確に書いていないことです。また、内在的価値（intrinsic value）の意味も曖昧だと言わねばなりません。金にしてもビットコインにしても、概ね限界費用のみでその価値が決まっていることを認めるなら、ビットコインにも内在的価値があるという結論になってしまうでしょう。常識論として、価値移転以外に利用価値のない電磁的記録を実物貨幣に分類するのは抵抗があるから第三の分類を作ろう、というのなら理解できますが、この論文にそのような提案はありませんでした。

ハイエクの『貨幣発行自由化論』の第10章にもあるように、経済学的見地からは、貨幣と貨幣でないものとの間に明確な区別はありません。区別が必要なのは法律の世界です。たとえ骨董品だったとしても、その流動性（受領性）と価値を分析することで、骨董品が貨幣として機能する程度を議論することができるということです。このように、様々な貨幣がある中で、それらを実物貨幣と信用貨幣に分類する試みは面白いと思いました。分類の結果は定義次第であり、上手に定義すれば、分類数が減ったり、固定観念を打ち破る分類結果になったりすることもあるのではないでしょうか。
virtual-domを使って、Reactみたいなコンポーネントを実現するライブラリを書いてみた


Virtual DOM がアツい昨今ですが、virtual DOM は特に [React](http://facebook.github.io/react/)や[deku](https://github.com/segmentio/deku)のようなコンポーネントライブラリの実装に使われているということで注目を集めています。

一方、virtual DOM自体は概念にすぎないので、それを独立して実装している[virtual-dom](https://github.com/Matt-Esch/virtual-dom/)などのライブラリもあります ([以前の記事](http://qiita.com/seanchas_t/items/05d70bf4e095865583cf)で書きました)。
そこで、その virtual-dom をベースにReactのようなコンポーネントライブラリを自作してみるのも興味深いと思い試してみました。

# 作ったものの概要

[seanchas116/decompose](https://github.com/seanchas116/decompose)

* virtual-dom ベース
* ビューと状態を一つにまとめたコンポーネント
  * 簡単化のためにstates/propsの区別はなし
* 同じ場所/移動しているが同じキー の時は同一コンポーネントがそのまま生き残る
* 各コンポーネントごとに独立してdiff/patch
  * パフォーマンスのため。見たところdekuも同じことをやっている (Reactは大きすぎて今のところ読めていない…)
  * これは素のvirtual-domだとやりにくく、virtual-domの`Widget`ノードをうまく使うと実装できる
  * Reactと違って、外側のコンポーネントが更新された時に内側のコンポーネントも更新されるようにはしていない (パフォーマンスは良くなるけど使い勝手は悪くなるかも？)
* 本物のDOMをコンポーネントとして扱うこともできる

(今のところ)CoffeeScriptで200行程度のかなり簡単な実装です。
今のところ、CoffeeScriptのクラスを使いまくっているので、ES5以前のJSで使うとつらそうです。

# 例

```coffeescript
{Component} = require 'decompose'

class TodoView extends Component

  render: ->
    h 'li', [
      h 'h2', @todo.title
    ]

class TodoListView extends Component

  render: ->
    h 'ul', @todos.map (todo) =>
      TodoView.render todo: todo

todoListView = new TodoListView(todos: todoCollection.todos)
todoCollection.on 'update', ->
  todoListView.update()

new Mount(todoListView).mount('#main')
```

# TodoMVC

定番のTodoMVC実装をこのライブラリでも書いてみました。

[seanchas116/decompose-todomvc](https://github.com/seanchas116/decompose-todomvc)

# 実装

## Component

コンポーネントのベースクラスです。

https://github.com/seanchas116/decompose/blob/master/src/component/Component.coffee

## Mount

実DOM上にマウントします。1イベントループ中にComponentが`update`イベントを1回以上吐くと、イベントループ完了時にdiff/patchが行われます。

https://github.com/seanchas116/decompose/blob/master/src/mount/Mount.coffee

## ComponentNode

virtual-domのdiff/patch用に使われます。

https://github.com/seanchas116/decompose/blob/master/src/node/ComponentNode.coffee

# パフォーマンス

https://github.com/seanchas116/todomvc-perf-comparison

(@dsuket さんの https://github.com/dsuket/todomvc-perf-comparison をフォークさせていただきました)

![test.jpg](https://qiita-image-store.s3.amazonaws.com/0/36226/e9ce31f2-261f-21d8-da1f-03a9182d4c70.jpeg "test.jpg")

手元の環境 (OS X 10.10.1 + Chrome 39) だとなぜかTodoMVCでいい感じのパフォーマンス(一番下)が出ます(バグかもしれませんが…)
機能を増やしたり使い勝手をよくしていくとどうなるかは今のところわかりません。


# まとめ

* virtual-domベースで単純なコンポーネントシステムを簡単に作ることができた
* パフォーマンスも結構出るっぽい？
Phalconを使って画像変換サーバをつくる

個人的に2014年はPhalconと出会い、Phalconの魅力に取り憑かれ、そしてPhalconに最後まで悩まされた1年でした。そんな2014年の[Phalcon Advent Calendar](http://qiita.com/advent-calendar/2014/phalcon)にこのエントリを捧げます。


## Webサービスと画像変換サーバ

マルチプラットフォームを対象にしたWebサービスを展開するにあたって、必ず頭を悩ますのがデバイスごとの各種画像サイズへ対応です。固定のアイコン画像などであればPhotoshopなどで書き出すときに自動化してしまえばいいものの、ユーザから投稿された画像だったりするとサーバサイドでの自動変換が必要になったりします。

こうした問題を解決するためにCOOKPADさんの[mod_tofu](http://www.slideshare.net/mirakui/ss-8150494)だったりクラスメソッドさんの[Rudess](http://dev.classmethod.jp/cloud/aws/rudess-image-server/)だったり、各社それぞれに独自の実装をしているケースが多いようです。このような機能をPhalconを使って実装してみました。


## 実現する機能について

変形させたい画像が`public/images`の中に保存されているという前提で、`/image/filename.png/100`というようなURLでアクセスすると縦横とも100pxのサムネイル画像を生成して表示する、ということを実現したいと思います。


## 事前準備

今回は実装を簡単にするためにImageMagickの`cropThumbnailImage()`関数を利用します。ImageMagickのライブラリが入っていない場合にはインストールしておきましょう。以下、CentOS系の場合の例です。

```bash
$ sudo yum -y install php-pecl-imagick
```


## ルーティング設定

まず、先ほどのURLでアクセスした時に指定のコントローラを呼び出すよう、設定ファイルのルーティングをしている箇所に以下の様な内容を指定します。デフォルト設定だと`app/config/services.php`にあるはずです。マルチモジュール構成の場合などは適宜読み替えてください。

```php:app/config/services.php
$di->set('router', function () {
    $router = new \Phalcon\Mvc\Router();
    $router->add('/image/([0-9A-Za-z\._-]+)/?([0-9]*)', [
        'controller' => 'image',
        'action'     => 'thumbnail',
        'filename'   => 1,
        'size'       => 2
    ]);
    return $router;
});
```

これでImageControllerのthumbnailActionが呼び出されるようになるはずです。


## コントローラの実装

続いてコントローラを実装します。PhalconのImageMagickのラッパーであるImagickクラスのインスタンスに対して`getInternalImInstance()`を実行するとImageMagickのオブジェクトを取得してラップされていないメソッドを直接叩くことが可能です。

```php:app/controllers/ImageController.php
class ImageController extends \Phalcon\Mvc\Controller
{
    /**
     * 画像から指定サイズのサムネイルを作成して表示する
     *
     * @param string $filename
     * @param string $size
     */
    public function thumbnailAction($filename, $size)
    {
        $img = new \Phalcon\Image\Adapter\Imagick("images/$filename");

        $imagick = $img->getInternalImInstance();
        $imagick->cropThumbnailImage($size, $size);

        $response = new \Phalcon\Http\Response();
        $response->setContentType($img->getMime());
        $response->setContent($img->getImage());
        $response->send();

        $imagick->destroy();
        exit();
    }
}
```

これだけで指定した画像を任意のサイズに変形して出力することが可能です。ちなみに縦横比が正方形ではない場合、画像の中央から正方形になるように切り出したものが変形されます。（横長の場合、左右の両脇は同じ幅でトリミングされます。）


## 最後に

私が現在エンジニアとして働いている[アオイゼミ](https://www.aoi-zemi.com)ではサーバサイドの実装にPhalconを使っています。この記事にまとめた仕組みも活用しており、実際の利用にあたっては、クライアントアプリの負担を軽くしたり、多くのリクエストを効率的に捌けるよう、以下の機能を組み込んだ実装になっています。

- 画像によっては正方形ではなく縦横とも任意のサイズに変形可能
- リクエストURLをキーに変形後の画像バイナリをキャッシュして、一度生成した画像は再利用
- URLにオプションを付与することでサムネイルを円形にクロップ
- 幅と色を指定して、生成したサムネイルに任意の枠線を動的に合成
- 可用性向上のため画像ファイルの実体はAWSのS3に保存して、そこから取り出す

Phalconを使って自社サービスを開発したいエンジニアを絶賛募集中ですので、ご興味ありましたらぜひご連絡ください！
vvvv 講座動画の作り方

この投稿は[「VVVV Advent Calendar 2014」](http://qiita.com/advent-calendar/2014/vvvv)の８日目の記事です。

***

こんにちは。

僕は vvvv 学習者、初心者向けに vvvv 講座やチュートリアル動画などを色々作って Youtube にアップしています。
プレイリストはこちら：[Youtube:vvvv講座](https://www.youtube.com/playlist?list=PLqjkdWFcBMk8gVdbGuSqwi4q1ihr7LcaW)
で、この記事では僕が vvvv のチュートリアル動画を作る際のノウハウ的なものを紹介します。

動画って面倒に思われるかもしれませんが慣れると結構楽です。それこそ気分的にブログより楽なくらい。

先に言っておくと、vvvv 関係ない記事です。でも許してください。

##ブログと動画の違い
学習系のコンテンツは、ブログにはブログのよさ、動画には動画の良さがそれぞれあります。

**ブログの良さ：**
・検索できる
・流し読みできる
・欲しい情報だけ素早く取れる

**動画の良さ：**
・動く
・パッチの出来ていく流れを追える。

少し考えてみるとそれぞれ色々とメリットデメリットがあるので、適切な媒体を選びましょう。

## 使用ソフト
・マイク（適当な３０００円くらいの奴）
・キャプチャソフト「oCam」([http://www.forest.impress.co.jp/library/software/ocam/](http://www.forest.impress.co.jp/library/software/ocam/))
・動画編集「Adobe Premiere」
・動画編集「Windows ムービーメーカー」

## 動画を作る流れ
###１）キャプチャ
**「oCam」**を使い、一人でマイクに話かけながらパッチを作っていく様子をキャプチャします。
一度やってみると分かりますが、一人でテンション高くしゃべるのはとても難しいです。
他の Youtuber の人たちはすごいなあ。
###２）１次書き出し
ムービーメーカーで**「高解像度ディスプレイ用」**の設定で一度無駄に書き出します。
コーデックなどを色々いじったのですが「oCam」でキャプチャしたファイルは、これをしないとどうも音ズレが発生します。本当はこの手順をなくしたいです。
「音が無い」もしくは「編集をしない」場合には、Youtube 用の設定（後述）で書き出して終了です。
###３）編集
Premiere を使って適当に編集します。
無音部分、「えーっと」「あー」みたいな部分、省略できる部分はガンガン削りましょう。動画のテンポがよくなります。
あとはテロップの表示や音量の調整もここでしています。
###４）Youtube 用に書き出し
**「[Youtube：高度なエンコード設定](https://support.google.com/youtube/answer/1722171?hl=ja)」** を参考にし、適切なファイル形式で書き出します。
> ![capture.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/a3948805-73ff-6029-6463-bb8321ed7012.jpeg)

Premiere の場合は、H264 の Youtube 用プリセットがあるのでそれを使えば大丈夫です。
ムービーメーカーから書き出す場合は、これに合わせて、1080p, 8000kbps とかの設定を作りましょう。
###５）Youtube へアップロード
普通にアップロードすればいいのですが、いくつか注意点があります。

**・想定よりも解像度が低い**

完全に処理が終わるまで公開ボタンを押すのは待ちましょう。
処理が中途半端だと低解像度でしか見てもらえない可能性があります。
アップロードと処理を待ち、「処理が完了しました」と表示されても、想定した解像度で見るためには、処理にしばらく時間がかかります。**騙されてはいけません。**

![cap2.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/bb18cef0-44f8-3ce1-9584-d9f5f5a4fec9.jpeg)

目安は、この赤矢印の所にサムネイル画像が表示されていない内は **処理が終わっていません**。
サムネイルが表示された時くらいに処理が完了しています。
確実な確認方法は、動画の管理画面で**「HD」**と表示されれば大丈夫です。

![cap3.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/a9739223-1ef5-4d90-401b-041f5c3afe78.jpeg)

まぁ焦らずじっくり処理が終わるのを待ちましょう。
いくら待ってもＨＤになら無い場合、上述した動画のフォーマットを見直しましょう。

えっと、
**「いくつか注意点があります」と言いましたが、１つしかありませんでした。**

##おしまい
vvvv に全然関係ない記事になりましたが、みんなもたまには動画講座も撮ってみるといいんじゃないかなと思います。
あと僕は Youtube だけ使ってますが、作品をアップロードするには vimeo の方が綺麗みたいですね。

それでは。ばいばーい。
tmlib.jsのここがすごい!

Qiitaで初めての記事になります。simiraaaaと申します。
よろしくお願いします。
tmlib.jsを知らない人向けに紹介していきます。
#tmlib.jsとは
JavaScriptでゲームやWebアプリが簡単に作れるライブラリです。
http://phi-jp.github.io/tmlib.js/

# phina.jsについて　追記
tmlib.jsは現在phina.jsというライブラリに名前を変えて開発を進めております。
http://phinajs.com/

tmlib.jsを再設計し、さらに使いやすくなっていると思います。

#ここがすごい!

##phi_jpという神がサポートしてくれる！(敬称略)
[phi_jp](https://twitter.com/phi_jp)さんはtmlib.jsの作者です。
「こんなエラーが出てどうしたらいいかわからない」
「これはどうしたらできますか？」
など、質問すると真剣に答えてくれます。
※できるだけ自分で調べましょう。

##こんなすごいゲームが作れる!
[TM-Shooter](http://tmshooter.net/game)
![tmshooter](http://tmshooter.net/screenShots/53c3dd8c963ff4953f32e9cc.png)

[TM-Shooter スコア重視プレイ その1（7426億6900万1027)](http://www.nicovideo.jp/watch/sm22937833)
[TM-Shooter スコア重視プレイ その2（7426億6900万1027)](http://www.nicovideo.jp/watch/sm22950005)

このゲームは[daishi_hmr](https://twitter.com/daishi_hmr)というすごいお方が作ったものです。
ブラウザゲーで初めて真剣に攻略したかもしれません。
ほかにはこんなゲームを作ってます。
http://daishihmr.github.io/
どれも面白いので、ぜひプレイしてみてください。

##サンプルがいっぱいある！
[tmlib.js サンプル集](http://phi-jp.github.io/tmlib.js/example.html)
[tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編](http://tmlife.net/programming/javascript/tmlib-js-dotou-100-sample-graphics-html5-canvas.html)
解説もある！
[tmlib.js 100 サンプル!! 解説一覧](http://rakuyudo.com/tmlib-js-samplelist/)
ほかにも調べきれないぐらいサンプルがあります。
[jsdo.it](http://jsdo.it/)などで調べるとたくさん出てきます。
誰かが作ったゲームの公開されているソースなどを参考にすることもできます。

### 追記2015/07/16
[[tmlib.js] リファレンスのようなもの](http://qiita.com/simiraaaa/items/4f566e811d507c384666)というサンプル付きのリファレンスのようなものを書いてます。
よかったら参考にしてみてください。


##初心者でもすぐにゲームが作れる！
ゲーム作ったことないし、JavaScriptもほとんど触ったことない。
という自分でもゲームが作れるまで成長しました。
tmlib.jsがなかったら今の自分はないし、この記事も書いてないと思います。
tmlib.js感謝!
この動画を参考にして作りました。
[tmlib.jsでゲームを作ってみよう（１）](http://www.nicovideo.jp/watch/sm22063606)
[daishi_hmr](https://twitter.com/daishi_hmr)さんの動画です。勝手に師匠だとか恩師だとか思ってます。
まず動画のコードをほとんど丸写しで、動くようにしました。
そのあと、ちょっとずつ調べながら弾の種類を増やしたり、ボスを作ったり、
ボスに弾幕を撃たせたりと遊べるゲームにするまで改造していきました。
そして、出来たゲームがこれです。
[弾幕シューティング(仮)](http://9leap.net/games/4158)
![弾幕シューティング(仮)](http://9leap.net/screenshots//140x140/4158_140)
実はこの間、６面のボスを作り、難易度調整をして、とりあえず完成というところまで持って行きました。
なぜか、画像を使わない縛りをしています。

##9leap APIも使える!
[9leap](http://9leap.net/)というHTML5 JavaScriptで作ったゲームを投稿できるサイトで
ゲームのセーブデータを保存したりランキング情報を取得するAPIが使えるようになっています。
[弾幕シューティング(仮)](http://9leap.net/games/4158)にもセーブ機能があります。
実は自分でセーブ機能をつけようとして分からなかったので、[daishi_hmr](https://twitter.com/daishi_hmr)さんに相談したらtmlib.jsで簡単に9leapAPIが使えるようにしてくれました！本当にありがたい！

##3Dゲームも作れる!
Three.jsと組み合わせて使うと簡単にできるみたいです!
作ったことがないので、うまく紹介できません...
擬似3Dなら自分ではこんなの作りました。
[メテオクラッシャー](http://9leap.net/games/4246)
![メテオクラッシャー](http://9leap.net/screenshots//140x140/4246_140)

##runstantというすごいWebエディタがある!
[runstant](http://phi-jp.github.io/runstant/release/alpha/)
URLにソースコードを圧縮して保存する事で、サーバを使わずにコードを保存しています。
ここで書いたコードはツイッターなどのSNSで簡単にシェアすることができます。
Twitterで [#runstant](https://twitter.com/search?f=realtime&q=%23runstant&src=typd)　タグで検索するといろいろ出てきます。
#最後に
まだゲームを作ったことがなくてJavaScriptでゲームを作りたい
という人がいたら
tmlib.jsをぜひ使ってください。

なんか頭悪そうな記事になってしまってすみません。
nvmでnode.jsの環境をつくる。


# nvm とは
Node Version Manager
node.jsはバージョンによって動いたり動かなかったりが多い。
PaaSデプロイ時 package.json で指定するので実際の仮想サーバで動かすバージョンをさくっと用意したい。

# 使ってみる。

## インストール

リポジトリ(git://github.com/creationix/nvm.git)をクローン
ホームディレクトリの.nvm にコピってくる

```
[masato@mba] $ git clone git://github.com/creationix/nvm.git ~/.nvm
Cloning into '~/.nvm'...
remote: Counting objects: 2707, done.
remote: Total 2707 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (2707/2707), 514.38 KiB | 232.00 KiB/s, done.
Resolving deltas: 100% (1476/1476), done.
Checking connectivity... done.
```

----

* 2015/05/09 追記
githubを見ると下記コマンドを打てとのこと

```
git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
```

あと、gsedが無いと入って起こるのでhomebrewで入れておく

```
brew install gnu-sed
```
 
----

パスを通す

```
[masato@mba-18] $ source ~/.nvm/nvm.sh
[masato@mba-18] $ nvm --version
0.20.0
```

.zshrcにも書いておいて起動時から使えるようにしとく。

## node.js 入れる
### インストールできるバージョンを調べる

```
[masato@mba-18] $ nvm ls-remote
     v0.1.14
...
    v0.11.13
    v0.11.14
```

### インストールして利用可能にする。

バージョンは省略すると最新になる。
v0.10 なら 0.10の中の最新(0.10.33)

```
[masato@mba-18] $ nvm install v0.10
######################################################################## 100.0%
perl: VERSIONER_PERL_VERSION environment variable error (ignored)
Now using node v0.10.33
[masato@mba-18] $ nvm use v0.10
Now using node v0.10.33
[masato@mba-18] $
```

使えてるか確認。

```
[masato@mba-18] $ node -v
v0.10.33
```

おｋ

### 確認

インストールされているバージョンを確認

```
[masato@mba-18] $ nvm ls
->  v0.10.33
    v0.11.14
      system
stable -> 0.10 (-> v0.10.33) (default)
unstable -> 0.11 (-> v0.11.14) (default)
[masato@mba-18] $
```

デフォルトのバージョンを設定する。
起動時にバージョン指定しなくてよくなる。

```
[masato@mba-18] $ nvm alias default v0.10
default -> v0.10 (-> v0.10.33)
[masato@mba-18] $ nvm ls
->  v0.10.33
    v0.11.14
      system
default -> v0.10 (-> v0.10.33)
stable -> 0.10 (-> v0.10.33) (default)
unstable -> 0.11 (-> v0.11.14) (default)
[masato@mba-18] $
```
NVIとautoキーワードの相性の悪さ

さて、C++の深い話的なやつを書いてくつもりではあるのですが、さしあたり、「なんぞこれ...」 っていうの見つけたので書いておこうと思う。
解決策的なのとかがあれば誰かご教授ください。

#autoキーワード

autoキーワードはC++11から導入されたインスタンス化される実態を元に型を決めるっていうやつです。型をそんなに意識しなくて良くなるのですが、僕はなんか好きになれないでいたんですわ。便利といえば便利だけど。

```auto.cpp
#include <iostream>
using namespace std;
int main() {
    auto a = 10;
    cout << a <<endl; // -> 10
}
```

#NVIパターン

NVIっていうイディオムがあります。書き方はつまりは Template methodの書き方と同じです。 公開インターフェース(public)な関数はvirtualつけるんじゃないよ。っていう意味です。何がいいかと一言で言うと、**ダッグタイピングした際に継承先で挙動を変更させないで、基底クラスの公開インターフェースが使われるので、インターフェース部分の破壊が防がれる**ってことです。

```NVI.cpp
#include <iostream>
using namespace std;

class Base {
private:
    //中身は未実装。これはカスタマイズポイント
    void a() = 0;
    void b() = 0;
public:
    //単にa()とb()を実行する関数。これはオーバーライドさせるつもりではない
    void c() {
        a();
        b();
    }
};

class Derived : public Base {
private:
    void a() {
        cout << "a" << endl;
    }
    void b() {
        cout << "b" << endl;
    }
    void c() {
       cout << "test derived" << endl;
    }
};

int main() {
    Base* base = new Derived();
    base->c(); // -> a \n b
    
    auto base = new Derived();
    base->c(); // -> test derived
}
```

なんということか... いや、そりゃそうだろって思うけど。
つまりは何が言いたいかっていうと実態にしか目を当てないautoってやり方と、クラスの継承関係を強く意識してコードを書くNVIのやり方がすごいちぐはぐになって見えるのは僕だけでしょうか。

つまりは、C++11移行だぜ！って言ってダッグタイピングしているところを全部autoで書き直していくと、継承先で名前がぶつかっていた場合 予期せぬ壊れ方をしそうな気がします。Base型で Derivedをインスタンス化した場合とかをよく意識して書いていたのにこれからautoばっかつかう感じになると不幸な時代が来るかもしれません。唯一の解決策としては、オーバーライドするつもりなら、 overrideキーワードを付けろってことになりますね...

```override.cpp
#include <iostream>
using namespace std;

class Base {
private:
    //中身は未実装。これはカスタマイズポイント
    void a() = 0;
    void b() = 0;
public:
    //単にa()とb()を実行する関数。これはオーバーライドさせるつもりではない
    void c() {
        a();
        b();
    }
};

class Derived : public Base {
private:
    void a() {
        cout << "a" << endl;
    }
    void b() {
        cout << "b" << endl;
    }
    // Base::c()はvirtualじゃないのでコンパイルエラー!!!
    void c() override {
       cout << "test derived" << endl;
    }
};

int main() {
    Base* base = new Derived();
    base->c(); // -> a \n b
    
    auto base = new Derived();
    base->c(); // -> test derived
}
```

これでコンパイル時にバグをつぶせそうですが... overrideを強制する仕掛けはないんですかね。
Unity でキャラクタに Rigid Body を付けると転ぶ問題への対応

Unity で、シーンに 3D キャラクターモデル「Unity ちゃん」を配置し、キーボード操作で歩かせられるようにした。

次に、Unity ちゃんに衝突判定を付けてシーン上に配置したボールを蹴れるようにしてみようと考え、Unity ちゃんに Rigid Body のコンポーネントを付けてデバッグ再生したところ、キー操作で歩かせたとたんにキャラが回転して転んでしまった。

![001.png](https://qiita-image-store.s3.amazonaws.com/0/14284/2d3d18f5-4856-77aa-6c51-2bfb670a4eef.png)

Rigid Body にすると質量がついて重力の影響を受けるのだから当然といえば当然だが、じゃあ市販の３Dゲームのキャラが転ばない仕組みになっているのは何故だろう？

試行錯誤していると Rigid Body のプロパティに Constraints という項目があることに気づいた。
なるほどこれで特定方向への物理法則をカットできるのね。
ということで下図のようにチェックを入れた。

![002.jpg](https://qiita-image-store.s3.amazonaws.com/0/14284/30ab5297-b950-a3ee-9acf-e4b07c872fa1.jpeg)

めでたくボールが蹴れるようになりました。

![003.png](https://qiita-image-store.s3.amazonaws.com/0/14284/079bcb83-fdb3-5ab7-1836-6ff6085c2113.png)
MeCabで形態素分析してTwitter Cloudをつくってみる

PHP、JavaScriptでやってみます。
環境はMac。

# 使ったもの

* XAMPP

PHPのall in one開発環境

* MeCab

形態素分析ライブラリ

* php-mecab

PHPでMeCabを使うためのライブラリ

* jqcloud

タグクラウドをjavascriptでつくるためのライブラリ

* twitteroauth

twitterの認証ライブラリ

# 準備

参考にしたURL：

http://www.aoharu-b.com/cgi/sk/2013/09/vpsmecabphpcentos64php533542.html

※準備はこっちを見たほうが丁寧です。。。

## XAMPPをインストール
インストールは省略。
macの場合、デフォルトでPHPが入ってて、XAMPPのPHPと混ざってちょっと困る。
なんで、XAMPPのPHPを使うように、以下の設定をしておく。

1.自分のホームディレクトリの .bash_profile ファイルに以下を追記（ファイルがなければつくる）。

`export PATH="/Applications/XAMPP/bin/:$PATH"`

2.macのデフォルトのphpを退避

`
sudo mv /usr/bin/php /usr/bin/php_org`

3.ターミナルを再起動

`
which php`

=> /Applications/XAMPP/bin//php

4.apacheを再起動

## mecabのインストール

```
cd
wget https://mecab.googlecode.com/files/mecab-0.996.tar.gz
tar zxfv mecab-0.996.tar.gz cd mecab-0.996
./configure --enable-utf8-only
make
make install
```

## 辞書のインストール

```
wget http://sourceforge.net/projects/mecab/files/mecab-ipadic/2.7.0-20070801/mecab-ipadic-2.7.0-20070801.tar.gz
tar zxvf mecab-ipadic-2.7.0-20070801.tar.gz
cd mecab-ipadic-2.7.0-20070801
./configure --with-mecab-config=/usr/local/bin/mecab-config --prefix=/usr/local/ --with-charset=utf8
make
make install
```

## autoconfのインストール（php-mecabのインストールに必要）

```
cd
wget http://ftp.gnu.org/gnu/autoconf/autoconf-latest.tar.gz
tar xfvz autoconf-latest.tar.gz
cd autoconf-2.69
./configure
make
make install
```

# php-mecabのインストール

```
cd
wget https://github.com/downloads/rsky/php-mecab/php-mecab-0.5.0.tgz
tar xzvf php-mecab-0.5.0.tgz
cd php-mecab-0.5.0
phpize
./configure --with-php-config= 
/Applications/XAMPP/bin/php-config --with-mecab=/usr/local/bin/mecab-config
make
sudo make install
```

## 設定ファイルの修正

`vim /Applications/XAMPP/etc/php.ini`

以下を追記

`
extension=mecab.so`

## twitter apiのアカウント作成

以下にアクセスしてログインする。

https://apps.twitter.com/

[Create New App]する。
API KEYSタブで次の作業をする。
[Cange App Permissions]
[Create my access token]

で、以下をメモ。
API key
API secret
Access token
Access token secret

# プログラム

以下をXAMPPのhtdocs配下に置く。

https://github.com/itagakishintaro/twitter-cloud

TwitterAPIHandler.phpを開いて、apps.twitter.comでメモした部分をコピペ。
XAMPPマネージャからApacheを起動。
ブラウザから以下を開く。

http://localhost/twitter-cloud/index.html

おしまい。
jQuery Ripples をいじってみました

この記事は、WebGL Advent Calender の7日目の記事です。

初めまして。gyoh_k です。
ハイレベルなWebGL アドベントカレンダー内でいきなり敷居を下げてしまい申し訳ないのですが、この記事はGLSLシェーダ初心者が、 jQuery プラグインを改造してシェーダを表示してみた、という内容を書きます。

## jQuery Ripples とは

指定したDOM要素に対して、マウスに反応する波紋エフェクトを追加できるjQuery プラグインです。
http://sirxemic.github.io/jquery.ripples/

波紋のエフェクトがかなり自然で美しいです。
最初に見たとき、「HTMLでこんな事ができるのか！」とかなりびっくりすると同時にマネしてみたくなりました。

## 仕組み
jQuery.ripples は以下のような記述で呼び出します。

```js
$('body').ripples({
    resolution: 512,
    dropRadius: 20,
    perturbance: 0.04,
});
```

このプラグインが呼び出されると、まず対象となるDOM要素(この場合はbody)の一番下のレイヤーにCanvas要素を追加します。
次に、cssで指定されているbody の背景画像を取得して、WebGLにテクスチャとして渡します。
その後、WebGL のシェーダで画像にエフェクトをかけ、結果をCanvasに出力する仕組みになっています。

## シェーダのカスタマイズ

うーむ、仕組みはわかったしマネはしたいがシェーダが書けない... ということで、とりあえず GLSL Sandbox のデモを拝借して表示してみることにしました。
http://glslsandbox.com/e#21631.1

jquery.ripples のソースコードはそこそこ量がありますが、とりあえず、renderProgram() に書かれているフラグメントシェーダを差し替えれば動作はしそうです。
https://github.com/sirxemic/jquery.ripples/blob/d98aa0fc8c69666708ce068a119fafbebe398074/js/jquery.ripples.js#L439-L469



そして、ほぼ丸一日試行錯誤した結果、なんとか表示できました。
(ほとんどの時間は、GLSL Sandbox では初めから用意されている uniform 定数を、どうやって独自に定義したらよいか悩むのに費やされました)
http://gyohk.github.io/jquery.ripples/

原理的には、他のWebGL用シェーダも動作するはずなので色々と試してみたのですが、なぜか表示できないものが多く、WebGL APIに対する知識の足りなさを痛感しました。

## まとめ

シェーダエフェクトが「いかにも」な作りこまれた3DのWebサイトだけでなく、一見普通のHTMLサイトにも紛れ込ませることができるのは、個人的には意外でした。
フォールバックをつけておけば非対応のブラウザでも問題なさそうなので、思っていたよりも身近に使える技術なのかもしれません。
jQueryのあれ、D3.jsでどうやるの？(または、その逆)

最近、D3.jsを使ってみたら、jQueryでできることがD3.jsでもできる。
混ざってると変なので、D3.jsを使うときは基本D3.jsで書きたいなぁということでメモ。

総合すると、D3.jsでビジュアライズするための操作はD3.jsがよくって、そうじゃない普通のDOM操作はjQueryがよいという当たり前の感じですね。

# APIドキュメント

当然、全部はメモしないので、困ったときはちゃんとAPIドキュメントをみる。

## jQuery

http://semooh.jp/jquery/

## D3.js

https://github.com/mbostock/d3/wiki/API-Reference

# DOMの要素選択

基本同じなんだけど、D3.jsは次のような書き方ができる。
これは、要素の追加・削除をたくさんするD3.jsでは重宝する。

```js
d3.select("tbody").selectAll("tr").attr("foo", "bar").selectAll("td")
```

やりたいこと | jQuery | D3.js
----- | ----- | -----
単一要素選択 | `$("#id01")` | `d3.selectAll("#id01")`
複数要素のはじめだけ選択 | `$("div")[0]` | `d3.select("div")`
DOM階層で指定 | `$("tbody tr td")` | `d3.selectAll("tbody tr td")`

# DOMの属性制御

class属性の追加・削除はD3.jsの方がハンドルしやすそう。
D3.jsの`SELECTION.property('value', 'val')`はvalueだけじゃなく、チェックボックスのcheckedなんかも使える。

やりたいこと | jQuery | D3.js
----- | ----- | -----
属性追加 | `SELECTION.attr("key", "val")` | `SELECTION.attr("key", "val")`
まとめて属性追加 | `SELECTION.attr({"key1":"val1", "key2":"val2"})` | `SELECTION.attr({"key1":"val1", "key2":"val2"})`
属性削除 | `SELECTION.removeAttr("key")` | ないっぽい
class属性追加 | `SELECTION.addClass('foo bar hoge')` | `SELECTION.classed({'foo': true, 'bar': true, 'hoge':true})`
class属性削除 | `SELECTION.removeClass('foo bar')` | `SELECTION.classed('foo bar' ,false)`
テキスト追加 | `SELECTION.text('text')` | `SELECTION.text('text')`
テキスト取得 | `SELECTION.text()` | `SELECTION.text()`
value追加 | `SELECTION.val('val')` | `SELECTION.property('value', 'val')`

# DOMの選択系操作

jQueryのnextとかparentとかDOMの選択系操作は、D3.jsにはほとんどないっぽい。

# DOMの制御・更新系操作

やりたいこと | jQuery | D3.js
----- | ----- | -----
タグの追加(後) | `SELECTION.append("<div1></div1>")` | `SELECTION.append("div1")`
タグの追加(前) | `SELECTION.prepend("<div2></div2>")` | `SELECTION.insert("div2", "div1")`

# CSS操作

やりたいこと | jQuery | D3.js
----- | ----- | -----
style追加 | `SELECTION.css({'color': 'red', 'font-size': 'large'})` | `SELECTION.style({'color': 'red', 'font-size': 'large'})`

# Web API(JSON形式)

## jQuery

```
$.ajax({
    url: "ajax.html",
}).done(function(data){
    console.log(data);
}).fail(function(error){
    console.log(error);
});
```

## D3.js

```
d3.json("ajax.html", function(error, data){ 
    if (error != null) {
      console.log(err);
      return;
    }
    console.log(data);
});
```

# CSV

## jQuery

```
$.get("data.csv", function(data){
    var csv = $.csv()(data);
    console.log(csv);
})
```

## D3.js

```
d3.csv("data.csv", function(error, data){ 
    if (error != null) {
      console.log(err);
      return;
    }
    console.log(data);
});
```
クラウドサービスを使っちゃいけない！？なんすか？そのセキュリティ対策！

間違ったセキュリティ対策が日本のIT進化を遅らせる

http://blog.flavacube.com/2014/12/%E9%96%93%E9%81%95%E3%81%A3%E3%81%9F%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E5%AF%BE%E7%AD%96%E3%81%8C%E6%97%A5%E6%9C%AC%E3%81%AEit%E9%80%B2%E5%8C%96%E3%82%92%E9%81%85%E3%82%89%E3%81%9B/
Edison と FadeCandy で NeoPixel LED をチカチカさせる


EdisonとFadeCandyをUSB接続して、LEDテープライトチカチカやってみます。

gitが使える想定です。セットアップはこちら
http://qiita.com/nenjiru/items/efa78b6685a4f62d3f7e

![intro.JPG](https://qiita-image-store.s3.amazonaws.com/0/20773/8464e56d-4c16-2ce7-3d0b-9a30a703d8fb.jpeg "intro.jpg")


使うもの
---------------

__Edison__
Breakout Boardを使います。

* http://www.intel.co.jp/content/www/jp/ja/do-it-yourself/edison.html
* https://www.switch-science.com/catalog/1957/

__NeoPixel__
5050SMDのLEDテープライトです。チップを内蔵したLED（WS2812）で、個別に制御できるのが特徴です。

* https://www.adafruit.com/product/1138
* https://www.switch-science.com/catalog/1916/


__FadeCandy__
NeoPixelをUSB経由で制御できるデバイスです。Windows、Linux、Mac OS、Raspberry Pi などに対応しています。Edison用のバイナリはありませんが、Galileo用のものでも問題なく動いているので、今回はこれを使用します。

* https://www.adafruit.com/product/1689
* https://www.switch-science.com/catalog/1710/

__その他__

* USBホストケーブル（microB <-> miniB）
* 7〜15VのDC電源


ハードウェアをセットアップ
---------------

__接続イメージ__
https://github.com/scanlime/fadecandy#simple-example

### FadeCandyとEdisonを接続する
FadeCandyとEdison（J16ポート） をUSBホストケーブルで接続。
USBホストケーブルは microB（オス）<-> miniB（オス）を使用します。

![FadeCandy-Edison.jpg](https://qiita-image-store.s3.amazonaws.com/0/20773/bc9aa653-1d5d-e58d-c1bb-c93419fc4288.jpeg "FadeCandy-Edison.jpg")


### NeoPixelとLEDを接続する
NeoPixelはピンソケットをつけると便利。（ということに最近気付いた）
FadeCandyの上段のピンに、NeoPixelの __DI__ を、下段のピンに __GND__ をつなぎます。
ブレッドボードで実装していきます。

![NeoPixel-LED.jpg](https://qiita-image-store.s3.amazonaws.com/0/20773/fae2ef42-1ef9-754e-0732-1af2989cce29.jpeg "NeoPixel-LED.jpg")

__電源__
J16ポートを使ってしまったので、J2か、J21で給電する必要あります。
J21に、7VのDCをつないで起動させます。

![Edison-DC.jpg](https://qiita-image-store.s3.amazonaws.com/0/20773/6e9af5ca-1e9e-b7b9-73a7-3e78b62917fa.jpeg "Edison-DC.jpg")


SSH接続か、J3にUSBつないで、Edisonにログインして、ソフトウェアのセットアップに続きます。

ソフトウェアをセットアップ
---------------

必要環境を揃えます。

```sh:Edison
$ git clone https://github.com/scanlime/fadecandy.git
```

といっても、fadecandyだけですが。
コントロールサーバーを起動します。

```sh:Edison
$ ./fadecandy/bin/fcserver-galileo
```

以下のように表示されれば、成功です。

```
[xxxxxxxxxx:xxxx] NOTICE: Server listening on 127.0.0.1:7890
USB device Fadecandy (Serial# XXXXXXXXXXXXXXXX, Version 1.07) attached.
```

サンプルを実行してみましょう。
別プロセスでEdisonに接続して、下記を実行。

```sh:Edison
$ node ./fadecandy/examples/node/strip_redblue.js
```

以上です。

![LED.jpg](https://qiita-image-store.s3.amazonaws.com/0/20773/04f3c950-fcb7-a2bf-9795-618eb0796a5c.jpeg "LED.jpg")
SoftLayerで時間課金サーバーか月額課金サーバーか見分ける方法

このエントリは[2枚目 SoftLayer Advent Calendar 2014](http://qiita.com/advent-calendar/2014/softlayer2)の8日目のエントリです。

* * *

皆様、SoftLayerを利用している時に、このサーバーは月額課金か時間課金サーバーか判断つかない事はないでしょうか。ここでは管理ポータルから簡単に確認する方法を紹介します。

## サーバーの詳細から確認する場合
管理ポータルより、[Device] - [Device List]で、確認したいサーバーをクリックすると、時間課金サーバーの場合、Current Totalで、料金と(updated hourly)と表示されています。
![hourly.png](https://qiita-image-store.s3.amazonaws.com/0/42406/82a61f85-1c59-6199-029b-7b7a9aa37a23.png)

月額課金サーバーの場合、料金が表示されていません。
![monthly.png](https://qiita-image-store.s3.amazonaws.com/0/42406/91bdfe48-f3f2-8782-3541-3adc204eb1b8.png)

## Invoice（請求書）から確認する場合
[Account] - [Billing] - [Invoices]から、該当のInvoice（請求書）をクリックすると、時間課金サーバーの場合、Bandwidthが、"0 GB"となっています。
![hourly-invoice.png](https://qiita-image-store.s3.amazonaws.com/0/42406/c673e867-c05c-57f0-3c40-3a21b7f58817.png)

月額課金サーバーの場合、仮想サーバーであれば、パブリックネットワークへのアウトバンド通信料の無料枠"5000 GB"を、物理サーバーであれば、無料枠"20000 GB"を確認できます。
![monthly-invoice.png](https://qiita-image-store.s3.amazonaws.com/0/42406/044ce2d7-e3b0-d36d-0199-4de779a55321.png)

* * *
ご意見等あれば、[Facebook](http://facebook.com/kkitase) | [Twitter](http://twitter.com/kkitase) までお願いします。