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

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

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

できること

  • 画像ファイルをドラッグ&ドロップで変換実行
  • 変換1回あたりの枚数制限なし(PCスペック依存)
  • imgタグ作成
  • 50%縮小オプション(小数点以下切り捨て)

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

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

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

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

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

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

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

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

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

“HTML+CSS+JavaScriptでバトルゲーム(のバトルシーン)作ってみた” の続きを読む

[MooTools] Chainについて

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] Chainについて” の続きを読む

MooTools基礎文法最速マスター

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

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

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

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

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

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

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

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

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

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

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

moocalendar

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

MooTools Core 1.3 リリース!新機能・変更点まとめ

まだ私も良く分かってないので調べながらメモっていくつもりで。

1.3がでたので1.2で書いたプラグインもバージョンうpしなきゃ!と思っても慌てる必要はnothing!
下位互換機能がついたCore(width Compatibilityなやつ)を選べば共存出来る。

Slick

セレクタエンジンSlickはMooToolsのファミリープロジェクト。だってお。
1.3でCoreに内臓されてCSSのセレクタを使用したDOM操作がパワーアップ。

Create Element

1.2.xで要素を作るときのソース:

new Element("div", {"id": "mootools", "class": "moo cow","title":"Sample", "text":"MooTools!"});

Slickで書くとこうなる:

new Element("div#mootools.moo.cow[title=Sample]");

Result:

<div id="mootools" title="Sample" class="moo cow">MooTools?</div>

ZenCodingみたいな感じだけど作れる要素は1つだけです。
1行で済むのは楽っちゃ楽だけどOOPライクな前者の方が見やすくて好きだな。

“MooTools Core 1.3 リリース!新機能・変更点まとめ” の続きを読む

[MooTools] border-radiusの簡単なIE対策

角丸にする既存ライブラリは色々あるけどHTML5対応してなかったり配置が崩れたりで、
もう面倒だから四隅にspan置いて背景指定すればいいわ…と思って作ったクラス。

new IERadius($("main"));

角丸にしたい対象を指定すると、その要素内に次のようなspanが自動作成される。

<span class="radiusFix main-tLeft" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; left: 0px;"></span>
<span class="radiusFix main-tRight" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; right: 0px;"></span>
<span class="radiusFix main-bLeft" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; left: 0px;"></span>
<span class="radiusFix main-bRight" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; right: 0px;"></span>

コーナーだけの画像を作って、
radius_sprite

スタイルシートで背景指定する。

html {
	background-color:#113A57;
}
#main {
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
#main{
	background-color:#fff;
}

.radiusFix {
	background:url(../images/radius_sprite.png) no-repeat left top;
}

.main-tLeft{background-position:0px 0;}
.main-tRight{background-position:-5px 0;}
.main-bRight{background-position:-15px 0;}
.main-bLeft{background-position:-20px 0;}

指定した親要素にはposition:relativeが付与される。
positionを使うのでIE6でCSSのバグが発生する事がある。(floatが中にある要素に使った場合など)

左:使用後 右:使用前
radius_sprite_after

“[MooTools] border-radiusの簡単なIE対策” の続きを読む

[HTML5API] Web Workersで手抜きツール作ってみた

マイコミジャーナルにあるHTML5 APIのWeb Workersについての解説見て作ってみたものを、
最近サービス開始されたjsdo.itにうpしてみたよ。
jsdo.itはまだ開始まもなく、研究に余念の無い変態ユーザーの密度が計り知れない強さなので必見だと思う 😀

とりあえずWeb Workersっていうのが使ってみたかったんだけど、負荷の軽減具合を試すようなサンプルじゃ面白くないので、
ライブラリファイルにあるHTMLソースを組み合わせてベースになるソースを組む手抜きツールを作ってみた。
連想配列として設定済みの値を並べるだけでも量が増えればそれなりに重くなると思うし。

HTMLSourceBuilder

読み込んでるワーカーファイルライブラリファイルを編集すれば出力をカスタマイズできる。

“[HTML5API] Web Workersで手抜きツール作ってみた” の続きを読む

[MooTools] Fx.SmoothScroll – not add the address bar URL’s hash

Dojo触ってて思い出した事を解決。

MooTools MoreのFx.SmoothScrollはスクロールが終了した時にアドレスバーのURLにハッシュ(#top など)を追加しますが、
少しカスタマイズすればこれを追加しないように変更することが出来ます。

以下は未圧縮ソースです。

var SmoothScroll = Fx.SmoothScroll = new Class({

	Extends: Fx.Scroll,

	initialize: function(options, context){
		context = context || document;
		this.doc = context.getDocument();
		var win = context.getWindow();
		this.parent(this.doc, options);
		this.links = $$(this.options.links || this.doc.links);
		this.hash = this.options.hash; // Add this line
		var location = win.location.href.match(/^[^#]*/)[0] + '#';
		this.links.each(function(link){
			if (link.href.indexOf(location) != 0) {return;}
			var anchor = link.href.substr(location.length);
			if (anchor) this.useLink(link, anchor);
		}, this);
		if (!Browser.Engine.webkit419 && this.hash) { // Add the "&& this.hash"
			this.addEvent('complete', function(){
				win.location.hash = this.anchor;
			}, true);
		}
	},

	useLink: function(link, anchor){
		var el;
		link.addEvent('click', function(event){
			if (el !== false && !el) el = document.id(anchor) || this.doc.getElement('a[name=' + anchor + ']');
			if (el) {
				event.preventDefault();
				this.anchor = anchor;
				this.toElement(el).chain(function(){
					this.fireEvent('scrolledTo', [link, el]);
				}.bind(this));
				link.blur();
			}
		}.bind(this));
	}
});

変更箇所はコメントをつけた2箇所だけ。
この修正によりhashオプションで表示/非表示の切り替えが出来るようになります。

new SmoothScroll({hash:true}); //the hash appear on the address bar 

ハッシュが全く必要ないという場合は以下をコメントアウトしてもいいです。

win.location.hash = this.anchor;

圧縮ソース:

var SmoothScroll=Fx.SmoothScroll=new Class({Extends:Fx.Scroll,initialize:function(b,c){c=c||document;this.doc=c.getDocument();var d=c.getWindow();
this.parent(this.doc,b);this.links=$$(this.options.links||this.doc.links);this.hash=this.options.hash;var a=d.location.href.match(/^[^#]*/)[0]+"#";this.links.each(function(f){if(f.href.indexOf(a)!=0){return;
}var e=f.href.substr(a.length);if(e){this.useLink(f,e);}},this);if(!Browser.Engine.webkit419&&this.hash){this.addEvent("complete",function(){d.location.hash=this.anchor;
},true);}},useLink:function(c,a){var b;c.addEvent("click",function(d){if(b!==false&&!b){b=document.id(a)||this.doc.getElement("a[name="+a+"]");}if(b){d.preventDefault();
this.anchor=a;this.toElement(b).chain(function(){this.fireEvent("scrolledTo",[c,b]);}.bind(this));c.blur();}}.bind(this));}});

[MooTools] 診断テスト作成スクリプト Diagnosizm

質問に対し、YESまたはNOで答える1問2答形式の簡易診断テストを自動生成するスクリプト。
問題と診断結果はJSONファイルに保存するのでCGI使えない鯖でも設置できます。

diagnosizm

新しく書き直したものはこちら▼
[JS] 9年前の診断テスト作成スクリプトを今風に書き直してみた

“[MooTools] 診断テスト作成スクリプト Diagnosizm” の続きを読む

[MooTools] Form.Validator.addAllThese for Japanese

MooToolsのForm.Validatorの足りないところを補う日本語環境向けaddAllThese。中身は殆どzeromailからの転載。
全角チェック、全てひらがな、全てカタカナ、全て全角数字、全て全角英数、日本語の有無、郵便番号、電話番号。
続きに郵便番号検索APIとの連携例と、Form.Validatorを搭載したメールフォームのデモがあります。

Form.Validator.addAllThese([
	['isJpOnly',
		{
			errorMsg:'全て半角英数の文字列は使用できません。',
			test: function(el){if(el.value.length == 0) return true; else return !el.get('value').test(/^[\x01-\x7e]+$/,'i');}
		}
	],
	['isNoAlp',
		{
			errorMsg:'全て全角で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[^ -~。-゚]*$/);}
		}
	],
	['isHirakana',
		{
			errorMsg:'全てひらがなで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[あ-ん]+$/,'i');}
		}
	],
	['isKatakana',
		{
			errorMsg:'全てカタカナで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ン]+$/,'i');}
		}
	],
	['isZNum',
		{
			errorMsg:'全て全角数字で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9]+$/,'i');}
		}
	],
	['isZAlp',
		{
			errorMsg:'全て全角英数字で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9A-Z]+$/,'i');}
		}
	],
	['isKana',
		{
			errorMsg:'カタカナもしくはひらがなで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ンあ-ん]+$/,'i');}
		}
	],
	['validate-zipcode',
		{
			errorMsg:'郵便番号の書式に誤りがあります。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/(^\d{3}\-\d{4}$)|(^\d{7}$)/);}
		}
	],
	['validate-tel',
		{
			errorMsg:'電話番号の書式に誤りがあります。',
			test:function(el){
				var value = el.get('value');
				if(value.length == 0) return true;
				
				if(el.get('value').test("-")){
					if(value.test(/^(090|080|070)/)){
						return value.test(/(^(090|080|070)(\-\d{4}\-\d{4})$)|(^[\d\-]{13}$)/);
					}else if(value.test(/^(0080|0120)/)){
						return value.test(/(^0120(\-\d{2,3}\-\d{3,4}|[\d\-]{12})$)|(^0080\-\d{3}\-\d{4}$)/);
					}else{
						return value.test(/(^\d{2,5}?\-\d{1,4}?\-\d{4}$|^[\d\-]{12}$)/);
					}
				}else{
					if(value.test(/^(090|080|070)/)){
						return value.test(/^(090|080|070)\d{8}$/);
					}else if(value.test(/^(0080|0120)/)){
						return value.test(/(^0120\d{6}$)|(^0080\d{7}$)/);
					}else{
						return value.test(/^\d{10}$/);
					}
				}
			}
		}
	]
]);

電話番号の正規表現修正

“[MooTools] Form.Validator.addAllThese for Japanese” の続きを読む

[MooTools] 自動収集対策メールリンク自動挿入2

任意のclassを振った要素にメールアドレスを自動挿入するMooToolsクラスです。

@やドットを置換するっていうのはヴァニラJSver1.1で昔書いたけど、
@の前後にある文字列を置換する手もあるなあと。substituteの説明見てたら思いついた次第。

(X)HTMLソースは出力したい場所の要素にclassをつけるだけ。
body以下を対象にオプションで指定された要素があるかどうかを判別するので、タグやクラス名はなんでもいい。

<span class="email">Mail to Us? Please Enable JavaScript on you Browser.</span>

中に入っているテキストやHTMLはクリアされる。
画像作るの面倒でメッセージにしたけど、代わりに入れておくならメアド画像がおすすめ。

出力されるHTMLは以下2種類。

mailtoリンクを有りにした場合:

<span class="email"><a href="mailto:info@example.com" title="メールを送信">info@example.com</a></span>

リンク無しの場合:

<span class="email">info@example.com

“[MooTools] 自動収集対策メールリンク自動挿入2” の続きを読む

[MooTools] テキストや画像のコピー禁止処理

Webサイト上にあるコンテンツのコピーを出来なくさせるプラグインを書いてみた。
Ajaxと併用するといい感じ。

ロジックは以下:

  1. 透過画像をbody全体に被せる(オプション:cover)
  2. oncopy を return false;
  3. Ctrl+AとCtrl+Cを無効にする
  4. B:前に戻る N:次に進む(オプション:move)

主な弱点と対策:

  • メニューから選ぶ「すべて選択」「コピー」
    →メニューやステータスバーを消した別窓に表示
  • ファイルへの直アクセス
    →アクセス制限、データベースの使用
  • ソース表示
    この記事この記事のようにデータベースやデータファイルからXHRでコンテンツを得る
    →jsファイルの難読化

window.openで表示

普通に表示

いずれも開発者ツールには無力です。
Ajax中心でいろいろ考えてみたけど、やっぱり画像にしたりFlash使うのが最強なのかな。
HTML5環境であればCanvasを使用するのがいいかもしれない。

“[MooTools] テキストや画像のコピー禁止処理” の続きを読む