/HVVRQ オープンソース ツールを使用した Webページの作成 目標 このレッスンでは次のことを学びます。 X/HTMLコードを記述することによる、テキストと画像を含む静的な Webページの作成 X/HTMLを使用した、Webページへの画像ファイルの挿入 X/HTMLテキストエディタを使用したサイト開発とGUIサイト管理アプ リケーションを使用したサイト開発の比較 XHTML 1.0 Transitionalを含むW3C準拠コードを開発するためのサ イト開発アプリケーションの設定 © 2010 by NEPRO JAPAN Co., Ltd. Copyright © All rights reserved｜ ｜ CIW Web Design Specialist 解説編 2 オープンソースツールを使用したWebページの作成 ｜ ｜ /HVVRQ スキルチェック問題 無料のHTML検証サービスを提供し、数多くのオープンソースおよび独自仕様の アプリケーションで使用されている標準規格を策定している組織は次のどれで すか。 D Mozilla Foundation E W3C（World Wide Web Consortium） F Adobe G IETF（Internet Engineering Task Force） / H V V R Q <img>タグのalt属性は何のためにありますか。 開発するサイトで、XHTML 1.0 Transitionalなど、HTMLまたはXHTMLの標準的 なバージョンを一貫して使用するには、どうすればいいですか。 © 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved｜ ｜ CIW Web Design Specialist 解説編 2 087 オープンソースのWebオーサリングツール 多くの場合、オープンソースのアプリケーションは企業および基金の支援を受けて開発 者のコミュニティによって作られます。オープンソースのアプリケーションは、多くの場合、 無料のオープンソースソフトウェア（FOSS）として利用できます。つまり、コンパイルされ たアプリケーションおよびソースコードを自由に利用できます。コンパイル済みのアプリ ケーションは販売されて、ソースコードは無料で提供される場合もあります。場合によって は、オープンソースのアプリケーションを提供する企業またはグループはアプリケーション を無料で提供し、サポートサービスを販売することもあります。 オープンソースのWebオーサリングツールおよびテキストエディタの多くに、優秀なデ ザイナが必要とするほとんどの機能が備えられています。オープンソースのWebオーサリ ングツールは、企業が開発したエディタと比べると機能が劣ることもありますが、多くの場 合、ほとんどのタスクに対応可能な「 十分な機能を備えている」と考えられます。 一般的な機能 ほとんどのオープンソースのエディタで提供される機能には、企業が開発したWebオー サリングツールと同じ機能が備えられています。 • ワードプロセッサ型のインタフェース ― コンテンツを入力し、コードではなくページの ルックアンドフィールに集中できる簡素化されたインタフェースです。 • HTMLコード編集 ―「コードモード」に変更して入力したタグを表示する機能です。 • ページをアップロードする機能 ― 通常、アプリケーションに認証情報（ ユーザー名お よびパスワード） 、および使用しているWebサーバーのIPアドレスまたは名前を提供 する必要があります。 • コード検証 ― コードのエラーを確認する機能です。 • スペルチェック ― ほとんどのエディタは、新しい単語をインポートできる基本的なス ペルチェッカーを備えています。 • 既定のコード選択 ― 多くのエディタでは、自動的にHTML 4.01またはXHTML 1.0に 設定されます。通常は、さまざまなオプションから選択できます。 • プレビューモード ― 作成しているページを好みのブラウザに表示する機能です。 • CSS編集 ― CSSページを作成する作業はWebページを作成するのとは別の作業で 088 CIW Web Design Specialist 解説編 2 ｜ ｜© 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved オープンソースツールを使用したWebページの作成 ｜ ｜ /HVVRQ す。オープンソースのWebオーサリングツールでは、多くの場合、個別のCSS編集機能 を提供することで、これに対処しています。 • コードを挿入する機能 ― Webオーサリングツールでは、JavaScript、Java、PHPなど のコードを挿入できます。 • 色の選択 ― Web対応の色を選択する機能です。 • タグ補完 ― エディタは、ユーザーが入力し始めたタグを自動的に認識し、必要なタグ および属性をすべて挿入します。 • 検索 ― ページ内でタグやコンテンツを簡単に見つける機能です。 • コード選択 ― ほとんどのアプリケーションでは、HTMLまたはXHTMLのさまざまな バージョンから選択できます。通常はHTML 4.01 Strict、XHTML 1.0 Transitional、 またはXHTML 1.0 Strictから選択できます。ほとんどのGUI HTMLアプリケーション の開発者は、開発者がしなければならないのはHTMLまたはXHTMLのバージョンを / H V V R Q 選択し、それを使い続けることと認識しています。最新バージョンのHTMLまたは XHTMLを使用することを推奨しますが、一貫性を維持し頻繁に検証することの方が 重要です。 • テンプレートの選択 ― テンプレートとは、特定のルックアンドフィールを使ってWeb サイトの構築を開始できる既定のドキュメントです。多くのエディタでは、既存のテン プレートを選択したり、新しいテンプレートを作成したりできます。 多くの場合、企業が開発したエディタより、オープンソースのエディタの方がW3Cコード 標準を遵守しています。 オープンソースのアプリケーションの欠点 オープンソースのWebオーサリングツールには、次のような問題がある場合があります。 • 限定された機能 ― 企業が開発したエディタの多くは、ページレイアウトのタスクを単 純化する機能を備え、アクセシビリティに関するヒントを提供したり、そうでない場合 には設計上のアドバイスを提供したりしています。オープンソースのアプリケーション は、コードの作成を重視する傾向があります。たとえば、ほとんどのオープンソースの エディタでは、ウィザードやステップバイステップの機能は用意されていません。これ は、ユーザーが自分の仕事において正しい決定を下すのに必要な知識を持っている ことが想定されているからです。 © 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved｜ ｜ CIW Web Design Specialist 解説編 2 089 • グループ編集機能のサポート不足 ― 多くのオープンソースのアプリケーションでは、 複数のユーザが1ページを作成するために別々に作業することができません。これら のアプリケーションでは、企業がバージョン管理システム（CVS）などの管理システム を使用していると想定しています。 • 開発者の問題 ― ユーザが使用しているオープンソースのアプリケーションを作成し サポートしている開発者のグループが、アプリケーションのサポートを停止する場合 があります。また、更新の提供が非常に遅かったり一貫性がなかったりする可能性も あります。そのため、最新バージョンのHTMLを使用したい場合に問題が発生する場 合があります。 • 不安定なサポート ― プロジェクトリーダーまたはグループ全体が、アプリケーション のすべての開発を中止することを決定する場合があります。あるいは、更新の公開が 遅い場合もあります。うまく機能しているオープンソースのプロジェクトでは、通常、 コードの更新は技術的な理由から行われます。これに対して、独自仕様のソフトウェ アを開発している従来の企業では収益を得る必要性から行われます。 Webオーサリングツールとテキストエディタの比較 すべてのWeb技術者は、手作業でコードを編集する準備をしておくべきです。また、 Webオーサリングツールには、長所と短所があることを理解することが重要です。Webオー サリングツールの長所の1つは、Web制作者の役に立つヒントやアドバイスをエディタか ら得られることです。別の利点は、人気のある独自仕様の技術と統合できることです。たと えば、Adobeスイートでは、開発者はHTMLの編集からFlashプレゼンテーションの作成に 素早く切り替えることができます。Microsoft Expression Studioにも同様の機能が備えら れ ており、HTMLエ ディタをSilverlightと連 携させることが できます。Silverlightは、 MicrosoftによるFlashへの対抗製品です。 Webオーサリングツールの欠点の1つは、コード変更に関する問題です。一流の企業が 販売している成熟したアプリケーションでも、企業が開発したコードや製品固有のタグが 挿入されます。一部のオープンソースのアプリケーションでも同様です。また、これらのア プリケーションのほとんどにおいて、何らかの理由で不適当と見なされるコードが挿入され たり置き換えられたりします。Webオーサリングツールでページを開く予定の場合は、ペー ジのバックアップを作成するようにしてください。 Webオーサリングツールのもう1つの短所は費用です。無料のオープンソースのアプリ ケーションを使用していない限り、使用する機能に対して料金を支払う必要があります。 企業は、次の製品バージョンにアップグレードするように強力な説得を試みるため、定期 090 CIW Web Design Specialist 解説編 2 ｜ ｜© 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved オープンソースツールを使用したWebページの作成 ｜ ｜ /HVVRQ 的に追加費用が発生することになります。 次に一般的なオープンソースのエディタについて簡単に説明します。この説明は、企業 が開発したアプリケーションと比較して、オープンソースのアプリケーションの長所と短所 を判断するだけでなく、GUIベースのHTMLエディタとテキストエディタの違いを判断する のに役に立つはずです。 Kompozer 図23-1に示すKompozerは、簡単で便利なWebオーサリングツールです。 / H V V R Q 図 23-1 オープンソース Kompozer GUI HTML エディタ Kompozerの詳細とアプリケーションは、http://www.kompozer.net/ で入手できます。 OpenWebSuite OpenWebSuiteは、もう少し高度なWebオーサリングツールです。OpenWebSuiteでは、 （コードを挿入する時間を節約するために設計された）コード補完機能およびコードとコン テンツを簡単に見つけることができる検索機能が提供されます。マクロも備えられている ので、頻繁に使用するコードをドキュメントに挿入する処理をメニューから選択できます。 この機能により入力作業を減らしながら、HTMLコードに挿入する内容をある程度は管理 できます。OpenWebSuiteの別のコンポーネントに、ユーザが定義可能なブラウザプレ ビュー機能があります。複数のブラウザを構成できるため、Webページをプレビューする ブラウザの種類だけでなく、ブラウザのバージョンを自由に選ぶことができます（Firefox © 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved｜ ｜ CIW Web Design Specialist 解説編 2 091 2、Firefox 3、テスト対象にするIEの特定のバージョンなど） 。 OpenWebSuiteの詳細については、http://en.openwebsuite.org/ で入手できます。 Firefoxのアドオン Firefoxで最も魅力的なのは、Webページの表示だけでなく、作成にもFirefoxを使用で きることです。これは、 アドオンと呼ばれるFirefoxの拡張機能を使うことで可能になります。 これらのアドオンは業界基準に準拠して開発されており、通常、アドオンを作成しているの は個人の開発者やデザイナーたちです。企業がアドオンを作成することもありますが、設 計や開発に日々従事している人たちを支援できるように注意が払われています。 次にWebデザインと開発の業界で受け入れられている拡張機能の例を2つ挙げます。 ■ Firebug Firebugを使用すると、Firefox Webブラウザを使用して任意のページを編集できます。 Firebugでは、コードの編集、CSSタグの挿入、およびコードの検証を行えます。また、ペー ジ内の個々の要素を検証するだけでなく、ページが使用するDOM（Document Object Model）の各要素を識別できます。図23-2に、Firebugを使用して編集中のCIWコミュニ ティサイトのページを示します。 図 23-2 Web ページを編集するのに Firebug を使用 Firebugの別の便利な機能に、特定のページをダウンロードするのに、どれだけの帯域 幅が必要かを測定する機能があります。この機能は、エンドユーザ経験の品質を判断する 092 CIW Web Design Specialist 解説編 2 ｜ ｜© 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved オープンソースツールを使用したWebページの作成 ｜ ｜ /HVVRQ ときに特に役に立ちます。何といっても、ページをできるだけ速くダウンロードしなければ、 ユーザの関心を失う可能性があります。ほとんどのユーザは、ページが表示されるまでに 3 〜 4秒より長く待ちたいと思っていません。ページをダウンロードするのに長い時間が かかれば、ユーザーは別のサイトに移動する可能性があります。 Firebugの詳細については、http://getfirebug.com/ を参照してください。 ■ Web Developer Web Developerアドオンは、かなり高度なアドオンです。HTMLエディタに期待される HTMLおよびCSSの標準的な編集オプションに加えて、次のことが可能になります。 • 画像の属性の表示 ― <img>タグ内のalt属性には、画像の説明を挿入できます。これ は、障害のあるユーザーだけでなく、検索エンジンの役にも立ちます。検索エンジン は、検索結果に表示するページにランキングを付けるのに、この情報を使用します。 • ブラウザウィンドウを好みの解像度に変更 ― 開発者として、開発する各ウィンドウの / H V V R Q 解像度に常に注意することが重要です。Web Developerを使うと、解像度をテストで きます。 • クッキー ― 情報を表示した操作 • ページ要素の選択的な表示 ― ページのコード、説明文、コメント、または他の要素を 表示できます。 • W3Cのコード標準だけでなく、WAIおよび508条の標準に対してコードを検証します。 図23-3に、ページにリンクを表示できるようにするWeb Developerアプリケーションの 機能を示します。 © 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved｜ ｜ CIW Web Design Specialist 解説編 2 093 レッスンのまとめ ■応用プロジェクト GUIエディタではコーディング時間を大幅に節約できますが、経験豊富な多く のWeb開発者は、Webページをより自由に制御できるという理由で、独自のX/ HTMLコードを作成する方を好みます。開発者は、Kompozerなどの高度なコード 編集ツールを使用すれば、一部のコード作成プロセスを自動化して時間を節約し ながら、自由な制御を維持することができます。OpenWebSuiteなどのKompozer などの他のオープンソースエディタに関しての詳細は、以下のURLでご確認くだ さい。 • http://www.kompozer.net/ • http://en.openwebsuite.org/ • http://sourceforge.net/ • http://freshmeat.net/ あなたは、Webページ作成プロセスを強化するさまざまなアプリケーションを 使用した経験から、機能、インタフェース、利点と欠点を比較することができます。 使用しやすいツールおよび方法はどれですか。また、それはなぜですか。 デザインに集中できるように、コードはアプリケーションに作成してもらいたい ですか。それとも、ファイルのコードは、より自由に制御したいですか。Web開発 において、最も時間がかからないものを使用しなければならないなどの時間的制 約がありますか。それとも、プロジェクトには、すべての要素をゼロから作成する のに十分な余地がありますか。どのようなスキルおよびリソースを利用できます か。学びたいスキルおよび技術は何ですか。 ■スキルの確認 このレッスンでは、オープンソースのツールを使用してX/HTMLコードを作成 することを学びました。必要に応じて、これらのツールを使用して複雑なWebペー ジを作成できます。Kompozer、jEdit、およびNotepad++ のファイル管理機能につ いても学びました。また、開発プロジェクトで適切な既定のテンプレートを使用す ることの重要性、および適切なX/HTMLのバージョンを選択する方法についても 詳しく学びました。最後に、オープンソースのツールを使用してコード検証とスペ ルチェックを実行する方法、および<img>タグのalt属性を使用して画像が適切に 挿入されたことを確認する方法について学びました。 102 CIW Web Design Specialist 解説編 2 ｜ ｜© 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved オープンソースツールを使用したWebページの作成 ｜ ｜ /HVVRQ レッスン23 復習問題 <img>タグのalt属性を使用することが重要なのは、どうしてですか。 オープンソースのWebオーサリングツールとベンダのオーサリングツールを比 べたとき、W3C推奨規格により柔軟に対応しているといえるのは、どちらです か。またその理由を挙げてください。 適切なスペルと文法を用いたページを作成することが重要なのは、どうしてで すか。 顧客から電話があり、あなたが設計したサイトは、顧客が期待した外観や使用感 / H V V R Q とは違うと苦情を言われました。サイトが完成したときの外観をあらかじめ顧 客が確認できるようにするには、どのようなツールを使用すればよかったので しょうか。 オープンソースのWebオーサリングツールには、どのような潜在的な欠点と利 点がありますか。 © 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved｜ ｜ CIW Web Design Specialist 解説編 2 103
© Copyright 2024 Paperzz
