Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

browsersyncでShift-Jisのファイルを使用する

More than 3 years have passed since last update.

browsersyncはShift-Jisファイルを読み込むと文字化けする

文字化けせずにbrowsersyncを使用するにはutf-8にエンコードすればいい。
ただ、ファイル自体をエンコードしてしまうのは嫌。。。。

そこで、ググったら以下の記事がヒット
Shift_JISなサイトをgulp, BrowserSyncで文字化けさせずに表示する

ありがたい。
が、自分の環境では少し修正しないと動かなかったので以下に記します。

まず、上の記事に従って必要なファイルを用意する。
package.jsonやgulpfile.jsですね。
因みに自分の使用した、browser-syncのバージョンは、2.12.12です。
そしたら、gulpfile.jsに以下のように書きます。

//サーバー起動
browserSync.init({
    port: 3000,//無くてもいい
    server: {
        baseDir: 'htmlファイルの場所',
        middleware: [
            function (req, res, next) {
                // 仮想サーバーへのリクエストのurlが ~.htmlなら
                // index.htmlの時は / だけになる
                if (/\.html$/.test(req.url) || req.url === '/') {
                    // ファイル読み込み
                    var absPath='';
                    if(req.url === '/'){
                        absPath = path.join(__dirname, 'htmlの場所のルート','index.html' );
                    }else{
                        absPath = path.join(__dirname, 'htmlの場所のルート', req.url);
                    }
                    var data = fs.readFileSync(absPath);
                    // 文字コード判定
                    var charset = jschardet.detect(data);
                    if (charset.encoding == 'SHIFT_JIS') {
                        // shift-jisなら文字コード変換
                        var source = iconvLite.decode(new Buffer(data, 'binary'), "Shift_JIS");
                        res.setHeader("Content-Type", "text/html; charset=UTF-8");
                        res.end(source);
                    } else {
                        // shift-jis以外
                        next();
                    }
                } else {
                    next();
                }
            }
        ]
    }
});

自分が加筆したのはほんの一部です。
最初の条件分岐のところですね。
やってることは、

  • 仮想サーバーへのリクエストを全部精査して

  • htmlファイルがリクエストされたら、そのファイルの文字コードを調べてShift-Jisならエンコードして

  • エンコードしたファイルをブラウザに投げる

という感じだと思います。
自分もこんなコード書けるようになりたいっす。

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