Webデザイナーの為の「本当は怖くない」“黒い画面”入門 Part.01
Webデザイナーの為の「本当は怖くない」“黒い画面”入門シリーズ一覧
komagataです。
Webデザイナーの皆さま。プログラマーがよく使ってる文字が一杯出てる黒い背景のソフト。あれって取っ付き辛くないですか？
Web業界ではアレをデザイナー、プログラマー間で“黒い画面”って呼んでませんか？
デザイナー「ページのこの部分を変更したいんですが・・・大変ですかね？」
プログラマー「うーん。簡単なんですが、“黒い画面”で変更する必要があるんですよね。」
デザイナー「あぁ、じゃあ辞めておきます・・・。」
最近、デザイナーの@machidaさんが下記のようなことを言っていました。
「仕事が無いからFlashを勉強しようというWebデザイナーが多いけど、Flashが使えるWebデザイナーはもう沢山いる。“黒い画面”が使えた方がエンジニアからの仕事が増えるし、Webの仕組みが分かるので良いのになあ。」
それじゃあ、ということでWebデザイナーの為の「本当は怖くない」“黒い画面”入門を書いてみたいと思います。
このシリーズの目的は下記の３つです。
- Webデザイナーの方に“黒い画面”は怖くないことを知ってもらう。
- “黒い画面”用のフリーソフトが使えるようになる。
- 簡単な”作業の自動化”ができるようになる。
とにかく使ってみる
取っ付き辛く見える“黒い画面”ですが、慣れの問題で使っているうちに単なるツールであることが分かると思います。とにかく使ってみましょう。
Macではターミナル(別名“黒い画面”)が最初から入っています。”アプリケーション” > “ユーティリティ”の中にあるので立ち上げてみましょう。
味も素っ気も無いウィンドウが開きました。ここに何か文字を打ち込むことでプログラムを実行します。
ホスト名って何？
ホスト名(host name)はコンピューターの名前です。host(ホスト)は”お客をもてなす人”という意味があります。そこから、ネットワークを形成し、複数の端末からの要求を処理する大型コンピューターをホストコンピューターと昔は呼んでいました。今ではパソコンは全てそういった機能を持っているのでパソコン＝ホストと考えて問題ありません。
$(ドルマーク)これは何？
$までの部分をprompt(プロンプト)と言います。promptは”促すもの”という意味があります。「ここに入力してください！」と促す為のマークです。$自身を含めて自由にカスタマイズ出来るただの目印ですが、空にしてみるとものすごく分かり辛くなるのでpromptのありがたみがよくわかります。
「うわっ・・・私の黒い画面、白すぎ・・・？」
と思った方。慌てないでください。Macの“黒い画面”はデフォルトが何と白いのです。”メニュー”の”環境設定”から色やフォントの変更が出来ます。また、色々と最初からテーマが入っていますので好きなようにカスタマイズしてください。例えばHomebrewというテーマは黒背景に緑文字。マトリックスみたいで雰囲気が出ます。今後、このシリーズではHomebrewテーマでやっていきましょう。何事も形からです！(Homebrewは自家醸造酒、あるいは自家製のものという意味です。)
何で黒背景に緑文字なのか
何故昔のパソコンやオシロスコープは緑文字なんでしょう。どうやら緑が目に良いと考えられていた為、白黒のところをブラウン管に緑の蛍光材を塗って緑色にしていたようです。(蛍光材にはグリーン、オレンジ、白があり、グリーンの方が先に開発されたので入手が容易だったという事情もあるみたいです。via @emutyworksさん)実際は色よりもコントラストが目に影響を与えるようです。また、現在主流の液晶ディスプレイでは基本発光しているところを液晶に電圧をかけて遮ることで色を出しているので白が一番省電力だそうです。
FinderなどのGUIアプリではプログラムのアイコンをダブルクリックすることで実行しますが、“黒い画面”ではプログラムのファイル名を入力することで実行します。
では“黒い画面”でよく使うプログラムを見てみましょう。Finderで”メニュー”の”移動” > “フォルダへ移動” で “/bin” と打ってください。
/binのフォルダが開いて中に色々入っているのがわかります。これらは全て黒い画面から使えるプログラムです。こんな分けわからないプログラムが自分のMacに入っていたなんて知ってました？普段私たちが見ているのは/Applicationsや/Users/komagata/Desktopや/Users/komagata/Documentsなんですよね。/binなんて場所の中がこんなグロいことになっていたとは・・・。
コマンド？ディレクトリ？
プログラムを”コマンド”と言ったりしますが同じ意味です。またフォルダのことをディレクトリ(directory)と言う場合もあります。ディレクトリは名簿という意味です。（元々はディレクトリでしたが、Windows95からMicrosoftが取っ付き易いようにフォルダという名称を使い始めました。）
最初のプログラムls
まずlsというプログラムを使ってみましょう。先程言ったように“黒い画面”ではプログラムのファイル名を打ち込むことで実行します。
lsは/binの中にあるので、正式なファイル名(フルパス)は/bin/lsです。
$ /bin/ls
とエンターキーを黒い画面に打ってみましょう。（“黒い画面”に実際に入力するのは$以降の文字です。通常、$から始まっているものはそれ以降を黒い画面に打ち込むということを表しています。）
DesktopやDocumentsなど色々出たと思います。lsはLiStの略でファイルやディレクトリの一覧を表示するプログラムです。“黒い画面”はユーザー毎のファイルを置いておくディレクトリ(ホームディレクトリといいます)にいる状態で始まるので、その中にあるファイルやディレクトリが表示されているわけです。
しかし、Finderで自分のホームディレクトリを見たときとちょっと違います。Finderでは”書類”とか”ムービー”というフォルダがあるのにlsでは見当たりません。これは、Mac OS Xがきちんと日本語化されているため、FinderではDocumentsを”書類”、Moviesを”ムービー”と表示してくれるのです。OSをEnglishの設定にすればFinderでもDocuments、Moviesと表示されます。
binディレクトリのbinって何？
binはbinary(バイナリー)の略です。binaryには”対になった物”という意味があります。コンピューターのCPUが実際に実行するプログラムの中身は0と1だけになります。そこから、実行できるプログラムのことをbinaryファイルと言います。lsはbinaryファイルです。昔、二手に別れたペンギンの夫婦を操ってゴールを目指すバイナリーランドというファミコンゲームがありましたが、正にそのバイナリーです。
二つ目のプログラムpwd
/binフォルダに話題を戻して、別のプログラムも使ってみましょう。
pwdというプログラムが見えるのでこれを使ってみましょう。
黒い画面にまた/bin/pwdと打ち込んで見て下さい。(エンターキーで実行することになります）
/Users/komagata
と表示されました。
pwdはPrint Working Directoryの略で現在いるディレクトリのパスを表示してくれます。ワーキングディレクトリとは現在作業してるディレクトリという意味ですね。（Present Working Directory説も有り）
komagataのところはそれぞれみなさんのユーザー名になっていると思います。さっき言ったように“黒い画面”では最初はユーザーのホームディレクトリというスタート地点から始まるのでこうなっています。
/binには他にも沢山プログラムが入っていまが、全部の使い方を覚える必要はありません。というか僕も使ったこと無いものが結構あります。Macに入ってるソフトを全部使う必要が無いように、黒い画面でも必要なものだけ使えばいいのです。
Part.01はこんなところで失礼します。
まとめ
- Webデザイナーも黒い画面を覚えると良い事が沢山ある。
- 黒い画面は「慣れ」。
- 黒い画面ではファイル名を打ち込むことでプログラムを実行する。
- /binにプログラムがいっぱいある。