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に限らず、これからも次世代タグとかを導入する際に役に立つであろう、タグライブラリのカスタマイズのお話を中心にさせていただきます。
平日ど真ん中で仕事が忙しいと思いますが、是非お越しいただければと思います。
事前に提示された4つのミッションに今回取り上げた4つのCMS（Movable Type、WordPress、SOY CMS、a-blog cms）がどのようなアプローチで解決して行くかというテーマ。
スタッフとしてスピーカーの前でマイク持ちやってましたのでプレゼンはばっちり見えました。w
基本MTでやってきた自分ですが、WordPressは何度か使ったことがあるので、今回はSOY CMS、a-blog cmsに大変興味を持っておりました。
とあるサイトでサイト内検索をGoogleカスタム検索で実装しました。ドメイン内で表示したいのでiframe、無料バージョンなので広告を上下に表示で実装しました。
ところがSafariで見るとたいてい何故か下が切れて表示されます。IEやFirefoxだと大丈夫っぽいんですけど...。
いくつかのサイトをググッてもそんなネタないしなあ...。でもiframeの高さの取得がどうもSafariだけ違うようです。広告を上下に表示しているのが原因かもしれません。右側に広告表示すれば大丈夫なのかもしれませんが、今回はコンテンツの幅が狭いのでどうしようもありません。orz
ログ見る限り、Safariのシェアは少ないので無視出来るレベルなので、無視してしまうか、高さ決め打ちで実装してしまうか悩むところです...。後者だと検索結果によっては下の空白が大きくなってしまうのが見苦しい限りなのですが...
自分の知識不足なところが露呈されてしまうのですが(笑)、同様に困っている人がいるかもしれないので記事にしておきます。
自分は今までFireworksやDreamweaverの機能拡張パッケージ(mxp)を作成する際は、Adobeが配布しているパッケージ作成用のPDFマニュアルを参考にしておりました。
そのマニュアルではUTF-8で記述するように書かれているのですが、Extension Managerで表示される名称や解説を日本語にしようとすると文字化けしてしまうため、昔の仕様であったShift-JISにして書き出しておりました。
仕様通りにUTF-8で記述したいのでどうしたものかと思っておりましたが、先日とあるタイミングでAdobeの中の人から以下の回答をいただきました。
ってかマニュアルに書いてないし(笑)。
基本テキストエディタとかでmxiを書いていたら大丈夫なのかもしれませんが、自分はDreamweaverで記述していたため、UTF-8の書き出しの際にBOMのところは、今までチェックしていたことがなかったのが原因の可能性が高いです(笑)。
試したところどちらか一方を満たしていればOKなようですが、念のためこの2つには注意してmxiを作成しましょう。
2年程、サイト制作の現場から離れていたのですが、知り合いのお手伝いで地元企業のサイト構築のお手伝いをさせていただきました。
サイト構築にはMT5を使用したのですが、以前からMultiBlogで各階層をブログに分けて構築するスタイルの自分にとっては非常に使い易くなったかなと思います。
パシャログさんのサイトで「MovableTypeで企業サイトを構築する際に、つかえるプラグインまとめ その2」なる記事があったので、自分も構築したMT5で使ったプラグインについてまとめてみました。
もともとMovableTypeを初めて知った時(MT2の終わりかMT3)からブログ構築ではなく、CMSとして捉えていた自分にとっては無くてはならないプラグイン。MT4になって標準搭載されて本当にありがたい限りです。今のMTだとmt:Blogタグ、mt:OtherBlogタグとか他のブログIDの記事を引っ張ってくる機能がありますが、自分はもっぱらmt:Multiblogタグ一本です。ってかどう違うか解っていないのもありますが...。Multiblogだと更新をトリガーにして他のブログを再構築出来るので便利かなと。
http://tec.toi-planning.net/mt/customdefaultfields/
ブログ記事やウェブページを作成する際にデフォルトでついている「本文」「続き」「概要」などの名称を自由に変更可能にするプラグインです。RenameLabelの方がメジャーかもしれませんが、入力フィールドを隠すこともできるのでこっちの方が優秀。MT3の頃はカスタムフィールドの作成にRightFieldsを使っていて、既存のフィールド名も変更出来たので重宝していましたがMT4になって標準実装されたカスタムフィールドには、これがついていなかったので、本当に不便で仕方がありませんでした。個人的にMultiBlogとならんで必携プラグインの1つです。
http://mt.vicuna.jp/
標準のテンプレートコードがあまりにもいけていないので、とりあえずこれを突っ込んでからリデザインしました。個人的にはXHTML 1.0 StrictよりTransitionalを激しく希望します。w
http://www.magicvox.net/archive/2006/05201647/
上記のオリジナル版はMT5では動かないようで、一部改造した下記フォーラムで紹介されている修正版を使用しました。
http://vicuna.jp/forum/viewtopic.php?p=4186
Google Sitemapsへの更新通知を自動化するプラグインです。
http://tec.toi-planning.net/mt/quickrebuild/
MT5だとヘッダにある「再構築」の文字がずれてしまいますが、機能的には問題なく使えます。メニューの再構築ボタンを押すと自動で再構築が始まるのがとても快適でした。開発途中の頻繁な再構築にはとても便利なプラグインだと思います。
http://junnama.alfasado.net/online/2009/11/mt5_1.html
ユーザーダッシュボードに左メニューを表示させてくれます。なんで標準では表示しないのかが激しく疑問。同時にログインの時間によって「こんばんわ〜さん」とかになったり(これは一緒に入っているHello.plの機能かな?)、固定の右カラムを非表示に出来たりする。右カラム非表示は消しても再度表示のためのメニューが残るので、中央カラムを幅広にできると思ったけど無理。
http://www.koikikukan.com/archives/2008/01/10-010101.php
フィールドに予め特定の初期値を入れておくことが出来ます。途中で諸事情で最終的には使わなかったのですが便利なので紹介。
ただ初期値を入れると当然ですが、値が入ってしまうので、mt:IfNonZeroタグやmt:IfNonEmptyタグとか使えなくなるので注意。
普通ならカテゴリーの順番変更とかも必要ですが、今回はたまたま不要でした。まだMT5が出たばかりなので、これからまだまだ便利なプラグインが出てくると思われます。個人的にはMT5で実装されたカテゴリー編集画面のカスタムフィールドでフィールド順が変更できないのは、本当にいけていないので早く変更可能にできるプラグインが出てくることを待ってます（他力本願モード）。w
最近のコメント