search
LoginSignup
1

More than 5 years have passed since last update.

posted at

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

経緯

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1