またまたのご無沙汰申し訳ありません。
今までMovableTypeばっかり(WordPressも一度あるけどw)で、そろそろ他のCMSにも手をつけなきゃとか思っていたところ、知り合いのサイトを作成する機会があったので、SOYCMS2のベータ版を試してみることにしました。
開発元からテンプレートタグのDreamweaver用のスニペットは提供されているのですが(インストールでエラーが出て入れられないけど)、コードヒントは用意されていません。本心を言えば、(自分がコメントタグコードヒントを作ったときに、同じようにスニペットを提供していたablogcmsの方は速攻で対応してくれたので)開発元さんに提供して欲しかったところですが、現時点で無いので、自分用に作ってみました。
]]> 【機能について】久々の投稿です。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つくらい、さらには値も指定してやる必要があります。
ということで多少の入力補助になるかもと思って、接頭辞付きもまとめて挿入するコードヒント拡張機能を作ってみました。
]]> 【機能について】
CS3から搭載されたページ機能ですが、ページ間を移動するショートカットを知らないので勝手にないんだろうと思って作成しました。
APIを使って簡単にできるだろうと思っていたのですが、Fireworks CS5のExtending Fireworks CS5のAPIを探していると現在のアクティブページを取得するAPIがない。orz 適当にググッていると、Yoropan blogなるサイトでfw.getDocumentDOM().currentPageNumなんていう本家のリファレンスに記載のないAPIを使っているサイトを発見。ドンピシャで取得できました。
という訳でできたコマンドです。
]]> 【機能について】やっぱり普通にショートカットが存在しました(泣)。Fireworks CS5だとPage Up、Page Downで割り当てられています。CS4も同様だったのですが、移動する向きが逆です。
]]>色々とページデザインをしていると、レイヤーが増えてくるので、1つでもレイヤーが無くなって欲しいって思いませんか?
実はWebレイヤーはレイヤーごと非表示することが出来ます。以下のような感じ。
このWebレイヤーの表示非表示もFireworks Preferencesに設定されている隠れた機能の1つです。LayersList_ShowWebLayerという設定項目をtrueまたはfalseにして切り替えます。
Webレイヤーはスライスを格納するのに特化したレイヤーでスライス自体の表示非常時はメニューパレットでコントロールが出来ます。スライス名はプロパティーインスペクタで変更できるし、しかもスライス自体は別のレイヤーに持っていくことは出来ません。ってことはレイヤーパレットに表示されてなくてもいいじゃんというのが個人的な考えです。
]]> ということで、これをコマンドにして、さらに導入しやすいように拡張機能にしました。まあ頻繁に切り替えるものでもありませんが、カスタムショートカットを割り当てることでちょっぴり便利になるかもしれません。確かに長年の悩ましい事象なのですが、長年Fireworksをメインで使ってきた身としてはなんとかならないかなと思い、ちょっと検証してみました。
Fireworksでは線といいましても色々なアプローチで作成することが出来ます。今回試したのは以下の4パターン。
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の条件付きコメントはデフォルトでスニペットとしてあるんですが、それをコードヒントで出せるようになる機能拡張です。
スニペットの方がショートカットを設定しておけば、一発で入れられるので楽かもしれませんが、(少なくとも自分は)ショートカット全部に設定して覚えるのは厳しいかなと思ったので作ってみました。
まあ最近はスニペットもDreamweaverのものだけでなくて、他のエディタと共有できるユーティリティーアプリとして存在するものもあるし、ZenCodingのようなアプローチのコーディング方法もあります。自分としては制作者がコーディングする際にいろいろなアプローチが提供されるべきだと思っているし、すでにコードヒントの場合は、すでに機能として存在していながらデフォルトでは出せないわけで、それを出せるようにすることで、制作者の1選択肢となればよいなあと思っています。
]]> あと近いうちにIE専用のfilterとかを集めたCSSプロパティのコードヒントも出せたらいいなとか思ってます。乞うご期待。コードヒントネタがぼちぼち切れてきたので、こんなのが出せたらいいなというのがあれば、教えていただけると考えてみます。プログラム系はちょっと厳しいですが...。
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コードヒント機能拡張を公開します。是非使っていただき、不具合や要望などフィードバックいただければと思います。実はDreamweaver CS5のライブビューが秀逸な事が判明し、これとHTML5タグライブラリ機能拡張、CSSセレクタコードヒント機能拡張のセットで割と快適なコーディング環境になるのではないかと思います。
]]> とりあえずよく使いそうなプロパティを先行して登録して公開しました。まだ出ないプロパティもあります。ご了承下さい。Dreamweaver CS5の新機能である強化されたライブビューで外部サイトを表示可能になったので、素朴な疑問で、先日からネットで盛り上がっている「画像を一切使わずにCSS3だけでドラえもんを描いてみた!」を表示させてみました。
結果は以下。
Webkitエンジンを使っているはずですが、Safari、ChromeよりはFirefoxに結果が近いのは何でなんでしょう。画像では表示されてませんが、目玉のアニメーションもきちんと表現されてました。
デザインビューが使えないのはいけてないですが、ライブビューでここまでOKなら、まあ使えるというのが実感です。もうデザインビューはやめて、編集可能なライブビューにして欲しいところ。
CSS3コードヒントを早くリリースしなきゃ。
]]>告知した通り、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には是非搭載されることを望みます。
]]>会場でも挙手していただきましたが、タグライブラリ使っている人って意外と少ないんですね。ちょっとした手間をかけるだけで効率の上がる1手段だと思いますので、是非使ってみて欲しいと思います。
話は変わって、前回リリースして半年以上たちましたが、上記イベントのセッション内で告知した通り、HTML5タグライブラリー機能拡張をアップデートしました。Working Draftの最新版の情報を盛り込んだつもりです。
]]> 【更新内容】機能の詳細は別記事「HTML5で新規追加されたタグをDreamweaverのタグライブラリーに登録してみた」を参考にしてください。
ダウンロードのリンク先が間違っておりました。修正しました。4/23 2:32
]]>その際にAdobeの中の人ともお会いします。リアルに会える願っても無いチャンスなので、自分なりのDreamweaverに求めるものを伝えたいと思っています。
せっかくの機会だし、自分だけのアイデアだと狭いものになりそうなので、日本のDreamweaverユーザーが、何をもとめている広く募集してみることにしてみます。もうちょっと早く告知すればよかったのですが、申し訳ありません。
まあぶっちゃけ、Adobeのサイトにも「製品への要望 / 不具合報告フォーム」なるものが存在しますので、みんなどんどん要望(クレームじゃ無いよ(笑))を出せばよいのですが、ほとんどの日本のユーザーは不満を持ちつつも、声を出す人は少ないのではないかと思います。そもそもこんなフォームがある事自体も知らない方は多いのではないでしょうか。
抽象的なアイデアだと実現されにくいです。現実的なかつ、より具体的なアイデアを出していただければと思います。価格や旧バージョンサポートとか、そんな愚なことはNGです。あなたがこの機能が実装されたら絶対にバージョンアップするというものを求めます。実現される保証は全くありませんが、確実にAbobeの中の人に届けたいと思います。多分このブログも見ていただけていると(勝手に)思ってますが...。
コメントに記載していただくのがベターかなと思いますが、ご自身のブログからトラックバックでも結構です。是非すばらしいアイデアをお待ちしています。
と募集するだけだと何なので、今自分が持っているアイデアを書いてみます(自分で行っておいて抽象的な内容もあります...(笑))。とりあえず今はこれだけきちんと実装されたらバージョンアップ料金が5万でもするなあ(たった5万かよ!)。ってかこれだけ実現されたら、自分的には当分は特別な機能は必要ないくらいです(それじゃあアドビさん困りますよね)。
]]> ◯テンプレート・ライブラリ関連Dreamweaverテンプレートみたいなものです。ライブラリを入れ子にして部分的に変更出来たりするようなものが出来れば嬉しいかなと。
Dreamweaverテンプレートの肝はテンプレート式を併用したオプション領域による強力な振り分け可能な機能なのですが、現状のダイアログを使った設定方法ではそこまで踏み込んだ設定が出来ません。テンプレート式はリソースも少なく(マニュアル本自体のテンプレートの説明自体が貧弱)、コードで直接書かないといけません。ここは現状のGUIをブラッシュアップして踏み込んだ設定ができるようになって欲しいと思います。
リピート領域もリピートタグなるものが存在します。こちらもGUIで踏み込んだ設定ができるようになって欲しいです。
そもそもDreamweaverテンプレートの機能自体MX以降、全く進化していません。前にも書いている通り、これは大きな問題だと思います。
ほとんどの場合、社内ルールでローカルサイト内のフォルダの置き場所や初期の時点で絶対に使用するJavascriptや画像などをまとめたテンプレートを持っていて、現状ではローカルフォルダ設定時に、その中にまとめてぶち込んでいると思います。
特定のフォルダにテンプレートデータを入れておけば、新規サイト設定を完了したら自動でテンプレートデータが設置されると便利になるかなと思います。
現状では制作時にIE専用の独自セレクターなどが、どうしても点在して後からまとめるのが大変だったりします。まあ設定時点でIE専用の外部CSSファイルに書けばよいのですが、面倒です。Dreamweaverの方でチェック・収集して外部ファイルにまとめ、振り分け用コメントも作成してくれるとありがたいです。
外部CSS書き出しは、既存のCSSファイルにも書き込み可能になれば、尚便利かなあと。
納品時は出来るだけクリーンなデータで納品したいですが、制作途中でどうしても使われなくなったCSSセレクターとかが残ってしまいます。
サイト内チェックをして使われていないセレクタをピックアップして削除できたら嬉しかったりしませんか。
最近はサイトの最適化のためにコードの圧縮がよくなされます。ローカルデータは編集効率が落ちるのでローカルでの圧縮をされると困りますが、リモートにアップする際に最適化をしてくれるとうれしかったりしませんか?
考えられる問題はサーバー上のデータを取り込んだ時ですが、現状の機能でコードフォーマットの機能があります。minifyされたものは自動的にコードフォーマットのルールに基づいて展開されたら支障はないのかなと思います。
クライアントの指定で必ずしも文字コードは一定ではありません。環境設定にも今のままの設定は残しつつ、サイト設定を行うときにベース文字コードの設定が変更可能で新規ドキュメントを作成すると、その設定した文字コードでドキュメントが出来たら嬉しいかなと。
現在、a:hover、a:link、a:visited、a:activeしか対応していません。
新規CSSルールダイアログで選択項目とかをつけて対応可能にして欲しいと思います。こんな感じ。
まあもう既に、自分が出している機能拡張で実現していますが、これはやはり正式サポートして欲しいと思っています。コメントタグがコードヒントで出せれば、Dreamweaverテンプレートタグやライブラリタグもコードヒントで出せると思っています。ってかDreamweaverテンプレートタグもコードヒントで出せてますが...。
HTMLやMTタグのような場合はタグライブラリーで属性も含めて追加登録可能です。しかしながら、CSSやJavascriptのようなタグ以外のものは、現状では直接codehint.xmlなどの設定ファイルをいじらなければ、カスタマイズが実現出来ません。タグライブラリーエディタのようにダイアログ等で編集可能になって欲しいです。これが実現するとユーザーが強力にカスタマイズ可能になるのでコーディング環境としてのDreamweaverの魅力が増すのかなと思っています。
なお希望する編集可能な項目は以下、
これも自分が既に作ってますが、現在はさらにブラッシュアップして属性セレクタの時に使用しているクラスやID、属性とかもコードヒントで表示出来たらもっとよいと思います。
コードヒントだけでないデザインビューでの表示とかそういうもろもろ含めた正式対応。Dreamweaver CS5が先日ついにリリースされてどうやらCS5はHTML5、CSS3にはまともに対応していないようです。まだ勧告されていない現状はありますが、盛り上がっている昨今、誠に残念なことですね。
現場の人間が求めるのは、リアルタイムにレンダリングされるものが、いかに精度が高いものであるかが重要で、ライブビューでもBrowserLabでもないと自分は考えます。1つボタンクリックしたり、アクセスを待つくらいならプレビューで実際のブラウザで確認した方がましです。Acid2対応のデザインビューが実現されたら、何も迷うことはないと思うのは自分だけでしょうか。
もう少し頑張って欲しいですね。サクサク仕事がしたいです。
]]>コメントがコードヒントで出せるようになったので、多分出来ると思って作りました。
以前このブログに移行する前にDreamweaver覚え書きの方でDreamweverテンプレートタグをスニペットにまとめたものを公開していたのですが、個人的にはコードヒントで出せるようになるとほとんど必要が無くなります。
いやあ、自分でいうのもなんですが、早い段階でテンプレートタグするはGUIは使ってなく、コードビューでガシガシ書いている派だったので、もっと早くに作っておきたかった...。それくらい今回のは悔やまれるネタです。
]]>コードビューで直に書いているのは言うまでもなく、細かい指定ができるからです。リピート領域なんて単なく繰り返しじゃなくてリピート変数なんてのも使えますからね。GUIで使えるのは、テンプレート機能の半分程度なんじゃないかな。
ちょっとだけ宣伝になりますが、その辺りは以前共著で書かせていただいたDreamweaverプロフェッショナルスタイルで詳細に記述しています。
ってか非常に疑問なのが、テンプレートの機能ってDreamweraverMXから4回のメジャーバージョンアップをしてきましたが、何の変化もありません。
テンプレートだけでなく、ライブラリーなんかもそうなんですが、Dreamweaverを使う強力な理由の1つだと思うのです。もっとブラッシュアップしてもいいんじゃないかなあって前から思っているんですが、自分だけでしょうか?
最近はCMSが台頭してきていますが、MovableTypeやa-blog cmsなど外部で雛形を持てるようなタイプだと共通UI部分とかは、十分に併用して構築が出来ます。
と少し愚痴っぽくなってしまいましたが、本題に戻すと機能等は以下。
CSSセレクターのコードヒント&スニペットをたくさんDLいただきありがとうございます。作った甲斐があります。
Twitter見てたらフォローしているbotから習作のCSSセレクタコードヒントの使用レポートを書いてくれている方を見つけたので拝読。
早速ミスが判明したので修正版をアップしました。報告ありがとうございます。
]]> 【修正内容】