マルチディスプレイでHTML&CSSコーディングの速度を上げる
シリーズ目次
- マルチモニタ編
- キーボード・マウス編（近日公開）
- ツール編（近日公開）
- エディタカスタム編（近日公開）
- AutoHotkey編（初級）（近日公開）
今よりコーディングのスピードを上げるには｜CSS HappyLifeで17個の作業高速化Tipsが公開されていますが、ちょこちょこ言及頂いているので僕も持ちネタを出してみます。
一つ一つが長くなりそうなので、全部で5回に分けて公開しようと思います。
マルチモニタまじおすすめ
今よりコーディングのスピードを上げるには｜CSS HappyLife より引用4）デュアルじゃなくてトリプルモニタにする。
自宅会社ともにデュアルモニタだけど、1枚増やしてみる。 これで、Photoshop、エディタ、ブラウザで分けれるっていう素晴らしさ。やりたいけど、金が・・・ hamaさんとかモニタ5枚だったっけ？（笑）
モニタ2枚でデュアルにしている人は結構いますが、3枚でマルチにしてみると、更に快適になります。
「そんなに使わないよ！」という意見がたまにありますが、平澤さんも言ってるように、エディタ、ブラウザ、デザイン、とそれぞれのモニタに分離できる事がポイントです。
分離できると何が嬉しいのかと言うと、アプリケーションを切り替える手間が削減できます。
もしモニタが2枚の場合は、エディタとブラウザで一画面づつ占有するとして、デザインをどちらかのモニタで兼ねる必要があります。
アプリケーションを切り替える方法としては、マウスクリックやAlt+Tabなどがあると思いますが、マウスクリックはキーボードから手を離す必要があり、Alt+Tabは切り替えミスがイラッとします。
モニタが3枚あれば、そのどちらも解決できます。
モニタ3枚を実現する方法
では、実際にマルチモニタ環境を実現するには、どうすればよいのでしょうか？
それにはいくつかの方法があります。
グラボを増設する
少し敷居の高い方法ですが、グラボ増設さえしてしまえばモニタ4枚という環境も可能です。
僕はこれを試した事は無いのですが、マルチディスプレイ総合スレッドまとめサイト あたりが参考になるかもしれません。
MaxiVistaを使う
MaxiVistaというシェアウェアを使うと、不要になったノートPCをLAN経由で外部モニタとして使う事ができます。
日本版は既に終了しているので、本家から直接購入する事になります。 まあ、今（2008年秋）は円高なので良いんじゃないでしょうか。
僕が導入した際のメモが以下です。 多分この通りに進めれば、問題なくインストールできると思います。
- 公式サイトでBuy Nowをクリック
- Professionalを選択
- フォームを色々埋める。 必須項目あり
- シリアルを確認したら、フルバージョンをDL
- サーバ側となるPCにexeでインストール
- 英語で色々聞かれるのでいい感じに進める
- クライアントを何台設定するのか聞かれるので、3台（最高台数）に設定（ラジオボタンのやつ）
- 一台分のクライアントexeが作成された所で、再起動をうながすアラートが出る
- 再起動する
- 無印、B、C、のクライアントexeがデスクトップに出現
- それぞれのPCにクライアントexeを入れる
- クライアントexeを先に起動して、それからサーバexeを起動するっぽい
- タスクトレイのアイコン（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を買い換えるかもしれないので、そしたらまた変わるかもしれないです。
空白類文字についての補足・及び言及への返信
前回の記事、li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.comを書くために空白類文字について調べたら、記事に必要な内容以上の知識を得ました。
また、ブクマコメントで言及を頂いたので、続編記事を書きます。
連続した空白類文字
ユースケさんのブクマコメントの内容です。
はてなブックマーク - yu-suke＠double-team.orgのブックマーク / 2008年11月04日より引用ちなみにどんなに改行や空白が連続してあっても、1つの空白として認識する（はず。あんまし覚えてないけど確かそうだったはず）
これはHTML4.01仕様書の9.1 空白類の節に載っていて、まさにそのとおりでした。
Paragraphs, Lines, and Phrases (ja) 9.1 空白類 より引用 （強調は引用者による）ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。
はじめてHTMLをさわった人の多くが不思議に思う、半角スペースをたくさん入力しても反映されない件は、この仕様によるものです。
インライン・匿名インラインボックス内の改行でも、空白類文字が描画されないケース
前回の記事の結論で次のように書きました。
li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.com より引用インライン及び匿名インラインボックス内で改行をすると、空白類文字（半角スペース）が表示される。
しかし、実はこれにあてはまらないケースが存在します。
例えば次のようなコードの場合です。
<div>
てってってーてってっててー
</div>
このような、開始タグの直後や終了タグの直前で改行しているコードは、よく見かけます。
この改行は匿名インラインボックス内での改行に思えますが、ブラウザ上で確認すると空白類文字は描画されていません。
この動作も、仕様書によって指定されたものです。
Paragraphs, Lines, and Phrases (ja) 9.1 空白類 より引用 （強調は引用者による）SGMLの行区切り規則への抵触や、現存する実装間の矛盾を回避するため、著者は、ユーザエージェントが開始タグ直後または終了タグ直前の空白類をレンダリングするとは期待しないようにすべきである。
この仕様を知っておかないと、逆に「入れたはずの半角スペースが描画されない」というトラブルも起こりえますね（レアケースでしょうけど）。
北村さんより頂いた言及への返信
北村さんよりブクマコメントで頂いた言及です。
はてなブックマーク - 徒栞 / 2008年11月05日 より引用『この分割された面』は、インラインボックスの途中で(br要素により)改行された部分のことなのでは。この図の通り→ http://www.mozilla.gr.jp/standards/webtips0015.html#c1_5_1
言及元記事の引用先の問題の部分（複雑＞＜）は次のようになっています。
ブロックレベル要素とインライン要素 - Web標準普及プロジェクト 3. インライン要素 より引用（スタイル属性は引用者による）例として以下のものがあります。
- a
- abbr
- acronym
- b
- bdo
- big
- cite
- code
- dfn
- em
- i
- kbd
- label
- q
- samp
- small
- span
- strong
- sub
- sup
- tt
- var
上記の例にあるように、要素中に改行が混じるとやや複雑な形で表示されます。
この上記の例
というのは、インライン要素が並んでいる部分を指していると思うのですが、そのコード部分はli要素一つごとに改行されているだけで、br要素は登場していません。
なので、ここだけを見ると、br要素による改行ではなく行区切り類による改行を指しているのではないかと思ってしまうのですが、北村さんのコメント内にあるリンク先を見ると確かにbr要素による改行を指しているように思えます。
両方を読んだ結果、br要素による改行と行区切り類による改行の両方を指しているのではないか、と思えました。
あーでも、要素中に改行が混じるとやや複雑な形で表示されます
の"要素中"って要素の中というようにも思えるので、要素の外で改行をしている場合はあてはまらないような気もしてきました。 それにそもそも、"やや複雑な形"というのも具体的に何が複雑なのかよく分からない…。 うーむ。
【追記あり】li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。
追記：トラバが送れないとの報告を受けて、文末に手動トラバを追加しました。
ナビゲーションなどをリスト要素でマークアップして、display: inline; で横並びにすると、li要素とli要素の間に謎の余白が現れます。
そして、この現象を解決する手段はいくつかあります（参考：リストをinlineで並べた時の余白｜CSS HappyLife）。
でも、この余白はそもそも何者で、なぜ現れるのでしょうか。
余白の正体
結論から言うと、この余白の正体は空白類文字です。 marginやpaddingの暴発ではありません。
では、なぜ何もない場所に急に空白類文字が現れるのでしょうか。 この謎を解くには、まずは空白類文字について調べる必要があります。
空白類文字 1
Paragraphs, Lines, and Phrases (ja) 9.1 空白類 より引用文書文字集合には、多様な空白類文字が含まれている。その多くは、特定の視覚的スペーシング効果を生成するために何らかのアプリケーションが用いる印刷術的要素である。 HTMLでは、次に挙げる文字だけが空白類文字であると定義される。
- ASCIIスペース ( )
- 水平タブ (	)
- 書式送り ()
- ゼロ幅スペース (​)
行区切り類もまた、空白類文字である。
ここで注目すべきは、行区切り類もまた、空白類文字である。
という部分です。 そしてこの行区切り類の項目を見ると、次のように書いてあります。
行区切り類
Paragraphs, Lines, and Phrases (ja) 9.3.2 行区切り類の制御 より引用1つの行区切りは、1つの復帰 (
)か、1つの改行 (
)か、1つの復帰/改行組であると定める。
復帰と改行、という和訳単語が出てきますが、これはそれぞれCRとLFの事です。 復帰/改行組というのはCR+LFの事です。
（参考：テキストファイル - Wikipedia）
（LF == 行送り == 改行 だと思うんですが、違ったらご指摘いただければと）
空白類文字 2
改行が空白類文字である事が解ったところで、再び空白類文字について調べてみます。 この空白類文字とは何でしょうか。
ばけらさんの用語集に簡潔かつ解りやすく載っていました。
用語「空白類文字」@鳩丸ぐろっさり (用語集) より引用HTML において、ASCII spaceと同様に扱われる文字です。
ASCII spaceと同様だそうです。 なるほどですね。
・・・実はASCII spaceが解らなかったので、更に調べてみました。
用語「ASCII Space」@鳩丸ぐろっさり (用語集) より引用ASCII文字の 32 番目の文字。16進数で言うと 0x20 。いわゆる半角空白のことです。
なるほど。 つまり、空白類文字とはHTMLにおいては半角スペースと同じ扱いなんですね。
ここまでのまとめ
行区切り類は空白類文字なので、改行は空白類文字である。 そして空白類文字とはHTMLにおいて半角スペース扱いである。 という事が分かりました。
これで、li要素を改行すると半角スペース分の余白が現れる理由が解りました。 やったね！
新たな疑問
・・・でもちょっと待ってください。 改行はHTMLのソースコードの中にたくさんあります。 li要素にしても、改行をしたら必ず余白が現れるわけでもありません。
空白類文字が現れる場合と現れない場合があるのは、なぜでしょうか？
改行をすると空白類文字が現れるのは、どうやらインラインボックス及び匿名インラインボックスのみのようです。
この辺りに関する仕様書の記述は見つけられなかったのですが、Web標準普及プロジェクトのドキュメントの中に近い物がありました。
ブロックレベル要素とインライン要素 - Web標準普及プロジェクト 3.インライン要素 より引用上記の例にあるように、要素中に改行が混じるとやや複雑な形で表示されます。 これはインライン要素によって生成されるボックスは改行によって複数に分割されることがあるためです。 この分割された面にはborder, margin, paddingはその表示が行われません。
引用元にはli要素をdisplay: inline; で横に並べているサンプルがあるのですが、これを選択状態にすると、空白類文字がある事がわかります。
インライン要素によって生成されるボックスは改行によって複数に分割されることがあるため
、というのはli要素の内容と空白類文字が分割された事であり、この分割された面にはborder, margin, paddingはその表示が行われません。
、というのは空白類文字側の事なのではないでしょうか。
key-childさんからコメントいただきました。
関係ありませんでした。
結論
インライン及び匿名インラインボックス、匿名ブロックボックス内で改行をすると、空白類文字（半角スペース）が表示される。
空白類文字に関しては、もう少し色々とあるんですが、長くなりすぎたので今回はとりあえずこの辺りで。
空白類文字についての補足・及び言及への返信 | Blog hamashun.comへ続きます。
手動トラバ
トラバがうまく送れないという報告を受けたので手動トラバです。
JavaScriptでli要素を一行につなげる - colorhythm
ありがとうございます！
初心忘れるべからず
と言う訳で、今週末のCSS Nite ビギナーズ（東京版）に参加します。
行かれる方は会場でお会いしたらよろしくお願いします。
CSS Niteで喋ってきました
hamashunのセッション
先日のCSS Niteで、「Webの世界に情報発信しよう！」というタイトルで喋ってきました。
内容は簡潔に言うと、「ブログ書こうぜ」です。
当日のアンケートを見させてもらったんですが、おおむねいい感じの評判を頂けてたようでほっと胸を撫で下ろしました。
なんて言うか、正統派のプレゼンではなかったので、もっと好みが分かれるかなーとか思ってました。 特に寸劇とか寸劇とか寸劇とか。
スライドはUPしていますが、高橋メソッド風味なので（あくまで風味）、スライドだけ見てもあまり意味は無いっぽいです。 音声とか公開・・・されるのかな？
セミナーのような場所で喋るのは今回が初めてだったので、いろいろと勉強になり、また課題も見つけられました。
喋っている時の姿勢をもうちょっとシャンとした方がいいかなとか、間の取り方をもう少し緩急付けたいなーとか。
小山田さんのセッション
今回のCSS Niteは2本立てで、最初が僕、その後がヨモツネットの小山田さんでした。
小山田さんの講演内容はガチなCSSネタ。 displayプロパティの値inline-blockに関する内容です。
inline-blockはちょっとした工夫をすれば既に使えて、かつ結構便利、という内容でした。
スライドのサンプルコードでは、Firefox2に対応するためにdivを一つ増やしていました。 あくまでサンプルコードなのでdivを増やしていたんだと思うんですが、実際は div > ul とか、なんかうまい事やれればいいのかなとか思いました。 或いはFirefox2は諦めるとか。
打ち上げ
打ち上げは、いつもより少なめの人数でしたが、逆に話しやすくて良かったと思います。
「IAの話とか勉強会とかしたいよね」的な話で盛り上がったり、Firefox3.1βの情報をさっそく交換したり。
私信
IRCの件。 ぜひｗ
