MooTools – WebTecNote

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

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

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

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

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

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

todoll-start

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

“[MooTools, HTML5] ToDoアプリを萌え化してみた” の続きを読む→

2012/03/24By Memo contest、HTML5、jsdo.it、MooToolsコメントする

MooTools基礎文法最速マスター

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

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

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

“MooTools基礎文法最速マスター” の続きを読む→

2011/01/06By Tutorial MooTools2件のコメント

[MooTools] DataTree Plugin

左から右への水平方向にツリー形式で並べるクラスです。
初期は定義リストだけど使う要素は何でもいい。

View Demo

“[MooTools] DataTree Plugin” の続きを読む→

2010/10/06By MooTools MooToolsコメントする

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

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

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

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

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

“[css3+MooTools] gradientで自爆ボタン” の続きを読む→

2010/09/15By CSS CSS3、MooToolsコメントする

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

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

完成形

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

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

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

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

期限を越えた場合の表示

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

文字列設定

“[wp] カスタムフィールドで期限日を設定してカウントダウンタイマーを表示” の続きを読む→

2010/05/18By Tenderfeel wordpress Download、MooTools、wp-custom、wp-themes5件のコメント

CSS3 Code Generator

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

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

未圧縮ソースはリポジトリに。
“CSS3 Code Generator” の続きを読む→

2010/05/06By CSS CSS3、HTML5、MooToolsコメントする

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

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

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

完成したのはこれ

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

一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。
“[HTML5+CSS3]　第二回コーディングコンテスト　に参加してました” の続きを読む→

2010/03/24By CSS CSS3、Demo、HTML5、MooToolsコメントする

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

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

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

です。
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よりも厳しいんだよな、確か。

” 学習メモ：Hello world!! → GET値の取得と処理 → ファイルの内容出力” の続きを読む→

2010/03/16By Perl Ajax、MooToolsコメントする

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

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

私は今、長編小説を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ページ目より後のページを　番号＋拡張子　にします。

サンプルはこちら

“読み終えたページによって登場人物紹介ページの内容を変える” の続きを読む→

2010/01/25By Javascript Cookie、MooTools、PHPコメントする

ページ: 1 2

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

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

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

“[mootools] ロールオーバープラグイン” の続きを読む→

2009/03/23By MooTools Effect、MooTools、rolloverコメントする

prototype.js vs jquery vs mootools vs YUI vs Dojo

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のベンチマークをグラフにして比較しています。
単純に速度だけの計測なので、サクサク感で選びたいときの参考になる。
“prototype.js vs jquery vs mootools vs YUI vs Dojo” の続きを読む→

2009/02/27By Javascript Ajax、Dojo、jQuery、MooTools、prototype.js、YUI2件のコメント

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

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

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

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

ソースの説明書き加えた

mootools (ver1.2)

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

2009/02/24By Information, Memo Ajax、jQuery、MooTools、prototype.jsコメントする

[mootools]Fx.Morphで弾幕

Fx.Morphで弾幕作れないか試してみるテスツ。で
花火っぽく30個ほど並べてみた。

連打しすぎるとブラウザ落ちる可能性があります
<a href="https://tenderfeel.xsrv.jp/wtn/wp-content/uploads/mootools/fireworks.html" class="newwin">直接見る »</a>
直接見る »

これはこれで面白いんだがもっさり感がある。
Snowstormと同じやり方のがいいのかな？
それにしても三角関数がﾍﾎﾞﾝ過ぎて萎える(´д｀)

2009/02/24By MooTools Fx.Morph、MooToolsコメントする

[mootools] Button CSS Generator

ボタンタグのCSSジェネレータ作ってみた。誰か先にやってる人いたらｺﾞﾒﾝﾅｻｲ。
背景色からボーダーカラーを計算して設定するっていうのがやりたかったんだ。
あとmooRainbowも使ってみたかったんだ。

今のところ、ボタンの背景色、文字色、サイズ、線幅が設定可能。
線色は背景色選択時に自動計算して設定するよー。

線種、反転、フォントあたりの細かいところは休み中に作る予定。
ソースももうちょっと綺麗に書き直したいんだぜ…

2009/02/10By Material, MooTools Ajax、free script、MooToolsコメントする

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

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]押されたキーを取得する” の続きを読む→

2009/02/04By MooTools MooToolsコメントする