Skip to content

File tree

28 files changed

+414
-289
lines changed

28 files changed

+414
-289
lines changed

ja/SUMMARY.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
# 概要
22

33
* [はじめに](README.md)
4-
* [インストール](installation/README.md)
4+
* [インストール](installation/README.md)
5+
* [コマンドライン](installation/README.md#brief-intro-to-the-command-line)
6+
* [Python](installation/README.md#install-python)
7+
* [コードエディタ](installation/README.md#install-a-code-editor)
8+
* [仮想環境](installation/README.md#virtual-environment)
9+
* [Django](installation/README.md#installing-django)
10+
* [Git](installation/README.md#install-git)
11+
* [GitHub](installation/README.md#create-a-github-account)
12+
* [PythonAnywhere](installation/README.md#create-a-pythonanywhere-account)
513
* [Chromebookのセットアップ](chromebook_setup/README.md)
614
* [インターネットのしくみ](how_the_internet_works/README.md)
715
* [コマンドラインを使ってみよう](intro_to_command_line/README.md)
@@ -14,7 +22,7 @@
1422
* [Djangoモデル](django_models/README.md)
1523
* [ログインページを作ろう(Django admin)](django_admin/README.md)
1624
* [デプロイ!](deploy/README.md)
17-
* [Django URL](django_urls/README.md)
25+
* [Django URLs](django_urls/README.md)
1826
* [Djangoビュー](django_views/README.md)
1927
* [HTML 入門](html/README.md)
2028
* [Django ORM(クエリセット)](django_orm/README.md)
Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,53 @@
1-
Chromebookをお持ちでない場合は、[このセクションをスキップ](http://tutorial.djangogirls.org/en/installation/#install-python) できます。 もし利用している場合は、普通のインストールの作業とは少し異なります。 インストール手順の残りの部分は無視できます。
1+
Chromebookを使わない場合は、このセクションを飛ばして、[Pythonのインストール](http://tutorial.djangogirls.org/en/installation/#install-python) に進んでください。 もし利用している場合は、普通のインストールの作業とは少し異なります。 インストール手順の残りの部分は無視できます。
22

3-
### Cloud 9
3+
### クラウドIDE (PaizaCloud Cloud IDE, AWS Cloud9)
44

5-
Cloud 9 はコードエディタや、インストール、書き込み、およびソフトウェアを実行できるインターネット上で動いているコンピューターへのアクセスを与えるツールです。 チュートリアルをやっている間、Cloud 9はあなたの*ローカルマシーン*のように動きます。 クラスメートがOS XやUbuntu、Windowsでやっているのと同じようにターミナル上でコマンドを実行していても、あなたのターミナルはCloud 9がセットアップしたどこかのコンピューターにつながっています
5+
クラウドIDEはコードエディタであり、どこからでも何かをインストールできたり、コードを書いたり、ソフトウェアを動かしたりできるインターネットにつながったコンピュータへアクセスできます。 チュートリアルを通して、クラウドIDEはまるであなたのローカルマシンのように動作するでしょう。 みんながOS XやUbuntuやWindowsでやるのと同じようにターミナルからコマンドを入力できますが、そのターミナルはIDEがセットアップされたどこかのコンピュータに接続されています。 さて、いろいろなクラウドIDE(PaizaCloud Cloud IDE,AWS Cloud9)について見ていきましょう。 クラウドIDEのうちどれかを選んで、指示に従ってください
66

7-
1. [Chrome ウェブストア](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp)から Cloud 9 を インストールする
8-
2. [C9.io](https://c9.io) に行く
9-
3. アカウントにサインアップします
10-
4. *新しいワークスペースを作成*をクリック
11-
5. 名前は*django-girls*とします
12-
6. *Blank*を選択(下の行の右側から 2 番目のオレンジ色のロゴ)
7+
#### PaizaCloud Cloud IDE
138

14-
インターフェイスには、サイドバー、テキストが書かれた大きなメインウィンドウ、下部に小さなウィンドウがあり、次の表示が見えると思います。
9+
1. [PaizaCloud Cloud IDE](https://paiza.cloud/)へ。
10+
2. アカウントにサインアップします
11+
3. *新規サーバ作成*をクリックして、Djangoを選択してください。
12+
4. (ウィンドウの左側にある) [ターミナル] をクリックします。
1513

16-
{% filename %}Cloud 9{% endfilename %}
14+
さて、左側にサイドバーとボタンがついた画面が見えていると思います。 下記のようなプロンプトが表示されたターミナルウィンドウを開くために、“Terminal”ボタンをクリックしてください。
1715

18-
yourusername:~/workspace $
16+
{% filename %}Terminal{% endfilename %}
17+
18+
$
1919

2020

21-
この下部のエリアはあなたの*ターミナル*で、Cloud 9 があなたの指示を待っています。ウィンドウサイズを少し大きくすることもできます
21+
これでPaizaCloud Cloud IDEのターミナルは準備できました。 ウィンドウのサイズを変えたり、ちょっと大きくしたいときは最大化したりできますよ
2222

23-
### 仮想環境
23+
#### AWS Cloud9
2424

25-
仮想環境 (virtualenvとも呼ばれます) は、取り組んでいるプロジェクト用に、便利なコンピューターコードを詰め込んでおけるプライベートボックスのようなものです。 様々なプロジェクトの様々なコードがプロジェクト間で混ざってしまわないようにこれを使います
25+
現在、Cloud 9 はAWSのアカウント作成とクレジットカード情報の登録が必須になっています
2626

27-
Cloud 9のインターフェイスのうち、下部のターミナルで次を実行します。
27+
1. [Chrome ウェブストア](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp)から、Cloud 9 をインストールしてください。
28+
2. [c9.io](https://c9.io)に行って、*AWS Cloud9で開発をはじめる*をクリックしてください。
29+
3. AWSアカウントにサインアップしてください。(クレジットカード情報の登録が必要ですが、このチュートリアルは無料利用枠で進めることができます。)
30+
4. AWSのダッシュボードを開き、検索ボックスで*Cloud9*と入力し選択してください。
31+
5. Cloud9のダッシュボードで、*環境の作成*を選択します。
32+
6. 名前は*django-girls*としておきましょう。
33+
7. ”Configure settings (設定の構成)”ページで、”環境タイプ”は*環境 の新しいインスタンスを作成する (EC2)*を、”Instance type (インスタンスタイプ)”は*t2.micro*を選択します。(無料利用枠で利用できます) ”Cost-saving setting (コスト削減の設定)”はデフォルトの選択のままにします。その他の設定もデフォルトにしておきましょう。
34+
8. *Next step (次のステップ)*を選択します。
35+
9. *Create environment (環境の作成)*を選択します。
2836

29-
{% filename %}Cloud 9{% endfilename %}
37+
大きなメイン画面とサイドバー、そして下部にはこのような小さな画面が表示されています。
3038

31-
sudo apt update
32-
sudo apt install python3.6-venv
39+
{% filename %}bash{% endfilename %}
40+
41+
yourusername:~/workspace $
3342

3443

35-
それでも問題が解決しない場合は、コーチに相談してください。
44+
この下の部分が、あなたのターミナルです。Cloud9のコンピュータにリモートで指示をおくることができます。ウィンドウズのサイズを変更して少し大きくすることもできます。
45+
46+
### 仮想環境
47+
48+
仮想環境 (virtualenvとも呼ばれます) は、取り組んでいるプロジェクト用に、便利なコンピューターコードを詰め込んでおけるプライベートボックスのようなものです。 様々なプロジェクトの様々なコードがプロジェクト間で混ざってしまわないようにこれを使います。
3649

37-
次に、以下を実行します:
50+
実行する
3851

3952
{% filename %}Cloud 9{% endfilename %}
4053

@@ -45,16 +58,16 @@ Cloud 9のインターフェイスのうち、下部のターミナルで次を
4558
pip install django~={{ book.django_version }}
4659

4760

48-
(最後の行はチルダに続けてイコール記号をつけることに気をつけてください: ~=)
61+
最後の行はチルダに続けてイコール記号をつけることに気をつけてください: `~=`
4962

5063
### GitHub
5164

52-
[GitHub](https://github.com)のアカウントを作成しましょう
65+
[GitHub](https://github.com)アカウントを作成してください
5366

5467
### PythonAnywhere
5568

56-
Django Girlsチュートリアルには、デプロイメントと呼ばれるものに関するセクションが含まれています。これはあなたの新しいWebアプリケーションの原動力となるコードを取得して、それを公にアクセス可能なコンピューター(サーバーと呼ばれます)に移動するプロセスです。これにより、あなたのやったことを他の人が見ることができるようになります。
69+
Django Girlsチュートリアルには、デプロイと呼ばれるセクションが含まれています。これはあなたの新しいWebアプリケーションの原動力となるコードを取得して、それを公にアクセス可能なコンピューター(サーバーと呼ばれます)に移動するプロセスです。これにより、あなたのやったことを他の人が見ることができるようになります。
5770

58-
Chromebookでチュートリアルを行うとき、すでにインターネットに接続されているコンピュータ(ラップトップとは対照的に)を使用しているので、この作業は少し変に思えます。 しかし、Cloud 9のワークスペースを「開発中」の場所、PythonAnywhere をより完成したものを披露する場所として考えると役に立ちます。
71+
Chromebookでチュートリアルを行うとき、すでにインターネットに接続されているコンピュータ(ラップトップとは対照的に)を使用しているので、この作業は少し変な感じがします。 しかし、Cloud 9のワークスペースを「開発中」の場所、PythonAnywhere をより完成したものを披露する場所として考えると役に立ちます。
5972

60-
したがって、新しいPythonAnywhereアカウントにサインアップしてください[ www.pythonanywhere.com ](https://www.pythonanywhere.com)
73+
したがって、PythonAnywhereに新規アカウントを作成してください[ www.pythonanywhere.com ](https://www.pythonanywhere.com)

ja/code_editor/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
55
まさにこれから、はじめてのコードを書いていきます。コードエディタをダウンロードしましょう!
66

7-
> **補足:** Choromebookを使っている方は、このチャプターは飛ばして、 [Chromebook Setup](../chromebook_setup/README.md) の説明に従ってセットアップしてください。
7+
> **補足:** Choromebookを使っている方は、このチャプターは飛ばして、 [Chromebook Setup](../chromebook_setup/README.md) の説明に従ってセットアップしてください。 あなたが選んだクラウドIDE(PaizaCloud Cloud IDE もしくは AWS Cloud9)にはコードエディターが含まれています。IDEのファイルメニューからファイルを開くと、自動的にエディタが使用できます
88
>
99
> **注意** インストールの章で、コードエディタのインストールを前もって済ませた人もいるかもしれません。もしそうなら、飛ばして次の章に進んでください!
1010

ja/code_editor/instructions.md

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,36 @@
22

33
オススメのエディタは下記に挙げますが、気軽にコーチに質問して好みや特徴ををきいてみてください。
44

5+
## Visual Studio Code
6+
7+
Visual Studio Codeは、マイクロソフトがWindowsとLinuxとmacOS向けに開発したソースコードエディタです。 デバッグ、シンタックスハイライト、コード補完、スニペット、リファクタリングなど多くの機能があります。
8+
9+
[ダウンロード](https://code.visualstudio.com/download)
10+
511
## Gedit
612

7-
Geditはオープン ソースの無料エディタで、すべてのOSで利用可能です
13+
Gedit は、オープンソースの無料エディタで、全てのOSで利用可能です
814

915
[ダウンロード](https://wiki.gnome.org/Apps/Gedit#Download)
1016

1117
## Sublime Text 3
1218

13-
Sublime Textは非常に人気のあるエディタで、無料の試用期間があります。簡単にインストールして使用することができ、すべてのOSに対応しています。
19+
Sublime Text はとても人気のあるエディタで、無料の試用期間があります。全てのOSに対応しています。 
1420

1521
[ダウンロード](https://www.sublimetext.com/3)
1622

1723
## Atom
1824

19-
Atom は、GitHubによる新しいエディタです。無料で、オープンソースで、インストールも使い方も簡単です。Windows、OSX、 Linuxで利用可能です.
25+
Atom は 人気のあるオープンソースかつ無料で利用ができるエディタです。Windows、OS X、Linuxで利用可能です。Atom は[GitHub](https://github.com/)が開発しています。
2026

2127
[ダウンロード](https://atom.io/)
2228

2329
## なんでコードエディタをインストールするの?
2430

25-
なんでWordやNotepadのようなものを使わず、特別なコードエディタをインストールするのかなと思うかもしれません
31+
なぜWordやNotepadのようなものを使わず、特別なコードエディタをインストールする必要があるのかな、と思うかもしれません
2632

27-
まず、コードは**プレーンテキスト**という、何の装飾もない生の文字列でないといけませんが、問題は、WordやTexteditのようなプログラムが生成するのは、実は、プレーンテキストではないということなんです。WordやTexteditは、[RTF(リッチテキストフォーマット)](https://en.wikipedia.org/wiki/Rich_Text_Format)などのような、改造された形式を使って、フォントや書式を持ったリッチテキストを生成します。
33+
まずひとつ目の理由として、コードは**プレーンテキスト**という、何の装飾もない生の文字列でないといけません。問題は、WordやTexteditのようなプログラムが生成するのは、実は、プレーンテキストではないということなんです。WordやTexteditは、[RTF(リッチテキストフォーマット)](https://en.wikipedia.org/wiki/Rich_Text_Format)などのような、改造された形式を使って、フォントや書式を持ったリッチテキストを生成します。
2834

29-
2つ目の理由は、コードエディタは、コードを編集することに特化しているので、コードを意味によって色づけして強調したり、引用符を自動的に閉じたりするような、便利な機能を提供できます
35+
2つ目の理由は、コードエディタは、コードを編集することに特化しているので、コードを意味によって色づけして強調したり、引用符を自動的に閉じたりするような、便利な機能があります
3036

31-
あとで、こういった動作が全てわかるようになります。すぐに、信頼できる使い古したコードエディタを、お気に入りのツールの一つだと思うようになると思いますよ^^
37+
あとで、こういった機能が全てわかるようになります。すぐに、信頼できる使い慣れたコードエディタが、お気に入りのツールになると思いますよ^^

ja/css/README.md

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,13 @@ CSSファイルを作って、Webサイトにあなたのスタイルを設定
7373
{% filename %}blog/static/css/blog.css{% endfilename %}
7474

7575
```css
76-
h1 a {
77-
color: #FCA205;
76+
h1 a, h2 a {
77+
color: #C25100;
7878
}
79+
7980
```
8081

81-
`h1 a` はCSSセレクタと呼ばれるものです。 `h1` 要素の中にある `a` 要素にスタイルを適用します、という意味になります。 よって `<h1><a href="">link</a></h1>`となっているとき、 `h1 a` スタイルが適用されます。 この場合、その要素を `#FCA205` に、つまりオレンジ色にしようとしています。 またはあなたの好きな色に変えられます
82+
`h1 a` はCSSセレクタと呼ばれるものです。 これは、`h1`要素内の`a`要素にスタイルを適用していることを意味します。 `h2 a`セレクタは、`h2`要素に対しても同じことを行います。 よって `<h1><a href="">link</a></h1>`となっているとき、 `h1 a` スタイルが適用されます。 この場合、その要素を `#C25100` に、つまり濃いオレンジ色にしようとしています。 あるいは、あなたの好きな色を設定することができますが、それが白い背景に対して良いコントラストを持つことを確認しましょう
8283

8384
CSSファイルには、HTMLファイルの各要素のスタイルを指定していきます。 まずは要素名でもって、その要素を識別します。 HTMLのタグ名は覚えがあるでしょう。 例えば `a`, `h1`, `body` などが要素名の例です。 また、`class` 属性や、`id` 属性によって要素を識別することができます。 classやidは、あなたが自分で要素につけることができる名前です。 classは要素のグループを定義して、idは特定の要素を指定します。 例えば、次のタグは、タグ名 `a`、class名 `external_link`、id名 ` link_to_wiki_page`、どれを使ってもCSSによって識別されます。
8485

@@ -127,7 +128,7 @@ CSSセレクタについては[CSS Selectors in w3schools](http://www.w3schools.
127128
{% for post in posts %}
128129
<div>
129130
<p>published: {{ post.published_date }}</p>
130-
<h1><a href="">{{ post.title }}</a></h1>
131+
<h2><a href="">{{ post.title }}</a></h2>
131132
<p>{{ post.text|linebreaksbr }}</p>
132133
</div>
133134
{% endfor %}
@@ -168,8 +169,8 @@ body {
168169
{% filename %}blog/static/css/blog.css{% endfilename %}
169170

170171
```css
171-
h1 a {
172-
color: #FCA205;
172+
h1 a, h2 a {
173+
color: #C25100;
173174
font-family: 'Lobster';
174175
}
175176
```
@@ -197,7 +198,7 @@ h1 a {
197198
```html
198199
<div class="post">
199200
<p>published: {{ post.published_date }}</p>
200-
<h1><a href="">{{ post.title }}</a></h1>
201+
<h2><a href="">{{ post.title }}</a></h2>
201202
<p>{{ post.text|linebreaksbr }}</p>
202203
</div>
203204
```
@@ -208,7 +209,7 @@ h1 a {
208209

209210
```css
210211
.page-header {
211-
background-color: #ff9400;
212+
background-color: #C25100;
212213
margin-top: 0;
213214
padding: 20px 20px 20px 40px;
214215
}
@@ -250,7 +251,7 @@ h1, h2, h3, h4 {
250251
margin-bottom: 70px;
251252
}
252253

253-
.post h1 a, .post h1 a:visited {
254+
.post h2 a, .post h2 a:visited {
254255
color: #000000;
255256
}
256257
```
@@ -263,7 +264,7 @@ h1, h2, h3, h4 {
263264
{% for post in posts %}
264265
<div class="post">
265266
<p>published: {{ post.published_date }}</p>
266-
<h1><a href="">{{ post.title }}</a></h1>
267+
<h2><a href="">{{ post.title }}</a></h2>
267268
<p>{{ post.text|linebreaksbr }}</p>
268269
</div>
269270
{% endfor %}
@@ -282,7 +283,7 @@ h1, h2, h3, h4 {
282283
<div class="date">
283284
<p>published: {{ post.published_date }}</p>
284285
</div>
285-
<h1><a href="">{{ post.title }}</a></h1>
286+
<h2><a href="">{{ post.title }}</a></h2>
286287
<p>{{ post.text|linebreaksbr }}</p>
287288
</div>
288289
{% endfor %}

0 commit comments

Comments
 (0)