Kuroi Gamenって何で使うの？

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

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

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