adonis.js

Adonis.jsでPCとスマホのviewを分けてmiddlewareで切り替える方法

More than 1 year has passed since last update.

ひっさびさのadonis.jsネタ。

概要

middlewareでUserAgentでスマホかPCかを判別し、viewが置いてあるパスのルートを切り替える。

詳細

viewを用意

resources/views/pc/resouces/views/sp/ を作成。
その内部にそれぞれviewファイルを置く。

middlewareで切り分け

なんでもいいのでユーザーエージェントをもとにスマホかどうかを判別する。
今回は mobile-detect を使う。

UserAgentDetector.js
'use strict'

const MobileDetect = require('mobile-detect')
const edge = require('edge.js')
const Helpers = use('Helpers')

class UserAgentDetector {
  async handle ({ request }, next) {
    const mobileDetect = new MobileDetect(request.header('User-Agent'));
    const isMobile = mobileDetect.phone() !== null
    const viewPath = Helpers.viewsPath() + (isMobile ? '/sp' : '/pc')
    edge.registerViews(viewPath)

    await next()
  }
}

module.exports = UserAgentDetector

edge.registerViews() でviewのルートディレクトリを登録できるのでこれで書き換える。

これを start/kernel.jsglobalMiddleware に追加しておく。

kernel.js
const globalMiddleware = [
  'Adonis/Middleware/BodyParser',
  'Adonis/Middleware/Session',
  'Adonis/Middleware/Shield',
  'Adonis/Middleware/AuthInit',
  'App/Middleware/UserAgentDetector', // これ
]

以上。