This Entry is an article posted by a trainer / tutor of G's ACADEMY TOKYO . We will spell out small questions and questions that came up in class, new technologies that trainers are interested in, etc. without any connection.
I'm Kuribayashi from G's Academy staff.
Recently, python is popular in G's Academy, so I wanted to touch it myself, so I tried it with a soft touch.
This time I would like to touch a framework called Flask.
Flask is a lightweight web application framework for the programming language Python. It is said that it is called "micro framework" because it keeps the functions provided as standard to the minimum.
Referenced link http://a2c.bitbucket.org/flask/quickstart.html#id2
I was attracted to the title of the smallest application example in the above link and tried it. Since I have only tried it on my own PC, it may not work even if I follow the procedure. In that case, please refer to the linked page.
Let's challenge immediately. (I only wrote the procedure I did on Mac. I'm sorry for windows ...)
The Python version is as follows. Python 3.5.2
Let's build the environment first.
Enter the following command in the terminal. (Maybe you need sudo in your head ...)
$ easy_install virtualenv
It seems that this is also fine. .. .. (Maybe you need sudo in your head ...)
$ pip3 install virtualenv
Create an environment called env in the project folder myproject.
$ mkdir myproject
$ cd myproject
$ virtualenv env
It is said that this environment will be activated to use this environment. Enter the following command.
$ . env/bin/activate
Install Flask.
$ easy_install Flask
Did you install it with this? ..
I will try hello world immediately.
First, create a hello.py file.
/myproject
/hello.py
Create a hello.py file and write the following code.
hello.py
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return "Hello World!That's right"
if __name__ == '__main__':
app.run(debug=True)
After entering the above, enter the following command in the location where the hello.py file is stored in the terminal.
$ python3 hello.py
* Running on http://127.0.0.1:5000/
It seems that the server is now up.
From the browser http://127.0.0.1:5000/ When I try to access
Oh! Hello World success! It's super easy to do with just this. Great.
This time I want to return an html file, so I will challenge it. Flask is searched from the template templates folder, so create a templates folder and create hello.html as a template.
/myproject
/hello.py
/templates
/hello.html
Write the following code in hello.html
templates/hello.html
<!doctype html>
<title>Hello from Flask</title>
{% if name %}
<h1>{{ name }}San! Hello World from the template!</h1>
{% else %}
<h1>Hello World from the template!</h1>
{% endif %}
Is this OK?
This time from the browser http://127.0.0.1:5000/hello When I try to access
Oh! It was displayed!
This time from the browser http://127.0.0.1:5000/hello/栗林 When I try to access
I was able to reflect the characters "Kuribayashi"!
I will also reflect css, javascript, and images.
First from css.
You can call / static on your application just by creating a folder named static in the package or next to the module. I tried the folder structure as follows.
/myproject
/hello.py
/templates
/hello.html
/static
/css
/style.css
Write the following code in the style.css file.
static/css/style.css
@charset 'utf-8';
body {
background: #0fa;
}
Let's change the background color appropriately.
Changed the hello.html file as follows to read the css file.
templates/hello.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/style.css">
<title>G's academy Trainer's Recipe</title>
</head>
<body>
<title>Hello from Flask</title>
{% if name %}
<h1>{{ name }}San! Hello World from the template!</h1>
{% else %}
<h1>Hello World from the template!</h1>
{% endif %}
</body>
</html>
From the browser http://127.0.0.1:5000/hello/栗林 When I try to access
Oh~! It is reflected.
Let's write javascript as well. Create a js folder in the static folder and store the main.js file.
/myproject
/hello.py
/templates
/hello.html
/static
/css
/style.css
/js
/main.js
Describe in the main.js file as follows.
static/js/main.js
(function(){
'use strict';
alert('It's an alert!');
})();
Added script tag for reading javascript to hello.html file.
templates/hello.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/style.css">
<title>G's academy Trainer's Recipe</title>
</head>
<body>
<title>Hello from Flask</title>
{% if name %}
<h1>{{ name }}San! Hello World from the template!</h1>
{% else %}
<h1>Hello World from the template!</h1>
{% endif %}
<!--Add the following-->
<script src="/static/js/main.js"></script>
</body>
</html>
When I reload the browser ...
Successful alert display!
I want to display the image as well, so let's try it.
Create an images folder in the static folder and store the pic01.png file of the sketch image you drew a while ago.
/myproject
/hello.py
/templates
/hello.html
/static
/css
/style.css
/js
/main.js
/images
/pic01.png
Modify the hello.html file as follows.
templates/hello.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/style.css">
<title>G's academy Trainer's Recipe</title>
</head>
<body>
<title>Hello from Flask</title>
{% if name %}
<h1>{{ name }}San! Hello World from the template!</h1>
{% else %}
<h1>Hello World from the template!</h1>
{% endif %}
<!--Add the following-->
<p>
<img src="/static/images/pic01.png " alt="pic01">
</p>
<script src="/static/js/main.js"></script>
</body>
</html>
When I reload the browser ...
Oh~! Great!
This time, I touched Flask, a Python framework, with a soft touch. It's pretty easy, so I felt it was wonderful. I've touched Ruby on Rails for a while, but compared to Rails, it's very simple, and it's good that there are few parts that feel like a black box.
In addition to Flask, Python has various frameworks such as Django, Pyramid, Bottle, Falcon, etc., so if you are interested, please try various frameworks.
This is the Trainer's Recipe by G's ACADEMY TOKYO staff Kuribayashi.
Recommended Posts