OmniAICreator/Qiita-1.07M huggingface dataset:
tmux + Powerline が上手く動作しない場合の確認ポイント

[公式ドキュメント](http://powerline.readthedocs.org/en/latest/index.html)や先人達の Qiita 投稿を参考に、tmux + Powerline の環境構築を行いました。
その際に上手く動作せずハマったのでメモを書いておきます。

## 環境

* OS X El Capitan
* iTerm 2
* tmux 2.1 (brew で install)

## 経緯

以下のコマンドで必要なパッケージをインストール。

```
pip install --user powerline-status
```

続いて `.tmux.conf` に以下の行を追加しました。

```.tmux.conf
run-shell "powerline-daemon -q"
source "/Users/USER_NAME/Library/Python/2.7/lib/python/site-packages/powerline/bindings/tmux/powerline.conf"
```

最後に patch をあてたフォントをインストールし、最低限の動作環境が整ったかと思いました。
この状態で tmux は起動し、エラー等も表示されないようですが、ステータスラインはカッコよく表示されないという問題が発生しました。
![tmux1.png](https://qiita-image-store.s3.amazonaws.com/0/9544/bd48ed9d-f320-c970-b8c2-7cb3a3b2843d.png)

これには 2 つの問題が潜んでいました。


## 問題1: powerline-daemon への PATH が通っていない

`.tmux.conf` の内容を見ると、 run-shell でシェルコマンドを実行しているようです。
`powerline-daemon` への PATH が通っているかを確かめてみると、コマンドが見つからないと言われてしまいました。

```zsh
% which powerline-daemon
powerline-daemon not found
```

powerline 関連コマンドは `~/Library/Python/2.7/bin` 内に配置されているようでした。
シェルの設定ファイルに以下の行を記述し、コマンドへの PATH を通しました。

```zsh:.zshrc
export PATH="$HOME/Library/Python/2.7/bin:$PATH"
```

```zsh
% which powerline-daemon
/Users/USER_NAME/Library/Python/2.7/bin/powerline-daemon
```

## 問題2: ValueError: unknown locale: UTF-8

PATH が通った状態で `tmux` コマンドを打ってみましたが、ステータスラインの表示は変わらず正常に動作していないようでした。
試しに `powerline-daemon` をシェル上で直接実行してみたところ `ValueError: unknown locale: UTF-8` が発生していることがわかりました。

```zsh
% powerline-daemon
Traceback (most recent call last):
  File "/Users/USER_NAME/Library/Python/2.7/bin/powerline-daemon", line 18, in <module>
    from powerline.commands.main import finish_args, write_output
  File "/Users/USER_NAME/Library/Python/2.7/lib/python/site-packages/powerline/commands/main.py", line 17, in <module>
    encoding = get_preferred_arguments_encoding()
  File "/Users/USER_NAME/Library/Python/2.7/lib/python/site-packages/powerline/lib/encoding.py", line 77, in get_preferred_arguments_encoding
    locale.getdefaultlocale()[1]
  File "/usr/local/Cellar/python/2.7.11/Frameworks/Python.framework/Versions/2.7/lib/python2.7/locale.py", line 543, in getdefaultlocale
    return _parse_localename(localename)
  File "/usr/local/Cellar/python/2.7.11/Frameworks/Python.framework/Versions/2.7/lib/python2.7/locale.py", line 475, in _parse_localename
    raise ValueError, 'unknown locale: %s' % localename
ValueError: unknown locale: UTF-8
```

この問題は、こちらの blog 記事を参考にさせていただきました。[sphinx で ValueError: unknown locale: UTF-8 というエラーが出た](http://please-sleep.cou929.nu/python-locale-valueerror-utf-8.html)
Mac では `LC_ALL` 環境変数が空になっていることがあるそうです。シェルの設定ファイルに以下を追記します。

```zsh:.zshrc
export LC_ALL='ja_JP.UTF-8'
```

この状態で `tmux` コマンドを実行したところ、ステータスラインのデザインが変わり、動作することが確認できました。
![tmux2.png](https://qiita-image-store.s3.amazonaws.com/0/9544/304c5549-84de-7a1e-3695-dba99ab131ae.png)
uGUIのLayout

#概要
Unityのバージョンは5.2.3f1

uGUIのLayoutのについてのメモです。
以下のコンポーネントの使い方を解説します。

- Canvas Group
- Layout Element
- Content Size Fitter
- Aspect Ratio Fitter
- Horizontal Layout Group
- Vertical Layout Group
- Grid Layout Group

内容はマニュアルを見ると詳しく載っています。
http://docs.unity3d.com/ja/current/Manual/comp-UIAutoLayout.html

##親オブジェクトのImageにTextの文字サイズを合わせる方法
1. ImageとTextを追加してTextをImageのこオブジェクトにする
2. TextのAnchor Presetsの一番右下をAltとShiftを押しながら選択
3. TextのBest Fitにチェックを入れてMax Sizeを調整する

##文字サイズに合わせて高さと幅を変更
（Content Size Fitterを使用）
1. TextにAdd Component>Layout>Content Size Fitterを追加
2. Content Size FitterのHorizontal FitとVertical FitをPreferred Sizeに設定

##Buttonサイズに合わせて文字の高さと幅を変更
（Aspect Ratio Fitterを使用）
1. Buttonを追加してTextにAdd Component>Layout>Aspect Ratio Fitterを追加
2. TextのBest Fitをチェックする
3. Aspect Ratio FitterのAspect ModeをWidth Controls Heightに設定
4. Aspect Ratioの値を調整してボタンとテキストの余白を調整
同様にToggleも拡大縮小した時にチェックイメージとテキストサイズが自動で調整されるものを作ることができるかも

##文字サイズの違うTextを縦に並べて表示
（Vertical Layout Group、Content Size Fitterを使用）
1. 空オブジェクトを作って、子オブジェクトにTextを何個か追加
2. 空オブジェクトにAdd Component>Layout>Vertical Layout Groupを追加
3. 空オブジェクトにAdd Component>Layout>Content Size Fitterを追加
4. Content Size FitterのHorizontal FitとVertical FitをPreferred Sizeに設定

##ボタンを横に並べて表示
（Horizontal Layout Groupを使用）
1. 空オブジェクトを作って、子オブジェクトにButtonを何個か追加
2. 空オブジェクトにAdd Component>Layout>Horizontal Layout Groupを追加
3. Horizontal Layout GroupのSpacingでButton同士の間に余白をつける

##ボタンを横に並べて表示した時、サイズを個々に調整する
（Horizontal Layout Group、Layout Elementを使用）
1. 空オブジェクトを作って、子オブジェクトにButtonを何個か追加
2. 空オブジェクトにAdd Component>Layout>Horizontal Layout Groupを追加
3. Horizontal Layout GroupのSpacingでButton同士の間に余白をつける
4. Horizontal Layout GroupのChild Force ExpandのWidthとHeightのチェックを外す
5. 子オブジェクトのButtonにAdd Component>Layout>Layout Elementを追加
6. Layout ElementのPreferred WidthとPreferred Heightにチェックを入れてサイズを調整
7. 余白を埋めたい場合はFlexible WidthとFlexible Heightも設定

##ボタンをグリット状に並べて表示
（Grid Layout Group、Content Size Fitterを使用）
1. 空オブジェクトを作って、子オブジェクトにButtonを何個か追加
2. 空オブジェクトにAdd Component>Layout>Grid Layout Groupを追加
3. 空オブジェクトにAdd Component>Layout>Content Size Fitterを追加
4. Content Size FitterのHorizontal FitとVertical FitをPreferred Sizeに設定
5. 空オブジェクトにAdd Component>UI>Imageを追加
6. Grid Layout GroupのPaddingで上下左右の余白を調整
7. Cell Sizeでボタンの高さと幅を調整
8. Spacingでボタン同士の余白を調整
9. Start Conrnerでどこから並べるか設定して、Start Axisでどちら方向に向かって並べるか設定
10. ConstraintをFixed Column CountかFixed Row Counを設定して、Constraint Countで列か行に表示する数を制限する

##

#その他のメモ
- スマホのUIを作るのにAutoLayout機能はとても便利（使いこなすまでが難しい）
- リストビューなどはLayout機能を使えばリストの追加などをスクリプトで制御しやすくなる
- グリットレイアウトはダッシュボードにしたりカレンダーに使ったり色々できる
- おもしろいメニューを作ってる記事を見つけた（AutoLayoutではできなそう）
http://iwashigame.hatenadiary.jp/entry/2015/09/14/013024


#参考になりそうなサイト
http://tsubakit1.hateblo.jp/entry/2015/02/07/235900
http://www.slideshare.net/RyoheiTokimura/unite2015-u-gui
http://albatrus.com/main/unity/7506

#今後の課題
スマホなどで解像度が変わった時にレイアウトが正しくなるかは試してない。
横に画面が回転した時にどう対処するか。
MySQLをインストールしたけど起動しないときのデバッグ方法

MySQLをインストールしたのに起動しなくて困ったときどうデバッグしていったらいいかについてのメモです。

## 要約
* my.cnfにlog-errorを設定しないとログを吐かないので問題がなんだか分からない
* MySQL 5.5からmy.cnfの[mysqld]の項目default-character-setがなくなったので代わりにcharacter-set-serverを設定する

## 環境
FreeBSD 10
MySQL 5.6

## インストールから起動まで
```
# pkg install mysql56-server
# /usr/sbin/sysrc mysql_enable=YES mysql_dbdir="/usr/local/mysql/data"
# cp /usr/local/share/mysql/my-medium.cnf /etc/my.cnf
# vi /etc/my.cnf
[mysqld]
skip-character-set-client-handshake
default-character-set = utf8
datadir=/usr/local/mysql/data
sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES 

[mysql]
default-character-set = utf8
# mkdir -p /usr/local/mysql/data
# chown -R mysql:mysql /usr/local/mysql
# chmod 764 /usr/local/mysql
# /usr/local/etc/rc.d/mysql-server start
Starting mysql.
# /usr/local/etc/rc.d/mysql-server status
mysql is not running.
```

MySQLが起動しません。起動しない原因を探すにもエラーメッセージは何も出てこないし、どこにもエラーログがありません。それもそのはず、MySQLのエラーログの出力先を```my.cnf```で設定しないといけないからです。エラーログを出力するには以下のように```my.cnf```に追記します([参考](http://www.goofoo.jp/2011/04/984))。

```
[mysqld]
log-error=/var/log/mysql/mysqld.log
```

そして指定したディレクトリを用意

```
# mkdir /var/log/mysql
# chown mysql:mysql /var/log/mysql
# chmod 664 /var/log/mysql
```

改めて起動してみると

```
# /usr/local/etc/rc.d/mysql-server start
Starting mysql.
# cat /var/log/mysql/mysqld-error.log | grep ERROR
2015-12-13 03:16:51 4794 [ERROR] /usr/local/libexec/mysqld: unknown variable 'default-character-set=utf8'
2015-12-13 03:16:51 4794 [ERROR] Aborting
```

エラーの原因が分かりました。```default-character-set=utf8```が良くないようです。調べてみると、MySQL5.5からは```character-set-server=utf8```としないといけないそうです([参考](http://qiita.com/kazu56/items/462d4a11f59232186d7b))。my.cnfを修正したところ、無事起動できました。
Babel6でMochaとChaiを使ったテストを書く

はじめに
---
最近Reactとか触っています。Github上とかでいろいろなコードを見させていただくのですが、React周辺はReduxを使っているのでBabel使ってるけど、テストはFacebookのJestを使っていてあんまりBabel使えてなかったり、もはやテスト書いてなかったりします。
そもそもReactはフロントエンドのライブラリなので、あまりテストを書きたくなくなるのもわかります。ですが、Railsやっててもなるべくテストを書くことを尊重する雰囲気になってきているので、React周辺でもテストを書いていきたいのです。そこで、JestではなくてMochaとChaiを使ってテストを書くにはどうするべきなのかと思い、まとめました。

環境
---
node: v5.1.0
npm: 3.3.12
ディレクトリ構成

```
.
├── .babelrc
├── .eslintrc
├── package.json
└── test
    ├── setup.js
    └── test.spec.js
```

ライブラリのインストール
---
まず、表題にもある通りBabel、Mocha、Chaiをインストールしましょう。
`npm init -y`とかでpackage.jsonを作成しておいてください。
```
$ npm i --save-dev babel babel-core babel-preset-es2015 chai mocha
```
当然`babel`,`chai`,`mocha`をインストールします。この3つ以外にインストールしているものについて紹介します。
#### babel-core
`babel-core`の用途を説明します。
Mochaにオプションでコンパイラを指定するときに`babel-register`というライブラリを使うので、関連ライブラリをまとめてインストールできる`babel-core`をインストールします。`babel-register`だけインストールするのも良いのですが、そのうち他のライブラリを使う可能性があるので、`babel-core`がいいかと思います。
#### babel-preset-es2015
`babel-preset-es2015`の用途を説明します。
Babel6からは新しい機能はプラグインとして配布されるようになったので、ES6の記法を利用したい場合はプラグインを有効にする必要があります。なので、`babel-preset-es2015`を使って有効にします。

```json:.babelrc
{
  "presets": ["es2015"]
}
```
`.babelrc`にこのように記述することで、コンパイル時にES6の記法も使うことができます。これがないと`import`などがSyntaxErrorになってしまいます。

テストコマンド
---
`package.json`に以下のようにコマンドを追加します。

```json:package.json
{
  ...
  "scripts": {
    "test": "NODE_ENV=test mocha --compilers js:babel-register --recursive $(find test -name '*.spec.js')",
    ...
  },
  ...
}
```
Mochaにオプションでコンパイラを渡します。先ほどインストールした`babel-register`をコンパイラオプションに渡してあげます。
また、テストの記述するファイルをディレクトリ分けするために、`--recursive`オプションを指定します。ここでは単純にディレクトリを渡していません。というのも、Reactを記述する際に最終的にはコンポーネントのテストもするはずなので、そのためにモックを用意するコードを`test`ディレクトリに用意した時に、その中も読み込んでしまいます。それを避けるため、テストを記述しているファイルは`.spec.js`という名前をつけ、テストを便利にする振る舞いを記述したファイルはそのままのJSのファイル名で置いておくことで、いい感じになります。

テストコード
---
準備ができました。これでBabel6を使ってテストをかけます。
`test/test.spec.js`にテストを記述してみましょう。

```js:test.spec.js
import { expect } from 'chai';

describe('test', () => {
  it('1 + 2 = 3', () => {
    expect(1 + 2).to.equal(3);
  });
});
```

そして`npm run test`を走らせてみます。

```
  test
    ✓ 1 + 2 = 3


  1 passing (12ms)
```
こんな感じです。

まとめ
---
今回はBabel6でJSのテストを記述するというところに着目して書きました。なので、MochaやChaiの使用方法については詳しくは記述していません。Babel6になってからプラグインにいろいろ分かれたので、適切にプラグインをインストールして利用しないといけなくなりました。

僕もReactを使って何か書くときにテストを書く経験はあまりないので、MochaもChaiもあまり知りません。なので、調べたらまた書きたいと思います。
間違ってる、こうするといいよなどあったら是非教えてください！
MacとVirtualBoxにインストールしたWindows10でフォルダを共有

#はじめに
個人的にWindow10を一時的に評価したいと思い、
Microsoft Windows10 Enterprise EvalutionをMac上でVirtualBoxを動かして、
インストールすることにしました。
この記事は、2015/12/12現在で作成したものなので、各種バージョンなどはその時点のものに
読み替えていただければと思います。

その中の**MacとVirtualBoxにインストールしたWindows10でフォルダ共有**する方法について書いてみます。

##前提条件

私が使ってる環境です。

+ MacBook Air(13-inch, Mid 2013)
+ OS X El Capitan バージョン 10.11.1
+ メモリ 8GB 1600MHz DDR3
+ Windows10 Enterprise Evalutionのダウンロードは[ココ](http://qiita.com/areaz_/items/5cbadd6e9deffac0249f)を参照してください
+ VirtualBoxのダウンロードとインストールは[ココ](http://qiita.com/areaz_/items/b4bcf7702f051e80af4f)を参照してください
+ VirtualBox上でWindows10 Enterprise Evalutionはすでに動いています。

##VirtualBox側の共有フォルダ設定をします

　　手順を書いていきます。

１）Macのデスクトップ上に「common_vb」という名前のフォルダを作成する
２）Oracle VM VirtualBox マネージャーで、「Windows 10」を選択し、「設定」ボタンをクリック
　　![01_vb_setting.png](https://qiita-image-store.s3.amazonaws.com/0/105220/cfa99866-6b77-4748-1c0c-08c52399c5b7.png)

３）「共有フォルダー」を選択し、右側にある「＋」をクリック
　　![02_common_folder.png](https://qiita-image-store.s3.amazonaws.com/0/105220/9e722149-99b5-558d-f7fb-fd9cf7b612e5.png)

４）「フォルダーのパス」のコンボボックスをクリックし、先ほど作成した、
　　デスクトップの「common_vb」フォルダを選択し、「フォルダー名」に「common_vb」を入力し、
　　「自動マウント」と「永続化する」にチェックして、「OK」をクリック
　　![03_folderpath.png](https://qiita-image-store.s3.amazonaws.com/0/105220/2bee04fe-912a-791d-fada-5a440ca7897f.png)

５）元の画面に戻るので、「OK」をクリック
　　![04_common_folder.png](https://qiita-image-store.s3.amazonaws.com/0/105220/b46d7163-405f-4f20-757e-b8441c81a5fd.png)



##VirtualBox内のWindow10から共有フォルダが見えるように設定します

　　手順を書いていきます。

１）MacのVirtualVMメニューの「Device」→「Insert Guest Additions CD images ...」．をクリック

２）Windows10のフォルダーを開き、「CDドライブ」を開く

３）VBoxWindowsAdditions.exeを実行

４）ユーザーアカウント制御のダイアログが出るので「はい」をクリック

５）「Next」をクリック
　　![01_vm_add.png](https://qiita-image-store.s3.amazonaws.com/0/105220/113f5915-e9cc-558b-d2f5-183774c04931.png)

６）「Next」をクリック
　　![02_vm_add.png](https://qiita-image-store.s3.amazonaws.com/0/105220/9086bdb7-913a-6c65-36a5-1191469dc082.png)

７）「Install」をクリック
　　![03_vm_add.png](https://qiita-image-store.s3.amazonaws.com/0/105220/41e0a0f4-146b-2ac7-f678-6c64f97e8375.png)

８）「インストール」をクリック
　　![04_vm_add_install.png](https://qiita-image-store.s3.amazonaws.com/0/105220/46239bcf-4669-32d4-9182-65adffd59c30.png)

９）「Finish」をクリック
　　![05_vm_add_fin.png](https://qiita-image-store.s3.amazonaws.com/0/105220/a6a2bc2f-90ec-74ee-f2d8-fb8305356843.png)

すると再起動します。

##共有フォルダが見えるか確認

　　手順を書いていきます。

１）Windows10のフォルダを開く

２）赤枠で囲った「common_vb(¥¥vboxsrv)」が表示されていればOK

これで、MacとVirtualBox Windows10がファイルを共有することができるようになりました。
CentOS7でansibleを使ってnginx+wordpressを構築

ansible使ってnginx+wordpress環境を構築したので、メモ。

ansibleのplaybookは以下のものをそのまままるっと使わせてもらいました
[ansible/ansible-examples](https://github.com/ansible/ansible-examples)
⇛nginx+wordpress

このまま、hostの設定とパスワードとかの設定だけ書き換えればいけるかなと
思ったらMysqlとnginxのインストールでこけた


## Mysqlのインストール
CentOS 7 の標準リポジトリからはMysqlが消えたみたいで、
そんなパッケージねーよって言われた

```console
TASK: [mysql | Install Mysql package] ***************************************** 
failed: [MY-WORDPRESS] => (item=mysql-server,MySQL-python,libselinux-python,libsemanage-python) => {"changed": false, "failed": true, "item": "mysql-server,MySQL-python,libselinux-python,libsemanage-python", "rc": 0, "results": []}
msg: No Package matching 'mysql-server' found available, installed or updated
```

なのでmysqlインストールする前にmysqlの公式リポジトリを追加してあげる

```yaml:roles/mysql/task/main.yml
- name: Install Mysql repository
  yum: name=http://dev.mysql.com/get/mysql-community-release-el7-7.noarch.rpm state=present
```

上記を一番最初に追加

mysqlのyum リポジトリは以下のURLから
http://dev.mysql.com/downloads/repo/yum/


## Nginxのインストール
nginxはEPEL7からインストールできないのか
以下のエラーで怒られ

```console
msg: Error: Package: nginx-1.0.15-12.el6.x86_64 (epel)
           Requires: perl(:MODULE_COMPAT_5.10.1)
Error: Package: nginx-1.0.15-12.el6.x86_64 (epel)
           Requires: libpcre.so.0()(64bit)
```

こちらも同じく公式のリポジトリを追加してあげればいける

```yaml
- name: Install nginx repository
  yum: name=http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm state=present
```

リポジトリのURLは以下でいいのかな？？
http://nginx.org/en/linux_packages.html#stable

## 結果

```console
PLAY RECAP ******************************************************************** 
MY-WORDPRESS               : ok=28   changed=18   unreachable=0    failed=0  
```

やったー

ansible公式のサンプル集は綺麗に書かれているのでわかりやすくて
いい感じです
botに一番大事なものとは

[コミュニケーション Advent Calendar](http://qiita.com/advent-calendar/2015/communication) 13日目の記事です。

今回は僕の現在の職場である[DeployGate](https://deploygate.com)で実際に運用しているbot(dgatan)について、運用していく上での知見などを紹介します。
それってコミュニケーションと関係あるの？って質問がきそうですが、botとのコミュニケーションをいかに円滑に楽しく行うかなどの知見を共有します。

# dgatanって？

DeployGateで実際に運用しているbotのdgatanが担っている役割は、以下の通りです。

* DeployGateのリリースの自動化
* 定時リリースなどの各種時間になるとリマインドしてくれるcron的な役割

hubotによって開発されていて、Slackに住み着いています。
基本的にdgatanにはDeployGateのリリースを主担当として行ってもらっています。
このリリース自動化については、先日行われたAWSの勉強会にて発表した[資料](https://speakerdeck.com/henteko/deploygatefalsepu-duan-falsekai-fa-shi-qing)に書かれているので興味がある方は参照してください。

ちなみに2015/12/13現在のdgatanの姿はこんな感じです。とても可愛いですね ;)
<img src="https://qiita-image-store.s3.amazonaws.com/0/6717/48a2cddd-599e-20f3-92b0-27516ce6c0f3.png" width="180px;">

こんな可愛いbotだったら、人とはコミュニケーションを取るのが面倒くさい筆者でも毎日コミュニケーションとりたくなっちゃいますね！

# botに1番重要なのは<b>キャラ設定</b>

さて、そんなdgatanなんですが、運用していく上で重要なことがあります。
それが<b>キャラ設定</b>です。

このキャラ設定があるかないかで、そのbotに対する親近感や愛情が変わります。
親近感や愛情を感じないキャラクターを毎日目にするのはとても辛いことですよね……

キャラ設定を適切に行うことで、botに対する姿勢が変わると思います。
botを運用している方たちには、すぐにでもキャラ設定を固めて欲しいですね！

## dgatanのキャラ設定

dgatanのキャラ設定は単純明快です。

## 語尾が特徴的

dgatanのキャラ設定は単純です。
語尾が特徴的なんです。

![スクリーンショット 2015-12-08 18.40.02.png](https://qiita-image-store.s3.amazonaws.com/0/6717/5e305d19-a13a-7bc4-5186-e3fb8de5802a.png)
ですです！！！！可愛い！！！！！！！(元ネタは[えとたまのウリたん](http://etotama.com/character/uritan.htm)です)

「え、キャラ設定が重要って言ってる割にはそれだけ？？？？？？？」
はい、これだけです。
逆にこれからどんどん増やしていく余地を残すのも重要です。

最初のメンバーだけがキャラ設定をガッチガチに固めて、後から入ってきたメンバーにその設定を押し付けるのでは、その後から入ってきたメンバーはbotに対して親近感なんて湧きませんよね？
後から柔軟に設定を変更/追加することができるようにするのも、重要なことだと考えています。

## そもそもdgatanという名前は役職

さらに設定というのかどうかわかりませんが、dgatanという名前は役職です。
ちなみにこのdgatanが名前ではなくて役職名というのは会社のメンバーにも言っていない完全新作の設定です。(今作りました)
役職なので、中の人が変わるという世代交代があるのですが、既に現在のdgatanは3代目です。

以下が歴代dgatanです。

### 初代 dgatan

<img src="https://qiita-image-store.s3.amazonaws.com/0/6717/0f82229a-4ef4-2064-bb1a-99633632dd58.jpeg" width="180px;">

### 2代目 dgatan Mk.2

<img src="https://qiita-image-store.s3.amazonaws.com/0/6717/0c882f0b-0e8e-6b95-9444-ea62e4e5a2db.png" width="180px;">
ちなみにこの2代目の就任時間は歴代最短の3時間です。

### そして現dgatanである3代目 dgatan Mk.3

<img src="https://qiita-image-store.s3.amazonaws.com/0/6717/48a2cddd-599e-20f3-92b0-27516ce6c0f3.png" width="180px;">

皆さんはどのdgatanが一番お好きですかね？
こうやって並べると、割と2代目が可愛いのでは？って思えてきました。
ちなみに全て著者が作成したキャラクターデザインです。(2代目と3代目はiPad Proで作成しました)

# さいごに

botを運用していく上での知見を共有しました。
皆さんも是非botに面白い設定を考えてみてくださいね ;)
最速！MacでRuby on Rails環境構築

## homebrewをインストール
[http://brew.sh/index_ja.html](http://brew.sh/index_ja.html)

# Ruby編
## rbenvをインストール
```bash
$ brew install rbenv
$ brew install ruby-build
$ rbenv version
2.2.3 (set by ******)
```

## bash_profileに追記


```bash
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
$ source ~/.bash_profile
```

## Rubyをインストール
```bash
$ rbenv install 2.6.1
```

## rbenvのバージョンを切り替える
```bash
$ rbenv global 2.6.1
$ rbenv rehash
$ ruby -v
ruby 2.6.1p33 (2019-01-30 revision 66950) [x86_64-darwin17]
$ gem -v
3.0.1
```

## bundlerインストール
```bash
$ gem install bundler
$ bundle -v
Bundler version 2.0.1
```

# MySQL編（SQLiteを使用する場合は不要）
## MySQLをインストール
```bash
$ brew install mysql
```

## MySQL起動
```bash
$ mysql.server start
Starting MySQL
SUCCESS! 
```

# Rails編
## てきとうなワークスペース
```bash
$ mkdir ~/workspace
$ cd ~/workspace
```

## bundle init
```bash
$ bundle init
Writing new Gemfile to /Users/*****/workspace/Gemfile
```

## できあがったGemfileのRailsのコメントアウトを外す
```ruby:Gemfile
# A sample Gemfile
source "https://rubygems.org"

gem "rails"
```

## Railsインストール
```bash
$ bundle install --path=vendor/bundle
Fetching gem metadata from https://rubygems.org/...........
```

## Railsアプリケーション作成
```bash
$ bundle exec rails new .
```

聞かれたやつは全部 **y** で

## ライブラリインストール
```bash
$ bundle install --path=vendor/bundle
Fetching gem metadata from https://rubygems.org/...........
```

## Railsアプリケーション起動
```bash
$ bundle exec rails s
PC-10214:workspace a13161$ bundle exec rails s
=> Booting WEBrick
=> Rails 4.2.5 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2015-12-13 02:24:12] INFO  WEBrick 1.3.1
[2015-12-13 02:24:12] INFO  ruby 2.2.3 (2015-08-18) [x86_64-darwin14]
[2015-12-13 02:24:12] INFO  WEBrick::HTTPServer#start: pid=55996 port=3000
```

# おわり
[http://localhost:3000/](http://localhost:3000/) へアクセスしてみましょう！
【初心者向け】徹底詳解！cocoapod + RealmでToDoアプリを作るチュートリアル  (全4回)

**注意**
このチュートリアルの最初のページは[こちら](http://qiita.com/g08m11/items/e8a525490b5113c052a7)になります。

## !!手順2に行く前に!!

手順2ではpodコマンドやpod fileの話がメインになっていますので、

以下の記事などを参考に進めてください。

**pod コマンドの導入方法**

[初めてのCocoaPods](http://qiita.com/shishimo@github/items/d7f508e2489bcc68050e)

**podコマンドが上手くいかない場合の対応方法**

[[Swift]CocoaPodsを導入しようとして発生したエラー内容&対処方法(xcode6 beta4)](http://qiita.com/g08m11/items/1a8cfc8d67ef8de7a406)

[【詳解付き】【Podfile】pod installが途中で動かなくなる問題から解決まで](http://qiita.com/g08m11/items/1a0ff1580cca870ed209)



## 手順2 pod fileで外部ライブラリをビルドする。

## 手順2.1 作成したプロジェクトに移動し、vimを使ってPodfileの作成および更新を行う。

**コマンド**

```
vi Podfile

```

さらに「i」キーを押し、入力モードにして以下の内容を記入します。

**Podfileの設定内容**

```
target "TodoSample" do
    use_frameworks!
    pod 'RealmSwift'
end


```

入力後は「esc」キー押して編集モードに移行して「:wq」というコマンドで上書き + 強制終了を行います。

その後、podコマンドを使って外部ライブラリを読み込みます。

**コマンド**

```

pod install

```

**結果**

```

g08m11:TodoSample$ pod install
Updating local specs repositories

CocoaPods 0.39.0 is available.
To update use: `gem install cocoapods`
Until we reach version 1.0 the features of CocoaPods can and will change.
We strongly recommend that you use the latest version at all times.

For more information see http://blog.cocoapods.org
and the CHANGELOG for this version http://git.io/BaH8pQ.

Analyzing dependencies
Pre-downloading: `Realm` from `https://github.com/realm/realm-cocoa.git`, branch `swift-2.0`
Pre-downloading: `RealmSwift` from `https://github.com/realm/realm-cocoa.git`, branch `swift-2.0`
Downloading dependencies
Installing Realm (0.96.3)
Installing RealmSwift (0.96.3)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `TodoSample.xcworkspace` for this project from now on.
Sending stats
g08m11:TodoSample$

```

無事にインストールできましたら、「TodoSample.xcworkspace」というファイルが出来ます。
次回からは作成したプロジェクトではなくこちらの「TodoSample.xcworkspace」を開きます。
また、作成したプロジェクトは閉じましょう。
作成したプロジェクトが空いてる状態で「TodoSample.xcworkspace」を起動するとエラーが発生します。

## !!【注意】手順3に行く前にビルドを実行!!

ToDo.swiftのimport RealmSwiftでエラーが出る場合があります。
その場合は一度、xcworkspaceを開いた後に「commandキー + b」(ビルド)を実行することで解消されますので手順3に行く前に「commandキー + b」(ビルド)を実行してください。

## [前へ](http://qiita.com/g08m11/items/e8a525490b5113c052a7)
## [次へ](http://qiita.com/g08m11/items/6ee8916fa5c28eb141d4)
【初心者向け】徹底詳解！cocoapod + RealmでToDoアプリを作るチュートリアル  (全4回)



**こちらはページ末尾にある「次へ」というリンクを押していくことでページ遷移を行います。**

今まではデータのやりとりは基本的にNSUserDefaultsしか使ってきておらず、

CoreDataはちょっと使い勝手悪そうだなーと思い「Realm」を試すことにしました。

ちなみにCoreDataとRealmの比較はこちらの@mono0926さんが書かれた[RealmとCore Dataとの使い勝手比較](http://qiita.com/mono0926/items/08e8829a57d4b5f3f722)が

大変わかりやすいです。

## 環境などの前提条件
### Mac
 - MacBook Air (11-inch, Mid 2011)
 - Mac OSX Yosemite(バージョン10.10.5)

### Xcode
 - Version 7.0.1

### Swift
 - Apple Swift version 2.0 (swiftlang-700.0.59 clang-700.0.72)
 - Target: x86_64-apple-darwin14.5.0


## 手順
### 手順1 プロジェクトを作成する


![スクリーンショット 2015-12-12 12.45.42.png](https://qiita-image-store.s3.amazonaws.com/0/15812/bee1c7c5-e738-770e-718e-cd15cdcf8ba2.png "スクリーンショット 2015-12-12 12.45.42.png")

![スクリーンショット 2015-12-12 15.11.55.png](https://qiita-image-store.s3.amazonaws.com/0/15812/41d316d2-d4ab-0d76-02a5-46924e0007de.png "スクリーンショット 2015-12-12 15.11.55.png")

![スクリーンショット 2015-12-12 15.12.01.png](https://qiita-image-store.s3.amazonaws.com/0/15812/5cdad1f9-847f-bb28-f177-a5b64fff3859.png "スクリーンショット 2015-12-12 15.12.01.png")


![スクリーンショット 2015-12-12 15.12.25.png](https://qiita-image-store.s3.amazonaws.com/0/15812/26e615e1-f133-9ffd-68bb-1b7f8ea1fe99.png "スクリーンショット 2015-12-12 15.12.25.png")




## [次へ](http://qiita.com/g08m11/items/70be848f48619f87e812)
【初心者向け】徹底詳解！cocoapod + RealmでToDoアプリを作るチュートリアル  (全4回)

**注意**
このチュートリアルの最初のページは[こちら](http://qiita.com/g08m11/items/e8a525490b5113c052a7)になります。


## 手順4 Realmの永続化処理および、todoの機能を実装します。


**ソースコード**

```
import UIKit
import RealmSwift

class ViewController: UIViewController {
  
  @IBOutlet var todoNameText: UITextField!
  
  @IBOutlet var tableView: UITableView!
  
  var toDoItems:Results<ToDo>?{
    do{
      let realm = try Realm()
      return realm.objects(ToDo)
    }catch{
      print("エラー")
    }
    return nil
  }
  
  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
  }
  
  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
  }
  
  @IBAction func addToDo(sender: UIButton) {
    // 入力チェック
    if isValidateInputContents() == false{
      return
    }
    
    // ToDoデータを作成する処理
    let toDo = ToDo()
    toDo.name = todoNameText.text!
    
    // ToDoデータを永続化する処理
    do{
      let realm = try Realm()
      try realm.write{
        realm.add(toDo)
      }
      todoNameText.text = ""
    }catch{
      print("失敗")
    }
    tableView.reloadData()
  }
  
  private func isValidateInputContents() -> Bool{
    // ToDo名のデータ入力
    if let name = todoNameText.text{
      if name.characters.count == 0{
        return false
      }
    }else{
      return false
    }
    return true
  }
}

extension ViewController: UITableViewDataSource{
  func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    
    return toDoItems?.count ?? 0
  }
  
  func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    
    let toDo = toDoItems?[indexPath.row]
    
    let cell = tableView.dequeueReusableCellWithIdentifier("Cell") as! ToDoTableViewCell
    // Realmに登録したデータをラベルに値設定
    cell.nameLabel.text = toDo?.name

    print(toDo?.name)
    
    return cell
  }
}


```

**Realmの書き込み処理抜粋**

```
    // ToDoデータを永続化する処理
    do{
      let realm = try Realm()
      try realm.write{
        realm.add(toDo)
      }
      todoNameText.text = ""
    }catch{
      print("失敗")
    }
```










**実行結果**

![todo_image_8.gif](https://qiita-image-store.s3.amazonaws.com/0/15812/a56e28e9-cdaf-ea1f-cc29-42ff9f85e168.gif "todo_image_8.gif")



## 確認ポイント
### ここまでやってもtableviewに値が表示されない人は
tableviewのdataSourceなどの設定漏れが無いか確認してください。

**ViewController**

![スクリーンショット 2015-12-13 2.15.06.png](https://qiita-image-store.s3.amazonaws.com/0/15812/e9542a8f-ec7a-20eb-927a-622459e3dd40.png "スクリーンショット 2015-12-13 2.15.06.png")

**tableView**

![スクリーンショット 2015-12-13 2.14.51.png](https://qiita-image-store.s3.amazonaws.com/0/15812/34e7db1c-882d-436f-a6d4-ff470f29e123.png "スクリーンショット 2015-12-13 2.14.51.png")

**Cell**

![スクリーンショット 2015-12-13 2.14.33.png](https://qiita-image-store.s3.amazonaws.com/0/15812/2e7ba37f-67b6-e120-fe94-473cfc44ac1c.png "スクリーンショット 2015-12-13 2.14.33.png")

### 「import RealmSwift」が抜けていないか確認しましょう。

## [前へ](http://qiita.com/g08m11/items/6ee8916fa5c28eb141d4)
The following packages have pending transactions と出た時の対処法

ansibleでmysqlとかをインストール中にCtrl+c で実行を中断し、
もう一度実行させたら表題のエラーが出て怒られた。

```console
TASK: [mysql | Install Mysql package] ***************************************** 
failed: [MY-WORDPRESS] => (item=mysql-server,MySQL-python,libselinux-python,libsemanage-python) => {"changed": false, "failed": true, "item": "mysql-server,MySQL-python,libselinux-python,libsemanage-python", "rc": 0, "results": []}
msg: The following packages have pending transactions: mysql-community-server-x86_64

FATAL: all hosts have already failed -- aborting
```

yumの実行中に中断したからトランザクションが保留になってる？

ぐぐったら以下のコマンドを打てって書いてあったので実行したら解決

```console
# yum-complete-transaction --cleanup-only
読み込んだプラグイン:fastestmirror
Loading mirror speeds from cached hostfile
 * base: ftp.riken.jp
 * epel: s3-mirror-ap-northeast-1.fedoraproject.org
 * extras: ftp.riken.jp
 * updates: ftp.riken.jp
Cleaning up unfinished transaction journals
Cleaning up 2015-12-12.16:48.22
```

参考：http://www.cyberciti.biz/faq/rhel-centos-redhat-linux-there-are-unfinished-transactions-error/
Goでのシリアル通信でハマった事


こんばんは。
普段は組み込み系（主にWindowsCEやOSレス）のC, C++やってます。
Goはほぼ趣味でたまに触っている程度なので、お手柔らかに…。

# 対象の方

* Goでシリアル通信してみたい方
* Goで組み込みっぽい事をやってみたい方

# はじめに

Goでお手軽にサブGHz帯通信をしたかったので、[go-im920](https://github.com/tomoya0x00/go-im920) をつくりました。
インタープラン株式会社様の920MHz無線モジュール、IM920用の制御ライブラリです。

シリアル通信のライブラリは [tarm/serial](https://github.com/tarm/serial) を使わせて貰ったのですが、データ受信でハマったのでご紹介します。
開発はWindows上でおこなっています。

# 最初はリードタイムアウト

```go:main.go
sc := &serial.Config{Name: "COM4", Baud: 19200, ReadTimeout: 1 * time.Second}
buf := make([]byte, 128)
n, _ = sc.Read(buf)
```

上記のコードだと受信データサイズが128byteとなるかReadTimeoutするまで、Read()から復帰しません。
IM920は送信したコマンドに対し毎回応答を返してくるのですが、その度にReadTimeoutを待つのは時間がかかりすぎです。
かといって、ReadTimeoutを短くし過ぎると応答を受信できない可能性があります。
いくつかのコマンドを除き応答は固定長（4byte）だったので、とりあえず buf := make([]byte, 4) で逃げました。

# 次は応答受信しきる前に復帰

tarm/serial の [このコミット](https://github.com/tarm/serial/commit/0b54e010e77bc9d755ef7f3dfe0e98f3c14f5b3d) から、受信データがあれば即座に復帰するように挙動が変わりました。  
IM920はほとんどのコマンドに対して "OK\r\n" か "NG\r\n" を返してきますが、この変更で応答を1byte受信しただけ（例："O"）でRead()が復帰するようになってしまいました。困った。

# 受信インターバルタイマを有効にしようと思ったけど方針転換

Windowsの場合、例えば「受信処理トータルでのタイムアウト」と「データ受信間隔に対してのタイムアウト」が [設定](https://msdn.microsoft.com/ja-jp/library/windows/desktop/aa363190%28v=vs.85%29.aspx) できます。

Linuxの場合、[TERMIOS](https://linuxjm.osdn.jp/html/LDP_man-pages/man3/termios.3.html) でタイムアウト周りの設定が出来るようですが、Windowsのように「受信処理トータルでのタイムアウト」と「データ受信間隔に対してのタイムアウト」の両立はこれ単体ではできないようです。[^1]

当初はtarm/serialを変更して受信インターバルタイマを有効にしようと考えてましたが、Linuxで同等の挙動を実現するのは難しそう＆tarm/serialのREADME.mdに

>Please note that this is the total timeout the read operation will wait and not the interval timeout between two bytes.

と記載があったので、受信インターバルタイマ無しがtarmさんの期待値だと判断し、go-im920 内部でどうにかすることにしました。

1byteずつRead()することでtarm/serialのReadTimeoutは受信インターバルタイマとしてのみ使用し、time.NewTimer()で受信処理トータルでのタイムアウトを検知します。

```go:go-im920.go
func (im *IM920) receive(p []byte) (readed int, err error) {
	timer := time.NewTimer(im.readTimeout)
	defer timer.Stop()

	readedInitialbyte := false

	for {
		select {
		case <-timer.C:
			if readed == 0 {
				err = fmt.Errorf("error: Read failed: no data")
			}
			return
		default:
			n, rerr := im.s.Read(p[readed : readed+1])
			if rerr != nil {
				err = fmt.Errorf("error: Read failed: %s", rerr)
				return
			}
			if n > 0 && !readedInitialbyte {
				readedInitialbyte = true
			}
			if n == 0 && readedInitialbyte {
				return
			}

			readed += n
			if readed >= len(p) {
				return
			}
		}
	}
}
```

もっとうまいやり方があるのかもしれませんが、正常に動作しているようなので良しとします。

# 最後に

このネタ全然Goっぽくない…。

[^1]: 実はselect()併用すればできそう？
【超初心者用】システムチューニングの進め方

# はじめに
難しそ〜、イメージできないんだよね〜と、苦手意識のあるインフラ周りのあれこれ。

克服すべく本を買ったけど読まずに放置されてたので、年内には終わらせたいと読み始めたところの一部をまとめます。
いずれ、そのうちこの辺も知っておかないと・・ってことで。

今回読んだ本は、「[Webエンジニアが知っておきたいインフラの基本](http://www.amazon.co.jp/Web%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%81%AE%E5%9F%BA%E6%9C%AC-~%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%81%AE%E8%A8%AD%E8%A8%88%E3%81%8B%E3%82%89%E6%A7%8B%E6%88%90%E3%80%81%E7%9B%A3%E8%A6%96%E3%80%81%E3%83%81%E3%83%A5%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%BE%E3%81%A7~-%E9%A6%AC%E5%A0%B4-%E4%BF%8A%E5%BD%B0/dp/4839953554/ref=sr_1_1?ie=UTF8&qid=1449938311&sr=8-1&keywords=web%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%81%AE%E5%9F%BA%E6%9C%AC)」という本です。

# チューニングするってよく聞くけどなに？
システムチューニングと呼ばれるもので、キャパシティの向上のためにシステム構造の一部を変更し、処理効率を上げるために行う行為のことを指します。
チューニングするときは、インフラもアプリケーションも区別なく、両方みていく必要があります。

## チューニングを行う時の鉄則
- 「何を改善するか」を決め、ターゲットとゴールを明確にする
- とにかくボトルネックにアプローチ
- ボトルネックを知るためには「計測」すること
- ターゲットとゴールの設定、改善する、計測する、ボトルネックを見つけるのPDCAをいかに回すかが重要

# ボトルネックの見つけ方
探すフローとしては以下のようにすることを紹介されてました。
```
1. ターゲットとゴールを決める
2. データフローを確認する
3. データフローのポイントごとに処理内容を確認する
4. システムリソースを確認する
```
基本中の基本ですね。日々の問題解決のときと同じじゃんと思ったのは私だけでしょうか？
データフローの確認の仕方は本に詳しく書いてあったので、実践してみるのが良さそう。。

## データフローの確認するポイント
- プログラム外や外部システムとの通信箇所や内容
- exec関数やsystem関数といった外部プログラムの呼び出し
- ディスクの読み書き部分
- 配列やリストのサイズが大きい、または、ループの回数が多い

アプリケーションのソースコードを見て調べていく。

## システムリソースの確認するポイント
- CPUの性能を使い切ってないか？
- メモリ容量を使い切ってないか？
- ネットワーク帯域を使い切ってないか？
- ディスク帯域、IOPSを使い切ってないか？
 
これらをリアルタイムで確認したいときは、topやiostatなどのコマンドを使う。
先輩が以前詳しく書いてくれているので、参考にすると良さそう。
[【初心者向け】サーバが重い時に確認すべきこと & サーバの基礎知識](http://qiita.com/moriyaman/items/366f7eca5eda369eaf32)

※性能面だけでなく、意図しない制約がかかっていないかも確認
ex)「Too many open files in system」と出たときは、OSの制限である「ulimit」の「open file」が条件に達したことを示す。

以下のようなことが起きていると怪しいポイント
- 値が一定値で推移している → 性能条件に達している可能性
- 前日、先週の同じ曜日、先月と同じ日と動きが大きく違う → 起こるべき変化が起きているか、予想外のことがおきていないか確認
- 値の変動が激しい → データの取得方法、または、データに問題がある可能性

## アプリケーション側の確認方法
基本的にはプロファイラと呼ばれる、アプリケーションの性能解析ツールを使うのが一般的なのでしょうか？
プロファイラを使うと、メソッドの呼び出し回数や時間、メモリやCPUの使用量、スレッドの状態がが取れます。
オープンソースが結構あるみたいなので、活用するといいかも。

# あとがき
本人的には「チューニングが必要だ」って話を聞いたら、どんなことをするのかがイメージできるレベルまでは理解できたので、よかった。
実際にやってみると、ある程度正常な数値を知っていないとこれ本当にボトルネックとしていいのかなって悩みそうですね。
いざ必要になる前になんとなくでもやっておかねば！(｀・ω・´)ｷﾘｯ
決定版？「Juliaでジュリア集合を描く」

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

2年前の記事  [「Juliaでジュリア集合を描く」 ](http://qiita.com/anmitsu/items/0f85a6427b4224a2d56a )を添削して動くようにするまでの顛末を書きました。

# 本文
本文は nbviewer におきました → http://nbviewer.ipython.org/gist/tenfu2tea/fb8741db797aa42b6585
nbviewer で読めない場合は gist で見てください → https://gist.github.com/tenfu2tea/fb8741db797aa42b6585#file-julia-sets-in-julia-lang-essay-ja-ipynb

# Juliaのコンソールでは関数を再定義できません
記事でも指摘しましたが、…
現行 (ver 0.4.2)の Julia のコンソール (REPL) では、関数を再定義しても、上書きされず、最初の定義のままです。Jupyter を使っている場合でも同様です。よくあるスクリプト言語 (Pythonや Ruby)とは振る舞いが違います。十分注意してくださいね。
Vue.jsで作るタグ入力フォーム

## タグ入力フォームを作る

Webサービスでよくタグを入力する機能がよくあると思います。Qiitaにも入力するところがあると思います。Qiitaではタグを作ると入力した言語の背景がかわってとてもいい感じです。

自分でも作ってみたいと思い試行錯誤してみました。Qiitaとか参考にすればいいとあとで気づいたのであまり筋のいい解では無いと思いますが、こういう実装もあるんだよ程度に思って頂けると幸いです。

## 動作

動作の様子です。スタイルが適当なのは勘弁してください。

![tag.gif](https://qiita-image-store.s3.amazonaws.com/0/11510/b74ede14-3ec2-3c33-15b7-b6b202000315.gif)

https://jsfiddle.net/tomato360/nj6c8f3o/29/

少しわかりにくいのですがエンターキーでタグを確定しています。となりの`x`を押すとタグが削除されます。

## 実装

```html

<div class="text-area">
  <div class="tag-list">
    <span class="tag" v-for="tag in tags">
      {{tag.name}}
      <span class="delete" v-on:click="delete(this)">x</span>
    </span>
  </div>
  <div class="input-area" contenteditable=true v-on:keydown.enter="decide_tag">
  </div>
</div>
```

```css
.text-area{
  width: auto;
  height: 20px;
  background: white;
}

.tag-list{
  display: inline-block;
  margin-top: 0px;
}

.input-area{
  display: inline-block;
  width: 100px;
  height: 20px;
  background: white;
  &:focus{
    outline: 0;
  }
}

.tag {
  padding: 2px;
  background: yellow;
}

.delete {
  cursor: pointer;
}
```

Vue.jsを用いているのでディレクティブがついています。

キモはタグのリストと入力フォームを分けている点で、これでタグが増えたら入力フォームが自動的に右側にスライドします。

`input`タグは使わず`div`の`contenteditable`を`true`にして入力を可能にしています。これだと入力フォームっぽくならないので全体を包んでいるタグの背景を白くしています。

```js
$(document).ready(function() {
  var tag = new Vue({
    el: ".text-area",
    data: {
      tags: []
    },
    methods: {
      decide_tag: function(e) {
        this.tags.push({
          name: e.target.textContent
        });
        e.target.textContent = "";
      },
      delete: function(vm) {
        this.tags.splice(vm.$index,1);
      }
    }
  });
});

```

Vueのほうは簡単に実装しています。タグの一覧を`data`のプロパティに配列としてもって、エンターキーを押した時に発火する`decide_tag`で`push`しています。タグを消すときはタグの配列を`splice`して削除しています。

あんまりいけてないのは`input`タグを使っていないので`v-model`が使えないことで、`v-model`だと`decide_tag`で`e.target.textContent`からデータをとらないですむはずです。本来はViewModelからViewを参照するのはよくないので設計がよくないと言えますね（ならやるなってね）。

どうして`input`を使いたくなかったかというと`input`を使うなら`input`を覆うオーバレイにタグを描画して`input`を隠す必要があるからで、何となくそれが気に入らなかったからです。とはいえそうすると設計的によくない実装になるので今となってはオーバレイする方法がよかったかもですね。

あとinputを使わなかったことで`form`の`submit`が使えないです。タグを入力し次第保存する方針でなければ`input`を使った方が素直で良いですね。

## おわり

以上Vue.jsで作るタグ入力フォームでした。自分で書いていてなんですけどあんまりいけてませんね。入力するところが右側にスライドするところなんかはうまくいったかなと思ったのですが。

もう少し筋の良いやり方でリベンジしたいところです。
ポールグレアムのアキュムレータジェネレータをJ言語で解く

アキュムレータジェネレータについて
====

[技術野郎の復讐][nerds]という記事の付録で、Paul Graham氏は「[アキュムレータジェネレータ][accgen]」というプログラミングパズルを出しています。
[nerds]: http://practical-scheme.net/trans/icad-j.html
[accgen]: http://www.paulgraham.com/accgen.html

* 好きなプログラミング言語で、数`n`(`int`にかぎらず一般の数)を受け取り、関数を返す関数`foo`を定義すること。
* `foo`の返す関数は「数`i`を受け取り、`n`に`i`を足して代入し書き換え、それを返す」という物。

プログラミング言語のパワフルさを測るためのもので、氏のLisp方言であるArcでは次のように解けるそうです。

```clj:accgen.arc
(def foo (n) [++ n _])
```

JavaScriptではこうでしょうか。

```coffeescript:accgen.js
foo = n => i => n += i
```

設問からしてもう変数のない純粋な言語や関数からクロージャを返せない言語は対象外です。J言語はクロージャが作れません。関数を返す関数はJ言語で一応書くことはできますが、ローカル変数は消えてしまうため毎回`n`を忘れてしまいます。

```j:accgen-expanded.ijs
NB.# 冒頭のJavaScriptの直訳
foo =: adverb define
  n =. m
  monad : 'n =. n + y'
)
```

ただ、多少条件を緩めるような段落があるのでこれに甘えます。

> OO言語では、一つだけメソッドを持つクラスを定義して メソッドが参照する変数をクラスのフィールドに置き換えれば、 制限はあるものの、 クロージャ(定義されたスコープ内の変数を参照できる関数)を模倣することはできる。
> そうすることは、レキシカルスコープを完全にサポートする言語ではコンパイラが やってくれるような作業をプログラマが自分でやるようなものだし、 複数の関数が同一の変数を参照する場合なんかは使えないけれど、 この例のような簡単な場合は十分だ。
> -- Paul Graham [技術野郎の復讐][nerds]

J言語での解答
====

一応、Jも一行で解くことはできます([J言語の公式Wikiの記事][wiki]より)。
[wiki]: http://www.jsoftware.com/jwiki/Guides/Lexical%20Closure

```j:accgen.ijs
foo =: 1 : '(a[n__a=.m[a=.18!:3$~0)&(4 :''n__x=.n__x+y'')'
```

標準のエイリアスを使ってわずかに読みやすくし、改行してコメントを入れると次のようになります([信じ難いこと][rubyma]に、この言語のコメントは`NB.`で始まります)。
[rubyma]: https://magazine.rubyist.net/articles/0019/0019-Legwork.html

```j:accgen-expanded.ijs
foo =: adverb define               NB.# 副詞 foo を定義
  a =. cocreate $~ 0               NB.# 新ロケールを生成、その名前をローカル変数 a に代入
  n__a =. m                        NB.# a の指すロケールに属す変数 n に左辺を代入
  a & (dyad : 'n__x =. n__x + y')  NB.# 左辺の指すロケールに属す変数 n に右辺を加算する無名の二項動詞を作り、その左辺をaとした単項動詞を返す
)
```

こう定義した`foo`は、次のように呼び出せます。

```j:REPL
   acc =: 4 foo NB.

   acc 0
   a
(<,'0')&(4 : 'n__x=.n__x+y')
4
   acc 3
7
   acc 1
8
   acc 0
8
```

クロージャがない
----

「用語はよくわからないけど、無名関数みたいな物を作れるのならロケールがどうとかややこしいことをする必要があるのだろうか？」と思うかもしれませんが、[J言語][j]は無名関数が作れるだけでクロージャは作れません[^1]。次のようにしてもエラーになります。

ご存知のように、J言語は[オブジェクト指向言語です](http://qiita.com/snipsnipsnip/items/7a5918c870908380b2ae)から、オブジェクトを作ってメンバ変数として持つことはできます。とはいえ、Jのオブジェクト指向はちょっと変わっているので、全く引用どおりの方法という訳ではありません。JavaScriptで訳すと次のようになります。
[^1]: 多分実装する気がないだけだと思います
[j]: http://www.jsoftware.com/

```coffeescript:hoge.js
var foo = (m) => {
  var a = {}
  a.n = m
  return ((x, y) => x.n += y).bind(void 0, a)
)
```

オブジェクト(にあたる匿名ロケールという物)をその場で[作り][cocreate]、それを[&(Bond)演算子][bond]で作った二項動詞に結びつけています。
[cocreate]: http://www.jsoftware.com/jwiki/Studio/Locales?highlight=%28cocreate%29#cocreate
[bond]: http://www.jsoftware.com/jwiki/Vocabulary/ampm

しくみ
-----

Jの代入演算子には、[`=.`][isloc]と[`=:`][isglob]の二種類があります。前者はローカル用、後者はグローバル用です。クロージャは作れないのでグローバル変数を使うことになります。上の解法では、匿名のロケール`a`を生成して、その中のグローバル変数`n__a`を書き換えています。
[isloc]: http://www.jsoftware.com/jwiki/Vocabulary/eqdot
[isglob]: http://www.jsoftware.com/jwiki/Vocabulary/eqdot

(書きかけ)

リンク
-----

* [Paul Graham： 技術野郎の復讐 ---Revenge of the Nerds--- (Shiro Kawai訳)][nerds]
* [Accumulator Generator][accgen]
* [J language][j]
* [Guides/Lexical Closure - JWiki][wiki]
Xperia Z3 compact SO-02G バックアップ　リストア

***
２０１６年０８月１８日 追記：結局、これも失敗したりファイルが大きかったりして、使ってないです。。。
良いソフトか手順ないですかね～～～～
***

# 目的：Xperia Z3 compactの動きが最近おかしいと思い始めたので、初期化前のデータバックアップリストア方法を確立しておきたかった。
いろいろなバックアップソフトがあるのだが、何を使っていいのかよくわからなかった。
あと本当にめんどくさいのが、画像の保存先ディレクトリがアプリごとに内部ストレージで違うのをやめてほしいよね。

ドコモバックアップソフトとかheliumとかJSbackupとかあったけども、やっぱり『Sony PC companion（windows用）』がメーカーから出ていたので、バックアップソフトとしては一番しっかりしていると思う。

以前、ドコモバックアップで画像バックアップしたら、ファイル名が連番になってしまった事があって、ドコモバックアップは信用していないのだ(笑)

#実施内容
・Sony PC companionを公式サイトからダウンロードインストール
・上記ソフトインストール後にバックアップリストアメニューを選択する
・促されるので、データ通信用USBケーブルでパソコンと接続
・バックアップ対象を選択することが出来るが、手動にチェックをいれて次へ
・手動でフォルダツリーから選択できるのでする。
・バックアップ完了後、1ファイル出来上がる。


※公式サイト
http://www.sonymobile.co.jp/support/so-02g/
Linux(CentOS)の時計を合わせる


VM環境はハード時計が無いので、しばらく落としていたりすると時計がずれます。ntpで強制的に合わせる方法

###ntpインストール

なければインストール。

```bash
yum install -y ntp
```

###時間を合わせる

ntpサーバとしてはntp.nict.jpを指定。

```bash
ntpdate ntp.nict.jp
```
iOSのAdmobモジュールを作ったよ（.frameworkをモジュールで使う）

こんにちは、[coe](https://github.com/coe)こと@coffeegyunyuです。
この記事は、 Titanium Advent Calendar 2015 の13日目の記事になります。

僕がTitaniumを始めようと思ったきっかけはクロスプラットフォームが魅力と思ったからなのですが、
コードがiOS寄りだったり、モジュールを探してもiOSのモジュールしかなかったすること、ありませんか？Android派のみなさん。
今回はそんなiOSのAdmobモジュールについて書きます。
ここまで大体2014のコピペ

#Admobモジュールについて
そもそもすでに[謹製モジュール](https://github.com/coe/ti.admob)は存在するのですが
このモジュールはSDKのバージョンが古く、
しょっちゅうSDKアップデートしろよログが出たり
最近の流行りであるインタースティシャルが使えなかったりするので、
ここはアップデートしなければと思い立った次第です。

#というわけで
作りました。
https://github.com/coe/ti.admob
一通りドキュメントにも書いたのですが、
`Admob.startAdMobIntersBanner("YOUR Interstitial AD UNIT ID HERE")`
でインタースティシャル広告を読み込んで、
`
Admob.addEventListener("interstitialDidReceiveAd", function(e) {
  Admob.presentInterstitialFromRootViewController();
});
`
のような感じで、広告受信を検知して、インタースティシャル広告を出すことができます。

##使用上の注意
このモジュールのビルド及びモジュールの使用には最新のAdmob SDKが必要です。
https://developers.google.com/admob/ios/download
中身のGoogleMobileAds.frameworkを、/Library/Frameworks/にコピーしてください。
こうすることによってモジュールのビルドや使用ができるようになります。

1.9.0のAdmob SDKはスタティックライブラリだったのでモジュールに直接含めることができたんですが、最新のSDKはフレームワークであるがゆえの対処です。

##もう一個ついでに注意
Admobは一部広告にURLスキームを利用するようですが、iOS9では[こういう問題](http://qiita.com/Night___/items/60355d21951cffbef51b)が存在するため、
tiapp.xmlの<ios><plist><dict>タグ内に以下を書くと幸せになれるかもしれません。
`
<key>LSApplicationQueriesSchemes</key>
                <array>
                    <string>itms-books</string>
                    <string>kindle</string>
                </array>
`
日本百名山登頂チェックリスト on Confluence

これは Atalssian ユーザーでかつ登山をこよなく愛する山ガール・山ボーイに捧げるものです。すみませんが、技術的なTIPSの話はありません。

# 日本百名山とは

日本百名山とは、むかーしむかし、日本の登山家（深田久弥）が品格・歴史・個性を兼ね備え、標高1,500M以上の美しい山々を自著で紹介するために選定したことことに由来します。著者の主観が相当入っており、日本にはこれ以外にも美しい山々はたくさんありますが、登山初・中級者にとって、チャレンジしたい山を選ぶ時の基準として大きな指標となっております。

日本百名山は北は北海道の利尻島から、南は鹿児島の屋久島まであり、すべての山を制覇するにはお金も時間もかかります。そして地元に近いところから少しづず登頂し、長い時間が経つうちに、いつどの山にいったのか記憶が曖昧になったりします。

# 日本百名山登頂チェックリストページのインポート

よって今回は、自分のために Confluence 上に作成した 百名山登頂チェックリストのページを共有します。

[こちら](https://drive.google.com/file/d/0B2sYLYGhelX9cG1oZHJaVVRaN1E/view?usp=sharing)から、スペースバックアップファイル (XML) をダウンロードしてください。
これを、自分の Confluence 上で「ツールチップアイコン」＞「一般設定」>「Import Spaces」で 「File to Import」 で指定してインポートを行います（システム管理者権限が必要です）。

これで 「日本登山プロジェクト」というスペースがインポートされます。このスペースには以下のような「日本百名山登頂チェックリスト」が１ページだけ入っております。
![Checklist](http://f.st-hatena.com/images/fotolife/n/nyumi/20151213/20151213002256.png?1449933793)



このページにはチェックボックス付の百名山のリストがありますので、うまく登頂できたら、チェックしましょう。はい、これだけです。山のデータは [Wikipedia](https://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E7%99%BE%E5%90%8D%E5%B1%B1) から頂いています。

# さらにJIRA で管理する
JIRA Core を利用するとさらに登山のプロセスを細かく管理できます。

### 課題
日本百名山をそれぞれ課題として登録します。都道府県や標高のカスタムフィールドを追加するとよいでしょう。先ほどの Confluence のページから、山の名前を選択し ![JIRA](http://f.st-hatena.com/images/fotolife/n/nyumi/20151213/20151213004505.png?1449935117) アイコンをクリックしてそのまま課題を作成してもよいでしょう。
![Issues](http://f.st-hatena.com/images/fotolife/n/nyumi/20151213/20151213002632.png?1449934013)

### サブタスク
遠い山に行くには飛行機や新幹線のチケット、宿の手配が大変ですからね。サブタスクを切るといいでしょう。
![Issue](http://f.st-hatena.com/images/fotolife/n/nyumi/20151213/20151213002834.png?1449934429)


### ワークフロー
シンプルにこんな形で切るといいでしょう。
![Issue](http://f.st-hatena.com/images/fotolife/n/nyumi/20151213/20151213002833.png?1449934558)

# 終わりに

社内の登山部の Confluence スペースに個人別にリストを作成してお互いに進捗状況を共有してもいいかもしれませんね。

私は 5年前に登山を始めたにもかかわらず、百名山はまだ14座しか登頂しておらず、このリストを見ると溜息が出ます。来年はたくさん登るぞー！
CloudWatch Dashboard のススメ


## はじめに

主に、使ってない人、これから使いたい人向けです。
CloudWatch Dashboard は今年の10月(re:Invent2015のちょっと前)にリリースされましたね。

[公式ブログの記事](http://aws.typepad.com/aws_japan/2015/10/cloudwatch-dashboards-create-use-customized-metrics-views.html)

既存のCloudWatchのメトリクスを並べるだけだでなく、いろいろと便利な機能もあり、CloudWatchをメインで利用していた人には手軽に便利になると思います。
※ただ、Zabbix やその他監視ツールでしっかりとした監視をしている方々には物足りないかもしれませんね。

 
わかるけど、どういった時に便利なんだろう？ とイメージがついていない場合もあるかと思いますので、
実際の簡単なアプリケーションを例にあげて説明してみたいと思います。

## 対象のアプリケーション構成

以下の構成を例にします。

* 前段にELB
* AutoScalingGroupで管理されたWebサーバクラスタ
* Webサーバ上で動くアプリケーションは MySQL(RDS) を利用
* 各WebサーバではNFSをマウント
* アプリケーションのログは CloudWatch Logs へ送信

![SampleApplication.png](https://qiita-image-store.s3.amazonaws.com/0/30588/fff8940d-3688-a4d5-6c1b-0db002bafbfc.png "SampleApplication.png")


## なにかあった時の調査

「レスポンススピードがちょっと遅いかも？」 と気になったとします。
そのような時は、このシンプルな構成でも色々と原因が考えられます。

* Webサーバーの処理が重くてCPUが・・
* DBが重い
* NFSがなんか変

既存のCloudWatchメトリクスだと、一つ一つメトリクスを選択して、見て、といったことを何度もやらねばならず、少々面倒でした。
(実際インスタンスID調べてとか、URLコピーして、とかグラフの集計の方法変えてとか、、)

システム的にボトルネックになりそうな箇所を俯瞰して見たいですよね。

## CloudWatch Dashboard でみてみる

Dashboardの作り方は、公式ドキュメントやクラスメソッドさんのブログとかにも書いてあるので、詳しくはそちらで見てください。

こんなDashboardを作りました。(インスタンスIDなどは黒塗りにしています)
※アプリケーションのレスポンスタイムはCloudWatchLogsのFilterで作成しています。


![スクリーンショット 2015-12-12 23.19.13.png](https://qiita-image-store.s3.amazonaws.com/0/30588/66a32eb5-5ed7-f3ed-e8b0-1bc6847c672b.png "スクリーンショット 2015-12-12 23.19.13.png")


これで、各時間帯の アプリケーションのレスポンスタイムや、ELBのバックエンド(ここではWebサーバ群)が5XXエラーを返している数、
DB、NFSのCPU使用率やNetWorkIOをまとめて見ることができます。


また、気になる部分にマウスカーソルを当てると、Dashobard上の他のメトリクスも同時刻を示してくれるので、とても追いやすいです。


以下のような感じです。赤い矢印がマウスカーソルだと思ってください。
マウスカーソルで指し示した時間に他のグラフでも線が出てるのがわかると思います。

![スクリーンショット 2015-12-12 23.22.33.png](https://qiita-image-store.s3.amazonaws.com/0/30588/ce830c3f-514f-ed22-812b-922465d59ae5.png "スクリーンショット 2015-12-12 23.22.33.png")

関連部分を追いやすいですね。

また、よく見たい部分をドラッグすれば全部のメトリクスで拡大することもできます。
(Actions => Link graphs にチェックが入っている必要あり)

## まとめ

ここまで書いてあれですが、この例では NFSのネットワークやCPUが多少上がってたけど、別に問題なさそうなくらいで、
特に連動した原因は見えませんでしたが、取得する項目を増やしていけばなにかあったときに追いやすいかと思います。

CloudWatchも LogsのFilterと Alarm で自動化できる部分は自動化して、実際に見て確認する時はDashboardで、とやると色々と楽になりそうですね。

どんどん便利になっていいなと思います。
超簡単：Rでお手軽に多変量データのグラフィックスを作る

フリーの統計解析ソフトRは、簡単な統計分析から機械学習系のライブラリまで、多様な機能を備えていますが、よく使われるのは頻度論的な多変量の解析なのではないかと思います。
（重回帰分析とか主成分分析とか、そういうやつです）
そして、多変量解析を始めるにあたっての最初のステップは「変数間の関係を把握する」ことです。
今日は、Rの多様なグラフィカル表現の中から、多数の変数の関係をパッと把握するのに気軽に使えるものを紹介します。

***
**紹介する機能一覧**
①リッチな散布図を作る
②散布図行列で全変数のペア同士の関係を一望する
③条件付きプロットを作る
***

# リッチな散布図を作る
どんなデータを扱うにしても、とりあえず散布図を描いてみると良いというのはよく言われるところです。
その際大事なのは「一目で情報の全体感がつかめる」ことだと思います。
ここでは、多変量データの中から２変量を選んで
・散布図
・回帰直線
・片方の変数のヒストグラム
・もう片方の変数の箱ヒゲ図
の４つを一気に書きます。

※以下では、Rの組み込みデータの中から簡単なものとしてtrees（アメリカ桜の周囲、高さ、木材量のデータ）を使います。

```
attach(trees)                       //扱うデータを固定
names(trees)			  	  　    //含まれている変数を確認
par(fig=c(0,0.7,0,0.7))		　　 　  //グラフを描く領域を指定　	
plot(Height,Volume, lwd =2)　　　　  　//散布図を描く
abline(lm(Volume ~ Height), lwd =2)  //回帰直線を描く
lines(lowess(Volume~Height),lwd =1)　//局所重み付き回帰直線を描く
par(fig=c(0,0.7,0.65,1),new = TRUE)　//ヒストグラムを描く位置を指定
hist(Height, lwd =1)			 	//ヒストグラムを描く
par(fig=c(0.65,1,0,0.7),new = TRUE)　//箱ヒゲ図を描く位置を指定
boxplot(Volume, lwd = 2)			//箱ヒゲ図を描く
```
そうするとこんな図になります。

![richplot.png](https://qiita-image-store.s3.amazonaws.com/0/103543/6833a73c-b0ac-96ab-6804-fb9a35fe8478.png)

局所重み付き回帰直線とは、ここでは

```math
y_i = g(x_i) + ε_i
```
という形の方程式です。
gは平滑化関数、εは平均0・分散定数のランダム定数で、要するに
単なる最小二乗法による線形回帰のムリなあてはめを緩和する効果を持ちます。
グラフのぐにゃっと曲がっているラインです。


# 散布図行列で全変数のペア同士の関係を一望する

上のサンプルは多変量変数の中から特定のペア（VolumeとHeight）を選んで作ったものですが、すべての組み合わせについて一望するやり方もあります。
（まあ、多変量といってもこのやり方だと５、６変数までが限界ではあるのですが。。）
とっても簡単です。

```
pairs(trees,panel = function(x,y)
       {abline(lsfit(x,y)$coef, lwd = 2)     //回帰直線を加える
       lines(lowess(x,y), lty = 2, lwd = 2)　//局所重み付き回帰直線を加える
       points(x,y)})
```

そうするとこんな感じになります。

![pairs.png](https://qiita-image-store.s3.amazonaws.com/0/103543/5537edd5-8e52-bc8d-6a44-c47fc048dc7a.png)


これで全体を一望して
・各変数間に相関があるか
・外れ値はあるか
・変数がクラスターをなしているか
みたいなポイントをパッとチェックするわけです。


#条件付きプロットを作る

最後に、条件付きプロット（コプロット）を紹介します。
これは、複数ある変数のうち一つの値を一定のレンジごとに固定して、
その範囲内で、残った変数のペアの関係を見るものです。

コードはこんな感じになります。

```
coplot(Volume~ Height | Girth,
    panel = function(x,y,col,pch)
    panel.smooth(x,y,span=1))
```

![coplot.png](https://qiita-image-store.s3.amazonaws.com/0/103543/b331f1ce-a9a9-a38f-29bd-fb44f088bd77.png)

ここでは、Girthを固定して、Girthの取る各レンジごとに、
HeightとVolumeの関係を視覚化しています。
図では、HeightとVolumeの局所重み付き回帰直線を加えてあります。
こうすることで、Girthのレンジに応じて、HeightとVolumeの相関関係に変化があるかどうかを確認できます。

* * *
というわけで、簡単ですが、３つのグラフィック化方法を紹介しました。
Rのグラフィック表現には色々なヴァリエーションがありますが、この３つだけでも、変数間の関係を見る最初のステップしてかなり役にたつと思います。
Twitter Bootstrap Tips (Mixin編)


# はじめに

この記事は株式会社アイスタイルアドベントカレンダーの12日目の記事です。

入社３ヶ月目、社会人２年目の@nakahararuuがお送りします。

弊社のアドベントカレンダーも中盤に差し掛かりました。
ここまで皆さんが非常にレベルの高い記事を書いてくれていますので、そろそろ駆け出しエンジニアに易しい記事があっても良いはずです。
そう、例えばTwitter Bootstrapとか！

今回はTwitter BootstrapのTipsのひとつとして、Mixinの利用について書こうと思います。


# Mixinの概要
CSSフレームワークであるBootstrapはCSSプリプロセッサであるLessを用いて開発されています。
BootstrapはCSSの他Less・Sass版のソースを提供しており、これらをプロジェクトに組み込んで利用することが可能です。

これによって得られるメリットの一つに、Bootstrap内で定義されているLess・SassのMixinを使用できるようになる点が挙げられます。

グリッドシステムなど、使い慣れたBootstrapのコンポーネントをBootstrap独自のclass名に縛られることなく利用できるため大変便利です。


# Mixin定義をImportする
※ 以下、Sass版の解説を行いますがLess版も基本同様かと思われます。

まずはプロジェクトにSass版のBootstrapを導入します。
例としてBowerを利用する場合は、プロジェクトのルートディレクトリで`bower install  --save bootstrap-sass`としてインストールしましょう。

インストール後、以下のように`bootstrap.scss`をimportして準備完了です。(パスは環境に応じて読み替えてください)
```@import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';```

ここで読み込む`bootstrap.sass`がMixinや定数が定義されたファイルをまとめて`@import`してくれるのですが、全てのファイルを読み込む必要が無いのであれば内容を編集して取捨選択することもできます。

# オススメMixin
## グリッドシステム
まずはお馴染みのグリッドシステムです。

少々極端ですがレスポンシブデザインを意識してグリッドシステムを使うとclass属性が冗長になってしまうことがあります。

```html:Mixinを使わないhtml
<div class="row">
    <div class="col-lg-8 col-md-10 col-sm-10 col-xs-12">column 1</div>
    <div class="col-lg-8 col-md-10 col-sm-10 col-xs-12">column 2</div>
<div>
```


Mixinを活用すると以下の通り、全てHTMLから追い出すことができました。

```html:Mixinを活用したhtml
<section>
    <article>content 1</article>
    <article>content 2</article>
</section>
```

```sass:sass
section {
    @include make-row();
    article {
        @include make-lg-column(8);
        @include make-md-column(10);
        @include make-sm-column(10);
        @include make-xs-column(12);
    }
}
```
## グラデーション
開始部分の色、終了部分の色、グラデーション開始位置（％）、グラデーション終了位置（％）の順で指定します。

```sass
.example {
  @include gradient-horizontal(#1834cc, #1dc937, 0%, 100%);
}
```

## Clearfix
サポートclassを集めたライブラリでよく見られますが実装上の都合に起因するclass名ですので、できればマークアップ中に含めたくありません。

```sass
.element {
  @include clearfix();
}
```

## センタリング

```sass
.element {
  @include center-block();
}
```

# 終わりに
書いているうちに全然知識が足りないことに気付いてしまい尻すぼみになってしまった感が否めませんが…

Mixinを活用することでスタイリングとマークアップの両方から冗長な記述を減らし、すっきりとしたコードを保つことができます。

Mixinに関する日本語の情報は案外少ないと思いますのでこの機会に使えるMixinをチェックしてみてはいかがでしょうか。全てではないようですがBootstrapのドキュメントでも言及されています。

明日は１３日目、@trtrakiさんの「マネージャーで困ったこと(前編)」です！