できたもの

[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を作った時のメモ

<div class="content-holder">
  <figure>
    <a href="https://cssnowflakes.herokuapp.com/" title="CSSnowflakes by YUJI ITOH, on Flickr"><img src="https://farm1.staticflickr.com/422/19333023969_7147a0bbe2.jpg" width="500" height="326" alt="CSSnowflakes"></a>
    <figcaption>CSSnowflakes</figcaption>
  </figure>
</div>

* [CSSnowflakes](https://cssnowflakes.herokuapp.com/)

※Android未対応、IE未確認

フォームにどこかのURLを入れてプレイボタンを押すと、サイトを取得して[Yahoo!の日本語形態素解析API](http://developer.yahoo.co.jp/webapi/jlp/ma/v1/parse.html)に渡し、その結果を雪のように降らせます。ただし、形態素解析は100KBの制限があります。




# ペルソナ4 ダンシングオールナイト

<div class="content-put-right">
  <iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=110changcom-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=B00T5VRSXC" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</div>

話は変わって。

いままで音ゲーというのは買ったことがなかったのですが、ペルソナ4 ダンシングオールナイト（以下P4D）、曲がかっこよすぎて思わず買ってしまいました。


一応、ALL NIGHT（最高難易度）の半分ぐらいまではクリア（BRILLIANT）して、あとALL NIGHTを頑張るかHARD/NORMALでパーフェクト（KING CRAZY）を取っていくかといったところです。まあ、集中力なくてパーフェクトはなかなか取れないです。1個だけ落とした時の悔しさといったら！

そんな、P4Dの曲の中に「SNOWFLAKES」という曲があります。

これは原作の追加要素の3学期で聞けるBGMです。

* [SNOWFLAKES(NARASAKI Remix)｜P4D - ペルソナ4 ダンシング・オールナイト - 公式サイト](http://p-atlus.jp/p4d/music/music12.html)

この「SNOWFLAKES」のPVで、歌詞が雪みたいに降ってくる表現を、CSS Animationを使って真似してみました。記憶では全体が雪エフェクトだと思っていたのですが、確認してみると最後のところだけですね。


# はじめてのRubyアプリケーション

いつか自力でバックエンドからアプリを書いてみたいと思っていたのですが、今回、実現することができました。まあ、自力といっても検索首っ引きですけども。

言語はRubyで、フレームワークにSinatraを使い、Herokuにデプロイしました。

テンプレートはSlim、スタイルはSASS(Compass)、今回はJavaScriptのモジュール管理をRequireJSではなくBrowserifyにしてみました。

Herokuにデプロイしたはいいものの、ちょっと遅すぎるので、HTML・CSS・JSのuglifyを行いました。一応、許容範囲かな・・

本格的なRubyのアプリはともかく、JSONを返すアプリを作ってそれをAjaxで利用する方法は、私でも応用が効きそうです。


# CSS Animation関連


## ぼかしエフェクト

単純に`text-shadow`を入れるだけでいいと思っていたけど、いまひとつ。
テキストそのものを消すといい感じ。

```sass
color: transparent
text-shadow: 0 0 x white // xを変化させる 
```


## CSS Animationをランダムに適用する

通常、CSS Animationはスタイルに定義して、クラスを付け外しすることで実行するほうがスマートですが、ランダムにCSS Animationを生成するには、スクリプトなどでkeyframeとアニメーション定義クラスを書いたスタイルを動的にDOMに貼り付ける必要があります。昔書いて放置してたアニメーション互換プラグインが役に立った。

[jQuery.CSS3animate](https://github.com/110chang/css3animate)

また、GPUを使わせると効率が良いらしい

```js
left: x, top: y // use CPU
transform: 'translate(x, y)' // use GPU
```

`transform`だとAndroidが盛大にバグるけど仕方ないね。


# いろいろよくわかってない

よくわかっていないけど、なんとなく使っているもの。


## rack

rackはサーバーとアプリケーション間のインターフェースとかなんとか。config.ruはrackの設定ファイル。確かに、参考サイトを当たっているとWEBrickとかSinatraだとthinを使えとかあるから、いろいろなサーバーの使い勝手を統一するもの、という理解でいいのでしょうかね。


## foreman

なぜこれを使っているのかいまいち思い出せない。Ruby製のタスク管理ツールみたいなもの？　Herokuインストール時に自動的に入るみたいなのでHerokuが使っているのか。起動コマンドが

```bash
foreman start
```

と簡単になるので結果オーライ。なお、IPでアクセスしたいのでProcfileにオプション追記。`-o 0.0.0.0`で、同じネット内からアクセスできる。gruntのタスクも起動できる。何者・・

```bash
web: bundle exec rackup config.ru -p $PORT -o 0.0.0.0
grunt: grunt
```

Articles tagged 'Ruby'

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

ウェブサイトのテキストを雪のように降らすウェブアプリCSSnowflakes