昨日、銀座Apple Storeで開催された「CSS Nite Vol.56」がこの黒い画面の話で入力や編集作業が速くなるよ、といった内容が主だったのですが、黒い画面はそれ以外の作業でも効果を発揮します。

CUIをまったく触ったこともない人がこれらを始めるにはどうしたらいいの？ということもあるでしょう。Sassとか使うためにはインストールも必要ですからね。

まずはターミナルを使うこと、コマンドを入力して慣れることから始めるのが良いかな？と。基本のコマンドをいくつか覚えておけば、サーバにターミナルからログインしてそこでファイルを操作することもできます。

というわけで、今日は黒い画面（ファイル操作編）です。

ターミナルアプリケーションの用意をしてね

OS Xは「アプリケーション → ユーティリティ」の中に「ターミナル」ってアプリケーションがあらかじめ入ってます。そもそもバックエンドがUNIXなので、それを起動すれば以下のコマンドが試してもらえます。

Windowsの場合は、UNIXの仮想環境を「Cygwin」とか「coLinux」「VMware」なんかで作ることができますが、まぁそれも面倒です（笑）。ローカル外にSSH接続できるテストサーバとかあれば、「Poderosa」や「PuTTY」といったターミナルアプリケーションを入れてそこにログインしちゃうというのが手っ取り早い方法ですね（Poderosaはその中に一通りのコマンドが入っていたような…）。

今回はOS Xを前提に書いていきますね。

さっそくコマンドを打ってみよう

ターミナルを起動するとこんな画面になります。

「pwd」で自分の位置を確認する

騙されたと思って、「pwd」と入力してリターンキーを押しましょう。

「pwd」というのは、現在の自分の場所を表示します。難しくいうと作業ディレクトリを表示する（Print Working Directory）ってことです。

ターミナルを起動するとホームディレクトリにいますので、「/Users/ユーザー名」が表示されるはずです。「pwd」ってただそれだけなんですね（笑）。

「cd」で作業ディレクトリを変えてみる

ターミナルでは、「/（ルート）」からダラダラとディレクトリやファイルのパスを入れて操作することもできますが、慣れないとそれもまた面倒くさいと思うので、手っ取り早く自分の居場所を別の場所に変えてみましょう。

「cd（半角スペース）移動したいディレクトリ名」と入力してリターンキーを押せば、作業ディレクトリの変更ができます。

「cd（半角スペース）Desktop」と入力すれば、ホームディレクトリの直下にあるデスクトップに移動します。GUIの画面で自分のホームディレクトリをみるとありますよね「Desktop」っての。あなたが画面でいつも見ているそこです（笑）。

ちなみにこの黒い画面の中には（実は黒い画面にもいくつか種類があって、実行しているシェルにもよる）、特定のコマンドのあとにタブキーを押すとディレクトリ内の一覧が表示されたり、ファイル名の頭文字だけ入れてタブキーを押すとそれで始まるファイル名の一覧が出てくるものもあります。また、数文字打ってファイル名などを補完することもできますし、直前に打ったコマンドは矢印キーの上下で履歴を辿ることができるものなんかもあるんです。

「mkdir」でフォルダを作ってみる

デスクトップにフォルダを一個作ってみましょう。

「mkdir（半角スペース）フォルダ名」と入力してリターンキーを押せば、指定した名前のフォルダがデスクトップにあらわれます。出てきたでしょ？

では、またその中に移動します。

「cd example」でexampleフォルダに移動します。

「ls」でファイルの一覧を表示する

「ls」でリターンキーを押せば、そこにあるファイルの一覧が表示されます。

当然のことながら作ったばっかりのフォルダなので何も表示されません（笑）。

UNIXのコマンドは、その多くで半角スペースの後に「-文字列」をくっつけるオプションが用意されています。これを使うとより詳細なコマンドとして実行することができるのですね。たとえば、「ls」なら「ls（半角スペース）-a」みたいに入力します。

ただの「ls」だと見えてるファイルの一覧が出てきます。

「ls -a」だと不可視ファイルもあわせて表示（. .. ってのがありますね）、「ls -l」だとリスト表示になります。「ls -la」と合わせ技にすると不可視ファイルも込みでリスト表示されるのですね（何もないですけどｗ）。

「touch」でファイルを作ってみる

フォルダ内に何もないのもなんなので、ファイルを作ってみましょう。

「touch（半角スペース）ファイル名」と入力すれば、空のテキストファイルが作成されます。

先ほどの「ls」コマンドを実行すると、ほら「hoge.txt」ができました。フォルダの中をみれば、実際にファイルができているはずです。

「vi」でファイルを編集する

作ったテキストファイルを編集します。テキストの編集は、いろいろなものでおこなうことができますが、基本中の基本ということで「vi」を使います（といっても、実際にはVimが起動するかな）。

編集したいファイルを「vi（半角スペース）ファイル名」と入力して開きます。ファイルの作成と編集を一緒にしたい面倒くさがりな人は、先ほどの「touch」を省略して「vi（半角スペース）ファイル名」で作って編集しても良いでしょう。

vi（vim）の話は面倒なので、今回はこのまま閉じます（笑）。何もしない状態で「:（コロン）」を入力すれば、viに用意されたコマンドを実行できます（うっかりなんかキーを押してしまった人は、escキーを一回押してね）。

「:q!」と入力すると、「保存しないで終了」の意味です。リターンキーを押せば、何事もなかったかのようにファイルが閉じられます。

おまけで書いておくと、「:w」で保存、「:q」で終了、「:wq」で保存して終了になります。入力モードじゃない時に「ZZ」って押しても保存して終了します。

「mv」でファイルの移動、リネームをする

「mv」というコマンドを使えば、ファイルを指定したディレクトリに移動したり、ファイル名を変えることができます。

「mv（半角スペース）対象のファイル名（半角スペース）移動先のディレクトリ」で移動、「mv（半角スペース）対象のファイル名（半角スペース）変更したいファイル名」でファイルのリネームです。

ここでは「mv hoge.txt hage.txt」と入力したので、「hoge.txt」は「hage.txt」に名前が変わります。「ls」してみましょうか。

残念ながら、「ほげ」が「はげ」に変わっちゃいました（笑）。

「cp」でファイルをコピーする

ファイルのバックアップを作るとか、同じものを別の場所にコピーしたい時は「cp」を使います。「cp（半角スペース）コピー元のファイル名（半角スペース）コピー先のファイル名」という風に入力してリターンキーを押します。

先ほどの「hage.txt」をコピーして「hige.txt」を作ります。

「cp hage.txt hige.txt」を実行すると、ファイルの複製ができます。またしつこく「ls」してみましょう。

できてますね。GUIだと「Ctrl＋D」押してるのと一緒ですが、GUIだといちいちファイルを選択してファイル名を書き換えないといけません（笑）。

「rm」でファイルを消去する

ファイルを消去したい場合は「rm」というコマンドを使います。「rm（半角スペース）消したいファイル名」と入力すれば、指定したファイルが跡形もなく消去されます。

ひげが邪魔なので「hige.txt」を消しちゃいましょう。「rm hige.txt」と入力すればオッケイ。「ls」してみましょう。

はい。キレイさっぱり剃りあげられました（笑）。

さて、ファイルは「rm」で消えましたが、フォルダを削除するのはどうしましょう？ フォルダの消去も「rm」でおこなうことができます。また、フォルダの作成が「mkdir」のコマンドだったように、フォルダの消去も「rmdir」っていうコマンドが用意されています。

でも、フォルダの中身がある状態では「rm」でも「rmdir」でも消せないんですね。フォルダ内に何かはいってる状態でフォルダをまるごと消去したい場合は、「rm（半角スペース）-r（半角スペース）消去したいディレクトリ名」という風に入力してリターンキーを押します。

「-r」ってのはよく難しく「再帰的（recursive）」とか書かれてるんですが意味がわかりませんね（笑）。とりあえず、繰り返しコマンドが実行されて中身も消去されるとでも思ってればいいでしょう。

rmコマンドは有無をいわさず（環境によりますが）ファイルを消去してしますので、くれぐれもその取り扱いには注意してください。デスクトップにいる状態で「rm -rf *」なんてやったら、そこにあるものが全部消えちゃいますから（笑）。

という風にコマンド操作になれることが先決

覚えておきたい基本中の基本のコマンドを紹介しましたが、どうだったでしょうか。ファイルの移動やコピーなんてのは、さほど行うことではないですしGUIでやっても同じ事です。ただ、これがリモートのサーバ内で何かやるってことになったら知らなきゃできないのです。

昨日の話では「黒い画面が使えると、仕事が増える」とありましたが、デザイナーの皆さんがこのターミナル操作になれているとプログラマやシステム会社さんもそのやりとりが楽になるでしょう。だって、直接サーバに入ってそっちいじった方が楽だったり、作業そのものが短縮化されるんですもん。

慣れの問題もあるとは思いますが、はっきり言って難しいもんじゃないです。また気が向いたらSSHでのログインやSFTPでのファイルの操作なんかを書いてみましょうかね。

あ、こないだ遊びで撮ったものですが、WordPressのインストールなんかはリモートでやればのんびりやっても3分かかりません。

WordPress Install on Remote on Vimeo.

→ Flowdock（現在はサインアップできます）

アカウントを取得してメンバーを招待してはじめよう

アカウントの登録が終わったら自分のホーム画面に移動します。アカウント1つあれば、チームやプロジェクト毎に「Flow」と呼ばれる独立したワークスペース的なものを用意できます。使用するFlowをクリックするとそのDashboardが表示されますので、Flowに参加して欲しいメンバーをメールで招待しましょう。

既にFlowdockのメンバーであれば、招待メールのリンクから自分のアカウントでログインすることが可能です（そうでない場合はサインアップ）。

招待された人がログインすればほぼリアルタイムでDashboardにあらわれます。Flowdockの右側に見えるペインでは、チャットしたりファイルを添付したりといったやりとりが可能です。

このぐらいだったら別にFlowdockじゃなくてもいいわけですが（笑）、Flowdockはここからが違います。

「Influx」にRSSやTwitter、メールなどを読み込む

Dashboardの左に並ぶ3つのボタンの上から2番目「Influx」をクリックすると、外部のRSSや特定のTwitterのフィード、メールなどをストリームのような形で表示することが可能です。

フィードやTwitterのストリームの追加はこのダイアログから、メールはFlow毎に用意されるメールアカウントに対してメールを投稿することでここに表示されるようです。つまり、複数人が参加しているプロジェクトやグループ内での通知事項は、そのアドレスに投げておけば自動的にこの画面に現れると。

Influxに流れてくるものは、個々にコメントをつけたりすることもできるようになっていますので、メンバー同士で意見を交わすみたいなことができます。なので、別に仕事じゃなくて特定の趣味のグループを作って、そこでワイワイやるといった使い方もありでしょう。

特定の話題やファイルの検索は「Flowser」で

チーム単位での仕事になるといろいろな事柄が毎日毎日起こっていくはずです。「あの話ってどうだったんだっけ？」みたいに過去を遡るのも大変です。Influxで流れる内容にはコメントだけでなくタグを付与することもできますので、それらを見つけるにはボタンの上から3番目の「Flowser」を使います。

特定のタグを検索したり、ファイルだけを表示したりすることも可能と。

動作は軽快。仕事だけじゃなくても使えそう

こんな感じでGoogle Waveと比較されそうな感じのFlowdockですが、できることが明快な上に動作も軽快です。チーム内のコラボレーションはもちろんですが、1つのアカウントでFlow自体は複数作れるので、Twitterなどで仲良くなった人たちとお出かけするためのグループミーティングみたいな場としても活用できるかもしれません。

こんな感じで右側にある「＋」を押せば新しいFlowが作れます。

画面のインターフェイスは英語になりますが、できることが限られているので使い方に迷うようなことはないかな、と。日本語も通りますし。現在はまだパブリックβという扱いなので、今後の発展に期待したいと思います。

最近では、高機能なプロジェクトマネジメントシステムだったり、Google Waveなんかも出てきちゃったりで、複数の会社をまたいだプロジェクトのマネジメントというか、制作チーム単位での工程管理というか、複数人でコミュニケーションを取りながら仕事を進めるスタイルにも変化の兆しがありますね。

Google Waveも鳴り物いりで登場した割には、全体的に重いからなのか使い道が思いつかないからなのか、近頃はあまりその話を目にする機会も少なくなりました（使っている方も多いとは思いますが）。が、ここにきて新しい仕事のやり方ができそうなコミュニケーションツールが登場です。その名も「Flowdock」。

Flowdockは何やら良さそげですぞ

このFlowdock、日本時間の3月11日未明にベータアカウントの登録が可能になっていました。サイトにあるビデオを見る限りGoogle Waveに似た感じもありますが、Twitterなどとも連携しているようで何やら良さそうな雰囲気です。

ここで「…いました」とか「良さそうな…」と書いてるのには実は訳がありまして…（笑）。なんだかんだで一気に広まって急激な負荷がかかっているのか、今のところ正常稼働できてないようです（中の人のつぶやきによると）。で、残念ながら現在はインビテーションのリクエスト状態になっています。どうやら復活したようで、現在はサインアップできるようになっています（2010.03.11午前の段階で）。

ボクは速攻でアカウントをいくつか作ったんで「紹介でもしとこうか」とパソコンに向かったのですが、こちらも残念ながらこの画面より先に進めません（笑）。

追って使い方などを紹介できればと考えておりますが、そんなわけなので今日のところはこの辺で閉めたいと思います。興味のある方はサイトの紹介ビデオを見るなり、β版のインビテーションリクエストを送るなりしておくと良いですね。

ひょっとしたら仕事の仕方が変わるかもしれません。

（追記: 2010.03.11）
復活していたので簡単に使い方を書いてみました。

生徒さんには「本やテキストにはないネタが面白かった」とか「他で教えてないんですか？」など嬉しいことを言われたり聞かれたりしたのですが、残念ながら当面別で教える予定は立っておりません（笑）。

その代わりといってはなんですが、ここでまた不定期に怪しい勉強会みたいなものを開催したりしようかと思ってます。しばらくブログに小ネタ（そもそもさほど役には立たないのですが 笑）を書くことも控えていたのですが、それも徐々に復活させていこうかなぁと（謎）。

2年弱の短い間でしたが、これまで受講いただいた皆様はじめ関係者の皆様ありがとうございました。

「sRGB？AdobeRGB？カラーマネージメントって何？　知らなきゃ損する色のこと。より良く魅せるための写真の取り扱い（仮）」

で、どうでっしゃろ？内容はこんな感じ。

追記（2008.12.26）: 遅くなりましたが参加希望のコメントをいただいていた皆様にはメールをお送りしておきました。

1. sRGB？AdobeRGB？色空間ってなんじゃそら
2. カラーマネージメントシステムの仕組み
3. 写真の補正の前に、まずは簡易的でもモニタの調整
4. 埋め込まれたプロファイルには気をつけろ
5. できるだけ意図した色味で見てもらうために（読み込みから書き出しまで）
6. 基本的な写真補正の方法、よりよく見せるためにできること

というわけで、今回は「色と写真」についての講義？になります。
よく「Webなんて色あわせしても無駄無駄」なんて声も聞きますが、正しい色味（意図した色）で表示するということは重要です。実際には見ている環境によって少なからずズレが出てしまうのは事実ですが、表示する相手のことがわかっていれば、その先を想定してできるだけちゃんと見えるようにすることは可能です。

Firefox 3でも隠れてカラーマネジメントの機能が導入されたり、Vistaにも細々とカラーマネージメントが導入されているように（笑）、この先「正しい色で表示する」「正しい色味で見てもらう」ということが求められるかもしれません。色の取り扱いに関するこの辺りの知識がないと、将来自分の補正した写真がまったく違う色味で出てしまっていた！ってことにもなりかねません（わかっていれば、色に関するクレームには適切な対処ができる）。

よく「デジカメで撮ってモニタで見た色とプリンタでの出力結果があわない」とかって話も聞きますが、色のことを知らなければ、うまく合うわけがありませんしね（Macは別として。というか、知ってれば合わせられるはず 笑）。

そういうわけで、今回は簡単なモニタの色あわせの仕方からカラープロファイルの話、そして写真の補正の仕方までをまた3時間ぐらいかけてお勉強したいと思います。特に業界を限定するつもりもありませんし、面識のある方に限った話でもありません。興味があれば、どうぞご自由に（笑）。

日時は今のところ年末も押し迫った「12月28日」というアホっぷりで開催したく考えております…。詳細は追って、このページでご連絡します。
※また10人ぐらいを目処にしています（今8人ぐらいになってます）したが定員になったので締め切りました。
※ドタキャンもありです、もちろん

ちなみにボク前職はDTP系の会社で写真の入力と補正や合成から最終的な出力、某富士ゼロックスさんでは業務用のカラープリンタを使った色あわせのマニュアル作りといったこともしてきましたので、間違ったことは言わないと思います…（たぶん）。

＃Windowsで写真を取り扱う人は、少しぐらいモニタの調整とか色についての理解がないとあなたの見てる色は別の色かもしれませんよ（笑）