[mootools] Ajaxでタイピングゲームを作る

motoolsでタイピングゲーム。名前はmooTypingだよ!(安直)
ゲームっぽくなってきたのでテスト中画面を晒してみる。

製作中デモ置き場▼
View Demo »

解説ページ▼
View Document »

IE6は未対応(っていうか未確認)です。表示が残念な事になると思う。
時間とTypespeed,Complete,Option,Help、ゲームの終了は未実装。

画面レイアウト、画面デザイン、問題が変更可能。
デフォルトは画像が横ワイドですが、CSS変えれば縦にもできます。

東方projectのZUNさんの「音楽聞いてもらうためにゲームつくった」って話がありますが
それと似たような感じで、見せたい画像使って問題作れるので
何か人に見てもらいたいものがあるなら中々いいツールになるんじゃないかな~~。って妄想。

ゲーム中は画像見れねぇだろ、ってツッコミは無しでw
“[mootools] Ajaxでタイピングゲームを作る” の続きを読む

[js]Ajax.Requestと405 Method Not Allowed

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とするのは良くない。

“Ajax.Requestと405 Method Not Allowed” の続きを読む

[mootools]slideBox ver1.0をマウスホイールに対応させる

スクロールバーをカスタマイズ出来る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をマウスホイールに対応させる” の続きを読む

[JS]マウスオーバーでリンク画像の透明度とか変更

マウスオーバーの画像作るのメンドクセーと思ったときに、画像1枚でごまかせるから便利。
普通のロールオーバーよりも凝ったことも出来るので手抜きに見えない所が良いですw
難点はjavascriptオフで効果がなくなることですが、
javascriptを意識的にオフしてる人というのは限られてるので大丈夫だと思います。

prototype&script.aculo.us、jQuery、mootoolsでそれぞれ書いてみた。

“[JS]マウスオーバーでリンク画像の透明度とか変更” の続きを読む

[mootools]theadやtbodyのfloat:leftがIEで効かないので

それじゃあタグ変えて中身をtableの外に出せばいいんじゃん。(そしたらfloatできるじゃん)
…という発想から出来たソース。mootools使用。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

IEはthead、tbody、tfootへのfloat、positionが効かない。
効果的なハックがあればいいんだけど見つからなかった。
つくづくIEはダメな子だな。

“[mootools]theadやtbodyのfloat:leftがIEで効かないので” の続きを読む

[mootools]タブとFx.Slideの合わせ技

引き出しみたいなメニューっぽいものを作るサンプル。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

実際やってみると分かるが、Fx.Slide要素にリストメニュー等をくっつけてタブっぽくさせると、
動かしたとき微妙に隙間が出来てしまう。(横方向にくっつけた場合は出来ない。)
それで色々考えた結果、position駆使すれば出来るじゃない、という結論が出た。

“[mootools]タブとFx.Slideの合わせ技” の続きを読む

[JS]設定した期間だけNEWを表示する

新着記事に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");
}

“[JS]設定した期間だけNEWを表示する” の続きを読む

[JS]Javascriptの有効・無効でCSSを変更する

javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。

最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて(スライドとかで)、javascript無効にすると まったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。(CSS無効でもXHTMLだからそれなりに見れる)
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。

“[JS]Javascriptの有効・無効でCSSを変更する” の続きを読む

[mootools]ボタンでスタイルシートを切り替える(Cookie使用)

mootoolsを使ってスタイルシートを切り替えるサンプル。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

ベースのCSSをlinkさせておいて、クリックでCSSファイルを切り替えるようにする。
ボタンをクリックしたときCookieを発行し、リロードしたら記憶させたCSSファイルを読み込んで表示する。
リロードしても選択したCSSを表示する動作になるが、Cookie読み込んだりAssetしたりというJavascriptの動作分だけ、CSSが切り替わるのにタイムラグが発生する。
Assetよりsrcだけ書き換えた方がいいのかも。

書き散らしたから汚い…

“[mootools]ボタンでスタイルシートを切り替える(Cookie使用)” の続きを読む

[mootools]ボタンでスタイルシートを切り替える

mootoolsで最近ブログに多いスタイルシート切り替えのサンプル。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

スタイルの違うファイルを3種類用意し、それぞれボタンを押すと切り替わるようにするもの。
このサンプルは記憶させないので、ページを開くたびにシートがデフォルトに戻る。

“[mootools]ボタンでスタイルシートを切り替える” の続きを読む

[mootools]ランダムスタイルシート

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]TOPへ戻るリンク

mootoolsで長いページにあると便利なTOPへ戻るリンクを自動挿入するサンプル。
Dreamweaverだとアセットとかテンプレートとかあるのでそっち使ってもいいけど。

※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも
“[mootools]TOPへ戻るリンク” の続きを読む