この授業で説明してきた内容を踏まえると、以下の様なHTML/JSページが制作出来ます。

これらのWebページは、「Webサービス」として公開してユーザーに使ってもらうことができますよね。

さらに「PhoneGap」というものを使えば、これらのHTML/JSコードをそのままAndroid/iOS スマホ用アプリにビルドすることができます。

あるいはこれらの機能を既存のWebページに組み込んでユーザーに提供することもできます。

つまり、様々な方法で実際にプロダクトを公開してみて、自分ブランドを構築していく・セルフプロデュースする・名前を売っていくことができます。ビジネスを起こすことだって出来ます。もちろん就職活動につかうポートフォリオの1ページを飾ることも出来るでしょう。

 

思い切って、どんどんモノを作っていってください。

”学び”とは「わからない=考える」ことに意味があるのですし、クリエイター/プロはモノを作ってなんぼです。

 

静的なグラフィックやデザインで世界を変えることは現在非常に難しいとおもいますが、インタラクション・システムまでを含んだビジュアルプレゼンテーションならば、世界を「あっ」と驚かせるようなものは、みなさんでも今すぐに作ることが出来るのだと強く信じてください。

 

プログラミングとはプログラムの世界だけで自己完結するものではなく、情報社会の根本を支えるテクノロジーなのだということを忘れないでください。

音楽も映像も、すべてのメディアはテクノロジーの上に成り立っています。 テクノロジーの根幹をなすのは「人間が情報を制御する術」すなわちプログラミング的思考です。

 

政治も行政も企業も市民生活も、まだまだ我々の力を必要としています。

我々は社会の問題・個人の問題を解決できる力を今まさに手に入れようとしているのだということを強く信じてください。

このことこそが、大人になるということ・社会に出る・社会に参加するということだと思います。

 

たった半年の、限られたテーマの授業ではありましたが、共に過ごした時間がみなさん一人ひとりが生きていく上でのプラスになっていくことを祈ります。

 

Have fun !(^ω^)

時間差実行
setTimeout( 関数(), 時間);

配列
var array = [item, ‘こんにちは’, 100];

 

動作サンプル
lupinCapt

JSとHTML5による ルパン三世タイトルコール

http://dev.koekatamarin.com/zokei/lupin/

 

このサンプルで使用する音声素材ファイル(ダウンロードして解凍)

http://dev.koekatamarin.com/zokei/sozai_lupin.lzh

 

 

■方針
まず、サウンド再生についてはこちらを参照

このプログラムは、大きく2つの「状態(モード)」があります。
(1)大きな文字が一文字ずつ表示されているモード
(2)すべての文字が一文に繋がって表示されているモード
1のモードが終わったら、2のモードにつながります。

まず、この2つの「状態(モード)」を、分けて考え始めます。

 

(1)大きな文字が一文字ずつ表示されているモード

文字列を一文字ずつに分けて、配列にしておきます。
配列から、文字を一文字ずつ取り出して、順に表示していきます。
配列を順番に処理するときに、for文(繰り返し処理)を使うと、一瞬で処理が全て終わってしまうので、意図した動きにはなりません。
ここでは、for文ではなく、時間差処理を使って、繰り返し処理を行います。

 

(2)すべての文字が一文に繋がって表示されているモード

こちらは何も難しいことはありません。表示のコントロールに show() とhide() を使います。
フラッシュが焚かれたように画面が一瞬白くなるとかっこいいので、白のレイヤーをshow()してからfadeOut()します。

 

 

■実際のコード
HTML5 Boilerplateを使いましょう

 

HTML(index.html)

 

CSS(style.css)

 

JavaScript(script.js)

ゲームのように、一般的なWebよりも複雑なプログラムを開発するには、オブジェクト指向プログラミング(OOP)が有効です。

Webでも、Webフレームワークを使ったサイト開発や、ある程度の規模のサイトで美しく効率的なコーディングが求められる場面ではオブジェクト指向プログラミングはよく採用されます。

 

成果物デモ

http://dev.koekatamarin.com/zokei/20130701class/

jsClassCapt

アニメ「Adventure Time」をモチーフにした簡単なゲームを作りました。

 

参考記事

連載:Ajax時代のJavaScriptプログラミング再入門:第4回 JavaScriptでオブジェクト指向プログラミング (1/4) – @IT
http://www.atmarkit.co.jp/ait/articles/0709/25/news148.html

JavaScriptでクラスを実現する方法
http://www.crystal-creation.com/web-appli/technical-information/programming/javascript/grammar/function/class/

 

実際のコード
(HTML5 boilerplateを使用)

 

HTML(index.html)

 

CSS(style.css)

 

JavaScript(script.js)

 

 

 

今までの授業とはやり方をかえて、このページにはサンプルコードはのせません。

講師がその場でプログラミング実況するのに合わせて、みなさんもリアルタイムに書いていってください。

すべて、jQueryを使った書き方です。

 

 

1:ボタンがクリックされたらダイアログ表示

まずHTML側にbuttonタグを配置しましょう。

そして、ボタンクリックの処理はjQueryではどう書くんでしたっけ?

ダイアログ表示は、alert() でしたよね。

 

2:ボタンがクリックされたらオブジェクトが右に移動する

※動作デモ: http://dev.koekatamarin.com/zokei/move/

 

まず、HTMLにdivタグを配置します。id=”obj” とします。

このdiv要素を、CSSで、タテヨコ100px・ボーダー1px・左から100px上から100pxに絶対配置します。

オブジェクトの位置を動かすには animate() を使います。

‘+=’ または’-=’を使えば、相対的に移動させることが出来ます。

オブジェクトを徐々に消すには、fadeOut() を使うか、 opacityをanimateさせます。

 

 

3:ボタンがクリックされたら背景が変わる

動作デモ: http://dev.koekatamarin.com/zokei/onoff/

素材ファイル: http://dev.koekatamarin.com/zokei/sozai_20130702.lzh

 

まず、HTMLにclass=”on”のbuttonタグを配置します。

buttonのCSSを定義します。

JavaScriptで、ボタンがクリックされたら、bodyのクラスをonにするように書きます。

CSSで、クラスがonのときのbodyに背景を表示するよう定義します。

うまく表示させるには、bodyとhtmlの両方がheight:100%;でないといけません。

さらに、背景のオンオフに合わせて、ボタンの状態も変えるともっとかっこよくなります。

クリックされたら、bodyとは逆に、buttonはクラスがoffになるように書きます。

 

 

4:実践的なコーディング

ここからは、実際の商用サイトを参考に進めましょう!

背景画像の切り替えを、より実践的に行います。

 

↓今回選んでみたのはこちら

翠星のガルガンティア

http://gargantia.jp/

gar

 

素材はさきほどと同じ物を使います。

 

HTMLには、ボタンタグではなく、aタグを書きます。href= には、#ページ名を入れます。

 

今回は、背景画像切り替えを、bodyタグではなくdiv#mainでやってみましょう。

CSSが少しややこしくなります。

 

JavaScriptでは、クリックされたらクラスを追加するようにします。

クラスのオン・オフ関係では、3つ以上の背景に切り替えられませんよね。

aタグのクラス名を取得して、div#mainに同じクラス名をひっつけるようにします。

 

実際に動かしてみると、なんだか少しおかしい気がします。

ただクラスを追加しただけではクラスが重複してしまうので、クラスを追加する前にクラスを消す処理も必要なのです。

これでひとまず複数背景の切り替えは出来ました。

 

さらに、切り替えの際にカーテンのようなエフェクトを付けます。

動作デモ: http://dev.koekatamarin.com/zokei/gar/

 

まず、JavaScriptのaddClassとremoveClassをコメントアウトします。

HTMLに div id=”cover” を追加して、

CSSで left:-100%; に絶対配置します。

この状態では、カーテンは見えません。クリックしても何も動作しません。

 

javaScriptで、クリックされた後に、div#coverをleft:0;にanimateさせます。

このとき、jQueryでは-100%がうまく処理されないようなので、画面の横幅を取得して、-1を掛け算した値で絶対配置し直します。

これで、カーテンが右に閉じますね。

デュレーションとイージングのパラメーターも設定してみます。

 

さらにanimateをチェーンさせて、閉じたすぐ後に再び開くことができます。

同じオブジェクトに対して順番にメソッドを実行するには、メソッドチェーンという書き方があります。

 

2つのanimateの間に、背景画像を切り替える処理を書きたいのですが、これはオブジェクト(主語)が異なるのでチェーンでは書けません。

代わりに、コールバックを使って順番に処理を実行することにします。

まずはさきほどのanimate2つを、コールバックで書き直します。

正常に動いたら、今度はコールバックの中に、切り替え処理を加えます。

 

これでカーテンが閉じたら画像を切り替えるようになっているはずですが、

画像の読み込み時間を考慮して、

ダミーのanimateを100ミリ秒ほど実行してから、コールバックでカーテンを閉じることにしましょう。

 

 

以上です!

さらに商用サイトのように近づけるには、オブジェクトを動かしたりフェードインさせたりで出来ますよね?

 

Have fun!(^ω^)

JavaScriptとjQueryの違いが、いまいちわかっていない方もまだ多いかもしれません。

マウスで何かをクリックしたときの処理を例に、書き方の違いを見てみましょう。

JavaScriptだけで書く場合

jQueryを使って(読み込んだ状態で)書く場合

javaScriptでまずクリックする対象を取得するには、
getElementById
getElementByName
getElementByTagName
などを使います。
クラス名では取得できません。また、ID指定以外で複数の対象を取得したら、配列に格納される点も面倒です。

jQueryでは
$(‘#id’)
$(‘.class’)
といった具合にかんたんに取得できて、しかも配列を意識することなく複数の対象を扱える点もスマートです。

 

クリックイベントを処理するには、
javaScriptだけだと「イベントリスナー」を使わなければいけないので、イベントハンドラと実行関数が別のところに分かれます。
jQueryであれば、一カ所にまとめて書けます。