サイト運用をしてると、必ず必要になってくることがある。コンテンツとかサイト構造とかの話じゃなくて、タグの話。

「Googleのリターゲタグ貼っといて」「ヤフーのコンバージョンタグ、このページだけに貼っといて」「なんかよくわからんけどアドネットワークのタグ貼ってくれって代理店に言われてるから貼っといて」「とりあえずGAのタグ入れてよ」みたいな依頼って、よくある。

別に俺じゃなくても担当者が勝手に入れればいいんだけど、それだとカオスになるし、そもそもHTMLやJSをよくわかってない人たちはサイトのソースに手を入れることを嫌うから（大手サイトになるとそれすらできないので、運用が触っていいインクルードHTMLとJSとCSSが一個ずつあってそこだけ管理下にある状態といのもある）、引き受ける場合が多い。

小さいサイトやソースを直接さわれるところだと、フッターテンプレートにもらったタグをそのまま貼り付ければ完了。

でもそういかない場合って、けっこうある。まじで。

たとえば、大手サイトだったり、クライアントサイトだったり、タグ入れ依頼がバケツリレーになってる状態だったり。
そうなると、サイトに手を入れるのが怖い・または時間がないクライアント様にこのチンケなタグを入れてもらうために労力を割いていただくのが申し訳ないので、ソリューションとしてはワンタグ運用が現実的になってくる。

ワンタグとは、１つのスクリプトタグをサイトに入れてもらい、そのスクリプトの中身を一括で管理するやり方だ。これなら、クライアントサイトであっても一回だけタグを入れてもらえれば、タグの中身はこっちでできるので心配が少ないし、いざとなったらスグに書き換えできるので運用もやりやすい。
ただしワンタグ運用は２つの問題が起こる。
1.全ページに同じワンタグを貼る前提になること
2.各アドタグをすべてこのワンタグに入れ込む必要があること

もう１年以上ブログ放置してるしどうでもいいんだけど、angularJSが困ったちゃんすぎて実用化できないので書いちゃう。

やりたいことは「見たまま編集できるCMSの開発」

サーバサイドは既存のCMSそのまんまでよくて、保存とレスポンスをajaxでできるようにしただけ。
で、入力を表示をangularのリアルタイム描画にまかせようと思って組み込んだら、テキストエリアでハマった。
結局、１週間ほどトライ＆エラーを繰り返し、やや強引だけど解決した。

現象

angularJSで、ビューの描画は{{モデル名}}ってやるんだけど、１行テキスト（input[text]）ならそのままでＯＫ。だけどテキストエリアは致命的で、改行が反映されない。このせいで俺の新型CMSがぽしゃってしまった。もうヤダ。

HTML5にinput type=”email”というフォーム属性が追加されています。最近のブラウザはだいたい対応しています。
それまでの input type=”text”よりも使いやすくなるはずでした。

サンプル：

何ができる属性かというと、メールアドレス入力フォームで
・@がない
・全角文字になっている
・xxx@yyy.zzの形式になっていない
などをブラウザ側でチェックしてくれるものです。

チェックして、エラーがあればこんな感じのエラー表示が出ますね。

では、これは何が正しくないのでしょうか。

答えは半角スペースが入っているです。そんなの一般の人はわかんねーっつの。メアドをスペース込みでコピペしたらアウトです。もうフォームを送信することはできません。でもユーザは何が間違っているかは気づきません。
「abc@example.com」を１文字ずつ、それこそ読み上げながら確認して間違っていないことを確信しても送信できません。これはもう、フォーム側が間違っているに違いない、と思います。そしてクレームになり、フォーム側（サーバ側処理）はあくまでも「正しく入力してくれ」とか「xxx@yy.zz形式で入れてくれ、使える文字は0-9a-z@+_-.です、みたいなことを言っても、会話は通じません。

ということで、結局このタイプは使えないで、メアドのチェックはサーバサイドで書くかJSで書くかしかないというお粗末な状態にあります。

何が悪いのかというと、
・ブラウザ側の実装の問題：スペースは容認してほしい
・エラー文言の問題：どんなエラーでも「メールアドレスが正しくありません」では何が正しいのかわからない
・利用可能文字が不明な問題：利用可能な文字や、連続ドットや使える記号や全角文字がNGなら、それを明示してほしい

2012/05/10 firefox12で確認しています。