準備

　FlaskやPythonモジュールの一つなので，例えばpipコマンドなどでインストールすることができます。

hellow.pyを作る

　PythonインタプリタとFlaskモジュールのインストールが完了した環境ができたら，次の要領でhellow.pyを作成します。ソースコードは下記のようになります。

1. PythonとFlaskが動作する環境でhellow_flaskフォルダを作り，次の手順で，これをカレントフォルダとするPower Shellウィンドウを開く。
   1. ファイルマネージャでhellow_flaskフォルダを作成
   2. hellow_flaskフォルダをShift＋右クリックし，「PowerShellウィンドウでここを開く」を選択
   3. 下記のようにプロンプトにカレントフォルダが出るのでhellow_flaskであることを確認する

      

2. hellow.pyをテキストエディタ(例えばVisual Code Editor等)で作成し，カレントフォルダに保存する。
3. 次のコマンドでFlaskを起動する。
   1. $env:FLASK_APP='hellow.py'←ソースコード名を指定
   2. $env:FLASK_ENV='development'←開発モードを指定
   3. flask run←Flaskを起動
   4. 上記が動かない場合はpython -m flask runと指定
4. 起動したら，適当なブラウザ(Google ChromeかEdgeを推奨)でhttp://127.0.0.1:5000/を閲覧し，下記のように文字列が表示されていることを確認する。

   

HTMLテンプレートファイルを作る

　Webページは基本，HTMLファイルで構成を作り，CSSで表示方法を決定します。JavaScriptはブラウザ側，Flaskはサーバサイドで動的な部分を作り込むためのしくみを提供しています。ここでは上記で作成したhellow.pyに静的なHTMLテンプレートファイルを組み込んでいきます。

1. hellow_flaskにtemplatesフォルダを作りる。
2. HTMLテンプレートファイルtemplate.htmlを作成。「学籍番号」「氏名」は自分のものに書き換えておくこと。

   

3. テンプレートに組み込むブロックを定義したindex.htmlを作成

   

4. hellow.pyを下記のように書き換え

   

5. 同様にflaskを動作し，下記の画面が出ることを確認

   

練習問題1

inputフォルダを作成し，その中にテキストボックスを一つ以上含み，登録ボタンをクリックすると，入力された文字列を表示する，という動作を行うアプリケーションを作れ。

作成するファイルは

• input.py・・・メインPythonスクリプト

  

• templates/template.html・・・テンプレートファイル(自力で考えること)
• templates/index.html・・・テンプレートファイルに読み込ませるブロック定義

  

とするが，それ以外にCSSを付け足すなどの工夫は随時行って良い。

[ヒント] HTMLフォームの解説

←前に戻る　↑トップへ　次に進む→