ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

idとかclass、君たちの名前は?

November 09 2008

仕事の合間とかにWeb関連の事が書かれたブログを巡回するのが好きです。
やっぱ同じ仕事をしている人達の発見とかやり方は刺激になります。

その中で見つけた記事で
「idとclassになんて名前をつけるのか?」というエントリーがけっこうありました。
これは案件に明確な仕様書でもあれば、その通りつけるんでしょうけど
まず今までそんなガチな案件をやった事がないヘボヘボさんなので・・(泣)

正直、CSS関連は他の制作会社様のコーダーの方達のノウハウをそのまま適用してます。
「あと続きお願いします」って仕事の時に参考にさせてもらって学びました。
だから最初に「Wrapper」って見たときに、「YO!YO!チェケラウ!」みたいな
そんなイメージが頭に浮かんで思わず笑ってしまいました。
いや、初めて見たもんですからそんな単語。

参考エントリー「もう、class名やid名で悩まないんだからっ!!」
http://css-happylife.com/log/memo/000100.shtml

ここに書かれている物は普段でもよく使いますが
正直、どこに何書いたっけ?ってのは、
例えば納品後、半年以上経って「あそこに新製品足して」って場合に
CSSファイルに書かれた膨大なclass名なんてすっかり忘却の彼方って事はままあります。
自分で書いたモンですらわかんねえんですから、他人が見たってわかるわけないですね。
それどころか@importで複数のファイルを読み込ませていると、どこになにが(泣)という
非常に情けない結果になりうる事だってあります。

■自分で見ても!(A)
■他人が見ても!(B)
■簡単にわかる!!(二人)
僕の名前はWrapper~~♪僕の名前はFooter~~♪(30代以上西日本限定:by,ヤンマー)
なんていうのはホント試行錯誤していくしかありません。
幸い、業務はほとんどの場合一人で完結する(今現在)ので、
自分がウンウン悩めばいいだけなんですけどもw

参考エントリー「サイトタイプ別class名管理方法」
http://gyauza.egoism.jp/clip/archives/2008/09/080929-classnaming/
うむう、このエントリーは非常に興味深いです。

「ウチはこれだよ!」って仕様を確立させるのが一番いいんだろうなあ。
そして一番良いのはどんどん「これがメジャー」ってのが固まってきてくれるのがいいんですが。

よくやるのが
CSSリセットやボックスなどの情報をbasic.cssって形にしといて
あとはhtmlタグ別にcssファイルを作る、というパターンです。
class名にはhtmlファイルの名前を頭に入れておきます。(例:dt.index_newinfoとか)
それを一気に@importで読ませます。
これが一番(久々に更新とかで忘却してる際に)見つけやすかった。
アンダーバー入れてしまうとNN6.1とかは読んでくれませんが。

参考サイト:「正しい知識を得たい人の爲のCSS2リファレンス 」
http://hp.vector.co.jp/authors/VA022006/css/index.html
やっぱここの内容を頭にガッツリ入れとかないとなあ。
何が正しいかはその人の環境にもよりますが、出来る事ならちゃんとしたいもんです。
関西では「シュッとした」という言い方が一番近いような(笑)

あ、少なくとも最近は.redtextとか書かなくなりましたっ。
日々勉強、これにつきますね。いやホント。

imgタグにheightとwidthの属性は必要?

November 08 2008

探し物をしてる際になんとなく見つけた記事。
「imgのwidthとheightはいるのか」
http://gyauza.egoism.jp/clip/archives/2007/04/imgwidthheight/

ほほう、興味深い記事ですこれは。
(ただ単によく設定し忘れる、というのは実はないしょだ)

どうやらXHTMLの仕様上では必須属性ではないようです。
個人的にXHTML+CSSでサイトを構築するようになって、最初に頭にあったのは
「文書と見栄えの分離」っていう事でした。(あまり深くは考えずに)

テーブルレイアウトしてた時にソース内に無数に出来てくる数字の羅列(width=”60″とか)を
置換で一気に削除したりして、へいこらとCSSで設定してたのに
なんで画像だけこれがいるんかいね?という疑問も確かにあったんです。
そりゃ画像に全部classつけて・・・ってのも面倒だけども。

ブラウザとしてはHTMLが読み込まれた時に、imgにheightとwidthが設定されてると
前もってその領域を確保してレンダリングするので
読み込み終了までにレイアウトがカックンカックン動かなくてすむそうです。
たまにテキストと画像が多数あるとこでこういうカクカクの挙動見たことある。
あれはそーいうことだったんだなあ。

メンテナンスする制作側からみたら、たとえばロゴとかが変わった場合に
画像サイズまで変わってしまうと、HTMLの修正もしなくちゃならんですから
あえてこの属性を記述しないってのもメリットといえばメリットかも知れない。
(まあDreamweaver上で一気に置換してしまえばいい事なんだけど)

あと、幅が狭い画像に長めのalt属性が書き込まれてた場合には
テキストが切れてしまうってのもデメリットかな。

いろいろな記事を読みあさってみると、なんとWeb Designingの2004年8月号で
属性ありとなしのソースを読み込ませてみたら、
属性なしの方が速かった、という事が書かれていたそうです。
http://www.lucky-bag.com/archives/2005/07/width_height.html
うーん、スピードだけを見てもたぶんそんなに大した違いはなさげやけども。
HDDのベンチマークテストが普通の人の大半には意味も興味もないのと同じような・・

古いブラウザを考慮すれば入れとかなければイカン気もしますが
長い目で(将来を見据えて)見たらあえて入れない方がいいかも知れないですね。
img以外の他の要素はみんなCSSで設定してるわけですから。

一番アカンのがありなしが混在しているというその「仕事の雑さ」でしょうね。
自重せねば・・・・・・

SynergyをWinとMacで

November 07 2008

同一ネットワーク上にあるマシンを
ホストマシンのマウスとキーボードでコントロールできるすげえ便利なソフト「Synergy」
http://synergy2.sourceforge.net/

自分の仕事部屋にはメインのXPマシンの横にWindowsXPのノートPC。
(コイツにはIE7とメイリオフォントをインストールしてある)
そして、頭上にはMac Mini(Tiger)が鎮座していて、Web制作の確認環境としては
まあまあの環境じゃないかな、とは思っています。

Linux?
それはKnoppixの起動CDをノートにぶち込んで・・・
とまあ、キリがないんですが。
それこそ携帯電話も3キャリア揃えなければならんし大変だなあ。

で、Synergyの設定なんですが、Win同士の場合はGUI環境なので
そんなに難しくはなかったんやけど、MacとWinの場合はどうやら事情が違うみたい。
しかもMacってそんなに触らないから、どうも使い勝手がわからん。

でも、Mac起動する度にキーボードとマウス差し替えってのもナニなので
ちょっと頑張って設定してみる事にしました。

とりあえずMacで起動してみようと思ってクリックすると
「ターミナル」というMS-DOSプロンプトみたいなんが立ち上がってきよる。

「????????」

泣きそうになりながら検索して
とりあえず、Macの/usr/local/bin/に移動してそこにSynergyのファイルをコピー。
で、ターミナル上でsudo suでルートに移動して
/usr/local/bin/synergyc 192.168.11.2(ホストマシンのIPアドレス)
でとりあえず、マウスとキーボードはMac側で使えるようになりました。

でも。。。。このままじゃだめだな。
Macにはキーボードとマウスを挿さないので、
このSynergyが自動起動してくれない事にはどうしようもない。

なもんで、もう一度検索。
Apple Scriptなるものがある、と発見。
スクリプトエディタにて

do shell script "/usr/local/bin/synergyc 192.168.11.2"

と書いてやって「実行形式」で保存。
できたファイルをMacの「起動項目」ってとこに置いてやったら
無事に起動時にSynergyが起動してくれるようになりました。

メインマシンディスプレイの右端にマウスカーソルを持って行くと
右側のノートPCにマウスカーソルが移動して
ディスプレイの左端にマウスを持って行けば
Mac側にマウスカーソルが起動するので、ディスプレイを切り替える、と。

満足満足

しかし、この処理めんどくさいなあ、と思って検索すると
http://www.altuit.com/webs/altuit2/SynergyOSX/default.htm

SynergyOSXだと・・・・?

普通にGUIのアプリケーションがあるってオチでした~

« Jan 2018 February 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28