OmniAICreator/Qiita-1.07M huggingface dataset:
Bash on Ubuntu on Windowsが楽しい!

これは [日本情報クリエイト  Engineers Advent Calendar 2016](http://qiita.com/advent-calendar/2016/njc) による9日目の記事になります。

#Bash on Ubuntu on Windowsとは

Windows 10 Anniversary Updateで追加された待望の機能ですね。
tail とか grepとか使い慣れたコマンドがVirtualBoxとか使わないで利用できるのが良いですね。

最近はDockerやVagrantが主流ですが、メモリ4Gの非力なWindows環境でちょっと開発するにはOS標準のLinux環境は最適な方法です(^^

#利用手順
まずは、http(nginx)サービスを使う前にwindowsの機能からインターネット　インフォメーション　サービスを無効します。
80/445ポートが使われているので起動できなくて悩んだ教訓から対応(^^;
skype等で80ポート使うようになっていればこちらも変更しておきます。

##機能のインストール
コントロールパネル→プログラム→Windowsの機能の有効化または無効化から「Windows Subsystem for Linux (Beta)」にチェックを入れる。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/85663/c4649b1d-acee-57d8-0b2a-08808e5daac0.png)
インストールがされるので再起動まで終わらせる。

##開発者モードへの変更
設定→更新とセキュリティ→開発者向け→「開発者ード」へ切り替え。
![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/85663/49b59468-c63d-8ad7-4253-2369d7a6da03.png)

##bash設定
コマンドプロンプトで `$ bash` コマンドを実行
設問に従って進みbashユーザの設定
bashユーザーはwindowsのユーザとは別にのユーザー名とパスワードを設定が必要です。

##初期環境設定
###ホスト名の明記
`sudo sh -c 'echo 127.0.1.1 $(hostname) >> /etc/hosts'`
これが出来ていないと以降の作業が名前解決の関係上すごく時間かかる事になります(^^;

###リポジトリの変更(日本利用)
`sudo sed -i -e 's%http://.*.ubuntu.com%http://ftp.jaist.ac.jp/pub/Linux%g' /etc/apt/sources.list`

###Ansibleインストール
今回はChefは現在soloからzeroの移行など情報が錯綜している事と、Ansibleの方が後発でエージェントレスなのでこちらを採用しました。
`$ sudo apt-get install software-properties-common` //リポジトリ追加拡張 1回のみでOK
`$ sudo apt-add-repository ppa:ansible/ansible`
`$ sudo apt-get update`
`$ sudo apt-get upgrade`
`$ sudo apt-get install ansible`

###playbookを作成
初回だけ作成し今後変更があればwindowsのファイルを編集することにします。
`c:/temp/kokyaku-playbook.yml`
vim,git,nginx,php,mysql,freetds等使用するものを予め設定しておきます。

###Ansible実行
上記のplaybookを適切に変更したら実行します。
`$ sudo ansible-playbook /mnt/c/temp/kokyaku/playbook.yml`
windowsと共有したファイルを扱う場合は必ず/mnt/c/を利用します。これでcドライブ直下のファイルが利用できます。
ちなみにBash on Ubuntu on Windowsで利用するファイルを直接windowsから編集すると高確率で環境破壊されるので絶対に行わないでください。とMS社から公式アナウンスされています。
https://blogs.msdn.microsoft.com/commandline/2016/11/17/do-not-change-linux-files-using-windows-apps-and-tools/

#bashの再インストールが必要な場合
開発環境はすぐ汚れます。汚れたらさくっと消して作りなおす。Ansibleも入れるので安心して消せますね。

コマンドプロンプトで `$ lxrun /uninstall /full` を入力して実行する。
完全に削除したいなら USERPROFILE\AppData\Local\lxss フォルダー以下をエクスプローラーなどから削除する。
`lxrun /uninstall /full` したら、次からは `lxrun /install` を実行する。
これで Bash の初回セットアップが実行されてクリーンな状態に戻ります。

#その他
ubuntuでmssqlがapt-getで入れられなかったのでコンパイルしてみました。
次回以降はwindowsのフォルダに退避したファイルをコピーして使うようにAnsibleのplaybookに記載しています。
`$ sudo apt-get freetds-dev php5.6-dev`
`$ wget http://jp2.php.net/get/php-5.6.26.tar.gz/from/this/mirror`
`$ tar -xf mirror`
`$ cd php-5.6.26/ext/mssql`
`$ phpize`
`$ cp /usr/lib/x86_64-linux-gnu/libsybdb.* /usr/lib/`
`$ ./configure --with-mssql`
`$ sudo make`
`$ sudo make install`
`$ sudo vim /etc/php/5.6/fpm/conf.d/20-mssql.ini`
次の行を追加 `extension=mssql.so`
`$ sudo service php5.6-fpm restart`

#今後に期待するところ
残念ながらターミナルが日本語文字化けがひどくて、SSHサービス使うしかないのでこの辺りは早急に改善してもらいたいですね。
あとVisual Studio Codeでターミナル利用はできるようですが、ついでにBash on Ubuntu on Windowsの内部ともっとシームレスに利用できてgitとかあちこちいかなくても利用できるようになるいいなーって期待しています。
CSSのtransitionアニメーションが終わったら関数を実行

## 結論
```js
let time = $(el).css("transition-duration");

if(/ms$/.test(time)){ // msかどうか
  time = parseFloat(time);
} else {
  time = parseFloat(time) * 1000;
} 


setTimeout(()=>{
  // Do something...
}, time);
```

## 解説
CSSの`transition`を用いたアニメーションで、`animate`のコールバック関数みたいにするにはどうするか考えてみました。

要はアニメーションにかかる秒数を`setTimeout`したらいいのです。

transitionのアニメーションにかかる秒数はCSSの`transition-duration`プロパティを取るとわかります。

CSSの`time`型のデータには秒とミリ秒が指定できるので、正規表現でミリ秒かどうかを判断して、ミリ秒の場合は1000かけます。

最後に、それを`setTimeout`したら終わりです。

## デモ
[JSFiddle](https://jsfiddle.net/u4cnqk80/)
WPF+Livet+CoreTweetでグラブル救援ツールを作った！

##はじめに
この投稿は[「作ったアプリ自慢！ Advent Calendar 2016」](http://qiita.com/advent-calendar/2016/application-jiman)の12日目の記事です。

##開発環境と動作環境
Visual Studio 2015 Community
.Net Framework4.5以上
Windows

##アプリの外観

![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/130827/2c9d1481-d017-be49-361c-70dd37117b09.jpeg)

シンプルな見た目にしました。

##できること
![救援.JPG](https://qiita-image-store.s3.amazonaws.com/0/130827/1a61b7e6-e94d-d6fb-d3b4-62b203e6c025.jpeg)

↑のような救援Tweetを種類ごとに監視し参戦IDをクリップボードにコピーしてくれる！それだけです(笑)

実際に動かしてみます！

![ティアｗｗ.JPG](https://qiita-image-store.s3.amazonaws.com/0/130827/29d3aeda-7433-924a-3379-0c77a33680e9.jpeg)

お馴染みのティアマト・マグナを監視してみます！

![ティア.JPG](https://qiita-image-store.s3.amazonaws.com/0/130827/41aec642-7b42-8a11-5592-a59305ec4af8.jpeg)

取得できました！

それをこう！

![コピ.JPG](https://qiita-image-store.s3.amazonaws.com/0/130827/d16ebf5b-2a92-ce07-1b0e-4a46e4a73523.jpeg)

右クリックから貼り付けやCtrl+Vしてマルチバトルに参戦できます！

半額期間のときに大活躍してくれていますヽ(*´∀｀)ノ

以上です！

##今後の展望

現在ログ機能が入っていないのでアプリ内かtxtファイル等に出力できるようにしようと思っています！

##おわりに

開発に協力してくれた団員のみなさん、フォロワーのみなさんありがとうございました！
また、グラブル側には一切触れていないので我ながらいい発想だなと思っています！

では、またお空で会いましょうヽ(・∀・)ノ
mackerel のメトリクスをみてもらう為にやった事

遅くなってすみません。

この記事は、[Mackerel Advent Calendar 2016](http://qiita.com/) 12日目の記事です。

mackerelを導入してから監視やメトリクスの表示については随分楽になったと思っています。
今回は紹介しませんが、awsやgcpのコスト管理にもmackerelを利用しています。
タイトルにある通り、メンバーにmackerelのメトリクスを毎日見てもらう為に行った事紹介します。

#1 . slack botで通知を行う。

![スクリーンショット 2016-12-12 午後9.18.58.png](https://qiita-image-store.s3.amazonaws.com/0/49292/353e21c1-e4a5-1d41-95e9-7c8f5ddbee90.png)

このような通知が平日のみ毎朝slackに流れてきます。
クリスマスバージョンになっていますが季節に合わせた様々なバージョンを用意しております。

![スクリーンショット 2016-12-12 午後9.15.19.png](https://qiita-image-store.s3.amazonaws.com/0/49292/b8ff7aee-00f0-988a-ad45-c9819642bdb7.png)

こんな可愛くお願いをされればテンションあがってつい確認しちゃいますよね。
文章については弊社のデザイナーの女の子に作成を依頼してます。

#２ . ダッシュボードを作成する。

弊社ではサーバの種類・メトリクスを分類わけして同系統のサーバのメトリクスが一覧で見れるようにダッシュボーを作成しています。

* このグラフはサンプルです。
![スクリーンショット 2016-12-12 午後9.21.52.png](https://qiita-image-store.s3.amazonaws.com/0/49292/d58468c3-9874-7256-0e91-54236ffda2b4.png)

このようなダッシュボードにした理由としては、CloudForecastが個人的にすごく好きで見慣れていた為です。1画面で同系統のメトリクスがみれるのは、個の偏りや異常がみやすいと思っています。

グラフの数が多すぎるとグラフが表示されるまでにすごく時間がかかってしまいますので、サーバが場合やメトリクスが多い場合は適切にわける必要があります。

![スクリーンショット 2016-12-12 午後10.35.20.png](https://qiita-image-store.s3.amazonaws.com/0/49292/13f9c801-1938-147e-53dd-a47910c8396f.png)

#３ . ポイントを共有する。

ダッシュボードの作成が完了しても、まだまだサーバが増えてくると見るべきメトリクスが多くでちゃんと見てもらう事は難しいですよね。メンバーに見るべきポイントを共有するのも重要だと思います。今日は僕がメトリクスを見る際に注意しているポイントの一部を紹介します。

* 前日と比べてメトリクスに変化はないか。
* cpu, memory, dick reads/writes に変化はないか。
* アプリケーションへのリクエストが増えてないか。
* アクリケーションのエラーは増えてないか。
* Go GC, Go Heap, Go Memory, Gostats Operationでおかしな所はないか。
* MySQL Table Locks/Slow Queries
* JVM Elasticsearch GC events
* etc...

見るべき項目については人によって違うと思いますので参考程度に思ってください。
ステータスを一時的にStandbyとかMaintenanceにしたままのサーバがあった事もありました。現在はステータスをチェックするスクリプトを作成しており、通知がこない状況のまま放置されるといった事はなくなりました。

#4 . その他（今後試してみようと思っている事）

* botのアイコンを見てもらいたい人に合わせて変えてみる。
* 監視用携帯にかわいい声で電話してお願いをしてみる。
* メトリクスをみて有益な情報を発見してくれた場合はお礼をする。

#5 . まとめ

技術的な話というより、メトリクスをみてもらう為にやっている取り組みについて書かせて頂きました。
というのもせっかくメトリクスをとっているので障害が起きた時しかみないではなく、毎日みてほしいと思うからです。他にも良い方法があれば、ぜひ試してみたいと思いますので教えてください。

毎日楽しくメトリクスがみれるといいですね！！
Slackの投票機能

# 投票機能をつける
Slackで簡単に投票を行い、パーセンテージや誰が投票したのか見たいときがある。
その場合、`Polly`というBotを追加する
https://www.polly.ai/polls

# 使い方
1. 上のURLからpollyをSlackのTeamに追加する
2. Teamに追加後、任意のチャンネルにpoll(ユーザ名)を追加する
3. 以下のコマンドを打ち込むことで投票ができる

```
/poll "好きなOSは？" "Windows" "MacOS" "CentOS" "Kali"
/poll "タイトル" "要素1" "要素2" "要素3" "要素4"
```  
/pollを使うことで簡単に投票できる
4. Submitでどこに結果を公開するのか設定できるので、任意のボタンを押すと投票開始になる
<img width="937" alt="スクリーンショット 2016-12-12 22.54.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/149402/a6e2e391-ce97-d6fd-0e0c-7b50f7753123.png">
5. Submit -> Submit to Cannelを選択すると、そのチャンネル内に結果が表示される
<img width="629" alt="スクリーンショット 2016-12-12 23.02.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/149402/2371d5fa-0b34-402a-3d2b-e07b80b741cc.png">
Perl 6で循環参照で困ったときの解決方法

こんにちは、Perl 6アドベントカレンダーの13日目の投稿になります。
今回はちょっとしたTipsとして循環参照でこまってしまったときの解決方法を紹介しようと思います。

# イントロ

## 準備

下記のようなディレクトリ構成、内容のファイルを生成してみましょう。

```bash:tree
$ tree
.
├── cycle.p6
└── lib
    ├── A.pm6
    └── B.pm6
```

```pl:cycle.p6
use lib 'lib';
use A;
```

```pl:A.pm6
use B;
class A { has B $!b; submethod BUILD { } };
```

```pl:B.pm6
use A;
class B { has A $!a; submethod BUILD { } };
```

## エラー

実行してみると下記のようなエラーが出てしまうはずです。
これはクラスAとクラスBが循環参照の状態になっているためです。

```bash:実行
$ perl6 cycle.p6 
===SORRY!===
Circular module loading detected trying to precompile /home/itoyota/Programs/cycle/lib/A.pm6
```

というわけで、この循環参照によるエラーを避けるために、ちょっとした工夫が必要になります。

# 解決策

下記のような方法で解決できます：

+ クラスAとクラスBを１つにまとめたAB.pm6を作る。
+ クラスAの定義の前に、クラスBのスタブを呼び出す

```bash:tree
$ tree
.
├── ok-cycle.p6
└── lib
    └── AB.pm6
```

```pl:AB.pm6
class B { ... }
class A { has B $!b; submethod BUILD { } };
class B { has A $!a; submethod BUILD { } };
```

```pl:ok-cycle.p6
use lib 'lib';
use AB;

dd A.new;
dd B.new;
```

```bash:実行
$ perl6 ok-cycle.p6 
A.new
B.new
```


うまく実行できました。

以上、Perl 6アドベントカレンダーの13日目の投稿で、Perl 6で循環参照で困ったときの解決方法でした。

# 参考

+ 今日のTipsは、実は昔ircで私が質問して、開発メンバーの方からもらった回答です
  + https://irclog.perlgeek.de/perl6/2016-05-29#i_12567062
Azure Storage, Azure Storage Emulator, Azure Storage Explorer 入門

#はじめに
AzureのStorageには、以下4つのサービスがあります。

- Blob Storage
- Table Storage
- Queue Storage
- File Storage 

各サービスには基本的にプログラムでアクセスすると思いますが、開発者であればローカル環境でストレージを利用したり、テストデータをマニュアルインプットする必要があると思います。ということでローカル環境でストレージをエミュレートし、GUIでデータをインプットするあたりまで実施してみました。

#動作確認環境
OS: Window 10
S/W: Azure Storage Emulator, Azure Storage Explorer

#1. Azure Storage Emulatorのインストールと設定
Azure Storage EmulatorはAzure SDKに付属していますが、単独でもダウンロード可能です。[こちら](https://azure.microsoft.com/ja-jp/downloads/)よりダウンロードしインストールします。

スタートメニューからAzure Storage Emulatorを起動します。
以下の画面で「The storage emulator was successfully started.」と表示されている場合は、起動に成功し初期化も終了しています。
![image](https://qiita-image-store.s3.amazonaws.com/0/131481/e3fec180-160b-7c07-7a1f-20b728cdc7f4.png)



Azure Storage Emulatorの操作はコマンドラインでもできますが、Windowsタスクバーの通知領域に表示されるアイコンを右クリックすることで表示されるメニューから操作も可能です。

#2. Azure Storage Explorerのインストールとローカルアクセス
Azure Storage Explorerは、2016年12月現在もプレビューのようですが十分に使えます。
[こちら](http://storageexplorer.com/)よりダウンロードしインストールします。

起動すると以下のようなシンプルな画面が表示されます。
![image](https://qiita-image-store.s3.amazonaws.com/0/131481/897c5f92-f9c3-ddd2-5e90-cf69324dd717.png)

Azure Storage Emulatorが正常にインストールされていれば、(Local and Attached) -> Storage Accounts -> (Development)と辿ることでローカルストレージのサービスにアクセスできます。
以下の例ではmyqueueという名前のキューを作成し、my messageというメッセージを追加しています。
![image](https://qiita-image-store.s3.amazonaws.com/0/131481/3dc178b0-daaf-5cc5-3720-f6bce3721917.png)

#3. Azure Storage ExplorerでAzure Storageにアクセス
左上の人型アイコンをクリックし、Azure Storageにアクセスします。
![image](https://qiita-image-store.s3.amazonaws.com/0/131481/334dd375-c1c8-c0ff-527f-de1f618bce0f.png)

表示されたダイログでAzureにログインし、使用したいサブスクリプションを選択しApplyボタンをクリックします。
![image](https://qiita-image-store.s3.amazonaws.com/0/131481/6994d670-8e9a-207a-6669-93c79d4463d2.png)

あとはローカルストレージ同様にツリー表示を辿り、ストレージを操作可能です。
![image](https://qiita-image-store.s3.amazonaws.com/0/131481/28473fe2-13e5-ff0e-b78c-3c45c941b6ea.png)

#参考URL
[Microsoft Azure Storage の概要](https://docs.microsoft.com/ja-jp/azure/storage/storage-introduction)
[開発とテストのための Azure のストレージ エミュレーター使用](https://docs.microsoft.com/ja-jp/azure/storage/storage-use-emulator)
[Azure Storage の接続文字列を構成する](https://docs.microsoft.com/ja-jp/azure/storage/storage-configure-connection-string)
[ストレージ エクスプローラーの概要](https://docs.microsoft.com/ja-jp/azure/vs-azure-tools-storage-manage-with-storage-explorer)
Firebaseの初期設定について

Firebaseの初期設定には、以下の2つが有ると思われます。
１）Firebase Realtime Database を設定する(スタートガイドより、AppDelegateで設定する方法)
２）React Native と Firebase のビギナーズ ガイド(React Nativeのenvironmentで設定する方法)
現在２）の方法で、AUTHとRealtimeDatabaseでは、動作しているのですが、プッシュ通知などを組み込もうとして、AppDelegateにプッシュ通知関係の初期化を組み込んだ場合、不具合が出ています。

1)と２）の処理概要を以下に添付いたします。

１）と２）の混在は、まずいと思っていますが、プッシュ通知などもReact Nativeのenvironmentで設定できますでしょうか？

以上、よろしくお願い申し上げます。

１）Firebase Realtime Database を設定する(スタートガイドより)の事例
Firebase アプリの参照を作成または使用する前に、Firebase を初期化する必要があります。他の Firebase 機能で既に初期化を行っている場合は、この手順をスキップできます。
Firebase モジュールをインポートします。
OBJECTIVE-CSWIFT
@import Firebase;
FIRApp 共有インスタンスを設定します。これは通常、アプリケーションの application:didFinishLaunchingWithOptions: メソッド内で行います。
OBJECTIVE-CSWIFT
// Use Firebase library to configure APIs
[FIRApp configure];
Firebase Realtime Database を初期化したら、次のようにデータベースへの参照を作成します。

OBJECTIVE-CSWIFT
self.ref = [[FIRDatabase database] reference];
２）React Native と Firebase のビギナーズ ガイド(2016年8月8日月曜日)の事例

Firebase のセットアップ

React Native は、npm で依存性を管理しています。Firebase をインストールするには、プロジェクトのルートで次のコマンドを実行します。
npm install firebase --save
index.ios.js を開き、一番上に次の行を追加します。
import * as firebase from 'firebase';
そして、コンポーネントの直前で設定値を渡して Firebase を初期化します。
// Initialize Firebase
const firebaseConfig = {
  apiKey: "<your-api-key>",
  authDomain: "<your-auth-domain>",
  databaseURL: "<your-database-url>",
  storageBucket: "<your-storage-bucket>",,
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
Google Apps Scriptでテスト品質管理できる仕組みを作ろう〜第２章 テスト進捗状況表〜

この記事は[フロムスクラッチ Advent Calendar 2016](http://qiita.com/advent-calendar/2016/fromscratch)の12日目の記事です。

# 改めて自己紹介
1987年の三重県人です。関西の人間（特に大阪）からはよく虐げられます。くやしいのぅ。現在は[フロムスクラッチ](https://f-scratch.co.jp/)の開発部隊にいます。主にはテストチームのマネージメントをしていますが、要件定義のお手伝いをしたり、AIのためのデータモデルの設計のお手伝いをしたり、テストデータ自動生成の仕組み考えたり、などとやってることは様々です。なんでもやったるぞと。
今回は[前回](http://qiita.com/ddddbird/items/2bd65e7f6bba3dc0cd08)に紹介したテスト品質管理できる仕組みの第2段！テスト進捗状況表についてお話します。全3話完結予定！

# 前回までのおさらい
[前回](http://qiita.com/ddddbird/items/2bd65e7f6bba3dc0cd08)は、WBS・テストケースとその結果・不具合報告書をインプットとして、Google Apps Scriptで加工し、テスト進捗状況表と品質情報表をアウトプットするという話をしました。そして今回はテスト進捗状況表についてお話します。

# システム構成
システム構成は以下のとおりです。そうです。前回と変わっております。

まず、不具合報告一覧がRedmineからexportしたCSVファイルに変わっております。そしてテスト進捗状況表もHTMLファイルからGoogle Spread Sheetに変わっております。そして一番変わったのは、DBとしてFusion Tablesを使っているところです。

<img width="753" src="https://qiita-image-store.s3.amazonaws.com/0/103674/39ab334e-41bf-620f-6182-6fd13e8a07d8.png">


# インプットデータの取得について

テストケースと結果は複数のファイルが存在しており、Spread SheetのID管理がめんどうなので、フォルダ内のSpread Sheetを全部取得するようにしています。やり方はGoogle Apps API JAPANの質問にあったものを参考にしました。
[特定フォルダ内の全スプレッドシートの名前とIDを取得する。](https://groups.google.com/forum/#!topic/google-apps-api-japan/E9Rc3PdT1r8)

不具合報告一覧はRedmineからCSVファイルとして出力しています。こいつについては、一度Google Drive上に配置してから取り込みをしています（いまのところ手動・・・！）。

# Fusion Tables
テスト進捗状況表でみたい情報は以下の4つ。

1. プロジェクト全体の現時点の進捗情報
2. プロジェクト全体の時系列の進捗情報
3. テスト担当者単位の現時点の進捗情報
4. テスト担当者単位の時系列の進捗情報

時系列で見たい。担当者単位で見たい。
うーん、じゃあ過去のデータを取っておきたいなぁと思っていたところで、以下の記事に出会いました。

[Googleドライブでデータベースが使えるという衝撃](http://pineplanter.moo.jp/non-it-salaryman/2016/02/03/google-drive-fusion-tables/)

恥ずかしながら、あんまりGoogleのAPIとかに詳しくない私にとっては「へー、これはいいや。」と思って使ってみました。制限はあるものの、今のところは問題ないです。

蓄えているデータは以下の通り。

<img width="330" src="https://qiita-image-store.s3.amazonaws.com/0/103674/ff6561da-18c5-6d3d-aafa-89324d8baa6b.png">

ユーザ、テストスイート、日付の単位でGoogle Apps Script上で加工したデータを登録しています。

# データの取り込み順

データの取り込みは、いまのところ1日の終りにGASの関数を実行しています。

1. フォルダ内からテストケースとその結果のデータを取得。合格テストケース数、不合格テストケース数、未実施テストケース数、保留テストケース数を舐めに行きます。
2. 当日分の不具合一覧から不具合修正完了数、不具合残数、不具合対処扶養数、不具合保留数を舐めに行きます。
3. 当日分レコードを作成し、Fusion Tables上に登録します。

# 出力結果
以下、サンプルですが出力結果を紹介します。

まずは現時点での進捗情報

<img width="717" src="https://qiita-image-store.s3.amazonaws.com/0/103674/71c8831d-18bb-4e3f-a96d-936c98b911a1.png">

上記はプロジェクトの全体に対する現時点での進捗情報のサンプルになります。
集計対象を変えることで、個人の進捗情報も確認することができます。
確認できる情報としては、総テスト数に対していくつ合格していて・残はいくらあるか。また、不具合はどれくらい出てて、残は何件あるかなどが分かります。

次に時系列での進捗情報

<img width="676" src="https://qiita-image-store.s3.amazonaws.com/0/103674/6e258bb5-6c0c-dcbb-9570-916e90aa5c49.png">

<img width="674" src="https://qiita-image-store.s3.amazonaws.com/0/103674/62bf3b8d-1980-0c04-75de-2aecb0e97e45.png">

上記は、あるテストスイートに対する時系列での進捗情報のサンプルになります。
テスト進捗、不具合対応の推移が日単位でみることができます。

とまぁ、このように進捗情報をサマリであったり、時系列であったりと確認することができます。

# まとめ

テスト品質管理できる仕組みの第2段ということで、今日はテスト進捗状況表についてお話しました。次回は品質情報としてPB曲を見える化の話をしたいと思います。

基本的に業務外に作っているということもあり、ゆっくりゆっくり出来上がってきていますが、 @take_chan_man 先生にはよいクリスマスプレゼントが出来そうです。

さてさて、明日の担当は @jkkitakita 先生です！よろしくお願いしまーすね！
Hello X3DOM on Jupyter

[Jupyter Advent Calendar 2016](http://qiita.com/advent-calendar/2016/jupyter) 10日目 @enakai00 さんの記事 「[Jupyterノートブック上でJavaScriptからカーネルのコードを実行する方法](http://enakai00.hatenablog.com/entry/2016/12/10/141301)」から、Jupyter 内で、任意の JavaScript を実行できることを教えてもらいました。

[Hello, X3DOM!](http://doc.x3dom.org/tutorials/basics/hello/index.html) を実行してみましょう。

下の Jupyter notebook:　https://gist.github.com/anonymous/8359a7be1499fa9c63ef5eb1af181b9e

```Python
from IPython.display import HTML

javascript = '''
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> 
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link> 
<x3d width='400px' height='300px'>
    <scene>
        <shape>
            <appearance>
                <material diffuseColor='1 0 0'></material>
            </appearance>
            <box></box>
        </shape>
    </scene>
</x3d>  
'''

HTML(javascript) 
```

![スクリーンショット 2016-12-12 22.22.55.png](https://qiita-image-store.s3.amazonaws.com/0/103217/aa63f8b0-4efc-3b7a-44f5-c09c5bb56e2c.png)

Hello X3DOM on Jupyter !
Node.innerText にnullを設定してハマった話

## 問題となったコード

```html:HTML
<div id='target' />
```
```js:JS
var tgt = document.getElementById('target');
tgt.innerText = null;
```
divの内容をクリアするために、nullにしたつもりだった。

## 表示結果
Safari/Chromeでは特に何も表示されない
FireFox / IE / Edgeでは'null'と表示されてしまっている……
まさかここの挙動が違うとは思わなかったのでドハマり。

## そもそも論
よく見たら[非標準](https://developer.mozilla.org/ja/docs/Web/API/Node/innerText
)でした:fearful:
[Node.textContent](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent) を使いましょうね……。
js 階乗の求め方

##階乗の求め方

```script.js
function factorialize(k) {
// write your code.
}
factorialize(5) // 120

```

出力結果　例

```script.js
factorialize(5) // 120
factorialize(10) // 3628800
factorialize(20) // 2432902008176640000
factorialize(0) // 1
```


##試したコード

```script.js
function factorialize(k) {
  var j = 1;
  for(var i = 1; i <= k; i++){
    j *= i;
  }
  return j;
}
```

```js
function factorialize(num) {
  if (num === 0) { return 1; }
  return num * factorialize(num-1);
}

factorialize(5);
```


##考え方
5の階乗の求め方は、
5! = 1 * 2 * 3 * 4 * 5 = 120
1 から n までのすべての整数の積が求める値。
n までのすべての整数をfor文の　i　で表す。
k は n , j は 1を表す。

もっと簡潔に美しくかけるよ！という方、コメントお待ちしております。

##参考リンク
[Arithmetic Operators](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators)
AnsibleでplaybookをDRYに書くために、全部やってくれるroleを作った

[Ansible Advent Calendar 2016](http://qiita.com/advent-calendar/2016/ansible) の13日目の記事です。

# シチュエーション

APIサーバーと管理ツールをともにrailsで作っている。
ansibleで構成管理をしている。
APIサーバーと管理ツールの配信方法はほぼ同じで、配置ディレクトリやrubyのバージョンなどわずかに違う点がある。

# やってみたこと

## 全部をやってくれるroleを作って、playbookではそのroleを引数付けて呼ぶだけにする

```yaml:api-server.yml
---

- hosts: api-server
  roles:
    - { role: web-apps-requirements, become: yes }
  vars:
    app_name: api_server
```

呼ぶ側のplaybookは上記のような簡潔なもの。
roleの中では、一部の設定ファイルや環境変数の展開も行っているが、主には後述の通り依存関係にある別のroleを呼び出している（という言い方は適切じゃないかもしれない）。
「一部の設定ファイルや環境変数の展開」も、理想的にはroleに切り出すべきかもしれない。

### meta/main.ymlにrole間の依存関係を書く

```yaml:roles/web-apps-requirements/meta/main.yml
---

dependencies:
  - { role: rbenv, become: no }
  - { role: ruby, become: no, version: '{{ ruby_version }}' }
  - { role: nginx }
  - { role: passenger }
```

metaのdependencies設定を書けば、別のroleに依存していることを記述できる。
記述しておくと、依存しているroleを先に実行してくれる。
それぞれ、roleの名前のものをインストールするだけのシンプルなroleになっている。
このような構成にしておくことで、「全部やってくれる」と言いつつ、１つ１つのroleが煩雑になることを避けられている。

### 変数名を変数で引く

```yaml:roles/web-apps-requirements/vars/main.yml
---

port: "{{ inventories[app_name].port }}"
server_name: "{{ inventories[app_name].server_name }}"
ruby_version: "{{ inventories[app_name].ruby_version }}"
deploy_to: "/var/www/{{ app_name }}"
```

```yaml:group_vars/development.yml
---

inventories:
  api_server:
    port: 10080
    server_name: 192.168.1.100
    ruby_version: 2.3.3
  admin_tool:
    port: 80
    server_name: 192.168.1.101
    ruby_version: 2.3.3
```

ansibleの変数はrubyで言うところのHashie::Mashのようなもので、.でも[]でも引くことができる。
これを利用して、変数を上記のような構成にして、変数名を変数で引くようにすることで、変数名などを短くシンプルに維持できる。

# 終わりに

ansibleは設定を整理するためのアプローチが多いのと、変数の仕組みが複雑なので、こういう整理を行う時は非常に悩ましく、このやり方も問題に対して最適であったかどうかはあんまり自信はありません。
より良いやり方などあれば、教えてもらえると嬉しいです。
複数ホストに ssh して nohup でコマンド実行するときのテンプレート

```bash
#!/usr/bin/env bash
for h in ${TARGET_HOSTS[@]}; do
  echo $h
  ssh $h "nohup some_command >> path/to/log 2>&1 & exit"
done
```

## 参考

- https://linuxjm.osdn.jp/html/GNU_sh-utils/man1/nohup.1.html
- http://linuxjm.osdn.jp/html/GNU_bash/man1/bash.1.html
Git コミットメッセージに Author と Committer を表示する

ほとんどの状況で Git Author と Committer はグローバルで設定しておけば足りるのだけれど、特定のリポジトリらでだけそれらを切り替えたくて、でもそれを忘れるのでコミットメッセージに Author と Committer を表示して気づけるようにした。

```bash:prepare-commit-msg
#!/usr/bin/env bash

# Prepends author and committer lines to the message
AUTHOR_LINE="$(git var GIT_AUTHOR_IDENT | sed -n 's/^\(.*>\).*$/Author: \1/p')"
COMMITER_LINE="$(git var GIT_COMMITTER_IDENT | sed -n 's/^\(.*>\).*$/Committer: \1/p')"
sed -i "0,/^#/s//# ${AUTHOR_LINE}\n# ${COMMITER_LINE}\n#/" "$1"
```

![gitcommit](https://qiita-image-store.s3.amazonaws.com/0/3780/d12d5c44-8baa-e949-a818-8e048eeccec9.png)

これは githooks を使って、`prepare-commit-msg` のタイミングで Author と Committer をコメント文として先頭に追加している。template 機能を使ってそれぞれのリポジトリの `.git/hooks/prepare-commit-msg` として上記のスクリプトを置いておけば動作する。template はいくつか設定方法があるので下記ドキュメントの中から都合のよいものを選択すればよい。

- [Git \- git\-init Documentation](https://git-scm.com/docs/git-init#_template_directory)
- [Git \- githooks Documentation](https://git-scm.com/docs/githooks#_prepare_commit_msg)

また既に存在するリポジトリにはスクリプトを配布しないといけない。`$HOME/.git-template` を template ディレクトリとしており、ghq を使っているなら以下のように配布すればよい。

```zsh
$ find "$GHQ_ROOT" -name .git -type d -d 4 | xargs -I {} cp "$HOME/.git-template/hooks/prepare-commit-msg" {}/hooks/
```

当初は `pre-commit` のタイミングで `GIT_AUTHOR_EMAIL` 環境変数を書き換えるようにしようとしたのだけれどうまく機能しなかったので表示して気づけるところに落ち着いた。

**追記 Tue Dec 13 11:43:52 JST 2016**
`git commit --amend` などコミットメッセージが存在する状況で正しく動作しなかったため、正確にコメント文の先頭に追記されるようにスクリプトを修正しました。
Clojureでコードの問題を解けるまでleave出来ないbotを作ってみた

![image](https://qiita-image-store.s3.amazonaws.com/0/31405/a1f73e5a-f91f-6553-3004-c1a283a601d6.png)


投稿が遅れてしまい大変申し訳ありません。。。
この記事は『[Slack Advent Calendar 2016](http://qiita.com/advent-calendar/2016/slack)』11日目の記事です。
前回は[hoto17296](http://qiita.com/hoto17296/items/dbcc4bc62cc53299edb3)さんの「[Slack 特化 Bot フレームワーク「Shrike」](http://qiita.com/hoto17296/items/dbcc4bc62cc53299edb3)」でした。

## Botを作った経緯

当Advent Calendarで[1日目の記事](http://qiita.com/ru_shalm/items/f88ce03adb5d792c415e)から既に圧倒的な存在感を出していた蟻地獄botですが、何がきっかけだったのかインターン先のSlackにもゲリラ的に出現しており、着々と治安維持を進めております。

そんな~~恐ろしい~~働き者の蟻地獄botですが、ふと"蟻地獄がプログラミングの問題を出題して、解けた人だけ退出出来るようにすれば馴染みのない言語でもゲーム感覚でみんな書いてくれるのでは…？"と思い、今回のbotの実装に踏み切りました。

## 実際の挙動

以下の容量でプライベートチャット等を通して問題を登録し、後は動作させたいチャンネル(もしくはグループ)へinviteすれば動作します。

![image](https://qiita-image-store.s3.amazonaws.com/0/31405/5742affa-16b4-4e06-ae65-1647d0ca9b77.png)

このbotが動作しているチャンネルを離れようとすると、↓のように強制的に再度inviteされた後、登録された問題からランダムに出題されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/31405/20b0e96e-5886-e174-5d3e-713b398a8688.png)

後はリプライで答えを書いて問題を解くだけです！

![image](https://qiita-image-store.s3.amazonaws.com/0/31405/2fe658cb-0d4f-d8bd-db8a-63e25d28d71d.png)

見事回答できたメンバーは、botによる賞賛のもとチャンネルを抜ける事が出来ます

## 技術的な話

今までSlack向けのbotを作る際は、たいへんお手軽で便利なliquidzさんの[jubot](https://github.com/liquidz/jubot)をお借りして作っていたのですが

- Incoming Webhook or Outgoing Webhookでのbotしか実現できない
- チャンネルへの招待等のAPIに対応していない

と言った経緯があったため、今回始めて[clj-slack](https://github.com/julienXX/clj-slack)を使用した実装となりました。
jubotのようなフルスタックな実装でない分手間はかかりますが、Slack APIの仕様にそっくりでクセがなく大変扱いやすい印象でした。
ClojureによるSlack botはGo等に比べればあまり盛り上がっていない印象がありますが、普通に使えるライブラリも揃っているので、Clojureを書き慣れているのであれば率先して使っても良いかな、と思った次第でした。

また作成したBotのソースコードは[GitHub](https://github.com/boxp/antlion-clojure)で公開しておりますので、是非お役立てください。
それでは、良い年末を！
js 回文の真偽判定

##文章が回文かどうか真偽判定する

```script.js
function palindrome(str) {
 //write your code.
}
palindrome("My age is 0, 0 si ega ym.")//true
```
出力結果　例

```script.js
palindrome("eye") //true
palindrome("_eye") // true
palindrome("My age is 0, 0 si ega ym.")//true
palindrome("0_0 (: /-\ :) 0-0")//true
palindrome("1 eye for of 1 eye.") //false
```


##試したコード

```script.js
function palindrome(str) {
 var i =str.replace(/[\W_]/g, '').toLowerCase();
 return i === i.split('').reverse().join('');
}

```

##考え方
.replace(/[\W_]/g, '')で英数字以外の記号を取り除く
.toLowerCase()で小文字に変換して変数iに格納する。
split('').reverse().join('')で分割、逆順、結合をして変数iと比較する。


もっと簡潔に美しくかけるよ！という方、コメントお待ちしております。

##参考リンク
[String.prototype.replace()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
[String.prototype.toLowerCase()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
Digdag Serverのインストール手順

Digdag Serverをインストールする手順をまとめる。

環境は、

* CentOS 7.2
* OpenJDK 1.8.0_111

# Digdag Serverとは

Digdag Serverは以下の機能を持っている。

* REST API server：クライアントとの応答を行う
* Task Agent：ワークフローの各タスク実行を行う
* Workflow executor：ワークフローの実行管理を行う
* Schedule executor：ワークフローのスケジュール管理を行う

REST API server以外は機能を起動させないことも可能。

## Digdagのダウンロード

```
$ curl -o /usr/local/bin/digdag --create-dirs -L "https://dl.digdag.io/digdag-latest"
$ chmod +x /usr/local/bin/digdag
```

## Digdag Serverを実行するユーザの作成

```
$ groupadd digdag
$ useradd -g digdag -d /opt/digdag digdag
```

## Digdag Serverのホームディレクトリ作成

```
$ su -
# mkdir /opt/digdag/
# mkdir /opt/digdag/logs
# mkdir /opt/digdag/logs/accesslogs
# mkdir /opt/digdag/logs/tasklogs
# chown -R digdag:digdag /opt/digdag
```

## Digdag ServerのDB作成

ワークフロー定義やスケジュール管理のために利用するDBを用意する。
今回はPostgreSQLを使う。

テーブル等のオブジェクトはDigdag Serverの初回実行時に作成されるため、DBとログインするユーザを用意する。
また、`uuid-ossp`拡張モジュールを利用するので`CREATE EXTENSION`しておく。

```
$ psql -h <PostgreSQLサーバのホスト> -U <スーパーユーザ> -d postgres
postgres=# CREATE ROLE digdag WITH PASSWORD 'digdagpass' NOSUPERUSER NOCREATEDB NOCREATEROLE LOGIN;
CREATE ROLE
postgres=# CREATE DATABASE digdag_db WITH OWNER digdag;
CREATE DATABASE
postgres=# CREATE EXTENSION "uuid-ossp";
CREATE EXTENTION
```

## Digdag Serverの設定ファイルの作成

以下のファイルを作って、`/opt/digdag/`に置く。

```server.properties
database.type = postgresql
database.user = digdag
database.password = digdagpass
database.host = <PostgreSQLサーバのホスト>
database.port = <PostgreSQLサーバのポート>
database.database = digdag_db
```

## Digdag Serverのログローテション設定ファイルの作成

サーバーログとアクセスログはローテーション考慮が必要なので、logrotate向けの設定を行う。

```logrotate-digdag_server
/opt/digdag/logs/*.log
/opt/digdag/accesslogs/*.log {
    create 0644 digdag digdag
    daily
    rotate 10
    missingok
    notifempty
    copytruncate
    compress
}
```

このファイルを`/etc/logrotate.d/`に置く。

## Digdag Serverの自動起動スクリプトの作成

今回はUpstartを使った。
以下のファイルを`/etc/init/`に置く。

```digdag-server.conf
# configuration for Upstart
description "digdag server"

start on runlevel [2345]
stop on runlevel [016]

chdir /opt/digdag
exec su -c "digdag server --config server.properties -O logs/tasklogs -A logs/accesslogs -L logs/server.log" digdag
respawn
```

```
# initctl reload-configuration
```

## Digdag Serverの起動・停止


起動

```
# initctl start digdag-server
```

停止

```
# initctl stop digdag-server
```

以上。
俺俺CSS

こういうふうに書きたい、こうしたいという原則と、その問題点。
理想と現実の間で苦しむかんじのポエムです。

## 原則ルール

* 命名規則はBEMを使用
* FLOCSSルールでファイル分割

ざっとこんなかんじでやっているけど、いくつかうーんってなるポイントがあるので俺俺でどう解決するか。

## 気になる問題

### FLOCSSのProjectとComponentとLayoutでclass名が衝突する可能性

もともとProject/Component/Layoutは別フォルダに入れるルール。
でもファイル名＝class名とすることで強制的にclass名の重複を防げるような状態にしておきたい。たまにやらかすので。
対応としては「プレフィックスをつける」が最も無難、というか他に対応が思いつかない。

あとFLOCSS原典的にはLayout要素はidを使用するルールだけど、これも無視してclassを使用したほうがいいと思う。
 #Layout .Component {hoge}というような書き方をしてしまうと他からの上書きが困難になってしまう。文字通りの意味で優先度のケタが違うので、IDは本当に、本当に極力使いたくない。

### Modifier

扱いが度々問題になるやつ。一概にこうと言えなくて非常に悩ましい。

#### 原典BEM: .hoge_hoge-hoge

やだ。つらい。
jsからの変更がめんどくさいし、css書くのもだるいし、明確なこと以外あんまり利点がない。

#### プレフィックスをつけたclassで対応

js-をプレフィックスにしてしまうとjsとは無関係なModifierが出てきたときに困るので、md-のようにModifierであることが明確なプレフィックスがいい。
マルチクラスであることを許容するなら今のところこれでいいかな、と思う。

#### カスタムデータ属性に持たせる

[この記事](http://qiita.com/trkbt10/items/ae33dfd579c9cea7f056)で言及されていたやつ。
よさそうなんだけど、ニョキニョキ好きなデータ属性生やしまくってもトラブりそうな予感もするし、cssのためのデータ属性であことを明確にするためやっぱりプレフィックスは欲しい。
問題としては、知らない人からすれば珍妙な書き方になるので人に見せたとき直感的にわかって貰えない可能性があること、現状ではjsから操作するのにちょっとコツがいること。
福数人で編集する場合は特に注意が必要で、しっかり意思疎通ができないと厳しい。

#### 結局どれがいいのか

カスタムデータ属性に持たせてしまうのが楽だと思うので、一人でやるか、きっちり意思疎通できる環境ならカスタムデータ属性に持たせてしまうのが理想。
でも残念ながら自分の環境では人の出入りが激しいので、プレフィックスをつけたclassでマルチクラスにしてしまうのが無難かなあ。

### Projectが入れ子になってしまったとき

あるいはblock入れ子問題。
極力避けてもProjectAの中にProjectBが入ってくるというような状況はどうしても発生してしまう事があって、しかもAの中にあるBだけにmarginを変更したいなんていうケースはある。望ましくないのはわかっていても、極力避けても、現実問題として発生する。
そうなったとき、どこにその指定を持たせるのがいいのか。

marginくらいの簡単な指定であればProjectA側に持たせてしまっていいかもしれない、と思った。最初は。widthとかもまあぎりぎり。
でもbackground-colorの変更やborderの変更になるとちょっと怪しいし、そこまでいったらProjectBのModifierに持たせたほうがいい気がする。とはいえ動的に出力したりする場合、それも難しかったりするが。
親側、ProjectAから指定できるのはmargin、widthのみとして、それ以上の変更が必要な場合はProjectBのModifierに、Modifierに持たせるのが難しければProjectBのファイルの中にProjectAの名前を書く、くらいしかない。多分。
ここ、よくすごく迷ってしまうし現状で的確な答えが出せずにいるので、人がどうしているのか知りたい。

### 汎用class

使わないのが理想だなんてことはわかっていても必要な事がある、それが汎用class。切ない。
汎用classを何故避けるかといえばメンテナンス性が下がるからなんだけど、汎用classを避けるためにcssが肥大化しすぎてもやっぱりメンテナンス性が下がるので大事なのはバランスだ。と自分に言い聞かせている。
1つしかない例外的処理の場合にはもう諦めて使ったほうがよい。ただし同じ要素に2回同じ汎用classをつけることがあればそれはもうModifierにするべき。

余録だけど経験上、margin以外の、とくにfont-sizeやcolorに関してはあまり定義しないほうがいい。せめてspan.red{}というような形で定義したほうがいいと思う。使いまわす前提のProjectの一部に汎用classを組み込む人、居ないと思いきや割と居る。
Selenium Grid Hubをdocker-compose.yml（version 2）で動かす方法

# 結論

`HUB_PORT_4444_TCP_ADDR`及び`HUB_PORT_4444_TCP_PORT`を`environment`に指定する．

```yaml
version: '2'
services:
  hub:
    image: selenium/hub
    ports:
      - '4444:4444'
  chrome:
    image: selenium/node-chrome
    environment:
      - HUB_PORT_4444_TCP_ADDR=hub   # 各自の環境に合わせて書き換えること
      - HUB_PORT_4444_TCP_PORT=4444  # 各自の環境に合わせて書き換えること
    depends_on:
      - hub
```

`depends_on`は指定しなくても動作するが，無駄な処理が減るので指定したほうがよい．

docker-composeのバージョンが1.9.0よりも古い場合は，v2形式に`links`を指定しても動くかもしれない．

以下に動作確認済みのdocker-compose.ymlを保存してある．
https://github.com/masnagam/docker-compose-collection/tree/master/selenium-grid

## Selenium Grid Hubをdocker-composeで起動

[SeleniumのDockerイメージ](https://github.com/SeleniumHQ/docker-selenium)が提供されているが，これをdocker-composeで動かす例として，docker-compose.yml（version 1）形式を使用する例が見つかる．

* [Running a Selenium Grid with docker-compose](https://carlosbecker.com/posts/selenium-grid-docker-compose/)
    * これ以外にも何件か見つかるが，基本的には同じ内容なので省略

試しにv2形式に書き直してみたが，どうもうまく動かない．

```yaml:docker-compose.yml
version: '2'
services:
  hub:
    image: selenium/hub
    ports:
      - '4444:4444'
  chrome:
    image: selenium/node-chrome
    links:
      - hub
```

どうやら同じことを試した人がいたみたいだ．

* [Containers are not linked with docker-compose version 2 - Stack Overflow](http://stackoverflow.com/questions/36087173/containers-are-not-linked-with-docker-compose-version-2)

`HUB_PORT_4444_TCP_ADDR`という見慣れない環境変数を定義すると動くという話らしい．実際にはこれだけでは動かず，`HUB_PORT_4444_TCP_PORT`も指定する必要がある．詳細については以下のソースを参照．

* https://github.com/SeleniumHQ/docker-selenium/blob/master/NodeBase/entry_point.sh

私は知らなかったが，`HUB_PORT_4444_TCP_ADDR`というのは[Link environment variables](https://docs.docker.com/compose/link-env-deprecated/)と呼ばれる今では非推奨となっている環境変数のようだ．`links`を指定していると定義されるようだが，v2で`links`を指定してもLink Environment Variablesが定義されないようになってしまったのかもしれない．

ちなみに，私が使っているdocker-composeのバージョンは

```
docker-compose version 1.9.0, build 2585387
```

であった．
SMTP-AUTH環境でcaffを使う

GPGの鍵署名手続を大幅に楽にしてくれるツールにcaffがある。久しぶりにDebian関係でキーサインパーティーに参加してさてさてcaffをとやったらSMTPサーバ環境がSMTP-AUTHが必須になってメールが送付できなくなっていた。caffの設定をどうすりゃいいのだと調べたが要するにPerlのMail::Mailerの設定を`.caffrc`にするということだった。具体的に以下の通り。

```pl:.caffrc
$CONFIG{'mailer-send'} = [ 'smtp', Server => 'smtp.example.org',
                                    Port=> 587,
                                    From => $CONFIG{'email'},
                                    Auth => ['AUTHUSER', 'AUTHPASS' ],
                                    Debug =>  0 ];
```

とかやっとけば自分の使っているメールサーバではOKだった。`smtp`を`smtps`にするとか`Port`を変更するとか環境によって適当に変更しとけばなんとかなるだろう。
EC-CUBE 2.13.5 のcURLをバージョンアップした時のメモ

EC-CUBE 2系を使用した時にcURLのSSL Versionが「NSS」になっていたので、
「OpenSSL」に変更した時のメモを書きます。


# 現在のcURLのバージョンをチェック

```
$ curl --version
curl 7.19.7 (x86_64-redhat-linux-gnu) libcurl/7.19.7 NSS/3.19.1 Basic ECC zlib/1.2.3 libidn/1.18 libssh2/1.4.2
Protocols: tftp ftp telnet dict ldap ldaps http file https ftps scp sftp 
```

NSS/3.19.1となっているのでこれを「OpenSSL」に変えます。


# openssl関連のモジュールがインストール済みか確認

```
$ sudo yum info openssl-devel
$ sudo yum info gcc
```

実行して「Installed Packages」であればインストール済み。
「Available Packages」と表示されていればインストールされていないのでモジュールのインストールをします。
 

# openssl関連のモジュールをインストール

```
$ sudo yum install openssl-devel
$ sudo yum install gcc
```

順番はどちらが先でも問題ありません。
「gcc」はcURLをコンパイルする時に必要になります。
（最初コンパイルに失敗しつまづきました）


# cURLのダウンロード
http://curl.haxx.se/latest.cgi?curl=tar.bz2
にアクセスしてcURLの最新版のURLを取得します。

```
$ wget http://curl.mirror.anstey.ca/curl-7.51.0.tar.bz2
```


# configure

```
$ tar xf curl-7.51.0.tar.bz2
$ cd curl-7.51.0
$ ./configure --enable-libcurl-option
```

ダウンロードしたファイルを展開して「configure」を実行してmake用のファイルを作成します。


# コンパイルとインストール

```
$ make
$ sudo make install
```

cURLをインストールします。


# ライブラリを登録
$ vi /etc/ld.so.conf.d/curl-x86_64.conf

```text:curl-x86_64.conf
/usr/local/lib
```

インストールしたcURLをライブラリに登録します。
これをしないとapacheを再起動してもcURLのバージョンが上がりませんでした。


# ライブラリの更新

```
$ ldconfig -v
```

共有ライブラリの依存関係を更新してcURLを認識させます。


# apacheを再起動
```
$ sudo service httpd restart
```

apacheを再起動してPHPにも読み込ませます。


# cURLのバージョンをチェック

```
$ curl --version
curl 7.19.7 (x86_64-redhat-linux-gnu) libcurl/7.51.0 OpenSSL/1.0.1e zlib/1.2.3 libssh2/1.4.2
Protocols: dict file ftp ftps gopher http https imap imaps pop3 pop3s rtsp scp sftp smb smbs smtp smtps telnet tftp
Features: IPv6 Largefile NTLM SSL libz
```

最後にcURLのバージョンが上がったか確認します。
「NSS」が「OpenSSL」に変わりましたね。



# 参考にさせていただいたサイト
http://qiita.com/maangie/items/4af8b813ed9ddce4a0db
http://kayakuguri.github.io/blog/2016/07/07/curl-openssl-tls/
そのセッションはどんな人？セッションの質（エンゲージメントセッション？）を見たいのー。Part2

**前回のおさらい。**
そもそもセッションの質ってなんなのか？って事ですが、デバイス情報とか、新規セッションなのかとかそういう質ではなく、もう少し別の見方ができないものか？そのセッションは見込み客なのか？それとも顧客のセッションなのか？というセッションだったのか？というのが知りたいというところという感じ。勝手命名でエンゲージメントセッションと名付け、この情報が欲しいって話。
色々調べてみたら欲しいものは見つからず、できないって事が判明。
あきらめ悪く、探してたら無料では無理。だけど有料では見つかった！って所で前回終了しました。

詳しくは
そのセッションはどんな人？セッションの質（エンゲージメントセッション？）を見たいのー。Part1
http://qiita.com/analyzer/items/6b5b9813b2b999d0f565


#何を使ったか？
前回お伝えした通り、有料のツールを使ったんで、結局お金かかる話です。
知りたい事は、見込み客か顧客か一見さん的なセッションなのか？を知りたいのです。
もっと言えば、見込み客以上のセッションなのか？一見さん的なセッションなのかがわかれば、いいという感じです。
探した結果、MA（マーケティングオートメーション）に行き着きました。
「**結局MAか？**」
って話ですが、そうではなくMAを使いつつもGAでそのデータを見る感じです。


MAの多くの仕組みとして、何かしらの形（フォーム送信をしてもらうかメール文面中のリンクをクリック）でMAと個人をクッキーで紐付けます。この紐付けが完了すると、MAのDBに固有のIDが振られるわけです。
つまり、固有のID持ちの人かどうかを判別かければ、欲しいものの大半が解消されるわけです

マーケティングオートメーションとは何？ってところですが、以下解説ページ。
**マーケティングオートメーションとは何か？機能と導入のメリット**
https://innova-jp.com/201602-make-the-most-of-ma/

#MAとGAとをつなぐ。
私がやったわけではないので、詳しい技術・プログラムはよくわかってません。
しかし、いろいろ探した結果、こんなページを見つけました。

**The Ultimate Guide to Universal Analytics Integration with SalesForce**
https://www.e-nor.com/blog/google-analytics/the-ultimate-guide-to-universal-analytics-integration-with-salesforce
**Integrating CRM Data with Google Analytics to create AdWords Remarketing Audiences**
https://developers.google.com/analytics/solutions/crm-integration#overview-of-different-integration-options

どういう技術が必要なのかはさっぱりわかりませんが、やりたい事の道筋はここで立ちました。

大まかに言ってしまうと、

1. ユーザーがセッション張る
2. MAが登録者かどうか判別
3. 判別結果をGAに送る（カスタムセグメント）

と言う感じです。
ものすごく端折ってますが、やってる事はこんな感じです。
この事を素敵プログラマに相談。実装となりました。

##推測ベースでいうなれば
今回はMAをベースに作成いただきましたが、おそらくMAを使わずとも似た物は作れるのではないか？と思っています。
流れはほぼ一緒で、

1. ユーザーに何かしらの行動をとってもらう
2. その時の情報をDBに登録とクッキー紐付け（あとはGAのクライアントID？）
3. 再訪問時、クッキー情報を読み取って、判別してGAにデータ送信

この流れができれば、理屈的に見込み客になってるか否かがわかると思ってます。
ただ、日々の自身で開発する以上、メンテナンス・バグ潰しの時間などを考えたらMAを入れた方が早い、コストが抑えられるという事にもなりそうです（おそらくやりたい事の規模に左右される）。


次回は導入後に見えた事を書きたいと思いますので、約1週間ほどお待ちください。
Link > Amazon Dash Buttonは何回押せるのか > 1000回程度

https://www.quora.com/How-long-does-the-battery-last-on-the-Amazon-Dash-button

> The battery life is not documented anywhere I can find, but the author of Amazon Dash Button Teardown speculates the battery might last 1,000 preses -- or until long after the device becomes obsolete.

1.5Vから3.3Vに昇圧もしているとのこと。

1000回の根拠は上記のリンク先の最後尾の引用から読み取ると以下のようだ。

- 1200mAhバッテリーに対して300mA消費となるので4時間の動作
- 4時間 = 14400秒
- 1回の動作に数秒。１０秒と仮定すると1440回

同じ商品を1000回も購入する場合、かなりの年月がかかるだろう。使わない間の電池の液漏れは気になるところ。

一方で、独自処理に使う時に1000回を消費してしまうのはどれくらいかかるだろうか。初期テスト動作で30回は使うだろうか。残り970回もあれば飽きるまでは持ちそう。

電池はスポット溶接なのだろうか。写真を見たところ、簡単に取れないような気がする。個人で交換するのは多少面倒かもしれない。
(一方で、[こちら](https://mpetroff.net/2016/07/new-amazon-dash-button-teardown-jk29lp/)の写真では交換は簡単そう)

### もっと持続するボタン

Amazon Dash Button以上に継続利用できそうなボタンとしては、920MHz帯を使うのがいいか、次世代WiFiを待つか。

920MHz帯の場合

- Lazurite Mini : ボタン
  - 消費電力を抑えたい
  - 消費電力: http://qiita.com/7of9/items/62ac348d51c3c87e6aef
- ステーション : 通信局
  - インターネットにつながるのはこちら
  - 消費電力は大きくても良い
sbtでNightly buildのScalaを使用する

※resolverの記述が間違っていたため修正しました

検証のためNightly buildのScalaを使用する機会があったので備忘録。

#環境

sbt 0.13.13

#手順

build.sbtに以下を記載する。

```sbt:build.sbt
resolvers += "nightlies" at "https://scala-ci.typesafe.com/artifactory/scala-release-temp/"

scalaVersion := "2.11.9-264cc5f-nightly"

scalaBinaryVersion := "2.11"
```

以下、各行の詳細です。

```
resolvers += "nightlies" at "https://scala-ci.typesafe.com/artifactory/scala-release-temp/"
```

resolversにNightly buildが存在するリポジトリを追加します。

```
scalaVersion := "2.11.9-264cc5f-nightly"
```

使用するNightly buildのバージョンを指定します。
指定すべきバージョン名は、上記リポジトリにブラウザからアクセスして自力で探します。

```
scalaBinaryVersion := "2.11"
```

ライブラリ依存を解決する際に使用するバイナリバージョン。
詳しくは[この辺](http://tototoshi.hatenablog.com/entry/20121122/1353516773)を参照。

#おまけ

実行時にScalaのバージョンを取得する場合は

* util.Properties.versionString
* util.Properties.versionNumberString
* util.Properties.versionMsg

あたりで取得できます。
bash で時刻を引数に要求するコマンドのインターバル実行


かなり初歩。

時刻を引数に要求して、指定時刻の何等かを解析するスクリプトを一定間隔で実行したい。

ま、ヘマしてリカバーが必要になったなんかで、cron 登録するのはアレだし、日時跨いじゃうし、、、って時に。

```bash:interval.sh
#!/bin/bash
# date "+%s" -d"2016/12/08 12:00:00"
declare start=1481166000

for(( i=0 ;  i <= 24 ; i++ )){
    j=$(( $start - $i * 3600 ))
    time=$(date "+%Y%m%d%H%M" -d@$j )
    echo $time &
    sleep 1
}
```

- `start` はエポック秒。
- 例は GNU coreutils の date
マジックファンクション（ラインマジック）のドキュメントに当たる方法


## 結論

- 行頭 `%` はマジックファンクション（`ipython` の機能）
- 調べ方は、`ipython` のインタラクティブモードで `%magic`
    - `%matplotlib` を調べるなら、`%matplotlib?`

## だらだらと、流れを

ご多分に漏れず、`jupyter` で勉強してる訳だが、しょっぱなから


```shell-session:jupyter
In1: %matplotlib inline
In2: import matplotlib.pyplot as plt
```
行頭の `%` はなに？

意味わかんない。とりあえず、`RYFM` 実践。

```shell-session:
$ pydoc matplotlib
（略）
    or using ipython::
    
        ipython
    
    at your terminal, followed by::
    
        In [1]: %matplotlib
        In [2]: import matplotlib.pyplot as plt
    
    at the ipython shell prompt.
  （略）
```
  
さらっと `%` を出されても、、、`Python` 本体の方の機能かと思っちゃったじゃんか。


ググった結果。
↓

### %quickref

コマンドラインで、`ipython` して、`%quickref` する。

```shell-session:
$ ipython
In [1]: %quickref
（略）
%magic           : Information about IPython's 'magic' % functions.
（略）
```

そしたら `magic` の説明は、`%magic` だよと。

### %magic

```shell-session:
In [2]: %magic
IPython's 'magic' functions
===========================

The magic function system provides a series of functions which allow you to
control the behavior of IPython itself, plus a lot of system-type
features. There are two kinds of magics, line-oriented and cell-oriented.
（略）
```

で、`matplotlib` を検索すりゃ、説明がわらわらと出てくる。

それとは別に、

>For a list of the available magic functions, use %lsmagic. For a description
of any of them, type %magic_name?, e.g. '%cd?'.

だそうだから、

### %matplotlib?

```shell-session:
$ ipython
In [1]: %matplotlib?
```

する。
Eclipse/Che を mruby 開発環境として使う。

# 前口上

タイトルのとおりです。
クラウドIDE である [Eclipse/Che](http://eclipse.org/che) を [mruby](http://mruby.org/) の開発環境として使う場合の勘所が，本記事の主題です。

本記事で扱う Che のバージョンは 5.0.0-M7 です。

# 問題点

Step by step ではなく，要点だけ手短に記します。

Eclipse/Che には，Rails アプリケーション開発用の Stack (Workspace の雛形)が用意されています。Rails 用ですから Ruby, gem に加え C/C++ が含まれています。なんとなくこれを mruby 用に使えそうな気がします。
しかしながら，その Stack を用いて，mruby の GitHub 公式リポジトリから clone してビルドすると，途中でエラー終了します。

ビルドログだけ見てると理由が判りづらいのですが，エラー終了の原因は，Rails 用のコンテナイメージに `gperf` が含まれいないことです。

ふつうの Rails アプリで `gperf` を使うことは極めて稀でしょうから，入っていなくても文句をいう筋合いではありません。

# 解法

ビルド前に Teminal タブで `sudo apt-get update && sudo apt-get install gperf` など実行すれば解決するはずです。

しかし，ワークスペースを作るたびにこれを繰り返すのはあまりにもイケていないので，`gperf`を含むコンテナイメージを作りました。compose 設定は下記のとおりです。

```
services:
  dev-machine:
    image: 'pf0camino/mruby:latest'
```

この compose 設定を使ったワークスペースの作り方は，別記事「[Eclipse/Che を組込み向けクロス開発環境として使ってみる。](http://qiita.com/monamour555/items/ced63e22728331da3627)」を参照してください。

# 余談

mruby は組込み Ruby ですから，クロスコンパイラを使ったビルドも可能になっています。
この辺りのノウハウを期待される読者もいらっしゃるような気もしますが，それはまた別の機会に。
IMEを使う（Windows.UI.Text.Core編）

はい。
Windowsだけで3つ目のIME APIです。

# Windows.UI.Text.Core
Universal Windows Platform（UWP）でIMEを扱う場合のAPIです。
C++もどきでも使えるのですが、C#を使わない理由がないのでC#で使ってます。
（Visual Studio上でC++との連携がわりと楽にできるので困らない）

TSFに比べ使いやすくなっていますが、できることが減っています。
主に縦書きが指定できなくなっているのが……。

# 実装
非常にわかりやすいので、Visual Studioの補完機能に従っていけばほとんどの実装が完了します。
内部には最低限、テキストと選択範囲を保持します。
テキストや選択範囲を適宜変更して、ディスプレイ上のテキストのレイアウト情報を把握できればOKです。

1. `CoreTextServicesManager.GetForCurrentView()`で`CoreTextServicesManager`のインスタンスを取得する
    - 必要なら`InputLanguageChanged`に登録する
2. `textServicesManager.CreateEditContext()`で`CoreTextEditContext`のインスタンスを作成する
    - イベントに登録してIMEからの要求に応える
        - テキストの取得・変更
        - 選択範囲の取得・変更
        - レイアウトの取得
        - 未確定文字列の開始・終了
        - 未確定文字列の装飾情報
    - メソッドを呼んでアプリケーション側での変更を伝える
        - フォーカス情報
        - テキストの変更
        - 選択範囲の変更
        - レイアウトの変更

# おわりに
特筆することがない。
縦書きに対応されてないとはこういうことですね。

Windows.UI.Text.CoreはUWP版のTATEditorを作るときに使います。
（IME APIの挙動とオンメモリビットマップの描画までは確認済み）

明日はmacOSの闇のIME APIについてです。
MySQL-ClusterのDBバックアップをAWS S3にアップロードするShellScript

```
#!/bin/sh

#------------------------------------------------
# 変数設定
#------------------------------------------------
LOGFILE="/usr/local/scripts/backup/logs/backupdb.log"
AWS_CONF="/root/.aws/credentials"
BKBASE_PATH="/var/lib/mysql-cluster/data/BACKUP"
BK_PATH="/usr/local/scripts/backup/data"
BKID="`date '+%Y%m%d'`"
S3_BUCKET="s3://BUCKET_NAME/"

#------------------------------------------------
# 環境変数設定
#------------------------------------------------
export ${AWS_CONF}

#------------------------------------------------
# スクリプト結果ログ出力
#------------------------------------------------
exec >>"$LOGFILE"
exec 2>&1

#------------------------------------------------
# DB ONLINE BACKUP
#------------------------------------------------
echo -e "`date`" SCRIPT START
echo -e "STEP 1-1 : DB ONLINE BACKUP START"

/usr/bin/ndb_mgm -e "START BACKUP $BKID"
ret=$?
BKFILE="$BKBASE_PATH/BACKUP-$BKID"

#------------------------------------------------
# AWS S3 SYNC
#------------------------------------------------
echo -e "STEP 2-1 : DB BACKUP 3DAYS BEFORE DELETING FILES START"

find ${BKBASE_PATH} ${BK_PATH} -type f -mtime +2 -exec rm {} \;
ret=$?

if [ ${ret} -eq 0 ]; then
	echo -e "STEP 2-1 : DB BACKUP 3DAYS BEFORE DELETING FILES END"
else
	echo -e "[ERROR] STEP 2-1 : DB BACKUP 3DAYS BEFORE DELETING FILES NG!"
fi

echo -e "STEP 2-2 : DB BACKUP AWS S3 SYNC SATRT"

aws s3 sync ${BK_PATH} ${S3_BUCKET} --delete`
s3cnt=`aws s3 ls ${S3_BUCKET} | wc -l

if [ ${s3cnt} -eq 3 ]; then
	echo -e "STEP 2-2 : DB BACKUP AWS S3 SYNC END"
else
	echo -e "[ERROR] STEP 2-2 : DB BACKUP AWS S3 SYNC NG!"
fi

echo -e "`date`" SCRIPT END
```
[Qiitaのバグ] Contribution数がズレる


マイページのcontribution数がズレることが多いです。
というか、一致していることの方が少ないです。

グラフの方の数値が大きいことも、下の方の数値が大きいこともあります。
集計バッチ実行のタイミングの影響でしょうか？

![スクリーンショット 2016-12-12 20.37.35.png](https://qiita-image-store.s3.amazonaws.com/0/74551/1d19fec4-9051-bec0-5603-ad6fe0d03389.png "スクリーンショット 2016-12-12 20.37.35.png")
Groongaをマスターデータの保管先として使うことについて

[Groonga Advent Calendar 2016](http://qiita.com/advent-calendar/2016/groonga) 10日目は、先月開催した[新リリース自慢会](http://groonga.org/ja/blog/2016/12/02/new-release-event.html)で出てきた話題の1つを取り上げます。

先に結論を書くと、*Groongaは単体でマスターデータの保管先として使うのには向いていません*。他にマスターデータがある場合や、冗長化構成などの運用を取れる状態での利用をお薦めします。

## Groongaのデータストアとしての性格

全文検索エンジンには、既存のデータストアと組み合わせることを前提にしてデータは保持せず検索用のインデックスのみを保持する物と、データとインデックスの両方を保持する物があります。前者のタイプの例にはApache Luceneがあり、Groongaは後者のタイプです。

データストアはマスターデータの保存先として利用されることがあります（ここでは、そのデータ自体が起源であり、喪失したらバックアップから復元する以外に取り戻す手段がないデータの事を「マスターデータ」と呼ぶことにします）。例えば、Mozilla Firefoxはブックマークや履歴の保存先としてSQLiteデータベースを使用しており、もし万が一このデータベースが破損したり失われたりすると、ブックマークや履歴を喪失することになります。また、ブログの記事データをMySQLのデータベースに保存していた場合、データベースが破損したらブログの記事がなくなってしまいます。このように、マスターデータの喪失はユーザーにとって大きなダメージになるため、多くのRDBは[ACID特性](https://ja.wikipedia.org/wiki/ACID_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E7%A7%91%E5%AD%A6))を満たすように設計されており、データの破損が起こりにくいようになっています。

では、GroongaもSQLiteやMySQLのようにマスターデータの保存先として使えるでしょうか。使える使えないかで言えば使えるのですが、*その用途には使わない方がよい*、というのが答えになります。何故かというと、*Groongaのデータストア機能にはトランザクション機構が無く、ACID特性をすべて満たしてはいない*からです。

## GroongaがACID特性を満たしていない理由

ACID特性を満たしていないということは、Groongaのデータベースは比較的破損しやすいということです。これは、*Groongaが「新しい情報をすぐに検索できる（インデックスがすぐ更新される）」「検索対象の追加と検索の実行を並行して実行できる」という点を最重要視して開発されていること*に依ります。

「新しい情報の検索しやすさ」「検索と更新の両立のしやすさ」を重視している結果、Groongaのデータ保持の堅牢性は検索性能を落とさないでできる範囲の対応に留まっているため、使用状況によってはインデックスが破損することもあります。また、トランザクションがないため、複数テーブルにまたがるデータの更新があった場合に「あるテーブルのデータは更新されて別のテーブルのデータは更新されなかった」というような事が起こり得ます。このようなケースでは、個々のレコード単位のデータは破損していなくても、データ同士の関係性・整合性が失われてしまいます。

## Groongaの利用に適した場面

以上の事から、Groongaは*マスターデータを別に持っている場面*での利用が推奨されます。

例えば「青空文庫の検索」や「Wikipediaの検索」のような事例、社内の文書検索などの場面では、マスターデータは検索対象の文章（文書）データということになります。万が一Groongaのデータベースが破損しても、最悪でもバッチ処理やクロールなどによってマスターデータから検索対象の文章データを再投入して検索用データベースをいつでも再構築できるケースであれば、サービスを復旧できます。実質的には、Groongaのデータストアは*検索結果のコンテンツを高速に返すためのキャッシュ*として使うのに適していると言えるでしょう。

同じ理由から、MroongaやPGroongaのように「マスターデータは堅牢なRDBMSに保存しておいて、Groongaは検索を高速化するためのインデックス（とキャッシュ）としてのみ使う」という使用形態もおすすめです。この場合、Groongaのデータベースが破損してもMroongaやPGroongaにとっては検索用インデックスが破損しただけですので、インデックスを作り直せば＝Groongaのデータベースを再作成すれば、破損は解消されます。

どうしてもGroongaをマスターデータの保管先に使う必要がある場合には、定期的にバックアップを取ったり、[fluent-plugin-groonga](http://groonga.org/fluent-plugin-groonga/ja/ "File: はじめに — fluent-plugin-groonga")を使って複数のGroongaサーバーをレプリケーションのように運用したりといった形で、Groongaとは別のレイヤの仕組みを使ってシステムとしての堅牢さを高める工夫をするのがお薦めです。また、Groongaサーバーと互換性のあるサーバーとして振る舞う[Droonga](http://droonga.org/ja/)のクラスタを構築するのも1つの方法でしょう。


以上、[Groonga Advent Calendar 2016](http://qiita.com/advent-calendar/2016/groonga) 10日目としてGroongaのデータストアとしての性質と、マスターデータの保管の可否について述べました。引き続きGroonga Advent Calendarをお楽しみ下さい！
gulp+compass-mixinsで脱compassした話。

表題のとおりです。
compass重すぎで仕事にならないのでlib-sassに移行しました。
その際の移行手順です。


# Libsassが速いらしい。
ある朝、日頃からCompassの重さにうんざりしていた僕にlibsassという天使が舞い降りた。
http://sass-lang.com/libsass
LibsassはC++で書かれてるらしく、Rubyで書かれてるCompassに比べ桁違いに速いとのこと。
これは入れるしかない。
（1000倍速いとかなんとか…やばい速い http://www.webcyou.com/?p=7122 ）


# で、Compassはどうすんの？
Libsassがいくら速いとは言えCompassで使ってた便利ツールは使えない。良くも悪くもただのコンパイルツール。
かと言ってCompassのmixinを全部書き換えるのはめんどい。
ということでこれ。「compass-mixins」
https://github.com/Igosuki/compass-mixins

これでmixinはなんとかなるらしい。
ただspirte系の関数はそのまま対応してないから別途対応が必要。（ちなみに僕はsprite画像やめました。。）

これそのままsassのディレクトリに突っ込めばOK。

```
@import 'compass'
```
の書き方がそのファイルから見た相対パスになるのでファイルによっては

```
@import '../../compass'
```
とかになるのでエラーが出たら都度対応。（プロジェクトでかいと死ねる。。）




# 以上をGulpにまとめると

``` gulpfile.js
var gulp = require('gulp'),
    sass = require("gulp-sass");

gulp.task("sass",function(){
  gulp.src('assets/sass/**/**/*.scss')
      .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
      .pipe(gulp.dest('assets/stylesheets/'));
});

gulp.task('default', function(){
  gulp.watch(['assets/sass/**/**/*.scss'], ['sass']);
});

```

あ、はい。gulp-sassはデフォルトlibsassなので特別何かする必要はないです。
gulpについては別にググって頂ければと。
公式サイトの方法でReactを導入する(webpack+babel)

reactに関する記事はたくさんありますが、
webpackやbabelの設定等を手動で行う必要があり
敷居が高いものとなっています。

そこで今回は現時点で公式サイトに記載されている方法に則って
簡単に導入する方法を記載します。

###公式サイトのインストール手順
https://facebook.github.io/react/docs/installation.html


事前にnpmのインストールを行います。

centos7の場合

```
sudo yum install -y epel-release
sudo yum install -y nodejs npm
```

epel-releaseはnpmをインストール際に必要となります。


###グローバルにcreate-react-appをインストールします。

```
npm install -g create-react-app
```

###hello-worldという名前でプロジェクトの作成をします。

```
create-react-app hello-world
```

※hello-worldは任意の名前をつけることが可能です。

テンプレートとしてプロジェクトが作成がされるので
こちらを編集しながらreactを覚えて行くと良いと思います。

###サーバーを起動させます。

```
cd hello-world
npm start
```

`Compiled successfully!`

と表示されるので

ブラウザで
http://localhost:3000/
にアクセスをします。

「To get started, edit src/App.js and save to reload.」
とページに表示されたら成功です。

こちらは必須ではありませんが
設定ファイルをローカルに出力して
編集できるような状態にするには

```
npm run eject
```

を使います。

Are you sure you want to eject? This action is permanent. [y/N]

と訊かれるのでyを押してEnterを押します。
webpack, babel, eslint等が含まれていることがわかります。
package.jsonの中身にもこちらが記載されています。


###コマンド一覧
ちなみにpackage.jsonのscriptsがコマンドとなっています。

| コマンド | 内容 |
|:-:|:-:|
| npm run start | サーバーの起動 |
| npm run build  |  reactのコンパイル |
| npm run test  | テストの実行  |
| npm run eject  | 設定ファイルをローカルに作成  |