-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
256 lines (255 loc) · 11.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<html lang="ja">
<head>
<title>黒い画面とかよくわからない人のための、ゆるふわgit入門 ～github for Windows～</title>
<meta charset="Shift-JIS" />
</head>
<body>
<style>
*{margin:0;padding:0}
@font-face {
font-family: "Tenjin";
src: url("font/Tenjin.otf");
}
body{font-size:14px;color:#333;margin:40px 20px 20px;background:#efefef url(img/back.gif) 50% -15px no-repeat;}
h1{font-size:50%;margin-bottom:2em;}
h1{_font-size:300%;}
h1:before{display:block;font-family: "Tenjin", serif;content:"Git Tutorial For Designers";font-size:1000%;margin-right:30px;line-height:0.7;margin-bottom:0.2em;}
.box05{font-family: "Tenjin", serif;font-size:200%;margin-bottom:2em;}
.box05 span{_display:none;}
h2{font-size:150%;margin-bottom:0.3em;position:relative;padding-bottom:5px;}
h2:before{display:block;content:"";height:1px;width:100%;position:absolute;bottom:0;background:#efefef url(img/back.gif) 50% -15px no-repeat;}
h3{font-size:125%;margin-bottom:0.2em;}
p,ol,ul{margin-bottom:0.5em;line-height:1.6;}
img{width:500px;border:2px solid #ccc;}
ol{list-style:decimal;list-style-position:inside;margin-left:1.5em;}
ul{list-style:disc;list-style-position:inside;margin-left:1.5em;}
.box{background:#fff;margin-bottom:4em;border:1px solid #ccc;padding:20px;border-radius:10px;}
.box01{background:#efefef;padding:20px;margin-bottom:2em;font-size:125%;border-radius:5px;}
.box01 li{margin-bottom:2em;}
.box03 li{margin-bottom:2em;}
.box04{margin-bottom:2em;}
</style>
<h1>黒い画面とかよくわからない人のための、ゆるふわgit入門 ～github for Windows～</h1>
<p class="box05">by SHOKO OYAMADA (<a href="http://twitter.com/chocolatina" target="_blank">chocolatina</a>) @ paperboy&co.<span>{</span></p>
<div class="box">
<h2>この資料の対象</h2>
<ul>
<li>Subversionを使ったことがある人</li>
<li>Gitとかよくわからない人</li>
<li>でもgithubのアカウントは持ってる人</li>
<li>Windowsユーザーのデザイナー</li>
</ul>
</div>
<div class="box">
<h2>gitとは？</h2>
<p>SVNのようなバージョン管理システムのいまどきのやつ<br />
使えるとモテるらしい。けどモテた覚えがない。<br />
SVNとはリポジトリの持ち方などがちょっと違う<br />
別にプログラムじゃなくてもいろんな更新履歴を管理してよい。</p>
</div>
<div class="box">
<h2>バージョン管理とは？</h2>
<p>更新履歴や差分が混乱しないように、<br />
みんなが仲良く開発できるように使っている機能。<br />
※でも実際は混乱したりもしますね。</p>
</div>
<div class="box">
<h2>リポジトリとは？</h2>
<p>更新履歴をためておく場所です。<br />
gitでは、リポジトリには2種類あります。<br />
「自分の作業用リポジトリ」と<br />
「公開用リポジトリ」です。</p>
<p>今日は、<br />
自分のPC内のフォルダ＝自分の作業用リポジトリ<br />
github＝公開用リポジトリ<br />
として話をします。</p>
</div>
<div class="box">
<h2>githubとは？</h2>
<p>gitで管理した更新履歴を置いておく場所。<br />
完成したものを見せるんじゃなく、<br />
開発途中の履歴を見せる。<br />
普段見えない裏側のソースコードも見える。<br />
履歴をちょこちょこ送れるので、開発してる！感が出せるのでエンジニアに人気。<br />
人のソースコードに手を入れて送ったりもできるらしい。<br />
別にプログラムじゃなくてもいろんな更新履歴を管理してよい。<br />
でも交換日記とかを管理するのはやめましょう。</p>
</div>
<div class="box">
<h2>今日の目標</h2>
<p>自分のPC内のフォルダに置いたサイトを<br />
gitでバージョン管理して<br />
githubにpublishして<br />
モテよう<br />
※モテるかどうかは分からない</p>
<p><img src="img/img01.gif" alt=""></p>
</div>
<div class="box">
<h2>流れ</h2>
<ol class="box04">
<li><a href="#flow00">必要なものを用意しよう</a></li>
<li><a href="#flow01">github for Windowsをインストールしよう</a></li>
<li><a href="#flow02">コミットしてgithubにpublishしよう</a></li>
<li><a href="#flow03">何か更新したら、またコミットしてpublishしてみよう</a></li>
</ol>
<ol>
<li class="box03" id="flow00">
<h3>必要なものを用意しよう</h3>
<ol class="box03">
<li>
<p><a href="https://github.com/" target="_blank">github</a>でアカウントを作成してください。<br>
まずは無料プランで大丈夫です。</p>
<p><img src="img/e7a638fa7fe11a2898607cf9cee75edd.png" alt="" /></p>
</li>
<li>
<p>自分のパソコン内に、git管理したいフォルダを作ります。<br>
ここでは「chcltntest」というフォルダ名にします。</p>
<p><img src="img/f2d66bcf7070628f732c6a7198a7a102.png" alt="" /></p>
</li>
</ol>
</li>
<li class="box03" id="flow01">
<h3>github for Windowsをインストールしよう</h3>
<ol class="box03">
<li>
<p><a href="https://github.com/" target="_blank">github</a>で、インストールファイルをダウンロードします。</p>
<p><img src="img/8c7a16ece6e31f19590254049a0dc91c.png" alt="" /></p>
</li>
<li>
<p>インストールを進めます。</p>
<p><img src="img/da3b6fb26bbc56b6ffd39530267025ce.png" alt="" /></p>
</li>
<li>
<p>Acceptします。</p>
<p><img src="img/61040b3ca96365edf25172998a63d67f.png" alt="" /></p>
</li>
<li>
<p>ちょっと時間がかかるので、お茶でもして待ちます。</p>
<p><img src="img/cb605619a8c2147b11db6136ba44f4f2.png" alt="" /></p>
</li>
<li>
<p>再起動が必要なので、Yesします。</p>
<p><img src="img/1872bfb973f16c9b0c3282a015beeea0.png" alt="" /></p>
</li>
<li>
<p>再起動するとこんな画面になります。Installを押します。</p>
<p><img src="img/15303817c75b644a0a7e0d052c0ca352.png" alt="" /></p>
</li>
<li>
<p>猫が頑張るのでしばしお待ちください。</p>
<p><img src="img/6aa86879866b1e64c03b4b981c8d4afd.png" alt="" /></p>
</li>
<li>
<p>インストールが完了しました。githubのアカウントとパスワードでログインします。</p>
<p><img src="img/9075021e22cc6a1839c6a85743de2f1c.png" alt="" /></p>
</li>
<li>
<p>名前とメールアドレスを入力します。</p>
<p><img src="img/412de64492ec822f43cbfbcd1df41026.png" alt="" /></p>
</li>
<li>
<p>まだリポジトリがありませんよと言われます。<br>
「dashboard」をクリックします。</p>
<p><img src="img/04bd7d23732344050903e4dec1f8b9f6.png" alt="" /></p>
</li>
<li>
<p>新しくリポジトリを作りますか？と聞かれます。<br>
新しいのを作りたいので、create oneをクリックします。</p>
<p><img src="img/4884e4ff0e735705315a703016fab2c7.png" alt="" /></p>
</li>
<li>
<p>リポジトリ名と、git管理したいフォルダの場所「C:\chcltntest」を入力します。<br>
リポジトリ名は好きなもので大丈夫ですが、フォルダ名と一緒だと分かりやすいです。<br>
入力したらCREATEを押します。</p>
<p><img src="img/ab9b94c1d39ffaa313a9f361d650be1f.png" alt="" /></p>
</li>
<li>
<p>おめでとう！リポジトリが出来ました。</p>
<p><img src="img/b19c7061b879317b66df46964a28673a.png" alt="" /></p>
</li>
</ol>
</li>
<li class="box03" id="flow02">
<h3>コミットしてgithubにpublishしよう</h3>
<ol class="box03">
<li>
<p>青くて小さい矢印をクリックすると、リポジトリの中が見られます。</p>
<p><img src="img/1d51f59b9f419bdc4f616fd8d4f2f492.png" alt="" /></p>
</li>
<li>
<p>リポジトリは出来ましたが、まだ一度もコミットしていないので、<br>
ここでコミットしてあげます。<br>
コミットメッセージを入力して「コミット」ボタンを押します。</p>
<p><img src="img/14584f5bcf5fb52b8af6c27ce475ba2c.png" alt="" /></p>
</li>
<li>
<p>コミットできました！おめでとう！</p>
<p><img src="img/345e3788441f84055e6be6ada5d4a8c4.png" alt="" /></p>
</li>
</ol>
</li>
<li class="box03" id="flow03">
<h3>何か更新したら、またコミットしてpublishしてみよう</h3>
<ol class="box03">
<li>
<p>ためしに何か、自分の好きなものを、git管理しているフォルダの中に置いてみましょう。<br>
ここではindex.htmlを置きます。</p>
<p><img src="img/22f9317569902064d3ec683322bd3dc3.png" alt="" /></p>
</li>
<li>
<p>そうするとすぐ、画面に「uncomitted changes」と出ます。<br>
まだコミットしてない変更がありますよー、ということです。<br>
詳しく見たいのでSHOWを押します。</p>
<p><img src="img/e8cc3c7ab9bd50801dac6a8669fc3e38.png" alt="" /></p>
</li>
<li>
<p>先ほどと同じようにコミットメッセージを入力してコミットしましょう。</p>
<p><img src="img/255b40aed63b7caa4da634a85a515c0d.png" alt="" /></p>
</li>
<li>
<p>さて、コミットメッセージが溜まってきました。<br>
そろそろみんなにこの変更履歴を見せたい。<br>
わたし、仕事してる！感を出したい。そんな気持ちでいっぱいです。</p>
<p><img src="img/e2a0296a019809d4550c9bfd75a096ff.png" alt="" /></p>
</li>
<li>
<p>みんなにこの変更履歴を見せるには、githubのサーバーに送る必要があります。<br>
publishを押しましょう。</p>
<p><img src="img/89e92c4752848d26cf0c656b3d37e0e5.png" alt="" /></p>
</li>
<li>
<p>in syncと言われたら、publish完了です。</p>
<p><img src="img/f491540887799fe74226b90ff5c7b8da.png" alt="" /></p>
</li>
<li>
<p>https://github.com/ユーザー名/リポジトリ名<br>
にアクセスすると、githubサーバーに送られた変更履歴を確認できます。<br>
これで完了です。</p>
<p><img src="img/6f5b0f6198b6a63905da71885ddd7c97.png" alt="" /></p>
</li>
<li>
<p>また何か、ファイルに変更があったら、コミットして、<br>
コミットメッセージが溜まったらキリのいいところでpublish、<br>
という風に進めましょう。<br>
おめでとう！</p>
</li>
</ol>
</li>
</ol>
</div>
<div class="box">
<h2>今日のまとめ</h2>
<p>github for Windowsをインストールする。<br>
それが終わったらコミットしてpublishを繰り返す、が主な流れ。<br>
複数人で開発するときは、他にpullやbranchなどを使って作業します。</p>
</div>
<div class="box">
<h2>おまけ</h2>
<ul>
<li><a href="http://www.slideshare.net/to_ueda/git-6821390" target="_blank">１５分でわかるGit入門</a></li>
<li><a href="http://blog.asial.co.jp/894" target="_blank">イラストでわかる！git入門の入門</a></li>
</ul>
</div>
<p class="box05">by SHOKO OYAMADA (<a href="http://twitter.com/chocolatina" target="_blank">chocolatina</a>) @ paperboy&co.<span>{</span></p>
</body>
</html>