Electron製のアプリの見た目をMacふうのアプリにする electron-photonの話

Electron javascript

最近、社内でLT(https://labs.gree.jp/blog/2018/10/17291/)があって、そこで話をしたので、その時の内容を書く。
これは、その一部の話。

photonkit

Electronアプリの見た目をMacアプリふうにする、photonkitというライブラリがかつてありました。


(このようになる)

なのですが、このphotonkit。最近、開発が止まっておりまして、
例えば、表示されないアイコンがあるとか、
Pull Requestが取り込まれないとか、そういう問題が出ていました。

electron-photon

photonkitはGitHubで管理されているのでフォークできるし、それほど問題でも無いのですが、
そのうち、photonkitの替わりとなるライブラリを作る人が現れます。
それが、このelectron-photonです。

photonkitから、electron-photonへの移行

この2つ、実現したいことは同じなのですが、実装は違っています。
残念ながらライブラリを差し替えたら、「はい、移行完了」とはなりません。

  • photonkit
<!DOCTYPE html>
<html>
  <head>
    <title>Photon</title>
    <link rel="stylesheet" href="photon.css">
    <script src="app.js" charset="utf-8"></script>
  </head>

  <body>
    <div class="window">
      <header class="toolbar toolbar-header">
        <h1 class="title">Photon</h1>
      </header>
      <div class="window-content">
        ...
      </div>
    </div>
  </body>
</html>
  • electron-photon
<ph-window class="vibrancy">
  <tool-bar type="header">
    <h1 class="title">Toolbar Header</h1>
  </tool-bar>

  <window-content>
    ...
  </window-content>

  <tool-bar type="footer">
    <h1 class="title">Toolbar Footer</h1>
  </tool-bar>
</ph-window>

(↑)テンプレートの書き方も違いますね。
試しに自分のアプリで書き換えてみましたが、
デザインはかなり崩れたものになってしまいました。

まとめ

ということで、新しいライブラリが出てきましたが、
新規に導入するならまだしも、
試した感じ、
既存のphotonkitアプリを書き換えるのは、少し面倒だったよ、というお話でした。