motoolsでタイピングゲーム。名前はmooTypingだよ！（安直）
ゲームっぽくなってきたのでテスト中画面を晒してみる。
製作中デモ置き場▼
View Demo »
解説ページ▼
View Document »
※IE6は未対応（っていうか未確認）です。表示が残念な事になると思う。
時間とTypespeed,Complete,Option,Help、ゲームの終了は未実装。
画面レイアウト、画面デザイン、問題が変更可能。
デフォルトは画像が横ワイドですが、CSS変えれば縦にもできます。
東方projectのZUNさんの「音楽聞いてもらうためにゲームつくった」って話がありますが
それと似たような感じで、見せたい画像使って問題作れるので
何か人に見てもらいたいものがあるなら中々いいツールになるんじゃないかな～～。って妄想。
ゲーム中は画像見れねぇだろ、ってツッコミは無しでｗ
“[mootools] Ajaxでタイピングゲームを作る” の続きを読む
405エラーは主に、POSTメソッドの使用が許されていない場所で、POSTメソッドを使用した場合に返される。
さくらインターネット等、CGIやSSI等のダイナミックコンテンツにしかPOSTメソッドが容認されていない場合に、
AjaxでXMLHttpRequestメソッド使った時にタイプがPOSTだと405 Method Not Allowedになる。
CGIでも.htaccessにAddHandler cgi-script .cgi などが記述されておらず、
CGIとして設定されていない状態でPOSTで送ると同じエラーになる。
Apache1.3系は静的ファイルにPOSTが使えない。
Apache2系はPOSTもGETも同じ挙動。
解決策
XMLHttpRequestメソッドのタイプをPOSTからGETに変更
※.htaccessでAddHandler server-parsed .htmlとするのは良くない。
スクロールバーをカスタマイズ出来るmootools依存のライブラリslideBoxを、マウスホイールでも動くよう適当に変更してみた。
デフォルトだと矢印のクリックでスクロールするんだけど、
基本的なスクロール量は表示エリアの高さ（class-wrapper）と同じだから、マウスホイールで微調整したくなる場合もある。
使い方はファイル落とせば分かると思うので省略。
オプションは次の通り
options: {
className:'slide', // スライドするエリアのクラス名
prevArrow:'-previous', //前にスライドする矢印の接尾語
nextArrow:'-next', // 後にスライドする矢印の接尾語
removeArrows:true, //先頭と最後にスクロールしたとき矢印消すかどうか
fadeArrows:false, // 矢印にフェードエフェクトつけるかどうか
startOpacity:0.5, //フェードエフェクトがスタートした時の矢印の透明度
endOpacity:1, //フェードエフェクトが終わった時の矢印の透明度
mouseoverBox:true, //スライダー内にあるULとLI要素にクラスを追加するかどうか
startClass:'normal', // マウスアウト時に追加するクラス名
endClass:'over', //マウスエンター時に追加するクラス名
speed:5, //スクロールスピード（10:fast 1:slow）
transition:Fx.Transitions.Quart.easeOut //スクロールのトランジション効果
},
カスタマイズ部分のソースのみ掲載してます。
“[mootools]slideBox ver1.0をマウスホイールに対応させる” の続きを読む
マウスオーバーの画像作るのﾒﾝﾄﾞｸｾｰと思ったときに、画像１枚でごまかせるから便利。
普通のロールオーバーよりも凝ったことも出来るので手抜きに見えない所が良いですｗ
難点はjavascriptオフで効果がなくなることですが、
javascriptを意識的にオフしてる人というのは限られてるので大丈夫だと思います。
prototype＆script.aculo.us、jQuery、mootoolsでそれぞれ書いてみた。
それじゃあタグ変えて中身をtableの外に出せばいいんじゃん。（そしたらfloatできるじゃん）
…という発想から出来たソース。mootools使用。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも
IEはthead、tbody、tfootへのfloat、positionが効かない。
効果的なハックがあればいいんだけど見つからなかった。
つくづくIEはダメな子だな。
引き出しみたいなメニューっぽいものを作るサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも
実際やってみると分かるが、Fx.Slide要素にリストメニュー等をくっつけてタブっぽくさせると、
動かしたとき微妙に隙間が出来てしまう。（横方向にくっつけた場合は出来ない。）
それで色々考えた結果、position駆使すれば出来るじゃない、という結論が出た。
mootoolsのElementプロパティでテーブルを作るとき、階層を守って作らないとIEで表示されない。
見事にハマったので詳細をメモっておくことにする。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも
“[mootools]Tableを作る時の注意” の続きを読む
新着記事にNEWをつけたりする感じのもののサンプル。
PHPで書いたやつをJavascriptで書いてみる。
function Mark(){
var date ="2008/04/01";//ログの年月日
var interval ="4" //表示期限
a = new Date();
b = Date.parse(date)+ (parseInt(interval) * 24 * 3600 * 1000);
c = a.getTime();
if(b>=c) document.write("New");
else document.write("Old");
}
javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。
最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて（スライドとかで）、javascript無効にすると まったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。（CSS無効でもXHTMLだからそれなりに見れる）
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。
ボタンやリンククリックでフェードインアウトさせるサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものです。追記で1.2の解説もしてます。
mootoolsを使ってスタイルシートを切り替えるサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも
ベースのCSSをlinkさせておいて、クリックでCSSファイルを切り替えるようにする。
ボタンをクリックしたときCookieを発行し、リロードしたら記憶させたCSSファイルを読み込んで表示する。
リロードしても選択したCSSを表示する動作になるが、Cookie読み込んだりAssetしたりというJavascriptの動作分だけ、CSSが切り替わるのにタイムラグが発生する。
Assetよりｓｒｃだけ書き換えた方がいいのかも。
書き散らしたから汚い…
mootoolsで最近ブログに多いスタイルシート切り替えのサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも
スタイルの違うファイルを３種類用意し、それぞれボタンを押すと切り替わるようにするもの。
このサンプルは記憶させないので、ページを開くたびにシートがデフォルトに戻る。
mootoolsでアクセスするたびにスタイルシートを変えるサンプル。
（ダウンロード時にRemoteのAssetsが必須）
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも
読み込みが始まってからランダムを実行するので、スタイルが適用されるまで数秒のタイムラグが発生する。
レイアウトのスタイルをlinkしといて、このランダムで上書きするのが妥当かも。
window.addEvent('domready', function(){
var style = ['style-a.css','css/style-b.css','css/style-c.css'];
var src = style.getRandom();
new Asset.css(src, {id: 'base'});
});
アクセス初回だけという制限も出来ると思うが、そもそもCSSをランダムにする必要があるのかは疑問。
どうせやるならボタン切り替えの方がいいと思うが、どっちにしても押し付けがましい気がして個人的にはあまり好きではない。
mootoolsでラジオボタンの値の取得をするサンプル。
普通のjavascriptで書くより短くて楽だけど、わざわざこれだけのためにmootoolsを使うことはないと思う。
mootoolsで長いページにあると便利なＴＯＰへ戻るリンクを自動挿入するサンプル。
Ｄｒｅａｍｗｅａｖｅｒだとアセットとかテンプレートとかあるのでそっち使ってもいいけど。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも
“[mootools]ＴＯＰへ戻るリンク” の続きを読む