jQueryを始めよう

●Flashに代わるもの?

デザインドリルでは、これまでデザイナー向けのActionScript講座を行ってきました。
これはデザイナーやコーダーも簡単なFlashコンテンツを作成できた方が仕事を
得やすいと考えていたからです。ですからカリキュラムも、利用頻度が高く比較的
難易度の低いサムネイル&ディテールやショーケースFlashなどを目標にカリキュラム
を作成してきました。

しかし、これらのコンテンツはiPhoneやiPadのFlash非対応の影響や、HTML5
CSS3の登場によって徐々にFlashから非Flashに移行することが考えられます。
昔はマウスオーバーで画像の切り替わるメニューもFlashで作成することが
ありましたが、今ではCSSやJavaScriptで作成してしまうのと同じように。

ですが、HTML5やCSS3だけでは十分なインタラクションを実現できません。
以下の様にHTMLやCSSの目的にはインタラクションは含まれていないのです。
————————————————————————————————————–
HTMLの目的は構造の設定(これは見出し、これは段落など)です。
CSSの目的はデザインの設定(サイズは10px、色は赤など)です。
————————————————————————————————————–
ロールオーバーでイメージの変わるような、シンプルなインタラクションは可能
 
 
 

● jQueryを始めよう

では、どのようにインタラクションを実現しFlashの代わりとするかというと、
これまでどおりjavaScriptを利用することになります。
ネットでもHTML5やCSS3はjavaScriptはまとめて語られることが多いです。
検索結果:html5, css, javascript

HTML5やCSS3はプログラム言語ではないため、デザイナーでも理解しやすいのですが、
javaScriptはActionScriptと同じくらいの難易度で、デザイナーにとっては習得が
難しいでしょう(ついでにブラウザ毎に動作が異なるケースもあります)。
これでは前回の記事で話したように修了率の高いカリキュラムを実現できません。
 
そこで着目するのがjQueryというJavaScriptライブラリです。これを利用すると
少ないソースでインタラクションを実現することができます。ネットで確認すると
たくさんの記事が書かれています。
検索結果:html5, css3, jquery
 
簡単なサンプルを用意したので、ソースを表示してコードの量を確認してください。
これだけならデザイナーでも習得は難しくないのではないでしょうか?
サムネイルをクリックすると写真がクロスフェード
3秒おきに写真がクロスフェード

デザインドリルを基礎講座まで修了した方はサムネイルのサンプルでjavaScriptの
コメント部分を確認してください。考え方はActionScriptもjavaScriptも非常に
似ていることが確認できます。以下にメリットをまとめます。

 
 
  

● jQueryのメリット

・デザインナー/コーダ−向けのjavaScriptライブラリ

 先発のjavaScriptライブラリ(prototype.js等)よりも短いコードで記述可能。
 インタラクションの対象としてCSSを指定でき、CSSに慣れているデザイナー
 との親和性も高い。

・対応ブラウザが多い

 IE6.0〜、FireFox2.0〜、Safari3.0〜、Chromeの全てに対応。
 結局はjavaScriptなので、古いブラウザでも利用できるのです。

・無料で利用できるオープンソース

 MIT License と GNU General Public License のデュアルライセンス。
 商用利用が可能な無料のオープンソースです。
 
 
 

●HTML3は「まだ」使えないのですが…

ですが問題があります。HTML5やCSS3は古いブラウザでは機能せず、未だにIE6に
対応しなければならないケースもある現状では利用できる機会が少ないのです。
html5 / css3の対応状況
 
しかし心配は無用です。jQueryは既存のHTML(XHTML)やCSSでも利用でき、
古いブラウザに対応しなければならない案件でも利用することができます。
紹介したサンプルもxhtmlとcssで作成されています。
html5やcss3は仕様が決定されてない部分も多く、現在はブラウザによって
対応がまちまちなので、当面はカリキュラムを作成しません。
 
 
 

●ブログでjQueryの記事を書いていきます

javaScriptはこれまでも仕事で利用してきたのですが、jQueryは始めたばかりです。
なので十分に利用して特長を理解するため、カリキュラムの作成に入る前に
いろいろ試してみる予定です。
その様子をこのブログで紹介していくので、興味のある方は是非御覧になってください。

実際に講座を開く際のカリキュラムはjavaScriptを利用したことがない方にも
分かるように基礎的な部分も説明していきますが、ブログではjavaScriptの基礎を
身につけている方向けに紹介していきます。またデザインドリルでActionScript講座を
受講された方は、プログラムの考え方「設計」はActionScriptと同じことが分かると思います。
 
 

 
 
 

10 Responses to jQueryを始めよう

  1. 先生こんにちは
    ご無沙汰しております。

    新カリキュラム期待しております。
    おそらく受けると思います、というか楽しみです。

    • 期待に添えるようなカリキュラム作成を頑張ろうと思います。
      とはいえyoshinagaさんのようにActionScriptをすでに使いこなせる人は
      ネットの情報(&このブログ連載)だけで充分マスターできるような気がします。
       
      これまでは自分のやりたいActionScriptに特化していましたが
      ビジネスとして成立させるためには、もう少し視野を広く持つべきだったと
      反省する今日この頃です。
       
       

  2. 先生、ご無沙汰しております。
    ブログ記事を読んで、新しいカリキュラムの講座になることを知りました。
    この業界は新しいことが、次々と出てくるので、私も必死に勉強してほかの会社の人たちに負けないように
    していかないといけないと反省しました。
    最近は、提案書やマーケティングに興味を持って本をアサっていたのですが、やっぱり技術的なこともできるように
    なりたいです。
    Jqueryはデザイナー向けに開発されたと聞いてます。
    カリキュラム、楽しみにしています。

    • ご無沙汰しております。
      柳澤です
      >Jqueryはデザイナー向けに開発されたと聞いてます。
      シンプルなものであればActionScriptよりもはるかに簡単に作成できます。
      またcssが好きなコーダ−の方にも向いていそうです。しかし闇雲な利用は
      閲覧者を混乱させるので、講座では技術の他にもユーザビリティについての
      注意点なども説明する予定です。
      一時期はjQueryを利用したリッチなUIが企業サイトにも利用されていた
      のですが、現在ではあまり利用されていない理由もユーザビリティに
      あるので…。

  3. ご無沙汰しております。
    2009年の6-7月にかけお世話になりました。
    2年前はjQueryは話題にはなっていましたが、あっという間に流れが変わり、大変な業界ですね。
    講義を受けたのですが、努力しない性格で制作はAdobe Flash Catalyst CS5で制作している怠け者ですが、
    気持ちの上では基礎から身体で覚えたいと思っており、新カリキュラムを楽しみにしています。

    • ご無沙汰しております。
      柳澤です
      ほんとうに流れの速い業界です。キャッチアップするのは大変ですが
      新しいことがたくさんでてくるので楽しくもあります。
      新しいカリキュラムも頑張るのでよろしくお願いいたします。

  4. ご無沙汰しております、2009年6~7月にお世話になった者です。
    お陰様で、Flasherとして飯を食っていける程度にはなれており、感謝しております。
    HTML5+CSS3+JQueryもいいのですが、それらを含んだスマートホンサイト制作のカリキュラムなどありましたら、また飛びつかせて頂きますのでよろしくお願いいたします。

    • ご無沙汰しております。
      私もHTML5+CSS3+JQueryはスマートフォンで利用するために学んでいたりします。
      まだ少ないですが、スマートフォン向けの記事もありますので宜しかったら
      読んでください。
      カテゴリ:smartPhone study

  5. お久しぶりです。
    当時は携帯でFLASHを多用しておりました。
    今は中国でサイトを作っているため実はまだまだFLASHは有効です。
    とはいえ今後の展開を考えるとJクエリは必須だと思います。

    先生のカリキュラムを楽しみにしてます。

    できれば海外でオンラインで、もしくは録音データでもいいので授業が聞けると最高です。

    一年の3分の2が中国にいるもので、、、

    • お久しぶりです。
      jQuery入門用のサイトを現在頑張って制作中だったりしますので
      完成したら見に来てやって下さい。
       

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


× 三 = 18


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>