Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Life goes on

Slide 4

Slide 4 text

HTML5j English

Slide 5

Slide 5 text

enja-oss

Slide 6

Slide 6 text

JavaScript Garden

Slide 7

Slide 7 text

HTML5 ROCKS

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

“CUI” is similar to programming!

Slide 13

Slide 13 text

Programmer vs Designer Programming Character No Adobe Designing Graphic Adobe vs

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

“黒い画面”はどのように使うの？

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Compare CUI with GUI Shell OS Terminal Emulator Computer

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

That’s easy!

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

That’s easy!

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

That’s easy!

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

That’s easy!

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

‘CUI’is faster than ‘GUI’

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Your works can be recorded

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No more simple works

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Automatic

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Homebrew

Slide 50

Slide 50 text

npm

Slide 51

Slide 51 text

RubyGems

Slide 52

Slide 52 text

PyPI

Slide 53

Slide 53 text

Useful Commands

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Grunt.js

Slide 56

Slide 56 text

Bower

Slide 57

Slide 57 text

Yeoman

Slide 58

Slide 58 text

Mimosa

Slide 59

Slide 59 text

CSSLint

Slide 60

Slide 60 text

Styledocco

Slide 61

Slide 61 text

Element Finder

Slide 62

Slide 62 text

Glue

Slide 63

Slide 63 text

jekyll

Slide 64

Slide 64 text

ack

Slide 65

Slide 65 text

Conclusion

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Thank you!

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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