HTMl,CSS,JavaScriptでWeb画面を開発し、サーバーはまだ用意していないけど簡単な動作確認をする時ありますよね。
Browsersyncを使用すれば修正したソースが自動的にブラウザに反映されます。
同じWi-Fi内であれば、ipアドレスが割り当てられて、別パソコンやスマートフォンからブラウザで確認することができます。
スマホの操作も同期できるので、スマホのブラウザ操作でChromeのデバッグ機能を利用することもできます。
デプロイ前の動作確認に最適です。
他管理画面もあり。ブラウザ同期や画面アウトラインのデバッグや、ネットワーク制限をすることができます。
また画像を利用したサイトだと、index.htmlをGoogleChromeでブラウザで見ると、以下エラーメッセージが表示されて画像を表示することができません。
Access to Image at ‘file:///Users/~~~.png’ from origin ‘null’ has been blocked by CORS policy: Invalid response.
Origin ‘null’ is therefore not allowed access.
これは同一オリジンポリシー (Same-Origin Policy) により Canvas 要素の機能制限がされているからです。
以下関数が使用できないです。
toBlob()
toDataURL()
getImageData()
そんな時も Browsersync を使用すればエラー発生せずブラウザ動作確認をすることができます。
ではインストール方法から動作確認まで確認していきましょう。
インストールから動作確認手順 見出しへのリンク
npm操作方法などがわかっていない人は以下別記事をまず呼んで下さい。
簡単まとめ npm でパッケージをローカルインストールして利用する方法
開発ディレクトリを作成し実装する
npm init で初期化をする
初期化した上で package.json ファイルを作成する
インタラクティブ形式で各パラメータを設定する。
私はサンプルアプリなら以下パターンでよく登録する。
package name: (a) sampleApps
version: (1.0.0) 0.0.0
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
- dev ディレクトリ配下にpackage.jsonファイルが作成されていることを確認する
- ローカル環境にパッケージをインストールする
npm install browser-sync –save-dev
- browser-syncパッケージがインストールされたか確認する
npm list –depth 0
- package.jsonにstart追記する
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "browser-sync start --server --files='**/*'"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.3"
}
}
- npm start コマンドで実行
URL
https://localhost:3000
を入力するとブラウザで動作確認をすることができます。
ターミナルに External と書いてある箇所に、IPアドレスも記載してあるので、同じWi-Fi内の他パソコンやスマートフォンからアクセスして表示することができます。
他スマートフォンのブラウザで動作内容をデバッグしてログを確認する方法 見出しへのリンク
- USBでパソコンと接続する
- デバイスをデバッグモードにする（Android）
- 以下URLにアクセスする
chrome://inspect/#devices
Remote Target にデバッグ対象のスマホがあるので、その配下にスマフォで開いているWebサイトが表示されている。 そのinspectリンクをクリックする するとパソコンのGoogleChrome検証ツールと同じ画面でてくるので後は同じ手順。
以上