FlaskによるWebアプリ開発⑦～PCとモバイルで表示画面を切り替える

Contents

シリーズ記事一覧
PCとスマホでの表示するテンプレート切替
Flask-Devicesの使い方
終わり

シリーズ記事一覧

PCとスマホでの表示するテンプレート切替

これまでの記事の内容で十分なWebアプリを作ることは可能ですが、昨今Webアプリ開発において欠かせないのが、PCとスマホ・タブレットでそれぞれ表示するテンプレートを切り替える機能です。

一応cssにレスポンシブルなBootstrapを使用すれば、デバイスの画面の大きさに比例して表示形式を調整してくれますが、それでもやはり辛い時があります。

そういうときはスマホとPCでそもそもの表示するテンプレートを切り替える必要があります。

アクセスするデバイスに応じての表示させるテンプレートの切り替えには大きく3つの方法があります。

大元レンタルサーバー上で.htaccessを弄ってアクセス制御する
フロント上のJavascriptでデバイスを検出し制御する
Flaskでのルーティング時にデバイスを検出し制御する

普通は諸々考えてサーバーの設定ファイルである.htaccessで制御するのが一般的ですが、フロントでのJSやサーバサイドでも制御することはできます。

ただスクリプト言語でルート制御は無駄に処理が多くなるので表示速度が遅くなりがちです。なのであまりオススメではありませんが、前者より設定のハードルが簡単って感じです。

というわけで今回はとりあえず、Flaskの部分でWebアプリにアクセスしてきたユーザーのデバイスを検出し、PCまたはスマホかどうかで表示するテンプレートを切り替える処理を実装していきたいと思います。

Flask-Devicesの使い方

Flaskでのデバイスによるテンプレート制御はFlask-Mobilityという拡張機能を使用することが恐らく一般的ですが、それを改良したFlask-Devicesというのがあったので、それを使います。

# Flask-Devicesのインストール
pip install Flask-Devices

<app.py>

from flask import Flask, render_template
import flask_devices

app = Flask(__name__)
devices = flask_devices.Devices(app)
devices.add_pattern('mobile', 'iPhone|iPod|Android.*Mobile|Windows.*Phone|dream|blackberry|CUPCAKE|webOS|incognito|webmate', 'templates/mobile')
devices.add_pattern('tablet', 'iPad|Android', 'templates/tablet')
devices.add_pattern('pc', '.*', '/templates')

@app.route("/")
def index():
    if request.DEVICE == 'mobile':
        return render_template('mobile_index.html')
    elif request.DEVICE == 'tablet':
        return render_template('tablet_index.html')
    else:
        return render_template('index.html')

devices.add_patternのPATHはapp.pyの実行環境から見た相対パスなので、app.pyのあるディレクトリからではなくrootなど別のディレクトリから実行していると、PCの見ているPATHが私たちの想定しているPATHと異なるのでtemplate not foundみたいなエラーになります。

template not foundになっちゃう場合は絶対PATHにしておくのもアリです。(テストと本番環境でPATHが変わってしまうので本来は非推奨ですが・・・)