読者です 読者をやめる 読者になる 読者になる

ElectronのMacOSデスクトップアプリUIキット「Phtoton」とReact

Electron React.js Photon

Photonを使えば、 もともとGithub製のエディタAtom用に作られたElectron(http://electron.atom.io/)で作られたアプリを手早く綺麗に仕上げることができます。

使い方

こちらからPhotonをダウンロードして、 自分のElectronプロジェクトフォルダに入れておきます。

ダウンロードしたPhotonのフォルダ構成は次の通り。

photon/
├── css/
│   ├── photon.css
│   ├── photon.min.css
├── fonts/
│   ├── photon-entypo.eot
│   ├── photon-entypo.svg
│   ├── photon-entypo.ttf
│   └── photon-entypo.woff
└── template-app/
    ├── js/
    │   └── menu.js
    ├── app.js
    ├── index.html
    └── package.json

cssファイルをメインのhtmlファイルから読み込ませれば...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Photon</title>
    <link rel="stylesheet" href="./photon-0.1.2-dist/css/photon.min.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="../dist/bundle.js"></script>
  </body>
</html>

あとはComponentsにある通りに使用できます。 

Reactならサイドバーのオンオフも簡単です。

f:id:uraway:20160218203156g:plain

class Editor extends Component {
  constructor() {
    super();
    this.state = ({
      isShowLeftNav: false
    });
  }

  onClickedCloud() {
    if (this.state.isShowLeftNav) {
      this.setState({ isShowLeftNav: false });
    } else {
      this.setState({ isShowLeftNav: true });
    }
  }

  render() {
    const { isShowLeftNav } = this.state;
    let leftNav;
    if (isShowLeftNav) {
      leftNav = (
        <div className="pane-sm sidebar">
        <nav className="nav-group">
          <h5 className="nav-group-title">Favorites</h5>
        <a className="nav-group-item">
          <span className="icon icon-home"></span>
          connors
        </a>
        <span className="nav-group-item">
          <span className="icon icon-download"></span>
          Downloads
        </span>
        <span className="nav-group-item">
          <span className="icon icon-folder"></span>
          Documents
        </span>
        <span className="nav-group-item">
          <span className="icon icon-signal"></span>
          AirPlay
        </span>
        <span className="nav-group-item">
          <span className="icon icon-print"></span>
          Applications
        </span>
        <span className="nav-group-item">
          <span className="icon icon-cloud"></span>
          Desktop
        </span>
      </nav>
    </div>
      );
    } else {
      leftNav = null;
    }

    return (
      <div className="window">
        <div className="window-content">
          <div className="pane-group">
            {leftNav}
          </div>
        </div>
        <footer className="toolbar toolbar-footer">
          <button className="btn btn-default" onClick={::this.onClickedCloud}>
            <span className="icon icon-cloud"/>
          </button>
        </footer>
      </div>
    );
  }
}

export default Editor;