カラメルには、訪れたお客さんが商品購入履歴やお気に入りの商品をソーシャルブックマーク形式で登録できる「マイカラメル」というユーザー機能があります。
このマイカラメルを利用する際に必要となるユーザー登録や、マイカラメルを利用したお気に入り登録など際の入力フォームのユーザビリティ向上のためにSpryテキストフィールド検査ウィジェットを採用しています(図3)
図3:マイカラメルを利用する際のユーザー登録フォーム
カラメルでは、直接お客さまが商品を購入する機能はなく、あくまでもカラメル参加店舗のショップページにお客さまを誘導するのが目的です。商品を直接購入するサイトであれば、さまざまな理由でお客さまに会員登録してもらう動機は作れますが、マイカラメルの場合は、あくまでもショッピングが便利になるサポート機能を提供するに留まるため、いったん登録する気になったお客さまは確実に登録まで導きたいところです。そのため、ユーザー登録時のフォームが使いにくいなどの理由によって登録をやめてしまうといったことは避けなくてはなりません。そういった事情から高いユーザビリティを実現するために、Spryテキストフィールド検査ウィジェットを採用しています。4のものです。このバージョンでは、パスワードの再入力が一致するかをチェックする機能など、いくつかのチェック機能が不足していました。
なお、ソースコードを変更するにしても、できるだけ改造する点は少なくした方がいいでしょう
6ではパスワードの再入力チェックを行う機能が追加されています。弊社が機能を追加した際は、Spryテキストフォーム検査のソースコードの追加は最小限にとどめ、外部のJavaScriptに機能を追加していき、バージョンアップに追従しやすいように作りました。Spryツールチップウィジェットで商品名を表示する。それは、Spryツールチップウィジェットです。名前通り、ツールチップを表示させるための機能です。6に含まれています。カラメルでは、商品情報ページで関連商品を表示する部分にSpryツールチップウィジェットを利用しています。もともと、画像のみのナビゲーションで、img要素のalt属性に商品名のみを書いていて、マウスを画像に載せると商品名が画面に表示されるようにしていました。しかし、alt属性のラベル表示は反応速度が遅くて瞬時に商品名を提示できません。できれば画像のみではなく、商品名を表示するようにデザインを変更したかったのですが、デザイナーが他の業務で忙しく、レイアウト変更を行っている時間が取れませんでした。そこで、エンジニア一人でツールチップを組み込み、補助的な情報表示でカバーすることにしました。
図4:商品情報ページで関連商品を表示する部分
以下のようなコードで実装しています。jsファイル内にツールチップ機能のすべてのソースコードが書かれています。この後に続くJavaScriptコードで、マウスオーバー時にツールチップを表示したい要素と、ツールチップとして表示する要素を指定しています。これだけで、自動的にツールチップとして動作します。6をダウンロードしてから動作テストを行い、本番にリリースするまでに30分もかかっていません。
完成されたユーザインターフェースを組み込むというアプローチは、Webサイト開発ではまだ慣れていないことかもしれませんが、ちょっとした改善を思いついた時にすぐできるというのは大きな武器といえるでしょう
著者について
EC事業本部にて、「カラメル」のプロデューサーをしています。Flash 4の頃からサーバとリッチクライアントとの連携を意識しながら企画、開発 をしてきました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
日本語フォント名の「英・和」指定
ブラウザの動向とCSSハック
印刷用に表示
この記事では、以下のソフトウェアを使用しています。
1プラスアルファの時代に
1」というのが当たり前になってしばらくたちます。1を意味する」と明確に述べられています。しかし、それだけはなく、CSSのさらなる広がりを示唆しているのが印象的です。1だけでなくCSS3の一部についても理解が求められる、ということです。
まさか、今年8月に開催される北京オリンピックまでに完成させる(「beijing」は日本語で「北京」)、という意味ではありませんよね
CSSの地ならし「リセットスタイル」の設定
ブラウザごとのデフォルトスタイルが微妙に異なるため、Webクリエイターの多くがクロスブラウザ表示(すべてのターゲットブラウザで同一の表示を確保すること)に少なからず悩んでいるはずです。このような違いを「ならす」ためのCSSを「リセットスタイル」や「リセットCSS」と呼び、現在では当たり前のように利用されています。もっとも簡単な方法として知られているのは、ユニバーサルセレクタ(「*」マーク)を利用してすべての要素のスタイルをリセットする方式ですが、現在では「要素列挙方式」を利用しましょう、という流れになっています。なぜなら、一部のブラウザでフォームパーツが崩れたり、ブラウザのデフォルトスタイルのよい部分をすべて失ってしまったり、ブラウザへの処理負荷がかかるといった理由からです。[新規CSSルール]ダイアログボックスを開き、[詳細設定(IDおよび疑似クラスセレクタ)]をクリックします。[セレクタ]に半角カンマ区切りでリセットしたい要素を複数書きます。
[新規CSSルール]ダイアログボックスを開いて、 [詳細設定(IDおよび疑似クラスセレクタ)]をクリックした状態
」を入力する。このように、たくさんの要素を列挙することになりますので、[コードビュー]のほうがやりやすいかもしれません。要素列挙方式によるリセットスタイルでは、どの要素を指定しておくべきかが決まっているわけではなく、制作するサイトによって柔軟に変えて構いません。通常は、構造のための要素とブロックレベル要素のマージンと余白をカットしておき、その他のプロパティは必要であれば指定します。
また、インライン要素についても、やはり必要であればリセットしておくと覚えておきましょう
css」といったファイル名で保存しておき、その他のスタイルと区別しておくのが一般的です(このことを「コンポーネント化」といいます)
著者について
Webサイトのプロデュースや戦略立案、制作業務、コンサルティング、Webクリエイター向けの講義やトレーニング、執筆活動に従事
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
日本語フォント名の「英・和」指定
ブラウザの動向とCSSハック
日本語フォント名の「英・和」指定
font-familyプロパティで、日本語フォント名を「英・和」指定するのも、最近よく見られる傾向です。さらに、クロスブラウザ表示を実現するうえで、「フォントの種類」や「フォントサイズ」がかなり曲者ですので、セッティング方法を覚えておくと便利です。複数の種類を指定した場合、先に書かれているものから優先的に適用し、もし指定されたフォントがパソコンになければ、あとに書かれているものを適用してくれる、というしくみが「フォールバック」です。
ここで「アクセシビリティ的にどうか」と考えた人もいるでしょう
しかし、モダンブラウザのほとんどは、単位に固定値がつかわれていても、「可変」または「ズーム」できるのでまったく問題ありません。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この記事では、以下のソフトウェアを使用しています。
1プラスアルファの時代に
1」というのが当たり前になってしばらくたちます。1を意味する」と明確に述べられています。しかし、それだけはなく、CSSのさらなる広がりを示唆しているのが印象的です。1だけでなくCSS3の一部についても理解が求められる、ということです。
まさか、今年8月に開催される北京オリンピックまでに完成させる(「beijing」は日本語で「北京」)、という意味ではありませんよね
CSSの地ならし「リセットスタイル」の設定
ブラウザごとのデフォルトスタイルが微妙に異なるため、Webクリエイターの多くがクロスブラウザ表示(すべてのターゲットブラウザで同一の表示を確保すること)に少なからず悩んでいるはずです。このような違いを「ならす」ためのCSSを「リセットスタイル」や「リセットCSS」と呼び、現在では当たり前のように利用されています。もっとも簡単な方法として知られているのは、ユニバーサルセレクタ(「*」マーク)を利用してすべての要素のスタイルをリセットする方式ですが、現在では「要素列挙方式」を利用しましょう、という流れになっています。なぜなら、一部のブラウザでフォームパーツが崩れたり、ブラウザのデフォルトスタイルのよい部分をすべて失ってしまったり、ブラウザへの処理負荷がかかるといった理由からです。[新規CSSルール]ダイアログボックスを開き、[詳細設定(IDおよび疑似クラスセレクタ)]をクリックします。[セレクタ]に半角カンマ区切りでリセットしたい要素を複数書きます。
[新規CSSルール]ダイアログボックスを開いて、 [詳細設定(IDおよび疑似クラスセレクタ)]をクリックした状態
」を入力する。このように、たくさんの要素を列挙することになりますので、[コードビュー]のほうがやりやすいかもしれません。要素列挙方式によるリセットスタイルでは、どの要素を指定しておくべきかが決まっているわけではなく、制作するサイトによって柔軟に変えて構いません。通常は、構造のための要素とブロックレベル要素のマージンと余白をカットしておき、その他のプロパティは必要であれば指定します。
また、インライン要素についても、やはり必要であればリセットしておくと覚えておきましょう
css」といったファイル名で保存しておき、その他のスタイルと区別しておくのが一般的です(このことを「コンポーネント化」といいます)
日本語フォント名の「英・和」指定
font-familyプロパティで、日本語フォント名を「英・和」指定するのも、最近よく見られる傾向です。さらに、クロスブラウザ表示を実現するうえで、「フォントの種類」や「フォントサイズ」がかなり曲者ですので、セッティング方法を覚えておくと便利です。複数の種類を指定した場合、先に書かれているものから優先的に適用し、もし指定されたフォントがパソコンになければ、あとに書かれているものを適用してくれる、というしくみが「フォールバック」です。
ここで「アクセシビリティ的にどうか」と考えた人もいるでしょう
しかし、モダンブラウザのほとんどは、単位に固定値がつかわれていても、「可変」または「ズーム」できるのでまったく問題ありません。
ブラウザの動向とCSSハック
2008年には、ざっとあげるだけでも次のようなブラウザ動向が予想されます。これまでのCSSハックの知識とともに、これら新バージョンへの対応も考えておかなければなりません。
一部には「ブラウザのCSSサポートがいっそう進むことで、CSSハックは不要になる」という声もありますが、そこまで楽観視はできないでしょう
これはほんの一例であって、このようなブラウザ任せの部分はけっこう存在します。つまり、CSSのサポート不足という「実装不備」は少なくなってきているとしても、「実装差異」は将来にわたってずっと残りつづけるのです。
現在、よく利用されるCSSハックを、ブラウザのバージョン別にあげてみましょう
クロスブラウザ表示の一助にしてください。
[新規CSSルール]ダイアログボックスを開いて、 [詳細設定(IDおよび疑似クラスセレクタ)]をクリックした状態
Firefoxは基準ブラウザ(作業のベースとするブラウザ)として利用することが多く、CSSハックでの調整作業は必要のないケースが一般的といってよいでしょう
js」の登場が話題になっています。いまのところ、セレクタやプロパティのバグフィックスにはつかえそうですが、レイアウトのズレや崩れを瞬時に解決してくれる効果はないようです。
今後の展開に期待、といったところでしょうか
フォントサイズ変更にあわせてコンテンツ全体の幅と高さを伸縮させる「エラスティックレイアウト」、モバイル、テレビ、プリンタなどでのデザインを最適化する「マルチデバイスCSS」、CSSにうまく「JavaScriptライブラリ」を組み合わせてリッチなインタラクションを志向するなど、新たな手法が一般化しつつあります。
「CSSによってユーザー体験(ユーザーエクスペリエンス)をさらに向上させる」という意識をもつことが、いっそう大切になるでしょう
さまざまな新しいテクニックにチャレンジしつつも、ユーザーとクライアントに対して「より価値の高いWebサイトを提供する」という視点を忘れないようにしましょう
著者について
Webサイトのプロデュースや戦略立案、制作業務、コンサルティング、Webクリエイター向けの講義やトレーニング、執筆活動に従事
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
クリーンコードからの出発
すぐできるレイアウト、スタイル指定の追加
背景色:より美しく
色の次は:イメージとシェイプ
ボーダーの思わぬ効果
イメージのないヘッダ
冗談でしょう
リンク:Webを這い回るクモの糸
大きな装飾文字をプレーンテキストで
CSSによる簡単なスタイル指定
イメージのないヘッダ
冗談でしょう
今度は、ページの文字体裁について考えてみましょう
多くのサイトには、イメージで表現されるロゴがあります。しかし、小規模な企業や組織には、正式なロゴがない場合もあります。そのような場合、名前をプレーンテキストでページに記載し、装飾的なフォントで少し味付けをする方法もあります。
また、クライアントが見出しの文言の変更を望むたびに、グラフィックスプログラムを立ち上げるのは面倒です(プレーンテキストの方が検索エンジンに対して有利であることは言うまでもありません)
次に、他のテキストとコントラストを付けるため、フォントをVerdanaから別のものに変更します。できるだけ多くの種類の画面でテキストがきれいに読みやすく表示されるようにするには、多くのブラウザで表示できるフォントを使用することが重要です。お気に入りのフォントを指定しても、そのフォントが他の人のマシンにインストールされていなければ無意味です。使用できるフォントを調べるために私が活用しているWebサイトを2つ紹介します。このサイトでは、ユーザに対する実際の調査に基づいて、各種のフォントが使用できるプラットフォームを持つマシンの割合を教えてくれます。フォントがインストールされていない場合に、そのフォントがどのように表示されるかを示すイメージも用意されています。フォント名を選択して、それが付属している製品の一覧を見ることもできます。
カスタムフォントリストによる見出しのスタイル指定
フォントファミリのプロパティは、階層的な順序でCSSページに記載されます。ブラウザは、指定されたフォントのリストにある最初のフォントを使って、テキストを表示しようとします。このフォントがユーザのシステムに存在しない場合、次のフォントが試されます。テキストの表示に使用できるフォントが見つかるまで、これが繰り返されます。フォントを使えばいろいろと面白い表現が可能ですが、あまり活用されているとはいえません。フォントリストの先頭に、奇抜で風変わりなフォントを置くこともできます。最も注意が必要なのは、リスト内のフォントの順序です。変わったものを先に、一般的なものを後に置き、最後はジェネリックフォント(リスト内のフォントがどれも存在しないシステムのための"serif"または"sans-serif")にします。
新規フォントリストを作成するには:
ヘッダーで「H1」を選択し、CSSスタイルパネルの下部にあるスタイルの編集アイコンをクリックします(DreamweaverでCSSを編集する方法がまた1つ出てきました)
コンピュータで定義されているすべてのフォントリストの一覧が表示されます。使用したいフォントリストが定義されていないので、編集する必要があります。フォントリストの下で、「フォントリストの編集」を選択します。
フォントリストの編集ダイアログボックスが開き、コンピュータにインストールされているフォントのリストからフォントを選択するか、フォント名を手動で入力できます(図9を参照)
コンピュータの設定やプラットフォームの違いにより、追加したいフォントがすべてコンピュータ上に存在するとは限りません。存在しないフォントは、手動で入力します。
フォントリストの編集ダイアログボックスでのカスタムリストの作成
使用したいフォントが右側の「選択可能なフォント」リストにある場合は、そのフォントをハイライト表示し、左矢印をクリックして、左側の「選択されたフォント」リストに追加します。フォントは、必ずここに示す順序で追加してください。ブラウザは、この順番でフォントを表示しようとするからです。使用したいフォントがシステムに存在しない場合、「選択可能なフォント」リストの下のテキストボックスにフォント名を入力します。スペルを間違えるとブラウザが認識できず、表示されなくなるので注意してください。
このリストを手動でコーディングする場合、複数の単語からなるフォント名は、サンプルに示すように引用符で囲む必要があります(フォントリストの編集ダイアログボックスのテキストフィールドに入力する場合は、自動的に引用符が付きます)
注意すべきことは、フォントはそれぞれサイズが異なるということです。フォントのリストを選択する場合、各フォントに異なるサイズを指定することはできないので、同じくらいのサイズのフォントを選ぶ必要があります。私が、このフォントの順序を選択したのには理由があります。また、一番使用したいフォントでもあります。
つまり、これはリストの中で最も一般的なフォントなので、後の方に置く必要があります(そうしないと、ほとんどの場合にこれが表示されてしまいますが、私自身はあまり使いたくありません)
こうすれば、指定されたフォントがどれもインストールされていないマシンでも、少なくとも意図したものに近い表示が得られます。CSSスタイル定義ダイアログボックスの「カテゴリ」リストで「タイプ」が選択された状態で、先ほど作成したフォントリストを選択します。
フォントサイズを2
ここでは、em単位がブラウザのデフォルトのフォントサイズに基づいていることを知っておいてください。これは、変更されていなければ16pxです。
すなわち、デフォルトのテキストサイズの場合、2
次に、この見出しの左側に、小さい背景アイコンを追加します。
ここまでに作成した効果を確認するには、「適用」をクリックします(スケートボードのアイコンが見出しの下に表示されて、見にくいですね)
アイコンが入るスペースを空けるために、「ボックス」カテゴリを選択し、余白エリアで上と下の余白を20pxに変更します。見出しに使用されるフォントとスタイルは、システムで使用可能なフォントによって異なります。
残りの見出しのグループ化
今度は、ページの残りの見出しを定義します。帯域幅を節約し、CSSを簡潔にするため、グループ化セレクタを使用します。グループ化セレクタとは、いくつかのセレクタをカンマで区切って並べたもので、すべてのセレクタが同じプロパティと値を共有します。これを使えば、スペースを大幅に節約できます。この例では、H1、H2、H3セレクタがグループに含まれ、同じフォントファミリとフォントの太さを共有します。CSSスタイルパネルの下部にある新規CSSルールアイコンをクリックします。新規CSSルールダイアログボックスで、「セレクタタイプ」に対して「複合(選択に基づく)」を選択します。ダイアログボックスを開いたときにCSSページにフォーカスがあった場合、「(このドキュメントのみ)」を選択する必要があります。この場合も、このCSSページが対象となります。注意:グループ化セレクタの最後のセレクタの後ろにカンマを入れないでください。カンマを入れると、ルール全体がブラウザに無視されてしまいます。「タイプ」カテゴリで、先ほど作成したMarker Feltから始まるフォントファミリを選択します。これで、共通の宣言を持つグループ化セレクタが作成されました。次に、それぞれの見出しのサイズを1つずつ設定します。
今度はちょっと大胆に、コードビューに直接入力してみましょう
思い切ってやってみましょう
ページがデザインおよびコード(分割)ビューになっていることを確認してください。私は、ほとんどこのビューで作業しています。ドキュメントの上部にある関連ファイルツールバーで、CSSドキュメントを選択します。デザインスペースの隣のコードスペースにCSSドキュメントが表示されます。先ほど作成したルールの後に改行を入れ、「h1 {」と入力し、その後にプロパティと値のペアを入力します。入力の途中で、入力しようとしている内容のヒントが表示されます。コードビューの使い方に慣れると、このヒントを利用して大幅に時間を節約できます。次のようになります。ページをライブビューで見て、ブラウザによる表示を確認します。メモ:将来は、ブラウザで使用できるフォント以外でも、デザインに安心して使用できるようになるかもしれません。現在バージョン 3がベータ終了直前であり、かなり有望といえます。フォントに関する最後の作業は、pエレメントをほんの少し小さくすることです。高齢者にはデフォルトのサイズの方が読みやすいかもしれませんが、文字体裁に凝る人には小さいサイズが好まれます。これは、12pxよりわずかに大きくなります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
CSSでのフォント指定について | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ここまでのまとめ
印刷用に表示
CSSでのフォント指定について
この記事では、以下のソフトウェアを使用しています。「MS Pゴシック」と「MS ゴシック」というフォントがありますが、この違いである「P」はプロポーショナルを意味します。日本語フォントはバウンディングボックスという正方形内にデザインされていますが、このバウンディングボックスを無視して文字の形状に応じて文字幅を調整するのが「MS Pゴシック」です。
なんだかよさげに聞こえますが、ブラウザなど画面上で文字を読んでいくには字間がつまり過ぎていると感じる方もいるでしょう
[ブロック]カテゴリの[文字間隔]に「1ピクセル」のように入力することで、字間を調整することができます。
ちょっとこぶりな英数字
字間調整を行っている場合、若干、英単語の字間が開きすぎるような感はありますが、小さめの文字を読むときには、視認性が高まるでしょう
とりあえず、Windows環境ではフォント指定(+字間調整)は、これで読みやすくなりました。
ただし、欧文フォントと組み合わせるとベースラインが合わないため、リンク箇所などのアンダーラインが揃えるために「vertical-align:baseline;」を設定しておくとよいでしょう
著者について
Webサイトの構築やコンサルティングを行う傍ら、WebやDTPに関するトレーニングや執筆活動を行う。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
CSSでのフォント指定について | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
CSSでのフォント指定について
この記事では、以下のソフトウェアを使用しています。「MS Pゴシック」と「MS ゴシック」というフォントがありますが、この違いである「P」はプロポーショナルを意味します。日本語フォントはバウンディングボックスという正方形内にデザインされていますが、このバウンディングボックスを無視して文字の形状に応じて文字幅を調整するのが「MS Pゴシック」です。
なんだかよさげに聞こえますが、ブラウザなど画面上で文字を読んでいくには字間がつまり過ぎていると感じる方もいるでしょう
[ブロック]カテゴリの[文字間隔]に「1ピクセル」のように入力することで、字間を調整することができます。
ちょっとこぶりな英数字
字間調整を行っている場合、若干、英単語の字間が開きすぎるような感はありますが、小さめの文字を読むときには、視認性が高まるでしょう
とりあえず、Windows環境ではフォント指定(+字間調整)は、これで読みやすくなりました。
ただし、欧文フォントと組み合わせるとベースラインが合わないため、リンク箇所などのアンダーラインが揃えるために「vertical-align:baseline;」を設定しておくとよいでしょう
ここまでの指定をMacで表示してみます。実はあるのです。日本語のプロポーショナルフォントという概念を持たないMacでは「MS Pゴシック」を表示すると、「く」のように文字幅の狭い文字や()や「」などのカッコ類の送り(文字位置)が不自然になってしまいます。
Macでは字間調整は不要
プロポーショナルという概念がないMacでは、文字をそのまま並べた状態で自然です。
もちろん、好みにもよりますが、字間調整は不要でしょう
日本語フォントを認識できないSafari
Mac OS Xでの「Osaka」フォントは、アウトラインフォントとして扱われますが、ウエイトが重めに表示されてしまうので、文章内で強調などのために太字に設定したい箇所とのメリハリがつきにくいという欠点があります。最近では、ブラウザ以外のデバイス対応という課題が出てきました。
ここまでのまとめ
字間調整や英数字の組み替えが不要であれば、次のようにまとめて記述します。実際の記述は異なりますが、ここまでの流れと組み合わせると下記のような記述になります。上記のように指定すれば、これを回避できます。
メイリオへの対応
「メイリオ」のデザインが同じサイズでも横幅が広いため「メイリオ」で表示すると、レイアウト崩れが起きてしまうサイトが少なくないという配慮からInternet Explorer 7での採用を見送ったようです。さて、メイリオを適用させたい場合には、次のように「MS P ゴシック」よりも前に「メイリオ」を指定すればよいのです。次にフォントサイズです。
エラスティックレイアウト、マルチデバイス対応などのトレンドを受けて、レイアウトにもemが使われることもありますが、やはりPCブラウザ上ではピクセルを念頭にデザインしている方がほとんどでしょう
となると、フォントサイズもピクセル指定するのがシンプルです。つまり、ブラウザの[表示]メニューから[文字のサイズ]→[中]を[大]に変更しても文字サイズが変わらないのです。サイトのコンテンツ内で文字サイズ変更ボタンをもうけ、JavaScriptとCSSの組み合わせによってこれを回避する方法をとっているところもありますが、JavaScriptがオフの状態などには対応できないません。ただし、DOCTYPEによって基準となるフォントサイズが異なるため、キーワード指定を行う場合、そのことを視野に入れる必要があります。この場合にはDOCTYPEスイッチの影響も受けません。ところが、Mac版のFirefoxのみ、デフォルトのフォントサイズに「14ピクセル」を採用しているため、アドビのサイトをはじめ、パーセント指定を行っているサイトでは、ひとまわり文字が小さく表示されてしまいます。文字が小さい場合には、キーボードショートカットを使ってテキストズームを行ってもよいのですが、ぱっと見た目に「文字が小さい」という理由で、サイトから遠ざかってしまうユーザーもいるはずです。フォントおよびフォントサイズの指定について、いろいろと取り上げてきました。
中には「私は違う意見を持っている」という箇所があったと思いますが、下記についてはおさえておきましょう
Safariでは日本語のフォント名を無視する。ご参考までに私の中では、次のように落ち着いています。
「文章を読む」という行為が大きなウエイトを占めるWebサイトの閲覧の中で、読みやすさを高める文字の設定について、著者について
Webサイトの構築やコンサルティングを行う傍ら、WebやDTPに関するトレーニングや執筆活動を行う。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
AIRアプリケーションの実行
もっと学ぶには
印刷用に表示
しかし、AIRアプリケーションの開発は「難しいのでは
」と、思われがちです。
特にデザイナーの方にとっては、プログラムをたくさん記述しないと作れないのでは
と心配される方も多いと思います。ですがそれは違います。普段Dreamweaverを使用しているデザイナーの方でも簡単にAIRアプリケーションを作ることができます。ここでは、Dreamweaverユーザーがはじめて作るAIRアプリケーションのファーストステップをご紹介します。どのぐらい簡単にできるのか、実際に操作して試してみてください。
ここでは、簡単なDreamweaverドキュメントを作成し、AIRアプリケーションの作り方を学んでみましょう
この記事では、以下のソフトウェアを使用しています。
著者について
m-School(エムスクール)は、プロフェッショナルのためのアドビ認定トレーニングセンターです。“あなたが今、必要とするスキル”が即座にマスターできる、短期集中の講座を多数ご用意しています。法人研修や出張講座の実績も多数あり、すぐに業務で活用できるノウハウをご提供しています。運営は、教育関連事業で90年の実績がある学校法人駿河台学園(駿台予備学校)グループの、エスエイティーティー株式会社が行っています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
DreamweaverでAIRアプリケーションを作成することがいかに簡単か、実感いただけたかと思います。
続く第2回からは、などをDreamweaverと組み合わせ、【宿泊施設検索アプリケーション】を作ることを目的に、AIRアプリケーションの制作手法をご紹介します。「Webサービスの利用」と聞くと難しそうですが、Spryフレームワークの洗練された機能を使用することで、手間なく簡単に新しいテクノロジーを活用できます。第2回となるこのチュートリアルでは、Spryフレームワークで動きのあるインターフェースを作成し、WebサービスとしてリクルートWebサービスの「じゃらんWebサービス」が提供するAPI情報(宿泊施設情報)を効果的に表示させます。0アプリケーション」を作成できます。AIRコンテスト略してエアコンと聞いて、『自分は関係ないや』と思っているDreamweaverユーザーの方、そんなことはありません。Dreamweaverとあなたのアイデアしだいで、優勝できる可能性はめちゃくちゃあります。このチュートリアルを完了するには、次のソフトウェアとファイルをインストールする必要があります。また、インターネット上の情報を利用するため、インターネットに接続する環境が必要になります。
第2回の完成画面
制作に入る前に、まずは今回のチュートリアルの完成画面を見てみましょう
画面左側に、宿泊施設の名称一覧がリストアップされています。このデータは、じゃらんサイトから直接取得しています。そのため、制作者がリストを作る必要もなく、特殊なサーバーなどを用意する必要もありません。また、じゃらんからの最新情報がリアルタイムに取得されますので、更新の手間もありません。画面右側では、一覧で選択した宿泊施設の情報が表示されます。「ホテル説明」と「ホテル詳細」の切り替えは、Spryフレームワークの「アコーディオン」機能を使用し、HTMLながらも動きのあるインターフェースとなっています。
大まかなステップ
第2回の大まかなステップとしては、以下の3つとなります。Spryを使用して、動きのあるダイナミックなインターフェースを作成する。ユーザーの入力状況をもとに、文字や画像の情報を、画面上の適切な個所に表示させる。難しそうな感じもしますが、大丈夫です、ほとんどの作業はデザインビューでのみ行います。
それでは、順を追って進みましょう
と、その前に
じゃらんWebサービスに登録しよう
まずは「じゃらんWebサービス」を利用するために、じゃらんWebサービスのWebサイトにてアカウントを登録し、「APIキー」を取得します。※利用規約等をお読みいただき、画面の手順に従ってご登録ください。「APIキー」とは、そのサービスを実行する際の目印となる、利用者それぞれの固有の値(いわゆるID番号)です。
お札の番号のようなものですね
固有のAPIキーを利用することで「このキーでどれぐらいのアクセス数があったのか」などを確認することもできます。じゃらんWebサービスの場合は、登録すると「アカウント情報」に「APIキー」が表示されます。
Spryフレームワークを最新バージョンにしよう
もし表示がない場合は、下記のサイトからダウンロードしてインストールする必要があります。もしAdobe IDを所有していない場合は、利用規約をよくご確認のうえ、画面の指示に従い登録してください。ログインすると、ダウンロードページへと進みます。これでSpryの準備は完了です。
CSS(スタイルシート)と画像の準備
Webサイトを制作する上で、特にデザイン面ではCSS(カスケーディングスタイルシート)は重要な要素です。しかし本チュートリアルでは、AIRの開発がおもな学習内容となりますので、CSSに関しては言及しません。css」をそのまま使用します。さらに画像も利用しますので、「images」フォルダを、フォルダごとサイトのルートにコピーします。※今回は製品情報のデモページを利用しているため、本チュートリアルのCSSセレクタ名などは「product」などになっています。
実際にオリジナルで作成する場合は、名称を調整した方が適切でしょう
それでは実際に作成していきましょう
AIRアプリケーションの設定などをそのまま利用しますので、もし実行されていない方は、第1回の作業を行ってください。起動したとき、下記のようなSpryからの「ようこそメッセージ」が表示されるかもしれません。その場合は、そのまま[OK]ボタンを押してください。
[ファイル]メニューから[新規
ページタイトルに「SpryでじゃらんAPIを利用する」と入力します。これでページの準備ができました。
ファイルの準備ができたところで、早速Spryを使ってみましょう
まずはWebサービスの情報(じゃらんAPI)を利用するために、あらかじめ「どこからどのようなデータを取得するか」をセットします。と入力します。上記の*印には、先ほど取得した「APIキー」に入れ替えて入力してください。[スキーマを取得]ボタンをクリックします。少しだけ待つと、「行エレメント」に何やらプログラムのデータっぽい項目がたくさん出てきます。一瞬ひるんでしまいそうですが、大丈夫です。これらの項目は、取得されたデータを元に、Spryが自動的に判断して表示したものです。
そもそも、取得した項目とはなんでしょうか
実際のデータを見てみましょう
)、そのままブラウザのアドレス欄に入力して表示してみましょう
ブラウザになにやらツリーが出てきませんでしたか
これが、Webサービスから取得した情報です。※ブラウザや設定によって、表示される内容が異なる場合があります。ツリー状になったデータは、それぞれの宿泊施設の情報などです。これらの情報を、Spryが自動判断して「行エレメント」に型(構造、スキーマ)として当てはめてくれたのです。』と、自力でプログラムコードを組んで、取得する仕組みを作らなくてはなりません。Spryを利用することで、ボタンひとつでそれらの手間を省くことができます。こういったパラメータを指定することで、いろいろな条件でデータを取得することができます。じゃらんWebサービスの場合、下記ページに解説があります。本チュートリアルでは、このままの指定で先へ進みます。
データセットを設定しよう
さて宿泊施設の構造を取得したので、次は「構造の中の、どの情報を実際に利用するか」を設定しましょう
取得した構造情報の中には、APIのバージョンなど、今回のチュートリアルでは不要な項目も含まれています。宿泊施設の情報のみ必要となりますので、その指定をします。次に「行エレメント」の真ん中あたりに「Hotel」という項目があるので、クリックします。これで、「dsHotels」という名前で、宿泊施設の情報を参照できるようになりました。[OK]ボタンをクリックして、ダイアログボックスを閉じます。せっかく設定したのですから、ひとまずHTMLファイルを保存します。何かダイアログボックスが出てきました。「依存ファイルのコピー」と出ています。これは、Spryで利用するためのファイルをサイトにコピーしました、というメッセージです。
HTMLを公開するときには、『なんか知らないフォルダーがあるな~』といって、Webサイトにアップロードし忘れないようにしましょう
ページをレイアウトしよう
さてここまでの作業でできたソースコードを見てみましょう
ヘッダーに何行か追加されただけで、あまり代わり映えがないですね
おいおい大丈夫か、と思ってしまうかもしれませんが、すでにじゃらんの情報を利用できる準備が完了しています。Spryを利用することで、こんなにもシンプルなソースになります。次に、取得した情報を表示するため、レイアウトを作成する必要があります。本チュートリアルはSpryやAIRを中心としたものですので、3分間クッキングのようなスタイルでこの部分はショートカットさせていただきます。
【HTMLボディ部分にコピーしてください】
宿泊施設の一覧を表示しよう
それではまず、画面左側に表示される宿泊施設の一覧を作成しましょう
「Spry領域の挿入」ダイアログボックスが表示されます。そのまま[OK]ボタンをクリックします。
「ここにSpry領域のコンテンツを挿入」という文字列が表示されましたか
これで、Spryで扱うデータをこの中で利用しますよ、というdiv領域ができあがりました。
領域が縦に伸びましたか
ソースコードでは、下記のようになります。
それでは、一覧を表示するためのテーブルを作成しましょう
先ほどの文字列「ここにSpry領域のコンテンツを挿入」という文字列のみ削除して、そのまま[挿入]メニューの[Spry]から[Spryテーブル]を選択します。「Spryテーブルの挿入」ダイアログボックスが表示されました。「列」という項目がありますが、これは一覧に表示する項目となります。結構行数がありますが、思いっきり削除してください。これは、偶数行のデザインと奇数行のデザインで差を付けることによって、行を交互に色違いにさせ、視認性をよくするためです。[Hoverクラス]は行の上にマウスカーソルが移動されたとき、[クラスの選択]は行が選択されたときに適用されるスタイルです。もちろん、独自にCSSセレクタを作成して指定することもできます。最後に、[行がクリックされたときに詳細領域を更新]チェックボックスをオンにします。これは、一覧の行がクリックされた際、画面右側に表示させる詳細情報などを即座に更新させるために必要です。このチェックボックスをオフにすると、宿泊施設をクリックしても何の反応もないようになってしまいます。[OK]ボタンをクリックします。
デザインビューに、小さなテーブルができましたか
ここでまた、IDの設定をします。
テーブルが横に伸びましたか
次に、一番上に表示されている「HotelName」は、テーブルヘッダー(th)で今回は必要ないので行ごと削除します。またもやそっけない見た目になってしまいました。でもちょっと待ってください。実はこの段階で、じゃらんからの情報を取得できるようになりました。それでは、[ファイル]メニューの[ブラウザでプレビュー]から、お好きなブラウザで表示してみてください。
表示されましたか
OSやブラウザによっては、警告が表示される場合があります。
その際は、「ブロックされているコンテンツを許可
」を選択肢、アクティブコンテンツを実行するように[はい]をクリックして進んでください。
いかがですか
HTMLには存在しない情報が、「じゃらんWebサービス」を通じて画面に表示されました。
Spryを使用すれば、ダイアログボックスから項目を選択していくだけで、Web2
0(っぽいもの)を開発できるのです。
インターネット上の写真を表示しよう
左側の一覧はひとまず完成しました。
それでは次に、右側の詳細情報を作成しましょう
まずは宿泊施設の写真表示です。ここで先ほどと違うのは、「タイプ」を[詳細領域]にすることです。これにより、一覧で選択された情報の詳細だと指定できます。[OK]ボタンをクリックします。先ほどと同様に「ここにSpry領域のコンテンツを挿入」と表示されました。次に「ここにSpry領域のコンテンツを挿入」という文字列のみ削除して、そのまま[挿入]メニューの[イメージ]を選択します。「イメージソースの選択」ダイアログボックスが表示されました。ここでファイルを選びたいところですが、今回はダイアログボックス上部にある[データソース]ラジオボタンを選択します。すると、「フィールド」欄にホテル情報の項目がリストアップされています。「イメージタグのアクセシビリティ属性」ダイアログボックスが出る場合がありますが、今回はそのまま[OK]ボタンを押してください。これで画像の表示設定は終了です。これだけで自動的に表示されるようになります。
プレビューしてみましょう
一覧をクリックすると、写真も自動的に切り替わります。この写真は、じゃらんからの情報を元に、インターネット上の画像を表示しています。環境によっては、プレビューで画像が表示されない場合があります。その場合はいったん保存して、HTMLファイルを直接ブラウザで開いてください。
アコーディオンを使ってみよう
ついに第2回のチュートリアルも終盤にさしかかりました。
最後に残っている、宿泊施設の個別情報を表示してみましょう
概要と詳細の2種類の情報を表示したいので、ここでは「Spryアコーディオン」を利用します。デザインビューでは難しいかもしれませんので、コードビューで移動しても構いません。
ここでHTMLファイルを保存してみましょう
また「依存ファイルのコピー」ダイアログボックスが表示されましたか
jsなどのファイルを使用しているので、これがコピーされました。そのまま[OK]ボタンをクリックしてください。このように、Spryは必要なファイルを必要な分だけコピーするので、余計なファイルで煩雑になることはありません。
ではプレビューしてみましょう
アコーディオンの動きができました。「ラベル2」をクリックすると、すっと動いて「コンテンツ2」が表示されます。あとは、中身を整えるだけです。こんなに簡単にアコーディオンが完成してしまうのも、Spryのすごいところです。入力したら、そのまま[テキスト]メニューの[フォーマット]の[見出し3]を選びます。ラベルに▼が表示され、いい感じの見た目になってきました。同じく「ラベル2」の文字も「ホテル詳細」に変更し、[見出し3]とします。
アコーディオンが開いたときの内容を入れていきましょう
文字列「コンテンツ1」を削除します。「タイプ」を[詳細領域]にして、[OK]ボタンをクリックします。おなじみの「ここにSpry詳細領域のコンテンツを挿入」という文字列を削除します。宿泊施設のキャッチフレーズを表示するように設定するのですが、ここで新しいパネルの登場です。[ウィンドウ]メニューから[バインディング]を選択します。「バインディング」パネルが表示され、これまたおなじみのホテル情報の項目がリストアップされています。その文字の右にカーソルを移動し、Enterキーを押して、段落にします。下記のようなソースコードになります。アコーディオンが隠れている。次に残りのアコーディオンの内容を編集したいところですが、デザインビューには1つ目の内容しか見えていません。表示するには、「ホテル詳細」にカーソルを移動してください。パネルの右側に、“目”が表示されました。このアイコンをクリックすると、もうひとつのコンテンツが表示されます。先ほどと同じように「コンテンツ2」を削除して、詳細領域の「Spry領域」を追加し、「バインディング」パネルから下記の項目を挿入します。それぞれの項目は段落(p)にしておいてください。
追加する項目:
ここは自由に項目を追加しても構いません。
意外な宿泊施設の情報があるかもしれませんよ
最後に、宿泊施設の詳細ページを開くリンクを作成しましょう
「ハイパーリンク」ダイアログボックスで、[テキスト]に「詳細を見る」と入力します。[リンク]コンボボックスの右側にあるフォルダアイコンをクリックし、「ファイルの選択」ダイアログボックスを開きます。[OK]ボタンをクリックして「ハイパーリンク」ダイアログボックスに戻り、[ターゲット]コンボボックスから「_blank」を選びます。これで宿泊施設の詳細ページを開く設定が完了したので、[OK]ボタンをクリックしてダイアログボックスを閉じます。ソースコードは以下のようになります。これで完成です。
プレビューしてみましょう
文章に書くと長い道のりでしたが、作業自体はラクラクで簡単ではありませんでしたか
Spryの機能で、ソースコードを直接操作した部分はありません。デザインビューだけで開発できるのです。0の仲間入りができてしまう、そんなすぐれものがSpryなのです。
それでは、完成したHTMLファイルをAIRで見てみましょう
動きましたか
AIRにしても、Spryの機能は問題なく動作しています。もしエラーが表示された場合は、Spryのバージョンが古い可能性があります。チュートリアルの始めに戻って、最新のバージョンをインストールしてください。
それではAIRファイルをパブリッシュして、本チュートリアルを完成させましょう
もしエラーが出る場合は、最新のJavaがインストールされていない。最新のSpryフレームワークがインストールされていない。などが考えられますので、第1回の内容を確認してください。
AIRファイルができあがりましたか
AIRアプリケーションのインストール方法などは、第1回に掲載されていますので、実行してみてください。じゃらん以外のWebサービスでも、基本はほとんど同じスタイルですので、今回のチュートリアルで手法を学べばいくらでも応用がききます。
アイデアひとつで、AIRコンテスト略してエアコンの優勝も夢ではないですよね
次回以降は、よりいっそうRIA(リッチインターネットアプリケーション)らしいAIRアプリケーションを作成していきます。例えば、Spryのもうひとつの機能「Spryエフェクト」を使ってさらにリッチなインターフェースを追加したり、宿泊施設の地図情報と連携します。
もっと学ぶには
Dreamweaverの基本しっかりとおさえたい方にオススメのトレーニングコースです。基本的なWebサイト構築における手順、サイトのナビゲート、CSS(カスケーディングスタイルシート)を使ったWebページのレイアウト、大規模なサイトの構築や維持管理の手法など、サイト制作に欠かせない要素を多数ご説明します。
著者について
m-School(エムスクール)は、プロフェッショナルのためのアドビ認定トレーニングセンターです。"あなたが今、必要とするスキル"が即座にマスターできる、短期集中の講座を多数ご用意しています。法人研修や出張講座の実績も多数あり、すぐに業務で活用できるノウハウをご提供しています。運営は、教育関連事業で90年の実績がある学校法人駿河台学園(駿台予備学校)グループの、エスエイティーティー株式会社が行っています。[AIRプロジェクトチーム たいちょ氏]
現在、株式会社リクルートの実証・研究機関であるメディアテクノロジーラボにて研究員として活動中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
しかし、AIRアプリケーションの開発は「難しいのでは
」と、思われがちです。
特にデザイナーの方にとっては、プログラムをたくさん記述しないと作れないのでは
と心配される方も多いと思います。ですがそれは違います。普段Dreamweaverを使用しているデザイナーの方でも簡単にAIRアプリケーションを作ることができます。ここでは、Dreamweaverユーザーがはじめて作るAIRアプリケーションのファーストステップをご紹介します。どのぐらい簡単にできるのか、実際に操作して試してみてください。
ここでは、簡単なDreamweaverドキュメントを作成し、AIRアプリケーションの作り方を学んでみましょう
この記事では、以下のソフトウェアを使用しています。
実行環境・作成環境のインストール
AIRアプリケーションの作成/実行
実行環境・作成環境のインストール
AIRアプリケーションの開発を行うためには、実行環境・作成環境を用意する必要があります。まずは、実行環境となる Adobe AIR(英語版)をダウンロードしてインストールします。AIRベータ版をインストールしている場合は、アンインストールをしてから上記の動作を行って下さい。次に作成環境を用意します。この記事では、以下のソフトウェアを使用しています。ダウンロードした拡張機能をダブルクリックして、拡張機能をインストールします。407が追加されます。古いJavaを使用している場合、AIRアプリケーションの書き出し中にエラーが起こる場合があります。そのため最新版をインストールすることをおすすめします。ここまでが、AIR開発を行うための事前準備です。
準備ができたら早速、AIRアプリケーションを作成してみましょう
※ Dreamweaverでサイト定義を行っていない場合は、本追加機能は非表示状態で使用できません。
AIRアプリケーション作成の第一歩として、簡単なDreamweaverドキュメントを作成し、そこからAIRアプリケーションを作成してみましょう
新規にAIRアプリケーションを作成する場合には、サイト定義を行う必要があります。「サイト」メニューから「新規サイト」を選択します。次に簡単なWebサイトを構築します。「ファイル」メニューから「新規」を選択し、カテゴリ:「空白ページ」、ページタイプ:「HTML」、レイアウト:「2列をハイブリッドに、左にサイドバー、ヘッダーとフッター」を選択します。作成後、「ファイル」メニューから「保存」をクリックします。htmlと名前を付けて保存します。ドキュメントの準備ができたら、AIRアプリケーション設定を追加します。ただし、使用できる文字はASCIIキャラクターのみで、ファイル名の最後にピリオドを使用することはできません。
Name:ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示される名前
なお、文字の使用に制限はありません。
ID:作成したアプリケーションに割り振る固有のID
IDに使用できる文字は、英数字と「ドット(Version:アプリケーションのバージョンを指定します。「Browse」ボタンをクリックして、スタートページを選択します。スタートページは、必ずルートフォルダ内に置く必要があります。
Description:ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示されるアプリケーションの解説
この情報はWindowsにインストールされたアプリケーションには使用されません。このアイコンに使用できる画像の形式はPNGのみです。また、画像ファイルは、アプリケーションのフォルダ内に置く必要があります。Application Updates:チェックボックスをつけると、AIRアプリケーションの実行に必要なバージョンのAIRがユーザーのマシンにインストールされていない場合、アップデートが促されます。AIRアプリケーションでは書き出しにはこの設定が必要です。初期状態では、Webサイトのルートとなっており、「Browse」ボタンをクリックして任意の場所を指定することができます。htmlファイルを参照させます。xml(アプリケーションの設定を書き込むXML ファイル)のみが追加されています。ここまでの設定で、AIRで実行されたプレビューができるようになります。AIRアプリケーションが表示されました。最終出力の前に、AIRアプリケーションの作成には、デジタル署名を使用します。※Digital Signature(デジタル署名)は、アプリケーションの作成後にコードの変更が行われていないことや、コードが破損していないことを保証するためのものです。AIRアプリケーションを配布し、他のユーザーが利用できるようにするには、必ずこのデジタル署名が必要となります。このデジタル署名には、商用の証明書だけでなく、アプリケーション制作者自身が発行する自己証明書を使用することができます。なお、後でデジタル署名を追加するという前提で一時的に署名なしでアプリケーションファイルを作成することもできます。以下の手順でデジタル署名を設定します。
※デジタル署名は、Acrobatなどで使用されているデジタル署名ファイル(拡張子
ここでは、新規にデジタル署名を作成してみましょう
デジタル署名の内容を入力し[OK]ボタンをクリックします。商用の証明書を使用するには、「Browse」ボタンをクリックして証明書を選び、パスワードを入力して「OK」ボタンをクリックします。Type項目ではセキュリティのレベルを設定します。最後に「OK」ボタンを選択します。ここまででAIRアプリケーションを書き出すための設定が完了です。
AIRアプリケーションの実行
書き出したAIRアプリケーションファイルを確認します。air」がAIRアプリケーションインストーラーです。ダブルクリックで実行します。デスクトップのアイコン配置・スタートメニューの項目追加・インストール場所を設定します。※インストールには使用しているコンピューターの管理者権限が必要です。インストールしたAIRアプリを実行すると作成したAIRアプリが確認できます。
もっと学ぶには
Dreamweaverの基本しっかりとおさえたい方にオススメのトレーニングコースです。基本的なWebサイト構築における手順、サイトのナビゲート、CSS(カスケーディングスタイルシート)を使ったWebページのレイアウトのデザイン、大規模なサイトの構築や維持管理の手法など、サイト制作に欠かせない要素を多数ご説明します。
著者について
m-School(エムスクール)は、プロフェッショナルのためのアドビ認定トレーニングセンターです。“あなたが今、必要とするスキル”が即座にマスターできる、短期集中の講座を多数ご用意しています。法人研修や出張講座の実績も多数あり、すぐに業務で活用できるノウハウをご提供しています。運営は、教育関連事業で90年の実績がある学校法人駿河台学園(駿台予備学校)グループの、エスエイティーティー株式会社が行っています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
テキストデータの活用
印刷用に表示
デザインビューの活用
デザインビューはWYSIWYGベースでページ制作を行うことができ、コードビューはソースコードを直接書きながらページ制作を行うことができるものです。Web制作者は、ソースコードを中心に書くことが多く、比較的多くの方がこちらをメインで使われていると思います。反対に、デザインビューは、ソースコードを意識しないという利点があるものの、Web制作のプロの目からはどうしても初心者的な感じを受けることが多いところでもあるかと思います。しかし、実際にはデザインビューにはとても便利な機能が隠されていて、スピーディーな制作現場に於いては、役立つ機能があります。そこで、デザインビューの隠れた機能をここで紹介していきながら、デザインビューを使った最新の機能をご紹介していこうと思います。この記事では、以下のソフトウェアを使用しています。
著者について
アンカーテクノロジーで Web サイト構築における品質管理部門を担当する傍ら、テクニカルライター、テクニカルトレーナーを行う。近年は、制作会社やデザイン会社、一般企業向けの Dreamweaver トレーニングなども行っている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
携帯サイトのページでは、表示スペース、ファイルサイズの縮小のため、カナ文 字の表示に、全角カナは使わず、半角カナを使って表示するのが通例です。また、PC用のサイト場合では、Windows用のPCの機種依存文字はMacでは文字化けしてしまうので、これも別の文字に置き換える必要があります。同じく、半角で書かれている原稿を全角に戻す場合にも利用できます。「全角半角の変換」コマンドは、ページ中に含まれる全角カナを半角カナへ、機種依存文字を通常の文字へと置き換えができます。この記事では、以下のソフトウェアを使用しています。
拡張機能のダウンロード(コマンドを実行するには、メニューの【コマンド/機種依存文字・全角半角の変換】を選択します。ダイアログでコマンドの実行の設定を行います。チェックすると、上で設定した内容でページを検索し、変換せずにレポートのみを表示します。
機種依存文字を変換
チェックすると、機種依存文字を通常の文字に変換します。
半角カナを全角カナに変換
半角カナを全角カナに置き換えます。
全角カナを半角カナに変換
全角カナを半角カナに置き換えます。
全角数字を半角数字に変換
全角数字を半角数字に置き換えます。
全角英字を半角英字に変換
全角英字を半角英字に置き換えます。実行すると、ページ内の文字が置き換わり、置き換えた内容はレポートパネルに表示されます。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
しかし、必ずしもAjaxによる通信をせずとも、ユーザーの利便性を高めることもできます。この記事では、以下のソフトウェアを使用しています。
サンプルファイルのダウンロード(挿入バーの「Spry」タブから必要な部品を挿入します。図の赤で囲んだところが入力検査の部品になります。それぞれの入力フォームに対して入力チェックを行い、必要に応じてエラー表示を自動で行う機能を提供します。SpryWidgetの入力検査は、ユーザーがサーバーにデータを送信する前にエラーをチェックすることで、ユーザーにデータ送信に対する不安を抱かせないようにすることができ、フォーム画面での離脱率改善が期待できます。
ここではテキストフィールド入力検査で簡単な必須入力チェックをしてみましょう
まず、挿入バーのテキストフィールド入力検査アイコンをクリックします。テキストフィールド入力検査をクリックすると、以下のように挿入されます。次に、プロパティインスペクタで、プレビューの状態を「必須」に切り替えます。
すると編集画面上では必須入力時に表示されるエラーメッセージが表示されますので、適切なエラーメッセージに変えましょう
ここで一旦、HTMLを保存してみましょう
すると、Dreamweaver CS3の方で自動的に今までに組み込まれた入力検査のファイルの保存を求めてきます。エラーメッセージ表示の見た目や位置については、ここで組み込まれるCSSファイルを変更すること調整することができます。
さて、プレビューをしてテストしてみましょう
ブラウザを立ち上げて、何も入力しないでSubmitボタンを押してみると、エラーメッセージが表示されてSubmitが抑止されます。今回は必須チェックのみの設定ですので、テキストフィールドに何か文字を入力してSubmitすると正常に次の画面にデータを送信することができます。入力可能な文字数の制御などは、テキストフィールド入力検査のプロパティインスペクタから設定できます。1となっております。4ですから若干バージョンアップが行われております。
ラジオボタンの他にパスワードの再入力チェックなども配布されおり、最新版を使いたいケースも出てくるでしょう
組み込む際は自己責任でお願いします。手動でラジオボタンの入力検査を追加して、ユーザーにラジオボタンの選択チェックを行います。以下のようにローカルフォルダにコピーしました。
最初は、ここから必要なコードをコピーしながら、新しい機能を組み込みましょう
以下がサンプルのHTMLです。フォームのマークアップと、エラーメッセージの記述位置に関する構造は、Spry Widgetの方で決まっているので、この構造を壊さないようにします。を示すマークアップとなります。さらにエラーメッセージを追加する場合は、このクラス名を変えたspan要素を追加します。詳しくはドキュメントを見てください。
いつ、どのようなエラーチェックを行うか
というのもここに指定します。先ほどのコードをコピーしてブラウザでプレビューしてみますと、ラジオボタンの入力検査が組み込まれていることがわかります。今回はラジオボタンを組み込みましたが、他のSpry Widgetも同じような方法で組み込むことができます。ここで説明した3つのポイントを覚えておけば、パスワードの再入力チェックやツールチップや、レーティングなど便利なWidgetを利用することができますので、是非ともチャレンジしていただければと思います。
・Spry入力検査のエラー表示のアクセシビリティ対応について
これに関してはエラーメッセージを画像で作成し、altに文字を書かないことで対処できます。Spry Widgetの有無に限らずサーバサイドで値のチェックは必要になりますから、読み上げブラウザやJavaScriptがオフの人に向けては、サーバサイドの検査でエラーメッセージを表示するようにしてください。
・エラー表示のリッチコンテンツ化
応用編として、エラー表示のリッチコンテンツ化も可能です。Spry Widgetのエラー制御は、エラーメッセージが記述されたspan要素の可視を切り替えるものですので、その中にエラーを説明するFlashアニメーションを配置して、その場でFlashアニメーションや動画を使って案内したり、iframeを使ってhelpページをオーバーレイ表示したりするなどで、より高度な「おもてなし」を行うことが可能です。フォームのsubmit時にエラーがあった場合に、共通した表示をsubmitボタンの近くに表示することもできます。詳しくは以下のサンプルをごらんください。6から対応しております。
サンプルページへ
著者について
EC事業本部にて、「カラメル」のプロデューサーをしています。Flash 4の頃からサーバとリッチクライアントとの連携を意識しながら企画、開発 をしてきました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この記事では、以下のソフトウェアを使用しています。2004年6月20日に制定された規格で、正式名称は『高齢者・障害者等配慮設計指針 -情報機器における機器,ソフトウェア及びサービス -第三部:ウェブコンテンツ』といいます。うち、必須レベルが 27項目、推奨レベルが12項目あり、官公庁や地方自治体はもちろん、企業のサイトでも業種を問わずに取り組みが進められている規格です。0』 をふまえて改定される予定になっています。この「アクセシビリティ拡張機能 JIS 対応版」は、マクロメディア(当時)と富士通が共同開発し、インフォアクシアがリファレンスの監修を行いました。この拡張機能は、JIS X 8341-3 の全てのガイドライン項目に対応したチェックが可能なだけでなく、リファレンスパネルには『富士通 ウェブ・アクセシビリティ指針』から解説文を引用するなど、アクセシビリティの初心者でも学習しながら使用できるもので、無償でダウンロード配布されていました。
チェック機能の使い方
チェック結果の見方
(要確認)」 に分類されて表示されます。×マークは、例えば画像の<img>要素にalt属性がないというように、明らかに問題があり修正しなければならない問題を示しています。マークは、例えばalt属性はあるけれども、そこに記述されている代替テキストが適切かどうかを確認しなければならないというように、人間の目で問題の有無を判断する必要がある箇所を示すものです。
アクセシビリティのチェックは、全てを自動化することは不可能なので、Dreamweaverのチェック機能でもこの
マークで判断を促される箇所がたくさん指摘されます。最初はその数の多さに圧倒されてしまうかもしれませんが、徐々にその対処方法が身についてきて、チェックに要する時間も短縮されていくはずです。
困ったときにはリファレンスパネル
また、特に最初のうちは、結果パネルで指摘される問題点の中には、どう対処すればよいか分からないものもあるでしょう
そんなときには、リファレンスパネルでそのガイドラインに関する詳細な解説を参照することが可能です。そして、このリファレンスには、富士通のアクセシビリティ指針から分かりやすい解説文が引用されていますので、しっかり活用してください。デフォルトでは、JIS X 8341-3の必須レベル項目プラス重要な推奨レベル項目でチェックする設定になっています。これだけでも相当な数のチェック項目が含まれていることになるのですが、このデフォルトの設定で全てをクリアしなければいけないかというと、必ずしもそういうわけではありません。アクセシビリティのチェックは、(X)HTMLのバリデータと異なり、全部をクリアする必要はないのです。アクセシビリティに取り組む際には、まずそのサイトでどこまで対応するかを決めておく必要があります。独自のガイドラインを作成しているサイトもありますが、そこまでしなくてもJIS X 8341-3 のガイドライン項目で一つひとつ対応する/しないを決めるという方法もあります。
サイトの目的やターゲットユーザー層に合わせて、何をどこまで対応していくのかをルール化して共有することから始めましょう
そのサイトで確保すべきアクセシビリティガイドラインの項目が定まったら、それに合わせて「Dreamweaver CS3」のチェック内容もカスタマイズしていきます。カスタマイズの方法はとても簡単です。手順2: [レポート] ダイアログボックスの [レポート設定]ボタンを押します。手順3: カテゴリルールから任意のカテゴリを選択して、各チェック項目を確認しながらチェックする項目は[テストする] ボタン、チェックしなくてよい項目は[テストしない] ボタンで取捨選択していきます。手順4: チェック項目の取捨選択が終わったら、[保存]ボタンを押してください。これでカスタマイズは完了です。実際の制作ワークフローを考えると、このようにカスタマイズした設定は、そのサイトの制作に関わるメンバー全員で共有したいですし、もしサイト運営者側でもDreamweaver CS3を使用しているならば、やはり共有できてこそ初めて意味があるともいえます。しかし、CS3にはその機能がないので、次期バージョン CS4では是非カスタマイズ内容を共有できるようにしてほしいところです。裏技: CS3でも設定ファイルを共有できる。しかし、実はCS3でも誰かがカスタマイズした設定を他のメンバー全員で共有することができます。チェック内容をカスタマイズして保存した後、その設定ファイル(XMLファイル)をコピーすれば他のユーザーと共有することができるのです。設定ファイルは、以下のディレクトリにあります。
複数のサイトを同時進行で作業している場合は、サイトごとに設定ファイルを用意して別々に保存しておくとよいでしょう
ただし、このXMLファイル名を変更することはできません。より多くのユーザーがより多くの状況でそのコンテンツを利用することができるように、皆さんもDreamweaver CS3のアクセシビリティチェック機能をフルに活用してみてください。また、Dreamweaver CS3には、ここでご紹介したチェック機能のほかに、画像、テーブル、フォームなどを簡単にアクセシブルにできる機能も用意されています。詳細は、書籍「Dreamweaver プロフェッショナル・スタイル」(毎日コミュニケーションズ)で解説していますので、あわせて参考にしてください。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
もうテキストエディタには戻れない | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
もうテキストエディタには戻れない。デザインビューで確認しながらページ制作をおこなえるのが魅力のDreamweaverですが、マークアップに特化したソフトですので、HTMLエディタとしても大変便利な機能が盛りだくさんです。デザインビューだけでなく、コードビューをうまく活用し、作業の効率化を図るためにこれだけは覚えておきたい機能や、ショートカットなどをご紹介させていただきます。いままで、他のテキストエディタなどで作業されていた方も、一度Dreamweaverのコードビューで作業していただき、その優位性を認識していただけたら幸いです。この記事では、以下のソフトウェアを使用しています。ソースコードを見やすく、操作のしやすい表示に整形する。ページを制作する際に、テンプレートなどを用いて制作をされることと思います。その際、記述・変更をする必要のない各ページ共通モジュール(ヘッダ、ナビゲーション、フッタなど)があると思います。コードビューで操作をされる方にとって、これらのコードは目的の行(記述をおこなう行)へ移動する際の障害となります。この機能を用い、操作のしやすいソースコードに整形することが可能です。そしてタグを選択する際にも、単純に選択するのではなく、ショートカットの「親タグを選択する」を用いると素早く目的のタグを選択することが可能です。[ ソースコード整形に関するショートカット ]親タグを選択する。タグをたたむ。選択範囲をたたむ。
たたんだ箇所の展開
■タグの整形
(上図ではhref属性の値をたたんでいます)
ショートカットを用いたタグの挿入
これはコードビュー独自の機能で、特定の文字を入力した際、入力しようとしてるタグの候補をメニュー表示てくれます。表示されたメニューは選択可能となり、タグの記述を省略できるとともに、記述ミスを防ぐことにもなります。そして、Dreamweaverにはあらかじめ用意されたタグ記述のショートカットもあります。ショートカットを使用することにより、タグを記述することなく挿入することが可能です。特に見出しの挿入や画像の挿入は大変便利ですので活用されることをお勧めします。また、ページ制作の際に原稿データからテキストをコピーし、ペーストして文章を流し込むことが多いと思います。その際、特定の文字列に対してタグの設定が必要な場面があると思います。そのような時には折り返しタグの挿入を用いタグを設定すると大変便利です。コードヒントやショートカット用い、記述にかかる時間の短縮と記述ミスを無くし効率化を図ることが可能です。[ タグ記述のショートカット ]
見出しの挿入
折り返しタグの挿入
+(対象の文字を選択して)
■折り返しタグの挿入
タグを指定したいテキストを選択します。タグを挿入したい文字列が選択されていることを確認し、ctrl+T(macの場合comand+T)で折り返しタグ挿入のウインドウを展開し、折り返しタグを挿入します。
その他覚えておきたいショートカットや機能
Dreamweaverにはその他にも便利なショートカットや機能が用意されています。行の移動の際に、移動したい行番号がわかっている場合など、スクロールバーやカーソルで移動するのではなく、ショートカットで移動すると大変便利です。またインデントの挿入・削除もショートカットを用いれば複数行に対して適用させることも可能です。[ その他覚えておきたいショートカット ]
行を指定して移動
インデントの挿入
インデントの削除
挿入したい画像を選択しコピーします。コードビューにペーストすると「イメージプレビュー」ウインドウが展開されますので、ファイル形式やファイル名を指定して保存します。作業者の方々は、限られた時間内で作業をすることが多いと思います。ミスのない確実な作業は最低限求められることですが、効率よく作業を行うことも作業者に求められる重要なスキルです。Dreamweaverを使用するメリットは様々ですが、大まかにあげると以下の3点があげられます。
作業ルールの統一化
作業の効率化
ファイル管理の一元化
著者について
横浜生まれ根性育ち
気合と根性で Web 業界をかろうじて生き抜く(予定)
2008年1月コスモ・インタラクティブを退職し、HOT なメンバーと共に株式会社ワンパクを立ち上げる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ラクラクかんたん
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷用に表示
ラクラクかんたん
この記事では、以下のソフトウェアを使用しています。
サンプルファイルのダウンロード
著者について
Adobe製品を中心に、DTP・WEB・VIDEOに至るまで、マルチメディアコンテンツクリエイターとして幅広くコンテンツ制作を行う。
豊富な経験と知識をもとに、講師としても活躍中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ラクラクかんたん
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ラクラクかんたん
flv」ファイルを用意しました。
新規HTMLファイルを作成し、このドキュメントにFLVファイルを配置しましょう
[ファイル]パネルよりドラッグ&ドロップ
ブラウザプレビューを行い、Flash Videoが再生されることを確認しましょう
表にまとめると、下記のようになります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Dreamweaverには拡張機能という、他の製品で言うところのマクロのような機能が搭載されています。拡張機能を使うことで、繰り返し作業を自動化したり、Dreamweaverに搭載されていない機能を自分自身で付け足していくことが出来ます。今回は、筆者が制作した、CSSのプロパティーを指定した順番に並び替える拡張機能「CSSプロパティーフォーマット」をご紹介します。この記事では、以下のソフトウェアを使用しています。
CSSを使ってサイトを制作する時に起こりがちなこと
昨今、CSSを使ってサイトを制作する機会が多くなってきているかと思います。
そのようなサイトを制作する際は、Fireworksなどでサイトのデザインを組み、そのデザインをHTMLとCSSに落とし込んでいく作業をされているのではないでしょうか
その際、一度HTMLとCSSを書いただけでFireworksのデザイン通りに落とし込めることは希で、各種ブラウザでプレビューしつつ、Dreamweaverに戻り、フォントサイズを調整したり、パディングを調整したり、と言ったような微調整を繰り返すことが多いかと思います。そう言うことを繰り返していると、いつの間にかCSSセレクタ内のプロパティーの並び順がバラバラになってしまうことがままあります。以下はh1タグの装飾の微調整を繰り返した結果のCSSです。ご覧になって分かるとおり、ボーダー関係のプロパティーがセレクタ内の上と中と下に散らばって存在しています。
サイト制作直後は、どのようなCSSを書いたかが頭の中に残っているので困ることは少ないかもしれないのですが、例えば1ヶ月後にメンテナンスをしようと思った際、このセレクターを見て、ブラウザでレンダリングされた際にどのような見た目になるかを想像するのは少々手間がかかる事でしょう
CSSにもコーディングスタンダードを
このように、セレクタ内のCSSのプロパティーの並び順が統一されていないと、後々のメンテナンスに手間がかかってしまうことが容易に想像されます。
そのような事態を避けるためにはどうしたらよいのでしょうか
この問いに対する1つの答えは、HTMLやJavaScriptなどにコーディングスタンダードがあるように、CSSにもコーディングスタンダードを導入する、というものです。
例えば、『セレクタ内でのCSSのプロパティーの並び順はマージン→パディング→ボーダー→
の順番に必ず並べるようにする』と言った社内規則を作り、それを守ると言うことです。『コーディングスタンダード通りに作れば、CSSセレクタ内のプロパティーは必ず決まった順番になる』と言う状態にしておくことで、あるセレクタのレンダリング結果をパッと見て把握しやすくすることが出来ます。
このようにしておくことで軽減される後々のメンテナンスコストはかなりのものになるでしょう
しかし、コーディングスタンダードを守ることは大変
しかしながら、実際問題として、納期に追われながらコーディングをしている時に、"コーディングスタンダードでは、このCSSプロパティーはあのプロパティーの前に入れないといけないんだよね"と言ったことを意識しながら作ることは大変手間がかかるので、ついついセレクタの末尾にプロパティーを追記していってしまう、と言うのが普通でしょう
その結果、せっかく制定したCSSコーディングスタンダードが守られることなく、後々のメンテナンスの際に手間がかかってしまうと言うことがよくあるのです。手間がかかることは拡張機能で自動化してしまう。制作時はとりあえず追記して、納品の直前にコーディングスタンダード通りにプロパティーをコピー&ペーストして整列する、と言うのも一つの手です。ただ、昨今のCSSベースのサイトでは、CSSファイルの総行数が数百行と言ったこともよくあることで、それだけの規模の物をコーディングスタンダード通りに手動で並び替えるのも手間がかかります。前に述べたとおり、拡張機能とはマクロのようなもので、定型作業の自動化を行うことが出来ます。従って、拡張機能を使うことで『CSSコーディングスタンダード通りにCSSのプロパティーを並び替える』と言った機能をDreamweaverに付け足すことが出来ます。そして、そのような機能をDreamweaverにインストール出来るようにパッケージ化したものが、今回ご紹介する「CSSプロパティーフォーマット」です。CSSプロパティーフォーマットをつかう。編集まずは、CSSプロパティーフォーマットをダウンロードしてください。ダウンロード後、ファイルをダブルクリックすると、Extension Managerが立ち上がり、CSSプロパティーフォーマットをインストールするかどうかを聞いてきますので、「承諾する」を押しインストールします。
すると、メインメニューの[コマンド]の中に[CSSプロパティーフォーマット]と[CSSプロパティーフォーマットの設定
]と言う項目が追加されていることが確認できるかと思います。
では、実際に使ってみることにしましょう
先ほど例に挙げた、コーディングスタンダードが守られていないh1タグのセレクタを以下に載せますので、コピー&ペーストして、style
cssなどの名前で適当な場所に保存してください。保存した後、保存したCSSファイルを開いたまま、メニューから[コマンド]-[CSSプロパティーフォーマット]と選びます。すると、自動的に以下のように並び替えられるかと思います。ご覧の通り、同じ系統のプロパティーが同じ箇所に来るように整列されました。このように、手間になってしまう作業は、Dreamweaverでは拡張機能で自動化することが出来るのです。CSSプロパティーフォーマットの設定をする。CSSプロパティーフォーマットでは初期値で一定の順序にCSSのプロパティーを並び替えるように設定されていますが、それを独自で指定したCSSコーディングスタンダード通りに変更することも出来ます。
変更するには、メニューから[コマンド]-[CSSプロパティーフォーマットの設定
]と選びます。すると、以下のようなダイアログが開き(図1)、CSSのプロパティーがテキストエリアに並んでいるのが確認できるかと思います。CSSプロパティーフォーマットでは、このテキストエリアに並んでいる順番に整列を行うため、ここでの順番を独自で指定したコーディングスタンダード通りに変更し、「保存」ボタンを押すことで、コーディングスタンダード通りに並び替えが行われるようになります。
実際のコードを見てみましょう
htmなどのファイルが有るのが分かるかと思います。]で表示されるダイアログです。こちらで有用な拡張機能を入手することも出来ます。また、ご自身で制作された拡張機能をAdobe Exchange上で公開することも出来ますので、腕に自信のある方は是非公開してみてください。Dreamweaverには拡張機能というマクロのような機能があり、定型作業を自動化したり、Dreamweaverに備わっていない機能を自分で付け足していくことが出来ることが分かりました。また、拡張機能はHTMLとJavaScriptで出来ているため、Web制作を行っている人にとっては、比較的簡単に開発できる可能性があることが分かりました。
著者について
2002年から2004年にかけマクロメディアにインターンで在籍し、Web関連製品に関わる仕事をする。
2008年2月に合同会社レゾリューションズを設立
Web製作会社を支援するソフトウェアやサービスを設計・開発する日々
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
サッポロビールにおけるテンプレート活用事例 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
テンプレート化は大変
印刷用に表示
サッポロビールにおけるテンプレート活用事例
私が所属する株式会社ビジネス・アーキテクツでは、2007年6月にサッポロビール・コーポレートサイト(以下、サッポロビールWebサイトと呼称)のリニューアルを行い、私はその中でテンプレート設計・構築を担当しました。この記事では、このサイトにおいてDreamweaverテンプレートをどのような目的で、どのような形で使用しているかを解説します。この記事では、以下のソフトウェアを使用しています。
著者について
大規模プロジェクトの CSS サイト構築・製品プロモーションサイトの設計・モバイルコンテンツ構築も手がけるデバイス非依存実装のスペシャリスト
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
サッポロビールにおけるテンプレート活用事例 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
テンプレート化は大変
サッポロビールにおけるテンプレート活用事例
本サイトでは、全体で200~300ページある中、製品情報などの更新が頻繁に発生する部分の多くをDreamweaverテンプレートとして実装しました。以下がその実際のページとテンプレートとの比較です。
情報の更新だけでなく、ページ追加もクライアント側で
このうちビアファインのページはリニューアル時には存在しておらず、運用を行う中でクライアントが新製品の発売に合わせて作成したものです。他の商品ページと比較しても、遜色なくページが作成されています。またビアファイン追加に伴ってサイトの構造も変化していますが、例えばビールのブランド一覧やローカルナビゲーションを見ても、それらの変更が正しく反映されていることがわかります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
サッポロビールにおけるテンプレート活用事例 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
テンプレート化は大変
サッポロビールにおけるテンプレート活用事例
テンプレート化は大変
実はページを作るとき、ある程度は考えているはず
製品情報以外のカテゴリでも、更新が掛かる箇所はDreamweaverテンプレートとして各ページに展開しています。
知る・楽しむ
多くのページに対し、これらの機能を盛り込んだDreamweaverテンプレート化を行うことは大変に思えるかもしれません。しかし、Webサイトを制作するときは運用のことを考えずに制作することは稀です。つまり、このようなケースのときにはこう対応する、ということはサイトを設計する時点で考慮しているはずなのです。であれば、あとはどうDreamweaverテンプレートの形に落とし込むかを考え、実装すればよいだけです。
設計はあえて紙とペンで
サッポロビールWebサイトの場合は、仕様書とそれに基づいたデザインをまず紙に出力し、蛍光ペンで編集可能領域・リピート領域・テンプレートオプションなどを明示していきました。意外に思われる方もいらっしゃるかもしれませんが、実は素早く検討と修正を繰り返すことができ、またいくつかのページに対して同じ作業を行っていくうちに「このリピート領域はこちらでも使える」「このメニューブロックはこちらと同じもので行ける」というようなことが感覚的に見えてくるため、おすすめです。
テンプレートの各項目名はこの時点で精査しておきましょう
入力内容や行える操作がわかりやすい名前であるか、ほかの項目名と整合がとれているか、細かいようですが後からの使いやすさに影響してきます。
各領域の親子関係について正しく理解した上で設計に着手するようにしましょう
たとえばリピート領域の中にオプション領域は設定できませんし、編集可能領域内に別の領域を設定する場合はテンプレートをネストする必要があります。
編集はテキストエディタで
テンプレートの制御はすべてコメントを利用したテンプレートタグで行われているため、実装時はDreamweaverのメニューを使用せず、テキストエディタを使用してテンプレートタグを直接書き込んでいきました。その際、以下のようなテキストをすぐに挿入できるような形(クリップボード拡張ツール、IMEに辞書登録など)にしておくと便利です。なおテキストエディタでなく、コードビュー+スニペットでも同じことが実現できると思います。この手法で作るときはDreamweaverをテンプレートの構文チェッカーとして利用しました。作成したテンプレートをDreamweaverで開くと、エラーがあった場合に該当箇所を指摘してくれるのです。
テンプレートからページ作成ではなく、ページからテンプレート化
この手法を応用すると、既にあるページをテンプレート化することもできます。
テンプレートから展開されたページには
参照するテンプレートのパス
そのテンプレートで使用しているテンプレートタグがインスタンスタグに置き換えられたもの
が書き込まれており、これによってどのテンプレートからどんな形で作成されたかをDreamweaverが判断しています。既存のページの要素を最小限にし、内容をサンプルに変える。
保存したページに書かれているテンプレートへのパス、インスタンスタグを実際のページにテキストエディタなどで移植
というステップを踏むと、もともとDreamweaverテンプレートありきでそこからページが作成されたような状態を簡単に作ることができます。インスタンスタグの詳細などは省きますが、こういう使い方もあるということを覚えておくと役に立つことがあるかもしれません。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
サッポロビールにおけるテンプレート活用事例 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
サッポロビールにおけるテンプレート活用事例
私が所属する株式会社ビジネス・アーキテクツでは、2007年6月にサッポロビール・コーポレートサイト(以下、サッポロビールWebサイトと呼称)のリニューアルを行い、私はその中でテンプレート設計・構築を担当しました。この記事では、このサイトにおいてDreamweaverテンプレートをどのような目的で、どのような形で使用しているかを解説します。この記事では、以下のソフトウェアを使用しています。本サイトでは、全体で200~300ページある中、製品情報などの更新が頻繁に発生する部分の多くをDreamweaverテンプレートとして実装しました。以下がその実際のページとテンプレートとの比較です。
情報の更新だけでなく、ページ追加もクライアント側で
このうちビアファインのページはリニューアル時には存在しておらず、運用を行う中でクライアントが新製品の発売に合わせて作成したものです。他の商品ページと比較しても、遜色なくページが作成されています。またビアファイン追加に伴ってサイトの構造も変化していますが、例えばビールのブランド一覧やローカルナビゲーションを見ても、それらの変更が正しく反映されていることがわかります。
このような経験、ありませんか
例えばWebサイトを新しく作ったりリニューアルしたあとの運用の過程で、サイトに以下のようなことがおきた経験はありませんか
画像は修正されているが、altが修正されていない。ソースのコピーペーストを失敗したのか、レイアウトが崩れてしまった。特定の局面で使うパーツが用意されているのに使われていない。とにかく目だ立たせようと、赤くて太い文字になっている。これらの問題はひとつひとつは小さく、修正も困難ではありません。しかしサイト内のいろいろなページで問題が発生していたり、どのような経緯で問題が発生したのかがわからない場合、調査・修正作業は膨大なものとなり、本来無用な負担がWebサイト制作者と運用担当者の両方に生じます。マニュアルだけでは解決しづらい。しかし、このような問題が起きたからといって、正しくない運用を行った担当者にばかり責任があるわけではありません。その人は正しい運用の手順を知らないか、あるいは忘れてしまったまま、目の前にある作業をとりあえず終わらせる必要にせまられて実行しただけなのです。このような問題は運用マニュアルによって解消される部分もありますが、それでも作業者がマニュアルの手順を正確に覚えなければなりませんし、また作業者が交代するたびに教育しなおすことは避けられません。つまり運用時の作業が頻繁に発生するWebサイトでは、必ずしもマニュアルだけで万全とは言えないのです。
「どうしたいか」を共有→「何をしていいか・いけないか」を可視化
この問題を解決するには、まずwebサイトを作成するとき、あらかじめ「運用時にどのような作業が発生するか」つまり「どうしたいか」をWebサイト制作者と運用担当者が協力して細部まで綿密に洗い出し、共有します。そして明らかになった「どうしたいか」に対し「何をしていいか・いけないか」という視点で分解を行い、作業者が対象のページを見たときにそれがすぐわかる、つまり可視化を行います。この可視化とは、具体的には以下のポイントを満たすようにする、ということです。
作業の一連の流れを明示
対象のページを、実際のものと同じ見た目で編集
編集できる箇所を限定
編集できる箇所をわかりやすく表示
編集のしかたをコントロール
こうすると、作業者はこれから行おうとする一連の作業に対し、あらかじめ可視化されている「こうすればいい」という内容に忠実に従っていくだけで作業が終了するため、作業者のスキルや理解度の差によるミスが格段に発生しづらくなります。また作業者の精神的負担も減るため、その点でもミスが減ります。Dremaweaverテンプレートはこの「作業の可視化」という点について非常に優れており、可視化に必要な機能の多くを備えています。
対象のページを、実際のものと同じ見た目で編集
デザインビューによって、実際のページに非常に近いレイアウトでページを編集することができます。
編集できる箇所を限定・編集できる箇所をわかりやすく表示
編集可能領域を設定することで、指定した場所以外を編集できないようにロックできます。またデザインビュー・コードビューともに、編集できる箇所が一目でわかるように色分けされています。
編集のしかたをコントロール
リピート領域によって要素の繰り返しが行えます。またテンプレートオプションによって一ヶ所に入力した値を複数の要素に反映でき、さらに条件分岐による要素のオン・オフ・切り替えも行えます。先ほどご覧いただいたビアファインのテンプレートです。デザインビューによって、実際のページに非常に近いレイアウトで編集できることがわかります。また編集可能領域の項目名と枠線を見れば、どんな内容をどこに入力すれば良いかがすぐにわかります。この4つのボタンが表示されている部分がリピート領域です。[+]ボタンと[-]ボタンで、ソースコードを崩すことなく項目を増減することができます。Webサイトを運用していく中で増減することがわかっている部分の全てに、この領域が設定されています。リピート領域には現在の要素の順番を返す機能があるため、これを使って連番画像を自動で表示していくことが可能です。
応用すると奇数・偶数の判定もできるので、メニューの左右によってclass属性を付け替えることもできます(*1)
また、[▲][▼]ボタンによって、リピート領域内での順番を入れ替えが行えます。
このサイトではインデックスページ上のメニュー項目をリピート領域として設定し、順番を入れ替えることでページへのユーザー流入数の調整を行っています(*2)
リピート領域内では、後述のテンプレートオプションが使えません。この領域内で要素のオン・オフを制御するには、リピート領域を入れ子にし、0個か1個かをリピート領域の増減で操作する方法があります。
ただし、要素をオン・オフする方法が2種類存在することになってしまうので、使いどころは限られてきます(*3)
テンプレートオプション(値の一括反映)
テンプレートオプションのひとつめの使い方として、値の一括反映があります。
このテンプレートでは[修正]-[テンプレートプロパティ]の 03_タイトル に「サッポロビアファイン」と入力することで
パンくずリストの現在地
ページタイトル画像のalt
という複数の個所に入力したテキストが反映されます。他のページをコピーして新しくページを作るときなどに起こりやすい修正漏れを防ぐことができます。
テンプレートオプション(要素のオン・オフ・切り替え)
テンプレートオプションのもうひとつの使い方として、要素の出現をコントロールする機能があります。[修正]-[テンプレートプロパティ]の 05_販売アラートは、0を入力すると非表示となり、1を入力すると製造終了版として赤枠の注釈リスト、2を入力すると新発売版としてオレンジ枠の注釈リストがそれぞれ出現します。条件分岐は入れ子にできるため、この例のように成分表ブロックと成分表の両方を表示としたときだけ出現する、という使い方もできます。数値による条件分岐だけではなく、チェックボックスによる単純なオン・オフや、今回は使用していませんが「文字列の判定」「カラーピッカー」など、多彩な入力を選択できます。テンプレートオプションの項目名は、先頭に連番を振ることでリスト上の順番を制御できます。
ページ上で出現する順番に連番を振っておくとよいでしょう
項目名の中に条件文を直接書き込んでおくと、あとから作業者が使用するときの理解の補助となり、有効です。
テンプレート化は大変
実はページを作るとき、ある程度は考えているはず
製品情報以外のカテゴリでも、更新が掛かる箇所はDreamweaverテンプレートとして各ページに展開しています。
知る・楽しむ
多くのページに対し、これらの機能を盛り込んだDreamweaverテンプレート化を行うことは大変に思えるかもしれません。しかし、Webサイトを制作するときは運用のことを考えずに制作することは稀です。つまり、このようなケースのときにはこう対応する、ということはサイトを設計する時点で考慮しているはずなのです。であれば、あとはどうDreamweaverテンプレートの形に落とし込むかを考え、実装すればよいだけです。
設計はあえて紙とペンで
サッポロビールWebサイトの場合は、仕様書とそれに基づいたデザインをまず紙に出力し、蛍光ペンで編集可能領域・リピート領域・テンプレートオプションなどを明示していきました。意外に思われる方もいらっしゃるかもしれませんが、実は素早く検討と修正を繰り返すことができ、またいくつかのページに対して同じ作業を行っていくうちに「このリピート領域はこちらでも使える」「このメニューブロックはこちらと同じもので行ける」というようなことが感覚的に見えてくるため、おすすめです。
テンプレートの各項目名はこの時点で精査しておきましょう
入力内容や行える操作がわかりやすい名前であるか、ほかの項目名と整合がとれているか、細かいようですが後からの使いやすさに影響してきます。
各領域の親子関係について正しく理解した上で設計に着手するようにしましょう
たとえばリピート領域の中にオプション領域は設定できませんし、編集可能領域内に別の領域を設定する場合はテンプレートをネストする必要があります。
編集はテキストエディタで
テンプレートの制御はすべてコメントを利用したテンプレートタグで行われているため、実装時はDreamweaverのメニューを使用せず、テキストエディタを使用してテンプレートタグを直接書き込んでいきました。その際、以下のようなテキストをすぐに挿入できるような形(クリップボード拡張ツール、IMEに辞書登録など)にしておくと便利です。なおテキストエディタでなく、コードビュー+スニペットでも同じことが実現できると思います。この手法で作るときはDreamweaverをテンプレートの構文チェッカーとして利用しました。作成したテンプレートをDreamweaverで開くと、エラーがあった場合に該当箇所を指摘してくれるのです。
テンプレートからページ作成ではなく、ページからテンプレート化
この手法を応用すると、既にあるページをテンプレート化することもできます。
テンプレートから展開されたページには
参照するテンプレートのパス
そのテンプレートで使用しているテンプレートタグがインスタンスタグに置き換えられたもの
が書き込まれており、これによってどのテンプレートからどんな形で作成されたかをDreamweaverが判断しています。既存のページの要素を最小限にし、内容をサンプルに変える。
保存したページに書かれているテンプレートへのパス、インスタンスタグを実際のページにテキストエディタなどで移植
というステップを踏むと、もともとDreamweaverテンプレートありきでそこからページが作成されたような状態を簡単に作ることができます。インスタンスタグの詳細などは省きますが、こういう使い方もあるということを覚えておくと役に立つことがあるかもしれません。
マニュアルとセットで
作業を制限して可視化することで運用時の問題はかなり解消されますが、全体的な作業の流れを示したり、画像の作成方法などのページそのものの編集ではない部分を解説するには、やはりマニュアルが必要です。サッポロビールWebサイトでは更新ガイドラインを用意しており、「新製品を追加するには」「製品を削除するには」など、サイトに対する修正を目的軸で分類し、そこに対して必要となる具体的な修正作業手順を説明するという形態を取ってます。テンプレートが必要かどうか、常に考える。テンプレートを設計・開発していると、テンプレート自体を高機能化する方向に考えてしまいがちです。しかし、高機能なテンプレートと使いやすいテンプレートは必ずしも一致しません。
ひとつのテンプレートで切り替えるのではなく、テンプレートを分割したほうがよいのではないか
リピート領域やテンプレートオプションを使わず、編集可能領域によって直接書き込んだり、他ページからコピーしたりする程度でよいのではないか
そもそもテンプレートにする必要がないのではないか
テンプレート機能ありきでページを作ってしまっていないか
CMSやSSIなど、サーバサイドで実現したほうが効率的ではないのか
などなど、検討できる選択肢を狭めてしまわないよう、常に「作業者がわかりやすいか」「楽になるか」「更新頻度はどのくらいか」「クオリティ維持に役立つか」というあたりを気にしつつ作成するのが、よいテンプレートを作るコツだと思います。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
林 岳里(はやし たけさと)
Dreamweaverを長年使っている方でも意外と知らないまま過ごしている機能があります。
その機能を知らなくても自力で解決できるかもしれませんが、もし知っていたらどうでしょうか
なんども検索/置換を繰り返すことや、数多くあるHTMLファイルのコードを手作業でフォーマットする面倒な作業から解放され、他の作業に時間を割けるようになります。Dreamweaver使いのための「生活に役立つ小ネタ集」と題して、コードのフォーマット、検索/置換、正規表現を解説します。なお、[検索および置換]で行う設定はクエリーの保存/ロードで読み書きできます。
サンプルに同梱している拡張子
dwrのクエリーファイルを読み込んでトライしてみましょう
この記事では、以下のソフトウェアを使用しています。
拡張機能のダウンロード(サンプルファイルのダウンロード(長年コンテンツが追加され続けてきたWebサイトによくあるのが、下記のようなタグの大文字と小文字の混在です。
<h2>タグの大文字と小文字が混合しているHTMLファイル
大文字のタグをすべて小文字に統一するには
HTMLファイル全てのタグや属性の記述を小文字にしなければならなくなったらどうすればいいでしょうか
手で書き換えるとなると大変ですが、コードフォーマットを使えばファイルを開けば自動的に大文字/小文字の変換ができます。手順1:編集メニュー>環境設定>カテゴリからコードフォーマットを選択します。手順2:タグの大文字/小文字:<小文字>に設定します。手順4:常に無視する:[タグの大文字・小文字]と[属性の大文字・]小文字]をチェックします。
手順5: [OK]をクリックして環境設定を閉じれば設定完了
この状態で、タグが混在したHTMLファイルを開けばDreamweaverが自動的に大文字のタグと属性を小文字に変換します。ファイルを上書き保存すれば完了です。
<h2>タグの大文字と小文字が混合しているHTMLファイル
大文字のタグをすべて小文字に統一するには
ページの全文を検索/置換するのでなく、必要な個所だけを修正するときに便利なのが自分で選択範囲を選択できる検索対象:選択したテキストです。
では、マウスでテキストを選択して検索してみましょう
手順1:検索/置換したい個所をマウスで選択します。
(デザインビューでもコードビューでもOK)
手順2:編集メニュー>検索/置換で、[検索および置換]のウィンドウを表示します。手順3:検索対象が[選択したテキスト]になっているのを確認してから、[すべて検索]をクリックします。(検索の中に選択したテキストが挿入されるので、必要に応じて書き換えます。例では「視覚的」と入力しています。手順4:検索結果が[結果]パネルの[検索]に表示されます。該当箇所のテキストは赤いアンダーラインが表示されます。ダブルクリックするとデザインビューやコードビューの該当テキストをハイライトします。手順1:編集メニュー>検索/置換で、[検索および置換]のウィンドウを表示します。手順2:検索対象を[現在のドキュメント]に設定します。手順3:検索:[特定のタグ]に設定し、タグ名をimgと記入します。手順4:[+]ボタンをクリックし、条件を追加します。手順5:プルダウンメニューから[属性なし]を設定し、属性名をaltと記入します。手順6:アクション: [属性を設定]を設定し、属性名をaltと記入します。手順7:設定が完了したので[すべて置換]をクリックして実行します。手順8:これで完了です。すべてのimgタグにalt属性が設定されました。検索結果が[結果]パネルの[検索]に表示されます。該当箇所のテキストは赤いアンダーラインが表示されます。ダブルクリックするとデザインビューやコードビューの該当テキストをハイライトします。
タブでインデントが設定されていないコードを、設定に従ってインデントを設定する場合どうすればいいでしょうか
下記のようなインデントが設定されていないコードを変換してみます。
<h2>タインデントが全くつけられていないソースコード
綺麗にインデントを設定するには
<h3>手作業でインデントを設定するのはNGとします。手順1:編集メニュー>環境設定>カテゴリからコードフォーマットを選択します。手順2:インデント:チェックボックスをチェックし、[タブ]を選び、インデントサイズは2(半角英数字)を記入して[OK]ボタンを押します。この時、bodyタグ以下のすべてのコンテンツを選択する必要があるので、タグが入り組んでいる場合はドキュメントウィンドウの下部にあるステータスバーの表示が<body>のすぐ下の階層のタグが表示されるまですべて選択するショートカットを押します。手順6:以上で終了です。ドキュメントウィンドウをコードビューすると、タグがインデントされているのが確認できます。TIPS 5:ばらばらだったコピーライト表記を一括で書き換える。
新年を迎えたとき、Webサイトを見ていてふと目につくのがコピーライトの表記
昨年のものあるとしても、かなり古いまま放置されているページもありますよね
下記のようなバラバラの表記を一気に書き換える方法はどうすればいいでしょうか
ここでは、[検索および置換]のオプションである[正規表現を使用]をチェックしてみましょう
手順1:編集メニュー>検索/置換で、[検索および置換]のウィンドウを表示します。手順2:検索対象を[現在のドキュメント]に設定します。手順3:検索:[ソースコード]に設定します。手順6:オプション:[正規表現を使用]を設定し、[すべて置換]をクリックして実行します。手順7:変換作業が終わると、下記のようにすべてのCopyright表記が置換されます。正規表現についての説明は長くなってしまうのでDreamweaverのヘルプにある「正規表現について」や専門書に譲ることにしますが、正規表現を使うことでより高度な検索が可能になります。正規表現の使い方はプログラマーに相談してみるのもいいと思います。
1999/1/1という数字とスラッシュによる年月日の記述を1999年1月1日のように書き換えるにはどうすればいいでしょうか
ここでも先ほどの正規表現に活躍してもらいましょう
手順1:編集メニュー>検索/置換で、[検索および置換]のウィンドウを表示します。手順2:検索対象を[現在のドキュメント]に設定します。手順3:検索:[テキスト]に設定します。手順6:オプション:[正規表現を使用]を設定し、[すべて置換]をクリックして実行します。手順7:変換作業が終わると、下記のようにすべての年月日に表記が置換されます。$1年$2月$3日では、最初に検索で処理された数字を$1に挿入、その次を$2に挿入、その次を$3に挿入しています。検索結果にそれぞれ年、月、日を記入することで完成します。
TIPS 7:受け取った関連サイトのURLデータが全角英数字だった場合
クライアントから受け取った関連サイトのURLリストが下記のような全角英数字のリストで、しかもaタグでリンクを貼った状態でページを至急アップしなければならない。
という場合、あなたはどうしますか
そんな場合は「全角・半角変換拡張機能」と組み合わせて簡単に対処しましょう
html から拡張機能をダウンロードし、インストールしておきます)
手順1:URLのリストをHTMLに全角の状態でそのまま貼り付けます。手順2:コマンドメニュー>機種依存・全角半角の変化でのウィンドウを表示します。手順3:[全角数字を半角数字に変換]と[半角数字を全角数字に変換]のチェックボックスをクリックして[OK]ボタンを押します。これでURLが全て半角英数字になります。手順4:つづいて、URLをaタグでリンクを貼ります。手順5:編集メニュー>検索/置換で、[検索および置換]のウィンドウを表示します。手順6:検索対象を[現在のドキュメント]に設定します。手順7:検索:[ソースコード]に設定します。手順10:オプション:[正規表現を使用]を設定し、[すべて置換]をクリックして実行します。手順11:変換作業が終わると、下記のようにすべてのURLにaタグのリンクが付加されます。後半の正規表現の部分、実は私も最初は手こずりました。プログラマーで正規表現に慣れている方ならすぐにわかるのですが、初めての方にはちょっと敷居が高いと思います。
を理解するところから始めてみてはいかがでしょうか
ヘルプを見ないで苦労している人を多々見かけるのですが、ヘルプに多くのヒントやサンプルが記載されているので、「迷ったらヘルプを見る。」が私からのアドバイスです。
検索結果、とくに正規表現を使ったクエリーは一文字違うと意味がなくなるので、良い検索ができたらまめにクエリーを保存する習慣にするといいでしょう
日々の作業がほんの少しでも楽になれば幸いです。
著者について
林 岳里(はやし たけさと)
マクロメディア株式会社にてテクニカルエバンジェリストとして Dreamweaver を含む多くの製品の普及に従事
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
筆者のサイト
今回は MySQL データベース内のデータをブラウザに表示するページを作成する所までを見ていきましょう
必要な環境の構築
簡単なページの作成
データを表示するページの作成
3-3 レコードセットの作成
第3回 データを操作する機能を組み込む。
1 必要な環境の構築
まずは必要な環境をそろえましょう
既にエディタなどを使ってPHPとMySQLを使ったアプリケーションを開発したことがある方を想定していますので、PHPやMySQLに関しては必要な環境は準備されている方も多いかと思います。よって、以下の環境について手順を簡単に説明します。WebサーバーApacheをインストールする手順は次のとおりです。27をインストールします。
必要なファイルの入手
ダウンロードサイトからファイルを入手します。しばしば雑誌の付録CD-ROMなどに収録されていることもあります。ダウンロードサイトのURLとファイルは次のとおりです。msiをダブルクリックするとインストーラが起動します。表示される画面の指示に従ってインストールを完了してください。停止、再起動するときも同様の手順で可能です。Windowsのサービスとしてインストールされている場合は、コントロールパネルの「サービス」よりApacheを起動、停止、再起動することもできます。PHPをインストールする手順は次のとおりです。1をインストールします。
必要なファイルの入手
ダウンロードサイトからWindows版PHPモジュール一式を入手します。ダウンロードサイトのURLとファイルは次のとおりです。
図 解凍されたファイル/ディレクトリ
PHP設定ファイルのコピー
インストール先のディレクトリ内にPHP設定ファイルのひながたphp
このファイルをphp
confに次のような記述を追加してPHPが動作するようにします。MySQLをインストールする手順は次のとおりです。56をインストールします。
必要なファイルの入手
ダウンロードサイトのURLとファイルは次のとおりです。EXEをダブルクリックするとインストーラが起動します。表示される画面の指示に従ってインストールを完了してください。exeを実行するとアイコンがタスクトレイに追加されます。このアイコンをクリックすると表示されるメニューからMySQLサーバーを起動したり停止できます。アイコンが青信号のときはMySQLサーバーが動作していることを示しています。コントロールパネルの「サービス」よりMySQLを起動したり停止、再起動することもできます。
rootユーザーのパスワードを設定
起動後、MySQLをすぐに使うことが出来ますが、あらかじめ登録されているrootユーザーにパスワードが設定されていませんので、セキュリティ面を考慮してパスワードを設定します。exeがありますので、こちらをコマンドプロンプトから起動して作業します。ここはインストール直後ですのでユーザー名を指定せずにmysqlツールを起動できました。当ページでrootユーザーのパスワードを設定してanonymousユーザーを削除した後は、ユーザー名とパスワードを指定して次のように起動する必要があります。
・ユーザー名とパスワードを指定してmysql
exeを起動する場合
MySQLインストール直後はユーザー名、パスワードの指定なしにデータベースにアクセスして操作できるanonymous(匿名)ユーザーも登録されていますので、こちらを削除しておきます。
必要なファイルの入手
トライアル版ダウンロードサイトのURLは次のとおりです。入手したインストーラが起動し、表示される画面の指示に従ってインストールを完了してください。
2 簡単なページの作成
文字列を表示させる簡単なPHPスクリプトを動作させるところまで進めていきましょう
[詳細設定]タブの[カテゴリ]にて設定項目を選択して値をセットしていきます。[URL接頭辞]は、作成したサイトにアクセスするときに、URLの最初がどのようになるかを示しています。php」というアドレスでアクセスできるようになります。[ファイル] メニューの[新規] をクリックしてサイトにページを追加します。ここでは[一般]タブの[カテゴリ]から[ダイナミックページ]-[PHP]を選択します。このとき、新規作成するドキュメントの文字コードを指定しておきたい場合は[環境設定]をクリックして開く環境設定画面で設定可能です。新たにドキュメントが追加されます。次のようにコードとデザインを同時に表示させることもできます。コードウィンドウに、文字列を表示するコードを記述します。[ブラウザでプレビュー] をクリックして確認表示します。ブラウザに文字列が表示されます。「Not Found」が表示されてしまうときは、サイトの定義が上手くできていないことが考えられます。
サイトを保存したディレクトリとURL接頭辞がマッチしているかを確認しましょう
php」のようになっていることに気づかれたでしょうか
これは、作成したページを保存せずに確認表示できるように一時的に作成されたテンポラリファイルを表示しているためです。一時ファイルを使用せずに確認表示したいときは、環境設定メニューの[ブラウザでプレビュー]にて設定可能です。
3 データを表示するページの作成
MySQLデータベースに入力されているデータを表示させる所までの手順を見ていきましょう
データベースへの接続、データの取り出し、データの表示に関わる処理コードをGUI操作で組み込むことができますので順を追って説明していきたいと思います。
3-3 レコードセットの作成
データを表示させるために使うproductデータベース内にdrinkテーブルを作成してテスト表示用にデータを追加しておきます。exeで実行すると次のようになります。次のようなSQLコマンドを実行してテーブルを作成します。表示させるテストデータも何件か追加しておきます。データを追加するためのSQLコマンドの例は次のようになります。使用するデータベースに接続します。[データベース]パネルに[MySQL 接続]メニューが用意されていますので、こちらを利用してサーバー名やユーザー名などを入力します。をクリックしてMySQL接続を定義する画面を開きます。今回はPHP+MySQLという組み合わせを想定していますので、あらかじめ組み込まれたメニューで接続を定義することができます。しかし、MySQL以外のデータベースを利用するときはGUI操作による設定ができないのかという疑問もあるかと思います。任意の接続名をつけ、接続先のMySQLサーバー、ユーザー名、パスワード、データベース(さきほど準備したproductデータベース)を入力して[OK]ボタンをクリックします。[テスト]ボタンをクリックすると、定義した内容で接続できるかどうかを確認することができます。定義したデータベース接続(my1)は[データベース]パネルに追加されます。定義した情報に関するコードは作成したサイトのConnectionsディレクトリに保存されています。
ここではmy1という接続名をつけましたのでmy1
phpというファイル名で保存されています。phpを開くと次のように変数にデータベース名やユーザー名などが格納されています。
3-3 レコードセットの作成
「レコードセット」はPHPに特有の言葉ではありませんが、データベースから取り出したデータの集まりのことです。接続したデータベースからレコードセットとしてデータを取り出してブラウザに表示するという流れになります。レコードセットを追加するためのメニューも用意されていますのでこちらでどのような条件でデータを取り出すかを定義します。[バインディング] パネルから「レコードセット」を選択します。[挿入] メニューの[アプリケーションオブジェクト] - [レコードセット]からも選択可能です。任意の名前をつけ、接続(さきほど定義したmy1)、テーブル(drink)を選択すると、フィールド名が表示されます。いくつかのフィールドを選択して取り出したいときは[選択]をチェックします。ここでは[すべて]をチェックします。[フィルタ]や[ソート]では取り出すデータの条件、ソートキーを指定できますが、ここでは特に設定せずに[OK] ボタンをクリックして設定を終了します。[サーバービヘイビア]パネルを見ると、作成したレコードセットが追加されています。
レコードセットを作成したときにページ内に追加されたコードを見てみましょう
データを取り出すためのコードとリソースを解放するコードが生成されています。[レコードセット作成時に生成されたコード]
●レコードセットの作成部
●レコードセットの解放部
取り出すデータ(レコードセット)が配置できたら、取り出したデータを実際に画面に表示させます。[動的テーブル]メニューを利用すると、tableタグとループを使ってデータを表示させる時に必要なコードを生成することができます。[挿入] メニューの [アプリケーションオブジェクト] メニューの[動的テーブル] をクリックします。どのレコードセットから、1ページに何件表示するかを指定することができますので、「Recordset1」から「10レコード」を指定して[OK] ボタンをクリックします。ドキュメントウィンドウに次のようなテーブルが配置されます。この時点で、デザインだけでなくデータ表示ロジックもページ内に追加されています。「繰り返し」とあるのは、テーブル(tableタグ)のどの部分が繰り返し表示するデータ行であるかの指定(リピート領域)です。たとえば、よくある一覧表示画面のように1行目が見出しで、2行目以降がデータ行であることを指定するときに使います。[動的テーブル]メニューではフィールド名がそのまま見出し行にセットされますので、「商品ID」、「商品名」、「値段」のように日本語表記に変更します。配置したレコードセットや繰り返し領域の設定を変更するには、[サーバービヘイビア]パネルを選択します。表示された要素をダブルクリックすると設定画面が開きますのでそちらで設定の変更が可能です。[ブラウザでプレビュー] をクリックしてデータが正しく表示されるかを確認します。これでデータ表示スクリプトが作成できました。
データベースに保存されているデータを表示させるまでの手順はおわかりいただけましたでしょうか
次回はデータの追加や変更など、データベースを使ったアプリケーションの機能を組み込んでいく手順を見ていきたいと思います。
著者について
大学を卒業後、シンクタンクのシステム開発部門にて汎用機向けのシステム開発に従事
独立後はフリーでWebアプリケーションの構築や書籍の執筆をこなす。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
筆者のサイト
初回となる今回は実際にアプリケーションを開発する前に、Dreamweaver MXのWebアプリケーション開発に関する機能について見ていきます。
Webアプリケーションの開発
PHPコードの生成と記述
第3回 データを操作する機能を組み込む。
基本機能で対応していない部分について拡張機能を利用できるという点や開発機能を使ってどのような流れでアプリケーションを構築していくのかについても見ていきましょう
Webアプリケーションを開発するソフトを選択するときは、そのソフトがどの技術に対応しているかがまずは気になります。Dreamweaver MXは今回のテーマとなるPHPを含めて、次のような比較的人気の高いサーバーサイドの技術をサポートしています。サポートしていると言っても、Dreamweaver MXはこれらの技術をサポートした「コードエディタ」機能を提供するだけではありません。すでにお使いの方はおわかりのように、Dreamweaver MXのWebアプリケーション機能における最大の特徴はGUI操作によってプログラムコードを自動生成できる点です。本稿のタイトルからも察しがつくかとは思いますが、PHPとMySQLデータベースの連携をとるWebアプリケーションもGUI操作で開発することができます。PHPアプリケーションでMySQLデータベースを使うという組み合わせはWindows、Linuxなどのプラットフォームで可能なため人気のある組み合わせで、レンタルサーバーでも徐々にこれらのサービスが提供されてきています。PHP を使って実際にアプリケーションを開発されている方には、データベースに PostgreSQLを採用している方もいらっしゃると思います。もちろん、コードエディタとして使うならPostgreSQLなどのデータベースに対応したコードを記述することができます。しかし、基本機能ではGUI操作でPHPとPostgreSQLの組み合わせでデータベースを扱うコードを自動生成させることはできません。基本機能において PHPアプリケーションをGUI操作で開発する機能 はMySQLのみに対応しています。この拡張機能を組み込むことで、PHPアプリケーションを開発するときにMySQL以外のデータベースを使ったコードをGUI操作で生成することができます。
サイトの作成
ページの作成
コードの作成
ページの表示
「サイトの作成」ではWebアプリケーションに含まれるページの受け皿となるサイトを定義します。NETやPHPなどの技術からどれを選択するか、どのディレクトリに作成するかなどを指定します。「ページの作成」では定義したサイト内にページを追加していきます。追加するページのデフォルトの文字コードは次のように環境設定メニューで設定することができます。「コードの作成」はWebアプリケーション開発作業で最も時間を要する作業になります。コードの作成はGUI操作によって自動生成する方法と、コードエディタとして利用して記述していく方法があります。GUI操作とエディタ機能の利用によるPHPコードの生成と記述については次ページ以降でもう少し詳しく見ていきます。「ページの表示」は[ブラウザでプレビュー]メニューを選択することで、作成中のページをブラウザに表示させることができます。作成中のページを保存する前に表示確認することもできます。
Dreamweaver MXでWebアプリケーションを開発する際に最も時間を割くであろうPHPコードの生成と記述についての機能について見ていきましょう
GUI操作によって生成できるコードにも、1行で完結する比較的単純なコードと、データベースを扱う一連の処理に必要な少々複雑なコードがあります。
これらの違いもふまえて機能を見てみましょう
GUI操作でPHPコードを生成する機能のうち、単純なコードを生成する機能を見てみましょう
>)など、スクリプト作成時に何度も使用するコードをメニューから追加できます。例として[挿入] - [PHP オブジェクト] - [URL 変数]を選択すると次のようなコードがドキュメントウィンドウに追加されます。追加されたコードを変更して、URLに含まれる「para1」というパラメータの値を表示させるには次のように変更します。単純なコードだけでなく、データベースを扱うコードのように少々複雑なコードも生成することができます。[挿入] - [アプリケーションオブジェクト] メニューより次のような機能をすばやく組み込むことができます。
レコードセット-----データベースからデータを取り出すためのコード
データベースからどのテーブルのどの列を取り出すかを指定することができます。次の 画面のように条件を指定することでデータを絞り込んだり、並べ替えることもできます。レコードセットを利用するための必要なデータベースへの接続もメニューから追加することができます。こちらの具体的な手順は次回以降に実際にスクリプトを作成するときに紹介します。
リピート領域-----1ページに何件表示させるかの指定
ナビゲーションバー-----前後のページや先頭、最終ページへのリンク
ナビゲーションステータス-----全データ数と表示中のデータの位置
これらはデータ表示に関わるコードを追加するためのメニュー項目です。「動的テーブル」ではデータを一覧表示するためのコードをtableタグとPHPコードを使って生成します。「リピート領域」は1ページに表示するデータの件数を指定するもので、動的テーブルを追加した時点で含まれています。1ページに表示するデータを制限したときは前後のページに移動するリンクが必要になります。「ナビゲーションバー」を使うと前後のページへのリンクや先頭ページ、最終ページへのリンクを生成することができます。更に「ナビゲーションステータス」を使うと、現在何件目を表示中なのかをブラウザに表示するためのPHPコードを生成できます。次の 画面はページに動的テーブルとナビゲーションバー、ナビゲーションステータスを配置してデータを表示させた所です。
レコード挿入フォーム-----データを追加するためのフォームと処理ロジック
レコード更新フォーム-----データを更新するためのフォームと処理ロジック
レコード挿入フォームやレコード更新フォームではデータを追加、更新するためのフォームと追加、更新処理を実行するためのロジックが組み込まれます。次の 画面はレコード挿入フォームの設定画面と、追加されたフォームをブラウザに表示した所です。このように設定画面で条件を設定するだけで、データを追加したり更新するための仕組みをあっという間に組み込むことができます。(これに加えて「マスター詳細ページ」を作成するメニューもありますが、PHPアプリケーションではこちらは選択できません。GUI操作による作成だけでなく、コードを記述してエディタとしての機能を利用することもできます。もちろんGUI操作によって自動生成されたコードを修正することもできます。コードエディタとしては次のような機能を備えています。「カラーリング」は、プログラム作成時に使うためのエディタでよくみられる機能でHTMLタグやプログラムコードに色をつけて表示する機能です。HTMLタグ、PHP関数、コメント、文字列などに色をつけてスクリプトを見やすくすることができます。どの要素にどの色をつけるかの設定も可能です。「コードヒント」はRADツールではおなじみの機能でコード入力時にヒントを表示してくれる機能です。PHP関数のコード入力時にはどのようなパラメータが必要かが表示されます。ヒントの表示を必要としない場合は、環境設定メニューでコードヒント機能をOFFにすることもできます。
Dreamweaver MXを利用するメリットをひとことで表現すると「効率的にWebアプリケーションを開発できる」と言えるのではないでしょうか
GUI操作とコードエディタ、更にExtension Managerを介して拡張可能な機能によって短時間で、比較的簡単な操作で多様な要件に対応できるアプリケーションを開発できます。
結果として次のような要望も満たしてくれることになるでしょう
従来のアプリケーション開発時間を短縮したい。静的Webサイトの作成だけでなく動的サイト開発へ活動の幅を広げたい。プロトタイプシステムを作成してドキュメントベースでのシステム提案にひと味加えたい。コードを見て学習したり新たな技術を習得したい。
著者について
大学を卒業後、シンクタンクのシステム開発部門にて汎用機向けのシステム開発に従事
独立後はフリーでWebアプリケーションの構築や書籍の執筆をこなす。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0 フィードの利用
このリリースの開発チームは、ユーザーが XML および XSL ベースのプロジェクトに取り組む際に必要になるエントリポイントのサポートを提供することを決定しました。
[バインディング] パネルからのドラッグ & ドロップを使用した視覚的な XSL 変換
[挿入] バーからアクセス可能な使いやすいオブジェクト
熟練した開発者向けのコードのハイライト表示やコードの補完機能
サーバーサイドの XSL 変換を使用して、リモート RSS フィードを利用することを目指します。個人 Web サイト、ポータル、または企業サイトに、ニュースの見出し、記事のリスト、ブログの投稿、またはその他のシンジケートコンテンツを含めることを予定している場合は、この演習が役に立ちます。このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。Web サーバーを、XML および XSL の処理に必要なライブラリと共にインストールし、適切に設定している必要があります。XML および XSL をサポートするように PHP アプリケーションサーバーを設定する方法については、別の記事で説明します。NET を実行するテストサーバーまたはリモートサーバーを定義している必要があります。
次のチュートリアルおよびサンプルファイル
私が執筆した XML および XSL に関する以前の記事を読んでいるか、またはこれらの言語に関する知識が必要です。Dreamweaver のワークスペースおよびインターフェイスに慣れている必要があります。早くワークスペースに慣れることができるように、最初に Dreamweaver 8 の新しい XML オーサリング機能について簡単に説明します。[新規ドキュメント] ダイアログボックスが表示されます。後で動的ページで XML データを処理するために使用できる XSLT フラグメントを作成することもできます。XSLT フラグメントは、後で動的ページに挿入される単純なコードです。[バインディング] パネルでは、使用している XML データソースをツリー表示することができます。この記事の中で後で説明しますが、ツリーからノードをドラッグして、XSL スタイルシートにドロップすることができます。[挿入] バーの [XSLT] タブにある任意のオブジェクトを使用して、単純な条件や複数の条件を定義したり、コードをコメントにしたりすることができます。このチュートリアルの終盤では、動的ページで ([アプリケーション] パネルから) [XSL 変形] サーバービヘイビアを使用して、XML データを処理および表示する方法についても学習します。
容易になったコーディング
コードを微調整したり、自分自身で XSL 処理を試したい場合は、Dreamweaver 8 のコードヒントおよびコードの自動補完機能を使用して、簡単にこれらの作業を行うことができます。このチュートリアルを進めていくと、これらの機能をすべて実際に使用し、短期間で習得することができます。
アプリケーションのシナリオ
rdf* から入手可能) を、ブログから企業サイトや個人サイトまでいずれにもなり得るモックアップサイトで利用します。サイト内で Macromedia の最新記事を表示して、他の開発者に通知するのに最適な方法です。次のような汎用ページを使って作業を始めます。
汎用ページを使って作業を開始
このチュートリアルで学習する内容は次のとおりです。RSS フィードおよびシンジケーションについて理解します。図 7 を参照してください。
シンジケーションとは
Web シンジケーションとは、コンテンツを他の Web サイトで同時に利用できるようにする一般的な方法です。0、または Atom などさまざまな規格に記述されている Web フィードまたはチャンネルを使用することによって実現されます。さまざまな規格や仕様の違いに関係なく、重要なことは、すべてのフィードが実際にはリスト指向の情報を含む XML ドキュメントであるということです。サイトがコンテンツを情報のソースとして使用できるようにすることを "フィードを公開する" と言い、他のサイトがコンテンツを二次的に公開することを "フィードを利用する" と言います。サイトの閲覧者が再利用に関心を示す情報は、RSS フィードの候補として適しています。これには、ニュースの見出し、記事のリスト、プレスリリース、ジョブリスト、ブックマーク、会議イベント、再生リスト、ソフトウェアリリースなどが含まれます。シンジケーションの利点は明らかです。読み込まれたコンテンツは、リモートフィードが変更されると自動的に更新されます。複数のサイトが同じフィードを繰り返し再公開するので、より多くの人々がコンテンツを利用できるようになります。コンテンツは、サイトの外観や印象に一致するフォーマットで提供されます。前に示した各 Web サイトで、同じ情報がそれぞれどのように表示されているかを確認してください。
RSS フィードに含まれる内容
"RSS" という用語は、実際には並存する複数の異なるフォーマットを指すために使用されるので、意味が異なる場合があります。RSS で利用できる複数のバージョンや規格に困惑してしまっても、心配しないでください。これらはよく似ているので、単に他の XML ドキュメントと同様に扱うことができます。com サイトのこの記事をチェック*してください。RSS フィードは、タイトル、リンク、説明を含むチャンネルと、それに続く一連のアイテム (それぞれがタイトル、リンク、説明、およびオプションの作成者と公開日を含む) で構成されます。Dreamweaver 8 では、ドキュメントを読みやすくするためにコードカラーリングが使用されます。タグおよび属性は青で表示されます。属性値は緑で表示されます。コンテンツは黒で表示されます。これらの名前空間の詳細については、私が以前に執筆した記事「XSL の概要」を参照してください。チャンネルノードには、RSS フィードに関する一般的な情報である、タイトル、リンク、および短い説明が含まれます。チャンネルノードには、item エレメントごとに指定された、現在のフィードの目次も含まれます。これは、実際にはデベロッパーセンターの記事へのリンクの番号リストです。順序が重要であることを示すために、シーケンスコンテナ rdf:Seq が使用されます。シーケンス内のアイテムは rdf:li エレメントによって指定されます。これは、目次に示されたページ番号のページに各章が存在するのと同じです。メモ : フィードに含まれていても、チャンネルの目次に含まれていないアイテムは、RDF パーサーによって破棄される可能性があります。最後に、item エレメントとして、フィード内の実際のデベロッパーセンターの記事がリストされます。アイテムは、タイトル、リンク、説明、主題 (記事で扱われるトピックを示す)、作成者、公開日で構成されます。これで RSS フィードを構成するコードの読み方がわかったので、サイト内で記事を表示するための RSS フィードの処理を開始できます。チュートリアルのサンプルファイルをダウンロードしてサイトのルートに解凍します。NET テストサーバーを実行している必要があります。サンプルファイルへのリンクは、この記事の最初のページにあります。このリストを選択するには、ページのこのリスト領域にカーソルを置いて、タグセレクタで対応する <ul> タグをクリックします。
タグセレクタで <ul> タグをクリックしてリストを選択
Delete キーを押してこのセクションを削除します。後でこのセクションをデベロッパーセンターの見出しに置き換えます。
[ファイル]-[名前を付けて保存] を選択し、使用しているサーバーモデルに応じて、現在のページを homepage
新しい XSLT フラグメントのデータソースとして XML ファイルを関連付けるように指示するメッセージが表示されます。[インターネット上のリモートファイルを添付] を選択し、テキストボックスに次の URL をペーストします。
リモート XML データソースの関連付け
[アプリケーション] パネルの [バインディング] タブに RSS フィードがツリー表示されることを確認します。[バインディング] タブが表示されない場合は、[ウィンドウ]-[バインディング] を選択します。メモ : [バインディング] パネルにリモート RSS フィードを表示するには、インターネットに接続している必要があります。<> は親ノード内に 1 回のみ表示されるエレメントです。<>+ は親ノード内に 1 回以上表示されるエレメントです。はオプションの XML エレメントです。xsl という名前で保存します。次に作成する XSLT フラグメントは、記事のタイトルと作成者を表示します。次の図のように、タイトルはデベロッパーセンターの実際の記事にリンクされます。
完成したページのプレビュー
この作業は、[バインディング] パネルからのドラッグ & ドロップによって行うことができます。ページに XML データプレースホルダーが挿入されます。これは、実際にはノードに対応する XPath 表現です。新しい行で「by」と入力し、スペースキーを押します。
タイトルの後に「by」と入力
作成したページは図 14 のように表示されるはずです。このページは、デベロッパーセンターのRSS フィードに追加された最新記事をプルしており、フィードは定期的に更新されるので、ブラウザに表示される記事は図とは異なる場合があります。
ページのプレビュー
Dreamweaver では、変換結果をプレビューするための一時ファイルが自動的に生成されます。ただし、これはクライアントサイドの変換でも、サーバーサイドの変換でもありません。このチュートリアルでは、後で、実際のサーバーサイド変換を適用します。ホームページに適用された CSS スタイルは、変換には使用されないことにも注意してください。CSS スタイルは、ホームページに XSLT フラグメントを含めた後に使用されます。最後に、変換結果ページに表示される記事は 1 つだけであることに注意してください。フィードのすべての記事を表示するには、フィード内のすべてのアイテムをループ処理して表示する "リピート領域" を作成する必要があります。
リピート領域の作成
RSS フィードのすべての記事を表示するには、次の手順に従います。表示されたメニューから、[段落フォーマット]-[段落] を選択します。これによって、各記事は新しい段落として表示されます。コンテキストメニューで既に [段落] が選択されている場合もあります。メモ : [挿入] バーの初期設定のビューはメニュービューです。メニュービューが表示されている場合は、[挿入] バーのオプションリストから [タブとして表示] を選択します。
[リピート領域] コマンドへのアクセス
このノードと rss:items ノードとを混同しやすいので注意してください。
リピート領域の定義
リピート領域を示すために、選択したテキストの周囲に xsl:for-each というラベルの付いたグレーの枠が表示されます。
リピート領域のデザインビュー
ページを保存し、ブラウザでプレビューします。ページは図 18 のように表示されるはずです。前にも説明したように、デベロッパーセンターのリソースのフィードは定期的に更新されるので、記事のリストは異なります。
リピート領域のブラウザによるプレビュー
次の項では、RSS ファイルによって提供された各記事を、対応する URL にリンクする方法について学習します。各記事のタイトルを Macromedia デベロッパーセンターの対応するリソースにリンクするには、次の手順に従います。xsl ページで、記事のタイトルの XML データプレースホルダーを選択します。プロパティインスペクタで、[リンク] テキストボックスの横にあるフォルダアイコンをクリックし、選択したテキストに関するリンクを定義します。[ファイルの選択] ダイアログボックスの [ファイル名の選択] セクションで、[データソース] オプションを選択します。図 19 を参照してください。
XSL による動的リンクの作成
図 19 を参照してください。ページを保存し、ブラウザでプレビューします。
リンクされた記事のブラウザによるプレビュー
リンクをクリックしてテストします。次の項では、[XSL 変形] サーバービヘイビアを適用して、ホームページに記事を表示します。メモ : [サーバービヘイビア] タブから同じコマンドにアクセスすることもできます。メモ : ColdFusion サーバーで作業している場合は、RDS ログインパスワードを指定するよう求められる可能性があります。適切なパスワードを入力するか、パスワードがわからない場合はネットワーク管理者に問い合わせてください。xsl" ファイルを参照して選択します。関連付けられている XML データソースが自動的に検出され、[XML URI] テキストボックスに入力されます。[OK] をクリックして変換を適用します。ダイナミックページ内に直接 XSL フラグメントが表示されます。このフォルダにはサーバーサイド変換を実行するライブラリが格納されており、このライブラリをテストサーバーにアップロードする必要があります。ホームページに添付されていたスタイルシートの CSS スタイルは、読み込まれた XSL フラグメントに自動的に適用されます。ページを保存し、ブラウザで表示します。"includes" フォルダをテストサーバーにアップロードしていることを確認します。
変換後の動的ページのブラウザによるプレビュー
実際に行われている処理
Dreamweaver は、アプリケーションサーバーが XML データを処理し、クライアントのブラウザに HTML コンテンツを出力するために使用するランタイムライブラリファイルを生成します。ページを正しく表示するには、XSLT フラグメント、XSLT フラグメントを含む動的ページ、および "includes" フォルダのランタイムライブラリがすべてサーバー上に存在している必要があります。サーバーサイド変換のワークフローについては、以前の記事のこの項を参照してください。RSS フィードのすべてのアイテムが表示されていることに注目してください。フィードに含まれる記事の数が 10 件から 20 件にもなると、ホームページが非常に長くなる場合があり、デザインの要件に干渉する可能性があります。次の項では、パラメータを使用して RSS フィードから表示されるアイテムの数を制限する方法や、アイテムを並べ替える方法について説明します。
XSL 変換でのパラメータの使用
現在、ホームページには、処理された RSS フィードによって複数の記事が表示されています。ここで、デベロッパーセンターの最新の記事を 4 つだけリスト表示したいとします。この処理を行うには、パラメータを使用して、XSL 変換で最初の 4 つのアイテムだけを表示するように指定する必要があります。その手順を以下に示します。xsl ページを開き、XSL リピート領域内をクリックします。プロパティインスペクタで、稲妻のアイコンをクリックして、最初の 4 つのアイテムだけを表示する条件を定義します。
プロパティインスペクタでの条件の定義
[WHERE] フィールドの初期設定の条件を編集します。フィルタ条件は図 26 のようになります。このパラメータについては、後でダイナミックホームページファイルで定義します。[OK] をクリックして条件を適用します。ブラウザに次のようなエラーが表示されます。その代わりに、[XSL 変形] サーバービヘイビアで指定した値が使用されます。これでエラーは表示されなくなり、ブラウザで XSLT フラグメントをプレビューできるようになります。ホームページの動的ページに切り替えます。[アプリケーション] パネルの [サーバービヘイビア] タブで、[XSL 変形] サーバービヘイビアをダブルクリックして編集します。[XSL 変形] ダイアログボックスが表示されます。[XSL 変形] ダイアログボックスで、4 が二重引用符で囲まれて表示されている場合は、[編集] ボタンをクリックし、二重引用符を削除して、[OK] をクリックします。ページを保存し、ブラウザでプレビューします。最初の 4 件の記事だけがブラウザに表示されます。すべての記事が表示されている場合は、ブラウザの表示の更新が必要になることがあります。
4 件の記事のリンクのブラウザによるプレビュー
これらの記事がデベロッパーセンターの最新の記事であることは、どのようにすればわかるでしょうか
RSS フィードでアイテムが必ずしも時系列的にリストされるとは限らないので、アイテムを日付順に並べ替える方法を説明します。
アイテムの並べ替え
以前の記事「XSL の概要」では、XML ノードを並べ替える構文について説明しました。この方法を使って、記事を日付順に並べ替えます。xsl ページを開いた状態で、コードビューに切り替えます。次のコードの行を探します。[編集]-[検索/置換] を使用して検索することもできます。図 30 のように入力するコードの候補が表示されます。コードヒントメニューが表示されない場合は、Ctrl キーを押しながらスペースキーを押して表示できます。この行は次のようになります。[リファレンス] パネルからコードサンプルをコピーして、直接コード内にペーストすることもできます。ファイルを保存してサーバーにアップロードし、ブラウザでプレビューします。記事のリストが降順に並べ替えられていることがわかります。
RSS フィードの詳細な表示の作成
デベロッパーセンターの記事へのリンクに問題がないときに、すべての記事を、テーマごとにグループ化して、その説明と作成者のリストと共に表示するような詳細ページが必要な場合はどうすればよいのでしょうか
この項では、習得した XSLT のスキルを実際に使用して RSS フィードの詳細表示を作成し、条件領域を使用して特定のコンテンツを表示する方法を学習します。記事の詳細表示を表示する XSLT フラグメントを作成するには、次の手順に従います。[ファイル]-[新規作成] を選択して新しい XSLT フラグメントを作成します。画面の指示に従って、リモート RSS フィードを関連付けます。詳細については、前の説明を参照してください。xsl という名前で保存します。[バインディング] パネルの XML ツリーから次のノードをドラッグし、それぞれページの新しい行にドロップします。チャンネルのタイトルのフォーマットを [見出し 2] に設定します。作成するサイトが Flash テクノロジーに重点を置いているとします。したがって、Flash 関連の記事を最初に表示して、その他のすべての記事を別の見出しの下に表示します。チャンネルの説明の下に、次のテキストを 2 つの独立した行に入力します。この 2 つの行のフォーマットをそれぞれ [見出し 3] に設定します。デザインビューで、ページは図 32 のように表示されます。
XSLT フラグメントのデザインビュー
記事のタイトルを対応するリソースにリンクします。詳細については、前の説明を参照してください。同じ行で、記事のタイトルの後に、[挿入] バーの [テキスト] タブから em ダッシュを挿入します。
em ダッシュの挿入
メモ : em ダッシュのボタンが [挿入] バーに表示されていない場合は、表示されている文字の右端にあるその他の文字のメニューから選択しなければならないことがあります。デザインビューで、ページは図 34 のように表示されます。
XSLT フラグメントのデザインビュー
次の項では、条件領域を使用して、トピックごとに記事をグループ化する方法を学習します。
条件領域の使用
Flash 関連の記事だけを Flash という見出しの下に表示するには、条件領域を定義する必要があります。条件領域を作成するための XSL 構文については、以前の記事「XSL の概要」を参照してください。タグセレクタで対応する <p> タグをクリックして、記事の詳細を含む段落を選択します。
[条件領域] コマンドへのアクセス
[条件領域] ダイアログボックスで、次の行を入力します。この条件が満たされた場合、記事が表示されます。[OK] をクリックして [条件領域] ダイアログボックスを閉じます。選択したテキストの周囲に xsl:if というラベルが付いたグレーの枠が表示されます。Flash に関するすべての記事を表示するには、リピート領域を使用して RSS フィードのすべてのアイテムをループ処理し、毎回テスト条件を評価する必要があります。この処理を行うには、次の手順に従います。リピート領域を適用します。詳細については、この記事で前に説明した手順を参照してください。ページを保存し、ブラウザでプレビューします。図 36 のように表示されます。この記事の執筆時点よりも Flash 関連記事が増えているので、より多くの記事が表示される可能性があります。
XSLT フラグメントのブラウザによるプレビュー
そのためには、テスト条件を変更する必要があります。図 37 のように、プロパティインスペクタに選択した領域のテスト条件が表示されます。
タグセレクタからの条件領域の選択
条件を次のように変更します。この条件は、"記事の主題に Flash という単語が含まれていない場合は、記事を表示する" という意味です。XSLT フラグメントを保存し、テストサーバーにアップロードします。動的ページで詳細なフィードを表示するには、もう一度 [XSL 変形] サーバービヘイビアを使用します。NET) に対応した動的ページとして保存します。コードビューに切り替えて、19 行目から 28 行目までのコードを選択して削除し、ページのメイン領域からコンテンツを削除します。デザインビューに戻って、コンテンツが表示されるはずの空の <div> タグ内にマウスカーソルを置きます。
動的ページの編集
ページを保存し、すべてのファイルをテストサーバーにアップロードします。ブラウザでページをプレビューし、結果を確認します。
最終的な記事のブラウザによるプレビュー
ビジュアル XML オーサリング機能によって、XML データの表示、リピート領域や条件領域の定義、複雑な XPath 式の作成を簡単に行うことができるようになりました。Web アプリケーションで XML や XSL を使用する方法を制限するものは、想像力以外には何もありません。次のような記事も参考にしてください。RSS ツールの詳細については、RSS バリデータ、アグリゲータ、およびクライアントに関するこの記事*を参照してください。
著者について
Web 開発者向けの記事やチュートリアルを書いていないときは、新しいものの習得や新しい技術の模索に励んでいます。また、Web 開発から政治、前衛的な電子音楽と幅広い趣味を持っています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
森房 卓史(もりふさたかし)
お待たせしました。現在ベータ版ですので、機能の中には正確に作動しない個所もございます。また、最終的な製品版では機能の仕様変更などがあるかも知れませんので、ご了承ください。
チームワークで、個人作業で、飛躍的生産性向上が可能に
多くのWebサイトのデザイン会社では、一つのプロジェクトに複数のマークアップ・エンジニアの方々がチームを形成してプロジェクトを遂行しております。
時には、複数のプロジェクトが同時進行していることも、多々あるのではないでしょうか
チーム内の誰かが作りかけのサイトを引き継いで完成させなければならないこともあるでしょう
または、昔作ったクライアントのwebサイトをメンテナンス、アップデートする仕事もあるかもしれません。2つ目の新機能にデザイン・ビューから、CSSがどのように使われているかを迅速に見つけ出す機能に「Code Navigator」という機能を搭載しました。デザイン・ビューで調べたい部分にマウスを乗せて、コンテキスト・メニューから「Code Navigator」を選ぶと、そこで使われているCSSが全て別のポップアップ・ウインドウに表示され、そのウインドウ内のCSSのエレメントをクリックすると、直接そのCSSファイルが表示、編集が可能になりました。今までは、コードに変更を加えるたびにコードを保存し、ブラウザーでプレビュー確認し、コードの修正、保存、ブラウザーでプレビューの繰り返し作業だったのが、「Live View」ボタンを押すだけで、コードを保存しなくてもデザイン・ビューで確認できるようになりました。そしてWebkitレンダリングエンジンは、W3C標準に非常に近いレンダリングをするエンジンです。
今後新しいバージョンのブラウザーが出てきても、目指すところはW3C標準だと思われますので、W3C標準にそってサイトを構築すれば、後々のメンテナンス作業の負担も軽減できるでしょう
初心者にも分かり易く
高い山を登るにも、最初の一歩を踏み出さないと先には進めません。習字でも陶器でもそうですが、まず初心者の方は、プロの作品の模倣から始めるのが近道だと思います。デザインの感性の部分は、ここでは割愛させていただきますが、コードの部分は模倣が可能です。
デザイン事務所の先輩や、プロの方がどのような構成をなさっているかを見習って、少しずつ数値を変更していき、自分のサイトをまず一つ完成してみませんか
これらの機能を併用することによって、デザイン事務所の先輩のコードがどのように構成しているか、プロが作ったサイトのCSSの構成がどうなっているか、分かり易く理解できるでしょう
Ajaxのフレームワークの一つのSpryのフレームワークをより容易に扱うことができるのです。この機能を使うことにより、phpやaspを使わなくても、小さなデータのサイトなら、html内のテーブルを編集するだけで、プロ並みサイトの基本が5分でつくれてしまうのです。もうテキストエディターに戻れない。
これにより、デバグ作業も時間が短縮できるのではないでしょうか
ですので、一つのビューでコードの上の部分を見ながら、もう一つのビューで他の部分を編集することもできますし、二つのビューに別々のファイルのコードを見ることも可能です。例えば、CSSのファイルを見ながら、htmlを編集することが可能です。しかも最近の流行りの横長のディスプレー・モニターに対応するため、上下分割だけでなく、左右にも分割してコーディング作業が可能になりました。今まで、ソースコードのバージョン管理で悩んでいた皆様の問題を解決できると思います。現在ベータ版ですので、機能の中には正確に作動しない個所もございます。また、最終的な製品版では機能の仕様変更などがあるかも知れませんので、ご了承ください。
著者について
森房 卓史(もりふさたかし)
常に「お客様第一」を唱えつつ、品質改善、パフォーマンス向上、使い易さを最重視した製品作りを心がけています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
クロスクライアントHTMLメールの作成
HTMLメールは、Webデザイナーにとって特別な困難を引き起こします。Web標準になじんだ世代のデザイナーにとっては、特にそうです。CSSベースのレイアウトで、外部スタイルシートを正しく使ってメールを送れば、当然うまくいくだろうと思うのが普通です。しかし、受け取った側がそのメールを開いてみると、作成者の意図とは似ても似つかない乱れたデザインが表示されることは珍しくありません。ブラウザ戦争はかなり昔に決着が付き、淘汰によって生き残った少数のブラウザはおおむね互換性がありますが、電子メールクライアントの分野ではまだ混乱が続いています。それどころか、デザインに関する状況は近年むしろ悪化しています。これは、従来のエンジンに比べてCSSへの対応度がはるかに低くなっています。しかも、電子メールクライアントの数は以前に比べてはるかに増えています。MailといったWebベースのサービスがシェアを争っています。これに比べれば、ブラウザ間の互換性の問題は、公園を散歩するようなものです。鳥がさえずり、子供たちが笑っている、とても気持ちのいい公園です。技法と適切なモデルの説明のために、私が勤めているWebAssist社で実際にあった2つの例を取り上げます。このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。
この記事に必要な予備知識
HTMLメールの構造:過去への回帰
私と同様に以前のテーブル指向のWebデザインからCSSベースのレイアウトへの移行を経験した方なら、こんなことを言うと驚かれるか気分を害されるかもしれませんが、HTMLメールを作成する際は、CSSの意義についてはすべて忘れてください。電子メールの世界では、昔からのテーブルが主役に返り咲くのです。様々な電子メールクライアントの間で一貫したレイアウトを維持するには、テーブル、それもネストしたテーブルが鍵となります。CSSベースのレイアウトでよく使用される外部ラッパーの<div>タグと同様に、まず外側のテーブルから始めるのが適当です。電子メールクライアントの中には、<body>タグに追加された属性をすべて削除するものもあるので、基本的に自分で標準コンテナを作成することになります。挿入パネルの「一般」カテゴリで、「テーブル」を選択します。テーブルダイアログボックスで、以下の設定を宣言します。
テーブルの幅:98パーセント
ヘッダ:なし
この設定は、HTMLコンテンツをすべて収める1セルのテーブルを作成します。幅を98%に設定するのは、周囲にわずかな余白を残すためです。Mailでは特に、左右に1%の余白がないと正しく表示されないようです。
背景色を設定したい場合は、プロパティインスペクタの「CSS」タブに切り替えて、「背景」カラーピッカーから色を選択します(図1を参照)
コードは<td>タグの属性として入力されます。これはHTMLメールでは問題なく使用できます。
プロパティインスペクタでの基本的なセルのプロパティの設定
同様に、コンテンツを中央に配置するために、水平方向リストから「中央揃え」を選択します。次に、最初の外側のテーブルの中にいくつかのテーブルをネストします。1つの大きなテーブルにcolspan属性をいくつも持たせるのは避けたほうが無難です。この属性はほとんどの電子メールクライアントで動作しますが、Lotus Notesでは問題を起こします。デザインをヘッダー、コンテンツ、フッターといった基本的なセクションに分けて、セクションごとに1つずつテーブルを作成するほうが安全です。これらのテーブルを上下につなげ、その中に別のテーブルを作成します。例えば、2つのサンプルファイルでは、メインコンテンツエリアに2つの列があります。1つはメインエリア用、1つはサイドバー用です。そして、<td>セルには必要に応じて他のテーブルが含まれます。メール表示画面のデフォルトサイズは電子メールクライアントごとに大きく異なり、ユーザがカスタムサイズを指定している場合もあるので、コンテンツは比較的狭い幅に制限するのが適当です。Web標準を推進してきた人々は、私も含めて、インラインCSSスタイルの使用をやめ、CSSルールを<head>の中に埋め込むか、外部のスタイルシートに記述して添付することを盛んに推奨してきました。しかし、HTMLメールを作成する場合は、そのことは忘れてください。HTMLメールではインラインスタイルが常識であり、あらゆる種類の電子メールクライアントで一貫した結果を得るただ1つの確実な方法なのです。外部スタイルシートや埋め込みスタイルは、完全にはサポートされていません。ただし、HTMLメールではインラインスタイルに頼るのが不可欠とはいえ、<font>タグなどを使って基本的な書式設定を行うところまで後退する必要はありません。それどころか、Dreamweaver CS4を使えば一般的なほとんどのインラインスタイルを簡単に追加できます。デザインのあるセクションに特定のフォントプロパティを設定する方法を以下に示します。スタイルを設定する<td>タグにカーソルを置きます。プロパティインスペクタで、「CSS」タブに切り替えます。「ターゲットのルール」リストで、「<新規インラインスタイル>」を選択します。
「ターゲットのルール」が<インラインスタイル>に変わり、選択したフォントがstyle属性として現在の<td>タグに入力されたことを示します(図2を参照)
「サイズ」編集可能リストでサイズを選択するか、入力します。テキストカラースウォッチを選択してポップアップカラーピッカーを表示し、目的のフォントカラーを選択するか、カラーフィールドに16進値を入力します。ボールドボタンまたはイタリックボタンをクリックしてフォントスタイルを追加します。ボールドボタンをクリックするとスタイルタグにfont-weightプロパティが追加され、イタリックアイコンをクリックするとfont-styleプロパティが追加されます。必要に応じて、プロパティインスペクタのボタンを選択して、左揃え、中央揃え、右揃えを設定します。余白、パディング、行間隔など、その他のスタイルを追加するには、「ルールの編集」をクリックして標準のCSSルール定義ダイアログボックスを開くか、「CSSパネル」をクリックしてCSSスタイルパネルを表示し、手作業で属性を追加します。電子メールクライアントの中には継承をサポートしないものもあるので、テーブルのセルにスタイルを設定する際には、個々の<td>タグに同じスタイルを繰り返し適用する必要があります。私が見つけた便利な方法は、1セルのテーブルを作成し、その<td>タグに必要なスタイルを設定する方法です。その後、Tabキーを押して行とテーブルのセルを追加すると、先に設定したスタイルが引き継がれます。
画像とリンクは「絶対に」絶対指定
HTMLメールはある意味、サイトのないWebページと言えます。上位のフォルダや、同じレベルの画像フォルダといったものは存在しないので、すべての画像のソースは絶対リンクで指定する必要があります。ほとんどのデザイナは自分のローカルシステム上の画像を使用してコンテンツを作成するため、熟練したデザイナでもうっかりローカルの画像にリンクする間違いを犯すことがあります。Dreamweaverを使えば、絶対URLで指定されたリモート画像をデザイン時に表示できるので、私は通常、最初にグラフィックを全部集めて公開しておき、次のように完全修飾URLを使用してリンクします。画像に関して注意すべきもう1つの点は、多くの電子メールクライアントが、迷惑メール対策のためにデフォルトでは画像を表示しないことです。受信者は、メールごとに個別に画像をオンにするか、送信者が安全であることを宣言する必要があります。したがって、画像を非表示にしてデザインをテストする必要があります。画像が表示されていなくても情報が得られるように、画像には必ずalt属性とtitle属性を追加します。通常は、このテキストはデフォルトの段落スタイルで表示されます。ただし、画像が表示されているかどうかに関わらず印象を強めたい場合は、フォントサイズを大きく設定した<td>タグの中に画像を置くという方法があります。htmを示し、図4は画像をオフにした状態を示します。このサンプルでは、<td>タグに次のスタイル属性が設定されています。
画像をオンにしたときのヘッダーグラフィック
画像をオフにしても大きいテキストが表示される。別の方法として、グラフィックをテーブルに入れ、別の<td>タグにテキストを入れて、装飾用のグラフィックとは別に、強調のための背景色を設定することもできます。htmで使用しています。ファイルはこの記事の練習ファイルに含まれています。図5に、画像をオンにしたメールの表示を示します。背景のグラデーションの画像と主役のボックスの画像は、濃い背景色を設定した見出しメッセージと別になっていますが、全体で1つのデザインに見えます。
画像をオンにするとすべてが一体化
画像をオフにすると、重要なメッセージが背景色付きで表示されます(図6を参照)
画像を含む他の<td>タグにも同じ背景色が適用されているので、このエリアはメールの幅全体にわたって広がっています。
画像をオフにするとテキストが主役
画像に関するヒントがもう1つあります。ハイパーリンクのコーディングも、画像と同様に注意が必要です。この場合も、「絶対に」絶対URLを使用します。HTMLメールにはドキュメントやサイトを基準とした相対リンクは存在しないからです。これは、リンクが電子メールクライアントでなくブラウザで開くようにするためです。
次のステップ
ここで説明したHTMLメールの作成方法は、古くさい技法に見えるかもしれませんが、強い印象を与えるビジュアルを相手に直接届けられることには、大きな意義があります。また幸い、電子メールの現状を憂慮しているのはわれわれだけではなく、少なくとも1つの団体が状況を改善しようと動いています。機会があれば覗いてみて、HTMLメールの将来的な改善のために力をお貸しください。
著者について
講演者としても知られ、Adobe(旧Macromedia)の米国および欧州でのカンファレンスや、全米各地のユーザグループで講演を行っています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
通常、JavaScriptはHTMLページにプログラミングロジックを追加するために利用され、多くのWebアプリケーション(広告バナーシステム、eコマースサイト、eラーニングSCORM準拠コースなど)で標準技術として使用されています。
その方法を紹介しましょう
HTMLページ内に直接コードを書いたり、HTMLファイルから参照する外部JavaScriptファイルを用意して書くこともできます。私の場合、簡単なコードであれば、直接HTML ページ内に書いています。複雑なコードやサイト内で繰り返し利用するコードの場合は、外部JavaScriptファイルを用意しています。// ここにコードを追加する。init関数は、 ページがロードされた時に実行する機能をまとめるためのフックのようなものです。そうすることで、Flashコンテンツにアクセスしようとする前に、Flashコンテンツを利用できる状態にしているのです。私の場合、以下のようにbodyタグに記述し、 フックとなるようにしています。Flashコンテンツを書き出すことができるオーサリングツールはたくさんありますが、ベストな結果を求めるとなるとおすすめのツールはやはりFlash CS3です。
Tip:もしFlashコンテンツの編集可能なソースファイルが手元にない場合には、ラッパーコンテンツをFlashで作成して、そこにFlashコンテンツを読み込むようにするといいでしょう
そうすることで、ラッパーコンテンツのメインタイムラインにコードを追加することができます。その方法については、この記事の後半で説明しています。このsetScore関数は、スコアの値として1つのパラメータを受け取ります。ユーザーのWebブラウザの状態やJavaScriptの環境についての情報をFlashに渡したい場合に使える便利なコマンドです。この2つのパラメータの値は同一である必要はありませんが、混乱を避けるために私は同じ 名前をつけるようにしています。0でも同じです。0以降、かつ以下のWebブラウザでサポートされています。0にはありません。
サンプル1:バナーのダイナミックロード
それでは、この記事のために用意したサンプルを使ってこれまでのおさらいをしてみましょう
サンプル1は、バナーをダイナミックにローディングして表示するコンテンツです。実際にサイトで見かけるバナー広告も、このサンプルと同じようなシステムを採用しており、HTML上のJavaScriptを使ってバナーのリストやナビゲーションを制御しています。サンプルでは、目に見えないFlashコンテンツを用意して、各バナーを読み込む際のトランジッションアニメーションとして利用したり、バナーの表示時間を計測して設定時間に達したら JavaScriptに指示を出すツールとしても利用しています。このバナーローダーでは、とてもシンプルなAPIを実装しています。各関数については、以下の通りです。
// 表示時間と開始の設定
このJavaScriptコードでは、バナー画像のリストを作成し、現在どの画像が表示されているのかを追跡しています。init関数では、バナーの表示時間(ここでは4秒)を設定するとともに、HTMLページがロードされた時に最初のバナー画像をロードしています。getBanner関数は、Flashコンテンツがバナーの表示時間が設定時間に達したことを検知した時に呼び出され、リスト内にある次の画像、あるいはループして最初の画像をロードします。0のコードを見てください。
// ローディングのイベントハンドラ
// 設定した表示時間に達した後、次のバナーをロードする。// から呼び出せるようにする。上記のコードは、JavaScriptとの連携に関する部分を抜粋したものです。flaファイルを見てください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この情報は他のサイトに移動しても維持され、ブックマークや進行状況の追跡、パスワードやハイスコアといったユーザー情報の保存に利用されています。また、ユーザーインターフェイスの状態を保存するといった使い方もできます。cookieは、名前と絡めてユーザーのマシンに保存される文字列です。なお、Webブラウザの設定や、ノートン・アンチウイルスなどのセキュリティソフトを使ってこのcookieを管理・削除することができます。HTMLファイル内にスクリプト用のブロックを用意するか、新規JavaScriptファイルを作成して、スニペットパネルからcookieスニペットを選んで追加するだけです。私の場合、JavaScriptを書く時はたいていスニペットコードを使い、それを元に必要な部分を改良していきます。たとえば、以下はcookieを読み/書きするスニペットコードを元に作ったコードです。もし、スコアを取得し、それを変数として保存したい場合は、以下のコードを追加してください。また、セキュリティモデルに準拠しており、ドメインやサブドメインによって情報へのアクセスが制限されています。また、セキュリティモデルと同じメカニズムを使って、特定のサイトによるShared objectの使用を禁止することもできます。もし、Flashゲームを作成して、スコアデータを保存してユーザーがアクセスするたびにスコア状況を表示したい場合は、以下のようなActionScriptコードを追加します。スコアが記録されたかどうかをチェックするコードを追加したい場合は、以下のようなActionScriptコードを追加します。
サンプル2:Flashコンテンツでのページ履歴機能
次に、これらの機能を組み合わせる方法を解説しましょう
サンプル2は、Flashコンテンツでページの履歴機能を実装しています。Flashでページングシステムを実現する上で問題となる要素の1つが、Web ブラウザと違い、Flashには戻るボタンが組み込まれていないということです。Flashコンテンツでは、ユーザーが最後に見たページをローカルShared objectに保存して、ユーザーが再度アクセスした際にそのページを表示します。HTMLページには、2つのフォームボタンがあり、ページ履歴をもとにFlash コンテンツを戻ったり進めたりすることができます。このページ履歴機能では、シンプルなAPIを実装しています。各関数については、以下の通りです。お気づきの通り、最初の3つの関数はすでに紹介したもので、Flashコンテンツを見つけたり、cookieを扱うための関数です。savePage関数はFlashコンテンツから呼び出され、ページ履歴リストに閲覧状況を記録します。
この関数は、ユーザーが閲覧するたびに履歴リストやcookieを更新します(ちなみに、cookie情報は毎回更新せずに、ページを閉じたときだけ記録するようにしてもいいでしょう)
forward関数とback関数は各ページに割り当てられるオブジェクトで、ページ履歴のナビゲーションやFlashコンテンツの変更を行います。リストのようにするには、「1,2,3,4」のようにコンマで値を区切ります。サンプルのコードでは、ページ数のリストをコンマ区切りの文字列として保存し、ページがロードされた時にJavaScript配列へと構文解析しています。
0コードを見てみましょう
// 最後に見たページを表示
flaファイルを見てください。
さらに学習したい方へ
HTML環境にFlashコンテンツを統合する方法を解説しました。
たとえば、ポップアップウィンドウやDHTMLレイヤーをコントロールしてみてはいかがでしょうか
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*