[MooTools] mooContreGallery Plugin

mooContreGalleryはhttp://www.contreforme.ch/のProjectsページで使われている
画像拡大、スクロール、インフォメーション表示など一連のエフェクトを貴方のサイトに実装するプラグインです。
本家サイトの動きをClass化+最新バージョンに対応させつつ再現したものですが、
オプションを変更する事によってエフェクトをお好みにアレンジすることが出来ます。


moocontregallery demo

View Demo

当プラグインの公開についてはcontreforme sàrlの中の人に許可を頂きました。
This class original source created from contreforme sàrl. Thank you!

また、このプラグインは「これどうやって作るの?」という質問がきっかけで出来たものです。
jQueryではやる気が出ず、MooToolsでの回答になりましたが(笑)質問を送ってくれたH氏にも感謝!
チュートリアル記事はこちら »

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

[mootools] IE6以下で閲覧したら画面左端にアナログと表示させる

タイトルの通り、IE6以下で閲覧しているユーザーをIE8にアップグレードさせる為のmootools用クラスです。
jQueryで書いたものより大分大人しい仕様になっております。

Usage

ヘッダに以下ソースを書く。

<script type="text/javascript" src="mootools-1.2.3.js"></script>
<script type="text/javascript" src="mooAnalogIE.js"></script>
<script type="text/javascript">
	//<![CDATA[
	window.addEvent('domready', function(){
		new mooAnalogIE();
	});
	//]]>
</script>

上記記述で#header直下にアナログ表示を挿入します。

Options

new mooAnalogIE({element, text, html});
  • element: “#header” [string]
    挿入先要素のID。指定しない場合は#headerが対象になる
  • text: まだアナログ環境をご利用ですか?今すぐデジタル環境へアップグレード [string]
    マウスオーバー時に表示するテキスト
  • html: アナログ [string]
    アンカーリンクのhtml

デフォルトだと挿入されるのは次のソースになります。

<a href="http://www.microsoft.com/japan/windows/products/winfamily/ie/function/default.mspx" title="Internet Explorer8のダウンロードサイトへ" target="_blank" id="analogIE"><img src="images/analog.png" width="57" height="13" alt="アナログ" /></a>

CSSとかの設定は一切してないので適当にスタイリングしてください。

Download

zipには「アナログ」の画像が4種類含まれています。(黒背景png、白背景png、Png24、PSD)

“mooAlnalogIE” をダウンロード mooanalogie.zip – 544 回のダウンロード – 13 KB

[mootools] 別窓を開くアイコンとhrefの拡張子に応じたアイコンや属性を追加する

mooExternalLinkクラスがもっさりしすぎてたので書き直しついでに色々追加しました。
完全に別物になったので名前も変更。ver1.2.3にも対応しています。
mooExternalLinkLiteは様子見て配布しようかな。

jQuery版も追々書き換えたい…。

こんなことします。

  • リンクの前にファイルタイプアイコンを追加
  • 別窓で開くアイコンと属性を追加
  • PNG、JPG、GIFへのリンクにQuickBoxのrel属性を追加

上記3つはオン・オフ可。QuickBoxを使用する場合は別途ダウンロードが必要です。
ファイルタイプアイコンはhref末尾のpdfやzip等の拡張子で判別します。
有効な拡張子はドットを除いて2~3文字のものです。オプションで設定してない拡張子にはアイコンは出ません。

拡張子以外にhrefの内容で判別するものは次の通り

  • mailto: →mail
  • https:// →https
  • window.print() →print

矢印で示しているのはアイコン画像の拡張子より前の部分です。
print.pngという画像を用意すればプリンターのアイコンをつけることができます。

ViewDemo »
“[mootools] 別窓を開くアイコンとhrefの拡張子に応じたアイコンや属性を追加する” の続きを読む

[Ajax] Google AJAX Feed APIでRSSを表示する

Google Ajax APIシリーズ記事その3はFeedについて。
RSS表示に関しては前にPHPで表示する方法を書きましたが、Magpie RSSだとページをPHPにする必要がありました。
Google AJAX Feed APIを利用すると、javascriptファイルを読み込むだけでhtmlファイルに外部のRSSを表示させることが出来ます。
なんでか妙にマイナーな気がするのはきっと難しそうに見えるからに違いないと思い、3ステップで使えるようにしてみた。
ZIPも用意してみたのでお試しあれ!

Mapはこの記事Searchはこの記事で解説しています。
“[Ajax] Google AJAX Feed APIでRSSを表示する” の続きを読む

[psd] Photoshop Mockup Template for iPhone

iPhone用モックアップテンプレートの必要性を感じたので作ってみた。

Safari View App View Keybord View

左から、Safari、アプリ、キーボード表示

キーボードと一部アイコン以外はベクトルマスク使ってるので色変更が出来ます。
画面のピクセルサイズがレイヤー名に書いてありますが、目算なので間違ってるかもしれない。

なお、zipに入っているpsdファイルのバージョンはCS2です。

“Photoshop Mockup Template for iPhone” をダウンロード iphone_template.zip – 669 回のダウンロード – 200 KB

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

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

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

やってる事は大体同じ

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

“[mootools] 透過PNGをIE6で自動的に表示させる pingfix.js clone” の続きを読む

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

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


直接見る »

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

“[mootools]カイジっぽく「ざわ…ざわ…」を表示する…” の続きを読む

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

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

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

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

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

“[jQuery]IE6以下で閲覧すると画面左端にアナログと表示させるプラグイン” の続きを読む

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

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

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

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タグを全てチェックします。

“[jQuery]リンクに新しいウィンドウを開くアイコンを自動で追加する” の続きを読む

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

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

“[mootools]スクロールに追随させる – mooFollow.js” の続きを読む

[mootools] Class – KitchenTimer

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

使い方は続きに。

“[mootools] Class – KitchenTimer” の続きを読む

[mootools] ひらがなをローマ字に変換するクラス

人が作ったのを使って楽したかったんだけどいいのが無かったので、ひらがなをローマ字に変換するクラスを自作した。
タイピングゲーム製作でどうしても必要になる問題文章を、ひらがな(数字+一部記号も可)で作るだけで全部ローマ字に変換します。
※mootools.1.2が必要

日本語は母音と子音の組み合わせで出来てる。
「く」ならK+U、「し」ならS+I/SH+I/C+I、「わ」ならW+A。
入力方式が変わるのは、「し」や「じ」等特定の文字と、「ん」、小文字のや行、小文字の「つ」との組み合わせの時だけで
あとは特定の子音1種と母音5種類の組み合わせで成り立つ。

で、大体次のような流れで変換を行います。

  1. パブリックメソッドに文章投入→「このぶんしょうはさんぷるっぽいなにかです!」
  2. 1文字または2文字単位に分割して配列化。小文字は前後の文字とセットにする。
    →[こ,の,ぶ,ん,しょ,う,は,さ,ん,ぷ,る,っぽ,い,な,に,か,で,す]
    「っ」で終わる場合や記号・数字とセットになる場合はそれぞれを1文字とする。
  3. ループ文で1文字か2文字か判別。変換関数に飛ばす
    →こ:1文字  しょ:2文字
  4. 1文字の場合はそのまま変換。この時、入力方式の設定がある文字についてはその方式に従う。
    →こ:K+O  ん:NまたはNN
  5. 2文字の場合、最初に「つ」があるかどうか捜査。
    【小文字のつがある場合】
    2文字目を1文字変換のメソッドに通して子音を2つに増やす。
    →っぽ:P+PO →っと:T + TO
    【小文字のつがない場合】
    switch文で入力方式の設定がある文字(し+小文字や行、じ+小文字や行等)を変換。
    他は、1文字変換のメソッドに通して子音+小文字や行ローマ字にする。
    →しゃ:(SH)(SY)+A にゃ:N(i)+YA
  6. 結果を返す
    →[ko,no,bu,nn,syo,u,ha,sa,nn,pu,ru,ppo,i,na,ni,ka,de,su,!]
    →[k,o,n,o,b,u,n,n,s,y,o,u,h,a,s,a,n,n,p,u,r,u,p,p,o,i,n,a,n,i,k,a,d,e,s,u,!]

以下全文。長いw

“[mootools] ひらがなをローマ字に変換するクラス” の続きを読む