昨日、銀座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.

SSH（Secure Shell）って聞くと、GUIな環境で作業されるWebデザイナーさんの中には「聞いたことあるけど難しそう」なんて方も多いかもしれませんが、これが使えると使えないでは作業時間にも大きく影響したりするという現実もあります。

Windowsなら「PuTTY」や「Poderosa」などをインストール、OS Xなら標準でインストールされている「ターミナル」を使えば、リモートにあるWebサーバなどに接続していろいろな操作をおこなうことができます。今月21日に開催される「CSS Nite Vol.56」もコレ系の話が予定されてるようですね。

iPadやiPhone向けのSSHクライアントはこれまでもいくつかリリースされていましたが、このたびめでたくPanicさんからリリースされたのであります。

さすがPanic！ 細かいところに気が利く〜

やはり普通にアプリケーション開発をされている会社なので、このPromptは細かいところに気の利いたものになっています（もともとCodaにもターミナルの機能は組み込まれてましたしね）。

iPadでは、起動すると左側に「Connections」というサーバリスト、右側が実際にコンソールが表示される画面になります。iPhoneではログインダイアログが表示されます。

「＋」ボタンを押せば新規サーバに接続、登録することができます。

接続先のサーバ、ログインID、必要に応じてパスワードを入力して接続します。鍵の登録は右の鍵のボタンをタップすればやり方が表示されます。

ターミナルの画面では頻繁に使うキーがあったりするので、4つまでですがキーボードの上に登録できるようになっています。このボタンを長押しすれば、自分の好みに変更可能です。

iPhoneの画面も同じようになっていて、縦向き横向きどっちも使えます。

SSHでリモートに接続できるとこんなことができます

フリーで何から何までやってるWebデザイナーさん以外は、バックエンドのサーバの設定などまでを仕事で扱うことはないでしょうが、実は冒頭にも書いたようにSSHでリモートサーバに接続できると作業時間の短縮に役立つこともあるんです。

たとえば、CMSのソフトウェアをインストールすることを考えてみましょう。一般的なやり方としては、配布ファイルをダウンロードして解凍後、FTPクライアントでサーバに接続してアップロードすることになります。

解凍後の膨大なファイルをちまちまFTPでアップロードしながら終わるのを待っていたり、ファイルのパーミッション変更もディレクトリを移動しながらちまちま変更してたりしませんか？

リモートにSSHで繫がれば、回線の速いサーバ側で配布ファイルをダウンロードしてそこで解凍する、パーミッションの変更もコマンドで一気に変更する、といったことができます。おそらく時間にすれば何分の一とかっていう比じゃないかもしれません。

極端な話をすれば、PCのFTPクライアントがなくてもターミナルからSFTPとかで接続してファイルのアップロードやダウンロードもできます。いちいち画面なんか切り替えてらんねーよ、と（笑）。iPadからローカルのマシンに繋げば、そこからリモートに繋いでアップロードもできますよ、ククク。

ファイルの移動もコピーも消去も簡単なコマンドだけ、場合によってはそこで編集なんてこともできます。歩きながらだろうが電車の中だろうが、カフェにいようができるって便利じゃないですか？ 手元におひとついかがでしょう。

追記: 気が向いたのでビデオに撮りました

リモートのWebサーバでWordPressをダウンロード&インストールです。

WordPress Install on Remote on Vimeo.

のんびりやっても3分かかりません。ウルトラマンでもできますね（笑）。

ご無沙汰しております。
突然ですが、「デザイナーでも知っておきたい、日常の作業効率を格段にアップさせるターミナルを使ったファイルやサーバの操作」という長ったらしいタイトルを付けて、必要最低限これぐらい知っておくと大分制作時間の短縮にもなるよ、という謎の会を開催したいと思います（ボクレベルの簡単な操作になります）。

何でこんなことを突然やろうかと言い出したかというと、WebデザイナーになったからといってGUIの操作だけに頼っていたら、その辺を知らないことが「日常的に（時間的な）大きな損をしてるんじゃないかなぁ」と、いろんな人をみていて常々思っていたからですね。「そんなのこうやってれば、すぐ終わるのに…」とかあるんです。

正直、見た目のことばかりで本にはなかなか書けないのでね…。

ということで、「まったくこの辺りのことがわからない」「どういうことができるのか知りたい」「できることなら効率アップを図りたい」という方なんかを対象にしてやってみましょう。そんな難しい話はしません。仕組みから基本操作、そしてこういうこともできるよ、ぐらいまでになると思います。

場所は、こんな時期にどこか借りるのも面倒なのでボクんちで（笑）。
必要なものは、あればノートPCとかとメモ帳ぐらいでしょうか。既にホスティングを借りてるような方は、telnet（今時あんのかな）やSSHでのログインの仕方（idやpasswd）をメモってくるといいと思います（なくても平気、うちのがあるので）。
ちなみに先着10名様ぐらいで締め切りますました。

追記: 参加予定の皆様には数日前にメールを送っておきました。スパム扱いされてると困るのでメールボックスの隅から隅までみてください（笑）。あと、届いてないー！って方はコメントください。

開催概要

日時

2008年12月13日（土） 13:00-17:00　予定

場所（最寄り駅）

ボクんち（地下鉄 表参道駅、もしくは 明治神宮前駅）

会費

もちろん無料

内容　※暫定的にこんな感じ

1. そもそもターミナル操作って？
2. ホスティングサーバの選び方
3. ターミナル操作に必要なもの
4. ログインしてみよう
5. 基本的なターミナル操作のコマンド
6. 知っておくと効率アップな操作
7. Webサーバの.htaccessでできるあれこれ
8. HTMLやCSS、JavaScriptを潰して転送量を少なくする方法

ま、こんな感じですかね。
参加を希望される方は、gmgateway [at] gmail.com までご連絡ください。
※参加を希望される方がある程度人員の把握ができた方がいいと思うので、コメント欄に「いく」とでも書いてもらえると助かります。
※最少催行人員は1名ですが、もう開催は確定しています（現在: 9名かな）。

＃知ってれば、iPhone一個あればどこからでもいじれますよ

追記: 参加予定の皆様には数日前にメールを送っておきました。スパム扱いされてると困るのでメールボックスの隅から隅までみてください（笑）。あと、届いてないー！って方はコメントください。