THE HAM MEDIA BLOG

OSC 2011 HokkaidoにてjQuery入門の話をしてきました

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
イベント関係
タグ:
jquery
OSC
勉強会
セミナー
札幌
北海道

先週末の6月11日、札幌で開催されたオープンソースカンファレンス2011 Hokkaidoにて、スピーカーとして参加してきました。

よさこいソーラン祭りも札幌で開催されていた日にもかかわらず、600人以上の参加者がOSCにきていたとか。その参加者のうちの120人程の前でjQueryの入門的な話をしてきました。

その際のスライド自体は、都合により公開しませんが、その内容のうち、一部をここで書いておきます。



6割の未経験者

今回のjQuery入門の話をする前に、簡単に挙手にてjQueryの利用状況を聞いてみたのですが、参加した人の6割程はjQueryを今まで使ったことの無い方でした。残りはプラグインなどを使ったことのある位な方が多いようでした。これはちょっとびっくりした位で、もっと使われているものかと思っていたのです。しかし実際の参加者層としては、使ったことの無い方が多いという。

JavaScriptを使うようであれば、もっと積極的に使っていいのではないか?と思うjQuery。プログラマさんもデザイナーもコーダーさんも、とっても敷居が高いというものではないので、まずは是非、どういうものかを知って・見て・使って欲しい。

OSC当日でお見せしたデモ

さて、自分がOSC当日にお見せしたデモを紹介します。スライドとか見ていないと、なんのこっちゃ?ですが、これだけはご紹介。

デモはkyo_agoさんにすすめられて、jsdo.itを利用してます。

■デモその1 クリックイベント

クリックすると、要素が消えるよ〜ってだけのデモです。

OSC用 サンプル1 クリックイベント - jsdo.it - share JavaScript, HTML5 and CSS

※playをした後、stopを押すとソースが見れます

指定した要素をクリックした際に何かするための記述例です。

$(セレクタ).click(function(){
  //クリックした時に何をするかを記述
});

■デモその2 セレクタの練習デモ

このデモは、実際に自分が使ってやらないと意味ないかもしれないのですが、とりあえず載せておきます。セレクタの練習用で、li:oddとかli:nth-child(odd)、td:fitstなどなどのセレクタの指定実践用として利用してみてください。

OSC用 サンプル2 セレクタデモ - jsdo.it - share JavaScript, HTML5 and CSS

※playをした後、stopを押すとソースが見れます

セレクタ部分$('')の中身をいろいろと変更してみてください。tdだけでなく、liやtd:even、td:nth-child(3n)など。

■デモその3 アコーディオンデモ

OSC用 サンプル3 アコーディオンデモ - jsdo.it - share JavaScript, HTML5 and CSS

※playをした後、stopを押すとソースが見れます

単純なアコーディオンのサンプルです。

■デモその4 タブデモ

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デザインの現場で役立つ基本と実践

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践』です。逆引きだけでなく、導入のしかたからも書いてある一冊です。

ちなみに、既に告知もしておりますが、7月23日(土)にもjQueryのイベントが札幌であり、その著者でもある、to-Rの西畑さん、ピクセルグリッドの中村さんと徳田さんがスピーカーとしてやってきます!書籍を持参いただくと、参加費が割引になります。まだまだ参加者募集しておりますので、こちらも是非参加お願いいたします。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

オープンソースカンファレンス北海道2011に行ってきた
Excerpt: オープンソースカンファレンス北海道2011に行ってきました。 今年で私が参加しはじめて3年目ですね。 参加したセミナーは以下になります。 どうもセミナーが偏ってる感じが・・・もう少し見聞を広げる..
Weblog: KJの業務日誌
Tracked: 2011-06-17 22:17

オープンソースカンファレンス北海道2011に行ってきた
Excerpt: オープンソースカンファレンス北海道2011に行ってきました。 今年で私が参加しはじめて3年目ですね。 参加したセミナーは以下になります。 どうもセミナーが偏ってる感じが・・・もう少し見聞を広げる..
Weblog: KJの業務日誌
Tracked: 2011-06-17 22:18

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。