現在位置
  1. ホーム
  2. ドリ カテゴリーの記事一覧

ドリ カテゴリーの記事一覧

Zen-Codingを入れてみて、もうちょい自分好みにしたい

こもりまさあきさんのエントリー「TextMate+Zen-Codingで超速コーディング？」を発端にして、ブログやTwitterでZen-Codingに関する話題が熱くなっています。

こもりさんのエントリーではTextMateにZen-Codingを追加していますが、僕は持っていないのでDreamweaverに入れて使ってみました。

Dreamweaverへのインストール方法

zen codingは超便利！Dreamweaverで使ってみました。 | VIVID COLORS + BLOGを参考にインストールしましたので、ご参照ください。

これできないのかー、ということでちょっとカスタマイズ

こもりさんのエントリーを参考にいろいろと書いてみました。Dreamweaverのコードビューを良く使う自分にはたしかにめっちゃ便利ですね。ただインストールした段階ですとちょっと足りないなと思うこともあります。

table要素を記述している際に、th要素にscope属性を簡単に書ける方法ないのかなーと思ったのですが、デフォルトではないような、ないですよね？まちがってたらご指摘ください！で、ないなーと判断したので、例えばth:sなんかってうつと<th scope=""></th>って入ったら素敵じゃね？と思ったわけです。さらにいえば、th:scで<th scope="col"></th>、th:srで<th scope="row"></th>も入れて置いた方が便利でしょう。

カスタマイズ方法

僕のMacの場合ですと、「ユーザー名/ライブラリ/Application Support/Adobe/Dreamweaver9/Configuration/Commands/ZenCoding」内にある「zen_settings.js」をいじります。560行目付近から、個々の要素を記述するための指定がされていますので、どこか良い感じのところに以下を追加しておきました。

’th:s’: ’<th scope=""></th>’,
’th:sc’: ’<th scope="col"></th>’,
’th:sr’: ’<th scope="row"></th>’,

これで希望した記述が可能になります。

もっとカスタマイズしたいのですが、方法がわかりません。どなたか教えてください！

もっとカスタマイズしたら、個人的には便利になるなーと思ったのですが、方法がわからずに断念したのが以下2点です。どなたかわかる方いらっしゃいましたら教えていただければ嬉しいです！ビール1杯くらいならおごります！

  • #hogeや、.hogeなどの利用して要素を記述した場合に、閉じタグの前に<! --#ID名.class名-- >というように（ID/class両方が指定された場合は両方が、片方の場合は片方の）コメントが入るようにしたい。
  • タグの入れ子構造でインデントがかかるようになっているけど、インデントはなしにしたい。まぁ、Dreamweaverを使っているのであれば、全選択してからのShift+tabで一気にインデントを消せますが、最初から無いにこしたことはないということで。

特に1つ目、できたらめちゃめちゃ便利だと思うんですよねー。

「第9回 Sugamo.css」と、Dreamweaver CS3 CodeHints.xml拡張

第9回 Sugamo.cssに参加してきました。
もともとゆるい感じでマークアップ界隈のお話をしている会だとはお聞きしておりまして、実際にもそういう感じだったのですが、line-heightに関する話が始まったとたん場の空気がイッペン、最終的にtexi-align: justify;まで話がおよびまして、それだけで計90分くらいは議論されていました。

例えば、Safariでは、全角のみの行にはtexi-align: justify;が効かないということが分かったのですが、全角スペースがあればOKくらいまでは分かるものの、「＆＃x２０；（※）はどうなの？」みたいな会話がポンポンされておりまして、そんな番号まで覚えているのかー！？と、ちょっと驚きでした。

ちなみに僕としましては＆nbsp；（※）のくだりで、以前bAさんのどなたかにお聞きしたことが記憶にありまして、＆nbsp；（※）のことを「ノブサップ」と言いましたら、結構皆さんにも好評を得たようで良かったです。

さてその会にて、何名かの方に「Dreamweaver CS3のCodeHints.xmlを拡張しているんですよー」ということを相談しまして、そこで出た案なんかも一緒に盛り込んで変更したものが出来ましたので公開いたします。

CodeHints.xml.zip（拡張版：53kb）

具体的には、普段僕がほとんど利用することのないプロパティを消して、新たに以下のプロパティなどを追加しています。他にもこんなのも欲しいなーなどありましたら、コメントやメールにてドシドシご要望をいただければ幸いです。

追加したプロパティなど
  • border-radius
  • -moz-border-radius
  • -webkit-border-radius
  • box-shadow
  • -moz-box-shadow
  • -webkit-box-shadow
  • filter
  • opacity
  • text-shadow
  • word-break
  • zoom
消したプロパティ
  • azimuth
  • background-attachment
  • border-bottom-color
  • border-bottom-style
  • border-bottom-width
  • border-left-color
  • border-left-style
  • border-left-width
  • border-right-color
  • border-right-style
  • border-right-width
  • border-style
  • border-top-color
  • border-top-style
  • border-top-width
  • border-width
  • counter-increment
  • counter-reset
  • cue
  • cue-after
  • cue-before
  • direction
  • elevation
  • font
  • font-size-adjust
  • font-stretch
  • font-variant
  • list-style-image
  • list-style-position
  • list-style-type
  • marker-offset
  • marks
  • orphans
  • outline-color
  • outline-style
  • outline-width
  • page
  • page-break-after
  • page-break-before
  • page-break-inside
  • pause
  • pause-after
  • pause-before
  • pitch
  • pitch-range
  • play-during
  • quotes
  • richness
  • size
  • speak
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • stress
  • unicode-bidi
  • voice-family
  • volume
  • widows

Dreamweaverの動作に影響のあるファイルですので、ご利用になる場合は自己責任でお願いいたします。また、ご利用方法の詳細は以下のページなどもご参照いただければすんなり行くと思います。

※：実体参照のコードを出力するために、一部全角で記述しています。

WCAN x CSS Nite 2009 SPRINGに出演します

2009年04月18日(土)に行われる、WCAN x CSS Nite 2009 SPRINGに出演します。

WCAN x CSS Nite 2009 SPRING

内容は、2009年2月19日に開催したCSS Nite in Ginza, Vol.31の『CSSレイアウト：IE 6対応のかんどころ』の再演です。2月19日は、若干言葉足らずで伝えきれなかった部分もありましたので、その辺を補おうと思っています。

僕以外にも、「ブランディング」「コーディングワークフロー」「CSS3／jQuery」と、幅広広い内容となっています。ご興味ある方は是非ご参加ください！

Dreamweaverによる文字コードの変更

今まで、DreamweaverではHTMLファイル等の文字コードを変更することが出来ないと思っていたのですが、実は出来るのですね。ということで、以下やり方です。

  1. メニューの「修正」から「ページプロパティ」を選択（もしくは[Ctrl+J]）
    Dreamweaverによる文字コードの変更01
  2. 「ページプロパティ」にて、「タイトル/エンコーディング」を選択
    Dreamweaverによる文字コードの変更02
  3. 「エンコード」部分のプルダウンメニューから変更したい文字コードを選択
    Dreamweaverによる文字コードの変更03
  4. 最後に「OKボタン」をクリック
    Dreamweaverによる文字コードの変更04

と、これだけで出来ました。

今まで、「ドリで文字コード変更って出来ましたっけ？」のような会話では出来ないという結論に達していたのですが、出来るようですね。サイト全体で出来るようですとさらに便利なのですが、パっと見た感じだと、そこまでは出来ないようです。

「それ、ちょっと間違ってるよー」とか「こうした方が良いよー」とかありましたら是非とも教えてくださいませ＜（＿ ＿）＞

※これで完全に出来るのか？という保証はありませんので、この操作によってHTMLが壊れてしまったじゃないかー！という状況になったとしても責任は負いかねますのでご容赦くださいませ。

Dreamweaver CS4 ベータ版をほんのちょこっとさわりました

つい何時間か前に、さまざまなブログでCS4 ベータが出ましたーと言っていたので、ちょこっとだけ触ってみました。CSSを書くことがだいぶ好きな人の感想です。今回のバージョンアップで変更した大きな目玉機能に関しましては、「Adobe – デベロッパーセンターの記事」が詳しく解説していますので、そちらをご覧ください。

いろいろ選べる画面レイアウト
なんという名前の機能なのか分かりませんが、レイアウトをいろいろ選べます。ドリの新機能01上図のように、ドリの画面右上に、デフォルトは「DESIGNER」となっている部分から選択可能です。僕としては、画面のスッキリさから「CODER PLUS」が気に入りました。ちなみに以下が「DESIGNER」と「CODER PLUS」の比較です。

DESIGNERと、CODER PLUS

「CSS STYLES」でCSS管理が楽に
もともと「Aptana」なんかには、CSSファイルを開くとセレクタがダダダーっと表示されて、それをクリックすることで、ファイル内の該当箇所にジャンプ出来ていましたが、同じ機能がドリにも「CSS STYLES」という名前で実装されています。
CSS STYLES

他にも「Adobe – デベロッパーセンターの記事」を見ると、サブバージョンとの連携とかはだいぶニュースですね。

また、「Code Navigator」というデザイン・ビューから、CSSがどのように使われているかを迅速に見つけ出す機能を強調していますが、これってMSの「Expression Web」のハイパーリンクみたいな感じでの実装の方が、直感的で使いやすいような気がするなーと思ったり。

他にもCSS書き的にこれ良いじゃんとか、これはないよねーみたいなものがありましたら教えてくださいませー＜（＿ ＿）＞

Dreamweaver CS4 ベータに関するその他のエントリー

やっぱりXMLか。

先ほど、ドリの検索を行った後に、その結果をXMLファイルとして出力出来ることに気が付きました。

【キャプチャー画像】ドリで検索を行った後にXMLファイルを出力するアイコンの説明

ちょうど、出力結果を他の方にもご覧になっていただきたかったため、XSLTとCSSを使って、見やすいようにしてみた次第です。
同じような検索をした場合であれば、同じようなXMLファイルが出力されるはずですので、今後も同じような需要があればとても便利な訳です。

そんなことをしたのですが、ふと「やっぱりXMLってすごいよね」と思った訳です。
ドリなどのアプリもXMLで作られている訳ですし、いやアプリ開発とかまではいかなくとも、僕はマークアップを主要業務とする人な訳ですから、(X)HTMLがどうのこうのと言う前に、XMLを理解してしまえば、何かと強みになるような気がします。

ウェブデザイン（というかWebサイト制作）という局面からXMLを考えてみてもたくさんメリットがありますが、ここでは二つを紹介しておきましょう。

  1. まず一つ目メタデータなどの(X)HTML回りの技術を理解しやすくなるということです。普段メタデータというと、RDFとかRSSとかFOAFなどのキーワードで語られる事が多いアレのことで、ざっくりと言ってしまえば、そのデータがどんなデータなのか？というのを簡単に説明しているものとなります。昨今（というかちょっと前の）ブログブームの際に、RSSが世に認められることとなり、一気に普及したと言えるでしょう。
    では、このRSSのことを勉強しよう！とGoogleなどで調べてみると、なんかRSSはXMLらしいということまでは簡単に分かるのですが、XML自体を全く理解していないと非常に多くのクエスチョンマークが頭にともります。
    W3Cによって、現在制定が進んでいるXHTML2.0やHTML5は、広義の意味ではどちらもXMLとなります。それを考えると、今後登場してくるあらゆる技術やサービスもXML形式となることが予想されますので、XMLを理解しておくことは強みとなる訳です。
  2. 続いて二つ目は、品質チェックとしてのXMLです。(X)HTMLのバリデーターとしてはW3Cが提供する「The W3C Markup Validation Service」などが有名ですが、(X)HTMLの仕様自体がとても曖昧なものですから（例えば、通常の文章もリード文も同じ p 要素など）、納品物の品質チェックという点では別途人間の目による作業が発生してしまいます。
    その点、XMLでは、XML Schemaという仕様が用意されています。SGMLの時代には、DTDという規則が定義されていて、(X)HTMLを記述する際には、DOCTYPE宣言で利用するDTDを宣言していました。XMLでも同じようにXML Schemaを利用することで、約束事を決定できます。XML Schemaでは、DTDでは実現出来なかった、データ型の厳密な定義（数値なのか、文字列なのかなど）や名前空間の利用が出来るようになっており、より厳格なルールを設定することが出来るという訳です。
    実際に行おうとするととても大変な事にはなるでしょうが、XHTMLとXML Schemaを利用することで、一つのWebサイト毎で個別のルールを設定することが出来るようになる訳です（例えば、class=”number”というクラス属性が設定されている要素は数値しか持つことが出来ないなど）。近い将来、各種ツールが発展していけば、オリジナルXML Schemaを介してのバリデートなんかも普通のことになって行くかもしれませんね。

そんなこんなで「XMLマスター」について調べてみると、「XMLマスター：ベーシック」というのが、どうも僕が考えていたような知識を持っている人の資格に思います。
よし、これを取得しようと思うのですが、XMLマスター：ベーシックの試験内容を見ましたら、結構凄いですね。これ。

うーむ。
でも凄い必要な気がして来た！！

カテゴリー

その他

  • Valid XHTML
  • ログイン