Web制作の現場で「黒い画面」を使うことは、近年ではごく当たり前な事になってしまいました。 フロントエンドエンジニアの方はもちろん、マークアップエンジニアの方ならば抵抗は無いでしょう。 しかし、デザイナーさんには未だに「黒い画面」は苦手意識がある方も少なくないのではないでしょうか。 その苦手意識を払拭する為に、少しばかり「黒い画面」への理解を深めてみましょう。

1. デザイナーが触れる「黒い画面」
2. 「黒い画面」ことターミナルとは
3. 「黒い画面」の基本
4. 「黒い画面」の怖い話
5. Windows環境での「黒い画面」

デザイナーが触れる「黒い画面」

そもそもデザイナーが「黒い画面」に触れる事は数年前まではあまり考えられていませんでした。 黒い画面上の作業はあくまでもバックエンドエンジニアやプログラマーの領域であって、デザイナーが触れるのはPhotoshopやIllustratorといったグラフィカルなアプリケーションまでに留まっていたと思います。

ところがWebの技術が度重なる変化・進化を遂げ、JavaScriptやCSSをビルドするようになったり、Node.jsが台頭してきたりで、プロジェクトの「黒い画面」への依存度が一気に上がってきました。 マークアップエンジニアは勿論のこと、肩書がデザイナーの人間も「黒い画面」を触れるようになる必要が出てきたのです。

例えば、こんなケースであったり

人手不足でデザインに加えてマークアップもやる事になった。 CSSをビルドする為に「黒い画面」が必要だ。

また例えば、こんなケースもあるでしょう。

プロジェクトにデザイナーとしてジョインしたが、 マークアップエンジニアが作った画面をレビューする為に「黒い画面」でコマンドを叩かなければならない。

「黒い画面」ことターミナルとは

まず「黒い画面」とは何なのか。その正体について軽く触れてみます。

Macにおける黒い画面である「ターミナル」は、GUI（グラフィカルインターフェース）によらず、 CUI（キャラクタユーザーインターフェース）、つまり文字列のコマンドでコンピュータを直接操作する為の物であると理解しておけば良いでしょう。

例えばMacでファイルを探し出すのにFinderを使用しますが、これはGUIによる機能ですね。 ターミナルでは、CUIで謎の呪文こと、コマンドを打ち込む事でそれとほぼおなじ事をすることが出来ます。 （勿論CUIなので見た目はただの文字列です） Finderをはじめとした、私達が普段パソコン上で使っているGUIアプリケーションは、ターミナルで行える処理を視覚的に見やすい形、そして操作しやすい形でラッピングされているのです。

ちなみに、MacOSXは元々Unix系のFreeBSD由来のOSで、 Unix系のコマンドの多くがそのまま使用できるのはその為です。 （Windowsについては後述しましょう）

「黒い画面」の基本

まずは黒い画面を立ち上げて触ってみましょう。 Mac環境ならば「アプリケーション」 > 「ユーティリティ」 > 「ターミナル」と辿っていけば立ち上がります。 あるいは Spotlight 検索で “term” あたりまで入力すれば出てくると思います。

ここまで「黒さ」を連呼していますが、Macでのデフォルトは白ベース黒文字の「白い画面」になっています。なんとなく、怖さが少し和らぎますね。

コマンドを入力してみる

黒い画面への入力については、キーボードで文字を入力するだけなので難しいことはないでしょう。 試しに一つコマンドを打ってみましょう。

$ whoami

[your user name]

whoami コマンドは、現在ログインしているユーザーの名前を出力します。 貴方のユーザー名が表示されましたか？

「何処」で「何」を対象に「何」するか

コマンドを覚えていく前に、次の3つの事を意識するようにしてみましょう。

1. 現在どこのディレクトリにいるか
2. そこで何をするか
3. 何を対象に行うか

例えばこんなコマンドを打ったとします。

$ mkdir myfolder

上の例では、現在いるディレクトリの中に myfolder という新しいディレクトリ（フォルダ）を作成しています。

もう少し詳しく見てみましょう。 コマンドはコンピューターへの命令であり、文法で言うところの述語です。 基本的に、コマンドは英語の文法に則っていて、述語であるコマンドの後には目的語を指定します。

この目的語は「引数（ひきすう）」と呼ばれ、上の例では myfolder が引数に値します。 つまり、 myfolder という名前で、ディレクトリを作る命令（ mkdir ）を行ったわけです。

また、命令によっては目的語を持たない（あるいは省略できる）場合もあります。

$ # ユーザー名を出力するだけなので引数が必要ありません
$ whoami
$ # 引数を省略すると、ユーザーのホームディレクトリに移動します
$ cd

さらにまた、目的語を二つとる命令もあります。

$ # 目的語1（foo.txt）を、目的語2（bar.txt）として複製する
$ cp foo.txt bar.txt

ファイルやディレクトリを引数にする

先程言ったように、コマンドには目的語である引数を渡す事が多いのですが、 その引数となるのはファイル名やディレクトリ名がほとんどです。

$ rm ./needless.txt

上の例では、今いるディレクトリにある “needless.txt” という名前のファイルを削除しています。 ファイル名の前についている “./” は一体なんでしょうか？ これは「今いるディレクトリにあるファイル」という事を明示的に指定しています。

Unixのファイルシステムでは、ファイルの場所（パス）について次のような表現を用います。

• “.” … 現在のディレクトリ
• “..” … 一つ上のディレクトリ
• “/” … ディレクトリの境目
• 一番頭が “/” … ルートディレクトリからの絶対パス

つまり上の例では、「現在いるディレクトリ下にあるneedless.txt」を指定しているわけです。

ここで「”./”は要らないのではないか」という疑問が浮かんだのではないでしょうか。 その通り、”./” は省略でき、次のように表現しても同じ処理を行います。

$ rm needless.txt

省略できるのならば、なぜ例示でわざわざ “./” を付けたのかというと、その方が安心出来るからです。 ファイルを指定する時は、”./” や “../” からはじまる相対パスで表現する事をお勧めしたいです。

特に、上で例に挙げている rm コマンドはファイルやディレクトリを削除してしまう破壊的なコマンドです。 必ず “./” ではじめる事を意識すれば、現在いるディレクトリを誤ったり、朦朧としながら作業をしていて操作ミスをしたりして、処理してはいけないファイルを処理してしまう危険性をわずかばかりではありますが、和らげる事ができます。

$ rm /the/path/to/target # NG
$ rm target # NG
$ rm ./target # Good

「どのように」行うか（オプション）

多くのコマンドは、「オプション」を渡すことで挙動をコントロールする事ができます。 ここでは ls コマンドを例に上げてみます。このコマンドは、ディレクトリ内にあるファイルをリスト表示してくれます。

$ ls
bar.txt         directory       foo.html

何もオプションを渡さない場合、ただファイルの名前のみが羅列されます。 ファイル名だけだと情報が足りないので、l オプションを追加してみましょう。

$ ls -l
total 16
-rw-r--r--@ 1 mach3  staff  212 12 12 16:03 bar.txt
drwxr-xr-x@ 2 mach3  staff   68 12 12 16:02 directory
-rw-r--r--@ 1 mach3  staff  248 12 12 16:03 foo.html

色々な情報が詰まったフォーマットで出力されました。 さらにドット（”.”）からはじまる隠しファイルも表示する為に、くわえて a オプションを指定してみます。

$ ls -la
total 16
drwxr-xr-x@ 6 mach3  staff  204 12 12 16:19 .
drwxr-xr-x@ 8 mach3  staff  272 12 12 16:01 ..
-rw-r--r--@ 1 mach3  staff    0 12 12 16:19 .hidden
-rw-r--r--@ 1 mach3  staff  212 12 12 16:03 bar.txt
drwxr-xr-x@ 2 mach3  staff   68 12 12 16:02 directory
-rw-r--r--@ 1 mach3  staff  248 12 12 16:03 foo.html

またさらに、t オプションを追加して更新時間順にソートしてみましょう。 （デフォルトでは名前順です）

$ ls -lat
total 16
drwxr-xr-x@ 6 mach3  staff  204 12 12 16:19 .
-rw-r--r--@ 1 mach3  staff    0 12 12 16:19 .hidden
-rw-r--r--@ 1 mach3  staff  248 12 12 16:03 foo.html
-rw-r--r--@ 1 mach3  staff  212 12 12 16:03 bar.txt
drwxr-xr-x@ 2 mach3  staff   68 12 12 16:02 directory
drwxr-xr-x@ 8 mach3  staff  272 12 12 16:01 ..

オプションを指定するルールがお分かりいただけたでしょうか。 オプションは主に1文字の英数字や短い言葉で指定し、 ダッシュ（”-“）の後ろに続けて打ち込む事で複数のオプションを合わせて利用する事ができます。 （このルールに則らないコマンドも存在するのでご注意ください）

各々のコマンドは、それぞれのオプションを持っています。 とても全てを覚えきれる物ではないので、その説明は次回に持ち越す事にします。

「黒い画面」の怖い話

「黒い画面は怖くない」と言いたいところですが、残念な事に「黒い画面」は怖いのです。

GUIのアプリケーションで警告が発せられるような処理でも、「黒い画面」は警告を発してくれません。 GUIのアプリケーションなら行わないような危険な処理も、「黒い画面」は実行してしまいます。 良く知らないままにコマンドを実行して、環境を壊してしまうなんていう悲劇も往々にしてあり得る事です。

うまく動かないからネットで検索したコマンドコピペして実行したら、パソコンが起動しなくなった

ジョークみたいな話ですが、実際に私の観測圏内で起こった出来事です。

ネットで拾ったコマンドを調べずに実行しては絶対にいけません。 コマンドがどのような処理を行う物なのか、渡している引数は何なのか、どのようなオプションで実行されているか、コピーしたコマンドはつまるところどういう命令なのか、 それらを調べて理解したうえで実行しましょう。 そして、インターネットは怖いところだという事を肝に銘じておきましょう。

Windows環境における「黒い画面」

Windowsにおける「黒い画面」は「コマンドプロンプト」と呼ばれる物ですが、これはおすすめできません。 WindowsはUnix由来でない為、Macで使えるような基本的なコマンドも使用できず、そもそもコマンド自体が非常に少なく、使い勝手がよくないのです。 「他と違う」という事は、つまり問題が起きた時に調べても解決策にたどり着きにくいという事です。

いくつか代替の手段があるので、そちらを使うようにした方が良いでしょう。

1. Git Bash

Windows環境で開発作業を行うのならば Git for windows は恐らくインストールされているはずなので、 これにバンドルされている「Git Bash」を活用します。 インストールされてない場合は、インストールしましょう。Gitはもはや開発環境に無くてはならない存在です。

Git Bash は msys と呼ばれるエミュレータで動いており、いささかLinuxやMacとは使い勝手が違いますが、基本的なコマンドは使用する事ができます。 （msysは、昔なつかしのcygwinからのフォークです）

Git Bashのメリットは、Windowsにおける実行ファイル（.exe）が容易に呼び出せる点です。 ショートカット（.lnk）もちゃんと追随してくれるので、「好きな名前で好きなアプリを立ち上げる」なんていう設定も簡単にできます。（ここでは説明は割愛します）

$ # 現在いるディレクトリでエクスプローラーが立ち上がります
$ explorer .

2. Bash on Windows

Windows10ならば、Windows上でUbuntuが動作します。 Windows Subsystem for Linux（WSL）と呼ばれる仕組みで、まさにLinuxがWindows上で動作していると思って良いでしょう。

中身はUbuntuなので、apt で楽々パッケージを追加インストールできるのが大きな魅力で、 参考になる情報もネットで収集しやすいです。

• Bash on Ubuntu on Windowsをインストールしてみよう！ – Qiita

前編まとめ

• デザイナーも「黒い画面」が必要な時代になった
• 「黒い画面」の基本的な使い方を学ぶ
• 「黒い画面」は怖いので用法を守って正しく使う
• インターネットの情報は鵜呑みにしてはいけない
• Windowsでの「黒い画面」は Git Bash または Bash on Windows を活用しよう

後編では最低限覚えておくと捗るコマンドと使い方を書くかもしれません。

WinLess

公式サイト : WinLess – Windows GUI for less.js

MacではLess.appをはじめとして、UIが優秀なコンパイラが複数あるようですが、
Windowsはまだコレ！という物に出会えていませんでした。が、これはかなり良いです。

WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the webdeveloper who uses Windows.

先日記事にしたLessParserはLess.appの模倣をうたっているだけあって確かに似ていましたが、
個人的に欲しい機能である、「フォルダのドラッグドロップ登録」が出来ませんでした。

WinLessはそのドラッグドロップ登録に対応している他、

• 通知メッセージの表示
• デフォルトで「Minify」をチェック

などの設定項目があり、親切です。

アプリケーション画面

こんな感じになっていて、基本的にはLess.app（LessParser）と操作法はかわりません。
File > Settings で設定を変更できます。

現行バージョンの設定項目は以下の通り。
（本稿執筆時のバージョンは1.5.2）

General

• Start with Windows
• Start minimized

Compiling

• Minify by default
• Automatically compile files when saved
• Show message on successful compile

通知メッセージをONにすると、
タスクバーのアイコン付近にポップアップでメッセージが表示されます。

まとめ

概ねLessParserで満足していたのですが、
唯一物足りなかったドラッグドロップに対応するコンパイラが出てきてくれて、
きっとLessniumも思い残す事はないでしょう…。

概要

普通につくるといくらでも立ち上がるよ！

Titaniumで普通にデスクトップアプリを作ると、いくらでも立ち上げられます。
連打すれば連打しただけアプリウィンドウがぽぽぽぽーんと増えていく。
アプリの性格にもよりけりですが、不都合が生じる事の方が多そうです。

ざっくりとした仕組み

1. タスクリストにある自分の名前の数を確認。
2. 2個以上あったら多重起動されてしまっているので、自分を落とす。

ソース

見ての通り、Windows用の処理しか書いていません
Mac/Linuxではcaseを書き足してやらねば動きませんのでご注意を。

var SingleLaunch = function( appName, callback ){
    var name, args, prc;

    switch( Titanium.platform ){
        case "win32" :
            name = appName + ".exe";
            args = [ "tasklist", "/NH", "/FI", "IMAGENAME eq " + name ];
            break;
        default :
            throw "このプラットフォームはサポートされていません";
            break;
    }
    prc = Titanium.Process.createProcess( args );
    prc.processCount = 0;
    prc.setOnRead(function(e){
        this.processCount += e.data.toString().match( RegExp( name, "g" ) ).length;
    });
    prc.setOnExit(function(){
        if( this.processCount >= 2 ){
            alert( appName + "は既に起動しています" );
            Titanium.UI.currentWindow.close();
            return;
        }
        callback();
    });
    prc.launch();
};

SingleLaunch( "YouApplication", function(){
    /* アプリを初期化 */
});

タスクリストを取得するには、Titanium.Processを使って「tasklist」コマンドを呼びます。
createProcessメソッドの引数に、コマンドとその引数を配列にして渡してlaunch。

cf) Appcelerator Developer Center – API for Titanium.Process (version 1.1)

setOnReadは出力が返される度に呼ばれるので、そこで自分の名前を探して数を加算。
すべての出力が完了したらsetOnExitが呼ばれるので、合計の数を見て条件分岐します。
2個以上であれば自身を落とし、そうでなければcallbackを呼んでアプリの初期化を行いましょう。

ポイント

tasklistが正しい値を返してくれない

既に1個起動しているはずなのに自分の名前が見つからない。
Titanium.Processで呼んだtasklistと、コマンドプロンプトで呼んだtasklistで結果が変わってしまう。

どうやら、TitaniumProcessがヘッダの行数を勘違いしている事に起因する模様。
見出しを出力しない/HNオプションを付けることで解決出来ました。

args = [ "tasklist", "/NH", "/FI", "IMAGENAME eq " + name ];

exit()とclose()

アプリを終了するTitanium.App.exit()と、
現在のウィンドウを閉じるTitanium.UI.currentWindow.close()がありますが、
どのような違いがあって、どちらの方が良いのか、というお話。

試してみた結果、実行後即閉じるclose()に比べ、
exit()は終了処理的な事をしているらしく、かなり動作がモッサリとしています。
ただし、close()したらすぐにプロセスが消えるかというとそうではなく、
だいたいexit()と同じぐらい待たされてからタスクリストから姿を消します。

exit()の方が安心そうではありますが、
見た目だけでもサクッと閉じてほしいので、取り急ぎ今回はclose()を使っています。
（そう思わせる程度には、exitはモッサリしています）

まとめ

ひょっとしたら多重起動防止用の何かが既にあるかもしれないし、なくても今後実装されるかもしれませんが、
とりあえず情報が見つからなかったので書いてみました。ツッコミありましたらよろしく願います。

autocmplpop.vimを導入

AutoComplPop – Automatically opens popup menu for completions : vim online

デフォルトのままのVimでは、やの後に、
, とする事で入力候補をポップアップで表示させる事が出来ます
…が、ちょっとまどろっこしい。

これを自動的にポップアップしてくれるようにしてくれるのが
このAutoComplPopというプラグインです。
導入方法はディレクトリにコピーするだけなので割愛。

尚、当方のUbuntu環境ではl9.vimも必要とされました。
うまく動かなかったら一緒に導入してやりましょう。

L9 – Vim-script library : vim online

導入後の設定

以下が、導入後の設定を極めて分かりやすく紹介してくれている記事。

autocomplpop.vimでリアルタイムにキーワード補完 – ナレッジエース

以下、リンク先の記事より拝借・抜粋させて頂きます。

ポップアップ中でもEnterキーで候補決定しない様に設定

候補を無視して改行を入力したい場合もあるので、
ポップアップ中のEnterキーで決定しないようにします。
修正箇所は、autoload/acp.vimの192行目付近。

if pumvisible()
    " a command to restore to original text and select the first match
    return "\<C-p>"
endif

これだとEnterでポップアップが消えるだけで、その時はまだ改行は挿入されません。
私はこっちのほうが使いやすいのですが、改行を挿入したい場合はvimrcに下記を追記。

inoremap <expr> <CR> pumvisible() ? "\<C-y>\<CR>" : "\<CR>"

他にもTabで候補を巡回する為の設定等も掲載されていましたが、
私は無い方が使いやすかったので、割愛致します。詳しくはリンク先で！

『オプション ‘omnifunc’ は設定されていません』

…なんていうエラーが吐かれた場合の対処について。

当方の環境では挿入モードで「<」を入力中に上記のエラーが吐かれました。
omnifuncというのはオムニ補完、つまり入力補完のポップアップの事らしく、
これを設定してあげれば黙るかな？というわけで設定してみました。

setlocal omnifunc=syntaxcomplete#Complete

無事静かになってくれました。
参考：Ubuntu日本語フォーラム / vim autocomplpop エラーについて

ついでなのでPHPの辞書を突っ込んでおこう

異常に関数の多いPHPこそ入力補完が役に立ちますね。
辞書ファイルはただ改行で候補を連ねるだけなので、簡単に作成出来ます。

参考：Vim で PHP 関数の辞書を作成する方法についてのメモ

上記リンクより抜粋。多謝！
こちらのコードを走らせる事で辞書ファイルを生成出来ます。

<?php
$keywords = array(
    'if', 'else', 'elseif', 'endif', 'while', 'endwhile', 'do', 'as', 'for', 'endfor', 'foreach', 'endforeach',
    'break', 'continue', 'switch', 'endswitch', 'case', 'default', 'declare', 'enddeclare',
    'try', 'catch', 'return', 'exit', 'const', 'class', 'function',
    'require', 'include', 'require_once', 'include_once',
    'abstract', 'final', 'interface', 'private', 'protected', 'public', 'static',
    '__LINE__', '__FILE__', '__DIR__', '__FUNCTION__', '__CLASS__', '__METHOD__', '__NAMESPACE__'
);
$functions  = function_exists( 'get_defined_functions'   ) ? get_defined_functions()   : array();
$constants  = function_exists( 'get_defined_constants'   ) ? get_defined_constants()   : array();
$interfaces = function_exists( 'get_declared_interfaces' ) ? get_declared_interfaces() : array();
$classes    = function_exists( 'get_declared_classes'   ) ? get_declared_classes()  : array();

$arrays = array_merge(
    $keywords,
    $functions['internal'],
//  array_keys( $constants ),   // 定数を補完したい場合はこの行を有効にする
    $interfaces,
    $classes
);
sort( $arrays );
$arrays = array_unique( $arrays );
echo implode( "\n", $arrays );

生成した辞書ファイルをvimrcで登録しておけば完了です。

autocmd FileType php :set dictionary=~/.vim/dict/php.dict

Windowsの場合は下記のような感じ。
“$VIM”はgVim.exeがインストールされているパスです。

autocmd FileType php :set dictionary=$VIM/vimfiles/dict/php.dict

辞書は必要に応じて追加していきましょう。
ActionScriptなんかも欲しいなぁ…

ひとまずこんな感じで、Win/Linux共にまともに動いてくれています。
オムニ補完はバッファの中身のみならず、
辞書を設定しておけば辞書内からも候補を表示してくれる優れもの。
Linxではパスの入力もこれでかなり楽になりますね。

ノートでのコーディングがとても快適になりました！すごいやVim！

「ファイル名を指定して実行」とは

「ファイル名を指定して実行」というのは
コマンドを入力することでプログラムを実行出来るダイアログボックスの事です。
「calc」や「notepad」や「cmd」等々、Windowsを使っていれば結構使っているはず？
以下のショートカットキーで呼び出す事ができます。

Windowsキー＋R

例えば「calc」と入力してOK/Enterすると、
Windows標準装備の超クールな計算機が立ち上がります。
なぜcalcで計算機が立ち上がるのかというと、
「パスが通っている場所」にcalc.exeがあるから。それだけ。

使えるコマンドを増やそう

増やし方

コマンドの追加方法は至ってシンプルで、
パスが通っているフォルダにショートカットを作っておくだけ。

1. スタートメニュー>プログラムで好きなプログラムのショートカットをコピー
2. パスが通っている場所（例えばc:windows）にペースト
3. お好みの名前にリネーム

例えばPhotoshopのショートカットを「ps」という名前で保存しておけば、
「ファイル名を指定して実行」>「ps」で簡単に呼び出す事が出来ます。
名前さえ覚えておけばランチャーいらずで何でも一発起動できますね。

保存場所は自分で作ろう

上の例ではc:/windowsなどと書きましたが、
そんな所においてしまっては管理しづらい上に妙な物を弄ってしまわないか心配です。
新たに作成したフォルダにパスを通して、そこで管理した方が安全です。

パスを通すのは簡単で、下記の場所の「Path」の項目に追記するだけ。
あとは再起動すれば適用されるはずです。

「システムのプロパティ」>「詳細設定」>「環境変数」>「Path」

c:aliase等、分かりやすい場所が良いですね。

まとめ

よく使うアプリケーションはすぐ起動出来るようにしたい。
作業効率上、できるだけキーボードから手を離したくない。
そんな時に大変役立つ小技です。

また、パスを通しておけば「ファイル名を指定して実行」だけでなく、
コマンドプロンプトからも一発起動出来るので、
バッチファイル等を保存しておいても何かと便利ではないでしょうか。

Dokan

Ubuntu等では標準で搭載されている機能なのですが、
WindowsでSSHの接続先のファイルを編集する場合は
WinSCP等のクライアントを経由して行っていました。
それが、DokanSSHFSを利用する事で簡単に出来るみたいです。

こちらがマウント設定画面。勿論鍵を使用しての接続も可能。
WinSCPではPutty形式の鍵をジェネレートする必要がありましたが、
DokanSSHFSではOpenSSHの鍵をそのまま使用出来ます。

接続に成功すると、ドライブとしてマウントされます。
ドライブレター(ここではM）は設定画面で選択可能です。
これは便利だ！

※尚、DokanSSHFSの動作にはDokanライブラリが必要なのですが、
Dokanライブラリの0.5.0以降には対応していないそうなので…

Dokan » Download

DokanSSHFS は Dokan 0.5.0 以降に対応していません。 Dokan SSHFS を Dokan 0.5.0 以降で使用したい場合は、DokanSSHFS.exe と DokanNET.dllをこのファイルで上書きしてください。

だそうです。