2024.10.01
【勉強】ミドルウェア・アプリケーションのEOL・EOSLについて学んでみた
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のインストール
起動・ビルド
NW.jsでビルドする際、package.jsonが必要なので作成します。
今回の例でビルドするフォルダ構成の現状は以下と想定します。
各自の構成に合わせて読み替えてください。
sample └src ├css │└cssファイル群 ├js │└jsファイル群 └index.html
cmdまたはNode.js command promptを管理者権限で開いて、sampleフォルダに移動します。
ここで
npm init
を入力し、確認項目で何も考えずEnterを押します。
すべてyes扱いになる
npm init -y
でもいいでしょう。
するとsampleフォルダ直下にpackage.jsonファイルが作成されます。
これをsrcフォルダ内にコピーします。
これで現在、フォルダ構成は以下の様になっているはずです。
sample ├src │├css ││└cssファイル群 │├js ││└jsファイル群 │├index.html │└package.json └package.json
まずはsrcフォルダ内のpackage.jsonを編集します。
下記は一例になります。
{ "name": "sample", "version":"1.0.0", "main": "index.html", "window": { "resizable": false, "show_in_taskbar": false } }
この中で
name
version
main
は必須になります。
今回書いたwindow内の各要素は以下の通りです。
resizable | リサイズを可能にするか。作成していたものの関係で、今回はfalseにしました。 |
show_in_taskbar | タスクバーに表示するか。常に表示させるつもりだったので、場所を取らないようfalseにしました。 |
package.jsonに記述する内容の詳細はManifest Formatを確認してください。
先ほどのpackage.json内の
"main": "*.*"
はエントリーポイントを設定しています。
ここにはjsファイルを設定することもできます。
例えば
"main": "js/entry.js"
として、js/entry.jsに
// NW.js 0.13.0以降の記述方法 nw.Window.open("../index.html",{ position: "center", width: 350,//resizable -= 10 height: 36//resizable -= 10 });
と記述すると、index.htmlを画面中央に指定したサイズで表示することができます。
ただし、理由は不明ですが、resizableをfalseにすると表示させたいコンテンツのwidthとheightからそれぞれ10引いた値を設定しないと余白が表示されてしまいます。
正直よくわからないですが、ウィンドウサイズに関するバグ(github:Window Size Bug · Issue #5337)と関係があるかもしれません。
次にsampleフォルダ直下のpackage.jsonを編集します。
scriptの中身を以下の2行で上書きします。
"dev": "nw src/", "build": "nwbuild -p win32,win64,osx64,linux32,linux64 -o build/ src/"
これらは”npm run <command>”で実行します。
“nw [pass]”はnw.jsで実際に起動するコマンドになります。
“nwbuild [options] [pass]”は名前の通りビルドする際のコマンドです。
“-p”はプラットフォームで、作成したいもののみ記述します。
“-o”は出力先です。
最後にソースファイルの場所を指定します。
先ほど”script”に記述したものは、このままでは動きません。
なので、nwとnw-builderをインストールします。
今回はグローバルではなく、sampleフォルダ直下にインストールします。
nwとnwbuildはdevDependenciesに記述されるようにします。
cmdで以下の通り記述します。
npm i nw --save-dev npm i nw-builder --save-dev
どちらも時間がかかるので、気長に待ちましょう。
このままでは後の”npm run dev”で起動した際、F12キーでコンソール(開発者ツール)が開きません。
なので、開くようにしたい場合は以下の様にします。
npm uninstall nw --save-dev
でnwをアンインストールした後、
npm i nw --nwjs_build_type=sdk --save-dev
でインストールし直してください。
それから再びdevで動かします。
これでF12押下でコンソールが開きます。
インストール後、
sample ├node_modules │└複数フォルダ ├src │├css ││└cssファイル群 │├js ││└jsファイル群 │├index.html │└package.json ├package.json └package-lock.json
となり、またsample/package.json内に
"devDependencies": { "nw": "^0.25.4", "nw-builder": "^3.4.1" }
が記述されていれば成功です。
0.25.4と3.4.1はバージョンなので、変わることがあります。
では、cmdで
npm run dev
と記述してみましょう。
正常にアプリが動作していれば問題ありません。
ウィンドウサイズが合わない場合、src/package.jsonの”window”にwidthとheightを記述するといいでしょう。
正常に動作することを確認したら、
npm run build
でビルドします。
これはかなり時間がかかります。
ビルドが完了すると、sample/build/sample内に-oで指定したフォルダが作成されています。
これで完了です。
一緒に語られることが多いElectronも触ってみたいですね。
楽しいプログラミングライフを!
EOF.
【記事への感想募集中!】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!【テクノデジタルではエンジニア/デザイナーを積極採用中です!】
下記項目に1つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索