Webオーサリングツールを使ってみよう：特別編
業務で使える！ 無料Webサイト作成ツール集
セカンドファクトリー 新谷剛史
2007/7/6
上記ツールの詳細や、ほかのさまざまな無料Webサイト作成ツールについて知りたい読者は本稿に併せて、連載「どこまでできる？ 無料ツールでWebサイト作成」もぜひご参照ください。
Webサイト開発はテキストエディタだけで行えるのか？
■ 今後もWebサイト開発にHTMLコーディングは必要なのか？
Web標準にのっとった制作、CSSによるレイアウト、Ajaxなど、HTMLとCSS、JavaScriptなどで実現可能なことは意外と多いものだ。その中でも、特にAjaxはこれまでシステム開発をしてきたプログラマが得意とする部分だろうし、世の中のデザイナーには、デザインだけではなくこれからはHTML制作に進もうと考えている人もいることだろう。
こういったことから、たとえ世の中がリッチなコンテンツ、Web 2.0、CMSという方向に進んでいったとしても、HTMLベースのWebサイト構築というものは、尽きることがない興味であり続けるだろうと筆者は考えている。
また、HTML＋CSSやJavaScriptなどはWebブラウザとテキストエディタさえあれば、開発をスタートさせることも不可能ではなく、Web制作の初歩として取り組むのにも最適だといえる。
■ Webブラウザ＋テキストエディタだけでは現実的ではない
多少なりともシステム開発やHTMLなどの制作を業務レベルで行った人であれば、Webブラウザ＋テキストエディタという構成での構築があまり現実的ではないことが理解できるだろう。業務レベルでの開発には、正確さと速さが求められ、その部分をサポートするツールが必要となるからだ。そのためのツールがWebオーサリングツール（Webサイト作成ツール）と呼ばれる開発環境である。
■ しかし、有償のWebオーサリングツールを購入するには抵抗がある
一般的にWebオーサリングツールといえば、例えば、AdobeのDreamweaverやGoLive、MicrosoftのExpression Webなどの有償のものを指すことが多い。もちろん、これらの製品はコーディングという業務を素早くできるなど、そのメリットは計り知れないものであるが、金額の多少はあれども製品を購入することにより、そのメリットを享受している。そのため、「まずはHTMLやCSSに触れてみよう」という段階のうちは、製品の購入には少なからず抵抗感があるのではないか。
 |
| 画面1 Dreamweaver CS3の使用例（画像をクリックすると拡大します） |
そこで本稿で紹介するのが、「無償の」Webオーサリングツールである。有償のものと比較すると、見劣りする部分も少なからずある。しかし、テキストエディタで開発を行うのとでは、開発速度に格段の差が出ることは間違いない。本稿では、そんな無償のWebオーサリングツールにスポットを当ててみることにしよう。
Eclipseプラグインタイプも用意されている ― Aptana
AptanaはEclipseベースのオーサリングツールだ。そのため、単体インストール版とEclipseへのプラグイン版の2タイプが存在する。インストールの際にJava環境の同時インストールが必要なので、環境構築という点では若干手間が掛かるが、デベロッパーのユーザーが多いEclipseベースのため、開発環境としての完成度が高いことが特徴だ。
 |
| 画面2 Aptanaの使用例（画像をクリックすると拡大します） |
■ HTML初心者にも優しい
基本的なコード編集機能やプレビュー機能が用意されるほか、初心者への分かりやすさが配慮されており、キー操作がまとめられたキーアシストメニューが用意されるなど、初めてHTMLに取り組む方にも優しいところは非常に好感が持てる。
Java環境下でアプリケーションを動かすため、マシンスペックに余裕のある状況が望ましい点が惜しまれるが、すでにEclipseでのコーディングを経験しているプログラマなどにとっては、なじみやすいオーサリング環境といえるだろう。
■ iPhoneやAdobe AIRの開発もサポート
また、このAptanaには、iPhoneやAdobe AIRの開発をサポートするプラグインも存在する。
 |
| 画面3 MacOSX版Aptanaの使用例（中央の初期画面にはiPhoneやAdobe AIRのプラグインの説明が見える）（画像をクリックすると拡大します） |
Adobe AIRについて知らない読者のために説明すると、Adobe発の新しいリッチクライアントソリューションで、以前はコードネームのApolloで知られていて現在注目を浴びている。これはなぜかというと、Adobe AIRはこれまでに多くあったようなWebブラウザのプラグインではないため、Webブラウザ制約を超えるソリューションとして注目を浴びているのだ。また、Adobe AIRはFlex Builder、Dreamweaver、Flashなどでも開発できるなど、開発環境も充実しているのが、特徴的だ。
日本発のVectorベストオンラインソフト ― ez-HTML
筆者は日本発のフリーHTMLエディタとしてもっとも有名なのは、このez-HTMLではないかと考えている。過去にVectorでベストオンラインソフトに選ばれるなど、ユーザーの評価も高い。
 |
| 画面4 ez-HTMLの仕様例（画像をクリックすると拡大します） |
■ HTML Lintやヘルプ的なサイトとの連携が特徴的
一番の特徴は、「各種フリーウェア／サイト」との連携であろう。例えば、最近発売されたDreamweaver CS3などでも、関連製品との連携が強化された部分として挙げられているほど、開発の効率化に重要なのが、さまざまな機能との連携である。
ez-HTMLでは、機能的な面もさることながら、ヘルプ的なサイトとの連携、HTML Lintによる文法チェックなど、サイト構築の際に必要となる部分が広くサポートされていることが、特徴的だ。
■ DreamweaverやExpression Webより優れている点も
DreamweaverやExpression Webなどの製品と比較しても優れている部分として、システム開発をサポートする「Perl／CGI編集機能」がある。「ActivePerl」や「AnHTTPd」などとの連携により、ローカル上でCGIの確認が可能なのだ。
Expression Webには、ASP.NETの確認が可能な開発サーバが含まれていたり、AdobeもColdFusion開発サーバを用意するなど、各社ともシステム開発のサポートは重要なファクターの1つとなっているが、Webという視点で見た場合に、開発者の多いCGIがサポートされている点は積極的に選択するポイントの1つになるだろう。
1/3 |
 |
| INDEX | ||
| Webオーサリングツールを使ってみよう：特別編 業務で使える！ 無料Webサイト作成ツール集 |
||
 |
Page1 Webサイト開発はテキストエディタだけで行えるのか？ Eclipseプラグインタイプも用意されている ― Aptana 日本発のVectorベストオンラインソフト ― ez-HTML |
|
| Page2 Firefoxプラグインでリアルタイム編集 ― Firebug CSSの確認もできるFirefoxプラグイン ― View formatted source IEプラグイン ― Internet Explorer Developer Toolbar |
||
| Page3 Web上でかんたんサイト構築 ― Google Page Creator シンプルでベーシック ― StyleNote Windows環境でCSSコーディング ― CSSVista ほかにも無料Webサイト作成ツールはいっぱい |
||
 |
リッチクライアント＆帳票 全記事一覧へ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
