2019年1月28日月曜日
WEBエンジニアが知っていてもいいかもしれない出版やデザインの話
私は出版・DTPをかじったことが少しだけあるのですが、デザインや文章校正の基礎知識はエンジニアの仕事でも活用できる機会が時折あったりします。
基本的なキーワードだけ簡単にご紹介します。
興味がでたらぜひ本格的なデザインや文章校正の本などで調べてみてください。
少し気にするだけでも、画面が結構「それっぽく」なりますので、コスパの良い知識だと思います。
ジャンプ率
1画面(1紙面)でのフォントサイズの変化率を指す言葉です。一般に、落ち着いた雰囲気にしたい場合はジャンプ率を小さく、派手な印象を与えたい場合はジャンプ率を高くすべきと言われています。
色の指定方法
RGB
WEBエンジニアがまず思いつくのはこれかと思います。光の三原色ですね。HSB
色相(Hue)、彩度(Saturation)、明度(Brightness)の3要素で色を指定する方法があります。色相は赤系・青系などの色味、彩度は鮮やかさ(小さいほどグレーに近くなる)、明度は明るさ(小さいほど黒に近くなる)を表します。
SBを固定し、Hのみを変動させることで、比較的まとまりのある色のバリエーションが作りやすいです。
例えば、画面上でステータスAとステータスBの表示色を変えて視認性を上げたい、といった場合には、色相のみ違う2色を用いると、比較的おさまりが良かったりします。
CMYK
インクの4色です。基本的に印刷物の色味はCMYKで表現されます。WEBだと気にする機会はあまりないですが、RGBやHSBで表現できる色は、必ずしも同じ見え方のCMYKに変換できない、という点は知っておいてもいいかもしれません。
人物写真の「首切り」
インタビューに添付される人物写真において、人物の顔部分に背景の直線(窓枠等)が被る構図はNGとされています。必ずしも合理的な理由はない(私が知る限りでは)ですが、確かにちゃんとしたサイトや紙面の写真では見ない構図ですから、気にしておくといいかと思います。
文章の書き方
表現したい内容によって正しい日本語の書き方というのは当然変わりますが、かっちりした文章を書く場合には新聞ルールを参考にすると、素人感が出なくていいです。- 「出来る」と「できる」はどちら?
- 「行なう」と「行う」はどちら?
- 「〜です(〜)。」「〜です。(〜)」はどちら?
たとえばこういう疑問に対して、どっちがプロっぽいか、という回答を与えてくれます。
文献としては共同通信社の記者ハンドブックなどがメジャーですが、買うと高いので、新聞社サイトの文章を参考にするなどでもいいかもしれません。
以上です。散文になってしまいましたが、ご参考になれば幸いです。
2019年1月24日木曜日
Gulp+EJSでページを量産
こんにちは!
シタテル株式会社UI/UXデザイナーの堤です。
複数の静的ページを作る際に便利なGulp+EJSについて紹介します。
今回やりたかったこと
- 静的なページを量産
- 共通パーツはテンプレート化したい
導入方法はNode.jsがインストールされている環境でプラグインをインストールします。
$ npm install gulp gulp-merge-json gulp-ejs gulp-rename fs
ディレクトリ構成
gulpfile.js
// gulpプラグインの読み込み
var gulp = require('gulp');
var merge = require('gulp-merge-json');
var ejs = require('gulp-ejs');
var rename = require('gulp-rename');
var fs = require('fs');
//jsonファイルの結合 ※複数のjsonファイルがなければ不要
gulp.task('json', function () {
gulp.src('./app/data/origin/**/*.json')
.pipe(merge({
fileName: 'pages.json'
}))
.pipe(gulp.dest('./app/data'));
});
//設定ファイルの読み込み
const jsonData = './app/data/pages.json';
const json = JSON.parse(fs.readFileSync(jsonData));
// ejsをhtmlへ変換
gulp.task("ejs", function() {
for (var key in json.pages) {
var data = json.pages[key];
data.path = key;
var layout = data.layout;
gulp.src("./app/ejs/" + layout + ".ejs")
.pipe(ejs(data))
.pipe(rename(key + '.html'))
.pipe(gulp.dest('./public'));
}
});
pages.json
{
"pages": {
"index": { //出力するhtmlファイル名
"layout": "index", //使用するejsファイル名
"title": "タイトル1"
},
"hoge/index": {
"layout": "index",
"title": "タイトル2"
}
}
}
index.json
<% include common/_head %> //includeするejs ファイルを指定
<%= title %> //jsonファイル内でしている要素が入る
実行方法
$ gulp json //jsonファイルの結合が必要な場合
$ gulp ejs
まとめ
ejsではjavascriptが使用できるためループ処理なども可能です。
あまり利用する場面は多くないですが、エンジニアさんに 依頼するほどでもないけど、ぱぱっと複数ページを作る必要があるときに便利です!
2019年1月21日月曜日
Linuxのプロセス確認方法3つと終了方法3つ -killコマンドのバリエーション-
元インフラエンジニアの北爪です。
Linuxにてプロセスを終了する様々な方法について解説します。最後にプロセスを終了するとはどういうことかを説明します。
最初にプロセス終了コマンドとプロセスの確認コマンドをそれぞれ3つ紹介します。
その後に終了コマンドを詳しく解説し、最後にUNIXのシグナルについて簡単に解説します。
プロセスの確認コマンド3つ
- リアルタイムでインタラクティブなプロセス確認方法、
top
コマンド - Linuxならパイプで繋ぎたいそんな確認方法は
ps auxf
コマンド - パターンマッチで調べたい
pgrep -a
コマンド
プロセスの終了コマンド3つ
- インタラクティブにプロセスを終了するなら、
top
コマンド - pidを見て確認しながらプロセスを終了するなら
kill
コマンド - pidを確認するのと同時にプロセスを終了するなら
pkill
コマンド
topコマンド -インタラクティブにkill-
プロセスの状況を確認しながら、特定のプロセスを終了することができます。topコマンドを起動し、k
を押すと、pidが聞かれた後に、送りたいシグナルを入力することができます。最後に確認(yes/no)が出て、プロセスを終了できます。killコマンド -丁寧にkill-
ps aux | grep <プロセス名>
もしくは、pgrep <プロセス名>
にてpidを調べます。調べたpidを使って、kill -p <pid>
にてプロセスを終了することができます。pkillコマンド -patternでkill
プロセス名をパターンマッチングして終了ことができます。同時にマッチした複数のプロセスを終了することができます。例えば、nginxが起動しており、master(親プロセス)とworker(子プロセス)が実行されているとします。以下のようになります。
root@0e1d355b28f0:/# ps auxf
USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND
root 1 0.0 0.1 18504 3528 pts/0 Ss 10:03 0:00 /bin/bash
root 3470 0.0 0.0 140624 1520 ? Ss 10:11 0:00 nginx: master process /usr/sbin/nginx
www-data 3471 0.0 0.1 141000 3428 ? S 10:11 0:00 \_ nginx: worker process
www-data 3472 0.0 0.1 141000 3428 ? S 10:11 0:00 \_ nginx: worker process
pkill nginx
これでnginxのプロセスを終了することができます。また、
-f
オプションでは、プロセス名だけではなく、オプションを含めた全てのプロセス名がパターンマッチの対象になります。pkill
は、pgrep
とセットで使うことでどのプロセスが対象になるのかを事前に調べることができます。 pgrep
とpkill
はオプションを共有しているので、pgrepにて対象のプロセスを調べることができます。pgrepにてプロセスの探し方をオプションなしでプロセス名にて検索、
-f
オプションにてプロセス名全体にて検索の例を示します。-a オプションはプロセスの説明を表示します。root@0e1d355b28f0:/# root@0e1d355b28f0:/# ps auxf | grep nginx
root 3789 0.0 0.0 140624 1512 ? Ss 10:57 0:00 nginx: master process /usr/sbin/nginx
www-data 3790 0.0 0.1 141000 3384 ? S 10:57 0:00 \_ nginx: worker process
www-data 3791 0.0 0.1 141000 3384 ? S 10:57 0:00 \_ nginx: worker process
root@0e1d355b28f0:/# pgrep -a nginx
3789 nginx: master process /usr/sbin/nginx
3790 nginx: worker process
3791 nginx: worker process
root@0e1d355b28f0:/# pgrep -a -f master
3789 nginx: master process /usr/sbin/nginx
root@0e1d355b28f0:/# pgrep -a -f worker
3790 nginx: worker process
3791 nginx: worker process
次に、意図的に、先にnginxのmasterプロセスにSIGKILLをシグナルを送り、親プロセスのみ強制終了します(シグナルについては後述)。そのあとに親プロセスが消えた子プロセス(= Orphan process)のwoker(子プロセス)を
pkill -f
を使って終了してみます。root@0e1d355b28f0:/# ps auxf
USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND
root 1 0.0 0.1 18616 3552 pts/0 Ss 10:03 0:00 /bin/bash
root 3789 0.0 0.0 140624 1512 ? Ss 10:57 0:00 nginx: master process /usr/sbin/nginx
www-data 3790 0.0 0.1 141000 3384 ? S 10:57 0:00 \_ nginx: worker process
www-data 3791 0.0 0.1 141000 3384 ? S 10:57 0:00 \_ nginx: worker process
root 3805 0.0 0.1 34396 2828 pts/0 R+ 11:02 0:00 ps auxf
root@0e1d355b28f0:/# pkill -KILL -f master
root@0e1d355b28f0:/# ps auxf
USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND
root 1 0.0 0.1 18616 3552 pts/0 Ss 10:03 0:00 /bin/bash
www-data 3790 0.0 0.1 141000 3384 ? S 10:57 0:00 nginx: worker process
www-data 3791 0.0 0.1 141000 3384 ? S 10:57 0:00 nginx: worker process
root 3807 0.0 0.1 34396 2792 pts/0 R+ 11:02 0:00 ps auxf
root@0e1d355b28f0:/# pkill -KILL -f worker
root@0e1d355b28f0:/# ps auxf
USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND
root 1 0.0 0.1 18616 3552 pts/0 Ss 10:03 0:00 /bin/bash
root 3809 0.0 0.1 34396 2944 pts/0 R+ 11:02 0:00 ps auxf
プロセスの終了とは シグナルについて
プロセスの終了は各プロセスにシグナルを送ることで外部から非同期にプロセスのコントロールを行います。top
kill
pkill
全てのコマンドでデフォルトのシグナル(SIGTERM/15)です。つまり、TERMシグナルを送ることで、プロセスを終了しています。TERM以外のシグナルを送ることも可能です。各シグナルは番号と英語による表記があります。
kill
pkill
共に -<signal>
にてシグナルを送ることができます。これは数字でも文字でも可能です。例えば、強制終了はkill -KILL
もしくは kill -9
kill -l
コマンドでシグナルの一覧を出力することが可能です。root@0e1d355b28f0:/# kill -l
1) SIGHUP 2) SIGINT 3) SIGQUIT 4) SIGILL 5) SIGTRAP
6) SIGABRT 7) SIGBUS 8) SIGFPE 9) SIGKILL 10) SIGUSR1
11) SIGSEGV 12) SIGUSR2 13) SIGPIPE 14) SIGALRM 15) SIGTERM
16) SIGSTKFLT 17) SIGCHLD 18) SIGCONT 19) SIGSTOP 20) SIGTSTP
21) SIGTTIN 22) SIGTTOU 23) SIGURG 24) SIGXCPU 25) SIGXFSZ
26) SIGVTALRM 27) SIGPROF 28) SIGWINCH 29) SIGIO 30) SIGPWR
31) SIGSYS 34) SIGRTMIN 35) SIGRTMIN+1 36) SIGRTMIN+2 37) SIGRTMIN+3
38) SIGRTMIN+4 39) SIGRTMIN+5 40) SIGRTMIN+6 41) SIGRTMIN+7 42) SIGRTMIN+8
43) SIGRTMIN+9 44) SIGRTMIN+10 45) SIGRTMIN+11 46) SIGRTMIN+12 47) SIGRTMIN+13
48) SIGRTMIN+14 49) SIGRTMIN+15 50) SIGRTMAX-14 51) SIGRTMAX-13 52) SIGRTMAX-12
53) SIGRTMAX-11 54) SIGRTMAX-10 55) SIGRTMAX-9 56) SIGRTMAX-8 57) SIGRTMAX-7
58) SIGRTMAX-6 59) SIGRTMAX-5 60) SIGRTMAX-4 61) SIGRTMAX-3 62) SIGRTMAX-2
63) SIGRTMAX-1 64) SIGRTMAX
終わりです!
2019年1月18日金曜日
FirefoxとChromeで画像の色味が違う問題
こんにちは!
シタテル株式会社UI/UXデザイナーの堤です。
以前出くわしたFirefoxとChromeが画像の色味が違う問題について解決方法をご紹介します。
画像はぱくたそさんから拝借
修正前
左がChromeで右がFirefox
微妙にFirefoxの色味が濃く出てしまいます。
修正後
解決方法
Photoshopで書き出しの際に「カラープロファイルの埋め込み」にチェックするだけ!
まとめ
以前なぜかわからずいろいろと調べていたところこの解決方法にたどり着きました。
微妙な違いにはなりますが、 写真が多いサイトだと全体の印象も変わってくるため気をつけたいと思います。
2019年1月4日金曜日
【mac】操作スペースを使いこなす!
こんにちは!
シタテル株式会社エンジニアのいしづかです。
開発作業をしているといろんなソフトウェアを使いますね。
Slack・Webブラウザ・コードエディタ・gitツール・DBツール・・・etc
これらを1つのウィンドウ内に置いてキーボードで切り替えてもいいんですが、どうしてもゴチャゴチャ感は否めません。
macには「操作スペース」と呼ばれる仮想的なデスクトップ機能があります。
ディスプレイを何枚も持っているようなイメージの機能ですね。それを切り替えて使います。
今回はその操作スペースを使いこなすために、私が行っている設定をご紹介します。
操作スペースをつかう
Mission Controlを起動すると「デスクトップ1」って感じで表示されている部分、ここ Spacesバー って言うらしいです。最初はデスクトップ1だけですが、右端の+ボタンから増やすことができます。
私はいつも6つ用意しています。
それぞれ置いておくものを決めていて
- デスクトップ1: Slack
- デスクトップ2: Webブラウザ
- デスクトップ3: コードエディタ(Visual Studio Code)
- デスクトップ4: gitクライアント(SourceTree)
- デスクトップ5: DBクライアント(SequelPro)
- デスクトップ6: 予備
こんな感じで使っています。
どこに何があるか決めておくことで、ほしいウィンドウをパッと取り出せるようにしています。
ちなみに、このウィンドウの順番を使用状況に応じて並び替える機能があって、macさんの親切心なんですが、私にとって余計なお世話と化していたのでOFFにしています。
↓コレです。システム環境設定のMission Controlにあります。
すばやく切り替えるための設定
それでもデスクトップ1からデスクトップ4まで移動するにはトラックパッドを三本指でシャッシャッシャッと3回やることになります。
この行ったり来たりが地味にめんどくさい。。。
そこでショートカット1発で「デスクトップ○」を出すようにしています。
システム環境設定の「キーボード」でMission Controlのショートカット設定ができます。
↓コレです。
ここでは「control + 数字」を押すとデスクトップを切り替えるようにしています。
これでどのデスクトップを表示していても、Slackが見たければ「control + 1」ですし、コードエディタを出したければ「control + 3」で一発移動が可能です。
まとめ
ホントにちょっとしたことなんですが、毎日発生する微細な面倒事を放っておくと慣れてしまって当たり前になってしまうので、こんな細かい工夫も怠らないように心がけています。
みなさんそれぞれ快適な開発環境を構築しているようですので、その工夫を聞いて取り入れていきたいですね。
2018年12月28日金曜日
WOVNさんのオフィスに遊びに行ってみた!
こんにちは!
シタテル株式会社CTOの和泉です。
WOVNさんのオフィスに遊びに行ってみた!
WOVNはウェブページなどの多言語化ソリューションを提供している企業です。自社のホームページを多言語化しようと思うと何かと考えないといけないことが多くて大変なのですが、WOVNは特許を持つ技術なども組み合わせてスマートに解決するソリューションを提供しています。
先日、CTOのジェフさんにお会いして、遊びに行かせてください!と押しかけました。最近オフィスに押しかけるのが小さなマイブーム。
オフィス
第一印象。ピザパーティーができそう!
写真のセンスがなさすぎて申し訳ないぐらい伝わらないのですが、、、
写っている場所は中央にあるフリーアドレスの 執務スペースです。この両側にも執務スペースがあり、そこはオフィススタイルにテーブルが並んでいます。
左下のテーブルにお菓子がありますね。
気になって横に振り向くと、、、
社内セルフコンビニ!!
頭使うと糖分が欲しくなったりするのでこれは嬉しい。
僕は食べ過ぎるタイプなのでご利用は計画的にしないといけなくなりそうですが。
多言語化をサポートしている企業ですので、社員にも外国籍出身の方が多くおられます。
クリスマスツリーもしっかりと飾ってありました
教えてもらったこと
WOVNが提供するサービスについて、営業の長谷川さんにいろいろと教えてもらいました。
まず冒頭にも紹介したとおり、ウェブページの多言語化をクラウド上で一元管理しながら行えるツール群を提供してくれています。
このツール群がスグレモノで、ページの文章を抜き出して翻訳しやすい単位に分割してくれたり、HTMLのタグで分断されている文字列を再構成してくれたりします。分割した文字列は機械翻訳で一括翻訳。もちろん翻訳を独自に修正することも出来ます。また、企業独自の 言葉を優先的に翻訳する辞書の定義もできます。
ページへの組み込みは、Javascriptで動的に 他の言語に書き換える方法だけでなく、検索エンジン最適化(SEO)ができる形で言語ごとのプラグインも提供されていて、ユーザーのニーズに合わせた方法が選べるようになっています。不勉強で知らなかったのですが、実はネイティブアプリにも対応しています。そしてそれらは全てクラウド上の単一リソースとして管理できる。素晴らしい!
そしてそして、単にツールを提供してくれるだけではなく、実は人手による翻訳もツールに統合された形で簡単に依頼できるようになっています。翻訳会社を探して対訳表のエクセルを作ってといった煩雑な作業が無くなるのはすごく嬉しい !
気になるお値段
価格についても教えていただきました。
今は基本的には固定の値段表は無く、使用するサイトの規模感に合わせて見積もりをする形を取られているとのこと。スタートアップで資金に不安がある場合は、こういうふうな使い方すると費用が抑えられますよとか、アドバイスまでしてくれる親切対応。
実はシタテルでもリアルに導入を検討しているのでとても参考になりました。
まとめ
機能から詳しい使い方、金額感までとても詳しく教えていただきました。
訪問ブログの公開もご快諾いただけて感謝感謝。
冒頭に紹介したCTOのジェフさんを始め国外の方も多くおられのも理由かなと思うのですが、
やはり インターナショナルでオープンな雰囲気のあるオフィスでした。
シタテルのウェブページが多言語対応する日も近いかも!
(自分やれっていう戒め)
繰り返しになりますが、ご対応いただいたジェフさん、長谷川さん、ありがとうございました!!
2018年12月27日木曜日
コンソール上でディレクトリの中身を樹形図表示する - tree コマンドの紹介
こんにちは! シタテルエンジニアの諏訪です。
今日はコンソール画面で使う tree コマンドについてご紹介します。
コンソールでディレクトリの中身をみる
ファイルの一覧表示
みなさんはコンソールを使っていてあるディレクトリ内のファイルの一覧がほしいときに
どんなコマンドを打ちますか?
たいていは ls
コマンドを使うと思います。
……コンソールを使う人が最初に覚えるコマンドの一つですね!
$ ls
Gemfile Rakefile config lib public tmp
Gemfile.lock app config.ru log storage vendor
README.md bin db package.json test
これだと一覧性に欠けてちょっと見づらいので -l
オプションを付ける方も多いでしょう。
$ ls -l
total 56
-rw-r--r-- 1 p-san wheel 2210 12 27 12:34 Gemfile
-rw-r--r-- 1 p-san wheel 5360 12 27 12:34 Gemfile.lock
-rw-r--r-- 1 p-san wheel 374 12 27 12:34 README.md
-rw-r--r-- 1 p-san wheel 227 12 27 12:34 Rakefile
drwxr-xr-x 10 p-san wheel 320 12 27 12:34 app
drwxr-xr-x 9 p-san wheel 288 12 27 12:34 bin
drwxr-xr-x 16 p-san wheel 512 12 27 12:34 config
-rw-r--r-- 1 p-san wheel 130 12 27 12:34 config.ru
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 db
drwxr-xr-x 4 p-san wheel 128 12 27 12:34 lib
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 log
-rw-r--r-- 1 p-san wheel 67 12 27 12:34 package.json
drwxr-xr-x 9 p-san wheel 288 12 27 12:34 public
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 storage
drwxr-xr-x 11 p-san wheel 352 12 27 12:34 test
drwxr-xr-x 5 p-san wheel 160 12 27 12:34 tmp
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 vendor
ディレクトリ直下のファイルを確認するにはこれでよいのですが
時として、サブディレクトリの中のファイルも同時に確認できると便利なことがあります。
新米エンジニアPさんの奮闘記を見てみましょう。
ファイルを探せ!
登場人物
- 【Pさん】
開発チームにジョインしたばかりの新米エンジニア。
シェルコマンドは cd と ls しか知らないくせに
やたらとコンソール画面を使いたがる、ちょっとクセのある新人。
Pさん初めてのタスク
Pさんの仕事初日。ソースコードの構成もよくわかっていない中で最初のタスクが飛び込んできました。
── Pさん、早速で悪いけど、404.html をちょっと修正してもらえる?
── は〜い、わかりました〜!
元気よく返事をしたものの、その 404.html
とやらは一体どこにあるのでしょう?
開封したての PC にまだエディタすら入れていないPさん。
とりあえずコンソール画面で ls コマンドを打ちまくって手当たり次第に探すことにしました。
── えーっと、エラー画面のソースだから…… view ディレクトリの中にあるんだよねきっと。
$ cd app/views/
$ ls -l
total 0
drwxr-xr-x 2 p-san wheel 64 12 27 12:34 item
drwxr-xr-x 5 p-san wheel 160 12 27 12:34 layouts
drwxr-xr-x 2 p-san wheel 64 12 27 12:34 message
drwxr-xr-x 2 p-san wheel 64 12 27 12:34 user
ありません。
── おや、、、フォルダしかないじゃん。。。すると layouts の中かな。。。
$ cd layouts/
$ ls -l
total 24
-rw-r--r-- 1 p-san wheel 347 12 27 12:34 application.html.erb
-rw-r--r-- 1 p-san wheel 229 12 27 12:34 mailer.html.erb
-rw-r--r-- 1 p-san wheel 13 12 27 12:34 mailer.text.erb
ありません。
── あれれ。。。あー、さては assets の中だな(錯乱)
$ cd ../../assets/
$ ls -l
total 0
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 config
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 images
drwxr-xr-x 8 p-san wheel 256 12 27 12:34 javascripts
drwxr-xr-x 6 p-san wheel 192 12 27 12:34 stylesheets
やっぱりありません。
── これはもう素直に find コマンドを使うしか…
$ cd ../../
$ find . -name '404,html'
(何も表示されない)
── 見つから…ない…… あっ、見つからないから 404 なんだ。なんつってハハハ(錯乱)
(注)錯乱したPさんはタイプミスをしていますが、本人気づく様子がありません。
コンソールの敗北
結局Pさんは、cd コマンドを使って 404.html を探すのを諦め
GUI なエディタをインストールしました。
エディタにはファイルを樹形図表示する機能があって
それを使うと一瞬で目的のファイルが見つかったのでした。
── はぁ〜意外と浅いところにあったのね。。。もうコンソールきらい。使うのやめよ。。。
やっぱり GUI ソフトにあるようなファイルの樹形図表示機能はとても便利です。
サブディレクトリも含めてファイルを一覧表示してくれるから。
Mac や Windows を使っていれば Finder や エクスプローラその他 GUI ソフトを使えばいいのですが
クラウドサービス上の仮想マシンに SSH でつなぐ場合など
シェルだけで操作を完結させないといけない場面も多いです。
……上の物語に出てきた新人Pさん、今後の仕事でちょっと苦労しそうですね。
コンソール画面でも、こんなふうに樹形図表示することができたらいいのに。。。
コンソールでディレクトリの中身をみる(再)
ファイルの一覧表示 (樹形図)
問題提起したばっかりですが結論です。樹形図表示、 実はできるんです。
ご覧いただきましょう。tree コマンドです。
$ tree
.
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
│ ├── assets
│ │ ├── config
│ │ │ └── manifest.js
│ │ ├── images
│ │ ├── javascripts
│ │ │ ├── application.js
│ │ │ ├── cable.js
│ │ │ ├── channels
│ │ │ ├── item.coffee
│ │ │ ├── message.coffee
│ │ │ └── user.coffee
│ │ └── stylesheets
│ │ ├── application.css
│ │ ├── item.scss
│ │ ├── message.scss
│ │ └── user.scss
│ ├── channels
│ │ └── application_cable
│ │ ├── channel.rb
│ │ └── connection.rb
│ ├── controllers
│ │ ├── application_controller.rb
│ │ ├── concerns
│ │ ├── item_controller.rb
│ │ ├── message_controller.rb
│ │ └── user_controller.rb
│ ├── helpers
│ │ ├── application_helper.rb
│ │ ├── item_helper.rb
│ │ ├── message_helper.rb
│ │ └── user_helper.rb
│ ├── jobs
│ │ └── application_job.rb
│ ├── mailers
│ │ └── application_mailer.rb
│ ├── models
│ │ ├── application_record.rb
│ │ └── concerns
│ └── views
│ ├── item
│ ├── layouts
│ │ ├── application.html.erb
│ │ ├── mailer.html.erb
│ │ └── mailer.text.erb
│ ├── message
│ └── user
:
(省略)
:
├── public
│ ├── 404.html
│ ├── 422.html
│ ├── 500.html
│ ├── apple-touch-icon-precomposed.png
│ ├── apple-touch-icon.png
│ ├── favicon.ico
│ └── robots.txt
:
(省略)
:
300 directories, 1311 files
どうですかこの見事な樹形図!!! (グルメリポート風に)
深さを指定する
デフォルトだと上のように、カレントディレクトリから 3-階層目まで表示されます。
これだとちょっと多すぎる(or 少なすぎる)という場合は -L
オプションで階層の深さを指定できます。
例: 2-階層目まで表示
$ tree -L 2
.
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
│ ├── assets
│ ├── channels
│ ├── controllers
│ ├── helpers
│ ├── jobs
│ ├── mailers
│ ├── models
│ └── views
:
(省略)
:
├── public
│ ├── 404.html
│ ├── 422.html
│ ├── 500.html
│ ├── apple-touch-icon-precomposed.png
│ ├── apple-touch-icon.png
│ ├── favicon.ico
│ └── robots.txt
├── storage
:
(省略)
:
33 directories, 35 files
変更時間順にソートする
-t
オプションを指定すればファイルの変更時間順に並べ替えて表示することができます。
$ tree -t
.
├── Gemfile
├── README.md
├── Rakefile
├── config.ru
├── app
│ ├── assets
│ │ ├── config
│ │ │ └── manifest.js
│ │ ├── images
│ │ ├── javascripts
│ │ │ ├── application.js
│ │ │ ├── cable.js
│ │ │ ├── channels
:
(省略)
:
300 directories, 1311 files
ディレクトリを指定する
ls コマンドがそうであるように、対象ディレクトリを指定して表示させることもできます。
$ tree app/assets/
app/assets/
├── config
│ └── manifest.js
├── images
├── javascripts
│ ├── application.js
│ ├── cable.js
│ ├── channels
│ ├── item.coffee
│ ├── message.coffee
│ └── user.coffee
└── stylesheets
├── application.css
├── item.scss
├── message.scss
└── user.scss
5 directories, 10 files
このほかにもさまざまなオプションを指定できます。
インストール・Tips
For Linux
Linux の場合は yum でインストールします。
yum install tree
インストールできたことの確認:
$ tree --version
バージョンが表示されれば OK 。
For Mac
Mac の場合は homebrew でインストールできます。
$ brew install tree
インストールできたことの確認:
$ tree --version
バージョンが表示されれば OK 。
Tips (文字化けするとき)
Linux だと罫線が文字化けすることがあります。
$ tree
.
tqq 404.html
tqq 422.html
tqq 500.html
tqq apple-touch-icon-precomposed.png
tqq apple-touch-icon.png
tqq favicon.ico
mqq robots.txt
そんなときは --charset=C
を指定すると OK です。
$ tree --charset=C
.
├── 404.html
├── 422.html
├── 500.html
├── apple-touch-icon-precomposed.png
├── apple-touch-icon.png
├── favicon.ico
└── robots.txt
おわりに
tree コマンドによるコンソールでの樹形図表示、いかがでしたでしょうか。
便利だなと思った方、ぜひ今日インストールして使ってみてくださいね。
一度インストールしておけばずっと使えます。