Blog

※ブログ移転しました。 → hamashun.me

2008年11月Archives

2008年11月08日

空白類文字についての補足・及び言及への返信

前回の記事、li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.comを書くために空白類文字について調べたら、記事に必要な内容以上の知識を得ました。
また、ブクマコメントで言及を頂いたので、続編記事を書きます。

連続した空白類文字

ユースケさんのブクマコメントの内容です。

ちなみにどんなに改行や空白が連続してあっても、1つの空白として認識する(はず。あんまし覚えてないけど確かそうだったはず)

はてなブックマーク - yu-suke@double-team.orgのブックマーク / 2008年11月04日より引用

これはHTML4.01仕様書の9.1 空白類の節に載っていて、まさにそのとおりでした。

ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある

Paragraphs, Lines, and Phrases (ja) 9.1 空白類 より引用 (強調は引用者による)

はじめてHTMLをさわった人の多くが不思議に思う、半角スペースをたくさん入力しても反映されない件は、この仕様によるものです。

インライン・匿名インラインボックス内の改行でも、空白類文字が描画されないケース

前回の記事の結論で次のように書きました。

インライン及び匿名インラインボックス内で改行をすると、空白類文字(半角スペース)が表示される。

li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.com より引用

しかし、実はこれにあてはまらないケースが存在します。
例えば次のようなコードの場合です。

<div>
てってってーてってっててー
</div>

このような、開始タグの直後や終了タグの直前で改行しているコードは、よく見かけます。
この改行は匿名インラインボックス内での改行に思えますが、ブラウザ上で確認すると空白類文字は描画されていません。

この動作も、仕様書によって指定されたものです。

SGMLの行区切り規則への抵触や、現存する実装間の矛盾を回避するため、著者は、ユーザエージェントが開始タグ直後または終了タグ直前の空白類をレンダリングするとは期待しないようにすべきである。

Paragraphs, Lines, and Phrases (ja) 9.1 空白類 より引用 (強調は引用者による)

この仕様を知っておかないと、逆に「入れたはずの半角スペースが描画されない」というトラブルも起こりえますね(レアケースでしょうけど)。

北村さんより頂いた言及への返信

北村さんよりブクマコメントで頂いた言及です。

『この分割された面』は、インラインボックスの途中で(br要素により)改行された部分のことなのでは。この図の通り→ http://www.mozilla.gr.jp/standards/webtips0015.html#c1_5_1

はてなブックマーク - 徒栞 / 2008年11月05日 より引用

言及元記事の引用先の問題の部分(複雑><)は次のようになっています。

例として以下のものがあります。

  • a
  • abbr
  • acronym
  • b
  • bdo
  • big
  • cite
  • code
  • dfn
  • em
  • i
  • kbd
  • label
  • q
  • samp
  • small
  • span
  • strong
  • sub
  • sup
  • tt
  • var

上記の例にあるように、要素中に改行が混じるとやや複雑な形で表示されます。

ブロックレベル要素とインライン要素 - Web標準普及プロジェクト 3. インライン要素 より引用(スタイル属性は引用者による)

この上記の例というのは、インライン要素が並んでいる部分を指していると思うのですが、そのコード部分はli要素一つごとに改行されているだけで、br要素は登場していません。

なので、ここだけを見ると、br要素による改行ではなく行区切り類による改行を指しているのではないかと思ってしまうのですが、北村さんのコメント内にあるリンク先を見ると確かにbr要素による改行を指しているように思えます。

両方を読んだ結果、br要素による改行と行区切り類による改行の両方を指しているのではないか、と思えました。

あーでも、要素中に改行が混じるとやや複雑な形で表示されますの"要素中"って要素の中というようにも思えるので、要素の外で改行をしている場合はあてはまらないような気もしてきました。 それにそもそも、"やや複雑な形"というのも具体的に何が複雑なのかよく分からない…。 うーむ。

2008年11月13日

マルチディスプレイでHTML&CSSコーディングの速度を上げる

シリーズ目次

今よりコーディングのスピードを上げるには|CSS HappyLifeで17個の作業高速化Tipsが公開されていますが、ちょこちょこ言及頂いているので僕も持ちネタを出してみます。
一つ一つが長くなりそうなので、全部で5回に分けて公開しようと思います。

マルチモニタまじおすすめ

4)デュアルじゃなくてトリプルモニタにする。

自宅会社ともにデュアルモニタだけど、1枚増やしてみる。 これで、Photoshop、エディタ、ブラウザで分けれるっていう素晴らしさ。やりたいけど、金が・・・ hamaさんとかモニタ5枚だったっけ?(笑)

今よりコーディングのスピードを上げるには|CSS HappyLife より引用

モニタ2枚でデュアルにしている人は結構いますが、3枚でマルチにしてみると、更に快適になります。
「そんなに使わないよ!」という意見がたまにありますが、平澤さんも言ってるように、エディタ、ブラウザ、デザイン、とそれぞれのモニタに分離できる事がポイントです。

分離できると何が嬉しいのかと言うと、アプリケーションを切り替える手間が削減できます。
もしモニタが2枚の場合は、エディタとブラウザで一画面づつ占有するとして、デザインをどちらかのモニタで兼ねる必要があります。

アプリケーションを切り替える方法としては、マウスクリックやAlt+Tabなどがあると思いますが、マウスクリックはキーボードから手を離す必要があり、Alt+Tabは切り替えミスがイラッとします。
モニタが3枚あれば、そのどちらも解決できます。

モニタ3枚を実現する方法

では、実際にマルチモニタ環境を実現するには、どうすればよいのでしょうか?
それにはいくつかの方法があります。

グラボを増設する

少し敷居の高い方法ですが、グラボ増設さえしてしまえばモニタ4枚という環境も可能です。
僕はこれを試した事は無いのですが、マルチディスプレイ総合スレッドまとめサイト あたりが参考になるかもしれません。

MaxiVistaを使う

MaxiVistaというシェアウェアを使うと、不要になったノートPCをLAN経由で外部モニタとして使う事ができます。

日本版は既に終了しているので、本家から直接購入する事になります。 まあ、今(2008年秋)は円高なので良いんじゃないでしょうか。
僕が導入した際のメモが以下です。 多分この通りに進めれば、問題なくインストールできると思います。

  1. 公式サイトでBuy Nowをクリック
  2. Professionalを選択
  3. フォームを色々埋める。 必須項目あり
  4. シリアルを確認したら、フルバージョンをDL
  5. サーバ側となるPCにexeでインストール
  6. 英語で色々聞かれるのでいい感じに進める
  7. クライアントを何台設定するのか聞かれるので、3台(最高台数)に設定(ラジオボタンのやつ)
  8. 一台分のクライアントexeが作成された所で、再起動をうながすアラートが出る
  9. 再起動する
  10. 無印、B、C、のクライアントexeがデスクトップに出現
  11. それぞれのPCにクライアントexeを入れる
  12. クライアントexeを先に起動して、それからサーバexeを起動するっぽい
  13. タスクトレイのアイコン(ABC別々)を右クリックして、下から2番目と3番目の項目で、リモートモードや外部モニタモードを切り替えられる

MaxiVistaの何がいいって、グラボを増設できないノートPCでもモニタを増やせる事だと思います。 速度も問題無いです。
唯一惜しいのは、Windows限定という事くらい。

USBアダプタを使う

最後はUSBでモニタを接続する方法です。
これを実現するアダプタは結構な種類が存在するのですが、古い製品だと描画速度が遅すぎて使い物になりません。 僕も以前某製品を買って後悔したクチです。

そこいくとBUFFALOのUSB2.0用 ディスプレイ増設アダプタ | GX-DVI/U2は、ほぼ通常のモニタと同じ感覚で使う事ができます。
値段もamazonで6.700円くらいとお手ごろです。

性能も、ニコニコ動画がほぼ問題なく見られるレベルと言うとわかりやすいでしょうか。 かなり普通に使えます。
ただし、モニタサイズは最大でも1600×1200(ワイドなら1680×1050)までの対応である事には注意が必要です。

機器を6つまで同時接続ができたり回転表示ができたりと、全体的にかなりよくまとまっていると思います。
設定なども日本語なので、個人的に最近のイチオシです。 あ、ただ、これもWindowsのみです。

おまけ:hamashunの現在のモニタ環境

正面のモニタ
エディタ、ブラウジング用ブラウザ、ターミナルなど、【操作する物】を配置しています
左のモニタ
社内IRC、メーラー、作業用ブラウザなどを配置。 作業用ブラウザは最大化せず、メーラーの受信箱やIRCがチラリと見えるようにしています。
右のモニタ
ファイラー、デザイン画像、IMウィンドウなどを配置。 ちなみにこれの接続にGX-DVI/U2を使用しています。
右の右のモニタ
社外IRC、Twit、IM本体を配置。 顔を動かさないと視線に入らない位置にあるので、使用頻度の低い物・低くあるべき物を配置しています。 Twitterのやりすぎはよくないですね。
ちなみにチャンミス防止の意味で、IRCを社内と社外でクライアントごと分けています。 接続はMaxiVistaです。
番外:古いノートPC
この2台は、常時は起動していません。 Win2kのIE5.5とXPのIE6が入っているので、確認時のみ起動します。
古いブラウザの確認はスタンドアローン版でやる、という人も多いと思いますが、一応オフィシャルの物も用意しておこうかな、みたいな。 まあ、わざわざ買った訳ではなく、余ってたので使ってるというのが正直なところ。

もしかしたら近日中にPCを買い換えるかもしれないので、そしたらまた変わるかもしれないです。

2008年11月22日

キーボードとマウスを工夫してHTML&CSSコーディングの速度を上げる

シリーズ目次

マークアップエンジニア的キーボードの選び方

キーボード選びは、エディタ選びに負けず劣らず宗教戦争になりそうですが、ぶっちゃけ好みでOKだと思います。 自分に合った物を選ぶのが一番ですよね。
なので、ここでは僕の選択基準について書いてみます。

日本語配列か、英語配列か

個人的には日本語配列派です。
会社のプログラマーの人から「英語配列使いなよ! そうだ俺の余ってるから貸すから。 な? な!」としばしば言われるんですが、HTMLとCSSがメインなら、日本語配列と英語配列の違いはプログラムほどは無いんじゃないかなと思っています。

テンキー付きか、テンキーレスか

テンキーがあるとマウスが遠くなってしまうので、テンキーレスが好きです。
最近、ようやく数字キーをブラインドタッチできるようになってきました(0とかたまに怪しい)。

構造

メンブレン、メカニカル、静電容量無接点などがありますが、ダントツで静電容量無接点が好きです。
あの打鍵感覚は、普通にタイピングしてるだけでテンションが上がってきますね!

hamashun使用のキーボード

僕が使っているのは、東プレのRealforce 89UBというモデルです(参考:東プレ「RealForce 89U」が新たにブラックモデルとなって復活)。 なんか限定モデルらしく、メーカーのサイトには載ってませんでした。
日本語配列・テンキー、Win、appキーレス・静電容量無接点という、まさに僕の好みにガチはまりです。

マークアップエンジニア的マウスの選び方

キーボードにはこだわるけどマウスは意外と普通、という人をちょくちょく見かけます。 と、言うか、「殆どの作業はキーボードだからマウスはぶっちゃけ何でもいいw」なんて人もいますね。
まあでも、人によってはPhotoshopを使ったりするでしょうし、hamashun的マウス選びの基準を書いてみます。

形状

マウスの形状は、キーボード以上に多岐に渡っています。 基本的な形でもトラックボール型かマウス型かがありますし、それぞれが更に分類できます。
ここはもう好みでしょうけど、僕はロジクール系が好きです。

解像度変更機能

マウスの解像度って、高いのが欲しい時と低いのが欲しい時があるんですよね。
Photoshopで1pxだけ動かしたい時は低いのが便利ですし、マルチディスプレイの時に端から端に動かす時は高いのがラクですし…。

そんな時に便利なのが、解像度を動的に変更できる機能を持ったマウスです。
簡単に言うと、マウスのボタンを押すだけで、マウスの速度(って表現でいいのだろうか)が変わります!

任意のキーを設定

キーボードの任意のキーを設定できるマウスが便利です。
僕はCtrlキーを設定しているので、忙しい時に片手がふさがっていてもCtlr+クリックがスピーディに可能です。

hamashun使用のマウス

Logicool G5 Laser Mouseです。
ゲーム用マウスだけあってハードな使用が想定されているらしく、家の物は買ってから3年近く、会社の物ももうすぐ2年になりますが全く問題ありません。
本体の重量調整ができたりもします。

ところでキーボードやマウスを変えたら、本当にコーディングの速度が上がるの?

使い慣れてるキーボードやマウスが無い環境で作業をすると、かなり違和感を感じて効率が落ちてる気がするので、効果があるんじゃないでしょうか! たぶん!

まあ、目に見えた速度UPというよりは、「お気に入りの道具を使う」というモチベーションUPの効果が大きいかもしれません。

2008年11月29日

便利なツールを使ってHTML&CSSコーディングの速度を上げる

シリーズ目次

Windows XPを使っていると様々な不便を感じます。 その一つ一つは小さな物ですが、一日中PCを使う僕たちからするとかなりのストレスとなってしまいます。
そんな時はツールを使って解決すると良いです。

注意:紹介しているツールは全てWindows用です。

CLCL

かなり有名なクリップボード拡張ツールです。 「もう使ってるよ!」という人が多いと思います。

通常、Ctrl+Cなどでコピーしておける内容は一つのみです。 もう一度Ctrl+Cをすると、内容が上書きされてしまいますよね。 CLCLを使えば、その履歴を辿って呼び出す事ができます。

Alt-Tab Extender"Joe"

このツールは超オススメです。 レジストリは使っていないので、一度試してみてください。
僕は、このツールが無いとWin XPを使う気にならない程に依存しています。

マークアッパーはウィンドウが増えがちです。 エディタにはじまり、メーラー、IRC、IM、ファイラー、画像ビューワ、ブラウザ、ブラウザ、ブラウザ、ブラウザ、ブラウザ…。
しかも、これらを頻繁に切り替える必要があるのです。 そんな時に超便利なのが、このJoeです。

Joeを使えば、Alt+Tabを押した際にアイコンだけでなくタイトルも表示してくれます。 しかもマウスクリックで決定する事ができます(XPデフォルトの動作ではキャンセルされてしまいます)。

ぴたすちお

これまた有名ツールです。 様々な便利機能が詰め込まれていて、かゆい所に手が届きます。
ウィンドウを画面端にスナップさせる機能と、マウスホイール関連、キーボード関連などの機能を愛用しています。

出ておいで

マルチモニタ環境でいると、たまにウィンドウが画面外から戻せなくなってしまう事があります。 そんな時にこの『出ておいで』を使うと、強制的に画面内に戻す事ができます。

ファイルブラウザ・X-Finder

OS純正のファイラ(ファイルやフォルダのアイコンが並んでる、あのウィンドウです)を使っている人は、意外といるのではないでしょうか。 そんな人は、今すぐにその他のファイラに乗り換えるべきです。

僕が最近使っているファイラはX-Finderですが、結構頻繁にあれこれ乗り換えています。 なかなか好みの物が見つからないんですよね。
X-Finderはタブ表示、ウィンドウ分割、TortoiseSVNのアイコン表示、と機能面は良いんですが、ちょっと不安定なのが気になります。

通り抜けループ

デスクトップのアイコンをクリックしたい時に、何枚ものウィンドウを移動・最小化するのは面倒ですよね。 この通り抜けループを使えば、それらのウィンドウをまとめてペロリとめくる事ができます。

よく、「Win+Dでいいじゃん」と言われるのですが、ウィンドウ数が10を超えていたりPhotoshopのような重いソフトを起動してると、ちょっと抵抗あるんですよね。 Winキーレスのキーボードを使っているというのもありますが。

IrfanView 日本語版

PSDの画像を、見るだけのためにPhotoshopを起動するのはちょっと面倒です。 そんな時に使える画像ビューワがIrfan Viewです。
軽くて様々な画像形式に対応しているので、オプションでまとめて関連付けしてしまうと便利です。

Real VNC

「Windows PCがメインの作業環境で、Macは確認用にたまに使う。 ただMacは少し離れた机にある」なんて場合に便利です。 VNCを使えば、Win PCからMacを操作する事ができます。

VNCに関しては以前に書いた記事、Web制作をちょっと快適にしてくれるツール達 | Blog hamashun.comを参照してください。


Blog Search
Search
Recent Entry
Category
Monthly Archive