CSS3のcubic-bezierの書き方でjQueryのeasingを生成する
CSS3のアニメーションでtiming-functionを指定する際にcubic-bezier関数が使えますが、
同じ書き方でjQueryのeasingを生成できるプラグインがあります。
https://github.com/rdallasgray/bez
CSSで書くこのようなアニメーションを、
#sample { left: -100px; transition-property: left; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.02, -0.55, 0, 0.11); }
直感的にjQueryのアニメーションに置き換えられます。
$("#sample").animate({ left: '-100px' }, 500, $.bez([0.02, -0.55, 0, 0.11]));
ちなみに[0.02, -0.55, 0, 0.11]は、コーデュートのコンボカウントのエフェクトで使用している値です。
元々コンボのエフェクトはCSSアニメーションで実装していたんですが、環境によってはキーを押したときの反応が鈍くなったため、JavaScriptでの実装に変更しました。
ただ、最近のブラウザは超スピードで進化し続けているので、高速化を図るときは俗説にとらわれず最新ブラウザの挙動を常に観測していく必要があるなーと感じました。
【コーデュート！】コード一覧でランキングの順位を表示
ユーザーからの要望により、コード一覧の中でランキング登録済みのものに、本人の順位を表示する機能を追加しました。
確かにこれは便利や！
一人で作っていると隅々まで気配りが行き届かないことが多いので、実際に使った人からの声はかなり参考になります。
不具合報告・ご要望はサイトのメニューから気軽に送信できるようになっているので、もし不具合を見つけたり、あったら便利そうな機能を思いついた方はぜひお聞かせください。
お陰様で、徐々にタイピングサイトとしてサマになってきた気がします＼(^_^)／
コーデュート！ | https://codeute.com/
【コーデュート！】レーティングの計算式
現在レーティングは下記の式で求めています。
本人の平均スコア × SQRT(ポイントの合計)
ポイントとは、各ランキングの順位を反転させたものです。
10人参加しているランキングで、2位の人のポイントは「9」になります。
【コーデュート！】2013/10/10の変更点
【変更点】
- ゲームスタートのトリガを「スペースキー」から「コードの最初の文字」に変更しました。スピードやミス率の計測はコードの2文字目からになります。
【新機能】
- 結果画面でツイートボタンを押すと、結果をツイートできるようにしました。
※いいね！ボタンやツイートボタンを押した後はキー入力が無効になっているので、リトライ時は一度画面をクリックしてください。
そろそろレーティングの算出法も見直したいと思います！
コーデュート！ | https://codeute.com
【コーデュート！】2013/10/09の変更点
前回の記事からの変更点です。
【修正】
- 結果画面でランキング登録ボタンが押せなくなるバグを修正しました。
- 非公開コードの記録が総合ランキングに反映されていた不具合を修正しました。
【新機能】
- C言語に対応しました。HelloWorldも追加 https://codeute.com/c/0
- 検索結果のソート項目に「ランク登録数」を追加しました。
- キーボードの表示/非表示の情報をアカウントに紐づけて自動保存します。(ログイン時のみ有効・Ctrl+Sで切替えます)
- ランキング登録時に、レーティングの変動が分かるようにしました。
暇潰しにレーティング稼ぎましょう！コードも募集中です('_')
コーデュート！ | https://codeute.com
【コーデュート！】総合ランキングを実装しました
全ランキングと言語別ランキングを集計した総合ランキングを実装しました！
今のところ、コード毎の
- 本人の順位
- 本人のスコア
- ランキング参加人数
の3つの値をもとに総合スコアを集計しています。
総合スコアは、多くのランキングに登録してコツコツと増やすこともできますし、人気の高いランキングで上位を獲得することで劇的に稼ぐこともできます。
まだβ版なので、様子を見ながらスコアバランスを調整していく予定です。
ちなみに、ランキングは項目名をクリックするとその項目でソートすることができます。
ぜひ、総合ランキングで上位を目指してみてください！
コーデュート！ | https://codeute.com/
近いうちに、タイピング結果をツイートできる機能を追加予定です。
【コーデュート！】ESCキーでのリトライ機能を実装しました
以前から要望にあがっていたESCキーでのリトライ機能をちゃんと実装しました。
ESCを押すと、リロードせずにプレイ前の状態に戻ります！
実装に時間がかかってたのは、自分が2ヶ月前に書いたコードを読み解けなかったからです（汗
暇つぶしに遊んでみて下さい！
コーデュート！ | https://codeute.com
【コーデュート！】今日の修正＆変更点
送っていただいた要望を参考にして、細々とした修正を行いました。
【結果画面】
- ヒートマップ上の空白文字(打った文字のみ)を可視化
- ミスした文字をヒートマップ上で可視化
- グラフにタイプ速度のペース(1分あたりのタイプ数)を追加
【その他】
- Ctrl+Sでキーボードの表示・非表示を切り替えるようにしました(仮) 今後分かりやすいインターフェースを実装予定
- Escを押すとリロードしてリトライできるようにしました(仮)
グラフ表示でハマった事があって、思ったより時間がかかってしまった…('_')
近いうちに、諸々ののレイアウト設定をアカウントごとに保存する仕組みを作る予定です。
あとはランキングの新システムのアイデアをひねっています。今はユーザーのやる気を引き出す仕組みが全然足りない感じですなヽ(´ρ｀)ﾉ
Webアプリ「コーデュート！」をリリースしました。
書いたコードをタイピングゲームにしてシェアできるWebアプリ「コーデュート！」をリリースしました。
ネタ要素が強いですが、よかったら遊んでみて下さい！
Codeute! | https://codeute.com/
【FuelPHP】 minifyしたHTMLをデータベースにキャッシュする
前回FuelPHPからHTMLをminifyして出力するメモをしましたが、
圧縮処理に時間がかかっているようだったので、圧縮した結果をデータベースにキャッシュすることにしました。
【条件】
- ボトルネックになっているのは、HTMLの圧縮処理そのもの
- 同じURLでも、ユーザーごとに表示される内容が違う
- 一度生成したページの内容が更新されることは少ないが、更新された場合は即反映したい
【データベース】
CREATE TABLE t_page_cache ( f_user_id VARCHAR(115), f_uri VARCHAR(100), f_page MEDIUMTEXT, f_cache MEDIUMTEXT, f_date DATETIME, PRIMARY KEY (f_user_id, f_uri) ) ENGINE=MYISAM DEFAULT CHARSET=utf8 collate = utf8_unicode_ci;
【FuelPHP】
<?php require_once APPPATH.'classes/model/vendor/autoload.php'; class Model_Html extends Model { public static function minify($view, $uri = false) { // viewオブジェクトを強制レンダリングして文字列化 $view = $view->render(); // minify時のオプション $minifyOption = array( 'doctype' => 'html5', 'optimizationLevel' => 1 ); // uriが指定されていなかった場合は、強制的にminifyしてリターン if ($uri === false) { return zz\Html\HTMLMinify::minify($view, $minifyOption); } // ユーザーID取得 $user_id = Session::get('user_info.id', ''); // $user_idと$uriをもとに、該当する圧縮データを取得 $query = DB::select('f_page', 'f_cache') ->from('t_page_cache') ->where('f_user_id', $user_id) ->and_where('f_uri', $uri) ->limit(1)->execute()->as_array(); // 検索結果が存在した場合 if (0 < count($query)) { // 圧縮前HTMLが等しかったら、キャッシュを返す if ($query[0]['f_page'] === $view) { return $query[0]['f_cache']; } // 圧縮前HTMLが違っていたら、圧縮し直し＆DB更新 else { $minview = zz\Html\HTMLMinify::minify($view, $minifyOption); DB::update('t_page_cache') ->set(array( 'f_page' => $view, 'f_cache' => $minview, 'f_date' => date('Y-m-d H:i:s') ))->where('f_user_id', $user_id) ->and_where('f_uri', $uri) ->execute(); return $minview; } } // 検索結果が存在しない場合、DBにデータを追加する else { $minview = zz\Html\HTMLMinify::minify($view, $minifyOption); DB::insert('t_page_cache') ->set(array( 'f_user_id' => $user_id, 'f_uri' => $uri, 'f_page' => $view, 'f_cache' => $minview, 'f_date' => date('Y-m-d H:i:s') ))->execute(); return $minview; } } }
コントローラ
<?php ... $view = View::forge('index'); $view->header = View::forge('header'); $view->footer = View::forge('footer'); // viewとURLを渡して、minifyした結果をリターン return Response::forge(Model_Html::minify( $view, Uri::current() ));
FuelPHPでURLを取得するメソッドは色々ありますが、その中でもUri::current()は、routes.phpのパターン内部で定義されているベースURLが取得できます。
例えば、存在しないURLにアクセスされた場合は、404ページのURLが返されるので、データベースのキャッシュ数が少なくなります。
