※Android未対応、IE未確認
フォームにどこかのURLを入れてプレイボタンを押すと、サイトを取得してYahoo!の日本語形態素解析APIに渡し、その結果を雪のように降らせます。ただし、形態素解析は100KBの制限があります。
ペルソナ4 ダンシングオールナイト
話は変わって。
いままで音ゲーというのは買ったことがなかったのですが、ペルソナ4 ダンシングオールナイト（以下P4D）、曲がかっこよすぎて思わず買ってしまいました。
一応、ALL NIGHT（最高難易度）の半分ぐらいまではクリア（BRILLIANT）して、あとALL NIGHTを頑張るかHARD/NORMALでパーフェクト（KING CRAZY）を取っていくかといったところです。まあ、集中力なくてパーフェクトはなかなか取れないです。1個だけ落とした時の悔しさといったら！
そんな、P4Dの曲の中に「SNOWFLAKES」という曲があります。
これは原作の追加要素の3学期で聞けるBGMです。
この「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を入れるだけでいいと思っていたけど、いまひとつ。
テキストそのものを消すといい感じ。
color: transparent
text-shadow: 0 0 x white // xを変化させる
CSS Animationをランダムに適用する
通常、CSS Animationはスタイルに定義して、クラスを付け外しすることで実行するほうがスマートですが、ランダムにCSS Animationを生成するには、スクリプトなどでkeyframeとアニメーション定義クラスを書いたスタイルを動的にDOMに貼り付ける必要があります。昔書いて放置してたアニメーション互換プラグインが役に立った。
また、GPUを使わせると効率が良いらしい
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が使っているのか。起動コマンドが
foreman start
と簡単になるので結果オーライ。なお、IPでアクセスしたいのでProcfileにオプション追記。-o 0.0.0.0で、同じネット内からアクセスできる。gruntのタスクも起動できる。何者・・
web: bundle exec rackup config.ru -p $PORT -o 0.0.0.0
grunt: grunt