みなさんはじめまして！
先週から始まりましたこのHTML5コラム。 今週と第五週を担当させて頂きます、
フリーエンジニアの板敷と申します！
よろしくお願いします。
はじめましてと言うことで、簡単に自己紹介させて頂きます。
私は現在30台前半で、エンジニアとしてのキャリアは10年近くになります。
最初はテスター兼雑用係から始まり、デバッガー、プログラマー、SEを経て、
ここ数年はシステムのアーキテクトやコンサルタントとしてプロジェクトに
参加することも増えてきました。
これまで基本、フリーランスとして活動してきましたので、
参加するプロジェクトの内容や役割などは、与えられた選択肢の中から
ある程度自由に選んで来ました。
例えば、ノッてる時は困難な役割や新しい技術にチャレンジしたり、
楽して稼ぎたい 初心に帰りたい時は設計実装メインの案件を選んだり･･･｡
そんな感じで、これまでエンジニアとしてやってまいりました。
上記のように、案件の選び方自体は結構いい加減だったりしますが、
(結局、自分に合う案件かどうかは、入ってみないとわかりませんからね！)
新しく習得する技術の選択に関しては、一環してシビアに考えています。
最終的に業務で使う事を目的としているので、好き嫌いではなく、
学習コストに見合う将来性を持った技術かどうかを判断の基準としています。
そう言った意味では、今回題材として取り上げるHTML5には、
「地球の軌道を変えるほどのインパクト」は無いにせよ、
Webアプリケーションの役割を大きく変える可能性があると期待しています。
エンジニアはもちろん、コンテンツの企画者やデザイナーの方々にとっても、
HTML5で何が出来るかを知っておくことは、決して無駄ではないと考えています。
そんな思いを込めまして、今週と第五週のコラムを担当させて頂きます。
それではそろそろ本題に、と言いたいところですが、
具体的なゲームの説明の前に、まずはHTML5自体の簡単な紹介から！
ここ数年、「HTML5」というキーワードを耳にすることが多くなってきました。
書店などでも、IT系のコーナーでHTML5関連本の占めるスペースが
急激に広くなってきているのは、みなさんご存知の事かと思います。
HTML5は、複数のブラウザベンダーによって設立されたWHATWGと、
標準化団体のW3Cが中心となって仕様を策定している、
HTMLの最新バージョンです。
WHATWG http://www.whatwg.org/
W3C http://www.w3.org/
現在一般的に利用されているHTMLのバージョンは4.01ですが、
HTML5への進化は、単にバージョン番号の違いだけに留まりません。
4.01では文章を書くためのマークアップ言語としての役割が主だったのに対し、
HTML5では、従来の機能はもちろん、Webアプリケーション用API、
また場合によっては、CSS3やSVGなどの関連機能も含めた全体を
総称してHTML5と呼ぶことがあります。
将来的にHTML5の機能が充実し、広く普及すると、
現在利用されているOS依存のネイティブアプリケーションに変わり、
OSを問わない、クロスプラットフォームなWebアプリケーションが
様々なデバイス上で利用されるようになると考えます。
今回のコラムでは、そのHTML5関連技術の中から、
ドラッグ&ドロップAPIとCSS3アニメーションを使った
サンプルゲームの作り方を解説していきたいと思います。
みなさんはこれまで、ウェブページ上で画像などを
ドラッグ&ドロップするUIを見たことがあるでしょうか？
このような仕組みは、もう何年も前から使われていますが、
Web標準として規定されていたわけではありませんでした。
そのため、ドラッグ&ドロップ機能を実現するためには、
ブラウザベンダー、またはコンテンツ開発者が独自に
実装する必要がありました。
今回HTML5では、ドラッグ&ドロップAPIもWeb標準として採用されます。
実際には、マイクロソフトがInternet Explorer5で実装していた機能を
基に実現される見込みです。
CSS3は"Cascading Style Sheets, level 3"の略で、
現在W3C、CSS Working Groupが中心となって
仕様を策定している、最新のCSSです。
現在一般的に利用されているCSS2.1を拡張し、
これまでCSS単体では実現が困難であった
(アニメーション、グリッドレイアウト)等の機能が提供される予定です。
また、CSS2.1と互換性があるため、既存のソースに
CSS3用の記述を混在させることが可能です。
それではようやく、今回解説するゲームの紹介を行います！
ドラッグ&ドロップAPIとCSS3を使った簡単な計算ゲームを作ってみましょう。
以下に画面イメージ、ゲーム概要、フローチャート図を示します。
■図1. ゲーム画面イメージ
■ゲーム概要
初期状態では「答え」のみ表示されており、「左辺値1」、「左辺値2」、
「四則演算値」に適切な値を設定することで式を完成させるゲームです。
数字を設定するには、画面下部1～10の数字画像を
数字ドロップエリアにドラッグ&ドロップします。
また四則演算の設定は、マウスクリックにより行います。
式が完成した時点で答え合わせが行われ、正解、不正解の結果により
異なる画像がアニメーション表示されます。
■図2. ゲーム処理フロー図
第二週となる今回は、HTML5についての簡単な説明と、
サンプルゲーム(計算ゲーム)の概要説明を行いました。
次回からは実際のプログラム解説に入ります。
今回のゲームの目玉機能である、ドラッグ&ドロップAPIを主に解説予定です。
担当は、今最も動きにキレのあるWebエンジニア、手塚さんです！
よろしくお願いします～！
先週から始まりましたこのHTML5コラム。 今週と第五週を担当させて頂きます、
フリーエンジニアの板敷と申します！
よろしくお願いします。
はじめましてと言うことで、簡単に自己紹介させて頂きます。
私は現在30台前半で、エンジニアとしてのキャリアは10年近くになります。
最初はテスター兼雑用係から始まり、デバッガー、プログラマー、SEを経て、
ここ数年はシステムのアーキテクトやコンサルタントとしてプロジェクトに
参加することも増えてきました。
これまで基本、フリーランスとして活動してきましたので、
参加するプロジェクトの内容や役割などは、与えられた選択肢の中から
ある程度自由に選んで来ました。
例えば、ノッてる時は困難な役割や新しい技術にチャレンジしたり、
そんな感じで、これまでエンジニアとしてやってまいりました。
上記のように、案件の選び方自体は結構いい加減だったりしますが、
(結局、自分に合う案件かどうかは、入ってみないとわかりませんからね！)
新しく習得する技術の選択に関しては、一環してシビアに考えています。
最終的に業務で使う事を目的としているので、好き嫌いではなく、
学習コストに見合う将来性を持った技術かどうかを判断の基準としています。
そう言った意味では、今回題材として取り上げるHTML5には、
「地球の軌道を変えるほどのインパクト」は無いにせよ、
Webアプリケーションの役割を大きく変える可能性があると期待しています。
エンジニアはもちろん、コンテンツの企画者やデザイナーの方々にとっても、
HTML5で何が出来るかを知っておくことは、決して無駄ではないと考えています。
そんな思いを込めまして、今週と第五週のコラムを担当させて頂きます。
それではそろそろ本題に、と言いたいところですが、
具体的なゲームの説明の前に、まずはHTML5自体の簡単な紹介から！
HTML5概要
ここ数年、「HTML5」というキーワードを耳にすることが多くなってきました。
書店などでも、IT系のコーナーでHTML5関連本の占めるスペースが
急激に広くなってきているのは、みなさんご存知の事かと思います。
HTML5は、複数のブラウザベンダーによって設立されたWHATWGと、
標準化団体のW3Cが中心となって仕様を策定している、
HTMLの最新バージョンです。
WHATWG http://www.whatwg.org/
W3C http://www.w3.org/
現在一般的に利用されているHTMLのバージョンは4.01ですが、
HTML5への進化は、単にバージョン番号の違いだけに留まりません。
4.01では文章を書くためのマークアップ言語としての役割が主だったのに対し、
HTML5では、従来の機能はもちろん、Webアプリケーション用API、
また場合によっては、CSS3やSVGなどの関連機能も含めた全体を
総称してHTML5と呼ぶことがあります。
将来的にHTML5の機能が充実し、広く普及すると、
現在利用されているOS依存のネイティブアプリケーションに変わり、
OSを問わない、クロスプラットフォームなWebアプリケーションが
様々なデバイス上で利用されるようになると考えます。
今回のコラムでは、そのHTML5関連技術の中から、
ドラッグ&ドロップAPIとCSS3アニメーションを使った
サンプルゲームの作り方を解説していきたいと思います。
ドラッグ & ドロップAPI
みなさんはこれまで、ウェブページ上で画像などを
ドラッグ&ドロップするUIを見たことがあるでしょうか？
このような仕組みは、もう何年も前から使われていますが、
Web標準として規定されていたわけではありませんでした。
そのため、ドラッグ&ドロップ機能を実現するためには、
ブラウザベンダー、またはコンテンツ開発者が独自に
実装する必要がありました。
今回HTML5では、ドラッグ&ドロップAPIもWeb標準として採用されます。
実際には、マイクロソフトがInternet Explorer5で実装していた機能を
基に実現される見込みです。
CSS3
CSS3は"Cascading Style Sheets, level 3"の略で、
現在W3C、CSS Working Groupが中心となって
仕様を策定している、最新のCSSです。
現在一般的に利用されているCSS2.1を拡張し、
これまでCSS単体では実現が困難であった
(アニメーション、グリッドレイアウト)等の機能が提供される予定です。
また、CSS2.1と互換性があるため、既存のソースに
CSS3用の記述を混在させることが可能です。
計算ゲームを作ってみよう！
それではようやく、今回解説するゲームの紹介を行います！
ドラッグ&ドロップAPIとCSS3を使った簡単な計算ゲームを作ってみましょう。
以下に画面イメージ、ゲーム概要、フローチャート図を示します。
■図1. ゲーム画面イメージ
■ゲーム概要
初期状態では「答え」のみ表示されており、「左辺値1」、「左辺値2」、
「四則演算値」に適切な値を設定することで式を完成させるゲームです。
数字を設定するには、画面下部1～10の数字画像を
数字ドロップエリアにドラッグ&ドロップします。
また四則演算の設定は、マウスクリックにより行います。
式が完成した時点で答え合わせが行われ、正解、不正解の結果により
異なる画像がアニメーション表示されます。
■図2. ゲーム処理フロー図
次回は
第二週となる今回は、HTML5についての簡単な説明と、
サンプルゲーム(計算ゲーム)の概要説明を行いました。
次回からは実際のプログラム解説に入ります。
今回のゲームの目玉機能である、ドラッグ&ドロップAPIを主に解説予定です。
担当は、今最も動きにキレのあるWebエンジニア、手塚さんです！
よろしくお願いします～！