Angular の開発で Browsersync を使って複数ブラウザ対応を楽にしよう

wsadmin

6年前

複数のブラウザや端末に対応した画面表示の開発をしやすくする Browsersync を導入する方法

「SEROKU フリーランス(以下、SEROKU)」の中の人をやっている ryosuke です。

[adinserter block="1"]

今回は SEROKU に採用しているフレームワークである Angular でのWebアプリケーション(Webページ)について、複数のブラウザや端末に対応した画面表示の開発をしやすくする Browsersync を導入する方法について取り上げます。

1 Angular とは
2 複数ブラウザ対応の煩雑さ
3 Browsersync とは
4 Angular CLI を使いつつ Browsersync を導入してみよう
5 まとめ

Angular とは

SEROKUを支える技術 Angular Tips編その1 でも触れていますが、 Angular は Google が主に開発しているオープンソースのフロントエンド Web アプリケーションフレームワークです。2018年10月にバージョン 7 がリリースされています。

Angular での開発において特徴の1つとしてあげられるのが Angular CLI というコマンドツールです。 Angular のプロジェクトの立ち上げから code の scaffolding、開発中のブラウザプレビュー、本番環境用の JavaScript コードの生成の生成等々、Angular CLI の ng コマンドを使うことで、特殊な設定もなく実行できます。

JavaScript でフロントエンドWeb アプリケーションを開発する場合、webpack などを使用してブラウザで動作する JavaScript のコードを build や、 build コードやファイル数を調整して読み込み速度や実行スピードの最適化を行います。一般的にはこれらを行うために webpack の plugin を導入したり configuration を書く必要があります。 Angular CLI でも内部では webpack を使用してコードを build しますが、 configuration や plugin も内包されているため、 ng serve や ng build といったコマンドを実行するだけですぐにブラウザで動くコードを生成できるため便利です。

[adinserter block="1"]

複数ブラウザ対応の煩雑さ

さて、実際に複数のブラウザや端末に対応したwebページを開発する際は、デバッグに煩雑な対応が必要になります。例えば、実際に各ブラウザや端末で動作させて意図した挙動やレイアウトになっているか確認です。

ブラウザによって対応している CSS や JavaScript の仕様に差があるため、ある1つのブラウザだけで動作確認しながら開発をしていると「実は他のブラウザで意図通りに動作してなかった」なんてことが起こり得ます。そのため、開発中にできるだけ複数のブラウザを使って動作確認することが望ましくなります。これがPCのブラウザだけで済めばまだマシなのですが、昨今ではブラウジングの主体はPCよりもスマートフォンの比重が大きくなってきているため、より多くのユーザーに使ってもらえるWebサイトにするためにはスマートフォンを考慮した開発が必要です。PCブラウザに搭載されている開発者ツールの機能を使って、スマートフォンでの表示をシミュレートすることができますが、スマートフォンの全てを再現できるわけではありません。そのため、最終的にはスマートフォンの実機で画面を表示させながらの開発も必要です。そうすると、Safari、Chrome、FirefoxなどのPCでの主要なブラウザに加え、AndroidやiOSでも開発中のWebページを表示しながら、これらのブラウザで意図した挙動をしているか確認しながら開発することになります。

ただ表示するだけなら確認するブラウザの種類が増えてもそこまで大変ではないと思いますが、実際には表示するだけではなく、Webの中盤付近にあるコンテンツが正しく表示されているのを確認するために、全ブラウザでページの中盤までスクロールする必要があったり、ある特定のボタンをクリック(タッチ)したときに表示されるコンテンツを確認したい場合は、全ブラウザでそのボタンを押す操作が必要になります。一度で済むのならそれほど大変ではありませんが、いくつか手段を試しても意図した動作にならないときはコードを書き換えるたびに何度も同じ操作をすることになります。

その作業があまりの煩雑故に苦痛を感じてしまうと、開発チームが全体として複数ブラウザでの確認を手抜き等が蔓延し、結果としてWebサイトの品質が低下する事態にもなり得ます。

[adinserter block="1"]

Browsersync とは

Browsersync は JH が中心となって開発しているオープンソースのWebページ開発支援ツールの1つです。無料で使用することができます。

開発中のWebページを複数ブラウザでプレビュー中に、その操作をブラウザ間で同期させることができるのが大きな特徴です。例えば、同じページを開いている複数のブラウザの内、どれか一つでページのスクロール、ボタンのクリック、 form 等への文字入力を行うと、その操作が他のブラウザにも反映されるのです。つまり、あるブラウザでページの最下部までスクロールすると、もう一方のブラウザでも最下部までスクロールされますし、あるブラウザでボタンをクリックして次のページに遷移すれば、もう一方のブラウザでも同じように次のページに遷移できるのです。

また、開発中のコードに変更を加えた場合、 Browsersync はファイルの変更を検知して各ブラウザで該当ページの再読込を自動で行ってくれます。

開発中に各ブラウザで動作確認をするときも、1つのブラウザを操作するだけで、他のブラウザでも操作が同期し、更にコードを変更しても自動でブラウザを再読込してくれるので、開発者は都度全てのブラウザを操作しなければならない苦行から解放され、手間を最小限にして大きな効果を得ることができます。

[adinserter block="1"]

Angular CLI を使いつつ Browsersync を導入してみよう

Browsersync の導入は非常に簡単です。公式サイトにもその導入方法が完結に紹介されています。ここでは Angular CLI を使って Angular での開発を行っている場合にどのように Browsersync を導入するのか紹介します。

Angular CLI には開発中のコードを簡単にブラウザでプレビューできる ng serve コマンドがあります。このコマンドは実体としては webpack-dev-server が動作しており、 build したコードを RAM 上に保持して、それを簡易的に配信できる HTTP サーバが起動するという仕組みになっています。また、開発コードの変更を検知すると rebuild を行い、ブラウザの再読込を行う機能も搭載されています。 build したコードさえ書き出してくれれば、 HTTP サーバや再読込機能は Browsersync で実現可能です。よって、 build のみを行う ng build コマンドと Browsersync を使う構成に変更しましょう。

まず、 Browsersync をインストールします。パッケージ管理ツールに yarn を使用している前提でやり方を記載します。

yarn add browser-sync --dev

インストールができたら、続いて Browsersync の config を作ります。

npx browser-sync init

上記コマンドを実行すると、 bs-config.js ファイルが生成されます。ファイルには Browsersync の初期状態の設定が記述されています。この初期設定を元に一部の設定を変更します。

まずは、 Browsersync で ng build で生成された成果物を配信する設定をします。

{
    "server": {
        "baseDir": "./dist"
    }
}

baseDir で指定する配信物のディレクトリ指定は Angular の default の成果物出力先である dist ディレクトリを指定しています。プロジェクトで設定を変えている場合は、この設定は適切に変更してください。

次に成果物の書き換えを検知してブラウザの再読込を有効にする設定をします。

{
    "watch": true
}

最後に、ファイルが存在しない path にアクセスしたときに index.html を配信する設定を行います。

{
    "middleware": [
        require('connect-history-api-fallback')()
    ]
}

Angular の default の LocationStrategy は PathLocationStrategy が採用されていますが、この場合、 Angular の routing に /some_page という route が設定されている場合にブラウザのURL入力部に /some_page を直接入力してジャンプすると、 /some_page や /some_page/index.html というファイルの実体は存在しないので 404 File Not Found が返ってきてしまい、意図した動作になりません。これらの問題が発生しないように一般的に Angular の成果物を配信する HTTP サーバで、ファイルの実体が存在しない path へのアクセスがあったときは index.html の中身を返答する様に設定して問題を回避します。上記の Browsersync の設定は、前述の HTTP サーバでの設定と同じ効果を発揮します。

ここまで設定できたら、簡単に動作確認をしてみましょう。まずは Angular の build を行います。

npx ng build --watch

--watch は Angular プロジェクトのコード変更を検知して自動的に rebuild をする option です。上記を実行して成果物が生成されたら、別のターミナルで以下の通り Browsersync を実行します。

npx browser-sync start --config bs-config.js

正常に動作していれば、ブラウザが起動し Angular プロジェクトで作成したWebページが表示されます。では、コードを変更したらブラウザに反映されるか確認してみましょう。例えば、ブラウザに表示されている Angular の component の template の内容を簡単に書き換えて保存してみましょう。すると再度 build が行われブラウザで表示しているページの再読込がされるはずです。

ここまでうまくいったら、 npm-scripts 化して、コマンド一発で build から Browsersync 起動まで実行するようにしましょう。

まず、 npm-scripts を作る上で補助的に必要になる package をインストールします。

yarn add npm-run-all rimraf wait-on --dev

続いて、以下の npm-scripts を作成します。

{
    "scripts": {
        "prestart": "npm run clean:dist",
        "start": "run-p build:dev:watch serve:browser-sync",
        "build:dev:watch": "ng build --watch",
        "serve:browser-sync": "wait-on dist/index.html && browser-sync start --config bs-config.js",
        "clean:dist": "rimraf dist"
    }
}

この設定を行えば、 npm run start を実行するだけでbuild から Browsersync 起動までできるようになります。

[adinserter block="1"]

まとめ

いかがでしたか？皆さんの開発環境の向上に少しでも参考になればと思います。

ryosuke
profile:正確無比な開発マシーン。