├── README.md ├── SUMMARY.md ├── assets ├── add_python_to_windows_path.png ├── error1.png ├── python-installation-options.png └── windows-plus-r.png ├── code_editor └── README.md ├── css ├── README.md └── images │ ├── bootstrap1.png │ ├── color2.png │ ├── final.png │ ├── font.png │ └── margin2.png ├── deploy └── README.md ├── django └── README.md ├── django_admin ├── README.md └── images │ ├── django_admin3.png │ ├── edit_post3.png │ └── login_page2.png ├── django_forms ├── README.md └── images │ ├── csrf2.png │ ├── drafts.png │ ├── edit_button2.png │ ├── edit_form2.png │ ├── form_validation2.png │ ├── new_form2.png │ └── post_create_error.png ├── django_installation └── README.md ├── django_models └── README.md ├── django_orm └── README.md ├── django_start_project ├── README.md └── images │ └── it_worked2.png ├── django_templates ├── README.md └── images │ ├── donut.png │ ├── step1.png │ ├── step2.png │ └── step3.png ├── django_urls ├── README.md └── images │ ├── error1.png │ ├── error1_old.png │ └── url.png ├── django_views ├── README.md └── images │ └── error.png ├── domain ├── README.md └── images │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ └── 6.png ├── dynamic_data_in_templates └── README.md ├── extend_your_application ├── README.md └── images │ ├── 404_2.png │ ├── attribute_error2.png │ ├── does_not_exist2.png │ ├── no_reverse_match2.png │ ├── post_detail2.png │ ├── post_list2.png │ └── template_does_not_exist2.png ├── how_the_internet_works ├── README.md └── images │ ├── internet_1.png │ ├── internet_2.png │ ├── internet_3.png │ └── internet_4.png ├── html ├── README.md └── images │ ├── step1.png │ ├── step3.png │ ├── step4.png │ └── step6.png ├── images └── application.png ├── intro_to_command_line └── README.md ├── python_installation └── README.md ├── python_introduction ├── README.md └── images │ └── cupcake.png ├── template_extending └── README.md └── whats_next └── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Django Girls Tutorial 2 | 3 | 本チュートリアルは、リニューアルしました。最新版を参照してください。 4 | [Django Girls Tutorial 日本語ver.](https://tutorial.djangogirls.org/ja/) 5 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [イントロダクション](README.md) 4 | -------------------------------------------------------------------------------- /assets/add_python_to_windows_path.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/assets/add_python_to_windows_path.png -------------------------------------------------------------------------------- /assets/error1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/assets/error1.png -------------------------------------------------------------------------------- /assets/python-installation-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/assets/python-installation-options.png -------------------------------------------------------------------------------- /assets/windows-plus-r.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/assets/windows-plus-r.png -------------------------------------------------------------------------------- /code_editor/README.md: -------------------------------------------------------------------------------- 1 | # Code editor 2 | 3 | はじめてのコードをこれから書いていくわけですから、コードエディタをダウンロードしましょう！ 4 | 5 | たくさんのエディタがありますが、どれを使うかは、個人の好みということに尽きます。多くのPythonプログラマーは、例えばPyCharmといった複雑ですがとても強力なIDEs (Integrated Development Environments)を使っています。しかし、初心者である我々には、強力でありながらももっとシンプルなエディタの方が適しているかもしれません。。 6 | 7 | オススメのエディタは下記に挙げますが、気軽にコーチに質問して好みや特徴ををきいてみてください。 8 | 9 | ## Gedit 10 | 11 | Gedit はオープンソースの無料エディタです。全てのOSで使用できます。 12 | 13 | [ダウンロード](https://wiki.gnome.org/Apps/Gedit#Download) 14 | 15 | ## Sublime Text 2 16 | 17 | Sublime Text は、とても人気のエディタです。無料の評価版があり、インストールも使い方も簡単です。こちらも全てのOSで利用できます。 18 | 19 | [ダウンロード](http://www.sublimetext.com/2) 20 | 21 | ## Atom 22 | 23 | Atom は、[GitHub](http://github.com/)による新しいエディタです。無料で、オープンソースで、インストールも使い方も簡単です。Windows、OSX、 Linuxで利用可能です。 24 | 25 | [ダウンロード](https://atom.io/) 26 | -------------------------------------------------------------------------------- /css/README.md: -------------------------------------------------------------------------------- 1 | # CSS - make it pretty! 2 | 3 | ブログはつくりましたが、このままだとカッコ良くないですよね。カッコよくしていきましょう。ここからはCSSを使っていきます。 4 | 5 | ## What is CSS? 6 | 7 | Cascading Style Sheets \(CSS\)とは、HTMLなどのマークアップ言語で書かれたWebサイトの見た目や書式を記述するための言語です。私達のWebページをメイクアップするものとして使います。 8 | 9 | でも、またゼロから作りたくないですよね。プログラマーたちがすでに作って無料で公開しているツールを使いましょう。わざわざイチから作り直す必要はないですからね。 10 | 11 | ## Let's use Bootstrap! 12 | 13 | Bootstrap は美しいWebサイトを開発するためのHTMLとCSSのフレームワークとしてとても有名です: [http://getbootstrap.com/](http://getbootstrap.com/) 14 | 15 | これは、もともとTwitterのプログラマーが作成したもので、今は、世界中の有志のボランティアで開発されています。 16 | 17 | ## Install Bootstrap 18 | 19 | Bootstrapをインストールするには、 `.html` ファイル \(`blog/templates/blog/post_list.html`\) の`` の中に、次のとおり書き加えます： 20 | 21 | ``` 22 | 23 | 24 | ``` 25 | 26 | これは、あなたのプロジェクトにファイルを追加しているわけではありません。インターネット上にあるファイルを指しているだけです。では、Webサイトを開いてページを再読み込みしてください。 27 | 28 | ![Figure 14.1](images/bootstrap1.png) 29 | 30 | これだけで見た目がずいぶん良くなりましたね！ 31 | 32 | ## Static files in Django 33 | 34 | もう１つ、今日ここで学ぶことは、 **静的ファイル** です. 静的ファイルとは、CSSファイルや画像ファイルといった、動的な変更が発生しないファイルのことです。 35 | そのため、これらのファイルはリクエストに依存せず、どのユーザに対しても中身は同じになります。 36 | 37 | CSSは静的ファイルです。そのためCSSをカスタマイズするためには、最初にDjangoの中で設定を行う必要があります。この設定を行うのは1回だけです。さぁはじめましょう： 38 | 39 | ### Configure static files in Django 40 | 41 | 始めに、静的ファイルを保存するためのディレクトリを作ります。 `djangogirls` ディレクトリの中に、ディレクトリを作成して`static` と名前をつけてください。. 42 | 43 | ``` 44 | djangogirls 45 | ├─── static 46 | └─── manage.py 47 | ``` 48 | 49 | `mysite/settings.py` ファイルを開き、下にスクロールして次の行を追加して下さい。 50 | 51 | ``` 52 | STATICFILES_DIRS = ( 53 | os.path.join(BASE_DIR, "static"), 54 | ) 55 | ``` 56 | 57 | これで、あなたの静的ファイルの保存場所をDjangoが分かってくれます。 58 | 59 | ## Your first CSS file! 60 | 61 | CSSファイルを作って、Webサイトにあなたのスタイル設定していきましょう。 `static` ディレクトリの中に、`css` という名前の新しいディレクトリを作成してください。. その`css` ディレクトリの中に、`blog.css` という名前の新しいファイルを作成してください。準備はいいですか？ 62 | 63 | ``` 64 | djangogirls 65 | └─── static 66 | └─── css 67 | └─── blog.css 68 | ``` 69 | 70 | CSSを書く時間がやってきました！エディタの中で、`static/css/blog.css`ファイルを開いて下さい。 71 | 72 | ここでは、CSSのカスタマイズや学習について深くは踏み込みません。それらについて学ぶことは非常に簡単ですので、興味のある方はこのワークショップが終了した後にご自分でチャレンジしてみて下さい！より良いCSSを使ったWebサイト作成について学びたい方には、[Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web)をオススメします。（※英語サイトです） 73 | 74 | 少しだけ触ってみましょう。ヘッダーの色を変更することは出来るでしょうか？色を理解するために、コンピュータでは特殊なコードを利用しています。 75 | コードは、`#`で始まり、6種類のアルファベット（A-F）や数字（0-9）が続きます。色コードのサンプルはこのサイトで確認することができます：[http://www.colorpicker.com/](http://www.colorpicker.com/) 76 | また、`red`や`green`といった[定義済みの色](http://www.w3schools.com/cssref/css_colornames.asp)を利用することもできます。 77 | 78 | `static/css/blog.css` ファイルに、次のコードを記述しましょう。 79 | 80 | ``` 81 | h1 a { 82 | color: #FCA205; 83 | } 84 | ``` 85 | 86 | `h1 a` はCSSセレクタです。`h1` 要素の中にある`a` 要素 （例：このようなコードのこと `

link

`）にスタイルを適用します、という意味になります。この場合、テキストの色を`#FCA205`、オレンジ色にする、という意味です。もちろん、あなたの好きな色に変更してもいいですよ。 87 | 88 | CSSファイルで、HTMLの各要素のスタイルを指定していきます。 要素は要素名（i.e. `a`, `h1`, `body`）や`class`属性、`id`属性で識別されます。class名とid名はあなた自身が指定するものです。classは要素のグループを定義し、idは具体的な要素を指します。例えば、以下のタグはCSSによってタグ名が`a`、class名が`external_link`、id名が`link_to_wiki_page`と識別されます： 89 | 90 | ``` 91 | 92 | ``` 93 | 94 | より詳細は情報についてはこちらのページを御覧ください（※英語サイトです）：[CSS Selectors in w3schools](http://www.w3schools.com/cssref/css_selectors.asp). 95 | 96 | そして、CSSを追加したこともHTMLテンプレートに教える必要があります。`blog/templates/blog/post_list.html`のファイルを開き、先頭に次の行を追加します： 97 | 98 | ``` 99 | {% load staticfiles %} 100 | ``` 101 | 102 | 私達は丁度ここに静的ファイルを読み込んでいます^^。次に、Bootstrap CSSファイルへのリンクの後ろにある``と``の間に次の行を追加します（ブラウザは与えられた順にファイルを読み込むため、私達のコードはBootstrapファイル中のコードで上書きされています）： 103 | 104 | ``` 105 | 106 | ``` 107 | 108 | これで、テンプレートにCSSファイルがある場所を教えたわけです。 109 | 110 | あなたのファイルは、このようになっていますか： 111 | 112 | ``` 113 | {% load staticfiles %} 114 | 115 | 116 | Django Girls blog 117 | 118 | 119 | 120 | 121 | 122 |
123 |

Django Girls Blog

124 |
125 | 126 | {% for post in posts %} 127 |
128 |

published: {{ post.published_date }}

129 |

{{ post.title }}

130 |

{{ post.text|linebreaks }}

131 |
132 | {% endfor %} 133 | 134 | 135 | ``` 136 | 137 | OK、ファイルを保存してサイトを更新してみましょう！ 138 | 139 | ![Figure 14.2](images/color2.png) 140 | 141 | お疲れ様です！おそらく表示されたウェブサイトは非常に読みにくいため、左側にもう少しスペースが欲しくなります。試してみましょう！ 142 | 143 | ``` 144 | body { 145 | padding-left: 15px; 146 | } 147 | ``` 148 | 149 | これをあなたのCSSをに追加し、ファイルを保存してどのように動くのか確認してみましょう！ 150 | 151 | ![Figure 14.3](images/margin2.png) 152 | 153 | 見出しのフォントはカスタマイズできるでしょうか？これを`blog/templates/blog/post_list.html`ファイルの``中に貼り付けて下さい： 154 | 155 | ``` 156 | 157 | ``` 158 | 159 | この行ではGoogle Fonts \([https://www.google.com/fonts](https://www.google.com/fonts)\) から _Lobster_ と呼ばれるフォントを読み込んでいます。 160 | 161 | `static/css/blog.css`のファイルを開いて、`h1 a`というのブロック中に`font-family: 'Lobster';`という行を追加してみましょう（コードは`{}`で囲まれています）。そしてページを更新します： 162 | 163 | ``` 164 | h1 a { 165 | color: #FCA205; 166 | font-family: 'Lobster'; 167 | } 168 | ``` 169 | 170 | ![Figure 14.3](images/font.png) 171 | 172 | 素晴らしい！ 173 | 174 | 上に示したように、CSSはHTMLコードの一部に名前をつけて、他に影響を与えずにこの部分にだけスタイルを適用するといった、クラスの概念を持っています。 175 | あなたが2つのdiv要素を持っていた場合これは非情に便利でしょう。しかし、見出しと投稿のように、これらの要素は通常全く違う事を行います。そのため、あなたはこれらを区別して扱いたくなるでしょう。 176 | 177 | 先に進んで、HTMLコードの一部に名前をつけましょう。ヘッダーに含まれる`div`要素に、`page-header`というクラス名をつけましょう： 178 | 179 | ``` 180 |
181 |

Django Girls Blog

182 |
183 | ``` 184 | 185 | さらにブログ投稿を含む`div`要素に`post`というクラス名をつけましょう。 186 | 187 | ``` 188 |
189 |

published: {{ post.published_date }}

190 |

{{ post.title }}

191 |

{{ post.text|linebreaks }}

192 |
193 | ``` 194 | 195 | そして、別のセレクタに宣言ブロックを追加します。`.`で始まるセレクタはクラスに関連します。 196 | Web上にはCSSに関する非常に多くのチュートリアルが存在し、それらは以下に示すコードを理解する手助けになるはずです。今のところは、`djangogirls/static/css/blog.css`のファイルに以下の内容をコピー＆ペーストしましょう： 197 | 198 | ``` 199 | .page-header { 200 | background-color: #ff9400; 201 | margin-top: 0; 202 | padding: 20px 20px 20px 40px; 203 | } 204 | 205 | .page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active { 206 | color: #ffffff; 207 | font-size: 36pt; 208 | text-decoration: none; 209 | } 210 | 211 | .content { 212 | margin-left: 40px; 213 | } 214 | 215 | h1, h2, h3, h4 { 216 | font-family: 'Lobster', cursive; 217 | } 218 | 219 | .date { 220 | color: #828282; 221 | } 222 | 223 | .save { 224 | float: right; 225 | } 226 | 227 | .post-form textarea, .post-form input { 228 | width: 100%; 229 | } 230 | 231 | .top-menu, .top-menu:hover, .top-menu:visited { 232 | color: #ffffff; 233 | float: right; 234 | font-size: 26pt; 235 | margin-right: 20px; 236 | } 237 | 238 | .post { 239 | margin-bottom: 70px; 240 | } 241 | 242 | .post h1 a, .post h1 a:visited { 243 | color: #000000; 244 | } 245 | ``` 246 | 247 | そして、これをクラス宣言で投稿を表示しているHTMLコードで囲みます。 248 | `blog/templates/blog/post_list.html`中のこの部分を 249 | 250 | ``` 251 | {% for post in posts %} 252 |
253 |

published: {{ post.published_date }}

254 |

{{ post.title }}

255 |

{{ post.text|linebreaks }}

256 |
257 | {% endfor %} 258 | ``` 259 | 260 | これで置き換えて下さい： 261 | 262 | ``` 263 |
264 |
265 |
266 | {% for post in posts %} 267 |
268 |
269 | {{ post.published_date }} 270 |
271 |

{{ post.title }}

272 |

{{ post.text|linebreaks }}

273 |
274 | {% endfor %} 275 |
276 |
277 |
278 | ``` 279 | 280 | それらのファイルを保存してWebサイトを更新してみましょう。 281 | 282 | ![Figure 14.4](images/final.png) 283 | 284 | やったー！ほら凄いでしょ？この貼り付けたコードを理解するのはそんなに難しいことじゃありません。実際に読んでみることで、そのほとんどを理解することができるでしょう。 285 | 286 | CSSをいじることを恐れないで下さい！たとえ何かを壊してしまっても、すぐに元に戻すことができます。 287 | 288 | 美しいWebサイトを作るために必要な全てのことを学ぶために、この無料のオンライン講座を受講することをおすすめします：[Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web)（※英語サイトです） 289 | 290 | さて、次の章にいく準備はできましたか？^皿^ 291 | 292 | -------------------------------------------------------------------------------- /css/images/bootstrap1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/css/images/bootstrap1.png -------------------------------------------------------------------------------- /css/images/color2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/css/images/color2.png -------------------------------------------------------------------------------- /css/images/final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/css/images/final.png -------------------------------------------------------------------------------- /css/images/font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/css/images/font.png -------------------------------------------------------------------------------- /css/images/margin2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/css/images/margin2.png -------------------------------------------------------------------------------- /deploy/README.md: -------------------------------------------------------------------------------- 1 | # Deploy! 2 | 3 | > __補足__: このチャプターはちょっと難しいことが沢山書かれています。頑張って最後までやりきってください。デプロイはウェブサイトを開発するプロセスの上で、とても重要な部分ですが、躓きやすいポイントも多く含まれています。チュートリアルの途中にこのチャプターを入れています。そういった躓きやすい箇所はメンターに質問して、あなたが作っているウェブサイトをオンラインでみれるようにしてください。言い換えれば、もし時間切れでワークショップ内でチュートリアルを終わらせることができなかったとしても、この後のチュートリアルはきっと自分で終わらせることができるでしょう。 4 | 5 | 今、あなたのウェブサイトはあなたのコンピューターでのみ見ることができますね。では、これをデプロイする方法を学んでいきましょう。デプロイとは、あなたが作っているアプリケーションをインターネットで公開することです。あなた以外の人もウェブサイトを見ることができるようになりますよ。 :) 6 | 7 | これまでに学んだとおり、ウェブサイトはサーバーに置かれています。様々なサーバーがありますが、ここでは最もシンプルなやり方でデプロイすることができるものを使いましょう。[Heroku](http://heroku.com/)です。Herokuは、多くの人がアクセスするものではない小さいアプリケーションは無料で公開できます。今回には最適でしょう。 8 | 9 | Heroku のチュートリアル (https://devcenter.heroku.com/articles/getting-started-with-django) に従ってすすめていきます。以下に同内容を記していますので、このまま進めていってください。 10 | 11 | ## The `requirements.txt` file 12 | 13 | 最初に、`requirements.txt`ファイルを作成します。あなたのサーバーにどんなPythonパッケージがインストールされる必要があるか、Herokuに伝えるものです。 14 | 15 | その前に、Herokuを使うために必要ないくつかのパッケージをインストールしておきましょう。コンソールを開いて、 `virtualenv` を実行し、次のように入力して下さい: 16 | 17 | (myvenv) $ pip install dj-database-url gunicorn whitenoise 18 | 19 | インストールが終わったら、`djangogirls`ディレクトリに行き、次のコマンドを実行します: 20 | 21 | (myvenv) $ pip freeze > requirements.txt 22 | 23 | これで、`requirements.txt`とよばれるファイルが作成されます。必要なパッケージのリストが書かれています。どんなPythonライブラリを使っているかといった情報です。（例えばDjangoとか）:)). 24 | 25 | > __補足__: `pip freeze` は、あなたのvirtualenvにインストール済みの全てのPythonライブラリを一覧にして出力します。その`pip freeze`した出力先を、`>`の後に示しファイルに保存します。`> requirements.txt` を含まずに `pip freeze` だけで実行してみて、何が起こるか試してみるとよいでしょう。 26 | 27 | ファイルを開いて、最終行に次の1行を追加しましょう: 28 | 29 | psycopg2==2.5.4 30 | 31 | これは、あなたのアプリケーションをHerokuで動かすために必要な１行です。 32 | 33 | 34 | ## Procfile 35 | 36 | 次に必要なものは、Procfileです。このファイルが、どのコマンドを実行してウェブサイトをスタートするかHerokuに伝えます。エディタを開いて、`djangogirls` ディレクトリに`Procfile`という名前のファイルを作成して下さい。ファイルに次のとおり入力しましょう: 37 | 38 | web: gunicorn mysite.wsgi 39 | 40 | この１行が何を意味しているのでしょうか。私たちは`web` アプリケーションをデプロイしようとしていること、そして`gunicorn mysite.wsgi`というコマンドを実行することでデプロイすることを意味しています。（`gunicorn`は、Djangoの`runserver`コマンドのもっとパワフルなものと考えて下さい。） 41 | 42 | これで完了です！保存しましょう。 43 | 44 | ## The `runtime.txt` file 45 | 46 | Herokuに使っているPythonのバージョンを伝えなければいけません。`djangogirls`ディレクトリに`runtime.txt` ファイルを作ってその中に書きます。エディタで新規ファイルを作成して、次のように書いてください: 47 | 48 | python-3.5.2 49 | 50 | ## mysite/local_settings.py 51 | 52 | コンピューター上のローカルとサーバーでは設定に違いがあります。Herokuとコンピューターでは別のデータベースをそれぞれつかっています。そこで、別途ファイルを作成し、ローカル環境で動かすための設定を保存しておく必要があります。 53 | 54 | では、ファイルを作成しましょう。`mysite/local_settings.py`というファイルです。その中には、`mysite/settings.py`ファイルからの `DATABASE` の設定が必要です。次のように記述してください: 55 | 56 | import os 57 | BASE_DIR = os.path.dirname(os.path.dirname(__file__)) 58 | 59 | DATABASES = { 60 | 'default': { 61 | 'ENGINE': 'django.db.backends.sqlite3', 62 | 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 63 | } 64 | } 65 | 66 | DEBUG = True 67 | 68 | 保存しておきましょう :) 69 | 70 | ## mysite/settings.py 71 | 72 | すべき事がまだあります。ウェブサイトの`settings.py` ファイルに変更を加えておきましょう。エディタで、`mysite/settings.py` ファイルを開いて下さい。最終行に、次のとおり追加しましょう: 73 | 74 | import dj_database_url 75 | DATABASES['default'] = dj_database_url.config() 76 | 77 | SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https') 78 | 79 | ALLOWED_HOSTS = ['*'] 80 | 81 | STATIC_ROOT = 'staticfiles' 82 | 83 | DEBUG = False 84 | 85 | try: 86 | from .local_settings import * 87 | except ImportError: 88 | pass 89 | 90 | このファイルは、Herokuに必要な構成だけでなく、`mysite/local_settings.py`ファイルがある時にはローカルの設定にも重要な役割となります。 91 | 92 | 保存してください。 93 | 94 | ## mysite/wsgi.py 95 | 96 | 次に`mysite/wsgi.py`ファイルを開き、最終行に次のとおり追加してください: 97 | 98 | from whitenoise.django import DjangoWhiteNoise 99 | application = DjangoWhiteNoise(application) 100 | 101 | よし、できましたね! 102 | 103 | ## Heroku account 104 | 105 | では、Heroku toolbeltをインストールしましょう。Herokuをコマンドライン操作を行うためのアプリケーションです。（すでに設定でインストール済みでしたら飛ばしてください。）インストーラーはここから入手できます: https://toolbelt.heroku.com/ 106 | 107 | > WindowsでHeroku toolbelt をインストールする方は、インストールするコンポーネントを選択する際に"Custom Installation" を選択してください。コンポーネントを選択すると、さらにチェックボックスがありますので、"Git and SSH"にチェックを入れて下さい。 108 | 109 | > Windowsの方は、コマンドプロンプトの`PATH`にGitとSSHを追加するために、次のように入力し実行してください: `setx PATH "%PATH%;C:\Program Files\Git\bin"`. 110 | コマンドプロンプトを一旦閉じて、再度起動しましょう。すると変更が適用されます。 111 | 112 | > コマンドプロンプトを再起動したら、`djangogirls`フォルダに移動し、virtualenvを実行することを忘れないでくださいね！(ヒント: [Check the Django installation chapter](../django_installation/README.md#working-with-virtualenv)) 113 | 114 | Herokuの無料アカウントを作成してください: https://id.heroku.com/signup/www-home-top 115 | 116 | コマンドプロンプトでHerokuにログインします。コマンドプロンプトを起動して、次のコマンドを入力しましょう: 117 | 118 | $ heroku login 119 | 120 | SSHキーがない場合はここで自動的に作成されます。SSHキーは、コードをHerokuにプッシュするために必要なものです。 121 | 122 | ## Git 123 | Gitとは、バージョン管理システムです。多くのプログラマーがつかっています。ファイルの変更履歴を記録・追跡するシステムです。そのため、一度編集したファイルを特定の変更前の状態に戻したり、編集箇所の差分を表示したりすることができます。Herokuでは、Gitのリポジトリを使って、プロジェクトのファイルを管理します。 124 | 125 | `djangogirls`ディレクトリに、`.gitignore`という名前のファイルを作成しましょう。次のとおりに記述してください: 126 | 127 | myvenv 128 | __pycache__ 129 | staticfiles 130 | local_settings.py 131 | db.sqlite3 132 | *.py[co] 133 | 134 | Git に `local_settings.py` は無視してアップロードしないように伝えています。あなたのコンピューター上（ローカル環境）でのみ動作します。それでは保存しておきましょう。ファイル名の最初にあるドットはとても重要ですよ。 135 | 136 | 次に、Gitのリポジトリを作成し、これまでの変更を記録しておきましょう。 137 | 138 | > __補足__: リポジトリを作成する前に、現在作業しているディレクトリを確認しておきましょう。`pwd`コマンドでしたね。 `djangogirls`フォルダになっていればOKです。 139 | 140 | コンソールを開き、次のコマンドを実行しましょう: 141 | 142 | $ git init 143 | Initialized empty Git repository in ~/djangogirls/.git/ 144 | $ git config user.name "Your Name" 145 | $ git config user.email you@example.com 146 | 147 | Gitリポジトリを作成するのは、プロジェクトにつき最初の１度だけです。 148 | 149 | 間違ったファイルを追加したりコミットすることがないように、 `git add` コマンドを実行する前や、どのような変更を加えたか定かでない時は、 `git status` コマンドを実行しておくとよいでしょう。 `git status` コマンドを実行すると、ステージされた変更内容、されていない変更内容、Git による追跡の対象外となっているファイルやブランチのステータス等が表示されます。次のような情報が出力されることでしょう: 150 | 151 | $ git status 152 | On branch master 153 | 154 | Initial commit 155 | 156 | Untracked files: 157 | (use "git add ..." to include in what will be committed) 158 | 159 | .gitignore 160 | Procfile 161 | mysite/__init__.py 162 | mysite/settings.py 163 | mysite/urls.py 164 | mysite/wsgi.py 165 | manage.py 166 | requirements.txt 167 | runtime.txt 168 | 169 | nothing added to commit but untracked files present (use "git add" to track) 170 | 171 | この変更を保存しましょう。コンソールで次のコマンドを実行してください: 172 | 173 | $ git add -A . 174 | $ git commit -m "My Django Girls app" 175 | [master (root-commit) 2943412] My Django Girls 176 | 7 files changed, 230 insertions(+) 177 | create mode 100644 .gitignore 178 | create mode 100644 Procfile 179 | create mode 100644 mysite/__init__.py 180 | create mode 100644 mysite/settings.py 181 | create mode 100644 mysite/urls.py 182 | create mode 100644 mysite/wsgi.py 183 | create mode 100644 manage.py 184 | create mode 100644 requirements.txt 185 | create mode 100644 runtime.txt 186 | 187 | ## Pick an application name 188 | 189 | アプリケーションの名前を考えましょう。オンライン上にブログを作る際に、そのURLは `[your blog's name].herokuapp.com` となります。 `[your blog's name]` には、だれもつけていない名前をつける必要があります。この名前は、Django `blog` app や `mysite`といったこれまでに作成したプロジェクト名等と関連している必要はありません。あなたの好きな名前をつけていいですよ。ただし、小文字の英数字とダッシュ(`-`)の組み合わせにしてください。大文字や記号はつかえません。 190 | 191 | アプリケーション名が決まれば（おそらくあなたの名前やニックネームが入ったものでしょう。）、次のコマンドを実行してください。ここでは、アプリケーションの名前を`djangogirlsblog` としていますので、あなたのアプリケーション名に置き換えてください: 192 | 193 | $ heroku create djangogirlsblog 194 | 195 | > __補足__: `djangogirlsblog`を、Herokuで使うあなたのアプリケーション名に置き換えることを忘れずに！ 196 | 197 | もし名前が自分で思いつかない時は、かわりに次のコマンドを実行してください。 198 | 199 | $ heroku create 200 | 201 | Herokuが代わって名前をつけてくれます。(おそらく `enigmatic-cove-2527`といった感じに。) 202 | 203 | もし、あとでHerokuのアプリケーション名を変更したくなれば、次のコマンドでいつでも変更することができます。 (`the-new-name` を変更する新しい名前におきかえてください。): 204 | 205 | $ heroku apps:rename the-new-name 206 | 207 | > __補足__: アプリケーション名を変更したら、あなたのウェブサイトのURLは `[the-new-name].herokuapp.com` に変わります。 208 | 209 | ## Deploy to Heroku! 210 | 211 | ここまで沢山のインスト―ルや設定がありましたね。けど、次がこのチャプターの最後です。いよいよデプロイします！ 212 | 213 | 先ほど`heroku create`を実行した時に、自動的にherokuという名前でリモートリポジトリが作成されています。アプリケーションをデプロイするには、これをGitでプッシュするだけです: 214 | 215 | $ git push heroku master 216 | 217 | > __補足__: これを最初の実行後は、Heroku が psycopg をコンパイルしてインストールするのにともない*沢山*の出力が表示されることでしょう。暫く待って、最後の方に `https://yourapplicationname.herokuapp.com/ deployed to Heroku` というような出力があれば、成功した印です。 218 | 219 | ## Visit your application 220 | 221 | これであなたのコードをHerokuにデプロイすることができました。そして、プロセスは`Procfile`と指定されています。(先ほど、プロセスタイプを`web`と選びましたね。)最後に、Herokuのウェブプロセスを起動します。 222 | 223 | 次のコマンドを実行してください: 224 | 225 | $ heroku ps:scale web=1 226 | 227 | ウェブプロセスが１つ起動しました。このブログアプリケーションはとてもシンプルなものですので、沢山のパワーは必要ありません。１つのウェブプロセスで十分です。Herokuでそれ以上のウェブプロセスを起動することは可能ですが、今は無料ではないようです。（ところで、Herokuではこのプロセスを”Dynos”と呼んでいます。この言葉が出てきてもびっくりしないでくださいね。） 228 | 229 | さて、ブラウザでアプリケーションを開いてみましょう。`heroku open`コマンドです。 230 | 231 | $ heroku open 232 | 233 | > __補足__: エラーページが表示されますね。これについては、すぐ説明するので心配しなくていいですよ。 234 | 235 | コマンドで、[https://djangogirlsblog.herokuapp.com/]()といったあなたのアプリケーションのURLがブラウザで開かれます。おそらくエラーページが表示されることでしょう。これは、私たちがまだadmin viewしか作成していないからです。URLの後ろに `admin/` をつけてアプリケーションが動いているのをみてみましょう。(例 [https://djangogirlsblog.herokuapp.com/admin/]()) 236 | 237 | エラーが表示されたのは、Herokuにデプロイする時に新しいデータベースを作成したため、まだデータベースが空っぽの状態だからです。そこで、プロジェクトの最初にローカルにデータベースをセットアップした時のように、再度```migrate``` コマンドを実行します: 238 | 239 | $ heroku run python manage.py migrate 240 | 241 | $ heroku run python manage.py createsuperuser 242 | 243 | コマンドプロンプトは、ユーザーネームとパスワードを選ぶよう再度きいてきます。これは、オンライン上のウェブサイトのログインに必要となるログイン情報です。ブラウザを再読み込みして、完了です！ 244 | 245 | これで、あなたのウェブサイトがブラウザでみられるようになりました！おめでとう！！ :) 246 | -------------------------------------------------------------------------------- /django/README.md: -------------------------------------------------------------------------------- 1 | # What is Django? 2 | 3 | Django (_/ˈdʒæŋɡoʊ/ jang-goh_) は、無料でオープンソースとして公開されているPythonを使用したWebアプリケーションフレームワークです。Webフレームワーク、つまり、Web対応のアプリケーション構築を早く簡単に開発する枠組みです。 4 | 5 | ほら、Webサイトを構築する時、同じような構造が毎回必要になってきますよね。ユーザー認証（サインアップ、サインイン、サインアウト）、管理者用の画面、フォーム、ファイルのアップロードなど。 6 | 7 | 開発者たちはサイトを構築する度に同じ問題を抱えたため、みんなで力を合わせてフレームワークを開発しました。（Djangoはフレームワークのひとつです。）幸運なことに、私たちは、開発に必要な要素がすでに含まれているフレームワークを使って開発することができます。 8 | 9 | フレームワークを使うことで、私たちは開発を土台から作り直すことを避けられます。また、新しいサイトを構築する際にかかる最初の準備に必要なコストを軽減します。 10 | 11 | ## Why do you need a framework? 12 | 13 | Djangoを本当に理解するために、サーバーの役割についてもう少し考えてみましょう。サーバーにWebページを配信してもらうようにするには、サーバーにそのような設定をする必要があります。 14 | 15 | 手紙が届くポストを想像してください。手紙はユーザからWebサーバーに送られるリクエストで、ポストはWebサーバーのポートのことです。Webサーバーはこのポストを監視して、手紙が届くとそれを読み、Webページから返事を送ります。送ろうとする時、コンテンツが必要ですね。Djangoは、あなたがそのコンテンツを作る手助けをするものです。 16 | 17 | ## What happens when someone requests a website from your server? 18 | 19 | Webサーバーにリクエストがあると、Djangoに伝えられ、リクエストの内容を把握しようとします。 まずWebページのアドレスを調べ、リクエストに対して何をするか決めます。これは、Djangoの__urlresolver__が行います。（WebサイトのアドレスはURLと呼ばれます。 Uniform Resource Locator の略です。-resolverとは「解決するもの」という意味ですので、*urlresolver* というのはうなずけますよね。)。あまり賢いとはいえません。Djangoは上から下にURLパターンを順に調べていきます。そこで何かがマッチすると、Djangoは*ビュー*と呼ばれる関数にリクエストを送ります。 20 | 21 | 郵便配達員を思い浮かべてください。配達員は、通りを歩き、ひとつひとつの家の番地と、手紙に書かれている番地を見比べて行きます。マッチする番地があったら、手紙をそこに置いていきます。urlresolverも同じ仕組みです。 22 | 23 | *ビュー*関数では、面白いことが行われます。私たちは、データベースに情報を探しにいきます。時に、ユーザーがデータを変更するよう求めてきますよね？例えば、「私の仕事内容を変えて下さい」といった手紙のように。*ビュー*は、まずあなたにその権限があるか確認します。次に、仕事内容を書き換えて、「完了しました！」というメッセージをあなたに送り返します。そして、*ビュー*が反応を返して、DjangoがユーザーのWebブラウザに情報を送ります。 24 | 25 | もちろん、上記の説明は、多少簡略化して説明しています。しかし、今ここでは、技術的なことを完璧に理解する必要はありません。概念が分かれば十分です。 26 | 27 | これ以上詳細について深く説明するより、きっと、Djangoを使って実際に手を動かして作ってみる方がいいでしょう。重要な事はすべてその過程で学べますよ! 28 | -------------------------------------------------------------------------------- /django_admin/README.md: -------------------------------------------------------------------------------- 1 | # Django admin 2 | 3 | 今作成したポストを追加、編集、削除するのにDjango adminを使います。 4 | まず`blog/admin.py`ファイルを開いて、コンテンツをこれに置き換えましょう。 5 | 6 | ``` 7 | from django.contrib import admin 8 | from .models import Post 9 | 10 | admin.site.register(Post) 11 | ``` 12 | 13 | 見て分かる通り、前回定義したPostモデルをimportしています。モデルをadminページで見れるようにするには、モデルを`admin.site.register(Post)`で登録する必要があります。 14 | 15 | ではPostモデルを見てみましょう。Webサーバーを走らせるにはConsoleの中で`python manage.py runserver`を走らせ ることを覚えておいて下さい。ブラウザに行って [http://127.0.0.1:8000/admin/](http://127.0.0.1:8000/admin/) とアドレスバーにタイプします。こんなログインページが出ますね。 16 | 17 | ![Login page](images/login_page2.png) 18 | 19 | ログインするには、superuser （サイトの全てを管理するユーザー）を作る必要があります。コマンドラインに戻って、`python manage.py createsuperuser`とタイプしenter、それからユーザー 20 | ネーム（小文字スペース無し）、聞かれたらメールアドレスとパスワードを入れます。タイプしてる間パスワードは見えなくても大丈夫、それが正常です。タイプしてEnterを押して続けましょう。そうすればこのように見えるはずです。（ユーザーネームとパスワードは今あなたがタイプしたものです。） 21 | 22 | ``` 23 | (myvenv) ~/djangogirls$ python manage.py createsuperuser 24 | Username: admin 25 | Email address: admin@admin.com 26 | Password: 27 | Password (again): 28 | Superuser created successfully. 29 | ``` 30 | 31 | ブラウザに戻ってsuperuserでログインすると、Django admin ダッシュボードが見えるでしょう。 32 | 33 | ![Django admin](images/django_admin3.png) 34 | 35 | Postsに行って少し試してみてください。5～6のブログポストを入れてみましょう。コンテンツは心配しなくて大丈夫。今はとりあえずこのチュートリアルからテキストをいくつかコピペするだけでいいです。 36 | 37 | > ブログ機能を確認するためなので、内容は何でも大丈夫です。自分で適当な文字列を打ち込んでももちろんOKです。 38 | 39 | 少なくとも2~3のポスト（全部じゃなくても）が過去の時刻を表示しているかだけ確認してください。これが後で役立ちます。 40 | 41 | ![Django admin](images/edit_post3.png) 42 | 43 | もしDjango adminについてもっと知りたければ、Django's documentationを見て下さい。 44 | [https://docs.djangoproject.com/ja/1.11/ref/contrib/admin/](https://docs.djangoproject.com/ja/1.11/ref/contrib/admin/) 45 | 46 | さてコーヒー飲むか何かつまんでください。 47 | 初Django modelを作ったんですから休憩しましょう！ 48 | -------------------------------------------------------------------------------- /django_admin/images/django_admin3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_admin/images/django_admin3.png -------------------------------------------------------------------------------- /django_admin/images/edit_post3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_admin/images/edit_post3.png -------------------------------------------------------------------------------- /django_admin/images/login_page2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_admin/images/login_page2.png -------------------------------------------------------------------------------- /django_forms/README.md: -------------------------------------------------------------------------------- 1 | # Django フォーム 2 | 3 | 最後に、ブログ記事の追加と編集を、ウェブサイト上でできるようにしましょう。Djangoの管理画面はクールですが、カスタマイズして綺麗に作るのはとても難しいです。`フォーム` はインターフェースを介してパワフルな機能を提供し、私たちが想像できるほとんどの操作を行うことができます。 4 | 5 | Djangoのフォームの良いところは、ゼロからスクラッチもできるし、モデルにフォームの結果を保存するための `ModelForm` を作成することもできます。 6 | 7 | それを利用して、これから `Post` モデル用のフォームを作成しましょう。 8 | 9 | Djangoの重要な他のパーツと同じように、フォームのためのファイル `forms.py` を作成します。 10 | 11 | `forms.py` というファイルを `blog` ディレクトリの配下に作成します。 12 | 13 | ``` 14 | blog 15 | └── forms.py 16 | ``` 17 | 18 | いいですね、では `blog/forms.py` を開いて次のコードを入力します： 19 | 20 | ``` 21 | from django import forms 22 | 23 | from .models import Post 24 | 25 | class PostForm(forms.ModelForm): 26 | 27 | class Meta: 28 | model = Post 29 | fields = ('title', 'text',) 30 | ``` 31 | 32 | まずDjangoのフォームモジュールをインポートします\(`from django import forms`\)。そして私たちが定義したmodels.pyから `Post` モデルをインポートします\(`from .models import Post`\)。 33 | 34 | 予想しているでしょうが、このフォームの名前は `PostForm` にします。そしてこのフォームを `ModelForm` として使用できるように `forms.ModelForm` を継承します（Djangoの機能をうまく使うためのおまじないと思ってください\) 。 35 | 36 | 次に、 インナークラスとして `class Meta` を定義し、どのモデルからこのフォームを作成するべきかを指定します\(`model = Post`\)。 37 | 38 | 最後に、どのフィールドをこのフォームで使用するかを指定します。ここでは `title` と `text` のみ指定します。`author` は現在ログインしている人（あなたのことです）、`created_date` は投稿日が自動で入るようにしましょう。 39 | 40 | ひとまずこっちはこれでおしまいです！次は _view_ とテンプレートでフォームを表示するようにします。 41 | 42 | そのためもう一度、ページへのリンクとURLとビューとテンプレートを作成します。 43 | 44 | ## フォームを含むページへのリンク 45 | 46 | `blog/templates/blog/base.html` を開き、 `div class="page-header"` タグ内にリンクを追加します: 47 | 48 | ``` 49 | 50 | ``` 51 | 52 | 新しいビュー `post_new` を呼び出していることに注意してください。 53 | 54 | 先ほどのリンクを追加した後のテンプレートファイルは次のようになります: 55 | 56 | ``` 57 | {% load staticfiles %} 58 | 59 | 60 | Django Girls blog 61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 | 69 |

Django Girls Blog

70 |
71 |
72 |
73 |
74 | {% block content %} 75 | {% endblock %} 76 |
77 |
78 |
79 | 80 | 81 | ``` 82 | 83 | これを保存して `http://127.0.0.1:8000` を更新してください。するとお馴染みの `NoReverseMatch` エラーが発生するはずです。発生しましたか? 84 | 85 | ## URL 86 | 87 | それではURLを追加します。 `blog/urls.py` を開き次の行を追加します。 88 | 89 | ``` 90 | url(r'^post/new/$', views.post_new, name='post_new'), 91 | ``` 92 | 93 | 追加した後の `blog/urls.py` は次のようになります。 94 | 95 | ``` 96 | from django.conf.urls import include, url 97 | from . import views 98 | 99 | urlpatterns = [ 100 | url(r'^$', views.post_list), 101 | url(r'^post/(?P[0-9]+)/$', views.post_detail), 102 | url(r'^post/new/$', views.post_new, name='post_new'), 103 | ] 104 | ``` 105 | 106 | サイトを更新すると `AttributeError` が発生します。これは `post_view` を実装していないためです。それでは `post_view` を追加しましょう。 107 | 108 | ## post\_new ビュー 109 | 110 | `post_view` を実装していきます。 `blog/views.py` に次の行を追加します。まずは `from` の行から: 111 | 112 | ``` 113 | from .forms import PostForm 114 | ``` 115 | 116 | _view_ はこのようになります: 117 | 118 | ``` 119 | def post_new(request): 120 | form = PostForm() 121 | return render(request, 'blog/post_edit.html', {'form': form}) 122 | ``` 123 | 124 | 新しい `Post` フォームを作成するために、 `PostForm()` でPostFormをインスタンス化してテンプレートに渡します。また後でここの _view_ の実装を変更しますが、そのまえにテンプレートを作りましょう。 125 | 126 | ## テンプレート 127 | 128 | `blog/templates/blog` ディレクトリ配下に `post_edit.html` を作成します。フォームを動作させるためにはいくつかやることがあります。 129 | 130 | * フォームを表示する必要があります。簡単な例としては `{{ form.as_p }}` と記述することです。 131 | * 上記の行はformtタグでラップする必要があります: `
...
` 132 | * `Save` ボタンが必要です。HTMLではボタンは次のように書きます: `` 133 | * 最後にformタグ内\(開formタグ直後\)に `{% raw %}{% csrf_token %}{% endraw %}` を追加します。これによりこのフォームがセキュアになるので、とても大切です。もしこれを記述せずにフォームを保存しようとするとDjangoは文句を言います。 134 | 135 | ![CSFR Forbidden page](images/csrf2.png) 136 | 137 | それでは `post_edit.html` 内のHTMLがどのように見えるべきかを見てみましょう: 138 | 139 | ``` 140 | {% extends 'blog/base.html' %} 141 | 142 | {% block content %} 143 |

New post

144 |
{% csrf_token %} 145 | {{ form.as_p }} 146 | 147 |
148 | {% endblock %} 149 | ``` 150 | 151 | 更新します。わーい! フォームが表示されました! 152 | 153 | ![New form](images/new_form2.png) 154 | 155 | しかし、ちょっと待ってください! `title` と `text` フィールドを入力して保存しようとすると何が起こるのでしょうか？ 156 | 157 | 何も起こりません! 同じページが再度表示され、私たちのテキストがなくなって...そして新しい投稿が追加されていません。何が間違っているのでしょうか？ 158 | 159 | その答えは...。間違えてはいませんが _view_ に対してもう少し作業を行う必要があります。 160 | 161 | ## formをsaveする 162 | 163 | `blog/views.py` を再度開きます。すでに `post_new` ビューがあります: 164 | 165 | ``` 166 | def post_new(request): 167 | form = PostForm() 168 | return render(request, 'blog/post_edit.html', {'form': form}) 169 | ``` 170 | 171 | フォームをsubmitするとき、今は同じビューに戻りますが、このとき `request` 内\(より具体的には `request.POST` 内\)にフォームのデータが保持されています。HTMLファイルで定義された `
` タグに `method="POST"` が指定されていたことを覚えていますか?フォームのすべてのフィールドが `request.POST` 内にあります。`POST` の名前を他の名前に変更することはできません \(それを変更する唯一の方法は `method` に `GET` を指定することですが、それがなぜ間違いであるかを話す時間がありません\) 172 | 173 | そのため _view_ では2つの状況をハンドルするようにします。1つ目は初回アクセス時で空のフォームが欲しい時です。2つ目はフォームの入力を終えて全てのフォームのデータともに _view_ に戻る時です。そこで条件を追加します\(そのために `if` を使用します\)。 174 | 175 | ``` 176 | if request.method == "POST": 177 | [...] 178 | else: 179 | form = PostForm() 180 | ``` 181 | 182 | それでは `[...]` の部分を埋めていきます。 `method` が `POST` の場合、フォームから送られたデータを用いて `PostForm` を作成するために次のようにします: 183 | 184 | ``` 185 | form = PostForm(request.POST) 186 | ``` 187 | 188 | 簡単ですね! 次にフォームの値が正しいかどうかをチェックします（すべての必須フィールドが設定され、全く誤った値が保存されていないことを）。 `form.is_valid()` を使うことでチェックできます。 189 | 190 | フォームをチェックして、フォームの値が有効であれば保存できます。 191 | 192 | ``` 193 | if form.is_valid(): 194 | post = form.save(commit=False) 195 | post.author = request.user 196 | post.save() 197 | ``` 198 | 199 | 基本的にここでは2つのことを行います。まず `form.save` でフォームを保存することと `author` を追加することです\(まだ `PostForm` 内に `author` フィールドがありませんし、このフィールドは必須です\)。`commit=False` は `Post` モデルをまだセーブしません。ではauthorを追加します。`commit=False` を指定せず `form.save()` を実行します。そしてこのケースではそれが必要です。 200 | `post.save()` は変更\(authorの追加\) を保存し、新しいブログ記事を作成します。 201 | 202 | 最後に、新しく作成された記事の `post_detail` ページを表示できれば良いですよね? そのために次のインポートを追加します: 203 | 204 | ``` 205 | from django.shortcuts import redirect 206 | ``` 207 | 208 | それをファイルの先頭に追加します。これでようやく、新しく作成されたポストのための `post_detail` ページに移動する処理を書けます。 209 | 210 | ``` 211 | return redirect(post_detail, pk=post.pk) 212 | ``` 213 | 214 | `post_detail` は新しく作成されたポストのために `post_detail` ページに移動するためのビューです。 この _view_ では `pk` 変数が必須であることを覚えていますか? `post` では新しいブログ記事が作成されます。 215 | 216 | OK, たくさんのことを説明しました。全体の _view_ は以下のようになります。 217 | 218 | ``` 219 | def post_new(request): 220 | if request.method == "POST": 221 | form = PostForm(request.POST) 222 | if form.is_valid(): 223 | post = form.save(commit=False) 224 | post.author = request.user 225 | post.save() 226 | return redirect(post_detail, pk=post.pk) 227 | else: 228 | form = PostForm() 229 | return render(request, 'blog/post_edit.html', {'form': form}) 230 | ``` 231 | 232 | では動作確認してみます。[http://127.0.0.1:8000/post/new/](http://127.0.0.1:8000/post/new/) に行き、 `title` と `text` を追加し、保存します...。できあがり! 新しいブログ記事が追加され、`post_detail` にリダイレクトされます！ 233 | 234 | おそらくあなたは日付が設定されていないことに気づいたことでしょう。 それについては **Django Girls Tutorial: Extensions** 内の _publish button_ をみてください。 235 | 236 | 素晴らしい！ 237 | 238 | ## フォームのバリデーション\(検証\) 239 | 240 | ここではDjangoのフォームのクールなところを紹介します。ブログのポストは `title` と `text` のフィールドが必要です。`Post` モデルでは、これらのフィールドがなくてもよいとは書いておらず\(デフォルトの値が設定されている `published_date` とは対照的に\)、Djangoではその場合、それらのフィールドには何らかの値が設定されないとエラーが起こるようになっています。 241 | 242 | `title` と `text` を入力せずに保存してみましょう。何が起こるでしょうか? 243 | 244 | ![Form validation](images/form_validation2.png) 245 | 246 | Djangoはフォームのすべてのフィールドが正しいことを検証してくれます。気が利くでしょう? 247 | 248 | > ここでは現在、Djangoの管理画面と同様に、ログイン状態で操作しています。いくつかの状況ではログアウト状態になることがあります\(ブラウザを閉じる、DBを再起動するなど..\)。ポストの作成時にログインユーザがわからないことでエラーが発生した場合、管理画面に移動し再度ログインすることで、その問題は一時的に解決します。メインチュートリアルの後 **Homework: add security to your website!** の章に恒久的な対策がありますので宿題として取り組んでみてください。 249 | 250 | ![Logged in error](images/post_create_error.png) 251 | 252 | ## フォームの編集 253 | 254 | 今、私たちは新しいフォームを追加する方法を知っています。しかし既存のデータを編集するためはどうすれば良いのでしょうか?それは先ほど行ったことと非常に似ています。すぐにいくつかの重要なものを作成してみましょう。（もしわからない場合、コーチに尋ねるか、もしくはすでに手順をカバーしているので、前の章を見てください） 255 | 256 | `blog/templates/blog/post_detail.html` を開いて次の行を追加します: 257 | 258 | ``` 259 | 260 | ``` 261 | 262 | テンプレートは次のようになります: 263 | 264 | ``` 265 | {% extends 'blog/base.html' %} 266 | 267 | {% block content %} 268 |
269 | {% if post.published_date %} 270 | {{ post.published_date }} 271 | {% endif %} 272 | 273 |
274 |

{{ post.title }}

275 |

{{ post.text|linebreaks }}

276 | {% endblock %} 277 | ``` 278 | 279 | `blog/urls.py` には次の行を追加します: 280 | 281 | ``` 282 | url(r'^post/(?P[0-9]+)/edit/$', views.post_edit, name='post_edit'), 283 | ``` 284 | 285 | テンプレート `blog/templates/blog/post_edit.html` を再利用します。そしてviewを追加します。 286 | 287 | `blog/views.py` を開いて次をファイルの最後に追加します: 288 | 289 | ``` 290 | def post_edit(request, pk): 291 | post = get_object_or_404(Post, pk=pk) 292 | if request.method == "POST": 293 | form = PostForm(request.POST, instance=post) 294 | if form.is_valid(): 295 | post = form.save(commit=False) 296 | post.author = request.user 297 | post.save() 298 | return redirect(post_detail, pk=post.pk) 299 | else: 300 | form = PostForm(instance=post) 301 | return render(request, 'blog/post_edit.html', {'form': form}) 302 | ``` 303 | 304 | `post_view` とほとんど同じに見えますか? しかし完全に同じではありません。まずURLから `pk` パラメータを渡します。次に `Post` モデルを `get_object_or_404(Post, pk=pk)` で取得します。その後フォームを保存する際、この記事をインスタンスとしてフォームを作成します。 305 | 306 | ``` 307 | form = PostForm(request.POST, instance=post) 308 | ``` 309 | 310 | そしてこの記事でフォームを開き編集します。 311 | 312 | ``` 313 | form = PostForm(instance=post) 314 | ``` 315 | 316 | OK, 動作確認しましょう。 `post_detail` ページにいきます。そこの右上に \[編集\] ボタンがあるはずです: 317 | 318 | ![Edit button](images/edit_button2.png) 319 | 320 | クリックするとブログの記事にフォームが表示されます: 321 | 322 | ![Edit form](images/edit_form2.png) 323 | 324 | あとはお気軽にタイトルやテキストを変更して保存してください。 325 | 326 | おめでとう！アプリケーションが完成しました。 327 | 328 | Djangoのフォームについての詳細を知りたい場合、Django Projectのドキュメントを読んでください: [https://docs.djangoproject.com/ja/1.11/topics/forms/](https://docs.djangoproject.com/ja/1.11/topics/forms/) 329 | 330 | ## もう一つ: deployの時間です! 331 | 332 | ではHeroku上で動作するかを確認しましょう。再度デプロイします。なおデプロイ方法を忘れてしまった場合は章の最後 [Deploy](../deploy/README.md) をチェックしてください: 333 | 334 | ``` 335 | $ git status 336 | ... 337 | $ git add -A . 338 | $ git status 339 | ... 340 | $ git commit -m "Added views to create/edit blog post inside the site." 341 | ... 342 | $ git push heroku master 343 | ``` 344 | 345 | そしてdeployします! おめでとうございます :\) 346 | 347 | -------------------------------------------------------------------------------- /django_forms/images/csrf2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_forms/images/csrf2.png -------------------------------------------------------------------------------- /django_forms/images/drafts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_forms/images/drafts.png -------------------------------------------------------------------------------- /django_forms/images/edit_button2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_forms/images/edit_button2.png -------------------------------------------------------------------------------- /django_forms/images/edit_form2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_forms/images/edit_form2.png -------------------------------------------------------------------------------- /django_forms/images/form_validation2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_forms/images/form_validation2.png -------------------------------------------------------------------------------- /django_forms/images/new_form2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_forms/images/new_form2.png -------------------------------------------------------------------------------- /django_forms/images/post_create_error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_forms/images/post_create_error.png -------------------------------------------------------------------------------- /django_installation/README.md: -------------------------------------------------------------------------------- 1 | # Djangoのインストール 2 | 3 | > このチャプターの一部はGeek Girls Carrots \([http://django.carrots.pl/\)のチュートリアルに基づいています。](http://django.carrots.pl/%29のチュートリアルに基づいています。) 4 | > 5 | > このチャプターの一部はCreative Commons Attribution-ShareAlike 4.0 International License のライセンスによる[django-marcador tutorial](http://django-marcador.keimlink.de/)に基づいています。このdjango-marcador tutorialはMarkus Zapke-Gründemann et al.が著作権を保有しています。 6 | 7 | ## 仮想環境 8 | 9 | Djangoをインストールする前に、まずはあなたのコンピュータの中のコーディング環境をきれいにしておくのに役立つとても便利な道具をインストールしてもらいます。このステップをとばすこともできますが、しかし、このステップをとばすことは全くお勧めしまません。可能な限りベストなセットアップで始めることは将来のたくさんのトラブルからあなたを救うはずですから！ 10 | 11 | さあ、**virtual environment** \(_virtualenv_とも呼ばれています\)を作りましょう。virtual environmentはプロジェクト単位であなたのPython/Djangoセットアップを他から隔離します。つまり、あなたがひとつのウェブサイトにおこなったどんな変更もあなたが開発中の他のサイトに影響を及ぼさないということです。わかりましたか？ 12 | 13 | あなたがしなければならないのは、あなたが'virtualenv'を作成したいディレクトリを見つけることです（たとえばホームディレクトリなどです）。Windowsでは、ホームディレクトリは`C:\Users\Name\`と書かれているかもしれません \(`Name`はあなたのログインネームです\)。 14 | 15 | このチュートリアルのために、ホームディレクトリに新しいディレクトリ\`djangogirls'を作成します。 16 | 17 | `command-line` 18 | 19 | ``` 20 | mkdir djangogirls 21 | cd djangogirls 22 | ``` 23 | 24 | `myvenv`というvirtualenvを作成します。一般的なコマンドは以下のようになります： 25 | 26 | `command-line` 27 | 28 | ``` 29 | python3 -m venv myvenv 30 | ``` 31 | 32 | ### Windows 33 | 34 | 新しい`virtualenv`を作成するために、コマンドプロンプトを開き（コマンドプロンプトについては何章か前にお話ししましたね。覚えてますか？）、`python -m venv myvenv`を実行して下さい。たとえばこのように入力します： 35 | 36 | `command-line` 37 | 38 | ``` 39 | C:\Users\Name\djangogirls>python -m venv myvenv 40 | ``` 41 | 42 | > 注意：Pythonをインストールした時に Add Python 3.x to PATHにチェックを入れ忘れた方は 43 | > 44 | > `C:\Python35\python`　のようにあなたがPythonをインストールしたディレクトリへのパスも記載してください。`myvenv`はあなたの'virtualenv'の名前です。どんな名前でも使うことができますが、必ず小文字で表記し、スペース・アクセント記号・特殊文字は入れないでください。短い名前にしておくのもいいアイデアですーあなたはこの名前を何度も参照しますから！ 45 | 46 | ### Linux and OS X 47 | 48 | LnuxやOX Xで'virtualenv'を作るときは、`python3 -m venv myvenv`と実行するだけです。 49 | 50 | たとえばこんな感じです： 51 | 52 | ``` 53 | ~/djangogirls$ python3 -m venv myvenv 54 | ``` 55 | 56 | `myvenv`はあなたの`virtualenv`の名前です。どんな名前でも使うことができますが、必ず小文字で表記し、スペースは入れないでください。短い名前にしておくのもいいアイデアですーあなたはこの名前を何度も参照しますから！ 57 | 58 | ## virtualenvを使う 59 | 60 | 上に示したコマンドは仮想環境（基本的には一連のディレクトリとファイル）を含む`myvenv`という名前（あるいはあなたが選んだ名前）のディレクトリを生成します。次に我々がしたいのは、これを実行し、開始することです。 61 | 62 | Windowsではこのように入力してください： 63 | 64 | ``` 65 | C:\Users\Name\djangogirls> myvenv\Scripts\activate 66 | ``` 67 | 68 | あるいはOS X、Linuxでは以下のように入力して下さい： 69 | 70 | ``` 71 | ~/djangogirls$ source myvenv/bin/activate 72 | ``` 73 | 74 | `myvenv`のところをあなたが選んだ`virtualenv`名に置き換えることを忘れないで下さいね！ 75 | 76 | > **備考:** `source`ではできない場合もあります。その場合は、代わりに以下のように入力してみてください： 77 | > 78 | > ``` 79 | > ~/djangogirls$ . myvenv/bin/activate 80 | > ``` 81 | 82 | あなたのコンソールのプロンプトが以下のように表示されるのを見て、あなたは`virtualenv`が起動したことに気がつくでしょう。 83 | 84 | ``` 85 | (myvenv) C:\Users\Name\djangogirls> 86 | ``` 87 | 88 | あるいはこういう表示かもしれません： 89 | 90 | ``` 91 | (myvenv) ~/djangogirls$ 92 | ``` 93 | 94 | 行頭に`(myvenv)`が現れたのに注目して下さい！ 95 | 96 | virtual environment\(仮想環境\)の中で作業しているとき、`python`は自動的に正しいバージョンのPythonを参照しますので、'python3'の代わりに'python'を使うことができます。 97 | 98 | OK、これでDjangoのインストール前に入れておきたい依存関係の準備がすべて整いました。いよいよDjangoのインストールです！ 99 | 100 | ## Djangoのインストール 101 | 102 | 今度はあなたのvirtualenvを起動したので、Djangoをインストールすることができます。 103 | 104 | これを行う前に、Djangoのインストールに使用する最新バージョンのpipがインストールされていることを確認する必要があります。 105 | 106 | `command-line` 107 | 108 | ``` 109 | (myvenv) ~$ pip install --upgrade pip 110 | ``` 111 | 112 | 113 | 114 | いまあなたの`virtualenv`は起動しているので、`pip`を使ってDjangoをインストールすることができます。コンソールの中で、`pip install django==1.11`\(ここではダブルイコールサイン `==` を使います\)と実行して下さい。 115 | 116 | ``` 117 | (myvenv) ~$ pip install django==1.11 118 | Downloading/unpacking django==1.11 119 | Installing collected packages: django 120 | Successfully installed django 121 | Cleaning up... 122 | ``` 123 | 124 | Windowsの場合 125 | 126 | > Windowsでpipを呼んだときにエラーが起きた場合は、あなたのプロジェクトのパス名がスペース・アクセント・特殊文字を含んでいないか確認してみて下さい \(例 `C:\Users\User Name\djangogirls`\)。もし含まれている場合は、そのディレクトリを他のスペース・アクセント・特殊文字が含まれていない場所（`C:\djangogirls`など）に移動することを検討してみてください。移動したあとに上記のコマンドを試してみてください。 127 | 128 | Linuxの場合 129 | 130 | > Ubuntu 16.04でpipを呼んだときにエラーが起きた場合は、virtualenv内でpipインストールをフィックスするために`python -m pip install -U --force-reinstall pip`を実行して下さい。 131 | 132 | 以上です！あなたは（ついに）Djangoアプリケーションを作成する準備が整いました！ 133 | 134 | -------------------------------------------------------------------------------- /django_models/README.md: -------------------------------------------------------------------------------- 1 | # Django models 2 | 3 | さて、ブログの中のポストを格納するものが欲しいですよね。そのために`オブジェクト`についてちょっとお話します。 4 | 5 | ## オブジェクト 6 | 7 | プログラミングには`オブジェクト指向プログラミング`という概念があります。それは退屈なプログラムを繰り返し書く代わりにモデルになるものを作って、それが他とどう作用するかを定義するという考え方です。 8 | 9 | じゃあオブジェクトって何なの？って思いますよね。オブジェクトは状態（プロパティ）と命令（アクション）の塊です。ピンと来ないでしょうから例を挙げましょう。 10 | 11 | 猫をモデルにしたいときは、`猫`\(`Cat`\)オブジェクトを作ります。そのプロパティは、`色`\(`color`\)、`年齢`\(`age`\)、`機嫌`\(`mood`\)（いい、悪い、眠い）、`飼い主`\(`owner`\)（`人`\(`Person`\)オブジェクトですね、捨て猫ならそのプロパティは空白）です。 12 | 13 | `猫`のアクションは、`喉を鳴らす`\(`purr`\)、`引っ掻く`\(`scratch`\)、`餌を食べる`\(`feed`\)（`キャットフード`\(`CatFood`\)などで、それはまた`味`\(`taste`\)というプロパティを持つ別のオブジェクトになるでしょう。） 14 | 15 | ``` 16 | Cat 17 | -------- 18 | color 19 | age 20 | mood 21 | owner 22 | purr() 23 | scratch() 24 | feed(cat_food) 25 | 26 | 27 | CatFood 28 | -------- 29 | taste 30 | ``` 31 | 32 | つまり、オブジェクト指向とは実際の物をプロパティ（`オブジェクト・プロパティ`と呼びます）を持つコードと命令（`メソッド`と呼びます）で表現するという考え方です。 33 | 34 | ではブログポストはどういうモデルになるでしょうか。ブログが作りたいんですよね？ 35 | 36 | それにはブログポストとは何か、それはどんなプロパティがあるかという問いに答えなければなりません。 37 | 38 | まず確実なのはブログポストにはコンテンツと表題がが必要ですね。それからそれを書いた人が分かるといいでしょう。最後にポストの作成公開した時間も分かるといいですね。 39 | 40 | ``` 41 | Post 42 | -------- 43 | title 44 | text 45 | author 46 | created_date 47 | published_date 48 | ``` 49 | 50 | ではブログポストがどうなればいいですか？ポストをが公開されるといいですよね？ 51 | なので`publish`メソッドが必要です。 52 | 53 | 達成したいことが分かったので、Djangoでモデリングの開始です！ 54 | 55 | ## Django model 56 | 57 | オブジェクトが何か分かったので、ブログポストのDjangoモデルを作りましょう。 58 | 59 | Djangoのモデルは特別なオブジェクトで、`データベース`に格納されます。データベースはデータの集まりです。 60 | ここにユーザーやブログポストの情報を格納します。データを格納するのにSQLiteデータベースを使います。これはDjangoのデフォルトのデータベースで、今はこれで十分です。 61 | 62 | データベースの中のモデルは、列（フィールド）と行（データ）があるスプレッドシートと思ってもらっても結構です。 63 | 64 | ### Creating an application 65 | 66 | 全部をきちんと整理しておくため、プロジェクトの中に別のアプリケーションを作ります。初めから全てを整理しておくのはとっても良いことです。アプリケーションを作るには、次のコマンドをコンソールの中で走らせなけれなりません。（`manage.py`ファイルがある`djangogirls`ディレクトリから）： 67 | 68 | `command-line` 69 | 70 | ``` 71 | (myvenv) ~/djangogirls$ python manage.py startapp blog 72 | ``` 73 | 74 | 新しいブログディレクトリが作られて、今沢山のファイルがそこに入っているのに気がついたでしょう。ディレクトリとファイルはこんな風に見えるはずです： 75 | 76 | ``` 77 | djangogirls 78 | ├── blog 79 | │ ├── __init__.py 80 | │ ├── admin.py 81 | │ ├── apps.py 82 | │ ├── migrations 83 | │ │ └── __init__.py 84 | │ ├── models.py 85 | │ ├── tests.py 86 | │ └── views.py 87 | ├── db.sqlite3 88 | ├── manage.py 89 | └── mysite 90 | ├── __init__.py 91 | ├── settings.py 92 | ├── urls.py 93 | └── wsgi.py 94 | ``` 95 | 96 | アプリケーションを作ったら、Djangoにそれを使うように伝えないといけません。それは`mysite/settings.py`ファイルの中でやります。まず`INSTALLED_APPS`をみつけて`)`の上に`'blog'`という一行を追加します。 97 | 98 | `mysite/settings.py` 99 | 100 | ``` 101 | INSTALLED_APPS = ( 102 | 'django.contrib.admin', 103 | 'django.contrib.auth', 104 | 'django.contrib.contenttypes', 105 | 'django.contrib.sessions', 106 | 'django.contrib.messages', 107 | 'django.contrib.staticfiles', 108 | 'blog', 109 | ) 110 | ``` 111 | 112 | ### Creating a blog post model 113 | 114 | `blog/models.py`ファイルで`Models`と呼ばれる全てのオブジェクトを定義します。これがブログポストを定義する場所です。 115 | 116 | `blog/models.py`を開いて全部削除し、下のコードを書きます： 117 | 118 | `blog/models.py` 119 | 120 | ``` 121 | from django.db import models 122 | from django.utils import timezone 123 | 124 | class Post(models.Model): 125 | author = models.ForeignKey('auth.User') 126 | title = models.CharField(max_length=200) 127 | text = models.TextField() 128 | created_date = models.DateTimeField( 129 | default=timezone.now) 130 | published_date = models.DateTimeField( 131 | blank=True, null=True) 132 | 133 | def publish(self): 134 | self.published_date = timezone.now() 135 | self.save() 136 | 137 | def __str__(self): 138 | return self.title 139 | ``` 140 | 141 | > `str`の両側に2つのアンダースコア（`_`）がちゃんと入っているか確認しましょう。これはPythonでよく使われて"ダンダー"\(ダブルアンダースコア）と呼んでいます。 142 | 143 | 難しそうでしょ？でも大丈夫！ちゃんと説明しますから。 144 | 145 | `from`とか`import`で始まる行は全部他のファイルから何かをちょこっとずつ追加する行です。なので色んなファイルから必要な部分をコピペする代わりに`from ... import ...`で必要部分を入れられるんです。 146 | 147 | `class Post(models.Model):` - この行が今回のモデルを定義します \(これが`オブジェクト`です\). 148 | 149 | * `class`はオブジェクトを定義してますよ、ということを示すキーワードです。 150 | * `Post`はモデルの名前で、他の名前をつけることもできます（が、特殊文字と空白は避けなければいけません）。クラス名は大文字で始めます。 151 | * `models.Model`はポストがDjango Modelだという意味で、Djangoが、これはデータベースに保存すべきものだと分かるようにしています。 152 | 153 | さて今度はプロパティを定義しましょう：`title`、`text`、`created_date`、`published_date`、それに`author`ですね。 154 | それにはまずフィールドのタイプを決めなければいけません。（テキスト？数字？日付？他のオブジェクト、例えばユーザーとの関係は？） 155 | 156 | * `models.CharField` - テキスト数を定義するフィールド 157 | * `models.TextField` - これは制限無しの長いテキスト用で、ブログポストのコンテンツに理想的なフィールドでしょ？ 158 | * `models.DateTimeField` - 日付と時間のフィールド 159 | * `models.ForeignKey` - これは他のモデルへのリンク 160 | 161 | コードの細かいところまでは説明し出すと時間がかかるので、ここではしませんが、モデルのフィールドや上記以外の定義のやり方について知りたい方は是非Djangoドキュメントを見てみて下さい。\([https://docs.djangoproject.com/ja/1.11/ref/models/fields/\#field-types](https://docs.djangoproject.com/ja/1.11/ref/models/fields/#field-types)\) 162 | 163 | `def publish(self):`は何かと言うと、これこそが先程お話したブログを公開するメソッドそのものです。`def`は、これはファンクション（関数）/メソッドといいう意味です。 164 | `publish`というのはこのメソッドの名前で、変えることもできます。 165 | メソッドの名前に使っていいのは、英小文字とアンダースコアで、アンダースコアはスペースの代わりに使います（例えば、平均価格を計算するメソッドは`calculate_average_price`っていう名前にします） 166 | 167 | メソッドは通常何かを`return`します。一つの例が`__str__`メソッド にあります。このシナリオでは、`__str__()`を呼ぶと、ポストの表題のテキスト\(**string**\)が返ってきます。 168 | 169 | もしモデルがまだはっきりつかめないようだったら、気軽にコーチに聞いて下さい！特にオブジェクトとファンクションを同時に習ったときはとても複雑なのはよく分かってますから。でも前ほど魔法みたいじゃないといいですけど！ 170 | 171 | ### データベースにモデル用のテーブルを作る 172 | 173 | 最後のステップは新しいモデルをデータベースに追加することです。まず、（今作った）モデルの中で少し変更があったことをDjangoに知らせなければなりませんから、`python manage.py makemigrations blog`とタイプします。こんな感じです。 174 | 175 | `command-line` 176 | 177 | ``` 178 | (myvenv) ~/djangogirls$ python manage.py makemigrations blog 179 | Migrations for 'blog': 180 | 0001_initial.py: 181 | - Create model Post 182 | ``` 183 | 184 | Djangoがデータベースに入れる為の移行ファイルを作ってくれているので、`python manage.py migrate blog`とタイプするとこうなるでしょう。 185 | 186 | `command-line` 187 | 188 | ``` 189 | (myvenv) ~/djangogirls$ python manage.py migrate blog 190 | Operations to perform: 191 | Apply all migrations: blog 192 | Running migrations: 193 | Applying blog.0001_initial... OK 194 | ``` 195 | 196 | やった～！ポストモデルがデータベースに入りました。どうなったか見たいでしょ？次へ進みましょう！ 197 | 198 | -------------------------------------------------------------------------------- /django_orm/README.md: -------------------------------------------------------------------------------- 1 | # DjangoのORMとクエリセット 2 | 3 | この章では、Djangoのデータベース接続方法と、データストアについて学びます。やってみましょう！ 4 | 5 | ## クエリセットとは？ 6 | 7 | クエリセットが何かと言うと、モデルが提供しているオブジェクトのリストのことです。クエリセットは、データベースからデータを読み込んだり、抽出したり、言われた通りにやってくれます。 8 | 9 | 実際に動かしてみるのが一番わかりやすいので、試してみましょう。 10 | 11 | ## Django shell 12 | 13 | コンソール画面を開いて、次のコマンドを入力してみましょう。 14 | 15 | (myvenv) ~/djangogirls$ python manage.py shell 16 | 17 | 次のような表示に切り替わるでしょう。 18 | 19 | (InteractiveConsole) 20 | >>> 21 | 22 | 今、Djangoのインタラクティブコンソールが起動しています。Pythonプロンプトしかないように見えますが、ちゃんとDjangoも動いています。勿論このコンソール画面では、Pythonのコマンドは何でも使えます。 23 | 24 | ### All objects 25 | 26 | 最初に、ポストデータを全部表示させてみましょう。次のコマンドで、ポストのデータを全部表示させることが出来ます。 27 | 28 | >>> Post.objects.all() 29 | Traceback (most recent call last): 30 | File "", line 1, in 31 | NameError: name 'Post' is not defined 32 | 33 | ごめんなさい、エラーになってしまいましたね。Postがないというエラーです。その通りなんです。最初にインポートをしなくてはならないのに、忘れていました。 34 | 35 | >>> from blog.models import Post 36 | 37 | こんな風に書くだけで、`blog.models`から`Post`モデルをインポート出来ます。それでは、もう一度試してみましょう。 38 | 39 | >>> Post.objects.all() 40 | [, ] 41 | 42 | さっきDjangoの管理画面から作ったポストのリストが表示されました。だけど、次はこのコンソール画面から、新たにポストを作ってみたいですよね。それはどうすればいいのでしょうか。 43 | 44 | ### Create object 45 | 46 | データベースに、新しいPostを作成するには、次のようにします。 47 | 48 | >>> Post.objects.create(author=me, title='Sample title', text='Test') 49 | 50 | いい感じなのですが、1つだけマズイことをしているんです。authorに `me` を渡していますが、これは `User` モデルのインスタンスでないといけませんよね。それは、どうやればいいと思います？、 51 | 52 | そうです、さっきと同じです。Userモデルも先にインポートしておきましょう。 53 | 54 | >>> from django.contrib.auth.models import User 55 | 56 | どんなユーザが、データベースに登録されてましたっけ？覗いてみましょうか。 57 | 58 | >>> User.objects.all() 59 | [] 60 | 61 | 作成しておいたスーパーユーザがいますね。このユーザを使ってみましょう。 62 | 63 | me = User.objects.get(username='ola') 64 | 65 | `ola` というユーザ名の `User` モデルのインスタンスを、取り出せたでしょう？よかった！勿論、他のユーザ名のユーザを取り出しても構いません。 66 | 67 | さあ、遂にコンソール画面から、最初のポストを作成出来ますね。 68 | 69 | >>> Post.objects.create(author = me, title = 'Sample title', text = 'Test') 70 | 71 | どうでしょうか？ちゃんと出来ているか、確認しておきましょうね。 72 | 73 | >>> Post.objects.all() 74 | [] 75 | 76 | ### Add more posts 77 | 78 | この先の楽しみの為にも、もう2〜3個、記事を作っておきましょう。そうすれば、もっとよくこの章を理解出来ると思います。 79 | 80 | ### Filter objects 81 | 82 | クエリセットの大部分は、フィルタ機能だと言えるでしょう。ユーザolaさんのポストを全部確認してみましょうか。全部のポストを取り出すのではなく、olaさんのポストだけを取り出したい場合は、`Post.objects.all()` の `all` を `filter` に変更します。クエリセットの結果として、カッコの中に、blogの内容が一覧で表示されました。以下の例だと、 `author` が `me` と等しいものだけが抽出されています。 83 | 84 | >>> Post.objects.filter(author=me) 85 | [, , , ] 86 | 87 | もしかすると `title` フィールドに `title` という単語が含まれているポストだけを取り出したくなるかもしれませんね。 88 | 89 | >>> Post.objects.filter(title__contains='title') 90 | [, ] 91 | 92 | > **Note** `title` と `contains` の間に、アンダーバーが2個続いていますが、これはDjangoのORMの構文です。フィールド名のtitleと、照合タイプのcontainsを、2つのアンダーバーで連結させています。もしアンダーバーが1個だけだと、title_contains というフィールド名だと判断されてしまい、エラーになります。("FieldError: Cannot resolve keyword title_contains") 93 | 94 | また、公開済みの全ポストを取り出すことも出来ます。全てのポストの中から、既に公開済みのポストを取り出してみましょう。それには、 `published_date` を指定します。 95 | 96 | 97 | >>> from django.utils import timezone 98 | >>> Post.objects.filter(published_date__lte=timezone.now()) 99 | [] 100 | 101 | そうでした、残念なことに、まだどのポストも公開されていませんね。じゃあ、ポストを公開してみるとしましょう。まず公開するポストを決めましょう。 102 | 103 | >>> post = Post.objects.get(id=1) 104 | 105 | そして、 `publish` メソッドを呼び出します。 106 | 107 | >>> post.publish() 108 | 109 | じゃあ、もう一度公開済みのポストを取り出しましょう。(上方向キーを3回押せば、さっきのコマンドを呼び出せるでしょう。コマンドを表示出来たら、Enterキーを押してみましょう) 110 | 111 | >>> Post.objects.filter(published_date__lte=timezone.now()) 112 | [] 113 | 114 | ### Ordering objects 115 | 116 | クエリーセットは、オブジェクトのリストの並べ替えもやってくれます。試しに `created_date` フィールドで並べ替えてみましょう。 117 | 118 | >>> Post.objects.order_by('created_date') 119 | [, , , ] 120 | 121 | 逆順、つまり新しく追加した順に並べ替えることもできます。それには、`-` ハイフンを使います。 122 | 123 | >>> Post.objects.order_by('-created_date') 124 | [, , , ] 125 | 126 | どうです？次の章への準備は万端ですね！このプロンプトを閉じるには、以下のようにします。 127 | 128 | >>> exit() 129 | $ 130 | -------------------------------------------------------------------------------- /django_start_project/README.md: -------------------------------------------------------------------------------- 1 | # Your first Django project! 2 | 3 | > このチャプターの一部はGeek Girls Carrots \([http://django.carrots.pl/](http://django.carrots.pl/)\) のチュートリアルに基づいています。 4 | > 5 | > このチャプターの一部はCreative Commons Attribution-ShareAlike 4.0 International License のライセンスによる [django-marcador 6 | > tutorial](http://django-marcador.keimlink.de/) に基づいています。このdjango-marcador tutorialはMarkus Zapke-Gründemann らが著作権を保有しています。 7 | 8 | ここからは、シンプルなブログを作っていきますよ！ 9 | 10 | 最初のステップは、Djangoのプロジェクトを新しく作成します。つまり、Djangoのスクリプトを実行し、これから使う沢山のファイルやディレクトリを自動生成して、プロジェクトの骨格を作ります。 11 | 12 | Djangoでは、ファイルやディレクトリの名前がとても重要です。ここで作成するファイルの名前は、後から変えるべきではありません。ファイルを移動させるのもいいアイディアとはいえません。Djangoでは、重要なファイルを決められたファイル構成で作成しておくことが必要です。 13 | 14 | > virtualenv（仮想環境）を実行しているでしょうか。コンソールに`(myvenv)`という括弧が表示されていなければ、virtualenvを実行してください。 チャプター**Django installation**の**Working with virtualenv** で、仮想環境を実行する方法を説明しました。覚えていますか？次のコマンドを入力ですよ。: Windowsでは、`myvenv\Scripts\activate`, Mac OS / Linuxでは、 15 | > `myvenv/bin/activate` でしたね。 16 | 17 | プロジェクトは、コンソール上で次のコマンドで作成します。\(いいですか？`(myvenv) ~/djangogirls$`は入力の必要がありませんよ。\): 18 | 19 | > 補足 コマンドのコマンドの最後にピリオド \(`.`\) があることを確認してくださいね。これば、現在の作業ディレクトリにDjangoをインストールするということを示すので、とても重要なのです。 20 | 21 | ``` 22 | (myvenv) ~/djangogirls$ django-admin startproject mysite . 23 | ``` 24 | 25 | On Windows: 26 | 27 | ``` 28 | (myvenv) C:\Users\Name\djangogirls> python myvenv\Scripts\django-admin.py startproject mysite . 29 | ``` 30 | 31 | > ~~**補足** コマンドの最後にピリオド \(`.`\) があることを確認してくださいね。これば、現在の作業ディレクトリにDjangoをインストールするということを示すので、とても重要なのです。~~ 32 | 33 | `django-admin.py` は、必要なディレクトリとファイルを作成するスクリプトです。次のようなファイル構造が作成されましたね。: 34 | 35 | ``` 36 | djangogirls 37 | ├── manage.py 38 | └── mysite 39 | ├── __init__.py 40 | ├── settings.py 41 | ├── urls.py 42 | └── wsgi.py 43 | ``` 44 | 45 | `manage.py` はサイト管理用のスクリプトです。これで、他のものを一切インストールすることなく、コンピューター上でWebサーバーを動かすことができます。 46 | 47 | `settings.py`は、サイトの設定ファイルです。 48 | 49 | どこに手紙を配達するか番地を確認する郵便配達員の話を覚えていますか？ `urls.py`ファイルは、`urlresolver`をつかったURLのパターンのリストを含んでいます。 50 | 51 | 今は他のファイルについては無視しておきましょう。触ることはありません。間違って削除してしまわないようにさえしておけば大丈夫です！ 52 | 53 | ## Changing settings 54 | 55 | 次に、`mysite/settings.py`の中を少し変更していきましょう。エディタでファイルを開いて下さい。 56 | 57 | サイトのタイムゾーンを修正しておきましょう。［ウィキペディアのtimezones list］\([http://en.wikipedia.org/wiki/List\_of\_tz\_database\_time\_zones](http://en.wikipedia.org/wiki/List_of_tz_database_time_zones)\) に一覧がありますので、あなたがいるタイムゾーン\(TZ\)を探してください。\(例 `Europe/Berlin` `Asia/Tokyo`\) 58 | 59 | 開いたファイルの中に、`USE_TZ` や`TIME_ZONE`と書かれた行をみつけてください。 タイムゾーンを次のように変更しましょう。: 60 | 61 | ``` 62 | LANGUAGE_CODE = 'ja-JP' 63 | 64 | TIME_ZONE = 'Asia/Tokyo' 65 | 66 | USE_TZ = False 67 | ``` 68 | 69 | ## Setup a database 70 | 71 | 世の中には沢山のデータベースソフトウェアがありますが、今日は`sqlite3`というデータベースを使います。 72 | 73 | これは、`mysite/settings.py`ファイルの次の箇所で、すでにセットアップされています。: 74 | 75 | ``` 76 | DATABASES = { 77 | 'default': { 78 | 'ENGINE': 'django.db.backends.sqlite3', 79 | 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 80 | } 81 | } 82 | ``` 83 | 84 | 次のコマンドをコンソールで実行して、データベースをこのブログに作成しましょう。：`python manage.py migrate` 85 | （`manage.py`ファイルが含まれている`djangogirls`ディレクトリでコマンドを実行してください。）次のような画面になれば、実行は上手くいっています。: 86 | 87 | ``` 88 | (myvenv) ~/djangogirls$ python manage.py migrate 89 | Operations to perform: 90 | Apply all migrations: admin, contenttypes, auth, sessions 91 | Running migrations: 92 | Applying contenttypes.0001_initial... OK 93 | Applying auth.0001_initial... OK 94 | Applying admin.0001_initial... OK 95 | Applying sessions.0001_initial... OK 96 | ``` 97 | 98 | これでデータベースができました。サーバーを動かして、Webサイトがうまく動いているか確認しましょう！ 99 | 100 | `manage.py`ファイルを含むディレクトリ（`djangogirls`ディレクトリ）にいることを確認してください。コンソールで、 `python manage.py runserver`とコマンドを入力してサーバーを動かします。: 101 | 102 | ``` 103 | (myvenv) ~/djangogirls$ python manage.py runserver 104 | ``` 105 | 106 | サイトがきちんと動いているか確認してみましょう。ブラウザを開いてください。\(Firefox, Chrome, Safari, Internet Explorerなど、いつも使っているブラウザでいいですよ\) 次のアドレスを入れてください。: 107 | 108 | ``` 109 | http://127.0.0.1:8000/ 110 | ``` 111 | 112 | ウェブサーバーは、あなたがコマンドプロンプトで実行を停止するまで動き続けています。さらにコマンドを実行する場合は、新しいターミナルウィンドウを開くか（その時、virtualenvをまた実行することを忘れないで下さい）、あるいは、実行中のウェブサーバーを停止してください。停止する時は、CTRL+C（コントロールとCボタンを同時に押す）です。（Windowsの方は、Ctrl+Breakで停止することがあります。） 113 | 114 | おめでとうございます! これで、はじめてのWebサイトを作成して、サーバーを使って動かすことができました。すごいですね！ 115 | 116 | ![It worked!](images/it_worked2.png) 117 | 118 | 次のステップに進みましょう！いよいよ、コンテンツを作成していきます！ 119 | 120 | -------------------------------------------------------------------------------- /django_start_project/images/it_worked2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_start_project/images/it_worked2.png -------------------------------------------------------------------------------- /django_templates/README.md: -------------------------------------------------------------------------------- 1 | # Djangoテンプレート 2 | 3 | 何かデータを表示しましょう！Djangoはそれをビルトインの __テンプレートタグ__ で実現できます。 4 | 5 | 6 | ## テンプレートタグとは？ 7 | 8 | HTMLではブラウザがpythonを認識できないのでpythonのコードは書けません。HTMLはより静的でpythonは動的です。 9 | 10 | __Djangoテンプレートタグ__ はHTMLにPyhtonのようなコードを埋め込むことができて、動的なウェブサイトがより早く簡単に作れます! 11 | 12 | ## ブログ一覧テンプレート 13 | 14 | 前の章で、posts変数でテンプレートに記事のリストを渡しました。今からHTMLで表示をしてみましょう。 15 | 16 | Djangoテンプレートで変数を表示する為には、変数の名前を二重括弧で括ります: 17 | 18 | {{ posts }} 19 | 20 | これを`blog/templates/blog/post_list.html`に書いてみて下さい。（２つめと３つ目の`
`タグをまるごと `{{posts}}` に置き換えて下さい。）ファイルを保存してページをリロードしますと： 21 | 22 | ![Figure 13.1](images/step1.png) 23 | 24 | 見たとおり、このようになります。 25 | 26 | [, ] 27 | 28 | Djangoはオブジェクトのリストと認識します。__Introduction to Python__を思い出して下さい。ループを使ってリストを表示しましたよね。Djangoテンプレートではこう書きます: 29 | 30 | {% for post in posts %} 31 | {{ post }} 32 | {% endfor %} 33 | 34 | これをブログのテンプレートで使ってみましょう。 35 | 36 | ![Figure 13.2](images/step2.png) 37 | 38 | 動きましたね。しかし、__Introduction to HTML__で作った静的な記事のような表示です。HTMLとテンプレートタグを混ぜてみましょう。bodyタグの中を次のように書いてください: 39 | 40 |
41 |

Django Girls Blog

42 |
43 | 44 | {% for post in posts %} 45 |
46 |

published: {{ post.published_date }}

47 |

{{ post.title }}

48 |

{{ post.text|linebreaks }}

49 |
50 | {% endfor %} 51 | 52 | `{% for %}`と`{% endfor %}`の間にリストの中のオブジェクトごとに表示したい内容を書くとオブジェクトの数だけ繰り返し書かれます。ページをリロードしてみましょう。 53 | 54 | ![Figure 13.3](images/step3.png) 55 | 56 | `post` 変数がさっきと違って、`{{ post.title }}` や `{{ post.text }}` になっていることに気づきましたか？ `Post` モデルで定義したそれぞれのフィールドにアクセスしています。`|linebreaks` はPostのテキスト中の改行を段落に変換するフィルタに通すという意味です。 57 | 58 | ## もう一つ... 59 | 60 | Herokuにデプロイして、インターネットでウェブサイトを公開できます。おさらいしましょう。 61 | 62 | $ git status 63 | [...] 64 | $ git add -A . 65 | $ git status 66 | [...] 67 | $ git commit -m "Added views to create/edit blog post inside the site." 68 | [...] 69 | $ git push # heroku master 70 | 71 | 最後にブラウザのタブを開いてアプリをリロードします。更新が反映されています！ 72 | 73 | おめでとう！これができたら、Django adminとして新しい投稿を追加しましょう。（published_dateを忘れないで！）それから、投稿したものがそこに見えるか、リロードしましょう。 74 | 75 | 動くのが楽しくなってきたでしょう？少しパソコンから離れて、休憩しましょう：） 76 | 77 | ![Figure 13.4](images/donut.png) 78 | -------------------------------------------------------------------------------- /django_templates/images/donut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_templates/images/donut.png -------------------------------------------------------------------------------- /django_templates/images/step1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_templates/images/step1.png -------------------------------------------------------------------------------- /django_templates/images/step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_templates/images/step2.png -------------------------------------------------------------------------------- /django_templates/images/step3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_templates/images/step3.png -------------------------------------------------------------------------------- /django_urls/README.md: -------------------------------------------------------------------------------- 1 | # Django urls 2 | 3 | 最初のウェブページを立てましょう、あなたのブログです。始めに、djangoのURLについて少し学びましょう。 4 | 5 | ## What is a URL? 6 | 7 | URLは簡単に言えばWEB上のアドレスです。サイトのURLは、ブラウザのアドレスバーで見ることができます。（そう、`127.0.0.1:8000` や [http://djangogirls.com](http://djangogirls.com) がURLです。） 8 | 9 | ![Url](images/url.png) 10 | 11 | インターネットの全てのページはURLを持っています。それによって、これから作るアプリケーションが、URLを指定してアクセスしてきたユーザに、何を見せたらいいのかわかるのです。Djangoでは`URL_conf`（URL設定）と呼ばれるものを使います。これは、指定されたURLに合わせてDjangoがどのviewを返したらいいか判断する仕組みのことです。 12 | 13 | ## How do URLs work in Django? 14 | 15 | `mysite/urls.py`を開いて、中身をみてみると： 16 | 17 | ``` 18 | from django.conf.urls import include, url 19 | from django.contrib import admin 20 | 21 | urlpatterns = [ 22 | # Examples: 23 | # url(r'^$', 'mysite.views.home', name='home'), 24 | # url(r'^blog/', include('blog.urls')), 25 | 26 | url(r'^admin/', include(admin.site.urls)), 27 | ] 28 | ``` 29 | 30 | ご覧のとおり、Djangoは既にこのようなものを置いてくれています。 31 | 32 | `#`で始まっている行はコメント行です。これはPythonによって実行されない行です。とっても便利でしょう？ 33 | 34 | 前の章で訪れたadminのURLについてはすでに書いてありますね。 35 | 36 | ``` 37 | url(r'^admin/', include(admin.site.urls)), 38 | ``` 39 | 40 | `admin/`で始まる全てのURLについて、Djangoが返すべき_view_をこの行で指定しています。今回の場合、adminで始まるURLをたくさん作ることになりますが、その全てをこの小さいファイルに書くようなことはしません。この方がきれいで読みやすいですし。 41 | 42 | ## Regex 43 | 44 | どのやってDjangoはビューにURLをマッチするのかと思うかもしれません。そうです、この部分はひとひねりしています。Djangoは`regex`、正規表現を使います。Regexは多くの（本当に多くの）検索パターンのルールを持っています。理解するのは簡単では無いですが、今は心配しないで下さい。将来、それらを正確に理解できるでしょう。今回は必要なものだけ使っています。 45 | 46 | あんまり悩まないですむような簡単な例で説明しますね。 47 | `http://www.mysite.com/post/12345/`のようなアドレスを持つウェブサイトがあるとします。ここで、`12345`はブログポストの番号です。ブログポストの番号ごとに、それぞれ別々のviewを書くなんて絶対無理ですよね。Djangoでは`http://www.mysite.com/post//`と書くだけで、後は全部お任せできるんです！ 48 | 49 | ## Your first Django url! 50 | 51 | さあ最初のURLを作りましょう！'[http://127.0.0.1:8000/](http://127.0.0.1:8000/)' はブログの入口ページなので、投稿したブログポストのリストを表示したいです。 52 | 53 | `mysite/urls.py` ファイルは簡潔なままにしておきたいので、`mysite/urls.py`では`blog`アプリからURLをインポートするだけにしましょう。 54 | 55 | コメントされた行（`#`で始まる行）を消して、入口ページのURL（'```'）には``blog.urls\`をインポートするように書いてください。 56 | 57 | `mysite/urls.py`ファイルはこのようになります： 58 | 59 | ``` 60 | from django.conf.urls import include, url 61 | from django.contrib import admin 62 | 63 | urlpatterns = [ 64 | url(r'^admin/', include(admin.site.urls)), 65 | url(r'', include('blog.urls')), 66 | ] 67 | ``` 68 | 69 | これでDjangoは '[http://127.0.0.1:8000/](http://127.0.0.1:8000/)' に来たリクエストは`blog.urls`へリダイレクトするようになり、それ以降はそちらを参照するようになります。 70 | 71 | ## blog.urls 72 | 73 | 新しく`blog/urls.py`という空のファイルを作って下さい。そして最初の2行を以下のように書きます： 74 | 75 | ``` 76 | from django.conf.urls import include, url 77 | from . import views 78 | ``` 79 | 80 | これはDjangoのメソッドと、`blog`アプリの全てのビュー（といっても、今は一つもありません。すぐに作りますけど！）をインポートするという意味です。 81 | 82 | その後、最初のURLパターンを追加します。 83 | 84 | ``` 85 | urlpatterns = [ 86 | url(r'^$', views.post_list, name='post_list'), 87 | ] 88 | ``` 89 | 90 | これは`^$`というパターンのURLを`post_list`というビューに割り当てたことを意味します。`^$` とは何を意味しているのでしょうか。それは正規表現のマジックです:）分解してみましょう： 91 | 92 | * 正規表現での`^`は「文字列の開始」を意味します。ここからパターンマッチを始めます。 93 | * `$`は「文字列の終端」を意味していて、ここでパターンマッチを終わります。 94 | 95 | この2つの記号を並べたパターンがマッチするのは、そう、空の文字列です。といっても、DjangoのURL名前解決では '[http://127.0.0.1:8000/](http://127.0.0.1:8000/)' は除いてパターンマッチするので、このパターンは '[http://127.0.0.1:8000/](http://127.0.0.1:8000/)' 自体を意味します。つまり、'[http://127.0.0.1:8000/](http://127.0.0.1:8000/)' というURLにアクセスしてきたユーザに対して`views.post_list`を返すように指定していることになります。 96 | 97 | 最後の部分である `name='post_list'` はビューを特定するためのURLの名前として使われます。ここでは、ビューと同じ名前をつけていますが、全く違う名前をつけることもできます。ここで名付けたURLはこのチュートリアルの後の方で使用するので、URLに対してきちんと名前をつけておきましょう。この名前はユニークにしておく必要があります。また、シンプルにしておいた方が覚えやすいのですよ。 98 | 99 | では、[http://127.0.0.1:8000/](http://127.0.0.1:8000/) を開いて結果を見てみましょう。残念ながら'web page not available'というメッセージが表示されます。これはサーバ\(`runserver`ってタイプしたのを覚えていますか？\)が動いていないからです。なぜこうなったのかを知るためにサーバのコンソール画面を見てみましょう。 100 | 101 | ![](/django_urls/images/error1.png) 102 | 103 | エラーが表示されていますね。でも心配しないで、これはただのエラーページで、怖がるものではありません。むしろ、結構便利なものなんですよ： 104 | 105 | `'post_list'`というアトリビュートがない、と書いてあるのが見えますね。_post\_list_ と聞いて、何か思い出しませんか？そう、さっきこのURLに、ビューの`post_list`を割り当てたのでした。でも、_ビュー_ をまだ作ってないんですから、このエラーが出るのは当然ですよね。なにもおかしいことはしていません。次の章ではビューを作っていきましょう。 106 | 107 | > Django URLconfについて知りたい場合は、公式のドキュメントを見て下さい： [https://docs.djangoproject.com/ja/1.11/topics/http/urls/](https://docs.djangoproject.com/ja/1.11/topics/http/urls/) 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /django_urls/images/error1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_urls/images/error1.png -------------------------------------------------------------------------------- /django_urls/images/error1_old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_urls/images/error1_old.png -------------------------------------------------------------------------------- /django_urls/images/url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_urls/images/url.png -------------------------------------------------------------------------------- /django_views/README.md: -------------------------------------------------------------------------------- 1 | # Django views - time to create! 2 | 3 | それでは前の章の続きをやりましょう。確かビューの作成がまだだったので、エラーになっていましたね。 4 | 5 | *ビュー* はアプリのロジックを担当しています。ビューは要求に応じて `model` から情報を取得し `template` に渡します。モデルはついさっき作りましたし、テンプレートもすぐ次の章で作ります。ビューは、Pythonで記述されているだけです。__Introduction to Python__ の章でやったことよりも、ちょっと複雑なだけですよ。 6 | 7 | ビューは、`views.py` に記述します。私達の場合 `blog/views.py` に書くことになります。 8 | 9 | ## blog/views.py 10 | 11 | では、早速 blog/views.py を開いてみましょう。 12 | 13 | from django.shortcuts import render 14 | 15 | # Create your views here. 16 | 17 | まだ何もないですね。とりあえず、次のような、ちょっとした *ビュー* を作ってみましょう。 18 | 19 | def post_list(request): 20 | return render(request, 'blog/post_list.html', {}) 21 | 22 | よく見てみましょうか。まず `post_list` というメソッド( `def` から始まる部分のことです)を、記述しています。この `post_list` は `request` を引数に取り、`render` メソッドを `return` しています。`render` メソッドは `blog/post_list.html` というテンプレートファイルを使って、引数で受け取った `request` の内容を出力しています。 23 | 24 | ファイルを保存したら、どんな風に表示されるか、ブラウザで http://127.0.0.1:8000/ を確認してみましょう。 25 | 26 | 今度は別のエラーになりましたね。なんと書いてあるでしょうか。 27 | 28 | ![Error](images/error.png) 29 | 30 | この *TemplatedoesNoteExist* エラーの解決は、簡単です。テンプレートファイルがないだけなので、それでは次の章でテンプレートを作ってみましょう！ 31 | 32 | > Djangoのビューについてもっと知りたいのなら、英語で書かれていますが、オフィシャルドキュメントを是非読んでみてください：https://docs.djangoproject.com/ja/1.11/topics/http/views/ 33 | -------------------------------------------------------------------------------- /django_views/images/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/django_views/images/error.png -------------------------------------------------------------------------------- /domain/README.md: -------------------------------------------------------------------------------- 1 | # Domain 2 | 3 | Heroku gave you a domain, but it's long, hard to remember, and ugly. It'd be awesome to have a domain name that is short and easy to remember, right? 4 | 5 | In this chapter we will teach you how to buy a domain and direct it to Heroku! 6 | 7 | ## Where to register a domain? 8 | 9 | A typical domain costs around $15 a year. There are cheaper and more expensive options, depending on the provider. There are a lot of companies that you can buy a domain from: a simple [google search](https://www.google.com/search?q=register%20domain) will give hundreds of options. 10 | 11 | Our favourite one is [I want my name](https://iwantmyname.com/). They advertise as "painless domain management" and it really is painless. 12 | 13 | ## How to register domain in IWantMyName? 14 | 15 | Go to [iwantmyname](http://iwantmyname.com) and type a domain you want to have in the search box. 16 | 17 | ![](images/1.png) 18 | 19 | You should now see a list of all available domains with the term you put in the search box. As you can see, a smiley face indicates that the domain is available for you to buy, and a sad face that it is already taken. 20 | 21 | ![](images/2.png) 22 | 23 | We've decided to buy `djangogirls.in`: 24 | 25 | ![](images/3.png) 26 | 27 | Go to checkout. You should now sign up for iwantmyname if you don't have an account yet. After that, provide your credit card info and buy a domain! 28 | 29 | After that, click `Domains` in the menu and choose your newly purchased domain. Then locate and click on the `manage DNS records` link: 30 | 31 | ![](images/4.png) 32 | 33 | Now you need to locate this form: 34 | 35 | ![](images/5.png) 36 | 37 | And fill it in with the following details: 38 | - Hostname: www 39 | - Type: CNAME 40 | - Value: your domain from Heroku (for example djangogirls.herokuapp.com) 41 | - TTL: 3600 42 | 43 | ![](images/6.png) 44 | 45 | Click the Add button and Save changes at the bottom. 46 | 47 | It can take up to a couple of hours for your domain to start working, so be patient! 48 | 49 | ## Configure domain in Heroku 50 | 51 | You also need to tell Heroku that you want to use your custom domain. 52 | 53 | Go to the [Heroku Dashboard](https://dashboard.heroku.com/apps), login to your Heroku account and choose your app. Then go into app Settings and add your domain in the `Domains` section and save your changes. 54 | 55 | That's it! 56 | -------------------------------------------------------------------------------- /domain/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/domain/images/1.png -------------------------------------------------------------------------------- /domain/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/domain/images/2.png -------------------------------------------------------------------------------- /domain/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/domain/images/3.png -------------------------------------------------------------------------------- /domain/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/domain/images/4.png -------------------------------------------------------------------------------- /domain/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/domain/images/5.png -------------------------------------------------------------------------------- /domain/images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/domain/images/6.png -------------------------------------------------------------------------------- /dynamic_data_in_templates/README.md: -------------------------------------------------------------------------------- 1 | # Djangoクエリセット 2 | 3 | ポスト内容を保存する為の `Post` モデルは、 `models.py` に定義しました。ポストの一覧を表示する `post_list` は `views.py` にあり、そこにテンプレートも加わりました。これらを準備しましたが、実際のところ、ポストをどうやってHTMLファイルに出力すればいいのでしょうか？大まかなイメージとしては、データベースに保存された記事を取り出して、テンプレートのHTMLファイルの中に行儀よく並べるだけのことですけど。 4 | 5 | 正確には、 *ビュー* が モデルとテンプレートの橋渡しをしてくれます。私達が作業している `post_list` *ビュー* の場合、表示したいデータを取り出して、テンプレートファイルに渡すことになります。基本的に、どのモデルのデータを、どのテンプレートに表示させるかは、 *ビューに* 記述します。 6 | 7 | それでは、実際にやってみましょう。 8 | 9 | まず `blog/views.py` を開きます。今のところ `post_list` *ビュー* は、以下のようになっているでしょう。 10 | 11 | from django.shortcuts import render 12 | 13 | def post_list(request): 14 | return render(request, 'blog/post_list.html', {}) 15 | 16 | 少し前に、別のファイルに用意したコードをどうやってインクルードするか説明したのですけれど、覚えていますか？それでは `models.py` のモデルを、インクルードしてみましょう。 `from .models import Post` という行を追加してみます。 17 | 18 | from django.shortcuts import render 19 | from .models import Post 20 | 21 | `from` の後のドットは `カレントディレクトリ` 、もしくは `カレントアプリケーション` のことです。 `views.py` と `models.py` は、同じディレクトリに置いてありますから、こんな風にドットとファイル名だけを使って、簡単に記述することが出来るのです。ただし、ファイル名に拡張子 `.py` は必要ないですけど。そして、モデルの名前を指定してインポートします(この場合のモデルは `Post` ですね) 22 | 23 | さて、次にすべきことは、実際に `Post` モデルからブログの記事を取り出すことですが、それには `クエリセット` が必要です。 24 | 25 | ## クエリセット 26 | 27 | もう、クエリセットの働きについては、知っていますよね。[Django ORM (QuerySets) chapter](../django_orm/README.md) で勉強しましたから。 28 | 29 | ブログのポストをリストで取得するやり方については、どうでしょう？既に公開済みのもので、 `published_date` で並べ替えをしたリストですよ。これも、QuerySetsの章でやりましたから、大丈夫でしょう？ 30 | 31 | Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') 32 | 33 | そう、このコードですよね。これを `blog/views.py` の `post_list(request)関数` の中に加えてみましょう。 34 | 35 | from django.shortcuts import render 36 | from django.utils import timezone 37 | from .models import Post 38 | 39 | def post_list(request): 40 | posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') 41 | return render(request, 'blog/post_list.html', {}) 42 | 43 | 作成したクエリセットは、 *変数* `posts` で参照できることに、注意しましょう。この *変数* `posts` を使って、クエリセットのデータにアクセスします。これから先 `posts` というと、このクエリセットのことです。 44 | 45 | 最後に一点、クエリセットを参照している変数 `posts` をテンプレートに渡すという作業が、出来ていませんが、これは次の章でやりましょう。 46 | 47 | `render` 関数では、既にパラメータとして `request` とテンプレートファイル `blog/post_list.html` が渡されています。リクエストというのは、インターネットを介してユーザから受け取った全ての情報が詰まったものです。最後のパラメータに注目してください。 `{}` こんな風に書かれていますね。この中に指定した情報を、テンプレートが表示してくれます。 `{}` の中に引数を記述する時は、名前と値をセットにしなくてはなりません。表示させたいのはクエリセットのデータなので、 `posts` を指定しましょう。こんな風に、記述することになります。 `{'posts': posts}` 注意して欲しいのは、シングルクォートです。 `コロン` で区切られた、前の方の `posts` は、 `シングルクォート` で囲まれて、 `'posts'` になっていますよね。こちらが名前で、後ろの方の posts は値、クエリセットのことです。 48 | 49 | 最終的に `blog/views.py` は、以下の様になるはずです。 50 | 51 | from django.shortcuts import render 52 | from django.utils import timezone 53 | from .models import Post 54 | 55 | def post_list(request): 56 | posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') 57 | return render(request, 'blog/post_list.html', {'posts': posts}) 58 | 59 | どうでしたか？次は、このクエリセットをテンプレートで表示させるところを、やってみましょう。 60 | 61 | Djangoのクエリセットについて、もっと知りたければ、英語のドキュメントですが、こちらも読んでみてくださいね。 https://docs.djangoproject.com/ja/1.11/ref/models/querysets/ 62 | -------------------------------------------------------------------------------- /extend_your_application/README.md: -------------------------------------------------------------------------------- 1 | # Extend your application 2 | 3 | もう、ウェブサイトを作るのに必要な全ての章は終わりました。どのようにモデル、URL、ビュー、テンプレートを書いたら良いかわかっていますし、またウェブサイトの作り方もわかります。 4 | 5 | さあ練習しましょう！ 6 | 7 | ブログに最初に必要なものはおそらく、記事を表示するページですよね。 8 | 9 | もう`Post`モデルが入っていますから、`models.py`は追加する必要はありません。 10 | 11 | ## Create a link in the template 12 | 13 | `blog/templates/blog/post_list.html`ファイルに次のようにリンクを追加しましょう： 14 | 15 | {% extends 'blog/base.html' %} 16 | 17 | {% block content %} 18 | {% for post in posts %} 19 |
20 |
21 | {{ post.published_date }} 22 |
23 |

{{ post.title }}

24 |

{{ post.text|linebreaks }}

25 |
26 | {% endfor %} 27 | {% endblock content %} 28 | 29 | 投稿のタイトルから詳細記事へリンクさせたい時は、`

{{ post.title }}

`の箇所をリンク先に変えてみましょう。 30 | 31 |

{{ post.title }}

32 | 33 | `{% url 'post_detail' pk=post.pk %}`という不思議なものについて説明しましょう。うすうすわかっているかもしれませんが、`{% %}`という表記はDjangoのテンプレートタグを使っているということを意味します。今回書いたこれは、URLに変換されます。 34 | 35 | `post_detail`は`post_detail`ビューへのパスです。注：blogはアプリケーションの名前です。ビューは`views.py`ファイルの名前で`post_detail`はビューの名前です。 36 | 37 | http://127.0.0.1:8000/ にアクセスすると、エラーとなりますが、これは想定通り。URLや`post_detail`のビューをまだ作ってないからです。このようになります： 38 | 39 | ![NoReverseMatch error](images/no_reverse_match2.png) 40 | 41 | なので、`urls.py`に`post_detail`ビューを作りましょう。 42 | 43 | ### URL: http://127.0.0.1:8000/post/1/ 44 | 45 | Djangoに`post_detail`が呼び出すビューを作りましょう。このビューでブログの投稿を表示します。 `blog/urls.py` ファイルに`url(r'^post/(?P[0-9]+)/$', views.post_detail),`を追加して下さい: 46 | 47 | from django.conf.urls import include, url 48 | from . import views 49 | 50 | urlpatterns = [ 51 | url(r'^$', views.post_list), 52 | url(r'^post/(?P[0-9]+)/$', views.post_detail, name='post_detail'), 53 | ] 54 | 55 | 何だか変に見えますが、心配しないで下さい、説明しますと、 56 | 57 | - `^`で始まるのは「文字列の開始」です。 58 | 59 | - `post/` はURLに__post__と__/__を含む 60 | 61 | - `(?P[0-9]+)` これはトリッキーな部分です。Djangoはここに書いた全てを受けてそれを`pk`という変数としてビューへ渡します。`[0-9]`は（0から9の間の)数字のみを意味し、`+`はそれが一桁以上続くことを意味しています。`http://127.0.0.1:8000/post//` はダメで`http://127.0.0.1:8000/post/1234567890/` はOKです。 62 | 63 | - `/` - もう一度__/__が必要です。 64 | 65 | - `$`は「文字列の終了」を意味します。 66 | 67 | ブラウザで`http://127.0.0.1:8000/post/5/`を表示した時、Djangoはビューが`post_detail`を呼び出すということを理解します。そして、`pk`の部分は5とビューへ渡します。 68 | 69 | `pk`とはprimary keyの省略です。 70 | この名前はDjangoプロジェクトでよく使われますが、好きに名前を付けることもできます（でも、英小文字と`_`だけで、空白などは入れないように！）。`(?P[0-9]+)` の代わりに、`post_id`と名付けるとすれば`(?P[0-9]+)` となります。 71 | 72 | OK,ページ http://127.0.0.1:8000 をリロードしてみましょう。けどまた違うエラーが出てきました！ 73 | 74 | ![AttributeError](images/attribute_error2.png) 75 | 76 | 次のステップを思い出しました？そうです、ビューの追加です。 77 | 78 | ## post_detail view 79 | 80 | ここでは、ビューが特別なパラメータ`pk`に渡され、ビューはそれを受け取る必要があります。URLで決めた名前 (`pk`) を正確に使う必要があります。`def post_detail(request, pk):`と関数を定義しましょう。この変数を省いてしまうとエラーになります。 81 | 82 | `pk`で指定されたブログの記事を取得するにはクエリセットを使います: 83 | 84 | Post.objects.get(pk=pk) 85 | 86 | しかしこのコードには問題があります。指定された`pk`を持つブログ記事がないと、なんだかとてもダサいエラーが出てきます。 87 | 88 | ![DoesNotExist error](images/does_not_exist2.png) 89 | 90 | 表示してほしいのはこれじゃないです。でももちろん、Django にはこれをうまく処理してくれるものがあります。それが `get_object_or_404` です。`pk`のブログ記事がないときは「404、ページがありません」とさっきよりずいぶんマシな表示をしてくれるのです。 91 | 92 | ![Page not found](images/404_2.png) 93 | 94 | 実際に「ページがありません」というページを作れますし、したいようにできますが、重要でないので、飛ばしましょう。 95 | 96 | OK,ビューを`views.py`ファイルに追加しましょう。 97 | 98 | `blog/views.py`ファイルを開いて、今ある`from`で始まる行の次の行に、このコードを追加しましょう: 99 | 100 | from django.shortcuts import render, get_object_or_404 101 | 102 | そして、ファイルの最後にビューを追加します。 103 | 104 | def post_detail(request, pk): 105 | post = get_object_or_404(Post, pk=pk) 106 | return render(request, 'blog/post_detail.html', {'post': post}) 107 | 108 | それでは、もう一度 http://127.0.0.1:8000/ をリロードしてみましょう。 109 | 110 | ![Post list view](images/post_list2.png) 111 | 112 | 動きました！しかしブログ記事のタイトルのリンクをクリックしたらどうなりますか？ 113 | 114 | ![TemplateDoesNotExist error](images/template_does_not_exist2.png) 115 | 116 | そんな！別のエラーです。しかしこの対処方法を知っていますよね。テンプレートを追加しましょう。 117 | 118 | `blog/templates/blog`に`post_detail.html`を作りましょう。 119 | 120 | このように書きましょう: 121 | 122 | {% extends 'blog/base.html' %} 123 | 124 | {% block content %} 125 |
126 | {% if post.published_date %} 127 |
128 | {{ post.published_date }} 129 |
130 | {% endif %} 131 |

{{ post.title }}

132 |

{{ post.text|linebreaks }}

133 |
134 | {% endblock %} 135 | 136 | 前と同じで`base.html`を拡張します。`content`のブロックで、もしあれば記事の投稿日(`publish_date`)、タイトル(`title`)と本文(`text`)を表示します。ここで重要なポイントについて見てみます。 137 | 138 | `{% if ... %} ... {% endif %}`は何かをチェックするときに使うテンプレートタグです。（__Introduction to Python__ の章にあるif~else文を思い出して下さい）この場合は`published_date`が空欄かどうかを確認しています。 139 | 140 | OK,ページをリロードして、もう「ページがありません」とは言われなくなっているか見てみましょう。 141 | 142 | ![Post detail page](images/post_detail2.png) 143 | 144 | やった！動きました！ 145 | 146 | ## One more thing: deploy time! 147 | 148 | もしウェブサイトがHerokuで動いているなら、確認するのは良いことです。もう一度deployしてみましょう。どのようにやるか忘れていたら、[Deploy](../deploy/README.md) の章を確認しましょう。 149 | 150 | $ git status 151 | ... 152 | $ git add -A . 153 | $ git status 154 | ... 155 | $ git commit -m "Added more views to the website." 156 | ... 157 | $ git push heroku master 158 | 159 | できました！おめでとう:) 160 | -------------------------------------------------------------------------------- /extend_your_application/images/404_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/extend_your_application/images/404_2.png -------------------------------------------------------------------------------- /extend_your_application/images/attribute_error2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/extend_your_application/images/attribute_error2.png -------------------------------------------------------------------------------- /extend_your_application/images/does_not_exist2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/extend_your_application/images/does_not_exist2.png -------------------------------------------------------------------------------- /extend_your_application/images/no_reverse_match2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/extend_your_application/images/no_reverse_match2.png -------------------------------------------------------------------------------- /extend_your_application/images/post_detail2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/extend_your_application/images/post_detail2.png -------------------------------------------------------------------------------- /extend_your_application/images/post_list2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/extend_your_application/images/post_list2.png -------------------------------------------------------------------------------- /extend_your_application/images/template_does_not_exist2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/extend_your_application/images/template_does_not_exist2.png -------------------------------------------------------------------------------- /how_the_internet_works/README.md: -------------------------------------------------------------------------------- 1 | # インターネットはどうやって動いているの？ 2 | 3 | > This chapter is inspired by a talk "How the Internet works" by Jessica McKellar \([http://web.mit.edu/jesstess/www/](http://web.mit.edu/jesstess/www/)\). 4 | 5 | 私達は毎日インターネットにつながっていますよね。でも、あなたがブラウザのアドレス欄に　[http://djangogirls.org](http://djangogirls.org)　のように入力をしてEnterキーを押している事がどういう意味がるのかわかりますか？ 6 | 7 | 8 | 9 | 最初に理解してほしいのは、あなたが自分のパソコンのハードディスクに映画や音楽や写真を沢山保存しているように、Webサイトもハードディスクに保存される沢山のファイルの集合であるという事です。 10 | 11 | 12 | 13 | しかし、Webサイトは映画や音楽、写真のようなデータとは違ってHTMLというコンピュータのコードを持っているのです。もし、あなたがプログラミングに精通していなかったら、最初はHTMLも難しく感じるでしょう。でも、あなたがよく使うWebブラウザ（ChromeやSafariやFirefox等々）はHTMLのコードを理解しているのです。Webブラウザが正しく理解できるように、ファイルを作成する必要があります。 14 | 15 | 16 | 17 | あなたのパソコンへファイルを保存するのと同じで私達はHTMLをハードディスクに格納する必要があります。インターネットの場合、そのハードディスクはサーバーと呼ばれている、パワフルなコンピュータを使います。サーバーの主な目的はデータを格納して、それに供給することであるので、マウスまたはキーボードを持っていません。また、データを供給する役割を持っているので、サーバーと呼ばれるのです。 18 | 19 | 20 | 21 | インターネットはどのように見えますか？ 22 | 23 | 私達は絵をかいてみました。 24 | 25 | ![Figure 1.1](images/internet_1.png) 26 | 27 | 上記の絵は混乱しているように見えますよね？接続されたマシンのネットワークは実際こんな感じです。数十万台のマシン！ 世界中はりめぐらされたケーブル！ Submarine Cable Mapのウェブサイト（[http://submarinecablemap.com/](http://submarinecablemap.com/)）にアクセスすれば、ネットの複雑さを知ることができます。 ここにウェブサイトからのスクリーンショットがあります： 28 | 29 | インターネットに接続されているすべてのマシンとマシンの間にワイヤを置くことは不可能です。 したがって、マシン（例えば　[http://djangogirls.org](http://djangogirls.org)　が保存されているマシン）に到達するためには、多くの異なるマシンを介してリクエストを渡す必要があります。 30 | 31 | それは次のようになります。 32 | 33 | ![Figure 1.3](images/internet_2.png) 34 | 35 | あなたが [http://djangogirls.org ](http://djangogirls.org)と入力すると、「親愛ならDjango Girlsへ。私はdjangogirls.orgのWebサイトが見たいです」とリクエスト（手紙）を送る事になります。 36 | 37 | あなたの手紙（リクエスト）は、まずあなたの一番近くの郵便局にいきますよね。そしてそこから、もう少し宛先に少し近い別の郵便局に行き、またそこからもう少し近い郵便局に行って・・そしてあなたの目的地まで行きます。 38 | 39 | ![Figure 1.4](images/internet_4.png) 40 | 41 | 簡単ですよね。あなたはメッセージを送信し、何らかの応答を期待します。 もちろん、紙とペンではなく、データのバイトを使用しますが、アイデアは同じです！ 42 | 43 | 市町村名、郵便番号、国名の住所の代わりに、IPアドレスを使用します。 お使いのコンピュータは、まずdjangogirls.orgをIPアドレスに変換するようにDNS（Domain Name System）に依頼します。 あなたが連絡したい人の名前を探し、電話番号と住所を見つけることができる昔ながらの電話帳のようなものです。 44 | 45 | 手紙を送るときには、住所、切手など、正しく配送される特定の機能が必要ですよね。また、受信者が理解できる言語も使用している必要がありますよね？ Webサイトを表示するために送信するデータパケットにも同じように特定の機能があります。それはHTTP（Hypertext Transfer Protocol）というプロトコルを使用します。 46 | 47 | だから、基本的に、あなたがウェブサイトを持っているときには、サーバー（マシン）が必要です。 サーバーは着信要求（サーバーにWebサイトの送信を要求する文字）を待機し、返事を返します。 48 | 49 | これはDjangoチュートリアルなので、あなたはDjangoが何をしているのかを知りたでしょう？ あなたが返事を返す時、 みんなに同じ返事を返すより、個々にパーソナライズされた返事を返せた方が良いでしょう？（Djangoはこれらのパーソナライズされた興味深い文字を作成するのに役立ちます:\)。 50 | 51 | インターネットの話は以上です！さあ、いよいよあなたのブログサイトを作成する時間です！ 52 | 53 | -------------------------------------------------------------------------------- /how_the_internet_works/images/internet_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/how_the_internet_works/images/internet_1.png -------------------------------------------------------------------------------- /how_the_internet_works/images/internet_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/how_the_internet_works/images/internet_2.png -------------------------------------------------------------------------------- /how_the_internet_works/images/internet_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/how_the_internet_works/images/internet_3.png -------------------------------------------------------------------------------- /how_the_internet_works/images/internet_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/how_the_internet_works/images/internet_4.png -------------------------------------------------------------------------------- /html/README.md: -------------------------------------------------------------------------------- 1 | # Introduction to HTML 2 | 3 | テンプレートって何？とあなたは思っているかもしれませんね。 4 | 5 | テンプレートは、あらかじめ用意された共通したフォーマットのなかで異なる情報をみせるためのファイルです。 - 例えば、手紙を書く時に、中身は異なるメッセージや宛名や住所を書きますが、共通のフォーマットを使いますよね。それがテンプレートです。 6 | 7 | Djangoのテンプレートは、HTMLという言語でできています。 (はじめのチャプター__How the Internet works__で、HTMLについては少しお話しましたね。） 8 | 9 | ## What is HTML? 10 | 11 | HTMLはシンプルなプログラムで、ChromeやFireFox、SafariといったWebブラウザが解釈して、ユーザーが読めるようにしてディスプレイに表示します。 12 | 13 | HTML は "HyperText Markup Language"の略です。 __HyperText__とは、テキストなどをクリックすると別のページに繋がるハイパーリンクが使えるということです。__Markup__は、目印をつけるという意味です。文章の各部分がどのような役割を果たしているかブラウザに伝えます。`<`と `>`に囲まれた__タグ__によってマークアップされたものは、要素と呼ばれます。 14 | 15 | ## Your first template! 16 | 17 | テンプレートを作成するということは、テンプレートファイルを作成するという意味です。すべてはファイルですよね？あなたは、このことにすでに気がついていることと思います。 18 | 19 | テンプレートは `blog/templates/blog` ディレクトリに保存します。では、まず`blog`ディレクトリに `templates` という新しいディレクトリを作成しましょう。次に、`templates`ディレクトリの中に、`blog`というディレクトリを作成します。: 20 | 21 | blog 22 | └───templates 23 | └───blog 24 | 25 | (なぜ`blog`という名前のディレクトリが２つもあるのだろうと、疑問に思ったかもしれませんね。 - 後にわかってくると思いますが、これは複雑になりやすい物事を楽にするための、わかりやすい命名規則なのです。) 26 | 27 | さて、`blog/templates/blog`ディレクトリの中に、 `post_list.html` というファイルを作成しましょう。 (今のところは、空っぽのファイルにしておいてください。) 28 | 29 | ここで、あなたのWebサイトがどのように見えるか確認してみましょう。: http://127.0.0.1:8000/ 30 | 31 | > もし、まだ`TemplateDoesNotExists`というエラーが出るようでしたら、サーバーをリスタートしてみてください。コマンドラインで、Ctrl+C (Control と C ボタンを同時に押す)を押すと、サーバーが止まります。`python manage.py runserver` とコマンドを打って、再度スタートしてください。 32 | 33 | ![Figure 11.1](images/step1.png) 34 | 35 | エラーが出なくなりました！おめでとう！！:) しかし、あなたのWebサイトはまだ何も表示されていませんね。あなたのテンプレートにまだ何もないからです。これを修正していきましょう。 36 | 37 | テンプレートファイルに、次のとおりにコードを追加して下さい。: 38 | 39 | 40 |

Hi there!

41 |

It works!

42 | 43 | 44 | さて、あなたのWebサイトは今度はどのように見えるでしょうか？確認してみましょう。: http://127.0.0.1:8000/ 45 | 46 | ![Figure 11.2](images/step3.png) 47 | 48 | 表示されましたね！よくできました！ :) 49 | 50 | - ``、Webページのはじまりにつけるタグです。そして`` はページの最後につきます。先ほどの例でお分かりのように、最初の行の``と、 最終行の `` の間に、Webサイトの全てのコンテンツが書かれています。 51 | - `

` はパラグラフのタグです。 `

` を各パラグラフの終わりにつけます。 52 | 53 | ## Head & body 54 | 55 | すべてのHTMLページは、２つの要素が必要です。: __head__ と __body__ です。 56 | 57 | - __head要素__ これには、ドキュメントに必要な情報を含んでいます。ディスプレイには表示されません。 58 | 59 | - __body要素__ これには、そのほかのWebページに表示される内容が含まれます。 60 | 61 | `` は、ページの構成などをブラウザに伝えます。そして、`` のタグ内の内容が、実際にページに表示されます。 62 | 63 | 例えば、次の例のように、Webページのタイトルを `` タグの中に含めることができます。: 64 | 65 | 66 | 67 | Ola's blog 68 | 69 | 70 |

Hi there!

71 |

It works!

72 | 73 | 74 | 75 | ファイルを保存して、再読み込みしてみましょう。 76 | 77 | ![Figure 11.3](images/step4.png) 78 | 79 | あなたのページのタイトルが"Ola's blog"だと、ブラウザが認識してくれましたね？ タグ内に書かれた `Ola's blog` をブラウザは解釈して、ブラウザのタイトルバーの文字が反映されました。(ブックマークのタイトルなどにも使われます). 80 | 81 | おそらく既にお気づきでしょう。タグは開始タグと終了タグのペアになっていて、終了タグには`/`がつきます。そして要素の中にほかの要素が次々と入れ子になっています (入れ子なので、あるタグを閉じるときには、その中のタグもすべて閉じていなくてはなりません)。 82 | 83 | これは箱にものを入れるようなイメージです。まず最初に、``という大きな箱を１つもっています。その中に、``という箱があり、また更にその中に`

`という小さい箱が入っています。 84 | 85 | タグを閉じることと、入れ子にすることは、守らなければいけないルールです。タグを閉じていなかったり、入れ子になっていないと、ブラウザは正しく解釈ができないため、あなたのページは正しく表示されません。 86 | 87 | ## Customize your template 88 | 89 | テンプレートをつかって、カスタマイズしてちょっと遊んでみてください。よく使われるタグをいくつかご紹介しておきますね。: 90 | 91 | - `

見出し１

` - 一番大きな見出し 92 | - `

見出し２

` 次に大きな見出し 93 | - `

見出し３

` ... 見出しのレベルは１〜６まであり、`
`が一番小さい見出しとなります。 94 | - `text` 要素に囲まれたテキストを強調します。文章の意味合いとして強調すべき語句やフレーズを示します。 95 | - `text` 囲まれたテキストを強く強調します。文中の特定の語句が重要であることを示します。 96 | - `
` br は BReak(改行)の略です。テキストをこの位置で改行します。(brの中には、何も書いてはいけません) 97 | - `link` リンクをつくります。 98 | - `
  • first item
  • second item
` リストをつくります。 99 | - `
` ブロック要素として囲みます。 100 | 101 | 以下をテンプレートとして使って下さい。: 102 | 103 | 104 | 105 | Django Girls blog 106 | 107 | 108 |
109 |

Django Girls Blog

110 |
111 | 112 |
113 |

published: 14.06.2014, 12:14

114 |

My first post

115 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

116 |
117 | 118 |
119 |

published: 14.06.2014, 12:14

120 |

My second post

121 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.

122 |
123 | 124 | 125 | 126 | ここで、３つの `div` ブロックを作りました。 127 | 128 | - 最初の `div` 要素は、ブログのタイトルです。見出しとリンクが含まれていますね。 129 | - その他の２つの `div` 要素は、ブログ記事を投稿日時とを囲んでいます。 `h2` の見出しは、リンクタグがついた記事のタイトルです。そして、２つの`p`パラグラフがありますね。投稿日時とブログ記事の内容です。 130 | 131 | ブラウザで見るとこのようになります。: 132 | 133 | ![Figure 11.4](images/step6.png) 134 | 135 | わーい！うまく表示されましたね！でも、まだこのテンプレートは__同じ情報__を表示するだけですね。 - 先ほどお話したようにテンプレートとは、__同じフォーマット__で、__異なる__情報を表示するものです。 136 | 137 | 私たちが本来やりたいことというのは、Djangoの管理画面に追加された記事の情報を、同じフォーマットで表示することです。では、次のレベルにいってみましょう。 138 | 139 | ## One more thing 140 | 141 | このWebサイトがローカルだけでなく、同じようにHerokuでも動いているのを見たいですね。再度デプロイしてみましょう。 142 | 143 | まずは、先ほどのデプロイから、どのファイルが更新されたか状態を確認しましょう。: 144 | 145 | $ git status 146 | 147 | 次に、作業ディレクトリ内のすべての変更を`git` に追加します。: 148 | 149 | $ git add -A . 150 | 151 | > __補足__ `-A` ("all"の意味) とすると、削除されたファイルも`git`は認識します。（デフォルトでは、新規ファイルと変更のあったファイルだけを認識します）そして、チャプター3で説明があったように、 `.` は、カレントディレクトリを示していますので、忘れないようにしましょう。 152 | 153 | すべてのファイルをアップロードする前に、 `git` が何をアップロードしようとしているのか、確認しておきましょう。（ `git`がアップロードしようとしている全てのファイルが緑色で表示されます）: 154 | 155 | $ git status 156 | 157 | あとちょっとです！がんばりましょう。gitに変更を保存しておきましょう。どのような変更を加えたかわかるように、"コミットメッセージ"をつけておきます。メッセージはなんでも構いませんが、後でなにをしたかわかるような説明をしておくとよいでしょう。 158 | 159 | $ git commit -m "Changed the HTML for the site." 160 | 161 | > __補足__ コミットメッセージは、ダブルクォーテーションで囲みましょう。 162 | 163 | この次に、やっと変更をHerokuのWebサイトにアップロード（プッシュ）することができます。: 164 | 165 | git push heroku master 166 | 167 | アップロードの作業は以上です。Herokuでの処理がおわれば、ブラウザ上で変更を加えられたサイトが見れるでしょう。ブラウザを再読み込みして確認してください。変更されていますね！ 168 | -------------------------------------------------------------------------------- /html/images/step1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/html/images/step1.png -------------------------------------------------------------------------------- /html/images/step3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/html/images/step3.png -------------------------------------------------------------------------------- /html/images/step4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/html/images/step4.png -------------------------------------------------------------------------------- /html/images/step6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/html/images/step6.png -------------------------------------------------------------------------------- /images/application.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/images/application.png -------------------------------------------------------------------------------- /intro_to_command_line/README.md: -------------------------------------------------------------------------------- 1 | # Introduction to the command-line interface 2 | 3 | さぁ、これから最初のコードを書いていきますよ。楽しんでいきましょう！:) 4 | 5 | __最初にお友達になるのはコレです。: コマンドライン!__ 6 | 7 | プログラマーが黒い画面に向かっている光景を見たことがありますか？ここからは、その黒い画面を触ってみます。最初はちょっとコワイと思うかもしれませんが、そんなことはありません。プロンプトと呼ばれるものがあなたの命令（コマンド）を待っています。 8 | 9 | ## What is the command line? 10 | 11 | さて、__コマンドライン__ あるいは __コマンドライン インターフェイス__と呼ばれるこの画面は、キーボードで入力したテキストで命令を出してコンピューターと直接対話するように、ファイルを見たり、変更したり (グラフィカル・インターフェースじゃないだけで、WindowsのエクスプローラやMacのファインダーと同じ役割です) するものです。このコマンドラインは、 *cmd*, *CLI*, *プロンプト*, *コンソール* or *ターミナル* と呼ばれることもあります。 12 | 13 | ## Open the command-line interface 14 | 15 | では、実際にコマンドラインを開いて、触ってみることとしましょう。 16 | 17 | ### Windows 18 | 19 | ［スタート］メニューから［すべてのプログラム］－［アクセサリ］－［コマンドプロンプト］を選択してください。 20 | （Windows10の場合は、デスクトップの左下にあるWindowsロゴを右クリック－[コマンドプロンプト]を選択してください。) 21 | 22 | ### Mac OS X 23 | 24 | ［アプリケーション］ー［ユーティリティ］ー［ターミナル］を選択して下さい。 25 | 26 | ### Linux 27 | 28 | おそらく ［アプリケーション］ー［アクセサリ］ー［ターミナル］と選択し起動できるでしょう。あなたのシステムによってはこの通りではないことがあります。見つからないときは、Google先生にきいてみましょう。 :) 29 | 30 | ## Prompt 31 | 32 | おそらく今、真っ白または真っ黒な画面が開かれていることでしょう。この画面はあなたの命令を待っています。 33 | 34 | MacあるいはLinuxの方は、次のように `$` と表示されているのがわかりますか？: 35 | 36 | $ 37 | 38 | Windowsの方は、 `>` という記号が表示されていることでしょう。: 39 | 40 | > 41 | 42 | 各コマンドの先頭には、この記号とスペースがつきます。あなたのコンピューターが表示してくれるので、自分で入力する必要はありません。 :) 43 | 44 | > ちょっと補足です。プロンプト記号の前に`C:\Users\ola>` or `Olas-MacBook-Air:~ ola$` のような表示がありますね。これは間違いではありません。100%正解です。このチュートリアルでは、シンプルにわかりやすくするために、その部分を省略して記述します。 45 | 46 | ## Your first command (YAY!) 47 | 48 | では最初は簡単なコマンドを実行してみましょう。次のように入力してみてください。: 49 | 50 | $ whoami 51 | 52 | または 53 | 54 | > whoami 55 | 56 | そして最後にEnterキーを押して下さい。このような結果が返ってきます: 57 | 58 | $ whoami 59 | olasitarska 60 | 61 | ご覧のとおり、コンピューターがあなたのユーザーネームを表示してくれましたね。面白いでしょ?:) 62 | 63 | > コピー＆ペーストではなく、コマンドを入力して試してみてください。そのうち自然と覚えられるようになりますからね！ 64 | 65 | ## Basics 66 | 67 | OSによってコマンドが若干違います。あなたのコンピューターのOSの方法に従って、以下は進めていってくださいね。次にいってみましょう。 68 | 69 | ### Current directory 70 | 71 | 今どこのディレクトリにいるか（どのフォルダで作業をしているか）、知りたいですよね？では、このようにキーボードで入力して、Enterキーをおしてください。: 72 | 73 | $ pwd 74 | /Users/olasitarska 75 | 76 | Windowsの方は次のように: 77 | 78 | > cd 79 | C:\Users\olasitarska 80 | 81 | おそらく、似たようなものがあなたの画面に表示されたのではないでしょうか。コマンドラインを起動した最初は、通常ユーザーのホームディレクトリが表示されます。 82 | 83 | > 補足: 'pwd' は'print working directory'を意味しており、現在いる作業ディレクトリを取得することです。 84 | 85 | --- 86 | 87 | ### List files and directories 88 | 89 | では、その中には何があるのでしょうか？表示させてみましょう。: 90 | 91 | $ ls 92 | Applications 93 | Desktop 94 | Downloads 95 | Music 96 | ... 97 | 98 | Windows: 99 | 100 | > dir 101 | Directory of C:\Users\olasitarska 102 | 05/08/2014 07:28 PM Applications 103 | 05/08/2014 07:28 PM Desktop 104 | 05/08/2014 07:28 PM Downloads 105 | 05/08/2014 07:28 PM Music 106 | ... 107 | 108 | --- 109 | 110 | ### Change current directory 111 | 112 | 次に、デスクトップのディレクトリに移動してみましょう。 113 | 114 | $ cd Desktop 115 | 116 | Windows: 117 | 118 | > cd Desktop 119 | 120 | 本当にディレクトリを移動できたか、確認してみましょう。: 121 | 122 | $ pwd 123 | /Users/olasitarska/Desktop 124 | 125 | Windows: 126 | 127 | > cd 128 | C:\Users\olasitarska\Desktop 129 | 130 | できていますね！ 131 | 132 | > PRO tip: `cd D`と入力して、キーボードの`tab`ボタンを押してください。すると、Dに続く残りの部分が自動的に補完されて入力されます。もし、Dから始まるディレクトリ名が他にもあれば、`tab`ボタンを繰り返し押すと候補が次々と表示されます。入力が楽になりますね。 133 | 134 | --- 135 | 136 | ### Create directory 137 | 138 | それでは、Django Girlsのディレクトリをデスクトップに新規作成してみましょう。: 139 | 140 | $ mkdir djangogirls 141 | 142 | Windows: 143 | 144 | > mkdir djangogirls 145 | 146 | この短いコマンドで、デスクトップに`djangogirls`という名前の新しいフォルダが作成されました。あなたのデスクトップを見てフォルダが作成されていることを確認してみましょう。あるいは、先ほど学んだコマンド `ls`/`dir` を使って確認しましょう。 やってみてください。 :) 147 | 148 | > PRO tip: 同じコマンドを何度もなんども入力したくない時は、上下矢印キー↑，↓を押せば、先ほどキーボードから入力したものが現れます。内容を修正したい場合には，左右矢印キー←，→を利用して修正したい位置にカーソルを移動させて，修正することができますよ。 149 | 150 | --- 151 | 152 | ### Exercise! 153 | 154 | 練習をしてみましょう。先ほど作成した`djangogirls` ディレクトリの中に、新たに`test`という名前のディレクトリを作成してください。使うコマンドは、 `cd` と `mkdir` ですよ。 155 | 156 | #### Solution: 157 | 158 | $ cd djangogirls 159 | $ mkdir test 160 | $ ls 161 | test 162 | 163 | Windows: 164 | 165 | > cd djangogirls 166 | > mkdir test 167 | > dir 168 | 05/08/2014 07:28 PM test 169 | 170 | おめでとうございます！よくできました！ :) 171 | 172 | --- 173 | 174 | ### Clean up 175 | 176 | 練習がおわったら、それをそのままに置いておくと邪魔になりますね。削除しておきましょう。 177 | 178 | はじめに、作業するディレクトリをデスクトップに戻しましょう。: 179 | 180 | $ cd .. 181 | 182 | Windows: 183 | 184 | > cd .. 185 | 186 | `cd`の後にある`..`で、現在の親ディレクトリに移動します。（今作業しているフォルダのひとつ上のフォルダに移動するということですね。） 187 | 188 | 現在の作業ディレクトリを確認しておきましょう。: 189 | 190 | $ pwd 191 | /Users/olasitarska/Desktop 192 | 193 | Windows: 194 | 195 | > cd 196 | C:\Users\olasitarska\Desktop 197 | 198 | では、`djangogirls`ディレクトリを削除しましょう。 199 | 200 | > __注意！__: `del`, `rmdir` や `rm` のコマンドを使って削除したファイルは、復活できません。完全に消えてしまいます。このコマンドを使う時は、よく気をつけてくださいね。 201 | 202 | $ rm -r djangogirls 203 | 204 | Windows: 205 | 206 | > rmdir /S djangogirls 207 | djangogirls, Are you sure ? Y 208 | 209 | できました! 本当に削除されたか、確認してみましょう。: 210 | 211 | $ ls 212 | 213 | Windows: 214 | 215 | > dir 216 | 217 | ### Exit 218 | 219 | ここまでです。それではコマンドラインを終了しましょう。かっこいいやり方で終わりたいですよね？:) 220 | 221 | $ exit 222 | 223 | Windows: 224 | 225 | > exit 226 | 227 | かっこいいですね！:) 228 | 229 | ## Summary 230 | 231 | ここに学んだコマンドをまとめておきます。: 232 | 233 | | コマンド (Windows) | コマンド (Mac OS / Linux) | 説明 | 実行例 | 234 | | ----------------- | ------------------------ | ----------------------- | --------------------------------------------- | 235 | | exit | exit | ウィンドウを閉じる | **exit** | 236 | | cd | cd | ディレクトリを移動する | **cd test** | 237 | | dir | ls | ディレクトリとファイルの一覧を表示 | **dir** | 238 | | copy | cp | ファイルをコピーする | **copy c:\test\test.txt c:\windows\test.txt** | 239 | | move | mv | ファイルを移動させる | **move c:\test\test.txt c:\windows\test.txt** | 240 | | mkdir | mkdir | ディレクトリを新規作成する | **mkdir testdirectory** | 241 | | del | rm | ディレクトリやファイルを削除する | **del c:\test\test.txt** | 242 | 243 | ここで勉強したのはコマンドのほんの一部でしたが、このワークショップで使うコマンドはこれだけです。 244 | 245 | もっと勉強したい方は、 [ss64.com](http://ss64.com) に各OSのコマンド一覧があります。ご参考までに。 246 | 247 | ## Ready? 248 | 249 | よし、次はPythonを勉強していきましょう! 250 | -------------------------------------------------------------------------------- /python_installation/README.md: -------------------------------------------------------------------------------- 1 | # Pythonを始めましょう {#lets-start-with-python} 2 | 3 | ついにここまで来ました！ 4 | 5 | まずは、最初にPythonとは何かお話させて下さいね。Pythonはとても人気のあるプログラミング言語です。Webサイトや、ゲーム、サイエンス、グラッフィックス、などなど、たくさんの場面で使われています。 6 | 7 | Pythonは1980年台の終わりに、人間が読みやすい（機械だけでなく）言語を目的に開発されました。だから、他の言語に比べて、Pythonはとてもシンプルで、勉強しやすいのです。でもご心配なく、Pythonはとってもパワフルな言語でもありますから！ 8 | 9 | # Pythonのインストール {#python-installation} 10 | 11 | > 注意：すでにインストール手順を実行している場合は、これをもう一度行う必要はありません。次の章に進むことができます。 12 | > 13 | > このセクションはGeek Girls Carrots（[https://github.com/ggcarrots/django-carrots](https://github.com/ggcarrots/django-carrots)）のチュートリアルに基づいています。 14 | 15 | Django は、Pythonで開発されています。なにをするにせよ、まずはPythonが必要です。インストールしましょう！ Python 3.6 をインストールします。3.5以前のバージョンをインストール済みの場合は、アップグレードしてください。 16 | 17 | ## Windows {#windows} 18 | 19 | Windowsをお使いのかたは、まずシステム情報を開き、システムの種類が32-bitバージョンか64-bitバージョンかを確認します。 20 | 21 | （システム情報の開き方：Windowsキー + Pause/Break キー　もしくは　コントロールパネル>システムとセキュリティ>システムを開く\) 22 | 23 | Python for Windowsは　[https://www.python.org/downloads/windows/](https://www.python.org/downloads/windows/)　からダウンロードできます。 「最新のPython 3 Release - Python x.x.x」リンクをクリックしてください。 お使いのコンピュータが64ビット版のWindowsを実行している場合は、Windows x86-64実行可能インストーラをダウンロードしてください。 32ビット版の場合は、Windows x86実行可能インストーラーをダウンロードします。 インストーラをダウンロードしたら、それを実行して（ダブルクリックして）インストーラの指示に従ってください。（画像は3.5.1ですが2017/08/26時点の最新バージョンは3.6.2です。） 24 | 25 | **インストール時に必ずAdd Python 3.x to Path にチェックをいれましょう**: 26 | 27 | ![](/assets/python-installation-options.png) 28 | 29 | 次のステップでは、Windowsコマンドラインを使用します。 今のところ、いくつかのコマンドを入力する必要がある場合は、**スタートメニュー→すべてのプログラム→アクセサリ→コマンドプロンプト\(Windows10 Windowsロゴマーク→Windowsシステムツール→コマンドプロンプト）**を開きます。 または、**Windowsキー + 「R」キー**　「ファイル名を指定して実行」ウィンドウを起動して　"cmd" と入力しenterキーを押します。（新しいバージョンのWindowsでは、コマンドプロンプトが非表示になることがあるため、「コマンドプロンプト」を検索する必要があるかもしれません）。 30 | 31 | ![](/assets/windows-plus-r.png) 32 | 33 | > 注意：古いバージョンのWindows（7、Vista、またはそれ以前のバージョン）を使用していて、Python 3.5.xインストーラがエラーで失敗した場合、次のいずれかを試みることができます： 34 | 35 | 1. すべてのWindowsアップデートをインストールして、Python 3.5を再インストールしてみる。 36 | 2. 古いバージョンのPythonをインストールしてみる。\([https://www.python.org/downloads/windows/](https://www.python.org/downloads/windows/)\) 37 | 38 | 古いバージョンのPythonをインストールした場合、インストール画面は上記のものとは多少異なる場合があります。 下にスクロールして「python.exeをパスに追加」し、左側のボタンをクリックして「ローカルハードドライブにインストールされます」を選択してください。: 39 | 40 | ![](/assets/add_python_to_windows_path.png) 41 | 42 | ### OS X 43 | 44 | Webサイトからダウンロードしてインストールしましょう。 [https://www.python.org/downloads/](https://www.python.org/downloads/) 45 | 46 | * _Mac OS X 64-bit/32-bit installer_ _DMG_ ファイルをダウンロードして下さい。 47 | * ダブルクリックで開いてください。 48 | * _Python.mpkg_ をダブルクリックして、インストーラーを実行してください。 49 | 50 | インストールが正しく行われたか確認するために、 _ターミナル_ を開いて、`python3` コマンド次のようにタイプしてみましょう。 51 | 52 | ``` 53 | $ python3 --version 54 | Python 3.6.2 55 | ``` 56 | 57 | > 注意:OS XにPythonをインストールする前に、Macの設定でApp Store以外のパッケージをインストールできるようにする必要があります。 「システム環境設定」（「アプリケーション」フォルダ内）に移動し、「セキュリティとプライバシー」、「一般」タブの順にクリックします。 「ダウンロードしたアプリを許可する」が「Mac App Store」に設定されている場合は、「Mac App Storeと識別された開発者」に変更します。 58 | 59 | ### Linux 60 | 61 | おそらく殆どの場合、Pythonはすでにインストール済みでしょう。インストールされているか確認するためには（バージョンを確認するためにも）、コンソールを起動して次のコマンドを打ってください。 62 | 63 | ``` 64 | $ python3 --version 65 | Python 3.6.2 66 | ``` 67 | 68 | もし、Pythonがインストールされていない場合、あるいはバージョンが古い場合は、次の指示に従ってインストールしてください。 69 | 70 | #### Ubuntu 71 | 72 | 次のコマンドをコンソールに打って下さい。 73 | 74 | ``` 75 | sudo apt-get install python3.6 python3.6-venv 76 | ``` 77 | 78 | #### Fedora 79 | 80 | 次のコマンドをコンソールに打って下さい。 81 | 82 | ``` 83 | sudo yum install python3.6 84 | ``` 85 | 86 | --- 87 | 88 | 分からない時や、質問がある時は、コーチに質問してくださいね。ときどき上手くいかないこともあります。そんな時は、経験豊富な人に聞くといいですよ。 89 | 90 | -------------------------------------------------------------------------------- /python_introduction/README.md: -------------------------------------------------------------------------------- 1 | # Introduction to Python 2 | 3 | > このチャプターの一部はGeek Girls Carrotsのチュートリアルをもとにしています。 (http://django.carrots.pl/). 4 | 5 | さあ、コードを書いてみましょう！ 6 | 7 | ## Python prompt 8 | 9 | Pythonであそぶために、*コマンドライン* を開きましょう。 やり方は、チャプター [Intro to Command Line](../intro_to_command_line/README.md) で学びましたね。 10 | 11 | 準備ができたら、次の指示に従ってやってみましょう。 12 | 13 | Pythonコンソールを開きましょう。Windowsなら`python`、Mac OSやLinuxなら`python3`とタイプして Enterキーをおしてください。. 14 | 15 | $ python3 16 | Python 3.5.2 (...) 17 | Type "copyright", "credits" or "license" for more information. 18 | >>> 19 | 20 | ## Your first Python command! 21 | 22 | Pythonのコマンドが走ると、プロンプト記号が `>>>`に変わりました。これは、今Pythonの言語を実行できますという意味です。 `>>>`はタイプしなくていいですよ。 - Pythonがあなたの代わりにやってくれます。 23 | 24 | Pythonコンソールを終わる時は、`exit()` とタイプするか、ショートカット`Ctrl + Z` （Windows）、 `Ctrl + D`（Mac/Linux）で終了です。`>>>` は現れなくなりました。 25 | 26 | けど、今はまだコンソールを終了しないで、もっと動かして学びましょう。最初はとてもシンプルなものからはじめましょう。例えば、簡単な計算をしてみましょう。`2 + 3`とタイプして、Enterキーを押してください。 27 | 28 | >>> 2 + 3 29 | 5 30 | 31 | できました！答えがでてきましたね。Pythonは計算ができます。他にも、次のようなコマンドを試してみましょう： 32 | - `4 * 5` 33 | - `5 - 1` 34 | - `40 / 2` 35 | 36 | ちょっとの間楽しんであそんでみたら、またココに戻ってきてくださいね。:) 37 | 38 | お分かりのとおり、Pythonはステキな計算機ですね. 他になにができるんだろう…と思ったら、次にいってみましょう。 39 | 40 | ## Strings 41 | 42 | あなたのお名前を次のようにクォーテーションをつけてタイプしてください。 43 | 44 | >>> "Ola" 45 | 'Ola' 46 | 47 | はじめてのString（文字列）が完成です！Stringとは、文字の集合のことです。シングルクォーテーション (`'`) あるいは、ダブルクォーテーション (`"`) で囲います。最初と最後は同じ記号にしてください。 - クォーテーションの中が文字列であることを意味しています。 48 | 49 | 複数の文字列を結合することもできます。次のように試してみましょう。: 50 | 51 | >>> "Hi there " + "Ola" 52 | 'Hi there Ola' 53 | 54 | 文字列を繰り返すためには、演算子を使って繰り返し回数を指定することもできます。: 55 | 56 | >>> "Ola" * 3 57 | 'OlaOlaOla' 58 | 59 | アポストロフィーを文字列の中に含めたい場合は、２通りの方法があります。 60 | 61 | まずは、ダブルクォーテーションを使う方法です。 62 | 63 | >>> "Runnin' down the hill" 64 | "Runnin' down the hill" 65 | 66 | あるいは、バックスラッシュ (`\`)を使う方法もあります。: 67 | 68 | >>> 'Runnin\' down the hill' 69 | "Runnin' down the hill" 70 | 71 | できましたか？次に、あなたの名前を大文字に変えてみましょう。次のように記述してください。 72 | 73 | >>> "Ola".upper() 74 | 'OLA' 75 | 76 | ここで`upper` __関数 (function)__ を使うことができましたね! 関数 (`upper()`など) は、呼び出したオブジェクト (`"Ola"`のことです) に対してどのような手順でどのような処理をするかをひとまとめにしたものです。 77 | 78 | あなたの名前の文字数を知りたいときは、その関数もあります！ 79 | 80 | >>> len("Ola") 81 | 3 82 | 83 | どうして、文字列の後に`.` をつけて関数を呼び出したり (`"Ola".upper()`のように)、あるいは、先に関数を呼び出してかっこの中に文字列をいれているのか、と疑問に思ったかもしれません。そうですね。時に、オブジェクトに結びついた関数というのがあります。例えば、`upper()`は、文字列にのみ実行される関数です。私たちはこれを__メソッド (method)__と呼びます。それとは別に、特定のオブジェクトに関連せず、異なるタイプのオブジェクトに対して実行できる関数があります。例えば`len()`ですね。`len` 関数の引数として`"Ola"`をかっこの中にいれているのです。 84 | 85 | ### Summary 86 | 87 | 文字列はだいじょうぶですね。ここまでに学んだことをまとめましょう。 88 | 89 | - __プロンプト__ - Pythonプロンプトにコマンド（コード）を入力すると、答えがかえってきます。 90 | - __数値 と 文字列__ - 数値は計算に、文字列はテキストに使われます。 91 | - __演算子__ - 例えば + や * のように、値を計算して新しい値を返します。 92 | - __関数__ - upper() や len() のようにオブジェクトに対して行う機能のことです。 93 | 94 | すべてのプログラミング言語に共通する基礎になります。 もう少し難易度の高いものに挑戦してみましょう。準備はいいですか？ 95 | 96 | ## Errors 97 | 98 | さて、新しいことをやってみましょう。あなたの名前の文字数を数えたように、数字の文字列は数えれるでしょうか？ `len(304023)`と記述して、Enterキーを押してみましょう。 99 | 100 | >>> len(304023) 101 | Traceback (most recent call last): 102 | File "", line 1, in 103 | TypeError: object of type 'int' has no len() 104 | 105 | はじめてのエラーがでました！オブジェクトタイプ"int" (integers, 数値) は文字数がありませんと言っています。では、どうすればよいでしょうか？この数字を文字列として扱えれば、文字数を数えれるはずですよね？ 106 | 107 | >>> len(str(304023)) 108 | 6 109 | 110 | できました！`str` 関数を`len`の中に記述しました。`str()`は、その中身を文字列に変換します。 111 | 112 | - `str`関数は、__文字列__に変換します。 113 | - `int`関数は、文字列や数値を__整数__に変換します。 114 | 115 | > 重要！: 数字は文字列にすることはできますが、全ての文字が数字に変換できるわけではありません。 例えば `int('hello')` は数字にはなりませんよね？ 116 | 117 | ## Variables 118 | 119 | 変数（variables）は、プログラミングの重要なコンセプトです。後で使うためにつける単なる名札ではありません。プログラマーは変数を使ってデータを保管したり、 コードを読みやすくして、後でそれが何だったか覚えておかなくてもいいようにします。 120 | 121 | 変数`name`を新しくつくってみましょう。 122 | 123 | >>> name = "Ola" 124 | 125 | できましたか？簡単ですね。単純に name イコール（=） Olaと記述するだけです。. 126 | 127 | 見てのとおり、プログラムは、なにも返してくれませんね。では、変数がきちんとあるか、どうやって確かめたらいいのでしょうか？ `name`とタイプして、Enterキーをおしてください。 128 | 129 | >>> name 130 | 'Ola' 131 | 132 | やりました！あなたのはじめての変数ができましたね！代入する値を変えることもできます。 133 | 134 | >>> name = "Sonja" 135 | >>> name 136 | 'Sonja' 137 | 138 | 関数にも使えます。 139 | 140 | >>> len(name) 141 | 5 142 | 143 | 素晴らしいですね！変数は、もちろん数値にも使えますよ。 144 | 145 | >>> a = 4 146 | >>> b = 6 147 | >>> a * b 148 | 24 149 | 150 | もしも、間違えた変数名を使ってしまったら、どうなるでしょうか？予想できますか？やってみましょう！ 151 | 152 | >>> city = "Tokyo" 153 | >>> ctiy 154 | Traceback (most recent call last): 155 | File "", line 1, in 156 | NameError: name 'ctiy' is not defined 157 | 158 | エラーになりました！前回とは違うエラータイプです。**NameError**という、初めてみるエラータイプですね。作成されていない変数を使った時は、Pythonがエラーを教えてくれます。もし、このエラーに出くわしたら、記述したコードにタイプミスがないか確認してください。 159 | 160 | ちょっと遊んで、何ができるか試してみてくださいね！ 161 | 162 | 163 | ## The print function 164 | 165 | 次に挑戦してみましょう。 166 | 167 | >>> name = 'Maria' 168 | >>> name 169 | 'Maria' 170 | >>> print(name) 171 | Maria 172 | 173 | 単に`name`とタイプした時は、Pythonインタプリタが、変数'name'の *representation* を返します。ここでは、 M-a-r-i-aという単なる文字の集まりで、シングルクォーテーション（''）に囲われています。 しかし、 `print(name)`と記述した時は、Pythonは変数の中身を出力します。クォーテーションはありません。 174 | 175 | これからさらに詳しくみていきますが、`print()`は、関数から出力をする時や、複数行の出力を行うときにも便利です。 176 | 177 | 178 | ## Lists 179 | 180 | 数値と文字列の他にも、すべてのオブジェクトタイプを勉強しておきましょう。__リスト (list)__というものがあります。リストは、その名のとおり、オブジェクトの並びをもつものですね。:) 181 | 182 | まずはリストを作りましょう: 183 | 184 | >>> [] 185 | [] 186 | 187 | はい、このリストは空っぽです。使いにくいですよね。では、くじ引きの番号のリストを作りましょう。 この番号を何度も繰り返し書きたくはないから、同時に変数に代入してしまいましょう。 188 | 189 | >>> lottery = [3, 42, 12, 19, 30, 59] 190 | 191 | よし、これでリストができました！このリストで何をしましょうか？では、くじ引きの番号がいくつあるか、数えてみましょう。何の関数を使えばいいか、予想できますか？すでに知っていますよね！ 192 | 193 | >>> len(lottery) 194 | 6 195 | 196 | そうです！`len()`がリストにあるオブジェクトの数を取得できます。便利ですね。では、くじ引きの番号をソートしてみましょう。 197 | 198 | >>> lottery.sort() 199 | 200 | これは何も返してきません。これはリストに表示される番号を、順番に並べ替えただけです。再度出力して、確かめてみましょう。: 201 | 202 | >>> print(lottery) 203 | [3, 12, 19, 30, 42, 59] 204 | 205 | ご覧のとおり、小さい順に並び替えられましたね。おめでとう！ 206 | 207 | 逆順に並び替えてみたくなりましたか？やってみましょう。 208 | 209 | >>> lottery.reverse() 210 | >>> print(lottery) 211 | [59, 42, 30, 19, 12, 3] 212 | 213 | 簡単でしたね？リストに何かを追加したいときは、次のようにコマンドを記述してください。 214 | 215 | >>> lottery.append(199) 216 | >>> print(lottery) 217 | [59, 42, 30, 19, 12, 3, 199] 218 | 219 | 最初の数字だけを出力したいときは、__インデックス (index)__を使って指定することができます。インデックスは、リストの先頭の要素から順に「０」、次に「１」と割り当てられています。次のとおり試してみてください。: 220 | 221 | >>> print(lottery[0]) 222 | 59 223 | >>> print(lottery[1]) 224 | 42 225 | 226 | このように、リスト名と要素のインデックスを[]に記述することで、指定した要素を取り出すことができます。 227 | 228 | 他のインデックスも試して遊んでみてください。例えば、 6, 7, 1000, -1, -6, -1000 などをインデックスに指定するとどうなるでしょうか。コマンドを実行する前に予測してみましょう。結果はどうですか？ 229 | 230 | ご参考に、こちらのドキュメントにリストメソッドがすべて記されています。 https://docs.python.org/3/tutorial/datastructures.html 231 | 232 | ## Dictionaries 233 | 234 | 辞書(ディクショナリ)について確認しましょう。リストに似ていますが、インデックスのかわりにキーと呼ばれる識別子で値を参照します。キーは文字列も数値も使えます。ディクショナリは次のように`{}`括弧で囲んで作成します。 235 | 236 | >>> {} 237 | {} 238 | 239 | これで中身が空っぽのディクショナリができましたね。やったね！ 240 | 241 | では、つぎのコマンドを記述してみましょう。 (あなた自身の情報に値をおきかえてみてもいいですよ) 242 | 243 | >>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} 244 | 245 | このコマンドで、`participant`という名前の変数をつくって、３つのキーと値をもつ要素を作成しました。 246 | 247 | - キーが`name`で、 値が`'Ola'`の要素です。 (`string`), 248 | - キー`country`は、 値`'Poland'` (`string`), 249 | - キー`favorite_numbers` は リスト`[7, 42, 92]`。 (数字を3つ持つ`list`). 250 | 251 | 次の構文で各キーの値を確認できます。 252 | 253 | >>> print(participant['name']) 254 | Ola 255 | 256 | リストに似ていますね。しかし、ディクショナリーでは、インデックスを記憶する必要がなく、名前でいいのです 257 | 258 | もし存在しないキーを参照しようとすると、どうなるでしょうか？予想できますか？実際にやってみましょう！ 259 | 260 | >>> participant['age'] 261 | Traceback (most recent call last): 262 | File "", line 1, in 263 | KeyError: 'age' 264 | 265 | またエラーです。今回は **KeyError**というエラーが出ました。Pythonは、このディクショナリにキー`'age'`は存在しませんよ、と教えてくれています。 266 | 267 | ディクショナリとリストはどう使い分ければよいのでしょうか？そうですね、これはゆっくり考えてみるべきポイントですね！この後の解答を読むまえに、考えてみてください。 268 | 269 | - 必要なのは、順序付けられた一連のアイテムですか？ リストを使いましょう。 270 | - キーに対応する値が必要？キーから値を参照する？ ディクショナリを使いましょう。 271 | 272 | ディクショナリやリストは、生成後に値を変更できるオブジェクトです。これを *mutable* と呼びます。次のように、ディクショナリを作ったあとで、新しいキーと値を追加することができます。: 273 | 274 | >>> participant['favorite_language'] = 'Python' 275 | 276 | リストと同様に、`len()`関数をディクショナリに使ってみましょう。ディクショナリでは、キーと値のペアの数を返します。コマンドを入力してやってみましょう。: 277 | 278 | >>> len(participant) 279 | 4 280 | 281 | お分かり頂けたでしょうか。 :) では、ディクショナリを使ってもう少し練習してみましょう。準備ができたら、次の行にいってみましょう。 282 | 283 | ディクショナリの要素を削除する時は、`del`コマンドを使います。例えば、 キー`'favorite_numbers'`の要素を削除するには、次のように記述してください。 284 | 285 | >>> del participant['favorite_numbers'] 286 | >>> participant 287 | {'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} 288 | 289 | このように、'favorite_numbers'のキーと値が削除されます。 290 | 291 | 同様に、次のように記述することで、すでにあるキーの値を変更することができます。: 292 | 293 | >>> participant['country'] = 'Germany' 294 | >>> participant 295 | {'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} 296 | 297 | これで、キー`'country'`の値は、`'Poland'`から`'Germany'`に変わりました。 :) 面白くなってきましたか？その調子です！ 298 | 299 | ### Summary 300 | 301 | 素晴らしいです! これで、あなたはプログラミングについて沢山のことを学びました。ここまでのところをまとめましょう。 302 | 303 | - __エラー__ - あなたのコマンドをPythonが理解できない時にエラーが表示されます。 304 | - __変数__ - コードを簡単にまた読みやすくするために、文字や数値などのオブジェクトにつける名札。 305 | - __リスト__ - 複数の値（要素）が順に並んでいるもの。 306 | - __ディクショナリ__ - キーと値のペアの集合です。 307 | 308 | 次に進む準備はいいですか？ :) 309 | 310 | ## Compare things 311 | 312 | 比較することは、プログラミングの醍醐味の１つです。簡単に比較できるものといえば、何でしょうか？そうです、数字ですね。さっそくやってみましょう。 313 | 314 | >>> 5 > 2 315 | True 316 | >>> 3 < 1 317 | False 318 | >>> 5 > 2 * 2 319 | True 320 | >>> 1 == 1 321 | True 322 | >>> 5 != 2 323 | True 324 | 325 | Pythonにいくつか比較する数字をあたえてみました。数字を比較するだけでなく、演算式の答えも比較することができます。便利でしょ？ 326 | 327 | ２つの数字がイコールであるかどうかを比べる時に、イコールの記号が２つ`==`並んでいます。疑問に思いましたか？ Pythonを記述する時、イコール１つ`=`は、変数に値を代入するときに使います。ですので、値同士が等しいかどうか比較するときは、必ず __必ず__ イコール記号２つ`==`を記述してください。 等しくないとするときは、 上記の例のように `!=`と記述します。 328 | 329 | 次の２つはどうでしょうか 330 | 331 | >>> 6 >= 12 / 2 332 | True 333 | >>> 3 <= 2 334 | False 335 | 336 | `>` と `<` は簡単でしたね。 `>=` と `<=` はどうでしょうか？それぞれの意味は、次のとおりです。 337 | 338 | - x `>` y : x は y より大きい 339 | - x `<` y : x は y より小さい 340 | - x `<=` y : x は y 以下 341 | - x `>=` y : x は y 以上 342 | 343 | すばらしい! もう少しやってみましょう。 344 | 345 | >>> 6 > 2 and 2 < 3 346 | True 347 | >>> 3 > 2 and 2 < 1 348 | False 349 | >>> 3 > 2 or 2 < 1 350 | True 351 | 352 | 条件式が複数あって複雑になっても、その答えを出してくれます。とても賢いですね。 353 | 354 | - __and__ - `and`の左辺と右辺が共にTrueの場合、True。 355 | - __or__ - `or`の左辺あるいは右辺の少なくとも１つがTrueの時、True。 356 | 357 | "comparing apples to oranges"という英語の表現を聞いたことはありますか？文字通り訳すと「リンゴとオレンジを比較する」となり、「比較にならないものを比較する」という意味です。Pythonでも同じようなことをやってみましょう。: 358 | 359 | >>> 1 > 'django' 360 | Traceback (most recent call last): 361 | File "", line 1, in 362 | TypeError: unorderable types: int() > str() 363 | 364 | Pythonは、数値(`int`)と文字列(`str`)の比較はできません。 365 | **TypeError**とエラーが表示され、２つのオブジェクトタイプが比較できないことを教えてくれています。 366 | 367 | ## Boolean 368 | 369 | 偶然にも、__ブール型 (Boolean)__というあたらしいオブジェクトタイプを学びました。 -- おそらく、ブール型は一番簡単なオブジェクトタイプです。 370 | 371 | ブール型は、たった２つの値を持ちます。 372 | - True 373 | - False 374 | 375 | Pythonを記述するときは、Trueの最初は大文字のT、残りは小文字です。 __true, TRUE, tRUE は間違いです。 -- True と記述してください__ (もちろん False についても同様です。) 376 | 377 | ブール型は、次のように変数に代入することもできます。: 378 | 379 | >>> a = True 380 | >>> a 381 | True 382 | 383 | このようなこともできます。 384 | 385 | >>> a = 2 > 5 386 | >>> a 387 | False 388 | 389 | ブール型を使って、練習して遊んでみましょう。次のコマンドを試してみてください。 390 | 391 | - `True and True` 392 | - `False and True` 393 | - `True or 1 == 1` 394 | - `1 != 2` 395 | 396 | おめでとうございます！ブール型を理解することは、プログラミングでとても大事です。ここまでできましたね！ 397 | 398 | # Save it! 399 | 400 | ここまでインタプリタでPythonのコードをかいてきました。つまり、コードを１行づつしか書くことができませんでした。普通のプログラムはファイルに保存され、__インタプリタ__ あるいは __コンパイラ__でプログラミング言語を処理して実行します。ここまで、私たちはプログラムを１行ごとにPython __インタプリタ__で実行してきました。ここかっらは、１行以上のコードを実行していきましょう。次のような流れになります。 401 | 402 | - Pythonインタプリタを終了します。 403 | - お好きなエディタを起動します。 404 | - Pythonファイルとしてコードを保存します。 405 | - 実行します！ 406 | 407 | これまで使っていたPythonインタプリタを終了しましょう。 ```exit()``` ファンクションを記述してください。 408 | 409 | >>>exit() 410 | $ 411 | 412 | これで、コマンドプロンプトに戻りました。 413 | 414 | 前のチャプター [code editor](../code_editor/README.md) で、エディタを紹介しました。エディタを起動して、新しいファイルにコードを書いてみましょう。 415 | 416 | print('Hello, Django girls!') 417 | 418 | あなたは、すでにベテランのpython開発者です。今日学んだコードを自由に書いてみてください。 419 | 420 | コードを書いたら、わかりやすい名前をつけて保存しましょう。**python_intro.py**と名前をつけて、デスクトップに保存してください。ファイル名は何でもかまいません。ここで重要なことは、拡張子を__.py__とすることです。コンピュータにこのファイルは**pythonで実行するファイルです**とおしえます。 421 | 422 | ファイルを保存したら、実行してみましょう！コマンドラインのセクションで学んだことを思い出して、ターミナルの **ディレクトリを変更**して、デスクトップにしましょう。 423 | 424 | Macでは、コマンドは次のようになります。 425 | 426 | cd /Users//Desktop 427 | 428 | Linuxでは、次のようになります。("Desktop"のところは"デスクトップ"と表示されているかも知れません): 429 | 430 | cd /home//Desktop 431 | 432 | Windowsでは、次のようになります。 433 | 434 | cd C:\Users\\Desktop 435 | 436 | うまくできない時は、質問してください。 437 | 438 | 次に、ファイルのコードを実行します。 439 | 440 | $ python3 python_intro.py 441 | Hello, Django girls! 442 | 443 | できました！これで、あなたはファイルに保存されたPythonプログラムを実行できましたね。いい気分ですね。 444 | 445 | では、ここからプログラミングに不可欠のツールを学んでいきましょう 446 | 447 | ## If...elif...else 448 | 449 | ある条件が成立するときに処理を行いたいという時に用いるのが、__if 条件式__です。 450 | 451 | では、 **python_intro.py** ファイルのコードを次のように書き換えてください。 452 | 453 | if 3 > 2: 454 | 455 | これを保存して実行すると、次のようなエラーがでます。 456 | 457 | $ python3 python_intro.py 458 | File "python_intro.py", line 2 459 | ^ 460 | SyntaxError: unexpected EOF while parsing 461 | 462 | 条件式 `3 > 2` がTrueの時、どのように処理をすべきかが記述されていませんね。では、Python に “It works!” と出力してもらいましょう。**python_intro.py** ファイルの中身を、次のとおりに書き換えてください。 463 | 464 | if 3 > 2: 465 | print('It works!') 466 | 467 | ２行目をスペース４つでインデントしていることに気が付きましたか？if文がTrueの時、どのコードを実行するかPythonに知らせる必要があります。 スペース１つでもできますが、ほぼ全員のPythonプログラマーはスペース４つとしています。タブ１つも、スペース４つと同じです。 468 | 469 | 保存して、もう一度実行してみましょう。 470 | 471 | $ python3 python_intro.py 472 | It works! 473 | 474 | ### What if not? 475 | 476 | 前述の例では、if文の条件式がTrueの時だけ、コードが実行されました。Pythonは、`elif` や `else` といった記述もできます。 477 | 478 | if 5 > 2: 479 | print('5 is indeed greater than 2') 480 | else: 481 | print('5 is not greater than 2') 482 | 483 | これを実行した場合、次のように出力されます。 484 | 485 | $ python3 python_intro.py 486 | 5 is indeed greater than 2 487 | 488 | 2が５より大きい場合、２行目のコマンドが実行されます。では、 `elif` はどうなるのでしょうか？ 489 | 490 | name = 'Sonja' 491 | if name == 'Ola': 492 | print('Hey Ola!') 493 | elif name == 'Sonja': 494 | print('Hey Sonja!') 495 | else: 496 | print('Hey anonymous!') 497 | 498 | それを実行すると... 499 | 500 | $ python3 python_intro.py 501 | Hey Sonja! 502 | 503 | どうなったか、わかりましたか? 504 | 505 | ### Summary 506 | 507 | ３つのエクササイズを通して、これまでに学んだことは、、、: 508 | 509 | - __比較__ - 比較に用いる `>`, `>=`, `==`, `<=`, `<` そして`and`, `or` といった演算子があります。 510 | - __ブール型__ - `True` と `False` ２つの値のみを持ちます。 511 | - __ファイルの保存__ - コードはファイルに保存することで、大きなプログラムも実行できます。 512 | - __if...elif...else__ - 条件分岐することで、特定の条件によって処理を分けて実行することができます。 513 | 514 | では、このチャプターの最後のパートに挑戦していきましょう！ 515 | 516 | ## Your own functions! 517 | 518 | Pythonには`len()`のように関数があったのを覚えていますか？ ここでは、自分で関数を作る方法を学びます。 519 | 520 | 実行する機能をひとまとめにしたものを関数といいます。`Pythonでは、functionは`def`というキーワードからはじまり、引数を含むことができます。簡単なものからはじめてみましょう。**python_intro.py** の中身を書きのコードに置き換えてください。: 521 | 522 | def hi(): 523 | print('Hi there!') 524 | print('How are you?') 525 | 526 | hi() 527 | 528 | あなたの最初の関数を実行する準備ができましたね! 529 | 530 | ここであなたは、最後の行になぜ関数の名前を書いたのだろう、と疑問に感じたかもしれません。これは、Pythonがファイルを読み、上から下へ実行していくからです。関数を定義したあとに、もう一度その関数を書いて呼び出します。 531 | 532 | では実行して、どうなるか見てみましょう: 533 | 534 | $ python3 python_intro.py 535 | Hi there! 536 | How are you? 537 | 538 | 簡単にできましたね！次に引数をつかった関数を作ってみましょう。先ほどの例を使います。'hi'という挨拶をする関数に、挨拶をする人の名前をいれてみます。 539 | 540 | def hi(name): 541 | 542 | このとおり、関数に`name`という引数を足します。: 543 | 544 | def hi(name): 545 | if name == 'Ola': 546 | print('Hi Ola!') 547 | elif name == 'Sonja': 548 | print('Hi Sonja!') 549 | else: 550 | print('Hi anonymous!') 551 | 552 | hi() 553 | 554 | 上記のように、`print`関数の前に、インデントを２ついれる必要があります。 `if` の条件式が真の時に、なにをすべきかという処理はインデントの後に記述します。 実行して、どのように動くか見てみましょう。: 555 | 556 | $ python3 python_intro.py 557 | Traceback (most recent call last): 558 | File "python_intro.py", line 10, in 559 | hi() 560 | TypeError: hi() missing 1 required positional argument: 'name' 561 | 562 | おっと、エラーがでてしまいました。Pythonがエラーメッセージを表示してくれています。 563 | 定義した関数`hi()`は、`name`という引数が必要ですが、関数を呼び出す時に引数を忘れてしまっています。 564 | 最後の行を修正しましょう。: 565 | 566 | 567 | hi("Ola") 568 | 569 | 実行してください。: 570 | 571 | $ python3 python_intro.py 572 | Hi Ola! 573 | 574 | では、名前を変えてみたらどうなりますか？ 575 | 576 | hi("Sonja") 577 | 578 | 再度実行してください。: 579 | 580 | $ python3 python_intro.py 581 | Hi Sonja! 582 | 583 | では、OlaやSonja以外の名前を入れた時、どうなるかわかりますか？やってみて、予測が正しいか確認して下さい。このように出力されましたか。: 584 | 585 | Hi anonymous! 586 | 587 | すばらしいですね。挨拶をする人の名前を毎回何度も繰り返して書く必要がなくなりました。これが関数を作る理由です。何度も繰り返してコードを書く必要はありません！ 588 | 589 | もっとスマートなやり方を試してみましょう。 --２人以上の名前があり、それぞれに対して条件をつけるのは大変ですよね。 590 | 591 | def hi(name): 592 | print('Hi ' + name + '!') 593 | 594 | hi("Rachel") 595 | 596 | では、実行してみましょう。： 597 | 598 | $ python3 python_intro.py 599 | Hi Rachel! 600 | 601 | おめでとうございます！Functionsの書き方を学びましたね。:)! 602 | 603 | ## Loops 604 | 605 | さぁ、もう最後のパートですよ。あっという間ですね。 :) 606 | 607 | 先ほどお話したとおり、プログラマーはめんどくさがりで、同じことを繰り返すことは好きではありません。プログラミングはすべてを自動的に処理したい。私たちはすべての人の名前ひとつひとつに対して挨拶をしたくないですよね？こういう時にループが便利です。 608 | 609 | リストを覚えていますか？女の子の名前をリストにしてみましょう。: 610 | 611 | girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] 612 | 613 | 名前を呼んで、全員にあいさつをしてみましょう。 `hi` 関数が使えますね。ループの中でつかいましょう。: 614 | 615 | for name in girls: 616 | 617 | この ```for``` は ```if``` に似ています。この次に続くコードは、４つスペースを入れる必要があります。 618 | 619 | ファイルに書かれるコードはこのようになります。: 620 | 621 | def hi(name): 622 | print('Hi ' + name + '!') 623 | 624 | girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] 625 | for name in girls: 626 | hi(name) 627 | print('Next girl') 628 | 629 | 実行してみましょう。: 630 | 631 | $ python3 python_intro.py 632 | Hi Rachel! 633 | Next girl 634 | Hi Monica! 635 | Next girl 636 | Hi Phoebe! 637 | Next girl 638 | Hi Ola! 639 | Next girl 640 | Hi You! 641 | Next girl 642 | 643 | ご覧のとおり、`girls`リストのすべての要素に対して、`for` の中にインデントして書かれたことが繰り返されています。 644 | 645 | `for` 文では、`range` 関数をつかって指定した回数だけ繰り返すこともできます。: 646 | 647 | for i in range(1, 6): 648 | print(i) 649 | 650 | これを実行すると、次のように出力されます: 651 | 652 | 1 653 | 2 654 | 3 655 | 4 656 | 5 657 | 658 | `range`関数は、引数に指定した開始と終了の数値から連続する数値の値を要素として持つリスト型のオブジェクトを作成します。 659 | 660 | 2つ目の引数（終了の数値）は、リストに含まれないことに注意してください。つまり、 `range(1, 6)` は、１から５のことであり、６は含まれません。 661 | 662 | ## Summary 663 | 664 | 以上です！__おめでとう！頑張りました！__ これは簡単ではなかったと思います。自分を褒めてあげてくださいね。ここまで進めることができたのは、本当に素晴らしいことです！ 665 | 666 | 次のチャプターにうつるまえに、少し気晴らしに、ストレッチやお散歩をして、目や身体を休ませてあげてくださいね。 :) 667 | 668 | ![Cupcake](images/cupcake.png) 669 | -------------------------------------------------------------------------------- /python_introduction/images/cupcake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DjangoGirlsJapan/tutorialJP/7f45136ebf803ad0a6c1c60d16ff0fe8c865f14a/python_introduction/images/cupcake.png -------------------------------------------------------------------------------- /template_extending/README.md: -------------------------------------------------------------------------------- 1 | # テンプレートの拡張 2 | 3 | Djangoの便利な機能の一つに、 __テンプレートの拡張機能__ があります。ウェブサイトを作る時、どのページでも同じHTMLタグを使うことがありますよね。たとえば、ヘッダーやフッター部分は、どのページでも同じものを使いませんか？そういう時に、便利な機能です。 4 | 5 | この機能を使えば、ウェブサイトの共通部分(ヘッダーやフッター、メニューバーなど)に変更を加えたい時、全てのHTMLファイルに対して、同じ作業を繰り返さなくてすみます。一箇所だけ変更すれば、その変更は全てのページに適用されます。 6 | 7 | ## ベースとなる骨組みのテンプレートファイルの作成 8 | 9 | ベーステンプレートは、ウェブサイトの全てのページの骨組みともいうべきテンプレートです。 10 | 11 | `blog/templates/blog/` に、 `base.html` というファイル名で、ベーステンプレートファイルを作ってみましょう。 12 | 13 | blog 14 | └───templates 15 | └───blog 16 | base.html 17 | post_list.html 18 | 19 | `base.html` ファイルを開いて `post_list.html` の内容を全部 `base.html` にコピーしたら、以下の様になるでしょう。 20 | 21 | {% load staticfiles %} 22 | 23 | 24 | Django Girls blog 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |

Django Girls Blog

33 |
34 | 35 |
36 |
37 |
38 | {% for post in posts %} 39 |
40 |
41 | {{ post.published_date }} 42 |
43 |

{{ post.title }}

44 |

{{ post.text|linebreaks }}

45 |
46 | {% endfor %} 47 |
48 |
49 |
50 | 51 | 52 | 53 | コピーしたら `BODYタグ` 部分を、以下の内容に書き換えましょう。 `BODYタグ` は、わかりますよね？ `` から `` までの部分のことですよ。 54 | 55 | 56 |
57 |

Django Girls Blog

58 |
59 |
60 |
61 |
62 | {% block content %} 63 | {% endblock %} 64 |
65 |
66 |
67 | 68 | 69 | 基本的に、`{% for post in posts %}{% endfor %}`の間を、以下の様に書き換えただけですね: 70 | 71 | {% block content %} 72 | {% endblock %} 73 | 74 | どうしてこんな風に書くのか、考えてみましょう。 `base.html` に `block` を記述しました。そうすると、別のテンプレートの内容を、この `block` の部分に挿入することが出来るようになります。これが、テンプレートの拡張です。それでは、この `block` に挿入する `post_list.html` も修正してみましょう。 75 | 76 | `base.html` を保存して `blog/templates/blog/post_list.html` を開きましょう。まず、BODYタグの中身以外は全て削除してしまいます。 `
` も削除してしまって、最終的には以下の様にします。 77 | 78 | {% for post in posts %} 79 |
80 |
81 | {{ post.published_date }} 82 |
83 |

{{ post.title }}

84 |

{{ post.text|linebreaks }}

85 |
86 | {% endfor %} 87 | 88 | 修正出来たら、次の行をファイルの先頭に書き加えましょう。 89 | 90 | {% extends 'blog/base.html' %} 91 | 92 | こんな風にすると `base.html` の `block` 部分に `post_list.html` を組み込んで使うことが出来るという訳です。実際に `block` 部分に組み込むには、以下の様に `{% block content %}` と `{% endblock content %}` で囲わなくてはなりません。 93 | 94 | {% extends 'blog/base.html' %} 95 | 96 | {% block content %} 97 | {% for post in posts %} 98 |
99 |
100 | {{ post.published_date }} 101 |
102 |

{{ post.title }}

103 |

{{ post.text|linebreaks }}

104 |
105 | {% endfor %} 106 | {% endblock content %} 107 | 108 | うまくテンプレート機能が動作しているか、ウェブサイトにを開いて確認してみましょう。 109 | 110 | > 確認するとき `blog/base.html` が見当たらないという、 `TemplateDoesNotExists` のエラーが出るかもしれません。その場合は、コンソールで動いている `runserver` を一旦止めてみましょう。停止させるのは Ctrl-C (コントロールキーを押しながら'C'キーを押す) で、もう一度起動させるには `python manage.py runserver` コマンドを使います。 111 | -------------------------------------------------------------------------------- /whats_next/README.md: -------------------------------------------------------------------------------- 1 | # What's next? 2 | 3 | おめでとうございます。素晴らしいです。よくやりましたね。 4 | 5 | 6 | ### What to do now? 7 | 8 | まずは少し休んでください。あなたはやり遂げました。 9 | 10 | 休んだ後は、こちらも確認してください： 11 | 12 | - Django Girls の [Facebook](http://facebook.com/djangogirls)と[Twitter](http://twitter.com/djangogirls) です。 13 | 14 | 15 | ### Can you recommend any further resources? 16 | 17 | このチュートリアルの拡張版である、[Django Girls Tutorial: Extensions](http://djangogirls.gitbooks.io/django-girls-tutorial-extensions/)を試してみてください。 18 | 19 | 他にオススメの資料のリストを下記に記述します。とてもいいですよ。 20 | 21 | - [Django's official tutorial](https://docs.djangoproject.com/ja/1.11/intro) 22 | - [New Coder tutorials](http://newcoder.io/tutorials/) 23 | - [Code Academy Python course](http://www.codecademy.com/en/tracks/python) 24 | - [Code Academy HTML & CSS course](http://www.codecademy.com/tracks/web) 25 | - [Django Carrots tutorial](http://django.carrots.pl/en/) 26 | - [Learn Python The Hard Way book](http://learnpythonthehardway.org/book/) 27 | - [Getting Started With Django video lessons](http://gettingstartedwithdjango.com/) 28 | - [Two Scoops of Django: Best Practices for Django](http://twoscoopspress.org/products/two-scoops-of-django-1-11) book 29 | --------------------------------------------------------------------------------