jQuery.validateで複数項目チェックで複数エラー出力方法

2011年2月20日にアップしていた記事を復活させました。

最近、開発の参考資料を漁るべくググってもドキュメントがあまりない、jQuery.validation を使っての複数項目チェックと複数エラーメッセージ表示についてまとめておきました。

フォームタグでくくっての入力欄を用意しようとした場合、当然のように「名前」「メルアド」「住所」「電話番号」等々、複数項目を入力することを想定してデザインするはず。

それをデータベースに登録する前に、その入力した項目の中にデータベースには登録させたくない文字列があったり、ハッキングを試みるようなデータが入っていたりするとそれをはじくような処理をバリデーションと言うわけですが、それを検出してエラーメッセージを表示させる場所を検討したりデザインする作業はいつも悩ましかったりします。

これをjQuery.validateプラグインでさくっとやってしまおうじゃないかというのが今回のお題目。

しかしJavascriptアレルギーだった私が、今回の開発現場でjQueryすっかり虜になり、その勢いで、複数項目チェックで好きなところに好きなようにエラーメッセージを出力する方法を編み出せたので、参考までにご紹介いたします。サンプルコードも公開しますので、よろしかったら使ってみてください。

特に、”errorPlacement”を設定することで、それ以下で指定したidの値のあるタグ位置にエラー出力できるようになりますので、その位置を変えることで自在に出力位置を変更できます。こりゃ便利(^e^)n

ではそのサンプルhtmlを以下に。

参考にしたドキュメントは「jQuery Validation Pluginメモ」
http://micelle.org/trash/jquery-validation-plugin

Enterキー押下でTab移動したりサブミットする操作を止めるJavascript

ほかから頂戴したJSですけど、実用的なのでここでも紹介します。

良かったら使ってみて

CakePHP2を美味しく食べたい:$scripts_for_layoutの使い方

この記事は2012年2月14日にアップしたものを復活させました。

画面を作り込んでくると、<head>内で別ファイルのcssやscriptを読み込んで、見栄えや動きをつけてゆくもの。
でも、画面テンプレートを共通化しておくと、「この画面ではこのcssとかjsは不要なんだけど…」でも制作上の都合でそのままにしておきがちかもしれません。小さいファイルであればいいのでしょうが、昨今のJavascriptはJQueryや色々なプラグインなど大きなファイルを読み込ませて動作が重くなりがち。

これを、画面表示で必要な部品(ビュー)を読み込む場合のみ、ヘッダー側で出力してもらうというのがこの$scripts_for_layoutの仕組みです。

使えるようにしておくため、レイアウトファイルの<head>部に
<php? echo $scripts_for_layout;?>
があるか確認。無ければ書き加えましょう。

そして表示させる予定のviewファイルに次のように記述します。

CSSファイルの場合


<?php $this->Html->css(array('hoge/fuga',"fuga",'/hoge'), null, array('inline'=>false)); ?>

この記述の意味を説明すると、味噌は
array('inline'=>false)
この値を指定してあれば、画面出力時に$scripts_for_layoutのある箇所に、cssを読み込むエレメントが出力されるようになっています。

array('hoge/fuga',"fuga",'/hoge')
この記述では3つのcssファイルを読み込ませるためファイルのありかを指定しています
‘hoge/fuga’は/css直下にある/hoge/fuga.cssを指定
‘fuga’は/css直下のfuga.cssを指定
‘/hoge’はルート直下のhoge.cssを指定
しています。
読み込むファイルが1つの場合は

<?php $this->Html->css('hoge', null, array('inline'=>false)); ?>

でもOKです。
ちなみにnullの箇所に文字列を入れるとエレメント出力の際の”rel”値がその文字列になります。ただし、’import’を指定すると<link>ではなく<style>エレメントに変化し読み込み形式が変わります。
※なぜかtrueを指定するとimportと同じ挙動を取るようです。2.0.6で確認しました。

JavaScriptファイルの場合


<?php $this->Html->script(array('script1', 'script2'), array('inline'=>false)); ?>

この記述の意味も上記cssに準じます。

こうしてレイアウトは共通だけれど、表示させるビューによって読み込ませるcssやjsをダイナミックに変更できるため、ページ表現時にいろんなことができそうです。

“$this->set(compact())”が素敵☆CakePHP2を美味しく食べたい

2012年9月17日にこんな記事をアップしていました。

CakePHP2に限ってのことではないので、1.3やほかのフレームワークでも応用できそう。
元ネタサイト:
Stupid CakePHP Controller Tricks(英語)

コントローラーで設定した値をビューに渡す時、

$this->set('hoge', $hoge);
$this->set('fuga', $fuga);
$this->set('hena', $hena);

というようにして、ビュー側では$hoge,$fuga,$henaとし使いますが、これを
$this->set(compact('hoge','fuga','hena'));
とすると、$hoge,$fuga,$henaとして仕えてしまうというわざ。
素晴らしいです!

【参考】
compact()

近代和暦について。慶応 明治 大正 昭和 平成

2013年4〜7月のあいだ、商工会&商工会議所のアプリケーションの開発に携わりました。そのシステム設計を担当した際、この団体が近代日本の企業の発展の歴史に大きく関与してきたのだと感じました。その案件にかかわったおかげで、近代和暦の扱いに詳しくなれましたので、まとめておきます。

明治について
1868年10月23日に明治天皇が正式に即位しました。慶応四年九月八日のことです。
普通に捉えるとこの日を境に明治元年となると思ってしまいがちですが、少し違うのです。明治天皇はこの時、『暦を遡って一月一日から明治とする』と定めました。そのため慶応四年はなかったことに。たいへん古い商店によっては創業年を併記している場合がありますが、こういうことだったんですね。

太陰暦→太陽暦へ
明治五年一二月三日、その日が明治6年1月1日となりました。
改暦が発効されて施行までわずか23日後だったので、人々は慌てふためいたのは想像に難くありません。

大正について
1912年7月30日(明治45年7月30日)に大正天皇が即位され、大正元年7月30日になりました。
日本の法律、明治45年7月30日も大正元年7月30日も同じ日として存在します。

昭和について
1926年12月25日(大正15年12月25日)に昭和天皇が即位され、昭和元年12月25日になりました。
日本の法律、大正15年12月25日も昭和元年12月25日も同じ日として存在します。

平成について
1989年1月7日(昭和64年1月7日)昭和天皇がお亡くなりになり、その日元号が「平成」になると発表がなされました。それまでの慣例通りではなく、色々な大人の都合もあって翌日施行され、1989年1月8日に平成元年1月8日となりました。

年号を自動計算して返還することのむずかしさ
昭和元年が8日しかなかったり、昭和64年が7日しかなかったり、明治と大正、大正と昭和という違う元号の同一日が存在したり、慶応4年が消えてなくなったり、閏月の変換が明治初期に必要だったりと、西暦と和暦を自動変換するプログラムを書くのは非常にめんどうくさいです。

近代日本のアイデンティティ
暦を振り返り激しい動乱の時代が長く続いていたことを実感し、バブル期に成人した私としては、ここ20年(2012年時点)経済成長がなかった半面、日本は安定と成熟期を過ごしていたと言えると思います。

組織も文化も年を重ねて大人になると感じているのですが、ということは、そろそろ大人の見方、考え方、価値観を踏まえて振る舞う時期がきたと考えます。

いけいけどんどんの若い価値観ではなく、回りをよく見て、他の人の福祉に資するような(お金ばらまいて甘やかすのではない)一回り大きく丸くなった大人の風格を漂わせる振舞いをすればいいのではないかとつくづく思うのです。

jQuery.validation サンプルのテスト実装

作ったはいいが、作った本人が『あれ?これどうやって使うんだっけ?』というのはプログラム書きの間ではよくある話。素敵なコードを書いていた自分に感心しつつ、そのころかなりいっていたんだろうな、いい意味でも悪い意味でもと感傷にふけることも。

というわけで、ちょっと前に紹介していた便利な(はずの)JSバリデーションの使い方がわからなくなったので、テスト的に実装して『あ~こんな風だと便利だな』と味わいたくて、テスト実装した結果をみんなでシェアできればと思っております。

CakePHP2を美味しく食べたい:$autoLayout と $autoRenderでの制御

CakePHP2のhtmlビュー表示制御について

自動レンダリング機能の動きとOFF/ONについて現時点で市販のとあるマニュアル本の書き方がだらしなく(そのうえそれくらいしかないorz)、誤解を招く記述なので自分の整理のためにも書きます。
コントローラのメンバ変数として指定できる$autoLayoutと$autoRender。この$autoLayoutと$autoRenderは画面表示用テンプレート読み込み動作のOFF/ONをつかさどります。初期状態はどちらも”TURE”が指定されていますので’ON’状態です。この二つのメンバ変数を記述しなければ、初期値(ON)で動作することになります。

そのときはどう動くの?

例えば/hoge/でページを表示させるつもりであれば、次のようにコントローラーを作りますね。
/Controller/ディレクトリ直下にHogeController.phpと名前をつけたファイルを作成し、そのファイル内にindex()アクションを記述した場合、
/View/ディレクトリ内に/hoge/ディレクトリを作り、その中にindex.ctpという名前でファイルを配置すれば、そのファイル内に記述した内容が読み込まれます。
さらに
/View/Layouts/ディレクトリ内にあるdefault.ctpファイルが読み込まれます。
そして上記(index.ctp)で読み込んだ内容をdefault.ctp内に記述されている

<?php echo $content_for_layout; ?>

で出力し表示します。もし/View/Layouts/default.ctpが無いとか、/Layouts/ディレクトリがない場合はCakePHPのライブラリ内にあるファイルを読み込んで表示するようになっています。

この挙動を変更したい

レイアウトを使いたくない

コントローラ内に次の1行を加えれば、レイアウト表示をOFFできます。
public $autoLayout = false;
これで、/View/hoge/index.ctpだけが表示されます。

レイアウトを色々と使い分けたい

複数ページを制作しカテゴリ毎に色分けしたレイアウトを複数用意して季節が変わったらレイアウトを変更したいなら、レイアウトファイル名を指定するため$layoutを記述して制御します。
public $layout = 'hoge';
これで/View/Layouts/hoge.ctpを読み込んで来るようになります。
応用編ですが、時間帯で変えたいとかユーザーステータスで変えたいは

public $layout;

 

public function index()
{
$ctp = 'hoge';
if ($hour == 1) $ctp = 'fuga';
if ($hour == 2) $ctp = 'hena';
$this->layout = $;
}

とするといいかもしれません。判断分岐はみなさんのセンスでどうぞ。

そして、
$autoRender = false;
こうすることで、レイアウト用またビュー用テンプレートファイルを読み込んでくる処理を止めることができます。
特殊な用途でこれを止めて、アクション内で何か処理をさせて終わらせる必要がある場合もあるでしょう(画面遷移を振り分けるためだけでリダイレクトさせるとことか)。画面表示の必要が無い場合、この記述を加えてテンプレート読み込みを止めます。

SQLiteをトッピングしたくて… #CakePHP2を美味しく食べたい

様々なデータベースとの親和性が高くて扱いやすい(と思っているというか、そう信じている)CakePHP2ですが、
『ん?ではSQLiteを使うときはどう設定すればいいのかな』と公式マニュアルを漁っても、どうも的を得ない。

SQLiteはデータファイルを普通のファイルとして扱う簡易データベース的ファイル。
であるので、それにふさわしい設定を入れてあげないとちゃんと動いてくれないはず。
「どっかにないかなぁ」とググっておりましたら、ありました!
これはまさに良く的を得ております。
cakePHP2.0での SQLite3(PDO版)を使う
まずはCakeのPDO経由でアクセスするために
セオリー通りに、DATABASE_CONFIGクラス内で変数を定義します。

public $sqlite3 = array(
'datasource' => 'Database/Sqlite',
'persistent' => false,
'host' => '',
'login' => '',
'password' => '',
'database' => 'dummy.sqlite3',
'prefix' => '',
);

そして、SQLiteを使うためには、どのディレクトリにファイルが存在するか教えておかねばなりません。
その設定はコンストラクターで以下のようにするのですね。

function __construct(){
// SQLite用データベースファイルの格納先
// [app_name]/tmp/sqldata/
$dir = ROOT.DS.APP_DIR .DS. 'tmp'.DS.'sqldata'.DS;//-(1)
$this->sqlite3['database'] = $dir. $this->sqlite3['database'];
}

なるほどぉ。(1)の肝は”ROOT.DS.APP_DIR”で、こうしておくことでCakePHPのディレクトリ構成をそのまま引き継ぎ、それ以降をSQLiteの配置ディレクトリに合わせて記述してあげれば、アップロードしたらすぐ動くという具合になるのですね。
わっかりました!

参考サイト:

http://miztools.so.land.to/php5_list/eat_cake/cake2/edit/sqlite3
PDOにもっと詳しくやさしく知りたい方は PDOでサクサクDB開発 に目を通しましょう。
※「一度目を通しておけ」とはザッと軽く読むことだと誤解してました。実はその逆で「よく読んでおけ」ということです。

2013年10月に「激動の1年超を振り返」っていたようです。

先日、昔のブログのデータが出てきました。

「そんなにむかしじゃやいはずだけど、あの頃の自分…どうだったかな?」という興味がわきまして、データを見られるようにローカルにブログを立てて復活させてみました。

そうすると、とぎれとぎれではあっても振り返っている自分が、2013年10月末にこんなブログを書いていたのを発見しました。

大変ご無沙汰しております。なんと1年以上ぶりの更新となってしまいました。
2012年の9/17ぶりですか。この一年もまた激動の年でした。

2012年11月末に、ちょうどぴったり10年住んでおりました京都市内から引っ越して、神戸市役所が見える高台に引っ越しました。ご近所には異人館が点在するようなところです。夜景はデフォルトに美しく見え、朝は差し込む日差しが眩しすぎて目が覚める。そんなところです。

プロバイダーのiPhone操作用バックエンド側システムを作ったり、電力会社のエコ支援システムを作ったり、畑違いの医療システムに関わったり、はたまたScalaっていう言語に触れたりと目が回るほどでしたので目が回りました。

10月はそんなこんなで自分のメンテナンスもあり、仕事を半ば断りモードでゆっくりさせてもらいながら、自分の色々なものの棚卸しと棚上げとシステム更新、やりたかったことをとにかくやってゆきました。

システムの入れ替えといえば、今このブログはMacbook Pro で書いてまして、Windowsの呪縛から解かれることにしました。で、マックライフを楽しんでいるのですが、とにかく可愛いです。多少の不便やわがままは許す。だって可愛いもん!という日々です。「こうやりたいんだけど」ってのは色々なアプリ側で対応してくれているので、その中から入れては削除して入れては削除して見つけていける。それがまた胸のすく思いです。

これがWin系だとレジストリが色々書き換えられて、深い階層に意味わからずフォルダー作られて、どんどん重くなって行く…

というものから解放されて「やっぱりおまえは可愛いぞ!Leonard」と味をしめている日々です。
leonardってのはこのマックにつけた名前。フルネームはLeonardBearで、アイコンはマッドサイエンティストのレオナルドにしています。「熊」ではありません。思いっきりレオナルドな!って意味が込められています。
時に、leonと読んだりレナードと呼んだり、イタリア発音で呼んだりしてます。

そういえば、このマックを購入するときAppleStoreの店員さんが「これはLinuxではなくUnixですっ!」て言っていました。う〜ん、実際にはUnixってのは存在しなかったのでそういった思想ってことで「あ〜はい」って言っておきました。ま、BSD系OSであることは確かだし、長いことBSD系の方々がLinuxと混同されることをいやがっていたので、ま、その残党と考えるとあの女性はなかなかの人なのかもしれません。申し添えておきますが、今やBSD系OSもLinux系と一緒に数えられていますので。なのでMacもそういった意味でLinux系なんですよね。

最近、名刺の肩書きからLAMP職人を外しました。Macにしたので本当はさらにLinux,Apache, MySQL,PHPになっているんですけどね、でも、それしかできないと思われ始めているので「いやそうじゃないし、実はそうじゃなかったんですよ」ってのを主張しようとし始めておりまして。

そういったことをしっかり振り返りきらずに10月が終わり、2013年11月に突入です。神戸人になって丁度1年です。仕事のオーダーがこないので11月に遊んで暮らすモードでいくことになりますが、なんだか清々しい気持ちです。

このあと、くら寿司の順番予約システムから派生したEPARKの保守チームに入ったんですよね。もう書けないことばっかり学びました。結構色々痛かったですが振り返るとあのとき身につけた技が今活かされている感じ。茨の道もいいものです。

神戸人になってさらに2年が経ち、板についてきました。酸いも甘いも味わって、やっぱり神戸が好きでした。なのでもっといい感じに神戸人になりたいと思っています。

見た目って大事だよ☆cssでエッジ効かせたい

2013年11月から2014年9月までのあいだは、お寿司屋さんとか携帯電話会社の店頭にあるあの待ち行列予約を作っていまして、そのときに書いたブログを復活。

CSS: marginの正しい理解 (CSSのmarginが難しい)
を読みました。これは本当によくまとまっています。

操作する画面を整えるところで、いわゆる”UI”を美しく整えたいんだけど「これってなんかおかしい」という他の人が作業した設定にぶち当たり、自分もよくわかっていないから、結局見た目だけであーしてこーしてと解決させていませんか?

そんなことしたら次の誰か(未来のあなた自身かもしれない)の修正で破たんしますよ!間違いなく確実に。

ってことで、ちゃんと理解しよう、CSSも。

って当時書いていましたが、時代はCSS3でSassとかの時代で、デザイナーさんたちはマークアップエンジニアに昇格してわたしたちプログラマーとかエンジニアの職域とかぶるようになってきました。