Photon kitを使ってネイティブっぽい綺麗なUIを試した

Electronを使って簡単にデスクトップアプリを作成できるようになったのはいいんですが
デスクトップアプリのUIが劣化してしまうのはユーザーとしてはきっと辛いはず
そこで[PhotonKit](http://photonkit.com/)(以降はPhoton)ならOSXのネイティブっぽいUIを提供してくれます。
OSXユーザーなら親しみやすくWindowsユーザーも「あっiTunesっぽい」と思ってくれるのではないかなと思います。

![スクリーンショット 2015-11-29 1.18.36.png](https://qiita-image-store.s3.amazonaws.com/0/15818/f4260728-7197-f464-5f54-563c34242e71.png)


# ダウンロード

Photonの[Getting started](http://photonkit.com/getting-started/)の右側にあるDownloadからzipをダウンロードします

ダウンロードしたPhotonのフォルダー構成は以下のようになっています。(v0.1.2の時点では)

```
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
```

主に`photon.min.css`と`fonts/`の中を使います。

browserifyとかで使いたくてnpmで管理したいときは以下の様にしてインストールします。

package.jsonはありますがnpmのレジストリには上がってないので注意してください。

```bash
$ npm install https://github.com/connors/photon
```


ちなみにelectron-prebuiltを入れていればphotonディレクトリに移動して`electron template-app`とコマンドを叩いて確認できます。

入ってない場合も`npm install -g electron-prebuilt`で簡単にインストールできます。

# コンポーネント

Photonが用意しているコンポーネントの紹介です。

## Bars

![スクリーンショット 2015-12-04 20.40.24.png](https://qiita-image-store.s3.amazonaws.com/0/15818/99ca5087-1f86-d7f6-f26e-18ff01b04539.png)

Barです、headerをfooterに置き換えれば下にも配置できます。

```html
<header class="toolbar toolbar-header">
    <h1 class="title">Photon</h1>
</header>
```

## Bars with actions

![スクリーンショット 2015-12-04 20.45.39.png](https://qiita-image-store.s3.amazonaws.com/0/15818/872ab9c1-74fd-07ca-3a10-772e143b3976.png)

Barにボタンを追加できます。これだけでも一気にアプリケーションっぽくなりますね。


```html
<header class="toolbar toolbar-header">
  <h1 class="title">Photon</h1>

  <div class="toolbar-actions">
    <div class="btn-group">
      <button class="btn btn-default">
        <span class="icon icon-home"></span>
      </button>
      <button class="btn btn-default">
        <span class="icon icon-folder"></span>
      </button>
      <button class="btn btn-default active">
        <span class="icon icon-cloud"></span>
      </button>
      <button class="btn btn-default">
        <span class="icon icon-popup"></span>
      </button>
      <button class="btn btn-default">
        <span class="icon icon-shuffle"></span>
      </button>
    </div>

    <button class="btn btn-default">
      <span class="icon icon-home icon-text"></span>
      Filters
    </button>

    <button class="btn btn-default btn-dropdown pull-right">
      <span class="icon icon-megaphone"></span>
    </button>
  </div>
</header>
```

## Bars with tabs

![スクリーンショット 2015-12-04 20.46.46.png](https://qiita-image-store.s3.amazonaws.com/0/15818/08ebe5cc-dea0-a3aa-88f0-ba42431e8123.png)

タブを追加できます。

タブもまた利用頻度の高いコンポーネントですので覚えときたいですね。

```html
<header class="toolbar toolbar-header">
    <h1 class="title">Photon</h1>
</header>

<div class="tab-group">
    <div class="tab-item">
        <span class="icon icon-cancel icon-close-tab"></span>
          Tab
    </div>
    <div class="tab-item active">
        <span class="icon icon-cancel icon-close-tab"></span>
          Tab active
    </div>
    <div class="tab-item">
        <span class="icon icon-cancel icon-close-tab"></span>
        Tab
    </div>
    <div class="tab-item tab-item-fixed">
        <span class="icon icon-plus"></span>
    </div>
</div>
```

## Navs

![スクリーンショット 2015-12-04 20.58.51.png](https://qiita-image-store.s3.amazonaws.com/0/15818/26650b33-552f-6557-abbf-eb9948bfa6d6.png)

左サイドにナビゲーションを追加できます。

アイコンも用意されているのですぐにリッチなナビゲーションを作れます。

```html
<div class="window-content">
  <nav class="nav-group" style="background-color: #f5f5f4;">
    <h5 class="nav-group-title">Favorites</h5>
    <a class="nav-group-item active">
      <span class="icon icon-home"></span>
      koki_cheese
    </a>
    <span class="nav-group-item">
      <span class="icon icon-download"></span>
      Downloads
    </span>
    <span class="nav-group-item">
      <span class="icon icon-folder"></span>
      Documents
    </span>
    <span class="nav-group-item">
      <span class="icon icon-signal"></span>
      AirPlay
    </span>
    <span class="nav-group-item">
      <span class="icon icon-print"></span>
      Applications
    </span>
    <span class="nav-group-item">
      <span class="icon icon-cloud"></span>
      Desktop
    </span>
  </nav>
</div>
```

## Lists

![スクリーンショット 2015-12-04 21.13.02.png](https://qiita-image-store.s3.amazonaws.com/0/15818/2d442a56-2844-686f-8682-558bc18cef99.png)

リストです。これも利用頻度が高いので覚えといて損はないですね。

pane-groupを利用してサイズを調整できます。

```html
<div class="pane-group">
  <div class="pane pane-sm sidebar">
    <ul class="list-group">
      <li class="list-group-header">
        <input class="form-control" type="text" placeholder="Search for someone">
      </li>
      <li class="list-group-item">
        <img class="img-circle media-object pull-left" src="https://pbs.twimg.com/profile_images/504311686455508992/U3txAd4E_normal.png" width="32" height="32">
        <div class="media-body">
          <strong>リストアイテム</strong>
          <p>texttext</p>
        </div>
      </li>
      <li class="list-group-item">
        <img class="img-circle media-object pull-left" src="https://pbs.twimg.com/profile_images/504311686455508992/U3txAd4E_normal.png" width="32" height="32">
        <div class="media-body">
          <strong>リストアイテム</strong>
          <p>texttext</p>
        </div>
      </li>
    </ul>
  </div>
</div>
```

## Tables
 
![スクリーンショット 2015-12-04 21.21.28.png](https://qiita-image-store.s3.amazonaws.com/0/15818/7dcbb90c-ae5e-1eb4-79b8-7bd3519adaa5.png)

テーブルもネイティブっぽくなりますね。

```html
<div class="pane">
  <table class="table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Kind</th>
        <th>File Size</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>photon.css</td>
        <td>CSS</td>
        <td>28K</td>
      </tr>
      <tr>
        <td>photon.css</td>
        <td>CSS</td>
        <td>28K</td>
      </tr>
      <tr>
        <td>photon.css</td>
        <td>CSS</td>
        <td>28K</td>
      </tr>
      <tr>
        <td>photon.css</td>
        <td>CSS</td>
        <td>28K</td>
      </tr>
    </tbody>
  </table>
</div>
```

# まとめ

Bootstrapを使ったことがある人ならなんとなく共通する部分もあるのでとっかかりやすいのではないでしょうか？

デスクトップアプリとか関係なく利用者にストレスを感じさせないUIを提供したいし
かと言ってそこまで手間も掛けたくないのでこういう系のライブラリは積極的に使っていきたいですね。