[Ajax + PHP] Web2.0的にHTMLソースを隠す方法

MooToolsで遊んでる時になんとなく思いついた。

HTMLソースを完全に隠すことは無理っちゃ無理だけど、サイトの内容をパクられたりしないように防御する事は出来る。
主要な柱は以下3つ。

  • ファイルの置き場所を隠す
  • ソースを読めなくする
  • アクセスを弾く

ロボット対策、右クリック禁止、Flashサイト化、HTMLソースそのものの暗号化するなど色々あるけど、
Web2.0とか言われている時代なのでAjaxを使う方法もアリなんじゃないかなと思ったわけです。

クローラーにキャッシュされず、メールアドレスも拾われず、右クリックしても無駄、「ソースを表示」選んでも主要部分は見えない。
それらの需要を大体カバーするサイト制作方法についての解説とサンプル。

簡単なデモを作ってみた
(デモはサンプルと構成が異なります)

サイト構成例

  • index.html
    メニューボタン、コンテンツ表示エリアを置く
  • style.css
    スタイルシート
  • view.js
    表示とかHTTPリクエストの制御をする
  • reqest.php
    view.jsからのリクエストを受けてページ内容を返す
  • page/about.php, gallery.php, contact.php
    表示するコンテンツページ

“[Ajax + PHP] Web2.0的にHTMLソースを隠す方法” の続きを読む

[mootools] Tips Bug fix – “element.getParent is not a function”

MooTools More1.2.4.2のツールチップ表示クラスTipsにあるバグの修正方法について。

主な症状

ツールチップ表示を有効にした要素にマウスオーバーしてからマウスアウトすると、
FireBugで element.getParent is not a function というエラーが出る。というもの。
(圧縮してあるとelementがbになる)
エラー行数は1142行目(未圧縮)
エラーは最初の1度しか出ない。

修正方法

原因となっているTipsのfireForParentメソッドを入れ替える。

ver 1.2.4.2 Original Code:

fireForParent: function(event, element){
	if (!element) return;
	var parentNode = element.getParent();
	if (parentNode == document.body) return;
	if (parentNode.retrieve('tip:enter')) parentNode.fireEvent('mouseenter', event);
	else this.fireForParent(parentNode, event);
}

Fix Code:

fireForParent: function(event, element){
	if (!element) return;
	var params = Array.link(arguments, {event: Event.type, element: Element.type});
	var parentNode = params.element.getParent();
	if (parentNode == document.body) return;
	if (parentNode.retrieve('tip:enter')) parentNode.fireEvent('mouseenter', params.event);
	else return this.fireForParent(parentNode, params.event);
}

参照元:Tips: “element.getParent()” not working, because “element” is of type Event
このバグは1.2.4.3で修正される予定。

[MooTools] SpriteNavigation Plugin

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

spritenavigation plugin

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

DEMOはこちら

Image

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

navigation

Download(psd file):[ダウンロードが見つかりません]

Creative Commons License

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

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

このエントリーは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タグになります。
サンプルでは上2つだけこのソースです。

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

“[MooTools Tutorial] MooTools用プラグインの作り方” の続きを読む

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

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

View DEMO

View DEMO

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

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

[MooTools] mooZoomGallery Plugin

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

View DEMO
View Demo

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

[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 Tutorial]背景画像を複数読み込んでクロスフェードで切り替える

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

View DEMO

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

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

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

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

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

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

View Demo

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

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

ということをやってます。後編はこちら »
“[MooTools Tutorial]巨大な背景画像の読み込みとMoreの使い方” の続きを読む

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

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

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

View Demo Page

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 Tutorial]横からスライドインしてくるアニメーションメニューの作り方” の続きを読む

[mootools] スクロールバーを画像でカスタマイズする

スクロールバーを画像で作ることが出来るMootools Powered Scrollbarというcoolな関数をちょっと拡張してみた話。

custom_scrollbar

このオリジナルの関数ちょっとクセがありまして

<div id="wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
<div id="scrollbar"><div id="knob"></div></div>
</div>

上記のようにスクロールさせる要素とスクロールバーを兄弟にした場合、contentに#wrapperを指定しないとスクロールされません。
これで#wrapperにposition:relaviteしてあるとスクロールバーまで一緒にスクロールしてしまうわけです。

次のような入れ子のソースで、#wrapperの中身の#scrollareaをスクロールさせたいとした場合

<div id="wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
</div>

スクロールする要素包んでスクロールバーを作れば何も考えずに済む 😀

<div id="wrapper">
<div class="scroll-wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
</div>
<div id="scrollbar"><div id="knob"></div></div>
</div>

ので、そういうもの作ってみたというわけです(自分用に)
空要素作らなくて済むし一石二鳥かなぁと。

ViewDemo »
“[mootools] スクロールバーを画像でカスタマイズする” の続きを読む

[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">
	//<!&#91;CDATA&#91;
	window.addEvent('domready', function(){
		new mooAnalogIE();
	});
	//&#93;&#93;>
</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)

ダウンロード:[ダウンロードが見つかりません]

[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の拡張子に応じたアイコンや属性を追加する” の続きを読む

[mootools]セレクトメニューを連動させて動的に選択肢を変更する

セレクトメニューが2つあって、1つ目のセレクトメニューを選択したら、その値によって2つ目のセレクトメニューの選択肢を入れ替えるというものです。
わざわざ何番煎じか分からないネタを遇えて取り上げたのは、巷でよく見かける「配列にデータを入れて出力する」という方法ではなく、Validなソースでこれをやりたかったためです。
選択肢がやたらと多くなりがちなもの、たとえば県から市を選んだりするフォームなどでよく使われていると思います。
とりあえずセレクトメニュー2つだけ連動させてみました。

XHTML

連動させるセレクトメニューにそれぞれIDが必要。
親セレクトメニューのoption要素につけたクラス名と、子セレクトメニューのoptgroup要素のクラス名を同じにします。
optgroup内に入れた要素が選択された時に入れ替わる選択肢になります。

<label for="select">選択肢1</label>
<select name="select" id="select">
	<option value="果物" class="fruit">果物</option>
	<option value="肉" class="meat">肉</option>
	<option value="魚" class="fish">魚</option>
</select>
<label for="select2">選択肢2</label>
<select name="select2" id="select2">
	<optgroup class="fruit" label="果物">
	<option value="リンゴ" selected="selected">リンゴ</option>
	<option value="みかん">みかん</option>
	<option value="ぶどう">ぶどう</option>
	<option value="桃">桃</option>
	</optgroup>
	<optgroup class="meat" label="肉">
	<option value="m1">牛肉</option>
	<option value="m2">豚肉</option>
	<option value="m3">鶏肉</option>
	</optgroup>
	<optgroup class="fish" label="魚">
	<option value="maguro">マグロ</option>
	<option value="sisyamo">ししゃも</option>
	<option value="iwashi">イワシ</option>
	<option value="sanma">サンマ</option>
	</optgroup>
</select>

見ての通り普通にソース書くのとそう変わらんので、javscriptオフでもフォームは機能します。
option要素を持たないselectを作る必要もないからバリデートに怒られる心配もない。
optgroupのラベルはどっちでもいい。
“[mootools]セレクトメニューを連動させて動的に選択肢を変更する” の続きを読む