Flask-bootstrapの導入 | レイアウト変更
記事投稿機能の実装と、Bootstrapの利用について
デザインを変更する
仕様
- すべてのページを2カラムレイアウトとする
- ユーザ定義のCSSは極力避け(clss定義等)Bootstrapライブラリのクラスを使用する
レイアウト
- Bootstrapライブラリクラスを使用
カラー
- プロトタイプでは変更しない
CSSライブラリ
- Bootstrap
- Flask-bootstrapパッケージを利用
Flask-bootstrapの参考記事
- Flask-Bootstrap (本家)
Flask-Bootstrap – インストール -
- Pipを使ってインストール
Pip install flask-bootstrap
メインモジュールでの呼び出し
From flask_bootstrap import Bootstrap
App = Flask(name)
Bootstrap(app)
Flask-Bootstrap – テンプレートの使用方法 -
- Flask-bootstrapはデフォルトのテンプレートが準備されており、それをHTML内でjinja2を利用し呼び出す
- Flask-bootstrap/base.htmlを親テンプレートとして呼び出す
-
Available blocks Block name(jinja2ブロック名) Outer Block(HTML要素) Purpose doc Outermost block. html doc Contains the complete content of the <html> tag. html_attribs doc Attributes for the HTML tag. head doc Contains the complete content of the <head> tag. body doc Contains the complete content of the <body> tag. body_attribs body Attributes for the Body Tag. title head Contains the complete content of the <title> tag. styles head Contains all CSS style <link> tags inside head. metas head Contains all <meta> tags inside head. navbar body An empty block directly above content. content body Convenience block inside the body. Put stuff here. scripts body Contains all <script> tags at the end of the body.
例えば、2カラムレイアウトにする場合
{% block content %}
<div class="container">
<div class="row">
<div class="col-md-4">
{% block left %}{%endblock left %}
</div>
<div class="col-md-8">
{% block right %}{%endblock right %}
</div>
</div>
</div>
{% endblock content %}
動くコード
マシン系
![MSI Nightblade MI2-001BUS Intel Skylake B150 Chipset LGA 1151 i7/i5/i3/Pentium DDR4 Gaming Desktop Barebone PC [並行輸入品]](http://ecx.images-amazon.com/images/I/41xip3j7HJL._SL160_.jpg "MSI Nightblade MI2-001BUS Intel Skylake B150 Chipset LGA 1151 i7/i5/i3/Pentium DDR4 Gaming Desktop Barebone PC [並行輸入品]")
【Amazon.co.jp限定 】 ASUS ゲーミングモニター 23型フルHDディスプレイ (応答速度1ms / HDMI×2,D-sub×1 / スピーカー内蔵 / 3年保証) VX238H-P
- 出版社/メーカー: Asustek
- 発売日: 2014/05/28
- メディア: Personal Computers
- この商品を含むブログを見る
可愛い系
- 作者: 裕時悠示
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/11/17
- メディア: Kindle版
- この商品を含むブログを見る
- 作者: 丸戸史明,深崎暮人
- 出版社/メーカー: KADOKAWA
- 発売日: 2016/11/19
- メディア: 文庫
- この商品を含むブログ (2件) を見る
- 作者: 近江のこ
- 出版社/メーカー: 小学館
- 発売日: 2016/11/18
- メディア: Kindle版
- この商品を含むブログを見る
テキストデータをPython標準ライブラリでパースする方法
テキストデータをPython標準ライブラリでパースする方法
データベースを使ったWebアプリをFlaskを使って作ろうとしているのだが、
開発途中では、テストデータを扱うが、準備が面倒だし、データデータベースへの入力も一括でしたい。。。
そこで、テストデータを決められたフォーマットで作成し、Python標準ライブラリのparseを使ってパースするコードを書きました。
パースの方法
まずデータを準備
testdata.txt
@title: タイトルが書かれている @result: 結果が書かれている @conclusion: 結論が書かれている @day: 2015-02-17 ---------------------- @title: タイトルが書かれている @result: 結果が書かれている @conclusion: 結論が書かれている @day: 2015-02-17 ---------------------- (続く)
パース用の構文を準備 [python] # 文章を区切るセパレータ uSPLITTER = u'-------------------' # パースする要素 WORDS = [u'title', u'result', u'conclusion', u'day'] # ファイルの読み込み (Unicode) f = codecs.open(self.inFile, 'r', 'utf-8') # ファイルからテキストとして読み込み contents = f.read().split(uSPLITTER) # ファイルを閉じる f.close() # パース用構文をコンパイル cmp = compile('{}@title{}@result{}@conclusion{}@day{}') # テストテキストの読み込み datalist = [] for t in contents: # パースの実行 d = cmp.parse(t) # 取得した各項目データの格納 data = {} for w in WORDS: data[w] = d[w] # 取得データの格納 datalist.append(data) # (おまけ) # 書き込みモードで開く f = open('output.txt', 'w') # ここでutf-8にエンコード f.writelines(data.encode('utf-8'))
[/python]
注意
encode('utf-8')はstring型しか使えない。辞書型であれば、for k,v in dict.items():等を使って、各要素へアクセスするひつようがある。
まとめ
ここ2週間ほどPythonを触っているが、ずっと悩まされていた文字コードに関する取り扱いがやっとわかった気がします。
BeautifulSoupや自然言語処理ライブラリを使いたくて、適当にサンプルコードを走らせようとすると、いつも'ascii'なんちゃら'Unencode error'なんちゃららで、とても苦労していたので、基本を学ぶことができて本当に良かった。
非常に参考になった記事
parse 1.6.6 : Python Package Index
【Amazon.co.jp限定 】 ASUS ゲーミングモニター 23型フルHDディスプレイ (応答速度1ms / HDMI×2,D-sub×1 / スピーカー内蔵 / 3年保証) VX238H-P
- 出版社/メーカー: Asustek
- 発売日: 2014/05/28
- メディア: Personal Computers
- この商品を含むブログを見る
- 作者: 裕時悠示
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/11/17
- メディア: Kindle版
- この商品を含むブログを見る
- 作者: 丸戸史明,深崎暮人
- 出版社/メーカー: KADOKAWA
- 発売日: 2016/11/19
- メディア: 文庫
- この商品を含むブログ (2件) を見る
Herokuの環境設定方法(Windows)
Herokuの環境設定方法
WebフレームワークFlaskを使って、Webアプリっぽいものをつくれたので、勉強がてらあこがれの「デプロイ」をしてみようとおもう。
技術ブログ等を呼んでいると良く聴くHerokuを使ってデプロイというのをしてみよう。(デプロイについては良く意味が分かっていません。)
Herokuへ登録
Heroku Toolbeltをインストール
ここらへんは何も考えずとりあえず進めましょう。「なんだかんだ考えるよりまずはやってみる。」調べてばっかりでは結局知っているだけでなにもできていない。
コマンドラインからHerokuを立ち上げる
無事起動できました。
Prepare the app
たぶんサンプルコードのことだと思う。
git clone https://github.com/heroku/python-getting-started.git $ cd python-getting-started
なにも考えず打ち込む。なにも知らないサンプルを動かすときに変なことを考えてはいけない。無知ほどエラーを出すことはない。
これはgitを使って、サンプルアプリケーションをダウンロードしたみたい。それだけ。
中を確認すると。
python-getting-started │ .env │ .gitignore │ manage.py │ Procfile │ README.md │ requirements.txt │ runtime.txt │ ├─gettingstarted │ │ settings.py │ │ urls.py │ │ wsgi.py │ │ __init__.py │ │ │ └─static │ humans.txt │ └─hello │ admin.py │ models.py │ tests.py │ views.py │ __init__.py │ └─templates db.html
こんな感じ。そのうちのrequirements.txtが大事らしい。
requirements.txt Django==1.6.5 dj-database-url==0.3.0 dj-static==0.0.6 django-toolbelt==0.0.1 gunicorn==19.0.0 psycopg2==2.5.3 static3==0.5.1 wsgiref==0.1.2
これはHerokuにアプリをアップロードした際に、Herokuのサーバーに準備していて欲しい環境を書いているのだと思う。なんて便利なんだー。
Deploy the app あこがれのデプロイ
さて、アプリをダウンロードして、Herokuに準備していて欲しい環境をrequrements.txtに書いて準備OK。
良くわからないがheroku createからはじまる４つのおまじないをかけてみる。意味なんてわからなくてもいいのだ。使い始めれば嫌でもわかる。使い始めるために、これが「どんなものか」、「使えるかどうか」を確かめるのだ
$ heroku create $ git push heroku master $ heroku ps:scale web=1 $ heroku open
最後にheroku open!!としたので、勝手にブラウザが立ちあがった。
ダサい。
ただ、アドレスを見るとhttps://evening-beach-1177.herokuapp.com/となっている。もしかして、外の環境で公開されているのか！
便利だ。便利すぎる。サンプルはDjangoアプリケーションらしいが、Djangoを自前のサーバーを立てて環境構築するなんて手間を考えたら。。便利すぎる。
以上。
と思ったら終わってなかった。
View logs
ログがみれる。僕のような初心者にはそんなもの見ている暇はない。
heroku logs --tail
Define a Procfile ぷろっくファイル
先ほどのフォルダの中に確かにProcfileというものがある。
Procfile web: gunicorn gettingstarted.wsgi --log-file -
これはサーバーの種類を設定しているような気がする。
Scale the app あぷりのすけーる
さてもうわからない。おそらくスケールアップ・ダウンの話だと思われる。
HerokuではDynoと呼ばれる単位でマシンを呼んでいる感じ。
マシン?CPU?わからんがとりあえずHerokuを何人やとうかみたいな感じだと思う。これを悩めるようならばこんな記事は呼んでいない。
Declarre app dependencies 準備しておきたいパッケージはちゃんと書き出しておいてよ
heroku側で準備しておいてもらいたいパッケージについてrequirements.txtに書いておくのだけど、その依存パッケージってどうやって洗い出すの？って思われたかたもいるでしょう。そのやりかたについてのってます。良くわかりません。virtualenvを使っているなら？それかvirtualenvを使いなさいか英語が分からないので、無視します。
実はまだ半分です。もう理解するための技術がないのでここまでにします。
次は実際に自作WebアプリをHerokuでデプロイしながら勉強します。
FlaskアプリケーションをHerokuへデプロイする方法
最近使い始めたPycharmでやってみる。PyCharmでFlaskのプロジェクトを作ります。
![SnapCrab_heroku_first_deproy - [CUsers0160929PycharmProjectsheroku_first_deproy] - heroku_first_deproypy - Py_2015-2-19_16-32-14_No-00](http://fififactory.com/wp/wp-content/uploads/2015/02/SnapCrab_heroku_first_deproy-CUsers0160929PycharmProjectsheroku_first_deproy-heroku_first_deproypy-Py_2015-2-19_16-32-14_No-00.png)
参考をみるとvirtualenvを使って環境を作っているのですが、僕はAnacondaを使っているので、virtualenvをpip install 仕様とすると怒られました。のでパッケージ全部(相当たくさん)を色々無視して試してみます。つまり、virtualevnは使いません。
procfileの準備
web: gunicorn hello:app --log-file -
requirements.txtにゴミのようなパッケージの山を書き出し
pip reeze > requirements.txt
あとはおまじない
git に commit し, push する.
git add .
git commit -m 'Hello World!'
git push origin master
heroku に login し, push する.
heroku login
heroku create
git push heroku master
Web のインスタンス追加
heroku scale web=1
開く
heroku open
うん。失敗です。
Application Error
An error occurred in the application and your page could not be served. Please try again in a few moments.
If you are the application owner, check your logs for details.
どうやら、まだできていなのか？依存パッケージの準備に時間がかかっているのかも。
と、最後に「もし管理者なら、ログをみろ!」とい書いてる。来ました。先ほどチュートリアルであったログ。
heroku logs --tail
これですな
C:\heroku_first_deproy>heroku logs --tail Your version of git is 1.8.1.. Which has serious security vulnerabilities. More information here: https://blog.heroku.com/archives/2014/12/23/update_your_git_clients_on_windows_and_os_x 2015-02-19T07:41:14.698655+00:00 heroku[api]: Enable Logplex by peace@gmail.com 2015-02-19T07:41:14.698690+00:00 heroku[api]: Release v2 created by peace098beat.t@gmail.com 2015-02-19T07:42:15.245796+00:00 heroku[api]: Deploy 4fb2fee by peace@gmail.com 2015-02-19T07:42:15.245796+00:00 heroku[api]: Release v3 created by peace@gmail.com 2015-02-19T07:44:51.059934+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method=GET path="/" host=safe-badlands-8226.herokuapp.com request_id =77132953-df7f-4985-9161-ca3cc02d2053 fwd="61.119.15.133" dyno= connect= service= status=503 bytes= 2015-02-19T07:44:52.062903+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method=GET path="/favicon.ico" host=safe-badlands-8226.herokuapp.com request_id=38c1dee4-48b8-4ca4-9fc0-f5b7f4648154 fwd="61.119.15.133" dyno= connect= service= status=503 bytes= 2015-02-19T07:47:37.168802+00:00 heroku[router]: at=error code=H14 desc="No web processes running" me
全くわかりません。自分の実力が分かりますね。
もう少し挑戦します。
参考記事
HerokuでWebアプリ開発を始めるなら知っておきたいこと(1) 無料のスペック
サイトデザインがかっこよすぎる。
【Amazon.co.jp限定 】 ASUS ゲーミングモニター 23型フルHDディスプレイ (応答速度1ms / HDMI×2,D-sub×1 / スピーカー内蔵 / 3年保証) VX238H-P
- 出版社/メーカー: Asustek
- 発売日: 2014/05/28
- メディア: Personal Computers
- この商品を含むブログを見る
- 作者: 裕時悠示
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/11/17
- メディア: Kindle版
- この商品を含むブログを見る
- 作者: 丸戸史明,深崎暮人
- 出版社/メーカー: KADOKAWA
- 発売日: 2016/11/19
- メディア: 文庫
- この商品を含むブログ (2件) を見る
