WebTecNote

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

2010/03/222009/03/23 by

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

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

[IE] Internet Explorer 8 ドキュメント互換性モードの指定について

2009/03/21 by

IE6のドキュメントタイプで表示が変わる互換性モードに頭を抱えたWeb業界の人は多かろうと思いますが、IE8で更に上位版が出たそうです。
でもIE6で悪行を働いた標準・互換モードの変更動作とは違い、IE8で導入されたドキュメント互換性は、
IEがページを表示する際に使用する特定のレンダリングモードの選択を可能にするもので、従来のDOCTYPEの変わりに
新しくMETA要素の X-UA-Compatible　により操作が可能に。

簡単にまとめると

IE8だと表示が崩れる…IE7なら崩れないのに…orz
▼
METAタグでIE7モードで表示するよう指示
▼
IE8がその指示に従ってIE7っぽくレンダリング
▼
ｳﾏｰ(ﾟдﾟ)

ということらしい。

その場合のMETAタグは次のようになる（Emulate IE7 互換性モードを指定）

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

このメタタグはヘッダーの一番上（titleや他のmetaよりも上）に置かなければならない。

その他のcontent 属性値

IE=EmulateIE5　→　Internet Explorer 5 の動作を模倣
IE=edge　→　使用できる最高のモードを使用
IE=EmulateIE8も使用可能

<meta http-equiv="X-UA-Compatible" content="IE=4"/>   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"/> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"/> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"/>   <!-- IE5 mode -->

各モードをセミコロンで区切って複数のドキュメントモードを指定することも可能らしい。
特定の互換性モードを除外する使い方も可能だが、推奨はされていない。

例：IE7 モードを除外

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

一見便利そうだけど…用途がわからん……

※公式ドキュメントはこちら

でもやっぱりメインで確認するのはIE6なんだろうな、っていう。

[icon] 桜の花 (昼)

2014/08/292009/03/20 by Tenderfeel

春といったら桜！開花宣言に乗じて明るい背景向けの桜の花アイコン素材をpngとpdf形式で配布。

[javascript]　URIからドメインだけ正規表現で取得する

2009/03/19 by

正規表現によるマッチング。location.hrefにmach()使ってドメイン部分を取り出す。

http://www.google.co.jp/ →　www.google.co.jp
http://example.com/　→　example.com
file:///D:/→　D
http://localhost/hoge/index.html　→　localhost
http://127.0.0.1:8000/　→　127.0.0.1

※表示の都合上、全角の「？」が混じっているので注意

var str = "http://www.google.co.jp/";
var domain = str.match(/^[httpsfile]+:\/{2,3}([0-9a-z\.\-:]+?):？[0-9]*?\//i)[1];
alert(domain);

変数domainは配列になり、domain[0]にはプロトコルからドメイン後ろのスラッシュまで、
domain[1]にはドメイン部分のみが格納されます。
変数strをlocation.hrefにすると、表示しているページのURIがマッチング対象になる。

[mootools] 透過PNGをIE6で自動的に表示させる　pingfix.js clone

2019/06/272009/03/18 by Tenderfeel

必要に迫られて作ったIE Pingfix.jsのクローン
ページ内にある透過PNG形式画像をIEでも表示させるプラグインのmootools版です。
透過画像やAlphaImageLoaderについてはこっちの記事で詳しく書いてます→透過PNGと透過フィルターの使い方

適用する画像の判別はファイル名で行います。
背景は面倒なので未対応ですが、要素IDによる範囲指定が可能です。

やってる事は大体同じ

透過する画像を取得
画像の属性を取得(width,height,alt,src,class,id等)
新しい要素を作成（このクラスではspan）
作成した要素に画像の属性を当てる
Style属性で作った要素をスタイリング（AlphaImageLoaderはここ）
img要素を削除またはdisplay:noneにして作成した要素を挿入

[mootools]無駄無駄無駄無駄無駄無駄無駄無駄ァッ！！

2009/03/172009/03/16 by

ジョジョの無駄ラッシュをブラウザ上で再現する無駄なmootoolsプラグイン。テキスト変えたらオラオララッシュも出来る。カイジ作ってるときにティンと来たのは言うまでもない。

[mootools&PHP] Ajax.Request でファイルの読み書きをする

2009/03/102009/03/10 by

mootoolsのRequestクラスを使うとXMLHttpRequestが簡単に行えます。
jQueryやprototype.jsもやり方は大体同じです。（クラスの名前からして似てる）
公式サイトのDemoにAjax.Requestのサンプルがいくつかありますが、
送受信だけでは面白くないので、簡単にファイルの読み書きをして掲示板っぽいものを作ってみようー。

<a href="https://tenderfeel.xsrv.jp/wtn/wp-content/uploads/mootools/AjaxSample/index.html" class="newwin">直接見る »</a>
直接見る »

▼用意するもの（カッコ内は説明とzipで使ってるサンプルの名前）

HTMLファイル(index.html)
この記事にコピペ用ソースがあります
PHPファイル(sample.php)
<?php ?>が書いてあればいい
テキストファイル(data.txt)
空ファイル。拡張子はなんでもいい
mootools ver1.2のコアファイル(mootools.js)
圧縮したのでもなんでもいい。moreはいらない

※文字コードは全てUTF-8にすること。

Step-by-Step形式で書いています。（全10ステップで2ページ分割）

固定ページ: 1 2

[mootools]カイジっぽく「ざわ…ざわ…」を表示する…

2019/06/272009/03/05 by Tenderfeel

何となく思いつきだけで作ってみたっ…！
このプラグインは、ページに「ざわ…」を延々表示し続ける…たったそれだけの機能しかない…！

<a href="https://tenderfeel.xsrv.jp/wtn/wp-content/uploads/mootools/zawazawa.html" class="newwin">直接見る »</a>
直接見る »

おっと……忘れるところだった………
一度しか言わない……　このプラグインはmootools ver1.2 が必要だ…
jQueryとprototype.jsでの作成は検討していない…が、要望があったら作る…かもしれないっ…

prototype.js vs jquery vs mootools vs YUI vs Dojo

2009/02/27 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のベンチマークをグラフにして比較しています。
単純に速度だけの計測なので、サクサク感で選びたいときの参考になる。

[jQuery]IE6以下で閲覧すると画面左端にアナログと表示させるプラグイン

2019/06/272009/02/26 by Tenderfeel

jQuery練習ついでにプラグイン作って便乗。元ネタはCSS Happy Lifeさん。
最近テレビの画面左端にアナログと出るようになってますが、
あのウザい表示をIE6使ってるときにやろうじゃないか、というものです。

このプラグインはスクロールしても追いかけて常に画面左端に表示し、
さらにアイコンへマウスオーバーするとメッセージを入れ替えて
ユーザーにしつこくバージョンアップを促しますｗｗｗ

以下デモはＩＥ以外だと何も表示されません。
View Demo »

~~jQuery ver 1.2.6以上用プラグインです~~
jQuery.browserのサポートの関係で1.3以上が必要でした。

[jQuery]リンクに新しいウィンドウを開くアイコンを自動で追加する

2019/06/272009/02/25 by Tenderfeel

殴り書きは続く…AutoExternalLinkのjQuery版。mootools版の同タイトル記事とほぼ同じです。
jQueryは馴染みが浅いのでもっさり感漂う残念なソースになってます。
自分がサイト組む時は外部リンクに大抵relかclass属性を付与するんで、relかclass持ちにだけ追加するライト版も書いてみた。
ダウンロードはスクリプトファイル２種と、jQuery版に修正したAutoExternalLinkプラグインファイルのセット。
元ソースからの入れ替えとかは自己責任でお願いします。

wordpressプラグイン本体の改造はこちらの記事で解説していますが、
zipに修正済みのプラグインファイルも突っ込んどいたので上書きでおｋ。動作デモはこのブログそのものです。

jQueryプラグインなので普通のサイトでも使えると思います。
varは1.2.6以上対応です多分。（1.2.6と1.3.2でしか確認してない）

Header

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jExternalLink.plugin.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
	$("#main").jExternalLink();
});
//]]>
</script>

上記指定で#main以下にあるaタグを全てチェックします。

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

2009/03/022009/02/24 by

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

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

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

ソースの説明書き加えた

mootools (ver1.2)

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

[mootools]Fx.Morphで弾幕

2009/02/24 by

Fx.Morphで弾幕作れないか試してみるテスツ。で花火っぽく30個ほど並べてみた。連打しすぎるとブラウザ落ちる可能性があります直接見る » 直接見る » これはこれで面白いんだがもっさり感 … 続きを読む

[CSS]画像１枚でメニューボタンを作る

2009/02/19 by

tinyMCEや大手サイトなどでよく使われてる、メニューボタンの画像を１枚にまとめてしまう手法。
ボックスなどにも応用出来るので覚えとくと便利じゃないかなと思います。

[mootools]スクロールに追随させる – mooFollow.js

2019/06/272009/02/18 by Tenderfeel

スクロールした時勝手に追随して動く要素を作成するクラス。mootools ver1.2以上用。
どう見てもwrapScrollです本当に（ｒｙ）っていうツッコミは置いといて、
スクロールした時とし終わった時のイベントとか、
トランジションや遅延の指定とかがしやすい。と思う。

[XHTML]テキストエディター使用者向けコピペ用ソース

2009/02/14 by

新規でXHTMLのページ作る時に使うタグをバラした。
Dreamweaverなら各ブロックのソースをスニペットにして保存すると便利です。

Usage

Mainのソースをテキストファイルにコピペする
半角英数の適当な名前＋html拡張子で保存する。（ex:hoge.html）
必要なタグをコピペで追加していく

あとは適当にBodyタグの中を編集すればページが完成。

Main

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
</head>
<body>
<p>Sample Page</p>
</body>
</html>

[mootools] Class – KitchenTimer

2019/06/272009/02/13 by Tenderfeel

前エントリーのカウントダウンタイマークラスにカウントアップとか追加してキッチンタイマーっぽい代物に。
Javascriptなのでページ内埋め込みが出来るんだけどmootoolsが必要っていう。

使い方は続きに。

[mootools] Class – CountDown Timer

2009/03/092009/02/12 by

mootoolsのClassでカウントダウンタイマー作ってみた。一時停止、リセット、再生、自動再生が出来る

[mootools] Button CSS Generator

2009/02/252009/02/10 by

カラフルにしようとすると結構面倒なボタンタグのCSSを作成するジェネレーター。思い立って殴り書きしたのが割と見れる状態になったので公開。