dont-be-afraid-kuroigamen

Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧

Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズも最終回です。今回はそもそも”黒い画面”とは何なのかを紹介します。

“黒い画面”とは何か

“黒い画面”とは何か。そりゃあもちろん今まで使ってきたコレ。

ユーティリティ

ターミナル.appのことでしょう。

しかし、実は今まで”黒い画面”として使ってきた物は大きく二つのソフトから成り立っています。これは歴史的経緯を説明した方が分り易いと思います。

Terminal(ターミナル)

Part.01で説明したように昔は大きな”ホストコンピューター”に多数の”端末”を接続して使っていました。

301130361_1e5f52d3d9_b

“端末”にはディスプレイとキーボードが付いています。”端末”のキーボードで文字を打つと、ホストコンピューターに送られ、結果が帰ってきて”端末”のディスプレイに表示されます。

昔のコンピューターは非常に高価だったため、1台の大型コンピューターが処理を行い、単なる入出力装置としての安価な”端末”を複数用意して使いました。

この”端末”、英語ではTerminal(ターミナル)というハードウェアをソフトウェアで模倣(emulate)したものがターミナル.appです。この種類のソフトを正確にはターミナルエミュレーター(Terminal Emulator)と言います。

昔は”ホストコンピューター”と”端末”だったものが、今は端末はソフトウェアになり、ホストと端末が1台のパソコン上で完結しています。(端末で自分自身に接続している)

ターミナルは文字を入力することと結果を表示することしかできません。では今まで使ってきた$マークのアレは何だったのでしょう。

Shell(シェル)

shell-de

$マークを出しているのはshell(シェル)という種類のソフトです。shellは$マークなどのプロンプトを表示してユーザーからの入力を待ち、入力されたファイル名のプログラムを実行し、終了したらまたプロンプトを表示して待ちます。

“黒い画面”の本質であると説明した、”ファイル名を入力するとそれを実行する”という機能はこのshellが行っています。

shellは殻という意味です。複雑なコンピューターを貝殻のようにつつみ、ユーザーとの仲介役をしてくれるためshellという名前なのだと思います。Finderも全く違う物に見えますが、コンピューターを包みこんでユーザーとの仲介役をしてくれるという意味では同じです。FinderのようなGUI(グラフィカルユーザーインターフェース)を持つものは特にグラフィカルシェルと呼びます。

このshellも単なるプログラムに過ぎません。/bin/shというのがそれです。shellを略してshとはやはり略し過ぎですね。

前回スクリプトを実行させる時に使ったshコマンドはこれです。普段は$の後に文字を打ち込んでいましたが、ファイルにまとめてshに渡せば同じ結果になるのは当たり前ですね。

代替ソフト

“黒い画面”は主にTerminal Emulatorとshellの二つで成り立っていると説明しました。両方とも代替ソフトが存在します。

Terminal EmulatorはMacではiTermというソフトが有名です。初期のターミナル.appは貧弱だったのでiTermが良く使われていましたが、現在ではターミナル.appも十分な機能を持つため、殆どのユーザーはデフォルトのターミナル.appを使っていると思います。

shは実はMacのデフォルトのshellではありません。Macで実際に使われているのはshの強化版とも言うべきbashというshellです。

bashの由来

元々shの正式名称はBourne Shellと言います。アメリカのAT&Tベル研究所のSteve Bourneさんが作ったshellなのでBourne Shellです。bashはBourne-Again Shellの略でBourne Shellの全ての機能をカバーしつついくつもの追加機能を付けたshellです。Bourne ShellのBourneとborn again(生まれ変わり)を引っ掛けた駄洒落です。

他にも/binディレクトリにはスクリプトを書くのに強いcsh、cshを機能強化したtcsh、最後のshellを目指して作られたzshなど様々なshellがあります。chsh(CHenge SHellの略)コマンドでデフォルトで使われるshellを変更することができます。

最後に

Webデザイナーの為の「本当は怖くない」”黒い画面”入門はこれで終わりです。どうでしょうか、”黒い画面”は怖くなくなったでしょうか?

このシリーズでお伝えしたかったのは、全体としては呪文か暗号のように見えるものでも、一つ一つの要素をとってみれば、”日本語に訳してみればそのまんま”だったり、”省略しすぎてるだけ”だったり、”それを作ったおっさんの名前”だったり、”昔の名残で”だったり、単純なことに過ぎないということです。

日本語ではDesigner(デザイナー)というとヴィジュアル面だけを担当する人という意味で使われがちですが、本来は設計者という意味合いの強い言葉です。ヴィジュアル面だけをやるならArtist(アーティスト)やIllustrator(イラストレーター)と呼ぶべきでしょう。

建築や家具などの工業製品のデザイナーにはエンジニアリングの基礎知識は必須です。Webデザイナーとは本来ヴィジュアル・システムを含めたWebの設計者であるべきです。

コンシューマー系Webサイトの大半を占める”黒い画面”すなわちUNIX系OSのエッセンスに触れることはWebのエンジニアリングを理解する上での一番の近道です。

これらのエントリーがそういった本当の意味でのWebデザイナーへの足掛かりになれば幸いです。

Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.09 への1件のコメント

Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧

作業の自動化

“黒い画面”での作業は文字を打ち込むだけの単純で厳密な手順なので簡単に自動化できます。

例えば、僕はlokkaというソフトを作っていますが、新しいバージョンをリリースする時に、その時の最新のファイルをダウンロードしてきてzipファイルに固める必要があります。下記のようなコマンドでそれが可能です。

$ git clone git://github.com/komagata/lokka.git lokka
$ zip -r lokka.zip lokka
$ rm -r lokka

gitというコマンドで最新のファイルをlokkaというディレクトリ名でダウンロードしてきて、zipコマンドでzipに圧縮し、元のディレクトリはもう要らないのでrmコマンドで削除しています。

実はこれをそのままファイルに書くだけで自動化が可能です。make-lokka-zipfileという分り易いファイル名に上記コマンドを書きました。catコマンドで確認するとこんな感じです。

$ cat make-lokka-zipfile
git clone git://github.com/komagata/lokka.git lokka
zip -r lokka.zip lokka
rm -r lokka

そのままです。”黒い画面”に打ち込んでいた文字をファイルに書いただけですね。そのファイルを実行するには下記のようにshコマンドに渡します。

$ sh make-lokka-zipfile

ファイルの中に書いたコマンドを順番に実行してくれます。このようにやって欲しいコマンドを順番に書いたファイルをscript(スクリプト)と言います。scriptは演劇などの台本という意味なのでそのままですね。台本通りに”黒い画面”が動いてくれるわけです。phpプログラムの事をphpスクリプトと言ったりすることがありますが、program(プログラム)も予定表・計画表という意味なので殆ど同じ意味です。

ただ一点、shという謎のプログラムにファイルを渡して実行するという書き方がどうも野暮ったいです。lsみたいに自分の書いたスクリプトもコマンドっぽく実行したいところです。

謎のおまじない”シバン”

“黒い画面”にはスクリプトを単体で実行するためにshebang(シバン)という機能があります。

#!/bin/sh
echo hello

上記をecho-helloというファイル名で保存して実行してみてください。

$ chmod u+x echo-hello
$ /Users/komagata/echo-hello
hello

chmodはChenge MODeの略でファイルの権限を変更するコマンドです。echo-helloというファイルにユーザー実行権限(u+x)を追加しています。

shebangとは1行目の最初の2文字

#!

の事です。sharp bangが短くなってshebangとなったそうです。また、アメリカの俗語、the whole shebang(何もかも、一切合切)というのと掛けてるという説もあるそうです。シャープはわかります!が「バン!」って感じなのは日本人にはわかり辛いですね。でも#!の事を日本人は「シャープびっくり」と言ったりするので似たようなもんだと思います。

shebangは何なのかというと、

「”黒い画面”で実行しようとしたファイルの1行目の最初の二文字が#!だったら、その後に書いてあるコマンドに2行目以降の全てを渡す」

という機能です。

ターミナル — vim — 61×20

もう”黒い画面”を作った人がそうなるように作りましたという以外に説明しようがないそのままの機能です。確かに便利ですが、他にやりようは無かったのか疑問です。

このshebangを利用すれば様々なスクリプトを単体で実行できる独自のコマンドにすることができます。

ターミナル — bash — 79×24

phpもスクリプトをphpコマンドに渡すという点では全く同じなのでこうやって独自のスクリプトを作ることが出来ます。

しかし当然、普通のテキストファイルで、もしファイルの一行目最初の2文字が#!だったら、2行目以降を1行目のプログラムに渡して実行しようとします・・・。

ターミナル — bash — 80×24

もちろんfooなどというコマンドは無いのでエラーになります。interpreter(インタプリタ)というのはshやphpのようにスクリプトを実行する種類のプログラムのことです。

PATHを設定する

自分独自のスクリプトはどこに置けばいいのでしょうか。/binや/usr/binはシステムの動作に必要なコマンドを置く場所です。/usr/local/binは全ユーザー(例えばkomagataとmachida)で共有するようなコマンドなら置いても構わないでしょう。今回作ったような自分だけが使うようなスクリプトはホームディレクトリにbinというディレクトリを作ってそこに置く人が多いようです。

$ mkdir bin
$ mv make-lokka-zipfile bin/

置きました。しかし/Users/komagata/binは以前説明したPATHに含まれてないのでいちいちフルパスで打つ必要があって不便です。そこで自分でPATHを設定してみましょう。

$ export PATH=$PATH:~/bin

exportは環境変数を設定するコマンドです。envコマンドの出力結果のように環境変数名と中身を=(イコール)で区切って渡すとその値に設定されます。

~/binというのは妙ですね。これは$HOME/binと同じ意味です。”黒い画面”では$HOMEを~(チルダ)一文字で表すことができます。

環境変数PATHは:(コロン)で区切ってディレクトリ名をつなげたものでした。上記は”今までPATHに設定されてたものに~/binを追加する”という意味になります。

$ echo $PATH
/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin:/Users/komagata/bin

echoで確認するとちゃんと/Users/komagata/binがPATHに追加されているのがわかります。

$ make-lokka-zipfile

これで自分独自のスクリプトがまるでコマンドのように使えるようになりました。便利ですね。

面倒な手順や覚え辛いオプションの組み合わせなどはスクリプトにしてしまいましょう。

作業を自動化して差をつけろ

今回覚えたように”黒い画面”で行う処理は簡単にスクリプトにすることができます。スクリプトを書いておけば2度目は自動的に一瞬で作業が終わるので仕事の効率化に役立ちます。

以前、イベントのサイトを作る仕事がありました。イベントで撮った写真を次の日にはサイトに載せなければいけません。ところがその日のイベントの写真は600枚以上もあったのでとてもPhotoshopで一つ一つ縮小・形式変換していては間に合いません。

そこでImageMagickというソフトのconvertというコマンドを使って、フォルダ内のファイル全てをリサイズして変換するというスクリプトを書いて、数十分で処理を終わらせました。そしてイベントがあるたびにそのスクリプトを実行すればいいようになったのでとても助かりました。

ImageMagickはもちろんhomebrewでインストールできます。

$ brew install imagemagick

このように”黒い画面”は自動化ととても相性がいいのです。

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

Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.08 への3件のコメント

Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧

前回で”黒い画面”用のフリーソフトが使えるようになったので次は”簡単な自動化”が出来るようにファイル操作の基本を覚えてしまいましょう。

ファイルの作成

$ touch foo

touchコマンドは空のファイルを作成します。本来既にあるファイルに触って(touchして)最終更新日を更新するだけのコマンドですが、空ファイルを作るのにも使われます。

ディレクトリの作成

$ mkdir bar

mkdirはMaKe DIRectoryの略でディレクトリを作成します。-pオプションで深い階層を持つディレクトリも一気に作れるのが便利です。

$ mkdir -p foo/bar/buz

ターミナル — bash — 80×24

ファイルのコピー

$ cp foo /tmp

cpはCoPyの略で、そのまんまですがファイルをコピーするコマンドです。上記ではfooファイルを/tmpディレクトリにコピーしています。

$ cp foo bar

ファイル名を指定すればその名前でコピーされます。fooの複製barが出来ました。

$ cp -r foo /tmp

-rオプションを付ければディレクトリを丸ごとコピーできます。

ターミナル — bash — 80×24

-rを付けないと”fooはディレクトリだからコピーできないよ”とエラーが出ています。親切ですね。

ファイルの移動

$ mv foo bar

mvはMoVeの略でそのまんまですが、ファイルを移動するコマンドです。cpと違って元のファイルは無くなってしまうので注意です。また、cpと違ってオプションを付けなくてもディレクトリの移動が可能です。

ファイルの削除

$ rm foo

rmはReMoveの略でファイルを削除するコマンドです。略し過ぎですね。

$ mkdir -p foo/bar/buz
$ rm -r foo

-rオプションを付けるとディレクトリを丸ごと削除してくれます。危ないですね。sudoと組み合わせればどんな物も削除出来てしまうので注意してください。下記は絶対に実行してはいけません。

$ sudo rm -rf / # 絶対に実行してはいけない

ファイルの表示

$ cat /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1     localhost
255.255.255.255     broadcasthost
::1             localhost
fe80::1%lo0     localhost

catはconCATenateの略でファイルの中身を表示するコマンドです。concatenateは連結させるという意味で本来は引数に渡した二つのファイルを繋げて表示するコマンドですが、一つしかファイルを渡さなければ単に中身を表示するのでその用途の方で主に使われている悲しいコマンドです。lsやrmやcatのような基本的なコマンドは問答無用で覚えさせられることが多いので「cat?何で猫がファイルを表示するんだろう?」と思う人は多い(ハズ)です。

ファイルの編集は?

ファイルの作成、コピー、移動、削除と来たら編集を何故やらないの?と思うかもしれません。”黒い画面”にも当然テキストエディターソフトがあります。代表的なものはviとemacsです。両方とも使い方に癖があるため”黒い画面って怖い”と思われる原因になっている気がするのでこのシリーズでは説明しません。

さあこれでファイル操作がひと通り出来るようになりました。普段Finderでやっていることもなるべく”黒い画面”でやるようにしてみてください。

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

Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.07 への3件のコメント

Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧

Homebrew — MacPorts driving you to drink? Try Homebrew!

今回はHomebrewを導入してフリーソフトを簡単にインストールできるようにしましょう。

Package Manager(パッケージマネージャー)の必要性

“黒い画面”では以前紹介したlsやcurlなど、単機能のコマンドを組み合わせることで複雑な処理を実現します。一つのソフトが複数のソフトを利用するため、”ソフトAをアップデートしたらソフトB、ソフトCが動かなくなった”という状況が発生します。”ソフトB 5.0にはソフトA 2.0以上が必要”といった関係があるためです。これをソフトの依存関係と言います。

無数のソフトの依存関係を手動で管理するのは面倒過ぎるのでPackage Manager(パッケージマネージャー)と呼ばれる種類のソフトがよく使われます。Package Managerは”そのソフトにどのソフトのバージョン何以上が必要か”、”今インストールされているソフトは何か”といった情報を持っているため、必要に応じてソフトを勝手にダウンロードしてきてインストールしてくれます。便利過ぎますね。今回は最近Macで人気のあるPackage ManagerのHomebrewを使ってみます。(“黒い画面”のテーマ名”Homebrew”とたまたま同名ですね。)

Xcodeのインストール

HomebrewにはMacのDVDについてくるXcodeというソフトが必要です。Xcode自体は必要無いんですが、これを入れると”黒い画面”用ソフトが沢山インストールされます。それらがHomebrewの動作に必要なのです。また”黒い画面”を使っていく上であると便利なソフトが沢山あるのでMacをインストールしたら問答無用でインストールしましょう。OS付属のDVDにも入っていますが、最新版が下記からインストールできます。無料のApple Developer登録が必要なので適当に登録してください。

Mac Dev Center – Apple Developer

Mac Dev Center - Apple Developer

何故かiOS SDKというのも付いてきます。要らないですが仕方ないですね。iOSはiPhoneやiPadのOSです。SDKはSoftware Development Kitの略で開発キットの意味ですね。

Homebrewのインストール

Homebrewのインストール方法は斬新です。

$ sudo chown -R `whoami` /usr/local

まずは/usr/localディレクトリの所有者を自分のユーザーに変更します。

所有者って?

全てのファイル・ディレクトリにはOwner(所有者)とGroup(グループ)があります。どのユーザーは書きこむことが出来る、どのグループは読み込むことができるといった権限の設定が細かくできます。この辺の事を詳しく説明すると”怖くなる”ので本シリーズでは説明しませんよ。

sudoは引数に渡したコマンドを管理者権限で実行するコマンドです。suはSuper Userの略で管理者の事です。Super Userで実行するからsudoです。sudoは起動に必要なファイルを消すとか致命的なコマンドでも実行できてしまうので注意して扱いましょう。

chownはCHange OwNerの略でファイルやディレクトリの所有者を変更するコマンドです。所有者のユーザー名と変更したいファイル・ディレクトリ名を指定します。-Rは指定したディレクトリより下全部を変更するというオプションです。

whoamiは自分のユーザー名を表示するコマンドです。Who am I?(私は誰?)なのでそのままですね。

`(バッククォート)は”黒い画面”に備わってる特殊な機能です。バッククォートで文字を囲うとその文字をコマンドとして実行して、出力結果に置き換えます。

$ ls `pwd`

つまり上記を実行すると、 バッククォートで囲われたpwdコマンドが実行され、その出力結果である/Users/komagataに置き換わるので最終的には

$ ls /Users/komagata

と入力したのと同じことになります。

最初のコマンドをもう一度見直してみましょう。

$ sudo chown -R `whoami` /usr/local

僕の環境で言えば、”/usr/local以下全てのディレクトリの所有者をkomagataに変更する”という動作になります。

これならばみなさんそれぞれの環境、例えばユーザー名がmachidaだったとしても同じ1行のコマンドで実行できて便利というわけです。”黒い画面”は単機能のコマンドを組み合わせて複雑な動作をするという意味がおわかりいただけたでしょうか。

これから/usr/local以下に色々入れるのでディレクトリの所有者を自分に変更しました。次でHomebrewを実際にインストールします。

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

上記はrubyコマンドとcurlコマンドを組み合わせています。上記のURLにはrubyプログラムでHomebrewのインストールプログラムが書かれています。それをcurlで取ってきてrubyで実行しているわけです。(curlの-f -s -S -Lオプションをそれぞれmanで調べてみましょう。)

これならば1行”黒い画面”にコピペすればインストールが完了するのでユーザーは簡単ですし、ソフトの提供側もインストールプログラムに変更があっても上記のファイルの中身を変えればユーザーに気付かれずに対応できます。

Homebrewを使ってみる

Homebrewをインストールすると/usr/local/binにbrewというコマンドが増えます。ではtreeというフリーソフトをインストールしてみましょう。

$ brew search tree
git-subtree  pstree       quicktree    tree         treeline

brewはsearch, install, uninstallといったサブコマンドと言われる引数を最初に指定します。サブコマンド方式は一般的なコマンドのオプションとは少し違いますが、色々なことを一つのコマンドでやる場合に覚えやすくなるという利点があります。上記はtreeという文字を含むソフトの一覧を表示しています。

僕の知らないコマンドも沢山あります。目的のコマンドであるtreeもちゃんと表示されていますね。

$ brew install tree
==> Downloading ftp://mama.indstate.edu/linux/tree/tree-1.5.3.tgz
File already downloaded and cached to /Users/komagata/Library/Caches/Homebrew
==> /usr/bin/cc -O3 -march=core2 -msse4.1 -w -pipe -o tree tree.c strverscmp.c
/usr/local/Cellar/tree/1.5.3: 4 files, 88K, built in 2 seconds

brew install ソフト名でダウンロード・インストールが完了します。treeは小さなソフトなので一瞬で終わりました。便利ですね。

ターミナル — bash — 80×24

ちなみにtreeはこういうコマンドです。大体わかりますよね?

要らなくなったらbrew uninstall ソフト名で綺麗に消えるので安心です。

$ brew uninstall tree

現状Homebrewは1356個のソフトに対応しているそうです。treeのような小物からmysqlのような大物まで沢山あります。是非色々とsearchしてinstallしてみてください。

curlに似たコマンド

Macではダウンロードにcurlがよく使われますが、Linuxではwgetというコマンドが同じ用途によく使われます。”w” “g” “e” “t”というアルファベットは全て左手だけでタイプ出来るので個人的には好きです。

これももちろんbrewでインストールできます。

$ brew install wget

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

Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.06 への5件のコメント

Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧

今回は”黒い画面”で使える便利コマンドを紹介していきます。

ネットから簡単ダウンロード”cURL”

ネットからファイルを簡単にダウンロードできるcurl(シーユーアールエル)というコマンドがあります。”Client for URLs”の略だそうです。

$ curl http://example.com
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>Example Web Page</TITLE>
</HEAD>
<body> 
<p>You have reached this web page by typing "example.com",
"example.net","example.org&quot
  or "example.edu" into your web browser.</p>
<p>These domain names are reserved for use in documentation and are not available
  for registration. See <a href="http://www.rfc-editor.org/rfc/rfc2606.txt">RFC
  2606</a>, Section 3.</p>
</BODY>
</HTML>

curlは引数にURLを指定するとネットから取ってきて表示してくれます。ブラウザからhttp://example.comにアクセスしてソースを表示したときと同じものが表示されているはずです。

$ curl http://example.com -o foo.html

ターミナル — bash — 80×24

curlは-oオプションにファイル名を渡すと内容をそのファイル名で保存してくれます。他のソフトをインストールするときも、curlでこうやってダウンロードしてくると楽ですね。

とにかく開くコマンド”open”

openはその名の通り開くコマンドです。

$ open スタックについて.pdf
$ open http://www.facebook.com
$ open .

普通のファイルはMacで関連付けられてるソフトで開きます。URLは標準のブラウザで開きます。最後のはよく使うんですが、今いるディレクトリをFinderで開きます。.(ドット)は今いるディレクトリの意味でしたよね。

ニコニコ動画でお馴染みのあの声”SayKana”

あの声を使えるSayKanaというフリーソフトがあります。下記のページからダウンロード・インストールしてください。

SayKana – Mac用音声合成プログラム

/usr/local/bin/saykanaというコマンドがインストールされます。以前PATHを確認しましたが、/usr/local/binもPATHに最初から含まれているのでディレクトリ名は省略して実行できます。

$ saykana くろいがめんわこわくないよ

saykanaは引数にひらがな・カタカナを指定すると日本語音声で読み上げてくれる音声合成ソフトです。

$ saykana -s 70 ゆっくりよみあげることもできるよ

-sオプションで読み上げるスピードを調節することができます。(100がデフォルト)

$ saykana -s 70 くろいがめんわこわくないよ -o dont-be-afraid.aiff

-oオプションでAIFF(音声ファイル)として保存できます。-hでヘルプが表示されるので他にも色々試してみましょう。

saykanaの元ネタ

Macにはsayという英語の音声合成ソフトも入っています。saykanaはそれを意識して作られています。

$ say holy cow

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

Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.05 への1件のコメント

Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧

引数とオプションについて詳しく

今回は前回触りだけ説明した引数とオプションについてしっかり見ていきたいと思います。これが出来れば”黒い画面”用のフリーソフトを使う準備完了です。

引数はコマンドに渡す文字列です。コマンドの後にスペースを一個いれて文字を打ち込むんでした。

$ echo hello

実は引数は複数渡すことができます。スペースで区切って3つ引数を渡してみましょう

$ echo hello my friend
hello my friend

はたから見ると単語を4つ書いているだけに見えますが、実際はechoコマンドに3つの引数を渡しているだけだということが分かると思います。

引数をどう処理してくれるのかはコマンドによって違います。echoは引数をスペースでつなげて表示します。(そういう風にechoの作者が作っただけ)

オプションとは

lsは-aという引数を渡すとドットファイルも表示するんでした。lsはファイルやディレクトリのパスを渡すことでその一覧を見ることができます。

$ ls /bin

-aとパスの両方を渡すこともできます。

$ ls -a /bin

引数の中で特に-(ハイフン)から始まっているものをオプションといいます。引数やオプションにはこうあるべきというガイドラインはありますが、必ずそれに従わないといけないわけではありません。ガイドラインが出来る前の古いコマンドは従っていませんし、無視しているフリーダムなコマンドもあります。

オプションのガイドライン

-(ハイフン)のあとアルファベット一文字がオプションです。オプションは複数指定できます。

$ command -a -b -c foo

オプションに文字を渡すことが出来るものがあります。(ファイルを指定する-fオプションがあった場合)

$ command -f /tmp/foo

アルファベット一文字だと覚えにくいので、–(ハイフン二つ)から始まる同じ機能を持つオプションがある場合があります。ハイフン一つのものをショートネームオプション(short name option)、ハイフン二つのものをロングネームオプション(long name option)と呼びます。

$ command --name

ロングネームオプションに文字を渡すことが出来るものがあります。ロングネームオプションに文字を渡す場合=(イコール)を付けます。下記の2行は同じ動作をします。

$ command -f /tmp/foo
$ command --file=/tmp/foo

ショートネームオプションとロングネームオプションは混在させることができます。

$ command -a --file=/tmp/foo bar

-hもしくは–helpでそのコマンドの使い方が表示されます。Usageは利用法という意味です。

$ command --help
Usage: command [options] [arguments]
  -a    append mode
  -f    target file

-vもしくは–versionでそのコマンドのバージョン番号が表示されます。

$ command --version
command 1.2.3

lsやcd、echoなどは歴史の古いコマンドなのであまりこのガイドラインに従っていません。新しいコマンドを見つけた時はとりあえず-hか–helpで使い方を調べましょう。

マニュアルで使い方を知る

-hなどで表示されるヘルプは簡易的なものなので、もっと詳しく知りたい場合はmanコマンドを使いましょう。manはmanualの略でそのままの意味です。コマンド名を渡すと、そのコマンドのマニュアルが存在する場合はマニュアルを表示してくれます。

$ man ls

ターミナル — less — 80×24

英語ですね・・・。日本語のmanもありますが、ググった方が早いかもしれません。manualは矢印キーでスクロールし、qキーで終了できます。SYNOPSISは概要、DESCRIPTIONは説明です。

マニュアル読め

the-fucking-manual

コンピューターコミュニティには古くから自分で調べる努力をせず簡単に人に聞く人に対して、RTFM(READ THE F**ING MANUAL!) 「マニュアル読め××野郎!」という厳しい言葉があります。今風に言えば「ググレカス」ですね。

gugurekasu

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

Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.04 への6件のコメント

Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧

前回、/bin以外にも$PATHを覗いてみたら色々とディレクトリが設定されてました。その中でも頻繁に使うコマンドが沢山入っている/usr/binを見てみましょう。

bin

cdというコマンドが見えます。これを使ってみましょう。

頻繁に使うコマンドcd

前回見たように$PATHに入ってるディレクトリはディレクトリ名を省略して実行できるんでしたね。また、コマンドには文字を渡して実行できることも学びました。

$ cd /bin

cdはChange Directoryの略で引数に与えたディレクトリに現在のワーキングディレクトリを変更するコマンドです。要はディレクトリを移動するコマンドです。Finderでフォルダをダブルクリックするのと同じと思って貰えればOKです。

何も表示されないので本当に移動できたのかわかりませんね。pwdで確認してみましょう。

$ pwd
/bin

ターミナル — bash — 80×24

/binと表示されました。これまでは/Users/komagataだったのが/binに移動してます。ではここでlsしてみましょう

$ ls

ターミナル — bash — 80×24

沢山出ました。lsコマンドは何も文字を渡さない場合は現在いるディレクトリ(カレントワーキングディレクトリといいます)のファイル一覧を表示します。今は/binの中のファイル一覧が表示されているわけです。

豆知識

cdが成功したのに何も表示されないのでアレ?と思ってしまいますね。”黒い画面”では成功した場合は何も表示せず、失敗した場合には色々表示するのが普通です。

“黒い画面”では沢山のコマンドを組み合わせて使うので、一つ一つのコマンドがいちいち成功するたびに何かを表示していたら画面が文字で埋まって本当に知りたい情報が分からなくなってしまいます。

コマンドを絶対にそう作らなければならないという訳ではわりませんが、「問題が無ければ黙っていろ」そういう文化があります。

パソコン内の探索

cdとlsさえあればパソコンの中にどんなファイルがあるのか見て回ることができます。/binや/usr/bin以外にも適当なディレクトリにcdしてlsしてみてください。cdやlsすることでパソコンが壊れることは無いので安心してください。

相対パス指定

“黒い画面”では”今いる場所(カレントワーキングディレクトリ)からみて一つ上のディレクトリ”や”今いる場所からみてfoo/barというディレクトリ”といった相対的な指定が出来ます。

..(ドット二つ)が一つ上のディレクトリ、.(ドット一つ)が今いるディレクトリ、foo/barは今いる場所から見てfoo/barというディレクトリ(先頭が/から始まるかどうかで決まります)という意味です。

これはhtmlやcssでも画像などを指定する時使うので分かると思います。../images/logo.pngとか書きますよね?

これは実際にフォルダとして見ることが出来ます。/binに移動して、lsに-aを引数として渡して実行してみてください。

$ cd /bin
$ ls -a

ターミナル — bash — 80×24

lsに渡した-aという引数はオプションといって、コマンドにデフォルトとはちょっと違う動作をして欲しい時に渡します。

lsの-aは.(ドット)から始まる名前のファイルやディレクトリを表示するオプションです。つまり、デフォルトでは.hogeや.fugaというファイルを作っても見えないのです。.も..もドットから始まるファイルには違いないのでオプション無しでlsした場合は表示されません。

ホームディレクトリでls -aしてみてください。いつもFinderから見ていたフォルダに得体のしれないドットから始まる謎のファイルがいくつもあるはずです。これらドットから始まるファイルを”隠しファイル”または”ドットファイル”と言います。ホームディレクトリにあるコイツらは後々正体を小一時間ばかり問い詰めることにしましょう。

ターミナル — bash — 80×24

一個上のディレクトリ(..)も単なるディレクトリであるということが分かりました。ということは二つ上のディレクトリに移動したい場合は下記のようにできるということです。

$ cd ../..

三つ上のディレクトリに移動したい場合はこうです。

$ cd ../../..

komagataのホームディレクトリからmachidaのホームディレクトリにあるDocumentsディレクトリに移動する場合はこうです。

$ cd ../machida/Documents

軽く頭が混乱してきますね。今自分がどこのディレクトリにいるかはpwdで確認できますが、常に自分の頭の中で意識しておく必要があります。

Macのディレクトリ構造

パソコン内が探索出来るようになったのでMacのディレクトリ構成の概要を見てみましょう。(主要なものだけ説明します)

/              -- ルートディレクトリ
 Applications/ -- GUIアプリ置き場
 Users/        -- ユーザー毎のディレクトリが置かれる
  komagata/    -- ユーザー毎のディレクトリ(人によって違います)
   Documents/  -- 書類置き場
   Movies/     -- 動画置場
  machida/
 bin/          -- 最低限必要なコマンド置き場
 sbin/         -- システム管理者が使うコマンド置き場
 etc/          -- etcetera(エトセトラ)の略で種々のものという意味。現在は実質設定ファイル置き場に使われてる。
 tmp/          -- temporary(テンポラリー)の略で一時的なという意味。再起動したら消えちゃってもいいような一時的なファイルの置き場所。
 usr/          -- userの略。元々は現在のUsersのような用途の為にあったが、システムの起動に必要なもの以外のファイル置き場程度の用途になってしまった。
  bin/         -- システムの起動に必要でないコマンド置き場
  sbin/        -- システムの起動に必要でない管理者用コマンド置き場
  local/       -- このコンピューターのみで使うプログラム置き場

一番上の階層(/)のことをルートディレクトリと言います。rootとは木の根っこのことです。/を頂点として複数のディレクトリやファイルがぶら下がっている構造が木を逆さまに見たときに似ているからです。同じように、こういう階層構造全体の事を木という意味のツリー(tree)と言います。

unix-tree

大文字から始まっているものと小文字から始まっているものがありますが、これはMac OS XがMac OSとUNIXという二つの先祖を持つという歴史があるからです。Mac OSでは大文字から始まるディレクトリ名が使われていました。UNIXは小文字のディレクトリ名が使われていました。Mac OS XからベースはUNIXになりましたが、急に今まであった大文字のディレクトリが無くなると既存のユーザーが困るのでこのように共存しています。/homeディレクトリはUNIXでは/Usersと全く同じ用途に使われるのでMac OS Xでは/homeは/Usersの単なるショートカット(シンボリックリンクと言います)になっています。二つの祖先を上手く共存させるための涙ぐましい努力の後ですね。

cdで移動してlsで一覧するという流れがつかめたでしょうか。Part.03はこのへんで失礼します。

まとめ

  • cdでディレクトリを移動できる
  • 相対パスというものがある
  • 普段は見えないドットファイルというものがある
  • 自分の現在位置を確認しながらパソコン内を探索してみよう

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

Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.03 への4件のコメント

Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧

今回も/binの中のプログラムを使ってみることから始めましょう。

三つ目のプログラムecho

/binの中にechoというプログラムがあったので使ってみましょう。

$ /bin/echo hello

/bin/echoの後にスペースを一個入れて、その後に適当な文字を入力してみてください。その文字が画面に表示されます。

ターミナル — bash — 80×24

“黒い画面”ではプログラムのファイル名を入力することでプログラムを実行しますが、その後ろにスペースを空けて文字を入れると、そのプログラムに文字を渡して実行することになります。この例ではhelloやheyという文字を/bin/echoに渡して実行していることになります。

このプログラムに渡す文字のことを引数(ひきすう)と言います。”引用する数”という意味でしょうか?英語ではargument(アーギュメント)といって、数学の用語だそうです。僕の記憶にはありませんが、高校とかで習ったかもしれません。

echo(エコー)は反響ややまびこという意味です。echoは引数として与えた文字をそのまま画面に表示するプログラムです。渡した文字を表示するだけのこんなプログラム何の役に立つんでしょう?

便利な仕組みPATHについて

前回、”黒い画面”ではファイル名を入力することでプログラムを実行すると言いました。/bin/lsとか/bin/pwdとか。しかし、これでは凄く深いディレクトリにあるプログラムを実行するのが面倒臭くて仕方がありません。

/Users/komagata/Documents/hoge/fuga/piyo/ls

こんな場所にlsがあったら面倒ですよね。試しに上記のようなディレクトリをFinderで作ってそこにlsをコピーしてみてください。問題無く実行できますが、入力するのがかなり面倒なはずです。

そこで”黒い画面”にはPATH(パス)という超便利な機能があります。PATHは”黒い画面”に設定されている項目の一つで、ここにディレクトリ名を設定しておくと、そこの中にあるプログラムはディレクトリ名を省略してファイル名だけで実行できるようになります。

例えば、/binというディレクトリは最初からPATHに設定されているので、今まで/bin/lsと入力してきましたが、実はlsだけでも実行できます。

ターミナル — bash — 80×24

pwdもechoも同じです。お気を悪くなさらないでください。PATHは飽くまで便利機能であって、”黒い画面”は所詮はプログラムのファイル名を打ち込んでいるだけなんだということをお知らせしたかったのです。

PATHのお陰で見た目上コンピューターに正にCommand(指令)を送っているように見えますよね。「一覧(list)を表示しろ!」みたいに。

PATHには他にどんなディレクトリが設定されているんでしょう。これは先程のechoで見ることが出来ます。

$ echo $PATH

と打ってみてください。

ターミナル — bash — 80×24

いくつかのディレクトリ名が”:”(コロン)で区切られて出てきたと思います。この:で区切られた一つ一つが全てPATHに設定されたディレクトリです。/binもちゃんとありますね。このディレクトリの中にあるプログラムはディレクトリ名を省略して打つことができます。

その前に$PATHの$ですがこれは何でしょう。echoは渡した引数を表示してくれるコマンドでした。だったら$PATHと表示されなければおかしいはずですよね。これは”黒い画面”に”$から始まる文字はそういう名前の設定項目の中身を表示する”という機能があるためです。echoも役に立ちましたね。

$PATHのように中身を変更できるものを変数(へんすう)と言います。英語ではvariableで変化するものという意味です。$PATH以外にもユーザー名が入ってる$USER、そのユーザーのホームディレクトリが入っている$HOMEなど、色々な変数が”黒い画面”では使われています。

ターミナル — bash — 80×24

環境変数

“黒い画面”で最初から設定されている変数のことを”環境変数”(environment variable)と言います。これらの変数には各種コマンドの動作に影響を与えるものが沢山あります(PATHもそうでした)。コマンドの実行時に影響を与える周囲の環境といったニュアンスなので環境変数というのだと思います。env(environmentの略)コマンドで環境変数の一覧を見ることが出来ます。一行に一つ、変数名と中身が=(イコール)を挟んだ形で表示されます。PATHもちゃんとありますね。他のものも$PATHと同様に名前の先頭に$を付けてechoコマンドで中身を出力することができます。

ターミナル — bash — 80×24

ターミナル — bash — 80×24

“黒い画面”は自由に文字を打ち込んで良いように見えますが、結局はプログラムのファイル名を打ち込んでいるだけです。$PATHを見て、そこに書いてあるディレクトリにもその打ち込んだ文字と同じファイル名のプログラムがなければエラー。ただそれだけです。(ドアラというファイルはどのディレクトリにも無いようですね・・・)

まだPart.02ですが、”黒い画面”の基本的な考え方はこれに尽きます。後はこれの単なる応用だと考えてください。

それではPart.02はこの辺で失礼します。

まとめ

  • プログラムに文字を渡して実行することができる。
  • PATHに設定されてるディレクトリは省略できる。
  • 何かの設定を入れておける変数というものがある。

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

Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.02 への2件のコメント

Webデザイナーの為の「本当は怖くない」”黒い画面”入門シリーズ一覧

komagataです。

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

ターミナル — zsh — 80×24

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

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

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

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

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

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

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

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

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

とにかく使ってみる

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

ユーティリティ

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

ターミナル — bash — 80×24

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

ホスト名って何?

ホスト名(host name)はコンピューターの名前です。host(ホスト)は”お客をもてなす人”という意味があります。そこから、ネットワークを形成し、複数の端末からの要求を処理する大型コンピューターをホストコンピューターと昔は呼んでいました。今ではパソコンは全てそういった機能を持っているのでパソコン=ホストと考えて問題ありません。

$(ドルマーク)これは何?

$までの部分をprompt(プロンプト)と言います。promptは”促すもの”という意味があります。「ここに入力してください!」と促す為のマークです。$自身を含めて自由にカスタマイズ出来るただの目印ですが、空にしてみるとものすごく分かり辛くなるのでpromptのありがたみがよくわかります。

QS_20091115-084308_044.jpg (302×251)

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

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

設定

ターミナル — bash — 80×24

何で黒背景に緑文字なのか

何故昔のパソコンやオシロスコープは緑文字なんでしょう。どうやら緑が目に良いと考えられていた為、白黒のところをブラウン管に緑の蛍光材を塗って緑色にしていたようです。(蛍光材にはグリーン、オレンジ、白があり、グリーンの方が先に開発されたので入手が容易だったという事情もあるみたいです。via @emutyworksさん)実際は色よりもコントラストが目に影響を与えるようです。また、現在主流の液晶ディスプレイでは基本発光しているところを液晶に電圧をかけて遮ることで色を出しているので白が一番省電力だそうです。

old-computer

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

Finder

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

bin

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

コマンド?ディレクトリ?

プログラムを”コマンド”と言ったりしますが同じ意味です。またフォルダのことをディレクトリ(directory)と言う場合もあります。ディレクトリは名簿という意味です。(元々はディレクトリでしたが、Windows95からMicrosoftが取っ付き易いようにフォルダという名称を使い始めました。)

最初のプログラム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と表示されます。

binディレクトリのbinって何?

binはbinary(バイナリー)の略です。binaryには”対になった物”という意味があります。コンピューターのCPUが実際に実行するプログラムの中身は0と1だけになります。そこから、実行できるプログラムのことをbinaryファイルと言います。lsはbinaryファイルです。昔、二手に別れたペンギンの夫婦を操ってゴールを目指すバイナリーランドというファミコンゲームがありましたが、正にそのバイナリーです。

10067636811_s

二つ目のプログラム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にプログラムがいっぱいある。

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

Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.01 への10件のコメント