今回から「コマンドライン for デザイナー」と題してお話をしていきます。具体的には、MacでPythonの開発環境を整えるまでを順を追って説明していきます。
- ターミナルって何？
- Homebrewって何？
- pyenvって何？
というのをひとつずつ説明していきます。アーティスト・デザイナー向けの記事ですので、エンジニアには簡単すぎるかと思いますが、クリエイティブ系の人達にもっとCUIに親しんで欲しいということで書いていきます。
各ツールの使い方やコマンドに関する情報は多く見受けられますが、そもそも何なの？便利なの？というところからお話しますので、初心者にも大丈夫かと思います。
本連載を終えた後にはPython2系と3系の開発環境を自由に行き来できるようになっているはずです。これでMayaのスクリプトもBlenderのスクリプトも書けますね！
まずは第一弾、ターミナルの説明から。
(注) 本記事ではわかりやすさを優先させるため、踏み込んだ解説は割愛している箇所があります。はじめの一歩を踏み出してからより詳しい情報に触れると良いでしょう
ターミナルとは
まず最初にターミナルって何ですか？という質問の解答ですが、これは実は簡単でMacにはじめから入っているアプリです。
ターミナルはただのアプリ。この認識は大切です。難しそうなイメージがあるかもしれませんが、何の事はないひとつのアプリなのです。このアプリを使うことで、Macの深い部分にアクセスできたり、手作業では大変な操作を簡単に行うことができます。
このターミナル、俗に黒い画面と恐れられていますが、安心してください。Macのターミナルは初期設定では白い画面です。*1
皆なぜ黒背景にして使ってるかというと見やすいとか、カッコいいとか、そんな理由です。白のままで使ってても機能は全く変わらないのでデフォルトで使っていても大丈夫。
ただ道具は使ってて気持ちの良いもの、触り心地が良いものが一番ですので、気分をノセるためにも黒い画面に設定を変えても良いかもしれません。
どう使うものなのか
まずは起動から。前述の通りターミナルはアプリなので、Spotlightから検索するとヒットします。こんな画面が出てきたと思います。
もちろん、アプリケーションフォルダからアクセスしても構いません。
アプリケーション > ユーティリティ内にあります。
普通のアプリケーション同様、ダブルクリックで開いてみましょう。
CUI(CLI)とは
ターミナル
起動してみました。スクリーンショットの通り、ボタンも何もありません。テキスト入力待ちを示すカーソルがあるだけです。
Macに元から入っている他のアプリと比べてみましょう。
写真
App Store
AppleらしいシンプルなUIですが、ボタンやドロップダウンメニュー、検索エリア、スライダなどがあります。このようにグラフィカルに操作できるUIをGUI(グラフィカルユーザインターフェース)と呼び、テキストを入力することによって操作するUIをCUI(キャラクタユーザインターフェース）またはCLI(コマンドラインインターフェース)と呼びます。
MacやWindowsの登場以降、GUIがコンピュータの操作法として一般的になってきていますが、CUIも成熟した操作方法であり、現在でも十分に学ぶ価値があります。
「黒い（白い）画面、なんか文字いっぱいあるしこわい…」と言って触らないのはもったいないですよ！
CUIのメリット
CUIは文字入力で操作するため、たしかに最初はとっつきにくい印象がありますがバージョンアップや環境変更に強い点が大きなメリットになっています。
開発の現場でよく使われているGitと呼ばれるバージョン管理システム*2を例に簡単に紹介しましょう。
下記はぼくが様々なソフトウェアの初期設定ファイルなどをまとめて保管しているdotfilesというもので、エンジニアには馴染みが深いものです。コンピュータを新しくしたり、初期化したり、別の場所で作業したりするときに、手作業で環境構築をすると時間がかかりすぎるため、オンライン上で集中管理し、必要になったらそれをダウンロードしてきて使うと言ったものになります。
初期設定ファイルは時々で実験したり、やり過ぎて元に戻したりすることが多々あるので、いつでも好きな過去のバージョンに戻れるようバージョン管理システムと言うものを導入しています。
ここではその使い方は説明しませんが、GUIアプリとCUIアプリの画面を見ていくこととしましょう。きっとCUIの良さが伝わることと思います。
GUIアプリ
SourceTree
非エンジニア層に人気があるソフトです。いわゆるデファクトスタンダードになるかと思います。
GitKraken
最近出てきた新進気鋭のGitクライアントソフトです。ダークテーマ*3でカッコいいですね。HTML5技術であるElectronと言うものを使用して作られています。
CUIアプリ
ターミナル
ぼくはMac付属のターミナルではなくiTerm2というソフトを使っているのですが、細かいカスタマイズができるというだけでどちらを利用しても良いでしょう。下記はターミナルのスクリーンショットです。
ここでGUIアプリのふたつ、SourceTreeとGitKrakenを見比べてみましょう。同じものを表示しているのですが、ボタンの位置やアイコン、画面のレイアウトに及ぶまで全部違いますね。
別のアプリなので当然ですが、たとえばこれを人に教える時、「右上の◯◯というボタンを押して…」とか「真ん中の並びの右から2つ目のアイコンを…」など、非常に手間になってきます。スクリーンショットも必要になるでしょう。
また同じソフトを使ってても、バージョンが上がった際レイアウトが変更されてどこに何があるのかわからない…！なんてことはご経験があるんじゃないでしょうか。（MayaとかMayaとか）
そこでCUIアプリです。基本的にテキストのみで操作するため、説明が一意的に定まります。スクリーンショットも不要でしょう。（ぼくのブログでは初学者向けに動画を用意していますが、慣れている方同士だったら不要でしょう）
また、上述のGitクライアントもそうですが、内部的には結局コマンドを実行していてそれを見やすくグラフィカルにしているだけなので、CUIの方が高速であるという点もメリットです。
このように、CUIも捨てたものではないのです。
さあ、次から簡単なコマンドを紹介します。CUIの扉を叩いてみましょう！
コマンドを学んでみよう！
背景
まず要件としてはデスクトップにあるslideフォルダにはプレゼン用のHTML5スライド一式があるものとします。
この中にはフォルダがたくさんあり、その中のHTMLファイルだけ探して同僚にE-Mailするようなケースを考えてみましょう。
サブフォルダがなければ別段難しいことはなく種類でソートすれば良いですが、今回は手作業では面倒そうです。ちなみにフォルダ構成は下記の通りです。
下記フォルダ構成はファイルとディレクトリがいっぱいあるというのを示すだけのものなので読み飛ばしちゃってOKです
.
├── 3dmu.html
├── LICENSE
├── README.md
├── css
│ ├── print
│ │ ├── paper.css
│ │ └── pdf.css
│ ├── reveal.css
│ ├── reveal.min.css
│ └── theme
│ ├── README.md
│ ├── beige.css
│ ├── default.css
│ ├── night.css
│ ├── serif.css
│ ├── simple.css
│ ├── sky.css
│ ├── source
│ │ ├── beige.scss
│ │ ├── default.scss
│ │ ├── night.scss
│ │ ├── serif.scss
│ │ ├── simple.scss
│ │ └── sky.scss
│ └── template
│ ├── mixins.scss
│ ├── settings.scss
│ └── theme.scss
├── grunt.js
├── img
│ ├── add.jpg
│ ├── book.svg
│ ├── branch.jpg
│ ├── commit.jpg
│ ├── files.jpg
│ ├── files.png
│ ├── ng_messy.png
│ ├── ng_number.png
│ └── this_is_git.png
├── index.html
├── js
│ ├── reveal.js
│ └── reveal.min.js
├── lib
│ ├── css
│ │ └── zenburn.css
│ ├── font
│ │ ├── league_gothic-webfont.eot
│ │ ├── league_gothic-webfont.svg
│ │ ├── league_gothic-webfont.ttf
│ │ ├── league_gothic-webfont.woff
│ │ └── league_gothic_license
│ └── js
│ ├── classList.js
│ ├── head.min.js
│ └── html5shiv.js
├── package.json
├── plugin
│ ├── highlight
│ │ └── highlight.js
│ ├── markdown
│ │ ├── markdown.js
│ │ └── showdown.js
│ ├── notes
│ │ ├── notes.html
│ │ └── notes.js
│ ├── notes-server
│ │ ├── client.js
│ │ ├── index.js
│ │ └── notes.html
│ ├── postmessage
│ │ ├── example.html
│ │ └── postmessage.js
│ ├── print-pdf
│ │ └── print-pdf.js
│ ├── remotes
│ │ └── remotes.js
│ └── zoom-js
│ └── zoom.js
└── work
├── mj.ZPR
├── pts.psd
├── screenshot.psd
├── this_is_git.PSD
└── this_is_git.lxo
ファイルを探そう！ findコマンド
Illustrator: 複数のファイルから特定のバージョンで保存されたaiファイルを出力するでも軽く触れましたが、ここではもう少し詳しく見ていきます。
findはファイルやディレクトリを検索するコマンドす。オプションを組み合わせることで様々な検索を行うことができます。
まずは実際に操作している動画をご覧ください。（右に見えるのが検索対象のslideフォルダです)
findコマンドのフォーマットは下記の通りです。
$ find ディレクトリ オプション*4
今回は$ find . -type f -name "*.html"というコマンドを実行しています。*5
頭から見ていきましょう。
findでこれからファインドコマンドを使うことを示しています。- 続く
.は現在のディレクトリ(カレントディレクトリ)を示しています。ここに相対・絶対パスを書くことによって、任意のディレクトリを対象にすることができます。 -type fでファイルのみを対象とすることを示しています。お察しの通り-type dも存在し、こちらはディレクトリのみを対象とします。- 最後に
-name "*.html"で拡張子がhtmlのものを指定しています。*は正規表現に似ていますがワイルドカードと呼ばれるもので、任意の文字列を示しています。
簡単に言えばホニャララ.htmlにマッチするということです。
これでカレントディレクトリ以下のHTMLファイルを再帰的に探すことができます。実行するとターミナルの次の行に結果が表示されるのですが、これをUNIXの世界では標準出力と呼びます。
以下今回の標準出力
./3dmu.html ./index.html ./plugin/notes/notes.html ./plugin/notes-server/notes.html ./plugin/postmessage/example.html
過去の資産を再利用！上下キーでコマンドをさかのぼれる！
コマンドのいいところは再利用できるところです。
↑キー:順にひとつずつ前のコマンドを呼び出す↓キー:順にひとつずつ次のコマンドを呼び出す
便利ですね。
|(パイプ)を使って結果を引き渡そう！
コマンドの便利なところは単体利用だけではなく、次々に結果を渡して加工できる点です。
今回はHTMLを探し出してそれを同僚にメールすることが目的でした。ターミナルをマウスでドラッグしてコピー、メーラーにペーストしても良いですが、せっかくなのでコマンド一発でクリップボードにコピーをするところまでやってしまいましょう。
コマンドは下記のとおりです。
$ find . -type f -name "*.html"|pbcopy
操作動画を見てください。さっそく↑キーで過去のコマンドを呼び出していますね。そこに|pbcopyというのを追加して実行しています。
実行後は直接テキストエディタにcmd+Vでペーストできていますね。
このパイプこそが結果を次のコマンドに渡す記号なのです。
そしてpbcopyは渡された出力をクリップボードに入れるコマンドなわけです。
まとめ
いかがでしょうか。プログラムっぽくコンピュータを操作するのではじめは難しそうに思えるかもしれませんが、いままで根性でやっていた作業が簡単にできそうな気がしませんか？
コマンドを使って、パイプでつなぐ。
この一連の流れを理解さえすれば、あとはコマンドをひとつずつ覚えていけばいいのです。武器が増えていくと、途端に強力になりますよ。
ぜひアーティスト・デザイナのみなさんもターミナルと仲良くしてください。
補足
mac標準のターミナルは内部でbashというシェルが動いています。そしてぼくが常用しているのはfishというシェルです。*6
コマンド、便利そうだけど文字入力めんどくさいし時間かかっちゃわない？と思うそこのあなた。fishシェルは導入直後から超高速で扱えるようになる賢いシェルです。
動画を見れば一目瞭然。圧倒的に高速なことがわかると思います。
今後本ブログでもfish shellについて解説する予定ですが、ご興味がある方は調べてみると良いでしょう。
