MooTools

[MooTools, HTML5] ToDoアプリを萌え化してみた

by

Web Creatros Contest “Q”　っていうのがjsdo.itでやってます。
商品がApple製品だったのでまた釣られてしましました（ノω＾）

お題を呼んでわが身をふりかえってみると……
仕事のToDoは会社が用意してくれるポストイットに書き、
プログラムに係わることは//TODO で書いている。
プライベートでは使う事がないから……
ほとんどToDoアプリをつかったことがなかった！

……ならToDo管理以外にも使えるものだったら
私みたいな「ToDoアプリ？なにそれおいしい？」ユーザーも振り向いてくれるかもしれない。
などと考えていたら神様がそっと囁いた。

　ﾉﾉﾉﾉﾉ
（　○○）　＜ 身近にイイ人材がおるじゃないか…ほれ、脳内に
　　(||||)

なるほど！脳内にいる住人とかタルパとか妄想とか俺の嫁とかに覚えてもらえばいいのか！
具現化するに合う素材を探してみたら素敵な立ち絵素材と巡り会えたので
ニュートリノの速さでレジ直行した勢いのまま作ったのがこれです。

todoll-start

プロジェクト名 はtoDoll
販売中の素材集が男女よりどりみどりだったので
あとでバージョン増やせるようにカスタムできる構造にしました。

続きを読む

MooTools基礎文法最速マスター

by

プログラミング基礎文法最速マスターまとめにMooToolsが無かったからカッとなって（ry

MooToolsについての概要はウィキペディアをご覧ください。
Wikiにも書いてある通り、MooToolsはオブジェクト指向の慣習とDRY原則に従っているため
OOPな言語を習得しているのであればその知識が大いに役立つフレームワークです。

巷で人気があるjQueryとの違いについてはjQuery vs MooToolsが詳しいです。
私がMooToolsを選んだときは既にjQueryが登場していましたが、遭えてMooToolsを選んだのは
「PHPと同時進行で覚えやすかった」のと、「文法がJavaScriptのそれであるから」です。
PHPのことがなかったりJavaScriptの基礎が無ったりしていたらjQueryを選んでいただろうと思います。
１つ覚えてしまえば後は似たようなものなので、今自分にとって一番使いやすい道具を選んでおけばいいんじゃないかと思います。

続きを読む

[css3+MooTools] gradientで自爆ボタン

by

JAMのお題がボタンと聞いて思い浮かんだネタの中で一番汎用性ありそうだった自爆ボタンをMooTools用プラグインとして作ってみた。
勢いのままFirefoxでガッと組んだので他のブラウザは順次対応予定です…。
Webkitも見れるようにした。※Chromeはバグで角が四角くなる。

自爆ボタン – jsdo.it – share JavaScript, HTML5 and CSS

JavaScriptで要素を作成して制御、見た目は全てCSS。
Canvasじゃないのはその方がデザイン変えやすいかなと思ったのと、CSS3が使いたかったからです。
ストライプ部分にだけbase64化した画像使っています。

爆破までは　ピン上げる→カバー外す→ボタン押す　っていう流れです。
カバー外すとonReadyイベントを、ボタン押した時にonStartイベントが実行されます。

続きを読む

[wp] カスタムフィールドで期限日を設定してカウントダウンタイマーを表示

by

「WordPressで投稿した記事に別途期限日を設定して、その期限日までのカウントダウンタイマーを表示したい」ってな用途に。
晒してるソースはMooToolだけどロジック応用すれば他のフレームワークでも出来るんじゃないかな。

完成形

期限日つきの記事を投稿するカテゴリーを作る。サンプルでは「未分類」の名前を変更してNewsカテゴリとして使用。

WordPressでカウントダウンの表示

投稿サムネイルと共に「○○まであと■■日▲▲時間★★分◆◆秒」と表示する。
時間はJavaScriptでリアルタイムにカウントダウンさせる。

更新されない可能性を考慮して、設定期限を過ぎた場合は過去形にしておくことにした。(javascriptで)

期限を越えた場合の表示

期限越えたとき表示する文字列の設定も出来るようにしておく。

文字列設定

続きを読む

CSS3 Code Generator

by

CSS3のソースコードをパパッと出力するジェネレータを作った。
巷には既に超有名ジェネレーターが２つ３つあるんだけど、
ボタンのマウスオーバーとかグラデーションで作るときもプレビュー出来るやつが欲しかったんで、
無いなら作ればいいじゃない理論で擬似クラスにも地味に対応してます。

CSS3 Code Generator

使い方は右上のHelpにちらっと書いてあるんだけど多分初見で使えると思う。
あんまりテストしてないのでバグとかリクエストとかあったらtwitterとかこの記事のコメントとかメールとかで教えて頂けると助かります。

未圧縮ソースはリポジトリに。

続きを読む

[HTML5+CSS3]　第二回コーディングコンテスト　に参加してました

by

締切後のソース公開OKらしいんで晒しておきます。

応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。
連休中のいい暇つぶしになりました。
イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず…実質的な製作期間は４日くらい。
例によってMooToolsをしこたま多用してます。

応募用デザイン

完成したのはこれ

ボタンにはCSS3のtransitionとグラデーションをフル活用してます。
このプロパティ面白いんだけど手打ちは地獄を見れるぜ…！
transition.cssのカオスさは必見かもしれない。

一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。

続きを読む

[perl] 学習メモ：Hello world!! → GET値の取得と処理 → ファイルの内容出力

by

ちょっとPerlが必要になったので、Hellow worldからの過程をメモることにします。
このエントリーの最終目標は、[Ajax + PHP] Web2.0的にHTMLソースを隠す方法　で晒した Request.phpでやってることで、

  1. GETを取得（pとaction）
  2. 取得したGET値pに基づいてファイルを読み込む
  3. 読み込んだファイルの内容を出力

です。
Perlが使えるとさくらインターネットのライトプランみたいなPerlのCGIしか許可されてない鯖で強い。
安価な鯖だとPHPダメって所は多いです。

現時点での自分の状況を書くと…

  • CGI設置経験は豊富（でも最近ご無沙汰）
  • PHPやJavaScriptの文法を元にそこそこ読めるけどイチからは書けない
  • 人が書いたソースのカスタマイズはそれなりに出来る
  • Perlでのファイル操作は全く知識がない
  • POSTとGETの扱いも良く分からない
  • C++に挫折経験あり

設置は経験あるけど作ったことはないっていう状況。
自分の中で消化する為にPHPと比較しながら覚える手を使ってます。
ZeroMail作り始めた時もこんなんでしたわ。

PerlはDreamweaverでサポートされてないので、テキストエディタMeryを使用した。
Exchangeに何かあるかと思ったけどさっぱりだった。

PerlでHello world!!

ローカル環境はXAMPPです。パスはxamppデフォルトそのまんまで、文字コードはUTF-8。

#!/xampp/perl/bin/perl

print "Content-type: text/html; charset=UTF-8\n\n";
print "Hello world!!\n";

拡張子cgiのファイル作って上のソースコピペしてブラウザで開けばHello worldが出力されるのだが、
content-typeが無いとmalformed header from script. Bad header云々のエラーが出る。
文字コードの扱いに関してはPHPよりも厳しいんだよな、確か。

続きを読む

[php + js]読み終えたページによって登場人物紹介ページの内容を変える

by

質問サイト見てたら面白いネタを発見！

私は今、長編小説をHPに公開しようと思っています。
キャラクター紹介のページを作ろうと思っているのですが、
読んだ読者さんによって表示される内容を変えたいのです。
例えば第一章で登場するAとBというキャラがいたとします。
読者さんが第一章を読んだらキャラ紹介のページにAとBのキャラクターの紹介が加わる。
という形にしたくて、cookieを使用しようと思うのですが、
なにぶんこのような操作ははじめてでしてどうしたらよいのかわかりません。
各章の最後のページにクッキーを食べさせるjavascriptを書いて、
キャラ紹介のページでクッキーを読み込み、キャラの説明文を表示したいです。

物語が進むにつれて、他キャラが増えたり、説明文に追記が加わるようにするにはどうしたら良いでしょう。
cookie使用があまりなく、調べましたがよくわかりませんでしたので詳しく教えていただけましたら幸いです。

独自CGI作ってもよさげな発想だと思ったんだけど、PHPとJavaScript使えば比較的簡単に出来るので、
デモとサンプルソース晒しときます。

ページ構成と概要

  • index.html
    小説のトップページ（つまり1ページ目 or 第一章）
  • 2.html
    2ページ目　or 第二章（以降、ページまたは章と同じファイル名で連番にする）
  • cast.php(cast.html)
    キャラクター紹介ページ
  • mychar.js
    クッキー発行スクリプトファイル

トップは1.htmlでもindex.htmでも何でもいいですが、
2ページ目より後のページを　番号＋拡張子　にします。

サンプルはこちら

続きを読む

固定ページ: 1 2

[mootools] ロールオーバープラグイン

by

ロールオーバースクリプト（画像名のOn/Offで判別）とマウスオーバーでリンク画像の透明度とか変更を足してクラスにしてみた。

指定エリア以下のaタグ拾ってマウスイベントでロールオーバーする。
画像名に指定した文字列があれば置換、なければ透過処理。
ロールオーバーさせない指定はclass名の有無（imgタグ内）で判断する。

続きを読む

prototype.js vs jquery vs mootools vs YUI vs Dojo

by

prototype.js、jquery 、mootools、YUI 、DojoAdobeSpry、Dojo、
MicrosoftAjax、YUI、Rico、MochiKit、Ext、Alfax、script.aclo.us…
実際使ってるのから名前は聞いたことある程度のものまで、色々と出てきて便利なのはいいんだけど、
正直どれ使えばいいのか分からない…(´д｀)という時もある。自分は大抵mootoolsだけどｗ
選ぶ時の参考になるかもしれないAjaxフレームワークのベンチマーク記事の紹介。

まずPeter Velichkov’s Blogの
MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revisedでは
タイトルに挙げたprototype.js、jquery、mootools、YUI、Dojoのベンチマークをグラフにして比較しています。
単純に速度だけの計測なので、サクサク感で選びたいときの参考になる。

続きを読む

[Ajax]prototype、jQuery、mootoolsのプラグイン仕様比較

by

Ajaxフレームワークのプラグインの仕様比較と作成方法について。
個人的によく使うprototype、jQuery、mootoolsのプラグインテンプレートとサンプルソースをそれぞれ載せてます。

短いソースならベタ書きでも悪くはないけど、使いまわしが効いたり、衝突が起きなかったりと
大掛かりなものになればなるほどメリットはあるので、よく使うなら覚えておいて損はないと思う。
でもプラグインを作ること自体はそう難しくなくても、理解するのが大変なんだよな。
どれか１つ把握してたら応用で他のも作れるようになるはず。ソースは私。

なお、適当に書いたサンプルソースは全て
「IDで指定した要素の文字色をオプションで指定した色に変える」という内容です。
また、あえてメソッドを動作させるようにしています。

ソースの説明書き加えた

mootools (ver1.2)

まず個人的に一番気に入ってるmootoolsから。
mootoolsのプラグインは特に決まった書式などは無く、Classで作成されているものが多いです。
Classという名前の通りPHPやJAVA等のクラスとほぼ同じ仕様なのでとっつきやすいと思われる。

続きを読む

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

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

続きを読む

[js]Ajax.Requestと405 Method Not Allowed

by

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 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 //スクロールのトランジション効果
},

カスタマイズ部分のソースのみ掲載してます。

続きを読む

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

by

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

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

続きを読む

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

by

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

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

続きを読む