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

シリーズ記事一覧

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

プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で



「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」

「エンジニアとして若いうちから高収入を得たい」



という強い気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする

   侍エンジニア塾       
侍エンジニアの無料体験レッスンを予約する -->