Ajaxライブラリが生まれた経緯 Ajaxテクノロジで開発する上で、大きな問題となることの1つは各Webブラウザ間の互換性問題です。主にInternet Explorer（以下、IE）とそれ以外のWebブラウザの仕様の違いに依存しています。 まず、Ajaxの肝となるXMLHttpRequestの呼び出し方からして異なっています。 IEの場合は、「xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")；（IE７はXMLHttpRequest()でも可能）」となり、それ以外のWebブラウザでは、「xmlhttp = new XMLHttpRequest()；」となります。 また、オブジェクトにイベントをアタッチするやり方も違います。 IEの場合は、「element.attachEvent('onclick', handler);」となり、それ以外のWe

パスという概念を理解して、直線を書こう！ 前回では矩形（四角形）を描くstrokeRectメソッドやfillRectメソッドを紹介しました。これらは、呼び出すだけで矩形の線を描いたり、塗りつぶした矩形を描いたりすることができ、非常に分かりやすいメソッドでした。しかし、これらのメソッドはCanvasにおいて例外的といっても良いでしょう。 通常、Canvasではパスという概念を使って図形を描きます。今回は、このパスの使い方について詳しく解説していきます。まずは、直線を書いていきましょう。 白い紙に鉛筆を使って線を描くシーンを想像してください。最初に、頭の中で線を描こうと考えますよね（beginPathメソッド）。次に、書き始める場所に鉛筆を置きます（moveToメソッド）。そして鉛筆を動かします（lineToメソッド）。これで線が描かれます。Canvasでも、これによく似たことをメソッドの呼び

Googleガジェットとは 本連載では、Googleガジェットの魅力と使い方、そして作り方を解説していきますが、まず本題のGoogleガジェットに入る前に、「ガジェット」の簡単な説明をします。 本連載では、Googleガジェットの魅力と使い方、そして作り方を解説していきますが、まず本題のGoogleガジェットに入る前に、「ガジェット」の簡単な説明をします。 「ガジェット」は、目新しい小物（例えば携帯オーディオプレーヤやPDAなど）を指す言葉として使われています。最新グッズを紹介する雑誌をめくってみると、「ガジェット」という言葉を見つけることができます。その「目新しさ」や「小物」の意味が転じて、あるプラットホーム上で動作する小さなアプリケーションのことを「ガジェット」と呼ぶようになりました。 ここでの「小さな」とは、機能が絞り込まれているという意味、もしくは表示領域が小さいという意味のことで

Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり

Ajaxの定義を考える 皆さんはAjaxという言葉がなんの略かご存じですか？ AjaxはAsynchronous JavaScript + XMLの略称で、Asynchronousは非同期という意味です。この言葉はデザインコンサルティング会社Adaptive PathのJesse James Garrett氏によって提唱されました。 その内容はadaptive pathの2005年2月18日掲載記事で読むことができます（出典：Ajax: A New Approach to Web Applications）。 その記事によればAjaxという具体的な技術があるわけではなく、既存技術の組み合わせによって定義されると述べられています（図1）。 では、それを満たさないとAjaxと言えないのでしょうか？ データ通信に関して最近ではJSONというフォーマットが主流でXMLを使うことは少ないですし、動的

制作仕様書は「料理のレシピ」 制作仕様書やコーディングチェックシートと言うと、堅苦しく聞こえるかもしれません。ワークフローや細かなサイト設計に基づいた制作の仕様が記載された制作仕様書は、料理の流れや材料、その分量が書いてある「料理のレシピ」に似ています。 そして制作仕様書通りに制作されたものか確かめるコーディングチェックシートは、料理レシピによって作られた「料理の味見」をする様なものと解釈してみてはいかがでしょうか？ ガイドライン化するメリットとデメリット 制作仕様書には、Webサイト全体の設計方針に分かりやすく書いたものにサイトマップなどを拡張した簡易的なものから、ファイル名や文法表記の統一など詳細情報を事細かに冊子のように厚いドキュメントに記載したものまで多く存在します。 ここではその内容や内容量に問わず制作仕様書が制作者へ与えるメリットとデメリットをご紹介します。 ガイドライン化する

CSS3では何ができるのか？ CSS+XHTMLでWebページを作っていると、面倒なことがたくさんありますよね。「なんでこんなところで苦労しなければいけないんだ！」ってことが、本当に多くあります。 例えば、「文字に影を付きる」ことも大変なことなのです。実現するためには、Photoshopなどで影付きの文字を作成し、GIFに書き出て、それをHTML内にイメージタグで挿入して、alt指定でイメージの説明を書いて…。たった「影付きの文字」を使うだけで、これだけの作業を強いられるなんて、やっていられないですよね。 このように「デザイン的なことを実現するために強いられている無駄な作業」それを回避できるのがCSS3です。「文字に影を付きる」は、新しく加わったtext-shadowプロパティで簡単に実現できます。「角丸の囲み」を作りたければ、border-radiusプロパティを使えば、これもまた簡単に

今、メトリクスが最新な理由 モデリングの最新動向を紹介する本連載の最後は、モデル化の最新技法ではなく、モデルのメトリクス（評価尺度）を取り上げ、Javaを例に代表的なメトリクスの解説とツールの紹介、開発現場での適用について解説します。 モデルのメトリクスとは、モデルを構成するクラスやメソッド、クラス間の関係、パッケージ間の関係などを、複雑さや結合度、凝集度などの観点から測定し、数値として表すものです。メトリクスを利用することで、モデルを簡単に評価することができるようになります。 コード行数や欠陥除去率など多くのメトリクスは、1970年代に確立されています。本記事で紹介するモデルのメトリクスの考え方は主に1990年代に確立されていますが、組み込み系のごく一部を除いて、現在に至るまであまり話題になることもなく、開発の現場でもほとんど利用されていないという状況にあります。 しかし、今後はモデルの

Eclipseから始めるあなた 最終回の今回は、オープンソースの統合開発環境「Eclipse」と、Drewmweaverに取って代われる存在ともいえる「Aptana Studio」を紹介しましょう。 筆者がAptana Studioを始めたきっかけは、諸先輩方からのアドバイスです。Webデザインだけでなくプログラミングもこなすような仕事が増えてきたころ、PHPを書く場合に何かいいアプリケーションがないかと探しており、EclipseとプラグインのAptana Studioを勧められたのです。 Eclipseは、プラグインの追加でいろいろな言語を記述することもできるし、何よりオープンソースであるところもいいところだと思います。今回は、まだEclipseを使ったことがない方のために、導入方法から紹介していきましょう。 EclipseではWindows、Linux、Mac OS Xほか多数のプラッ

チームによるWeb制作の現場でのメリット 本連載ではこれまで、複数でHTMLファイルを扱うためのルールの必要性、ルールをドキュメント化したガイドラインの存在、ガイドラインの作り方、チームで作業する上での技術スキルや知識の差を埋める対策としての勉強会や、コミュニケーションについて、提案や事例などを交えて解説してきました。 チームと言っても漠然とした設定でしたが、企業における業種・業態はそれぞれですし、運営する人たちもまた違ってきます。しかし、大事なことは「チームはでまとまってWebサイトを作っている」という意識をお互いに持つことではないでしょうか。 これまでの回で注意するべき点を解説してきましたが、それとは反対にチームでの制作現場だからこそ、そこから得られるメリットもたくさんあります。 多くの人と関わることができる機会は、フリーランスでは得られないメリットの1つです。たくさん人がいるというこ

柔軟性のあるコーディング Webサイトの制作業務を請け負っていると、制作の途中でデザインが変わることは少なくありません。コーディングもいきなり仕様が変わったり、新しい機能やカラムが追加になるといったことがしばしば発生します。 要素を追加するため、ソースコードに無理な変更や複製を行うと、ソースコードはどんどん劣化していきます。最悪の場合は、今後の拡張性を考えると作り直しをした方が作業時間を短縮できるのではないかと思われるものまであります。しかし、納期や予算に余裕があれば作り直しをすることもできますが、大抵の制作現場ではその時間もなく、なかなか理想のコードが作れないことが現状です。 このようなソースコードの劣化や作り直しを防ぐためにも、柔軟性を持ったコーディングをするテクニックが必要です。今回は、ソースコードを劣化させないコーディングのコツを紹介していきましょう。 秘伝の3つのコツ 第1のコツ

複雑化するWebブラウザの検証 WebデザインのHTMLコーディングでは、複数のOSやWebブラウザ、またバージョン別による検証確認は必須です。OSやWebブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることもあるからです。 テーブルレイアウトでコーディングしていた時は、OSのフォントサイズの違いによる段落検証が中心でした。しかし、CSSレイアウトへ移行すると、WebブラウザごとにCSSの解釈が変わってくるため、検証がより複雑になってきます。今回はWebブラウザ検証方法と、その対処策をマスターしていきます。 現在、一般的に使用されている主なWebブラウザは、Internet Explorer（通称IE）のバージョン6と7、Firefox、Safari、Operaです。これらのWebブラウザシェアは日々推移していますが、ユーザ環境リサーチを行っているW3Counte

CSS3は今！ 皆さんはCSS3について知っていましたか？ 「まあ、なんとなく知っていたけど、まだ先の話でしょ」という感じではないでしょうか。筆者も「最近ようやくテーブルデザインからCSS+XHTMLでのコーディングスタイルが落ち着いたから、もうちょっとこれでやらして」という感じです。 しかし、CSS3時代の到来はそう先の話ではなさそうです。例えば、SafariやOpera、Firefoxなどの一部のWebブラウザでは、すでにCSS3の仕様が実装されています。また、新しいバージョンが出るたびに、どんどん新しい実装が追加されています。Internet Explorerもバージョン8でWeb標準に向かっています。 このCSS3策定は、Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun MicrosystemsなどといったW

安全第一、安心第一 Webページを作成する時、「第1回：ベストなコーディングツールを探せ！（http://www.thinkit.co.jp/article/47/1/）」で紹介したような王道のアプリケーションやテキストエディタだけで頑張ることもできますが、作業を楽にするための「あると便利なアプリケーションやツール」を紹介してみましょう。 「セルフレイティング」という言葉を聞いたことはあるでしょうか。簡単に説明すると、自分のWebサイトがどのようなコンテンツを含んでいるか、特にアダルトや暴力的な表現があるかないかをに埋め込むことで、安心してWebサイトを閲覧してもらえるというものです。これはMSN（http://jp.msn.com/）などに埋め込まれています。 しかし、実際にはあまり見かけないのが現実ではないでしょうか。筆者も担当していた大手プロバイダサイトのトップページのリニューアルの

Webデザイナは知っていた 第1回：エンジニアだって色にこだわりたい 著者：シンクイット制作部 公開日：2008/02/14（木） 2008年3月の連載ランキング4位（一覧を見る） Webデザイナがよくやる色の決め方 ある日、社内のプログラマの1人から突然こんな質問をされました。 「社内用のWebアプリケーションツールのフォーマットの色を見栄えよく変更したいんだけど、何色がよいか教えてくれない？16進数で」 16進数で！？　色名ではなく具体的な数値で聞いてくるところはさすがエンジニア気質。色という同じ話題なのに職種の違いだけで面白い要求が来るものだと関心してしまいました。 今まで筆者がいた会社にはWebデザイナと営業、プログラムが少し分かる人がいるという程度でした。しかし弊社インプレスITには編集者・ライター・Webデザイナ・エンジニアが社内に揃っていて、それぞれ自分の業務に関してプロなわ

【即実践！HTML+CSS】 チームによるWeb制作の現場 第2回：ガイドライン作成のポイント 著者：イー・アクセス 佐藤 恵 公開日：2008/04/10（木） ガイドライン（ルール）はいつ、誰が決めるの？ 「第1回：ルールを作ろう！」ではルールの必要性について解説しました。Webサイトの持つ影響力を考えれば、その元であるルールの重要性も理解していただけたのではないかと思います。 今回はルールを実際に作ってみよう、改正しよう、と思っている方向けに、ルールの内容についてさらに詳しく紹介していきます。ルールは企業内で規定する場合、?「ガイドライン」と呼ばれるものにあたります。以降では本連載でもガイドラインと表記します。 さて、ガイドラインは「いつ？」「誰が」決定するのでしょうか。まずは「いつ？」について見ていきましょう。 一般的にガイドラインは年に数回ほど変更することがあります。その変更のタ

それではテストケースを作成していきます。まず基本となるHTMLでの記述方法です。HTMLでテストケースを記述する場合、以下のファイルを使用します。 テストケース 実行される1つのテスト。実際にWebブラウザを操作したり検証したりする内容を記述する。試験項目の小項目（1項目）に相当する。HTMLファイル。 TestSuite（テストスイート） テストケースをまとめたもので、HTMLでテストケースを記述する場合のテスト実行単位となる。試験項目の中項目に相当。HTMLファイル Index TestSuiteをまとめた目次相当のもの。TestSuite毎にテストを起動するために使用するHTMLファイル。必須ではないがあった方が便利

今回から、Seleniumを使ってどのようにテストを行っていくか実践していきます。サンプルアプリケーションを用意し、それに対するテストをSeleniumで実施します。まずは事前準備とSeleniumの基礎知識についての説明です。これより本連載では、下記ソフトウェアを使用しているという前提で進めていきます。 カテゴリ ソフトウェア バージョン

それでは、Seleniumがどのようなものかデモによって体感してみましょう。今回のデモでは以下のようなテストを行います。 試験項目 検索画面にて正常に検索できること 試験手順 検索画面を開く 検索フィールドに「selenium」と入力し、[検索]ボタンを押す 検索結果画面が表示されることを確認 「selenium の検索結果」と表示されていることを確認

【即実践！HTML+CSS】 チームによるWeb制作の現場 第3回：コミュニケーションを増やす施策 著者：イー・アクセス 佐藤 恵 公開日：2008/04/17（木） 現場の本当の状況 これまで、複数人で制作、管理、運用をするWebサイトについてスムーズな作業を行うためのポイントや、ガイドラインについてお話ししてきました。今回は、チームやプロジェクト、部門内などで関わっているメンバー間での技術や知識レベルの統一について解説していきます。 具体的には、メンバー個々の技術や、知識レベルの差から発生する問題点をできるだけ統一するための提案など、当事者というよりもディレクタなどのプロジェクト管理者向けの内容となります。 さて、皆さんが働いている現在の職場では、お互いの作業が滞りなくスムーズに進んでおり、一見問題点は見当たらないように見えるかもしれません。 しかし、実際には個人のレベルの差を比べると