
このコースで学ぶ内容を説明します。フロントエンドとバックエンドなどWEBエンジニアが行う仕事について説明し、このコースで学ぶDjangoでは何ができるのかを説明しています。
このコースの学習の進め方を説明します。コースの内容を理解しないで学習することはとても効率が悪くなります。今自分が何を学んでいるのか、次は何を学ぶのかを常に意識して学びましょう。ここではその内容を具体的に説明しています。
さらにPythonをインストールするのに必要なHomeBrewというプログラムをインストールします。
つぎにpyenvとpython本体のインストールを行います。ここは長いコマンドをターミナルに入力していくので、ときどき動画の再生を止め、慎重に正しくコマンドを入力しましょう。ここを過ぎればいよいよpythonが使えるようになります。
このレクチャーではwindows版のpythonのインストール方法を説明します。macの方はすでにここまででインストールを完了しているので、このレクチャーはスキップしていただいて大丈夫です。
PythonとDjangoの違い。Djangoを学ぶためにPythonの基本を理解しておく必要があることを説明して、Pythonの実行環境を整えます。最初はインタラクティブな対話モードでの学習をするので、IDLEという対話形式でPhthonを動かすプログラムを起動する方法を学びます。
実際にPythonをIDLEで操作して、簡単な四則演算をやってみます。
Pythonで扱う「値」(あたい)とキャストについて説明しています。
このレクチャーでは比較演算子と変数の概念を学びます。特に変数はPythonおよびDjangoで非常によく使われます。しっかり理解しておきましょう。
このレクチャーではPythonの構文でよく使われる条件分岐を説明します。ここでは代表的な条件分岐文であるif文を例に、いくつか実際にコマンドを実行して説明します。
ここでは条件分岐の制御文としてもうひとつwhile文について説明します。while文は条件が満たされている間は、何度でも実行文で書かれた処理を行い、条件が満たされなくなった場合にその処理を止めて制御文から抜け出すという構文です。これもif文と同じようにPythonではよく使われる構文です。
次はPythonに限らずプログラミングではよく使われる「関数」についての説明です。関数はいくつもの処理をひとつの関数にまとめ、その関数を1回実行することで、関数内に書かれたいくつもの処理を1回で実行できる便利な仕組みです。
このレクチャーでは簡単なユーザー定義の関数をひとつ作って(定義して)、それを実行することで関数を実際に使う方法を学習します。ごくごく簡単な関数ですが、いくつもの場合を考えなければいけないので落ち着いてやりましょう。
次はクラスとインスタンスについてです。クラスとインスタンスはPythonの中ではとも重要な考え方です。この中身についてはこのレクチャーだけでは理解するのは困難ですが、ある程度の概念をつかみ、実際に理解するのはこの後につづくコースの中で何度も出てくるので、そこで理解を深めることにし、ここでは形だけを理解するくらいのつもりで学習してください。
このレクチャーは先のレクチャーのクラスとインスタンスの続きです。
このレクチャーでは初期化メソッド(コンストラクタ)について学びます。初期化メソッドはメソッドのひとつで、関数やクラスのように特に重要な概念ではありませんが、知っていて便利なものくらい認識で学んでいただいて結構です。
次は継承です。継承はクラスから似たような内容のクラスを作るときに、前のクラスの内容を受け継いで、さらに変更を加えるだけで新しいクラスを作るという方法で、Djangoではよく使われるとても便利な方法です。
このレクチャーからDjangoの学習に入ります。ここでは、今後の学習に必要なプログラミング用のエディターとしてAdobe社のBracketsというエディターをインストールする方法を説明します。
もし普段お使いのエディターがあれば、そちらを使っていただいても構いません。その場合はこのレクチャーはスキップしていただいて大丈夫です。
Djangoシステムのインストールをします。「またインストールか」と思われるかも知れませんが、DjangoはPythonをインストールしたときにすでに一緒にインストールされているので、ここでは設定のみです。
設定を完了して、Djangoの画面を表示してインストールの確認をします。
最後にdjangoで練習をするためのプロジェクトを作成します。
プロジェクトを作成したら、次はアプリケーションを作ります。Djangoではプログラムの目的ごとにアプリケーションをプロジェクト内に作ります。ここではアプリケーションのディレクトリを作るのみです。
ここからプログラミングの作業が始まります。このレクチャーではhtmlで書かれたWEBページをDjangoで表示するためのしくみの概要を説明し、そのために必要な作業を示します。
このレクチャーでは先ほどのindex.htmlファイルの内容を少し複雑にして、変数を使って表示する方法を学びます。そのためにviews.pyというファイルを書き替える練習を行います。
先のレクチャーで行ったviews.pyファイルの内容を解説します。ここではviews.pyの書き方や文法的な説明を行っています。
djangoのviews.pyで扱ったデータをhtmlファイルに渡すために必要なurls.pyというファイルを編集します。urls.pyファイルはviews.pyで生成した情報をhtmlファイルに正確に渡すための道筋(パス)を示すためのファイルです。このパスが正確に書かれていないと、htmlファイルは正しく内容を表示することができません。
このレクチャーではurls.pyファイルをもう一つ書きます。urls.pyファイルはプロジェクトの中でのパスをを示すurls.pyの他に、アプリケーションフォルダ内でパスを案内するurls.pyの2種類があります。先のレクチャーではプロジェクトの中でのurls.pyファイルを書きましたが、ここではアプリケーションフォルダ内でのパスを示すurls.pyを書きます。
djangoプロジェクトの中で実際にindex.htmlのようなhtmlファイルを扱うためには「templates」というフォルダを準備し、そこにindex.htmlファイルを書きます。ここではその仕組みを説明します。
実際に簡単なindex.htmlファイルをhtmlで記述して、それをブラウザで表示するまでをDjangoで行ってみます。ここでは簡単な内容なのでsettings.pyというファイルを書き替えるだけで行っています。
このレクチャーでは、htmlファイル内ででDjangoで操作したデータを扱うために使った「テンプレート・タグ」について説明しています。
実際にサーバーを起動してindex.htmlを表示し、htmlファイルに埋め込まれたDjangoの変数が表示されていることを確認します。
次は、htmlだけで書かれたindex.htmlページにcssのスタイルシートを使ってレイアウトする方法を学びます。簡単なcssスタイルシートを書いて、アプリケーションフォルダ内に保存する方法を学びます。
このレクチャーでは前に書いて保存していたcssスタイルシートを、htmlファイルに読み込むための方法を説明します。ここでもテンプレートタグを使います。
このレクチャーではページにアクセスして来たクライアント(ユーザー)がページに情報を入力して送信することができる仕組みを説明します。ユーザーが情報を入力するためにはforms.pyというファイルをdjangoで書きます。htmlでのformタグと同じような仕組みですが、forms.pyでは入力された情報をdjangoのデータベースに渡すことができます。
このレクチャーではもう一度views.pyファイルを編集して、先ほどforms.pyで扱ったデータをdjango内で操作できるようにします。
先のレクチャーで書いたviews.pyファイルの内容について詳しく説明します。
views.pyを書き替えたので、その内容に合わせてindex.htmlファイルを編集します。最後にhtmlページをブラウザで表示して確認します。
これでこのセクションでhtmlファイルをdjangoシステムの中で扱う方法が理解できたと思います。
このレクチャーではこのセクションで学習する内容を説明します。データベースをDjangoで操作する基本が理解できます。
このレクチャーではデータベースの概要について説明します。データベースがデータを保存するしくみや方法、さらにデータベースの種類とDjangoで扱うデータベースSQLiteについて紹介します。
簡単な個人情報を扱ったメンバーリストもようなデータベースを作ってみます。ここではそのためのデータベースの設計とmodels.pyファイルを書いてデータベースのしくみだけを作ります。
データベースのモデルができたので、つづいてデータベースを新規にDjangoに登録したり、更新するためのマイグレーションという作業を行います。ターミナルから簡単に行える作業です。
Djangoのデータベースにデータを入力するために管理者ツールを使用します。Djangoでは管理者ツールがデフォルトで用意されているので、そのツールに管理者として登録する方法を説明します。
管理者ツールに管理者としてログインします。
管理者としてログインできたら、データベースにデータを入力します。用意された練習素材からメンバーリストの個人情報をデータベースに登録します。
このレクチャーではデータベースに入力されたデータをindex.htmlで表示する方法について学びます。まずviews.pyを書いて、データベースから表示したい内容のデータを取り出し、index.htmlに渡すために変数に代入する処理を行います。
つぎにindex.htmlを編集して、views.pyで与えられた変数を表示できるようにテンプレートタグを使って処理を書きます。また入力されたデータベースのレコードを全て表示するように条件分岐のしくみをindex.htmlに書きます。
さらにviews.pyで作られた変数をindex.htmlに渡すように、パスを書いたurls.pyファイルを書き替えます。urls.pyではいつくもの変数を辞書形式でひとつのparamsという辞書に収めて、index,htmlに渡します。
cssスタイルシートを編集して、レイアウトデザインを新しくします。このときブラウザの更新が行われるように、キャッシュをクリアする方法を学びます。
最後にcssスタイルシートを編集して、index.htmlのフィールドの幅を改めるなど細かい表示の調整を行って完成させます。
このセクションでは、これまで学習してきたことを総動員して、ひとつの完成品としてブログのシステムを開発します。完成品をひとつ作ることで、最初から最後までの流れを理解でき、全体が見渡しやすくなります。
このレクチャーでは、まず完成したブログを開いてどんなものを作るのかを理解しておきましょう。
このブログシステムを動かすためにどんな機能が必要なのかを考えます。それらをリスト化して、ひとつひとつpyファイルを書いて実現するように作業の手順を考えます。
素材フォルダを準備して、作業にかかります。まずプロジェクトを設定します。ターミナルからコマンドを入力し、プロジェクトをデスクトップ上に作り、つづいてアプリケーションをプロジェクト内に作ります。
プロジェクトを設定するために最初にsetting.pyファイルを編集し、ターミナルからサーバーを起動して確認します。
最初にHTMLページから作ります。ページの内容のデータベースから取り出す情報は後で行うので、ここでは中身のないHTMLページだけを先に作ります。
つづいて、2種類のurls.pyファイルを書きます。
次はviews.pyを書きます。Djangoプロジェクトではどの.pyファイルも重要ですが、このviews.pyファイルはデータベースから必要な情報を取り出して、さらにそれをhtmlファイルに整理して渡すという特に重要な役割を持っています。
つぎはindex.htmlの名前でHTML形式のファイルを書きます。htmlファイルはDjangoではアプリケーションフォルダの中にtemplatesという名前のフォルダを作り、その中に.htmlのファイルを収めます。まずその設定からです。
templatesフォルダを作ったら、その中にindex.htmlとdetail.htmlのファイルを書きます。サーバーを起動して、表示できるか確認しておきます。
ここではまだデータベースの内容を扱っていないので、問題なく進むと思います。
次に、index.htmlページとdetail.htmlページにそれぞれをリンクさせるアンカータグを書きます。
またdetail.htmlページを新しく作ったので、views.pyにdetailページ用のdeital関数を定義し、urls.pyにもdetailページへのパスを設定します。
ターミナルからサーバーを起動して確認します。
次はcssでスタイルシートを書きます。スタイルシートをどこに書くかについてはいくつか選択肢がありますが、ここでは一時的にhtmlファイル内に書いておきます。この方法はページ毎にスタイルシートを用意することになるので面倒ですが、分かりやすいのでここではそうしておき、後で外部スタイルシートに書くことにします。
この時点でのcssスタイルシートの内容は最小限にとどめ、しくみだけを作っておきます。
ターミナルでサーバーを起動して確認します。
htmlファイルが出来たので、次はその中に書き込む情報を扱うデータベースです。まずデータベースの設計です。データベースはmodels.pyというファイルでモデルを作ることで設計を行います。このレクチャーではそのmodels.pyの書き方です。models.pyが書けたら、マイグレーションします。
次にデータベースに記事を登録します。Djangoでは専用の管理画面が用意されているので、その管理画面を使います。管理者登録をして管理画面を開き、素材ファイルから事前に用意してある記事を3本新規入力します。
データベースに書き込まれた記事の情報を取り出して、それをhtmlファイルに渡すためにviews.pyファイルを編集します。これまでの説明ではhtmlはまだデータベースからの情報を受け取るしくみは作っていなかったので、ここでそのしくみを作ります。views.pyはその機能を持つファイルです。
次はviews.pyで生成され渡されたデータをhtmlで受け取るしくみを作ります。views.pyからは情報は辞書の形式でparamsという変数に収められてhtmlファイルに渡されているので、htmlファイル側ではそこから必要な情報を整理してレイアウトすることになります。ここでもテンプレートタグを使います。
index.htmlで行った編集をdetail.htmlでも同じように行います。最初にviews.pyファイルでdetail関数を編集し、つぎにdetail.htmlで受け取った情報をレイアウトするようにします。
detail.htmlは記事全文を表示せず、特定の1レコードの記事だけを表示するので、index.htmlからのリンクで少し変更を加えることになります。
特定の1レコードの記事だけを指定して呼び出すようにもう一度views.pyファイルとindex.htmlを修正して、detail.htmlページが正常に表示できるようにします。
最後に、index.htmlページで記事が全文表示されるようになっているので、indexページでは記事の一部のみを表示できるようにし、また段落毎に自動的に改行するようにオプション設定をします。
サーバーで表示して確認して完成させます。
Djangoで扱う画像には「動的な画像」と「静的な画像」の2種類があることを理解し、それぞれで処理の方法が違うことを学ぶ。
「静的な画像」の保存先として「static」フォルダを準備し、画像をそちらに保存する。
staticフォルダに保存した「静的な画像」をhtmlファイルで表示する方法を学びます。htmlファイルを書き換えてjpgのイメージ画像をDjangoで読み込みます。
「静的な画像」と同じようにstaticフォルダに外部スタイルシートを用意し、そのスタイルシートを使ってhtmlファイルをデザインします。ここではスタイルシートのcssファイルがhtmlファイルに読み込まれる仕組みを確認するために簡単なデザインのみを行います。
つづいて「動的な画像」を保存する方法を学びます。まず「動的な画像」ファイルの本体はデータベースに保存せず、ルートディレクトリの別の場所に保存することを理解し、そのためのmediaフォルダをルートディレクトリに用意し、読み込めるようにurlを設定します。
動的な画像ファイルをデータベースに格納するために、models.pyファイルを編集して画像ファイルを扱えるように書き換えます。つぎにmodels.pyファイルを書き換えたので、改めてマイグレーションを行います。このとき起きるマイグレーションの失敗の原因と修復の方法を学びます。
最後に管理画面から実際に画像を登録してデータベースに保存し、そのあとhtmlページに保存した動的な画像をデータベースから読み込む設定をして表示します。
htmlとcssでページデザインを改良するため、出来上がった見本のページを見て変更点を確認します。
index.htmlの改良です。文字の大きさや位置などの小さな変更の他に、記事に添付する画像を小さくし、記事本文のテキストと2列の横配置になるようにCSSで設定します。これにはグリッドレイアウトの技術を使います。
他のページへのリンクなどを改良してindex.html の改良を完成させます。
同じ様にして、detail.htmlの改良を完成させます。これでコースは終了です。
このコースは現在最も注目を集めるPythonとDjangoを基礎から学び、フルスタック・エンジニアのスキルを身につけることを目的に作られた講座です。画像入りのブログシステムをゼロから手を動かして作ることを通して、Python Django3 + HTML5 CSS3を学びます。初心者の方から、中級以上の方のリスキリングやトレーニングにも役立つよう、詳しく、丁寧に説明しています。
言語の紹介や単なるプログラミングの説明をするコースではなく、データベースを扱うブログサイトを開発しながら実践的に学べぶことを目的に制作したコースです。簡単な紹介程度の使い方だけでなく詳細なテクニックやTipsまで解説しています。
このコースを終了すると、フルスタック・エンジニアとしてスタートする基礎的な力を身につけられ、WEBデザイナーやフロントエンド・エンジニアを卒業して活躍することができます。
このコースは今後も続編が予定されています。このコースから継続して学ぶことで、より高度なスキルを身につけることができます。