Ajax

[js] スマートフォンのAjax フォーム送信時にキーボードを消す

2012/02/14 Memo No comments , ,

Goボタンを押した時のイベントはsubmit もしくは event.keyCode のcode=13 で取れますが
テキストフィールドやテキストエリアに入力後、スマホのキーボードでGoボタンを押した時、
onsubmitをキャンセルしていたりするとキーボードが隠れないので、
キーボードが表示された要素からblur()でフォーカスを外す必要があります。

ボタンがあるならボタンにフォーカス移すのが手っ取り早い。

[perl] 学習メモ:Hello world!! → GET値の取得と処理 → ファイルの内容出力

2010/03/16 Perl No comments ,

ちょっと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。

#!/xampp/perl/bin/perl

print "Content-type: text/html; charset=UTF-8\n\n";
print "Hello world!!\n";

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

(さらに…)

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

2010/01/28 MooTools No comments , ,

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を使用するのがいいかもしれない。

(さらに…)

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

2010/01/21 MooTools, PHP 1 comment ,

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

(さらに…)

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

2009/12/28 Tutorial No comments , , ,

このエントリーは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つだけこのソースです。

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

(さらに…)

ページ: 1 2