Webアプリ開発向け簡易ブラウザ floating-preview の紹介
あけましておめでとうございます。（1月も大分過ぎてしまいましたが）
今年も隙を見つけて適当にプログラミングしていきたいと思いますので、よろしくお付き合いください。
新年ということで、Node.js向けのパッケージの作成に初挑戦してみましたので、今回はその紹介をしたいと思います。
Webアプリ開発向け簡易ブラウザ floating-preview
floating-previewはWebページを小さなウィンドウで最前面に表示し、自動で更新を行う、Webアプリ開発のためのブラウザです。
インストール方法
事前準備
floating-previewを使用するには、Node.jsのインストールが必要です。Node.jsは公式サイトから取得することができます。
オフィスなどのプロキシを利用している環境では、以下の設定も必要です。
npm config set proxyコマンドとnpm config set https-proxyコマンドでプロキシサーバを設定する。- Windowsの場合は、electron-prebuiltモジュールをインストールするために環境変数として
http_proxyとhttps_proxyを設定する。
floating-previewをインストールする
floating-previewはNode.jsのnpmコマンドでインストールできます。
$ npm -g install floating-preview
もしインストール中パーミッションエラーが発生した場合は、上記コマンドの先頭にsudoコマンドを追加してください。
使い方
書式
floating-preview [options] [path]
pathにはファイル名とディレクトリ名の両方が指定できます。
使用例
index.htmlファイルを開き、自動更新のために同じディレクトリ以下の変更を監視する。
$ floating-preview
srcディレクトリのindex.htmlファイルを開き、同じディレクトリ以下の変更を監視する。
$ floating-preview src
app.jsファイルを開き、同じディレクトリ以下の変更を監視する。
$ floating-preview app.js
app.jsファイルを400x300のサイズのウィンドウで開く。
$ floating-preview -s 400x300 app.js
オプション一覧
-h, --help ヘルプを表示する -V, --version バージョン番号を表示する -p, --port <n> httpサーバのポート番号を指定する -s, --size <width>x<height> ウィンドウのサイズを指定する -m, --margin <n> 右下隅からのウィンドウのマージンを指定する -z, --zoom <n> 表示倍率のパーセントを指定する
License
floating-previewはMITライセンスです。
