1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

経緯

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

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

1
1
0

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
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?