メニューを閉じる

テクノモバイルグループ

メニューを開く

2017.11.06

開発環境・ツール

NW.jsでwebアプリをビルドしてみた

こんにちは、新卒のshiroです。

NW.jsを使用し、HTML+CSS+JavaScriptのwebアプリをビルドしてみました。
今回は備忘録としてその方法の紹介です。

今回の環境もwindows10 Home 64bitOSになります。
MacOSは苦手なのです……。

NW.jsはnpmコマンドを利用して操作するので、それが入っているNode.jsのインストールが必要となります。
nodejs.orgから推奨版または最新版をインストールしておきましょう。
また今回はビルドが目的なので、用意したwebアプリの詳細は省略します。

package.jsonの作成
nw、nw-builderのインストール
起動・ビルド

package.jsonの作成

NW.jsでビルドする際、package.jsonが必要なので作成します。

今回の例でビルドするフォルダ構成の現状は以下と想定します。
各自の構成に合わせて読み替えてください。

cmdまたはNode.js command promptを管理者権限で開いて、sampleフォルダに移動します。
ここで

を入力し、確認項目で何も考えずEnterを押します。
2017-10-16_15h34_43
すべてyes扱いになる

でもいいでしょう。
するとsampleフォルダ直下にpackage.jsonファイルが作成されます。
これをsrcフォルダ内にコピーします。
これで現在、フォルダ構成は以下の様になっているはずです。

まずはsrcフォルダ内のpackage.jsonを編集します。

下記は一例になります。

この中で
name
version
main
は必須になります。
今回書いたwindow内の各要素は以下の通りです。

resizable リサイズを可能にするか。作成していたものの関係で、今回はfalseにしました。
show_in_taskbar タスクバーに表示するか。常に表示させるつもりだったので、場所を取らないようfalseにしました。

package.jsonに記述する内容の詳細はManifest Formatを確認してください。

TIPS – エントリーポイントをjavascriptにする

先ほどのpackage.json内の

はエントリーポイントを設定しています。
ここにはjsファイルを設定することもできます。
例えば

として、js/entry.jsに

と記述すると、index.htmlを画面中央に指定したサイズで表示することができます。

! Issue

ただし、理由は不明ですが、resizableをfalseにすると表示させたいコンテンツのwidthとheightからそれぞれ10引いた値を設定しないと余白が表示されてしまいます。
正直よくわからないですが、ウィンドウサイズに関するバグ(github:Window Size Bug · Issue #5337)と関係があるかもしれません。

次にsampleフォルダ直下のpackage.jsonを編集します。
scriptの中身を以下の2行で上書きします。

これらは”npm run <command>”で実行します。
“nw [pass]”はnw.jsで実際に起動するコマンドになります。
“nwbuild [options] [pass]”は名前の通りビルドする際のコマンドです。
“-p”はプラットフォームで、作成したいもののみ記述します。
“-o”は出力先です。
最後にソースファイルの場所を指定します。

nw、nw-builderのインストール

先ほど”script”に記述したものは、このままでは動きません。
なので、nwとnw-builderをインストールします。
今回はグローバルではなく、sampleフォルダ直下にインストールします。
nwとnwbuildはdevDependenciesに記述されるようにします。

cmdで以下の通り記述します。

どちらも時間がかかるので、気長に待ちましょう。

TIPS – コンソール(開発者ツール)の表示

このままでは後の”npm run dev”で起動した際、F12キーでコンソール(開発者ツール)が開きません。
なので、開くようにしたい場合は以下の様にします。

でnwをアンインストールした後、

でインストールし直してください。
それから再びdevで動かします。
これでF12押下でコンソールが開きます。

インストール後、

となり、またsample/package.json内に

が記述されていれば成功です。
0.25.4と3.4.1はバージョンなので、変わることがあります。

起動・ビルド

では、cmdで

と記述してみましょう。

正常にアプリが動作していれば問題ありません。
ウィンドウサイズが合わない場合、src/package.jsonの”window”にwidthとheightを記述するといいでしょう。

正常に動作することを確認したら、

でビルドします。
これはかなり時間がかかります。

ビルドが完了すると、sample/build/sample内に-oで指定したフォルダが作成されています。
これで完了です。

一緒に語られることが多いElectronも触ってみたいですね。

楽しいプログラミングライフを!

EOF.


【テクノモバイルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』
https://qangaroo.jp/

最近の記事

SNS共有

X CLOSE
X CLOSE
X CLOSE