Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Kuroi Gamenって何で使うの?
Search
HIRAKI Satoru
January 06, 2014
Programming
7
3.7k
Kuroi Gamenって何で使うの?
2013/12/7に開催されたSaCSS SP4 Frontrend in Sapporoのセッションの資料です。
http://sacss.net/special04/#section04
HIRAKI Satoru
January 06, 2014
Tweet
Share
More Decks by HIRAKI Satoru
See All by HIRAKI Satoru
About tc39/ecma262
layzie
2
1.3k
GitHub Enterprise for CyberAgent
layzie
0
160
情報化社会を この先生きのこるためには / Layzie@Frontrend in Kanazawa
layzie
9
6.9k
VimとTシャツと私 / Why I love vim so much?
layzie
1
280
TalkNote Vol.8「TalkNote × Frontrend」 - JavaScript開発の効率アップ -
layzie
8
460
JavaScript Development Tools
layzie
9
1.4k
Git & GitHub社内勉強会
layzie
3
880
GitとGithub初めの1歩
layzie
0
160
Other Decks in Programming
See All in Programming
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
200
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
130
php-conference-japan-2024
tasuku43
0
310
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
390
Keeping it Ruby: Why Your Product Needs a Ruby SDK - RubyWorld 2024
envek
0
190
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
450
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
170
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
800
useSyncExternalStoreを使いまくる
ssssota
6
1.1k
From Translations to Multi Dimension Entities
alexanderschranz
2
130
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
800
テストコード書いてみませんか?
onopon
2
130
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Automating Front-end Workflow
addyosmani
1366
200k
Typedesign – Prime Four
hannesfritz
40
2.4k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
How to Ace a Technical Interview
jacobian
276
23k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Bash Introduction
62gerente
608
210k
Transcript
Kuroi Gamenって 何で使うの? 平木 聡 / Layzie CyberAgent, Inc. SaCSS
Special 4 Frontrend in Sapporo
About Me ‣ HIRAKI Satoru ‣ Layzie ‣ Frontend Engineer
‣ CyberAgent,Inc.
Life goes on
HTML5j English
enja-oss
JavaScript Garden
HTML5 ROCKS
Agenda ‣ “黒い画面”はなぜ苦手に思えるの? ‣ “黒い画面”はどのように使うの? ‣ “黒い画面”を使うとどんな事が便利になるの? ‣ “黒い画面”に興味が出てきたら次はどうする?
“黒い画面”はなぜ苦手に思えるの?
What’s about “CUI” ‣ 黒い画面の正体はキャラクタユーザーインター フェース(CUI) ‣ 普段良く使うのはグラフィカルユーザーインター フェース(GUI)
CUI vs GUI ‣ CUIはテキストでコンピュータに命令を送る ‣ GUIはグラフィックとポインティングデバイスでコ ンピュータに命令を送る
“CUI” is similar to programming!
Programmer vs Designer Programming Character No Adobe Designing Graphic Adobe
vs
CUI isn’t programming ‣ 見た目はプログラミングしてるみたいに見えて怖い かもしれないですが実際はそんなことないです ‣ 基本的なことが理解できれば使えます ‣ できるところから始めていきましょう
“黒い画面”はどのように使うの?
Unmask ‘Kuroi Gamen’ ‣ 黒い画面と一口に言ってますが、実はこの正体はお おまかに、2つに分けられています。 ‣ ターミナルエミュレータとシェルの2つです。
Terminal Emulator ‣ 歴史的な経緯があり、Macなどで使用できる「ター ミナル」などはこのターミナルエミュレータになり ます。 ‣ Macだと他に有名なもので「iTerm2」などがありま す。 ‣
なんで、「エミュレータ」とついてるかというと VT100という「端末」をエミュレートしてるからで す。
Shell ‣ ユーザーの入力をOSに橋渡しをする機能。 ‣ 中心的な機能としては「他のプログラムの呼び出 し」がある。 ‣ CUIとしては、bash/tcsh/zshなどが有名。 ‣ GUIとしては、Windows
Exploreや、Mac OSの Finder。
Compare CUI with GUI Shell OS Terminal Emulator Computer
Use ‘Kuroi Gamen’ ‣ Spotlightに「ter」と打ちこんでEnterが一番速く 起動できます。
Use ‘Kuroi Gamen’ ‣ 人によっては画面がちょっと違うかもしれません が、こんな感じのターミナルが出てきます。
Use ‘Kuroi Gamen’ ‣ 自分はこんな感じです。
How to learn commands ‣ 黒い画面といえば、「コマンド」ですがどうやって 覚えれば良いのか? ‣ 基本コマンドは大体は「英単語の省略」とかが多い です。
‣ 他には「人の名前」とか「英単語そのまま」とかも あったりしますが…。
How to learn commands ‣ ls…ディレクトリの内容を表示 ‣ listの省略 ‣ pwd…自分の今いるディレクトリを表示
‣ print working directoryの省略 ‣ cd…ディレクトリを移動 ‣ change directoryの省略
How to learn commands ‣ mv…ファイル・ディレクトリの移動 ‣ moveの省略 ‣ cp…ファイル・ディレクトリのコピー
‣ copyの省略 ‣ cat…ファイルを連結させたり表示する ‣ concatenateの省略
That’s easy!
How to learn filesystem ‣ 相対パス ‣ ../→1つ上のディレクトリ ‣ ./→同階層のディレクトリ
‣ 絶対パス ‣ /Users/NAME/→ユーザーのホームディレクトリ ‣ /usr/local→usr内のlocalディレクトリ
How to learn filesystem ‣ 特殊なシンボル ‣ /→一番上位のディレクトリ ‣ ~→ユーザーのホームディレクトリ
That’s easy!
How to use command ‣ mv hoge.txt fuga.txt ‣ hoge.txtをfuga.txtに名前変更
‣ cp hoge.txt ../hogera/ ‣ hoge.txtを1つ上のディレクトリのhogeraにコ ピー
How to use command ‣ 実はコマンドは「TAB」キーを使うと補完してくれ ます。 ‣ コマンドだけじゃなく、ディレクトリやファイルの 名前も「TAB」キーで補完されます。
‣ この補完は、設定などの環境によって挙動が挙動が 違ってきますが上記の補完は大体の環境で使えま す。
How to use command ‣ 例えば、mv hoge.txt ../fuga.txtというコマンド を入力する場合… ‣
mvを入力してから、hogくらいまで入力して「TAB」 を押すと候補を上げてくれて、hogまでのファイル 名がhoge.txtだけなら1発で入力までされます。 ‣ 同じように../fugまで入力して「TAB」を押すと補 完されます。 ‣ コマンドもディレクトリも大体3文字くらい入力す ると目的のものを補完しやすくなります。
That’s easy!
When in trouble… ‣ 何か動作おかしいなどがあったら… ‣ Ctrl-CやCtrl-Dを押すと何とかなります。 ‣ 画面が切り変わらないとかずーっと文字が流れてる というときに使いましょう。
That’s easy!
“黒い画面”を使うと どんな事が便利になるの?
Why use ‘Kuroi Gamen’ ‣ なぜ苦労してまで「黒い画面」を使うのか? ‣ もちろんメリットがないとやってられません。
‘CUI’is faster than ‘GUI’
‘CUI’is faster than ‘GUI’ ‣ GUIでの処理するよりもCUIの方が速く操作できるこ とがほとんどです ‣ cp hoge.txt
fuga.txtで同階層にコピーできますが ‣ GUIではマウスでhoge.txt選択→Option押しながら ドラッグ→名前を変更となります
‘CUI’is faster than ‘GUI’ ‣ 先程「TAB」キーでコマンドやディレクトリの補完 ができると、ご紹介しましたが他にも速く操作する ための機能がCUIにはあります。 ‣ ↑キーかControlとPを同時に押すと1つ前に入力し
たコマンドが使えます。↑で前の履歴、↓で新しい 履歴を辿れます。 ‣ historyコマンドを打つと履歴が見れたり操作でき ます。
Your works can be recorded
Your works can be recorded ‣ 自分の作業記録が残ってます ‣ そのままログとして残しておくと次に同じような作 業が発生したときに参考にできます
No more simple works
No more simple works ‣ パターン化した作業が一発でできるようになります ‣ 今いるディレクトリにある2000個のjpgファイルを 消す場合…$ find
. -name test*.jpg | xargs rm
Automatic
Automatic ‣ ShellScriptなど使えるようになると、毎日の定型 作業なんかが(ほぼ)自動化できます ‣ GNU MakeやGrunt.jsなどもCUIです ‣ この部分がCUIを使う最大の利点だと思います
“黒い画面”に興味が出てきたら次はどうする?
Package Manager ‣ CUIに慣れてきたら、「こんなことできればなー」 という要望が出てきます ‣ 標準のコマンドとは別に色々なコマンドをさくっと 入れることを可能にする「パッケージマネージャ」 というものがあります ‣
Macで入れられる代表的なものを紹介します
Homebrew
npm
RubyGems
PyPI
Useful Commands
Useful Commands ‣ パッケージマネージャを入れるとそれぞれで便利な コマンドがインストールして使えるようになります ‣ 独断と偏見でちょっとピックアップしてみます
Grunt.js
Bower
Yeoman
Mimosa
CSSLint
Styledocco
Element Finder
Glue
jekyll
ack
Conclusion
Conclusion ‣ 分かってみるとCUIだからといっても基本はそんな に難しくないです ‣ 定型処理とか履歴が残るとかは本当に便利 ‣ 最近のWeb開発にはCUIパワーが欠かせなくなってき てます
Thank you!
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
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