最新のライブラリーやJavaScriptの新しい活用法を紹介する「JavaScriptラボ」。今回は、9月末にリリースされたばかりの「YUI 3（Yahoo! UI Library Version 3）」を取り上げます。 Yahoo! UI Libraryとは？ 「Yahoo! UI Library」（以降、YUI）はその名の通り、ユーザーインターフェース周りを得意とする米ヤフー製のAjaxライブラリーです。YUIは、Ajaxが普及し始めた2005年に登場し、面倒なUI周りを簡単に処理できることから次第に普及していきました。実は、以前取り上げたAjaxフレームワーク「Ext JS」も、もともとはYUIの機能拡張(Extension)として生まれたものです。 YUIはタブパネルやスライダー、ドラッグ＆ドロップ、アニメーション機能など、他のライブラリーやフレームワークを凌ぐ充実したUI部品と豊

インターネット上でのショッピングやブログの更新、映像の視聴など、現在では多種多様なコンテンツを見られるようになった。このパートではWebの「中身」であるコンテンツの仕組みについて見ていこう。 WebブラウザとWebサーバの仕組みを使ってやり取りされる情報がコンテンツだ。まずブラウザでコンテンツを表示する仕組みから見てみよう。WebページはHTML（HyperText Markup Language）という、文書構造を記述するためのマークアップ言語で作られている。HTMLは1997年1月にW3C（WWW Consortium）にて初めて標準化された。 HTMLには見出しや文字の大きさといった文書の見栄えを定義する、「タグ」と呼ばれる情報が数多く規定されている。記述方法は、これらのタグで表現したい範囲の文書を挟むという形式である。このタグは色情報を指定するcolorや文字サイズを指定するsiz

グーグルを筆頭とするさまざまな企業が、無料で使えるWebマーケティングツールを提供している。SEO／SEM、LPO、アクセス解析ツールなど、ネットショップやプロモーションサイトを運営しているなら、使わない手はない。“使えるツール”だけを全部で30本、月曜～金曜日までの毎日1本ずつ紹介する。　⇒ラインナップ一覧へ 費用をかけずに始められる集客方法として真っ先に思い浮かぶのが、SEO（検索エンジン最適化）だ。検索結果の上位表示を狙いたいキーワードを決め、キーワードに合ったページに作り込むのはSEOの基本中の基本。中でも本文中にキーワードを適切に含めることは重要な施策のひとつだ。 「キーワード出現頻度解析」は、指定したWebページのテキストを解析して、含まれるキーワードを抽出してくれるサービスだ。キーワードの出現頻度にSEO効果があるのかについては議論も多いが、キーワードの頻度を知っておくことは

Web Tools＆Tipsの記事をお読みの方の中には、WebデザインやWebアプリケーションの開発など、Web系の仕事に従事されている方も多いことでしょう。 先日は「ビジネス」のコーナーで「Lunascape 5.0」のメリットをご紹介しました（関連記事）。Lunascapeはビジネスシーンで使うだけでなく、Web制作の仕事においても便利なブラウザーです。その理由をご紹介しましょう。 3大レンダリングエンジンを自由に切り替えられる ここ数年、Webブラウザーのシェア争いが激しくなり、かつてのInternet Explorer（IE）一辺倒の時代から、FirefoxやGoogle Chromeなどの新勢力が登場してきています。となると、Webページを制作する際にも、IEだけでなくこれらのWebブラウザーに対応させることが必要になっています。 「複数のWebブラウザーを1台のPCにインストー

Web制作の画像素材作成にも活躍するPhotoshop。ロゴやアイコンといったパーツのデザインに限って使う人から、デザインカンプの制作～スライスまでこれ1本でこなす人まで……と、その活用法は人それぞれ。だが、Photoshopを簡易Webオーサリングツールとして使う方法があることをご存じだろうか？　それを実現するのが、「psd2css」というユニークなオンラインサービスだ。 PSDファイルをCSSレイアウトのWebページに変換する psd2cssは、その名のとおり、PhotoshopのPSDファイルをブラウザーからアップするだけで、CSS／XHTMLファイルに自動変換してくれるサービスだ。……と、さらっと書いてはみたが、よく考えるとこれはスゴい。Photoshopにある「Web用に保存」機能を使えば、Web用に最適化されたJPEGやPNG画像と一緒にHTMLを書き出すことはできるものの、ス

HTMLのtable（表組み）を使って、Webサイトにさまざまなデータを表示する機会は多くあります。たとえば、サークルのWebサイトを作った時に、メンバーの名前や年齢などをまとめたリストを公開するとしましょう。このとき、Webサイトを訪れたユーザーが、自分の見たい順番に行を並べ替えられたら便利なのに……といったことはありませんか？ そこで試してみたいのが、表の並び替え（ソート）を実現するJavaScriptライブラリです。並び替え機能を持つJavaScriptライブラリは数多くありますが、その中から高機能で使いやすい「DataTables」を紹介しましょう。DataTablesを使えば、サーバーサイド技術の力を借りずに、HTMLとJavaScriptだけでリッチな表を作れます。 並び替えを簡単に実現する「DataTables」 DataTablesは、並び替えをはじめとして、table要素

HTMLだけで作ったシンプルなサイトもいいですが、時にはもっと派手なサイトを作りたい、ということ場合もあるでしょう。これまでもこの連載ではさまざまな“小技”を紹介してきましたが、ページ全体を大きく描き換えるには、以前ならFlashが不可欠でした。ところが最近では、JavaScriptとHTMLの組み合わせでも、かなりの表現できるようになり、実際にそうしたWebサイトも増えてきています。 今回はそんなサイトの1つ、「Baltijos prodiuserių grupė」にページ全体の切り換えテクニックを学びたいと思います。 今回のお手本サイト： 『Baltijos prodiuserių grupė』 リトアニアでイベントの企画・制作を手がける企業のコーポレートサイト。会社概要、業務内容、事例紹介の3つのコンテンツと問い合わせフォームからなるシンプルな構成。フルーツや花など、植物の写真と楽器

「よし、近ごろ流行りのWordPressでも使ってWebサイトを立ち上げてみるか」。そう思い立ってとりあえずWordPressをインストール。「せっかくだから」とテーマ（テンプレート）のカスタマイズにも挑戦してみたものの、意外に面倒で難しかった、という経験はないだろうか。PHPはもちろんのこと、CSSやXHTMLもまだ勉強を始めたばかり、なんて場合には、いきなり一からオリジナルテーマを作るのは少々敷居が高い。 よく言われるのは「ネット上に公開されている膨大な数のテーマから気に入ったものを選んで手直しすればいい」というものだが、WordPressのテーマはあまりに大量にあるので選ぶにしてもそれなりに大変だし、品質も千差万別。見た目で選んだテーマが、不幸にも「カスタマイズが難しいつくりだった」なんてこともある。 そこで、おすすめしたいのが、Webブラウザー上で項目を選ぶだけでテーマを生成してく

1つのWebページに多くの情報を載せようとすると、縦に長くなって見づらくなってしまいます。そのようなWebページを整理するには、ページをいくつかのタブに分けるのが1つの方法です。今回は、jQuery UIの「Tabs」というウィジェットを使って、ページをタブに分ける方法を紹介します。 Tabsをダウンロードしてみよう jQueryには、ユーザーインターフェース関連の基本的なライブラリを集めた「UI」（User Interface）があります。その中の1つに「Tabs」というウィジェットがあります。Tabsは、Webページを複数のタブに分割して、切り替えられるようにするものです。 jQuery UI Tabsを使うには、まずこのJavaScriptファイルをダウンロードします。ダウンロードページに接続すると、ダウンロードするモジュールを選ぶページが表示されますので、「UI Core」と「Ta

グラフィックツールを使ったアニメーションではなく、ActionScriptでFlashを作りたい。そんなとき利用できる新しいオンラインサービスが、Flash開発者の間で話題になっている。 それが面白法人カヤックが開発・提供する「WonderflBuid Flash Online」だ。これまでのFlash開発ではFlex SDKやFlex Builderといった開発環境をローカルに用意する必要があったのに対して、Wonderflで必要なのはWebブラウザーとネット回線だけ。コーディングからコンパイル、実行まで、すべてブラウザー上で完結する画期的なサービスだ。 使い方はとてもシンプルだ。OpenIDに対応しているWonderflは、Yahoo!やmixiといった使い慣れたユーザーIDを使ってログインできる。ログイン後、「Build from scratch」を選択すると、左にエディター、下にコ

普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。 「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。 今回のお手本サイト：『Sikker』 アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが

ありきたりのテンプレートではなく、どうせWebサイトを作るならオリジナルのデザインにしたい――そんなときに悩むのが、“色”ではないだろうか。特にヘッダーやフッター、ナビゲーションバーなど、サイトのイメージを決める重要な要素の色使いは、サイト制作者の腕の見せ所だ。 「でも、どうもセンスには自信がないし……」。それなら、Photoshopのグラデーションライブラリを使ってみよう。Photoshopには標準でもかなりの種類のグラデーションが用意されているが、ネット上ではさらに膨大な数のライブラリが配布されている。グラデーションライブラリを使えばあっという間にイメージどおりの色の組み合わせが手に入るし、うまく活用できればサイト全体の完成度もぐっと上がる。 今回は、単純に「上から下に適用するだけ」でも十分カッコいい、シンプルで“使える”グラデーションライブラリをいくつかピックアップしてみた。なお、実

著作権に関しては、ひと筋縄で解決できない難題が多い。「著作権の保護期間延長」もそのひとつだ。 現在、日本において、小説や音楽、写真、美術といった作品は、作者の死後50年まで著作権の保護期間が設けられている（映画は公表後70年）。作者の死後は、その子孫などが著作権を受け継ぐため、例えば小説を元に映画を作りたいといったケースでは、その子孫に許諾を取ったうえ、場合によっては対価を支払うことになる。逆に言えば、作者の死後50年経っている作品は、自由に書籍化や映画化できるわけだ。 欧米などではこの保護期間が日本より長く、70年だ。そうした背景が影響して、日本でも保護期間を70年に延長しようという話が持ち上がった。その後、文化庁で専門の会合（文化審議会著作権分科会「過去の著作物等の保護と利用に関する小委員会」）が設けられたが、今まで「延長する」「しない」で意見が分かれていた。 そして18日、「過去の著

ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を

使い方1つでWebサイトのイメージをガラッと変えてしまう写真画像。特にトップページで大きく使う写真は、サイト全体の印象を決めてしまうといっても過言ではない。 お金をかけずに質の高い写真画像を使いたい！　そんな願いをかなえてくれる無料の写真素材サイトが最近、増えている。今回は配布点数が多く、日本語で安心して使える国内の素材サイトを5つ紹介しよう。

今月17日の公開からわずか1日で800万件超というダウンロード実績を打ち立てた「Firefox 3」。一足早く今月12日に公開された「Opera 9.5」も17日までの5日間で470万件のダウンロードを記録するなど、次世代Webブラウザの出足が好調だ。 JavaScriptまわりを中心とした処理速度の向上（関連記事1）、セキュリティの強化や多機能化（関連記事2）といったさまざまなメリットが、それだけ多くのPC/ネットユーザーに歓迎されているということだろう。 だがその一方で、人知れず苦労しているのが、企業のWebサイトやインターネットサービスの制作を担う、「Webデザイナー」や「マークアップエンジニア」たちだ。実は普段、私たちが何気なく見ているWebページを「どのブラウザでも同じ見た目に保つ」というのは一筋縄ではいかない。Web制作者から見た、“次世代ブラウザで変わったところ”を探ってみた