※この記事はブログからの転載記事です。
はじめに
前回記事を読んでくださった方はご存知だと思いますが、僕はKindleを便利にするためのアプリケーションをNW.jsを用いて開発しています。
この度ついに、exe化することに成功しましたので、今回はNW.jsをいざ使ってみたときに躓いたポイントを紹介していきたいと思います！
つまづきポイント
つまづきポイント①: 3rd製node_moduleもビルド対象！
...まぁ、冷静に考えれば「そりゃそうだ」なんですけどね。
NW.jsの紹介記事で、ビルド対象をsrcフォルダに移動させる必要があることを紹介しました。
このとき、srcに移動したソースファイル内でrequireされているモジュールについても、srcフォルダにインストールされている必要があります。
上記のようにnode_modulesフォルダがsrcフォルダ内に生成されている状態でしたら、
そのnode_modulesフォルダにインストールされているモジュールはrequireできるようになります。
このsrcフォルダへモジュールのインストールは
srcフォルダをカレントフォルダにした状態でnpm installするだけです。
つまづきポイント②: Nodeモジュール化してないコードは見えちゃう！
もし、index.htmlにほぼすべての処理を記載していたとします。
すると、この次に紹介する「右クリックすると意図しないメニューが出る」の対策をしていない場合では、
F12を押すと、index.htmlに記載されていたり、
scriptタグに記述されているファイルについてはソースが丸裸になります。
なるべくNode.jsのコードは外部モジュール化したほうが良いでしょう。
つまづきポイント③: 右クリックすると意図しないメニューが出る
NW.jsはデフォルトでChrome DevToolsが有効な状態でビルドされます。
Chrome DevToolsが有効な状態だと、NW.js上にて生成されたウィンドウの空欄上を右クリックすると、
再起動とか検証とかいろいろ見られたくない場所へのメニューが出現してしまいます。
これは製品として嫌なので、
srcフォルダ内のpackage.jsonに"chromium-args" : "--disable-devtools"の記述を追加してChrome DevToolsを無効にする必要があります。
つまづきポイント④: process.argvが使えない！
NW.jsでprocess.argvを利用すると、いくら配列を渡しても、
process.argv.lengthが1になります。公式のリファレンスにてnw.App.argvの利用がアナウンスされているっぽいので、nw.App.argvを利用してください。
使い方はprocess.argv同様です。
締め
ネイティブアプリ化といえばElectronだったり、React Nativeばかりがもてはやされて、なかなかNW.jsの日本語の情報が少ないですが...
是非、皆さんNW.jsを使ってみてください！
あんなシンプルな方法でビルドができてしまったり、まだまだポテンシャルがありそうな気がしてドキがムネムネです！