Visual StudioとFlaskで作る書籍管理アプリ：概要

この記事ではPythonの軽量なWebフレームワークであるFlaskを使って、書籍管理アプリを実装する、その概要を説明します。
Visual Studioが用意してくれたFlaskプロジェクトを使用するため、比較的簡単に実装が可能かと思います。

書籍管理アプリは「Hello World」と画面に表示させるのに次いで、初学者が最初に作るアプリとして定番のものだと思います。
とは言え、データベースとCRUD処理やログイン機能の実装など、それなりに複雑な処理を実装することにはなります。
そこで、まずはこの記事で全体像をざっと説明し、そのあとで他の記事で詳細を解説するという構成としました。

この記事はVisual StudioとFlaskでアプリを作ってみたという一連の記事の中の1つです。
詳しくは以下の記事も参照してください
・Visual Studioで作ってみたFlaskアプリ

この記事ではWebアプリの開発を何も知らない人を対象とします。といっても、この記事の著者もWebアプリ開発に明るくありません。自分の勉強の意味も込めて書きました。
誤りが含まれるかもしれませんが、ご容赦ください。何かあれば、ご指摘いただけますと幸いです。

スポンサードリンク

目次

1. 一連の記事における説明の進め方
2. 書籍管理アプリの概要
3. Flaskプロジェクトの作成と文字コードの修正
4. フォルダ構成

 

1．一連の記事における説明の進め方

今回のFlaskアプリ開発関連の記事では、常に「外枠を説明したのちに詳細に移る」という一貫した方針で進めていきます。
そのため、プログラミングに詳しい方からするとかなり冗長に感じるかと思いますがご容赦ください。

 

2．書籍管理アプリの概要

書籍管理アプリは、Flask公式のチュートリアルの「ブログ投稿アプリ」を多分に参考にして作成しました。

今回作成する書籍管理アプリは、以下の機能を有します。

• ログイン機能
  • ログイン機能：ユーザー名とパスワードを入力してログイン(どちらかが間違っていたらエラー)
  • ログアウト機能
  • 新規ユーザー追加機能：ユーザー名とパスワードを登録。ユーザー名は重複無し。パスワードはハッシュ化
• 書籍管理機能
  • 書籍閲覧機能：ユーザーに紐づいた書籍の一覧を表示。書籍は重複の無いIDを持つ。また、書籍名(必須)、著者、出版社の情報を持つ。
  • 書籍追加機能：書籍名(必須)、著者、出版社を設定して追加する
  • 書籍編集機能：書籍名(必須)、著者、出版社を編集可能
  • 書籍削除機能：削除の前に確認をする

 
画面構成は以下の通りとします。

• Home画面：ログイン不要で入れる、アプリの入り口
• ログイン画面
• ユーザーの新規追加画面
• 書籍一覧画面：ユーザーごとに管理されている書籍の一覧を表示する画面。ログイン必須。未ログインならばログイン画面へ遷移
• 書籍追加画面：ログイン必須
• 書籍編集画面：ログイン必須
• 書籍削除画面：書籍削除の確認を行う画面。ログイン必須

ユーザー情報や書籍情報を管理するために、データベースを使います。今回はSQLiteを使うことにします。
SQLiteは無料で使えて、導入も簡単なデータベースです。

今回の書籍管理アプリを作ることで、単純なログイン機能と、データベースを使ったCRUD処理を学ぶことができます。
CRUD処理とは、Create(追加)、Read(参照)、Update(編集)、Delete(削除)の頭文字をとったものです。

スポンサードリンク

 

3．Flaskプロジェクトの作成と文字コードの修正

Flaskプロジェクトの作り方については『Visual StudioのFlaskプロジェクトの活用』も参照してください。

Visual Studioを起動したのち、『ファイル』→『新規作成』→『プロジェクト』とすると『新しいプロジェクト』画面が出てきます。
ここで『Flask Webプロジェクト』を選択します。プロジェクト名は「flask_book_management_1」としておきます。これで『OK』とすればプロジェクトが作成されます。

『Visual StudioのFlaskプロジェクトの活用』で説明したように、この時点でもうすでに動作可能なアプリケーションが出来上がっている状態です。キーボードの「F5」キーを押すと、ブラウザが立ち上がって「Flask」とでかでかと書かれた画面が出てくるはずです。

あとはこれを改造していくのですが、少し注意事項があります。それはHTMLファイルの文字コードです。
なぜかデフォルトがSJISになっているようなので、これをUTF-8に変更します。

ソリューションエクスプローラーで『index.html』を選択したうえで、メニューの『ファイル』→『名前を付けてindex.htmlを保存(A)』としてファイル保存ダイアログを開きます。
右下の『上書き保存(S)▼』の▼をクリックして『エンコード付きで保存』をクリックします。確認画面が出てきたら『はい』を選択します。
これでエンコードを『UTF-8』に変更して保存をします。
『layout.html』も同様にします。他のHTMLファイル(contact.htmlなど)は後で削除するので、修正しなくていいです。

 

4．フォルダ構成

完成版のフォルダ構成は以下のようになっています。

■CSSやJavascript
staticフォルダは、Visual StudioのFlaskプロジェクトが用意してくれたものをそのまま使います。一切の変更をしません。これは単に私が怠惰であるからです。デザインにこだわりたい方は修正が必要です。

■HTML(テンプレート)
templatesフォルダの中に、さらにauthとbookというフォルダを追加して、各々の画面を作っていきます。機能ごとにフォルダを分けた方が見通しが良くなるように思います。
全体のレイアウトをlayout.htmlで指定します。layout.htmlで、メニューバー等も作っておきます。これは用意されているのをなるべく変更せずにそのまま使います。

■Pythonファイル
アプリを起動させる『runserver.py』はほとんど修正なしにそのまま使います。よって、プロジェクトのスタートアップファイルの変更は不要です。
『__init__.py』と『view.py』以外は新たに追加します。

view.pyはHome画面を表示させることだけに使用します。なるべく機能ごとにファイルを分けるようにしました。

auth.pyでログイン機能を実装します。
book.pyで書籍管理機能を実装します。

db.pyは、データベースへの接続と切断を行う機能のみを実装します。

ファイルをこまごまと分割したので、『__init__.py』でインポートするものが増えることになります。詳細は別の記事で説明します。

■intanceフォルダ
instanceフォルダは、一時的に使うファイルを保存するフォルダです。この中身はGitによるバージョン管理からは外しており、GitHubからも参照できません。
データベースファイルと、テーブルを作るためのSQLファイルを格納しています。
実際にアプリをデプロイする際は、データベースの情報など「他の人に見られたくない設定情報」をこのフォルダに格納するようです。

 

次は『SQLiteとDB Browser for SQLiteを使ってデータベースを構築する』に進みます。

 

 

参考文献

Welcome to Flask
→Flaskの全体像をつかむことができる公式サイトです。ここのチュートリアルを参考にしました。

独学プログラマー Python言語の基本から仕事のやり方まで   Pythonのことがさっぱりわからないという方は、この本から入ると良いかと思います。あまり分厚くない本ですので、読み切ることは難しくないはずです。 Pythonの基本文法やコードを書くコツなどが載っています。

入門Python3   こちらは分厚い本ですが、その分細かく載っています。Flaskの解説も少しあります。辞書的な使い方をしても良い本かと思います。

スポンサードリンク

 
更新履歴
2018年5月26日：新規作成