MooTools

[js] 画像をDataURLに変換するツール

2011/12/19 Javascript, MooTools No comments ,

中身はDrag&Drop + File API なので何番煎じなんだか分からないけれども…

ブックマークするならこちら

できること

  • 画像ファイルをドラッグ＆ドロップで変換実行
  • 変換１回あたりの枚数制限なし（ＰＣスペック依存）
  • imgタグ作成
  • ５０%縮小オプション（小数点以下切り捨て）

複数の画像を一括でDataURLに変換するのと、
画像タグを生成してくれるものが無かったので自分で作った。
スタイリングはBootstrapです。

MooToolsで未定義の新しいイベントを使う時には
Element.NativeEventsで設定するとaddEventとかで使えるようになります。

Element.NativeEvents['drop'] = 2;
Element.NativeEvents['dragover'] = 2;
Element.NativeEvents['dragleave'] = 2;

HTML+CSS+JavaScriptでバトルゲーム（のバトルシーン）作ってみた

2011/01/31 MooTools No comments

jsdo.itのSPECKというイベント？第一弾のお題がゲームに関するものだったので、
ゲーム好きとしては何か作っとかないかんやろ！と思ってMooToolsで組んでみたのがこれです。
動作確認はFirefoxとChrome、Safariで。IEでは見れないです。

forked from: GYAOS_sample – jsdo.it – share JavaScript, HTML5 and CSS

目新しい演出はなにもありませんｗｗｗｗｗ
参考の動画見てて思ったのは、戦うのがプレイヤーが飼育しているモンスターなら
ボタン押して即行動っていうのは不自然じゃないかしら？ということで
指揮して動かすっていう感覚を作れたらそれでよかったんや…。

目指したのはターン制ではなくリアルタイムバトルなんですけどね、妄想するのと実際組むのとでは難易度が雲泥の差過ぎ。
ゲームプログラマーってすげぇや！と改めて尊敬した次第です。
細かいところまで作るには大分時間が足りなかったけど
HTML+CSS+JavaScriptでバトルゲームは作れるってことが分かったのでよしとします。

続きは中身についてのメモ（MooToolsのマニアックな話）です。

(さらに…)

[MooTools] Chainについて

2011/01/13 MooTools No comments , ,

MooToolsにはChainというクラスがある。
これは関数の実行を数珠繋ぎに出来る便利なヤツです。

公式にあるChainのデモはFxのstartメソッドにchainメソッドをくっつけているものなのだけど、
ドキュメントの一番上に載っている、クラスにChainをImplemantするサンプルコードを実行してみると動かなかったりする。

    var Todo = new Class({
        Implements: Chain,
        initialize: function(){
            this.chain.apply(this, arguments);
        }
    });
 
    var myTodoList = new Todo(
        function(){ alert('get groceries'); },
        function(){ alert('go workout'); },
        function(){ alert('code mootools documentation until eyes close involuntarily'); },
        function(){ alert('sleep'); }
    );

(さらに…)

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を選んでいただろうと思います。
１つ覚えてしまえば後は似たようなものなので、今自分にとって一番使いやすい道具を選んでおけばいいんじゃないかと思います。

(さらに…)

[tools] 楽天の定休日カレンダーが手打ちだからツールを作った

2010/10/20 MooTools No comments

楽天ショップを管理している同僚がポロッとつぶやく。

（ ´ω｀） 「定休日のカレンダーを手打ちするのが面倒臭いんだよね」

楽天ショップのカレンダーってどこの店でも出しているから、てっきり管理画面にそういうカレンダー出力機能があると思っていた私驚愕。
マジで全然手打ちだからアレｗｗｗ　らしい。なんということでしょう…
（楽天内部にある講座的なものに”カレンダーの作り方”というものがあったが、テーブルタグの打ち方そのものでがっかりしたそうな）

カレンダーのタグ作るくらい検索すれば見つかるだろと言ったが何やらもにょもにょ言うだけでちっとも探そうともしないから、
イラレしか使えないデザイナーでも分かるだろうツールを作ってやりました。

楽天用カレンダージェネレーター

しかしこれを見せたら全部自動化できないの？と言われる始末。
これのベースにしたMooToolsのカレンダープラグインもありますよ？

moocalendar

でもこっちは休日データがオブジェクトなものだから、そのオブジェクトを作る手間が掛かるわけで…
結局タグコピペが一番早いんじゃないの、と思わずには居られなかった。
プラグインは別の記事で晒します。