ECサイト制作/Webデザイン/ホームページ制作/携帯サイト構築/ネットショップ開業/ECサイト運用代行/サイト更新作業請負/システム開発|Web制作会社

WEB制作に関するお問合せはWMCまでTEL:06-6348-2250

◆文字サイズ変更

大 中 小
  1. HOME
  2. コンテンツ
  3. 最新Web技術のお話

最新Web技術のお話

新たなマークアップ「HTML5」

現在Web業界に過渡期が訪れようとしています。
それは新たなマークアップ「HTML5」の誕生です。

現在世にあるWebページの大半はHTML4.0,XHTML1.0でマークアップされています。
ただし、ユーザーから見ればHTML4.0であろうが、XHTML1.0であろうが見た目の差はほとんど無くほとんど変わりのないものです。

ではなぜこの2種類マークアップが共存しているのかというと、それまで規則のゆるいHTMLが主流のマークアップだったのを、10年ほど前Web標準化団体W3Cによるマシンリーダブルであることを目指したXMLベースのマークアップ「XHTML」を発表したのです。

このマシンリーダブルであるという理想はみな賛同し、新しく構築されるWebサイトはXHTML1.0でマークアップされるようになりだしました。ただし、W3Cの思惑ははずれHTML4.0とXHTML1.0が混ざり合った現状になってしまいました。
それはなぜか?最もブラウザシェアが高いInternetExplorerがXHTMに対応していなかったこと主な要因だと考えられます。
そのことにより、XHTML1.0の普及が進まなかったのですが、そこで理想を追うW3Cが行ったのは、XHTML1.0の要素などを見直したXHTM2の策定に着手しだしたのです。

そんなマークアップ進化の無い状況下でJavascriptの世界では劇的な進化AJAXの登場により大きく発展していきました。
そういった状況下は、それまで実装がブラウザ間で異なっていたAPIの実装をWeb標準のAPI実装という流れをもたらしました。
APIの実装がブラウザ間で異なっていたためJavascriptによるWebアプリケーション開発が滞っていた時、全盛期を誇っていたのはAdobeのFlashやMicrosoftのSilverlightなどのプラグインが取って代わっていました。
プラグインはインストールされていればブラウザの違いを意識することなくJavascriptで実現できなかった高度な機能を実現できRIAというリッチコンテンツの提供に寄与してきました。

そういった、現実とW3Cの理想の中でブラウザベンダーはより現実な方向を選択し、Opera・Mozila・ApplegがWHATWGを設立し現実を重視したマークアップを策定しようとし誕生したのが「HTML5」なのです。

「HTML5」はこれまでの経験則の中で、足りなかった機能を追加し、不要な部分をそぎ落とし仕様としてWebを再構築再定義しまとめたものにしようとしています。

「HTML5」が発表された当初はブラウザベンダー同士での仕様でしかなかったのですが、2007年にW3CがWHATWGとともにHTML4の次世代仕様の策定作業に加わることになり、実質的な次世代のWeb標準になりました。その後Googleがこの「HTML5」を強力に指示しブラウザーベンダー間で「HTML5」の機能実装が加速しました。そして2010年3月ついにMicrosoftがWeb標準とHTML5の機能を積極的にInternetExplorerに実装すると表明されました。実際InternetExplorer9には数多くの「HTML5」関連のAPIが取り入れられています。
ただ、今すぐに「HTML5」へという流れは、InternetExplorerの過去のバージョンが対応されていないことと、ブラウザ間によってまだまだAPI機能の実装に差があることを考えすぐには普及しないと考えられていました。

しかし、iphoneを代表とするスマートフォンの普及により無視できなくなりました。
iphone・Andoroidといったスマートフォンの標準ブラウザは全てwebkitとよばれるHTMLレンダリングエンジンを使用しており、「HTML5」の新機能を数多く実装しています。

こういった状況を鑑み、Webサイトを構築する際、PCはXHTML1.0、モバイル(ガラケー)はHTML4.0、スマートフォンはHTML5での構築という風にクライアント環境を考えてマークアップを使い分けていく必要あります。

モバイルの新たな時代を築くかもしれない「Flash Lite」

2008年夏モデルが先ごろ各社から発表され、今までの機種がほとんどFlash Lite 1.0/1.1だったドコモがFlash Lite 3.0を採用した事により、発表されたほどんど全ての端末でFlash Lite 3.0を採用しています。

Flash Liteとは、現在一般的にFLASHがPC環境に対応しているのに対し、携帯電話などの組込機器向けにアドビシステムズが提供しているランタイムエンジンです。
平たく言えば、PCで使用するのがFLASH、モバイルで使用されているのがFlash Liteという風に言えばわかりやすいと思います。

現在Flash Liteのバージョンは、Flash Lite 1.0/1.1・Flash Lite 2.0・Flash Lite 3.0がリリースされており、バージョンがあがるにつれて様々な機能が追加されていっています。Flash Lite1.0/1.1ではActionScript 1.0を使用しているため、PCで実現されるようなFlashがActionScript 2.0を使用しているという事情から、かなり機能的な制限がありPCのようにフルFlashでのモバイルサイトはほとんどみかけません。

しかし、Flash Lite 3.0の登場で大きくこの状況が変わるかもしれません。各社がFlash Lite3.0にバージョンを合せてきた事により、制作サイドも難点であるバージョン違いを考えず、Flash作成の提案が出しやすくなっていくでしょう。

Flash Lite 3.0では、ActionScript™ 2.0を使用し、Youtube等で採用されているFLV(動画)やストリーミングをサポートしているため、今までモバイルでは出来なかった動画コンテンツの配信が可能になり、モバイルで動画を見るということが一般化していくでしょう。

現在は、まだ、Flash Liteのバージョンシェアが、Flash Lite 1.0/1.1・Flash Lite 2.0が圧倒的であるため、すぐにフルFlashサイトをうんぬんというのは無理でしょうが、操作性や、性質的にモバイルと相性がよいFlash Liteをメインに据えるモバイルサイトが増えてくるのはそう遠くないでしょう。

CMSの代名詞「Movable Type」

2008年1月末にMovableType4の最新版がリリースされました。

MovableTypeは、Content Management System(CMS)と呼ばれるシステムでテキストや画像などのコンテンツをデータベースに保存・管理し、必要に応じてWebページを生成して表示するシステムであり、XHTMLやCSSの知識がなくても、ブログ感覚でWebサイトの更新を行えるものです。また、テンプレートによって全体的なデザインの変更を行えるため、一度システムを作成してしまえば、サイトの運営・管理の手間が大幅に削減されます。

導入事例としても、コーポレートサイト・プロモーションサイト、また、プラグインと呼ばれる拡張機能を利用すればECサイト、ポータルサイト・モバイルサイト等ほぼ全てのWebサイトへの導入です。
そのため、近年大手企業を中心にMovableTypeを利用が増加してきています。

MovableType導入のメリットというと、第一に、XHTML+CSSで作成されているため、SEOとの親和性が高く、SEO的にも効果が高いWebサイトの構築が可能になります。
次に、プラグインを活用すれば、自身のサイトで他社とは違う独自性を発揮でき、差別化が図れる。そして、コメント機能や評価機能などを利用すれば、双方向のコンテンツを作成できる。

では、デメリットについてですが、まず第1に導入のためのコストがかかる。

MovableTypeをビジネスなどに利用するためにはライセンスの購入が必要となります。現在(08/5/19現在)そのライセンスが基本ライセンス52,500円(1サーバ5ユーザー)となり、それ以上ユーザー数を追加するにはまた別料金がかかってきます。そして、実際導入するにあたり、MovableTypeをサーバへのインストール・初期設定・デザインテンプレートの作成及び設定など、XHTMLやCSSそしてデータベースの知識がないとできない作業が発生してきます。また、MovableTypeには独自タグと呼ばれるものが存在しており、システムを使わない通常のWebサイトしか構築したことのないWeb制作会社では対応できない部分もあり、かなり専門的な知識が必要になるため、この初期構築・設定の料金を専門業者に依頼すると、通常のWebサイトに比べてどうしても高額になります。

つぎに、ビジネスブログとして活用したときに、Amebaブログやヤプログ!などブログサービスを利用したときの各サービス事業者が提供している簡単に機能を拡張するといったサービスの恩恵にあずかれないということがあります。

MovableTypeには導入当初には限られた機能しかついていません。例えていうなら着せ替え人形の人形だけで、あとの服やアクセサリーは自分で選んでコーディネートするという感じです。そのため、各ブログサービスが提供するコンテンツなど気に入って、同様のコンテンツを追加したいと思っても、MovableTypeとしてない場合は相当大変な作業になり、納品後にそういった機能を追加したいとなれば外注業者へ再度依頼するといったことになります。

このようにMovableTypeにもメリット・デメリット両方が存在しており、導入に当たっては、他社も導入したから、便利だとよく聞くからといった理由で導入するのではなく、目的、予算に見合った形で導入されればと思います。

▲ページTOPへ戻る

ブラウザのお話

ブラウザとは、Internetexplorer(IE)に代表されるHTMLファイルを解析してWebページを表示させるアプリケーションソフトのことを言います。

現在、ブラウザシェアでトップを誇るのが、Windowsに標準搭載されているIEとなり、国内では全体の9割を誇っています。続くのはFirefox、Safari、Netscape(NN)という順になりますが、IE以外のブラウザを合せてもシェアは1割程度にしかならないのが現状です。しかも、一昔まえ、インターネット黎明期に、IEとブラウザシェア争いを繰り広げたNNは、2008年3月1日に開発を中止することになり一時代に幕を下ろしました。このようにブラウザのシェアは国内ではIEの1人勝ちの状態となっていますが、海外を見ると若干この数字に違いがでてきます。

海外では、IEのシェアは、大体7割、低いところでは6割にしかならないという国もあります。それにかわりシェアを伸ばしつつあるのはFirefoxで現在2割~3割のシェアに達しつつあります。

なぜここで、ブラウザのシェアについて話したかというと、このシェアというのはWebサイトを構築する基本段階のターゲットブラウザ選定上重要になってくるからです。

ブラウザは、リリース時期によりレガシーブラウザとモダンブラウザというものに分かれ、レガシーブラウザとは、IE4.0やNN4.0などの古いバーションのブラウザを指し、モダンブラウザとはIE7.0やFirefoxなど、新しくリリースされたバージョンのブラウザを指します。
レガシーブラウザとモダンブラウザの大きな違いは、Webページをどのように修飾(表示)するかを指示する仕様であるCascading Style Sheets(CSS)の解釈の違いで、CSSを正しく解釈しているのはモダンブラウザです。この解釈の違いにより、Webページの表示にレイアウト崩れを起こしたり、デザイン案でみたものと少し異なったデザインにWebページができてしまうという問題が起こります。

分かり易い例で言えば、ドコモの携帯電話からソフトバンクの携帯電話に絵文字付きメールを送る場合、新しい携帯電話同士なら絵文字が表示されるのに、古い携帯電話の場合絵文字が表示されないというイメージです。

このCSSの解釈の違いは、レガシーブラウザとモダンブラウザ間で大きな違いが生じていますが、実はモダンブラウザと呼ばれるブラウザ間でも若干の違いがあり、各社この差をなくす方向に向かっていますが現状では、この解釈の違いをいかにうまく回避するかがWeb制作の課題になっています。しかも、現在シェアがもっとも多いIE(特にIE6.0)がこのCSSの解釈に癖を持っているため、どの制作会社もCSSを使用してのコーディングに二の足を踏んでいました。実際、あのYahoo!JAPANのトップページでさえ、2008年4月のリニューアルまでCSSを使ってのレイアウトではありませんでした。

ブラウザ毎にあるCSSの解釈の差により、全てのブラウザの検証を行うというのが非常に難しく、どうしてもターゲットブラウザの選定というのが必要になってきますので、Webサイトを制作する際は、ブラウザのシェアの把握はしっかりしておかなければなりません。

▲ページTOPへ戻る