Demo – WebTecNote

[HTML5+CSS3]　第二回コーディングコンテスト　に参加してました

2010/04/202010/03/24 by

締切後のソース公開OKらしいんで晒しておきます。

応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。
連休中のいい暇つぶしになりました。
イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず…実質的な製作期間は４日くらい。
例によってMooToolsをしこたま多用してます。

完成したのはこれ

ボタンにはCSS3のtransitionとグラデーションをフル活用してます。
このプロパティ面白いんだけど手打ちは地獄を見れるぜ…！
transition.cssのカオスさは必見かもしれない。

一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。

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

2019/07/162010/03/10 by Tenderfeel

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

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

[MooTools] 左右からスライドインさせて表示する – Slidable Viewer

2019/06/272010/02/24 by Tenderfeel

ID指定したエリア内にある要素を左右からスライドインさせて表示するクラス。
使い古されまくりな感じのものだけど、使う用事があったので適当に書いてみた。

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

2010/10/072010/01/28 by

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

ロジックは以下：

透過画像をbody全体に被せる（オプション:cover）
oncopy を return false;
Ctrl+AとCtrl+Cを無効にする
B：前に戻る N：次に進む（オプション:move）

主な弱点と対策：

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

window.openで表示

普通に表示

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

[GoogleMaps] グーグルマップとストリートビューを双方向連動表示させる

2010/01/052010/01/04 by

久しぶりにGoogleマップ弄ったらいろいろと変わっていたので遊びついでに作ってみた。
Ajaxローダーを利用して導入しやすく作ってみたので是非お試しあれ！

このスクリプトは、Googleマップとストリートビューを同時に表示した上で、移動した時の表示を連動させるものです。

GooleMapsで中央に表示している地点がストリートビューに対応している場合、ストリートビューを表示
Googleマップでマーカーを移動したらストリートビューも移動させる
ストリートビューで移動したらマップのポイント（中心）も移動させる
ストリートビューで表示している場所の住所表示
ストリートビューに未対応の場合エラーを表示する
3Dコントローラーの利用

DEMOはこちら

使用上の注意

光のような高速回線環境でないと表示がもたつきます
ローカル環境（サーバーではない）ではクリック移動時のストリートビューが機能しません
ストリートビューを表示する要素は、直接縦横のサイズを指定しないと横幅が100%になります
MITライセンスです

[MooTools] SpriteNavigation Plugin

2019/06/272010/01/04 by Tenderfeel

MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。

spritenavigation plugin

元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。

DEMOはこちら

Image

全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。

Download(psd file):
“SpriteNavigation Demo Base” をダウンロード nav.zip – 3959 回のダウンロード – 41.43 KB

[MooTools Tutorial] MooTools用プラグインの作り方

2009/12/28 by

このエントリーはMooToolsチュートリアル特別編で、MooTools用プラグインの作成手順をステップバイステップで晒しています。
解説ソースの元にしているのはmooContreGalleryですが、
チュートリアルに使っているソースは実際配布しているものと仕様が異なります。

初歩的な説明はかっ飛ばしているので、詳しい解説については公式のドキュメントとか高橋文樹さんの日本語訳ドキュメントなどを参考にどうぞ。

プラグインを作るにあたっての前提と必要なファイルの用意

mooContreGalleryはhttp://www.contreforme.ch/のProjectsページで使われている
画像拡大、スクロール、インフォメーション表示など一連のエフェクトを実装するプラグインです。
元々「これどうやって作るの？」という質問に答えるために作ったものですが、結構いい感じに出来たので許可を頂いた上で公開するに至りました。
そういうわけなのでこのチュートリアルは質問に対する回答でもあります。

HTMLソースは本家とだいたい同じという前提ですが、すべてをスクリプト側で補うようには作っていないので
利用にあたってはCSSやソースにいくつか決まりごとがあります。

リスト要素(LI)の中に画像や説明が入っているとする。
リスト要素全体にクリックイベントを付与するので、cursor:pointerなどでクリック出来る事を示しておく。
サムネイルを入れている要素の背景にローディング画像を上下中央に設定しておく。
Fx.Scrollでスクロールさせる場合は下方向に余裕がないと途中でつっかえてしまうので、
スタイルシートでpadding-bottom:600pxなどしておく。

MooToolsでは配布しやすくするためにClassを使って作るのが一般的。
プラグイン化するにあたって考えた仕様は次の通りです。

ギャラリーの主要な要素を別のタグに変更できるようにする
要素を得る時に使うIDやクラス名は変更できるようにする
画像ファイル名に含まれた任意の文字列でサムネイル(_s)と拡大画像(_b)を入れ替える

プラグインは任意で設定変更出来なきゃ意味がない。ってことで、これらはオプションで実現させました。

XHTMLファイルと画像、MooTools Core、Moreを用意。
Moreでは、画像読み込みをするのでAssets、開いたときにスクロールさせるのでScroll、説明をスライドさせるのでSlideが必要です。
（…と結論を書いてるけどMoreは作りながらリストアップしていく事が多い）

XHTMLソースの例：

<ul id="gallery"><!--ID指定するギャラリー-->
    <li><!--ギャラリーの子要素（自動取得）-->
        <a class="thumb" href="images/cat1.jpg"><img title="cat1" src="images/cat1_s.jpg" alt="cat1" width="100" height="68" />
        <!--サムネイル画像とそれを入れる要素。クラス名必須-->
        </a>
        <div class="info"><!--スライドされる説明要素。クラス名必須--></div>
    </li>
</ul>

noscript対策で拡大画像にリンクする場合は上記ソースのようにサムネイルを入れる要素がaタグになります。
サンプルでは上２つだけこのソースです。

続きから口調が投げやりなふいんきになります。

固定ページ: 1 2

[MooTools Tutorial] ページのコンテンツをスライドさせて切り替える

2009/11/19 by

コンテンツを全部横並びの帯状に配置して、ボタンクリックで水平方向にスライド表示させるチュートリアルです。
中身が少なくて写真で誤魔化さざるを得ないようなサイトにもってこいなアニメーション。
Coreだけで作れるのでお手軽だと思います。

View DEMO

Coreクラスのダウンロード方法などは省略しているので、初回のMooToolsのCoreとMoreについてをご覧ください。
なお、Step1～Step3も同じ内容となっています。

[MooTools] mooZoomGallery Plugin

2019/06/272009/11/16 by Tenderfeel

mooZoomGalleryはサムネイル画像から拡大画像への表示を、画像が並んでいるエリア内で行うMooTools用ギャラリープラグインです。
LightBoxのようにレイヤーを被せて表示するのではなく、他のサムネイルを非表示にする事で画像を表示する場所を確保します。
……なんかこの動きどこかで見たような気がしなくもないですが、
このプラグインは全て同じサイズのサムネイル画像を並べたレイアウトに特化しています。

View Demo

[MooTools] mooContreGallery Plugin

2019/06/272009/11/15 by Tenderfeel

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

View Demo

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

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

[MooTools Tutorial]背景画像を複数読み込んでクロスフェードで切り替える

2010/02/042009/11/12 by

MoreのAssetsクラスを使うチュートリアル後編です。
前編で背景画像を1枚Assetsクラスで読み込むソースを書きましたが、
今度は背景画像を3枚読み込んでからクロスフェードで切り替えるものに変更します。

導入などの説明はすっ飛ばしてるので前編をご覧下さい。

[MooTools Tutorial]巨大な背景画像の読み込みとMoreの使い方

2009/11/122009/11/11 by

MooToolsには豊富な機能拡張クラス（プラグイン）があります。
公式サイトでは基本クラス群をCore、機能拡張クラス群をMoreと称してあるのでそのように覚えておくと良いと思います。
Moreクラスはコアに実装されていない機能を個別に提供するもので、
どれもCoreのクラスに依存しているのでCoreとセットでないと動きません。

Moreの公式サイトでの配布は約60種類、MooTorialに約７０種類くらいあります。
大体のことは網羅されているので、そのまま活用するもよし、組み合わせて新しいプラグインを作るもよしです。

このエントリーはそんな便利なMoreクラスの使い方を説明しつつ、
Flashでやってしまいがちな横幅1000pxを越える大きな背景画像の読み込みを、MoreのAssetsクラスを使って行うチュートリアルです。
前編後編で分けていますがタイトルが違うのでご注意を。こちらは前編です。

前編：ページ開く→ローディング画像表示と背景画像を1枚読み込み→読み込み完了で背景表示

後編：画像3枚読み込み→クロスフェードでエンドレス切替

ということをやってます。後編はこちら »

[MooTools Tutorial]横からスライドインしてくるアニメーションメニューの作り方

2009/11/122009/11/06 by

何か最近巷がjQueryマンセーな感じで、MooToolsフリークとしては肩身が狭い今日この頃
MooToolsがマイナーなのはドキュメントが少ないからだ！と言われてるようなので、
新しいカテゴリなど追加しつつ手取り足取りなチュートリアルを書いて行こうと思います。

このエントリーでは、MooToolsのFx.Morphクラスを使ってリスト要素をFlashのようにぬるぬる動かします。
完成するとリストメニューが上から順に画面中央付近から左側へスライドインしてくるアニメーションになります。

MooToolsのCoreとMoreについて

今回はCoreに内臓されているクラスを使うのでMoreのクラスは必要ありません。
スクリプトを利用するのにダウンロードが必要なのはダウンロードページのトップにあるMooTools 1.2.4のファイルです。

mootools_download

ダウンロードするとmootools-1.2.4-core.jsみたいに、バージョンの後ろにcoreと入ったファイル名になります。
（.txtの拡張子を削除して拡張子を.jsにすること）
MooToolsを利用する場合はこのCoreファイルがあればOKです。

プラグインによってはMoreのクラスが必要になる場合があります。
大体はプラグインに合わせたCoreとMoreがセットで配布されているのですが、
別途ダウンロードが必要な場合は、ダウンロードページの右側にあるメニューからMore Builderに移動し、
必要なプラグインを選択してダウンロードします。

CoreファイルもCore Builderに移動すれば必要な機能だけチョイスして作成することが出来ます。
使わない機能を削除すればファイルサイズを減らす事が出来るので、覚えておくと便利です。

※注意
ある程度経験のある方を対象にしていますので

HTMLやXHTMLが分からない
CSSも良く分からない
Javascriptの基本的なことが分かってない
（インスタンスとかメソッドとか言われても意味が分からない…という人は
インスタンス＝複製したもの　メソッド＝関数　と置き換えればなんとかなると思います）

みたいな方は対象外になります。

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

2019/06/272009/02/18 by Tenderfeel

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