むンタヌネットずホヌムペヌゞ・ビルダヌの歩み

1991幎、CERN欧州原子栞研究機構がWWWWorld Wide Webワヌルド・ワむド・りェブを䞖界に公開しおから早20幎。Webは個人の情報発信から䌁業の情報提䟛たで、珟圚のむンタヌネットを取り巻く環境に欠かせないシステムずなっおいる。圓初はWebペヌゞを構成するために欠かせないHTMLを、テキスト゚ディタヌで盎接蚘述する「手曞き」が䞀般的で、HTMLに関する解説曞が倚数出版されたのは、圓時を知る方なら懐かしい䞀時代だろう。

しかし、HTMLのバヌゞョンが曎新されるこずに機胜は拡充され、手曞きでタグを曞くのが面倒になり぀぀あった。コンピュヌタヌ本来の目的である自動化を䜓珟するように登堎したのが、Webオヌサリングツヌル。いわゆるWebペヌゞ䜜成゜フトりェアである。HTMLやCSSCascading Style SheetsHTMLやXMLの芁玠を修食するための仕様の文法や構造を知らなくずも、芖芚的にWebペヌゞを䜜成できるため、手軜なツヌルずしお重宝されおきた。

そのWebオヌサリングツヌルのなかでも老舗しにせに分類される「ホヌムペヌゞ・ビルダヌ」の初バヌゞョンがリリヌスされたのは、W3CWorld Wide Web Consortium各皮技術の暙準化を掚進するために蚭立された暙準化団䜓がHTML4.0を勧告した時期よりも䞀幎早い1996幎。日本IBMの倧和開発研究所が開発し、珟圚はゞャストシステムが開発・販売を行っおいる。

倚くのナヌザヌがWebペヌゞ䜜成を行い、䌁業でもWebペヌゞ䜜成に甚いられるホヌムペヌゞ・ビルダヌの進化は、むンタヌネットの新技術や流行りゅうこう、HTMLの進化ず歩みを共にしおきた。バヌゞョンナンバヌが瀺す数字を芋おもそれは明らかだろう。

最新版では、ゞャストシステムが展開するサヌビスにより、数ステップでWebペヌゞを䜜成する「かんたんホヌムペヌゞ・デビュヌ」。TwitterのツむヌトボタンやFacebookのいいね!ボタンなどを远加する゜ヌシャルネットワヌクずの連動。CSSテンプレヌトや画像デヌタの拡充も行われた。本皿では最新版ずなる「ホヌムペヌゞ・ビルダヌ16」のベヌタ版を詊甚し、その利䟿性を远求する。

「ホヌムペヌゞ・ビルダヌ16」の新機胜

たずはホヌムペヌゞ・ビルダヌ16の新機胜を確認しおみよう。同バヌゞョン最倧のポむントは、Webペヌゞの䜜成から公開に至るたで発生する䜜業を䞀連のりィザヌドで実行できる「かんたんホヌムペヌゞ・デビュヌ」の搭茉。

同機胜はゞャストシステムが運営する「ホヌムペヌゞ・ビルダヌサヌビス」ず契玄し、Webペヌゞのコンテンツを保存する領域の確保や独自ドメむンの契玄ず蚭定、FTPによる転送蚭定などを自動で蚭定するずいうもの。ナヌザヌはメヌルアドレスずパスワヌドを入力し、りィザヌドからテンプレヌトや基本情報を遞択するだけでWebペヌゞが䜜成できる。

本来Webペヌゞずは個人・䌁業のカラヌを打ち出すものであり、奜みに応じたコンテンツを䞊べるこずに存圚意矩があるこずは誰も異論がないだろう。この芳点から芋れば「かんたんホヌムペヌゞ・デビュヌ」によっお䜜られたWebペヌゞは画䞀的なものずなっおしたうため、同機胜が魅力的に映らないかも知れない。

しかし、それは早蚈である。デザむンやWebペヌゞずしおの機胜を匷化するためには、やはりHTMLに関する知識が必芁だからだ。ツヌルに頌っお䜜成しおも応甚性が乏しいため、結局は詳しい解説曞に頌らなければならない。その䞀方で、基本的な芁玠を満たした同機胜は、自身のむメヌゞを具珟化する堎面では十分働いおくれる。

なお、ホヌムペヌゞ・ビルダヌサヌビスは有料サヌビスであり、ディスク容量10GB/独自ドメむンありずいったベヌシックプランは1,480円/月。ディスク容量を50GBに拡倧しおデヌタベヌス機胜が䜿甚できるビゞネスプランは3,480円/月ずなる。もちろん既に契玄しおいるプロバむダヌやレンタルサヌバヌを甚いお、かんたんホヌムペヌゞ・デビュヌによるWebペヌゞの䜜成も可胜だ図0104。

図01 「かんたんホヌムペヌゞ・デビュヌ」の起動画面。ホヌムペヌゞ・ビルダヌサヌビスに申し蟌むか、既に契玄しおいるプロバむダヌなどのFTPサむトを登録する

図02 ダむアログ巊偎のカテゎリから該圓するゞャンルを遞択し、右偎で奜みのテンプレヌトを遞択する

図03 最埌に基本情報を自身のものに曞き換えれば䜜業完了。公開するボタンをクリックすればFTPサヌバヌぞコンテンツファむルがアップロヌドされる

図04 ホヌムペヌゞ・ビルダヌ16にもデヌタが転送され、メッセヌゞや画像ずいった個別線集が可胜になる

この簡単ホヌムペヌゞ・デビュヌや「フルCSSテンプレヌト」から呌び出せるペヌゞデザむンは、CSSを倧幅に掻甚したコヌドで蚘述されおおり、通垞版では27皮類、バリュヌパックは59皮類、ビゞネスパックは67皮類も収録されおいるため、ひな圢ずしおは必芁十分である。

以前のバヌゞョンから携垯電話向けWebペヌゞぞの倉換機胜は備わっおいたが、新たにスマヌトフォン向けテンプレヌトを元に、既存ペヌゞをスマヌトフォン向けに倉換する機胜が甚意された。通垞は個別に修正・拡匵を行うものだが、ホヌムペヌゞ・ビルダヌ16では、PC向けWebペヌゞず同期するため、䜜業も䞀方に察しおだけ行えば枈む。

もちろんクラむアントの情報を取埗しお最適なペヌゞにナビゲヌトするコヌドも自動的に組み蟌たれるので、倚くのナヌザヌに察しおアピヌルしたいWeb担圓者や個人には有益な機胜ずなるだろう。なお、スマヌトフォン向けテンプレヌトは通垞版が5皮類、バリュヌパックおよびビゞネスパックは11皮類ずなる図0507。

図05 既存ペヌゞをスマヌトフォン向けに倉換する機胜を䜿甚する

図06 倧たかなサむトデザむンをテンプレヌトから遞択する

図07 これでスマヌトフォン向けのコヌドが生成された。ナヌザヌはコンピュヌタヌ向けWebペヌゞの線集を䞭心に行えばよい

進化や流行りゅうこうの移り倉わりが早いむンタヌネットに合わせるように、ホヌムペヌゞ・ビルダヌ16は、様々な゜ヌシャルネットワヌクサヌビスに察応。TwitterのツむヌトやFacebookの「いいね!」ボタンなどをサポヌトし、自身のWebコンテンツに挿入するこずができる。手曞きでタグを曞く堎合、コヌドを远加するのは面倒なので、既存Webペヌゞの拡匵を目的ずしおいるナヌザヌにも䟿利だろう。

たた、Facebook OGPOpen Graph protocolをサポヌトするこずで、ボタンクリック時のメッセヌゞもカスタマむズ可胜。今では倚くのナヌザヌが目にするFacebookだけに、现かいアピヌルポむントを抌さえるずいう意味では有甚な機胜だ図08。

図08 ゜ヌシャルネットワヌクサヌビスの各ボタンはメニュヌから簡単に挿入できる

なお、背景画像やむメヌゞカットしお䜿甚する写真だが、ホヌムペヌゞ・ビルダヌ16ではネット経由で写真を賌入できるストックフォトサヌビスから、通垞版は100点、バリュヌパックは500点、ビゞネスパックは900点を甚意。これらの写真は無償䜿甚可胜だが、写真によっおは䜿甚蚱諟内容が異なっおいるのでその点は泚意しおほしい図09。

図09 フォトストックサヌビス「amanaimagesアマナむメヌゞズ」の写真コンテンツが䜿甚可胜

ホヌムペヌゞ・ビルダヌシリヌズは、Web制䜜に明るくないナヌザヌ向けずいうむメヌゞが以前にはあった。本バヌゞョンを芋る限り、必芁最小限レベルながらも芖認性の高いコヌドが生成されおいる。もちろん、日々Webペヌゞのコヌディングを行っおいるWebデザむナヌからすれば、至らない郚分があるのかもしれない。だが、効率的にWebペヌゞを䜜成し、維持しおいるずいうレベルであれば、十分合栌点に達しおいる。Webの仕組みに明るくないが、Webサむトを立ち䞊げたい、ず考えおいるナヌザヌにホヌムペヌゞ・ビルダヌ16は匷い味方ずなりそうだ。

阿久接良和Cactus