タグ別アーカイブ: 参考

JavaScript を勉強すべきか

JavaScript を勉強しましょう昨日はあるソフト開発会社と HTML5 についてとても面白い話ができました。HTML5 はもちろんバズワードで注目されているものですが、ある面では HTML5 の新しい技術の知識より JavaScript の知識の方が重要であるかも知れません。私が前から思っていたことの一つは、 HTML や CSS を利用しているWebデザイナーが JavaScript を少しでも勉強しないと仕事がなくなる恐れがある、ということです。しかし、昨日の話のおかげでWebアプリケーションが人気になればなるほど、いわゆる一般的な開発者も JavaScript を勉強する必要性が出てくると気づきました。いつも C++ を使っているプログラマーでも、いつも Photoshop を使っているデザイナーでも、JavaScript を理解するためのキーポイントは同じです:

  • JavaScript を使う前に詳しく勉強する必要はありません。一行でもホームページに挿入して試してみることができます。
  • JavaScript は厳しくないです。いろんな間違いを許してくれます。例えば、変数の宣言を忘れたり、セミコロンを忘れたり。
  • コーディングしやすい言語です。例えば、変数のタイプは指定しません。
  • 一応安全な言語です。どうすれば良いか分からない時、何でも試してみても大丈夫です。最悪の場合、ブラウザの再起動が必要になります。
  • 開発ツールがあります。最も簡単なのは OperaFirefox に入っているエラーコンソールです。ちゃんとしたデバグツールなら Opera の DragonflyFirefox の Firebug がお勧めです。開発用の IDE がほしい方は Eclipse (英語)や Aptana(英語)が利用できます。

しかし、私にとって最も重要なポイントは:

  • JavaScript のパワーです。以前はくだらないアニメーションによく使われていましたが、その時代は終わりました。成長しました。

JavaScript と他のWeb言語(HTML、CSSなど)でできるものは C++、Javaなどでできるものに急速に近づいてきています。jQuery みたいなライブラリーのおかげでその差がますます小さくなっています。一般的な開発言語との概念はほぼ一緒ですが、異なるところはプラットフォームです。ネットワークを利用するデバイスが多くなればおおくなるほど、OS のための開発よりブラウザのための開発の方が一般的になるでしょう。

参考資料

プログラミング経験がない場合:

プログラミング経験がある場合:

お勧めの本

最後に、Opera 社員でいることにも関わらず、Mozilla さんの JavaScript ガイドリファレンススタイルガイドはプログラミングしながらのとても役に立つ資料です。

Canvas と SVG:それぞれをいつ使ったら良いでしょう?

Paints
HTML5 の普及と共に、ウェブページに画像を作るには canvas と SVG(Scalable Vector Graphics)の使用が多くなってきています。Internet Explorer 以外の全ての現代的なブラウザは対応しており、Flash の代わりにアニメーションとインタラクティブな画像に利用できます。しかし、なぜ2つの画像作成方法が必要なのか?そして、それぞれをいつ使ったら良いでしょう?

SVGとは

  • 数年前からの W3C スタンダード
  • タグで画像のオブジェクトが作れるXML系の言語
  • 画像を拡大しても画質が悪くならない
  • 各要素は SVG の DOM にあり、JavaScript のイベントが追加できる
  • あるオブジェクト、あるいはオブジェクトのグループを編集するのが楽
  • オブジェクトの数が多くなれば多くなるほど重たくなる
  • アクセシビリティが良い、例えば文字列を通常の文字列と同じように選択できる

Canvasとは

  • 画像はピクセルでできており、JavaScriptでピクセルを描く
  • 画像を拡大すると画質が悪くなる
  • 画像を編集するには、ピクセルを新たに描くことが必要
  • ピクセルの編集が速い
  • 画像サイズが大きくなれば大きくなるほど重たくなる
  • アクセシビリティが良くない、例えば検索エンジン等は画像内の文字列を認識できない

結局canvasとSVGはどういう時に最適ですか。

編集のスピードが速いため、速く描画するのが重要である時は canvas がベストです。例:アニメーションやゲーム等。大規模の画像やインタラクティブな画像には SVG が最適です。例:地図やユーザインタフェース等。

※ Internet Explorer でも使えるように、canvas であれば「excanvas」、SVG であれば「Raphael」を是非使ってみて下さい。

参考資料

HTML5 についての Q&A

HTML5のよくある質問Q) HTML5とは何でしょうか?

A) HTML5 は二つに分けることができます。まずは仕様です。ホームページ作成に使う基本言語の第5版。そして、同時に出ている幾つかのウェブ関連の技術を代表する総合的な単語でもあります。例えば、Web Sockets、ジオロケーション、オフラインストレージ等。CSS、SVG や他のオープンスタンダートと同じように、ウェブを利用する時のエクスペリエンスを改善するのが目標です。

Q) 目標と言えば、HTML5 の目標はなんでしょうか。

A) 主に2つの重要な概念があります。1つは HTML を動的にすることです。今までは HTML と言えば文字、リンクと画像のみでしたが、これだけではなく、現在プラグインでしかできないこともできるようになります。もう1つの目標は HTML をなるべく使いやすくすることです。これを実現するには上位互換性をできる限り保ち、多くのウェブ開発者の開発方法に沿った基準を作ります。この方法は「”paving the cowpaths” – 牛の通り道を舗装する」と呼ばれています。

Q) それはどういう意味ですか?

A) この10年間はウェブが非常に進化しましたが、ウェブページの作り方と構成はそれほど大きく変わっていません。基準を守らないウェブページも少なくありません。現状を改善するには、ウェブ開発者の開発方法を変えようとするより、その多くの開発方法を基準にしようとしています。例えば、従来の HTML ではビデオ再生用のプラグインをウェブページに挿入すれば、そのページは非準拠になってしまいます。HTML5 は <embed> の要素が追加されましたので、その恐れがなくなりました。他にも例があります。現在、あるページは HTML で作られており、あるページは XHTML で作られています。あるページは大文字を利用し、あるページは小文字を利用しています。HTML5 ではどちらも有効です。

ただ基準を宣言するだけではなく、HTML5 は今のウェブの現状から離れないようにしようとしています。例えば、多くのウェブページはヘッダーとフッターがありますので、<header><footer> という要素が HTML5 に追加されました。同じように多くのウェブ開発者は JavaScript を使ってフォームのスライダーやカレンダー等を作るのに苦労してきましたが、これらも HTML5 の一部になりました。ウェブ利用者にとっても、いろいろなホームページにてフォームを使う際に、統一されたエクスペリエンスを感じることができます。

Q) ということは、HTML5 を使うには別の言語を学ばなくてよいのでしょうか?

A) その通りです。今までの HTML に非常によく似ていますので、既存のページが有効な HTML 又は XHTML であれば、それは有効な HTML5 となるでしょう。もしそうならなくても、通常は少ない修正で十分でしょう。もちろん、HTML5 ではなく従来のバージョンが良いのであれば更新する必要はありません。

Q) ページが有効であるかどうかはどうやって分かりますか。

A) ウェブ標準化団体の W3C はオンライン確認ツールがあります: validator.w3.org

Q) ちょっと待って!従来のバージョンと次のバージョンは違いが多くないのであれば、HTML5 の新しい基準はなんの意味があるでしょうか。

A) それがポイントです。言語の基本は似ていますが、面白いことはその基本の上にできるものです。

Q) 例えば?

A) まず新しい要素ができました。例えばよく使えそうな上記の <header> と <footer>、ナビゲーション <nav>、部分の <section> 等。その上、ウェブアプリケーションに対応できるようになりました。例えば:

  • <canvas> の要素:JavaScript を利用してウェブページの中に画像を作成。
  • <video> と <audio> の要素:プラグインを使わずビデオとオーディオを再生。
  • Web Forms 2:メール、URL、日付の入力が簡単にできるフォーム。ブラウザで入力確認も可能。
  • ジオロケーション:ユーザの現在の位置の取得。
  • オフラインストレージ:インターネットに接続しなくてもウェブアプリケーションを使用可能。
  • Web Workers:JavaScript の計算が裏側で行われ、その計算が重たくてもブラウザが固まらない。

Q) よし、決心した!でもどうやって HTML5 を使えばよいでしょうか。

A) まずは注意点です。HTML5 はまだ作成中であるため、各ブラウザによって対応されている、または対応されていない機能があります。あるブラウザが対応するようになっても、対応しない古いブラウザもかなり多くあります。このため、対応しないブラウザでページを見た際、エラーメッセージが出ない、若しくは何も表示されない可能性があるといった点に気を付けないといけません。しかし、HTML5 は上位互換性を重要にしていますので、正しく利用すればそういう問題は少なくなるでしょう。

もう一つの注意点があります。未定な部分が少なくなって来たとはいえ、HTML5 は完成するまでに更に変わる可能性があります。一般的なウェブ開発者にとっては、最も簡単にできるのは既存の各ウェブページの最上部に HTML5 のドックタイプ(<!DOCTYPE HTML>)を挿入することです。そして、上記の W3C のオンライン確認ツールを利用すれば、有効な HTML5 になるまでに後何を変更すべきか分かります。それから、HTML5 を少しずつ追加すればウェブページの改善が楽になります。

Q) サンキュー。やってみます!困った時はどうすればいいですか。

A) HTML5 が人気になりつつあり、英語だけではなく日本語の資料も多くなって来ました。例えば: