dwlog.net

SOYCMS2のテンプレートタグコードヒントを作成しました。

2010-11-29T08:51:14Z

またまたのご無沙汰申し訳ありません。

今までMovableTypeばっかり(WordPressも一度あるけどw)で、そろそろ他のCMSにも手をつけなきゃとか思っていたところ、知り合いのサイトを作成する機会があったので、SOYCMS2のベータ版を試してみることにしました。

開発元からテンプレートタグのDreamweaver用のスニペットは提供されているのですが(インストールでエラーが出て入れられないけど)、コードヒントは用意されていません。本心を言えば、（自分がコメントタグコードヒントを作ったときに、同じようにスニペットを提供していたablogcmsの方は速攻で対応してくれたので）開発元さんに提供して欲しかったところですが、現時点で無いので、自分用に作ってみました。

【機能について】

SOYCMS2のテンプレートタグをコードヒントで表示します。スニペットで提供されている内容はほぼ反映しているつもりです。
開始タグのみ、終了タグのみ、両方セットといった形で挿入できます。
スニペットの挿入方法で改行無しで扱っているタグ(インライン的に扱うもの？)は改行なしで、改行ありで扱っているタグ（ブロック的に扱うもの？）は改行ありになっています。
a、form、img、input、link、meta、select、textareaのタグライブラリを修正しています。カスタマイズしている場合は上書きされます。ご注意ください。

【対応バージョンについて】

インストールはDreamweaver8以降に対応しています。

【導入方法】

解凍したファイルはmxp形式となっており、ExtentionManagerにて簡単に導入することが出来ます。

【ダウンロード】

以下のファイルをダウンロードしてください。（zipで圧縮しております。）
Soycms2_CodeHints_v050.zip

昨日作った接頭辞付きCSS3プロパティー同時挿入コードヒント拡張機能をバージョンアップしました。

2010-09-15T12:05:05Z

linkerの@cremaさんブログで取り上げていただき、ありがとうございます。公開後にTwitterやはてブでコメントがあったので、早速ですが、一部対応しました。

【機能について】

プレフィックス無しのプロパティーの位置を最後移動。
一部プロパティーをIEに対応（-ms-、filter:など）。

【対応バージョンについて】

インストールはDreamweaver8以降に対応しています。

【導入方法】

解凍したファイルはmxp形式となっており、ExtentionManegerにて簡単に導入することが出来ます。

【ダウンロード】

以下のファイルをダウンロードしてください。（zipで圧縮しております。）
css3_setwithprefix_v110.zip

ブラウザ固有の接頭辞(プレフィックス)のあるCSS3プロパティをまとめて挿入するコードヒントを作りました

2010-09-14T15:29:26Z

バージョンアップしました。詳細はこちらの記事で

久々の投稿です。11.0.3のアップデータでHTML5 Packが正式にDreamweaverに導入されました。個人的には今までのようにmxpで導入のオンオフ制御を希望するところですが、オンオフができるのは何故かマルチスクリーンプレビューのみという変な対応になってます。まあどうでもいいですが中途半端だなあと...。

HTML5 PackではもともとCSS3プロパティ＆Firefox、Safari、Operaの接頭辞付きプロパティに対応してましたが、Labsにあったベータ版ではヒンティング表示が一律で、選んでいくのに、過剰なスクロールをしないといけないという、いけてない仕様でした。それが11.0.3になって一旦接頭辞(-moz-、-o-、-webkit-)だけ表示して該当プロパティのみ表示する、スマートな形に変わっていて、個人的には使いやすくなっていると思います。

その他プロパティの値やHTML5のDOM関係のコードヒントも追加されているようで、JavaScriptの開発時もそれなりに重宝しそうです。

相変わらずセレクタには対応していないので、セレクタのコードヒントをご希望の方はCSS3セレクタ機能拡張を入れてください。

で作業してて思ったのが、まだCSS3は正式勧告ではないし、ブラウザ対応のためにまだ多くのプロパティに接頭辞付きプロパティを追加しないといけない現状があります。となるとプロパティによっては各ブラウザ毎に3-4つくらい、さらには値も指定してやる必要があります。

ということで多少の入力補助になるかもと思って、接頭辞付きもまとめて挿入するコードヒント拡張機能を作ってみました。

【機能について】

ヒントリストの語尾に「＋」のあるプロパティを選択すると、Firefox、Safari、Operaのプレフィックス付きプロパティが同時に挿入されます。
IEの対応は、最近はいろいろな手法が出てたりすることもあり、今回は見送りました。（要望が多ければ検討します）
挿入されるのはプロパティーのみです。値は個別に入れてやる必要があります。
改行時にインデントしてないので変換時はいけてませんが、そこはコードフォーマットで整形してください。
background-imageの時に、グラデーションをlinearかradiusで挿入するように設定しているのですが、デフォルトのCodeHint.xmlだと表示されません。こちらはもうすぐ出す予定のスペシャルコードヒント改訂版で修正しましたので、表示可能になるはずです。

【対応バージョンについて】

インストールはDreamweaver8以降に対応しています。

【導入方法】

解凍したファイルはmxp形式となっており、ExtentionManegerにて簡単に導入することが出来ます。

【ダウンロード】

以下のファイルをダウンロードしてください。（zipで圧縮しております。）
css3_setwithprefix_v100.zip

ページ間を移動するコマンドを作成しました

2010-08-25T15:05:17Z

久々の投稿です。なんとなく思い立って久々にFireworksのコマンドを作成しました。

CS3から搭載されたページ機能ですが、ページ間を移動するショートカットを知らないので勝手にないんだろうと思って作成しました。

APIを使って簡単にできるだろうと思っていたのですが、Fireworks CS5のExtending Fireworks CS5のAPIを探していると現在のアクティブページを取得するAPIがない。orz　適当にググッていると、Yoropan blogなるサイトでfw.getDocumentDOM().currentPageNumなんていう本家のリファレンスに記載のないAPIを使っているサイトを発見。ドンピシャで取得できました。

という訳でできたコマンドです。

【機能について】

メニューからpageupまたはpagedownを選択でページを移動します。基本カスタムショートカットを割り当ててください。
きちんとループするように作ったつもり。

【対応バージョンについて】

インストールはFireworksCS3以降に対応しています（ページ機能が実装されているため）。

【導入方法】

解凍したファイルはmxp形式となっており、ExtentionManagerにて簡単に導入することが出来ます。

【ダウンロード】

以下のファイルをダウンロードしてください。（zipで圧縮しております。）
movePages_v100.zip

追記

やっぱり普通にショートカットが存在しました(泣)。Fireworks CS5だとPage Up、Page Downで割り当てられています。CS4も同様だったのですが、移動する向きが逆です。

FireworksのレイヤーパレットのWebレイヤーって表示の必要ある？

2010-06-14T01:00:00Z

CSS Nite in Omotesando, Vol.2で関口さんがFireworksの隠し機能について話をされていたので、自分も1つネタを書いてみます(といってもネタ的には以前の個人サイトに既に答えがありますが...)。

色々とページデザインをしていると、レイヤーが増えてくるので、1つでもレイヤーが無くなって欲しいって思いませんか？

実はWebレイヤーはレイヤーごと非表示することが出来ます。以下のような感じ。

このWebレイヤーの表示非表示もFireworks Preferencesに設定されている隠れた機能の1つです。LayersList_ShowWebLayerという設定項目をtrueまたはfalseにして切り替えます。

Webレイヤーはスライスを格納するのに特化したレイヤーでスライス自体の表示非常時はメニューパレットでコントロールが出来ます。スライス名はプロパティーインスペクタで変更できるし、しかもスライス自体は別のレイヤーに持っていくことは出来ません。ってことはレイヤーパレットに表示されてなくてもいいじゃんというのが個人的な考えです。

ということで、これをコマンドにして、さらに導入しやすいように拡張機能にしました。まあ頻繁に切り替えるものでもありませんが、カスタムショートカットを割り当てることでちょっぴり便利になるかもしれません。

【機能について】

この機能拡張を導入するとコマンドメニューにview > Webレイヤービュー制御が追加されます。そのメニューを選択するとレイヤーパレットにWebレイヤーが表示されているときは非表示、非表示の時は表示されます。
Fireworksのバージョンによってはすぐに表示が切り替わらない場合があります。その時はレイヤーパレットを再表示させたり、オブジェクトを編集してください。

【対応バージョンについて】

インストールはFireworks MX以降に対応しています（いるはず）。インストールが出来ない、表示に問題があるなどの場合は報告して下さい。

【導入方法】

解凍したファイルはmxp形式となっており、ExtentionManegerにて簡単に導入することが出来ます。
MacOS、Windows問わず、ログインしたユーザーに管理者権限がないとインストールが出来ません。注意してください。

【ダウンロード】

以下のファイルをダウンロードしてください。（zipで圧縮しております。）
SetVisibleWebLyr_v100.zip

Fireworksの角Rの線の太りが気になる方へ

2010-06-13T01:45:00Z

表参道 The Gallery「station 5」で開催された、CSS Nite in Omotesando, Vol.2 のとみた嬢のセッション(Ustreamのアーカイブ参照)で、Fireworksの角R(角丸)の太りの指摘されていました。

確かに長年の悩ましい事象なのですが、長年Fireworksをメインで使ってきた身としてはなんとかならないかなと思い、ちょっと検証してみました。

Fireworksでは線といいましても色々なアプローチで作成することが出来ます。今回試したのは以下の4パターン。

線
グロー
Photoshopライブエフェクト：光彩（外側）
Photoshopライブエフェクト：ストローク

1pxの線と3pxの線でを本来なら素直に線で作るだろうと思われますが、エフェクトを使っても作成出来ます。

ってことでストレートに結果は以下。色や見た目的には全然いけてないサンプルですが、まあこれは一番分かりやすいと思われます(笑)。

上記画像はFireworks pngですので、ダウンロードしていただければ、使用しているエフェクトも確認できます。

結果としては「Photoshopライブエフェクト：ストローク」なら角Rの線が太らないということになります。PhotoshopライブエフェクトはCS3から対応しているはずなので、CS3以降のユーザーならこの恩恵は得られるかなと。まあ出来れば、普通の線で同じ結果になるようにFireworksには対応して欲しいなあと思います。

以下余談。

だんだんと解消されているPhotoshop、Illustratorオブジェクトとの描画の違いですが、まだまだオブジェクトのアンチエイリアスの質感は微妙に異なると思います。

Fireworksユーザーを増やすには、変な機能を追加するより、

アンチエイリアスの質感を同様になるように対応すること
効果やクリッピングマスクをきちんと再現することに対応すること

この2点、要するに取り込んだファイルを劣化しないでかつ編集可能な状態で表示することが一番の近道だと自分は確信しています。

このイベントでウープスデザインの石嶋さんが奇しくも「Fireworksはレイアウトツール」と言われていました。Adobeはまさにそれを理想の形としてFireworksを存続させています。しかしながら上記の対応が前提でなければ、それは成し遂げられないと自分は思っています。

ということでAdobeさん対応よろしくお願いします。

【追記】

Twitter上で @nansya 氏よりご指摘がありましたので追加で確認してみました。

上記の1px線は、プロパティーインスペクタのチップのサイズを1にしただけなので、厳密には「鉛筆：1ピクセルの柔い線」です。これに「基本：エッジが柔い線（丸）」も追加検証しました。

結果としてはかなりいい線いってますが、Photoshopライブエフェクト：ストロークの方がちょっとだけ良い感じです。太い線なら十分使えそうな気がします。

IEのコンディショナルコメント(条件付きコメント)をコードヒントで出せる機能拡張を作りました。

2010-05-25T13:38:12Z

IEのコンディショナルコメント(条件付きコメント)をコードヒントで出せる機能拡張を作りました。

コーディングしながら、そういえば無かったなあと思って作りました。IEの条件付きコメントはデフォルトでスニペットとしてあるんですが、それをコードヒントで出せるようになる機能拡張です。

スニペットの方がショートカットを設定しておけば、一発で入れられるので楽かもしれませんが、（少なくとも自分は）ショートカット全部に設定して覚えるのは厳しいかなと思ったので作ってみました。

まあ最近はスニペットもDreamweaverのものだけでなくて、他のエディタと共有できるユーティリティーアプリとして存在するものもあるし、ZenCodingのようなアプローチのコーディング方法もあります。自分としては制作者がコーディングする際にいろいろなアプローチが提供されるべきだと思っているし、すでにコードヒントの場合は、すでに機能として存在していながらデフォルトでは出せないわけで、それを出せるようにすることで、制作者の1選択肢となればよいなあと思っています。

あと近いうちにIE専用のfilterとかを集めたCSSプロパティのコードヒントも出せたらいいなとか思ってます。乞うご期待。

コードヒントネタがぼちぼち切れてきたので、こんなのが出せたらいいなというのがあれば、教えていただけると考えてみます。プログラム系はちょっと厳しいですが...。

【機能について】

"<!"を入力すると候補にif lt、if lte、if gt、if gte、if IE、if !IEが出てきますので、その後にブラウザバージョンを再度選択する流れになります。
候補に(end)とついたものは閉じコメント（<![endif]-->）を一緒に出力してくれます。
ブラウザの候補はIE6〜IE9。

【対応バージョンについて】

インストールはDreamweaver8以降に対応しています。

【導入方法】

解凍したファイルはmxp形式となっており、ExtentionManegerにて簡単に導入することが出来ます。

【ダウンロード】

以下のファイルをダウンロードしてください。（zipで圧縮しております。）
ie_conditional_comments_codehint_v100.zip

Dreamweaver Town Meeting in Tokyoに参加します。

2010-05-23T04:30:42Z

5/29(土)に東京、新宿のベルサール新宿で開催されるDreamweaver Town Meeting in Tokyoの大喜利部門で話します。

この1ヶ月くらいでDreamweaver Town Meeting in Kyoto、CSS Nite in OSAKA Vol.20とこのイベントと引き続き、内容がかぶり気味で申し訳ないのですが、自分の開発したHTML5+CSS3のコードヒント機能拡張ネタが中心です(笑)。それだけ注目されているということなんだと思いますが、取り上げていただけることは本当にありがたいことです。

もちろんCS5日本語版もリリースされますし、AdobeからリリースされたHTML5 Packの紹介もする予定です。
タイトルは
「Dreamweaver de HTML5」

大喜利部門でのプレゼンで、7分という厳しい時間内に完結できるよう絶賛練習中です(笑)。短くまとめるというのは本当に難しいです。いかに自分がまとめきれない人間かが露呈されてしまいます。orz

参加される皆さんには、当日お会いできますことを楽しみにしております。イベント終了後の懇親会も含め、東京の方々のモチベーションを吸収しようと思います(笑)。よろしくお願いします。

CSS3コードヒント機能拡張が出来ました

2010-05-16T10:11:43Z

CSS Nite in OSAKA Vol.20に参加された皆様、長丁場のイベントでしたが、ご来場誠にありがとうございました。アンケートも拝見しましたが、絶対を通して概ね満足していただけたようで、スピーカーかつ実行委員としてうれしい限りです。イベントの内容に関しましては改めてネタにしようと思います。

さて本題ですが、自分のセッションで紹介したCSS3コードヒント機能拡張を公開します。是非使っていただき、不具合や要望などフィードバックいただければと思います。実はDreamweaver CS5のライブビューが秀逸な事が判明し、これとHTML5タグライブラリ機能拡張、CSSセレクタコードヒント機能拡張のセットで割と快適なコーディング環境になるのではないかと思います。

とりあえずよく使いそうなプロパティを先行して登録して公開しました。まだ出ないプロパティもあります。ご了承下さい。

【機能について】

CSS3のプロパティをコードヒントで出せます。ただしまだすべてのプロパティに対応はしていません。
各ブラウザの接頭辞にも対応。
-moz-、-webkit-は接頭辞入力後もプロパティが出ます。
@の入力で@import、@font-face、@-webkit-keyframesに対応
規定値がある場合は多分値も出ます。
半角空白+!で!importantが出ます。

【対応バージョンについて】

インストールはDreamweaver8以降に対応しています。

【導入方法】

解凍したファイルはmxp形式となっており、ExtentionManegerにて簡単に導入することが出来ます。

【ダウンロード】

以下のファイルをダウンロードしてください。（zipで圧縮しております。）
CSS3_CodeHints_v030.zip

CSS3で書いたドラえもんをDreamweaver CS5のライブビューで見てみた。

2010-05-08T03:38:25Z

来週のCSS Nite in OSAKAに向けて絶賛資料作成中ですが、現実逃避でUSでトライアルがリリースされたDreamweaver CS5をインストールしていじってます。

Dreamweaver CS5の新機能である強化されたライブビューで外部サイトを表示可能になったので、素朴な疑問で、先日からネットで盛り上がっている「画像を一切使わずにCSS3だけでドラえもんを描いてみた！」を表示させてみました。

結果は以下。

各ブラウザでの表示。（画像クリックで原寸表示）

Webkitエンジンを使っているはずですが、Safari、ChromeよりはFirefoxに結果が近いのは何でなんでしょう。画像では表示されてませんが、目玉のアニメーションもきちんと表現されてました。

デザインビューが使えないのはいけてないですが、ライブビューでここまでOKなら、まあ使えるというのが実感です。もうデザインビューはやめて、編集可能なライブビューにして欲しいところ。

CSS3コードヒントを早くリリースしなきゃ。

Dreamweaver Town Meeting in Kyotoでしゃべってきました。

2010-04-24T14:15:12Z

告知した通り、2010年4月21日に京都、メルパルクKYOTOで開催されたDreamweaver Town Meeting in Kyoto（CSS Nite in KYOTO, Vol.2）で、「HTML5コーディング環境をDreamweaverで構築する　〜タグライブラリの活用〜」というタイトルで話してきました。100人ほどの前で話すのは何度やっても緊張します。

今、受講者向けに先行配布される予定の音声データの自分の分を聴いているんですが、相変わらずしゃべりが流暢でないなあと、つくづく反省。「まあ」が多すぎ。orz

懇親会でも鷹野さんからの愛あるダメ出しを頂き、次のプレゼンでは、もう少しだけでもスマートに話したいなあと決意を新たにしました。次に確定しているのはDreamweaver Town Meeting in Tokyo。その前にあるCSS Nite in OSAKA Vol.20でも話すかもしれません(笑)。少しは進歩したプレゼンになりますように。

鷹野さんからは「事前にリハをするときに1分でも、録音して自分の音声を聴くだけでも全然違う」とアドバイスいただきましたので、練習の時に取り入れていきたいと思います。

セッションの内容はタグライブラリの使い方とHTML5タグライブラリ機能拡張の紹介がメイン。スライドはこのブログで数カ月後に公開します。

個人的にびっくりしたのは、タグライブラリを使っているかを挙手してもらったのですが、わずか5人ほど。知っていて挙手しない人もおられるかとは思いますが、そんなに使われていない機能なんですね。orz

他人の作ったソースをもらうと大抵、"コードフォーマットの適用"を実行すると思います。タグライブラリでコードフォーマットをカスタマイズすれば、ほぼ思い通りの体裁に整えることが出来ます。是非使って欲しいと思います。

便利な機能だと思うのですが、みんな知らないということは、おそらくマニュアル本にあまり乗っていないのかもしれません。

さらに考えられる理由として、カスタマイズした設定をバックアップ出来ないところにあるかもしれないと思いました。

コードフォーマットを設定するときはタグ1つ1つに設定をしていかないといけませんので、それなりの手間がかかってしまいます。それなのにDreamweaverにはバックアップする手段がありません。ソフトをバージョンアップしたりするとそれを引き継ぐことが出来ません。

プロ向けのツールとしての基本の1つとしてバックアップが出来ることは重要です。時間をかけて設定した内容が、バージョンアップしたり、他のPCにインストールしたときに使えないのは痛いです。

長々と書きましたが、Dreamweaverを長く使い続けたいという思いからです。将来のDreamweaverには是非搭載されることを望みます。

HTML5タグライブラリ機能拡張を更新しました。

2010-04-22T12:50:43Z

Dreamweaver Town Meeting in KyotoのセッションでHTML5タグライブラリ機能拡張を含めたタグライブラリネタで話しました。おこし頂いた方、誠にありがとうございます。久しぶりに話すと予想通りカミカミになってしまいました。

会場でも挙手していただきましたが、タグライブラリ使っている人って意外と少ないんですね。ちょっとした手間をかけるだけで効率の上がる1手段だと思いますので、是非使ってみて欲しいと思います。

話は変わって、前回リリースして半年以上たちましたが、上記イベントのセッション内で告知した通り、HTML5タグライブラリー機能拡張をアップデートしました。Working Draftの最新版の情報を盛り込んだつもりです。

【更新内容】

Working Draftの最新版の情報を踏まえたタグ、属性に変更。
既存タグで新規追加された属性の追加。
決まった属性値のコードヒント表示に対応。
mxiの文字コードをUTF-8に変更

機能の詳細は別記事「HTML5で新規追加されたタグをDreamweaverのタグライブラリーに登録してみた」を参考にしてください。

【注意点】

新規ドキュメントのHTML5の構文は前回と同様にXML構文となります。本当はHTML構文と選択可能にしたかったのですが、ドキュメントタイプが同じ<!DOCTYPE html>だと混在できないようです(多分Dreamweaverの仕様です。<!DOCTYPE xhtml>にすれば混在できるけど微妙)。XML構文は個人的好みで選択しています。実はCS5は新規ドキュメントのみHTML5で作成できますが、HTML構文なります。ですので、HTML構文で書きたい旨のリクエストが多ければ別途検討します。
XML構文が前提なので、論理属性の属性（例えばinputタグのcheckedなど）はchecked="checked"のようになるように設定しています。但し既存タグの既存属性に関しては一部のみ修正しています。
Tag選択（挿入メニュー > タグ...）には対応していません。選択は出来ますが、タグの解説やグルーピングがなされていません。
Dreamweaver 8以降でインストール出来るように設定していますが、保証はしません。
デザインビューでの表示は対応していません。あくまでコードヒントでHTML5のタグ＆属性を表示させることにフォーカスしています。
新規ドキュメント作成時の文字コードのmetaタグは
　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　となってしまいます。Dreamweaverの仕様になります。HTML5の仕様としてはこのままでも問題ないようです。

【ダウンロード】

以下のファイルをダウンロードしてください。鷹野さんにlzhじゃなくてzipにしてと言われましたので圧縮方法を変えました(笑)。（zipで圧縮しております。）
html5_tag_suites_v050.zip

【追記】

ダウンロードのリンク先が間違っておりました。修正しました。4/23 2:32

あなたがDreamweaverに求めているものは何ですか？

2010-04-15T12:15:13Z

　重ねての宣伝になりますが、4/21(水)に京都で開催されるDreamweaver Town Meeting in Kyotoにスピーカーとして出演します。久々に人前に立ちますので今からドキドキしています。参加される方、よろしくお願いします。

　その際にAdobeの中の人ともお会いします。リアルに会える願っても無いチャンスなので、自分なりのDreamweaverに求めるものを伝えたいと思っています。

　せっかくの機会だし、自分だけのアイデアだと狭いものになりそうなので、日本のDreamweaverユーザーが、何をもとめている広く募集してみることにしてみます。もうちょっと早く告知すればよかったのですが、申し訳ありません。

　まあぶっちゃけ、Adobeのサイトにも「製品への要望 / 不具合報告フォーム」なるものが存在しますので、みんなどんどん要望（クレームじゃ無いよ(笑)）を出せばよいのですが、ほとんどの日本のユーザーは不満を持ちつつも、声を出す人は少ないのではないかと思います。そもそもこんなフォームがある事自体も知らない方は多いのではないでしょうか。

　抽象的なアイデアだと実現されにくいです。現実的なかつ、より具体的なアイデアを出していただければと思います。価格や旧バージョンサポートとか、そんな愚なことはNGです。あなたがこの機能が実装されたら絶対にバージョンアップするというものを求めます。実現される保証は全くありませんが、確実にAbobeの中の人に届けたいと思います。多分このブログも見ていただけていると（勝手に）思ってますが...。

　コメントに記載していただくのがベターかなと思いますが、ご自身のブログからトラックバックでも結構です。是非すばらしいアイデアをお待ちしています。

と募集するだけだと何なので、今自分が持っているアイデアを書いてみます（自分で行っておいて抽象的な内容もあります...(笑)）。とりあえず今はこれだけきちんと実装されたらバージョンアップ料金が5万でもするなあ（たった5万かよ！）。ってかこれだけ実現されたら、自分的には当分は特別な機能は必要ないくらいです（それじゃあアドビさん困りますよね）。

◯テンプレート・ライブラリ関連

【ライブラリで編集可能領域を設定出来るようにして欲しい】

Dreamweaverテンプレートみたいなものです。ライブラリを入れ子にして部分的に変更出来たりするようなものが出来れば嬉しいかなと。

【オプション領域やリピート領域のGUIでの設定の最適化】

Dreamweaverテンプレートの肝はテンプレート式を併用したオプション領域による強力な振り分け可能な機能なのですが、現状のダイアログを使った設定方法ではそこまで踏み込んだ設定が出来ません。テンプレート式はリソースも少なく（マニュアル本自体のテンプレートの説明自体が貧弱）、コードで直接書かないといけません。ここは現状のGUIをブラッシュアップして踏み込んだ設定ができるようになって欲しいと思います。

リピート領域もリピートタグなるものが存在します。こちらもGUIで踏み込んだ設定ができるようになって欲しいです。

そもそもDreamweaverテンプレートの機能自体MX以降、全く進化していません。前にも書いている通り、これは大きな問題だと思います。

◯サイト管理関連

【サイト作成時に初期ファイルを設置出来るようにして欲しい】

ほとんどの場合、社内ルールでローカルサイト内のフォルダの置き場所や初期の時点で絶対に使用するJavascriptや画像などをまとめたテンプレートを持っていて、現状ではローカルフォルダ設定時に、その中にまとめてぶち込んでいると思います。

特定のフォルダにテンプレートデータを入れておけば、新規サイト設定を完了したら自動でテンプレートデータが設置されると便利になるかなと思います。

【IE専用のセレクターを収集してIE専用の外部CSSとしてまとめて欲しい】

現状では制作時にIE専用の独自セレクターなどが、どうしても点在して後からまとめるのが大変だったりします。まあ設定時点でIE専用の外部CSSファイルに書けばよいのですが、面倒です。Dreamweaverの方でチェック・収集して外部ファイルにまとめ、振り分け用コメントも作成してくれるとありがたいです。

現状のサイトの同期非同期のようにファイルをチェックして一覧をだす。
まとめたいセレクタをユーザーがチェック。
振り分けるバージョンを選択（IE6以下とか）。
外部CSSの書き出し場所を設定。
処理が実行され、HTML内に振り分けコメントとlinkタグが挿入、外部にCSSファイルが作成される。

外部CSS書き出しは、既存のCSSファイルにも書き込み可能になれば、尚便利かなあと。

【使用していないCSSセレクターをチェックして削除等が出来るようにして欲しい】

納品時は出来るだけクリーンなデータで納品したいですが、制作途中でどうしても使われなくなったCSSセレクターとかが残ってしまいます。
サイト内チェックをして使われていないセレクタをピックアップして削除できたら嬉しかったりしませんか。

現状のサイトのファイルをチェックして使用していないCSSセレクターの一覧をだす。
削除したいセレクタをユーザーがチェック。
削除実行。

【FTP時にHTMLやCSS、JSのminify化】

最近はサイトの最適化のためにコードの圧縮がよくなされます。ローカルデータは編集効率が落ちるのでローカルでの圧縮をされると困りますが、リモートにアップする際に最適化をしてくれるとうれしかったりしませんか？
考えられる問題はサーバー上のデータを取り込んだ時ですが、現状の機能でコードフォーマットの機能があります。minifyされたものは自動的にコードフォーマットのルールに基づいて展開されたら支障はないのかなと思います。

【サイト設定毎の基本文字コードの設定】

クライアントの指定で必ずしも文字コードは一定ではありません。環境設定にも今のままの設定は残しつつ、サイト設定を行うときにベース文字コードの設定が変更可能で新規ドキュメントを作成すると、その設定した文字コードでドキュメントが出来たら嬉しいかなと。

◯CSS関連

【新規CSSルールの設定で属性セレクタや擬似クラス、擬似要素を設定出来るようにして欲しい】

現在、a:hover、a:link、a:visited、a:activeしか対応していません。
新規CSSルールダイアログで選択項目とかをつけて対応可能にして欲しいと思います。こんな感じ。

◯コードヒント関連

【コメントタグのコードヒント対応】

まあもう既に、自分が出している機能拡張で実現していますが、これはやはり正式サポートして欲しいと思っています。コメントタグがコードヒントで出せれば、Dreamweaverテンプレートタグやライブラリタグもコードヒントで出せると思っています。ってかDreamweaverテンプレートタグもコードヒントで出せてますが...。

【コードヒントのカスタマイズ機能の実現】

HTMLやMTタグのような場合はタグライブラリーで属性も含めて追加登録可能です。しかしながら、CSSやJavascriptのようなタグ以外のものは、現状では直接codehint.xmlなどの設定ファイルをいじらなければ、カスタマイズが実現出来ません。タグライブラリーエディタのようにダイアログ等で編集可能になって欲しいです。これが実現するとユーザーが強力にカスタマイズ可能になるのでコーディング環境としてのDreamweaverの魅力が増すのかなと思っています。
なお希望する編集可能な項目は以下、

使用しないプロパティーの非表示設定。
→widowsなど使わないものは表示させたくない。
新規のプロパティー・値を登録。
→新しいhtmlやcssプロパティーが出ても即座に対応出来る。
プロパティーなどの表示順序の変更。
→よく使うものは先頭で表示したいですよね。
出来ればカスタマイズしたものをバックアップ対応。
→社内共有ができるし、配布も可能になります。出来ればmxpで出来ればよいかなと。

【CSSセレクターのコードヒント対応】

これも自分が既に作ってますが、現在はさらにブラッシュアップして属性セレクタの時に使用しているクラスやID、属性とかもコードヒントで表示出来たらもっとよいと思います。

◯その他

【HTML5＆CSS3に標準で対応】

コードヒントだけでないデザインビューでの表示とかそういうもろもろ含めた正式対応。Dreamweaver CS5が先日ついにリリースされてどうやらCS5はHTML5、CSS3にはまともに対応していないようです。まだ勧告されていない現状はありますが、盛り上がっている昨今、誠に残念なことですね。

新規で勧告された属性をプロパティーインスペクタでコントロール可能にする。
新規ドキュメント作成ダイアログでHTML構文、XML構文含めたHTML5ドキュメントの作成対応。→現状では仕様っぽいのですが、どっちかしか設定出来ない。
HTML5の新規ドキュメントテンプレートをHTML4やXHTMLのものと別途に設定して欲しい。

【デザインビューのAcid2対応】

現場の人間が求めるのは、リアルタイムにレンダリングされるものが、いかに精度が高いものであるかが重要で、ライブビューでもBrowserLabでもないと自分は考えます。1つボタンクリックしたり、アクセスを待つくらいならプレビューで実際のブラウザで確認した方がましです。Acid2対応のデザインビューが実現されたら、何も迷うことはないと思うのは自分だけでしょうか。

【Macでのパフォーマンス向上】

もう少し頑張って欲しいですね。サクサク仕事がしたいです。

Dreamweaverテンプレートタグをコードヒントで出す機能拡張作りました。

2010-04-06T05:00:00Z

コードヒントばっかりですみません(笑)。それくらいコードヒントには突っ込みどころ満載だと思って下さい。

コメントがコードヒントで出せるようになったので、多分出来ると思って作りました。

以前このブログに移行する前にDreamweaver覚え書きの方でDreamweverテンプレートタグをスニペットにまとめたものを公開していたのですが、個人的にはコードヒントで出せるようになるとほとんど必要が無くなります。

いやあ、自分でいうのもなんですが、早い段階でテンプレートタグするはGUIは使ってなく、コードビューでガシガシ書いている派だったので、もっと早くに作っておきたかった...。それくらい今回のは悔やまれるネタです。

コードビューで直に書いているのは言うまでもなく、細かい指定ができるからです。リピート領域なんて単なく繰り返しじゃなくてリピート変数なんてのも使えますからね。GUIで使えるのは、テンプレート機能の半分程度なんじゃないかな。

ちょっとだけ宣伝になりますが、その辺りは以前共著で書かせていただいたDreamweaverプロフェッショナルスタイルで詳細に記述しています。

ってか非常に疑問なのが、テンプレートの機能ってDreamweraverMXから4回のメジャーバージョンアップをしてきましたが、何の変化もありません。

テンプレートだけでなく、ライブラリーなんかもそうなんですが、Dreamweaverを使う強力な理由の1つだと思うのです。もっとブラッシュアップしてもいいんじゃないかなあって前から思っているんですが、自分だけでしょうか？

最近はCMSが台頭してきていますが、MovableTypeやa-blog cmsなど外部で雛形を持てるようなタイプだと共通UI部分とかは、十分に併用して構築が出来ます。

と少し愚痴っぽくなってしまいましたが、本題に戻すと機能等は以下。

【機能について】

テンプレートタグをコードヒントで表示します。
もちろん編集可能領域、オプション領域、リピート領域すべてに対応
リピート領域で使うリピート変数も網羅しています。例題も含めています。
コメントコードヒント機能拡張と併用すれば、コメントを閉じることが出来るのでおすすめ。
以前作成したテンプレートタグスニペットも同梱しています。

【対応バージョンについて】

インストールはDreamweaver8以降に対応しています。

【導入方法】

解凍したファイルはmxp形式となっており、ExtentionManegerにて簡単に導入することが出来ます。

【ダウンロード】

以下のファイルをダウンロードしてください。（lzhで圧縮しております。）
DWTemplateTag_CodeHints_and_snippets_v100.lzh

CSSセレクターコードヒント修正

2010-04-04T00:04:53Z

CSSセレクターコードヒント修正

CSSセレクターのコードヒント&スニペットをたくさんDLいただきありがとうございます。作った甲斐があります。

Twitter見てたらフォローしているbotから習作のCSSセレクタコードヒントの使用レポートを書いてくれている方を見つけたので拝読。

早速ミスが判明したので修正版をアップしました。報告ありがとうございます。

【修正内容】

":"を入力したとき[foo]など"["から始まる属性セレクタが表示されるのを"["を入力したら出るように修正。

【ダウンロード】

以下のファイルをダウンロードしてください。（lzhで圧縮しております。）
~~修正版：css_selector_codehint_v051.lzh~~
修正版：css_selector_codehint_v052.lzh

【追記】

タグを閉じてなかったのでさらに修正。Redさん多謝！