html/css のアーカイブ

Fireworksのスクリプトの実行、今日めんどいなあと思う作業があって調べてみたんですけど、便利すぎて衝撃的でした。今までどうして知らなかったんだろうという感じです。以下サイトでいくつか紹介されていますが、スライスに連番＋一括名前設定は効率的すぎてやばいです。さっそく使わさせてもらっています。

■オリジナルツール / Fireworks用オリジナルコマンド(jsf)一覧 (PIXEL LAB)
http://www.pixelimage.jp/blog/2008/02/_fireworks.html

で、上記サイトを参考に僕もFireworksでスライス名を一括置換するスクリプトを書いてみました。以下スクリプトを拡張子「jsf」で保存、対象のスライスを選択して「コマンド」→「スクリプトの実行」→保存したスクリプトを読み込んでご利用いただけます。「C:\Documents and Settings\～ユーザー名～\Application Data\Adobe\Fireworks CS3\Commands」に入れれば「コマンド」メニューに加わります。スライスを流用するのだけどそのままの名前では使えないときや、ガイドラインでハイフンは使用禁止でアンダースコアにしなきゃいけなくなったとか、なんにせよスライス名を置換したいシチュエーションってけっこうあるので覚え書きしておきます。

var dom = fw.getDocumentDOM()
var le = fw.selection.length;
var sliceArray = new Array();

for (var i=0;i<le;i++){if(fw.selection[i] =="[object SliceHotspot]")sliceArray.push(i);}
var leng = sliceArray.length;

var searchName = prompt('SEARCH',( fw.newName || ""));
fw.searchName = searchName;
var replaceStr = prompt('REPLACE',( fw.numberStr || ""));
fw.replaceStr = replaceStr;

for (var i=0;i<leng;i++){
    var n = sliceArray[leng-i-1];
    fw.selection[n].baseName = fw.selection[n].baseName.replace(fw.searchName,fw.replaceStr);
}

jsfファイルのダウンロードはこちらから

内容量の多い代替テキストは一行に収めていますか？ それともデザインデータからコピーアンドペーストしたまま（あるいは意図的に）複数行で収めていますか？

altテキストやtitleテキストによるツールチップには改行を持たせられるとなんとなく知っていたんですが、いままで何らかの理由をもって改行を削除して一行に収めていました。根拠は忘れたのですがそういうものだと思いそうしてきました。しかしながらそれではいかんと急に根拠が気になって調べてみたところ、以下の記事にたどり着きました。

■title 属性のツールチップ内で改行
http://www2.u-netsurf.ne.jp/~alt/mt/archives/20031211_1555.html

２種類の方法を使ったWinIEでの改行対応方法と、title属性はCDATAなのでブラウザは改行しないのが正しい解釈、という記事なんですが、alt属性やtitle属性がなぜCDATAなのか根拠がはっきりおらず引っかかてしまいました。ので仕様書をあさってみることにしました。恥ずかしい話、業界で2年以上働いているんですがあまり参照してません。ので、見方が分からなかったんですが… とりあえずDTD見て検索してみてそれらしきものをあたってみることにしてみました。

■HTML4.01 Strict DTD
http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html
■XHTML1.0 Strict DTD
http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd

<!ENTITY % coreattrs
 title       %Text;         #IMPLIED  -- advisory title --"

<!ELEMENT IMG - O EMPTY                -- Embedded image -->
<!ATTLIST IMG
 alt         %Text;         #REQUIRED -- short description --

属性集合（ほぼすべての属性）に任意でtitle属性使えますよ、というのと、 IMG要素にalt属性を使えますよ、という記述にみえます。書式が%Text;だろうと思います。邦訳では「DTDで%Text;と示される多くの属性値は、「人間が読んで解る」という意味の普通のテキストを示す。 属性に関する概説は、 属性に関する解説的記述の項を参照のこと。」とのことでした。あれ、なんでも入力していい？ CDATAなんてどこにもないじゃないかと思ってたんですが、以下にありました。

 <!ENTITY % Text "CDATA">

%TextはCDATAですよ、ということかと思います。CDATAは文書文字集合中の任意の文字列なので、結論、titleやaltはCDATAで改行などを行っても勧告上では無視されるようになっているということが分かりました。http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd

ご要望等に応じてというのもありますし改行しておくのは間違った記述方法ではありません。ただ改行を削除するのがUAの正しい解釈ですから、あらかじめ改行を詰めた体裁で最適化し、情報がやり取りされるべきなのが健全なのだと考えます。改行するべきしないべきでいうとしないべきでしょうか。少し根拠を得られてちょっとなるほどでした。

大分前のネタですがずっとやりたかったので答えてみました。情報共有と自分の考えの整理もかねて。僕はこういうの本当に大好きです。自分以外のひとたちがどういう環境で、どういう考えで仕事をしているのか、垣間みることができて面白いですね。

コーダーが気にしちゃうことバトン
http://gyauza.egoism.jp/clip/archives/2008/12/20081211-codernotes/

エディタは何使ってますか？

更新作業はEmEditorをメインで使っています。とんでもない動作の軽快さ、コードの美しい色分け表示、Unicodeフォント対応、正規表現のサポート、ファイルから検索／置換、作り出したら作業をとんでもなく高速化できるマクロ、Diffなどプラグインがあって手をはなせられないです。ただ補完機能はいまいちですが。。

新規作成時はDreamweaverがメイン。ショートカットキーを設定して覚えだしたらコードビューでの作業がおそろしく早くなりますね。僕の場合、DIVをCtrl+Alt+D、IMGをCtrl+Alt+I、ULをCtrl+Alt+U、LIをCtrl+Alt+Lみたいな感じで定義してます。スペニットもマークアップを統一する上で役に立つと思うのですがソロプレーしかしてないのでここらへんは今後の課題。

macではCodaを使っています。補完機能はDreamweaverよりも好き。ただ画像のwidthとheightが自動的に入らないのは残念かも。あとはmiを使っていますけど相性のいいエディタを模索中。

高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？

できるだけCSSの背景画像を使って回避します。
ただ時間が限られていたり、更新頻度が高い場合は、無理せずtableも。
クリックできるようにしてほしいというオーダーがある場合はJavascriptを使います。
CSS ＞ TABLE ＞ Javascriptみたいなかんじです。

ブラウザごとのCSSバグ対処方法はどうしてますか？

HTML4.01でコーディングすることが多いので、IE向けにスターハックをよく使います。アンダースコアハックは簡単ですがバリデーションエラーが出るのでいちいちスターハックで分岐させてがんばります。個人的にややこしいと思うのでハック用にファイルは分けず、ハックが必要なセレクタの直下にハックを記述しています。
IE5.5やMac用IEを対象ブラウザにすることが滅多にないのであまりバグ対処で行き詰まることはないです。Netscape7.01でよく行き詰まるのですがそうなった場合は作り方変えるしか方法ないですね。。

画像置換についてどう思いますか？

僕はいっさい使わないです。
SEO的には検索エンジンスパム扱いされ始めているようですし（もしかして昔の話？）、通信速度が遅くて画像が読み込まれない環境では、CSSファイルだけ適用されていると、その要素がなにを書いているのかまったく分からなくなりますし。
takazudoさんも書かれていますが、運用の負荷は高くなりますし、印刷したときに表示されないのは良くないですし、あまりメリットは感じられないですね。ただモバイルメディアとスクリーンメディアを同様に表示するページなんかはモバイルでの表示時に負荷を下げる為に採用するのはありかと。

印刷についてどうしてますか？

あんまり考えていないです。
要望があれば、@print規則で不要な要素を消して、650px以内に収まるように加工します。
FxやOperaでうまく表示されないこともありますが、そうなった場合の対応が非常に大変で、お客さんに説明して切り捨ててもらうことが多い気がします。

スクリーンリーダーにて確認などはしますか？

一度だけスクリーンリーダー対応の案件がありましたが、そのほかではいっさい確認していないです。ただそのときの経験で読み上げ時に自然な流れになるように一層配慮してマークアップするようにはなりました。特にテーブルの見出しをどこにするかや、ALTの入れすぎず入れなさすぎずのバランス感覚だとかは大事ですね。

IE7のズーム機能について、対応させていますか？

考えたことないです（笑）要望があったときで良いかなあと考えています。

JavaScriptライブラリのライセンスについてクライアントに説明しますか？

確認はしていますが（多分）問題ないことが多いので説明したことないですね。

JavaScriptのフレームワークを使いますか？使っている場合は何を使っていますか？

jQueryをよく使います。軽くてプラグインやドキュメントの種類が豊富なので。クロスブラウザ対応しているのは本当に安心して使えますね。ほかのライブラリも使ってみたいのですがいまいち勉強不足で手を付けられていません。

CSSやJavaScriptの圧縮をしていますか？

制作者都合ですが、運用面を考えるとどうしてもしないほうがいいと思います。
ただライブラリやトラフィックが大規模なサイトの場合はする価値はあると思います。

コーディングにかける時間はどのくらいでしょうか？

本当にケースバイケースですね。。
ただざっくりとした数字をあげれば、
複雑なレイアウトの場合、A4用紙1枚につき0.5営業日。
CMS組み込みが必要なページなんかはすごい頭使うので1ページ1営業日くらいになります。
テンプレートが決まっている下層ページであれば1営業日5ページくらいは最低作れると思います。それくらいで作っていかないともとがとれないというか。

あなたのコーディングのこだわりはコレ！みたいなものがあれば。

• CSSを切った状態で、画像も表示されない状態で文章として読みやすいように！
• とにかくクールでシンプルで、（僕が）運用しやすいように設計
• 文字サイズ変更に対応
• コスト意識（用件によってかける愛を変える）
• マージンや行間を適切に設定して読みやすく（どこまでやるかは担当デザイナーによる）

「コーディングやってて背が3cm伸びました」みたいなことがあれば

社内でアイデンティティを獲得することができました（笑）
コーディングという共通言語のおかげで先輩や同僚とも仲良くなれましたので。
あとはコーディングの考え方が、他の業務やデザインワーク時の情報設計やらなんやらにつながったりしているような気がします。

興味がある、覚えたいと思っている技術や言語は何ですか？

AS3やりたいです。これさえマスターしておけば数年県内では生き残れる気が（笑）
ゆくゆくやっていきたいのはIAやXSLT関連ですねえ。

読んでくださった方はありがとうございました！みなさまもぜひどうぞ！