Photonを使ってElectronアプリをOSX風のUIにしてみた

ElectronをどのようにアプリっぽいUIにしようか悩んでいたのですが、OSXみたいなUIにしてくれるPhotonなるライブラリがあるとのことで早速試してみました。Bootstrapにしようかと思っていたのですが、こっちの方がカッコ良さそうです。

[ad#top-1]

完成イメージ

まず最初に完成イメージです。↓こんな感じです。

ツールボタンがあって、タブページがあって、フッターがあります。元々エディターを作ろうと思っていたところなので、UIはだいたいこんな感じでしょうか。

 

Photonのダウンロード

ここからダウンロードできます。

http://photonkit.com/

トップページの右上に、「Getting Started」というリンクがあるのでそこから入ります。

 

右サイドバーに「Download」ボタンがあるので、そこをクリックしてダウンロードしましょう。

 

解凍すると以下のように３つのフォルダーから構成されています。僕はこのフォルダを「photon」というフォルダにまとめました。なので、HTMLからファイルを呼び出すときは、photon/css/photon.css のようなパスになります。

 

コーディング

index.htmlは以下のようになります。

これを実行すると以下の画面が現れます。自作するよりカッコいいですね。

 

ちなみに、PhotonのWebサイトの「Getting Started」ページの下の方に、基本的なテンプレートが載っているので、これをベースに作ると便利です。

１つ不満な点があるとすれば、アイコンの種類が若干少ない点と、デスクトップアプリ用が少ないという点です。どちらかというとWebページ用が多いみたいです。どうしてもない場合は、Font Awesome でも使おうかなとも思案中・・・。

[ad#ad-1]

 - Electron