小さいアプリを作りたいんじゃ!!Webアプリ編(2)

前回、「小さいWebアプリを作ろう」と思い立って、とりあえずAPIを叩いて結果を見てみる、というのをやりました。
このままだとただのコマンドラインアプリなので、Webアプリにしていきたいと思います。

Webアプリを作るときはフレームワークというのを使います。使わなくてもできる人もいますが、私は使います。っていうか、使いましょう。
RubyならRails、PHPならLaravelやCakePHPとか有名なフレームワークがありますが、Pythonにもあります。Djangoといいます。他にもFlaskという有名なフレームワークもありますが、Djangoの方が開発の現場で使われるイメージがあるのでDjangoにしましょう。小さいアプリだとFlaskで十分という向きもあるかもしれません。が、Djangoにしましょう。使いたいので。

Djangoの使い方についてはここでは書きません。過去にDjangoの勉強にピッタリの本を紹介するエントリを書いた気もします。気が向いたら探してリンクを貼っておきますが、もしこれを見たときにまだ貼ってなかったら、気が向いてなかったということです。良かったら過去のエントリを探してみてください。

環境構築についてもここでは書きません。私はDockerを使ってDjangoで開発しやすい環境を整えるようにしています。たいしたことはやってませんが、私と同じ環境を構築してみたいという奇特な方がいたら、ツイッターか何かでご連絡ください。ココナラかどこかに出品を検討します。
Docker環境が無くても、Djangoでググれば環境構築の方法は見つかると思います。お使いのPCにPythonやDjangoを直接インストールしてもいいし、Vagrantとか使っても良いです。

ちなみに今回は「既存のDjangoアプリがすでにあって、そこにディレクトリを追加していく形で新しいWebアプリを作る」というのをやります。ゼロからDjangoアプリを作りたい場合はあまり参考にならないかもしれませんのであしからず。
なぜ最初から作る方法を書かないのかというと、この一連のブログは次回以降自分が小さいアプリを作りたいと思ったときのメモ代わりにしようとしているからです。なので自分がすでに出来ているところは飛ばします。
既存のDjangoアプリが無い人でも、ググってインストールしてstartprojectというコマンドを打てば以降はだいたい同じ感じでいけるような気がします。いけなかったらごめんなさい。

さて、そんなこんなでアプリを作る準備をしていきましょう。
今回はレシピ関係のアプリでした。
私は「SeekGeeks」という個人開発プロダクトを持っているので、それに合わせて「SeekRecipe」というサイト名にすることにしましょう。…はいそこ、安直とか言わない。ワンパターンもダメ。傷付くよ?
python manage.py startapp seek_recipe
これで、既存のDjango環境に今回のアプリ用のディレクトリが作成されます。

さて、ここからは既存のDjangoアプリから必要な部品を取ってきます。
まずはurls.pyを既存アプリからseek_recipeディレクトリ内にコピーします。
今回は表示だけできれば良いので、中身はシンプルに
urlpatterns = [
    path('', TemplateView.as_view(template_name='seek_recipe/home.html'), name='home'),
]
とでもしておきましょう。

で、 seek_recipe/templates/seek_recipe/home.html というのを作ります。

中身はとりあえず何でもいいです。
なので、こうしました。
<p>test</p>
うん、シンプル。

ここまで出来たら、今回作ったディレクトリじゃなくて、プロジェクトの方のurls.pyに今回のアプリの分を加えます。
urlpatterns = [
    # 他は省略
    path('seekrecipe/', include('seek_recipe.urls')),  # これを追加
]
あと同じくsettings.pyに、
INSTALLED_APPS = [
    # 他は省略
    'seek_recipe',  # これを追加
]
と書きます。

これで、既存のDjangoアプリに新しく今回作っていくアプリの場所を確保できました。
ブラウザで見てみましょう。
http://localhost:8000/seekrecipe/
URLは作った人の環境次第なので、それに合わせてアクセスしてみてください。

面白いぐらいわかりにくいですが、「test」と画面左上に小さく表示されています。

ひとまずこれでWebアプリを作っていく準備ができたので、次回以降は前回作ったAPIを叩くプログラムをここに埋め込んでいこうと思います。