webプログラミングの最近のブログ記事

リアルタイムフォームバリデーション jQuery.validation.js
validation.jpgフォームのバリデーション(エラーチェック)を行ってくれるJavaScriptライブラリを探していました。



探していたライブラリの条件
  • ・jQueryで動作する
  • ・HTMLへの記述のみで導入できる(フォームに依存しない)
  • ・リアルタイムにエラーを表示する
  • ・フォーカスされている項目の色が変わる
  • ・エラーの表示位置を変更できる
さらに、「カスタマイズしなくてもカッコイィフォームだとなおよし!」と思っていたところに見つけたライブラリ。

■ライセンス MIT
■使用ライブラリ jQuery.js




久しぶりにPHPに触れた本日。
嫌いだった正規表現。やっぱり嫌いな正規表現。
みごとに30分もはまりました。

助けてくれたのはコレ↓

PHP正規表現チェッカー
php.gif
正規表現 テストツールまとめに色んな正規表現チェッカーがありました。
が、私は日本人なのでコレ。

わきにメタ文字とかエスケープシーケンスが書いてあるのがありがたい。
何気に、いや、結構ありがたい。

おかげさまで無事にプログラムは動きました~♪


Prototype Window Class - Introduction_200901140901.png

Prototype Window Classはマルチウィンドウ表示を可能にしてくれるJavaScriptライブラリです。
デフォルトでは単純なウィンドウやアラートの表示がMacのウィンドウのように表示されます。

スタイルシートや画像を変更すればオリジナルのデザインに変更することも可能。

使用ライブラリ


  • prototype.js

  • script.aculo.us

Movable Typeで生成したatom.xmlをphpで読み込み、日付とタイトルにデザインをつけて表示しようとしました。

デザインを入れる前までは問題なく進んだけど、デザインを入れてみると表示が崩れているではありませんか。。。

cssでfloat:leftを指定し、2段組で表示してあげる予定でした。
しかし、右側のdivが1行下がってしまう…。

原因はphp(文字コード:UTF-8)でatom.xml(文字コード:UTF-8N)を読み込み、デザインテンプレート(文字コード:UTF-8)に日付とタイトルをを埋め込み出力(表示)していたため。

phpで出力されているデータ(テンプレート)の先頭にBOM(Byte Order Mark)がつけられ、そのBOMがデザインの崩れを引き起こしていました。

UTF-8とUTF-8Nが混在していました。
すべてのファイルの文字コードをUTF-8Nにすることで解決できました。


問題解決への道のり


  1. 完成予定のソースを(x)htmlに直接記述 → 思い通りに表示される。

  2. phpで表示しソースをコピーし、サクラエディタで表示 → 「・・」のようなコントロールコードが表示された

  3. こんどはTeraPadで表示 → 文字コードがUTF-8Nと認識された

  4. 使用しているファイルを全てUTF-8からUTF-8Nに変更

いつもExpression Webを使用していたので、全く意識していないものでした。
ちなみにサクラエディタと秀丸エディタのUTF-8はUTF-8Nのことのようです。

関連リンク

コリス
scrs_collis.pngCSS、JavaScript 、WordPress…その他、webサイトの構築に必要な情報が詰まっています。調べものをしていると、かなりの確立で出てきます。お世話になっております。


to-R
scrs_tor.pngjQueryをはじめとした様々なJavaScriptライブラリについて、その他にもSEO対策、CSS、Movable Typeなどの情報を発信しています。西畑さんが制作したライブラリもあり、活用させていただいております。


CSS HappyLife
scrs_csshappy.png名前の通りCSSがメイン。様々なサンプルがあるので、導入調査をする時などにとても役立ちます。
そして、平澤さんのラフだけどラフすぎない文章が大好きです。私とタメなのでとても親近感が…(*^▽^*)
余談でした。。。


WWW WATCH
scrs_watch.pngwebの最新情報がチェックできます☆XHTMLやCSSの情報はもちろんですが、それ以外にブラウザの動向であったり最近のwebサービスについてなど、サイト制作に必要な情報がGETできていいですよ!


DesignWalker
scrs_dswalker.pngデザインに関することはココ!ボタンやアイコンを制作するのに必要なテクスチャやアイコンなどを探すときには必ず見ます。
制作の時だけでなく、目が肥えるようにオシャレなサイトを探すときにも利用しています。

コードが通らない時にテストで使うような簡単なスクリプトの一部をサンプルとしてアップしました。

PHPエディタ

サクラエディタ
(キーワードを設定する必要がありますが、小回り利きます。)

FFFTPを入れなおすと設定が初期化されて.htaccessファイルが見れなくなります。
毎回やってしまうので、メモっておきます。

「隠しファイル」の表示方法

メニュー

「表示」

「.で始まるファイルを表示」にチェックを入れる。
20080918ffftp_01.gif


接続

「ホストの設定」

「設定変更」

「高度」タグ

「NLST -Rを使って高速に再帰検索」のチェックをはずす
20080918ffftp_02.gif


メニュー

「オプション」

「環境設定」

「その他」タブ

「ファイル一覧をキャッシュする」のチェックをはずす
20080918ffftp_03.gif

amazonのくるくるウィジットで年末から買った本を表示してみました♪

このアーカイブについて

このページには、過去に書かれたブログ記事のうちwebプログラミングカテゴリに属しているものが含まれています。

前のカテゴリはwebデザインです。

次のカテゴリはwebライティングです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

CSS Nite in SENDAI

dachas