jQuery 01-04: セレクタの指定

●セレクタの指定

前回のサンプルでは3つある全てのdivに文字が設定されました。これは、
まとめて内容を設定したい場合には都合が良いかもしれませんが、大抵の場合不都合になるでしょう。
ですので今回はより詳細なセレクタの設定を学び、各divに個別の文章を表示させます。

sample : 各divに異なる文字を表示する
http://www.designdrill.jp/jquery/01/step05.html
※ソースを開き、divにidやclassが設定されていることを確認してください。

 
 
ポイントは各divにclassやidが設定されていることです。jQueryのセレクタはhtmlの要素だけでなく
idやclassも指定することができるのです。そして指定方法は以下の様にcssと同じ文法になっています。

jQuery("#id_test").text("id = id_test");//---idを指定
jQuery(".class_test").text("class = class_test");//---classを指定

また、初歩の段階で間違いやすいサンプルも確認しておきましょう。以下のstep05b.htmlのソースを
確認してください。step05.htmlとほとんど同じで問題ないように見えますが、実際には全て”div”と
表示されてしまっています。
http://www.designdrill.jp/jquery/01/step05b.html

これは設定の「順序ミス」によるものです。せっかくidやclassを指定したのに、その後で全てのdivを
設定するようにしているため、全て”div”となってしまうです。セレクタの指定は広い範囲から狭い範囲
へ設定するように気を付けましょう。
 
 
他にもcssと同じ設定のサンプルを確認しましょう。cssでは複数の要素をスペースを跨いで利用する
ことで、「〜にある〜」(例えばaタグに挟まれたbタグ)という指定ができました。これと同じように
セレクタも設定できるのです。

以下のstep06.htmlのソースを確認してください。このサンプルではpタグ内のbタグの内容だけ変更して
います。pタグの外にあるbタグは変更されないことを確認してください。
http://www.designdrill.jp/jquery/01/step06.html
他にも以下のリファレンスにあるような様々な選択方法があります。
フォームの要素も多く、ユーザビリティの高いフォームを作成できそうです。
リファレンス:セレクタ
セレクタの指定はcssの構文以外にもjQuery特有のものがあり、使い勝手が良さそうです。
以下に、偶数の要素だけを指定する「:even」を利用したサンプルを紹介します。 
※セレクタはjQueryのポイントとなりそうなので、他の構文も追々紹介しようと思います。
 
 

●テーブルの偶数行だけ色を付ける

まずはサンプルを確認しましょう。テーブルの偶数番目の列にjQueryで背景色を設定しています。

sample : 偶数番目の列にjQueryで背景色を設定
http://www.designdrill.jp/jquery/01/step07.html
※html部分にはテーブルの背景色指定がされていないことを確認してください。

 
セレクタの説明の前にstep07.htmlでは新しいメソッドを利用しているので紹介しておきます。
cssメソッドを利用するとセレクタで指定した部分のcssを設定することができます。引数は2つ
必要で、1つめがcssの属性、2つめがその値です。サンプルでは背景色(background-color)
をピンク(#FFCCCC)にしています。
リファレンス:css(name, value)メソッド

jQuery("tr:even").css("background-color", "#FFCCCC");

 
続いてセレクタの部分です。ここでtrに続けて「:even」とすることで偶数番目の行(tr)にだけ
メソッドが実行されるのです。
リファレンス::evenセレクタ
※行の番号は0(偶数扱い)から始まることに注意してください。

jQuery("tr:even").css("background-color", "#FFCCCC");
※evenの前のコロン(:)を忘れないようにしましょう

 
今回の記事はここで終わりです。
次回はインデックス番号(要素に振られた番号)について説明しようと思います。
今回の :even もインデックス番号が偶数という意味です。今回のサンプルはテーブルが
1つだからうまくいきましたが、複数のテーブルがある場合は思うように機能しない
場合があります。その問題を紹介しながらインデックス番号の理解を目指します。
 
 
 
 

jQuery 01-03: div要素に文字を設定する(メソッドについて)

jQueryでhtmlを操作する事に挑戦します。ここではdiv要素に文字を設定します。
実用性は無いのですが、簡単に記載でき構文の確認にちょうどよいのです。
特に、ここではメソッドについて学びます。

sample : divにjQueryで文字を表示する
http://www.designdrill.jp/jquery/01/step02.html
※ソースを表示して、htmlに3つある各divには何も書かれていないことを確認してください。
 表示した文字はjQueryによって表示されます。

 
ではソースを確認しましょう。チェックすべきは以下の一行です。この処理はreadyの
イベントハンドラ内に入っているので、htmlの読込が完了したらすぐに実行されることになります。

jQuery("div").text("hello world");	

まず、最初にjQueryを付けるのは前回のreadyイベントと同じで、まずは
jQueryの処理であることを明示します。続く()内にセレクタを指定します。
前回の記事ではdocumentを指定しましたが、今回はここにhtml要素の「div」を
設定します。これでdiv要素を操作する事ができます。
 
続いて.(カンマ)をはさみtextと記述されています。前回はここに設定された
readyをイベントと説明しましたが、今回は異なります。このtextは
イベント(いつ)ではなくメソッドと呼ばれ「何をする」かを指定しします。
textメソッドはセレクタに設定した要素の内容を設定することができます。
リファレンス:text(値)

メソッドの処理を実行するためには後ろに()を付けるのですが、メソッドによっては今回の
サンプルのように()の中に値を設定します。この値のことを引数と言います。
今回のサンプルでは”hello world”が引数になります。

つまりこの行は「div要素にhello worldと設定」という意味になります。 前回学んだreadyイベント
の中に書かれているので、サンプルをクリックするとすでにhello worldと表示されています。
 
 
 
●メソッドの返値
jQueryではメソッドの引数を設定しないと返値を返すように
なります。以下のstep03.htmlを開きソースを確認してください。
http://www.designdrill.jp/jquery/01/step03.html
リファレンスでは要素を設定するtextとは別に説明されています。
リファレンス:text( )

 
まずbodyタグ内の各div要素に文字があること(aaaaa, bbbbb, ccccc)を確認して下さい。
続いてjQueryのtextメソッドに引数が設定されていないことを確認してください。
ここで勘違いしやすいのが、引数を設定しないとdivの要素が何もない状態に
なるのではないかという点です。しかしstep03.htmlのように、引数に何も
設定していないからといってdivに何も設定されなくなるというわけではありません。
 
もしdivの内容を消したい場合は以下のstep03b.htmlのように引数に空の文字列
“”を設定することで可能です。
http://www.designdrill.jp/jquery/01/step03b.html
 
では実際に返値を受け取ってみましょう。
以下のstep04.htmlを開きソースを確認してください。
引数の受取方はActionScriptと同じで、=を使い左辺の変数に代入する形となります。
http://www.designdrill.jp/jquery/01/step04.html

var returnStrings = jQuery("div").text();	

サンプルでは受け取った返値をalertで表示するようにしていますが、alertの内容で確認
できるように、div要素が複数ある場合は全て連結した状態で返されます。

このように値を調べる仕組みを利用すれば、フォームなどに指定された内容を
書かないと、アラートを出すような仕組みも作成できます。
※追々そのようなサンプルも作成しようと思います。

次回はセレクタの細かい設定について説明します。
 
 

jQuery 01-02: 読込が完了してから実行(イベントについて)

まずは今回のサンプルを紹介します。
一回目のサンプルなので、機能は非常にシンプルでアラートを表示するだけです。
このサンプルを通して、jQueryで必ず必要になるreadyイベントを説明します。

sample : ページの読込が完了したらアラートを表示する
http://www.designdrill.jp/jquery/01/step01.html

 

●jQueryへのリンク

jQueryを利用するためには前回の記事でダウンロードしたjQueryへリンクする必要があります。
リンクの方法は通常の外部javaScriptと同じでhead領域に以下の様に記します。

<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>

一応サンプルのhtmlを用意しました。機能や表示する要素はありません。ただ
jQueryにリンクしているだけです。ソースを確認し下さい。
http://www.designdrill.jp/jquery/01/step00.html
jQueryのコードは通常のjavaScript同様に外部jsファイルにすることも可能ですが
このブログではhead領域のscriptタグ内に書いていきます。では本題のjQueryに
入ります。
 
 

●readyイベント

javaScriptはhead領域に書かれるため(基本的に)body領域よりも先に
読み込まれます。ActionScriptと同じように読み込まれてないものを操作することは
できないので、jQueryではhtmlファイル(画像などは含みません)の読み込みが
完了してから、処理を開始するようにします。その仕組みがreadyイベントです。
リファレンス:ready(fn)
※引数のfnは関数(function)を指します。つまり引数として()内にfunctionを設定します。
 
ActionScriptのようにイベントはイベントハンドラの構造をとりますが、
ActionScriptとは構造が異なり以下の様な構文になっています。
※readyのイベントハンドラを短く書く構文があるのですが、それは別の講座で説明することになります。

jQuery(document).ready( function(){
  /*--------------------------------------------------
  document(htmlファイル)の読込が完了したら
  この{ }内の処理が実行されます。
  ---------------------------------------------------*/
});

少し細かく説明していきます。
最初のjQueryは、その名の通りjQueryをさし、jQueryの機能を利用するときに必要になります。
続く()の中には操作又は調査する対象を書きます。
ここではdocumentとなっており、これはhtmlファイルを指しています。
jQueryでは、この部分をセレクタと呼びます。
操作(もしくは調査)する対象を「選択している部分」だからセレクタと呼ばれているのでしょう。
()に続けて.(カンマ)を書き、そのあとにreadyと書きます。この部分はイベントと呼ばれ
「いつ」処理を実行するかを指定します。readyは「準備ができたら」という意味です。
ですから、ここまでの意味は「documentの準備ができたら」となります。
そして準備ができたらreadyの直後の” ( “と ; の前の” ) “で囲まれた部分が処理されます。

しかしjQueryでは、さらに別の構造をreadyの()内に入れておかなければなりません。
以下のようにfunction () { }が必要で、実際に実行される処理は、このfunctionの{ }内
に書くことになります。

jQuery(document).ready( function(){
  /*--------------------------------------------------
  実際の処理はfunction の構造内に書くことになります。
  ---------------------------------------------------*/
});

このfunctionの構造はメソッドの「作成」の構文であり「実行」ではないので
通常のjavaScriptでは実行されません。なのでjQuery独特の構文だと思います。
このfunctionについての考察は別の回で行います。
functionの構造まで含めてreadyのイベントハンドラとして覚えてしまいましょう。

今回のサンプルは、このreadyのイベントハンドラ内にalert文を入れているので、
htmlの読込が完了したらアラートが表示されるのです。

jQuery(document).ready( function(){
  alert("ready!");//---アラート表示
});

次回は、アラートを表示するのではなくページ内の要素を変更することに挑戦します。
 
 
 

jQuery 01-01: jQueryの取得と参考サイト

jQueryは以下のサイトからダウンロード出来ます(右側のdownloadボタン)。
http://jquery.com/
 
そして素敵なことに、マニュアルを日本語化してくださった方がいます。
ActionScriptと比較して、コマンドの数も少ないので、本気で覚えようとしている方は
一度、目を通して、どのような処理があるのか確認しておくと良いと思います。
jQuery日本語リファレンス
 
またIT系のwebマガジンでもたくさん紹介されています。
ASCII.jp:40分で覚える!jQuery速習講座
jquery.jsを読み解く:第1回 jQueryライブラリ(1~171行目)|gihyo.jp … 技術評論社
技術評論社のjQuery関連記事リスト
 
 
私は本を購入する際、実際に少し読んで確かめてから購入する派です。ですので、
良い内容かどうか調べられる知識を得るまで、ネットで情報収集するようにしています。
以下、情報収集中に参考になったサイトを紹介しています。
少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね – かちびと.net
 
 
またjQueryだけでなくJavaScript全般なのですが、JavaScript(+ HTML5, CSS3)の
共有サイトです。中にはjQueryを利用した作品もあったりします。
jsdo.it – Share JavaScript, HTML5 and CSS
 
上記のように、すでに良いサイトがたくさんあるのですが
自分の学習のためにも、このブログでjQueryの記事を連載していく予定です。
※左のカテゴリーに「jQuery」を追加しました。
 
実際のカリキュラムと差別化するため、基礎的な部分を省くので対象としては
HTML&CSS&javaScriptの基礎を理解している方むけになります。
実際の講座カリキュラムではjavaScriptを一切知らない方から受講できるようにします。
 
次回のjQuery記事は、最初に必要になるreadyイベントについて説明します。
 
 

web designのパターン学習と応用

●デザインの習得には時間がかかる

webは紙媒体に比べてデザインに制限(例えばレイアウトやフォントサイズ等)が
多いため、デザインのバリエーションが比較的狭く、デザインの中では学びやすいと
思います。それでも0から始めると、習得にはかなりの時間が必要になるでしょう。
 
 
 

●パターン学習

デザインの習得法には色々あり、人により最適な習得方法は異なってくると思うのですが
多くの人にとって、短期間での習得に向いているのが「パターン学習」だと思います。
多様なバリエーション(パターン)のサイトを課題に沿ってデザインすることで、表現の
幅を広げ、模写と同じように見る目を養い、デザインを実現する技術を習得していきます。
 
しかし、この方法だと学んだバリエーションと似たようなデザインしか作成できる
ようにならず、応用性が低くなりがちです。これをフォローするためにパーツ(ヘッダ、
見出し、ボタン、バナー、etc)毎にパターン学習をして、それを再構成/再調整する
練習もする予定です。単純に組み合わせのバリエーションでフォローするだけですが
応用性は上がると思います。
 
 
  

●カリキュラムの流れ

カリキュラムの流れとしては以下の様になります。HTMLやCSSは他にセミナーや
書籍がたくさんあるので、デザインドリルでカリキュラム化する予定はありません。

・パーツのバリエーションを学ぶ:技術の習得と見る目を養う
  ↓
・全体の構成法を学ぶ:トーン&マナーの調整、統一感の理解。
  ↓
・テーマに沿った課題サンプルの作成
 
 
 

●新カリキュラムにデザインを入れた理由

設立時のデザインドリルのターゲット層は「すでにデザイナー/コーダーとして働いている
社会人」でした。しかし実際に開始してみると、web系スクール(○○ハリウッド等)の方も
意外と多く。そのような方から「Flashコンテンツの作成を学んでも、デザインができない
ので素人っぽいコンテンツになる」という意見が何件かありました。
そこで以前から、デザイン系の講座も必要だなと考えており、新カリキュラムを期に実現
しようと思ったわけです。しかしFlash限定のデザインではターゲット層が狭いので、この
ようにwebデザインのカリキュラムとしたわけです。
 
 
 

Flashはどうなってしまうの?

●Flashは無くならない

非Flashが増えるというものの、Flashがなくなることはないと思います。
ActionScript3.0で作成する高度なコンテンツはjavaScriptでは代替できないので、
スペシャルサイトを中心に利用され続けるでしょう。
さらにActionScript3.0以外のFlashも残っていくと考えています。
 
 
  

●アニメはやっぱりFlash

まず残るのがアニメを多用したショーケースFlashやバナー広告でしょう。
HTML5 + CSS3 + JavaScriptでもアニメを作成することができますが、
Flashに比べれば機能も低く時間的/金銭的コストがかかってしまいます。
adobeがHTML5, JavaScript, CSS3でアニメーションを作成するツール
「Adobe Edge」を発表しましたが、まだFlashのアニメーションには及びません。
Adobe Edge Preview(リリースは2012年予定)
 
またyahooなどに掲載するFlashバナーも「HTML5 + CSS3 + JavaScript」に置き換える
のは難しいと思います。これらのバナーは他の部分に影響を及ぼさないように様々な
制限の下で作成されます。「HTML5 + CSS3 + JavaScript」では性質上、バナー以外の
他の要素にも容易にアクセスできてしまうため、他のページ要素に(意図せず)影響を
及ぼす可能性があります。(例えばバナーで動かそうとしていた物と同じidの要素が他に
あり、それが動いてしまう等)
またFlashバナーのように短いソースコードでは組み込めず、html本体により多くの
ソースコードをを追加する必要があり、これもバナーに適さない理由になるでしょう。
※ページ内フレームでバナーを隔離してしまえば、これらの問題を回避できるような気もします。
 
 
 

●Flashからの移行は部分的

「jQueryを始めよう」でショーケースFlashなどの簡単なインタラクションはjavaScriptに
置き換わっていくと説明しましたが、移行にはかなり時間がかかり、しかも完全に置き
換わることはないと考えています。

Flashを利用できるデザイナーの数に比べ、JavaScriptを利用できるデザイナーの数は
少なく、FlashよりもHTML5 + CSS3 + JavaScriptのほうが予算が掛かります。そのうえ
表現力もFlashの方が上でから、Flashが選択される案件の方が多い気がします。
実際AJAXが登場したときも「Flashは廃れるのではないか?」という意見がありましたが
Flashが廃れることはありませんでした。

iPhoneやiPad対応を謳うコンテンツに対してはHTML5 + CSS3 + JavaScriptで対応
しなくてはなりませんが、日米のスマートフォンのシェアでFlash対応のAndroidが
iPhoneのiOSを上回った状況では、流れが変わる可能性もあります。
ジョブスが生きている間はiOSがFlashに対応することはないと思いますが

私自身も生徒層の関心がActionScriptから離れたから、ActionScriptのカリキュラムを
無くしただけで、仕事ではFlash作成を続けていくと思います。
 
 
 

●デザインドリルのカリキュラムとして

ということで新しいカリキュラムではjQueryだけでなく、Flashでアニメ(バナー等で
利用する短いアニメ)を作成する講座も用意する予定です。
操作を学ぶだけでなく、効果的な演出についても学べるようにします。

ActionScriptはテキストベースで説明しやすいため書籍やネットにも多くの情報があり
学びやすいのですが、アニメ演出は説明しにくいこともあり情報があまりないので
カリキュラムとして有効ですし、難易度もActionScriptに比べると低いので修了率も
期待できると感じています。

またActionScriptを利用した演出(星が飛び出す、ランダムに輝く等)も組み込む予定です。
これはActionScriptを自力で作成するのではなく、私が用意したテンプレートを利用して、
動きを調整するだけにして難易度を下げる予定です。

そして最後にはテーマを決めての課題作成を実施し、より仕事に役立つ技術の習得を
目指します。カリキュラムの流れとしては以下の様なものを考えています。
「Flashの操作を学ぶ」→「多くの演出手法を学ぶ」→「課題作品の制作」 
 
 
 

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と同じことが分かると思います。
 
 

 
 
 

なぜActionScriptの講座をやめたのか?

●修了率

デザインドリルのActionScript講座で目指していたことは「デザイナーでも習得できる」
ということでした(サムネイル&ディテールやショーケースFlashは仕事で利用する
機会も多いので、ここまでの習得を目標としました。基礎講座までの知識では仕事へ
の活用は難しいでしょう)。
 
ある程度は、この目標を達成できた思うのですが、実際に出席簿のデータを確認すると、
受講者のうちサムネイル&ディテール講座を修了するのは4〜5人に1人と不十分と
言わざるを得ません(以下の修了率を参照)。
 
修了率のデータは開講時から算出していたため、修了率を上げるためにカリキュラム改修
を随時おこなってきました。具体的には教材のサンプルを細分化し、
1つ1つのステップに時間をかけ理解度のアップを目指したのです。
※開始時では入門講座8時間(2日)+基礎講座8時間(2日)が、最終的には
 入門講座24時間(4日)+基礎講座24時間(4日)と3倍になりました。
 
ですが以下の様に、思ったほどの改善には至りませんでした。
—————————————————————-
入門:73% 基礎:42% サムネイル:22%
 ↓
入門:81% 基礎:43% サムネイル:27%
—————————————————————-
授業の理解度はそれなりに上がったのですが、時間数が多くなったため
「こんな簡単なことを実現するのも、こんなに大変なんだ…」という感想が
増えてきたのです。応用力を鍛えるための講座なので、簡単なサンプルでも、それに付随
する知識を多く組み込んだ結果「大変」という印象になってしまったと考えています。
 
それでも入門講座は大抵満席になり、一時は募集開始から24時間以内で定員が
満たされる程で、利益を出すことはできていました。
 
 
 

●FlashからHTML5への流れ

しかし2010年の後半から状況が変わってきました。ほとんど満席だった入門講座が定員に
満たないことが増えてきたのです。この時期にカリキュラムの変更はしていないので原因
は外にあると考えました。
その第一候補はiPhone,iPadなどのFlash非対応とHTML5,CSS3への関心の移り変わりです。
 
実際、雑誌「Web Designing」の白書で「習得したい技術は?」という項目において
これまではFlashが1位だったのが、2011年の白書ではHTML5,CSS3に抜かれることと
なったのです。
 
なんとかしないといけないとは思いつつも、制作の仕事が忙しかったこともあり
大幅な路線変更はせず、ActionScript3.0への移行やクラスなど新しいカリキュラム
追加で対応しようと考えていました。
 
 
 

●地震を期に

そんなところに地震がやってきて、事務所の壁に大きなヒビを入れていきました。
ビルが倒壊するのではないかと不安になり、すぐに事務所を解約したのですが、
これが転機となりました。

良さそうな物件が見つからない中、これからの方針をじっくりと考える機会を得たのです。
「このままの方向でカリキュラムを拡張しても効果は薄いのではないか?」
「もう一度、0からカリキュラムを考えよう!」

ということでスクール業は一時停止し、新カリキュラムの作成に力を入れよう。
とすると大きな事務所は必要なくなるので、事務所の移転先探しをやめて実家に戻り
制作業務を続けながら、新カリキュラムの作成するということになったのです。
 
 
 

●ActionScript3.0への移行について

もっとも改善すべき問題は修了率の低さです。仕事で活用できる技術を持った人材を
社会に送り出せなくては、スクール業を営む会社の存在意義がありません。

それを踏まえるとActionScript3.0の講座を実施するのは難しいと思うようになりました。
ActionScript3.0では簡単なことを実現するにも2.0以上の予備知識が必要となります。
そのため受講時間もさらに長くなり、修了率を上げることは難しいでしょう。

さらに制作の現場で「私はActionScript3.0が使えます」といったら、制作会社は
どのようなレベルを期待するでしょうか?
おそらくは、企業のプロモーションに利用される「フルFlashのスペシャルサイト」の
作成くらいを期待されてしまうのではないでしょうか?

ActionScript2.0以前であれば、デザイン/コーディングの延長としてのショーケースFlash
やサムネイル&ディテールで十分だったものが、いきなり期待度が上がってしまうのです。

それにサムネイル&ディテールやショーケースFlashではテンプレート化が容易なため
カリキュラム化することができますが、スペシャルサイトは企業の企画に合わせて
多様な仕様を取るためカリキュラムとして作成するのは難しくなります。

かといってActionScript3.0でショーケースFlashやサムネイル&ディテールを作成しても、
前述のように制作会社の期待には添えない可能性が高いとなると、学ぶリスクも大きく
なります。ということでActionScript3.0の講座は「当面」作成しないことにしました。
 
 
 
ActionScript2.0の講座をやめて、ActionScript3.0の講座も開かないとなると
なんの講座をやるの?ということで次の記事(jQueryを始めよう)につながります。