• Web

新人がPythonを使ったWebアプリを開発してみた

ごあいさつ

お疲れ様です。2018年度入社、R&Dセンター技術開発部AI技術課の鈴木です。
前回「[初心者向け]深層学習の勉強法」という記事を書きましたが、今回はWebアプリにPythonを利用した際の体験記を書きます。

Pythonを使って何かをしてみたいという方のお役に立てれば幸いです。 なお、私のアプリの仕組みと非常に似ているサンプルがありましたので、そちらも是非参考にしてください。

(参考サイト: React + Flask + Python + MongoDBで作るRSSリーダーwebsite_normal

記事の対象者

この記事の対象者は、以下に当てはまる方としております。

  1. Pythonを一通り学んでみたけど、何か動くものを作ってみたい
  2. Pythonを使ったWebアプリの開発に興味がある人

アプリの説明

アプリの説明の前に、開発に至った経緯を説明します。
所属する部署ではAI技術に関する業務がメインとなっているため、AIの開発でよく利用されるPythonの開発スキル と 不足しているシステム開発の経験を身に付けるために、OJT研修を通じてアプリ開発を行いました。実際に取り組む題材を探している際に、「テクのこ」などのイベントで使用される貸出用PCの予約がExcelで管理されていることを知りました。ExcelだとExcelがインストールされているPCでしかアクセスできないため、ブラウザを使う方が利用シーンが増えると考え、Webアプリでの開発を選択しました。

localhost_3000_ (5)アプリのメイン画面

 

利用者は、予約するPCの期間を画面のカレンダーで確認し、カレンダーをダブルクリックすると入力フォームが表示されます。利用者はカレンダーを横にスクロールすることで簡単に来月や再来月の予約を見れます。

この入力フォームに期間や目的、場所などの必要事項を記入した後、予約ボタンを押して予約が完了します。今回は開始期間を「2018/11/19」、終了期間を「2018/11/23」に設定し、タイトルを「技術の日」としました。

localhost_3000_

完了した予約はカレンダーに反映されます。反映された予約をクリックすると、予約の修正、削除が行えます。

もう少し、このアプリの仕組みをこのWebアプリの予約データの流れ図を用いて説明しますと、画面上で登録された予約はDBに保管され、画面上に予約を反映する際に、保管された予約はDBから画面へ渡されます。さらに詳しく説明しますと、画面側から受け取った要求に応じて、DBへデータの登録や検索、更新、削除といった処理や、要求に対するエラー処理などを行います。今回は、この処理のサーバを立てる為にPythonのFlaskというフレームワークを使っています。次項では、このFlaskなどのライブラリの特徴について説明します。


予約データの流れ図

アプリに使用したもの

上の図に示した用語に関して説明します。

Flask

Flaskとは、Pythonの軽量なWebフレームワークです。Webフレームワークを簡単に説明しますと、Webアプリ開発の効率を上げるために便利な機能がたくさん詰まったツールと考えて良いでしょう。Flaskの他にもWebフレームワークはありますが、Flaskは必要最小限の機能に絞っているのが特徴です。ですので学習コストは低いといえるでしょう。新人の私でも簡単に習得できました。

React

ReactはFacebookがOSSとして公開しているUIのパーツを作るためのJavaScriptのライブラリです。大きな特徴としてVirtual DOM(仮想DOM)と呼ばれるレンダリング機構が備わっていることです。このVirtual DOMとは、メモリ内でDOMを管理し、必要最低限の部分だけの差分更新を行う機能のことで、これにより画面更新が非常に高速になります。さらに、このアプリに使用したカレンダーライブラリにはreact-calendar-timelineを使用しています。

MongoDB

MongoDBは、オープンソースソフトウェアのドキュメント指向データベースです。これは、フィールドを指定したクエリやインデクス生成も簡単な指定によって行えるため、データの追加・更新・削除を高速に行うことができ、また自身の構造やデータを型に合った自然な形で格納することができるため、扱うデータの特性によっては、容易かつ迅速に開発を行えることが特徴です。

新人鈴木の困難話

ここでは、開発中に遭遇した困難をお話しします。

ヒアリングの十分でないまま開発に移行してしまった

このアプリは当初利用している一部の方のヒアリングの内容を元に、別のReactのライブラリを使用して開発していたのですが、あるタイミングで進捗を報告したときに、利用する他の方やこの案を提案してくださった方から追加の機能の要望があり、その結果、使用するライブラリの変更が必要になり、プロジェクトが遅れてしまいました。今後このようなことがないように、自分が納得するまで多くの利用者からヒアリングを行い、また事前に訊く内容を整理してヒアリングの時間もできるだけ短く抑えられるようにもしたいと思います。

英語に慣れなければならない

今回使用したreact-calendar-timelineライブラリは、英語の記事しかありませんでした。これを利用したサンプルも公式サイトにしか存在しなかったため、英語を一つ一つ訳しながら、自力で使い方を覚えていきました。他にも、エラーの対応に英語のQ&Aサイトも使ったことがありまして、英語にもっと触れなければならないと思いました。

クロスドメイン問題

アプリを開発する際に複数のサーバを立てましたが、そのせいでクロスドメイン問題にひっかかってしまいました。クロスドメイン問題とは、とあるサーバで既に読み込んだWebページから、異なるドメインのサーバーに HttpRequestを用いてデータアクセスを行なうと、ブラウザーのセキリュティーエラーが発生し通信を行なえないという問題なのですが、今回はFlask-CORS(Cross Origin Resource Sharing) をインストールして、解決しました。

予約の日程が重複しているか確認する処理

新しく登録する予約の日程が、すでに登録されている予約の日程と重複しているか確認する処理にも苦労しました。DBの予約レコードのフィールドは、「’ID’、’開始日’、’終了日’、’利用PC’、(他にもありますがここでは省略)」で構成されているのですが、この場合、条件式をどうすれば良いのか言いますと、それは

「登録されている予約の終了日≧新しい予約の開始日かつ登録されている予約の開始日日≦新しい予約の終了日かつ登録されている予約の利用PC=新しい利用PCでないならば」

です。これで日程が重複していない為、予約を登録できます。

型変換

このアプリの画面側では予約のデータをJSONで扱うのですが、メインロジックのサーバーが、画面側から予約のデータを受け取るときとDBからデータを取り出すときは、型がJSONではないのでJSONに変換しなくてはなりません。
そのサンプルとして、画面側から受け取った予約のidをDBで検索し、結果を画面側に渡すソースコードをご紹介いたします。

画面側からデータを受けとる時と画面側にデータを渡す処理

# 必要なライブラリをインポート(pipなどでインストールする)
from flask import Flask, request, jsonify
from pymongo import MongoClient # PythonでMongoDBに接続するライブラリのpymongo
 
client = MongoClient('localhost:27017') # MongoDBに接続
db = client.mg_database # データベースを取得
co_res = db.res_collection # コレクションを取得
 
# Flaskを使ってサーバーを立てる。画面側からリクエストがくると実行される
app = Flask(__name__)
@app.route('/',  methods=['POST'])
def edit():
 
    edit_id = request.get_json() # 画面側から受け取った予約データをJSONに変換
    data = post_data(edit_id)
    return jsonify(data[0]) #JSONに変換して画面側に渡す
 
# idの検索
def edit_data(edit_data):
    #idがDBに登録されているか検索
    found = db.res_collection.find({"id": edit_data["id"]}, {"_id": 0}) 
    #返ってくるデータがcursor型なので、list型で受け取る。こうするとJSONで渡すことができる
    return list(found)

おわりに

アプリの開発を通して、たくさんの困難に遭遇しましたが、言い換えると、それだけたくさんの「気づき」を得ることができました。ここで得た大切な「気づき」を実際の業務に活かして参ります。
将来、またPythonを使って別なものを開発をする機会がございましたら、そのことを執筆しようと考えております。
最後までお付き合いくださり、ありがとうございました。
computer05_businessman

PAGE TOP