タグ別アーカイブ: 資料

SVG のお勧めの資料

Man painting a pictureSVG は新しい技術ではありませんが、最近けっこう注目されています。私もちょっと触ってみています。今のところは SVG のゲーム位置情報のサンプルだけですが、勉強するにはよく参考にする3つのホームページを見つけました。自分はまだ初心者レベルですが、ここで私にとっての最も役に立つ資料を紹介したら面白いかなと思いました。下記の資料は全部英語ですが、コードが多いなので文章を読まなくても勉強になるでしょう。

  • SVGBasics
    それぞれのページは短いですが、SVG の基本ならとても見やすいです。タグ名の綴りや属性の使い方を忘れた場合は役に立ちます。
  • carto:net
    上記の SVGBasics ほど見やすくないですが、説明は細かく書いてあります。私がよく読む部分は Manipulating SVG Documents Using ECMAScript です。なぜなら Internet Explorer 9 は SVG をサポートしますが、アニメーション用の SMIL は対応していません。このため、IE でも動く SVG のアニメーションを作りたいのであれば、JavaScript を利用する必要があります。
  • SVG Essentials
    さすが O’Reilly さん。本全体をオンラインで公開しています。相変わらずとてもプロフェッショナルな感じであり、コードのサンプルや画像が多いです。ちなみに印刷版もあります

Opera の社員ですからもちろん弊社の開発者向きの SVG 記事集も忘れずに。最後に、右上の画像は Nicu Buculei さんの作品であり、無料な SVG 画像をたくさん提供しています。

他の資料、又は参考にできるサンプルやデモをご存知であれば、是非コメントでお知らせください!

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 が人気になりつつあり、英語だけではなく日本語の資料も多くなって来ました。例えば: