【レポート】Dreamweaver CS3 10周年記念イベント・大喜利

トラックバック(0)

コメント(0)

Twitterでつぶやく

はてブする

Dreamweaver CS3 10周年記念イベント・大喜利

Dreamweaver CS3 10周年記念イベント・第二部は10名の勇士による華麗なる実線Tips紹介ということで、セミナー等でおなじみの方々がひとり10分という時間のなかで、DreamweaverのTipsを紹介してくださいました。

MT 連携でソート可能なテーブルを自動更新(鷹野 雅弘 さん)

Spryテーブル

Spryを使って外部XMLファイルをひもづけることにより、ソート可能なテーブルをつくる方法を紹介されていました。Spryパネルの一番左「Spry XML データセット」でXMLを読み込み、左から5番目が「Spryテーブル」でXMLと関連づけしたテーブルに対しソートなどの設定をかけます。
詳細はAdobeディベロッパーセンターでの記事「MT 連携でソート可能なテーブルを自動更新」に掲載されています。

デザインビューでいきましょう!(神森 勉 さん)

XSLT( XMLによって記述された文書を他のXML文書に変換するための簡易言語/拡張子xsl)作成機能を使いWebページを作成する方法を紹介されていました。セッション中ではAmazonが提供するXMLを使用し、XMLが更新されると自動でWebページが更新されるように、またブラウザではxslは開けないのでphpに変換する方法も紹介していました。神森さんのサイト「T-STUDIO」にてサンプルページが公開されています。

量産・運用・効率アップ!テンプレート活用事例(伊原 力也 さん)

テンプレート案考察

Dreamweaverのテンプレート機能について紹介されていました。テンプレートがナイスな点として以下の点を挙げられていました。

  • WYSIWYG ー 実際のページと同じ見た目で編集できる
  • 編集可能領域 ー 編集で切る箇所を限定できる、それが見てすぐわかる
  • リピート領域、テンプレートオプション ー 編集の行い方をコントロール

セッション中ではサッポロビールのサイトを例に挙げられていました。サッポロビールのサイトは全体で200〜300ページあり、製品情報などのページをテンプレート化、現在はクライアントが運用をしているそうです。
伊原さんはどこに、どのように編集可能領域・リピート領域を適用するのかは、デザインラフを印刷したものに蛍光ペンなどを使って考えているとおっしゃっていました。

DW があれば、アクセシビリティチェックもできる!(植木 真 さん)

アクセシビリティ・チェックレポートの設定

Dreamweaverのアクセシビリティチェック機能について紹介されていました。[サイト]ー[レポート]から「HTMLレポート」の「アクセシビリティ JIS X8341-3(日本工業規格)」を選択し、「実行」をクリックするとチェック結果がレポートされます。
「レポートの設定」をクリックするとチェックのルールが設定できます。デフォルトではJIS X8341-3の必須レベル+一部の推奨レベルがonになっています。
また、チェック結果で「リファレンス」をクリックし「富士通 JIS X8341-3 リファレンス」を選択すると、JIS X8341-3 の解説が表示されます。

Dreamweaver に機能を追加して、より作業効率を上げよう!(酒井 克幸 さん)

Dreamweaverの拡張機能について紹介されていました。今回はCSSの属性を規則正しく並び替える拡張機能「CSS属性フォーマット」を取り上げていました。
拡張機能をインストール後、CSSファイルを開いている状態で[コマンド]ー[CSS属性フォーマット]を選択することで、CSSが整形されるそうです。
なお、Dreamweaverの拡張機能はJavaScriptでつくられているそうです。

プログラム開発にも活用できちゃう Dreamweaver(たにぐちまこと さん)

デザイナー向けのツールとして認識されているDreamweaverを、プログラマーの方でも使いやすいツールであることを以下の点を挙げて紹介されていました。

  • HTML警告機能(プロパティパネルに警告が表示される)
  • チェックイン・チェックアウト(バージョン管理のようなもの)
  • ライブビュー(デザインビューでプログラム部分が触れる)
  • コード補完、コードカラーリング(コードが色分けされて表示される)
  • ファンクションジャンプ
  • 外部エディタ登録([環境設定]ー[ファイルタイプ/エディタ]で、好みのエディタを登録することが出来ます)
ラクラクかんたん!Flash Video 組み込み手法(金像 瑞穂 さん)

アクセスフローの違い

DreamweaverでFlash Videoを挿入する方法とExpress Installについて紹介されていました。Flash Videoを挿入する方法として4つほど挙げられていました。

  • [挿入]メニュー
  • [挿入]バー
  • [ファイル]パネルからドラッグ&ドロップ
  • Adobe Bridge CS3からドラッグ&ドロップ

Express Installとは、最新バージョンのFlash Playerに自動更新するFlash Playerの機能のことをさすそうです。Dreamweaverには標準搭載はされていなく、ファイルをダウンロードする必要があるそうです。
詳細はAdobeディベロッパーセンターでの記事「Express Install 適用ガイド」に掲載されています。

Dreamweaver で使いやすい入力フォームを作りましょう!(藤川 真一 さん)

Validation Widgets Demo

Dreamweaver CS3にインストールされているSpry1.4では、テキストフィールドの入力チェックができましたが、Spry1.6ではラジオボタンの入力チェック、パスワードのチェック、再入力チェックなどが追加されたそうです。
Spryが記述されたsample.htmlを参考に挿入する場合のコツとして、以下の3点を挙げていました。

  • 外部JSとCSSへのリンクパスを記述する
  • 該当部分のHTMLの構造はキープする
  • body内にSpryとHTMLを結びつけるJSの記述も残す
もうテキストエディタには戻れない!(近藤 将範 さん)

Dreamweaverのコードビューで使える豊富なショートカットが紹介されていました。

機能 Windows Mac
親タグを選択 ctrl + [ command + [
インデント解除 ctrl + shift + <
ctrl + alt + [
command + shift + <
command + option + [
インデント挿入 ctrl + shift + >
ctrl + alt + ]
command + shift + >
command + option + ]
行を指定して移動 ctrl + g command + '
タグをたたむ ctrl + shift + j command + shift + j
タグを展開 ctrl + shift + e command + shift + e
選択範囲をたたむ ctrl + shift + c command + shift + c
見出しの挿入 ctrl + 1~6 command + 1~6
改行の挿入 shift + enter
画像の挿入 ctrl + alt + i command + option + i
折り返しタグの挿入 ctrl + t command + t
生活に役立つ小ネタ集(林 岳里 さん)

セッションタイトルの通り小ネタTipsが紹介され、特に [ctrl + f] での検索・置換について多く紹介されていました。
検索対象として「選択したテキスト」がDreamweaver8から搭載されている、クエリーを使うことによってaltが入っているimg要素・入っていないimg要素で検索・置換の対象を分けられたり、正規表現を使うことで様々なバリエーションの検索・置換ができるようになるとのことでした。

セッションはひとり10分、オーバーすると強制終了というスタイルで行われ、早足で聞き取れない部分があったり、時間内に収まらなかったスピーカーの方もいらっしゃいました。セッションの詳細はAdobeディベロッパーセンターにて公開されていくそうなので、楽しみにしていたいと思います。

トラックバック(0)

このブログ記事に対するトラックバックURL: http://www.projectdd.jp/cgi/mt/mt-tb.cgi/131

コメントする

プロフィール

お友達募集中w

お気軽にjoinしてください

track feed
www.flickr.com