pythonこんにちは。今回のテーマは『python製フレームワークBottleで簡単なWebアプリを作る(その1)』です。この記事はBottleのチュートリアルや解説をする記事ではありません。簡単なwebアプリを作りながらプログラミングの面白さや、案外簡単にwebアプリって作れるんだなってことを伝えられればという思いで書きました。プログラミングに興味があるけど、何を作って良いか分からない方は一緒に作ってみませんか?今の所、全3回で完結する予定です。(2018-12-15)加筆修正しました。ソース全体が見渡せるようにGitHubにソースコードをUPしました。次回予告Bottleってなに?Bottleはpythonで作られたWebフレームワークです。フレームワークにも関わらず1ファイルで構成されるというシンプルさが魅力的です。そのシンプルさ故にフルスタックフレームワークと比較すると機能的には限定的であり、機能の半分がルーティング機能という感じです。具体的にはセッションやORMの機能はBottle単体ではないために、他のライブラリやプラグインを導入して補う必要があります。そのシンプルさから学習コストはフルスタックフレームワークであるDjangoと比べると低く、スピーディに動くモノを作りたいと言うときには便利だと思います。用途としては小規模なサイトや実験的なウェブアプリという感じでしょうか。大規模な商用サイトを構築する際には選択肢に入ってこないと思います。(少なくとも現時点では)尚、Bottleよりも少し後にFlaskというBottleによく似たフレームワークがエイプリルフールのネタとして開発されましたが、今やBottleのお株を奪いそうな勢いで浸透していますね。今回つくって見るもの今回は簡単な読書記録アプリを作りながらBottleの使い方を紹介したいと思います。百聞は一見にしかず、多分画像を見ればおおよその機能の予想はつくと思います。Linuxで作業をしました。pythonおよび各ライブラリのバージョンは以下の通りです。1.28Bottleのインストール以下のコマンドでBottleをインストールします。bottle環境によってはsudoコマンドが必要かも知れません。Jinja2のインストール今回はテンプレートとしてJinja2を使います。Jinja2はDjangoテンプレートの記載方法を踏襲しながら機能拡張したテンプレートでpythonのテンプレートとしては有名です。Bottleは独自のテンプレートを有していますが、筆者の趣味でJinja2を使います。以下のコマンドでBottleをインストールします。jinja2余談ですが、Jinjaという名前は”Templete(テンプレート)”と”Temple(寺院)”を掛け、日本語に転じて名付けたらしいのですが、神社は”shrine”と習った筆者からすると「誤訳では?」と勘ぐってしまいます。ま、昨今、寺院と神社の区別がつかない日本人も多いですしね。この後、SQLAlchemy等の他のライブラリも必要になってきますが、必要に応じてインストールしていきます。ディレクトリ構成ディレクトリ構成は以下の通りです。(2018-12-15修正しました。list.htmlいろいろな流儀がありますので、もっとシンプルな方が好ましい場合は適宜変更してみて下さい。app.pyとroutes.pyを分けている部分に違和感がある方も多いかも知れません。このファイルを1つする書き方も多いです。今回はアプリの設定とルーティングという意味合いで分けています。fontはopen-iconicのフォントアイコンを使用するためのディレクトリですので、今の所気にしなくてOKです。Awasoneに変更しcdnを読み込む方式に変更しました。jsも今回は使う予定ないのですが、一応使うときのために置いてあります。worldまずは好みのURLにアクセスした際にHTMLを返す簡単なルーティングを体験しましょう。apps.pyに以下のように記載します。debug=True)portには未使用のポートを指定して下さい。今回は8080としました。reloader=Trueとしておくと、プログラムを修正した際に起動し直す必要なく、自動で再起動してくれます。debug=Trueとしておくとエラーページにtracebackが表示されるようになるので、開発中は便利です。routes.pyに以下の記載します。World</h3>")この状態でapps.pyがあるディレクトリに移動して以下のコマンドを実行します。apps.py開発用のサーバーが立ち上がりました。この状態でwebブラウザでlocalhost:8080/addにアクセスしてみましょう。テンプレートを使ってみよう出力する度にreturnでHTMLの文字列を生成していたら大変です。テンプレートファイルを読み込んで表示出来るようにしましょう。viewsディレクトリ以下にadd.htmlを以下の内容で生成します。<h1>{{title}}</h1></body>ではこのlocalhost:8080/addにアクセスがあったらadd.htmlの内容を表示するようにroutes.pyを編集します。title="テンプレートのテストだよ")ではlocalhost:8080/addにアクセスしてみましょう。今回はtitleという変数に”テンプレートのテストだよ”という文字列を渡してテンプレート側の{{title}}部分を置換しました。jinja2では{{}}で囲まれた変数はpythonの変数として扱うことが出来ます。その他にも分岐や繰り返しが使えるなど動的にHTMLを生成することができます。登録画面の作成CSSやjavascriptファイル用のディレクトリ作成staticディレクトリ以下にcssとjavascript用のディレクトリを作成します。プロジェクトディレクトリ下で以下コマンドを実行します。4を使用するためstatic/cssにbootstrap.min.cssを配置します。次にroutes.pyに以下のように編集します。title="テンプレートのテストだよ")これでテンプレートファイルviews/add.html中でファイルパスを指定してcssやjsを呼び出せるようになりました。どのテンプレートにも共通で使用するcssやJSの読込処理を書くのはスマートではないので、ベースとなるテンプレートbase.htmlを作成します。%}の部分に固有の表示が組み込まれることになります。登録画面を作っていきましょう。localhost:8080/addにアクセスされたらフォームが並んだ入力画面を返すようにします。先程作成したadd.htmlを以下のように修正します。base.htmlを継承しているので、base.htmlで書いた部分は各必要がありません。%}で囲まれた部分が各テンプレート固有の内容として反映されます。<p>書籍情報を{{kind}}します。%}また、確認画面用のテンプレートを用意します。views/confirm.htmlファイルを以下の内容で生成します。add.htmlと同様にbase.htmlを継承して作っていきます。%}で囲まれた場所にpythonのロジックを入れ、分岐や繰り返しを入れることが出来ます。次にroutes.pyを次のように変更します。method=['POST','GET'])でエンドポイントへアクセス可能なメソッドを指定しています。ここではGETとPOSTを受けられるようにしました。今回はGETされた場合とPOSTされた場合で表示を切り替えたかったのでBottleのrequestオブジェクトからメソッドを取得して場合分けしています。requests.forms.get()がの使い方が有名ですが、文字化けしてしまうため、decode関数を挟んでいます。POSTでアクセスされた場合は入力チェック(バリデーション)して、問題なければ確認画面用のテンプレートにPOSTされた値を渡して表示します。localhost:8080/addにアクセスしましょう。値を入力して「登録」を押したら確認画面に遷移すればOKです。バリデーション処理ではまだ実装されていないバリデーション処理を追加しましょう。今回は単純に必須入力項目が入力されていない場合にエラーメッセージを出すようにします。登録画面はroutes.pyのaddファンクションでバリデーション処理をTODOで残しておきました。utils/util.pyを以下の内容で生成します。errMsgUtilsクラスのバリデーションを使用できるようroutes.pyに修正を加えます。Utils先程は処理を記載しなかったバリデーション処理を以下のように修正します。表示処理...これで必須項目に値が入力されていない場合にエラーメッセージが出るようになりました。次回予告さて、ここまでで必須項目の入力チェックを行える確認画面と登録画面が出来ました。入力した値を確認するだけの状態です。登録は出来ないし、確認画面から戻る機能もついていません。次回はSQLAlchemyというORMライブラリを用いてデータベースに値を登録できる機能をつけていきます。最後に駆け足で進めてしまった感が拭えないのですが、いかがったでしょうか?普段はLinux関連の記事ばかりでプログラミングに関する記事はあまり書かないので、解説が分かりづらかったかも知れません。分かりづらかった方のためにソースコードをGitHubにアップしています。宜しかったら参考になさって下さい。時間を見つけて修正したいとは考えています。Bottleの使い方はネット上でいろいろな方が使い方を紹介しているので、この記事も1つの参考として何かの役に立てば幸いです。Pythonを用いたウェブアプリの作成に興味がある方はDjango学習帳も参考にしてください。Pythonの代表的なウェブフレームワークDjangoの使い方を実践形式で紹介しています。コメントをキャンセルメールアドレスが公開されることはありません。10をインストールするタイル型ウィンドウマネージャXmonadを使う(カスタム編)→もっと見るクロのプロフィール映画と読書愛するプログラマー。Androidな人だったけど気がついたらサーバーサイドへ。Dataを主宰しています。