経緯
PCとSPでURLの階層が違うサイトでは問題は起こらないですが、PCとSPで同一URLのサイトを作成する場合、ちょっと開発環境でつまづきました。
これは実装者、そしてクライアントへのプレビューなども円滑に行うためのTIPSです。
公開までの流れ
こちらでフロント側の実装を行う
⬇︎
こちら側のテストサーバーでプレビュー
⬇︎
PC,SPのデータをそれぞれ納品する
⬇︎
クライアントのほうで納品されたhtmlをサーバーサイドに組み込む（独自のシステムか何か）
⬇︎
サーバーサイド側でユーザーエージェントを判別してコンテンツを描画するのでURLは１つ.
http://hoge/aaa/
開発環境
- gulpとgulp-pugを使う、ローカルサーバーはnodeで立てる
- でもテストサーバーは apache
やりたいこと
・PCとSPのhtmlは同一階層に生成したい
・ローカルでも同一URLで見たい
やったこと
pugで、同一階層にそれぞれPC,SPのデータを出す、でもデフォルトではhtmlしか出せないので少し工夫が必要。
PC→ .html SP→ .htm にすることにしました。
gulp.task('pug_pc', function(){
gulp.src([paths.root + '/**/*.pug', "!"+ paths.root + '/**/sp_*.pug',"!"+ paths.root + '/**/_*.pug'])
.pipe(plumber())
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest(paths.dist))
});
gulp.task('pug_sp', function(){
gulp.src([paths.root + '/**/sp_*.pug'])
.pipe(plumber())
.pipe(pug({
pretty: true
}))
.pipe(rename(function(path){
path.basename = path.basename.replace("sp_","");
path.extname = path.extname.replace(".html",".htm");
}))
.pipe(gulp.dest(paths.dist))
});
index.pug
sp_index.pug
のようにして、それぞれ、index.html,index.htm
が生成されるようにしました。
次にローカルでのプレビューですが、以下のようにしました。
// server
gulp.task("server",function(){
browser.init({
server: {
baseDir: paths.dist,
middleware: [
ssi({
baseDir: paths.dist,
ext:".html"
})
]
}
})
});
gulp.task("server_sp",function(){
browser.init({
server: {
baseDir: paths.dist,
middleware: [
ssi({
baseDir: paths.dist,
ext:".htm"
})
]
}
})
});
タスクをPCとSPで分けたので、
それぞれ、 http://localhost:3000/ とかで見ることができます。
ローカルだとこのままでいいのですが、テストサーバー（apache上）だとこうはいきません。
このままだと、
http://hoge/aaa/ (PC)
http://hoge/aaa/index.htm (SP)
のようになってしまい、例えば、スマフォサイトのaタグ（href="/bbb/"）をクリックするとPCページへ飛びます。
このままではスマフォのプレビューはURLを直で叩くしかありません。
なので、.htaccessに以下のような記述を追加しました。
RewriteEngine On
# スマフォはhtmにリライト
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteCond %{REQUEST_URI} /$
RewriteRule (.*) $1/index.htm
これを行うことでスマフォで以下のURL にアクセスすると
http://hoge/aaa/
URLはそのまま、で
http://hoge/aaa/index.htm
のデータを描画してくれます。
結果
これによって
以下を叩くと、PCだとPCのSPだとSPのデータを読み込む。
http://hoge/aaa/
以下を直接叩くとPCが見える
http://hoge/aaa/index.html
以下を直接叩くとSPが見える
http://hoge/aaa/index.htm
テスト環境でのプレビュー用としては申し分ないと思います。