必要なのはブラウザだけ。Python使ったWebサービス構築（画面を作ってみよう編）

前回の続きになります 。きっと反響が少なかったのはタイトルが悪かったんだな！ということでタイトル変えました。(もし「お、いいかも」と思いましたら、ハテブよろしくです。モチベーション上がるので・・・)

前回で、環境を作ることができました。今回はページを作っていきます。

前回は「写経しよう！」が主な内容でしたが、今回からは好きなものを作っていこう！を主眼としようかと思います。

その前に・・・Webサービスってどうやって動くの？

好きなものを作っていこう！と言いましたが、まずはWebサービス（プログラム）の概念的なイメージを抑えていた方がいいと思いまして。

基本的に、プログラムは単純化すると

入力→計算/保存→出力

というプロセスを経ることになります。これが、Webだと

画面で入力して→サーバーで計算/保存して→画面に描画する

といった形になります。画面が２回出てくるので

• 画面をどうつくるか
• サーバーでどう計算/保存するか

がわかれば作れちゃうことになります。

入力→計算/保存→出力

この流れをイメージしつつ、作っていきましょう

画面の作成

前回は画面ぽい画面じゃなかったですが、今回はちゃんと画面を作ってみます。

どこに何を入力して、どこに何を出力するイメージしつつ、HTMLを作ってみます。

HTMLを置く場所の作成

プロジェクトのフォルダの下を右クリックし、New Folderを選択します。

名前を「templates」として、フォルダを作成してください。

次に、今作成したフォルダをDjangoに認識させます。settings.pyを開き、BASE_DIRの下に以下の一文を追加して保存します（templates以外の名前でフォルダを作成した場合は、下のtemplatesの部分を作成したフォルダ名に変更してください）

TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'templates'), )

HTMLの作成

続いて、先ほど作ったtemplatesフォルダの下に、適当な名前でhtmlファイルを作成し、その中にHTMLを書きます。どこに入力をして、どこに出力をするかイメージしつつ。例えば、こんな感じ

URLと処理を紐づけて、HTMLを指定して出力する

続いて、作成したHTMLをWeb上から見れるようにします。

Webとは、言うまでもないですがURLを通じてアクセスされます。

今、Django上にはHTMLが置かれていますが、Django君はURLにアクセスがあっても、どんな処理をしてどんなHTMLを返せばいいのか知りません。

それを教えてあげます。

まずは、urls.pyを開きます。

ここで、前回作った

 url(r'^top/$', 'testapp.views.main'),

の行に注目して欲しいんですが、これは何を意味するかというと、正規表現で「^top/$」のURLにアクセスがあったら、testappプロジェクトのviews.pyにあるmain関数を呼び出す　という意味になります。

正規表現はあまり馴染みがないかもしれませんが、^は文字列の最初を表し、$は文字列の最後を表してます。つまり、top/にアクセスがあればmain関数を呼び出すとなっているんですね。

ここに、新たにURLを追加します。例えば、こんな感じ

yakiniku/にアクセスがあれば、harami関数が呼ばれる。そんな指示になります。

処理を書く

harami関数を作ります。実際に試す場合は、もっとまともな名前にしてくださいね。

views.pyを開き、def 関数名 (request): で関数を定義します。

次に、先ほど作ったHTMLを指定してあげます。

①は、このプログラムでRequestContextという部品と、loaderという部品を使いますよ　という宣言です。おまじないだと思ってください。

②は、context・・・で始まる行が、画面に返したい値の指定。今は特に値を返すわけでもないのでこのまま写経してください。

template・・・で始まる行は、利用するhtmlの指定。

return・・・で終わる行は、画面描画してねという命令。こちらもこのまま写経で。

なお、この前紹介したWebサービスでは、views.pyがこんな感じになっています。

色々とごにょごにょ書いていますが、下の方は今回と似た様な感じで書かれているのがわかるかと思います。

表示してみよう

それでは実際に表示してみましょう。

もし、下のプロンプトに(env)が付いてない状態。以下の画像のような状態だったら・・・

もう一度、

source ~/workspace/venv/bin/activate

と入力して、プロンプトの状態を変更します。

これは何をやっているかというと、Djangoインストール時に設定した環境の呼び出しをしています。

例えばプログラムによってDjangoのバージョンを変えたい時など、OSにインストールしてしまうと都合が悪くなってしまう。そこで、OSに直接インストールせず、オンオフを切り替えられるサンドボックス環境的なものを作成してインストールしていたわけです。

その環境を呼び出してるんですね。

次に、サーバーが落ちてたら、もう一度起動してあげます。manage.pyが置いてある場所に移動し、

 python manage.py runserver 0.0.0.0:8080 

を実行してあげます

これでサーバーが起動しましたね。先ほどurls.pyで指定したURLにアクセスしてみると・・・

ちゃんとHTMLが表示されています！

 

・・・と今回はここまでにして、次回はこれに処理を加えていこうかと思います。

 

 

<追記>

最終章書きました！