Kensuke Kousaka's Blog

Notes for Developing Software, Service.

Flask触ってみた - 導入

Pythonの軽量Web Application FrameworkであるFlaskを触る機会があったので,ここに残しておく.

Flaskの環境構築

まずはFlaskの環境を構築する.OSはArchLinuxを想定し,Python 3系をベースとする.

Python環境の構築

まず,Pythonをインストールしていない場合は以下のコマンドを実行してインストールする.

$ yaourt -S python

次に,Pythonのパッケージ管理を手軽に行えるpipを以下のコマンドでインストールする.

$ curl -O https://bootstrap.pypa.io/get-pip.py
# python get-pip.py

Flaskをインストール

以下のコマンドで,pipを用いてFlaskをインストールする.

# pip install Flask

Flaskを触ってみる

まず,適当なディレクトリ(ここではHelloFlaskとする)の下に以下のような階層構造を作成する.

- HelloFlask/
  - FlaskApp/
      - app.py
      - static/
        - css/
          - sample.css
        - js/
          - sample.js
      - templates/
        - index.html

次に,index.htmlsample.jssample.cssを以下のように作成する.

index.html

<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="utf-8"></meta>
   <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
   <meta content="width=device-width, initial-scale=1" name="viewport"></meta>
   <title>HelloFlask</title>
   <!-- Bootstrap CDN -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

   <link rel="stylesheet" href="../static/css/sample.css">
 </head>
 <body>
   <div class="container-fluid">
     <div class="row">
       <div class="col-sm-12">
         <h1 class="text-center" id="hello">Hello Flask</h1>
         <button class="btn btn-default" id="button">Change text</button>
       </div>
     </div>
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   <script src="../static/js/sample.js"></script>
 </body>
</html>

sample.js

$(window).load(init());

function init() {
  $("#button").click(function() {
    $("#hello").text("Yeah!");
  });
}

sample.css

div.container-fluid {
  text-align: center;
}

#hello {
  background-color: #F8F4E6;
}

また,app.pyを次のように編集する.

app.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
  return render_template('index.html')


if __name__ == '__main__':
  app.run(host="127.0.0.1", port=8080)

編集できたら,app.pyのあるディレクトリでpython app.pyを実行する.Running on http://127.0.0.1:8080/ (Press CTRL+C to quit)といったような出力があれば,Flaskの起動に成功している.

あとは,Webブラウザから表示されているアドレスに接続すれば,Flaskがリクエストを受け取って先ほど作成したWebページを表示してくれる.

また,このシステムを外部に公開する場合は,app.pyapp.runで指定しているIPアドレスをサーバの外向けIPアドレス0.0.0.0に変えて,ファイアウォールがある場合は設定を変更して外部ネットワークからアクセスできるようにすればいい.

なお,作成したサンプルアプリはGitHubに公開している.