OSC 2011 HokkaidoにてjQuery入門の話をしてきました
先週末の6月11日、札幌で開催されたオープンソースカンファレンス2011 Hokkaidoにて、スピーカーとして参加してきました。
よさこいソーラン祭りも札幌で開催されていた日にもかかわらず、600人以上の参加者がOSCにきていたとか。その参加者のうちの120人程の前でjQueryの入門的な話をしてきました。
その際のスライド自体は、都合により公開しませんが、その内容のうち、一部をここで書いておきます。
6割の未経験者
今回のjQuery入門の話をする前に、簡単に挙手にてjQueryの利用状況を聞いてみたのですが、参加した人の6割程はjQueryを今まで使ったことの無い方でした。残りはプラグインなどを使ったことのある位な方が多いようでした。これはちょっとびっくりした位で、もっと使われているものかと思っていたのです。しかし実際の参加者層としては、使ったことの無い方が多いという。
JavaScriptを使うようであれば、もっと積極的に使っていいのではないか？と思うjQuery。プログラマさんもデザイナーもコーダーさんも、とっても敷居が高いというものではないので、まずは是非、どういうものかを知って・見て・使って欲しい。
OSC当日でお見せしたデモ
さて、自分がOSC当日にお見せしたデモを紹介します。スライドとか見ていないと、なんのこっちゃ？ですが、これだけはご紹介。
デモはkyo_agoさんにすすめられて、jsdo.itを利用してます。
■デモその１ クリックイベント
クリックすると、要素が消えるよ〜ってだけのデモです。
OSC用 サンプル１ クリックイベント - jsdo.it - share JavaScript, HTML5 and CSS
※playをした後、stopを押すとソースが見れます
指定した要素をクリックした際に何かするための記述例です。
$(セレクタ).click(function(){
//クリックした時に何をするかを記述
});■デモその２ セレクタの練習デモ
このデモは、実際に自分が使ってやらないと意味ないかもしれないのですが、とりあえず載せておきます。セレクタの練習用で、li:oddとかli:nth-child(odd)、td:fitstなどなどのセレクタの指定実践用として利用してみてください。
OSC用 サンプル２ セレクタデモ - jsdo.it - share JavaScript, HTML5 and CSS
※playをした後、stopを押すとソースが見れます
セレクタ部分$('')の中身をいろいろと変更してみてください。tdだけでなく、liやtd:even、td:nth-child(3n)など。
■デモその３ アコーディオンデモ
OSC用 サンプル３ アコーディオンデモ - jsdo.it - share JavaScript, HTML5 and CSS
※playをした後、stopを押すとソースが見れます
単純なアコーディオンのサンプルです。
■デモその４ タブデモ
OSC用 サンプル4 タブデモ - jsdo.it - share JavaScript, HTML5 and CSS
※playをした後、stopを押すとソースが見れます
単純なタブサンプルです。アコーディオンのもそうなのですが、読み込まれるまで非表示部分が表示されてしまいますが、それは作り方によっては最初から隠せます。が、CSSであらかじめ非表示にしておくのはおすすめしません。
以上、当日発表したデモでした。
SaCSSの表彰！？
話は少しそれますが、OSCの当日にSaCSSが表彰されました！デザイナー・コーダーだけでなく、プログラマーの方も参加できる、双方の架け橋となる勉強会で、ほぼ毎月定期的に開催しているということが評されて、受賞となったとのこと。
閉会式、人がたくさんいたために、中にいるのを諦めて廊下にてのほほんとしている時に起こった出来事でしたので、なにが起こっているのかわかっていなかったという…すみません。
そしてSaCSSなんていう、デザイナー・コーダーの勉強のきっかけになればと思っている勉強会が、まさかエントリーされているということ自体が、もうはてなで一杯だったりするのですが・・・表彰されてよかったのでしょうか。と、いまだに疑問だったりします。
でも、コレを機に、プログラマさんでも、フロント面の勉強ができるような会に、もっとしていけたらななんて思ったりもしています。例えばjQuery Mobileを使ったサイト・アプリの作り方とか、もっと濃い内容のJavaScript・jQueryの勉強など。逆に、フロントの人にも知ってもらいたいプログラムの知識なども、伝えてもらえる場にできたらとも思っているので、今後の内容にどんどん取り入れていこうと思います。
・・・その前に、会場規模少し大きくしないと。。。
jQueryのお勉強をするなら
最後に、再度jQueryの話にもどって、jQueryをまだ使ったことが無いという人は、まずはjQueryのサイトをみてみたり、書籍を買って読んでください。
『jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践』です。逆引きだけでなく、導入のしかたからも書いてある一冊です。
ちなみに、既に告知もしておりますが、7月23日（土）にもjQueryのイベントが札幌であり、その著者でもある、to-Rの西畑さん、ピクセルグリッドの中村さんと徳田さんがスピーカーとしてやってきます！書籍を持参いただくと、参加費が割引になります。まだまだ参加者募集しておりますので、こちらも是非参加お願いいたします。
