Kuroi Gamenって何で使うの?

Kuroi Gamenって何で使うの?

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

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

7abf6b0f75a5facea016cc58485a4a45?s=128

HIRAKI Satoru

January 06, 2014
Tweet

Transcript

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

    Special 4 Frontrend in Sapporo
  2. About Me ‣ HIRAKI Satoru ‣ Layzie ‣ Frontend Engineer

    ‣ CyberAgent,Inc.
  3. Life goes on

  4. HTML5j English

  5. enja-oss

  6. JavaScript Garden

  7. HTML5 ROCKS

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

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

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

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

  12. “CUI” is similar to programming!

  13. Programmer vs Designer Programming Character No Adobe Designing Graphic Adobe

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

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

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

  17. Terminal Emulator ‣ 歴史的な経緯があり、Macなどで使用できる「ター ミナル」などはこのターミナルエミュレータになり ます。 ‣ Macだと他に有名なもので「iTerm2」などがありま す。 ‣

    なんで、「エミュレータ」とついてるかというと VT100という「端末」をエミュレートしてるからで す。
  18. Shell ‣ ユーザーの入力をOSに橋渡しをする機能。 ‣ 中心的な機能としては「他のプログラムの呼び出 し」がある。 ‣ CUIとしては、bash/tcsh/zshなどが有名。 ‣ GUIとしては、Windows

    Exploreや、Mac OSの Finder。
  19. Compare CUI with GUI Shell OS Terminal Emulator Computer

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

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

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

  23. How to learn commands ‣ 黒い画面といえば、「コマンド」ですがどうやって 覚えれば良いのか? ‣ 基本コマンドは大体は「英単語の省略」とかが多い です。

    ‣ 他には「人の名前」とか「英単語そのまま」とかも あったりしますが…。
  24. How to learn commands ‣ ls…ディレクトリの内容を表示 ‣ listの省略 ‣ pwd…自分の今いるディレクトリを表示

    ‣ print working directoryの省略 ‣ cd…ディレクトリを移動 ‣ change directoryの省略
  25. How to learn commands ‣ mv…ファイル・ディレクトリの移動 ‣ moveの省略 ‣ cp…ファイル・ディレクトリのコピー

    ‣ copyの省略 ‣ cat…ファイルを連結させたり表示する ‣ concatenateの省略
  26. That’s easy!

  27. How to learn filesystem ‣ 相対パス ‣ ../→1つ上のディレクトリ ‣ ./→同階層のディレクトリ

    ‣ 絶対パス ‣ /Users/NAME/→ユーザーのホームディレクトリ ‣ /usr/local→usr内のlocalディレクトリ
  28. How to learn filesystem ‣ 特殊なシンボル ‣ /→一番上位のディレクトリ ‣ ~→ユーザーのホームディレクトリ

  29. That’s easy!

  30. How to use command ‣ mv hoge.txt fuga.txt ‣ hoge.txtをfuga.txtに名前変更

    ‣ cp hoge.txt ../hogera/ ‣ hoge.txtを1つ上のディレクトリのhogeraにコ ピー
  31. How to use command ‣ 実はコマンドは「TAB」キーを使うと補完してくれ ます。 ‣ コマンドだけじゃなく、ディレクトリやファイルの 名前も「TAB」キーで補完されます。

    ‣ この補完は、設定などの環境によって挙動が挙動が 違ってきますが上記の補完は大体の環境で使えま す。
  32. How to use command ‣ 例えば、mv hoge.txt ../fuga.txtというコマンド を入力する場合… ‣

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

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

  35. That’s easy!

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

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

  38. ‘CUI’is faster than ‘GUI’

  39. ‘CUI’is faster than ‘GUI’ ‣ GUIでの処理するよりもCUIの方が速く操作できるこ とがほとんどです ‣ cp hoge.txt

    fuga.txtで同階層にコピーできますが ‣ GUIではマウスでhoge.txt選択→Option押しながら ドラッグ→名前を変更となります
  40. ‘CUI’is faster than ‘GUI’ ‣ 先程「TAB」キーでコマンドやディレクトリの補完 ができると、ご紹介しましたが他にも速く操作する ための機能がCUIにはあります。 ‣ ↑キーかControlとPを同時に押すと1つ前に入力し

    たコマンドが使えます。↑で前の履歴、↓で新しい 履歴を辿れます。 ‣ historyコマンドを打つと履歴が見れたり操作でき ます。
  41. Your works can be recorded

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

  43. No more simple works

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

    . -name test*.jpg | xargs rm
  45. Automatic

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

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

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

    Macで入れられる代表的なものを紹介します
  49. Homebrew

  50. npm

  51. RubyGems

  52. PyPI

  53. Useful Commands

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

  55. Grunt.js

  56. Bower

  57. Yeoman

  58. Mimosa

  59. CSSLint

  60. Styledocco

  61. Element Finder

  62. Glue

  63. jekyll

  64. ack

  65. Conclusion

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

  67. Thank you!

  68. 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
  69. 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