読者です 読者をやめる 読者になる 読者になる

Webアプリ開発向け簡易ブラウザ floating-preview の紹介

Node.js JavaScript p5.js

あけましておめでとうございます。(1月も大分過ぎてしまいましたが)

今年も隙を見つけて適当にプログラミングしていきたいと思いますので、よろしくお付き合いください。

新年ということで、Node.js向けのパッケージの作成に初挑戦してみましたので、今回はその紹介をしたいと思います。

www.npmjs.com

Webアプリ開発向け簡易ブラウザ floating-preview

floating-previewはWebページを小さなウィンドウで最前面に表示し、自動で更新を行う、Webアプリ開発のためのブラウザです。

floating-preview

インストール方法

事前準備

floating-previewを使用するには、Node.jsのインストールが必要です。Node.jsは公式サイトから取得することができます。

オフィスなどのプロキシを利用している環境では、以下の設定も必要です。

  • npm config set proxyコマンドとnpm config set https-proxyコマンドでプロキシサーバを設定する。
  • Windowsの場合は、electron-prebuiltモジュールをインストールするために環境変数としてhttp_proxyhttps_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ライセンスです。