またまたのご無沙汰申し訳ありません。
今まで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つくらい、さらには値も指定してやる必要があります。
ということで多少の入力補助になるかもと思って、接頭辞付きもまとめて挿入するコードヒント拡張機能を作ってみました。
久々の投稿です。なんとなく思い立って久々にFireworksのコマンドを作成しました。
CS3から搭載されたページ機能ですが、ページ間を移動するショートカットを知らないので勝手にないんだろうと思って作成しました。
APIを使って簡単にできるだろうと思っていたのですが、Fireworks CS5のExtending Fireworks CS5のAPIを探していると現在のアクティブページを取得するAPIがない。orz 適当にググッていると、Yoropan blogなるサイトでfw.getDocumentDOM().currentPageNumなんていう本家のリファレンスに記載のないAPIを使っているサイトを発見。ドンピシャで取得できました。
という訳でできたコマンドです。
CSS Nite in Omotesando, Vol.2で関口さんがFireworksの隠し機能について話をされていたので、自分も1つネタを書いてみます(といってもネタ的には以前の個人サイトに既に答えがありますが...)。
色々とページデザインをしていると、レイヤーが増えてくるので、1つでもレイヤーが無くなって欲しいって思いませんか？
実はWebレイヤーはレイヤーごと非表示することが出来ます。以下のような感じ。
このWebレイヤーの表示非表示もFireworks Preferencesに設定されている隠れた機能の1つです。LayersList_ShowWebLayerという設定項目をtrueまたはfalseにして切り替えます。
Webレイヤーはスライスを格納するのに特化したレイヤーでスライス自体の表示非常時はメニューパレットでコントロールが出来ます。スライス名はプロパティーインスペクタで変更できるし、しかもスライス自体は別のレイヤーに持っていくことは出来ません。ってことはレイヤーパレットに表示されてなくてもいいじゃんというのが個人的な考えです。
表参道 The Gallery「station 5」で開催された、CSS Nite in Omotesando, Vol.2 のとみた嬢のセッション(Ustreamのアーカイブ参照)で、Fireworksの角R(角丸)の太りの指摘されていました。
確かに長年の悩ましい事象なのですが、長年Fireworksをメインで使ってきた身としてはなんとかならないかなと思い、ちょっと検証してみました。
Fireworksでは線といいましても色々なアプローチで作成することが出来ます。今回試したのは以下の4パターン。
1pxの線と3pxの線でを本来なら素直に線で作るだろうと思われますが、エフェクトを使っても作成出来ます。
IEのコンディショナルコメント(条件付きコメント)をコードヒントで出せる機能拡張を作りました。
コーディングしながら、そういえば無かったなあと思って作りました。IEの条件付きコメントはデフォルトでスニペットとしてあるんですが、それをコードヒントで出せるようになる機能拡張です。
スニペットの方がショートカットを設定しておけば、一発で入れられるので楽かもしれませんが、（少なくとも自分は）ショートカット全部に設定して覚えるのは厳しいかなと思ったので作ってみました。
まあ最近はスニペットもDreamweaverのものだけでなくて、他のエディタと共有できるユーティリティーアプリとして存在するものもあるし、ZenCodingのようなアプローチのコーディング方法もあります。自分としては制作者がコーディングする際にいろいろなアプローチが提供されるべきだと思っているし、すでにコードヒントの場合は、すでに機能として存在していながらデフォルトでは出せないわけで、それを出せるようにすることで、制作者の1選択肢となればよいなあと思っています。
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
参加される皆さんには、当日お会いできますことを楽しみにしております。イベント終了後の懇親会も含め、東京の方々のモチベーションを吸収しようと思います(笑)。よろしくお願いします。
CSS Nite in OSAKA Vol.20に参加された皆様、長丁場のイベントでしたが、ご来場誠にありがとうございました。アンケートも拝見しましたが、絶対を通して概ね満足していただけたようで、スピーカーかつ実行委員としてうれしい限りです。イベントの内容に関しましては改めてネタにしようと思います。
さて本題ですが、自分のセッションで紹介したCSS3コードヒント機能拡張を公開します。是非使っていただき、不具合や要望などフィードバックいただければと思います。実はDreamweaver CS5のライブビューが秀逸な事が判明し、これとHTML5タグライブラリ機能拡張、CSSセレクタコードヒント機能拡張のセットで割と快適なコーディング環境になるのではないかと思います。
来週のCSS Nite in OSAKAに向けて絶賛資料作成中ですが、現実逃避でUSでトライアルがリリースされたDreamweaver CS5をインストールしていじってます。
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分でも、録音して自分の音声を聴くだけでも全然違う」とアドバイスいただきましたので、練習の時に取り入れていきたいと思います。
Dreamweaver Town Meeting in KyotoのセッションでHTML5タグライブラリ機能拡張を含めたタグライブラリネタで話しました。おこし頂いた方、誠にありがとうございます。久しぶりに話すと予想通りカミカミになってしまいました。
会場でも挙手していただきましたが、タグライブラリ使っている人って意外と少ないんですね。ちょっとした手間をかけるだけで効率の上がる1手段だと思いますので、是非使ってみて欲しいと思います。
話は変わって、前回リリースして半年以上たちましたが、上記イベントのセッション内で告知した通り、HTML5タグライブラリー機能拡張をアップデートしました。Working Draftの最新版の情報を盛り込んだつもりです。
重ねての宣伝になりますが、4/21(水)に京都で開催されるDreamweaver Town Meeting in Kyotoにスピーカーとして出演します。久々に人前に立ちますので今からドキドキしています。参加される方、よろしくお願いします。
その際にAdobeの中の人ともお会いします。リアルに会える願っても無いチャンスなので、自分なりのDreamweaverに求めるものを伝えたいと思っています。
せっかくの機会だし、自分だけのアイデアだと狭いものになりそうなので、日本のDreamweaverユーザーが、何をもとめている広く募集してみることにしてみます。もうちょっと早く告知すればよかったのですが、申し訳ありません。
まあぶっちゃけ、Adobeのサイトにも「製品への要望 / 不具合報告フォーム」なるものが存在しますので、みんなどんどん要望（クレームじゃ無いよ(笑)）を出せばよいのですが、ほとんどの日本のユーザーは不満を持ちつつも、声を出す人は少ないのではないかと思います。そもそもこんなフォームがある事自体も知らない方は多いのではないでしょうか。
抽象的なアイデアだと実現されにくいです。現実的なかつ、より具体的なアイデアを出していただければと思います。価格や旧バージョンサポートとか、そんな愚なことはNGです。あなたがこの機能が実装されたら絶対にバージョンアップするというものを求めます。実現される保証は全くありませんが、確実にAbobeの中の人に届けたいと思います。多分このブログも見ていただけていると（勝手に）思ってますが...。
コメントに記載していただくのがベターかなと思いますが、ご自身のブログからトラックバックでも結構です。是非すばらしいアイデアをお待ちしています。
と募集するだけだと何なので、今自分が持っているアイデアを書いてみます（自分で行っておいて抽象的な内容もあります...(笑)）。とりあえず今はこれだけきちんと実装されたらバージョンアップ料金が5万でもするなあ（たった5万かよ！）。ってかこれだけ実現されたら、自分的には当分は特別な機能は必要ないくらいです（それじゃあアドビさん困りますよね）。
コードヒントばっかりですみません(笑)。それくらいコードヒントには突っ込みどころ満載だと思って下さい。
コメントがコードヒントで出せるようになったので、多分出来ると思って作りました。
以前このブログに移行する前に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にパッケージしました。
制作会社さんとかだとローカルで作成しているかもしれませんね。
コードヒントで実装できないにしても、これくらいはデフォルトで実装して欲しいなあ。
4月21日(水)にCSS Nite in KYOTO, Vol.2としてDreamweaver Town Meeting in Kyotoが開催されます。
まだスピーカーや内容は確定していない部分は調整中が多いですが、AdobeのUSの方が来られて、次期DreamweaverのSneak Previewが見られるとのこと。スピーカーもかなり強力なメンツと思われます。
そのイベントに今回はスピーカーとして参加することになりました！ 久々に人の前で話しますので少しドキドキしていますが、頑張りたいと思います。
お題は今ホットで草案が公開されたHTML5のコーディング環境をDreamweaverで構築することをメインで解説していく予定です。すでに公開しているHTML5タグライブラリ機能拡張の話やHTML5に限らず、これからも次世代タグとかを導入する際に役に立つであろう、タグライブラリのカスタマイズのお話を中心にさせていただきます。
平日ど真ん中で仕事が忙しいと思いますが、是非お越しいただければと思います。
最近のコメント