MooTools

Ajaxライブラリmootoolsを使ったサンプルやtips

[mootools]押されたキーを取得する

by

mootools1.2ではEventメソッドのプロパティkeyとcodeで押されたキーのキーコードとキーの名前（小文字）を取得出来ますが、ちょっとクセがある。

<script type="text/javascript">
//<!&#91;CDATA&#91;
	window.addEvent('domready', function(){
	
	$("text").addEvent('keydown',function(event){
		var p = new Element("p");
		p.set("text","Code:&#91;"+event.code+"&#93; Key:&#91;"+event.key+"&#93;");
		$("test").adopt(p);
	});
	
	});
//&#93;&#93;>
</script>

Firebug使ってるならconsole.log()でもいい

<input type="text" id="text" size="40" />
<div id="test"></div>

続きを読む

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

by

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

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

解説ページ▼
View Document »

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

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

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

ゲーム中は画像見れねぇだろ、ってツッコミは無しでｗ

続きを読む

[mootools] ひらがなをローマ字に変換するクラス

by

人が作ったのを使って楽したかったんだけどいいのが無かったので、ひらがなをローマ字に変換するクラスを自作した。
タイピングゲーム製作でどうしても必要になる問題文章を、ひらがな（数字＋一部記号も可）で作るだけで全部ローマ字に変換します。
※mootools.1.2が必要

日本語は母音と子音の組み合わせで出来てる。
「く」ならK+U、「し」ならS+I/SH+I/C+I、「わ」ならW+A。
入力方式が変わるのは、「し」や「じ」等特定の文字と、「ん」、小文字のや行、小文字の「つ」との組み合わせの時だけで
あとは特定の子音１種と母音５種類の組み合わせで成り立つ。

で、大体次のような流れで変換を行います。

  1. パブリックメソッドに文章投入→「このぶんしょうはさんぷるっぽいなにかです！」
  2. １文字または２文字単位に分割して配列化。小文字は前後の文字とセットにする。
    →[こ,の,ぶ,ん,しょ,う,は,さ,ん,ぷ,る,っぽ,い,な,に,か,で,す]
    「っ」で終わる場合や記号・数字とセットになる場合はそれぞれを１文字とする。
  3. ループ文で１文字か２文字か判別。変換関数に飛ばす
    →こ：１文字　　しょ：２文字
  4. １文字の場合はそのまま変換。この時、入力方式の設定がある文字についてはその方式に従う。
    →こ：K+O　　ん：NまたはNN
  5. ２文字の場合、最初に「つ」があるかどうか捜査。
    【小文字のつがある場合】
    ２文字目を１文字変換のメソッドに通して子音を２つに増やす。
    →っぽ：P+PO　→っと：T + TO
    【小文字のつがない場合】
    switch文で入力方式の設定がある文字（し＋小文字や行、じ＋小文字や行等）を変換。
    他は、１文字変換のメソッドに通して子音＋小文字や行ローマ字にする。
    →しゃ：(SH)(SY)+A　にゃ：N(i)+YA
  6. 結果を返す
    →[ko,no,bu,nn,syo,u,ha,sa,nn,pu,ru,ppo,i,na,ni,ka,de,su,!]
    →[k,o,n,o,b,u,n,n,s,y,o,u,h,a,s,a,n,n,p,u,r,u,p,p,o,i,n,a,n,i,k,a,d,e,s,u,!]

以下全文。長いｗ

続きを読む

[mootools]文章の入力速度をリアルタイムで計測する

by

文章が完成するまでの時間を計測するツールWriting Speed Counter作ってみた。「最初の一文字入力した時点から、変換の確定ではないエンターキーが押されるまでの間」　を１つの文章として判断し、入力に掛かった時間と文字数を表示します。入力した文章のログ表示、結果の平均出力もつけてみた。

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

by

スクロールバーをカスタマイズ出来る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]サムネイルクリックで画像とコメントを変更する

by

前に書いたサムネイルにマウスオーバーしたら画像を切り替える　を、
mootools1.2使ってフェードインとかつけたサンプル。

注意※ソースはmootools1.2用なので1.1では多分動きません。

続きを読む

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

by

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

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

続きを読む

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

by

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

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

続きを読む

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

by

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

続きを読む

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

by

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

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

書き散らしたから汚い…

続きを読む

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

by

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

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

続きを読む

[mootools]ＴＯＰへ戻るリンク

by

mootoolsで長いページにあると便利なＴＯＰへ戻るリンクを自動挿入するサンプル。
Ｄｒｅａｍｗｅａｖｅｒだとアセットとかテンプレートとかあるのでそっち使ってもいいけど。

※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

続きを読む

[mootools]メールリンク自動挿入

by

直接ＨＴＭＬにメールアドレスを記載していると、ロボット収集されてスパムの標的にされてしまう。
それを防ぐ為の方法として

  • mailto:を使わない
  • メールアドレスを画像にする
  • メールアドレスの＠を別の文字にする
  • Flashテキスト（ボタン）を使う
  • Javascriptで記述

以上がよく使われる手段だろうか。
Javascriptではヘッダに記載してたらまったく意味がないので注意。

Ajaxライブラリmootoolsを使ってメールリンク自動挿入をする方法を考えてみた。

※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

続きを読む