ユーザグループについて*
テンプレートにリンクを設定する。サイトの設定をする。テンプレートを編集する。
コードビューでのタグ挿入
タグ選択ボタンによるタグ挿入
ウェブログを再構築する。
印刷用に表示
ウェブログが注目されている理由は、以下に挙げられるように、ウェブにおける表現の自由が個人レベルまで高められた点にあります。誰もがカンタンに投稿し即時にウェブ公開できる。ウェブサイトの更新情報を RSS 技術により効率的に配信できる。検索エンジンとの親和性が高い。Movable Type (ムーバブル・タイプ) は、シンプルでカスタマイズ性が高いと定評のあるウェブログ作成ソフトウェアです。図1のように投稿データと出力用のテンプレートを個別にデータベースへ格納し、公開のタイミングにデータベースより取得した投稿データとテンプレートを使い、XHTML とスタイルシートを自動生成します。これまで、Web 制作を自社で行わない企業などは、デザインの変更・ウェブコンテンツの更新作業を Web の制作会社に依頼しなければなりませんでした。結果、制作会社へかかる負担は大きいものとなり、タイムリーに情報発信ができないなどの問題がありました。Movable Type は、Web コンテンツの更新作業がウェブブラウザだけででき、テンプレートのデザインもコンテンツとは別に管理されるため、制作会社はテンプレートデザインに集中でき、更新作業を改善できます。0 に準拠した仕様です。本記事では、本拡張機能の特長とテンプレートのカスタマイズについてご紹介します。
この記事に必要なもの
このチュートリアルをフォローするには、つぎのソフトウェアがインストールされている必要があります。
拡張機能のダウンロード
著者について
) の日本法人として、ニフティ株式会社の個人向けウェブログ・サービス「ココログ」や NTT コミュニケーションズ株式会社の個人向けウェブログ・サービス「ブログ人(じん)」向けをはじめとして 13 社に、「TypePad」を供給しています。1 日本語版」を、個人ユーザーから企業ユーザーまで、幅広く提供しております。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
2 によるテンプレートカスタマイズについて | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
テンプレートにリンクを設定する。サイトの設定をする。テンプレートを編集する。
コードビューでのタグ挿入
タグ選択ボタンによるタグ挿入
ウェブログを再構築する。2 をダウンロードする。
印刷用に表示
2 によるテンプレートカスタマイズについて
ウェブログが注目されている理由は、以下に挙げられるように、ウェブにおける表現の自由が個人レベルまで高められた点にあります。誰もがカンタンに投稿し即時にウェブ公開できる。ウェブサイトの更新情報を RSS 技術により効率的に配信できる。検索エンジンとの親和性が高い。Movable Type (ムーバブル・タイプ) は、シンプルでカスタマイズ性が高いと定評のあるウェブログ作成ソフトウェアです。図1のように投稿データと出力用のテンプレートを個別にデータベースへ格納し、公開のタイミングにデータベースより取得した投稿データとテンプレートを使い、XHTML とスタイルシートを自動生成します。これまで、Web 制作を自社で行わない企業などは、デザインの変更・ウェブコンテンツの更新作業を Web の制作会社に依頼しなければなりませんでした。結果、制作会社へかかる負担は大きいものとなり、タイムリーに情報発信ができないなどの問題がありました。Movable Type は、Web コンテンツの更新作業がウェブブラウザだけででき、テンプレートのデザインもコンテンツとは別に管理されるため、制作会社はテンプレートデザインに集中でき、更新作業を改善できます。0 に準拠した仕様です。2 (以下、本拡張機能と称します。本記事では、本拡張機能の特長とテンプレートのカスタマイズについてご紹介します。
この記事に必要なもの
このチュートリアルをフォローするには、つぎのソフトウェアがインストールされている必要があります。
トライアルのダウンロード
拡張機能のダウンロード(著者について
) の日本法人として、ニフティ株式会社の個人向けウェブログ・サービス「ココログ」や NTT コミュニケーションズ株式会社の個人向けウェブログ・サービス「ブログ人(じん)」向けをはじめとして 13 社に、「TypePad」を供給しています。1 日本語版」を、個人ユーザーから企業ユーザーまで、幅広く提供しております。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ドラえもんの四次元ポケットのようなUIが欲しい。MTのテンプレートをカスタマイズする。
導入事例:栃木・蔵の街かど映画祭 公式ブログ
印刷用に表示
ドラえもんの四次元ポケットのようなUIが欲しい。趣味のクルマ遊びを中心とした内容で、3年近く続けています。その間、書いた記事はかなりの数となり、テーマ別に分けたカテゴリ項目も増える一方でした。最初の頃は、ブログのサイドバーに図1のようなカテゴリウィジェットを置いていました。しかし、カテゴリやサブカテゴリの数が多いために、非常に縦長なリストとなり、常にサイドバーを占有していました。かといって、ユーザビリティのことを考えると設置しないわけにもいかず、定期的にカテゴリの統廃合を繰り返して、なるべく長くならないように工夫していました。手軽に情報発信できることがMTの売りなのに、その情報管理に苦労している。なんだか矛盾している感じです。
図1 カテゴリやサブカテゴリのリストをMT標準搭載の機能で設置したところ
Spry Menubarを使ってメニューバーを作り、そこからカテゴリやサブカテゴリにアクセスできるようになっています。サイドバーにカテゴリウィジェットを設置していた頃より、ページもスッキリして、何よりもカテゴリ管理に悩まされることがなくなりました。仕事の案件で使う技術の運用テストの場も兼ねているため、突然仕様変更することもあります。
できるだけ毎日更新するように心掛けていますが、最近趣味に使う時間がとれないのが悩み
著者について
ITベンダーやメーカーにてSE、コンサルタント、プロジェクトマネージャーなどの経験を積んだのち独立
さまざまな制約の中で、いかに「最大の効果」を創出するか
を常に追求している。
現在はWebサイトの企画・制作・運用・コンサルティングを中心に活動中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
PHPのインストール
サイトの作成
記事表示ページの作成(1)
記事表示ページの作成(2)
最近、あちこちで「blog」というキーワードを目にします。近いイメージとして日記サイトがあります。もちろん日記でも構わないのですが、どちらかと言えば日記というより、あるテーマについての論評に近いものです。あるトピックについて自分の意見をWebで公開して、コメントをもらったり、自分のサイト以外へも意見を公開できる仕組みが組み込まれています。blogは、無料で使えるblogツールの普及やプロバイダ、レンタルサーバーにおいてblogサービスが提供されていることで、国内でもユーザー数を増やしつつあるようです。次のような無料で使えるblogツールも有名です。blogに組み込まれる機能には次のようなものが考えられます。
記事へのコメント
記事の更新は、表示する記事をブラウザから投稿したり、更新、削除する機能です。記事へのコメントを含めて従来の日記サイトにも見られた機能です。トラックバックはサイト間の連絡手段を提供する機能です。リンクと比べて表現すると、リンクがこちらから一方的なものであるのに対し、トラックバックは相手にリンクしたことを伝えるリンクと言うことができます。トラックバックによって、記事のコメントを書いたことを相手に伝えたり、自分の記事についてコメントを書いているユーザーがどれくらいいるかを知ることができます。RSSフィードはblogだけでなく、サイト間でデータ提供を可能にする仕組みです。これはサイトの概要を表現するもので、記述形式が決まっているので、異なるサイトの更新情報をまとめて参照するという使い方ができます。blogでRSSフィードを提供することで、他のサイトに自分のサイトの最新情報をリアルタイムで表示してもらったり、ブラウザ以外のソフトでも記事を見てもらうことができるようになります。このうち、本稿では記事の表示までの手順を掲載しますが、「PHP+MySQL Web制作ガイド」では、これに加えて次の機能を組み込む方法を解説しています。
記事の更新(投稿、修正、削除)
管理ページへのアクセス制限
RSSフィードの作成
blogのようにブラウザからアクセス可能なアプリケーションは「Webアプリケーション」と呼ばれています。一般的なWebアプリケーションは次のような要素で構成されます。それぞれの要素について、何を選択するか(例:WebサーバーはApacheかIISか)、どのような手法を取るか(例:データはデータベースに格納するか否か)はいくつか選択肢があります。本稿では次のように進めていきます。
50)のインストール
8のインストール
20dのインストール
サイトの作成
注)各技術についてインストールするバージョンは書籍「PHP+MySQL Web制作ガイド」内のバージョンと一部異なります。また、みなさんが本稿を参照した時点での最新版と異なる場合がありますことをご了承ください。使用する各技術のドキュメントページは次のとおりです。適宜参考にしてください。次のページから上記作業の手順を順次紹介していきます。Webサーバーなどを既にインストール済みの場合もあるかと思いますので、各自必要な箇所を参考にしてください。
各技術の一括インストール
必ずしも最新バージョンがインストールされるわけではないので、あくまでテスト環境の構築向けですが、手早く環境を揃えたい方は検討してはいかがでしょうか
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷メディア用スタイルシートの作成
スタイルシートの順序
印刷用ページの設定
印刷用に表示
Webページの印刷方法について、様々な疑問が生じることがあります。
印刷用のシンプルなページを別に作成すべきでしょうか
あるいは、背景や画像を印刷するかどうかの判断を単にユーザに任せるべきでしょうか
カスケーディングスタイルシート(CSS)では、メディアタイプを利用して、1つのページのコンテンツを2種類の異なる方法で表示できます。この記事では、メディアタイプと、それを利用してコンパクトな印刷用ページを作成する方法について説明します。この記事では、実際にサンプルCSSページを作成しながらこれらの原則を学びます。
では始めましょう
この記事を効率良くフォローするには、次のソフトウェアやファイルが必要です。
この記事に必要な予備知識
CSSに関する多少の知識が必要です。
著者について
CSSと(X)HTMLに関する高度な技術者でもあり、創設したW3Conversionsは、企業のWebチームのトレーニングや社内のデザインを効率的な標準ベースのWebサイトに変換する業務においては、業界屈指の権威として認められています。さらに、ダイナミックなプレゼンテーションを行う講演者としても世界中で活躍しています。
時には、コーディング作業などのコンピュータ業務から離れ、スカッシュやビーチバレーで汗を流してリフレッシュすることも
80年代音楽の愛好家でもあります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
データベースへの接続
Dreamweaver上でPHPサイトの定義をする際、サイトファイルの場所としてリモートのサーバだけでなく、ローカルのハードディスクも指定することができます。また、ローカルとリモートサーバ間でのファイルやフォルダの移動手段も決めることができます。ただ、個人的な開発環境としてローカルでPHPを実行するだけであれば、リモートサーバを指定する必要はありません。それでは、以下のトピックを順に解説していきます。
作業フォルダの指定
テストサーバの設定
サンプルPHPファイルのコピー
作業フォルダの指定
Dreamweaverのメニューから「サイト/サイトの管理」を選んで、サイトの管理ダイアログボックスを表示します。「新規」ボタンをクリックして、「サイト」を選びます。サイト定義ダイアログボックスが表示されます。上部にある「詳細設定」タブを選びます。「サイト名」項目にWebアプリケーションの名前を入力します。「ローカルルートフォルダ」項目の右側にあるフォルダアイコンをクリックして、先ほど 「アプリケーション用のルートフォルダを作成」で作成したWebアプリケーション用のルートフォルダを選びます。「HTTPアドレス」項目には、WebアプリケーションにアクセスするためのURLを入力します。この記事ではWindowsとMacintoshそれぞれ以下のディレクトリにアプリケーションフォルダを作成しています。サイト定義ダイアログボックスを表示したまま、次のテスト用サーバの指定を行います。
テストサーバの設定
作業時にデザインビューでダイナミックコンテンツを生成して表示したり、データベースと連動させるには、PHPサーバが必要なのです。サイト定義ダイアログボックスの詳細設定で、左側にあるカテゴリーリストから「テストサーバー」を選びます。テストサーバに関する 項目が表示されます。「アクセス」ポッップアップメニューから「ローカル/ネットワーク」を選びます。「テストサーバーフォルダ」という項目が追加表示され、先ほどローカルルートフォルダ項目で指定したディレクトリが入力された状態になっています。このディレクトリは変更しないでください。「URL接頭辞」項目には、Webアプリケーションのページにアクセスする際に使用するURLを入力します。Dreamweaverは、作業中のページのテンポラリファイルを作成し、サーバ上の指定されたフォルダにコピーして、このURL接頭辞を使ってそのページをリクエストしてダイナミックコンテンツをライブ表示しています。「URL接頭辞」項目には、あらかじめURLが入力された状態になっています。もしそのURLが不適切であれば、正しいURLを入力してください。この記事では以下のURLがURL接頭辞となります。URL接頭辞は、特定のページのURLではなくフォルダとなります。なお、フォルダ名の大文字小文字は区別されますので注意してください。「OK」ボタンをクリックして、サイト定義ダイアログボックスを閉じます。また、「終了」ボタンをクリックして、サイト管理ダイアログボックスを閉じます。次の項目では、この記事のサンプルをセットアップする方法に付いて解説します。
サンプルPHPファイルのコピー
この記事のサンプルファイルをあなたのマシンの作業フォルダにコピーしてみましょう
サンプルをダウンロードして解凍します。cafe_phpフォルダ内のファイルとフォルダを、Dreamweaverでサイトを定義した際に指定したアプリケーションのルートフォルダにコピーします。サイトの定義も終わり、サンプルファイルもコピーしました。次のページでは、MySQLデータベースサーバとの接続について解説します。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
スニペットの使い方とSOY CMSのテンプレート記法について
印刷用に表示
この記事を最大限に活用するには、次のソフトウェアが必要です。2)にもとづき公開されている汎用のWebサイト向けCMSです。
2008年3月に正式版が公開され、現在はバージョン1
7bが最新のものとなっています。
ブログ型CMSとの違い
SOY CMSはコンテンツ(サイトの内容)をデザインおよびサイト構造から分離して管理、運営することを前提に設計されています。ブログ型のCMSでは、トップページ、アーカイブページなどのサイト構成と記事投稿により管理されるコンテンツがブログの構造にしたがって最初から紐づいており、ブログ以外の構造のサイトに導入するときは、いったんサイトの構造を再構成しなければなりません。それに対しSOY CMSでは、コンテンツをサイト内の任意のページの任意の場所に出力できるため、HTMLファイルによるサイト制作の場合と同様にサイトマップを自由に設計し、複数のページにまたがって表示されるコンテンツを設定することができます。サイト全体への導入はもちろん、新着情報の表示にだけに使う、ブログには他のCMSを使う、Flashサイトのバックエンドだけで使う、といった柔軟かつ部分的に利用することができます。図にあるような複雑なページ構成でも、簡単にCMS化できるのがSOY CMSの魅力の一つです。SOY CMSのインストールで、簡単に複数サイト/ブログを管理できる。SOY CMSはサイト構造が自由なだけではなく、一つのシステムで数の制限なく複数のサイト/ブログが管理できます。SOY CMSにおける「サイト」とは、任意の数のページ構造とコンテンツがセットになった管理上の最大の単位で、管理者はサイトごとに権限を設定します。システムにログイン可能な管理者であっても、管理権限の付加されていないサイトの編集を行うことはできません。また、SOY CMSでは一つのサイトの中にいくつでもブログを作成できます。たとえば、企業サイトで新着情報ブログと商品カタログブログを持ちたい、というような設定も可能です。制作者(管理者)と運営者それぞれのアカウントで管理/更新ができる。SOY CMSではサイトごとに管理者に付与される権限レベルによって、使用する管理画面も異なるものになります。つまり、サイト構築時やリニューアル時に使用する管理画面と普段コンテンツの編集のみ行う管理画面とが別になっています。日常の管理ではシンプルな必要最小限の情報しか表示されない画面を使用することで、運用上のストレス軽減や誤操作の防止を図っています。プラグインや専用アプリで簡単に機能拡張できる。
問い合わせフォームやメルマガ配信も
SOY CMSには「プラグイン」ならびに「SOY App(ソイアプリ)」という二つの拡張手段が備わっており、CMSの枠を超えた柔軟な機能追加が可能になっています。Webサイト制作で頻繁に利用する問い合わせフォームなどは「SOY Inquiry」という専用アプリケーションがあり、簡単にフォーム制作、フォームのデータ管理(CSVなどでの保存)を行うことができます。メルマガ配信には「SOY Mail」という専用アプリケーションがあります。双方とも、SOY CMSをインストール済みの環境に追加してインストールする形で利用することができます。2)で利用できます。SOY CMSには「テンプレート同期プラグイン」という、テンプレート情報をHTMLファイルに出力することができるプラグインが内包されています。このプラグインを使って、出力されたHTMLファイルに編集を加え、再度CMSに反映することができます。HTMLの編集にはDreamweaverを利用することで、これまでのサイト制作のノウハウを生かしてテンプレート制作を行うことができます。また、3月にリリースされたSOY CMSのDreamweaver専用スニペットを使うことで、テンプレート記法の記述も簡単に行うことができます。これらのTIPSについては後半でご紹介します。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
データセットオプションの説明
その他のコンテンツによるHTMLデータセットの作成
基本的なサンプル
zip*をダウンロードして展開しておいてください。このファイルは、基本的なHTMLとテーブルだけの単純なページです。注意:以下のコードスニペットでは、スペースを節約するため何行かのデータを省略してあります。このHTMLページは、我が惑星艦隊に所属する宇宙船のデータを表すものと思ってください。それでも、基本的なHTMLを書くことぐらいはできます。そこで、我が艦隊に関する様々な状態を記載したHTMLページを更新するよう、彼に命じました。このHTMLページは、ブラウザで開いて見ることができます。単なる平凡なHTMLテーブルです。
これをもう少し面白くできるかどうか、やってみましょう
この記事用に作成したフォルダで右クリックし、test1
htmlという名前の新規ファイルを作成します。<body>タグ内部にマウスを置いてクリックし、カーソルを移します。
次に、挿入ツールバーを探します(図1を参照)
表示されていない場合は、ウィンドウメニューで「挿入」を選択します。挿入ツールバーを探す。「Spryデータセット」メニュー項目をクリックします。
Spryデータセットウィザードが開きます(図2を参照)
Spryデータセットウィザードでデータソースを指定する。ここには様々なオプションがありますが、最初は単純な方法を使用します。データタイプはHTMLのままにします。データセット名は、ページに表示されるデータを一意に識別するために使用されます。これは変更する必要はありません。「検出」オプションもデフォルトの「テーブル」のままにしておきます。「データファイルの指定」の「参照」ボタンをクリックします。
htmlを選択すると、Spryは自動的にページをロードし、テーブルを探します(図3を参照)
ウィザードは自動的にHTMLファイルのページを探す。ご覧のように、HTMLテーブルのデータが検出され、各セルの値がプレビューされています。
テーブルの隣にある黄色の矢印マーカーをクリックすると、データプレビューセクションに値が入力されます(図4を参照)
値が入力されたデータプレビューセクション
「次へ」をクリックします。
ウィザードのこの部分では、データセットがページに表示されたときの動作を定義できます(図5を参照)
データセットがページに表示されたときの動作の定義
ここでは何もしなくてもいいのですが、いくつかの設定を変更しておくと役立ちます。それぞれに対して、タイプを「文字列」から「数字」に変更します。これで、データを正しくソートするのが容易になります。これで、ロードされたときにデータは艦名の順にソートされます。
「次へ」をクリックして、ウィザードの最後のページに進みます(図6を参照)
ページでのデータの使用方法の定義
このページでは、データセットがページでどのように使用されるかを定義できます。4つのオプションがあり、それぞれに詳しい説明が付いています。最初のデモでは、一番上の「テーブルの挿入」オプションを選択し、「完了」をクリックします。HTMLページは、次のようになります。ファイルを保存し、ブラウザで開きます。これは、SpryがHTMLをロードし、名前でソートしたことの証明です。次に見出しをクリックします。任意の列で、データを昇順または降順でソートすることができます。こうして、スタティックで単純なHTMLテーブルを、はるかに高機能なものに変換することができました。テーブルを編集して、Crew_Sizeなどの項目を変更してみてください。htmlにデータを追加してみてもかまいません。その場合、ブラウザのキャッシュをクリアするのを忘れないでください。メモ:ウィザードのステップ2に、「データキャッシュを無効にする」というオプションがあるのに気づかれたかもしれません。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
Spryを使った実験:ハイライト機能付き元素周期表 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Spryを使った実験:ハイライト機能付き元素周期表
Spryコミュニティの方なら、ここで使っているテクニックには興味を持っていただけると思います。この記事では、Spry周期表で使用しているコードの考え方や手法を段階に分けて解説しています。実際に Spry周期表を見て触ってみてください。ページの上部には、元素の特性などを記したリングボタンがあり、クリックすると該当する元素がハイライト表示されます。また、ツールチップを使って、元素へマウスオーバーした際に、その元素の詳細情報を表示するようにしています。元素のHTMLテーブルは、このSpry周期表と同じページに記述しいているので、ページのローディングも速いですし、コンテンツを検索エンジンにインデックスしてもらえます。また、元素のデータをHTMLテーブルにしておけば、作成するのが簡単だし、XML形式で用意する場合に比べてデータ編集も楽に行えます。しかもDreamweaverなどのツールを使ってデザインビューで編集することも可能です。このCSSのclass属性はハイライト機能にも利用します。ページの上部には、元素の特性などを記したリンクボタンがあり、クリックすると該当する元素がハイライト表示されます。また、ツールチップを使って、元素へマウスオーバーした際に、その元素の詳細情報を表示するようにしています。
データのテーブル
各元素のデータは、以下のようなHTMLテーブルで用意しています。テーブルの全体像は、「元素のHTMLテーブル」を見てください。ヘッダの行にはデータ参照時の名称を入れています。
詳細は後ほど
このようにHTMLテーブルで用意すれば、列を追加したり、元素を探したりすることが簡単に行えます。
ページのセットアップ
このサンプルでは、head要素内に以下のように記述します。jsには、HTMLテーブルをデータセットとして扱うためのコードが記述されています。jsには、ツールチップウィジェット用のコードが記述されています。jsにはハイライト機能で使用するコードが記述されています。cssファイルを開いてください。Spryでデータ参照して得る値とこれらのclass属性名が同じにしています。これらのclass属性を利用して、元素ボックスの背景色を指定しています。Spry周期表では、4つのデータセットを使用し、以下のように定義します。メインとなるデータセットです。このデータセットは、ページの上部にある「Period」リンクボタンのみで使用します。このデータセットは、ページの上部にある「Group」リンクボタンのみで使用します。もしこのコードがなければ、Spryは「Group」列の値をテキストと解釈し、適切に並べることができないかもしれません。もしこの設定がなければ、ドキュメント内に記述されている順番で表示されてしまいます。
このようにしている理由は、ページのローディング中、周期表は表示されません。ロード中は、Spryコードを隠しているのです。その代わり、HTMLテーブルが表示されます。周期表のHTMLマークアップはそれほど複雑ではありませんが、レイアウトやハイライト機能(リンクボタン)に関するロジックがたくさんあります。まずは、周期表のメインブロックから解説して、その後にハイライト機能について解説します。周期表は、基本的に1つ種類のdiv要素で構成されているといってもいいほどです。元素はたくさんあるのにマークアップはelement DIVが1つ分しかありませんが、Spryを使ってデータテーブルにある元素の数の分だけ、このdiv要素を繰り返します。これらのclass属性を利用して、各元素を特定したり、ハイライト効果を適用させているのです。cssに記述されています。div要素の各属性の役割は以下の通りです。tabindex属性に原子番号に基づいた固有の番号が振られるので、原子番号順にタブ操作で移動できるようになります。この属性は、ハイライト機能で該当元素以外をグレーアウト処理する際に使用します。cssを見てください。ハイライト機能のロジックだけで使用します。ツールチップに表示されている情報が、マウスオーバーしている元素の情報であることを確保するためのものです。Spry周期表は、2つのパートから構成されています。メインのテーブルと、下側にある2つの青い行です。これらのシリーズの元素は、常に別カラムとしてメインテーブルの下に置かれます。そして、この配置のために原子番号の並びが崩れてしまいます。元素ボックスの左上にある数字を見てください。メインテーブルの第6周期を見ると、57からいきなり72へとジャンプしています。第7周期でも同じように89から104へとジャンプしています。このロジックを説明すると、「No(原子番号)の値が58より小さい元素、71より大きくて90より小さい元素、103より大きい元素は、ここにプリント出力する」という内容です。また、このdiv要素内のbrタグは周期表レイアウトを実現する上で重要な役割を担っています。id属性は、先ほど「データセット」項目で解説したオブザーバーで使用します。これを周期表のように並べるには、適切なところで改行しなければなりません。改行する箇所の元素の原子番号が分かっているので、これを利用します。この原子番号を注意して見てください。背景色が緑色の元素の原子番号ではなく、その次ぎにくる元素、つまり各行の先頭にくる元素の原子番号です。ただ、行の並びは整いましたが、最初の3つの行(第1周期~第3周期)にあるギャップの部分が残っています。
第1周期~第3周期にあるギャップを作成
通常、周期表では、最初の3行(第1 周期~第3周期)にギャップがあります。このレイアウトを実現するには固有の元素名を用いたclass属性を利用して、CSSで制御します。具体的には、該当する元素に大きなマージンを指定して、右側に押しやるだけです。このように移動させても、floatが指定してあるので、水平方向の並びは保たれたままです。この記述だけで、3行のギャップを実現しています。用意した元素のHTMLテーブルには、先ほどのelement DIV内に入れた元素の情報量よりも多くの情報があります。ツールチップに表示する内容は、元素に合わせて変更しなければなりません。なお、ページのローディングが完了すると、Spryによってこのclass属性は取り除かれます。上記コードのハイライト部分はオブザーバーです。通常、オブザーバーを追加する要素はid属性で指定します。このclass属性を持つ要素にマースオーバするごとにツールチップが表示されます。element DIVにマウスオーバーするたびにツールチップが誘発されるのです。onmouseover属性が、現在の元素情報を更新して、オブザーバーが瞬時に新しいツールチップを構築するのです。これらは、周期表内の特定の領域をハイライト表示するためのリンクボタンです。このハイライト機能は、条件に該当しない元素をグレーアウトすることで、該当する元素が強調されるようにしています。つまり逆ハイライトです。jsに記述しています。該当するclass属性値がある場合は、そのままにしておきます。これで逆ハイライトとなります。もし、すでにclass属性「grayout」がある場合には、前回のハイライト時に追加されたものだと判断して、取り除きます。これらの関数は、ページ上部のリンクボタンがクリックされと実行されます。div要素は、ハイライト項目のリンクボタンを並べるためのコンテナです。最初のspan要素は、ハイライト項目を赤字にするためだけに使用しています。このようにしてハイライト項目のリンクボタンを生成しています。Spryを使って複雑なWebレイアウトを構築する方法としてのサンプルとして、Spry周期表を紹介しました。わずかなHTMLマークアップとCSS、そしてカスタム関数を使うことで、機能的でインタラクティブなツールができました。なかかいい実験サンプルだったと思います。これに興味を持って、みなさん自身でSpryを使っていろいろとアイデアを試してもらえるとうれしいです。
著者について
現在は、Contributeテクニカルサポートのプロダクトチームリーダーです。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
チュートリアルおよびすぐに使用できるデモアプリケーションはいずれも次の機能に対応しています。Spryで強化されたDreamweaverのページで、指定のディレクトリからイメージリストを生成するようPHPスクリプトに指示するようにします。目的のイメージサブディレクトリへのパスは、静的パラメータ(例、フォルダ名)または動的パラメータ(例、レコードセットから得られる値)の任意の配列にすることができます。これはコンテンツ管理システム(CMS)にSpryベースの「関連イメージの表示」機能を追加するための柔軟性のあるソリューションです。同時に、Spryテーブルが指定のディレクトリからイメージリストを作成するように、オンザフライのXMLデータとまったく同じSpryページに評価済みの情報を戻します。また、イメージ関連のデータ(URL、幅、高さ)やファイル関連のデータ(名前、日付、拡張子)のような並べ替え可能な様々な基準を提供します。同時にオプションで、現在のノードと値をすべて含む静的XMLファイルを作成します。このチュートリアルを完了するには、次のソフトウェアとファイルをインストールする必要があります。その他のサーバでも機能する可能性がありますが、検証されていません。PHP構成を次のように設定します。sqlファイルをインポートします。
この記事に必要な予備知識
Spryテーブルのウィジェットを使用したDreamweaverレコードセットの作成についてよく理解し、PHPの基本的な知識があることを前提とします。
ブラウザでのアプリケーションの外観
図1では、ID順に並べた関連イメージを、図2では、イメージ順に並べたイメージを示しています。完成されたアプリケーションでは、Spryテーブルのヘッダーをクリックして並べ替え基準を変更することができます。
ID順に並べられた関連イメージ
イメージ順に並べられた関連イメージ
サンプルアプリケーション:インストール、構成およびテスト
このチュートリアルは「articles」という仮想のコンテンツ管理システム(CMS)に基づいています。このコンテンツ管理システムでは、すべてのイメージは「images」という共通ディレクトリに保存され、各レコードセットには、そのレコードセットのarticle_idに応じた名前を持つ一意のサブディレクトリに保存された一連の関連イメージがあります。
一意のサブディレクトリに保存されたイメージ
サンプルファイルのインストール
zip)のコンテンツをこのディレクトリに解凍します。これらのサンプルファイルはこのチュートリアルの冒頭でリンク設定されています。サンプルファイルが正しくインストールされていれば、結果として生成されるディレクトリとファイル構造は図4のようになるはずです。
サンプルファイルのディレクトリ構造
データベーステーブルの設定
sqlファイル(サンプルファイルの「sql」サブディレクトリにあります)は、この新しいテーブルをデータベースに追加し、2つの関連するダミーレコードを挿入するために使用できます。phpMyAdminまたは別のデータベース管理ツールで作業をする場合は、インポート機能を使用してこのファイルをインポートします。
アプリケーションの構成
以下の説明では、すべての構成オプションについてあえて取り上げていません。まず、最初の段階では不要な詳細にとらわれずに、ローカルのテストサーバですぐに使用できる事前に構成されたサンプルアプリケーションを実行したいと思います。詳細については、このチュートリアルの最後の「デベロッパー向けの情報」の節で取り上げます。phpファイル(「scripts」ディレクトリにあります)を開いて、次の変数の初期設定値を変更します。
Dreamweaverサイトのサイト定義で指定されているように、テストサーバの「URL 接頭辞」設定に従ってこの変数の値を更新する必要があります(サイト定義の「テストサーバー」カテゴリを参照してください)
アプリケーションのテスト
それでは、アプリケーションをテストしましょう
phpファイルを開いて、ブラウザでページをプレビューします。このページはごく一般的なものです。」リンクのコアデータを表示する単なるリピート領域です。phpファイルは、それぞれのarticle_idに関連した「ディレクトリからのイメージリスト」を表示し、前述のイメージおよびファイルデータに従ってSpryテーブルをソートすることを可能にします。重要:既定では、このファイルはSpryライブラリが次の場所にインストールされていることを前提とします。js")を手動で変更する必要があります。php)の独自のバージョンを作成することに興味がある場合、また追加的な効果として、必要とされるデータベースクエリーの構築、Spryテーブルの挿入または構成を行う方法について意欲的に学習したい場合は、チュートリアルのこの節が役に立ちます。xml)の目的に関するヒントを得て、重要な詳細について学習することができるので、少なくとも読んで興味深いはずです。adobe_xml_imagelistディレクトリに保存することで、提供されたサンプルファイルに対してファイルのバージョンを確認する際の作業が確実に簡素化されます。これは、生成されるデータベースクエリーのコードまたは関連ファイルへのリンクが類似したものになり、結果として比較しやすくなるためです。
ただし、自分の制作物に「新規保存
」を実行して別の名前で保存することを忘れないでください。
phpファイルの作成
phpファイルを作成します。ページタイプをPHPに設定します。このページでは、高度なレイアウトを持たないシンプルなリストを表示するだけでよいので、「レイアウト:<なし>」オプションも選択することをお勧めします。ページのレイアウトがサンプルファイルと一致するようにするには、意味のある見出しの下に2行3列の中央揃えしたテーブルを挿入します。2番目のテーブル行は記事の「ID」および「見出し」の値を表示するように設計されているので、レコードセットの関連する動的テキストをセルに追加する必要があります。まだ表示されていない場合は、アプリケーションパネルを開いて、「サーバービヘイビア」タブをクリックします。
最も重要なページコンポーネントは、詳細ページをポイントする「more
」リンクになります。このリンクは対応するディレクトリのイメージを表示するために各article_id値を順に取得する必要があります。つまり、以下の手順を使用してリンクターゲットにパラメータを追加する必要があります。phpファイルを選択します。これを自分の詳細ページと置き換えます。
「パラメータ」ボタンをクリックして次の設定を定義します(図7を参照)
「値」フィールドの稲妻アイコンをクリックしてレコードセットの「article_id」を選択します。「OK」ですべてを確定し、ページに戻ります。
該当するフィールドを入力したパラメータダイアログボックスと動的データダイアログボックス
このリンクが正常にパラメータ化されたことを確認するには、「more
」リンク内の任意の場所でカーソルをクリックし、デザインビューウィンドウの下部にあるDreamweaverタグセレクタに表示される関連した<a>タグ上で右マウスボタンをクリック(MacではControlキーを押しながらクリック)します。ショートカットメニューのクイックタグ編集をクリックします。クイックタグ編集で次の内容が表示されます。Dreamweaverのタグインスペクタで2番目のテーブル行(動的テキストプレースホルダを含む行)をハイライト表示させ、「サーバービヘイビア」タブをクリックし、「リピート領域」を選択します。
phpファイルの作成
あなたが今何を思っているか当ててみましょうか
phpページの複製方法について説明すると思われているでしょう
しかし、このページについてまず詳しく説明するのには次のような2つの正当な理由があります。xml)を含む既存の有効なXMLファイルが必要です。これは、「オンザフライでXMLを生成する」動的ファイルでは、必要とされるXMLスキーマを提供することができないためです。そのため、まずこのような回り道をする必要があるのです。phpはこのページの単なる派生成果物で、唯一のわずかな違いである変更されたXMLソースから構成されます。このような理由により、まずこのページを作成して、後で「動的バージョンになる」ためのセカンダリとして保存することをお勧めします。以下の手順に従ってこれを行います。ファイル/新規を選択してレイアウトオプションのない空白のPHPページを作成します。phpページからarticle_idの値を取得するので、必ず次のように適切なフィルタ条件を定義する必要があります。アプリケーションパネルを開いて、「サーバービヘイビア」タブをクリックして「+」ボタンをクリックし、動的テキストメニュー項目を選択します。ここで非常に関連のある演習、つまりSpryテーブルの追加を行います。ただし、図で説明したほうが分かりやすいです。xmlファイルを選択します。「スキーマを取得」ボタンをクリックして、XMLの行エレメントのリストを生成します。図10に示されるように、イメージデータの行エレメントをハイライト表示させることで、Xpathフィールドが imagelist/imagedataに変更され、 さらに表示される行エレメントに一致するデータセット列のリストが作成されます。XMLデータが適切にソートされるようにするには、各データセット列に適切なデータタイプを定義します。値は次のとおりです。ページのロード時に自動的にデータをソートする場合は、ソートメニューから任意のエレメントを選択し、方向メニューから「昇順」または「降順」を選択します。提供されたサンプルデータは「ID」および「昇順」でソートされていますが、これは最近追加されたイメージを最初に表示させるための「ファイル時刻の降順」のような、より便宜的な並べ替え基準を定義できないということではありません。「ロード時に区別」、「XML データキャッシュ機能をオフに」および「データを自動更新」の各オプションを未チェックのままにすることをお勧めします。これらのオプションは動的に生成されたXMLを後でロードする場合に事実上意味をなさないためです。
適切に構成されたSpry XML データセットダイアログボックス
列パネルで、次の操作を行ってテーブル列を調整します。「–」サインをクリックして、表示させたくない列を非表示にします。上向き矢印または下向き矢印をクリックして列を移動します。列を上に移動するとテーブル内でさらに左に表示され、上に移動するとテーブル内でさらに右に表示されます。ソートの基準になる列を定義するには、[列] パネルで該当する列を選択し、[ヘッダーがクリックされたときに列をソート] を選択します。ソートの基準にする列ごとにこの作業を繰り返します。これを選択しなくても並べ替え可能なイメージリストでまったく支障はありません。シンプルなSpryテーブルを作成しているので、「行がクリックされたときに詳細領域を更新」オプションは未チェックのままにします。」というメッセージが表示されるので「はい」をクリックします。提供されたサンプルページで行ったのと同様に、テーブルの行揃えを「中央」に設定することで、生成されたSpryテーブルに視覚的な微調整を容易に適用することができます。それらの属性をタグに追加したい場合は、「破損イメージ」アイコンをクリックしてDreamweaverをコードビューに切り替えます。前述の基本的なイメージタグが既にハイライト表示されているのが確認できます。必要なのは、次のような足りない属性や値を追加することだけです。ご覧のとおり、これらの属性に値を割り当てることは、このページの別の場所にある既存のSpryデータ参照を単にコピー&ペーストすることです。このページを保存して、ページは開いたままにしておきます。xmlをローカルのテストサーバ環境に適応する必要があります。このXMLファイルには、images/2サブディレクトリにある既存のイメージをポイントする定義済みの3つのデータセットが含まれ、次の構造を提供します。このチュートリアルの準備中、正直なところDreamweaverのテストサーバの設定を予測することができませんでした。phpページをプレビューして大変な作業の成果を楽しんでください。
この辺で少し息抜きをしてもいいでしょう
phpとして保存します。
phpファイルの作成
前に約束したとおり、静的XMLデータによって構成される以前のページに動的な変化を与えることは非常に簡単です。必要なのは、このページをコードビューに切り替えて次のコードブロックに注意することだけです。
このコードブロックはドキュメントの<head>
ここで、元のファイルポインタを
次のファイルポインタに置き換えます。このコードを置換したので、これで完了です。注意:このページは独立して機能しないので、このページをブラウザで直接プレビューすることはできません。phpページをロードして、利用可能なarticle_id値のいずれか1つをこのページに渡してください。
デベロッパー向けの情報
一般的に特定の静的データを含む特定のXMLファイルからのみ値を取得する通常のSpry
XMLDataSetとは異なり、「それが依存する」ソースからイメージやファイルの関連データを取得するアプリケーションは、そもそもデータの物理的な場所、つまり、イメージを取得するフォルダを示しません。また、データの処理方法が分かりません。
どうしたものでしょうか
しかし、不安にならずに、単にその単調な作業をPHPが代わりに行うようにしてください。さらに、重要な機能であるデータの双方向交換を使用してください。php)間の仲介として実際に決定的な役割を果たしています。XMLDataSetオブジェクトの「データソース」パラメータは、静的XMLファイルで利用できないサーバ側のスクリプト機能、つまり参照されるPHPファイルへのパラメータの追加機能を利用するようにわずかに変更されます。
サーバルートから目的のイメージフォルダへの適切な相対ディレクトリパスを定義するには、一連のディレクトリパス情報(別名「ディレクトリドリルダウン」)をxml_imagelist
phpへURLパラメータとして送信します。phpファイルの作業ディレクトリをポイントします。2番目のパラメータpath_to_imagesに割り当てられた値は、前述の「メディエイタ」スクリプトの作業ディレクトリの下にある目的のイメージフォルダをポイントします。phpの2レベル下位にあるイメージディレクトリを指しています。
次に、静的情報および動的情報を有効なファイルのパス「images/<
>」に結合させます。私たちのサンプルファイルで使用したディレクトリドリルダウンの完全な仕様を以下に示します。このファイルは次の内容を同時に実行することで2つの機能を提供します。前述のディレクトリドリルダウン情報をscriptsフォルダにあるデータ処理ファイルに転送する。phpは確かに重要な役割を果たしますが、唯一の目的は単なる仲介役になることです。php)スクリプトを読み込むように指定するだけでよいのです。ある程度PHPに関する知識を持ったデベロッパーであれば、「なぜ、すべてのデータ処理機能を外部ファイルに散在させるのではなく、このファイルに集約してすべての機能を1つにまとめなかったのか」というもっともな疑問が生じるかもしれません。いい質問です。すべての機能を1つにまとめることは実際に可能でしたが、外部ファイルに分離することで、提供されたサンプルアプリケーションにとどまらず、独自の「ディレクトリからの動的イメージリスト」アプリケーションを作成したいユーザに何か重要なものがもたらされます。
phpファイルに変更を加えない状態で異なる構成ファイルを含める(後で分かりますが、これが推奨される方法です)だけで、xml_imagelist
phpの派生版を非常に簡単に作成できます。外部の構成スクリプトとアプリケーションのロジックスクリプトを使用することにはさらにもう1つの利点があります。つまり、コンテンツを含むscriptsフォルダ全体も、複数のスクリプトが中央のロジスティックにアクセスできるようにサーバ上の異なる場所に移動する可能性があります。独自のメディエイタスクリプトを作成する場合は、scriptsフォルダの変更後の場所に一致するように、「require」で指定するファイルパスの仕様を変更するだけでよいのです。指定されたファイルパスは常にメディエイタスクリプトに対して相対的であることに注意してください。
独自のメディエイタスクリプト作成に関する規則
図12で示されるように、提供されたアプリケーションロジックでは、scriptsフォルダとDreamweaverページの配置場所に関して最大限の自由が与えられます。
しかし、実際にはメディエイタスクリプトの物理的な配置場所に関して簡単な目安があります(次の両方があてはまります)
サーバルートに対してサブディレクトリが下位に少なくとも1つある。目的のイメージフォルダをポイントするディレクトリが上位に少なくとも1つある。
メディエイタスクリプトの物理的な配置場所に関する目安
イメージを取得するためにこのファイルが1つ以上のサブディレクトリをポイントするようにするという技術的な要件は、経験のあるPHPデベロッパーには明白であるかもしれません(@fopen関数は現在の作業ディレクトリから開始して、path_to_images変数で指定されたディレクトリにドリルダウンします)
しかしながら、このファイルをサーバルートに配置することを好むユーザもいます。残念ながら、サーバルートに配置する方法はうまくいきません。これは、アプリケーションロジックが、サーバルートの下に少なくとも1つのサブディレクトリを要求するように設計されているためです。
しかし、熟練したデベロッパーであることはすばらしいことではありませんか
すべて自分で変更することができるのです。phpに指示するための3つの変数が含まれています。次の変数はDreamweaverのサイト定義で指定されるURL接頭辞と同じである必要があります。次の変数は、リモートホストからアプリケーションを実行する場合に必要です。次の変数により前述のサーバ名のうち現在使用されているものが定義されます。オプションは以下のとおりです。
"a":ローカルサーバ名を使用
"b"または"":リモートサーバ名を使用
接続を決定する理由について疑問に思われているといけないので説明しますが、生成されたXMLデータはできる限り移動可能である必要があるので、アプリケーションをローカルのテストサーバまたはリモートWebサイトのどちらから実行しているかに応じて、すべてのイメージのSRC属性に使用する絶対ファイルパス(例、<img src="http://www
前述の接続ファイルに加えて、このファイルには8つの変数が含まれています。phpスクリプトにカプセル化される一般的なアプリケーションの動作を制御するように設定されています。このスクリプトで提供される初期設定値はサンプルアプリケーションの設定と一致しませんが、初期設定値を変更する必要はありません。変数に関する次の説明は、スクリプト自体の中にも記述されています。次の変数はHTTPサーバルートの下にある指定されたサブディレクトリをポイントしますが、正確なイメージURLを作成するためにも使用されます。Dreamweaverページで宣言されたファイルパスに従って次の変数を変更します。これは正確なイメージURLを作成するために使用されます。例えば、次のようになります。
次の変数は許可されるファイル拡張子のコンマ区切りのリストです(大文字と小文字は区別しません)
次の変数はファイル名の表示に影響します。"Y"はアンダースコアをスペースに置き換えます。ファイル名をそのまま表示するには空白("")にします。指定の文字で始まるファイル名は除外されます。すべてのファイルを許可するには空白("")にします。次の変数は最後に変更されたファイルです。好みに応じて表示形式を変更してください。よく使用される国際書式の一部は次のとおりです。次の変数は高度なオプションです。php)が現在のノードと値をすべて含む静的XMLファイルをさらに作成できるようにします。このオプションは既定で"N"になるので、この機能を有効にするために"Y"に設定します。作成されるファイル名は次の静的コンポーネントと動的コンポーネントを使用して構築されます。ハードコードされたアンダースコア(_)
スクリプトの「ファイルパス」
ハードコードされた接尾辞(「
XMLファイルが作成される、(Dreamweaverページから参照されるメディエイタスクリプトに対する)サブディレクトリを指定します。"に設定してスクリプトの作業ディレクトリにファイルを作成します。注意:指定したディレクトリに対して書き込み権限(例、755)を有効にしてください。これを行わないと、ファイルが生成されない場合があります。これは私がテクノロジセンタと呼ぶファイルです。指定したディレクトリのイメージはここにあります。読み込まれて、いわゆる「配列」に表示されます。イメージおよびファイル関連の条件がないかチェックされます。この条件は構成ファイルで決定した規則に従って書式設定されます。また、すべての関連データは動的XMLとしてレンダリングされます。
オンザフライで生成されるXML構造
完全なスクリプトコード
次のステップ
さらに別の実在アプリケーションの調査を試みて、そのアプローチと結果が他のデベロッパーによって有益なものであると見なされることを願いながら、Spryの比較的過小評価された機能の1つ、つまり、好奇心のあるデベロッパーが、慣れ親しんだサーバ側のスクリプト言語のスキルを使用して簡単に動作を追加できるオープン性を主に明らかにするためにこのチュートリアルを執筆しました。もちろん、説明された手法を個別に見てみると、どれも正直なところ目新しいものではありません。Spry framework for Ajax自体がXMLデータを処理するように設計されていることは周知の事実であり、ディレクトリからファイルコンテンツを取得する方法を学習することはPHPデベロッパーの基本的なスキルの一部です。私はアプリケーションの構築中に思いがけないことに気付きました。そのアプリケーションは最も完全なものではないかもしれませんが、それは実に、テクノロジ間の「ギブアンドテイク」を示す好例です。これは一般的なXMLの一方通行路ではなく、機能上の利益は相互的なものなのです。
このアプリケーションの一部の機能は、実生活においては、確かに現実的な試みというよりも「実現可能であるという仮説」に基づく実現可能性の調査と見なされるでしょう
このアプリケーションを顧客向けに開発する場合、「ファイルサイズ別」のようなイメージの並べ替え基準は「関連スライドショー」CMSモジュールの中ではまったく意味をなさないでしょう
しかし、あなたはにはできます。だからこそあなたはデベロッパーなのです。
それでは、ここからどこへ行くのでしょうか
理論上は、提供されたアプリケーションを改良したり、適当と思われるように機能を拡張したりする以外に、自由に選択できるオプションが多数あります。この考えだけでも簡単に適応させてイメージではなく動的な「関連ファイル」のリストを作成することができます。
また、この概念を拡張してSpryページング(バージョン1
5で導入)のような他の機能を採用する方法を探究することは確かに興味深いでしょう
このチュートリアルが好ましい追加的な効果を持ち、Adobeの従来からの最良の方法で物事の間の架け橋を築くという点で革新的かつ冒険的になることを働きかけるものであることを希望します。ありがとうございます。
著者について
また、23年ほど前から、ギター、ベース、バラライカ、バンジョーを演奏するフリーのミュージシャンとしても活動しており、音楽の講師をしたり、クラシックからパンクに至るまで、様々なジャンルのセッションの録音に参加したりしています。2000~2003年の間、Günterはいくつかの地方企業や団体(そのほとんどが製造業、劇場、芸術関係)をクライアントとして要求の厳しい本格的なWebサイトを作成する仕事を請け負っていましたが、次第に、PHPやデータベースインタラクションなどの興味をそそられた技術をこれらのWebサイトに組み込むようになりました。Günterはこれらの知識をコーディング、指示書やマニュアルの読み込み、入念なテストといった、彼が今もなお正しい道と信じている方法によって身につけましたが、それは決してたやすいことではありませんでした。2004年から、Günterは以前のクライアントであるトルコの不動産会社に就職し、そこでドイツの顧客のサポートと広告代理店の管理を担当しました。住宅を販売したり不動産展示会に足を運んだりもしましたが、主要な(むしろ自らに課したともいえる)仕事は、実際にはもっとクールなものでした。それは、多言語Webサイトの開発と、問い合わせ追跡などのさまざまなオプション機能が付いたカスタマイズ可能な不動産データベースの設計、さらには販売代理店やCMSシステムなどの同様にカスタマイズを必要とする分野にその技術を供給することでした。この期間、Günterは"Team Interakt"のメンバーとなりましたが、そのおかげで徹底的なトレーニングの場に身を置くこととなり、すばらしい人々と共同作業する機会を得ました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
以前、筆者は、デベロッパーセンターにCSSとDreamweaver 8を使ったテーブルのないレイアウトの作成という記事を寄稿しました。この記事では、より効率良くWebサイトを作成するためのDreamweaverのさまざまな環境設定と、作業スピードアップのための機能を紹介し、 フロート機能を使った2段組みレイアウトの作成方法についても解説しました。今回の記事では、前回の2段組みレイアウトを3段組みに変更する方法と、サイトの魅力度をアップするためのテクニックを紹介します。まだ前回のチュートリアルを読んでいないものの、その内容に対する基礎知識をお持ちの場合は、前回の記事で作成したXHTMLとCSS文書の完成版をこちらからダウンロード(ZIP, 4K*)して確認してください。
ではチュートリアルを始めましょう
旧バージョンのブラウザでも、レイアウトが正しく表示されることはありますが、これらのブラウザでの動作確認は行っていませんので注意してください。このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。
前回の記事の最後からスタート
前回の記事で完成したレイアウトに対して作業を行うので、ここで簡単にそのレイアウトを確認することにしましょう
とてもコンパクトで効率の良いレイアウトです。レイアウトには2列の段組みがあり、画像は含まれていませんが、すべてCSSで制御されています。
前回の記事で作成した2段組みのレイアウト
フロート機能の注意点について簡単におさらいすることにします。
フロートには必ず幅の設定が必要
フロートには左右の位置指定が必要(上下はありません)
特定の要素の横にフロート表示させるには、フロート部分のコードが、文書のソース上で、その要素より前に来るようにする。フロートがテキストやインライン画像に重ならないようにする。フロートの後にくるブロック要素に幅を設定する代わりに、フロートと同じサイドのマージン設定を利用する。フロートはドキュメントの「流れ」に反することがあるので、フロートを親コンテナが正しく内含するには、別のコンテナ内に含まれたフロートをクリアしなければならない。
3列目の追加
まず3列目を追加します。3列目も最初の列と同じようにフロートします。ただし、今回は右側に配置します。htmファイルを開きます。Dreamweaverの画面表示を分割ビューにし、デザインビューのナビゲーション部分のdiv内に、カーソルを配置します。タグセレクタの <div#nav> をクリックしてから、キーボードの右矢印キーを押します。挿入バーのレイアウトオプションを表示し、「Divタグを挿入」アイコンをクリックします。Divタグを挿入ダイアログボックス(図2参照)が表示されたら、IDフィールドにカーソルを配置し、newsと入力します。
Divタグを挿入ダイアログボックス
「新規CSSスタイル」ボタンをクリックします。
新規CSSルールダイアログボックスでは、セレクタタイプを詳細設定、セレクタを#news;、定義場所をdemo
cssにそれぞれ設定します。次に、右側の列に対して、基本的なプロパティとその値を設定します。筆者は次の項目を設定しました。Divタグを挿入ダイアログボックスが開いたままの状態なので、 ここでも「OK」をクリックします。これで新しい右側の列に対するルールが作成できました。(この作業は、前回のチュートリアルで紹介した要領でコードビュー上でも行えます。Dreamweaverでは、1つの作業に対して複数の操作法が提供されていることがよくあります。もちろん、このdivに、より多くのコンテンツを配置することで、divの領域がページの下へと拡張されますが、 図3をみれば分かるように、 #content divのテキストは #news divにテキストが含まれている部分だけを回り込んでいるに過ぎません。つまり、フロートのテキストがある部分に限り、重複が回避されているのです。試しに、表示/ビジュアルエイド/CSSレイアウトの背景を選択して(各divの背景にランダムに選択された色が付きます)、CSSレイアウトの各要素に背景色を付けてみてください。ここでは、明らかに、前回の記事で紹介した左の列と同じように、新しく作成した右の列を調整する必要があります。
この中のマージンの設定部分を現在の
から、次の値に変更します。表記をさらに簡素化することも可能です。この簡易表記は上下または左右の値が完全に一致する場合に限り有効です。
ルールの設定変更が完了すると、これで新しく作成した列が #content から独立するようになったことが確認できます(図5参照)
表示/ビジュアルエイド/CSSレイアウトのアウトラインを有効にしておけば、この状態が明らかに確認できます。
中央の列が完全に独立し、意図せず #news divの背後に流れ込んでいないことを確認するために、CSSレイアウトの背景を有効にしてみることにします(図6参照)
ビジュアルエイドのCSSレイアウトの背景を有効にした状態
いずれの場合も問題なく動作します。筆者は通常ナビゲーションを先に配置して、スクリーンリーダが容易にこの部分を認識できるようにしています。(また、同じ理由から"skip nav"リンクもこの位置に配置するようにしています。もちろん、現状では #news divが画面の右隅に追いやられているいるので、まだ列と呼ぶに値しません。ただし、正しい位置にスペースが確保できたので、 次に、この列に、コンテンツを追加してみることにします。
列のコンテンツの追加
中央の列に配置されているダミーテキストのうち、数段落(または任意のダミーテキスト)をコピーして、 #news div内にペーストします。この際、ペーストしたテキストがP要素の中にあることを確認してください。
以下に解説する内容は、右端の列のテキストを少なめにして、中央のコンテンツ領域より長くならないようにしておくと分かりやすいでしょう
暗い色の背景に黒のテキストを配置すると読みづらいので、demo
cssファイルに子セレクタを追加して #news divのP要素のテキストが白で表示されるようにします。これは、IE上で発生する問題に対していくつかの特殊ルールを作成する方が、標準規格ベースのブラウザで同じことをするよりはるかに簡単だからです。
では、ブラウザでページをプレビューし、ここまでの作業内容を確認してみましょう
ページに3列が表示されています。左端の列の境界線がページの一番下まで伸びていることが確認できるはずです。これにはちょっとしたテクニックを使っています。divは伸縮自由な入れ物のようなものなので、コンテンツが含まれている量だけそのサイズが拡張されます。したがって、ここで利用したテクニックは、中央のdivに、必ず左側のナビゲーションdivより多くのコンテンツが配置される場合に限り有効です。ほとんどの小規模サイトの場合、このテクニックが利用できます。
では、境界線を配置せずに、背景色を設定した右端の列はどうすればよいのでしょうか
右端の #news divはコンテンツ領域の最下部まで達しないことが想定されます(図7参照)
したがって、右側で利用した表現手法は利用できません。
つまり、ここでは手の施しようがないのでしょうか
だまし列の作成
皆さんは家にだまし絵を飾るのが流行っていた時代を覚えていますか
こう書くと筆者の歳がばれてしまうかも知れませんが、 ひととき、窓のないところにだまし絵の窓を描いたり、机の上に架空の花瓶などを描くといっただまし絵の絵画技法が流行していたことがありました。ここでは、このだまし絵からヒントを得たテクニックを利用することにします。ただし、絵の具の代わりに、ここでは画像を利用します。gif画像を利用してください。作業中のWebページの幅が760ピクセルに設定されているので、これと同じ幅のキャンバスを用意します。ここではリピートするスライスを作成するので、キャンバスの高さは10ピクセルもあれば十分です。筆者がFireworksを愛用する理由は、ベクトル関連の機能が豊富だからです。左側の列の境界線に使用されているものと同じ色(#877D6C)を選択し、左端から165ピクセルの位置に縦の線を描きます。この位置に正確に線を配置できない場合は、プロパティインスペクタの「X」フィールドに165と入力します。次に、右端の列の色(ここでも #877D6C )を指定して160ピクセル幅の四角形を描き、キャンバスの右端に配置します。gifとして書き出してから、このファイルをサイト定義時に指定した画像のディレクトリに配置します。ヒント:線と背景色を描く際に使用した値には、160ピクセル(外側の列の実際の幅)から165ピクセル( #content divに設定されたマージン幅)の間の任意の値が設定できます。筆者は、以前のレイアウト作業と完全にマッチさせるために、左側には #content divの左マージン幅(ボーダーが #content divに設定されているから)、右側には右列の幅(右列自体に背景が配置されているから)をそれぞれ設定しています。ここからが本題です。ヒント:repeat-yを設定すると、指定した画像がY軸方向(上下)に繰り返し表示されます。ブラウザでページの表示を更新し、結果を確認します。
これで、すべての列がページの下端に達するようになりました(図8参照)
しかも、フッターの部分にまで列構成が適用されています。(ヘッダーの色を削除すると、この部分にも列構成が適用されていることが確認できます。この画像は、背景色の指定されていない、すべての要素の部分に表示されます。デザインの趣向によって異なりますが、 #footer には背景色を指定せず、単に #content divと同じマージンを設定して、この部分のテキストをページの中央に配置したい場合もあれば、 逆に、以下に解説するように個別の背景色を設定したい場合も考えられます。
ページ全体に列が適用された状態
フッターの調整
CSSパネルの「プロパティ」ペインに表示されている「プロパティの追加」をクリックし、 Backgroundと入力するか、このプロパティをポップアップメニューから選択して、Enterキーを押します。カーソルが値の部分に移動するので、#FFFと入力して再度Enterキーを押します。
この際、CSSドキュメントが開いている場合は、このドキュメントの変更を保存するまで、デザインビューの表示とブラウザでのプレビュー表示に変更が適用されないので注意してください(図9参照)
ヒント:16進法色指定の簡易表記に慣れていない場合は次の解説を参考にしてください。3文字で色を指定すると、それぞれの文字が2度ずつ入力されたように扱われます。これは、6文字のうち最初の2文字が赤、次の2文字が緑、最後の2文字が青をそれぞれ表しているからです。赤緑青の各色文字に同じものが使われていない #822B56 や #ADADADのような色に対しては、簡易表記が利用できません。
フロートとクリアリングについての注意事項
フロートの注意点については、この記事の最初でも紹介しましたが、ここではそのなかのいくつかを目で追いながら確認することにします。フロートは、ドキュメントの一連の流れから独立した存在といえ、 それを内含する親コンテナが完全に制御できるものではありません。たとえコンテナ内にフロートが収まらなくても、親は、フロートがコンテナの下部を突き抜けることを阻止しません。親が完全制御できないという点は、一見、絶対配置された要素を連想させるかも知れません。しかし、この2つの間には重要な違いがあります。絶対的に配置された要素は、その親の左上隅(または最後に配置された要素)から始まります。一方のフロートはそれが配置されたページの流れの位置から始まります。ただし、これらはどちらも既出ではないため、全体の長さを把握することができません。絶対的に要素を配置する場合、長さの把握を強制するための策がありませんが、 フロートの場合は クリアリングという手法が利用できます。フロートをクリアする方法はいくつかありますが、筆者は親要素を閉じる直前にクリアリング用の要素を追加するテクニック( clear:both を #footer divに配置)を利用しています。前回の記事でも紹介した。
筆者は通常divを利用していますが、場合によってはbreakの方が適切なケースもあります(特定のブラウザのバグに対処しなければならない場面など)
このような場合、筆者は次のコードを利用しています。
解説だけでは分かり難いかも知れませんので、具体例を見ることにしましょう
(Mozillaベースのいずれかのブラウザを使って、以下を試してください。マウスを右クリックし、メニューから選択/HTMLコメントの適用を選択します。ページを保存します。これで、メインのコンテンツ領域より、そのそばの列のコンテンツの方が長い仮のページができあがりました。ページをMozillaベースのブラウザで開き、表示結果を確認します。
右端の列のコンテンツがフッターだけでなく、ページの終わりを超えて表示されていることが確認できます(図10参照)
つまり、 #holder divは、右端のコンテンツを自らのなかに収めなければならないということが、分からないのです。これでは見映えに問題があります。
また、もうひとつの問題点に気付かれた方もおられることでしょう
#footer には白の背景色が設定されているので、 この部分のテキストが読めなくなっています。これは、背景が白に設定されたページで大きな問題となります。また、このような状態ではテキストが所定の領域を超えて表示されているというよりは、一部のテキストがなくなっているか、切れているというように誤解することになります。
フロートをクリアしないことが原因でテキストがオーバーフローしている状態
Dreamweaverの画面を開き、先程指定したコメントの中からクリアリング要素だけをコメント外に戻します(残りのテキストはコメントされた状態にしておきます)
ブラウザを再度開き、ページのプレビュー表示を更新してみます。
すると、メインのコンテンツ領域のコンテンツの方が、フロートした列のコンテンツより長いにもかかわらず、 #holder がフロートした列を正しく内含するようになります(図11参照)
これで各要素のコンテンツが正しく配置され、 #content 領域の中に正しく余白が確保されています。(先程の場合は #holderより下に余白が確保されていました。)これはとても重宝するテクニックです。
フロートをクリアしてテキストのオーバーフローを修正した状態
この記事で視覚的に確認しておきたいもう1点は、フロート落ちに関する問題です。以前、 #content 領域に配置した要素が #content 領域の幅より広い場合、その要素がフロートのコンテンツより下に配置されるということを紹介しました。なお、ここで解説する現象はIEだけで起こるものですが、大多数のユーザがIEを利用していることを考慮すると、無視するわけにはいきません。ここで計算をしてみることにします。すでに左端の列が水平方向に165ピクセル分のスペースを確保しているので、先程の画像の位置は、必要な20ピクセルを確保するために、右端の列のテキストが終了するところまで落ちることになります。
IE以外のブラウザは列の幅を維持し、単に画像を右端の列の上に重ねて表示します(この動作も問題になるケースがあります)
このサンプルでは、背景の画像を使って列の見え方を構成しているので、これにより右側に白の背景が現れることになってもいます。背景色さえ取り除けば、この問題に対処できる場合があるとはいえ、 #holder が必要以上に広くなっていることに対しては、他のレイアウトとの兼ね合いもあり問題が生じるかと思います。つまり、ここで紹介したサンプルのように、場合によってはハイブリッド的なレンダリング結果が表示されるということです。図13では、holderの幅が拡大されている状態が確認できます。これが原因で余分なスペースが発生します。このような問題を回避するには、コンテンツ領域にサイズの大きな要素を配置することを避ける必要があります。(つまり、Contributeでサイトを更新するクライアントを抱えている場合は、クライアントに、サイズの制限に関して十分な説明をしておく必要があります。) 次のセクションに進む前に、ここで使用した画像とテキストの一部に適用したコメントを削除してください。
その他のだまし絵テクニック
このチュートリアルを終了する前に、もう1つテクニックを紹介しておきます。筆者が皆さんのために素晴らしいデザイン案を提供することはできないので、 ここではデザイン構成のネタを紹介しておきます。現状のページには、3列をまたぐような形で四角形のヘッダーが横たわっています。しかし、このヘッダーが退屈な四角形でなければならない理由はありません。
例えば、右の列を上側に延長して、ヘッダーと重なっているような見映えにするのはどうでしょうか
このようなデザインは簡単に実現できます。このキャンバスサイズにしておけば、3列目より若干幅広なスペースが確保でき、作業がしやすくなります。筆者は、面取り矩形オートシェープツールを利用して、色を3列目と同じものに、幅を160ピクセルにそれぞれ設定しました。この部分には、お好みの形状が利用できますが、必ず最終的な幅が160ピクセルになるようにして、列の幅と一致するようにしてください。gifの透過GIFファイルとして書き出します。gif画像を利用してください。現状では次の背景色だけが指定されています。では先程作成した、列最上部のだまし絵のURLを指定するとともに、画像をリピートしないことと、この画像をdivの右下に配置することを指定します。このテクニックを利用すれば、たとえヘッダーが高さ方向に拡大されても、常に右端の列とヘッダーが重なり合っているように見えます。(例えば、ユーザがデフォルトの文字表示サイズを大きく設定している場合、文字が拡大されるのにあわせてヘッダーの高さも大きくなります。) 背景の値を次の値に変更します。
ブラウザのページ表示を更新し、ページの右上部に注目してみます(図14参照)
これで、列が上側に突き抜けるような見映えになりました。あとは、皆さんのアイデア次第です。
列の上にだまし絵を追加した状態
同様のテクニックを利用すれば、ヘッダーの下部に丸みを付けることもできます。また、高さの設定がない要素の上下に影やグラデーションを配置することで、高さに関係なく伸びたような効果も演出できます。
しかし、1つの要素に2つの背景画像を設定できないのでは
と考える方もおられることでしょう
確かにそうではありますが、腕の利くクライアントサイドデベロッパーなら必ずどのようなクリエイティブデザインでも実現できるはずです。スペースの関係で、ここではそのようなスタイルテクニックやクリエイティブなナビゲーションアイデアを紹介できませんので、ぜひ今後公開されるチュートリアルにご期待ください。
IEのための調整テクニック
この記事で紹介したレイアウトには、Internet Explorerのバグに影響を受ける点がないはずですが、実際にオリジナルのレイアウトを作成し始めると、IEのバグに遭遇することがあるかも知れません。これらのバグの大半は、IEが各種要素に対して「hasLayout」を必要とすることに起因しています。) この問題に対する最も効果的な回避策は、こちらもIE独自の機能である、zoomを利用することです。このプロパティを、IE以外では除外されるコメント内(あるいは、コメントで条件分岐してページに読み込まれるIE用のスタイルシート内)に含めておけば、IEに関する大半の問題が解決できます。また、IE用の条件分岐コメントの中に配置することで、ページの検証ツールを利用しても問題が起こりません。
注釈を忘れずに
最後に、筆者がCSS開発を行う際に、非常に便利だと感じるティップスを紹介します。これは、注釈を忘れずに付けておくということです。筆者の場合、注釈をXHTMLとCSSの両方に付けるようにしています。XHTMLの場合は各divを閉じる直前に注釈を追加しています。注釈を付けておけば、開発時の作業が容易になるだけでなく、後日サイトに手を加えるようなことがあっても効率良く作業に取り組めます。注釈をdiv終了タグの後ろではなく、直前に配置する理由は、div全体を移動する際に注釈もあわせて移動することになるからです。divを閉じてから注釈を追加すると、文書内の思わぬ場所に取り残されるようなことが発生し、混乱が発生します。筆者は次のような書式で注釈を追加しています。筆者が注釈を多用するもう1つの場所は、CSSの全般的な設定部分や、特別な機能が盛り込まれたセレクタ・宣言が発生するところです。つまり、後になると忘れてしまいそうな、特別な位置ばかりです。スタイルシートに含まれているセレクタや値が何を意味しているかは、他に14ものサイトを開発した後では、覚えていられるわけがありません。後から見ても分かるように、注釈を付けておくことがポイントです。(このチュートリアルの完成版ファイルを参照して筆者の注釈テクニックを確認してみてください。
次のステップ
著者について
CSSと(X)HTMLに関する高度な技術者でもあり、創設したW3Conversionsは、企業のWebチームのトレーニングや社内のデザインを効率的な標準ベースのWebサイトに変換する業務においては、業界屈指の権威として認められています。さらに、ダイナミックなプレゼンテーションを行う講演者としても世界中で活躍しています。
時には、コーディング作業などのコンピュータ業務から離れ、スカッシュやビーチバレーで汗を流してリフレッシュすることも
80年代音楽の愛好家でもあります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
テンプレート機能を使ってみよう パート1:「編集可能領域」と「オプション領域」の使い方 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
「編集可能領域」を設置し、Webサイトの雛形を用意する。「オプション領域」を利用してグローバルナビゲーションの表示を切り替える。
印刷用に表示
テンプレート機能を使ってみよう
パート1:「編集可能領域」と「オプション領域」の使い方
Dreamweaverには、Webサイト内で共通する部分(ヘッダやフッタ、サイドバーなど)を1つのファイルでまとめて管理することができる「テンプレート機能」が備わっています。テンプレート機能を使えば、数十~数百ページ規模のWebサイトでも、1つのファイルを編集するだけで全てのページに対して修正や追加を行うことができます。また、テンプレート機能を利用する上で、CMSやSSI(サーバサイドインクルード)、PHPなどのようにサーバ側の機能が一切必要ないため、サーバ環境に左右されずに利用できることも特徴です。本連載では、2回にわたりテンプレート機能の使い方を解説します。まずは、基本となる「編集可能領域」と「オプション領域」の使い方です。
テンプレートを導入する前(記事を見ながらテンプレートの使い方を学べます)
このチュートリアルに従って作業を完了するには、次のソフトウェアとファイルが必要です。「編集可能領域」を設置し、Webサイトの雛形を用意する。テンプレート機能において基本となるのは「編集可能領域」です。
HTMLファイルに対して「編集可能領域」を設置してテンプレートに変換し、Webサイトの雛形を用意しましょう
「編集可能領域」の外が雛形となります。デザインビューからも該当箇所を選択することができますが、コードビューを併用するとより確実に選択できます。選択した状態でメニューバーから「挿入 → テンプレートオブジェクト → 編集可能領域」を選びます。STEP04 「編集可能領域」の設定時に、領域に名前を付ける必要があります。ここでは、メインコンテンツの領域を編集可能領域にしたので、領域の名前は「コンテンツエリア」としました。STEP05 領域の名前を設定すると、デザインビューには領域の囲みが、コードビューにはテンプレート用のコメントが挿入されます。STEP06 メニューバーから「ファイル → テンプレートとして保存」を選び、このファイルをテンプレートとして保存します。
[テンプレートとして保存]ダイアログの[保存名]には任意でファイル名を入力しましょう
dwtとなりこのディレクトリに格納されます。dwtファイルを利用する。次に、dwtファイル(テンプレートファイル)を元に新しいページを作成する手順を説明します。STEP01 新規ページを作成する際にdwtファイルを利用する場合は、メニューバーから「ファイル → 新規」を選んだ際に開く[新規ドキュメント]ダイアログにて[テンプレートから作成]を選択し、前項目で作成したテンプレートを選択します。一度保存することで、これを相対パスに自動修正することができます。STEP03 テンプレートを利用したHTMLでは、「編集可能領域」以外はロックされており、誤操作防止にもなります。デザインビューでは編集可能領域外は操作禁止のカーソルで表示され、コードビューでは編集可能領域外のソースコードはグレーで表示されます。dwtファイルを編集すると、そのdwtファイルを利用したファイルも自動で更新されます。
ナビゲーションやバナーの追加やコピーライトの文言変更など、Webサイト全体に関わるような修正が発生した際に活躍するでしょう
著者について
2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして(株)ピクセルグリッドに参加
コーポレートサイトを中心に、数々のWebサイトにおけるUI実装経験を持つ。Web関連雑誌での執筆活動や技術関連の講演も行うほか、個人のブログ「ヨモツネット」ではHTMLやXML、CSSなどに関する技術の情報を発信している。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
たにぐち まこと氏
ライブラリとテンプレートで一括管理
環境のカスタマイズ,ショートカットワークスペースのレイアウト
正規表現を使った検索と置換機能
印刷用に表示
Webプログラマの場合は,Eclipseやフリーのエディタソフトなどを使ってプログラムを作ることのほうが多いでしょう
しかし実は,Dreamweaverはプログラマにとっても大変便利なソフトであることをご存知でしょうか
まずは,その特徴を簡単に紹介しましょう
FTPソフトの同梱された統合開発環境
これはエディタ機能とも深く連携していて,エディタ上からもファイルのアップロード・ダウンロード(PUT・GETと言います)を行うことができます。さらに「チェックイン/アウト」という,Webデザイナとファイルの上書きを起こらなくすることができる,簡単なCVSのような機能も搭載されています。
正規表現に対応した検索・置換機能
検索・置換機能は正規表現にも対応しています。その上、1ファイル内はもちろん、フォルダ単位での検索、置換もできるため、Webサイト全体の文字列置換なども簡単に行うことができます。
豊富なリファレンス
しかも、どれも技術書としては評のあるO'REILLYのリファレンスのため、内容も正確で大変参考になります。
豊富な拡張性
Adobe公認の拡張機能を利用したり,フリーで公開されているものを使ったり、または自分で制作することもできます(第2章で解説)
このように、DreamweaverにはとてもWebデザイナ向けとは限定し得ない機能が豊富に搭載されているのです。本企画ではこれらDreamweaverのプログラマ向けの機能に 焦点を当てて紹介していきます。まずは体験版をダウンロードして、一度Dreamweaverでの開発を体験してみてください。
手放せないツールになることでしょう
著者について
たにぐち まこと氏
東京世田谷のWebサイト制作ユニット
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ライブラリとテンプレートで一括管理
環境のカスタマイズ,ショートカットワークスペースのレイアウト
正規表現を使った検索と置換機能
プログラマにとっては,エディタの検索機能はもっとも重視する機能の1つです。[編集]→[検索]メニューをクリックすると,図25のようなダイアログボックスが表示されます。見てのとおり,大文字・小文字の区別やホワイトス ペースの無視などの他,正規表現を使うこともできます。正規表現とは,特定の文字列を含めることで,さまざまな種類の文字列にヒットさせるための式です。たとえば「[0-9]+」などと指定すると,「123456」などの数字の羅列にはヒットするが,「あいう」といった文字列にはヒットしないといった具合です。
正規表現については参考書籍などもあるので,それを参考にするとよいでしょう
正規表現の複雑な検索式を組み立てた場合には,そのクエリを保存しておいて,後から呼び出して再度使うこともできるなど,高度な検索が行えます。検索の対象は,現在編集中のファイルを対象にすることはもちろん,次のような対象に検索をすることもできます。
選択したテキスト
現在開いているドキュメント
フォルダ(別途ダイアログボックスで対象を指定)
また,サイト定義(後述)をしている場合には,次のような選択肢もあります。
サイト内の選択したファイル
このように,多くのファイルを含めた検索を行うことができます。
検索結果は,エディタ上でカーソルを移動する検索はもちろん,「結果」ウィンドウに検索結果を一覧表示することもできます(図26)
また,その一覧を保存しておくこともできるので,一括置換などを施すときに,その対象ファイルリストを保存しておくと便利でしょう
「ソースコード」というモードで検索を行うと,一般の エディタソフトと同様にすべてのテキストを対象にすることができます。しかし,Webページの場合はさまざまなタグが入り組んでおり,同じ単語でも次 のようにHTMLタグが含まれている場合があります。このような場合,「Dreamweaver」というキーワードでは,後者の文字列を検索することができません。さらに「テキスト(高度)」というモードを選択すると,検索ダイアログが図28のように変化し,オプションを設定できます。特定のタグを検索する「特定のタグ」モードもあります。このように,Dreamweaverの検索機能はWebサイト制作には欠かせない要素が満載の,欠かせないツールになっています。非常に多機能なダイアログだ。左側のフロッピーのアイコンでリストを保存できる。
▼図27 検索モードの切り替えリスト
▼図28 高度なテキスト検索
さまざまな条件を指定することができる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
たにぐち まこと氏
Webプログラマの場合は,Eclipseやフリーのエディタソフトなどを使ってプログラムを作ることのほうが多いでしょう
しかし実は,Dreamweaverはプログラマにとっても大変便利なソフトであることをご存知でしょうか
まずは,その特徴を簡単に紹介しましょう
FTPソフトの同梱された統合開発環境
これはエディタ機能とも深く連携していて,エディタ上からもファイルのアップロード・ダウンロード(PUT・GETと言います)を行うことができます。さらに「チェックイン/アウト」という,Webデザイナとファイルの上書きを起こらなくすることができる,簡単なCVSのような機能も搭載されています。
正規表現に対応した検索・置換機能
検索・置換機能は正規表現にも対応しています。その上、1ファイル内はもちろん、フォルダ単位での検索、置換もできるため、Webサイト全体の文字列置換なども簡単に行うことができます。
豊富なリファレンス
しかも、どれも技術書としては評のあるO'REILLYのリファレンスのため、内容も正確で大変参考になります。
豊富な拡張性
Adobe公認の拡張機能を利用したり,フリーで公開されているものを使ったり、または自分で制作することもできます(第2章で解説)
このように、DreamweaverにはとてもWebデザイナ向けとは限定し得ない機能が豊富に搭載されているのです。本企画ではこれらDreamweaverのプログラマ向けの機能に 焦点を当てて紹介していきます。まずは体験版をダウンロードして、一度Dreamweaverでの開発を体験してみてください。
手放せないツールになることでしょう
これは後からどちらにでも変 更できますし,パネル類の配置が替わるだけで機能的な違いはないため,どちらを選んでも構いません。ここでは「デザイナモード」を選びました。
▼図1 初回起動時にのみ表示されるモード変更ダイアログ
なお,MacOSX版ではこの選択肢は出ず,デザイナモードにあたる「初期設定」が自動的に選択されます。起動すると図2のような画面が表示されます。中央のエディタ部分を中心に,上部にツールバー,下部にプロパティインスペクタ,そして右側にパネル類が配置されています。
それでは,ファイルを1つ作ってみましょう
[ファイル]→[新規]メニューをクリックすると,「新規ドキュメント」ダイアログボックスが表示されます。ファイルの作成中は,図3の「ビュー」ボタンを切り替えると,HTMLのソース,デザインをそれぞれ見ることができ,両方を分割して表示することもできます。たとえば,コードビューでPHPのプログラムを打ち込みます。
すると,主要な関数群の場合はコード補完も表示されます(図4)
▼図3 ビューボタンでコードビュー・デザインビューと分割ビューを選べる
▼図4 途中まで関数を打ち込むとコードヘルプが表示される。
PHPのプログラムを打ち込み終えたら,デザイン ビューに戻ってみましょう
打ち込んだプログラムは,図5のようにアイコンとして表示されます。そのため,PHPが含まれたファイルも,デザイナが引き続き作業することができます。
▼図5 PHPプログラムのデザインビューでのアイコン
[修正]→[ページプロパティ]メニューをクリックし,「ページプロパティ」ダイアログボックスで「タイトル/エンコーディング」を選ぶと,ドキュメントタイプを変えることができます。0なども選ぶことができ,DOCTYPE宣言なども自動的に挿入されます。文字コードなどもここで選んで変更できます。また,既存のファイルをDreamweaverで開いたときに文字化けしてしまった場合には,ここで正しいエンコードを選んで[リロード]ボタンをクリックすれば,読み込み直すことができます。このように,Dreamweaverはエディタソフトとしても必要十分な機能を備えています。
これだけでも,十分使う価値はあるのですが,まだまだ便利な機能があり ますので,この後は筆者を含めてDreamweaver愛好者である私たちがさまざまな角度からDreamweaverの魅力を紹介していきましょう
ライブラリとテンプレートで一括管理
プログラマの場合,よく使う関数などを別ファイルにしてinclude( )関数(PHP)などを使って参照したりします。ライブラリは,登録したい部分を選択して[ライブラリ]→[ライブラリにオブジェクトを追加]メニューをクリックすると,その部分がライブラリに追加されます。
登録したライブラリは,「アセット」パネルから利用することができます(図6)
挿入したい場所にドラッグ&ドロップするか,挿入ボタンをクリックします。こうして,さまざまなファイルに挿入したライブラリは,「アセット」パネル上でダブルクリックして編集すると,自動的に挿入されたすべてのファイルが更新されるというしくみです。テンプレートは,ライブラリとは逆に共通のページの中で一部だけが違う場合に利用します。たとえば,ニュースページなどのように,ページの体裁は同じで内容だけが違う場合などに使うと便利な機能です。
テンプレートを作成するときは,通常どおりにファイルを編集し,テンプレートにしたときに編集できる領域にしたい場所を[挿入]→[テンプレートオブジェクト]→[編集可能領域]メニューをクリックして,編集可能領域に設定します(図7)
そして,ファイルを保存するときに[ファイル]→[テンプレートとして保存]メニューをクリックすれば,テンプレートの完成です。次回から,新しいファイルを作るときにテンプレートを選んで作り始めることができるようになります。ライブラリとテンプレートは,特殊なコメントタグで実現されています。リスト1を見るとわかるとおり,ライブラリやテンプレートになっている場合 でもHTMLは直接書かれているため,PHPなどを必要とせずにWebブラウザで表示することができます。Dreamweaverはその前後に書かれた特殊なコメントを判断して書き替えています。
そのため,拡張子が
htmlなどの静的ページでも使うことができるという利点があります。ただし,ライブラリなどを使っている場合には1点注意が必要です。Dreamweaverでこれらのページを編集するときは,ライブラリやテンプレートに指定されている部分は,選択などができないように制御されているため書き替える心配はありませんが,他のエディタでは編集できてしまいます。
そして,次回Dreamweaverでライブラリなどを更新した場合には,その部分がライブラリによって上書きされてしまうため,加えた変更が無効になってしまうの です(図8)
ライブラリなどが使われているファイルを変更する場合には,必ずDreamweaverを使うか,または特殊なコメントタグの位置に気をつけて編集する 必要があります。
気をつけましょう
▼図6 ライブラリを登録するとアセットパネルに記録される。
▼図7 編集できる箇所を編集可能領域に設定
▼リスト1 本来のHTMLの前後に,特殊なコメントタグが付加される。
ライブラリに登録した箇所<
▼図8 ライブラリが変更を上書きしてしまう。ライブラリやテンプレートと似た機能で,プログラマにとっても便利に使えるツールが「スニペット」です。スニペットは,ライブラリなどと違って情報を一元管理することはできませんが,スタンプのように同じ部品を何度も貼り付けることができます。
「スニペット」パネルを開くと,はじめから準備されているいくつかのスニペットが表示されます(図9)
close( )メソッドで,ウィンドウを閉じるプログラムがあらかじめ登録されており,貼り付けるだけで閉じるボタンを設置することができます。ッセージを表示しておき,フォーカスがあたるとメッセージがクリアされるテキストボックス(図10,図11)や,ポップアップウィンドウを表示するため のJavaScriptなど,さまざまなものが登録されています。また,このスニペットは自分で登録・変更できます。右下の「新規スニペット」ボタンをクリックすると図12のようなダイアログが表示されます。名前 と説明にわかりやすいものを書き込んで,よく使うプログラムなどを書き込みます。貼り付けるときに,エディタで選択した箇所の前後にプログラムを書き込みたいときは「選択範囲を囲む」に設定し,それ以外は「ブロックの挿入」を選びます。こうして,いつも使うようなプログラムの部品を登録しておけば,プログラミング作業の効率アップが図れます。▼図11 マウスでフィールド内をクリックすると,メッセージが消える。Eclipseなどの開発ソフトには,プログラムコードをインデントしたり解除したりするツールが付属しています。これを使ってコードの可読性を高めるこ とができますが,Dreamweaverにも同じ機能が搭載されています。エディタを「コードビュー」に切り替えると,画面の左端に図13のような「コーディング」ツールバーが表示されています。これを使えば,プログラム コードをきれいにまとめることができます。前述のインデント,インデント解除はもちろん,HTMLなどを含めてインデントをきれいに整えてくれる「コードフォーマット」もあります。さらに便利なのは,HTMLの折りたたみ機能です。プログラマにとっては,デザイナ,コーダーの制作したHTMLは非常に量が多く,プログラムの可読性 を損なわせる要因ですが,このHTMLを図15のように折りたたむことができます。これは,Dreamweaver上だけでの機能なため,ソースプログラム自体には一切影響を与えることなく,折りたたんだり広げたりすることができます。こうして,プログラマはデザイナの,デザイナはプログラマのコードを折りたたんでおくことで,お互いの作業に集中できます。
表示されていない場合にはツールバー付近を右クリックして表示しよう
▼図15 ソースコードの折りたたみ
保存して,再度開いたときも再現される。冒頭でも紹介したとおり,DreamweaverにはHTMLリファレンスはもちろん,次のようなリファレンスが内蔵されています。HTMLやCSS,アクセシビリティ関連のリファレンスから,XML関係,プログラマ向けリファレンスと非常に多彩です。また,プログラマ向けのリフ ァレンスは,前述のように技術書で定評のあるO'REILLYのリファレンスがそのまま掲載されているため,内容も本格的であることが窺えます。
リファレンスは,[ウィンドウ]→[リファレンス]メニューで閲覧することができます(図16)
最初にリファレンスを選び,各リファレンスに沿っ た選択肢を選んでいきます。また,リファレンスはエディタと連携しています。エディタでHTMLタグやJavaScriptなどを書いている途中で,キーワードを選択して右クリックし,[リファレンス]メニューをクリックすると,該当するリファレンスが自動的に開いて閲覧できます。不意にパラメータを忘れてしまったときや,他人のプログラムコードを見ていて,見知らぬ関数などに出くわしたときには,非常に力になるリファレン スです。この中に大量のリファレンスが納められている。バリデートは[ファイル]→[ページのチェック]→[マークアップのバリデート]メニューから行えます。結果が図17のように表示されるので,ダブルクリックすると該当箇所にジャンプして,修正などを行うことができます。バリデートした結果はXML形式でレポートを保存することもできるため,データベースに格納したりXSLTなどを通して,レポートをWebページとし て表示させることなども可能です。ツールバーのターゲットブラウザボタン(図18)をクリックして,[設定]メニューをクリックし,そのWebページがサポートする最低バージョンのWeb ブラウザを設定します。すると,それらのWebブラウザでサポートされていないタグや属性を,図19のような波線で表示できます。これを参考にしながら, HTMLを組み立てていくことができます。この中に大量のリファレンスが納められている。▼図19 ターゲットブラウザで正常に処理できないタグなどに赤い波線が引かれる。この機能は,FTPサーバやWindowsネットワークなどでファイルを共有し ている場合,自分がファイルを編集するときに「チェックアウト」処理を行うことで,他の人が同じファイルを編集できなくする機能です。これにより, ファイルを互いに上書きしあってしまうことを防ぐことができます。
チェックイン/アウトを使うには,「サイト定義」の「リモート情報」の設定の際に設定します(図20)
チェックアウト時の名前と,メールアドレスを設定すればすぐに使い始めることができます。ファイルをリモートサーバから取得するときに「チェックアウト」を行うと,ファイルが図21のようになり,自分が編集権を持つことができます。このとき,もし別の場所で同じファイルをチェックアウトしようとすると,図22のような警告が表示されます。編集が終わったら「チェックイン」を行います。ファイルは図23のようになり,再度編集する場合にはチェックアウトをしなければ,編集できなくなります。とはいえ,このような機能はプログラマにとっては身近な機能かもしれません。CVSなどがバージョンの管理や,ファイルの変更部分のマージなどを行えるのに対し,Dreamweaverではそのような機能がない分,機能に 物足りなささえあります。しかし,筆者はCVSなどよりも,このチェックイン/アウト機能を愛用しています。Eclipseなどのプラグインを使えば,これらを統合環境の中で扱うことができますが,デザイナの場合はこのようなソフトに慣れていないため,手間が増 えてしまいます。また,Webサイトの場合,レンタルサーバなどを使っていることも多く,CVSシステムを容易には導入できない場合もあります。そのため,非常に手軽に利用することができ,デザイナとも共有して使うことがで きます。
▼図20 チェックイン/アウトの設定
はじめはチェックボックスだけだが,チェックすると設定項目が増える。▼図21 チェックアウトした場合,緑色のチェックマークが付く。
▼図22 別の場所で同じファイルをチェックアウトしようとすると表示されるダイアログ
▼図23 チェックインした場合
南京錠のアイコンが 表示される。
環境のカスタマイズ,ショートカットワークスペースのレイアウト
非常に多くの設定項目がありますが,ここではプログラマに便利な設定をいくつか紹介し ましょう
ここでは,拡張子ごとの外部エディタを登録することができます。それなりにプログラマ向けに作られているDreamweaverのエディタ機能ですが,やはり特定の 言語専用に作られたエディタソフトに比べれば足りない部分も多々あります。ここで専用エディタを登録しておけば,特定のファイルはそのエディタで編集できます。登録したエディタは,常に利用することもできますし,通常は Dreamweaverで編集しておきながら,必要なときにだけ[編集]→[エディタを指定して編集]メニューで,切り替えて利用できます。
ファイルを比較
リモートサーバとのファイルの差異を比較するツール(Diffツール)を指定できます。これを使えば,現在リモートサーバ上にあるファイルと,手元のファイルのどの部分がどのように違うのかを比較して,上書きするか取得するかを判断できます。
ほとんどのキーボードショートカットは変更できます(図24)
また,設定したショートカット集を保存できるため,バックアップしておくことや,他 のパソコン上でも自分の環境で使ったりすることもでき,便利です。ショートカットキーの変更でお勧めは,前節で紹介した「チェックイン/アウト」の変更です。たとえば,このキーを「F2」と「F3」などに設定すると,ファイルのチェックイン/アウトを極めてスムーズに行うことができます。[編集]→[キーボードショートカット]メニューで開くことができる。
正規表現を使った検索と置換機能
プログラマにとっては,エディタの検索機能はもっとも重視する機能の1つです。[編集]→[検索]メニューをクリックすると,図25のようなダイアログボックスが表示されます。見てのとおり,大文字・小文字の区別やホワイトス ペースの無視などの他,正規表現を使うこともできます。正規表現とは,特定の文字列を含めることで,さまざまな種類の文字列にヒットさせるための式です。たとえば「[0-9]+」などと指定すると,「123456」などの数字の羅列にはヒットするが,「あいう」といった文字列にはヒットしないといった具合です。
正規表現については参考書籍などもあるので,それを参考にするとよいでしょう
正規表現の複雑な検索式を組み立てた場合には,そのクエリを保存しておいて,後から呼び出して再度使うこともできるなど,高度な検索が行えます。検索の対象は,現在編集中のファイルを対象にすることはもちろん,次のような対象に検索をすることもできます。
選択したテキスト
現在開いているドキュメント
フォルダ(別途ダイアログボックスで対象を指定)
また,サイト定義(後述)をしている場合には,次のような選択肢もあります。
サイト内の選択したファイル
このように,多くのファイルを含めた検索を行うことができます。
検索結果は,エディタ上でカーソルを移動する検索はもちろん,「結果」ウィンドウに検索結果を一覧表示することもできます(図26)
また,その一覧を保存しておくこともできるので,一括置換などを施すときに,その対象ファイルリストを保存しておくと便利でしょう
「ソースコード」というモードで検索を行うと,一般の エディタソフトと同様にすべてのテキストを対象にすることができます。しかし,Webページの場合はさまざまなタグが入り組んでおり,同じ単語でも次 のようにHTMLタグが含まれている場合があります。このような場合,「Dreamweaver」というキーワードでは,後者の文字列を検索することができません。さらに「テキスト(高度)」というモードを選択すると,検索ダイアログが図28のように変化し,オプションを設定できます。特定のタグを検索する「特定のタグ」モードもあります。このように,Dreamweaverの検索機能はWebサイト制作には欠かせない要素が満載の,欠かせないツールになっています。非常に多機能なダイアログだ。左側のフロッピーのアイコンでリストを保存できる。
▼図27 検索モードの切り替えリスト
▼図28 高度なテキスト検索
さまざまな条件を指定することができる。
著者について
たにぐち まこと氏
東京世田谷のWebサイト制作ユニット
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
なぜ CSS を使用した方が良いのですか
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
なぜ CSS を使用した方が良いのですか
Dreamweaver MX 2004 の発売以来、私はその新機能や実力を、既存ユーザーの方々だけでなく、新しいユーザーの皆さんに対しても紹介する機会がたくさんありました。ところが、先日、ある初心者ユーザーから質問を受け、私はハッとしました。
「なぜ CSS を使用した方が良いのですか
」と質問されたのです。HTML や CSS を毎日使っている方々は、そのメリットについて良く知っていますが、それ以外の、つまり今これを読んでいる皆さんの中には CSS を導入することによるメリットをご存知でない方が居られるということに、そのとき気がつきました。また、単に CSS を導入することによる具体的なメリットが伝わっていないだけなのかもしれません。とにかく、この記事を書くことで、私はその初心者ユーザーの質問にお答えすることにしました。
CSS のメリットを述べる前に、ここで少しだけその歴史についてふれておきましょう
CSS レベル 1 では、HTML ページ内で使用する各種属性が定義され、従来の font タグや、色およびマージンの設定といったページの見栄えを定義するマークアップに取って代わるものに限られていました。この新たな属性は、ページの見栄えをデザインするために実践されていた table タグの乱用 (または誤用) を改善するものでした。1 となっています。1 では、いくつかの属性がチューンアップされているとともに、現行のブラウザにおいて実用性の低かった属性が排除されています。新しい技術にはよく見られることですが、残念ながら CSS が浸透するには時間が掛かっているといわざるをえません。主な理由のひとつは、ブラウザの問題です。しかし、これは Web デザイナーや Web デベロッパーを悩ます問題が完全になくなったということではありません。前述のブラウザすべてが CSS レベル 2 に対応していると言っても、ブラウザに依って準拠の度合いがまちまちであるため、一部の属性がフラストレーションの原因になる場合があります。つまり、テストを繰り返しおこなう必要がまだ残っているということです。しかし、CSS 規格の主要な属性を使用している限り、ページは正しく表示されます。
では、なぜ W3C はそもそも CSS 規格を提唱する必要があったのでしょうか
また、CSS は、HTML ベースの Web サイトやアプリケーションを作成するときに、一体どのような意味を持っているのでしょう
私が思うに、CSS の必要性とメリットは大きく分けて、柔軟性、レンダリング、アクセシビリティの 3 つの観点から語ることができると思います。おびただしい数のネストされたテーブルを使いながら、細心の注意を払ってページをレイアウトしたあとで、クライアントが「ちょっとした」修正をリクエストしてくる。
ほとんどの Web デザイナーや Web デベロッパーは、こんなパニックの瞬間に遭遇した経験があることでしょう
その修正は、「そのイメージをもう少し左に動かせる。」といった単純なものから、「そのヘッダーが気に入らないからフォントをもっと大きくしてくれる。
ついでにフォントの色を変えてみたらどう
」といった大がかりな修正までさまざまです。もし、これらの修正がページ数の少ないサイトに対してならば、深呼吸をしてから、イライラするこの更新作業にとりかかることもできます。しかし、規模の大きなサイトの場合 (しかもそれが普通になってきています)、一見単純に見える修正でも、大変大がかりな作業になってしまいます。
こういったパニック状況をもたらす原因は何でしょう
答えは、ページの見栄えを定義するマークアップがページの一部として組み込まれていることです。皆さんが作業しているサイトから任意のページを取り出して、実際に font タグや table タグの数を数えてみてください。
仮にこれらのタグを各ページのコードから排除し、外部ファイル上で管理できればどうでしょう
こうすれば、一つの外部ファイルを編集するだけで更新作業が完了します。
CSS を使用するメリットが少し見えてきましたか
単一 (もしくは少数のバリエーション) の外部スタイルシートを利用して複数のページをデザインしておけば、外部スタイルシートを更新し、それをアップロードするだけで、サイト全体へ更新内容を反映させることができます。また、従来のテーブルによって構成されているレイアウトのサイトナビゲーションを、単に左から右へ移動することが、どれほど大変なことかを想像してみてください。
退屈で単調な作業を何時間も続けなければなりませんね
しかし、ページ内の要素配置を CSS 属性で指定しておけば (この手法は CSS-P とも呼ばれています)、外部のスタイルシートに記述されている float 属性や position 属性を修正するだけで簡単にページのレイアウトさえも更新することができます。メリットはもっとあります。同じスタイルシートを使用しているサイト内のすべてのページが自動的に更新されるのです。ブロードバンドが主流となってきた最近では、多くのデベロッパーがブラウザにおけるページの表示速度に注意を払わなくなってきています。しかし、ターゲットとなるオーディエンスの中には、ダイアルアップ接続で Web を閲覧している方々が存在していることを忘れてはいけません。ページ表示速度が遅くなる主な要因としては、従来のテーブルで構成されたレイアウトが挙げられます。これは、ブラウザがサーバーからページを受け取る際に、複雑にネスト化されたテーブル構成を「理解」しなければならないからです。ブラウザは、まず最も深くネスト化されたコンテンツを見つけ、その後徐々に一番外側にある body タグへとコードを読み進みます。この工程を終えてはじめて、ブラウザはコンテンツを画面上に表示することができるのです。一方 CSS を利用した場合、ブラウザはサーバーからコンテンツを受け取った時点で、即座に画面に表示するためのレンダリング処理を開始します。プレゼンテーション用マークアップ、つまり表示の仕方を指示するマークアップが少ないためにそれが可能になるのです。外部スタイルシートを使用することには、レンダリングに関する隠れたメリットもあります。従来のテーブルを使った手法では、ブラウザは読み込み、分析、表示という作業を個々のページに対して行わなければなりません。つまり、サイト内の 30 ページ目を表示する場合でも、ブラウザは 1 ページ目を表示するのと同じ作業を繰り返さなければなりません。しかし、外部スタイルシートを利用する場合、一番初めのページが表示された段階で、リンクしているスタイルシートがブラウザのキャッシュに保存されます。したがって、同じスタイルシートを利用している 2 ページ目以降は、ブラウザのキャッシュを利用して素早く読み込まれるようになります。最後にお話しするレンダリング関連のメリットは、私に映画「アマデウス」を連想させます。映画のなかで、モーツアルトは彼が作ったオペラについて皇帝に感想をもとめます。すると皇帝は、素晴らしかったが長ったらしくて退屈だ、と答えます。モーツアルトに詰め寄られ、皇帝は「音符が多すぎる」のが問題だと説明します。
Web デザインにおいても、同じことが言えるでしょう
音符はつまり HTML コードというわけです。コードが多ければ多いほど、ブラウザがページを「理解」し、表示するまでに時間が掛かるのです。皆さんは、Office 製品が煩雑なコードを生成し、ページ表示に関係のない情報をドキュメント内にばらまく、といった噂を聞いたことがあると思います。Dreamweaver を利用していれば、このようなことは起こりませんが、それでも「音符が多すぎる」という過ちをおかす危険性は存在します。従来のテーブルで構成されたデザインがその例です。ページデザインに CSS を導入すれば、たちまちクライアントがダウンロードしなければならないコード量が減少します。単にページから font タグを一掃するだけでも、驚くほどのコード量が削減できます。また、完全に CSS-P 手法で構成されたサイトデザインに移行すれば、多くの場合、実に約 50 % 以上ものコード量削減が実現できます。当然、コード量が減れば、ページの読み込み速度も上がります。最近、アクセシビリティという言葉をよく耳にすると思います。多くのデベロッパーは、アクセシブルなサイトの構築が大切であることは理解していますが、たいていの場合、政府や教育機関のサイトに関わっていない限り実践していないのが現状です。アクセシビリティというと、デベロッパーの大半は、画像に alt 属性を付ければ良いという程度にしか考えていませんが、アクセシビリティに関して考慮しなければならないのは、実際それだけではありません。CSS を導入するつぎのメリットとして、アクセシブルなサイトを容易に構築できるということが挙げられます。アクセシビリティについて考える際の重要なポイントは、スクリーンリーダーのような障害者支援技術がどのように画面を「読み上げていくか」という点です。しかし、これは CSS を導入することによって改善可能な重要ポイントでもあります。従来のテーブルによって構成されたページの場合、スクリーンリーダーはコンテンツをどの順番で読み上げるかを判断することが大変困難です。複雑にネスト化されたテーブルに直面したとき、スクリーンリーダーがいかに混乱するか考えてみてください。
コンテンツを読み上げるべきか、飛ばすべきか
もし、読み飛ばした場合、どの順番でつぎのコンテンツに移ればよいのか
これは、スクリーンリーダーにとって非常に紛らわしい問題です。あるページを見たとき、皆さんは瞬時に興味のあるコンテンツを画面上で見つけ、ナビゲーションなどといったページ上部にある情報を簡単に無視することができます。しかし、視覚障害者の方々はそれができません。スクリーンリーダーがページの最初からコンテンツを読み上げ、実際に興味のあるコンテンツが読み上げられるまで、すべての情報がスクリーンリーダーによって処理されるのを待たなければならないのです。もちろん、スクリーンリーダーがナビゲーションをスキップできるようにするテクニックもありますが、それはたいていナビゲーションやコンテンツ内にイメージを置き、そこにリンクを張るという手法です。こういったテクニックは有効ですが、逆に混乱をまねく原因となることや、ほかのユーザーに見えてしまうという問題点もあります。一方、CSS を利用した場合、視覚障害者以外のユーザーやマウスに認識されない形でページに不可視エレメントを定義でき、スクリーンリーダーはこの不可視エレメントをもとに、迅速かつ効果的にドキュメント全体をナビゲートできるようになります。CSS を導入してプレゼンテーション用マークアップを排除すれば、スクリーンリーダーは実際のコンテンツのみ遭遇するようになります。また、先述の CSS-P を利用した手法でページをデザインする場合、コンテンツの「流れ」に注意してページを構成することが重要になります。言い替えれば、ページを論理的に順序立てて構成することが必要だということです。皆さんはこの記事を読みながら、情報の「流れ」を追うことができています。しかし、仮にこのページがネスト化されたテーブルを利用して、複数のコラムのレイアウトであったとしたら、現在の段落はページ右上に配置されていたかもしれません。これでは、スクリーンリーダーは記事の最後の方でこのパラグラフを読み上げるべきだということを知ることができません。CSS-P を利用してページをレイアウトすれば、例えこの段落をページ右上に表示したとしても、HTML コード内では、本来、記事の「流れ」としてこの段落があるべく場所に、そのまま文章を配置しておくことができます。これは一歩進んだアクセシブル体験と言えます。
そして次のステップへ
Web 制作に CSS を導入することで得られるメリットをお分かりいただけましたか
もちろん、習得しなければばらないことはたくさんありますので、Macromedia デベロッパーセンターにある他の CSS 関連記事もぜひお読みください。CSS のメリットなどをさらに理解するためや、CSS を段階的に導入していく上で、きっと役に立つはずです。今後も私は CSS のチュートリアルをここで提供していく予定です。皆さんもぜひ CSS を利用してみてください。
著者について
また、カスタマーの代表として、製品開発チームへ要望や意見を伝達する役割も担う。出張先のカスタマーと接することに一年あたり約 200 日間を費やし、ユーザーのナマの声をよく理解している人物でもある。トレードショーや、セミナー、カンファレンスなどでのデモンストレーションを担当するとともに、Macromedia 製品の上級者向けトレーニングセッションで講師を務める。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
物理的なセキュリティの確保
実質的なセキュリティの確保
内部的なセキュリティの確保
物理的なセキュリティの確保
データベースの物理的なセキュリティにおいては、「コンピューターそのものがどのように保護されているか」から始まって「ネットワークがどのようにセットアップされているか」まで、考慮すべき点が幾つかあります。これらの問題点に関してどこまで管理が可能であるかは、自分自身のデータセンターを実行するか、あるいはホストされてソリューションを購入するかによって異なります。状況はどうあれ、環境の設計あるいは購入したソリューションがプロジェクトに必要なセキュリティレベルであることを確認してください。必要なセキュリティレベルでない場合には解決策を考えてください。データベースの物理的なセキュリティにおいて直面する幾つかの事実がありますが、まず最初は、データをホストするコンピューターの場所です。データセンターをどこにセットアップするかを選択する際には以下のポイントを覚えておいてください。
一般的にオフィス内では人の行き来が激しい場所からは離すこと
理想的には、ロックすることが可能な個別の部屋、または人の出入りがない場所であること
コンピューターは床に直接置かないこと
費用を使い床から上げて設置することも可能だが、しっかりした棚を購入する方法でもよい。いずれにしろ、コンピューターを床から数インチ上に設置しておくと、床に水が広がることがあってもコンピューターがショートする事態を回避することができます。
通気がしっかりとしていて涼しい場所であること
CPU やハードドライブには通気と涼しい温度が必要です。排気ポートが壁のすぐ側にある、または通気が悪い場所にコンピュータを設置するのはトラブルの元となります。
電源保護された部屋であること
停電保護に加えて、電源保護ユニットによって電力を調整すると、多量の電力が流れることによって電気機器がダメージを受けたりデータがオフランになったりすることを避けることができます。プロフェッショナルなユニットには 30アンペアで twist-lock 式のコンセントが必要であり、これによってサーバーに十分な電力を供給することができることを覚えておいてください。火災はデータセンターの環境を計画する際にまず考慮に入れなくてはいけない損失の大きい災難です。典型的な鎮火システムには水が使用されますが、水は電気機器にダメージを与えるため、データセンターではコンピューターを濡らすことなく鎮火するシステムとして泡が使用されます。鎮火システムに十分な費用を使えない場合は、確実なバックアップの保存を心がけてください。サーバーの設置場所の他に、コンピューターをログインしたままにする、または機密を扱うデータテーブルを開いたまま Enterprise Manager を実行するなどしてデータが洩れることのないことを確認してください。セキュリティの対処については、信頼のおける人を保持することが大切です。データベースの情報にアクセスする必要のないビジターや従業員がオフィスに入る場合は、ここに挙げる簡単なセキュリティのステップの必要性を軽視しないことです。
ネットワークのセキュリティ保護
ネットワークのセキュリティを増大するためには数多くのステップを踏む必要がありますが、ここでは 2つの一般的なトピックに論点を絞ります。この記事はネットワークテクノロジーに関するものではありませんので、これらのツールを適切に実行するために必要な詳細については十分提供することはできませんが、正しい方向性を示すために簡略に説明します。(詳細については数多くのリソースが提供されています。)ネットワークには、プロキシとファイアウォールという 2つの役立つツールがあります。プロキシとファイアウォールは類似した作業を実行しますが、決して同じものではありません。プロキシサーバーの主な目的は、プライベートネットワークからパブリックネットワークやへのゲートウェイを提供すること、そして数多くのクライアント機器を通してインターネットへアクセスする際のキャッシュ能力を提供することです。一方ファイアウォールは、プライベートネットワーク、パブリックネットワーク、DMZs (demilitarized zones)、およびプライベートネットワークへのリモートアクセスを分離および保護するための詳細にわたるメソッドです。プロキシサーバーに関しては、オンライン SQL Server への保護が幾分制限されていると言えます。
プロキシサーバーの使用
255 のいずれか)、オフィスのネットワークを構成するとします。これらのアドレスは、インターネット上の他のホストとかち合うことなく、またインターネットからアクセスされることなく、ネットワークコンピューターによって安全に使用されることができます。クライアントのコンピューターが誰からも覗かれることなく、インターネットのようなパブリックネットワークへプライベートネットワークからアクセスする際にはプロキシサーバーが使用されます。プロキシサーバー(通常クライアントのソフトウェアを通して接続が管理されます)は、プライベートネットワークからのリクエストを受け取ると、プロキシとして実行され、適切なインターネットへと配布されます。応答が返ってくるとプロキシサーバーがそれを受け取り、適切なクライアントコンピューターへ dispatch します。これによって、安全を確保しつつ T1 接続を介してクライアントコンピューターすべてからインターネットへアクセスすることが可能となります。プロキシは 2つのネットワークインターフェイスを使用してこれを行いますが、ひとつはプライベートネットワーク IP アドレスを使う方法、もうひとつはパブリックネットワークを使う方法です。このアドレストランスレートサービスはプライベートネットワークのある部分をプロキシインターフェイスを介してインターネットへ公開するためにも使用することができます。SQL Server の場合では、SQL サービスそのものへアクセスすることでプロキシサーバーを介して公開することができます。ディフォルトにより SQL Server へのすべてのリクエストはポート 1433 を介して入ってきますが、SQL Server のポート 1433 のみを公開することが可能なら、コンピューターをインターネットに公開することなく適切に動作を処理することもできます。Proxy Server をインストールして起動し、プライベートおよびパブリックネットワーク上で実行します。これにはプライベートのネットワーク IP アドレスだけが含まれます。これは以下のコードが含まれるテキストファイルです。クライアントがインストールする際に認識されるプロキシサーバーの場所を特定すると、1433 が拘束されます。プロキシサーバーのパブリックネットワーク IP アドレスのポート 1433 へ入ってくるすべてのリクエストは、SQL サーバーへ直接入ってくるリクエストであるかのように処理されますので、コンピューターそのものを公開することなく SQL Server の機能を公開することができます。
インターネットの危険性からネットワークを完全に保護するためには、洗練されたファイアーウォールソリューションのインストールを考えたほうが良いでしょう
ソフトウェア準拠のものとハードウェア準拠のものがありますが、これはソフトウェアソリューションを忠実に実行するハードウェアを持つことを意味します。また、ハードウェア、ソフトウェア、モニタリング、毎月使用料を払うタイプの管理などを利用したソリューションをアレンジすることも可能です。ネットワークのアドレスおよびポート、それらをインターネットでどのように入手可能にするかにおいては、firewall は非常に細かいレベルの管理を提供しますが、基本的にファイアウォールは、ネットワークを、インターネットから見ることのできないプライベートゾーン、インターネットから見ることが可能なパブリックゾーン、その中間的存在の trusted ゾーン(DMZ)の 3つのゾーンに区別しています。DMZ のコンピューターにおいては、プライベートネットワークとパブリックネットワークの両方からアクセスすることが可能ですが、許可のないトラフィックは拒否されます。ファイアウォールは、レンガとモルタルで作られた防火壁に似ていることにその名前の由来があります。商用ビルの防火壁は、管理された区域内で火災が急速に広がるのを防ぐ役割がありますが、隣接する場所に火事が燃え移るのにどれだけの時間を耐久できるかによって評価されます。つまり 2時間耐久の防火壁なら、火事を消し止めるまでに 2時間の猶予が与えられるわけです。ネットワークのファイアウォールも同じ目的を持っています。攻撃を和らげ、問題があることを知らせるようデザインされていますので、隣接するネットワークに被害が及ぶ前に問題を処理する時間が与えられます。完全なソリューションというのは存在しませんので、最高のファイアウォールソリューションにも、データを守るための注意深い計画、観察、管理が必要です。必要なアクセス、回避したい危険性のバランスを注意深く保つことによって管理が可能となります。ファイアウォールが、保存されているデータを保護する際の中核的な役割になることは確かです。SQL サーバーは、 サーバーそのもののがコントロールされる、またはセキュリティアカウントへのパスワードを入手されることにより、色々な角度からの攻撃を受けやすくなります。また、SQL サーバーは Web サーバーまたは商用アプリケーションへの攻撃の結果が原因で被害を受けることもあります。データの保護はネットワーク全体を侵入から防げるかどうかにかかっています。ネットワークをひとつのユニットとして捕らておくと保護の可能性も高くなります。その点において、ファイアウォールは重要なステップとなります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
サイトの管理 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
サイトの管理
すべての Web デベロッパーにとって、サイトの管理は重要です。Dreamweaver では、チームによるサイト構築のためのチェックイン / チェックアウト機能、日常の効率を高めるためのバックグラウンドでの FTP パブリッシュなど、サイトの管理に関して鍵となる拡張機能がいくつか導入されています。取り上げるトピックは次のとおりです。
新規サイトの設定
サイトの管理
新規サイトの設定
開発フォルダとファイルは、パブリッシュされたフォルダとファイルのミラーイメージになります。必要に応じてユーザが作成できますが、必須ではありません。一方、この節で説明するように、Dreamweaver には、サイトの開発と管理をより効率的に行うために、非常に多くの機能が自動的に組み込まれています。
サイトの定義
どちらの状況でも作業は基本的に同じであり、開発ファイルが含まれるローカルフォルダを指定します。Dreamweaver でサイトを作成する前に、サイトの管理で使用される用語について理解することが重要です。
ローカルサイトルート:サイトの Web ページおよびサブフォルダを含む、自分のシステムまたはネットワークドライブ上のフォルダ
サイト上で、絶対 URL でリンクされていないすべてのコンテンツと依存ファイルは、ローカルサイトルートフォルダ内に格納されます。
リモートサイトルート:サイトファイルとサブフォルダを含む、Web ホスト上のフォルダ
多くの場合、デベロッパーはローカルにインストールされた Web サーバに依存しますが、テストサーバは、ネットワークマシンまたは FTP で接続されているマシンに配置することもできます。サイトメニューから「新規サイト」を選択します。「基本」は GoLive のウィザードのような方法に似ていますが、「詳細設定」インターフェイスの方がはるかに迅速です。サイト定義ダイアログボックスが開いたら、「詳細設定」タブを選択します。「ローカル情報」カテゴリが選択されていることを確認します。「詳細設定」タブで「ローカル情報」カテゴリが選択されていることを確認します。「サイト名」フィールドに、サイトを識別する語句を入力します。このサイト名は、ファイルパネル、サイトの管理ダイアログボックス、その他の場所でサイトを参照するために、Dreamweaver で使用されます。自分にとってわかりやすく、すぐにサイトを識別できるような名前を選択します。「ローカルルートフォルダ」フィールドの横にあるフォルダアイコンを選択します。既に説明したように、ローカルルートフォルダは、開発中の Web ページが含まれている、システム上のフォルダです。ローカルルートフォルダを選択ダイアログボックスが開いたら、Web ファイルを格納するフォルダを参照し、「選択」をクリックします。ローカルルートフォルダを選択します。サイトの場所をどこに設定すればよいかわからない場合があります。サーバサイドコード(PHP、ColdFusion など)を実行するためにローカル Web サーバを使用していない場合、これは技術的にはどこであってもかまいません。ただし、将来的にサイトを動的にする場合に備えて、Web サーバのメインフォルダを使用することをお勧めします。読み込まれたイメージが共通の場所に自動的にコピーされるようにする場合は、初期設定イメージフォルダの横にあるフォルダアイコンを選択します。ローカルイメージフォルダを選択ダイアログボックスが開いたら、サイト内のフォルダを選択するか、フォルダを作成します。操作を終了したら、「選択」をクリックします。「OK」をクリックして操作を確認します。後で、Web ホストを識別するためにリモート情報を追加したり、動的サイトの開発を開始する場合は、テストサーバの詳細を入力することができます。
サイトへのファイルの追加
HTML ファイルに既に依存ファイルが関連付けられている場合は、必ずそれらのファイルやフォルダも同じ相対的な場所に移動またはコピーします。ページにイメージを挿入する場合、コピー操作は自動的に行われます。前述したように、サイト定義で初期設定のイメージフォルダを宣言した場合、指定されたフォルダにイメージが自動的に挿入されます。初期設定のイメージフォルダを宣言すると、選択したファイルは現在のサイト外にあることが通知され、それをコピーするかどうか質問が表示されます。サイト内の場所を選択するだけで、残りの処理は自動的に実行されます。
サイトの管理
Dreamweaver は、サイトを管理するために簡単に使用できるインターフェイスを備えています。新しいサイトの作成、サイト定義の編集、サイトの削除は必要ありません。サイト設定を書き出して別のシステムに移動したり、バックアップとして保存しておき、必要なときに読み込んだりすることもできます。サイトを管理するには、次の手順を実行します。サイトメニューから「サイトの管理」を選択します。サイトの管理ダイアログボックスが開いたら、新規/サイトを選択して新しいサイトを作成できます。ライブサーバ上でサイトを直接編集する場合は、新規/FTP & RDS サーバーを選択します。新しいダイアログボックスが表示され、リンクのチェックなど、サイト全体にわたる特定の操作は使用できないことを示す警告が表示された後に、サーバ設定を定義できるようになります。comのように、先頭にプロトコルを付けてサイトの管理ダイアログボックスに表示されます。ライブサーバのファイルを直接操作する選択は、慎重に行ってください。Dreamweaver のほとんどのユーザは、自分のシステムで比較的安全にサイトを操作し、ページを正しくプレビューおよびテストしてから、結果をアップロードする方法を使用します。既存のサイトを編集するには、リストから名前を選択し、「編集」を選択します。サイト定義ダイアログボックスが表示され、変更が可能になります。メモ:現在のサイトを編集するために、ファイルパネルでサイト名をダブルクリックするショートカットがあります。サイトはリストに含まれていますが、その名前をダブルクリックすると、サイト定義ダイアログボックスが再び開きます。新しいサイトを作成する場合に、プロパティのほとんどが既存のサイトと同じであるときは、既存のサイトを選択し、「複製」を選択します。「コピー」の文字が付加されて新しいサイト定義が作成されるので、サイトを開いて編集し、サイト名を適切な名前に変更できます。サイト設定を保存するには、1 つまたは複数のサイトを選択し、「書き出し」を選択します。ログイン名、パスワード、ローカルパスを含むすべての設定を書き出すか、それらを除くその他のすべての設定を書き出すかを選択できます。完全なバックアップとして設定を保存するか、他のマシンに移動する場合は、前者のオプションを選択します。ログイン名とパスワードを持っている同僚や顧客にサイト定義を渡す計画の場合は、後者のオプションを選択します。ログイン名、パスワード、ローカルパスを含むすべての設定を書き出すか、それらを除くその他のすべての設定を書き出すかを選択できます。次に、サイト定義ファイルを格納する場所について質問が表示されます。
このファイルの拡張子は
サイト定義を復元するには、「読み込み」を選択し、保存されている。ste ファイルを参照します。同じフォルダに複数のサイト定義が保存されている場合は、複数のファイルを選択して読み込むことができます。読み込み時に重複した名前が見つかった場合は、「コピー」の文字が付加されます。サイトの管理を終了したら、「終了」をクリックします。「終了」をクリックすると、リストでハイライト表示されているサイトに切り替わります。したがって、書き出すように選択したサイトを開かない場合などは、「キャンセル」をクリックします。Dreamweaver には、GoLive のように破損リンクを確認するステータス列はありませんが、リンクチェック機能とレポート機能を使用すると、この情報をはじめ、さらに多くの情報を簡単に取得することができます。Dreamweaver には、現在のページ、選択されているページ、サイト全体の破損リンク、外部リンクおよび単独ファイルを表示する機能があります。さらに、各破損リンクはパネルに表示され、それをダブルクリックするとファイルが開き、該当するコードが選択されるので、問題に迅速に対応することができます。破損リンクはテキストファイルレポートに簡単に出力できます。サイトの破損リンクを表示するには、次の手順を実行します。サイト/サイト全体のリンクチェックを選択します。サイトの破損リンクを表示します。結果パネルの一部であるリンクチェックパネルが、画面の下部に沿って表示されます。リンクを修正するには、そのエントリをダブルクリックします。該当するページが開いたら、プロパティインスペクタで「リンク」フィールドを変更します。リンクチェックの範囲を変更するには、右向きの三角をクリックし、「現在のドキュメントのリンクのチェック」または「サイト内の選択したファイルのリンクチェック」を選択します。リンクチェックの範囲を変更します。レポートを生成するには、レポートの保存アイコン(パネルの左側にある最後のアイコン)をクリックし、新規保存ダイアログボックスが表示されたら、場所を選択します。レポートはテキストファイルとして保存され、Dreamweaver または任意のテキストエディタで開くことができます。「単独ファイル」または「外部リンク」を検索するには、リンクチェックパネルの上部にあるドロップダウンリストから、そのオプションを選択します。
サイト全体のレポート
Dreamweaver では、サイト全体に関するレポートを作成し、貴重な情報を様々な方法で得ることができます。例えば、アクセシビリティの要件を満たすための重要な要素である、代替テキストを正しく指定していないイメージをすべて見つけることができます。リンクチェックと同様に、結果は Dreamweaver のパネルに表示され、コードで対応が必要な部分が迅速に表示されます。メインメニューから、サイト/レポートを選択します。レポートダイアログボックスは、「ワークフロー」および「HTML レポート」というセクションに分割されています。レポートダイアログボックスは、「ワークフロー」および「HTML レポート」という 2 つのセクションに分割されています。個別のレポートを実行するか、必要に応じてレポートを統合することができます。目的のレポートを選択し、該当するチェックボックスを選択します。例えば、「代替テキストなし」を選択します。「最近修正したファイル」など特定のレポートでは、「レポート設定」ボタンをクリックしてパラメータを指定できます。「実行」をクリックします。結果は、結果パネルの一部であるサイトレポートパネルに表示されます。サイトレポートパネルの任意の項目をダブルクリックして、<img> タグを選択した状態でページを開きます。プロパティインスペクタの「代替」フィールドに適切なテキストを入力するか、ドロップダウンリストから「<空>」を選択します。レポートを XML ファイルとして保存するには、パネルの左側にあるレポートの保存アイコンを選択します。
次のステップ
サイトの設定と管理
コンテンツの作成と使用
ビヘイビアを使用したインタラクティブなページの作成
サーバサイドのページの組み込み
作成したサイトをWebに公開
著者について
この記事は、アドビ システムズ社の著作物です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Webページ制作の効率をUPするためのカスタマイズ
Dreamweaver自体の構成ファイルを編集することでカスタマイズする方法について、Webページ制作の効率を向上させることができるであろうカスタマイズを3例ご紹介します。
【その他の記事】
CSSによる簡単なスタイル指定
[CSSスタイル]パネルの徹底活用
CSSでのフォント指定について
複数のレイアウトを持つWebサイトの管理
1 によるテンプレートカスタマイズについて
テンプレート機能を使ってみよう パート2:コピペで利用できる、複雑なテンプレート式のサンプル
テンプレート機能を使ってみよう パート1:「編集可能領域」と「オプション領域」の使い方
サッポロビールにおけるテンプレート活用事例
PHPでのイベント登録アプリケーションの作成 – パート2:バックエンドの構築
PHPでのイベント登録アプリケーションの作成 – パート1:フロントエンドの構築
フル機能フォーム検証の実行
Spryスライドパネルウィジェットの作成
Spryを使った実験:ハイライト機能付き元素周期表
Webページへのビデオの追加
ラクラクかんたん
~ Spryエフェクトと入力チェックを利用する~
Webページ制作の効率をUPするためのカスタマイズ
検索機能とXSLTを利用して「制作ページ一覧」を作成する。
クロスクライアントHTMLメールの作成
もうテキストエディタには戻れない。
デザインビューの活用
デザイナー向けのワークスペースの設定
デザイナーがワークスペースを設定してアプリケーションを効果的に使用する方法を学習します。
デベロッパ用のワークスペース
手作業でコーディングする経験豊富なユーザやデベロッパーを対象としてワークスペースをカスタマイズする方法を学習します。
サイトの定義
サイトを最初から作成し、Dreamweaverサイトとして既存のWebサイトを定義する方法を学習します。
リモートサーバの定義
リモートサーバにパブリッシュし、サイト定義ダイアログボックスの概要を把握します。
サーバーへのアップロード方法
インターネットサービスプロバイダ(ISP)にファイルをアップロードする方法を習得します。ブラウザでWebページを更新したり、表示したりする場合によくある問題を解決します。
基本操作の習得
メインメニューおよび新規ドキュメントダイアログボックスを使用した新規ページの作成方法と、Dreamweaverに組み込まれているCSSレイアウトに基づいた新規ページの作成方法を学習します。
プロパティインスペクタを利用したテキストスタイルの設定
Webページにテキストを追加し、そのテキストにプロパティインスペクタのスタイルメニューを使用してスタイルを設定します。アセットパネル、ファイルパネルおよび挿入バーを使用してWebページにイメージを挿入します。
リンクの作成
電子メールリンク、テキストリンクおよびイメージをページ内やページ外にリンクします。
フォームの作成
テーブルでレイアウトされたフォームにフォームフィールドを追加し、テキストフィールドおよびメニューを使用してユーザ情報を収集し、メニューに値を入力します。Bridgeを使用してメタデータ、キーワード、ラベルの各アセットを管理し、コンテンツを表示するためにワークスペースのプレビュー、レーティング、フィルタリングおよび操作の方法を学習します。カメラからBridgeにファイルを読み込み、読み込み設定を管理して、著者や著作権といったメタデータを適用します。Bridgeの基本機能を理解し、キーボードショートカットを使用してアセットにすばやくラベル付けして、ワークスペースのカスタマイズ方法や、メタデータの表示方法、フィルタの使用方法を学習します。Bridgeを使用してファイルにレーティングとラベルを追加する方法と、サムネール、スライドショーおよびフィルムストリップの表示内でキーボードショートカットを使用する方法を確認します。サムネールに優先度を設定するか、Metadata Focusワークスペースを選択してより多くのメタデータを表示して、Bridgeでメタデータを追加したり編集したりする方法を学習します。Bridgeでキーワードを作成してイメージに適用したり、キーワードの新しいカテゴリを追加したり、フィルタパネルを使用しキーワードによってイメージの並べ替えや表示を行ったりします。Bridgeでキーワードやメタデータを使用して、1つ以上のフォルダでイメージの検索、並べ替えおよびフィルタリングを行います。Bridgeで一連のイメージの名前を一度にすべて変更する方法や、バッチ処理のオプションの管理方法、メタデータテンプレートの作成およびそれを使用してメタデータを複数のイメージに適用する方法を学習します。
CSSを使用したデザイン
カスケーディングスタイルシート(CSS)とは何かについて把握し、今日のWebデザインにおけるCSSの重要性を理解します。
CSSを利用したテキストスタイルの設定
プロパティインスペクタではなくCSSパネルを使用してテキストのスタイルを設定し、CSS Advisorを使用してブラウザ間のCSSレンダリングに関する問題に対処する方法を学習します。
CSSベースのレイアウトの使用とカスタマイズ
あらかじめ組み込まれたCSSレイアウト(Dreamweaverに同梱されています)をカスタマイズし、レイアウトの作成方法や、コンテンツのカスタマイズ方法、作業のチェックと検証方法を学習します。Webページの印刷用にスタイルシートを作成し、適切に印刷されるようにページをレイアウトするCSSファイルの作成方法を学習します。
フォームへのCSSの利用
CSSを使用してフォームフィールドの外観を変更する方法を確認します。
テンプレートの作成と利用
テンプレートの作成とトラブルシューティングを行い、その新しいテンプレート内にテンプレートと編集可能領域を作成する方法を学習します。以前に作成されたWebページをテンプレートに基づいて変更し、編集するページを選択してそのページのテキストを変更する方法を学習します。
Spryウィジェットを利用したメニュー作成
他のプログラムとの併用
DreamweaverとFireworksのワークスペース間で共有されるインターフェイスエレメントを理解し、パネルやメニューなどのインターフェイスエレメントの使用方法を学習します。Dreamweaver、FireworksおよびFlashの間で読み込み、コピーおよびペーストする方法と、これら3つのアプリケーションの間でラウンドトリップ編集を行うための効果的なテクニックを学習します。閲覧、キーワード検索、高度な検索機能の使用、購入前の試供版ダウンロード、および選択した画像の購入の方法を学びます。Dreamweaverのチームおよびコミュニティから新しく提供された次の新しいサンプルアプリケーションでは、Dreamweaver CS3を使用して何が作成できるかが示されています。このXMLベースのフォトギャラリーを参照してください。XMLベースのデータを表示するインタラクティブなデータグリッドを作成する方法を学びます。リッチインターフェイスを作成するために複数のXMLファイルをどのように使用できるかを示すSpry RSSリーダを参照してください。動作しているSpryフォーム検査のデモンストレーションを取得します。Spryを使用してどのようなサンプル効果を作成できるかを参照してください。Dreamweaverソフトウェアの更新、ソフトウェア開発キット(SDK)、関連するソフトウェアおよびダウンロードをAdobe Labsからダウンロードし、デザインおよび開発作業のレベルを一段階引き上げることができます。
体験版のダウンロード
体験版のダウンロードの詳細情報
アドビのすべてのダウンロードの確認
Spryフレームワークの進行中の開発についての情報をさらに取得し、Adobe Labsで最新バージョンをダウンロードします。Dreamweaverの拡張機能を参照およびダウンロードしたり、独自の機能を作成して投稿したりします。
ブラウザ間のCSS表示の互換性に関する問題やCSSにまつわる様々な疑問に対する答えをすばやく見つけ出し、コミュニティで知識やテクニックを共有
デジタルデザインとモーショングラフィックにおける最新情報について学びます。月に2回、最新のチュートリアルと記事を確認し、創作の参考になるギャラリー作品をご覧ください。お近くの地域にいる同じような意識を持ったDreamweaverのデザイナーやデベロッパーと交流できます。フォーラムに質問を投稿し、Dreamweaverコミュニティのアドビ コミュニティエキスパートや他のユーザから支援を受けることができます。Dreamweaverの拡張機能を参照およびダウンロードしたり、独自の機能を作成して投稿したりします。Dreamweaverドキュメンテーションにアクセスして、独自のコメントを追加します。アドビデベロッパーセンターで最近公開されたDreamweaverの記事のフィードをサブスクライブします。
見本市とカンファレンス
その他のイベント
CSSに関する共通のCSSの問題に対して、知識を共有し、回答を見つけます。
さらに詳しく
ブラウザ間のCSS表示の互換性に関する問題やCSSにまつわる様々な疑問に対する答えをすばやく見つけ出し、コミュニティで知識やテクニックを共有
CSSとWebデザインに関して、Webデザインのコミュニティの専門家にどのように貢献でき、それらの専門家からどのように恩恵を受けることができるかを確認します。
3 ピクセルのテキストジョグ
"行ボックス" (インラインテキスト、イメージ、インラインとして宣言された他の任意のコンテンツを含む不可視の "匿名" ボックス) がフロートに隣接している場合、行ボックスとフロートの端の間に 3 ピクセルのマージンが発生します。コンテンツによってフロートがクリアされると、コンテンツがフロートの方向に 3 ピクセル "テキストジョグ" して、このマージンが消えます。
スクロールできないコンテンツに関するバグ
絶対位置のエレメントが、寸法が割り当てられていない相対位置のエレメント内に配置されている場合、スクロールバーがまったく表示されないか、十分に拡張されないため、絶対位置のエレメントのすべてのコンテンツが表示されません。
マウスポインタがあるときの背景イメージの点滅
計算されたコンテナの z-index が auto に設定されている場合でも、IE では位置指定されたコンテナによって新しい重ね順が定義されます。ブラウザのメーカー間で、クリアのためのエレメントに負の上マージンを表示する方法に不一致があるため、どれが正しいか明確になっていません。
フローティング時のボタンの非表示
フロートを <button> に適用すると、ボタンの背景が非表示になり、そのテキストのみ表示されます。アドビRSSフィード*について学びます。
すべてのアドビブログの一覧*
次のステップ
アドビRSSフィードについて*
その他のチュートリアルとサンプル
製品間の統合*
製品ドキュメンテーションの印刷版もお求めいただけます。最新のアドビ製品情報を収録した書籍がお求めいただけます。
すべての製品のデベロッパーセンター*
すべてのテクノロジセンター*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
リッチなソーシャル体験をWebで実現
Flashは既にインターネットに接続されたパソコンの98%以上にインストールされているので、ユーザーは今すぐにでも、ソーシャルインタラクションの備わったアプリケーション、コンテンツおよびビデオにアクセスすることができます。一方のFacebook Platformは友達や家族と交流を深めたり、情報を交換するためなどの目的で、日々、膨大な数のユーザーによって使用されています。この2つのプラットフォームが手を組むことによって、ユーザーは次の事柄を実現できるようになります。
共有する:ユーザーが様々な情報・体験を友人と共有するためのリッチなインタラクションが作成可能
楽しむ:ゲームの相互参加性を高めたり、ユーザーが友人と競争できるようにしたりすることも可能
疑問や問題を解決する:コミュニティの潜在能力を発揮するためのRIAを開発することも可能
伝える:ソーシャルネットワークを介した頒布により、数億人規模のFacebookユーザーにメッセージを発信することさえ可能
仕組みの解説
サンプル(含コード)の閲覧
FacebookおよびTwitterと連携し、ソーシャルネットワーク上でアイスクリーム製品の販促を行うアプリケーションの事例
使用テクノロジーについて詳しく*
このアプリケーションを体験する*
3Dグラフィックスと扱いやすいコントローラー、マルチユーザー機能などを搭載した人気ゲームの事例
使用テクノロジーについて詳しく*
Adobe AIRを利用して、ライブソーシャルデータをデスクトップに供給するソーシャルニュースアグリゲーターの事例
使用テクノロジーについて詳しく*
このアプリケーションをダウンロード*
アーキテクチャーの概要:仕組みの解説
さらに詳しく
ソーシャルアプリケーションの開発
記事:Facebookアプリケーションのアーキテクチャーの理解
Flexに触れるのが初めてですか
ニュースとお知らせ
記事:Facebookアプリケーションのアーキテクチャーの理解
サンプル(コードあり)
現在のログイン済みユーザーの情報表示*
写真アルバムの一覧表示*
イベントの一覧表示*
アドビテクノロジーとFacebookについての関連情報
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
新しいラッパーファイルの作成
URL変数からのセッションデータの抽出
アプリケーションのコンパイルとアップロード
アプリケーション設定の編集
アプリケーションのAPIキーおよび秘密キーの削除
印刷用に表示
このチュートリアルをフォローするためには、別途チュートリアルの「Flexで開発するはじめてのFacebookアプリケーション」をあらかじめフォローし終えている必要があります。この別途チュートリアルでは、アプリケーションをFacebookに登録する方法と、Facebookのユーザー名を表示する簡単なFlexアプリケーションの開発方法が紹介されています。この際、アプリケーションはローカル上で動作検証でき、Webサイトでホスティングすることが可能な外部Webサイトアプリケーションとして開発されていました。本チュートリアルでは、このアプリケーションをFacebookのWebサイト上にデプロイする方法を解説します。Facebookへのデプロイに先だってローカルで外部アプリケーションの開発とデバッグを行うプロセスは、典型的な埋め込みアプリケーションの開発プロセスと同じです。まず、Flex Builderを使用してローカルでアプリケーションの開発と動作検証を行い、アプリケーションの動作検証が完了したら、Facebook Webサイトからでもアクセスできるようにするために、このチュートリアルで解説する変更を適用します。この過程で行う事柄は以下のとおりです。
アプリケーションのラッパーページを作成
ユーザーに手動ログインを強いる代わりに、ラッパーHTMLページに送られたURL変数からセッション情報を抽出
アプリケーションをサーバーにデプロイ
Facebook開発者アプリケーション上で、アプリケーションの詳細設定を変更
SWFにハードコーディングされているアプリケーションのAPIキーと秘密キーを削除
このチュートリアルをフォローするには、次のソフトウェアとファイルが必要になります。
さらに詳しく*
この記事に必要な予備知識
別途チュートリアルの「Flexで開発するはじめてのFacebookアプリケーション」を完了していること
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この記事では、Facebook上で何ができて、何ができないかなど、筆者がこの統合プロセスで学んだことを紹介することにします。Facebookのサイトには数々の統合ポイントが用意されています。重要:キャンバスページ以外でのFlashの実行に関しては、Facebookによって制限が課されています。「アプリケーション」タブ、「ボックス」タブおよび掲示板上では、いかなるFlashも、ユーザーがそのプレースホルダーをクリックしてFlashムービーを意図的に有効化するまでは実行されません。この動作は、YouTubeがビデオの上に大きな再生ボタンを配置しているのと良く似ています。Facebookでは、目障りなアニメーションアプリケーションが多数配置され、ページ上で同時に実行されるのを防ぐために、このような制限が設けられています。Flashでできることは非常に多岐にわたるため、ユーザーは意図的に個々のアプリケーションを始動する必要があります。幸運にも、Facebookでは、ユーザーにFlashムービーの始動を促すためのプレースホルダーグラフィックをオリジナルで作成し、用意することができます。開発したアプリケーションをFacebookの開発者セクションで登録すると、Facebookによって、個々のアプリケーションに一意的なアプリケーションURLが割り当てられます。com/ で始まり、その直後に読者が選んだ固有の名前が続きます。Facebookはこのドメインへのリクエストを読者の実際のWebサーバーにプロキシ(中継)するので、ユーザーが読者のサーバーのURLを知る必要は一切ありません。また、この仕組みにより、読者はFacebookのブックマークが破損することを心配せずに、必要に応じてサーバーを変更できます。メインのアプリケーションページには、サイトの他のどこよりも緩やかな制限が課されています。URLパラメーターの使用も許可されていれば、独自の広告を掲載することもでき、しかも、Facebookはここで実行されるJavaScriptを浄化するようなことがありません。Facebookアプリケーションをセットアップするにあたり、デベロッパーには2つの選択肢が与えられます。アプリケーションをFBMLとして実行する場合は、FacebookがFBMLページをキャッシュするというメリットが享受できる一方で、どのような事柄を処理できるかについては幾分の制約を受けることになります。例えば、読者が用意したページにはURLパラメーターを渡すことができません。筆者が手がけたNomeeアプリケーションでは、次の2つの理由で、トラフィックの大半をアプリケーションページにリダイレクトすることを計画しました。
1つは広告が掲載できるということ
そして、さらに重要なもう1つの理由は、ユーザーのNomeeカードを必ず閲覧できるようにするための手段が要件化されていたことです。ユーザーが我々の開発したAPIクライアントから自らのNomeeカードをFacebookに埋め込む際、ユーザーがプロフィールページに我々のアプリケーションを追加することを強いる方法はありません。しかし、リダイレクトを使用することで、検索結果でも表示されるとともに、ユーザーの友人がユーザーのカードを閲覧したくなる可能性が高まります。これらのビューをすべてキャンバスページにリダイレクトすることで、ユーザーの友人に対しては、常にこのカードを表示することができます。一旦ユーザーが読者のアプリケーションを承認すると、このユーザーは自らのプロフィール部分に、当該アプリケーション用のタブを作成することができます。このタブは、友人のプロフィールページにアクセスするとよく見かけるものです。ユーザーには、このタブを追加するよう促すことができます。このタブは、読者のアプリケーションの設定パネル、またはプロフィールの既存タブのそばに表示されるプラス記号(+)を使用して作成できますが、実際に作成するかどうかの判断は個々のユーザーに委ねられます。ここで注意しなければならないのは、ユーザーが読者のアプリケーションのFacebook設定パネルでこの操作を行わなければならないことです。このタブの作成をAPIまたはFBMLコードを利用して、強制することはできません。ユーザーが読者のアプリケーションのタブを作成できるようにする際は、このタブ用として読者のサーバーに専用のページを定義しておく必要があります。これこそが、専用ページが必要な理由です。ただし、ロジックはすべてSWFファイルに含めておくこともできるので、単に<fb:swf>タグを配置しておくことも可能です。
「ボックス」タブと掲示板
Flashムービーが実行できる別の場所としては、個々のユーザーによって定義済みの「ボックス」タブ内があります。このタブのページには、幅が異なる大小2つの列があります。なお、ユーザーは「ボックス」タブの任意のアイテムを、掲示板ページの左側の列に移動することもできます。繰り返しますが、このページおよび掲示板においては、読者のアプリケーションのボックスがその他のアプリケーションボックスとどのような位置関係で配置されるかは、ユーザー自らによって制御されます。「ボックス」タブおよび掲示板ページのコードの動作は、「プロフィール」タブのそれとは異なります。これらのページにおいては、あらかじめFacebookにFBMLをポストしておく必要があります。こうすることで、FacebookはFBMLページをキャッシュし、ユーザーに直接、当該コンテンツを提供するようになります。これで、サーバーのトラフィック負荷がFacebookのサーバー側に移せることになります。ただし、この場合データがFacebookによってキャッシュされるようになるので、新たなコードが発生した際には、setFBMLを用いてコードをリセットする必要があります。このFBMLタグは、Flashがいつ、どのようにして起動するかの制御と、Flashアプリケーションにどのパラメーターが渡されるかを制御するためにFacebookが使用するものです。このタグの呼び出し方には、次の2種類があります。1つ目は、次に示すように、FBMLマークアップで直接呼び出す方法です。スクリプトを利用する場合は、SWFまたはプレースホルダー画像のURL、およびFlashムービーのその他のパラメーターをダイナミックに設定することも可能です。FBML自体には、Flexで{Binding}シンタックスが使用できるのとは異なり、プロパティをダイナミックに設定する術が用意されていません。「ボックス」タブや掲示板のFBMLを含め、FBMLページを扱う際にもつ1つ注意しなければならないのは、Facebookが読者のコードを提供する際には、あらかじめコードが解析・検証され、コードが書き直されたり、(筆者独自の表現ですが)コードが「殺菌」されることがあるという点です。具体的には、ページ内のJavaScriptに、許可されていないコードが含まれていないかの解析・検証が行われるとともに、必要であれば関数や変数の名前が変更されることがあります。Facebookは、悪質なアプリケーションの恐れがあるコードからユーザーを守るために、これらのアイテムを自動的に排除します。筆者はキャンバスページが気にいっています。キャンバスページをお薦めする理由は、アプリケーションがどのように実行されるのかを細かく制御できるからです。筆者は、キャンバスページに渡されるURLパラメーターがIFrame経由で渡されることに気付きました。筆者が試したところ、これらのURLパラメーターにFBMLページ内でアクセスする方法は見つからなかったため、この点も、可能なケースではIFrameページの使用が推奨される理由です。FacebookでFBMLアプリケーションまたはIFrameアプリケーションを実行する際には、利用できるパラメーターが複数用意されています。読者のアプリケーションを利用するユーザーのFacebook uidの値は、Flashアプリケーションがいつ、どこで起動されたかの状況と、ユーザーが当該アプリケーションへのアクセスを許可しているかどうかに応じて、上記パラメーターのいずれかに格納されます。これらはFlashアプリケーション内で手軽に利用できるものが大半ですが、なかにはFBMLのみで扱えるものや、筆者の認識では、Flash上からでは扱えないAPIもいくつか存在します。これらの処理・操作に関しては、Flashムービーの前後のHTML、または別のアプリケーションページに配置しておく必要があります。筆者が遭遇した問題としては、次の2つが挙げられます。これを使用しなかった場合、ユーザーは、読者が用意したFBMLを目の当たりにすることがありません。読者のアプリケーションでは、このコントロールを使用することで、定期的にアプリケーションの招待状を送信する相手の友人を選択できるようにすることが可能です。独自の友人セレクターをFlashで開発することも可能ではありますが、この場合はFacebookの通知が送信できないため、代わりに、招待状をFacebook通知として発信する必要があります。
著者について
com*アプリケーションのエンジニアリング主任兼アーキテクトです。nomeeに参画する以前は、10年以上にわたってWebアプリケーションやWebアプリケーションの稼働するサーバーの開発に携わるとともに、世界中の開発チームに様々なコンサルティングサービスと指導的な立場からの助言を提供してきました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
オリジナルのテクスチャを作って、デザインの幅を広げよう
Fireworksには、あらかじめたくさんのテクスチャが用意されています。もちろん、自分でオリジナルのテクスチャを作ることも出来ます。今回は、オリジナルテクスチャの作り方・適用の仕方を紹介します。
シンボルを使用して作業効率を高めよう
Fireworksには画像やパスデータ、テキスト等のオブジェクトをシンボル化するという機能が搭載されています。オブジェクトのシンボル化は、制作作業に様々なメリットをもたらしてくれます。より優れたWebデザインの作成を目標に、今回強化されたCSS書き出し機能の使用法を紹介します。
インタラクティブプロダクトのデザインにこそFireworksを
この記事では、私たちがインタラクティブプロダクトのデザインを作成する上でどのようにFireworksを活用しているかを紹介します。このチュートリアルでは、AdobeR FireworksR CS4 を使用して、ページの最初のデザインの草案作成から、ワイヤーフレームの作成、最終的なデザインの作成に至るまでの Web サイトアプリケーションを作成する手順について説明します。
ショートカットキーで作業スピードをアップさせよう
Fireworksでは、あらかじめ用意されているショートカットキーを利用するだけでなく、特定の作業に自分好みのショートカットキーを割り当てて使うことができます。エンタープライズのコラボレーション環境で作業するデザイナーやデベロッパーにとって、Fireworksがいかに卓越したツールであるかを紹介します。今日におけるRIA(リッチ・インターネント・アプリケーション)の開発におけるデザイナー・デベロッパーワークフローでは、Fireworksは無くてはならない存在になっております。0を使用して作成したカスタムパネルでFireworksイベントを認識して応答する方法について学習します。
Fireworksを使用したユーザインターフェイスのモックアップの作成
ユーザインターフェイスデザインの模型を作成することで、迅速にWebサイトまたはデスクトップアプリケーションの仕様を作成して構築します。Web設計の様々なコンポーネントを視覚的に見栄えの良い方法でまとめ上げる方法を学びます。しっかりしたレイアウトの基盤を作成するための基本的なツールについても学習します。Fireworks CS3の新しいツールを使用してブレインストーミングセッションから最終的なモックアップまで進む方法を学習します。
MXMLおよびイメージの書き出し
MXMLおよびイメージの書き出しに対するリッチシンボルの作成*
ワイヤフレームのメリットとFireworks CS3でワイヤフレームを間単に作成できる理由について学習します。
洗練されたスライドショーの作成*
Fireworks CS3の新しいスライドショーを作成パネルを使用して、3つの簡単なステップで優れた品質のスライドショーを作成します。Fireworksの使用を開始するには、以下の簡単なステップに従ってください。CS3のワークスペースについて学習します。このビデオでは、DreamweaverとFireworksのワークスペース間で共有されるインターフェイスエレメントの使用方法が紹介されています。これら3つの領域には同じヘルプドキュメンテーションが用意されています。ビデオチュートリアルを見て学習します。詳細については以下を参照してください。アドビのコミュニティリソースを通じて他のFlashユーザと情報交換します。パネル、メニューおよびその他のインターフェイスエレメントなど、DreamweaverとFireworksのワークスペース間で共有されるインターフェイスエレメントを使用します。
製品間の統合
レイヤー階層、XMPデータ、レイヤースタイル、ブレンドモードなどを維持する方法も学習できます。9スライスの拡大縮小とは何か、なぜ便利なのかを学習し、9スライスの拡大縮小を使用しているボタンと使用していないボタンを比較します。コンテンツを表示するためのワークスペースのプレビュー、レーティング、フィルタリングおよび操作の方法を学習します。Bridgeを他のCS3アプリケーションとサイドバイサイドで効率的に使用する方法も学習できます。Dreamweaver、FireworksおよびFlashの間で読み込み、コピーおよびペーストを行い、これら3つのアプリケーションの間でラウンドトリップ編集を行うための効果的なテクニックを学習します。Adobe Bridgeで一連のイメージの名前を一度にすべて変更し、名前変更のバッチ処理のオプションを管理します。
シンボルとオブジェクト
Photoshopのレイヤー、レイヤー効果、ブレンドおよびライブエフェクトをFireworksに読み込んだ後に変更する方法を学習します。
ページパネルの使用
マスターページを使用して複数のページからなるレイアウトを作成し、ページの作成方法、ページ間の移動方法、指定したページでレイヤーを共有する方法などを学習します。JavaScriptを学習しなくても作成できるリッチシンボルのプロパティスクリプトを作成し、プロパティスクリプトの生成方法や、生成したプロパティスクリプトをFireworksのリッチシンボルで使用する方法を学習します。
リッチシンボルによる迅速なプロトタイピング
一般的なインターフェイスエレメントを使用してWebサイトのインターフェイスのプロトタイプをすばやく作成し、サイトを運用環境に移す準備をします。Fireworksの9スライスの拡大縮小を使用してWebサイト用のボタンをスライスし、3スライスの拡大縮小を使用してスクロールバーをスライスします。Fireworksコミュニティから新しく提供された次のサンプルを確認します。
ピクセルの構築*
ピクセルの構築は、エレメントがピクセルレベルで作成され、ピクセル化された外観が表示される「ピクセルアート」の例です。これらを使用して、実際の光の動きを摸倣して描画します。ブレットでは、ベクターと組み合わせたFireworks CS3のビットマップ操作の効果的な使用方法を示します。反射ボールは、Fireworks CS3のビットマップツールを使用したさらに多くのカスタムエフェクトを使用するために、ビットマップの周囲の移動やビットマップへの統合を簡単に行うことができる、編集可能なベクターオブジェクトで構成されています。再色付けは、ビットマップツールとベクターツールの両方を使用してFireworks CS3の限界を押し広げる複雑なデザインです。ロゴの設計には、どのように開発されたかを理解するために分解できる、Fireworks CS3で作成されたロゴタイプの大きなコレクションが含まれています。このサンプルの各イラストレーションは、ほとんどすべてのベクターオブジェクトを使用して完全にFireworks CS3で作成されました。また、現在は、ソースファイルの別のフレームに配置されています。(注意: このサンプルのイラストレーションは、教育のために使用されることだけを目的としており、どのような形であれ複製することはできません。
Fireworksデベロッパーセンターで含める対象となるサンプルについてお知らせください*
また、Fireworksのコマンドパネル、スタイルおよびリッチシンボルをダウンロードして、Fireworksのデザインおよび開発作業のレベルを一段階引き上げることができます。Fireworksに対する最新の更新および追加データを取得します。
体験版のダウンロード
トライアル版のダウンロードの詳細情報
アドビのすべてのダウンロードの確認
既存の機能を拡張するため、およびイメージ拡張機能、オブジェクトの操作などのためのコマンドパネルをFireworksに追加します。任意のサイズ、角度および透明度の等角投影法のイラストレーションを作成します。使用を開始するためのユーザガイド(PDF)が含まれています。このツールを使用して、キャンバスで複数のオブジェクトをデザインおよび整列して、ピクセル単位の精密なレイアウトを作成します。このツールを使用して、Fireworksでは以前は使用できなかったレベルの精度で複雑なグラデーションを編集します。コマンドスクリプト(マクロ)をFireworksに追加し、ワークフローを改善します。
お気に入りアイコンとして書き出し
16×16ピクセルのドキュメントを用意し、それを使用してお気に入りアイコンを作成して、特定のWebサイトまたはWebページに関連付けます(このコマンドはWindows版のFireworksだけで実行されます)
ページの削除、複製および名前の変更以外にも、フレームのページへの配分、ページへのファイルの読み込み、すべてのページへの書き出し設定の適用、およびモックアップの特定のページへの移動を行うことができます。
フレームおよびレイヤーのユーティリティ
長い時間をかけずに様々なフレームおよびレイヤーを使用します。共通のフレームおよびレイヤーのメニューコマンドに対して、またはフレームごとにレイヤーを非表示にするには、キーボードショートカットを使用します。選択を新しいサブレイヤーに移動し、最も上のレイヤーを上または下に移動し、左から右に積み重ねます。簡単にグループを操作できます。グループに適用されたエフェクトを失わずに、クリップボードのコンテンツを選択したグループにペーストします。選択したグループのサブエレメントの属性をコピーし、同じ構造を共有する別のグループにペーストします。アイコン、背景グラフィック、テキストのブロックなどの頻繁に使用されるエレメントをドキュメントに挿入します。現在選択されている1つ以上のエレメント以外のすべてのエレメントを非表示にします。ソロエフェクトのオンとオフを切り替えることによって、エレメントをエレメントだけで、またはすべてのエレメントのコンテキスト内で確認できます。次のスタイル(STLファイル)をダウンロードして、新しいスタイルをスタイルパネルに組み込みます。古い用紙のエフェクトをシミュレートするためのカスタムテクスチャを使用したLive Filtersを含む、高品質の用紙のスタイルをすばやく適用します。これらのスタイルをオブジェクトに適用して、迅速に魅力的なエフェクトを使用し、簡単に色を変更し、Live Filtersおよびレイアウトに適したスタイルのテクスチャを使用します。OS レベルのコントロールやボタン、アニメーション、テーマ、行頭文字など、あらかじめデザインされたアセットを利用して、すばやく作業に取りかかれます。アセットはすべて、どのプロジェクトからでもアクセスできる共有ライブラリに収録されています。PaperGramsは、鉛筆と紙のような感覚を模して作成された、手描きのフロー図エレメントとワイヤフレームエレメントです。CS3の共有ライブラリのリッチシンボルとして、これらは、背景の色とフォントのシンボルプロパティを使用して、インテリジェントに拡大または縮小できます。
Fireworksデベロッパーセンターで含める対象としてダウンロードするものをお知らせください*
開発に関する知識を共有し、他のデベロッパーが何を作っているのかを確かめ、Fireworks開発コミュニティの中でコーディングに関する質問をすることができます。お近くの地域にいる同じような意識を持ったFireworksのデベロッパーと交流できます。
お住まいの地域にFireworksユーザグループはありますか
ユーザグループに申し込んで開始してみましょう
それは、グループ専用のアクティブなWebサイトを持っていること、および毎月ユーザグループのミーティングを開催することです。それだけで申し込むことができます。お住まいの地域でFireworksユーザグループを開始する場合は、次の手順で申し込みます。申し込み書*に必要事項を書き込みます。ユーザグループのサイトの作成を開始し、1回目のミーティングを計画します。詳しくは、このプログラムの担当者であるEd Sullivan宛てに電子メールでお問い合わせください。次のリソースを使用してFireworksコミュニティに参加します。デジタルデザインとモーショングラフィックにおける最新情報について学びます。月に2回、最新のチュートリアルと記事を確認し、創作の参考になるギャラリー作品をご覧ください。
Fireworksについての特定の質問に対する回答をお探しですか
フォーラムに質問を投稿し、Fireworksコミュニティのアドビ コミュニティエキスパートや他のユーザから支援を受けることができます。Fireworksのコミュニティエキスパートと知り合いになったり、Fireworksフォーラムでコミュニティエキスパートと会話したりします。Fireworksの拡張機能を参照およびダウンロードしたり、独自の機能を作成して投稿したりします。Flashドキュメンテーションにアクセスして、独自のコメントを追加します。usでブックマークされているものを確認します。デベロッパーブログでFireworksについてのユーザの記述を読むことができます。デベロッパーセンターで最近公開されたFireworksの記事のフィードをサブスクライブします。アドビ コミュニティエキスパートになる。
アドビ コミュニティエキスパートプログラムについて*
アドビ コミュニティエキスパートを探す*
次のステップ
アドビRSSフィードについて*
製品間の統合*
その他のリソース
すべての製品のデベロッパーセンター*
すべてのテクノロジセンター*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
インタラクティブプロダクトのデザインにこそFireworksを | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
インタラクティブプロダクトのデザインにこそFireworksを
「どんなツールを使ってデザインをしているのですか
」とよく尋ねられます。そうすると、たいてい怪訝な反応をされるので、結構時間をかけてFireworksを使っている理由を説明しています。Fireworksは、業界標準のツールとは言い難いだけに、養護せずにはいられないのです。私がコンサルティング会社「Cooper」で務めることになったとき、レイヤー機能が無い頃から愛用していたオールマイティのPhotoshopからFireworksに乗り換えることになりました。そのことに懐疑的で心配だったのですが、数週間後には、選択ツールの地獄から解放されたデザイナーへと生まれ変わっていました。実際、Fireworksはインタラクティブデザインを行う上で有効な機能を数多く持っており、私たちの作業プロセスにおいて大いに役立っています。この記事では、私たちがインタラクティブプロダクトのデザインを作成する上でどのようにFireworksを活用しているかを紹介します。私たちがどのようにFireworksを使ってインタラクティブデザインやビジュアルデザインを作成しているのかについて興味ある方は、私たちの最新プロダクトを見ていただくとともに(後ほど記事で紹介します)、まずはこのショートビデオをご覧下さい。Cooperでは、デスクトップやWeb、そしてモバイルデバイスなどのさまざまなプラットフォームに向けて幅広くインタラクティブプロダクトをデザインしています。私たちのデザインチームはそれほど多人数ではなく、通常、インタラクションデザイナー、デザインコミュニケーター、ビジュアルデザイナーから構成されており、ハードウェアコンポーネントをデザインするときにはインダストリアルデザイナーが加わるといった感じです。インタラクションデザイナーとデザインコミュニケーターは一緒になってインターフェイスのビヘイビアのデザインやドキュメント化を、ビジュアルデザイナーはインターフェイスのビジュアル面を担当します。インダストリアルデザイナーはハードウェアの物理形状要素を担当します。また、チームをマネージメントするengagement leadがいて、彼は契約を担当し、チームにガイドラインやディレクションを提供します。一般的なプロジェクトにおいて、そのソリューション作成フェーズでは、デザインチームはホワイトボードにシナリオのストーリーボードを描いて、それらのスケッチをスクリーン上に落とし込みます。それから、そのスケッチ内容を繰り返し繰り返し見直して洗練させていきます。その後、デザインをクライアント向けにドキュメント化し、彼らがプロダクトを制作する際に参照できるようにします。いいアイデアが生まれたら、インタラクションデザイナーは手早くFireworksに落とし込み、プロダクトの詳細を詰めていきます。しかし、私たちの経験上、デザインプロセス全体をFireworksで作業することには多くのメリットがあります。まず第一に、チーム間で作業ファイルをやりとりしながら問題解決を行う上で、コラボレーションしやすいということがあります。また、互いの作業ファイルに対して、エレメントを再作成したり、チェックしたりする必要がないので、効率よく素早く作業を進めることができます。さらに、バージョンが異なる複数ファイルを扱う必要がないので、ミスも減らすことができます。図1は、Fireworksを使ったデザイン作業プロセスにおける、異なるステージの作業ファイル例です。
図1: 左は、インタラクションデザイナーが作成したワイヤーフレームスケッチ
右は、その見た目をビジュアルデザイナーがブラッシュアップしたもの
ステートを使ったシナリオ作成
まず、インタラクションデザイナーは、Fireworksを使って主要骨格をレイアウトしながらシナリオをデザインします。弊社では、スケッチ的なワイヤーフレームで作成します。この時、あえてビジュアル要素を使いません。その理由は、初期段階ではプロダクトのビヘイビアにフォーカスするためです。なお、インタラクションデザイナーは1つの画面をデザインするだけではありません。インターフェイスのビヘイビアやいくつかのシナリオに沿って、20~30の画面をデザインします。たとえば、私たちは音声メッセージ付き写真共有アプリケーション「GoldMail」を手掛けました。その時の1つのシナリオが、ニコルという女性ユーザーが、猫や家族の写真を追加・整理して母親のマーガレットと共有するというものです。図2は、そのシナリオの画面で、1つのファイル内で複数のステートを使って作成したものです。1つのファイル内で複数の画面を管理できれば、制作時間を抑えることができますし、その分の時間をデザイン的な問題の解決に費やすことができます。図2: 1つのファイル内の各ステートにそれぞれの画面を配置しています。
共有レイヤーでインターフェイスの骨格を作成
ステートの威力は、共有レイヤーを使い始めると実感できると思います。図3のGoldMailのグローバルナビゲーション部分を見てください。図3: ナビゲーションのオブジェクトは複数のステートに渡って配置されています。オブジェクトは、一度変化を加えると、すべてのステートにおいて変更されます。共有レイヤーの中にナビゲーションメニューの全オブジェクトを置くことで、1つのロケーションで表示・管理しつつも、共有レイヤーを共有するすべてのステートからアクセスすることができます。たとえば、ナビゲーションメニューに変化を付けたいとします。
その場合、変化を付けた異なる共有レイヤーを表示すればいいのです(もちろん、この共有レイヤーは、ファイル内のすべてのステートからアクセスできるようにしてあります)
繰り返し強調しますが、Fireworksでは、オブジェクトの共有レイヤーを1つのロケーションで管理しつつ、複数のステートに渡って配置することができるのです。そして、シナリオに沿って、自由に各共有レイヤーを表示/非表示にすればいいのです。この共有レイヤーとステートの機能を使えば、素早くセットアップできるだけでなく、1つの場所でコンテンツを管理することで、シナリオのすべての要素(テキストラベルやボタンの位置など)を一貫性のある状態で保つことができます。たとえば、ナビゲーションを含む共有レイヤーをあるステートで調整すれば、他のすべてのステートでもその調整が反映されます。このように、インタラクションデザイナーは繰り返しデザインする手間が省けて時間を節約でき、ビジュアルデザイナーもビジュアルスタイルを追加・洗練する上で時間を節約することができます。また、画面特有の要素のために、非共有のレイヤーを1~2つ用意します。図4の例でみると、写真やワークスペースのキャプションなどは、シナリオを通して常に変化する要素です。ただ、2つ以上のステートで使う要素は、共有レイヤーで管理する方がおすすめです。図4: 画面固有のオブジェクトは非共有レイヤーに配置します。
共通するアイコンやコントロールをシンボルで設定
インタラクションデザイナーが完成したシナリオファイルをビジュアルデザイナーに渡す前に、もう1つ大きな仕事があります。それは、「オブジェクトをシンボルへ変換する」作業です。シンボルはライブラリパレット内に格納して、シンボルのインスタンスをキャンバスに配置した状態でも、シンボルを編集することができます。シンボルを編集すると、その内容がすぐさまキャンバス上のすべてのインスタンスに反映されます。キャンバス上のインスタンスをダブルクリックすると、その場で編集できます。シンボル化に適したオブジェクトとは、頻繁に使うオブジェクト、キャンバス上で位置を変更するオブジェクトです。
たとえば、アイコンやコントロールなどはシンボル化しておくといいでしょう
インタラクションデザイナーは、たいてい、アイコンやコントロールをシンボル化してライブラリパレットに格納しています。そして、そのインスタンスを各ページにおおよそに配置して、後はビジュアルデザイナーがそれをブラッシュアップします。シンボルを作成するのは簡単です。Fireworksのキャンバス上でオブジェクトを作成して選択し、メニューから「修正>シンボル>シンボルに変換」を選ぶか、F8を押すだけです。
するとダイアログボックスが開くので、特別な処理を加える場合以外は、通常「グラフィック」を選ぶといいでしょう
コントロールはテキストフィールドのように伸縮させるかもしれないので、その場合はオプションの「9スライスの拡大・縮小のガイドを有効にする」をチェックしておきます(図5)
アイコンの場合は、9スライスは必要ないでしょう
図5: 1つあるいは複数のオブジェクトを選択してF8を押して、シンボルを作成します。
ビジュアルデザイナーへの受け渡し
インタラクションデザイナーがシナリオフローや画面の骨格の作成に取り組んでいる間、ビジュアルデザイナーはビジュアルストラテジーに取り組みます。このビジュアルストラテジーは、いくつかのディレクションから構成されています。ディレクションとは、リサーチから得たプロダクトが目的とする経験属性を示したものです。ストラテジーが決まり、そのディレクションをインタラクションデザイナーから上がってきたシナリオに適用させます。
グリッドの土台を配置
まず、ビジュアルデザイナーは、ガイドを使ってデザインを設計するためにグリッドを敷きます。ガイドパネル(図6 拡張機能としてダウンロードできます)を使えば、この作業を手早く行えます。このパネルを使えば、簡単にグリッドを設定できます。次にビジュアルデザイナーは、画面のメインインターフェイス要素にスタイルを追加します。通常、インターフェイスの背景といった大きなオブジェクトから始めて、徐々にシンボルといった小さなオブジェクトへと進めていきます。ちなみに、先ほどのグローバルナビゲーションにスタイルを追加すると、その変更はすぐさますべてのステートに反映されます。
スタイル属性の共有
Fireworksのツールの中で、私のお気に入りツールの1つが「属性をペースト」コマンドです。
このコマンドを使えば、オブジェクト間のスタイルを素早く共有することができます(図7)
図7: 1つのボタンの属性を他のボタンにペーストして、アウトライン/塗り/ドロップシャドウを適用しています。仮に、あなたがインターフェイスのラベルのスタイル付けをして、シナリオファイル内のラベルを一斉にそのスタイルに変更したいとします。その場合、単にスタイル付けしたテキストオブジェクトをコピーして、シナリオファイル内の該当するテキストオブジェクトに「属性をペースト」するだけです。このコマンドでは、テキストのサイズや色だけではなく、フォントスタイルやレディング、フィルタといった属性までをコピーします。テキストにドロップシャドウを適用させていても大丈夫です。「属性をペースト」コマンドは、ベクターシェイプ、ライン、テキスト、写真などすべてのオブジェクトに使うことができます。
また、スタイルパレットを使えば、よく使うスタイル属性のセットを作成して管理することができます(図8)
パレットにスタイルを追加したり、そのパレットからオブジェクトにスタイルを適用させることが可能です。