BETA

NativefierでQrunchをデスクトップ版アプリとして使う

投稿日:2018-10-24
最終更新:2018-10-24

ログ機能をガンガン使うにあたり、Macであればcommand+tabですぐQrunchを表示・入力したい。
そこで、Nativefierというコマンドラインツールを利用すると、簡単にデスクトップアプリとして利用できるようになる。

Nativefierは現時点でmacOS 10.9+ / Windows / Linuxに対応しているが、当方はMacしか持っていないのでMacの利用を前提とする。コマンドラインツールなのでターミナルのようなCLIの操作が必要だが、慣れていない人に向けて丁寧めに書く。

Node.js のインストール

ターミナルを起動し、node -vを入力/Returnする。
v10.11.0のようなバージョンが表示されていれば、既にインストールされているのでOK。

表示されなければ、公式サイトからパッケージをダウンロード、インストールしてから再度確認する。

Nativefierのインストール

ターミナルにnpm install nativefier -gを入力/Returnすると、Nativefierをグローバルインストールできる。(現在ターミナルで開いている場所ではなく、npmのインストール場所へインストールされる)

もし権限がなくエラーになる場合は、sudo npm install nativefier -gとし、ユーザーパスワードを入力する。

Qrunchをアプリ化する

まず、次を入力/Returnし、ターミナル上でアプリケーションフォルダに移動する。
(CLI慣れてる人はスルーしてください)
cd /Applications

続いて次の記述を入力/Returnする。
nativefier https://qrunch.io/

これで、アプリケーションフォルダ内に「Qrunch-darwin-x64」という名称のフォルダが生成され、中にQrunch.appが入っている。起動すると、デスクトップアプリとしてQrunchを利用できる。

メールアドレスでのログインはスムーズだが、Twitter、Facebook、Github、はてなログインの場合注意が必要だ。 ログインクリックの直後デフォルトブラウザへ移動するがそこでログインしても意味がない。元のアプリ画面に戻り、command+Rでリロードすると表示される認証画面からログインすること。

Googleログインの場合

Googleログインは先の方法でもうまくいかない。アプリの画面に「転送しています」という表示が出て、それ以上何もできなくなってしまう。

そこで、アプリ生成時の記述を次のように変更する。
nativefier --internal-urls ".*google.com.*" https://qrunch.io/

これで、他サービスのログイン時と同様、ブラウザへの移動は無視しアプリ画面をリロードするとログイン画面が表示されるようになる。

おまけ

アイコンの変更

先に挙げた記述での生成では、Qrunchデフォルトの画像を使っているので少々浮く。

アイコン画像を自作すれば、生成時にそれを指定することも可能だ。


私は勝手にそれっぽいアイコンファイル(.icns)を作成して使ってみている。
このファイル形式であれば、Finderの「情報を見る」にて後からでも変更できる。

※個人利用のみ可
※再配布はいかなる形でも禁止

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@rokuzeudon の技術メモログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!