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

この記事は約5分で読めます。

 

シリーズ記事一覧

 

 

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が変わってしまうので本来は非推奨ですが・・・)

 

終わり

 

これでFlask側からアクセスしてきたユーザーのデバイスがPC・スマホ・タブレットかで表示させるテンプレートを切り替えることが可能になります。

 

関連記事:【Python】FlaskでTwiterからログインする機能(OAuth認証)を実装する

 

関連記事【Python】Flask+SQLAlchemyで「ひとこと掲示板」を作る

 

 

 

 

 

 

参考記事:https://qiita.com/yasunori/items/9be3481f570b61ab4c48

 

 

コメント

タイトルとURLをコピーしました