NEWS

CarloでWeb制作者が手軽にデスクトップアプリを作る

2019年2月5日

フィリピン拠点（LH&c）でも開発を続けているうっちゃんこと鵜飼です。

ふと社内向けの簡単なツールを作成しようと思いつき、ブラウザ拡張では少し使いづらい内容であったこと、また普段からWebサイト制作で利用しているJavaScriptでデスクトップアプリを作成できるライブラリが存在していることから、デスクトップアプリの作成を検討してみました。

有名な所ではElectronやNW.jsといったライブラリがあるのですが、これらのライブラリはどんな小さなアプリでもChromiumが必要となるためツールの内容に比べて容量が大きくなってしまいがちです。簡単なツールなのに容量が大きくなってしまうのは少し気になりますね。

そこで、今回はGoogleが開発しているCarloというライブラリを試してみました。

Carloとは

前述の通りElectronやNW.jsはChromiumが必要となります。しかし、Carloは既にインストールされているGoogle Chromeをラップしてデスクトップアプリとして起動するため容量が小さく抑えられます。

反対に、Google Chromeがインストールされていない環境では動作しないのですが、弊社ではGoogle Chromeも制作物の動作確認環境の一つですので、全員がインストールされている前提があるため、社内向けのツールであれば問題ありませんでした。

Carloを動かしてみる

まずはCarloをプロジェクトのフォルダでインストールします。

npm i carlo
# または
yarn add carlo

次にCarloを起動するJSファイルを作成します。
とりあえずはサンプルコードから一部削ったものですが、

// ファイル名はここでは"example.js"とする
const carlo = require('carlo');

(async () => {
  // Carloを起動
  const app = await carlo.launch();

  // ウィンドウが閉じられたらプロセスを終了する
  app.on('exit', () => process.exit());

  // 画面描画に必要なファイル（HTML/CSS/JavaScript）のディレクトリを指定
  app.serveFolder(__dirname);

  // 最初に表示するHTMLファイルを指定
  await app.load('example.html');
})();

これでnode example.jsと実行するとexample.htmlをデスクトップアプリ風に立ち上げてくれます。
クライアント側だけで完結するモノであれば、後は普通のWebサイト作るような感覚でファイルを追加していけば大丈夫です。

Node.jsと連携する

ElectronやNW.jsと同様に、CarloもNode.jsの実行結果を受け渡すことができます。上記のサンプルコードに少し追加して、

const carlo = require('carlo');

(async () => {
  const app = await carlo.launch();
  app.on('exit', () => process.exit());
  app.serveFolder(__dirname);
  
  // exposeFunctionでクライアント側から呼び出す関数を定義する
  // クライアント側からはwindow.square(num)から呼び出せる
  app.exposeFunction('square', (num) => {
    return num * num;
  });

  await app.load('example.html');
})();

この様に書くと、クライアントからNode.jsを実行、その実行結果をクライアント側に返すことが出来ます。

また、このexposeFunctionという関数ですが、どうもPuppeteerの機能をそのまま利用している様で、Carlo自体もPuppeteerを利用して作られているみたいです。

Puppeteerの関数を実行してみる

どうせなので、Puppeteerの機能もCarlo経由で実行してみます。
例えば、デスクトップアプリ実行画面をキャプチャしたい場合Puppeteerのscreenshot関数が利用できます。

app.exposeFunction('screenshot', () => {
  return app.mainWindow().page_.screenshot({
    type: 'jpeg',
    quality: 80,
    fullPage: true,
    encoding: 'base64',
  })
});

と記述すれば、クライアント側にBase64エンコードされたキャプチャデータが渡されます。
後はクライアント側で表示させたり、ダンロードさせたりしちゃえばキャプチャしたデータを取得できますね。

まとめ

まだv1.0にもなっていないライブラリで、ElectronやNW.jsに比べると用意されている機能も少ないのですが、インストールされているChromeを再利用する、というコンセプトは面白いですね。

バージョンが上がってCarloでも出来る機能が増えると、Electron製だけじゃなくてCarlo版の軽量ソフトみたいなものも生まれるかもしれませんね。

とりあえずは、

  • デスクトップアプリとして作りたいけどWeb系のプログラミングの知識しかない
  • Electronで作るほどの高機能でも無いし容量が気になる
  • Chromeが入っている環境が前提

という背景があるのであれば、一つ選択肢に加えてみてはいかがでしょうか？

参考