Webデザイナーの為の「本当は怖くない」“黒い画面”入門 Part.01

Webデザイナーの皆さま。プログラマーがよく使ってる文字が一杯出てる黒い背景のソフト。あれって取っ付き辛くないですか?

ターミナル — zsh — 80×24

Web業界ではアレをデザイナー、プログラマー間で“黒い画面”って呼んでませんか?

デザイナー「ページのこの部分を変更したいんですが・・・大変ですかね?」

プログラマー「うーん。簡単なんですが、“黒い画面”で変更する必要があるんですよね。」

デザイナー「あぁ、じゃあ辞めておきます・・・。」

最近、デザイナーの@machidaさんが下記のようなことを言っていました。

「仕事が無いからFlashを勉強しようというWebデザイナーが多いけど、Flashが使えるWebデザイナーはもう沢山いる。“黒い画面”が使えた方がエンジニアからの仕事が増えるし、Webの仕組みが分かるので良いのになあ。」

それじゃあ、ということでWebデザイナーの為の「本当は怖くない」“黒い画面”入門を書いてみたいと思います。

このシリーズの目的は下記の3つです。

  • Webデザイナーの方に“黒い画面”は怖くないことを知ってもらう。
  • “黒い画面”用のフリーソフトが使えるようになる。
  • 簡単な”作業の自動化”ができるようになる。

とにかく使ってみる

取っ付き辛く見える“黒い画面”ですが、慣れの問題で使っているうちに単なるツールであることが分かると思います。とにかく使ってみましょう。

ユーティリティ

Macではターミナル(別名“黒い画面”)が最初から入っています。”アプリケーション” > “ユーティリティ”の中にあるので立ち上げてみましょう。

ターミナル — bash — 80×24

味も素っ気も無いウィンドウが開きました。ここに何か文字を打ち込むことでプログラムを実行します。

QS_20091115-084308_044.jpg (302×251)

「うわっ・・・私の黒い画面、白すぎ・・・?」

と思った方。慌てないでください。Macの“黒い画面”はデフォルトが何と白いのです。”メニュー”の”環境設定”から色やフォントの変更が出来ます。また、色々と最初からテーマが入っていますので好きなようにカスタマイズしてください。例えばHomebrewというテーマは黒背景に緑文字。マトリックスみたいで雰囲気が出ます。今後、このシリーズではHomebrewテーマでやっていきましょう。何事も形からです!(Homebrewは自家醸造酒、あるいは自家製のものという意味です。)

設定

ターミナル — bash — 80×24

FinderなどのGUIアプリではプログラムのアイコンをダブルクリックすることで実行しますが、“黒い画面”ではプログラムのファイル名を入力することで実行します。

Finder

では“黒い画面”でよく使うプログラムを見てみましょう。Finderで”メニュー”の”移動” > “フォルダへ移動” で “/bin” と打ってください。

bin

/binのフォルダが開いて中に色々入っているのがわかります。これらは全て黒い画面から使えるプログラムです。こんな分けわからないプログラムが自分のMacに入っていたなんて知ってました?普段私たちが見ているのは/Applicationsや/Users/komagata/Desktopや/Users/komagata/Documentsなんですよね。/binなんて場所の中がこんなグロいことになっていたとは・・・。

最初のプログラムls

まずlsというプログラムを使ってみましょう。先程言ったように“黒い画面”ではプログラムのファイル名を打ち込むことで実行します。

bin

lsは/binの中にあるので、正式なファイル名(フルパス)は/bin/lsです。

$ /bin/ls

とエンターキーを黒い画面に打ってみましょう。(“黒い画面”に実際に入力するのは$以降の文字です。通常、$から始まっているものはそれ以降を黒い画面に打ち込むということを表しています。)

ターミナル — bash — 80×24

DesktopやDocumentsなど色々出たと思います。lsはLiStの略でファイルやディレクトリの一覧を表示するプログラムです。“黒い画面”はユーザー毎のファイルを置いておくディレクトリ(ホームディレクトリといいます)にいる状態で始まるので、その中にあるファイルやディレクトリが表示されているわけです。

komagata

しかし、Finderで自分のホームディレクトリを見たときとちょっと違います。Finderでは”書類”とか”ムービー”というフォルダがあるのにlsでは見当たりません。これは、Mac OS Xがきちんと日本語化されているため、FinderではDocumentsを”書類”、Moviesを”ムービー”と表示してくれるのです。OSをEnglishの設定にすればFinderでもDocuments、Moviesと表示されます。

二つ目のプログラムpwd

/binフォルダに話題を戻して、別のプログラムも使ってみましょう。

pwdというプログラムが見えるのでこれを使ってみましょう。

bin

黒い画面にまた/bin/pwdと打ち込んで見て下さい。(エンターキーで実行することになります)

ターミナル — bash — 80×24

/Users/komagata

と表示されました。

pwdはPrint Working Directoryの略で現在いるディレクトリのパスを表示してくれます。ワーキングディレクトリとは現在作業してるディレクトリという意味ですね。(Present Working Directory説も有り)

komagataのところはそれぞれみなさんのユーザー名になっていると思います。さっき言ったように“黒い画面”では最初はユーザーのホームディレクトリというスタート地点から始まるのでこうなっています。

/binには他にも沢山プログラムが入っていまが、全部の使い方を覚える必要はありません。というか僕も使ったこと無いものが結構あります。Macに入ってるソフトを全部使う必要が無いように、黒い画面でも必要なものだけ使えばいいのです。

Part.01はこんなところで失礼します。

まとめ

  • Webデザイナーも黒い画面を覚えると良い事が沢山ある。
  • 黒い画面は「慣れ」。
  • 黒い画面ではファイル名を打ち込むことでプログラムを実行する。
  • /binにプログラムがいっぱいある。