detailに関しては、空でもOKにしました。いうのも、titleだけ見ればどんなタスクか分かると思うので。補助的な機能ということにしておきます。ここまで書けたら、いま定義したデータベースを作成していきます。VSCodeでターミナルを開いて、Pythonの対話型シェルを起動しましょう。VSCodeでターミナルを開くには、上のタブからターミナルを選択してあげます。ターミナルを開いたら、pythonと入力して対話型シェルを起動してあげます。対話型シェルになったら、以下のコマンドを入力しましょう。db.create_all()※>>>は対話型シェルを表しているだけで、実際に入力する必要はありません。ここまでのところをキャプチャしたのが以下です。́)!そうしたら、もうターミナルは使わないので閉じてしまいましょう。exit()これでデータベースの準備ができました。前のステップでは、タスクを保存するためのデータベースを準備しました。今回は、タスクを追加できるようにするために、Todoの作成ページを作っていきます。新しくcreate.htmlを作成して、以下のコードを書いていきましょう。%}これは純粋にHTMLのコードになります。Pythonとは少し離れた内容になるので、細かい部分は割愛しますが、これで必要な項目を入力するフォームが完成します。各値を入力してsubmitすると、そのデータをトップページにPOSTするようになっています。フォームの見た目は作成できましたが、まだこのページにアクセスできません。タスクを作成するページにアクセスするには、Python側で「ルーティング」する必要があります。app.pyに戻って、以下のコードを追加してあげましょう。render_template('create.html')これはトップページへのアクセスを可能にしたときと同じコードですね。今回であれば、https://〇〇.com/createにアクセスすれば作成ページを開けるようになります。手元のパソコンで開発している間は、localhost:5000/createですね。いうわけで、サーバーを起動してタスク作成ページにアクセスしてみましょう。このように、タスク作成に必要な内容を入力できるページに遷移しました。試しに、フォームにタスクを書いてみましょう。この状態でCreateをクリックしてみます。すると、以下のようなエラー画面になるはず。このような画面になるのかといえば、それはフォームのアクセス先の設定が原因です。いうのも、フォーム送信の宛先はaction="/"でトップページになっていますが、そのトップページではPOSTを受けられる状態になっていません。言い換えると、GETしか受け取れない状態になっています。そこで、トップページにルーティングしている関数のデコレータ部分を、少し変更してあげます。上記のように書き換えることで、トップページでPOSTメソッドを受け入れる準備ができました。一度/createにアクセスして、タスクを入力して送信してみましょう。すると、元の画面に戻ってこれるはず。現状を整理すると、以下のとおりです。/createページにアクセスして、タスクを作成できるようになったタスク作成後は、トップページ(localhost:5000)に繊維できるようになったでも、入力したタスクを保存、および表示はできていないこのような状況ですよね。あとはトップページのコードを変更してあげて、「1データベースにタスクを保存2保存されているタスクを表示する」を実装すれば良さそうです。前のステップで、以下の内容を実装すれば良いことが分かりました。1データベースにタスクを保存2保存されているタスクを表示するこれをトップページで実装したいので、以下のコードを編集していけばOKですね。render_template('index.html')追加のインポートまずは、追加で以下をimportしましょう。追加で2つimportするこれらが必要になる理由ですが、これから追加したい内容は以下でした。1データベースにタスクを保存2保存されているタスクを表示するそして、これらの実装は、リクエストメソッドによって対応が変わってきますよね。具体的に言うと、以下のような挙動になるはずです。保存されているタスクを表示するこのように、リクエスト方法に応じて実装内容を変更していくために、requestが必要になります。redirectは、POSTで受け取った内容をデータベースに反映したあとに、もう一度トップページへアクセスするために使います。コードの編集それでは、タスクの保存と表示をするコードを書いていきましょう。結論、以下のように編集してあげます。redirect('/')GETとPOSTに分解して、考えてみたいと思います。posts=posts)GETの部分でやっていることは、「データベースからすべての投稿を取り出し(Post.query.all())、それをトップページに渡してあげる」です。「トップページに投稿をわたすってどういうこと...?」と思われるかもですが、これからHTMLを編集していけば分かるはずです。́)!次にPOSTです。redirect('/')もしリクエスト方法がPOSTなら、データベースに投稿を保存してあげます。上記でやっていることは、主に3つです。データベースに投稿を保存する上記がデータベースへ投稿するまでのステップです。データベースへ保存するときは、まずaddで内容を追加して、実際に反映するためにcommitします。途中でdueをキャスト(型変換)している部分があります。これは、データベースの定義で日付型を指定していたけど、フォームから受け取る値が文字列だからです。よって、Python上で文字列→日付型にキャストしています。これでPython側でやることは完了したので、あとは投稿内容を反映するためにHTMLを変更していきます。index.htmlを以下のように変更しましょう。%}このように書くことで、投稿内容を表示できるようになります。ループしたpostに入っているタイトルをpost.title、日付をpost.due.date()のように書けば中身を取り出せます。}}のように書きます。波カッコが2つ付くことに注意しましょう。これで、サーバーを立ち上げて、/createにアクセスして、タスクを作成したいと思います。Createを押してみます。このように、今回はタスクを作成すると、トップページに遷移しつつ投稿内容が表示されるようになりました。タスクを追加すれば、ちゃんと2つとも表示されるようになります。これでタスクを作成と表示ができるようになりました!これだけでも、だいぶアプリケーションらしくなってきましたね。投稿の作成(Create)に加えて、あとは以下の実装を加えたいと思います。投稿の詳細を確認(Read)する投稿を編集(Update)する投稿を削除(Delete)する見た目を整える現状だと、終わったタスクを削除したり、または変更を加えたりする機能がありません。トップページではタイトルしか見えていないので、タスクの詳細を見れるページを作成していきましょう。タスクの詳細を表示するページの作成タスクの詳細を表示するには、PythonとHTMLの両方を編集する必要があります。Python側からコードを追加していきましょう。Pythonファイル(app.py)の編集タスクの詳細を表示するためにPythonでやることは、以下のコード追加だけです。post=post)全体を確認しておくと、以下のようになっています。詳細ページにアクセスするためには、「どの投稿の詳細ページを開くのか」を指定する必要があります。そのため、URLは/detailではなく、/detail/<int:id>と指定しましょう。「え、idってなんですか...?」と思われるかもしれないですが、これはテーブルを作成するときに定義しました。作成したフォームにはidを指定しませんでしたが、データベースにタスクを登録するとき、自動的に番号は割り振られています。Post.query.get(id)を使うことで、該当するidの投稿内容を取得し、そのタスクをdetail.htmlに渡しているということですね。Pythonで処理する部分は、たったこれだけです。あとはHTML側に変更を加えていきましょう。HTMLファイルの編集(index.htmlとdetail.html)まずはdetail.htmlのファイル作成をしていきます。ファイルの作成ができたら、以下のコードを書いてあげましょう。loopを使って投稿内容を表示していましたが、今回はpostだけです。Pythonから渡される投稿が、常に1つだからです。これで詳細を表示するページの作成もできました。あとは、index.htmlも少し編集してあげましょう。「なぜindex.htmlの編集をするんですか...?」と聞かれるかもです。それは、各投稿ごとに詳細ページへのリンクを設置したいからです。以下のように、詳細ページへ飛べるURLを設置してあげましょう。%}追加したのは、<a>タグの部分だけです。postに含まれているidをURL部分に書いてあげることで、それぞれの投稿に対応する詳細ページへアクセスできるようになります。}}のように波カッコを2つ付けます。これで準備が整いました。コードを保存して、まずはトップページへアクセスしましょう。すると、上のように詳細ページへのリンクが作成されています。実際にアクセスしてみましょう。こちらのように、最初に作成したタスクはlocalhost:5000/detail/1のURLになってアクセスできるようになりました。一つ作成しておいたタスクがあるので、そちらにもアクセスしてみましょう。こちらのタスクは、localhost:5000/detail/2でアクセスできました。タスクによってidが異なっていて、別々の詳細ページを表示できていることが分かりますね。あとはTodoアプリが無法地帯にならないように、編集する機能と削除する機能を付け足していきましょう。タスクを削除するタスクを追加し放題の無法地帯を避けるべく、タスクを削除する機能を付けていきましょう。タスクの削除については、新しいページを追加せずに、トップページから行えるようにすれば良いですね。app.pyに、以下のコードを追加していきましょう。redirect('/')タスクを追加するときは、commit()する前にaddをおこなっていました。今回はタスクを削除していきますので、「delete()を使ってあげれば良い」ということは、直感的にも分かりますね。データベースの処理が終わったら、トップページへリダイレクトしてあげます。app.pyのコード全体で確認すると、以下のようになりますね。app.run(debug=True)﻿あとはトップの一覧ページで、投稿を削除するためのURLを追加すればOKです。これはdetailとほぼ同じで大丈夫ですね。%}このようにdeleteを追加してあげましょう。コードを保存したら、トップページを確認してあげます。すると、上の画像のように削除ボタンが追加されました。試しに削除するリンクをクリックしてみましょう。僕は「スタバに行く」タスクを削除してみました。́)!笑というわけで、削除する機能の実装も完了しました。あとは、投稿の変更(Update)だけですね。タスクを編集(アップデート)する間違えてタスクを作成してしまったり、あとからメモとして詳細に書き加えたいときがあるかと思います。作成したタスクの内容を変更できるようにしましょう。app.pyに以下のコードを追加してあげます。redirect('/')編集するページは、/update/◯にアクセスがあったとき、以下のような挙動になることが望ましいです。変更内容を更新するなので、Pythonファイルでも、GETとPOSTで挙動を変えてあります。POSTするとき、今まではaddやdeleteを使っていましたが、今回は投稿内容を編集するだけです。よって、編集した内容をフォームから受け取ったら、そのままcommit()してあげます。あとはupdate.htmlを作成していきましょう。フォームを実装するので、コードはcreate.htmlとほとんど変わりません。%}create.htmlとの違いは、actionで飛ばすURLですね。このページから投稿を編集したとき、以下のような動きになります。update関数のPOSTメソッド側の処理(=更新)が行われるindex.htmlに、投稿を編集するためのリンクを設置して、実際にタスクをアップデートしてみましょう。index.htmlに追加する中身は、detailとdelete同様です。%}これでコードを保存して、ブラウザにアクセスします。すると新しくupdateボタンが作成されました。クリックすると、以下のように、元の投稿内容がフォーム内に入っています。あとはこの中身を編集してみましょう。僕は簡単のため「プログラミング学習をする2」に変更してみました。トップページに戻るようredirectしておいたので、編集した内容が反映された状態で、タスク一覧が見れるかと思います。変更内容が反映された形で、タスクを見れるようになりましたね。これで、Todoアプリの基本的な部分が完成しました。あとは細かい調整をしてあげて、フロント部分を整えていきましょう。手打ちで/createを検索しないとタスクを作成できません。これだと不便極まりないので、トップページからタスクを作成する画面に遷移できるようにしましょう。現状タスクの表示方法が”作成日順”になっています。タスクは”締切が近い順”にした方が使いやすいですよね。これら2点の編集を付け加えていきます。使っていた<a>タグを少し編集するだけでOKです。loopの前に、作成ボタンを設置しましょう。%}これでOKですね。あとは、コードを保存してブラウザを確認してみます。こんな感じで、タスクを作成するボタンが設置できています。アクセスできるか確認しましょう。作成ボタンをクリックします。タスク作成する画面に遷移しました。これで、前よりも便利なTodoアプリになりましたね。タスクを締切が近い順に並べる少しタスクを追加してみました。タスクの期限を見ていただきたいのですが、現状だと並び順がバラバラで非常に使いにくいです。これを締切が近い順に変更していきましょう。今回編集するコードは、Python側になります。これも編集はカンタンで、以下の1行だけコードを変更します。上記のように変更することで、締切が近い順に変更できました。実際にコードを保存して、アプリのトップページを見てみましょう。このように、タスクの締切が近い順に変更できました。BootStrapを使って、見た目を整える現状のTodoアプリだと、まったく持って見た目がイケていません。笑ただ、自分で一からCSSを当てていくのも面倒ですので、今回はBootStrapを使ってサクッといい感じのアプリを作っていきましょう。BootStrapのダウンロードまずはBootStrapの公式ページから、必要なファイルをダウンロードしてきます。世界で最も人気のあるフロントエンドのコンポーネントライブラリトップページから、ダウンロードボタンを押して、次の画面に進みます。今回使うのは、コンパイル済みのファイルですので、以下の赤枠をクリックしてファイルをダウンロードでOKです。すると、以下のようなzipファイルをダウンロードできます。こちらを解凍しましょう。解凍したフォルダの中身を見てみると、cssとjsが入っています。今回はCSSだけ当てていくので、jsは不要です。中身の確認ができたところで、自分たちが作っていたFlaskアプリのフォルダに戻りましょう。現状は上の画像のようになっていますので、ここでstaticフォルダを作成します。作成できたら、先ほどダウンロードしてきたBootStrapのcssだけFlaskアプリ側に移しておきましょう。これでBootStrapのダウンロードが完了しました。CSSを使う準備FlaskでCSSを使うには、Python側とHTML側で少し準備が必要です。先にPython側から追加部分を書いていきましょう。いっても、やることはシンプルで、importするものを増やすだけです。url_forを追加するurl_forはHTMLファイルでCSSを読み込むときに使います。いうわけで、あとはHTMLの編集ですが、こちらは通常のCSS読み込みとあまり変わりません。base.htmlの<head>部分に、以下を追記しましょう。}}">これでBootStrapのCSSを使えるようになります。変更したコードを保存して、トップページを確認してみましょう。それに対してこちらが変更後。このように、BootStrapを読み込めていると、見た目が少し変わった状態になります。BootStrapは、すでに準備されているclassを指定することで使用できます。_)m共通部分(base.html)の編集まずは、どのページでも共通で使う部分をbase.htmlに書いていきます。今回はナビゲーションだけ全てのページで共通にしたいので、以下のようなコードに変更しましょう。変更したコードを保存して、ブラウザを確認してみましょう。画面上部分に、ナビゲーションが追加されていますね。TASKをクリックして画面を遷移してみても、ナビゲーションが付いていることが分かります。次はトップページの編集をしていきます。トップページでは、単純にCSSを当てるだけでなく、「タスクの期限が切れていたら、注意表示する」機能を付け加えたいと思います。先にHTMLだけ書いておくと、以下のとおりです。%}上記のコードで使っているBootStrapは、以下の3つですね。日本語リファレンス前まではfor文だけ使っていましたが、今回はif文を使っています。タスクの期限が切れていたら、「期限切れです!」というアラートを出力するようにしました。「あれ、if文に入っているtodayって何だろう...」と疑問に思ったかもしれません。それは今からPythonのコードを編集して追加していきます。トップページを表示するときにHTML側に渡していたのはpostsだけでしたが、新しくtodayも渡してあげましょう。こちらに変更するまた、dateを使えるようにするために、importも追加してあげます。こちらに変更するこれで変更が完了しました。コードを保存して、昨日までの日付で、タスクを作成してみてください。僕の画面では、このようになりました。黄色い注意書きで、期限が切れていることを表示できていますね。次はタスクを作成する画面の編集をしましょう。使うコードは、以下のとおりです。doを入力してください。日本語リファレンスBootStrapページに載っているコードを、ほとんどコピペして作っています。笑タスクを編集するだけではなく、戻れるボタンも一緒に付け加えてみました。コードを保存したら、タスクを作成する画面を見てみましょう。すると、上のような画面になります。いい感じの見た目になりましたね!(BootStrapのおかげで!)タスク編集(update.html)画面の編集タスクを編集する画面は、作成ページとほとんど変わりません。コードを保存して、見た目を確認してみましょう。このように、タスク編集画面もキレイになりましたね!(BootStrapのおかげで!)詳細画面(detail.html)の編集タスクの詳細を確認する画面は、以下のコードで作成しました。%}投稿の詳細を確認できるのはもちろん、そのまま編集ページに遷移できるようにボタンを追加してみました。コードを保存して、ブラウザを確認してみましょう。詳細確認ページもキレイな見た目になりましたね!(BootStrapのおかげで!)これで見た目の変更も完了しました。アプリをデプロイするあとは、作成したアプリを公開するだけです。アプリの公開は、Herokuを使っていきます。Heroku公式ページアプリ公開に必要なものは、以下のとおりです。CLIProcfilerequirements.txt順を追って、準備を進めていきましょう。CLIをダウンロード&インストールします。画面に従って、ポチポチするだけで大丈夫です。́)!requirements.txtの作成アプリを公開するには、requirements.txtを準備する必要があります。アプリ公開に必要なgunicornをインストールしていきましょう。gunicornインストールが完了したら、いま入っているライブラリ一覧を確認します。freezeを入力していきましょう。いまインストールしたgunicornも一緒に入っていますね。したら、これをrequirements.txtに書き起こします。requirements.txtこれで、アプリを公開するときに必要なライブラリ一覧を作成できました。Procfileの作成こちらはHerokuにデプロイするとき、必ず必要になります。以下をコピペして、Procfileを作成しましょう。--log-file=-これだけでOKです!gitリポジトリの準備まずはapp.pyでデバッグモードにしていたので、これを外します。こちらに変更そうしたら必要なファイルが揃ったので、gitリポジトリを準備していきます。VSCodeで以下のコードを実行していきましょう。commit"※Gitについては、今回のスコープ外とさせてください。Herokuにログインして、サーバーの作成VSCodeのターミナルで、以下のコマンドを入力してHerokuにログインします。login入力すると、ブラウザが立ち上がって以下の画面に遷移します。Inをクリックして、ログインを完了させましょう。以下の画面になれば成功です。次にVSCodeのターミナルに戻って、以下のコマンドを実行します。<アプリ名>アプリ名の部分は、そのままURLに使われます。ゆえに他のアプリと重複していると、その名前は使えませんので、ユニークな名前にしてください!僕はflask-todo-app-techdiaryにしました。成功すると、以下の画面になります。アプリを公開するあとは、アプリを公開するだけです。以下のコマンドを実行して、リモートリポジトリの設定が完了しているか確認してみましょう。-v以下のようになっていれば、アプリを公開する準備が整っています。あとはアプリの公開だけです。下記のコマンドを実行しましょう。́)!pushが完了すると、以下のような画面になるかと思います。openをターミナルで実行するか、以下のURLにアクセスしてアプリが公開できているか確認しましょう。https://<自分のアプリ名>.herokuapp.com/僕の場合は、なんのエラーもなくアプリを公開することができました!おそらく、はじめてアプリを公開するときは、上手くいかないことがあると思います。́)!いきなり上手くいくことなんて、滅多にありませんから!笑まとめというわけで、Flaskを使ったTodoアプリの開発方法を紹介しました。このチュートリアルで学んだことを活かして、自分オリジナルのアプリを開発してみてください。本格的にWebアプリ開発を学ぶなら、FlaskよりDjangoを学びましょう。寄稿、記事の掲載依頼はお問い合わせページからお願い致します。当サイトで使用する「仮想通貨」とは、「暗号資産」のことを指します。当サイトで使用する「仮想通貨」とは「暗号資産」のことを指します。当サイトで掲載している情報に基づいて被ったいかなる損害についても、運営者及び情報提供者は一切の責任を負いません。保証されたものではありません。