MooTools

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

2012/03/24 Memo No comments , , ,

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

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

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

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

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

todoll-start

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

(さらに…)

MooTools基礎文法最速マスター

2011/01/06 Tutorial 2 comments

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

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

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

(さらに…)

[MooTools] DataTree Plugin

2010/10/06 MooTools No comments

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

DataTree ScreenShot

View Demo

(さらに…)

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

2010/09/15 CSS No comments ,

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

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

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

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

(さらに…)

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

2010/05/18 wordpress 5 comments , , ,

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

完成形

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

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

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

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

期限を越えた場合の表示

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

文字列設定

(さらに…)