OmniAICreator/Qiita-1.07M huggingface dataset:
LiveEditの現状

こんにちは、らこです。今回はWebStormのLiveEditについてです。動くようで動かないようで実はちゃんと動くLiveEditのおさらいと最新の情報をまとめます。

# LiveEditとは
LiveEditを理解するにはこの動画を見れば完璧です。

https://www.youtube.com/watch?v=wCVwdvufTds

WebStorm 5の時の動画ですが今も出来ることは殆ど変わりません。
公式のブログ(日本語)も見るとよいです

http://blog.jetbrains.com/jp/2013/09/12/170

# 大事なこと
## Chromeでしか使えない
ChromeでしかLiveEditできないというよりは、JetBrainsのブラウザデバッグ用拡張がChromeにしかないからです。一時期はFirefoxにもあったんですが無くなりました。

## ブラウザに再描画させるトリガーはHTMLファイルの変化のみ
これが結構ハマるポイントです。HTMLから読み込まれている外部のCSSやJavaScriptなどを変更してもリアルタイムには反映されません。CSSの編集後、HTMLファイルを少しでも編集するとCSSの変更がブラウザ側で反映されます。

CSSの変更もすぐに反映させたい場合は、LiveEditの更新を一定時間おきの自動更新に変更するといいです。デフォルトではManualモードになってますので、Autoモードにします。

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/578c9bd3-e258-43fb-1550-92e56dd4e3bd.png)

注意としては、設定された時間ごとに差分チェックして変更があった部分を再描画しますので、マシンにかかる負荷は上がります。

# 最近のLiveEdit
## Node.jsでも使えるようになった
Node.jsのサーバーアプリでもLiveEditでのホットスワップが可能になりました。

http://blog.jetbrains.com/phpstorm/2014/10/live-edit-for-node-js-in-phpstorm-8/ (PhpStormの記事ですが)

こちらは更新にRefreshアクションが必要です。Debugウィンドウにある更新ボタンを押すか、Ctrl+F10でRefreshを叩けます。

## 近々アップデートがあるらしい
上でも書いたLiveEditの更新の設定ですが、近いうちにファイルタイプごとに設定できるようになるみたいです。CSSはAuto、HTMLはManualなど、適切な割り振りができるようになりそうです。

# まとめ
せっかくあるのでLive Edit使わないともったいないです。YouTrackにはまだまだLiveEditのバグや問題がありますので、みなさんも上手く動かないぞ？と思ったらどしどし投げて一緒に改善していきましょう。
Windows7でホームページビルダー10のウェブアートデザイナーでスポイトを使うと画面が真っ黒になるのを解消したい



IBMホームページビルダー19がリリースされている昨今、2005年にリリースされたホームページビルダー10は現役というのもどうかと思うが、手元にこのディスクしかないのでしかたがない。


1. 「コントロールパネル」 → 「プログラム」
2. 「以前のヴァージョンのWindows用に作成されたプログラムの実行」
3. 「プログラムの互換性」をクリック
4. 「ウェブアートデザイナー」を選択する
5. 「問題のトラブルシューティング」をクリック
6. 「プログラムが開くが正しく表示されない」だけチェックを入れて次へ
7. 「ウィンドウズの透明感が正しく表示されない」にチェックを進んでいく


これでスポイトが正常に使えるようになる。これだけで10年前のアプリが使えるWindowsすごい…。
cygwinにRVMを入れてRuby1.9.3をインストールしてみた

だって、rbenvがスクリプトエラーで動かなかったんですorz
頑張ったのでメモ。

##cygwinインストーラの配置
RVMのインストーラは必要であれば、cygwinインストーラを起動してシステムの更新をしてくれます。なのでcygwinをセットアップしたインストーラをPATHで定義しているパスの直下に置いて起動できるように準備しておきます。

##gnugpとcurlのインストール
cygwinのインストーラを起動して、上記の２つのツールをインストールします。
既にある場合にはそのまま続行します。

##鍵の生成
gpg --gen-key で鍵と証明書ファイルを生成します。
既にやっている場合にはそのまま続行します。

##証明書の確認
環境変数 SSL_CERT_FILE が存在する場合、その環境変数が指すファイルを証明書として使用するので、存在するpemファイルになっていることを確認します。

##RVMとruby1.9.3のインストール
gpg --keyserver hkp://keys.gnupg.net --recv-keys D39DC0E3
curl -sSL https://get.rvm.io | bash -s stable --ruby=1.9.3

**ソースを取得してコンパイルするため、時間がかかりますが、終了までゆっくりと待ちます。**
*途中cygwinのセットアップが起動したら、そのまま「次へ」をクリックしていくと、勝手に更新されていきます。そのまま完了するまで待ちます。ですが、RVMはこのセットアップ終了を待たないので、更新が長くなるようなら、セットアップ完了後に再度curlコマンドを再発行します。*

これで、欲しかったruby1.9.3がインストールされました。
MacでAndroidエミュレーターを横向きに回転する。

エミュレーターを横画面にするには「Ctrl + F11」で回転できますが、Macでは「control+ F11」を押しても回転できないかもしれません。
その時は、システム環境設定 > キーボード > F1、F2などのすべてのキーを標準の...。にチェックを入れる。

![Shimokita.php](http://f.cl.ly/items/3T1j3p0h1d15351K1H2d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202014-12-20%201.01.06.png)



後はエミュレーターを起動し「control + F11」を押すと、横向きに回転します。
DartのCI環境について

こんにちは、らこです。DartのプロジェクトをCI(Continuous Integration)したい時の環境について比較とかします。

# Travis CI

## 利点

- GitHubとの連携が強い(Pull Requestの内容を自動でテストしてもしマージした時ビルド落ちないかどうかとか教えてくれる)

## 欠点

- Dartサポートしてない

## 方法

ちょっと古い記事ですがファイル中のバージョン番号等以外は基本的にこのままです。

[SETTING UP TRAVIS CI FOR YOUR DART PROJECT](http://victorsavkin.com/post/86720599206/setting-up-travis-ci-for-your-dart-project)

おおまかな流れとしては

1. node.jsでCI建てる
2. ビルドのたびにDartSDK引っ張って環境を作る
3. Dartのテスト実行

です。手間はありますが最初だけですので一度テンプレ作ってしまえばそんなに苦でもありません。ただDartSDK落としてきてインストールするところでちょっと遅くなるんでCIの実行時間が気になる方はやめたほうがいいかもしれません

# drone.io

## 利点

- Dart公式サポートされてる

## 欠点

- 特に無い？

## 方法
私はこっちを推してますし、使ってます。ちょうどよく今日新しくDartのライブラリ公開したのでそのCIの手順を紹介します。

1. GitHubに上げる
こんなんです。　https://github.com/laco0416/objective_regex

2. drone.ioからリポジトリを選択する
サインインして、「New Project」からGitHubを選択するとリポジトリ一覧が出てくるので選びます。
![image](https://qiita-image-store.s3.amazonaws.com/0/20253/b2ebcefe-fcfe-1c0e-41ad-66cc0c7a7d77.png)

3.Dartを選ぶ
プロジェクトの種類をDartにします。
![image](https://qiita-image-store.s3.amazonaws.com/0/20253/56d6942b-eb2d-28a4-2990-99defec81323.png)

4.ビルドスクリプトを書く
CIで実行するビルドスクリプトを書きます。デフォルトでは「test/run.sh」を実行するようになってますが今回のプロジェクトにはそれは入れてないので、プロジェクトにあわせて書きました。
![image](https://qiita-image-store.s3.amazonaws.com/0/20253/833ade27-8c1e-6912-7734-40677efe4fe9.png)

5. 完成
完成したら「Build Now」でさっそくビルドしてみましょう。ちゃんと通れば鮮やかなグリーンが拝めます。
![image](https://qiita-image-store.s3.amazonaws.com/0/20253/6c473788-d63d-0a5a-4196-ac5ca1cb7097.png)

6. バッヂを貼ろう
せっかくCIしてるならプロジェクトが健全ですよというアピールのためにREADMEにバッヂを貼りましょう。
![image](https://qiita-image-store.s3.amazonaws.com/0/20253/6dc4e1bd-5c52-d3ef-6713-0bc6b05e6cf0.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/18e1c0fc-b105-ab53-bef9-7013bf999663.png)

# まとめ
drone.ioがオススメです。近いうちにpub.dartlang.orgにアップロードされたパッケージはすべて自動的にdrone.ioでCIされるようになるらしいですがまだ動いてないです。詳細は [pub.drone.io](pub.drone.io) を参照してください
素人がJavaScriptについて知った口をきけるようになるために2014年に読んだ書籍


ほぼプログラミング素人からのスタートなのでJavaScriptを知ってる人にはつまらないかも。
Amazonのリンクは完全にNoアフィリエイトで私には一銭も入らないので安心してお買い上げください。

## プログラミング素人編
### [Head First JavaScript ―頭とからだで覚えるJavaScriptの基本](http://www.amazon.co.jp//dp/4873113733/)
途中まで読んで放置していたので再読。とりあえず自分が書いたものがブラウザ上で動く感動を知るところから始めるには、この本と[ドットインストールのJS関連の動画](http://dotinstall.com/search?q=javascript&f=topbar)が役に立った。

## 入門編
### [JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで](http://www.amazon.co.jp//dp/4774144665/)
これを読めば、わけがわからないまま呪文のようにコードを書くところから脱却できる。周囲の詳しい方々もこの本をJavaScriptの入門書のオススメに挙げる人が多い気がする。

### [Web制作の現場で使うjQueryデザイン入門](http://www.amazon.co.jp/dp/4048913913/)
このあたりでちょっと自分でWebサイト的なものを作ってみようと考えるころだと思う。そこでjQueryなる便利なものの存在を知ることになると思うけど、そこでおすすめなのがこの本。今でもど忘れしたメソッドとかはこの本で調べる。

## ちゃんと読み書きする
### [JavaScriptパターン ―優れたアプリケーションのための作法](http://www.amazon.co.jp//dp/4873114888/)
おすすめしてもらって読み始めた頃、少し勉強した割にはネット上の他人のコードは読んでもよく分からない・・・という時期だったけど、読み終わったら結構視界が晴れた。

### [パーフェクトJavaScript](http://www.amazon.co.jp/dp/477414813X/)
自分では頑張ってるつもりだけどネットで調べれば調べるほど知らないことばかり出てきて辛い・・・それは多分体系的な知識が足りないから。そう思ってたときに読んだこの本はとても良かった。広義のHTML5的な文脈で語られることが多いいくつかのAPIについても結構書かれているので、雑な枠組みでHTML5の話を振られたときにも対応できるようになる。

## 周辺も学ぶ
### [モダンWeb ―新しいWebプラットフォームの基盤技術](http://www.amazon.co.jp/dp/4873116929/)
`<!DOCTYPE html>`って書けばHTML5なんじゃないの？程度の認識のときには、W3Cの仕様書を読むのが良いのだとは思うけど、HTML5のリビングスタンダード読んで、DOM4読んで、・・・というのは辛いので今時の情報をざっくり知るにはこの本が良いと思う。

### [サードパーティJavaScript](http://www.amazon.co.jp/dp/4048916580/)
別にウィジェットとか配布する予定無いし、と思うかもしれないが、iframe周りの制限とかJavaScriptのセキュリティとか、普通にJavaScriptを書く上でも割と必須な知識が得られるのでオススメ。

## 折角だからJavaScriptでいろいろ書きたい
### [コアjQuery＋プラグイン/jQuery UI 開発実践技法](http://www.amazon.co.jp/dp/4798124281)
半身浴中にjQueryプラグインを探すのが日々の楽しみになってくるこのころ、自分でもjQueryプラグイン書けるんじゃないかという気がしてくると思うのでこの本を読もう。

### [実践Node.js プログラミング](http://www.amazon.co.jp/dp/479812947X/)
これだけ勉強したのに、普段自分が使っているようなWebサービスが一向に作れそうな気配がない!それはサーバ側の処理を全く考えていなかったから。Node.jsでサーバサイドもJavaScriptで書ける。Node.js関連書籍は結構読んだけど日本語ではこれが一番わかりやすかった。

### [入門Backbone.js](http://www.amazon.co.jp/dp/479813712X)
Node.jsで雑なサーバも立てて、いざ！というこの時期、jQueryのイベント地獄に苦しむことになる。色んなフレームワークが乱立しているけど、ネットで調べれば情報はいくらでもあるけど、情弱のワイは書籍で学びたいんや！そして私はBackbone.jsの知識が必要になりそうな状況だったのでいくつかBackbone関連書籍を読んで、その中でこれが一番読んでて楽しかった。しかしJavaScriptのMVなんとかフレームワークは本当にいろいろあるし、状況がめまぐるしく変わるから日々情報を得ないとダメなんだろうな。

## 雑感
最初に読んだときに理解できなくても、しばらく寝かした後もう一度読んだときにすらすら読めると、勉強して良かったという気持ちになるので頑張ろうと思う。あと、情弱だからAltJS関連はまだ全く勉強してません。
vexp2pd

AVX-512ER(Exponential and Reciprocal) はその名前のとおり、exp用の命令もあります。

28bit 逆数(vrcp28pd) や KNＣ にあった、23bit exp2(vexp223ps) は、その命令のニーモニックに、精度を示す数値が入っており、自分が近似値しか求めないことを主張する謙虚な姿勢を見せていましたが、AVX-512ER の、23bit exp2は、

vexp2pd

という謙虚さを感じさせないニーモニックになっています。


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

double in[8] = {2.2,3.3,4.4,5.5, 6.6,7.7,8.8,9.9};
double out[8];

int
main()
{
    __m512d v = _mm512_loadu_pd(in);
    __m512d r = _mm512_exp2a23_pd(v);
    _mm512_storeu_pd(out, r);

    for (int i=0; i<8; i++) {
        printf("%f\n", out[i]);
    }
}
```

```
4.594793
9.849155
21.112125
45.254833
97.005859
207.936615
445.721893
955.425781
```

KNCのexp223は固定小数をとっていましたが(何故?)、これは倍精度値を入れればよいです。


他に、AV512-ERには、28bit逆数平方根(vrsqrt28pd)もあります。


KNCにあった、log2 はリストラされたようです。さようなら…


明日は、@tanakmura が vplzcntd について書きます。
AngularJSのpendingRequestsで二重のサブミットを防止する

# pendingRequests
AngularJSの`$http`には`pendingRequests`というfunctionがあり、これを利用すると既に送ったHTTPリクエストでまだ結果が返ってきてないリクエストを知ることができるようです。

https://code.angularjs.org/1.2.28/docs/api/ng/service/$http #pendingRequests

主にデバッグの目的で使用されると書いてあるのですが、これと`Interceptor`を組み合わせることでPOSTやPUT,DELETEに対する二重サブミットを防止したいと思います。

と、思ったのですが、既に以下のブログで紹介されておりました。
http://ussy00.hatenablog.com/entry/2014/05/28/192819

ただ、上記のブログでは`$http`でリクエスト送信を行った場合が紹介されていますので、
本稿では`$resource`でリクエスト送信を行った場合を紹介します。

Interceptorの基本的な利用方法は以下を参照してください。
[AngularJSのInterceptorを利用する](http://qiita.com/uggds/items/b89be96f1e297f6dbab4)

Interceptorを作成します。

```js:Interceptor
angular.module('myapp.configurations', ['myapp.controllers'])
.config(function($httpProvider) {
  $httpProvider.interceptors.push(
    function($injector, $rootScope, $q) {        
      return {                                                                    
        request : function(config) {                                              
          var $http = $injector.get('$http');                                     
          var requestToken = config.headers['X-Request-Token'];
                                                                  
          function checkIfDuplicated(config) {                                    
            var duplicated = $http.pendingRequests.filter(                        
              function(pendingConfig) {                                           
                return pendingConfig.headers['X-Request-Token']                   
                    && pendingConfig.headers['X-Request-Token'] === requestToken; 
              }
            );
            return duplicated.length > 0;
          }

          if (requestToken && checkIfDuplicated(config))  {
            return $q.defer().promise;
          }

          return config || $q.when(config);
        }
      };
    }
  );
});                                                                             
```
次に、HTTPリクエストを送る`$resource`を以下のようにします。

```js:
$resource(url, {}, { 
  saveWithCheck: {method:'POST',  headers:{'X-Request-Token':'hogehoge'}}
});
````
# 解説

Interceptorでリクエストconfigのheader情報からリクエストを特定するトークンを取り出します。
これを利用し、pendingRequestsの配列要素一つ一つに対して付き合わせることで二重サブミットを回避する仕組みです。
headerにトークン情報を設定しているのはさらにサーバーサイドでのトークンチェックを行いたいからですが、ここでは省略します。

リクエスト送信元からInterceptorまでのパラメータのやり取りは、正直どんなやり方でも良いのですが、
`$resource`は`$http`と違ってconfigの属性を増やしたりすることができません。

そこで、`$resource`の**actions**を利用してheaderにパラメータを設定することにしています。
(see https://docs.angularjs.org/api/ngResource/service/$resource #Usage)

これにより、
二重サブミットを防止したいリクエストの場合は、`saveWithCheck`を呼び出し、
そうでないリクエストの場合は、`$resouce`デフォルトの`save`を呼び出すことで使い分けることができるようになりました。

# 注意

余談ですが、`$resource`の**actions**に設定できるparamsに注意してください。
当たり前かもしれませんが、paramsにパラメータを設定すると、POSTリクエストなのにそれらのパラメータがURLの後ろにクエリストリングとなって送信されてしまいます。
当初リクエスト送信元からInterceptorまでのパラメータのやり取りをparamsに入れていたのですが、送信したURLをみるとそうなっていたので焦りました。
OpenCVその5円描画


Opencv
http://docs.opencv.org/trunk/doc/tutorials/introduction/linux_gcc_cmake/linux_gcc_cmake.html

cmake
http://www.wakayama-u.ac.jp/~chen/cmake/cmakecv.html

参考：http://opencv.jp/cookbook/opencv_drawing.html
少々、追加、変更しています。
名前空間cv使用宣言
ウィンドウサイズ
円の中心座標、線の色

そのままですが前提.
gcc,OpenCV,CMakeインストール済み。

ステップ
1.MyCircle.cpp
2.CMake file CMakeLists.txt
3.cmake make
4.Run

Using OpenCV with gcc and CMake
Note We assume that you have successfully installed OpenCV in your workstation.
The easiest way of using OpenCV in your code is to use CMake. A few advantages (taken from the Wiki):
No need to change anything when porting between Linux and Windows
Can easily be combined with other tools by CMake( i.e. Qt, ITK and VTK )
If you are not familiar with CMake, checkout the tutorial on its website.
Steps

Create a program using OpenCV
Let’s use a simple program such as DisplayImage.cpp shown below.

```cpp:MyCircle.cpp
//MyCircle.cpp
#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>

using namespace cv;

int
main(int argc, char *argv[])
{
  Mat img = Mat::zeros(600, 900, CV_8UC3);

  // Green
  // 画像，円の中心座標，半径，色，線太さ，種類
  circle(img, Point(500, 200), 200, Scalar(0,200,0), 3, 4);
  // White
  circle(img, Point(300, 250), 120, Scalar(200,200,200), 1, 8);
  // Blue
  circle(img, Point(300, 400), 80, Scalar(100,0,0), -1, CV_AA);

  namedWindow("MyCircle", CV_WINDOW_AUTOSIZE|CV_WINDOW_FREERATIO);
  imshow("MyCircle", img);
  waitKey(0);
}
//
```

Create a CMake file
Now you have to create your CMakeLists.txt file. It should look like this:

```CMakeLists.txt
cmake_minimum_required (VERSION 2.6)

project( MyCircle )
find_package( OpenCV REQUIRED )
add_executable( MyCircle MyCircle.cpp ) 
target_link_libraries( MyCircle ${OpenCV_LIBS} )
```

Generate the executable
This part is easy, just proceed as with any other project using CMake:

```
cd <MyCircle_directory>
cmake .
make
```
Run
./MyCircle

Result
![kobito.1419002700.551510.png](https://qiita-image-store.s3.amazonaws.com/0/33317/f72beab6-a111-ddc4-0f82-c10e869de572.png "kobito.1419002700.551510.png")
DockerHubのAutomated Buildなレポジトリのタグ付けは手動のみ？

gemにちゃんとバージョン番号をつけるように、Dockerのイメージにもちゃんとバージョン番号をつけといたほうがよい。

…んだけど、DockerHubでAutomated Buildが有効なレポジトリを作ると、こいつはdocker pushコマンドを受け付けないread onlyなレポジトリになる。dockerコマンドでタグ付けしてやってpush、ということが出来ないので、じゃあどうするかというと、Web UIのEdit Build DetailからGithubでリリースタグを付けるたびに手動でそのタグを指定してビルドを追加してやる必要があるのだ。

Stack Overflowにも全く同じ質問が。

- http://stackoverflow.com/questions/26092031/how-to-add-tags-to-docker-images-made-using-autobuild

やはり解決してない。超めんどくさくね？他に何か方法あるんだろうか。
Smalltalk初めての人に

#### はじめに

初めてSmalltalkに触れようと思ったとき、何か得体の知れない印象を受けるかも知れません。
それはC言語やJAVAやC#やシェルスクリプトがまだ自分に取って新しいプログラム言語で、それに挑戦する時とは何かが少し違うぞ、という感想かもしれません。
どことなく、とらえどころのない違和感。そう感じるのはたぶん正しいと思います。
というのも、Smalltalkはこれまで馴染んできたプログラム作成のお作法とはちょっと異なる手順を踏むことになるからです。
新規のものは何かしら不安をかき立てる要素となりやすい。少なくとも自分の場合はそうでした。想定と違うことに気付いた瞬間は、特にそんな傾向があります。
私の経験では、初めてSmalltalkに触れてみようと思ったのに、実際に動かすことができるようになるまで数年間かかってしまいました。今になって振り返ってみると、Smalltalkの違和感が不安に繋がって、怖くなってしまったからです。
せっかくのSmalltalk体験が、違和感から不安に繋がり、結局なかなか手が出ない、という私のようなことにならないような、初めてSmalltalkに触れるときのちょっとしたポイントを書いてみたいと思います。
皆さんが一歩を踏み出す参考になれば幸いです。

####意外と頑丈です
Smalltalkの達人の話には、よくシステムの根本的な動作を変えてしまうようなアクロバティックな話題がよく出てきます。
システムそのものがシンプルである事、柔軟性、拡張性などが端的に表れる、そんな例かも知れません。ところが、迷える子羊にはビビるのに十分な破壊力です。
下手に触って環境を壊してしまうのではないか……。
そんな心配が浮かんでくるかも知れませんが、大丈夫です。
意外とSmalltalk環境は堅牢なので、初心者がおっかなびっくりいじっている程度では壊れません。
安心していろいろ試してみて下さい。
もしかしたら、環境を破壊できるようになったらシステムのディープなところまで手を出せるようになった、超初心者卒業、ぐらいに思っていると良いのかも知れません。

#### 楽しい仮想マシン
はじめてSmalltalkに触れたときに一番とまどう可能性があるのは、お気に入りのエディタ、コマンドラインインタフェースと言ったお馴染みの開発環境が使えないことかもしれません。（実際には好きにカスタマイズできるので自由度というところでは非常に高いのですが）慣れない環境にまずおどおどしてしまう可能性があります。
ソースコードを書いて、保存して、コンパイルという手順が通用しなかったり、そのあたりも戸惑う原因になる可能性があります。
でも、まずは全く新しいOSを仮想化環境で試しているぐらいのつもりで触れていると良いかも知れません。
実際、Smalltalkはかなり仮想化仮想化環境で動いているOSと見ても大丈夫な要素や歴史的な経緯やらある様ですが、そのあたりは追々調べていくと楽しめるかと思います。
仮想化環境ですので、イメージさえとってはおけば何かあったときも前の状態にすぐ戻すことができます。心配しないでどんどん触って楽しみましょう。

#### 実用性はあるのか？
本当に使えるのかな？、という印象を持つかも知れません。結論から言いますと、かなり使えます。
自分の場合、簡単なテキスト処理などで結構使っています。

……と、もっと書きたいのですが、そろそろ公開時間が迫ってきたのでまずはここまで。
随時追記していきたいと思います。
Trelloでchecklistに大量データを登録したい時 #trello

# Trello | checklist に大量データを登録したい時 #trello
## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
<i class="fa fa-trello" style="font-size:1em;"></i>  Trello で checklist に大量データを登録する方法について

## <i class="fa fa-male" style="font-size:1em;"></i> 地味に登録する場合
* Add Item の入力欄に1件ずつ入力します

![single.png](https://qiita-image-store.s3.amazonaws.com/0/43480/c5851595-7c97-83fa-3e7a-b891e108cc02.png)

## <i class="fa fa-car" style="font-size:1em;"></i> 一気に登録する場合
以下を登録データリストとします

* Todo い
* Todo ろ
* Todo は
* Todo に
* Todo ほ
* Todo へ
* Todo と

### 対象データを一気にペーストします

![bulk1.png](https://qiita-image-store.s3.amazonaws.com/0/43480/671892e6-d360-5b2d-6560-7e47246ab639.png)

### Enter を押下します

![trello_checklist.gif](https://qiita-image-store.s3.amazonaws.com/0/43480/33e616ab-d9a2-822d-3a39-fa90c3994266.gif)


## 参照
* <i class="fa fa-trello" style="font-size:1em;"></i> [trello](https://trello.com/)
esa.io の通知を Slack で表示するため、 Webhooks の設定を行う #esa_io #slack

# :baby_chick: esa.io の通知を <i class="fa fa-slack" style="font-size:1em;"></i> Slack で表示するため、 Webhooks の設定を行う
## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
:baby_chick: esa.io の通知を <i class="fa fa-slack" style="font-size:1em;"></i> Slack で表示するため、 Webhooks の設定を行います
## <i class="fa fa-files-o" style="font-size:1em;"></i> 手順
### <i class="fa fa-tint" style="font-size:1em;"></i> <i class="fa fa-slack" style="font-size:1em;"></i> Slack の Configure Integrations から Incoming WebHooks を登録する
* Post to Channel に任意のチャネルを設定
* Webhook URL をクリップボードにコピーしておく

### <i class="fa fa-tint" style="font-size:1em;"></i> :baby_chick: esa.io の TEAM / WebHooks / Slack から WebHooks URL を設定する
* クリップボードにコピーしておいた URL を設定する

### <i class="fa fa-tint" style="font-size:1em;"></i> <i class="fa fa-slack" style="font-size:1em;"></i> Slack で疎通確認
* Slack に Webhook 疎通のメッセージが表示されました

![slack_esa1.png](https://qiita-image-store.s3.amazonaws.com/0/43480/a770d03b-5a80-2b9a-a752-601019926955.png)

### <i class="fa fa-tint" style="font-size:1em;"></i> 試しに :baby_chick: esa.io で記事を作成してみる

* 記事作成中
![slack_esa2.png](https://qiita-image-store.s3.amazonaws.com/0/43480/449e6c47-b707-b10e-420e-80d3ab0470af.png)

* 記事作成完了( Ship It 後 )
![slack_esa3.png](https://qiita-image-store.s3.amazonaws.com/0/43480/bce02fa9-052e-65e7-1ce8-023a596b3374.png)

### <i class="fa fa-tint" style="font-size:1em;"></i> <i class="fa fa-slack" style="font-size:1em;"></i> Slack にリンク付きで通知されました
* アイコンやユーザー名は esa.io で登録しているものが表示されるため、誰が投稿したか分かりやすいです
![slack_esa4.png](https://qiita-image-store.s3.amazonaws.com/0/43480/0042ed4f-cfce-d091-8731-d075ef4a380f.png)

* リンク付きで投稿されているので、クリックすると :baby_chick: esa.io の該当記事にジャンプできます

### <i class="fa fa-tint" style="font-size:1em;"></i> :baby_chick: esa.io で WIP の記事を作成してみる
* Slack 連携されないことを確認（通知されないので気軽に記事を作成できる）

## <i class="fa fa-mortar-board" style="font-size:1em;"></i> Wrap up
以上で、 :baby_chick: esa.io の通知を <i class="fa fa-slack" style="font-size:1em;"></i> Slack に送ることができました。
これで、 作成された記事は <i class="fa fa-slack" style="font-size:1em;"></i> Slack でチーム全体の目に触れ、 共有しやすくなりました。

## <i class="fa fa-arrow-right" style="font-size:1em;"></i> 参照
* :baby_chick: [esa.io | Usage | WebHooks](https://docs.esa.io/posts/10#0-1-0)
scpコマンドでディレクトリ（フォルダ）をコピーしました

サーバーにあるファイルをコピーするためにscpコマンドを使用しました。

ちなみにscpは **ssh + cp** の意味らしいです。

# scpでディレクトリをコピー
`-r`とオプションをつけるとディレクトリをコピーすることができます。

```bash:サーバーからディレクトリをコピーする書き方
scp -r pugiemonn@example.com:/home/pugiemonn/hoge
 ~/Desktop/
```
example.comのhogeディレクトリをローカルのデスクトップに持ってきました。

ローカルのディレクトリをサーバーにコピーする場合です。

```bash:ディレクトリをサーバーへコピーする書き方
scp -r ~/Desktop/piyo pugiemonn@example.com:/home/pugiemonn/
```
piyoディレクトリをサーバーへコピーしています。

# ディレクトリやファイルの権限に注意
上記の例では、pugiemonnユーザーのサーバー側の権限がある場所やファイルしかコピーできません。もしファイルのコピーが失敗したら権限を確認するといいです。
for文を使って九九表を表示


こんにちは、[@Solpha](https://twitter.com/solpha)です。

参考書をひと通り読み終えた（内容を理解しているかは別ですが）ので、「プログラミング　初心者　練習問題」と検索して出てきた問題なんかを解いて練習しています。

その中で`for`を使う問題があったので、今回は`for`文に焦点を当てて九九表を作るプログラムを書いてみました。

#概要
##内容

- 各値の後に`|(パイプ)`を挟む
- 格段ごとに改行する
- 体裁を整えるため、1桁の数字は前に`半角スペース`を入れて2桁数字に合わせる

##for文
```
for 初期化文; 条件; 後処理 {
	// 条件がTrueの間、ここの処理が行われ続ける。
}
```
##for文の活用例

###1.Goにはwhile文がないので、for文で表現する
```go:sample
	i := 0
	for i < 100 {
		fmt.Println(i)
		i++
	}
```

###2. 無限ループ
```go:sample
	i := 0
	for { //forの条件を指定しない。
		fmt.Println(i)
	}
```
実行するとPCに負荷が掛かるのでご注意を。

###3.他言語同様、breakやcontinueも使用可能
```go:sample
	for i := 1; i < 10; i++ {
		for j := 1; j < 10; j++ {
			if i*j > 25 {
				// breakしたときのiとjの値を表示
				fmt.Printf("i=%d, j=%d Break!\n", i, j)
				break
			} else {
				continue
			}
		}
	}
```

#プログラム
##コード
```go:99.go
package main

import "fmt"

func main() {
	for i := 1; i <= 9; i++ {
		for n := 1; n <= 9; n++ {
			// 2桁の数字と体裁を合わせるため、1桁の数字は半角スペースを挿入
			if i*n < 10 {
				fmt.Printf(" %d|", i*n)
			} else {
				fmt.Printf("%d|", i*n)
			}
		}
		// 各段の終わりで改行
		fmt.Println()
	}
}
```

##コード（改）
[heliac2000](http://qiita.com/heliac2000)さんから表示方法についてコメントをいただいたので、コードを改良してみました。

```go:99v2.go
package main

import (
	"fmt"
)

func main() {
	for i := 1; i <= 9; i++ {
		for n := 1; n <= 9; n++ {
			// ”%2d”とすることで一桁の数字の場合は数字の前に半角スペースが入る。
			fmt.Printf("%2d|", i*n)
		}
		// 各段の終わりで改行
		fmt.Println()
	}
}
```
改良前と比べてコードが簡素化されて分かりやすい！！

いやー、勉強になることが多くて楽しいですね。
コメントで「もっとこうしたらいいよ」的なことを教えていただけるこの環境はステキです。

##実行結果
```
$ go run 99.go

 1| 2| 3| 4| 5| 6| 7| 8| 9|
 2| 4| 6| 8|10|12|14|16|18|
 3| 6| 9|12|15|18|21|24|27|
 4| 8|12|16|20|24|28|32|36|
 5|10|15|20|25|30|35|40|45|
 6|12|18|24|30|36|42|48|54|
 7|14|21|28|35|42|49|56|63|
 8|16|24|32|40|48|56|64|72|
 9|18|27|36|45|54|63|72|81|
 ```
  
#所感
 
- 掛け算の方法（`for`文に`for`文をネスト）するところまではすぐに思いつきましたが、1桁の数字の場合に数字の前に`半角スペース`を挿入する方法に悩みました。（2014/12/20更新：コメントで、更に簡単にできる方法を教えていただきました）
- 問題に対して深く考えすぎたせいで、最初は`else if`などを多用してとても見苦しいコードに・・・簡潔に考えるクセを身につけたいものです。
Docker in Docker

# Docker in Docker

本記事では Docker の中で Docker を使う技を紹介します。

## Docker in Docker とは？

Docker コンテナの中で Docker コンテナを動かす技術です。
Docker の中で Docker を動かすには特権モード (privileged) を使います。
特権モードは Docker の機能のオプションの1つとしてデフォルトで存在します。

## 何がうれしいの？

Docker コンテナを管理するサーバ(以下、Docker管理サーバ)を Docker で動かしたい場合に使うと非常に便利です。
通常の使い方としては Docker 管理サーバをホストにインストールして・・・、という運用になります。
しかし、管理サーバ自体のインストール自体も Docker でやりたいなー、と Docker 使いとしては思うわけです。

Docker in Docker の例として [Dokku Alternative (dokku-alt)](https://github.com/dokku-alt/dokku-alt) という Heroku のようなホスティング機能を Docker で実現できるサーバを Docker の上に構築する方法を紹介します。  

### dokku-alt って何？

dokku-alt はローカル環境に Heroku 的なホスティングサーバを構築できる OSS です。
dokku-alt のメリットは Dockerfile を書く必要がないことです！
通常、 Docker 環境を構築するためには Dockerfile に設定を書きますが、
dokku-alt では Procfile というアプリの実行設定を書きます。
Procfile の代わりに(通常の) Dockerfile を使うこともできます。
git push するだけでアプリケーションを配備できます。  

### dokku-alt の構築

以下の手順で dokku-alt をインストールします。
ホストには既に Docker がインストールされているものとします。

1. dokku-alt のインストール

        $ sudo docker run --volume=/home/dokku --volume=/var/lib/docker --name=dokku-alt-data busybox:latest

2. dokku-alt の実行

        $ sudo docker run -d --name=dokku-alt --hostname=my-domain.com --volumes-from=dokku-alt-data --publish=10022:22 --publish=80:80 --publish=443:443 --privileged ayufan/dokku-alt:latest

3. ssh 情報の取得

        $ sudo docker logs dokku-alt

        dokku.1 | SSH Login:  
        dokku.1 |   user: root  
        dokku.1 |   password: XXXXXXX
        dokku.1 |   ip: 10.0.xx.xx 172.17.xx.xx  
        dokku.1 | Starting dokku daemon...

4. 初期設定

        $ ssh -p 10022 root@172.17.xx.xx "curl -L https://github.com/(YOUR_NAME).keys | while read f; do echo $f | dokku access:add; done"

5. アプリのデプロイ

        $ git clone https://github.com/heroku/node-js-sample.git
        $ cd node-js-sample
        $ git remote add dokku dokku@172.17.xx.xx:node-js-sample
        $ ssh -p 10022 root@172.17.xx.xx "dokku domains:set dokku.172.17.xx.xx.xip.io"
        $ git push dokku master

6. 動作確認

        $ curl -v http://node-js-sample.dokku.172.17.xx.xx.xip.io

## まとめ

* まだ Dockerfile を手で書いてるの？
* dokku-alt 楽しい！

## 参考文献

* [Docker in Docker](https://github.com/jpetazzo/dind)
* [Dokku Alternative](https://github.com/dokku-alt/dokku-alt)

## 宣伝

会社のエンジニアブログでも Docker の記事を書いてます。

* [Geisha Tokyo Engineer's Blog](http://blob.geishatokyo.com/archives/2014/09/29/yamauchi.html)
re-builder + foreign-regexp.elでたのしい正規表現


![](http://yo.eki.do/hitowashinu/wp-content/uploads/2014/12/regex-fig-02.gif)

初投稿です．
平たく言うと，Emacs使いなんだしre-builder使いたいけどEmacsの正規表現はつらいのでPerl互換の正規表現を使おう，という話です．
つづきは http://yo.eki.do/notes/foreign-regexp-el から．
.git/config をゆるく書き換えられてみる

git関連でこんなニュースがでていました
http://article.gmane.org/gmane.linux.kernel/1853266
https://github.com/blog/1938-vulnerability-announced-update-your-git-clients

.git/config が書き換えられる脆弱性とのこと。


ということで、実際に書き換えられる雰囲気を感じてみました。(あくまで雰囲気です)

### 手順
+ テスト用のリポジトリを作る
    + `git init` 
+ 大文字、小文字を区別するファイルシステムを使っているOS上(ubuntuとか)で `.Git`フォルダを作り、その中に下記のような`config'ファイルを作る

```
[user]
    name = changed
    email = changed@
```

+ commit して 適当な リポジトリにpush する(github等には脆弱性対策のため、問題がありそうなリポジトリはpushできないかもしれないので、自分で管理している場所にpushする) 
+ 大文字小文字を区別しないファイルシステムを使っているOS上(windowsとか)で、そのリポジトリを clone する
+ なんかエラーがでるので言われたとおりのコマンドを実行する

```
Cloning into '.'...
done.
error: Untracked working tree file '.Git/config' would be overwritten by merge.
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry the checkout with 'git checkout -f HEAD'
```

+ `git checkout -f HEAD`
+  .git/config の中身が `.Git/config` で書き換えられた ＼(^o^)／

### まとめ
+ 言われたとおりにコマンドを実行したら書き換えられた・・・
+ 実際に予想される攻撃方法では clone した段階でスクリプトを実行させることができるので、git のアップデートをしよう
msgpack-rpc-dで泣いた話

## D言語は言語仕様は良いけどライブラリがダメ

いろんな人(偏ってる可能性大)がそんなこと言ってますね。バイトで初めてD言語を触ったときもそんな風に思ってました。
複数ノードでの並列処理に使えるはずのstd.concurrencyも、現状では複数ノードに対応していなかったりといろいろ悲しい思いをします。
~~じゃあてめーが書けよって言うのはなしで~~

そんなことがあるので、複数ノードでの並列処理のための通信にはシンプルで使いやすいMessagePack-RPCを使いたいっていう発想が出てくるかと思います(他のもあるけど)。

## そこで登場するmsgpack-rpc-d

最初はDUBのパッケージとして無かったのですが、@repeatedlyさんに連絡したら[入れてもらえました](http://code.dlang.org/packages/msgpack-rpc)。感謝。
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/nvsofts">@nvsofts</a> 俺以外に使いたい人がいたとは…！後でやりまする</p>&mdash; Mr. Fiber (@repeatedly) <a href="https://twitter.com/repeatedly/status/507407280715726848">September 4, 2014</a></blockquote>

msgpack-rpc-dはvibe.dを非同期I/Oライブラリとして使っていますが、DUBにパッケージとして入れてもらえたのでそんなことは気にせずに簡単に使えます。
お手持ちのdub.jsonに

```json:dub.json
{
  "dependencies": {
    "msgpack-rpc": ">=0.1.1"
  }
}
```

と書くだけで使えるようになります。

## msgpack-rpc-dの使い方

これ見ないでREADME.mdを見てもらったほうが早いかもしれません。

単純に接続してRPCするだけなら簡単です。
以下のコードは、127.0.0.1のポート12345に対してRPCを行うような例です。

```d:client.d
import msgpack;
import msgpackrpc.client;

void main(string[] args)
{
  auto client = new TCPClient(Endpoint(12345, "127.0.0.1"));

  // 戻り値があるRPC(同期)
  client.call!(int)("foo", 42);

  // 戻り値がないRPC
  client.notify("bar", 42);
}
```

サーバでは、RPCをクラスのメンバ関数に対する呼び出しとして扱えます。

```d:server.d
import msgpack;
import msgpackrpc.server;

class Server
{
  int foo(int arg)
  {
    return arg * 2;
  }
}

void main(string[] args)
{
  auto server = new TCPServer!(Server)(new Server);

  server.listen(Endpoint(12345, "127.0.0.1"));
  server.start();
}
```

## ところが

現在(2014/12/19)のmsgpack-rpc-dでは、一度に4096バイト以上のデータを受信するとブロックしてしまうという不具合があります。
これは自分が[GitHub上のissue](https://github.com/msgpack-rpc/msgpack-rpc-d/issues/1)に投稿して調査してもらっていますが、どうやらvibe.dの問題のようです。

## 良いライブラリなのに…

簡単かつ綺麗にMessagePack-RPCを使える良いライブラリなのですが、依存ライブラリの影響を食らってて悲しいです。
~~まぁそんな話を某氏に書いてよって言われたわけです(:3[＿＿]~~
[Android] Button Corner Radius

If you want to make some button with corner radius like this:

![Screen Shot 2014-12-19 at 23.09.47.png](https://qiita-image-store.s3.amazonaws.com/0/51455/e08ded3e-1994-5427-425d-bb41940c51a7.png)


1.Create a drawable xml file.

```xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF5E3A"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
</selector>
```

2.Set this drawable as your button's background.

```xml
<Button
    android:text="CLICK"
    android:background="@drawable/orange_corner_radius_bg"
    android:textColor="#ffffff"
    android:layout_width="match_parent"
    android:layout_height="40dp" />
```
vrcp28pd

除算と言えば遅い命令のひとつですが、逆数(1/x) を求めるのはそんなに遅くないです。(y/x) の精度いらない時とかは、y * (1/x)にすると、除算よりも大分高速に近似値が求められます。


何故逆数は遅くないのか…は、よく知らないですが、変数一個になるのでテーブル引きできる + ニュートン法で求められるとかが効くのではないですかね…


SSE, AVXにも逆数命令はあって、スループットで1〜2サイクルあたり、4個、8個の 12bit 逆数が求められます。


逆数をニュートン法で求めるときは、1回反復するごとに、bit数が倍になるらしいので、12bitの逆数は、1回反復すると、24bitで、単精度分になります。


倍精度だと、ちょっと判断が難しくて、2回反復で48bit、 3回反復で96bitなので、精度捨てるか、時間捨てるかを迫られてる気がしますね。


AVX-512 では、逆数を28bit求める、vrcp28pd という命令が増えました。これなら倍精度でも1回反復するだけで52bit+オマケで4bit得られます。もう迷わなくてよいです。でもなんで26でなくて28bit…？丸め分も考慮してるの？よく知らないので詳しい人に聞いてください。


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

double in[8] = {2,3,4,5, 6,7,8,9};
double out[8];

int
main()
{
    __m512d v = _mm512_loadu_pd(in);
    __m512d r = _mm512_rcp28_pd(v);
    _mm512_storeu_pd(out, r);

    for (int i=0; i<8; i++) {
        printf("%f\n", out[i]);
    }
}
```

```
 $ gcc -O2 a.c -mavx512er
 $ sde -knl -- ./a.out
0.500000
0.333333
0.250000
0.200000
0.166667
0.142857
0.125000
0.111111
```

AVX-512ER 拡張が必要です。Skylake, Cannonlake では動かず、KNLでは動きます。



また、SSE,AVX の12bit逆数は、倍精度版が無くて、倍精度で使う場合は単精度値から変換する必要があったのですが、AVX-512 では、14bit逆数を倍精度並びにしてくれる vrcp14pd が増えたので親切さが増してる感じがあります。さらに、14bitなら2回反復で52bit越えますね。vrcp14pd, vrcp14ps は、Skylakeでも使えます。


明日は @tanakmura が vexp2pd について書きます。


![div](https://pbs.twimg.com/media/BJgtDQ_CEAE8JyG.png:large)
(ちなみにこれの答えはGoogle検索窓は電卓にも使える、でした)
DynamoDBをロックマネージャーとして使う


このポストは個人の意見/メモであり、私が所属する会社を代表するものではありません。

## DynamoDBのConditional Update

DynamoDBには **Conditional Update**という機能があり、これを利用することによりアトミックな更新オペレーションができる。

例えば下記のような感じだ。
- 特定のキーのアイテムがなければPut
- 特定のアイテムの特定のアトリビュートがある値であればUpdate

詳細が知りたい人は[DynamoDBのDeveloper Guide](http://docs.aws.amazon.com/amazondynamodb/latest/developerguide/WorkingWithItems.html)を。

## Conditional Updateでロック管理

この **「特定のキーのアイテムがなければPut」**を応用して、アイテムの有無を以下のように読み替えるとロック管理を実装することができる。

DynamoDBにAというキーでアイテムをPutしにいく。このときにキーAのアイテムが
- 存在する：既に他の誰かがロック済み。Putオペレーションは失敗する（させる）。
- 存在しない：誰もロックしていない。ロックのためのマーキングとしてキーAのアイテムをPutする。

Pythonとbotoで実装するならこんな感じ。

```python:lock_key
def lock_key(key):
  try:
    dynamodb.put_item(
      'TABLE_NAME',
      {'key' : { "S" : key }},
      expected = {
        'key' : { "Exists" : False }
      }
    )
    return True
  except Exception,e:
    return False
```

ファイル名をキーにしてテーブルにアイテムをPutしに行く。既存アイテムが存在せずにPutに成功したらTrueを返し、そうでなければFalseを返している。

## S3へのファイルアップロードの管理に応用する

この仕組を利用してS3へのファイルアップロードを管理するツールを書いてみた。
https://gist.github.com/imaifactory/6132f8a60461584b4613

一度アップロード済みのファイルが再度アップロードされる心配がないので、大量のファイルを並列でアップロードしたり、途中で処理が失敗したときにも何度でもやり直しをすることができる。実際、この仕組みを使って1日に約8,000〜10,000くらいのログファイルをS3に転送する、というのを3〜4ヶ月運用してたことがあるが、漏れも重複もゼロで運用できたよ。

awscliのs3 syncは便利だけど、プロダクションに利用するには漏れ/重複対策が心配、という人はこんな感じに実装してみるといいかも。

冪等！冪等！
管理画面あるある（と、その対処）


この投稿は[管理画面AdventCalendar](http://www.adventar.org/calendars/586)19日目の投稿です。
昨日の投稿は[ラクスルの管理画面のつくり方](http://tech.raksul.com/2014/12/18/administration-screen/)でした。

本日は「管理画面あるある」という形で管理画面開発における危険信号とその対処についてまとめてみたいと思います。
サービスの拡大と共に成長し消えていく管理画面、その中でいろんな事が起こりますよね。

#### __1. 管理画面の仕様、考えとくから（企画）__
危険フラグです。細かなこだわりと盛り盛りの仕様が上がってくる前兆です。
エンジニアも最初から管理画面の設計に加わりましょう。

#### __2. これも管理できたほうがいいよね？__
ないとだめですか？他で代用できないですか？「できたほうがいい」は基本いらないです。

#### __3. この管理画面、使いにくくね？__
エンジニアと企画とのコミュニケーションが問題でしょう。
思い切ってエンジニアがしばらく管理画面使って業務をする期間を用意してみては？翌月素晴らしい管理画面ができているかもしれません。

#### __4. 管理画面動かないんだけど！（IE8）__
社内用途ならChromeを使って下さい。逆になぜIEを！？

#### __5. 明日リリースなのに管理画面がない！__
最悪phpMyAdminでもいいです。GUIツールは用意しましょう。
Railsであれば30分もあれば[RailsAdmin](https://github.com/sferik/rails_admin)や[ActiveAdmin](https://github.com/activeadmin/activeadmin)を使って簡易管理画面が構築できます。

#### __6. ユーザ体験向上のためのCRMツールを開発したい！__
外部サービスの選択肢はないの？[Zendesk](https://www.zendesk.co.jp/)や[SalesForce](http://www.salesforce.com/jp/)便利です。

#### __7. とは言え外部ツールお金かかるし自社開発しない？__
本当にいい外部ツールはお金を払う価値あります。
エンジニアの工数はお金かからないですか？管理画面が動くサーバやその後のメンテナンスも考えられていますか？

#### __8. ねぇこのボタン、本当に押していいの？大丈夫？__
管理画面だからとはいえ細かな説明に手を抜かないでください。その先にいるユーザ（スタッフ）をイメージしましょう。

#### __9. あ！間違ってデータ更新しちゃった！__
データ更新には確認画面を用意してください。少なくともJavascriptのalertくらいは仕込みたいですね。
場合によってはGmailのように更新した後しばらくの期間なら差し戻せる機能にしておく方が生産性が高まってよいです。

#### __10. 管理画面ダサいんだよね__
最低bootstrapは入れましょう。単なるHTMLはテンション上がりません。
なんなら10~20ドルくらい払えば[綺麗なテンプレート](http://www.bootstrapstage.com/?s=admin)を手に入れる事が可能です。

#### __11. 管理画面のUIを改善しましょう__
改善するのは業務フローです。ユーザ体験です。
そのための改善ですか？

#### __12. 管理画面項目多すぎ__
サービス拡大と共に機能・項目の追加がたくさんあったのでしょう。
定期的に集中と選択が必要です。

#### __13. 見せれない画面あるしアルバイトには触らせられない__
権限管理して役職に応じて見せる所見せない所分けましょう。

#### __14. 管理画面の使い方マニュアル作ってくれない？__
その労力はわかりやすい管理画面設計に使いませんか？

#### __15. 今このフローに慣れてるから急に管理画面が変わると困る__
時にはトップダウンで変更する必要もありますね。
ただし中にはキーボードを使いこなし高速処理する管理画面職人もいますのでそういった方にケアした設計を心がけたいですね。

#### __16. データが重すぎて管理画面が動かない__
DBにしっかりインデックス貼って下さい。不要なデータは定期的にお掃除しましょう。ページネーションも適切ですか？

#### __17. 管理画面でいつの間にかバグ__
機能追加や仕様変更の際に管理画面がおざなりにされたんですね。
テスト書いて下さい。

#### __18. 管理画面の優先度が一向に上がらない__
KPIを共有したり、ユーザとのリレーションを作る管理画面がチームを支えています。管理画面の重要性をチーム内に浸透させましょう。
なんなら期間を区切って管理画面開発専門のメンバーをアサインするといいですね。

#### __19. 管理画面めっちゃ便利になったね！__
褒めてください。めちゃめちゃ褒めて下さい。普段ユーザから直接褒められる事のあまりないエンジニアがダイレクトに褒められる絶好のチャンスですよ！

#### __おわりに__

18にも書きましたが、サービスの拡大を支えるのは管理画面と言っても過言ではありません。現状で課題になっているのは何かを考え、やるべきことを取捨選択しながら管理画面とともにサービスをグロースさせていきたいですね。
世界のKotlinを巡る

本記事は[Kotlin Advent Calender2014](http://www.adventar.org/calendars/477)の12/19の記事です．
きのうは[@s_kozake](http://kozake.hatenablog.com/entry/2014/12/18/074438)さんでした．

突然だが，私は[Kotlin Advent Calender2012全部俺](https://atnd.org/events/34627)や，[Kotlin Document](http://kotlinlang.org/docs/reference/)や[「Kotlin ドキュメント」で検索したら一番上に出てくるアレ](http://syobochim.github.io/syobochimMEMO/kotlin/index.html)をヒッソリと読んでいた．

ふーむ，null安全とかかなり強い静的型付けとか色々特徴があるらしい．

そんな折に，私はちょっとした操作ミスを犯してしまった．
![kotlin.png](https://qiita-image-store.s3.amazonaws.com/0/62039/18968e24-c3de-2c40-beaa-7c055871dda5.png)


あっ……と思ったのも束の間．
この声はそのまま「おっ」に代わる．
ではみなさんにも，その「おっ」を体験して頂こう．

まずはこちらから．

![kotlin.png](https://qiita-image-store.s3.amazonaws.com/0/62039/c695b1b6-a8b3-7d5e-5df1-807e88ea14b7.png)

こちらはポーランドにある "Kotlin"
閑静で落ち着いている．こんなところでKotlinできたらさぞかし気持ちいいだろう．

続いてはこちら．

![kotlin.png](https://qiita-image-store.s3.amazonaws.com/0/62039/26e5f6a9-8172-a1b9-0f16-135acf889968.png)

ご存知，ロシアのKotlin島．Kotlinという言葉の元ネタはここからである．

最後にこちら．

![kotlin.png](https://qiita-image-store.s3.amazonaws.com/0/62039/04dc6162-42cc-59af-bffa-9448720e2f1e.png)

これはコロンビアのコトリン高原．きちんと集落があって生活がうかがえる．

というわけで，今回はコードではなく，変化球として地球観点でKotlinを色々見てみた．
（KotlinでGoogleMAPならぬKotlinMAPをいつか誰かが作ってくれる，うん）

世界を旅しながらKotlinコーディングも趣があるのではないだろうか．

おまけ．
日本でKotlinと言えば……[？？？](http://tabelog.com/tokyo/A1304/A130401/13130227/)


明日は[@_siosio_](https://twitter.com/_siosio_)さんです．お楽しみに！
個人的にMacでインストール必須なアプリケーション一覧

# この記事の目的
次にMacをセットアップするとき用のメモ

# アプリケーション一覧
## 日常的に必須なもの(インストールすべき順)
* [ShiftIt](http://veadardiary.blog29.fc2.com/blog-entry-2764.html): ショートカットでウインドウを綺麗に配置
* [HyperSwicher](http://www.macupdate.com/app/mac/41769/hyperswitch): Command+Tabでウインドウ切り替え
* Dropbox: ファイル共有
* [KeepassX](http://www.keepassx.org/downloads/): パスワード管理
* [Opera](http://www.opera.com/download/guide/?ver=12.16)(Presto版): ブラウザ(調べもの用)
* GoogleChrome: ブラウザ(コミュニケーション用)
* [MacVim](http://code.google.com/p/macvim-kaoriya/): テキスト編集
* TweetDeck: Twitterクライアント
* Google日本語入力: IME
* Kobito: メモ用

## 仕事関係で必要になるもの
* Slack
* Xcode
* eclipse
* Box Sync
* Skype
* Line

## ときどき利用するもの
* Zwoptex: スプライトシート作成
* Gyazo: スクリーンショット共有
* Tagr: mp3ファイルタグ編集
* FileZilla: SFTP
動画編集をAdobe Premiereを使わずにffmpegを使ってやってみたい ヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい

みなさん、こんにちはでス。ffmpeg関連でこんな

 - [ruby と OpenCV, ffmpeg を使用した画像/動画の認識とパフォーマンスについて ヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい](http://qiita.com/scleen_x_x/items/7137a58025fbefdbd18f)
 - [複数の動画を画面n分割で同期した動画をつくるのに ffmpeg, opencv, ruby でやってみた ヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい](http://qiita.com/scleen_x_x/items/ef5e49c8dd46c74df9b1)
 - [おさえておきたいffmpeg高速化のまとめ：CPU使用率100%、Load Averageがぁあぁぁぁというときに ヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい](http://qiita.com/scleen_x_x/items/d72fdfba30b64c938af4)
 - [YouTube の動画をコマンドラインからダウンロードできる youtube-dl をUbuntuに入れる](http://qiita.com/scleen_x_x/items/70e8b9be7858b063e0fc)

記事を書いているものです。 :smile: 動画の編集をよくやります。無料のツールだとAviUtilとかもありますが、Adobe の Premiere を使うことが多いです。

# この記事の概要

ちょっとした動画編集作業だとPremiere使うのが大げさで、ffmpegというコンソールから使えるツールを良く使っているのでそれを紹介します :rice_ball:

ffmpegはGUIは無くて、コマンドをポチポチ打って :doughnut: 実行させるCUIベースのツールです。コマンドを覚えないといけない点 :memo: は慣れるまで泣け :cry: ますが、何度も同じような作業をすることがあるならとても便利なのです :spades:

この記事では特に良く使う次のコマンドを紹介します

 - ビデオから画像を抜き出す：例）62秒のシーンをPNGにしたい時
 - ビデオのサイズを変更する：例）800x600のサイズに変更したい時
 - ビデオのトリミング：例）30秒目から20秒間を切り出した動画にしたい時

# コマンドの紹介

編集元のファイル名を input.mp4 、編集後のファイル名を output.mp4 としています。

## ビデオから画像を抜き出す

62秒のシーンをPNGにしたい時

```
ffmpeg -ss 62 -i input.mp4 -vframes 1 -r 1 -f image2 output.png
```

`-ss` で抜き出す秒数を指定してします。90秒目なら62を90に変更すればOK

## ビデオのサイズを変更する

800x600のサイズに変更したい時

```
ffmpeg -i input.mp4 -s 800x600 output.mp4
```

## ビデオのトリミング

30秒目から20秒間を切り出した動画にしたい時

```
ffmpeg -ss 30 -i input.mp4 -t 20 output.mp4
```

`-ss`で開始秒を指定、`-t`で長さを指定すればOK
voidを使って値を使わないことを示す

最近思いついた書き方。

```js
[0, 1, 2, 3, 4].forEach(function(i) {
    if (i % 2 === 0) {
        doSomething(i);
        return;
    }
    doX(i);
    doY(i);
    doZ(i);
});
```

こんなことがしたいとき、`doSomething(i);`と`return;`をまとめて以下のように書くことがある。

```js
[0, 1, 2, 3, 4].forEach(function(i) {
    if (i % 2 === 0)
        return doSomething(err);
    doX(i);
    doY(i);
    doZ(i);
});
```

`doSomething`が`undefined`を返す場合、コードの結果は全くおなじになるし、そもそも`Array#forEach`は渡された関数の返り値を無視するので、`doSomething`が`undefined`以外を返しても、やっぱり結果は同じ。

だけど、これが`Array#forEach`のようによく知られている関数じゃなかった場合、`doSomething`の返り値を使って何かしているんじゃないかと、読んでいる時に誤解するかも知れない。

```js
niceFunction(function(value) {
    if (value.isNotNice())
        return doSomething(); // 何か必要な値を返している?
    doX();
    doY();
    doZ();
});
```

こういう時に`void`を書き加えると、なにか必要な値を返しているわけではないことを示すことができる。

```js
niceFunction(function(value) {
    if (value.isNotNice())
        return void doSomething(); // doSomething()の返り値が必要なわけではないとわかる
    doX();
    doY();
    doZ();
});
```

以前から、返り値を使わない即時関数の先頭には`void`を書くようにしていたので、その応用。

```js
void function() {
    //
}();
```

なにか、こう書くべきでない理由とかあれば教えてもらえると助かります。
cocos2d-jsで、cc.EventHelperのhasEventListenerが機能していない


hasEventListenerメソッドで、イベントが貼られているか調べようとおもったら、
きちんと動いてない。とほほ。

`listeners`の参照方法が間違っていたみたい。

以下のように`listeners[type]`で、書きなしたら動いた。


```js

cc.EventHelper.prototype.hasEventListener = function ( type, listener, target ) {
    if ( this._listeners === undefined )
      return false;

    var listeners = this._listeners;
    if ( listeners[ type ] !== undefined ) {
      for(var i = 0, len = listeners[type].length; i < len ; i++){
        var selListener = listeners[type][i];
        if(selListener.callback == listener && selListener.eventTarget == target)
          return true;
      }
    }
    return false;
};

```

以上。
TravisCIでreleaseブランチにマージされたらPyPIに自動リリースさせる


Travisのドキュメント読んでたらDeploymentのProviderにPyPIがあって、読んだら簡単そうだったからやってみた。

travis-cliでPyPIの認証情報を暗号化したものを.travis.ymlに書いてTravisに渡すことができるので、Publicのレポジトリであっても自動リリースできる。

## 作戦

- GitHubでmasterからreleaseブランチにPR投げてマージする
- TravisはBuild成功時にブランチがreleaseであればPyPIにリリースする

masterは開発のもっとも進んだブランチでgit-flowとかでいうdevelopブランチ。

## うれしさ

マージをトリガーにした自動リリースの仕組みを整えると特定のブランチのマージ履歴がリリース履歴と同期するのでズボラなリリースフローを改善できてうれしい。

- めんどくさいからgitでタグとかつけてらんない。Webサービスとかだとそもそもリリース多いしタグとかかったるい
- リリースするときは思いついたように荒々しくmasterをデプロイ
- リリースのヘッドがmasterのどこを指してるのよくかわからない
- 問題発生した時は`シックスセンス`で問題が解消されるコミットに出会うまで戻しデプロイを繰り返す

## 実行

まずtravis-cliを導入する。

```
gem install travis
travis login
```

GitHubのユーザー名とパスワード、設定してる場合は2段階認証も聞いてくるので入力する。

以下の様な.travis.ymlがある状態で、


```
language: python
python:
  - '2.6'
  - '2.7'
  - '3.3'
  - '3.4'
install:
  - pip install -e . --use-mirrors
script:
  - python setup.py test
deploy:
  provider: pypi
  user: Keita
  on:
    repo: keitaoouchi/easyimap
    branch: release/pypi
    distributions: sdist --formats=gztar,zip
    python: 3.4
  allow_failure: false
notifications:
  slack:
    secure: mRFzPF4qQzRfHCS9rYEKpUI9w5wvyv4AO8AVuzvwU1rExKokdl6jcxsMEYlOvozqztfjY7YSN3hm/KV60UiPBtbuox54GrvkCu/qqfx6tFRc1aS+5JclGvOGrrRyzodCIDJEuayiZIrzUSMwcwRInd+N1atpJUKoa9AgyVn+e0o=
    on_success: change
    on_failure: change

```


```
travis encrypt --add deploy.password
```

を実行すると、travisがPyPIのパスワードを聞いてくるので教えてあげると、

```
deploy:
  provider: pypi
  user: Keita
  password:
    secure: hiKhwSky/Vj0P3d9PZZLY4zvCdpWhNOogyNhvktY11cPTtBP1mPitMr9MMeyDzhqjc1NzetQqseOvISak9yTTQ6UVL3E7si6n2gXro3NdLlE+8LlNDzV/kAsgmAj3vhzmr1YYf6bATwtxzIDkVcTVgb5WjYqRKxKADILPbY9OKk=
  on:
    repo: keitaoouchi/easyimap
    branch: release/pypi
    distributions: sdist --formats=gztar,zip
    python: 3.4
  allow_failure: false
```

といった感じに暗号化されたパスワードをぶち込んでくる。ちなみに`deploy:on:python: 3.4`を忘れると複数バージョンのビルドごとにdeployが走ってしまうので忘れない。

あとはGitHub上でmasterからreleaseへのPRを作ってマージしてやると、このマージビルド成功時にPyPIにデプロイされる。

リリース用のPRを作ってマージして、
https://github.com/keitaoouchi/easyimap/pull/19

ビルド成功時にPyPIへのアップロードが行われて、
https://travis-ci.org/keitaoouchi/easyimap/jobs/43922642

PyPIにリリースできた。
https://pypi.python.org/pypi/easyimap/0.6.0

## 感想

楽だしズボラにやさしい。
cocosStudio2.0.2で作成したアニメーションがcocos2d-js ver3.1で動かない問題



大いにはまった。
普通に動かない。

今回は、sceneの中に、node(csdファイルをインポート)を組み込んだ場合、
再生できない問題ではまりました。

cocosStudioのプロジェクト構成はこんな感じ。

```
scene.csd
chara.csd
```

で、scene.csdにchara.csdをnodeとして組み込んで、タイムラインでぐるぐる動かしている感じです。


基本、cocosStudio2.0.2で作成したcsbは以下のように再生します。

```js

var node = ccs.csLoader.createNode("scene.csb");
var action = ccs.actionTimelineCache.createAction("scene.csb");

node.runAction(action);
action.gotoFrameAndPlay(0, false);

```

`var node = ccs.csLoader.createNode(file);`で落ちる。

調べてみたら、`createNode`が、"scene.csb"の解析時に、
"chara.csb"も自動で解析してインスタンス化してくれている部分に問題があった。
しかも２つw

具体的には、`ccs.csLoader.nodeFromProtocolBuffers`関数の中の
以下の部分。

```js

 else if (classname == "ProjectNode")
    {
      var nodeOptions = nodetree["widgetOptions"];
      var options = nodetree["projectNodeOptions"];

      // 1個目。
      //var filePath = options.filename();
      var filePath = options.fileName;
      //cc.log("filePath = %s", filePath);
      if(filePath != "")
      {
        node = this.createNodeFromProtocolBuffers(this._protocolBuffersPath + filePath);
        this.setPropsForProjectNodeFromProtocolBuffers(node, options, nodeOptions);

　　　　　// 2個目。
        var action = ccs.ActionTimelineCache.createActionFromProtocolBuffers(this._protocolBuffersPath + filePath);
        if(action)
        {
          node.runAction(action);
          action.gotoFrameAndPlay(0);
        }
      }
```

##1個目

まず1個目から。

```
var filePath = options.filename();
```

optionsに、`filename()`なんてないじゃん！！！
ということで、

```js

 var filePath = options.fileName;

```

書き換えました。

##2個目

`ccs.ActionTimelineCache`なんてないじゃん！！
`ccs.actionTimelineCache`はあるけど。

なので、cocos2d-jsのフレームワークを読み込んだ時点で、

```
ccs.ActionTimelineCache = ccs.actionTimelineCache;
```

やって、注入してやることにしました。

##まとめ

ふう。アニメーション１つ再生するのも大変だ。

以上。
excoveralls で Elixir プロジェクトのカバレッジレポートを取る

## coveralls.io とは？

カバレッジレポートを登録しておける Web サービスです。
最初のころは Rails とかだけ対応だったと思うのですが(うろ覚え)、今は python, Node.js, Scala などなども簡単に使うことができるようです。とにかく便利です。GitHub の public repo なら無料！

## excoveralls

では、他の言語はどうなっているのか？というと、特定のフォーマットで json ファイルを送ると、それをもとにカバレッジレポートを登録できます。詳しくは[こちら](https://coveralls.zendesk.com/hc/en-us/articles/201774865-API-Introduction)。
この辺りの面倒なところを実装してくれているのが、excoveralls というわけです。

コマンドライン実行もできるし、coveralls と直接やり取りもできるし、travis 連携もできて便利。
coverex ってのもあるみたいだけど、ここでは取り上げないです。

### excoveralls の作者

[parroty](https://github.com/parroty) さんが作っています。Elixir のライブラリを多く作られていて、[extwitter](https://github.com/parroty/extwitter) などもこの方の作成したライブラリです。[extwitter](https://github.com/parroty/extwitter) の日本語情報は、[こちら](http://niku.name/articles/2014/12/02/Extwitter%E3%81%A7twitter%20streaming%E3%82%92%E7%9C%BA%E3%82%81%E3%81%A6%E3%81%82%E3%81%9D%E3%81%B6)の記事に詳しくありますね。

## excoveralls 何してるの？
基本的には、カバレッジ情報取得 -> フォーマット整える -> 出力(コンソール、coveralls.io へ POST)を実行します。

カバレッジ情報の取得には Erlang の cover というライブラリを使用しています(あまり詳しくない)。

カバレッジ部分を任せているところを考えると、フォーマットを整えているところ、サービスとの連携部分が excoveralls のメインなところですかね。コンソールに色付きで表示するための細かい部分、coveralls.io へ送信する json ファイルの生成などです。

ざっくりですが、こんなことをしています。

## coveralls.io に送信してみる

あとは excoveralls の README 見れば使うことはできると思うのですが、タイトル通り coveralls.io への送信方法について書きます。

### 下準備
プロジェクトに excoveralls の依存関係と設定を追加します。

```ex
def project do
  [ app: :ltsv,
...
    test_coverage: [tool: ExCoveralls]      # ここと
  ]
end

defp deps do
  [{:excoveralls, "~> 0.3", only: :dev}]    # ここ
end
```

後はいつも通り `mix deps.get && mix test` とかすると下回りの準備は完了です。

### coveralls.io のアカウント、TOKEN

[coveralls.io](https://coveralls.io/) でアカウントを作って、試したいリポジトリを追加してみてください。

TOKEN は coveralls.io の自分のリポジトリ画面にあります。見つけにくいですが、リポジトリのページ右下に REPO TOKEN という欄が確認できると思います。ちなみにリポジトリごとに TOKEN は別なので注意。

![coveralls..png](https://qiita-image-store.s3.amazonaws.com/0/17636/6a9c7998-2834-c54e-4114-e4c9bd4582f0.png)

### coveralls.io へ送信する

ここまでできたら準備完了しているので、`mix coveralls.post YOUR_REPO_TOKEN` を実行してください。
上手くいけば結果も coveralls.io 上で見れます。


## 余談

ちょっと前まで curl コマンドに送信部分が依存していたのですが、今は hackney 使うようになってます。README に TODO として書かれてたのを見つけて、pull request してみたらマージされたためです。

https://github.com/parroty/excoveralls/pull/12

でも今思うと、hackney じゃなくてもっとデフォルトのものに依存させた方がよいような気が。。。依存関係とか大丈夫かしら。。。


## Pro tip: バッジ

上の画像にもありますが、BADGE URLS にバッジの URL があるので、GitHub リポジトリ上でいい感じに表示できるのでオススメです。

[![Coverage Status](https://img.shields.io/coveralls/ma2gedev/ltsvex.svg)](https://coveralls.io/r/ma2gedev/ltsvex?branch=master)

## 最後に

簡単にですが excoveralls について紹介してみました。

Erlang の cover 使っているので、もしかしたら上手くいかないところあるのかなと思っているのですが、私の使っているレベルだとあまり気にしなくてもよさそうです。

明日は @k1complete さんです。

## Resources

- excoveralls
    - https://github.com/parroty/excoveralls
- cover
    - Erlang で作られたカバレッジ測定ツール
    - http://www.erlang.org/doc/man/cover.html
- coverex
    - excoveralls と似たようなことしてくれると思われる
    - https://github.com/alfert/coverex
- coveralls.io
    - http://coveralls.io/
- coveralls.io の API 周りの仕様
    - https://coveralls.zendesk.com/hc/en-us/articles/201774865-API-Introduction
cocosStudo2.0.2で組み込んだパーティクルが再生できない問題


cocosStudio2.0.2で組み込んだパーティクルがcocos2d-jsで再生できなかったので
はまりましたorz

基本、cocosStudio2.0.2で作成したcsbは以下のように再生します。

```js

var node = ccs.csLoader.createNode(file);
var action = ccs.actionTimelineCache.createAction(file);

node.runAction(action);
action.gotoFrameAndPlay(0, false);

```

で、`var node = ccs.csLoader.createNode(file);`の部分で落ちる。
調べてみたら、パーティクルクラス名がまちがっているっぽい。

`ccs.csLoader.createParticleFromProtocolBuffers`の

を以下のように書き換えたら動いた。

```js

    switch (resourceType)
    {
      case 0:
      {

        var path = this._protocolBuffersPath + fileNameData["path"];
        if (path != "")
        {
          // 書き換えた
          //node = new cc.ParticleSystemQuad(path);
          node = new cc.ParticleSystem(path);
        }
        break;
      }

      default:
        break;
    }
```

`cc.ParticleSystemQuad`を`cc.ParticleSystem`にした。


以上。
OSに目が回ったので、ポインターをｸﾞﾙｸﾞﾙをかわいく。

pcのｸﾞﾙｸﾞﾙあれ、なんとかなりませんか?とまって表示あるいは、止まったかわいいアイコンに動いてます。マスター。と吹き出しつければいいのに。
cocosStudio2.0.2で作成したアニメーションをcocos2d-js ver3.1で再生させる方法


アニメーション再生のために基本３つのファイルが必要。
2.0.2からjsonは吐かなくなったもよう。。

```js
xxxxx.csb
xxxxx.plist
xxxxx.png
```

##相対パス解決方法
仕事でやる場合、アニメーターチームから上がってきたファイル群を、
プロジェクトに追加する場合、作成環境とフォルダ構成が異なるため、
ただしくファイルを読むことができせん。(絶対パス参照になっているから)
そのため、以下の関数を実行しておく必要があります。

```js
ccs.csLoader.setRecordProtocolBuffersPath(true);
```


##再生方法
###インタンス作成方法
----------
cocos2.0からは、`ccs.csLoader.createNode`を使用します。
この関数は純粋にnodeを作成するだけなので、動きの情報は、
`ccs.actionTimelineCache.createAction`で **action** として作成する必要があります。

**この時点で、csbが使用するplistはプリロードしておく必要があります。
画像ファイル(png)は自動でプリロードしてくれます。**

```js

var node = ccs.csLoader.createNode("xxxxx.csb");
var action = ccs.actionTimelineCache.createAction("xxxx.csb");

```

###再生
----------
再生は、runActionを使用します。
gotoFrameAndPlayは、再生するframeIndexを指定する必要があります。

```js

node.runAction(action);
action.gotoFrameAndPlay(0, false);
```

`action.gotoFrameAndPlay(0, false);`の部分は、

```js
action.gotoFrameAndPlay(0, 60, false);

```

とも書けます。

##イベントの貼り方

var2.0からは、アニメーションスタートとエンドをコールバックとして取得することができません。
コード上で、

```js

action.isPlaying();

```

で終了しているかどうか確認することはできます。

###フレームイベントの貼り方
----------

actionに対して、コールバックを設定することで、
イベントを受け取ることができます。
引数のframeにはイベント情報が入っています。

```js

var action = ccs.actionTimelineCache.createAction(file);
action.setFrameEventCallFunc(frameEventCallBack.bind(this));

function frameEventCallBack(frame) {
  // イベントフレームの情報
  var frameIndex = frame.getFrameIndex();

  // 現在のフレームを取得
  var timeline = frame.getTimeline();
  var action = timeline.getActionTimeline();
  var nowFrame = action.getCurrentFrame();

  // frameイベントのframeIndexより、
  // 現在のフレーム数のほうが大きい場合は、
  // frameイベントがもつevent名が発火したということ
  // よって、小さい場合は無視するため即リターン
  if (nowFrame < frameIndex) {
      return;
   }

   // ここまできてやっと、eventNameが発火したということ
   var eventName = frame.getEvent();

   /* eventNameに対応した処理 */
};
```

##お掃除

これは環境によって違うと思うけど(使い回すならしないとか)、
いらなくなった時のお掃除の方法。

```js

// nodeを削除
node.removeFromParent();

// actionに貼ったイベントをクリア
action.clearFrameEventCallFunc();

// ccs.actionTimelineCacheから、キャッシュされているactionを削除
ccs.actionTimelineCache.removeAction(file);
```

##まとめ

```js

ccs.csLoader.setRecordProtocolBuffersPath(true);

var file = "xxxx.csb";

var node = ccs.csLoader.createNode(file);
var action = ccs.actionTimelineCache.createAction(file);

action.setFrameEventCallFunc(frameEventCallBack.bind(this));


node.runAction(action);
action.gotoFrameAndPlay(0, false);

// コールバック関数
function frameEventCallBack(frame) {
  // イベントフレームの情報
  var frameIndex = frame.getFrameIndex();

  // 現在のフレームを取得
  var timeline = frame.getTimeline();
  var action = timeline.getActionTimeline();
  var nowFrame = action.getCurrentFrame();

  // frameイベントのframeIndexより、
  // 現在のフレーム数のほうが大きい場合は、
  // frameイベントがもつevent名が発火したということ
  // よって、小さい場合は無視するため即リターン
  if (nowFrame < frameIndex) {
      return;
   }

   // ここまできてやっと、eventNameが発火したということ
   var eventName = frame.getEvent();

   /* eventNameに対応した処理(例) */
   if (eventName === "end") {
     node.removeFromParent();
     action.clearFrameEventCallFunc();
     ccs.actionTimelineCache.removeAction(file);
   }
};
```

間違ってたら教えてくださいw