세키야 마유코

프로그래머로 부터 배우는

코딩 기술 プログラマから学ぶ コーディングテクニック

S E K I Y A M a y u k o

About me

Call me!

화가 날때는 저를 불러주세요!세키야--------!!!!

イライラしたときは、どうぞ私の名前を呼んでください

10 년 가까이Web 디자인을 했다.

10年近くWebデザインを行ってきた

About me

지난해 새로운 회사에서3 명의 프로그래머와 함께 일하기 시작했다

昨年転職し、3人のプログラマと小さな会社で働きはじめた

Mac으로 개발

Macで開発

지금은

Ruby on Rails에의한

개발이 중심

今は Ruby on Rails による開発が中心

주요 역할은 Web 디자인하지만 직장에서

프로그램을

사용하게 되었다

主な役目はWebデザイン でも仕事でプログラムも書くようになってきた

仕事でプログラマといっしょに プログラムを書くようになって その開発方法が効率的であると思いました

그 개발 방법이효율적이란것을 깨달았다

직장에서 프로그래머와 함께프로그램을 작성하도록 되었는데...

プログラマーの開発方法を　HTMLやCSSのコーディングにも活かすことで、みなさんのコーディングライフが変わります

프로그래머의 개발 방법을

HTML과

CSS 코딩에 활용함으로써,

여러분의 코딩 수명이 달라집니다.

今日はその一部を 4つのポイントに絞って ご紹介したいと思います

그 일부를

4 개의 포인트를

소개 합니다

1. 프로그래머는 거의 마우스를 사용하지 않아

2. 프로그래머 시간 여행자

3. 프로그래머 동일한 일을 반복하는걸 싫어함

4. 프로그래머는 알기 쉬운 것이 좋아

프로그래머는 거의마우스를 사용하지 않아

プログラマは　あまりマウスを使わない

1

キーボードだけでコーディングすることに特化したエディタがあります

EmacsTextMate Vim

http : / /www.v im.org/

Vim

Unix에서 탄생하고,

터미널에서 사용할 수

편집기

20 년 전부터 사용되어 왔습니다

Unix生まれの、ターミナルから使えるエディタ　̶　20年も前から使われてきました

Unix에서 태어났지만,

Windows, Mac 버전도 있다

Unix生まれではありますが、Windows版、Mac版もあります

Point

터미널 완결시킬 수있다

ターミナルで完結させることができる

Terminal

Terminal

Applications ▶ Utilities ▶ Terminal.app

Terminal

통합 개발 환경

(Aptana, NetBeans, Eclipse ...) 나

제작 도구(DreamWeaver. ..)에 비해

가볍다

有名な統合開発環境やオーサリングツールに比べて軽い

Why Vim ?

① 부드러운 이동

② 부드러운 Copy & Paste

③ 자유로운 화면 레이아웃

① スムーズな移動　② スムーズなCopy & Paste　③　自由な画面レイアウト

ソースを縦にも横にも自由に分割したり、カレンダーを表示したりもできます

Key

열기 　　　vim /path/to/filename

저장 　 : w

닫기 　 : w

Save & Quit

삽입 모드 　i

노멀 모드 　 esc

비주얼 모드 Ctrl + v

명령 모드 :

Mode

오른쪽

아래

에

왼쪽

첫 번째 라인

마지막 라인

줄

h

j

k

l

g g

G

: n

Move

글머리

줄의 끝

이전 단어

다음 단어

해당 괄호

0

$

b

w

%

Move

Copy(yank)

Paste

y

p

Copy & Paste

“ + a y ... 첫 번째 복사

“ + b y ... 두 번째 복사

“ + a p ... 1 번째로 복사한 내용이 붙여넣기되는

이름을 붙이면서 여러 복사본을돌려 좋아하는 것을 붙여넣을 수

Multiple copies

상하 분할 　　　 : sp

좌우로 분할 　　　 : vsp

탭으로 열기 　 　　 : tabnew filename

창을 이동 　　　Ctrl + w w

다음 탭으로 이동 　g t

Windows & Tabs

커스텀

カスタマイズ

.vimrc

통합 개발 환경

(Aptana, NetBeans, Eclipse ...) 나

제작 도구

(DreamWeaver. ..)에서 할 수있는

사용자 정의할

대략 보충할

統合開発環境 (Aptana、NetBeans、Eclipse...)や オーサリングツール (DreamWeaver...) でできることは カスタマイズで大体補える

3923 개Vim Script를

이용 가능2012 년 3 월 현재

여기에서 찾을 수 있습니다

http : / /www.v im.org/scr ipts/ index.php

"vim scripts" 검색

2012年3月時点で、3,923個のVim Scriptを利用することが可能

➜ surround.vimhttp : / /www.v im.org/scr ipts/scr ipt .php?scr ipt_ id=1697

➜ zen-coding.vimhttp : / /mattn .g i thub.com/zencoding-v im/

"vim" 검색http : / /www.v im.org/download.php

インストールは “vim” で検索

Install

익숙해질 때까지 조금 땀남

익숙해지면쓰지 않고는 못 견딘다

慣れるまでは少し大変　→　慣れるとやめられなくなる

➜

http : / /www.yes24.com/24/goods/4810592?scode=032&OzSrank=2

More

편리 !

便利！

1. 프로그래머는 거의 마우스를 사용하지 않아

2. 프로그래머 시간 여행자

3. 프로그래머 동일한 일을 반복하는걸 싫어함

4. 프로그래머는 알기 쉬운 것이 좋아

프로그래머시간 여행자

プログラマは　タイムトラベラー

2

バージョン管理ツールを使う

버전 관리 도구를 사용

MercurialSubversion Git

http : / /g i t -scm.com/

분산 버전 관리 시스템

Git

여러 사람이 공동 작업을

하는 경우 편리

複数人で 共同作業を行うとき、 とても便利

Subversion보다

좋은 곳

例えば Subversionより よいところは、分散リポジトリであるという点

분산 저장소

分散バージョン管理システム

Localrepository

Localrepository

Localrepository

Localrepository

Remoterepository

clone / pull➜

➜

분산 버전 관리 시스템

push

いろんなバージョンを気軽に試作

여러가지 버전을부담없이 시작

Branch

いろんなバージョンを気軽に試作

여러가지 버전을부담없이 시작

Branch

git branch my-test

うまくいった試作を取り込む

잘 된 것을 모두의 곳에 도입

Merge

➜merge

うまくいった試作を取り込む

잘 된 것을 모두의 곳에 도입

Merge

git merge my-test

캠페인 페이지를 만드는 중입니다.

절반 정도 작업을 마친 곳에,

서둘러 편지를 수정.

수정 수행해야 것을 공개하고,

그 캠페인 페이지 작업을 재개하고 싶다.

Situation ①

キャンペーンページを作成中。半分くらいの作業を終えたところで、取り急ぎ、差し込みの修正が。 ↓修正のみ行ったものを公開して、その後キャンペーンページの作業を再開したい

➜

stash하면 끝난 반 정도 작업을 일단 옆에 피한 상태가된다.기에서 편지를 수정하고 커밋.

Situation ①

git stash pop

stashすると終わった半分くらいの作業をいったん横によけた状態になる。ここで差し込みの修正を行う。差し込み修正の上に、よけておいた作業を戻して、更なる作業を続けることができる

연결 수정에, 잘 걸으 놓은 작업을 되돌리고,더 많은 작업을 계속한다.

git stash

모두 보이기 전에 경우

(2)와 (3) 없었던 것이있다みんなに見せる前であれば、

(2)と(3)を無かったことにできる

Situation ②(1) 배너를 덧붙였다

(2) 오자를 수정한

(3) 오탈자를 수정했지만, 오타가 아니므로 다시했다

(4) FAQ를 삭제한

Situation ②

git rebase -i mycommit

➜squash

터미널 완결시킬 수있다

Point

ターミナルで完結させることができる

Terminal

Aptana, Eclipse,DreamWeaver도

Aptana、Eclipse、DreamWeaverにもプラグインがある

플러그인이 있다

단일 어플리케이션도있다

デスクトップアプリもある

SmartGitTerminal msysGit

More

http : / /progi t .org/

"progit" 검색

Git을쓸 수 있으면

GitHub를 사용할 수 있다

git が使えると、github.comがつかえる

https: / /g i thub.com

GitHub유명한 오픈 소스는

대부분 여기에있다

PHP, WordPress, jQuery, Node.js, concrete5,CakePHP, Ruby on Rails, Linux, Homebrew,

Spree, Redmine, Twitter Bootstrap,MongoDB, Joomla, osCommerce ...

多くの有名なオープンソースプロジェクトも GitHubを使っています(WordPressも)

( WordPress도! )

편리 !

便利！

1. 프로그래머는 거의 마우스를 사용하지 않아

2. 프로그래머 시간 여행자

3. 프로그래머 동일한 일을 반복하는걸 싫어함

4. 프로그래머는 알기 쉬운 것이 좋아

프로그래머 동일한 일을반복하는걸싫어함

プログラマは　同じ事を繰り返すのが　きらい　　　

3 Hello~♪ Hello ~~ ♬Hello~♪ Hello ~~ ♬

Sass / SCSS

http : / /sass- lang.com/

gem install sass

다음 명령을칠 뿐입니다

このコマンドを打つだけです

Install

변수와 함수를 사용하여

CSS를 생성하기 위한 소스를 만들고,

거기에서 CSS 출력

変数や関数を使って、CSSを生成するためのソースをつくって、そこからCSSを出力する

➜ CSSSass

➜ CSSSass

엔지니어와 디자이너가 보는 것은

생성물을 만들기위한 소스만

エンジニアとデザイナーが見るのは、生成物をつくるためソースのみ

因にLessやStylusというのもあって, npmというNode Package Manager でインストール

원인에 Less와 Stylus 것도 있고,

npm는 Node Package Manager

에 설치할 수 있습니다

특징 :

特長：　包含、変数、mix-in

① 포함

② 변수

③ mix-in

① 포함

包含

article h1 { color: #999999; }

article h2 { color: #666666; }

article h2 span { color: #333333; }

CSS :

① 포함

包含

article h1 { color: #999999; }

article h2 { color: #666666; }

article h2 span { color: #333333; }

CSS :

① 포함

包含

article h1 color: #999 h2 color: #666 span color: #333

Sass :

"article"이라는

같은 반복

줄었습니다!“article” という、同じ繰り返しが減りました！

② 변수

変数

h1 { color: #666; }

h2 { margin: #999; }

CSS :

② 변수

変数

$baseColor: #333

h1 color: $baseColor

h2 color: $baseColor + #333

Sass :

변경의 번거로움이

줄어 듭니다！

変更の手間が減ります!

③ mix-in

.icons { margin: 10px; float: left; border: 3px; }

.thumbnails { margin: 10px; float: left; border: 5px; }

CSS :

mix-in

③ mix-in

.icons { margin: 10px; float: left; border: 3px; }

.thumbnails { margin: 10px; float: left; border: 5px; }

CSS :

mix-in

③ mix-in@mixin imgBase margin: 10px float: left

.icons @include imgBase border: 3px

.thumbnails @include imgBase border: 5px

Sass :

mix-in

③ mix-in@mixin imgBase margin: 10px float: left

.icons @include imgBase border: 3px

.thumbnails @include imgBase border: 5px

Sass :

mix-in

같은 반복이 줄었습니다!

同じ繰り返しが減りました！

margin: 10pxfloat: left

http : / / thesassway.com

More

"sass way" 검색

PHPプロダクトの WordPressのテーマも、Rubyのライブラリを利用して、Sassで簡単に書く事ができます

Forgehttp : / / forge. thethemefoundry.com/

Forgehttp : / / forge. thethemefoundry.com/manual

User's manual

편리 !

便利！

1. 프로그래머는 거의 마우스를 사용하지 않아

2. 프로그래머 시간 여행자

3. 프로그래머 동일한 일을 반복하는걸 싫어함

4. 프로그래머는 알기 쉬운 것이 좋아해

프로그래머는알기 쉬운 것이 좋아해

プログラマは　わかりやすいのが好き

4

CoffeeScript

http: / /cof feescr ipt .org/

JavaScript의

복잡성을 제거

JavaScriptの煩雑さを除去。 シンプルにわかりやすく書いて、あとは出力するだけ

간단하게 알기 쉽게 쓰고,

출력

출력 원본 소스

가독성을 중시

生成元ソースの可読性を重視

var name とか書かなくてよい

var name라고 쓰지 않는다

var myName;myName = "mayuco";

myName = "mayuco"

➜

JavaScript :

CoffeeScript :

function라고 쓰지 않는다

function と書かなくてよい

function sayHello (yourname){ return “Hello, ” + yourname };

sayHello = (yourname) -> “Hello, #{yourname}“

➜

JavaScript :

CoffeeScript :

npm install -g coffee-script

① Node.jsをインストール　②コマンドを打つ

Install

② 명령을

http : / /nodejs .org

① 설치 Node.js

Try

CoffeeScript의Web 사이트에 붙여으로 변환시킬 수 있습니다

http : / /coffeescr ipt .org/

CoffeeScriptのWebサイトに、貼付けて、変換させることができます

➜

" codekit " 검색

http : / / inc ident57.com/codeki t /インストールは “codekit” で検索

CodeKit

✤ Less, Sass, Stylus, CoffeeScript,

Jade, Haml

　이것 하나로 컴파일 가능

Less, Sass, Stylus, CoffeeScript, Jade, Haml がこれひとつでコンパイル可能

CodeKit

편리 !

便利！

Ruby on Rails에서는이런식으로

HTML이나 JavasScript를쓰고 있습니다

(HTML은 Haml)

Ruby on Railsの開発では、このようにして、HTMLやJavascriptを書いています

Ruby on Rails

이 장점은 Sass 및 CoffeeScript처럼

CSS와 JavaScript의 세계로 확대되고 있기

このスマートさは、SassやCoffeeScriptのように、CSSやJavaScriptの世界にも広がってきてます

시간이 있으면 이야기하고 싶은 것은아직도있었습니다 ....

✤ Jekyll

✤ GitHub Pages

http: / / jeky l l rb .com/

http : / /pages.g i thub.com/…

時間があればお話したいことは、まだまだたくさんありました...

Ruby 커뮤니티 주변을

주시하면

좋을 것 같습니다

まずはRuby周辺をウォッチしておくと良い気がします

因に、Rubyといえば、札幌Ruby会議2012という、Rubyに関するイベントを行います

Check it out!

" sapporo rubykaigi 2012 " 검색

詳細については、決まり次第、Webページに掲載予定です。　Rubyに興味のある方は、ぜひお越しください

정리

まとめ

프로그래머는 거의마우스를 사용하지 않아

プログラマは　あまりマウスを使わない

1

프로그래머시간 여행자

プログラマは　タイムトラベラー

2

프로그래머 동일한 일을반복하는걸싫어함

プログラマは　同じ事を繰り返すのが　きらい　　　

3 Hello~♪ Hello ~~ ♬Hello~♪ Hello ~~ ♬

프로그래머는알기 쉬운 것이 좋아해

プログラマは　わかりやすいのが好き

4

例えば 今日紹介した Sassのサンプルは こちらのURLに載せておきます

https: / /g ist .g i thub.com/mayuco

오늘 소개한 Sass 샘플은

URL에 올려 둡니다.

우선

간단한 것으로부터

좋아하는 방식으로

시험해 보면 어때요?

まずは、簡単そうなところから 好きなやり方で 試してみるとよいです

오늘 여러분께 보다 쾌적하게 코딩하는방법을 말씀드렸

습니다.

今日、みなさんは快適なコーディングライフをおくる道具をみつけました

그럼 부디

Happy Coding Life즐겨주세요 !

それではどうぞ Happy Coding Lifeを お楽しみください

감사합니다

どうもありがとうございました