HTML5を業務アプリで使うための勉強会（仮）
http://www.zusaar.com/event/584004
を開催しました。
次回（2回）があるかどうかが不明だったのでzussarのタイトルは（仮）となっています。
しかし、次回の予定も立てて、開催することになったので、blogのタイトルは#1としています。
まず、第1回目の内容は
- 前提条件を決める
- 開催予定
- 公開するWebサービスではなく、いわゆる「業務アプリ」に適用するための勉強会であること。
- JavaScriptは利用する
- HTML5のAPIの使い方
- JavaScriptライブラリ（Jqueryなど）
- （できれば）GDG中国のイベントで成果を発表
- 私が4月から勤務時間的に平日開催では開催できなくなったことを話す。
- 参加者のHTML5の知識の確認
- HTML5 Formsの事を話したり、調べたり、動きを確認したり…。
最初に以下のサイトを紹介しました。
HTML5を導入する時にチェックをしておいた方が良いもの。
チェック関係
文法チェック
アウトラインチェック
各種ブラウザの対応状況を確認
HTML5 & CSS3 Support
HTML5 Test
今日のサンプル的なお題
HTML5Rocks HTML5 Forms
HTML&CSS標準デザイン講座（書籍）
http://goo.gl/BsxBD （Amazon）参考サイト
HTML5でごく普通のWebページを作る
Eric Meyer’s Reset CSS（ブラウザの標準スタイルをリセットする）
テーマは入力フォームなので、HTML5の仕様でカバーできる部分はカバーしましょうという意味も込めて、以下の属性を紹介
autofocus属性（初期フォーカス位置）
required属性（必須入力）
placeholder属性（入力例の表示）
新しい入力タイプも紹介しました。
input type="range"（スライドバーで入力できる）
input type="date"（Opera／Chromeだと日付の入力でDatePickerが表示される）
input type="search"（検索文字列の入力）
input type="tel"（電話番号）
input type="color"（色入力、カラーピッカーが表示される）
input type="color"（色入力、カラーピッカーが表示される）
CSS3の指定で
:invalid
:required
を使うと、それぞれ、不正な入力時と未入力時のスタイルを指定することも可能になっています。（サンプルはHTML5rocksを見て下さい）
HTML5の入力フォームは指定したタイプの書式に合わないものはブラウザで入力チェックをして間違った入力の時はエラーメッセージ（JavaScriptのsetCustomValidity()メソッドでカスタマイズも可能）も表示してくれる優れものです。
（当然、Submitされません。）
結論としては、それぞれの入力項目に対して属性を正しく指定して、「何を入力するか」を明確にしましょう。という感じになりました。
が、現時点ではブラウザによって対応状況がまちまちなので、HTML5Testなどで対応状況を確認して、使えるものはコーディング規約に規定するなどで運用できるのではないかという話もありました。
今後の活動に対して、いろいろな話題の広がりがありそうな回だったと思います。
次回の開催は、3/27（水） 19:00からです。場所は当日の参加者の様子から一番近そうな場所を選んで告知します。
HTML5を業務アプリで使うための勉強会 #2
0 件のコメント:
コメントを投稿