PhotonでOSX風Electronアプリを作成する

ElectronでOSX風のUIを簡単に作れるPhotonを使ってみる。

Eelectronをインストール

先にElectornをインストールしておく。

Photonのリポジトリをclone

$ git clone https://github.com/connors/photon.git

プロジェクト構成

Photonを使用してElectronアプリを作成するために必要なcssやfont、アプリ本体はdist以下に配置されている。tagged downloadsからはdist以下のみダウンロードできる。

photon
├── CNAME
├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE
├── README.md
├── _config.yml
├── dist
├── docs
├── fonts
├── package.json
└── sass

contributeしたい時はgruntを使う。

Photonのサンプルアプリを動かしてみる

$ npm start

もしくは

$ electron dist/template-app

Components

色々なComponentsが用意されていて、組み合わせると簡単にOSX風UIを組み立てれる。