ハウテレビジョンブログ

『外資就活ドットコム』『Liiga』『Mond』を開発している株式会社ハウテレビジョンのブログです。

エンジニアの作業効率を上げる画面構成

JOINして半年が経過しました @artifactsauce です。バックエンド周りを中心に開発全般を担当しています。今日は私のこだわりを中心に、開発環境の一要素である 画面 について考えてみたいと思います。

背景

ソフトウェア開発者の開発環境に対するこだわりは尋常ではありません。コンピューターそのものに始まり、キーボード、マウス、エディター、ブラウザなど、ハードウェアからソフトウェアまで、そのエンジニアの生産性を最大限に発揮するためには、その開発者がこだわりぬいた環境を構築する必要があると思います。

一つ一つの要素についてはネット上にも多くの記事が存在しますが、 画面 (ここではディスプレイ自体も含めた目に見えるもの全体を抽象的に示すことにします)という視点に立ってはあまり多く語られてこなかったように思います。物理的に接することはほとんどありませんが、人間の感覚器として最も重要と言われる視覚を受け止める 画面 については、構成要素が多く、まとめて語ることが難しいようにも感じます。今回はそのあまり語られない 画面 について、要素をある程度絞りながら考察します。

f:id:artifactsauce:20140728114603j:plain

筆者の物理的なデスクトップ環境

構成要素

使う人それぞれに 画面 を構成する要素は違うのですが、ここではWebエンジニアの開発環境をモデルに 画面 の構成要素を挙げていきましょう。弊社のエンジニアは今のところ全員MacBookを使っています。そのため、Mac OS Xの機能に話が偏ってしまうのはご容赦ください。各項目で私の利用状況についても述べます。

物理ディスプレイ機器

最も基本的な要素である物理ディスプレイ機器です。サイズについて述べた場合、物理的な大きさだけはなく画素数も考慮されるべきで、最近ではFull-HD (1920x1080)と呼ばれるサイズが一般的だと思います。性能という意味ではどのメーカーもかなり成熟しており、単純にコードを書くという目的に対してはどの機器を選んでも充分な機能を持っています。エンジニアの中には縦横比を逆転できるものを好む人も多いようです。

このように、物理ディスプレイの選択肢は、機器選定という意味では特筆すべき点が少なく、また1台の単価も比較的安いため、機器の台数が選択すべき大きなポイントになるのではないかと思います。最近ではラップトップにさえ外部ディスプレイ接続端子が2つ以上付いていますから、物理的に複数台のディスプレイを使うことに対する障壁はかなり低いと言えます。ディスプレイを2台にすることによって作業効率が40%上がるというまことしやかな話もあり、物理ディスプレイを複数台にすることは重要な選択肢となりうるでしょう。事実、弊社でも複数台(2台が多い)のディスプレイを設置している人は多く居ます。

私の場合は、MacBook Proに23インチのFull-HD液晶ディスプレイを1台接続し、MacBookを閉じ、外部ディスプレイ1つのみを使っています。

その理由としては、

  • ディスプレイが複数台あると首を動かす量が増える。
  • キーボードが向いている方向と首の方向が違っていることに違和感がある。
  • オフィス外(カフェ駆動開発)でラップトップを使っているときにディスプレイが足りなく感じる。

という点がまず挙げられます。

とは言え、表示面積が大きくなって作業効率が40%上昇するなどのメリットを享受できないのは問題です。そこで、この問題を解消する技術を次項以降で紹介するとともに、深まっていく 画面 のレイヤーについて解説したいと思います。

仮想デスクトップ

仮想デスクトップは、物理ディスプレイ上で仮想的に複数のデスクトップを構築する技術を指します。言葉で説明しただけでは非常に分かりづらい機能ですので、まずは下の動画を見ていただければと思います。

感覚的に説明すると、本当のデスクトップは複数あって、その1つを物理ディスプレイで映し出しているのです。画面にレイヤーが増えたと言えるでしょう。物理ディスプレイを増やさなくても、それに近い効果が得られると私は感じています。しかしその便利さに反して、パソコンではあまり使われていないという印象です。

仮想デスクトップはMac OS XまたはLinux(のメジャー・ディストリビューション)では標準機能であり、実は今すぐにでも使うことができます。Windowsユーザーもサードパーティ製アプリケーションがありますので探してみてください。

Mac OS Xの仮想デスクトップは Mission Control と呼ばれており、ただ画面を増やすだけでなく、画面全体を見渡したり、アプリケーション・ウィンドウをフルスクリーンにして1つのデスクトップとして分離することもできます。

f:id:artifactsauce:20140731232107p:plain

Mac OS Xでウィンドウをフルスクリーンにするボタン:ボタン1つで簡単にフルスクリーンモードになる。Cntl+⌘+Fがそのショートカットキー。

物理ディスプレイを増やすのではなく、仮想デスクトップを増やした方が良い理由があります。私はソフトウェアから発せられる様々な通知(メールが来たとかチャットが来たとか)を「通知センター」または「Growl」で表示しています。しかし、物理ディスプレイが分かれていると通知メッセージが視野の中に入ってこない可能性があります。一方、Mac OS Xの仮想デスクトップの場合は、これらの通知を全ての画面で見ることができるので、通知を見逃す可能性がグッと少なくなります。

f:id:artifactsauce:20140731232127p:plain

通知センターの例:メールなどの到着を知らせてくれる。

もちろん株のトレーダーなど、ディスプレイから距離をとって全体を見渡すような使い方をする場合は、物理ディスプレイが複数あることがかなり重要ですので、そこは適材適所です。

ターミナル

Webエンジニアは多くの場合、ターミナルと総称されるアプリケーションを使います。「端末」と呼ばれたり「コンソール」と呼ばれたりもします。通称「黒い画面」と呼ばれる、文字によってコンピューターに指示を出すためのアプリケーションです。そのほとんどが、ウィンドウを複数表示することができ、また多くの場合、タブを使って1つのウインドウ内に複数の表示領域を持つことができます。

f:id:artifactsauce:20140731232216p:plain

MacのTerminal.appの画面:現在では基本的な機能は揃っていて、多くのデフォルト厨が使っている。とは言え、タブが使えたり、⌘+数字でウィンドウ間を移動できるなど、なかなか便利。

複数のウィンドウとそれに属する複数のタブを使って何をするのでしょうか?ターミナルでは実に様々なことができます。ファイルの移動や削除などの通常のファイル操作はもちろん、多数のファイルに同一の処理を施したり、定期的にプログラムを実行したり、他のコンピュータに接続したり、などなどです。

しかしここでは様々なことができることに着目するのではなく、もう一つの要素である並行作業について見ていきたいと思います。複数の表示領域はそれぞれに制御されています。どこかで何らかのプログラムを実行しつつ、他の表示領域でそのプログラムを編集したり、そのプログラムの実行ログを確認したり、そのプログラムがどれくらいコンピューターに負荷をかけているのかを確認したり、同時かつ並行して動作することが可能なのです。

そして我々人間も、それに合わせて並行して作業を進めることが可能です。ウインドウとタブという構成を持っているため、例えばAという処理に関する複数の作業をウインドウAの複数のタブの中で処理し、また同時にBという処理についてもウインドウBにおいて作業を進めることができます。ウインドウとタブの組み合わせを使って、複数の作業を分類しながら並行して作業を進めることができます。

しかし、ここまでの話の流れに反し、私は基本的に1つのウィンドウだけしか使いません。タブも使いません。それではどうやって上記のような並行作業をしているのでしょうか?

仮想ターミナル管理ソフトウェア

仮想ターミナル管理ソフトウェアとは、ターミナルの中で仮想的にターミナルを管理するソフトウェアです。端的に言うと、先ほど述べた並行作業をするために、ターミナルが入力/表示領域を増やしていたのと同様の機能を「仮想的に」行うという機能です。ターミナルの中で仮想的にターミナルを増やすということは、前項で出てきたタブの中に、さらに独自にタブ管理機構を加えたと捉えることができます。

この仮想ターミナル管理ソフトウェアにはさらに重要な機能があります。リモート接続したサーバー中で仮想ターミナル管理ソフトウェアを起動した際、何らかの理由によって接続が途絶えてしまった場合でも、サーバー中では切断前の状態を維持することができ、再度接続した際に環境を再現することができます。

またさらに画面分割機能があります。これにより左側画面でエディターによる編集、右側で実行といったことができます。実行結果を見ながらさらに編集といった操作は日頃から頻繁に行われていると思います。

f:id:artifactsauce:20140731232239p:plain

仮想ターミナル管理ソフトウェア tmux を起動した様子:よく見るとタブのようなものがあり、画面が分割されていることがわかっていただけるはず。

この仮想ターミナル管理ソフトウェアには2つのメジャーなプロダクトがあります。screentmuxです。どちらも非常に優れたプロダクトですので優劣をつけることはできませんが、私はtmuxを使っています。以前はscreenを使っていました。どちらを使っているのかはともかく、私はターミナルアプリケーションのウィンドウやタブを増やさずに、この仮想ターミナル管理ソフトウェアを使っています。

参考

エディター

エディターはWebエンジニアが最も利用するアプリケーションであり、しばしば宗教戦争を起こす、エンジニアの思想にまで入り込む存在です。ここではもちろん、どのエディターが最も良いか?などの話には一切触れず、それらが画面レイヤーに対して及ぼす影響について考えます。

エンジニアが開発中に扱うファイルは1つでありません。複数のファイルを並行して編集することは日常茶飯事です。その際、ファイルを渡り歩く度にウィンドウを閉じたりアプリケーションを閉じたりするのはリソースの無駄ですし、時間の無駄ですし、人生の無駄です。そのため、エディターは複数のファイルを開いたまま保持しておく機構が備わっています。つまり、1つの起動しているアプリケーション中で複数のファイルを切り替えられるのです。さらに、複数あるウィンドウ中でそれぞれエディターを起動することができます。さらに画面レイヤーが増えていく様子をご理解いただけるかと思います。

世にエディターは数あれど、ターミナル中で利用できるエディターは多くありません。その中でも2つのメジャーなプロダクトがあります。EmacsVimです。私は普段、Emacsを使っています。Emacsは複数ファイルを扱えることはもちろん、さらに画面分割の機能があります。

組み合わせを考える

画面レイヤーが無限に増えていく感覚、皆さんにもご理解いただけたかと思います。この様子を見て「やったー!僕は無限の力を手に入れた!」と考える人はかなり少ないと思います。そう、仮に無限に広がる機能があったとしても、それを操る人間の能力は無限ではないのです。

適切な構成を考えるためのヒント

人間の短期記憶容量は7±2だそうです。短期記憶は驚くほど貧弱なのです。無限に広がる画面レイヤーを管理するにはあまりにもひ弱すぎます。我々は無限の選択肢の中から取捨選択して、自分なりの環境を整えなければいけないのです。しかし一方で、この記憶容量7はある塊の中の要素の数であり、例えば21種類の動物を記憶しておくことは難しいですが、7つの動物と7つの植物と7つの色をそれぞれ別々に記憶しておくことは簡単です。これを応用して画面構成を考えましょう。例えば、仮想デスクトップは7つ以上にならないようにする、タブは7つ以上にならないようにするといったことです。

また、分割するレイヤーを複数持たないようにするべきでしょう。具体的には、物理ディスプレイが2台に仮想デスクトップが4面あり、ターミナルが2つ起動していて、3分割された5つの仮想ターミナル管理ソフトウェア上で、5つのエディター が起動している、みたいな構成は今すぐにやめましょう。混乱を招くこと必至です。

物理ディスプレイを増やすなら仮想デスクトップは使わない、仮想ターミナル管理を使うならターミナルアプリケーションのタブは使わないなどの割り切りが必要になるでしょう。

私の環境

現状で私が採用している開発時の画面構成は下記のようになっています。

  • 物理ディスプレイ x 1
  • 仮想デスクトップ: フリー x 2 + アプリケーション・フルスクリーン x 起動数(約3)
  • Terminal: Tab x 1
  • tmux: ( Tab x ≤ 5 ) x ( Pane x ≤ 3 )
  • Emacs: Buffer x ≤ 7

これが現状の私の脳のバッファにちょうどマッチする構成です。数がこれ以上多くなると、覚えられないため、探しまわることになります。ファイル数が多くなってしまう場合が頻繁にありますが、その際はこまめに閉じるようにしています。

なぜこの構成にしたのか?

この構成は、Linuxサーバーで開発をしていた経験に由来します。かつての私のメインの開発環境は1つのLinuxサーバーの中にあり、そのLinuxサーバーに対してアクセスする環境はWindowsやMacなど様々だったのです。そのため、接続元のOSやアプリケーションになるべく依存しない開発環境を構築していった結果、このようになりました。ここで言えることは、開発者それぞれの条件が違えば答えは違ってくるということです。私の環境も参考にしていただきたいですが、皆さんもぜひ自分なりの環境を構築してみてください。