Posted at

PCとSPが同一URLのサイトのフロント実装のTIPS(pugを使用)

More than 1 year has passed since last update.


経緯

PCとSPでURLの階層が違うサイトでは問題は起こらないですが、PCとSPで同一URLのサイトを作成する場合、ちょっと開発環境でつまづきました。

これは実装者、そしてクライアントへのプレビューなども円滑に行うためのTIPSです。


公開までの流れ

こちらでフロント側の実装を行う

⬇︎

こちら側のテストサーバーでプレビュー

⬇︎

PC,SPのデータをそれぞれ納品する

⬇︎

クライアントのほうで納品されたhtmlをサーバーサイドに組み込む(独自のシステムか何か)

⬇︎

サーバーサイド側でユーザーエージェントを判別してコンテンツを描画するのでURLは1つ.

http://hoge/aaa/


開発環境


  • gulpとgulp-pugを使う、ローカルサーバーはnodeで立てる

  • でもテストサーバーは apache


やりたいこと

・PCとSPのhtmlは同一階層に生成したい

・ローカルでも同一URLで見たい


やったこと

pugで、同一階層にそれぞれPC,SPのデータを出す、でもデフォルトではhtmlしか出せないので少し工夫が必要。

PC→ .html SP→ .htm にすることにしました。


gulpfile.js


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

が生成されるようにしました。

次にローカルでのプレビューですが、以下のようにしました。


gulpfile.js

// 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に以下のような記述を追加しました。


.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

テスト環境でのプレビュー用としては申し分ないと思います。