esaをElectronでラップしてアプリにした

Published at 2016-12-01

※この記事は Electron Advent Calendar 2016 1日目の記事です。

プロジェクトで esa を頻繁に使っているので、 Electron でラップして Dock に常駐できるようにした。鳥から連想して、ウズラを意味する Quail という名前にしてみたが、深い意味はない。

Quail

インストールするには 1000ch/quail/releases からアーカイブファイルをダウンロードして、アプリケーションファイルを任意の場所に配置してもらうだけ。

サードパーティーesaツール

ありがたいことにサードパーティーesaツールに載せてもらった。Windows ビルドも用意でき次第、追加してもらおう。

【お知らせ】esa 非公式 Mac/Linux app “Quail” by @1000ch をサードパーティーesaツールに追加しました ( ⁰⊖⁰) #ﾄﾉｺﾄ https://t.co/3H2SQqj6H6 https://t.co/Ap6RJZESIj
— esa_io (@esa_io) 2016年11月27日

使い手のコンテキストとパフォーマンス

TrelloをElectronでラップしてアプリにしたでコンテキストの区別の話をしたが、他にも気づいたことがある。

画面遷移が少ない Trello とは異なり esa では遷移が頻繁に発生する。 esa は SSR だが SPA ではないので2回目以降のナビゲーションでは画面が白くなる時間があるのだが、これが案外気になる。これもコンテキストの話だ。

Web アプリを Electron でラップして思うのは「 Dock に常駐するアプリなのに画面真っ白になるのなー」という気持ち。ブラウザだと気にならないのにネイティブアプリにした途端、不思議なくらい気になる。
— 1000ch (@1000ch) 2016年11月27日

これについては次のような安直スクリプトを各ページに仕込んで、主な導線への遷移を高速化しようとしたがダメだった。静的なリソースじゃないとですね。

function createPrerender(url) {
  const link = document.createElement('link');
  link.rel = 'prerender';
  link.href = url;
  return link;
}

document.addEventListener('DOMContentLoaded', () => {
  const pathname = location.pathname;
  const head = document.head;
  const baseURL = `${location.protocol}//${location.hostname}`;
  const pathnames = [
    '/posts/new',
    '/',
    '/posts',
    '/tags',
    '/team'
  ];

  pathnames
    .filter(u => u !== pathname)
    .forEach(u => head.appendChild(createPrerender(`${baseURL}${u}`)));
});

また Electron でラップすることでオムニボックスが見えなくなるので UI としてスッキリする反面、閲覧ページの URL を参照できない。結果、URL をシェアできない。また esa の URL をクリックしても起動するのは Quail ではなく Chrome なので、 iOS や Android のようなディープリンクの仕組みが macOS にあれば良いなと思いつつ、今後更にブラウザが Appy になっていって、私達が Web をアプリと認識する未来が来るのかどうかに思いを馳せる。