開発したアプリなど一覧

Windows/macOS 両対応の nativefier を利用して Web サイトをアプリ化する

記事内にアフィリエイトリンクを含む場合があります

良く使う Web サイトはブラウザのタブではなく、独立したウインドウで扱いたい事もある。とくに Gmail や Google Calendar のような Web アプリはデスクトップアプリとしてそのまま利用できるほど高機能だ。他にもブラウザゲームなどもアプリ化したほうが都合が良い事も多いだろう。

Web サイトをアプリ化する方法はいくつかあるが、コマンドラインの利用に慣れているのであれば nativefier を利用すると Windows/macOS/Linux といった OS に依存しない形で Web サイトをアプリ化する事ができる。

GitHub - jiahaog/nativefier: Make any web page a desktop application

nativefier を簡単に説明すると Web サイトに Electron の皮を被せてアプリ化するコマンドだ。なので Electron が動く環境であればアプリとして動く。

nativefier のインストール

nativefier をインストールするには npm が必要だ。npm は Node.js をインストールするとついてくる。以下の Node.js の Web サイトよりファイルをダウンロードし、インストールしよう。

Node.js

C:\>npm install nativefier -g C:\Users\USERNAME\AppData\Roaming\npm\nativefier -> C:\Users\USERNAME\AppData\Roaming\npm\node_modules\nativefier\lib\cli.js + nativefier@7.6.2 added 323 packages in 30.435s

これでインストールできたはずだ。試しに nativefier コマンドを実行してみよう。

C:\>nativefier

Usage: cli [options] <targetUrl> [dest]

出力は長いので省略するがエラーなどが表示されず、コマンドの利用方法が出てきたら OK だ。

nativefier で Web サイトをアプリ化する

Web サイトをアプリ化するには nativefier URL というコマンドを実行する。試しにこのブログ(https://loumo.jp/)をアプリ化してみよう。

C:\>nativefier "https://loumo.jp/" copying [=========== ] 21%WARNING: The callback-based version of packager() is deprecated and will be removed in a future major version, please convert to the Promise version or use the nodeify module. packaging [============================== ] 60%Downloading Downloading tmp-12356-1-SHASUMS256.txt-1.8.6 [============================================>] 100.0% of 5.74 kB (5.74 kB/s) Packaging app for platform win32 x64 using electron v1.8.6

アプリはコマンドを実行したディレクトリに生成される。

Windows であれば exe を、macOS であれば app を実行すれば Web サイトだけのウインドウが実行するはずだ。

Gmail のような認証が必要な Web サイトであっても問題なく利用できる。

セッション情報を保持している為、一度ログインすればアプリを再起動しても再度ログインする手間が省ける。

アイコンやアプリ名は自動的に取得されるが、手動で設定する事も可能だ。

C:\>nativefier "https://mail.google.com/" -name "Gmail" -icon "path-to-gmail-icon.png"

Gmail のような認証が必要な Web サイトはアプリ名がログイン前のものになってしまうので、手動で指定したほうが良いだろう。

nativefier のオプション

nativefier には様々なオプションが用意されている。使いそうなものを列挙してみる。

-n, --name アプリ名を指定する
-p, --platform 生成したアプリを利用する OS を指定する。linux/windows/osx といった値が入る。何も指定しなければ現在実行している OS のものが生成される
-i, --icon アイコン画像を指定する。画像の種類は Windows/Linux は png, macOS はそれに加え icns が利用できる
--width アプリの横幅を指定する。デフォルトは1280px
--height アプリの縦幅を指定する。デフォルトは800px
--x アプリケーションウインドウの表示位置xを指定する
--y アプリケーションウインドウの表示位置yを指定する
-m, --show-menu-bar メニューバーを表示する。指定しなかった場合でもaltキーで表示できる。
-f, --fast-quit macOS でウインドウを閉じた際にアプリも終了する
-u, --user-agent ユーザーエージェントを指定する
--flash FLASH を有効にする
--full-screen フルスクリーンで起動する
--maximize 最大化で起動する
--disable-context-menu 右クリックを無効化する
--zoom ズームレベルを指定する
--always-on-top アプリを常にトップに表示

オプションは複数まとめて指定できる。

どのようなオプションがあるのかだけでもざっと眺めておけばそのうち役に立つかもしれない。

Sponsored Link

コメント

タイトルとURLをコピーしました