Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Kuroi Gamenって何で使うの?

Kuroi Gamenって何で使うの?

2013/12/7に開催されたSaCSS SP4 Frontrend in Sapporoのセッションの資料です。

http://sacss.net/special04/#section04

HIRAKI Satoru

January 06, 2014
Tweet

More Decks by HIRAKI Satoru

Other Decks in Programming

Transcript

  1. Kuroi Gamenって
    何で使うの?
    平木 聡 / Layzie
    CyberAgent, Inc.
    SaCSS Special 4 Frontrend in Sapporo

    View full-size slide

  2. About Me
    ‣ HIRAKI Satoru
    ‣ Layzie
    ‣ Frontend Engineer
    ‣ CyberAgent,Inc.

    View full-size slide

  3. Life goes on

    View full-size slide

  4. HTML5j English

    View full-size slide

  5. JavaScript Garden

    View full-size slide

  6. Agenda
    ‣ “黒い画面”はなぜ苦手に思えるの?
    ‣ “黒い画面”はどのように使うの?
    ‣ “黒い画面”を使うとどんな事が便利になるの?
    ‣ “黒い画面”に興味が出てきたら次はどうする?

    View full-size slide

  7. “黒い画面”はなぜ苦手に思えるの?

    View full-size slide

  8. What’s about “CUI”
    ‣ 黒い画面の正体はキャラクタユーザーインター
    フェース(CUI)
    ‣ 普段良く使うのはグラフィカルユーザーインター
    フェース(GUI)

    View full-size slide

  9. CUI vs GUI
    ‣ CUIはテキストでコンピュータに命令を送る
    ‣ GUIはグラフィックとポインティングデバイスでコ
    ンピュータに命令を送る

    View full-size slide

  10. “CUI” is similar
    to programming!

    View full-size slide

  11. Programmer vs Designer
    Programming

    Character

    No Adobe
    Designing

    Graphic

    Adobe
    vs

    View full-size slide

  12. CUI isn’t programming
    ‣ 見た目はプログラミングしてるみたいに見えて怖い
    かもしれないですが実際はそんなことないです
    ‣ 基本的なことが理解できれば使えます
    ‣ できるところから始めていきましょう

    View full-size slide

  13. “黒い画面”はどのように使うの?

    View full-size slide

  14. Unmask ‘Kuroi Gamen’
    ‣ 黒い画面と一口に言ってますが、実はこの正体はお
    おまかに、2つに分けられています。
    ‣ ターミナルエミュレータとシェルの2つです。

    View full-size slide

  15. Terminal Emulator
    ‣ 歴史的な経緯があり、Macなどで使用できる「ター
    ミナル」などはこのターミナルエミュレータになり
    ます。
    ‣ Macだと他に有名なもので「iTerm2」などがありま
    す。
    ‣ なんで、「エミュレータ」とついてるかというと
    VT100という「端末」をエミュレートしてるからで
    す。

    View full-size slide

  16. Shell
    ‣ ユーザーの入力をOSに橋渡しをする機能。
    ‣ 中心的な機能としては「他のプログラムの呼び出
    し」がある。
    ‣ CUIとしては、bash/tcsh/zshなどが有名。
    ‣ GUIとしては、Windows Exploreや、Mac OSの
    Finder。

    View full-size slide

  17. Compare CUI with GUI
    Shell
    OS
    Terminal Emulator
    Computer

    View full-size slide

  18. Use ‘Kuroi Gamen’
    ‣ Spotlightに「ter」と打ちこんでEnterが一番速く
    起動できます。

    View full-size slide

  19. Use ‘Kuroi Gamen’
    ‣ 人によっては画面がちょっと違うかもしれません
    が、こんな感じのターミナルが出てきます。

    View full-size slide

  20. Use ‘Kuroi Gamen’
    ‣ 自分はこんな感じです。

    View full-size slide

  21. How to learn commands
    ‣ 黒い画面といえば、「コマンド」ですがどうやって
    覚えれば良いのか?
    ‣ 基本コマンドは大体は「英単語の省略」とかが多い
    です。
    ‣ 他には「人の名前」とか「英単語そのまま」とかも
    あったりしますが…。

    View full-size slide

  22. How to learn commands
    ‣ ls…ディレクトリの内容を表示
    ‣ listの省略
    ‣ pwd…自分の今いるディレクトリを表示
    ‣ print working directoryの省略
    ‣ cd…ディレクトリを移動
    ‣ change directoryの省略

    View full-size slide

  23. How to learn commands
    ‣ mv…ファイル・ディレクトリの移動
    ‣ moveの省略
    ‣ cp…ファイル・ディレクトリのコピー
    ‣ copyの省略
    ‣ cat…ファイルを連結させたり表示する
    ‣ concatenateの省略

    View full-size slide

  24. That’s easy!

    View full-size slide

  25. How to learn filesystem
    ‣ 相対パス
    ‣ ../→1つ上のディレクトリ
    ‣ ./→同階層のディレクトリ
    ‣ 絶対パス
    ‣ /Users/NAME/→ユーザーのホームディレクトリ
    ‣ /usr/local→usr内のlocalディレクトリ

    View full-size slide

  26. How to learn filesystem
    ‣ 特殊なシンボル
    ‣ /→一番上位のディレクトリ
    ‣ ~→ユーザーのホームディレクトリ

    View full-size slide

  27. That’s easy!

    View full-size slide

  28. How to use command
    ‣ mv hoge.txt fuga.txt
    ‣ hoge.txtをfuga.txtに名前変更
    ‣ cp hoge.txt ../hogera/
    ‣ hoge.txtを1つ上のディレクトリのhogeraにコ
    ピー

    View full-size slide

  29. How to use command
    ‣ 実はコマンドは「TAB」キーを使うと補完してくれ
    ます。
    ‣ コマンドだけじゃなく、ディレクトリやファイルの
    名前も「TAB」キーで補完されます。
    ‣ この補完は、設定などの環境によって挙動が挙動が
    違ってきますが上記の補完は大体の環境で使えま
    す。

    View full-size slide

  30. How to use command
    ‣ 例えば、mv hoge.txt ../fuga.txtというコマンド
    を入力する場合…
    ‣ mvを入力してから、hogくらいまで入力して「TAB」
    を押すと候補を上げてくれて、hogまでのファイル
    名がhoge.txtだけなら1発で入力までされます。
    ‣ 同じように../fugまで入力して「TAB」を押すと補
    完されます。
    ‣ コマンドもディレクトリも大体3文字くらい入力す
    ると目的のものを補完しやすくなります。

    View full-size slide

  31. That’s easy!

    View full-size slide

  32. When in trouble…
    ‣ 何か動作おかしいなどがあったら…
    ‣ Ctrl-CやCtrl-Dを押すと何とかなります。
    ‣ 画面が切り変わらないとかずーっと文字が流れてる
    というときに使いましょう。

    View full-size slide

  33. That’s easy!

    View full-size slide

  34. “黒い画面”を使うと
    どんな事が便利になるの?

    View full-size slide

  35. Why use ‘Kuroi Gamen’
    ‣ なぜ苦労してまで「黒い画面」を使うのか?
    ‣ もちろんメリットがないとやってられません。

    View full-size slide

  36. ‘CUI’is faster than ‘GUI’

    View full-size slide

  37. ‘CUI’is faster than ‘GUI’
    ‣ GUIでの処理するよりもCUIの方が速く操作できるこ
    とがほとんどです
    ‣ cp hoge.txt fuga.txtで同階層にコピーできますが
    ‣ GUIではマウスでhoge.txt選択→Option押しながら
    ドラッグ→名前を変更となります

    View full-size slide

  38. ‘CUI’is faster than ‘GUI’
    ‣ 先程「TAB」キーでコマンドやディレクトリの補完
    ができると、ご紹介しましたが他にも速く操作する
    ための機能がCUIにはあります。
    ‣ ↑キーかControlとPを同時に押すと1つ前に入力し
    たコマンドが使えます。↑で前の履歴、↓で新しい
    履歴を辿れます。
    ‣ historyコマンドを打つと履歴が見れたり操作でき
    ます。

    View full-size slide

  39. Your works can be recorded

    View full-size slide

  40. Your works can be recorded
    ‣ 自分の作業記録が残ってます
    ‣ そのままログとして残しておくと次に同じような作
    業が発生したときに参考にできます

    View full-size slide

  41. No more simple works

    View full-size slide

  42. No more simple works
    ‣ パターン化した作業が一発でできるようになります
    ‣ 今いるディレクトリにある2000個のjpgファイルを
    消す場合…$ find . -name test*.jpg | xargs rm

    View full-size slide

  43. Automatic
    ‣ ShellScriptなど使えるようになると、毎日の定型
    作業なんかが(ほぼ)自動化できます
    ‣ GNU MakeやGrunt.jsなどもCUIです
    ‣ この部分がCUIを使う最大の利点だと思います

    View full-size slide

  44. “黒い画面”に興味が出てきたら次はどうする?

    View full-size slide

  45. Package Manager
    ‣ CUIに慣れてきたら、「こんなことできればなー」
    という要望が出てきます
    ‣ 標準のコマンドとは別に色々なコマンドをさくっと
    入れることを可能にする「パッケージマネージャ」
    というものがあります
    ‣ Macで入れられる代表的なものを紹介します

    View full-size slide

  46. Useful Commands

    View full-size slide

  47. Useful Commands
    ‣ パッケージマネージャを入れるとそれぞれで便利な
    コマンドがインストールして使えるようになります
    ‣ 独断と偏見でちょっとピックアップしてみます

    View full-size slide

  48. Element Finder

    View full-size slide

  49. Conclusion
    ‣ 分かってみるとCUIだからといっても基本はそんな
    に難しくないです
    ‣ 定型処理とか履歴が残るとかは本当に便利
    ‣ 最近のWeb開発にはCUIパワーが欠かせなくなってき
    てます

    View full-size slide

  50. Credit
    ‣http://www.flickr.com/photos/riff-o-matic/8400640564

    ‣http://www.flickr.com/photos/69184488@N06/8091028991

    ‣http://www.flickr.com/photos/steveluscher/394265766

    ‣http://www.flickr.com/photos/96829830@N04/9041353491/

    ‣http://www.flickr.com/photos/spackletoe/90811910

    ‣http://www.flickr.com/photos/martin_heigan/4544138976

    ‣http://www.flickr.com/photos/angeljohnson/6179338994

    ‣http://www.flickr.com/photos/104178037@N08/10069702514

    ‣http://www.flickr.com/photos/melitron/4923829202

    ‣http://www.flickr.com/photos/crystalflickr/2317183342

    ‣http://www.flickr.com/photos/waynetd/2247247679

    ‣http://www.flickr.com/photos/louisephotography/5796499806

    ‣http://www.flickr.com/photos/nicopierce/5964560488

    View full-size slide

  51. Credit
    ‣http://icons8.com

    ‣https://www.iconfinder.com/trysoda

    ‣http://dribbble.com/shots/1118732-Sevenesque-An-iOS7-
    inspired-Mac-icon-set

    ‣https://www.iconfinder.com/icons/173821/
    terminal_icon#size=128

    View full-size slide