黒い画面 入門 - CSS Nite

Webデザイナーのための
「本当は怖くない」
黒い画面 入門
Masaki Komagata @ FJORD, LLC
komagata
と申します
Lokka という CMS を
作ってます
http://lokka.org
Lokka という CMS を
作ってます
黒い画面が必要
ですが・・・
http://lokka.org
フィヨルド
FJORD, LLC という
会社で働いています。
FJORD, LLC は
プログラマー １人
デザイナー １人
FJORD, LLC は
プログラマー １人
員
社
全
、
上
以
デザイナー １人
2人 だけの会社
でも、
いくつかWebサービスを作ってます
http://help-me-hackers.com
http://makesthis.com
http://hamcutlet.fjord.jp/
現在も新サービス製作中
近日公開！
ブログも書いてます
個人ブログ
会社ブログ
黒い画面のブログ
意外とやることが多い
デザイナーがデザインを入れた
HTMLとCSSをプログラマーに渡して
プログラマーがシステムに組み込む
デザイナーがデザインを入れた
そんな余裕がない！
HTMLとCSSをプログラマーに渡して
黒い画面を使って
プログラマーがシステムに組み込む
自分でデザイン入れて
・・・くれるとありがたい
FJORD,LLC は
プログラマー、デザイナー共に
黒い画面を使ってます。
FJORD,LLC は
プログラマー、デザイナー共に
黒い画面を使ってます。
使わされてます
デザイナーが黒い画面を
使えるようになったら
デザイナーが黒い画面を
る
す
生
発
で
い
使えるようになったら
せ
の
方
め
進
な
的
間
接
手
間
度
三
、
間
手
度
二
デザイナーが黒い画面を
余計なMT
G
る
す
生
発
で
い
使えるようになったら
せ
の
方
め
進
な
的
間
接
手
間
度
三
、
間
手
度
二
デザイナーが黒い画面を
余計なMT
G
る
す
生
発
で
い
使えるようになったら
せ
の
方
め
進
な
的
間
接
手
間
度
解
理
三
不
の
へ
ム
、
テ
ス
シ
間
手
度
二
い
違
勘
る
く
から
デザイナーが黒い画面を
使えるようになったら
手間が減った！
圧倒的に
開発スピードが向上した
黒い画面？
プログラマーがいつも使ってるコレ
怖い
今日のテーマ
黒い画面は怖くないよ！
今日お話しすること
•
“黒い画面”
を使うメリット
•
“黒い画面”
入門
•
“黒い画面” とは何か
“黒い画面” とは何か
黒い画面怖くないよ！
Macの場合は
「ユーティリティ」
フォルダの中にある
ターミナルというソフトのこと
これが
“黒い画面”
の正体
ちなみに、
これを立ち上げると…
文字ばっかり
この文字ばっかりの
インターフェイスを
CUI
と呼びます
CUIとは…
昔ながらの文字とキーボード操作
CUI は文字を打って
操作をします。
一方、いつもデザイナーが使ってるPhotoshopなど、
慣れ親しんだカラフルなアイコンとマウス操作の
インターフェイスのことを
GUI
と呼びます
“黒い画面” を使うメリット
黒い画面怖くないよ！
“黒い画面” を使うメリット
フリーソフトが沢山
“黒い画面” を使うメリット
新しいツールは “黒い画面” から
• 新しいツールはまず “黒い画面” の
ソフトとして登場する
• 成熟したころに “GUI版” が出る
• sass, git, Subversion ...
“黒い画面” を使うメリット
仕事が増える
システム会社の本音
• 二度手間になるのでHTML納品じゃなくて
直接デザインいれて欲しい・・・
• FTPじゃなくてバージョン管理ツールを
使って欲しい・・・
これらには “黒い画面” が
必要不可欠
そんな無茶な・・・
無茶だからこそ
やってくれる
デザイン会社があると
すごくうれしい・・・
デザイナーが黒い画面を
余計なMT
G
る
す
生
発
で
い
使えるようになったら
せ
の
方
め
進
な
的
間
接
手
間
度
解
理
三
不
の
へ
ム
、
テ
ス
シ
間
手
度
二
い
違
勘
る
く
から
デザイナーが黒い画面を
余計なMT
G
る
す
生
発
で
い
使えるようになったら
せ
の
方
め
進
な
的
間
接
手
間
度
解
理
三
不
の
へ
ム
、
テ
ス
シ
間
手
度
二
い
違
勘
る
く
から
手間を減らしたいのは
システム会社も同じ！
だから“黒い画面” が使えると
だから“黒い画面” が使えると
仕事が増える
実際あった
合同会社モバリーンが運営する
「Doorkeeper」というサービスに
“黒い画面” を使ってデザインを入れる
お仕事をさせていただきました。
モバリーンのポールさんに聞いてみた。
「CSS Nite の発表でデザインの実績に
Doorkeeper載せていいですか？」
返信のメールには…
ぜひ、Doorkeeperを紹介してください！
フィヨルドは黒画面ができる理由で選んだので、
駒形さんの発表と合わせいるかもしれません。
ブログでも紹介してください。
よろしくお願いします。
ポール
注）原文そのまま
“黒画面ができる
理由で選んだので”
仕事・・・
来る！
このサイトも “黒い画面” を
使ってデザインを入れました
http://foodfoto.jp
無茶と言いましたが
使ってみれば大したことない
「使ってみれば大したことない」
「使ってみれば大したことない (ｷﾘｯ」
って言ってました・・・。
(@machida談)
例えば...
デザイナー
「この部分をちょっと
修正したいんですが大変ですか？」
プログラマー
「簡単なんですが ”黒い画面” を
使う必要があるんですよね」
デザイナー
「あぁ・・・じゃあいいです・・・」
諦めんなよ！
“黒い画面” は難しくない
• みんなのパソコンに最初から入ってる
• Photoshopの方が100倍難しい
• 慣れの問題
“黒い画面” 入門
黒い画面怖くないよ！
とにかく
使ってみます
起動
殺風景な見た目ですが、くじけない
っていうか・・・
私の黒い画面、白すぎ・・・
なんとMacのターミナルのデフォルトは
白なんです
冗談じゃない！
ターミナルは黒背景に 緑文字 だろ！
設定で変えられます
是非変えてください
変えてみました
テンション上がってきた
気をとりなおしてはじめます
$マークの右に文字を入れてく
“黒い画面” での
プログラムの実行の仕方
Finderではプログラムのアイコンを
“ダブルクリック” しますが、
“黒い画面” ではプログラムの
“ファイル名” を入力します。
ファイル名を入力する
ファイル名を入力する
“ダブルクリック”
じゃなくて
ファイル名を入力する
大切な事なので
２度言いました
基本、これだけ
それでは “黒い画面” 用プログラムを
実際に使ってみます
自分の Mac に /bin というフォルダが
あるのをご存知でしょうか？
/bin
これが全部 “黒い画面” 用プログラム
沢山ありますね（グロイ・・・）
まず ls というプログラムを
使ってみます
コレ
先程言ったように
“ダブルクリック” じゃなく、
ls の「場所」と「ファイル名」を
きっちり入力します
「場所」と「ファイル」名
入力
きっちり入力
入力したら “enter”
何か出た！
ls（エルエス）
• ファイルの一覧を表示するプログラム
• listの略
ファイルの一覧を表示するプログラム
ファイルの一覧を表示するプログラム
簡単
なんだったらもう一回
ファイル名を入力する
“黒い画面” の使い方はコレに尽きる
“黒い画面” は難しくない
もうひとつ、
プログラムの使い方を
覚えてみます
また/binを見る
コレ
ファイル名を入力
ファイル名を入力
スペース入れて文字を入れると
プログラムに文字を渡すことができる
渡す
プログラムに文字を渡すことができる
“enter” 押して実行
何か出た
echo（エコー）
• 渡した文字をそのまま表示する
プログラム
• echo（反響・やまびこ）の意味
渡した文字を
そのまま表示するプログラム
なんだったら別の文字も
スペースで区切れば
何個も文字を渡せます
何個も渡せる
何個も渡せる
“enter”
echoは
「渡した文字を全部表示」する
“黒い画面” のプログラムは
渡す文字によって動きが変わる
渡す文字によって
動きが変わる
例えば ls の場合 -a を渡すと
隠しファイルも表示する
渡す文字によって動きが変わる
どんなプログラムでもそれが基本
豆知識
ファイル名を入力するといいましたが
こんな場所にあったら面倒臭い
なので
フォルダ名を省略できます
!!
実は・・・
ls も
フォルダ名を省略できます
!!
echo も・・・
省略できます
というより
/binに入ってるものは全部省略可能
!!
特定のフォルダは省略できるように
なっています
• /bin
• /usr/bin
• /sbin/
• /usr/sbin
好きなフォルダを追加することも可能
• /bin
• /usr/bin
• /sbin/
• /usr/sbin
• /Users/komagata/program/favorite
“黒い画面” 基本終了
Sass を使う
sass（サス）
• 楽な構文で CSS が書けるツール
• “.sass” や “.scss” で書いたファイルを
“.css” に変換してくれる
こういうのを
こう変換してくれる
タイトルに共通した要素を
一箇所に書いておいて
適用したい要素に@includeと
書いておくと
それぞれの要素に入れてくれる
以前のCSS Niteでもっと詳しく説明されています
CPI x CSS Nite「After Dark」（1）
『マジすごいのに誰も使ってない
Sass、徹底解説』
“黒い画面”でsassを使ってみます
あらかじめ sass を
インストールしておきまし
sass の使い方
scss の形式で書いた
テキストファイル
こういう css に
変換したい場合
sass に・・・
「scss ファイル名」と
「css ファイル名」を渡す
“enter”
cssファイルができてる
ちゃんと変換されてる
もっと進んだ使い方がしたい方は
--helpを付けると
詳しい使い方が表示されます
大抵のソフトは
--help でヘルプを表示
どうでしょうか？
「“黒い画面” は難しくない」
と感じていただけたでしょうか？
「やってみようかな？」と
思った方はこちらへ
連載：Webデザイナーのための「本当は怖くない」”黒い画面”入門
http://fjord.jp/love/548.html
入門の次はこちらへ
KUROIGAMEN
http://kuroigamen.com
まとめ
• “黒い画面” は難しくない
• ファイル名を入力して実行する
• 渡す文字によって動作が変わる
以上です。
ありがとうございました。