Solutionテクノモバイルグループの強みServiceサービスのご紹介Informationお知らせ広報ニュース開発ブログ採用ブログ開発ブログ開発環境・ツールNW.jsでwebアプリをビルドしてみた2017.11.06開発環境・ツールNW.jsでwebアプリをビルドしてみたnode-webkitNode.jsNW.jsこんにちは、新卒のshiroです。NW.jsを使用し、HTML+CSS+JavaScriptのwebアプリをビルドしてみました。今回は備忘録としてその方法の紹介です。64bitOSになります。MacOSは苦手なのです......。NW.jsはnpmコマンドを利用して操作するので、それが入っているNode.jsのインストールが必要となります。nodejs.orgから推奨版または最新版をインストールしておきましょう。今回はビルドが目的なので、用意したwebアプリの詳細は省略します。package.jsonの作成nw、nw-builderのインストール起動・ビルドpackage.jsonの作成NW.jsでビルドする際、package.jsonが必要なので作成します。今回の例でビルドするフォルダ構成の現状は以下と想定します。各自の構成に合わせて読み替えてください。promptを管理者権限で開いて、sampleフォルダに移動します。initを入力し、確認項目で何も考えずEnterを押します。-yでもいいでしょう。するとsampleフォルダ直下にpackage.jsonファイルが作成されます。これをsrcフォルダ内にコピーします。これで現在、フォルダ構成は以下の様になっているはずです。│├index.html│└package.json└package.jsonまずはsrcフォルダ内のpackage.jsonを編集します。下記は一例になります。false}}この中でnameversionmainは必須になります。今回書いたwindow内の各要素は以下の通りです。リサイズを可能にするか。作成していたものの関係で、今回はfalseにしました。タスクバーに表示するか。常に表示させるつもりだったので、場所を取らないようfalseにしました。Formatを確認してください。"*.*"はエントリーポイントを設定しています。ここにはjsファイルを設定することもできます。10});と記述すると、index.htmlを画面中央に指定したサイズで表示することができます。Issueただし、理由は不明ですが、resizableをfalseにすると表示させたいコンテンツのwidthとheightからそれぞれ10引いた値を設定しないと余白が表示されてしまいます。#5337)と関係があるかもしれません。次にsampleフォルダ直下のpackage.jsonを編集します。scriptの中身を以下の2行で上書きします。<command>”で実行します。[pass]”はnw.jsで実際に起動するコマンドになります。[pass]”は名前の通りビルドする際のコマンドです。“-p”はプラットフォームで、作成したいもののみ記述します。“-o”は出力先です。最後にソースファイルの場所を指定します。nw、nw-builderのインストール先ほど”script”に記述したものは、このままでは動きません。nwとnw-builderをインストールします。今回はグローバルではなく、sampleフォルダ直下にインストールします。nwとnwbuildはdevDependenciesに記述されるようにします。cmdで以下の通り記述します。--save-devどちらも時間がかかるので、気長に待ちましょう。dev”で起動した際、F12キーでコンソール(開発者ツール)が開きません。開くようにしたい場合は以下の様にします。--save-devでインストールし直してください。それから再びdevで動かします。これでF12押下でコンソールが開きます。"^3.4.1"}が記述されていれば成功です。0.25.4と3.4.1はバージョンなので、変わることがあります。devと記述してみましょう。正常にアプリが動作していれば問題ありません。ウィンドウサイズが合わない場合、src/package.jsonの”window”にwidthとheightを記述するといいでしょう。buildでビルドします。これはかなり時間がかかります。ビルドが完了すると、sample/build/sample内に-oで指定したフォルダが作成されています。一緒に語られることが多いElectronも触ってみたいですね。下記項目に1つでも当てはまる方は是非、詳細ページへ!自分でアプリを作ってみたいITで世の中にワクワクを生み出したい使いやすさ、デザインにこだわったWebサイトを開発したい採用情報の詳細はこちらQangaroo(カンガルー)徹底した見やすさと優れた操作性で、テストの「見える化」を実現。テストの進捗が見える。開発がスマートに進む。