OmniAICreator/Qiita-1.07M huggingface dataset:
Yii2にみるイーガーローディング戦略


例えば1:nのテーブルがあります。

```sql

CREATE TABLE `office` (
  `officeCode` varchar(10) NOT NULL,
  `city` varchar(50) NOT NULL,
  `phone` varchar(50) NOT NULL,
  PRIMARY KEY (`officeCode`)
) ENGINE=InnoDB DEFAULT;

CREATE TABLE `employee` (
  `employeeNumber` int(11) NOT NULL,
  `lastName` varchar(50) NOT NULL,
  `firstName` varchar(50) NOT NULL,
  `officeCode` varchar(10) NOT NULL,
  PRIMARY KEY (`employeeNumber`),
  KEY `officeCode` (`officeCode`),
  CONSTRAINT `employee_ibfk_2` FOREIGN KEY (`officeCode`) REFERENCES `office` (`officeCode`)
) ENGINE=InnoDB;

```

officeに対してemployeeが沢山ぶらさがってるようなよくある1:nのテーブルが有るじゃないですか。

employeeのリストでofficeのcityを表示させようとした際、気軽にviewで`$model->office->city`なんて書いてしまうと都度officeに大してクエリが走ってしまいますね。そうですn+1問題です。

なのでemployee引くときにJOINして引けばいいですよね。ARには`with()`'というイーガーローディングのメソッドがあるのでコレを使います。さてここで問題なのがクエリ。Yii2ではこのようなクエリが流れます。

```php
$model->find()->with('office')->all()
```

```sql
SELECT * FROM `employee` LIMIT 20
SELECT * FROM `office` WHERE `officeCode` IN ('1', '6', '4', '2', '3', '7')
```
※実際にはARがテーブル情報を引いてくるためもう少しクエリが多いです
はて、JOINすれば一発で取ってこれそうなものをわざわざ２回に分けてクエリを発行しています。
じゃあJOINすればいいじゃないと`joinWith()`を使います。

```php
$model->find()->joinWith('office')->all()
```

```sql
SELECT `employee`.* FROM `employee` LEFT JOIN `office` ON `employee`.`officeCode` = `office`.`officeCode` LIMIT 20
SELECT * FROM `office` WHERE `officeCode` IN ('1', '6', '4', '2', '3', '7')
```

ﾌｧｯ!?なんでoffice引いてるの!?officeナンデ!?
何故かと言うとsoftark先生が[説明されていた通り](http://qiita.com/softark/items/64610295d3169f8a830c)

> 注意すべきことが、もう一つあります。それは、joinWith を使ってテーブルを結合しても、イーガーローディングで実行されるクエリが一回だけになったりはしない、ということです。Yii 2 では、メインモデルの取得と、リレーションモデルの取得は、必ず、別のクエリによって行われます。

なんですね。仕様です。Yii2ではそういうものなんです。
と切り捨ててしまうのは簡単ですが、クエリ分割には利点もあります。

JOIN先のレコードに重複がある場合、その分DBからの転送量が減らすことができます。それはレコードが増えるほど顕著になるでしょう。

なおかつインデックスに対するIN句は大概速いです。DBのキャッシュに乗ってればKVSと大差ないレベルです。


そのためクエリは1つふえるものの、クエリのオーバヘッドを相殺しうるメリットが発生しうるのでそう悪くない選択なのかもしれません（個人の感想です）

ちなみに[laravelのORMもイーガーローディングでクエリを分割するアプローチ](http://laravel.com/docs/4.2/eloquent#eager-loading)のようです
効果的なフロントエンド開発のための10の原則

僕が好きなWebのデザイナー、デベロッパーの一人である、[CSS Wizardly](http://csswizardry.com/)こと、Harry Roberts氏が[dotCSS](http://www.dotcss.eu/)というヨーロッパのカンファレンスで講演した内容について書きたいとおもいます。

# #10CSS

彼は大手のメディア企業などのフロントエンドを経て、現在はコンサルタントとして活動しています。CSS Wizardlyと言ってしまってるくらいに、CSSやその周辺のことについてブログでアイデアや意見を述べていたり、また[inuit.css](https://github.com/inuitcss)のようなフレームワークを公開しています。現在は、また新たに[ITCSS](http://itcss.io/)というプロジェクトを進めているようで、公開が楽しいです。

彼がカンファレンスで話す内容は、CSS Architecure関連の話も多いのですが、ワークフローなどについての講演することもあるようです。その中で、今回とりあげたいのは、CSSの具体的なテクニックやコードの解説ではなく、フロントエンド開発の教訓、原則をまとめた**10CSS**という話です。

以下、公開されているスライドを元に、その10の原則を紹介します。
[Ten Principles for Effective Front-end Development](https://speakerdeck.com/csswizardry/ten-principles-for-effective-front-end-development)

※講演の動画などをみながらではないので、素直にスライドに書いてあることから推測して解説します。彼の意図とあってるかわからないですが、僕はこう捉えた、って感じです。

## 01.The Simplest Option Is Usually the Best

オプション、機能がシンプルであれば、実装コストも抑えられるし、早い。また他の開発者がその実装、コードを理解するのも容易になるので、メンテナンスやデバッグも良いとなるし、また失敗したり、壊れたりするリスクも減る。

## 02.Reduce the Amount of Moving Parts

Moving Parts = 可動部分、と素直に受け取ったとしたら、次のようなことかな、と。デザイン上、アニメーションなども含めたダイナミックなUIであるとか、**動く**ようなものがあれば、極力減らした方がいい。そのすべてに何かバグや失敗を招く可能性がある。それに関する機能、コードは減らすべき。

## 03.Understand the Business

コードそのものは重要ではなく、それによる最終成果物に意味がある。ビジネスとして、その仕事のコストや価値を理解することが大事。

## 04.Care Less, Care Appropriately

誰もあなたのコードのことを気にかけたりしないし、それに執着するべきじゃない。プロジェクト本来の目的を忘れず、関わる人達が求めていることとのバランスを取る必要がある。決して自己中心的にはならないようにする。

## 05.Pragmatism Trumps Perfection

明日完璧なものをつくるよりも、今日（完璧ではないが）十分なものをつくる方が良いこともある。ビジネスの価値ではかるようにする。
これはコードとして、実用なレベルになっていれば十分で、04のような開発者の美徳で完璧さを求めるべきではない、ってことかもしれないですね。

## 06. Think at Product Level

デザインをブラウザで再現する、ということだけがあなたの仕事ではない。狭い世界にこもらず、周り巻き込んでいこう。プロダクトにとって正しいことを実践しよう。

## 07. Do Not Design Systems around Edge-cases

数少ないケースに目を向けた設計をしない。まずは一般的なシナリオを想定して組み立てる。

## 08. Do Not Make Decisions Based on Anecdotal Evidence

どこかで聞いてきたエピソードや事例を元に判断すべきではない。ストーリーではなく、データを信用する。

## 09. Don't Build It until You've Been Asked for It

頼まれていないものを作ってはいけない。それは無駄にコストをかけるし、仕様もないものをつくっても誰も検証できない。
またそれはプロジェクトの片隅に残り、誰もメンテナンスしたくないから、作った当人がメンテナンスしなければいけなくなる。

## 10. Expect and Accommodate Change

常に適応性、柔軟性、機敏性を持つようにする。すべてのものが、変わる可能性を持っている。

# まとめ

すごく特別な至言ということでもなく、ああその通りだね、というような内容ではありますが大事な内容です。つい技術的なことを追っていくと、それがビジネスを支える一つとしてやっていることが抜けてしまうことはあるので、これらを忘れないようにしたいものです。
composer で取得した vendor 配下のソースの Git 管理について

Symfony2のプロジェクトで、 vendor 配下のパッケージを修正しようと思いました。
vendor 配下はソースコードのみ取得しており、レポジトリをgit cloneで取得してはいないようです。
vendor配下をちょっと書き換えて、Pull Request を送るときとかどうやってるのだろうかと調べてみました。

composer のマニュアルを見たら --prefer-source なるオプションがありました。
https://getcomposer.org/doc/03-cli.md#install

git 管理したい vendor 配下の bundle を一旦削除して、 --prefer-source 付でupdate しました。

```bash
$ rm -rf vendor/sonata-project/classification-bundle
$ php composer.phar update vendor/sonata-project/classification-bundle --prefer-source
$ git -C vendor/sonata-project/classification-bundle config --list
```
classification-bundle　はあくまで例です。適宜読み替えてください。

該当フォルダが Git 管理されているかと思います。
git remote add などで自身の fork したリポジトリを指定することでPR送ることが出来そうです。
プログラマーのOJTの進め方（一緒にコードを読む→ひとりで読んで質問→実作業とレビュー）

これは、[新人教育 Advent Calendar 2014 - Adventar](http://www.adventar.org/calendars/429)の22日目の記事です。

## はじめに

集合研修を終えたくらいの入社して間もない新人さんと一緒にOJTをする上で、目安になりそうな進め方を自分なりにまとめてみました。新人さんのレベルに応じて、大まかに三段階あります。

1. 基礎がない場合…一緒にコードを読む
2. 基礎がある場合…ひとりで読んで質問
3. 業務知識がある場合…実作業とレビュー

## 1. 一緒にコードを読む

基礎がない場合、一緒に既存のコードやドキュメントを説明しながら読みます。集合研修との違いは以下です。

* 研修用ではなく実際に使われているものを教材にする
* 少人数なので理解するまで説明できる

もし、新規プロジェクトなどの理由で既存のコードがない場合、似ているOSSのコードを使うのがよいと思います。

教材の選び方は以下の2通りあります。どちらにするかは難しいところです。

* 先頭から
* 重要な部分から

この段階はあまり長くやるとお互いに疲れてしまうので、説明した部分を応用すればひとりで読んでも理解できそうだなと感じたら、さっさと次のステップに進みます。

## 2. ひとりで読んで質問

基礎が付いてきたら、まとまった時間（半日くらい）を使って、ひとりでコードやドキュメントを読んでもらいます。その後、質問するためだけの時間を作り、わからなかったところを質問してもらって、一緒に該当箇所を読みながら説明します。

問題は、質問がない場合です。本当にわかっているのか、うまく質問できないかわからないので、この場合は新人さんに自分の言葉で説明してもらうとよいです。これは、Groongaドキュメント読書会の進め方の資料から得られた知見です。

Groongaドキュメント読書会5の進め方 - Kouhei Sutou - Rabbit Slide Show
http://slide.rabbit-shocker.org/authors/kou/groonga-document-read-5/?page=10

## 3. 実作業とレビュー

ひとりで読んでも問題なく理解できるようになったら、早いうちに実作業を任せます。すでに同じ分野の経験がある場合、いきなりここから始めてもよいかもしれません。ポイントは以下です。

* 小さな案件（数行の修正で済むもの）から始める
* 既存の資料の場所を伝えておく
* 細かくレビューする

コーディングルールなどは、勝手に既存の部分を読んで真似てくれるのが理想です。が、それは難しいので、初回のレビュー時にプロジェクトのルールなどを伝えます。おそらく、実作業前に伝えるよりは理解しやすいと思います。

## おわりに

プログラマー向けのOJTの進め方を三段階に分けてまとめてみました。もしどの段階か迷ったら、低い方から始めるのが無難ですが、人によるので難しいところです。また、教える側が忙しいと1番が使いづらいですが、その場合でもいきなり2番には進まず、さらっとでも一緒に読んでから、同じ場所をひとりで読んでもらう感じがよさそうです。

あくまで私なりの進め方ですが、いろいろアレンジしながら参考にしてもらえるとうれしいです。
いろいろな総合開発環境

**Unity**
ゲーム開発:言語:C#,JavaScript,Boo
http://japan.unity3d.com/

**Visual Studio 2013**
言語:C#,Visual Basic,C++
http://www.microsoft.com/ja-jp/dev/

**Eclipse**
言語:JAVA (プラグインで様々な言語に対応)
https://eclipse.org/downloads/

**NetBeans**
言語:JAVA,C/C#,PHPなど
https://ja.netbeans.org/

**IntelliJ IDEA**
言語:JAVA,Scalaなど
https://www.jetbrains.com/idea/

**Appmaker**
言語:HTML
https://apps.webmaker.org/designer

**Xcode**
言語:Objectiv-C,Swift
https://developer.apple.com/jp/xcode/
express-session connect-couchdb Error: Document update conflict

セッション管理機能を Express にて実装するためのミドルウェアとして express-session がある。
こいつを用いると、セッションデータを保存しておくデータベースには様々なものを選ぶことができる。セッションデータを保存しておくデータベースとして、僕は CouchDB を利用している。

CouchDB を用いるためには、https://github.com/expressjs/session#session-store-implementation を参考にして、API を実装する必要があるが、connect-couchdb というパッケージを利用すると、自分で実装しなくていいから便利である。

express-session と connect-couchdb を組み合わせてセッション管理を実装していると、```Error: Document update conflict``` というエラーに出くわした。

数時間、こいつに悩まされていたのであるが、原因が分かったのでメモしておく。

以下の Sample code は、```Error: Document update conflict``` が必ず発生した。
（少なくとも僕の環境では）

# Sample code

app.js

```
var express = require('express');
var path = require('path');
var morgan = require('morgan');
var http = require("http");
var session = require('express-session');
var ConnectCouchDB = new require("connect-couchdb")(session);


var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'public')));

app.use("/", session ({
  name: "test.sid",
  secret: "test",
  rolling: false,
  cookie: {
    httpOnly: true,
    secure: false,
  },
  resave: true,
  proxy: undefined,
  saveUninitialized: true,
  unset: "keep",
  store: new ConnectCouchDB ({
    name: "test_sessions",
    username: "",
    password: "",
    host: "localhost",
    port: "5984"
  })
}));

app.get ("/", function (req, res) {
  console.log(JSON.stringify(req.session));
  req.session.a = Math.random();
  req.session.save(callbackSave);
  req.session.b = Math.random();
  req.session.save(callbackSave);
  res.send("hello world");
});

function callbackSave (error) {
  if (error) {
    throw error;
  }
}

module.exports = app;
```

# エラー原因の推測

```
// 1. リクエストを受け取ったら、クッキーを取得する。
// 2. クッキーに書かれている session id に該当するドキュメントを CouchDB から取得する。
   req.session 変数に取得したドキュメントの内容が書き込まれる。
app.get ("/", function (req, res) {
  console.log(JSON.stringify(req.session));
  req.session.a = Math.random();
// 3. req.session.a が更新された。これを CouchDB へ書き込む。
//    ここではエラーは発生しない。
  req.session.save(callbackSave);
  req.session.b = Math.random();
// 4. req.session.b が更新された。これを CouchDB へ書き込む。
//    ここでエラーが発生する。
  req.session.save(callbackSave);
  res.send("hello world");
});
```

詳細なことはソースコードを読まなければ分からないが、2 の時点での CouchDB のドキュメントのリビジョン番号を 100 とする。3 の時点で CouchDB のドキュメントのリビジョン番号が 100 から 101 に更新される。4 の時点でも CouchDB のドキュメントのリビジョン番号を 100 から 101 に更新しようとするが、3 の時点において、既にドキュメントのリビジョン番号が 101 に更新されてしまうため、Conflict となるのだろう。

詳細な調査はしないが、express-session と connect-session を併用する場合には、用法を間違えないことである。
express4でpm2のwatchが動かない


# pm2でwatchされない

nodeで開発している時、[pm2](https://github.com/Unitech/pm2)が大変便利。
ただ、express4で初期化したプロジェクトにてwatchが動かなくて困った。

```bash
➜  pm2_test$  sudo pm2 start bin/www --watch
# app.jsとか更新しても全然リスタートされない
```

# これでwatchされた。

起動スクリプトをプロジェクトルートに移動

```bash
➜  pm2_test$  mv bin/www ./　
```

package.jsonのstartを修正

```json:package.json
  "scripts": {
    "start": "node ./www"
  },
```

起動ファイル以下のディレクトリしか監視しないっぽい？
見た感じ、指定したディレクトリを追加で監視できそうな気も。。。
https://github.com/Unitech/PM2/blob/a971babeb692fcab052fa905d52aee0eb4bd1382/lib/Watcher.js#L25-L49
CRuby インタプリタの CocoaPod を作ったので紹介します


この記事は OS X Advent Calendar 2014 の22日目の記事です。

# はじめに

Ruby のインタプリタをアプリケーションに組み込もうとした場合、現在だと mruby があります。CocoaPods にも登録されているので実際に利用するのも簡単かも知れません。

https://github.com/jzzocc/mruby-iOS

それでも色々あって mruby ではなく CRuby を組み込んで使いたい事情があったため、難儀しながら x86_64 や ARM で動く libruby-static.a を作ったりしていました。

それで折角なのでそれをなんやかんやして CocoaPods の Pod として公開してみましたので紹介します。

# 使い方

使い方は簡単です。Pod をインストールしたらあとは ObjC のメソッドを一つ呼ぶだけでスクリプトが実行出来るようになります。

## Pod のインストール

他の CocoaPods のライブラリの利用と同じく、組み込んで使いたいアプリの .xcodeproj と同じフォルダに以下のような Podfile を用意して pod install するだけす。これだけで Ruby のインタプリタを使う準備が完了します。

```Podfile
platform :osx, '10.7'
pod 'CRuby', git: 'https://github.com/xord/cruby'
```

ただこの時は、是非とも --verbose オプションを使うことをお勧めします。

```sh
$ pod install --verbose
```

なぜなら pod install 中に rake コマンドを使って ruby-x.x.x.tar.gz のダウンロードから、各 CPU アーキテクチャ用のバイナリを生成しユニバーサルバイナリを作るため、現時点で7回もの configure && make を実行する作りになっているためです。例えば私の非力な11インチの MacBook Air だと30分以上もかかってしまうので、--verbose オプション無しだと進み具合がわからず辛いのです。

## アプリ内でスクリプトを実行する

pod install が済んだらもうインタプリタが使えるようになっていますので、以下のように Ruby のスクリプトをテキストとしてアプリ内で評価することが出来るようになります。

```objc
CRBValue *result = [CRuby eval:@"[1, 2, 3].map {|n| n ** 2}"];
NSString *string = result.inspect;
NSLog(@"result: %@", string);
```

![実行の様子](https://raw.githubusercontent.com/wiki/xord/CRubyDemo_OSX/images/osx_adventcalendar_22nd_1.png "実行の様子")

このように、Pod として CRuby の導入からスクリプトの実行までを簡単に出来るようにするため、'CRuby' クラスと 'CRBValue' クラスという簡単な API を用意してありますが、#include "ruby.h" すれば rb_xxxx() 等の CRuby の C API も使えます。

# Ruby 標準ライブラリについて

公式サイトから配布される ruby のアーカイブに含まれる lib/ 以下の *.rb は Pod の resource_bundle として組み込んでありますので、単純に require すれば利用することができます。

ext/ ディレクトリにある拡張ライブラリも --with-static-linked-ext を configure 時に指定しているためバイナリとしては含んでいます。ですが、今のところ標準拡張ライブラリの Init_XXX を呼ぶ仕組みを入れていないため、require に失敗します。

この辺は今後 require をラップするなどしてロード出来るようにする予定でいます。

# 利用サンプル

CRuby Pod の利用サンプルとして、OS X 用アプリの Xcode プロジェクトファイル一色を GitHub に上げてあります。

https://github.com/xord/CRubyDemo_OSX

2個めのコミットが Podfile の追加と [CRuby eval:] を呼ぶ部分の差分が入っていますので使うときの実際の例として参考になると思います。

https://github.com/xord/CRubyDemo_OSX/commit/c35a1abd324bb8fd471d4ca811364a2e9a0ee1ab
（pod install によるプロジェクトのファイルの差分も混じってしまっているので見にくいですが、見る所は Podfile と AppDelegate.m だけです）

# CRuby が使いたかった事情

mruby ではなく CRuby が使いたかった理由ですが、単純に自分が今開発している CRuby 用のライブラリがあってそれをアプリからインタプリタ経由で使いたかったためです。一時はそのライブラリの方を mruby 用の拡張ライブラリとしても使えるようにしようと頑張ってみた時もあったのですが、CRuby と mruby の両対応拡張にするのは色々問題があって挫折しました。

それで、Ruby の処理系として多少の制限もある mruby を使うより、フルスペック版の CRuby が使えればそれが一番だと思って作った次第です。

# 最後に

[Ruby Advent Calendar の明日23日の記事](http://qiita.com/tokujiros/items/a9e8d16c2a4c1ccf2238)も私が担当します。CRuby が使いたかった理由に書いた自前のライブラリの紹介をしますので、そちらも是非見てみてくださいね。

それではまた。
UE4 変なマテリアル入門 3（形を作る）

# index
[第1回（準備と簡単な例）](http://qiita.com/nkdtr/items/ca418529a1992ed5ab08)
[第2回（動くマテリアル）](http://qiita.com/nkdtr/items/81dca14e37a34fe32cb0)
[(イマココ)第3回（形を作る）](http://qiita.com/nkdtr/items/e6cf18160a5f3ff2fd18)
[第4回（形を動かす）](http://qiita.com/nkdtr/items/309274646d291ef676fd)
[第5回（テクスチャサンプリング*N）](http://qiita.com/nkdtr/items/6e09446659512c09e4bc)

# 概要
無から有を作る回です。
大げさに言いました。

テクスチャやメッシュ形状を用いず、
マテリアルで図形を描くことをテーマにしています。

ちょっとUE4寄りの話題になりますが、今回はMaterialFunctionが登場します。
Functionという名前が付いていますがどちらかというとマクロ的な機能で、
生成されるシェーダーコードにはコードブロックがコピペされる感じになります。
http://nkdtr.hatenablog.com/entry/2014/12/16/005521
使うにあたってそんなことを気にする必要はありませんけどね！
とにかく便利です。

## 半分塗りつぶす/真ん中に線を描く
シェーダーでこの手のことを行う場合、線を描くよりも塗りつぶす方が簡単です。
まずは右半分を塗りつぶすものを作ってみます。
![half.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/07098320-6272-51c1-2033-65a686192c13.png)
このように、基本的にはTexCoordの値を使ってピクセル色を判別する処理になります。
（EmissiveColorへの入力がscalar値になっていますが、
シェーダーの特性上自動的にグレーとして解釈されます。
色を付けたい場合はこれに好きな色を乗算すればOKです。）
ただ、Ifを使って記述してしまうと境界をぼかしたい、境界を描画したい等の要望への対応が困難になりますので、下のような実装をお勧めします。
![half2.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/707e05a9-77d6-5fb9-b2b8-08a62ff77e9f.png)
出力が異なってしまいましたが（左側が黒）そこはどうにでもなるので直してみてください。
sharpnessの部分に１００と書いてありますが、この値を小さくすると境界がぼやけます。
こうしておくことで、塗りつぶしから境界を描く実装へのシフトも容易になります。
![half3.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/ed0e5f4d-0e90-c9de-b31e-917dea8a64e6.png)
前半は同じなので割愛しました。
閾値からの差分の絶対値を取ることで、境界で０、遠くなるほど大となる値を得られます。
1.0からこれを引き算すると境界でのみ明るく離れるほど暗いという結果になるわけです。

## 円
![circle.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/59a26278-c0b7-e43f-9d6c-1f42327b558a.png)
はいできあがり・・・こんな短いコードで！
なわけもなく、MaterialFunctionであるDrawCircleに実装が詰まっています。
![circle_mf.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/b390f6b4-49fc-7a2d-40d4-4a598f83997e.png)

左右分割とさほど違いはなく、テクスチャ座標の代わりに
円の中心とピクセルとの距離を使用しているだけです。
以下のような感じで輪郭への変換もできます。
![circle2.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/cb0e5e61-8d35-0ae4-9117-91620222836a.png)
輪郭化の実装もMaterialFunctionに入れてしまったほうが使い勝手はよいと思います。

MaterialFunctionにしておくと、同じことを繰り返したい場合に便利です。
円を二つ描いてみます。
![circle3.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/5a844045-d499-c49f-94c6-51adf20795d4.png)
もう一個右上に円を足すと黒服の人に連れていかれる可能性があるのでご注意ください。


今回はこれでおしまいです。
超初心者向け：windows で docker を使うよ

みなさんこんにちは :smile: docker というと linux 系な感じがしますが、windowsでも使えるのでやってみた :+1: とはいっても windows に仮想環境 VirtualBox 入れてその上に docker なんだけど。

**現在(2014/12)サポートされているwindowsのバージョンは 7.1 と 8 **

# インストール

https://docs.docker.com/installation/windows/#installation

docker-install.exe をダウンロード(130MBぐらい)してインストール

現在、Win7.1と8でテストされているらしい

## 今回使用したバージョン

docker-windows-installer v1.3.3

 - Boot2Docker 1.3.3 (Docker v1.3.3, Linux v3.16.7)
 - Boot2Docker Management Tool v1.3.3
 - VirtualBox v4.3.18-r96516
 - msysGit v1.9.4-preview20140929

パッケージ自体はここからDL ⇒ https://github.com/boot2docker/windows-installer/releases/tag/v1.3.3

## 手元の環境

 - Windows 7 Professional SP 1 (64bit)
 - Intel Core i5-2520M CPU @ 2.50Ghz
 - 8.00 GB

### msysGit とは

Git for Windows が正式名称で、Git本家が提供するWindowsっ用パッケージが Git for Windows でその配布時の名称がmsysgitと言うらしい。

参考： msysgit で日本語を使いたい http://qiita.com/kumazo@github/items/2169e1ee7be278f82b94

### VirtualBox とは

仮想マシン実行環境、元々開発していたinnotekと言う会社がSunに買収されて、Oracleへという流れらしい。innotek自体はWindowsのVirtualPCの開発にも関わっていたらしい。

参考：Wikipedia http://ja.wikipedia.org/wiki/VirtualBox


## 注意点

なんで VirtualBox 入れるの？って疑問の答えがこれで

> The Docker Engine uses Linux-specific kernel features, so to run it on Windows we need to use a lightweight virtual machine (vm). You use the Windows Docker client to control the virtualized Docker Engine to build, run, and manage Docker containers.
https://docs.docker.com/installation/windows/#installation

WindowsでDocker使うのはどう見ても向いていないように思える展開

続きが続く・・・
Cocos2d-x 3.2 でディレクトリ内のファイル一覧を取得したいお話

# はじめに

これは [Cocos2d-x Advent Calendar 2014](http://qiita.com/advent-calendar/2014/cocos2d-x) の第21日目の記事です。

予定で「横スクロールゲームについて書きます」と言ったな。 **アレは嘘だ** 。
![予告.png](https://qiita-image-store.s3.amazonaws.com/0/28313/652eeeba-0da4-f72b-7104-9725f46b6954.png)


すみません、他に書きたいネタが浮かんだのでそちらについて書きます。
Cocos2d-x で Resources のサブディレクトリ内のファイル一覧を取得する方法についてです。
バージョンは 3.2 を対象としています。

# Cross Platform にできるか？ → できない！

これはかなり必要な機会も多いはずなので、FileUtils あたりに API が準備されているだろうと思ったのですが、どうやらそうではないようです。
[Stack Over Flow](http://stackoverflow.com/questions/25177354/how-to-list-files-in-a-directory-on-cocos2d-x) に、
>There is no cross platform API in cocos2dx for listing directory contents. You can store file names in an array while creating them.

と答えている方がいらっしゃいます。
今回は iOS と Android についてやりたかったので、それぞれ別々の方法が必要になりますね...
なんとか両方のプラットフォームで実現できたので、以下に書いていこうと思います。

**対象のディレクトリは Cocos2d-x の Resources に含まれていることを前提とします。**


# iOS ではどうやるの？

iOS のほうが素直に実装できます。
フルパスを取得したら、C言語標準の `opendir` 関数でディレクトリを開きます。戻り値として受け取ることができる、`DIR` 構造体から `readdir()` してディレクトリーの中身を表す構造体 `dirent` で受け取れば、中身のファイル名が調べられます。

サンプルコードは次のとおりです：

```cpp

std::vector<std::string> getDirContents(std::string dirname) {
	FileUtils* fu = FileUtils::getInstance();

	std::string dir = fu->fullPathForFilename(dirname);

	std::vector<std::string> list;

	DIR* dp;
	struct dirent* ent;

	if ((dp = opendir(dir.c_str()), "r") == NULL) {
		CCLOGERROR("ディレクトリが開けません。：%s", dir.c_str());
		perror(dir.c_str());
		return list;
	}

	while ((ent = readdir(dp)) != NULL) {
		CCLOG("ファイル：%s", ent->d_name);
		list.push_back(ent->d_name);
	};
	closedir(dp);

	return list;
}

```

# Android ではどうやるの？

Android では `fullPathForFilename()` メソッドでフルパスがうまく取れませんでした。
そうすると、`opendir()` 関数も使えません。Android/C++ では Resources 配下は JNI のAssetsManager というもので扱うようです。
AssetsManager のインスタンスの取得にはアプリケーションの Context が必要になるようで、少々厄介です。今回は Cocos2d-x の FileUtils が private 変数として持っているインスタンスを借りてきました。（とりあえず public に書き換えました。)

サンプルコードはつぎのとおりです：

```cpp

std::vector<std::string> getDirContents(std::string dirname) {

	std::vector<std::string> list;

	AAssetManager* mgr = FileUtilsAndroid::assetmanager;

	AAssetDir* assetDir = AAssetManager_openDir(mgr, dirname.c_str());
	if (!assetDir) {
		CCLOGERROR("ディレクトリが開けません：%s", dirname.c_str());
		return list;
	}

	const char* filename = NULL;
	while ((filename = AAssetDir_getNextFileName(assetDir)) != NULL) {
		CCLOG("ファイル：%s", filename);
		list.push_back(filename);
	}
	AAssetDir_close(assetDir);

	return list;
}

```

# おわりに
Cocos2d-x で Resources ディレクトリ内のファイル一覧を取得するお話を iOS, Android について書きました。自分としては必要になる機会も多いと思うので、`FileUtils`あたりに実装されたらいいなーと思った次第。

お読みいただきありがとうございました。
WebStormでGruntの入力補完を可能にするLibraries機能

こんにちは、らこです。今日はWebStormの「JavaScript Libraries」機能についてです。「WebStorm、補完がすごいって聞いてたのに変だなあ」という事案の何割かはこれで解決できるはずです。

# requireを例に

Node.js用JavaScriptを書いていると、外部モジュールを読み込むために`require`することは多々ありますよね。でもWebStormで書くと定義されていなくて「？」となります。また、モジュール側の`module.exports`も下線が出て気持ち悪いです。実行すれば動くのに、どうしてWebStormはわかってくれないんでしょうか

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/b127ea12-8b2d-6636-f48a-9abe05f7be00.png)

# WebStormはWeb開発IDEです

というのも当然の話で、WebStormは基本的にクライアントサイドのJavaScriptを書くことを想定しています。ブラウザで実行するJavaScriptを書いているのに`require`や`module`が参照出来たら問題ですね。

なのでNode.jsを書くときは「このファイルはNode.jsのライブラリ参照するよ」という設定をしないといけません。

# Node.js Globalsを有効にする
Node.jsの標準APIを参照するには、Node.js Globalsというライブラリを有効にします。ライブラリを有効にするにはエディターのコンテキストメニューから「Use JavaScript Libraries」を選び、「Node.js Globals」にチェックを入れます。

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/12817608-1d52-a78d-a794-acea71db3ad4.png)

これで`module`や`require`などのNode.jsのグローバルスコープにアクセスできます。

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/77cb4b32-cab4-9e58-3c97-76a76ec58525.png)

# 応用篇
## Gruntのライブラリを有効にする
WebStormでGruntを使ったことがある方は一度はこの様子を見たことがあるでしょう。もしかしたら今もこの状態で書いている方もいるかもしれません

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/06df13e7-906c-9238-5600-d180cd996e1a.png)

下線ばかりでとても嫌な気分になりますね。先ほどと同じようにNode.js Globalsを有効にしても、最初の`module`以外は変わりません。`grunt.initConfig`や`grunt.file`は補完が効きません。

これを解決するために、TypeScriptの力を借ります。TypeScriptとは行っても型定義ファイルを補完に利用するだけです。

まず設定からLibrariesを開きます。

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/0d694f94-3adc-804e-cb78-ffc056846626.png)

右の「Download」ボタンを押して、ウェブ上から新しいライブラリを入手します。「Official Libraries」ではなく、「TypeScript community stub」を選択して下さい。ここにはたくさんのJavaScriptライブラリの型定義ファイルが集積しています。どこから集めているかというと、[DefinitelyTyped](https://github.com/borisyankov/DefinitelyTyped)です。

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/88bf0c06-4b66-2a50-628d-7ee33478d1de.png)

この中からgruntjsを選んでダウンロード＆インストールすると、「Use JavaScript  Libraries」の候補の中にgruntjsが追加されます。有効にすればGruntfile.jsが綺麗になるはずです。

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/f0738432-1084-57dd-8767-0979ffdf2e33.png)

補完候補もバッチリです

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/ad005881-971e-07bc-8c4a-28c6cda46f40.png)

# まとめ
Gruntにかぎらず多くのライブラリでこの手法が使えます。npmでインストールしたライブラリはたいていWebStormが自動で読み込んで補完候補に入れてくれますが、Gruntのような例外があった場合はLibraries機能を使ってみてください。
NAOqi C++ 開発環境のインストール(OS X 環境)


## はじめに

これで Pepper 用に C++ でプログラミングできるのだろうか、という好奇心だけで試してみています。正直なところまださっぱり分かっていません。

以下の記事を参考にさせて頂き、ほぼそのままなぞっています。

* [NAOqi C++ 開発環境のインストールと動作確認](http://qiita.com/naoqi/items/144d9cb0e1ca5e6186b0)


## OS X 環境での make 時エラーの解決

元記事同様にエラーが発生しました。

```bash
$ qibuild make -c mytoolchain
Current build worktree: /path/to/naoqi-sdk-1.14.5-mac64/doc/examples
Using toolchain: mytoolchain
Build type: Debug
* (1/1) Building helloworld
Scanning dependencies of target helloworld
[ 33%] Building CXX object CMakeFiles/helloworld.dir/helloworld.cpp.o
[ 66%] Building CXX object CMakeFiles/helloworld.dir/main.cpp.o
Linking CXX executable sdk/bin/helloworld

...

ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make[2]: *** [sdk/bin/helloworld] Error 1
make[1]: *** [CMakeFiles/helloworld.dir/all] Error 2
make: *** [all] Error 2
[ERROR]:  BuildFailed Error occurred when building project helloworld
```

Aldebaran の Community を見ていたところ、それっぽい情報があり  CMakeLists.txt に一行追加したところ make が通るようになりました。

* [Macos qibuild error](https://community.aldebaran.com/en/forum/macos-qibuild-error-1291)

```CMakeLists.txt
# Copyright (C) 2011 Aldebaran Robotics
cmake_minimum_required(VERSION 2.6.4 FATAL_ERROR)

set(CMAKE_CXX_FLAGS "-stdlib=libstdc++")

...
```

```bash
$ qibuild make -c mytoolchain
Current build worktree: /path/to/naoqi-sdk-1.14.5-mac64/doc/examples
Using toolchain: mytoolchain
Build type: Debug
* (1/1) Building helloworld
-- Using qibuild 3.7
-- Binary: helloworld
-- Binary: testhelloworld
-- Configuring done
-- Generating done
-- Build files have been written to: /path/to/naoqi-sdk-1.14.5-mac64/doc/examples/core/helloworld/build-mytoolchain
[ 33%] Building CXX object CMakeFiles/helloworld.dir/helloworld.cpp.o
[ 66%] Building CXX object CMakeFiles/helloworld.dir/main.cpp.o
Linking CXX executable sdk/bin/helloworld
[ 66%] Built target helloworld
Scanning dependencies of target testhelloworld
[100%] Building CXX object CMakeFiles/testhelloworld.dir/testhelloworld.cpp.o
Linking CXX executable sdk/bin/testhelloworld
[100%] Built target testhelloworld
```

## 感想

* make はできたみたいだけど、これをどうしたら良いのか分かりません。まだまだ英語ドキュメントと格闘中。
Ansibleとテスト その2


[Ansibleとテスト - Ansible Meetup in Tokyo LT](https://speakerdeck.com/volanja/ansibletotesuto)の追加です。

このLTではAnsibleとServerspecを組み合わせて使うためのrubygemについて紹介しました。
一方で、AnsibleにはAssertなどのテストモジュールがあるので、Serverspecを使わずにテストまで行えるのでは、と考えていました。

この記事では、Assertを使ってテストを書いてみた感想と注意点について述べます。

結論から言えば、Ansible単独で構築からテストまで行うよりは、テスト系ツール(serverspec, envassert)と組み合わせて活用した方が良いです。

# [前提]Ansibleの思想とテスト
Ansibleはあるべき状態(desired-state)を宣言し、サーバを構成します。
例えば、OS起動時にあるサービスが開始されるための手順を書くのではなく、OS起動時にあるサービスが開始する状態であることを宣言する(YAMLに書く)と、その通りに構成されます。

この宣言の考え方はモジュールにも現れていて、`service`モジュールでは、`state=start`ではなく`state=started`といった状態を記述します。

```
tasks:
  - service: name=foo state=started enabled=yes
```

また、Ansibleでは、`fail-fast`と呼ばれますが、playbookの実行中に失敗する(=宣言された状態に出来なかった)とすぐにfailするので、すぐに失敗に気づくことができます。
(あとで改めてテストを実行して、期待通りに出来ているか確認する手間が省ける)  
Ansibleでは宣言通りに構築するので、改めてテストを行う必要はないという思想があると考えています。


# Assertでテストを書く。
拙作の[ansible-sample-tdd](https://github.com/volanja/ansible-sample-tdd)のNginx部分についてテストを書いてみました。
[serverspec版](https://github.com/volanja/ansible-sample-tdd/blob/master/roles/nginx/spec/nginx_spec.rb)が19行、[ansible](https://github.com/volanja/ansible-sample-tdd/blob/add-test/roles/nginx/tasks/test.yml)版が26行でした。  

```
- shell: rpm -qi nginx
  register: p_installed

- shell: chkconfig --list | grep nginx
  register: p_enabled

- shell: ps aux | grep nginx
  register: p_running

- shell: netstat -ant | grep 80
  register: p_listen

- stat: path=/etc/nginx/nginx.conf
  register: p_exist

- shell: cat /etc/nginx/nginx.conf
  register: p_cat

- assert:
    that:
       - p_installed is defined
       - p_enabled is defined
       - p_running is defined
       - p_listen is defined
       - p_exist.stat.exists
       - "'worker_connections  1024;' in p_cat.stdout"
```

## 感想

全6件のテストで行数はあまり変わりませんが、regsiterで変数に格納する必要があるので書くのは手間がかかりました。
公式の例文ではstatと組み合わせていましたが、statだけでは機能が全く足りないので、shellモジュールを使っています。
shellを使わなければならない時点で、微妙な感じです。。

Ansibleは宣言型の思想があるので、今後もテストは充実されるように思いません。
個人的にはrubyの慣れもあり、今後もserverspecを使っていくだろうと思います。


### テストの注意点その1 statモジュール
statにはisdirがあるのでisfileがあると思いきやありません。びっくりです。
statには注意が必要です。
statモジュールのソースコードを読む限りでは、以下のことが出来ます。

```ansible/lib/ansible/modules/core/files/stat.py
'exists','mode','isdir','ischr','isblk','isreg','isfifo','islnk','issock','uid','gid','size','inode','dev','nlink','atime','mtime','ctime','wusr','rusr','xusr','wgrp','rgrp','xgrp','woth','roth','xoth','isuid','isgid'
```

### テストの注意点その2 テストのみ行う
`include`とタグを使ってテストをするファイルだけを読み込むことで、テストのみ行う事ができます。

```roles/nginx/tasks/main.yml
- include: test.yml
  tags: test
```

```
ansible-playbook site.yml -i hosts -t test
```

以上
【Sublime Text】簡単フォントサイズ指定【Emmet】

#EmmetとMacroを利用した簡単フォントサイズ指定
事情によりcss直書きを強いられ、Sass,Lessなどが使えない場合に便利です。
これから紹介するのは%による相対指定の場合です。
（Sublime Text2で動作を確認していますが、3でも同様のことが出来るんじゃないかと思います。）

##Howto  
前提としてEmmetが必要なのでPackage Control:Install PackageでEmmetをインストールしてください。
これから解説するマクロを導入することで、ちょこっと入力してショートカットキー押すだけで面倒くさいことが捗ります。

###Macro  
```json:easy_fontsize.sublime-macro
[
	{
		"args":
		{
			"characters": "*1"
		},
		"command": "insert"
	},
	{
		"args":
		{
			"characters": "00"
		},
		"command": "insert"
	},
	{
		"args":
		{
			"action": "evaluate_math_expression"
		},
		"command": "run_emmet_action"
	},
	{
		"args":
		{
			"characters": "\\"
		},
		"command": "insert"
	},
	{
		"args":
		{
			"characters": "1"
		},
		"command": "insert"
	},
	{
		"args":
		{
			"action": "evaluate_math_expression"
		},
		"command": "run_emmet_action"
	},
	{
		"args":
		{
			"characters": "%"
		},
		"command": "insert"
	}
]
```

これを拡張子.sublime-macroで保存してC:\Users\ユーザー名\AppData\Roaming\Sublime Text バージョン\Packages\Userに入れます。（Windowsの場合）
これで、Tool > Macrosからeasy_fontsizeコマンドを実行出来るようになりますが、せっかくなのでついでにショートカットキーも設定しましょう。

###Keymap
```json:Default(Windows).sublime-keymap
{
    "keys": ["ctrl+alt+f"], "command": "run_macro_file", "args": {
        "file": "Packages/User/easy_fontsize.sublime-macro"
    }
}
```
Preferences > Key Bindings - User に上記のコードを登録します。
ショートカットキーはお好みで変更してください。

ここからは、具体的な使い方の説明に移ります。
まずはCSSを開いたら、font-sizeを指定したいところで、fzと入力してexpandします。（ctrl+e）
画面上では``font-size: ;``が表示されるはずです
そうしたら（目的のフォントサイズ）/（ベースとなるフォントサイズ）とスラッシュを挟んで入力してください。

###CSS  
```css:test.css
.test {
	font-size: 18/14|;
}
```
この場合は18pxが目的のフォントサイズ、14pxがベースとなるフォントサイズです。
ここまで入力したらコード内の|の位置で、先ほどショートカットとして登録したctrl+alt+fを押します。
※|は実際に入力する必要はありません。

```css:test.css
.test {
	font-size: 129%;
}
```
このように変換されます。
Emmetの演算機能を使って実装しています。

元々はEmmetのsnippets.jsonにfz+なるものを追加し、計算式ごと登録してたりしたんですが、あんまりスニペットとして組み込む恩恵がなかったので、Macroで処理したほうがいいじゃんという結論に至りました。
コーディングで頻繁に出てくるフォントサイズの計算に活用して頂ければ幸いです。
OS再起動時にコンテナの自動起動(ホストUbuntu)

※OS再起動時のお話でDocker再起動時はコンテナ全滅したまんま。

[再起動後もコンテナを自動起動する](http://qiita.com/tukiyo3/items/928d1902db6372e491c2)を参考に自動起動を試みたがホストOSがUbuntuだとエラーが発生する。

```bash
root@ubuntu:~# sudo systemctl enable docker1
Failed to get D-Bus connection: No connection to service manager.
```
Ubuntu14.10のプロセス管理の仕組みはupstartが採用されている為systemdであるsystemctlコマンドはエラーになるっぽい。
ならばupstartからsystemdに変更してみる。

```diff
root@ubuntu:~# sudo apt-get install systemd
root@ubuntu:~# sudo apt-get remove upstart
root@ubuntu:~# sudo vi /etc/default/grub
- GRUB_CMDLINE_LINUX=""
+ GRUB_CMDLINE_LINUX="init=/bin/systemd"
root@ubuntu:~# sudo reboot
```

再起動したあとは[再起動後もコンテナを自動起動する](http://qiita.com/tukiyo3/items/928d1902db6372e491c2)の手順に従えばうまく行きました。
Git コマンド忘れたら見るメモ

## 共用の中央リポジトリ作成
`git init --bare --shared <repo>`


* `--bare`: 中央リポジトリ作成時に付けるオプション
* `--shared`: 共用リポジトリにつけるオプション．つけると .git/ 以下の権限が`drwxrwsr-x`になり，グループメンバーがプッシュ可能に．

## エイリアス
`git config alias.<name> <command>`


### 毎回`git status`とか打ってられない時に．
`git alias.st status`

### 私のtree
```git alias.tree 'log --color --graph --all --format="%x09%C(blue bold)%an%Creset%x09%C(yellow)%h%Creset %C(magenta reverse)%d%Creset %s"'
```

### 私のtreeof
```git alias.treeof 'log --color --graph --format="%x09%C(blue bold)%an%Creset%x09%C(yellow)%h%Creset %C(magenta reverse)%d%Creset %s"'
```

* develop ブランチの生長を見たければ，`git treeof develop` みたいに使える．

## ファイルいじって，やっぱやめる時
src/ 以下のファイルをいじった．けどやっぱ前の状態に戻りたい時

```
rm -rf src
git checkout src
```

最後のコミット時の src/ の状態を持ってこられる．

## 今のコミット，間違えた！ って時
これらの作業は過去のコミットに対する変更！
***変更が複数人に影響するときは使うべきではない？***

### ステージングエリアに乗せ忘れた
1. `git add <file>` でステージングエリアに乗せて
2. `git commit --amend` でコミットを修正．（`-m`オプションも可）

### いらないファイルまでコミットした
1. `git reset --soft HEAD^` で一つ前のコミットを取り消し．
	* この際，ステージングエリアの状態は コミット前のもの+その後にステージングされたもの が含まれる．（詳しくは下記外部リンク参照）
2. `git reset <file>` でいらないファイルをアンステージ．
3. `git commit` でコミット！

（[murankの日記 様の記事](http://d.hatena.ne.jp/murank/20110327/1301224770)によると，実際はHEADの移動(+ ステージングエリアの状態変更(+ ワーキングディレクトリの状態変更))のようで，取り消したコミットには戻れるようだ．内部の構造は要勉強か．）

---

今後も追記予定．
Synthesijer関連資料まとめ

[Synthesijer](http://synthesijer.sourceforge.net/)とは、[わさらぼ](http://wasa-labo.com/wp/)／[イーツリーズ・ジャパン](http://e-trees.jp/)の三好健文さんが開発を進めるオープンソースの[高位合成ツール](http://en.wikipedia.org/wiki/High-level_synthesis)。JavaコードからHDLコードを生成できる。

## おもなリンク

* [Synthesijer](http://synthesijer.sourceforge.net/)
* [GitHubのSynthesijerリポジトリ](https://github.com/synthesijer/synthesijer)
* ESS2014でのチュートリアル: [Synthesijerを使ったJavaによるFPGA開発のはじめ方](http://www.sigemb.jp/ESS/2014/files/IPSJ-ESS2014003-1.pdf)
* ParallellaFanさん: [Synthesijerを使ってFPGA上で動作するゲームを作る](http://cellspe.matrix.jp/zerofpga/sjr_block.html)
* ParallellaFanさん: [Synthesijerを使ってFPGAにライフゲームを実装してみた](http://cellspe.matrix.jp/parallella/synthesijer.html)
* ParallellaFanさん: [マンデルブロ集合の浮動小数点演算をFPGAで並列化する](http://cellspe.matrix.jp/parallella/mandelbrot.html)
* @TYE's Tech.Lab.さん: [FPGAで作るヴォコーダ](http://t-techlab.net/?page_id=258)
* Beatcraft: [Synthesijer](http://labs.beatcraft.com/ja/index.php?Synthesijer)
* [Synthesijerユーザーグループ](https://www.facebook.com/groups/675442689221088/)
* FPGAの部屋: [Synthesijerを試してみる1](http://marsee101.blog19.fc2.com/blog-entry-3012.html)
* わさらぼ: [Synthesijer関連発表資料](http://wasa-labo.com/wp/?page_id=160)
* みよしさん: [WIZ830MJを動かすサンプル](https://github.com/miyo/de0nano/tree/master/wiz830mj)
* みよしさん: [msgpackのサンプル](https://github.com/miyo/msgpack_synth)
* みよしさん: [Zynq + Synthesijer入門](http://www.slideshare.net/miyox/synthesijer-zynq-qs20150316)
* Qiitaに載ってる[Synthesijer関連記事](http://qiita.com/tags/synthesijer)
Ruby: coerce

Ruby の coerce に関するメモです。
coerce はあまり意識することは無いと思いますが、備忘録として記します。

# coerce
例として、1K の値(1024)を求めるとします。
以下のようなことをすると、例外が発生します。
(メッセージには「... can't be coerced ...」と出ます。)

```rb
p 1 * :K     #=> TypeError! (:K can't be coerced into Fixnum)
```

coerce できるよう、Symbol#coerce を定義してみます。

```rb
class Symbol
  def coerce(other)     # Symbol#coerce を定義する
    equiv = {
      K: 2 ** 10,       # 2の10乗         1,024
      M: 2 ** 20,       # 2の20乗     1,048,576
      G: 2 ** 30,       # 2の30乗 1,073,741,824
    }

    if (other.kind_of? Numeric) && (val = equiv[self])
      [other, val]
    else
      raise
    end
  end
end

p 1 * :K      #=> 1024            (計算できるようになる)
p 1 * :M      #=> 1048576         (     〃          )
p 1 * :G      #=> 1073741824      (     〃          )
```

できるようになりました。

---
```rb
1 * :K
```

上の形は糖衣構文であり、実際はメソッド呼び出しです。
「1」がレシーバオブジェクト、「*」がメソッド、「:K」が引数です。

```rb
1.*(:K)     # 実際は、こんな形
```

オブジェクト「1」は「*」というメソッドを知っていますが、そのメソッドで、「:K」(Symbol オブジェクト)を処理する方法を知りません。

その時、「1」は、自分を引数にして「:K」の coerce メソッドを呼び出します。

```rb
:K.coerce(self)     # self は「1」
```

coerce メソッドの返り値として期待しているのは、自分が処理できるように変換された自分と相手の値の配列です。

```rb
[変換された自分の値, 変換された相手の値]    # ここで自分が「1」、相手が「:K」
```

上の例では、Symbol#coerce を定義したので、値が返るようになっています。
(上の例では、[1, 1024] を返しています。Symbol#coerce 内では「:K」視点になるので相手(other)と自分(self)の位置が逆です) 

自分と相手の変換された値を受け取った「1」は、以降は普通に「*」(積算)の処理を行って値を返すことができます。(結果は 1 * 1024 = 1024)

```rb
p 1 * :K   #=> 1024
```

---
参考URI

「1」などNumeric オブジェクトの coerce の仕組みが書かれています。

- [instance method Numeric#coerce Rubyリファレンスマニュアル(2.1.0)](http://docs.ruby-lang.org/ja/2.1.0/method/Numeric/i/coerce.html)

ちなみに、Numeric#coerce は元からありますが、Symbol#coerce は無いようです。
Markdownを使うのに環境構築なんて不要!?

## とにかく
とにかく、これを見てください・・・

````markdown.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Markdown with HTML5</title>
<div id="content">

# 見出し1

## 見出し2

### 見出し3
これは本文です。もちろん[リンク](http://www.google.com)だって使えます。
** 太字だって **

* 普通にリストも使えるよ
* すごいね

</div>
<div id="jscontent">
<script src="marked.min.js"></script>
<script>
var content = document.getElementById("content");
content.innerHTML = marked(content.innerHTML);
</script>
</div>
````
※marked.min.js は [これ](https://github.com/chjj/marked/blob/master/marked.min.js)。

これをブラウザで開けばmarkdownがhtmlとしてレンダリングされます。編集したければいつものお気に入りのテキストエディタでOK。
> ![スクリーンショット 2014-12-21 23.40.30.png](https://qiita-image-store.s3.amazonaws.com/0/29682/b96a3f06-5869-1793-c5df-58cbff21c023.png)


CSSを作れば、見た目を良くすることも可能。なんなら、JavaScriptとCSSをインライン化すれば、Markdownで書いた資料を上司や顧客にそのまま渡すことだって可能になるのでは・・・！？

## しかもValid
シンプルなMarkdownにノイズを混ぜないように`html`、`head`、`body`と言ったタグを思い切って排除してみたんだけど、HTMLをしっかり書きたい人にとってこれは気持ち悪いかもしれないですね。

<strong>でもこれ、Validなんだぜ・・・？<strong>
>![スクリーンショット 2014-12-21 23.34.54.png](https://qiita-image-store.s3.amazonaws.com/0/29682/315b6a21-bdfe-0f88-6b50-0f722a576a1e.png)

これってつまり、

1. 構築の手間をほぼかけずに
1. 小細工なしの標準の技術のみで
1. ほとんどすべてのプラットフォームで動くMarkdownの閲覧・編集環境

が手に入るってことなのでは・・・？

おそらく、ちゃんと使おうと思ったら色々欠点は出てくると思うのだけど、Markdownの気軽さと、HTML5のクロスプラットフォーム性はとても親和性が高いんじゃないかと大きな可能性を感じたので投稿。
Emacs Mac Port の configure で 'tputs' が無いと怒られたら

次に遭遇したときに解決できる自信がないので自分用メモ。

+ Emacs Mac Port 24.4-5.2
+ Mac OS X 10.8

## あらすじ

`configure` スクリプトのエラーメッセージは、

```
configure: error: The required function `tputs' was not found in any library.
````

であったが、 `tputs` とは何の関係も無かったというおはなし。


## 確認したこと・実行したこと

+ `config.log` で問題が発生している箇所をつきとめる
+ `-lgomp` (GNU の OpenMP ライブラリ) がリンクできないと怒られている
+ コンパイラのオプションに `-fopenmp` が見える
+ しかし、OpenMP を使うように指示した覚えはない
+ `./configure --help` でオプションを調べたら `--without-imagemagick` があった
+ どうやらデフォルトで ImageMagick サポートがオンになっているらしい
+ ImageMagick のせいで OpenMP が有効になったのでは?
+ `--without-imagemagick` オプションを `configure` につけてみる
+ 解決

## 結論

Emacs Mac Port の configure で 'tputs' が無いと怒られたら `--without-imagemagick` をつける。


## 真の結論

`config.log` ファイルを確認しよう。


## 参考

最終的な `./configure` のコマンドライン

```shell-session
$ ./configure --with-mac --enable-mac-app --prefix=/opt/emacs --without-imagemagick --without-gnutls
```
illustratorCCでスウォッチライブラリからいらないスウォッチパターンを削除する方法

![logofix.png](https://qiita-image-store.s3.amazonaws.com/0/63640/b64c17c9-e3e1-518c-25db-94bbfacd3566.png "logofix.png")

スウォッチライブラリに間違えて登録してしまったスウォッチパターンや、不必要なスウォッチパターンを消す方法を紹介します。はじめから入っている色のパターンを消すことも出来ます。
スウォッチライブラリを自分の使いたいスウォッチパターンだけにすると、使いやすくて便利なのでおすすめです(>o<)☆

まずは
**ウインドウ＞スウォッチ＞左下をクリック＞"消したいパターンがあるスウォッチライブラリ名"**
でスウォッチライブラリを開きましょう。

※消したいパターンがあるスウォッチライブラリが自分が作った吸うゾッチライブラリの場合はこの方法で開くことができます。
**ウインドウ＞スウォッチ＞左下をクリック＞ユーザー定義＞"消したいパターンがあるスウォッチライブラリ名"**


## 右上のボタンを押して「未使用項目を選択」をクリック！
![スクリーンショット 2014-12-21 22.30.23.png](https://qiita-image-store.s3.amazonaws.com/0/63640/517bffde-6ef8-50cd-59c7-d18cc513927e.png "スクリーンショット 2014-12-21 22.30.23.png")
## はじめは全て選択されている状態
![スクリーンショット 2014-12-21 22.30.41.png](https://qiita-image-store.s3.amazonaws.com/0/63640/55d2c564-ee47-292c-7bc4-d55e941c9340.png "スクリーンショット 2014-12-21 22.30.41.png")</li>
## 残しておきたいスウォッチをcommandキー+クリックで選択解除する
![スクリーンショット 2014-12-21 22.32.14.png](https://qiita-image-store.s3.amazonaws.com/0/63640/0fed9a1c-478b-cebf-68a5-3982e2898b9f.png "スクリーンショット 2014-12-21 22.32.14.png")</li>
## 右下のゴミ箱ボタンをクリックして選択しているスウォッチを削除する
![スクリーンショット 2014-12-21 23.00.06.png](https://qiita-image-store.s3.amazonaws.com/0/63640/c92aeef2-e84f-ae43-8bd6-6d8bf87e5183.png "スクリーンショット 2014-12-21 23.00.06.png")

## スッキリ整理整頓！
![スクリーンショット 2014-12-21 23.00.19.png](https://qiita-image-store.s3.amazonaws.com/0/63640/0753c7f3-a67b-2897-03c1-eacd6b9c3ea6.png "スクリーンショット 2014-12-21 23.00.19.png")
CentOS 6 の cloud-init でログを出力する

AWS Marketprice の CentOS 6 HVM の AMI でも cloud-init を使ってみようとしたのですが、`/var/log/cloud-init.log` にログがまったく出力されません。

```
# cat /var/log/cloud-init.log
```

`/var/log/messages` に次のようなログが記録されていました。

```
# cat /var/log/messages
Dec 21 14:03:58 ip-10-0-1-96 [CLOUDINIT] stages.py[INFO]: Loaded datasource DataSourceEc2 - DataSourceEc2
Dec 21 14:03:58 ip-10-0-1-96 rsyslogd-2177: imuxsock begins to drop messages from pid 823 due to rate-limiting
```

これは rsyslog の rate-limiting のという機能で `/var/log/messages` に短時間に大量のログを送るプロセスがあったときにログが捨てられてしまうからのようです。

- [ログを紛失していないか？ | NCSIRTアドバイザリ | 情報セキュリティのNRIセキュア](http://www.nri-secure.co.jp/ncsirt/2013/0218.html "ログを紛失していないか？ | NCSIRTアドバイザリ | 情報セキュリティのNRIセキュア")

rsyslog の rate-limiting を無効にすれば解決しますが、そもそも cloud-init のログは `/var/log/cloud-init.log` に出力して欲しいです。

見た感じ `/var/log/cloud-init.log` に出力しようとしているっぽいのですが、この設定が効いていないようです。

```
# cat /etc/rsyslog.d/21-cloudinit.conf
# Log cloudinit generated log messages to file
:programname, isequal, "cloud-init" /var/log/cloud-init.log

# comment out the following line to allow CLOUDINIT messages through.
# Doing so means you'll also get CLOUDINIT messages in /var/log/syslog
& ~
```

`/etc/rsyslog.d/21-cloudinit.conf` を以下のように修正すると `/var/log/cloud-init.log` にログが出力されるようになります。

```
:syslogtag, startswith, "[CLOUDINIT]" /var/log/cloud-init.log
& ~
```

----

あるいは `/etc/cloud/cloud.cfg.d/05_logging.cfg` の下記の行をコメントアウトすると syslog 経由ではなく直接ファイルに書き込まれるようになります。

```
# - [ *log_base, *log_syslog ]
```
sublime text 2 + sublimeREPL + anaconda 

# sublime text 2 + sublimeREPL + anacondaでの設定方法メモ

python + numpy + scipyで信号処理関連やりたいのだけど、spyderのeditorがemacsキーバインドじゃないので泣く泣く他でセッティング。spyder使いたかった、、、

とりあえずsublime textにしてみた。環境はmac osx mavericks.

##今のところsublime textにインストールしたもの:
1. PackageControl
2. SublimeREPL
3. SublimeRope



##インストールの為にやったこと
1. install sublime text 2
2. do package install via copy & pasting stuff from here: https://sublime.wbond.net/installation
3. cmd+shift+p→installでpackage選択
4. SublimeREPLでanacondaのipythonを選択できる様にするにはPackages/User folderにファイルを作っていれる。入れるファイルについてはココを参照：http://stackoverflow.com/questions/20861176/how-do-i-setup-sublimerepl-with-anacondas-interpreter
5. Tools -> SublimeREPL-> Python -> IPython - Anacondaメニューができるのでそれを選ぶと新しいウィンドウが開く。

##MacでのPackages folderのありか
/Users/{user}/Library/Application Support/Sublime Text 2/Packages
thanks to this: http://stackoverflow.com/questions/7808452/what-is-the-full-path-to-the-packages-folder-for-sublime-text-2-on-mac-os-lion

##さて、、、
肝心のsublime textの使い方が分からない、、、
CentOS(RedHat系)の6→7で流儀が変わった件

[先日のカーネル再構築](http://qiita.com/khirose/items/18a59906561d2c887e60)で若干ドツボったので個人で新規に借りたVPSにはCentOS 7をチョイス
・・・したのですが、これまで散々CentOS6までの流儀とオレオレ流に慣れてしまっていたため、初期設定だけでもけっこう戸惑うことが多かったのでまとめ

## ifconfig /netstat がない
NICの確認とポートの解放状況のチェックですね、わかります

```bash:CentOS7
ip addr show
ss -nat

```
一応、ifconfigやnetstatはyumで入れられないこともないけど、習熟のためにあえて入れないことにした

## さらば/etc/init.d/ こんにちはsystemctl
これまで、デーモンとかの再起動は

```bash:CentOS6まで
sudo /etc/init.d/

```
でTABを押して補完という感じでやっていたけど7はsystemdに移行したので若干の生き残り以外は

```bash:CentOS7
sudo systemctl start httpd

```
みたいにしないといけない
一応、リストは/usr/lib/systemd/system/近辺をlsしてみると出てくるとはいえ、TABで候補一覧や補完がきかないのが若干やりにくいかも・・・
こりゃbash-completionも必須かな

## iptablesの設定も若干面倒（けど慣れるとしっくりくる）
CentOSなどでサーバをたてて優先してやるのはSSHのポート変更、というのは私だけじゃないと信じたい・・・（中華アタックこわいこわい）
で、ポート変更したからにはファイアーウォールに穴を開けなおさないといけないが、実は私、これまであまりiptablesのコマンドたたいてsaveして・・・という作業をやったことがない
/etc/sysconfig/iptablesに設定を追記して

```bash:CentOS6
sudo /etc/init.d/iptables reload

```
なんていう横着をしていた

CentOS7からはfirewalldというiptablesのラッパーと、ゾーンという概念ができてゾーン毎に許可するサービスを設定していく、という方式になっている
さて、SSHのポートをデフォルトの22から2525に変えたという想定でこれをどうするか、という話

まずは、firewalldに使うユーザ定義のサービスを作る
/etc/firewalld/services/ に定義内容を書いたXMLファイルを置くのだけど、 /usr/lib/firewalld/services/に定義済のものが入っているので、そのうちSSHのデフォルトのものをコピーして流用

```bash:CentOS7
sudo cp /usr/lib/firewalld/services/ssh.xml /etc/firewalld/services/ssh-alternate.xml
sudo vi /etc/firewalld/services/ssh-alternate.xml

```
```xml:/etc/firewalld/services/ssh-alternate.xml
<?xml version="1.0" encoding="utf-8"?>
<service>
  <short>SSH</short>
  <description>Secure Shell (SSH) is a protocol for logging into and executing commands on remote machines. It provides secure encrypted communications. If you plan on accessing your machine remotely via SSH over a firewalled interface, enable this option. You need the openssh-server package installed for this option to be useful.</description>
  <port protocol="tcp" port="2525"/>
</service>

```
portのところを22から2525に変更しただけ

この変更をfirewalldに教えてあげるためにリロード

```bash:CentOS7
sudo firewall-cmd --reload

```
successが返って来たらssh-alternateというサービス名が有効になっているので、このサービスを解放する

```bash:CentOS7
sudo firewall-cmd --add-service=ssh-alternate
sudo firewall-cmd --permanent --add-service=ssh-alternate

```
本来は --zone=<ゾーン名>の指定もするべきところなんだろうけど
最初のはワンショットで解放される（再起動するとすっかり忘れてしまう）
--permanentオプションをつけると再起動しても自動的にこの定義を有効にしてくれる


これまでiptablesに直書きしてたときは、コメントに残してはいるけどさらっと数字だけ見て「これ何のポートだったっけ」みたいなこともあったので、このサービスを定義してゾーン毎にサービスに紐づいてるポートを開放するという流儀は好みかもしれない

## まとめ
そこそこ時間かかりそうだけど、今後はこういうものになるんだと思って慣れるしかない
複数のEmacsでバッファを共有してペアプロできるpairpro.el作りました。

## はじめに

ペアプロや、他の人の環境を使ってコードを書くときに
「自分のEmacsを使えれば、もっと素早くかっこよくプログラムを書けるのに」
って思うことはありませんか？

ありませんか・・・

無い気もするし、ファイルを交代に編集すればいいだけかなって思ったのですが、
バッファ共有してペアプロする拡張を作りました。

## 動作イメージ

### 起動時
起動すると、バッファ共有した状態で起動します。

![起動時](https://qiita-image-store.s3.amazonaws.com/0/28665/23b8823b-63b9-df43-2038-77d196eeba41.gif)


### ペアプロ時
あとは、一方でコードを変更する度に、他方に反映されます。

![ペアプロ時](https://qiita-image-store.s3.amazonaws.com/0/28665/bfa9d5f1-4b94-2ad5-12f2-2cdb20528347.gif)

## 利用方法
### 取得
```bash
cd ~/.emacs.d/site-lisp/
git clone https://github.com/sanryuu/pairpro.git
```
### 設定
```el
;; 昔ながらの設定の追加
(add-to-list 'load-path "~/.emacs.d/site-lisp/pairpro")
(require 'pairpro)

;; Emacs起動のコマンド
(setq pp-command-emacs "/Applications/Emacs.app/Contents/MacOS/Emacs")

;; ゲストの設定ファイルのPath
(setq pp-pair-setting-file "~/.emacs.d/pair/init.el")

;; pairpro.elのファイルPath
(setq pp-file "~/.emacs.d/site-lisp/pairpro/pairpro.el")

;; 共有ファイルのディレクトリ
(setq pp-sync-file-dir "/tmp/")

;; ゲスト用の一時ファイルのディレクトリ
(setq pp-tmp-file-dir "/tmp/cache/")
```
### 起動
起動するときは、ペアプロしたいファイルを開いた状態で、
以下のコマンドで起動します。
```
M-x pp-start-pairpro
```

## まとめ

作って使ってみて、やっぱりネット越しの相手ともバッファ共有したいなーっと思いました。
リアルな場にいてもキーボードの設定で困ることがあったり、別マシン上のEmacsのバッファを共有するのは価値がある・・・かも・・・

気力があったら、継続します。
ローカルルールをSwiftで

地方の中小システム開発会社で勤務している、MeguMegu1978といいます。こんにちは。

さて、システム開発の現場で各種メッセージサービスを使うことも珍しくなくなりましたが、そんなメッセージサービス上でのやりとりの中で、"はい"の代わりに"ほい"とその亜種を使っているうちに「役職の数に応じて、"ほ"の数が決まる」という謎の仕様が策定されて、社内のエンジニアが役職に応じた"ほい"は何なのか、がわかるJavascriptを作ってくれました。

# 仕様

担当：ほい
主任：ほほい
係長：ほほほい
課長：ほほほほい
部長：ほほほほほい

…なんのこっちゃ。

最初はSwiftのFizzBuzzでも…と思っていたんですが、"swift fizzbuzz"で検索すると既に先駆者がたくさんヒットして新鮮味がないので、この地方の小さな会社で策定された仕様とJavascriptのコードをSwiftに移植する事にしました。

CUIなSwiftアプリを動かす環境構築手順なんかは割愛しています。

```swift

import Cocoa

enum Result {
    case Success(String)
    case Error(String)
}

func getHoiFromNumber(arg: Int?) -> Result {
    
    if (arg != nil ){
        var output = "";
        
        for (var i = 0; i <= arg; i++) {
            output += "ほ";
        }
        output += "い";
        
        return Result.Success(output)
    } else {
        return Result.Error("Error!.")
    }
}

var arg: AnyObject! = NSFileHandle.fileHandleWithStandardInput()
while true {
    if let data = arg.availableData {
        let str: NSString? = NSString(data: data, encoding: NSUTF8StringEncoding)
        var i: Int? = str.toInt()
        print(getHoiFromNumber(i))
    }
}
```
vplzcntd

clz が SIMD になりました。16並列で 32bit clz します。

clz は上のほうから見ます。0 の場合は32になります。

僕はいつまでたっても、clz, ctz どっちがどっちで、bsr, bsf がどっちなのか忘れますね。(どうでもいい情報。)

http://en.wikipedia.org/wiki/Find_first_set#Hardware_support なるほど？

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

unsigned int in[16] = {
    1,
    1<<31,
    (1<<31) | 1,
    (1<<16),

    0xaaaaaaaa,
    0x55555555,

    ~0,
    0,
};

unsigned int out[16];

void
dump_bits32(unsigned int a)
{
    for (int i=0; i<32; i++) {
        if (a & (1<<(31-i))) {
            putchar('1');
        } else {
            putchar('0');
        }
    }
    putchar(':');
}



int
main()
{
    __m512i v0 = _mm512_loadu_si512(in);
    v0 = _mm512_lzcnt_epi32(v0);

    _mm512_storeu_si512(out, v0);

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

```
00000000000000000000000000000001:31
10000000000000000000000000000000:0
10000000000000000000000000000001:0
00000000000000010000000000000000:15
10101010101010101010101010101010:0
01010101010101010101010101010101:1
11111111111111111111111111111111:0
00000000000000000000000000000000:32
```

何故か、AVX-512CD(conflict detection)拡張です。


明日は、@tanakmura が vrangeps について書きます。
【Sublime Text】<br>タグをショートカットキー入力【Emmet】

#EmmetとMacroを利用したキーバインドによる簡単タグ入力

Dream Weaverなどにあったショートカットキーによるタグ入力を再現したい場合に有効です。
ここでは、タイトルにもあるように主にbrタグ挿入の方法を例に解説していきます。
もともとバシャログさんで紹介されていた[こちらの方法](http://c-brains.jp/blog/wsg/13/02/13-203004.php)で実装していたのですが、XHTML,HTML5で使い分けが面倒だったので、Emmetを利用した形式に変更しました。
（Sublime Text2で動作を確認していますが、3でも同様のことが出来るんじゃないかと思います。）

##Howto
前提としてEmmetが必要なので``Package Control:Install Package``でEmmetをインストールしてください。
これから解説するマクロを導入することで、brタグ挿入を実現することが出来ます。

###Macro
```json:emmet_br.sublime-macro
[
	{
		"args":
		{
			"characters": " br"
		},
		"command": "insert"
	},
	{
		"args":
		{
			"characters": " "
		},
		"command": "insert"
	},
	{
		"args":
		{
			"by": "characters",
			"forward": false
		},
		"command": "move"
	},
	{
		"args":
		{
			"action": "expand_abbreviation"
		},
		"command": "run_emmet_action"
	},
	{
		"args":
		{
			"by": "words",
			"forward": false
		},
		"command": "move"
	},
	{
		"args":
		{
			"by": "words",
			"forward": false
		},
		"command": "move"
	},
	{
		"args":
		{
			"by": "words",
			"forward": false
		},
		"command": "move"
	},
	{
		"args": null,
		"command": "left_delete"
	},
	{
		"args":
		{
			"by": "word_ends",
			"forward": true
		},
		"command": "move"
	},
	{
		"args":
		{
			"by": "word_ends",
			"forward": true
		},
		"command": "move"
	},
	{
		"args":
		{
			"by": "word_ends",
			"forward": true
		},
		"command": "move"
	},
	{
		"args": null,
		"command": "right_delete"
	}
]
```

これを拡張子.sublime-macroで保存して``C:\Users\ユーザー名\AppData\Roaming\Sublime Text バージョン\Packages\User``に入れます。（Windowsの場合）
これで、Tool > Macrosからemmet_brコマンドを実行出来るようになりますが、ショートカットで打つのが目的なのでキーバインドを設定しましょう。

###Keymap
```json:Default(Windows).sublime-keymap
{
    "keys": ["shift+enter"], "command": "run_macro_file", "args": {
        "file": "Packages/User/emmet_br.sublime-macro"
    }
}
```
Preferences > Key Bindings - User に上記のコードを登録します。
ショートカットキーはお好みで変更してください。
Emmetでbrと打って展開したときと同様、Doctypeで打ち分けしてくれるので便利です。

なお、Emmetによるexpandの仕様上、英数字のあとにbrと打って実行すると、直前の英数字までタグとして認識してくれやがるので、それを回避するために

1. [スペース]br[スペース]と入力
1. brの後ろまでカーソルを移動
2. expand
3. ctrl押しながら前に戻りつつ前の[スペース]を除去
4. また、ctrl押しながらカーソルキーを元の位置に戻す
5. 後ろの[スペース]を除去

ということをやっています。
~~そのため入力位置の後ろにタグや記号が続く場合、ショートカットキーを入力するとbrタグが入力されたあとに、ちょっとだけカーソル位置がズレます。そこだけ若干注意です。~~
~~後ろに続くのが文字や末尾の場合はカーソル位置に変化はないです。~~
**※改良版にしたため、上記のカーソル位置のズレはなくなりました。**

直前の英数字をタグとして認識させないように回避するのが若干面倒ですが、これを応用すればbrタグ以外のあらゆるタグに活用することが出来ます。