CSS Nite in OSAKA, Vol.14 の見どころ、ピックアップ!
4月16日にアップルストア心斎橋で開催予定のCSS Nite in OSAKA, Vol.14に出演される徳田和規さんが作った『jQuery.validation.js』を一足お先にご紹介します。詳細はセッションでご説明してくださいます。
快適なform入力チェックを楽に実装！ jQuery.validation.js
イライラさせて顧客獲得を逃したフォーム、それを改善すべく人気のライブラリ、「jQuery.validation.js」。
とにかく、JavaScriptが分からない方も必見！<br />
皆さんの大切な「フォーム」を快適にするために、実装方法を憶えておきましょう！
□■□■クール＆シンプルなサンプル□■□■
http://moto-mono.net/sample/validation/
フォーム画面遷移なく、クールな入力チェックをとても簡単な実装で行える徳田さんのオリジナルのJavaScriptライブラリです。
セッションでは、実際どれだけ簡単か、実装するための方法と効果を見せていただきます。
正直、JavaScriptが分からない方でも、XHTMLが理解できている方なら、とても簡単でカッコいい「フォームの入力チェック」が作成可能になります。
例えばお問い合わせフォームにこんな設定をしたい場合↓↓↓
・必須項目指定<br />
・メールアドレスチェック<br />
・全角禁止<br />
・電話番号<br />
・数値のみかどうか？<br />
・郵便番号<br />
他</p>
【例】メールアドレスチェックの場合
<input type="text" name="mail" id="mail" value="" class="email hankaku required" /><br />
JavaScriptファイルを読み込み、設定を終わらせた後input要素のクラス名の値を上記のように設定するだけで、必須項目・メールアドレスチェック・全角禁止が可能になります。※</p>
■メールアドレス再入力チェックの場合
■入力文字数をチェックする場合<br />
なども楽に実装可能になります。</p>
※アクティベートが必要ですが、その簡単な方法も教えて下さいます。
# $(function(){<br />
# $("フォーム要素のID属性").validation();<br />
# });</p>
とにかく、実装方法もお伝えいただくので、「コードが苦手」な方にはぜひみていただきたいセッションです。
実際どれだけ簡単か、実装方法と効果をその目でお確かめください。
<li><a href="https://cssnite.jp/osaka/vol14/">CSS Nite in OSAKA, Vol.14</a></li>
<li><a href="https://cssnite.jp/archives/post_1468.html">出演者情報（1）：CSS Nite in OSAKA, Vol.14</a></li>
CSS Nite in OSAKA, Vol.14のプレゼント情報（追加）
CSS Nite in OSAKA, Vol.14のプレゼント情報に追加です。
CSS Nite in OSAKA, Vol.14で、二宮さんがパノラマのお話をしてくださいますが、株式会社井澤（イザワオプト）様より、なんとも豪華なプレゼントをご提供いただきました！
- 携帯電話用円周携帯電話用魚眼コンバージョンレンズ「KSW-4」：1点
- 携帯電話用マクロコンバージョンレンズ「KC-2」(※)：5点
- iPhone用ラバーパッド：数個
魚眼コンバージョンレンズはパノラマにも関係の深いものですよね。詳しくはセッション中にご紹介くださいます。
CSS Nite in OSAKA, Vol.14ご来場の方に、抽選またはじゃんけんにてプレゼントいたします。ぜひご参加ください。
(※)「KS-2」に関しては、市場未発表の最新モデルとなっています！ので、「KC-1」へのリンクとなります。
いよいよ、一週間後は『CSS Nite in OSAKA, Vol.14』です！
4月14日（火）19：00からアップルストア心斎橋にて、CSS Nite in OSAKA, Vol.14を開催します。
現地有志による企画、第2弾です！無料版にも関わらず、今回も濃い内容のセッションが期待されます。
技術系の話が中心になりますが、技術系でない人にも楽しんでいただける内容になっていますので、お仕事帰りにぶらりとお立ち寄りください。会場でお会いできることを楽しみにしています。
なお、お席に限りがございますので立ち見になる場合もございます。
交代でお座りになるなど、ご協力のほどよろしくお願いします。
CSS Nite in OSAKA, Vol.14の詳細
●ご来場の方に、抽選もしくはジャンケンにて多数のプレゼントあり！
下記のエントリーよりご確認ください。
hi-posi Inc. の岡田さんのセッションにて、ケータイを使った参加型のデモが行われます。
当日は、ケータイをもってご参加ください。
☆イベント終了後にアフターパーティ（懇親会）も予定しています。名刺を多めに持ってご参加ください。
なお、こちらは事前登録が必要となりますので、mixiコミュニティより参加表明をお願いいたします。
CSS Nite in OSAKA, Vol.14のプレゼント情報
CSS Nite in OSAKA, Vol.14のプレゼント情報です。
各企業様より、今回もたくさんのプレゼントをご提供いただきました。ありがとうございます。
ご来場の方に、抽選またはじゃんけんにてプレゼントいたします。
<p><img alt="写真：CSS Nite in OSAKA, Vol.14でのプレゼント" src="https://cssnite.jp/osaka/images/osaka_0414present.jpg" width="300" height="225" /></p>
<ul>
<li>【書籍】CMS テンプレートデザイン（<a href="http://www.mycom.co.jp/">毎日コミュニケーションズ様</a>）</li>
<li>【書籍】WordPressテンプレートタグ虎の巻（<a href="http://www.mycom.co.jp/">毎日コミュニケーションズ様</a>）</li>
<li>Opera9.5 Tシャツ（<a href="http://jp.opera.com/">Opera Software ASA様</a>）</li>
<li>Max the Explorer（<a href="http://www.adobe.com/jp/">アドビ システムズ社様</a>）</li>
<li>CS4 キーホルダー（<a href="http://www.adobe.com/jp/">アドビ システムズ社様</a>）</li>
<li>Fireworks 手帳（<a href="http://www.adobe.com/jp/">アドビ システムズ社様</a>）</li>
<li>アドビオリジナルミントケース（<a href="http://www.adobe.com/jp/">アドビ システムズ社様</a>）</li>
<li><a href="http://www.bluelounge.com/cableyoyo.php">アドビロゴ入りケーブルヨーヨー</a>（<a href="http://www.bluelounge.com/index.php">ブルーラウンジデザイン社様</a>／<a href="http://www.adobe.com/jp/">アドビ システムズ社様</a>）</li>
</ul>
出演者情報(3)：CSS Nite in OSAKA, Vol.14
4月14日にアップルストア心斎橋にて行われる、CSS Nite in OSAKA, Vol.14の出演者である岡田昇三さんが、ご自身のブログでイベントを紹介されています。
岡田さんは、Flash Liteについてお話しされます。セッションのほうも、お楽しみに！
<div class="lp-session" id="session3">
<h3>ざっくり解説 -Flash Liteの仕様- Liveバージョン</h3>
<p>最近よく聞く「携帯Flash」。<br />PCと携帯では作り方がちょっと違うので、面倒な感じしませんか？<br />携帯ならではの制限や、キャリアによって違う仕様などなど携帯Flash制作について、大事なとこだけざっくりと説明します。</p>
<div class="profile">
<h4><img src="https://cssnite.jp/osaka/osaka14_okada.jpg" alt="写真：岡田 昇三（おかだ・しょうぞう）" width="120" height="120" class="right picFrame" />岡田 昇三（おかだ・しょうぞう）</h4>
<p><a href="http://hi-posi.jp/">hi-posi Inc.</a> 代表</p>
<p>ワイノット（株）、楽天（株）、フリーランス活動を経て2009年よりhi-posi Inc.代表。<br />
「nike 6.0 mobile」「ナイキ モバロンドール」「H&M mobile」「bascule helmets!」「ケートラ」などに携わる。
</div>
</div>