メシのタネ

メシのタネになる、Laravelや設計思想の技術配信サイト


node webkitの環境構築

, ,

  1. Webプログラム
  2. javascript
  3. node webkitの環境構築

ってほど大げさなもんじゃないですが。

僕は最近、デスクトップのアプリを何とかして作れないもんかなーと思ってたんです。
Visualstudioとかなー、覚えるの面倒だし、なんかないかなーと思ってたら閃いたんです。

htmlファイルを配布すれば、PCどれでも使えるやんと。
ほんでJS入れてみよーかなと思って、今日朝キュレーターサイトでニュース見てたら、
ブラウザをexeにできるとか書いてあるじゃないですか。

なんだと!?と思って、環境だけでも作ってみようと思って、
調べたらこれまた「 環境の構築も簡単(・ω・)r 」とか言ってるやつが多いので
その通りにやって、npm startってやってみたらダメやん。俺見てるのmac用やん。

ってことでwindows用の情報探したら割りと簡単にできたので、
node webkitの構築までの道のり書いていきます。

ゴールはとりあえず動くまでです。

node webkitをダウンロード

ここからhttps://github.com/rogerwang/node-webkit

windows: win32って書いてあるやつをダウンロード

Cドライブの直下にでも解凍してください。



そうするとdllやらnw.exeやら出てきます。

そのフォルダの中でこの場合

c:\貴方が指定したフォルダ名になってると思います。

プログラム作成

index.htmlになんか適当にhtmlとかjavascriptとか書いて

appフォルダの中に保存してください。

終わったら、それをルートにzip圧縮します。

package.json

それが出来たらルートフォルダのpackage.jsonを編集

一応このエントリが間違ってるかもしれないので

バックアップは取っておいてください。僕はとってあります。


{
    "name": "hoge",
    "version": "0.0.0",
    "main": "app/index.html",
    "window": {
        "width": 500,
        "height": 800,
        "toolbar": false
    }
}

コマンドプロンプト

編集が終わったら、コマンドプロンプトを開きます。
win7ならwindowsキー押してcmdってテキストボックスに入れると開きます。

cd c:\貴方が指定したフォルダ名
ってやってから

copy /b nw.exe+app.zip hello-world.exe

っていう風にやるとappフォルダ内が結合されます。
出てきたexeのフォルダごと多分人に渡すと
windowsアプリの完成なんじゃないでしょうか。
まだシッカリ使ってないので良く分かってない感じ。

npmからやる場合

これしか方法が無いと思ってたので迷いました。
node.jsをインストーラーからインストールして、

npm install nodewebki

で出来ます。
その他のやり方は上とおんなじ。

いじょ(・ω・)r


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.