できたもの

[Rubyrubi](https://rubygems.org/gems/rubyrubi)



# Rubygemsに登録

なにはともあれ公開するなら[Rubygems](https://rubygems.org/)にアカウント（？）を作る

# ひな形作成

```bash
bundle gem hogehoge -t
```

-tでRSpecのテストがつく。TDDで作ります。

# gemspecを編集

summery/description/homepageあたりを入力する。`TODO`を残していると`rake/build`するとき怒られる。

`Prevent pushing this gem to...`の後段のセクションはコメントアウトする。これは間違って公開してはいけないgemを公開しないようになっているらしいです。

```
ERROR:  While executing gem ... (Gem::CommandLineError)
    Too many gem names (/Users/itochang/gems/hogefuga/pkg/hogefuga-0.1.0.gem, Set, to, http://mygemserver.com); please specify only one
```

コメントアウトしないとこのエラーメッセージが出て`rake/release`の時にgemをリリースできない。

via http://qiita.com/tossh/items/08e7165e730dbc1a0e2e

# gitリポジトリ作成

リリースするならリモートも追加しとかないとだめみたい。リモートはgithubに作りましたが、gitbucketとかでもできるのかな？

# rake/build

現在のバージョンのpkgを作成。

# rake/release

Rubygemsへリリース。リモートへの`push`も行う模様。

最初は確か、Rubygemsに登録したメールとパスワードを聞かれたような気がする。

ほとんどお膳立てされており、よくわからないことも多いが、とりあえずできた。
ちなみに、作成したのは[Rubyrubi](https://rubygems.org/gems/rubyrubi)という、テキストにルビタグを貼って返すgemです。[Rubyfuri](https://rubygems.org/gems/rubyfuri)というgemを参考にさせていただきました。

# おまけ

Guardを入れました。

```ruby
gem "guard"
gem "guard-rspec"
```

nodeで言うgruntとかgulpですかね。`guard`コマンドでファイル監視＆テストができます。

はじめてRuby gemを作った時のメモ

[Riot](http://riotjs.com/ja/)はReactライクなマイクロMVPライブラリです。タスクランナーを噛ませたいので[こちらのサンプル](Adding compiled Riot tags to your Gulp + Browserify build)を動くようにしたり、いろいろいじってみた。

- [デモ](http://110chang.github.io/riot-test/dest/)

時計を表示する`clock`タグを表示します。インスタンスごとに長針・短針・秒針の表示を変えています。マウスホバーでポーズします。

via [Adding compiled Riot tags to your Gulp + Browserify build](http://www.triplet.fi/blog/adding_compiled_riot_tags_to_your_gulp_browserify_build/)



# Riotタグを書く

Riotの特徴はなんといってもHTML+CSS+JavaScriptの混ぜ書き。一見HTMLに見えますが、JavaScriptとしてトランスパイルされます。

```html

<clock>
  <svg>
    <line></line>
    <circle></circle>
    ...
  </svg>

  <style scoped>
    :scope {
      ...
    }
    svg {
      ...
    }
    ...
  </style>

  <script>
    // ↑このscriptタグは省略できる
    // ↓メソッド構文
    test() {
      ...
    }
    // function文も共存する
    function hogehoge() {
      ...
    }
  </script>
</clock>
```

シンタックスはとりあえず、スクリプト部分に`script`タグを入れてHTMLのシンタックスにしてみた。

## scoped スタイル

`scoped`スタイルはトランスパイルされるとそのタグの子セレクタとなります。

```css
clock svg {
  ...
}
```

Firefoxだけは`scoped`属性を実装しているようです。

## メソッド構文

奇妙に見えますがRiotタグの中では

```html
<clock>
  test() {
    ...
  }
</clock>
```

という書き方ができます。これはES6のクラス構文のような感じです。

```js
class Clock {
  test() {
    ...
  }
}
```

同じタグの中に`function`文による定義が混じっていると、一瞬あれっ、てなります。

トランスパイル後は

```js
this.test = function() {
  ...
}.bind(this)
```

となります。この時の`this`はRiotタグのインスタンスになります。


# メインで呼び出す

RiotとRiotタグを`require`して`mount`します。

```js
// main.js

var riot = require('riot');

require('./tags/clock.tag');

riot.mount('clock');
```

# GulpでRiotをトランスパイル

Riotタグのトランスパイルは[riotify](https://github.com/jhthorsen/riotify)が用意されています。あとは[baberifyと同様](http://qiita.com/110chang/items/624121e1c69f24525279#jsx%E3%82%92gulp%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B%E3%81%AE%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%AA%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8)ですね。

```js
//gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var riotify = require('riotify');
var source = require('vinyl-source-stream');

...

gulp.task('concat', function () {
  return browserify({
    debug: true,
    entries: ['path/to/main']
  }).transform([riotify])
    .bundle()
    .pipe(source('main.bundle.js'))
    .pipe(gulp.dest('path/to/dest/'));
});
```

# HTMLに組み込む

定義したタグとトランスパイルしたバンドルをHTMLに追加します。

```html

<!DOCTYPE html>
<html>
  <head>
    <title>Riot Clock</title>
  </head>
  <body>
    <clock></clock>
    <script src="main.bundle.js"></script>
  </body>
</html>
```

# ループ＆子タグ

設定を配列で用意して子タグにオプションを渡す構造にしてみた。まず、親タグを書く。

```html

<clocks>
  <clock
    each={ clocks // means this.clocks }
    some-opts={ someOpts // means this.clocks[*].someOpts }
    another-opts={ anotherOpts // means this.clocks[*].anotherOpts }
    ...
  ></clock>
  <script>
    this.clocks = [{
      // this child has no options
　　 }, {
      // this child has options
      someOpts: true
    }, {
      // this child has another options
      anotherOpts: true
    },
    // ...
    }];
  </script>
</clocks>
```

他のデータバインドやテンプレート言語の経験から

```html

<clocks each={ clocks }>
  <clock some-opts={ someOpts }></clock>
</clocks>
```
こう書きたくなりますが、違うみたいです。一方で、設定オブジェクトのプロパティをそのまま受け継いでおり、楽チンです。

メインでは両方のタグをマウントすればよし。

```js:main.js
var riot = require('riot');

require('./tags/clocks.tag');
require('./tags/clock.tag');

riot.mount('*');
```

HTMLには親タグのみ記述

```html:index.html
<clocks></clocks>
<script src="main.bundle.js"></script>
```


# その他

## モジュール化

タグ内部で普通に`require`を使えるので、今までBrowserify等使っていれば、同じ感覚でコーディングできます。

```html

<clock>
  ...
  <script>
    var $ = require('jquery');
    ...
  </script>
</clock>
```

いろいろ外部化したほうが見やすいような気がします。Min-inの`init`メソッドは自動で実行されます。

```js
// mixin/clock.js

var ClockMixin = {
  init: function() {
    ...
  },
  test: function() {
    ...
  }
}
module.exports = ClockMixin;
```

```html

<clock>
  ...
  <script>
    var ClockMixin = require('path/to/mixin');
    this.mixin(ClockMixin);
  </script>
</clock>
```

ファイルが別になってしまうと、コンポーネントっぽさが失われてしまうというのはありますね。こうとか？

```html

<clock>
  ...
  <script>
    ...
    this.mixin({
      init: function() {
        ...
      },
      test: function() {
        ...
      }
    });
  </script>
</clock>
```

Mix-inはRiot的には、このように書くようです。これはまたシンタックスががが…

```html

var ClockMixin = {
  init: function() {
    ...
  },
  test: function() {
    ...
  }
}
<clock>
  ...
  <script>
    ...
    this.mixin(ClockMixin);
  </script>
</clock>
```

使い方は簡単ですが、シンタックスとか記法に納得するのが大変かも。でも個人的には使ってみたいです。

[https://github.com/110chang/riot-test](https://github.com/110chang/riot-test)

Riot+Gulp+Browserifyで時計サンプルを動かす

ちょっとしたES6スクリプトをテスト付きでさくっと試すためのテンプレを作りました。

テストランナーはKarma、テスト本体はJasmineです。

はじめてpackage.jsonとかreadmeまじめに書きました。

[https://github.com/110chang/babel-starter](https://github.com/110chang/babel-starter)



任意のリポジトリを作成して、一時的にこのテンプレをリモートに設定し、プルしてからリモートを削除。

```bash
git remote add babel-starter https://github.com/110chang/babel-starter.git
git pull babel-starter master
git remote rm babel-starter
npm i
karma start
```

余談ですが、Generatorを動かすにはbabel-polyfillをインストールして、設定に加える必要があるみたいです。

```js
    ...
    // list of files / patterns to load in the browser
    files: [
      'node_modules/babel-polyfill/browser.js',
      ...
    ],
    ...
```

via [RegeneratorRuntime is not defined](http://stackoverflow.com/questions/28976748/regeneratorruntime-is-not-defined)

ES6+Karma+Jasmine環境のテンプレート

2016年もよろしくお願いします。

<div class="content-holder">
  <figure>
    <a data-flickr-embed="true"  href="https://www.flickr.com/photos/20720251@N04/24117088036/in/dateposted-public/" title="2016-monkey"><img src="https://farm6.staticflickr.com/5829/24117088036_eb6a3fc353_z.jpg" width="640" height="426" alt="2016-monkey"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
  </figure>
</div>



背景の画像はJavaScriptで機械的に加工しました。「賀正」は父に書いてもらいました。

輝度の標準偏差が一定の基準に満たない場合、画面を4分割してそれぞれに同じことを行い、基準を満たしたらその領域の平均の色で塗りつぶす、を繰り返すと画面の複雑なところほど細かく分割される、という結果になります。

単に塗りつぶしていますが、ドット（円）にしたりすると、また面白いかも・・

最近はアルゴリズムに興味があって、Cのアルゴリズムの入門書を読んだりしています（ごく初歩的なものです）。今回使ったのはモートン順序と4分木という多少複雑なもので、ネットで調べたものです。

詳細な記事も書きたいと思っています。

Archive for 2016

はじめてRuby gemを作った時のメモ

Riot+Gulp+Browserifyで時計サンプルを動かす

ES6+Karma+Jasmine環境のテンプレート

新年明けましておめでとうございます。