自作機能拡張の最近のブログ記事

SOYCMS2コードヒント拡張機能のスクリーンショット

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

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

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

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

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

久々の投稿です。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つくらい、さらには値も指定してやる必要があります。

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

「+」付きを選択すると、接頭辞付きプロパティーを同時に挿入します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今までずっとDreamweaverで疑問だったのが、コードを書くときに何でコメントがコードヒントで出せないのかでした。

素朴な疑問を感じながら何気にいじっていたら、出来てしまったので公開。ってか属性セレクタといい、MacromediaというかAdobeさん怠慢なんじゃないかと思う今日この頃。登載しないということはどこかで支障が出るということなんでしょうか。

まあどこかで支障が出ても、書ける方が絶対いいと思うので作ってみました。

今CSS3のコードヒントを出せるよう試行錯誤しています。その過程の産物で念願のCSSセレクタのコードヒント化が出来ましたので勢いで作りました。

ヒントとなったのはdreamseekerさんが作成された[ 改訂版 ] Dreamweaver CS3版 スペシャルコードヒント。ほんと感謝です。

個人的にはかなりいい感じでできたと思っています。自分のやつも含め、今までは不要な属性を殺していたのでmxpにパッケージング出来なかったのですが、今回は簡単に導入できるよう機能拡張として配布します。

最近使用したスニペットの画面ショットスニペット使いの方なら、きっとキーボードショートカットを利用している場合が多いでしょうけど、挿入メニュー > 最近使用したスニペットとかコードビューの左端の" 最近使用したスニペット"アイコンからスニペットを挿入する人も多いかと思います。

デフォルトの設定だと10件が最大なのですが、実は増やすことが出来ます。ぶっちゃけ、環境設定で項目が欲しいところです。

厳密にはConfigurationフォルダに入っているRecentSnippets.xmlの値を変えるだけ(<recentSnippets max="10">の値を10→任意の値に変更するだけ)なのですが、説明が面倒なので機能拡張にしました(笑)。

CSS2以降で出てきたセレクターをスニペットにまとめました。本当はコードヒントで出せるようにしたいところですがCSSセレクタコードヒント完成しました!)、Adobeさんがなかなか対応してくれないのと、(自分の)技術的になかなかできませんので、とりあえずスニペットをまとめてmxpにパッケージしました。

制作会社さんとかだとローカルで作成しているかもしれませんね。

コードヒントで実装できないにしても、これくらいはデフォルトで実装して欲しいなあ。

またまた久々の更新です(笑)。

先日MovableType5がリリースされました。自分もとある案件で使用しているのですが、Webサイトをサイト単位で管理できるようになったのが使い易いかなあと思ってます。

自分はMovableTypeのテンプレートをDreamweaverで作成しているのですが、Adobeからリリースされている機能拡張はMT4用で、しかもマイナーチェンジで導入された以降の新規タグはサポートしていないので足りない項目があってとても不便。

また、ファンクションタグに$が入っていない(自分のローカルルールなのですが...)のでブロックタグとファンクションタグの区別がわからづらいなど、導入をしていてもストレスがたまる部分が多々あります。

いずれはAdobe(あるいはSixApart)からオフィシャルなものがリリースされると思うのですが、経験上、まだまだ先だろうということで、自分のコーディング作業効率を向上のためにタグライブラリーを導入する機能拡張(以下mxp)を作ってみました。

しばらくぶりの更新です。w

なんか最近HTML5が熱いのですが、Dreamweaver CS4では実装されていません(まあ次バージョンでは確実に来るでしょうけど)。

せめてコードビューでCodeHintくらいは...と思い、思い立ったようにタグライブラリーに登録してmxpにパッケージ化してみました。