スイーツ（笑）と呼ばないで!!

さぁ、このあと不定期で続くかもしれない、HTML5特集のPart1です。

皆さん、HTML5使っていますかー。

「ああ、DOCTYPEとかそれっぽく宣言してる」
「input要素でplaceholder使ってるぜぃ」
「input type=“date"とかするとカレンダー出たり新しいtypeが増えたよね」

とか、そんな返事が返ってくるかもしれませんね。

確かに、それらはHTML5の特徴的なところで、いろいろと語られているところでもあります。

ただ、私達ブログラマにとって地味にすごい拡張されているの、知ってます?

今日はそんな中から2つ程紹介しますね^^

これ知っているかしらないかで、JavaScript書く量がかなり変わります。

例えば、こんなシーンを思い浮かべてください。

◎例題1

なんかのデータの編集画面です。

ずらーってinput要素やらselect要素やらが並んでいます。

一番下に、「上書き保存」「名前をつけて保存」などのボタンが並んでいます。

【超初心者の回答】

「あ、あれ、ボタンが2つ・・formのactionは1つしか指定できないし・・どっちのボタンか区別できないし・・うーん」

とか言いながら、formの中にformをもう一つ作ったりして実装できず・・・経験者に助けを求める。

【経験者(=普通のプログラマ)の回答】

「こういうのはな、jQueryとか使ってやるんだよ。submitされたタイミングでイベントとって、どっちのボタンが押されたかはidを取得して、それでactionの先を動的に変更してだな、そうするとpost先(=action)を変更できるんだよ。やっぱ、時代はjavascriptだぜー」

とか言いながら、やりよる感を出します。

【HTML5の達人の回答】

「えっとー、次の例見てみてください」

<form id="form_id" action="/test" method="“POST"">
　<input type="text" name="test_id" value="123" >
　<input type="submit" value="test1" >
　<input type="submit" formaction="/test2" value="test2" >
　<input type="submit" formaction="/test3" value="test3" >
　<input type="submit" formaction="/test4" formmethod="“GET"" value="test4">
</form>

「HTML5だとー、formaction属性が追加されているんですよねー。なので、submitボタンのformaction属性に/overwriteとか/copyとかつければsubmitのタイミングでaction勝手に変わりますー。javascriptとかいらないですー。」

「ちなみに、formmethod属性でgetとかpostとかも変えられるんでー。Laravelとかmethod毎にroute書ける系は超便利ー」

とか言いますね、きっと。

これ、かなり便利です。他に「削除ボタン」だろうが「プレビュー」ボタンだろうが、つけ放題ですね。

(ちなみに、プレビューを別タブで開きたいならformtarget属性でtargetも書き換えられます)


◎例題2

ページの上部に基本的にform系の要素はまとまっているんだけど、
ページの中間に長い説明文とか一覧とかがあって、
ページの最下部にボタンが並んでいる仕様のページが作りたいんだけど・・

【超初心者の回答】

「うーん・・・formの中にsubmitボタンとか他のinput要素とかたくさん入れなきゃならないから・・ページの上部から下部まで、長ーいですけど全部formタグで囲っちゃえば良いですね。え・・・・途中に一覧の検索ボックスがある・・・formは入れ子にできないし・・・」

とか言いながら、実装できず。

【経験者(=普通のプログラマ)の回答】

「こういう時も、JavaScript最高だぜ。とりあえず、まとまっている部分はformタグで囲って、あとは離れたところのボタンのクリックイベントとって、JavaScriptでpostしてあげれば良いのさ。やっぱ、時代はjavascriptだぜー」

とか言いながら、やりよる感を出します。

【HTML5の達人の回答】

「えっとー、次の例見てみてください」

<form id="form_id" action="/test" method="“POST”">
　<input type="text" name="test_id" value="123">
　<input type="submit" value="test1">
</form>

(なが～い文章とか)

<input form="form_id" type="text" name="external_value" value=""456”" >


「HTML5だとー、form属性が追加されているんですよねー。そこにどんなに離れたformでもそのformのidを指定してあげれば、そのformの中にあるのと同じように扱ってくれるんですー。javascriptとかいらないですー。」

とか言いますね、きっと。

これ、かなり便利です。離れていようがないだろうか、お構いなしですね。デザインと構造は分離されています。


ということで、HTML5にきちんと対応しているブラウザ相手だとだいぶ工数が削減できることがわかりますね。

ここで、お客さんがプロジェクト後半になって「あー、やっぱりIE8も使いたいなー」とか言ってきたらどうでしょう。

そのためだけにたくさんの面倒なコードを書かないといけないですね。

「テストのブラウザが1つ増えて面倒だなー」とかってレベルではありません。

私もプロジェクトマネージャーを生業としていますが、やはりこのようなところはプロジェクトの最初できちんとお客さんと握っておくことが大事だな、と改めて思います。

ということで、HTML5を採用しているのにHTML5っぽく書いていないあなた、ちゃんと勉強してみると超楽になるかもしれないですよー^^

[0回]

• プログラミング
• COMMENT：0