Help us understand the problem. What is going on with this article?

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

More than 3 years have 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

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

resistance_gowy
フロントエンド。 https://github.com/underground0930/ https://twitter.com/resistance_gowy http://resistance-underground.hateblo.jp/
https://htmlgo.site/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away