WebTecNote

私は今、長編小説をHPに公開しようと思っています。
キャラクター紹介のページを作ろうと思っているのですが、
読んだ読者さんによって表示される内容を変えたいのです。
例えば第一章で登場するAとBというキャラがいたとします。
読者さんが第一章を読んだらキャラ紹介のページにAとBのキャラクターの紹介が加わる。
という形にしたくて、cookieを使用しようと思うのですが、
なにぶんこのような操作ははじめてでしてどうしたらよいのかわかりません。
各章の最後のページにクッキーを食べさせるjavascriptを書いて、
キャラ紹介のページでクッキーを読み込み、キャラの説明文を表示したいです。

物語が進むにつれて、他キャラが増えたり、説明文に追記が加わるようにするにはどうしたら良いでしょう。
cookie使用があまりなく、調べましたがよくわかりませんでしたので詳しく教えていただけましたら幸いです。

独自CGI作ってもよさげな発想だと思ったんだけど、PHPとJavaScript使えば比較的簡単に出来るので、
デモとサンプルソース晒しときます。

ページ構成と概要

index.html
小説のトップページ（つまり1ページ目 or 第一章）
2.html
2ページ目　or 第二章（以降、ページまたは章と同じファイル名で連番にする）
cast.php(cast.html)
キャラクター紹介ページ
mychar.js
クッキー発行スクリプトファイル

トップは1.htmlでもindex.htmでも何でもいいですが、
2ページ目より後のページを　番号＋拡張子　にします。

サンプルはこちら

Comments: 0
Trackbacks: 0

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

2010-01-21 (木)
MooTools | PHP
Ajax | PHP

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
表示するコンテンツページ

Comments: 0
Trackbacks: 0

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

2010-01-20 (水)
MooTools
bug | Tooltip

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:

PLAIN TEXT

JavaScript:

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:

PLAIN TEXT

JavaScript:

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);
}