【コラム】
デジタルハリウッド専任講師の栗谷幸助です。7月から始めさせていただいたワタクシ担当のコラムも最終回を迎えました。今回は「Web制作において現在使われている技術、そしてこれから使われていく技術」について紹介をしていきたいと思います。
第8回コラム「Webデザインの流れを料理番組風にわかりやすく紹介!」では、Webデザインの一連の流れと、使用をする材料・道具などについてお話をいたしました。また その中で、Webページはページの土台となる「HTML」と見た目やレイアウトを整える雛形文書である「CSS」で構成されていることもお話いたしました。
では、HTMLとCSSさえ使用すればWebサイトを作成することが出来るのか? 答えは「△」です。もちろん、HTMLとCSSのみでWebページを作成し公開することは出来ます。ただ、昨今のWebサイトは画像や文字のみならず、動画やアニメーションで見た目の動きを持ったページも多くなってきています。それにはFlashというアニメーション技術やWindows mediaやQuicktimeといったストリーミング技術が使われ、これらを使用する機会も多いのが現状だと思います。
また、Webページに「動きを持たせる」という意味では、「静的なサイト・動的なサイト」というキーワードも思い起こされます。現在 ワタシたちが目にするWebサイトの多くは「動的なサイト」として構築されています。勘違いをされている方も多いのですが、「動的なサイト」とは前述をした「見た目の動きを持ったページ」を指すものではありません。
動的とは「Dynamic」であり、Webページにユーザーがアクセスをした際に、ユーザーのアクセス状況に合わせて"ダイナミック"にWebページを生成する、と言った意味を持っています。例えば、検索サイトでユーザーが入力をした検索ワードをもとに、それぞれのユーザーに対して検索結果のページを表示する、というようなことです。Webサイトにこのような動きを持たせるためには、PHPやPerlなどのWebプログラミング言語、JavaScriptとXMLを組み合わせて使用する技術であるAjaxといったものを使用していくことになります。
また、Webプログラミング言語などを使用して、望んでいる動きの全てを構築するのではなく、ある一定の動きを持った機能をライブラリとして共通で利用できるようにしたものであるAPIを組み込んでいくことで、動的なサイトを構築していくこともあります。そのほか、Webサイトの構築・管理自体にMovable TypeやWordPressといったブログツールを使用することもあります。
このように、現在のWebサイトは様々な技術の集積によって構成されています。表現の幅を拡げていくためには、これらの技術をひとつひとつしっかりと身につけていく必要があるでしょう。
ちなみに、静的なサイトとは「静的=Static」、つまりは主にHTMLとCSS使用し、こちらで用意をした情報を整然と表示するWebページを指すことを付け加えておきます。
それでは、Web制作においてこれから使われていく技術とは何なのでしょうか。いま、各メディアなどで取り上げられているものとしてはHTML5が熱いのではないでしょうか。
HTML5とは、HTMLの5回目の改訂版にあたるものです。これまでのように情報をマークアップし、文書構造化していくことと合わせて、これまではFlashやSilverlightなどのようにプラグインを必要としていたようなWeb表現を、プラットフォームとしての機能やマルチメディア要素をHTML自体に実装することで置き換えていくことを想定したものになります。すでにW3Cによりドラフト(草案)が発表されており、2012年には正式に勧告される予定です。様々なWebブラウザも段階的に対応してきていることもあって、注目を集めています。
では、HTML5がすぐさま制作現場で使用されていくような状況になるのでしょうか? そして、Flashの使用はなくなってしまうのでしょうか?
前半にも述べた、いまでは当たり前のように使用されるようになったCSSですが、この技術は2000年代半ばくらいから本格的にWeb制作に使用されるようになりました。ところがCSSという技術自体は1990年代後半にはW3Cより勧告がなされていました。
では、なぜ実際の現場での使用に数年のタイムラグが生まれてしまうのか? それはWebブラウザの対応の状況もあるかと思います。また これまでの慣れ親しんだ制作方法から無理をして変更をする必要がないという意識の問題もあったかと思います。
2000年代半ばくらいにブログツールが登場してきました。ブログを使用すると、Webサイトを運営する側はWeb制作に関する細かな知識を持つ必要がなく、掲載をしたい情報を入力しさえすれば、あとはブログ側で処理をし、Webページとして公開をしていくことが出来るようになりました。手軽にWebサイトの更新が出来ること、検索サイトとの親和性が高いことなどのさまざまな理由もあり、個人サイトのみならず企業サイトなどにもブログが幅広く使用されるようになっていきます。
そして、徐々にブログツールによるWebサイトの制作案件が増えてくる中で、ブログはその見た目やレイアウトの制御にCSSを使用していました。制作者にCSSを使用しなければならない状況が生まれ、そして使用することでメリットを実感できるようになったことで、CSSは普及していきました。
このように、ひとつの技術が一般化するためには、環境の整備と使用を促すような利用方法が揃わなければなりません。HTML5については、Webブラウザの対応など環境が整ってくる中で、その使用を促すような利用方法やコンテンツがいかに登場してくるのかで、現場に浸透してくる時期が変わってくるでしょう。それが来年なのか、3年後なのか、5年後なのか? 興味を持って見守っていきたいですね。
そして、今までの技術と同様、ワタシたちはそれを身につけていかなければなりません。いつでも勉強ですね。古いものには敬意を払い、新しいものに対しては大いなる好奇心を持って、共にクリエイティブな活動をしていこうではありませんか!
| HTML5/CSS3を学ぶ「HTML5/CSS3 特設サイト -Adobe Dreamweaver CS5-」開設 [2010/9/14] |
| アドビ、「Adobe Illustrator CS5 HTML5 Pack」パブリックベータ版提供開始 [2010/9/14] |
| 「自由」なデザインコンテストに応募するために -ロゴと画像の組み合わせ [2010/9/15] |
| 「自由」なデザインコンテストに、初心者が応募するための方法を考える [2010/9/13] |
| プログラミングが苦手な人向けのPHP入門書「よくわかるPHPの教科書」発売 [2010/9/10] |
地域の魅力を伝えるCMコンテスト「LOVE LOCAL 地元CMコンテスト」開催
【コラム】グラフィックコンテンツArchive 第25回 村上公敏(Murakami Kimitoshi)『Juggler』
| 【レポート】駆け出しイラストレーターのでこ、自分のDTPスキル不足を憂うの巻 [12:00 5/27] |
| 【連載】今さら人に聞けない!! Photoshopのショートカットキー講座 第26回 クイックマスクモード/画像描画モードの切り替え [13:00 5/26] |
| 世界最大のアップライトピアノの音色を再現するソフト音源「THE GIANT」 [12:00 5/26] |
| イーフロンティア、専用マニュアル付属の「LightWave 11」特別パッケージ [18:13 5/25] |
| 【レポート】駆け出しイラストレーターのでこ、最高の名刺を作るの巻 第三回 [17:00 5/25] |
|
[9nine]制服姿見納め? セーラー服で登場も川島海荷「4人はコスプレ」 [19:15 5/27] エンタメ |
|
「NO.6」4巻は書き下ろしドラマCD付、木乃のサイン会も [18:49 5/27] ホビー |
|
[今週の新刊]マンガ大賞3回ノミネート「アイアムアヒーロー」 カープ愛「球場ラヴァーズ」も [18:33 5/27] ホビー |
|
「ゆりてつ」サイン会は作者と都電に揺られるツアー仕立て [17:45 5/27] ホビー |
|
【ネタバレもありの徹底解明コラム】『サザエさん』タマの意外な事実 [17:30 5/27] ホビー |