HTML５から新しく登場した「pattern」属性のおかげで、HTMLフォーム内のテキストボックスに入力される値を制限することが出来るようになりました。今までは、JavaScriptを用いたり、一度POSTさせてからPOST先で内容の精査を行うのが一般的な手段でしたが、HTML5ではPOSTを行う前に入力内容の精査を行うことが出来るようになりました。
<input> 要素の pattern 属性を指定すると、正規表現を使って入力値のパターンを指定することができます。 正規表現が使えることで、特定の文字列が含まれているかどうかや、 半角英数・全角文字・ひがらなのみなど、入力制限を自由に設定できます。
引用元：<input pattern>－HTML5タグリファレンス
今回は、上記にあるとおり「全角文字・ひがらなのみ」の入力制限をどのようにpattern属性で行うのかに悩んだ結果、動作が確認できる情報を見つけたので情報共有をかね記事にしてみました。
pattern属性は「正規表現」で行う
このpattern属性というのは、”正規表現”を使って入力可能である文字列を制限します。”正規表現”というのは、たとえば「good」という文字列を「半角小文字で4文字」のように表現します。pattern属性ではこのような表現に一致するかどうかを判断していることになります。
実際に「good」を正規表現であらわして見ましょう。「good」は正規表現では [a-z]{4} となります。これは「a～zまでの文字が4回繰り返す」という表現になります。一般的な英数字での正規表現にかんしてはこちらのサイトが見やすかったですのでごらんください。
全角文字・ひらがな・カタカナでの正規表現
今回は英数字に的を絞らず(検索すればすぐに見つかるから)、日本語の全角文字・ひらがな・カタカナを指定する方法を書きます。
半角カタカナ
pattern="[\uFF66-\uFF9F]*"
全角カタカナ
pattern="[\u30A1-\u30F6]*"
全角ひらがな
pattern="[\u3041-\u3096]*"
全角数字
pattern="[\uFF10-\uFF19]*"
全角アルファベット(A～Z)
pattern="[\uFF21-\uFF3A]*"
全角アルファベット(a～z)
pattern="[\uFF41-\uFF5A]*"
上記のユニコードは以下のリンクよりWikipediaに記載があるユニコード表を元に作成しました。
===================================
半角カタカナのユニコードはこちらから確認できます。
全角カタカナのユニコードはこちらから確認できます。
全角ひらがなのユニコードはこちらから確認できます。
全角数字のユニコードはこちらから確認できます。
全角アルファベット(a~z、A～Z)のユニコードはこちらから確認できます。
===================================
さて、これらを駆使すれば、日本語入力かどうかをHTML5のpattern属性だけで判断することが出来ます。
参考までに
漢字などを含む日本語入力必須！としたい場合は、「英数字じゃない」というpatternが有効です。[^○○]とした場合、「○○ではない」という意味になります。
pattern="[^\x20-\x7E]*"
[\x20-\x7E]
すべてのASCII文字に一致する正規表現です。すべてとは・・・
! ” # $ % & ‘ ( ) * + , – . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ / ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ です。(先頭には半角スペースがあります)
以上です
コメント
こんにちは
wordpressというかphpの高速化で色々やっていたんですが、
mod_fcgidとapcだと子プロセスがないのでapcがキャッシュ化しないことがわかりました。
それで、mod_fastcgiとphp-fpmとapcならできるみたいことを読みましたので試そうと思いましたら
なんとnginxでリバースプロキシーの方が早いらしいので試しにやってみました。
速さにびっくり・・・。gtmetrixで初めてサイト表示が一秒きりました。
さらにF5をしてもphp-fpmのプロセスも増えずcpuの負荷も増えずとすばらしい！！
会社のサーバーにリバースプロキシーを導入できるか？
試行錯誤してる最中ですね。はぁつかれた・・・。
具体的にはwp-login.phpへホスト名で許可できないかif文とか試してる所です。
おはようございます。
リバースプロキシーにすっかりはまっています。
wordpressの記事を投稿と同時にキャッシュがクリアできず困っていたら、
Ngixn cache controllerというプラグインがありましてこれは解決できそうです。
nginxもphp-fpmもapache権限に変更、/var/cache/nginx/のキャッシュもapacheに変更しました。
wp-login.phpへアクセス規制はapacheとの併用で解決できました。
これから仮想サーバーを作って会社のサーバーにnginxを導入できるか？
色々検証していくつもりです。
何かをつくったり、何かを試すのって本当楽しいですね。土日は睡眠時間を削って色々あれこれやってました。
こんばんは ごぶさたしております。
週末に母親が仙台から遊びに来たり、最近の暑い天候にだらだらしてたりしました。
さて、nginxのリバースプロキシですが、
nginxを2つもしくは2つの異なるポートで起動して、片方をWebアクセス用、片方をリバースプロキシに設定しているのですか？
リバースプロキシnginx —> nginx & php-fpm という感じでしょうか。
1秒以内のレスポンスというのは、気になりますね。
最近は帰宅してからだらだらしがちなので、私もがんばらないと・・・汗
おはようございます。
>週末に母親が仙台から遊びに来たり、最近の暑い天候
仙台は一回だけいったことがあります。
先輩が仙台の大学にいっておりましたので、しかし、本当暑いですね。
＞最近は帰宅してからだらだらしがちなので、私もがんばらないと・・・汗
何か行き詰まると仕事中も関係ないサイトみたりだらだらしてますよ。
時間をかけてまた挑戦。試行錯誤の繰り返しです。
>リバースプロキシnginx —> nginx & php-fpm という感じでしょうか
nginx(ポート80リバースプロキシー）→nginx（8080)→php-fpm(9000)この構成になります。
この構成だとwordpressにアクセスしてもリバースプロキシーで
キャッシュ化してる場合はキャッシュを返すのみです。
サーバー側でphpはうごきません。
>1秒以内のレスポンスというのは、気になりますね。
個人的な感想ですが、色々高速化させる技術はあると思います。
会社のサーバーで導入もしていますし、自分のサーバーにもいれてます。
しかし、リバースプロキシーは体感的に早いなと感じることができました。
最後にapacheとの併用なんですが・・・。
サイトの公開と同時にキャッシュがクリアできるNgixn cache controllerが動かない。
ネットで中には動いた人もいるみたいなんですけどね。
試行錯誤は続きます。
>サイトの公開と同時にキャッシュがクリアできるNgixn cache controllerが動かない。
これって、WordPressのプラグインですよね？私も一応入れました。コメント投稿と同時にキャッシュがクリアされているかテストはしていないのですが、一応使ってみてます(このコメントでテスト(笑))
私の環境は現在のところこんな感じです。
nginx:80→nginx:socketーfastcgi→php-fpm:socket
特段速さの変化は見られませんが、これを期に今更ですがvirtual hostの設定を追加してみました。
> 半角カタカナ
> pattern=”[\uFF66-\uFF9D]*”
濁点\uFF9Eと半濁点\uFF9Fが含まれてないですね。
Skater様～！
コメントに気づくのが遅くなり大変恐縮です。
ご指摘感謝します！早速記事を修正致します！