Ajax

ちょっとPerlが必要になったので、Hellow worldからの過程をメモることにします。
このエントリーの最終目標は、[Ajax + PHP] Web2.0的にHTMLソースを隠す方法　で晒した Request.phpでやってることで、

1. GETを取得（pとaction）
2. 取得したGET値pに基づいてファイルを読み込む
3. 読み込んだファイルの内容を出力

です。
Perlが使えるとさくらインターネットのライトプランみたいなPerlのCGIしか許可されてない鯖で強い。
安価な鯖だとPHPダメって所は多いです。

現時点での自分の状況を書くと…

• CGI設置経験は豊富（でも最近ご無沙汰）
• PHPやJavaScriptの文法を元にそこそこ読めるけどイチからは書けない
• 人が書いたソースのカスタマイズはそれなりに出来る
• Perlでのファイル操作は全く知識がない
• POSTとGETの扱いも良く分からない
• C++に挫折経験あり

設置は経験あるけど作ったことはないっていう状況。
自分の中で消化する為にPHPと比較しながら覚える手を使ってます。
ZeroMail作り始めた時もこんなんでしたわ。

PerlはDreamweaverでサポートされてないので、テキストエディタMeryを使用した。
Exchangeに何かあるかと思ったけどさっぱりだった。

PerlでHello world!!

ローカル環境はXAMPPです。パスはxamppデフォルトそのまんまで、文字コードはUTF-8。

拡張子cgiのファイル作って上のソースコピペしてブラウザで開けばHello worldが出力されるのだが、
content-typeが無いとmalformed header from script. Bad header云々のエラーが出る。
文字コードの扱いに関してはPHPよりも厳しいんだよな、確か。

Continue reading

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

ロジックは以下：

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

主な弱点と対策：

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

window.openで表示

普通に表示

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

Continue reading

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

Continue reading

このエントリーは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ソースの例：

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

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

Continue reading

ページング機能というのは、「複数に分かれたページの前後ページへ移動するためのナビゲーションリンク」のことで
このブログにも下の方に次のページへ移動させるためのページ番号リンクがありますよね。それです。

先頭の何ページ目かまではページ番号、それ以上は三点リーダーとかでぼかしたりするGoogleライクなものや、
前後への矢印だけしか表示させなかったりするものなど、スタイルは色々ありますが
これが自作しようとすると結構面倒臭い。そしてプログラミング初心者だとまず仕組みが良く分からない。
結構よく使うのに作り方や仕組みの解説をあんまり見ない気がするので書いてみます。

ページング機能で最低限必要な情報

以下２つは必須。

• 最大ページ数（10ページまでなら10）
• 現在表示しているページのページ番号（1ページ目を表示しているなら1）

ページ数とページ番号はカウントを０から始めるか１から始めるかで変わりますが、
この記事では１から始める事を前提にして説明しています。

Continue reading